• Компьютерная литература
• Статьи
• Расширенный поиск

Создание внутренних стилей страницы

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

Для изменения стиля выделенных объектов можно использовать раскрывающийся список Стиль (Style), расположенный на панели инструментов Форматирование (Formatting), который содержит стили, предлагаемые программой FrontPage. Кроме того, для форматирования отдельных элементов страницы можно создать пользовательские внутренние стили. Эти стили будут добавлены в нижнюю часть списка Стиль, и вы сможете их использовать для форматирования текста текущей страницы Web-узла, для которой эти стили созданы.

Рассмотрим создание стилей для оформления заголовка первого уровня и маркированного списка. Выполните следующие действия:

1. Откройте страницу Web-узла, для которой хотите создать внутренние стили.
2. В меню Формат (Format) выберите команду Стиль (Style). Открывается диалоговое окно Стиль (рис. 20.36), содержащее список стилей.
3. Для создания нового стиля нажмите кнопку Создать (New). Открывается диалоговое окно Создание стиля (New Style) (рис. 20.37).
4. В поле Имя (Name) введите имя создаваемого стиля. Сначала создадим стиль для форматирования заголовка первого уровня, который будет иметь оранжевый цвет. Введите в поле Имя имя hl.orange.

5. Нажмите кнопку Формат (Format), расположенную в нижней части окна. Открывается меню кнопки, содержащее 5 команд. При выборе этих команд открываются диалоговые окна Шрифт (Font), Абзац (Paragraph), Границы и заливка (Border and Shading), Список (Bullets and Numbering) и Положение (Position), соответственно, позволяющие настроить параметры форматирования.
6. Выберите в меню кнопки Формат команду Шрифт (Шрифт).
7. В открывшемся диалоговом окне Шрифт выполните следующие действия:
   • Из списка Шрифт выберите шрифт, который хотите использовать в оформлении заголовка
   • Используя список Начертание (Font style), задайте полужирное начертание, выбрав значение Полужирный (Bold)
   • Установите размер шрифта, выбрав, например, значение 18pt
   • Воспользовавшись списком Цвет (Color), выберите из палитры оранжевый цвет для отображения заголовка
   • Установив требуемые параметры, нажмите кнопку ОК.
8. Вы возвращаетесь в диалоговое окно Создание стиля (New Style), в области Описание (Description) которого появилось описание параметров созданного стиля (см. рис. 20.37). Нажмите кнопку ОК.

В списке Стили (Styles) диалогового окна Стиль (Style) появилось наименование стиля hi.orange, созданного нами для оформления заголовка. Создадим теперь стиль для оформления маркированного списка.

9. В диалоговом окне Стиль нажмите кнопку Создать (New).

10. В поле Имя (Name) диалогового окна Создание стиля (New Style) введите имя создаваемого стиля ul.blue. Левая часть имени указывает, что создается стиль для оформления маркированного списка, правая часть — наименование класса стиля.
11. В меню кнопки Формат (Format) выберите команду Шрифт (Font). В открывшемся диалоговом окне Шрифт задайте шрифт, его размер и цвет. Установив параметры, закройте окно, нажав кнопку ОК.
12. Для задания типа маркера в меню кнопки Формат (Format) выберите команду Нумерация (Numbering) и в открывшемся диалоговом окне Список (Bullets and Numbering) подберите подходящий тип. Затем закройте окно.
13. Параметры маркированного списка заданы. Закройте диалоговое окно Создание стиля (New Style), нажав кнопку ОК.
14. В диалоговом окне Стиль содержатся наименования обоих созданных нами стилей (рис. 20.38). Закройте окно.

Теперь для форматирования текста Web-страницы с помощью созданных стилей необходимо нажать кнопку раскрывающегося списка Стиль на панели форматирования и в его нижней части выбрать необходимое значение.

Теги стилей абзацев

При создании внутренней таблицы стилей в левой части названия стиля мы указывали символы, определяющие тег, предназначенный для форматирования текста. Для заголовка первого уровня это были символы hi, для маркированного списка — ul. При создании внутренних стилей вам потребуются теги, используемые в форматировании абзацев.

Встроенные стили

Работая с программой FrontPage, вы, наверное, обращали внимание, что в диалоговых окнах свойств некоторых объектов Web-страницы присутствует кнопка Стиль (Style), позволяющая переопределить стиль. При нажатии на эту кнопку открывается диалоговое окно Изменение стиля (Modify Style) (рис. 20.39), создающее встроенный стиль. Для задания стиля в окне Стиль можно использовать классы внутренних таблиц стилей, созданные для этой Web-страницы, а также соответствующие диалоговые окна, открываемые при выборе команд кнопки Формат (Format).

Рассмотрим последовательность действий для применения встроенного стиля при форматировании маркированного списка:

1. Выделите на Web-странице маркированный список.
2. Нажмите правую кнопку мыши и выберите в контекстном меню команду Свойства списка (List Properties).
3. В открывшемся одноименном диалоговом окне нажмите кнопку Стиль (Style).
4. Для задания стиля вы можете использовать классы внутренней таблицы стилей. В этом случае из списка Класс (Class) выберите наименование класса для оформления маркированного списка.
5. Используя меню кнопки Формат (Format), определите свойства выделенного элемента.
6. Нажмите кнопку ОК.