What to Know
- Gå til Sett inn > Form > Form. Klikk på den stiplede røde linjen på skjemaet og gå til Insert > Form > List/Menu. Velg tilgjengelighets alternativer.
- Klikk på menyen og velg egenskapene, velg deretter Listeverdier for å legge til nye menyelementer. Klikk på plusstegnet for å legge til flere elementer.
- Legg til vareverdier og velg et standardelement. For å legge til handlinger, gå Insert > Form > Jump Menu. Legg til elementer i hoppmenyen og lagre.
Dreamweaver gjør det enkelt å lage rullegardinmenyer for nettstedet ditt. Men som alle HTML-skjemaer kan de være litt vanskelige. Denne opplæringen vil lede deg gjennom trinnene for å lage en rullegardinmeny i Dreamweaver.
Dreamweaver Jump Menus
Dreamweaver 8 tilbyr også en veiviser for å lage en hoppmeny for navigering på nettstedet ditt. I motsetning til grunnleggende rullegardinmenyer, vil denne menyen gjøre noe når du er ferdig. Du trenger ikke å skrive JavaScript eller CGI-er for å få nedtrekksskjemaet til å fungere. Denne opplæringen forklarer også hvordan du bruker Dreamweaver 8-veiviseren til å lage en hoppmeny.
Først, opprett skjemaet
Med unntak av spesielle veivisere som hoppmenyen, hjelper ikke Dreamweaver deg med å få HTML-skjemaer til å «fungere». For dette trenger du en CGI eller JavaScript.
Når du legger til en rullegardinmeny på nettstedet ditt, er det første du trenger et skjema som omgir den. I Dreamweaver går du til Sett inn-menyen og klikker på Skjema, og velger deretter "Skjema."
skjema vises i designvisning
Dreamweaver viser skjemaplasseringen din visuelt i designvisningen, slik at du vet hvor du skal plassere skjemaelementene dine fordi rullegardinmenykoder ikke er gyldige (og vil ikke fungere) utenfor skjemaelementet. Som du kan se på bildet, er skjemaet den røde stiplede linjen i designvisningen.
Velg liste/meny
Rullegardinmenyer kalles "liste" eller "meny"-elementer i Dreamweaver. Så for å legge til en i skjemaet ditt, må du gå inn i skjemamenyen på Sett inn-menyen og velge "Liste/meny." Sørg for at markøren var innenfor den røde stiplede linjen i skjemaboksen.
Spesialvalgvindu
I Dreamweaver- alternativene er det en skjerm på Tilgjengelighet. Rullegardinmenyene dine vil umiddelbart være mer tilgjengelige enn andre nettsteder hvis du fyller ut disse fem alternativene.
skjematilgjengelighet
Tilgjengelighets alternativene er:
Label
Etikettfeltet vises som tekst ved siden av skjemaelementet. Skriv inn et navn for rullegardinmenyen. Det kan være et spørsmål eller en kort setning som rullegardinmenyen vil svare på.
stil
HTML inkluderer en etikettkode for å identifisere skjemaetikettene til nettleseren. Valgene dine er å vikle rullegardinmenyen og etikettteksten med taggen, bruke "for"-attributtet på label-taggen for å identifisere hvilken form-tag den refererer til, eller ikke bruke label-taggen i det hele tatt.
Position
Du kan plassere etiketten før eller etter rullegardinmenyen.
tilgangsnøkkel
Besøkende kan bruke en tilgangsnøkkel med "Image" eller Option-tastene for å komme direkte til det skjemafeltet. Denne hurtigtasten gjør skjemaene dine veldig enkle å bruke uten mus. alt="
Faneindeks
Faneindeksen er hvordan brukere skal få tilgang til skjemafeltene når de bruker tastaturet til å tablåer gjennom nettsiden.
Når du har oppdatert tilgjengelighets alternativene, klikker du OK.
Velg menyen
Når du har vist rullegardinmenyen i Dreamweaver-designvisningen, må du legge til de forskjellige elementene. Først velger du rullegardinmenyen ved å klikke på den. Dreamweaver vil sette en ny stiplet linje rundt bare rullegardinmenyen for å vise at du har valgt den.
Meny Properties
Egenskapsmenyen vil endres til liste-/menyegenskaper for den rullegardinmenyen. Der kan du gi menyen din en ID (der det står "velg"), bestemme om du vil at den skal være en liste eller en meny, gi den en stilklasse fra stilarket ditt, og tilordne verdier til rullegardinmenyen.
Hva er forskjellen mellom liste og meny?
Dreamweaver kaller en rullegardinmeny for en hvilken som helst rullegardin som bare tillater ett valg. En "liste" tillater flere valg i rullegardinmenyen og kan være mer enn ett element høyt.
Hvis du vil at en rullegardinmeny skal være flere linjer høy, endre den til en "liste"-type og la "utvalg"-boksen være umerket.
Legg til nye listeelementer
For å legge til nye elementer i menyen din, klikk på "Liste verdier…"-knappen, som åpner vinduet ovenfor. Deretter skriver du inn vareetiketten i den første boksen. Det vil vises på siden.
Legg til mer og bestill på nytt
Klikk på pluss-ikonet for å legge til flere elementer. Hvis du vil bestille dem på nytt i listeboksen, bruk opp- og ned-pilene til høyre.
Gi alle elementer verdier
Hvis du lar verdien stå tom, vil etiketten gå til skjemaet. Men du kan gi alle varene dine verdier - for å sende alternativ informasjon til skjemaet ditt. Du vil bruke dette mye til ting som hoppmenyer og hyperkoblinger.
Velg en standard
Nettsider viser som standard det rullegardinelementet som er oppført først som standardelement. Men hvis du vil ha en annen valgt, marker den i "Opprinnelig valgt"-boksen på Egenskaper-menyen.
Se listen din i designvisning
Når du er ferdig med å redigere egenskapene, vil Dreamweaver vise rullegardinlisten din med standardverdien valgt.
Se listen din i kodevisning
Hvis du bytter til kodevisning, kan du se at Dreamweaver legger til rullegardinmenyen din med ren kode. De eneste ekstra attributtene er tilgjengelighets alternativene. Koden er innrykket og veldig enkel å lese og forstå.
Lagre og se i nettleser
Hvis du lagrer dokumentet og viser det i en nettleser, kan du se at rullegardinmenyen din ser ut akkurat som du forventer.
Men det gjør ikke noe…
Menyen vi laget ovenfor ser bra ut, men den gjør ingenting. For å få det til å gjøre noe, må du sette opp en skjemahandling på selve skjemaet.
Heldigvis har Dreamweaver et innebygd rullegardinmenyskjema som du kan bruke umiddelbart på nettstedet ditt uten å måtte lære om skjemaer, CGI-er eller skripting. Det kalles en hoppmeny.
Dreamweaver Jump Menu setter opp en rullegardinmeny med navn og URL-er. Deretter kan du velge et element i menyen, og nettsiden vil flytte til det stedet, akkurat som om du hadde klikket på en lenke.
Gå til Sett inn-menyen og velg Skjema og deretter Hoppmeny.
Jump Menu Window
I motsetning til standard rullegardinmenyen, åpner Hopp-menyen et nytt vindu der du kan navngi menyelementene dine og legge til detaljer om hvordan skjemaet skal fungere.
For det første elementet, endre teksten "uten tittel1" til det du vil at den skal lese og legg til en URL.
Legg til elementer i hoppmenyen
Klikk på legg til elementet for å legge til et nytt element i hoppmenyen. Legg til så mange elementer du ønsker.
Hoppmeny alternativer
Når du har lagt til alle lenkene du ønsker, bør du velge alternativene dine:
Åpne nettadresser i
Hvis du har et rammesett, kan du åpne lenkene i en annen ramme. Eller du kan endre alternativet for hovedvindu til et spesielt mål slik at nettadressen åpnes i et nytt vindu eller andre steder.
Menynavn
Gi menyen din en unik ID for siden. Det er nødvendig for at skriptet skal fungere riktig. Den lar deg også ha flere hoppmenyer i én form – gi dem alle forskjellige navn.
Sett inn Go-knapp etter meny
Jeg liker å velge dette fordi noen ganger fungerer ikke skriptet når menyen endres. Den er også mer tilgjengelig.
Velg første element etter endring av nettadresse
Velg dette hvis du har en melding som "Velg en" som første menyelement. Dette vil sikre at elementet forblir standard på siden.
Jump Menu Design View
Akkurat som med den første menyen, setter Dreamweaver opp hoppmenyen i designvisning med standardelementet synlig. Du kan deretter redigere rullegardinmenyen på samme måte som alle andre.
Hvis du redigerer det, sørg for å ikke endre noen ID-er på elementene; ellers kan det hende at skriptet ikke fungerer.
Hoppmeny i nettleseren
Lagre filen og trykke F12 vil vise siden i din foretrukne nettleser. Der kan du velge et alternativ, klikk "Go", og hoppmenyen fungerer.
