Поиск книг в интернет магазине Болеро

Поиск DVD в интернет магазине DVD DOM
Внимание! Money-Hunting.Ru - Интересная Online Игра с Денежными Призами.

FRONTPAGE

  • Занятие 1. Построение web-узла
    • Создание web-узла
      • Упражнение 1. Мастер web-узла
      • Упражнение 2. Режимы просмотра
      • Упражнение 3. Переходы
      • Упражнение 4. Гиперссылки
      • Упражнение 5. Отчеты
    • Оформление web-узла
      • Упражнение 6. Выбор оформления
      • Упражнение 7. Общие поля элементов
    • Контрольное упражнение
    • Подведение итогов
  • Занятие 2. Редактор web-страниц
    • Текст
      • Упражнение 1. Форматирование текста
      • Упражнение 2. Таблицы
      • Упражнение 3. Списки
      • Упражнение 4. Гиперссылки
    • Рисунки
      • Упражнение 5. Добавление рисунка
      • Упражнение 6. Фон страницы
    • Специальные объекты
      • Упражнение 7. Панель навигации
      • Упражнение 8. Закладки
    • Просмотр страницы
      • Упражнение 9. HTML-код
      • Упражнение 10. Предварительный просмотр
    • Контрольное упражнение
    • Подведение итогов
  • Занятие 3. Усовершенствование web-страниц
    • Компоненты Frontpage
      • Упражнение 1. Изображение по расписанию
      • Упражнение 2. Время и комментарии
      • Упражнение 3. Бегущая строка
    • Кадры
      • Упражнение 4 . С раница с кадрами
      • Упражнение 5. Кадры заголовка и примечания
      • Упражнение 6. Оглавление web-узла
    • Мультимедийные эффекты
      • Упражнение 7. Фоновый звук
      • Упражнение 8. Видеоклип
      • Упражнение 9. Динамические эффекты
    • Контрольное упражнение
    • Подведение итогов


Занятие №1

ЧАСТЬ VII

Frontpage

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

Построение web-узла

ТЕМА ЗАНЯТИЯ

На этом занятии вы познакомитесь с новым приложением Microsoft Office — редактором web-узлов программой Frontpage. Вы научитесь создавать и модифицировать структуру узла. Ниже перечислены некоторые компоненты и операции, рассматриваемые в упражнениях занятия:

  • мастер web-узла;

  • список задач;

  • просмотр папок узла;

  • навигация;

  • проверка гиперссылок;

  • отчеты;

  • цветовая схема узла;

  • общие поля страницы.

Web-узел — это набор файлов в формате HTML, расположенных в определенной папке и связанных друг с другом гиперссылками. Один из файлов web-узла назначается главным, он представляет собой домашнюю страницу и открывается в браузере пользователя при подключении к web-узлу. Остальные web-страницы выводятся в окно браузера по мере перехода к ним по гиперссылкам. Кроме файлов HTML в состав узла входит набор графических объектов формата GIF или JPG, предназначенных для оформления страниц. С развитием браузеров, предлагающих самые разнообразные расширения стандарта HTML, в web-узлах все чаще стали появляться файлы других форматов.


Создание web-узла

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

Примечание

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


Упражнение 1. Мастер web-узла

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

  1. Запустите Frontpage.

  2. Выберите команду Файл > Создать ^ Страница или web-узел (File > New > Web). В области задач приложения откроется окно Создание web-страниц (New Page or Web) со списком шаблонов и мастеров, которыми можно воспользоваться для построения web-узла (рис. 22.1).

  3. В разделе Создание с помощью шаблона (New from Template) щелкните на значке Шаблоны веб-узлов (Web Site Template) и в появившемся окне диалога Шаблоны веб-узлов (Web Site Templates) щелкните на значке Мастер корпоративного веб-узла (Corporate Presence Wizard).

  4. В поле раздела Options (Параметры) введите название папки, в которой будут храниться файлы узла (я буду пользоваться для этих целей папкой С: \Мои документы\Му Webs\Corporate).

