Создание документа с помощью кадров в HTML
Использование <FRAME> позволяет помещать в окна одной страницы несколько отдельных страниц, произвольно менять их размеры и организовывать изменение содержимого одного окна после выполнения пользователем действий в другом окне. Это позволяет использовать их в качестве инструмента навигации. Тэги <FRAMESET> и </FRAMESET> в данном случае заменяют тэги <BODY> и </BODY> соответственно.
Внутри пары <FRAMESET> и </FRAMESET> могут быть использованы только тэги <FRAME>, <FRAMESET> и <NOFRAMES>. По сути создается несколько отдельных страниц фреймов, которые выводятся на экран одновременно ввиде нескольких окошек одного документа. Другими словами, прежде чем организовывать отдельные документы ввиде фреймов одного документа, необходимо прежде создать сами документы. Для пользователей, чей броузер не поддерживает фреймы, необходимо создать альтернативный документ или сообщение о том, каким броузером нужно воспользоваться для прoсмотра данного документа и заключить его в тэги <NOFRAME> и </NOFRAME>
- Пара <FRAMESET> и </FRAMESET>
- Использование <FRAME>
- Использование <IFRAME>
- Примеры простейших макетов страниц с фреймами .
Пара <FRAMESET> и </FRAMESET>
Тэги <FRAMESET> и </FRAMESET> позволяют задать относительный и абсолютный размеры фреймов, <FRAMESET> может иметь атрибуты:
- border
Атрибут задает толщину обрамления в пикселах для всех производных фреймов.
<FRAMESET border=”число” > - cols
Атрибут задает количество и размер колонок в создаваемом наборе кадров в пикселах, процентах или *пропорционально другим кадрам. Значения ширины различных кадров перечисляются в кавычках и через запятую.
<FRAMESET cols=”число, число* или % “> - rows
Атрибут задает количество и размер строк в создаваемом наборе кадров в пикселах, процентах или *пропорционально другим кадрам. Значения высоты различных кадров перечисляются в кавычках и через запятую.
<FRAMESET rows=”число, число* или % “> - frameborder
Атрибут задает наличие или отсутствие обрамления у фреймов. Значение 1 соответствует наличию, а 0 – отсутствию обрамления.
<FRAMESET frameborder=”1 или 0” >
Использование <FRAME>
Элемент <FRAME> определяет содержимое заданных фреймов. Он может иметь атрибуты:
- src
Атрибут задает документ, который должен быть отображен в фрейме.
<FRAME src=”URL” > - frameborder
Атрибут задает наличие или отсутствие обрамления у фреймов. Может принимать значения Значение 1 соответствует наличию, а 0 – отсутствию обрамления.
<FRAME frameborder=”1 или 0 “> - marginheight
Атрибут задает толщину верхнего и нижнего обрамления в пикселах.
<FRAME marginheight=”число “> - marginwidth
Атрибут задает толщину правого и левого обрамления в пикселах.
<FRAME marginwidth=”число “> - name
Атрибут задает любое имя фрейма, по которому можно будет обращаться к нему с помощью атрибута target в ссылках <A href>. Но существует четыре зарезервированных имени:- blank
Имя открывает в новом окне содержимое указанного URL. - parent
Имя открывает содержимое указанного URL в родительском, относительно текущего, фрейме. - self
Если так назвать фрейм, то содержимое указанного URL заменит первоначально находившуюся в этом фрейме ссылку. - top
Имя отображает содержимое указанного URL в развёрнутом на всё окно фрейме.
- blank
- noresize
Атрибут лишает пользователя возможности изменить размеры текущего и смежного фреймов с помощью мыши.
<FRAME noresize > - scrolling
Атрибут задает наличие у кадра полос прокрутки, принимает значения YES, NO и AUTO.
<FRAME scrolling=”значение “>
Использование <IFRAME>.
Этот тэг позволяет вставить в тело BODY окно, в котором визуализируется другая страница, при этом тэг IFRAME, в отличие от тэга FRAME вставляется не между тэгами FRAMESET и /FRAMESET, а между тэгами BODY и /BODY
- src
Атрибут задает документ, который должен быть отображен в фрейме.
<IFRAME src=”URL” >
. - frameborder
Атрибут задает наличие или отсутствие обрамления у фреймов. Может принимать значения Значение 1 соответствует наличию, а 0 – отсутствию обрамления.
<IFRAME frameborder=”1 или 0 “> - marginheight
Атрибут задает толщину верхнего и нижнего обрамления в пикселах.
<IFRAME marginheight=”число “> - marginwidth
Атрибут задает толщину правого и левого обрамления в пикселах.
<IFRAME marginwidth=”число “> - name
Атрибут задает любое имя фрейма, по которому можно будет обращаться к нему в ссылках и направлять в него содержимое. - align
Атрибут позволяет позиционировать кадр по отношению к тексту, принимает значения left, right, middle, top и bottom.
<IFRAME align=”left” > - scrolling
Атрибут задает наличие у кадра полос прокрутки, принимает значения YES, NO и AUTO.
<FRAME scrolling=”значение “> - width
Атрибут определяет ширину кадра в пикселях.
<IFRAME width=”число “> - height
Атрибут определяет высоту кадра в пикселях.
<IFRAME height=”число “>
Примеры простейших макетов страниц с фреймами.
Горизонтальное деление экрана производится при помощи атрибута rows, а вертикальное при помощи атрибута cols. Значения атрибутов могут быть выражены в пикселах, процентах или * для обозначения оставшейся части экрана.
Например:
- cols=50%,50%
Деление области просмотра на равные, правую и левую, части. - cols=20%,80%
Деление области просмотра на неравные, правую и левую, части. - rows=100,20%,*
Деление области просмотра на три части: первой отведено 100 пикселей, второй – 20% доступного пространства, а третьей – все остальное. - cols=*,3*
Деление области просмотра на неравные, правую и левую, части. Правая часть в три раза шире левой. - cols=25%,75%
Деление области просмотра аналогично предыдущему примеру.
Пример исходного кода фреймов более сложной структуры.
<HEAD>
<TITLE>FRAMES</TITLE>
</HEAD>
<FRAMESET FRAMEBORDER=1 BORDER=2 ROWS=150,*>
<FRAME SKROLLING=”YES” NORESIZE SRC=”page1.html” NAME=”1“>
<FRAMESET FRAMEBORDER=1 BORDER=2 COLS=150,*>
<FRAME SKROLLING=”YES” NORESIZE SRC=”page2.html” NAME=”2“>
<FRAME FRAME SKROLLING=”YES” NORESIZE SRC=”page3.html” NAME=”3“>
</FRAMESET>
</FRAMESET>
</HTML>
Пример исходного кода фреймов c навигацией, тут при клике на ссылке в фрейме 2 меняется содержимое фрейма 3, в него загружается файл page1.html, при этом файл page2.html должен иметь следующий вид:
<HEAD>
<TITLE>page2</TITLE>
</HEAD>
<BODY>
<A HREF=”page1.html” target=”3“>link</A>
</BODY>
</HTML>
