Hierdie wikiHow leer u hoe u Adobe Dreamweaver kan gebruik om 'n keuselys vir 'n webblad te skep. Kieskaste is spyskaarte wat "aftrek" as daar op 'n item op u webblad geklik word, wat meer opsies in die proses bied.
Stappe
Stap 1. Maak 'n Dreamweaver -projek oop
Dubbelklik op die projek se lêer om dit te doen. As u 'n nuwe Dreamweaver -projek wil skep, maak u Dreamweaver in plaas daarvan, klik lêer, klik Nuut, en volg die instruksies op die skerm.
Stap 2. Skep 'n geordende lys
Om 'n keuselys te skep, moet u ten minste een item met 'n kolpunt bevat. U kan 'n kolpunt maak deur CSS uit te skakel (klik op die Beskou kieslysitem, kies Stylweergawe, en klik Vertoonstyle as dit gemerk is), klik op die plek waar u die punt wil byvoeg, klik op die kolpunt -ikoon onderaan die venster en tik die punt se naam in. U moet dan weer CSS aanskakel voordat u verder gaan.
- Die naam van die punt hier sal dien as die aktiveerder van u keuselys (byvoorbeeld die knoppie waaroor 'n mens beweeg of tik om die keuselys oop te maak).
- Slaan hierdie stap oor as u reeds 'n lysitem het wat u in 'n keuselys wil omskep.
Stap 3. Bepaal die naam van u lys
Klik op die Kode oortjie en maak seker dat u op die Bronkode instelling, blaai dan af na die kode van u bestelde lys (dit sal tussen 'n"
"tag en a"
"tag) en soek die" "tag bo -aan"
tag. Die woord tussen aanhalings is die naam van u lys.
-
As u nie 'n naam sien nie, plaas die etiket (waar die naam verwys na die naam wat u verkies in die lys) direk bokant die
tag.
Stap 4. Verwyder die koeëlpunte
Maak seker dat u op die regte plek is deur op die Ontwerp oortjie en klik dan op die CSS Ontwerper oortjie in die regter boonste hoek van die venster, en doen dan die volgende:
- Klik + regs van die opskrif "Selectors".
- Tik in #naam ul waar "naam" die naam van u lys is.
- Druk ↵ Enter twee keer.
- Rol af en klik lys-styl-tipe in die ruit onderaan die CSS Ontwerper oortjie.
- Klik niks nie in die opspringlys wat hierop verskyn.
Stap 5. Verander u geordende lys om horisontaal te vertoon
Om so te doen:
- Klik + regs van die opskrif "Selectors".
- Tik #name li in waar "naam" die naam van u lys is.
- Vind die opskrif "float" in die ruit onderaan die CSS Ontwerper oortjie.
- Klik op die Links knoppie onmiddellik regs van die "float" -opskrif.
Stap 6. Voeg 'n aktiewe merker by jou lys
Klik op die + knoppie regs van "Keurders", tik dan #naam a in (waar "naam" die naam van u lys is) en druk twee keer op ↵ Tik.
Stap 7. Voeg 'n agtergrondkleur by
Kies die #naam a item, indien nodig, klik dan op die boksvormige "Agtergrondkleur" -oortjie bo-aan die CSS Ontwerper kies die agtergrondkleur opsie, en kies 'n agtergrondkleur om te gebruik.
Dit is die kleur wat u items in die aftrekkieslys sal gebruik
Stap 8. Laat u lysitems die "blok" -formaat gebruik
Hierdie formaat verseker dat wanneer iemand op 'n item in die lys klik of tik, dit kan oopmaak deur effens bo of onder dit te kies in plaas van om presies die teks te kies:
- Maak seker dat u #naam a item gekies word in die CSS Ontwerper oortjie.
- Rol af na die opskrif "vertoon" in die venster.
- Klik heel regs van die opskrif "vertoon" en klik dan blok in die resulterende spyskaart.
Stap 9. Voeg voering by indien nodig
As u agterkom dat u lysitems teen mekaar vasgeloop het, kan u 'n bietjie ruimte tussen hulle plaas deur die volgende te doen:
- Maak seker dat u #naam a item gekies word in die CSS Ontwerper oortjie.
- Rol af na die opskrif "padding" in die venster.
- Verander die boonste en onderste "px" teksvelde om ten minste 5 te lees.
- Verander die linker en regter "px" teksvelde om ten minste 10 te lees.
Stap 10. Skep 'n sweefkleur
Dit is die kleur wat verskyn as u met die muiswyser oor 'n item in die keuselys hou:
- Klik + regs van die opskrif "Selectors".
- Tik in #nave a: sweef (waar "naam" die naam van u lys is) en druk twee keer op ↵ Tik.
- Klik op die oortjie "Agtergrondkleur".
- Kies agtergrondkleur en kies dan 'n ligter kleur as wat u vir die agtergrondkleur gebruik het.
Stap 11. Skakel CSS uit
Klik op die Beskou kieslys, kies Stylweergawe, en klik op die Vertoonstyle opsie in die pop-out venster.
- As die Vertoonstyle Die opsie is grys, klik op enige plek in u Dreamweaver -dokument en probeer weer.
Stap 12. Skep die inhoud van die keuselys
U kan dit doen deur subpunte by te voeg onder die kolpunt wat u as die knoppie van die keuselys wil gebruik:
- Klik regs van die lysitem wat u in 'n keuselys wil verander, en druk dan op ↵ Enter.
- Druk Tab ↹.
- Tik die naam van u eerste keuselysitem in en druk dan ↵ Enter.
- Tik die naam van die volgende keuselys in, druk dan ↵ Enter en herhaal indien nodig.
Stap 13. Bind die drop-down menu inhoud aan 'n kolpunt item
Om so te doen:
- Klik + tik langs "Selectors" in #name ul ul en druk ↵ Enter twee keer.
- Rol af en klik vertoon, en klik dan niks nie in die pop-up menu.
- Soek en klik posisie, en klik dan absoluut in die pop-up menu.
Stap 14. Skep die keuselys self
U moet nog 'n selekteerder byvoeg om dit te doen:
- Klik + tik langs "Selectors" in #name ul li: sweef> ul en druk twee keer op ↵ Enter.
- Soek en klik vertoon, en klik dan blok in die pop-up-kieslys wat gevolg word.
Stap 15. Laat die inhoud van die keuselys vertikaal vertoon
Die inhoud van die aftreklys sal standaard in 'n horisontale balk vertoon word, maar u kan dit in 'n vertikale kolom dwing deur die volgende te doen:
- Klik + tik langs "Selectors" in #name ul ul li en druk twee keer op ↵ Enter.
- Vind die opskrif "float".
- Klik op die "geen" () opsie regs van die opskrif "float".
Stap 16. Stoor u projek
Druk Ctrl+S (Windows) of ⌘ Command+S (Mac) om dit te doen.
- As u 'n nuwe Dreamweaver -lêer vir hierdie projek geskep het, moet u 'n naam invoer, 'n stoorplek kies en klik Stoor om u lêer te stoor.
