Co warto wiedzieć
- Przejdź do Wstaw > Formularz > Formularz. Kliknij przerywaną czerwoną linię na formularzu i przejdź do Wstaw > Form > Lista/Menu. Wybierz opcje ułatwień dostępu.
- Kliknij menu i wybierz jego właściwości, a następnie wybierz Lista wartości, aby dodać nowe pozycje menu. Kliknij znak plus, aby dodać więcej elementów.
- Dodaj wartości pozycji i wybierz pozycję domyślną. Aby dodać działania, idź Wstaw > Formularz > Menu przeskoku. Dodaj elementy do menu Jump i zapisz.
Dreamweaver ułatwia tworzenie rozwijanych menu dla Twojej witryny. Ale jak wszystkie formularze HTML, mogą być nieco skomplikowane. Ten samouczek przeprowadzi Cię przez kolejne etapy tworzenia menu rozwijanego w programie Dreamweaver.
Menu przeskoku tkacza snów
Dreamweaver 8 udostępnia również kreatora do tworzenia menu przeskoku do nawigacji w witrynie sieci Web. W przeciwieństwie do podstawowych menu rozwijanych, to menu zrobi coś, gdy skończysz. Nie będziesz musiał pisać żadnego JavaScript ani CGI, aby Twój rozwijany formularz działał. Ten samouczek wyjaśnia również, jak używać kreatora Dreamweaver 8 do tworzenia menu przeskoku.
Najpierw utwórz formularz
Z wyjątkiem specjalnych kreatorów, takich jak menu przeskoku, program Dreamweaver nie pomaga w „działaniu” formularzy HTML. W tym celu potrzebujesz CGI lub JavaScript.
Gdy dodajesz rozwijane menu do swojej witryny internetowej, pierwszą rzeczą, jakiej potrzebujesz, jest formularz, który go otacza. W programie Dreamweaver przejdź do menu Wstaw i kliknij Formularz, a następnie wybierz „Formularz”.
Wyświetla formularze w widoku projektu
Dreamweaver pokazuje wizualnie lokalizację formularza w widoku projektu, dzięki czemu wiesz, gdzie umieścić elementy formularza, ponieważ tagi menu rozwijanego są nieprawidłowe (i nie będą działać) poza elementem formularza. Jak widać na obrazku, formularz jest czerwoną przerywaną linią w widoku projektu.
Wybierz listę/menu
Rozwijane menu to w programie Dreamweaver pozycje „lista” lub „menu”. Aby dodać jeden do formularza, musisz przejść do menu Formularz w menu Wstaw i wybrać „Lista/Menu”. Upewnij się, że kursor znajduje się w obrębie czerwonej przerywanej linii w polu formularza.
Okno opcji specjalnych
W opcjach programu Dreamweaver znajduje się ekran ułatwień dostępu. Jeśli wypełnisz te pięć opcji, Twoje rozwijane menu będą od razu bardziej dostępne niż inne witryny.
Dostępność formularza
Opcje dostępności to:
Etykieta
Pole etykiety jest wyświetlane jako tekst obok elementu formularza. Wpisz nazwę menu rozwijanego. Może to być pytanie lub krótka fraza, na którą odpowie menu rozwijane.
Styl
HTML zawiera tag label, który identyfikuje etykiety formularzy w przeglądarce internetowej. Do wyboru jest zawinięcie menu rozwijanego i tekstu etykiety znacznikiem, użycie atrybutu „for” w znaczniku etykiety, aby określić, do którego znacznika formularza się odnosi, lub w ogóle nie używać znacznika etykiety.
Pozycja
Możesz umieścić swoją etykietę przed lub za menu rozwijanym.
Klucz dostępu
Odwiedzający mogą użyć klucza dostępu z klawiszami "Obraz" lub opcji, aby przejść bezpośrednio do tego pola formularza. Ten skrót klawiaturowy sprawia, że formularze są bardzo łatwe w użyciu bez myszy. alt="
Indeks kart
Indeks tabulatorów to sposób, w jaki użytkownicy powinni uzyskiwać dostęp do pól formularzy podczas używania klawiatury do przeglądania stron internetowych.
Po zaktualizowaniu opcji ułatwień dostępu kliknij OK.
Wybierz menu
Po wyświetleniu rozwijanego menu w widoku projektu programu Dreamweaver należy dodać różne elementy. Najpierw wybierz menu rozwijane, klikając je. Dreamweaver umieści kolejną przerywaną linię wokół menu rozwijanego, aby pokazać, że je wybrałeś.
Właściwości menu
Menu właściwości zmieni się na listę/właściwości menu dla tego menu rozwijanego. Tam możesz nadać swojemu menu identyfikator (gdzie jest napisane „wybierz”), zdecydować, czy ma to być lista, czy menu, nadać mu klasę stylów z arkusza stylów i przypisać wartości do listy rozwijanej.
Jaka jest różnica między listą a menu?
Dreamweaver nazywa menu rozwijane dowolnym menu rozwijanym, które umożliwia tylko jeden wybór. „Lista” umożliwia wiele wyborów z listy rozwijanej i może zawierać więcej niż jeden element.
Jeśli chcesz, aby menu rozwijane miało wiele wierszy wysokości, zmień je na typ "listy" i pozostaw pole "wybory" niezaznaczone.
Dodaj nowe pozycje listy
Aby dodać nowe pozycje do menu, kliknij przycisk „Lista wartości…”, który otworzy powyższe okno. Następnie wpisz etykietę przedmiotu w pierwszym polu. Zostanie wyświetlony na stronie.
Dodaj więcej i zmień kolejność
Kliknij ikonę plusa, aby dodać więcej elementów. Jeśli chcesz zmienić ich kolejność w polu listy, użyj strzałek w górę iw dół po prawej stronie.
Podaj wartości wszystkich pozycji
Jeśli pozostawisz wartość pustą, etykieta przejdzie do formularza. Ale możesz podać wszystkie wartości swoich przedmiotów - aby wysłać alternatywne informacje do swojego formularza. Będziesz go często używać do takich rzeczy, jak menu przeskakiwania i hiperłącza.
Wybierz domyślną
Strony internetowe wyświetlają domyślnie dowolny element listy rozwijanej jako pierwszy na liście. Ale jeśli chcesz wybrać inny, zaznacz go w polu "Początkowo wybrany" w menu Właściwości.
Zobacz swoją listę w widoku projektu
Gdy zakończysz edycję właściwości, Dreamweaver wyświetli listę rozwijaną z wybraną wartością domyślną.
Zobacz swoją listę w widoku kodu
Jeśli przełączysz się na widok kodu, zobaczysz, że Dreamweaver dodaje rozwijane menu z czystym kodem. Jedynymi dodatkowymi atrybutami są opcje ułatwień dostępu. Cały kod jest wcięty i bardzo łatwy do odczytania i zrozumienia.
Zapisz i wyświetl w przeglądarce
Jeśli zapiszesz dokument i wyświetlisz go w przeglądarce internetowej, zobaczysz, że rozwijane menu wygląda dokładnie tak, jak byś tego oczekiwał.
Ale to nic nie daje…
Menu, które stworzyliśmy powyżej, wygląda dobrze, ale nic nie robi. Aby zmusić go do zrobienia czegoś, musisz skonfigurować akcję formularza na samym formularzu.
Na szczęście program Dreamweaver ma wbudowany formularz menu rozwijanego, którego można od razu użyć w witrynie bez konieczności poznawania formularzy, CGI lub skryptów. Nazywa się to menu przeskoku.
Menu skoku programu Dreamweaver tworzy menu rozwijane z nazwami i adresami URL. Następnie możesz wybrać pozycję z menu, a strona internetowa zostanie przeniesiona do tej lokalizacji, tak jak po kliknięciu łącza.
Przejdź do menu Wstaw i wybierz Formularz, a następnie Przeskocz do menu.
Okno menu przeskoku
W przeciwieństwie do standardowego menu rozwijanego, menu Skok otwiera nowe okno, w którym możesz nazwać elementy menu i dodać szczegóły dotyczące działania formularza.
Dla pierwszego elementu zmień tekst "bez tytułu1" na taki, jaki chcesz, aby był czytany i dodaj adres URL.
Dodaj pozycje do menu przeskoku
Kliknij element dodawania, aby dodać nowy element do menu przeskoku. Dodaj tyle elementów, ile chcesz.
Opcje menu przeskoku
Po dodaniu wszystkich żądanych linków należy wybrać 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 strony. Jest to wymagane do poprawnego działania skryptu. Pozwala również na posiadanie wielu menu przeskoku w jednej formie - nadaj im różne nazwy.
Wstaw przycisk Go po menu
Lubię to wybrać, ponieważ czasami skrypt nie działa po zmianie menu. Jest też bardziej dostępny.
Wybierz pierwszy element po zmianie adresu URL
Wybierz tę opcję, jeśli jako pierwszy element menu pojawi się monit, taki jak „Wybierz jeden”. Zapewni to, że ten element pozostanie domyślny na stronie.
Widok projektu menu przeskoku
Tak jak w przypadku pierwszego menu, program Dreamweaver konfiguruje menu przeskoku w widoku projektu z widocznym elementem domyślnym. Następnie możesz edytować menu rozwijane tak, jak każde inne.
Jeśli go edytujesz, upewnij się, że nie zmieniasz ż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ę, kliknąć „Idź”, a menu przeskoku zadziała.
