Применение стилей
После того как вы зададите атрибуты стиля, нажмите кнопку ОК диалогового окна CSS Style Definition . Вы также можете нажать кнопку Apply , чтобы сохранить стилевые установки без закрытия этого диалогового окна. Чтобы отказаться от создания нового стиля, нажмите кнопку Cancel (хотя таблица стилей при этом всетаки будет создана).
После того как стиль сохранен в таблице (внешней или внутренней — неважно), его нужно применить к выделенному фрагменту текста или целому абзацу. Конечно, если это стиль переопределения тега, его не надо никак применять — Web -обозреватель использует заданные в нем установки при обработке соответствующего тега. Другое дело стилевой класс — нам нужно будет самим указать, что данный текст форматируется с его использованием.
Предположим, что вы задали для тега < P > шрифт Verdana размером 9 пунктов. Теперь задайте для тега < body > светло-желтый цвет фона, но сохраните эту установку не во внешней таблице стиля, а в самой Web -странице 10.2.htm . Для этого в диалоговом окне New CSS Style включите переключатель This Document Only . Это пригодится нам в дальнейшем, когда мы будем изучать работу со стилями.
Создайте еще два стиля для наших экспериментов. Первый из них будет называться centered , а второй — red . (Как вы уже догадались, это стилевые классы, и поэтому для их создания нужно выбрать переключатель Make Custom Style ( class ) и ввести их имена в меню Name .) Для первого стиля задайте выравнивание текста посередине, а для второго — красный цвет текста. Сохраните их также во внешней таблице стилей 10.2.css .
Как видите, в списке CSS -стилей отображаются три пункта: No CSS Style , centered и red . Первый пункт обозначает отсутствие любого стиля, т. е. элемент страницы будет форматироваться по умолчанию. Два других задают созданные нами стилевые классы. Заметьте, что стили, переопределяющие теги, здесь не отображаются, и это правильно.
Имейте в виду также следующее. Если вы задали стиль вида, скажем, h1. right (гибрид стилевого класса и переопределения тега), Dreamweaver отобразит его как right в списке стилей. При этом он позволит вам присвоить его любому элементу страницы, что будет неправильно, т. к. этот стиль будет работать только в теге < h1>. Очень досадно, но если вы используете в своих страницах подобные гибридные стили, вам придется самим помнить о них и выполнять только корректные присвоения.
Так как же применить стилевой класс к элементу страницы? Если у вас открыта панель CSS Styles , вам достаточно только выбрать нужный стиль в списке. Естественно, перед этим вы будете должны выделить в окне документа элемент страницы, к которому хотите применить стилевой класс.
Давайте поставим текстовый курсор на заголовок нашей страницы и щелкнем по стилевому классу centered . После этого выделим слова " Web -страничка" и щелкнем по стилевому классу red .Теперь поставьте текстовый курсор куданибудь на текст заголовка и взгляните на окно CSS -стилей. Dreamweaver подсветит в списке стилевой класс centered . To же самое произойдет с классом red , если вы поместите текстовый курсор на выделенную красным надпись. Таким образом, вы всегда будете знать, с помощью какого стилевого класса отформатирован тот или иной элемент страницы.
Но что делать, если панель CSS Styles у вас закрыта? Специально для такого случая в меню Text и контекстном меню предусмотрено подменю CSS Styles . В верхней части этого подменю перечислены все созданные вами к этому моменту стилевые классы. Выбранный класс будет выделен галочкой. Само собой, также присутствует пункт None , позволяющий убрать форматирование с использованием стилевого класса.
Вообще, Dreamweaver (как и многие популярные Windows -приложения, например,Microsoft Word ) ценен тем, что почти любое действие в нем можно выполнить несколькими различными способами. Вам остается только выбрать тот способ, который придется вам больше по душе.
Управление стилями
Осталось рассмотреть, как в Dreamweaver осуществляется управление стилями, в частности, изменение и удаление (как создавать новые стили, вы уже знаете).
В верхней части панели CSS Styles вы уже заметили два переключателя: Apply Styles и Edit Styles . Мы не рассматривали их, т. к. они пока что нам были не нужны. Но сейчас они пригодятся.
Как видите, по умолчанию включен переключатель Apply Styles . Говорят, что панель CSS Styles работает в режиме применения стилей. При этом вы можете щелкнуть по любому пункту этого списка, и Dreamweaver тотчас применит соответствующий стиль к выделенному вами элементу страницы. Но, к сожалению, править стили при этом неудобно: вы не можете выбрать стиль без того, чтобы он не был применен. Что же делать?
Включите переключатель Edit Styles . Она переключится в режим правки стилей, в котором очень удобно именно управлять стилями, не опасаясь, что услужливый Dreamweaver применит выбранный стиль к выделенному вами элементу страницы.
Как видите, список стилей в этом режиме имеет несколько другой вид — он стал иерархическим. В качестве ветвей списка выступают таблицы стилей и Web -страницы, в которых сохранен тот или иной стиль. Более того, в этом случае Dreamweaver правильно показывает ВСЕ заданные вами стили, даже переопределения тегов! Это же просто замечательно: теперь нам видно все, что мы нагородили! Но Dreamweaver идет дальше: он показывает даже сам код определения стилей — в правой колонке списка. (Правда, если этот код достаточно велик, вам придется прокручивать список по горизонтали, но это не вина Dreamweaver .)
Чтобы изменить необходимый стиль, выделите его и выберите пункт Edit контекстного или дополнительного меню. Также вы можете дважды щелкнуть по нужному пункту списка стилей. После этого на экране появится диалоговое окно CSS Style Definition , в котором вы сможете выполнить требуемые изменения. После нажатия кнопки ОК все сделанные изменения сохранятся и будут тотчас применены.
Удалить стиль вы можете, воспользовавшись пунктом Delete контекстного или дополнительного меню. Но проще и нагляднее нажать кнопку Delete Style в правом нижнем углу панели CSS Styles . Естественно, перед этим вы должны будете выбрать нужный стиль в списке.
Стиль удаляется сразу же, без всякого предупреждения. Форматирование
всех элементов страницы, к которым был применен удаленный стиль, приводится к виду по умолчанию. Однако атрибуты class и их значения в тегах этих элементов все же сохраняются, и если вы в дальнейшем создадите стилевой класс с таким же названием, он будет тотчас к ним применен.
Также Dreamweaver предоставляет вам возможность создать копию выбранного стиля. Это может быть полезно, если вы хотите создать новый стиль, слегка переделав уже существующий. Для этого выберите нужный стиль и воспользуйтесь пунктом Duplicate контекстного или дополнительного меню.
На экране появится уже надоевшее вам диалоговое окно CSS Style Definition . Ну а с нимто вы знаете, что делать.
