Bài giảng Thiết kế và triển khai Website - Trường đại học Thương Mại

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

8/9/2017

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
− Lý thuyết:  27 tiết
− Thảo luận: 6 tiết
Thực hành: 12 tiết
− Thực hành: 12 tiết
• Đánh giá kết quả

Bộ mơn Cơng nghệ thơng tin
Bài giảng học phần:
Thiết kế và triển khai Website

8/9/2017

Bộ mơn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

• ‐ Điểm chun cần: 10%
• ‐ K/Tra + T/Hành+T/luận: 30%
• ‐ Thi cuối kỳ: 60% 
1

8/9/2017

MỤC TIÊU CỦA MƠN HỌC

Bộ mơn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

3

• Cung cấp những kiến thức cơ bản về Internet, World
wide web, giao thức HTTP, giao thức FTP, ngơn ngữ
đánh dấu HTML,...
• Một số ngơn ngữ và công cụ trợ giúp thiết kế và xây
dựng website.
• Qui trình triển khai, nâng cấp, bảo trì, Phương thức
quảng bá trang web trên mạng.
• Quy trình thiết kế và triển khai một website TMĐT

8/9/2017

TÀI LIỆU THAM KHẢO
• [1] Harvey & Paul, Internet & World Wide Web: How to Program
(4th Edition), Deitel & Associates (Paperback), 2010
• [2] Gerry McGovern, The Website Manager’s Handbook, ISBN: 
978‐1‐4116‐8529‐1, 
• Shane Diffily, 2014
• [3] Nguyễn
[3] N ễ Trường
T ờ Sinh, Thiết
Si h Thiết kế Web bằng
W b bằ hình
hì h minh hoạ, NXB 

i h h NXB
Minh Khai, 2007
• [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

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

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

Bộ mơn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

4

NỘI DUNG CHƯƠNG TRÌNH

• TLTK bắt buộc:

8/9/2017

2

MỤC TIÊU CỤ THỂ

• Mơn học cung cấp những kiến thức cơ bản về
world wide web, các giao thức, ngôn ngữ
đá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ố
công cụ thiết kế và trợ giúp việc xây dựng
website, giúp học viên nắm được những yêu
cầu, qui trình thiết kế và triển khai một
website thực tế.

8/9/2017

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

5

Chương 1. Tổng quan về thiết kế và triển khai
website 
Chương 2. Thiết kế và xử lý đồ họa trên website
Chương 3. Một số ngôn ngữ xây dưng Website
Chương 4. Triển khai Website

8/9/2017

Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

6

1


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

8/9/2017

Nội dung
Chương 1

Tổng quan về thiết kế và
triển khai website

8/9/2017

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

7

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
1.3 Nguyên tắc và quy trình triển khai Website

8/9/2017

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

Bộ mơn CNTT - Khoa HTTT Kinh tế và TMĐT

• Mạng máy tính – phân loại theo
phạm vi địa lý
• Hệ điều hành mạng
• Mơ
ơ hình

hì h TCP/IP
/
• Dịch vụ tên miền

9

8/9/2017

4 lớp của mơ hình TCP/IP 
•
•
•
•

8/9/2017

8

1.1.1. Cơ bản về Internet

1.1.1. Cơ bản về Internet
1.1.2. World wide web ‐ Website
1.1.3. Giao thức truyền nhận Client/Server 

8/9/2017

Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

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

10

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)

Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

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

11

8/9/2017

Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

12

2


Bộ mơn CNTT - Khoa HTTT Kinh tế và
TMĐT

8/9/2017

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 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

8/9/2017

Bộ mơn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

13

8/9/2017

Cấu trúc CSDL tên miền

Bộ mơn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

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í
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

vnn
8/9/2017

Bộ mơn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

14

15

8/9/2017

vn

com

fr

edu

uk

gov

Bộ mơn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

16

DSN
• ví dụ:
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:
vn  edu  purdue  cs 

8/9/2017

