Bài Giảng Thiết Kế Và Triển Khai Website

Bộ môn CNTT - Khoa HTTT Kinh tế và 8/9/2017
TMĐT
THIẾT KẾ VÀ TRIỂN KHAI WEBSITE

Trường Đại học Thương mại
Khoa HTTT Kinh tế và THMĐT • Phân phối tiết học
Bộ môn Công nghệ thông tin − Lý thuyết: 27 tiết
− Thảo luận: 6 tiết
− Thực hành: 12 tiết
Bài giảng học phần: • Đánh giá kết quả
Thiết kế và triển khai Website • ‐ Điểm chuyên cần: 10%
• ‐ K/Tra + T/Hành+T/luận: 30%
• ‐ Thi cuối kỳ: 60%
8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 1 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 2
MỤC TIÊU CỦA MÔN HỌC MỤC TIÊU CỤ THỂ

• Cung cấp những kiến thức cơ bản về Internet, World
• Môn học cung cấp những kiến thức cơ bản về wide web, giao thức HTTP, giao thức FTP, ngôn ngữ
world wide web, các giao thức, ngôn ngữ đánh dấu HTML,...
đánh dấu và một số ngôn ngữ khác dùng để
tạo web.
web Thông qua việc giới thiệu một số • Một số ngôn ngữ và công cụ trợ giúp thiết kế và xây
công cụ thiết kế và trợ giúp việc xây dựng dựng website.
website, giúp học viên nắm được những yêu • Qui trình triển khai, nâng cấp, bảo trì, Phương thức
cầu, qui trình thiết kế và triển khai một quảng bá trang web trên mạng.
website thực tế. • Quy trình thiết kế và triển khai một website TMĐT
8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 3 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 4
TÀI LIỆU THAM KHẢO NỘI DUNG CHƯƠNG TRÌNH

• TLTK bắt buộc:
• [1] Harvey & Paul, Internet & World Wide Web: How to Program Chương 1. Tổng quan về thiết kế và triển khai
(4th Edition), Deitel & Associates (Paperback), 2010 website
• [2] Gerry McGovern, The Website Manager’s Handbook, ISBN:
978‐1‐4116‐8529‐1, Chương 2. Thiết kế và xử lý đồ họa trên website
• Shane Diffily, 2014 Chương 3. Một số ngôn ngữ xây dưng Website
• [3] Nguyễn
N ễ Trường
T ờ Sinh,
Si h Thiết kế Web
W b bằng
bằ hình
hì h minh
i h hoạ,
h NXB
Minh Khai, 2007 Chương 4. Triển khai Website
• [4] Phạm Hữu Khang, Xây dựng và triển khai ứng dụng TMĐT,
NXB Thống kê, 2006
• [5] Lê Tuấn Hùng, Huỳnh Quyết Thắng, Kỹ thuật đồ họa, NXB
KH&KT, 2005
• [6] Giáo trình tự học Photoshop CS6, Internet
8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 5 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 6
Bài giảng Thiết kế và triển khai Website 1

TMĐT
Nội dung
Chương 1 1.1. Một số khái niệm cơ bản

1.2. Nguyên tắc và quy trình thiết kế Website
Tổng quan về thiết kế và 1.3 Nguyên tắc và quy trình triển khai Website
triển khai website
Bộ môn CNTT - Khoa HTTT Kinh tế và

8/9/2017 7 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 8
TMĐT
1.1. Một số khái niệm cơ bản 1.1.1. Cơ bản về Internet

1.1.1. Cơ bản về Internet • Mạng máy tính – phân loại theo
1.1.2. World wide web ‐ Website phạm vi địa lý
1.1.3. Giao thức truyền nhận Client/Server • Hệ điều hành mạng
• Môô hình
hì h TCP/IP
/
• Dịch vụ tên miền
8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 9 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 10
4 lớp của mô hình TCP/IP Chồng giao thức TCP/IP
• Layer 4: Application (ứng dụng)

• Layer 3: Transport (vận chuyển)
• Layer 2: Internet
• Layer 1: Network access (truy
cập mạng)

TMĐT
DNS: nhớ tên thay vì địa chỉ IP Hệ thống quản lý tên miền
• DNS server là một máy trên mạng có nhiệm vụ
quản lý tên miền và đáp ứng các yêu cầu của
client
• Có nhiều DNS server liên kết với nhau, chia sẻ
và quản lý truy vấn đến CSDL tên miền
• CSDL tên miền có cấu trúc phân cấp
Cấu trúc CSDL tên miền DNS: không gian tên miền
• Kiến trúc tên miền không bắt buộc các tên miền phải
tuân theo quy cách đặt tên, tuy nhiên, chúng được
quản lý một cách tập trung .
• Cú pháp của tên không cho biết đối tượng được đặt
tên là gì: ví dụ www.ptithcm.edu.vn
www ptithcm edu vn là một máy tính,
tính
trong khi ptithcm.edu.vn lại là tên miền
com edu gov vn fr uk
vnn com edu gov

DSN
• ví dụ:
yêu cầu truy cập đến www.cs.purdue.edu.vn từ it‐
lab.ptithcm.edu.vn sẽ theo tiến trình như sau: 1.1.2. World wide web -
Website
vn  edu  purdue  cs

TMĐT
WWW
• World Wide Web là một bước tiến lớn trong quá trình tìm 1.1.3. Giao thức truyền nhận
kiếm thông tin nhanh, đa dạng và mạnh mẽ. Các server
WWW khác nhau sẽ thực hiện các trình duyệt (browser)
trong Client/Server
khác nhau.
yệ khác nhau sẽ có những
• Các trình duyệt gg giả định
ị khác
nhau về kết xuất và máy tính của bạn, tuy nhiên tùy
thuộc vào thói quen và sở thích bạn có thể dùng chương
trình duyệt Web cho thích hợp. Hiện nay các chương
trình duyệt Web rất nhiều và đa dạng chẳng hạn như :
• Internet Explorer, Fire Fox, …
Mô hình Client/Server Mô hình Client/Server

• Trong mô hình này, chương trình ứng • Việc giao tiếp giữa client và server được thực hiện
dưới hình thức trao đổi các thông điệp (Message).
dụng được chia thành 2 thành phần: • Để được phục vụ, client sẽ gửi một thông điệp yêu cầu
– Quá trình chuyên cung cấp một số phục vụ (Request Message) mô tả về công việc muốn server
thực hiện.
nào đó, chẳng hạn: phục vụ tập tin, phục vụ • Khi nhận được thông điệp yêu cầu, server tiến hành
máy in, phục vụ thư điện tử, phục vụ Web... phân tích để xác định công việc cần phải thực thi.
thi
Các quá trình này được gọi là các trình phục • Nếu việc thực hiện yêu cầu này có sinh ra kết quả trả
vụ hay Server. về, server sẽ gởi nó cho client trong một thông điệp trả
lời (Reply Message).
– Một số quá trình khác có yêu cầu sử dụng • Dạng thức (format) và ý nghĩa của các thông điệp trao
các dịch vụ do các server cung cấp được gọi đổi giữa client và server được qui định rõ bởi giao thức
(protocol) của ứng dụng.
là các quá trình khách hàng hay Client.
Chế độ nghẽn
• Trong chế độ này, khi
quá trình client hay
server phát ra lệnh
gởi dữ liệu, (thông
thường g bằngg lệnh
ệ
send) , sự thực thi
của nó sẽ bị tạm dừng
cho đến khi quá trình
nhận phát ra lệnh
nhận số dữ liệu đó
(thường là lệnh
receive).
8/9/2017 23 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 24
TMĐT

TMĐT
Chế độ không nghẽn

• Trong chế độ này, 1.2. Nguyên tắc và quy trình thiết kế Website
khi quá trình client 1.2.1. Các nguyên tắc trong thiết kế website
hay server phát ra 1.2.2. Quy trình chung thiết kế Website
lệnh gởi dữ liệu, sự
thực
ự thi của nó vẫn
được tiếp
ế tục mà
không quan tâm đến
việc có quá trình
nào phát ra lệnh
nhận số dữ liệu đó
hay không.
1.2.1. Các nguyên tắc trong thiết kế website 1.2.1. Các nguyên tắc trong thiết kế website
• Tổ chức website chặt chẽ và dễ sử dụng 1. Khái quát

• Sử dụng từ ngữ dễ hiểu. 2. Các bước tổ chức thông tin
• Dễ dàng khám phá các đường link. 3. Các kiểu cấu trúc thiết kế
• Thời gian tải về nhanh.
• Tương thích với đa số trình duyệt web.
1. Khái quát 2. Các bước tổ chức thông tin

• Cần phải chia nhỏ các khối thông tin lớn.
• Phân chia thông tin thành các đơn vị logic
• Các nhà tâm lý học nhận thức
• Giúp ghi nhớ dễ hơn bằng việc sử dụng kết hợp giữa thiết kế
• Thiết lập hệ thống phân cấp thông tin
đồ hoạ, qui ước lớp và biên tập thông tin thành các đơn vị • Tạo mối quan hệ giữa các hệ thống phân cấp
riêng rẽ thôngg tin
• Thực tế với độc giả các tin ngắn gọn, riêng biệt sẽ chức năng • Phân tích sự thành công về chức năng và thẩm
hoá hơn và dễ định vị hơn khối thông tin dài mỹ của các hệ thống thông tin
• Tổ chức các đoạn tin nhỏ thành các khối thông tin riêng để tạo
nên hệ thống đồng nhất, hình thành nên cơ sở các liên kết
hypertext.

TMĐT
Sơ đồ phân bố thông tin của website Ngân Hàng

Công Thương Sơ đồ hệ thống phân cấp của một website

TMĐT
3. Các kiểu cấu trúc thiết kế a. Cấu trúc nối tiếp (Sequence)
a. Cấu trúc nối tiếp (Sequence)
b. Cấu trúc phân cấp (Hierarchy)
c. Cấu trúc ô lưới (Grid)
ạ g nhện
d. Cấu trúc mạng ệ ((Web))  Thể hiển thị thông tin một cách tuần tự,
tự tiếp nối nhau
như một bản tường thuật, theo thời gian
 Ví dụ như một chuỗi logic các chủ đề được phát triển
