Giáo trình Thiết kế web (Nghề Lập trình máy tính): Phần 1 - Tổng cục dạy nghề

BỘ LAO ĐỘNG - THƯƠNG BINH VÀ XÃ HỘI
TỔNG CỤC DẠY NGHỀ
Dự án giáo dục kỹ thuật và dạy nghề (VTEP)

trình độ đào tạo

cc

GIO TRèNH

Mụ un: THIT K WEB
Mó s:ITPGR13
NGH: LẬP TRÌNH MÁY TÍNH
Trình độ (lành nghề)

Đ

Đà lạt- 2007


Giáo trình thiết kế web

Tuyên bố bản quyền :
Tài liệu này thuộc loại sách giáo trình
Cho nên các nguồn thơng tin có thể được
phép dùng ngun bản hoặc trích dùng cho
các mục đích về đào tạo và tham khảo .
Mọi mục đích khác có ý đồ lệch lạc hoặc
sử dụng với mục đích kinh doanh thiếu lành
mạnh sẽ bị nghiêm cấm.
Tổng Cục Dạy nghề sẽ làm mọi cách để bảo

vệ bản quyền của mình.
Tổng Cục Dạy Nghề cám ơn và hoan
nghênh các thơng tin giúp cho việc tu sửa
và hồn thiện tốt hơn tàI liệu này.

Địa chỉ liên hệ:
Dự án giáo dục kỹ thuật và nghề nghiệp
Tiểu Ban Phát triển Chương trình Học liệu
………………………………………………
................................................................

2


Giáo trình thiết kế web

LỜI TỰA
Đây là tài liệu được xây dựng theo chương trình của dự án giáo dục kỹ thuật và
dạy nghề, để có đươc giáo trình này dự án đã tiến hành theo hai giai đoạn.
Giai đoạn 1 : Xây dựng chương trình theo phương pháp DACUM, kết
quả của gian đoạn này là bộ khung chương trình gồm 230 trang cấp độ 2 và
170 trang cấp độ 3.
Giai đoạn 2 : 29 giáo trình và 29 tài liệu hướng dẫn giáo viên cho nghề
lập trình máy tính 2 cấp độ.
Để có được khung chương trình chúng tơi đã mời các giáo viên, các
chuyên gia đang làm việc trong lĩnh vực công nghệ thông tin cùng xây dựng
chương trình.
Trong giai đoạn viết giáo trình chúng tơi cũng đã có những sự điều chỉnh
để giáo trình có tính thiết thực và phù hợp hơn với sự phát triển của lĩnh vực
công nghệ thông tin.

Ngày nay Internet đã phổ biến rộng khắp trên tồn thế giới ,thơng tin
chính mà chúng ta truy nhập trên dịch vụ World Wide Web là các trang Web.
Trang Web là tài liệu cơ bản trên dịch vụ World Wide Web.Vì vậy nhu cầu thiết
kế web ngày càng phát triển rộng rãi trên toàn thế giới.Nhiều trường học đã
nhận ra được điều này và đã tạo ra những khố học thiết kế web như một phần
chính yếu của hệ thống thơng tin tin học hố và các chương trình khoa học máy
tính.Giáo trình này dự kiến sẽ cung cấp một số kiến thức nền tảng về thiết kế
website.Mục tiêu của giáo trình là cung cấp cho sinh viên các kỹ năng thiết kế
web cơ bản,chu trình thiết kế và tạo ra một website theo đúng trình tự và
phương pháp.
Trong quá trình biên soạn, mặc dù đã cố gắng tham khảo nhiều tài liệu
và giáo trình khác nhưng tác giả khơng khỏi tránh được những thiếu sót và hạn
chế. Tác giả chân thành mong đợi những nhận xét, đánh giá và góp ý để cuốn
giáo trình ngày một hoàn thiện hơn.
Tài liệu này được thiết kế theo từng mô đun/ môn học thuộc hệ thống mô
đun/môn học của một chương trình, để đào tạo hồn chỉnh nghề Lập trình máy
tính ở cấp trình độ bậc cao và được dùng làm Giáo trình cho học viên trong
các khố đào tạo, cũng có thể được sử dụng cho đào tạo ngắn hạn hoặc cho
các công nhân kỹ thuật, các nhà quản lý và người sử dụng nhân lực tham
khảo.
Đây là tài liệu thử nghiệm sẽ được hoàn chỉnh để trở thành giáo trình
chính thức trong hệ thống dạy nghề.
Đà lạt tháng 10 năm 2007

3


Giáo trình thiết kế web

MỤC LỤC

ĐỀ MỤC
TRANG
1.- -Lời tựa---------------------------------------------------------------------------------------3
2. Mục lục---------------------------------------------------------------------------------------4
3. Giới thiệu về mơ đun 5
4. Nội dung chính của mô đun -----------------------------------------------------------5
5. Liệt kê các nguồn lực cần thiết cho mô đun ---------------------------------------6
6. Kế hoạch và cách thức đánh giá kết quả học tập mô đun----------------------8
----------------------------------------------------------------------------------------------------------------------------------------------------------------5
7. Bài 1 – Phác Thảo Web Sites----------------------------------------------------------9
8. Bài 2 - Thiết Kế Tổng Thể Một Web Sites-----------------------------------------12
9. Bài 3 – Xây Dựng Prototype----------------------------------------------------------21
10. Bài 4 - Thiết Kế Web Với Các Đối Tượng Đơn Giản---------------------------23
11. Bài 5 - Thiết Kế Web Với Các Đối Tượng Phức Tạp---------------------------28
12. Bài 6 - Giới Thiệu Các Công Cụ Thiết Kế Và Tổ Chức File Của Site Map
47
13. Bài 7 - Kiểm Thử Và Chuyển Tải Trang Web Lên Server---------------------50
14. Bài 8 -Thiết Kế Web Theo Chủ Đề -------------------------------------------------60
--------------------------------------------------------------------------------------------------15. Đáp án các câu hỏi và bài kiểm tra------------------------------------------------139
16. Các thuật ngữ chuyên môn ---------------------------------------------------------154
17. Tài liệu tham khảo --------------------------------------------------------------------155

4


Giáo trình thiết kế web

GIỚI THIỆU VỀ MƠ ĐUN/MƠN HỌC
Vị trí, ý nghĩa, vai trị mơ đun/mơn học :

Ngày nay internet đã phổ biến rộng khắp trên toàn thế giới,là một kênh
thơng tin,giải trí,mua bán,học tập được đa số dân chúng trên thế giới sử
dụng.Vì vậy mơn thiết kế web là một môn không thể thiếu trong ngành tin học.
Mục tiêu của mô đun:
Sau khi học xong môn học này học viên có khả năng:
Xác định được các yếu tố cấu thành 1 Web site, xác định đúng mục đích yêu
cầu của Web được một khung site, đặt Web Site vào 1 trong 4 đời công nghệ
của Web site. Biết thiết kế Web site bắt mắt , dễ dàng sử dụng thoả mãn các
yêu cầu thực tế.
Mục tiêu thực hiện của mơ đun:
Học xong mơn học này học viên có khả năng:
-

Thiết kế được các trang web và trình bày tổng hợp trên trang web chính bao
gồm thơng tin, hình ảnh, âm thanh liên kết với các kiểu định dạng khác
nhau.

-

Sử dụng được các kỹ thuật màu sắc

-

Xây dựng được hệ thống tổ chức thông tin từ các yêu cầu thực tế. Xây
dựng được hệ thống Site Map phục vụ việc xây dựng trang Web
Lập được bộ hồ sơ thiết kế về thi cơng trang Web
Nội dung chính của mơ đun (Có thể là danh sách các bài học) :
Chủ đề chính :
-

Phác thảo kế hoạch xây dựng Web Site

-

Thiết kế hệ thống thông tin Web Site

-

Xây dựng Prototype và đánh giá hệ thống Web Site

-

Tích hợp các phần tử căn bản của Web Site

-

Tích hợp các phần tử Multimedia cùa Web Site

-

Chọn công cụ và tổ chức Files

-

Kiểm thử và chuyển tải Web Site lên Server.

-

Sử dụng các công cụ thiết kế Web

