Створення web-сторінок з використанням фреймів, навігаційних панелей, та таблиць стилів(CSS).
Теоретичні відомості.
Фрейми.
Поняття про фрейми. Якщо матеріали web-сайту структуризовані логічно за темами і мають базуватися на декількох сторінках з навігацією за допомогою гіперпосилань, то такий сайт реалізовують із застосуванням фреймів. Фрейм у перекладі з англійської означає кадр, рамка, прямокутна область. Фрейми поділяють вікно броузера на частини, в яких відображають зміст сторінок сайту. Кожній сторінці має відповідати свій html-файл. Кожна сторінка повинна мати логічний заголовок.
Наприклад, типовим є сайт, де вікно броузера поділене на дві вертикальні області. У вужчій (до 25% від ширини вікна броузера) лівій області відображають зміст сайту у вигляді гіперпосилань на конкретні сторінки, а в іншій - вибрану користувачем сторінку. Такий підхід до конструювання сайту дає змогу постійно бачити зміст сайту і переглядати його сторінки у будь-якій послідовності. Зміст чи у цьому випадку увесь лівий фрейм називають навігаційною панеллю. Навігаційну панель можна створити у верхній частині вікна броузера, справа чи де завгодно. Часто у верхній частині створюють третій вузький фрейм, де розташовують заголовок сайту, логотип фірми, рекламу, елементи WordArt, ActiveX чи Flash тощо.
Важливо на етапі конструювання сайту заздалегідь продумати фреймову структуру, визначитися з кількістю фреймів, їхніми розмірами, розташуванням і стартовим виглядом.
Файлова структура сайту з фреймами. Для створення сайту із застосуванням фреймів потрібно скласти як мінімум три html-файли: один основний і два чи більше допоміжні. Один допоміжний файл потрібний для заповнення стартовою інформацією лівого фрейму, інший - правого. Основний файл призначений для опису розташування фреймів у вікні броузера. Тут описується структура фреймів, зазначаються адреси html-файлів для кожного фрейму, а також пояснюється, що має відображатися на екрані, якщо якийсь давній броузер не підтримує фреймів.
Основний html-файл. Оскільки основний файл запускає сайт, то його прийнято називати index.html.
Приклад 1. Розглянемо типовий вигляд основного файла:
<HTML>
<HEAD>
<ТІТLЕ>Це мій сайт з фреймами </TITLE>
</HEAD>
<FRAMESET COLS="25% ,75% ">
<FRAME SRC"leftframe.html"
NAME= "left"

FRAMEBORDER="1"

BORDER = "15" 
MARGINHIGHT= "10"
'
MARGINWIDTH="10"
NORESIZE
<!—не можна пересувати межу-->
BORDERCOLOR = "red" >
<FRAME SRC - "rightframe.html"
NAME="right"  </FRAMESET>
<NOFRAME> 
Вибачте, цей сайт містить фрейми. Скористайтесь іншим броузером для його перегляду.
</NOFRAME>
</HTML>
Пояснимо дію використаних тегів та їхніх параметрів. Для поділу вікна броузера на декілька частин використовують тег-контейнер
<FRAMESET параметри>... </FRAMESET>
Параметрів є два: COLS і ROWS. Параметр COLS призначений для поділу вікна на вертикальні області (колонки), а ROWS - на горизонтальні. Розміри областей задають у відсотках до всього вікна, фіксовані - у пікселях. Наприклад, COLS = "25%, 75%" означає, що лівий фрейм займатиме чверть вікна на будь-якому моніторі.
Можна писати також COLS = "1*, 3*", де 1* саме тут означає одну з чотирьох частин екрана, або COLS = "2*, З*", де 2* означає дві з п'яти вертикальних частин екрана.
У фіксованому заданні COLS = "100,*", число 100 означає 100 пікселів, а * - решту екрана.
Більш складні конфігурації фреймів створюють шляхом поділу на фрейми деякого раніше створеного фрейму. У цьому випадку теги FRAMESET вкладають один в одний, наприклад, так:
<FRAMESET COLS - "25%, 75% ">
<FRAME описуємо лівий фрейм>
<FRAMESET ROWS= "25%, 75% >
<FRAME описуємо верхній правий фрейм>
<FRAME описуємо нижній правий фрейм>
</FRAMESET>
</FRAMESET>
У тезі <FRAME параметри> користувач описує конкретний фрейм. Обов'язковими тут є параметр SRC зі значенням адреси стартового html-файлу і NAME, значенням якого є назва фрейму. Цю назву придумує користувач, запам'ятовує її, оскільки вона використовуватиметься далі як значення параметра TARGET тега <А>.
Призначення деяких інших параметрів такі:
SCROLLING
Задає наявність чи відсутність смуг прокручування у вікні фрейму

