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


Каскадные таблицы стилей


ГЛАВА 10 Каскадные таблицы стилей
ГЛАВА 10. Каскадные таблицы стилей Каскадные таблицы стилей CSS — это довольно позднее нововведение. Если сам HTML появился в 1989 году, то таблицы стилей — только в 1997. Мало того, таблицы с...
Параметры шрифта
Параметры шрифта Взгляните еще раз на Рисунок 10.6. На нем, как вы помните, показана вкладка Туре диалогового окна CSS Style Definition. На этой вкладке задаются параметры шрифта текста. Сам...
Рисунок 10 7 Комбинированный список
Рисунок 10.7. Комбинированный список Size, задающий размер шрифта В раскрывающемся списке, расположенном правее Size, выбирается единица измерения размера шрифта. Этот список доступен только...
Таблица 10 2 Единицы измерения поддерживаемые стандартом CSS
Таблица 10.2. Единицы измерения, поддерживаемые стандартом CSS Единица измерения Описание...
Параметры фона
Параметры фона Параметры фона элемента страницы задаются на вкладке Background диалогового окна CSS Style Definition. Эта вкладка показана на Рисунок 10.8....
Рисунок 10 8 Вкладка Background
Рисунок 10.8. Вкладка Background диалогового окна CSS Style Definition Селектор цветов Background Color задает цвет фона. Значение по умолчанию зависит от программы Web-обозревателя. В комб...
Параметры абзаца
Параметры абзаца Параметры текстового абзаца задаются на вкладке Block диалогового окна CSS Style Definition. Здесь же задаются параметры, применяемые к нетекстовым элементам страницы, таким...
Рисунок 10 9 Вкладка Block диалогового
Рисунок 10.9. Вкладка Block диалогового окна CSS Style Definition В комбинированном списке Word Spacing задается величина дополнительного пространства, помещаемого между словами. Введите нужн...
Параметры размеров и размещения
Параметры размеров и размещения Параметры, задающие размеры и размещение элемента страницы, задаются на вкладке Box диалогового окна CSS Style Definition. Эта вкладка показана на Рисунок 10....
Рисунок 10 10 Вкладка Box диалогового
Рисунок 10.10. Вкладка Box диалогового окна CSS Style Definition Воспользовавшись раскрывающимся списком Float, вы до какой-то степени сможете "освободить" элемент страницы, вынеся...
Рисунок 10 11 Графическое изображение
Рисунок 10.11. Графическое изображение, выровненное по правому краю Вы также можете задать, будет ли текущий элемент страницы отображаться с той же стороны и в той же горизонтальной позиции,...
Рисунок 10 12 Графическое изображение
Рисунок 10.12. Графическое изображение и текстовый абзац, размещенные в разных горизонтальных позициях Вам придется поэкспериментировать с этими двумя атрибутами стиля, чтобы получить нужный...
Рисунок 10 13 Текст с отступами заданными атрибутами стилей
Рисунок 10.13. Текст с отступами, заданными атрибутами стилей Обе этих группы создают на странице свободное пространство. Но, если свободное пространство, полученное с помощью элементов групп...
Рисунок 10 14 Текстовый абзац
Рисунок 10.14. Текстовый абзац с отступами, созданными с помощью группы атрибутов Margin...
Рисунок 10 15 Текстовый абзац
Рисунок 10.15. Текстовый абзац с отступами, созданными с помощью группы атрибутов Padding...
Рисунок 10 16 Текстовый абзац
Рисунок 10.16. Текстовый абзац с отступами, созданными с помощью групп атрибутов Padding и Margin Если вы хотите задать одинаковые отступы со всех сторон, то можете включить флажок Same for...
Параметры рамки
Параметры рамки Параметры, определяющие цвет и толщину рамки вокруг элемента страницы, задаются на вкладке Border диалогового окна CSS Style Definition. Эта вкладка показана на Рисунок 10.17....
Рисунок 10 17 Вкладка Border диалогового
Рисунок 10.17. Вкладка Border диалогового окна CSS Style Definition Рамка рисуется по воображаемой границе элемента страницы (Рисунок 10.18). Значит, вы можете задать расстояние от границы до...
Рисунок 10 18 Рамка вокруг абзаца
Рисунок 10.18. Рамка вокруг абзаца (фон абзаца для удобства сделан светло-серым) Группа комбинированных списков Style задает стиль линии рамки: будет ли она сплошная, точечная или вообще неви...
Рисунок 10 19 Элемент страницы
Рисунок 10.19. Элемент страницы, созданный с использованием стиля рамки inset...
Рисунок 10 20 Элемент страницы
Рисунок 10.20. Элемент страницы, созданный с использованием стиля рамки outset С помощью группы селекторов цветов Color задаются цвета каждой из сторон рамки. Если цвет не задан, рамка отобра...
Рисунок 10 21 Вертикальная линия слева от текста абзаца
Рисунок 10.21. Вертикальная линия слева от текста абзаца...
Параметры маркеров списка
Параметры маркеров списка Параметры, задающие вид маркеров списка, задаются на вкладке List диалогового окна CSS Style Definition. Эта вкладка показана на Рисунок 10.22. Как вы помните, HTML...
Рисунок 10 22 Вкладка List диалогового
Рисунок 10.22. Вкладка List диалогового окна CSS Style Definition В раскрывающемся списке Туре задается вид маркера или нумерации позиций списка. Здесь доступны девять пунктов: disc — мар...
Параметры местонахождения
Параметры местонахождения Вкладку Positioning диалогового окна CSS Style Definition мы рассмотрим позже, когда будем изучать свободно позиционируемые элементы. Сейчас атрибуты, устанавливаемы...
Дополнительные параметры
Дополнительные параметры Стандарт CSS предоставляет целый набор дополнительных атрибутов, задающих особые параметры элементов страницы. Эти параметры задаются на вкладке Extensions диалогового...
Рисунок 10 23 Вкладка Extensions
Рисунок 10.23. Вкладка Extensions диалогового окна CSS Style Definition Группа раскрывающихся списков Page Break пригодится, если вы планируете дать возможность пользователю распечатать вашу...
Таблица 10 3 Формы курсора мыши
Таблица 10.3. Формы курсора мыши, доступные для задания в раскрывающемся списке Cursor Пункт раскрывающегося списка Cursor...
Применение стилей
Применение стилей После того как вы зададите атрибуты стиля, нажмите кнопку ОК диалогового окна CSS Style Definition. Вы также можете нажать кнопку Apply, чтобы сохранить стилевые установки б...
Рисунок 10 24 Webстраница 10 2 htm после задания всех стилей
Рисунок 10.24. Web-страница 10.2.htm после задания всех стилей...
Рисунок 10 25 Панель CSS Styles после задания всех стилей
Рисунок 10.25. Панель CSS Styles после задания всех стилей Имейте в виду также следующее. Если вы задали стиль вида, скажем, H1. right (гибрид стилевого класса и переопределения тега), Dreamw...
Рисунок 10 26 Страница 10 2 htm
Рисунок 10.26. Страница 10.2.htm после применения стилевых классов centered и red Теперь поставьте текстовый курсор куда-нибудь на текст заголовка и взгляните на окно CSS-стилей. Dreamweaver...
Управление стилями
Управление стилями Осталось рассмотреть, как в Dreamweaver осуществляется управление стилями, в частности, изменение и удаление (как создавать новые стили, вы уже знаете). В верхней части па...
Рисунок 10 27 Панель CSS Styles в режиме правки стилей
Рисунок 10.27. Панель CSS Styles в режиме правки стилей Чтобы изменить необходимый стиль, выделите его и выберите пункт Edit контекстного или дополнительного меню. Также вы можете дважды щелк...
Рисунок 10 28 Кнопка Delete Style панели CSS Styles
Рисунок 10.28. Кнопка Delete Style панели CSS Styles Стиль удаляется сразу же, без всякого предупреждения. Форматирование всех элементов страницы, к которым был применен удаленный стиль, прив...
Введение в каскадные таблицы стилей
Введение в каскадные таблицы стилей Что же представляют собой каскадные таблицы стилей? Как они могут помочь нам? Как они создаются, в конце концов? И нужно ли их использовать?...
Управление таблицами стилей
Управление таблицами стилей Кроме манипуляций над отдельными стилями, Dreamweaver предоставляет возможность управлять целыми таблицами стилей. Вы можете редактировать их, создавать и удалять,...
Рисунок 10 29 Кнопка Edit Style Sheet панели CSS Styles
Рисунок 10.29. Кнопка Edit Style Sheet панели CSS Styles После этого на экране появится диалоговое окно Edit Style Sheet, показанное на Рисунок 10.30. Большую часть этого диалогового окна з...
Рисунок 10 30 Диалоговое окно Edit Style Sheet
Рисунок 10.30. Диалоговое окно Edit Style Sheet Левее списка находятся пять кнопок. Перечислим их по порядку. Кнопка Link позволяет привязать к странице внешнюю таблицу стилей. Если вы на н...
Рисунок 10 31 Диалоговое окно Link External Style Sheet
Рисунок 10.31. Диалоговое окно Link External Style Sheet В диалоговом окне Link External Style Sheet имеется также группа переключателей Add As. Переключатель Link (включен по умолчанию) выпо...
Рисунок 10 32 Содержимое внешней
Рисунок 10.32. Содержимое внешней таблицы стилей 10.2.сss в диалоговом окне Edit Style Sheet...
Рисунок 10 33 Кнопка Attach Style Sheet панели CSS Styles
Рисунок 10.33. Кнопка Attach Style Sheet панели CSS Styles Если вы считаете, что сделали удачную внутреннюю таблицу стилей, и хотите сохранить ее в отдельном файле как внешнюю (экспортировать...
Поддержка внутренних стилей
Поддержка внутренних стилей Вот мы и выяснили все о том, как Dreamweaver поддерживает внутренние и внешние таблицы стилей. А что же внутренние стили? А с внутренними стилями ситуация сложнее....
Рисунок 10 34 Диалоговое окно
Рисунок 10.34. Диалоговое окно Tag Editor (выбрана вкладка Style Sheet/Accessibility) Собственно определение тега вводится в поле ввода Style. Введите в него текст font-size: larger. И нажмит...
Рисунок 10 35 Миниредактор HTML
Рисунок 10.35. Мини-редактор HTML, отображающий HTML-код тега <Н1>...
Рисунок 10 36 Измененный HTMLкод в миниредакторе HTML
Рисунок 10.36. Измененный HTML-код в мини-редакторе HTML Теперь закройте мини-редактор, нажав клавишу <Enter>. (Нажатие клавиши <Esc> позволит вам отменить сделанные изменения.) И...
Таблицы стилей и шаблоны
Таблицы стилей и шаблоны А теперь представим такую ситуацию. Вы прочитали о замечательных возможностях таблиц стилей и решили переделать свой сайт Sample site 3 с использованием таблиц стилей...
Временные таблицы стилей
Временные таблицы стилей Еще одна из новых возможностей Dreamweaver MX — это поддержка так называемых временных таблиц стилей. Временные таблицы стилей действуют не все время, а только тогда,...
Рисунок 10 37 Диалоговое окно Design Time Style Sheets
Рисунок 10.37. Диалоговое окно Design Time Style Sheets В этом окне находятся два списка. В списке Show Only at Design Time перечислены таблицы стилей времени редактирования. В списке Hide at...
Рисунок 10 38 Страница 10 2 htm
Рисунок 10.38. Страница 10.2.htm, для которой были заданы временные таблицы, в окне документа Dreamweaver и в окне Web-обозревателя...
Недостатки таблиц стилей и их преодоление
Недостатки таблиц стилей и их преодоление Настала пора поговорить о недостатках таблиц стилей. Всего их два: сравнительная "молодость" стандарта CSS, из-за которой его поддерживаю...
Рисунок 10 39 Диалоговое окно
Рисунок 10.39. Диалоговое окно Convert to 3.0 Browser Compatible Чтобы преобразовать страницу, использующую стили, в совместимую со старыми программами, включите один из переключателей в груп...
Рисунок 10 40 Результат преобразования
Рисунок 10.40. Результат преобразования страницы 10.2.htm (на переднем плане)...
Что дальше?
Что дальше? Вот мы и познакомились с таблицами стилей CSS. В качестве домашнего задания автор советует вам сделать что-нибудь конкретное, чтобы узнать их еще ближе, так сказать, "подержа...
Зачем они нужны
Зачем они нужны В конце предыдущей главы был приведен пример, когда таблицы стилей могут нам здорово помочь. Вспомним его еще раз. Вы создали сложный Web-сайт с большим количеством объемисты...
Рисунок 10 1 Справка по атрибуту color в панели Reference
Рисунок 10.1. Справка по атрибуту color в панели Reference Book этой панели выберите пункт O'REILLY CSS Reference. Чтобы просмотреть справочную информацию по какому-либо атрибуту, достаточно...
Три способа задания стиля
Три способа задания стиля Всего стандарт CSS определяет три способа задания стиля для элемента страницы. Давайте перечислим их и дадим краткое описание каждому способу. Внешняя (или привяз...
Таблица стилей в этом случае имеет
Таблица стилей в этом случае имеет тот же самый формат, что и внешняя, но располагается в секции заголовка той же Web-страницы и помещается внутрь специального тега <STYLE>. Внутренни...
Почему "каскадные"
Почему "каскадные" В одной и той же Web-странице могут использоваться и внутренние стили, и таблицы стилей обоих видов: внешние и внутренняя. При этом "в работе" будут все...
Рисунок 10 2 Webстраница использующая стили
Рисунок 10.2. Web-страница, использующая стили Так что же мы получим в результате? Во внешней таблице стилей для тега <HI> задаются шрифт размером 24 пункта и выравнивание текста пара...
Псевдостили гиперссылок
Псевдостили гиперссылок А теперь мы узнаем еще об одной интересной возможности, предлагаемой Web-дизайнеру таблицами стилей. Это псевдостили гиперссылок, позволяюие в достаточно широких преде...
Таблица 10 1 Псевдостили гиперссылок
Таблица 10.1. Псевдостили гиперссылок Псевдостиль Описание A: link Пр...
Работа с таблицами стилей в Dreamweaver
Работа с таблицами стилей в Dreamweaver Вы уже много узнали о таблицах стилей. И, наверно, вас уже давно мучает вопрос: а что же Dreamweaver? Поддерживает ли он работу с таблицами стилей? И ес...
Создание стилей
Создание стилей Перед тем как начать экспериментировать со стилями, откройте Web-страницу 1.1.htm, созданную нами в самом начале изучения Dreamweaver. Над ее содержимым мы и будем издеваться....
Рисунок 10 3 Панель CSS Styles
Рисунок 10.3. Панель CSS Styles Чтобы создать новый стиль, выберите пункт New CSS Style контекстного или дополнительного меню либо нажмите одноименную кнопку (Рисунок 10.4), расположенную в п...
Рисунок 10 4 Кнопка New CSS Style
Рисунок 10.4. Кнопка New CSS Style...
Рисунок 10 5 Диалоговое окно New CSS Style
Рисунок 10.5. Диалоговое окно New CSS Style...
Определение стиля
Определение стиля Группа переключателей Туре задает элементы страницы, к которым будет применен вновь создаваемый стиль: переключатель Make Custom Style (class) позволяет создать новый сти...
Рисунок 10 6 Вкладка Type диалогового окна New CSS Style
Рисунок 10.6.Вкладка Type диалогового окна New CSS Style Введя нужные данные, нажмите кнопку ОК для создания стиля или Cancel — для отказа от этого. Давайте предположим, что мы хотим переопр...
Внимание
Внимание Далеко не все программы Web-обозревателей поддерживают все атрибуты CSS. Поэтому перед тем, как применить тот или иной атрибут, справьтесь в руководстве по CSS, поставляемым с Dr...
Внимание
Внимание Dreamweaver не всегда корректно отображает элементы страницы, к которым было применено специальное CSS-форматирование. Чтобы увидеть правильные результаты использования того или...








- Начало -