Otevřete inspektor vlastností (Okno > Vlastnosti), pokud ještě není otevřený, a vyberte možnost CSS v levém rohu panelu.
Naposledy aktualizováno
20. 12. 2021
Naučte se pomocí Inspektoru vlastností textu používat formátování HTML nebo CSS v aplikaci Dreamweaver.
Můžete použít textový inspektor vlastností k aplikaci HTML formátování nebo formátování kaskádových stylů (CSS). Když aplikujete HTML formátování, Dreamweaver přidá vlastnosti do HTML kódu v těle vaší stránky. Když aplikujete CSS formátování, Dreamweaver zapíše vlastnosti do záhlaví dokumentu nebo do samostatného stylu.
Při vytváření řádkových stylů CSS přidá aplikace Dreamweaver kód atributu stylu přímo do těla stránky.
O formátování textu (CSS versus HTML)
Formátování textu v aplikaci Dreamweaver je podobné používání standardního textového editoru. Můžete nastavit výchozí styly formátování (Odstavec, Záhlaví 1, Záhlaví 2 a tak dále) pro blok textu, změnit pisma, velikost, barvu a zarovnání vybraného textu nebo aplikovat textové styly jako tučné, kurzíva, kód (monospace) a Podtržení.
Dreamweaver má dva inspektory vlastností, integrované do jednoho: CSS inspektor vlastností a HTML inspektor vlastností. Když používáte CSS inspektor vlastností, Dreamweaver formátuje text pomocí kaskádových stylů (CSS). CSS poskytuje web designérům a vývojářům větší kontrolu nad designem webových stránek a současně poskytuje vylepšené funkce pro přístupnost a zmenšenou velikost souborů. CSS inspektor vlastností vám umožňuje přístup k existujícím stylům a také vytváření nových.
Používání CSS je způsob, jak kontrolovat styl webové stránky bez narušení její struktury. Oddělením vizuálních prvků designu (písma, barvy, okraje a tak dále) od strukturální logiky webové stránky poskytuje CSS webovým designérům vizuální a typografickou kontrolu, aniž by obětovali integritu obsahu.Navíc definování typografického designu a rozložení stránky z jednoho, samostatného bloku kódu—aniž byste museli používat obrázkové mapy, písmo tagy, tabulky a rozdělovací GIFy—umožňuje rychlejší stahování, zjednodušenou údržbu webu a centrální bod, ze kterého můžete kontrolovat designové atributy napříč více webovými stránkami.
Styly vytvořené pomocí CSS můžete uložit přímo v dokumentu, nebo pro větší sílu a flexibilitu můžete styly uložit do externího stylu. Pokud připojíte externí styl k několika webovým stránkám, všechny stránky automaticky odrážejí jakékoli změny, které provedete ve stylu. Pro přístup ke všem CSS pravidlům stránky použijte panel Styly CSS (Okno > Styly CSS).Pro přístup k pravidlům která se aplikují na aktuální výběr, použijte panel CSS Styles (režim Current) nebo rozbalovací nabídku Targeted Rule v CSS inspektoru vlastností.
Pokud dáváte přednost, můžete použít HTML značky k formátování textu na vašich webových stránkách. Chcete-li používat HTML značky namísto CSS, naformátujte text pomocí HTML inspektoru vlastností.
Na jedné stránce je možné kombinovat formátování CSS a HTML 3.2. Formátování se použije hierarchicky: Formátování HTML 3.2 nahradí formátování podle externích seznamů stylů CSS a CSS vložené v dokumentu nahradí externí CSS.
Upravit CSS pravidla v inspektoru vlastností
Proveďte jeden z následujících úkonů:
- Umístěte kurzor dovnitř bloku textu, který byl formátován pravidlem, které chcete upravit. Pravidlo se zobrazí v rozbalovací nabídce Targeted Rule.
- Vyberte pravidlo z rozbalovací nabídky Odkazované pravidlo.
- Klikněte na Upravit pravidlo.
Proveďte změny pravidla pomocí různých možností
v inspektoru vlastností CSS.
Odkazované pravidlo
Pravidlo, které upravujete v inspektoru Vlastnosti CSS. Když máte na text použitý existující styl, pravidlo ovlivňující formát textu se zobrazí, když kliknete do textu na stránce. Můžete také použít rozbalovací nabídku Targeted Rule k vytvoření nových pravidel CSS, nových vložených stylů nebo použití existujících tříd na vybraný text. Pokud vytváříte nové pravidlo, musíte vyplnit dialogové okno New CSS Rule.Další informace naleznete v odkazech na konci tohoto tématu.
Upravit pravidlo
Otevře dialogové okno CSS Rule Definition pro cílené pravidlo. Pokud vyberete možnost New CSS Rule z rozbalovací nabídky Targeted Rule a kliknete na tlačítko Edit Rule, Dreamweaver místo toho otevře dialogové okno definice New CSS Rule.
CSS Designer
Otevře panel CSS Designer a zobrazí vlastnosti pro cílené pravidlo v aktuálním zobrazení.
Písmo
Změní písmo odkazovaného pravidla.
Velikost
Nastaví velikost písma odkazovaného pravidla.
Barva textu
Nastaví vybranou barvu jako barvu písma odkazovaného pravidla. Vyberte webově bezpečnou barvu kliknutím na barevné pole nebo zadejte hexadecimální hodnotu (například #BB5153) do přilehlého textového pole.
Tučné
Přidá vlastnost tučného písma do odkazovaného pravidla.
Kurzíva
Přidá vlastnost kurzívy do odkazovaného pravidla.
Zarovnat doleva, na střed a doprava
Zarovná dané pravidlo vlevo, na střed nebo vpravo.
Ve vlastnostech Písmo, Velikost, Barva textu, Tučné, Kurzíva a Zarovnání se zobrazují vlastnosti pravidla, které se použije na aktuální výběr v okně dokumentu. Při změně těchto vlastností bude ovlivněno odkazované pravidlo.
Úprava barvy textu pomocí Inspektoru vlastností
Pokud jste na text nepoužili žádné konkrétní pravidlo, můžete jeho barvu upravit přímo v Inspektoru vlastností. V následujícím příkladu si povšimněte barvy textu před úpravou. Pole vedle výběru barvy zobrazuje bílou, což označuje barvu textu tam, kde jste umístili kurzor.
Chcete-li upravit barvu textu, vyberte jej. Klepněte na nástroj Color Picker a vyberte si barvu dle svého výběru. Podívejte se na následující obrázek, kde inspektor vlastností zobrazuje novou barvu.
Nastavení HTML formátování v inspektoru vlastností
Otevřete inspektor vlastností (Okno >
Vlastnosti), pokud již není otevřen, a klikněte na tlačítko HTML.
Vybrat text, který chcete formátovat.
Nastavte možnosti, které chcete pro vybraný text použít:
Formát
Nastavuje styl odstavců vybraného textu. Odstavec použije výchozí formát pro značku <p>, záhlaví 1 přidá značku H1 atd.
Identifikátor
Přiřadí k výběru identifikátor. Místní nabídka ID (je-li k dispozici) obsahuje seznam všech nepoužitých, deklarovaných ID dokumentu.
Třída
Zobrazuje styl třídy, který je právě použit na vybraný text.Pokud pro výběr nebyly použity žádné styly, místní nabídka zobrazuje možnost Žádný styl CSS.Pokud byl pro výběr použit více stylů, nabídka je prázdná.
Nabídku Styl můžete použít k provádění následujících úkonů:
Vyberte styl, který chcete použít pro výběr.
Chcete-li odstranit aktuálně vybraný styl, vyberte volbu None (žádný).
Pomocí volby Přejmenovat přejmenujte styl.
Výběrem možnosti Připojit šablonu stylů otevřete dialogové okno, které umožňuje připojit ke stránce externí šablonu stylů.
Tučné
Použije pro vybraný text <b> nebo <strong> podle předvolby stylu nastavené v kategorii Obecné v dialogovém okně Předvolby.
Kurzíva
Použije pro vybraný text možnost <i> nebo <em> podle předvolby stylu nastavené v kategorii Obecné dialogového okna Předvolby.
Neuspořádaný seznam
Vytvoří z vybraného textu seznam s odrážkami. Pokud není vybraný žádný text, vytvoří se nový seznam s odrážkami.
Uspořádaný seznam
Vytvoří z vybraného textu číslovaný seznam. Pokud není vybraný žádný text, vytvoří se nový číslovaný seznam.
Vlastnost Blockquote a její odstranění
Odsadí nebo odstraní odsazení vybraného textu použitím nebo odebráním značky blockquote.V seznamu odsazování vytvoří vnořený seznam a odebrání odsazení zruší vnořování seznamu.
Odkaz
Vytvoří hypertextový odkaz na vybraný text. Kliknutím na ikonu složky přejdete k souboru na webu; zadejte URL; přetáhněte ikonu Point-To-File na soubor v panelu Soubory nebo přetáhněte soubor z panelu Soubory do pole.
Titul
Určuje textový popisek hypertextového odkazu.
Cíl
Určuje rámeček nebo okno, ve kterém se načte propojený dokument:
_blank načte propojený soubor do nového, nepojmenovaného okna prohlížeče.
_parent načte propojený soubor do nadřazené sady rámečků nebo okna rámečku, který obsahuje odkaz.Pokud rámeček obsahující odkaz není vnořený, propojený soubor se načte do celého okna prohlížeče.
_self načte propojený soubor do stejného rámečku nebo okna jako odkaz.Tento Target je předpokládaný, takže ho obecně nemusíte specifikovat.
_top načte propojený soubor do celého okna prohlížeče a odebere tak všechny rámečky.
Přejmenování třídy z inspektoru vlastností HTML
Dreamweaver zobrazuje všechny třídy dostupné pro vaši stránku v nabídce Třída inspektoru vlastností HTML.Styly v tomto seznamu můžete přejmenovat výběrem možnosti Přejmenovat na konci seznamu stylů tříd.
V panelu Inspektor vlastností vyberte rozevírací seznam Třída.
Ze zobrazeného seznamu vyberte na jeho konci možnost Přejmenovat.
V rozbalovací nabídce Přejmenovat styl vyberte styl, který chcete přejmenovat.
Do textového pole Nový název zadejte nový název a klikněte na
OK.
Další podobné
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.