Bộ mơn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

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

1.1.2. World wide web Website

17

8/9/2017

Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

18

3


Bộ mơn CNTT - Khoa HTTT Kinh tế và
TMĐT

8/9/2017

WWW
• World Wide Web là một bước tiến lớn trong quá trình tìm
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)
khác nhau.

1.1.3. Giao thức truyền nhận
trong Client/Server

yệ khác nhau sẽ có những
gg
giả định
ị khác
• Các trình duyệt
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, …

8/9/2017

Bộ mơn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

19

8/9/2017

Mơ hình Client/Server

Mơ hình Client/Server

– Q trình chun cung cấp một số phục vụ
nào đó, chẳng hạn: phục vụ tập tin, phục vụ
máy in, phục vụ thư điện tử, phục vụ Web...
Các quá trình này được gọi là các trình phục
vụ hay Server.
– Một số q trình khác có u cầu sử dụng
các dịch vụ do các server cung cấp được gọi
là các q trình khách hàng hay Client.
Bộ mơn CNTT - Khoa HTTT Kinh tế và TMĐT

20

• 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).
• Để được phục vụ, client sẽ gửi một thông điệp yêu cầu
(Request Message) mô tả về cơng việc muốn server
thực hiện.
• Khi nhận được thơng điệp yêu cầu, server tiến hành
phân tích để xác định cơng việc cần phải thực thi.

thi
• Nếu việc thực hiện yêu cầu này có sinh ra kết quả trả
về, server sẽ gởi nó cho client trong một thơng điệp trả
lời (Reply Message).
• Dạng thức (format) và ý nghĩa của các thông điệp trao
đổi giữa client và server được qui định rõ bởi giao thức
(protocol) của ứng dụng.

• Trong mơ hình này, chương trình ứng
dụng được chia thành 2 thành phần:

8/9/2017

Bộ mơn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

21

8/9/2017

Bộ mơn CNTT - Khoa HTTT Kinh tế và TMĐT

22

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ằng

g lệnh
ệ
send) , sự thực thi
của nó sẽ bị tạm dừng
cho đến khi q trình
nhận phát ra lệnh
nhận số dữ liệu đó
(thường là lệnh
receive).
8/9/2017

Bộ mơn CNTT - Khoa HTTT Kinh tế và
TMĐT

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

23

8/9/2017

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

24

4


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

8/9/2017

Chế độ khơng nghẽn
1.2. Ngun tắc và quy trình thiết kế Website

• Trong chế độ này,
khi quá trình client
hay server phát ra
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ó q trình
nào phát ra lệnh
nhận số dữ liệu đó
hay khơng.
8/9/2017

Bộ mơn CNTT - Khoa HTTT Kinh tế và TMĐT

1.2.1. Các nguyên tắc trong thiết kế website
1.2.2. Quy trình chung thiết kế Website

25

8/9/2017

Bộ mơn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

26

1.2.1. Các ngun tắc trong thiết kế website

1.2.1. Các nguyên tắc trong thiết kế website

•
•
•
•
•

1. Khái qt
2. Các bước tổ chức thơng tin
3. Các kiểu cấu trúc thiết kế

Tổ chức website chặt chẽ và dễ sử dụng
Sử dụng từ ngữ dễ hiểu. 
Dễ dàng khám phá các đường link. 
Thời gian tải về nhanh. 
Tương thích với đa số trình duyệt web.   

8/9/2017

Bộ mơn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

27

8/9/2017

1. Khái qt

Bộ mơn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

28

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.
• 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ế
đồ hoạ, qui ước lớp và biên tập thông tin thành các đơn vị
riêng rẽ
• Thực tế với độc giả các tin ngắn gọn, riêng biệt sẽ chức năng
hoá hơn và dễ định vị hơn khối thơng tin dài

