Имитация фреймовой Web-страницы с помощью таблицы
Web-дизайнеры тратят немало времени на то, чтобы должным образом организовать содержимое на Web-странице. На хорошо продуманных Web-страницах информация группируется в четко определенные области. Например, на страницах многих сайтов группа заголовков (или баннер) отображается вдоль верхней границы страницы, навигационная панель расположена вдоль одной из сторон или вдоль нижнего края, а само содержимое отображается под заголовками и либо справа от навигационной панели, либо над ней.
Web-сайт с хорошо организованными Web-страницами создает удобную среду, которая побуждает посетителя зайти на сайт и потратить время на исследование его содержимого. Один из способов организации содержимого на Web-странице— это использование фреймов, которые делят Web-страницу на несколько окон, называемых фреймовой структурой (frameset), причем каждое окно способно отображать отдельный Web-документ. Типовая фреймовая Web-страница, вроде той, которая показана на рис. 2.27, имеет три фрейма.
Первый фрейм располагается слева направо вдоль верхнего края страницы и содержит заголовочную информацию, например, название и адрес компании. Второй фрейм содержит навигационную систему и располагается вдоль правой стороны страницы, от заголовочного фрейма до нижнего края страницы. Третий фрейм содержит организованные области текста и графики.
Хотя фреймы — отличный инструмент для организации информации на Web-странице, им присущи два больших недостатка. Во-первых, фреймы не полностью поддерживаются всеми Web-браузерами, а во-вторых, на загрузку фреймовой Web-страницы Web-браузеру требуется больше времени, поскольку в каждом фрейме страницы браузер должен загрузить и отобразить отдельный Web-документ.
Рис. 2.27. Типичная Web-страница, разделенная на фреймы
ПРАКТИКУМ
Хотя таблицы не позволяют загружать в одном окне браузера несколько документов, с помощью таблиц можно создать видимость организации, получаемой при работе с фреймовыми Web-страницами. Например, приведенный ниже код создает таблицу, придающую Web-странице организованный вид фреймовой страницы, как показано на рис. 2.28.
<table border="4" cellpadding="0" cellspacing="2" width="600"><tr height="25"><td height="25" colspan="2" bgcolor="#9900ff"><center><font color="white">ЭTО ЗАГОЛОВОЧНАЯ ОБЛАСТЬ</font></center></td></tr><tr height="300"><td width="100" height="300" bgcolor="#cc0000"><center><font color="white">Этa область содержит</font><p><font соlог="white">навигационный</font></р><p><font color="white">мaccив</font></p></center></td><td width="400" height="300" bgcolor="black"><center><font color="white">B этой области находится содержимое Web-страницы</font></center></td></tr></table>
Рис. 2.28. Web-страница с имитацией фреймовой структуры с помощью таблицы
Используя различные фоновые цвета для каждого раздела (в данном примере красный, фиолетовый и черный), можно сделать так, что каждый раздел будет смотреться как независимый - подобно фреймам на фреймовой Web-странице.