Skip to content

Hur man skapar en rullgardinsmeny i Dreamweaver

8 de september de 2021
dw8ddmenu1 58bf19685f9b58af5cc086af

Dreamweaver gör det enkelt att skapa rullgardinsmenyer för din webbplats. Men som alla HTML -formulär kan de vara lite knepiga. Denna handledning leder dig igenom stegen för att skapa en rullgardinsmeny i Dreamweaver.

Dreamweaver -hoppmenyer

Dreamweaver 8 har 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 JavaScript eller CGI för att få ditt listrutform att fungera. Denna handledning förklarar också hur du använder guiden Dreamweaver 8 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 till din webbplats är det första du behöver ett formulär för att omge den. Gå till Infoga -menyn i Dreamweaver och klicka på Formulär, välj sedan ”Formulär”.

Formulär i designvyn

Formulär visas i designvyn

Dreamweaver visar din formulärplats visuellt i designvyn, så att du vet var du ska placera dina formulärelement eftersom rullgardinsmenytaggarna inte är giltiga (och inte fungerar) utanför formulärelementet. Som du kan se på bilden är formen den röda prickade linjen i designvyn.

Välj Lista/meny

Infoga en lista/meny i Dreamweaver

Nedrullningsbara menyer kallas ”lista” eller ”meny” i Dreamweaver. Så för att lägga till en i ditt formulär måste du gå in i formulärmenyn på menyn Infoga och välja ”Lista/meny”. Se till att markören befann sig inom den röda prickade linjen i formulärrutan.

Fönstret Specialalternativ

Alternativfönster för tillgänglighetsattribut för ingångstaggen

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

Formtillgänglighet

Tillgänglighetsalternativen är:

Märka

Etikettfältet visas som text bredvid formulärelementet. Skriv in ett namn för din rullgardinsmeny. Det kan vara en fråga eller en kort fras som rullgardinsmenyn kommer att svara på.

Stil

HTML innehåller en etiketttagg för att identifiera dina formuläretiketter för webbläsaren. Dina val är att linda rullgardinsmenyn och etiketttexten med taggen, använda attributet ”för” på etiketttaggen för att identifiera vilken formulärtagg den refererar till, eller inte använda etiketttaggen alls.

Placera

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

Åtkomstnyckel

Besökare kan använda en åtkomstnyckel med Alt- eller Alternativtangenterna för att komma direkt till det formulärfältet. Denna kortkommando gör dina formulär väldigt enkla att använda utan mus.

Flikindex

Flikindexet är hur användare ska komma åt formulärfälten när de använder tangentbordet för att bläddra genom webbsidan. Klicka på OK när du har uppdaterat dina tillgänglighetsalternativ.

Välj menyn

Välja menyn i Dreamweaver WYSIWYG -vyn

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

Menyegenskaper

Dialogrutan för menyegenskaper

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 ditt stilark och tilldela värden till rullgardinsmenyn.

Vad är skillnaden mellan lista och meny?

Dreamweaver kallar en rullgardinsmeny i menyn alla rullgardinsmenyer 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 rader hög, ändra den till en ”lista” -typ och lämna rutan ”markeringar” avmarkerad.

Lägg till nya listobjekt

Lägga till nya värden till menyn i Dreamweaver

För att lägga till nya objekt i 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 mer och ordna om

Lägg till fler värden och ordna om dem

Klicka på plusikonen för att lägga till fler objekt. Om du vill ordna om dem i listrutan använder du upp- och nedpilarna till höger.

Ge alla objekt värden

Lägga till värden på menyens objektetiketter

Om du lämnar värdet tomt går etiketten till formuläret. Men du kan ge alla dina objekt 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änkning.

Välj en standard

Välj det ursprungligen valda värdet för menyn

Webbsidor som standard för att visa det nedrullningsbara objektet listas först som standardobjekt. Men om du vill att en annan ska väljas markerar du den i rutan ”Ursprungligen vald” på menyn Egenskaper.

Se din lista i designvyn

Visa rullgardinsmenyn i designfönstret

När du har redigerat egenskaperna visar Dreamweaver din listruta med standardvärdet valt.

Se din lista i kodvy

Se din lista i kodvy

Om du växlar till kodvy kan du se att Dreamweaver lägger till din rullgardinsmeny med ren kod. De enda extra attributen är tillgänglighetsalternativen. Koden är allt indragen och mycket lätt att läsa och förstå.

Spara och visa i webbläsaren

Sparar menyn och förhandsgranskar den i en webbläsare

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

Men det gör ingenting …

Lägga till menyens beteende

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 skapa en formuläråtgärd på själva formuläret. Som tur är 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 hoppmeny. Dreamweaver Jump-menyn skapar en rullgardinsmeny med namn och webbadresser. Sedan 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 Infoga -menyn och välj Form och sedan Hopp -meny.

Hoppa menyfönster

Hoppa menyfönster för att lägga till beteende

Till skillnad från den vanliga rullgardinsmenyn öppnar hoppmenyn ett nytt fönster där du kan 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.

Lägg till objekt i din hoppmeny

Lägg till objekt i hoppmenyn

Klicka på lägg till för att lägga till ett nytt objekt i din hoppmeny. Lägg till så många saker du vill.

Hoppa menyalternativ

Slutliga konfigurationsalternativ för hoppmenyn

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

Öppna webbadresser i

Om du har ett ramuppsättning kan du öppna länkarna i en annan ram. Eller så kan du ändra alternativet 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.

Sätt in Go -knappen efter menyn

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

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

Välj detta om du har en uppmaning som ”Välj en” som det första menyalternativet. Detta säkerställer att det objektet förblir standard på sidan.

Hoppa meny designvy

Hopp -menyn läggs till i designvyn

Precis som med din första meny ställer Dreamweaver in din hoppmeny i designvyn med standardobjektet synligt. Du kan sedan redigera rullgardinsmenyn på samma sätt som alla andra. Om du redigerar det, se till att inte ändra några ID på objekten; annars kanske skriptet inte fungerar.

Hoppa -menyn i webbläsaren

Förhandsgranska hoppmenyn i webbläsaren

Om du sparar filen och trycker på F12 visas sidan i din föredragna webbläsare. Där kan du välja ett alternativ, klicka på ”Gå” och hoppmenyn fungerar.