Урок4, Фреймы.
Что такое фреймы.
Фреймы (Frames-рамки, кадры) - множественные скроллируемые окна,
позволяющие выводить в одном окне браузера, несколько страниц
одновременно. Использовани фреймов позволяет получить интересные
интерфейсные решения оформления страниц.
Как создать документ, использующий фреймы?.
Сначала нужно создать загрузочный файл, который обычно является
главной страничкой сервера и имеет имя index.htm или index.html.
В этом файле задаются размеры, количество и атрибуты фреймов.
Затем уже будем создавать файлы для каждого из фреймов.
Фреймы задаются тэгом <FRAMESET></FRAMESET>
Атрибуты тэга <FRAMESET>:
| rows="разделенный запятыми список пикселов,
процентов и относительных длин". |
Расположение горизонтальных фреймов. По умолчанию равен
100%, что означает одну строку. |
| cols="разделенный запятыми список пикселов,
процентов и относительных длин". |
Расположение вертикальных фреймов. По умолчанию равен 100%,
что означает один столбец. |
Пример:
Текст программы:
<FRAMESET cols="1*,200,3*"
>
</FRAMESET>
Здесь страница браузера разбивается на три столбца,
причем, сначала браузер выделит 200 пикселей для среднего столбца,
а затем распределит оставшееся пространство следующим образом:
Если принять ширину оставшегося пространства за три четыре части
(1*+3*=4*), то левый фрейм получит одну (1*) часть а правый фрейм
оставшиеся три (3*) части.
Результат выполнения:
Страничка разобьется приблизительно так:
Текст программы:
<FRAMESETrows="30%,70%"
cols="33%,37%,*" >
</FRAMESET>
В этом случае страница разбивается на две строки,
высотой 30% и 70% от всей высоты окна браузера, и три столбца, левый
будет задан с шириной 33% от ширины экрана браузера, средний - 37%,
а правый получит все что осталось т.е. 100%-(33%+37%)=30%
Результат выполнения:
Страничка разобьется приблизительно так:
Более сложная структура фреймов создается с помощью вложения
набора фреймов друг в друга.
Допустим, нужно создать следующую структуру сайта:
| Название странички |
| Главное меню |
Здесь будем отображать информацию, выбранную
в главном меню |
| copyright |
Здесь мы видим три строки, причем средняя имеет два столбца.
Сначала задаем строки. Верхняя и нижняя будут иметь высоту по
5%, а средняя то что останется.
<FRAMESET rows="5%,*,5%"
>
Затем задаем столбцы. Левый будет 30% от ширины
браузера, а правый, соответственно, 70%.
<FRAMESET cols="30%,70%"
>
</FRAMESET>
</FRAMESET>
Теперь осталось задать сами фреймы. Фреймы определяются тэгом
<FRAME></FRAME>.
Атрибуты тэга <FRAME>:
| src="URL" |
Описывает URL документа, который будет отображен внутри
ланного фрэйма. Если он отсутствует, то будет отображен пустой
фрэйм. |
| name="frame_name" |
Имя фрейма, которое должно обязательно начинаться с символа.
Содержимое поименованных фрэймов может быть задействовано
из других документов при помощи специального атрибута TARGET,
описываемого ниже. |
| marginwidth="value" |
Ширина боковых разделительных полос между фреймами в пикселях. |
| marginheight="value" |
Ширина верхних и нижних разделительных полос между фреймами
в пикселях. |
| scrolling="yes", "no", "auto" |
Наличие полос прокрутки у фреймов где:
- yes - полосы прокрутки присутствуют.
- no - полосы прокрутки отсутствуют.
- auto - полосы прокрутки присутствуют только при их необходимости
(по умолчанию).
|
| noresize |
Отмена возможности изменения размеров фреймов. Если у одного
фрэйма установлен атрибут noresize, то у соседних фрэймов
тоже не может быть изменен размер со стороны данного. |
Исходя из всего этого допишем программу:
<FRAMESET rows="5%,*,5%"
>
Задаем параметры верхнего фрейма, который будет
фиксированной ширины, без полос прокрутки
<FRAME src="top.htm" name="top_page"
scrolling="no" noresize>
<FRAMESET cols="30%,70%" >
Задаем параметры левого фрейма, фиксированной ширины,
с возможностью вывода полос прокрутки
<FRAME src="main_mnu.htm"
name="main_mnu" scrolling="auto" noresize>
Задаем параметры правого фрейма, фиксированной
ширины, с возможностью вывода полос прокрутки
<FRAME src="content.htm"
name="content" scrolling="auto" noresize>
</FRAMESET>
И наконец, задаем параметры нижнего фрейма, фиксированной
ширины, без полос прокрутки.
<FRAME src="bottom.htm" name="bottom_page"
scrolling="no" noresize> </FRAMESET>
Полностью код программы будет выглядить так:
<HTML>
<TITLE>Титул странички</TITLE> <FRAMESET rows="5%,*,5%"
>
<FRAME src="top.htm" name="top_page" scrolling="no"
noresize>
<FRAMESET cols="30%,70%" >
<FRAME src="main_mnu.htm" name="main_mnu" scrolling="auto"
noresize>
<FRAME src="content.htm" name="content" scrolling="auto"
noresize>
</FRAMESET>
<FRAME src="bottom.htm" name="bottom_page" scrolling="no"
noresize> </FRAMESET>
Заметьте, что документ, описывающий набор фреймов,
не содержит тэга <BODY>.
Он должен задавать только структуру фреймов и больше ничего.
Чтобы ваша страничка была видна в браузерах не поддерживающих
фреймы, следует указать тэг <NOFRAMES></NOFRAMES>,
внутри контейнера <FRAMESET>.
К таким браузерам относятся браузер NSCA Mosaic, IE2.0 и NN версии
ниже чем 2.0.
Например:
<FRAMESET>
<NOFRAMES>
<BODY bgcolor="red"> Ваш браузер не поддерживает
фреймы. </BODY> </NOFRAMES>
</FRAMESET>
Теперь создадим файл main_mnu.htm, где будет главное меню сайта..
<HTML>
<BODY BGCOLOR="gray">
<A HREF="menu1.htm" TARGET="content">1.
Первый элемент меню</A><BR> <A HREF="menu2.htm"
TARGET="content">2. Второй элемент меню</A><BR>
</HTML>
Урок3,Списки и таблицы.
| Урок5, Ссылки в документах HTML.
|