Использование эффектов динамического 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), задайте
направление движения бегущей строки:
7. Область Скорость (Speed) содержит два счетчика, управляющих скоростью перемещения строки и имеющих следующее назначение:
Варьируя значения этих двух параметров, можно изменять скорость движения текста. Оставьте установленные по умолчанию параметры.
8. Опции группы Поведение (Behavior) позволяют задать поведение бегущей строки:
Выберите один из трех предложенных вариантов.
9. Используя параметры области Размер (Size), задайте размеры прямоугольной области, в которой будет перемещаться строка. Эта область содержит флажки:
Для задания ширины области установите флажок Ширина. Становится доступным поле, позволяющее указать ширину области в пикселах или в процентах от размера экрана, расположенное справа от флажка. Единицы измерения задаются с помощью опций в точках (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. Просмотр бегущей, строки в режиме Просмотр