1. Тема заняття:Тема заняття:
Поняття про структуру веб-Поняття про структуру веб-
сайту. Фрейми, теги йсайту. Фрейми, теги й
атрибути фреймів.атрибути фреймів.
Використання посилань уВикористання посилань у
фреймахфреймах
МетаМета:: познайомити учнів з видами
гіперпосилань; формувати навички створення
гіперпосилань між HTML-документами та в
межах одного HTML-документа ;
• Розвивати логіку, вміння аналізувати,
порівнювати, робити висновки, висловлювати
свою думку;
• Виховувати акуратність, уважність,
ввічливість і дисциплінованість, дбайливе
cтавлення до свого здоров'я.
2. ФреймиФрейми
• Веб-сторінка сайту може містити кілька
блоків або вікон, які називають
фреймами, або кадрами. У кожному з
них відображається свій HTML-
документ. В одному фреймі може
міститися навігацій не меню, а в іншому
- відкриватися веб-сторінки, на які
вказують його пункти.
• Для того, щоб створити веб-сторінку з
фреймами, потрібно кілька HTML-
документів.
3. • Для поділу екрана на кілька
фреймів використовують теги
<FRAMESET> і </FRAMESET>.
Перший має бути
розташований після тегу
заголовка, але перед тегом
<BODY>. Іноді в таких
документах зовсім не
використовують тег <BODY>.
4. • Два фрейми можна
розташовувати поруч по
горизонталі або один над
одним. У першому випадку
використовують атрибут COLS,
а в другому — атрибут ROWS
тегу <FRAMESET>.
5. •Для поділу вікна на фрейми через
кому записують два числа, які
визначають розміри фреймів. Для
трьох фреймів потрібно три числа.
Розміри фреймів вимірюють у
пікселах або відсотках від розміру
екрана. Якщо потрібно зазначити, що
фрейм займає те місце, яке зали
шилося, використовують символ.
6. • Можна використовувати
одночасно і горизонтальний, і
вертикальний поділ вікна на
фрейми — це роблять за
допомогою вкладення тегів
<FRAMESET> один в один.
7. •Після поділу екрана на вікна для
кожного фрейму слід задати HTML-
документ, який відображатиметься в
ньому.
•Для цього використовують тег
<FRAME> з атрибутами, що керують
властивостями фреймів:
•SRC — задає ім'я файлу, що
відображатиметься у фреймі;
•NAME — задає ім'я фрейму;
8. • SCROLLINGSCROLLING — визначає наявність (значення— визначає наявність (значення
yesyes) або відсутність (значення по) смуг) або відсутність (значення по) смуг
прокручування у вікні фрейму (запрокручування у вікні фрейму (за
замовчуванням —замовчуванням — yesyes););
• NORESIZENORESIZE — забороняє користувачу— забороняє користувачу
змінювати розміри фрейму;змінювати розміри фрейму;
• BORDERBORDER — визначає ширину розділювальної— визначає ширину розділювальної
смуги між фреймами в пікселях;смуги між фреймами в пікселях;
• BORDERCOLORBORDERCOLOR — визначає колір— визначає колір
розділювальної смуги між фреймами;розділювальної смуги між фреймами;
• MARGINHEIGHTMARGINHEIGHT — додає порожнє поле,— додає порожнє поле,
висота якого визначена в пікселях, міжвисота якого визначена в пікселях, між
верхньою межею фрейму і початком текстуверхньою межею фрейму і початком тексту
або графіки;або графіки;
• MARGINWIDTHMARGINWIDTH — додає порожнє поле, ширина— додає порожнє поле, ширина
якого визначена в пікселах, між боковимиякого визначена в пікселах, між боковими
межами фрейму і початком тексту або графіки.межами фрейму і початком тексту або графіки.
9. •Оскільки фрейми підтримують неОскільки фрейми підтримують не
всі браузери, необхідно поміститивсі браузери, необхідно помістити
тег <тег <NOFRAMENOFRAME> перед тегом> перед тегом
<<BODYBODY>,>,
а між <а між <BODYBODY> І </> І </BODYBODY> записати> записати
повідомлення, яке з'являтиметься уповідомлення, яке з'являтиметься у
вікні, якщо браузер не підтримуєвікні, якщо браузер не підтримує
фрейми.фрейми.
ПісляПісля </</BB00DYDY>> має йтимає йти </</NN00FRAMEFRAME>.>.
10. Практична роботаПрактична робота
•Розмістимо на сторінці три
документи про навчальні заклади/
Сторінку поділено спочатку на два
рядки у співвідношенні приблизно
60% та 40%, перший рядок
поділено на впіл на два стовпці, а
в утворених комірках
розташовано відповідні веб-
сторінки про навчальні заклади.
Документи 1.html, 2.html та 3.html
лежать в папці ВЕБ-
ДИЗАЙН/ПРІЗВИЩЕ
•Завдання отримаєте в додатку
11. Домашнє завдання
• Опрацювати конспект
• Удосконалити власну веб-
сторінку на тему “Моє хобі”
використавши вивчені
сьогодні теги