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

1. 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)

d)

Nối các ô trong bảng:
 Chọn các ô cần nối
 ModifyTable Merge Cells.
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.

I.

TRÌNH BÀY TRANG

1. 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…


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 ô
c)

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:
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 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
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


I.

TEMPLATE

1. Giới thiệu:
Template là 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
bố cục dùng chung, trong trang có 2 loại vùng: vùng
được khoá và vùng không khoá.
Trang sử dụng template:
Là tập tin kiểu .htm nhưng có bố cục giống như
trang mẫu template, ta chỉ được phép hiệu chỉnh,
nhập nội dung mới cho các vùng không khoá. Khi
có sự thay đổi trong trang mẫu template thì các vùng
khoá của các trang sử dụng template cũng sẽ tự
động cập nhật theo.


2. Tạo trang template:
 Tạo mới một trang HTML template như một 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 các vùng
dùng chung
 Lưu trang mẫu template: File  Save as template
 Khi lưu trang dưới dạng template (.dwt) mặc định
tất cả các vùng của trang template đều bị khóa, do
đó phải mở khóa cho các 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.
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, thực hiện hiệu chỉnh
 Đổi tên template:

–
Trong Asset Panel, nhóm template
–
Chọn template cần đổi tên .
 Xoá một template:
–
Trong Asset panel, chọn nhóm template.
–
Chọn template cần xóa
–
Nhấn delete .