-

Tích hợp các phần tử có trong Web Site (hình ảnh, âm thanh, chữ từ các
form, các database...) có hiệu quả tạo được tính logic và tính hấp dẫn của
Web Site.

5


Giáo trình thiết kế web

Sơ đồ quan hệ theo trình tự học nghề

Hệ thống
máy tính

Giao diện
người máy

Lập trình
nâng cao

Lập trình
căn bản

Lập trình hướng
đối tượng

Mạng căn bản
Cấu trúc dữ liệu

và thuật giải

Kỹ năng tin học
văn phịng

Cơng nghệ
phần mềm

Internet & WWW

Thiết kế Web

Cơng nghệ Đa
phương tiện

Quản lý dự án
phần mềm

Lập trình
Visual Basic
Mơi trường PT
Phần mềm
Phần cứng
máy tính

Thiết kế hướng
đối tượng

Cơ sở dữ liệu

Kỹ năng

Anh văn
cho tin học

Phân tích thiết
kế hệ thống

Ứng dụng CNTT
trong doanh nghiệp

Kỹ năng
Giao tiếp

Cơ sở tốn học

Lập trình
Web

6

Hệ cơ sở dữ
liệu

Hướng dẫn đồ
án tốt nghiệp

An toàn
lao động

Thi
tốt nghiệp


Giáo trình thiết kế web

Ghi chú:
Thiết kế web là mơ đun cơ bản và bắt buộc. Mọi học viên phải học và đạt kết quả chấp nhận được đối với các bài kiểm tra đánh giá
và thi kết thúc như đã đặt ra trong chương trình đào tạo.
Những học viên qua kiểm tra và thi mà không đạt phải thu xếp cho học lại những phần chưa đạt ngay và phải đạt điểm chuẩn mới
được phép học tiếp các mô đun/ môn học tiếp theo.
Học viên, khi chuyển trường, chuyển ngành.nếu đã học ở một cơ sở đào tạo khác rồi thì phải xuất trình giấy chứng nhận; Trong
một số trường hợp có thể vẫn phải qua sát hạch lại.

7


Giáo trình thiết kế web

CÁC HÌNH THỨC HỌC TẬP CHÍNH TRONG MÔ ĐUN/MÔN HỌC
1. Học trên lớp về :
-

Phác thảo kế hoạch xây dựng Web Site

-

Thiết kế hệ thống thông tin Web Site

-

Xây dựng Prototype và đánh giá hệ thống Web Site

- Chọn công cụ và tổ chức Files
2 - Học tại phịng học thực hành trường về:
-

Tích hợp các phần tử căn bản của Web Site

-

Tích hợp các phần tử Multimedia cùa Web Site

-

Sử dụng các công cụ thiết kế Web

-

Kiểm thử và chuyển tải Web Site lên Server.
YÊU CẦU VỀ ĐÁNH GIÁ HỒN THÀNH MƠ ĐUN/MƠN HỌC

Kỹ năng thực hành:
-

Học viên xây dựng được bảng thiết kế tổng thể Web Sites từ yêu cầu thực tế.

-

Xây dựng được Site map mô tả được cấu trúc tổng thể của Web sites làm cơ sở cho việc

xây dựng WEB

-

Tích hợp các phần tử có trong Web Site (hình ảnh, âm thanh, chữ từ các form, các
database...) có hiệu quả tạo được tính logic và tính hấp dẫn của Web Site.

Thái độ học viên:
-

Cẩn thận lắng nghe ý kiến và thảo luận trong nhóm thiết kế
Học viên cần tuân thủ các bài tập thực hành theo thứ tự các chương, từ dễ đến khó.

Đánh giá học viên thơng qua 2 bài kiểm tra:
Phần kiến thức chung : mỗi học viên thiết kế ý tưởng và mơ hình hệ thống Web sites ra giấy,
qua đó thuyết minh được mục đích, ý nghĩa của Web sites cũng như những tính năng của nó.
Phần thực hành
Mỗi học viên được tham gia vào một nhóm Thiết kế Websites với một chủ đề. Nhóm sẽ có 2
sản phẩm :


Hồ sơ thiết kế Web



Thể hiện Web sites bằng một phần mềm xây dựng Web.
Điểm TB=(Lý thuyết+thực hành*2)
3

8

Giáo trình thiết kế web

BÀI 1
PHÁC THẢO WEB SITES
Mã bài : ITPRG13.1
Giới thiệu 
Khi xây dựng bất kỳ website nào, bước đầu tiên là xác định rõ mục đích của mình.Khơng
có mục đích và nhiệm vụ rõ ràng, các dự định sẽ khó có thể đạt được kết quả như mong
muốn.Lập kế hoạch cẩn thận kết hợp với việc đề ra mục tiêu rõ ràng là chìa khóa để xây dựng
web site thành công.
Mục tiêu thực hiện
-Nắm được cấu trúc tổng thể của 1 Web Site
-Xác định mục đích của Web Site
-Xác định các đối tượng trong trang Web
Nội dung chính
1.1 Một số kiến thức căn bản về Web và World Wide Web (WWW)
World Wide Web có nhiều tên hơn các tài nguyên khác của Internet, còn được gọi là
WWW hay W3. Để hiểu được Web, bạn cần phải bắt đầu tìm hiểu về tư tưởng Hypertext.
Hypertext là dữ liệu gồm những phần liên kết với những dữ liệu khác. Một ví dụ đơn giản
của Hypertext là bộ bách khoa toàn thư. Bạn đang đọc một phần tử trên “những cây”. ở cuối
của bài báo bạn thấy một phần tham khảo nói rằng “để biết thêm các thông tin liên quan, hãy
xem các thực vật (plants)”. Dòng cuối cùng này là một liên kết, từ các bài báo “cây” (trees) đến
các bài báo “thực vật” (plant).
Trong ngôn ngữ của Web, một tài liệu Hypertext gồm phần dữ liệu và phần có thể liên kết
với những tài liệu khác. Chương trình mà bạn dùng để đọc một tài liệu Hypertext được gọi là
Browser. Khi bạn theo liên kết đến một phần khác thì chúng tơi nói rằng bạn đang định vị
(Navigate) Web.
Điều gì làm cho Web có khả năng liên kết với những loại tài nguyên của Internet: một file

văn bản, một phiên kết nối của Telnet, một Gopher, một nhóm tin của Usenet và v.v…
Chức năng của Browser của bạn giống như một cửa sổ vào Internet bằng cách vào
những phần liên kết mà bạn muốn và việc truy cập vào mỗi tài liệu dùng một phương pháp
thích hợp.
Như vậy đặc điểm của Web là rất chính xác. Web là một sự cố gắng tổ chức tất cả các
thông tin trên Internet (thêm vào một số thông tin địa phương mà bạn muốn thêm chúng vào)
bằng việc cài đặt các tài liệu ở dạng Hypertext. Mặc dù giấc mơ này xa rời thực tế, nhưng Web
cho phép bạn truy cập vào các loại tài nguyên của Internet, chỉ bằng cách dùng một Browser
để đọc tài liệu thích hợp.
Tại sao chúng ta phải dùng Web?
Web đã được phát triển ở Thụy Sĩ, tại trung tâm nghiên cứu CERN. Tư tưởng này được
đưa ra nhằm giúp các nhà vật lý học của CERN chia sẻ công việc của họ và dùng chung
những thông tin trong nhóm. Chẳng bao lâu sau, tư tưởng của Web được mở rộng và áp dụng
vào trong Internet như là một kỹ xảo của việc truy cập thông tin và các dịch vụ của Internet.
Điều đã làm cho Hypertext có giá trị hơn các văn bản bình thường là có phần liên kết. Vấn đề
nảy sinh ra là phải đặt các phần liên kết vào Hypertext cho hợp lý. Điều này mất rất nhiều công
sức và không phải Hypertext nào cũng làm tốt điều này. Đã có một vài chương trình cố gắng tự
động xử lý điều này: có một chương trình đọc một văn bản bình thường và cố gắng tìm ra nơi
để đặt các liên kết.

9


Giáo trình thiết kế web

