Добавить в избранное  ||  Публикация Web-узла  ||  Введение  ||  Использование компонентов

Глава 20 Использование сложных элементов при оформлении Web-страниц

Использование эффектов динамического HTML
Бегущая строка
Меняющиеся кнопки
Анимация на Web-страницах
Использование анимации при смене страниц
Сворачивающиеся списки
Объявление на странице
Диспетчер объявлений
Использование фреймов при создании Web-страниц
Шаблоны фреймов
Создание фрейма
Режимы просмотра фрейма
Свойства фреймов
Управление фреймами
Стили
Создание внешней таблицы стилей
Использование внешней таблицы стилей
Создание внутренних стилей страницы
Теги стилей абзацев
Встроенные стили

Использование эффектов динамического HTML

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

В этой главе будут рассмотрены вопросы, связанные с размещением на Web-страницах объектов, позволяющих сделать страницы более живыми и привлекательными для пользователей. С ПОМОЩЬЮ объекта Объявление на странице (Page Banner) вы сможете разместить на странице слайды, которые используются для рекламы товаров, а также просто для украшения страницы.

Разнообразить представленную в Web-узле информацию можно с помощью фреймов (их называют также рамками), делающих страницу обновляемой при выборе размещенных на ней ссылок.

Помимо этого, в главе будет рассмотрено создание и использование стилей для форматирования текста Web-страниц.

Вся размещаемая на Web-страницах информация, о которой шла речь в предыдущих главах (кроме видео), была статичной. Разработчику Web-узла, работающему с программой FrontPage, предоставляются разнообразные средства, позволяющие сделать Web-страницы интересными. К таким средствам, прежде всего, относятся динамические эффекты (DHTML). Для создания динамических эффектов совсем не обязательно знать язык Java, JavaScript или VBScript, и можно вообще обойтись без программирования. Для создания на Web-странице динамических HTML-объектов в программе FrontPage имеются команды встроенного меню, поэтому, чтобы разместить данные объекты и настроить их свойства, вам потребуется совсем немного времени. Но есть одно существенное ограничение, препятствующее широкому применению DHTML при создании Web-узлов — не все обозреватели, с помощью которых пользователи просматривают Web-страницы, поддерживают данные эффекты. Не все эффекты, созданные в Internet Explorer, смогут наблюдать пользователи Netscape Navigator, и наоборот. Может случиться так, что вы потратите время, добиваясь нужных эффектов, а многие посетители их не увидят.

Бегущая строка

Один из динамических элементов HTML, создаваемый программой FrontPage — бегущая строка, представляющая собой прямоугольную область, в которой перемещается текст, оформленный в виде одной строки. Данный объект называют также быстрой строкой.

Разместим на одной из страниц нашего тестового Web-узла бегущую строку и посмотрим, как настраиваются ее свойства. Чтобы разместить на Web-странице бегущую строку, выполните следующие действия:

1. Откройте страницу Web-узла, оформление которой хотите оживить, разместив в ней активный компонент.
2. Установите курсор в место предполагаемого расположения бегущей строки.
3. В меню Вставка (Insert) выберите команду Веб-компонент (Web Component). Открывается диалоговое окно Вставка компонента веб-узла (Insert Web Component) (рис. 20.1).

Рис. 20.1. Диалоговое окно Вставка компонента веб-узла

4. Окно содержит два списка. Из списка компонентов выбрано находящееся в нем значение Динамические эффекты (Dynamic Effects). В правом списке окна отображаются динамические объекты программы FrontPage. Выберите из этого списка значение Быстрая строка (Marquee) и нажмите кнопку Готово (Finish). Открывается диалоговое окно Свойства бегущей строки (Marquee Properties) (рис. 20.2), в котором можно определить параметры объекта, размещаемого на Web-странице.

Рис. 20.2. Диалоговое окно Свойства бегущей строки

5. В верхней части диалогового окна расположено поле Текст (Text), предназначенное для размещения текста, который будет представлен на экране в виде бегущей строки. Введите в это поле, например, фразу Мы рады приветствовать Вас!
6. Используя опции переключателя Направление (Direction), задайте направление движения бегущей строки:

• налево (Left)
• направо (Right)

7. Область Скорость (Speed) содержит два счетчика, управляющих скоростью перемещения строки и имеющих следующее назначение:

• Задержка (Delay) — задает период времени (в миллисекундах) между двумя последовательными перемещениями строки
• Величина (Amount) — используется для указания расстояния (в пикселах) между двумя последовательными строками

Варьируя значения этих двух параметров, можно изменять скорость движения текста. Оставьте установленные по умолчанию параметры.

8. Опции группы Поведение (Behavior) позволяют задать поведение бегущей строки:

• прокрутка (Scroll) — бегущая строка появляется из-за границы прямоугольной области, в которой размещена, и скрывается за противоположной границей. Направление ее перемещения задается опциями переключателя Направление (Direction)
• сдвиг (Slide) — строка появляется из-за границы прямоугольной области, в которой размещена, и останавливается перед противоположной границей. Направление ее перемещения задается опциями переключателя Направление (Direction)
• попеременно (Alternate) — бегущая строка движется от одной границы прямоугольной области до другой, меняя попеременно направление

Выберите один из трех предложенных вариантов.

9. Используя параметры области Размер (Size), задайте размеры прямоугольной области, в которой будет перемещаться строка. Эта область содержит флажки:

• Ширина (Width) — ширина области
• Высота (Height) — высота области

Для задания ширины области установите флажок Ширина. Становится доступным поле, позволяющее указать ширину области в пикселах или в процентах от размера экрана, расположенное справа от флажка. Единицы измерения задаются с помощью опций в точках (In pixels) и в процентах (In percent). Введите необходимое значение. Аналогичным образом определите высоту области, в которой будет отображаться бегущая строка.

10. Область Повторы (Repeat) позволяет указать количество перемещений бегущей строки по экрану. При установке флажка Постоянно (Continuously) строка будет перемещаться по Web-странице непрерывно.

Замечание

Не злоупотребляйте применением данного флажка. Все хорошо в меру. Постоянно бегающая строка может раздражать и отпугнуть посетителей Web-узла.

11. Для задания цвета фона прямоугольной области, в которой перемещается строка, нажмите кнопку раскрывающегося списка Цвет фона (Background color) и выберите из открывшейся палитры нужный цвет.

12. Программа FrontPage позволяет изменить шрифт, используемый в оформлении бегущей строки. Нажмите кнопку Стиль (Style). На экране открывается диалоговое окно Изменение стиля (Modify Style), в котором нажмите кнопку Формат (Format). При этом появляется меню кнопки, содержащее несколько команд, предназначенных для оформления текста. Выберите значение Шрифт (Font). Открывается диалоговое окно Шрифт (рис. 20.3), в котором можно указать шрифт, его размер, цвет, начертание, а также применить к тексту различные эффекты оформления. Завершив установку параметров, нажмите кнопку ОК для закрытия окна.

Рис. 20.3. Диалоговое окно Шрифт; в нем можно выбрать оформление текста бегущей строки

13. Используя команду Граница (Border) меню кнопки Формат диалогового окна Изменение стиля (Modify Style), можно определить стиль оформления области, где будет размещаться бегущая строка. Выберите эту команду и, используя параметры открывшегося диалогового окна Границы и заливка (Borders and Shading) (рис. 20.4), задайте стиль рамки, ее цвет. Завершив настройку параметров, закройте окно, нажав кнопку ОК.

Замечание

Для изменения фона прямоугольной области мы использовали список Цвет фона (Background color) окна Свойства бегущей строки (Marquee Properties). Изменить фон можно также с помощью аналогичного списка, расположенного на вкладке Заливка (Shading) диалогового окна Границы и заливка (Borders and Shading).

14. Завершив установку всех параметров бегущей строки, закройте диалоговое окно Свойства бегущей строки (Marquee Properties).
15. Просмотрите результаты своей работы. Для этого в нижней части области редактирования выберите вкладку Просмотр (Preview) (рис. 20.5).

Замечание

Для редактирования бегущей строки достаточно дважды щелкнуть на ней мышью или выбрать из контекстного меню команду Свойства бегущей строки (Marquee Properties). Откроется диалоговое окно, которое использовалось при размещении на Web-странице бегущей строки.

Рис. 20.4. Диалоговое окно Границы и заливка

Рис. 20.5. Просмотр бегущей, строки в режиме Просмотр

Меняющиеся кнопки

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

1. Откройте в режиме редактирования Web-страницу, на которой хотите разместить кнопки.
2. Установите курсор в место предполагаемого расположения первой кнопки.
3. В меню Вставка (Insert) выберите команду Веб-компонент (Web Component). Открывается диалоговое окно Вставка компонента веб-узла (Insert Web Component) (см. рис. 20.1).
4. Из списка компонентов выберите значение Динамические эффекты (Dynamic Effects). При этом в правом списке окна отображаются динамические объекты программы FrontPage.
5. Из правого списка выберите значение Меняющаяся кнопка (Hover Button) и нажмите кнопку Готово. Откроется диалоговое окно Свойства меняющейся кнопки (Hover Button Properties) (рис. 20.6), позволяющее определить параметры кнопки, размещаемой на Web-странице.

Рис. 20.6. Диалоговое окно Свойства меняющейся кнопки

6. Введите в поле Текст кнопки (Button text) текст, помещаемый на кнопку (например, название страницы, на которую осуществляется переход при нажатии на данную кнопку).
7. Чтобы установить гиперссылку, в поле Ссылка на (Link to) введите адрес URL или нажмите кнопку Обзор (Browse) и в открывшемся диалоговом окне Выбор гиперссылки для меняющейся кнопки (Select Hover Button Hyperlink) (рис. 20.7) выберите объект (Web-страницу, закладку, файл и т. д.), на который создается ссылка. Затем нажмите кнопку ОК.
8. Используя раскрывающийся список Цвет кнопки (Button color), задайте первоначальный цвет кнопки.

Рис. 20.7. Диалоговое окно Выбор гиперссылки для меняющейся кнопки

9. Список Эффект (Effect) содержит 7 значений, определяющих эффекты цветового оформления, предоставляемых программой FrontPage. Выберите из списка первое значение Заливка (Color fill).

10. Используя поля Ширина (Width) и Высота (Height), введите размер кнопки (в пикселах).

Совет

Для изменения размера кнопки можно также использовать маркеры выделения, появляющиеся, если на ней щелкнуть кнопкой мыши.

11. Из списка Цвет эффекта (Effect color) выберите цвет, который будет использоваться в создании эффекта.

Замечание

В оформлении изменяющейся кнопки можно применять графическое изображение и звук. Для использования этих возможностей в диалоговом окне Свойства меняющейся кнопки нажмите кнопку Другие (Custom). Откроется диалоговое окно Другие эффекты (рис. 20.8), содержащее две области. Верхняя , область Воспроизведение звука (Play sound) содержит два поля Щелчок (On click) и Наведение (On lover), в которых можно указать звуковые файлы, воспроизводимые, соответственно, при нажатии кнопки и при установке на нее курсора. Область Произвольный рисунок (Custom) позволяет задать графические изображения, используемые для оформления кнопки. Поле Кнопка (Button) содержит наименование графического файла, размещенного на кнопке. Чтобы указать изображение, которое будет появляться на кнопке при установке на нее курсора, используется поле Наведение (On lover).

12. Завершив настройку параметров кнопки, нажмите кнопку ОК для закрытия диалогового окна.

Рис. 20.8. Диалоговое окно Другие эффекты, предназначенное для задания дополнительных параметров изменяющейся кнопки

13. Аналогичным образом разместите на Web-странице остальные 6 кнопок. При оформлении кнопок можете использовать не только различные эффекты из списка Эффект (Effect), но и разное цветовое оформление, комбинируя цвета из списков Цвет кнопки (Button color) и Цвет эффекта (Effect color).
14. Загрузите в обозреватель страницу с размещенными на ней кнопками или перейдите в режим просмотра страницы, выбрав вкладку Просмотр (Preview), находящуюся в нижней части рабочей области.
15. Поочередно устанавливая курсор на разные кнопки, посмотрите, как они выглядят в зависимости от примененного к ним эффекта. Например, при установке курсора на кнопку, к которой применен эффект Заливка (Color fill), кнопка окрашивается в цвет, заданный с помощью списка Цвет эффекта (Effect color). Посмотрите, как выглядит кнопка с эффектом Свечение в центре (Glow). В центре кнопки располагаются концентрические окружности разной насыщенности, заданные с помощью списка Цвет эффекта.

Анимация на Web-страницах

Программа FrontPage позволяет при оформлении Web-страниц использовать различные анимационные эффекты, заимствованные из программы PowerPoint, входящей в программный пакет Microsoft Office, предназначенной для подготовки презентаций.

