Создание нового стиля
По умолчанию, для любого нового документа список стилей в панели CSS Styles пуст, если не считать команды (none), использование которой приводит к отмене форматирования текста с помощью стилей CSS.
Для того чтобы запустить процесс создания нового CSS-стиля в Dreamweaver, можно применить один из следующих приемов:
□ щелкните по кнопке со значком плюса в нижнем правом углу панели CSS Styles;
□ для текста — в панели Properties переключитесь на работу со стилями и выберите из списка стилей команду New CSS Style;
□ используйте команду меню Text | CSS Styles | New CSS Style.
После любого из перечисленных действий появляется диалоговое окно New CSS Style (рис. 5.26), в котором можно определить некоторые свойства будущего стиля с помощью следующих параметров:
□ Туре — тип стиля, который может быть одним из трех: произвольный стиль (вариант Make Custom Style (class)); переопределение тега (Redefine HTML tag) и на основе так называемого псевдокласса CSS (Use CSS Selector). Вкратце расскажу, что это значит. Произвольный стиль — это обычный стиль, который мы можем использовать, а можем и не трогать. Вот если стиль переопределяет тег, то он применяется автоматически ко всем элементам страницы, заключенным в выбранный тег. К примеру, мы можем задать свойства по умолчанию для всего текста на странице, если переопределим тег <body>. А можем задать свойства только для HTML-заголовков, переопределив теги типа <hi>, <h2> и т. д. При любой попытке использования таких тегов, CSS-стиль будет автоматически применяться к их содержимому. Третий возможный тип для стиля, как уже говорилось, — это стиль на основе псевдокласса. Dreamweaver позволяет выбрать только четыре псевдокласса (на самом деле их больше) — a:link, a:hover, a:active и a:\isited. Все они управляют отображением гиперссылок, а точнее, элементов, заключенных в тег <а>. Стиль на основе a:link будет автоматически применен ко всем еще не посещенным гиперссылкам, а стиль на основе a:vlsited — к уже посещенным гиперссылкам. Интересный фокус можно проделать, создав стиль на основе a:hover. Такой стиль будет действовать на гиперссылки только во время нахождения курсора над ними. Если хотите, чтобы гиперссылки "вспыхивали", когда пользователь будет проносить над ними курсор, создайте стиль на основе псевдокласса a:hover и задайте, к примеру, ярко-красный или другой, отличный от обычного, цвет текста. Последний вариант — стиль на основе a:active — создает эффект "срабатывания кнопки", автоматически применяясь к элементу, когда пользователь активирует его щелчком мыши. С его помощью также можно получить различные забавные эффекты.
□ Name — хотя этот параметр и стоит самым первым, выше, по идее, он должен идти после определения типа. Потому что, в зависимости от типа стиля, он служит для выбора либо его имени, либо тега, либо селектора CSS, соответственно меняя свое название.
□ Define in — где будет храниться создаваемый стиль: в коде самой Web- страницы (вариант This Document Only) или в отдельном файле с расширением ess. Во втором случае надо выбрать из списка либо имя уже существующего файла, либо команду New Style Sheet File, чтобы создать новый файл. Новый файл будет создан с помощью диалогового окна выбора файлов, которое появится после нажатия кнопки ОК. Преимущество отдельного файла стилей состоит в том, что его можно использовать одновременно во множестве страниц, гарантируя тем самым быстрое и легкое изменение оформления для всего сайта.
Файл со стилями CSS настоятельно рекомендуется создавать внутри локального сайта — папки, где хранятся все страницы и материалы на этапе подготовки сайта.
|
Рис. 5.26. Диалоговое окно New CSS Style |
После того как вы определитесь с этими параметрами (наиболее употребительное решение — произвольный стиль, хранящийся в отдельном файле), наступит черед другого диалогового окна, на сей раз — с подробным описанием того, что и как будет оформляться при использовании данного стиля.