Tuy nhiên khơng có được chương trình nào có thể thực sự thay thế được sự suy luận của
con người.
Giá trị được các liên kết của Hypertext thêm vào văn bản bình thường phụ thuộc vào cách
dùng các phần liên kết hữu dụng. Mỗi liên kết là một phần cho biết là có thể nhảy đến một văn
bản khác để đọc. Nhưng đáng tiếc thay là nhiều loại văn bản khơng thích nghi cho việc chúng

tự nhảy đi. Hơn nữa ngay cả khi nhảy được, không phải lúc nào cũng biết được chính xác nơi
mà các liên kết sẽ nhảy đến. Việc nhảy đến nhảy lui của một tài liệu Hypertext phụ thuộc rất
nhiều và suy nghĩ của người đặt các phần liên kết vào tài liệu.
Điều quan trọng thứ hai của việc dùng Web là truy cập vào các tài nguyên Internet. Cách
tốt nhất để bạn có thể dùng được các tài ngun thích hợp nhiều lần. Web khơng hồn hảo
lắm. Đơi lúc khi bạn sẽ thấy dùng một công cụ đã được thiết kế riêng cho một loại dữ liệu nào
đó thì tốt hơn. Ví dụ, mặc dù bạn có thể dùng Web để đọc các bài báo của Usenet, nhưng bạn
dùng chương trình Newsreader thì vẫn tốt hơn. Tuy nhiên, Web được xác định là công cụ mềm
dẻo nhất để bạn thám hiểm Internet.
1.2 Cấu trúc tổng thể của một Web Site
Để xác định được cấu trúc tổng thể của website điều đầu tiên chúng ta cần xác định đó là
mục đích website cần thiết kế:
Bước đầu tiên trong công đoạn thiết kế một Web site là chúng ta đã có những quyết
định chắc chắn về việc chúng ta sẽ "xuất bản" cái gì với Web site của mình. Khơng có chủ
định và mục tiêu rõ ràng thì cả web site đó sẽ trở nên lan man, sa lầy và cuối cùng đi đến
một điểm khó có thể quay trở lại. Thiết kế cẩn thận và định hướng rõ là những chìa khố
dẫn đến thành công trong việc xây dựng một Web site.
Trước khi xây dựng một Web site, chúng ta nên:


Xác định đối tượng độc giả của web site.



Web site có mục đích rõ ràng.



Thiết lập các chủ đề chính của web site.



Thiết kế các khối thông tin chủ yếu mà web site sẽ cung cấp.

Chúng ta cũng nên bắt đầu với việc xác định nguồn tài nguyên về nội dung, hình ảnh thông
tin mà chúng ta cần đến để tạo nền web site phù hợp với mục đích được đề ra - đó là
nguồn thơng tin sẽ duy trì cho web site hoạt động sau này .
1.3 Phân tích, xác định các đối tượng trong Web Site
Để định hình cho website chúng ta cần thiết kế,đối tượng quan trọng nhất chi phối cho
cấu trúc toàn bộ website chúng ta cần thiết kế đó là đối tượng độc giả, vì vậy việc phân tích và
xác định đối tượng độc giả là điều đầu tiên và bắt buộc trong quá trình thiết kế website.
Xác định các độc giả chính của web site, để chúng ta có thể thiết kế cấu trúc phù hợp
với nhu cầu, mong muốn của họ. Sự hiểu biết, trình độ, sở thích cũng như yêu cầu của độc giả
thay đổi từ một người đọc hồn tồn khơng có kinh nghiệm, người sẽ cần đến một sự dẫn dắt
cẩn thận, đến người đọc thành thục, người sẽ nổi giận với bất cứ cái gì mang vẻ chiếu cố tới
họ, hoặc làm chậm trễ việc truy nhập thông tin của họ. Một hệ thống được thiết kế tốt sẽ thích
hợp cho một dải rộng trình độ, nhu cầu độc giả. Ví dụ, nếu mục đích web site của chúng ta là
chuyển tải các thơng tin về tình hình của nội bộ công ty, các tài liệu về nhân lực, hay các tài liệu
khác dùng cho việc in các hướng dẫn sẽ thích hợp cho các độc giả đọc hàng ngày, và cho cả
các độc giả chỉ truy nhập ít lần.

10


Giáo trình thiết kế web

1.3.1 Độc giả (web surfer)

Các trang web (homepage) cho các chương trình duyệt web cũng nên tương tự như các
bìa tạp chí. Mục tiêu là tính tồn thể với hình ảnh bắt mắt, chủ đề nội dung gây chú ý. Tất cả

các liên kết trên trang chủ này nên chỉ tiếp đến các trang bên trong web site. Chúng ta cũng
phải tạo được thông báo ngắn gọn, súc tích cái có trong web site có thể được độc giả quan
tâm.
1.3.2 Độc giả mới và độc giả khơng thường xun
Số độc giả nhóm này phụ thuộc vào một cấu trúc site rõ ràng, dễ truy nhập đến
sự tổng qt về cấu trúc tồn bộ thơng tin trên web site. Người mới truy nhập sẽ có cảm giác bị
đe doạ bởi một cấu trúc menu phức tạp, ngại đi sâu vào web site nếu trang đầu khơng có hnhf
ảnh hấp dẫn và không được sắp xếp rõ ràng. Theo Jakob Nielsen ở Sun Microsystems, thì có
dưới 10% độc giả cuộn màn hình xuống dưới phần đầu của một trang web. Các độc giả không
thường xuyên lại chú trọng đến trang khái quát, cấu trúc có phân lớp và hình ảnh đồ hoạ, biểu
tượng giúp họ nhớ, kết nối đến vị trí thơng tin họ cần trong web site của chúng ta. Một từ điển
các khái niệm kỹ thuật, từ viết tắt và danh sách các vấn đề thường được xảy ra (FAQ frequently asked questions) có thể rất hữu dụng cho các độc giả mới và không thường xuyên
của chúng ta.
1.3.3 Các độc giả chuyên nghiệp, thường xuyên
Số độc giả này phụ thuộc vào web site của chúng ta để nhận thơng tin nhanh
chóng và chính xác. Các độc giả chuyên nghiệp rất sốt ruột với menu nhiều lớp có đồ hoạ chất
lượng kém mà chỉ cung cấp từ 2 đến 6 lựa chọn một lần. Họ khát khao các menu khơng đồ hoạ
(text), có thể kéo thả được và thời gian nạp xuống nhanh chóng. Các kiểu cách làm dáng đồ
hoạ sẽ làm họ phát điên. Các độc giả chuyên nghiệp, thường xuyên thường có chủ định rõ
ràng trong đầu, do vậy sẽ đánh giá cao các menu text chi tiết, các nét chính của web site hoặc
các chỉ số site phong phú giúp họ tìm kiếm, thu nhận thơng tin nhanh chóng.
1.3.4 Các độc giả nước ngồi
Phải ln nhớ là chúng ta đang thiết kế cho World Wide Web. Các độc giả của
chúng ta có thể là một người ngay ngồi phố, hoặc một ai đó đang ở bên Mỹ, Nhật bản. Để đáp
ứng tối đa số lượng độc giả trên các quốc gia khác nhau, chúng ta cần biên dịch, ít nhất cũng
là các trang chủ đạo. Tránh các từ địa phương, hoặc các khái niệm kỹ thuật, viết tắt trong bản
giới thiệu hay các trang giải thích. Ví dụ, đừng bao giờ viết tắt ngày trên các trang web, vì đối
với một người Mỹ, thì "10/5/97" sẽ được hiểu là ngày 5 tháng 10 năm 1997, nhưng đa số độc
giả các quốc gia khác sẽ hiểu đó là ngày 10 tháng 5 năm 1997.
Bài tập chương 1: Học sinh làm bài tập chương 1 trang 139,phần đầu của bài 1 và bài 2

11


Giáo trình thiết kế web

