Тема: фрейми і форми.
Мета:
сформувати поняття форм та фреймів, навчити використовувати теги та їх атрибути для створення форм та фреймів при створенні веб-сторінок. По завершенню вивчення учень
Обладнання: ПК зі встановленою операційною системою і програмою проглядання ресурсів глобальної мережі.
Структура уроку
Хід уроку
1. Організаційний момент
Вітання з класом. Перевірка присутності і готовності учнів до уроку. Перевірка виконання домашнього
завдання.
2. Актуалізація опорних знань
3. Мотивація навчання
Розробниками HTML-документів надано багатий вибір способів відображення інформації на сторінках. Текстову і графічну інформацію можна впорядкувати й організувати за допомогою списків, таблиць або за допомогою параметрів вирівнювання, задання горизонтальних ліній, поділу на абзаци. Іноді цих можливостей виявляється недостатньо і тоді доводиться розбивати вікно перегляду браузера на окремі області, які називають фрейми.
Це надає можливість залишати певну інформацію видимою, у той час, як іншу інформацію можна прокрутити або замінити. Наприклад, в одному фреймі відобразити статичний банер, в іншому — навігаційне меню, а у третьому — сам документ, який можна прокручувати або переходити до іншого за допомогою навігації, реалізованої у другому фреймі.
Типове меню складається з графічних зображень у вигляді кнопок або з текстових гіперпосилань, призначених для переходу в розділи сайту. Продумане навігаційне меню може легко провести відвідувача сайту всіма розділами. Постійне відображення меню істотно спрощує навігацію, тому відвідувачі можуть більше часу присвятити опрацюванню веб-сайту.
Переглядаючи веб-сторінки, вам, можливо, доводилося заповнювати деякі форми; вводити текст, вибирати із запропонованих пунктів один або декілька варіантів. Наприклад, здійснювати замовлення в Інтернет-магазині, заповнювати анкету, брати участь в опитуваннях тощо. Можливість створення таких форм надає мова розмітки гіпертексту.
На уроці ми познайомимося з поняттям фрейма та форми, з тегами та атрибутами, що призначені для їх сторення, розглянемо приклади їх застосування.
4. Вивчення нового матеріалу
Фрейм — прямокутна частина вікна браузера, у якій відображено HTML-документ.
Для того щоб створити веб-сторінку з фреймами, потрібно в HTML-документі задати розмітку екрана, тобто розташувати у вікні браузера фрейми, кожному з яких призначити свої документи.
Сторінка з розміткою, як і звичайна, починається з тегу <html> і закінчується тегом </html>. Для поділу екрана на кілька фреймів використовують контейнер <frameset>…</frameset>. Перший потрібно розташувати після тегу заголовка, але перед тегом <body>. У таких документах інколи зовсім не використовують контейнер <body>…</body>.
Після поділу екрана на вікна для кожного фрейму потрібно задати HTML-документ, який буде відображено в ньому. Для цього використовують тег <frame> з атрибутами, що керують властивостями фреймів:
src — задає назву файлу, що відображатиметься у фреймі;
name — задає назву фрейму;
scrolling — визначає наявність або відсутність смуг прокручування у вікні фрейму (за умовчанням — yes, альтернатива — no);
noresize — забороняє користувачу змінювати розміри фрейму;
border — визначає ширину розділювальної смуги між фреймами у пікселах;
bordercolor — визначає колір розділювальної смуги між фреймами;
marginheight — визначає відстань у пікселах між верхньою межею фрейму і текстои або графікою;
marginwidth — визначає відстань у пікселах між боковими межами фрейму і текстом або графікоюи.
Фрейми можна розташовувати поруч по горизонталі або один над одним по вертикалі. У першому випадку використовують атрибут cols, а в другому — атрибут rows. Для поділу вікна на фрейми через кому записують числа, які визначають розміри фреймів зліва направо або згори донизу. Для k фреймів потрібно k чисел. Розміри фреймів вимірюють у пікселах або відсотках від розміру екрана. Якщо потрібно зазначити, що фрейм займає те місце, яке залишилося, використовують символ * замість числа.
Тег <frameset rows="150, *">, наприклад, задає поділ вікна на два горизонтальні фрейми, один з яких має висоту 150 пікселів, a другий займає те місце, що залишилося.
Тег <frameset cols="20%, 55%, *">, наприклад, задає поділ вікна на три вертикальні фрейми, один з яких займає 20% від ширини екрана, другий — 55%, а третій займає те місце, що залишилося, тобто 25%.
Можна використовувати одночасний і горизонтальний, і вертикальний поділ вікна на фрейми — це роблять за допомогою вкладення контейнерів <frameset>…</frameset> один в один.
Вбудований фрейм — це фрейм, який можна вбудувати у будь-яке місце веб-сторінки.
Такий фрейм описують контейнером <IFRAME>…</IFRAME>, що має такі самі атрибути вирівнювання, що й графічне зображення:
Вбудовані фрейми використовують не лише для розташування тексту, але й, наприклад, для того, щоб вбудувати відео із сервіса You Tube, про що було сказано на попередньому уроці. Нажаль, деякі навігатори (наприклад, Netscape Navigator) ігнорують вбудовані фрейми.
Якщо певний фрейм заплановано використовувати для відображення інформації з різних файлів, то йому надають назву. Веб-сторінка з гіперпосиланнями, що виконуватиме роль навігаційної панелі, складається із сукупності контейнерів <А>…</А>. У них, крім адреси файлу, пов'язаного з гіперпосиланням, потрібно вказати назву фрейму, в якому цей файл буде відображено. Для цього використовують атрибут TARGET, значенням якого є назва відповідного фрейму. Наприклад, таким чином:
<А HREF="2.html" TARGET="frame1">Сторінка 2</А>
Розгляньте для прикладу веб-сторінку з навігаційною панеллю та областю відображення документів. У прикладі використано:
Переваги фреймів — у можливості:
Недоліки фреймів:
головна перевага фреймів (відображення різної інформації в межах одного вікна) одночасно є і недоліком, бо доступна область веб-сторінки істотно зменшується;
при створенні фрейму правильно вибрати його розмір часто буває складно. У більшості випадків користувач вимушений постійно гортати фрейм за допомогою смуг прокручування;
при низькій роздільній здатності монітора об'єм видимої інформації істотно зменшується;
багато пошукових систем і каталоги відмовляються реєструвати сторінки, що використовують фрейми.
На жаль, деякі браузери не відображають фрейми. У цьому випадку користувач бачить перед собою порожній екран. Для того, щоб не вводити користувача в оману, використовують контейнер <NOFRAMES>…</NOFRAMES>. Текст, розташований у цьому контейнері, буде відображено, якщо відображення самого фрейму неможливе.
Будь-який користувач знайомий з такими елементами керування; кнопки, перемикачі, прапорці, випадні списки. З їх допомогою звичайну веб-сторінку можна перетворити на інтерактивну.
Форма (веб-сторінки) — це об'єднання логічно пов'язаних між собою елементів керування.
Для створення форми застосовують контейнер <form>…</form> з атрибутом action, що визначає адресу URL програми, якій буде відправлено отримані дані.
Поля форми описують за допомогою різноманітних тегів. Наприклад, <input> з такими атрибутами:
align — вирівнювання зображення для графічних кнопок керування з такими можливими значеннями: top, middle, bottom, left, right;
checked — визначення вибраної позиції при ініціалізації;
disabled — блокування доступу і змін елемента;
readonly — заборона зміни поля користувакчем (використовують лише для текстових полів і полів вибору файлу);
src — задання адресу графічного файлу для поля із зображенням;
title — опис елемента керування, який буде відображено браузерами як підказку;
tabindex — визначення порядку переходу між елементами за допомогою клавіші Tab;
accesskey — визначення переходу до елемента за допомогою комбінації клавіш;
maxlength — визначення максимальної довжини тексту;
name — визначення назви даних;
size — визначення ширини у символах видимого тексту;
value — визначення початкового значення (тексту);
Залежні кнопки описують тегом <input type=radio> зі спільним значенням атрибуту name, атрибутом value для надання значення, атрибутом checked для виділення кнопки, вибраної у початковий момент роботи з документом HTML.
Список (для вибору) задають тегом <select> з дескриптором <option> для визначення окремого елемента списку. Список буде розкриватися, якщо з тега <select> видалити атрибут multiple.
Теги <option>, об'єднані в одну групу, записують всередині контейнера <optgroup>…</optgroup>.
Контейнер <textarea>…<textarea> описує текстову область з такими атрибутами:
Всередині нього розташовють текст, який буде показано у початковий момент роботи з документом HTML.
Контейнер <fieldset>…<fieldset> призначено для групування елементів форми. Це полегшує роботу з формою, яка містить багато даних Наприклад, один блок може бути призначено для введення текстової інформації, а інший — для прапорців. Браузери для підвищення наочності відображають результат використання цього контейнера у вигляді рамки.
Приклад форм у вигляді бланку замовлення товару в Інтернет-магазині. дає уявлення про те, як конструювати форму.
5. Інструктаж з ТБ
6. Закріплення вивченого матеріалу
Завдання 1. Використавши зображення квітів 1, 2, 3, cтворити веб-сторінку, що складається з двох фреймів, один з яких містить навігаційну панель, за таким зразком.
Завдання 2. Створити форму анкети за таким зразком.
7. Підбиття підсумків уроку
Виставлення оцінок.
8. Домашнє завдання
Вивчити матеріал уроку. Проаналізувати код і дію форми в одній з випускних робіт слухачів курсів підвищення кваліфікації вчителів інформатики ІППО КУ імені Бориса Грінченка, виконаної у 2015 році..
Текст упорядкувала Повзун Анна Олександрівна, вчитель гімназії «Академія» Святошинського району міста Києва, під час виконання випускної роботи на курсах підвищення кваліфікації з 3 до 21 листопада 2014 року.