• Phân chia thơng tin thành các đơn vị logic
• Thiết lập hệ thống phân cấp thơng tin
• Tạo mối quan hệ giữa các hệ thống phân cấp
thơngg tin
• Phân tích sự thành cơng về chức năng và thẩm
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.
8/9/2017

Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

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

29

8/9/2017

Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

30

5


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

8/9/2017

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

8/9/2017

Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

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

31

8/9/2017

Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

32

8/9/2017

Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

33

8/9/2017

Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

34

8/9/2017

Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

35

8/9/2017

Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

36

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

6


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

8/9/2017

8/9/2017

Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

37

8/9/2017

Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

38

8/9/2017

Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

39

8/9/2017

Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

40

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
ệ ((Web) 
)
d. Cấu trúc mạng




8/9/2017

Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

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

41

Thể hiển thị thông tin một
tin một cách tuần tự, tiếp
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ữ

8/9/2017

Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

42

7


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

8/9/2017

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ách tốt nhất để tổ
chức các khối thơng tin 
phức hợp.
• Cấu

Cấ trúc
ú phân
hâ cấp
ấ đặc
đặ
biệt thích hợp cho các
website vì các website 
ln được thực hiện rẽ
nhánh từ một trang chủ
duy nhất.
8/9/2017

– Cấu trúc là cách tốt để phản ánh tương quan các biến số như
sự kiện, cơng nghệ , văn hố, …
– Các chủ đề khơng có sự phân cấp về mức độ quan trọng
– Rất tốt với các độc giả có kinh nghiệm, những người đã có
sẵn
ẵ kiến thức về chủ đề và hệ thống
– Các sơ đồ tổng qt có thể rất hữu ích đối với các site kiểu
lưới

• Nhược điểm:
– Khó hiểu với độc giả khi độc giả chưa xác định được mối liên
quan giữa các loại thơng tin
43

Bộ mơn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

44

• Ư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.

45

Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

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

Sơ đồ tổng quan cấu trúc ô lưới

8/9/2017

8/9/2017

8/9/2017

Kết luận

Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

46

Nguyên tắc sử dụng hiệu ứng

* Đa số các website đều sử
dụng cả 4 kiểu cấu trúc
thông tin trên.
* Tuy nhiên hệ thống thông
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. 

1. Các nguyên tắc nghệ thuật
2. Các nguyên tắc sử dụng hình ảnh, đồ hoạ, 
text

Sơ đồ phản ánh mối tương
quan giữa 4 kiểu cấu trúc
8/9/2017

Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

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

47

8/9/2017

Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

48

8


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

8/9/2017

1. Các nguyên tắc nghệ thuật

1. Các ngun 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ệ

8/9/2017

Bộ mơn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

49

1. Các ngun tắc nghệ thuật

8/9/2017

Bộ mơn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

50

2. Ngun tắc sử dụng hình ảnh, đồ hoạ, text
• Nên kết hợp giữa đồ họa và văn bản
• Điều chỉnh kích cỡ sao cho hợp lý

c. Cung cấp một tiêu điểm:
‐ Sử dụng sự tương phản:

Thỏ 1 năm tuổi

8/9/2017

Bộ mơn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

51

8/9/2017

Bộ mơn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

52

1.2.2. Quy trình chung thiết kế Website
• Khái qt chung 
• Thiết kế giao diện
• Thiết kế nội dung
kế nội dung

8/9/2017

Bộ mơn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

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

53

8/9/2017

Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT

54

9


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

TMĐT

8/9/2017

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
người sử dụng hay những kiến thức về cách thức tổ
chức thơng tin,…
• Trước khi xây dựng một Website, chúng ta cần phải:
–
–
–
–
8/9/2017

•
•
•
•

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
Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

55/55

8/9/2017

Thiết kế giao diện

8/9/2017

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

56/55

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
nên nét đặc trưng "nhìn thấy và cảm nhận" của các
trang web
• Khơng thể hồn tồn tách rời thiết kế đồ hoạ với thiết
kế giao diện
• Trả lời các câu hỏi:
–
–
–
–

Đào tạo
Dạy học
Giá dục
Giáo

