Làm thế nào để tạo một thanh Navigation từ một Unordered List of Links trong Dreamweaver - những núm vú

Đây là một mẹo CSS tuyệt vời để chuyển danh sách đống tên vào thanh điều hướng trong Dreamweaver với hiệu ứng rollover đơn giản. Sử dụng danh sách dấu đầu dòng cho thanh điều hướng là một quy ước được chấp nhận rộng rãi cho các trang web đáp ứng các tiêu chuẩn truy cập hiện tại.

Tín dụng: Hình ảnh bởi istockphoto. com

Các liên kết tương tự vẫn còn nằm trong danh sách không có thứ tự, nhưng việc áp dụng các phong cách thay đổi diện mạo của họ một cách đáng kể.

Tín dụng: Hình ảnh bởi istockphoto. com

Để tạo một thanh điều hướng sử dụng CSS để xác định lại danh sách không có thứ tự và thẻ liên kết, hãy làm theo các bước sau:

1. Nhấn để đặt con trỏ chuột nơi bạn muốn tạo thanh điều hướng trong trang.

2. Nhập văn bản bạn muốn dùng làm liên kết, tách từng cột bằng cách nhấn phím Return hoặc Enter để tạo một đoạn văn trở lại.

   Để định dạng liên kết dưới dạng một danh sách không có thứ tự, hãy tách từng dòng văn bản mà bạn muốn liên kết với thẻ

3. Tạo liên kết bằng cách chọn từng đoạn văn bản lần lượt, nhấp vào biểu tượng Siêu liên kết trong bảng Chèn thông thường, sau đó chọn trang bạn muốn liên kết đến hoặc nhập URL.

4. Kéo để chọn toàn bộ tập hợp các liên kết, và sau đó nhấp vào biểu tượng Danh sách Không có Thứ tự trong Thanh tra Thuộc tính.

   Một điểm bullet xuất hiện ở đầu mỗi liên kết. Nếu bất kỳ liên kết nào không được đặt ra bằng một dấu đầu dòng riêng biệt, hãy nhấp để xóa không gian giữa nó và liên kết trước đó và sau đó nhấn Return hoặc Enter để tách các liên kết với một sự trở lại của đoạn văn.

   

5. Để thêm một thẻ xung quanh danh sách các liên kết (hoặc bất kỳ nội dung nào khác đã có trên một trang), hãy chọn nội dung và sau đó nhấp vào biểu tượng Khuôn dạng trong bảng Chèn Chung.

   Hộp thoại Chèn Chèn mở ra.

   Việc thêm một thẻ xung quanh danh sách liên kết không có thứ tự sẽ rất hữu ích nếu bạn muốn thêm định dạng.

6. Chọn Wrap Around Selection từ danh sách Insert thả xuống.

   Để kiểm soát chính xác nơi bạn thêm thẻ mới, bạn có thể chọn các tùy chọn từ danh sách thả xuống Chèn ở trên cùng của hộp thoại chèn Tách.

   

7. Nhập tên vào trường Lớp hoặc trường ID.

   Một thẻ có lớp hoặc tên ID bạn đã nhập sẽ được tự động thêm vào trang bao quanh danh sách liên kết.

8. Ở dưới cùng của hộp thoại Insert Div, nhấn nút New CSS Rule.

   Tên quy tắc CSS mới được thêm vào danh sách các tên kiểu trong bảng chọn Các Nhà thiết kế CSS.

9. Trong bảng thuộc tính, chỉ định cài đặt bạn muốn cho màu, nền, kích thước, lề và đệm.

   Việc định dạng theo kiểu được tự động áp dụng cho nội dung của thẻ vì bạn đã áp dụng kiểu này như khi bạn tạo nó trong các bước 5-7.

10. Để tạo một kiểu kết hợp sẽ định dạng danh sách không có thứ tự chỉ khi nó được sử dụng trong thanh điều hướng, hãy tạo một kiểu ghép với tên lớp. thanh điều hướng:

    1. Đặt con trỏ vào bất cứ vị trí nào trong danh sách có dấu đầu dòng.

    2. Nhấp vào dấu cộng (+) ở đầu bảng chọn.

    3. Trong trường Tên lựa chọn, đảm bảo rằng Dreamweaver tự động nhập. navbar ul như tên của một phong cách mới trong bảng lựa chọn.

    4. Trong bảng thuộc tính, thiết lập lề và padding là 0.

11. Tạo một kiểu ghép để xác định lại các thẻ mục danh sách:

    1. Đặt con trỏ vào bất cứ vị trí nào trong danh sách có dấu đầu dòng.

    2. Nhấp vào dấu cộng ở trên cùng của bảng lựa chọn.

    3. Trong trường Tên lựa chọn, đảm bảo rằng Dreamweaver tự động nhập. navbar ul li như tên của một phong cách mới trong bảng Selectors.

    4. Trong bảng thuộc tính, đặt Hiển thị thành Inline.

    5. Thay đổi Kiểu Kiểu Danh sách thành Không để loại bỏ đạn.

    6. Đặt lề trái và phải lên 20 pixel.

       Bước này tách các mục trong danh sách ra khỏi danh sách nằm ngang. Bạn có thể thay đổi cài đặt để tạo ra khoảng trống giữa các liên kết phù hợp nhất với thiết kế của bạn.

12. Tạo một phong cách để xác định lại thẻ liên kết:

    1. Nhấp để đặt con trỏ của bạn trong một liên kết trong thanh điều hướng.

    2. Nhấp vào dấu cộng ở trên cùng của bảng lựa chọn.

    3. Nếu bạn muốn thay đổi tên phong cách, hãy nhấp đúp vào tên trong bảng lựa chọn và nhập tên bạn muốn sử dụng.

    4. Trong phần Text của bảng Properties, đặt Text-Decoration là None.

    5. Vẫn còn trong phần Văn bản, chọn màu từ màu tốt để chỉ định màu của các liên kết khi chúng được tải trên một trang.

13. Tạo một phong cách mới để xác định lại thẻ liên kết di chuột để màu liên kết sẽ thay đổi khi người dùng cuộn một con trỏ lên liên kết:

    1. Nhấp vào dấu cộng ở phía trên cùng của bảng chọn Các biểu trưng.

    2. Trong trường Tên lựa chọn, nhập. navbar: hover.

    3. Trong phần Text của bảng Properties, đặt Text-Decoration là None.

    4. Vẫn còn trong phần Văn bản, chọn màu từ màu sắc tốt để chỉ định màu của liên kết khi người dùng cuộn con trỏ chuột qua liên kết.

14. Tạo một phong cách mới để xác định lại thẻ liên kết truy cập để màu liên kết thay đổi sau khi người dùng nhấp vào một liên kết:

    1. Nhấp vào dấu cộng ở đầu bảng chọn.

    2. Trong trường Tên lựa chọn, nhập. navbar a: truy cập.

    3. Trong phần Text của bảng Properties, đặt Text-Decoration là None.

    4. Vẫn còn trong phần Văn bản, chọn màu từ màu tốt để chỉ định màu của liên kết sau khi nó được truy cập.

15. Nhấp vào nút Trực tiếp ở đầu không gian làm việc hoặc nhấp vào nút Xem trước để xem trang trong trình duyệt để xem hiệu quả của các kiểu liên kết.