|
||
|
||
Контент vs. дизайнFireFalcon Заранее прошу прощения у профессиональных веб-мастеров за излишне подробный стиль изложения. Дело в том, что данная статья представляет собой подраздел книги по CSS, которая выйдет весной 2002 года, но мне кажется, и в несокращенном виде материал достаточно интересен. Для начала давайте определимся с терминологией, иначе будет неясно, что от чего надо отделять. Итак, контент - это информационная часть документа, в которую входят текст, иллюстративные рисунки, таблицы, графики. Дизайн - это отображение информационной части документа на каком-либо устройстве. Например, на экране монитора это будет визуальное отображение, а в голосовом браузере, соответственно, речевое отображение. Для простоты восприятия мы будем рассматривать только визуальный дизайн, хотя все рассуждения можно без особого труда перенести на любые виды дизайна. Давайте рассмотрим, каким образом на данный момент формируются web-документы и какие явные недостатки отсюда вытекают. Допустим, у нас есть страница, которая представляет собой каталог книг. Каждая книга имеет следующие параметры:
Именно так представляется анонс книг на сайтах большинства электронных книжных магазинов. Мы не станем рассматривать структуру всего интернет-магазина, для наших целей вполне достаточно будет рассмотреть структуру одного этого блока. Типичная организация анонса выглядит так: слева располагается фотография, справа - название книги, автор, описание, а в самом низу цена. Средствами HTML это реализуется посредством таблицы с одной строкой и двумя столбцами. Допустим, согласно дизайну сайта, название нам надо написать жирным шрифтом Verdana черного цвета, автора - курсивным шрифтом Verdana черного цвета, описание - обычным шрифтом Verdana черного цвета, цену - жирным шрифтом Verdana красного цвета. Ниже следует код, который в точности соответствует такому описанию:
А вот так эта таблица будет выглядеть в браузере.
Если рассматривать код с точки зрения контента и дизайна, то сразу же становится видно, что эти категории в коде переплетаются и с первого взгляда сложно сказать, что есть информация, а что есть средство визуального представления информации. Например, фотография обложки - это файл cover_kirsanov.jpg, однако в тэге <IMG> данная информация теряется, потому что она находится в атрибуте SRC, а кроме него тэг <IMG> содержит еще несколько атрибутов. Кроме того, если в коде присутствуют элементы графического оформления страницы, то отличить элемент оформления от графического элемента контента можно только по расположению элемента IMG в коде. Если обобщить эти рассуждения, то можно сделать вывод, что при такой разметке понятие контент размывается, и отсутствует четкая структурированность информации. Давайте проанализируем, к чему это ведет. Самым очевидным следствием является трудность изменения дизайна страницы. Посмотрите на код. В нем жестко задано, что фотография находится слева, а описание книги - справа. В нем жестко задана общая ширина фотографии и описания. В нем жестко заданы параметры шрифта, такие как начертание, размер и цвет. В нем жестко задано выравнивание фотографии и текста по верхнему краю. А теперь давайте оставим всю информацию прежней, но попытаемся изменить ее представление не странице. Допустим, нам понадобилось:
В этом случае нам понадобиться переписать весь код. Он станет вот таким: В итоге в браузере мы видим совершенно аналогичную картину. И если нам потребуется слегка изменить шрифт или цвет всех заголовков, то изменения надо будет внести в только один раз в таблице стилей для элемента H1. Если нам потребуется немного изменить расположение элементов на странице, то этого можно добиться изменением позиционирования блоков в таблице стилей. Здесь надо отметить, что ни связка HTML+CSS, ни связка XML+CSS не обеспечивают полного разделения структуры документа от визуального отображения. Если нам потребуется коренным образом изменить вид странички в браузере, то все равно придется перестраивать HTML-код, изменяя вложенность блоков, добавляя новые блоки. Но это намного легче и быстрее, чем полностью переписывать все таблицы. Возможно, полное разделение обеспечит связка XML+XSL, однако пока это вопрос остается открытым. Если же говорить о каскадных таблицах стилей, то можно сказать, что они улучшают восприятие кода и существенно облегчают внесение новых элементов дизайна; в некоторой степени обеспечивают разделение структуры документа от визуального представления, но не более того. Контент и дизайн - это не те вещи, которые можно разделить на HTML и CSS. Так что не стоит особо прислушиваться к радужным высказываниям по поводу CSS. Но не стоит и приуменьшать значение каскадных таблиц стилей, потому что их использование дает следующие преимущества:
Согласитесь, не так уж мало для того, чтобы непременно взяться за изучение еще одного языка помимо HTML. По крайней мере, для профессиональной верстки каскадные таблицы стилей совершенно необходимы. Источник: http://www.web-anatomy.f2s.com/
|
||
|
||
Copyright © "Internet Zone", http://www.izcity.com/, info@izcity.com |