Hur man lägger till en listruta i Dreamweaver (med bilder)

Innehållsförteckning:

Hur man lägger till en listruta i Dreamweaver (med bilder)
Hur man lägger till en listruta i Dreamweaver (med bilder)

Video: Hur man lägger till en listruta i Dreamweaver (med bilder)

Video: Hur man lägger till en listruta i Dreamweaver (med bilder)
Video: Обнаружение скрытого UAP? | Выжить в черной дыре с Ави Лоэбом Obnaruzheniye skrytogo UAP? Avi Loebom 2024, Mars
Anonim

Denna wikiHow lär dig hur du använder Adobe Dreamweaver för att skapa en listruta för en webbsida. Nedrullningsbara rutor är menyer som "rullas ner" när du klickar på ett objekt på din webbsida, vilket ger fler alternativ i processen.

Steg

Lägg till en listruta i Dreamweaver Steg 1
Lägg till en listruta i Dreamweaver Steg 1

Steg 1. Öppna ett Dreamweaver -projekt

Dubbelklicka på projektets fil för att göra det. Om du vill skapa ett nytt Dreamweaver -projekt öppnar du istället Dreamweaver, klickar på Fil, klick Nyoch följ alla instruktioner på skärmen.

Lägg till en listruta i Dreamweaver Steg 2
Lägg till en listruta i Dreamweaver Steg 2

Steg 2. Skapa en ordnad lista

För att skapa en rullgardinsmeny måste du ha minst ett punktobjekt. Du kan skapa en punkt genom att stänga av CSS (klicka på Se menyalternativ, välj Stilåtergivningoch klicka på Visa stilar om det är markerat), klicka på platsen där du vill lägga till punkten, klicka på punktpunktsikonen längst ner i fönstret och skriv in punktens namn. Du bör sedan slå på CSS innan du fortsätter.

  • Punktens namn här kommer att fungera som rullgardinsmenyens aktivator (t.ex. knappen över vilken man svävar eller trycker för att öppna rullgardinsmenyn).
  • Hoppa över det här steget om du redan har ett listobjekt som du vill konvertera till en rullgardinsmeny.
Lägg till en listruta i Dreamweaver Steg 3
Lägg till en listruta i Dreamweaver Steg 3

Steg 3. Bestäm listans namn

