“Навчання без міркування – даремне,

міркування без навчання – небезпечне”.

Конфуцій

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

Мета.

Навчальна. Ознайомити учнів з oзначенням й застосуванням стилів, зв’язування аркушів стилів з гіпертекстовими документами, поняття про об’єктну модель документа DOM і мову DHTML, поняття про події та обробку подій, що підтримується мовою DHTML.

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

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

Вивчення нового матеріалу.

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

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

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

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

Таблиці каскадних стилів (CSS, Cascading Style Sheets) містять параметри форматування частини або всього тексту веб-сторінки. Якщо таку таблицю підключено, то у тегах можна просто вказу­вати посилання на неї, а не задавати велику кількість атрибутів. У цьому випадку стилі названі каскадними тому, що в одному документі їх можна описати кілька, і браузер використовуватиме їх каскадом відповідно до їхнього пріоритету.

Таблиці каскадних стилів — це передусім набори параметрів, що змінюють властивості тегів HTML. Такі набори називають ще ви­значеннями тегів. Наприклад:

Р {font-size: 40pt; color: green; font-family: "Comic Sans MS"}

Тут задано параметри для тегу абзацу <Р>, які встановлюють розмір шрифту 40 пунктів, колір шрифту — зелений, гарніту­ру — Comic Sans MS. У документі достатньо ввести теги <Р>...</Р> із текстом абзацу, щоб автоматично надати йому зазначеного оформлення.

Таблиці каскадних стилів дають змогу отримати результати, яких неможливо досягнути звичайними засобами HTML. У наведено­му прикладі встановлено розмір шрифту 40 пунктів, хоча в мові HTML за допомогою атрибута SIZE можна задати для шрифту максимальний розмір 7, що відповідає 36 пунктам.

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

Параметрів форматування, які можна задавати за допомогою сти­лів, досить багато. Це, зокрема:

• background — колір тла;
• font-family — стиль шрифту (гарнітура);
• font-size — розмір шрифту;
• font-weight — жирність шрифту;
• color — колір шрифту;
• t ext - de c o r at i o n — оздоблення тексту;
• text-align — вирівнювання тексту;
• margin-top — відступ від верхнього рядка абзацу;
• line-height — міжрядкова відстань.

Застосування каскадних стилів у HTML-документах

є три способи зв'язку каскадних стилів із HTML-документом: під­ключення зовнішньої таблиці стилів; розташування опису стилів у розділі HEAD документа; задавання властивостей стилів безпосе­редньо в тегах абзаців чи заголовків.

Підключення зовнішньої таблиці стилів

Зовнішня таблиця стилів (External Style Sheet) — це текстовий файл із розширенням .css. Його підключають до HTML-докумен­та за допомогою тегу <LINK>, який записують у розділі <HEAD>, наприклад:

<LINK REL = "stylesheet" TYPE = "text/css" HREF = "mystyle.css">

Атрибути REL та TYPE вказують браузеру на те, що сторінка ви­користовує таблиці каскадних стилів. Атрибут HREF задає адресу файлу (mystyle.css).

Вправа 5.1

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

1. 1.   Відкрийте текстовий редактор Блокнот і введіть таке визна­чення тегу <Р>:

Р {font-size: 40pt; color: green; font-family: "Comic Sans MS"}

2. Збережіть файл з іменем mystyle.css.
3. Створіть у Блокноті файл такого змісту:

<HTML>

<HEAD>

<LINK RE L = ” sty lesheet ” TYPE = ”text/css”

HREF=”mystyle.css”>

<TITLE>Приклад використання CSS</TITLE>

</HEAD>

<BODY>

<Р>Цєй текст оформлено відповідно до таблиці стилів, яка міститься у файлі mystyle.css: розмір шрифту — 40 пунктів, колір шрифту — зелений, а гарнітура — Comic Sans MS.</P> </BODY>

</HTML>

4. Збережіть цей файл з іменем pryklad1.html у тій самій папці, що і mystyle.css.
5. Відкрийте файл pryklad1.html у вікні браузера (рис. 5.1). Як бачите, хоча в цьому документі не задано жодних параметрів для тегу <Р>...</Р>, текст абзацу набув нових властивостей, які описані в зовнішній таблиці стилів mystyle.css.

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

Використання стилів внутрішньої таблиці

