Ta wikiHow vas uči, kako s programom Adobe Dreamweaver ustvariti spustno polje za spletno stran. Spustna polja so meniji, ki se "spustijo", ko kliknete element na vaši spletni strani in v tem postopku prikažejo več možnosti.
Koraki
Korak 1. Odprite projekt Dreamweaver
Dvokliknite datoteko projekta, da to storite. Če želite ustvariti nov projekt Dreamweaver, namesto tega odprite Dreamweaver, kliknite mapa, kliknite Novoin sledite pozivom na zaslonu.
Korak 2. Ustvarite urejen seznam
Če želite ustvariti spustni meni, morate imeti vsaj en element z oznako. Oznako lahko ustvarite tako, da izklopite CSS (kliknite Pogled element menija, izberite Upodobitev slogain kliknite Slogi prikaza če je označeno), kliknite mesto, kamor želite dodati točko, kliknite ikono označevalne točke na dnu okna in vnesite ime točke. Preden nadaljujete, morate znova vklopiti CSS.
- Ime točke tukaj bo služilo kot aktivator vašega spustnega menija (npr. Gumb, nad katerim lebdite ali se dotaknete, da odprete spustni meni).
- Ta korak preskočite, če že imate element seznama, ki ga želite pretvoriti v spustni meni.
Korak 3. Določite ime svojega seznama
Kliknite na Koda zavihek in se prepričajte, da ste na Izvorna koda nastavitve, nato se pomaknite navzdol do kode svojega seznama (to bo med"
"oznaka in"
"tag) in poiščite oznako" "nad vrhom"
. Beseda v narekovajih je ime vašega seznama.
-
Če ne vidite imena, vstavite oznako (kjer se ime nanaša na želeno ime seznama) neposredno nad
oznaka.
Korak 4. Odstranite točke (e) označevanja
Prepričajte se, da ste na pravem mestu s klikom na Oblikovanje zavihek in nato kliknite Oblikovalec CSS zavihek v zgornjem desnem kotu okna, nato pa naredite naslednje:
- Kliknite + desno od naslova »Izbirniki«.
- Vnesite #name ul, kjer je "name" ime vašega seznama.
- Dvakrat pritisnite ↵ Enter.
- Pomaknite se navzdol in kliknite list-style-type v podoknu na dnu Oblikovalec CSS zavihek.
- Kliknite nobena v pojavnem pojavnem meniju.
Korak 5. Spremenite svoj naročeni seznam tako, da se prikaže vodoravno
Narediti tako:
- Kliknite + desno od naslova »Izbirniki«.
- Vnesite #name li, kjer je "name" ime vašega seznama.
- Poiščite naslov "float" v podoknu na dnu Oblikovalec CSS zavihek.
- Kliknite na Levo gumb takoj na desni strani naslova "float".
Korak 6. Dodajte aktivno oznako na svoj seznam
Kliknite na + na desni strani "Selectors", nato vnesite #name a (kjer je "name" ime vašega seznama) in dvakrat pritisnite ↵ Enter.
Korak 7. Dodajte barvo ozadja
Izberite #ime a element, če je potrebno, nato kliknite zavihek »Barva ozadja« na vrhu Oblikovalec CSS podoknu izberite Barva ozadja in izberite barvo ozadja, ki jo želite uporabiti.
To je barva, ki jo bodo uporabljali elementi vašega spustnega seznama
Korak 8. Naj bodo elementi seznama v obliki zapisa "blokiraj"
Ta oblika zagotavlja, da jo lahko nekdo, ko klikne ali se dotakne elementa na seznamu, odpre tako, da izbere rahlo nad ali pod njim, namesto da mora natančno izbrati besedilo:
- Poskrbite, da bo vaš #ime a element je izbran v Oblikovalec CSS zavihek.
- Pomaknite se navzdol do naslova »zaslon« v podoknu.
- Kliknite skrajno desno stran naslova "zaslon", nato kliknite blok v nastalem meniju.
Korak 9. Po potrebi dodajte oblazinjenje
Če opazite, da so elementi seznama medsebojno stisnjeni, lahko med njimi postavite nekaj prostora:
- Poskrbite, da bo vaš #ime a element je izbran v Oblikovalec CSS zavihek.
- Pomaknite se navzdol do naslova »padding« v podoknu.
- Spremenite zgornje in spodnje besedilno polje "px" tako, da se glasi vsaj 5.
- Levo in desno besedilno polje "px" spremenite tako, da se glasi vsaj 10.
Korak 10. Ustvarite barvo lebdenja
To je barva, ki se prikaže, ko premaknete kazalec miške nad element v spustnem meniju:
- Kliknite + desno od naslova »Izbirniki«.
- Vnesite #nave a: hover (kjer je "ime" ime vašega seznama) in dvakrat pritisnite ↵ Enter.
- Kliknite zavihek "Barva ozadja".
- Izberite Barva ozadja in nato izberite svetlejšo barvo, kot ste jo uporabili za barvo ozadja.
Korak 11. Izklopite CSS
Kliknite na Pogled element menija, izberite Upodobitev slogain kliknite na Slogi prikaza možnost v pojavnem oknu.
Če je Slogi prikaza možnost je zatemnjena, kliknite kjer koli v dokumentu Dreamweaver in poskusite znova.
Korak 12. Ustvarite vsebino spustnega menija
To lahko storite tako, da pod oznako podčrtaja dodate podtočke, ki jih želite uporabiti kot gumb spustnega menija:
- Kliknite desno od elementa seznama, ki ga želite spremeniti v spustni meni, nato pritisnite ↵ Enter.
- Pritisnite Tab ↹.
- Vnesite ime prvega spustnega menija in pritisnite ↵ Enter.
- Vnesite ime naslednjega spustnega menija, nato pritisnite ↵ Enter in po potrebi ponovite.
Korak 13. Prilepite vsebino spustnega menija na oznako
Narediti tako:
- Kliknite + zraven »Izbirniki«, nato vnesite #name ul ul in dvakrat pritisnite ↵ Enter.
- Pomaknite se navzdol in kliknite zaslon, nato kliknite nobena v pojavnem meniju.
- Poiščite in kliknite položaj, nato kliknite absolutno v pojavnem meniju.
Korak 14. Ustvarite sam spustni meni
Če želite to narediti, morate dodati še en izbirnik:
- Kliknite + zraven »Izbirniki«, nato vnesite #name ul li: hover> ul in dvakrat pritisnite ↵ Enter.
- Poiščite in kliknite zaslon, nato kliknite blok v pojavnem pojavnem meniju.
Korak 15. Vsebino spustnega menija nastavite navpično
Privzeto se vsebina spustnega menija prikaže v vodoravni vrstici, vendar jih lahko vsilite v navpični stolpec tako:
- Kliknite + zraven »Izbirniki«, nato vnesite #name ul ul li in dvakrat pritisnite ↵ Enter.
- Poiščite naslov "plavajoči".
- Kliknite na "nič" () možnost desno od naslova "float".
Korak 16. Shranite svoj projekt
Če želite to narediti, pritisnite Ctrl+S (Windows) ali ⌘ Command+S (Mac).
