Translated from English to Vietnamese - www.onlinedoctranslator.

com

CHƯƠNG 5
Thiết Kế Trang Đa Phương Tiện

127

Key
Màn hình máy tính cá nhân càng trở nên giống như những cuốn sách gọn nhẹ Terms
thì càng có nhiều người cảm thấy thoải mái khi đọc chúng.
Body
Một PC mà bạn có thể mở và xử lý vật lý dễ dàng, có loại pin và màn hình Copy
phù hợp, sẽ mang lại ấn tượng thị giác tương tự như một trang giấy. Border
—John Warnock, Người phát minh ra PostScript và Người sáng lập ra Box
Model
Hệ thống Adobe (1994) Cell
Chunking
Column
Chương nổi bật Dynamic
Page F-
Chương này xét đến: Layout Fixed
Các chiến lược hiệu quả của nội dung trực quan Layout Float
Ảnh hưởng của hệ thống phân cấp thị giác đối với góc nhìn Fluid Layout
Sử dụng hệ thống lưới để quản lý không gian trang và màn hình Golden
Ratio Grid
Các bố cục thường dùng trong thiết kế trang đa phương tiện System
Mẹo thiết kế khi sử dụng mẫu trang và các kiểu biểu định Gutenberg Diagram
Headings
Headline
Layout
TỔ CHỨC NỘI DUNG TRÊN MỘT TRANG Margin
Bố trí trang là lĩnh vực thiết kế đồ họa đề cập đến sự sắp xếp trực quan của văn Modular
Grid
bản và hình ảnh trên một trang. Về cơ bản, đó là vai trò của quản lý thông tin Multicolumn Grid
trực quan, sử dụng các nguyên tắc chung của thiết kế và kiểu chữ để mang lại Padding
trật tự và cấu trúc cho một trang. Thuật ngữ này bắt nguồn từ ngành công nghiệp Page
in ấn như một nghề thủ công chuyên dụng để thiết kế các trang vật lý trong sách, Page
tạp chí và báo. Trong các nhà xuất bản, cơ quan và tòa soạn, công việc của các Template
Row
tác giả, phóng viên, người viết quảng cáo, biên tập viên và những người tương tự
Sidebar
là tạo văn bản (hoặc bản sao) cho các trang trực quan, trong khi các nhiếp ảnh Single-column
gia, họa sĩ minh họa và nhà thiết kế đồ họa tạo ra hình ảnh. Công việc của một Grid Splash Page
nghệ sĩ trình bày hoặc người tổng hợp trang là kết hợp các yếu tố khác nhau của Static
thông tin trực quan (văn bản và đồ họa) trong trang, tạo ra một bản trình bày vừa Page Style
Sheet
đẹp mắt vừa dễ sử dụng.
Table
Các chương trình như Quark Xpress và Adobe InDesign là những công cụ phần Typographic
Grid Visual
mềm chuyên nghiệp được sử dụng trong ngành xuất bản trên máy tính để bàn để
Hierarchy
bố trí và thiết kế trước khi in của

Cơ sở Đa phương tiện.DOI: 10.1016/B978-0-240-81394-3.00005-7

 Thiết Kế Trang Đa Phương Tiện CHƯƠNG 5 128

trang in. Trong đa phương tiện, khái niệm về bố cục trang đã chuyển đổi một
cách ẩn dụ từ các loại trang vật lý mà bạn có thể chạm và lật sang các trang kỹ
thuật số xuất hiện trên màn hình hoặc màn hình máy tính. Phép ẩn dụ trang được
mở rộng sang lĩnh vực thiết kế web, nhưng cũng có thể được áp dụng rộng rãi
hơn cho bất kỳ loại không gian màn hình nào mà thông tin hình ảnh phải được
sắp xếp và sắp xếp để trình bày. Trong công việc đa phương tiện, các nguyên tắc
thiết kế trang có thể được áp dụng để tạo màn hình menu DVD, đồ họa tiêu đề
toàn màn hình trong quảng cáo truyền hình hoặc màn hình chào mừng của ứng
dụng vi mô chạy trên máy tính bảng hoặc thiết bị thông minh. điện thoại. Bất cứ
khi nào bạn kết hợp nội dung trực quan trong không gian cố định hoặc linh hoạt
của trang hoặc màn hình kỹ thuật số, bạn đang tham gia vào hoạt động thiết kế
trang (xemHình 5.1).

HÌNH 5.1
Hệ thống menu DVD
cho phim Walt Disney
The Rookie bao gồm một
menu chính,menu con
chọn cảnh và menu con
vật liệu bổ sung (hình ở
đây). Bố cục trực quan
của mỗi menu là sản
phẩm của thiết kế trang
đa phương tiện, trong đó
các yếu tố hình ảnh đa
dạng như video, đồ họa,
văn bản và hoạt ảnh
được sắp xếp trong
không gian màn hình
của một 16:9 khung tivi.
trong khi không một yếu
tố hình ảnh, âm thanh
cũng có mặt, làm tăng
thêm sự phong phú của
đa phương tiện kinh
nghiệm.
 Thiết Kế Trang Đa Phương Tiện
SƠ ĐỒ GUTENBERG
Trong những ngày đầu in ấn, bố cục trang có
mật độ văn bản dày đặc. Mặc dù các hệ
thống in ban đầu, như máy in Gutenberg, có thể
dễ dàng sản xuất hàng loạt việc chuyển các dạng
chữ trên giấy, nhưng chúng không được
trang bị để tái tạo tác phẩm nghệ thuật, hình
minh họa hoặc các yếu tố hình ảnh khác thường
được sử dụng ngày nay để chia nhỏ. dòng chảy
nặng nề của văn bản in. Nếu bao gồm tác phẩm
nghệ thuật, nó được vẽ bằng tay sau khi các
trang được in.
Biểu đồ Gutenberg là một mô hình theo dõi bằng
mắt nguyên thủy được sử dụng để hiển thị cách
người đọc lướt qua một trang bao gồm toàn bộ văn
bản được phân bổ đều (xem Hình 5.2).
HÌNH 5.2
CHƯƠNG 5 129
Biểu đồ Gutenberg chia trang theo chiều ngang và chiều
dọc của trang để tạo ra bốn góc phần tư bằng nhau.
Tương tác của người đọc với văn bản bắt đầu ở góc
phần tư trên cùng bên trái của trang. Đây là phần chiếm
ưu thế của trang được gọi là khu vực quang học chính.
Tiếp theo, chúng di chuyển qua từng dòng văn bản, từ
trái sang phải, trong một loạt các lần quét ngang hoặc
quét được gọi là trục định hướng. Meta- về mặt ngữ
pháp, việc đọc tác động một lực hấp dẫn lên người dùng
liên tục đẩy ánh mắt của họ xuống dưới và sang phải.
Kết quả là mắt liên tục được dẫn dọc theo một đường
chéo từ vùng quang học chính ở phần trên cùng bên trái
của trang đến vùng cuối nằm ở dưới cùng bên phải. Khu
vực hoang hoá mạnh (ở phía trên bên phải) và khu vực
hoang hoá yếu ( ở phía dưới bên trái) nằm ngoài con
đường này và do đó, bị giảm hạng về mặt ảnh hưởng thị
giác của chúng. Người đọc thường ít chú ý hơn đến nội
dung đực đặt trong các vùng này của trang
 Thiết Kế Trang Đa Phương Tiện CHƯƠNG 5 130
