Форматирование контента и использование каскадных таблиц стилей в MS Frontpage

Теоретическое введение

Форматирование текста

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

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

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

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

Чтобы создать встроенную каскадную таблицу стилей в программе FrontPage, выберите пункт Стиль в меню Формат и затем определите свои собственные стили. Ваши определения сохраняются в HTML-коде данной страницы.

Чтобы создать внешнюю каскадную таблицу стилей в программе FrontPage, выберите тип CSS среди вариантов, которые имеются во вкладке Таблицы стилей диалогового окна Шаблоны страниц, щелкните на кнопке ОК, чтобы создать CSS-файл, и затем определите свои стили в этом файле.

Чтобы присоединить таблицу стилей в программе FrontPage, выберите пункт Связи с таблицами стилей в меню Формат и перейдите к CSS-файлу на вашем компьютере или (если вы подсоединены к интернету) в сети. Первоначально каскадные таблицы стилей разработал консорциум W3C (World Wide Web Consortium).

Практические задания

Форматирование текста

Откройте веб-узел "Всё для сада", разрабатываемый в предыдущей работе.

Откройте файл index.htm (домашняя страница) в окне просмотра и редактирования страниц (рис. 9.1).

увеличить изображение
Рис. 9.1. Веб-узел компании "Всё для сада"

Выделите и удалите три блока комментариев, чтобы сделать страницу более удобной для чтения.

Размеры шрифтов выражаются в программе FrontPage двумя способами: в пунктах [пт] (как в других приложениях, таких как Word и Excel) и в единицах от 1 до 7.

В первом абзаце выделите имя компании. На панели форматирования в раскрывающемся списке Размер (рис. 9.2) увеличьте размер шрифта выделенного фрагмента с 3 (12 пт) до 4 (14 пт).

Рис. 9.2. Раскрывающийся список Размер

Выделите последнее предложение в первом абзаце (начинается с "Если вы заглянули...") и щелкните на кнопке Курсив, чтобы получить курсивное начертание текста (рис. 9.3).

увеличить изображение
Рис. 9.3. Текст, выделенный курсивом

Откройте файл services.htm (страница "Учебные курсы") в режиме просмотра страниц. Текст на этой странице представлен шрифтом, отличающимся от шрифта по умолчанию, используемого на домашней странице (рис. 9.4).

увеличить изображение
Рис. 9.4. Страница services.htm

Выделите первый абзац. Щелкните на стрелке справа от поля Шрифти выберите в раскрывающемся списке шрифт Times New Roman. Размер шрифта все еще отличается от размера шрифта на домашней странице. Продолжая работать с выделенным первым абзацем, нажмите клавиши Ctrl + Пробел, чтобы восстановить исходное форматирование страницы. Повторите этот шаг для каждого из трех абзацев с описанием курсов (рис. 9.5).

увеличить изображение
Рис. 9.5. Страница services.htm с измененным шрифтом и размером текста

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

увеличить изображение
Рис. 9.6. Измененный цвет текста

Откройте файл serv01.htm (страница Весенняя радость) в окне просмотра и редактирования страниц. Отметим, что шрифт на этой странице отличается от используемого по умолчанию шрифта на домашней странице.

Нажмите клавиши Ctrl + А, чтобы выделить все содержимое страницы. В раскрывающемся списке шрифтов выберите шрифт по умолчанию. Шрифт всех элементов данной страницы изменится на используемый по умолчанию шрифт.

Выделите абзац, где приводятся сведения об учебных курсах.

На панели форматирования щелкните на стрелке кнопки Границы, чтобы появилась панель инструментов границ. Эту панель инструментов можно отсоединять и закреплять где угодно или перемещать независимо.

Выберите вариант Внешние границы, чтобы применить его к данному абзацу. Продолжая работать с выделенным абзацем, выберите пункт Абзац в меню Формат. В диалоговом окне Абзац (рис. 9.7) выполните следующее:

• В раскрывающемся списке Выравнивание вы берите вариант По центру.
• В секции Отступ введите в полях Слева и Справа значение 15.
• В секции Интервал введите в полях Перед и После значение 0.

Рис. 9.7. Диалоговое окно "Абзац"

Щелкните на кнопке ОК, чтобы применить параметры форматирования абзаца (рис. 9.8).Затем щелкните в начале второго абзаца и нажмите клавиши Shift + Enter для вставки разрыва строки.

увеличить изображение
Рис. 9.8. Страница serv01.htm после форматирования

В меню Файл выберите пункт Сохранить все, чтобы сохранить все открытые файлы.