Добавил:
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Опорний кнспект.doc
Скачиваний:
1
Добавлен:
30.05.2020
Размер:
9.78 Mб
Скачать

Приклад комбінованої форми

Приклад використання різних форм на одній сторіночці Заповните, будь ласка, цю форму Вашими даними і натисніть кнопку "Відправити дані"! Ви зможете побачити варіант обробки Ваших даних.

Ця форма має наступний код:

<form method="post" action="8.php"> <fieldset> <b>Зaполните Ваші дані:</b>

<br><br> Ім'я: <input type=text name="name" maxlength=25 size=20 value=" "> <br><br> </fieldset> <p> <fieldset> <b>Виберіть улюблений колір:</b><br> <p align=center> <input type=radio name=answer value="#F4F090">Жовтий<br> <Input type=radio name=answer value="#80ECF3">Блакитний<br> <input type=radio name=answer value="#F3ACC5">Рожевий<br> <Input type=radio name=answer value="#A7F4AB">Зелений<br> </select>  <br><br> </fieldset> <p> <fieldset> <b>Напишіть тут текст </b><br> <textarea name="basictext" rows=7 cols=45 ></textarea> </fieldset> <p> <fieldset> <input type=reset value="Сбросить данные"> <Input type="submit" value="Отправить данные"> </fieldset> </form> 

Контрольні запитання

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

  2. Який тег описує форму у HTML коді?

  3. Які атрибути є обов’язковими при додаванні форми?

  4. Назвіть елементи форми.

  5. Який атибут допомагає створити кнопку із зображенням?

Лекція 7

Тема: Фреймова структура web-сторінки

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

План

  1. Фрейми, їхні теги та атрибути.

  2. Використання посилань у фреймах.

  3. Вкладені набори фреймів.

HTML-документи, які містять фрейми

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

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

1. Фрейми, їхні теги та атрибути

Веб-сторінка сайту може містити кілька блоків або вікон, які називають фреймами, або кадрами. У кожному з них відображається свій HTML-документ. В одному фреймі може міститися навігаційне меню, а в іншому відкриватися веб-сторінки, на які вказують його пункти.

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

Сторінка з розміткою, як і звичайна, починається з тегу <HTML> і закінчується тегом < / H T M L > . Для поділу екрана на кілька фреймів використовують теги <FRAMESET> і </ FRAMESET> . Перший має бути розташований після тегу заголовка, але перед тегом <BODY>. Іноді в таких документах зовсім не використовують тег <BODY> .

Два фрейми можна розташовувати поруч по горизонталі або один над одним. У першому випадку використовують атрибут COLS, а в другому — атрибут ROWS тегу <FRAMEZЕТ>. Для поділу вікна на фрейми через кому записують два числа, які визначають розміри фреймів. Для трьох фреймів потрібно три числа. Розміри фреймів вимірюють у пікселах або відсотках від розміру екрана. Якщо потрібно зазначити, що фрейм займає те місце, яке залишилося, використовують символ *.

Елемент FRAMESET|

Визначення атрибутів

rows| = multi-length-list|

Цей атрибут визначає розташування горизонтальних фреймів. Це розділений комами список пікселів, відсотків і відносних довжин. За умовчанням використовується 100%, що зазначать один рядок.

cols| = multi-length-list|

Цей атрибут визначає розташування вертикальних фреймів. Це розділений комами список пікселів, відсотків і відносних довжин. За умовчанням використовується 100%, що зазначать один стовпець.

Елемент FRAMESET| визначає макет основного вікна користувача у вигляді прямокутних просторів.

Установка атрибуту rows| визначає число горизонтальних відрізань простору в наборі фреймів. Установка атрибуту cols| визначає число вертикальних відрізань. Для створення сітки можна встановити обидва атрибути одночасно.

Якщо атрибут rows| не встановлений, кожен стовпець займає всю довжину сторінки. Якщо атрибут cols| не встановлений, кожен рядок займає всю ширину сторінки. Якщо не встановлений жоден з цих атрибутів, фрейм займає всю сторінку.

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

Наприклад, тег <FRAMESET ROWS="150, *"> задає поділ вікна на два горизонтальні фрейми, один з яких має висоту 150 пікселів?a другий займає те місце, що залишилося.

Тег <FRAMESET COLS="20%, 55%, *"> задає поділ вікна на три вертикальні фрейми, один з яких займає 20 % від ширини екрана, другий — 55 %, а третій займає те місце, що залишилося. Можна використовувати одночасно і горизонтальний, і вертикальний поділ вікна на фрейми — це роблять за допомогою вкладення тегів <FRAMESET> один в один.

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

  1. Екран розділяється горизонтально на дві частини (тобто створюються верхня і нижня частини).

