Таблицы

Еще один способ разбивки содержимого страницы— с помощью таблиц. В отличие от фреймов, таблицы не делят страницу на множество отдельных частей. Вместо этого таблица размещается на Web-странице, как плавающий фрейм. Таблица представляет собой сетку, в ячейки которой помещается различное содержимое. Сетку таблицы можно "расчертить" про­извольным образом, что позволяет упорядочить содержимое макета страницы. В результате вы получите желаемое количество ячеек, каждая из которых является мини-страницей.

В какую-либо ячейку можно поместить другую таблицу. Размещение одной таблицы внутри другой (профессионалы это называют вложенными таблицами) делает возможность безгранично управлять содержимым макета страницы. Про­блема, возникающая при использовании вложенных таблиц, заключается в том, что содержимое вложенной таблицы должно полностью загрузиться для того, чтобы оно отображалось во внешней таблице. Кроме того, вложенные таблицы обусловливают неудобство сайта для пользователей с физическими недостатками. Проблемы возникают с последовательностью воспроизведения содержимого.

CSS: тег <div>

Наиболее современным подходом к распределению содержимого на странице считается применение CSS-тсгов (каскадных таблиц стилей) <div>. Каждый тег <div> позволяет вы­делить фрагмент Web-страницы, содержащий какой-либо HTML-элемент, например таблицу, форму, графику, Flash-анимацию и др. По сути, каждый тег <div> — это отдельная Web-страница. Более того, на одной странице можно определить неограниченное количество тегов <div>. Теги могут частично или полностью перекрывать друг друга либо быть вложенными Посему теги <div> часто называют CSS-слоями.

Вы можете задать порядок перекрытия слоями друг друга, для чего необходимо в теге <div> определить атрибут z-index.

Использование в полном объеме всех возможностей языка HTML позволяет не только эффективно управлять разбивкой макета Web-страницы, но и помогает организовать графи­ческий дизайн сайта. Визуальные эффекты в HTML достигаются за счет использования: таб­лиц, CSS-стилсй и тегов <div>, фонового узора и сплошного цвета заливки. Например, ис­пользуя раскрашенные таблицы, вы сокращаете необходимость в дополнительной графике.

Чем меньше графики и больше HTML-кода, тем выше производительность Web-сайта. Кроме того, когда больше кода, чем графики, страницу значительно проше обновить, пере­вести на другие языки, автоматизировать с применением технологии DHTML (динамического HTML).

Выделение таблиц цветом

С помощью таблиц можно реализовать огромное множество визуальных эффектов. На­пример, HTML-теги позволяют задать разный цвет фона в ячейках или выбрать цвет границы таблицы.