từ tổng quát đến cụ thể, hoặc cũng có thể theo thứ tự
abc, như các chỉ số, tự điển bách khoa, từ điển thuật
ngữ

TMĐT
b. Cấu trúc phân cấp (Hierarchy) c. Cấu trúc ô lưới (Grid)

• Ưu điểm:
• Là một trong những
– Cấu trúc là cách tốt để phản ánh tương quan các biến số như
cách tốt nhất để tổ sự kiện, công nghệ , văn hoá, …
chức các khối thông tin – Các chủ đề không có sự phân cấp về mức độ quan trọng
phức hợp. – Rất tốt với các độc giả có kinh nghiệm, những người đã có
• Cấu
Cấ trúcú phân
hâ cấp
ấ đặc
đặ sẵn
ẵ kiến thức về chủ đề và hệ thống
biệt thích hợp cho các – Các sơ đồ tổng quát có thể rất hữu ích đối với các site kiểu
website vì các website lưới
luôn được thực hiện rẽ • Nhược điểm:
nhánh từ một trang chủ – Khó hiểu với độc giả khi độc giả chưa xác định được mối liên
duy nhất. quan giữa các loại thông tin
d. Cấu trúc mạng nhện

Sơ đồ tổng quan cấu trúc ô lưới • Ưu điểm:
‐ Khai thác triệt để năng lực của
các trang web trong việc liên kết
và kết hợp.
‐ Ý tưởng liên kết giống nhau và
tự do.
• Nhược điểm:
‐ Các khối thông tin dễ phát
triển thành một mớ hỗn độn, lộn
xộn.
‐ Nhằm vào các độc giả chuyên
nghiệp tìm kiếm những kiến thức
chuyên sâu.
Kết luận Nguyên tắc sử dụng hiệu ứng

* Đa số các website đều sử
1. Các nguyên tắc nghệ thuật
dụng cả 4 kiểu cấu trúc
thông tin trên. 2. Các nguyên tắc sử dụng hình ảnh, đồ hoạ,
* Tuy nhiên hệ thống thông text
tin vẫn p
phải trình bàyy một
ộ
cách minh bạch, nhất quán
để hỗ trợ cho các mục đích
của website.
Sơ đồ phản ánh mối tương

quan giữa 4 kiểu cấu trúc

TMĐT
1. Các nguyên tắc nghệ thuật 1. Các nguyên tắc nghệ thuật
a. Tính đồng nhất về mặt hình ảnh: b. Phá vỡ các quy tắc thiết kế ‐ sự cân bằng:
‐ Sự cân bằng đối xứng:
Không có tính đồng

nhất về mặt hình
ảnh
Chỉ có tính đồng
nhất về mặt trí tuệ
1. Các nguyên tắc nghệ thuật 2. Nguyên tắc sử dụng hình ảnh, đồ hoạ, text
c. Cung cấp một tiêu điểm: • Nên kết hợp giữa đồ họa và văn bản
‐ Sử dụng sự tương phản: • Điều chỉnh kích cỡ sao cho hợp lý
Thỏ 1 năm tuổi
1.2.2. Quy trình chung thiết kế Website
• Khái quát chung

• Thiết kế giao diện
• Thiết kế nội dung

TMĐT
1.2.2. Quy trình chung thiết kế Website

Các ứng dụng trên công nghệ Web
• Thiết kế Website không chỉ chú trọng đến ngôn ngữ
HTML, các công cụ phát triển Web mà còn phải tập
trung vào việc thiết kế thiết kế đồ hoạ, giao diện • Đào tạo
người sử dụng hay những kiến thức về cách thức tổ • Dạy học
chức thông tin,… • Giá dục
Giáo d
• Tham khảo
• Trước khi xây dựng một Website, chúng ta cần phải:
– Xác định đối tượng độc giả của website
– Xác định mục đích của Website
– Thiết lập các chủ đề chính của website
– Thiết kế các khối thông tin chủ yếu mà website cung cấp
8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 55/55 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 56/55
Thiết kế giao diện TK giao diện hướng người sử dụng

• Giao diện người dùng đồ hoạ (GUI) của hệ thống tạo • Mục tiêu giúp người sử dụng tự điều khiển
nên nét đặc trưng "nhìn thấy và cảm nhận" của các
được máy tính của họ
trang web
• Không thể hoàn toàn tách rời thiết kế đồ hoạ với thiết • Không được đặt bất cứ cản trở nào cho người
kế giao diện sử dụngg
• Trả lời các câu hỏi: • Cần các kiến thức về tâm lý học khách hàng
– Ai?
– Cái gì?
– Khi nào?
– Nơi nào?
Tương thích với các trình duyệt khác nhau Thiết kế nội dung
• Các phần nội dung cơ bản trong 1 Webiste
• Nhiều độc giả không có chương trình duyệt đồ hoạ
• Làm thế nào để các độc giả với web browser không có khả • Một số chức năng thường gặp của website và
năng đồ hoạ vẫn hiểu được chức năng của hình ảnh trên trang mục đích sử dụng
web (sử dụng nhãn ALT)
• Giúp các độc giả khiếm thị có thể nghe các thông báo thay thế
• Nội
ộ dungg cơ bản của một
ộ số website TMĐT
mà chúng ta cho hỗ trợ cùng hình ảnh đồ hoạ, do đó không – Trang chủ (home page)
hoàn toàn mất hẳn nội dung của bức ảnh, phím đồ hoạ đi kèm – Trang liên hệ (contact us)
trang web – Trang thông tin giới thiệu về doanh nghiệp (about us)
– Trang giới thiệu về sản phẩm dịch vụ (products/services)
– Trang hướng dẫn hoặc chính sách (Policies)
•

TMĐT
1.3 Nguyên tắc và quy trình triển

Thiết kế nội dung khai Website
• Nội dung cơ bản của một số website • 1.3.1. Các nguyên tắc trong triển khai Website
TMĐT: • 1.3.2. Quy trình chung triển khai Website
– Giới thiệu về Cty
– Quảngg cáo sản pphẩm
– Đặt hàng
– Thanh toán trực tuyến
– Đấu giá trực tuyến
– Liên kết với các site thành viên
– Liên hệ với doanh nghiệp
– …
1.3.1. Các nguyên tắc trong triển khai 1.3.2. Quy trình chung triển khai
Website Website
• Kiểm tra thật kỹ website trước khi triển khai • Đưa website lên Internet
• Thuê không gian lưu trữ web đủ lớn và nên • Quảng bá website
mua ở các tổ chức đáng tin cậy • Cập nhật và bảo trì website
• Nên
ê cóó quáá trình
ì h thử
hử nghiệm
hiệ trước
ớ khi đưa
đ
trang web hoạt động chính thức
• Nâng cấp và bảo trì trang web thường xuyên
Chương 2. Thiết kế và xử lý đồ họa

2.1.1. Khái niệm chung
trên website
• 2.1. Tổng quan về đồ họa • Đồ họa máy tính là một trong những lĩnh vực
• 2.2. Thiết kế đồ họa cho website hấp dẫn và phát triển rất mau lẹ, nó làm thay
đổi hoàn toàn việc tương tác giữ người và
• 2.3. Công cụ photoshop cho xử lý đồ họa máy.
• Nhờ vào đồ họa máy tính mà một loạt các ứng
dụng máy tính ra đời, đồ họa giúp cho việc
giao tiếp với máy tính trở nên dễ dàng hơn, nó
được ứng dụng trong nhiều lĩnh vực như khoa
học công nghệ, y học, kiến trúc, giải trí….

TMĐT
Phân loại theo các lĩnh vực của đồ hoạ máy

2.1.2. Phân loại về đồ họa máy tính tính
• Phân loại theo các lĩnh vực của đồ hoạ máy • Kiến tạo đồ họa:
– Các hệ CAD/CAM (Computer Aided Design/Computer
tính Aided Manufacture System): kỹ thuật đồ hoạ tập hợp các
công cụ, các kỹ thuật trợ giúp cho thiết kế các chi tiết và
– Kiến tạo đồ họa các hệ thống khác nhau: hệ thống cơ, hệ thống điện, hệ
– Xử lý đồ họa.
họa thống điện tử….
– Đồ hoạ minh hoạ (Presentation Graphics): gồm các công cụ
• Phân loại theo hệ toạ độ giúp hiển thị các số liệu thí nghiệm một cách trực quan,
dựa trên các mẫu đồ thị hoặc các thuật toán có sẵn.
– Tọa độ 2 chiều(2D) – Đồ hoạ hoạt hình và nghệ thuật: bao gồm các công cụ giúp
– Tọa độ 3 chiều(3D) cho các hoạ sĩ, các nhà thiết kế phim hoạt hình chuyên
nghiệp làm các kỹ xảo hoạt hình, vẽ tranh... Ví dụ: phần
mềm 3D Studio, 3D Animation, 3D Studio Max.
Phân loại theo các lĩnh vực của đồ hoạ Phân loại theo hệ toạ độ:tọa độ 2
máy tính chiều(2D) và 3 chiều(3D)
• Xử lý đồ họa: • Kỹ thuật đồ hoạ hai chiều: là kỹ thuật đồ hoạ
– Kỹ thuật xử lý ảnh (Computer Imaging): sau quá trình xử lý
ảnh cho ta ảnh số của đối tượng. Trong quá trình xử lý ảnh
máy tính sử dụng hệ toạ độ hai chiều (hệ toạ
sử dụng rất nhiều các kỹ thuật phức tạp: kỹ thuật khôi độ phẳng), sử dụng rất nhiều trong kỹ thuật
phục ảnh, kỹ thuật làm nổi ảnh, kỹ thuật xác định biên ảnh.
xử lý bản đồ
đồ, đồ thị.
thị
– Kỹ thuật nhận dạng (Pattern Recognition): từ những ảnh
mẫu có sẵn ta phân loại theo cấu trúc, hoặc theo các tiêu • Kỹ thuật đồ hoạ ba chiều: là kỹ thuật đồ hoạ
trí được xác định từ trước và bằng các thuật toán chọn lọc
để có thể phân tích hay tổng hợp ảnh đã cho thành một
máy tính sử dụng hệ toạ độ ba chiều, đòi hỏi
tập hợp các ảnh gốc, các ảnh gốc này được lưu trong một rất nhiều tính toán và phức tạp hơn nhiều so
thư viện và căn cứ vào thư viện này ta xây dựng được các
thuật giải phân tích và tổ hợp ảnh.
với kỹ thuật đồ hoạ hai chiều.
Hỗ trợ thiết kế (CAD – Computer‐

2.1.3. Ứng dụng của đồ họa máy tính
Aided Design)
• Hỗ trợ thiết kế (CAD – Computer‐Aided • Hỗ trợ thiết kế được xem như một ứng dụng
Design) chính của đồ họa tương tác đối tượng không
• Giao diện người dùng và máy tính gian, trong đó đối tượng được xây dựng trực
• Biểu
iể diễn
diễ thông
hô tin i tiếp như là mô hình thiết kế.
kế
• Lĩnh vực giải trí, nghệ thuật • Ngày nay CAD đã được sử dụng hầu hết trong
việc thiết kế các cao ốc, ô tô, máy bay, tàu
• Giáo dục và đào tạo thủy, tàu vũ trụ, máy tính, trang trí mẫu vải, và
• Bản đồ học rất nhiều sản phẩm khác.

