Книга автора бестселлера «Факс-модем: от покупки и подключения до выхода в Интернет»

Скачать 5.42 Mb.

Название	Книга автора бестселлера «Факс-модем: от покупки и подключения до выхода в Интернет»
страница	6/56
Дата публикации	25.08.2014
Размер	5.42 Mb.
Тип	Книга

100-bal.ru > Информатика > Книга

1 2 3 4 5 6 7 8 9 ... 56

CSS

Язык иерархических стилевых спецификаций (Cascading Style Sheets, CSS) был разработан в качестве дополнения

41

к HTML, призванного восполнить ограниченные возможности этого языка в области визуального форматирования, а в идеале — и полностью взять на себя определение внешнего вида документа, оставив за HTML только структурную разметку.

К сожалению, из-за сильно запоздавшей реализации в броузерах технология эта так и не стала по-настоящему общепринятой. В первой версии CSS отсутствовали многие важнейшие для дизайнера возможности, в первую очередь — свободное двумерное позиционирование объектов. Кроме того, не слишком ответственный подход разработчиков двух основных графических броузеров к поддержке CSS сказался в невероятном количестве ошибок, недоделок и несовместимостей между их реализациями. В результате визуальные дизайнеры до сих пор не могут пользоваться CSS иначе как для второстепенных, факультативных элементов оформления.

С распространением XML у CSS, возможно, откроется «второе дыхание» так как ничто не мешает пользоваться CSS-спецификациями для документов, размеченных в XML, а предназначенный специально для ХМL стилевой язык XSL (стр. 53) может оказаться слишком сложным для массового применения.

Принципы

Система CSS предоставляет в распоряжение дизайнеров набор обобщенных свойств (параметров оформления), таких как имя шрифта, цвет элемента и фона под ним, ширина любого из четырех окружающих элемент полей. Написание спецификации для HTML-документа заключается в присвоении значений нужным свойствам для тех или иных элементов (т.е. HTML-тегов), классов элементов (которые маркируются в HTML с помощью атрибута class у соответствующих тегов) и отдельных экземпляров тегов (идентифицируемых атрибутом id). Кроме того, можно варьировать свойства элементов, стоящих в том или ином контексте (например, увеличить расстояние между строками только для тех элементов Р, которые следуют сразу за элементом H1, — что было бы аналогом одной из особенностей верстки данной книги).

Слово «cascading» в названии системы CSS напоминает о том, что на вывод каждого тега в документе могут оказывать влияние сразу несколько стилевых спецификаций, образующих иерархическую систему. Например, поверх

42

спецификаций, относящихся к конкретному документу, может действовать стилевой файл, общий для всех документов на сервере. Кроме того, пользователь броузера, поддерживающего CSS, может указать свои собственные свойства для тех или иных тегов. Конфликты, которые при этом возникают, разрешаются в пользу более частных, узких спецификаций: то, что указано для конкретного документа, берет верх над спецификациями для всего сервера, а параметры вывода тега в данном контексте имеют преимущество перед параметрами для того же тега «вообще», без учета контекста. В случае же конфликта спецификаций, заданных пользователем, с установками автора страницы побеждают последние, хотя пользователь все-таки может при желании изменить это правило на обратное. Само собой, CSS-свой-ства имеют также приоритет над принятыми в том или ином броузере стандартными параметрами оформления элементов HTML.

Возможности

От версии системы CSS очень сильно зависит, чего с ее помощью можно добиться. Первая версия спецификации (CSS level 1 или попросту CSS1), ставшая официальным стандартом в конце 1996 года, по сути, лишь предлагала CSS-запись для тех параметров форматирования, которые и без того уже, будь то «законно» или «незаконно», были доступны HTML-документам в тогдашних графических броузерах. Свойства CSS1 включали в себя выбор шрифта, параметры форматирования текста, установку фонового цвета или изображения, ширину полей и еще несколько второстепенных параметров, в большинстве своем аналогичных атрибутам тех или иных тегов. Управлять положением элемента на странице можно было, лишь изменяя величину его полей и тем самым отодвигая его от границ предшествующего элемента или элемента-родителя.

<

Стандарт CSS2, законченный к январю 1998 года, существенно расширил возможности стилевых спецификаций сразу по нескольким направлениям. Прежде всего, его создатели вспомнили, что если содержимое у документа всегда одно и то же, то разнообразных представлений у него может быть сколько угодно, в том числе и в разных средах. В этой версии было введено понятие «типа среды» (media type), в зависимости от которого выбирается соответствующий набор свойств для тегов документа (пока, кроме графического, определен только один тип среды — звуковой,

43

свойства которого позволяют регулировать громкость, темп произнесения текста и тембр голоса).

