Jak vytvořit navigační panel z neuspořádaného seznamu odkazů v Dreamweaveru

Zde je skvělý trik CSS pro přeměnu seznamu s odrážkami na navigační panel v Dreamweaveru s jednoduchým efektem rolloveru. Použití seznamu s odrážkami pro navigační panely je dobře přijímaná konvence pro weby, které splňují současné standardy přístupnosti.

Kredit: Fotografie od istockphoto.com

Stejné odkazy jsou stále obsaženy v neuspořádaném seznamu, ale použití stylů dramaticky změní jejich vzhled.

Kredit: Fotografie od istockphoto.com

Chcete-li vytvořit navigační panel pomocí CSS k předefinování neuspořádaného seznamu a značek odkazů, postupujte takto:

Kliknutím umístěte kurzor na místo, kde chcete vytvořit navigační panel na stránce.

Zadejte text, který chcete použít jako odkazy, a každý oddělte stisknutím klávesy Return nebo Enter, čímž vytvoříte konec odstavce.

Chcete-li naformátovat odkazy jako neuspořádaný seznam, oddělte každý řádek textu, který chcete propojit s a

štítek.

Vytvářejte odkazy tak, že postupně vyberete jednotlivé části textu, kliknete na ikonu hypertextového odkazu na panelu Společné vkládání a poté vyberete stránku, na kterou chcete vytvořit odkaz, nebo zadáte adresu URL.

Tažením vyberte celou sadu vazeb a poté klikněte na ikonu Neuspořádaný seznam v inspektoru Vlastnosti.

Na začátku každého odkazu se zobrazí odrážka. Pokud některý odkaz není označen samostatnou odrážkou, kliknutím odstraňte mezeru mezi ním a odkazem před ním a poté stisknutím klávesy Return nebo Enter oddělte odkazy koncem odstavce.

Chcete-li přidat a

tag kolem seznamu odkazů (nebo jakéhokoli jiného obsahu, který se již na stránce nachází), vyberte obsah a poté klikněte na ikonu Div na panelu Common Insert.

Otevře se dialogové okno Vložit Div.

Přidání a

tag kolem neuspořádaného seznamu odkazů je užitečný, pokud chcete přidat formátování.

Z rozevíracího seznamu Vložit vyberte volbu Obtékat výběr.

Pro přesnější kontrolu nad tím, kam přidáte nový

můžete vybrat možnosti z rozevíracího seznamu Vložit v horní části dialogového okna Vložit Div.

Zadejte název do pole Třída nebo ID.

A

tag se zadaným názvem třídy nebo ID se automaticky přidá na stránku kolem seznamu odkazů.

V dolní části dialogového okna Vložit Div klikněte na tlačítko Nové pravidlo CSS.

Nový název pravidla CSS se přidá do seznamu názvů stylů na panelu Výběry návrhářů CSS.

Na panelu Vlastnosti zadejte požadovaná nastavení pro barvu, pozadí, velikost, okraje a odsazení.

Formátování stylu se automaticky použije na obsah souboru

tag, protože jste použili styl tak, jak jste jej vytvořili v krocích 5–7.

Chcete-li vytvořit složený styl, který bude formátovat neuspořádaný seznam, pouze pokud je použit v navigační liště, vytvořte složený styl, který obsahuje název třídy .navbar:

Umístěte kurzor kamkoli do seznamu s odrážkami.

Klepněte na znaménko plus (+) v horní části panelu Výběry.

V poli Název selektoru se ujistěte, že Dreamweaver automaticky zadal .navbar ul jako název nového stylu na panelu Selektory.

Na panelu Vlastnosti nastavte okraje a odsazení na 0.

Vytvořte složený styl pro předefinování značek položek seznamu:

Umístěte kurzor kamkoli do seznamu s odrážkami.

Klepněte na znaménko plus v horní části panelu Výběry.

V poli Název selektoru se ujistěte, že Dreamweaver automaticky zadal .navbar ul li jako název nového stylu na panelu Selektory.

Na panelu Vlastnosti nastavte Zobrazení na Inline.

Chcete-li odstranit odrážku, změňte Typ stylu seznamu na Žádný.

Nastavte levý a pravý okraj na 20 pixelů.

Tento krok odděluje položky seznamu od sebe v horizontálním seznamu. Nastavení můžete změnit, abyste vytvořili prostor mezi odkazy, který nejlépe odpovídá vašemu návrhu.

Vytvořte styl pro předefinování značky odkazu:

Kliknutím umístíte kurzor do odkazu v navigační liště.

Klepněte na znaménko plus v horní části panelu Výběry.

Chcete-li změnit název stylu, poklepejte na název v panelu Selektory a zadejte název, který chcete použít.

V části Text na panelu Vlastnosti nastavte Text-Decoration na Žádný.

Stále v sekci Text vyberte barvu z barevného pole, abyste určili barvu odkazů, když jsou načteny na stránku.

Vytvořte nový styl pro předefinování značky odkazu tak, aby se barva odkazu změnila, když uživatel na odkaz najede kurzorem:

Klepněte na znaménko plus v horní části panelu Výběry.

Do pole Název voliče zadejte .navbar a:hover.

V části Text na panelu Vlastnosti nastavte Text-Decoration na Žádný.

Stále v sekci Text vyberte barvu z barevného pole, abyste určili barvu odkazu, když uživatelé přejedou kurzorem na odkaz.

Vytvořte nový styl pro předefinování značky navštíveného odkazu, aby se barva odkazu změnila poté, co uživatel klikne na odkaz:

Klepněte na znaménko plus v horní části panelu Výběry.

Do pole Název voliče zadejte .navbar a:visited.

V části Text na panelu Vlastnosti nastavte Text-Decoration na Žádný.

Stále v sekci Text vyberte barvu z barevného pole, abyste určili barvu odkazu po jeho návštěvě.

Kliknutím na tlačítko Živě v horní části pracovní plochy nebo kliknutím na tlačítko Náhled zobrazíte stránku v prohlížeči, abyste viděli efekt stylů odkazů.