Версия 13:05, 25 января 2011

Гіпермаркет Знань>>Інформатика>>Інформатика 10 клас. Повні уроки>> Інформатика: Фрейми.

Тема: Фрейми.

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

Тип уроку: теоретично-практичний

Хід уроку:

Що таке фрейми і навіщо вони потрібні? Фрейми дозволяють відкривати у вікні веб-сторінці одночасно декілька документів наприклад, menu.html, який містить меню сайту, logo.html - з логотипом сторінки, content.html - документ зі змістом сайту і т.д.

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

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

Фрейми створюються за допомогою тега FRAMESET. Зверніть увагу, що в коді html -документа немає тега body!

< html >

< head >

< title >Фрейми< /title >

< /head>

< frameset>< /frameset >

< /html >

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

Створимо перший варіант сторінки з фреймом.

Але перед цим треба створити звичайні *.html документів з логотипом, меню і основним змістом.

< frameset rows="100,*, 150" >

< frame src="logo.html" >

< frame src="content.html" >

< frame src="menu.html" >

< /frameset >

За допомогою атрибуту rows вказується горизонтальне розташування фрейма.

Тут прописується висота кожного фрейма в пікселях (rows="100,*, 150").

А значок * вказує на те, що другий (середній) фрейм займає простір, який залишився, по висоті.

Тег frame визначає документи, які завантажуються у фрейми.

Фрейми можна поміняти місцями:

< frameset rows="100,*, 150" >

< frame src="content.html" >

< frame src="menu.html" >

< frame src="logo.html" >

< /frameset >

Тепер замінимо rows на cols і подивимося на результат

Зараз фрейми розмістилися не по горизонталі, а по вертикалі.

Значить, атрибут rows відповідає за горизонтальне розташування фреймів, cols - за вертикальне.

Спробуємо розмістити фрейми в іншому порядку.

< frameset rows="100,*" >

< frame src="logo.html" >

< /frameset >

< frameset cols="150,*" >

< frame src="menu.html" >

< frame src="content.html" >

< /frameset >

Насамкінець, треба згадати ще про декілька корисних функцій відносно фреймів:

• Атрибут Scrolling з параметром "no" забороняє прокручування фрейма
• Атрибут Noresize - забороняє змінятювати користувачу розмір фрейма
• Атрибут Border зі значенням "0" прибирає видимі межі фреймів
• Атрибут Marginwidth виставляє ширину фрейма
• Атрибут Marginheight виставляє висоту фрейма.

Самоконтроль:

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

2. Яка схема роботи фрейма?

3. Який тег відповідає за створення фреймів?

4. Назвіть основні атрибути фреймів.

Список використаної літератури:

1. Урок на тему: «Використання фреймів в HTML», Кузнецова А. Г., м. Чернігів.

2. Агулар Р. HTML и CSS. Основа любого сайта. - Эксмо, 2010.

3. Квинт И. HTML и XHTML. Языки разметки web-страниц. - Питер, 2010.

4. Богомолова О.Б. Web-конструирование на HTML. - БИНОМ. Лаборатория знаний, 2008.

5. Глинський Я., Ряжська В. Інтернет. Мережі, HTML і телекомунікації. Самоучитель. - Деол, 2007.

Скомпоновано та надіслано викладачем Київського національного університету імені Тараса Шевченка Соловйовим М. С.

Якщо у вас є виправлення чи пропозиції до цього уроку, напишіть нам.

Якщо ви хочете побачити інші виправлення чи пропозиції до уроків, дивіться тут - Образовательный форум.