Bài giảng Thiết kế Web - Chương II: Các bước thiết kế web

1Thiết kế web Khoa CNTT 1
Chương II: Các bước thiết kế web

 Các tiêu chuẩn thiết kế web:
– Tương thích các web browser, các hệ ñiều hành, 
các loại màn hình,

 Tiến trình thiết kế web
Thiết kế web Khoa CNTT 2
2.1. Các tiêu chuẩn thiết kế

Thiết kế cho các loại Browser khác nhau
– Internet Explorer, Netscape Navigator, Mozilla 
Firefox, Opera, Lynx,

 Tương thích các loại hệ ñiều hành

 Theo sở thích của người sử dụng

 ðộ phân giải màn hình hoặc kích thước cửa 
sổ

 Tốc ñộ kết nối

 Màu sắc, ñộ sáng và phông chữ
Thiết kế web Khoa CNTT 3
Thiết kế màn hình - PC
Live Area in Internet Explorer on Windows
Thiết kế web Khoa CNTT 4
Thiết kế màn hình - Macintosh
Internet Explorer on Macintosh
Thiết kế web Khoa CNTT 5
Một thiết kế tốt
Nội dung là quan trọng, nhưng nội dung ñơn ñộc 
sẽ làm cho nó mất tác dụng trên trang web
Một thiết kế web ñược gọi là tốt khi:
- Dễ hiểu
- Tạo ấn tượng khi vào
- Dễ sử dụng
- Dễ nhìn và cảm nhận
- WYSIWYG (WYSIWYW)
Thiết kế web Khoa CNTT 6
2.2. Tiến trình thiết kế web
1. Phân tích ý tưởng, mục tiêu, hoạch ñịnh kế 
hoạch
2. Hoạch ñịnh cấu trúc website
3. Tạo các trang ñơn và ñưa nội dung vào
4. Thử nghiệm, kiểm tra và ñánh giá
5. Tải lên server và thử nghịêm lần cuối
6. Duy trì hoạt ñộng và quản lý website
2Thiết kế web Khoa CNTT 7
Bước 1: Phân tích ý tưởng, mục tiêu, 
hoạch ñịnh kế hoạch

 Xác ñịnh chính xác mục tiêu của trang này một cách 
ngắn gọn.
Lập website này ñể làm gì?cung cấp gì cho user?cho user 
làm gì trên website

 Xác ñịnh vấn ñề giải quyết, chủ ñề website
website thuộc loại gì?sẽ có những tính năng gì?

 Xác ñịnh người dùng
Ai là user chính?họ thuộc tầng lớp nào?dự ñoán về tốc kết 
nối của user, HðH, kích thước màn hình, tần xuất truy cập

 Liệt kê các nguồn tài nguyên
Trang thiết bị, công cụ phần mềm, trình ñộ chuyên môn 
của mình, cái gì mình làm, cái gì cần giúp?

Xây dựng bảng tiến ñộ thực hiện
Thiết kế web Khoa CNTT 8
Chủ ñề website – tin tức
Thiết kế web Khoa CNTT 9
Chủ ñề website – Diễn ñàn
Thiết kế web Khoa CNTT 10
Chủ ñề website – Giáo dục - ðào tạo
Thiết kế web Khoa CNTT 11
Chủ ñề website – Mua bán online
Thiết kế web Khoa CNTT 12
Bước 2: Hoạch ñịnh cấu trúc website

 Phân loại trang web thiết kế: 
Cá nhân
Doanh nghiệp
Thương mại

 Phần nội dung chính:
Liệt kê các mục nội dung chính trong website => 
website có những trang chính nào

 Chọn lựa cách thiết kế:
Dạng bảng
Dạng khung 
Dạng Templates, Masterpage
Phác thảo sơ ñồ cây của website
3Thiết kế web Khoa CNTT 13
Bước 3: Tạo các trang ñơn và ñưa nội 
dung vào
Ni dung luôn là phn quan trng nht

 Tạo,kiểm tra, hiệu chỉnh, ñánh giá, các trang riêng lẻ.
