SlideShare a Scribd company logo
ЛАБОРАТОРНО-ПРАКТИЧНА РОБОТА №4
ТЕМА. Основні прийоми роботи з Web-сторінками. Застосування фреймів.
МЕТА: ознайомлення з основними прийомами роботи з Web-сторінками. Навчитися застосовувати
фрейми для роботи з HTML-документами.
ТРИВАЛІСТЬ ЗАНЯТТЯ: 3 години.
МІСЦЕ ПРОВЕДЕННЯ: кабінет інформатики.
МАТЕРІАЛИ ТА ОБЛАДНАННЯ: персональні комп’ютери, інструкції, програмне забезпечення: ОС Windows
XP, Блокнот.
МЕТОД ПРОВЕДЕННЯ: індивідуальний.
Теоретичні відомості
Для швидкого завантаження вашого HTML-документа дуже часто використовують фрейми. Фрейми
розбивають вікно на 2, 3 і навіть більш частин (але не слід захоплюватися). В кожному фреймі відображається свій
документ HTML і кожний з фреймів може мати (або не мати) власних посилань, зображень, смуг прокрутки і багато
чого іншого. Фрейми можуть також функціонувати незалежно один від одного.
Для відображення фреймів необхідні три файли: настановний файл і два початкові файли HTML.
Відкриваючим тегом є <FRAMЕSET>, який вставляється після тега </HEAD>, але до тега <BODY>. Відкриваючий
тег визначає місцерозташування фреймів у вікні браузера. Атрибутами тега <FRAMЕSET> служать:
COLS - фрейми розташовуються по вертикалі
ROWS - фрейми розташовуються по горизонталі
Цим атрибутам привласнюються числові значення, виражені в пікселях або у відсотках. Наприклад:
<FRAMSET COLS="10,50,*">. В даному випадку тег створює три вертикальні стовпці розмірами: перший - 10 пікселів,
другий - 50 пікселів, третій займає частину вікна, що залишилася.
Після тега <FRAMЕSET> вставляється тег <FRAME>, якому можуть привласнюватися наступні атрибути:
SRC= - вказується назва файлу, який розташовуватиметься в тому або іншому фреймі (*)
NAME= - цей атрибут важливий для вказівки на один файл з іншого (*)
BORDER= - визначає ширину розділової смуги між фреймами (вимірюється в пікселях)(*)
BORDERCOLOR= - задає колір розділової смуги (вимірюється в RGB)
NORESIZE - забороняє зміну розмірів фреймів користувачем за допомогою миші
SCROLLING= - задає смуги прокрутки у фреймах. Даний атрибут може мати наступні аргументи:
YES - смуга прокрутки буде видна
NO - смуга прокрутки не буде видна
AUTO - смуга прокрутки задається автоматично
MARGINHEIGHT= - цим атрибутом додається порожнє поле між верхньою межею фрейма і початком тексту
або графіки (вимірюється в пікселях)
MARGINWIDTH= - а цим атрибутом додається порожнє поле між бічними межами фрейма і текстом або
графікою (вимірюється в пікселях)
обов'язковий атрибут для тега <FRAME>
Для браузерів, що не підтримують фрейми, поміщається повідомлення як "тіло" (<BODY>) файлу між тегами
<NOFRAME> і </NOFRAME>.
Наведемо два приклади:
1. <HTML>
<HEAD>
<TITLE> моя перша сторіночка </TITLE> </HEAD>
<FRAMЕSET COLS="30%,* BORDER="1">
<FRAME SRC="file1.htm" NAME="file1”
SCROLLING="AUTO">
<FRAME SRC="file2.htm" NAME="file2”
SCROLLING="AUTO">
</FRAMESET> <BODY> <NOFRAME>
<P> Для перегляду необхідний браузер, що
підтримує фрейми.
</NOFRAME> </BODY> </HTML>
2. <HTML>
<HEAD> <TITLE></TITLE> </HEAD>
<FRAMЕSET ROWS="20%,*"> <FRAME SRC="file3.htm"
NAME="file3 SCROLLING="AUTO">"
<FRAMЕSET COLS="30%,*"> <FRAME SRC="file1.htm"
NAME="file1 SCROLLING="AUTO">"
<FRAME SRC="file2.htm" NAME="file2
SCROLLING="AUTO">" </FRAMESET> </FRAMESET>
<BODY> <NOFRAME>
<P> Для перегляду необхідний браузер, що
підтримує фрейми.
</NOFRAME> </BODY> </HTML>
За допомогою вказівок на фрейм можна змінити файл, розташований в іншому фреймі. Щоб ця вказівка
спрацювала правильно, вимагається виконати наступні умови:
Створюючи фрейм в настановному файлі, необхідно задати його назву
Задаючи посилання, слід використовувати його назву, щоб вказати, в якому фреймі повинен бути зображений
файл HTML, на який є посилання.
Для того, щоб змінився файл, розташований в іншому фреймі, необхідно в тег <A HREF= > додати атрибут
TARGET=, в якому вказати ім'я (NAME), на яке робиться посилання.
Наприклад: Якщо посилання розташовується у файлі file1.htm (лівий фрейм), а необхідно змінювати тільки
правий фрейм, то у файлі file1.htm робиться посилання:
Тут буде <A HREF="file2.htm TARGET="file2"> посилання" </A> на файл file2.htm
ЗАВДАННЯ:
1. Відкрийте текстовий редактор Блокнот.
2. На основі даної web-
сторінки створіть сайт про
країни світу.
3. Добийтеся вдалого
розташування інформації у
фреймах, відформатуйте
тексти, задайте необхідні
параметри в тегах <BODY>.
4. Задайте жовтий фон
для фреймів.
5. Задайте смуги
прокручування.
6. У вузькому верхньому
фреймі розташуйте особисту
емблему з деякого графічного
файлу.
7. У правому нижньому
фреймі організуйте перегляд
сторінок.
8. Удоскональте сайт, щоб він виглядав якнайліпше.
КОНТРОЛЬНІ ЗАПИТАННЯ:
1. Що таке фрейми?
2. Які файли потрібні для створення сайту з фреймами?
3. Яке призначення основного html-файлу?
4. Що відображають зазвичай у лівому фреймі сайту?
5. Які параметри може мати тег <FRAMESET>?
6. Які параметри може мати тег <FRAME>?
7. Яке призначення атрибута ROWS?
8. Як створюються складні конфігурації фреймів?
9. Що означає запис COLS=”30%, *”?
10. Що означає запис COLS=”1*, 4*”?
11. Що означає запис COLS=”120, 240, *”?
12. Які фрейми створить параметр COLS=”25%, 50%, 25%”?
13. Яке призначення параметра TARGET?
14. Яке призначення тега-контейнера NOFRAME?
15. Яке призначення параметра SCROLLING?
16. Яке призначення параметра FRAMEBORDER?
ОФОРМЛЕННЯ РОБОТИ: робота оформляється на стандартних листах (ф. А4) в папках.
Звіт повинен містити:
1. Номер роботи, тему, мету, матеріали та обладнання;
2. Дайте відповіді на контрольні запитання згідно номера в журналі:
Номер в журналі Контрольні запитання
1, 4, 8, 12, 16, 20, 24, 28 15, 11, 13, 7, 4
2, 5, 9, 13, 17, 21, 25, 29 2, 5, 12, 14, 8
3, 6, 10, 14, 18, 22, 26 1, 3, 10, 12, 16
7, 11, 15, 19, 23, 27, 30 6, 9, 2, 5, 11
3. Вкінці роботи має бути написаний висновок.
ОЦІНКА РОБОТИ: робота оцінюється за кінцевими результатами за 12-бальною системою (при захисті
необхідно знати відповіді на всі контрольні запитання).
ЛІТЕРАТУРА:
 Глинський Я.М. Інформатика 8-11 класи, Навчальний посібник для загальноосвітніх навчальних
