ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 13.04.2024
Просмотров: 6
Скачиваний: 0
Лабораторна робота №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 Приклади:
-
<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нки.
-
Якщо в прикладi а) замiнити Cols на Rows=«30%, 30% *», то сторшка буде роздiлена на 3 горизонтальних обласп, 1 i 2 по 30%, а на 3 - частина, що залишилася. У кожнш частит вщповщно будуть розмщеш s1.html, s2.html i s3.html сторшки.
-
<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дкриеться не в першому, а в другому фреймг
Порядок виконання роботи:
-
завдання. Виконаете шдготовчу роботу: створивши 3 сторшки, для кожжп з яких задайте свш кол1р фону, заголовок 1 ргвня «Сторшка №.» i довтъний малюнок, збережете сторшки пщ iменами str1.html, str2.html, str3.html.
-
завдання. Створпъ стор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.
-
завдання. Створпъ 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й обласп.
-
завдання. Створпъ 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з сторшок
повинна мати фреймову структуру (поддлену на частини на ваш розсуд): у однш частит розмютити зображення, у другш - таблицю, у третш пперпосилання на другу сторшку.
Контрольш запитання
-
Що таке фрейм?
-
Чим вiдрiзняеться структура HTML-кода фрейма вщ структури HTML-документа?
-
Яке значення атрибута rows?
-
У якому форма^ призначаються значення атрибутам rows i cols?
-
Знати призначення тепв i ix атрибутiв, якi були використат в данiй лабораторнiй роботi.