Hướng dẫn tạo website bằng Dreamweaver CC - Phần 6: Tạo liên kết và menu điều hướng

Điểm cốt lõi cần nắm về Hướng dẫn tạo website bằng Dreamweaver CC - Phần 6: Tạo liên kết và menu điều hướng

Trong phần thứ sáu của loạt bài này, chúng ta hãy tìm hiểu cách tạo kiểu cho menu và các liên kết, áp dụng JavaScript để ẩn và hiển thị menu tùy thuộc vào kích thước màn hình.

Để tiết kiệm thời gian và tránh thao tác sai lệch, bạn hãy làm theo trình tự từng bước đã được chuẩn hóa dưới đây.

---

Hướng dẫn thực hiện chi tiết từng bước

Bước 1: Tạo trang web bằng Dreamweaver CC phần 6

• Chào mừng bạn đến với phần 6 của loạt bài hướng dẫn về việc xây dựng một trang web đơn giản, thích nghi trong Dreamweaver CC 2015. Phiên bản một cột của thiết kế đã gần hoàn tất. Công việc còn lại là tạo liên kết và menu điều hướng. Ở phần này bạn cũng đính kèm một file JavaScript để hiển thị và ẩn menu trên màn hình nhỏ.
• Mẹo thao tác nhanh: Quan sát kỹ biểu tượng trạng thái ở góc cửa sổ trước khi chuyển sang bước kế tiếp.

Bước 2: Giới thiệu

• Chào mừng bạn đến với phần 6 của loạt bài hướng dẫn về việc xây dựng một trang web đơn giản, thích nghi trong Dreamweaver CC 2015. Phiên bản một cột của thiết kế đã gần hoàn tất. Công việc còn lại là tạo liên kết và menu điều hướng. Ở phần này bạn cũng đính kèm một file JavaScript để hiển thị và ẩn menu trên màn hình nhỏ.
• Mẹo thao tác nhanh: Quan sát kỹ biểu tượng trạng thái ở góc cửa sổ trước khi chuyển sang bước kế tiếp.

Bước 3: Tạo kiểu liên kết với pseudo-class

• Pseudo-class bắt đầu với dấu hai chấm và được gắn trực tiếp vào selector. Các pseudo-class được sử dụng với liên kết như sau:
• Chi tiết thực hiện: Bước 2. Trong phần văn bản của khung Properties, thiết lập thuộc tính font-weight là bold.
• Chi tiết thực hiện: Bước 3. Chọn icon đầu tiên cho thuộc tính text-decoration và thiết lập giá trị của nó là none. Tất cả các liên kết trong trang đều không được bôi đậm và không có gạch chân.
• Chi tiết thực hiện: Bước 4. Tạo một selector mới cho a:link. Khi gõ dấu hai chấm, Dreamweaver hiển thị gợi ý code cho các pseudo-class.

Bước 4: Tạo liên kết kích hoạt cho menu điều hướng

• Trên màn hình độ phân giải nhỏ như điện thoại di động, menu điều hướng thường bị ẩn đi, chỉ hiển khi click hoặc chạm vào nút menu. Trong phần này, bạn sẽ cung cấp một ID cho danh sách không thứ tự và thêm tiêu đề cấp hai cho liên kết trong danh sách. Link menu sẽ bị ẩn trong màn hình độ phân giải lớn. CSS và JavaScript sẽ điều khiển chuyển động trượt của menu điều hướng trên màn hình nhỏ hơn.
• Chi tiết thực hiện: Bước 1. Trong Live View, chọn danh sách không thứ tự của liên kết điều hướng bằng cách click vào một trong những liên kết đó. Liên kết này sẽ có màu cam cháy và được gạch chân để chỉ nó đang ở trạng thái kích hoạt. Nhấn mũi tên lên vài lần cho đến khi Element Display chỉ danh sách đã được chọn. Tab Element Display hiển thị ul.
• Chi tiết thực hiện: Nhấn phím mũi tên lên trong khi ở trong Live View để di chuyển lựa chọn lên cấu trúc phân cấp HTML. Nếu chọn một mục ở giữa danh sách, nhấn lên một lần sẽ chọn thẻ (siêu liên kết) của mục danh sách ngay phía trên. Nhấn lên một lần nữa sẽ chọn thẻ
• là phần tử cha của liên kết. Khi tiếp tục nhấn, Dreamweaver lên thứ bậc tiếp theo: phần tử