Для графических дизайнеров в этой версии также есть немало интересного. Из главных нововведений отметим механизм подбора шрифтов, позволяющий не только выбирать один из установленных в системе шрифтов, но и подшивать к документу передаваемый вместе с ним по сети шрифт и даже синтезировать шрифт по его описанию (стр. 221). Очень важна также возможность абсолютного позиционирования любого элемента относительно элемента-родителя или границ окна, в том числе с наложением элементов друг на друга и даже с возможностью «оживлять» их JavaScript-сценариями (стр. 64). Наконец, в этой версии впервые появились средства генерации содержимого, без которых невозможно создать сколько-нибудь сложные системы разметки. Самым частым примером такого генерируемого содержимого является автоматическая нумерация заголовков, поддержка которой введена в CSS2.

Любые технологии форматирования текста, предназначенные для Интернета, вынуждены учитывать ограниченную пропускную способность каналов связи (стр. 177) и тот факт, что пользователям вряд ли понравится ждать загрузки документа целиком, не имея возможности начать его чтение. Все реализации HTML и CSS выводят текст на экран по мере его поступления из сети и, следовательно, не могут вернуться назад и перерисовать то, что уже выведено. Это на первый взгляд несущественное ограничение делает невозможным не только многие специальные эффекты, в которых содержимое или форматирование одной части документа зависит от другой, но и просто достаточно качественную верстку текста. К примеру, система T_EX, прежде чем сверстать абзац текста, прочитывает его до конца и пробует разные варианты разбиения его на строки, минимизируя общее количество слишком тесных или слишком растянутых строк, переносов, висячих строк и прочих отклонений от идеала. Понятно, что ничего похожего нельзя ожидать от броузера, который выводит каждую строку текста, как только получает достаточно материала для ее заполнения (если только текст не заключен в таблицу, стр. 235).

Модульный HTML

Нельзя сказать, чтобы доступная на сегодня веб-дизайнерам технология текстовой разметки — HTML с небольшой (из-за проблем совместимости) примесью CSS — была начисто лишена способности к разделению аспектов содержания и представления (стр. 21). Опыт, врожденная аккуратность и ответственное отношение к материалу, с которым приходится работать, позволяет отдельным дизайнерам практиковать в HTML стиль, вполне отвечающий требованиям идеологии SGML (или, что сейчас более актуально, XML).

44

Конечно, многим дизайнерам с преимущественно визуальным мышлением совсем не просто перестроиться на «ортогональный стиль» разметки. Так же как нельзя увидеть бестелесную душу, вам, возможно, трудно вообразить себе, как будет выглядеть документ, размеченный только логически, равно как и представить себе идеальную ортогональность — независимость такого «дистиллированного» содержимого от хранящегося отдельно оформления. Если даже примитивные «именованные стили» в текстовых процессорах считаются прерогативой «профессиональных пользователей», что уж говорить о более последовательных системах ортогональной разметки. Я думаю, что если бы умение воспринимать и создавать аспекты информации по отдельности было врожденным и не требовало обучения, язык SGML уже давно стал бы основным средством хранения и распространения текстов.

Режем по живому

Даже если не учитывать несовершенство HTML, в котором логический и визуальный аспекты оказались смешанными по причинам скорее историческим, соблюдение ортогональности — как и любая реализация некоей абстрактной идеи на практике — сталкивается и с вполне объективными трудностями. Бывают случаи, в которых разделительная линия между содержанием и оформлением может быть проведена по-разному; более того, иногда неудачное рассечение на аспекты документа, изначально (в сознании его автора) целостного, приводит к частичной потере информации и к невозможности в дальнейшем удовлетворительно состыковать получившиеся половинки.

Приведу пару примеров. В двумерных композициях с текстом и изображениями часть информации о связях между элементами может передаваться не последовательностью их расположения или какими-нибудь видимыми стрелками или рамками, а менее очевидными визуальными средствами — выравниванием, цветовыми перекличками, контрастом. Если композиция эта создавалась изначально в графической среде, ее автор, возможно, просто не осознает некоторые из этих связей и, соответственно, не сможет «вербализовать» их при выделении структурной основы композиции. С другой стороны, некоторые фрагменты текста относятся не к содержательной основе, а к оформительской надстройке документа: например, номер главы и само слово «Глава» в заголовке, постоянная часть перекрестных ссылок (т.е. сокращения типа «стр.» или «гл.»), любые повторяющиеся элементы, такие как колонтитулы на странице книги или панель навигации на веб-странице. Вынеся все это из текстовой основы документа в стилевые спецификации, вы не только упростите процедуру глобального изменения этих элементов во всем документе, но и приблизитесь к искомому идеалу ортогональности: ведь все, что при внимательном рассмотрении не принадлежит к уникальной информации документа, а лишь помогает воспринимать ее, правильнее отнести к аспекту представления, а не содержания.

