ОГЛАВЛЕНИЕ
1. Представление фреймов на Web-странице
1.1 Задание фреймовой структуры
1.2 Задание параметров фреймов
2 Плавающие фреймы
3 Разработка многооконной Web-страницы
3.1 Фрейм "title"
3.2 Фрейм "left"
Пример № 1
1. Представление фреймов на Web-странице
1.1 Задание фреймовой структуры
Чтобы сделать просмотр документов на Web-странице более удобным, можно воспользоваться многооконным интерфейсом, реализованным с помощью фреймов. В этом случае можно загрузить сразу несколько документов (Web-страниц) и работать одновременно со всеми ними.
В отличии от обычного HTML-документа в документе с описанием фреймов нет тэга-контейнера <BODY> . . . </BODY>. Вместо него используется тэг-контейнер <FRAMESET> . . . </FRAMESET>, который делит экран на несколько горизонтальных частей (окон), или на несколько вертикальных окон. Каждое из окон описывается в виде фрейма с помощью тэга <FRAME>. Тэг <FRAMESET> содержит следующие параметры:
- COLS - указывает через запятую ширину вертикальных окон в пикселях или в % от ширины экрана (если задается *, то этому окну отводится оставшаяся часть экрана);
- ROWS - указывает через запятую высоту горизонтальных окон в пикселях или в % от высоты экрана (если задается *, то этому окну отводится оставшаяся часть экрана);
- FRAMEBORDER :
- 1 - фреймы имеют рамку;
- 0 - фреймы не имеют рамку.
- FRAMESPACING - указывает расстояние между фреймами в пикселях.
Например, тэг
<FRAMESET COLS="20%,30%,*">
<FRAME . . . >
<FRAME . . . >
<FRAME . . . >
</FRAMESET>
делит экран на три вертикальных окна, которые занимают соответсвенно 20%, 30% и оставшуюся часть (50%) экрана. На месте каждого из тэгов <FRAME> может быть указан тэг <FRAMESET> . . . </FRAMESET>. Это позволяет формировать на экране сложную многооконную структуру.
В примере № 1 показано построение и использование трехоконной структуры на Web-странице.
1.2 Задание параметров фреймов
Для описания характеристик каждого окна используется тэг <FRAME>, который содержит следующие параметры:
- MARGINHEIGHT - указывает отступ в пикселях по высоте от границ фрейма;
- MARGINWIDTH - указывает отступ в пикселях по ширине от границ фрейма;
- FRAMEBORDER - имеет те же значения (0,1), что и одноименный параметр тэга FRAMESET;
- NAME - указывает имя фрейма, которое может быть использовано в ссылках для загрузки Web-страницы в требуемое окно экрана (см. описание параметра TARGET в разделе 1.1 описания лабораторной работы №6); имеется ряд стандартных имен окон:
- _self - для загрузки Web-страницы в текущее окно (принимается по умолчанию, если в ссылке не задан параметр TARGET);
- _top - для загрузки Web-страницы во весь экран;
- _blank - для загрузки Web-страницы в новое окно (отличается от _top тем, что нельза вернуться в исходное окно по стрелке "Назад").
- NORESIZE - запрещает изменять с помощью мышки размеры фрейма;
- SCROLING - указывает на один из трех режимов просмотра фрейма:
- yes - с созданием полосы прокрутки;
- no - без создания полосы прокрутки;
- auto - с созданием полосы прокрутки только тогда, когда загружаемые данные не помещаются в окне фрейма (принимается по умолчанию).
- SRC - URL-адрес Web-страницы, загружаемой в окно фрейма;
- BORDERCOLOR - указывает цвет границы фрейма (ширина границы задается параметром FRAMESPACING).
2 Плавающие фреймы в HTML
При создании многооконной Web-страницы помимо применения фреймовой структуры на базе тэга <FRAMESET> . . . </FRAMESET> (см. пункт 1.1) также могут быть использованы плавающие фреймы. В этом случае в HTML-документе вместо тэга <FRAMESET> . . . </FRAMESET> используется, как и во всех остальных Web-страницах, тэг <BODY> . . . <BODY>.
Плавающий фрейм, подобно изображению, будет располагаться на экране в том месте, которое соответстует расположению тэга с его описанием в HTML-документе. Для задания плавающего фрейма используется тэг-контейнер <IFRAME></IFRAME>. Поскольку плавающий фрейм во многом объединяет свойства и фрейма, и изображения, то он имеет часть параметров (MARGINHEIGHT, MARGINWIDTH, NAME, SCROLING, SRC, BORDERCOLOR ), которые свойственны фреймам и рассмотрены в пункте 1.2, другая часть его параметров (ALIGN, HEIGHT, WIDTH, HSPACE, VSPACE) характерна для изображений и рассмотрена в HTML изображение в пункте 1.1.
Ниже приведен пример задания плавающего фрейма, с именем "ff", размером 200*200 пикселей, в который загружается Web-страница с адресом "prim3-1.htm":
<IFRAME NAME="ff" SRC="prim3-1.htm" HEIGHT=200 WIDTH=200> </IFRAME>
В примере № 1 наряду с обычными фреймами показано применение плавающих фреймов (в файле "left.htm").
3 Разработка многооконной Web-страницы
В примере (№ 1) показано построение трехоконной Web-страницы, имеющей соответственно три фрейма: один горизонтальный ("title") и два вертикальных ("left" и "right").
Пример 1
<HTML>
<HEAD>
<TITLE> Фреймы в HTML на Web-странице </TITLE>
</HEAD>
<FRAMESET ROWS="60,*" FRAMESPACING=0>
<FRAME NAME="title" SRC="title.htm" NORESIZE SCROLLING="no"
MARGINHEIGHT=0 MARGINTEIGHT=0
STYLE="border: red 6 dashed" >
<FRAMESET COLS="30%,*" FRAMESPACING=2 >
<FRAME NAME="left" SRC="left.htm" FRAMEBORDER=0 >
<FRAME NAME="right" SRC="prim1-1.htm" FRAMEBORDER=1
BORDERCOLOR=#0000E0 >
</FRAMESET>
</FRAMESET>
</HTML>
Как видно из фреймовой структуры экран сначала делится на два горизонтальных окна: первое окно имеет размер 60 пикселов, второе занимает оставшуюся часть экрана. Затем второе горизонтальное окно делится на два вертикальных с размерами соответственно 30% и 70% экрана.
3.1 Фрейм "title"
Фрейм "title" используется для задания общих или заголовочных сведений. Может быть использован как домашняя страница (home page). В нем запрещены полосы прокрутки и изменение размера окна.
Файл "title.htm", загружаемый в окно "title", содержит HTML-документ из двух строк, задающих цвет фона, параметры надписи и саму надпись:
<P STYLE="background:#E0FFE0; color:#0000C0;font: italic 10mm; text-align:center"> ИЗУЧЕНИЕ HTML
3.2 Фрейм "left"
Файл "left.htm", загружаемый в окно "left" содержит HTML-документ, в котором задан набор ссылок в виде кнопок, осуществляющих доступ к описаниям лобораторных работ, и плавающий фрейм:
<HTML>
<HEAD>
<LINK REL=stylesheet HREF="my_d.css">
</HEAD>
<BODY>
<A CLASS="kn" HREF="2.htm" TARGET="right"> Страница №2
</A> <BR>
<A CLASS="kn" HREF="3.htm" TARGET="right"> Страница №3
</A> <BR>
<A CLASS="kn" HREF="4.htm" TARGET="right"> Страница №4
</A> <BR>
<A CLASS="kn" HREF="5.htm" TARGET="_top"> Страница №5
</A> <BR>
<A CLASS="kn" HREF="6.htm" TARGET="ff"> Страница №6
</A> <BR><BR>
<IFRAME NAME="ff" SRC="prim2-2.htm" HEIGHT=200 WIDTH=200>
</IFRAME>
</BODY>
</HTML>
Первые три ссылки загружают Web-страницы с описаниями лабораторных работ №2, №3 и №4 во фрейм с именем "right", четвертая ссылка загружает Web-страницу с описанием лабораторной работы №5 во весь экран, а последняя ссылка загружает Web-страницу с описанием лабораторной работы №6 в плавающий фрейм с именем "ff". Описание параметров плавающего фрейма и его использование на Web-странице приведено в разделе 2.