BÀI 2
THIẾT KẾ TỔNG THỂ MỘT WEBSITE
Mã bài : ITPRG 13.2
Giới thiệu 
Sau khi chúng ta xác định được mục đích và đồi tượng độc giả của website,việc xậy
dựng hệ thống thông tin trong trang web một cách khoa học,rõ ràng và chính xác sẽ là yếu tố
quyết định sự thành cơng của tồn bộ chu trình thiết kế web,đem lại sự nhất quán cho toàn bộ
website.
Mục tiêu thực hiện
Học xong bài này học viên sẽ có khả năng:
- Xây dựng hệ thống thông tin thể hiện trên trang WEB bằng SITE MAP
- Một số kỹ thuật về thiết kế và xây dựng các biểu tượng: Banner, logo, hình ảnh, âm thanh
và một số đối tượng khác trong trang WEB
Nội dung chính
2.1 Xây dựng hệ thơng tin của WEB
2.1.1 Khái quát
Tồn tại những lý thuyết có hệ thống và cơ bản cho việc chia nhỏ bất cứ khối thơng tin lớn
nào, cho dù nó được đem đi in hay cho World Wide Web. Cơ sở của mọi hệ thống lý luận là
giới hạn của con người trong việc lưu giữ và nhớ lại thông tin. Các nhà tâm lý học nhận thức
đã biết từ hàng thập niên trước rằng đại đa số chúng ta chỉ có thể lưu giữ khoảng 4 đến 7 mẫu
thông tin rời rạc trong trí nhớ ngắn hạn. Mục đích của các hệ thống tổ chức là giữ số lượng
mẫu thông tin mà người đọc cần lưu nhớ đên tối thiểu, 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ẽ. Phương pháp độc giả tìm
kiếm và sử dụng thơng tin cũng thừa nhận, các tin ngẵn hơ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.
Đại đa số web site có thơng tin tham khảo để độc giả tìm kiếm trong các bài ngắn hơn. Độc
giả rất ít khi đọc các tài liệu dài, liên tục trên màn hình, và đa số họ, những người đi tìm một
mẩu tin, sẽ khó chịu khi phải rà sốt một bài dài tồn chữ để cuối cùng tìm cái họ cần. Các
đoạn tin nhỏ của các thơng tin có liên quan sẽ dễ tổ chức hơn 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. "Nhỏ" chỉ có thể được
xác định trong ngữ cảnh của tài liệu chúng ta trình bày và cái ta mong muốn cho độc giả.
2.1.2 Các bước trong tổ chức thông tin
Ngày lại ngày, cuộc sống xã hội và công nghiệp càng ít địi hỏi chúng ta tạo bản tường
trình chi tiết về cái chúng ta biết và những cái đó liên quan đến nhau như thế nào, nhưng
khơng có một nền tảng hệ thống hố logíc và vững chắc, web site của chúng ta sẽ không hoạt
động tốt, ngay cả khi các nội dung cơ bản của chúng ta là xác đáng và hay. Bốn bước cơ bản
12


Giáo trình thiết kế web

trong việc tổ chức thơng tin của chúng ta là chia nó thành các đơn vị logic, thiết lập hệ thống
cấp bậc theo tầm quan trọng và tính tổng quát, sử dụng hệ thống này để tạo cấu trúc quan hệ
giữa chúng, sau đó 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.
2.1.3 Cắt đoạn thông tin
Đa số thông tin trên World Wide Web gồm có các bài giới thiệu ngắn không cần đọc nối
tiếp. Điều này rất đúng đối với các web site của các tổ chức, chính phủ, doanh nghiệp và giáo
dục hay cung cấp các thông tin đã được in trên giấy trước đó. Những nhà viết tài liệu kỹ thuật
đã phát hiện rất lâu trước khi web ra đời rằng độc giả đánh giá cao các đoạn thơng tin ngắn do
có thể nhanh chóng rà sốt và định vị chúng. Các đoạn thông tin ngắn, tổ chức thống nhất đặc
biệt thích hợp với trình bày của web, do:


Có ít độc giả dành thời gian để đọc tài liệu dài trên màn hình. Đa số họ sẽ lưu tài liệu

dài vào đĩa, hoặc in chúng, chỉ đọc những gì bao quát trực tuyến.



Các mẩu tin ngắn, riwng biệt thích hợp với liên kết web. Độc giả thường muốn tìm thấy
một phần thơng tin chủ định, chứ khơng phải tồn bộ cả quyển sách để rồi lọc nó ra.
Nhưng cũng đừng chia cắt quá nhỏ thông tin, chúng ta sẽ làm độc giả thất vọng. Từ
một đến ba trang (in) thông tin là đủ cho một đoạn thông tin trên web. Một liên kết mà
chỉ đến một mẩu tin cụt lủn sẽ thật ngớ ngẩn trong mọi trường hợp.



Hình thức đồng nhất của cách tổ chức và hình thức trình bầy thơng tin cho phép độc
giả áp dụng kinh nghiệm của họ có từ web site của chúng ta để tìm kiếm, khám phá,
và cũng cho phép độc giả dự đoán được phần web site mới, lạ sẽ được tổ chức như
thế nào.



Các đoạn thông tin ngắn gọn, súc tích sẽ thích hợp hơn với màn hình máy tính, cái mà
giới hạn tầm nhìn của các văn bản dài.
Việc áp dụng phân chia thông tin phải linh động, và nhất quán với ý thức chung, với hệ thống
logic và với sự thuận tiện cho độc giả web. Cách tốt nhất để phân chia và tổ chức thông tin
thực hiện theo bản chất của nội dung. Cũng có lúc cần tạo một tài liệu dài trên web như một
bản tổng hợp của các đoạn thông tin. Điều này cần thiết khi chúng ta tạo các trang web để độc
giả có thể lưu hay in chúng.
2.1.4 Hệ thống phân cấp
Nếu chỉ xác định cấu trúc định vị cơ bản cho độc giả thì mọi tổ chức cần đến sự phân
cấp theo tầm quan trọng. Mọi "đoạn" thơng tin có thể và nên được sắp xếp theo mức quan
trọng, và được hệ thống theo mức độ quan hệ giữa các thành phần. Khi chúng ta đã xác định

được hợp lý các mức ưu tiên, chúng ta có thể xấy dựng một hệ thông phân cấp từ mức ưu tiên
nhất hay mức tổng quát nhất, xuống đến mức cụ thể nhất hay mức chi tiết nhất. Hệ thống phân
cấp thực sự là cần thiết đối với web, vì ý tưởng trang chủ-liên kết phụ thuộc vào sự phân cấp,
di chuyển từ cái nhìn khái qt nhất của tồn web site (trang chủ), qua các menu con xuống
đến trang nội dung đã ngày càng trở nên đặc trưng.

13


Giáo trình thiết kế web

Hình 2.1:Hệ thống phân cấp
2.1.5 Các mối quan hệ
Khi đối diện với một hệ thống thông tin mới, phức tạp, độc giả bắt đầu xây dựng
các mơ hình lý trí, và sau đó sử dụng chúng để đánh giá các mối liên hệ giữa những chủ
đề, và giả thiết về vị trí tìm thấy thơng tin họ chưa thấy trước đó. Sự thành cơng của web
site chúng ta như một hệ thống thông tin sẽ chủ yếu được xác định bởi hệ thống thống đó
cân xứng bao nhiêu với các mong muốn của độc giả. Hệ thống hợp lý cho phép độc giả dự
đoán đúng vị trí họ tìm thấy thơng tin họ cần tìm. Thơng tin được sắp xếp bằng hình ảnh,
dán nhãn, được nhóm và phân loại nhất quán cho phép độc giả mở rộng nhận biết từ các
trang đã xem vào các trang mới lạ đối với họ. Nếu chúng ta làm độc giả lạc lối với một cấu
trúc không hợp lý, dễ hiểu, độc giả sẽ bị thất vọng liên miên bởi các khó khăn khi tìm thơng
tin. Đừng nên xây dựng một web site trong như sau:

Hình 2.2:Các mối quan hệ
2.1.6
Chức năng
Sau khi đã tạo nên web site, chúng ta nên phân tích tính thẩm mỹ của nó, và tính thực tế cũng
như tính hiệu quả của cả cơ cấu hệ thống. Chúng ta chọn cấu trúc hệ thống nào cho web site
không quan trọng, quan trọng là thiết kế web site thích hợp, cân bằng giữa cấu trúc và quan hệ

