Библиотека Интернет Индустрии I2R.ru

От таблиц к стилям за пять простых шагов

1. Путешествие начинается
2. Принимаем решение
3. Обдумываем разметку
4. Внутри блока
5. Вне блока

В БЕЗДНЕ

Эти двое смелых - эксперты по CSS, непосредственно участвовавшие в создании стандартов. Так как они пожелали остаться неизвестными, я назову их Анонимный Донор #1 и Анонимный Донор #2.

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

СТАНДАРТЫ ПРОТИВ СТАНДАРТОВ

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

БУКВА

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

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

2. Такой подход к верстке не имеет смысла в нетрадиционных (например, речевых) броузерах и, по мнению W3C, вреден - даже если страница проходит валидацию.

3. Страницы с такой версткой менее доступны людям и устройствам.

ДУХ

РЕЗИНОВЫЙ ЗАВТРАК

!-- Dress left --
	table border="0" cellpadding="0" 
	cellspacing="0"
!-- Your variable left margin --
	tr valign="top"td width="15%" 
	bgcolor="#ffffcc" /td
	td width="75%" bgcolor="#ffffcc" 
	valign="top"
!-- Your actual content --

Будьте добры - то же самое, но на человеческом языке. Я рыдал, как ребенок, при одной мысли о том, что можно заменить безумное количество таблиц на два-три чистых и незамысловатых DIV'а.

ОБДУМЫВАЕМ РАЗМЕТКУ

ТРЕХПАНЕЛЬНАЯ ВЕРСТКА В CSS

Я быстро решил, что в верхней оранжевой панели с названием не было и нет никакой необходимости. С настоящего момента название вполне можно поместить в панель с контентом. Откровенно говоря, создание трехпанельной верстки в CSS казалось практически неосуществимым, так как подобные возможности только планируются для CSS-3 (вообще-то трехпанельная верстка относительно просто реализуется и в CSS, как видно из примеров Porter Glendinning и вашего покорного слуги. Но в то время, когда ALA переживал первую смену дизайна, проблемы выглядела неразрешимой).

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

1. Путешествие начинается
2. Принимаем решение
3. Обдумываем разметку
4. Внутри блока
5. Вне блока