Внутрішню таблицю стилів (Embedded Style Sheet) розміщують безпосередньо в розділі HEAD, у блоці, який обмежений тегами <STYLE> та </STYLE>.

<HEAD>

<STYLE>

Тегі {властивість 11: значенняіі; властивість 12: значення12; ...;

властивістьіп:значенняі1п}

Тег2 {властивість21: значення21; властивість22: значення22; ...; властивість2т: значення2т}

</STYLE>

</HEAD>

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

Визначимо стилі заголовків першого та другого рівнів із викори­станням тегу <STYLE>.

<HTML>

<HEAD>

<STYLE>

H1 {font-size: 48pt; color: red}

H2 {font-size: 20pt; color: blue}

</STYLE>

<TITLE>Приклад використання CSS</TITLE>

</HEAD>

<BODY>

<Н1>Для заголовка першого рівня визначено розмір 48pt, а колір тексту — червоний </Н1>

<Н2>Для заголовка другого рівня визначено розмір 20pt, а колір тексту — синій </Н2>

<Р>Для цього абзацу стиль не застосовано, для оформлення тексту використано атрибути за умовчанням.

</BODY>

</HTML>

У цьому описі стилю змінено оформлення заголовків Н1 та Н2. Зокрема, для першого призначено розмір 48 пунктів і червоний колір, а для другого — розмір 20 пунктів і синій колір. У вікні браузера цей документ матиме вигляд, як на рис. 5.2.

У таблицях можна створювати нові стилі, надаючи їм імена з крапкою перед першим символом. У тегах звертаються до тако­го стилю за іменем, використовуючи атрибут СLASS=ім'я_стилю, де ім'я записують вже без крапки. Для одного тагу можна вико­ристовувати декілька стилів форматування.

Наприклад, застосовуючи атрибут CLASS тегу </Р>, задамо для двох абзаців різні стилі: першому надамо розмір шрифту 38 пунк­тів, білий колір символів і оливковий колір тла, другому — роз­мір шрифту 46 пунктів, фіолетовий колір символів і рожевий колір тла.

<HTML>

<HEAD>

<STYLE>

.style1 {font-size: 38pt; color: white; background-color: olive}

.style2 {font-size: 46pt; color: magenta; background-color: mistyrose}

</STYLE>

<TITLE>Приклад використання CSS</TITLE>

</HEAD>

<BODY>

<P CLASS=stylel>До цього абзацу застосовано стиль stylel </Р>

<Р CLASS=style2>До цього абзацу застосовано стиль style2 </Р> </BODY>

</HTML>

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

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

Приклад 5.1.

Створення текстових ефектів за допомогою стилів

Визначимо для тегу <BODY> такий стиль: шрифт Arial чорного кольору розміром 16 пунктів. Внаслідок цього весь текст, що міс­титься між тегами <BODY> та </BODY>, буде автоматично відформа­тований відповідно до цих властивостей. Тепер визначимо стилі з іменами тінь, основа, шар1 і шар2. Текст запишемо в шарах, які накладаються. Спочатку відображатиметься шар тінь, а на нього накладатимуться шари основа, шарі та шар2. Порядок накладан­ня задано розташуванням фрагментів тексту в HTML-документі. У прикладі буде застосовано такі властивості:

• margin-top — відступ згори (за від'ємних значень можна забезпечити накладання фрагментів);
• color — колір;
• font-size — розмір шрифту;
• font-family — сімейство шрифтів (гарнітура);
• line-height — висота рядка.

Визначені в документі стилі мають такі параметри:

• .тінь — колір зі значенням #DBDBDB (світло-сірий), вирів­нювання по центру, відступ згори — 30 пікселів, розмір шриф­ту — 80 пікселів, висота рядка — 270 пікселів, гарнітура — Times;
• . основа — червоний колір шрифту, відступ згори — -230 пікселів, розмір — 70 пікселів, висота рядка — 250 пікселів, гарнітура — Times;
• .шарі — чорний колір шрифту, відступ згори-------------------- 100 піксе­лів, розмір шрифту — 50 пікселів, висота рядка 65 пікселів, гарнітура — Arial;
• .шар2 — зелений колір шрифту, відступ згори — 30 пікселів, розмір шрифту — 35 пікселів, висота рядка — 45 пікселів, гарнітура — Arial.

Для виділення частини HTML-документа використовують тег <DIV>. Він нічого не форматуе, а лише відзначає фрагмент тек­сту, який виступає як окремий об'єкт. Атрибут CLASS цього тегу дає змогу посилатися на стилі внутрішньої таблиці й тим самим задавати стиль подання тексту, розташованого між тегами <DIV CLASS...> та </DIV>.

<HTML>

<HEAD>

<TITLE>Приклад використання CSS</TITLE>

<STYLE>

BODY {color: black; font-size: 16px; font-family: Arial}

.тінь {color: #DBDBDB; text-align: center;; margin-top: ЗОрх; font-size: 80px; line-height: 270px; font-family: Times}

.основа (color: red; margin-top: -230px; font-size: 70px; line-height: 250px; font-family: Times}

.шарі {color: black; margin-top: -lOOpx; medium; font-size: 50px; line-height: 65px; font-family: Arial}

.шар2 {color: green; margin-top: ЗОрх; font-size: 35px; line-height: 45px; font-family: Arial}

</STYLE>

</HEAD>

<BODY>

Приклад використання каскадних стилів <CENTER>

<TABLE WIDTH=500 CELLPADING=0 CELLSPASING=0 B0RDER=0>

<TR>

<TD ALIGN=CENTER VALIGN=T0P>

<DIV CLASS=тінь>Текст із тінню</DIV>

<DIV CLASS=основа>Текст із тінню</DIV>

<DIV CLASS=шар1>Приклад тексту із тінню</DIV>

<DIV CLASS=шар2>Це приклад використання каскадних стилів</DIV> </TD> </TR>

</TABLE>

</CENTER>

</B0DY>

</HTML>

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

Вбудовані стилі

Вбудовані стилі (Inline Styles) вставляють у теги заголовків <Н1>... <Нб>, абзацу <Р>, тіла <BODY>, а також у теги <DIV>, <IMG> тощо за допомогою атрибута STYLE, в якому перелічують властивості та їх значення. Наприклад:

<Р STYLE="font-size: 48pt; color: yellow">

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

Приклад використання атрибута STYLE для форматування заго­ловка другого рівня:

<Н2 STYLE="font-size: 48pt; font-family: Дтіа1">Текст...</Н2>

Позиціювання елементів веб-сторінки за допомогою стилів

Розміщувати елементи на сторінці можна не лише за допомогою фреймів і таблиць — каскадні стилі надають для цього додаткові цікаві можливості.

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

• static — статичне; задане за умовчанням і передбачає роз­міщення чергового об'єкта на вільному місці після поперед­нього;
• relative — відносне; визначає розташування об'єкта віднос­но того місця, яке б він зайняв, якби для нього було викори­стане статичне позиціювання;
• absolute — абсолютне; передбачає розміщення об'єкта шля­хом задавання точного місця його розташування на сторінці.

Для відносного та абсолютного позиціювання використовують чотири властивості — left (ліворуч) та right (праворуч), які задають відступи для розміщення об'єкта по горизонталі, і top (згори) та bottom (знизу) — по вертикалі. Необхідно задавати

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

Якщо потрібна зміна стандартного порядку накладання, засто­совують шари. Шар об'єкта задають за допомогою властиво­сті Z-index, значенням якої можуть бути лише ціле число та auto (за умовчанням). Об'єкт із більшим значенням z-index розміститься поверх об'єкта з меншим значенням цієї власти­вості, перекриваючи його. Якщо ж об'єкти матимуть однакові її значення, то зверху розташується об'єкт, описаний нижче за текстом у HTML-документі.

Вправа 5.2

Розглянемо, як позиціювати три об'єкти-зображення і два фраг­менти тексту. Координати спеціально вибрані так, щоб об'єкти пе­рекривалися. Зауважте, що слід використовувати атрибут STYLE, а не тег <STYLE>.

1. У програмі Блокнот введіть такий текст веб-сторінки:

<HTML>

<HEAD>

<ТІ^Е>Позиціювання</ТІ^Е>

</HEAD>

<BODY>

<DIV STYLE="position: absolute; top: 0; left: 70; width: 50; height: 100">

<IMG SRC= "fly. jpg"></DIV>

<DIV STYLE="position: absolute; top: 10; left: 15; width: 600; height: 100">

<H1 STYLE="color : yellow">Повій, вітре, до схід сонця, до схід сонця, край віконця.</Hl></DIV>

<DIV STYLE="position: absolute; top: 60; left: 400; width: 50 ; height : 100">

<H1 STYLE = "color: blue">Чайка</Н1></DIV>

</BODY>

</HTML>

Тег <DIV> тут виконує роль контейнера: елементи, що міс­тяться в ньому, успадковують його властивості, зазначені в ат­рибуті STYLE. Перший контейнер містить зображення, тип роз­ташування якого є абсолютним, з нульовим відступом згори.

70 пікселів — відступ зліва; його ширина становить 50, висо­та — 100 пікселів. Другий контейнер містить текст «Повій, вітре, до схід сонця, до схід сонця, край віконця», він зміще­ний на 10 пікселів від початку сторінки вниз та на 15 вліво, ширина контейнера — 600, висота — 100 пікселів; завдяки ви­користанню тегу Н1 із атрибутом 8!УЬБ текст має відповідний до заголовка першого рівня розмір та жовтий колір. Третій контейнер зміщений на 60 пікселів униз та 400 ліворуч, ши­рина контейнера — 50, висота — 100 пікселів. Слово «Чайка» оформлене як заголовок першого рівня синього кольору.

2. Збережіть цей документ у файлі з іменем pryklad2.html. Ско­піюйте у папку з цим документом зображення fly.jpg (можна використати інший файл, але його назва має збігатися з на­звою в ИТМЬ-документі).
3. Відкрийте файл pryklad2.html у браузері (рис. 5.5) — контей­нери перекриваються згідно з розташуванням у документі.

4. Внесіть зміни у текст веб-сторінки, який стосується першо­го контейнера (із зображенням). Для цього клацніть правою кнопкою миші вільне місце сторінки у вікні браузера і вибе­ріть пункт Перегляд HTML-коду (View Source). У вікні редакто­ра, що з'явиться, внесіть такі зміни:

<DIV STYLE="position: absolute; top: 0; left: 7 0; width: 50; height: 100; z-index: 2">

<IMG SRC="fly.jpg"></DIV>

Решту документа залиште без змін. Хоча в тексті HTML-доку­мента зображення описане першим, завдяки тому, що йому присвоєно індекс із більшим номером, воно відобразиться по­верх інших об'єктів.

5. Збережіть внесені зміни (командою Файл > Зберегти), закрийте текстовий редактор і оновіть веб-сторінку за допомогою коман­ди Вигляд • Оновити або функціональної клавіші F5. Вигляд цього документа у вікні браузера показаний на рис. 5.6.

Отже, використання властивості z-index дає змогу відобра­жати об'єкти незалежно від порядку їх розташування в тексті HTML-документа.

Під час відображення сторінки може статися, що розміри еле­мента перевищують розміри наданого йому місця. Наприклад, текст і малюнок не вміщуються у виділений для них прямо­кутник. У таких випадках використовують властивість over­flow (переповнення). Вона може мати три значення:

• попе — якщо елемент вийде за межі наданого місця, він все одно буде показаний;
• clip — об'єкти, що виходять за межі, будуть обрізані;
• scroll — буде використано прокручування.

6. Відкрийте HTML-код сторінки і внесіть у другий контейнер, що містить текст «Повій, вітре, до схід сонця, до схід сонця, край віконця», такі зміни:

<DIV STYLE="posit ion: absolute; top: 10; left: 15; width: 220; height: 12 0; overflow: scroll">

<H1 STYLE="color: yellow">Повій, вітре, до схід сонця, до схід сонця, край віконця </Hl></DIV>

7. Збережіть зміни та оновіть веб-сторінку в браузері. Який ви­гляд вона матиме, показано на рис. 5.7.

Застосування стилів у програмі FrontPage

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

Створення та підключення зовнішньої таблиці стилів

Для створення зовнішньої таблиці стилів необхідно виконати та­кі дії.

1. Відкрити сайт, для якого потрібно створити цю таблицю. Для прикладу відкриємо веб-сайт юіупу, створений під час вико­нання практичної роботи № 7.
2. На панелі інструментів Стандартная (Стандартна) клацнути стрілку праворуч від кнопки Создание новой обьічной стра- ницьі (Створення нової звичайної сторінки), вибрати в меню команду Страница (Сторінка) і у діалоговому вікні, що від­криється, перейти на вкладку Таблицьі стилей (Таблиці стилів), яка містить шаблони таблиць стилів, пропоновані програмою FontPage (рис. 5.8).

3. Вибрати один із шаблонів таблиці стилів, наприклад Горошини (Горошини), і клацнути кнопку ОК. У вікні FrontPage відкриє­ться документ нов_стр_1.CSS. Він міститиме опис стилів, які ви­користовуватимуться для оформлення сторінок (рис. 5.9). Як уже зазначалося, стиль описується у такий спосіб: спочатку йде назва тегу об'єкта веб-сторінки (наприклад, гіперпосилання, заголовок, таблиця тощо) або ім'я створеного користувачем стиля (з крапкою попереду), а у фігурних дужках — парамет­ри його форматування.

4. Зберегти таблицю стилів, скориставшись командою Сохранить (Зберегти) меню Файл (Файл). У діалоговому вікні, що відкри­ється, в полі Имя файла (Ім'я файлу) ввести назву (наприклад, style 1) і клацнути кнопку Сохранить (Зберегти). У списку фай­лів сайту, на вкладці веб-узел (веб-вузол), з'явиться новий файл (stylel.css).

Після створення таблиці стилів її необхідно зв'язати зі сторінка­ми сайту. Для цього слід виконати такі дії.

1. Відкрити сторінку веб-сайту.
2. У меню Формат (Формат) вибрати команду Связи с таблицями стилей (Зв'язки з таблицями стилів). У верхній частині діало­гового вікна Связать с таблицями стилей (Зв'язати з таблицями стилів), що відкриється, розташовані два перемикачі — все страницы (всі сторінки) та выделенные страницы (виділені сто­рінки). Слід вибрати один із них залежно від того, потрібно з використанням таблиці стилів оформити всі сторінки сайту, чи лише поточну (рис. 5.10) (на вкладці веб-узел (веб-вузол) можна виділити кілька сторінок). Наприклад, виберемо пер­ший перемикач.

3. Клацнути кнопку Добавить (Додати). Відкриється діалогове вікно, в якому слід вибрати потрібну таблицю стилів (у нашо­му випадку — 8Іуібі.с88) і клацнути кнопку ОК. Ім'я файлу таблиці з'явиться у списку Адрес ЦКЬ (иЯЬ-адреса) діалого­вого вікна Связать с таблицей стилей (Зв'язати з таблицею сти­лів). Після клацання кнопки ОК, таблицю стилів буде підклю­чено до сторінок сайту відповідно до вибраного за допомогою перемикача режиму (у нашому випадку буде відкрито діалого­ве вікно з повідомленням про перезаписування всіх посилань на таблиці стилів, де потрібно натиснути кнопку Продолжить (Продовжити)). Застосувати стилі таблиці до виділених фраг­ментів веб-сторінки можна за допомогою списку Стиль (Стиль) панелі інструментів Форматирование (Форматування).

Перегляньте сторінки веб-сайту. Оскільки була вибрана опція все страницы (всі сторінки), до всіх елементів усіх веб-сторінок за­стосоване форматування із таблиці стилів. Відкрийте будь-який документ веб-сайту в режимі перегляду HTML-кодів. У розділі заголовків ви побачите рядок із тегом <LINK>, в якому записано адресу таблиці каскадних стилів:

<LINK REL="stylesheet" TYPE="text/css" HREF="stylel.css">

Внутрішня таблиця стилів та вбудовані стилі

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

Для створення та модифікації стилів внутрішньої таблиці вико­ристовують діалогове вікно Стиль (Стиль), яке відкривається за допомогою команди Формат • Стиль (Формат • Стиль). Застосувати стилі внутрішньої таблиці до виділених фрагментів веб-сторінки можна за допомогою списку Стиль (Стиль) панелі Форматирование (Форматування).

Вправа 5.3

Створимо два внутрішні стилі та застосуємо їх до різних фрагмен­тів тексту веб-сторінки.

1. Відкрийте сторінку веб-сайту, для якої потрібно створити внутрішні стилі. Це може бути, наприклад, головна сторінка веб-сайту «Рослини України».
2. У меню Формат (Формат) виберіть команду Стиль (Стиль). Відкриється діалогове вікно, яке у лівій частині містить спи­сок тегів і стилів, а у правій — приклади оформлених ними абзаців і символів.
3. Для створення нового стилю клацніть кнопку Создать (Створи­ти). Відкриється діалогове вікно Создание стиля (Створення стилю), де у поле Имя (Ім'я) необхідно ввести назву стилю. Введіть назву stylel — це буде стиль для форматування за­головка оливковим кольором.
4. Клацніть кнопку Формат (Формат), ш,о розташована в нижній частині вікна. Відкриється меню з п'ятьма командами. У разі їхнього вибору відкриваються діалогові вікна Шрифт (Шрифт), Абзац (Абзац), Граница (Межа), Нумерация (Нумерація) і Поло­жение (Розташування), які дають змогу настроїти відповідні параметри форматування.
5. Виберіть у меню кнопки Формат (Формат) команду Шрифт (Шрифт). У діалоговому вікні, що відкриється, виконайте такі дії:

а)  зі списку Шрифт (Шрифт) виберіть назву шрифту, який потрібно використовувати в оформленні заголовка, нап­риклад Trebuchet MS;

б)  використовуючи список Начертание (Написання), задай­те накреслення, вибравши значення полужирный (напів­жирний);

в)  виберіть розмір шрифту 24pt;

г)  скориставшись списком Цвет (Колір), виберіть із палітри оливковий колір;

д)  клацніть кнопку ОК.

