4 Курс / переподы / анал / Лабораторна робота №6+

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

2. Якщо в прикладі а) замінити Cols на Rows=«30%, 30% *», то сторінка буде розділена на 3 горизонтальних області, 1 і 2 по 30%, а на 3 - частина, що залишилася. У кожній частині відповідно будуть розміщені sl.html, s2.html і s3.html сторінки.

3. <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 завдання. Розробити дві сторінки і зв'язати їх за допомогою гіперпосилань. Одна із сторінок

повинна мати фреймову структуру (поділену на частини на ваш розсуд): у одній частині розмістити зображення, у другій - таблицю, у третій гіперпосилання на другу сторінку.

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

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

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

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

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

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

1