Маркетер
  • Маркетинг
  • Digital
  • Реклама
  • Public Relations
  • Менеджмент
  • Новости
  • Маркетинг
  • Digital
  • Реклама
  • Public Relations
  • Менеджмент
  • Новости
YouTube 151 Подписчики
Telegram 241 Подписчики
VK 0 Подписчиков
Маркетер
Маркетер
  • Маркетинг
  • Digital
  • Реклама
  • Public Relations
  • Менеджмент
  • Новости
  • Проектирование

От визуализации к структурированию

  • 04.03.2002

Автор статьи: Нурниязов Олег

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. или выкачают их спецификацию из сети.

Алексей Волков

Предыдущий материал
  • Проектирование

Плохое дело — привычка

  • 04.03.2002
  • Алексей Волков
Read More
Следующий материал
  • Все о Photoshop

Текст а-ля X-Files

  • 20.03.2002
  • Алексей Волков
Read More
Вас также может заинтересовать
Read More
  • Usability в интернете

Высокие стандарты конверсии интернет-магазинов: каркасы

  • Алексей Волков
  • 10.06.2012
Read More
  • wordpress

SSD Optimize WordPress – легкий и мощный плагин

  • Nika75
  • 20.09.2010
Read More
  • Usability в интернете
  • Блог

Usability в интернете

  • Ravashol
  • 23.01.2010
Read More
  • Usability в интернете

Потребитель и юзабилити

  • Алексей Волков
  • 25.12.2009
Read More
  • Usability в интернете

Правила которых я придерживаюсь в веб-дизайне

  • Алексей Волков
  • 28.04.2009
Read More
  • Системы управления контентом CMS

XOOPS — система управления контентом

  • Алексей Волков
  • 05.06.2006
Read More
  • Системы управления контентом CMS

Sitemanия

  • Алексей Волков
  • 10.02.2006
Read More
  • Системы управления контентом CMS

CMS от «СТРАТА Технологии»

  • Алексей Волков
  • 20.12.2005

Добавить комментарий

Для отправки комментария вам необходимо авторизоваться.

Свежие посты
  • Дайджест постов Сергея Людкевича
    • 12.09.24
  • Как юристы тормозят бизнес
    • 30.08.24
  • Продвижение оптовых кампаний в Яндекс Директ
    • 06.03.24
  • Cарафанное радио
    • 13.01.24
  • 5-55: История компании
    • 01.03.23
Маркетер
  • О проекте
  • Информационное спонсорство
  • Рекламным агентствам
  • Ссылки
(с) ООО "Маркетер". Официальный сайт. Маркетер: Статьи про рекламу, маркетинг, public relations, интернет

Введите ключевые слова для поиска и нажмите Enter