FRAMEBORDER
Задає наявність меж між фреймами

BORDER
Задає ширину межі у пікселях

MARGIN
Задає величину відступів зверху і від бокових меж фрейму

NORESIZE
Забороняє змінювати розміри фрейму у вікні броузера.

Допоміжні HTML-файли. Коли основний файл спроектовано, створюють файли для кожного фрейму.
Нехай файл leftframe.html призначений для підтримки лівого фрейму і нехай він містить зміст сайту у вигляді текстових чи графічних гіперпосилань. Тег гіперпосилання має містити параметр TARGET, значенням якого є назва фрейму, що була зазначена в параметрі NAME з основного файлу. Цей параметр дає змогу пояснити броузеру, у якому фреймі слід відображати деяку сторінку сайту, що відповідає цьому гіперпосиланню. Нехай деяка сторінка має відображатися у правому фреймі. Гіперпосилання можна оформити різними способами: у вигляді звичайних текстових абзаців, заголовків, списків чи одностовпчикової таблиці.
Приклад 2. Файл leftframe.html може мати такий вигляд:
<HTML>
<HEAD>
<ТІТLЕ>Це мій лівий фрейм</ТІТLЕ>
</HEAD>
<BODY задаємо параметри стартової сторінки>
<НЗ> Сайт Васі Квакіна</НЗ><ВR>
<Н4>
<А HREF="file1.html" TARGET="right">
Моя біографія </А> <BR>
<А HREF="file2.html" TARGET="right">
Мої захоплення </А> <BR>
<А HREF="file3.html" TARGET="right">
Мої університети </А> <BR>
<А HREF="file4.html" TARGET="right">
Моя адреса </А> <BR>
</BODY>
</HTML>
Другий допоміжний файл, нехай rightframe.html, визначає зміст правого фрейму у момент відкривання сайту. Цей файл може містити будь-який текст чи графіку. Тут варто подати красиво оформлений заголовок сайту, рекламну інформацію тощо. Як такий файл можна, наприклад, використати filel.html. Тоді у правому фреймі у момент відкривання сайту буде відображатися перша сторінка проекту.
Приклад 3. Файл right.html може мати такий вигляд:
<HTML>
<HEAD><TITLE> Це правий фрейм</ТІТLЕ>
<BODY задаємо параметри для правого сторінки>
<Н2>ЗАПРОШУЄМО НА САЙТ ВАСІ </Н2>
</BODY>
</HTML>
На цьому проектування сайту з фреймами закінчується. Залишилося створити файли filel.html, file2.html, file3.html, file4.html тощо з описами робочих сторінок сайту.
Навігаційні карти
Основні поняття. Одним з головних завдань web-дизайну є створення навігаційної панелі для багатосторінкового сайту. Навігаційна панель може бути текстовою або графічною.
Графічна навігаційна панель - це рисунок, окремі частини якого, так звані гарячі області, слугують гіперпосиланнями на відповідні сторінки сайту. Різновидом такої панелі є навігаційна карта.
Для створення навігаційної карти можна взяти за основу відскановану фотографію чи векторний рисунок з зображенням декількох осіб чи об'єктів, клацання над якими мишею веде до відкривання відповідних сторінок сайту. Рисунок із зображенням кнопок чи просто тексту на деякому тлі можна створити засобами графічного редактора. Клацання мишею над окремими елементами такого рисунка-карти активізує те чи інше гіперпосилання. Найчастіше навігаційна карта має вигляд вертикальної чи горизонтальної смуги, розташованої у фреймі, однак є також навігаційні карти, що займають увесь екран чи значну його частину.
Те, що рисунок на екрані є навігаційною картою, можна розпізнати, провівши над ним укажчиком миші. Під час такої операції укажчик періодично перетворюватиметься на долоню, на екрані з'являтиметься текстова підказка, а у рядку стану броузера можна буде побачити URL-адреси відповідних ресурсів.
Опис навігаційної карти. Спочатку потрібно відсканувати фотографію або створити відповідний рисунок за допомогою графічного редактора у форматі gif, jpg чи bmp.
Приклад 4. Розглянемо карту Мій сайт, зображену на рис.1. Рисунок створено редактором Paint з метою демонстрації суті карти. Верхній лівий кут рисунка має координати (0,0). Перша координата горизонтальна, а інша - вертикальна. Одиниця вимірювання - піксель. Коло має радіус 50 пікселів. Центр кола знаходиться в точці з координатами (80, 110). Прямокутник із текстом Біографія має сторони завдовжки 130 і 55 пікселів. Він однозначно описується координатами двох діагонально протилежних вершин: (20, 175) і (150, 230). Прямокутник з текстом Навчання однозначно задається такими координатами (20, 260) і (150, 310), а з текстом Адреса - (20, 340) і (150, 390).
Створений графічний файл розташовують на диску і описують його у html-файлі web-сторінки за допомогою тега <IMG>. Цей тег має містити, крім уже відомих, новий параметр USEMAP = "#назва1", де назва1 - це назва карти. Наприклад,
Рис.1.
<IMG SRC -"адреса граф, файлу" USEMAP = "#mymap1">.
Тепер опишемо, як створити карту. Це роблять за допомогою тега
<МАР параметр>...</МАР>
У середині цього тега описують гарячі області карти. Тут застосовують параметр NAME, значенням якого є назва карти, у нашому випадку - #mymap1.
Гарячі області карти. У середині тега-контейнера <МАР>...</МАР> розташовують декілька одинарних тегів <AREA параметри>, що описують замкнені області карти, які мають служити гіперпосиланнями. Власне ці області називають гарячими. Для їхнього задання призначені такі параметри тега <AREA>:
HREF = "адреса ресурсу, який викликають"
ALT = "альтернативний текст-підказка"
SHAPE = "rect" або "circle" або "poly" або "default"
COORDS = "список координат області"
Гарячою областю може бути область, охоплена прямокутником (rect), або колом (circle), або багатокутником (poly), або все зображення (default). Список координат для прямокутника - це записані через кому координати діагонально-протилежних вершин, для кола - координати центра і значення радіуса, для багатокутника — координати всіх вершин. Координати гарячих і холодних областей достатньо задавати приблизно, а не точно, головне, щоб області не перекривались. Якщо ж області перекриваються, то область, яка описана першою, має пріоритет. Властивість пріоритетів використовують для створення в середині гарячої області холодного фрагменту. Для цього його описують без гіперпосилання перед описом гарячої області так:
<AREA NOHREF ALT = "це є опис холодної області" SHAPE = ... COORDS = ...>
Для створення карт є спеціальні програмні засоби, наприклад Live Image тощо. Вони дають змогу автоматизувати створення карти за допомогою шаблонів рисунків, фотографій, заготовок кнопок та інших графічних елементів.
Приклад html-файлу навігаційної карти. Наведемо текст html-файлу, що описує наведену вище навігаційну карту.
<HTML> <HEAD> <ТITLЕ> Навігаційна Kapтa </TITLE> </HEAD>
<BODY> <IMG SRC = "karta.bmp" TITLE = "Навігаційна карта"
BORDER = 5 WIDTH=167 HEIGHT = 425 USEMAP = "#MyMap1"> <MAP NAME="MyMap1">
<AREA SHAPE ="circle" COORDS ="80, 110,50" ALT ="Моя фотографія"
HREF ="mainpage.htm">
<AREA SHAPE ="rect" COORDS ="20,175,150,230" ALT ="Моя біографія"
HREF = "biography, htm ">
<AREA SHAPE ="rect" COORDS ="20,260,150,310" ALT ="Мої університети"
HREF =" studies, htm ">
<AREA SHAPE ="rect" COORDS ="20,340,150,390" ALT ="Моя адреса"
HREF =" address, htm ">
</MAP> </BODY> </HTML>
Таблиці стилів
Основні поняття. Таблиці стилів дають змогу спростити процес створення сторінок і поліпшити їхній зовнішній вигляд. Концепція стилів подібна до ідеї стилів, яка реалізована в сучасних текстових редакторах - текст спочатку вводять, а потім форматують, користуючись стилями. Застосування стилів дає змогу вводити на сторінку потрібні тексти та інші елементи, не задумуючись над їхнім зовнішнім виглядом і розташуванням.
За допомогою стилів можна змінити відстань між рядками, словами чи навіть символами, задати всі допустимі відступи для елементів, змінити розміри, вигляд та інші атрибути шрифтів, створити рамки, задати тло, створити ефекти накладання текстів, управляти порожнім простором тощо.
Таблиці стилів користувач зазвичай створює окремо від html-файлу. Під час створення html-файлу він концетрує увагу на змісті сторінки, а не на її зовнішньому вигляді, а під час створення таблиці стилів - навпаки. Отже, стилі дають змогу розмежувати етапи створення html-файлу й удосконалення зовнішнього вигляду сторінки.
Вважатимемо, що таблиця стилів уже створена. Тепер потрібно забезпечити взаємодію таблиці стилів та основного html-файлу.
Розглянемо три способи такої взаємодії: 1) зв'язування, 2) імпортування, 3) вбудовування.
1. Зв'язування. Таблицю стилів створюють і зберігають в окремому текстовому файлі з розширенням сss. Таку таблицю стилів називають зовнішньою. Щоб зв'язати основний файл з таблицею стилів, у середині тега <HEAD> застосовують одинарний тег <LINK> з інформацією про таблицю:
<HEAD>
<LINK HREF ="адреса таблиці стилів"
TYPE = "text/ess" REL = "stylesheet" TITLE = "назва таблиці стилів":</HEAD>
Параметри TYPE і REL мають наведені вище стандартні значення, які означають, що деяка таблиця стилів буде створена мовою CSS як текстовий файл. Таблиця стилів може знаходитися на локальному комп'ютері або будь-де в мережі. У другому випадку адресу задають, наприклад, так: http: /WWW. microsoft. com/... /css/beststyle.сss.
Імпортування. Це те ж саме, що і зв'язування, але взаємодію файлів забезпечують засобами тегу <STYLE> і команди @import URL("адреса таблиці стилів").
Вбудовування. Якщо таблицю створено лише для деякого конкретного html-файлу, то її розташовують у цьому файлі за допомогою тега-контейнера <STYLE>. Це звужує рамки застосування таблиці, але суттєво прискорює функціонування сторінки. Таку таблицю стилів називають внутрішньою або вбудованою. Таблицю стилів можна застосувати або до всього файлу, або його частини, або до окремого тега.
Якщо дизайнер для створення сторінки застосовує декілька таблиць стилів, то такі таблиці називають каскадними. Каскад - це впорядкована послідовність таблиць стилів, у якій однотипні стилі з таблиць, які розташовані ближче до початку послідовності, мають більший пріоритет. Саме ця властивість дає змогу легко змінювати зовнішній вигляд сторінки і з декількох альтернатив вибирати найліпшу методом зміни послідовності описів таблиць стилів.
Мова CSS. Таблиця стилів - це текстовий файл, який створюють за допомогою мови CSS - Cascading Style Sheets - чи іншої. Є спеціальні програми, наприклад, AceExpert чи FrontPage тощо, які дають змогу створювати досить складні таблиці стилів навіть без знання цієї мови. Зазвичай таблицю стилів створюють засобами текстового редактора, наприклад NotePad, як текстовий файл і дають йому деяку назву з розширенням css.
Таблиця стилів складається з правил, а правило - з назви тега чи списку назв тегів і описів стилів, які діятимуть у межах цих тегів деякого 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).
Властивості стилів та їхні значення. Імена властивостей складаються з одного чи декількох англійських слів, що записуються через риску. Властивість діє лише в межах тега, зазначеного у відповідному правилі.
Властивості стилів наведені у таблиці:
Властивість
Значення
Пояснення

