Додаток 2_MУ_HTML_Web сайт

Атрибути тега <TEXTAREA>:

Приклад:

Ваша думка про книгу <BR> <TEXTAREA NAME = "MN" COLS=30 ROWS=3> Сподобалась </TEXTAREA>

2.<SELECT> - парний тег, який дозволяє створювати звичайні списки та ті, що розкриваються.

Атрибути тега <SELECT>:

3.<INPUT> - непарний тег, який дозволяє створювати різні елементи управління, у тому числі текстові поля, прапорці, перемикачі, поля для уведення пароля, кнопки для очистки форми та для відправки даних.

Атрибути тега <INPUT>:

21

Основні значення атрибута <TYPE>:

Вправа 11. Створіть в окремому файлі форму “Анкета студента” (у вправі 11 наведено лише фрагмент файла). Збережіть файл як Forma.htm.

<B><FONT color = red SIZE=5>Анкета студента</FONT><BR> <form action=mailto:alex@mail.ru enctype=text/plain>

ФИО студента<INPUT type="text" name="fio" size="15" maxlength="20"> Факультет <SELECT NAME = "Spec" maxlength=30>

<OPTION VALUE="s1"> ФЭУП

22

<OPTION SELECTED VALUE="s2"> ФЭФ <OPTION VALUE="S3"> КЭФ </SELECT><BR>

Группа<INPUT type="text" name="GR" size="6" maxlength="8"><BR> <B><FONT Color=green SIZE=2>Ваши увлечения </B></Font><br><font size=1> <INPUT type="checkbox" name="C1" checked >музыка

<INPUT type="checkbox" name="C2" >спорт

<INPUT type="checkbox" name="C3" > иностранные языки<br> <B><FONT Color=Green SIZE=2>Наличие медали</B></Font> <INPUT type="radio" name="P" Value="0" checked> золотая <INPUT type="radio" name="P" Value="1" > серебряная <INPUT type="radio" name="P" Value="2" > нет<BR> <B><FONT Color=green SIZE=2>Образование</B></font><BR> <SELECT NAME = "OBRAZ" MULTIPLE>

<OPTION SELECTED VALUE="V"> Высшее <OPTION VALUE="SR"> Среднее

<OPTION VALUE="ST"> Средне - техническое

<OPTION VALUE="ST"> Курсы по бухучету </SELECT><BR>

<B><FONT Color=Green SIZE=2>Ваши пожелания </B></FONT><BR> <TEXTAREA NAME = "MN" COLS=30 ROWS=3> </TEXTAREA><br> <input type="Submit" Value="Отправить">

<INPUT Type="RESET" Value="Очистить"> <br> </FORM>

Питання для самоконтролю

1.Що таке форма?

2.Якою програмою обробляється форма?

3.Яке призначення тега FORM? Його основні атрибути.

4.Назвіть основні теги для визначення полів форми.

5.Яке призначення тега TEXTAREA? Його основні атрибути.

6.Яке призначення тега SELECT? Його основні атрибути.

7.Яке призначення тега INPUT? Його основні атрибути.

23

5. Фрейми

5.1 Поняття про фрейми

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

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

Кожній сторінці має відповідати свій html-файл. Кожна сторінка повинна мати логічний заголовок.

Наприклад, типовим є сайт, де вікно браузера поділене на дві вертикальні області. У вужчій (до 25% від ширини вікна браузера) лівій області відображають зміст сайту у вигляді гіперпосилань на конкретні сторінки, а в іншій - вибрану користувачем сторінку. Такий підхід до конструювання сайту дає змогу постійно бачити зміст сайту і переглядати його сторінки у будь-якій послідовності. Зміст чи у цьому випадку увесь лівий фрейм називають навігаційною панеллю. Навігаційну панель можна створити у верхній частині вікна браузера, справа чи де завгодно. Часто у верхній частині створюють третій вузький фрейм, де розташовують заголовок сайту, логотип фірми, рекламу, елементи WordArt, ActiveX чи

Flash тощо.

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

5.2 Файлова структура сайту з фреймами

Для створення cайту із застосуванням фреймів потрібно скласти як мінімум три html-файли: один основний і два чи більше допоміжні.

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

Оскільки основний файл запускає сайт, то його прийнято називати index.html. Такий документ не містить “тіла” документа.

Для поділу вікна браузера на декілька частин використовують тегконтейнер:

<FRAMESET параметри> ... </FRAMESET>

24

Атрибути тега <FRAMESET>:

1.Параметр COLS призначений для поділу вікна на вертикальні області (колонки).

2.ROWS — призначений для поділу вікна на горизонтальні області.

