Jak upravit styly v rozvržení CSS v aplikaci Dreamweaver

Po vytvoření nové stránky s rozvržením CSS v Dreamweaveru máte zdánlivě nekonečné množství možností pro její úpravy, ale nejprve musíte určit, které styly v šabloně stylů odpovídají prvkům, které chcete upravit.

Jak si pravděpodobně dokážete představit, styly v rozvržení CSS můžete upravovat mnoha způsoby a vytvářet si vlastní návrhy.

Poté, co upravíte stávající styly, abyste získali základní design stránky podle vašich představ, můžete vytvořit libovolný počet dalších stylů.

Jak zkontrolovat dostupné styly a provést základní úpravy

Stejné základní pokyny můžete použít s jakýmkoli rozvržením CSS obsaženým v aplikaci Dreamweaver. Chcete-li upravit styly v rozložení CSS, postupujte takto:

Otevřete soubor stránky, který je založen na rozvržení CSS Dreamweaveru, a zvolte Okno→ Styly CSS (nebo kliknutím na kartu Návrhář CSS rozbalte panel).

Otevře se nebo rozbalí panel CSS Designer.

Klepnutím vyberte název šablony stylů na panelu Zdroje v horní části Návrháře CSS.

Všechny styly spojené s novou stránkou jsou uvedeny na panelu Výběry.

Vyberte název libovolného stylu uvedeného na panelu Výběry návrhářů CSS.

Odpovídající pravidla CSS definovaná pro styl se zobrazí na panelu Vlastnosti ve spodní části panelu Návrhář CSS. Proklikáváním se seznamem stylů a kontrolou jejich odpovídajících pravidel je dobrý způsob, jak získat rychlý přehled o návrhu a zjistit, kde jsou uloženy různé možnosti formátování stránky.

Značky záhlaví HTML5, .nav a zápatí ovládají hlavní části stránky. Například styl záhlaví obsahuje pravidlo, které změní barvu pozadí na zelenou. Chcete-li tedy změnit barvu oblasti záhlaví v horní části stránky, změňte nastavení barvy pozadí v pravidle záhlaví.

Jak upravit nastavení pro celou stránku

Chcete-li upravit nastavení pro celou stránku – například barvu pozadí stránky nebo hlavní řez písma, velikost a barvu textu použitého na stránce – postupujte takto:

Na panelu Selektory CSS Designer vyberte styl s názvem tělo.

Vlastnosti definované ve vybraném pravidle stylu se zobrazí na panelu Vlastnosti.

Klepněte na ikonu T v horní části panelu Vlastnosti a změňte nebo přidejte požadované písmo a další nastavení textu.

Můžete změnit vzhled, velikost, styl a váhu písma. Chcete-li změnit mezeru mezi řádky textu, změňte výšku řádku.

Přejděte dolů do oblasti Pozadí na panelu Vlastnosti a použijte barvu v poli Barva pozadí k určení barvy pro celé pozadí stránky.

Alternativně můžete do pole Barva pozadí zadat libovolný hexadecimální kód barvy nebo použít kapátko ke vzorkování jakékoli barvy. Chcete-li přidat obrázek na pozadí, klikněte do pole URL v části Pozadí a poté klikněte na zobrazené tlačítko Procházet a vyberte obrázek, který chcete použít jako pozadí. Pomocí ikon opakování pozadí určete, jak se má obrázek pozadí na stránce opakovat.

Proveďte jakékoli další změny nebo doplňky pravidla stylu.

Změny pravidel stylu na panelu Vlastnosti se automaticky uloží a použijí na obsah formátovaný pomocí pravidla.

Jak přizpůsobit oblasti obsahu

Chcete-li změnit šířku nebo jiná nastavení oblastí hlavního obsahu, které řídí celkovou velikost stránky a záhlaví, zápatí a postranní panel, postupujte takto:

Chcete-li změnit šířku celé hlavní oblasti návrhu:

Klepněte na styl .container na panelu Selectors panelu CSS Designer.

Vlastnosti pravidla stylu .container se zobrazují na panelu Vlastnosti, kde můžete styl také upravit.

Změňte velikost v poli Šířka nebo zadejte nové číslo pro požadovanou šířku stránky.

Šířka návrhu stránky se automaticky změní na základě vámi zadané velikosti. Když změníte šířku stylu .container, změníte šířku celého návrhu, protože všechny

tagy a další prvky jsou obsaženy v

naformátované stylem .container – a všechny jsou nastaveny tak, aby se roztáhly tak, aby vyplnily .container

.

Chcete-li změnit velikost oblasti obsahu stránky, vyberte styl s názvem .content a na panelu Vlastnosti zadejte požadovanou velikost a další volby.

Pokud změníte šířku oblasti obsahu v rozvržení, které obsahuje postranní panel, musíte změnit také šířku postranního panelu.

Chcete-li změnit barvu pozadí libovolného stylu na stránce, klepněte na název odpovídajícího stylu a změňte nastavení v části Pozadí na panelu Vlastnosti.

Například v rozvrženích CSS v Dreamweaveru je postranní panel definován ve stylu s názvem .sidebar1. Chcete-li tedy změnit barvu pozadí, klepněte na .sidebar1 v panelu Selectors, vyberte kategorii Background v panelu Properties a vyberte požadovanou barvu. Podobně, chcete-li změnit barvu pozadí záhlaví, vyberte styl s názvem záhlaví v panelu Selektory a použijte barvu.

Postup přidání obrázku do záhlaví:

Vyberte zástupný obrázek označený Vložit logo a stiskněte klávesu Delete nebo Backspace.

Zvolte Vložit → Obrázek → Obrázek a vyberte obrázek pomocí dialogového okna Vybrat zdroj obrázku.

Nahraďte text a vložte obrázky do postranního panelu a oblastí hlavního obsahu.

Na jakoukoli stránku vytvořenou z rozvržení CSS můžete přidat nebo nahradit text a vložit obrázky, stejně jako na jakoukoli jinou webovou stránku.

Chcete-li stránku a styly uložit, vyberte Soubor→Uložit vše.