<FRAMESET| rows=| «50%, 50%»>

.продовження визначення.

</FRAMESET>

  1. Створюється три стовпці: другою має фіксовану ширину 250 пікселів (це корисно, наприклад, для представлення зображення відомої ширини). Перший фрейм отримує 25% простору, що залишився, а третій – 75%.

<FRAMESET| cols=| «1*|, 250,3*|»>

.продовження визначення.

</FRAMESET>

  1. У наступному прикладі створюється сітка 2x3.

<FRAMESET| rows=| «30%, 70%» cols=| «33%, 34%, 33%»>

.продовження визначення.

</FRAMESET>

  1. Для наступного прикладу припустимо, що вікно браузера| має висоту строгі 1000 пікселів. Перший розділ отримує 30% загальної висоти (300 пікселів). Другою має висоту рівно 400 пікселів. Залишається 300 пікселів на два інші фрейма. Для четвертого фрейма задана висота «2*|», так що він повинен бути удвічі вище третього, для якого задані висота «*»| (еквівалентно 1*|). Таким чином, третій фрейм матиме висоту 100 пікселів, а четвертий – 200.

<FRAMESET| rows=| «30%, 400,*|, 2*|»>

.продолжение визначення.

</FRAMESET>

Після поділу екрана на вікна для кожного фрейму слід задати HTML-документ, який відображатиметься в ньому. Для цього використовують тег <FRAME> з атрибутами, що керують властивостями фреймів:

  • SRC — задає ім'я файлу, що відображатиметься у фреймі;

  • NAME — задає ім'я фрейму;

  • MARGINHEIGHT — додає порожнє поле, висота якого визначена в пікселах, між верхньою межею фрейму і початком тексту або графіки;

  • MARGINWIDTH — додає порожнє поле, ширина якого визначена в пікселах, між боковими межами фрейму і початком тексту або графіки.

  • SCROLLING — визначає наявність (значення yes ) або відсутність (значення no) смуг прокручування у вікні фрейму (за умовчанням — yes);

  • NORESIZE — забороняє користувачу змінювати розміри фрейму;

  • BORDER — визначає ширину розділювальної смуги між фрей­мами в пікселах;

  • BORDERCOLOR — визначає колір розділювальної смуги між фреймами;

Приведемо запис тега| <FRAME|> зі всіма параметрами:

<FRAME| SRC="url|" NAME="window_name|" SCROLLING=YES|NO|AUTO| MARGINWIDTH="value|" MARGINHEIGHT="value|" NORESIZE|>

На практиці в тегу <FRAME|> рідко використовуються одночасно всі параметри.

Найбільш важливий параметр — SRC| (скорочення від слова source|). Досить часто в тегу <FRAME|> задається єдиний параметр SRC|.

Наприклад:

<FRAME| SRC="url|">.

  • Значення параметра SRC| визначає URL-адрес| документа, який буде завантажений спочатку в даний фрейм. Зазвичай така адреса записується як ім'я HTML-файла|, розташованого в тому ж самому каталозі, що і основний документ. Тоді рядок визначення фрейма виглядатиме, наприклад, так:

<FRAME| SRC="sample|.htm">.

Зверніть увагу, що будь-який HTML-файл|, заданий в описі фрейма, повинен бути повним HTML-документом|, а не фрагментом. Це означає, що документ повинен мати теги| HTML|, HEAD|, BODY| і так далі.

Звичайно, як значення SRC| може бути задана будь-яка допустима URL-адрес|. Якщо, наприклад, фрейм використовується для відображення зображення у форматі GIF|, яке розташовується на сервері видавництва книги, то слід записати:

<FRAME| SRC="http://www.bhv.ru/example.gif">.

Звичайний текст, заголовки, графічні зображення і інші елементи не можуть прямо використовуватися в документі, який описує структуру фреймів. Весь зміст фреймів повинен бути визначене в окремих HTML-файлах|, імена яких задаються параметром SRC| тега| <FRAME|>.

  • Параметр NAME| визначає ім'я фрейма, яке може використовуватися для посилання до даного фрейма. Зазвичай посилання задається з іншого фрейма, розташованого на тій же самій сторінці. Наприклад:

<FRAME| SRC="sample|.htm" NAME="Frame_1|">.

Такий запис створює фрейм з ім'ям "Frame_1|", на який може бути виконана посилання. Наприклад:

<A HREF="other|.htm" TARGET="Frame_1">Натисніть| тут для завантаження документа other|.htm у фрейм з ім'ям Frame_1</A>.

