Чем различается табличная верстка и верстка через CSS

Русский интернет (уже наконец) вовсю осваивает “дизайн через CSS”, но многие все равно не понимают, почему именно надо дизайнить так, а не по-старому, через таблицы. Руководствуются, как часто бывает, тем, что это модно. А многие, в общем-то, и не спешат уходить от таблиц, не считая, что в них есть что-то плохое. Я собираюсь написать длинный цикл статей о веб-разработке новыми методами. Главная моя цель - структурировать на русском языке те знания, которых полно в разрозненном виде по всей сети.

В этой первой статье я постараюсь рассказать о самой сути современных стандартов разметки веб-страниц и о целях, которые преследовались при их написании. То есть, эта статья о том, “что это” и “зачем это”, а не “как это”.
Понятия

Для начала я хочу определиться с понятием “табличная верстка”. Если вы начинали заниматься веб-разработкой в 90-е годы, то знаете, что верстать страницу можно было двумя способами: потоком или таблицами. Первый способ - это попросту отсутствие всякой верстки, когда один за другим сверху вниз идут заголовки и абзацы. А таблицы - это когда вся страница представляется в виде сетки, в которую в нужные места уже вставляются текст, картинки и другие таблицы. Причем, сама по себе структура этих <table>, <tr>, <td> позволяет создать сетку любой сложности.

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

это единственный способ центрирования содержимого по вертикали

с помощью таблицы 3?3 ячейки делались рамки с оформлением углов

добавьте свое, наверняка у вас полно любимых приемов

Вот это:

<table width=”100%” background=”/i/bg_top.jpg” style=”background-repeat: no-repeat;” border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td width=”75%” valign=”bottom”>
<img src=”/i/_.gif” mce_src=”/i/_.gif” width=”1″ height=”40″ border=”0″ alt=”"><br>
<table border=”0″ cellspacing=”0″ cellpadding=”0″><tr valign=”top”>

<td><img src=”/i/_.gif” mce_src=”/i/_.gif” width=”25″ height=”1″ border=”0″ alt=”"><br></td>
<td><a href=”/” mce_href=”/”><img src=”/i/logo.gif” mce_src=”/i/logo.gif” width=”213″ height=”90″ border=”0″ alt=”"></a><br></td>
<td><img src=”/i/slogan.gif” mce_src=”/i/slogan.gif” width=”124″ height=”90″ border=”0″ alt=”"><br></td>

</tr></table>
</td>
<td bgcolor=”#ffffff” background=” “><img src=”/i/_.gif” mce_src=”/i/_.gif” width=”1″ height=”1″ border=”0″ alt=”"><br></td>
<td width=”25%” bgcolor=”#0C2E82″ background=” “>
<table width=”100%” border=”0″ cellspacing=”2″ cellpadding=”2″><tr valign=”top”>

<td align=”center”>
<table width=”90%” cellpadding=”0″ cellspacing=”1″ border=”0″>
<tr valign=”top”>
<td colspan=”3″><span class=”white small”><b>Персональный кабинет</b></span></td>

</tr>

<tr valign=”top”>
<td><span class=”white small”>логин</span></td>
<td><span class=”white small”>пароль</span></td>

<td> </td>
</tr>

… я и называю табличной версткой.
Проблема

Есть куча исторических причин, почему HTML в конце 90-х годов прошлого века стал выглядеть именно так, но это тема отдельной статьи. Однако, примерно в то время все больше стало появляться людей, которые, смотря на то, куда это все развивается, стали громко говорить, что это плохо. Я постараюсь здесь свести воедино то, что эти и другие “евангелисты” неустанно говорят и пишут в книжках по поводу недостатков табличной верстки.
Много кода

Табличная верстка занимает неприлично много места. Страница более-менее хорошо упакованного сайта легко может занимать и 80КБ, и 120КБ… Это без картинок. Все это выливается не только в медленную загрузку и отрисовку, но и в немаленькие деньги за трафик как для сайтов, так и для клиентов. Ведь если картинки хотя бы кешируются браузером, то всю верстку для каждой новой страницы он неминуемо грузит заново, как бы похожа на предыдущую та ни была (кто тут сказал слово “фрейм”? не надо…).
Трудная правка

