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) je CSS Property Inspector, který vám umožňuje "vizuálně" vytvářet CSS styly, soubory a nastavovat vlastnosti spolu s mediálními dotazy.
V rozhraní CSS Designer jsou k dispozici následující sekce:
Pomocí CSS Designer můžete upravovat jednotlivá pravidla v CSS stylu (použijte kartu Aktuální v CSS Designer), nebo pokud preferujete, můžete pracovat přímo v CSS stylu (použijte kartu Vše v 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í prvku 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ří.
Pro více podmínek je podporována pouze operace „A".
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.
V panelu CSS Designer vyberte zdroj CSS v podokně Sources nebo mediální dotaz v podokně @Media.
V podokně Selektory klikněte na symbol . Na základě prvku vybraného v dokumentu CSS Designer inteligentně identifikuje a navrhne vám relevantní selektor (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 z dostupných možností:
Klikněte na požadovaný selektor a přetáhněte jej do nové pozice v podokně 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. Pokud dáváte přednost kódu, můžete v polích rychlých úprav zadat zkrácený kód pro okraje a odsazení, jak je znázorněno v tomto příkladu.
Klikněte na požadovanou hodnotu a upravte ji. Pokud chcete, aby všechny čtyři hodnoty byly stejné a měnily se současně, klikněte na ikonu propojení uprostřed.
Kdykoli můžete zakázat nebo odstranit konkrétní hodnoty, například hodnotu levého okraje, zatímco si ponecháte hodnoty pravého, horního a dolního okraje.
Vlastnosti Ovládání ohraničení jsou uspořádány do logických karet, které vám pomohou rychle zobrazit nebo upravit vlastnosti.
Pokud upřednostňujete kód, můžete zadat zkrácený kód pro ohraničení a poloměr ohraničení do textového pole rychlých úprav.
Pokud budete chtít měnit vlastnosti Řízení okrajů, začněte úpravou vlastností na kartě „Všechny strany“. Ostatní karty jsou pak aktivní a vlastnosti nastavené na kartě „Všechny strany" se odrazí pro jednotlivé ohraničení.
Když změníte vlastnost na jednotlivých kartách okrajů, hodnota odpovídající vlastnosti na kartě „Všechny strany" se změní na „nedefinováno" (výchozí hodnota).
V níže uvedeném příkladu byla barva ohraničení nastavena na černou a poté změněna na červenou pro horní ohraničení.
Vložený kód je založen na nastavení předvoleb pro zkrácený nebo rozšířený zápis.
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“. Například při nastavení pouze horní hodnoty pro ohraničení přejde počítaný režim na kartu „Nahoře" a ignoruje kartu „Všechny strany", protože karta „Všechny strany" nastavena není.
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.
Každou vlastnost můžete zakázat nebo odstranit pomocí CSS Designer.
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.
Můžete také použít ovládací prvky pro smazání a zakázání na úrovni skupiny Border Control k použití těchto akcí na všechny vlastnosti.
Selektory CSS a vlastnosti můžete přidávat nebo je odstranit za pomoci klávesových zkratek. Můžete také procházet mezi skupinami vlastností v podokně Vlastnosti.
|
Zkratka |
Workflow |
|
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 webového místa.
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ů:
Klepnutí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.
Klepněte na tlačítko OK.
Tvorba nádherných webů v aplikaci Dreamweaver
Vytvářejte, kódujte a spravujte dynamické weby pomocí výkonného všestranného nástroje.
