2. Xõy dựng WebSite bằng phần mềm Macromedia Dreamweaver MX
2.5 Sử dụng bảng (table) để thiết kế bố cục trang (Page Layout)
Nếu chúng ta đang quen thuộc với việc viết mã HTML, chúng ta đã biết rằng bất kỳ văn bản hoặc các nội dung khác nào mà chúng ta thêm vào trong một trang web từ một lề trang tới bất kỳ chỗ khác trừ khi nó đ- ợc chèn vào trong một "container", chẳng hạn nh- một layer hoặc một bảng. Các bảng trong HTML là một giải pháp tuyệt vời cho việc thiết kế layout của một trang web, bởi vì chúng đ- ợc dễ dàng sửa đổi và t- ơng thích với hầu hết các trình duyệt. Chúng ta có thể sử dụng các bảng bố trí dữ liệu hoặc để đặt màn hình hiển thị trực quan các phần tử (ví dụ nh- các nút Flash, hình ảnh, hoặc đoạn văn bản).
Dreamweaver có hai khung nhìn để chúng ta có thể thiết kế bảng- Standard view và Layout view. Trong phần này h- ớng dẫn chúng ta tìm hiểu để thiết kế trình bày rang trong cả hai khung nhìn đó. Trong phần đầu tiên của phần này, chúng ta làm việc trong Standard view và chèn một bảng trong một trang. Trong phần sau, chúng ta làm việc trong Layout view, nơi mà chúng ta sử dụng các tùy chọn để vẽ một bảng và các ô của bảng trong việc thiết kế layout.
Để hoàn thành tốt phần h- ớng dẫn này, chúng ta sẽ tìm hiểu xem làm thế nào để hoàn thành các nhiệm vụ sau:
▪ "Tạo và sửa đổi một bảng trong Standard view " trên trang 8
▪ "Thêm màu cho bảng" trên trang 12
▪ "Thiết lập bảng với chiều rộng t- ơng đối trong Standard view " trên trang 14
▪ "Thiết kế một trang trong Layout view " trên trang 15
▪ "Vẽ một ô layout" trên trang 16
▪ "Thêm nhiều ô layout" trên trang 17
▪ "Di chuyển hoặc thay đổi kích cỡ của ô layout" trên trang 18
▪ "Thiết kế một trang trong Layout view " trên trang 15
2.5.1 Tạo và chỉnh sửa bảng trong Standard view.
Standard view là một khung nhìn thiết kế điển hình của Dreamweaver. Để tạo một bảng trong Standard view, chúng ta sử dụng câu lệnh Insert Table. Dreamweaver tạo ra một bảng dựa trên các tùy chọn mà chúng ta chọn trong bảng hộp thoại Insert Table. Chúng ta có thể dễ dàng thay đổi cấu trúc ban đầu của bảng để tạo ra nhiều thiết kế phức tạp bằng cách kết hợp và tách các ô, và bằng cách chèn các hàng và cột.
Chúng ta sử dụng các ô của bảng (các hộp đ- ợc tạo ra tại giao của từng cột hoặc hàng trong một bảng) để kiểm soát các vị trí của văn bản và hình ảnh trong một trang web. Bởi vì chúng ta có thể thực hiện việc ẩn các đ- ờng viền của bảng, ng- ời xem sẽ không nhìn thấy các cấu trúc thiết kế của chúng ta khi họ nhìn trang trong một cửa sổ trình duyệt.
Tr- ớc khi chèn bảng vào trang web, chúng ta cần tạo ra một trang web mới. Các b- ớc để tạo ra một trang web mới bằng HTML nh- sau:
- Chọn File -> New…
- Trong danh sach Category -> Chọn Basic Page. - Trong Basic Page -> Chọn HTML.
- Nhấn nút Create
2.5.1.1 Chốn một bảng vào trang web.
Bây giờ chúng ta đã sẵn sàng để chèn một bảng vào trong tài liệu.
1) Trong cửa sổ Document, chọn vị trí chúng ta cần chèn trong trang web và thực hiện một trong số các b- ớc sau:
▪ Chọn Insert > Table.
▪ Chúng ta cũng có thể thực hiện bằng cách chọn tab Common trong thanh Insert, sau đó chọn Insert table.
2) Trong bảng hộp thoại, thiết lập các tùy chọn sau:
▪ Trong ô Rows: chọn 2
▪ Trong ô Width: chọn 600, sau đó chọn Pixels trong thực đơn pop-up phía bên phải mục Width.
Thiết lập width là 600 pixels chính là tạo ra chiều rộng của bảng. Chúng ta đã đ- ợc thảo luận về chiều rộng của bảng trong phần HTML.
• Trong ô Border: Chọn 1 để thiết lập đường viền của bảng là 1 pixel.
3) Click OK.
Chúng ta thấy Dreamweaver đã chèn một bảng vào trang web.
4) L- u trang web ta vừa tạo bằng một trong các cách sau.
▪ Chọn File -> Save.
▪ Ấn Ctrl + S.
2.5.1.2 Chỉnh sửa bảng.
Tiếp theo, chúng ta sẽ chỉnh sửa bố cục của bảng. Chúng ta sẽ thêm các ô (Cells) và các cột (Columns) vào bảng, và học cách gộp và tách chúng nh- thế nào.
2) Chọn Modify > Table > Insert Column. Bảng bây giờ gồm có 3 cột.
3) Click ô d- ới cùng bên trái và sau đó lựa chọn Modify > Table > Insert Rows or Columns.
Hộp thoại Insert Rows hoặc Columns xuất hiện.
4) Trong hộp thoại, thiết lập các tùy chọn sau:
▪ Trong Insert, chọn Rows.
▪ Trong Number of Rows, chọn 2.
▪ Trong Where, chọn Above the Selection. 5) Click OK.
Bảng đã đ- ợc cập nhật, Bây giờ, bảng của chúng ta có 4 hàng và 3 cột. 6) L- u lại sự thay đổi (File > Save).
2.5.1.3 Gộp và tỏch ụ.
Bằng cách gộp và tách ô, chúng ta có thể tùy chỉnh một bảng đ- ợc thiết kế phù hợp với nhu cầu của chúng ta. Tiếp theo, Chúng ta sẽ thấy làm thế nào để tùy chọn trình đơn hoặc kiểm tra Property để gộp hoặc tách các ô trong bảng.
1) Trong trang web, chọn 2 ô đầu tiên trong cột bên trái của bảng bằng cách kéo – thả xuống ô phía d- ới.
2) Chọn Modify > Table > Merge Cells. Hai ô đã đ- ợc gộp lại thành một.
3) Click vào hàng thứ 3 của cột thứ 2. Sau đó kéo về phía phải và xuống ô d- ới cùng của cột 3.
4) Trong phần giám sát Property, click nút Merge để gộp các ô đã lựa chọn. Các ô đ- ợc lựa chọn đã đ- ợc gộp thành 1 ô.
Chúng ta có thể tách một ô hoặc cột 5) Click vào ô trên cùng phía trái
6) Trong phần giám sát Property, click vào nút Split Cell Bảng hộp thoại Split Cell xuất hiện
7) Trong bảng hộp thoại, thiết lập các tùy chọn sau
▪ Phần Split Cell Into, chọn Columns
▪ Trong Munber of Rows, chọn 2 8) Click OK
Bảng đã đ- ợc thay đổi
2.5.1.4 Thay đổi chiều cao hàng và độ rộng cột
1) Di chuyển trỏ dọc theo biên giới phía d- ới bảng cho đến khi nó đổi thay, biến thành một đ- ờng viền chọn, sau đó kéo nó xuống để thay đổi kích cỡ của bảng.
Chúng ta có thể sử dụng cách này để thay đổi chiều cao của các hàng khác trong bảng nếu bạn muốn.
2) Di chuyển trỏ một cột dọc theo đ- ờng biên giới cho đến khi nó thay đổi đến một biên giới chọn, sau đó kéo nó vào ở phía bên trái hoặc phải để thay đổi chiều rộng của một cột.
3) Khi chúng ta đã làm xong bảng điều chỉnh của chúng ta, l- u tài liệu của chúng ta.
2.5.2 Thờm màu cho bảng
Chúng ta có thể thêm màu cho bất kỳ thành phần nào của bảng. Chúng ta sẽ bắt đầu bằng việc thêm một màu nền (background) vào bảng. Sau khi áp dụng một màu nền khác vào các ô trong bảng. Chúng ta sẽ kết thúc bằng việc thay đổi màu đ- ờng viền (border).
1) Trong tài liệu, click vào bất kỳ ô nào trong bảng, sau đó trong phần lựa chọn thẻ ở d- ới cùng bên trái của cửa sổ Document, click vào thẻ <table> để lựa chọn toàn bộ bảng.
2) Mở bảng giám sát Property (Window > Properties), nếu nó ch- a đ- ợc mở ra.
3) Trong bảng giám sát Property, trong ô texbox Bg Color lựa chọn một màu chúng ta muốn bằng một trong các cách sau:
▪ Click chọn màu vào ô pop-up, sau đó lựa chọn một màu từ ô chọn màu.
▪ Lựa chọn màu bằng cách sử dụng mã Hecxadecimal, ví dụ #CC9933
Màu nền đã đ- ợc áp dụng cho bảng.
4) Chúng ta cũng có thế áp dụng các b- ớc trên để thay đổi màu tại các ô bất kì.
2.5.2.1 Thờm màu đường viền
Bây giờ, chúng ta sẽ thiết lập màu đ- ờng viền của bảng. Màu đ- ờng viền áp dụng cho cả đ- ờng viền phía ngoài và phía trong của bảng Brdr Color
1) Trong cửa sổ Document, lựa chọn bảng.
2) Trong bảng giám sát Property, Trong ô texbox Brdr Color, chọn một màu đ- ờng viền cho bảng.
3) Khi chúng ta đã thực hiện xong, l- u tài liệu của chúng ta lại.
2.5.3 Thiết lập bảng cú độ rộng tương đối trong Standard view
Một bảng dựa trên tỷ lệ phần trăm sẽ giãn ra và co lại dựa trên chiều rộng của một cửa sổ trình duyệt. (Ví dụ, nếu chúng ta chỉ định rằng một bảng sử dụng một chiều rộng 75%, bảng sẽ giãn ra để lấp đầy 75% chiều ngang của không gian mà không phụ thuộc vào kích th- ớc cửa sổ trình duyệt. Điều này có thể hữu ích trong một vài tr- ờng hợp, chẳng hạn nh- bảo đảm là một trình đơn chuyển h- ớng luôn luôn đ- ợc hiển thị khi một cửa sổ đ- ợc thay đổi kích cỡ.
Khi chúng ta muốn thiết lập kích th- ớc của một bảng bất kể một ng- ời sử dụng thay đổi kích th- ớc của cửa sổ trình duyệt nh- thế nào, hãy sử dụng các bảng dựa trên pixel. Khi chúng ta muốn bảng căng ra đến kích cỡ của cửa sổ trình duyệt, sử dụng bảng dựa trên tỷ lệ phần trăm là tốt nhất.
Để thấy sự khác nhau giữa các bảng dựa trên tỷ lệ phần trăm và dựa trên pixel, chúng ta sẽ thêm một trong số chúng, sau đó hiển thị chúng trên trình duyệt.
1. Trong Dreamweaver, chọn File -> New.
2. Trong bảng hộp thoại New Document, mục Basic Page đã sẵn sàng để lựa chọn trong danh sách Basic Pages, click đúp vào HTML để lựa chọn một tài liệu HTML mới.
Tài liệu đ- ợc mở trong cửa sổ Document. 3. L- u tài liệu này lại. Tên của nó là table Width. 4. Chọn vị trí để chèn trong tài liệu.
5. Trong tab Common của thanh Insert, click vào nút Table. 6. Trong bảng hộp thoại xuất hiện, thiết lập các tùy chọn sau:
▪ Trong ô textbox Rows, chọn 2.
▪ Trong ô textbox Columns, chọn 3.
▪ Trong ô textbox Width, chọn 90, và chọn Percentage trong trình đơn pop- up ở phía phải của ô textbox Width.
▪ Trong ô textbox Border, điền1 để thiết lập 1 pixel đ- ờng viền quanh bảng và các ô của bảng.
7. Click OK.
Bảng xuất hiện trong tài liệu
8. Click vào trong ô trên ở giữa và kéo tới ô d- ới để lựa chọn cột giữa. 9. Trong phần giám sát Property, chọn màu để thiết lập màu nền cho cột
2.5.4 Thiết kế trang trong Layout view.
Chúng ta đã biết làm thế nào để làm việc với câu lệnh Insert Table, hãy xem xét một cách khác để làm việc với bảng bằng việc vẽ bảng layout.
Tiếp theo, chúng ta sẽ làm việc với khung nhìn Layout, Nó cho phép chúng ta vẽ các layout ô hoặc bảng mà ta có thể thêm các nội dung nh- : hình ảnh, văn bản, hoặc các ph- ơng tiện truyền thông khác.
Trong Layout view chúng ta có thể vẽ các ô layout hoặc bảng để định nghĩa khu vực thiết kế của trang web.Chúng ta có thể bắt đầu bằng việc chèn một ô bảng hoặc một ô layout. Khi chúng ta chèn một ô layout đầu tiên Dreamweaver sẽ tự động tạo một bảng để bao quanh nó.
2.5.4.1 Khởi tạo và lưu một tài liệu
1) Trong Dreamweaver, chọn File -> New.
2) Trong bảng hộp thoại New Document, Mục Basic Page đã sẵn sàng để lựa chọn, trong danh sách Basic Page lựa chọn HTML sau đó click Create để tạo một tài liệu HTML mới.
Tài liệu đ- ợc mở trong cửa sổ Document.
3) L- u tài liệu trong th- mục cục bộ trên máy tính, và có tên là tableLayout.htm
2.5.5 Vẽ một ụ layout
1) Trong thanh Insert, click tab Layout, sau đó click nút Layout view để thay đổi từ Standard view.
2.5.6 Thờm nhiều ụ layout.
Tiếp theo chúng ta sẽ học xem làm thế nào để thêm một loạt các ô layout. Chúng ta sẽ thêm các ô layout tiếp theo các ô layout mà chúng ta đã tạo để tạo ra layout cho các nút định h- ớng (navigation) của trang.
1) Trong thanh Insert, click vào nút Draw Layout Cell, giữ phím Ctrl để chúng ta có thể vẽ đ- ợc nhiều ô trong bảng.
2) Trong cửa sổ Document, định vị con trỏ ở d- ới ô cuối cùng chúng ta đã vẽ, sau đó vẽ một ô layout. Tiếp tục giữ phim Ctrl và vẽ thêm hai ô layout nữa.
3) Click vào một vùng trống của thanh Insert để hủy công cụ Draw Layout Cell.
2.5.7 Di chuyển hoặc thay đổi kớch cỡ của một ụ layout.
Nếu chúng ta cần điều chỉnh các ô, chúng ta có thể thay đổi kích th- ớc và di chuyển những ô layout. Chúng ta có thể di chuyển ô layout tới một vị trí mới của tài liệu miễn là nó ở trong phạm vi của bảng layout. Đôi khi chúng ta sẽ phải thay đổi kích th- ớc của các ô xung quanh để thực hiện mong muốn thay đổi. Nếu chúng ta muốn di chuyển một ô layout để định vị lại nó trong tài liệu, hãy thực hiện theo các b- ớc sau:
1) Click vào đ- ờng viền của ô layout để lựa chọn nó.
2) Thực hiện một trong các b- ớc sau:
▪ Dùng chuột kéo ô layout để di chuyển nó tới một vị trí khác.
▪ Nếu xung quanh ô layout là khoảng trống (ko liền kề các ô layout khác) sử dụng các nút lên (#), xuống (#), trái (#), phải (#) để di chuyển ô.
2.5.7.1 Thay đổi kớch thước ụ layout.
Để thiết kế một trang web chính xác, chúng ta có thể thiết lập kích th- ớc của những ô mà chúng ta đã thêm vào trong tài liệu. Chúng ta cũng có thể định vị lại những ô trong trang web.
1) Click vào đ- ờng viền của ô layout để lựa chọn nó. 2) Để thay đổi kích th- ớc của ô:
3) Lựa chọn một ô bằng cách click vào đ- ờng viền của ô, sau đó lựa chọn một màu trong phần giám sát Property để áp dụng nó.
4) Thêm một màu nền cho các ô khác trong bảng của chúng ta, nếu chúng ta muốn.
5) L- u lại tài liệu của chúng ta.