Практична робота № 8 Тема: Створення фреймів Мета: навчитись створювати фрейми

Програмне забезпечення: Блокнот, Internet Explorer та ОС Windows.

Хід роботи

1. Скопіювати в теку HTML графічний файл Eifel.jpg

2. В теці HTML створити текстовий документ з назвою Frame.html.

3. У файлі Frame.html визначимо чотири фрейми, з структурою показаною на рис. 1.

logo
menu	content
bottom

Рис. 1. Розміщення фреймів у вікні браузера

Ім’я першого фрейму logo, він займає всю ширину сторінки, та в ньому завантажений файл logo.html. Далі ідуть два центральні фрейми: menu, в ньому завантажений файл menu.html та content, в ньому завантажений файл content.html. Фрейм menu займає 25% у ширину, а фрейм content – всій простір, що залишився. Останній фрейм bottom займає нижню частину екрану, в ньому завантажений файл bottom.html. В файл Frame.html запишемо HTML-код для визначення фреймової структури:

<html>

<head>

<title>Створення фреймів</title>

</head>

<frameset rows="25%,50%,25%">

<frame src="logo.html">

<frameset cols="25%,*">

<frame src="menu.html">

<frame src="content.html">

</frameset>

<frame src="bottom.html">

</frameset>

</html>

4. В теці HTML створити текстові документи з назвами logo.html, menu.html, content.html, bottom.html, та запишемо в них такий HTML-код:

HTML-код документу logo.html:

<html>

<head>

<title>logo</title>

</head>

<body >

<img src="Eifel.jpg" height="110" align="left">

<h2 align="center">ТУРИСТИЧНА ФІРМА "АРС"</h2>

</body>

</html>

HTML-код документу menu.html:

<html>

<head>

<title>menu</title>

</head>

<body>

Новини<br><br>

Ціни<br><br>

Погода

</body>

</html>

HTML-код документу content.html:

<html>

<head>

<title>content</title>

</head>

<body>

<center>Зміст документу</center>

</body>

</html>

HTML-код документу bottom.html:

<html>

<head>

<title>bottom</title>

</head>

<body>

<center>Нижній колонтитул документу</center>

</body>

</html>

Відображення фреймів (файлу Frame.html ) в браузері повинно відповідати рис. 2.

Рис. 2. Відображення HTML-документу з чотирма фреймами у вікні браузера

5. Зробимо так, щоб смуга прокрутки у фреймі logo була відсутня. Реалізуємо це за допомогою параметру scrolling тегу <frame>, значення якого в даному випадку буде дорівнювати "no". Корегуємо HTML-код файлу Frame.html :

<frameset rows="25%,50%,25%">

<frame src="logo.html" scrolling="no">

<frameset cols="25%,*">

<frame src="menu.html">

<frame src="content.html" >

</frameset>

<frame src="bottom.html">

</frameset>

Рис. 3. Відображення у браузері чотирьох фреймів, в яких відсутні смуги прокрутки

6. Зробимо так, щоб рамки між фреймами були відсутні. Реалізуємо це за допомогою параметру frameborder тегу <frame>, значення якого в цьому випадку дорівнює 0. КорегуємоHTML-код:

<frameset rows="25%,50%,25%">

<frame src="logo.html" scrolling="no" frameborder=0>

<frameset cols="25%,*">

<frame src="menu.html" frameborder=0>

<frame src="content.html" frameborder=0>

</frameset>

<frame src="bottom.html" frameborder=0>

</frameset>

Переглянемо цей документ у вікні браузера

7. Змінимо значення параметру frameborder з 0 на 1, щоб визначити наявність межі між фреймами. А також визначимо зелений колір межі між фреймами – це робимо за допомогою параметру bordercolor тегу <frame>. Записуємо відповідний HTML-код:

<frameset rows="25%,50%,25%">

<frame src="logo.html" scrolling="no" frameborder=1 bordercolor="green">

<frameset cols="25%,*">

<frame src="menu.html" frameborder=1 bordercolor="green">

<frame src="content.html" frameborder=1 bordercolor="green">

</frameset>

