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 opcija u procesu.
Koraci
Korak 1. Otvorite Dreamweaver projekat
Dvaput kliknite na datoteku projekta da biste to učinili. Ako želite stvoriti novi Dreamweaver projekt, umjesto toga otvorite Dreamweaver, kliknite Datoteka, kliknite Novoi slijedite sve upute na ekranu.
Korak 2. Kreirajte uređenu listu
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 View stavku menija, izaberite Renderiranje stilai kliknite Stilovi prikaza ako je označeno), klikom na lokaciju na koju želite dodati točku, klikom na ikonu grafičke oznake pri dnu prozora i upisivanjem naziva točke. Zatim biste trebali ponovo uključiti CSS prije nego nastavite.
- Naziv točke ovdje poslužit će kao aktivator vašeg padajućeg izbornika (npr. Tipka iznad koje se lebdi ili dodirne za otvaranje padajućeg izbornika).
- Preskočite ovaj korak ako već imate stavku liste koju želite pretvoriti u padajući izbornik.
Korak 3. Odredite naziv svoje liste
Kliknite na Kod karticu i provjerite jeste li na Izvorni kod postavke, zatim se pomaknite prema dolje do koda svoje naručene liste (bit će između"
"tag and a"
"tag) i potražite oznaku" "iznad vrha"
. Riječ pod navodnicima je naziv vaše liste.
-
Ako ne vidite ime, umetnite oznaku (gdje se naziv odnosi na željeni naziv liste) direktno iznad
tag.
Korak 4. Uklonite grafičke oznake (e)
Uvjerite se da ste na pravom mjestu klikom na Dizajn karticu, a zatim kliknite na CSS Designer karticu u gornjem desnom kutu prozora, a zatim učinite sljedeće:
- Kliknite + desno od naslova "Selektori".
- Upišite #name ul gdje je "name" naziv vaše liste.
- Dvaput pritisnite ↵ Enter.
- Pomaknite se prema dolje i kliknite list-style-type u oknu pri dnu CSS Designer tab.
- Kliknite nijedan u rezultirajućem skočnom izborniku.
Korak 5. Promijenite svoju naručenu listu da se prikazuje vodoravno
Uraditi tako:
- Kliknite + desno od naslova "Selektori".
- Unesite #name li gdje je "name" naziv vaše liste.
- Pronađite naslov "float" u oknu na dnu CSS Designer tab.
- Kliknite na Lijevo dugme odmah desno od naslova "float".
Korak 6. Dodajte aktivnu oznaku za svoju listu
Kliknite na + dugme s desne strane "Selectors", zatim upišite #name a (gdje je "name" naziv vaše liste) 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 CSS Designer oknu, odaberite boja pozadine opciju i odaberite boju pozadine koju ćete koristiti.
Ovo je boja koju će koristiti stavke vaše padajuće liste
Korak 8. Neka stavke liste 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:
- Uverite se da je vaš #ime a stavka je odabrana u CSS Designer tab.
- Pomaknite se prema dolje do naslova "display" u oknu.
- Kliknite krajnju desnu stranu naslova "display", a zatim kliknite blok u rezultirajućem meniju.
Korak 9. Dodajte padding ako je potrebno
Ako primijetite da su vam stavke na listi međusobno zaglavljene, možete postaviti neki razmak između njih na sljedeći način:
- Uverite se da je vaš #ime a stavka je odabrana u CSS Designer tab.
- Pomaknite se prema dolje do naslova "padding" u oknu.
- Promijenite gornje i donje "px" tekstualno polje tako da bude najmanje 5.
- Promijenite lijevo i desno "px" tekstualno polje tako da pročita najmanje 10.
Korak 10. Kreirajte boju lebdenja
Ovo je boja koja će se pojaviti kada zadržite pokazivač miša iznad stavke u padajućem izborniku:
- Kliknite + desno od naslova "Selektori".
- Upišite #nave a: hover (gdje je "name" naziv vaše liste) i pritisnite ↵ Enter dva puta.
- Kliknite karticu "Boja pozadine".
- Odaberite boja pozadine a zatim odaberite svjetliju boju nego što ste koristili za boju pozadine.
Korak 11. Isključite CSS
Kliknite na View stavku menija, izaberite Renderiranje stilai kliknite na Stilovi prikaza opciju u iskačućem prozoru.
Ako je Stilovi prikaza opcija je zasivljena, kliknite bilo gdje u svom Dreamweaver dokumentu i pokušajte ponovo.
Korak 12. Kreirajte sadržaj padajućeg menija
To možete učiniti dodavanjem podtočaka ispod grafičke oznake koje želite koristiti kao gumb padajućeg izbornika:
- Kliknite desno od stavke liste koju želite pretvoriti u padajući izbornik, a zatim pritisnite ↵ Enter.
- Pritisnite Tab ↹.
- Otkucajte naziv prve stavke padajućeg menija, a zatim pritisnite ↵ Enter.
- Upišite naziv sljedećeg padajućeg izbornika, zatim pritisnite ↵ Enter i po potrebi ponovite.
Korak 13. Povežite sadržaj padajućeg menija za stavku s grafičkim oznakama
Uraditi tako:
- Kliknite + pored "Selektori", zatim upišite #name ul ul i dvaput pritisnite ↵ Enter.
- Pomaknite se prema dolje i kliknite prikaz, a zatim kliknite nijedan u iskačućem meniju.
- Pronađite i kliknite pozicija, a zatim kliknite apsolutno u iskačućem meniju.
Korak 14. Kreirajte sam padajući izbornik
Za ovo ćete morati dodati još jedan birač:
- Kliknite + 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:
- Kliknite + pored "Selektori", zatim upišite #name ul ul li i pritisnite ↵ Enter dva puta.
- Pronađite naslov "plutajući".
- Kliknite na "ništa" () opciju desno od naslova "float".
Korak 16. Sačuvajte svoj projekat
Pritisnite Ctrl+S (Windows) ili ⌘ Command+S (Mac) da biste to učinili.
