Bảng và trình bày trang

Chia sẻ: Nguyen Ha | Ngày: | Loại File: PDF | Số trang:65

Thêm vào BST

Báo xấu

58
lượt xem 6
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

• KẺ BẢNG Cách kẻ bảng: Insert/Table, hoặc click nút Table. • Rows: số dòng cần chèn. • Columns: số cột cần chèn. • Width: chiều rộng của bảng theo số điểm pixels hoặc phần trăm • Border: độ dầy của đường viền bảng. • Cell Padding: khỏang cách nội dung ô và biên ô. • Cell Spacing: khoảng cách giữa các ô.

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Bảng và trình bày trang

CHƯƠNG XI BẢNG VÀ TRÌNH BÀY TRANG
BẢNG • KẺ BẢNG Cách kẻ bảng: Insert/Table, hoặc click nút Table. • Rows: số dòng cần chèn. • Columns: số cột cần chèn. • Width: chiều rộng của bảng theo số điểm pixels hoặc phần trăm • Border: độ dầy của đường viền bảng. • Cell Padding: khỏang cách nội dung ô và biên ô. • Cell Spacing: khoảng cách giữa các ô.
2. HIỆU CHỈNH BẢNG a)Chèn thêm dòng, cột vào bảng: • Đặt dấu nháy tại vị trí cần chèn • Modifytable Insert row/Insert column • Cột mới mặc định chèn vào bên trái dấu nháy • Dòng mới mặc định chèn vào bên trên dấu nháy b)Xoá dòng, cột, bảng • Chọn dòng, cột, bảng cần xóa • Edit/Cut. (Ctrl +X) hoặc nhấn delete
c)Nối các ô trong bảng: – Chọn các ô cần nối – ModifyTable Merge Cells. d)Tách các ô trong bảng: – Chọn ô cần tách – ModifyTable Splits Cell – Split Cell into Columns: tách ô thành nhiều ô theo cột. – Split Cell into Rows: tách ô thành nhiều ô theo dòng. – Number of columns, Rows: xác định số ô cần tách theo cột, dòng.
4. THUỘC TÍNH CỦA BẢNG: Chọn table mở Properties inspector. – Rows, Cols : số dòng, số cột. – W, H : chiều rộng, chiều cao của bảng. – Cellpad : khoảng cách văn bản đến ô trong bảng. – Cellspace : khoảng càch giữa các ô trong bảng. – Align : canh lề bảng, phải, trái, giữa. – Border : độ dày nét đường viền bảng. – Bg color : màu nền của bảng. – Bg image : ảnh nền bảng. – Brdr color : màu đường viền bảng.
II.TRÌNH BÀY TRANG • Layout Table và layout cell – Layout table: – Layout table là dạng biến thể của table với các thông số đi kèm : • Border=0 • CellSpace =0 • CellPad=0 – 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 mode, trong Insert Inspector, chọn tab Layout, chọn Layout mode, hoặc chọn View Table Mode  Layout Mode Layout Cell Layout Table Layou Mode
– Layout cell: – 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 – 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
2. Một số cách kết hợp Layout Table và Layout Cell: a)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 b)Hoặc vẽ nhiều Layout Table cùng cấp • Layout Table trên chứa chứa Logo, Banner, nút ngang. • Layout Table ở giữa chứa nội dung văn bản, hình ảnh… • Layout Table dưới chứa địa chỉ liên lạc, phone…
c)Hoặc kết hợp cả 2 cách trên, dùng 2 Layout table ngang cấp: – Layout Table trên chứa Logo, banner, nút ngang… – Layout Table dưới chứa 2 Layout table con, một layout table trái và một layout table phải Lưu ý : – 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 đó – 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 ô
3. Thụôc tính của Layout Table : – Drag chuột kéo các handle của khung thay đổi kích thước – Nếu cần kích thước chính xác thì nhập các thông số trong Properties Inspector của Layout Table – Width: • Fixed: số Pixel xác định chiều rộng • AutoStretch: tự động kéo dãn ngang theo nội dung • Height: Xác định chiều cao, nhỏ nhất là 19 Pixel – Bg: màu nền – CellPad: khoảng cách từ nội dung đến biên – CellSpace: Khoảng cách giữa các Layout Cell
– Clear Row Height: tự động thay đổi chiều cao của các dòng cho vừa khít với nội dung, nếu không có nội dung thì chiều cao của dòng ít nhất là 19 Pixel – Remove All Spacers: Có hiệu lực khi chọn AutoStretch (xoá tất cả khoảng trống thừa) – Make cells Width Consistent: tạo các cell trong Layout Table có chiều rộng như nhau. – Remove Nesting : xoá Layout Table con trong các Layout Table cha.
4.Thụôc tính của Layout Cell : – Width: Fixed: Số Pixel xác định chiều rộng – AutoStretch: tự động kéo dãn ngang theo nội dung văn bản hoặc hình ảnh chèn vào Layout Cell – Height: Xác định số Pixel chiều cao, nhỏ nhất là 19 Pixel – Bg: màu nền của Layout Cell – Horz: Canh lề cho nội dung trong Layout Cell theo chiều ngang (Left, Center, Right) – Vert: Canh lề theo cho nội dung trong Layout Cell theo chiều dọc – No wrap: khi nội dung dài hơn kích thước của Layout Cell, nếu chọn mục này thì văn bản không xuống dòng mà Layout Cell tự dãn ra
5. LAYER: a)Giới thiệu: – Layer là một thành phần mới trong thiết kế Web, nó có thể chứa nội dung văn bản, hình ảnh xếp chồng lên nhau, nổi trên trang và chuyển động rất linh hoạt – Layer thường được sử dụng để thiết kế trang có các hiệu ứng đặc biệt như chữ rơi, ảnh bay,… – Điểm bất lợi của Layer là không hiển thị trên các trình duyệt cũ như IE4.0, Nestcape 4.0
b)Cách tạo Layer trên trang: Có thể tạo Layer bằng một trong các cách sau: • Cách 1: – Chọn Standard Mode – Click nút Draw Layer, drag chuột vẽ Layer • Cách 2: – Chọn menu Insert Layout Objects  Chọn Layer c)Hiệu chỉnh Layer: • Chọn layer, Layer được chọn sẽ xuất hiện 8 Handle xung quanh
Thay đối kích thước của Layer: – Chọn Layer cần hiệu chỉnh kích thước – Click chuột vào một trong các Handle, Drag chuột để thay đổi kích thước – Hoặc nhập thông số trực tiếp vào Properties Inspector Chèn nội dung vào Layer: – Nếu nội dung là văn bản thì nhập trực tiếp vào Layer – Nếu nội dung là hình ảnh thì drag chuột chọn hình trong thư mục Image thả vào Layer (hoặc chọn Insert Image)
Xếp chồng các Layer: Khi cần hiển thị nhiều ảnh trên trang, nhưng không đủ chổ, ta có thể xếp chồng lên nhau, sau đó cho xuất hiện từng lớp một hoặc cho từng lớp Layer bay ra khỏi màn hình, điều này có thể thực hiện được khi kết hợp Layer, Timeline và Behaviors Thứ tự các Layer: Mỗi lớp Layer đều có thuộc tính Z-Index hiển thị thứ tự của các lớp Layer, lớp Layer sau sẽ che khuất lớp Layer trước
Nếu nó có cùng toạ độ, có thể thay đổi trình tự các lớp layer bằng cách: – Chọn Lớp Layer cần thay đổi thứ tự – Trong Properties Inspector, nhập thứ tự mới trong mục Z-index Ẩn hiện một Layer: – Khi không muốn xem Layer nào thì ẩn Layer đó bằng một trong các cách sau:  Trong Properties Inspector, tại thuộc tính Vis: chọn Hidden.  Hoặc mở Layer Panel: Cấm xếp chồng các Layer
6. TIMELINE PANEL: – Timeline Panel là một bảng sắp xếp ảnh, lớp Layer theo một trình tự xuất hiện trên trục thời gian, nó giúp tạo các hình ảnh động. – Mở Timeline Panel: Window Others Timeline • Trục hoành là trục thời gian • Trục tung là trục không gian • Fps: (Frame per Second) tốc độ chạy đầu đọc theo số khung hình trên giây