Điều cần biết
- Vào Chèn> Mẫu> Mẫu. Nhấp vào đường chấm chấm màu đỏ trên biểu mẫu và đi tới Chèn> Mẫu> Danh sách / Menu. Chọn các tùy chọn trợ năng.
- Nhấp vào menu và chọn thuộc tính của nó, sau đó chọn Liệt kê các giá trị để thêm các mục menu mới. Nhấp vào dấu cộng để thêm các mục khác.
- Thêm các giá trị mục và chọn một mục mặc định. Để thêm hành động, hãy vào Insert> Form> Jump Menu. Thêm các mục vào menu Jump và lưu.
Dreamweaver giúp bạn dễ dàng tạo menu thả xuống cho trang web của mình. Nhưng giống như tất cả các dạng HTML, chúng có thể hơi phức tạp. Hướng dẫn này sẽ hướng dẫn bạn các bước để tạo menu thả xuống trong Dreamweaver.
Dreamweaver Jump Menus
Dreamweaver 8 cũng cung cấp một trình hướng dẫn để tạo một menu nhảy để điều hướng trong trang Web của bạn. Không giống như các menu thả xuống cơ bản, menu này sẽ thực hiện một số việc khi bạn hoàn thành. Bạn sẽ không phải viết bất kỳ JavaScript hoặc CGI nào để biểu mẫu thả xuống của bạn hoạt động. Hướng dẫn này cũng giải thích cách sử dụng trình hướng dẫn Dreamweaver 8 để tạo menu nhảy.
Đầu tiên, Tạo Biểu mẫu
Ngoại trừ các trình hướng dẫn đặc biệt như menu nhảy, Dreamweaver không giúp bạn làm cho các biểu mẫu HTML "hoạt động". Để làm được điều này, bạn cần có CGI hoặc JavaScript.
Khi bạn thêm trình đơn thả xuống vào trang Web của mình, điều đầu tiên bạn cần là một biểu mẫu để bao quanh nó. Trong Dreamweaver, hãy chuyển đến menu Chèn và nhấp vào Biểu mẫu, sau đó chọn "Biểu mẫu".
Hiển thị Biểu mẫu trong Chế độ xem Thiết kế
Dreamweaver hiển thị vị trí biểu mẫu của bạn một cách trực quan trong chế độ xem thiết kế, vì vậy bạn biết nơi đặt các phần tử biểu mẫu của mình vì các thẻ menu thả xuống không hợp lệ (và sẽ không hoạt động) bên ngoài phần tử biểu mẫu. Như bạn có thể thấy trong hình ảnh, biểu mẫu là đường chấm màu đỏ trong chế độ xem thiết kế.
Chọn Danh sách / Menu
Menu thả xuống được gọi là các mục "danh sách" hoặc "menu" trong Dreamweaver. Vì vậy, để thêm một vào biểu mẫu của bạn, bạn cần vào menu Biểu mẫu trên menu Chèn và chọn "Danh sách / Menu." Đảm bảo rằng con trỏ của bạn nằm trong đường chấm màu đỏ của hộp biểu mẫu.
Cửa sổ Tùy chọn Đặc biệt
Trong Tùy chọn Dreamweaver, có màn hình Trợ năng. Các menu thả xuống của bạn sẽ ngay lập tức dễ truy cập hơn các trang web khác nếu bạn điền vào năm tùy chọn này.
Khả năng tiếp cận biểu mẫu
Các tùy chọn trợ năng là:
Nhãn
Trường nhãn hiển thị dưới dạng văn bản bên cạnh phần tử biểu mẫu của bạn. Nhập tên cho menu thả xuống của bạn. Nó có thể là một câu hỏi hoặc một cụm từ ngắn mà menu thả xuống sẽ trả lời.
Phong cách
HTML bao gồm một thẻ nhãn để xác định các nhãn biểu mẫu của bạn với trình duyệt web. Lựa chọn của bạn là bao bọc menu thả xuống và văn bản nhãn bằng thẻ, sử dụng thuộc tính "for" trên thẻ nhãn để xác định thẻ biểu mẫu nào mà nó tham chiếu hoặc hoàn toàn không sử dụng thẻ nhãn.
Vị trí
Bạn có thể đặt nhãn của mình trước hoặc sau menu thả xuống.
Phím truy cập
Khách truy cập có thể sử dụng khóa truy cập với phím"Hình ảnh" hoặc Tùy chọn để truy cập trực tiếp vào trường biểu mẫu đó. Phím tắt này làm cho biểu mẫu của bạn rất dễ sử dụng mà không cần chuột. alt="
Tab Chỉ mục
Chỉ mục tab là cách người dùng truy cập vào các trường biểu mẫu khi sử dụng bàn phím để chuyển tab qua trang web.
Khi bạn đã cập nhật các tùy chọn trợ năng của mình, hãy nhấp vào OK.
Chọn Menu
Sau khi menu thả xuống của bạn hiển thị trong chế độ xem thiết kế Dreamweaver, bạn cần thêm các yếu tố khác nhau. Đầu tiên, chọn menu thả xuống bằng cách nhấp vào nó. Dreamweaver sẽ đặt một đường chấm khác xung quanh menu thả xuống để thể hiện rằng bạn đã chọn nó.
Thuộc tính Menu
Menu thuộc tính sẽ thay đổi thành thuộc tính danh sách / menu cho menu thả xuống đó. Ở đó, bạn có thể cung cấp cho menu của mình một ID (trong đó có nội dung "chọn"), quyết định xem bạn muốn nó là danh sách hay menu, cung cấp cho nó một lớp kiểu từ trang định kiểu của bạn và gán các giá trị cho menu thả xuống.
Sự khác biệt giữa Danh sách và Thực đơn là gì?
Dreamweaver gọi một menu thả xuống menu bất kỳ menu thả xuống nào chỉ cho phép một lựa chọn. Một "danh sách" cho phép nhiều lựa chọn trong menu thả xuống và có thể nhiều hơn một mục.
Nếu bạn muốn menu thả xuống có nhiều dòng, hãy đổi nó thành loại "danh sách" và bỏ chọn hộp "lựa chọn".
Thêm Mục Danh sách Mới
Để thêm các mục mới vào menu của bạn, hãy nhấp vào nút "Liệt kê các giá trị…", nút này sẽ mở ra cửa sổ ở trên. Sau đó, nhập nhãn mặt hàng của bạn vào hộp đầu tiên. Nó sẽ hiển thị trên trang.
Thêm Thêm và Sắp xếp lại
Nhấp vào biểu tượng dấu cộng để thêm các mục khác. Nếu bạn muốn sắp xếp lại chúng trong hộp danh sách, hãy sử dụng mũi tên lên và xuống ở bên phải.
Cho Tất Cả Các Vật Phẩm Giá Trị
Nếu bạn để trống giá trị, nhãn sẽ chuyển sang biểu mẫu. Nhưng bạn có thể cung cấp cho tất cả các giá trị mục của mình - để gửi thông tin thay thế vào biểu mẫu của bạn. Bạn sẽ sử dụng điều này rất nhiều cho những thứ như menu nhảy và siêu liên kết.
Chọn Mặc định
Các trang web mặc định hiển thị bất kỳ mục thả xuống nào được liệt kê đầu tiên là mục mặc định. Nhưng nếu bạn muốn một cái khác được chọn, hãy đánh dấu nó trong hộp "Đã chọn ban đầu" trên menu Thuộc tính.
Xem Danh sách của Bạn trong Chế độ xem Thiết kế
Sau khi bạn chỉnh sửa xong các thuộc tính, Dreamweaver sẽ hiển thị danh sách thả xuống của bạn với giá trị mặc định được chọn.
Xem Danh sách của Bạn trong Chế độ xem Mã
Nếu bạn chuyển sang chế độ xem mã, bạn có thể thấy Dreamweaver thêm vào menu thả xuống của bạn với mã sạch. Các thuộc tính bổ sung duy nhất là các tùy chọn trợ năng. Tất cả mã đều được thụt lề và rất dễ đọc và dễ hiểu.
Lưu và Xem trong Trình duyệt
Nếu bạn lưu tài liệu và xem nó trong trình duyệt web, bạn có thể thấy rằng menu thả xuống của bạn trông giống như bạn mong đợi.
Nhưng nó không làm được gì cả…
Menu chúng tôi tạo ở trên trông ổn, nhưng nó không làm được gì cả. Để giúp nó thực hiện điều gì đó, bạn cần thiết lập một hành động biểu mẫu trên chính biểu mẫu đó.
May mắn thay, Dreamweaver có một biểu mẫu trình đơn thả xuống được tích hợp sẵn mà bạn có thể sử dụng ngay lập tức trên trang web của mình mà không cần tìm hiểu về biểu mẫu, CGI hoặc tập lệnh. Nó được gọi là Jump Menu.
Trình đơn Dreamweaver Jump thiết lập một trình đơn thả xuống với tên và URL. Sau đó, bạn có thể chọn một mục trong menu và trang Web sẽ chuyển đến vị trí đó, giống như khi bạn nhấp vào một liên kết.
Đi tới menu Chèn và chọn Biểu mẫu, sau đó chọn Menu Nhảy.
Cửa sổ Menu Nhảy
Không giống như menu thả xuống tiêu chuẩn, menu Jump mở ra một cửa sổ mới để bạn đặt tên cho các mục menu của mình và thêm chi tiết về cách thức hoạt động của biểu mẫu.
Đối với mục đầu tiên, hãy thay đổi văn bản "chưa có tiêu đề1" thành nội dung bạn muốn nó đọc và thêm URL.
Thêm các mục vào Menu Jump của bạn
Nhấp vào mục thêm để thêm mục mới vào menu nhảy của bạn. Thêm bao nhiêu mục tùy thích.
Tùy chọn Menu Nhảy
Khi bạn đã thêm tất cả các liên kết bạn muốn, bạn nên chọn các tùy chọn của mình:
Mở URL trong
Nếu bạn có một bộ khung, bạn có thể mở các liên kết trong một khung khác. Hoặc bạn có thể thay đổi tùy chọn của Cửa sổ chính thành một mục tiêu đặc biệt để URL sẽ mở trong cửa sổ mới hoặc nơi khác.
Tên Menu
Cung cấp cho menu của bạn một ID duy nhất cho trang. Nó được yêu cầu để tập lệnh hoạt động chính xác. Nó cũng cho phép bạn có nhiều menu nhảy trong một biểu mẫu - đặt tất cả các tên khác nhau cho chúng.
Chèn Nút Bắt đầu Sau Trình đơn
Tôi thích chọn cái này vì đôi khi script không hoạt động khi menu thay đổi. Nó cũng dễ tiếp cận hơn.
Chọn mục đầu tiên sau khi thay đổi URL
Chọn mục này nếu bạn có lời nhắc như "Chọn một" làm mục menu đầu tiên. Điều này sẽ đảm bảo rằng mục đó vẫn mặc định trên trang.
Chế độ xem thiết kế menu Jump
Cũng giống như menu đầu tiên của bạn, Dreamweaver thiết lập menu nhảy của bạn trong chế độ xem thiết kế với mục mặc định hiển thị. Sau đó, bạn có thể chỉnh sửa menu thả xuống giống như cách bạn làm.
Nếu bạn chỉnh sửa nó, hãy đảm bảo không thay đổi bất kỳ ID nào trên các mục; nếu không, tập lệnh có thể không hoạt động.
Nhảy Menu trong Trình duyệt
Lưu tệp và nhấn F12 sẽ hiển thị trang trong trình duyệt ưa thích của bạn. Ở đó, bạn có thể chọn một tùy chọn, nhấp vào "Bắt đầu" và menu nhảy hoạt động.
