Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Лаб №8 Разработка Web-страниц в MS Front Page.doc
Скачиваний:
1
Добавлен:
01.05.2025
Размер:
496.64 Кб
Скачать

2.2. Редактирование главной страницы веб-узла.

  1. Перейдите на вкладку Папки и откройте страницу index.htm для редактирования. Сразу выберите Тему для привлекательного отображения вашего веб-узла.

  2. В левой области страницы находится панель ссылок на дочерние страницы. Переход по гиперссылке в режиме Конструктор происходит при нажатой клавише CTRL. Все открытые страницы отображаются в верхней области приложения. .

  3. Откройте веб-страницы news.htm и products.htm.

  4. Со страницы «Продукты» перейдите на страницу «Продукт 1». В свойствах панели ссылок установите опцию – Дочерние страницы домашней. Перейдите на страницы «Продукт 2» и «Продукт 3» и убедитесь, что панель ссылок так же изменилась и на этих страницах.

  5. Перейдите к редактированию главной страницы index.htm.

Рис. 10. Отображение веб-узла в режиме «Папки».

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

2.3. Работа с объектами страниц веб-узла.

  1. Заголовки страниц выполнены в виде баннеров – объявлений на странице. Щелкните дважды по баннеру «Домой». Введите новую надпись для баннера, например, «Главная».

  2. Теперь займемся вставкой графического объекта – логотипа вашей компании. Удалите значок «Эмблема организации», который служит для подсказки. Выполните команду Вставка/Рисунок/Картинки или Вставка/Рисунок/Из файла. Подберите рисунок для логотипа, соответствующий профилю вашей компании.

  3. Перейдите на страницу «Продукт 1» и вставьте рисунок для его отображения.

  4. Аналогично вставьте рисунки и для других продуктов.

2.4. Использование динамических эффектов на html-странице.

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

  1. Вставим под баннером «Главная» бегущую строку. Для этого выполните команду Вставка/Веб-компонент…или щелкните по соответствующей пиктограмме на панели инструментов Стандартная. Выберите тип компонента – Динамические эффекты, а эффект – Бегущая строка. В окне Свойства бегущей строки введите текст приветствия (см. рис.11). Установите параметры бегущей строки по своему усмотрению. Переключитесь в режим Просмотр, чтобы увидеть бегущую строку. По ссылкам перейдите на другие страницы – бегущая строка отображается на всех страницах веб-узла.

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

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

  2. Для этого выполните команду Вставка/Веб-компонент, выберите тип компонента – Динамические эффекты, а эффект – Интерактивная кнопка. В открывшемся окне (см. рис.12) настройте параметры на свой вкус (текст кнопки, внешний вид, шрифт и т.д.). Создайте для кнопки ссылку на дочернюю страницу «Продукты 1» (prod01.htm).

  3. Аналогичным образом создайте интерактивные кнопки для перехода на страницы Продукт 2, Продукт 3 и Продукт 4.

Рис. 12. Интерактивные кнопки.