2. Xõy dựng WebSite bằng phần mềm Macromedia Dreamweaver MX
2.3 Làm việc với cửa sổ tài liệu
2.3.1 Cửa sổ tài liệu: Thớ dụ chọn HTML
Đây là 1 Cửa sổ tài liệu Dreamweaver đơn giản. Chúng ta có thể chỉnh sửa nó để thích hợp với những thói quen của chúng ta.
Nếu mở nhiều Files cùng lúc, chúng ta sẽ thấy các Tables nằm dọc ở phần trên cùng cửa sổ. Chúng ta nhấp vào 1 Table để chỉnh sửa.
1. Nhấp Nút Restore Down ( Góc Phải trên ) để phóng to màn hình --> Trở lại nhấp Nút Maximize.
2. Thanh Menu: Nói về những gì mà chúng ta mong đợi thấy trên nền. 3. Thanh INSERT: D- ới thanh Menu.
• COMMON: Tập hợp nầy chứa các Đối T- ợng th- ờng đ- ợc sử dụng nhiều nhất nh- các liên kết với ảnh.
• LAYOUT: nhấp nút xổ xuống chọn Layout. Hiện ra gồm các Tables – Div – Layer – Khung ( Frame ). Các Đối t- ợng nầy giúp chúng ta mô tả cách chúng ta muốn trình bày Trang. (H4).
• TEXT: Giỳp tạo Style cho Text đó nằm trờn Trang tốt hơn là dựng Property
Inspector ( Nằm ở đỏy ). (H6).
• HTML: Ít hữu dụng, cho phộp chỳng ta chốn cỏc đối tượng như Table – Khung
– Script vốn được thực hiện tốt hơn ở nơi khỏc.(H7).
• APPLICATION: Giỳp cho chỳng ta làm việc với cỏc cơ sở dữ liệu bờn ngoài
(H8).
• FLASH ELEMENTS: Chỉ chứa 1 Đối tượng bộ xem ảnh Flash.Nếu muốn thờm
cỏc thành phần Flash như Nỳt Flash – Text – Video hóy quay về Common > Nỳt Media. ( H9+10).
• FAVORITES: Chỉ là rổng không. Dùng để chỉnh sửa, dùng để chứa những gì chúng ta muốn nó có. Để làm điều này: Chọn Tập hợp Favorites -> Nhấp Phải -> Cho phép chúng ta chọn lựa để thêm những đối t- ợng th- ờng đ- ợc sử dụng nhiều nhất.
• Chức năng của từng Nút và nút xổ xuống kế bên: Để con trỏ lên Nút sẽ thấy Text mô tả chức năng của Nút đó. Nhấp Nút xổ xuống kế bên ra chức năng phụ.
Trong phần giám sát Property của ô layout, đánh một số cho chiều rộng hoặc chiều cao của ô. Ví dụ, đánh 200 trong ô texbox Height để thiết lập chiều cao của ô là 200 pixels, sau đó click trong tài liệu để thấy sự thay đổi của chiều rộng ô.
2.5.8 Thờm màu cho bảng layout
Chúng ta có thể thêm màu tới 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àu nền (background) vào bảng, sau đó á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 đ- ờng viền của bảng.
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ở phần giám sát Property (Window > Properties), nếu nó ch- a đ- ợc mở. Properties cho phần lựa chọn bảng xuất hiện trong phần giám sát Property.
1. Trong ô texbox Bg Color của phần giám sát Property, lựa chọn màu 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
▪ Nhập tên màu, ví dụ goldenrod. Màu nền đã đ- ợc áp dụng cho bảng.
2.5.9 Thiết lập một bảng với chiều rộng tương đối trong bảng Layout.
Theo mặc định, khi chúng ta vẽ một bảng hay ô trong Layout view, Dreamweaver tạo ra bảng với những cột có chiều rộng cố định. Chúng ta có thể thay đổi chiều rộng- cố định của một bảng hay ô thành chiều rộng t- ơng đối bằng cách sử dụng thuộc tính Autostretch.
Autostretch cho phép chúng ta tạo ra một bảng với chiều rộng t- ơng đối, và áp dụng cách trình bày linh hoạt cho cột chúng ta thiết lập nh- cột mở rộng, do đó bảng tự động mở rộng để phủ đầy một cửa sổ trình duyệt.
Chúng ta sẽ thiết lập một trong số những cột của bảng để tự động trải ra để phủ đầy một cửa sổ trình duyệt khi hiển thị.
1) Trong tài liệu, trong phần đầu cột click cột bảng mà chúng ta muốn tự động trải ra.
2) Khi trình đơn pop – up xuất hiện, chọn Make Column Autostretch. Hộp thoại Choose Spacer Image xuất hiện
3) Trong hộp thoại thông báo, lựa chọn Create a Spacer Image File.
4) Bảng hộp thoại Save Spacer Image File As xuất hiện, nhập một giá trị để l- u ảnh ví dụ spacer.gif trong vị trí t- ơng đối của Site Root.
Cột đầu tiên thay đổi từ giá trị số thành dòng l- ợn sóng. Phần giám sát Property cũng cập nhật để phản ánh rằng Autostretch sẽ đ- ợc áp dụng cho các bảng. 5) L- u file lại.
2.5.10 Tổng kết
Trong phần này, chúng ta đã đ- ợc học cách để tạo ra các bảng trong Dreamweaver. Cùng với đó, chúng ta thay đổi các hàng và các cột trong bảng, thiết lập màu nền tới các phần tử bảng, và đã học cách để tạo ra một bảng linh động thiết kế cả Standard và Layout view.
Để biết thêm thông tin chi tiết, chúng ta có thể tìm hiểu trong tài liệu Using Dreamweaver MX hoặc Dreamweaver Help (Help > Using Dreamweaver)