Файл: Использование сложных элементов при оформлении Web.doc

Совсем недавно можно было только мечтать о размещении на 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), введите размер кнопки (в пикселах).

Совет

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