của menu hay các trang "homepage" với các trang nội dung độc lập, các đồ hoạ liên kết, tài
liệu. Mục đích là để xây dựng một hệ thống phân cấp của menu, trang web sao cho tự nhiên
đối với độc giả, không gây trở ngại hoặc làm lúng túng khi đọc web site.
Các web site q nơng, chỉ có một mức liên kết, uỷ thác vào các trang menu nặng nề mà sau
một thời gian sẽ giống như một mớ hỗn độn các thông tin không liên quan đến nhau, được liệt
kê không theo một trật tự nào cả:

14


Giáo trình thiết kế web

Hệ thống menu lại có thể q sâu, cất giấu thơng tin dưới nhiều lớp menu:

Hình 2.3:Chức năng
Các Gopher site là ví dụ điển hình cho những bất tiện của các menu lồng nhau, nơi mà chúng
ta đôi khi phải mở nhiều thư mục trước khi chúng ta gặp các tài liệu. Menu mất giá trị khi chúng
không chuyển tải từ 4 đến 5 liên kết; các trang menu dựa trên danh sách, bằng chữ có thể tải
rất nhiều liên kết mà khơng dìm sâu độc giả hay bắt họ cuộn màn hình qua một danh sách dài
dặc. Bắt độc giả phải định vị qua nhiều mức menu lồng nhau trước khi đọc được thông tin là
trọc tức độc giả và không cần thiết.
Nếu web site phát triển nhanh, sự cân bằng các menu và trang web là rất cần thiết. Các phản
hồi của độc giả (và sự phân tích việc sử dụng web site) có thể giúp chúng ta quyết định được
cấu trúc web site có cịn thích hợp khơng, hay có phần nào thiết kế kém khơng.Các tài liệu
phức tập địi hỏi sự phân bổ menu sâu, nhưng độc giả lại không bao giờ muốn vào các trang
lại các trang tồn menu nếu có khả năng truy nhập trực tiếp. Mục tiêu là tạo một cây phân lớp
thích hợp có khả năng truy nhập thông tin nhanh, và giúp độc giả hiểu được thông tin được tổ
chức như thế nào.

15

Giáo trình thiết kế web

2.2 Xây
dựng Site Map
Nếu bạn là người quan tâm, chú ý đến World Wide Web, bạn thật khó thốt khỏi dính dáng
đến hypertext, hypermedia. Ngày nay, chế bản máy tính đầy ắp ý nghĩ kỳ quặc về việc thơng tin
trên web có thể bằng cách nào đó liên kết mọi cái với nhau. Với gợi ý này, bạn có thể bỏ qua
một trong những thách thức lớn nhất của việc trình bày thơng tin - đặt thông tin vào trật tự logic
như thế nào và tạo một web site dễ hiểu, đáng quan tâm cho độc giả. Khơng có gì xa sự thật
cả. Nếu chúng ta chỉ có ý tưởng mơ hồ về cách thức một phần web site liên quan đến phần
khác, nếu chúng ta khơng có một cái nhìn tổng thể hoặc ý thức rõ ràng về tổ chức, độc giả của
chúng ta sẽ sớm biết đủ, và đai đa số họ sẽ bỏ đi để tìm thơng tin khác tốt hơn.
2.21 Sự nối tiếp
Cách đơn giản nhất để hệ thống thông tin là theo dãy, với nó chúng ta có thể hiển thị thông tin
một cách tuần tự. Thông tin sẽ tiếp nối nhau như một bản tường thuật, theo thời gian, hoặc
trong sự sắp xếp logic nó là ý tưởng cho sự luận bàn nối tiếp. Sắp xếp tuần tự có thể theo thứ
tự 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ữ. Tuy nhiên,
cách tổ chức này chỉ thích hợp với các web site nhỏ (hoặc các danh sách cấu trúc như chỉ số),
các chuỗi càng dài càng trở nên phức tạp hơn, và khi đó càng cần có cấu trúc hơn để vẫn dữ
được tính dễ hiểu.

Hình 2.4: Sự nối tiếp
Nhiều web site lớn vẫn còn được tổ chức kiểu nối tiếp, nhưng mỗi trang trong chuỗi chính có
thể có một hay nhiều trang nói ngồi đề, thơng tin chen giữa, hoặc các liên kết đến các web
site khác.
2.2.2 Ô
lưới

Nhiều bản hướng dẫn, danh sách các khoá học của trường đại học hoặc các giải nghĩa
cho các trường hợp kỹ thuật được tổ chức tốt nhất theo phương thức ô lưới. Nó là cách tốt để
tương quan các biến số như sự kiện, cơng nghệ, văn hố,...Để thành cơng, từng đơn vị riêng
biệt trong lưới nhất định phải có cùng cấu trúc cho các chủ đề lớn và nhỏ. Các chủ đề thường
khơng có sự phân cấp về mức quan trọng. Ví dụ, "TCP/IP" cũng quan trọng khơng hơn, khơng
kém so với "IPX/SPX", do vậy cả hai mô tả nên có cùng cấu trúc. Như vậy độc giả có thể đi tiếp
(dọc xuống lưới) để đọc diễn giải về "TCP/IP", hay đi ngang (đi ngang lưới) bằng cách đọc
phần "packet" của cả hai chủ đề TCP/IP và IPX/SPX. Có điều khơng hay là tổ chức lưới có thể
khó hiểu với độc giả chừng nào độc giả xác định được mối liên quan giữa các loại thơng tin.
Nhưng nó 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ủa nó. Các sơ đồ tổng quát có thể rất hữu ích đối với các site kiểu lưới.

Hình 2.5:Ơ lưới
16


Giáo trình thiết kế web

2.2.3Phâncấp
Sự phân cấp thơng tin 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. Sắp xếp có phân cấp đặc biệt thích hợp cho các web site, vì các web site luôn được
thực hiện theo cách rẽ nhánh từ một trang chủ duy nhất. Đa số độc giả quen thuộc với các biểu
đồ phân cấp, và các chỉ dụ sẽ trở nên dễ hiểu hơn. Một tổ chức phân cấp cũng tác động có ích
đến bản thân việc phân tích nội dung web site do sự phân cấp chỉ hoạt động hiệu quả khi
chúng ta đã tổ chức hoàn hảo nội dụng của chúng ta. Do biểu đồ phân cấp rất giống đến cấu
trúc của các doanh nghiệp, viện, độc giả dễ dàng xây dựng mơ hình lý trí của cả web site:

Hình 2.6: Phâncấp
2.2.3 Web (mạngnhện)
Cấu trúc tổ chức giống mạng nhện yêu cầu ít hạn chế cho việc sử dụng mẫu thơng tin.

Mục đích thường cho ý tưởng liên kết giống nhau và tự do, nơi mà độc giả đi theo sự quan tâm
của họ trong một mô hình tự khám phá, tự do tư tưởng đối với từng độc giả đến web site. Mơ
hình web site này đầy rẫy các liên kết đến các tài liệu ở trong web site đó cũng như trên tồn
World Wide Web. Mục đích là khai thác triệt để năng lực của web trong việc liên kết và kết hợp,
tuy vậy các cấu trúc theo kiểu mạng nhện này rất dễ phát triển thành một mớ hỗn độn, lộn xộn
của các khối thơng tin. Cũng rất trớ trêu, các web có tổ chức lại thường có cấu trúc phi thực tế
nhất đối với các web site, vì nó rất khó hiểu, dự đoán đối với độc giả. Các web làm việc tốt nhất
cho các site nhỏ, có nhiều danh sách liên kết, nhắm vào các độc giả chuyên nghiệp hoặc trình
độ cao, những độc giả tìm kiếm những kiến thức chuyên sâu.