d
Tham khảo

• Mục tiêu giúp người sử dụng tự điều khiển
được máy tính của họ
• Không được đặt bất cứ cản trở nào cho người
sử dụngg
• 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?
Bộ mơn CNTT - Khoa HTTT Kinh tế và TMĐT

57/55

8/9/2017

Tương thích với các trình duyệt khác nhau
• 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ả
năng đồ hoạ vẫn hiểu được chức năng của hình ảnh trên trang
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ế
mà chúng ta cho hỗ trợ cùng hình ảnh đồ hoạ, do đó khơng
hồn tồn mất hẳn nội dung của bức ảnh, phím đồ hoạ đi kèm
trang web 

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

58/55

Thiết kế nội dung
• Các phần nội dung cơ bản trong 1 Webiste
• Một số chức năng thường gặp của website và
mục đích sử dụng
• Nội
ộ dung cơ
g bản của một
ộ số website TMĐT
– Trang chủ (home page) 
– Trang liên hệ (contact us) 
– 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) 

•
8/9/2017

Bộ mơn CNTT - Khoa HTTT Kinh tế và TMĐT

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

59/55

8/9/2017

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

60/55

10


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

8/9/2017

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

Thiết kế nội dung
• Nội dung cơ bản của một số website 
TMĐT:
–
–
–
–
–
–
–
–
8/9/2017

• 1.3.1. Các ngun tắc trong triển khai Website
• 1.3.2. Quy trình chung triển khai Website

Giới thiệu về Cty

Quảngg cáo sản p
phẩ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
…
Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT

61/55

8/9/2017

1.3.1. Các ngun tắc trong triển khai 
Website
• Kiểm tra thật kỹ website trước khi triển khai
• Th khơng gian lưu trữ web đủ lớn và nên 
mua ở các tổ chức đáng tin cậy
• Nên có q trình thử nghiệm trước khi đưa 
ê ó á ì h hử hiệ
ớ khi đ
trang web hoạt động chính thức
• Nâng cấp và bảo trì trang web thường xun

8/9/2017

Bộ mơn CNTT - Khoa HTTT Kinh tế và TMĐT

• Đưa website lên Internet

• Quảng bá website
• Cập nhật và bảo trì website

63

8/9/2017

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

Bộ mơn CNTT - Khoa HTTT Kinh tế và TMĐT

64

2.1.1. Khái niệm chung
• Đồ họa máy tính là một trong những lĩnh vực 
hấp dẫn và phát triển rất mau lẹ, nó làm thay 
đổi hồn tồn việc tương tác giữ người và 
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í….

• 2.1. Tổng quan về đồ họa
• 2.2. Thiết kế đồ họa cho website
• 2.3. Cơng cụ photoshop cho xử lý đồ họa

Bộ mơn CNTT - Khoa HTTT Kinh tế và TMĐT

62/55

1.3.2. Quy trình chung triển khai 
Website

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

8/9/2017

Bộ mơn CNTT - Khoa HTTT Kinh tế và TMĐT

65

8/9/2017

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

66

11


Bộ mơn CNTT - Khoa HTTT Kinh tế và
TMĐT

8/9/2017

2.1.2. Phân loại về đồ họa máy tính

• Kiến tạo đồ họa:

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