ĐỘT PHÁ RA KHỎI HỘP
Bố cục của một trang ảnh hưởng trực tiếp đến cách người dùng quét nội dung
của nó. Khi các thiết kế trang đã chuyển từ dạng in sang dạng kỹ thuật số và
từ các bố cục dựa trên văn bản nặng nề sang các thiết kế năng động trực quan
với nội dung đa phương tiện, người dùng đã áp dụng các phương pháp phức
tạp hơn để quét các trang. Hai phương pháp quét quen thuộc thường được nói
đến liên quan đến cách người dùng tương tác với các trang web trực tuyến.
BỐ CỤC F
Bố cục chữ F là một trong những bố cục trang phổ biến nhất trên Web. Như tên
cho thấy, cái nhìn của người đọc được hướng qua trang theo một mẫu giống như
chữ F (xem Hình 5.3). Như với hầu hết các bố cục, bố cục này khuyến khích
người dùng bắt đầu đọc ở phần trên cùng bên trái của trang. Sau đó, người
dùng tiến hành quét toàn bộ từ trái sang phải qua hàng thông tin hình ảnh đầu
tiên của thông tin.
 Thiết Kế Trang Đa Phương Tiện CHƯƠNG 5 131

Tiếp theo, người dùng thực hiện quét một phần hàng thứ hai. Đường chuyền
này hiếm khi kéo dài đến cuối dòng hoặc cột. Mỗi hàng thông tin tiếp theo
được quét theo từng đợt ngắn từ trái sang phải khi người dùng ổn định nhịp
điệu và khuôn mẫu bình thường để xử lý nội dung chính trên trang.

HÌNH 5.3
Trang chủ của Thư
viện Quốc hội có
thiết kế bố cục chữ F
cổ điển. Một thanh
bên dọc nổi bật dọc
theo cạnh trái của trang
đóng vai trò là điểm
neo trực quan cho mắt
khi người dùng quét từ
trái sang phải theo các
đợt ngắn dần từ trên
xuốn gđáy.
 Thiết Kế Trang Đa Phương Tiện CHƯƠNG 5 132

Con người là sinh vật của thói quen. Vì lý do này, mẫu F là một định dạng quá
quen thuộc đối với những người dành bất kỳ khoảng thời gian nào trước máy
tính để lướt Web. Chúng ta đã quen với việc thông tin quan trọng nhất được đặt
dọc theo cạnh trên cùng của trang, thường ở dạng tiêu đề bắt mắt hoặc đồ họa
biểu ngữ. Tiêu đề cung cấp các dấu hiệu trực quan quan trọng về nội dung của
trang. Nó có thể được quét nhanh chóng và thường sẽ ảnh hưởng đến bước tiếp
theo của người dùng. Liệu sẽ tiếp tục quét hay thoát khỏi trang? Hàng thứ hai
của trang web thường chứa các lời nhắc điều hướng như nút menu hoặc siêu liên
kết. Nếu lần quét đầu tiên thực hiện công việc của nó bằng cách thu hút sự chú ý
của người dùng, thì lần quét thứ hai sẽ mang nhiều ý nghĩa hơn khi người đó tìm
cách hiểu cách tổ chức trang và nội dung trang. Thanh bên dọc theo cạnh trái của
trang thường xuất hiện ở lần quét thứ ba. Nó kéo ánh nhìn của người dùng về
phía cạnh trái của cửa sổ tài liệu, hướng xuống một loạt hoạt động quét ngắn
hơn. Nghiên cứu cho thấy rằng bố cục phù hợp với mẫu F sẽ nâng cao khả năng
sử dụng của trang, giúp người dùng dễ dàng thu thập thông tin theo cách phù
hợp.
HÌNH 5.4
Trang chủ Smithsonian
Bố cục Z trong hình ở đây
Một định dạng ít phổ biến hơn, bố cục Z là một biến thể của Sơ đồ hướng mắt người dùng
Gutenberg (xem Hình 5.4). Quá trình quét bắt đầu bằng việc quét trực quan toàn qua trang dọc theo
đường dẫn hình chữ Z.
bộ hàng trên cùng của trang. Lần quét thứ hai chạy theo đường chéo qua giữa Bạn có thể xác định vị
trang trong trí các ví dụ khác về bố
cục F và bố cục Z đang
hoạt động không?
 Thiết Kế Trang Đa Phương Tiện CHƯƠNG 5 133

một chuyển động đi xuống về phía góc dưới bên trái. Lần quét cuối cùng là
quét ngang qua cuối trang. Các yếu tố trực quan quan trọng nên được đặt dọc
theo đường đi của chữ Z. Trong khi bố cục Z gợi ý một đường ngoằn ngoèo
cứng nhắc, các góc của mẫu Z có thể được làm mềm để tạo cảm giác đường
cong chữ S hữu cơ hơn. Bố cục chữ Z hoạt động tốt nhất khi một phần tử
hình ảnh hoặc vùng nội dung lớn (như một bức ảnh đơn hoặc dựng phim )
được đặt ở giữa trang, giữa hai hàng thông tin tuyến tính. Đó là một bố cục
đơn giản để tạo và có thể được sử dụng hiệu quả cho các trang chỉ chứa một
số yếu tố chính cần được truyền đạt nhanh chóng mà không có nhiều sự lộn
xộn về mặt hình ảnh.

Ý TƯỞNG TUYỆT VỜI

Phân cấp trực quan
Thuật ngữ phân cấp thị giác đề cập đến thứ tự cảm nhận của nội dung trong một trang bởi
người đọc. Một trang chỉ bao gồm văn bản có khoảng cách đều nhau và kích thước đồng đều
được coi là mặt phẳng. Trong một thiết kế như vậy, mọi từ đều có trọng lượng như nhau, và
do đó không có gì hiện lên đầu tiên trong nhận thức của người đọc. Tuy nhiên, khi một số từ
hoặc các cụm từ được tách biệt theo phong cách bằng cách sử dụng các nguyên tắc của thiết
kế bao phủ trong Chương 4,“Truyền thông trực quan,”chẳng hạn như căn chỉnh, màu sắc,
điểm nhấn, tỷ lệ, v.v., chúng sẽ được thể hiện trên nền của trang, làm nổi bật sự thu hút.

