WEB - дизайн / Лабораторні роботи / Лабораторна робота №6

Лабораторна робота №6

Тема: Робота з фреймами

Мета: Придбання навиків створення фреймів; придбання навиків створення простого Web-сайта, що складається з декількох HTML-документів, і посилань в певний фрейм.

Теоретичні відомості

Фрейм (frame) — рамка, область сторінки — дозволяє розділяти екран на декілька областей,

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 сторінки.

Зауваження. Розбиття сторінки на частини можна виконати так само за допомогою тега <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 рівних вертикальних областей. У кожній з яких

“плаваючий” фрейм (шириною – 30%, заввишки – 200 піксель), що відображає вміст сторінки 4 (str4.html).

7 завдання. Створіть HTML-документ під ім'ям ram.html, що складається з 3 рівних вертикальних

Контрольні запитання

1.Що таке фрейм?

2.Чим відрізняється структура HTML-кода фрейма від структури HTML-документа?

3.Яке значення атрибута rows?

4.У якому форматі призначаються значення атрибутам rows і cols?

5.Знати призначення тегів і їх атрибутів, які були використані в даній лабораторній роботі.

2