Chương 2 các bước thiết kế web

Chươ
ng II: Các bước thiết kế web
Chương
Các tiêu chuẩn thiết kế web:

2.1. Các tiêu chuẩn thiết kế
Thiết kế cho các loại Browser khác nhau

– Tương thích các web browser, các hệ ñiều hành,
các loại màn hình,…

– Internet Explorer, Netscape Navigator, Mozilla
Firefox, Opera, Lynx,…

Tiến trình thiết kế web

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

1

Thiết kế web

Thiết kế màn hình - PC

Khoa CNTT

Internet Explorer on Macintosh

3

Thiết kế web

Khoa CNTT

Một thiết kế tốt

2.2. Tiến trình thiết kế web

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:

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

- 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

2

Thiết kế màn hình - Macintosh

Live Area in Internet Explorer on Windows

Thiết kế web

Khoa CNTT

5

Thiết kế web

Khoa CNTT

4

6

1

Bước 1: Phân tích ý tưởng, mục tiêu,
hoạch ñịnh kế hoạch

Chủ ñề website – tin tức

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

7

Chủ ñề website – Diễn ñàn

Thiết kế web

Khoa CNTT

Thiết kế web

Khoa CNTT

8

Chủ ñề website – Giáo dục - ðào tạo

9

Chủ ñề website – Mua bán online

Thiết kế web

Khoa CNTT

10

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
Thiết kế web

Khoa CNTT

11

Thiết kế web

Khoa CNTT

12

2


Bước 3: Tạo các trang ñơn và ñưa nội
dung vào

Các thành phần cơ bản của website
Trang chủ (HomePage)

N i dung luôn là ph n quan tr ng nh t

– Mọi website ñều ñược thiết lập quanh Homepage

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

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

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

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

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ả,…

–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

13

Thiết kế giao diện - frame

Thiết kế web

Khoa CNTT

Thiết kế web

Khoa CNTT

14

Thiết kế giao diệndiện- Table within a table

15

Thiết kế web

Khoa CNTT

Thiết kế giao diện – cấu trúc phức tạp

16

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

Thiết kế web

Khoa CNTT

17

Thiết kế web

Khoa CNTT

18

3


Hiển thị thông tin tóm tắt – chi tiết

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
– Hình thức và cách tổ chức ñồng nhất

gây thất vọng
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

19

Thiết kế web

Bước 4: Thử nghiệm, kiểm tra và ñánh giá

Khoa CNTT

20

Tạo virtual Directory
Khởi tạo IIS bằng cách:

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

Apache Sever)

– Start-> Programs-> Administartive Tools-> Internet
Information Service.
– Hoặc trong classic Start-> Settings->Control Panel->
Administartive Tools-> Internet Information Service.

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

21

Thiết kế web

Tạo virtual Directory (tt)

• Nhấp vào nút <Next> và gõ KienTuan ở hộp
Alias

– Nhấp phải (right click) vào Default Web Site, chọn
New, Virtual Directory

Khoa CNTT

22

Tạo virtual Directory (tt)

Bố trí một virtual directory KienTuan

Thiết kế web

Khoa CNTT

23

Thiết kế web

Khoa CNTT

24

4


Tạo virtual Directory (tt)

Tạo virtual Directory (tt)

Nhấp vào nút <Next> và dùng <Browse...> ñể
chọn sub folder D:\03CT\ KienTuan

Thiết kế web

Khoa CNTT

25

Thiết kế web

Khoa CNTT

26

Bước 5: Tải lên server và thử nghịêm lần
cuối

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 ñó.

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

27

Thiết kế web

Mua tên miền

Khoa CNTT

28

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
…

Thiết kế web

Khoa CNTT

29

Thiết kế web

Khoa CNTT

30

5


Windows hosting

Linux hosting



Thiết kế web

Khoa CNTT

31

Thiết kế web

Các trang web trên mạng cho free

Các trang web trên mạng cho free

– www.somee.com

– www.freewebpage.org

105MB

3GB monthly bandwidth
FTP access
ASP, ASP.NET
MS Access Databases
Dạng ñịa chỉ:

•
•
•
•
•
•

– www.webng.com
•
•
•
•
•
Thiết kế web

150MB
FTP access
500MB/m
Upload: 10Files (max: 8MB)
Linux
/>
– www.freespaces.com

350MB

10GB/m
ASP
MS Access
Khoa
hoặc
www.webng.com/user
CNTT

33

Tên miền + Hosting Free

•
•
•
•
•
Thiết kế web

50MB
1,5GB/m
Upload: 10files (max: 8MB)
No FTP access
/>hoặc www.freespaces.com/user34
Khoa CNTT

ðưa
ðưa website lên mạng Internet

Freespaces.com

Thiết kế web

32

Tên miền + Hosting Free

Tên miền + Hosting Free

•
•
•
•
•
•

Khoa CNTT

Cách I: Dùng các tiên ích của nhà cung cấp web
hosting
Vào www.freespaces.com ->Login:

Khoa CNTT

35

Thiết kế web

Khoa CNTT

36

6


ðưa
ðưa website lên mạng Internet

ðưa
ðư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

37

ðưa
ðưa website lên mạng Internet

Khoa CNTT

Khoa CNTT

38

ðưa
ðư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

Thiết kế web

Core FTP Lite:
Menu:
File->connect:

39

Thiết kế web

Khoa CNTT

40

Thử nghịêm lần cuối

ðưa
ðưa website lên mạng Internet

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ả
Thiết kế web

Khoa CNTT

41

Thiết kế web

Khoa CNTT

42

7


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

43

Thiết kế web

Khoa CNTT

44

8