Tiêu đề trang (Mathead)

tiêu đề 1

Hình
ảnh

tiêu đề 2

Hình ảnh

tiêu đề 3

Không có phân cấp thị giác Với phân cấp trực quan
HÌNH 5.5
Hệ thống phân cấp trực quan được xây dựng chu đáo có thể cải thiện thứ tự và luồng nội
dung trên mộttrang đa phương tiện.
 Thiết Kế Trang Đa Phương Tiện CHƯƠNG 5 134

Thuật ngữ chunking

Một trong những cách dễ nhất để bắt đầu thiết lập hệ thống phân cấp trực
quan trong một trang là chia nhỏ các khối nội dung lớn thành các phân đoạn
hoặc khối nhỏ hơn. Bản sao nội dung là văn bản chính của một tài liệu hoặc
quảng cáo được xuất bản và nó thường là nguồn nội dung phong phú nhất
trên một trang. Chunking là một phương pháp liên quan đến việc hợp nhất
trực quan các câu hoặc ý tưởng có liên quan thành các khối thông tin nhỏ có
thể được hiểu nhanh chóng và dễ dàng. Đoạn văn là một công cụ chunking
phổ biến, cũng như danh sách, chú thích và văn bản. Từ quan điểm của người
tiêu dùng, chunking giống như ăn bít tết. Thịt sẽ dễ ăn hơn sau khi được cắt
thành những miếng nhỏ vừa ăn. Đặt quá nhiều văn bản trên màn hình cùng
một lúc hoặc trong một vùng cụ thể của trang có thể lấn át các giác quan và
dẫn đến mỏi mắt. Người đọc có thể nhanh chóng mệt mỏi hoặc mất hứng thú.
Chunking rất được khuyến khích khi viết bản sao cho tiêu dùng đa phương
tiện, vì việc đọc trên màn hình kỹ thuật số có độ phân giải thấp khó hơn đọc
cùng một văn bản trong một ấn phẩm in có độ phân giải cao. Chunking làm
giảm mật độ trực quan của văn bản trên một trang. Nó biến đổi các từ và câu
khó sử dụng thành các gói thông tin trực quan có thể quản lý được.

Tiêu đề
Điều tiếp theo bạn có thể làm để mang lại trật tự và cấu trúc cho việc trình bày
văn bản là thêm tiêu đề phần và tiêu đề phụ. Tiêu đề là một tiêu đề mô tả ngắn
hoặc phụ đề được sử dụng để đánh dấu phần đầu của một đoạn văn hoặc khu vực
nội dung. Các tạp chí và báo chí thường xuyên sử dụng các tiêu đề để phân biệt
các thông tin và cung cấp cho độc giả một gợi về nội dung ngắn gọn khi họ lướt
qua trang để tìm những gì họ quan tâm nhất. Trong một tờ báo, câu chuyện quan
trọng nhất trong ngày được hiển thị nổi bật bằng cách đặt nó trên trang nhất,
trong màn hình đầu tiên và dưới một loại đặc biệt được gọi là tiêu đề. Dòng tiêu
đề sử dụng kiểu phông chữ lớn nhất và đậm nhất trên trang. Những thông tin ít
quan trọng hơn được gắn vào các tiêu đề hoặc tiêu đề phụ nhỏ dần.
Trong thiết kế trang web, HTML chỉ định sáu cấp độ tiêu đề, được xác định
bằng các thẻ <h1>, <h2>, <h3>, <h4>, <h5> và <h6> (xem Hình 5.6). Đầu
đề 1 là lớn nhất và thường được sử dụng cho tiêu đề chính để xác định tiêu đề
của một trang. Các khu vực nội dung theo phần thường bắt đầu bằng tiêu đề
2 hoặc tiêu đề 3. Các tiểu mục trong mỗi khu vực có thể được mô tả thêm
bằng các tiêu đề từ 4 đến 6. Để phân biệt chúng với phần nội dung, các tiêu
đề được đặt ở phông chữ và độ đậm lớn hơn, thường là từ 24pt xuống 10pt
trong những bước tăng dần giảm dần. Tuy nhiên, các tiêu đề có thể được tùy
chỉnh theo bất kỳ kích thước nào. Chúng cũng có thể được chỉ định một kiểu
chữ, màu sắc hoặc đường viền tùy chỉnh (xem Hình 5.7). Điều quan trọng là
giữ cho các kiểu tiêu đề nhất quán trong trang và trên một loạt các trang được kết
nối. Ví dụ: tiêu đề 1 sẽ trông giống nhau trên trang 1 cũng như khi được sử dụng
lại trên trang 2 và 3; làm như vậy củng cố nguyên tắc thiết kế lặp lại.
 Thiết Kế Trang Đa Phương Tiện CHƯƠNG 5 135

Đề 1 (loại 24 điểm)
Sed in dui diam, ut cursus velit. Sed nec ornare arcu. Pellentesque suscipit lectus non libero vestibulum
rutrum quis quis ligula.

Đề 2 (loại 18 điểm)
Sed in dui diam, ut cursus velit. Sed nec ornare arcu. Pellentesque suscipit lectus non libero vestibulum
rutrum quis quis ligula.

Đề 3 (loại 14 điểm)
Sed in dui diam, ut cursus velit. Sed nec ornare arcu. Pellentesque suscipit lectus non libero vestibulum
rutrum quis quis ligula.

HÌNH 5.6
HTML chỉ định sáu cấp độ tiêu đề
với kích thước mặc định nhỏ dần từ
đầu đến cuối.
Đề 4 (loại 12 điểm)
Sed in dui diam, ut cursus velit. Sed nec ornare arcu. Pellentesque suscipit lectus non libero vestibulum
rutrum quis quis ligula.
Đề 5 (loại 10 điểm)
Sed in dui diam, ut cursus velit. Sed nec ornare arcu. Pellentesque suscipit lectus non libero vestibulum rutrum quis quis ligula.
Đề 6 (loại 8 điểm)
Sed in dui diam, ut cursus velit. Sed nec ornare arcu. Pellentesque suscipit lectus non libero vestibulum rutrum quis quis ligula.

HÌNH 5.7
Các tiêu đề thường
được thiết kế tùy
chỉnh như một phần
của chủ đề tổng thể
của một bố cục trang.
Các nguyên tắc liên kết,
gần gũi và lặp lại là
những thành phần quan
trọng để tạo ra một ý
nghĩa và thẩm mỹ làm
hài lòng hệ thống phân
cấp thị giác.
 Thiết Kế Trang Đa Phương Tiện CHƯƠNG 5 136