6. У діалоговому вікні Создание стиля (Створення стилю) в об­ласті Описание (Опис) побачите опис параметрів створеного стилю (рис. 5.11). Натисніть кнопку ОК. 

7. Аналогічно створіть стиль style2 з такими параметрами: шрифт — Monotype Corsiva, розмір шрифту — 18 пунктів, написан­ня — напівжирне, колір символів — смарагдовий (бирюзо­вый). У діалоговому вікні Стиль (Стиль) з'являться назви обох створених стилів (рис. 5.12). Зауважте, що крапки перед їхні­ми назвами додано автоматично.
8. Уважно перегляньте сторінку в режимі відображення HTML- кодів. Ви побачите тег <STYLE>, в якому описані стилі stylel та style2:

<STYLE>

.Stylel {font-family: Trebuchet MS;

font-size: 24pt; color: #808000; font-weight: bold}

.style2 {font-family: Monotype Corsiva; font-size: 18pt; color: #008080; font-weight: bold}

</STYLE>

9. Застосуйте стиль stylel до заголовка, який розміщений у верх­ній клітинці таблиці. Для цього в режимі перегляду Конструк­тор (Конструктор) виділіть його, розкрийте список Стиль (Стиль) панелі Форматирование (Форматування) і виберіть зна­чення stylel. Заголовок змінить вигляд, при цьому в HTML- коді сторінки зміниться опис тегу <Н1>:

<Н1 CLASS=style1><I>PoMHHH України</І>&nbsp</H1>

10. В аналогічний спосіб застосуйте стиль style2 до маркованого списку; це буде рівнозначно доданню до кожного елемента списку атрибута CLASS= style2.
11. Збережіть зміни, перегляньте сторінку у вікні браузера.

До тексту та об'єктів веб-сторінки у FrontPage можна застосову­вати також вбудовані стилі. Для виділених фрагментів тексту це роблять за допомогою діалогових вікон для форматування симво­лів та абзаців Шрифт (Шрифт) і Абзац (Абзац): після вибору пот­рібних параметрів атрибут STYLE з відповідними властивостями буде автоматично додано до тегів фрагмента.

Для визначення вбудованого стилю виділених об'єктів використо­вують кнопку Стиль (Стиль) у діалогових вікнах їхніх властиво­стей, які відкривають за допомогою команди Формат • Свойства (Формат • Властивості). Після клацання цієї кнопки відкриваєть­ся діалогове вікно Изменение стиля (Змінення стилю), подібне до вікна Создание стиля (Створення стилю) (рис. 5.11), в якому ство­рюють чи змінюють вбудований стиль об'єкта. Для задания його параметрів можна використовувати стилі внутрішньої таблиці цієї веб-сторінки, а також діалогові вікна, що відкриваються після вибору команд меню кнопки Формат (Формат).