HTML: Популярный самоучитель
Шрифт:
Документ с описанием набора фреймов будет иметь имя index.html. Его содержимое приведено в примере 8.2.
<HTML>
<HEAD>
<TITLE>Новый сайт с фреймами</TITLE>
</HEAD>
<FRAMESET cols = "130, *">
<FRAME src = "links.html" frameborder = 0>
<FRAMESET rows = "65, *">
<FRAME src = "title.html" scrolling = no marginwidth = 0
marginheight = 0 frameborder = 0>
<FRAME src = "start.html" name = textframe frameborder = 0>
</FRAMESET>
</FRAMESET>
</HTML>
В приведенном выше примере имя назначено только одному фрейму (правому нижнему). Именно в этом фрейме
В файле links.html находится документ с гиперссылками на файлы примеров (в него также добавлена ссылка на стартовую страницу). Предполагается, что файлы примеров расположены в папке Examples. Ниже приводится содержимое файла links.html (обратите внимание на задание значения атрибута target гиперссылок) (пример 8.3).
<HTML>
<TITLE>Ссылки на примеры</TITLE>
<BODY bgcolor = yellow>
<A href = "start.html" target = textframe>Текст главы</A>
<HR>
<A href = "examples/7.1.html" target = textframe>Пример 7.1</A>
<A href = "examples/7.2.html" target = textframe>Пример 7.2</A>
<A href = "examples/7.3.html" target = textframe>Пример 7.3</A>
<A href = "examples/7.4.html" target = textframe>Пример 7.4</A>
<A href = "examples/7.5.html" target = textframe>Пример 7.5</A>
<A href = "examples/7.6.html" target = textframe>Пример 7.6</A>
<A href = "examples/7.7.html" target = textframe>Пример 7.7</A>
<A href = "examples/7.8.html" target = textframe>Пример 7.8</A>
<A href = "examples/7.9.html" target = textframe>Пример 7.9</A>
<A href = "examples/7.10.html" target = textframe>Пример 7.10</A>
</BODY>
</HTML>
В файле title.html помещен заголовок сайта (вместе с гипотетическим логотипом), который показывается в соответствующем фрейме (пример 8.4).
<HTML>
<TITLE>Заголовок сайта</TITLE>
<BODY bgcolor = yellow>
<TABLE width = "100%">
<COL width = "*">
<COL width = 57>
<TR height = 57>
<TD align = center><H1>7. Таблицы</H1>
<TD><IMG src = "logo.jpg">
</TABLE>
</BODY>
<HTML>
Как можно увидеть из приведенного текста HTML-документа (см. пример 8.4), для достижения приемлемого расположения рисунка-логотипа пришлось прибегнуть к использованию таблицы.
В рассматриваемом примере сайта используется еще один файл – start.html. В этом файле помещена стартовая страница сайта. Содержимое этого файла может быть любым. При написании примера в файл start.html была помещена часть текста гл. 7. Из-за экономии места книги содержимое этого файла не приводится.
После того как все файлы сайта созданы, можно полюбоваться результатом (рис. 8.2).
Рис. 8.2. Сайт, созданный с использованием фреймов
Целевой фрейм по умолчанию
Напоследок рассмотрим, как можно уменьшить объем текста HTML-документа при использовании для многих гиперссылок одного и того же фрейма в качестве целевого. Еще раз взгляните на текст примера 8.3. Для каждой гиперссылки из этого примера задано одно и то же значение атрибута target. Чтобы избавиться от необходимости много раз задавать его, можно назначить целевой фрейм по умолчанию.
Для задания целевого фрейма по умолчанию используется HTML-элемент BASE (одиночный тег <BASE>). Атрибуту target этого элемента присваивается имя фрейма, используемого по умолчанию. Если элемент BASE используется, то он должен быть помещен в заголовке (HEAD) HTML-документа.
С учетом сказанного пример 8.3 можно переписать следующим образом (пример 8.5).
<HTML>
<HEAD>
<TITLE>Ссылки на примеры</TITLE>
<BASE target = textframe>
</HEAD>
<BODY bgcolor = yellow>
<A href = "start.html">Текст главы</A>
<HR>
<A href = "examples/7.1.html">Пример 7.1</A>
<A href = "examples/7.2.html">Пример 7.2</A>
<A href = "examples/7.3.html">Пример 7.3</A>
<A href = "examples/7.4.html">Пример 7.4</A>
<A href = "examples/7.5.html">Пример 7.5</A>
<A href = "examples/7.6.html">Пример 7.6</A>
<A href = "examples/7.7.html">Пример 7.7</A>
<A href = "examples/7.8.html">Пример 7.8</A>
<A href = "examples/7.9.html">Пример 7.9</A>
<A href = "examples/7.10.html">Пример 7.10</A>
</BODY>
</HTML>
8.4. Элемент NOFRAMES
Фреймы являются весьма привлекательным средством оформления сайтов, это должно было стать очевидным из приведенных ранее примеров. Однако фреймы в HTML появились не сразу, да и долгое время они не были стандартизированы, поэтому до сих пор обработка и представление документов с фреймами различными браузерами могут существенно отличаться. Кроме того, у достаточно большого количества пользователей до сих пор могут стоять старые версии браузеров, не поддерживающие фреймов вообще.
Если важно, чтобы при просмотре сайта, использующего фреймы, пользователь хоть что-то увидел, то следует использовать HTML-элемент NOFRAMES. Этот элемент задается парными тегами <NOFRAMES> и </NOFRAMES>. Он помещается в один файл с описанием набора фреймов.
Между тегами элемента NOFRAMES помещается HTML-текст, который браузер показывает в том случае, если он не поддерживает фреймы (или если пользователь отключил в браузере поддержку фреймов). Если браузер в состоянии показать фреймы, то текст между тегами элемента NOFRAMES игнорируется. Текст между тегами <NOFRAMES> и </NOFRAMES> можно форматировать точно так же, как если бы он находился между тегами <BODY> и </BODY>.
Очевидно, что с помощью элемента NOFRAMES можно создавать гораздо лучше переносимые сайты, особенно если позаботиться о том, чтобы при невозможности отображения фреймов никакая важная информация не была потеряна. Для рассмотренного ранее сайта можно создать версию, не использующую фреймы (выполненную, например, с использованием только таблиц), а внутри элемента NOFRAMES поместить информационное сообщение и ссылку на эту версию сайта (пример 8.6).
<HTML>
<HEAD>
<TITLE>Новый сайт с фреймами</TITLE>
</HEAD>
<FRAMESET cols = "130, *">
<FRAME src = "links.html" frameborder = 0>
<FRAMESET rows = "65, *">
<FRAME src = "title.html" scrolling = no marginwidth = 0
marginheight = 0 frameborder = 0>
<FRAME src = "start.html" name = textframe frameborder = 0>
</FRAMESET>
</FRAMESET>
<NOFRAMES>
<STRONG>Внимание!</STRONG> Ваш браузер не поддерживает фреймы. Для открытия версии сайта, не использующей фреймы, жмите
<A href = "...">сюда</A>.
</NOFRAMES>
</HTML>
8.5. Плавающие фреймы
Кроме обычных фреймов, рассмотренных ранее, HTML допускает использование так называемых плавающих фреймов. Плавающие фреймы выглядят точно так же, как и внедренные HTML-документы: показываются браузером в окне, расположенном прямо в тексте (рис. 8.3).
Рис. 8.3. Внешний вид плавающего фрейма
Для создания плавающих фреймов используется HTML-элемент IFRAME (задается при помощи парных тегов <IFRAME> и </IFRAME>). Настройка плавающего фрейма осуществляется при помощи следующих атрибутов: