Bài giảng Thiết kế Web tĩnh - Chương 4: Bản - Trình bày trang

Nội dung text: Bài giảng Thiết kế Web tĩnh - Chương 4: Bản - Trình bày trang

1. CHƯƠNG IV BẢNG - TRÌNH BÀY TRANG
2. I. BẢNG 1. Giới thiệu Bảng thường được sử dụng để tạo các văn bản dạng nhiều cột hoặc phân chia trang thành nhiều vùng khác nhau với những chủ đề khác nhau, rất tiện lợi trong thiết kế và trình bày trang web 2. Cách tạo bảng: – Tag : chỉ thị một bảng – Tag : xác định một dòng của bảng – Tag : xác định một ô chứa dữ liệu của bảng. Dữ liệu trong ô có thể là văn bản hoặc hình ảnh
3. Nội dung trong ô 1 Cột 1 Nội dung trong ô 2 Dòng 1 Cột 2 Nội dung trong ô n Nội dung trong ô 1 Nội dung trong ô 2 Nội dung trong ô n Dòng 2
4. Ví dụ : TABLE Cell 1 Cell 2 Cell 3 Cell 4
5. 3. Các thuộc tính: a) Thuộc tính của bảng  Thêm khung viền: n: độ dày của khung viền tính bằng Pixel  Định màu của khung viền và màu nền:  Tạo bóng : Bóng đổ ở cạnh dưới và phải của bảng Bóng đổ cạnh trên trái của bảng
6.  Ví dụ: TABLE Cell 1 Cell 2 Cell 3 Cell 4
7.  Định chiều rộng và chiều cao của bảng: n, m là độ rộng và chiều cao tính bằng Pixel  Canh lề bảng:  Thuộc tính Cellpadding và CellSpacing: Khoảng cách giữa đường viền của các ô Khoảng cách giữa đường viền của ô với văn bản
8.  Tag Caption: Dùng để tạo tiêu đề cho bảng tiêu đề Ví dụ: tiêu đề Cell 1 Cell 2 Cell 3 Cell 4
9. b) Thuộc tính của cột  Canh lề cho dữ liệu trong ô theo chiều ngang:  Canh lề cho dữ liệu trong ô theo chiều đứng:  Trộn ô: : trộn n cột : trộn n dòng  Tag : Có tác dụng như nhưng làm cho dữ liệu trong ô được in đậm và canh giữa Nội dung
10.  Ví dụ: TABLE center top Right Bottom
11. Ví dụ: trộn ô Properties of Table Colspan Rowspan Cell 1 Cell 2 Cell 3 Cell 4
12. II. TRÌNH BÀY TRANG Trong thực tế, bảng thường được sử dụng để trình bày bố cục cho toàn bộ trang web. Nếu muốn thiết kế một trang thể hiện văn bản trong cột dạng báo chí hoặc phân trang thành những vùng có chủ đề khác nhau, thì bảng là một công cụ cần thiết. Một trong những nét đặc trưng hữu dụng của bảng đó là trong mỗi table cell bạn có thể sử dụng bất kỳ tag HTML nào, ví dụ bạn có thể chèn một tag trong một cell hoặc một danh sách có thứ tự các mục hoặc có thể chèn một bảng con trong một bảng khác Ví dụ : Cần thiết kế trang web gồm nhiều vùng với những chủ đề khác nhau như hình dưới đây, thì bảng là công cụ rất hiệu quả
13. Bước 1: Tạo một table thứ nhất gồm 1 dòng và 2 cột Home Page View the Catalog Place an Order
14. Bước 2: tạo table thứ 2 gồm 3 dòng và 2 cột
15. Kết quả trình bày trang