На главную

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

Rambler's Top100

Малобюджетные сайты...

Продвижение веб-сайта...

Контент и авторское право...

Забобрить эту страницу! Забобрить! Блог Библиотека Сайтостроительства на toodoo
  Поиск:   
Рассылки для занятых...»
I2R » Сайтостроительство » Web-дизайн

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

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

В БЕЗДНЕ

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

Эти двое смелых - эксперты по 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 вел себя аналогичным образом, не особо заботясь о непременном сохранении всех трех панелей.

A List Apart, for People Who Make Websites.
[Традиционная панель ALA]

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

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

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

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

Джеффри Зельдман (Jeffrey Zeldman), A List Apart

Перевод: Павел Филиппов
Источник: webmascon

Рассылки Subscribe.ru:

Библиотека сайтостроительства - новости, статьи, обзоры
Дискуссионный лист для web-разработчиков
Подписка на MailList.Ru
Автор: NunDesign
Другие разделы
Оптимизация сайтов
Web-студии
» Новое в разделе
Web-дизайн
Web-программирование
Интернет-реклама
Раскрутка сайта
Web-графика
Flash
Adobe Photoshop
Рассылка
Инструменты вебмастера
Контент для сайта
HTML/DHTML
Управление web-проектами
CSS
I2R-Журналы
I2R Business
I2R Web Creation
I2R Computer
рассылки библиотеки +
И2Р Программы
Всё о Windows
Программирование
Софт
Мир Linux
Галерея Попова
Каталог I2R
Партнеры
Amicus Studio
NunDesign
Горящие путевки, идеи путешествийMegaTIS.Ru

2000-2008 г.   
Все авторские права соблюдены.
Rambler's Top100