|
|
|
Комментарий: Данная статья писалась
для другого информационного сайта и приведенные в статье примеры
относятся к нему.
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,будут выделяться жирным и выкрашиваться в черный
цвет.
Для примеров мы создадим класс .com.
Это будет выглядеть так:
.com{color:#cc6600}
Теперь все элементы, которые мы сопоставим классу .com
будут выкрашиваться в оранжевый цвет.
Ссылки тоже являются стандартным элементом 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 1 и html 4.0. или выкачают их спецификацию из сети.
|
|
