Пошукова робота

на тему:

Введення і форматування тексту

Спочатку світ World Wide Web був текстовим. У цей час, звичайно, він
збагатився зображеннями, звуком, інтерактивними елементами управління,
але основну роль в представленні інформації досі грає текст. У цьому
розділі будуть розглянуті можливості FrontPage в області роботи з
текстом.

Де це можливо, FrontPage використовує ті ж прийоми роботи, що і всі інші
додатки Microsoft Office (особливо Word). У багатьох випадках це
додатковий довід на користь FrontPage. Однак у FrontPage є і деякі
унікальні особливості, які виникають з особливостей предмета, для якого
він призначений. Важливо пам’ятати, що остаточний вигляд Web-сторінок,
створених у FrontPage, визначає не сам FrontPage, а браузер відвідувача
Web-сайта. Які б точні інструкції по оформленню тексту не давав
FrontPage, браузер відвідувача може їх проігнорувати. Крім того, системи
відрізняються не тільки встановленими браузерами і їх версіями, але і
можливістю використовувати ті або інші шрифти, різним вирішенням і
глибиною кольору та іншими чинниками. Тому завжди треба пам’ятати, що
при розробці сторінки ви зможете лише приблизно уявити собі, як вона
буде виглядати на екрані монітора відвідувача.

Прийоми введення тексту у FrontPage

Введення тексту у FrontPage проводиться так само, як це прийнято в
текстових редакторах. Клацніть показчиком миші в будь-якому місці
сторінки, і курсор буде вміщений в найближчу точку, в яку можна ввести
текст.

Введення, копіювання, вирізування і видалення тексту здійснюється
звичайним для Office 200Х чином (табл. 1). Спробуйте запам’ятати
клавіатурні комбінації — це зможе зберегти вам безліч часу при роботі.

Декілька слів про спеціальну вставку. Цей засіб дозволяє вставити текст
як один абзац або декілька, із збереженням форматування або без
збереження. Використання спеціальної вставки дуже зручне, наприклад,
коли дані для вашої сторінки беруться з бази даних або з електронної
таблиці.

Імпорт тексту

FrontPage дозволяє вставку на сторінку цілих файлів або їх виділених
частин. При цьому він може розпізнати безліч форматів і конвертувати їх
в ефективний код HTML. Можна скористатися як перетягненням, так і
стандартними клавіатурними комбінаціями, а також вибором відповідного
пункту меню.

Як FrontPage інтерпретує текст і графіку

Якщо фрагмент, який ви вставляєте, не є текстом HTML, FrontPage
передусім визначає, чи є дані, що вставляються вами текстовими або
графічними Якщо дані визначені як текстові, FrontPage

розпізнає вміст файла, використовуючи встановлені в системі стандартні
конвертори,

конвертує дані в формат RTF,

конвертує дані з формату RTF в HTML,

табличні дані (наприклад, з електронної таблиці) перетворюються в
таблицю HTML. Всі інші дані вважаються звичайним текстом, при цьому
FrontPage прагне, наскільки це можливе, зберегти форматування
початкового тексту

Якщо дані визначені як графічні, FrontPage

конвертує дані в формат зображень Windows (* bmp),

при збереженні Web-сторінки відкриває діалогове вікно, в якому ви можете
уточнити назву і шлях до графічного файла, що створюється,

якщо зображення використовує прозорість або менше за 256 кольорів,
FrontPage за умовчанням зберігає його як файл у форматі GIF. Якщо ж в
зображенні використовується більше за 256 кольорів і не використовується
прозорість, файл зберігається в форматі JPEG.

Особливості роботи з текстом в HTML

Читання попереднього розділу могло навести вас на думку, що редагування
тексту у FrontPage нічим не відрізняється від роботи з текстом в
звичайних текстових редакторах. Багато в чому це дійсно так, але це —
заслуга саме FrontPage. Що ж до HTML, то в ньому редагування
відрізняється рядом обмежень:

символи табуляції сприймаються як пропуски. Тому використати ці символи
для вирівнювання рядків тексту неможливо;