TMĐT
Giao diện người dùng và máy tính

• Giao diện đồ họa thực sự là một cuộc cách mạng mang
lại sự thuận tiện và thoải mái cho người dùng ứng
dụng. Các ứng dụng dựa trên hệ điều hành MS
Windows là một minh họa rất trực quan của giao diện
đồ họa. Các chức năng của các ứng dụng này được
thiết kế cho người dùng làm việc thông qua các biểu
tượng mô tả chức năng đó. Ví dụ, chức năng lưu tập
tin được hiểu thông qua biểu tượng đĩa mềm, chức
năng in ấn được hiểu thông qua biểu tượng máy in, …
• Các ứng dụng có giao diện đồ họa cho phép người
dùng khả năng làm việc dễ dàng với nhiều cửa sổ với
nhiều dạng tài liệu khác nhau cùng một lúc

TMĐT
2.2. Thiết kế đồ họa cho website

2.2.1. Xử lý đối tượng đồ họa
• 2.2.1. Xử lý đối tượng đồ họa
• 2.2.2. Xử lý ảnh trong website • Ảnh tạo bởi máy tính bao giờ cũng được cấu
trúc từ tập các đối tượng đơn giản hơn
Các đối tượng đồ họa cơ sở 2.2.2. Xử lý ảnh trong website

• Điểm • Khi lựa chọn hình ảnh để xử lý đưa lên website
– Thông tin: tọa độ (x, y)
– Thuộc tính: mầu sắc cần trả lời 03 câu hỏi sau:
• Đoạn thẳng, đường gấp khúc – Nó có liên quan không?
– Thông tin: điểm đầu (x1, y1) điểm cuối (x2, y2)
– Nó có thú vị không?
– Đường
ờ gấpấ khú
khúc là tập
ậ các
á đđoạn thẳng
hẳ nối ối với
ới nhau
h một
ộ cách
á h
tuần tự – Nó có hấp dẫn không?
– Thuộc tính: mầu sắc, độ rộng nét vẽ, kiểu nét vẽ
• Vùng tô • Lưu ý:
– Thông tin: đường biên và vùng bên trong – Nguồn ảnh hợp pháp
– Thuộc tính: mầu tô và mẫu tô – Luôn chú ý đến hướng dẫn sử dụng hình ảnh
• Ký tự, chuỗi ký tự
– Thuộc tính: Font chữ, mầu sắc, kích thước, khoảng cách ký tự … – Trích dẫn nguồn ảnh sử dụng nếu lấy từ nguồn khác
2.3. Công cụ photoshop cho xử lý đồ họa 2.3.1. Giới thiệu về photoshop

• Adobe Photoshop
• 2.3.1. Giới thiệu về photoshop
• Phiên bản mới nhất hiện nay là Adobe Photoshop CC.
• 2.3.2. Các thao tác cơ bản –
–
Chỉnh sửa ảnh cho các ấn phẩm,
Thiết kế trang web,
• 2.3.3. Các hiệu ứng cơ bản –
–
Vẽ các loại tranh (matte painting và nhiều thể loại khác),
Vẽ texture cho các chương trình 3D...
– Mọi hoạt động liên quan đến
ế ảnh bitmap.
• 2.3.4. Xuất dữ liệu và tích hợp lên website • Adobe Photoshop có khả năng tương thích với hầu hết
các chương trình đồ họa khác của Adobe
– Adobe Illustrator,
– Adobe Premiere,
– After After Effects
– Adobe Encore.

TMĐT
Các khái niệm cơ bản

1. Hình ảnh vector và raster
2. Độ phân giải ảnh
3. Quan hệ giữa kích thước ảnh và độ phân
giải
iải ảnh
ả h
4. Độ phân giải màn hình
5. Các chế độ hình ảnh (image modes)
Hình bên trái có độ phân giải 72 ppi, hình bên phải 300 ppi
8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 87 8/9/2017 88
TMĐT
Hình ảnh bitmap

TMĐT
Hình ảnh RGB có 3 kênh màu R, G, B Hình ảnh CMYK có 4 kênh màu C, M, Y, K
2.3.2. Các thao tác cơ bản

• Vùng làm việc
• Làm việc với vùng chọn
• LAYER
• Chỉnh sửa ảnh

TMĐT
2. CHỌN CÔNG CỤ (Toolbox) THAO TÁC VỚI LAYER

• Hiển thị/tắt thanh công cụ (toolbox): • Layer / New / Layer Via Copy: Copy vùng
– Vào windows tools chọn đặt trên 1 layer mới (Ctrl‐J)
• Chọn công cụ: • Layer / New / Layer Via Cut: Cắt vùng
– Nhấn
Nhấ phímhí tắt
ắ của
ủ công
ô cụ h hoặc
ặ chọn đặt trên 1 layer mới (Shift‐Ctrl‐J)
(Shift Ctrl J)
– Sử dụng chuột chọn công cụ • Nhân bản layer: Chọn layer vào menu
– Click chuột phải vào công cụ có tam giác nhỏ phía layer Duplicate Layer (click chuột phải vào
dưới để hiển thị các công cụ ẩn. layer Duplicate Layer )

TMĐT
CHỈNH SỬA ẢNH CHỈNH SỬA ẢNH

• Sử dụng bộ lọc để tạo sự tương phản của
• Điều chỉnh màu cho ảnh với lệnh Curves:
biên
– Image AdjustmentsCurves
– Menu Filter / Sharper / Unsharp Mask
– Di chuyển đường thẳng để xem sự thay đổi
– Amount: Định gi trị độ sắc nét cho ảnh,
• Thay
Th thế màu
à ttrong ảảnh:
h Radius: các điểm biên chịu tác động, Threshold :
– Image AdjustmentsReplace Color xác định mức độ khác biệt về độ nét
– Sử dụng công cụ chọn màu cần thay đổi
– Kéo các thanh trượt để thay đổi
2.3.4. Xuất dữ liệu và tích hợp lên

NHÓM CÁC BỘ LỌC website
• Nhóm Filter Artistic: • Các định dạng ảnh:
– Colored Pencil : Làm cho ảnh hay phần – JPEG: định dạng này có thể thể hiện với hàng triệu
được chọn giống như phần được vẽ mầu
bằng chì phấn – GIF: ảnh này thể hiện với 256 mầu và hỗ trợ ảnh
trong suốt
–…
– PNG: có tác dụng nén ảnh có các mảng mầu đặc
• Nhóm Filter Blur: tạo độ nhòe và giữ được độ sắc nét chi tiết
• Nhóm FilterPixelate:Phá vở hình ảnh thành
nhiều mảnh
Chương 3. Một số ngôn ngữ xây dưng 3.1. HTML (Hyper Text Makup
Website Language)
• 3.1. HTML (Hyper Text Makup Language) • 3.1.1. Tổng quan về HTML
• 3.2. PHP, Javascript • 3.1.2. Các thẻ cơ bản của HTML
• 3.3. Môi trường ASP.NET • 3.1.3. Sử dụng Frontpage
• 3.4. Một số công cụ soạn thảo mã nguồn • 3.1.4. Định dạng bằng CSS

TMĐT
3.1.1. Tổng quan về HTML 3.1.2. Các thẻ HTML

• HTML=HyperText Markup Language – Ngôn ngữ đánh dấu • Cấu trúc chung của một siêu văn bản
siêu văn bản – Ngôn ngữ để viết các trang web. <HTML>
<HEAD>
• Do Tim Berner Lee phát minh và được W3C (World Wide
<TITLE> Tiêu đề trang </TITLE>
Web Consortium) đưa thành chuẩn năm 1994
... Các khai báo khác ở đây
• Các trang Web đầy sinh động mà bạn thấy trên WWW là </HEAD>
các trang siêu văn bản được viết bằng HTML <BODY>
• HTML cho phép bạn tạo ra các trang phối hợp hài hoà ... Nội dung cần thể hiện ở đây
</BODY>
giữa văn bản thông thường với hình ảnh, âm thanh, video,
</HTML>
các mối liên kết đến các trang siêu văn bản khác
3.1.2. Các thẻ HTML Font & Color

• Các lớp thẻ • Thẻ <html><body>
– Cấu trúc (structure)
- font <font face=Arial>Arial</font><br>
– Định dạng (formatting)
– Ảnh (image) • Thuộc tính <font size=1>Size 1</font><br>
– Danh sách (list) - face <font size=7>Size 7</font><br>
– Bảng (table) - size <font color=red>Red</font><br>
– Form <font color=#0000FF>Blue</font><br>
- color
– Khung hiển thị (frame)
<font style=‘font-size: 72pt’>72pt</font>
- style
</body></html>
Bộ môn CNTT - Khoa HTTT Kinh tế

và TMĐT
Link & URL & Bookmark Lớp thẻ âm thanh, hiện ảnh
• Chèn hình ảnh vào trang web
• Thẻ – thẻ <img> không có thẻ kết thúc, gồm các thuộc
-a tính:
• Thuộc
Th ộ tính
tí h + WEB Resource • Src: Đường dẫn đến file ảnh
• Alt: Đoạn văn bản hiển thị khi không có ảnh
- href + File System • Width, height: Độ rộng, chiều cao của ảnh khi hiển thị
- title
• Border: Độ đậm của đường viền xung quanh ảnh
- name + Bookmark
• Vspace, hspace: Khoảng cách theo chiều dọc và theo
chiều ngang của ảnh với các phần tử khác

8/9/2017 107 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 108
và TMĐT

TMĐT
Lớp thẻ tạo danh sách List

• Gồm các loại danh sách • Ds không thứ tự • Ds các định nghĩa
– <dir> ... </dir>: Danh sách thư mục - ul (unordered lists) - dl (definition lists)
– <dl> ... </dl>: Danh sách được định nghĩa - li - dt (title)
– <menu> ... </menu>: Danh sách thực đơn
• Ds có thứ tự - dd (detail)
– <ol> ... </ol>: Danh sách có thứ tự
- ol (ordered lists)
– <ul> ... </ul>: Danh sách không có thứ tự
- li
• Các loại danh sách có thể lồng nhau
• Thuộc tính
DISC | CIRCLE | SQUARE
- type
A | a | I | i | 1
và TMĐT
Lớp thẻ tạo bảng Table

• Bao gồm các thẻ TAG/Attribute Mô tả
– <table> ...</table>: Giới hạn bảng TABLE - bắt ®Çu b¶ng
b¶ng..
<TABLE BORDER=n
– <tr> ... </tr>: Đặc tả các dòng của bảng BGCOLOR="#rrggbb““ WIDTH=n%
BGCOLOR="#rrggbb BORDER - ®Æt khung næi 3D xung
quanh b¶ng
b¶ng..
– <td> ...</td>:
</td>: Đặc tả ô dữ liệu của bảng HEIGHT=n%>
BGCOLOR - ®Æt mμu nÒn cña b¶ng
– <th> ...</th>: Đặc tả ô tiêu đề của bảng Bắt ®Çu mét dßng cña b¶ng - table
<TR>
– <caption > ...</caption>: Đặc tả tên bảng row..
row
<TD> Bắt ®Çu mét « cña b¶ng(B

b¶ng(B3
3/4t ®Çu
cét trong mét hµng).
hµng).
<TH> ThÎ <TH> gièng nh- <TD> nh-ng cho

ch÷
ch÷ in ®Ëm vµ c¨n chÝnh gi gi÷
÷a -
(heading)..
(heading)
và TMĐT
Form Các thẻ trong form

• Sử dụng để chứa mọi đối tượng khác • <input>
• Không nhìn thấy khi trang web được hiển thị – Trường nhập dữ liệu
• Quy định một số thuộc tính quan trọng như • <select>...</select>
method action.
method, action – Danh
h sách
á h chọn
h
• Thẻ tạo form: • <option>…</option>
<form>…</form> – Mục chọn trong danh sách
• Có thể có nhiều form trong một tài liệu
• <textarea> ... </textarea>
• Form không được lồng nhau
– Trường nhập dữ liệu nhiều dòng

TMĐT
Flash Một số thẻ meta thông dụng

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-
444553540000"
• Thẻ <meta>:
codebase="http://download.macromedia.com/pub/shockwave/c – Đặt ở giữa <head>…</head>
abs/flash/swflash.cab#version=6,0,29,0" width=“số"
height=“số"> – Thường dùng quy định thuộc tính cho trang web
<param name="movie"
name movie value
value="ten
ten_file.swf
file.swf">
>
– Có tác dụng lớn với Search Engine
<param name="quality" value="high">
<embed src="ten_file.swf" quality="high" – 2 cách viết thẻ <meta>:
pluginspage="http://www.macromedia.com/go/getflashplayer <META NAME="name" CONTENT="content">
" type="application/x-shockwave-flash" width="số " <META HTTP-EQUIV="name" CONTENT="content">
height="số "></embed>
</object>
Lớp thẻ tạo khung <frameset> …</frameset>

• Chia vùng hiển thị của trang web thành nhiều • Frameset: dùng để phân vùng hiển thị trên trình
vùng con theo chiều dọc, ngang duyệt
– Cols = n | * | n%
• Mỗi vùng con là một frame có đặc điểm: – Rows = n | * | n%
– Có thể truy cập tới một URL độc lập với frame khác.
khác – Border,
Border bordercolor
– Mỗi frame có thể được đặt tên. • Frame: Nằm trong frameset dùng để định nghĩa
từng vùng
– Có thể thay đổi kích thước khung nhìn, cho phép hay – Src: URL chứa nội dung của vùng
không cho phép người dùng thay đổi kích thước này – Name, bordercolor, noresize, marginwidth,
• Tài liệu có cấu trúc frame, không có phần tử body marginheight
– Scrolling = ‘yes|no|auto’
3.2. PHP, Javascript Nội dung

• 3.2.1. PHP (Hypertext Preprocessor) • Lập trình Web tĩnh và Web động
• 3.2.2. Javascript trong xây dựng website • Cài đặt Apache
• MySQL
• Ngôn ngữ PHP

TMĐT
Trang web tĩnh Trang web động

URL yêu cầu URL yêu cầu
Web
Server
Network HTML
Web Network HTML Biên dịch,
URL yêu cầu Server URL yêu cầu
Thực thi Trang web động
HTML HTML
• Mọi người sử dụng nhận được kết quả giống
nhau. • Mỗi người sử dụng có thể nhận được nội dung khác nhau
phụ thuộc vào kết quả chạy chương trình.
Client • Trang web được viết bằng HTML, chỉ thay đổi Client
• Trang web viết bằng HTML + Ngôn ngữ lập trình phía
khi có sự thay đổi của người xây dựng
server. Có thể được thay đổi bởi người sử dụng
• Khả năng tương tác yếu
• Khả năng tương tác mạnh
• Webserver hoạt động giống 1 file server.
Một số công nghệ viết web động Cài đặt và cấu hình các phần mềm
• Web server: Chọn 1 trong 2
• Động phía client: – IIS (Internet Information Service) – tích hợp trong Win 2000, XP,
2003, Vista.
– JavaScript, VBScript được chạy ở client. – Apache: http://www.apache.org
– Applet • Biên dịch: PHP: http://www.php.net
– Flash • Hệ quản trị CSDL: MySQL www.mysql.com
• Động phía server: • Hỗ trợ quản lý CSDL MySql
– CGI: Common Gatewayy Interface – MySql
y q Control
– Java Server Pages – PHPMyAdmin (web)
– SQL Manager
– ASP, ASP.NET: Microsoft
– Navicat MySQL
• Viết bằng VBScript, JavaScript chạy phía server.
• Sử dụng web server IIS. • Hỗ trợ soạn thảo:
– PSpad, Ediplus
– PHP: Mã nguồn mở
– Macromedia Dreamweaver
• Ngôn ngữ lập trình PHP, chạy phía server.
• Phần mềm khác:
• Webserver: Apache, IIS
– Bộ gõ: Unikey, Vietkey bản đầy đủ
• Bộ biên dịch: PHP
– Adobe Photoshop
– Perl – Xara3D…
Cài đặt Apache 2.x (Windows) Trang PHP đầu tiên

• Soạn thảo:
• Để cài đặt Apache trong Windows bằng chương trình cài đặt tự động, cần – Mở trình soạn thảo gõ nội dung dưới đây
download chương trình này về từ website của Apache. Thông thường – Ghi lại với tên “CHAO.PHP” trong thư mục gốc của web (Nếu sử dụng Wamp thì thường là
C:\Wamp\www)
những chương trình dạng này sẽ không hỗ trợ giao thức https.
• Quá trình cài đặt sẽ tự động sao chép tất cả các file cần thiết vào thư mục <html>
chỉ định. <head>
• Có thể sử dụng chương trình quản lý ở mức dịch vụ để start
start, stop
stop, restart
restart, <title>Trang
e a g PHP dau tien</title>
e / e
</head>
reload Apache hoặc khởi động bằng tay.
<body>
<?php
echo "Chào mừng các bạn đến với <u>PHP</u>";
?>
</body>
</html>

TMĐT
Trang PHP đầu tiên (tt) Cài đặt MySQL 5.x

• Download phiên bản mới nhất
• Thử nghiệm: Mở IE, gõ địa chỉ:
http://localhost/chao.php
RPM (.rpm)
Linux
Source code (.tar.gz)
MySQL
Program install (.msi)
Windows
Source code (.zip)
Ngôn ngữ lập trình PHP Cú pháp cơ bản

• Là ngôn ngữ lập trình dạng server‐side, vì vậy PHP • PHP mỗi khi thông dịch một file sẽ chỉ thi hành những khối lệnh nằm giữa
ngoài các khả năng của một ngôn ngữ lập trình 2 cặp thẻ <?php và ?>
thuần túy còn có đầy đủ các chức năng cần thiết • Mọi ký tự nằm ngoài các cặp thẻ trên đều được giữ nguyên và thêm vào
trong luồng siêu văn bản trả về cho môi trường bên ngoài theo đúng thứ
của một CGI chuẩn như: Lấy dữ liệu từ form, sinh tự ban đầu.
các trangg web động,
ộ g, ggửi nhận
ậ cookie,, hỗ trợ
ợ • Nói chung
chung, cú pháp trong PHP được thừa kế từ cú pháp của C, C C++ và Perl.
Perl
session, thao tác với biến của WEB Server. Tuy nhiên, cũng có một số kết hợp và thay đổi từ các cú pháp gốc tạo ra
• PHP cũng có hệ thống thư viện hàm đồ sộ giúp nét đặc thù riêng cho PHP.
cho các lập trình viên có nhiều lựa chọn trong
việc sửa dụng PHP để kết nối với nhiều phần
mềm khác nhau như: Oracle, MySQL, ODBC,
LDAP, Mail (SMTP, POP3), COM, .Net…
Cú pháp cơ bản (tt) Biến