Используя объект Бегущая строка (Marquee), можно заставить перемещаться строку текста в отведенной для него области. А с помощью анимации можно "оживлять" целые абзацы и задавать им различные направления для их перемещения.

При создании эффектов анимации используется панель инструментов DHTML Effects (рис. 20.9). Для ее размещения в главном окне программы выполните одно из следующих действий:

• В меню Формат (Format) выберите команду Эффекты DHTML (Dynamic HTML Effects)
• В меню Вид (View) выберите команду Панели инструментов (Toolbars) и в открывшемся меню — опцию Эффекты DHTML (DHTML Effects)

Рис. 20.9. Панель инструментов Эффекты DHTML

На панели инструментов расположены три списка. Список Вкл (Оn) содержит события, при наступлении которых выполняется динамический HTML-эффект. В табл. 20.1 перечислены возможные события, входящие в этот список.

Таблица 20.1. События, при наступлении которых применяется DHTML-эффект

Список Применить (Apply) панели инструментов Эффекты DHTML содержит перечень анимационных действий (табл. 20.2), выполняемых объектами. Термин "объект" подразумевает не только фрагмент текста. Эффекты анимации могут быть применены, например, к графическим изображениям.

Таблица 20.2. Анимационные действия, применяемые к объектам

Направление движения объекта задается с помощью списка Эффект (Effect), содержащего большое количество значений. Объект может перемещаться по разнообразным направлениям: диагоналям страницы, справа налево, слева направо, из центра, справа, слева, сверху, снизу и т. д.

Для применения анимационного эффекта необходимо выделить объект и, используя значения списков панели инструментов, выбрать необходимые значения.

Комбинируя значения всех трех списков панели инструментов Эффекты DHTML, вы сможете сформировать самые разнообразные эффекты. При загрузке Web-страницы текст будет влетать по спирачи или волнообразно, въезжать сверху, снизу, справа, слева или по диагонали из разных углов страницы. Размер размещаемого текста можно увеличивать или уменьшать. Отдельные слова текста могут падать в формируемую фразу сверху или вплывать, двигаясь волнообразно. Попробуйте различные варианты и подберите то, что вам понравится и не будет раздражать посетителя вашей Web-страницы.

Рассмотрим несколько примеров использования на Web-страницах анимационных эффектов. Разместим на странице заголовок, отдельные слова которого будут как бы падать на страницу при ее загрузке. Для создания этого эффекта выполните следующие действия:

1. Откройте в режиме редактирования Web-страницу, для которой создаете анимацию.
2. Разместите в ней заголовок.
3. Для того чтобы панель инструментов Эффекты DHTML появилась на экране, выберите в меню Формат (Format) команду Эффекты DHTML (Dynamic HTML Effects).
4. Установите курсор мыши на заголовок, для которого задаете эффект анимации.
5. Из списка Вкл (On) панели инструментов выберите значение Загрузка страницы (Page load), указывающее, что анимационное действие будет выполняться при загрузке страницы.
6. Из списка Применить (Apply) выберите значение Падение слов (Drop in by word), указывающее, что заголовок будет формироваться из слов, падающих последовательно сверху.
7. Перейдите в режим просмотра Web-страницы, выбрав вкладку Просмотр (Preview), расположенную в нижней части рабочей области программы FrontPage, и посмотрите, как формируется заголовок страницы (рис. 20.10).

Рис. 20.10. Формирование заголовка с использованием эффекта падающих сверху слов

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

1. Откройте в режиме редактирования страницу, содержащую бегущую строку.
2. Разместите на экране панель инструментов Эффекты DHTML, выбрав в меню Формат команду Эффекты DHTML (Dynamic HTML Effects).
3. Установите курсор мыши на текст бегущей строки.
4. Из списка Вкл (On) панели инструментов выберите значение Click (Щелчок мыши), указывающее, что анимационное действие будет выполняться при щелчке кнопкой мыши.
5. Из списка Применить (Apply) выберите значение Вылет (Fly out), указывающее, что объект покинет Web-страницу.
6. Используя список Эффект (Effect), можно указать направление, в котором объект покинет страницу. Выберите, например, Наверх (То top).

Замечание

При установке курсора на объект, к которому применен динамический HTML, под курсором появляется подсказка с указанием наименования эффекта. На рис. 20.11 представлена бегущая строка, к которой применен эффект Динамический эффект: Вылет Наверх.
 

Рис. 20.11. Бегущая строка с примененным к ней эффектом анимации Динамический эффект: Вылет Наверх

7. Перейдите в режим просмотра Web-страницы, выбрав вкладку Просмотр (Preview), расположенную в нижней части рабочей области программы FrontPage или загрузите страницу в обозреватель, выбрав в меню Файл (File) команду Просмотр в обозревателе (Preview in Browser).
8. При загрузке страницы начинает формироваться текст заголовка Адреса магазинов фирмы "Книжный мир", для которого мы задали динамический эффект в предыдущем примере. Слова по одному падают сверху в строку, пока не образуют весь текст. Одновременно с этим по странице движется бегущая строка с текстом Мы рады приветствовать Вас!. Щелкните в любом месте бегущей строки. Она начинает медленно двигаться вверх и исчезает с экрана.

Совет

Для удаления DHTML-эффекта установите курсор на объект и нажмите кнопку Удалить эффект (Remove Effect) на панели инструментов Эффекты DHT

Использование анимации при смене страниц

Программа FrontPage позволяет использовать анимационные эффекты при переходе между страницами Web-узла. Для задания этого эффекта используется диалоговое окно Смена страниц (Page Transitions) (рис. 20.12), открываемое при выборе одноименной команды меню Формат (Format).

Рис. 20.12. Диалоговое окно Смена страниц

Список Событие (Event) данного диалогового окна содержит перечень событий (табл. 20.3), при наступлении которых применяются анимационные эффекты.

Таблица 20.3. События, при наступлении которых выполняются анимационные эффекты перехода между страницами

В поле Длительность (Duration) можно задать продолжительность создаваемого эффекта (в секундах).

Предупреждение

Мы уже не раз говорили о том, что одна из главных задач, стоящих перед разработчиком Web-узла, — добиться того, чтобы Web-страницы загружались быстро. Так что не увеличивайте время загрузки, вводя большие значения в поле Длительность.

Для выбора эффекта перехода используется список Эффект (Transitions Effect), содержащий множество элементов.