Ý TƯỞNG TUYỆT VỜI

Tỷ lệ vàng
Tỉ lệ vàng là một cấu trúc đã được sử dụng rộng rãi để xác định tỷ lệ của một
không gian trực quan. Nó có thể được nhìn thấy trong kiến trúc, hội họa, in ấn
và nhiếp ảnh, và gần đây hơn là trong các phương tiện truyền thông mới và
Web. Cũng được gọi là Tỷ lệ thần thánh, tỷ lệ được xác định bởi hằng số Phi
hoặc1.61803. Theo tỷ lệ, nó gợi ý rằng không gian thị giác tối ưu là một hình
chữ nhật có chiều cao dài gấp rưỡi chiều rộng của nó một chút (xem Hình 5.8).
Phần lớn các cuốn sách được in trước năm 1800 đều tuân theo Tỷ lệ vàng, vốn
đã phục vụ trong nhiều thế kỷ như một tiêu chuẩn gần như phổ quát cho tỷ lệ
trang. Dù theo hướng ngang hay dọc, con người có xu hướng thích các trang và
màn hình trực quan gần gũi với nhau phản ánh Tỷ lệ vàng. Vì lý do này, nó vẫn
được nhiều người sử dụng hiện nay. Tỷ lệ vàng đã ảnh hưởng lớn đến việc thiết
kế không gian và được sử dụng trong thiết kế đa phương tiện.

HÌNH 5.8
Dạng xoắn ốc của vỏ nautilus gần giống vớiPhi, con số vàng.

SỰ HỖN LOẠN
Hãy tưởng tượng trong giây lát rằng bạn sống trong một ngôi nhà chỉ có bốn
bức tường. Bạn bước qua cửa trước và vì không có vật cản tầm nhìn nên bạn
có thể nhìn thấy toàn bộ diện tích của ngôi nhà. Không có phòng khách,
không có phòng ngủ,
 Thiết Kế Trang Đa Phương Tiện CHƯƠNG 5 137

HÌNH 5.9
Nhìn chằm chằm vào một trang trống giống như bước vào một ngôi nhà không có tường. Bắt đầu từ đâu? Đối với một nhà thiết kế,
bước đầu tiên là chia nhỏ không gian đơn nhất rộng lớn của một trang trống thành các vùng có thể chỉnh sửa nhỏ hơn để có thể sắp xếp
và sắp xếp riêng lẻ.

không có phòng tắm, nhà bếp, tủ quần áo hay nhà để xe—chỉ là một khu vực
rộng lớn của không gian không bị gián đoạn. Một ngôi nhà như thế này
không có không gian xác định bên trong có thể được sắp xếp hoặc trang trí
độc lập. Thay đổi một khu vực trong nhà sẽ ảnh hưởng đến toàn bộ ngôi nhà,
bởi vì về mặt không gian, mọi thứ đều được kết nối với nhau. Rất ít kiến trúc
sư sẽ thiết kế một ngôi nhà như thế này, và nếu được lựa chọn, hầu hết mọi
người sẽ không muốn sống trong đó. Các bức tường và các phòng của một
ngôi nhà là các tính năng chức năng tạo ra trật tự và ý nghĩa cho những người
ở trong đó. Không có chúng, ngôi nhà sẽ trông trống rỗng và trống trải hoặc
thường xuyên bừa bộn và vô tổ chức.
Một trang trống giống như một ngôi nhà không có tường. Nó là một lớp vỏ
hai chiều trống rỗng với các ranh giới cố định ở bốn phía (xem Hình 5.9).
Một trong những điều đầu tiên mà một nhà thiết kế trang phải làm là chia nhỏ
sự đơn nhất của một trang trống thành các vùng mô-đun có thể được quản lý
độc lập và phổ biến nội dung. Khi bạn làm quen với một số chương trình
thiết kế và quy trình công việc khác nhau, bạn sẽ thấy rằng mỗi chương trình
sử dụng các thuật ngữ và kỹ thuật hơi khác nhau để chia trang thành các
vùng mô-đun. Chúng ta không thể đi sâu vào tất cả các phương pháp và ứng
dụng cụ thể ở đây mà thay vào đó sẽ giải quyết một số khái niệm chung và
cung cấp một vài ví dụ.
Hệ thống lưới
Các hệ thống lưới typographic là một công cụ khái niệm phổ biến để chia các
trang thành các phần nhỏ hơn có thể chỉnh sửa. Mặc dù nhiều biến thể của hệ
thống lưới đã được hình thành, nhưng tất cả chúng đều dựa trên ý tưởng cơ
bản là sử dụng các đường ngang và dọc để chia nhỏ trang thành các đơn vị
không gian mô-đun (xem Hình 5.10)
 Thiết Kế Trang Đa Phương Tiện CHƯƠNG 5 138

HÌNH 5.10
Thiết kế của một trang web mới thường bắt đầu bằng những phác thảo đơn giản như thế này cho thấy
cáchkhông gian màn hình sẽ được chia thành các vùng nội dung khác nhau.

HỆ THỐNG LƯỚI GIẤY ĐỒ THỊ

Mặc dù được thiết kế chủ yếu để sử dụng trong kỹ thuật và toán học, giấy kẻ
ô vuông là một công cụ hỗ trợ trực quan tiện dụng mà bạn có thể sử dụng để
tạo mô hình mô phỏng các trang đa phương tiện. Giấy kẻ ô vuông được phủ
lên bằng các đường kẻ mảnh cách đều nhau ở các khoảng cách đã đặt trên
chiều rộng và chiều dài của trang. Tại Hoa Kỳ, một thương hiệu giấy vẽ đồ
thị bán sẵn thường được in với bốn đường lưới trên mỗi inch. Cấu trúc lưới
này tạo ra một trang được bao phủ từ mép này sang mép khác với một mảng
khối vuông ¼-inch.
Bước đầu tiên trong việc tạo mô hình trên giấy kẻ ô vuông là chỉ định tỷ lệ lưới
và đơn vị đo lường. Cần có một thang đo để điều chỉnh lưới giấy cho phù hợp
với thực tếkích thước của một trang kỹ thuật số như được xác định bằng pixel
(xemHình 5.11). Ví dụ, bạn có thể quyết định rằng mỗi ô vuông trên giấy biểu
đồđại diện cho một khu vực 400 pixel (20px  20px). Sử dụng tỷ lệ này, độ
dài của một đường 100 pixel có thể được biểu diễn trên giấy biểu đồ dưới
dạng một đường rộng năm đơn vị khối (5px  20px). Tương tự như vậy,
một cột rộng 200 pixel có thể được vẽ trên trang bằng cách sử dụng chiều
rộng lưới là 10 đơn vị khối. Khoảng trắng ngăn cách các thành phần trực
quan trên trang có thể được hiển thị trên lưới dưới dạng lề 20 pixel hoặc một
đơn vị khối. Trong ví dụ này, giấy biểu đồ đóng vai trò là khung khái niệm,
trên đó người thiết kế có thể chỉ định kích thước và hình dạng của các cột và
hộp được sử dụng để chứa thông tin trực quan. Được sử dụng đúng cách, lưới
có thể cung cấp cấu trúc trang thống nhất trong đó các phần tử được căn
chỉnh nhất quán và có kích thước tương ứng với toàn bộ trang và với các
phần tử khác trong không gian được chia sẻ của trang.
 Thiết Kế Trang Đa Phương Tiện CHƯƠNG 5 139

