Учебник Macromedia Dreamweaver (стр. 76 из 135)

Рис. 10.22. Вкладка List диалогового окна CSS Style Definition

В раскрывающемся списке Туре задается вид маркера или нумерации позиций списка. Здесь доступны девять пунктов:

· disc — маркер в виде кружка с заполнением (поведение по умолчанию для маркированных списков);

· circle — маркер в виде окружности без заполнения;

· square — маркер в виде маленького квадратика, с заполнением (на компьютерах Apple Macintosh отображается без заполнения);

· decimal — нумерация арабскими цифрами (поведение по умолчанию для нумерованных списков);

· lower-roman — нумерация малыми римскими цифрами;

· upper-roman — нумерация большими римскими цифрами;

· lower-alpha — нумерация малыми латинскими буквами;

· upper-alpha — нумерация большими латинскими буквами;

· nоnе — нет ни маркера, ни нумерации (поведение по умолчанию для обычных текстовых абзацев).

В поле ввода Bullet Image вводится имя файла графического изображения, которое будет использоваться в качестве маркера. Вы можете ввести его вручную или щелкнуть кнопку Browse и выбрать нужный файл в диалоговом окне Select File. Заметьте, что если задан графический маркер, установки атрибута Туре теряют силу.

Раскрывающийся список Position задает местонахождение маркера или нумерации. Здесь доступны два пункта. Если выбран пункт inside, то маркер (нумерация) располагается внутри границ текстового абзаца, т. е. принадлежит ему. Если же выбран пункт outside, то маркер (нумерация) размещается за пределами границ абзаца. Таким образом, если задано значение inside, позиция списка выглядит компактнее, а если outside — текст позиции будет лучше читаться. Значение по умолчанию — outside.

Параметры местонахождения

Вкладку Positioning диалогового окна CSS Style Definition мы рассмотрим позже, когда будем изучать свободно позиционируемые элементы. Сейчас атрибуты, устанавливаемые с ее помощью, нам не пригодятся.

Дополнительные параметры

Стандарт CSS предоставляет целый набор дополнительных атрибутов, задающих особые параметры элементов страницы. Эти параметры задаются на вкладке Extensions диалогового окна CSS Style Definition, которая показана на рис. 10.23.

Рис. 10.23. ВкладкаExtensions диалоговогоокнаCSS Style Definition

Группа раскрывающихся списков Page Break пригодится, если вы планируете дать возможность пользователю распечатать вашу Web-страницу на принтере. С помощью списков этой группы вы можете дать команду драйверу принтера выполнить прогон листа до или после печати какого-либо элемента страницы и продолжить печать с нового листа. Это может быть полезно, если вы хотите предотвратить появление "висячих" строк или если вы разработали хитроумный печатный дизайн, где одни элементы помещаются на левых, а другие — на правых листах (если используется двусторонняя печать). В этом случае воспользуйтесь раскрывающимися списками Before и After, задающими прогон листа соответственно перед и после текущего элемента страницы.

В обоих этих списках доступно по четыре пункта. Поскольку они абсолютно одинаковы и вызывают практически идентичные действия, мы рассмотрим их вместе.

Пункт auto передает управление размещением информации на бумажных листах Web-обозревателю, т. е. сам Web-обозреватель будет размещать элементы страницы на листах, как ему заблагорассудится. Это поведение по умолчанию.

Если вы хотите, чтобы перед текущим элементом страницы или после него принтер начинал печать с нового листа, выберите в соответствующем раскрывающемся списке пункт always. В частности, вы можете установить атрибут Before в always для всех заголовков, т. к. "повисшие" заголовки -грубейшая ошибка в полиграфии.

Также вы можете захотеть, чтобы какой-то элемент страницы напечатался только на левой или правой странице, если пользователь использует двустороннюю печать. В этом случае вы должны будете выбрать соответственно пункт left или right раскрывающегося списка. Но учтите при этом, что какая-то страница может остаться вообще пустой.

И еще учтите, что атрибуты управления прогоном листа поддерживаются только достаточно новыми версиями Web-обозревателей.

Группа раскрывающихся списков Visual Effect управляет визуальным представлением текущего элемента страницы. В частности, с ее помощью вы можете применить к элементу такое замечательное нововведение, появившееся в Internet Explorer 4.0, как фильтры и преобразования.

Но сначала обратимся к раскрывающемуся списку Cursor. С его помощью вы можете задать вид курсора мыши, который он примет при наведении на текущий элемент страницы. Это может быть очень забавно.

Все доступные формы курсора мыши перечислены в табл. 10.3.

Таблица 10.3. Формы курсора мыши, доступные для задания в раскрывающемся списке Cursor

