Компоненты FrontPage

Кроме стандартных приемов форматирования web-страниц, основанных на возможностях языка HTML, Frontpage предлагает набор средств, которые называют компонентами Frontpage. С их помощью можно улучшить оформление узла и расширить его функциональные возможности. Имейте в виду, что дополнительные функции могут не поддерживаться некоторыми браузерами, поэтому, применяя расширения компании Microsoft, обратите особое внимание на проверку работоспособности web-страниц в различных браузерах. Желательно протестировать web-узел на разных компьютерных платформах. Компоненты Frontpage добавляются в web-страницу с помощью команд подменю Вставка > Веб-компонент (Insert > Web Component). Описание некоторых компонентов Frontpage приведено в табл. 24.1.

ТАБЛИЦА 24.1. Компоненты Frontpage

Название	Описание
Примечание(Comment)	Позволяет вводить в web-страницу комментарии.  Они будут видны в процессе разработки, но удаленный пользователь их не увидит. Этот компонент удобен для документирования web-узлов
Поле подтверждения(Confirmation Field)	Используется для подтверждения введенных  данных, например в форме web-страницы
Страница(Included Page)	Позволяет заменить содержимое текущей web- страницы другой web-страницей
Страница по расписанию (Included Page Based on Schedule)	Дает возможность включить в web-страницу  некоторый файл на строго определенное время. По прошествии заданного интервала времени файл не будет отображаться на странице. Этот компонент полезен, например, для вывода сообщений о скидках, действительных только на определенный период
Рисунок с расписанием(Included Picture Based on Schedule)	Позволяет выводить изображение на web- странице в течение заданного интервала времени. По прошествии этого периода изображение появляться не будет :
Поиск в Интернете	Добавляет в web-узел форму процедуры поиска (Search Form) заданного текста
Подстановка (Substitution)	В процессе выполнения этот компонент заменяется значением определенного параметра или системной переменной окружения
Оглавление(Table Of Contents)	Формирует на web-странице оглавление узла,  созданного во Frontpage. Это оглавление будет автоматически обновляться при изменении содержимого web-узла

 

Название	Описание
Дата и время (Date And Time)	В процессе работы на месте этого компонента будут выводиться дата и время
Счетчик посещений (Hit Counter)	Форма, производящая подсчет количества посетителей web-узла
Объявление на странице... (Page Banner)	Добавляет на каждую страницу web-узла один и тот же баннер
Быстрая строка (Marquee)	Выводит текст в виде бегущей строки, параметры которой можно менять в широких пределах

Примечание

Большинство перечисленных компонентов становится доступным из окна диалога Вставка компонента веб-узла (Insert Web Component), возникающем на экране при команде Вставка > Веб-компонент.

 

Упражнение 1. Изображение по расписанию

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

 Откройте в приложении Frontpage узел Corporate.  Выведите содержимое страницы Трубы (файл prodOl.htm) в режиме просмотра Страница.  Поместите курсор правее изображения тигра. Выберите команду Вставить > Рисунок ^ Картинки (Insert > Picture > Clip Art). В текстовое поле в области задач приложения введите слово Animаls (Животные), затем щелкните на кнопке Найти. Поставьте указатель мыши на рисунок коровы и выберите в контекстном меню команду Вставить (Insert). На web-странице появится второе изображение, как показано на рис. 24.1. Щелчком на кнопке Сохранить панели инструментов Стандартная сохраните новый вариант страницы.  В открывшемся окне диалога Сохранение внедренных файлов щелкните на кнопке Переименовать, введите имя logo2 . gi f и щелкните на кнопке ОК. Выделите изображение коровы и нажатием клавиши Delete удалите его. Выполненные шаги 3-8 никак не изменили web-страницу. Они необходимы, чтобы преобразовать векторный рисунок библиотеки Clip Art в растровое изображение формата GIF. Если у вас есть два заранее подготовленных файла формата GIF с соответствующими рисунками, эти шаги можно опустить. Щелчком выделите изображение тигра. Выберите команду Вставка > Веб-компонент. В появившемся окне диалога Вставка компонента Веб-узла выделите в списке Тип компонента: (Component Type.) пункт Включенное содержимое (Included Content:) и в списке Выбеоите тип содержимого: (Choose a type of Content) дважды щелкните ТнктеРигу иок с расписанием (Picture Based on Schedule), как показано на ST

