Лабораторная работа №7. Фреймы в web-страницах Цель работы Основные понятия Фреймы

Лабораторная работа №7. Фреймы в web-страницах
Цель работы: Познакомиться с фреймовой структурой web-страницах.
Основные понятия.
Фреймы позволяют разбить окно браузера на несколько прямоугольных
областей, располагающихся рядом друг с другом. В каждую из областей можно загрузить отдельный HTML-документ, просмотр которого осуществляется
независимо от других. Между фреймами, также как и между отдельными окнами браузера, при необходимости можно организовать взаимодействие, которое заключается в том, что выбор ссылки в одном из фреймов может привести к загрузке нужного документа в другой фрейм или окне браузера.
Для описания структуры фреймов применяются тэги <FRAMESET> и
<FRAME>.
Фреймы определяются в структуре FRAMESET, которая используется
для страниц, содержащих фреймы, вместо раздела BODY. Web-страницы, составленные из фреймов, не могут содержать раздел BODY в своем HTMLкоде. В свою очередь, страницы с разделом BODY не могут использовать
фреймы.
Контейнер из тэгов <FRAMESET> и </FRAMESET> обрамляет каждый
блок определений фрейма. Внутри контейнера <FRAMESET> могут содержаться только тэги <FRAME> и вложенные тэги <FRAMESET>.
Тэг <FRAMESET> имеет два параметра: ROWS (строки) и COLS (столбцы) и записывается в следующем виде:
<FRAMESET ROWS ="список значений" COLS ="список значений">.
Можно определить значения для ROWS или COLS, или обоих вместе.
Необходимо определить, по меньшей мере, два значения хотя бы одного из
этих параметров. Если другой параметр опущен, то его значение принимается равное 100%.
Список значений параметров ROWS и COLS тэга <FRAMESET> представляет собой разделённый запятыми список значений, которые могут задаваться в пикселах, в процентах или в относительных единицах. Число строк
или столбцов определяется числом значений в соответствующем списке:
<FRAMESET ROWS="100, 200, 150">
Контейнер <FRAMESET> .. </FRAMESET> может быть вложен внутрь
другого такого же контейнера.
Тэг <FRAME> определяет одиночный фрейм. Он должен располагаться
внутри пары тэгов <FRAMESET> и </FRAMESET>. Например:
<FRAMESET ROWS="30%, 70%">
<FRAME>
<FRAME>
</FRAMESET>
Создание веб-страниц
Тэг <FRAME> не является контейнером и не имеет завершающего тэга.
Тэг <FRAME> имеет шесть параметров: SRC, NAME, MARGINWIDTH,
MARGINHEIGHT, SCROLLING и NORESIZE, ни один из которых не является
обязательным и не зависит от других.
SRC – определяет URL-адрес документа, который будет загружен изначально в данный фрейм.
NAME – определяет имя фрейма, которое может использоваться для
ссылки к данному фрейму.
MARGINWIDTH и MARGINHEIGHT – устанавливают ширину полей
фрейма, т.е. пространство внутри фрейма, в пределах которого не будет располагаться никакая информация.
SCROLLING – управляет отображением полосы прокрутки. Он может
принимать три значения: YES, N0 или AUTO.
NORESIZE – предотвращает возможность изменения пользователем размера фреймов.
Взаимодействие между фреймами заключается в возможности загрузки документов в выбранный фрейм по команде из другого фрейма. Для этой цели используется параметр TARGET тэга <A>, например:
<А HREF="other.html" TARGET="Frame_1">Щелкните здесь для загрузки документа other.html во фрейм с именем Frame_1</A>.
Порядок выполнения работы
1. Откройте Блокнот.
2. Создайте документ с фреймовой структурой:
<FRAMESET ROWS="20%, 80%">
<FRAME SRC=frame1.html>
<FRAMESET cols="30%, 70%">
<FRAME SRC=frame2.html>
<FRAME SRC= spisok.html name="pr">
</FRAMESET>
</FRAMESET>
3. Сохраните файл в папку D:\Users\...\Web\Lab7\ с именем index7.html .
4. Откройте Paint.
5. В Paint создайте рисунок размером 600х100 точек и сохраните его в папку
D:\Users\...\Web\ Lab7\ в формате JPG под именем pic.
6. Создайте HTML-документ с именем frame1.html . в нём:
 измените фоновый цвет;
 вставьте рисунок pic, сделайте, чтобы он выравнивался по центру.
7. Создайте HTML-документ с именем frame2.html с текстом:
Список
Таблица
Разработчик
2
Создание веб-страниц
8. Надпись "Список" оформите в виде гиперссылки на файл spisok.html .
9. Надпись "Таблица" оформите в виде гиперссылки на файл tabl.html .
10. Надпись "Разработчик" оформите в виде гиперссылки на файл razrab.html
11. Создайте HTML-документ с именем spisok.html . В документе:
 создайте заголовок «Список», сделайте, чтобы он выравнивался по центру;
 создайте нумерованный список, состоящий из 10 произвольных строк;
 сделайте, чтобы документ загружался в правый фрейм.
12. Создайте HTML-документ с именем tabl.html. В документе создайте:
 заголовок «Таблица»;
 видимую таблицу вида:
измените цвет заливки первой ячейки;
 в ячейки таблицы введите произвольный текст;
 сделайте, чтобы документ загружался в правый фрейм.
13. Создайте HTML-документ с именем razrab.html. В документе:
 создайте заголовок «Работу выполнил»;
 заголовок сделайте курсивным;
 напишите свою Ф.И.О., № группы;
 создайте горизонтальную линию. Для линии задайте цвет, длину и толщину. Сделайте, чтобы она выравнивалась по центру;
 напишите текущую дату;
 сделайте, чтобы документ загружался в правый фрейм.

3