Background-attachment
Fixed
Scroll
Тло фіксоване
Тло прокручується

Background-color
Red, green…
Колір тла

Background-image
URL(“адреса графічного файлу для тла”)

Background-repeat
Repeat, repeat-x, repeat-y, no-repeat
Повторює зображення

Border-color
Red, green…
Колір рамки

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
1mm
Відстань між символами

Line-height
2mm
Відстань між рядками

Text-align
Left, right, center, justify
Вирівнювання тексту

Text-decorate
None, underline, overline, line-through, blink
Оформлення тексту

Text-indent
2cm
Абзацний відступ

Margin-top
4mm
Відступ зверху

Margin-right
4mm
Відступ справа

Margin-bottom
4mm
Відступ знизу

Margin-left
4mm
Відступ зліва

Paddin-top
2mm
Величина вільного простору між стороною рамки і елементом у рамці

Paddin-right
2mm

Paddin-bottom
2mm

Paddin-left
2mm

Height
4cm
Висота елемента

Width
14cm
Ширина елемента

Float
None, left, right
Обтікання об’єкта текстом

Color
Red, green…
Колір елемента

Vertical-allign
Top, super, middle, sub, bottom
Вертикальне вирівнювання

List-style-image
URL (“адреса графічного маркеру списку”)

List-style-position
Inside, outside
Позиція маркера

Disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none
Вигляд маркера (диск, круг, квадрат, арабські цифри, малі чи великі римські тощо)

Одиниці вимірювання, прийняті у мові CSS:
Назва одиниці
Пояснення

In
Дюйми (1 дюйм=2,54)

Cm
Сантиметри

Mm
Міліметри

Pt
Пункти (1см=28 пунктів)

Pc
Піки (1 піка=12 пунктів)

Px
Пік селі

%
Відсотки від основи

Medium
Середній розмір (10 пунктів)

Small
На 50% менше, ніж medium

Large
На 50% більше, ніж medium

x-large
На 50% більше, ніж Large

xx-large і т.д.
На 50% більше, ніж x-large

Групування властивостей і успадковування. Перше слово чи перші два слова у складній назві властивості є назвою групи (категорії) властивостей. Наприклад, font - назва групи властивостей font-family, font-size, font-style, font-variant, font-weight. Групування властивостей дає змогу компактно задавати їхні значення, наприклад, так:
font:"times new roman", 12pt, italic, lighter.
Зауваження. Якщо значення властивості складається з декількох слів, то його беруть у лапки. Значення властивостей у групах margin і padding перелічуються у строгій послідовності їх знаходження у таблиці. Наприклад,
Top right bottom leftMargin:1cm, 1cm, 2cm, 2cm
Деякі властивості можуть успадковуватися різними тегами. Властивості, що стосуються тега <BODY>, діють на всі інші відповідні теги сторінки. Кажуть, що ці теги успадковують властивості тега <BODY>.
Наприклад, правило BODY {margin-left: 2cm} задає відступ зліва 2см для всіх елементів сторінки. Тому, щоб притиснути заголовок другого чи іншого рівня до лівого краю, правило для нього має бути таким: H2{margin-left: -2 cm}.
Теги <STYLE>, <DIV> і <SPAN>. Внутрішні таблиці стилів описують у головному файлі в контейнері тега <HEAD>...</HEAD> за допомогою тега-контейнера <STYLE> ... </STYLE>.
Приклад 5. Розглянемо головний файл з описом стилів:
<HTML> <HEAD>
<ТІТLЕ>Застосування стилів</ТІТLЕ> <STYLE TYPE="text/css">
тут записують правила
</STYLE> </HEAD> <BODY>...</BODY> </HTML>
Правила можуть починатися або з назви тега без кутових дужок, або з деякого слова користувача, перед яким є крапка. Це слово стає назвою типу, який можна застосувати в контейнері тега <BODY> до іншого тега, до текстового блока, фрагмента тексту чи деякого елемента, наприклад,
.mystylel{color:red; font-size:40pt; margin-top:30px}
.mystyle2{color:black; font-size: 16pt; margin-top:-50px}
Для виокремлення текстового блока, до якого застосовуватимуть стиль, призначений тег-контейнер <DIV параметр>.. </DIV> з параметром CLASS, який задає конкретний стиль, що діятиме на блок:
<DIV СLАSS=назва стилю > блок </DIV>.
Для виокремлення у блоці текстового фрагмента, для якого будуть переозначувати стиль, застосовують тег-контейнер <SPAN>...</SPAN>:
<SPAN CLASS = назва стилю > фрагмент </SPAN>.
Перекривання текстів на рекламній сторінці. Розглянемо застосування стилів для створення ефекту перекривання текстів.
Нехай потрібно створити рекламну сторінку туристичної компанії „Мандри" зі Львова, яка запрошує відвідати Кіпр, Грецію, Італію. Створимо і застосуємо стилі так, щоб різнокольорові назви країн частково перекривались.
Приклад 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 пікселів. Для інших екранів ефект буде втрачено.
Приклад 6. Розглянемо такий зміст рекламної сторінки:
<BODY>
<DIV CLASS=mystylel> Kinp</DIV>
<DIV CLASS=mystyle2> Греція</DIV>
<DIV CLASS=mystyle3> Італія</DIV>
<DIV CLASS=mystyle4> "Мандри" запрошують подорожувати </DIV>
<DIV CLASS=mystyie5> Тел.: (0322) 97-56-46</DIV>
</BODY>
Завдання
Мета: створення сайту з використанням фреймів, навігаційних панелей та таблиць стилів.
Створіть сайт із фреймами на базі описаних прикладів, методом їх введення за допомогою текстового редактора і відтворення у броузері.
Створіть сайт про себе та свою діяльність з чотирма фреймами. Розташування фреймів і розміри згідно варіанта. Назви файлів подати за таким зразком: index.html, leftframe.html, rightframe.html, logoframe.html, file1.html, file2.html, file3.html…. і т.д. У файлах file1.html, file2.html, file3.html… fileN.html подати інформацію згідно варіанту.
Вдало розташуйте інформацію у фреймах, відформатуйте тексти, задайте необхідні параметри в тегах <BODY>.
Задайте різного кольору фони у лівому та правому фреймі.
Придумайте стартову сторінку-заставку з використанням графічних елементів, чи оригінального фону.
У верхньому фреймі розмістіть свій логотип чи емблему з деякого графічного файлу і рекламну інформацію.
У правому фреймі організуйте перегляд сторінок.
У нижньому фреймі розмістіть свої реквізити, деяку рекламу та вкажіть авторські права.
Удоскональте сайт, щоб він виглядав якнайкраще.
Збережіть web-сайт в папку Frame.
Створіть рисунок для навігаційної карти (наповнення згідно варіанту) за допомогою графічного редактора.
Уточніть координати гарячих областей (подати гарячі області в формі прямокутників, кіл, та багатокутника).
Запишіть html-файл для навігаційної карти і виконайте його. Проекспериментуйте з картою.
Розмістіть навігаційну карту у лівому фреймі. Забезпечте відображення сторінок у правому фреймі.
Удоскональте сайт, щоб він виглядав якнайкраще.
Збережіть web-сайт в папку Map.
Придумайте і застосуйте стилі для створення попереднього сайту.
Форматування текстів та таблиць повністю здійснити за допомогою таблиць стилів. Внутрішні таблиці стилів для парних варіантів, зовнішні — для непарних. Кількість таблиць стилів згідно варіанту.
Збережіть web-сайт в папку Style.
Варіанти завдань:
Схеми розміщення фреймів:
1.
Лівий
Верхній

