Tämä wikiHow opettaa sinulle, miten voit luoda Web Dream -pudotusvalikon Adobe Dreamweaverin avulla. Pudotusvalikot ovat valikoita, jotka "pudottavat alas", kun verkkosivullasi olevaa kohdetta napsautetaan, ja ne tarjoavat enemmän vaihtoehtoja prosessissa.
Askeleet
Vaihe 1. Avaa Dreamweaver -projekti
Kaksoisnapsauta projektin tiedostoa tehdäksesi sen. Jos haluat luoda uuden Dreamweaver -projektin, avaa sen sijaan Dreamweaver, napsauta Tiedosto, klikkaus Uusija noudata näyttöön tulevia ohjeita.
Vaihe 2. Luo tilattu luettelo
Jotta voit luoda avattavan valikon, sinulla on oltava vähintään yksi luettelomerkki. Voit luoda luettelomerkin poistamalla CSS: n käytöstä (napsauta Näytä valikkokohta, valitse Tyyli Renderöintija napsauta Näytä tyylit jos se on valittuna), napsauttamalla kohtaa, johon haluat lisätä pisteen, napsauttamalla luettelomerkin kuvaketta ikkunan alaosassa ja kirjoittamalla pisteen nimen. Ota sitten CSS uudelleen käyttöön ennen kuin jatkat.
- Pisteen nimi toimii avattavan valikon aktivoijana (esim. Painike, jonka päällä vierität tai napautat avattavan valikon avaamiseksi).
- Ohita tämä vaihe, jos sinulla on jo luettelokohde, jonka haluat muuntaa avattavaksi valikkoksi.
Vaihe 3. Määritä luettelosi nimi
Klikkaa Koodi välilehti ja varmista, että olet Lähdekoodi vieritä alaspäin tilatun luettelon koodiin (se on"
"tunniste ja"
"tag") ja etsi "" -tunniste yläosan yläpuolelta
tag. Lainausmerkeissä oleva sana on luettelosi nimi.
-
Jos et näe nimeä, lisää tagi (jossa nimi viittaa haluamaasi luettelon nimeen) suoraan sen yläpuolelle
tag.
Vaihe 4. Poista luettelomerkit
Varmista, että olet oikeassa paikassa napsauttamalla Design välilehti ja napsauta sitten CSS -suunnittelija -välilehteä ikkunan oikeassa yläkulmassa, ja toimi seuraavasti:
- Klikkaus + "Valitsimet" -otsikon oikealla puolella.
- Kirjoita #name ul, jossa "nimi" on luettelosi nimi.
- Paina ↵ Enter kahdesti.
- Vieritä alas ja napsauta list-style-type alareunassa olevassa ruudussa CSS -suunnittelija välilehti.
- Klikkaus ei mitään avautuvassa ponnahdusvalikossa.
Vaihe 5. Muuta tilattu luettelosi näytettäväksi vaakasuunnassa
Tehdä niin:
- Klikkaus + "Valitsimet" -otsikon oikealla puolella.
- Kirjoita #name li jossa "nimi" on luettelosi nimi.
- Etsi "kelluva" otsikko ruudun alareunasta CSS -suunnittelija välilehti.
- Klikkaa Vasen -painiketta heti kelluvan otsikon oikealla puolella.
Vaihe 6. Lisää luetteloon aktiivinen tunniste
Klikkaa + -painiketta "Valitsimet" -kohdan oikealla puolella, kirjoita sitten #name a (jossa "nimi" on luettelosi nimi) ja paina ↵ Enter kahdesti.
Vaihe 7. Lisää taustaväri
Valitse #nimi a kohde tarvittaessa ja napsauta sitten ruudun muotoista "Taustaväri" -välilehteä yläreunassa CSS -suunnittelija -ruudussa, valitse taustaväri ja valitse käytettävä taustaväri.
Tämä on väri, jota avattavan luettelon kohteet käyttävät
Vaihe 8. Tee luettelokohteistasi "lohko" -muoto
Tämä muoto varmistaa, että kun joku napsauttaa tai napauttaa kohdetta luettelossa, hän voi avata sen valitsemalla hiukan sen ylä- tai alapuolelta sen sijaan, että joutuisi valitsemaan tarkasti tekstin:
- Varmista, että sinun #nimi a kohde on valittuna kohdassa CSS -suunnittelija välilehti.
- Vieritä alas ruudun "näyttö" -otsikkoon.
- Napsauta "näyttö" -otsikon oikeaa reunaa ja napsauta sitten lohko tuloksena olevassa valikossa.
Vaihe 9. Lisää pehmusteita tarvittaessa
Jos huomaat, että luettelokohteesi ovat juuttuneet toisiaan vasten, voit sijoittaa niiden väliin tilaa seuraavasti:
- Varmista, että sinun #nimi a kohde on valittuna kohdassa CSS -suunnittelija välilehti.
- Vieritä alas ruudun "täyte" -otsikkoon.
- Muuta ylempi ja alempi "px" -tekstikenttä vähintään 5: ksi.
- Muuta vasen ja oikea "px" -tekstikenttä vähintään 10: ksi.
Vaihe 10. Luo hover -väri
Tämä väri tulee näkyviin, kun viet hiiren osoittimen avattavan valikon kohteen päälle:
- Klikkaus + "Valitsimet" -otsikon oikealla puolella.
- Kirjoita #nave a: hover (jossa "nimi" on luettelosi nimi) ja paina ↵ Enter kahdesti.
- Napsauta "Taustaväri" -välilehteä.
- Valitse taustaväri ja valitse sitten vaaleampi väri kuin taustavärinä.
Vaihe 11. Katkaise CSS
Klikkaa Näytä valikkokohta, valitse Tyyli Renderöintija napsauta Näytä tyylit vaihtoehto ponnahdusikkunassa.
Jos Näytä tyylit vaihtoehto näkyy harmaana, napsauta mitä tahansa Dreamweaver -asiakirjasi kohtaa ja yritä uudelleen.
Vaihe 12. Luo avattavan valikon sisältö
Voit tehdä tämän lisäämällä alakohtia luettelomerkin alle, jota haluat käyttää avattavan valikon painikkeena:
- Napsauta sen luettelokohteen oikealla puolella, josta haluat tehdä avattavan valikon, ja paina sitten ↵ Enter.
- Paina sarkainta ↹.
- Kirjoita ensimmäisen avattavan valikkokohteen nimi ja paina ↵ Enter.
- Kirjoita seuraavan avattavan valikon nimi ja paina ↵ Enter ja toista tarvittaessa.
Vaihe 13. Sido avattavan valikon sisältö luettelokohtaan
Tehdä niin:
- Klikkaus + "Valitsimet" -kohdan vieressä, kirjoita #name ul ul ja paina ↵ Enter kahdesti.
- Vieritä alas ja napsauta näyttöja napsauta sitten ei mitään ponnahdusvalikossa.
- Etsi ja napsauta asemaja napsauta sitten ehdoton ponnahdusvalikossa.
Vaihe 14. Luo avattava valikko itse
Sinun on lisättävä vielä yksi valitsin tätä varten:
- Klikkaus + kirjoita "Valitsimet" -kohdan viereen ja kirjoita #name ul li: hover> ul ja paina ↵ Enter kahdesti.
- Etsi ja napsauta näyttöja napsauta sitten lohko avautuvassa ponnahdusvalikossa.
Vaihe 15. Aseta avattavan valikon sisältö pystysuoraan
Oletuksena avattavan valikon sisältö näkyy vaakasuorassa palkissa, mutta voit pakottaa ne pystysarakkeeseen seuraavasti:
- Klikkaus + "Valitsimet" -kohdan viereen, kirjoita #name ul ul li ja paina ↵ Enter kahdesti.
- Etsi otsikko "float".
- Napsauta "ei mitään" () vaihtoehto "float" -otsikon oikealla puolella.
Vaihe 16. Tallenna projekti
Paina Ctrl+S (Windows) tai ⌘ Command+S (Mac).
