От таблиц к стилям за пять простых шагов
автор: 2000 A List Apart
перевод: Павел Филиппов
В БЕЗДНЕ
ФИЛЬМЫ УЖАСОВ учат нас не входить в темную комнату в одиночку. Перед тем, как твердо встать на новый путь веб-дизайна, я нашел несколько верных спутников для путешествия по темным углам.
Эти двое смелых - эксперты по 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"> </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 Отзывы о книге |