Trình bày trang là một công đoạn quan trọng nhất trong thiết kế Web, đòi hỏi tính mỹ thuật và độ chính xác cao. Macromedia Dreamweaver MX 2004 cung cấp các công cụ rất tốt trong việc thiết kế và trình bày trang đó là Layout Tble và Layout Cell
1. Layout table:
Layout table là dạng biến thể của table với các thông số đi kèm như khung
viền Border=0, khoảng cách giữa các ô CellSpace =0, khoảng cách giữa nội dung trong ô và viền ô CellPad=0
Layout table dùng để phân vùng cho trang, nếu trong trang có nhiều nội dung
với những chủ đề khác nhau hoặc cần nhập nội dung với dạng cột báo chí thì dùng layout table để bố cục trang theo chủ đề được chuẩn bị trước
Layout Table dùng để bố cục trang, không dùng để chứa dữ liệu, viền khung
của Layout Table có màu xanh lá cây
Khi thiết kế dạng Layout, cần phải chuyển sang chế độ Layout view, trong
Insert Inspector, chọn tab Layout, chọn Layout mode, hoặc chọn
View Table Mode Layout Mode
2. Layout cell: Layout mode
Layout Table
Layout cell: Nằm trong Layout table, dùng để chứa dữ liệu, dữ liệu trong layout cell có thể là văn bản, hình ảnh, khi thíêt kế dạng layout cần lưu ý các layout cell phải sát nhau để tránh trường hợp làm chi trang bị nát
Một layout Table có thể chứa nhiều layout table con Mổi Layout Table gồm có nhiều dòng, mỗi dòng chứa nhiều Layout Cell, số Layout Cell trên mỗi dòng có thể khác nhau
Ví dụ:
3. Một số cách kết hợp Layout Table và Layout Cell:
Vẽ một Layout Table có kích thước đầy trang, sau đó vẽ các Layout cell bên trong
Layout Table theo đúng kích thước và yêu cầu của bố cục
Vẽ nhiều Layout Table cùng cấp
o Layout Table trên chứa chứa Logo, Banner, nút ngang.
o Layout Table ở giữa chứa nội dung văn bản, hình ảnh…
o Layout Table dưới chứa địa chỉ liên lạc, phone…
Hoặc kết hợp cả 2 cách trên, dùng 2 Layout table ngang cấp:
o Layout Table trên chứa Logo, banner, nút ngang…
o Layout Table dưới chứa 2 Layout table con, một bên trái và một bên phải…
Lưu ý :
o Khi vẽ một Layout Cell bên ngoài Layout Table thì Dreamweaver tự phát sinh
một Layout Table chứa Layout Cell đó
o Chế độ Expanded Tables : cho hiển thị khoảng cách từ nội dung trong ô đến
đường viền của Table, tiện cho việc hiệu chỉnh độ rộng của ô
Layout cell chứa dữ liệu Layout table bố cục trang
Expanded Tables Mode
Standard Mode
Ví dụ:
1)Thiết kế trang với một Layout Table chính:
Trong Document Window
Chọn tab Layout, click nút Layout Table Drag chuột vẽ trong Document
Window
Khung viền Layout Table có 3 handle dùng để thay đổi kích thước của Layout
Table, trên khung viền có số chỉ chiều rộng của Layout Table
Thiết kế trang với 3 Layout Table ngang cấp:
Thực hiện giống như trên, khi kẻ Layout Table phải bắt đầu từ biên trái trang
2) Thiết kế trang với các Layout Table lồng nhau:
Vì Macromedia Dreamweaver MX 2004 không cho phép kẻ các Layout Table phía bên phải, nên bắt buộc phải kẻ một Layout Table lớn canh trái, sau đó mới có thể kẻ lồng bên trong Layout Table lớn một Layout Table con.