Для страницы, к которой применен эффект перехода, на вкладке Другие (Custom) диалогового окна Свойства страницы (Page Properties) появляется соответствующая запись с указанием наименования события и его параметрами. На рис. 20.13 показано диалоговое окно свойств страницы, при выходе с которой будет использоваться эффект Растворение продолжительностью 5 секунд. Используя кнопки Добавить (Add), Изменить (Modify) и Удалить (Remove), можно добавлять в этот список новые эффекты, модифицировать установленные или удалять эффекты, от которых решили отказаться.

Рис. 20.13. Вкладка Другие диалогового окна Свойства страницы содержит параметры эффекта перехода

Сворачивающиеся списки

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

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

Чтобы сделать список сворачивающимся, выполните следующие действия:

1. Создайте на Web-странице многоуровневый список.
2. Выделите его, нажмите правую кнопку мыши и выберите команду контекстного меню Свойства списка (List Properties). Открывается одноименное диалоговое окно (рис. 20.14).
3. В нижней части диалогового окна расположены флажки Включить свертываемые структуры (Enable Collapsible Outlines) и Изначально свернуть (Initially Collapsed). Установите их.
4. Нажмите кнопку ОК для закрытия диштогового окна Свойства списка.
5. Перейдите в режим предварительного просмотра страницы, выбрав вкладку Просмотр (Preview) в нижней части рабочей области. На экране отображаются только элементы верхнего уровня многоуровнего списка. Щелкните мышью на первом элементе списка. Список раскрывается, показывая элементы второго уровня выбранного элемента (рис. 20.15). При повторном щелчке мыши список сворачивается.

Рис. 20.14. Диалоговое окно Свойства списка позволяет сделагь список сворачивающимся

Рис. 20.15. Просмотр сворачивающегося списка

Объявление на странице

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

Ознакомимся с баннером на простом примере, для создания которого выполните следующие действия:

1. Создайте новый одностраничный тестовый Web-узел. Для этого на панели Создание страницы или веб-узла (New Page or Web) выберите команду Шаблоны веб-узлов (Web Site Templates), а затем в открывшемся диалоговом окне Шаблоны веб-узлов дважды щелкните мышью на значке Одностраничный веб-узел (One Page Web).
2. Для перехода в режим просмотра структуры нового узла нажмите кнопку Переходы (Navigation) на панели режимов Представления (Views).
3. В центре структурной схемы расположен прямоугольник, условно обозначающий домашнюю страницу нашего одностраничного Web-узла. Установите на него курсор, щелкните на нем правой кнопкой мыши и выберите в контекстном меню команду Переименовать (Rename).
4. Введите новое название страницы (например, Заголовок страницы), и нажмите клавишу <Enter> (рис. 20.16).
5. Перейдите в режим редактирования страницы. Для этого дважды щелкните на наименовании страницы в области Список папок (Folder List) или на прямоугольнике, обозначающем страницу.

Рис. 20.16. Изменение названия страницы в режиме Переходы

6. Чтобы разместить баннер на странице, выберите в меню Вставка (Insert) команду Объявление на странице (Page Banner). Открывается диалоговое окно Свойства объявления на странице (Page Banner Properties) (рис. 20.17), в поле Текст объявления (Page banner) которого уже содержится текст Заголовок страницы, введенный нами в режиме Переходы (Navigation).

Рис. 20.17. Диалоговое окно Свойства объявления на странице

7. Введите в это поле другое название заголовка (например, Новый заголовок страницы), и нажмите кнопку ОК.
8. Перейдите в режим Переходы и убедитесь, что новое, введенное в диалоговом окне Свойства объявления на странице значение заголовка отображается в центре прямоугольника, обозначающего эту страницу.

Замечание

Введенное нами название заголовка достаточно длинное, чтобы поместиться полностью в прямоугольнике. Установите на него курсор. Полное имя страницы будет показано в виде всплывающей подсказки под курсором.

Если позднее вы захотите изменить текст баннера:

1. Откройте диалоговое окно Свойства объявления на странице, используемое также при создании баннера. Для этого установите курсор на баннер и выполните одно из следующих действий:

• Дважды щелкните мышью
• Щелкните правой кнопкой мыши и выберите в контекстном меню команду Свойства объявления на странице
• Нажмите комбинацию клавиш <Alt>+<Enter>

2. Введите в поле Текст объявления (Page banner) новый заголовок и нажмите кнопку ОК. Если вы теперь перейдете в режим переходов, то увидите, что изменилось наименование страницы. Применяя темы для оформления Web-страницы, можно сделать вашу страницу более привлекательной, разместив в баннерах графические изображения. На рис. 20.18 представлена наша тестовая страница, оформленная с I применением одной из тем, предлагаемых программой FrontPage.

Рис. 20.18. Использование темы в оформлении баннера

Диспетчер объявлений

Используя объект Диспетчер объявлений (Banner Ad Manager), можно украшать Web-страницы сменяющими друг друга слайдами. Данный объект удобно использовать для размещения на Web-страницах информации рекламного характера.

Разместим на нашей тестовой Web-странице несколько слайдов, которые при просмотре страницы в обозревателе будут сменять друг друга.

1. Подготовьте изображения, которые хотите использовать в качестве слайдов, и разместите их в папке images Web-узла.
2. Откройте в режиме редактирования Web-страницу, на которой хотите разместить чередующиеся рекламные объявления.
3. Установите курсор в место их предполагаемого размещения.
4. В меню Вставка (Insert) выберите команду Веб-компонент (Web Component). Открывается диалоговое окно Вставка компонента веб-узла (Insert Web Component) (см. рис. 20.1).
5. Из списка компонентов выберите значение Динамические эффекты (Dynamic Effect). При этом в правом списке окна отображаются динамические объекты программы FrontPage.
6. Выберите из этого списка значение Диспетчер объявлений (Banner Ad Manager) и нажмите кнопку Готово (Finish). Откроется диалоговое окно Свойства диспетчера объявлений (Banner Ad Manager Properties) (рис. 20.19), позволяющее определить параметры рекламных объявлений, размещаемых на Web-странице.

Рис. 20.19. Диалоговое окно Свойства диспетчера объявлений

7. В полях Ширина (Width) и Высота (Height) задайте размеры слайдов (в пикселах). Если слайды имеют разные размеры, установите размер самого большого из них. В этом случае слайды меньшего размера будут размещаться в центре выделенной для них области на нейтральном фоне.
8. Используя раскрывающийся список Эффект (Transition effect), задайте, каким образом один слайд будет сменять другой. Список содержит следующие значения:

• None — слайды выводятся без применения эффектов перехода
• Жалюзи вертикальные (Blinds Vertical) — слайды выводятся через вертикальные жалюзи
• Жалюзи горизонтальные (Blinds Horizontal) — слайды выводятся через горизонтальные жалюзи
• Растворение (Dissolve) — текущий слайд растворяется, заменяясь проявляющимся следующим слайдом
• Прямоугольник внутрь (Box In) — текущий слайд уменьшается в размерах, заменяясь следующим слайдом
• Прямоугольник наружу (Box Out) — новый слайд увеличивается в размере, заменяя текущий

Выберите любой из понравившихся эффектов. Глава 20. Использование сложных элементов при оформлении

9. В поле Показывать каждый рисунок (Show each picture for) введите время демонстрации слайда в секундах или оставьте значение, установленное по умолчанию программой FrontPage.
10. Используя кнопку Обзор (Browse) и открывающееся при нажатии на нее диалоговое окно Выберите гиперссылку объявления (Select Banner Ad Hyperlink), вы можете ввести информацию в поле Ссылка на (Link to), связав тем самым слайд с гиперссылкой. Эту возможность удобно использовать для открытия страниц рекламы при щелчке.
11. Область Показывать рисунки (Pictures to display) служит для формирования списка изображений, размещаемых в рекламном баннере, в порядке их показа. Для формирования списка изображений предназначены кнопки, расположенные справа:

• Добавить (Add) — открывает диалоговое окно Добавление рисунка для объявления (Add Picture for Banner Ad), используя которое можно добавить в список изображения из папок текущего Web-узла, с диска, из Интернета
• Удалить (Remove) — удаляет из списка выделенный файл изображения
• Вверх (Move Up) — перемещает выделенный файл изображения на одну позицию списка вверх
• Вниз (Move Down) — перемещает выделенный файл изображения на одну позицию списка вниз

Используя кнопку Добавить (Add) и открываемое при ее нажатии диалоговое окно Добавление рисунка для объявления, сформируйте список изображений баннера. С помощью кнопок Вверх (Move Up) и Вниз (Move Down) задайте порядок показа слайдов.

12. Завершив ввод всех параметров, нажмите кнопку ОК для закрытия диалогового окна Свойства диспетчера объявлений.

Замечание

Если вы решите изменить какие-либо из параметров, щелкните на слайде правой кнопкой мыши и выберите в появившемся контекстном меню команду Свойства диспетчера объявлений (Banner Ad Manager Properties) (рис. 20.20) или нажмите комбинацию клавиш <Alt>+<Enter>.

Загрузите страницу в обозреватель, выбрав в меню Файл (File) команду Просмотр в обозревателе (Preview in Browser), и посмотрите, как выглядит ваше рекламное объявление. Одно изображение сменяет другое. После того как список пройден до конца, начинается показ первого слайда. И так до тех пор, пока вы не перейдете на другую страницу.
 

Рис. 20.20. Размещенное на Web-странице рекламное объявление с контекстным мен

Использование фреймов при создании Web-страниц

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

Замечание

Иногда фреймы называют рамками. Мы будем придерживаться более распространенного среди пользователей, а соответственно, и более привычного термина фреймы.

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

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

Фрейм имеет очевидные преимущества. Тем не менее, если в него входит большое количество страниц, загрузка фрейма будет происходить медленно, т. к. для загрузки каждой из страниц, составляющих его, требуется отдельное обращение к серверу. Поэтому при создании фреймов следует проявлять чувство меры и ограничиваться небольшим количеством страниц. Информация о страницах, входящих в состав фрейма, хранится на отдельной странице, называемой фреймсетом. Поэтому, если вы создаете двухстраничный фрейм, то при подсчете обращений к серверу необходимо учитывать и фреймсет.

Шаблоны фреймов

Использование шаблонов фреймов значительно облегчает их создание, особенно, если вы только начинаете знакомиться с фреймами. Для просмотра списка шаблонов фреймов выполните следующие действия:

1. В меню Файл (File) выберите команду Создать (New), а затем в появившемся подменю — опцию Страница или веб-узел (Page or Web).
2. На появившейся панели Создание веб-страницы или узла (New Page or Web) выберите команду Шаблоны страниц (Page Templates).
3. В открывшемся диалоговом окне Шаблоны страниц (рис. 20.21) перейдите на вкладку Страница рамок (Frames Pages).

Рис. 20.21. Диалоговое окно Шаблоны страниц, содержащее шаблоны фреймов

4. В окне вкладки находятся 10 значков шаблонов. Назначение шаблонов фреймов описано в табл. 20.4.

Таблица 20.4. Шаблоны фреймов

Просмотреть вид выбранного шаблона вы можете в области Образец (Preview). Подобрав устраивающий вас шаблон, дважды щелкните на нем или нажмите кнопку ОК.

5. Открывается страница, имеющая вид, аналогичный представленному на рис. 20.22.

В соответствии с типом выбранного шаблона, страница разбита на облас-• ти, каждая из которых содержит по две кнопки:

• Задать начальную страницу (Set Initial Page) — при нажатии на данную кнопку открывается диалоговое окно Добавление гиперссылки (Insert Hyperlink), позволяющее указать страницу, которая будет размещаться в этой области фрейма при его открытии
• Создать страницу (New Page) — загружает во фрейм новую страницу шаблона Обычная страница (Normal Page)

Рис. 20.22. Шаблон фрейма Оглавление

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

Создание фрейма

Рассмотрим пример создания Web-узла, в состав которого входит фрейм, представленный на рис. 20.23, и Web-страницы, просматриваемые с его помощью. Фрейм состоит из трех областей: заголовок, оглавление и основная область, в которой будет размещаться информация из Web-страниц, выбираемых с помощью оглавления.

Процесс создания Web-узла будет состоять из следующих этапов:

1. Создание пустого Web-узла.
2. Создание трех страниц (по числу областей фрейма), отображаемых по умолчанию во фрейме при его загрузке.
3. Создание страниц, которые будут размещаться в основной области фрейма при выборе значений списка, размещенного в области оглавления. Их количество определяется оглавлением.
4. Размещение в Web-узле фрейма.

Рис. 20.23. Фрейм в режиме просмотра

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

Мы рассмотрели основные этапы работы, которую нам предстоит выполнить. Приступим к созданию Web-узла:

1. Создайте пустой Web-узел. Для этого на панели Создание веб-страницы или узла (New Page or Web) выберите команду Шаблоны веб-узлов (Web Sites Templates).
2. В поле Укажите расположение нового веб-узла (Specify the location of the new web) открывшегося диалогового окна Шаблоны веб-узлов (Web Sites Templates) введите наименование и расположение создаваемого узла, а затем дважды щелкните мышью на шаблоне Пустой веб-узел (Empty Web). Откроется пустой Web-узел.
3. Для создания страницы, размещаемой в заголовке фрейма, добавьте в Web-узел новую страницу шаблона Обычная страница (Normal Page).
4. В режиме редактирования введите в верхней строке страницы заголовок Книжный мир. Расположите его в центре строки. Для этого установите курсор в заголовок и нажмите кнопку По центру (Center) на панели форматирования.
5. Для сохранения страницы нажмите кнопку Сохранить (Save) на стандартной панели инструментов. В открывшемся диалоговом окне Сохранить как (Save As) задайте наименование файла и нажмите кнопку Сохранить.

Замечание

Чтобы не запутаться в названиях страниц при создании ссылок, им лучше давать имена, которые будут ассоциироваться с областью фрейма, в которой эта страница будет отображаться. Присвоим созданной странице наименование banner_f.htm, т. к. она по умолчанию будет размещаться в области заголовка.

6. Добавьте в Web-узел новую страницу и разместите на ней текст оглавления. Оформите его в виде списка и сохраните на диске в файле content_f.htm.
7. На третью новую страницу поместите текст, который по умолчанию будет загружаться в основную область фрейма, и сохраните ее в файле main_f.htm.
8. На этом формирование страниц, отображаемых во фрейме при его загрузке, завершено. Теперь необходимо подготовить страницы, которые будут появляться в правой области фрейма при выборе пунктов оглавления. Создайте необходимые страницы. Их число должно быть равно количеству пунктов в области оглавления. Первой строкой нашего оглавления является Готовятся к печати. Web-страница, появляющаяся при выборе этого пункта, должна содержать книги, которые готовятся к печати и в ближайшее время должны появиться на книжном рынке. Подготовим эту страницу и сохраним ее в файле new_books.htm.
9. Создайте и сохраните остальные Web-страницы, необходимые для просмотра информации, представленной в оглавлении.
10. Все страницы подготовлены. Теперь их необходимо разместить во фрейме. Добавим в Web-узел новый фрейм. Для этого на панели Создание веб-страницы или узла (New Page or Web) выберите команду Шаблоны страниц (Page Templates).
11. В открывшемся диалоговом окне Шаблоны страниц перейдите на вкладку Страницы рамок (Frames Pages) (см. рис. 20.21) и дважды щелкните на значке шаблона Объявление и оглавление (Banner and Contents). Фрейм, созданный с использованием этого шаблона, содержит область заголовка, оглавление и область отображения основной информации (рис. 20.24).
12. Для указания страницы, которая должна размешаться в верхней области фрейма при его загрузке, нажмите кнопку Задать начальную страницу (Set Initial Page), расположенную в этой области.
13. В поле Адрес (Address) открывшегося диалогового окна Добавление гиперссылки (Insert Hyperlink) (рис. 20.25) укажите название страницы, содержащей заголовок, щелкнув на файле banner_f.htm. Затем нажмите кнопку ОК для закрытия окна. Указанная нами в гиперссылке страница разместилась в верхней области фрейма.

Рис. 20.24. Выбранный шаблон фрейма Объявление и оглавление

Рис. 20.25. Диалоговое окно Добавление гиперссылки позволяет указать страницу, которая будет размещаться во фрейме при его загрузке

14. Используя кнопки Задать начальную страницу (Set Initial Page) остальных областей фрейма, поместите в них созданные страницы content_f.htm и main_f.htm.

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

15. В области оглавления выделите первый элемент списка и выберите в его контекстном меню команду Гиперссылка (Hyperlink).
16. В поле Адрес (Address) открывшегося диалогового окна Добавление гиперссылки (Insert Hyperlink) укажите название страницы, содержащей информацию по данному вопросу, щелкнув на файле new_books.htm.
17. Для указания области фрейма, в которую указанная страница должна загружаться, нажмите в окне Добавление гиперссылки кнопку Выбор рамки (Target Frame).
18. Открывается диалоговое окно Конечная рамка (Target Frame), в области Текущая страница рамок (Current frames page) которого отображается структура фрейма (рис. 20.26). Для указания места загрузки страницы можно использовать данную структуру или значения списка Общие объекты (Common targets). Щелкните мышью в требуемой области структуры. Она окрашивается в синий цвет (рис. 20.27).

Рис. 20.26. Диалоговое окно Конечная рамка

Рис. 20.27. Диалоговое окно Конечная рамка с выбранной областью конечного фрейма, в которую будет загружаться страница

19. Нажмите кнопку ОК для закрытия диалогового окна Конечная рамка (Target Frame).
20. Вы возвращаетесь в диалоговое окно Добавление гиперссылки (Insert Hyperlink), в котором также нажмите кнопку ОК.
21. Аналогичным образом для всех элементов списка оглавления укажите наименования загружаемых страниц и область фрейма, в которой эти страницы будут отображаться.
22. Для сохранения фрейма нажмите кнопку Сохранить (Save) на стандартной панели инструментов. В открывшемся диалоговом окне Сохранить как (Save As) задайте наименование файла index.htm и нажмите кнопку Сохранить.
23. Просмотрите, как будет выглядеть созданный фрейм в обозревателе. Для этого выберите вкладку Просмотр (Preview) в нижней части рабочей области.

Проверьте действие ссылок, расположенных в области оглавления. При щелчке на любом из разделов оглавления в правой области фрейма отображается страница соответствующего раздела (рис. 20.28).

Рис. 20.28. Отображение страницы раздела в правой области фрейма при его выборе из оглавления

В рассмотренном примере мы устанавливали в диалоговом окне Конечная рамка (Target Frame) один и тот же конечный фрейм для всех ссылок оглавления. Можно было ускорить процедуру назначения, установив конечный фрейм по умолчанию для всех ссылок страницы. Для этого необходимо было выполнить следующие действия:

1. Открыть диалоговое окно Свойства страницы (Page Properties), щелкнув правой кнопкой мыши в любом месте страницы и выбрав в контекстном меню команду Свойства страницы (Page Properties).
2. На вкладке Общие (General) нажать кнопку Изменить конечную рамку (Change target frame) , расположенную справа от поля Конечная рамка по умолчанию (Default target frame).
3. В области Текущая страница рамок (Current frames page) открывшегося диалогового окна Конечная рамка (Target Frame), отображающего структуру фрейма, выбрать с помощью мыши требуемую область.
4. Нажать кнопку ОК для закрытия диалогового окна Конечная рамка.
5. Закрыть диалоговое окно Свойства страницы, нажав кнопку ОК.

Режимы просмотра фрейма

В нижней части рабочей области программы FrontPage при размещении в ней фрейма (см. рис. 20.28) вместо трех вкладок, соответствующих режимам просмотра обычных Web-страниц, появляется пять. Их назначение описано в табл. 20.5.

Таблица 20.5. Режимы просмотра фрейма

Свойства фреймов

Для настройки свойств фрейма используется дишюговое окно Свойства рамки (рис. 20.29). Чтобы его открыть, выделите фрейм и выполните одно из следующих действий:

• В меню Рамки (Frame) выберите команду Свойства рамки (Frame Properties)
• Щелкните правой кнопкой мыши и выберите команду контекстного меню Свойства рамки (Frame Properties)

Рис. 20.29. Диалоговое окно Свойства рамки

В верхней части диалогового окна расположены два поля. Поле Имя (Name) содержит название редактируемого фрейма, а поле Начальная страница (Initial page) — название страницы, отображаемой в данном фрейме при его начальной загрузке. Для изменения начальной страницы необходимо нажать кнопку Обзор (Browse), расположенную справа от поля. При этом открывается диалоговое окно Изменение гиперссылки (Edit Hyperlink), позволяющее указать для загрузки другую страницу.

Область Размер рамки (Frame size) содержит поля Ширина столбца (Column Width) и Высота (Height), указывающие размеры фрейма. Обратите внимание, что поле, задающее ширину фрейма, для которого открыто окно свойств, не доступно для модификации. Это связано с тем, что рассматриваемый нами фрейм занимает всю ширину фреймсета, которая и определяет его размер. При изменении размера фрейма изменяются также размеры всех граничащих с ним фреймов. Для указания единиц, в которых задаются размеры, используются расположенные справа от полей раскрывающиеся списки, содержащие следующие значения:

• точки (Pixels)
• относительная (Relative)
• проценты (Percent)

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

С помощью полей Ширина (Width) и Высота (Height) области Поля (Margins) можно задать размеры полей страницы, т. е. интервалы между содержимым страницы и границами фрейма. Объекты интерфейса, расположенные в области Параметры (Options), позволяют управлять фреймом при просмотре его в обозревателе. Например, при установленном флажке Изменять размер в обозревателе (Resizable in browser) можно с помощью мыши изменить размеры фреймов по своему усмотрению, а, используя значения раскрывающегося списка Полосы прокрутки — указать, отображать ли во фреймах полосы прокрутки. Список содержит следующие значения:

• при необходимости (If Needed)
• никогда (Never)
• всегда (Always)

Для фрейма, содержащего заголовок, конечно, нет смысла использовать значения при необходимости (If Needed) или всегда (Always) — подойдет значение никогда (Never). В том случае, если содержимое фрейма меняется в зависимости от загруженной в него страницы, разумно использовать значение при необходимости (If Needed), т. к. если вся информация в нем помещается, то полоса прокрутки будет отсутствовать. Если информации будет много, полоса прокрутки появится.

Кнопка Стиль (Style), расположенная в нижнем левом углу диалогового окна Свойства рамки, позволяет изменить связанную с фреймом таблицу стилей.

При нажатии кнопки Страница рамок (Frame Page) области Параметры открывается диалоговое окно Свойства страницы (Page Properties) (рис. 20.30), в котором по умолчанию выбрана вкладка Рамки (Frames). Она содержит параметры, относящиеся к фреймсету.

Рис. 20.30. Вкладка Рамки диалогового окна Свойства страницы

Поле Интервал между рамками (Frame Spacing) позволяет указать толщину разделительных линий между фреймами на странице. Флажок Показать границы (Show Borders) определяет, показывать ли разделительные линии между фреймами.

Управление фреймами

Для изменения размеров фрейма, размещенного на странице, можно использовать не только диалоговое окно Свойства рамки (Frame Properties), но и мышь. Достаточно установить курсор на границу двух фреймов и, когда курсор примет вид двунаправленной стрелки, перемещать в ту или другую сторону.

Во фреймсет можно добавлять новые фреймы или удалить фреймы, которые больше не нужны. Для добавления нового фрейма выполните следующие действия:

1. Нажмите и удерживайте клавишу<Ctrl>.
2. Установите курсор на рамку, перед или выше которой хотите добавить новый фрейм. Под курсором появляется подсказка Для разделения рамки перетаскивайте ее при нажатой клавише Ctrl (Ctrl+Drag to split frame).
3. Нажмите кнопку мыши и, удерживая, перемещайте курсор в нужную сторону до образования области требуемого размера.
4. Отпустите клавишу<Ctrl> и кнопку мыши.

Рис. 20.31. Добавление во фреймсет нового фрейма

Образовавшийся новый фрейм (рис. 20.31) содержит кнопки Задать начальную страницу (Set Initial Page) и Создать страницу (New Page), позволяющие определить загружаемые в него страницы.

Для добавления во фреймсет нового фрейма можно также использовать команду меню:

1. Выделите фрейм, область которого хотите разбить на две части, шелкнув на нем мышью.
2. В меню Рамки (Frame) выберите команду Разделить рамку (Split Frame).
3. В открывшемся диалоговом окне Разделить рамку (Split Frame) (рис. 20.32), содержащем опции Разбить на столбцы (Split into columns) n Разбить на строки (Split into rows), установите требуемую опцию.
4. Нажмите кнопку ОК.

Рис. 20.32. Диалоговое окно Разделить рамку

Чтобы удалить фрейм из фреймсета, установите на него курсор и в меню Рамки (Frame) выберите команду Удалить рамку (Delete Frame). Освободившееся после удаления фрейма место будет занято оставшимися фреймами.

Стили

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

Для хранения стилей в программе FrontPage используется таблица стилем! Cascading Style Sheets (Каскадная таблица стилен), сокращенно CSS. В программе FrontPage имеются три вида стилей:

• External Style Sheet — внешняя таблица стилей. Данная таблица стилен хранится в файле с расширением CSS. Она может быть связана со всеми страницами Web-узла
• Embedded Style Sheet — внутренняя таблица стилей. Эта таблица стилей включается в код HTML-страницы и может быть связана с одной страницей
• Inline Style — встроенный стиль. Применяется к отдельным элементам Web-страницы

