Jak utworzyć menu rozwijane w programie Dreamweaver

Etykietę możesz umieścić przed lub po menu rozwijanym.

Klucz dostępu

Jest to klucz, który może być użyty wraz z klawiszami Alt lub Option, aby przejść bezpośrednio do tego pola formularza. To sprawia, że ​​formularze są bardzo łatwe w użyciu bez potrzeby korzystania z myszy.

Indeks tabulatorów

Jest to kolejność, w jakiej należy uzyskać dostęp do pola formularza podczas korzystania z klawiatury do przechodzenia przez stronę internetową.

Po zaktualizowaniu opcji ułatwień dostępu kliknij przycisk OK.

Wybierz menu

Po wyświetleniu menu rozwijanego w widoku projektu Dreamweaver należy dodać do niego różne elementy. Najpierw wybierz rozwijane menu, klikając je. Dreamweaver umieści kolejną kropkowaną linię wokół tylko menu rozwijanego, aby pokazać, że ją wybrałeś.

Właściwości menu

Menu właściwości zmieni się na listę / właściwości menu dla tego rozwijanego menu. Możesz podać swoje menu ID (gdzie mówi "wybierz"), zdecyduj, czy chcesz, aby był to lis lub menu, nadaj mu klasę stylu z arkusza stylów i przypisz wartości do menu rozwijanego.

Jaka jest różnica między listą a menu?

Dreamweaver wywołuje menu rozwijane menu w dowolnym menu, które pozwala tylko na jedno zaznaczenie. "Lista" umożliwia wiele wyborów w menu rozwijanym i może zawierać więcej niż jeden element.

Jeśli chcesz, aby rozwijane menu miało wiele linii wysokiego poziomu, zmień go na typ "listy" i pozostaw pole "zaznaczenia" niezaznaczone.

Dodaj nowe elementy listy

Aby dodać nowe pozycje do menu, kliknij przycisk "Lista wartości …". Spowoduje to otwarcie powyższego okna. Wpisz etykietę przedmiotu w pierwszym polu. To będzie wyświetlane na stronie. Jeśli pozostawisz wartość pustą, to także to, co zostanie wysłane w formularzu.

Dodaj więcej i uporządkuj

Kliknij ikonę plusa, aby dodać więcej przedmiotów. Jeśli chcesz zmienić ich kolejność na liście, użyj strzałek w górę i w dół po prawej.

Podaj wartości wszystkich przedmiotów

Jak już wspomniałem w kroku 8, jeśli pozostawisz wartość pustą, etykieta zostanie wysłana do formularza. Ale możesz podać wszystkie wartości swoich przedmiotów - aby wysłać alternatywne informacje do formularza. Użyjesz tego dużo do takich rzeczy jak menu przeskoków i hiperłącza.

Wybierz wartość domyślną

Domyślnie strony internetowe wyświetlają tę opcję, która jest wymieniona jako domyślna. Ale jeśli chcesz wybrać inny, zaznacz go w polu "Początkowo zaznaczone" w menu Właściwości.

Zobacz swoją listę w widoku projektu

Po zakończeniu edycji właściwości program Dreamweaver wyświetli listę rozwijaną z wybraną wartością domyślną.

Zobacz swoją listę w widoku kodu

Jeśli przejdziesz do widoku kodu, zobaczysz, że Dreamweaver dodaje twoje menu rozwijane z bardzo czystym kodem. Jedynymi dodatkowymi atrybutami są te, które dodaliśmy z opcjami ułatwień dostępu. Kod jest wcięty i bardzo łatwy do odczytania i zrozumienia. Wprowadza nawet atrybut selected = "selected", ponieważ powiedziałem programowi Dreamweaver, że domyślnie piszę XHTML.

Zapisz i wyświetl w przeglądarce

Jeśli zapiszesz dokument i wyświetlisz go w przeglądarce internetowej, zobaczysz, że twoje menu rozwijane wygląda tak, jak byś tego oczekiwał.

Ale nic nie robi …

Menu, które stworzyliśmy, wygląda dobrze, ale nic nie robi. Aby zmusić go do zrobienia czegoś, musisz ustawić akcję formularza na samym formularzu.

Na szczęście Dreamweaver ma wbudowany rozwijany formularz menu, którego możesz użyć natychmiast w swojej witrynie, bez konieczności poznawania formularzy, CGI lub skryptów. Nazywa się to menu Jump.

Menu skoku Dreamweaver tworzy rozwijane menu z nazwami i adresami URL. Następnie możesz wybrać pozycję w menu, a strona internetowa przeniesie się do tej lokalizacji, tak jak w przypadku kliknięcia linku.

Przejdź do menu Wstaw i wybierz polecenie Formularz, a następnie menu przeskoku.

Okno menu przeskoku

W przeciwieństwie do standardowego menu rozwijanego, menu przeskoku otwiera nowe okno, w którym można nazwać pozycje menu i dodać szczegóły dotyczące działania formularza.

W przypadku pierwszego elementu zmień tekst "untitled1" na to, co chcesz przeczytać, i dodaj adres URL, do którego powinien prowadzić ten link.

Dodaj elementy do menu Jump

Kliknij element dodawania, aby dodać nowy element do menu przeskoku. Dodaj tyle elementów, ile chcesz.

Opcje menu przeskoku

Po dodaniu wszystkich pożądanych linków wybierz odpowiednie opcje:

Otwórz adresy URL w

Jeśli masz zestaw ramek, możesz otworzyć łącza w innej ramce. Możesz też zmienić opcję okna głównego na specjalny cel, aby adres URL otwierał się w nowym oknie lub w innym miejscu.

Nazwa menu

Nadaj swojemu menu unikalny identyfikator dla strony. Jest to wymagane, aby skrypt działał poprawnie. Pozwala także mieć wiele menu skoku w jednej formie - po prostu nadaj im różne nazwy.

Wstaw przycisk Go po menu

Lubię to wybrać, ponieważ czasami skrypt nie działa, gdy zmienia się menu. Jest również bardziej dostępny.

Wybierz pierwszą pozycję po zmianie adresu URL

Wybierz tę opcję, jeśli jako pierwszy element menu zostanie wyświetlony monit, taki jak "Wybierz jedną". Zapewni to, że ten element pozostanie domyślny na stronie.

Przejdź do widoku projektu menu

Podobnie jak w przypadku pierwszego menu, Dreamweaver tworzy menu skoku w widoku projektu z widocznym elementem domyślnym. Następnie możesz edytować menu rozwijane, tak jak każde inne.

Jeśli dokonasz edycji, nie zmieniaj żadnych identyfikatorów na elementach, w przeciwnym razie skrypt może nie działać.

Przejdź do menu w przeglądarce

Zapisanie pliku i naciśnięcie klawisza F12 spowoduje wyświetlenie strony w preferowanej przeglądarce. Tam możesz wybrać opcję, kliknij "Go", a menu skoku działa!