Naučte se používat panel CSS Designer pro vytvoření a připojení seznamů stylů, multimediálních dotazů nebo selektorů a upravovat vlastnosti prvků CSS.
Panel CSS Designer (Okno > CSS Designer) představuje Inspektor vlastností CSS, který umožňuje „vizuálně“ vytvářet styly CSS, soubory, nastavovat vlastnosti a definovat multimediální dotazy.
Rozhraní nástroje CSS Designer je rozděleno na následující části:
Pomocí panelu CSS Designer můžete upravovat jednotlivá pravidla v seznamu stylů CSS (pomocí záložky Aktuální v nástroji CSS Designer), nebo můžete podle potřeb pracovat přímo v seznamu stylů CSS (pomocí záložky Vše v nástroji CSS Designer).
V podokně Zdroje na panelu CSS Designer klikněte na symbol 
a poté na jednu z následujících možností:
V závislosti na vybrané možnosti se zobrazí dialogové okno Vytvořit nový soubor CSS nebo Připojit stávající soubor CSS.
Po kliknutí na možnost Procházet můžete určit název souboru CSS a v případě vytváření elementu CSS také umístění, ve kterém se nový soubor uloží.
Proveďte jeden z následujících úkonů:
(Volitelně) Po kliknutí na možnost Podmíněné použití můžete určit multimediální dotaz, který chcete přiřadit k souboru CSS.
Na panelu CSS Designer klikněte v podokně Zdroje na zdroj CSS.
Kliknutím na symbol 
v podokně @Média můžete přidat nový multimediální dotaz.
Otevře se dialogové okno Definování multimediálního dotazu obsahující seznam všech podmínek multimediálního dotazu, které aplikace Dreamweaver podporuje.
Vyberte Podmínky podle svých potřeb.
Ujistěte se, že jste u všech vybraných podmínek vybrali platné hodnoty. V opačném případě se multimediální dotazy správně nevytvoří.
U podmínek multimediálního dotazu je podporován pouze parametr „And“.
Pokud podmínky multimediálního dotazu zadáváte pomocí kódu, v dialogovém okně Definování multimediálního dotazu se použijí pouze podporované podmínky. Textové pole Kód v dialogovém okně však bude obsahovat úplný kód (včetně nepodporovaných podmínek).
Po kliknutí na multimediální dotaz v rámci zobrazení návrhu nebo živém zobrazení se zobrazí údaje pro vybraný multimediální dotaz. Zobrazení na celou obrazovku spustíte kliknutím na možnost Globálně v podokně @Média.
Na panelu CSS Designer vyberte v podokně Zdroje požadovaný zdroj CSS nebo multimediální dotaz v podokně @Média.
V podokně Selektory klikněte na symbol . V závislosti na elementu vybraném v rámci dokumentu určí nástroj CSS Designer automaticky odpovídající prvky a vyzve vás k potvrzení souvisejícího selektoru (až tři pravidla).
Můžete provést jeden nebo více z následujících úkonů:
Poznámka: Možnost Duplikovat do multimediálního dotazu je k dispozici pouze v případě, že zdroj vybraného selektoru obsahuje multimediální dotazy. Duplikace selektoru z jednoho zdroje do multimediálního dotazu v jiném zdroji není možná.
Nově můžete zkopírovat styly z jednoho selektoru a vložit je do jiného. Zkopírovat lze buď všechny styly, nebo pouze konkrétní kategorie stylů, jako je např. Rozvržení, Text a Okraj.
Klikněte pravým tlačítkem na selektor a vyberte si jednu z dostupných možností:
Klikněte na požadovaný selektor a přetáhněte jej do nové pozice pomocí panelu Selektory.
Vlastnosti jsou seskupeny do následujících kategorií a jsou zastoupeny jednotlivými ikonami v horní části podokna Vlastnosti:
Před úpravou vlastností selektoru CSS zjistěte pomocí zpětné inspekce, které elementy jsou s tímto selektorem spojeny. Tak budete moci posoudit, zda všechny elementy zvýrazněné při zpětné inspekci skutečně vyžadují provedení změn.
Označením pole Zobr. sadu zobrazíte pouze nastavené vlastnosti. Všechny vlastnosti, které lze u selektoru vybrat, zobrazíte tak, že zrušíte označení pole Zobr. sadu.
Pokud budete chtít nastavit vlastnosti, jako např. šířku nebo sbalení okraje, v podokně Vlastnosti klikněte na požadované nastavení uvedené u vlastnosti.
Potlačené vlastnosti jsou uvedeny jako přeškrtnuté.
Pomocí ovládacích prvků pole v podokně Vlastnosti nástroje CSS Designer můžete rychle nastavit vlastnosti okraje, odsazení a polohy. Jestliže dáváte přednost kódu, můžete podle uvedeného příkladu do pole pro rychlou úpravu zadat krátký kód vlastností odsazení.
Klikněte na požadovanou hodnotu a upravte ji. Budete-li chtít současně použít stejnou hodnotu u všech vlastností, klikněte na ikonu propojení uprostřed.
Konkrétní hodnoty můžete kdykoli zakázat nebo odstranit, např. hodnotu pro levý okraj, a zachovat hodnoty pro okraj vpravo, nahoře a dole.
Vlastnosti Řízení okrajů jsou logicky rozděleny na karty, na kterých je můžete rychle prohlížet a měnit.
Jestliže dáváte přednost kódu, můžete do pole pro rychlou úpravu zadat krátký kód vlastností okraje a jeho rozsahu.
Pokud budete chtít měnit vlastnosti Řízení okrajů, začněte úpravou vlastností na kartě „Všechny strany“. Následně se aktivují také ostatní karty a vlastnosti na kartě „Všechny strany“ se projeví na jednotlivých okrajích.
Při úpravě vlastností na kartách pro jednotlivé okraje se hodnota odpovídající vlastnosti na kartě „Všechny strany“ změní na „nedefinováno“ (výchozí hodnota).
Na následujícím příkladě jsme barvu okraje změnili na černou a poté horní okraj nastavili na červený.
Vložený kód vychází z nastavení předvoleb pro krátkou nebo dlouhou stranu.
V režimu Prohlédnout jsou karty aktivní v závislosti na prioritě karet se sadou. Nejvyšší prioritu má karta „Všechny strany“ následovaná kartami „Nahoře“, „Vpravo“, „Dole“ a „Vlevo“. Pokud jste například nastavili pouze hodnotu horního okraje, bude v režimu výpočtu aktivní karta „Nahoře“ a karta „Všechny strany“ bude ignorována, protože jste kartu „Všechny strany“ nenastavili.
Funkce Povolit/Zakázat vlastnosti CSS umožňuje dočasně zakázat části CSS na panelu CSS Designer, aniž by se musely provést změny přímo v kódu. Pokud části CSS dočasně zakážete, můžete si ověřit, jaký budou určité vlastnosti a hodnoty mít vliv na stránku.
Jestliže zakážete vlastnost CSS, aplikace Dreamweaver přidá do vlastnosti CSS, kterou jste zakázali, tagy komentáře CSS a [zakázaný] popis. Zakázanou vlastnost CSS pak můžete snadno znovu povolit nebo odstranit.
Pomocí panelu CSS Designer můžete každou z vlastností zakázat nebo odstranit.
Na následujících obrázcích jsou uvedeny ikony pro zakázání a odstranění vlastnosti šířka. Tyto ikony jsou viditelné po přesunutí kurzoru myši nad odpovídající vlastnost.
Nově je však lze použít i na úrovni skupiny Řízení okrajů a uplatnit je tak u všech vlastností.
Selektory CSS a vlastnosti můžete přidávat nebo je odstranit za pomoci klávesových zkratek. Podobně můžete také přecházet mezi skupinami vlastností na panelu Vlastnosti.
|
Zkratka |
Pracovní postupy |
|
CTRL + Alt + [Shift =] |
Přidání selektoru (pokud je aktivní část se selektory) |
|
CTRL + Alt+ S |
Přidání selektoru (pokud je aktivní jakákoli část aplikace) |
|
CTRL + Alt + [Shift =] |
Přidání vlastnosti (pokud je aktivní část s vlastnostmi) |
|
CTRL + Alt+ P |
Přidání vlastnosti (pokud je aktivní jakákoli část aplikace) |
|
Výběr + Delete |
Odstranění označeného selektoru |
|
CTRL + Alt + (PgUp/PgDn) |
Přecházení mezi částmi (pokud se nacházíte v dílčím panelu vlastností) |
Nejčastěji bývá jeden selektor CSS spojen s více prvky stránky. Například text v hlavním obsahu stránky, záhlaví i zápatí může být spojen se stejným selektorem CSS. Při úpravě vlastností selektoru CSS se změna projeví na všech prvcích, které jsou s ním spojeny.
Funkce Živé označení vám pomůže určit všechny prvky spojené s vybraným selektorem. Chcete-li změnit pouze jeden či několik vybraných prvků, můžete pro tyto prvky vytvořit nový selektor CSS a upravit jeho vlastnosti.
Prvky stránky spojené se selektorem CSS zjistíte po přesunutí ukazatele myši nad daný selektor v Živém zobrazení (Živý kód musí být vypnutý). Aplikace Dreamweaver tečkovaně zvýrazní související elementy.
Chcete-li elementy zvýraznit trvale, klikněte na selektor. Elementy jsou nyní zvýrazněny s modrým okrajem.
Chcete-li odstranit modré zvýraznění elementů, znovu klikněte na selektor.
Živé označení je standardně zapnuto. Chcete-li živé označení vypnout, v panelu nástrojů dokumentu klikněte na položku Možnosti živého zobrazení a klikněte na možnost Zakázat živé označení.
Když upravujete externí seznam stylů CSS, všechny dokumenty s odkazem na tento seznam stylů CSS se aktualizují podle těchto úprav.
Styly CSS nacházející se v dokumentu můžete exportovat, vytvořit z nich nový seznam stylů CSS a styly z toho seznamu aplikovat tak, že externí seznam stylů připojíte nebo propojíte.
Ke stránkám můžete připojit libovolný seznam stylů, který jste vytvořili nebo zkopírovali do svého webu.
Panel CSS Designer otevřete jedním z následujících úkonů:
V panelu CSS Designer klikněte na ikonu „+“ vedle položky Zdroje a vyberte možnost Připojit stávající soubor CSS.
Proveďte jeden z následujících úkonů:
Kliknutím na tlačítko Náhled ověřte, zda seznam stylů aplikuje na aktuální stránku správné styly.
Pokud aplikované styly nejsou podle očekávání, odstraňte seznam stylů klepnutím na tlačíko Zrušit. Stránka se vrátí k původnímu vzhledu.
Klikněte na tlačítko OK.
