Урок 67                                                                        Інформатика 11(ІКТ)

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

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

Конфуцій

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

Мета.

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

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

Виховна. Виховувати наполегливість, естетичність у оформленні, грамотно висловлювати свої думки.

Тип уроку. Засвоєння нових знань і навичок.

Матеріали для роботи з учнями:

• Пасічник О.В., Пасічник О.Г. Основи веб-дизайну. Навч.посібник. - К.: Вид.група BHV, 2009.
• Мультимедійне обладнання;
• Презентація “Структура веб-сайтів, різновиди веб-сторінок”.

План

1. Організація початку уроку
2. Правила ТБ при роботі в кабінеті Інформатики.
3. Мотивація навчальної діяльності.
4. Актуалізація опорних знань.
5. Вивчення нового матеріалу.
6. Застосування знань.
7. Підсумки уроку.
8. Домашнє завдання.

Хід уроку

1. Організація початку уроку.

2. Інструктаж БЖД.

3. Актуалізація опорних знань.

Тестування

4. Мотивація навчальної діяльності.

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

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

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

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

Ви вже розглянули можливості форматування вмісту веб-сторінок за допомогою засобів мови 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), в якому ство­рюють чи змінюють вбудований стиль об'єкта. Для задания його параметрів можна використовувати стилі внутрішньої таблиці цієї веб-сторінки, а також діалогові вікна, що відкриваються після вибору команд меню кнопки Формат (Формат).

6. Застосування отриманих знань

Самостійна робота

7.  ПІДБИТТЯ ПІДСУМКІВ УРОКУ

8. ДОМАШНЄ ЗАВДАННЯ

1. Вивчити конспект.
2. Виконати завдання c.p.