Программные средства разработки Web-страниц и презентаций: Методические указания по выполнению лабораторных работ, страница 23

Рис.23. Пример страницы с описанием географического места

·  В левой колонке страницы создать заголовок, например, «Париж».

·  Ниже заголовка вставить текст с кратким описанием географического места, например:

Богатая история, король-солнце Людовик 16, Лувр и блистательный Версаль, по образу которого созданы Петергофские фонтаны, Французская революция, один из старейших университетов Сорбонна, творчество известных художников и писателей, собор Нотр-Дам, богема и русская эмиграция – вот что ассоциируется с этим городом.

Париж основан кельтами в третьем веке до нашей эры на острове Сите реки Сена. Оставили свой след в истории Парижа и римляне – они создали на левом берегу Сены новый город. Там был построен амфитеатр, форум и термы. Римский амфитеатр до сих пор сохранился в пригородном районе современного Парижа.

Сейчас Париж – один из самых густонаселенных городов мира. Собственно Париж – это лишь историческая часть города, новые районы и ближайшие пригороды называют Иль-де-Франс – «остров Франции».

·  В правую колонку страницы вставить два-три изображения, задать для них альтернативный текст (название места или достопримечательности), определить ширину 170 пикселей, переопределить физический размер (resample).

18.  Создать на изображении со страницы «Карта» активную область (Hotspot), служащую ссылкой на страницу с описанием географического места:

·  Открыть для редактирования страницу index.htm, выбрать представление Design.

·  Щелкнуть на изображении карты мышью. На панели инструментов Pictures нажать кнопку выбора горячих областей Select , а затем кнопку, определяющую вид выделения, например, Polygonal Hotspot  – указатель мыши примет вид карандаша.

·  Щелкнуть левой кнопкой мыши рядом с областью карты, которую надо выделить, а затем обвести контур вокруг этой области, щелкая мышью в точках поворота линии. Замкнуть контур «горячей» области, щелкнув на исходной точке контура. Появится окно создания гиперссылки. В окне Insert Hyperlink выбрать из списка страниц узла файл нужной страницы, например, paris.htm, затем щелкнуть на кнопке ScreenTip и добавить текстовую подсказку для ссылки, например, «Париж», затем щелкнуть на кнопке Target Frame и выбрать целевой фрейм, как ранее для ссылок меню (рис.22), нажать ОК.

ПРИМЕЧАНИЕ: При необходимости выйти из режима выделения области нужно дважды щелкнуть на ней мышкой и отказаться от создания гиперссылки. Для удаления неверно выбранной области нужно нажать кнопку просмотра созданных «горячих» областей Highlight Hotspots, выделить нужную область, щелкнув на ней мышкой, и нажать клавишу Del.

·  Сохранить изменения и проверить действие активной области в окне браузера.

·  Аналогичным образом создать активные области на карте для страниц с описанием остальных географических мест.

Задание 6. Добавить интерактивное поведение для некоторых элементов сайта.

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

·  В левой колонке страницы под основным текстом ввести текст комментариев к рисункам. На странице «Париж» вставлены изображения Эйфелевой башни, Нотр-Дам и Елисейских полей. Текст каждого комментария должен быть заключен в один абзац P, если следует разбить текст комментария на несколько строк, следует использовать разрыв строки BR (установить курсор в нужное место и дважды щелкнуть мышью на инструменте Break  панели инструментов Toolbox).

Пример текста комментариев:

Эйфелева башня – самая узнаваемая архитектурная достопримечательность Парижа. Она была построена за 3 года на Марсовом поле в 1889 году ко Всемирной выставке в Париже, посвященной 100-летней годовщине Революции.