Så här skapar du en nedrullningsmeny i Dreamweaver

Du kan placera din etikett före eller efter rullgardinsmenyn.

Åtkomstnyckel

Detta är nyckeln som kan användas tillsammans med Alt eller Alternativ-tangenterna för att komma direkt till det formulärfältet. Detta gör dina formulär mycket lätta att använda utan att behöva en mus.

Tab Index

Det här är den ordning i vilken formulärfältet ska öppnas när du använder tangentbordet till fliken genom webbsidan.

När du har uppdaterat tillgänglighetsalternativen klickar du på OK.

Välj menyn

När du har en rullgardinsmeny som visas i Dreamweaver-designvyn måste du lägga till de olika elementen i den. Välj först rullgardinsmenyn genom att klicka på den. Dreamweaver lägger en annan streckad linje bara på rullgardinsmenyn, för att visa att du har valt den.

Menyegenskaper

Egenskapsmenyn ändras till listan / menyfunktionerna för den nedrullningsmenyn. Där kan du ge din meny ett ID (där det står "välj"), bestämma om du vill att den ska vara en lis eller en meny, ge den en stilklass från ditt stilark och ange värden till rullgardinsmenyn.

Vad är skillnaden mellan lista och meny?

Dreamweaver kallar en rullgardinsmeny på valfri meny som bara tillåter ett val. En "lista" tillåter flera val i rullgardinsmenyn och kan vara mer än ett objekt högt.

Om du vill att en rullgardinsmeny ska vara flera linjer hög, byt den till en "list" -typ och lämna inte markeringen "val".

Lägg till nya listobjekt

För att lägga till nya objekt i din meny, klicka på knappen "Lista värden …". Detta öppnar fönstret ovan. Skriv in din objektetikett i den första rutan. Detta är vad som kommer att visas på sidan. Om du lämnar värdet tomma är det också vad som skickas i formuläret.

Lägg till mer och omordna

Klicka på plusikonen för att lägga till fler föremål. Om du vill ombeställa dem i listrutan använder du upp och ner pilarna till höger.

Ge alla poster värden

Som jag nämnde i steg 8, om du lämnar värdet blankt skickas etiketten till formuläret. Men du kan ge alla dina värderingar - att skicka alternativ information till din blankett. Du kommer att använda det här mycket för saker som hoppa menyer och hyperlinkning.

Välj en standard

Webbsidor som standard för att visa vilken rullgardinsmeny som listas först som standardobjekt. Men om du vill ha en annan markerad markerar du den i rutan "Ursprungligen vald" på Egenskaper-menyn.

Se din lista i designvy

När du är klar med att redigera egenskaperna visar Dreamweaver din rullgardinslista med standardvärdet som valts.

Se din lista i kodvisning

Om du växlar till kodvisning kan du se att Dreamweaver lägger till din rullgardinsmeny med mycket ren kod. De enda extra attributen är de som vi lade till med tillgänglighetsalternativ. Koden är alla indragna och mycket lätt att läsa och förstå. Den lägger till och med i det valda = "valda" attributet eftersom jag har sagt Dreamweaver att jag som standard skriver XHTML.

Spara och visa i webbläsaren

Om du sparar dokumentet och ser det i en webbläsare kan du se att din rullgardinsmeny ser ut som du skulle förvänta dig.

Men det gör inte någonting …

Menyn som vi skapade ovan ser bra ut, men det gör ingenting. För att få det att göra något måste du skapa en formuläråtgärd på själva formuläret.

Lyckligtvis har Dreamweaver en inbyggd rullgardinsmeny som du kan använda direkt på din webbplats utan att behöva lära dig mer om formulär, CGI eller skript. Det kallas en hoppa-meny.

Dreamweaver Jump Menu ställer upp en rullgardinsmeny med namn och webbadresser. Då kan du välja ett objekt i menyn och webbsidan flyttas till den platsen, precis som om du hade klickat på en länk.

Gå till Insert-menyn och välj Form och sedan Hoppa-menyn.

Hoppa menyfönstret

Till skillnad från standardmenyn öppnar Hoppa-menyn ett nytt fönster för att du ska namnge dina menyalternativ och lägga till detaljer om hur formuläret ska fungera.

För det första objektet, ändra texten "untitled1" till vad du vill att den ska läsa och lägg till en URL som den länken ska gå till.

Lägg till objekt i din hoppa-meny

Klicka på tillägget för att lägga till ett nytt objekt i din hoppa-meny. Lägg till så många saker som du önskar.

Hoppa menyalternativ

När du har lagt till alla länkar du vill ha bör du välja dina alternativ:

Öppna webbadresser i

Om du har en ramsätt kan du öppna länkarna i en annan ram. Eller du kan ändra alternativet för huvudfönstret till ett speciellt mål så att webbadressen öppnas i ett nytt fönster eller någon annanstans.

Menynamn

Ge din meny ett unikt ID för sidan. Detta krävs så att manuset fungerar korrekt. Det låter dig också ha flera hoppa menyer i en form - bara ge dem alla olika namn.

Sätt in Go-knappen efter menyn

Jag gillar att välja detta eftersom ibland fungerar inte skriptet när menyn ändras. Det är också mer tillgängligt.

Välj första objektet efter URL-ändringen

Välj det här alternativet om du vill ha en fråga, t.ex. "Välj en" som första menyalternativ. Detta kommer att försäkra att det här objektet stannar som standard på sidan.

Hoppa Meny Design View

Precis som med din första meny skapar Dreamweaver din hoppa-meny i designvy med standardobjektet synligt. Du kan sedan redigera rullgardinsmenyn som du skulle någon annan.

Om du redigerar det, se till att du inte ändrar några ID på objekten, annars fungerar inte skriptet.

Hoppa meny i webbläsare

Om du sparar filen och slår på F12 visas sidan i din föredragna webbläsare. Där kan du välja ett alternativ, klicka på "Gå" och hoppa-menyn fungerar!