WikiHow này hướng dẫn bạn cách sử dụng Adobe Dreamweaver để tạo hộp thả xuống cho trang web. Hộp thả xuống là các menu "thả xuống" khi một mục trên trang web của bạn được nhấp vào, hiển thị nhiều tùy chọn hơn trong quá trình này.
Các bước
Bước 1. Mở một dự án Dreamweaver
Bấm đúp vào tệp của dự án để làm như vậy. Nếu bạn muốn tạo một dự án Dreamweaver mới, thay vào đó bạn sẽ mở Dreamweaver, nhấp vào Tập tin, nhấp chuột Mớivà làm theo bất kỳ lời nhắc nào trên màn hình.
Bước 2. Tạo danh sách có thứ tự
Để tạo menu thả xuống, bạn phải có ít nhất một mục dấu đầu dòng. Bạn có thể tạo dấu đầu dòng bằng cách tắt CSS (nhấp vào Quan điểm mục menu, chọn Kết xuất phong cáchvà nhấp vào Kiểu hiển thị nếu nó được chọn), nhấp vào vị trí mà bạn muốn thêm điểm, nhấp vào biểu tượng dấu đầu dòng ở cuối cửa sổ và nhập tên của điểm. Sau đó, bạn nên bật lại CSS trước khi tiếp tục.
- Tên của điểm ở đây sẽ đóng vai trò là trình kích hoạt trình đơn thả xuống của bạn (ví dụ: nút mà một điểm di chuột qua hoặc chạm để mở trình đơn thả xuống).
- Bỏ qua bước này nếu bạn đã có một mục danh sách mà bạn muốn chuyển đổi thành menu thả xuống.
Bước 3. Xác định tên danh sách của bạn
Nhấn vào Mã số và đảm bảo rằng bạn đang ở trên Mã nguồn cài đặt, sau đó cuộn xuống mã danh sách đã đặt hàng của bạn (nó sẽ nằm giữa"
"thẻ và một"
") và tìm thẻ" "phía trên đầu"
. Từ trong trích dẫn là tên danh sách của bạn.
-
Nếu bạn không thấy tên, hãy chèn thẻ (trong đó tên đề cập đến tên ưa thích của bạn trong danh sách) ngay phía trên
nhãn.
Bước 4. Xóa (các) dấu đầu dòng
Đảm bảo rằng bạn đang ở đúng nơi bằng cách nhấp vào Thiết kế và sau đó nhấp vào Trình thiết kế CSS ở góc trên bên phải của cửa sổ, sau đó thực hiện như sau:
- Nhấp chuột + ở bên phải của tiêu đề "Bộ chọn".
- Nhập #name ul trong đó "name" là tên danh sách của bạn.
- Nhấn ↵ Enter hai lần.
- Cuộn xuống và nhấp vào list-style-type trong ngăn ở cuối Trình thiết kế CSS chuyển hướng.
- Nhấp chuột không ai trong menu bật lên kết quả.
Bước 5. Thay đổi danh sách đã đặt hàng của bạn để hiển thị theo chiều ngang
Làm như vậy:
- Nhấp chuột + ở bên phải của tiêu đề "Bộ chọn".
- Nhập #name li trong đó "name" là tên danh sách của bạn.
- Tìm tiêu đề "float" trong ngăn ở cuối Trình thiết kế CSS chuyển hướng.
- Nhấn vào Bên trái ngay bên phải của tiêu đề "float".
Bước 6. Thêm một thẻ hoạt động cho danh sách của bạn
Nhấn vào + ở bên phải của "Người chọn", sau đó nhập #name a (trong đó "name" là tên danh sách của bạn) và nhấn ↵ Enter hai lần.
Bước 7. Thêm màu nền
Chọn #name a nếu cần, sau đó nhấp vào tab "Màu nền" hình hộp ở đầu Trình thiết kế CSS ngăn, chọn màu nền và chọn màu nền để sử dụng.
Đây là màu mà các mục trong danh sách thả xuống của bạn sẽ sử dụng
Bước 8. Đặt các mục trong danh sách của bạn sử dụng định dạng "khối"
Định dạng này đảm bảo rằng khi ai đó nhấp hoặc nhấn vào một mục trong danh sách, họ có thể mở nó bằng cách chọn một chút ở trên hoặc dưới nó thay vì phải chọn chính xác văn bản:
- Hãy chắc chắn rằng của bạn #name a mục được chọn trong Trình thiết kế CSS chuyển hướng.
- Cuộn xuống tiêu đề "hiển thị" trong ngăn.
- Nhấp vào phía ngoài cùng bên phải của tiêu đề "hiển thị", sau đó nhấp vào khối trong menu kết quả.
Bước 9. Thêm đệm nếu cần thiết
Nếu bạn nhận thấy rằng các mục trong danh sách của bạn bị kẹt với nhau, bạn có thể đặt một số khoảng trống ở giữa chúng bằng cách thực hiện như sau:
- Hãy chắc chắn rằng của bạn #name a mục được chọn trong Trình thiết kế CSS chuyển hướng.
- Cuộn xuống tiêu đề "padding" trong ngăn.
- Thay đổi trường văn bản "px" trên cùng và dưới cùng để đọc ít nhất 5.
- Thay đổi trường văn bản "px" trái và phải để đọc ít nhất 10.
Bước 10. Tạo màu di chuột
Đây là màu sẽ xuất hiện khi bạn di con trỏ chuột qua một mục trong menu thả xuống:
- Nhấp chuột + ở bên phải của tiêu đề "Bộ chọn".
- Nhập #nave a: hover (trong đó "name" là tên danh sách của bạn) và nhấn ↵ Enter hai lần.
- Nhấp vào tab "Màu nền".
- Lựa chọn màu nền và sau đó chọn một màu sáng hơn bạn đã sử dụng cho màu nền.
Bước 11. Tắt CSS
Nhấn vào Quan điểm mục menu, chọn Kết xuất phong cáchvà nhấp vào Kiểu hiển thị trong cửa sổ bật ra.
Nếu Kiểu hiển thị tùy chọn chuyển sang màu xám, hãy nhấp vào bất kỳ đâu trong tài liệu Dreamweaver của bạn và thử lại.
Bước 12. Tạo nội dung menu thả xuống
Bạn có thể thực hiện việc này bằng cách thêm các điểm phụ bên dưới dấu đầu dòng mà bạn muốn sử dụng làm nút của trình đơn thả xuống:
- Nhấp vào bên phải của mục danh sách bạn muốn chuyển thành menu thả xuống, sau đó nhấn ↵ Enter.
- Nhấn Tab ↹.
- Nhập tên của mục menu thả xuống đầu tiên của bạn, sau đó nhấn ↵ Enter.
- Nhập tên của menu thả xuống tiếp theo, sau đó nhấn ↵ Enter và lặp lại nếu cần.
Bước 13. Buộc nội dung menu thả xuống vào một mục dấu đầu dòng
Làm như vậy:
- Nhấp chuột + bên cạnh "Bộ chọn", sau đó nhập #name ul ul và nhấn ↵ Enter hai lần.
- Cuộn xuống và nhấp vào trưng bày, sau đó nhấp vào không ai trong menu bật lên.
- Tìm và nhấp vào Chức vụ, sau đó nhấp vào tuyệt đối trong menu bật lên.
Bước 14. Tạo menu thả xuống chính nó
Bạn sẽ phải thêm một bộ chọn khác để thực hiện việc này:
- Nhấp chuột + bên cạnh "Bộ chọn", sau đó nhập # tên ul li: hover> ul và nhấn ↵ Enter hai lần.
- Tìm và nhấp vào trưng bày, sau đó nhấp vào khối trong menu bật lên kết quả.
Bước 15. Làm cho nội dung của trình đơn thả xuống hiển thị theo chiều dọc
Theo mặc định, nội dung menu thả xuống sẽ hiển thị trong một thanh ngang, nhưng bạn có thể buộc chúng thành một cột dọc bằng cách thực hiện như sau:
- Nhấp chuột + bên cạnh "Bộ chọn", sau đó nhập #name ul ul li và nhấn ↵ Enter hai lần.
- Tìm tiêu đề "float".
- Nhấp vào "không" () ở bên phải của tiêu đề "float".
Bước 16. Lưu dự án của bạn
Nhấn Ctrl + S (Windows) hoặc ⌘ Command + S (Mac) để làm như vậy.
