Размещение элементов на веб-странице и навигация по сайту
В те недавние времена, когда технология 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,*">