Пункт раскрывающегося списка Cursor	Вид курсора мыши
hand	"Указующий перст", появляющийся при наведении курсора мыши на гиперссылки
crosshair	Перекрестье, "прицел"
text	Текстовый курсор
wait	Песочные часы, обозначающие, что Windows "думу думает"
default	Обычная стрелка
help	Обычная стрелка с вопросительным знаком справа
e-resize	Стрелка вправо, "на восток"
ne-resize	Стрелка вверх и вправо, "на северо-восток"
n-resize	Стрелка вверх, "на север"
nw-resize	Стрелка вверх и влево, "на северо-запад" .
w-resize	Стрелка влево, "на запад"
sw-resize	Стрелка вниз и влево, "на юго-запад"
s-resize	Стрелка вниз, "на юг"
se-resize	Стрелка вниз и вправо, "на юго-восток"
auto	Управление формой курсора мыши передается Web-обозревателю. Поведение по умолчанию

Имейте, однако, в виду, что перед тем, как задавать форму курсора мыши для каких-то элементов вашей страницы, подумайте, нужно ли это. Скажем, если при наведении курсора мыши на текст он будет принимать форму песочных часов, пользователь вас, мягко говоря, не поймет. Поэтому сначала уясните, что обозначает та или иная форма курсора. Не от нечего же делать Windows ее меняет!

А вот раскрывающийся список Filter даст в ваши руки неограниченные возможности по созданию графических спецэффектов. Например, вы можете сделать графическое изображение или текст заголовка размытым или заставить его плавно появляться и так же плавно исчезать. Поверьте — это выглядит потрясающе! И задать эти спецэффекты вы сможете с помощью раскрывающегося списка Filter, но... Описание фильтров может растянуться на целую главу — такой это мощный инструмент, поэтому мы не будем описывать их здесь. Если вы заинтересовались фильтрами или преобразованиями, найдите хорошую книжку по CSS или, что еще лучше, обратитесь на сайт Microsoft за нужной документацией.

Применение стилей

После того как вы зададите атрибуты стиля, нажмите кнопку ОК диалогового окна CSS Style Definition. Вы также можете нажать кнопку Apply, чтобы сохранить стилевые установки без закрытия этого диалогового окна. Чтобы отказаться от создания нового стиля, нажмите кнопку Cancel (хотя таблица стилей при этом все-таки будет создана).

После того как стиль сохранен в таблице (внешней или внутренней — неважно), его нужно применить к выделенному фрагменту текста или целому абзацу. Конечно, если это стиль переопределения тега, его не надо никак применять — Web-обозреватель использует заданные в нем установки при обработке соответствующего тега. Другое дело стилевой класс — нам нужно будет самим указать, что данный текст форматируется с его использованием.

Предположим, что вы задали для тега <р> шрифт Verdana размером 9 пунктов. Теперь задайте для тега <BODY> светло-желтый цвет фона, но сохраните эту установку не во внешней таблице стиля, а в самой Web-странице 10.2.htm. Для этого в диалоговом окне New CSS Style (см. рис. 10.5) включите переключатель This Document Only. Это пригодится нам в дальнейшем, когда мы будем изучать работу со стилями.

Создайте еще два стиля для наших экспериментов. Первый из них будет называться centered, а второй — red. (Как вы уже догадались, это стилевые классы, и поэтому для их создания нужно выбрать переключатель Make Custom Style (class) и ввести их имена в меню Name.) Для первого стиля задайте выравнивание текста посередине, а для второго — красный цвет текста. Сохраните их также во внешней таблице стилей 10.2.css.

После всех этих манипуляций наша страница примет вид, показанный на рис. 10.24, а панель CSS Styles — на рис. 10.25.

Как видите, в списке CSS-стилей отображаются три пункта: No CSS Style centered и red. Первый пункт обозначает отсутствие любого стиля, т. е. элемент страницы будет форматироваться по умолчанию. Два других задают созданные нами стилевые классы. Заметьте, что стили, переопределяющие теги, здесь не отображаются, и это правильно.

Рис. 10.24. Web-страница 10.2.htm после задания всех стилей

Рис. 10.25. Панель CSS Styles после задания всех стилей

Имейте в виду также следующее. Если вы задали стиль вида, скажем, H1. right (гибрид стилевого класса и переопределения тега), Dreamweaver отобразит его как right в списке стилей. При этом он позволит вам присвоить его любому элементу страницы, что будет неправильно, т. к. этот стиль будет работать только в теге <HI>. Очень досадно, но если вы используете в своих страницах подобные гибридные стили, вам придется самим помнить о них и выполнять только корректные присвоения.

Так как же применить стилевой класс к элементу страницы? Если у вас открыта панель CSS Styles, вам достаточно только выбрать нужный стиль в списке. Естественно, перед этим вы будете должны выделить в окне документа элемент страницы, к которому хотите применить стилевой класс.