символи пустого простору (пропуски, символи табуляції, перекладу рядка
сприймаються як один пропуск. FrontPage автоматично вирішує цю проблему,
замінюючи в групі пропусків всі пропуски, крім останнього, на спеціальні
нерозривні пропуски (див. врізку нижче). Тому пропуски, які ви вставили
у FrontPage, не будуть проігноровані браузером;

в HTML немає прямої підтримки червоного рядка, відступів між
параграфами, точної настройки довжини рядка або відстані між рядками.

Коли вам все-таки треба використати декілька пропусків підряд:

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

Використайте стиль параграфа Formatted, який у вигляді виключення
зберігає відображення декількох пропусків відразу Для цього у FrontPage
використовується тег

 І хоч весь абзац буде представлений
малопривабливим моноширинним шрифтом, але пропуски залишаться в такій же
недоторканості, неначе ви їх надрукували на пишучій машинці. Другою
проблемою даного абзацу є така, що в ньому ви не зможете використати
різні види форматування. Також краще не користуватися символами
табуляції, оскільки в різних браузерах символи табуляції можуть бути
еквівалентні різному числу пропусків. Якщо вам не підходить моноширинний
шрифт і ви хочете точніше розміщувати символи на сторінці, це рішення -
не для вас.

У HTML передбачені спеціальні нерозривні пропуски (nonbreaking space) Ці
пропуски браузери не стискають. В коді HTML ви зможете розпізнати
нерозривний пропуск по комбінації символів   в незалежності від
кількості нерозривних пропусків, що йдуть підряд, браузер відобразить їх
всі. У FrontPage передбачені три можливості для вставки нерозривних
пропусків:

при введенні декількох пропусків FrontPage перетворить в нерозривні всі
пропуски в послідовності, за винятком останнього,

при введенні тексту натиснення клавіші Tab розцінюється як натиснення
пропуску чотири рази підряд,

щоб просто вставити один нерозривний пропуск, натисніть
Ctrl+Shift+пропуск.

Незважаючи на наявність всіх цих можливостей, застосування для
компонування тексту пропусків вважається поганим тоном. Декілька
пропусків підряд не завжди будуть виглядати добре, особливо враховуючи
використання різних шрифтів, змінної ширини сторінки і автоматичного
перекладу рядка

Практика використання двох пропусків для відділення пропозицій одна від
одної зараз практично не зустрічається Цей метод колись використовувався
для друкарських машинок з їх моноширинними шрифтами, але в цей час при
широкому використанні пропорційних шрифтів він абсолютно не потрібен.

Вставка спеціальних елементів тексту

Вставка чотирьох спеціальних елементів тексту, розривів рядків,
горизонтальних ліній, символів і коментарів проводиться у FrontPage за
допомогою меню Insert.

Вставка розриву рядка

Вибір пункту Break в меню Insert приводить до відкриття діалогового
вікна Break Properties, показаного на мал. 1.

Мал. 1. Діалогове вікно Break Properties

За допомогою нього можна вставити будь-який з чотирьох спеціальних
елементів:

Normal Line Break. Це - звичайний розрив рядка. Його можна вставити
також натисненням клавіш Shift+Enter. Введення тексту буде продовжене на
один рядок нижче;

Clear Left Margin. Якщо цей розрив вставлений в текст, який обтікає
зображення або інший об'єкт в лівому краю екрана, введення тексту буде
продовжене вже під об'єктом;

Clear Right Margin. Якщо цей розрив вставлений в текст, який обтікає
зображення або інший об'єкт у правому краю екрана, введення тексту буде
продовжене вже під об'єктом;

Clear Both Margin. Якщо цей розрив вставлений в текст, який обтікає
зображення або інший об'єкт з будь-якого краю екрана, введення тексту
буде продовжене вже під об'єктом.

Натиснення кнопки Style внизу зліва приводить до відкриття діалогового
вікна Modify Style, яке буде розглянуте далі в цьому розділі. Можна лише
зауважити, що за допомогою неї можна застосувати оформлення каскадних
таблиць стилів до розриву рядка.

Розриви рядків показані на двох малюнках: звичайний - на мал. 2, а
розрив рядка, коли об'єкт розміщений біля лівої границі, - на мал. 3.

Мал. 2. Звичайний розрив рядка

Мал. 3. Розрив сгроки при розміщенні об'єкта у лівого кордону

Вставка горизонтальних ліній

Щоб на сторінці розмістити горизонтальну лінію, в меню Insert потрібно
вибрати Horizontal Line. Звичайно горизонтальна лінія займає всю ширину
вікна браузера, при цьому перед нею і відразу ж після неї передбачені
розриви рядків. Горизонтальну лінію можна побачити на мал. 2 і 3. Вона
розташована над зображенням і займає всю ширину сторінки.

Мал. 4. Діалогове вікно Horizontal Line Properties

Якщо ви клацнете по горизонтальній лінії правою кнопкою миші і в
контекстному меню виберете Horizontal Line Properties, ви зможете
настроїти властивості цієї лінії (мал. 4):

в групі Width можна настроїти довжину горизонтальної лінії (в пікселях
або відсотках від максимально можливої довжини у вікні браузера);

Height дозволяє настроїти товщину лінії в пікселях;

Alignment прив'язує лінію до лівої частини екрана, до правої частини або
до центра;

Color дозволяє настроїти колір лінії з використанням трьох стандартних
діалогових вікон для вибору кольорів;

установка прапорця Solid Line (No Shading) усуває спеціальне затінення
біля країв лінії, яке додає зображенню об'єм. У результаті лінія повинна
виглядати плоскою;

кнопка Style відкриває діалогове вікно Modify Style, в якому можна
настроїти форматування каскадних таблиць стилів для цієї лінії.

Вставка символів

Спеціальні символи - це ті символи, які ви не знайдете на клавіатурі. У
FrontPage ви зможете вставити їх легко і просто за допомогою діалогового
вікна Symbol (меню Insert ? Symbol) (мал. 5).

Мал. 5. Діалогове вікно Symbol

Вставка коментарів

Коментарі - це текст, який буде видимий у FrontPage, але не в браузерах
відвідувачів. Звичайно коментарі - це різні замітки, які призначені для
вас чи інших членів команди розробників сайта. У FrontPage вставляти
коментарі дуже просто. Для цього досить в меню Insert вибрати Comment і
в діалоговому вікні, що відкрилося, мал. 6 ввести текст коментаря.

У FrontPage коментарі відображаються темно-червоним кольором. Щоб внести
в них зміни, можна клацнути по них два рази мишею або клацнути правою
кнопкою миші і в контекстному меню вибрати Comment Properties. Для
видалення просто клацніть по них мишею і натисніть кнопку Delete.

Мал. 6. Діалогове вікно Comment

Пошук, заміна і перевірка правопису

У FrontPage передбачені засоби пошуку, заміни і перевірки правопису
Web-сторінок.

Пошук тексту

Для пошуку тексту встановіть курсор в позицію, з якої ви хочете почати
пошук, і виберіть Find в меню Edit або натисніть Ctrl+F. Відкриється
діалогове вікно Find, яке зображено на мал. 7.

Мал. 7.Діалогове вікно Find and Replace

У цьому вікні можна скористатися наступними настройками:

Find where - дозволяє вибирати пошук на всіх сторінках або ж тільки на
поточній;

Direction - пошук вперед до кінця сторінки або назад до її початку;

Match case - установка цього прапорця приводить до того, що при пошуку
буде враховуватися регістр букв;

Find whole words only - при установці цього прапорця частини слів
враховуватися не будуть. Пошук буде зупинятися тільки на цілих словах,
що відповідають умовам пошуку;

Find in html - при установці цього прапорця FrontPage буде проводити
пошук не тільки в тексті сторінки, що відображається, але і серед
службового коду HTML. Для того, щоб використати цю можливість, вам
необхідно буде відкрити вкладку HTML для Web-сторінки.

Заміна тексту

Щоб не тільки зробити пошук, але і відразу ж замінити знайдений текст,
скористайтеся командою Replace в меню Edit (або натисніть Ctrl+Н).
Діалогове вікно Replace показане на мал. 8. Воно відрізняється від
діалогового вікна Find наявністю поля Replace With. У це поле вводиться
текст, який повинен замінити знайдений. Щоб зробити заміну в
автоматичному режимі, натисніть кнопку Replace All.

Мал. 8. Діалогове вікно Replace

Перевірка правопису

У FrontPage передбачені два способи перевірки правопису. По-перше, ви
можете використати фонову перевірку правопису під час введення тексту,
а, по-друге, після закінчення введення тексту ви можете перевірити на
помилки всю сторінку (або декілька сторінок) цілком.

При фоновій перевірці правопису слова, які не розпізнані, підкреслюються
хвилястою червоною лінією. Настройка перевірки правопису проводиться з
вкладки General діалогового вікна Page Options (меню Tools > Раge
Options > General). На цій вкладці розташовані два прапорці:

Установка прапорця Check spelling as you type дозволяє FrontPage
провести фонову перевірку правопису під час введення тексту. Якщо така
перевірка позначається на швидкості роботи вашої системи або на вашій
сторінці дуже багато невідомих FrontPage слів, цей прапорець можна
зняти. За умовчанням він встановлений.

Установка прапорця Hide spelling errors in all documents ховає хвилясті
лінії, якими підкреслені нерозпізнані слова. За умовчанням цей прапорець
знятий. Ви можете скористатися ним, якщо терпіти не можете червоні
підкреслення у вашому тексті і вважаєте за краще провести швидку
перевірку потім.

При натисненні правою кнопкою миші по нерозпізнаному слову (яке
підкреслене хвилястою лінією) буде відображене контекстне меню з
пропозиціями по заміні слова, з можливістю проігнорувати всі згадки
цього слова в тексті (Ignore All) або додати його в словник (Add). Більш
повний набір можливостей для роботи з такими словами буде запропонований
вам, якщо ви запустите перевірку орфографії (для цього в меню Tools
виберіть Spelling або просто натисніть кнопку F7). Коли перевірка
знаходить нерозпізнане слово, відкривається вікно, показане на мал. 9.

Мал. 9. Засоби перевірки правопису у FrontPage - загальні з іншими
додатками Office

У цьому вікні перелік запропонованих варіантів для заміни, кнопки Ignore
All і Add працюють так само, як і в контекстному меню. Інші ж кнопки
призначені для наступних дій:

Ignore - нерозпізнане слово ігнорується, але при повторному знаходженні
цього слова перевірка знову зупиниться на ньому;

Change - замінює нерозпізнане слово на слово в полі Change To. Ви можете
погодитися із вже запропонованим варіантом, вибрати будь-яке слово зі
списку Suggestions, або ввести свій варіант написання прямо в цьому
полі;

Change All - діє так само, як Change, але при цьому всі такі ж слова,
які будуть знайдені при продовженні пошуку, будуть замінюватися
автоматично;

Suggest - перевіряє слово, яке ви щойно ввели в полі Change To, і, якщо
воно не розпізнане, пропонує до нього варіанти.

Використання тезауруса

Пошук потрібного слова для використання в тексті Web-сторінки може
виявитися важкою проблемою. FrontPage приходить до вас на допомогу і в
цій ситуації, пропонуючи використання тезауруса.

Тезаурус, незважаючи на свою назву, яка наводить на думку про сиву
старовину, - це просто словник синонімів і антонімів з коротким
уточненням їх значень. FrontPage використовує загальний тезаурус з
іншими компонентами Office 2000. Використати тезаурус просто - виділіть
слово, до якого ви хочете підібрати синонім, і в меню Tools виберіть
Thesaurus (або натисніть Shift-F7). Відкриється діалогове вікно
Thesaurus (мал. 10).

Мал. 10. Діалогове вікно Thesaurus

FrontPage автоматично відображає список синонімів і антонімів до
виділеного слова. Якщо у початкового слова є декілька значень, вони
відображаються в списку Meanings. Вибір якого-небудь значення приводить
до відображення списку синонімів і антонімів для цього значення.
Натиснення кнопки Replace (або просто подвійне натиснення мишею по
синоніму) приводить до того, що виділене слово буде замінене синонімом.
Якщо ж синонім близький до того, що вам потрібен, але ще не зовсім той,
можна скористатися кнопкою Look Up і подивитися синоніми вже для нього.
Щоб повернутися до початкового слова, натисніть кнопку Previous.

Форматування абзаців

Оформлення і компонування абзаців - це ключовий елемент компонування
всієї Web-сторінки і визначення її зовнішнього вигляду. У FrontPage
передбачений багатий вибір засобів для роботи з абзацами.

Використання основних абзацних стилів HTML

FrontPage підтримує 15 основних абзацних стилів HTML. Всі вони показані
на мал. 11.

Зверніть увагу, що це саме абзацні стилі. Вони застосовуються до
абзаців, а не до кожного символа окремо. Ці стилі призначені для того,
щоб визначати структуру документа, а не його точний зовнішній вигляд,
тому будь-який браузер буде показувати у відповідності зі своїми
настройками, які у різних браузеров можуть сильно відрізнятися. Стилі з
Heading 1 по Heading 6 призначені для заголовків різних рівнів. На
практиці сторінка, на якій використовуються заголовки всіх шести рівнів,
звичайно дуже велика, і потрібно подумати про те, щоб розбити її на
декілька. Однак можливість використання різних стилів заголовків
забезпечує необхідну гнучкість у відношенні розмірів заголовків.
Наприклад, якщо ви бажаєте використати для сторінки більш великі
заголовки, виберіть тільки діапазон з Heading 1 по Heading 3. Якщо ж,
навпаки, вам потрібні менші заголовки, зупиніться на діапазоні з Heading
4 по Heading 6. Як правило, шрифт найбільшого розміру, передбачений в
браузерах для Heading -1, а найдрібніший (для заголовків) для Heading 6.

Мал. 11. Основні абзацні стилі HTML, що підтримуються FrontPage

Стиль Normal призначений для звичайного тексту. Для нього (як і для
більшості інших стилів, в тому числі стилів заголовків) передбачене
автоматичне перенесення тексту на новий рядок по досягненні правого краю
вікна.

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

Стиль Address був спеціально розроблений для виділення адрес Web. Він
часто використовується, наприклад, щоб виділити адресу електронної
пошти, вміщену окремо від усього іншого тексту. У браузерах часто
передбачене виділення всього тексту в абзацах, оформлених цим стилем,
курсивом.

Для застосування будь-кого з 15 стилів HTML просто встановіть курсор в
потрібному абзаці (або виділіть необхідний проміжок тексту) і потім
виберіть потрібний стиль зі списку Change Style панелі інструментів
Formatting (перелік всіх інструментів на панелі Formatting, наведений в
табл. 4). Крім того, є три клавіатурні комбінації, які дозволять вам при
введенні тексту застосовувати стилі, не відриваючи рук від клавіатури.
Ось вони:

Crl+Shift+S - переводить курсор у вікно вибору стилю;

Сtrl+Shift+N - застосовує стиль Normal;

Сtrl+Shift+L - застосовує стиль Bulleted List (маркірований список).

Точні настройки властивостей абзацу

Точно настроїти властивості абзацу можна, скориставшись діалоговим
вікном Paragraph (мал. 12). Його можна відкрити, клацнувши по тексту
абзаца правою кнопкою миші і вибравши в контекстному меню Paragraph або
скориставшись командою Paragraph в меню Format.

Мал. 12. Діалогове вікно Рагадгарh

На даний момент нас цікавить єдине поле цього діалогового вікна -
Alignment. У ньому ви можете вибрати вирівнювання для абзацу:

Default - використовуються настройки за умовчанням;

Left - вирівнювання по лівому краю;

Right - вирівнювання по правому краю;

Center - вирівнювання по центру;

Justify - по ширині рядка.

Всі інші настройки цього діалогового вікна будуть розглянуті трохи
пізніше, при обговоренні каскадних таблиць стилів.

Робота із списками

У термінології HTML списки (lists) - це набір параграфів, перед якими
браузер повинен автоматично розставляти цифри (numbers) або спеціальні
символи (bullets). Вставляти в текст списки, використовуючи тільки
текстовий редактор, - значно складніше, ніж працювати із звичайним
текстом. На щастя, FrontPage дозволяє вам забути про всю чорнову роботу.

Створення маркірованих і нумерованих списків

Як ви можете пересвідчитися, подивившись на мал.13-15, у FrontPage
підтримуються три різновиди списків:

Picture Bullets (маркіровані списки з використанням зображень). Ви
можете вказати зображення, яке буде показувати на початок наступного
елемента списку;

Plain Bullets (звичайні маркіровані списки). Браузер буде
використовувати стандартний символ для відділення одного елемента списку
від іншого;

Numbered Bullets (нумеровані списки). Браузер буде послідовно нумерувати
елементи списку.

Мал. 13. Вставка маркірованого списку з використанням зображень

Перетворення існуючих абзаців в список проводиться дуже просто. Спочатку
треба виділити необхідні абзаци, а потім скористатися будь-яким з
нижченаведених:

вибрати Numbered List або Bulleted List із списку Change Style панелі
інструментів Formatting;

натиснути на кнопку Numbered List або Bulleted List на панелі
інструментів Formatting;

вибрати команду Bullets And Numbering в меню Format.

Мал. 14. Вставка маркірованого списку з використанням звичайних міток

Мал. 15. Вставка нумерованого списку

Щоб завершити використання списку і повернутися до звичайного тексту,
просто натисніть Enter два рази. Якщо зайвий рядок вам не потрібен,
приберіть її клавішею Backspace.

На вкладці Picture Bullets ви можете вказати зображення для списку двома
способами:

Якщо ви застосували для Web або окремої сторінки тему, можна встановити
перемикач Picture в положення Use Pictures From Current Themes. У
результаті ви зможете вибрати роздільник елементів списку, передбачений
для цієї теми.

Щоб скористатися будь-яким зображенням, встановіть перемикач в положення
Specify Picture. При цьому вам доведеться вказати шлях до потрібного
зображення.

Зверніть увагу на кнопку Style на мал.13-15. Вона призначена для
застосування до списків форматування каскадних таблиць стилів.

На мал.16 показані звичайні маркіровані і нумеровані списки різних
рівнів. На практиці список нижнього рівня по відношенню до списку більш
високого рівня - це список всередині списку. Створювати такі вкладені
списки не складно: виділіть елемент вже готового списку, який ви хочете
зробити вкладеним списком, і два рази клацніть по кнопці Increase Indent
на панелі Formatting (або два рази натисніть Ctrl+M). Перше натиснення
застосує до рядка стиль Normal, а другий - перетворить його у вкладений
список.

Мал. 16. Приклади вкладених списків

Щоб перетворити елемент списку в звичайний абзац, помістіть на нього
курсор і натисніть кнопку Decrease Indent на панелі інструментів
Formatting, В залежності від рівня вкладеності елемента може знадобитися
декілька натискань.

Ви можете змінити загальний стиль існуючого списку. Для цього клацніть
правою кнопкою миші по існуючому списку і в контекстному меню виберіть
List Properties. Відкриється діалогове вікно List Properties. Перейдіть
на вкладку Other (мал. 17).

Мал. 17. Додаткові можливості для вибору списків представлені на вкладці
Other діалогового вікна List Properties

На цій вкладці ви зможете:

в списку List Style вибрати відповідний стиль для списку;

встановити параметр Compact Layout (тільки для списків визначень -
Definition List). При установці цього прапорця термін, що визначається,
буде розташовуватися на одному рядку зі своїм визначенням.

Створення списків, що стискуються

FrontPage дозволяє зробити багаторівневі списки такими, що стискуються
(collapsible). Це означає, що список нижчого рівня можна буде показувати
і ховати, клацаючи мишею по елементу списку вищого над ним рівня.

Створювати списки, що стискаються і управляти їх початковим станом можна
за допомогою діалогового вікна List Properties. Два прапорці, які за це
відповідальні, присутні на всіх вкладках.

Enable Collapsible Outlines - установка цього прапорця включає
“стискання” багаторівневого списку. У результаті підрівні будуть
з'являтися і зникати в залежності від натиснення мишею по елементах
списку.

Initially Collapsed - установка цього прапорця означає, що спочатку всі
пiдрiвнi списку будуть сховані.

Використання типів списків із вкладки Other

За допомогою вкладки Other діалогового вікна List Properties можна
скористатися типами списків Directory List, Menu List і Definition List.

У переважній більшості браузерів списки типу Directory List і Menu List
не відрізнятимуться від звичайних маркірованих списків. Однак, якщо ви
активно використовуєте списки каталогів і списки меню, подумайте про те,
щоб використати ці стилі. Цілком можливо, що майбутні типи браузерів
будуть відображати їх відповідно до їх особливостей.

Тип Definition List складається відразу з двох стилів. Він призначений
для списків означень, тому в ньому виділяються означувані слова (стиль
Definition Term), і абзац з визначенням (стиль Definition). Щоб
подивитися, як виглядає такий список, можна заглянути на декілька
сторінок назад і подивитися на мал. 11. У середній частині якраз і
показаний список типу Definition List. Працювати з таким списком дуже
просто.

Введіть в новому рядку термін, який ви хочете визначити.

Застосуйте до цього рядка стиль Defined Term (використовуючи список
Change Style панелі інструментів Formatting).

Встановіть в кінці рядка курсор і натисніть Enter. FrontPage почне новий
рядок і автоматично застосує до нього стиль Definition.

Введіть визначення для терміну і натисніть Enter. FrontPage почне новий
рядок і автоматично застосує до нього знову стиль Defined Term.

Після того, як ви закінчите роботу з термінами і їх визначеннями,
натисніть Enter два рази. FrontPage повернеться до стилю Normal.

Використання шрифтів

Управління шрифтами на Web-сторінці пов'язане з певними труднощами.
Частіше за все ви навряд чи можете знати, які шрифти встановлені на
комп'ютері відвідувача сайта. Навіть якщо у відвідувачів цей шрифт
встановлений, він може називатися по-різному, в залежності від того, хто
їх поставив або на якій платформі вони використовуються.

Початкова специфікація HTML вирішувала цю проблему просто: в ній взагалі
не були передбачені засоби для вказівки шрифтів. Замість того, щоб
вказувати шрифт для частини тексту, в HTML була передбачена лише
вказівка на те, до якої частини структури документа цей текст
відноситься. Вибір же конкретного шрифту залишався повністю від
браузера.

В останніх версіях HTML вже можна вказувати назви шрифтів. Однак від
цього буде небагато користі, якщо для Web-сторінки ви використовуєте
такі шрифти, як DomCasual ВТ або Elephant. Шансів на те, що вони будуть
встановлені на комп'ютери користувачів, небагато. Тому існує велика
ймовірність того, що браузер відвідувача просто замінить ці шрифти на
інші (швидше всього, на шрифт за умовчанням), внаслідок чого сторінка
з'явиться перед очима відвідувача не зовсім в тому вигляді, на який ви
розраховували.

Для роботи з шрифтами на панелі інструментів Formatting передбачено
цілих сім елементів. Кожний з цих елементів можна використати для
застосування атрибута до виділеного тексту або зняття раніше вже
застосованого атрибута:

Font дозволяє застосувати до виділеного тексту вибраний вами шрифт;

Font Size дозволяє збільшити або зменшити розмір шрифту;

Bold застосовує до виділеного тексту напівжирне зображення;

Italic застосовує до виділеного тексту курсив;

Underline застосовує до виділеного тексту підкреслення;

Font Color дозволяє вибрати колір для шрифту;

Highlight Color дозволяє вибрати колір фону для виділеного проміжку
тексту.

Щоб отримати доступ до більшого числа настройок для тексту, виділіть
потрібний відрізок тексту і виберіть Font в меню Format (або клацніть
правою кнопкою миші по виділеному тексту і в контекстному меню виберіть
Font). Відкриється діалогове вікно Font (мал. 18).

Мал. 18. Діалогове вікно Font

П'ять порад по використанню шрифтів у Web-сторінках:

Шрифти повинні бути досить великими, щоб вони легко читалися. Залиште
крихітний шрифт для хитрих адвокатів Якщо те, для чого ви хочете
використати дрібний шрифт, не володіє великою цінністю, спробуйте без
цього обійтися.

Шрифти не повинні бути дуже великими, щоб не займати даремно простір у
вікні браузера. Використання шрифтів дуже великого розміру затрудняє
читання тексту і приводить до необхідності часто прокручувати сторінку

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

Уникайте дуже великої кількості різних стилів. Краще використати усього
декілька ретельно продуманих прийомів оформлення

Ваша мета - контраст, а не дисгармонія. Це стосується всіх елементів,
включаючи фон і шрифт.

Далі буде наведена коротка характеристика кожного з параметрів. Ті
параметри, які в нашому списку відмічені словом (CSS), будуть
відображатися тільки браузерами з підтримкою каскадних таблиць стилів.
Інші браузери їх просто проігнорують.

Font - дає можливість вибрати потрібний шрифт.

Font style - дозволяє застосовувати звичайне зображення, напівжирне,
курсив і напівжирне курсивне.

Size - дозволяє вибрати розмір шрифту (у відносному діапазоні від 1 до
7). Поруч з відносними значеннями приведені типові еквівалентні
абсолютні значення, але необхідно враховувати, що в різних браузерах
вони можуть бути різними.

Color - дає можливість скористатися трьома стандартними діалоговими
вікнами для вибору кольору шрифту.

Underline - застосовує до тексту підкреслення.

Overline (CSS) - малює над текстом горизонтальну лінію.

Blink - текст починає мерехтіти. Ті браузери, які не підтримують цей
ефект, просто проігнорують цей параметр.

Superscript - перетворює текст у верхній індекс (тобто текст меншає в
розмірі і дещо підіймається над рядком).

Subscript - перетворює текст в нижній індекс (текст меншає в розмірі і
притискається до нижнього кордону рядка).

Small caps (CSS) - всі букви тексту відображаються як прописні (дещо
зменшені в розмірі).

All caps (CSS) - всі букви тексту відображаються як звичайні прописні.

Capitalize (CSS) - перша буква кожного слова в тексті буде показана
прописною, навіть якщо в оригіналі вона була рядковою.

Hidden (CSS) - виділений текст відображатися не буде.

Strong - посилює виділений текст. Більшість браузерів відобразять такий
текст за допомогою напівжирного зображення.

Emphasis - робить виділений текст більш виразним. Більшість браузерів
відобразять такий текст за допомогою курсиву.

Sample - цей стиль призначений для виділення прикладів (наприклад,
результатів виконання програми). Звичайно для такого тексту
використовується моноширинний шрифт.

Definition - для визначень. Як правило, рівнозначне виділенню курсивом.

Citation - для цитат. Також рівнозначне виділенню курсивом.

Variable - для назв змінних. І для цього стилю звичайно використовується
курсив.

Keyboard - призначений для тексту, що вводиться користувачем. Звичайно
для цього тексту передбачений моноширинний шрифт.

Code - для прикладів програмного коду. Звичайно використовується
моноширинний шрифт.

Для негайного перегляду результатів застосування вибраних вами
параметрів призначене поле Preview.

На вкладці Character Spacing (мал. 19) можна задати відстань між буквами
і положення тексту відносно рядка.

Мал. 19. Вкладка Character Spacing діалогового вікна Font

Spacing - в цьому списку можна вибрати Normal (звичайна відстань між
буквами), Condensed (для зменшення відстані) і Expanded (для
збільшення). Якщо значення зі списку вам не підходять, можна встановити
своє значення в полі By.

Positioning - в цьому списку можна вибрати Normal (нормальне положення
тексту відносно рядка), Raised (над рядком) і Lowered (під ним).
Нестандартне значення можна встановити за допомогою поля By.

Як і на попередній вкладці, приклад застосування вибраних вами
параметрів можна відразу ж переглянути в полі Preview.

Вирівнювання тексту

У HTML передбачені чотири можливості для вирівнювання тексту: Default,
Left, Center і Right. Скористатися ними можна трьома способами:

На панелі інструментів Formatting передбачені кнопки Align Left, Center
і Align Right (див. табл.4). Якщо будь-яке вирівнювання вже застосоване
до тексту, відповідна кнопка буде показана натисненою. При використанні
вирівнювання за умовчанням жодна з кнопок не натиснена.

Можна клацнути по абзацу правою кнопкою миші і в контекстному меню
вибрати Paragraph. У діалоговому вікні, що відкрилося, можна настроїти
вирівнювання в полі Alignment.

У меню Format виберіть Paragraph. Відкриється те ж діалогове вікно, що і
в попередньому випадку.

Всі ці можливості, а також можливість вирівнювати текст по довжині рядка
(Justify) надають у ваше розпорядження каскадні таблиці стилів.

Короткий огляд каскадних таблиць стилів

У перших версіях HTML не були передбачені можливості для вказівки типу
шрифту, відступів, відстані між рядками і інших елементів оформлення
тексту. У більш пізніх версіях з'явилися можливості вказівки типів
шрифту і кольору, але тільки для спеціально виділених проміжків тексту.
Централізоване управління елементами оформлення тексту тільки засобами
HTML досі недосяжне.

Основи CSS

Щоб забезпечити максимальні можливості в області оформлення
Web-сторінок, організацією World Wide Web Consortium були затверджені
стандарти в області технології, яка отримала назву каскадних таблиць
стилів (Cascading Style Sheets, CSS). Застосування CSS складається з
двох етапів:

Визначення стилю. Стиль - це набір властивостей тексту. Наприклад, до
таких властивостей відносяться: вибраний вами шрифт, його колір, розмір,
фон і рамка. У CSS стиль називається селектором (selector).

Застосування стилю до одного або декількох проміжків тексту. У
залежності від використаного вами підходу стиль може застосовуватися
автоматично, або ж ви повинні будете вказати область його застосування
вручну.

Реально для застосування CSS використовуються рядки коду. На скільки це
можливо, замість коду ми будемо розглядати діалогові вікна FrontPage, за
допомогою яких код CSS генерується автоматично. Спочатку декілька
визначень.

Стиль CSS (CSS style) - це набір властивостей тексту, наприклад:
гарнітура шрифту, його розмір, насиченість ліній, колір, колір фону, тип
рамки і її товщина та інше.

Правило CSS (CSS rule) - це вираз, який привласнює властивості одному
або декільком стилям. Ось приклад правила, яке вказує назву шрифту і
колір для стилів H1 і H2:

H1, H2 {font-family; Anal; color; red}

Між правилами і стилями існують відносини типу більшість-до-більшості.
Одне правило можна застосовувати до будь-якої кількості стилів, і до
одного стилю можна застосовувати будь-яку кількість правил.

Селектор (selector) - ця назва стилю CSS. Для наших цілей цікаві тільки
три типи селекторів:

Клавіатурні селектори (type selectors) називаються так само, як і теги
HTML: Р - для звичайних абзаців, H1 - для Heading1 (заголовка першого
рівня), LI - для елемента списку, TD - для елемента таблиці і т.д.
Застосування правила до клавіатурного селектора приводить до того, що
змінюється вигляд всіх елементів сторінки, що управляються відповідним
тегом HTML. Перше правило в наведеному нижче прикладі застосовує курсив
до всіх комірок заголовка таблиці, друге правило робить весь напівжирний
шрифт на сторінці червоним.

TH { font-style; italic;}

B { color; red;}

Селектори класів (Class selectors) не застосовуються автоматично до
яких-небудь частин сторінки. Вам необхідно вказати, до яких дільниць
сторінки ви маєте намір їх застосувати. Перший вираз в прикладі створює
клас goga, а другий - застосовує його до абзацу.

.goga { color: white; background-color: black; }

Цей текст буде білим на чорному фоні.

Зверніть увагу, що вираз, за допомогою якого ви визначаєте клас,
починається з крапки. При застосуванні стилю до абзацу крапку на початку
ставити не треба!

Селектори ідентифікаторів (ID selectors) діють подібно до селекторів
класів. Єдина відмінність полягає в тому, що після створення стилю і
прив'язки його до ідентифікатора ви можете вказати цей ідентифікатор для
елемента сторінки. Ось простий приклад. Створюється стиль для всіх
елементів з ідентифікатором bruce, а потім ідентифікатор bruce
присвоюється абзацу. У результаті текст в абзаці повинен стати
напівжирним.

#bruce { font-weight: bold; }

<р id=bruce> Цей текст буде виділений напівжирним.

На жаль, не можна використовувати один і той же ідентифікатор більше ніж
для одного елемента на сторінці. Тому селектори ідентифікаторів, на
відміну від селекторів класів, використовуються відносно рідко. Зверніть
увагу на префікс #, який використовується при створенні селектора
ідентифікаторів.

Браузери, що підтримують CSS

CSS - це відносно нова технологія, і не всі браузери її підтримують. В
Internet Explorer підтримка CSS з'явилася, починаючи з версії 3, а в
Netscape Navigator - з версії 4. Більшість старих браузерів відносяться
до CSS так само, як і до інших невідомих тегів HTML - вони їх ігнорують.

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

Може здатися, що CSS - дуже складні в застосуванні і підтримуються малим
числом браузерів. Моя думка така, що відносно інших можливостей
(наприклад, зробити всю сторінку графічним зображенням або взагалі
залишити шрифти на повний розгляд браузера, відмовившись від CSS). CSS -
найкращий вибір.

Де можна розмістити правила CSS

Є декілька можливостей для розміщення правил CSS на Web-сторінці.

Приєднати до елемента сторінки. В останніх версіях HTML для елементів
сторінки передбачений атрибут STYLE, який дозволяє вам застосовувати до
елемента форматування CSS. Код HTML при використанні цього атрибута
виглядає таким чином:

<р style="text-transform; uppercase;" > Це буде відображене великими
буквами.

При використанні кнопки Style у властивостях цього елемента FrontPage
застосує до нього вибрані вами настройки форматування CSS саме цим
способом.

Розмістити в розділі

Цей заголовок буде виділений зеленим кольором.

Щоб вставляти подібні вирази не в режимі написання коду HTML, а за
допомогою діалогових вікон FrontPage, виберіть в меню Format команду
Style. Далі ви зможете створити потрібні вам селектори, використовуючи
угоду про найменування (назва нового клавіатурного селектора повинна
співпадати з тегом структури сторінки HTML, назва селектора класів -
починатися з крапки (.), а назва селектора ідентифікаторів - зі знаку
фунта (#).

До виділених частин тексту селектори застосовуються по-різному.
Клавіатурні селектори після їх створення вже застосовані до відповідних
частин тексту. Селектори класів можна вибрати в числі інших стилів зі
списку Change Style панелі інструментів Formatting. Селектори
ідентифікаторів доведеться вставляти в режимі редагування коду HTML
(див. “Основи CSS” ).

Розмістити в файлі, на який буде посилатися декілька Web-сторінок. Дуже
зручно відвести для визначення всіх стилів CSS окремий файл, на який
будуть посилатися інші Web-сторінки. Цим ви забезпечите собі
централізоване управління стилями CSS на всіх Web-сторінках.

Синтаксис CSS

Синтаксис CSS відрізняється від звичайного синтаксису HTML. Давайте
розглянемо наступний приклад:H2, H3 { font-family: Arial, sans=serif;
color; blue;}

Перші елементи рядка - це назви селекторів.

Якщо між назвами двох селекторів стоїть кома, це означає, що правило
буде застосоване до обох селекторів незалежно. У нашому прикладі це
селектори H2 і H3.

Якщо назви двох селекторів не розділені комами, це означає, що правило
буде застосовуватися тільки в ситуаціях, коли проміжок тексту володіє
атрибутами обох селекторів. Наприклад, в наступному прикладі правило
буде застосоване тільки до заголовків другого рівня, виділеного
напівжирним:

H2 В {color; red;}

Весь список властивостей береться в фігурні дужки.

Кожна властивість записується таким чином: спочатку йде ім'я
властивості, потім двокрапка, а потім одне або декілька значень.

Декілька значень однієї і тієї ж властивості розділяються комами.

Крапка з комою означає кінець визначення властивості.

Каскадність та успадкування

У будь-якому браузері, який підтримує CSS, є набір стилів за умовчанням.
Якщо для Web-сторінки вказані свої стилі, то саме вони будуть
використовуватися. Якщо до одного стилю застосовано декілька
взаємовиключаючих правил, вони будуть використовуватися в порядку їх
появи на Web-сторінці. У цьому й полягає ідея каскадності.

Інший принцип, який використовується в каскадних таблицях стилів, - це
принцип успадкування. Відповідно до цього принципу деякі стилі можуть
успадковувати властивості від інших стилів. Звичайно механізм дії
успадкування засновується на тегах HTML. Наприклад, ви привласнили
який-небудь атрибут CSS селектору

    (Unnumbered List, тобто
    маркірований список) або селектору
      (Ordinary List, тобто
      нумерований список). У результаті всі елементи цих списків (
    1. , List
      Item), підлеглі стилям
        і
          , успадкують ті ж самі властивості.
          Незважаючи на те, що інтерпретація успадкування в різних браузерів може
          відрізнятися, в багатьох ситуаціях це дуже корисна властивість.

          Інтеграція CSS і FrontPage

          Як самі стилі CSS, так і правила для роботи з ними - це абстрактні
          службові елементи, які не будуть показані в режимі WYSIWYG. Звичайно,
          можна скористатися режимом редагування коду HTML. Це дозволить вам
          використати абсолютно всі можливості CSS, і в деяких ситуаціях
          результати можуть вразити. Однак з технічної точки зору робота з CSS в
          режимі коду забере у вас багато часу.

          У цій ситуації FrontPage знову пропонує засоби, які полегшать вашу
          роботу. Вибравши в меню Format команду Style, ви відкриєте діалогове
          вікно Style (мал. 20). За допомогою цього діалогового вікна ви отримуєте
          зручний спосіб для роботи із стилями CSS на рівні сторінки.

          Мал. 20. Діалогове вікно Style призначене для роботи зі стилями CSS

          Коли ви в перший раз відкриєте це діалогове вікно, в списку Styles
          будуть показані всі доступні теги HTML, незалежно від того, чи визначені
          для них які-небудь правила. По визначенню будь-який з цих тегів може
          бути використаний як назва для клавіатурного селектора.

          Щоб відобразити вже створені вами правила CSS для Web-сторінки, в списку
          List виберіть User-Defined Styles. При виборі будь-якого з цих стилів у
          вікні Paragraph preview буде показано, як буде виглядати абзац, до якого
          застосували цей стиль, а у вікні Character preview - як будуть виглядати
          символи з цим стилем. У полі Description виводиться текстовий опис
          атрибутів стилю.

          Незалежно від того, чи вибрали ви всі теги HTML, чи ж тільки стилі,
          визначені користувачем, створення, зміна, видалення стилів CSS
          проводиться за допомогою тих же кнопок New (новий), Modify (змінити) і
          Delete (видалити) Видаляти можна тільки стилі, визначені користувачем. В
          результаті відкриється діалогове вікно (мал. 21), з яким ви вже,
          напевно, стикалися при роботі з різними елементами.

          Мал. 21. Це діалогове вікно - головний відправний пункт для настройки
          параметрів шрифту, абзацу, рамки і списків для стилів CSS

          Одиниці вимірювання, що використовуються в CSS.

          Одиниці вимірювання використовуються для різних атрибутів, що задаються
          з допомогою CSS Наприклад, в чомусь необхідно вказувати висоту символів,
          ширину рядків в абзаці і товщину рамки. Всі величини вказуються в
          наступному форматі, спочатку йде число, а за ним (без пропуску) одиниця
          вимірювання. Можливі одиниці вимірювання представлені в табл. 5a – 5в.

          Звичайно проблеми виникають з абсолютними одиницями вимірювання.
          Наприклад, задавши величину 1іm, нам абсолютно невідомо, як таку
          величину відобразить монітор відвідувача Web-сайта. У більшості
          відеосистем одна точка еквівалентна одному пікселю, але це справедливо
          не для всіх систем.

          При використанні процентних одиниць вимірювання їх значення може бути
          різним в залежності від типу об'єкта. Для переважної більшості об'єктів
          відсоток береться від їх розмірів за умовчанням. Наприклад, якщо вказана
          довжина рядків в параграфі, дорівнює 80%, це означає, що буде
          використана довжина, рівна 80% від значення, яке використовувалося б без
          цієї команди. Однак з цього правила є і виключення.

          Для кольору процентні одиниці вимірювання будуть відповідати звичайній
          RGB-шкалі (значення від 0 до 255).

          Якщо ви вкажете товщину лінії в процентах, то вона буде встановлена в
          процентах від розміру шрифту (в крапках), який оточує цю лінію.

          При вказівці кольору можна використати будь-яку з 5 незалежних схем.

          За іменем. Ви можете використати 16 стандартних кольорів FrontPage
          (назви кольорів виводяться при переміщенні курсора на выбраний вами
          кольором в першому діалоговому вікні для вибору кольорів). Приклад:

          { color, red; }

          За допомогою шістнадцяткового 12-бітного значення. Вкажіть
          співвідношення червоного, зеленого і синього за допомогою трьох
          шістнадцяткових значень від 0 до F, перед якими стоїть знак фунта (#).
          Приклад:

          { color: #FOO; }

          За допомогою шістнадцяткового 24-бітного значення. Співвідношення
          червоного, зеленого і синього вказується вже за допомогою шести
          шістнадцяткових цифр (від 00 до FF). Перед ними також ставиться знак
          фунта. Приклад:

          { color- #FFOOOO; }

          За допомогою десятекового 24-бітного значення. Використовується звичайне
          десятеричне значення (0-255), а замість знаку фунта - ключове слово rgb.
          Приклад:

          { color: rgb(255,0,0); }

          За допомогою позначення інтенсивності кожного кольору в процентах.
          Приклад:

          { color: rgb(100%, 0%, 0%), }

          Привласнення властивостей CSS

          Звернімося ще раз до мал. 21. Натиснення кнопки Format в нижньому лівому
          кутку відкриває меню з п'ятьма категоріями властивостей CSS. Настав час
          детальніше розглянути перші чотири категорії.

          Призначення шрифтів CSS

          При виборі пункта Font відкриється діалогове вікно, показане на мал.22.

          Мал. 22. Діалогове вікно для вказівки шрифту CSS і його властивостей

          Чи не виглядає вікно й справді дуже знайомим? Все, що на ньому
          знаходиться, є і в діалоговому вікні для настройки шрифту виділеної
          частини тексту (див.мал.18). Відмінності пов'язані з тим, що в нашому
          випадку ми настроюємо властивості не для частини тексту, а для
          абстрактного стилю.

          Вказівка шрифтів

          Яку б назву шрифту ви не вказали в якості атрибуту CSS, гарантії того,
          що цей шрифт буде встановлено на комп'ютері всіх відвідувачів Web-сайта,
          немає. Якщо вказаний вами шрифт не встановлений на комп'ютері
          відвідувача сайта, його браузер зробить підстановку іншого шрифту, але
          якого саме, передбачити важко. Для розв'язання цієї проблеми є декілька
          способів:

          Вказуйте тільки найпоширеніші шрифти. До таких відносяться шрифти, що
          постачаються з Windows, Microsoft Office та з поширеними браузерами.

          Вказуйте загальні ознаки шрифтів. Для цього призначені наступні ключові
          слова:

          serif - “serif” означає засічки, маленькі горизонтальні риски, які
          використовуються в деяких шрифтах. Детальніше про них буде розказано
          трохи далі в цьому розділі. Використання ж ключового слова serif
          означає, що буде використаний системний шрифт за умовчанням із
          засічками. Як правило, це Times New Roman або Times Roman.

          sans-serif- системний шрифт за умовчанням без засічок. Швидше всього,
          ним буде Arial або Helvetica.

          cursive ~ шрифт “під рукописний”.

          fantasy - декоративний шрифт.

          monospace - моноширинний шрифт, що використовується в системі за
          умовчанням. Швидше всього, це буде Courier New або Courier.

          Як показує практика, коли ви вказуєте cursive або fantasy, браузер може
          вибрати що завгодно. Відповідність же інших ключових ознак конкретним
          шрифтам більш-менш нормалізувалася.

          Вказуйте відразу декілька шрифтів. При використанні атрибута font-family
          ви можете вказати цілий список шрифтів, при цьому ви можете вказати їх в
          порядку переваги. Наприклад:

          H1 { font-family: Verdana, Arial, Helvetica, sans-serif; }

          Спочатку браузер перевірить, чи доступний шрифт Verdana, і якщо він
          доступний, буде використовувати саме його. Якщо ж шрифт Verdana
          недоступний, точно така ж перевірка буде вироблена по відношенню до
          Arial. Якщо недоступний і Arial, настане черга Helvetica, а потім -
          шрифту за умовчанням без засічок, який встановлено в системі.

          Small Caps

          Іноді використання звичайних шрифтів, наприклад з розміром великих букв
          в 12 пунктів і малих букв розміром в 9 пунктів, не задовольняє вас
          внаслідок того, що товщина ліній у великих букв буде відрізнятися від
          товщини ліній рядкових. У цій ситуації можна скористатися значенням
          small-caps атрибута CSS font-variant. При використанні small-caps весь
          текст буде виглядати так, неначе він був набраний тільки великими
          буквами дещо зменшеного розміру.

          Відстань між символами

          Настройка відстані між символами з використанням CSS проводиться на
          другій вкладці діалогового вікна Font, яка називається Character Spacing
          (мал. 23).

          Мал. 23. Вкладка Character Spacing діалогового вікна Font

          На цій вкладці є два поля. Їх пояснення і відповідні до них назви
          атрибутів CSS, що вказуються в коді HTML, представлені в табл. 7.

          Шрифти, що завантажуються при перегляді сайту

          Каскадні таблиці стилів надають у ваше розпорядження могутні засоби для
          вказівки шрифтів і настройки їх параметрів Однак всі ваші зусилля можуть
          ні до чого не привести, якщо вказаний вами шрифт просто не встановлений
          на комп'ютері відвідувача Web-сайта В Інтернеті явно назріла
          необхідність знайти засіб, який дозволяв би завантажувати шрифти прямо з
          Web-сторінкою, в якій вони використовуються Це дуже допомогло б як
          Web-дизайнерам, так і відвідувачам Web. З одного боку, дизайнерам не
          треба було б перетворювати текст в зображення, що сповільнює перегляд
          сайтів, з іншого боку, відвідувачі бачили б сайт таким, як його створив
          дизайнер. В програші при такій системі залишаються лише компанії, що
          розробляють шрифти, так як втрачають можливість продавати шрифти кожному
          окремому користувачеві.

          На даному етапі загальноприйнятих механізмів завантаження шрифтів разом
          з Web-сторінками в Інтернеті ще не існує Однак дещо в цьому напрямі вже
          зроблено:

          за адресою www.microsoft.com/opentype розташована початкова сторінка
          розділу, присвяченого роботі з шрифтами в Web. OpenType - це спільна
          ініціатива Adobe і Microsoft, мета якої - створити єдині формати
          шрифтів, що завантажуються, як для систем з підтримкою PostScript, так і
          систем з підтримкою TrueType.

          По посиланнях з цієї сторінки ви зможете також завантажити утиліту під
          назвою Microsoft's Web Embedding Fonts Tool (WEFT). Ця утиліта дозволяє
          створювати шрифти, які стискаються та завантажуються і які можна
          використати для всього Web-сайта.

          за адресою http://www.truedoc.com/розташований сайт, присвячений
          TrueDoc, - винаходу фірми Bitstream, lnc. Web-дизайнери можуть
          конвертувати шрифти, встановлені на їх системах, в спеціальний формат
          файлів TrueDoc (цей процес називається спаленням - burnmg) і розміщувати
          отримані файли TrueDoc на Web-сайтах. Браузери відвідувачів можуть
          завантажувати файли TrueDoc і використовувати вміщені в них шрифти для
          відображення Web-сторінок цього сайта.

          При створенні файлу в форматі TrueDoc вам необхідно вказати ім'я
          Web-сайта, на якому він буде використовуватися (наприклад,
          www.whatever.com), або шлях до файлів /-whoever/. В результаті файли
          TrueDoc можна використати тільки для одного Web-сайта (або шляху). Таке
          обмеження було додано спеціально, щоб всі власники Web-сайтів купували
          шрифти. Але в результаті, якщо користувач відвідує декілька сайтів, на
          яких використовується один і той же шрифт, йому доведеться завантажувати
          даний шрифт стільки разів, скільки сайтів він відвідає.

          На сайті Bitstream пропонують завантажити безкоштовні шрифти, які можна
          використати на будь-яких вузлах. Там же можна завантажити і елемент
          управління ActiveX, який дозволяє Internet Explorer використати механізм
          TrueDoc.

          за адресою www.hexmac.com можна завантажити утиліту під назвою
          Typograph. Ця утиліта дозволяє конвертувати встановлені на вашому
          комп'ютері шрифти в формат TrueDoc. Однак при цьому стежте за тим, чи
          дозволяє вам ліцензія на придбані вами шрифти використовувати їх таким
          чином.

          Вертикальне позиціювання тексту відносно рядка.

          Атрибут vertical-align дозволяє підіймати або опускати проміжок тексту
          відносно його звичайного положення на рядку. Для цього атрибута CSS в
          якості значення можна використати наступні ключові слова:

          baseline. При використанні цього ключового слова лінія шрифту підлеглого
          (що оточується) об'єкта відповідає лінії шрифту батьківського (що отчує)
          об'єкта. Це - нормальне положення.

          sub. Лінія шрифту підлеглого об'єкта відповідає лінії шрифту оточуючого
          текст для нижніх індексів.

          superscnpts. Лінія шрифту підлеглого об'єкта відповідає лінії шрифту
          оточуючого тексту для верхніх індексів.

          text-top. Лінія шрифту підлеглого об'єкта відповідає верхній границі
          навколишнього тексту.

          middle. Центр звичайних символів підлеглого об'єкта (звичайні символи -
          це символи без виступів вгору або вниз, наприклад, х) відповідає лінії
          шрифту оточуючого тексту плюс 1/2 х-висоти оточуючого тексту (х-висота -
          це висота все того ж символа х).

          text-bottom. Нижня границя підлеглого об'єкта відповідає нижній границі
          оточуючого об'єкта.

          percentage. Підлеглий текст підіймається або опускається по відношенню
          до оточуючого на частину висоги оточуючого тексту Наприклад, 50%
          означає, що текст буде піднятий на половину висоти оточуючого тексту.

          quantity За допомогою цього ключового слова можна вказати положення
          тексту відносно оточуючого в будь-яких одиницях вимірювання CSS. Саме це
          ключове слово звичайно застосовується при використанні поля Position
          вкладки Character Spacing.

          Настройка властивостей CSS для абзаців

          У CSS передбачені потужні засоби для форматування абзаців. Відкрити
          діалогове вікно Paragraph (Мал. 24) можна, скориставшись командою
          Paragraph в меню Format. Відразу зазначимо, що команди Border і
          Numbering в цьому ж списку надають у ваше розпорядження додаткові засоби
          для оформлення абзаців

          Мал. 24. Діалогове вікно Paragraph призначене для налагодження
          властивостей CSS для абзацу

          Висота рядків

          Атрибут line-height дозволяє вказувати висоту рядків в абзаці (не
          плутайте її з висотою самого шрифту, зовні вона буде відображатися як
          відстань між рядками по вертикалі). У FrontPage для цього
          використовуються пікселі, але CSS також дозволяє вказувати висоту рядка
          в відсотках або як множник по відношенню до висоти шрифту (наприклад,
          120 або 1,2)

          При вказівці висоти рядка в процентах інші об'єкти успадкують не
          значення в процентах, а отриману абсолютну величину. Ось приклад:

          {font-size: 12pt; line-height:120%; }fineprint { font-size: 10 pt; }

          За умовчанням висота рядка для стилю буде дорівнювати 120% x l2 точок
          =14,4 точки. Оскільки висота рядка за умовчанням задана в процентах,
          стиль Fineprint успадкує висоту, вказану в абсолютних одиницях
          вимірювання - крапках. При цьому висота рядка для даного стилю буде
          рівна 14, 4.

          {font-size: 12pt; line-height: 1,2; }fineprint { font-size: 10pt; }

          У другому прикладі за умовчанням висота рядка для стилю буде така ж (1,2
          x 12 точок =14,4 точок). Однак, оскільки висота рядка вказана не в
          процентах, а як множник, стиль Fineprint успадкує не абсолютне значення,
          а цей множник. У результаті реальна висота рядка буде рівна 1,2 x 10 =12
          точок. Така висота рядка по відношенню для шрифту розміром в 10 точок є
          прийнятнішою.

          Відступи

          У CSS передбачені ключові слова для управління як відступами білого
          кольору навколо об'єктів (margins), так і невеликими буферними зонами
          навколо об'єктів (padding). Звичайне компонування з використанням
          відступів, буферних зон і самих об'єктів показане на мал. 25.

          Мал. 25. Приклад використання відступів і буферних зон

          Content area (зона розміщення об'єкту) - та область, в якій розміщені
          самі об'єкти Web-сторінки, наприклад, текст, зображення або таблиця.

          Padding (буферна область) - оточує зону розміщення вмістимого. При цьому
          фон буферної області та інші її властивості співпадають з властивостями
          області розміщення вмістимого.

          Border (рамка) - розташована між буферною зоною і відступами (а не між
          зоною розміщення вмістимого і відступами напряму).

          Margins (відступи) - оточують буферну зону і рамку (якщо вона є). На
          відміну від буферної зони, фон якої співпадає з фоном, використаним для
          зони розміщення вмістимого, фон відступів співпадає з фоном оточуючих
          областей сторінки.

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

          Використання рамок в CSS

          Для настройки рамок у FrontPage є вкладка Borders діалогового вікна CSS
          Borders and Shading (яке можна відкрити, скориставшись командою
          Borderand... з меню Format, див. мал. 21). Вкладка Borders показана на
          мал. 26.

          Мал. 26. Вкладка Вогders дiалогового вікна CSS Borders and Shading

          Як скористатися засобами цієї вкладки:

          Двічі клацніть мишкою по одному з варіантів в групі Setting:

          None означає, що рамки використовуватися не будуть. У цьому випадку
          ніякі додаткові настройки вам не потрібні;

          Box означає, що виділений вами об'єкт буде обведений рамкою зі всіх
          чотирьох сторін;

          Custom означає, що ви можете вибрати рамку тільки з однієї, двох або
          трьох сторін.

          Виберіть відповідний стиль для рамки в списку Style. При цьому в полі
          Preview відразу ж відобразиться зроблений вами вибір.

          Використайте стандартний набір діалогових вікон Color для вибору кольору
          рамки.

          Поле Width дозволяє задавати товщину рамки.

          Якщо ви вибрали Custom в групі Setting (або просто вирішили скористатися
          таким підходом), ви можете скористатися значками навколо головного
          зображення в полі Preview. Ці значки дозволяють застосовувати рамки до
          різних сторін об'єкта.

          Група Padding на цій вкладці дозволяє задавати розмір буферної області з
          різних сторін об'єкта.

          Якщо ви працюєте з рамками CSS в режимі коду HTML, звичайно замість
          більш докладних атрибутів, наведених в табл. 9, простіше використати
          більш загальні атрибути border і padding. Наприклад, по значенню:

          special { border; 2px solid #900; } нічим не буде відрізнятися від
          довшого рядка:special { border-width: 2px; border-style; solid;
          border-color; #900; }

          У більшості випадків не обов'язково дотримуватися чіткого порядку для
          вказівки атрибутів рамки. Браузер сам зможе розібратися, що імена стилів
          відносяться саме до стилів рамки, значення кольору - це колір рамки і т.
          д. Однак, якщо вам необхідно вказати одночасно і товщину рамки, і ширину
          буферної зони, значення для них в одиницях вимірювання CSS необхідно
          розташовувати в певному порядку.

          Друга вкладка діалогового вікна Borders and Shading, яка називається
          Shading, дозволяє настроїти затінення (або фон). Ця вкладка показана на
          мал.27.

          Мал. 27. Вкладка Shading діалогового вікна Borders and Shading

          Списки CSS

          Для роботи зі списками у FrontPage є діалогове вікно Bullets and
          Numbering (яке можна відкрити, скориставшись командою Numbering з меню
          Format, див. мал. 21). Це діалогове вікно показане на мал. 28.

          У цього діалогового вікна є три вкладки:

          Вкладка Picture Bullets призначена для використання в якості символа
          початку елемента списку вибраного вами зображення. Шлях до цього
          зображення можна вказати в полі Picture (або просто вибрати зображення,
          скориставшись кнопкою Browse).

          Вкладка Plain Bullets надає у ваше розпорядження чотири стандартних
          символи для початку елемента списку. Зверніть увагу, що можна вибрати і
          маркірований список без яких-небудь маркерів.

          Вкладка Numbers призначена для роботи з нумерованими списками. На ній ви
          можете вибрати один із шести стандартних варіантів нумерованих списків

          Мал. 28. Діалогове вікно Bullets and Numbering

          Спільне використання каскадних таблиць стилів

          У CSS передбачені два способи, які дозволяють двом різним групам
          Web-сторінок спільно використовувати один і той же набір стилів. При
          використанні першого методу в розділ Head кожної сторінки, для якої ви
          хочете використати загальний набір стилів, вміщується посилання на
          документ-джерело цих стилів, наприклад:

          Вставка таких тегів виготовляється в режимі коду HTML. При цьому тег
          розміщується на новому рядку безпосередньо після тега .
          Файл-джерело (в нашому випадку це sharecss.css) може містити тільки
          вирази CSS.

          На жаль, цей метод має два істотних обмеження: в кожному файлі може бути
          тільки одне подібне посилання, і, крім того, ви не зможете в документі
          використати інші стилі CSS. Якщо ви порушите це правило, браузер запитає
          відвідувача Web-сайта про те, який набір стилів він вважає за краще
          використати. Навряд чи вам це потрібно.

          Другий метод полягає у використанні команди @import в звичайній таблиці
          стилів, наприклад:

          Використання цього методу дозволяє уникнути обмежень першого методу (з
          використанням команди link). При цьому ним можна користуватися, взагалі
          не вдаючись до редагування коду HTML. Ось як виглядає його застосування
          на практиці:

          Створіть файл з набором потрібних вам стилів CSS, а потім збережіть його
          з розширенням .css.

          Якщо вам треба використати цей набір стилів CSS тільки для деяких
          сторінок, виберіть ці сторінки. Можливо, простіше усього це зробити в
          режимі Folder View.

          У меню Format виберіть Style Sheet Links. Відкриється діалогове вікно,
          показане на мал. 29.

          У цьому діалоговому вікні встановіть перемикач в положення All pages,
          якщо ви хочете застосувати набори стилів до всіх сторінок Web, і
          Selected page(s), якщо ви плануєте застосувати їх тільки до вибраних.
          Потім виберіть файли .css, які ви хочете використати як джерела наборів
          стилів, за допомогою кнопки Add (якщо вони вже вибрані в списку URL, то
          цього робити не треба).

          Тепер вам залишилося тільки натиснути OK, і ви зможете використати
          загальні набори стилів для всіх вибраних вами Web-сторінок.

          Мал. 29. Діалогове вікно Link Style Sheet

          Створення Web-документів з використанням Word

          У Microsoft Word 200Х з'явилися нові можливості, які полегшують його
          застосування при роботі з Web:

          в діалоговому вікні Open при відкритті файлів тепер можна вказувати шлях
          не тільки до файлів на локальному диску, але і шлях до файлів в World
          Wide Web (точно так само, як це передбачено у FrontPage);

          як і FrontPage, Word 200Х може зберігати файли напряму на Web-сервері,
          якщо на цьому Web-сервері встановлені FrontPage Server Extensions (з
          урахуванням обмежень по безпеці);

          в порівнянні з попередніми версіями засоби перекладу документів з
          формату документів Word в формат HTML більш вдосконалені. Тепер Word
          може використати всі можливості HTML і CSS для максимального збереження
          початкового вигляду документа;

          інформація, яку неможливо використати за допомогою засобів HTML і CSS,
          тепер зберігається з використанням XML. У результаті Word може зберегти
          документ в форматі HTML, а потім знову відкрити його зі збереженням всіх
          властивостей початкового документа, наче файл був збережений в “рідному”
          форматі документів Word.

          Microsoft Word 200Х може зберігати документи в форматі HTML прямо на
          Web-сервері із встановленими FrontPage Server Extensions

          Для цього треба зробити наступне:

          У меню File Word 2000 виберіть Save As Web Page.

          Клацніть значок Web Folders в панелі з лівого боку.

          Двічі клацніть по необхідному Web-серверу в списку або, якщо потрібного
          сервера в цьому списку немає, введіть шлях до потрібної папки на цьому
          сервері в полі File Name (наприклад, http://myserver.com/myfolder).

          Якщо ви не хочете, щоб ваш документ знаходився прямо в кореневому
          каталозі Web-сервера, вкажіть (або виберіть) шлях до FrontPage Web або
          до папки, де буде знаходитися документ.

          Натисніть кнопку Save.

          Хоча Word 200Х робить все, що від нього залежить для передачі всіх
          особливостей документа за допомогою засобів HTML, іноді все-таки
          доводиться вдаватися до компромісів. Про це вас попередить діалогове
          вікно по типу показаного на мал. 32.

          Мал. 30. Якщо якісь особливості форматування документа при збереженні в
          форматі HTML будуть втрачені, Word 200Х попередить вас про них

          Після збереження ви зможете відразу ж переглянути результати у
          FrontPage.

          Зверніть увагу на два моменти:

          FrontPage - це не Microsoft Word, тому в режимі WYSIWIG у Front-Page
          зображення може відрізнятися від зображення того ж документа в Word.

          При збереженні складних файлів у форматі HTML разом з самим файлом HTML
          з'являється спеціальна папка з тією ж назвою (наприклад, для нашого
          файла fp2000productoverview.htm - це буде папка fp2000productoverview).
          У цій папці будуть зберігатися всі компоненти документа, які відповідно
          до вимог Web повинні зберігатися окремо (наприклад, зображення в
          форматах GIF і JPEG).

          Якщо ви зберегли файл на жорсткому диску, при розміщенні його на
          Web-сервері вам необхідно буде скопіювати на сервер не тільки сам файл,
          але і папку з його компонентами. Якщо ж ви зберігаєте файл прямо на
          Web-сервер, все буде зроблено автоматично.

          У деяких ситуаціях у вас можуть виникнути сумніви щодо того, яку
          програму потрібно застосувати для створення документа - Word чи
          FrontPage. При її вирішенні потрібно керуватися простим принципом: якщо
          ваш документ призначений в основному для використання у вигляді
          паперової копії, то кращий вибір - Word. Якщо ж ви створюєте саме
          Web-сторінку, то FrontPage, який спеціально призначений для цих цілей,
          зручніший.

          XML розшифровується як Extensible Markup Language. Його обговорення
          виходить за межі цього документу, але зараз можна зазначити, що XML
          складається з тегів, які можуть описувати дані в будь-яких документах, в
          тому числі й у Web-сторінках. Наприклад, ось як виглядає фрагмент коду
          XML, який вказує на те, що документ створений в Microsoft Word.

          Для браузерів, які не підтримують XML, подібний код буде виглядати як
          звичайний невідомий тег. У результаті цей тег буде проігноровано. Якщо ж
          браузер (або інша програма) розуміє теги XML, він може використати
          інформацію XML для своїх цілей

          Поради по дизайну: вибір шрифтів

          До вибору шрифтів потрібно віднестися зі всією серйозністю. Правильний
          підбір шрифтів зможе посилити враження від вашого Web-сайта, а
          неправильний - привести до того, що враження буде послаблене або зовсім
          зіпсоване.

          Спочатку у розробників Web-сторінок взагалі не було можливостей
          контролювати вибір шрифтів. Автор вказував стилі для ділянок тексту,
          наприклад Heading1 (заголовок першого рівня) або normal (звичайний
          текст), а підстановкою шрифтів для цих стилів займався вже браузер
          відвідувача Web. На практиці більшість шрифтів, що використовуються у
          Web були різними варіантами Times Roman і Courier.

          Вибір шрифту для звичайного тексту завжди представляє проблему, тому що
          більшість комп'ютерних моніторів відображають тільки 72 пікселі на дюйм.
          У результаті при використанні шрифтів схожого зображення просто не
          вистачає пікселів для того, щоб можна було їх відрізнити. Для деяких
          шрифтів такого вирішення не вистачає навіть на те, щоб зробити текст
          розбірливим. Тому до вибору шрифту для звичайного тексту завжди потрібно
          підходити з великою обережністю.

          Назви і заголовки, як правило, - більшого розміру по відношенню до
          звичайного тексту і використовувати художні шрифти для них простіше.
          Однак проблеми виникають і з ними. Головна проблема полягає в тому, що
          Web-дизайнер ніколи не може бути впевнений, що потрібний для нього шрифт
          встановлено на комп'ютері відвідувача Web. Загальноприйнятої технології
          завантаження шрифтів з Web досі так і не існує. У результаті багато
          Web-дизайнерів замінюють текст зображеннями, на яких заголовок або назва
          гарантовано виглядає так, як вони це планують, зі всіма витікаючими
          звідси недоліками.

          Існують загальні досить очевидні принципи роботи зі шрифтами. Однакові
          елементи сторінки повинні виглядати схоже, а різні - по-різному.
          Наприклад:

          всі заголовки першого рівня повинні виглядати однаково;

          весь звичайний текст повинен виглядати однаково;

          заголовки першого рівня повинні відрізнятися від звичайного тексту.

          Tе ж саме можна сказати по відношенню до гіперпосилань та інших
          елементів.

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

          Надмірний контраст вражає. Між всіма елементами Web-сторінки повинна
          бути певна схожість, те ж саме відноситься і до елементів на різних
          Web-сторінках, об'єднаних єдиною темою. Порушення цього правила звичайно
          приводить до того, що відвідувачеві Web-сайта доводиться переорієнтувати
          сприйняття на кожній Web-сторінці, що відволікає його від самого змісту
          Web-сайта.

          Є два звичайних способи досягти контрасту між різними ділянками тексту -
          використати напівжирне або курсивне зображення. Якщо напівжирним
          виділена якась частина звичайного тексту, як правило, це означає, що цій
          частині надається особливе значення. Курсивом же звичайно виділяються
          спеціальні терміни (особливо коли вони зустрічаються в перший раз).

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

          Підкреслення - це досить груба заміна курсиву. Цей метод виділення
          тексту залишився нам в спадщину від епохи пишучих машинок, коли
          можливості роботи зі шрифтами були зовсім обмежені. У наш час, коли
          курсив повністю доступний, використовувати підкреслення вже немає ніякої
          необхідності. Більш того, використання такого методу виділення тексту
          може навіть збентежити відвідувача Web, оскільки браузери часто
          виділяють гіперпосилання саме підкресленням.

          Головні засоби, які можна використати для досягнення контрасту між
          різними частинами тексту:

          Розмір (size). Як правило, розмір шрифту вимірюється в пунктах (points),
          де один пункт еквівалентний 1/72 дюйма. Розмір рівний відстані між
          верхньою точкою самого високого символа і найнижчою точкою символа, який
          більш усього видається вниз.

          Колір (color). Для тексту, як і для практично будь-якого елемента
          Web-сторінки, можна настроїти колір. Пам'ятайте, що колір, вибраний вами
          для тексту, повинен бути інтегрований із загальною колірною схемою
          сторінки.

          Гарнітура шрифту (typeface). У цей час розроблені тисячі гарнітур і
          кожний день створюються все нові і нові. Враховуючи те, що кількість
          символів в алфавіті обмежена, дивно, що автори шрифтів змогли створити
          таку кількість варіантів написання одних і тих же букв. Більш дивним є
          те, що читачі досі можуть їх розпізнати. Ось деякі характеристики, якими
          одні гарнітури шрифтів відрізняються від інших:

          Наявність або відсутність спеціальних рисок - засічок (serifs). Засічки
          - маленькі загострені риски на кінцях символів. Вони є, наприклад, в
          таких гарнітурах, як Times Roman і Garamond. В Arial і Helvetica їх
          немає.

          Нахил засічок (slant of serifs). Засічки можуть розташовуватися як
          паралельно напряму рядка, так і під кутом до нього.

          Товщина засічок (thickness of serifs). Засічки можуть бути настільки
          тонкими, наскільки це можливе, а можуть бути такої ж товщини, як і самі
          лінії, що створюють символи.

          Переходи штрихів (stroke transition). Штрихи - це лінії і їх сполучення,
          які і створюють символ. Перехід штрихів - це різниця між самою товстою і
          самою тонкою лінією, які утворюють символ.

          Нахил (stress). Під ним мається на увазі кут, під яким нахилена до рядка
          уявна лінія, що проходить через найбільш тонкі частини симетричних
          символів.

          Товщина ліній (weight). У поліграфії використовується також термін
          “насиченість”. Найбільш яскраво різниця в товщині шрифту виявляється при
          порівнянні звичайного і напівжирного зображення одного і того ж шрифту.
          Можливі й інші градації товщини. Деякі гарнітури шрифтів використовують
          більш товсті лінії, ніж інші, просто за своїй природою. У самих товстих
          шрифтів звичайно в назві фігурують слова “black” (чорний) або “ultra”
          (ультра). Загальне правило: чим товстіше, “важче” шрифт, тим більшу
          увагу він привертає. Однак дуже велика кількість “важких” шрифтів на
          сторінці знижує ефективність їх застосування.

          Напрям (direction). У цього терміну є відразу декілька значень.
          По-перше, він застосовується для позначення нахилених по відношенню до
          іншої частини сторінки або звивистих рядків (цим ефектом частіше
          зловживають, ніж використовують у справі). Крім того, цей же термін
          застосовується і по відношенню до загального компонування тексту.
          Наприклад, пропозиції або абзаци, які скомпоновані у високі і вузькі
          стовпці, мають велику вертикальну спрямованість, ніж текст, розташований
          по всій ширині сторінки. Вертикальне і горизонтальне вимірювання є і у
          рядків, і у стовпців в таблицях. Елементи в списках можуть бути
          розташовані горизонтально (як слова в пропозиціях) або вертикально (один
          над одним, як в більшості списків).

          Пропорційні (proportional) і моноширинні (monospaced) шрифти. Більшість
          гарнітур є пропорційними. Це означає, що одні символи ширші, ніж інші.
          Таку ситуацію потрібно визнати нормальною, якщо у вас немає якихось
          особливих міркувань відносно того, чому рядкова i повинна займати
          стільки ж місця на рядку, скільки і прописна W.Моноширинні гарнітури
          влаштовані по типу пишучої машинки: вони відводять на кожний символ
          однакове місце. Як правило, такі шрифти виглядають менш привабливо, ніж
          пропорційні, і читаються гірше. Однак використання таких шрифтів може
          виявитися доречнішим, наприклад, для лістингу програм або в інших
          ситуаціях, коли рядки тексту повинні бути розміщені чітко один під одним
          без використання таблиць і символів табуляції.

          Форма (form). Форма - це загальний контур символа в гарнітурі. Можна
          сказати, що форма - це об'єднання всіх властивостей шрифту,
          перерахованих вище. Прописні і рядкові символи одного і того шрифту
          мають різну форму.

          Стиль (style). Це властивість, яка об'єднує все, що не було розглянуто
          вище. При створенні шрифту важливий як художній, так і технічний підхід.
          Під стилем шрифту розуміється те, що відноситься до області мистецтва.

          Як правило, у кожного шрифту є назва, але в більшості випадків вона
          нічого не повідомляє про його властивості. У деяких шрифтів (наприклад,
          Garamond або Baskerville, які були названі в честь своїх творців більше
          як століття тому) багата історія, інші ж з'явилися на наших очах.
          Давайте розглянемо найбільш загальні категорії шрифтів:

          Oldstyle (шрифти старого стилю). Це шрифти, що добре читаються, мають
          багату історію, а тому широко розповсюджені. У них використовуються
          похилі засічки для рядкових символів, помірні переходи штрихів і
          невеликий нахил зліва. Найбільш поширені гарнітури цієї категорії -
          Times Roman і Garamond.

          Modern (модерн). У цих шрифтах використовуються дуже великі переходи
          штрихів, нахил - чітко вертикальний по відношенню до рядка, а засічки
          направлені горизонтально. У результаті текст виглядає холоднішим і
          механістичнішим, ніж при використанні шрифтів старого стилю. Поширені
          приклади шрифтів модерн - Bodoni і Elephant.

          Slab serif (шрифти з укрупненими засічками). Ці шрифти були спеціально
          розроблені для кращого читання. У них використовуються малі переходи
          штрихів, більш товсті засічки, але нахил залишається вертикальним, як і
          в шрифтах модерн. Як приклади таких шрифтів можна назвати Century
          Schoolbook, New Century Schoolbook і Clarendon.

          Sans serif (без засічок). У цих шрифтах взагалі не передбачені ні
          засічки, ні переходи шрифтів, ні нахили. У результаті шрифти набувають
          точного, технічного вигляду, але, як правило, читаються гірше, ніж
          шрифти із засічками. Контраст між шрифтами із засічками і без засічок
          дуже великий. Тому часто шрифтами без засічок виділяються заголовки, в
          той час як основний текст набраний шрифтом із засічками. Приклад шрифтів
          без засічок - Arial і Helvetica.

          Script (рукописні). До цієї категорії відносяться шрифти, які з першого
          погляду наводять на думку про рукописний текст і каліграфію. Ці
          високохудожні шрифти частіше за все застосовуються для запрошень і
          рекламних оголошень. Звичайно такі шрифти читати важче, ніж інші, і їх
          складно відобразити на екрані монітора. При створенні Web-сторінок до
          використання таких шрифтів завжди треба підходити з великою обережністю.
          Типовий приклад такого шрифту - Zapf Chancery.

          Decorative (декоративні). До цієї категорії відноситься безліч
          стилізованих шрифтів, які цілком можна назвати химерними. Вони
          привертають до себе увагу, але їх важко читати, тому зловживати ними не
          треба. Такі шрифти повинні бути великими - маленькі декоративні шрифти
          при низькій здатністі монітору виглядають просто жахливо. За допомогою
          таких шрифтів можна створювати привертаючі увагу логотипи, заголовки і
          “шапки” для іншого тексту, але пам'ятайте про те, що перевантажувати
          сторінку такими шрифтами не треба. Приклад такого шрифту - Matisse ITC.

          Symbol (символьні). Ці шрифти спеціально призначені для роботи з різними
          символами - від поширених до абсолютно некорисних. У них ви не знайдете
          звичайних букв, цифри або символи пунктуації. Реально такі шрифти
          нагадують швидше колекцію значків. Застосування такого шрифту до
          звичайного тексту приводить до появи на сторінці випадкового набору
          самих різних символів. Приклад такого шрифту приведений на мал.31.

          Мал. 31. Приклад символьного шрифту

          Такі шрифти звичайно призначені для паперових документів. Як правило, їм
          немає місця на Web-сторінках. Якщо ж вам знадобилося використати
          службові символи і значки, то доцільнішим варіантом є кліпарт.

          Знати відмінності між шрифтами необхідно, щоб знати, які набори шрифтів
          можна використати для Web-сторінки. На практиці використання різних
          шрифтів на одній сторінці цілком допустиме, але при цьому контраст між
          різними шрифтами повинен бути чітким.

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

          Похожие записи