ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 13.04.2024
Просмотров: 9
Скачиваний: 0
Лабораторна робота №6
Тема: Розробка веб-сторінок із використанням фреймів
Мета: Придбання навиків створення фреймів; придбання навиків створення простого Web-cauma, що складається з декількох HTML-документів, і посилань в певний фрейм.
Теоретичні відомості
Фрейм (frame) — рамка, область сторінки — дозволяє розділяти екран на декілька областей, в кожній з яких відображається вміст окремої сторінки або Web-вузла.
Для завдання фреймів використовується парний тег <Frameset> ... </Frameset>, а для їх опису — Ter<Frame>.
Для завдання розташування і розмірів фреймів у тегу <Frameset> використовуються атрибути cols(стовпці) i rows (рядки).
Для опису змісту кожної області в тегу <Frame> використовується атрибут src=iм’я_сторінки. html
Приклади:
a) <Frameset Cols=«30%, 30% *» > <Frame src= "si.html" > <Frame src= "s2.html"> <Frame src= "s3.html" > </Frameset>
ділить сторінку на 3 вертикальних області, відводячи на 1 і 2 по 30%, а на 3 - частину, що залишилася, і розміщує в кожній частині відповідно sl.html, s2.html і s3.html сторінки.
-
Якщо в прикладі а) замінити Cols на Rows=«30%, 30% *», то сторінка буде розділена на 3 горизонтальних області, 1 і 2 по 30%, а на 3 - частина, що залишилася. У кожній частині відповідно будуть розміщені sl.html, s2.html і s3.html сторінки.
-
<Frameset Cols= «30% *» > <Frame src= "sl.html" > <Frameset Rows= «50%,50%» > <Frame src= "s2.html" > <Frame src= "s3.html"> </Frameset>
</Frameset>
Сторінка буде розділена на 2 вертикальних області, відводячи на 1 - 30%, і частину, що залишилася, на другу. Друга область у свою чергу розділена на 2 горизонтальних області, по 50% на кожну частину. У кожній частині відповідно будуть розміщені sl.html, s2.html'і s3.html сторінки.
Зауваження. Розбиття сторінки на частини можна виконати так само за допомогою тега <Table> i парного тега <ІFrame></ ІFrame > (організовує "плаваючий" фрейм), усередині якого можна відобразити який-небудь документ або об'єкт.
Інші атрибути тега <Frameset>:
-
border=n - ширина межі фрейма;
-
bогdегсо1ог=колір - колір межі фрейма. Інші атрибути тега <Frame>:
-
noresize - заборона зміни розміру фрейма;
-
frameborder=yes|no - відповідно залишити межа прибрати межу;
• scrolling=yes|no|auto - відповідно смуги прокрутки завжди присутні / смуг прокрутки немає / смуги прокрутки присутні при необхідності;
-
marginwidth=n i marginheight=n - управляють відступом зображення усередині фрейма (п - ціле число)
-
пате=имя_фрейма — дозволяє задати фрейму ім'я, яке потім може використовуватися, наприклад при створенні гіперпосилань.
Зв'язок між фреймами.
Для того, щоб сторінка, викликана по гіперпосиланню, відкрилася в потрібному фреймі, необхідно в тзге<А> в атрибуті target вказати ім'я цього фрейма.
Наприклад, якщо фрейму, що відображає сторінку 2 задати ім'я «nomber2»:
<Frameset cols= «30% *» >
<Frame src=sl.html >
<Frame src=s2.html name=nomber2>
</Frameset> a в документі si.html помістити посилання:
<A href=s3.html target=nomber2> стрЗ </А> to сторінка 3 відкриється не в першому, а в другому фреймі.
Порядок виконання роботи:
1 завдання. Виконаєте підготовчу роботу: створивши 3 сторінки, для кожної з яких задайте свій колір фону, заголовок 1 рівня «Сторінка №.» і довільний малюнок, збережете сторінки під іменами strl.html, str2.html, str3.html.
2 завдання. Створіть сторінку, що складається з 3 рівних вертикальних областей. У кожній з яких
відобразите відповідно вміст 1, 2 і 3 сторінок. Задайте ширину і колір меж фреймів за бажанням. Збережіть ії під ім'ям vert.html.
3 завдання. Зміните сторінку, замінивши вертикальне ділення на горизонтальне. Приберіть ширину та колір меж фреймів. У першому фреймі встановіть заборону на зміну його розміру. Збережіть HTML-документ під ім'ям gor.html.
4 завдання. Створіть HTML-документ під ім'ям glav.html, що складається з 2 вертикальних областей (розміри яких відносяться, як 1:3).
У лівій області повинен відображатися HTML-документ з заголовком Зміст і гіперпосилання на 1, 2 і 3 сторінки {strl.html, str2.html, str3.html). Гіперпосилання, організовуйте, так, щоб сторінки 1, 2 і 3 відображалися в правій області.
5 завдання. Створіть HJML-документ під ім'ям str4.html: задайте заголовок 1 рівня «Сторінка №.» і визначення «Фрейм (frame) — рамка, область сторінки — дозволяє розділяти екран на декілька областей, в кожній з яких відображається вміст окремої сторінки или Web-узла.».
6 завдання. Створіть HTML-документ під ім'ямplav.html: задайте свій колір фону, відцентрований заголовок 1 рівня «Приклад плаваючого фрейма» і відцентрований "плаваючий " фрейм {шириною - 30%, заввишки - 200 піксель), що відображає вміст сторінки 4 (str4.html).
7 завдання. Створіть HTML-документ під ім'ям ram.html, що складається з 3 рівних вертикальних
областей, третю область розділите на дві рівні горизонтальні області. У кожній з яких відобразите відповідно вміст 1, 2, 3 і 4 сторінок.
8 завдання. Продемонструйте викладачеві результати роботи: vert.html, gor.html, glav.html, plav.html, ram.html.
9 завдання. Розробити дві сторінки і зв'язати їх за допомогою гіперпосилань. Одна із сторінок
повинна мати фреймову структуру (поділену на частини на ваш розсуд): у одній частині розмістити зображення, у другій - таблицю, у третій гіперпосилання на другу сторінку.
Контрольні запитання
-
Що таке фрейм?
-
Чим відрізняється структура HTML-кода фрейма від структури HTML-документаі
-
Яке значення атрибута rows?
-
У якому форматі призначаються значення атрибутам rows i cols?
-
Знати призначення тегів і їх атрибутів, які були використані в даній лабораторній роботі.