Якщо задані обидва ці атрибути, у вікні створюється сітка з підобластей. Розміри областей задають у відсотках до всього вікна, фіксовані - у пікселях. Наприклад, COLS = "25%, 75%" означає, що фрейм займатиме

чверть вікна на будь-якому моніторі.

Можна писати також COLS = "1*, 3*", де 1* саме тут означає одну з чотирьох частин екрана, або COLS = "2*, З*", де 2* означає дві з п'яти вертикальних частин екрана.

Уфіксованому завданні COLS = "100,*", число 100 означає 100 пікселів,

а* - решту екрана.

Між тегом <FRAMESET> розташовують додаткові теги. Одинарний тег <FRAME параметри> описує конкретний фрейм. Обов'язковими тут є параметр <SRC=”документ, який буде завантажуватися в дану область”>

зі значенням адреси стартового html-файла і NAME, значенням якого є назва фрейму. Цю назву придумує користувач, запам'ятовує її, оскільки вона використовуватиметься далі як значення параметра TARGET тега <А>.

Призначення деяких інших параметрів такі:

Приклади основного (індексного) html-файла

Створення сайту з трьома фреймами (основним і двома допоміжними) виглядає так:

<FRAMESET COLS = "25%, 75%"> <FRAME описуємо лівий фрейм> <FRAME описуємо правий фрейм>

</FRAMESET>

Більш складні конфігурації фреймів створюють шляхом поділу на фрейми деякого раніше створеного фрейму. У цьому випадку теги FRAMESET вкладають один в один. Число елементів, вкладених між тегами <FRAMESET> ... </FRAMESET>, повинно відповідати числу створених областей.

25

Наприклад:

<FRAMESET COLS = "25%, 75%"> <FRAME описуємо лівий фрейм> <FRAMESET ROWS= "25%, 75%"> <FRAME описуємо верхній правий фрейм> <FRAME описуємо нижній правий фрейм> </FRAMESET>

</FRAMESET>

Наприклад:

<FRAMESET ROWS = "15%, 85%"> <FRAME описуємо верхній фрейм>

<FRAMESET COLS= "30%, 35%, 35%"> <FRAME описуємо лівий фрейм> <FRAME описуємо центральний фрейм> <FRAME описуємо правий фрейм>

</FRAMESET>

</FRAMESET>

Верхній фрейм

Лівий фрейм Центральний фрейм Правий фрейм

Наприклад:

<FRAMESET ROWS = "15%, 70%, 15%"> <FRAME описуємо верхній фрейм>

<FRAMESET COLS= "30%, 35%, 35%"> <FRAME описуємо лівий фрейм> <FRAME описуємо центральний фрейм> <FRAME описуємо правий фрейм>

</FRAMESET>

<FRAMESET COLS= "55%, 45%"> <FRAME описуємо лівий нижній фрейм> <FRAME описуємо правий нижній фрейм>

</FRAMESET>

</FRAMESET>

Верхній фрейм

26

Вправа 12. Розглянемо типовий вигляд основного файла (index.html): <HTML>

<HEAD>

<ТІТLЕ> Це мій сайт з фреймами </TITLE> </HEAD>

<FRAMESET COLS="25%, 75% "> <!--Поділ вікна по вертикалі на два фрейми-->

<FRAME SRC="leftframe.html"

підтримує фреймів, наприклад:-->

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

</NOFRAME>

</HTML>

5.3 Допоміжні HTML-файли

Коли основний файл спроектовано, створюють файли для кожного фрейму.

Нехай файл leftframe.html призначений для підтримки лівого фрейму і нехай він містить зміст сайту у вигляді текстових чи графічних гіперпосилань. Тег гіперпосилання має містити параметр TARGET, значенням якого є назва фрейму, що була зазначена в параметрі NAME з основного файла. Цей параметр дає змогу пояснити браузеру, у якому фреймі слід відображати деяку сторінку сайту, що відповідає цьому гіперпосиланню. Нехай деяка сторінка має відображатися у правому фреймі. Гіперпосилання можна оформити різними способами: у вигляді звичайних текстових абзаців, заголовків, списків чи одностовпчикової таблиці.

Вправа 13. Файл leftframe.html може мати такий вигляд: <HTML>

<HEAD>

<ТІТLЕ> Це мій лівий фрейм </ТІТLЕ> </HEAD>

<BODY задаємо параметри стартової сторінки>

27

<НЗ> Сайт Іванова Віктора </НЗ><ВR> <Н4>

<А HREF="file2.htm" TARGET="right"> <!--Файл буде відображатися у правому фреймі-->

Моя біографія. Мої захоплення </А> <BR> <А HREF="file3.htm" TARGET="right">

