Professional Documents
Culture Documents
Dịch Phần Đầu.en.Vi
Dịch Phần Đầu.en.Vi
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
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 CHƯƠNG 5 129
HÌNH 5.2
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.
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
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.
Đề 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.
HÌNH 5.6
Đề 5 (loại 10 điểm)
HTML chỉ định sáu cấp độ tiêu đề Sed in dui diam, ut cursus velit. Sed nec ornare arcu. Pellentesque suscipit lectus non libero vestibulum rutrum quis quis ligula.
với kích thước mặc định nhỏ dần từ
đầu đến cuối. Đề 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
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Ì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
1
Samara, T. (2002).Tạo và phá vỡ lưới.Beverly, MA: Nhà xuất bản Rockport.
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).
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.
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.
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 5.1 Một bảng 23 đơ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 23
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 32 để Tạo Bố cục Ba Cột Đơn giản
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 32.
Thiết Kế Trang Đa Phương Tiện CHƯƠNG 5 147
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,
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