Bài giảng học phần Thiết kế và triển khai Website
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
Bộ môn Công nghệ thông tin
•
•
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
Đánh giá kết quả
Bài giảng học phần:
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
wide web, giao thức HTTP, giao thức FTP, ngôn ngữ
đánh dấu HTML,...
• 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 để
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ế.
• 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
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:
Chương 1. Tổng quan về thiết kế và triển khai
•
[1] Harvey & Paul, Internet & World Wide Web: How to Program
(4th Edition), Deitel & Associates (Paperback), 2010
website
•
[2] Gerry McGovern, The Website Manager’s Handbook, ISBN:
978‐1‐4116‐8529‐1,
Shane Diffily, 2014
[3] Nguyễn Trường Sinh, Thiết kế Web bằng hình minh hoạ, 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
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
•
•
•
•
•
[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
Bộ môn CNTT - Khoa HTTT Kinh tế và
TMĐT
8/9/2017
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
1.3 Nguyên tắc và quy trình triển khai Website
Tổng quan về thiết kế và
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
10
12
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
1.1.2. World wide web ‐ Website
1.1.3. Giao thức truyền nhận Client/Server
• 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 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
Chồng giao thức TCP/IP
4 lớp của mô hình 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)
8/9/2017
Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT
11
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
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 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
8/9/2017
Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT
13
8/9/2017
Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT
14
16
18
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
trong khi ptithcm.edu.vn lại là tên miền
.
com
edu
gov
vn
fr
uk
vnn com
Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT
edu
gov
8/9/2017
Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT
15
8/9/2017
DSN
•
ví dụ:
lab.ptithcm.edu.vn sẽ theo tiến trình như sau:
vn edu purdue cs
1.1.2. World wide web -
Website
8/9/2017
Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT
17
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
3
Bộ môn CNTT - Khoa HTTT Kinh tế và
TMĐT
8/9/2017
WWW
1.1.3. Giao thức truyền nhận
trong Client/Server
•
•
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.
Các trình duyệt khác nhau sẽ có những 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, …
8/9/2017
Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT
19
21
23
8/9/2017
Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT
20
Mô hình Client/Server
Mô hình Client/Server
•
•
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.
• Trong mô hình này, chương trình ứng
dụng được chia thành 2 thành phần:
– Quá trình chuyên cung cấp một số phục vụ
nào đó, chẳng hạn: phục vụ tập tin, phục vụ
Các quá trình này được gọi là các trình phục
vụ hay Server.
•
•
Khi nhận được thông điệp yêu cầu, server tiến hành
c 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).
– Một số quá trình khác có yêu cầu sử dụng
các dịch vụ do các server cung cấp được gọi
là các quá trình khách hàng hay Client.
•
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.
8/9/2017
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
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 bằng 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).
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
24
Bài giảng Thiết kế và triển khai Website
4
Bộ môn CNTT - Khoa HTTT Kinh tế và
TMĐT
8/9/2017
Chế độ không nghẽn
1.2. Nguyên tắc và quy trình thiết kế Website
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
• 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ó quá 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
25
8/9/2017
Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT
26
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
• 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.
1. Khái quát
2. Các bước tổ chức thông tin
3. Các kiểu cấu trúc thiết kế
• 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
Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT
28
1. Khái quát
2. Các bước tổ chức thông tin
• 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ô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 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
29
8/9/2017
Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT
30
Bài giảng Thiết kế và triển khai Website
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
Sơ đồ hệ thống phân cấp của một website
8/9/2017
Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT
31
33
35
8/9/2017
Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT
32
34
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
37
39
41
38
40
a. Cấu trúc nối tiếp (Sequence)
3. Các kiểu cấu trúc thiết kế
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)
d. Cấu trúc mạng nhện (Web)
Thể hiển thị thông tin một cách tuần 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
8/9/2017
Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT
42
Bài giảng Thiết kế và triển khai Website
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 trúc phân cấp đặc
biệt thích hợp cho các
website vì các website
luôn được thực hiện rẽ
nhánh từ một trang chủ
duy nhất.
– 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 hoá, …
– 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 quát 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
8/9/2017
Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT
43
8/9/2017
Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT
44
46
48
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.
8/9/2017
Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT
45
8/9/2017
Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT
Kết luận
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 phải trình bày 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
47
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
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 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ệ
8/9/2017
Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT
49
51
53
8/9/2017
Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT
50
1. Các nguyên tắc nghệ thuật
2. Nguyên 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
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 quát chung
• Thiết kế giao diện
• Thiết kế nội dung
8/9/2017
Bộ môn CNTT ‐ Khoa HTTT Kinh tế và TMĐT
54
Bài giảng Thiết kế và triển khai Website
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,…
•
•
•
•
Đào tạo
Dạy học
Giáo dục
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
TK giao diện hướng người sử dụng
Thiết kế giao diện
• 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ể hoàn toàn tách rời thiết kế đồ hoạ với thiết
• 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ụng
• Cần các kiến thức về tâm lý học khách hàng
• Trả lời các câu hỏi:
– Ai?
– Cái gì?
– Khi nào?
– Nơi nào?
8/9/2017
Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT
57/55
8/9/2017
Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT
58/55
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
• 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ơ bản của một số website TMĐT
– Trang chủ (home page)
•
•
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
hoàn toàn mất hẳn nội dung của bức ảnh, phím đồ hoạ đi kèm
trang web
•
– 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
59/55
8/9/2017
Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT
60/55
Bài giảng Thiết kế và triển khai Website
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
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
• 1.3.2. Quy trình chung triển khai Website
TMĐT:
– Giới thiệu về Cty
– Quảng cáo sản 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
– …
8/9/2017
Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT
61/55
8/9/2017
Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT
62/55
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
• Thuê không gian lưu trữ web đủ lớn và nên
mua ở các tổ chức đáng tin cậy
• Đưa website lên Internet
• Quảng bá website
• Cập nhật và bảo trì website
• Nên có quá trình thử nghiệm 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
8/9/2017
Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT
63
8/9/2017
Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT
64
Chương 2. Thiết kế và xử lý đồ họa
2.1.1. Khái niệm chung
trên website
• Đồ 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 hoàn toàn việc tương tác giữ người và
máy.
• 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
• 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í….
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
Bài giảng Thiết kế và triển khai Website
11
Bộ môn CNTT - Khoa HTTT Kinh tế và
TMĐT
8/9/2017
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
• Kiến tạo đồ họa:
• Phân loại theo các lĩnh vực của đồ hoạ máy
– 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ử….
– Đồ 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 toá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 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.
tính
– Kiến tạo đồ họa
– Xử lý đồ 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
8/9/2017
Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT
68
Phân loại theo các lĩnh vực của đồ hoạ
Phân loại theo hệ toạ độ:tọa độ 2
chiều(2D) và 3 chiều(3D)
máy tính
• Xử lý đồ họa:
• 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
, .
• 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 toán và phức tạp hơn nhiều so
với kỹ thuật đồ hoạ hai chiều.
– 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
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 toá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
69
8/9/2017
Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT
70
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
Design)
• Giao diện người dùng và máy tính
• Biểu diễn thông tin
• Lĩnh vực giải trí, nghệ thuật
• Giáo dục và đào tạo
• 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
.
• 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.
• Bản đồ học
8/9/2017
Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT
71
8/9/2017
Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT
72
Bài giảng Thiết kế và triển khai Website
12
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
73
8/9/2017
8/9/2017
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
Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT
74
76
78
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
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
77
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.2. Xử lý ảnh trong website
2.2.1. Xử lý đối tượng đồ họa
• Ả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
8/9/2017
Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT
79
8/9/2017
Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT
80
82
84
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:
– Nó có liên quan không?
– Thông tin: tọa độ (x, y)
– Thuộc tính: mầu sắc
Đoạn thẳng, đường gấp khúc
– Thông tin: điểm đầu (x1, y1) điểm cuối (x2, y2)
–
– Nó có hấp dẫn không?
– Đường gấp khúc là tập các đoạn thẳng nối với nhau một cách
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ự
– Nguồn ảnh hợp pháp
– Luôn 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
– 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
8/9/2017
Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT
2.3. Công cụ photoshop cho xử lý đồ họa
2.3.1. Giới thiệu về photoshop
•
•
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
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.
• 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.
8/9/2017
Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT
83
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
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 ảnh
4. Độ phân giải màn hình
5. Các chế độ hình ảnh (image modes)
8/9/2017
8/9/2017
8/9/2017
Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT
85
87
89
8/9/2017
8/9/2017
8/9/2017
Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT
86
88
90
Hình bên trái có độ phân giải 72 ppi, hình bên phải 300 ppi
Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT
Hình ảnh bitmap
Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT
Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT
Bài giảng Thiết kế và triển khai Website
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
Hình ảnh CMYK có 4 kênh màu C, M, Y, K
8/9/2017
Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT
91
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
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
93
8/9/2017
94
2. CHỌN CÔNG CỤ (Toolbox)
THAO TÁC VỚI LAYER
• Hiển thị/tắt thanh công cụ (toolbox):
– Vào windows tools
• 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 công cụ:
– Nhấn phím tắt của công cụ hoặc
– 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.
• 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
95
8/9/2017
Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT
96
Bài giảng Thiết kế và triển khai Website
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 AdjustmentsCurves
– 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,
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:
– Image AdjustmentsReplace 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
Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT
98
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:
– JPEG: định dạng này có thể thể hiện với hàng triệu
mầu
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
–Colored Pencil : Làm cho ảnh hay phần
được chọn giống như phần được vẽ
bằng chì phấn
–…
• Nhóm Filter Blur: tạo độ nhòe
• Nhóm FilterPixelate:Phá vở hình ảnh thành
nhiều mảnh
8/9/2017
Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT
99
8/9/2017
Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT
100
Chương 3. Một số ngôn ngữ xây dưng
3.1. HTML (Hyper Text Makup
Language)
Website
• 3.1. HTML (Hyper Text Makup Language)
• 3.2. PHP, Javascript
• 3.3. Môi trường ASP.NET
• 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
• 3.4. Một số công cụ soạn thảo mã nguồn
8/9/2017
Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT
101
8/9/2017
Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT
102
Bài giảng Thiết kế và triển khai Website
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
• Cấu trúc chung của một siêu văn bản
•
•
•
•
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.
<HTML>
<HEAD>
Do Tim Berner Lee phát minh và được W3C (World Wide
Web Consortium) đưa thành chuẩn năm 1994
<TITLE> Tiêu đề trang </TITLE>
... Các khai báo khác ở đây
</HEAD>
<BODY>
... Nội dung cần thể hiện ở đây
</BODY>
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 hoà
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
</HTML>
8/9/2017
Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT
103
105
107
8/9/2017
Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT
104
106
108
3.1.2. Các thẻ HTML
Font & Color
• Các lớp thẻ
• Thẻ
- font
<html><body>
– Cấu trúc (structure)
– Định dạng (formatting)
– Ảnh (image)
– Danh sách (list)
– Bảng (table)
<font face=Arial>Arial</font><br>
<font size=1>Size 1</font><br>
<font size=7>Size 7</font><br>
<font color=red>Red</font><br>
<font color=#0000FF>Blue</font><br>
<font style=‘font-size: 72pt’>72pt</font>
</body></html>
• Thuộc tính
- face
- size
– Form
– Khung hiển thị (frame)
- color
- style
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
Lớp thẻ âm thanh, hiện ảnh
Link & URL & Bookmark
• Chèn hình ảnh vào trang web
• Thẻ
- a
– thẻ <img> không có thẻ kết thúc, gồm các thuộc
tính:
• Src: Đường dẫn đến file ảnh
+ File System
+ Bookmark
• Thuộc tí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
- href
- title
- name
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
Bài giảng Thiết kế và triển khai Website
18
Bộ môn CNTT - Khoa HTTT Kinh tế và
TMĐT
8/9/2017
Lớp thẻ tạo danh sách
List
•
Gồm các loại danh sách
• Ds không thứ tự
- ul (unordered lists)
- li
• Ds các định nghĩa
- dl (definition lists)
- dt (title)
–
<dir> ... </dir>:
Danh sách thư mục
–
–
–
–
<dl> ... </dl>:
<menu> ... </menu>: Danh sách thực đơn
<ol> ... </ol>:
<ul> ... </ul>:
Danh sách được định nghĩa
• Ds có thứ tự
- ol (ordered lists)
- li
- dd (detail)
Danh sách có thứ tự
Danh sách không có thứ tự
•
Các loại danh sách có thể lồng nhau
• Thuộc tính
DISC | CIRCLE | SQUARE
A | a | I | i | 1
- type
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
109
111
113
8/9/2017
110
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.
<TABLE BORDER=n
BORDER
- ®Æt khung næi 3D xung
– <tr> ... </tr>:
– <td> ...</td>:
– <th> ...</th>:
Đặc tả các dòng của bảng
Đặc tả ô dữ liệu của bảng
Đặc tả ô tiêu đề của bảng
BGCOLOR="#rrggbb“ WIDTH=n%
quanh b¶ng.
HEIGHT=n%>
BGCOLOR - ®Æt mμu nÒn cña b¶ng
Bắt ®Çu mét dßng cña b¶ng - table
<TR>
<TD>
<TH>
row.
– <caption > ...</caption>: Đặc tả tên bảng
Bắt ®Çu mét « cña b¶ng(B3/4t ®Çu
cét trong mét hµng).
ThÎ <TH> gièng nh- <TD> nh-ng cho
ch÷ in ®Ëm vµ c¨n chÝnh gi÷a
(heading).
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
112
Form
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ư
, .
• 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
• <input>
– Trường nhập dữ liệu
• <select>...</select>
– Danh sách chọn
• <option>…</option>
– Mục chọn trong danh sách
• <textarea> ... </textarea>
– Trường nhập dữ liệu nhiều dòng
8/9/2017
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
114
Bài giảng Thiết kế và triển khai Website
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
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-
444553540000"
abs/flash/swflash.cab#version=6,0,29,0" width=“số"
height=“số">
• Thẻ <meta>:
– Đặt ở giữa <head>…</head>
– Thường dùng quy định thuộc tính cho trang web
– Có tác dụng lớn với Search Engine
<param name="movie" value="ten_file.swf">
<param name="quality" value="high">
– 2 cách viết thẻ <meta>:
<embed src="ten_file.swf" quality="high"
<META NAME="name" CONTENT="content">
<META HTTP-EQUIV="name" CONTENT="content">
"
type="application/x-shockwave-flash" width="số
height="số "></embed>
</object>
"
8/9/2017
Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT
115
8/9/2017
Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT
116
118
120
Lớp thẻ tạo khung
<frameset> …</frameset>
• Chia vùng hiển thị của trang web thành nhiều
vùng con theo chiều dọc, ngang
• Mỗi vùng con là một frame có đặc điểm:
Có thể truy cập tới một URL độc lập với frame khác.
– Mỗi frame có thể được đặt tên.
• Frameset: dùng để phân vùng hiển thị trên trình
duyệt
– Cols = n | * | n%
– Rows = n | * | n%
– Border, bordercolor
• 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
không cho phép người dùng thay đổi kích thước này
– Src: URL chứa nội dung của vùng
– Name, bordercolor, noresize, marginwidth,
marginheight
• Tài liệu có cấu trúc frame, không có phần tử body
– Scrolling = ‘yes|no|auto’
8/9/2017
Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT
117
8/9/2017
Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT
3.2. PHP, Javascript
Nội dung
• 3.2.1. PHP (Hypertext Preprocessor)
• 3.2.2. Javascript trong xây dựng website
• Lập trình Web tĩnh và Web động
• Cài đặt Apache
• MySQL
• Ngôn ngữ PHP
8/9/2017
Bộ môn CNTT - Khoa HTTT Kinh tế và TMĐT
119
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
20
Tải về để xem bản đầy đủ
43 trang
29740
Free
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng học phần Thiết kế và triển khai Website", để tải tài liệu gốc về máy hãy click vào nút Download ở trên
File đính kèm:
- bai_giang_hoc_phan_thiet_ke_va_trien_khai_website.pdf
