| |
Создание внутренних стилей страницы
Внешняя таблица стилей определяет оформление всех элементов страницы или даже всего Web-узла. Но это не значит, что если вы захотите изменить форматирование отдельных элементов страницы, к которой применена внешняя таблица стилей, то ничего не сможете сделать.
Для изменения стиля выделенных объектов можно использовать раскрывающийся список Стиль (Style), расположенный на панели инструментов Форматирование (Formatting), который содержит стили, предлагаемые программой FrontPage. Кроме того, для форматирования отдельных элементов страницы можно создать пользовательские внутренние стили. Эти стили будут добавлены в нижнюю часть списка Стиль, и вы сможете их использовать для форматирования текста текущей страницы Web-узла, для которой эти стили созданы.
Рассмотрим создание стилей для оформления заголовка первого уровня и маркированного списка. Выполните следующие действия:
1. Откройте страницу Web-узла, для которой хотите создать внутренние стили.
2. В меню Формат (Format) выберите команду Стиль (Style). Открывается диалоговое окно Стиль (рис. 20.36), содержащее список стилей.
3. Для создания нового стиля нажмите кнопку Создать (New). Открывается диалоговое окно Создание стиля (New Style) (рис. 20.37).
4. В поле Имя (Name) введите имя создаваемого стиля. Сначала создадим стиль для форматирования заголовка первого уровня, который будет иметь оранжевый цвет. Введите в поле Имя имя hl.orange.
Замечание
Символы hi в имени указывают, что стиль предназначен для форматирования заголовка первого уровня. Правая часть в имени является наименованием класса создаваемого стиля. Например, для оформления Web-страницы вы можете создать несколько стилей, которые имеют одинаковые параметры, но задают разные цвета. В этом случае вы создаете несколько классов для форматирования одного и того же элемента.
Рис. 20.36. Диалоговое окно Стиль
5. Нажмите кнопку Формат (Format), расположенную в нижней части окна. Открывается меню кнопки, содержащее 5 команд. При выборе этих команд открываются диалоговые окна Шрифт (Font), Абзац (Paragraph), Границы и заливка (Border and Shading), Список (Bullets and Numbering) и Положение (Position), соответственно, позволяющие настроить параметры форматирования.
6. Выберите в меню кнопки Формат команду Шрифт (Шрифт).
7. В открывшемся диалоговом окне Шрифт выполните следующие действия:
8. Вы возвращаетесь в диалоговое окно Создание стиля (New Style), в области Описание (Description) которого появилось описание параметров созданного стиля (см. рис. 20.37). Нажмите кнопку ОК.
В списке Стили (Styles) диалогового окна Стиль (Style) появилось наименование стиля hi.orange, созданного нами для оформления заголовка. Создадим теперь стиль для оформления маркированного списка.
9. В диалоговом окне Стиль нажмите кнопку Создать (New).
Рис. 20.37. Диалоговое окно Создание стиля; в нем отображены параметры созданного стиля 10. В поле Имя (Name) диалогового окна Создание стиля (New Style) введите имя создаваемого стиля ul.blue. Левая часть имени указывает, что создается стиль для оформления маркированного списка, правая часть — наименование класса стиля. Теперь для форматирования текста Web-страницы с помощью созданных стилей необходимо нажать кнопку раскрывающегося списка Стиль на панели форматирования и в его нижней части выбрать необходимое значение. Замечание Для оформления Web-страницы можно одновременно использовать как внешнюю, так и внутреннюю таблицу стилей. Внешняя таблица стилей применяется для оформления всего Web-узла, а внутренняя — для переопределения стиля отдельных элементов страницы. Рис. 20.38. Диалоговое окно Стиль содержит наименования созданных стилей Теги стилей абзацев При создании внутренней таблицы стилей в левой части названия стиля мы указывали символы, определяющие тег, предназначенный для форматирования текста. Для заголовка первого уровня это были символы hi, для маркированного списка — ul. При создании внутренних стилей вам потребуются теги, используемые в форматировании абзацев. Замечание Рассмотрение тегов выходит за рамки данной книги. Мы приведем только символы, которые вы должны использовать в наименовании создаваемого стиля: Встроенные стили Работая с программой FrontPage, вы, наверное, обращали внимание, что в диалоговых окнах свойств некоторых объектов Web-страницы присутствует кнопка Стиль (Style), позволяющая переопределить стиль. При нажатии на эту кнопку открывается диалоговое окно Изменение стиля (Modify Style) (рис. 20.39), создающее встроенный стиль.
11. В меню кнопки Формат (Format) выберите команду Шрифт (Font). В открывшемся диалоговом окне Шрифт задайте шрифт, его размер и цвет. Установив параметры, закройте окно, нажав кнопку ОК.
12. Для задания типа маркера в меню кнопки Формат (Format) выберите команду Нумерация (Numbering) и в открывшемся диалоговом окне Список (Bullets and Numbering) подберите подходящий тип. Затем закройте окно.
13. Параметры маркированного списка заданы. Закройте диалоговое окно Создание стиля (New Style), нажав кнопку ОК.
14. В диалоговом окне Стиль содержатся наименования обоих созданных нами стилей (рис. 20.38). Закройте окно.
Рис. 20.39. Диалоговое окно Изменение стиля Рассмотрим последовательность действий для применения встроенного стиля при форматировании маркированного списка: 1. Выделите на Web-странице маркированный список.
2. Нажмите правую кнопку мыши и выберите в контекстном меню команду Свойства списка (List Properties).
3. В открывшемся одноименном диалоговом окне нажмите кнопку Стиль (Style).
4. Для задания стиля вы можете использовать классы внутренней таблицы стилей. В этом случае из списка Класс (Class) выберите наименование класса для оформления маркированного списка.
5. Используя меню кнопки Формат (Format), определите свойства выделенного элемента.
6. Нажмите кнопку ОК.
| |