HÌNH 5.11
Giấy vẽ đồ thị có thể được sử dụng để chia một trang thành nhiều không gian con khác nhau.
 Thiết Kế Trang Đa Phương Tiện CHƯƠNG 5 140

nói chuyện công nghệ

Giải phẫu của một lướiTrong công trình chuyên đề của

lợi nhuận. Lề là khoảng trống giữa các mô-đun và các
mình về chủ đề này,Tạo và phá vỡ lưới, tác giả Ti-mô-
cạnh bên ngoài của trang hoặc vùng không gian.
thêSamara lưu ý rằng “một lưới bao gồm một tập hợp riêng
biệt các mối quan hệ dựa trên căn chỉnh đóng vai trò là
hướng dẫn để phân phối các phần tử trên một định dạng. Mọi
lưới đều chứa các phần cơ bản giống nhau, bất kể lưới trở
nên phức tạp như thế nào. Mỗi phần thực hiện một chức
năng cụ thể; các bộ phận có thể được kết hợp khi cần thiết
hoặc được loại bỏ khỏi cấu trúc tổng thể theo quyết định của
nhà thiết kế, tùy thuộc vào cách họ diễn giải các yêu cầu
thông tin của vật liệu.”1

Các bộ phận của lưới

Cột. Một cột là một không gian định hướng theo chiều dọc
màthường cao hơn là rộng. Các cột thường được sử dụng
làm vùng giữ cho văn bản chạy liên tục và thông tin hình
ảnh.
hàng. Một hàng chia không gian thành các dải ngang
chạy từ trái sang phải. Các hàng thiết lập các dòng chảy
tuyến tính có thể giúp hướng mắt người đọc qua một
thiết kế.
mô-đun. Mô-đun là một đơn vị không gian hình vuông đồng
nhất được tạo bởi giao điểm của các đường vuông góc trong
một lưới. Một cách độc lập, các mô-đun là không gian nhỏ
nhấtđơn vị trong một lưới.
Vùng không gian. Một vùng không gian được hình thành
khi hai hoặc nhiều mô-đun được nhóm lại với nhau.
Vùng không gian có thể lớn hoặc nhỏ, hình vuông hoặc
hình chữ nhật. Có vô số cách mà các mô-đun có thể
được kết hợp để tạo thành các vùng không gian có hình HÌNH 5.12
dạng và kích cỡ khác nhau. Lưới Typographic.

1
Samara, T. (2002).Tạo và phá vỡ lưới.Beverly, MA: Nhà xuất bản Rockport.

CẤU TRÚC LƯỚI THÔNG DỤNG

Điểm bắt đầu để thiết kế bố cục mới thường bắt đầu bằng việc xác định cấu trúc
lưới của trang. Tuy nhiên, để quá trình này thành công, người thiết kế cần có một
số ý tưởng về phạm vi, kích thước và tỷ lệ của nội dung sẽ lấp đầy trang. Sau khi
lưới được tạo và điền nội dung, lưới không thể thay đổi mà không ảnh hưởng
đến việc sắp xếp thông tin hình ảnh bên trong.
 Thiết Kế Trang Đa Phương Tiện CHƯƠNG 5 141

HÌNH 5.13
Bằng cách thay đổi
cấu trúc lưới, một
không gian thiết kế có
thể được chia nhỏ theo
vô số cách.

trang. Do đó, điều rất quan trọng là phải có một tầm nhìn và lập kế hoạch về
giao diện người dùng để biết trang sẽ trông như thế nào khi hoàn thành. Kích
thước của văn bản và đồ họa cần được thiết lập sớm để đảm bảo rằng các cột
và vùng không gian được hình thành bởi lưới được tạo đủ lớn hoặc đủ nhỏ để
chứa nội dung mong muốn. Lập kế hoạch phù hợp là điều cần thiết! Một nhà
thiết kế thận trọng sẽ hiếm khi bắt tay vào việc tạo lưới mà không suy nghĩ
cẩn thận và lâu dài về cấu trúc và nội dung dự định của trang. Với lời cảnh
báo này đã được thiết lập, chúng ta hãy xem xét ba cấu trúc lưới phổ biến
nhất được sử dụng trong thiết kế trang: (1) lưới một cột, (2) lưới nhiều cột và
(3) lưới mô-đun ( nhìn thấyHình 5.13).

CỘT ĐƠN LƯỚI

Hệ thống lưới đơn giản nhất có một cột thông tin trực quan được bao quanh
bởi các lề ở hai bên của trang. Còn được gọi là lưới bản thảo, bố cục này
thường được sử dụng để xử lý tài liệu và xuất bản sách, trong đó nội dung
chủ yếu bao gồm văn bản liên tục và ít hình ảnh. Nó là lưới đơn giản nhất để
thiết kế. Trên thực tế, nhiều chương trình, chẳng hạn như trình xử lý văn bản,
sử dụng lưới một cột làm điểm bắt đầu mặc định khi tạo tài liệu mới. Bởi vì
các định dạng một cột thường được kết hợp với bố cục dựa trên văn bản có
mật độ cao, nên chúng cũng dễ bị ảnh hưởng nhất bởi Biểu đồ Gutenberg.
 Thiết Kế Trang Đa Phương Tiện CHƯƠNG 5 142

