Bài giảng Thiết kế Web: Chương 11 Từ Thị Xuân Hiền

CHƯƠNG XI BẢNG VÀ TRÌNH BÀY TRANG I BẢNG KẺ BẢNG Cách kẻ bảng: Insert/Table, 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 bảng theo số điểm pixels phần trăm  Border: độ dầy đường viền bảng  Cell Padding: khỏang cách nội dung ô biên ô  Cell Spacing: khoảng cách ô HIỆU CHỈNH BẢNG a) Chèn thêm dòng, cột vào bảng:  Đặt dấu nháy vị trí cần chèn  Modifytable Insert row/Insert column  Cột mặc định chèn vào bên trái dấu nháy  Dòng mặc định chèn vào bê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) nhấn delete c) d) Nối ô bảng:  Chọn ô cần nối  ModifyTable Merge Cells Tách ô 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 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 bảng  Cellpad : khoảng cách văn đến ô bảng  Cellspace : khoảng càch ô bảng  Align : canh lề bảng, phải, trái,  Border : độ dày nét đường viền bảng  Bg color : màu bảng  Bg image : ảnh bảng  Brdr color : màu đường viền bảng I TRÌNH BÀY TRANG Layout Table layout cell  Layout table: – Layout table dạng biến thể table với thông số kèm : • Border=0 • CellSpace =0 • CellPad=0 – Nếu trang có nhiều nội dung với chủ đề khác cần nhập nội dung với dạng cột báo chí dùng layout table để bố cục trang theo chủ đề chuẩn bị trước – – Layout Table dùng để bố cục trang, không dùng để chứa liệu, viền khung Layout Table có màu xanh Khi thiết kế dạng Layout, cần phải chuyển sang chế độ Layout mode, Insert Inspector, chọn tab Layout, chọn Layout mode, chọn View Table Mode  Layout Mode Layout Cell Layout Table Layou Mode  Layout cell: – Layout cell Nằm Layout table, dùng để chứa liệu, liệu layout cell văn bản, hình ảnh, thíêt kế dạng layout cần lưu ý layout cell phải sát – Một layout Table chứa nhiều layout table con, Layout Table gồm có nhiều dòng, dòng chứa nhiều Layout Cell, số Layout Cell dòng khác Một số cách kết hợp Layout Table Layout Cell: a) Vẽ Layout Table có kích thước đầy trang, sau vẽ Layout cell bên Layout Table theo kích thước yêu cầu bố cục b) Hoặc vẽ nhiều Layout Table cấp • Layout Table chứa chứa Logo, Banner, nút ngang • Layout Table chứa nội dung văn bản, hình ảnh… • Layout Table chứa địa liên lạc, phone… – Clear Row Height: tự động thay đổi chiều cao dòng cho vừa khít với nội dung, nội dung chiều cao dòng 19 Pixel – Remove All Spacers: Có hiệu lực chọn AutoStretch (xoá tất khoảng trống thừa) – Make cells Width Consistent: tạo cell Layout Table có chiều rộng – Remove Nesting : xoá Layout Table Layout Table cha Thụôc tính 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 hình ảnh chèn vào Layout Cell Height: Xác định số Pixel chiều cao, nhỏ 19 Pixel Bg: màu Layout Cell Horz: Canh lề cho nội dung Layout Cell theo chiều ngang (Left, Center, Right) Vert: Canh lề theo cho nội dung Layout Cell theo chiều dọc No wrap: nội dung dài kích thước Layout Cell, chọn mục văn không xuống dòng mà Layout Cell tự dãn LAYER: Giới thiệu: Layer thành phần thiết kế Web, chứa nội dung văn bản, hình ảnh xếp chồng lên nhau, trang chuyển động linh hoạt Layer thường sử dụng để thiết kế trang có hiệu ứng đặc biệt chữ rơi, ảnh bay,… Điểm bất lợi Layer không hiển thị trình duyệt cũ IE4.0, Nestcape 4.0 a) – – – b) c) Cách tạo Layer trang: Có thể tạo Layer 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 Hiệu chỉnh Layer:  Chọn layer, Layer chọn xuất Handle xung quanh   Thay đối kích thước Layer: – Chọn Layer cần hiệu chỉnh kích thước – Click chuột vào 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 văn nhập trực tiếp vào Layer – Nếu nội dung hình ảnh drag chuột chọn hình thư mục Image thả vào Layer (hoặc chọn Insert Image)   Xếp chồng Layer: Khi cần hiển thị nhiều ảnh trang, không đủ chổ, ta xếp chồng lên nhau, sau cho xuất lớp cho lớp Layer bay khỏi hình, điều thực kết hợp Layer, Timeline Behaviors Thứ tự Layer: Mỗi lớp Layer có thuộc tính Z-Index hiển thị thứ tự lớp Layer, lớp Layer sau che khuất lớp Layer trước Nếu có toạ độ, thay đổi trình tự lớp layer cách: – Chọn Lớp Layer cần thay đổi thứ tự – Trong Properties Inspector, nhập thứ tự mục Z-index  Ẩn Layer: – Khi không muốn xem Layer ẩn Layer cách sau:  Trong Properties Inspector, thuộc tính Vis: chọn Hidden  Hoặc mở Layer Panel: Cấm xếp chồng Layer TIMELINE PANEL: – Timeline Panel bảng xếp ảnh, lớp Layer theo trình tự xuất trục thời gian, giúp tạo hình ảnh động – Mở Timeline Panel: Window Others Timeline • Trục hoành trục thời gian • Trục tung trục không gian • Fps: (Frame per Second) tốc độ chạy đầu đọc theo số khung hình giây I TEMPLATE Giới thiệu: Template dạng trang mẫu thiết kế trước chứa thành phần dùng chung Template giữ quan hệ thành phần mẫu trang thiết kế, bố cục sẵn Ta vào mẫu template để tạo nhanh nhiều trang có bố cục thiết kế Thao tác với template, ta cần phân biệt rõ trang mẫu trang sử dụng template   Trang mẫu template Là tập tin kiểu dwt với phần thiết kế chuẩn cho bố cục dùng chung, trang có loại vùng: vùng khoá vùng không khoá Trang sử dụng template: Là tập tin kiểu htm có bố cục giống trang mẫu template, ta phép hiệu chỉnh, nhập nội dung cho vùng không khoá Khi có thay đổi trang mẫu template vùng khoá trang sử dụng template tự động cập nhật theo Tạo trang template:  Tạo trang HTML template trang bình thường kẻ Layout table, Layout cell phù hợp, nhập nội dung, chèn hình, trang trí cho vùng dùng chung  Lưu trang mẫu template: File  Save as template  Khi lưu trang dạng template (.dwt) mặc định tất vùng trang template bị khóa, phải mở khóa cho vùng không dùng chung – Chọn vùng cần mở khóa – Insert template objects Editable Region đặt tên cho vùng mở khóa Các cách khác để tạo Template:  Chọn File/New…  Chọn Page Designs/Text: Article D with Navigation  Chọn Creat template cuối phải hộp thoại Tạo trang theo mẫu template:  Chọn File/New…  Trong hộp thoại New Document, chọn tab template  Chọn mẫu template tạo sẳn create  Những vùng dùng chung bị khóa, thiết kế người dùng thay đổi nội dung phần mở khóa Hiệu chỉnh template – Mở template cần hiệu chỉnh: – Modify/ template / Open Attached template – Xuất trang mẫu template, thực hiệu chỉnh  Đổi tên template: – Trong Asset Panel, nhóm template – Chọn template cần đổi tên  Xoá template: – Trong Asset panel, chọn nhóm template – Chọn template cần xóa – Nhấn delete Khi xoá template ảnh hưởng đến tất trang có sử dụng template Nếu thực muốn xoá, trước tiên nên mở trang sử dụng template chọn chức tách khỏi template  Tách trang khỏi template Modify/ Template/ Detach from template Sử dụng Template cho trang: Sau tạo trang mẫu template, áp dụng mẫu template:  File/ New/ HTML tạo trang  Modify/ Template/ Apply template to page…  Chọn mẫu template  Nhập nội dung, hình ảnh vào vùng không khoá Hoặc thực cách khác:  Mở Asset Panel, nhóm template  Chọn danh sách mẫu template  Chọn nút Apply Cập nhật trang sử dụng template:  Modify/ Template/ Update current page, cập nhật trang hành  Modify/ Template/ Update page/ Entire site list box look in [...]... dạng trang mẫu được thiết kế trước chứa các thành phần dùng chung Template giữ quan hệ giữa các thành phần trong một mẫu trang được thiết kế, bố cục sẵn Ta có thể căn cứ vào một mẫu template để tạo nhanh nhiều trang có cùng một bố cục thiết kế Thao tác với template, ta cần phân biệt rõ giữa trang mẫu và trang sử dụng template   Trang mẫu template Là tập tin kiểu dwt với phần thiết kế chuẩn cho một... 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... Layout Cell tự dãn ra 5 LAYER: 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 a) – – – b) c) Cách tạo...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... cuối phải hộp thoại 3 Tạo trang theo mẫu template:  Chọn File/New…  Trong hộp thoại New Document, chọn tab template  Chọn mẫu template đã tạo sẳn create  Những vùng dùng chung sẽ bị khóa, khi thiết kế người dùng chỉ có thể thay đổi nội dung trong phần đã được mở khóa 4 Hiệu chỉnh template – Mở template cần hiệu chỉnh: – Modify/ template / Open Attached template – Xuất hiện trang mẫu template,... 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 ... dạng trang mẫu thiết kế trước chứa thành phần dùng chung Template giữ quan hệ thành phần mẫu trang thiết kế, bố cục sẵn Ta vào mẫu template để tạo nhanh nhiều trang có bố cục thiết kế Thao tác với... LAYER: Giới thiệu: Layer thành phần thiết kế Web, chứa nội dung văn bản, hình ảnh xếp chồng lên nhau, trang chuyển động linh hoạt Layer thường sử dụng để thiết kế trang có hiệu ứng đặc biệt chữ... Table dùng để bố cục trang, không dùng để chứa liệu, viền khung Layout Table có màu xanh Khi thiết kế dạng Layout, cần phải chuyển sang chế độ Layout mode, Insert Inspector, chọn tab Layout, chọn