Web-дизайн тяжело болен наследием полиграфии. Дизайнеры привыкли к
визуализации. Их методы принципиально не менялись годами, будь то набор
смесителей и красок или последняя версия Adobe Photoshop. В довершении
ко всему ограниченность первых версий html не давала дизайнерам иного
выбора.
В итоге, пользователи выстраивали сложные системы вложенных таблиц и отдельно
описывали характеристики каждого блока. Исходики были переполнены
повторяющимися тэгами и атрибутами.
Немало способствовали распространению визуального подхода и WYSIWYG-редакторы.
Пользовательская среда этих редакторов (от Front Page до Dreamweaver)
активно поддерживает визуализацию. Пользователи просто выкрашивают нужные
блоки в нужные цвета, назначают размеры и ориентацию. При такой работе
сайт становится похожим на простую картинку, макет верстки. Однако сайт
по природе не визуален, это программный продукт с разделением содержания
и представления. Новые возможности HTML позволяют отказаться от визуальной
модели и перейти к структурной.
Расмотрим разницу на примере этого сайта.
Ранее мне приходилось детально описывать каждый отдельновзятый блок
на странице. Одно только заглавие выглядело весьма громоздко:
<b><font color="#000000">PRO</font><font
color="#CC6600">.D</font>
<font color="#000000">ESIGN</font></b>
И так по отношению к каждому элементу. Очень изнурительно. А если представить,
что мне вздумается изменить дизайн сайта, то просто волосы на голове
дыбом становятся от мысли сколько кода надо перелапатить, чтобы внести
изменения в каждый элемент.
А теперь глянем на сайт с точки зрения структурного подхода. По сути,
весь мой сайт состоит из шести элементов:
- Фон.
- Основной текст.
- Акцентированный текст (например заглавия).
- Примеры (например куски html-кода).
- Ссылки.
- Картинки.
Сущность структурного подхода состоит в том, чтобы единожды описать имеющиеся
элементы, а далее лишь присваивать их атрибутику соответствующим блокам.
Выглядит это так:
- Мы создаем отдельный CSS-файл с описанием всех элементов. Такие элементы
как фон и основной текст изначально обозначены как самостоятельные элементы
языка html. Мы лишь снабдим их атрибутикой:
body{background:url("aroundfon.gif"); background-color:#ffffff;
font-size:14px; font-family:arial,helvetica; color:#333333}
Здесь мы описали, что на наших страницах на белый фон должна накладываться
фоновая картинка aroundfon.gif, что шрифт на наших страницах должен
быть семейства Arial-Helvetica, размером 14px и цветом #333333.
Далее сложнее. Таких элементов как акцентированный текст и и примеры
в html нет. Вернее они есть, но их атрибутика не соответствует потребностям
нашего дизайна. Поэтому мы создадим собственные элементы. В нашем случае
для этого лучше всего воспользоваться классами.
Для акцентирующего текста мы создадим класс .main. Это будет выглядеть
так:
.main{color:#000000; font weight:bold}
Теперь все элементы на страницах, которые мы сопоставим классу .main
будут выделяться жирным и выкрашиваться в черный цвет.
Для примеров мы создадим класс .red. Это будет выглядеть так:
.red{color:#cc6600}
Теперь все элементы, которые мы сопоставим классу .red будут выкрашиваться
в оранжевый цвет.
Ссылки тоже являются стандартным элементом html и мы лишь присвоим им
атрибутику:
A{color:#006699; text-decoration:none}
A:hover{color:#cc6600}
A:visited:{color:#996666}
- Второй шаг заключается в том, что на каждой нашей странице мы в <head>
прописываем ссылку на созданный css-файл:
<link rel="stylesheet" type="text/css" href="style.css">
- Третий шаг прост. Мы наполняем страницы содержанием, а всем элементам
нуждающимся в выделении просто присваиваем соответствующий класс:
<font class="main">наш текст</font>
Теперь для внесения изменений нам не надо трогать наши страницы вообще.
Мы просто открываем CSS-файл и вносим соответствующие изменения и мгновенно
всем элементам на всех наших страницах будет присвоена новая атрибутика.
Да и сам html код стал намного изящней и лаконичней.
Эта статья не предназначена для обучения Вас синтаксису css. Для этого
существует множество учебников и в печатном виде, и в сети. Однако многие
дизайнеры считают, что эти учебники им в принципе не нужны. Их рассуждения
таковы:«Зачем нам учить эти непонятные css и html 4.0., если мы
и так делаем сайты.» Так вот эта статья предназначена объяснить,
что создание сайта принципиально отличается от макетирования буклета,
и что между визуальным и структурным подходами в web-дизайне есть огромная
разница в пользу последнего.
Очень надеюсь, что после прочтения этой статьи многие визуалисты отставят
хотя бы на время в сторону Dreamweaver и купят учебник по css и html 4.0.
или выкачают их спецификацию из сети.