.

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

Давайте рассмотрим стиль copyright.

Во внешней таблице для него были заданы курсивный шрифт размером 8 пунктов и выравнивание по правому краю. Когда мы присвоили его элементу, отформатированному с помощью тега <р>, стиль copyright полностью заменил определение стиля для тега <р>, сделанное в той же внешней таблице. Из этого следует, что стили с именем (т. е. стилевые классы и гибридные стили) имеют приоритет перед переопределениями тегов.

Теперь рассмотрим подробнее последний параграф нашей странички. Вот он:

<Р CLASS="copyright">

Авторские права.

Здесь присутствует новый, не знакомый нам тег . Этот тег позволяет выделить фрагмент какого-либо текста и произвести над ним некоторые действия, например применить стиль. Что мы и сделали -- применили к фрагменту текста новый стиль, встроенный в этот тег. Мы убрали курсивное выделение текста, и наши установки перекрыли определение стиля copyright, сделанное во внешней таблице стилей.

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

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

Элемент страницы, созданный с использованием стиля рамки outset

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

Опять же, если вы хотите задать одинаковые параметры для всех сторон рамки, включите флажок Same for All, находящийся в соответствующей группе элементов управления. После этого задайте нужные параметры в списке или селекторе цвета, которые станут после этого доступными.

Да, рамка обычно делается одинаковой со всех сторон. Но Dreamweaver и таблицы стилей позволяют вам задать различные стили, значения ширины и цвета для каждой стороны рамки отдельно. Вы даже можете убрать какие-то из сторон рамки или вообще оставить только одну сторону. Такой пример показан на рис. 10.21. Здесь мы задали для левой стороны значение thick, а для остальных сторон — 0. Кроме того, мы задали величину отступа Padding слева равной 0,5 см, а с других трех сторон убрали его совсем. Попробуйте сделать так же!

Вкладка 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.

Вкладка 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 Styles после задания всех стилей

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

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

Давайте поставим текстовый курсор на заголовок нашей страницы и щелкнем по стилевому классу centered. После этого выделим слова "Web-страничка" и щелкнем по стилевому классу red. Что получится? (Ответ см. на рис. 10.26.)

Теперь поставьте текстовый курсор куда-нибудь на текст заголовка и взгляните на окно CSS-стилей. Dreamweaver подсветит в списке стилевой класс сentered. To же самое произойдет с классом red, если вы поместите текстовый курсор на выделенную красным надпись. Таким образом, вы всегда будете знать, с помощью какого стилевого класса отформатирован тот или иной элемент страницы.

Но что делать, если панель CSS Styles у вас закрыта? Специально для такого случая в меню Text и контекстном меню предусмотрено подменю CSS Styles. В верхней части этого подменю перечислены все созданные вами к этому моменту стилевые классы. Выбранный класс будет выделен галочкой. Само собой, также присутствует пункт None, позволяющий убрать форматирование с использованием стилевого класса.

Вообще, Dreamweaver (как и многие популярные Windows-приложения, например, Microsoft Word) ценен тем, что почти любое действие в нем можно выполнить несколькими различными способами. Вам остается только выбрать тот способ, который придется вам больше по душе.

Панель CSS Styles в режиме правки стилей

Чтобы изменить необходимый стиль, выделите его и выберите пункт Edit контекстного или дополнительного меню. Также вы можете дважды щелкнуть по нужному пункту списка стилей. После этого на экране появится диалоговое окно CSS Style Definition, в котором вы сможете выполнить требуемые изменения. После нажатия кнопки ОК все сделанные изменения сохранятся и будут тотчас применены.

Удалить стиль вы можете, воспользовавшись пунктом Delete контекстного или дополнительного меню. Но проще и нагляднее нажать кнопку Delete Style (рис. 10.28) в правом нижнем углу панели CSS Styles. Естественно, перед этим вы должны будете выбрать нужный стиль в списке.

