Поиск:

От оформительских трюков к стандартам: путешествие дизайнера

В БЕЗДНЕ

ФИЛЬМЫ УЖАСОВ учат нас не входить в темную комнату в одиночку. Перед тем, как твердо встать на новый путь веб-дизайна, я нашел несколько верных спутников для путешествия по темным углам.

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

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

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

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

БУКВА

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

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

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

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

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

ДУХ

И существует также второй путь, путь к Святому Граалю стандартов Web: отделение стиля от содержания, использование структурной разметки для данных и CSS для всех видов визуальной разметки. Я использовал CSS с 1997 года, но ни разу не включал полный газ. Теперь, с дружеской помощью, я могу сделать это.

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

Традиционная верстка ALA была лабиринтом из бесконечных вложенных таблиц. В прошлом, при обновлениях сайта, даже я не мог вспомнить, для чего служат те или иные colspan и rowspan - несмотря на то, что сам их создал.

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

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

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

Сейчас самое время поговорить о пересмотре верстки при переходе от HTML к CSS. В прошлом дизайн ALA представлял собой «резиновую» верстку в три панели, он сжимался и растягивался в зависимости от разрешения вашего монитора. Я хотел, чтобы он и в CSS вел себя аналогичным образом, не особо заботясь о непременном сохранении всех трех панелей.

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

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

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

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

Рекомендую

Михаил Дубаков Создание Web-страниц. Искусство верстки Сравните цены: на www.ozon.ru на www.books.ru на www.oz.by Почитайте Главу 7 Почитайте Главу 9

Рекомендую

Михаил Дубаков Веб-мастеринг средствами CSS Сравните цены: на www.ozon.ru на www.books.ru на www.oz.by Почитайте Главу 5 Отзывы о книге