Познавательное чтиво

Основным инструментом для работы со стилями HTML в Dreamweaver является панель HTML Styles (рис. 5.21). В ней находится список определенных на данный момент стилей (в данном разделе под стилями подразумеваются только HTML-стили, если не будет сказано особо). Стили бывают двух типов: абзацные и символьные. Тип списка можно легко определить по символу, который стоит перед его именем: у абзацных стилей это "Ц", а у символьных — "а". Чем еще отличаются эти стили? Абзацный задает форматирование сразу для целого абзаца текста, а символьный позволяет делать это только для выделенного текста.

Рис. 5.21. Палитра HTML Styles предназначена для работы со стилями HTML

В начале работы список стилей пуст, если не считать пару нулевых стилей. Нулевые стили используются для сброса любого форматирования, заданного с помощью тегов HTML. По аналогии, для очистки форматирования целого абзаца используется нулевой стиль Clear Paragraph Style, а только для выделенного текста — Clear Selection Style.

Новый стиль можно создать с нуля или на основе выделенного текста. Если у вас уже есть хотя бы пара предложений, оформленных подходящим образом, вы можете выделить их, перед тем как применить команду меню Text | HTML Styles | New Style. Или щелкнуть на кнопке с плюсом в нижнем правом углу палитры стилей. Неважно — в любом случае откроется диалоговое окно Define HTML Style, где можно задать свойства нового стиля (рис. 5.22):

□ Name — имя стиля;

□ Apply to — применить для… Если установить переключатель Selection, то стиль можно будет применить к отдельным символам. Если Paragraph — то к целым абзацам. В чем отличие? В том, что во втором случае, стиль

будет применен ко всему абзацу, даже если предварительно была выделена только его часть;

Рис. 5.22. Определение свойств нового HTML-стиля

□ When Applying — возможность наложения стиля на уже имеющееся форматирование. Если установить переключатель Add to Existing Style (+), то при использовании стиля у текста изменятся только те параметры, которые были заданы в стиле. К примеру, если в стиле задается только цвет, то выравнивание, шрифт, начертание текста останутся без изменений. А вот если установить переключатель Clear Existing Style, то все атрибуты оформления текста будут сброшены, т. е. примут значения по умолчанию;

□ Font — задает набор шрифтов;

□ Size — размер текста;

□ Color — цвет;

□ Style — начертание полужирное или курсивное. С помощью кнопки Other вызывается меню, где можно задать дополнительные параметры форматирования;

□ Format — выбор варианта НТМ L-заголовка или предварительно отформатированного текста;

□ Alignment — выравнивание текста.

Кроме привычных кнопок OK, Cancel и Help, в диалоговом окне имеется кнопка Clear, цель которой — сбросить все установленные атрибуты оформления в исходное состояние.

Чтобы использовать готовый символьный стиль, выделите нужный фрагмент текста и щелкните по имени стиля на панели HTML Styles. Для использования абзацного стиля можно не выделять, а просто поставить курсор на нужный абзац. Стиль можно также выбрать с помощью команды меню Text | HTML Styles | Name, где Name — это имя стиля.

Примечание

Если при щелчке по имени стиля на панели HTML Styles с текстом не произошло никаких изменений, то проверьте, установлен ли флажок перед кнопкой Apply, которая находится в нижнем левом углу панели. Если отметки нет, то нажмите кнопку Apply. А впредь, чтобы щелчок по имени стиля вызывал его немедленное применение, все-таки установите флажок.

Стили HTML определяются только для одного сайта — того, к которому относится текущая Web-страница. Если вы создали Web-страницу, но специально не задавали для нее сайт, то Dreamweaver будет считать, что она относится к сайту, с которым мы работали в прошлый раз. Я ведь предупреждал, что определение сайта — очень нужная процедура! Ну, ничего страшного. Стили можно переносить из сайта в сайт и даже с компьютера на компьютер. Зайдите в папку, определенную как корневую для текущего сайта, и посмотрите в ней папку LIBRARY. Это служебная папка, созданная Dreamweaver. Найдите в этой папке файл с именем styles.xml (рис. 5.23). Это и будут HTML-стили, определенные для данного сайта. Скопируйте ее в папку LIBRARY, расположенную в корневой папке нужного вам сайта. Откройте любой файл из этого сайта и убедитесь, что стили скопированы.

Совет

"Продвинутые" пользователи могут редактировать файлы styles.xml, чтобы изменить или скопировать отдельные стили из списка.

Чтобы сбросить форматирование текста, заданное с помощью стилей, примените к нему один из нулевых стилей. А чтобы удалить стиль вообще из списка, выделите его на панели HTML Styles и щелкните на значке с изображением корзины в нижнем правом углу панели. Для редактирования существующего стиля достаточно дважды щелкнуть по его имени в списке, чтобы открыть окно с его свойствами.

Рис. 5.23. HTML-стили для всего сайта хранятся в файле styles.xml в папке LIBRARY внутри локального сайта (показано с помощью панели Site в Dreamweaver)

Совет

Если надо изменить стиль, но нежелательно, чтобы щелчок по нему в панели вызывал его применение, выполните щелчок по его имени правой кнопкой мыши. В этом случае открывается контекстное меню, в котором можно выбрать команды: Edit — для редактирования, Delete — для удаления, Duplicate — для копирования стиля под другим именем, Apply— для собственно применения стиля, New — для создания нового стиля.

Помните, что удаление, равно как и редактирование стилей HTML, в Dreamweaver не приводит к изменению свойств текста, отформатированного с их помощью. Что бы там ни говорили, а стили CSS в этом отношении куда как удобнее. А вот, кстати, и они собственной персоной!