- Nếu thông tin không cần thay ñổi thì nên dùng web tĩnh => 
nhanh hơn, an toàn hơn
- Nếu thông tin thay ñổi thường xuyên => web ñộng
- Nếu có nhiều trang có bố cục giống nhau => dùng masterpage 
cho tất cả các trang ñó 

 Làm việc theo module
- Nên chia thành các module ñể dễ quản lý và sử dụng hơn. VD: 
Module menu, module kết nối CSDL, module hiển thị kết quả,
Thiết kế web Khoa CNTT 14
Các thành phần cơ bản của website

 Trang chủ (HomePage)
– Mọi website ñều ñược thiết lập quanh Homepage
– ðiều kiện cơ bản ñể website thành công
– Lưu ý khi sử dụng hệ thống ñồ họa

 Hệ thống Menu, Logo, ñịnh danh
– Hệ thống menu phải rõ ràng, ñầy ñủ sẽ giúp ñọc giả hình dung 
ñược cấu trúc, tổ chức website.
– Cần quan tâm ñến vị trí, các thể hiện (có hay không có hiệu 
ứng)
–Vị trí logo, ñịnh danh công ty phải cố ñịnh nhất quán

 Các trang thành viên
Thiết kế web Khoa CNTT 15
Thiết kế giao diện - frame
Thiết kế web Khoa CNTT 16
Thiết kế giao diện- Table within a table
Thiết kế web Khoa CNTT 17
Thiết kế giao diện – cấu trúc phức tạp
Thiết kế web Khoa CNTT 18
Kiểu chữ, màu sắc

 Phông chữ phụ thuộc vào các yếu tố:
– ðặc ñiểm thông tin
– ðộc giả
– Trình duyệt, ñộ phân giải
– Ngôn ngữ sử dụng

 Gam màu thống nhất trong toàn bộ Website

 Font tiếng Việt: Chỉ dùng Unicode
4Thiết kế web Khoa CNTT 19
Hiển thị thông tin tóm tắt – chi tiết

 Tóm tắt thông tin có một số lợi ñiểm:
– ðọc giả có ít thời gian ñể ñọc các tài liệu trên màn hình.
– Luôn có nhu cầu muốn tìm phần thông tin chủ ñịnh, không nên
chia cắt quá nhỏ, tóm lược quá ngắn 
 gây thất vọng
– Hình thức và cách tổ chức ñồng nhất 
 kinh nghiệm tìm kiếm,
khám phá.
– Thông tin ngắn gọn, súc tích thích hợp với màn hình máy tính
(bị giới hạn tầm nhìn).

 Thông tin chi tiết chỉ khi ñi vào một vấn ñề, nội dung cụ 
thể
Thiết kế web Khoa CNTT 20
Thông tin tóm tắt – chi tiết
Thiết kế web Khoa CNTT 21
Bước 4: Thử nghiệm, kiểm tra và ñánh giá

 Dùng IIS Tạo Virtual Directory ñể kiểm tra (hoặc 
Apache Sever)

 Kiểm tra hoạt ñộng của các liên kết (nội + ngoại) và 
các nguồn tài nguyên.

 Thử với nhiều trình duyệt khác nhau.

 ðánh giá chung kết quả
Thiết kế web Khoa CNTT 22
Tạo virtual Directory

 Khởi tạo IIS bằng cách: 
– Start-> Programs-> Administartive Tools-> Internet 
Information Service.
– Hoặc trong classic Start-> Settings->Control Panel-> 
Administartive Tools-> Internet Information Service.
Thiết kế web Khoa CNTT 23
Tạo virtual Directory (tt)

Bố trí một virtual directory KienTuan
– Nhấp phải (right click) vào Default Web Site, chọn 
New, Virtual Directory
Thiết kế web Khoa CNTT 24
Tạo virtual Directory (tt)
• Nhấp vào nút và gõ KienTuan ở hộp 
Alias
5Thiết kế web Khoa CNTT 25
Tạo virtual Directory (tt)

Nhấp vào nút và dùng ñể 
chọn sub folder D:\03CT\ KienTuan
Thiết kế web Khoa CNTT 26
Tạo virtual Directory (tt)
Thiết kế web Khoa CNTT 27
Tạo virtual Directory (tt)

 Dùng tên KienTuan như tên một trang web với ñiều 