MULTICOLUMN LƯỚI
Lưới nhiều cột chia trang với các phân chia theo chiều dọc từ trái sang phải,
mang lại sự linh hoạt hơn cho việc tích hợp văn bản và đồ họa trong trang.
Lưới nhiều cột có nhiều loại, trong đó định dạng hai và ba cột là phổ biến
nhất. Việc thiết lập hệ thống phân cấp trực quan được thực hiện dễ dàng hơn
trong lưới nhiều cột vì các cột có thể được chỉ định các vai trò khác nhau để
xử lý các loại nội dung khác nhau. Ví dụ: trên một trang web, một cột thanh
bên hẹp có thể được sử dụng cho các đoạn thông tin trực quan nhỏ như liên
kết, nút menu và các đoạn văn bản ngắn mà người dùng có thể quét nhanh.
Một cột rộng hơn có thể chứa văn bản đang chạy để hiển thị nội dung chính
của trang. Các cột có thể có chiều rộng bằng nhau hoặc khác nhau. Chúng có
thể độc lập với các cột khác trên trang hoặc được kết nối,
Với lưới nhiều cột, văn bản không còn cần phải chạy theo dòng liên tục
không bị gián đoạn từ đầu trang đến cuối trang. Các cột có thể chứa không
gian âm, tiêu đề và hình minh họa, cho phép văn bản dừng và tiếp tục khó
đoán hơn tại các điểm khác nhau trên trang. Tất cả mọi thứ đều bình đẳng,
việc đọc văn bản trên màn hình máy tính được cải thiện khi nó được định
dạng thành các cột, trái ngược với việc chạy trên toàn bộ chiều rộng của màn
hình. Làm như vậy sẽ thay đổi điểm bắt đầu và điểm dừng trên một đường
thẳng, giảm khoảng cách mà mắt phải di chuyển qua lại với mỗi lần quét.
Đối với màn hình nhỏ hơn, chẳng hạn như màn hình trên điện thoại thông
minh và máy đọc sách, bố cục một cột có xu hướng phổ biến hơn.

nói chuyện công nghệ

Đồ họa nội tuyến và nổiMỘTđồ họa nội tuyếnlà một hình
ảnh hoặc hình minh họa được chèn vào một cột hoặc vùng
không gian dựa trên văn bản. Theo mặc định, một đồ họa nội
tuyến hoạt động giống như một ký tự văn bản. Nó phân chia
dòng tại điểm chèn, đẩy văn bản liền kề sang bên phải và do
đó tạo ra một khoảng trống trong dòng để nó nằm trong đó.
Kích thước của khoảng trống phụ thuộc vào chiều rộng của
hình ảnh. Phần dưới cùng của đồ họa trong dòng căn chỉnh
với đường cơ sở của văn bản mà nó được nối vào. Nếu chiều
cao của đồ họa trong dòng bằng chiều cao của dòng thì bố
cục của đoạn văn hoặc cột sẽ không bị ảnh hưởng nhiều. Tuy
nhiên, đồ họa thường vượt quá chiều cao của các dòng mà
chúng được kết hợp. Khi điều này xảy ra, chiều cao của dòng
(hoặchàng đầu) sẽ tự độngmở rộng để phù hợp với chiều cao
của hình ảnh nội tuyến. Điều này làm tăng khoảng trắng xung
quanh hình ảnh và có thể
gây hậu quả ngoài ý muốn ảnh hưởng đến bố cục của trang.
Để khắc phục sự cố này, nhiều chương trình bố trí, bao gồm
CSStiêu chuẩn trong thiết kế trang web, cung cấp một tính năng
gọi làhình ảnh nổi.Khi một đồ họa nội tuyếnđược thả nổi, văn
bản xung quanh sẽ bao quanh nó ở bên trái và/hoặc bên phải, tạo
ra sự tương tác dễ chịu hơn giữa hai bên. Di chuyển một đồ họa
sang bên trái sẽ khóa nó vào cạnh trái của cột,làm cho văn bản
bao quanh nó ở bên phải. Thả nó sang bên phải mang lại tác
dụng ngược lại. Nổi một hình ảnh trongtrung tâm làm cho văn
bản bao quanh nó đều ở hai bên. Sau khi hình ảnh được thả nổi,
thông thường nên thêm phần đệm giữa hình ảnh, văn bản và các
cạnh cột.Phần đệm thêm không gian âm và khoảng trống cho
sự kết hợp hình ảnh và văn bản mới hình thành (xemHình
5.14).
 Thiết Kế Trang Đa Phương Tiện CHƯƠNG 5 143

HÌNH 5.14
Ảnh trong dòng đẩy văn bản xuống dưới (trái), dẫn đến bố c ục trang không mong muốn với quá nhi ều kho ảng tr ắng. B ố c ục tr ực quan d ễ ch ịu
hơn (bên phải) đạt được khi bức ảnh được “nổi”, buộc văn bản bao quanh nó trên đóphía đối diện.

MÔ-ĐUN LƯỚI
Lưới mô-đun bao gồm các phân chia theo chiều dọc cách đều nhau từ trái sang
phải cũng như các phân chia theo chiều ngang từ trên xuống dưới (xemHình
5.15). Với cấu trúc lưới này, các nhà thiết kế có thể tự do tạo các vùng không
gian, các không gian thiết kế theo kiểu mô-đun có thể trải dài theo chiều rộng
của nhiều cột. Các vùng không gian thêm các dòng chảy ngang vào một trang
bằng cách chia nhỏ các không gian cột thành các hàng. Với các vùng không gian,
các nhà thiết kế có thể thoát khỏi luồng nội dung tuyến tính thuần túy theo cả hai
hướng. Lưới mô-đun là loại phức tạp và khó xây dựng nhất. Tuy nhiên, chúng
cũng có xu hướng trở nên năng động và thú vị nhất khi làm việc.

Những cái bàn

Bảng là một lưới hình chữ nhật bao gồm các vùng có thể chỉnh sửa được gọi là
các ô. Tương tự như hệ thống lưới typographic, các ô được hình thành bởi giao
điểm của các cột và hàng. Tuy nhiên, đây là nơi mà sự giống nhau kết thúc. Lưới
typographic hoàn toàn là một khung khái niệm nằm dưới cấu trúc của một trang.
Nó là một nền tảng cố định
Thiết Kế Trang Đa Phương Tiện CHƯƠNG 5 144

HÌNH 5.15
Quan sát cách các tiêu
đề và lưới mô-đun phối
hợp với nhau để chia
nhỏ bản trình bày
thông tin trực quan trong
mô hình này của một tờ
báo truyền thốngcách
trình bày.
 Thiết Kế Trang Đa Phương Tiện CHƯƠNG 5 145

