МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ НАЦІОНАЛЬНИЙ УНІВЕРСИТЕТ «ЛЬВІВСЬКА ПОЛІТЕХНІКА» ІНСТИТУТ КОМП’ЮТЕРНИХ НАУК ТА ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ КАФЕДРА АВТОМАТИЗОВАНИХ СИСТЕМ УПРАВЛІННЯ / Лабораторна робота №10 з дисципліни ' Веб-технології та веб-дизайн ' на тему: ' Робота з фреймами ' Лабораторна робота №10 Тема роботи: Робота з фреймами. Мета роботи: Створити Web-вузол з використанням фреймів. Порядок виконання роботи 1.Ознайомтеся з текстом лабораторної роботи. 2.Відкрийте WEB-браузер Internet Explorer, запустіть програму створену на першій лабораторній роботі. 3.В Internet Explorer’ і зайдіть в меню View\Source або на інформативному полі клацніть правою клавішею миші і виберіть пункт View\Source. 4.Перед вами запуститься програма Notepad, і ви можете добавляти текст і нові дескриптори, що запропоновані вище, в тіло вашого HTML-документу. 5.Створіть індексну сторінку з горизонтальними фреймами. 6.По завершені роботи збережіть свій файл для подальшого використання на наступних лабораторних роботах. Постановка завдання: 1.Додайте вертикальний фрейм; 2.Зробіть правий і лівий фрейм рівні по ширині; 3.Заберіть рамку між фреймами; 4.Зробіть границю між фреймами рухомою; 5.Зробіть плаваючий фрейм. Код програми: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Згадую основи HTML</title> </head> <frameset cols="17%,83%" frameborder="0" framespacing="0" border="0" > <frame src="menu.html"> <frame src="content.html" name="main"> </frameset> </body> </html> main.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body bgcolor="#f0f8ff" link="black" vlink="black" alink="#191970"> <h1>Каталог</h1> <details> <summary><a href="lab10.html">Лижне спорядження</a></summary> <p>Лижний комплект</p> <p>Шоломи</p> <p>Окуляри</p> <p>Чохли для лиж і спорядження</p> <p>Сноуборди</p> <p>Аксесуари</p> </details> <details> <summary><a href="lab10.html">Туристичне спорядження</a></summary> <p>Наплічники</p> <p>Намети</p> <p>Спальні мішки</p> <p>Килимки</p> <p>Термоси і термогорнятка</p> <p>Туристичний посуд</p> <p>Аксесуари</p> </details> <details> <summary><a href="lab10.html">Велосипеди</a></summary> <p>Чоловічі велосипеди</p> <p>Жіночі велосипеди</p> <p>Дитячі велосипеди</p> <p>Велосипеди BMX</p> <p>Фет байки</p> <p>Аксесуари</p> </details> <details> <summary><a href="lab10.html">Кемпінг, відпочинок</a></summary> <p>Казани туристичні</p> <p>Меблі для кемпінгу</p> <p>Холодильники, термоконтейнери</p> <p>Аксесуари</p> </details> <details> <summary><a href="lab10.html">Дайвінг, плавання</a></summary> <p>Гідрокостюми</p> <p>Ласти</p> <p>Набори для нирнання</p> <p>Водні лижі</p> <p>Рятувальні жилети</p> <p>Прибори для дайвінгу</p> <p>Аксесуари</p> </details> <details> <summary><a href="lab10.html">Човни та мотори</a></summary> <p>Човни</p> <p>Мотори</p> <p>Аксесуари для моторів</p> </details> <p></p> <p></p> <p></p> </body> </html> content.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { background: url("forest_sky_fog_mountains_110519_1366x768.jpg")no-repeat; } hr{ width: 800px; align-items: center; background-image: linear-gradient(to right, #848484, #000000, #848484); border: 0; height: 1px; } P { text-indent: 36.5em; /* Отступ первой строки */ text-align: justify; /* Выравнивание по ширине */ } </style> </head> <body link="black" vlink="black" alink="white"> <div align="center"> <h1>ПРОКАТ</h1> <hr> <h3>Телефони прокатного пункту:</h3> <p>+38 (095) 805 80 09</p> <p>+38 (097) 025 64 94</p> <h3>Розклад роботи:</h3> <p>понеділок-п'ятниця - з 10:00 до 19:00</p> <p>субота - з 10:00 до 18:00</p> <p>неділя - з 11:00 до 14:00</p> </div> <h4 align="center">Ми гарантуємо вам найгостріші канти, та нові лижі. Всі наші прокати обладнані новим спеціальними прокатним спорядженням від брендів. Ви жодного разу не будете червоніти за своє спорядження на схилах.<br> <p></p> Ми відповідально ставимося до санітарії, і вашого здоров'я. Усе прокатне взуття, для запобігання утворення грибків та знищення бактерій, спеціально обробляється ультрафіолетом.</h4> <h3><u>Важливо!</u></h3> <ul> <li>ВИДАЧА ПРОКАТНОГО СПОРЯДЖЕННЯ МОЖЛИВА ТІЛЬКИ ПРИ НАЯВНОСТІ ПАСПОРТА З ПРОПИСКОЮ У МІСТІ ЛЬВОВІ!!! ДЛЯ ЖИТЕЛІВ ІНШИХ НАСЕЛЕНИХ ПУНКТІВ - ПРИ УМОВІ ВНЕСЕННЯ ЗАСТАВИ У РОЗМІРІ ВАРТОСТІ СПОРЯДЖЕННЯ!</li> <li>НА ОДИН ПАСПОРТ МОЖНА ВЗЯТИ ЛИШЕ ОДНУ ОДИНИЦЮ (або ОДИН КОМПЛЕКТ) СПОРЯДЖЕННЯ!</li> </ul> <a href="lab10.html"><h3>Умови прокату</h3></a> <iframe src="bottom.html" width="100%" height="100" frameborder="0" framespacing="0" border="0"></iframe> </body> </html> bottom.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p align="center">Якщо ви запланували тур у Карпати, але ще не визначилися, де взяти напрокат лижі, сноуборди або інше спорядження, тоді наш прокат до ваших послуг.</p> <h5 align="center">м.Львів, вул Драгана 17</h5> </body> </html> Результат виконання програми / / Висновок Під час виконання цієї лабораторної роботи я оволоділа практичними навичками створення Web-вузолів з використанням фреймів.