Табличную верстку трудно править вручную. Несмотря на большое развитие визуальных редакторов кода, от этой проблемы они не спасают. Если ваш сайт - динамический, значит он собирается из кусков шаблонов. И значит шаблоны будут состоять из фрагментов таблиц. Если вам приходилось когда-нибудь смотреть в такой фрагмент и думать, относится ли вот эта </td> к вашей части или закрывает ячейку из верхней части шаблона, вы понимаете, о чем я говорю… Заодно прошу прощения, если причинил кому-то боль этими темными воспоминаниями.
Негибкий дизайн в разработке

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

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

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

Веб придумывался не только для этого. Одной из идей была повсеместность, чтобы веб был доступен на бумаге, на мобильном телефоне, PDA, текстовом терминале, мог быть начитан голосом. Все это очень трудно с таблицами. Я бы даже сказал - невозможно, потому что искусственного интеллекта, способного отличить ячейку с навигацией от ячейки с основным содержимым, у нас пока еще так и нет.

Многие мне возражают, что, мол, кому вообще нужны эти 0,000…% пользователей, пользующиеся этой экзотикой? Я думаю, это во многом путание причины и следствия: потому и 0,000…%, что нет сайтов, которыми можно нормально пользоваться ненастольными средствами. Думаю, если эта ситуация будет меняться так, как сейчас меняется, мы уже скоро застанем время, когда веб на PDA будет казаться обычным делом.

Ну вот. Кажется, достаточно .
Что взамен

Взамен W3C - организация, занимающаяся стандартами для веба - предлагает нам две спецификации: HTML 4 и CSS 2. Я ни в коем случае не предлагаю вам их читать сейчас. Не вздумайте. Это точные детализированные справочники, и чтение их в качестве художественного произведения ничего, кроме головной боли и разочарования в жизненных идеалах, не принесет. Тем более, самой сути, зачем они обе существуют, там, в общем-то, и не объяснено.

Я и ссылки-то поставил всего-навсего потому, что должны же быть ссылки на спецификации в статье про HTML и CSS!

А суть состоит в том, что нам предлагается разделить “компот” и “мух” - содержимое и оформление страниц, и пользоваться для того и другого разными средствами. HTML - для описания содержимого, его структуры, а CSS - для оформления и верстки.

Здесь важно остановиться и вчитаться в последнее предложение предыдущего абзаца еще раз. В нем неприметно поселилась ключевая мысль всей этой статьи. То есть, буквально, из HTML выкидывается все, что связано с тем, как он выглядит, а в CSS к бордюрчикам и цветам (с которых он начинался) добавляются средства для размещения элементов на странице, сдвигания, отступания и пр.
HTML 4 не является языком оформления веб-страниц.

Он является языком логической разметки страниц. Раньше, создавая HTML-документ, вы думали о том, что этот заголовок будет сделан жирной верданой золотистого цвета и отцентрован посредине большой темно-зеленой ячейки. Теперь все это предлагается выкинуть, и написать просто:
Заголовок страницы
. Выкидывается все, связанное с форматированием: шрифты, бордюры таблиц, цвет ссылок, отступы у , фоны ячеек таблиц, центрирование…

И если раньше вы смотрели на макет страницы, и видели глазами, что вот это у нас шапка сверху, а вот это слева чуть другого цвета - сайдбар с ссылками, а все остальное - основная часть страницы, то теперь вам предлагается это все непосредственно написать руками:

<div id=header>
<h1>Компания</h1>
<small>Кульный девиз</small>
</div>

<div id=main>
<p>Компания была основана…
</div>

<div id=sidebar>
<ul>
<li><a href=”" mce_href=”">Продукты</a></li>

<li><a href=”" mce_href=”">Клиенты</a></li>
<li><a href=”" mce_href=”">Контакты</a></li>
</ul>

</div>

Фактически, то, что вы делаете теперь в HTML - это некая карта страницы, не более того. Структура. Даже вот тот <small> в заголовке означает не “<font size=1>“, а “второстепенная по значению фраза внутри шапки, подзаголовок”.

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

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

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

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

Общий стиль для всего сайта

CSS спроектирован так, чтобы дизайн и стиль всего сайта хранился в одном месте (можно даже буквально в одном файле, хотя для больших проектов это не очень удобно). А это означает, что во время разработки этого самого сайта, и во время различных “редизайнов” и “рестайлингов” вам вообще не нужно, как раньше, менять все HTML’ные файлы или шаблоны, достаточно сделать изменения только в CSS.
Маленький размер страниц