закладів (4-те видання). – Л.: 2004.
 Гаєвський О.Ю. Інформатика 7-11 класи, Навчальний посібник. – К.: А.С.К., 2005.
 Глинський Я.М., Ряжська В.А. Інтернет, Навчальний посібник, Самоучитель 4-те доповн.вид. –
Львів, 2007

More Related Content

Viewers also liked (20)

6
66
6
 
3
33
3
 
кросворд
кросвордкросворд
кросворд
 
контрольна робота №2
контрольна робота №2контрольна робота №2
контрольна робота №2
 
7
77
7
 
1
11
1
 
кросворд(відповіді)
кросворд(відповіді)кросворд(відповіді)
кросворд(відповіді)
 
7
77
7
 
4
44
4
 
кросворд222
кросворд222кросворд222
кросворд222
 
2
22
2
 
8
88
8
 
мова Html тест
мова Html тестмова Html тест
мова Html тест
 
тести
теститести
тести
 
3
33
3
 
аналіз директорської контрольної роботи
аналіз директорської контрольної роботианаліз директорської контрольної роботи
аналіз директорської контрольної роботи
 
12
1212
12
 
2
22
2
 
11
1111
11
 
10
1010
10
 

Similar to л пр№4

HTML.pptx
HTML.pptxHTML.pptx
HTML.pptx
adasdasd11
 
