Особенности верстки слоями
К сожалению, табличная верстка наложила довольно сильный отпечаток на манеру верстки веб-страниц. И теперь, когда верстка с помощью слоев прочно входит в моду и завоевывает множество поклонников, предыдущие стереотипы пытаются проявиться с новой силой. Так что рассказ об особенностях верстки слоями придется начинать не со слоев, а с таблиц и том багаже, что они с собой принесли.
Не секрет, что большинство сайтов в мире создано с помощью табличной технологии, когда таблица с невидимой границей выступает в качестве опорной модульной сетки документа. Вместе с тем разработчики постепенно переходят на верстку слоями — это интересно, доступно и пользуется популярностью. Но в качестве образца для подражания выбираются именно табличные сайты, поскольку они известны и на виду, и уже их пытаются приспособить под верстку слоями.
Что же в итоге получается? А то, что из конструктора, предназначенного для создания танка, пытаются сделать самолет. Думаете, это невозможно? Нет ничего невозможного, когда под рукой есть напильник и прорва времени. Но с другой стороны, может проще взять нужный конструктор...
Давайте для примера рассмотрим типичную и простую схему компоновки страницы (рис. 1).
Рис. 1. Страница, созданная с помощью таблиц
В самом верху располагается «шапка» документа, где пишется заголовок сайта. Далее идут две колонки одинаковой высоты, колонки при этом для наглядности выделяются разным цветом. В самом низу располагается «подвал» страницы, куда помещают контактную информацию и другие служебные данные. При этом высота всего макета занимает всю доступную высоту окна браузера, т.е. «подвал» располагается у нижнего края веб-страницы. Правда это происходит только в том случае, если текста в колонках не так много. Когда объем текста превышает высоту веб-страницы, она отображается с вертикальной полосой прокрутки.
Несмотря на указанные условия, код, сформированный с помощью таблиц, отличается своей компактностью (пример 1). Для сокращения кода стили не применялись.
Пример 1. Использование таблиц
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<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>. Хотя этот параметр отсутствует в спецификации HTML, но браузеры его понимают, что и приводит к желаемому результату. Значение 100% говорит, что таблица занимает всю доступную высоту веб-страницы.
Приведенный двухколонный макет достаточно популярен среди разработчиков, поэтому у них возникает мысль реализовать его, но используя исключительно слои, без всяких таблиц. При этом сформировалось два стиля работы или, можно даже сказать, мышления.
- За основу берется табличная верстка и с помощью слоев она воплощается максимально близко к оригиналу.
- Используются особенности слоев, сайт верстается с их учетом.
Сторонники первого метода работы забывают, что имеют дело с совершенно противоположными инструментами, в итоге рождаются оригинальные схемы обхода тех или иных ограничений. Код в подобных случаях разбухает в разы, усложняется работа с ним, а браузеры, как правило, по-разному отображают документ. Приходится обращаться к хакам либо обманывать браузеры другими способами так, чтобы сайт в итоге работал корректно.
Теперь переходим к особенностям слоев, чтобы понять, в чем же суть этого типа верстки.
Слои не таблицы
Несмотря на банальность подобного утверждения, многие разработчики своим трудом опровергают его вновь и вновь. Но стоит только осознать, что это разные инструменты и элементы конструктора, как сразу станет легче и проще. Действительно, таблицы и методы верстки с их помощью лучше применять в одном случае, а слои — в другом. И четко разделять подходы и принципы верстки. Тогда нам не понадобится загонять творческую мысль в прокрустово ложе антагонистичной технологии. Надо просто пойти другим путем.
Высота слоев ограничена высотой контента
В таблице соседние ячейки взаимосвязаны, поэтому высота у них одна, независимо от объема информации. Это хорошо видно, если залить фон ячеек разным цветом. Слои же в каком-то смысле являются независимыми друг от друга, поэтому высота слоя определяется его содержимым. Вид документа при этом будет отличаться от его табличного собрата (рис. 2)
Рис. 2. Страница, созданная с помощью слоев
Высота разных колонок на данном рисунке различается, поскольку формируется за счет их содержимого.
Замечание
Когда требуется, высоту слоя можно установить через стили, используя для этого разные единицы — проценты, пикселы, дюймы и т.д. Но если содержимое слоя превышает его заданную высоту, то браузеры по-разному интерпретируют этот факт — одни расширяют высоту слоя под новый контент, а другие браузеры, оставляя высоту исходной, накладывают контент поверх слоя.
Блочная верстка
Уже упоминалось, что слои в большинстве случаев являются независимыми друг от друга, за счет чего они как отдельные блоки могут добавляться или удаляться в макете веб-страницы. За такое поведение верстка с помощью слоев получила название «блочная верстка». Слои допустимо вкладывать один в другой для формирования желаемого декоративного элемента. Поэтому под именем «блок» подразумевается не столько отдельный слой, сколько их совокупность.
Расположение колонок
По умолчанию содержимое контейнеров <DIV> на веб-странице располагаются по вертикали, вначале идет один слой, ниже располагается следующий и т.д. При создании колонок требуется располагать слои рядом по горизонтали, для чего применяется несколько методов. Одним из распространенных является использование стилевого параметра float. Хотя он предназначен для создания обтекания вокруг элемента, с тем же успехом float устанавливает и колонки. Но здесь следует учесть одну особенность. При уменьшении окна браузера до некоторой критической ширины, колонки перестают располагаться горизонтально и перестраиваются друг под другом по вертикали. С этим фактом либо остается смириться, либо использовать другие методы формирования колонок через слои.
Резюме
Вид страниц и их поведение в браузере различается от того, каким способом сверстан документ — с помощью таблиц или слоев. Каждый из этих способов верстки имеет свои особенности, которые влияют в итоге на отображение веб-страницы. Что свойственно таблицам и документам, созданным на их основе, не является признаком слоев, и наоборот. Если это понимать и четко разграничивать сферы применения таблиц и слоев и не пытаться втиснуть одно в формат другого, то верстка сайтов со слоями существенно упрощается и становится более эффективной.
| Статья опубликована: 31.01.2006 | Последнее обновление: 30.04.2008 |
Прежде, чем писать комментарий к статье, примите во внимание следующие моменты.
- Не задавайте вопросы в комментариях, для этой цели предназначен форум, где вы получите нужную помощь.
- Удаляются любые комментарии, которые:
- включают множество ошибок;
- написаны безграмотно;
- не имеют отношения к данной статье;
- не содержат никакой полезной информации для посетителей.
- Для выделения отдельных слов используйте следующие команды: [b]жирный[/b], [i]курсив[/i], [color=цвет]цветной текст[/color], [tag]тег[/tag], [var]параметр[/var], [code]пример[/code].
- Потренироваться в написании комментариев вы можете в песочнице.
Комментарии к статье
Zladey@mail.ru
14.04.2006
обидно...для меня , начинающего...
Влад Мержевич
14.04.2006
AlexanderCam маил ру
20.04.2006
За полчаса переделал сайт из таблицы в слои.
И мне стало интересно: существуют ли какие-нибудь автоматизированные средства для верстки со слоями как это можно делать с таблицами в Фотошопе?
Влад Мержевич
04.05.2006
Pacman
05.05.2006
margin-bottom:-10000px;
padding-bottom:10000px;
А так в нормальных браузерах:
.tr {display:table-row;}
.td {display:table-cell;}
Denis
21.12.2006
Увеличили шрифт на один пункт(ctrl++) и прощай верстка? Содержимое слоя ведет себя отдельно от слоя. Как это преодолеть?
Влад Мержевич
22.12.2006
RedRaven
06.01.2007
Да, и ещ?, если у вас есть какие-нибудь рассылки с релизами новых статей, то где на них можно подписаться? Если можно, то ответ на e-mail: redravenmail@inbox.ru
Влад Мержевич
08.01.2007
Серега
11.01.2007
Слои - это больше CSS, а табличная верстка - это HTML.ONi
24.01.2007
А мне так кажется, что css и html это инструменты, так сказать из одной коробки, их можно конечно использовать и по отдельности, но лучший результат получается когда используешь их вместе.
Раньше тоже верстал таблицами и не понимал как верстать слоями, но попробовав понял что так проще и лучше (при изминенни дизайна, нам надо менять только файлы css, а не весь код страницы)
Screw
02.04.2007
Читатель (Мас)
10.04.2007
Саuua
07.06.2007
AleksM
17.07.2007
Ольга
19.08.2007
Влад Мержевич
23.08.2007
LifeWint
25.08.2007
P.S. хотя я уже перешел на слои. В общем мне лагко это было сделать ибо с таблицами я поступал примерно так-же как и со слоями (т.е. Вложения одной в другую, компановка и т.д.)
P.P.S. Сайт действительно содержательный. Спасибо автору за контент. (вопрос: если сайт не статический, то почему нельзя реализовать поиск сразу по сайту без посредников типа Гугл?, хотя и так можно искать, но ищу я часто по этому сайту и это приводит к неокторым неудобствам)
Ольга
28.08.2007
LifeWint, таблицу одну можно использовать, но насколько я понимаю, если в не? вс? поместить - она грузиться будет долго, поэтому я раньше делила все на несколько основных таблиц, да и внутри этих основных старалась делать меньше вложенных таблиц, насколько это было возможно. Может, я что-то недопонимала?
LifeWint
03.09.2007
nonlinear
29.10.2007
Большое спасибо за хорошее обьяснение.
Виктор
09.02.2008
Зависит от задачи, но обычно делаю шапка в слой, контент - таблица и низ - снова слой, в итоге - мне очень легко провести любые изменения идизайн не "поплывет" при любых, даже очень глобальных изменениях
roman
01.03.2008
???
как справиться с этой проблемой?
boojaka@gmail.com
leah
08.03.2008
Мы делаем дизайн страниц, которые должны также отображаться и на STB (Set-top-box). Там сильно урезанный CSS, который не обеспечивает работу со слоями в полном объеме и не позволяет делать на них верстку, да и резиновый дизайн делать на слоях очень трудно. Но в остальных случаях слои сильно помогают.
Skyter
13.03.2008
Роман
15.03.2008
Что можно посоветовать в этом случаи,/таблицы применять не хотелось бы/
Вот сайт: www.tigral-k.narod.ru - посоветуйте
И как прописать в коде, чтоб перед http, была картинка???
Спасибо за раннее
Дмитрий
23.05.2008
Статья тоже отличная, все понятно и доходчиво.
Спасибо Влад!
Михаил
19.06.2008
Какие ещ? есть методы формирования колонок через слои?