Кнопка Delete Style панели CSS Styles

Стиль удаляется сразу же, без всякого предупреждения. Форматирование всех элементов страницы, к которым был применен удаленный стиль, приводится к виду по умолчанию. Однако атрибуты CLASS и их значения в тегах этих элементов все же сохраняются, и если вы в дальнейшем создадите стилевой класс с таким же названием, он будет тотчас к ним применен.

Также Dreamweaver предоставляет вам возможность создать копию выбранного стиля. Это может быть полезно, если вы хотите создать новый стиль, слегка переделав уже существующий. Для этого выберите нужный стиль и воспользуйтесь пунктом Duplicate контекстного или дополнительного меню.

На экране появится уже надоевшее вам диалоговое окно CSS Style Definition. Ну а с ним-то вы знаете, что делать.

Кнопка Edit Style Sheet панели CSS Styles

После этого на экране появится диалоговое окно Edit Style Sheet, показанное на рис. 10.30.

Большую часть этого диалогового окна занимает список стилей, определенных во внутренней таблице (если таковая есть), и внешних таблиц стилей, привязанных к этой странице. Вы видите, что этот список в нашем случае содержит два пункта. Нижний пункт обозначает стиль, переопределяющий тег . (Помните, мы задали для тела документа светло-желтый цвет Верхний же пункт обозначает внешнюю таблицу стилей 10.2.css, привязанную к нашей странице. Заметьте, что этот пункт помечен специальным значком.

Под списком находится небольшое текстовое поле, где выводится код определения выбранного в списке стиля. Так что вы сразу можете видеть, что з* стиль попал вам под руку... т. е. под мышку.

Панель CSS Styles

Чтобы создать новый стиль, выберите пункт New CSS Style контекстного или дополнительного меню либо нажмите одноименную кнопку (рис. 10.4), расположенную в правом нижнем углу панели CSS Styles. Также вы можете активизировать окно документа и выбрать пункт New style подменю CSS Styles контекстного меню или одноименный пункт одноименного подменю, находящегося в меню Text. В результате любого из этих действий на экране появится диалоговое окно New CSS Style, показанное на рис. 10.5.

Диалоговое окно Edit Style Sheet

Левее списка находятся пять кнопок. Перечислим их по порядку.

Кнопка Link позволяет привязать к странице внешнюю таблицу стилей. Если вы на нее нажмете, на экране появится диалоговое окно Link External Style Sheet, показанное на рис. 10.31. В поле ввода File/URL введите имя файла внешней таблицы стилей, которую вы хотите привязать к своей странице. Если вы не хотите вводить ее вручную, щелкните кнопку Browse и выберите нужный файл в диалоговом окне Select File. После этого нажмите кнопку ОК для привязки таблицы стилей или Cancel — для отказа от этого.

Диалоговое окно Link External Style Sheet

В диалоговом окне Link External Style Sheet имеется также группа переключателей Add As. Переключатель Link (включен по умолчанию) выполняет обычную привязку таблицы стилей с помощью тега ; это, собственно, делается почти всегда. А переключатель Import позволяет вам импортировать внешнюю таблицу стилей, т. е. перенести все содержимое внешней таблицы стилей во внутреннюю. Однако такой возможностью пользоваться не рекомендуется, поскольку команда CSS @import, с помощью которой выполняется импортирование, поддерживается далеко не всеми программами

Web-обозревателей. А, кроме того, при импортировании возможен неразрешимый конфликт стилей, когда во внутренней и внешней таблицах оказывается два стиля с одинаковым именем. (При импортировании механизм "каскадности" не работает.)

Однако вернемся к диалоговому окну Edit Style Sheet.

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

Кнопка Edit позволит вам отредактировать существующий стиль. Не будем рассказывать, как это делается, — вы уже это знаете. Чтобы вызвать нужный стиль для редактирования, также можно дважды щелкнуть по нужному пункту списка.

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

Кнопка Remove удаляет выбранный стиль.

И, наконец, кнопка Done закрывает диалоговое окно Edit Style Sheet. Вы также можете нажать кнопку закрытия окна, находящуюся в его заголовке.

Ну, вот и все. С кнопками мы разобрались. Но остается вопрос: как все-таки добраться до внешней таблицы стилей? Как ее отредактировать? Как, в конце концов, удалить ссылку на нее?

Очень просто.

Чтобы отредактировать внешнюю таблицу стилей, выберите в списке стилей соответствующий ей пункт и нажмите кнопку Edit или просто дважды щелкните по этому пункту. На экране появится еще одно диалоговое окно Edit Style Sheet, но в нем будет отображаться содержимое внешней таблицы стилей. В этом-то окне вы и сможете отредактировать ее содержимое. Не верите? Посмотрите на рис. 10.32.


Чтобы удалить ссылку на внешнюю таблицу стилей, воспользуйтесь все той же кнопкой Remove.

Выше мы рассматривали, как можно привязать к Web-странице еще одну таблицу стилей. Это можно было сделать в диалоговом окне Edit Style Sheet. Однако это совсем не обязательно — то же самое вы можете выполнить, нажав кнопку Attach Style Sheet (рис. 10.33) в правом нижнем углу панели CSS Styles либо выбрав пункт Attach Style Sheet, расположенный в контекстном и дополнительном меню этой же панели. Также этот пункт находится в подменю CSS Styles меню Text и контекстном меню окна документа. При выборе этого пункта на экране появится диалоговое окно Select File, где вы сможете выбрать нужный файл. После нажатия кнопки Select выбранная таблица стилей будет тотчас привязана к странице.

Кнопка Attach Style Sheet панели CSS Styles

Если вы считаете, что сделали удачную внутреннюю таблицу стилей, и хотите сохранить ее в отдельном файле как внешнюю (экспортировать таблицу стилей), то Dreamweaver поможет вам и в этом случае. Для этого выберите пункт Export Style Sheet, расположенный в контекстном и дополнительном меню панели CSS Styles. Также этот пункт располагается в подменю CSS Styles, находящемся в меню Text и контекстном меню окна документа. После выбора этого пункта на экране появится стандартное диалоговое окно сохранения файла Windows. Введите имя файла и нажмите кнопку сохранения.

Диалоговое окно Tag Editor (выбрана вкладка Style Sheet/Accessibility)

Собственно определение тега вводится в поле ввода Style. Введите в него текст font-size: larger. И нажмите кнопку ОК. После этого шрифт курсивного текста увеличится в размерах — наш внутренний стиль работает!

Теперь примемся за заголовок. И используем мини-редактор HTML, описанный еще в главе 2 этой книги. Конечно, можно работать в режиме отображения кода окна документа. Но мини-редактор HTML несколько удобнее, т. к. вы можете видеть одновременно и саму страницу, и нужный фрагмент кода.

Поместите текстовый курсор в текст заголовка и выберите в контекстном меню пункт Edit Tag

... Результат этого действия показан на рис. 10.35.

Вставьте в тег

атрибут STYLE и присвойте ему значение color: #00FF00;. Должно получиться так, как показано на рис. 10.36.

Измененный HTML-код в мини-редакторе HTML

Теперь закройте мини-редактор, нажав клавишу . (Нажатие клавиши позволит вам отменить сделанные изменения.) И посмотрите на заголовок. Он позеленел, но не от злости, а от того, что мы применили к нему встроенный стиль.

Так что вы можете создавать в Dreamweaver и встроенные стили. Однако имейте в виду, что в этом случае вам придется полагаться только на свое знание HTML и CSS — Dreamweaver почти не автоматизирует ваш труд. А узнать побольше о HTML и CSS вам помогут интерактивные руководства, поставляемые вместе с этой замечательной программой.

Диалоговое окно Design Time Style Sheets

В этом окне находятся два списка. В списке Show Only at Design Time перечислены таблицы стилей времени редактирования. В списке Hide at Design Time перечислены таблицы стилей времени просмотра. Точнее, не сами таблицы стилей, а имена файлов, в которых они сохранены.

Чтобы добавить файл в один из списков, нажмите кнопку со знаком "плюс", находящуюся над ним. После этого вам останется выбрать нужный файл в диалоговом окне Select File и нажать кнопку открытия.

Чтобы удалить файл из списка, выберите его и нажмите кнопку со знаком "минус", находящуюся над списком.

После нажатия кнопки OK Dreamweaver примет ваши указания к сведению. Причем, немедленно.

Для примера вы можете открыть страницу 10.2.htm и задать в качестве таблицы времени редактирования 10.1.htm, а в качестве таблицы времени просмотра — 10.2.htm. Получившийся результат показан на рис. 10.38.

Диалоговое окно Convert to 3.0 Browser Compatible

Чтобы преобразовать страницу, использующую стили, в совместимую со старыми программами, включите один из переключателей в группе Convert: либо CSS Styles to HTML Markup, либо Both. (О переключателе Layers to Table мы поговорим потом, а сейчас вы пока можете не обращать на него внимания — стилей он все равно не затрагивает.) После этого нажмите кнопку ОК для запуска преобразования, либо Cancel — для отказа от него.

По окончании преобразования Dreamweaver выведет на экран новое окно документа, в котором будет находиться новая Web-страница, являющаяся результатом преобразования старой, "несовместимой" страницы. Это очень удобно: вы можете оставить у себя старую (использующую стили) страницу для каких-то нужд. На взгляд автора, лучше всего делать так: вносить все изменения в старые (использующие стили) версии страниц, а потом преобразовывать их в "совместимые" и именно их публиковать в Сети. Таким образом, вам не нужно будет вносить одни и те же изменения по два раза в разные версии страниц.

Попробуйте преобразовать в "совместимый" вид страничку 10.2.htm. Посмотрите на рис. 10.40 — даже встроенный стиль преобразовался! Хотя фон страницы, заданный в стиле, переопределяющем тег , Dreamweaver все же "потерял". Ну и растяпа!..

Вкладка Type диалогового окна New CSS Style

Введя нужные данные, нажмите кнопку ОК для создания стиля или Cancel — для отказа от этого.

Давайте предположим, что мы хотим переопределить стиль тега <р> и поместить определение этого стиля в новую таблицу стилей, которую затем привяжем к новой Web-странице 10.2.htm. Для этого сначала выберите педостигается тот или иной эффект. Дело в том, что атрибутов стилей, которые здесь будут описаны, довольно много, и примечания получатся слишком большими. Если вам понадобится выяснить синтаксис какого-то атрибута CSS, обратитесь к электронному руководству, поставляемому в составе Dreamweaver. Как его вызвать, вы уже знаете.

Внимание!

Далеко не все программы Web-обозревателей поддерживают все атрибуты CSS. Поэтому перед тем, как применить тот или иной атрибут, справьтесь в руководстве по CSS, поставляемым с Dreamweaver MX.

Внимание!

Dreamweaver не всегда корректно отображает элементы страницы, к которым было применено специальное CSS-форматирование. Чтобы увидеть правильные результаты использования того или иного атрибута стилей, воспользуйтесь Web-обозревателем.

Комбинированный список Size, задающий размер шрифта

В раскрывающемся списке, расположенном правее Size, выбирается единица измерения размера шрифта. Этот список доступен только тогда, когда в Size выбрано или введено числовое значение. Всего здесь доступно девять пунктов, представляющих девять единиц измерения, поддерживаемых стандартом CSS. Все они перечислены и описаны в табл. 10.2.

Таблица 10.2. Единицы измерения, поддерживаемые стандартом CSS

	Единица измерения		Описание
	pixels		Пикселы
	points		Пункты
	in		Дюймы
	cm		Сантиметры
	mm		Миллиметры
	picas		Пики
	ems		Размер буквы "m" текущего шрифта
	exs		Размер буквы "х" текущего шрифта
	%		Проценты от размера шрифта родительского элемента

В комбинированном списке Weight задается величина "жирности" шрифта. Вы можете ввести числовое значение "жирности" от 100 до 900, либо выбрать одно из предопределенных абсолютных или относительных значений. Как и в списке Size, здесь доступны пункты трех типов:

пункты — числовые значения. Задают "жирность" шрифта в числах от 100 до 900. Обычный шрифт имеет значение 400, жирный — 700;

пункты normal и bold, задающие соответственно обычный и жирный шрифт;

пункты bolder и lighter, задающие относительную "жирность" шрифта. Пункт bolder увеличивает "жирность" на одну позицию в списке предопределенных значений, а пункт lighter — уменьшает.

В раскрывающемся списке Style вы можете выбрать "стиль" шрифта, а именно, будет ли он являться курсивом или нет. Доступны три пункта: normal — обычный шрифт, italic — курсив и oblique — зависит от конкретной программы Web-обозревателя, но обычно тоже курсив.

В раскрывающемся списке Variant задается вид малых букв шрифта. Пункт normal задает нормальный их вид, a small-caps делает их похожими на уменьшенные заглавные буквы.

В комбинированном списке Line Height задается вертикальный размер строки текста. Значение normal задает размер по умолчанию, вычисляемый самим Web-обозревателем. Чтобы задать свой размер, введите его вручную и выберите единицу измерения. Раскрывающийся список, задающий единицу измерения, находится правее. Если вы его откроете, то увидите, что он имеет новый пункт multiple; он задает умножение размера по умолчанию на введенное вами число.


В раскрывающемся списке Case задается вид текста: будет ли он отображаться только большими или только маленькими буквами. Здесь доступны четыре пункта:

capitalize — каждое слово текста отображается с большой буквы;

uppercase — текст отображается только большими буквами;

lowercase — только маленькими буквами;

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

Группа флажков Decoration задает дополнительное "украшение" текста: подчеркивание, надчеркивание или зачеркивание. Здесь доступно пять флажков:

underline — подчеркивает текст (поведение по умолчанию для гиперссылок);

overline — надчеркивает текст;

line-through — зачеркивает текст;

blink — заставляет текст мерцать (поддерживается только старыми версиями Navigator);

попе - убирает все эти "украшения" (поведение по умолчанию для остального текста).

Селектор цветов Color задает цвет текста.

Вкладка Background диалогового окна CSS Style Definition

Селектор цветов Background Color задает цвет фона. Значение по умолчанию зависит от программы Web-обозревателя.

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

Обычно графическое изображение, использующееся в качестве фона, значительно меньше в размерах, чем сама страница. В этом случае Web-обозреватель многократно повторяет это изображение, выкладывая своего рода "мозаику", занимающую всю страницу. Управлять тем, как будет повторяться это изображение, можно с помощью раскрывающегося списка Repeat. Здесь доступны четыре пункта:

no-repeat — отключает повторение. Изображение помещается на страницу всего один раз, в левом верхнем углу элемента;

repeat — включает повторение изображения по горизонтали и вертикали (поведение по умолчанию);

repeat-x — включает повторение изображения только по горизонтали;

repeat-y — устанавливает повторение изображения только по вертикали.

Когда вы прокручиваете содержимое окна Web-обозревателя, то вместе с содержимым Web-страницы прокручивается и графический фон, если он есть. Некоторые Web-обозреватели поддерживают одну забавную возможность: можно запретить прокрутку графического фона, зафиксировав его на месте. Это может придать странице некоторую оригинальность, однако при прокрутке отнимет больше ресурсов компьютера. И сделать это можно с помощью раскрывающегося списка Attachment. Пункт scroll этого списка заставляет графический фон прокручиваться (поведение по умолчанию), a fixed — фиксирует его на месте.

Также некоторые Web-обозреватели позволяют вам поместить графический фон в нужное место страницы. Для этого предназначены раскрывающиеся списки Horizontal Position и Vertical Position. Вы можете ввести в них числовые значения соответственно горизонтальной и вертикальной координат графического фона. В раскрывающихся списках, расположенных правее, выбирается одна из единиц измерения, поддерживаемых CSS.


Кроме того, в раскрывающемся списке Horizontal Position доступны три пункта:

left — выравнивание графического фона по левому краю элемента страницы (поведение по умолчанию);

center — выравнивание по центру;

right — выравнивание по правому краю.

В раскрывающемся списке Vertical Position доступны также три пункта:

top — выравнивание графического фона по верху элемента страницы (поведение по умолчанию);

center — выравнивание по центру;

bottom — выравнивание по низу.

Очевидно, что задавать эти параметры нужно, предварительно задав соответствующие параметры других атрибутов стиля, перечисленных на вкладке Background. А для достижения необходимого результата наверняка придется поэкспериментировать.

Вкладка Block диалогового окна CSS Style Definition

В комбинированном списке Word Spacing задается величина дополнительного пространства, помещаемого между словами. Введите нужную величину и выберите в расположенном правее раскрывающемся списке единицу измерения. Здесь доступны все единицы измерения, кроме процентов. Пункт normal комбинированного списка Word Spacing убирает дополнительное расстояние между словами текста.

В комбинированном списке Letter Spacing задается величина дополнительного пространства, помещаемого между символами. Введите нужную величину и выберите в расположенном правее раскрывающемся списке единицу измерения. Здесь доступны все единицы измерения, кроме процентов. Пункт normal комбинированного списка убирает дополнительное расстояние между символами текста.

Комбинированный список Vertical Alignment задает вертикальное выравнивание элемента страницы относительно родителя. Здесь доступны следующие пункты:

baseline — выравнивание базовой линии элемента страницы по базовой линии текста родителя (поведение по умолчанию);

sub — помещает текст ниже остального текста, имитируя нижний индекс;

super — помещает текст выше остального текста, имитируя верхний индекс;

top — выравнивание элемента страницы по верхнему краю родительского элемента;

text-top — выравнивает верхний край элемента страницы по верхнему краю текста родителя;

middle — помещает середину элемента страницы на половину высоты шрифта выше базовой линии текста родителя;

bottom — выравнивание элемента страницы по нижнему краю родительского элемента:

text-bottom — выравнивает нижний край элемента страницы по нижнему краю текста родителя.

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

Как бы то ни было, для того чтобы получить в окне Web-обозревателя необходимый результат, вам придется поэкспериментировать с разными значениями этого атрибута. Рассказать, как будет выглядеть тот или иной элемент страницы при том или ином значении, невозможно — его нужно видеть своими глазами. (Это, впрочем, справедливо и для многих других параметров элементов страниц, задаваемых в Dreamweaver.)


Раскрывающийся список Text Align задает горизонтальное выравнивание текста в абзаце. Здесь доступны четыре пункта:

left — выравнивание по левому краю (поведение по умолчанию);

center — по центру;

right — по правому краю;

justify — по ширине.

В поле ввода Text Indent задается величина отступа красной строки. Эта величина может быть как положительной, так и отрицательной (выступ). В раскрывающемся списке, расположенном правее, выбирается единица измерения.

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

normal — задает обычное отображение текста, т. е. Web-обозреватель может переносить строки по пробелам, если они (строки) не будут помещаться в родительском элементе;

рrе — превращает текст абзаца в фиксированно отформатированный. Как вы помните из главы 5, такой текст отображается так, как он введен в исходном HTML-коде, с учетом пробелов, возвратов каретки и т. п. Одним словом, текст ведет себя так, словно заключен внутрь тега

;


  nowrap — запрещает перенос текста по пробелам. Вам будет необходимо поставить в нужные места строк теги разрыва текста 
, если вы хотите, чтобы они все-таки переносились. Это может быть полезно, если вы захотите контролировать, как текст будет переноситься на другую строку.


 Раскрывающийся список Display задает поведение элемента страницы. В нем доступно очень много пунктов:


  попе — элемент вообще не будет присутствовать на странице, словно он и не задан в ее коде;


  inline — элемент страницы ведет себя как отдельный символ текста (встроенный элемент);


  block — элемент страницы ведет себя как абзац текста (блочный элемент); 



list-item — элемент страницы ведет себя как пункт списка;


  run-in — встраивающийся элемент. Если за таким элементом идет блочный элемент, он становится первым символом блочного элемента, в противном случае он сам становится блочным элементом;


  compact — компактный элемент. Если за таким элементом идет блочный элемент, он форматируется как однострочный встроенный элемент и помещается на левой границе блочного элемента (если эта граница задана). В противном случае он сам форматируется как блочный элемент;


  marker — маркер списка;


  table — таблица;


 inline-table — таблица, отформатированная как встроенный элемент;


  table-row-group — строки секции тела таблицы;


  table-header-group — строки секции заголовка таблицы;


  table-footer-group — строки секции "поддона" таблицы;


 table-row — строка таблицы;


  table-column-group — группа колонок таблицы;


  table-column — колонка таблицы;


 table-cell — ячейка таблицы;


 table-caption — заголовок таблицы.



Создание стилей
 Перед тем как начать экспериментировать со стилями, откройте Web-страницу 1.1.htm, созданную нами в самом начале изучения Dreamweaver. Над ее содержимым мы и будем издеваться. Только пересохраните ее под именем 10.2.htm, выбрав пункт Save As в меню File или нажав комбинацию клавиш ++.


 Вся работа со стилями протекает в панели CSS Styles Dreamweaver, показанной на рис. 10.3. Чтобы вызвать ее на экран, либо выберите в меню Window пункт CSS Styles, либо нажмите комбинацию клавиш +.


 


Таблицы стилей и шаблоны
 А теперь представим такую ситуацию. Вы прочитали о замечательных возможностях таблиц стилей и решили переделать свой сайт Sample site 3 с использованием таблиц стилей. Вы задали таблицу стилей (внешнюю или внутреннюю) для шаблона, сохранили его и обновили все основанные на нем Web-страницы. Все у вас получилось, и, кажется, ничто не предвещает беды...


 Но вот вы открыли одну из основанных на шаблоне страниц и решили создать для нее внутреннюю таблицу стилей, дополняющую ту, что находится в шаблоне. Но как это сделать? Ведь внутренняя таблица стилей записывается в HTML-заголовок страницы, куда, как было сказано ранее, хода нет!


 Не думайте об этом! Используйте те же, уже знакомые вам, инструменты для создания новых стилей. Единственное: вы не можете переопределить


 атрибуты стилей, заданные в таблице, что находится в шаблоне, иначе это вызовет неразрешимый конфликт. За исключением этого, вы полностью свободны!


 Дело в том, что при создании шаблона Dreamweaver MX создает еще одну изменяемую область по имени head. Эта изначально пустая область находится в HTML-заголовке страницы, внутри тега 
. Когда вы создаете в Web-странице внутреннюю или привязываете к ней внешнюю таблицу стилей, необходимый код помещается как раз в эту область. Вы можете посмотреть HTML-код страницы, основанной на шаблоне, и убедиться в этом сами.


Три способа задания стиля
 Всего стандарт CSS определяет три способа задания стиля для элемента страницы. Давайте перечислим их и дадим краткое описание каждому способу.


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


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


 Как видите, ничего радикально не изменилось. Единственное, добавился парный тег