Панели
Страницы, которые были показаны ранее, занимали все окно броузера. Тем не менее, используя панели (frame), на экране можно отобразить несколько документов. Панели создаются тегом <FRAMESET>. Такой подход связан с определенными издержками, поэтому мы будем создавать плавающие панели (с возможностью прокрутки содержимого) с использованием тега <IFRAME>. Плавающую панель с изображением (или несколько панелей) можно разместить на странице где угодно. Пользователь не может изменить размер плавающей панели, но в рамках этой главы нас это устраивает, поскольку плавающую панель реализовать проще, чем неподвижную, создаваемую тегом <FRAMESET>.
Чтобы вставить панель на страницу, используется следующий тег.
<IFRAME SRC=url WIDTH=xxx HEIGHT=yyy>
Переменная
url — это URL документа, отображаемого на панели, а ххх
и ууу — размеры панели. Чтобы поместить панель посредине документа и показать домашнюю страницу Sybex, введите следующие строки в HTML-файл, а потом откройте его в Internet Explorer.
<CENTER>
<Hl>Floating Frame Example</Hl><BR>
<IFRAME SRC="http://www.sybex.corn" WIDTH =500 HEIGHT=300>
</CENTER>
Результат показан на рис. 19.5 (между тегами
<CENTER> и </CENTER> все будет центрировано).
Страница, изображенная на рис. 19.6, создана для одного HTML-документа, содержащего два тега <IFRAME>. Содержание каждой панели задается атрибутом SRC, а для их размещения на странице используется тег <CENTER>.
Рис. 19.5. Плавающая панель, отображающая начальную страницу Sybex
Рис. 19.6. Панели страницы FFRAMES НТМ вложены в другую плавающую панель
Ниже приведена распечатка файла FFRAMES.HTM, который можно найти в папке данной главы на компакт-диске.
<HTML>
<HEAD>
<TITLE>Floating Frames</TITLE>
</HEAD>
<BODY BGCOLOR=black>
<FONT NAME="Verdana" COLOR=lightyellow>
<CENTER>
<Hl>Here they are...</Hl>
<H4>...side by side</H4>
<P>
<IFRAME
SRC="http://home.microsoft.com/"
NAME="MS"
WIDTH=325
HEIGHT=325
SCROLLIHG=YES
MARGINWIDTH=0
MARGINHEIGHT=0
HSPACE=8>
</IFRAME>
<IFRAME
SRC="http://home.netscape.com/"
NAME="NS"
WIDTH=325
HEIGHT=325
SCROLLIHG=YES
MARGINWIDTH=0
MARGINHEIGHT=0
HSPACE=8>
</IFRAME>
</FONT>
</CENTER>
</BODY>
</HTML>
Страница, показанная на предыдущем рисунке, на конкретном компьютере может выглядеть не так хорошо. Если окно броузера меньше 700 пикселей в ширину, то в нем не хватит места для двух рамок: отобразить их рядом нельзя, вторая рамка появится ниже первой. Такая проблема возникает при отображении рядом двух изображений в узком окне. Выходом из такой ситуации является размещение изображений в смежных ячейках таблицы без обрамления. То же можно проделать с плавающими панелями. Плавающая панель вставляется в ячейки таблицы также просто, как изображение или абзац текста.