Создание внешней таблицы стилей

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

Для создания внешней таблицы стилей Web-узла выполните следующие действия:

1. Откройте Web-узел, для которого хотите создать таблицу стилей CSS.
2. На панели Список папок (Folder List) выберите самую верхнюю папку, содержащую название узла.
3. В меню Файл (File) выберите команду Создать (New), а затем из открывшегося подменю — опцию Страница или веб-узел (Page or Web).
4. На появившейся панели Создание веб-страницы или узла (New Page or Web) выберите команду Шаблоны страниц (Page Templates).
5. Открывается диалоговое окно Шаблоны страниц, в котором перейдите на вкладку Таблицы стилей (Style Sheets) (рис. 20.33). Она содержит шаблоны стилей, предлагаемые программой FrontPage.

Рис. 20.33. Вкладка Таблицы стилей диалогового окна Шаблоны страниц

6. Выберите один из предлагаемых шаблонов и нажмите кнопку ОК.
7. Диалоговое окно Шаблоны страниц закрывается, а в Web-узел добавляется страница, имеющая расширение CSS (рис. 20.34). Посмотрите ее содержимое. Она содержит описание стилей, которые будут использоваться для форматирования содержимого страниц: сначала идет название элемента Web-страницы, а за ним в скобках — параметр форматирования. На этой странице последовательно описаны все элементы, встречающиеся в Web-узле и подлежащие форматированию — фон страницы, ссылки, заголовки, текст, таблицы, а также используемые в их оформлении цвета, шрифты и т. п.
8. Сохраните страницу в Web-узле, воспользовавшись кнопкой Сохранить (Save) на стандартной панели инструментов.
9. В открывшемся диалоговом окне Сохранить как (Save As) в поле Имя файла (File name) введите имя файла (например, styles), и нажмите кнопку Сохранить.

Замечание

Посмотрите на панель Список папок (Folder List). Там появился файл styles.ess, представляющий собой таблицу стилей.

Рис. 20.34. Страница, содержащая описание стилей

Использование внешней таблицы стилей

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

1. Откройте Web-узел, содержащий созданную нами внешнюю таблицу стилей.
2. В меню Формат (Format) выберите команду Ссылки таблицы стилей (Style Sheet Links).
3. Открывается диалоговое окно Связать с таблицей стилей (Link Style Sheet) (рис. 20.35). В его верхней части расположены две опции:

• все страницы (All pages) — связывает таблицу стилей со всеми страницами Web-узла
• выделенные страницы (Selected page(s)) — связывает таблицу стилей с выбранной страницей

Чтобы связать созданную таблицу стилей со всеми страницами, установите опцию все страницы (All pages).

4. Для указания названия таблицы стилей, с которой необходимо связать страницы Web-узла, нажмите кнопку Добавить (Add).

Рис. 20.35. Диалоговое окно Связать с таблицей стилей

5. В открывшемся диалоговом окне Выбор таблицы стилей (Select Style Sheet) выберите созданную таблицу стилей. В нашем примере это файл styles.css. Имя файла переносится в поле Адрес URL (URL).
6. Нажмите кнопку ОК.
7. Вы возвращаетесь в диалоговое окно Связать с таблицей стилей. Имя таблицы CSS размещено в списке под опциями.
8. Нажмите кнопку ОК для закрытия окна. Посмотрите на страницы Web-узла, с которыми связана таблица CSS. Ко всем элементам Web-страниц применено форматирование в соответствии со значениями таблицы стилей.

Откройте любую страницу Web-узла, с которой связана таблица стилей, в режиме просмотра HTML кодов. Для этого выберите вкладку HTML-код в нижней части рабочей области программы. Просмотрите коды Web-страницы. Вы обязательно найдете там строку приблизительно следующего вида:

<link rel="stylesheet" type="text/css" href="styles.css">

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

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

Внешняя таблица стилей определяет оформление всех элементов страницы или даже всего 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. В открывшемся диалоговом окне Шрифт выполните следующие действия:

• Из списка Шрифт выберите шрифт, который хотите использовать в оформлении заголовка
• Используя список Начертание (Font style), задайте полужирное начертание, выбрав значение Полужирный (Bold)
• Установите размер шрифта, выбрав, например, значение 18pt
• Воспользовавшись списком Цвет (Color), выберите из палитры оранжевый цвет для отображения заголовка
• Установив требуемые параметры, нажмите кнопку ОК.

8. Вы возвращаетесь в диалоговое окно Создание стиля (New Style), в области Описание (Description) которого появилось описание параметров созданного стиля (см. рис. 20.37). Нажмите кнопку ОК.

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

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

Рис. 20.37. Диалоговое окно Создание стиля; в нем отображены параметры созданного стиля

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

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

Замечание

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

Рис. 20.38. Диалоговое окно Стиль содержит наименования созданных стилей

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

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

Замечание

Рассмотрение тегов выходит за рамки данного материала. Мы приведем только символы, которые вы должны использовать в наименовании создаваемого стиля:

• H1-H6 — заголовки от первого до шестого уровня
• OL — нумерованный список
• UL — маркированный список
• DL — список определений
• ADDRESS — текст, выделяемый курсивом

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

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

Рис. 20.39. Диалоговое окно Изменение стиля

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

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

Добавить в избранное  ||  Публикация Web-узла  ||  Введение  ||  Использование компонентов

top

Школа Майкрософт© Copyright 2007г.

графика, хтмл, для, начинающий, начинающих, чайников, новичков, просто, основа, основы, графика, страница, домашний, домашняя, сайт, новый, новичок, html, обучение, учеба, пример, веб, мастер, веб-мастер, дизайн, веб-дизайн, вебдизайн, дезайн, веб-дезайн, вебдезайн, дезайнер, дизайнер, ступени, тэги, тэг, теги, тег, аттрибут, атрибуты, парамет, design, web, help, помощь, icq, e-mail, guest, book, guestbook, гостевая, книга, форум, аська, контакт, ссылка, link, links, banner, обмен, баннер, баннерами, банер, baner, друзья, friends, почитать, написать, вопросы, вопрос, ответ, проект, ступени, словарь, excel, exel, excell, exsel, эксель, ексель, для, начала, сначала, таблицы, форматирование, ряды, строки, ячейка, начинающий, начинающих, чайников, новичков, просто, основа, основы