Псевдостили гиперссылок
А теперь мы узнаем еще об одной интересной возможности, предлагаемой Web -дизайнеру таблицами стилей. Это псевдостили гиперссыпок, позволяющие в достаточно широких пределах менять внешний вид гиперссылок на ваших страницах.
Вы уже знаете, что для каждой Web -страницы можно задать цвет фона, текста и кодировку текста. Кроме того, HTML позволяет вам также сменить цвета гиперссылок, отдельно — для непосещенных, отдельно — для посещенных и отдельно — для активной гиперссылки. Это позволяет немного оживить Web-сайт, сделать его не похожим на другие. Но возможности, предлагаемые псевдостилями, несравнимо шире. Вы можете менять шрифт, начертание и даже убирать надоевшее подчеркивание у активной гиперссылки.
Но как же это делается? Обычным переопределением стилей во внешней или внутренней таблице. Но сначала давайте перечислим все доступные в данный момент псевдостили. Как видно из табл.10.1, всего их четыре.
Теперь давайте создадим небольшой пример Web -странички, использующей псевдостили.
<HTML>
<HEAD>
<TITLE> Псевдостили </TITLE>
<STYLE>
A: link { color: tCC0000;
background-color: #FFFFFF;
text-decoration: none }
A: active { color: #FFFFFF;
background-color: ICC0000;
text-decoration: none }
A: visited { color: #CC0000;
background-color: #FFFFFF;
text-decoration: line-through }
A: hover { color: #FFFFFF;
background-color: #CC0000;
text-decoration: none }
</STYLE>
</HEAD>
<BODY>
<Р><А HREF ="">Гиперссьшка 1</А></Р>
<Р><А HREF ="">Гиперссылка 2</А></Р>
<Р><А HREF ="">Гиперссылка 3</А></Р>
</BODY>
</HTML>
Сохраните эту страницу в файле 10.2.htm и откройте в Web -обозревателе. Попробуйте провести курсором мыши над любой гиперссылкой и посмотрите, что из этого получится.
Автор не будет подробно разбирать таблицу стилей и ее атрибуты. Попробуйте разобраться в ней сами. Учтите только, что атрибут background - color задает цвет фона текста, а атрибут text - decoration — подчеркивание или зачеркивание текста. Значение line - through последнего задает зачеркивание текста, а попе — отсутствие подобного "украшения".
Вообще, псевдостили лучше всего задавать во внешней таблице стилей, поскольку все таблицы сайта должны выглядеть одинаково. Тем более это касается гиперссылок. Представьте себе удивление и гнев посетителя, если на различных страницах гиперссылки отображаются разным цветом.
Работа с таблицами стилей в Dreamweaver
Вы уже много узнали о таблицах стилей. И, наверно, вас уже давно мучает вопрос: а что же Dreamweaver ? Поддерживает ли он работу с таблицами стилей? И если поддерживает, то насколько? И почему автор не упомянул об этом ни слова, а все заваливал нас примерами на этом ужасном и ни капельки не понятном HTML ? Неужели нам всетаки придется создавать стили вручную?!!
Успокойтесь. Все в порядке. Dreamweaver прекрасно поддерживает и внешние, и внутренние таблицы стилей и позволяет вам создавать стили, "понятные" самым последним на момент его выхода в свет Web -обозревателям. А применять созданные стили к элементам страницы вообще проще простого.
Но зачем же понадобилось столько исходного кода? Для того чтобы вы поняли, что такое таблицы стилей и как они работают. А разъяснить это проще всего на примерах, написанных на языках HTML и CSS . К тому же, знать языки HTML и CSS Web -дизайнеру совсем не вредно, наоборот, полезно. Лишние знания — багаж необременительный и зачастую оказывающийся совсем не лишним.
В этом есть, правда, еще один резон. Дело в том, что Dreamweaver не поддерживает удобное создание и присвоение элементам страницы встроенных стилей. Единственный способ создавать их — вводить вручную в мини - редакторе HTML или пользоваться диалоговым окном Tag Editor , описан ным в главе 2.
Создание стилей
Перед тем как начать экспериментировать со стилями, откройте Web -страницу 1.1.htm , созданную нами в самом начале изучения Dreamweaver . Над ее содержимым мы и будем издеваться. Только пересохраните ее под именем 10.2.htm , выбрав пункт Save As в меню File или нажав комбинацию клавиш < Ctrl >+< Shift >+< S >.
Чтобы вызвать ее на экран, либо выберите в меню Window пункт CSS Styles , либо нажмите комбинацию клавиш < Shift >+< F11>.
Чтобы создать новый стиль, выберите пункт New CSS Style контекстного или дополнительного меню либо нажмите одноименную кнопку, расположенную в правом нижнем углу панели CSS Styles . Также вы можете активизировать окно документа и выбрать пункт New style подменю CSS Styles контекстного меню или одноименный пункт одноименного подменю, находящегося в меню Text . В результате любого из этих действий на экране появится диалоговое окно
New CSS Style .
Группа переключателей Type задает элементы страницы, к которым будет применен вновь создаваемый стиль:
Переключатель Make Custom Style ( class ) позволяет создать новый стилевой класс. Если вы его включите, то в комбинированном списке Name сможете ввести имя создаваемого стилевого класса, например . cit ;
Переключатель Redefine HTML Tag позволяет создать стиль переопределения тега. Если выбран этот переключатель, в раскрывающемся списке Tag вы сможете выбрать нужный тег;
Переключатель Use CSS Selector позволяет создать стиль-селектор. Он же позволит вам создать псевдостиль гиперссылок или комбинированный стиль наподобие H1 I или I.cit . Если включен этот переключатель, в комбинированном списке Selector может быть введено имя создаваемого комбинированного стиля или селектора. Развернув этот список, вы сможете выбрать нужный псевдостиль.
Вторая группа переключателей Define In задает, в какой таблице стилей будет находиться вновь создаваемый стиль:
Если выбран верхний переключатель, в расположенном правее раскрывающемся списке вы сможете выбрать имя файла внешней таблицы стилей, привязанной к этой странице. Также вы можете выбрать пункт ( New Style Sheet File ), чтобы создать новую таблицу стилей. В последнем случае после нажатия кнопки ОК на экране появится диалоговое окно сохранения файла, где вы сможете ввести имя файла новой таблицы стилей;
Если выбран переключатель This Document Only , стиль будет помещен во внутреннюю таблицу стилей.
Введя нужные данные, нажмите кнопку ОК для создания стиля или Cancel — для отказа от этого.
Давайте предположим, что мы хотим переопределить стиль тега < P > и поместить определение этого стиля в новую таблицу стилей, которую затем привяжем к новой Web -странице 10.2.htm . Для этого сначала выберите переключатель Redefine HTML Tag , затем — пункт р в списке Tag , далее — верхний переключатель в группе Define In и нажмите кнопку ОК . В диалоговом окне сохранения файла введите имя файла таблицы стилей 10.2.css и нажмите кнопку сохранения. Все, сам файл таблицы стилей нами создан.
После создания таблицы стилей на экране появится диалоговое окно CSS Style Definition . Это диалоговое окно очень велико и состоит из множества вкладок, которые мы рассмотрим последовательно, одна за другой. Эти вкладки выбираются в списке Category .
Определение стиля
А теперь мы подробно рассмотрим, что же предлагает нам Dreamweaver для создания нового стиля.
Однако прежде чем мы начнем изучать возможности Dreamweaver по созданию стилей, нужно сказать следующее. При создании стилей вам совсем не обязательно задавать все их атрибуты. Задайте только те, что реально вам необходимы. Незаданные же атрибуты автоматически принимают значение по умолчанию, как правило, normal или попе. Таким образом, чтобы вернуть атрибуту значение по умолчанию, просто удалите введенное значение.
И еще. Впервые с начала книги автор нарушит свою традицию помещать в примечаниях описание тегов HTML и атрибутов CSS , с помощью которых достигается тот или иной эффект. Дело в том, что атрибутов стилей, которые здесь будут описаны, довольно много, и примечания получатся слишком большими. Если вам понадобится выяснить синтаксис какогото атрибута CSS , обратитесь к электронному руководству, поставляемому в составе Dreamweaver . Как его вызвать, вы уже знаете.
Внимание!
Далеко не все программы Web - обозревателей поддерживают все атрибуты CSS . Поэтому перед тем , как применить тот или иной атрибут , справьтесь в руководстве по CSS , поставляемым с Dreamweaver MX .
Внимание!
Dreamweaver не всегда корректно отображает элементы страницы , к которым было применено специальное CSS - форматирование . Чтобы увидеть правильные результаты использования того или иного атрибута стилей , воспользуйтесь Web - обозревателем .
