Denne wikiHow lærer deg hvordan du bruker Adobe Dreamweaver til å lage en rullegardinboks for en webside. Nedtrekksbokser er menyer som "faller ned" når du klikker på et element på websiden din, og presenterer flere alternativer i prosessen.
Trinn
Trinn 1. Åpne et Dreamweaver -prosjekt
Dobbeltklikk på prosjektets fil for å gjøre det. Hvis du vil opprette et nytt Dreamweaver -prosjekt, åpner du i stedet Dreamweaver, klikker på Fil, klikk Ny, og følg alle instruksjonene på skjermen.
Trinn 2. Lag en bestilt liste
For å opprette en rullegardinmeny, må du ha minst ett punktpunkt. Du kan opprette et punkt ved å slå av CSS (klikk på Utsikt menyelement, velg Stil gjengivelse, og klikk Vis stiler hvis det er merket), klikker du på stedet der du vil legge til punktet, klikker på punktpunktikonet nederst i vinduet og skriver inn punktets navn. Du bør deretter slå på CSS igjen før du fortsetter.
- Punktets navn her vil fungere som rullegardinmenyens aktivator (f.eks. Knappen som du holder musepekeren over eller trykker på for å åpne rullegardinmenyen).
- Hopp over dette trinnet hvis du allerede har et listeelement som du vil konvertere til en rullegardinmeny.
Trinn 3. Bestem navnet på listen din
Klikk på Kode fanen og sørg for at du er på Kildekode innstillingen, rull deretter ned til koden til den bestilte listen (den vil være mellom en"
"tag og a"
"tag) og se etter" "taggen over toppen"
tag. Ordet i anførselstegn er navnet på listen din.
-
Hvis du ikke ser et navn, setter du inn taggen (der navnet refererer til det foretrukne navnet på listen) rett over
stikkord.
Trinn 4. Fjern punkt (er)
Sørg for at du er på rett sted ved å klikke på Design kategorien og deretter klikke på CSS Designer kategorien i øvre høyre hjørne av vinduet, og gjør deretter følgende:
- Klikk + til høyre for overskriften "Velgere".
- Skriv inn #name ul der "navn" er listen din.
- Trykk på ↵ Enter to ganger.
- Rull ned og klikk liste-stil-type i ruten nederst på CSS Designer kategorien.
- Klikk ingen i den resulterende hurtigmenyen.
Trinn 5. Endre den bestilte listen slik at den vises horisontalt
Å gjøre slik:
- Klikk + til høyre for overskriften "Velgere".
- Skriv inn #name li der "navn" er navnet på listen din.
- Finn overskriften "float" i ruten nederst på CSS Designer kategorien.
- Klikk på Venstre knappen til høyre for "float" -overskriften.
Trinn 6. Legg til en aktiv tag for listen din
Klikk på + til høyre for "Velgere", skriv deretter inn #navn a (der "navn" er navnet på listen din) og trykk på ↵ Enter to ganger.
Trinn 7. Legg til en bakgrunnsfarge
Velg #navn a elementet om nødvendig, klikk deretter på den boksformede "Bakgrunnsfarge" -fanen øverst i CSS Designer -ruten, velg bakgrunnsfarge alternativet, og velg en bakgrunnsfarge som skal brukes.
Dette er fargen elementene i nedtrekkslisten vil bruke
Trinn 8. Få listelementene til å bruke "blokk" -formatet
Dette formatet sikrer at når noen klikker eller klikker på et element i listen, kan de åpne det ved å velge litt over eller under det i stedet for å velge nøyaktig teksten:
- Sørg for at din #navn a elementet er valgt i CSS Designer kategorien.
- Rull ned til "display" -overskriften i ruten.
- Klikk helt til høyre i overskriften "display", og klikk deretter blokkere i den resulterende menyen.
Trinn 9. Tilsett polstring om nødvendig
Hvis du oppdager at listeelementene dine sitter fast mot hverandre, kan du plassere litt mellomrom ved å gjøre følgende:
- Sørg for at din #navn a elementet er valgt i CSS Designer kategorien.
- Rull ned til "polstring" -overskriften i ruten.
- Endre de øverste og nedre "px" tekstfeltene for å lese minst 5.
- Endre venstre og høyre "px" tekstfelt for å lese minst 10.
Trinn 10. Lag en hoverfarge
Dette er fargen som vises når du holder musepekeren over et element i rullegardinmenyen:
- Klikk + til høyre for overskriften "Velgere".
- Skriv inn #nave a: hold markøren (der "navn" er navnet på listen din) og trykk på ↵ Enter to ganger.
- Klikk på "Bakgrunnsfarge" -fanen.
- Plukke ut bakgrunnsfarge og velg deretter en lysere farge enn du brukte for bakgrunnsfargen.
Trinn 11. Slå av CSS
Klikk på Utsikt menyelement, velg Stil gjengivelse, og klikk på Vis stiler alternativet i popup-vinduet.
Hvis Vis stiler alternativet er nedtonet, klikk hvor som helst i Dreamweaver -dokumentet og prøv igjen.
Trinn 12. Lag rullegardinmenyen
Du kan gjøre dette ved å legge til delpunkter under punktet du vil bruke som rullegardinmenyens knapp:
- Klikk til høyre for listeelementet du vil gjøre til en rullegardinmeny, og trykk deretter på ↵ Enter.
- Trykk Tab ↹.
- Skriv inn navnet på det første rullegardinmenyelementet, og trykk deretter på ↵ Enter.
- Skriv inn navnet på den neste rullegardinmenyen, og trykk deretter på ↵ Enter og gjenta etter behov.
Trinn 13. Bind nedtrekksmenyen til et punktelement
Å gjøre slik:
- Klikk + ved siden av "Velgere", skriver du inn #navn ul ul og trykker på ↵ Enter to ganger.
- Rull ned og klikk vise, og klikk deretter ingen i hurtigmenyen.
- Finn og klikk posisjon, og klikk deretter absolutt i hurtigmenyen.
Trinn 14. Lag selve rullegardinmenyen
Du må legge til enda en velger for å gjøre dette:
- Klikk + ved siden av "Velgere", skriver du inn #navn ul li: svever> ul og trykker på ↵ Enter to ganger.
- Finn og klikk vise, og klikk deretter blokkere i den resulterende hurtigmenyen.
Trinn 15. Gjør rullegardinmenyens innhold vertikalt
Som standard vises innholdet i rullegardinmenyen i en horisontal linje, men du kan tvinge dem inn i en vertikal kolonne ved å gjøre følgende:
- Klikk + ved siden av "Velgere", skriver du inn #navn ul ul li og trykker på ↵ Enter to ganger.
- Finn overskriften "float".
- Klikk på "ingen" () til høyre for "float" -overskriften.
Trinn 16. Lagre prosjektet
Trykk Ctrl+S (Windows) eller ⌘ Command+S (Mac) for å gjøre det.
