Практична робота № 5

Мета. Створити сайт із графічною навігаційною панеллю.

Хід роботи

1. Створіть рисунок для навігаційної карти за допомогою графічного редактора.

Рисунок створіть аналогічно до наведеного вище. Уточніть координати гарячих областей і перепишіть їх у зошит.

2. Запишіть html-файл для навігаційної карти і виконайте його. Поекспериментуйте з картою.

3. Створену навігаційну карту розташуйте у лівому фреймі деякого сайту. Наповнення сайту придумайте самостійно.

4. Забезпечте відображення сторінок у правому фреймі. Для цього використайте у тезі <AREA> параметр TARGET ="right".

Проект 4. Підберіть у бібліотеці, що є на комп'ютері, рисунок (на весь екран), який може бути основою навігаційної карти. Рисунок модифікуйте за допомогою графічного редактора, наприклад, створіть текстові написи на ньому. При думайте структуру сайту, створіть відповідну навігаційну карту і поекспериментуйте з нею.

Таблиці стилів

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

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

Таблиці стилів користувач зазвичай створює окремо від htmj-файлу. Під час створення html-файлу він концетрує ува­гу на змісті сторінки, а не на її зовнішньому вигляді, а під час створення таблиці стилів — навпаки. Отже, стилі дають змогу розмежувати етапи створення html-файлу й удоскона­лення зовнішнього вигляду сторінки.

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

Розглянемо три способи такої взаємодії:

1) зв'язування,

2) імпортування,

3) вбудовування.

1. Зв'язування. Таблицю стилів створюють і зберігають в окремому текстовому файлі з розширенням сss. Таку таблицю стилів називають зовнішньою. Щоб зв'язати основний файл з таблицею стилів, у середині тега <HEAD> застосовують одинарний тег <LINK> з інформацією про таблицю:

<HEAD>

<L1NK HREF =="адреса таблиці стилів"

TYPE - "text/сss"

REL = "stylesheet"

TITLE = "назва таблиці стилів"> </HEAD>

Параметри TYPE і REL мають наведені вище стандартні значення, які означають, що деяка таблиця стилів буде ство­рена мовою CSS як текстовий файл. Таблиця стилів може знаходитися на локальному комп'ютері або будь-де в мережі. У другому випадку адресу задають, наприклад, так: http:/www.microsoft, com/.../сss/beststyle.сss.

2. Імпортування. Це те ж саме, що і зв'язування, але вза­ємодію файлів забезпечують засобами тегу <STYLE> і команди @import URL("адреса таблиці стилів"), які розглянемо далі.

3. Вбудовування. Якщо таблицю створено лише для де­якого конкретного html-файлу, то її розташовують у цьому файлі за допомогою тега-контейнера <STYLE>. Це звужує рамки застосування таблиці, але суттєво прискорює функціо­нування сторінки. Таку таблицю стилів називають внутріш­ньою або вбудованою. Таблицю стилів можна застосувати або до всього файлу, або його частини, або до окремого тега.

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

2. Мова СSS. Таблиця стилів - це текстовий файл, який створюють за допомогою мови CSS - Cascading Style Sheets - чи іншої. Є спеціальні програми, наприклад, AceExpert чи FrontPage тощо, які дають змогу створювати досить складні таблиці стилів навіть без знання цієї мови. Зазвичай таблицю стилів створюють засобами текстового ре­дактора, наприклад NotePad, як текстовий файл і дають йому деяку назву з розширенням сss.

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

Опис стилю - це послідовність пар

<властивість>: <значення>, які записують через крапку з комою та охоплюють фігур­ними дужками.

Отже, загальний вигляд правила такий:

Список тегів { властивість1 : Значення1;

властивість2 : значення2;

………

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

Приклад правила для одного тега: Р {color:red}.

Броузер відтворить на екрані тексти всіх абзаців черво­ним кольором.

Ось приклад складнішого правила для списку тегів:

НЗ, LI { color:green; font-family:pragmatica;

font-size:16pt; text-align:left;

border-style:ridge; border-width:2mm}

Броузер виведе всі заголовки третього рівня НЗ і еле­менти списків LI зеленим кольором, шрифтом Прагматика розміру 16 пунктів, вирівняє їх до лівого краю вікна й охо­пить рамкою товщиною 2 мм з видавленим контуром (ridge).

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

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

Властивість	Значення	Пояснення
Background-attachment	fixed	Тло фіксоване
	scroll	Тло прокручується
Background-color	red, green, #ffcc55	Колір тла
Background-image	URL("адреса графічного файлу для тла")
Background-repeat	repeat, repeat-x, repeat-y, no-repeat	Повторює зображення
Border-color	red, green, #ffcc55	Колір рамки
Border-style	none,dotted,dashed, solid,double,groove, ridge, inset, outset	Стиль рамки
Border-width	2mm, 3mm	Товщина рамки
Font-family	Arial, „Times New Roman Cyr", Serif	Назва шрифта
Font-size	12pt, 16pt	Розмір шрифта
Font-style	normal, oblique, italic	Вигляд курсивів
Font-variant	small-caps	Вигляд шрифта
Font-weight	normal, bold, bolder	Жирність шрифта
Word-spacing	1mm, 2mm	Відстань між словами
Letter- spacing	1 mm	Відстань між символами
Line-height	2 mm, 4 mm	Відстань між рядками
Text-align	Left, right, center, justify	Вирівнювання тексту
Text-decorate	none, underline, overline, line- through, blink	Оформлення тексту
Text-indent	2 cm	Абзацний відступ
Margin-top	4 mm тощо	Відступ зверху
Margin-right	4 mm тощо	Відступ справа
Margin- bottom	4 mm тощо	Відступ знизу
Margin-left	4 mm тощо	Відступ зліва
Padding-top	2 mm тощо	Величина вільного простору між стороною рамки і елементом у рамці
Padding-right	2 mm тощо
Padding-bottom	2 mm тощо
Padding-left	2 mm тощо
Height	4 cm тощо	Висота елемента
Width	14 cm тощо	Ширина елемента
Float	none, left, right	Обтікання об'єкта текстом
Color	red, green, #ffcc55	Колір елемента
Vertical- allign	top, super, middle, sub, botton	Вертикальне вирівнювання
List-style- image	URL("aдpeca графічного маркера списку")
List-style- position	inside, outside	Позиція маркера
List-style-type	disc, circle, square, decimal, lower- roman, upper-roman, lower-alpha, upper -alpha, none	Вигляд маркера (диск, круг, квадрат, арабські цифри, малі чи великі римські тощо)

Одиниці вимірювання, прийняті у мові CSS:
Назва одиниці	Пояснення
In	Дюйми (1 дюйм = 2,54 см)
Cm	Сантиметри
Mm	Міліметри
Pt	Пункти (1 см == 28 пунктів)
Рс	Піки ( 1 піка = 12 пунктів)
Рх	Пікселі
%	Відсотки від основи
Medium	Середній розмір (10 пунктів)
Small	На 50% менше, ніж medium
Large	На 50% більший, ніж medium
х-large	На 50% більший, ніж large
xx-large і т.д.	На 50% більший, ніж х-large

4. Групування властивостей і успадковування. Перше слово чи перші два слова у складній назві властивості є наз­вою групи (категорії) властивостей. Наприклад, font - назва групи властивостей font-family, font-size, font-style, font-vari­ant, font-weight. Групування властивостей дає змогу компакт­но задавати їхні значення, наприклад, так:

font:"times new roman", 12pt, italic, lighter.

Зауваження. Якщо значення властивості складається з декількох слів, то його беруть у лапки. Значення властивос­тей у групах margin і padding перелічуються у строгій послі­довності їх знаходження у таблиці. Наприклад,

Top right bottom left Margin: 1cm, 1cm, 2cm, 2cm

Деякі властивості можуть успадковуватися різними тегами. Властивості, що стосуються тега <BODY>, діють на всі інші відповідні теги сторінки. Кажуть, що ці теги успадкову­ють властивості тега <BODY>.

Наприклад, правило BODY {margin-left: 2cm} задає від­ступ зліва 2 см для всіх елементів сторінки. Тому, щоб при­тиснути заголовок другого чи іншого рівня до лівого краю, правило для нього має бути таким: H2{margin-left: -2 cm}.

5. Теги <STYLE>, <DIV> і <SPAN>. Внутрішні таблиці стилів описують у головному файлі в контейнері тега <HEAD>...</HEAD> за допомогою тега-контейнера -<STYLE> ... </STYLE>.

Приклад 1. Розглянемо головний файл з описом стилів:

<HTML>

<HEAD>

<ТІТLЕ>Застосування стилів</ТІТLЕ>

<STYLE TYPE="text/css">

тут записують правила </STYLE> </HEAD> <BODY>...</BODY>

</HTML>

Правила можуть починатися або з назви тега без куто­вих дужок, або з деякого слова користувача, перед яким є крапка. Це слово стає назвою типу, який можна застосувати в контейнері тега <BODY> до іншого тега, до текстового бло­ка, фрагмента тексту чи деякого елемента, наприклад,

.mystylel{color:red; font-size:40pt; margin-top:30рх}

.mystyle2{color:black; font-size:16pt; margin-top:-50px}

Для виокремлення текстового блока, до якого застосову­ватимуть стиль, призначений тег-контейнер <DIV пара­метр>.. </DIV> з параметром CLASS, який задає конкрет­ний стиль, що діятиме на блок:

<DIV CLASS=нaзва стилю> блок </DIV>.

Для виокремлення у блоці текстового фрагмента, для якого будуть переозначувати стиль, застосовують тег-контей­нер <SPAN>...</SPAN>:

<SPAN CLASS = назва стилю> фрагмент </SPAN>.

6. Перекривання текстів на рекламній сторінці. Розгля­немо застосування стилів для створення ефекту перекривання

текстів.

Нехай потрібно створити рекламну сторінку туристичної компанії „Мандри" зі Львова, яка запрошує відвідати Кіпр, Грецію, Італію. Створимо і застосуємо стилі так, щоб різно­кольорові назви країн частково перекривались.

Приклад 2. Розглянемо такі правила (стилі): body

.mystylel { coloured; font-size:120px; margin-top:120px; margin-left: 70px}

.mystyle2 { color:blue; font-size: 120px; margin-top: -90px; margin-left:200px}

.mystyle3 { color:green;font-size:120px;margin-top: -85px; margin-left:340px}

.mystyle4 { color:black;font-size:35px; font-style:italic; margin-top: -270px; margin-left:75px}

.mystyle5 { color:black; font-size:25px; margin-top:17px; margin-left:340px}

У цих стилях передбачено ефект перекривання текстів. Іншим способом цього ефекту з текстом досягнути не можна. Перекривання досягається застосуванням від'ємних значень властивості margin-top, що веде до підняття тексту вгору від­носно деякої базової лінії. Перший текст закінчуватиметься на висоті 120 + 120 = 240 пікселів. Наступний текст висотою 120 пікселів буде піднятий відносно лінії 240 пікселів на 90 пікселів і зсунутий вправо згідно із значенням властивості margin-left і т.д. Значення властивості margin-top успадковує наступний елемент. Таке успадковування дає змогу вирівню­вати елементи один відносно іншого. Отже, за допомогою стилів можна позиціювати елементи на екрані. Оскільки вимірювання у цьому прикладі ведеться в пікселях, то якісне зображення буде досягнуто на екрані з роздільною здатністю 1024x768 пікселів. Для інших екранів ефект буде втрачено.

Приклад 3. Розглянемо такий зміст рекламної сторінки:

<BODY>

<DIV CLASS=mystylel> Kinp</DIV>

<DIV CLASS=myatyle2> Греція</ DIV>

<DIV CLASS=mystyle3> Італія</ DIV>

<DIV CLASS=mystyle4> "Мандри" запрошують подорожувати </DIV>

<DIV CLASS=mystyle5> Тел.; (0322) 97-56-46</DIV>

</BODY>

Стиль тексту задається в контейнері <HEAD> контейнером

<STYLE TYPE=TEXT/CSS>, в якому подано команди вигляду

НАЗВАТЕГУ.НАЗВАСТИЛЮ{опис стилю} або SPAN {опис особливого стилю для виділеного тексту}

Параметри опису стилю (через двокрапку вказано можливі значення):

• FONT-FAMILY:ARIAL/COURIER NEW/TIMES NEW ROMAN - гарнітура;

• FONT-SIZE - розмір;

• FONT-WEIGHT:100/200/.../900/LIGHTER/NORMAL/BOLD/BOLDER - наповнення (товщи­на) літер;

• FONT-STYLE:ITALIC/NORMAL/OBLIQUE - написання літер;

• TEXT-DECORATION:NONЕ/ВLINК/OVERLINE/UNDERLINE/LINE-THROUGH - текст звичайний / «підкреслення» зверху / підкрес­лення знизу / перекреслення;

• TEXT-ALIGN:LEFT/RIGHT/CENTER/JUSTIFY — вирівнювання по горизонталі — по лівому краю, по правому краю, по центру, по ши­рині;

• VERTICAL-ALIGN:TOP/BOTTOM/MIDDLE/SUB/SUPER — вирівнювання по вертикалі — по верху, по низу, по середині, індекси верхні, індек­си нижні;

• COLOR — колір тексту;

• BACKGROUND-COLOR - колір тла.

Використання стилю в межах дії тегу задається атрибутом CLASS.

Наприклад.

<HTML>

<HEAD>

<TITLE> Використання стилів </TITLE>

<STYLE TYPE="TEXT/CSS">

SPAN{FONT-FAMILY:COURIER; FONT-SIZE:28;FONT-WEIGHT:BOLDER;

FONT-STYLE:OBLIQUE; TEXT-DECORATION:OVERLINE;

TEXT-ALIGN:CENTER; VERTICAL-ALIGN:SUB;COLOR:GREEN;

BACKGROUND-COLOR:YELLOW}

DIV.OWN1{FONT-FAMILY:ARIAL; FONT-SIZE:56;

FONT-WEIGHT:NORMAL; FONT-STYLE:NORMAL;

TEXT-DECORATION:NONE;TEXT-ALIGN:CENTER;

VERTICAL-ALIGN:SUB;COLOR:YELLOW ; BACKGROUND-COLOR:RED}

DIV.OWN2{FONT-FAMILY:TIMES NEW ROMAN; FONT-SIZE:72;

FONT-WEIGHT:BOLD; FONT-STYLE:ITALIC;

TEXT-DECORATION:BLINK; TEXT-ALIGN:CENTER;

VERTICAL-ALIGN:SUPER;COLOR:WHITE;

BACKGROUND-COLOR:GREEN}

</STYLE>

</HEAD>

<BODY CLASS=OWN1> Звичайний текст

<SPAN> Виділений стиль SPAN </SPAN>

<BR> <DIV CLASS=OWNl> Стиль OWN1 </DIV>

<DIV CLASS=OWN2> Стиль OWN2 </DIV>

</BODY>

</HTML>

Проект. 5. Придумайте і застосуйте стилі для створення оригінальної рекламної сторінки деякої фірми.

Проект 6. Побудуйте каскадну таблицю стилів і засто­суйте її до деякого html-файлу.