• Để tạo ra các kết xuất trả về cho môi trường bên ngoài (trình duyệt) ta có thể sử • Định nghĩa biến
dụng các cách sau: – Biến trong PHP được bắt đầu bởi ký tự $, sau đó là tên biến được định nghĩa
– Viết kết xuất bên ngoài cặp thẻ <?php và ?> theo văn phạm sau:
– Dùng lệnh echo hoặc print
[a-zA-Z_\x7f-\xff][a-zA-Z0-9_\x7f-\xff]*
• Để tạo ra chú thích, có thể dùng cú pháp dạng C như sau:
– Tên biến có phân biệt hoa thường. Có thể gán giá trị vào biến mà không cần
– // Để chú thích dòng
khai báo
báo. Nhưng chỉ có thể truy cập nội dung biến đã có giá trị
trị.
– /* */ Để chú thích khối
– Để xác định biến tồn tại hay không có thể dùng hàm isset() và để hủy biến có
• Lệnh của PHP kết thúc bởi dấu chấm phẩy (;) và có thể viết nhiều lệnh trên một thể dùng hàm unset()
dòng.
– Để xác định kiểu hiện tại của biến có thể sử dụng hàm gettype(), var_dump()
• Lưu ý không giống C, C++ trình thông dịch của PHP chỉ phân biệt hoa thường với hoặc các hàm is_var_type().
tên biến, tên hằng. Còn tên hàm (có sẵn hoặc do người dùng định nghĩa) và từ
khóa thì không phân biệt.

TMĐT
Biến (tt) Biến (tt)

• Truy cập giá trị biến: • 4.2.4 Biến bên ngoài PHP:
– Để truy cập giá trị biến chỉ cần dùng cú pháp $var_name. Biến kiểu mảng cần – Biến form: Được truy cập thông qua các biến mảng siêu toàn cục được định
thêm cặp ký tự [ ] để truy cập vào giá trị các phần tử trong mảng. nghĩa trước là $_POST, $_GET, $_COOKIE, $_REQUEST, $_FILES. Nếu khai báo
– Tuy nhiên trong nhiều trường hợp phải sử dụng thêm cặp ngoặc nhọn { } hoặc register_global được bật trong php.ini thì tự động các biến có tên tương ứng
ký tự & để có thể xác định chính xác tên biến cần truy cập cũng được tạo ra.
– Biến session: Được truy cập thông qua các biến mảng siêu toàn cục được định
$a = ‘hello’;
hello ; $b = ‘every’;
every ; nghĩa trước là $_SESSION.
$c = &$b; $d = ‘b’; – Biến server: Được truy cập thông qua các biến mảng siêu toàn cục được định
nghĩa trước là $_SERVER, $_ENV.
echo “$a $bone.”; echo “$a ${b}one.”;
echo “$a {$c}one.”; echo “$a $$d”;
echo “$a {$$d}one.”;echo “$a
${$d}one.”;
Cấu trúc điều khiển Cấu trúc điều khiển (tt)

• Rẽ nhánh với if … else • Rẽ nhánh với switch … case
if ($a > $b) { switch ($a) {

switch ($a
$a):
):
echo "a > b"; if ($a > $b
$b):
): case 0: case 0:
echo "aa > b";
b"
b ;
$a = $b; echo "a = 0"; echo "a = 0";
0";
$a = $b
$b;;
} else { break;;
break
else::
else break; case 1:
echo "a <= b"; echo "a <= b";
b";
$b = $a; $b = $a
$a;; case 1: echo "a = 1";
1";
break;;
break
} endif;;
endif echo "a = 1"; endswitch;;
endswitch
break;
}
Cấu trúc điều khiển (tt) Cấu trúc điều khiển (tt)
• Lặp với while & do … while • Lặp với for & foreach
for ($i=1; $i<=10; $i++) print $i;
while ($i++ < 5) {
switch ($i) {
case 2:
$arr = array(1, 2, 3, 4);
echo "At 2"; break 1; /* Exit only
y switch. */ foreach ($arr as $value) {
case 5: $ l
$value = $value
$ l * 2;
2
echo "At 5"; break 2; /* Exit switch and while. print $value;
*/ }
default:
break; $arr = array("one", "two", "three");
} foreach ($arr as $key => $value) {
while (1) continue 2;
echo "This never gets.";
echo "Key: $key; Value: $value";
} }

TMĐT
Hàm (tt) Kết nối với MySQL

• Ví dụ: $db = mysql_connect('Máy chủ','username',
function foo() { 'pwd') or die(‘Không kết nối được với máy
echo "In foo() "; chủ');
}
function bar($arg = '') { mysql_query("SET NAMES 'utf8'");
echo "In bar(); argument: '$arg'"; mysql_query("SET CHARACTER SET 'utf8'");
}
function echoit($string) { mysql_select_db('CSDL', $db) or die('Không tìm
echo $string; thấy CSDL');
CSDL );
} $sql = ‘Câu lệnh truy vấn SQL’;
$func = 'foo'; $func(); // This calls
foo() $rs = mysql_query($sql);
$func = 'bar'; $func('test');// This calls for ($i = 0; $i < mysql_num_rows($rs); $i++) {
bar()
$func = 'echoit';$func('test');// This calls $rc = mysql_fetch_array($rs);
echoit() echo $rc[‘Trường thứ nhất’];//Cột đầu tiên
echo $rc[1];//Cột thứ hai
echo $rc[‘Trường thứ ba’];//Cột thứ 3
}
JavaScript Khả năng của Javascript

• JavaScript là ngôn ngữ kịch bản dùng để tạo các • JavaScript có thể tăng cường tính động và tính
client‐side scripts và server‐side scripts.
tương tác của các trang web.
• JavaScript làm cho việc tạo các trang Web động và tương tác
dễ dàng hơn – Cung cấp sự tương tác người dùng
• JavaScript là một ngôn ngữ kịch bản được hãng Sun – Thay đổi nội dung động
Microsystems và Netscape phát triển.
– Xác nhận tính hợp lệ của dữ liệu
• JavaScript được phát triển từ Livescript. Của Netscape
• Các ứng dụng client chạy trên một trình duyệt như Netscape
Navigator hoặc Internet Explorer.
Công cụ và môi trường thực thi Chèn Javascript vào HTML

• Các công cụ sinh mã JavaScript • Sử dụng thẻ SCRIPT:
<script language="JavaScript">
– Thuận lợi khi soạn thảo 
• Môi trường
t ườ thự
thực thi </script>
– Các Scripting ở Client • Sử dụng một file JavaScript ở ngoài
– Java Script trên Web Server <script language="JavaScript" src="filename.js">
</script>
• Sử dụng các biểu thức JavaScript trong các giá trị thuộc tính của thẻ
• Sử dụng trong các trình điều khiển sự kiện

TMĐT
Ví dụ Ví dụ
<HTML> <HTML>
<HEAD> <HEAD>
<SCRIPT LANGUAGE = "Javascript">
<SCRIPT LANGUAGE =
confirm ("Are
( Are you Sure?");
Sure? );
"
"Javascript">
i "
alert("OK");
document.write(" Thank You !"); var A = "12" + 7.5;
</SCRIPT> document.write(A);
</HEAD> </SCRIPT>
</HTML> </HEAD>
8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 145 </HTML>
8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 146
Lệnh rẽ nhánh Cấu trúc lặp

• Câu lệnh điều kiện được dùng để kiểm tra điều kiện. Kết quả
xác định câu lệnh hoặc khối lệnh được thực thi. • Cấu trúc điều khiển lặp trong chương trình là
• Các câu lệnh điều kiện bao gồm: các lệnh lặp.
– If (<ĐK>) Lệnh 1
else Lệnh 2; • Các kiểu lệnh lặp bao gồm:
– switch (Biến) { – for
f
case <Gtrị 1>: <Lệnh 1>; break;
case <Gtrị 2>: <Lệnh 2>; break; – do …. while
... – while
case <Gtrị n>: <Lệnh n>; break;
– break & continue
}
– with
Hàm Xử lý sự kiện
• JavaScript có sẵn các hàm đinh nghĩa trước dùng trong script.
• Một vài hàm định nghĩa trước trong JavaScript bao gồm: • onClick • onMouseOut
– Hàm eval,... • onChange • onLoad
• onFocus • onSubmit
• Hàm do người
g dùngg tự
ự tạo
ạ • onBlur • onMouseDown
function funcName(argument1,argument2,…){ • onMouseOver • onMouseUp
statements;
}
• Gọi hàm
• Câu lệnh Return

TMĐT
DOM (Document Object Models) Một vài ứng dụng

• Một tính năng quan trọng của JavaScript là • Thay đổi thanh trạng thái, tiêu đề
ngôn ngữ dựa trên đối tượng. • Tự động refresh
• Giúp người dùng phát triển chương trình theo • Kiểm tra tính hợp lệ của dữ liệu form
môđun và có thể sử dụng lại.
lại • Hộp thoại tự tạo
• Đối tượng được định nghĩa là một thực thể
đơn nhất bao gồm các thuộc tính và phương
thức.
• Thuộc tính là giá trị của một đối tượng.
Tham khảo
• http://www.javascriptkit.com
• http://www.dynamicdrive.com Hiệu ứng chữ chạy trên trình thanh
• http://www.javascriptbank.com trạngg thái của trình duyệt
y
• http://www.dhtmlcentral.com

TMĐT
Giải thuật Mã lệnh

• Ý tưởng giải thuật <script language="javascript">
var str= 'Khoa HTTT-ĐH Thương Mại'
– Để có được cảm giác chữ chạy trên thanh trạng thái ta cần thay đổi
thuộc tính status của cửa sổ bằng cách copy ký tự đầu của thanh dòng //Đưa vào nhìn cho đẹp (có khoảng cách trống giữa 2 lần
chạy)
trạng thái hiện tại đưa xuống cuối cùng và lặp lại như vậy sau mỗi
for (i=str.length; i<100; i++){
khoảng thời gian.
str = str + ' '
• Giải thuật: Giả sử ta có biến
ế str đang lưu chuỗi
ỗ cần
ầ chạy. Công }
việc thực hiện như sau:
– B1: Thể hiện chuỗi str lên thanh trạng thái. Chuyển sang bước 2 function ChuChay(){
– B2: Chuyển ký tự đầu của str về cuối (bằng cách gán str = xâu con kể từ window.status = str
vị trí thứ 2 của str đến cuối + ký tự đầu tiên của str). Chuyển sang str = str.substr(1,str.length-1) + str.substr(0,1);
bước 3
– B3: Trễ một khoảng thời gian rồi quay lại bước 1 setTimeout(ChuChay,100)
}
ChuChay() Demo
</script>

TMĐT
Phát triển Đối tượng window