Рис. 24.1 . Добавление изображения по расписанию

11. В окне диалога Свойства рисунка с расписанием (Scheduled Picture Prooertie> показанном на рис. 24.2, щелкните на верхней кнопке Обзор propert1es)

Рис. 24.2. Расписание вывода изображений

12.  Выберите в появившемся списке файл logo2.gif и щелкните на кнопке ОК.  Щелкните на нижней кнопке Обзор.  Выберите файл logo.gif и щелкните на кнопке ОК.  С помощью раскрывающихся списков группы Окончание (Ending) установи те дату, отстоящую вперед от текущей примерно на два месяца. Щелкните на кнопке ОК.

Настроенный режим вывода изображений инициирует демонстрацию на web-странице файла logo2.gif (корова) в течение двух месяцев. До и после этого интервала времени на странице будет появляться файл logo.gif (тигр). Давайте проверим работу этого изменчивого изображения в окне браузера.

Рис. 24.3. Смена системного времени

17.  Выберите команду Файл > Просмотр в обозревателе. В качестве логотипа в окне Internet Explorer появится изображение коровы.  Дважды щелкните на часах Панели задач Windows.  В окне диалога настройки времени, показанном на рис. 24.3, увеличьте на 1 номер года.  Щелкните на кнопке ОК. В окне Frontpage щелкните на кнопке Сохранить, чтобы обновить дату страницы.  Переключитесь в окно Internet Explorer и нажмите клавишу F5, чтобы обновить документ. Теперь на страницу вернулось изображение тигра, так как новая дата не попадает во временной интервал компонента Рисунок с расписанием.  Закройте окно браузера.

Примечание

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

 

Упражнение 2. Время и комментарии

Чтобы познакомиться с компонентом Frontpage, называющимся Дата и время (Date And Time), выполните следующие шаги.

С помощью полосы прокрутки перейдите в самый низ страницы Трубы.

Рис. 24.4. Компонент даты и времени

2. Последняя строка страницы содержит надпись Дата изменения (Last modified) и дату, соответствующую моменту последнего сохранения данной web-страницы (рис. 24.4). Этот компонент Дата и время был автоматически добавлен мастером при создании узла Corporate на занятии 22. Давайте скорректируем свойства компонента.

Примечание

Чтобы самостоятельно добавить компонент Дата и время, воспользуйтесь соответствующей командой Вставка > Дата и время (Insert > Date And Time).

3. Щелкните на дате правой кнопкой мыши и выберите команду Свойства даты и времени (Date And Time Properties). В открывшемся окне диалога, показанном на рис. 24.5, выберите положение Дату последнего автоматического обновления страницы (Date This Page Was Last Automatically Update) переключателя Отображать (Display). Этот вариант задания даты чрезвычайно удобен, но он работает только при использовании расширений модуля Personal Web Server компании Microsoft.  В раскрывающемся списке Формат даты (Date Format) выберите подходящий вариант вывода даты. Чтобы добавить индикатор времени, выберите один из пунктов раскрывающегося списка Time Format (Формат времени). Щелкните на кнопке ОК. Поскольку для нормальной работы модифицированного компонента требуется Personal Web Server, следует вставить соответствующий комментарий, который не виден удаленному пользователю, но появляется перед разработчиком узла в окне Frontpage.  Щелкните в начале строки Дата изменения и выберите команду Вставка > Примечание (Insert > Comment). В открывшемся окне диалога введите текст Внимание ! Данный компонент даты и времени работает только под управлением Personal Web Server. Щелкните на кнопке ОК.  Нажмите клавишу Enter.

Рис. 24.5. Параметры даты и времени

Рис. 24.6. Страница с комментарием :

12. Замените текст Дата изменения на вариант Дата последнего обновления. Теперь страница будет выглядеть так, как показано на рис. 24.6. Щелкните на корешке Просмотр. Обратите внимание, что в этом режиме (так же, как и в окне браузера) комментарий не виден.

Упражнение 3. Бегущая строка

