warlockfx (![[info]](http://l-stat.livejournal.com/img/userinfo.gif){kind=small} warlockfx) wrote,@ 2008-03-18 10:19:00 |
|
| Entry tags: | web-development |
Вёрстка: Переход с табличной структуры на блочную
Статья предназначена преимущественно для начинающих разработчиков веб-сайтов и просто интересующихся. В ней я попытаюсь осветить пошагово переход с табличной структуры сайта (сайт, за основу модели внешнего вида которого взят тег «table») на блочную структуру (модель на теге «div»). Запись сделана с подачи sparkovich'а.
Зачем это нужно?
Основная цель верстальщика — это сделать макет сайта, который будет выглядеть так, как нужно ему, дизайнеру и заказчику у всех клиентов; чтобы посетитель мог всегда получить желаемую информацию в удобном виде; чтобы узнать о наличии информации он смог через поисковые системы. Как бы жутко это ни звучало, но все эти заботы либо напрямую, либо косвенно ложатся на плечи верстальщика. Итак, какие же преимущества у блочной структуры?
Кроссбраузерность и кроссдевайсовость: трудно предугадать какими браузерами будут пользоваться люди, которые пожелают зайти на разрабатываемый сайт. Традиционная четвёрка — это MS IE, FF, Opera, Safari. Однако, есть ведь ещё Lynx, мобильные всякие браузеры, измывающиеся цинично над дизайном и всякие самоделки/старые версии/извращения которыми люди по малопонятным мне причинам пользуются.
Таблицы отрисовываются довольно неодинаково в разных браузерах, начиная от размеров отступов по-умолчанию и заканчивая отображением их границ (например, браузер Opera игнорирует цвет рамки, заданный не через таблицу стилей). То есть, ежели строить логическую цепочку имеющихся данных и каким-то образом её проанализировать, таблицы будут служить преградой, разрушающей всю композицию.
Семантика кода (логичность): рекомендации W3C гласят, что «таблицы должны использоваться только для представления табличных данных, но не для разметки страницы».
Смена дизайна (универсальность): нужно быть лютым извращенцем, чтобы копаться в чужом табличном шаблоне в целях подпраить немного внешний вид. Разобраться в нагромождении тегов «td», «th» и «tr» тяжко, когда там повсюду используются конструкции сдвоенных и счетверённых ячеек (кто разбирался в чужих colspan'ах и rowspan'ах, поймут). При использовании блоков же, достаточно лишь сменить CSS-стиль и загрузить новые картинки, после чего сайт может выглядеть совсем неузнаваемо.
Объём кода (скорость загрузки): староверы сетуют на то, что если сравнить размер табличного шаблона и блочного, но с рассчётом файла стилей — выйдет одинаково, или даже в проигрышную для блоков сторону. Однако, таблица стилей загрузится однажды и закэшируется, благодаря чему не нужно будет каждый раз её перезапрашивать. Код же, генерируемый скриптом на сервере постоянно будет содержать в себе вышеупомянутые теги.
Отображение загруженной информации: как известно, таблица отрисовывается браузером исключительно после её полной загрузки. Привет «Войне и Миру», в табличном оформлении! Блок же может начать отображаться даже до загрузки шапки, что звучит диковато, но об этом позже. Чтобы задержать посетителей на тяжеловесном сайте, всегда помещал шапку в отдельную таблицу, ибо, картинки шапки закэшируются, а сама таблица начнёт отображаться, показывая собой, что сайт не умер, а просто долго грузится. Особенно актуально это было во времена коммутируемого доступа в Интернет…
Индексирование в поисковых системах: поисковые системы вполне могут заблудиться в награмождении таблиц, в блоках же поисковая система всегда может семантически определить, где данные, а где декорации.
Свободное расположение блоков в шаблоне: в отличие от таблицы, блоки можно размещать не с четырёх сторон от близлежащего объекта, но совершенно свободно в любой области сайта. Это открывает совершенно новые горизонты для дизайнера и программиста.
Как верстать?
- Решаете, какой использовать каркас;
- Рисуете дизайн под этот каркас;
- Разрезать полученный дизайн на отдельные картинки;
- Создать xHTML-код, который будет содержать в себе таблицу с взаимным расположением элементов, как в каркасе;
- Вставить полученные (нарезаные) изображения в xHTML-код, где это необходимо;
- Создать каскадную таблицу стилей под области, где необходимо сделать изображение фоновым рисунком;
- Отладить.
Как верстать таблицами?
Пример:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="inc/css/style.css" type="text/css" rel="stylesheet" />
<title>%TITLE%</title>
</head>
<body>
<table width="100%">
<tr>
<td width="350">
%MAINLOGO%
</td>
<td width="80%">
%TRANS%
</td>
</tr>
<tr>
<td width="250">
%LOGIN%
</td>
<td>
%CONTENT%
</td>
</tr>
<tr>
<td colspan="2">
%FOOTER%
</td>
</tr>
</table>
</body>
</html>
Получаем примерно следующий результат:
Как верстать блоками?
Пример: (файл inc/css/style.css)
#header {
float: left;
width: 220px;
}
#trans {
float: left;
width: 60%;
}
#menu {
width: 220px;
clear: left;
float: left;
}
#content {
width: 60%;
}
#footer {
width: 90%;
}
Пример: (файл index.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="inc/css/style.css" type="text/css" rel="stylesheet" /> <title>%TITLE%</title> </head> <body> <div id="header">%MAINLOGO%</div> <div id="trans">%TRANS%</div> <div id="menu">%LOGIN%</div> <div id="content">%CONTENT%</div> <div id="footer">%FOOTER%</div> </body> </html>
Получаем примерно следующий результат:
Не совсем удачный вариант, но помогает понять принцип работы блочной вёрстки. Существуют более кросс-платформенные и удобные решения.
Пример: (файл inc/css/style.css)
#header {
width: 100%;
float: left;
}
#left_d {
float: left;
width: 150px;
}
.menu {
float: left;
width: 140px;
}
#content {
float: left;
width: 70%;
clear: right;
}
#r_banners {
overflow: hidden;
display: inline-block;
float: right;
width: 75px;
}
#footer {
float: left;
width: 100%;
}
Пример: (файл index.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="keywords" content="%KEYWORDS%" /> <link href="inc/css/style.css" type="text/css" rel="stylesheet" /> <title>%TITLE%</title> </head> <body> <div id="header"> <a href="index.php">%LOGO%</a></div> <div id="left_d"> <div class="menu">%MENU%</div> <div class="menu">%LOGIN%</div> <div class="menu">%U_LINKS%</div> <div class="menu">%LCOMMENTS%</div> </div> <div id="content">%CONTENT%</div> <div id="r_banners">%BANNERS%</div> <div id="footer">%ADDRESS%</div> </body> </html>
Получаем примерно следующий результат:
Если статья была полезна, напишите об этом, будьте добры! Любые вопросы тоже можно задавать в комментариях.