Мої університети </А> <BR>

<А HREF="Forma.htm" TARGET="right">

Анкета студента </А> <BR> </Н4>

</BODY>

</HTML>

Другий допоміжний файл, нехай rightframe.html, визначає зміст правого фрейму на момент відкривання сайту. Цей файл може містити будь-який текст чи графіку. Тут варто подати красиво оформлений заголовок сайту, рекламну інформацію тощо. Як такий файл можна, наприклад, використати filel.html. Тоді у правому фреймі у момент відкривання сайту буде відображатися перша сторінка проекту.

Вправа 14. Файл rightframe.html може мати такий вигляд:

<HTML>

<HEAD><TITLE> Це правий фрейм </TITLЕ> <BODY задаємо параметри для правої сторінки>

<Н2> ЗАПРОШУЄМО НА САЙТ ІВАНОВА ВІКТОРА </Н2> </BODY>

</HTML>

На цьому проектування сайту з фреймами закінчується.

Питання для самоконтролю

1. Що таке фрейми?

1.Які файли потрібні для створення сайту з фреймами?

2.Яке призначення основного html-файла?

3.Що відображають зазвичай у лівому фреймі сайту?

5.Які параметри може мати тег <FRAMESET>?

6.Які параметри може мати тег <FRAME>?

7.Як створюються складні конфігурації фреймів?

8.Що означає запис COLS = "30% ,*"?

9.Що означає запис COLS = "1*, 4*"?

10.Що означає запис COLS = "120, 240, *"?

11.Які фрейми створить параметр COLS = "25%, 50%, 25%"?

12.Яке призначення параметра TARGET?

13.Яке призначення тега-контейнера NOFRAME?

28

6. Навігаційні карти

6.1 Загальні відомості

Одним з головних завдань Web-дизайну є створення навігаційної панелі для багатосторінкового сайту. Навігаційна панель може бути текстовою або графічною.

Графічна навігаційна панель - це рисунок, окремі частини якого, так звані гарячі області, слугують гіперпосиланнями на відповідні сторінки сайту. Різновидом такої панелі є навігаційна карта.

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

Найчастіше навігаційна карта має вигляд вертикальної чи горизонтальної смуги, розташованої у фреймі, однак є також навігаційні карти, що займають увесь екран чи значну його частину.

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

6.2 Опис навігаційної карти

Спочатку потрібно відсканувати фотографію або створити відповідний рисунок за допомогою графічного редактора у форматі gif, jpg чи bmp.

Розглянемо карту Мій сайт.

Рисунок створено редактором Paint з метою демонстрації суті карти. Верхній лівий кут рисунка має координати (0,0). Перша координата горизонтальна, а інша - вертикальна. Одиниця вимірювання - піксель. Коло має радіус 50 пікселів. Центр кола знаходиться в точці з координатами (80, 110). Прямокутник із текстом Біографія має сторони завдовжки 130 і 55 пікселів. Він однозначно описується координатами двох діагонально протилежних вершин: (20, 175) і (150, 230). Прямокутник з текстом Навчання однозначно задається такими координатами (20, 260) і (150, 310), а з текстом Адреса - (20, 340) і (150, 390).

29

Створений графічний файл розташовують на диску і описують його у html-файлі Web-сторінки за допомогою тега <IMG>.

Цей тег має містити, крім уже відомих, новий параметр USEMAP = "#назва1", де назва - це назва карти:

<IMG SRC ="адреса граф. файла" USEMAP = "#MyMap1">.

Створити карту можна за допомогою тега

<МАР параметр> ... </МАР>

Усередині цього тега описують гарячі області карти. Тут застосовують параметр NAME, значенням якого є назва карти, у нашому випадку - #MyMap1.

6.3Гарячі області карти

Усередині тега-контейнера <МАР>...</МАР> розташовують декілька одинарних тегів <AREA параметри>, що описують замкнені області карти, які мають служити гіперпосиланнями. Власне ці області називають гарячими. Для їхнього задання призначені такі параметри тега <AREA>:

HREF = "адреса ресурсу, який викликають"

ALT = "альтернативний текст-підказка"

SHAPE = "rect" або "circle" або "poly" або "default"

COORDS = "список координат області"

Гарячою областю може бути область, охоплена прямокутником (rect), або колом (circle), або багатокутником (poly), або все зображення (default). Список координат для прямокутника - це записані через кому координати діагонально-протилежних вершин, для кола - координати центра і значення радіуса, для багатокутника - координати всіх вершин.

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

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

<AREA NOHREF ALT = "це є опис холодної області" SHAPE = ...

COORDS = ...>

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

30