Практическая работа создание сайта с фреймовой структурой в среде microsoft frontpage
Цель работы: ознакомиться с интерфейсом FrontPage, создать простейший сайт с фреймовой структурой в среде FrontPage
ВОПРОСЫ ДЛЯ САМОПОДГОТОВКИ
Фреймы, фреймовая структура сайта.
Назначение, особенности интерфейса FrontPage.
Гиперссылки и их формирование в среде FrontPage
КРАТКИЕ ТЕОРЕТИЧЕСКИЕ СВЕДЕНИЯ
Приложение FrontPage является составляющей пакета программ для офиса, разработанного фирмой Microsoft, и предназначено для разработки Web-страниц. Редактор FrontPage относится к «визуальным» HTML-редакторам и позволяет создавать Web-документы, не требуя на первых этапах знания языка гипертекстовой разметки HTML.
При работе в среде FrontPage на экране отображается следующая информация:
В левой части рабочего окна находится панель со списком папок и файлов. Наличие этой панели необходимо, так как Web-документ содержит ряд файлов, взаимосвязанных между собой ссылками разного рода. Центральная часть приведена в режиме «С разделением», в котором отображается HTML-код и вид документа при просмотре. В правой части окна находится область задач.
ЗАДАНИЯ ДЛЯ ПРАКТИЧЕСКОЙ РАБОТЫ
Задание 1
Создайте макет сайта, имеющего фреймовую структуру:
Заголовок |
|
Меню:
раздел 1
раздел 2
раздел 3
|
Здесь отображается содержимое Выбранного раздела (1, 2 или 3) |
Для этого:
Запустить FrontPage, выбрать место на диске для сохранения файлов Web-страницы.
Создать файлы zagolovok.htm, menu.htm, s1.htm, s2.htm, s3.htm. Внести в них необходимую информацию.
Сформировать фреймовую структуру сайта.
Сформировать гиперссылки на содержимое разделов 1, 2 и 3.
Проверить работоспособность сайта, запустив его в internet Explorer.
Ход выполнения задания 1
№ |
Кратко |
Подробно |
1 |
Запустить Frontpage
Создать папку site для хранения документов сайта Создать страницу site.htm |
Использовать команду Пуск – Microsoft Office – FrontPage
Использовать
пиктограмму «Создать папку»
Использовать
команду «Создать страницу»
|
2 |
Создать файлы zagolovok.htm, menu.htm, s1.htm, s2.htm, s3.htm. Наполнение файлов информацией |
Для создания каждого файла использовать команду «Создать страницу» и указывать его имя. Далее двойным щелчком мыши по каждому из названных файлов открывать его и вносить в эти файлы в нижней части центрального окна указанную ниже информацию. Ввод информации в каждый файл завершать выполнением команды Сохранить.
zagolovok.htm ЗАГОЛОВОК
menu.htm МЕНЮ:
s1.htm Здесь отображается содержимое раздела 1
s2.htm Здесь отображается содержимое раздела 2
s3.htm Здесь отображается содержимое раздела 3
|
3 |
Сформировать фреймовую структуру страницы site.htm
Установить соответствие между созданными файлами и фреймами |
Двойным щелчком мыши открыть файл site.htm Выполнить команду Файл – Создать В области задач (в правой части окна) выполнить щелчок по строке Другие шаблоны страниц В появившемся окне «Шаблоны страниц» на закладке «Страница рамок» выбрать шаблон «Объявление и оглавление» и нажать «Ok» В верхней части появившегося окна с фреймовой структурой щелкнуть по кнопке «задать начальную страницу» и указать для нее файл zagolovok.htm Аналогично, для левой части окна указать файл menu.htm, а для правой – s1.htm Использовать команду Сохранить для записи полученной структуры в файл index.htm в папке site. |
4. |
Создать гиперссылку для раздела 1
Создать гиперссылки для разделов 2 и 3 |
Установить курсор под слово МЕНЮ и выполнить команду Вставка – Меняющаяся кнопка Выбрать для кнопки вид – Выступающая вкладка 1, текст – Раздел 1, ссылка – s1.htm (выбирается с помощью кнопки Обзор) Далее нажмите «Ok» Аналогичным образом под кнопкой «Раздел 1» создать кнопки «Раздел 2» и «Раздел 3» со ссылками на файлы s2.htm и s3.htm соответственно Для записи информации использовать команду Сохранить |
5. |
Проверить работоспособность документа |
С помощью команды Просмотр в Microsoft Internet Explorer, расположенной на панели инструментов Стандартная, запустить сайт в режиме просмотра Убедиться в нормальной работе всех гиперссылок |
на левой панели «Список папок». При
создании папки набрать ее имя site
и указать имя страницы: site.htm.
Задание 2.
Разработайте в среде Microsoft FrontPage сайт с фреймовой структурой «Моя личная страничка», содержащий анкетные данные (фамилия, имя, отчество, дата рождения и др.), Вашу фотографию, результаты успеваемости за последний семестр, сведения о том, чем Вы увлекаетесь в свободное время. Используйте материал, накопленный при выполнении трех предыдущих практических работ.