• Thay bằng nhiều dòng chữ chạy khác nhau (sử • Tập hợp: frames[]
dụng mảng để lưu trữ) • Thuộc tính:
• Chữ chạy theo nhiều cách khác nhau – document
• Cho
h chữ
hữ chạy
h trênê thanh
h h tiêu
iê đề – history
hi
• Cho chữ chạy trên một đối tượng khác – Location
– Opener
– status:
Đối tượng document 3.3. Môi trường ASP.NET

• Truy xuất đến các form:
• 3.3.1. Giới thiệu về ASP.NET
– window.document.tên_form
• 3.3.2. Xây dựng trang bằng ASP.NET
• Truy xuất các đối tượng trong form:
– objForm.Tên_ĐT • 3.3.3. Kết hợp ASP.NET Objects với VB.NET
• Thuộc tính đối tượng:
– value
Các components Web Application Static Web Pages (Web tĩnh)
Note

TMĐT
Dynamic Web Pages (Web động) Các trạng thái của ASP.Net
Note
GIỚI THIỆU VỀ ASP.NET GIỚI THIỆU VỀ ASP.NET
.NET Framework
• NET Framework là một tập hợp những giao
Web services Web Forms Windows Forms diện lập trình và là tâm điểm của nền tảng
.NET của Microsoft. Nó cung cấp cơ sở hạ tầng
Data and XML Class
(ADO.NET,
(ADO NET SQL
SQL, XSLT
XSLT, Xpath
Xpath,, XML,etc
XML
XML,etc)
etc)
etc) để xây dựng và chạy các dịch vụ Web.
Web
Framework Base Class
(IO, string net, security, threading, text, reflection, collection, ect)
Visual Studio.Net
Common Language Runtime
(debug, exception, type checking, NT compilers)
.NET Enterprise .NET Building
Sevices .NET Framework Block Services
Windows Platform
Operating system on services, desktops and devices
GIỚI THIỆU VỀ ASP.NET

TMĐT
GIỚI THIỆU VỀ ASP.NET KIẾN TRÚC ỨNG DỤNG WEB

Một ứng dụng thường được chia thành 3 lớp phân biệt
chính:
.NET Framework Class Library Support
• Tầng trình diễn (Presentation Tier – FrontEnd)
• Tầng logic (Logical Tier – Middleware)
Thread Support COM Marshaler
• Tầng
Tầ dữ liệ
liệu (D
(Data
t Ti
Tier – BackEnd)
B kE d)
Type Checker Exception Manager
Security Engine Debug Engine
MSIL to Native Compilers Code Manager Garbage Collector
Class Loader
GIỚI THIỆU VỀ WEBSERVER Cấu trúc của ứng dụng

• Thư mục App_Data
Là nơi chứa dữ liệu của ứng dụng, được sử dụng
trong ASP.NET 2.0 để lưu trữ dữ liệu cục bộ của
ứng dụng
• Thư mục App_Code
App_Code là nơi chứa source code cho lớp tiện ích
và các đối tượng nghiệp vụ (ví dụ: các file .cs, .vb,
và .jsl)
Cấu trúc của ứng dụng 3.3.2. Xây dựng trang bằng ASP.NET
Cấu trúc tập tin Web.config: • Cách viết code trong chương trình
<?xml version="1.0"?> • Các thành phần trong trang
<configuration>
• Cách tạo và chạy ứng dụng
<appSettings/>
pp g/
<connectionStrings/>
<system.web>
<compilation debug="true"/>
<authentication mode="Windows"/>
</system.web>
</configuration>

TMĐT
Cách viết code trong chương trình Cách viết code trong chương trình
Có 2 cách viết code trong chương trình: • Cách viết code inline
• Cách viết Code Inline Trong cách viết Code inline, mã vẫn được viết trong
• Cách viết Code Behind các trang ASP.NET nhưng không trộn lẫn với HTML
dành cho phần nội dung, khi đó code client và code
server cách nhau bởi cặp tag <% %>
Ví dụ:
<%String strName=”Hello World”;%>

<B><%=strName%></B>
• Xuất dữ liệu cho client: • Cách viết Code Behind

Cú pháp: Là hình thức viết code trong một tập tin khác. Khi đó
trong tập tin .aspx cần phải khai báo rõ nơi chứa
code với cú pphápp sau:
<%=VariableName%>
% bl %
<%@Page Language=”C#” AutoEventWireup=”true”
CodeFile=”FileNameCode” Inherits=”ClassContainCode”%>
• Trong đó: FileNameCode là tên tập tin code. Tập tin VD.aspx
này có phần mở rộng là .aspx.cs, .aspx, .vb, … tuỳ <%@ Page Language="C#" AutoEventWireup="true"
CodeFile="VD.aspx.cs" Inherits="VD" %>
theo ngôn ngữ sử dụng để viết code <html xmlns="http://www.w3.org/1999/xhtml" >
• Ví dụ: <head runat="server"><title>Untitled Page</title></head>
<body>
<form id="form1" runat="server">
<asp:Label ID="Label1" runat="server"> </asp:Label> <br />
<asp:Button ID="Button1" runat="server"
OnClick="Button1_Click" Text="Button" />
</form>
</body></html>

TMĐT
• Cơ chế làm việc của Code‐Behind

VD.aspx.cs – Tạo các file riêng biệt cho giao diện người dùng và
protected void Button1_Click(object sender, luận lý
EventArgs e) – Sử dụng dẫn hướng @ Page để liên kết 2 file
{ – Pre‐compile
Label1.Text = "Hello Word";

}
CÁC THÀNH PHẦN TRONG TRANG

CÁC THÀNH PHẦN TRONG TRANG
• Không gian tên (Namespaces)
• Một số NAMESPACE và chức năng
NameSpace là một tập hợp Logic các nhóm thư Chứa các đối tượng như Danh
viện có liên quan đến nhau, giúp người lập trình dễ Collections
sách, hàng đợi và bảng băm
sử dụng và dễ tìm kiếm.
kiếm ứ các
Chứa á lớp
ớ cho phép é thay đổi
ổ
System là một NameSpace gốc của framework.NET. ComponentModel các control và component trong
Nó chứa tất cả các kiểu dữ liệu nguyên thuỷ cả lúc chạy và lúc thiết kế.
(Primitives) và các NameSpace khác. Cung cấp các phương thức và
đối tượng cho phép truy cập
Configuration
đến các thông số cấu hình cho
.NET
CÁC THÀNH PHẦN TRONG TRANG CÁC THÀNH PHẦN TRONG TRANG
Chứa các lớp cho phép tương tác với

• Khai báo Namespace
Data
nguồn dữ liệu, Hình thành nên ADO.NET
Chứa các hàm và hằng số liên quan đến <%@Import NameSpace=<Tên NameSpace>%>
Math
xử
ử lý toán
t á học.
h Ví dụ:
Cung cấp cơ chế truyền thông giữa
Web Client/Browser; Nó mô tả các đối tượng <%@import Namespace = "System.Data" %>
được sử dụng với ASP.NET
<%@import Namespace = "System.Data.OleDb" %>
XML Chứa các lớp để xử lý dữ liệu XML
Chứa các lớp cho phép sử dụng khả
Drawing năng về đồ hoạ
Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 186

TMĐT
CÁC THÀNH PHẦN TRONG TRANG CÁC THÀNH PHẦN TRONG TRANG
• @import: cho phép chỉ ra không gian tên được

Ví dụ: import vào trang aspx
<%@ Page Language="C#" CodeFile=“login.aspx.cs“ Ví dụ:
g %>
Inherits=“login" %@import namespace
<%@import namespace=“System.Data”
System.Data %%>
<%@ import namespace=“System.Data” %> • @Register: kết hợp alias với namespace và tên lớp
<%@ Register Src=“Calendar.ascx“ cho ký hiệu trong cú pháp của server control. Chỉ thị
TagName=“Calendar" TagPrefix="ucPMT" %> này được sử dụng khi drag và drop một user control
vào trang aspx
Cách tạo và chạy ứng dụng Cách tạo và chạy ứng dụng
Tạo ứng dụng web trong Visual Studio.NET
Cấu hình IIS
1. Mở ControlPanel  Administrative Tool – chọn
Khởi động Visual Studio.NET
Internet Information Services (IIS) Chọn File – New – Website
2. Click Phải Default Web Sites – chọn New – chọn Trong hộp thoại New Website
VirtualDirectory Next nhập tên thư mục ảo ‐ Template: chọn ASP.NET Web site.
Next. ‐ Location: file system click Brows chọn vị trí lưu
3. Click Browse chọn thư mục websiteNext chấp website
nhận các option mặc địnhnextfinish ‐ Language: C# OK
Cách tạo và chạy ứng dụng Cách tạo và chạy ứng dụng
• Trong phần Location : nếu để theo mặc định
http://localhost/ sau đó thêm website
http://localhost/MyWeb thì ứng dụng MyWeb sẽ
được tạo ra và lưu ở thư mục root :
c:\InetPub\wwwroot\.
• Nếu sử dụng Virtual Directory đã tạo ở trên
http://localhost/Projects/MyWeb thì ứng dụng
MyWeb sẽ được tạo ra và lưu ở thư mục đã xác định
trong Virtual Directory

TMĐT
3.3.3. Kết hợp ASP.NET Objects với

Cách tạo và chạy ứng dụng
VB.NET
• Ứng dụng web đã được tạo ra và có 1 trang • Thêm các web controls lên form
mặc định là Default1.aspx và các file khác như • Thiết lập thuộc tính WebControl
Web.Config, Styles.css… • Các sự kiện điều khiển trong WebControl
• Mỗi một trang .aspx
aspx trong project đều có 1 file • Các control validation
code behind.
• Thiết kế trang DemoWeb
VD: Default1.aspx.cs riêng để viết code.
Dùng ở chế độ hiển thị HTML Thiết kế trang DemoWeb

• Có thể thêm server control bằng cách chỉ định • RequiredFieldValidator dùng kiểm tra giá trị
code ASP.Net trực tiếp trong chế độ hiển thị của control có hợp lệ hay không. Bảng thuộc
HTML của file .aspx tính:
Thiết kế trang DemoWeb

• Code • Code HTML

TMĐT
3.4. Một số công cụ soạn thảo mã

