Особенности верстки слоями

www-html.ru

Обычная версия

К сожалению, табличная верстка наложила довольно сильный отпечаток на манеру верстки web-страниц. И теперь, когда верстка с помощью слоев прочно входит в моду и завоевывает множество поклонников, предыдущие стереотипы пытаются проявиться с новой силой. Так что рассказ об особенностях верстки слоями придется начинать не со слоев, а с таблиц и том багаже, что они с собой принесли.

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

Что же в итоге получается? А то, что из конструктора, предназначенного для разработки танка, пытаются сделать самолет. Думаете, это невозможно? Нет ничего невозможного, когда под рукой есть напильник и прорва времени. Но с другой стороны, может проще взять нужный конструктор...

Давайте для примера просмотрим типичную и простую схему компоновки страницы (рис. 1).

Рис. 1

Рис. 1. Страница, созданная с помощью таблиц

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

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

Пример 1. Использование таблиц

Валидный HTML

<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01 Transitional//EN" "http://www.w3.org/TR/ШТМЛ4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Сайт</title>
</head>
<body>

<table width="100%" cellpadding="5" cellspacing="0">
<tr>
<td height="60" colspan="2" bgcolor="#666699"><h1>Заголовок с нашего сайта</h1></td>
</tr>
<tr>
<td width="25%" bgcolor="#990033" valign="top">Левая колонка</td>
<td bgcolor="#999966" valign="top">Правая колонка</td>
</tr>
<tr>
<td height="30" colspan="2" bgcolor="#cccccc">Подвал страницы</td>
</tr>
</table>

</body>
</html>

Высота таблицы определяется параметром height тега <TABLE>. Хотя этот параметр отсутствует в спецификации ШТМЛ, но браузеры его понимают, что и приводит к желаемому результату. Значение 100% говорит, что таблица занимает всю доступную высоту web-страницы.

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

  1. За основу берется табличная верстка и с помощью слоев она воплощается максимально близко к оригиналу.
  2. Используются особенности слоев, сайт верстается с их учетом.

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

Теперь переходим к особенностям слоев, чтобы понять, в чем же суть этого типа верстки.

Слои не таблицы

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

Высота слоев ограничена высотой контента

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

Рис. 2

Рис. 2. Страница, созданная с помощью слоев

Высота разных колонок на данном рисунке различается, поскольку формируется за счет их содержимого.

Замечание

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

Блочная верстка

Уже упоминалось, что слои в большинстве случаев являются независимыми друг от друга, за счет чего они как отдельные блоки могут добавляться или удаляться в макете web-страницы. За такое поведение верстка с помощью слоев получила название «блочная верстка». Слои допустимо вкладывать один в другой для формирования желаемого декоративного элемента. Поэтому под именем «блок» подразумевается не столько отдельный слой, сколько их совокупность.

Расположение колонок

По умолчанию содержимое контейнеров <DIV> на web-странице располагаются по вертикали, вначале идет один слой, ниже располагается следующий и т.д. При создании колонок требуется располагать слои рядом по горизонтали, для чего применяется несколько методов. Одним из распространенных является использование стилевого параметра float. Хотя он предназначен для разработки обтекания вокруг элемента, с тем же успехом float устанавливает и колонки. Но здесь следует учесть одну особенность. При уменьшении окна браузера до некоторой критической ширины, колонки перестают располагаться горизонтально и перестраиваются друг под другом по вертикали. С этим фактом либо остается смириться, либо использовать другие способы формирования колонок через слои.

Резюме

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



Copyright © 2009-2022 | По всем вопросам: donmobi@mail.ru

О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект