- •Лабораторная работа №8. Интернет технологии. Использование ms FrontPage для разработки Web-страниц.
- •Теоретические сведения.
- •Задание 1. Создание Web-формы «Анкета посетителя».
- •1.1. Задание параметров html-страницы.
- •1.2. Знакомство с элементами управления Web-формы.
- •1.3. Ввод и форматирование текста.
- •1.4. Размещение объектов (полей формы) на html-странице.
- •Все вышеприведенные действия проделайте для остальных браузеров.
- •Задание 2. Создание веб-узла в режиме Мастера.
- •2.1. Создание структуры веб-узла.
- •2.2. Редактирование главной страницы веб-узла.
- •2.3. Работа с объектами страниц веб-узла.
- •2.4. Использование динамических эффектов на html-странице.
- •2.5. Настройка поведения объектов на html-странице.
- •Редактирование дочерних страниц веб-узла.
2.2. Редактирование главной страницы веб-узла.
Перейдите на вкладку Папки и откройте страницу index.htm для редактирования. Сразу выберите Тему для привлекательного отображения вашего веб-узла.
В левой области страницы находится панель ссылок на дочерние страницы. Переход по гиперссылке в режиме Конструктор происходит при нажатой клавише CTRL. Все открытые страницы отображаются в верхней области приложения.
.Откройте веб-страницы news.htm и products.htm.
Со страницы «Продукты» перейдите на страницу «Продукт 1». В свойствах панели ссылок установите опцию – Дочерние страницы домашней. Перейдите на страницы «Продукт 2» и «Продукт 3» и убедитесь, что панель ссылок так же изменилась и на этих страницах.
Перейдите к редактированию главной страницы index.htm.
Рис. 10. Отображение веб-узла в режиме «Папки».
Обратите внимание, что область страницы содержит примечания, которые помогут вам корректно наполнить страницу контентом. В режиме Просмотр примечания не отображаются. Убедитесь в этом, перейдя в данный режим. Поочередно удаляя примечания, наполните главную страницу необходимым содержанием, соответствующим профилю вашей компании.
2.3. Работа с объектами страниц веб-узла.
Заголовки страниц выполнены в виде баннеров – объявлений на странице. Щелкните дважды по баннеру «Домой». Введите новую надпись для баннера, например, «Главная».
Теперь займемся вставкой графического объекта – логотипа вашей компании. Удалите значок «Эмблема организации», который служит для подсказки. Выполните команду Вставка/Рисунок/Картинки или Вставка/Рисунок/Из файла. Подберите рисунок для логотипа, соответствующий профилю вашей компании.
Перейдите на страницу «Продукт 1» и вставьте рисунок для его отображения.
Аналогично вставьте рисунки и для других продуктов.
2.4. Использование динамических эффектов на html-странице.
DHTML - расширение языка HTML, позволяющее добавлять интерактивные возможности и графику на веб-страницы. Веб-страницы, использующие DHTML, могут изменяться и обновляться динамически в ответ на действия посетителя узла без необходимости загрузки с сервера после каждого действия.
Вставим под баннером «Главная» бегущую строку. Для этого выполните команду Вставка/Веб-компонент…или щелкните по соответствующей пиктограмме
на панели инструментов Стандартная.
Выберите тип компонента – Динамические
эффекты, а эффект – Бегущая строка.
В окне Свойства бегущей строки
введите текст приветствия (см. рис.11).
Установите параметры бегущей строки
по своему усмотрению. Переключитесь в
режим Просмотр, чтобы увидеть
бегущую строку. По ссылкам перейдите
на другие страницы – бегущая строка
отображается на всех страницах веб-узла.
Рис. 11. Свойства бегущей строки.
Часто на веб-страницах используются ссылки в виде интерактивных кнопок, которые могут изменять свой внешний вид при различных действиях пользователя (при наведении мышкой на кнопку, при щелчке). Оформим в виде таких кнопок гиперссылки, расположенные на странице «Продукты».
Для этого выполните команду Вставка/Веб-компонент, выберите тип компонента – Динамические эффекты, а эффект – Интерактивная кнопка. В открывшемся окне (см. рис.12) настройте параметры на свой вкус (текст кнопки, внешний вид, шрифт и т.д.). Создайте для кнопки ссылку на дочернюю страницу «Продукты 1» (prod01.htm).
Аналогичным образом создайте интерактивные кнопки для перехода на страницы Продукт 2, Продукт 3 и Продукт 4.
Рис. 12. Интерактивные кнопки.
