Denne wikiHow lærer dig, hvordan du bruger Adobe Dreamweaver til at oprette en rulleliste til en webside. Drop-down bokse er menuer, der "ruller ned", når der klikkes på et emne på din webside, der viser flere muligheder i processen.
Trin
Trin 1. Åbn et Dreamweaver -projekt
Dobbeltklik på projektets fil for at gøre det. Hvis du vil oprette et nyt Dreamweaver -projekt, åbner du i stedet Dreamweaver, klikker på Fil, klik Ny, og følg eventuelle anvisninger på skærmen.
Trin 2. Opret en ordnet liste
For at oprette en rullemenu skal du have mindst et punkttegn. Du kan oprette et punkt ved at deaktivere CSS (klik på Udsigt menupunkt, vælg Stilgengivelse, og klik på Vis stilarter hvis det er markeret), klikker du på det sted, hvor du vil tilføje punktet, klikker på punkttegnsikonet nederst i vinduet og indtaster punktets navn. Du skal derefter tænde CSS igen, før du fortsætter.
- Punktets navn her vil fungere som din rullemenu aktivator (f.eks. Knappen, som man svæver over eller trykker på for at åbne rullemenuen).
- Spring dette trin over, hvis du allerede har et listeelement, som du vil konvertere til en rullemenu.
Trin 3. Bestem din liste navn
Klik på Kode fane, og sørg for, at du er på Kildekode indstilling, rul derefter ned til din bestilte listes kode (den vil være mellem en"
"tag og a"
"tag) og kig efter" "tag over toppen"
tag. Ordet i anførselstegn er navnet på din liste.
-
Hvis du ikke kan se et navn, skal du indsætte mærket (hvor navnet refererer til dit foretrukne navn på listen) direkte over
tag.
Trin 4. Fjern punkt (er)
Sørg for, at du er på det rigtige sted ved at klikke på Design fanen og derefter klikke på CSS Designer fane i øverste højre hjørne af vinduet, og gør derefter følgende:
- Klik på + til højre for overskriften "Selectors".
- Indtast #navn ul, hvor "navn" er din listes navn.
- Tryk to gange på ↵ Enter.
- Rul ned og klik liste-stil-type i ruden i bunden af CSS Designer fane.
- Klik på ingen i den resulterende pop op-menu.
Trin 5. Skift din bestilte liste for at blive vist vandret
For at gøre det:
- Klik på + til højre for overskriften "Selectors".
- Indtast #name li, hvor "navn" er din listes navn.
- Find "float" -overskriften i ruden i bunden af CSS Designer fane.
- Klik på Venstre knappen umiddelbart til højre for "float" -overskriften.
Trin 6. Tilføj et aktivt tag til din liste
Klik på + knappen til højre for "Selectors", indtast derefter #name a (hvor "navn" er din listes navn), og tryk på ↵ Enter to gange.
Trin 7. Tilføj en baggrundsfarve
Vælg #navn a element, hvis det er nødvendigt, klik derefter på den boksformede "Baggrundsfarve" fane øverst i CSS Designer i ruden, vælg baggrundsfarve indstilling, og vælg en baggrundsfarve, der skal bruges.
Dette er den farve, din rulleliste vil bruge
Trin 8. Få dine listeelementer til at bruge "blok" -formatet
Dette format sikrer, at når nogen klikker eller trykker på et element på listen, kan de åbne det ved at vælge lidt over eller under det i stedet for at skulle markere præcist teksten:
- Sørg for, at din #navn a element er valgt i CSS Designer fane.
- Rul ned til "display" -overskriften i ruden.
- Klik på den yderste højre side af "display" -overskriften, og klik derefter på blok i den resulterende menu.
Trin 9. Tilføj om nødvendigt polstring
Hvis du bemærker, at dine listeelementer sidder fast i hinanden, kan du placere noget mellemrum ved at gøre følgende:
- Sørg for, at din #navn a element er valgt i CSS Designer fane.
- Rul ned til "polstring" -overskriften i ruden.
- Skift de øverste og nederste "px" tekstfelter til at læse mindst 5.
- Skift venstre og højre "px" tekstfelter til at læse mindst 10.
Trin 10. Opret en svæverfarve
Dette er den farve, der vises, når du holder musemarkøren over et element i rullemenuen:
- Klik på + til højre for overskriften "Selectors".
- Indtast #nave a: svævefelt (hvor "navn" er din listes navn), og tryk på ↵ Enter to gange.
- Klik på fanen "Baggrundsfarve".
- Vælg baggrundsfarve og vælg derefter en lysere farve, end du brugte til baggrundsfarven.
Trin 11. Sluk CSS
Klik på Udsigt menupunkt, vælg Stilgengivelse, og klik på Vis stilarter indstilling i pop-out-vinduet.
Hvis Vis stilarter er gråtonet, skal du klikke et vilkårligt sted i dit Dreamweaver -dokument og prøve igen.
Trin 12. Opret rullemenuens indhold
Du kan gøre dette ved at tilføje underpunkter under det punkt, du vil bruge som rullemenuens knap:
- Klik til højre for det listeelement, du vil omdanne til en rullemenu, og tryk derefter på ↵ Enter.
- Tryk på Tab ↹.
- Indtast navnet på din første rullemenu, og tryk derefter på ↵ Enter.
- Indtast navnet på den næste rullemenu, tryk derefter på ↵ Enter, og gentag efter behov.
Trin 13. Bind rullemenuens indhold til et punktopslag
For at gøre det:
- Klik på + ud for "Selectors", indtast derefter #name ul ul, og tryk på ↵ Enter to gange.
- Rul ned og klik Skærm, og klik derefter på ingen i lokalmenuen.
- Find og klik position, og klik derefter på absolut i lokalmenuen.
Trin 14. Opret selve rullemenuen
Du skal tilføje endnu en vælger for at gøre dette:
- Klik på + ud for "Selectors", indtast derefter #name ul li: svæver> ul, og tryk på ↵ Enter to gange.
- Find og klik Skærm, og klik derefter på blok i den resulterende pop op-menu.
Trin 15. Gør rullemenuens indhold vist lodret
Som standard vises rullemenuens indhold i en vandret bjælke, men du kan tvinge dem ind i en lodret kolonne ved at gøre følgende:
- Klik på + ud for "Selectors", indtast derefter #name ul ul li, og tryk på ↵ Enter to gange.
- Find overskriften "float".
- Klik på "ingen" () til højre for overskriften "float".
Trin 16. Gem dit projekt
Tryk på Ctrl+S (Windows) eller ⌘ Command+S (Mac) for at gøre det.