Module_01.pdf (Модуль 1. Вступ до вебтехнологій. Структура HTML. Форматуванн...
Module_01.pdf (Модуль 1. Вступ до вебтехнологій. Структура HTML.  Форматуванн...Module_01.pdf (Модуль 1. Вступ до вебтехнологій. Структура HTML.  Форматуванн...
Module_01.pdf (Модуль 1. Вступ до вебтехнологій. Структура HTML. Форматуванн...
lisovvolod
 
основні теги мови Html
основні теги мови Htmlосновні теги мови Html
основні теги мови Html
Larisa023
 
веб сторінки
веб сторінкивеб сторінки
веб сторінки
XX1827
 
веб сторінки
веб сторінкивеб сторінки
веб сторінкиgaliasova
 
веб сторінки
веб сторінкивеб сторінки
веб сторінки
ann2704
 
веб сторінки
веб сторінкивеб сторінки
веб сторінки
AnyaNastya
 
Guide for Dota 2
Guide for Dota 2 Guide for Dota 2
Guide for Dota 2
kvak333
 
веб сторінки
веб сторінкивеб сторінки
веб сторінки
Joseph Willson
 
Veb-mama ama kriminal
Veb-mama ama kriminalVeb-mama ama kriminal
Veb-mama ama kriminal
artemlinok
 
веб сторінки
веб сторінкивеб сторінки
веб сторінки
Remka_oxxxy
 
10 asp.net
10 asp.net 10 asp.net
10 asp.net eleksdev
 
Html перші кроки
Html перші крокиHtml перші кроки
Html перші кроки
Irina Tabanets
 
Presentation # 24. hypertext markup language concept
Presentation # 24.  hypertext markup language conceptPresentation # 24.  hypertext markup language concept
Presentation # 24. hypertext markup language concept
Nikolay Shaygorodskiy
 
Урок 29 10 клас
Урок 29 10 класУрок 29 10 клас
Урок 29 10 клас
Andrey Podgayko
 

Similar to л пр№4 (20)

4
44
4
 
створи сайт
створи сайтствори сайт
створи сайт
 
всі лр
всі лрвсі лр
всі лр
 
HTML.pptx
HTML.pptxHTML.pptx
HTML.pptx
 
Module_01.pdf (Модуль 1. Вступ до вебтехнологій. Структура HTML. Форматуванн...
Module_01.pdf (Модуль 1. Вступ до вебтехнологій. Структура HTML.  Форматуванн...Module_01.pdf (Модуль 1. Вступ до вебтехнологій. Структура HTML.  Форматуванн...
Module_01.pdf (Модуль 1. Вступ до вебтехнологій. Структура HTML. Форматуванн...
 
основні теги мови Html
основні теги мови Htmlосновні теги мови Html
основні теги мови Html
 
веб сторінки
веб сторінкивеб сторінки
веб сторінки
 
веб сторінки
веб сторінкивеб сторінки
веб сторінки
 
веб сторінки
веб сторінкивеб сторінки
веб сторінки
 
веб сторінки
веб сторінкивеб сторінки
веб сторінки
 
Guide for Dota 2
Guide for Dota 2 Guide for Dota 2
Guide for Dota 2
 
веб сторінки
веб сторінкивеб сторінки
веб сторінки
 
Veb-mama ama kriminal
Veb-mama ama kriminalVeb-mama ama kriminal
Veb-mama ama kriminal
 
веб сторінки
веб сторінкивеб сторінки
веб сторінки
 
5
55
5
 
Html
HtmlHtml
Html
 
10 asp.net
10 asp.net 10 asp.net
10 asp.net
 
Html перші кроки
Html перші крокиHtml перші кроки
Html перші кроки
 
Presentation # 24. hypertext markup language concept
Presentation # 24.  hypertext markup language conceptPresentation # 24.  hypertext markup language concept
Presentation # 24. hypertext markup language concept
 
Урок 29 10 клас
Урок 29 10 класУрок 29 10 клас
Урок 29 10 клас
 

More from Наталія Максимчук (15)

звіт до лабораторно практичної роботи №1
звіт до лабораторно практичної роботи №1звіт до лабораторно практичної роботи №1
звіт до лабораторно практичної роботи №1
 
максимчук н.
максимчук н.максимчук н.
максимчук н.
 
іван мазепа
іван мазепаіван мазепа
іван мазепа
 
максимчук
максимчукмаксимчук
максимчук
 
іван мазепа
іван мазепаіван мазепа
іван мазепа
 
5
55
5
 
3
33
3
 
2
22
2
 
5
55
5
 
14
1414
14
 
13
1313
13
 
9
99
9
 
6
66
6
 
4
44
4
 
тести Html
тести Htmlтести Html
тести Html
 

Recently uploaded

Звіт керівника закладу за 2023-2024.pptx
Звіт керівника закладу за 2023-2024.pptxЗвіт керівника закладу за 2023-2024.pptx
Звіт керівника закладу за 2023-2024.pptx
ssuserd0ab23
 
курсова робота теорема Штольца з математики
курсова робота теорема Штольца з математикикурсова робота теорема Штольца з математики
курсова робота теорема Штольца з математики
ssuser3a363c
 
"Він плакав і сміявся з народом: творчий спадок Федьковича"
"Він плакав і сміявся з народом: творчий спадок Федьковича""Він плакав і сміявся з народом: творчий спадок Федьковича"
"Він плакав і сміявся з народом: творчий спадок Федьковича"
Чернівецька обласна бібліотека для дітей
 
Передвиборча програма Майора Станіслава
Передвиборча програма  Майора СтаніславаПередвиборча програма  Майора Станіслава
Передвиборча програма Майора Станіслава
tetiana1958
 
Наказ про зарахування 1 класу 2024 2025.pdf
Наказ про зарахування 1 класу 2024 2025.pdfНаказ про зарахування 1 класу 2024 2025.pdf
Наказ про зарахування 1 класу 2024 2025.pdf
Ostap Vuschna
 
Безбар’єрність в бібліотеці – суспільна норма
Безбар’єрність в бібліотеці – суспільна нормаБезбар’єрність в бібліотеці – суспільна норма
Безбар’єрність в бібліотеці – суспільна норма
ssuser15a891
 
zvit_kerivnuka_ZDO28_2023-2024_n.rik.pptx
zvit_kerivnuka_ZDO28_2023-2024_n.rik.pptxzvit_kerivnuka_ZDO28_2023-2024_n.rik.pptx
zvit_kerivnuka_ZDO28_2023-2024_n.rik.pptx
sadochok
 
Звіт самооцінювання осв. середовище 2024.ppt
Звіт самооцінювання осв. середовище 2024.pptЗвіт самооцінювання осв. середовище 2024.ppt
Звіт самооцінювання осв. середовище 2024.ppt
ssuserce4e97
 
Звіт директора КЗО "СЗШ №124" ДМР 2023-2024 н.р.
Звіт директора КЗО "СЗШ №124" ДМР 2023-2024 н.р.Звіт директора КЗО "СЗШ №124" ДМР 2023-2024 н.р.
Звіт директора КЗО "СЗШ №124" ДМР 2023-2024 н.р.
Pervushina1983
 
zarahuvannia do pershogo klassu IMG_20240607_0001.pdf
zarahuvannia do pershogo klassu IMG_20240607_0001.pdfzarahuvannia do pershogo klassu IMG_20240607_0001.pdf
zarahuvannia do pershogo klassu IMG_20240607_0001.pdf
AleksSaf
 
Передвиборча програма Ковальової Катерини
Передвиборча програма Ковальової КатериниПередвиборча програма Ковальової Катерини
Передвиборча програма Ковальової Катерини
tetiana1958
 
Звіт директора за 2023-2024 н. р. [Автозбережено].ppt
Звіт директора  за 2023-2024 н. р. [Автозбережено].pptЗвіт директора  за 2023-2024 н. р. [Автозбережено].ppt
Звіт директора за 2023-2024 н. р. [Автозбережено].ppt
ssuser59c0a2
 
звіт 2023-2024 32024 32024 32024 32024 3.pptx
звіт 2023-2024 32024 32024 32024 32024 3.pptxзвіт 2023-2024 32024 32024 32024 32024 3.pptx
звіт 2023-2024 32024 32024 32024 32024 3.pptx
home
 
Випуск магістрів- науковців факультету мехатроніки та інжинірингу, 2024 р.
Випуск магістрів- науковців факультету мехатроніки та інжинірингу, 2024 р.Випуск магістрів- науковців факультету мехатроніки та інжинірингу, 2024 р.
Випуск магістрів- науковців факультету мехатроніки та інжинірингу, 2024 р.
tetiana1958
 
Звіт за результатами самооцінювання щодо освітнього середовища
Звіт за результатами самооцінювання щодо освітнього середовищаЗвіт за результатами самооцінювання щодо освітнього середовища
Звіт за результатами самооцінювання щодо освітнього середовища
ssuserce4e97
 
Постанова №648 уряду від 04 червня 2024 року. .pdf
Постанова №648 уряду від 04 червня 2024 року. .pdfПостанова №648 уряду від 04 червня 2024 року. .pdf
Постанова №648 уряду від 04 червня 2024 року. .pdf
24tvua
 
Оригінал. Переклад. Види перекладів. Допомога учню
Оригінал. Переклад. Види перекладів. Допомога учнюОригінал. Переклад. Види перекладів. Допомога учню
Оригінал. Переклад. Види перекладів. Допомога учню
Adriana Himinets
 
Проєкт "Подорож містами України". Буковина
Проєкт "Подорож містами України". БуковинаПроєкт "Подорож містами України". Буковина
Проєкт "Подорож містами України". Буковина
НБУ для дітей
 
№ 133, 04.06.2024, підсумки методичної роботи з учителями школи у 2023-2024 ...
№ 133,  04.06.2024, підсумки методичної роботи з учителями школи у 2023-2024 ...№ 133,  04.06.2024, підсумки методичної роботи з учителями школи у 2023-2024 ...
№ 133, 04.06.2024, підсумки методичної роботи з учителями школи у 2023-2024 ...
olha1koval
 
Звіт в.о. директора Лохвицької гімназії.pptx
Звіт в.о. директора Лохвицької гімназії.pptxЗвіт в.о. директора Лохвицької гімназії.pptx
Звіт в.о. директора Лохвицької гімназії.pptx
ssuserd8e4941
 

Recently uploaded (20)

Звіт керівника закладу за 2023-2024.pptx
Звіт керівника закладу за 2023-2024.pptxЗвіт керівника закладу за 2023-2024.pptx
Звіт керівника закладу за 2023-2024.pptx
 
курсова робота теорема Штольца з математики
курсова робота теорема Штольца з математикикурсова робота теорема Штольца з математики
курсова робота теорема Штольца з математики
 
"Він плакав і сміявся з народом: творчий спадок Федьковича"
"Він плакав і сміявся з народом: творчий спадок Федьковича""Він плакав і сміявся з народом: творчий спадок Федьковича"
"Він плакав і сміявся з народом: творчий спадок Федьковича"
 
Передвиборча програма Майора Станіслава
Передвиборча програма  Майора СтаніславаПередвиборча програма  Майора Станіслава
Передвиборча програма Майора Станіслава
 
Наказ про зарахування 1 класу 2024 2025.pdf
Наказ про зарахування 1 класу 2024 2025.pdfНаказ про зарахування 1 класу 2024 2025.pdf
Наказ про зарахування 1 класу 2024 2025.pdf
 
Безбар’єрність в бібліотеці – суспільна норма
Безбар’єрність в бібліотеці – суспільна нормаБезбар’єрність в бібліотеці – суспільна норма
Безбар’єрність в бібліотеці – суспільна норма
 
zvit_kerivnuka_ZDO28_2023-2024_n.rik.pptx
zvit_kerivnuka_ZDO28_2023-2024_n.rik.pptxzvit_kerivnuka_ZDO28_2023-2024_n.rik.pptx
zvit_kerivnuka_ZDO28_2023-2024_n.rik.pptx
 
Звіт самооцінювання осв. середовище 2024.ppt
Звіт самооцінювання осв. середовище 2024.pptЗвіт самооцінювання осв. середовище 2024.ppt
Звіт самооцінювання осв. середовище 2024.ppt
 
Звіт директора КЗО "СЗШ №124" ДМР 2023-2024 н.р.
Звіт директора КЗО "СЗШ №124" ДМР 2023-2024 н.р.Звіт директора КЗО "СЗШ №124" ДМР 2023-2024 н.р.
Звіт директора КЗО "СЗШ №124" ДМР 2023-2024 н.р.
 
zarahuvannia do pershogo klassu IMG_20240607_0001.pdf
zarahuvannia do pershogo klassu IMG_20240607_0001.pdfzarahuvannia do pershogo klassu IMG_20240607_0001.pdf
zarahuvannia do pershogo klassu IMG_20240607_0001.pdf
 
Передвиборча програма Ковальової Катерини
Передвиборча програма Ковальової КатериниПередвиборча програма Ковальової Катерини
Передвиборча програма Ковальової Катерини
 
Звіт директора за 2023-2024 н. р. [Автозбережено].ppt
Звіт директора  за 2023-2024 н. р. [Автозбережено].pptЗвіт директора  за 2023-2024 н. р. [Автозбережено].ppt
Звіт директора за 2023-2024 н. р. [Автозбережено].ppt
 
звіт 2023-2024 32024 32024 32024 32024 3.pptx
звіт 2023-2024 32024 32024 32024 32024 3.pptxзвіт 2023-2024 32024 32024 32024 32024 3.pptx
звіт 2023-2024 32024 32024 32024 32024 3.pptx
 
Випуск магістрів- науковців факультету мехатроніки та інжинірингу, 2024 р.
Випуск магістрів- науковців факультету мехатроніки та інжинірингу, 2024 р.Випуск магістрів- науковців факультету мехатроніки та інжинірингу, 2024 р.
Випуск магістрів- науковців факультету мехатроніки та інжинірингу, 2024 р.
 
Звіт за результатами самооцінювання щодо освітнього середовища
Звіт за результатами самооцінювання щодо освітнього середовищаЗвіт за результатами самооцінювання щодо освітнього середовища
Звіт за результатами самооцінювання щодо освітнього середовища
 
Постанова №648 уряду від 04 червня 2024 року. .pdf
Постанова №648 уряду від 04 червня 2024 року. .pdfПостанова №648 уряду від 04 червня 2024 року. .pdf
Постанова №648 уряду від 04 червня 2024 року. .pdf
 
Оригінал. Переклад. Види перекладів. Допомога учню
Оригінал. Переклад. Види перекладів. Допомога учнюОригінал. Переклад. Види перекладів. Допомога учню
Оригінал. Переклад. Види перекладів. Допомога учню
 
Проєкт "Подорож містами України". Буковина
Проєкт "Подорож містами України". БуковинаПроєкт "Подорож містами України". Буковина
Проєкт "Подорож містами України". Буковина
 
№ 133, 04.06.2024, підсумки методичної роботи з учителями школи у 2023-2024 ...
№ 133,  04.06.2024, підсумки методичної роботи з учителями школи у 2023-2024 ...№ 133,  04.06.2024, підсумки методичної роботи з учителями школи у 2023-2024 ...
№ 133, 04.06.2024, підсумки методичної роботи з учителями школи у 2023-2024 ...
 
Звіт в.о. директора Лохвицької гімназії.pptx
Звіт в.о. директора Лохвицької гімназії.pptxЗвіт в.о. директора Лохвицької гімназії.pptx
Звіт в.о. директора Лохвицької гімназії.pptx
 

л пр№4

  • 1. ЛАБОРАТОРНО-ПРАКТИЧНА РОБОТА №4 ТЕМА. Основні прийоми роботи з Web-сторінками. Застосування фреймів. МЕТА: ознайомлення з основними прийомами роботи з Web-сторінками. Навчитися застосовувати фрейми для роботи з HTML-документами. ТРИВАЛІСТЬ ЗАНЯТТЯ: 3 години. МІСЦЕ ПРОВЕДЕННЯ: кабінет інформатики. МАТЕРІАЛИ ТА ОБЛАДНАННЯ: персональні комп’ютери, інструкції, програмне забезпечення: ОС Windows XP, Блокнот. МЕТОД ПРОВЕДЕННЯ: індивідуальний. Теоретичні відомості Для швидкого завантаження вашого HTML-документа дуже часто використовують фрейми. Фрейми розбивають вікно на 2, 3 і навіть більш частин (але не слід захоплюватися). В кожному фреймі відображається свій документ HTML і кожний з фреймів може мати (або не мати) власних посилань, зображень, смуг прокрутки і багато чого іншого. Фрейми можуть також функціонувати незалежно один від одного. Для відображення фреймів необхідні три файли: настановний файл і два початкові файли HTML. Відкриваючим тегом є <FRAMЕSET>, який вставляється після тега </HEAD>, але до тега <BODY>. Відкриваючий тег визначає місцерозташування фреймів у вікні браузера. Атрибутами тега <FRAMЕSET> служать: COLS - фрейми розташовуються по вертикалі ROWS - фрейми розташовуються по горизонталі Цим атрибутам привласнюються числові значення, виражені в пікселях або у відсотках. Наприклад: <FRAMSET COLS="10,50,*">. В даному випадку тег створює три вертикальні стовпці розмірами: перший - 10 пікселів, другий - 50 пікселів, третій займає частину вікна, що залишилася. Після тега <FRAMЕSET> вставляється тег <FRAME>, якому можуть привласнюватися наступні атрибути: SRC= - вказується назва файлу, який розташовуватиметься в тому або іншому фреймі (*) NAME= - цей атрибут важливий для вказівки на один файл з іншого (*) BORDER= - визначає ширину розділової смуги між фреймами (вимірюється в пікселях)(*) BORDERCOLOR= - задає колір розділової смуги (вимірюється в RGB) NORESIZE - забороняє зміну розмірів фреймів користувачем за допомогою миші SCROLLING= - задає смуги прокрутки у фреймах. Даний атрибут може мати наступні аргументи: YES - смуга прокрутки буде видна NO - смуга прокрутки не буде видна AUTO - смуга прокрутки задається автоматично MARGINHEIGHT= - цим атрибутом додається порожнє поле між верхньою межею фрейма і початком тексту або графіки (вимірюється в пікселях) MARGINWIDTH= - а цим атрибутом додається порожнє поле між бічними межами фрейма і текстом або графікою (вимірюється в пікселях) обов'язковий атрибут для тега <FRAME> Для браузерів, що не підтримують фрейми, поміщається повідомлення як "тіло" (<BODY>) файлу між тегами <NOFRAME> і </NOFRAME>. Наведемо два приклади: 1. <HTML> <HEAD> <TITLE> моя перша сторіночка </TITLE> </HEAD> <FRAMЕSET COLS="30%,* BORDER="1"> <FRAME SRC="file1.htm" NAME="file1” SCROLLING="AUTO"> <FRAME SRC="file2.htm" NAME="file2” SCROLLING="AUTO"> </FRAMESET> <BODY> <NOFRAME> <P> Для перегляду необхідний браузер, що підтримує фрейми. </NOFRAME> </BODY> </HTML> 2. <HTML> <HEAD> <TITLE></TITLE> </HEAD> <FRAMЕSET ROWS="20%,*"> <FRAME SRC="file3.htm" NAME="file3 SCROLLING="AUTO">" <FRAMЕSET COLS="30%,*"> <FRAME SRC="file1.htm" NAME="file1 SCROLLING="AUTO">" <FRAME SRC="file2.htm" NAME="file2 SCROLLING="AUTO">" </FRAMESET> </FRAMESET> <BODY> <NOFRAME> <P> Для перегляду необхідний браузер, що підтримує фрейми. </NOFRAME> </BODY> </HTML> За допомогою вказівок на фрейм можна змінити файл, розташований в іншому фреймі. Щоб ця вказівка спрацювала правильно, вимагається виконати наступні умови: Створюючи фрейм в настановному файлі, необхідно задати його назву Задаючи посилання, слід використовувати його назву, щоб вказати, в якому фреймі повинен бути зображений файл HTML, на який є посилання. Для того, щоб змінився файл, розташований в іншому фреймі, необхідно в тег <A HREF= > додати атрибут TARGET=, в якому вказати ім'я (NAME), на яке робиться посилання. Наприклад: Якщо посилання розташовується у файлі file1.htm (лівий фрейм), а необхідно змінювати тільки правий фрейм, то у файлі file1.htm робиться посилання: Тут буде <A HREF="file2.htm TARGET="file2"> посилання" </A> на файл file2.htm ЗАВДАННЯ:
  • 2. 1. Відкрийте текстовий редактор Блокнот. 2. На основі даної web- сторінки створіть сайт про країни світу. 3. Добийтеся вдалого розташування інформації у фреймах, відформатуйте тексти, задайте необхідні параметри в тегах <BODY>. 4. Задайте жовтий фон для фреймів. 5. Задайте смуги прокручування. 6. У вузькому верхньому фреймі розташуйте особисту емблему з деякого графічного файлу. 7. У правому нижньому фреймі організуйте перегляд сторінок. 8. Удоскональте сайт, щоб він виглядав якнайліпше. КОНТРОЛЬНІ ЗАПИТАННЯ: 1. Що таке фрейми? 2. Які файли потрібні для створення сайту з фреймами? 3. Яке призначення основного html-файлу? 4. Що відображають зазвичай у лівому фреймі сайту? 5. Які параметри може мати тег <FRAMESET>? 6. Які параметри може мати тег <FRAME>? 7. Яке призначення атрибута ROWS? 8. Як створюються складні конфігурації фреймів? 9. Що означає запис COLS=”30%, *”? 10. Що означає запис COLS=”1*, 4*”? 11. Що означає запис COLS=”120, 240, *”? 12. Які фрейми створить параметр COLS=”25%, 50%, 25%”? 13. Яке призначення параметра TARGET? 14. Яке призначення тега-контейнера NOFRAME? 15. Яке призначення параметра SCROLLING? 16. Яке призначення параметра FRAMEBORDER? ОФОРМЛЕННЯ РОБОТИ: робота оформляється на стандартних листах (ф. А4) в папках. Звіт повинен містити: 1. Номер роботи, тему, мету, матеріали та обладнання; 2. Дайте відповіді на контрольні запитання згідно номера в журналі: Номер в журналі Контрольні запитання 1, 4, 8, 12, 16, 20, 24, 28 15, 11, 13, 7, 4 2, 5, 9, 13, 17, 21, 25, 29 2, 5, 12, 14, 8 3, 6, 10, 14, 18, 22, 26 1, 3, 10, 12, 16 7, 11, 15, 19, 23, 27, 30 6, 9, 2, 5, 11 3. Вкінці роботи має бути написаний висновок. ОЦІНКА РОБОТИ: робота оцінюється за кінцевими результатами за 12-бальною системою (при захисті необхідно знати відповіді на всі контрольні запитання). ЛІТЕРАТУРА:  Глинський Я.М. Інформатика 8-11 класи, Навчальний посібник для загальноосвітніх навчальних закладів (4-те видання). – Л.: 2004.  Гаєвський О.Ю. Інформатика 7-11 класи, Навчальний посібник. – К.: А.С.К., 2005.  Глинський Я.М., Ряжська В.А. Інтернет, Навчальний посібник, Самоучитель 4-те доповн.вид. – Львів, 2007