С помощью бегущей строки можно выделить определенный текст и привлечь к нему внимание удаленного пользователя. Этот компонент поддерживается не всеми браузерами, а только теми, которые совместимы с расширениями компании Microsoft. В других программах символы бегущей строки будут отображаться в виде статического текста. Чтобы сделать имеющийся текстовый фрагмент бегущей строкой, выполните следующие шаги:

 Выделите строку Низкие цены, постоянным клиентам скидки, щелкнув мышью слева от нее.  Щелкните в панели инструментов Стандартная на кнопке Веб-компонент (Web Component) и выделите в появившемся окне диалога Вставка компонента веб-узла пункт Динамические эффекты (Dynamic Effects). В правой части окна диалога дважды щелкните на пункте Быстрая строка (Marquee).  В открывшемся окне диалога (рис. 24.7) выберите положение Влево (Left) переключателя Направление (Direction), чтобы выбрать направление движения строки.

Рис. 24.7. Свойства бегущей строки

4.  Сбросьте флажок Постоянно (Continuously).  Введите в счетчик раздела Повторы (Repeat) число 3.  При необходимости измените другие параметры, после чего щелкните на кнопке ОК. Щелкните на вкладке Просмотр. Текст бегущей строки будет двигаться в окне справа налево. После того как вся строка три раза пересечет web-страницу, ее текст исчезнет и больше не появится. Для повторения эффекта придется перезагрузить страницу в режиме предварительного просмотра или в окне браузера.  Закройте web-узел командой Файл > Закрыть веб-узел.

Кадры

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

 

Упражнение 4. Страница с кадрами

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

 Выберите команду Файл > Создать > Страницу или веб-узел (File > New > Web or Page).  В области задач в разделе Создание с помощью шаблона щелкните на значке Шаблоны веб-узлов (Web Site Templates).  В поле Укажите расположение нового веб-узла (Specify The Location Of The New Web) открывшегося окна диалога введите путь папки узла и имя Frames.  Дважды щелкните на значке Одностраничный веб-узел (One Page Web). Выберите в подменю Файл > Последние веб-узлы (File > Recent Webs) пункт Corporate, чтобы открыть узел, созданный на предыдущих занятиях.  Щелкните на кнопке Папки (Folders) панели режимов.  Нажмите клавишу Ctrl и, не отпуская ее, щелкайте на именах файлов, чтобы выделить группу страниц в соответствии с рис. 24.8.  Щелкните на одном из выделенных файлов правой кнопкой мыши и выберите в контекстном меню команду Копировать (Copy).  Закройте узел Corporate.  В окне узла Frames выберите команду Вид > Папки (View > Folders), щелкните в области списка файлов правой кнопкой мыши и выберите команду Вставить. В результате этих операции часть страниц узла Corporate будет перенесена в узел Frames.

Рис. 24.8. Копирование web-страниц

11.  Щелкните на значке режима Страница.  В области задач в разделе Создание с помощью шаблона щелкните на значке Шаблоны страниц... (Page Templates...).  В окне диалога Шаблоны страниц (Page Templates) щелкните на вкладке Стра ница рамок (Frames Pages).  Щелкните на значке Колонтитулы и оглавление (Header, Footer And Contents). Щелкните на кнопке ОК. В окне Frontpage появится страница с четырьмя пустыми кадрами и несколькими кнопками, позволяющими связывать кадры с определенными HTML-файлами.  Чтобы создать файл кадра заголовка, щелкните на верхней кнопке Создать страницу (New Page).  Щелкните на кнопке Сохранить панели инструментов Стандартная, введите в открывшемся окне диалога имя topframe. htm и щелкните на кнопке Сохранить. Теперь в верхний кадр будет выводиться содержимое страницы topframe. htm.  Вслед за этим Frontpage попросит назначить имя главного файла, управляющего кадрами. Введите в окно диалога имя index, htm и щелкните на кнопке Сохранить.

Примечание

Файл index.htm обычно играет роль страницы, которая загружается в браузер по умолчанию после открытия web-узла. В новом узле эта роль отводится странице, управляющей кадрами.

19.  Щелкните на левой кнопке Создать страницу.  Повторите шаг 17, введя для левого кадра имя leftframe. htm.  Щелкните на нижней кнопке Создать стра н и цу и сохраните содержимое ниж него кадра в файле bottomframe.htm. Щелкните на единственной из оставшихся кнопок Задать начальную страницу (Set Initial Page).  Выберите в списке файл products.htm и щелкните на кнопке ОК. В основном кадре сразу же появится содержимое этой страницы, которая была скопирована из узла Corporate.