Правий

Нижній

2.
Верхній

Лівий
Правий

Нижній

3.
Лівий
Верхній

Правий

Нижній

4.
Верхній

Лівий
Правий

Нижній

5.
Верхній
Правий

Лівий

Нижній

6.
Верхній

Лівий
Правий

Нижній

Теми сторінок:
1.Автобіографія. 2.Сім’я. 3.Друзі. 4.Подорожі. 5.Мій університет. 6.Фотоальбом 7.Освіта. 8.Досвід роботи. 9.Навики. 10.Хобі. 11.Фірма(загальна реклама). 12.Послуги (таблиця цін). 13.Товари (таблиця цін). 14.Історія розвитку фірми. 15.Пропозиція для посередників(дилерів). 16. Тема на власний вибір.
Вар-нт
Схема розміщення фреймів
Розміри фреймів:
Теми сторінок (фрейми)
Інформація для навігаційної карти
К-сть
таблиць стилів

Лівий ширина
Верхній висота
Нижній висота

1
1
25%
25%
25%
1,2,4,5,6,8,9,10,11,13,14,16
1,2,3,4,5,7,8,9,10
5

2
2
30%
10%
20%
1,3,4,5,6,7,9,10,11,13,15,16
11,12,13,14,15,16
4

3
3
20%
25%
10%
1,2,4,5,6,7,8,10,11,12,14,16
1,2,3,4,5,7,8,9,10
3

