Упражнение 3.1. Создание файлов фреймовой структуры и сегментированного изображения с помощью редактора FrontPage 2000

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

1. Запустите FrontPage 2000.

2. Создайте страницу с фреймами (команда FileNewPage…, на диалоговой панели New откройте вкладку Frames Pages и выберите шаблон Footnotes с двумя фреймами).

3. На верхнем фрейме нажмите кнопку New Page. Отсканируйте изображение, содержащее несколько объектов (Insert Picture From FileScan… Source…SelectAcquire…OK). Если графический файл уже имеется, вставьте его в верхний фрейм.

4. В нижнем фрейме нажмите кнопку New Page и добавьте поясняющую надпись. В контекстном меню, вызываемом щелчком правой клавиши мыши, выберите команду Frame Properties…, в диалоговой панели Frame Properties нажмите кнопку Frames Page…, и в появившейся панели Page Properties уберите галочку на флаге Show Borders. Нажмите OK.

5. Сохраните файлы: с обоими фреймами (set.htm), верхний фрейм с изображением (top.htm), нижний фрейм с поясняющей надписью (bottom.htm).

6. Создайте новый файл. Вставьте в него текстовое описание первого объекта изображения. Сохраните файл под именем object1.htm.

7. Проделайте то же самое для всех остальных объектов на изображении.

8. Откройте файл set.htm. Выделите изображение в верхнем фрейме, и с помощью инструмента Polygonal Hotspot обведите первый объект. На диалоговой панели Create Hyperlink отметьте файл object1.htm и нажмите OK.

9. Проделайте то же самое для всех остальных объектов на изображении.

10. Сохраните файлы. Запустите Internet Explorer и откройте файл set.htm. Подведите курсор к каждому из объектов и щелкните левой клавишей мыши. Проверьте правильность появляющихся в нижнем фрейме подписей.

11. Откройте во FrontPage вкладку HTML. Найдите в верхнем фрейме теги <area> и добавьте к каждому из них параметры alt=”текст пояснения” и title=”текст пояснения”, где “текст пояснения” – имя объекта, к которому относится тег. Сохраните файлы.

12. Разверните окно Internet Explorer и нажмите кнопку Обновить. Подведите курсор (не нажимая клавишу мыши) к каждому объекту и проконтролируйте появление всплывающих подсказок. В случае необходимости вернитесь во FrontPage и внесите исправления.

13. Создайте новый файл с фреймами по шаблону Contents.

14. В левом фрейме нажмите кнопку New Page и введите текст: объект1 объект2 и т.д. Перейдите на вкладку HTML и перед каждым словом объект поставьте тег <br>.

15. Раскройте вкладку Normal. На правом фрейме нажмите кнопку New Page и введите текст: Это начальная страница.

16. На левом фрейме выделите слова объект1 и нажмите кнопку Hyperlink на основной инструментальной панели. На появившейся диалоговой панели Create Hyperlink выберите файл object1.htm и нажмите OK.

17. Аналогично создайте гиперссылки на остальные файлы object.htm.

18. Сохраните файлы: из левого фрейма – под именем content.htm, из правого фрейма – под именем main.htm, файл с фреймами – под именем index1.htm.

19. Откройте в браузере Internet Explorer файл index1.htm и проверьте работу гиперссылок и смену файлов в правом фрейме.

1 Посетителю удобно работать с Web-страницами, на которых при подводе курсора к области, выделенной на изображении-карте, около курсора появляется всплывающая подсказка. Для получения этого эффекта тег <area>, генерируемый FrontPage, надо дополнить параметрами alt=”текст подсказки” title=”текст подсказки”.

2 Если в результате манипуляций с полями Rows spanned и Columns spanned не удастся получить задуманное, напишите HTML-код таблицы, как указано в разделе Таблицы.

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