3.4.1. Công cụ Macromedia
nguồn
• 3.4.1. Công cụ Macromedia • Macromedia Dreamwaver là công cụ dùng để
• 3.4.2. Công cụ Dreamwaver thiết kế website đơn giản, nhanh và mạnh
• Macromedia Flash là công cụ để phát triển các
úng dụng,
dụng phần mềm mô phỏng.
phỏng Flash sử
dụng ngôn ngữ lập trình ActionScrip để tạo
các tương tác, các hoạt cảnh.
3.4.2. Công cụ Dreamwaver NỘI DUNG

• Giới thiệu về Macromedia Dreamweaver.
• Thiết kế Web bằng một số công cụ cơ bản.
• Cách tạo liên kết (Hyperlink).
• Kỹ thuật thiết kế Frame.
• Kỹ thuật Layout.
• Sử dụng CSS để tạo một số hiệu ứng trong
trang Web.
MỤC TIÊU GIỚI THIỆU DREAMWEAVER

Sử dụng phần mềm DreamWeaver để: Giao diện chính của Dreamweaver:
• Thiết kế các trang Web tĩnh, động.
• Tạo các hiệu ứng trong trang Web.
• Quản lý một Website cục bộ.

TMĐT
GIỚI THIỆU DREAMWEAVER GIỚI THIỆU DREAMWEAVER

4) Chức năng các thành phần: 4) Chức năng các thành phần:
 Thanh công cụ Document:  Thanh công cụ Insert:
 Common:
Thiết kế Thiết kế Tiêu đề Thể hiện

bằng bằng của trang lỗi khi Các
HTML công cụ hiện hành thiết kế tùy Tạo Tạo Tạo
chọn liên liên điểm Ảnh Ngày Mẫu
khi kết kết neo
Thiết kế bằng đến
Quản lý file thiết
HTML và bằng địa Bảng Flash, Chú Thẻ lựa
kế
công cụ chỉ (table) ActiveX thích chọn
Xem thử kết quả mail
bằng trình duyệt
GIỚI THIỆU DREAMWEAVER THIẾT KẾ TRANG WEB

4) Chức năng các thành phần: 1) Tạo và lưu một trang Web:
 Thanh công cụ Insert:  Tạo mới một trang Web: click HTML
Ngoài ra còn có các nhóm công cụ khác: (Create New)
+ Layout: cách bố trí, sắp xếp các thành phần.
+ Forms: biểu mẫu
mẫu.
+ Text: định dạng văn bản. Hoặc chọn menu File  New
+ HTML: các thẻ HTML.
+ Application: những ứng dụng trong Web động.
+ Flash elements: các thành phần của Flash.
Xuất hiện cửa sổ thiết kế
THIẾT KẾ TRANG WEB THIẾT KẾ TRANG WEB

1) Tạo và lưu một trang Web: 2) Định dạng tổng quát cho trang Web:
 Lưu trang Web: chọn menu File  Save (Ctrl + S) + Appearance:
Định dạng Font,
Xuất hiện hộp Size, màu chữ cho
thoại Save As toàn trang Web
Đị h d
Định dạng màu
à nền
ề
1. Chọn đường
hoặc sử dụng hình
dẫn nơi lưu file
ảnh để làm nền
2. Đặt tên file và Canh lề trái, trên

phần mở rộng
Canh lề phải, dưới
4. Sau khi đã chọn

3.Chọn loại file
đầy đủ thì click Save
8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 209 8/9/2017 Sau
Bộ môn CNTT - Khoa HTTT Kinh tế khi
và TMĐT đã định dạng, click nút Apply
210

TMĐT

2) Định dạng tổng quát cho trang Web: 2) Định dạng tổng quát cho trang Web:
+ Links: + Title/Encoding:
Định dạng Font,
size, màu chữ cho Tiêu đề của trang Web
các liên kết
Màu liên
Mà liê kết sau
khi đã click
Màu liên kết khi

Màu liên kết
di chuyển chuột
khi active
trên liên kết
Định dạng kiểu mã hóa
8/9/2017 Sau
Bộ môn CNTT - Khoa HTTT Kinh tế khi
và TMĐT đã định dạng, click nút Apply
211 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 212

3) Định dạng Text trên trang Web: 3) Định dạng Text trên trang Web:
 Thêm Font vào danh sách các font:  Bỏ Font trong danh sách các font:
Thêm 1 nhóm font mới
Bỏ bớt 1 nhóm font

1.Chọn nhóm font có
Nhóm font hiện hành font cần bỏ
1.Chọn font cần thêm

2.Chọn font cần bỏ
2.Thêm font vào nhóm
font hiện hành
3.Click nút >> để bỏ

3) Định dạng Text trên trang Web: 3) Định dạng Text trên trang Web:
+ Size: + Color:
Chọn Size trong thanh Chọn Text Color trong Hộp thoại màu và
công cụ Properties thanh công cụ Properties thông tin màu được chọn
Các kích thước có

thể có của font Chọn màu mặc
Các loại đơn định (màu đen)
vị của kích Mã của màu
thước font được chọn Chọn nhiều màu
Màu được chọn

Con trỏ chọn màu

TMĐT

3) Định dạng Text trên trang Web: 4) Paragraph:
+ Các định dạng khác: Phân biệt giữa có Paragraph và không có Paragraph
Định dạng Định dạng
Canh trái Canh giữa Canh phải Canh đều
in đậm in nghiêng
Đây là 3 paragraph
Outdent Indent

5) Danh sách: chọn text cần tạo danh sách 5) Danh sách: chọn text cần tạo danh sách
+ Sử dụng thanh Properties: + Có thể định nghĩa danh sách riêng theo yêu cầu:
Menu Text  List  Properties…
Unordered List Ordered List

(Bullet List) (Numbering List)
+ Sử dụng menu Text:

Menu Text  List  Unordered List/Ordered List

6) Hình ảnh: đặt con trỏ tại vị trí cần chèn 6) Hình ảnh:
+ Thanh công cụ Insert: Kết quả:
Chọn tab Common  Image
Hộp thoại Select Image Source: chọn đường dẫn

nơi lưu file hình ảnh  chọn hình cần chèn  click
OK

TMĐT

6) Hình ảnh: 7) Liên kết:
Thuộc tính: Lưu ý:
+ URL (Uniform Resource Locator): là địa chỉ của
một đối tượng thường được gõ vào vùng Address
của các Web Browser
Browser.
+ Địa chỉ tuyệt đối  Địa chỉ tương đối:
Số khoảng
Độ dày khung bao Canh biên Canh biên Địa chỉ tuyệt đối: là địa chỉ đầy đủ.
quanh hình ảnh so với text so với IE
trắng dọc
hoặc ngang Baseline (Default) Chuỗi Tooltip Vd: http://www.hcmuns.edu.vn/forum/index.htm
so với text thể hiện trên
Top = TextTop
trên trang hình ảnh
Web Middle = Absolute Middle
Bottom = Absolute Bottom
THIẾT KẾ TRANG WEB MỘT SỐ KỸ THUẬT

1) Phân vùng liên kết trên một ảnh:
7) Liên kết:
Các hình thức liên kết: + Chọn hình ảnh cần phân vùng liên kết.
+ Mở liên kết bằng một cửa sổ mới. + Chọn loại công cụ dùng để phân vùng.
+ Mở liên kết trên cùng một cửa sổ.
Phân vùng Phân vùng Phân vùng

+ Mở liên kết là một địa chỉ mail. hình chữ nhật hình elip hình đa giác
+ Tạo phân vùng trên ảnh.

MỘT SỐ KỸ THUẬT MỘT SỐ KỸ THUẬT

2) Bảng: 2) Bảng:
Tạo bảng: Số dòng Số cột Thuộc tính:

Số dòng Chiều cao Độ dày khung
Số cột Chiều rộng Canh biên
Độ rộng cột
Độ dày khung
Convert Table Heights/Widths to Percents Màu nền Màu của khung
Convert Table Heights/Widths to Pixels Ảnh nền
8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 227 Clear Row Heights/Column
8/9/2017 Bộ môn CNTT - Widths
Khoa HTTT Kinh tế và TMĐT 228

TMĐT

3) Layout: 3) Layout:
Chế độ Layout View: Tạo Layout Table:

+ Ở chế độ này, bảng giống như bảng ở chế độ + Chọn tab Layout trên thanh công cụ Insert.
Standard. + Click nút Layout, chọn công cụ Layout Table.
+ Cell pading, Cell spacing và Border = 0
+ Mỗi ô của bảng sẽ chứa 1 khoảng trắng.
+ Kích thước các ô/bảng sẽ dễ dàng chỉnh sửa + Tạo tùy ý trên cửa sổ thiết kế.
so với bảng ở chế độ Stadard, giúp đáp ứng + Tạo các ô bên trong Layout Table vừa tạo
được yêu cầu của thiết kế. (sử dụng công cụ Draw Layout Cell)
 Bảng ở chế độ Layout View gọi là: Layout Table

4) Flash:
3) Layer:
Ví dụ: Chèn file Flash đã có vào trang Web:
Tạo hiệu ứng nổi cho hình/text trên trang Web. + Thanh công cụ Insert: tab Common  Flash
Tạo 1 layer chứa text
Copy thành 1 layer mới

+ Menu Insert: chọn Media  Flash
+ Ấn tổ hợp phím: Ctrl + Alt + F
Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 231 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 232
Định dạng màu cho
8/9/2017
text Kết quả
8/9/2017

5) Rollover Image: 8) CSS (Cascade Style Sheet):
+ Hộp thoại Insert Rollover Image:  Text:

Thao tác chung:
+ Chọn text cần định dạng theo mẫu.
+ Chọn định dạng đã được tạo.
Kết quả

TMĐT
4.1.1. Xuất bản website lên mạng

