Ovaj wikiHow vas uči kako koristiti Adobe Dreamweaver za stvaranje padajućeg okvira za web stranicu. Padajući okviri su izbornici koji se "spuštaju" kada se klikne na stavku na vašoj web stranici i predstavljaju više mogućnosti u tom procesu.
Koraci
Korak 1. Otvorite projekt Dreamweaver
Dvaput kliknite datoteku projekta da biste to učinili. Ako želite stvoriti novi Dreamweaver projekt, umjesto toga otvorite Dreamweaver, kliknite Datoteka, kliknite Novii slijedite upute na zaslonu.
Korak 2. Napravite uređen popis
Da biste stvorili padajući izbornik, morate imati barem jednu stavku s grafičkim oznakama. Oznaku možete stvoriti isključivanjem CSS -a (kliknite na Pogled stavku izbornika, odaberite Renderiranje stilai kliknite Stilovi prikaza ako je označeno), kliknite mjesto na koje želite dodati točku, kliknite ikonu grafičke oznake pri dnu prozora i upišite naziv točke. Prije nego što nastavite, trebate ponovno uključiti CSS.
- Naziv točke ovdje poslužit će kao aktivator vašeg padajućeg izbornika (npr. Gumb iznad kojeg se lebdi ili dodirne za otvaranje padajućeg izbornika).
- Preskočite ovaj korak ako već imate stavku popisa koju želite pretvoriti u padajući izbornik.
Korak 3. Odredite naziv popisa
Kliknite na Kodirati karticu i provjerite jeste li na Izvorni kod postavke, a zatim se pomaknite prema dolje do koda naručenog popisa (bit će između"
"oznaka i"
"tag) i potražite oznaku" "iznad vrha"
. Riječ u navodnicima naziv je vašeg popisa.
-
Ako ne vidite naziv, umetnite oznaku (gdje se naziv odnosi na željeni naziv popisa) izravno iznad
označiti.
Korak 4. Uklonite točke (e) označavanja
Uvjerite se da ste na pravom mjestu klikom na Oblikovati karticu, a zatim kliknite na CSS Designer karticu u gornjem desnom kutu prozora, a zatim učinite sljedeće:
- Klik + desno od naslova "Selektori".
- Upišite #name ul gdje je "name" naziv vašeg popisa.
- Dvaput pritisnite ↵ Enter.
- Pomaknite se prema dolje i kliknite list-style-type u oknu pri dnu CSS Designer tab.
- Klik nijedan u rezultirajućem skočnom izborniku.
Korak 5. Promijenite svoj naručeni popis tako da se prikazuje vodoravno
Učiniti tako:
- Klik + desno od naslova "Selektori".
- Upišite #name li gdje je "name" naziv vašeg popisa.
- Pronađite naslov "float" u oknu pri dnu CSS Designer tab.
- Kliknite na Lijevo gumb odmah desno od naslova "plutajući".
Korak 6. Dodajte aktivnu oznaku za svoj popis
Kliknite na + tipku desno od "Selectors", zatim upišite #name a (gdje je "name" naziv vašeg popisa) i pritisnite ↵ Enter dva puta.
Korak 7. Dodajte boju pozadine
Odaberite #ime a stavku ako je potrebno, a zatim kliknite karticu "Boja pozadine" u obliku okvira pri vrhu datoteke CSS Designer oknu, odaberite boja pozadine i odaberite boju pozadine koju ćete koristiti.
Ovo je boja koju će koristiti stavke vašeg padajućeg popisa
Korak 8. Neka vaše stavke popisa budu u formatu "blok"
Ovaj format osigurava da kada netko klikne ili dodirne stavku na popisu, može je otvoriti odabirom malo iznad ili ispod nje umjesto da mora precizno odabrati tekst:
- Pobrinite se da vaš #ime a stavka je odabrana u CSS Designer tab.
- Pomaknite se dolje do naslova "display" u oknu.
- Pritisnite krajnju desnu stranu naslova "zaslon", a zatim kliknite blok u rezultirajućem izborniku.
Korak 9. Po potrebi dodajte podstavke
Ako primijetite da su stavke vašeg popisa zaglavljene jedna protiv druge, možete postaviti razmak između njih na sljedeći način:
- Pobrinite se da vaš #ime a stavka je odabrana u CSS Designer tab.
- Pomaknite se prema dolje do naslova "padding" u oknu.
- Promijenite gornje i donje tekstualno polje "px" tako da bude najmanje 5.
- Promijenite lijevo i desno "px" tekstualno polje tako da bude najmanje 10.
Korak 10. Izradite boju lebdenja
Ovo je boja koja će se pojaviti kada zadržite pokazivač miša iznad stavke na padajućem izborniku:
- Klik + desno od naslova "Selektori".
- Upišite #nave a: hover (gdje je "name" naziv vašeg popisa) i dvaput pritisnite ↵ Enter.
- Kliknite karticu "Boja pozadine".
- Odaberi boja pozadine a zatim odaberite svjetliju boju nego što ste koristili za boju pozadine.
Korak 11. Isključite CSS
Kliknite na Pogled stavku izbornika, odaberite Renderiranje stilai kliknite na Stilovi prikaza opciju u skočnom prozoru.
Ako je Stilovi prikaza opcija je zasivljena, kliknite bilo gdje u svom dokumentu Dreamweaver i pokušajte ponovno.
Korak 12. Izradite sadržaj padajućeg izbornika
To možete učiniti dodavanjem podtočaka ispod grafičke oznake koje želite koristiti kao gumb padajućeg izbornika:
- Pritisnite desno od stavke popisa koju želite pretvoriti u padajući izbornik, a zatim pritisnite ↵ Enter.
- Pritisnite Tab ↹.
- Upišite naziv prve stavke padajućeg izbornika, a zatim pritisnite ↵ Enter.
- Upišite naziv sljedećeg padajućeg izbornika, a zatim pritisnite ↵ Enter i po potrebi ponovite.
Korak 13. Povežite sadržaj padajućeg izbornika s oznakom
Učiniti tako:
- Klik + pored "Selektori", zatim upišite #name ul ul i dvaput pritisnite ↵ Enter.
- Pomaknite se prema dolje i kliknite prikaz, a zatim kliknite nijedan u skočnom izborniku.
- Pronađite i kliknite položaj, a zatim kliknite apsolutna u skočnom izborniku.
Korak 14. Izradite sam padajući izbornik
Za to ćete morati dodati još jedan birač:
- Klik + pored "Selektori", zatim upišite #name ul li: hover> ul i dvaput pritisnite ↵ Enter.
- Pronađite i kliknite prikaz, a zatim kliknite blok u rezultirajućem skočnom izborniku.
Korak 15. Postavite sadržaj padajućeg izbornika okomito
Prema zadanim postavkama sadržaj padajućeg izbornika prikazat će se u vodoravnoj traci, ali možete ih prisiliti u okomiti stupac na sljedeći način:
- Klik + pored "Selectors", zatim upišite #name ul ul li i pritisnite ↵ Enter dva puta.
- Pronađite naslov "plutajući".
- Pritisnite "nema" () opciju s desne strane naslova "float".
Korak 16. Spremite svoj projekt
Pritisnite Ctrl+S (Windows) ili ⌘ Command+S (Mac) da biste to učinili.
