Dreamweaver hỗ trợ ba dạng cửa sổ làm việc: Code, Slipt và Design.
Hình 2-3: Cửa sổ Code
Với cửa sổ Code, Dreamweaver sẽ hiển thị gợi ý khi bạn gõ dấu mở thẻ.
Chế độ Slipt sẽ chia cửa sổ làm việc thành hai phần, bạn cĩ thể vừa soạn thảo code vừa xem kết quả thiết kế.
Hình 2-5: Chế độ Slipt
Chế độ Design, ngoài việc gõ nội dung trang Web, bạn khơng cần nhớ mã HTML. Thay vào đĩ bạn phải biết cách gọi các thẻ bằng cách chọn lệnh tương ứng từ menu.
Hình 2-6: Chế độ Design
Thanh Common, chứa các đối tượng thường được sử dụng phổ biến nhất như các liên kết với ảnh.
Hình 2-7: Thanh Common
Thanh Layout, giúp bạn mơ tả cách bạn muốn trình bày trang: table, div, frame.
Hình 2-8: Thanh Layout
Thanh Form, gồm các thành phần Form như trường Text, nút lệnh và hộp chọn, …
Hình 2-9: Thanh form
Hình 2-10: Thanh Text
Thanh Application, giúp cho bạn làm việc với các cơ sở dữ liệu bên ngồi.
Hình 2-11: Thanh Application
Để soạn thảo và hiển thị đúng tiếng Việt, bạn vào Modify Page Properties
Title/Encoding và chọn trong Unicode (UTF-8) trong mục Encoding. Sau đĩ Apply và OK để thiết lập của bạn cĩ hiệu lực ngay.
2.3 Xuất bản kết quả
Khi muốn kiểm tra kết quả thiết kế của mình trên trình duyệt, bạn chỉ cần lưu tập tin lại lần cuối trước khi Test. Sau đĩ từ cửa sổ soạn thảo, bạn chọn vào biểu tượng Preview bằng trình duyệt (cĩ hình quả địa cầu) và chọn trình duyệt kiểm thử.
Hình 2-13: Xuất bản kết quả
Câu hỏi (bài tập) củng cố:
1. Sinh viên hãy làm quen với việc soạn thảo các bài tập bằng chế độ Code của Dreamweaver.
2. Hãy thử tiến hành chèn bảng, chèn form và các thành phần trong form bằng
chế độ Design của Dreamweaver.
3. Thực hiện lưu bài tập với Encoding: Unicode (UTF-8) và xuất bản kết quả lên trình duyệt.
CHƯƠNG 3
BẢNG MẪU NẠP CHỒNG – CSS
3.1 Khái niệm
CSS - Cascading Style Sheet – Bảng mẫu nạp chồng quy định cách trình bày cho các tài liệu HTML, XHTML, XML, … Ở đây xin nĩi cụ thể về ngơn ngữ mà chúng ta vừa tìm hiểu qua, HTML. Như bạn đã biết, HTML cũng đã hỗ trợ khá nhiều thẻ và các thuộc tính bên trong để định dạng cho các đối tượng như văn bản, hình ảnh, bảng biểu, … Tuy nhiên, chắc hẳn bạn cũng nhận thấy một điều rằng đơi khi để cĩ được một định dạng cơ bản trên Web, chúng ta cũng đã phải kết hợp rất nhiều thẻ HTML để đạt được ý định hiển thị. Đĩ là chưa kể đến quá trình dịch trang Web sẽ bị chậm đi khi sử dụng quá nhiều mã. Đĩ cũng chưa kể đến việc mã nguồn phức tạp, rắc rối nếu bạn khơng cĩ một kỹ thuật lập trình tốt thì rất khĩ để chỉnh sửa, cập nhật lại trang khi cĩ thay đổi. Đĩ cũng chưa tính đến chuyện tốn hao nhiều thời gian để thiết kế, nếu bạn cĩ một Website với nội dung lớn, cĩ khá nhiều trang, rất cĩ thể những mã thẻ mà bạn gọi sẽ khác nhau ở các trang. Vì vậy sẽ dẫn đến sự thiếu đồng và thống nhất về định dạng cho toàn thể giao diện của một Website. Trong khi đĩ CSS sẽ hỗ trợ bạn khắc phục các nhược điểm vừa nêu. Do CSS là một dạng mẫu được quy định sẵn và được nạp vào bộ nhớ của trình duyệt nên ở những lần truy cập lại sẽ giảm được thời gian nạp và dịch lại định dạng. Từ một bảng mẫu mà bạn thiết kế cĩ thể áp dụng cho nhiều trang thậm chí cho các Website khác nhau. Đây là một ưu thế rõ rệt của CSS vì bạn khơng cần mất thời gian để thực hiện lại các thao tác định dạng giống nhau. Bên cạnh đĩ, hiện nay đa số các trình duyệt hiện đại đều cĩ hỗ trợ hiển thị CSS. Điều duy nhất khiến người thiết kế Web lo lắng đĩ là để vận dụng tốt CSS vào thiết kế Web thì họ cần phải tốn khá nhiều thời gian trong việc nhớ, học hỏi và tích lũy các kiến thức về CSS.
CSS được vận dụng linh hoạt trong trang HTML với 2 kiểu viết áp dụng cho 3 loại CSS:
Kiểu viết 1:
Mục tiêu học tập: Sau khi học xong bài này, người học cĩ thể:
- Vận dụng CSS thiết kế giao diện
Trong đĩ:
Selector – bộ chọn, cĩ thể là tên thẻ HTML, cĩ thể là id của thẻ HTML hoặc một lớp được định dạng chung một số thẻ HTML, cũng cĩ thể là một nhĩm thẻ HTML lồng nhau.
Property là các thuộc tính của CSS, với value là giá trị của thuộc tính đĩ. Các thuộc tính trong CSS cách nhau bằng dấu chấm phẩy (;)
Kiểu viết 2:
Với kiểu 2, CSS được gọi trực tiếp trong một thẻ HTML nào đĩ thơng qua thuộc tính
style. Thay vì phải sử dụng quá nhiều thẻ HTML để định dạng cho một nội dung thì bạn chỉ
cần gọi CSS là đủ, trong CSS cĩ hỗ trợ hầu hết các định dạng cho một thẻ HTML bất kỳ. Để đánh dấu ghi chú trong CSS, ta dùng: /* nội dung ghi chú */
3.2 Phân loại
CSS được phân thảnh 3 loại: Bảng kiểu trực tiếp (Inline style sheet), Bảng kiểu được nhúng vào trong tài liệu HTML (Internal style sheet), Bảng kiểu bên ngồi (External style sheet). Những loại này cĩ thể được sử dụng đồng thời, với thứ tự ưu tiên giảm dần như sau: 1. Inline style sheet, 2. Internal style sheet, 3. External style sheet, 4. Browser default. Điều này cĩ nghĩa là nếu trong cùng một thẻ HTML cùng được quy định một thuộc tình nào đĩ bằng Inline style sheet và Internal style sheet thì thuộc tính sẽ được lấy để hiển thị chính là thuộc tính được quy định trong Inline style sheet. Cịn trường hợp cùng một thẻ HTML được quy định nhiều thuộc tính bằng các loại CSS khác nhau thì để hiển thị định dạng của thẻ HTML đĩ, trình duyệt sẽ tổng hợp tất cả các định dạng đĩ lại để hiển thị, trường hợp các thuộc tính chưa được quy định bởi CSS nào thì trình duyệt sẽ lấy quy định mặc định của mình để hiển thị.