kiện trong Documents của KienTuan Properties phải có 
chứa trang web ñó.
Thiết kế web Khoa CNTT 28
Bước 5: Tải lên server và thử nghịêm lần 
cuối

 Mua tên miền
– Tên miền = Tên website
– Tên ngắn
– Gợi nhớ
– Dễ ñọc, không gây nhầm lẫn
– Thể hiện ñược tên công ty hoặc nhãn hiệu chính của công ty

 Thuê chỗ hosting

 Tải lên và thử nghiệm
Thiết kế web Khoa CNTT 29
Mua tên miền
Thiết kế web Khoa CNTT 30
Thuê chỗ hosting

 Hệ ñiều hành

 Dung lượng

 Băng thông

 Ngôn ngữ hỗ trợ

 Hệ quản trị CSDL hỗ trợ

 Email POP3

 SSL

 
6Thiết kế web Khoa CNTT 31
Windows hosting


Thiết kế web Khoa CNTT 32
Linux hosting
Thiết kế web Khoa CNTT 33
Tên miền + Hosting Free

Các trang web trên mạng cho free
– www.somee.com
• 105MB
• 3GB monthly bandwidth
• FTP access
• ASP, ASP.NET
• MS Access Databases
• Dạng ñịa chỉ: 
– www.webng.com
• 350MB
• 10GB/m
• ASP
• MS Access
•  hoặc www.webng.com/user Thiết kế web Khoa CNTT 34
Tên miền + Hosting Free

Các trang web trên mạng cho free
– www.freewebpage.org
• 150MB
• FTP access
• 500MB/m
• Upload: 10Files (max: 8MB)
• Linux
• 
– www.freespaces.com
• 50MB
• 1,5GB/m
• Upload: 10files (max: 8MB) 
• No FTP access
•  hoặc www.freespaces.com/user
Thiết kế web Khoa CNTT 35
Tên miền + Hosting Free

Freespaces.com
Thiết kế web Khoa CNTT 36
ðưa website lên mạng Internet

Cách I: Dùng các tiên ích của nhà cung cấp web 
hosting

Vào www.freespaces.com ->Login:
7Thiết kế web Khoa CNTT 37
ðưa website lên mạng Internet
Thiết kế web Khoa CNTT 38
ðưa website lên mạng Internet

Copy các file từ máy user lên máy chủ
Thiết kế web Khoa CNTT 39
ðưa website lên mạng Internet

Cách 2: Dùng các chương trình FTP 

Dùng Core FTP Lite (WS FTP, FTP Cute,)
Thiết kế web Khoa CNTT 40
ðưa website lên mạng Internet

Core FTP Lite: 

Menu:

File->connect:
Thiết kế web Khoa CNTT 41
ðưa website lên mạng Internet
Thiết kế web Khoa CNTT 42
Thử nghịêm lần cuối

 Thử các trang bằng nhiều cách kết nối khác 
nhau.

 Thử các trang ở tình trạng mức ñộ truy cập cao 
(giờ cao ñiểm).

 Thử các trang với nhiều dạng người dùng khác 
nhau trên nhiều loại máy tính với màn hình khác 
nhau.

 Thử lại (Test, test and test!!!) 

 ðánh giá chung kết quả
8Thiết kế web Khoa CNTT 43
Bước 6: Duy trì hoạt ñộng và quản lý 
website

 Ai sẽ quản lý website

 Hàng ngày cần ñưa thông tin gì?
– Website cần ñược cập nhật thông tin ñể ñọc giả 
luôn cảm nhận ñược cái mới
– Ghi thời gian cập nhật, số người truy cập

Liên kết trang, quảng cáo
– Tạo liên kết ñến các trang thông tin (ñối tác, khách
hàng)  tăng uy tín
– Khi ñã ổn ñịnh  chuyển ñổi hình thức kinh doanh,
thu phí: Thuê ñặt logo, quảng cáo, Thu phí thành viên, 
.
Thiết kế web Khoa CNTT 44