Dreamweaver giúp dễ dàng tạo các menu thả xuống cho trang Web của bạn. Nhưng giống như tất cả các hình thức HTML họ có thể là một chút khôn lanh. Hướng dẫn này sẽ hướng dẫn bạn qua các bước để tạo một trình đơn thả xuống trong Dreamweaver.
Dreamweaver Jump Menu
Dreamweaver 8 cũng cung cấp một trình hướng dẫn để tạo một menu nhảy cho điều hướng trong trang Web của bạn. Không giống như các trình đơn thả xuống cơ bản, trình đơn này sẽ thực sự làm điều gì đó khi bạn hoàn tất. 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.
01 trên 20
Đầu tiên tạo biểu mẫu
Lưu ý quan trọng về biểu mẫu HTML và Dreamweaver:
Ngoại trừ các trình thuật sĩ đặc biệt như menu nhảy, Dreamweaver không giúp bạn tạo các biểu mẫu HTML "hoạt động". Đối với điều này, bạn cần một CGI hoặc JavaScript. Vui lòng xem hướng dẫn của tôi Làm HTML Forms Work để biết thêm thông tin.
Khi bạn thêm một 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, vào menu Insert và nhấn Form, sau đó chọn "Form".
02 trên 20
Hiển thị biểu mẫu trong dạng 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 giao diện thiết kế, vì vậy bạn biết vị trí đặt các phần tử biểu mẫu của mình. Điều này rất quan trọng, bởi vì các thẻ trình đơn 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, biểu mẫu là đường chấm chấm màu đỏ trong dạng xem thiết kế.
03 trên 20
Chọn Danh sách / Menu
Các 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 hình thức của bạn, bạn cần phải đi vào menu Form trên menu Insert và chọn "List / Menu". Hãy chắc chắn rằng con trỏ của bạn nằm trong đường chấm chấm màu đỏ của hộp biểu mẫu của bạn.
04 trên 20
Cửa sổ tùy chọn đặc biệt
Trong các tùy chọn Dreamweaver có một màn hình về khả năng tiếp cận. Tôi chọn để Dreamweaver hiển thị cho tôi tất cả các thuộc tính trợ năng. Và màn hình này là kết quả của điều đó. Biểu mẫu là nơi nhiều trang web rơi vào khả năng truy cập và bằng cách điền vào năm tùy chọn này, các trình đơn thả xuống của bạn sẽ ngay lập tức có thể truy cập dễ dàng hơn.
05 trên 20
Trợ năng biểu mẫu
Tùy chọn trợ năng là:
Nhãn
Đây là tên cho trường. Nó sẽ 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.
Viết những gì bạn muốn gọi trình đơn thả xuống của bạn. Đây có thể là câu hỏi hoặc cụm từ ngắn mà trình đơn thả xuống sẽ trả lời.
Phong cách
HTML bao gồm thẻ nhãn để xác định nhãn biểu mẫu của bạn cho trình duyệt. Lựa chọn của bạn là bao bọc trình đơn thả xuống và văn bản nhãn với thẻ, để sử dụng thuộc tính "cho" trên thẻ nhãn để xác định thẻ biểu mẫu nào tham chiếu hoặc không sử dụng thẻ nhãn.
Tôi thích sử dụng thuộc tính cho, vì sau đó nếu tôi cần di chuyển nhãn vì một số lý do, nó vẫn sẽ được đính kèm vào trường biểu mẫu chính xác.
Chức vụ
Bạn có thể đặt nhãn của mình trước hoặc sau menu thả xuống.
Khóa truy cập
Đây là chìa khóa có thể được sử dụng cùng với phím Alt hoặc Option để chuyển trực tiếp đến trường biểu mẫu đó. Điều này làm cho các biểu mẫu của bạn rất dễ sử dụng mà không cần chuột. Cách thiết lập khóa truy cập bằng HTML
Chỉ mục tab
Đây là thứ tự mà trường biểu mẫu sẽ được truy cập khi sử dụng bàn phím để tab thông qua trang Web. Hiểu Tabindex
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.
06 trên 20
Chọn Menu
Một khi bạn có trình đơn thả xuống của bạn hiển thị trong thiết kế xem, bạn cần phải thêm các yếu tố khác nhau vào nó. Đầ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 chấm khác xung quanh chỉ là trình đơn thả xuống, để cho thấy rằng bạn đã chọn nó.
07 trên 20
Thuộc tính menu
Menu thuộc tính sẽ thay đổi thành thuộc tính danh sách / menu cho trình đơn thả xuống đó. Ở đó bạn có thể cung cấp cho trình đơn của bạn một ID (nơi nó nói "chọn"), quyết định xem bạn muốn nó là một lis hay một trình đơn, cung cấp cho nó một lớp phong cách từ bảng định kiểu của bạn và gán các giá trị cho trình đơn thả xuống.
Sự khác biệt giữa danh sách và menu là gì?
Dreamweaver gọi menu thả xuống 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 trình đơn thả xuống và có thể cao hơn một mục.
Nếu bạn muốn một trình đơn thả xuống có nhiều dòng cao, hãy thay đổi nó thành loại "danh sách" và bỏ chọn hộp "lựa chọn".
08 trên 20
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 "Danh sách giá trị ...". Điều này sẽ mở cửa sổ trên. Nhập nhãn mục của bạn vào hộp đầu tiên. Đây là những gì sẽ hiển thị trên trang. Nếu bạn để trống giá trị, đó cũng là những gì sẽ được gửi trong biểu mẫu.
09 trên 20
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.
10 trên 20
Cung cấp tất cả các mục giá trị
Như tôi đã đề cập ở bước 8, nếu bạn để trống giá trị, nhãn sẽ được gửi đến biểu mẫu. Nhưng bạn có thể cung cấp tất cả các giá trị của bạn - để gửi thông tin thay thế cho 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.
11 trên 20
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 mục mặc định. Nhưng nếu bạn muốn một cái khác được chọn, hãy chọn nó trong hộp "Đã chọn ban đầu" trên menu Thuộc tính.
12 trên 20
Xem danh sách của bạn trong dạng xem thiết kế
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.
13 trên 20
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 rằng Dreamweaver thêm trình đơn thả xuống của bạn với mã rất rõ ràng. Các thuộc tính phụ chỉ là những thuộc tính mà chúng tôi đã thêm với các tùy chọn trợ năng. Mã này được thụt vào và rất dễ đọc và dễ hiểu. Nó thậm chí còn đặt thuộc tính được chọn = "selected" bởi vì tôi đã nói với Dreamweaver rằng tôi mặc định để viết XHTML.
14 trên 20
Lưu và xem trong trình duyệt
Nếu bạn lưu tài liệu và xem nó trong một trình duyệt Web, bạn có thể thấy rằng trình đơn thả xuống của bạn trông giống như bạn mong đợi nó.
15 trên 20
Nhưng nó không làm bất cứ điều gì
Menu chúng ta tạo ở trên trông có vẻ ổn, nhưng nó không làm gì cả. Để làm đ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, đó là một hướng dẫn hoàn toàn khác.
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 trên trang web của mình mà không cần phải tìm hiểu về biểu mẫu, CGI hoặc tập lệnh. Nó được gọi là Jump Menu.
Menu Dreamweaver Jump thiết lập menu 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ẽ di chuyển đến vị trí đó, giống như khi bạn đã nhấp vào một liên kết.
Vào menu Insert và chọn Form rồi chọn Jump Menu.
16 trên 20
Jump Menu Window
Không giống như menu thả xuống tiêu chuẩn, menu Jump sẽ mở ra một cửa sổ mới để bạn đặt tên cho các mục menu của bạn và thêm chi tiết về cách biểu mẫu sẽ hoạt động.
Đối với mục đầu tiên, hãy thay đổi văn bản "untitled1" thành nội dung bạn muốn đọc và thêm URL mà liên kết đó sẽ đến.
17 trên 20
Thêm mục vào menu nhảy 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.
18 trên 20
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 In
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ở tại cửa sổ mới hoặc ở nơi khác.
Tên menu
Đặt cho trình đơn của bạn một ID duy nhất cho trang. Điều này là cần thiết để kịch bản sẽ 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 - chỉ cần cung cấp cho họ tất cả các tên khác nhau.
Chèn nút đi sau menu
Tôi thích chọn điều này vì đôi khi tập lệnh 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 tùy chọn 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.
19 trên 20
Jump Menu Design View
Cũng giống như với menu đầu tiên của bạn, Dreamweaver thiết lập trình đơn 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 trình đơn thả xuống giống như bất kỳ menu nào khác.
Nếu bạn chỉnh sửa, 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.
20 trên 20
Jump 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, bấm vào "Go" và menu nhảy hoạt động!