Hình 2.7:Web (mạngnhện)
2.2.1
Xây dựng các tiêu chí đánh giá và xử lý thông tin phản hồi
Thiết kế hướng tới người sử dụng
Giao diện đồ hoạ cho người sử dụng (GUI) được thiết kế nhằm cho người dùng điều
khiển trực tiếp maý tính của họ. Ngày nay, người sử dụng yêu cầu một mức độ hoàn hảo của
mọi thiết kế giao diện đồ hoạ, kể cả các trang web. Mục đích là cung cấp mọi cần thiết cho tất
cả độc giả quan trọng của chúng ta, mô phỏng công nghệ web cho mọi mong chờ của họ, và
khơng bao giờ địi hỏi người đọc chỉ đơn giản là làm theo một giao diện mà đặt những cản trở
không cần thiết lên con đường của họ.
Đây là nơi nghiên cứu của chúng ta về các nhu cầu và tâm lý học khách hàng là những yếu tố
quyết định. Không thể thiết kế cho một độc giả vô danh mà chúng ta không biết đến các yêu
cầu của người đó. Chúng ta nên tạo các kịch bản mẫu cho các nhóm độc giả đang tìm kiếm
17


Giáo trình thiết kế web

thơng tin trên web site của chúng ta. Một độc giả có kinh nghiệm tìm một mẩu tin nhất định có
được giúp đỡ hay cản trở bởi thiết kế của chúng ta? Mọt độc giả mới có bị lúng túng trước một

hệ thống menu phức tap? Thử nghiệm các thiết kế của chúng ta và nhận các phản hồi từ độc
giả là phương pháp tốt nhất để tìm ra các ý tưởng thiết kế cho phép độc giả nhận được cái họ
muốn từ web site của chúng ta.
Các giúp đỡ định hướng rõ ràng
Với thực tại của công nghệ web, đa số độc giả tương tác với các trang web bằng cách thực
hiện các liên kết giữa các tài liệu. Vấn đề chủ
yếu của giao diện trong các web site là độc
giả không ý thức được họ đang ở đâu trong
tổ chức thông tin. Các biểu tượng nhất quán,
dễ hiểu, các lược đồ đồ hoạ đồng nhất và
bản khái quát (đồ hoạ hay văn bản), màn
hình tổng hợp có thể cho độc giả sự tin
tưởng là họ có thể tìm thấy cái họ tìm mà
khơng lãng phí thời gian.
Độc giả phải ln có khả năng quay trở lại
trang chủ và các điểm chủ chốt trên web site của chúng ta. Các liên kết cơ bản này nên có trên
mọi trang web của chúng ta, nó thường là các nút ấn đồ hoạ với hai mục đích: tạo các mối liên
kết cơ bản và giúp tạo một biểu tượng đồ hoạ thông báo cho độc giả biết họ vẫn còn đang ở
trong web site của chúng ta. Ví dụ, trên web site của Netscape, thanh biểu tượng sau đây có
tại cuối mỗi trang web:
Được thu gọn từ hình ảnh lấy tại: home.netscape.com
Thanh nút ấn hay được sử dụng (cho nhiều lựa chọn trong một diện tích nhỏ), có thể đốn
trước (có ở tất các chân trang), và tạo một đặc tính đồng nhất cho mọi trang web của Netscape
site.
Khơng có trang cuối cùng (dead-end)
Mọi trang web nên có ít nhất một liên kết. Các trang "dead-end" - các trang khơng móc
nối đến các trang khác trong cùng site - không chỉ là một sự thất vọng với độc giả, chúng
thường làm mất khả năng đưa độc giả đến với các trang khác trong web site của chúng ta.
Các trang web thường được đưa ra khơng có lời tựa đầu: độc giả thường tạo hay đi theo các
liên kết thẳng đến các trang cất sâu trong cấu trúc của web site. Do vậy họ có thể khơng bao

giờ nhìn thấy trang chủ (Homepage) hoặc các thơng tin mở đầu trên we site của chúng ta. Nếu
các trang phía dưới của site khơng có các liên kết quay lên, về trang chủ hoặc quay lại menu,
độc giả thực chất là bị loại khỏi việc truy nhập đến các phần còn lại của web site.
Cho phép truy nhập trực tiếp
Mục đích là cung cấp cho độc giả thơng tin họ cần với ít bước nhất và với thời gian ngắn
nhất. Điều này có nghĩa là chúng ta cần thiết kế cấu trúc thông tin hiệu quả nhất, giảm tối đa
các bước qua hệ thống menu. Các nghiên cứu về giao diện chỉ ra rằng độc giả thích các menu
mà có từ 5 đến 7 liên kết, và
độc giả cũng thích ít màn
hình dày dặc các lựa chọn
hơn là nhiều trang với các
menu đơn giản.

18


Giáo trình thiết kế web

Bảng sau đây cho thấy chúng ta không cần nhiều mức menu để tạo nên một số lượng lớn lựa
chọn:

Dải thông và ảnh hưởng
Độc giả không chịu đựng thời gian trễ dài. Các nghiên cứu nhân tố con người cho thấy đối với
đa số công việc tính tốn, ngưỡng của sự mất tác dụng là khoảng 10 giây. Các thiết kế trang
web mà khơng thích hợp với tốc độ truy nhập mạng của độc giả sẽ chỉ làm cho họ thêm thất
vọng. Nếu độc giả chỉ là một người dạo chơi web bình thường sử dụng modem tốc độ 28.8
kbps qua đường điện thoại, thật dại dột đặt một ảnh lớn (kích thước) lên trang web, độc giả sẽ
không đủ kiên nhẫn chờ đến khi ảnh được nạp xuống. Thế nhưng, nếu chúng ta xây dựng một
web site cho nội bộ (intranet) trường học, doanh nghiệp, nơi mà mọi người truy nhập web
server với tốc độ mạng LAN hay cao hơn nữa, thì chúng ta lại nên sử dụng nhiều ảnh và

multimedia.
Đơn giản và nhất quán
Độc giả sẽ không ấn tượng với sự phức tạp không lý do, đặc biệt các độc giả phụ thuộc vào
web site của chúng ta về thời gian hoặc thông tin chính xác, liên quan đến cơng việc. Các biểu
tượng nên đơn giản, quen thuộc là dẽ hiểu với độc giả, ví dụ nếu chúng ta muốn một biểu
tượng cho việc thiết kế thông tin, nên chọn quyển sách hay thư viện, chứ đừng chọn tầu vữ trụ
hay vo tuyến truyền hình. Thiết kế thơng tin tốt nhất là những cái mà đa số độc giả chưa bao
giờ nhận thấy.

Được thu nhỏ từ ảnh của www.adobe.com
Adobe (do Studio Archetype thiết kế) là một mơ hình xuất sắc cho thiết kế web site. Các
trang sử dụng đồ hoạ một cách rộng rãi với các trợ giúp định vị (navigation), áp dụng nhất
quán ở tất cả các trang trên web site. Một khi chúng ta biết các liên kết cơ bản nằm trên
đầu trang, ranh giới trở thành vơ hình và việc định vị sẽ dễ dàng hơn.
19


Giáo trình thiết kế web

Để đạt được tối đa việc chức năng hố và tính rõ ràng, thiết kế trang của chúng ta nên
được xây dựng trên các đơn vị mẫu nhất quán, tất cả đều sử dụng chung một kiểu đồ hoạ,
phong cách biên tập và mơ hình tổ chức. Mục đích là tính đồng nhất, có thể đốn trước, để
độc giả cẩm thấy thoải mái khi khai thác web site của chúng ta, và chắc chắn họ biết phải
tìm cái họ cần tìm. Các biểu tượng đồ hoạ trên trang web cung cấp các tín hiệu trực quan
về sự tiếp nối của thông tin. Biểu tượng đồ hoạ trên tất cả đầu trang của Adobe site tạo
nên một giao diện độc giả nhất quán, và cũng là nét nhận dạng duy nhất cho site của
Adobe:

Được thu nhỏ từ ảnh của www.adobe.com
Ngay cả khi các trang của chúng ta không sử dụng đồ hoạ, sử dụng nhất quán các tiêu đề, các

