Додаток 2_MУ_HTML_Web сайт
.pdf
Вправа 15. Створіть сайт із графічною навігаційною панеллю.
Аналогічно до наведеного вище створіть рисунок для навігаційної карти за допомогою графічного редактора. Уточніть координати гарячих областей.
Створену навігаційну карту розташуйте у лівому фреймі сайту. Використайте свої розробки для наповнення сайту. Забезпечте відображення сторінок у правому фреймі. Для цього використайте у тезі <AREA> параметр
TARGET ="right".
Приклад файлу Навігаційна карта.html:
<HTML>
<HEAD>
<TITLE> Навігаційна карта </ TITLE> </HEAD>
<BODY>
<IMG SRC = "karta.bmp" TITLE = "Навігаційна карта" BORDER = 5 WIDTH=167 HEIGHT = 425 USEMAP = "#MyMapl">
<MAP NAME="MyMapl">
<AREA SHAPE ="circle" COORDS ="80,110,50" ALT ="Моя фотографія"
HREF ="Ivanov.jpg"> <!--Це файл з фото Іванова Віктора--> <AREA SHAPE ="rect" COORDS ="20,175,150,230"
ALT ="Моя біографія" HREF ="file2.htm">
<AREA SHAPE ="rect" COORDS ="20,260,150,310" ALT ="Мої університети"
HREF ="file3.htm">
<AREA SHAPE ="rect" COORDS ="20,340,150,390" ALT ="Pозклад занять"
HREF ="Primer2.htm">
</MAP>
</BODY>
</HTML>
Відкривши файл у браузері, отримаємо навігаційну карту у чорній рамці товщиною 5 пікселів.
УВАГА! Якщо в написанні тега, назві параметра чи в його значенні допущено синтаксичну помилку, то тег чи параметр не діятимуть
Питання для самоконтролю
1.Якими можуть бути навігаційні панелі?
2.Що являє собою графічна навігаційна панель?
3.Що являє собою навігаційна карта?
4.Що треба для створення навігаційної карти?
5.За допомогою яких тегів можна описати в html-файлі Web-сторінки створений графічний файл?
6.Що являє собою гаряча область карти?
7.Як задати гарячу область навігаційної карти?
31
7. Таблиці стилів
7.1 Загальні відомості
Таблиці стилів дають змогу спростити процес створення сторінок і поліпшити їхній зовнішній вигляд. Концепція стилів подібна до ідеї стилів, яка реалізована в сучасних текстових редакторах - текст спочатку вводять, а потім форматують, користуючись стилями. Застосування стилів дає змогу вводити на сторінку потрібні тексти та інші елементи, не задумуючись над їхнім зовнішнім виглядом і розташуванням.
За допомогою стилів можна змінити відстань між рядками, словами чи навіть символами, задати всі допустимі відступи для елементів, змінити розміри, вигляд та інші атрибути шрифтів, створити рамки, задати тло, створити ефекти накладання текстів, управляти порожнім простором тощо.
Таблиці стилів створюються окремо від html-файла. Під час створення html-файла він концентрує увагу на змісті сторінки, а не на її зовнішньому вигляді, а підчас створення таблиці стилів - навпаки. Отже, стилі дають змогу розмежувати етапи створення html-файла й удосконалення зовнішнього вигляду сторінки.
7.2 Способи взаємодії таблиці стилів з основним файлом
Як забезпечити взаємодію таблиці стилів та основного html-файла? Розглянемо три способи такої взаємодії:
1)зв'язування;
2)імпортування;
3)вбудовування.
1.Зв'язування. Таблицю стилів створюють і зберігають в окремому текстовому файлі з розширенням .СSS Таку таблицю стилів називають зовнішньою. Щоб зв'язати основний файл з таблицею стилів, у середині тега <HEAD> застосовують одинарний тег <LINK> з інформацією про таблицю:
<HEAD>
<LINK HREF ="адреса таблиці стилів"
TYPE = "text/css"
REL = "stylesheet"
TITLE = "назва таблиці стилів"
</HEAD>
Параметри TYPE і REL мають наведені вище стандартні значення, які означають, що будь-яка таблиця стилів буде створена мовою CSS як текстовий файл.
Таблиця стилів може знаходитися на локальному комп'ютері або будь-де в мережі. У другому випадку адресу задають, наприклад, так:
http: /www. Microsoft.com/. ../css/beststyle.css
32
2. Імпортування. Це те ж саме, що і зв'язування, але взаємодію файлів забезпечують засобами тегу <STYLE> і команди: @import URL "адреса таблиці стилів".
3. Вбудовування. Якщо таблицю створено лише для деякого конкретного html-файла, то її розташовують у цьому файлі за допомогою тега-контейнера <STYLE>. Це звужує рамки застосування таблиці, але суттєво прискорює функціонування сторінки. Таку таблицю стилів називають внутрішньою або вбудованою. Таблицю стилів можна застосувати або до всього файла, або його частини, або до окремого тега.
Якщо дизайнер для створення сторінки застосовує декілька таблиць стилів, то такі таблиці називають каскадними.
Каскад - це впорядкована послідовність таблиць стилів, у якій однотипні стилі з таблиць, які розташовані ближче до початку послідовності, мають більший пріоритет. Саме ця властивість дає змогу легко змінювати зовнішній вигляд сторінки і з декількох альтернатив вибирати найліпшу методом зміни послідовності описів таблиць стилів.
Мова CSS. Таблиця стилів - це текстовий файл, який створюють за допомогою мови CSS - Cascading Style Sheets - чи іншої. Є спеціальні програми, наприклад, AceExpert чи FrontPage тощо, які дають змогу створювати досить складні таблиці стилів навіть без знання цієї мови. Зазвичай таблицю стилів створюють засобами текстового редактора, наприклад NotePad, як текстовий файл і дають йому будь-яку назву з розширенням .CSS.
Таблиця стилів складається з правил, а правило - з назви тега чи списку назв тегів і описів стилів, які діятимуть у межах цих тегів деякого htmlфайла.
Опис стилю — це послідовність пар <властивість>:<значення>, які записують через крапку з комою та охоплюють фігурними дужками.
Отже, загальний вигляд правила такий:
Список тегів .{властивість1 : значення1; властивість2 : значення2;
...;
властивістьN : значенняN}
Приклад: правила для одного тега:
Р {color:red} - браузер відтворить на екрані тексти всіх абзаців червоним кольором.
Ось приклад складнішого правила для списку тегів:
Н3, LI {color:green; font-family:pragmatica; font-size:16pt; text-align:left; borderstyle:ridge; border-width:2mm} – браузер виведе всі заголовки третього рівня НЗ і елементи списків LI зеленим кольором, шрифтом Прагматика розміру 16 пунктів, вирівняє їх до лівого краю вікна й охопить рамкою товщиною 2 мм з видавленим контуром (ridge).
33
7.3 Опис та властивості стилів, їхні значення
Імена властивостей складаються з одного чи декількох англійських слів, що записуються через риску. Властивість діє лише в межах тега, зазначеного у відповідному правилі.
Властивості стилів наведені у таблиці:
Властивість |
Значення |
Пояснення |
||
Background-attachment |
fixed |
Тло фіксоване |
||
|
scrol |
Тло прокручується |
||
Background-color |
red, green, #ffcc55 |
Колір тла |
|
|
|
|
|
|
|
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-weight |
normal, bold, bolder |
Жирність шрифта |
||
Text-indent |
2cm |
Абзацний |
|
|
|
|
|
відступ |
|
Сolor |
Red, green, #ffcc55 |
Колір елемента |
||
Background-image |
URL("aflpeca графічного |
файлу для тла") |
||
|
|
|
|
|
Text-align |
left, right, center |
Місце |
розташування |
|
|
|
|
тесту |
|
Одиниці вимірювання, прийняті у мові CSS: |
|
|
||
Назва одиниці |
|
Пояснення |
|
|
In |
|
Дюйми (1 дюйм = 2,54 см) |
||
Cm |
|
Сантиметри |
|
|
Mm |
|
Міліметри |
|
|
Pt |
|
Пункти (1 см = 28 пунктів) |
||
Pc |
|
Піки (1 піка = 12 пунктів) |
||
Px |
|
Піrселі |
|
|
% |
|
Відсотки від основи |
|
|
Medium |
|
Середній розмір (10 пунктів) |
||
34
7.4 Основні теги для створення стилів
Теги <STYLE>, <DIV> і <SPAN>.
Внутрішні таблиці стилів описують у головному файлі в контейнері тега <HEAD>...</HEAD> за допомогою тега-контейнера
<STYLE> ... </STYLE>.
Приклад: Розглянемо головний файл з описом стилів:
<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 парамeтp>...</DIV> з параметром CLASS, який задає конкретний стиль, що діятиме на блок:
<DIV CLASS=нaзвa стилю> блок </DIV>
Для відокремлення у блоці текстового фрагмента, для якого будуть переозначувати стиль, застосовують тег-контейнер <SPAN>...</SPAN>:
<SPAN CLASS = назва стилю> фрагмент </SPAN>
7.5 Ефект перекривання текстів
Розглянемо застосування стилів для створення ефекту перекривання текстів. Нехай потрібно створити сторінку Іванова Віктора Петровича, яка запрошує відвідати його сайт. Створимо і застосуємо стилі так, щоб різнокольорові частини тексту частково перекривались.
Приклад: Розглянемо такі правила (стилі): body
.mystyle1{color:red; font-size:80px; margin-top:80px; margin-left:70px}
.mystyle2{color:blue; font-size:80px; margin-top:-50px; margin-left:150px}
.mystyle3{color:green; font-size:80px; margin-top:-55px; margin-left:240px}
.mystyle4{color:black; font-size:35px; font-style:italic; margin-top:-210px; margin-left:75px}
35
У цих стилях передбачено ефект перекривання текстів. Іншим способом цього ефекту з текстом досягнути не можна. Перекривання досягається застосуванням від'ємних значень властивості margin-top, що веде до підняття тексту вгору відносно деякої базової лінії. Перший текст закінчуватиметься на висоті 160 + 160 = 160 пікселів. Наступний текст висотою 80 пікселів буде піднятий відносно лінії 160 пікселів на 50 пікселів і зсунутий вправо згідно із значенням властивості margin-left і т.д. Значення властивості margin-top успадковує наступний елемент. Таке успадковування дає змогу вирівнювати елементи один відносно іншого. Отже, за допомогою стилів можна позиціювати елементи на екрані. Оскільки вимірювання у цьому прикладі ведеться в пікселях, то якісне зображення буде досягнуто на екрані з роздільною здатністю 1024x768 пікселів. Для інших екранів ефект буде втрачено.
Приклад: Розглянемо такий зміст сторінки:
<BODY>
<DIV CLASS=mystyle1>ІВАНОВА</DIV>
<DIV CLASS=mystyle2>ВІКТОРА</DIV>
<DIV CLASS=mystyle3>ПЕТРОВИЧА</DIV>
<DIV CLASS=mystyle4>Запрошуємо відвідати сайт</DIV> </BODY>
Вправа 16. Складіть з фрагментів, наведених у прикладах, один файл Kaskad.html і відкрийте його у браузері. Забезпечте відображення сторінки з у правому фреймі. Для цього використайте у тезі <AREA> параметр
TARGET ="right".
Приклад файла Kaskad.html:
<HTML>
<HEAD>
<TITLE>ЗАСТОСУВАННЯ СТИЛIВ </TITLE> <STYLE TYPE="text/css">
body
.mystyle1{color:red; font-size:80px; margin-top:80px; margin-left:70px}
.mystyle2{color:blue; font-size:80px; margin-top:-50px; margin-left:150px}
.mystyle3{color:green; font-size:80px; margin-top:-55px; margin-left:240px}
.mystyle4{color:black; font-size:35px; font-style:italic; margin-top:-210px; margin-left:75px}
</STYLE>
</HEAD>
<BODY>
<DIV CLASS=mystyle1>ІВАНОВА</DIV>
<DIV CLASS=mystyle2>ВІКТОРА</DIV>
<DIV CLASS=mystyle3>ПЕТРОВИЧА</DIV>
<DIV CLASS=mystyle4>Запрошуємо відвідати сайт</DIV> </BODY>
</HTML>
36
Web-сторінка з ефектами перекривання тексту матиме вигляд:
Запрошуємовідвідатисайт
Питання для самоконтролю
1.Яке призначення таблиці стилів?
2.Які є способи взаємодії таблиці стилів і html-файла?
3.У чому полягає спосіб зв'язування?
4.Що таке вбудована таблиця стилів?
5.Що таке каскадні таблиці стилів?
6.З чого складається таблиця стилів?
7.Для чого групують властивості?
8.Яке призначення тега STYLE?
9.Яке призначення тега DIV?
10.Яке призначення тега SPAN?
11.Що означає від'ємне значення властивості margin-top?
37
Практичні роботи
Практична робота № 1
Мета: Створити у текстовому редакторі NotePad свої html-файли, використовуючи наведений вище матеріал. Удосконалити свою Webсторінку, створивши в ній два списки і таблицю за зразками з прикладів цього параграфа, гіперпосилання і динамічні ефекти.
Хід роботи
1.Створіть html-файл із розповіддю про себе. У списках зазначте свої уподобання, місця навчання, праці тощо.
2.Збережіть файл на диску як file1.htm і перегляньте його у браузері.
3.Переробіть файл file1.htm. Застосуйте список означень. Додайте розклад ваших занять на семестр. Новий файл назвіть file2.htm. Перегляньте його.
4.Проведіть на сторінці лінії різної ширини.
5.У файлі file3.htm створіть таблицю з даними про успішність за 1-й курс. Перегляньте його у браузері.
6.Проекспериментуйте з параметрами тега ТАВLЕ.
7.Створіть ще одну таблицю без рамок, використавши тег <РRЕ>...</РRЕ>.
8.Вставте у свій файл гіперпосилання на об'єкти, описані у цих методичних вказівках: графічні файли, які доступні на вашому комп'ютері, а також на деякий html-файл, наприклад, file2.htm.
9.Застосуйте гіперпосилання для переходу на початок та кінець сторінки.
10.Застосуйте тег MARQUEE до одного з заголовків і проекспериментуйте із його параметрами.
11.Удоскональте свою сторінку якнайліпше. Організуйте її перегляд.
Практична робота № 2 Мета: Створити сайт із фреймами.
Хід роботи
1.Створіть сайт із фреймами методом їх введення і відтворення у браузері.
2.Подібно до наведених вище зразків створіть такі файли: index.html, filel.html, file2.html, file3.html, file4.html, і т.д., наповнивши їх своїм змістом.
3.Додайте у свій сайт форму, наприклад “Анкета опитування клієнтів”, яка стосується вашої теми.
4.Досягніть вдалого розташування інформації у фреймах, відформатуйте тексти, задайте необхідні параметри в тегах <BODY>.
5.Придумайте і застосуйте стилі для створеної рекламної сторінки.
6.Задайте різний фон у кожному фреймі. Заберіть межу між фреймами.
7.Придумайте стартову сторінку-заставку з використанням графічних елементів, наприклад, помістіть тут графічний об’єкт тощо.
8.Підберіть значення властивостей font-size, margin-top і margin-left і організуйте відображення ефектів перекривання текстів.
9.Відтворіть створену вами індивідуальну Web-сторінку на своєму комп'ютері, встановивши роздільну здатність монітора 1024 х 768.
10.Удоскональте сайт, щоб він виглядав якнайліпше. Організуйте його перегляд.
38
***
Для виконання практичної роботи №2 заздалегідь запасіться рекламним буклетом будь-якої фірми (організації) чи прайс-листом, який дає уявлення про товари і послуги, які пропонуються будь-якою фірмою (організацією), і створіть сайт з фреймами для цієї фірми. У своєму сайті створіть форму опитування клієнтів даної фірми чи організації.
Перелік тем для створення власної Web-сторінки
1.Наш ВНЗ.
2.Наш факультет.
3.Реклама послуг туристичної фірми.
4.Реклама продажу комп’ютерної техніки.
5.Реклама продажу книжної продукції.
6.реклама роботи Internet-клуба.
7.Реклама пункту відеопроката.
8.Реклама роботи морського агентства.
9.Реклама роботи авіакомпанії.
10.Реклама роботи будівельної фірми.
11.Реклама роботи автосалону.
12.Реклама роботи фотосалона.
13.Реклама продажу канцелярських товарів.
14.Реклама продажу кондитерської продукції.
15.Реклама продажу мобільних телефонів.
16.Реклама послуг агентства з нерухомості.
17.Реклама продажу косметичної продукції.
18.Реклама продажу фармацевтичної продукції.
19.Реклама роботи супермаркету.
20.Реклама продажу побутової техніки.
21.Реклама роботи спортивного клубу.
22.Реклама роботи центра зайнятості.
23.Реклама послуг банка.
24.Реклама роботи кінотеатру.
25.Реклама журналу.
26.Реклама залізничних перевезень.
27.Реклама морських круїзів.
28.Реклама комп’ютерних курсів.
29.Реклама роботи видавництва.
30.Реклама екскурсійних послуг.
31.Реклама роботи фірми з вантажних перевезень.
32.Реклама роботи телефонної компанії.
Список літератури
1.Симонович С.В., Евсеев Г.А., Алексеев А.Г. Специальная информатика. – М.: Инфорком-Пресс, 1999. – 480 с.
2.Шафран Энди. Создание Web-страниц: Самоучитель. – Спб.: Питер, 1999.
39
|
Зміст |
|
Вступ.......................................................................................................................................... |
3 |
|
1. Теоретичні відомості ............................................................................................................. |
3 |
|
1.1 |
Ознайомлення з мовою HTML. Вступ до WEB - дизайну............................................... |
3 |
1.2 |
Структура Web - документа................................................................................................ |
4 |
Питання для самоконтролю.................................................................................................. |
4 |
|
2. Теги HTML. Атрибути тегів. Коментарі.............................................................................. |
5 |
|
2.1 |
Основні теги мови HTML.................................................................................................... |
5 |
Вправа 1...................................................................................................................................... |
9 |
|
Вправа 2...................................................................................................................................... |
9 |
|
2.2 |
Створення списків. Списки означень................................................................................. |
10 |
Вправа 3...................................................................................................................................... |
11 |
|
Вправа 4...................................................................................................................................... |
11 |
|
Вправа 5...................................................................................................................................... |
12 |
|
2.3 |
Створення таблиць............................................................................................................... |
12 |
Вправа 6...................................................................................................................................... |
14 |
|
Вправа 7...................................................................................................................................... |
15 |
|
Питання для самоконтролю.................................................................................................. |
15 |
|
3. Спецефекти на Web-сторінках.............................................................................................. |
16 |
|
3.1 |
Адреси файлів ...................................................................................................................... |
16 |
3.2 |
Графічні та відеозображення.............................................................................................. |
16 |
Вправа 8...................................................................................................................................... |
17 |
|
3.3 |
Гіпертекстові посилання та якоря ...................................................................................... |
17 |
Вправа 9...................................................................................................................................... |
18 |
|
3.4 |
Динамічні ефекти................................................................................................................. |
19 |
Вправа 10.................................................................................................................................... |
19 |
|
Питання для самоконтролю.................................................................................................. |
19 |
|
4. Форми...................................................................................................................................... |
20 |
|
4.1 |
Поняття про форми.............................................................................................................. |
20 |
4.2 |
Основні теги для визначення полів форми........................................................................ |
20 |
Вправа 11.................................................................................................................................... |
22 |
|
Питання для самоконтролю.................................................................................................. |
23 |
|
5. Фрейми.................................................................................................................................... |
24 |
|
5.1 |
Поняття про фрейми............................................................................................................ |
24 |
5.2 |
Файлова структура сайту з фреймами................................................................................ |
24 |
Вправа 12.................................................................................................................................... |
27 |
|
5.3 |
Допоміжні HTML - файли................................................................................................... |
27 |
Вправа 13.................................................................................................................................... |
27 |
|
Вправа 14.................................................................................................................................... |
28 |
|
Питання для самоконтролю.................................................................................................. |
28 |
|
6. Навігаційні карти................................................................................................................... |
29 |
|
6.1 |
Загальні відомості................................................................................................................ |
29 |
6.2 |
Опис навігаційної карти...................................................................................................... |
29 |
6.3 |
Гарячі області карти............................................................................................................. |
30 |
Вправа 15.................................................................................................................................... |
31 |
|
Питання для самоконтролю.................................................................................................. |
31 |
|
7. Таблиці стилів........................................................................................................................ |
32 |
|
7.1 |
Загальні відомості................................................................................................................ |
32 |
7.2 |
Способи взаємодії таблиці стилів з основним файлом..................................................... |
32 |
7.3 |
Опис та властивості стилів, їхні значення......................................................................... |
34 |
7.5 |
Основні теги для створення стилів..................................................................................... |
35 |
7.4 |
Ефект перекривання текстів................................................................................................ |
35 |
Вправа 16.................................................................................................................................... |
36 |
|
Питання для самоконтролю.................................................................................................. |
37 |
|
Практичні роботи....................................................................................................................... |
38 |
|
Практична робота №1............................................................................................................ |
38 |
|
Практична робота №2............................................................................................................ |
38 |
|
Перелік тем для створення власної Web – сторінки.......................................................... |
39 |
|
Список літератури...................................................................................................................... |
40 |
|
40