Упражнение 5. Кадры заголовка и примечания

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

 Щелкните в верхнем кадре. Выберите команду Вставка > Рисунок > Картинки....

Рис. 24.9. Параметры изображения

3. В области задач в окне Вставка картинок (Clip Art) введите в текстовое роле слово Animals (Животные), затем щелкните на кнопке Найти; из появившегося набора изображений остановитесь на картинке с тигром и выберите в контекстном меню команду Вставить. В результате в верхнем кадре появится логотип компании.  Чтобы настроить размеры логотипа, щелчком выделите его и нажмите клавиши Alt+Enter. Откроется окно диалога параметров изображения, показанное на рис. 24.9.  Щелкните на вкладке Вид. Установите флажок Задать размер (Specify size).  В счетчик Высота (Height) введите число 70.  В раскрывающемся списке Выравнивание выберите пункт По центру.  Щелкните на кнопке ОК. Чтобы рисунок был виден целиком, перетащите границу верхнего кадра немного вниз.  Щелкните правее добавленного изображения и введите слово Геркулес.  Выделите название компании и щелкните па кнопке Полужирный панели инструментов Форматирование. Чтобы увеличить шрифт, выберите в раскрывающемся списке Размер шрифта пункт 7 (36 pt).

Рис. 24.10. Содержание верхнего и нижнего кадров

14. Щелкните в нижнем кадре и введите текст Подробную информацию о деятельности компании можно получить по адресу info@hercules.corn . В конце ввода этой строки нажмите клавишу Пробел, чтобы Frontpage автоматически связал с адресом электронной почты соответствующую гиперссылку.  Перетащите границу нижнего кадра вниз, чтобы по возможности уменьшить его размеры. Теперь страница с кадрами будет выглядеть так, как показано на рис. 24.10.

Упражнение 6. Оглавление web-узла

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

Щелкните в левом кадре страницы. Введите слово Продукция и нажмите клавишу Enter. Затем введите слова Трубы, Панели и Гвозди, отделяя их друг от друга нажатиями клавиши Enter. Выделите четыре пункта левого кадра, протащив мышь слева от них. Щелкните на кнопке Маркеры панели инструментов Форматирование. Оглавление узла готово. Теперь нужно настроить гиперссылки. Выделите слово Продукция, щелкните на нем правой кнопкой мыши и выберите в контекстном меню команду Гиперссылка. В открывшемся окне диалога (рис. 24.11) из списка файлов выделите файл products.htm и щелкните на нем. При этом имя файла появится в текстовом поле Адрес:.

Рис. 24.11. Выбор рамки

Рис. 24.12. Параметры страницы рамок

8. Щелкните на кнопке Выбор рамки (Target Frame). В разделе Текущая страница рамок (Current Frames Page) окна диалога Конечная рамка (Target Frame) щелкните на правом кадре/чтобы в поле Настройка объекта (Target Setting) появилось слово main. Это заставит браузер выводить файл, на который указывает гиперссылка, в правый кадр.  Щелкните два раза на кнопке ОК. Повторяя шаги 6-10, назначьте словам Трубы, Панели и Гвозди соответственно ссылки на файлы prodOl.htm, prod02.htm и prod04.htm. He забывайте в качестве целевого выбирать правый кадр.

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

Рис. 24.13. Страница с кадрами

Чтобы скрыть рамки, выполните следующие шаги.

12. Щелкните в области страницы с кадрами правой кнопкой мыши и выберите в контекстном меню команду Свойства рамки (Frame Properties).  В открывшемся окне диалога щелкните на кнопке Страница рамок (Frames Page). Эта операция откроет другое окно диалога, показанное на рис. 24.12.  Раскройте вкладку Рамки (Frames). Сбросьте флажок Показать границы (Show Borders).  Два раза щелкните на кнопках ОК. Теперь страница станет такой, как показано на рис. 24.15. Эта операция завершает создание структуры web-узла с кадрами. Вам остается наполнить содержанием страницы prod0l.htm, prod02.htm и prod04.htm. Сделайте это самостоятельно, открывая файлы в режиме просмотра Страница. При желании измените фон страниц и форматирование текста. Можете добавить несколько картинок или еще как-нибудь приукрасить web-узел.  Чтобы познакомиться с поведением узла с кадрами и проверить действие гиперссылок, щелкните на корешке Просмотр. *  Щелкните на слове Трубы. В основном окне появится содержимое страницы Трубы, а остальные три кадра останутся без изменения, дв;

