Использование пакета Dreamweaver

ГЛАВА 10 Каскадные таблицы стилей
ГЛАВА 10. Каскадные таблицы стилей Каскадные таблицы стилей CSS — это довольно позднее нововведение. Если сам HTML появился в 1989 году, то таблицы стилей — только в 1997. Мало того, таблицы с
Параметры шрифта
Параметры шрифта Взгляните еще раз на На нем, как вы помните, показана вкладка Туре диалогового окна CSS Style Definition. На этой вкладке задаются параметры шрифта текста. Сам
Комбинированный список
Комбинированный список Size, задающий размер шрифта В раскрывающемся списке, расположенном правее Size, выбирается единица измерения размера шрифта. Этот список доступен только
Таблица 10 2 Единицы измерения поддерживаемые стандартом CSS
Таблица 10.2. Единицы измерения, поддерживаемые стандартом CSS Единица измерения Описание
Параметры фона



Параметры фона Параметры фона элемента страницы задаются на вкладке Background диалогового окна CSS Style Definition. Эта вкладка показана на br> Вкладка Background
Вкладка Background диалогового окна CSS Style Definition Селектор цветов Background Color задает цвет фона. Значение по умолчанию зависит от программы Web-обозревателя. В комб
Параметры абзаца
Параметры абзаца Параметры текстового абзаца задаются на вкладке Block диалогового окна CSS Style Definition. Здесь же задаются параметры, применяемые к нетекстовым элементам страницы, таким
Вкладка Block диалогового
Вкладка Block диалогового окна CSS Style Definition В комбинированном списке Word Spacing задается величина дополнительного пространства, помещаемого между словами. Введите нужн
Параметры размеров и размещения
Параметры размеров и размещения Параметры, задающие размеры и размещение элемента страницы, задаются на вкладке Box диалогового окна CSS Style Definition. Эта вкладка показана на br> Вкладка Box диалогового

Вкладка Box диалогового окна CSS Style Definition Воспользовавшись раскрывающимся списком Float, вы до какой-то степени сможете "освободить" элемент страницы, вынеся
Графическое изображение
Графическое изображение, выровненное по правому краю Вы также можете задать, будет ли текущий элемент страницы отображаться с той же стороны и в той же горизонтальной позиции,
Графическое изображение
Графическое изображение и текстовый абзац, размещенные в разных горизонтальных позициях Вам придется поэкспериментировать с этими двумя атрибутами стиля, чтобы получить нужный
Текст с отступами заданными атрибутами стилей
Текст с отступами, заданными атрибутами стилей Обе этих группы создают на странице свободное пространство. Но, если свободное пространство, полученное с помощью элементов групп
Текстовый абзац
Текстовый абзац с отступами, созданными с помощью группы атрибутов Margin
Текстовый абзац

Текстовый абзац с отступами, созданными с помощью группы атрибутов Padding
Текстовый абзац
Текстовый абзац с отступами, созданными с помощью групп атрибутов Padding и Margin Если вы хотите задать одинаковые отступы со всех сторон, то можете включить флажок Same for
Параметры рамки
Параметры рамки Параметры, определяющие цвет и толщину рамки вокруг элемента страницы, задаются на вкладке Border диалогового окна CSS Style Definition. Эта вкладка показана на br> Вкладка Border диалогового
Вкладка Border диалогового окна CSS Style Definition Рамка рисуется по воображаемой границе элемента страницы (Значит, вы можете задать расстояние от границы до
Рамка вокруг абзаца
Рамка вокруг абзаца (фон абзаца для удобства сделан светло-серым) Группа комбинированных списков Style задает стиль линии рамки: будет ли она сплошная, точечная или вообще неви
Элемент страницы

Элемент страницы, созданный с использованием стиля рамки inset
Элемент страницы
Элемент страницы, созданный с использованием стиля рамки outset С помощью группы селекторов цветов Color задаются цвета каждой из сторон рамки. Если цвет не задан, рамка отобра
Вертикальная линия слева от текста абзаца
Вертикальная линия слева от текста абзаца
Параметры маркеров списка
Параметры маркеров списка Параметры, задающие вид маркеров списка, задаются на вкладке List диалогового окна CSS Style Definition. Эта вкладка показана на Как вы помните, HTML
Вкладка List диалогового
Вкладка List диалогового окна CSS Style Definition В раскрывающемся списке Туре задается вид маркера или нумерации позиций списка. Здесь доступны девять пунктов: disc — мар
Параметры местонахождения

Параметры местонахождения Вкладку Positioning диалогового окна CSS Style Definition мы рассмотрим позже, когда будем изучать свободно позиционируемые элементы. Сейчас атрибуты, устанавливаемы
Дополнительные параметры
Дополнительные параметры Стандарт CSS предоставляет целый набор дополнительных атрибутов, задающих особые параметры элементов страницы. Эти параметры задаются на вкладке Extensions диалогового
Вкладка Extensions
Вкладка Extensions диалогового окна CSS Style Definition Группа раскрывающихся списков Page Break пригодится, если вы планируете дать возможность пользователю распечатать вашу
Таблица 10 3 Формы курсора мыши
Таблица 10.3. Формы курсора мыши, доступные для задания в раскрывающемся списке Cursor Пункт раскрывающегося списка Cursor
Применение стилей
Применение стилей После того как вы зададите атрибуты стиля, нажмите кнопку ОК диалогового окна CSS Style Definition. Вы также можете нажать кнопку Apply, чтобы сохранить стилевые установки б
Webстраница 10 2 htm после задания всех стилей

Web-страница 10.2.htm после задания всех стилей
Панель CSS Styles после задания всех стилей
Панель CSS Styles после задания всех стилей Имейте в виду также следующее. Если вы задали стиль вида, скажем, H1. right (гибрид стилевого класса и переопределения тега), Dreamw
Страница 10 2 htm
Страница 10.2.htm после применения стилевых классов centered и red Теперь поставьте текстовый курсор куда-нибудь на текст заголовка и взгляните на окно CSS-стилей. Dreamweaver
Управление стилями
Управление стилями Осталось рассмотреть, как в Dreamweaver осуществляется управление стилями, в частности, изменение и удаление (как создавать новые стили, вы уже знаете). В верхней части па
Панель CSS Styles в режиме правки стилей
Панель CSS Styles в режиме правки стилей Чтобы изменить необходимый стиль, выделите его и выберите пункт Edit контекстного или дополнительного меню. Также вы можете дважды щелк
Кнопка Delete Style панели CSS Styles

Кнопка Delete Style панели CSS Styles Стиль удаляется сразу же, без всякого предупреждения. Форматирование всех элементов страницы, к которым был применен удаленный стиль, прив
Введение в каскадные таблицы стилей
Введение в каскадные таблицы стилей Что же представляют собой каскадные таблицы стилей? Как они могут помочь нам? Как они создаются, в конце концов? И нужно ли их использовать?
Управление таблицами стилей
Управление таблицами стилей Кроме манипуляций над отдельными стилями, Dreamweaver предоставляет возможность управлять целыми таблицами стилей. Вы можете редактировать их, создавать и удалять,
Кнопка Edit Style Sheet панели CSS Styles
Кнопка Edit Style Sheet панели CSS Styles После этого на экране появится диалоговое окно Edit Style Sheet, показанное на Большую часть этого диалогового окна з
Диалоговое окно Edit Style Sheet
Диалоговое окно Edit Style Sheet Левее списка находятся пять кнопок. Перечислим их по порядку. Кнопка Link позволяет привязать к странице внешнюю таблицу стилей. Если вы на н
Диалоговое окно Link External Style Sheet

Диалоговое окно Link External Style Sheet В диалоговом окне Link External Style Sheet имеется также группа переключателей Add As. Переключатель Link (включен по умолчанию) выпо
Содержимое внешней
Содержимое внешней таблицы стилей 10.2.сss в диалоговом окне Edit Style Sheet
Кнопка Attach Style Sheet панели CSS Styles
Кнопка Attach Style Sheet панели CSS Styles Если вы считаете, что сделали удачную внутреннюю таблицу стилей, и хотите сохранить ее в отдельном файле как внешнюю (экспортировать
Поддержка внутренних стилей
Поддержка внутренних стилей Вот мы и выяснили все о том, как Dreamweaver поддерживает внутренние и внешние таблицы стилей. А что же внутренние стили? А с внутренними стилями ситуация сложнее.
Диалоговое окно
Диалоговое окно Tag Editor (выбрана вкладка Style Sheet/Accessibility) Собственно определение тега вводится в поле ввода Style. Введите в него текст font-size: larger. И нажмит
Миниредактор HTML

Мини-редактор HTML, отображающий HTML-код тега Н1
Измененный HTMLкод в миниредакторе HTML
Измененный HTML-код в мини-редакторе HTML Теперь закройте мини-редактор, нажав клавишу Enter. (Нажатие клавиши Esc позволит вам отменить сделанные изменения.) И
Таблицы стилей и шаблоны
Таблицы стилей и шаблоны А теперь представим такую ситуацию. Вы прочитали о замечательных возможностях таблиц стилей и решили переделать свой сайт Sample site 3 с использованием таблиц стилей
Временные таблицы стилей
Временные таблицы стилей Еще одна из новых возможностей Dreamweaver MX — это поддержка так называемых временных таблиц стилей. Временные таблицы стилей действуют не все время, а только тогда,
Диалоговое окно Design Time Style Sheets
Диалоговое окно Design Time Style Sheets В этом окне находятся два списка. В списке Show Only at Design Time перечислены таблицы стилей времени редактирования. В списке Hide at
Страница 10 2 htm

Страница 10.2.htm, для которой были заданы временные таблицы, в окне документа Dreamweaver и в окне Web-обозревателя
Недостатки таблиц стилей и их преодоление
Недостатки таблиц стилей и их преодоление Настала пора поговорить о недостатках таблиц стилей. Всего их два: сравнительная "молодость" стандарта CSS, из-за которой его поддерживаю
Диалоговое окно
Диалоговое окно Convert to 3.0 Browser Compatible Чтобы преобразовать страницу, использующую стили, в совместимую со старыми программами, включите один из переключателей в груп
Результат преобразования
Результат преобразования страницы 10.2.htm (на переднем плане)
Что дальше?
Что дальше? Вот мы и познакомились с таблицами стилей CSS. В качестве домашнего задания автор советует вам сделать что-нибудь конкретное, чтобы узнать их еще ближе, так сказать, "подержа
Зачем они нужны

Зачем они нужны В конце предыдущей главы был приведен пример, когда таблицы стилей могут нам здорово помочь. Вспомним его еще раз. Вы создали сложный Web-сайт с большим количеством объемисты
Справка по атрибуту color в панели Reference
Справка по атрибуту color в панели Reference Book этой панели выберите пункт O'REILLY CSS Reference. Чтобы просмотреть справочную информацию по какому-либо атрибуту, достаточно
Три способа задания стиля
Три способа задания стиля Всего стандарт CSS определяет три способа задания стиля для элемента страницы. Давайте перечислим их и дадим краткое описание каждому способу. Внешняя (или привяз
Таблица стилей в этом случае имеет
Таблица стилей в этом случае имеет тот же самый формат, что и внешняя, но располагается в секции заголовка той же Web-страницы и помещается внутрь специального тега STYLE. Внутренни
Почему "каскадные"
Почему "каскадные" В одной и той же Web-странице могут использоваться и внутренние стили, и таблицы стилей обоих видов: внешние и внутренняя. При этом "в работе" будут все
Webстраница использующая стили

Web-страница, использующая стили Так что же мы получим в результате? Во внешней таблице стилей для тега HI задаются шрифт размером 24 пункта и выравнивание текста пара
Псевдостили гиперссылок
Псевдостили гиперссылок А теперь мы узнаем еще об одной интересной возможности, предлагаемой Web-дизайнеру таблицами стилей. Это псевдостили гиперссылок, позволяюие в достаточно широких преде
Таблица 10 1 Псевдостили гиперссылок
Таблица 10.1. Псевдостили гиперссылок Псевдостиль Описание A: link Пр
Работа с таблицами стилей в Dreamweaver
Работа с таблицами стилей в Dreamweaver Вы уже много узнали о таблицах стилей. И, наверно, вас уже давно мучает вопрос: а что же Dreamweaver? Поддерживает ли он работу с таблицами стилей? И ес

Создание стилей
Создание стилей Перед тем как начать экспериментировать со стилями, откройте Web-страницу 1.1.htm, созданную нами в самом начале изучения Dreamweaver. Над ее содержимым мы и будем издеваться.
Панель CSS Styles
Панель CSS Styles Чтобы создать новый стиль, выберите пункт New CSS Style контекстного или дополнительного меню либо нажмите одноименную кнопку (расположенную в п
Кнопка New CSS Style
Кнопка New CSS Style
Диалоговое окно New CSS Style
Диалоговое окно New CSS Style
Определение стиля
Определение стиля Группа переключателей Туре задает элементы страницы, к которым будет применен вновь создаваемый стиль: переключатель Make Custom Style (class) позволяет создать новый сти

Вкладка Type диалогового окна New CSS Style
Вкладка Type диалогового окна New CSS Style Введя нужные данные, нажмите кнопку ОК для создания стиля или Cancel — для отказа от этого. Давайте предположим, что мы хотим переопр
Внимание
Внимание Далеко не все программы Web-обозревателей поддерживают все атрибуты CSS. Поэтому перед тем, как применить тот или иной атрибут, справьтесь в руководстве по CSS, поставляемым с Dr
Внимание
Внимание Dreamweaver не всегда корректно отображает элементы страницы, к которым было применено специальное CSS-форматирование. Чтобы увидеть правильные результаты использования того или