Hvad du skal vide
- Gå til Indsæt > Form > Form. Klik på den stiplede røde linje på formularen, og gå til Insert > Form > List/Menu. Vælg tilgængelighedsindstillinger.
- Klik på menuen og vælg dens egenskaber, og vælg derefter List values for at tilføje nye menupunkter. Klik på plustegnet for at tilføje flere varer.
- Tilføj vareværdier, og vælg et standardelement. For at tilføje handlinger, gå Insert > Form > Jump Menu. Føj elementer til Jump-menuen og gem.
Dreamweaver gør det nemt at oprette rullemenuer til dit websted. Men ligesom alle HTML-formularer kan de være en smule vanskelige. Denne vejledning vil lede dig gennem trinene til at oprette en rullemenu i Dreamweaver.
Dreamweaver Jump Menus
Dreamweaver 8 indeholder også en guide til at oprette en springmenu til navigation på dit websted. I modsætning til grundlæggende rullemenuer, vil denne menu gøre noget, når du er færdig. Du behøver ikke at skrive JavaScript eller CGI'er for at få din rullemenu til at fungere. Denne vejledning forklarer også, hvordan du bruger Dreamweaver 8-guiden til at oprette en jump-menu.
Opret først formularen
Med undtagelse af specielle guider som springmenuen hjælper Dreamweaver dig ikke med at få HTML-formularer til at "virke". Til dette skal du bruge en CGI eller JavaScript.
Når du tilføjer en rullemenu til dit websted, er den første ting, du skal bruge, en formular til at omgive den. I Dreamweaver skal du gå til menuen Indsæt og klikke på Formular, og derefter vælge "Form."
Form vises i designvisning
Dreamweaver viser din formularplacering visuelt i designvisningen, så du ved, hvor du skal placere dine formularelementer, fordi rullemenutags ikke er gyldige (og vil ikke fungere) uden for formularelementet. Som du kan se på billedet, er formen den røde stiplede linje i designvisningen.
Vælg liste/menu
Rullemenuer kaldes "liste" eller "menu"-punkter i Dreamweaver. Så for at tilføje en til din formular, skal du gå ind i formularmenuen på menuen Indsæt og vælge "Liste/Menu". Sørg for, at din markør var inden for den røde stiplede linje i din formularboks.
Special Options Window
I Dreamweaver Options er der en skærm på Accessibility. Dine rullemenuer vil straks være mere tilgængelige end andre websteder, hvis du udfylder disse fem muligheder.
Formtilgængelighed
Tilgængelighedsmulighederne er:
Label
Etiketfeltet vises som tekst ved siden af dit formularelement. Indtast et navn til din rullemenu. Det kan være et spørgsmål eller en kort sætning, som rullemenuen vil besvare.
stil
HTML inkluderer et label-tag til at identificere dine formularetiketter til webbrowseren. Dine valg er at ombryde rullemenuen og etiketteksten med tagget, at bruge "for"-attributten på label-tagget til at identificere, hvilket form-tag det refererer til, eller slet ikke at bruge label-tagget.
Position
Du kan placere din etiket før eller efter rullemenuen.
Adgangsnøgle
Besøgende kan bruge en adgangsnøgle med "Image" eller Option-tasterne for at komme direkte til formularfeltet. Denne tastaturgenvej gør dine formularer meget nemme at bruge uden en mus. alt="
Faneindeks
Faneindekset er, hvordan brugere skal få adgang til formularfelterne, når de bruger tastaturet til at tabe gennem websiden.
Når du har opdateret dine tilgængelighedsindstillinger, skal du klikke på OK.
Vælg menuen
Når du har vist din rullemenu i Dreamweavers designvisning, skal du tilføje de forskellige elementer. Først skal du vælge rullemenuen ved at klikke på den. Dreamweaver vil sætte endnu en stiplet linje rundt om rullemenuen for at vise, at du har valgt det.
Menuegenskaber
Egenskabsmenuen ændres til listen/menuegenskaberne for den rullemenu. Der kan du give din menu et ID (hvor der står "vælg"), bestemme om du vil have det til at være en liste eller en menu, give den en stilklasse fra dit typografiark og tildele værdier til rullemenuen.
Hvad er forskellen mellem liste og menu?
Dreamweaver kalder en menu-rullemenu til enhver rullemenu, der kun tillader ét valg. En "liste" tillader flere valg i rullemenuen og kan være mere end ét element højt.
Hvis du vil have en rullemenu til at være flere linjer høj, skal du ændre den til en "liste"-type og lade "udvalg"-feltet være umarkeret.
Tilføj nye listeelementer
For at tilføje nye elementer til din menu skal du klikke på knappen "List værdier…", som åbner ovenstående vindue. Indtast derefter din varemærkat i det første felt. Det vil blive vist på siden.
Tilføj flere og genbestil
Klik på plus-ikonet for at tilføje flere elementer. Hvis du vil omarrangere dem i listeboksen, skal du bruge op- og ned-pilene til højre.
Giv alle varer værdier
Hvis du lader værdien være tom, vil etiketten gå til formularen. Men du kan give alle dine varer værdier - for at sende alternative oplysninger til din formular. Du vil bruge dette meget til ting som springmenuer og hyperlinks.
Vælg en standard
Websider viser som standard det drop-down element, der er angivet først, som standardelement. Men hvis du vil have en anden valgt, skal du markere den i boksen "Oprindeligt valgt" i menuen Egenskaber.
Se din liste i designvisning
Når du er færdig med at redigere egenskaberne, viser Dreamweaver din rulleliste med standardværdien valgt.
Se din liste i kodevisning
Hvis du skifter til kodevisning, kan du se, at Dreamweaver tilføjer din rullemenu med ren kode. De eneste ekstra attributter er tilgængelighedsmulighederne. Koden er alle indrykket og meget let at læse og forstå.
Gem og se i browser
Hvis du gemmer dokumentet og ser det i en webbrowser, kan du se, at din rullemenu ser ud, som du ville forvente.
Men det gør ikke noget…
Menuen, vi oprettede ovenfor, ser fin ud, men den gør ikke noget. For at få det til at gøre noget, skal du konfigurere en formularhandling på selve formularen.
Heldigvis har Dreamweaver en indbygget rullemenuformular, som du kan bruge med det samme på dit websted uden at skulle lære om formularer, CGI'er eller scripting. Det kaldes en Jump Menu.
Dreamweaver Jump Menu opretter en rullemenu med navne og URL'er. Så kan du vælge et punkt i menuen, og websiden vil flytte til den placering, ligesom hvis du havde klikket på et link.
Gå til menuen Indsæt og vælg Form og derefter Jump Menu.
Jump Menu Window
I modsætning til standard rullemenuen åbner Jump-menuen et nyt vindue, hvor du kan navngive dine menupunkter og tilføje detaljer om, hvordan formularen skal fungere.
For det første element skal du ændre teksten "un titled1" til det, du vil have den skal læse, og tilføje en URL.
Føj elementer til din Jump-menu
Klik på tilføjelseselementet for at tilføje et nyt element til din springmenu. Tilføj så mange varer, du ønsker.
Jump Menu Options
Når du har tilføjet alle de links, du ønsker, skal du vælge dine muligheder:
Åbn webadresser i
Hvis du har et rammesæt, kan du åbne linkene i en anden ramme. Eller du kan ændre muligheden for hovedvindue til et specielt mål, så URL'en åbnes i et nyt vindue eller andre steder.
Menunavn
Giv din menu et unikt ID for siden. Det er påkrævet, for at scriptet fungerer korrekt. Det giver dig også mulighed for at have flere springmenuer i én form - giv dem alle forskellige navne.
Indsæt Go-knap efter menu
Jeg kan godt lide at vælge dette, fordi nogle gange virker scriptet ikke, når menuen ændres. Det er også mere tilgængeligt.
Vælg første element efter URL-ændring
Vælg dette, hvis du har en prompt såsom "Vælg en" som det første menupunkt. Dette sikrer, at elementet forbliver standard på siden.
Jump Menu Design View
Ligesom med din første menu, opsætter Dreamweaver din jump-menu i designvisning med standardpunktet synligt. Du kan derefter redigere rullemenuen som enhver anden.
Hvis du redigerer det, så sørg for ikke at ændre nogen ID'er på emnerne; ellers virker scriptet muligvis ikke.
Jump Menu i browser
Hvis du gemmer filen og trykker på F12, vises siden i din foretrukne browser. Der kan du vælge en mulighed, klikke på "Go", og springmenuen virker.
