Jak používat panel Text v panelu vlastností CSS aplikace Dreamweaver

Panel Text Dreamweaveru obsahuje sadu voleb, které řídí zobrazení textu na vašich stránkách. K možnostem panelu Text se dostanete posouváním panelu Vlastnosti dolů, dokud se nedostanete pod možnosti rozvržení, nebo kliknutím na ikonu T v horní části panelu.

Panel Text obsahuje následující možnosti formátování:

• Barva: Nastavte barvu textu. Můžete dobře kliknout na barvu a vybrat barvu, použít kapátko pro vzorkování jakékoli barvy na obrazovce nebo zadat hexadecimální kód barvy do pole barvy. Pokud zadáte hexadecimální kód barvy, zahrňte počáteční znak libry (#).

• Font-Family: Definujte rodinu písem nebo řadu rodin. Písma můžete přidávat z místního pevného disku nebo z Adobe TypeKit výběrem možnosti Spravovat písma v dolní části rozevíracího seznamu a otevřením dialogového okna Správa písem.

  

• Styl písma: Zadejte Normální, Kurzíva nebo Šikmé. Kurzíva a šikmá se však ve webovém prohlížeči jen zřídka liší, takže zůstaňte u kurzívy, pokud nemáte konkrétní důvod, proč tomu tak není.

• Font-Variant: Změňte text na malá písmena. Otestujte své návrhy pečlivě, protože tento atribut není podporován všemi prohlížeči.

• Font-Weight: Text se zobrazí tučně výběrem možnosti Tučné nebo Bolder z rozevíracího seznamu. Můžete také zadat číslo mezi 100 a 900, abyste přesněji řídili, jak tučný text se zobrazí. Chcete-li odstranit tučné formátování, zvolte Normální nebo Světlejší.

• Font-Size: Definujte velikost textu. Můžete si vybrat konkrétní číselnou velikost nebo relativní velikost. Možnosti velikosti jsou pixel (px), bod (pt), pica (pc), procenta (%), em, rem, ex a ch. Pixely, ems a procenta jsou nejčastěji používané možnosti velikosti textu.

• Line-Height: Určete výšku řádku, na kterém je umístěn text. Podobně jako velikost textu můžete výšku řádku určit různými způsoby, včetně pixelů, ems a procent. Na webu je dobrým zvykem přidat výšku řádku, protože zvětšení prostoru kolem textu usnadňuje čtení na obrazovce počítače.

• Zarovnání textu: Zarovnání doleva, doprava, na střed nebo zarovnání textu kliknutím na odpovídající ikonu. První ikona, pro Zdědit, je výchozí. Můžete například vycentrovat text v zápatí své webové stránky tak, že do definice stylu, který použijete na

  tag v dolní části stránky.

• Text-Decoration: Určete, zda je text podtržený, přeškrtnutý, zobrazený s přeškrtnutím nebo s efektem mrknutí. Můžete také zvolit Žádné, což se často používá k odstranění podtržení z propojeného textu.

• Odsazení textu: Určete míru, o kterou bude text odsazen od levé strany stránky, zadáním čísla do jedné z možností velikosti, jako jsou pixely, ems nebo procenta.

Proč tolik písem?

Možná jste slyšeli, že nyní můžete na svých webových stránkách používat libovolné písmo, a to díky nejnovější verzi kaskádových stylů CSS3. Toto prohlášení je pravdivé, ale s určitými omezeními: Musíte mít zákonné právo publikovat písmo a písmo musí být hostováno na webovém serveru.

Aby se váš text zobrazil tak, jak chcete, Dreamweaver obsahuje kolekce nejběžnějších písem na počítačích Windows a Macintosh. Tyto fonty jsou seskupeny do rodin, jako nap

• Gotham, Helvetica Nue, Helvetica, Arial, bezpatkové

• Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, Times a serif

Své vlastní kolekce písem můžete vytvářet pomocí dialogového okna Spravovat písma, které je přístupné výběrem možnosti Spravovat písma v dolní části rozevíracího seznamu Rodina písem na panelu Text na panelu Návrhář CSS.

Sekce Text-Shadow panelu Text

Část Text-Shadow panelu Text poskytuje nástroje pro přidávání stínů textu, což je jedna z nejnovějších vlastností CSS zahrnutých v definici CSS3. Nejoblíbenější možnosti jsou následující:

• H-stín: Přidejte k textu stín na vodorovné ose. Nejprve vyberte možnost velikosti a poté do pole zadejte číslo. Zadejte například 2 pixely, chcete-li přidat vodorovný stín široký 2 pixely.

• V-shadow: Přidejte k textu stín na svislé ose. Nejprve vyberte možnost velikosti a poté do pole zadejte číslo.

• Blur: Ovládejte míru rozostření ve stínu. Čím větší číslo, tím více je stín rozprostřený nebo rozmazaný.

• Barva: Zadejte hexadecimální kód barvy pro určení barvy stínu nebo použijte kapátko k nazkoušení jakékoli barvy na obrazovce.

  

Funkce ve spodní části panelu Text, které nejsou tak běžné jako ostatní možnosti panelu Text, jsou následující:

• Text-Transform: Změňte velká a malá písmena v textu. Možnosti jsou Velká písmena, Velká písmena a Malá písmena. Klepnutím na příslušnou ikonu nastavíte tuto vlastnost.

• Letter-Spacing: Definuje množství prázdného místa vloženého mezi písmena. Možnosti velikosti jsou pixel (px), bod (pt), pica (pc), procenta (%), em, rem, ex a ch.

• Word-Spacing: Definuje množství mezer vkládaných mezi slova. Možnosti velikosti jsou pixel (px), bod (pt), pica (pc), procenta (%), em, rem, ex a ch. (Viz předchozí postranní panel „Porovnání možností velikosti CSS.“)

• White-Space: Řekněte prohlížeči, jak zacházet se zalomením řádků a mezerami v bloku textu. Vaše možnosti jsou Zdědit, Normální, Nyní rap, Pre-line, Pre-line nebo Pre-wrap. Nowrap je zvláště užitečný, protože zabraňuje oddělení prvků, pokud se musí zalomit, aby se vešly do okna prohlížeče nebo jiného kontejneru.

• Vertical-Align: Zarovnání vložených prvků, jako je text a obrázky, ve vztahu k prvkům, které je obklopují. Můžete nastavit číselnou hodnotu nebo zvolit Baseline, Sub, Super, Top, Text-Top, Middle, Bottom a Text-bottom.