Tento wikiHow vás naučí používat Adobe Dreamweaver k vytvoření rozevíracího seznamu pro webovou stránku. Rozbalovací pole jsou nabídky, které se „rozbalí“po kliknutí na položku na vaší webové stránce, přičemž se v tomto procesu zobrazí další možnosti.
Kroky
Krok 1. Otevřete projekt Dreamweaver
Chcete-li to provést, poklepejte na soubor projektu. Pokud chcete vytvořit nový projekt Dreamweaver, místo toho otevřete Dreamweaver, klikněte Soubor, klikněte Novýa postupujte podle pokynů na obrazovce.
Krok 2. Vytvořte seřazený seznam
Chcete-li vytvořit rozevírací nabídku, musíte mít alespoň jednu položku s odrážkami. Odrážku můžete vytvořit vypnutím CSS (klikněte na Pohled položku nabídky, vyberte Vykreslování stylua klikněte na Styly zobrazení pokud je zaškrtnuto), kliknutím na místo, kam chcete bod přidat, kliknutím na ikonu odrážky v dolní části okna a zadáním názvu bodu. Než budete pokračovat, měli byste znovu zapnout CSS.
- Název bodu zde bude sloužit jako aktivátor vaší rozevírací nabídky (např. Tlačítko, nad nímž se vznášíte nebo klepnutím otevřete rozbalovací nabídku).
- Tento krok přeskočte, pokud již máte položku seznamu, kterou chcete převést na rozevírací nabídku.
Krok 3. Určete název seznamu
Klikněte na Kód a ujistěte se, že jste na Zdrojový kód nastavení, poté přejděte dolů na kód vašeho objednaného seznamu (bude mezi „
"štítek a"
„tag“) a hledejte značku „“nahoře “
"tag. Slovo v uvozovkách je název vašeho seznamu."
-
Pokud nevidíte jméno, vložte značku (kde název odkazuje na vámi preferovaný název seznamu) přímo nad
štítek.
Krok 4. Odstraňte odrážky
Kliknutím na ikonu se ujistěte, že jste na správném místě Design kartu a poté klikněte na CSS Designer kartu v pravém horním rohu okna a proveďte následující:
- Klikněte + napravo od nadpisu „Selektory“.
- Zadejte #name ul, kde „name“je název vašeho seznamu.
- Stiskněte dvakrát Enter.
- Přejděte dolů a klikněte list-style-type v podokně v dolní části souboru CSS Designer tab.
- Klikněte žádný ve výsledné vyskakovací nabídce.
Krok 5. Změňte seřazený seznam tak, aby se zobrazoval vodorovně
Udělat to tak:
- Klikněte + napravo od nadpisu „Selektory“.
- Zadejte #name li, kde „name“je název vašeho seznamu.
- V podokně v dolní části vyhledejte nadpis „plovák“ CSS Designer tab.
- Klikněte na Vlevo, odjet tlačítko hned napravo od nadpisu „plovák“.
Krok 6. Přidejte do svého seznamu aktivní značku
Klikněte na + tlačítko napravo od „Voliče“, poté zadejte #jméno a (kde „jméno“je název vašeho seznamu) a stiskněte dvakrát Enter.
Krok 7. Přidejte barvu pozadí
Vybrat #jméno a položku, pokud je to nutné, poté klikněte na kartu ve tvaru pole „Barva pozadí“v horní části CSS Designer v podokně vyberte barva pozadí možnost a vyberte barvu pozadí, kterou chcete použít.
Toto je barva, kterou budou používat položky vašeho rozevíracího seznamu
Krok 8. Vytvořte ve svém seznamu položky ve formátu „block“
Tento formát zajišťuje, že když někdo klikne nebo klepne na položku v seznamu, může ji otevřít výběrem mírně nad nebo pod ní, místo aby musel přesně vybírat text:
- Ujistěte se, že vaše #jméno a položka je vybrána v CSS Designer tab.
- Přejděte v podokně dolů na nadpis „zobrazit“.
- Klikněte na krajní pravou stranu záhlaví „zobrazení“a poté klikněte blok ve výsledném menu.
Krok 9. V případě potřeby přidejte polstrování
Pokud si všimnete, že jsou vaše položky seznamu zaseknuté proti sobě, můžete mezi ně umístit mezeru následujícím způsobem:
- Ujistěte se, že vaše #jméno a položka je vybrána v CSS Designer tab.
- Přejděte v podokně dolů na nadpis „odsazení“.
- Změňte horní a dolní textová pole „px“tak, aby četla alespoň 5.
- Změňte levé a pravé textové pole „px“tak, aby bylo přečteno alespoň 10.
Krok 10. Vytvořte barvu vznášení
Toto je barva, která se zobrazí, když umístíte kurzor myši na položku v rozevírací nabídce:
- Klikněte + napravo od nadpisu „Selektory“.
- Zadejte #nave a: hover (kde „name“je název vašeho seznamu) a stiskněte dvakrát Enter.
- Klikněte na kartu „Barva pozadí“.
- Vybrat barva pozadí a poté vyberte světlejší barvu, než jakou jste použili pro barvu pozadí.
Krok 11. Vypněte CSS
Klikněte na Pohled položku nabídky, vyberte Vykreslování stylua klikněte na Styly zobrazení možnost ve vyskakovacím okně.
Pokud Styly zobrazení možnost je šedá, klikněte kamkoli v dokumentu Dreamweaveru a zkuste to znovu.
Krok 12. Vytvořte obsah rozevírací nabídky
To lze provést přidáním podbodů pod odrážku, které chcete použít jako tlačítko rozevírací nabídky:
- Klikněte vpravo od položky seznamu, kterou chcete převést na rozevírací nabídku, a poté stiskněte ↵ Enter.
- Stiskněte klávesu Tab ↹.
- Zadejte název první položky rozevírací nabídky a stiskněte klávesu ↵ Enter.
- Zadejte název další rozevírací nabídky, stiskněte klávesu ↵ Enter a opakujte podle potřeby.
Krok 13. Připevněte obsah rozevírací nabídky k odrážce
Udělat to tak:
- Klikněte + vedle „Voliče“zadejte #name ul ul a stiskněte dvakrát Enter.
- Přejděte dolů a klikněte Zobrazit, poté klikněte žádný v rozbalovací nabídce.
- Najděte a klikněte pozice, poté klikněte absolutní v rozbalovací nabídce.
Krok 14. Vytvořte samotnou rozevírací nabídku
K tomu budete muset přidat ještě další volič:
- Klikněte + vedle „Voliče“zadejte #name ul li: hover> ul a stiskněte dvakrát Enter.
- Najděte a klikněte Zobrazit, poté klikněte blok ve výsledné vyskakovací nabídce.
Krok 15. Nechte obsah rozevírací nabídky zobrazit svisle
Ve výchozím nastavení se obsah rozevírací nabídky zobrazí na vodorovném pruhu, ale můžete je vynutit do svislého sloupce následujícím způsobem:
- Klikněte + vedle „Voliče“zadejte #name ul ul li a stiskněte dvakrát Enter.
- Najděte nadpis „plovák“.
- Klikněte na „žádný“() vpravo od nadpisu „plovák“.
Krok 16. Uložte svůj projekt
Chcete -li to provést, stiskněte Ctrl+S (Windows) nebo ⌘ Command+S (Mac).