Примечание

Рисунок и графические маркеры страницы Трубы будут отображаться в виде пустых прямоугольников, так как соответствующие файлы формата GIF не были скопированы в узел Frames. Чтобы изображения появлялись на своих местах, в Проводнике скопируйте папку images из узла Corporate в узел Frames.

19.  Щелкните на ссылке Гвозди. Соответствующая страница длинная и не влезает в основной кадр целиком, поэтому в ее правой части появится полоса прокрутки. Попробуйте с помощью этой полосы просмотреть всю страницу. Вы увидите, что прокручивается только область правого кадра, в то время как остальные кадры остаются на прежних местах. Таким образом, страница с кадрами позволяет, с одной стороны, обеспечить постоянный доступ к важным элементам узла, таким как гиперссылки оглавления, заголовок узла или адрес компании, а с другой — просматривать в одном из кадров достаточно большие документы.

Мультимедийные эффекты

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

 

Упражнение 7. Фоновый звук

В упражнении 4 предыдущего занятия рассказывалось, как добавлять гиперссылки на другие web-страницы. Можно с помощью аналогичных ссылок адресовать и звуковые файлы. При щелчке на такой ссылке браузер загрузит с удаленного сервера звуковой файл и проиграет его. Кроме того, любой странице можно назначить фоновый звук, который будет воспроизводиться при открытии НТМL-файла. Примечание

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

Чтобы добавить на web-страницу Трубы звуковой файл, выполните следующие шаги.

Откройте файл prodOl.htm узла Corporate в режиме Страница. Введите в конец страницы предложение Наши медные трубы могут издавать музыкальные звуки, вы слышали их при открытии этой страницы. Выберите команду Файл > Свойства (File > Properties).

Рис. 24.14. Выбор звукового файла

4. На вкладке Общие (рис. 24.14) щелкните на кнопке Обзор, расположенной в разделе Фоновый звук (Background Sound).  В открывшемся окне диалога найдите папку, в которую был установлен пакет Office XP, откройте вложенную в нее папку Office10 и выберите файл reminder.wav. Щелкните на кнопке Открыть. Затем закройте окно свойств, щелкнув на кнопке ОК.  Выберите команду Файл > Сохранить. В появившемся окне диалога Сохранение внедренных файлов щелкните на кнопке ОК.  Чтобы прослушать звуковое сопровождение, щелкните на вкладке Просмотр. Сразу же после загрузки страницы вы услышите периодически повторяющийся звук файла reminder.wav.

Упражнение 8. Видеоклип

Frontpage позволяет размещать на web-страницах не только звуки, но и видеоклипы. В этом упражнении в кадр содержания узла Frames будет добавлена гиперссылка на страницу с видеоклипом.

Чтобы открыть узел Frames, выберите команду Файл > Открыть веб-узел. С помощью раскрывающегося списка Папка и списка файлов окна диалога Открытие веб-узла (Open Web) найдите папку Frames. Раскройте ее двойным щелчком на соответствующем значке. Затем щелкните на кнопке Открыть.  В панели режимов щелкните на значке Папки. В списке файлов узла дважды щелкните на значке index, htm, чтобы открыть в режиме Страница (Page) основную страницу с кадрами. Щелкните в левом кадре справа от ссылки Гвозди и нажмите клавишу Enter. Введите слово Видеоклип и, чтобы выделить его, нажмите клавиши Shift+Ctrl+<-. Щелкните на выделенном слове правой кнопкой мыши и выберите команду Hyperlink.  В открывшемся окне диалога (рис. 24.15) в поле Адрес: введите имя video. htm.  Щелкните на кнопке Выбор рамки..  В открывшемся окне диалога в списке Общие объекты выделите пункт Страница целиком (Whole Page). Такая настройка целевого кадра заставит страницу с видеоклипом заменить страницу с кадрами, освободив видеоклипу по возможности большее пространство окна браузера.  Два раза щелкните на кнопке ОК. Чтобы сохранить новый вариант домашней страницы, щелкните на кнопке Сохранить панели инструментов Стандартная. Гиперссылка на видеоклип готова. Теперь для его демонстрации нужно создать саму web-страницу.  Щелкните на кнопке Создать панели инструментов Стандартная.

