Ako upraviť štýly v rozložení CSS v Dreamweaveri

Po vytvorení novej stránky s rozložením CSS v Dreamweaveri máte zdanlivo nekonečné množstvo možností na jej úpravu, no najprv musíte určiť, ktoré štýly v šablóne štýlov zodpovedajú prvkom, ktoré chcete upraviť.

Ako si pravdepodobne viete predstaviť, štýly v rozložení CSS môžete upravovať mnohými spôsobmi, aby ste si vytvorili vlastné návrhy.

Po úprave existujúcich štýlov, aby ste získali základný dizajn stránky podľa vašich predstáv, môžete vytvoriť toľko ďalších štýlov, koľko chcete.

Ako skontrolovať dostupné štýly a vykonať základné úpravy

Rovnaké základné pokyny môžete použiť s akýmkoľvek rozložením CSS, ktoré je súčasťou aplikácie Dreamweaver. Ak chcete upraviť štýly v rozložení CSS, postupujte takto:

Otvorte stránkový súbor, ktorý je založený na rozložení CSS Dreamweaveru, a vyberte Okno → Štýly CSS (alebo kliknutím na kartu Návrhár CSS rozbaľte panel).

Panel CSS Designer sa otvorí alebo rozbalí.

Kliknutím vyberte názov šablóny štýlov na paneli Zdroje v hornej časti CSS Designer.

Všetky štýly spojené s novou stránkou sú uvedené na paneli Výber.

Vyberte názov ľubovoľného štýlu uvedeného na paneli Výbery návrhárov CSS.

Zodpovedajúce pravidlá CSS definované pre štýl sa zobrazia na paneli Vlastnosti v spodnej časti panela Návrhár CSS. Preklikávanie sa zoznamom štýlov a kontrola ich zodpovedajúcich pravidiel je dobrý spôsob, ako získať rýchly prehľad o dizajne a zistiť, kde sú uložené rôzne možnosti formátovania stránky.

Značky hlavičky HTML5, .nav a päty ovládajú hlavné časti stránky. Napríklad štýl hlavičky obsahuje pravidlo, ktoré zmení farbu pozadia na zelenú. Ak teda chcete zmeniť farbu oblasti hlavičky v hornej časti stránky, musíte zmeniť nastavenie farby pozadia v pravidle hlavičky.

Ako upraviť nastavenia pre celú stránku

Ak chcete upraviť nastavenia pre celú stranu – ako je farba pozadia strany alebo hlavné písmo, veľkosť a farba textu použitého na celej stránke – postupujte takto:

Na paneli Výbery návrhárov CSS vyberte štýl s názvom telo.

Vlastnosti definované vo vybratom pravidle štýlu sa zobrazia na paneli Vlastnosti.

Kliknite na ikonu T v hornej časti panela Vlastnosti a zmeňte alebo pridajte požadované písmo a ďalšie nastavenia textu.

Môžete zmeniť vzhľad, veľkosť, štýl a váhu písma. Ak chcete zmeniť medzeru medzi riadkami textu, zmeňte výšku riadku.

Prejdite nadol do oblasti Pozadie na paneli Vlastnosti a použite farebnú jamku v poli Farba pozadia na určenie farby pre celé pozadie stránky.

Prípadne môžete zadať ľubovoľný hexadecimálny kód farby do poľa Farba pozadia alebo použiť kvapkadlo na vzorkovanie akejkoľvek farby. Ak chcete pridať obrázok na pozadie, kliknite na pole URL v časti Pozadie a potom kliknite na zobrazené tlačidlo Prehľadávať a vyberte obrázok, ktorý chcete použiť ako pozadie. Pomocou ikon opakovania pozadia môžete určiť, ako sa má obrázok na pozadí opakovať na stránke.

Vykonajte ďalšie zmeny alebo doplnenia pravidla štýlu.

Zmeny pravidiel štýlu na paneli Vlastnosti sa automaticky uložia a použijú na obsah naformátovaný pomocou pravidla.

Ako prispôsobiť oblasti obsahu

Ak chcete zmeniť šírku alebo iné nastavenia oblastí hlavného obsahu, ktoré ovládajú celkovú veľkosť stránky a hlavičky, päty a bočného panela, postupujte takto:

Ak chcete zmeniť šírku celej hlavnej oblasti dizajnu:

Kliknite na štýl .container na paneli Selectors panela CSS Designer.

Vlastnosti pravidla štýlu .container sa zobrazujú na paneli Vlastnosti, kde môžete štýl aj upraviť.

Zmeňte veľkosť v poli Šírka alebo zadajte nové číslo pre požadovanú šírku strany.

Šírka dizajnu stránky sa automaticky zmení na základe zadanej veľkosti. Keď zmeníte šírku štýlu .container, zmeníte šírku celého dizajnu, pretože všetky

tagy a ďalšie prvky sú obsiahnuté v

naformátované v štýle .container – a všetky sú nastavené tak, aby sa rozbalili, aby vyplnili .container

.

Ak chcete zmeniť veľkosť oblasti obsahu stránky, vyberte štýl s názvom .content a na paneli Vlastnosti zadajte veľkosť a ďalšie požadované možnosti.

Ak zmeníte šírku oblasti obsahu v rozložení, ktoré obsahuje bočný panel, musíte zmeniť aj šírku bočného panela.

Ak chcete zmeniť farbu pozadia ľubovoľného štýlu na stránke, kliknite na názov zodpovedajúceho štýlu a zmeňte nastavenia v časti Pozadie na paneli Vlastnosti.

Napríklad v rozložení CSS v Dreamweaveri je bočný panel definovaný v štýle s názvom .sidebar1. Ak teda chcete zmeniť farbu pozadia, kliknite na .sidebar1 na paneli Výber, vyberte kategóriu Pozadie na paneli Vlastnosti a vyberte požadovanú farbu. Podobne, ak chcete zmeniť farbu pozadia hlavičky, vyberte štýl s názvom hlavička na paneli Výber a použite farebnú studňu.

Ak chcete pridať obrázok do hlavičky:

Vyberte zástupný obrázok označený Vložiť logo a stlačte kláves Delete alebo Backspace.

Vyberte Vložiť → Obrázok → Obrázok a vyberte obrázok pomocou dialógového okna Výber zdroja obrázka.

Nahraďte text a vložte obrázky do bočného panela a do oblastí hlavného obsahu.

Na ľubovoľnú stránku vytvorenú z rozloženia CSS môžete pridať alebo nahradiť text a vložiť obrázky, rovnako ako na akúkoľvek inú webovú stránku.

Vyberte Súbor → Uložiť všetko, aby ste uložili stránku a štýly.