Ako vytvoriť navigačný panel z neusporiadaného zoznamu prepojení v Dreamweaveri

Tu je skvelý trik CSS na premenu zoznamu s odrážkami na navigačný panel v aplikácii Dreamweaver s jednoduchým efektom prevrátenia. Používanie zoznamu s odrážkami pre navigačné panely je dobre akceptovaná konvencia pre webové lokality, ktoré spĺňajú súčasné štandardy prístupnosti.

Kredit: Fotografie od istockphoto.com

Rovnaké odkazy sú stále obsiahnuté v neusporiadanom zozname, ale aplikácia štýlov dramaticky mení ich vzhľad.

Kredit: Fotografie od istockphoto.com

Ak chcete vytvoriť navigačný panel pomocou CSS na predefinovanie neusporiadaného zoznamu a značiek odkazov, postupujte takto:

Kliknutím umiestnite kurzor na miesto, kde chcete vytvoriť navigačný panel na stránke.

Zadajte text, ktorý chcete použiť ako odkazy, pričom každý oddeľte stlačením klávesu Return alebo Enter, čím vytvoríte koniec odseku.

Ak chcete odkazy naformátovať ako neusporiadaný zoznam, oddeľte každý riadok textu, ktorý chcete prepojiť s a

tag.

Vytvorte prepojenia tak, že postupne vyberiete jednotlivé časti textu, kliknete na ikonu hypertextového prepojenia na paneli Spoločné vkladanie a potom vyberiete stránku, na ktorú chcete vytvoriť prepojenie, alebo zadáte adresu URL.

Ťahaním vyberte celú množinu prepojení a potom kliknite na ikonu Nezoradený zoznam v inšpektorovi vlastností.

Na začiatku každého odkazu sa zobrazí odrážka. Ak niektorý odkaz nie je označený samostatnou odrážkou, kliknutím odstráňte medzeru medzi ním a odkazom pred ním a potom stlačením klávesu Return alebo Enter oddeľte odkazy návratom odseku.

Ak chcete pridať a

tag okolo zoznamu odkazov (alebo akéhokoľvek iného obsahu, ktorý sa už na stránke nachádza), vyberte obsah a potom kliknite na ikonu Div na paneli Common Insert.

Otvorí sa dialógové okno Vložiť Div.

Pridanie a

Značka okolo neusporiadaného zoznamu odkazov je užitočná, ak chcete pridať formátovanie.

V rozbaľovacom zozname Vložiť vyberte položku Obopnúť výber.

Pre presnejšiu kontrolu nad tým, kde pridáte nový

môžete vybrať možnosti z rozbaľovacieho zoznamu Vložiť v hornej časti dialógového okna Vložiť Div.

Zadajte názov do poľa Trieda alebo do poľa ID.

A

značka so zadaným názvom triedy alebo ID sa automaticky pridá na stránku okolo zoznamu odkazov.

V spodnej časti dialógového okna Vložiť Div kliknite na tlačidlo Nové pravidlo CSS.

Nový názov pravidla CSS sa pridá do zoznamu názvov štýlov na paneli Výbery návrhárov CSS.

Na paneli Vlastnosti zadajte požadované nastavenia pre farbu, pozadie, veľkosť, okraje a výplň.

Formátovanie štýlu sa automaticky použije na obsah súboru

pretože ste použili štýl tak, ako ste ho vytvorili v krokoch 5–7.

Ak chcete vytvoriť zložený štýl, ktorý bude formátovať neusporiadaný zoznam, iba ak sa použije v navigačnom paneli, vytvorte zložený štýl, ktorý obsahuje názov triedy .navbar:

Umiestnite kurzor kdekoľvek v zozname s odrážkami.

Kliknite na znamienko plus (+) v hornej časti panela Výber.

V poli Názov selektora sa uistite, že Dreamweaver automaticky zadal .navbar ul ako názov nového štýlu na paneli selektorov.

Na paneli Vlastnosti nastavte okraje a odsadenie na 0.

Vytvorte zložený štýl na predefinovanie značiek položiek zoznamu:

Umiestnite kurzor kdekoľvek v zozname s odrážkami.

Kliknite na znamienko plus v hornej časti panela Výber.

V poli Názov selektora sa uistite, že Dreamweaver automaticky zadal .navbar ul li ako názov nového štýlu na paneli selektorov.

Na paneli Vlastnosti nastavte Displej na Vložený.

Ak chcete odstrániť odrážku, zmeňte typ štýlu zoznamu na možnosť Žiadny.

Nastavte ľavý a pravý okraj na 20 pixelov.

Tento krok oddeľuje položky zoznamu od seba v horizontálnom zozname. Toto nastavenie môžete zmeniť, aby ste vytvorili priestor medzi prepojeniami, ktorý najlepšie vyhovuje vášmu návrhu.

Vytvorte štýl na predefinovanie značky odkazu:

Kliknutím umiestnite kurzor do odkazu v navigačnej lište.

Kliknite na znamienko plus v hornej časti panela Výber.

Ak chcete zmeniť názov štýlu, dvakrát kliknite na názov na paneli Výber a zadajte názov, ktorý chcete použiť.

V časti Text na paneli Vlastnosti nastavte Text-Decoration na Žiadne.

Stále v sekcii Text vyberte farbu z farebnej šachty, aby ste určili farbu odkazov, keď sú načítané na stránke.

Vytvorte nový štýl na predefinovanie značky hover-link tak, aby sa farba odkazu zmenila, keď používateľ umiestni kurzor nad odkaz:

Kliknite na znamienko plus v hornej časti panela Výber.

Do poľa Názov selektora zadajte .navbar a:hover.

V časti Text na paneli Vlastnosti nastavte Text-Decoration na Žiadne.

Stále v sekcii Text vyberte farbu z farebného poľa, aby ste určili farbu odkazu, keď používatelia prejdú kurzorom na odkaz.

Vytvorte nový štýl na predefinovanie značky navštíveného odkazu, aby sa farba odkazu zmenila, keď používateľ klikne na odkaz:

Kliknite na znamienko plus v hornej časti panela Výber.

Do poľa Názov selektora zadajte .navbar a:visited.

V časti Text na paneli Vlastnosti nastavte Text-Decoration na Žiadne.

Stále v sekcii Text vyberte farbu z farebnej šachty, aby ste určili farbu odkazu po jeho návšteve.

Kliknite na tlačidlo Živé v hornej časti pracovného priestoru alebo kliknite na tlačidlo Náhľad, aby ste zobrazili stránku v prehliadači, aby ste videli efekt štýlov odkazov.