Как да използвате текстовия панел в панела със свойства CSS на Dreamweaver

Панелът Dreamweaver Text включва колекция от опции, които контролират показването на текста във вашите страници. Можете да получите достъп до опциите на текстовия панел, като превъртите надолу панела Property, докато стигнете под опциите за оформление, или като щракнете върху иконата T в горната част на панела.

Текстовият панел включва следните опции за форматиране:

• Цвят: Задайте цвета на текста. Можете да щракнете върху цветната ямка и да изберете цвят, да използвате пипетката, за да пробвате всеки цвят на екрана, или да въведете шестнадесетичен цветен код в цветното поле. Ако въведете шестнадесетичен цветен код, включете началния знак за лира (#).

• Font-Family: Определете семейство шрифтове или поредица от семейства. Можете да добавяте шрифтове от вашия локален твърд диск или от Adobe TypeKit, като изберете Управление на шрифтове в долната част на падащия списък и стартирате диалоговия прозорец Управление на шрифтове.

  

• Стил на шрифта: Въведете нормален, курсив или наклонен. Въпреки това курсивът и косият рядко се различават в уеб браузър, така че се придържайте към курсив, освен ако нямате конкретна причина да не го правите.

• Вариант на шрифта: Променете текста с малки главни букви. Тествайте внимателно дизайните си, защото този атрибут не се поддържа от всички браузъри.

• Тегло на шрифта: Направете текста да изглежда удебелен, като изберете Bold или Bolder от падащия списък. Можете също да въведете число между 100 и 900, за да контролирате по-точно колко удебелен ще се показва текстът. За да премахнете удебелено форматиране, изберете Нормално или По-леко.

• Font-Size: Определете размера на текста. Можете да изберете конкретен числов размер или относителен размер. Опциите за размер са пиксел (px), точка (pt), пика (pc), процент (%), em, rem, ex и ch. Пиксели, ems и проценти са най-често използваните опции за размери на текста.

• Line-Height: Посочете височината на реда, на който е поставен текстът. Подобно на размера на текста, можете да зададете височина на реда по различни начини, включително пиксели, ems и проценти. Добра практика в мрежата е да добавяте височина на реда, защото увеличаването на пространството около текста ви улеснява четенето на екрана на компютъра.

• Подравняване на текст: Подравняване вляво, дясно, центриране или подравняване на текста, като щракнете върху съответната икона. Първата икона за Наследяване е по подразбиране. Например, можете да центрирате текста в долния колонтитул на вашата уеб страница, като включите Text-Align, зададено на Center, в дефиницията на стил, който прилагате към

  таг в долната част на страницата.

• Text-Decoration: Посочете дали текстът е подчертан, надчертан, показван със зачертаване или показван с ефекта на мигане. Можете също да изберете None, което често се използва за премахване на подчертаването от текста на връзката.

• Text-Indent: Посочете количеството, което текстът ще бъде отстъпен от лявата страна на страницата, като въведете число в една от опциите за размер, като пиксели, ems или проценти.

Защо толкова много шрифтове?

Може би сте чували, че вече можете да използвате всеки шрифт, който искате на вашите уеб страници, благодарение на най-новата версия на Cascading Style Sheets, CSS3. Това твърдение е вярно, но с някои ограничения: Трябва да имате законното право да публикувате шрифта и шрифтът трябва да бъде хостван на уеб сървър.

За да гарантира, че текстът ви ще изглежда така, както възнамерявате, Dreamweaver включва колекции от най-често срещаните шрифтове на компютрите с Windows и Macintosh. Тези шрифтове са групирани в семейства, като напр

• Gotham, Helvetica Nue, Helvetica, Arial, без засечки

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

Можете да създадете свои собствени колекции от шрифтове, като използвате диалоговия прозорец Управление на шрифтове, който е достъпен, като изберете опцията Управление на шрифтове в долната част на падащия списък Font-Family в панела Text в панела CSS Designer.

Секцията Text-Shadow на панела Text

Разделът Text-Shadow на панела Text предоставя инструменти за добавяне на текстови сенки, едно от най-новите свойства на CSS, включени в дефиницията на CSS3. Най-популярните опции са следните:

• H-сянка: Добавете сянка към вашия текст по хоризонталната ос. Първо изберете опция за размер и след това въведете число в полето. Например въведете 2px, за да добавите хоризонтална сянка с ширина 2 пиксела.

• V-сянка: Добавете сянка към вашия текст по вертикалната ос. Първо изберете опция за размер и след това въведете число в полето.

• Размазване: Контролирайте количеството размазване в сянката. Колкото по-голямо е числото, толкова повече сянката е разпръсната или замъглена.

• Цвят: Въведете шестнадесетичен цветен код, за да посочите цвета на сянката, или използвайте пипетката, за да пробвате всеки цвят на екрана.

  

Функциите в долната част на текстовия панел, които не са толкова често срещани, колкото другите опции на текстовия панел, са както следва:

• Преобразуване на текст: Променете главния и главния шрифт на вашия текст. Опциите са главни букви, главни и малки букви. Щракнете върху съответната икона, за да зададете това свойство.

• Разстояние между буквите : Определя количеството празно пространство, вмъкнато между буквите. Опциите за размер са пиксел (px), точка (pt), пика (pc), процент (%), em, rem, ex и ch.

• Разстояние между думите : Определя количеството празно пространство, вмъкнато между думите. Опциите за размер са пиксел (px), точка (pt), пика (pc), процент (%), em, rem, ex и ch. (Вижте предходната странична лента „Сравняване на опциите за размер на CSS.“)

• Бял интервал: Кажете на браузъра как да обработва прекъсвания на редове и интервали в блок от текст. Вашите опции са Inherit, Normal, Nowrap, Pre, Pre-line или Pre-wrap. Nowrap е особено полезен, защото предотвратява отделянето на елементи, ако трябва да се обвият, за да се поберат в прозорец на браузъра или друг контейнер.

• Вертикално подравняване: Подравнете вградени елементи, като текст и изображения, по отношение на елементите, които ги заобикалят. Можете да зададете числова стойност или да изберете Основна линия, Под, Супер, Отгоре, Текст-горе, Средно, Долно и Текст-долу.