của mô-đun sẽ không thay đổi khi cấu trúc trang trên đầu nó được hình thành
và sửa đổi. Mặt khác, một bảng là một phần vật lý của trang. Nó là một thành
phần thuật toán được tạo và sửa đổi từ bên trong chương trình tạo trang.
Bảng là một cấu trúc linh hoạt mở rộng và co lại để phù hợp với vị trí của nội
dung trong các ô của nó.
Các bảng có thể được chia nhỏ thành các nhóm hàng và nhóm cột. Trước khi
phát triển Cascading Style Sheets (CSS), một chủ đề được thảo luận
trongChương 7 Các bảng “Thiết kế web” thường được sử dụng để phân chia
khu vực của một trang web theo cấu trúc. Mặc dù World Wide Web Consortium
(W3C) không còn khuyến khích thực hành này, các bảng vẫn có thể được sử
dụng “để sắp xếp dữ liệu—văn bản, văn bản được định dạng sẵn, hình ảnh, liên
kết, biểu mẫu, trường biểu mẫu, các bảng khác, v.v.—thành các hàng và cột của
các ô” trong một trang hoặc tiểu mục khu vực.2

BẢNG XÁC ĐỊNH

Một bảng được xác định bởi số lượng cột, hàng và ô mà nó chứa. Một bảng
có một cột và một hàng (11) tạo ra một ô hoặc một vùng để lưu trữ thông
tin trực quan. Một bảng có ba cột và bốn hàng (34) tạo ra mười hai ô. Càng
nhiều cột và hàng trong ma trận bảng, bạn càng phải làm việc với nhiều ô.

TÁCH VÀ HỢP NHẤT CÁC TẾ BÀO

Các ô của bảng có thể được tách hoặc hợp nhất để tạo ra các cấu trúc bảng rất
phức tạp. Tách là quá trình chia một ô thành nhiều hàng và/hoặc cột. Sáp
nhập là quá trình hợp nhất nhiều ô lại thành một cấu trúc ô duy nhất. Ví dụ:
đây là các bước bạn sẽ thực hiện để chuyển đổi bảng 2 3 đơn giản, trong
hìnhBảng 5.1, vào cấu trúc phức tạp hơn được hiển thị trongBảng 5.2.
Bước 1: Bắt đầu bằng cách chèn bảng 23 vào trang.
Bước 2: Chia ô số 1 (cột đầu tiên, hàng đầu tiên) thành bốn hàng.
Bước 3: Chia ô số 2 (cột thứ hai, hàng đầu tiên) thành hai cột.
Bước 4: Hợp nhất các ô #3 và #4 (hàng thứ hai).
Bước 5: Hợp nhất các ô #5 và #6 (hàng thứ ba).
Bước 6: Chia ô vừa gộp được tạo ở Bước 5 thành 3 cột.

Bảng 5.1 Một bảng 23 đơn giản với hai cột và ba hàng

ô số 1 ô số 2
ô số 3 ô số 4
ô số 5 ô số 6

Khuyến nghị của W3C: Bảng trong Tài liệu HTML. (2011). Lấy ra từhttp://www.w3.org/
2

TR/html4/struct/tables.html.
 Thiết Kế Trang Đa Phương Tiện CHƯƠNG 5 146

Hệ thống lưới 10 ô được tạo bằng cách tách và hợp nhất các ô
Bảng 5.2 trong bảng 23

1. Căn trái
2. Căn giữa
3. Căn phải
4. Chiều cao của ô này tự động tăng
lên khi có nhiều nội dung hơn được
đặt vào ô. Lorem ipsum dolor sit 5 6
amet, consectetur adipiscing elit.
Aenean eu tortor sit amet libero
placerat tình dục và ngồi amet
metus. Ut malesuada dolor sed leo
imperdiet feugiat.

7
số 8 9 10

Bảng 5.3 Sử dụng Bảng 32 để Tạo Bố cục Ba Cột Đơn giản

Bước 1 Bước 2 Bước 3

Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Aenean hàng hóa ligula eget dolor.
Aenean massa. Cum sociis natoque
penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
Donec quam felis, ultricies nec,
pellentesque eu, pretium quis, sem.
Nulla dosequat massa quis enim.
Donec pede justo, fringilla vel,
aliquet nec, vulputate eget, arcu.
Trong enim justo, rhoncus ut,
imperdiet a, venenatis vitae, justo.
Nullam dictum felis eu pede mollis
pretium. Inte-
sự cố xảy ra. Cras dapibus.
Vivamus elementum semper
nisi. Aenean vulputate eleifend
Tellus. Aenean leo ligula,
porttitor eu, consequat vitae,
eleifend ac, enim.
Aliquam lorem ante, dapibus in,
viverra quis, feugiat a, tellus.
Phasellus viverra nulla ut metus
varius laoreet. Chế độ ăn kiêng
Aenean. Curabitur ullamcorper siêu
cie nisi. Nam eget dui. Etiam
rhoncus. Maecenas tempus, tellus
eget condimentum rhoncus, sem
quam semper libero, sit amet
adipiscing sem neque sed ipsum.

Như bạn có thể thấy, nội dung của mỗi ô có thể được định dạng độc lập. Các
ô 1–4 có văn bản màu đen phát hành tiêu chuẩn trên nền trắng. Trong ô 5,
văn bản màu trắng được đảo ngược trên nền đen. Căn chỉnh văn bản, kiểu,
phần đệm và đường viền có thể được tùy chỉnh ở cấp độ bảng hoặc ô, tạo ra
nhiều khả năng cho tổ chức trực quan. Theo mặc định, viền bảng được bật.
Giữ cho đường viền bảng có thể nhìn thấy được trong bố cục trang có thể thu
hút sự chú ý không mong muốn vào cấu trúc bên dưới của lưới. Tắt đường
viền che lưới và thường giúp giảm phiền nhiễu do phân chia rõ ràng.Bảng
5.3hiển thị một bố cục ba cột đơn giản sử dụng cấu trúc bảng 32.
 Thiết Kế Trang Đa Phương Tiện CHƯƠNG 5 147

nói chuyện công nghệ

Mô hình hộp CSSMô hình Hộp CSS được tạo ra để cung

ranh giớithường là một đường liền nét, nhưng có thể chỉ định các
cấp cho các nhà thiết kế web quyền kiểm soát tốt hơn đối với
kiểu đường khác (chấm, đứt, rãnh, v.v.). cạnh lềbao quanh hộp
việc trình bày các yếu tố hình ảnh trong một trang. Trong
và chiều rộng của nó xác định khoảng trắng được đặt giữa
CSS, bất cứ khi nào một thành phần văn bản hoặc hình ảnh
bên ngoài hộp và các phần tử liền kề trong trang hoặc vùng
được thêm vào trang, nó sẽ được đặt trong một khu vực hoặc
không gian. Giá trị hộp CSS có thể được áp dụng thống nhất
hộp không gian có thể xác định. Hộp có các giá trị thuộc tính
cho cả bốn mặt của một phần tử hoặc riêng lẻ cho một hoặc
có thể được điều chỉnh để thay đổi phần đệm, đường viền và
nhiều mặt cùng một lúc. Ví dụ: để chèn một đường ngang bên
lề xung quanh phần tử.đệmđề cập đến lượng khoảng trắng giữa
dưới một thành phần hộp, chẳng hạn như tiêu đề hoặc chú
mép ngoài của nội dung và đường viền của nó. Với phần đệm
thích, thuộc tính đường viền có thể được đặt thành "trung
được đặt thành 0, cạnh nội dung sẽ được căn chỉnh tự động với
bình" cho cạnh dưới cùng của hộp và thành 0 cho các cạnh
đường viền. Thuộc tính đường viền có thể được đặt thành mỏng,
bên trái, bên phải và trên cùng.
trung bình hoặc dày hoặc theo bất kỳ chiều rộng cụ thể nào. Các

