<
УЦ Контакт

Лидер IT образования

Как приятно знать, что ты что-то узнал (Мольер)

 
03056, Киев, пер. Ковальский 13, 1-й этаж, офис №2
 
Программы курсов

Акция! Студентам - Скидка 15%! Слушателям IT Academy бесплатное посещение English Club

Статья>>Блочная верстка html-страниц, верстка слоями

Блочная верстка html-страниц, верстка слоями

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

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

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

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

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

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

Пример 1. Использование таблиц. Валидный HTML:

 

<!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% говорит, что таблица занимает всю доступную высоту веб-страницы.

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

За основу берется табличная верстка и с помощью слоев она воплощается максимально близко к оригиналу. Используются особенности слоев, сайт верстается с их учетом. Сторонники первого метода работы забывают, что имеют дело с совершенно противоположными инструментами, в итоге рождаются оригинальные схемы обхода тех или иных ограничений. Код в подобных случаях разбухает в разы, усложняется работа с ним, а браузеры, как правило, по-разному отображают документ. Приходится обращаться к хакам, либо обманывать браузеры другими способами так, чтобы сайт в итоге работал корректно. Теперь переходим к особенностям слоев, чтобы понять, в чем же суть этого типа верстки. Высота слоев ограничена высотой контента. В таблице соседние ячейки взаимосвязаны, поэтому высота у них одна, независимо от объема информации. Это хорошо видно, если залить фон ячеек разным цветом. Слои же в каком-то смысле являются независимыми друг от друга, поэтому высота слоя определяется его содержимым. Вид документа при этом будет отличаться от его табличного собрата. В отношении страницы, созданной с помощью слоев следует сказать, что высота разных колонок на данном рисунке различается, поскольку формируется за счет их содержимого. Когда требуется, высоту слоя можно установить через стили, используя для этого разные единицы измерения – проценты, пикселы, дюймы и т.д. Но если содержимое слоя превышает его заданную высоту, то браузеры по-разному интерпретируют этот факт – одни расширяют высоту слоя под новый контент, а другие браузеры, оставляя высоту исходной, накладывают контент поверх слоя.

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

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

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