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

Рис. 10.3. Панель CSS Styles

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

Рис. 10.4. Кнопка New CSS Style

Рис. 10.5. Диалоговое окно New CSS Style

Определение стиля

Группа переключателей Туре задает элементы страницы, к которым будет применен вновь создаваемый стиль:

· переключатель 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, стиль будет помещен во внутреннюю таблицу стилей.

Рис. 10.6.Вкладка Type диалогового окна New CSS Style

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

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

Внимание!

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

Внимание!

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

Параметры шрифта

Взгляните еще раз на рис. 10.6. На нем, как вы помните, показана вкладка Туре диалогового окна CSS Style Definition. На этой вкладке задаются параметры шрифта текста.

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

В комбинированном списке Size задается размер шрифта. На рис. 10.7 этот список показан в раскрытом виде. Вы можете либо ввести числовое значение в одной из поддерживаемых CSS величин, либо выбрать в списке предопределенное, абсолютное или относительное.

В общем, в этом комбинированном списке можно найти три вида пунктов:

· пункты — числовые значения. Задают размер шрифта в одной из поддерживаемых CSS единиц измерения;

· пункты xx-small, x-small, small, medium, large, x-large и xx-large, задающие одно из предопределенных значений размера шрифта;

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

Как уже говорилось, вы можете также вводить нужные числовые значения прямо в этом списке.

Рис. 10.7. Комбинированный список 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. Эта вкладка показана на рис. 10.8.

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

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

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

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

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