Управление таблицами стилей
Кроме манипуляций над отдельными стилями, Dreamweaver предоставляй возможность управлять целыми таблицами стилей. Вы можете редактировать их, создавать и удалять, а также присоединять к документу внешн таблицы и экспортировать внутренние таблицы во внешний файл.Как правило, нужда редактировать саму таблицу стилей возникает нечасто. Dreamweaver предоставляет достаточно мощные средства правки стилей отдельности, вне зависимости от того, где они сохранены. Но если все же вам понадобится отредактировать таблицу стилей, выполните одно из ни жеперечисленных действий:
нажмите кнопку Edit Style Sheet в правом нижнем углу пане ли CSS Styles ;
дважды щелкните по свободному пространству списка стилей (он долже находиться в режиме правки стилей, т. е. должен быть включен переключатель Apply Styles );
выберите пункт Edit Style Sheet в контекстном или дополнительном меню панели CSS Styles ;
выберите пункт Edit Style Sheet в подменю CSS Styles контекстной меню окна документа или меню Text .
После этого на экране появится диалоговое окно Edit Style Sheet .
Большую часть этого диалогового окна занимает список стилей, определен ных во внутренней таблице (если таковая есть), и внешних таблиц стиле привязанных к этой странице. Вы видите, что этот список в нашем слу содержит два пункта. Нижний пункт обозначает стиль, переопределяющий тег < body >. (Помните, мы задали для тела документа светло-желтый цвет?) Верхний же пункт обозначает внешнюю таблицу стилей 10.2.css , привязанную к нашей странице. Заметьте, что этот пункт помечен специальным значком.
Под списком находится небольшое текстовое поле, где выводится код опрй деления выбранного в списке стиля. Так что вы сразу можете видеть, что за стиль попал вам под руку... т. е. под мышку.
Левее списка находятся пять кнопок. Перечислим их по порядку.
Кнопка Link позволяет привязать к странице внешнюю таблицу стилей. Если вы на нее нажмете, на экране появится диалоговое окно Link External Style Sheet . В поле ввода File / URL введите имя файла внешней таблицы стилей, которую вы хотите привязать к своей странице. Если вы не хотите вводить ее вручную, щелкните кнопку Browse и выберите нужный файл в диалоговом окне Select File . После этого нажмите кнопку ОК для привязки таблицы стилей или Cancel — для отказа от этого.
В диалоговом окне Link External Style Sheet имеется также группа переключателей Add As . Переключатель Link (включен по умолчанию) выполняет обычную привязку таблицы стилей с помощью тега < link >; это, собственно, делается почти всегда. А переключатель Import позволяет вам импортировать внешнюю таблицу стилей, т. е. перенести все содержимое внешней таблицы стилей во внутреннюю. Однако такой возможностью пользоваться не рекомендуется, поскольку команда CSS Simport , с помощью которой выполняется импортирование, поддерживается далеко не всеми программами Web -обозревателей. А, кроме того, при импортировании возможен неразрешимый конфликт стилей, когда во внутренней и внешней таблицах оказывается два стиля с одинаковым именем. (При импортировании механизм "каскадности" не работает.)
Однако вернемся к диалоговому окну Edit Style Sheet .
Кнопка New позволит вам создать новый стиль. После ее нажатия на экране появится уже диалоговое окно CSS Style Definition . В нем вы сможете создать новый стиль, а, возможно, и новую внешнюю таблицу стилей.
Кнопка Edit позволит вам отредактировать существующий стиль. Не будем рассказывать, как это делается, — вы уже это знаете. Чтобы вызвать нужный стиль для редактирования, также можно дважды щелкнуть по нужному пункту списка.
Кнопка Duplicate позволит вам создать стиль, являющийся точной копией уже существующего стиля, выбранного в списке. Это полезно, если вы хотите создать новый стиль, взяв за основу уже существующий и слегка его подредактировав.
Кнопка Remove удаляет выбранный стиль.
И, наконец, кнопка Done закрывает диалоговое окно Edit Style Sheet . Вы
также можете нажать кнопку закрытия окна, находящуюся в его заголовке.
Ну, вот и все. С кнопками мы разобрались. Но остается вопрос: как всетаки добраться до внешней таблицы стилей? Как ее отредактировать? Как, в конце концов, удалить ссылку на нее?
Очень просто.
Чтобы отредактировать внешнюю таблицу стилей, выберите в списке стилей соответствующий ей пункт и нажмите кнопку Edit или просто дважды щелкните по этому пункту. На экране появится еще одно диалоговое окно Edit Style Sheet , но в нем будет отображаться содержимое внешней таблицы стилей. В этом-то окне вы и сможете отредактировать ее содержимое.
Чтобы удалить ссылку на внешнюю таблицу стилей, воспользуйтесь все той же кнопкой Remove .
Выше мы рассматривали, как можно привязать к Web -странице еще одну таблицу стилей. Это можно было сделать в диалоговом окне Edit Style Sheet . Однако это совсем не обязательно — то же самое вы можете выполнить, I нажав кнопку Attach Style Sheet в правом нижнем углу панели CSS Styles либо выбрав пункт Attach Style Sheet , расположенный в контекстном и дополнительном меню этой же панели. Также этот пункт находится в подменю CSS Styles меню Text и контекстном меню окна документа. При выборе этого пункта на экране появится диалоговое окно Select File , где вы сможете выбрать нужный файл. После нажатия кнопки Select выбранная таблица стилей будет тотчас привязана к странице.Если вы считаете, что сделали удачную внутреннюю таблицу стилей, и хотите сохранить ее в отдельном файле как внешнюю (экспортировать таблицу стилей), то Dreamweaver поможет вам и в этом случае. Для этого выберите пункт Export Style Sheet , расположенный в контекстном и дополнительном меню панели CSS Styles . Также этот пункт располагается в подменю CSS Styles , находящемся в меню Text и контекстном меню окна документа. После выбора этого пункта на экране появится стандартное диалоговое окно сохранения файла Windows . Введите имя файла и нажмите кнопку сохранения.
Поддержка внутренних стилей
Вот мы и выяснили все о том, как Dreamweaver поддерживает внутренние и внешние таблицы стилей. А что же внутренние стили? А с внутренними стилями ситуация сложнее.
Дело в том, что Dreamweaver поддерживает внутренние стили не полностью. Он отображает на экране результаты их применения, но не предлагает никаких удобных инструментов для создания внутренних стилей и управления ими. По мнению автора, это самый большой и досадный его недостаток. Так что, если вы хотите привязать к какому-либо элементу страницы внутренний стиль, то вам придется править HTML -код вручную либо пользоваться диалоговым окном Tag Editor .
Как это сделать?
Давайте рассмотрим работу с внутренними стилями на примере. Откроем все ту же нашу многострадальную страницу 10.2.htm , раскрасим текст заголовка в зеленый цвет, а текст, выделенный курсивом, увеличим в размерах на одну ступень. И сделаем мы это разными способами.
Сначала займемся курсивным текстом. Выделите его, щелкнув по нужной кнопке секции тегов, и выберите в контекстном меню пункт Edit Tag < название тега>. После этого выберите в списке, расположенном в левой части диалогового окна Tag Editor , пункт Style Sheet / Accessibility .
Собственно определение тега вводится в поле ввода Style . Введите в него текст font - size : larger . И нажмите кнопку ОК. После этого шрифт курсивного текста увеличится в размерах — наш внутренний стиль работает!
Теперь примемся за заголовок. И используем мини-редактор HTML , описанный еще в главе 2 этой книги. Конечно, можно работать в режиме отображения кода окна документа. Но мини-редактор HTML несколько удобнее, т. к. вы можете видеть одновременно и саму страницу, и нужный фрагмент кода.
Поместите текстовый курсор в текст заголовка и выберите в контекстном: меню пункт
Edit Tag <H1>...
Вставьте в тег < h1> атрибут style и присвойте ему значение color : #00ff00;.
Теперь закройте мини-редактор, нажав клавишу < Enter >. (Нажатие клавиши < Esc > позволит вам отменить сделанные изменения.) И посмотрите на заголовок. Он позеленел, но не от злости, а от того, что мы применили к нему встроенный стиль.
Так что вы можете создавать в Dreamweaver и встроенные стили. Однако имейте в виду, что в этом случае вам придется полагаться только на свое знание HTML и CSS — Dreamweaver почти не автоматизирует ваш труд. А узнать побольше о HTML и CSS вам помогут интерактивные руководства, поставляемые вместе с этой замечательной программой.