4
4
35%
15%
25%
1,3,4,5,6,8,9,10,11,12,14,16
11,12,13,14,15,16
4

5
5
31%
24%
15%
1,2,4,5,6,7,9,10,11,12,14,16
11,12,13,14,15,16
5

6
6
26%
22%
10%
1,3,4,5,6,7,8,10,11,13,15,16
1,2,3,4,5,7,8,9,10
6

7
1
250п
23%
14%
1,2,4,5,6,8,9,10,11,13,14,16
11,12,13,14,15,16
5

8
2
260п
19%
25%
1,3,4,5,6,7,9,10,11,13,14,16
11,12,13,14,15,16
4

9
3
280п
17%
22%
1,2,4,5,6,7,8,10,11,12,14,16
11,12,13,14,15,16
3

10
4
300п
95п
21%
1,3,4,5,6,8,9,10,11,12,15,16
11,12,13,14,15,16
5

11
5
200п
85п
24%
1,2,4,5,6,7,9,10,11,12,15,16
1,2,3,4,5,7,8,9,10
3

12
6
220п
90п
19%
1,3,4,5,6,7,8,10,11,12,14,16
11,12,13,14,15,16
4

13
1
29%
88п
90п
1,2,4,5,6,8,9,10,11,12,14,16
11,12,13,14,15,16
5