– Các hệ CAD/CAM (Computer Aided Design/Computer 
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à 
các hệ thống khác nhau: hệ thống cơ, hệ thống điện, hệ 
thống điện tử….
thống điện tử….
– Đồ hoạ minh hoạ (Presentation Graphics): gồm các cơng cụ 
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 tốn có sẵn.
– Đồ hoạ hoạt hình và nghệ thuật: bao gồm các cơng cụ giúp 
cho các hoạ sĩ, các nhà thiết kế phim hoạt hình chun 
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.

– Kiến tạo đồ họa
– Xử lý đồ họa.
họa

• Phân loại theo hệ toạ độ
– Tọa độ 2 chiều(2D) 
– Tọa độ 3 chiều(3D)

8/9/2017

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

67

Phân loại theo các lĩnh vực của đồ hoạ 
máy tính
• Xử lý đồ họa:
– Kỹ thuật xử lý ảnh (Computer Imaging): sau q trình xử lý 
ảnh cho ta ảnh số của đối tượng. Trong q trình xử lý ảnh 
sử dụng rất nhiều các kỹ thuật phức tạp: kỹ thuật khơi 
phục ảnh, kỹ thuật làm nổi ảnh, kỹ thuật xác định biên ảnh.
– 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 
trí được xác định từ trước và bằng các thuật tốn chọn lọc 
để có thể phân tích hay tổng hợp ảnh đã cho thành một 
tập hợp các ảnh gốc, các ảnh gốc này được lưu trong một 
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.
8/9/2017

Bộ mơn CNTT - Khoa HTTT Kinh tế và TMĐT

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

69

8/9/2017

• Kỹ thuật đồ hoạ hai chiều: là kỹ thuật đồ hoạ 
máy tính sử dụng hệ toạ độ hai chiều (hệ toạ 

độ phẳng), sử dụng rất nhiều trong kỹ thuật 
xử lý bản đồ đồ thị
xử lý bản đồ, đồ thị.
• Kỹ thuật đồ hoạ ba chiều: là kỹ thuật đồ hoạ 
máy tính sử dụng hệ toạ độ ba chiều, địi hỏi 
rất nhiều tính tốn và phức tạp hơn nhiều so 
với kỹ thuật đồ hoạ hai chiều.
8/9/2017

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

Bộ mơn CNTT - Khoa HTTT Kinh tế và TMĐT

70

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

• Hỗ trợ thiết kế (CAD – Computer‐Aided 
Design)
• Giao diện người dùng và máy tính
• Biểu
iể diễn
diễ thơng
hơ tin
i
• Lĩnh vực giải trí, nghệ thuật
• Giáo dục và đào tạo
• Bản đồ học
Bộ mơn CNTT - Khoa HTTT Kinh tế và TMĐT

68

Phân loại theo hệ toạ độ:tọa độ 2 
chiều(2D) và 3 chiều(3D)

2.1.3. Ứng dụng của đồ họa máy tính

8/9/2017

Bộ mơn CNTT - Khoa HTTT Kinh tế và TMĐT

• Hỗ trợ thiết kế được xem như một ứng dụng 
chính của đồ họa tương tác đối tượng khơng 
gian, trong đó đối tượng được xây dựng trực 
tiếp như là mơ hình thiết kế
tiếp như là mơ hình thiết kế. 
• 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 
thủy, tàu vũ trụ, máy tính, trang trí mẫu vải, và 
rất nhiều sản phẩm khác.
71

8/9/2017

Bộ mơn CNTT - Khoa HTTT Kinh tế và TMĐT

72

12

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

8/9/2017

73

8/9/2017

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

74

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
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
8/9/2017

Bộ mơn CNTT - Khoa HTTT Kinh tế và TMĐT

75

8/9/2017

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

76

8/9/2017

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

77

8/9/2017

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

78

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

13

Bộ mơn CNTT - Khoa HTTT Kinh tế và
TMĐT

8/9/2017

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

Bộ mơn CNTT - Khoa HTTT Kinh tế và TMĐT

8/9/2017

• Ả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

79

Bộ mơn CNTT - Khoa HTTT Kinh tế và TMĐT

8/9/2017

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 
cần trả lời 03 câu hỏi sau:

– Thơng tin: tọa độ (x, y)
– Thuộc tính: mầu sắc

• Đoạn thẳng, đường gấp khúc

– Nó có liên quan khơng?
– Nó có thú vị khơng?
Nó có thú vị khơng?
– Nó có hấp dẫn khơng?

– Thơng tin: điểm đầu (x1, y1) điểm cuối (x2, y2)
– Đường gấp khúc là tập các đoạn thẳng nối với nhau một cách 
ờ
ấ khú là ậ á đ
hẳ
ối ới h
ộ á h
tuần tự
– Thuộc tính: mầu sắc, độ rộng nét vẽ, kiểu nét vẽ

• Lưu ý:

• Vùng tơ
– Thơng tin: đường biên và vùng bên trong

– Thuộc tính: mầu tơ và mẫu tơ

• 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ự …
8/9/2017

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

81

– Nguồn ảnh hợp pháp
– Ln chú ý đến hướng dẫn sử dụng hình ảnh
– Trích dẫn nguồn ảnh sử dụng nếu lấy từ nguồn khác
Bộ mơn CNTT - Khoa HTTT Kinh tế và TMĐT

8/9/2017

• Adobe Photoshop
• Phiên bản mới nhất hiện nay là Adobe Photoshop CC.

2.3.1. Giới thiệu về photoshop
2.3.2. Các thao tác cơ bản
2.3.3. Các hiệu ứng cơ bản
2.3.4. Xuất dữ liệu và tích hợp lên website

–
–
–
–
–

Bộ mơn CNTT - Khoa HTTT Kinh tế và TMĐT

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

Chỉnh sửa ảnh cho các ấn phẩm,
Thiết kế trang web,
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.

• 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
–
–
–
–

8/9/2017

82

2.3.1. Giới thiệu về photoshop

2.3. Cơng cụ photoshop cho xử lý đồ họa
•
•
•
•

80

83

8/9/2017

Adobe Illustrator,
Adobe Premiere,
After After Effects
Adobe Encore.

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

84

14


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

8/9/2017

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)