Несмотря на то, что все равно в файлах суммарно остается и содержимое, и оформление, сам синтаксис CSS ведет к меньшему размеру файлов. Например, если вы (или ваш Dreamweaver) для каждой ссылки в коде раньше писали:

<font face=”Verdana, Arial, Sans-Serif” color=”#880000″ size=”2″>
<b><a href=”" mce_href=”"></a></b></font>

то теперь вы напишите в HTML:

<a href=”" mce_href=”"></a>

и в CSS:

a {Font:Bold 10pt Verdana, Arial; Color:#880000;}

и будете экономить байты на каждой ссылке. Потому что правило в CSS достаточно написать только один раз.

Даг Бауман как-то провел эксперимент, перевел заглавную страницу сайта Microsoft на CSS, получил уменьшение объема с 40КБ до 15КБ.
Кеширование оформления

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

К этому стоит добавить, что многие картинки, которые раньше делались тегами при дизайне с использованием стилей переходят тоже в правила CSS’ного файла. И большинство браузеров кеширует эти картинки агрессивней, чем те, которые сидят в HTML: он за ними даже не ходит на сервер проверять, изменились ли они, если не изменился стилевой файл.
Свободное расположение содержимого в файле

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

Оформительскую информацию в CSS-файлах можно группировать и структурировать, как душе угодно. Например, можно из всего оформления выдрать только цвета и вынести их в отдельный файл, сделать таких файлов несколько вариантов и легко менять цветовую гамму в зависимости, скажем, от текущей погоды. Опять таки, независимо от остальной верстки, шрифтов и размеров…
Легче скриптовать

HTML c чистыми данными гораздо проще скриптовать: не надо вычленять данные из оформительского мусора и менять скрипт каждый раз, когда вам захочется поменять жирность шрифта у какой-то ключевой ячейки с данными.
Легче думать

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

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

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

Добро пожаловать в реальность

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

Первое, что сильно портит малину - это реализация всех этих стандартов в выпускающихся браузерах. Подумайте, спецификация CSS 2 была написана в 1998 году, а реальные крупные сайты, построенные с его использованием, стали появлятся что-то где-то в 2002-2003 годах. Это от того, что примерно только в это время браузеры с новыми движками, вокруг которых крутились прогрессивно мыслящие разработчики, начали переходить из стадии “оно компилируется!” в стадию “можно показывать людям”. Однако и сейчас, что в Gecko-браузерах (Firefox и другие), что в Opera, что в Safari и Konqueror, полно ошибок в реализации CSS. Не говоря уж об IE, ошибки которого никто не правил уже 4 года. А это значит, что вам, как веб-разработчику, который желает всем этим заниматься, придется привыкать не только к новой парадигме (!), что само по себе трудно, но и учить новые отвратительные хаки, как заставить тот или иной (точнее, по большей части - только тот) браузер работать вменяемо.

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

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

Источник http://webstudent.ru

Tags: CSS, html, верстка

Добавить комментарий Апрель 3, 2008

Что такое CSS

Страшно подумать, но в июле этого года исполнилось всего 10 лет стандарту HTML 1.0 (который, кстати, так никогда и не был “официально” принят и остался в виде черновика для “внутреннего употребления”). За эти 10 лет HTML прошел очень большой путь, завоевал практически все компьютеры в мире и стал одним из самых известных “компьютерных языков” (все-таки отнести его к языкам программирования рука не поднимается)… И одним из весьма заметных этапов развития HTML стало появление CSS - Cascading Style Sheets или, говоря по-русски, каскадных таблиц стилей.

Идея CSS очень проста. Если в HTML вы прямо в документе ставили указание на то, как должен выглядеть тот или иной элемент, то при использовании CSS такие указания выносятся в отдельный блок (который может либо включаться в документ, либо читаться из внешнего файла).

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

Первая версия CSS - CSS level 1 - принятая в 1996 и пересмотренная в 1999 году, позволяла оперировать только цветами, шрифтами, отступами и им подобными относительно простыми и частоиспользуемыми элементами. Принятая в 1998 году, спецификация CSS level 2 добавила возможность абсолютного позиционирования элементов, создания стилей для разных типов устройств, использования собственных курсоров, расширила возможности по выбору элементов, к которым должен применяться тот или иной стиль и многое другое. Естественно, что CSS level 2 поддерживает и таблицы стилей, созданные в CSS level 1. В настоящее время консорциум W3C активно ведет разработку стандарта CSS level 3 и CSS level 2 revision 1, которые должны учесть все возрастающие потребности вебмастеров и вебдизайнеров, по созданию современных и удобных сайтов.

Следует учитывать, что каскадные таблицы стилей не полностью абстрагируют визуальное представление документа от его содержания - они только позволяет более компактно описать правила визуального представления. И если вы захотите изменить дизайн сайта, то вам все-равно придется переписывать HTML код (правда, сделать это будет проще чем при отсутствии CSS). Значительно больший уровень абстракции можно получить, используя связку языков XML + XSL (из которых, в частности, можно генерировать HTML + CSS), но это намного сложнее, и несколько выпадает из темы данной статьи.

Но хватит теории! Давайте попробуем практикой заняться…

Есть три способа описать стиль элемента в HTML документе. Самый простой и, практически, не использующий преимуществ CSS способ - это указать стиль внутри тега HTML. Например, написать
<H2 STYLE=”COLOR: #AADDAA; FONT-WEIGHT: BOLD; FONT-SIZE:11pt;”>заголовок второго уровня</H2>
Единственное преимущество, которое можно получить таким образом - это задание некоторых атрибутов текста, которые не поддерживаются тегами HTML. Зато сохраняются все недостатки HTML - указанный стиль относится только к одному тегу и для изменения внешнего вида документа вам придется изменить описание стиля в каждом теге.

Второй способ несколько лучше: надо описания стилей заключить внутри тегов <STYLE TYPE=”text/css”> и </STYLE>. Например, если вы напишете
<STYLE TYPE=”text/css”>
H2 {COLOR: #AADDAA; FONT-WEIGHT: BOLD; FONT-SIZE:11pt;}
</STYLE>
а в тексте документа укажете <H2>заголовок второго уровня</H2>, то получите тот же эффект. Однако, в отличие от предыдущего способа, свойства отображения применятся ко всем тегам H2 в документе. И если, скажем, вам потребуется изменить размер шрифта или цвет всех заголовков второго уровня, то изменить потребуется всего одну строчку. Согласитесь, что это намного удобнее!

Однако, у предыдущего способа тоже есть свой недостаток: блок STYLE вам придется скопировать в каждую страницу своего сайта. А если страниц там несколько сотен? И вам понадобится что-то поменять? Неудобно… Но можно победить и эту проблему - с помощью тега LINK. Описав требуемые стили в отдельном текстовом файле (теги STYLE указывать не требуется), вы затем можете написать в секции HEAD документа
<LINK REL=”stylesheet” TYPE=”text/css” HREF=”style.css”>
Эта команда укажет, что таблица стилей находится во внешнем файле. Таким образом, даже для очень большого сайта может использоваться всего один файл со стилями, что очень сильно облегчает редактирование. Есть еще один “хитрый” необязательный параметр тега LINK: MEDIA. Он может указывать для какого типа устройств таблица стилей предназначена и иметь значения, например, “all” (используется по умолчанию), “handheld”, “print” и некоторые другие. Следует только учесть, что (пока еще?) не все браузеры понимают таблицы стилей, подключаемые с использованием этого параметра.

В некоторых случаях бывает полезно объединить два предыдущих метода - например, если разные секции должны иметь частично разные стили (скажем, отличаться цветом фона). Внутри тега STYLE можно указать
@import url(style.css)
и тогда к стилям, описанным внутри STYLE присоединятся стили из внешнего файла.

Но у внешних файлов тоже есть недостаток: если соединение с сервером не очень хорошее (что не редкость у модемных пользователей), то файл со стилями может и не скачаться… А страничка без стилей обычно выглядит преотвратнейше… Поэтому тут уж вам придется выбирать как лучше поступить.

Практика показывает, что таблицы стилей редко бывают больше 2-3 Кб, даже для очень “раскрашенных” страниц. И если ваш веб-сервер умеет “на лету” сжимать страницы (в Apache, например, этим занимается mod_gzip), то такой объем будет для пользователя практически незаметен. Ну а дальше - дело техники: пишется какая-нибудь команда, которая на сервере читает таблицу стилей из внешнего файла (все-таки один файл намного легче редактировать!) и встраивает ее содержимое в страницу, отдаваемую посетителю. В простейшем случае это может быть инструкция SSI, вроде
<!–#include file=”style.css” –>
а если ваш сайт написан на php, то можно написать, например,
<?php readfile(”style.css”); ?>

Источник: http://www.listsoft.ru/

Tags: CSS, html, style

Добавить комментарий Февраль 28, 2008