chân trang và các liên kết đến trang chủ, các trang liên quan sẽ tăng cường cảm giác của độc
giả là họ đang trong khung cảnh web site của chúng ta.
Để tạo hiệu quả cho một hệ thống "không đứt đoạn - seamless", chúng ta nên xem xét đến việc
đưa các thông tin quan trọng vào web site của chúng ta, gộp nó vào hệ thống hơn là tạo liên
kết đưa độc giả của chúng ta ra khỏi site của chúng ta (nếu không vi phạm bản quyền cho việc
sao chép thơng tin).
Tính ổn định thiết kế
Nếu chúng ta mong muốn thuyết phục độc giả của chúng ta rằng cái mà chúng ta cung cấp là
chính xác, đáng tin cậy, chúng ta cũng phải thiết kế web site của chúng ta cẩn thận, giống như
chúng ta tạo các mối liên hệ với các doanh nghiệp khác, với cùng sự biên tập và các trình độ
thiết kế cao. Một site trông luộm thuộm, với thiết kế trực quan nghèo nàn, trình độ biên tập kém
sẽ khơng truyền được sự tin cậy cho các độc giả.
Tính ổn định chức năng trong thiết kế web có nghĩa là giữ các thành phần giao tiếp của web
site làm việc ổn định. Tính ổn định chức năng có hai thành phần - đặt các vật đúng chỗ ngay từ
đầu khi thiết kế web site, và sau đó giữ chúng hoạt động nhịp nhàng trong suốt thời gian. Các
web site tốt có tự nó đã có tác động qua lại, với nhiều liên kết đến các trang trong site đó, và có
các liên kết đến các site khác. Trong khi thiết kế, chúng ta cần kiểm tra thường xuyên các liên
kết để đảm bảo chúng còn tồn tại, mọi cái trên web thay đổi rất nhanh, cả trên web site của
chúng ta và các web site khác. Chúng ta cần có lịch kiểm tra lại các liên kết và cả nội dung của
nó có cịn thích hợp khơng.
Phản hồi và đối thoại
Thơng qua hình ảnh đồ hoạ, các nút bấm, các liên kết đặt một nơi duy nhất, thiết kế web của
chúng ta nên đưa ra khả năng xác nhận vị trí, lựa chọn của độc giả.
Phản hồi cũng có nghĩa là bước chuẩn bị cho việc trả lời, đáp ứng các đòi hỏi, góp ý của độc
giả. Các web site thiết kế tốt luôn cung cấp mối liên hệ trực tiếp tới ban biên tập hoặc
"webmaster" phụ trách kỹ thuật của site. Lên kế hoạch đảm bảo quan hệ liên tục với các độc
giả là quan trọng sống còn đối với sự thành công lâu dài của một doanh nghiệp.
Bài tập chương 2: Sinh viên tham khảo bài tập trang. 139 bài 1 và bài 2.

20

Giáo trình thiết kế web

BÀI 3
Tên bài : XÂY DỰNG PROTOTYPE
Mã bài : ITPRG13.3
Giới thiệu 
Sau khi lập kế hoạch cho website,bước tiếp theo chúng ta sẽ xây dựng chi tiết hồ sơ
thiết kế và thiết lập prototype cho trang web,bước này rất quan trọng trong giai đoạn chuẫn bị
hình thành nên website,sẽ giúp cho chúng ta biết cụ thể cho từng đối tượng trong trang web.
Mục tiêu thực hiện
Học xong bài này học viên sẽ có khả năng:
- Xây dựng hồ sơ thiết kế trang Web
- Khảo sát phân tích và đánh giá một số Web sites điển hình
- Thiết lập các Prototype

- Đánh giá việc thiết kế qua các Prototype.
Nội dung chính
3.1 Xây dựng hồ sơ thiết kế trang web
Đây chính là quá trình chúng ta lập kế hoạch nhiêm vụ website cần thiết kế.Giải quyết
từng vấn đề và nhiệm vụ được liệt kê phác hoạ nên các mối quan hệ khi chúng ta lập kế
hoạch:


Ghé thăm các trang web tương tự để biết bạn muốn gì và khơng muốn gì,và tìm hiểu
xem làm sao chúng ta làm trang web của mình trở nên độc đáo.



Đảm bảo rằng trang của bạn nói lên bạn là ai hoặc nói lên cơng ty của bạn



Chọn các màu sắc gợi lên cảm giác thích hợp cho trang web



Phân loại trang để không bị mất trọng tâm.Với mục đích thiết kế,phân loại trang là thơng
tin,thương mại, cộng đồng,nghệ thuật hoặc một số kiểu trang khác.



Thiết kế trang để phản ảnh cách mà người sử dụng hay dùng nhất để duyệt qua các
trang.Đảm bảo có các chủ đề bao trùm trên trang hướng tới đối tượng độc giả mà chúng
ta đã xác định, sau đó cung cấp nhiều liên kết cụ thể hơn trên mỗi trang con



Đảm bảo trang phải cung cấp cho người dùng một số cách để liên hệ với webmaster
như địa chỉ thư tín,số điện thoại...



Đặt tên các tập tin một cách thích hợp



Tạo ra các nút dể hiểu phản ánh rõ ràng cấu trúc trang muốn xây dựng.



Chia nội dung thành các đơn vị logic.Không chia một trang thành 2 trang chỉ vì trang đó
q dài,nếu chia phải có liên kết logic thuận tiện cho người dùng.



Phân tích thơng tin và để thông tin quan trọng nhất ở nơi người dùng dễ thấy và dễ truy
cập nhất

21




Giáo trình thiết kế web

Xác định một số cách tạo ra một chủ đề hoặc một cái nhìn thống nhất trên toàn
trang.Đừng quên sử dụng logo và các liên kết chuyển hướng nhất qn trên mỗi trang.



Hãy có ít nhất một yếu tố khuyến khích người sử dụng quay trở lại,ví dụ như cập nhật
hàng ngày,hàng tuần hay các phịng trò chuyện (forum).
3.2 Xây dựng các Prototype mẫu
Sau khi thiết lập mục thiết lập được các mục tiêu và xác định được khán giả chúng ta
chuyển sang bước tiếp theo đó là thiết kế nên bộ khung cho trang web.Sau khi đã thu thập các
thơng tin chính mà chúng ta muốn đưa lên trang web,chúng ta cần tìm cách tốt nhất để trình
bày thơng tin lên trang web của mình.Ví dụ chúng ta có thể tổ chức trang web theo nhiều cách
khác nhau,bao gồm các loại sau:



Theo thứ tự chữ cái



Theo thứ tự thời gian



Biểu đồ



Dạng phân cấp



Theo số lượng



Ngẫu nhiên



Theo chủ đề

Đến nay hầu hết các trang được tổ chức theo dạng phân cấp.Một trang có tính phân cấp có
trang chủ chứa các dịng chữ hấp dẫn và các liên kết đến các trang chính .

3.3 Đánh giá việc thiết kế qua Prototype
Sau khi thiết kế các Prototype các yếu tố trên Prototype có thể được đánh giá thơng qua
các tiêu chí như:


Dễ dàng xác định và hiển thị các liên kết và các nút chuyển hướng



Biểu tượng hoặc biểu trưng trong trang chủ có thể sử dụng trong tồn trang web



Các thơng tin quan trọng phải được hiển thị trên cùng



Tiêu đề có nội dung.



Các hiệu ứng hoặc chủ đề gợi cảm xúc bằng các công cụ như từ ngữ,màu sắc,bố
trí,phong chử.



Mở các liên kết của trang để thu hút người xem.



Tạo điều kiện tải nhanh trang web(hình khơng q lớn và q nhiều hình ...)



Mục đích của trang rõ ràng và người xem biết được tiếp theo họ phải làm gì.



Liên kết văn bản hiển thị dưới đáy trang.



Phải có chứng minh nguồn gốc web.

Bài tập chương 3:Sinh viên tham khảo bài tập trang 139,bài 1 và 2

22


Giáo trình thiết kế web

BÀI 4
Tên bài : THIẾT KẾ WEB VỚI CÁC ĐỐI TUỢNG ĐƠN GIẢN
Mã bài : ITPRG13.4
Giới thiệu 
Sau khi xác định được mục tiêu,lập hồ sơ website và xác định các đối tượng,bài học này
sẽ giúp chúng ta hiểu và xử lý các đối tượng trong thiết kế web như thế nào là hợp lý và chính
xác để có được trang web chuyên nghiệp.
Mục tiêu thực hiện
Học xong bài này học viên sẽ có khả năng:

- Xây dựng các đối tượng là các ký tự, số trong trang WEB

