Фреймы (кадры) позволяют разделять экран пользователя на две или больше частей, каждая из которых будет содержать отдельную, независимо просматриваемую страницу. FrontPage 2000 позволяет создавать 10 различных конфигураций фреймов, представленных на вкладке Frames Pages (Страницы фреймов) в диалоговом окне New (Создание страницы).
Цель фреймов – сделать сайт более простым для просмотра и работы. Неоправданное использование большого числа фреймов (когда этого не требует содержание сайта) может озадачить посетителей. Хороший тон – использовать ровно столько фреймов, сколько требуется, и не больше. Наиболее популярна следующая раскладка фреймов: содержание – слева и основной фрейм – справа. Эта раскладка использует всего два фрейма. Другая раскладка представляет собой комбинацию из трех фреймов и отличается от первой тем, что ещё один фрейм (для заголовка) располагается в верхней части экрана. FrontPage 2000 позволяет создавать эти и ещё 8 других вариантов раскладок фреймов.
Для создания Web-сайта “Туристическое агентство” с элементами фреймов выполните следующие действия (примерный вид домашней страницы приведен на рис. 6):
1. Запустите программу FrontPage.
2. Приведите окно программы к виду, показанному на рис. 1. Для этого в меню Обзор необходимо выбрать команды Виды и Список папок.
3. Выберите команду Создать (New) в меню Файл, команду Сайт в появившемся подменю. В диалоговом окне Новое во вкладке Web сайты выберите из списка шаблон One Page Web (Одностраничный сайт), укажите место расположения и имя uvlek_put1 нового сайта.
4. Создайте еще пять страниц с именами: zagolovok.htm, meny.htm, glavn.htm, level21.htm, level31.htm. Для этого выберите в панели Вид режим Папки, в появившейся Рабочей области вызовите контекстное меню и выполните команду Новая страница. Переименуйте их соответствующим образом.
5. Выберите страницу zagolovok.htm. В Рабочей области наберите текст, аналогичный п. 14 задания 3, и отформатируйте его (п. 15 задание 3). Задайте фон этой страницы (п. 24 задание 3).
6. Выберите страницу meny.htm. В Рабочей области наберите текст:
ДОМОЙ
КРУИЗЫ
АВИА
АВТО
Отформатируйте его и задайте фон страницы.
7. Выберите страницу glavn.htm. Наберите полностью текст из п. 18 задания 3 (Путешествия на…… 3. АВТО: Кавказ, Италия, Финляндия, Германия). Оформите его аналогично заданию 3 (п.п. 26-29). Задайте фон страницы.
8. Выберите страницу level21.htm. Наберите текст (без навигатора) из п. 20 задания 3 (КРУИЗЫ……. Агентство "Аква-Тур", теплоход "Адмирал Нахимов" – 31 день). Оформите его аналогично заданию 3 (п. 30). Задайте фон страницы.
9. Выберите страницу level31.htm. Наберите текст (без навигатора) из п. 22 задания 3 (Агентство……. Новороссийск). Оформите его аналогично заданию 3 (п. 31). Задайте фон страницы.
На данном этапе создания Web-сайта подготовлены все страницы с соответствующей информацией и оформлением. Теперь необходимо их связать между собой с помощью фреймов, гиперссылок и закладок.
10. Создание фреймов. Перейдите на страницу index.htm. Выберите команду Создать в меню Файл, команду Страница в появившемся подменю. В диалоговом окне Новое во вкладке Страницы фреймов выберите из списка шаблон Banner and Contents. В Рабочей области появятся три кадра, согласно выбранному шаблону, в каждом из которых будет по две кнопки: Set Initial Page (Установить существующую страницу) и Новая страница.
11. Выделите верхний кадр и нажмите кнопку Set Initial Page. В появившемся окне Создать гиперссылку выберите страницу zagolovok.htm. С помощью мыши увеличьте размеры кадра так, чтобы появилась вся информация этой страницы.
12. Аналогично в левом кадре выберите страницу meny.htm, а в основном – страницу glavn.htm. Сохраните сайт, переименовав при этом страницу с кадрами в index.htm (без расширения). Нажмите клавишу F5. Просмотрите полученный результат встроенным обозревателем (вкладка Просмотр), вернитесь обратно.
13. Выделите слово КРУИЗЫи создайте гиперссылку на страницу l evel21.htm. Для этого любым из способов вызовите окно Создать гиперссылку, выберите страницу level21.htm и в графе Конечный фрейм задайте пункт Page Default (main).
14. Аналогичным образом для слова ДОМОЙ создайте ссылку на страницу glavn.htm.
15. Перейдите на страницу level21.htm. Выделите текст Агентство "Трэвел", теплоход "Петр I" – 7 дней, 6 ночей и создайте гиперссылку на страницу l evel31.htm.
16. Аналогично п.п. 37-39 задания 3 создайте закладки и ссылки на них.
17. Сохраните все страницы и войдите в обозреватель Internet Explorer (Файл > Просмотр в Броузере). Посмотрите оформление вашего сайта, проверьте работу всех гиперссылок и закладок. Вернитесь обратно в FrontPage.
Создание динамических элементов HTML – подвижные кнопки (в данном случае кнопочного меню). Примерный вид домашней страницы с кнопочным меню приведен на рис. 7.
18. Перейдите на страницу meny.htm. Все удалите. Вставьте таблицу из 4 строк и 1 столбца, выделите границы таблицы (команда Свойства таблицы в контекстном меню, графа Границы – Размер - 1). В первую ячейку вставьте подвижную кнопку. Для этого выберите команду Компонент в меню Вставка и в открывшемся подменю команду Hover Button (Hover Кнопка). В диалоговом окне Свойства Hover Button выполните следующие действия: в графе Текст кнопки наберите слово ДОМОЙ и выберите цвет шрифта Автоматически (черный); в графе Ссылка на с помощью кнопки Обзор выберите страницу glavn.htm, в графе Конечный фрейм наберите main, нажмите Ok; в графе Цвет кнопки выберите цвет (желательно в тон фона страницы); в графе Эффект: - Bevel in, установите ширину 90. Нажмите кнопку Да. Существующие эффекты:
- Color fill – замена одного цвета кнопки на другой;
- Color average – наложение одного цвета на другой;
- Glow – подсветка вторым цветом в центре;
- Reverse glow – подсветка вторым цветом края кнопки;
- Light glow – подсветка более светлым цветом в центре;
- Bevel out – текст поднимается вверх;
- Bevel in – текст опускается вниз (эффект нажатия клавиши).
19. Аналогично создайте кнопки КРУИЗЫ(со ссылкой на страницу level21.htm), АВИА и АВТО (без ссылок).
20. Сохраните все страницы и войдите в обозреватель Internet Explorer (Файл > Просмотр в Броузере). Посмотрите оформление вашего сайта, проверьте работу всех гиперссылок и закладок. Вернитесь обратно в FrontPage.
Рис. 6. Вид страницы index.htm
Создание динамических элементов HTML – бегущая строка.
21. Перейдите на страницу glavn.htm. Удалите надпись СПИСОК ПУТЕШЕСТВИЙ. Выберите команду Компонент в меню Вставка и в открывшемся подменю команду Marquee. В диалоговом окне Свойства Заставки Шатра наберите текст: СПИСОК ПУТЕШЕСТВИЙ:. Нажмите Да. Просмотрите сайт в обозревателе Internet Explorer.
22. Выйдите из программы FrontPage (Файл > Выход).
Рис. 7. Вид страницы index.htm с кнопочным меню
КОНТРОЛЬНЫЕ ВОПРОСЫ
1. Что такое Internet, Web-страница, Web-сайт и гиперссылка?
2. Перечислите основные возможности, предоставляемые пакетом Microsoft FrontPage 2000.
3. Что представляет собой язык HTML?
4. Для чего нужны мастера и шаблоны? Как с ними работать?
5. Как создать новую Web-страницу?
6. Как создать новый Web-узел?
7. Как добавить новую страницу, переименовать, удалить не нужную?
8. Как создать структуру сайта в Навигаторе?
9. Как задать общие границы?
10. Как вставить таблицу?
11. Как вставить рисунок?
12. Как вставить горизонтальную линию?
13. Как задать фон страницы?
14. Как создать текст-гиперссылку и изображение-гиперссылку?
15. Как создать закладку?
16. Что такое фреймы? Для чего они нужны?
17. Как создать и заполнить фреймы?
18. Какие динамические элементы HTML знаете?
19. Как создать меню из подвижных кнопок?
20. Как создать бегущую строку?
21. Как изменить свойства какого-либо объекта?
22. Каким образом осуществляется навигация по сайту?
23. Как просмотреть Web-сайт в обозревателе Internet Explorer?
24. Как загрузить программу MS FrontPage 2000 и выйти из нее?
ЗАДАНИЯ
1. Создайте личную основную страницу.
2. Замените данные шаблона нужной вам информацией.
3. Вставьте в документ “бегущую строку”.
4. Вставьте в документ графический объект.
5. Вставьте в документ гиперссылку на текстовый файл, находящийся на винчестере.
6. Вставьте в документ гиперссылку Дата создания.