Игнорировать раскладку при выборе кодировки новых страниц.

Лабораторная работа 1

Создание макета сайта с фреймовой структурой

Задание.

Создайте макет сайта с фреймовой структурой главной страницы, представлен­ной на рис. 8. Разработайте удобную навигацию по страницам сайта.

Рис.8. Образец главной страницы сайта

Алгоритм выполнения.

Создайте папку сайта с именем site_l.

2. Откройте редактор Microsoft FrontPage.

3. Создайте сайт на основе папки site_l:

а) выполните команду меню Файл, Создать, Страница или Веб-узел;

б) впанели Создание веб-страницы или узлав разделе Созданиевыберите Пустой веб-узел(рис. 9);

Рис. 9. Окно Редактора FrontPage 2003

в) в окне Шаблоны веб-узловв разделе Параметрыукажите расположение нового веб-узла (используя экранную кнопку Обзор,выделите папку site_l)(рис. 10и 11);

Рис.10. Вид окна Шаблоны веб-узлов

Рис. 11. Выбор папки для создания веб-узла

г) щелкните на кнопках Открыть, ОК.

4. Выполните настройку кодировки языка сайта: меню Сервис, Параметры узла.

Вокне Параметры узла(рис. 12)перейдите на вкладку Языки выберите следующие установки:

• язык сообщений сервера: русский;

• применяемый по умолчанию набор знаков для страниц: кириллица;

Игнорировать раскладку при выборе кодировки новых страниц.

Рис.12. Настройка кодировки языка сайта в окне Параметры узла.

5. Создайте страницы сайта с именами: zagolov.htm, menu.htm, l.htm, 2.htm, 3.htm. (Информационное наполнение страниц в данной лабораторной работе опус­кается и оставляется на последующую доработку созданного макета сайта.) С этой целью выполните следующие операции:

а) создайте новую страницу, щелкнув на кнопке Новая страница;

б) щелкнув правой кнопкой в области поля страницы, выберите в контекстное меню команду Свойства страницы(рис. 13);

Рис. 13. Задание параметров страницы в окне Свойства страницы

в) в окне Свойствастраницы на вкладке Общиевведите текст заголовка страни­цы, перейдите на вкладку Языки выберите следующие установки (рис, 15):

• Пометить текущий документ, указав: русский;

• Сохранить документ, используя: кириллица;

• Повторить загрузку текущего документа, используя: кириллица;

Рис. 14. Установка языка страницы и набора знаков

г) примените к страницам zagolov.htm, menu.htm тему для графического оформ­ления: меню Формат, Тема, Перетекание(рис. 15);

Рис. 15. Выбор темы страницы

д) введите в область страницы соответствующий текстовый заголовок;

е) сохраните страницу в папке сайта: меню Файл, Сохранить как,введите имя страницы;

ж) аналогично оформите и остальные веб-страницы (рис. 16).

Рис. 16. Образцы заготовок страниц

6. Создайте главную страницу сайта с фреймовой структурой:

а) выполните команду меню Файл, Создать, Страница или Веб-узел;

б) впанели Создание веб-страницы или узлав разделе Создание с помощью шаблонавыберите Шаблоны страниц(рис. 17);

Рис. 17. Окно Шаблоны страниц

в) в открывшемся окне Шаблоны страниц перейдите на вкладку Страница рамок и выберите тип фреймовой структуры Объявление и оглавление;

г) в окне отображения макета страницы (рис. 18) щелкните на кнопке Задать начальную страницу в заголовочном фрейме; в списке файлов сайта выде­лите страницу zagolov.htm и щелкните на кнопке ОК (рис. 19);

Рис. 18. Созданный редактором макет страницы

Рис. 19. Задание страницы, отображаемой во фрейме

д) в левом фрейме щелкните на кнопке Задать начальную страницу, в списке файлов сайта выделите страницу menu.htm и щелкните на кнопке ОК. Страница menu.htm, открытая в левом фрейме, пока не содержит кнопки перехода на другие веб-страницы;

е) в правом фрейме щелкните на кнопке Задать начальную страницу, в списке файлов сайта выделите страницу l.htm и щелкните на кнопке ОК.

Результат отражен на рис. 20;

Рис. 20. Образец страницы index.htm

ж) сохраните главную страницу сайта: меню Файл, Сохранить как, введите имя страницы index.htm.

7. Если Вы хотите изменить вид границ фреймов, то, щелкая правой кнопкой по отдельным фреймам и выбирая в контекстном меню команду Свойства рамки, можно задать то или иное отображение границ фрейма на экране (рис. 21).

21. Задание параметров фрейма в окне Свойства рамки

8. Продолжите работу над страницей menu.htm из страницы index.htm. Размес­тите кнопки с динамическими эффектами, осуществляющие навигацию по страни­цам сайта:

а) щелкните в области левого фрейма;

б) выполните команду меню Вставка, Веб-компонент, Динамические эффек­ты, Интерактивная кнопка (рис. 22), щелкните на кнопке Готово (или команда Вставка, Меняющаяся кнопка).

Рис. 22. Вставка компонента веб-узла

в) в окне Свойства меняющейся кнопкивыполните следующие действия:

• введите текст надписи на кнопке (используя кнопку Шрифт,можно изменить стиль надписи) (рис. 23);

Рис.23. Задание параметров меняющейся кнопки

• укажите файл перехода и фрейм, в котором будет открыт указанный файл, т.е. установите текстовый курсор в поле Ссылка на:, щелкните на кнопке Обзори в окне Выбор гиперссылки для меняющейся кнопкивыделите имя страницы перехода в списке файлов страниц (рис. 24);

Puc. 24. Выбор гиперссылки для меняющейся кнопки

• в окне Выбор гиперссылки для меняющейся кнопкищелкните на кнопке Выбор рамкии укажите фрейм, в котором будет открываться страница (рис. 25); для этого выделите соответствующий фрейм щелчком мыши в раз­деле Текущая страница рамоки подтвердите выбор щелчками на экранных кнопках ОК;

Рис. 25. Указание фрейма для открытия файла перехода

• сохраните страницу index.htm на диске. Страница menu.htm, открытая в ле­вом фрейме, содержит кнопки переходов по страницам сайта, которые будут открываться в правом фрейме (рис. 26).

Рис. 26. Образец страницы index.htm

9. Просмотрите сайт в браузере, щелкнув на кнопке Просмотр в браузере.