Vad att veta
- Gå till Infoga > Form > Form. Klicka på den prickade röda linjen på formuläret och gå till Insert > Form > List/Menu. Välj tillgänglighets alternativ.
- Klicka på menyn och välj dess egenskaper, välj sedan Listvärden för att lägga till nya meny alternativ. Klicka på plustecknet för att lägga till fler objekt.
- Lägg till objektvärden och välj ett standardobjekt. För att lägga till åtgärder, gå Insert > Form > Jump Menu. Lägg till objekt i hoppmenyn och spara.
Dreamweaver gör det enkelt att skapa rullgardinsmenyer för din webbplats. Men som alla HTML-formulär kan de vara lite knepiga. Den här handledningen leder dig genom stegen för att skapa en rullgardinsmeny i Dreamweaver.
Dreamweaver Jump Menus
Dreamweaver 8 tillhandahåller också en guide för att skapa en hoppmeny för navigering på din webbplats. Till skillnad från grundläggande rullgardinsmenyer kommer den här menyn att göra något när du är klar. Du behöver inte skriva något JavaScript eller CGI för att få din rullgardinsmeny att fungera. Den här handledningen förklarar också hur du använder Dreamweaver 8-guiden för att skapa en hoppmeny.
Skapa först formuläret
Med undantag för speciella guider som hoppmenyn, hjälper Dreamweaver dig inte att få HTML-formulär att "fungera". För detta behöver du en CGI eller JavaScript.
När du lägger till en rullgardinsmeny på din webbplats är det första du behöver ett formulär som omger den. I Dreamweaver, gå till Infoga-menyn och klicka på Formulär, välj sedan "Form."
Formvisningar i designvy
Dreamweaver visar din formulärplats visuellt i designvyn, så att du vet var du ska placera dina formulärelement eftersom rullgardinsmenytaggar inte är giltiga (och kommer inte att fungera) utanför formulärelementet. Som du kan se på bilden är formen den röda prickade linjen i designvyn.
Välj lista/meny
Rullgardinsmenyer kallas "lista" eller "meny" i Dreamweaver. Så för att lägga till en till ditt formulär måste du gå in i formulärmenyn på Infoga-menyn och välja "Lista/meny". Se till att markören var inom den röda prickade linjen i formulärrutan.
Special alternativfönster
I Dreamweaver- alternativen finns en skärm om tillgänglighet. Dina rullgardinsmenyer blir omedelbart mer tillgängliga än andra webbplatser om du fyller i dessa fem alternativ.
Formtillgänglighet
Tillgänglighets alternativen är:
Label
Etikettfältet visas som text bredvid ditt formulärelement. Skriv in ett namn för din rullgardinsmeny. Det kan vara en fråga eller kort fras som rullgardinsmenyn kommer att besvara.
Stil
HTML innehåller en etiketttagg för att identifiera dina formuläretiketter för webbläsaren. Dina val är att slå in rullgardinsmenyn och etiketttexten med taggen, att använda "for"-attributet på label taggen för att identifiera vilken form tag den refererar till, eller att inte använda label taggen alls.
Position
Du kan placera din etikett före eller efter rullgardinsmenyn.
Åtkomstnyckel
Besökare kan använda en åtkomstnyckel med "Bild" eller alternativknapparna för att komma direkt till det formulärfältet. Denna kortkommando gör dina formulär mycket enkla att använda utan en mus. alt="
Tab Index
Flikindexet är hur användare ska komma åt formulärfälten när de använder tangentbordet för att gå igenom webbsidan.
När du har uppdaterat dina tillgänglighets alternativ klickar du på OK.
Välj menyn
När du har visat din rullgardinsmeny i Dreamweavers designvy, måste du lägga till de olika elementen. Välj först rullgardinsmenyn genom att klicka på den. Dreamweaver lägger ytterligare en prickad linje runt rullgardinsmenyn för att visa att du har v alt den.
Meny Properties
Egenskapsmenyn ändras till listan/menyegenskaperna för den rullgardinsmenyn. Där kan du ge din meny ett ID (där det står "välj"), bestämma om du vill att det ska vara en lista eller en meny, ge den en stilklass från din stilmall och tilldela värden till rullgardinsmenyn.
Vad är skillnaden mellan lista och meny?
Dreamweaver kallar en meny-rullgardinsmeny till valfri rullgardinsmeny som bara tillåter ett val. En "lista" tillåter flera val i rullgardinsmenyn och kan vara mer än en post hög.
Om du vill att en rullgardinsmeny ska vara flera rader hög, ändra den till en "lista"-typ och lämna "val"-rutan omarkerad.
Lägg till nya listobjekt
För att lägga till nya objekt till din meny, klicka på knappen "Lista värden…", som öppnar fönstret ovan. Skriv sedan din artikeletikett i den första rutan. Det kommer att visas på sidan.
Lägg till fler och beställ om
Klicka på plusikonen för att lägga till fler objekt. Om du vill sortera om dem i listrutan, använd upp- och nedpilarna till höger.
Ge alla artiklar värden
Om du lämnar värdet tomt, kommer etiketten att hamna i formuläret. Men du kan ge alla dina varor värden - för att skicka alternativ information till ditt formulär. Du kommer att använda detta mycket för saker som hoppmenyer och hyperlänkar.
Välj en standard
Webbsidor visar som standard den rullgardinsmeny som listas först som standardobjekt. Men om du vill ha en annan markerad markerar du den i rutan "Initi alt vald" på menyn Egenskaper.
Se din lista i designvy
När du är klar med att redigera egenskaperna kommer Dreamweaver att visa din rullgardinslista med standardvärdet v alt.
Se din lista i kodvy
Om du byter till kodvy kan du se att Dreamweaver lägger till din rullgardinsmeny med ren kod. De enda extra attributen är tillgänglighets alternativen. Koden är indragen och mycket lätt att läsa och förstå.
Spara och visa i webbläsaren
Om du sparar dokumentet och visar det i en webbläsare kan du se att din rullgardinsmeny ser ut precis som du förväntar dig.
Men det gör ingenting…
Menyn vi skapade ovan ser bra ut, men den gör ingenting. För att få det att göra något måste du ställa in en formuläråtgärd på själva formuläret.
Lyckligtvis har Dreamweaver ett inbyggt rullgardinsmenyformulär som du kan använda direkt på din webbplats utan att behöva lära dig om formulär, CGI:er eller skript. Det kallas en Jump Menu.
Dreamweaver Jump Menu skapar en rullgardinsmeny med namn och webbadresser. Sedan kan du välja ett objekt i menyn, och webbsidan kommer att flyttas till den platsen, precis som om du hade klickat på en länk.
Gå till Infoga-menyn och välj Formulär och sedan Hoppa Meny.
Jump Menu Window
Till skillnad från den vanliga rullgardinsmenyn öppnar Jump-menyn ett nytt fönster där du kan namnge dina meny alternativ och lägga till detaljer om hur formuläret ska fungera.
För det första objektet, ändra texten "un titled1" till vad du vill att den ska läsa och lägg till en URL.
Lägg till objekt i din hoppmeny
Klicka på lägg till objektet för att lägga till ett nytt objekt till din hoppmeny. Lägg till så många objekt du vill.
Jump Menu Options
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 ramuppsättning kan du öppna länkarna i en annan ram. Eller så kan du ändra alternativet för huvudfönster 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. Det krävs för att skriptet ska fungera korrekt. Det låter dig också ha flera hoppmenyer i en form - ge dem alla olika namn.
Infoga Go-knapp efter meny
Jag gillar att välja detta eftersom ibland inte skriptet fungerar när menyn ändras. Det är också mer tillgängligt.
Välj första objekt efter webbadressändring
Välj detta om du har en prompt som "Välj en" som första meny alternativ. Detta säkerställer att objektet förblir standard på sidan.
Jump Menu Design View
Precis som med din första meny, ställer Dreamweaver upp din hoppmeny i designvy med standardobjektet synligt. Du kan sedan redigera rullgardinsmenyn som alla andra.
Om du redigerar det, se till att inte ändra några ID på objekten; annars kanske skriptet inte fungerar.
Hoppa meny i webbläsaren
Om du sparar filen och trycker på F12 visas sidan i din favoritwebbläsare. Där kan du välja ett alternativ, klicka på "Go" och hoppmenyn fungerar.
