3.2. THIẾT KẾ VỚI ADOBE DREAMWAVER
3.2.2. Tạo bảng (Table) và trang khung (Frame)
a. Làm việc với bảng
*) Tạo bảng
- Table/ Insert/ Table hay kéo lê trên nút Insert Table đến khi đạt số dòng, cột cần thiết Size Rows : số hàng
Size Columns : số cột Alignment : canh lề bảng Specify Width : độ rộng bảng
Border Size : độ dày đường viền bảng
Cell padding : khoảng cách giữa văn bản trong ô đến biên ô Cell spacing : khoảng cách giữa các ô, ô và biên bảng.
*) Di chuyển con trỏ trong bảng
→←: đến ký tự kế trước hay kế sau
↓↑ : lên hàng trên hay hàng dưới
Tab, Shift + Tab : đến ô kế tiếp hay kế trước, nếu là ô cuối tự động tạo hàng mới
*) Điều chỉnh bảng Chọn bảng :
- Chọn ô : Kích mouse trên mép trái ô (k)
- Chọn hàng : Kích mouse trên mép trái hàng (k) - Chọn cột : Kích mouse trên mép trên cột (i)
- Chọn nhiều ô, hàng, cột : kéo lê qua các ô, mép trái hàng, mép trên cột hay Table/ Select/Table : chọn toàn bảng
Row : chọn hàng Column : chọn cột Cell : chọn ô
69
hay ấn Shift đồng thời với các phím di chuyển để chọn
Shift + DE : qua phải hay qua trái một ký tự, lên hay xuống một dòng Shift + home, end : đến đầu hay cuối của hàng
Shift + page up, page down : lên hay xuống một trang
*) Chèn ô, hàng, cột
- Chọn vị trí chèn, Table/ Insert/ Row or Column
Cell : chèn số ô bằng số ô chọn và đẩy các ô chọn sang phải Caption : tiêu đề bảng, nằm giữa trên bảng
Number of rows : số hàng cần chèn
Above selection : chèn các hàng trên khối chọn Below selection : dưới khối chọn
Left selection : trái khối chọn Right selection : phải khối chọn
*) Xóa các ô, hàng, cột :
- Chọn các ô, hàng, cột muốn xóa. Table/ Delete Cells
*) Thay kích thước hàng, cột
Kộo lờ biờn phải cột, biến dưới hàng đến khi đạt độ rộng mong muốn (ô)
*) Ghép và tách ô
- Table/Merge Cells : hỗn hợp các ô chọn - Table/Split Cells : phân chia các ô chọn
*) Định dạng bảng
- Kích nút phải mouse trên bảng, chọn Table Properties Alignment : canh lề bảng
Cell padding : khoảng cách giữa văn bản trong ô đến biên ô Cell spacing : khoảng cách giữa các ô, ô và biên bảng.
Border size : độ dày đường viền bảng Color : màu đường viền bảng
Light border :
Dark border : viền bảng 2 màu
Show both cells and table borders : hiện cả viền ô và bảng Background color : màu nền bảng
Use background picture : ảnh nền bảng
*) Định dạng ô
- Kích nút phải mouse trên ô, chọn Cell properties (®) Horizontal alignment : canh lề viền bảng theo chiều ngang Vertical alignment : canh lề viền bảng theo chiều dọc
Row spanned, columns spanned : độ rộng, cao của ô chọn bằng bao nhiêu cột, hàng
*) Kẻ viền và đánh bóng nền cho bảng, văn bản Format/ Borders and Shading
- Tab Border : kẻ viền
70 - Tab Shading : màu nền, chữ, hình nền
b. Làm việc với khung Frame
*) Chèn khung
- File/ New/ Page or Web, Page Templates, Tab Frames Pages, chọn một dạng phân chia khung, ví dụ : Banner and Contents, OK, trang Web có 3 khung, mỗi khung hiển thị một trang Web
- Trên mỗi khung
Set Initial Page: chọn trang .htm có sẵn cho khung New Page : để tạo trang mới cho khung
- Các chế độ hiển thị trang Web ngoài chế độ Normal, HTML, Preview, còn có Frames Page HTML : hiện mã HTML của trang phân chia khung
Ví dụ:
<frameset row = “64,*>
<frame name = “banner” scrolling = “no” noresize target = “contents” src =
“tieude.htm”>
<frameset cols = “150,*”>
<frame name = “contents” target = “main” src = “menu.htm”>
<frame name = “main” src = gioithieu.htm>
</frameset>
</frameset>
- Lưu trang Web : File/Save, lần lượt đặt tên cho các trang Web trên mỗi khung và trang có phân chia khung, chọn nút Save. Lưu từng trang trong khung : Frame/ Save page
*) Chèn khung bên trong một trang Web
- Chèn khung bên trong một trang Web: Insert/ Inline Frame Chọn Set Initial Page : chọn trang có sẵn cho khung
New Page : trang mới
- File/Save, lần lượt gõ tên cho trang trong khung và trang hiện hành. Để lưu từng trang trong khung, chọn Frame/Save Page
*) Xóa khung
Frames/ Delete Frame
*) Phân chia khung Frames/Split Frame
*) Định dạng khung
- Kích phải Mouse trên khung, chọn Frame Properties Name : tên khung
Initial Page : trang hiển thị trong khung
71 Frame size : kích thước khung
Show scrollbars: hiển thị thanh cuộn hay không Chọn nút Frames Page
Tab Frames : Frame Spacing
Show Borders : hiện đường viền phân chia khung