Як використовувати текстову панель на панелі властивостей CSS Dreamweaver

Панель Dreamweaver Text містить набір параметрів, які керують відображенням тексту на ваших сторінках. Ви можете отримати доступ до параметрів панелі «Текст», прокрутивши панель «Властивості» вниз, доки не потрапите під параметри макета, або клацнувши піктограму T у верхній частині панелі.

Панель «Текст» містить такі параметри форматування:

• Колір: установка кольору тексту. Ви можете клацнути колодязь кольору та вибрати колір, використовувати піпетку для зразка будь-якого кольору на екрані або ввести шістнадцятковий код кольору в поле кольору. Якщо ви введете шістнадцятковий код кольору, додайте знак початку фунта (#).

• Сімейство шрифтів: визначте сімейство шрифтів або серію сімейств. Ви можете додати шрифти з локального жорсткого диска або з Adobe TypeKit, вибравши «Керувати шрифтами» у нижній частині розкривного списку та запустивши діалогове вікно «Керування шрифтами».

  

• Стиль шрифту: введіть звичайний, курсив або косий. Однак курсив і похилий шрифт рідко відрізняються у веб-переглядачі, тому дотримуйтеся курсиву, якщо у вас немає конкретної причини цього не робити.

• Варіант шрифту: змініть текст на маленькі великі літери. Ретельно перевірте свої проекти, оскільки цей атрибут підтримується не всіма браузерами.

• Вага шрифту: зробіть текст жирним, вибравши Жирний або Жирний у спадному списку. Ви також можете ввести число від 100 до 900, щоб точніше контролювати, наскільки жирним буде текст. Щоб видалити жирне форматування, виберіть Звичайне або Світліше.

• Розмір шрифту: визначення розміру тексту. Ви можете вибрати певний числовий розмір або відносний розмір. Параметри розміру: піксель (px), точка (pt), піка (pc), відсоток (%), em, rem, ex і ch. Пікселі, ems і відсотки є найбільш часто використовуваними параметрами розмірів тексту.

• Line-Height: вкажіть висоту рядка, на якому розміщується текст. Як і розмір тексту, ви можете вказати висоту рядка різними способами, включаючи пікселі, ems і відсотки. В Інтернеті доцільно додавати висоту рядка, оскільки збільшення простору навколо тексту полегшує читання на екрані комп’ютера.

• Вирівнювання тексту: вирівнювання ліворуч, праворуч, центрування або вирівнювання тексту, клацнувши відповідний значок. Перший значок, для успадкування, є за замовчуванням. Наприклад, ви можете відцентрувати текст у нижньому колонтитулі своєї веб-сторінки, включивши параметр Text-Align, встановлений на Center, у визначення стилю, який ви застосовуєте до

  тег внизу сторінки.

• Text-Decoration: вкажіть, чи буде текст підкреслюватися, перекреслюватися, відображатися закресленням чи відображатися з ефектом миготіння. Ви також можете вибрати «Немає», що часто використовується для видалення підкреслення з тексту, що зв’язується.

• Текстовий відступ: укажіть розмір відступу для тексту з лівої частини сторінки, ввівши число в одному з параметрів розміру, наприклад у пікселях, ems або у відсотках.

Чому так багато шрифтів?

Можливо, ви чули, що тепер ви можете використовувати будь-який шрифт на своїх веб-сторінках, завдяки останній версії каскадних таблиць стилів, CSS3. Це твердження вірне, але з деякими обмеженнями: ви повинні мати юридичне право на публікацію шрифту, а шрифт повинен бути розміщений на веб-сервері.

Щоб ваш текст виглядав так, як ви плануєте, Dreamweaver включає колекції найпоширеніших шрифтів на комп’ютерах Windows і Macintosh. Ці шрифти згруповані в сімейства, наприклад

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

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

Ви можете створити власні колекції шрифтів за допомогою діалогового вікна «Керування шрифтами», до якого можна отримати доступ, вибравши параметр «Керувати шрифтами» у нижній частині спадного списку «Сімейство шрифтів» на панелі «Текст» на панелі «Конструктор CSS».

Розділ 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».)

• Пробіл: скажіть браузеру, як обробляти розриви рядків і пробіли в блоці тексту. Ваші варіанти: Наслідувати, Звичайний, Nowrap, Pre, Pre-line або Pre-wrap. Nowrap особливо корисний, оскільки він запобігає розділенню елементів, якщо вони повинні обгортатися, щоб поміститися у вікно браузера або інший контейнер.

• Вертикальне вирівнювання: вирівнювання вбудованих елементів, таких як текст і зображення, по відношенню до елементів, які їх оточують. Ви можете встановити числове значення або вибрати базову лінію, підкладку, супер, верх, текст зверху, середину, низ і текст внизу.