8/9/2017

Bộ mơn CNTT - Khoa HTTT Kinh tế và TMĐT

85

8/9/2017

87

8/9/2017

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

86

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

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

88

Hình ảnh bitmap

8/9/2017

Bộ mơn CNTT - Khoa HTTT Kinh tế và TMĐT

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

89

8/9/2017

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

90

15


Bộ mơn CNTT - Khoa HTTT Kinh tế và
TMĐT

8/9/2017

Hình ảnh RGB có 3 kênh màu R, G, B

8/9/2017

Bộ mơn CNTT - Khoa HTTT Kinh tế và TMĐT

Hình ảnh CMYK có 4 kênh màu C, M, Y, K

91

8/9/2017

93

8/9/2017

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

92

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

8/9/2017

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

2. CHỌN CƠNG CỤ (Toolbox)

– Vào windows tools

• Chọn cơng cụ: 
– Nhấn phím tắt của cơng cụ hoặc
Nhấ hí ắ ủ ơ
h ặ
– Sử dụng chuột chọn cơng cụ 
– Click chuột phải vào cơng cụ có tam giác nhỏ phía 
dưới để hiển thị các cơng cụ ẩn.

Bộ mơn CNTT - Khoa HTTT Kinh tế và TMĐT

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

94

THAO TÁC VỚI LAYER

• Hiển thị/tắt thanh cơng cụ (toolbox):

8/9/2017

Bộ mơn CNTT - Khoa HTTT Kinh tế và
TMĐT

95

• Layer / New / Layer Via Copy: Copy vùng 
chọn đặt trên 1 layer mới (Ctrl‐J)
• Layer / New / Layer Via Cut: Cắt vùng 

chọn đặt trên 1 layer mới (Shift Ctrl J)
chọn đặt trên 1 layer mới (Shift‐Ctrl‐J)
• Nhân bản layer: Chọn layer vào menu 
layer Duplicate Layer (click chuột phải vào 
layer Duplicate Layer )

8/9/2017

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

96

16


Bộ mơn CNTT - Khoa HTTT Kinh tế và
TMĐT

8/9/2017

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 
biên

• Điều chỉnh màu cho ảnh với lệnh Curves:
– Image AdjustmentsCurves
– Di chuyển đường thẳng để xem sự thay đổi

