Příručka uživatele Zrušit

Rozvržení stránek pomocí panelu CSS Designer

 

 

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
Panel CSS Designer

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:

  • Zdroje: kolekce souborů CSS souvisejících s projektem
  • @Média: multimediální dotazy určující velikost obrazovky
  • Selektory: selektory související s vybraným multimediálním dotazem na panelu @Média
  • Vlastnosti: vlastnosti související s vybraným selektorem, s možností zobrazit pouze nastavené vlastnosti

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).

Vytvoření a připojení seznamů stylů

  1. V podokně Zdroje na panelu CSS Designer klikněte na symbol a poté na jednu z následujících možností:

    • Vytvořit nový soubor CSS: Vytvoření a připojení nového souboru CSS k dokumentu
    • Připojit stávající soubor CSS: Připojení stávajícího souboru CSS k dokumentu
    • Definovat na stránce: Definice prvku CSS v rámci dokumentu
    Vytvoření a připojení seznamů stylů pomocí panelu CSS Designer
    Vytvoření a připojení seznamů stylů pomocí panelu CSS Designer

    V závislosti na vybrané možnosti se zobrazí dialogové okno Vytvořit nový soubor CSS nebo Připojit stávající soubor CSS.

  2. 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ží.

  3. Proveďte jeden z následujících úkonů:

    • Kliknutím na možnost Odkaz propojíte dokument Dreamweaver ze souboru CSS.
    • Kliknutím na možnost Importovat importujete soubor CSS do dokumentu.
  4. (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.

Definice multimediálních dotazů

  1. Na panelu CSS Designer klikněte v podokně Zdroje na zdroj CSS.

  2. 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.

  3. Vyberte Podmínky podle svých potřeb.

    Definování multimediálních dotazů
    Definování multimediálních dotazů

    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ří.

    Poznámka:

    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.

Definice selektorů CSS

  1. Na panelu CSS Designer vyberte v podokně Zdroje požadovaný zdroj CSS nebo multimediální dotaz v podokně @Média.

  2. 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ů:

    • Pomocí kláves se šipkou nahoru/dolů můžete určit, nakolik budou navrhované selektory specifické.
    • Odstraňte navrhované pravidlo a zadejte selektor, který potřebujete. Ujistěte se, že jste zadali název selektoru spolu s označením v nabídce Typ selektoru. Pokud tedy například zadáváte parametr ID, přidejte na začátek selektoru symbol „#“.
    • Jestliže budete chtít vyhledat konkrétní selektor, použijte pole pro vyhledávání v horní části podokna.
    • Chcete-li selektor přejmenovat, klikněte na něj a zadejte požadovaný název.
    • Pokud budete chtít změnit pořadí selektorů, přetáhněte je na požadované místo.
    • Budete-li chtít přesunout selektor z jednoho zdroje do jiného, přetáhněte selektor v podokně Zdroj na požadovaný zdroj.
    • Jestliže chcete selektor duplikovat do vybraného zdroje, klikněte na selektor pravým tlačítkem a vyberte možnost Duplikovat.
    • Pokud budete chtít selektor duplikovat a přidat jej do multimediálního dotazu, klikněte pravým tlačítkem na selektor, přesuňte kurzor nad možnost Duplikovat do multimediálního dotazu a vyberte požadovaný multimediální dotaz.

    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á.

Kopírování a vkládání stylů

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í:

  • Pokud selektor neobsahuje žádné styly, jsou možnosti Kopírovat a Kopírovat všechny styly neaktivní.
  • U vzdálených webů bez možnosti úpravy není tlačítko Vložit styly k dispozici. Tlačítka Kopírovat a Kopírovat všechny styly jsou však i nadále k dispozici.
  • Podle potřeby můžete také vkládat styly, které se u selektoru z části nachází (překrývání). V takovém případě se vloží Union všech selektorů.
  • Kopírování a vkládání stylů je k dispozici v případě odlišných vazeb souborů CSS – Import, Odkaz, Inline
    styly.
Kopírování a vkládání stylů
Kopírování a vkládání stylů

Změna pořadí selektorů

Klikněte na požadovaný selektor a přetáhněte jej do nové pozice pomocí panelu Selektory.

Nastavení vlastností CSS

Vlastnosti jsou seskupeny do následujících kategorií a jsou zastoupeny jednotlivými ikonami v horní části podokna Vlastnosti:

  • Rozvržení
  • Text
  • Okraj
  • Pozadí
  • Další (seznam vlastností „pouze text“ bez vlastností s vizuálními řídicími prvky)
Poznámka:

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é.

Nastavení okrajů, odsazení a polohy

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í.

Vlastnost okraje
Vlastnost okraje

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.

Nastavení vlastností okraje

Vlastnosti Řízení okrajů jsou logicky rozděleny na karty, na kterých je můžete rychle prohlížet a měnit. 

Vlastnosti manipulace s ohraničením
Vlastnosti manipulace s ohraničením

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ý. 

Nastavení barvy okraje na všech stranách
Nastavení barvy okraje na všech stranách

Okraj na všech stranách
Okraj na všech stranách

Nastavení barvy horního okraje
Nastavení barvy horního okraje

Barva horního okraje nastavena na červenou
Barva horního okraje nastavena na červenou

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.

Zakázání nebo odstranění vlastností

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.

Zakázání/odstranění vlastnosti
Zakázání/odstranění vlastnosti

Nově je však lze použít i na úrovni skupiny Řízení okrajů a uplatnit je tak u všech vlastností.

Klávesové zkratky

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í) 

Určení prvků stránky přiřazených selektoru CSS

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í. 

Odkaz na externí seznam stylů CSS

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.

  1. Panel CSS Designer otevřete jedním z následujících úkonů:

    • Vyberte možnost Okno > CSS Designer.
    • Stiskněte kombinaci kláves Shift + F11.
  2. V panelu CSS Designer klikněte na ikonu „+“ vedle položky Zdroje a vyberte možnost Připojit stávající soubor CSS.

    Připojit stávající soubor CSS
    Připojit stávající soubor CSS

  3. Proveďte jeden z následujících úkonů:

    • Klikněte na tlačítko Procházet a vyhledejte externí seznam stylů CSS.
    • Do pole Soubor/URL zadejte cestu k seznamu stylů.
  4. 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.

  5. Klikněte na tlačítko OK.

Získejte pomoc rychleji a snáze

Nový uživatel?