Klicka på Koda fliken och se till att du är på Källkod inställning, rulla sedan ner till din beställda listas kod (det kommer att vara mellan en"

"tagg och a"

"tagg) och leta efter" "taggen ovanför toppen"

tag. Ordet i citat är listans namn.

  • Om du inte ser ett namn sätter du in taggen (där namnet refererar till ditt föredragna namn på listan) direkt ovanför

    märka.

Lägg till en listruta i Dreamweaver Steg 4
Lägg till en listruta i Dreamweaver Steg 4

Steg 4. Ta bort punkterna

Se till att du är på rätt plats genom att klicka på Design fliken och klicka sedan på CSS Designer fliken i det övre högra hörnet av fönstret och gör sedan följande:

  • Klick + till höger om rubriken "Väljare".
  • Skriv in #name ul där "name" är listans namn.
  • Tryck på ↵ Enter två gånger.
  • Rulla ner och klicka list-stil-typ i rutan längst ner på CSS Designer flik.
  • Klick ingen i den resulterande popup-menyn.
Lägg till en listruta i Dreamweaver Steg 5
Lägg till en listruta i Dreamweaver Steg 5

Steg 5. Ändra din beställda lista så att den visas horisontellt

Att göra så:

  • Klick + till höger om rubriken "Väljare".
  • Skriv in #name li där "namn" är listans namn.
  • Hitta rubriken "float" i rutan längst ner på CSS Designer flik.
  • Klicka på Vänster knappen direkt till höger om rubriken "float".
Lägg till en listruta i Dreamweaver Steg 6
Lägg till en listruta i Dreamweaver Steg 6

Steg 6. Lägg till en aktiv tagg för din lista

Klicka på + knappen till höger om "Selectors", skriv sedan in #name a (där "name" är listans namn) och tryck på ↵ Enter två gånger.

Lägg till en listruta i Dreamweaver Steg 7
Lägg till en listruta i Dreamweaver Steg 7

Steg 7. Lägg till en bakgrundsfärg

Välj #namn a objekt om det behövs, klicka sedan på den rutformade fliken "Bakgrundsfärg" högst upp på CSS Designer i rutan, välj bakgrundsfärg alternativet och välj en bakgrundsfärg att använda.

Det är den färg din listruta kommer att använda

Lägg till en listruta i Dreamweaver Steg 8
Lägg till en listruta i Dreamweaver Steg 8

Steg 8. Gör dina listobjekt använda "block" -formatet

Detta format säkerställer att när någon klickar eller trycker på ett objekt i listan kan de öppna det genom att välja något ovanför eller under det istället för att behöva välja exakt texten:

  • Se till att din #namn a objektet väljs i CSS Designer flik.
  • Rulla ner till rubriken "display" i rutan.
  • Klicka längst till höger på rubriken "display" och klicka sedan på blockera i den resulterande menyn.
Lägg till en listruta i Dreamweaver Steg 9
Lägg till en listruta i Dreamweaver Steg 9

Steg 9. Lägg till vaddering vid behov

Om du märker att dina listobjekt har fastnat mot varandra kan du placera lite utrymme mellan dem genom att göra följande:

  • Se till att din #namn a objektet väljs i CSS Designer flik.
  • Rulla ner till rubriken "vaddering" i rutan.
  • Ändra de övre och nedre "px" textfälten för att läsa minst 5.
  • Ändra vänster och höger "px" textfält för att läsa minst 10.
Lägg till en listruta i Dreamweaver Steg 10
Lägg till en listruta i Dreamweaver Steg 10

Steg 10. Skapa en svävfärg

Det här är färgen som visas när du håller muspekaren över ett objekt i rullgardinsmenyn:

  • Klick + till höger om rubriken "Väljare".
  • Skriv in #nave a: sväva (där "namn" är listans namn) och tryck på ↵ Enter två gånger.
  • Klicka på fliken "Bakgrundsfärg".
  • Välj bakgrundsfärg och välj sedan en ljusare färg än du använde för bakgrundsfärgen.
Lägg till en listruta i Dreamweaver Steg 11
Lägg till en listruta i Dreamweaver Steg 11

Steg 11. Stäng av CSS

Klicka på Se menyalternativ, välj Stilåtergivningoch klicka på Visa stilar alternativet i popup-fönstret.

Om Visa stilar alternativet är nedtonat, klicka var som helst i ditt Dreamweaver -dokument och försök igen.

Lägg till en listruta i Dreamweaver Steg 12
Lägg till en listruta i Dreamweaver Steg 12

Steg 12. Skapa rullgardinsmenyinnehållet

Du kan göra detta genom att lägga till underpunkter under punkten som du vill använda som rullgardinsmenyens knapp:

  • Klicka till höger om listobjektet du vill göra till en rullgardinsmeny och tryck sedan på ↵ Enter.
  • Tryck på Tab ↹.
  • Skriv in namnet på ditt första rullgardinsmenyalternativ och tryck sedan på ↵ Retur.
  • Skriv in namnet på nästa rullgardinsmeny, tryck sedan på ↵ Enter och upprepa vid behov.
Lägg till en listruta i Dreamweaver Steg 13
Lägg till en listruta i Dreamweaver Steg 13

Steg 13. Bind ned rullgardinsmenyn till ett punktobjekt

Att göra så:

  • Klick + bredvid "Selectors", skriv sedan in #name ul ul och tryck på ↵ Enter två gånger.
  • Rulla ner och klicka visa, Klicka sedan ingen i popup-menyn.
  • Hitta och klicka placera, Klicka sedan absolut i popup-menyn.
Lägg till en listruta i Dreamweaver Steg 14
Lägg till en listruta i Dreamweaver Steg 14

Steg 14. Skapa själva rullgardinsmenyn

Du måste lägga till ännu en väljare för att göra detta:

  • Klick + bredvid "Selectors", skriv sedan in #name ul li: sväva> ul och tryck på ↵ Enter två gånger.
  • Hitta och klicka visa, Klicka sedan blockera i den resulterande popup-menyn.
Lägg till en listruta i Dreamweaver Steg 15
Lägg till en listruta i Dreamweaver Steg 15

Steg 15. Gör rullgardinsmenyn innehåll vertikalt

Som standard visas rullgardinsmenyn i ett horisontellt fält, men du kan tvinga dem till en vertikal kolumn genom att göra följande:

  • Klick + bredvid "Selectors", skriv sedan in #name ul ul li och tryck på ↵ Enter två gånger.
  • Hitta rubriken "float".
  • Klicka på "ingen" () till höger om rubriken "float".
Lägg till en listruta i Dreamweaver Steg 16
Lägg till en listruta i Dreamweaver Steg 16

Steg 16. Spara ditt projekt

Tryck på Ctrl+S (Windows) eller ⌘ Command+S (Mac) för att göra det.

Om du skapade en ny Dreamweaver -fil för det här projektet måste du ange ett namn, välja en plats för att spara och klicka på Spara för att spara din fil.

Tips

Rekommenderad: