Иллюстрированный самоучитель по созданию сайтов

Размещение элементов на веб-странице и навигация по сайту

В те недавние времена, когда технология WWW только появилась на свет и стали создаваться первые веб-страницы, одной из самых больших проблем при их создании была невозможность произвольного размещение элементов на странице. Другими словами, все содержимое страницы располагалось последовательно. Но веб-дизайнерам все чаще и чаще хотелось. расположить материал так, чтобы создать подобие композиции и облегчить восприятие. Самый простой и распространенный пример – разместить ссылки на разделы сайта в левой части, а сами разделы – в правой При этом в нижней части страницы можно разместить, например, какую либо статическую информацию, которая не меняет свое местоположение в зависимости от количества материала на странице. Но как это осуществить?

Для этого в процессе развития WWW то и дело появлялись различных решения (некоторые из них по ходу дела уже рассматривались в этой книг выше). На сегодняшний день можно сказать, что наиболее удобных решений для произвольного расположения элементов на странице существую три:

  • использование фреймов;
  • использование таблиц;
  • и позиционирование независимых слоев.

Давайте же рассмотрим эти технологии по порядку, и начнем с той из них, которая еще не обсуждалась в этой книге – с использования фреймов.

Использование структуры фреймов

Формирование набора фреймов

Итак, начнем. Разделим нашу страницу на две части (два фрейма) – левую и правую. Вообще говоря, каждый фрейм представляет собой отдельный чтобы-документ. Таким образом, нам надо так определить набор фреймов, наши в правую часть страницы загружался HTML-документ, (назовем этот файл sergtext.html), а в левый фрейм – файл, содержащий “автопортрет” Сергея Сергеева. Этот файл мы назовем sergport.html. Сначала напишем его текст.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
  
<HEAD>
    <TITLEE>Домашняя страница Сергея Сергеева.</TITLE>
        <STYLE TYPE="text/css">
            BODY {
                background-color: #BABAAO;
                color: rgb(29.29.24);
            }
        </STYLE>
</HEAD>
  
<BODY>
    <IMG SRC="Images/sergport.gif" WIDTH="257" HEIGHT="305" BORDER="0" ALT="АВТОПОРТРЕТ">
    <HR>АВТОПОРТРЕТ СЕРГЕЯ СЕРГЕЕВА
</BODY>
  
</HTML>

Здесь пока что нет ничего нового – это обычная статическая страница, содержащая рисунок, горизонтальную черту и подрисуночную подпись. Теперь настало время определить набор фреймов.

Надо сказать, что НТМL-файлы, содержащие набор фреймов, существенно отличаются от обычных HTML-файлов. В частности, они не должны содержать тег <BODY>. Их основная часть определяется тегом <FRAMESET>. Все, что заключено между ним и его закрывающим тегом </FRAMESET>, является набором фреймов. Содержимое каждого фрейма задается с помощью тега <FRAME>. Его основным атрибутом является SRC=, значением которого является имя соответствующего HTML-файла.

Кроме того, в первой строке файла, содержащего набор фреймов, необходимо указывать тип Frameset, например, вот так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">

Давайте напишем текст набора фреймов для нашего примера, а затем рассмотрим его подробнее. Итак, если страницу с портретом называем sergport.html, а страницу с текстом – sergtext.html, то текст основного документа будет следующим.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
  
<HEAD>
    <TITLE>Домашняя страница Сергея Сергеева</TITLE>
</HEAD>
<FRAMESET COLS="277,*" FRAMESPACING="0" FRAMEBORDER="0">
    <FRAME NAME="portrait" SRC="sergport.html" SCROLLING="no" FRAMEBORDER="0" NORESIZE>
        <FRAME NAME="text" SRC="sergtext.html" SCROLLING="auto" FRAMEBORDER="0" NORESIZE>
</FRAMESET>
  
</HTML>

Давайте внесем некоторые пояснения. Чтобы фреймы располагались, как столбцы таблицы (а не как ряды, Например, сверху и снизу), нужно в теге <FRAMESET> указать атрибут COLS=. Его значением должно быть перечисление ширины каждого фрейма (через запятую). Например, если написать <FRAMESET COLS="25%,25%,50%">,то окно браузера будет разделено на три фрейма: левый шириной в четверть окна браузера, средний такой же ширины и правый шириной в половину окна браузера. В данном случае ширина каждого фрейма указана в про- центах. Можно также указывать ширину фрейма в пикселах. В приведенном выше коде мы определяем ширину левого фрейма в 277 пикселов чтобы туда уместился рисунок:

<FRAMESET COLS="277,*">
Если Вы заметили ошибку, выделите, пожалуйста, необходимый текст и нажмите CTRL + Enter, чтобы сообщить об этом редактору.