– Menu Filter / Sharper / Unsharp Mask
– Amount: Định gi trị độ sắc nét cho ảnh, 
Radius: các điểm biên chịu tác động, Threshold :
xác định mức độ khác biệt về độ nét

• Thay thế màu trong ảnh:
Th thế à t
ả h
– Image AdjustmentsReplace Color
– Sử dụng công cụ chọn màu cần thay đổi
– Kéo các thanh trượt để thay đổi

8/9/2017

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

97

8/9/2017

• Nhóm Filter Artistic:
– Colored Pencil : Làm cho ảnh hay phần
được chọn giống như phần được vẽ
bằng chì phấn
bằng chì phấn
–…
• Nhóm Filter Blur: tạo độ nhịe
• Nhóm FilterPixelate:Phá vở hình ảnh thành 
nhiều mảnh
Bộ mơn CNTT - Khoa HTTT Kinh tế và TMĐT

99

• Các định dạng ảnh:
– JPEG: định dạng này có thể thể hiện với hàng triệu 
mầu
– GIF: ảnh này thể hiện với 256 mầu và hỗ trợ ảnh 
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 
và giữ được độ sắc nét chi tiết

8/9/2017

Chương 3. Một số ngơn ngữ xây dưng 
Website
•
•
•
•

Bộ mơn CNTT - Khoa HTTT Kinh tế và TMĐT

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

101

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

100

3.1. HTML (Hyper Text Makup
Language)
•
•
•
•

3.1. HTML (Hyper Text Makup Language)
3.2. PHP,  Javascript        
3.3. Mơi trường ASP.NET
3.4. Một số cơng cụ soạn thảo mã nguồn 

8/9/2017

98

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

NHĨM CÁC BỘ LỌC

8/9/2017

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

3.1.1. Tổng quan về HTML
3.1.2. Các thẻ cơ bản của HTML   
3.1.3. Sử dụng Frontpage
3.1.4. Định dạng bằng CSS

8/9/2017

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

102

17


Bộ mơn CNTT - Khoa HTTT Kinh tế và
TMĐT

8/9/2017

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 
siêu văn bản – Ngơn ngữ để viết các trang web.

• Cấu trúc chung của một siêu văn bản
<HTML>
<HEAD>
<TITLE> Tiêu đề trang </TITLE>
... Các khai báo khác ở đây
Các khai báo khác ở đây
</HEAD>
<BODY>

... Nội dung cần thể hiện ở đây
</BODY>
</HTML>

• Do Tim Berner Lee phát minh và được W3C (World Wide 
Web Consortium) đưa thành chuẩn năm 1994
• Các trang Web đầy sinh động mà bạn thấy trên WWW là 
các trang siêu văn bản được viết bằng HTML
• HTML cho phép bạn tạo ra các trang phối hợp hài hồ 
giữa văn bản thơng thường với hình ảnh, âm thanh, video, 
các mối liên kết đến các trang siêu văn bản khác

Bộ mơn CNTT - Khoa HTTT Kinh tế và TMĐT

8/9/2017

103

8/9/2017

Bộ mơn CNTT - Khoa HTTT Kinh tế và TMĐT

3.1.2. Các thẻ HTML

Font & Color

• Các lớp thẻ
–
–
–

–
–
–
–

104

• Thẻ

Cấu trúc (structure)
Định dạng (formatting)
Ảnh (image)
Danh sách (list)
Bảng (table)
Form
Khung hiển thị (frame)

<html><body>

- font

<font face=Arial>Arial</font>


• Thuộc tính

<font size=1>Size 1</font>


- face

<font size=7>Size 7</font>

- size

<font color=red>Red</font>


- color

<font color=#0000FF>Blue</font>


- style

<font style=‘font-size: 72pt’>72pt</font>
</body></html>

8/9/2017

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

105

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

8/9/2017

106

Lớp thẻ âm thanh, hiện ảnh

Link & URL & Bookmark

• Chèn hình ảnh vào trang web
– thẻ <img> khơng có thẻ kết thúc, gồm các thuộc 
tính:

• Thẻ
-a
• Thuộc
Th ộ tính
tí h
- href
- title
- name

8/9/2017

+ WEB Resource

•
•
•
•
•

+ File System
+ Bookmark

Bộ mơn CNTT - Khoa HTTT Kinh tế
và TMĐT

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

107

8/9/2017

Src: Đường dẫn đến file ảnh
Src:
Đường dẫn đến file ảnh
Alt: Đoạn văn bản hiển thị khi khơng có ảnh
Width, height: Độ rộng, chiều cao của ảnh khi hiển thị
Border: Độ đậm của đường viền xung quanh ảnh
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

Bộ mơn CNTT - Khoa HTTT Kinh tế và TMĐT

108

18


Bộ mơn CNTT - Khoa HTTT Kinh tế và
TMĐT

8/9/2017

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

Gồm các loại danh sách
–
–
–
–
–

•

List

Các loại danh sách có thể lồng nhau

- ul (unordered lists)

- dl (definition lists)

- li

- dt (title)

• Ds có thứ tự

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

- li
• Thuộc tính

109

- dd (detail)

- ol (ordered lists)

- type
8/9/2017

• Ds các định nghĩa

• Ds khơng thứ tự

<dir> ... </dir>:           Danh sách thư mục
<dl> ... </dl>:             Danh sách được định nghĩa
<menu> </menu>: Danh sách thực đơn
<menu> ... </menu>: Danh sách thực đơn
<ol> ... </ol>:             Danh sách có thứ tự
<ul> ...  </ul>:            Danh sách khơng có thứ tự

DISC | CIRCLE | SQUARE
A | a | I | i | 1
Bộ môn CNTT - Khoa HTTT Kinh tế
và TMĐT

8/9/2017

Lớp thẻ tạo bảng

Table

• Bao gồm các thẻ

TAG/Attribute

– <table> ...</table>: Giới hạn bảng
– <tr> ... </tr>: 
Đặc tả các dịng của bảng
– <td> ...</td>: 
<td> </td>:
Đặc tả ô dữ liệu của bảng
Đặc tả ô dữ liệu của bảng
– <th> ...</th>: 
Đặc tả ô tiêu đề của bảng
– <caption > ...</caption>:  Đặc tả tên bảng

8/9/2017

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

BGCOLOR="#rrggbb““ WIDTH=n%
BGCOLOR="#rrggbb

BORDER - đặt khung nổi 3D xung
quanh bảng
bảng..

HEIGHT=n%>

111

8/9/2017

Bi ging Thit k v trin khai Website

BGCOLOR - đặt mu nền của bảng

<TR>

Bt đầu một dòng của bảng - table
row..
row

<TD>

Bt đầ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)

B mụn CNTT - Khoa HTTT Kinh tế
và TMĐT

112

Các thẻ trong form

• Sử dụng để chứa mọi đối tượng khác
• Khơng nhìn thấy khi trang web được hiển thị
• Quy định một số thuộc tính quan trọng như 
method action
method, action.
• Thẻ tạo form:
<form>…</form>
• Có thể có nhiều form trong một tài liệu
• Form khơng được lồng nhau
Bộ mơn CNTT - Khoa HTTT Kinh tế v TMT

Mụ t
TABLE - bt đầu bảng
bảng..

Form

8/9/2017

110

ã <input>
Trngnhpdliu

ã <select>...</select>
Danh sách chọn
h á h h

• <option>…</option>
– Mục chọn trong danh sách

• <textarea> ... </textarea>
– Trường nhập dữ liệu nhiều dịng
113

8/9/2017

Bộ mơn CNTT - Khoa HTTT Kinh tế và TMĐT

114

19


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

8/9/2017

Flash

Một số thẻ meta thông dụng