Tento wikiHow vás naučí, ako pomocou programu Adobe Dreamweaver vytvoriť rozbaľovacie pole pre webovú stránku. Rozbaľovacie polia sú ponuky, ktoré sa „rozbalia“po kliknutí na položku na vašej webovej stránke, pričom v tomto procese sa zobrazia ďalšie možnosti.
Kroky
Krok 1. Otvorte projekt Dreamweaver
Vykonáte to dvojitým kliknutím na súbor projektu. Ak chcete vytvoriť nový projekt Dreamweaver, namiesto toho otvoríte Dreamweaver, kliknite na Súbor, klikni Novýa postupujte podľa pokynov na obrazovke.
Krok 2. Vytvorte usporiadaný zoznam
Ak chcete vytvoriť rozbaľovaciu ponuku, musíte mať aspoň jednu položku s odrážkami. Odrážku môžete vytvoriť vypnutím CSS (kliknite na vyhliadka položku ponuky, zvoľte Vykresľovanie štýlu, a kliknite na Štýly zobrazenia ak je začiarknuté), kliknutím na miesto, kam chcete pridať bod, kliknutím na ikonu odrážky v spodnej časti okna a zadaním názvu bodu. Pred pokračovaním by ste mali znova zapnúť CSS.
- Názov bodu tu bude slúžiť ako aktivátor rozbaľovacej ponuky (napr. Tlačidlo, nad ktorým sa umiestnite kurzorom myši alebo klepnutím otvoríte rozbaľovaciu ponuku).
- Tento krok preskočte, ak už máte položku zoznamu, ktorú chcete previesť do rozbaľovacej ponuky.
Krok 3. Určte názov svojho zoznamu
Kliknite na Kód kartu a uistite sa, že ste na Zdrojový kód nastavenie, potom prejdite nadol na kód svojho objednaného zoznamu (bude medzi “
"značka a"
"tag") a vyhľadajte štítok "" hore
"tag. Slovo v úvodzovkách je názov vášho zoznamu."
-
Ak nevidíte meno, vložte značku (kde názov odkazuje na vami preferovaný názov v zozname) priamo nad
tag.
Krok 4. Odstráňte odrážky
Kliknutím na ikonu sa uistite, že ste na správnom mieste Dizajn kartu a potom kliknite na CSS dizajnér kartu v pravom hornom rohu okna a potom postupujte takto:
- Kliknite + napravo od nadpisu „Selektory“.
- Zadajte #name ul, kde „name“je názov vášho zoznamu.
- Dvakrát stlačte kláves ↵ Enter.
- Prejdite nadol a kliknite list-style-type na table v spodnej časti okna CSS dizajnér tab.
- Kliknite žiadny vo výslednej rozbaľovacej ponuke.
Krok 5. Zmeňte zoradený zoznam tak, aby sa zobrazoval horizontálne
Urobiť tak:
- Kliknite + napravo od nadpisu „Selektory“.
- Napíšte #name li, kde „name“je názov vášho zoznamu.
- Nájdite nadpis „float“na table v spodnej časti súboru CSS dizajnér tab.
- Kliknite na Vľavo tlačidlo bezprostredne napravo od nadpisu „plávajúceho“.
Krok 6. Pridajte do svojho zoznamu aktívnu značku
Kliknite na + tlačidlo napravo od „Selektorov“, potom zadajte #názov a (kde „názov“je názov vášho zoznamu) a dvakrát stlačte kláves ↵ Enter.
Krok 7. Pridajte farbu pozadia
Vyberte položku #meno a položku, ak je to potrebné, potom kliknite na kartu „Farba pozadia“v tvare poľa v hornej časti CSS dizajnér na paneli vyberte položku farba pozadia možnosť a vyberte farbu pozadia, ktorú chcete použiť.
Toto je farba, ktorú budú používať položky vášho rozbaľovacieho zoznamu
Krok 8. Vytvorte vo svojom zozname položiek „blokový“formát
Tento formát zaisťuje, že keď niekto klikne alebo klepne na položku v zozname, môže ju otvoriť tak, že vyberie mierne nad alebo pod položku, namiesto toho, aby musel presne vyberať text:
- Uistite sa, že váš #meno a položka je vybratá v priečinku CSS dizajnér tab.
- Na table posuňte zobrazenie nadol na záhlavie „zobrazenie“.
- Kliknite na úplne pravú stranu záhlavia „zobrazenie“a potom kliknite na tlačidlo blok vo výslednom menu.
Krok 9. V prípade potreby pridajte vypchávku
Ak si všimnete, že sú položky v zozname zaseknuté proti sebe, môžete medzi ne vložiť určité miesto takto:
- Uistite sa, že váš #meno a položka je vybratá v priečinku CSS dizajnér tab.
- Na table posuňte zobrazenie nadol na nadpis „výplň“.
- Zmeňte horné a dolné textové polia „px“na čítanie najmenej 5.
- Zmeňte ľavé a pravé textové polia „px“tak, aby čítali aspoň 10.
Krok 10. Vytvorte farbu vznášadla
Toto je farba, ktorá sa zobrazí, keď umiestnite kurzor myši na položku v rozbaľovacej ponuke:
- Kliknite + napravo od nadpisu „Selektory“.
- Zadajte príkaz #nave a: hover (kde „name“je názov vášho zoznamu) a dvakrát stlačte kláves ↵ Enter.
- Kliknite na kartu „Farba pozadia“.
- Vyberte farba pozadia a potom vyberte svetlejšiu farbu, ako ste použili pre farbu pozadia.
Krok 11. Vypnite CSS
Kliknite na vyhliadka položku ponuky, zvoľte Vykresľovanie štýlu, a kliknite na Štýly zobrazenia možnosť v rozbaľovacom okne.
Ak Štýly zobrazenia možnosť je sivá, kliknite kdekoľvek v dokumente Dreamweaver a skúste to znova.
Krok 12. Vytvorte obsah rozbaľovacej ponuky
Môžete to urobiť pridaním podbodov pod odrážku, ktoré chcete použiť ako tlačidlo rozbaľovacej ponuky:
- Kliknite napravo od položky zoznamu, ktorú chcete zmeniť na rozbaľovaciu ponuku, a potom stlačte kláves ↵ Enter.
- Stlačte kláves Tab ↹.
- Zadajte názov prvej položky rozbaľovacej ponuky a potom stlačte kláves ↵ Enter.
- Zadajte názov ďalšej rozbaľovacej ponuky, potom stlačte kláves ↵ Enter a zopakujte podľa potreby.
Krok 13. Pripojte obsah rozbaľovacej ponuky k položke s odrážkami
Urobiť tak:
- Kliknite + vedľa položky „Selektory“, zadajte #názov ul ul a dvakrát stlačte kláves ↵ Enter.
- Prejdite nadol a kliknite displej, potom kliknite na žiadny v rozbaľovacej ponuke.
- Nájdite a kliknite pozíciu, potom kliknite na absolútny v rozbaľovacej ponuke.
Krok 14. Vytvorte samotnú rozbaľovaciu ponuku
Na to budete musieť pridať ešte jeden volič:
- Kliknite + vedľa položky „Selektory“zadajte #name ul li: hover> ul a dvakrát stlačte kláves ↵ Enter.
- Nájdite a kliknite displej, potom kliknite na blok vo výslednej rozbaľovacej ponuke.
Krok 15. Nastavte obsah rozbaľovacej ponuky na výšku
V predvolenom nastavení sa obsah rozbaľovacej ponuky zobrazuje na vodorovnom paneli, ale môžete ho vynútiť do zvislého stĺpca takto:
- Kliknite + vedľa položky „Selektory“, zadajte #name ul ul li a dvakrát stlačte kláves ↵ Enter.
- Nájdite nadpis „float“.
- Kliknite na „nikto“() vpravo od nadpisu „plávajúci“.
Krok 16. Uložte svoj projekt
Vykonáte to stlačením klávesov Ctrl+S (Windows) alebo ⌘ Command+S (Mac).
