ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 14.04.2024
Просмотров: 7
Скачиваний: 0
Лабораторна робота №6
Тема: Робота з фреймами
Мета: Придбання навиків створення фреймів; придбання навиків створення простого Web-сайта, що складається з декількох HTML-документів, і посилань в певний фрейм.
Теоретичні відомості
Фрейм (frame) — рамка, область сторінки — дозволяє розділяти екран на декілька областей,
в кожній з яких відображається вміст окремої сторінки або Web-вузла. |
|
||||
Для |
завданняфреймів використовується |
парний |
тег<Frameset> … </Frameset>, а для їх |
||
опису — тег<Frame>. |
|
|
|
|
|
Для |
завдання розташування і розмірів фреймів у тегу <Frameset> використовуються |
||||
атрибути cols(стовпці) і rows (рядки). |
|
тегу<Frame> використовується |
|
||
Для опису змісту |
кожної |
областів |
атрибут |
||
src=і’мя_сторінки.html |
|
|
|
|
|
Приклади: |
|
|
|
|
|
a)<Frameset Cols=«30%, 30% *» > <Frame src= “s1.html” > <Frame src= “s2.html”>
<Frame src= “s3.html” > </Frameset>
ділить сторінку на 3 вертикальних області, відводячи на 1 і 2 по 30%, а на 3 - частину, що залишилася. І розміщує в кожній частині відповідно s1.html, s2.html і s3.html сторінки.
b)Якщо в прикладі а) замінити Cols на Rows=«30%, 30% *», то сторінка буде розділена на 3 горизонтальних області, 1 і 2 по 30%, а на 3 – частина, що залишилася. У кожній частині відповідно будуть розміщені s1.html, s2.html і s3.html сторінки.
c)<Frameset Cols= «30% *» >
<Frame src= “s1.html” > <Frameset Rows= «50%,50%» > <Frame src= “s2.html” > <Frame src= “s3.html”> </Frameset>
</Frameset>
Сторінка буде розділена на 2 вертикальних області, відводячи на 1 – 30%, і частину, що залишилася, на другу. Друга область у свою чергу розділена на 2 горизонтальних області, по 50% на кожну частину . У кожній частині відповідно будуть розміщені s1.html, s2.html і s3.html сторінки.
Стр 1 |
Стр2 |
Стр3 |
|
Стр 1 |
|
Стр1 |
Стр2 |
|
|
|
|
|
|
|
|
|
|
|
|
Стр2 |
|
|
|
|
|
|
|
|
|
Стр3 |
|
|
|
|
|
|
|
|
|
|
|
|
|
Стр 3 |
|
|
|
|
|
|
|
|
|
|
|
Приклад а) |
|
Приклад b) |
|
|
|
||
|
|
Приклад c) |
Зауваження. Розбиття сторінки на частини можна виконати так само за допомогою тега <Table> і парного тега <Iframe></Iframe> (організовує “плаваючий” фрейм), усередині якого можна відобразити який-небудь документ або об'єкт.
Інші атрибути тега <Frameset>:
·border=n – ширина межі фрейма;
·bordercolor=цвет – колір межі фрейма. Інші атрибути тега <Frame>:
·noresize – заборона зміни розміру фрейма;
·frameborder=yes|no – відповідно залишити межа прибрати межу;
· scrolling=yes|no|auto – відповідно смуги прокрутки завждиприсутні / смуг прокрутки немає / смуги прокрутки присутні при необхідності;
1
·marginwidth=n і marginheight=n – управляють відступом зображення усередині фрейма (n
– ціле число)
·name=имя_фрейма – дозволяє задати фрейму ім,'яяке потім може використовуватися, наприклад при створенні гіперпосилань.
Зв'язок між фреймами.
Для того, щоб сторінка, викликана по гіперпосиланню, відкрилася в потрібному фреймі, необхідно в тэге<A> в атрибуті target вказати ім'я цього фрейма.
Наприклад, якщо фрейму, що відображає сторінку 2 задати ім'я «nomber2»: <Frameset cols= «30% *» >
<Frame src=s1.html >
<Frame src=s2.html name=nomber2> </Frameset>
а в документі s1.html помістити посилання: <A href=s3.html target=nomber2> стр3 </A>
то сторінка 3 відкриється не в першому, а в другому фреймі.
Порядок виконання роботи:
1завдання. Виконаєте підготовчу роботу: створивши 3 сторінки, для кожної з яких задайте свій колір фону, заголовок 1 рівня «Сторінка №.» і довільний малюнок, збережете сторінки під іменами str1.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 сторінки (str1.html, str2.html, |
str3.html). Гіперпосилання, організовуйте, |
так, щоб |
|||||||||
|
сторінки 1, 2 і 3 відображалися в правій області. |
|
|
|
|
|
|
|
|
|||
5 |
завдання. Створіть HTML-документ під |
|
ім'ям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 |
завдання. Розробити дві сторінки і зв’язати їх за допомогою гіперпосилань. Одна із сторінок |
||||
|
повинна мати фреймову структуру(поділену на частини на ваш розсуд): у одній частині |
||||
|
розмістити зображення, у другій – таблицю, у третій гіперпосилання на другу сторінку. |
|
Контрольні запитання
1.Що таке фрейм?
2.Чим відрізняється структура HTML-кода фрейма від структури HTML-документа?
3.Яке значення атрибута rows?
4.У якому форматі призначаються значення атрибутам rows і cols?
5.Знати призначення тегів і їх атрибутів, які були використані в даній лабораторній роботі.
2