Wat te weten
- Ga naar Insert > Form > Form. Klik op de rode stippellijn op het formulier en ga naar Insert > Form > List/Menu. Kies toegankelijkheidsopties.
- Klik op het menu en selecteer de eigenschappen ervan, selecteer vervolgens Lijstwaarden om nieuwe menu-items toe te voegen. Klik op het plusteken om meer items toe te voegen.
- Voeg itemwaarden toe en kies een standaarditem. Om acties toe te voegen, ga naar Insert > Form > Jump Menu. Voeg items toe aan het Jump-menu en sla op.
Dreamweaver maakt het gemakkelijk om vervolgkeuzemenu's voor uw website te maken. Maar zoals alle HTML-formulieren kunnen ze een beetje lastig zijn. Deze zelfstudie leidt u door de stappen voor het maken van een vervolgkeuzemenu in Dreamweaver.
Dreamweaver Jump Menu's
Dreamweaver 8 biedt ook een wizard om een springmenu te maken voor navigatie op uw website. In tegenstelling tot standaard vervolgkeuzemenu's, zal dit menu iets doen als u klaar bent. U hoeft geen JavaScript of CGI's te schrijven om uw vervolgkeuzeformulier te laten werken. In deze zelfstudie wordt ook uitgelegd hoe u de Dreamweaver 8-wizard kunt gebruiken om een springmenu te maken.
Maak eerst het formulier
Behalve speciale wizards zoals het springmenu, helpt Dreamweaver u niet om HTML-formulieren te laten "werken". Hiervoor heeft u een CGI of JavaScript nodig.
Als je een vervolgkeuzemenu aan je website toevoegt, is het eerste wat je nodig hebt een formulier eromheen. Ga in Dreamweaver naar het menu Invoegen en klik op Formulier en kies vervolgens 'Formulier'.
Formulier wordt weergegeven in ontwerpweergave
Dreamweaver toont uw formulierlocatie visueel in de ontwerpweergave, zodat u weet waar u uw formulierelementen moet plaatsen, omdat tags in vervolgkeuzemenu's niet geldig zijn (en niet werken) buiten het formulierelement. Zoals u in de afbeelding kunt zien, is de vorm de rode stippellijn in de ontwerpweergave.
Kies Lijst/Menu
Vervolgkeuzemenu's worden in Dreamweaver "lijst"- of "menu"-items genoemd. Dus om er een aan uw formulier toe te voegen, moet u naar het menu Formulier in het menu Invoegen gaan en "Lijst/Menu" kiezen. Zorg ervoor dat uw cursor zich binnen de rode stippellijn van uw formuliervak bevond.
Venster speciale opties
In de Dreamweaver-opties is er een scherm over Toegankelijkheid. Uw vervolgkeuzemenu's zijn onmiddellijk toegankelijker dan andere websites als u deze vijf opties invult.
Toegankelijkheid formulier
De toegankelijkheidsopties zijn:
Label
Het labelveld verschijnt als tekst naast je formulierelement. Typ een naam voor uw vervolgkeuzemenu. Het kan een vraag zijn of een korte zin die het vervolgkeuzemenu zal beantwoorden.
Stijl
HTML bevat een labeltag om uw formulierlabels voor de webbrowser te identificeren. Uw keuzes zijn om het vervolgkeuzemenu en de labeltekst met de tag te verpakken, om het attribuut "for" op de labeltag te gebruiken om te identificeren naar welke vormtag het verwijst, of om de labeltag helemaal niet te gebruiken.
Positie
U kunt uw label voor of na het vervolgkeuzemenu plaatsen.
Toegangssleutel
Bezoekers kunnen een toegangssleutel gebruiken met de "Image" of Option-toetsen om direct naar dat formulierveld te gaan. Deze sneltoets maakt je formulieren heel gemakkelijk te gebruiken zonder muis. alt="
Tab Index
De tabbladindex is hoe gebruikers toegang moeten krijgen tot de formuliervelden wanneer ze het toetsenbord gebruiken om door de webpagina te bladeren.
Als je je toegankelijkheidsopties hebt bijgewerkt, klik je op OK.
Selecteer het menu
Zodra uw vervolgkeuzemenu wordt weergegeven in de ontwerpweergave van Dreamweaver, moet u de verschillende elementen toevoegen. Selecteer eerst het vervolgkeuzemenu door erop te klikken. Dreamweaver plaatst nog een stippellijn rond het vervolgkeuzemenu om aan te geven dat je het hebt gekozen.
Menu Eigenschappen
Het eigenschappenmenu verandert in de lijst/menu-eigenschappen voor dat vervolgkeuzemenu. Daar kun je je menu een ID geven (waar staat "selecteren"), beslissen of je wilt dat het een lijst of een menu is, het een stijlklasse geven uit je stijlblad en waarden toewijzen aan de vervolgkeuzelijst.
Wat is het verschil tussen lijst en menu?
Dreamweaver noemt een menu-vervolgkeuzemenu elke vervolgkeuzelijst die slechts één selectie toestaat. Een "lijst" staat meerdere keuzes toe in de vervolgkeuzelijst en kan meer dan één item hoog zijn.
Als je wilt dat een vervolgkeuzemenu meerdere regels hoog is, verander het dan in een "lijst"-type en laat het vakje "selecties" uitgeschakeld.
Nieuwe lijstitems toevoegen
Om nieuwe items aan uw menu toe te voegen, klikt u op de knop "Lijstwaarden…", waarmee het bovenstaande venster wordt geopend. Typ vervolgens uw itemlabel in het eerste vak. Het wordt op de pagina weergegeven.
Voeg meer toe en bestel opnieuw
Klik op het pluspictogram om meer items toe te voegen. Als u ze opnieuw wilt ordenen in de keuzelijst, gebruikt u de pijlen omhoog en omlaag aan de rechterkant.
Geef alle items waarden
Als u de waarde leeg laat, gaat het label naar het formulier. Maar u kunt al uw items waarden geven - om alternatieve informatie naar uw formulier te sturen. Je zult dit veel gebruiken voor zaken als springmenu's en hyperlinks.
Kies een standaard
Webpagina's geven standaard het dropdown-item weer dat als eerste wordt weergegeven als het standaarditem. Maar als u een andere wilt selecteren, markeer deze dan in het vak "Aanvankelijk geselecteerd" in het menu Eigenschappen.
Bekijk uw lijst in ontwerpweergave
Zodra u klaar bent met het bewerken van de eigenschappen, toont Dreamweaver uw vervolgkeuzelijst met de standaardwaarde geselecteerd.
Bekijk uw lijst in codeweergave
Als u overschakelt naar de codeweergave, kunt u zien dat Dreamweaver uw vervolgkeuzemenu met schone code toevoegt. De enige extra attributen zijn de toegankelijkheidsopties. De code is allemaal ingesprongen en zeer gemakkelijk te lezen en te begrijpen.
Opslaan en bekijken in browser
Als je het document opslaat en in een webbrowser bekijkt, kun je zien dat je vervolgkeuzemenu er precies zo uitziet als je zou verwachten.
Maar het doet niets…
Het menu dat we hierboven hebben gemaakt, ziet er goed uit, maar het doet niets. Om het iets te laten doen, moet je een formulieractie instellen op het formulier zelf.
Gelukkig heeft Dreamweaver een ingebouwd vervolgkeuzemenu dat u direct op uw site kunt gebruiken zonder dat u hoeft te leren over formulieren, CGI's of scripting. Het heet een Jump Menu.
Het Dreamweaver Jump Menu stelt een vervolgkeuzemenu in met namen en URL's. Vervolgens kunt u een item in het menu kiezen en de webpagina wordt naar die locatie verplaatst, net alsof u op een link had geklikt.
Ga naar het menu Invoegen en kies Formulier en vervolgens Menu Springen.
Jump Menu Window
In tegenstelling tot het standaard vervolgkeuzemenu, opent het Jump-menu een nieuw venster waarin je je menu-items een naam kunt geven en details kunt toevoegen over hoe het formulier zou moeten werken.
Voor het eerste item, verander de tekst "un titled1" in wat je wilt lezen en voeg een URL toe.
Voeg items toe aan je springmenu
Klik op het item toevoegen om een nieuw item aan je springmenu toe te voegen. Voeg zoveel items toe als je wilt.
Springmenu-opties
Zodra je alle gewenste links hebt toegevoegd, moet je je opties kiezen:
Open URL's in
Als je een frameset hebt, kun je de links in een ander frame openen. Of u kunt de optie Hoofdvenster wijzigen in een speciaal doel, zodat de URL in een nieuw venster of ergens anders wordt geopend.
Menunaam
Geef je menu een unieke ID voor de pagina. Het is vereist zodat het script correct werkt. Het stelt je ook in staat om meerdere springmenu's in één vorm te hebben - geef ze allemaal verschillende namen.
Voeg de startknop in na het menu
Ik vind het leuk om dit te selecteren omdat het script soms niet werkt als het menu verandert. Het is ook toegankelijker.
Selecteer eerste item na URL-wijziging
Selecteer dit als u een prompt zoals "Selecteer een" als het eerste menu-item hebt. Dit zorgt ervoor dat dat item standaard op de pagina blijft staan.
Jump Menu Design View
Net als bij uw eerste menu, stelt Dreamweaver uw springmenu in de ontwerpweergave in met het standaarditem zichtbaar. U kunt dan het vervolgkeuzemenu bewerken zoals u dat met elk ander zou doen.
Als je het bewerkt, zorg er dan voor dat je geen ID's op de items wijzigt; anders werkt het script mogelijk niet.
Springmenu in browser
Als u het bestand opslaat en op F12 drukt, wordt de pagina weergegeven in de browser van uw voorkeur. Daar kun je een optie selecteren, op "Go" klikken en het springmenu werkt.