Chương 4. Triển khai Website
Internet
Bước 1: Đăng ký một tên miền cho Web site.
• 4.1. Qui trình chung triển khai website • Thông qua nhà cung cấp dịch vụ ISP (hoặc công
• 4.2. Đưa website lên Internet ty trung gian có liên kết với ISP), doanh nghiệp
hoặc cá nhân sẽ đăng ký một tên miền (Domain
• 4.3. Quảng bá website name), tên duy nhất xác định một vị trí trên
Internet.
• 4.4. Cập nhật và bảo trì website – tên miền quốc tế www.tencongty.com
– tên miền Việt Nam www.tencongty.com.vn
• Nhà cung cấp dịch vụ Internet ISP (hoặc công ty trung
gian) có nhiệm vụ giúp doanh nghiệp hoặc cá nhân
trong việc quản lý tên miền đó
8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 235 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 236/13
4.1.1. Xuất bản website lên mạng 4.1.1. Xuất bản website lên mạng
Internet Internet
Bước 2: Thuê một không gian lưu trữ Website
trên một máy chủ Web Bước 3: Thiết kế nội dung và upload Website
• Nhà cung cấp dịch vụ cho thuê không gian trên máy • Doanh nghiệp hoặc cá nhân sử dụng các phần mềm FTP
chủ cung cấp cho doanh nghiệp hoặc cá nhân địa ở máy khách và tài khoản FTP đã có để đưa nội dung
chỉ máy chủ để điền vào phần địa chỉ máy chủ trong trang Web lên không gian đã được thuê trên máy chủ
mục quảnả lý tên miền.
ề Web.
• Nhà cung cấp dịch vụ cho thuê không gian trên máy • Doanh nghiệp hoặc cá nhân có thể đăng ký cho
chủ cung cấp cho doanh nghiệp hoặc cá nhân một mình rất nhiều tên miền nhưng chỉ cần sử dụng
tài khoản FTP (địa chỉ FTP, usename, password) để một bản thiết kế nội dung Web site trên một máy
doanh nghiệp đưa nội dung (upload) Website của chủ Web. Tất cả các tên miền của doanh nghiệp
mình lên máy chủ Web đó đều dẫn tới nội dung này nhờ dịch vụ URL
Forwarding.
8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 237/13 8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 238/13
4.1.2. Quảng bá website 4.1.3. Cập nhật và bảo trì website

• Đăng ký Website với các công cụ tìm kiếm
• Các công việc nâng cấp và bảo trì website
• Thiết lập các liên kết đến trang web – Sao lưu thông tin liên quan đến website
• Chiến lược lan truyền (viral marketing) • Cơ sở dữ liệu
• Quan hệ đại chúng (Public Relations – PR) • Các mẫu mà người dùng tùy chỉnh
• IMG/ thư mục
• Các phương tiện thông tin truyền thống
• Thư mục Plugin nếu sử dụng plugin
• Email – Nâng cấp các phiên bản hỗ trợ website của bạn
• Trả tiền cho quảng cáo • Nâng cấp chức năng
• Nâng cấp bảo mật
8/9/2017 Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT 239/13 8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 240

TMĐT
4.2. Đưa website lên Internet 4.2.1. Domain ‐ Host

• 4.2.1. Domain ‐ Host • Host là nơi chứa trang web, là một vùng trên ổ
cứng của một cái máy chủ nào đó. Khi tìm host
• 4.2.2. Upload file và kiểm thử miễn phí, bạn nên xem host này có dung lượng
bao nhiêu, 100M, 200M, ..., băng thông bao nhiêu
(lượng truy cập tối đa cho phép), có hỗ trợ PHP
và MySQL hay không (nếu bạn muốn làm web
động).
• Domain name có thể hiểu là địa chỉ dẫn đến trang
web của bạn, như cái URL ấy.
– Ví dụ trang web của mình có domain name là
tmu.edu.vn, mình gõ domain name vào thanh
address của trình duyệt thì mình sẽ đến trang web đó.
4.2.2. Upload file và kiểm thử Cài đặt FTP Client

• Cài đặt FTP Client • Để sử dụng dịch vụ FTP bắt buộc phải sử dụng
FTP client có hỗ trợ TLS.
• Thiết lập kết nối FTP server • Sử dụng FileZilla FTP Client. Đây là một FTP client
• Download và Upload tài liệu miễn phí và dễ sử dụng.
– Truy cập vào địa chỉ :
http://sourceforge.net/projects/filezilla/files/FileZilla_
Client/
– Tìm và download phiên bản FileZilla_X_win32.zip mới
nhất.
– Sau khi giải nén, double click file filezilla.exe để chạy
ứng dụng
Thiết lập kết nối FTP server Thiết lập kết nối FTP server
• Thiết lập kết nối đến FTP Server như sau:
• Vào Menu File --> Site Manager
– 1 - Click New Site (chỉ làm lần đầu)
– 2 - Nhập tên site (tùy ý)
– 3 - Nhập địa chỉ Host: ftp.agu.edu.vn
ftp agu edu vn
– 4 - Chọn chế độ mã hóa là “Require explicit FTP
over TLS”
– 5 - Kiểu login: Normal
– 6 - User: nhập tên account (UserId)
– 7 - Nhập mật khẩu.
– 8 - Click Connect.

TMĐT
Ví dụ thiết lập kết nối Download và Upload tài liệu
4.3. Quảng bá website 4.3.1. Quảng bá website cá nhân

• 4.3.1. Quảng bá website cá nhân Thiết lập các liên kết đến trang web
• 4.3.2. Quảng bá website của tổ chức Chiến lược lan truyền (viral marketing)
Quan hệ
ệ đại
ạ chúng
g ((Public Relations – PR))
Email
4.3.2. Quảng bá website của tổ chức 4.4. Cập nhật và bảo trì website
Đăng ký Website với các công cụ tìm kiếm • 4.4.1. Cập nhật thông tin và lưu trữ dữ liệu
Thiết lập các liên kết đến trang web • 4.4.2. Bảo trì website
Chiến lược
ợ lan truyền
y ((viral marketing)
g)
Quan hệ đại chúng (Public Relations – PR)
Các phương tiện thông tin truyền thống
Email
Trả tiền cho quảng cáo

TMĐT
4.4.1. Cập nhật thông tin và lưu trữ dữ

4.4.2. Bảo trì website
liệu
• Sao lưu thông tin liên quan đến website • Nâng cấp các phiên bản hỗ trợ website của bạn
– Cơ sở dữ liệu – Nâng cấp chức năng
– Các mẫu mà người dùng tùy chỉnh – Nâng cấp bảo mật
– IMG/ thư mục • Lưu
Lư ý:
ý
– Thư mục Plugin nếu sử dụng plugin – Nên có kế hoạch bảo trì
• Lưu ý: • Hàng năm
– Thực hiện việc sao lưu dữ liệu trước khi thực hiện • Mỗi ba tháng
bất cứ một hành động nào • Hàng tháng
• Hàng tuần
Câu hỏi và bài tập
8/9/2017 Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT 255

Bài Giảng Thiết Kế Và Triển Khai Website

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Bài Giảng Thiết Kế Và Triển Khai Website

Uploaded by

Copyright:

Available Formats

Bộ môn CNTT - Khoa HTTT Kinh tế và 8/9/2017

THIẾT KẾ VÀ TRIỂN KHAI WEBSITE

MỤC TIÊU CỦA MÔN HỌC MỤC TIÊU CỤ THỂ

TÀI LIỆU THAM KHẢO NỘI DUNG CHƯƠNG TRÌNH

Bài giảng Thiết kế và triển khai Website 1

Chương 1 1.1. Một số khái niệm cơ bản

triển khai website

Bộ môn CNTT - Khoa HTTT Kinh tế và

1.1. Một số khái niệm cơ bản 1.1.1. Cơ bản về Internet

4 lớp của mô hình TCP/IP Chồng giao thức TCP/IP

• Layer 4: Application (ứng dụng)

Bài giảng Thiết kế và triển khai Website 2

vnn com edu gov

Bài giảng Thiết kế và triển khai Website 3

Mô hình Client/Server Mô hình Client/Server

Bài giảng Thiết kế và triển khai Website 4

Chế độ không nghẽn

• Tổ chức website chặt chẽ và dễ sử dụng 1. Khái quát

1. Khái quát 2. Các bước tổ chức thông tin

Bài giảng Thiết kế và triển khai Website 5

Sơ đồ phân bố thông tin của website Ngân Hàng

Bài giảng Thiết kế và triển khai Website 6

Bài giảng Thiết kế và triển khai Website 7

b. Cấu trúc phân cấp (Hierarchy) c. Cấu trúc ô lưới (Grid)

d. Cấu trúc mạng nhện

Kết luận Nguyên tắc sử dụng hiệu ứng

Sơ đồ phản ánh mối tương

Bài giảng Thiết kế và triển khai Website 8

Không có tính đồng

Thỏ 1 năm tuổi

1.2.2. Quy trình chung thiết kế Website

• Khái quát chung

Bài giảng Thiết kế và triển khai Website 9

1.2.2. Quy trình chung thiết kế Website

Thiết kế giao diện TK giao diện hướng người sử dụng

Bài giảng Thiết kế và triển khai Website 10

1.3 Nguyên tắc và quy trình triển

Chương 2. Thiết kế và xử lý đồ họa

Bài giảng Thiết kế và triển khai Website 11

Phân loại theo các lĩnh vực của đồ hoạ máy

Hỗ trợ thiết kế (CAD – Computer‐

Bài giảng Thiết kế và triển khai Website 12

Giao diện người dùng và máy tính

Bài giảng Thiết kế và triển khai Website 13

2.2. Thiết kế đồ họa cho website

Các đối tượng đồ họa cơ sở 2.2.2. Xử lý ảnh trong website

2.3. Công cụ photoshop cho xử lý đồ họa 2.3.1. Giới thiệu về photoshop

Bài giảng Thiết kế và triển khai Website 14

Các khái niệm cơ bản

Hình ảnh bitmap

Bài giảng Thiết kế và triển khai Website 15

2.3.2. Các thao tác cơ bản

Bộ môn CNTT - Khoa HTTT Kinh tế và

2. CHỌN CÔNG CỤ (Toolbox) THAO TÁC VỚI LAYER

Bài giảng Thiết kế và triển khai Website 16

CHỈNH SỬA ẢNH CHỈNH SỬA ẢNH

2.3.4. Xuất dữ liệu và tích hợp lên

Bài giảng Thiết kế và triển khai Website 17

3.1.1. Tổng quan về HTML 3.1.2. Các thẻ HTML

3.1.2. Các thẻ HTML Font & Color

Bộ môn CNTT - Khoa HTTT Kinh tế

Bộ môn CNTT - Khoa HTTT Kinh tế

Bài giảng Thiết kế và triển khai Website 18

Lớp thẻ tạo danh sách List