ЛАБОРАТОРНАЯ РАБОТА №18

Тема работы: Проектирование страницы HTML.

Цель работы: Научиться проектировать Web-страницы. Изучить редактор FrontPage, предназначенный для создания Web-документов.

Теоретическая часть:

Web – страница может состоять как из одного окна, так и из нескольких окон – фреймов. Для каждого фрейма создается отдельная страница. Файл, который открывает все фреймы чаще всего, является главным (с этого файла происходит загрузка остальных страниц) и имеет имя index.htm или  index.html. В нем описывается, какие страницы будут представляться в окнах (фреймах) и как много места в % отношении они будут занимать по отношению ко всему окну броузера.

Ход работы:

Создание Web-документа с помощью редактора FrontPage.

1. Запустите программу FrontPage (Пуск > Программы >  FrontPage).

2. Введите в окне программы FrontPage произвольный текст документа.

3. С помощью панели инструментов форматирования отформатируйте текст по собственному усмотрению.

4. Вставьте рисунок (меню Insert > Picture > From File).

5. Вставьте таблицу (меню Table > Insert > Table) и заполните ее.

6. Дайте команду Save as… (сохранить как). Сохраните страницу в каталоге C:\STUDENT\имя_группы\ с именем page1.htm. Подтвердите сохранение изображений, требующих преобразования формата.

7. Запустите обозреватель Internet Explorer (Пуск > Программы > Internet Explorer).

8. Дайте команду Файл > Открыть. Щелкните на кнопке Обзор и откройте файл Page1.htm.

9. Убедитесь, что созданный документ правильно отображается обозревателем. Обратите внимание на наличие отличий вида документа при отображении в обозревателе и в программе FrontPage.

10. Измените ширину окна обозревателя и посмотрите, как при этом меняется вид документа.

11. Вернитесь в программу FrontPage, перейдите на вкладку HTML.

12. Изучите автоматически сгенерированный код HTML, определите, как с помощью тегов HTML реализованы использованные команды форматирования.

13. Оцените качество получившегося кода HTML.

Проектирование страницы.

1.    Закройте все окна редактора FrontPage командой Close (меню File > Close).

2.    В меню File выберите New > Page. Появится новое окно New, с вкладками General, Frame Page, Style Sheets.

3.    Откройте вкладку Frame Page (фреймы страницы).

4.    Выберите один из предложенных вариантов расположения и количества фреймов. При выборе обращайте внимание на поле Preview, в котором отображаются уменьшенные копии предлагаемых страниц.

5.    После выбора щелкните кнопку ОК. В главном окне появится разбивка страницы на фреймы. Каждый фрейм будет содержать две кнопки New Page (новая страница) и Set Initial Page (вставка готовой страницы).

6.    В одном из фреймов щелкните по кнопке Set Initial Page и загрузите страницу page1.htm из каталога C:\STUDENT\имя_группы\.

7.    Во всех остальных фреймах щелкните по кнопке New Page. В окне появится белый фон страницы (по умолчанию).

8.    Создайте текст в новом фрейме, вставьте рисунок (меню Insert > Picture > From File). Вставьте таблицу (меню Table > Insert > Table) и заполните ее.

9.    Посмотрите следующие вкладки, которые расположены внизу: Normal, No Frames, HTML, Frames Page HTML, Preview.

10.Перейдите на вкладку Frames Page HTML и выделите весь код, скопируйте его в буфер обмена.

11.Откройте Блокнот (Пуск > Программы > Стандартные > Блокнот) и вставьте код. Распечатайте код и приложите к отчету.

12.Перейдите на вкладку Preview, посмотрите как изменился вид страницы по сравнению с Normal.

13.Сохраните созданную страницу. Для этого щелкните по границе фреймов при этом появится синяя рамка вокруг всей страницы. В меню File выберите Save as… (сохранить как). Сохраните эту страницу с именем index.htm в каталоге C:\STUDENT\имя_группы\.

14.После сохранения файла index.htm появится еще столько диалоговых окон сохранения страниц, сколько новых фреймов было создано. Сохраните эти страницы с именами Page2.htm, Page3.htm и т.д. При сохранении этих страниц справа будет появляться уменьшенная копия страницы с указанием того, какое окно общей страницы сохраняется в данный момент.

15.Откройте обозреватель Internet Explorer (Пуск > Программы > Internet Explorer).

16.Дайте команду Файл > Открыть. Щелкните на кнопке Обзор и откройте файл index.htm, который находится в каталоге C:\STUDENT\имя_группы\.

17.Сравните вид страниц отредактированных отдельно от основной страницы и страниц созданных вместе с заглавным файлом index.htm.

18.Убедитесь, что созданный документ правильно отображается обозревателем. Обратите внимание на наличие отличий вида фреймов и их содержимого при отображении в обозревателе и в программе FrontPage.

19.Посмотрите, как выглядят фреймы и как выглядит текст, графика, таблицы во фреймах.

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

1.           Теги для проектирования фреймов (Frameset, Frame).

2.           Редактор кода FrontPage.

Отчет должен содержать:

1.           Тему, цель работы, ответы на контрольные вопросы и на вопросы хода выполнения работы, выводы.

2.           Описание выполненных действий по пунктам.

3.           Распечатку кода страницы.