Сборно-панельный сайт

Однако вернемся к HTML. Поскольку в случае этого языка одна и та же технология ответственна за оба аспекта разметки, необходимо придерживаться определенных правил, которые позволят

45

если не разделить содержание и оформление, то по крайней мере сделать их хоть сколько-нибудь независимыми друг от друга.

На любом сайте, превышающем по размеру страницу и содержащем хотя бы одну серию повторяющихся или однотипных элементов, форматирующие коды HTML удобно собирать в унифицированные модули, или блоки, играющие роль своеобразных «тегов логической разметки», параметры оформления которых хранятся в них же самих. Внутреннее устройство таких блоков может быть в принципе любым — в частности, в них можно как угодно смешивать логические и визуальные теги HTML. Однако, чтобы построенный таким образом логический план разметки действительно облегчал создание и поддержку сайта, нужно придерживаться нескольких несложных правил:

• Экземпляры одного блока должны быть абсолютно идентичны, за исключением вставок изменяемого содержимого (например, текста заголовка в блоке заголовка).

• Общее количество разновидностей блоков должно быть минимальным, и после того как дизайн сайта устоялся, новые блоки могут вводиться в виде исключения — только когда на сайте появляется принципиально новое содержимое, не лезущее в старые «болванки».

• За пределами блоков не должно оставаться никаких «висячих» тегов, за исключением самых необходимых средств оформления текста (тег Р и логические теги типа ЕМ и STRONG).

• Каждый блок должен быть помечен в HTML-коде стандартным комментарием, который позволит легко опознать этот блок как при ручном редактировании, так и при автоматическом поиске.

Работа с таким модульным сайтом происходит в одном из двух режимов, соответствующих двум ортогональным аспектам его разметки. В «режиме содержания» можно как угодно редактировать существующий текст или добавлять новый, копируя при необходимости нужные блоки, но ни в коем случае не залезая внутрь этих блоков. Эта повседневная работа по обновлению и расширению сайта не требует никакой дизайнерской квалификации, и создатель сайта вполне может перепоручить ее обслуживающему персоналу сайта.

46

Рис. 1

«Модульная» страница на сайте www.oi.com

Наоборот, редактирование «плана представления» после того, как сайт создан и запущен, в идеале должно быть событием исключительным, осуществляющимся только под контролем дизайнера. (Например, если вдруг выяснилось, что какой-то заголовок ведет себя неправильно, когда его текст превышает по длине некую заранее планировавшуюся величину, может понадобиться изменить устройство заголовочного блока.) Это можно делать только глобальным поиском и заменой во всех файлах сайта — ведь если вы поправите вручную одну из копий блока, ее уже не найдет следующий автоматический поиск, и рассинхронизация поползет по сайту, как раковая опухоль. Программа, которой вы пользуетесь для редактирования HTML-кода, должна уметь искать и заменять многострочные блоки текста и пользоваться регулярными выражениями (regular expressions) в тех случаях, когда блок содержит вставки, изменяющиеся от одной копии блока к другой. Обе эти возможности поддерживает, например, редактор HomeSite (www.aliaire.com ).

Например

Описанные выше принципы были взяты за основу в дизайне сайта www.oi.com (рис. 1). Этот корпоративный сайт по объему и частоте обновления своего материала близок к контент-сайтам (стр. 182), и возможность свободно редактировать содержимое, оставляя нетронутым дизайн, для него особенно важна. Вот, к примеру, как выглядит блок, создающий стандартный внутритекстовый заголовок:


	THE COAD METHOD

В начале блока ставится комментарий-идентификатор, а в предпоследней его строке мы видим единственный фрагмент, изменяющийся от одного заголовка к другому, — его текст (в данном случае «THE COAD METHOD»). Между собой блоки удобно разделять пустыми строками. Вся страница, показанная на рис. 1, состоит из следующих блоков (приведены только строки с комментариями):

Peter Coad is perhaps ... Reach him at pc@oi.com.

The Coad Method focuses on ... frequent, tangible, working results.

Модульный HTML — не только имитация имеющегося в других языках программирования структурного подхода и не только единственная реальная возможность приспособить этот язык к созданию объемных и часто обновляемых сайтов. Это еще и необходимый промежуточный этап будущей миграции к языку XML (о котором мы будем говорить чуть ниже): тем же самым глобальным поиском вы в любой момент можете заменить «псевдотеги» структурных блоков HTML на настоящие структурные теги XML, разработав для них соответствующие стилевые спецификации. Такая конверсия гораздо полнее отвечает целям и духу XML, чем приходящий в голову первым буквальный, «тег в тег» перевод HTML в формально корректный, но совершенно бессмысленный XML (стр. 51), — ведь большинству визуально-ориентированных тегов HTML в структурном языке XML нет и не может быть никаких соответствий.