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

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

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

Мета: Придбання навиюв створення фреймов; придбання навиюв створення простого Web-сайта, що складаеться з декшькох ИТМЬ-документгв, i посилань в певний фрейм.

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

Фрейм (frame) — рамка, область сторшки — дозволяе роздшяти екран на декшька областей, в кожнiй з яких вщображаеться вмiст окремо'1 сторшки або Web-вузла.

Для завдання фреймгв використовуеться парний тег <Frameset> ... </Frameset>, а для ix опису — тег<Бгате>.

Для завдання розташування i розм1р1в фреймiв у тегу <Frameset> використовуються атрибути cols(стовпцi) i rows (рядки).

областг в тегу <Frame> використовуеться атрибут

Для опису змгсту кожног src=i' мя_стор шки. html Приклади:

1. <Frameset Cols=«30%, 30% *» > <Frame src= "sl.html" > <Frame src= "s2.html"> <Frame src= "s3.html" > </Frameset>

дiлить сторiнку на 3 вертикальних областi, вiдводячи на 1 i 2 по 30%, а на 3 - частину, що залишилася. I розмщуе в кожнш частиш вщповщно s1.html, s2.html i s3.html сторiнки.

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

3. <Frameset Cols= «30% *» > <Frame src= "sl.html" > <Frameset Rows= «50%,50%» > <Frame src= "s2.html" > <Frame src= "s3.html"> </Frameset>

</Frameset>

Сторiнка буде роздiлена на 2 вертикальних област, вiдводячи на 1 - 30%, i частину, що залишилася, на другу. Друга область у свою чергу роздшена на 2 горизонтальних обласп, по 50% н а кожну частину. У кожнш частит вщповщно будуть розмщеш s1.html, s2.html i s3.html сторшки.

Стр 1

Стр2

Стр 3

Стр1	Стр2
	Стр3

^{Приклад а) Приклад b)} Приклад c)

Зауваження. Розбиття сторшки на частини можна виконати так само за допомогою тега <Table> i парного тега <Iframe></Iframe> (оргашзовуе "плаваючий" фрейм), усерединi якого можна вщобразити який-небудь документ або об'ект.

1нцн атрибути тега <Frameset>:

• border=n - ширина межi фрейма;

• bordercolor=цвет - колiр межi фрейма. Iншi атрибути тега <Frame>:

• noresize - заборона змiни розмiру фрейма;

• frameborder=yes|no - вщповщно залишити межа прибрати межу;

• scrolling=yes|no|auto - вщповщно смуги прокрутки завжди присутш / смуг прокрутки немае / смуги прокрутки присутш при необхщносп;

• marginwidth=n i marginheight=n - управляють вiдступом зображення усерединi фрейма (n - щле число)

• name=имя_фрейма - дозволяе задати фрейму iм'я, яке потiм може використовуватися, наприклад при створеннi гiперпосилань.

Зв'язок мг/К фреймами.

Для того, щоб сторiнка, викликана по пперпосиланню, вiдкрилася в потрiбному фреймi, необxiдно в тэге<А> в атрибутi target вказати iм'я цього фрейма.

Наприклад, якщо фрейму, що вщображае сторiнку 2 задати iм'я «nomber2»:

<Frameset cols= «30% *» >

<Frame src=s1.html >

<Frame src=s2.html name=nomber2>

</Frameset> а в документi s1.html помiстити посилання:

<А href=s3.html target=nomber2> стр3 </А> то сторшка 3 вiдкриеться не в першому, а в другому фреймг

Порядок виконання роботи:

4. завдання. Виконаете шдготовчу роботу: створивши 3 сторшки, для кожжп з яких задайте свш кол1р фону, заголовок 1 ргвня «Сторшка №.» i довтъний малюнок, збережете сторшки пщ iменами str1.html, str2.html, str3.html.

5. завдання. Створпъ сторiнку, що складаеться з 3 рiвниx вертикальних областей. У кожнш з яких

вщобразите вщповщно вмют 1, 2 i 3 сторшок. Задайте ширину i колгр меж фреймiв за бажанням. Збережпъ ii пiд iм'ям vert.html.

3 завдання. Змшите сторiнку, замiнивши вертикалъне ддлення на горизонталъне. Приберпъ ширину та колiр меж фреймiв. У першому фреймi встановiть заборону на змшу його розмгру. Збережпъ HTML-документ пщ iм'ям gor.html.

6. завдання. Створпъ HTML-документ пiд iм'ям glav.html, що складаеться з 2 вертикальних областей (розмiри яких вщносяться, як 1:3).

У лiвiй обласп повинен вщображатися HTML-документ з заголовком Змгст i гтерпосилання на 1, 2 i 3 сторiнки (str1.html, str2.html, str3.html). Пперпосилання, органiзовуйте, так, щоб сторшки 1, 2 i 3 вщображалися в правiй обласп.

7. завдання. Створпъ HTML-документ пщ iм'ям str4.html: задайте заголовок 1 ргвня «Сторшка №.» i визначення «Фрейм (frame) — рамка, область сторшки — дозволяе роздтяти екран на дектъка областей, в кожнш з яких вгдображаетъся вмгст окремог сторшки или Web-узла.».

6 завдання. Створпъ HTML-документ пщ iм'ямplav.html: задайте свш колгр фону, вгдцентрований заголовок 1 ргвня «Приклад плаваючого фрейма» i вгдцентрований "плаваючий " фрейм (шириною - 30%, заввишки - 200 ткселъ), що вщображае вмют сторшки 4 (str4.html).

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

областей, третю область розддлите на двi рiвнi горизонталью обласп. У кожнш з яких вщобразите вщповщно вмют 1, 2, 3 i 4 стоянок.

8 завдання. Продемонструйте викладачевi результати роботи: vert.html, gor.html, glav.html, plav.html, ram.html.

9 завдання. Розробити двi сторшки i зв'язати ix за допомогою гшерпосилань. Одна iз сторшок

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

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

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

9. Чим вiдрiзняеться структура HTML-кода фрейма вщ структури HTML-документа?

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

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

12. Знати призначення тепв i ix атрибутiв, якi були використат в данiй лабораторнiй роботi.

1