Рис. 24.15. Добавление ссылки на новую страницу

13. На появившейся пустой странице введите слова Домашняя страница, выделите их и щелкните на кнопке Гиперссылка панели инструментов Стандартная. В окне диалога настройки гиперссылки щелкните на значке файла index, htm, а затем на кнопке ОК. Полученная ссылка позволит пользователю после просмотра видеоклипа вернуться на домашнюю страницу. Нажмите клавишу Enter. Выберите команду Вставка > Рисунок > Видеоклип (Insert > Picture > Video). В окне диалога Video (Видеоклип) выберите любой файл с расширением AVI. Если на жестком диске не оказалось ни одного видеоклипа, получите такой файл через Интернет с какого-либо web-узла.  Щелкните на кнопке Открыть. Выберите команду Файл > Сохранить. В открывшемся окне диалога введите имя video, htm и щелкните на кнопке Сохранить. В окне диалога Сохранение внедренных файлов щелкните на кнопке ОК. Закройте web-страницу с видеоклипом. На экране должна появиться страница с кадрами, ранее скрытая web-страницей с видеоклипом. Выберите в меню Файл (File) команду Просмотр в обозревателе.

Рис. 24.16. Web-страница с видеоклипом

22. В открывшемся окне диалога щелкните на пункте Internet Explorer, а затем на кнопке Просмотр. Домашняя страница с кадрами откроется в окне браузера. Щелкните на ссылке Видеоклип. Вместо страницы с кадрами в том же окне появится web-страница с видеоклипом, который автоматически запустится на воспроизведение, как показано на рис. 24.16. Чтобы после просмотра видеоролика (или даже в процессе просмотра) вернуться на страницу с кадрами, щелкните на гиперссылке Домашняя страница.

Упражнение 9. Динамические эффекты

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

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

Откройте web-узел Frames, перейдите в режим просмотра Страница и откройте в нем файл index, htm. Щелкните правой кнопкой мыши на любой панели инструментов и выберите в контекстном меню пункт Эффекты DHTML (DHTML Effects). Появится панель инструментов динамических эффектов, показанная на рис. 24.17.  Щелчком выделите изображение тигра в верхнем кадре страницы. В раскрывающемся списке Выбор события (Choose An Event) выберите пункт Наведение мыши (Mouse Over). В списке Выбор эффекта (Choose An Effect) выберите пункт Замена рисунка (Swap Picture). В списке Настройка (Effect Settings) щелкните на пункте Выбор рисунка (Choose Picture). Откроется окно диалога Рисунок.  В списке файлов найдите графический файл в формате GIF, например, созданный в упражнении 1 файл logo2.gif, содержащий Изображение коровы, (С:/Мои документы /MyWebs/Corporate/images/logo2.gif) и щелкните на кнопке Open (Открыть). Назначенный эффект будет инициировать смену изображения тигра на рисунок коровы в момент перемещения указателя на изображение. Когда пользователь уберет указатель в сторону, на странице вновь появится тигр.

Рис. 24.18. Настройка динамических эффектов

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

8. Выделите в правом кадре фразу Товары компании Геркулес отличаются высоким качеством (рис. 24.18).  В раскрывающемся списке Выбор события выберите пункт Загрузка страницы (Page Load).  В раскрывающемся списке Выбор эффекта выберите пункт Падение по одному слову (Drop In By Word). Щелчком на кнопке Сохранить панели инструментов сохраните выполненные изменения. Чтобы протестировать добавленные эффекты, щелкните на корешке Просмотр. Сразу после загрузки страницы с кадрами строка, выделенная на шаге 8, отсутствует. Ее слова появляются позже, вылетая по очереди сверху.  Переместите указатель мыши на изображение тигра. Оно сменится на рисунок коровы. Уберите указатель в сторону — тигр вернется на прежнее место. Такой прием смены изображения часто используется для подсвечивания рисунков с гиперссылками. Это помогает пользователю отличать рисунки, добавленные в качестве оформления, от тех, которые позволяют получить доступ к другим ресурсам Интернета.