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

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

ХІД РОБОТИ

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. Як визначити полосу прокрутки у фреймі?__________________________________

_______________________________________________________________________________________________________________________________________________

Висновок:___________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

Дата виконання: _________________ Оцінка: _________________

Підпис викладача: __________________

ПРАКТИЧНА РОБОТА № 9

Тема: Архівція файлів.

Мета: Навчитися використовувати програми-архіватори.

Програмне забезпечення: ОС WINDOWS, WINRAR

Хід роботи

1. В папці D:\Users\Назва_групи створіть папку Lab2і скопіювати в неї декілька папок, текстовий файл (переіменуйте його в Текст.doc) і графічний файл (переіменуйте його в Малюнок.jpg). Розмір папки Lab2 має бути приблизно 10 Мб.

2. Щоб створити файл-архів із файла Текст.doc, потрібно_____________________

__________________________________________________________________________

3. Розпакувати створений архів на Робочий стіл, для цього_____________________

__________________________________________________________________________

4. Створіть файл-архів з усіх файлів, що є в папці Lab2_______________________

5. Створіть архів, що саморозпаковується, з файла Текст.doc, який є в папці Lab2для цього____________________________________________________________________

__________________________________________________________________________

6. Створіть багатотомний архів з усіх файлів, що є в папці Lab2. Його розмір 300 Кбайт для цього______________________________________________________________

___________________________________________________________________________

_________________________________________________________________________

____________________________________________________________________________

7. Створіть файл-архів із файла Малюнок.jpg, який є в папці Lab2.

8. Заповніть таблиці

Ім’я файла	Ступінь стиснення (%)

Ім’я файла	Розмір файла	Розмір в архіві	Тип файла

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

1. Під стисненням розуміють______________________________________________

_______________________________________________________________________________________________________________________________________________________

2. Що таке архівування?___________________________________________________

____________________________________________________________________________

2. Що таке архів?________________________________________________________

____________________________________________________________________________

4. Що таке архіватор?_____________________________________________________

____________________________________________________________________________

5. Що таке архів?_________________________________________________________

__________________________________________________________________________

6. Що таке багатотомний архів?____________________________________________

______________________________________________________________________________________________________________________________________________________

7. Які файли під час архівування мають високий ступінь стиснення, чи втрачається інформація в результаті архівування? ___________________________________________

Дата виконання: _________________ Оцінка: _________________

Підпис викладача: __________________

ПРАКТИЧНА РОБОТА № 11