9.Просмотрите сайт в браузере, щелкнув на кнопке Просмотр в браузере.
14.2.Контрольные вопросы
1.Для чего предназначен редактор FrontPage?
2.Назовите основные элементы интерфейса редактора FrontPage?
3.Для чего используется Тема при оформлении веб-страницы?
4.Какие возможности по форматированию текста имеет FrontPage?
14.3. Контрольные задания
Задание. Создайте макет сайта с фреймовой структурой главной страницы. Разработайте удобную навигацию по страницам сайта. Разместите кнопки с динамическими эффектами, осуществляющие навигацию по страницам сайта.
Вариант 1
Создайте нисходящую иерархию данных. Основные гиперссылки вверху изменяют содержимое рамки в середине.
Вариант 2
Создайте рамку оглавления слева с гиперссылками для изменения страницы справа.
Вариант 3
Создайте рамку объявления с оглавлением и основной рамкой. Гиперссылки в объявлении изменяют рамку оглавления.
Вариант 4
Создайте колонтитул с кнопками переходов и основной рамкой снизу колонтитула. Гиперссылки в колонтитуле изменяют основную рамку.
Вариант 5
Создайте верхнего и нижнего колонтитулов для элементов перемещения. Гиперссылки в колонтитулах изменяют рамку оглавления.
Вариант 6
Создайте вложенную иерархию данных. Основные гиперссылки изменяют содержимое рамки справа.
170
Лабораторная работа № 1 5
СОЗДАНИЕ ПАНЕЛИ ГИПЕРССЫЛОК ДЛЯ НАВИГАЦИИ ПО СТРАНИЦАМ САЙТА
Цель работы: изучить использование панели гиперссылок для осуществления навигации по страницам сайта.
Методические указания
1. Основные технологические этапы
1.Определите тему сайта (например, «Спецкурсы на ФММП»). Работая над темой сайта, хорошо продумайте его информационное содержание.
2.Создайте проект сайта, т. е. определите количество, взаимосвязь и тематику web-страниц. Проработайте структуру, общий дизайн сайта и содержание главной страницы (рис. 15.1).
index. htm
«Спецкурсы на ФММП»
document. htm |
|
classes. htm |
|
content. htm |
«Основные документы» |
|
«Спецкурсы» |
|
«Содержание обучения» |
|
|
|
|
|
Рис. 15.1. Структура и общий дизайн разрабатываемого сайта
3.Создайте папку для хранения файлов сайта (например, Site), в которой соберите необходимый текстовый и графический материал .
4.Определите программное средство для создания сайта (например:
Блокнот, Microsoft FrontPage и др.).
5.Создайте макет сайта (выполните макеты — заготовки страниц, содержащие элементы общего дизайна сайта: логотипы, фоновое оформление и
171
т. п.; обеспечьте взаимосвязь между страницами сайта с помощью кнопочных, текстовых или графических гиперссылок). Необходимо помнить, что хорошо разработанная навигация — важный фактор привлечения к сайту посетителей.
6.Выполните содержательное наполнение созданных макетов вебстраниц.
7.Протестируйте созданный сайт в наиболее распространенных браузерах
(например: Internet Explorer, Netscape Navigator).
8.Устраните выявленные при тестировании неточности и ошибки.
9.Опубликуйте сайт в Интернете (например, можно разместить сайт на бесплатных хостингах: http://www.narod.ru, http://holm.ru, http://hl.ru).
10.Зарегистрируйте сайт в популярных поисковых системах
(например: www.yandex.ru, www.rambler.ru, www.aport.ru).
Любой сайт имеет свою главную страницу, и работу над сайтом начинают с
еедетальной разработки, хотя иногда полезно представить сайт сразу весь, как единое целое.
Доступ к Web-странице осуществляется при помощи браузеров, которые загружают файлы на компьютер пользователя, интерпретируют html-коды и отображают результаты. В html-кодах, как правило, содержатся указания для браузера — как необходимо отобразить текст, графику; воспроизводить или нет звуковое сопровождение; как вывести на экран ссылки на другие страницы
2.Создание Web-страницы в редакторе FrontPage
Для облегчения подбора элементов оформления и цветовых схем используем готовый шаблон оформления – тему. С помощью меню Формат → Тема в появившемся диалоговом окне выберем, например, тему Горизонт и
укажем Применить как тему по умолчанию. Тему можно применять к отдельным страницам, а также ко всему сайту. В последнем случае при создании каждой новой страницы тема устанавливается автоматически (рис. 15.2).
172
Рис. 15.2. Автоматическая установка темы новой страницы
3. Форматирование текста и размещение изображений в редакторе
FrontPage
Форматирования текста в редакторе FrontPage осуществляется с помощью панели инструментов Форматирование, а также окон Формат (рис. 15.3) и
Абзац (рис. 15.4).
Рис. 15.3. Окно Формат |
Рис. 15.4. Окно Абзац |
173
Выделив текст в редакторе FrontPage (выполняется аналогичноWord) в окне Шрифт можно выбрать его имя, начертание и указать размер, а в окне Абзац указать выравнивание, отступы и межстрочный интервал. Примеры форматированного текста представлены на рисунках 64 и 65. Важно помнить, что отображение веб-страницы на экране зависит от разрешения монитора и настройки браузера. Поэтому размер шрифта принято задавать в условных единицах от 1 до 7. Если размер шрифта не указан, то по умолчанию он принимается равным 3, что при установке в браузере Размер шрифта → средний соответствует 12 пунктам.
Для привлечения внимания к информации создается бегущая строка с помощью цепочки действий: Вставка → Веб-компонент → Бегущая строка. В
окне Cвойства бегущей строки (рис. 15.5) вводится текст, задается направление и скорость движения, время задержки и другие параметры.
Рис. 15.5. Окно Cвойства бегущей строки
4. Размещение изображений
Размещение изображений на веб-странице производится аналогично тому,
как это выполнялось в редакторе Word (команда меню Вставка→Рисунок.)
174
Параметры изображения задают на странице в окне Положение, которое активизируется с помощью меню Формат → Положение (рис. 15.6), а именно можно задать размер изображения (в пикселях или процентах), выравнивание, толщину границы, обтекание текстом и другие параметры.
Все изображения, которые мы видим на веб-страницах, хранятся в отдельных файлах, а на самой странице имеются лишь ссылки на соответствующие файлы.
Рис. 15.6. Окно Положение
Программа FrontPage позволяет легко форматировать введенный текст: изменять тип заголовка, размеры и цвет шрифта, определять вид и начертание шрифта, формировать списки и т. д. Основные возможности форматирования доступны с помощью панели Форматирование или команд контекстном меню и выполняются аналогично текстовому процессору Microsoft Word.
Работа с графикой во FrontPage (вставка, выравнивание, изменение размера и т. п.) аналогична работе с графическими объектами в текстовом процессоре и осуществляется посредством команды Рисунок меню Вставка. Однако, при вставке графического изображения в HTML-документ возможны два варианта:
175