<frame src="bottom.html" frameborder=1 bordercolor="green"> >

</frameset>

Переглянемо документ Frame.html у браузері

8. Визначимо простір усередині кожного фрейму, тобто поля, в межах яких не може бути розміщена ніяка інформація. Реалізуємо це за допомогою параметрів marginheight та marginwidth, значення яких буде дорівнювати 1 пікселю.

Записуємо HTML-код та переглянемо документ у вікні браузера

<frameset rows="25%,50%,25%">

<frame src="logo.html" scrolling="no" frameborder=1 bordercolor="green" margingheight="1" marginwidth="1">

<frameset cols="25%,*">

<frame src="menu.html" scrolling="no" frameborder=1 bordercolor="green"margingheight="1" marginwidth="1">

<frame src="content.html" frameborder=1 bordercolor="green" margingheight="1" marginwidth="1">

</frameset>

<frame src="bottom.html" frameborder=1 bordercolor="green"margingheight="1" marginwidth="1">

</frameset>

Змінимо значення параметрів marginheight та marginwidth з 1 на 20 пікселів для фреймів logo та menu.Переглянемо новий документ.

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

10. Визначимо взаємодію між фреймами.

У файлі menu.html створимо гіперпосилання, перехід по яким буде завантажувати файл з іменем example.html у визначений фрейм. Для цього:

• Створимо файл example.html в теці HTML та запишемо для нього HTML-код :

<html><head><title>example</title></head>

<body>

Текст документу

</body>

</html>

• Задамо ім’я для фрейму, на який буде гіперпосилання – у нас це фрейм content. Скорегуємо HTML-код для файлу Frame.html - фрейму content дамо ім’я "А" :

<frameset rows="25%,50%,25%">

<frame src="logo.html" scrolling="no" frameborder=1 bordercolor="green" margingheight="20" marginwidth="20">

<frameset cols="25%,*">

<frame src="menu.html" scrolling="no" frameborder=1 bordercolor="green"margingheight="20" marginwidth="20">

<frame src="content.html" frameborder=1 bordercolor="green" margingheight="20" marginwidth="20" name="A">

</frameset>

<frame src="bottom.html" frameborder=1 bordercolor="green"margingheight="20" marginwidth="20">

</frameset>

• Корегуємо HTML-код для файлу menu.html: додамо ще один пункт в меню (назвемо його "Повідомлення"), визначимо гіперпосилання на файл example.html :

<html>

<head><title>menu</title></head>

<body>

<a href="example.html"target="A">Новини</a><br><br>

<a href="example.html"target="_blank">Ціни</a><br><br>

<a href="example.html"target="_top">Погода</a><br><br>

<a href="example.html"target="_self">Повідомлення</a>

</body>

</html>

Документ menu.html має чотири гіперпосилання на файл з іменем example.html, але з різним значенням параметру target. Перше гіперпосилання зі значенням target="A" буде завантажувати файл example.html у фрейм з іменем "А". Друге гіперпосилання зі значенням target="_blank" створить нове вікно без імені та завантажить туди необхідний документ. Третє гіперпосилання зі значенням target="_top" завантажить документ у повне вікно замість всій фреймової структури. Четверте гіперпосилання зі значенням target="_self" завантажить документ у фрейм menu замість документу із гіперпосиланнями. Переглянемо оновлений файл Frame.html у вікні браузера

Повторимо друге посилання - файл example.html відкриється в ще однму, новому вікні браузера. Реалізуємо третє посилання - нове вікно браузера не створюється, файл example.html відкривається в тому ж вікні де був фрейм. Повертаємось до фреймової структури за допомогою кнопки Back.

12.Оформити протокол.

КОНТРОЛЬНІ ПИТАННЯ

1. Навіщо використовуються фрейми?

2. Як визначити кількість горизонтальних фреймів?

3. Як визначити кількість вертикальних фреймів?

4. Як визначити розмір фреймів в абсолютних величинах?

5. Як визначити розмір фреймів в відносних величинах?

6. Як встановити наявність границь між фреймами?

7. Як визначити який фрейм буде метою гіперпосилання?

8. Як визначити полосу прокрутки у фреймі?