14
2
28%
92п
95п
1,3,4,5,6,7,9,10,11,12,15,16
11,12,13,14,15,16
6

15
3
27%
110п
100п
1,2,4,5,6,7,8,10,11,12,15,16
11,12,13,14,15,16
5

16
4
26%
105п
96п
1,3,4,5,6,8,9,10,11,13,14,16
11,12,13,14,15,16
4

17
5
32%
115п
75п
1,2,4,5,6,7,9,10,11,13,15,16
1,2,3,4,5,7,8,9,10
3

18
6
33%
20%
63п
1,3,4,5,6,7,8,10,11,12,14,16
11,12,13,14,15,16
5

19
1
245п
27%
62п
1,2,4,5,6,8,9,10,11,13,15,16
1,2,3,4,5,7,8,9,10
3

20
2
259п
18%
95п
1,3,4,5,6,7,9,10,11,13,15,16
1,2,3,4,5,7,8,9,10
4

21
3
265п
17%
110п
1,2,4,5,6,7,8,10,11,12,15,16
11,12,13,14,15,16
5

22
4
274п
14%
100п
1,3,4,5,6,8,9,10,11,12,14,16
1,2,3,4,5,7,8,9,10
6

23
5
284п
12%
110п
1,2,4,5,6,7,9,10,11,12,14,16
1,2,3,4,5,7,8,9,10
5

