АвтоАвтоматизацияАрхитектураАстрономияАудитБиологияБухгалтерияВоенное делоГенетикаГеографияГеологияГосударствоДомДругоеЖурналистика и СМИИзобретательствоИностранные языкиИнформатикаИскусствоИсторияКомпьютерыКулинарияКультураЛексикологияЛитератураЛогикаМаркетингМатематикаМашиностроениеМедицинаМенеджментМеталлы и СваркаМеханикаМузыкаНаселениеОбразованиеОхрана безопасности жизниОхрана ТрудаПедагогикаПолитикаПравоПриборостроениеПрограммированиеПроизводствоПромышленностьПсихологияРадиоРегилияСвязьСоциологияСпортСтандартизацияСтроительствоТехнологииТорговляТуризмФизикаФизиологияФилософияФинансыХимияХозяйствоЦеннообразованиеЧерчениеЭкологияЭконометрикаЭкономикаЭлектроникаЮриспунденкция

ХІД РОБОТИ. 1. Скопіювати в теку HTML графічний файл l.jpg

Читайте также:
  1. Автоматизация и роботизация
  2. Алгоритм роботи командирiв щодо попередження та подолання конфлiктних ситуацiй
  3. Алгоритми роботи посадових осіб щодо профілактики суїцидальних проявів
  4. Аналіз ефективності роботи основних засобів та довгострокових інвестицій
  5. Аналіз роботи системи
  6. Б. Аварійний режим роботи трьохфазної мережі з ізольованою нейтраллю.
  7. Варіанти питань до модульної контрольної роботи
  8. Варіанти питань до модульної контрольної роботи
  9. Варіанти питань до модульної роботи
  10. Вибір оптимального режиму роботи і відпочинку
  11. Вибір теми курсової роботи
  12. Види органів держави. Поділ влади як принцип організації роботи державного апарату

 

1. Скопіювати в теку HTML графічний файл l.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="1.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>

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

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

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

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

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

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

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

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

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

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

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

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

<body>

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

</body>

</html>

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

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

________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________ 13. HTML-код документу Menu.html:

______________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

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

__________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

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

_______________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

 

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

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

__________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

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

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

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

_______________________________________________________________________

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

_____________________________________________________________________

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

__________________________________________________________________________________________________________________________________________________

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

_______________________________________________________________________________________________________________________________________________

 

 

Висновок: ___________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________


1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |

Поиск по сайту:

Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Студалл.Орг (0.009 сек.)