- ЖУРНАЛ "ADOLO" - |
От визуализации к структурированию |
Web-дизайн тяжело болен
наследием полиграфии. Дизайнеры привыкли к
визуализации. Их методы принципиально не
менялись годами, будь то набор смесителей и
красок или последняя версия Adobe Photoshop. В
довершении ко всему ограниченность первых
версий html не давала дизайнерам иного выбора. В итоге, пользователи выстраивали сложные системы вложенных таблиц и отдельно описывали характеристики каждого блока. Исходики были переполнены повторяющимися тэгами и атрибутами. Немало способствовали распространению визуального подхода и WYSIWYG-редакторы. Пользовательская среда этих редакторов (от Front Page до Dreamweaver) активно поддерживает визуализацию. Пользователи просто выкрашивают нужные блоки в нужные цвета, назначают размеры и ориентацию. При такой работе сайт становится похожим на простую картинку, макет верстки. Однако сайт по природе не визуален, это программный продукт с разделением содержания и представления. Новые возможности HTML позволяют отказаться от визуальной модели и перейти к структурной. Расмотрим разницу на примере этого сайта. Ранее мне приходилось детально описывать каждый отдельновзятый блок на странице. Одно только заглавие выглядело весьма громоздко: PRO.D ESIGN И так по отношению к каждому элементу. Очень изнурительно. А если представить, что мне вздумается изменить дизайн сайта, то просто волосы на голове дыбом становятся от мысли сколько кода надо перелапатить, чтобы внести изменения в каждый элемент. А теперь глянем на сайт с точки зрения структурного подхода. По сути, весь мой сайт состоит из шести элементов: Фон. Основной текст. Акцентированный текст (например заглавия). Примеры (например куски 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} Второй шаг заключается в том, что на каждой нашей странице мы в прописываем ссылку на созданный css-файл: Третий шаг прост. Мы наполняем страницы содержанием, а всем элементам нуждающимся в выделении просто присваиваем соответствующий класс: наш текст Теперь для внесения изменений нам не надо трогать наши страницы вообще. Мы просто открываем CSS-файл и вносим соответствующие изменения и мгновенно всем элементам на всех наших страницах будет присвоена новая атрибутика. Да и сам html код стал намного изящней и лаконичней. Эта статья не предназначена для обучения Вас синтаксису css. Для этого существует множество учебников и в печатном виде, и в сети. Однако многие дизайнеры считают, что эти учебники им в принципе не нужны. Их рассуждения таковы:«Зачем нам учить эти непонятные css и html 4.0., если мы и так делаем сайты.» Так вот эта статья предназначена объяснить, что создание сайта принципиально отличается от макетирования буклета, и что между визуальным и структурным подходами в web-дизайне есть огромная разница в пользу последнего. Очень надеюсь, что после прочтения этой статьи многие визуалисты отставят хотя бы на время в сторону Dreamweaver и купят учебник по css и html 4.0. или выкачают их спецификацию из сети. Нурниязов Олег |
Copyright by ADOLO |
Копирование и использование данных материалов разрешается только в случае указания на журнал "ADOLO", как на источник получения информации. При этом во всех ссылках обязательно явное указание адреса вэб-сайта www.adolo.tk. |