24
6
269п
100п
100п
1,3,4,5,6,7,8,10,11,13,15,16
11,12,13,14,15,16
4

25
1
23%
104п
102п
1,2,4,5,6,8,9,10,11,13,14,16
1,2,3,4,5,7,8,9,10
3

26
2
24%
98п
10%
1,3,4,5,6,7,9,10,11,12,15,16
1,2,3,4,5,7,8,9,10
4

27
3
26%
96п
16%
1,2,4,5,6,7,8,10,11,13,14,16
1,2,3,4,5,7,8,9,10
5

28
4
34%
93п
17%
1,3,4,5,6,8,9,10,11,13,15,16
11,12,13,14,15,16
6

29
5
29%
130п
19%
1,2,4,5,6,7,9,10,11,12,15,16
11,12,13,14,15,16
5

30
6
36%
126п
21%
1,3,4,5,6,7,8,10,11,13,14,16
1,2,3,4,5,7,8,9,10
4

Запитання
Що таке фрейми?
Які файли потрібні для створення сайту з фреймами?
Яке призначення основного html-файлу?
Що відображають зазвичай у лівому фреймі сайту?
Які параметри може мати тег <FRAMESET>?
Які параметри може мати тег <FRAME>?
Як створюються складні конфігурації фреймів?
Що означає запис COLS = "30% ,*"?
Що означає запис COLS = "1*. 4*"?
Що означає запис COLS = "120, 240, *"?
Які фрейми створить параметр COLS = "25%, 50%, 25%"?
Яке призначення параметра TARGET?
13.Яке призначення тега-контейнера NOFRAME?
Яке призначення навігаційної панелі?
Що таке навігаційна карта?
Як розпізнати на екрані навігаційну карту?
Що таке гаряча область?
Які форми можуть мати гарячі області?
Який тег задає рисунок для навігаційної карти?
Який тег призначений для опису гарячих областей карти?
Яке призначення параматра NAME?
Які значення може набувати параметр NAME?
Яку будову має тег-контейнер <МАР>?
Які параметри має тег <AREA>?
Як описують гарячу область - прямокутник?
Як задають гарячу область - круг?
Що таке холодний фрагмент на карті?
Яке призначення таблиці стилів?
Які є способи взаємодії таблиці стилів і html-файлу?
У чому полягає спосіб зв'язування?
Що таке вбудована таблиця стилів?
Що таке каскадні таблиці стилів?
З чого складається таблиця стилів?
З чого складається правило?
Назвіть властивості категорії border.
Назвіть властивості категорії font.
Назвіть властивості категорії text.
Назвіть властивості категорії margin.
Назвіть властивості категорії padding.
Які одиниці вимірювання застосовують у мові CSS?
Для чого групують властивості?
Що таке успадковування властивостей?
Яке призначення тега STYLE?
Яке призначення тега DIV?
Яке призначення тега SPAN?
Що означає від'ємне значення властивості margin-top?