4.8 Лабораторная работа № 12 FrontPage. Создание основных элементов web-страницы

Цель работы:

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

• научиться создавать web-страницы с фреймами;

• научиться вставлять текст и форматировать его;

• научиться вставлять списки и изображения.

Задание

1. Создайте в своем рабочем каталоге папку Мой web-узел.

2. Запустите программу FrontPage. Отобразившуюся новую страницу сохраните в папку Мой web-узел под именем titul.htm. Это будет «титульная» страница вашего сайта.

3. Чтобы разбить страницу на разделы, вставьте в нее таблицу: Таблица-Вставить таблицу. Таблица должна содержать 1 столбец и 2 строки. Размеру границы задайте значение 0. В верхнюю строку таблицы впишите название вашей страницы. Границу второй строки растяните вниз так, чтобы она занимала оставшуюся часть страницы. В нижнюю строку вставьте рисунок: Вставка-Рисунок-Из файла или Вставка-Рисунок-Картинки. Скорректируйте размер рисунка так, чтобы он занимал всю ячейку.

4. Все рисунки, относящиеся к вашей странице, лучше хранить в отдельной папке с названием image. Создайте в папке Мой web-узел соответствующую вложенную папку.

5. Сохраните вашу страницу, выполнив команду Файл-Сохранить все. FrontPage может предложить вам сохранить вставленный рисунок. В этом случае нажмите на кнопку Сменить папку в открывшемся диалоговом окне, и выберите папку image. Если рисунок имеет формат, отличный от GIF, JPEG или PNG, нажмите на кнопку Тип графических файлов и вберите один из предложенных форматов. Сохраните рисунок.

6. Для того чтобы создать новую страницу, размеченную при помощи фреймов, выполните команду Файл-Создать и в области задач выберите Другие шаблоны страниц. В открывшемся диалоговом окне перейдите на вкладку Страница рамок и выберите вариант Колонтитулы и оглавление. Сохраните страницу в свою папку под именем index.htm. Это будет домашняя страница вашего сайта, содержащая заголовок, раздел оглавления и окно для отображения страниц.

7. Щелкните по кнопке Создать страницу в верхнем колонтитуле (верхний фрейм) и впишите туда название вашего сайта. Отформатируйте название по своему усмотрению.

8. Щелкните по кнопке Создать страницу в левом фрейме (оглавление).

9. Щелкните по кнопке Создать страницу в нижнем колонтитуле. Щелкните правой кнопкой мыши, выберите в меню пункт Свойства рамки и в открывшемся окне задайте свойству Высота рамки значение 1. Этот фрейм не понадобится.

10. Щелкните по кнопке Задать начальную страницу в центральном фрейме. В открывшемся окне выберите в разделе Папка каталог с вашим сайтом, а в нем - страницу titul.htm.

11. В левом фрейме напишите слово Содержание, а под ним - три строки: MS FrontPage, Web-узел, HTML; оформите их в виде маркированного списка. Для этого выделите нужные строки и либо выполните команду Формат-Список, либо нажмите соответствующую кнопку на панели Форматирование.

12. Сохраните страницу. FrontPage предложит вам сохранить каждый фрейм как отдельную страницу. Сохраните фреймы в свою папку под именами, например, kolontitul.htm (для верхнего колонтитула), soderzhanie.htm (для содержания), main.htm (для центрального фрейма) и blank.htm (для нижнего колонтитула).

13. Каждому фрейму на странице задайте свой фоновый рисунок. Для этого щелкните на странице правой кнопкой мыши, выберите в меню пункт Свойства страницы, перейдите на вкладку Форматирование, поставьте флажок в разделе Фоновый рисунок и выберите нужный рисунок, нажав кнопку Обзор. Можно также воспользоваться стандартными темами MS Office. Для этого нужно выделить фрейм, выполнить команду Формат-Тема и в области задач выбрать понравившуюся тему. Еще раз сохраните все изменения.

Задания для самостоятельной работы

1. Создайте новую страницу с фреймами. В качестве шаблона выберите Верхний колонтитул.

2. В колонтитул впишите заголовок, в основную часть страницы вставьте рисунок.

3. Для колонтитула и основной части страницы задайте две разные стандартные темы. Сохраните фреймы в свою папку, результат покажите преподавателю.

Контрольные вопросы

1. Для чего предназначен редактор FrontPage?

2. Что такое web-страница?

3. Для чего используются таблицы при создании web-страниц?

4. Что называется фреймом?

5. Изображения каких форматов допустимо вставлять в web-страницы?

6. Какими способами можно создать фон для web-страницы?