Ako používať panel Text na paneli vlastností CSS aplikácie Dreamweaver

Panel Text Dreamweaver obsahuje kolekciu možností, ktoré riadia zobrazenie textu na vašich stránkach. K možnostiam panela Text sa dostanete posúvaním panela Vlastnosti nadol, kým sa nedostanete pod možnosti rozloženia, alebo kliknutím na ikonu T v hornej časti panela.

Panel Text obsahuje nasledujúce možnosti formátovania:

• Farba: Nastavte farbu textu. Môžete dobre kliknúť na farbu a vybrať farbu, použiť kvapkadlo na vzorkovanie akejkoľvek farby na obrazovke alebo zadať hexadecimálny kód farby do poľa farieb. Ak zadáte hexadecimálny kód farby, uveďte aj začiatočný znak libry (#).

• Font-Family: Definujte rodinu písiem alebo sériu rodín. Písma môžete pridať z miestneho pevného disku alebo z Adobe TypeKit výberom možnosti Spravovať písma v spodnej časti rozbaľovacieho zoznamu a otvorením dialógového okna Spravovať písma.

  

• Štýl písma: Zadajte Normálne, Kurzíva alebo Šikmé. Kurzíva a šikmé písmo sa však vo webovom prehliadači len zriedka líšia, takže sa držte kurzívy, pokiaľ na to nemáte konkrétny dôvod.

• Variant písma: Zmeňte text na veľké písmená. Svoje návrhy starostlivo otestujte, pretože tento atribút nepodporujú všetky prehliadače.

• Font-Weight: Text sa zobrazí tučný výberom Tučné alebo Tučné z rozbaľovacieho zoznamu. Môžete tiež zadať číslo od 100 do 900, aby ste presnejšie určili, ako tučným písmom sa text zobrazí. Ak chcete odstrániť tučné formátovanie, vyberte Normálne alebo Svetlejšie.

• Font-Size: Definujte veľkosť textu. Môžete si vybrať konkrétnu číselnú veľkosť alebo relatívnu veľkosť. Možnosti veľkosti sú pixel (px), bod (pt), pica (pc), percento (%), em, rem, ex a ch. Pixely, ems a percentá sú najčastejšie používané možnosti veľkosti textu.

• Line-Height: Zadajte výšku riadku, na ktorom je umiestnený text. Podobne ako veľkosť textu, aj tu môžete určiť výšku riadku rôznymi spôsobmi, vrátane pixelov, ems a percent. Na webe je dobrým zvykom pridať výšku riadku, pretože zväčšenie priestoru okolo textu uľahčuje čítanie na obrazovke počítača.

• Zarovnanie textu: Zarovnanie doľava, doprava, zarovnanie na stred alebo zarovnanie textu kliknutím na príslušnú ikonu. Prvá ikona pre Zdediť je predvolená. Môžete napríklad vycentrovať text v päte svojej webovej stránky tak, že do definície štýlu, ktorý použijete na

  tag v spodnej časti stránky.

• Text-Decoration: Zadajte, či je text podčiarknutý, prečiarknutý, zobrazený s prečiarknutím alebo s efektom žmurkania. Môžete tiež vybrať možnosť Žiadne, čo sa často používa na odstránenie podčiarknutia z prepojeného textu.

• Odsadenie textu: Zadajte mieru odsadenia textu od ľavej strany strany zadaním čísla do jednej z možností veľkosti, ako sú pixely, ems alebo percentá.

Prečo toľko písiem?

Možno ste už počuli, že vďaka najnovšej verzii kaskádových štýlov CSS3 môžete na svojich webových stránkach použiť ľubovoľné písmo. Toto tvrdenie je pravdivé, ale s určitými obmedzeniami: Na zverejnenie písma musíte mať zákonné právo a písmo musí byť umiestnené na webovom serveri.

Dreamweaver obsahuje kolekcie najbežnejších písiem na počítačoch so systémom Windows a Macintosh, aby sa zabezpečilo, že váš text bude vyzerať podľa vašich predstáv. Tieto písma sú zoskupené v rodinách, ako napr

• Gotham, Helvetica Nue, Helvetica, Arial, sans serif

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

Svoje vlastné kolekcie písiem môžete vytvárať pomocou dialógového okna Spravovať písma, ktoré je prístupné výberom možnosti Spravovať písma v spodnej časti rozbaľovacieho zoznamu Rodina písem na paneli Text na paneli CSS Designer.

Časť Text-Shadow na paneli Text

Časť Text-Shadow na paneli Text poskytuje nástroje na pridávanie tieňov textu, jednu z najnovších vlastností CSS zahrnutých v definícii CSS3. Najpopulárnejšie možnosti sú nasledujúce:

• H-tieň: Pridajte tieň k textu na vodorovnej osi. Najprv vyberte možnosť veľkosti a potom do poľa zadajte číslo. Zadajte napríklad 2 pixely, aby ste pridali horizontálny tieň široký 2 pixely.

• V-tieň: Pridajte tieň k textu na zvislej osi. Najprv vyberte možnosť veľkosti a potom do poľa zadajte číslo.

• Blur: Ovládajte množstvo rozmazania v tieni. Čím väčšie číslo, tým viac je tieň roztiahnutý alebo rozmazaný.

• Farba: Zadajte hexadecimálny kód farby na určenie farby tieňa alebo použite kvapkadlo na vzorkovanie akejkoľvek farby na obrazovke.

  

Funkcie v spodnej časti panela Text, ktoré nie sú také bežné ako ostatné možnosti panela Text, sú nasledovné:

• Text-Transform: Zmena veľkých a malých písmen v texte. Možnosti sú Veľké písmená, Veľké písmená a Malé písmená. Kliknutím na príslušnú ikonu nastavíte túto vlastnosť.

• Letter-Spacing: Definuje množstvo medzier medzi písmenami. Možnosti veľkosti sú pixel (px), bod (pt), pica (pc), percento (%), em, rem, ex a ch.

• Word-Spacing: Definuje množstvo medzier vložených medzi slová. Možnosti veľkosti sú pixel (px), bod (pt), pica (pc), percento (%), em, rem, ex a ch. (Pozrite si predchádzajúci bočný panel „Porovnanie možností veľkosti CSS.“)

• Biele medzery : Povedzte prehliadaču, ako má zaobchádzať so zlommi riadkov a medzerami v bloku textu. Vaše možnosti sú Inherit, Normal, Nowrap, Pre, Pre-line alebo Pre-wrap. Nowrap je obzvlášť užitočný, pretože zabraňuje oddeleniu prvkov, ak sa musia zalomiť, aby sa zmestili do okna prehliadača alebo iného kontajnera.

• Vertikálne zarovnanie: Zarovnajte vložené prvky, ako je text a obrázky, vo vzťahu k prvkom, ktoré ich obklopujú. Môžete nastaviť číselnú hodnotu alebo vybrať možnosť Baseline, Sub, Super, Top, Text-Top, Middle, Bottom a Text-bottom.