Macromedia Dreamweaver MX

Работа с таблицами стилей в Dreamweaver

Вы уже много узнали о таблицах стилей. И, наверно, вас уже давно мучает вопрос: а что же Dreamweaver? Поддерживает ли он работу с таблицами стилей? И если поддерживает, то насколько? И почему автор не упомянул об этом ни слова, а все заваливал нас примерами на этом ужасном и ни ка­пельки не понятном HTML? Неужели нам все-таки придется создавать сти­ли вручную?!!

Успокойтесь. Все в порядке. Dreamweaver прекрасно поддерживает и внеш­ние, и внутренние таблицы стилей и позволяет вам создавать стили, "по­нятные" самым последним на момент его выхода в свет Web-обозревателям. А применять созданные стили к элементам страницы вообще проще про­стого.

Но зачем же понадобилось столько исходного кода? Для того чтобы вы по­няли, что такое таблицы стилей и как они работают. А разъяснить это про­ще всего на примерах, написанных на языках HTML и CSS. К тому же, знать языки HTML и CSS Web-дизайнеру совсем не вредно, наоборот, по­лезно. Лишние знания — багаж необременительный и зачастую оказываю­щийся совсем не лишним.

В этом есть, правда, еще один резон. Дело в том, что Dreamweaver не под­держивает удобное создание и присвоение элементам страницы встроенных стилей. Единственный способ создавать их — вводить вручную в мини­редакторе HTML или пользоваться диалоговым окном Tag Editor, описан­ным в главе 2.

Создание стилей

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

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

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

А

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

□ переключатель Make Custom Style (class) позволяет создать новый стиле­вой класс. Если вы его включите, то в комбинированном списке Name сможете ввести имя создаваемого стилевого класса, например. cit;

□ переключатель Redefine HTML Tag позволяет создать стиль переопреде­ления тега. Если выбран этот переключатель, в раскрывающемся списке Tag вы сможете выбрать нужный тег;

□ переключатель Use CSS Selector позволяет создать стиль-селектор. Он же позволит вам создать псевдостиль гиперссылок или комбинированный стиль наподобие hi I или i. cit. Если включен этот переключатель, в комбинированном списке Selector может быть введено имя создаваемого комбинированного стиля или селектора. Развернув этот список, вы смо­жете выбрать нужный псевдостиль.

Вторая группа переключателей Define In задает, в какой таблице стилей бу­дет находиться вновь создаваемый стиль:

□ если выбран верхний переключатель, в расположенном правее раскры­вающемся списке вы сможете выбрать имя файла внешней таблицы сти­лей, привязанной к этой странице. Также вы можете выбрать пункт (New Style Sheet File), чтобы создать новую таблицу стилей. В последнем слу­чае после нажатия кнопки ОК на экране появится диалоговое окно со­хранения файла, где вы сможете ввести имя файла новой таблицы стилей;

□ если выбран переключатель This Document Only, стиль будет помещен во внутреннюю таблицу стилей.

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

Давайте предположим, что мы хотим переопределить стиль тега <р> и по­местить определение этого стиля в новую таблицу стилей, которую затем привяжем к новой Web-странице 10.2.htm. Для этого сначала выберите пе­
реключатель Redefine HTML Tag, затем — пункт р в списке Tag, далее — верхний переключатель в группе Define In и нажмите кнопку ОК. В диало­говом окне сохранения файла введите имя файла таблицы стилей 10.2.css и нажмите кнопку сохранения. Все, сам файл таблицы стилей нами создан.

После создания таблицы стилей на экране появится диалоговое окно CSS Style Definition. Это диалоговое окно очень велико и состоит из множества вкладок, которые мы рассмотрим последовательно, одна за другой. Эти вкладки выбираются в списке Category. Вкладка Туре этого окна, где зада­ются параметры шрифта текста, представлена на рис. 10.6.

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

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

А теперь мы подробно рассмотрим, что же предлагает нам Dreamweaver для создания нового стиля.

Однако прежде чем мы начнем изучать возможности Dreamweaver по созда­нию стилей, нужно сказать следующее. При создании стилей вам совсем не обязательно задавать все их атрибуты. Задайте только те, что реально вам необходимы. Незаданные же атрибуты автоматически принимают значение по умолчанию, как правило, normal или попе. Таким образом, чтобы вернуть атрибуту значение по умолчанию, просто удалите введенное значение.

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

Внимание!

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

Внимание!

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

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

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

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

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

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

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

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

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

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

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

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

В комбинированном списке 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 — только маленькими буквами;

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

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

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

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

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

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

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

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

Параметры фона

Параметры фона элемента страницы задаются на вкладке Background диало­гового окна CSS Style Definition. Эта вкладка показана на рис. 10.8.

Селектор цветов 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. Здесь же задаются параметры, применяемые к нетек­стовым элементам страницы, таким как графические изображения и табли­цы. Эта вкладка показана на рис. 10.9.

В комбинированном списке 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-обозреватель мо­жет переносить строки по пробелам, если они (строки) не будут поме­щаться в родительском элементе;

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

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

Раскрывающийся список 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 — заголовок таблицы.

Параметры размеров и размещения

Параметры, задающие размеры и размещение элемента страницы, задаются на вкладке Box диалогового окна CSS Style Definition. Эта вкладка показана на рис. 10.10.

Ширину и высоту элемента страницы вы можете задать в комбинированных списках Width и Height. Эти размеры могут быть заданы как абсолютные величины или процентное значение от ширины или высоты родительского элемента (например, самой страницы). Единица измерения, как обычно,

Выбирается в раскрывающемся списке, расположенном справа от соответст­вующего комбинированного списка. Чтобы вернуть Web-обозревателю управление размерами элемента страницы, выберите значение auto или во­обще очистите соответствующий комбинированный список.

Воспользовавшись раскрывающимся списком Float, вы до какой-то степени сможете "освободить" элемент страницы, вынеся его за пределы пресловуто­го "потока" текста. В этом списке доступны три пункта:

□ left — "прижимает" элемент к левому краю страницы. Все остальное со­держимое страницы "обтекает" "освобожденный" элемент;

□ right — "прижимает" элемент к правому краю страницы;

□ попе — оставляет элемент в "потоке" текста (поведение по умолчанию).

На рис. 10.11 показано графическое изображение, вынесенное за пределы "потока" текста и выровненное по правому краю (атрибут Float был уста­новлен в right).

■'JStc простейшая Web-страничка созданная в стандартном Блокноте и отображенная в Microsoft Internet Explorer.

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

В списке Clear доступны четыре пункта:

□ left - если "освобожденный" и текущий элементы должны находиться слева, то текущий элемент перемещается ниже "освобожденного";

□ right — то же самое, только справа;

□ both — то же самое, с обеих сторон;

□ попе — разрешает "освобожденному" и текущему элементам занять одну и ту же горизонтальную позицию (поведение по умолчанию).

На рис. 10.12 показано уже знакомое нам графическое изображение, выров­ненное по правому краю. Внизу вы видите текстовый абзац, находящийся в другой горизонтальной позиции. Значения атрибута Clear и у изображе­ния, и у абзаца должны быть установлены в right, иначе ничего не получится.

Это простейшая Web-страничка созданная в стандартном Блокнотам отображенная в Microsoft Internet Explorer.

Рис. 10.12. Графическое изображение и текстовый абзац, размещенные в разных горизонтальных позициях

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

А теперь мы с вами подходим к самому интересному.

Воспользовавшись особыми атрибутами стиля, вы можете задать отступы от границы элемента до содержащегося в нем текста. Это позволит вам обойтись без громоздких таблиц. Посмотрите, например, на рис. 10.13 — там для текста в абзаце заданы сантиметровые отступы слева и справа.

Величины отступов задаются в группе элементов управления Padding. В нее входят раскрывающиеся списки Тор (задает отступ сверху), Right (справа), Bottom (снизу) и Left (слева). Единицы измерения выбираются, как обычно, в раскрывающихся списках, расположенных справа. Учтите, что доступны только абсолютные единицы — процентов нет.

Группа элементов управления Margin аналогична группе Padding хотя бы тем, что в нее также входят раскрывающиеся списки Тор (задает величину отступа сверху), Right (справа), Bottom (снизу) и Left (слева). Однако, в от­личие от Padding, списки этой группы задают расстояние между границей элемента и другими элементами страницы. Единицы измерения выбираются также в раскрывающихся списках справа. В отличие от атрибутов группы Padding, здесь доступны относительные единицы измерения — проценты, т. е. вы можете задать отступ как процент от соответствующего размера ро­дителя.

Обе этих группы создают на странице свободное пространство. Но, если свободное пространство, полученное с помощью элементов группы Padding, принадлежит текущему элементу страницы, то созданное с помощью груп­пы Margin — не принадлежит ему, а точнее, принадлежит самой странице. Это можно использовать для получения различного рода эффектов, наподо­бие тех, что изображены на рис. 10.14 и 10.15.

На рис. 10.14 изображен текстовый абзац, расположенный на странице с отступами слева и справа, равными 1 см. Эти отступы были созданы с по­мощью элементов управления группы Margin. Сравните его с рис. 10.15, где эти же отступы были созданы с помощью группы Padding. (Для вашего удобства для этого абзаца был задан светло-серый фон.) Как видите, в пер­вом случае создаются отступы от границ абзаца до границ родителя (в на­шем случае — страницы), т. е. создаваемое свободное пространство не явля­ется частью абзаца. Во втором же случае создаваемые отступы находятся внутри абзаца, между его границами и его же содержимым; и свободное пространство, как видите, принадлежит самому абзацу.

Вы можете комбинировать эти два способа создания свободного простран­ства. Взгляните, например, на рис. 10.16. И попробуйте догадаться, какие атрибуты стиля были заданы в этом случае.

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

Пользуясь атрибутами стиля, задаваемыми на вкладке Box диалогового окна CSS Style Definition (см. рис. 10.10), вы можете в некоторой степени обой­тись без таблиц. В частности, если вы используете таблицы для задания от­ступа или отступов вокруг текста (иначе говоря, просветов), то теперь мо­жете от них отказаться. В самом деле, атрибуты стилей Margin и Padding предпочтительнее, так они как не обладают недостатками, в изобилии при­сущими таблицам.

Параметры рамки

Параметры, определяющие цвет и толщину рамки вокруг элемента страни­цы, задаются на вкладке Border диалогового окна CSS Style Definition. Эта вкладка показана на рис. 10.17.

Рамка рисуется по воображаемой границе элемента страницы (рис. 10.18). Значит, вы можете задать расстояние от границы до содержимого элемента, используя атрибуты группы Padding. А расстояние от границы до "соседей" этого элемента задается атрибутами Margin. Эти атрибуты задаются на вкладке Box диалогового окна CSS Style Definition (подробнее см. выше).

Группа комбинированных списков Style задает стиль линии рамки: будет ли она сплошная, точечная или вообще невидимая. Всего в каждом из этих списков доступны девять пунктов:

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

□ dotted — точечная линия;

□ dashed — пунктирная линия;

□ solid — сплошная линия;

□ double — двойная линия;

□ groove — "вдавленная" трехмерная линия;

□ ridge — "выпуклая" трехмерная линия;

□ inset — элемент страницы напоминает выпуклый трехмерный прямо­угольник (рис. 10.19);

□ outset — элемент страницы напоминает вдавленный трехмерный прямо­угольник (рис. 10.20).

Как видите, стандарт CSS предоставляет вам довольно много различных стилей для рамок. Пользуясь ими, вы можете создавать довольно интерес­ные вещи, например, подобие стандартных кнопок Windows. (Забегая впе­ред, можно отметить, что и вести себя они будут как обычные кнопки, если вы кое-что измените в их коде.)

Толщина рамки задается группой комбинированных списков Width. В эту группу входят списки Тор (задает толщину верхней стороны рамки), Right (правой), Bottom (нижней) и Left (левой). Вы можете ввести в любой из этих списков числовое значение и выбрать в расположенном правее рас­крывающемся списке единицу измерения, абсолютную или относительную.

Кроме того, в этих комбинированных списках доступны три пункта, задаю­щие предопределенные значения толщины рамки:

□ thin — тонкая рамка;

□ medium — средняя;

□ thick — толстая.

Описанным выше способом мы можем создавать линейки, не пользуясь, как раньше, для этой цели таблицами. Как видите, стили — самый ради­кальный способ преодолеть недостатки таблиц.

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

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

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

Параметры маркеров списка

Параметры, задающие вид маркеров списка, задаются на вкладке List диа­логового окна CSS Style Definition. Эта вкладка показана на рис. 10.22.

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

HTML предоставляет вам некоторые способы изменить маркер или нумера­цию позиций списка. CSS предлагает практически те же возможности.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Группа раскрывающихся списков 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 г, гг г

"Указующий перст", появляющийся при наведении курсора мыши на гиперссылки

Имейте, однако, в виду, что перед тем, как задавать форму курсора мыши для каких-то элементов вашей страницы, подумайте, нужно ли это. Скажем, если при наведении курсора мыши на текст он будет принимать форму пе­сочных часов, пользователь вас, мягко говоря, не поймет. Поэтому сначала уясните, что обозначает та или иная форма курсора. Не от нечего же делать 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. (Как вы уже догадались, это стилевые классы, и поэтому для их создания нужно выбрать переключатель Маке Custom Style (class) и ввести их имена в меню Name.) Для первого стиля задайте выравнивание текста посередине, а для второго — красный цвет текста. Сохраните их также во внешней таблице стилей 10.2.css.

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

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

Созданные нами стилевые классы. Заметьте, что стили, переопределяющие теги, здесь не отображаются, и это правильно.

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

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

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

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

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

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

Управление стилями

Осталось рассмотреть, как в Dreamweaver осуществляется управление сти­лями, в частности, изменение и удаление (как создавать новые стили, вы уже знаете).

В верхней части панели CSS Styles вы уже заметили два переключателя: Apply Styles и Edit Styles. Мы не рассматривали их, т. к. они пока что нам были не нужны. Но сейчас они пригодятся.

Как видите, по умолчанию включен переключатель Apply Styles, и список панели CSS Styles имеет вид, показанный на рис. 10.3. Говорят, что панель CSS Styles работает в режиме применения стилей. При этом вы можете щелкнуть по любому пункту этого списка, и Dreamweaver тотчас применит соответствующий стиль к выделенному вами элементу страницы. Но, к со­жалению, править стили при этом неудобно: вы не можете выбрать стиль без того, чтобы он не был применен. Что же делать?

Включите переключатель Edit Styles. Панель в этом случае примет такой вид, как на рис. 10.27. Она переключится в режим правки стилей, в котором очень удобно именно управлять стилями, не опасаясь, что услужливый Dreamweaver применит выбранный стиль к выделенному вами элементу страницы.

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

___________ | Jj

_____________ «alainm

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

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

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

Рис. 10.28. Кнопка Delete Style панели CSS Styles

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

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

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

Управление таблицами стилей

Кроме манипуляций над отдельными стилями, Dreamweaver предоставляет возможность управлять целыми таблицами стилей. Вы можете редактиро­вать их, создавать и удалять, а также присоединять к документу внешние таблицы и экспортировать внутренние таблицы во внешний файл.

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

□ нажмите кнопку Edit Style Sheet (рис. 10.29) в правом нижнем углу пане­ли CSS Styles;

□ дважды щелкните по свободному пространству списка стилей (он должен находиться в режиме правки стилей, т. е. должен быть включен переклю­чатель Apply Styles);

□ выберите пункт Edit Style Sheet в контекстном или дополнительном меню панели CSS Styles;

□ выберите пункт Edit Style Sheet в подменю CSS Styles контекстного меню окна документа или меню Text.

Рис. 10.29. Кнопка Edit Style Sheet панели CSS Styles

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

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

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

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

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

В диалоговом окне Link External Style Sheet имеется также группа переклю­чателей Add As. Переключатель Link (включен по умолчанию) выполняет обычную привязку таблицы стилей с помощью тега <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 выбранная таблица стилей будет тотчас привязана к странице.

Рис. 10.33. Кнопка Attach Style Sheet панели CSS Styles

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

Поддержка внутренних стилей

Вот мы и выяснили все о том, как Dreamweaver поддерживает внутренние и внешние таблицы стилей. А что же внутренние стили? А с внутренними стилями ситуация сложнее.

Дело в том, что Dreamweaver поддерживает внутренние стили не полностью. Он отображает на экране результаты их применения, но не предлагает ни­каких удобных инструментов для создания внутренних стилей и управления ими. По мнению автора, это самый большой и досадный его недостаток. Так что, если вы хотите привязать к какому-либо элементу страницы внут­ренний стиль, то вам придется править HTML-код вручную либо пользо­ваться диалоговым окном Tag Editor.

Как это сделать?

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

Сначала займемся курсивным текстом. Выделите его, щелкнув по нужной кнопке секции тегов, и выберите в контекстном меню пункт Edit Tag <название тега>. После этого выберите в списке, расположенном в левой части диалогового окна Tag Editor, пункт Style Sheet/Accessibility. Окно примет вид, показанный на рис. 10.34.

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

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

Поместите текстовый курсор в текст заголовка и выберите в контекстном меню пункт Edit Tag <Н1>... Результат этого действия показан на рис. 10.35.

Вставьте в тег <ні> атрибут style и присвойте ему значение color: #00ff00;. Должно получиться так, как показано нарис. 10.36.

Рис. 10.35. Мини-редактор HTML, отображающий HTML-код тега <Н1>

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

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

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

Таблицы стилей и шаблоны

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

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

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

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

Временные таблицы стилей

Еще одна из новых возможностей Dreamweaver MX — это поддержка так называемых временных таблиц стилей. Временные таблицы стилей действу­ют не все время, а только тогда, когда вы редактируете свою Web-страницу в среде Dreamweaver (таблицы времени редактированияЛ но не действуют в Web-обозревателе. Другие таблицы могут, наоборот, быть отключены, когда вы редактируете страницу в Dreamweaver (таблицы времени просмотраЛ а действовать только в Web-обозревателе. Иногда такие таблицы стилей бы­вают полезны.

Как же работать с временными таблицами стилей? Очень просто!

Выберите пункт Design Time Style Sheets в контекстном или дополнитель­ном меню панели CSS Styles. Этот пункт также доступен в подменю CSS Styles контекстного меню окна документа и меню Text. На экране появится диалоговое окно Design Time Style Sheets (рис. 10.37).

H elp

Рис. 10.37. Диалоговое окно Design Time Style Sheets

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

Time перечислены таблицы стилей времени просмотра. Точнее, не сами таблицы стилей, а имена файлов, в которых они сохранены.

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

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

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

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