- Xây dựng và xử lý các file đồ hoạ đưa vào trang WEB
Nội dung chính
4.1 Xác định các đối tượng bên trong trang WEB
Trong phần này chúng ta cần xác định rõ các đối tượng cần có trong website của chúng
ta,thông thường bao gồm các đối tượng sau:


Đối tượng về văn bản như ký tự,số trong trang web



Đối tượng về đồ hoạ



Đối tượng về âm thanh



Đối tượng về video

4.2 Xây dựng các đối tượng là các ký tự, số trong trang WEB
Các yếu tố văn bản xuất hiện trên trang web được mô tả trong các phần sau:
4.2.1 Thanh tiêu đề
Khi tạo trang web phải tạo văn bản xuất hiện trên thanh tiêu đề của cửa sổ trình
duyệt.Yếu tố văn bản trong thanh tiêu đề rõ ràng,chính xác và hữu ích.Nội dung tiêu đề trên
thanh tác vụ giúp người dùng dễ dàng chuyển đổi giữa một số cửa sổ đang mở.
4.2.2 Nội dung

Nội dung của một trang web đề cập đến thực chất vấn đề của nó-lý do khiến mọi người
ghé thăm trang web.Nội dung của trang web phải rõ ràng,ngắn gọn,dễ lướt,nhiều thơng tin,có
tính cập nhật và khơng có nhiều lỗi chính tả...Nên nhớ dù trang web có đẹp mắt đến đâu,đặt
tính hấp dẫn của internet vẫn là văn bản.
4.2.3 Siêu liên kết
Các siêu liên kết cung cấp liên kết từ trang của chúng ta đến một nhóm các trang web
bằng cách liên kết trang chủ đến khu vực có các thơng tin có liên quan.Các văn bản trong siêu
liên kết phải rõ ràng nhất quán,gợi mở nội dung của liên kết và được đặt ở vị trí thích hợp.
23


Giáo trình thiết kế web

4.2.4 Biểu trưng văn bản và đồ hoạ
Chúng ta có thể sử dụng biểu trưng, văn bản đồ hoạ và WordArt để làm cho trang web
có vẻ chuyên nghiệp hơn.Nếu tất cả các thành phần của một trang web có hình thức tương
quan nhau sẽ cho người dùng biết rằng họ vẫn ở trong lãnh thổ của trang web mặc dầu họ đã
đi từ trang này đến trang khác.Bất cứ khi nào có thể,hãy tận dụng phương pháp này để liên kết
biểu trưng với các trang chủ trong toàn bộ trang web của bạn.
4.2.5 Các chuyển hướng văn bản thuần tuý.
Nhiều nhà thiết kế lựa chọn định dạng thanh thực đơn và các yếu tố chuyển hướng chỉ
là hình hoạ nhưng đơi lúc chúng ta cũng cần sử dụng các yếu tố chuyển hướng liên kết ấy
bằng văn bản thuần tuý kết hợp với đồ hoạ.Nếu không cung cấp các thành phần chuyển
hướng dựa trên văn bản,một vài người sử dụng có thể khơng biết cách truy cập đến trang gốc
của bạn.Nên bổ sung các chuyển hướng ở cuối mỗi trang web sẽ giúp người dùng khơng phải
cuộn lên màn hình để nhấn nút liên kết qua trang khác.
4.2.6 Thông tin về ngày tháng
Chúng ta nên đưa yếu tố ngày tháng vào trong các trang web.Ngày tháng có thể là một
dịng văn bản nhỏ ở cuối trang.Tuy nhiên nếu nội dung thường xuyên được cập nhật là một
trong những yếu tố hấp dẫn của trang web chúng ta sẽ đặt rõ hơn phía trên thơng tin.

4.2.7 Thông tin về bản quyền
Nếu chúng ta đang sở hữu bản quuyền với tất cả các văn bản gốc mà chúng ta tạo
ra.Do đó để bảo vệ bản quyền chúng ta nên thêm vào bản thông báo bản quyền về trang web
của mình.Thơng tin bản quyền nên đặt ở cuối trang và có cỡ chữ nhỏ hơn cỡ chữ trong nội
dung trang web.
Một số yêu cầu thiết kế nội dung trong trang web với đối tượng là ký số,ký tự:


Tạo tiêu đề,đầu đề đồ hoạ cho các hiệu ứng bổ sung



Hiển thị đoạn trích và thanh nách để giảm nhẹ dung lượng văn bản



Thêm WordArt,biểu trưng,văn bản đồ hoạ và các biểu ngữ để tạo hình thức nhất
quán cho trang.



Sử dụng các biểu tượng dễ hiểu để thay thế cho các từ như New,home...được bố
trí khắp trang web



Áp dụng thận trọng các màu sắc hoặc các định dạng in ấn(ví dụ như chữ đậm
hoặc nghiêng) để lôi kéo sự chú ý vào những nội dung quan trọng



Đảm bảo việc trang trí nền khơng làm cho nội dung văn bản trở nên khó đọc



Đưa vào các thơng tin quan trọng như chi tiết liên lạc,tên công ty.



Để tránh in chữ quá bé-hoặc nếu nghi ngờ,hãy để người dùng xác định cỡ văn
bản thơng qua thiết lập mặc định trình duyệt của họ.



Sử dụng các phông chữ dễ đọc cùng với nền thích hợp.Hiện tại các phơng chữ
thích hợp nhất trên các nền Window là các phông unicode
4.3 Thiết kế, xây dựng và xử lý các file đồ hoạ trong trang WEB
4.3.1 Cơ chế đồ hoạ của web

24


Giáo trình thiết kế web

Đồ hoa của web trơng gần giống như đồ hoạ trong in ấn,xong một vài yếu tố đặt
trưng web sẽ đóng vai trị quan trong khi bạn sáng tạo và sử dụng đồ hoạ trên web.Đặc biệt là
đồ hoạ trực tuyến địi hỏi bạn phải tính đến giới hạn màu sắc,định dạng tập tin và kích cỡ tập
tin cũng như độ trong suốt có thể,vấn đề tải ảnh và ảnh động trên web…Nhận thức được ba
yếu tố chính-màu sắc-dạng tập tin và kích cỡ tập tin cho phép bạn bắt đầu sử dụng đồ hoạ trên
web của mình.

4.3.2 Ảnh điểm bảng màu và màu sắc
Đầu tiên và quan trọng nhất mỗi đồ hoạ trực tuyến bao gồm một chùm ô vuông màu
nhỏ kết hợp với nhau để tạo nên hình ảnh.Máy tính hiển thị các bức tranh sử dụng các điểm
ảnh.Ví dụ hãy nhìn vào những hình quả sơri trong hình dưới.Hình quả sơri cũng giống như tất
cả các hình khác trực tuyến,khơng có dấu hiệu nào của các dấu chấm,các ơ vng của điểm
ảnh.

Hình 4.1:Một hình ảnh đồ hoạ điển hình.
Bây giờ hãy nhìn vào ảnh đồ hoạ gần hơn một chút.Nếu bạn phóng đại quả sơri lên bạn
sẽ thấy màu sắc của các bức tranh sẽ được biến đổi theo từng ảnh điểm hay từng ơ vng.

Hình 4.2:Khi phóng to một hình ảnh trực tuyến,có thể thấy các điểm ảnh.
Sau khi đã hiểu về điểm ảnh chúng ta sẽ xem xét về bảng màu trong đồ hoạ web.Một
bảng màu chỉ đơn giản là một bảng các màu sắc trong đồ hoạ.Một số đồ hoạ web sử dụng một
số lượng màu hạn chế.Bạn có thể phân bố bảng màu cho hình ảnh,hoặc có thể để chương
trình đồ hoạ tự động tạo bảng màu khi tạo và sửa hình ảnh.Một hình ảnh gif có thể sử dụng
đến 256 màu nhưng nhiều hình ảnh thì sử dụng ít hơn thế.Ví dụ nhìn vào hình 4.3 quả sơri sử
dụng 8 màu nhưng quả ớt sử dụng đến 128 màu.Hãy chú ý đến kích cỡ ảnh,hình quả sơ ri 3kb
nhưng hình quả ớt là 7kb.
25