HÌNH 5.16
Mô hình hộp CSS.

MẪU TRANG
Trừ khi bạn là một nhà thiết kế đồ họa hoặc nhà tổng hợp trang có kinh
nghiệm, nếu không bạn có thể thiếu các kỹ năng cần thiết để thiết kế các bố
cục trang phức tạp từ đầu. May mắn thay, nhiều chương trình đi kèm với các
mẫu bố cục hoặc biểu định kiểu có thể được sử dụng để tạo hệ thống lưới của
trang. Mẫu trang cung cấp sự phân chia cấu trúc, cách phối màu và định dạng
chung cho bố cục trang và nội dung của nó (xemHình 5.17 Và5.18). Các
vùng nội dung của mẫu ban đầu được lấp đầy bằng văn bản và hình ảnh giữ
chỗ. Tài liệu giữ chỗ cuối cùng sẽ được hoán đổi với nội dung thực tế của
người dùng mẫu. Các câu và đoạn văn bằng tiếng Latinh vô nghĩa thường
được sử dụng cho văn bản giữ chỗ (còn được gọi là văn bản bổ sung hoặc
văn bản giả).
Với các mẫu, bạn thường nhận được những gì bạn phải trả cho. Các mẫu đi
kèm với phần mềm của bạn hoặc những mẫu được tải xuống miễn phí từ
Internet thường không được thiết kế đẹp hoặc phức tạp như những mẫu bạn
 Thiết Kế Trang Đa Phương Tiện CHƯƠNG 5 148
có thể nhận được từ thiết kế thương mại
 Thiết Kế Trang Đa Phương Tiện CHƯƠNG 5 149

các công ty. Mặc dù các chuyên gia có xu hướng ngại sử dụng các mẫu trong
công việc thương mại, nhưng đôi khi không có đủ thời gian hoặc tiền của khách
hàng để cung cấp một thiết kế tùy chỉnh từ đầu đến cuối. Nếu bạn phải sử dụng
một mẫu, hãy dành thời gian nghiên cứu các tùy chọn của bạn. Các mẫu thương
mại không quá đắt và có thể cung cấp cho bạn nhiều lựa chọn và tùy chọn hơn.
Ngoài ra, hãy chống lại sự cám dỗ để chấp nhận một cách mù quáng cách phối
màu và định dạng được bao gồm trong mẫu theo mặc định. Hầu hết các mẫu
cung cấp cho bạn một số thời gian trong việc tùy chỉnh chủ đề và nội dung của
trang. Hãy tận dụng điều này bằng cách đẩy mẫu ra xa nhất có thể. Hãy nhớ
rằng: nếu bạn đã tìm thấy mẫu, thì có khả năng người khác cũng đã tìm thấy mẫu
đó. Để làm cho phiên bản mẫu của bạn nổi bật so với công việc của người khác,

TRANG TĨNH VÀ ĐỘNG

Một trang tĩnh cung cấp bố cục và nội dung trang giống nhau cho mọi người
dùng đang xem trang. Nó cũng có thể đề cập đến một trang có nội dung hiếm khi
được cập nhật. Nhiều doanh nghiệp và tổ chức nhỏ muốn có sự hiện diện trên
Web nhưng không có nguồn tài chính hoặc nhân sự để giữ cho trang web được
cập nhật hoặc thực hiện các thay đổi đối với trang web một cách thường xuyên.
Đối với một số người, một trang web bao gồm các trang tĩnh với nội dung chung
chung không ghi ngày tháng là lựa chọn duy nhất mà họ có. Trang giật gân là
một trang web tĩnh thường xuất hiện trong thời gian ngắn trước khi người dùng
được cấp quyền truy cập vào trang chủ. Đôi khi nó được sử dụng như một trình
giữ chỗ trực quan trong khi trang chính đang được tải. Khái niệm tương tự được
sử dụng trong thiết kế trò chơi và tác giả DVD. Các DVD thương mại thường
buộc người xem phải xem thông báo bản quyền toàn màn hình trước khi cấp cho
họ quyền truy cập vào menu chính. Tương tự như vậy, một loạt màn hình giật
gân là khúc dạo đầu phổ biến để vào giao diện chính hoặc màn hình menu của
chương trình trò chơi. Và ai chưa từng thấy các biểu tượng Microsoft Windows
và Apple quá quen thuộc nhấp nháy trên màn hình khi khởi động máy tính hoặc
thiết bị di động? Đôi khi đơn giản như vậy, ai đó phải được trả tiền để thiết kế
chúng. Đây chỉ là một vài ví dụ về cách các trang tĩnh được sử dụng trong đa
phương tiện để cung cấp thông tin cơ bản cho người dùng, theo cùng một cách,
mọi lúc.
Trang động là trang có nội dung thay đổi theo thời gian hoặc với từng trải
nghiệm xem riêng lẻ. Các trang động có thể được thay đổi thủ công thông qua
đầu vào từ tác giả hoặc người dùng cuối. Trong trường hợp thứ hai, dự báo thời
tiết trên web có thể được tùy chỉnh theo sở thích cá nhân của người dùng bằng
cách nhắc họ nhập thông tin về vị trí của họ (thành phố, tiểu bang hoặc mã bưu
chính). Với các trang web thương mại, các trang động thường được làm mới tự
động thông qua sự trợ giúp của hệ thống quản lý nội dung (CMS). CMS là một
hệ thống cơ sở dữ liệu được sử dụng để lưu trữ và quản lý nội dung của các trang
web và trang web động. Trong một hệ thống như thế này, nội dung nằm trong cơ
sở dữ liệu chứ không trực tiếp trên trang. Các trang HTML động hoạt động như
một công cụ bố cục để hiển thị nội dung CMS trên màn hình. Mặc dù nội dung
của một trang động thay đổi thường xuyên,Hình 5.19).
 Thiết Kế Trang Đa Phương Tiện CHƯƠNG 5 150

HÌNH 5.17
Mẫu trang web đi kèm với Adobe Fireworks CS5.
Thiết Kế Trang Đa Phương Tiện CHƯƠNG 5 151