Hoe om 'n afrolkassie in Dreamweaver (met foto's) by te voeg

INHOUDSOPGAWE:

Hoe om 'n afrolkassie in Dreamweaver (met foto's) by te voeg
Hoe om 'n afrolkassie in Dreamweaver (met foto's) by te voeg

Video: Hoe om 'n afrolkassie in Dreamweaver (met foto's) by te voeg

Video: Hoe om 'n afrolkassie in Dreamweaver (met foto's) by te voeg
Video: Как заработать $ 377,86 в день без инвестиций (новый спосо... 2024, April
Anonim

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

Voeg 'n aftrekboks by in Dreamweaver Stap 1
Voeg 'n aftrekboks by in Dreamweaver Stap 1

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.

Voeg 'n aftrekboks by in Dreamweaver Stap 2
Voeg 'n aftrekboks by in Dreamweaver Stap 2

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.
Voeg 'n afrolkassie by Dreamweaver Stap 3
Voeg 'n afrolkassie by Dreamweaver Stap 3

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.

Voeg 'n aftrekboks by in Dreamweaver Stap 4
Voeg 'n aftrekboks by in Dreamweaver Stap 4

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.
Voeg 'n aftrekboks by in Dreamweaver Stap 5
Voeg 'n aftrekboks by in Dreamweaver Stap 5

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.
Voeg 'n aftrekboks by in Dreamweaver Stap 6
Voeg 'n aftrekboks by in Dreamweaver Stap 6

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.

Voeg 'n aftrekboks by in Dreamweaver Stap 7
Voeg 'n aftrekboks by in Dreamweaver Stap 7

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

Voeg 'n aftrekboks by in Dreamweaver Stap 8
Voeg 'n aftrekboks by in Dreamweaver Stap 8

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.
Voeg 'n aftrekboks by in Dreamweaver Stap 9
Voeg 'n aftrekboks by in Dreamweaver Stap 9

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.
Voeg 'n aftrekboks by in Dreamweaver Stap 10
Voeg 'n aftrekboks by in Dreamweaver Stap 10

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.
Voeg 'n aftrekboks by in Dreamweaver Stap 11
Voeg 'n aftrekboks by in Dreamweaver Stap 11

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.

Voeg 'n aftrekboks by in Dreamweaver Stap 12
Voeg 'n aftrekboks by in Dreamweaver Stap 12

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.
Voeg 'n aftrekboks in Dreamweaver Stap 13 by
Voeg 'n aftrekboks in Dreamweaver Stap 13 by

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.
Voeg 'n afrolkassie by Dreamweaver Stap 14
Voeg 'n afrolkassie by Dreamweaver Stap 14

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.
Voeg 'n aftrekboks by in Dreamweaver Stap 15
Voeg 'n aftrekboks by in Dreamweaver Stap 15

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".
Voeg 'n aftrekboks in Dreamweaver Stap 16 by
Voeg 'n aftrekboks in Dreamweaver Stap 16 by

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.

Aanbeveel: