Роздрукувати сторінку
Главная \ Методичні вказівки \ Методичні вказівки \ 860 Лабораторна робота 7 на тему Створення фреймів з курсу Сучасні Internet-технології, НУДПСУ

Лабораторна робота 7 на тему Створення фреймів з курсу Сучасні Internet-технології, НУДПСУ

« Назад

860 Лабораторна робота 7 на тему Створення фреймів з курсу Сучасні Internet-технології, НУДПСУ

Лабораторна робота № 7 Створення фреймів

Мета роботи: навчитись створювати фрейми.

Хід роботи

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

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

3. У файлі Frame.html визначимо чотири фрейми зі структурою, показаною на рис. 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-код.

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

<html>

<head>

<title>logo</title>

</head>

<body >

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

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

</body>

</html>

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

<html>

<head>

<title>menu</title>

</head>

<body>

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

Ціни<br><br>

Погода

</body>

</html>

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

<html>

<head>

<title>content</title>

</head>

<body>

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

</body>

</html>

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

<html>

<head>

<title>bottom</title>

</head>

<body>

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

</body>

</html>

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

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>

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>

Переглянемо цей документ у вікні браузера (рис. 4).

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 у браузері (рис. 5).

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

Запишемо HTML-код та переглянемо документ у вікні браузера (рис. 6):

<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. Переглянемо новий документ на рис. 7.

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

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

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

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

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

<body>

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

</body>

</html>

10.2.   Задамо ім’я для фрейма, на який буде гіперпосилання ( нас це фрейм 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>

10.3.   Скорегуємо 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 у вікні браузера (рис. 8).

Переглянемо у вікні браузера ситуації після реалізації чотирьох посилань на рис. 9, 10, 11.

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

11. За допомогою  парного тегу <iframe> у документі logo1.html визначимо плаваючий фрейм, у якому буде відображатись HTML-файл float.html. Для цього:

11.1.   У теці HTML створюємо файл float.html та записуємо у ньому наступний HTML-код:

<html>

<head>

<title>float</title>

</head>

<body>

<ul>

<h2>Тури:</h2>

<li>ОАЕ

<li>Болгарія

<li>Італія

<li>Таїланд

</ul>

</body>

</html>

11.2.     Створюємо файл logo1.html, який є копією файлу logo.html та буде розміщений у теці  HTML.  Корегуємо HTML-код  документа logo1.html:

<html>

<head>

<title>logo1</title>

</head>

<body>

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

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

<iframe src="float.html" height="150" width="270" scrolling="yes" align="right"  valign="bottom" hspace="10" vspace="10">

Ваш браузер не дозволяє відображати плаваючі фрейми

</iframe>

</body>

</html>

Переглянемо результат відображення цього HTML-коду  у вікні браузера (рис. 12).

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

Завдання для самостійної роботи

  1. Визначити фрейм з структурою, вказаною викладачем.

  2. Оформити звіт.

Питання для самоперевірки

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

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

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

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

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

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

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

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

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

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

З повагою ІЦ “KURSOVIKS”!