Рис. 22.1. Мастера и шаблоны web-узлов

  5. Щелкните на кнопке ОК.

  6. В первом окне мастера щелкните на кнопке Далее (Next).

    Второе окно предлагает список основных web-страниц, которые можно включить в новый web-узел:

    • Домашняя страница (Home Page);
    • Что нового (What's New);
    • Товары и услуги (Products/Services);
    • Оглавление (Table of Contents);
    • Обратная связь (FeedBack form);
    • Форма поиска (Search form).

  7. Оставьте установленными все флажки и щелкните на кнопке Далее. Следующее окно мастера, показанное на рис. 22.2, предлагает определить вид домашней страницы. Устанавливая и сбрасывая флажки этого окна, вы добавляете или убираете соответствующие разделы домашней страницы.

  8. Установите все четыре флажка.

  9. Щелкните на кнопке Далее.

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

Рис. 22.2. Мастер корпоративного узла

  10. Десятое окно мастера задает общее оформление всех страниц. Установите флажки этого окна в соответствии с рис. 22.3, затем щелкните два раза на кнопке Далее.

Рис. 22.3. Настройка оформления страниц

  11. Введите полное название компании, то же самое название, сокращенное до одного слова, и адрес компании. Щелкните на кнопке Далее.

  12. В следующем окне введите телефон компании, номер факса, электронный адрес web-мастера и адрес информационной поддержки. Щелкните два раза на кнопке Далее, а затем на кнопке Готово (Finish). Мастер сгенерирует новый web-узел и откроет его в режиме просмотра задач со списком действий, которые необходимо выполнить для получения законченного узла. Пункты этого списка, показанные на рис. 22.4, были добавлены мастером. В них перечислены операции, с помощью которых вы должны наполнить смысловым содержанием сформированные web-страницы. В процессе разработки узла можно вручную добавлять новые задачи, связанные с той или иной web-страницей. Вы научитесь этому в следующем упражнении. Список задач всегда под рукой, он хранится вместе с файлами web-узла и не даст позабыть о незавершенных операциях. Чтобы открыть его, достаточно щелкнуть на кнопке Задачи (Tasks) панели режимов.

Рис. 22.4. Просмотр задач

Примечание

Чтобы добавить задачу, выберите команду файл > Создать > Задача (File > New > Task). Для изменения параметров конкретной задачи дважды щелкните на ее строке.


Упражнение 2. Режимы просмотра

Frontpage предлагает шесть режимов просмотра web-узла, кнопки которых имеются на панели режимов:

  • Страница (Page) — редактор отдельной web-страницы. В этом режиме можно изменять содержание любой страницы узла, настраивать ее оформление и просматривать HTML-код, на основе которого генерируется страница;

  • Папки (Folders) — список папок и файлов web-узла с их подробными характеристиками, подобный списку окна Проводника Windows;

  • Отчеты (Reports) — статистическая информация об узле и отдельных его компонентах;

  • Переходы (Navigation) — редактор структуры web-узла, позволяющий в графическом режиме изменять связи и перестраивать гиперссылки;

  • Гиперссылки (Hyperlinks) — список web-страниц узла и схема гиперссылок выделенной страницы;

  • Задачи (Tasks) — список задач, связанных с определенными файлами, которые нужно не забыть выполнить для завершения разработки узла.

Переключать режимы просмотра можно как с помощью команд меню Вид (View), так и посредством кнопок панели режимов, расположенной в левой части окна Frontpage.

Рис. 22.5. Режим просмотра папок

  1. Чтобы просмотреть список файлов, сгенерированных мастером web-узла, щелкните на кнопке Папки (Folders) панели режимов. Окно Frontpage разделится на две области (рис. 22.5). В левую будет выведен список папок, вложенных в папку С:\Мот документы\Согрога1е (в которой хранятся все файлы текущего web-узла), а в правую — значки файлов корневой папки узла.

Примечание

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

  2. Чтобы просмотреть список изображении, используемых в web-узле, щелк-к ните на значке папки images.

  3. Дважды щелкните на файле smallnsw.gif. Frontpage запустит программу, предназначенную для просмотра файлов формата GIF, и откроет в ней выбранный файл.

  4. Полюбуйтесь на значок, выбранный мастером, и закройте графическую программу.

  5. Для возврата в предыдущую папку щелкните в панели списка файлов правой кнопкой мыши и выберите в контекстном меню команду Вверх на один уровень (Up One Level).

  6. Выберите команду Файл > Создать > Папка (File > New > Folder). В списке папок появится значок новой папки с именем Новая папка. Щелкните на нем правой кнопкой мыши и в контекстном меню выберите команду Переименовать (Rename).

  7. Введите текст Дополнения. Это будет имя новой папки.

  8. В списке папок щелкните на значке Дополнения, чтобы открыть новую папку.

  9. Щелкните в пустом списке файлов правой кнопкой мыши и выберите команду Создать страницу (New Page).

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

  11. Щелкните на значке Справочник.htm. Выполните команду Файл > Создать > Задача.

  12. В поле Имя задачи (Task Name) открывшегося окна создания задачи (рис. 22.6) введите текст Создать страницу и ссылки.

Рис. 22.6. Добавление задачи

  13. Нажмите клавишу Tab и введите имя исполнителя задачи.

  14. В поле описания введите текст Создать страницу справочника по продуктам компании с таблицей, добавить ссылки с домашней страницы и на страницы описания продуктов.

  15. Щелкните на кнопке ОК.

  16. Выберите команду Вид > Задачи (View > Tasks). В списке операций вы увидите только что добавленную задачу со статусом Не запущена (Not Started).


Упражнение 3. Переходы

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

  1. Щелкните на кнопке Переходы (Navigation) панели режимов.

  2. Чтобы вместить в область экрана всю схему узла, выберите в раскрывающемся списке Масштаб (Zoom) панели инструментов Переходы (Navigation) пункт По размеру данных (Size To Fit).

Рис. 22.7. Режим навигации

Теперь структура навигации будет выглядеть так, как показано на рис. 22.7. Каждая страница узла обозначается прямоугольником. Линии, соединяющие эти прямоугольники, символизируют взаимную подчиненность страниц. Например, страница Услуги (Services), с одной стороны, подчинена домашней странице Домой (Ноmе). Это означает, что Frontpage автоматически разместит в нижней части страницы Услуги ссылку на домашнюю страницу. С другой стороны, страница Услуги обеспечивает доступ к трем подчиненным страницам Услуги 1, Услуги 2 и Услуги 3. Frontpage поместит ссылки на них в самом начале страницы Услуги. Давайте изучим такие ссылки.

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

  4. С помощью вертикальной полосы прокрутите содержимое страницы Услуги вниз, чтобы увидеть ссылки, расположенные в ее нижней части, как показано на рис. 22.8. Обратите внимание, что Frontpage дополнительно поместил ссылки на подчиненные страницы в левом поле, а ссылка на родительскую страницу Домой присутствует только внизу.

Рис. 22.8. Режим просмотра страницы

Примечание

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

  5. С помощью команды Вид > Способ перехода (View > Navigation) вернитесь в режим переходов.

  6. В левой части экрана расположена панель папок web-узла. Разверните в ней папку Дополнения, щелкнув на соответствующем значке «плюс». В этой папке расположена web-страница, созданная в предыдущем упражнении. Пока что она не включена в состав узла. Если предположить, что эта страница будет содержать сводную таблицу характеристик товаров фирмы, то ее следует подчинить странице Продукты (Products).

  7. Поместите указатель на значок Справочник.htm панели папок.

  8. Нажмите кнопку мыши и перетащите указатель в область схемы узла, чтобы появился прямоугольник новой страницы.

  9. Разместите прямоугольник выше прямоугольника Продукт1, чтобы линия связи соединяла новую страницу со страницей Продукты. Затем отпустите кнопку мыши. Frontpage добавит в структуру узла страницу Дополнения/ Cnpaвочник.htm и поместит ссылку на нее в левое поле ссылок страницы Продукты. В режиме навигатора можно не только добавлять новые, но и удалять ненужные страницы.

  10. Щелкните на странице Услуги 3 правой кнопкой мыши и выберите в контекстном меню команду Удалить (Delete).

  11. В открывшемся окне диалога выберите положение переключателя Удалить страницу с Web-узла (Delete This Page From The Web), азатем щелкните на кнопке ОК. Файл страницы будет удален с диска, а его значок — из схемы узла и всех папок.

Рис. 22.9. Переименованные страницы

Ориентацию схемы можно изменить, щелкнув на кнопке Портретная/альбомная (Portrait/Landscape) панели инструментов Переход.

Примечание

Выбор положения переключателя Удалить страницу из структуры переходов (Remove Page From The Navigation Structure) удаляет ссылки на данную страницу из панелей других страниц, но сохраняет файл страницы на жестком диске.

  12. Заголовок Дополнения/Справочник.htm не слишком хорош для web-страницы. Чтобы изменить его, щелкните на прямоугольнике этой страницы правой кнопкой мыши и выберите команду Переименовать, затем введите текст Справочник товаров. Этот же текст теперь будет использоваться в качестве заголовка на самой web-странице.

  13. Нажмите клавишу Tab. Frontpage автоматически перейдет в режим редактирования названия следующей страницы. Введите слово Трубы.

  14. Переименуйте другие страницы в соответствии с рис. 22.9, перемещаясь по ним с помощью клавиш Tab и Shift+Tab. Как видно из схемы узла, страницы Отзывы и Содержание не связаны с другими страницами. Чтобы предоставить пользователю доступ к этим двум страницам, выполните следующие действия.

  15. Перетащите прямоугольник страницы Содержание вправо вверх, подчинив его домашней странице Геркулес и разместив выше страницы Новости.

Примечание

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

  16. Перетащите страницу Отзывы вправо, переместив ее в подчинение группе Услуги, как показано на рис. 22.10.

Рис. 22.10. Новая структура узла


Упражнение 4. Гиперссылки

Режим просмотра гиперссылок позволяет просматривать дерево гиперссылок и проверять работоспособность внутренних и внешних ссылок узла.

  1. Чтобы вывести дерево гиперссылок, щелкните в панели режимов на значке Гиперссылки (Hyperlinks). На экран будет выведен список папок и дерево гиперссылок. Обратите внимание в списке папок на миниатюру файла index.htm в виде домика. Это файл домашней страницы.

  2. В панели списка папок щелкните на файле products, htm.

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

Рис. 22.11. Просмотр гиперссылок

  3. Щелкните на значке prod03.htm и выберите команду Переименовать.

  4. Введите текст pi-od04. htm и нажмите клавишу Enter.

  5. Откроется окно диалога, предлагающее обновить Гиперссылки, указывающие на переименованную страницу. Щелкните в нем на кнопке Нет (No).

  6. Щелчком на значке products.htm вернитесь к прежней схеме. Выберите команду Сервис > Пересчитать гиперссылки (Tools > Recalculate Hyperlinks).

  7. В открывшемся окне диалога щелкните на кнопке Да. Frontpage просмотрит ссылки web-узла и проверит их состояние (при работе с большими узлами этот процесс может занять продолжительное время). Программа обнаружит на странице products, htm ссылку на несуществующий файл prod03.htm. Это отразится на схеме (рис. 22.12).

Рис. 22.12. Разорванная гиперссылка

Примечание

Обычно следует выбирать ответ Да (Yes). Этот вариант дает указание Frontpage скорректировать ссылки так, чтобы смена имени файла не внесла путаницы в структуру узла и не нарушила его работоспособность. По указанной причине никогда не переименовывайте файлы узла в Проводнике или с помощью других инструментов Windows. Пользуйтесь для этих целей списком файлов в окне Frontpage. Операционная система в отличие от Frontpage не способна модифицировать другие web-страницы, приводя их ссылки в соответствие новому имени файла.

Рис. 22.13. Раскрытие ветвей ссылок

Обратите внимание, что миниатюры файлов, связанных со страницей products, htm снабжены символами «плюс». Они разворачивают соответствующую ветвь паутины ссылок.

  8. Щелкните на значке «плюс» миниатюры prod0l.htm.

  9. Затем щелкните на значке «плюс» появившейся миниатюры index.htm. В окне появится новый фрагмент web-узла, показанный на рис. 22.13.

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


Упражнение 5. Отчеты

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

  1. Чтобы увидеть итоговую информацию Frontpage о данном узле, выберите команду Вид > Отчеты > Сводка веб-узла (View > Reports > Site Summary).

Рис. 22.14. Обзор web-узла

Откроется таблица с обзором основных параметров узла (рис. 22.14). Некоторые пункты представляют сводную информацию из более подробного отчета на данную тему, который можно открыть двойным щелчком на соответствующей строке, а также выбором пункта в меню Вид > Отчеты (View » Reports) или в раскрывающемся списке панели инструментов Отчеты (Reports). Назначение отчетов Frontpage описано в табл. 22.1. Пункты обзора узла, не открывающие доступ к отдельным отчетам (и не попавшие по этой причине в табл. 22.1), а лишь дающие итоговое значение определенного параметра, перечислены в табл. 22.2.

ТАБЛИЦА 22.1. Отчеты Frontpage
Отчет | Назначение
Все файлы (All Files) | Список всех файлов web-узла с указанием их размера, местоположения и даты обновления
Недавно добавленные файлы (Recently Added Files) | Файлы, созданные в течение нескольких последних недель
Недавно измененные файлы (Recently Changed Files) | Список файлов, обновлявшихся за несколько последних недель
Старые файлы | Файлы, которые нс обновлялись длительное (Older Files) время
Потерянные файлы (Unlinked Files) | Список файлов, которые нельзя открыть с домашней страницы путем последовательной активизации гиперссылок
Медленные страницы (Slow pages) | Web-страницы, на загрузку которых с удаленного компьютера уйдет слишком много времени
Неработающие гиперссылки (Broken Hyperlinks) | Список ссылок, содержащих ошибки, то есть таких, точка назначения которых неизвестна
Ошибки компонентов (Component Errors) | Логические ошибки, найденные программой Frontpage при просмотре страниц
Состояние проверки (Review Status) | Демонстрирует способ обновления файлов (например обновление с помощью кода Active Server Page), если таковой назначен
Назначено (Assigned To) | Любому файлу web-узла в целях предотвращения путаницы в процессе разработки можно назначить принадлежность определенной рабочей группе или конкретному разработчику. Этот отчет показывает принадлежность файлов
Категории (Categories) | Демонстрирует категории, назначенные файлам при разработке узла, а также их типы и местоположение в структуре папок
Состояние публикации (Publish Status) | Указывает, какие файлы опубликованы на web-узле, сообщает даты их последнего изменения и статус обновления
Использование | Статистика использования, ежемесячные, еженедельные, ежедневные итоги, статистика обращений к страницам, информация о посетителях, и т. д.

ТАБЛИЦА 22.2. Итоговые характеристики обзора узла
Параметр | Назначение
Рисунки (Pictures) | Количество и общий размер графических файлов узла
Связанные файлы (Linked Files) | Количество файлов, связанных с домашней страницей той или иной последовательностью гиперссылок
Гиперссылки (Hyperlinks) | Общее число гиперссылок на всех страницах узла
Непроверенные гиперссылки (UnverifiedHyperlinks ) | Число гиперссылок, статус которых на данный момент неизвестен
Внешние гиперссылки (External Hyperlinks) | Количество ссылок на ресурсы, расположенные вне файлов данного web-узла
Внутренние гинерссылки (Internal Hyperlinks) | Количество ссылок, указывающих па объекты файлов данного web-узла
Незавершенные задачи (Uncompleted Tasks) | Число задач, помеченных как невыполненные. Двойной щелчок на этой строке открывает режим просмотра задач
Неиспользуемые схемы (Unused Themes) | Количество цветовых схем, хранящихся в структуре узла, по не использующихся в реальных web-страницах. Двойной щелчок на этом пункте позволяет удалить лишние цветовые схемы

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

Рис. 22.15. Список разорванных гиперссылок

В отчете показаны две такие ссылки (рис. 22.15). Первая появилась в результате переименования файла в предыдущем упражнении, вторая — после удаления файла УслугиЗ в упражнении 3. Давайте исправим эти недостатки.

  3. Дважды щелкните на строке разорванной гиперссылки prod03.htm.

  4. В поле Заменить гиперссылкой (Replace Hyperlink With) открывшегося окна диалога введите новое название файла prod04. htm.

Рис. 22.16. Правка web-страницы

  5. Щелкните на кнопке Заменить (Replace). Первый пункт списка разорванных ссылок исчезнет, что говорит о корректности исправленной ссылки.

  6. Щелкните на строке ссылки serv03.htm правой кнопкой мыши и выберите в контекстном меню команду Изменить страницу (Edit Page). Файл serv03.htm откроется в режиме страницы, и в нем будет выделена неверная ссылка, как показано на рис. 22.16.

  7. Нажатием клавиши Delete удалите ссылку.

  8. Выберите команду Файл > Закрыть (File > Close).

  9. Щелчком на кнопке Да подтвердите необходимость сохранения измененной web-страницы.

  10. Чтобы вернуться к списку неработающих гиперссылок, щелкните на значке Reports (Отчеты) панели режимов. Теперь этот список будет пуст, значит, все ссылки работают корректно.


Оформление web-узла

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


Упражнение 6. Выбор оформления

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

  1. Выберите команду Формат > Тема (Format > Theme). Откроется окно диалога, показанное на рис. 22.18. В нем вы увидите выбранную схему, с помощью которой оформлена страница, представленная ранее на рис. 22.16.

  2. В списке схем подыщите ту расцветку, которая больше всех подходит для разрабатываемого узла, например, выберите вариант Industrial (Индустриальный). В левой нижней части окна диалога есть четыре флажка, установка которых позволяет выполнять следующие действия:

  • Яркие цвета (Vivid Color) — раскрашивает выбранную схему более яркими цветами;

  • Активные рисунки (Active Graphics) — усложняет рисунок ссылок, кнопок и маркеров, добавляя тени и мелкие детали;

  • Фоновый рисунок (Background Picture) — размещает на заднем плане страницы фоновый рисунок;

Рис. 22.17. Выбор стандартной схемы

  • Применить с помощью CSS (Apply Using CSS) — назначает новое оформление с помощью каскадных таблиц стилей, добавляемых в HTML-код. Каскадные таблицы со стилями можно подключать к любому HTML-файлу, формируя на основе этих стилей оформление элементов страницы. При таком подходе для изменения вида целого web-узла достаточно лишь модифицировать таблицы стилей, которые, как правило, хранятся в отдельных файлах. Это помогает администраторам больших узлов сохранять единообразие всех документов, размещенных на web-сервере.

  3. Установите флажки Активные рисунки и Применить с помощью CSS. Если вас не устраивают стандартные схемы, модифицируйте параметры одной из них.

  4. Щелкните на кнопке Изменить (Modify). В окне появятся дополнительные кнопки, дающие доступ к следующим инструментам:

  • кнопка Цвета (Colors) открывает окно диалога с тремя вкладками. Первая из них — Цветовые схемы (Color Schemes) — позволяет выбрать одну из стандартных расцветок, доступных для данного варианта оформления страниц. Вкладка Цветовой круг (Color Wheel) дает возможность задать цветовой тон щелчком в пространстве цветов и установить яркость раскраски с помощью движка Яркость (Brightness). Третья вкладка Другой (Custom) имеет два раскрывающихся списка. В первом можно выбрать любой стандартный элемент страницы, а затем с помощью второго назначить этому элементу произвольный цвет;

  • щелчок на кнопке Графика (Graphics) открывает окно, показанное на рис. 22.18. В раскрывающемся списке Элемент (Item) выберите любой из стандартных элементов web-страницы. С помощью кнопок Обзор (Browse) вкладки Рисунок (Picture) назначьте в качестве его оформления любой графический файл, а на вкладке Шрифт (Font) подберите тексту этого элемента подходящее начертание. Повторяя эти операции, настройте все элементы страницы;

Рис. 22.18. Изменение схемы

  • кнопка Текст (Text) позволяет настроить начертание шрифта обычного текста web-страницы и шести заголовочных стилей. Выбирайте в списке Элемент стиль, который нужно изменить, а затем с помощью списка Шрифт (Font) назначайте ему нужный шрифт.

  5. Закончив модификацию схемы и вернувшись в окно диалога Темы (Themes), щелкните на кнопке Сохранить как (Save As).

  6. Введите в открывшемся окне название Схема пользователя и щелкните на кнопке ОК, чтобы сохранить новую схему в библиотеке.

  7. Чтобы присвоить выбранную схему всем страницам узла, выберите положение переключателя Ко всем страницам (All Pages).

  8. Щелкните на кнопке ОК.

Примечание

Для подбора схемы определенной страницы откройте HTML-файл в ре- жиме Страница или выделите его в окне переходов. Затем выполните команду формат > Тема, найдите нужный вариант оформления, выберите положение переключателя Выделенная страница (Selected Page), а затем щелкните на кнопке ОК.

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


Упражнение 7. Общие поля элементов

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

  1. Щелкните на значке Переходы панели режимов.

  2. Дважды щелкните на странице Товары, чтобы открыть ее в режиме просмотра Страница. Общие поля страницы отделяются от основного содержания пунктирными линиями (рис. 22.19).

Рис. 22.19. Общие поля

  3. Выберите команду Формат > Общие границы (Format > Shared Borders). Откроется окно диалога, показанное на рис. 22.20. В нем есть четыре флажка, инициирующих размещение общего поля с каждой из четырех сторон страницы:

  • Сверху (Top) — верхнее поле, в котором обычно размещается баннер (красочный заголовок, иногда с набором гиперссылок);

  • Слева (Left) — поле вдоль левого края страницы с кнопками ссылок на подчиненные страницы;

  • Справа (Right) — общее поле вдоль правого края, которое, как правило, не используется;

  • Внизу (Bottom) — поле по нижнему краю страницы. В нем обычно размещаются ссылки на дочерние, родительскую и домашнюю страницы, выполненные в текстовой форме на тот случай, если браузер пользователя не может отображать графические объекты либо в нем отключен соответствующий режим.

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

  5. Снова выберите команду Формат > Общие границы.

  6. Установите флажок Восстановить границы, используемые по умолчанию на веб-узле (Reset Borders For Current Page To Web Default).

  7. Щелкните на кнопке ОК. Frontpage вернет на страницу элементы навигации, размещаемые по умолчанию.

  8. Командой Файл > Закрыть Веб-узел (File > Close Web) закройте web-узел и все открытые web-страницы, подтверждая сохранение выполненных изменений.

Рис. 22.20. Настройка общих полей


Контрольное упражнение

Чтобы закрепить навыки работы со структурой web-узла, попробуйте самостоятельно выполнить следующие действия.

  1. Откройте web-узел, созданный на этом занятии.

  2. Включите режим переходов.

  3. Оставьте видимой на экране только страницу Товары и все подчиненные ей страницы.

    • Как в окне переходов оставить видимой только одну ветвь web-узла?

  4. Увеличьте масштаб просмотра до 100 %.

  5. Перетащите страницу Справочник вниз, чтобы ссылки на нее появлялись ниже ссылок остальных страниц группы Товары.

  6. Добавьте для страницы Товары задачу, информирующую о необходимости изменения оформления этой страницы.

  7. Запустите эту задачу, чтобы открыть страницу Товары в режиме Страница.

    • Какими приемами можно открыть web-страницу врежиме про смотра Страница?

  8. Выберите для активной страницы схему оформления Expedition.

  9. Измените цвета схемы, выбрав стандартный вариант Barcode.

  10. Назначьте заголовкам первого уровня новой схемы шрифт Anal.

  11. Сохраните полученную схему под именем Новая схема.

  12. Закройте web-страницу Товары, не сохраняя выполненные изменения.

  13. Пометьте задачу, добавленную на шаге 7, как выполненную.

    • Как изменить статус задачи?

  14. Закройте web-узел.


Подведение итогов

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

Следующее упражнение посвящено вопросам разработки и модификации отдельных web-страниц с помощью встроенного HTML-редактора приложения Frontpage.


Занятие №2

Редактор web-страниц

ТЕМА ЗАНЯТИЯ

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

  • форматировать текст;

  • строить таблицы и списки;

  • настраивать гиперссылки и закладки;

  • добавлять рисунки;

  • изменять фон web-страницы;

  • просматривать HTML-код;

  • проверять страницу в браузере.

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

В состав Frontpage входит мощный редактор web-страниц. Вы уже встречались с ним, знакомясь с режимом просмотра Страница. Чтобы модифицировать web-страницу, достаточно открыть ее в указанном режиме с помощью команды Файл > Открыть (File > Open) или просто дважды щелкнуть на значке страницы в любом из других режимов Frontpage.

Редактор страниц Frontpage во многом похож на Word. Но формат HTML имеет свои правила построения файлов, вносящие определенную специфику в процесс создания документов. На этом занятии вы познакомитесь с основными приемами разработки содержания страниц.


Текст

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


Упражнение 1. Форматирование текста

На страницах, созданных мастером web-узла, расположены комментарии и текстовые местозаполнители, которые нужно заменить реальным содержанием. Давайте приведем к надлежащему виду некоторые страницы узла. Остальные файлы вы можете модифицировать самостоятельно.

  1. Чтобы открыть web-узел, созданный на предыдущем занятии, выберите команду Файл > Открыть веб-узел (File > Open Web), выделите в окне диалога открытия узла папку Corporate, название которой совпадает с именем, данным узлу, и щелкните на кнопке Открыть (Open).

  2. Щелчком на кнопке Переходы панели режимов перейдите в режим переходов.

  3. Дважды щелкните на прямоугольнике страницы Товары. Выбранная web-страница откроется в режиме Страница, который позволяет изменять содержание документов Web (рис. 23.1).

  4. Щелчком выделите комментарий, расположенный в верхней части страницы, и введите текст То в ары компании Геркулес отличаются высоким качеством!

  5. Выделите слово Геркулес и щелкните на кнопке Полужирный (Bold) панели инструментов Форматирование (Formatting).

  6. Раскройте палитру кнопки Цвет текста (Font Color) и выберите в ней красный квадрат.

Рис. 23.1. Исходный вид страницы Товары

  7. В раскрывающемся списке Размер шрифта (Font Size) выберите пункт 4 (14pt). Теперь слово Геркулес выделено жирным крупным шрифтом'красного цвета.

  8. Щелкните правее восклицательного знака.

  9. Выберите команду Вставка > Горизонтальная линия (Insert > Horizontal Line). Текст первого абзаца окажется отделенным от остального содержания линией. Горизонтальная линия — это единственный графический элемент, который можно «нарисовать» на web-странице. Любые другие фигуры (наклонные линии, окружности, прямоугольники) размещаются только в виде файлов формата GIF или JPG, подготовленных в графическом редакторе или с помощью инструментов Frontpage.

  10. Поместите текстовый курсор правее буквы Н слова Название.

  11. Введите текст Трубы металлические.

  12. Сотрите остатки слов Название продукта!.

  13. Поместите курсор в начало строки Описание продукта 1. Введите текст Трубы толстые и тонкие любой длины.

Примечание

Текст Название продукта 1 — это гиперссылка на другую web-страницу. Чтобы заменить ее текст, нужно вставлять новые символы внутрь имеющихся слов (например, правее буквы Н), иначе добавляемые буквы могут оказаться обычным текстом страницы, расположенным за пределами ссылки.

Рис. 23.2. Обновленное содержание

  14. Нажатием клавиши Delete сотрите ненужные символы. При редактировании текста будьте внимательны. Удалив целый абзац, вы часто не сможете вернуть прежнее расположение строк нажатием клавиши Enter. Отступы нового абзаца могут оказаться другими. Если по ошибке был стерт нужный блок текста, восстановите его с помощью команды Правка > Отменить (Edit > Undo). Нажимая клавишу Enter для добавления абзаца, имейте в виду, что отступы новых абзацев часто зависят от того, в каком месте находился текстовый курсор в момент нажатия этой клавиши.

  15. Повторяя шаги 10-14, замените текст остальных абзацев страницы, приведя его в соответствие с рис. 23.2.


Упражнение 2. Таблицы

Страница Товары смотрится достаточно хорошо. Теперь стоит подумать о содержании ее дочерних страниц, предлагающих описание и цены конкретной продукции. Давайте приведем в надлежащий вид страницу с описанием ассортимента труб. Чтобы перейти к дочерней странице (или к любой другой странице, ссылка на которую присутствует в текущем документе), не нужно возвращаться в режим переходов. Достаточно активизировать соответствующую ссылку.

  1. Удерживая нажатой клавишу Ctrl, щелкните на строке текста Трубы металлические. Откроется страница Трубы, показанная на рис. 23.3. На ней уже есть маркированный список, в котором по замыслу разработчиков шаблонов Front-Page должны быть перечислены разновидности товара. Предположим, что недавно компания Геркулес расширила ассортимент труб, и вы хотите поместить список новых товаров правее имеющегося списка. Документы формата HTML не поддерживают размещение текста в несколько столбцов, поэтому web-дизайнеры часто пользуются для этих целей таблицами.

Рис. 23.3. Описание ассортимента труб

  2. Переместите курсор в начало строки Основные выгоды.

  3. Выберите команду Таблица > Вставить > Таблица (Table > Insert > Table).

  4. Вам понадобятся всего две ячейки, расположенные рядом. Поэтому введите в счетчик Число строк (Rows) открывшегося окна диалога (рис. 23.4) цифру 2.

  5. Чтобы по ширине таблица занимала не всю страницу, введите в поле Задать ширину (Specify Width) число 80, убедившись, что одноименный флажок установлен, а в расположенном рядом переключателе выбрано положение В процентах (In Percent).

Рис. 23.4. Параметры таблицы

  6. Щелкните на кнопке ОК.

  7. Выделите заголовок Основные выгоды и три строки расположенного под ним списка. Для этого протащите мышь слева от указанных абзацев.

Примечание

Разрабатывая web-страницы, не забывайте, что их будут просматривать люди, имеющие компьютеры с самыми разными дисплеями. Поэтому старайтесь задавать размеры элементов в процентах от ширины окнабраузера. Если, привыкнув к дисплею с высоким разрешением, вы добавите на страницу рисунок или таблицу шириной 1000 пикселов, то такой объект просто не поместится на экране монитора шириной 800 пикселов. Указывая размеры в процентах, можно избежать подобных неприятностей. Браузер удаленного пользователя сам масштабирует объект надлежащим образом.

  8. Нажатием клавиш Ctrl+X вырежьте выделенный текст.

  9. Щелкните в левой ячейке новой таблицы правой кнопкой мыши и выберите в контекстном меню команду Вставить (Paste).

  10. Нажатием клавиши Tab переместите курсор в правую ячейку таблицы.

  11. Введите заголовок Новые поступления.

  12. Выбором пункта Заголовок 3 (Heading 3) в списке Стиль (Style) панели инструментов Форматирование измените шрифт нового заголовка.

  13. Нажмите клавишу Enter и введите текст Трубы квадратные.

  14. Затем введите еще два пункта, отделяя их нажатиями клавиши Enter.

  15. Отредактируйте текст левой ячейки таблицы в соответствии с рис. 23.5.

Рис. 23.5. Добавление таблицы

  16. Выше новой таблицы введите абзац с кратким описанием продукции.


Упражнение 3. Списки

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

  1. Щелкните в начале строки Трубы квадратные.

  2. Нажав клавишу Shift, щелкните в конце строки Трубы гнутые, чтобы выделить все три пункта списка.

  3. Щелчком на кнопке Маркеры (Bullets) добавьте выделенным абзацам стандартные маркеры.

  4. Чтобы поместить в качестве маркеров другой рисунок, выберите команду Формат > Список (Format > Bullets And Numbering).

  5. В открывшемся окне диалога (рис. 23.6) выберите положение переключателя Задать рисунок (Specify Picture).

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

  6. Щелчком на кнопке Обзор откройте окно выбора файла. Затем дважды щелкните на значке файла smallnew.gif в папке images текущего web-узла.

  7. Щелчком на кнопке О К закройте окно настройки маркеров. Frontpage, так же как и Word, позволяет формировать не только маркированные, но и нумерованные списки. Чтобы пронумеровать пункты ассортимента стальных труб, выполните следующие действия.

  8. Выделите три абзаца левой ячейки таблицы, протащив указатель мыши слева от них.

  9. Щелкните на кнопке Нумерация (Numbering) панели инструментов Форматирование. Графические маркеры заменятся на последовательные числа/после чего списки станут такими, как показано на рис. 23.7.

Рис.23.7. Списки


Упражнение 4. Гиперссылки

При создании web-узла с помощью мастера приложение Frontpage автоматически размещает на страницах панели навигации с гиперссылками на различные web-страницы узла. Ссылки добавляются и в сам текст страниц. Но для обеспечения правильного функционирования web-узла разработчику часто приходится вставлять дополнительные ссылки или изменять параметры существующих.

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

  1. Выделите абзац Цены, щелкнув слева от него.

  2. Введите текст Низкие цены, постоянным клиентам скидки.

  3. Выберите в списке Стиль панели инструментов Форматирование вариант Обычный (Normal), чтобы отменить шрифт, свойственный заголовкам.

  4. Нажмите клавишу Entern напечатайте Дополнительную информацию о трубах можно найти в справочнике товаров или получить у менеджера по адресу info@hercules .corn. Затем снова нажмите Enter.

  5. Уберите весь текст и объекты, оказавшиеся ниже этого предложения. Они вам не понадобятся. Для этого выделяйте ненужные объекты и удаляйте их нажатиями клавиши Delete.

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

  6. Выполните команду Вид > Область задач (View > Task Pane). В появившемся окне в разделе Создать (New) щелкните на значке Пустая страница (Blank Page). Новая страница откроется в окне Frontpage.

  7. Щелкните на кнопке Сохранить (Save) панели инструментов Стандартная (Standard). В открывшемся окне диалога Сохранить как (Save As) введите имя рп -се01 .htm и щелкните на кнопке Сохранить. Сюда вы можете вносить необходимую информацию, касающуюся цен.

Рис. 23.8. Настройка гиперссылки

  8. Вернитесь на страницу prod0l. htm, щелкнув на соответствующей закладке, и выделите слово цены. Щелкните на нем правой кнопкой мыши и выберите в контекстном меню пункт Гиперссылка (Hyperlink).

Примечание

Обратите внимание на закладки с именами открытых файлов в верхней части окна в режиме страницы. Эта особенность, появившаяся впервые в Office XP, обеспечивает самый быстрый доступ к странице в процессе редактирования.

В появившемся окне диалога Добавление гиперссылки (Insert Hyperlink), показанном на рис. 23.8, в поле Текст (Text to display:) раздела Связать с (Link to) уже окажется введенным слово цены.

  9. Найдите в списке файлов папки Corporate файл с именем pri се01. htm и щелчком выделите его из списка, при этом имя данного файла будет введено в поле Адрес: (Adress:).

  10. Щелкните на кнопке ОК. Ссылка готова.

  11. Выделите два слова: справочнике товаров.

  12. Щелкните на кнопке Гиперссылка (Hyperlink) панели инструментов Стандартная.

  13. В списке вновь открывшегося окна диалога настройки гиперссылок дважды щелкните на папке Дополнения, чтобы раскрыть ее.

Рис. 23.9. Добавление гиперссылок

  14. Выделите значок Справочник.htm. Имя этого файла появится в поле Адрес:.

  15. Щелкните на кнопке ОК. Теперь на странице появились три дополнительные гиперссылки, как показано на рис. 23.9. Они будут опробованы в конце занятия.

С помощью окна диалога Добавление гиперссылки можно создавать ссылки самых разных типов. Для этого достаточно ввести полный указатель ресурса в поле Адрес: этого окна или воспользоваться одной из кнопок, расположенных правее списка файлов. Чтобы ссылка переносила пользователя в определенную точку web-страницы, выберите в раскрывающемся списке Закладка (Bookmark) одну из закладок, имеющихся на целевой web-странице.


Рисунки

Одним из основных преимуществ гипертекстовых документов перед более ранними форматами данных, распространявшихся через Интернет, является возможность размещения в HTML-файлах рисунков. Графические объекты web-страниц хранятся в отдельных файлах форматов GIF, JPEG или PNG. Примерами таких объектов могут служить маркеры списка, созданного в упражнении 3. Но графические возможности HTML-файлов и редактора Frontpage не ограничиваются этим примером.


Упражнение 5. Добавление рисунка

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

  1. Поместите текстовый курсор в начало первой строки web-страницы.

Примечание

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

  2. В строке меню приложения раскройте подменю Рисунок (Picture) меню Вставка (Insert) Откроются все возможности вставки рисунка, предоставляемые приложением:

  • Картинки (Clip Art) — возможность выбрать рисунок из одноименной библиотеки;

Рис. 23.10. Добавление рисунка

  • Из файла (From File) — при запуске этой команды открывается окно диалога, показанное на рис. 23.10. Кнопки левого ряда ускоряют доступ к нужным файлам. Например, чтобы вставить рисунок, имеющийся в наборе файлов разрабатываемого web-узла, нужно щелкнуть на кнопке Мои документы и выбрать нужный файл из списка; щелчок на кнопке Рабочий стол (Desktop) облегчает доступ к графическому файлу, расположенному налокальном или сетевом диске; кнопка вебпапки (Web Folders) позволяет просматривать папки и файлы на web-серверах и сетевых устройствах и выбирать нужные графические файлы. В поля Имя файла (File Name) и Тип файла (FileType) можно ввести полный указатель ресурса, добавив таким образом объект с заранее известным адресом;

  • Со сканера или камеры (From Scanner or Camera) — возможность получать изображение непосредственно со сканера или другого устройства, поддерживающего технологию TWAIN;

  • Создать фотоколлекцию (New Photo Gallery) — выбор этой команды позволяет вставлять фотографии из коллекции фотографий.

  3. Давайте воспользуемся первым вариантом. Щелкните на кнопке Clip Art.

  4. В области задач в окне Вставка картинки (Clip Art Gallery) введите в текстовое поле слово Am ma Ls (Животные) и щелкните на кнопке Найти (Search).

  5. Найдите рисунок тигра, щелкните на нем и с помощью указателя мыши перетащите его на web-страницу.

  6. Щелчком выделите рисунок.

  7. Перетащите угловой маркер габаритной рамки рисунка, уменьшив изображение до нужного размера.

  8. Щелкните на рисунке правой кнопкой мыши и выберите в контекстном меню команду Свойства рисунка (Picture Properties).

Примечание

Не размещайте на web-страницах слишком большие рисунки, на их загрузку с удаленного сервера требуется много времени. Это раздражает пользователей.

Рис. 23.11. Параметры рисунка

  9. На вкладке Общие (General), показанной на рис. 23.11, выберите положение переключателя GIF, чтобы указать формат, в котором должен храниться рисунок.

  10. Щелкните на кнопке Обзор, расположенной справа от поля Расположение (Location).

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

  12. Раскройте вкладку Вид (Appearance). Чтобы текст, расположенный справа от рисунка, выровнялся по середине рисунка, выберите в раскрывающемся списке Выравнивание (Alignment) пункт По центру (Center).

  13. Щелкните на кнопке ОК.

  14. Чтобы сохранить выполненные изменения, выберите команду Файл > Сохранить (File> Save).

  15. В окне диалога Сохранение внедренных файлов (Save Embedded Files), показанном на рис. 23.12, щелкните на кнопке Сменить папку (Change Folder).

Рис. 23.12. Сохранение внедренного объекта

  16. Дважды щелкните в открывшемся окне на папке images, а затем на кнопке ОК, указав этим папку, в которой должен храниться файл добавленного рисунка.

  17. Щелкните на кнопке Переименовать (Rename) и введите имя logo.gif.

  18. Затем щелкните на кнопке ОК.

Эта операция приведет к преобразованию изображения формата WMF, полученного из библиотеки Clip Art, в формат GIF, который в отличие от WMF может демонстрироваться любым браузером. В итоге логотип будет записан в файл logo.gif.


Упражнение 6. Фон страницы

Хорошо подобранный фон помогает пользователю воспринимать информацию. С помощью фона можно выделить определенные области страницы и просто при

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

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

Чтобы изменить фон, выполните следующие действия.

  1. Выберите команду Формат > Тема.
  2. В открывшемся окне диалога Темы, показанном на рис. 22.18, установите флажок Фоновый рисунок и щелкните на кнопке Изменить, а затем на кнопке Графика.
  3. В открывшемся окне диалога Изменение темы (Modify Theme) в раскрывающемся списке Элемент выберите Фоновый рисунок (Background Picture) и щелкните на кнопке Обзор, как показано на рис. 23.13.
  4. В появившемся окне диалога Открытие файла (Open) раскройте папку Offi-ceXP\OfficelO\Bitmaps\Styles и дважды щелкните на значке файла acblends.gif.
  5. Щелкнув на кнопке ОК, перейдите к окну диалога Темы. В окне Образец темы (Sample of Theme) посмотрите на результат сделанных изменений.
  6. Убедитесь, что переключатель Применить тему (Apply Theme to) установлен в положение К выбранным страницам и щелкните на кнопке ОК.

Рис. 23.13. Изменение фона страницы

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

Рис. 23.14. Web-страница с рисунком и измененным фоном

  7. Щелкните на странице правой кнопкой мыши и выберите из контекстного меню пункт Свойства страницы (Page Properties) В открывшемся одноименном окне диалога раскройте вкладку Общие.

  8. В поле Название (Title) введите текст Трубы от компании Геркулес. При загрузке страницы этот текст будет появляться в заголовке окна браузера. Щелкните на кнопке ОК.

Если для страницы тема не установлена, то изменение фона можно произвести с помощью команды Формат > Фон (Format > Background), в появившемся окне диалога установить флажок Фоновый рисунок, щелкнуть на кнопке Обзор и в окне диалога Выбор рисунка фона (Select Background Pictures) выбрать файл с расширением GIF, например тот, что использован в этом упражнении.


Специальные объекты

Упражнение7. Панель навигации

Панели навигации — это особые объекты Frontpage, которые позволяют автоматически добавлять и обновлять ссылки на страницы, иерархически связанные с текущей. Из упражнения 7 предыдущего занятия вы уже узнали, как добавлять и убирать панели навигации с помощью команды Общие границы (Shared Borders). Теперь пришло время научиться настраивать панели навигации конкретных страниц.

В левой части web-страницы Трубы есть местозаполнитель [Измените свойства этой панели для отображения на ней гиперссылок (Editthe properties forthis Link Bar to display hyperlinks here)], представляющий собой ненастроенную панель навигации. Давайте изучим ее свойства.

Рис. 23.15. Вкладка Общие окна диалога Свойства панели ссылок

  1. Щелкните на указанном местозаполнителе правой кнопкой мыши и выберите команду Свойства панели ссылок (Link Bar Properties). Откроется окно диалога с двумя вкладками, показанное на рис. 23.15. Вкладка Общие дает возможность указать, какие гиперссылки должны появляться в панели ссылок.

Положения переключателя раздела Добавляемые гиперссылки (Hyperlinks To Add То Page) позволяют добавлять следующие группы гиперссылок:

  • Родительский уровень (Parent Level) — на страницы, расположенные в навигаторе на уровень выше текущей;

  • Тот же уровень (Same Level) — на страницы того же уровня подчиненности, связанные в навигаторе с одной и той же родительской страницей;

  • Назад и далее (Back And Next) — на предыдущую и последующую страницы той же группы подчиненности, что и текущая;

  • Дочерний уровень (Child Level) — ссылки на дочерние страницы относительно текущей;

  • Глобальный уровень (Top Level) — ссылки на страницы самого верхнего уровня иерархии навигатора;

  • Дочерние страницы домашней (Child Page Under Home) — ссылки на страницы второго уровня иерархии навигатора.

Кроме того, флажки Домашняя страница (Home Page) и Родительская страница (Parent Page) позволяют независимо от положения переключателя помещать в панель навигации ссылки соответственно на домашнюю и родительскую web-страницы узла.

  2. Выберите положение переключателя Назад и далее.

Рис. 23.16. Панели навигации

  3. Установите флажки Домашняя страница и Родительская страница.

На вкладке Стиль (Style) приводятся образцы стандартных стилей оформления гиперссылок и предоставляется возможность установить их ориентацию.

  4. С помощью полосы прокрутки в разделе Выберите стиль выберите подходящий стиль оформления гиперссылок и щелкните на нем.

  5. Щелкните на кнопке ОК.

  6. Прокрутите web-страницу вниз. Вы увидите в ее нижней части еще одну панель навигации с текстовыми ссылками.

  7. Выделите эту панель и, чтобы открыть окно параметров панели, нажмите клавиши Alt+Enter.

  8. Выберите положение переключателя Same Level.

  9. Установите флажки Home Page и Parent Page.

  10. Щелкните на кнопке ОК. Теперь ссылки панелей будут выглядеть так, как показано на рис. 23.16.

Примечание

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


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

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

  1. Выберите команду Вид > Список папок (View > Folder List), чтобы вывести в окно Frontpage панель списка файлов и папок web-узла.

  2. Дважды щелкните на значке файла prod04.htm, чтобы открыть его в окне редактора.

  3. Прокрутите web-страницу в самый низ и щелкните в начале слов Phone.

  4. Выберите команду Вставка > Закладка (Insert > Bookmark).

  5. В поле Имя закладки (Bookmark Name) открывшегося окна диалога (рис. 23.17) введите слова end_of_page.

Рис. 23.17. Добавление закладки

  6. Щелкните на кнопке ОК.

  7. Закройте файл prod04.htm.

  8. При появлении соответствующего запроса подтвердите необходимость со хранения выполненных изменений.

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

  9. Введите в конце страницы Трубы фразу Обратите внимание на наши дешевые гвозди.

  10. Выделите слово г возди, затем щелкните на нем правой кнопкой мыши и выберите команду Гиперссылка.

  11. В списке открывшегося окна диалога создания гиперссылки щелкните на значке файла prod04.htm.

  12. В том же окне щелкните на кнопке Закладка (Bookmark), а затем на имени закладки в появившемся окне диалога Выделить место в документе (Select Place in Document) и щелкните на кнопке ОК. В поле Адрес: окна диалога Добавление гиперссылки будет введено имя prod04.htm#end_of_page, как показано на рис. 23.18.

Рис. 23.18. Ссылка на закладку

  13. Щелкните на кнопке ОК.

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


Просмотр страницы

Окно режима просмотра Страница имеет три вкладки, открывающие доступ к трем различным вариантам демонстрации web-страницы. Первый из них — Обычный (Normal) предназначен для разработки страниц с помощью средств редактирования приложения Frontpage. Второй режим — HTML — позволяет просматривать и корректировать код web-страницы, сгенерированный редактором. Наконец, третья вкладка дает возможность, не выходя из Frontpage, предварительно просмотреть построенную web-страницу.


Упражнение 9. HTML-код

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

  1. Не выходя из окна web-страницы Трубы, выберите команду Вид > Показать теги (View > Reveal Tags).

Рис. 23.19. Теги документа

В этом режиме (рис. 23.19) на экране отображается не только содержимое web-страницы, но и управляющие конструкции — теги, — которые и формируют имеющееся форматирование документа. В HTML-документе все теги заключены в угловые скобки. Они делятся на открывающие и закрывающие, которые отличаются от первых наличием символа «/». Между одноименными открывающим и закрывающим тегами размещается текст, форматирование которого задается этими тегами. Например, между тегами <table> и </table> заключено содержимое таблицы. Некоторые теги, такие как <hr>, который добавляет на страницу горизонтальную линию, не имеют парного закрывающего тега. Многоуровневое вложение подобных конструкций позволяет задавать любые самые сложные варианты форматирования документа. Указанный режим демонстрации страницы помогает понять ее структуру и облегчает поиск ошибок.

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

  3. Чтобы получить полный доступ к коду страницы, щелкните на корешке HTML. Вы увидите текстовый документ, на основе которого генерируется web-страница. Давайте попробуем скорректировать его.

  4. Прокрутите содержимое окна до текста Тонкие медные трубы.

  5. Введите перед словом медные теги <bxfont color=»c90000">.

  6. После этого слова добавьте теги </font></b>.

Примечание

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

  7. Щелкните на корешке Обычный, чтобы вернуться в обычный режим просмотра страницы.

  8. Нажатием клавиш Ctrl+/ отключите демонстрацию тегов. Обратите внимание, что теги, добавленные в режиме редактирования исходного кода, окрасили слово медные в красный цвет и задали ему жирное начертание.

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


Упражнение 10. Предварительный просмотр

Режим предварительного просмотра показывает web-страницу такой, какой она будет в окне браузера.

  1. Чтобы включить такой просмотр, щелкните на корешке Просмотр (Preview). Теперь на странице отсутствуют пунктирные линии, показывающие границы разделов страницы. Изменилась рамка таблицы, стали другими шрифт и интервалы между строками. Для активизации гиперссылок теперь не нужно нажимать клавишу Ctrl. Достаточно просто щелкнуть на ссылке. В целом обычный режим просмотра очень похож на результирующую страницу, он позволяет достаточно точно оценивать расположение объектов и оформление текста. Но, редактируя документ, не забывайте периодически обращаться к вкладке Просмотр, которая точнее показывает общий вид элементов страницы. Перед публикацией web-узла обязательно просмотрите его страницы в окне браузера. Если на вашем компьютере установлено несколько браузеров, откройте узел в каждом из них, внимательно изучите все детали и убедитесь, что все браузеры корректно отображают введенную информацию и графические объекты. Имейте в виду, что Frontpage позволяет оперативно загружать web-страницы в любой браузер.

  2. Щелчком на кнопке Сохранить панели инструментов Стандартная сохраните измененный вариант страницы Трубы.

  3. Выберите команду Файл > Просмотр в обозревателе (File > Preview In Browser).

  4. В открывшемся окне диалога выберите пункт Internet Explorer, а затем щелкните на кнопке Просмотр (Preview). Страница Трубы, сформированная в упражнениях этого занятия, появится в окне Internet Explorer . Давайте проверим работу ссылок, добавленных на эту страницу.

  5. Переместите указатель на слова справочник товаров, чтобы значок указателя принял форму ладони, и щелкните мышью. Страница Трубы сменится страницей Справочник товаров.

  6. Чтобы вернуться обратно, щелкните на кнопке Назад на Трубы от компании Геркулес панели инструментов Internet Explorer.

  7. Повторяя шаги 5 и 6, проверьте действие ссылки цены.

  8. Щелкните на гиперссылке гвозди. Обратите внимание, что это действие не только открывает страницу Гвозди, но и прокручивает ее до закладки end_of_ page, вставленной в конец этой страницы.

  9. В текстовой панели навигации, расположенной в нижней части страницы Гвозди, щелкните на ссылке Up, чтобы переместиться к странице Товары — родительской по отношению к трем web-страницам, рассмотренным выше.

  10. Чтобы вернуться на страницу Трубы, щелкните на ссылке Трубы металлические.

  11. Щелкните на ссылке info@hercules. corn. Эта операция запустит Outllook и откроет окно нового сообщения, в поле Кому (То) которого уже будет добавлен электронный адрес получателя. Чтобы отослать письмо по адресу, указанному в гиперссылке, останется только ввести текст и щелкнуть на кнопке Отправить (Send).

  12. Закройте окно Internet Explorer.

  13. В приложении Frontpage выберите команду Файл > Закрыть веб-узел (File > Close Web). При появлении запросов о необходимости сохранения изменений щелкайте на кнопке Да.


Контрольное упражнение

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

  1. Откройте web-узел, созданный в предыдущем упражнении.

    • Как быстро открыть web-узел, с которым вы недавно работали?

  2. Выведите в режиме Страница содержимое файла Справочник.htm, сохраненного в папке Дополнения.

  3. Добавьте на страницу Справочник товаров таблицу с тремя столбцами.

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

  5. Назначьте ячейкам таблицы желтый фон.

    • Как изменить фон ячеек таблицы?

  6. Добавьте на web-страницу тот же логотип, который был вставлен на страницу Трубы.

  7. Назначьте фон страницы, идентичный выбранному в упражнении 6.

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

  9. Измените расположенную слева панель навигации так, чтобы в нее выводились кнопки страниц того же уровня, а также ссылки на домашнюю и родительскую страницы.

  10. В качестве текста, выводимого в заголовке браузера при открытии данной страницы, назначьте предложение Справочник товаров компании Геркулес.

    • Как настроить текст заголовка окна?

  11. Просмотрите HTML-код полученной страницы.

  12. Откройте страницу Справочник товаров в окне браузера Internet Explorer и проверьте работу гиперссылок.

  13. Сохраните изменения и закройте web-узел.


Подведение итогов

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

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


Занятие №3

Усовершенствование web-страниц

ТЕМА ЗАНЯТИЯ

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

  • компоненты Frontpage;

  • изображение по расписанию;

  • дата и время:

  • бегущая строка;

  • кадры;

  • звук;

  • видеоклип;

  • динамические эффекты.


Компоненты 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, чтобы обеспечить автоматическую замену этого рисунка другим на определенный интервал времени. Для этого выполните следующие шаги.

  1. Откройте в приложении Frontpage узел Corporate.

  2. Выведите содержимое страницы Трубы (файл prodOl.htm) в режиме просмотра Страница.

  3. Поместите курсор правее изображения тигра.

  4. Выберите команду Вставить > Рисунок ^ Картинки (Insert > Picture > Clip Art).

  5. В текстовое поле в области задач приложения введите слово Animаls (Животные), затем щелкните на кнопке Найти. Поставьте указатель мыши на рисунок коровы и выберите в контекстном меню команду Вставить (Insert). На web-странице появится второе изображение, как показано на рис. 24.1.

  6. Щелчком на кнопке Сохранить панели инструментов Стандартная сохраните новый вариант страницы.

  7. В открывшемся окне диалога Сохранение внедренных файлов щелкните на кнопке Переименовать, введите имя logo2 . gi f и щелкните на кнопке ОК.

  8. Выделите изображение коровы и нажатием клавиши Delete удалите его. Выполненные шаги 3-8 никак не изменили web-страницу. Они необходимы, чтобы преобразовать векторный рисунок библиотеки Clip Art в растровое изображение формата GIF. Если у вас есть два заранее подготовленных файла формата GIF с соответствующими рисунками, эти шаги можно опустить.

  9. Щелчком выделите изображение тигра.

  10. Выберите команду Вставка > Веб-компонент. В появившемся окне диалога Вставка компонента Веб-узла выделите в списке Тип компонента: (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 и щелкните на кнопке ОК.

  13. Щелкните на нижней кнопке Обзор.

  14. Выберите файл logo.gif и щелкните на кнопке ОК.

  15. С помощью раскрывающихся списков группы Окончание (Ending) установи те дату, отстоящую вперед от текущей примерно на два месяца.

  16. Щелкните на кнопке ОК.

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

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

  17. Выберите команду Файл > Просмотр в обозревателе. В качестве логотипа в окне Internet Explorer появится изображение коровы.

  18. Дважды щелкните на часах Панели задач Windows.

  19. В окне диалога настройки времени, показанном на рис. 24.3, увеличьте на 1 номер года.

  20. Щелкните на кнопке ОК.

  21. В окне Frontpage щелкните на кнопке Сохранить, чтобы обновить дату страницы.

  22. Переключитесь в окно Internet Explorer и нажмите клавишу F5, чтобы обновить документ. Теперь на страницу вернулось изображение тигра, так как новая дата не попадает во временной интервал компонента Рисунок с расписанием.

  23. Закройте окно браузера.

Примечание

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


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

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

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

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

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

Примечание

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

  3. Щелкните на дате правой кнопкой мыши и выберите команду Свойства даты и времени (Date And Time Properties).

  4. В открывшемся окне диалога, показанном на рис. 24.5, выберите положение Дату последнего автоматического обновления страницы (Date This Page Was Last Automatically Update) переключателя Отображать (Display). Этот вариант задания даты чрезвычайно удобен, но он работает только при использовании расширений модуля Personal Web Server компании Microsoft.

  5. В раскрывающемся списке Формат даты (Date Format) выберите подходящий вариант вывода даты.

  6. Чтобы добавить индикатор времени, выберите один из пунктов раскрывающегося списка Time Format (Формат времени).

  7. Щелкните на кнопке ОК. Поскольку для нормальной работы модифицированного компонента требуется Personal Web Server, следует вставить соответствующий комментарий, который не виден удаленному пользователю, но появляется перед разработчиком узла в окне Frontpage.

  8. Щелкните в начале строки Дата изменения и выберите команду Вставка > Примечание (Insert > Comment).

  9. В открывшемся окне диалога введите текст Внимание ! Данный компонент даты и времени работает только под управлением Personal Web Server.

  10. Щелкните на кнопке ОК.

  11. Нажмите клавишу Enter.

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

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

  12. Замените текст Дата изменения на вариант Дата последнего обновления. Теперь страница будет выглядеть так, как показано на рис. 24.6.

  13. Щелкните на корешке Просмотр. Обратите внимание, что в этом режиме (так же, как и в окне браузера) комментарий не виден.


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

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

  1. Выделите строку Низкие цены, постоянным клиентам скидки, щелкнув мышью слева от нее.

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

  3. В открывшемся окне диалога (рис. 24.7) выберите положение Влево (Left) переключателя Направление (Direction), чтобы выбрать направление движения строки.

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

  4. Сбросьте флажок Постоянно (Continuously).

  5. Введите в счетчик раздела Повторы (Repeat) число 3.

  6. При необходимости измените другие параметры, после чего щелкните на кнопке ОК.

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

  8. Закройте web-узел командой Файл > Закрыть веб-узел.


Кадры

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


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

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

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

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

  1. Выберите команду Файл > Создать > Страницу или веб-узел (File > New > Web or Page).

  2. В области задач в разделе Создание с помощью шаблона щелкните на значке Шаблоны веб-узлов (Web Site Templates).

  3. В поле Укажите расположение нового веб-узла (Specify The Location Of The New Web) открывшегося окна диалога введите путь папки узла и имя Frames.

  4. Дважды щелкните на значке Одностраничный веб-узел (One Page Web).

  5. Выберите в подменю Файл > Последние веб-узлы (File > Recent Webs) пункт Corporate, чтобы открыть узел, созданный на предыдущих занятиях.

  6. Щелкните на кнопке Папки (Folders) панели режимов.

  7. Нажмите клавишу Ctrl и, не отпуская ее, щелкайте на именах файлов, чтобы выделить группу страниц в соответствии с рис. 24.8.

  8. Щелкните на одном из выделенных файлов правой кнопкой мыши и выберите в контекстном меню команду Копировать (Copy).

  9. Закройте узел Corporate.

  10. В окне узла Frames выберите команду Вид > Папки (View > Folders), щелкните в области списка файлов правой кнопкой мыши и выберите команду Вставить. В результате этих операции часть страниц узла Corporate будет перенесена в узел Frames.

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

  11. Щелкните на значке режима Страница.

  12. В области задач в разделе Создание с помощью шаблона щелкните на значке Шаблоны страниц... (Page Templates...).

  13. В окне диалога Шаблоны страниц (Page Templates) щелкните на вкладке Стра ница рамок (Frames Pages).

  14. Щелкните на значке Колонтитулы и оглавление (Header, Footer And Contents).

  15. Щелкните на кнопке ОК. В окне Frontpage появится страница с четырьмя пустыми кадрами и несколькими кнопками, позволяющими связывать кадры с определенными HTML-файлами.

  16. Чтобы создать файл кадра заголовка, щелкните на верхней кнопке Создать страницу (New Page).

  17. Щелкните на кнопке Сохранить панели инструментов Стандартная, введите в открывшемся окне диалога имя topframe. htm и щелкните на кнопке Сохранить. Теперь в верхний кадр будет выводиться содержимое страницы topframe. htm.

  18. Вслед за этим Frontpage попросит назначить имя главного файла, управляющего кадрами. Введите в окно диалога имя index, htm и щелкните на кнопке Сохранить.

Примечание

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

  19. Щелкните на левой кнопке Создать страницу.

  20. Повторите шаг 17, введя для левого кадра имя leftframe. htm.

  21. Щелкните на нижней кнопке Создать стра н и цу и сохраните содержимое ниж него кадра в файле bottomframe.htm.

  22. Щелкните на единственной из оставшихся кнопок Задать начальную страницу (Set Initial Page).

  23. Выберите в списке файл products.htm и щелкните на кнопке ОК. В основном кадре сразу же появится содержимое этой страницы, которая была скопирована из узла Corporate.


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

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

  1. Щелкните в верхнем кадре.

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

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

  3. В области задач в окне Вставка картинок (Clip Art) введите в текстовое роле слово Animals (Животные), затем щелкните на кнопке Найти; из появившегося набора изображений остановитесь на картинке с тигром и выберите в контекстном меню команду Вставить. В результате в верхнем кадре появится логотип компании.

  4. Чтобы настроить размеры логотипа, щелчком выделите его и нажмите клавиши Alt+Enter. Откроется окно диалога параметров изображения, показанное на рис. 24.9.

  5. Щелкните на вкладке Вид.

  6. Установите флажок Задать размер (Specify size).

  7. В счетчик Высота (Height) введите число 70.

  8. В раскрывающемся списке Выравнивание выберите пункт По центру.

  9. Щелкните на кнопке ОК.

  10. Чтобы рисунок был виден целиком, перетащите границу верхнего кадра немного вниз.

  11. Щелкните правее добавленного изображения и введите слово Геркулес.

  12. Выделите название компании и щелкните па кнопке Полужирный панели инструментов Форматирование.

  13. Чтобы увеличить шрифт, выберите в раскрывающемся списке Размер шрифта пункт 7 (36 pt).

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

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

  15. Перетащите границу нижнего кадра вниз, чтобы по возможности уменьшить его размеры. Теперь страница с кадрами будет выглядеть так, как показано на рис. 24.10.


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

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

  1. Щелкните в левом кадре страницы.

  2. Введите слово Продукция и нажмите клавишу Enter.

  3. Затем введите слова Трубы, Панели и Гвозди, отделяя их друг от друга нажатиями клавиши Enter.

  4. Выделите четыре пункта левого кадра, протащив мышь слева от них.

  5. Щелкните на кнопке Маркеры панели инструментов Форматирование. Оглавление узла готово. Теперь нужно настроить гиперссылки.

  6. Выделите слово Продукция, щелкните на нем правой кнопкой мыши и выберите в контекстном меню команду Гиперссылка.

  7. В открывшемся окне диалога (рис. 24.11) из списка файлов выделите файл products.htm и щелкните на нем. При этом имя файла появится в текстовом поле Адрес:.

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

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

  8. Щелкните на кнопке Выбор рамки (Target Frame).

  9. В разделе Текущая страница рамок (Current Frames Page) окна диалога Конечная рамка (Target Frame) щелкните на правом кадре/чтобы в поле Настройка объекта (Target Setting) появилось слово main. Это заставит браузер выводить файл, на который указывает гиперссылка, в правый кадр.

  10. Щелкните два раза на кнопке ОК.

  11. Повторяя шаги 6-10, назначьте словам Трубы, Панели и Гвозди соответственно ссылки на файлы prodOl.htm, prod02.htm и prod04.htm. He забывайте в качестве целевого выбирать правый кадр.

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

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

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

  12. Щелкните в области страницы с кадрами правой кнопкой мыши и выберите в контекстном меню команду Свойства рамки (Frame Properties).

  13. В открывшемся окне диалога щелкните на кнопке Страница рамок (Frames Page). Эта операция откроет другое окно диалога, показанное на рис. 24.12.

  14. Раскройте вкладку Рамки (Frames).

  15. Сбросьте флажок Показать границы (Show Borders).

  16. Два раза щелкните на кнопках ОК. Теперь страница станет такой, как показано на рис. 24.15. Эта операция завершает создание структуры web-узла с кадрами. Вам остается наполнить содержанием страницы prod0l.htm, prod02.htm и prod04.htm. Сделайте это самостоятельно, открывая файлы в режиме просмотра Страница. При желании измените фон страниц и форматирование текста. Можете добавить несколько картинок или еще как-нибудь приукрасить web-узел.

  17. Чтобы познакомиться с поведением узла с кадрами и проверить действие гиперссылок, щелкните на корешке Просмотр. *

  18. Щелкните на слове Трубы. В основном окне появится содержимое страницы Трубы, а остальные три кадра останутся без изменения, дв;

Примечание

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

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


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

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


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

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

Примечание

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

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

  1. Откройте файл prodOl.htm узла Corporate в режиме Страница.

  2. Введите в конец страницы предложение Наши медные трубы могут издавать музыкальные звуки, вы слышали их при открытии этой страницы.

  3. Выберите команду Файл > Свойства (File > Properties).

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

  4. На вкладке Общие (рис. 24.14) щелкните на кнопке Обзор, расположенной в разделе Фоновый звук (Background Sound).

  5. В открывшемся окне диалога найдите папку, в которую был установлен пакет Office XP, откройте вложенную в нее папку Office10 и выберите файл reminder.wav. Щелкните на кнопке Открыть.

  6. Затем закройте окно свойств, щелкнув на кнопке ОК.

  7. Выберите команду Файл > Сохранить. В появившемся окне диалога Сохранение внедренных файлов щелкните на кнопке ОК.

  8. Чтобы прослушать звуковое сопровождение, щелкните на вкладке Просмотр. Сразу же после загрузки страницы вы услышите периодически повторяющийся звук файла reminder.wav.


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

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

  1. Чтобы открыть узел Frames, выберите команду Файл > Открыть веб-узел. С помощью раскрывающегося списка Папка и списка файлов окна диалога Открытие веб-узла (Open Web) найдите папку Frames. Раскройте ее двойным щелчком на соответствующем значке. Затем щелкните на кнопке Открыть.

  2. В панели режимов щелкните на значке Папки.

  3. В списке файлов узла дважды щелкните на значке index, htm, чтобы открыть в режиме Страница (Page) основную страницу с кадрами.

  4. Щелкните в левом кадре справа от ссылки Гвозди и нажмите клавишу Enter.

  5. Введите слово Видеоклип и, чтобы выделить его, нажмите клавиши Shift+Ctrl+<-.

  6. Щелкните на выделенном слове правой кнопкой мыши и выберите команду Hyperlink.

  7. В открывшемся окне диалога (рис. 24.15) в поле Адрес: введите имя video. htm.

  8. Щелкните на кнопке Выбор рамки..

  9. В открывшемся окне диалога в списке Общие объекты выделите пункт Страница целиком (Whole Page). Такая настройка целевого кадра заставит страницу с видеоклипом заменить страницу с кадрами, освободив видеоклипу по возможности большее пространство окна браузера.

  10. Два раза щелкните на кнопке ОК.

  11. Чтобы сохранить новый вариант домашней страницы, щелкните на кнопке Сохранить панели инструментов Стандартная. Гиперссылка на видеоклип готова. Теперь для его демонстрации нужно создать саму web-страницу.

  12. Щелкните на кнопке Создать панели инструментов Стандартная.

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

  13. На появившейся пустой странице введите слова Домашняя страница, выделите их и щелкните на кнопке Гиперссылка панели инструментов Стандартная.

  14. В окне диалога настройки гиперссылки щелкните на значке файла index, htm, а затем на кнопке ОК. Полученная ссылка позволит пользователю после просмотра видеоклипа вернуться на домашнюю страницу.

  15. Нажмите клавишу Enter.

  16. Выберите команду Вставка > Рисунок > Видеоклип (Insert > Picture > Video).

  17. В окне диалога Video (Видеоклип) выберите любой файл с расширением AVI. Если на жестком диске не оказалось ни одного видеоклипа, получите такой файл через Интернет с какого-либо web-узла.

  18. Щелкните на кнопке Открыть.

  19. Выберите команду Файл > Сохранить. В открывшемся окне диалога введите имя video, htm и щелкните на кнопке Сохранить. В окне диалога Сохранение внедренных файлов щелкните на кнопке ОК.

  20. Закройте web-страницу с видеоклипом. На экране должна появиться страница с кадрами, ранее скрытая web-страницей с видеоклипом.

  21. Выберите в меню Файл (File) команду Просмотр в обозревателе.

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

  22. В открывшемся окне диалога щелкните на пункте Internet Explorer, а затем на кнопке Просмотр. Домашняя страница с кадрами откроется в окне браузера.

  23. Щелкните на ссылке Видеоклип. Вместо страницы с кадрами в том же окне появится web-страница с видеоклипом, который автоматически запустится на воспроизведение, как показано на рис. 24.16.

  24. Чтобы после просмотра видеоролика (или даже в процессе просмотра) вернуться на страницу с кадрами, щелкните на гиперссылке Домашняя страница.


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

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

Рис. 24.17. Панель динамических эффектов

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

  1. Откройте web-узел Frames, перейдите в режим просмотра Страница и откройте в нем файл index, htm.

  2. Щелкните правой кнопкой мыши на любой панели инструментов и выберите в контекстном меню пункт Эффекты DHTML (DHTML Effects). Появится панель инструментов динамических эффектов, показанная на рис. 24.17.

  3. Щелчком выделите изображение тигра в верхнем кадре страницы.

  4. В раскрывающемся списке Выбор события (Choose An Event) выберите пункт Наведение мыши (Mouse Over).

  5. В списке Выбор эффекта (Choose An Effect) выберите пункт Замена рисунка (Swap Picture).

  6. В списке Настройка (Effect Settings) щелкните на пункте Выбор рисунка (Choose Picture). Откроется окно диалога Рисунок.

  7. В списке файлов найдите графический файл в формате GIF, например, созданный в упражнении 1 файл logo2.gif, содержащий Изображение коровы, (С:/Мои документы /MyWebs/Corporate/images/logo2.gif) и щелкните на кнопке Open (Открыть). Назначенный эффект будет инициировать смену изображения тигра на рисунок коровы в момент перемещения указателя на изображение. Когда пользователь уберет указатель в сторону, на странице вновь появится тигр.

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

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

  8. Выделите в правом кадре фразу Товары компании Геркулес отличаются высоким качеством (рис. 24.18).

  9. В раскрывающемся списке Выбор события выберите пункт Загрузка страницы (Page Load).

  10. В раскрывающемся списке Выбор эффекта выберите пункт Падение по одному слову (Drop In By Word).

  11. Щелчком на кнопке Сохранить панели инструментов сохраните выполненные изменения.

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

  13. Переместите указатель мыши на изображение тигра. Оно сменится на рисунок коровы. Уберите указатель в сторону — тигр вернется на прежнее место. Такой прием смены изображения часто используется для подсвечивания рисунков с гиперссылками. Это помогает пользователю отличать рисунки, добавленные в качестве оформления, от тех, которые позволяют получить доступ к другим ресурсам Интернета.


Контрольное упражнение

Чтобы закрепить полученные знания, попробуйте самостоятельно построить еще один web-узел с кадрами.

  1. Создайте новый узел.

  2. Скопируйте в него файлы semces.htm, servOl.htm и serv02.htm из узла Corporate.

  3. Создайте новую страницу с двумя кадрами — основным и заголовком.

  4. Свяжите верхний кадр с новой web-страницей topframe.htm, а нижний — с имеющимся файлом services, htm.

    • Под каким именем следует сохранять основной HTML-файл, управляющий кадрами?

  5. Добавьте в верхний кадр текстовые ссылки на файлы, перечисленные на шаге 2 контрольного упражнения, организовав таким образом оглавление этого небольшого узла.

    • Как следует настраивать ссылки, чтобы страницы узла загружались в нижний кадр?

  6. Правее ссылок добавьте какое-нибудь изображение из библиотеки Clip Art.

  7. Добавьте к этому изображению такой динамический эффект, чтобы рисунок улетал вверх с кадра при щелчке на нем.

    • Какие параметры эффекта следует выбрать?

  8. Назначьте фоновый звук странице serv0l.htm.

  9. Сохраните новый web-узел и закройте Frontpage.


Подведение итогов

Это занятие является завершающим. Если вы внимательно изучили все предложенные упражнения, значит, вы получили достаточные навыки работы со всеми шестью приложениями пакета Microsoft Office XP. К сожалению, не слишком большой объем книги не позволил в полной мере раскрыть все приемы работы и подробно описать многочисленные инструменты Office. Попробуйте самостоятельно изучить компоненты, не вошедшие в книгу. Не бойтесь экспериментов. Приложения Office XP имеют дружественный интерфейс и прекрасную справочную систему, которые в трудной ситуации придут вам на помощь.

Для более детального изучения описанных приложений обратитесь к книгам серии «Самоучитель» издательства «Питер», посвященным конкретным приложениям из пакета Microsoft Office XP.