Текущая версия на 21:27, 4 ноября 2012

Гіпермаркет Знань>>Інформатика>>Інформатика 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.

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

Поставить вопрос о современном образовании, выразить идею или решить назревшую проблему Вы можете на Образовательном форуме, где на международном уровне собирается образовательный совет свежей мысли и действия. Создав блог, Вы не только повысите свой статус, как компетентного преподавателя, а и сделаете весомый вклад в развитие школы будущего. Гильдия Лидеров Образования открывает двери для специалистов  высшего ранга и приглашает к сотрудничеству в направлении создания лучших в мире школ.