Что касается "раздувшегося" HTML-кода... Вы помните, что Dreamweaver MX поддерживает экспорт сайтов с удалением всей специальной разметки? Так что вы можете создать свой сайт на основе шаблонов, а опубликовать на Web-сервере его "очищенную" копию, не содержащую вставленный Dreamweaver HTML-код. Даже пуритане HTML должны быть этим довольны, тем более что шаблоны действительно здорово облегчают работу.
Одним словом, шаблоны — это замечательно!
Что дальше?
На этом рассказ о шаблонах заканчивается. Автору нужно еще написать хвалебную оду, посвященную Dreamweaver MX вообще и шаблонам в частности.
Итак, процесс создания Web-страниц и внесения в них изменений мы рассмотрели. А что дальше?
Представим такую ситуацию. Вы разместили на своих Web-страницах массу цитат (использовав парный тег <CITE>), выделили их красным цветом и отформатировали курсивом. После этого мы сохранили все страницы и опубликовали сайт на Web-сервере. И тут нам (или начальству) пришло в голову, что цитаты просто жизненно необходимо выделить еще и уменьшенным шрифтом. Как нам быть? Просматривать все страницы на предмет цитат и вручную изменять размер шрифта?
Можно ли автоматизировать и этот процесс? Нет ли в составе Dreamweaver шаблонов не для целых страниц, а для отдельных фрагментов текста? Чтобы изменить шрифт одной цитаты, a Dreamweaver переформатировал бы остальные.
Есть! И это не возможности Dreamweaver, а стандарт, принятый комитетом WWWC и поддерживаемый практически всеми современными Web-обозревателями. Это каскадные таблицы стилей CSS (Cascading Style Sheets), описанные в следующей главе.
· Глава 10. Каскадные таблицы стилей
o Введение в каскадные таблицы стилей
o Зачем они нужны
o Три способа задания стиля
o Почему "каскадные"
o Псевдостили гиперссылок
o Работа с таблицами стилей в Dreamweaver
o Создание стилей
o Определение стиля
o Параметры шрифта
o Параметры фона
o Параметры абзаца
o Параметры размеров и размещения
o Параметры рамки
o Параметры маркеров списка
o Параметры местонахождения
o Дополнительные параметры
o Применение стилей
o Управление стилями
o Управление таблицами стилей
o Поддержка внутренних стилей
o Таблицы стилей и шаблоны
o Временные таблицы стилей
o Недостатки таблиц стилей и их преодоление
o Что дальше?
ГЛАВА 10.
Каскадные таблицы стилей
Каскадные таблицы стилей CSS — это довольно позднее нововведение. Если сам HTML появился в 1989 году, то таблицы стилей — только в 1997. Мало того, таблицы стилей не считаются частью HTML, а "гуляют сами по себе", как кошка Киплинга. И если вы зайдете на сайт WWWC (http:// www.w3c.org), то увидите, что на описание HTML ведет одна гиперссылка, а на описание CSS — другая.
Связано это с тем, что WWW была создана учеными как средство для обмена текстовыми документами, a HTML был языком, с помощью которого создавали эти документы. Для ученых главным было содержимое документа, а не его оформление. Поэтому первые версии HTML не включали даже средств для размещения на Web-страницах графических изображений, не то что для сложного форматирования текста. Но время шло, и в Интернет пришел обыватель, тотчас потребовавший от Web-дизайнеров "сделать ему красиво". А Web-дизайнеры, в свою очередь, потребовали от разработчиков стандарта HTML средств, облегчающих им работу.
Так и возникли каскадные таблицы стилей. В настоящее время приняты спецификации CSS1 и CSS2, идет работа над CSS3. Однако современные Web-обозреватели, да и то самые последние их версии, полностью поддерживают только CSS1 и, частично, CSS2.
Но даже стандарт CSS1 таблиц стилей предлагает такое, что вы ахнете. Куда там HTML с его примитивным форматированием!
Введение в каскадные таблицы стилей
Что же представляют собой каскадные таблицы стилей? Как они могут помочь нам? Как они создаются, в конце концов? И нужно ли их использовать?
Зачем они нужны
В конце предыдущей главы был приведен пример, когда таблицы стилей могут нам здорово помочь. Вспомним его еще раз.
Вы создали сложный Web-сайт с большим количеством объемистых страниц. Текст этих страниц очень сложно отформатирован: обильно используются различные шрифты разных цветов и размеров, жирное и курсивное выделения и т. п. В частности, все цитаты выделены красным курсивным шрифтом. Сайт создан, опубликован и достаточно давно работает; посетители довольны, никаких неполадок нет, все ошибки давно исправлены, и вы о своем сайте уже, честно говоря, забыли.
Вдруг, откуда ни возьмись, — распоряжение начальства: срочно выделить цитаты на сайте еще и уменьшенным шрифтом. (Этому начальству всегда нечего делать, как давать идиотские указания...) А цитат у вас хватает на всех страницах, вдобавок они разбросаны по всему тексту так, что их нужно еще и поискать. Вспомним также, что сайт очень большой, и страницы его также велики.
Ваши действия?
Чтобы уменьшить шрифт цитаты, его необходимо выделить и выбрать в раскрывающемся списке размеров нужный пункт. Сами понимаете, это крайне трудоемко. Можно также попытаться воспользоваться мощнейшими возможностями, предлагаемыми диалоговым окном Find and Replace. Но. чтобы это сделать, надо правильно ввести подстроки для поиска и замены, для чего нужно долго экспериментировать. Наконец можно воспользоваться регулярными выражениями, но это вообще занятие не для слабонервных. Выходит, так и придется форматировать цитаты вручную?
Почему мы вынуждены так поступать? Чтобы объяснить это, надо немного рассказать о принципах написания и хранения программ и используемых ими данных.
Возьмем любую программу, например Microsoft Word. Данные этой программы (документ) находятся в одном файле (с расширением doc), а сама программа — в другом (исполняемый файл ехе). Если нужно изменить программу (скажем, вы получили новую версию), вы просто переписываете файл программы, не трогая данные. Если вам надо изменить данные, то вы просто откроете их в программе и измените, а сама программа останется неизмененной.
В этом случае говорят, что данные и их представление (т. е. описание правил отображения этих данных или программа, отображающая эти данные) хранятся отдельно. Преимущество такого подхода в том, что мы можем заменить представление, не трогая сами данные, или отредактировать данные, не трогая представления. Все современные программные продукты строятся на таком принципе; благодаря этому мы можем установить на свой компьютер новую версию программы, сохранив созданные в ней данные.
Это обычные программы. А что же HTML?
Беда HTML в том, что данные и их представление хранятся в одном файле. Более того, они представляют собой единое целое. Откройте любой HTML-файл в текстовом редакторе (например, Блокноте) и посмотрите на него. Текст перемешан с тегами форматирования самым причудливым образом. Найти какую-то нужную информацию в "сыром" HTML-коде — проблема. И еще большая проблема — изменить способ ее представления: для этого надо "перелопачивать" весь файл с риском повредить сами данные. Это очень неудобно, но что ж поделаешь — таков уж этот HTML...
И все же было бы очень неплохо создать некий набор правил форматирования различных фрагментов текста в зависимости от их назначения. Этот набор правил хранился бы в отдельном файле, независимо от содержимого Web-страницы. А в HTML-файл записать только сам текст, разбитый на логические фрагменты тегами <р> и <нп>. Таким образом, и данные хранятся отдельно от представления, и форматированы они гораздо "прозрачнее", и нужную информацию искать значительно проще.
У такого подхода есть еще одно преимущество: становится намного легче изменять представление страниц. Скажем, если нам нужно изменить форматирование какого-либо типа фрагментов текста, мы просто корректируем соответствующие ему правила в файле правил. После этого Web-обозрезатель при следующей загрузке этой страницы покажет все так, как нам надо. Таким образом, мы можем наконец-то изменить вид наших многострадальных цитат редактированием всего одного файла вместо того, чтобы править все страницы.
Хорошо? А как вам понравится, если окажется, что все это существует уже достаточно давно, с 1997 года? Да-да, существует и называется каскадными таблицами стилей.
Каскадные таблицы стилей или просто таблицы стилей (CSS — Cascading Style Sheets) — это набор правил, описывающих форматирование разных фрагментов HTML-кода и хранящихся отдельно от него. Одно такое правило, отображающее форматирование какого-то одного фрагмента или однотипной группы фрагментов кода, называется стилем. Таблицы стилей описываются на особом языке CSS и хранятся в особых файлах с расширением сss, хотя могут быть внедрены в саму Web-страницу.
Таблицы стилей, как и многое другое, лучше представить на примере. Давайте рассмотрим небольшой фрагмент классического, "чистого" HTML-кода, созданного без использования таблиц стилей.
<?><FONT COLOR="#FF0000"><I>Этоцитата.</I></FONT></P>
Как видите, это одна из тех цитат, которые по приказу нашего гипотетического начальства должны были "измельчать". Давайте же все-таки доставим начальству это удовольствие.
<P><FONT COLOR="#FF0000" size="-1"><I>Это цитата.</I></FONT></P>
С одной цитатой мы справились без труда. А если их сотня? Нет, без таблицы стилей тут не обойтись. Перепишем наш пример с использованием стилей.
Сначала напишем саму таблицу стилей.
.cit { font-style: italic; color: #FF0000 }
Эта таблица стилей содержит определение всего одного стиля — cit. Такой стиль, имеющий уникальное имя (чтобы Web-обозреватель мог однозначно его идентифицировать), называется стилевым классом.
Этот стиль содержит определение параметров для двух атрибутов стиля. Первый атрибут — font-style — задает "стиль" текста; в нашем случае значение italic делает текст курсивом, словно бы его поместили внутрь тега <i>. Второй атрибут — color — задает цвет текста. Как видите, два атрибута стиля cit заменили оба тега: и <FONT>, и <i>.