Звернемо увагу на параметр TARGET|, який посилається на ім’я фрейма. Якщо для фрейма не задано ім'я, то буде створений фрейм без імені, і не буде можливості використовувати посилання на нього з іншого фрейма. Імена фреймів повинні починатися з алфавітно-цифрового символу.

  • Параметри MARGINWIDTH| і MARGINHEIGHT| дають можливість встановлювати ширину полів фрейма. Записується це таким чином:

MARGINWIDTH="value|"

де "value|" — абсолютне значення в пікселах.

Наприклад:

<FRAME| MARGINHEIGHT=| "5"| MARGINWIDTH=| "7"|>.

Даний фрейм має поля зверху і знизу по 5 пікселів, а зліва і справа — по 7 пікселів. Не забудьте, що тут йде мова про поля, а не про рамки. Параметри MARGINWIDTH| і MARGINHEIGHT| визначають простір усередині фрейма, в межах якого не розташовуватиметься ніяка інформація. Мінімальне допустиме значення цих параметрів рівне 1.

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

<FRAME| SCROLLING="YES|NO|AUTO|">.

Параметр SCROLLING| може приймати три значення: YES|, NO| або AUTO|. Значення AUTO| діє так само, як і у разі відсутності параметра SCROLLING|. Значення YES| викликає поява смуг прокрутки незалежно від необхідності цього, а NO| — забороняє їх появу.

Наприклад:

<FRAME| SCROLLING=YES|>.

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

<FRAME| NORESIZE|>.

Цей параметр не вимагає ніяких значень. Природно, коли заданий параметр NORESIZE| для одного з фреймів, то розмір будь-якого з суміжних фреймів також не може бути змінений. Іноді, залежно від розташування фреймів, використання параметра NORESIZE| в одному з фреймів буде досить, щоб запобігти можливості зміни розмірів будь-якого з них на екрані

  • Атрибут frameborder| = 1|0

Цей атрибут надає агентові користувача інформацію про межу фрейма. Можливі значення:

  • 1: Агент користувача повинен зобразити роздільник цим фреймам і всіма прилеглими фреймами. Це значення використовується за умовчанням.

  • 0: Агент користувача не повинен відображати роздільник. Звернете увагу, що роздільники можуть все одно відображатися, якщо вони задані в інших фреймах.

Тег <NOFRAMES|>

Можливість роботи з фреймами не передбачалася ні в стандарті HTML| 3.0, ні в HTML| 3.2. Тут до останнього часу складалася достатньо типова ситуація, коли реально використовувані можливості активно застосовуються на багатьох WWW-сторінках|, проте не є частиною стандарту. Це означало, що браузери| цілком законно могли ігнорувати фрейми. З появою стандарту HTML| 4.0 ситуація змінилася — тепер підтримка фреймових структур закріплена стандартом. Відмітимо, що більшість сучасних браузерів| розпізнавали фрейми і до появи HTML| 4.0. Проте, необхідно надавати інформацію користувачам, що застосовують браузери| без підтримки фреймів. Для таких браузерів| можна передбачити альтернативну інформацію, яка записується між парою тегів| <NOFRAMES|> і </NOFRAMES>. Це виглядає таким чином:

<NOFRAMES|>

весь HTML-документ|

</NOFRAMES>

Все, що розміщене між тегами <NOFRAMES|> і </NOFRAMES>, відображатиметься браузерами|, що не мають можливостей підтримки фреймів. Браузери з підтримкою фреймів проігнорують всю інформацію між цими тегами.

Відмітимо, що в реальному житті розробники HTML-сторінок| часто не використовують можливості тега| <NOFRAMES|> для створення сторінок без фреймових структур, а просто створюють дві версії своїх HTML-документів|. Для такого варіанту на стартовій сторінці зазвичай пропонується вибір завантаження документа з фреймовою структурою або без неї. Далі залежно від вибору користувача завантажується тільки один варіант документа.

Оскільки фрейми підтримують не всі браузери, необхідно помістити тег <NOFRAME> перед тегом <BODY> , а між <BODY> І < /BODY> записати повідомлення, яке з'являтиметься у вікні, якщо браузер не підтримує фрейми. Після < /BODY> має йти </NOFRAME> .

Приклад 1

Створимо файл головної сторінки, на якій розташовано три попередньо створені документи (Рис. 1).

<HTML>

<TITLE>Навчальні заклади</TITLE>

<FRAMESET ROWS="60%, 40%">

<FRAMESET COLS="50%,50%">

<FRAME SRC="2.html">

<FRAME SRC="3.html">

</FRAMESET>

<FRAME SRC="l.html">

</FRAMESET>

</HTML>

Рис.1.1 Приклад сторінки з фреймовою структурою

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