Лабораторная работа № 21 Технология разработки Web – сайта

Цель и содержание: Освоить основные приемы разработки Web – сайта с помощью программы Microsoft Office FrontPage 2003

Методика и порядок выполнения работы

Задание 1. Создание нового Web-узла

1. Создайте папку Веб_[ фамилия] в папке Мои документы.

2. З апустите программу Microsoft Office FrontPage 2003. (Пуск  Программы  Microsoft Office FrontPage 2003).

3. Откройте область задач Файл  Создать. В результате в окне программы справа появится панель Создание. Выберите из пункта Создать веб-узел команду Другие шаблоны веб-узлов.

4. В открывшемся окне Шаблоны веб-узлов выберите пиктограмму Пустой веб-узел и укажите размещение создаваемого веб-узла

при помощи кнопки «Обзор»  Мой компьютер  Локальный диск (С:)  Мои документы Веб _ [Фамилия]  Открыть  ОК (рисунок 21.1) .

Рисунок 21.1 – Выбор местоположения создаваемого веб-узла

5. На панели Представления (в нижней части экрана) выберите вкладку «Переходы».

6. На рабочем поле окна приложения вызовите правой кнопкой мыши контекстное меню. Выберите команду Создать Верхняя страница.

7. Выберете пиктограмму «Домашняя страница»  нажмите кнопки Создать Страница.

8. П ереименуйте вновь созданную страницу с именем Новая страница 1. Для этого щелкните правой кнопкой мыши на пиктограмме созданной страницы  Переименовать  введите «Программа курса».

9. Аналогично создайте остальные страницы, представленные на рисунке 2.

1. На первом уровне у Вас должно быть четыре страницы: Программа курса; Теоретический материал; Практикум; Тестирование.

2. На втором уровне от страницы «Программа курса» пять страниц: Содержание курса; Распределение часов; Итоговый контроль; Учебно-методическое обеспечение.

Рисунок 21.2 – Структура Web-узла

Замечание. Домашнюю страницу не переименовывать!

Задание 2. Добавление фоновых параметров страниц Web-узла

6. Д важды щелкните мышью на пиктограмме домашней страницы.

7. Выберете набор стилей оформления элементов страниц узла: ФорматТема. В появившейся (справа) области задач Тема (рисунок 3), просмотрите предлагаемые шаблоны из списка Все доступные темы.

8. Щелкните левой клавишей мыши по кнопке, появляющейся при наведении курсора на пиктограмму понравившегося вам образца оформления веб-узла справа и в раскрывающемся списке, выберите команду Применить как тему по умолчанию, в появившемся окне, нажмите кнопку Да (рисунок 21.3) .

Рисунок 21.3. – Окно выбора шаблона оформления веб - узла

Задание 3. Создание общих областей

Для автоматического выведения заголовков страниц и кнопок перехода между ними необходимо выполнить следующие действия:

1. Формат  Общие границы  Применить: ко всем страницам. Установите флажки, определяющие местоположение областей для размещения информации: Сверху  включить кнопки переходов ОК (рисунок 21.4).

Замечание. Если команда Общие границы неактивна, выполните следующие действия: СервисПараметры страницывкладка Разработкаустановите флажок Общие границы.

Рисунок 21.4 – Окно диалога Общие границы

2. Вставьте название домашней страницы в общую область, оформленную в стиле темы. Для этого щелчком правой кнопки мыши на словах Домашняя страница вызовите контекстное меню и выберите команду Объявление на странице введите в поле ввода название страницы «Компьютерное моделирование»  ОК (рисунок 21.5).

3. Для создания кнопок перехода щелчком правой кнопки мыши на словах [Измените свойства этой панели для отображения на ней гиперссылок] вызовите контекстное меню и выберите команду Свойства панели ссылок, в появившемся окне в перечне «Добавляемые ссылки» укажите Дочерний уровень  ОК (рисунок 21.6).

Рисунок 21.5– Вставка названия домашней страницы в общую область

4. Обратите внимание на появившийся после имени файла домашней страницы символ «*» , который указывает на то, что внесенные изменения необходимо сохранить. Сохраните страницу в узле: Файл  Сохранить все (рисунок 21.7).

Рисунок 21.6. – Выбор уровня добавляемых гиперссылок

Рисунок 21.7 – Сохранение веб-узла

5. В режиме «Просмотр» убедитесь в наличии фоновых изменений. Вернитесь

в режим «Конструктор».

Замечание. Технология ввода текста, создания списков, форматирования абзацев, введения специальных символов аналогична работе в текстовом редакторе Word.

Задание 4. Создание таблиц

Информация, размещаемая на страницах веб-узла, обычно располагается в ячейках таблицы, границы, которой делают невидимыми. Для вставки таблицы выполните следующую последовательность действий:

1. У кажите курсором место для вставки таблицы (не в общей области). В меню выберите пункт Таблица  Вставить Таблица или нажмите кнопку Добавить таблицу на панели инструментов, выделив необходимое количество строк и столбцов.

2. Вставьте таблицу из двух столбцов и трех строк.

3. Объедините ячейки, выделив полностью первую строку и вызвав правой кнопкой мыши контекстное меню.

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

5. В первую ячейку второй строки поместите графическое изображение: Вставка  Рисунок  Из файла. В появившемся окне диалога в поле ввода «Папка» щелчком левой клавишей мыши по кнопке «Раскрывающийся список» вызовите список доступных дисков и папок.

6. Выберите диск «Локальный диск С» (рисунок 21.8) , затем папку Картинки Image1. Чтобы просмотреть файлы, находящиеся в папке, с помощью кнопки «Представления» вызовите список доступных режимов и выберите вид «Просмотр» ( рисунок 21.9). Щелчком кнопки мыши выделите понравившийся файл  Вставить.

Рисунок 21.8. – Выбор рисунка из папки Картинки на локальном диске С

Рисунок 21.9 – Выбор режимов представления файлов

7. При необходимости размер и положение рисунка можно изменить. Для этого вызовите контекстное меню Свойства рисунка…. В появившемся диалоговом окне (рисунок 10), задайте: «Выравнивание: по середине»; «Размер Задать размер Ширина – 500»  ОК. Обязательно сохраняйте пропорции рисунка .

Рисунок 21.10 – Изменение свойств рисунка

8. Поверните изображение на 90⁰, для этого щелчком правой кнопки мыши на рисунке вызовите контекстное меню и выберите команду Показать панель инструментов рисунков (рисунок 11)

Рисунок 21.11 – Вызов панели инструментов рисунков

9. На появившейся панели щелкните кнопку Повернуть влево на 90⁰

10. Во второй ячейке второй строки таблицы введите текстовое пояснение с помощью объекта « WordArt», о том, например, для кого предназначен разрабатываемый курс – «Для студентов, аспирантов и преподавателей».

10. Чтобы линии таблицы не были видны при просмотре в обозревателе, настройте ее свойства. Для этого: установите курсор в любую ячейку таблицы; вызовите щелчком правой кнопки мыши контекстное меню и выберите пункт Свойства таблицы.

11. В появившемся окне диалога (рисунок 21.12) установите в поле ввода Размер: толщину линии 0 пикселей:  Границы  Размер  0  ОК.

Рисунок 21.13 – Выбор толщины линий границы таблицы

13. Сохраните страницу  Файл  Сохранить все. В появившемся диалоговом окне Сохранение внедренных файлов нажмите кнопку ОК (рисунок 21.14).

Рисунок 21.14 – Сохранение внедренных файлов

13. Просмотрите созданную страницу в обозревателе  Файл  Просмотреть в обозревателе 1 Microsoft Internet Explorer 6.0 (рисунок 21.15).

Рисунок 21.15 – Просмотр созданного веб-узла в Microsoft Internet Explorer

Задание 5. Вставка горизонтальной линии

1. Для того чтобы выделить область на рабочем листе можно использовать горизонтальные линии. Для этого установите курсор, например, над таблицей или под таблицей. В меню выберите: ВставкаГоризонтальная линия. На Вашей странице появится горизонтальная линия, соответствующая выбранной Вами теме.

2. Вставьте горизонтальные линии на других страницах, используя коллекцию картинок, для перехода к которой в меню выберите: Вставка ® Рисунок ® Картинки. Справа в окне приложения откроется Область задач на которой откройте гиперссылку Упорядочить картинки, в появившемся окне Избранное – Коллекция картинок в списке коллекций выберите Коллекции Microsoft Office, далее откройте папку Оформление ® Разделители. Выберите понравившуюся Вам горизонтальную линию и вызовите контекстное меню, выберите команду Копировать (рисунок 16). Перейдите на страницу вашего веб-узла: Правка ® Вставить.

Рисунок 21.16 – Выбор горизонтальной линии из коллекции

3. Сохраните страницу Файл  Сохранить все. В появившемся диалоговом окне Сохранение внедренных файлов нажмите кнопку ОК

Задание 6. Вставка текста на страницы веб-узла

1. Активизируйте вкладку веб-узел щелчком левой кнопки мыши, щелкните кнопку Переходы на панели Представления и откройте (двойным щелчком левой клавиши мыши) страницу «Программа курса» (рисунок 21.17).

Рисунок 21.17 – Просмотр структуры веб-узла и открытие страницы «Программа курса»

2. Откройте файл «Пояснительная записка», находящейся в папке «Программа курса». Для этого перейдите на рабочий стол, свернув окно программы Microsoft FrontPage Мои документы  Программа курса  Пояснительная записка.

3. Выделите текст пояснительной записки: Правка Выделить все, скопируйте выделенный фрагмент в буфер Обмена: Правка Копировать, перейдите в окно программы Microsoft FrontPage, щелкнув кнопку программы на панели задач (рисунок 18).

Рисунок 18 – Переход в окно программы Microsoft FrontPage

4. У становите курсор ниже линии отделяющей общие границы от рабочей области страницы. В меню выберите команду Правка Вставить. Щелчком на значке Параметры вставки вызвать контекстное меню и выбрать команду Сохранить только текст (рисунок 21.19).

Рисунок 21.19 – Исключение стилей форматирования исходного файла

4. Отформатируйте вставленный текст– технология форматирования такая же как и в текстовой процессоре Word.

5. Заполните остальные страницы веб-узла: Содержание курса; Распределение часов; Итоговый контроль; Учебно-методическое обеспечение, и спользуя файлы из папки «Программа». При копировании таблицы или текста, для того чтобы применить стили форматирования выбранного шаблона, можно выбрать команду Использовать конечные стили.

Задание 7. Создание свертываемого списка

Вставьте на страницу Учебно-методическое обеспечение свертываемый список. Для этого перейдите на страницу Учебно-методическое обеспечение, щелчком мыши по вкладке веб-узел, кнопке Переходы и двойным Учебно-методическое обеспечение щелчком по ярлыку страницы Учебно-методическое обеспечение.

1. Установите курсор после фрагмента текста Средства обеспечения дисциплины. В меню Формат выберите команду Список, а затем — вкладку Графические маркеры (рисунок 21.20).

Рисунок 21.20. – Выбор параметров в окне Список

2. В появившемся окне Список установить:

• переключатель Рисунок «использовать из текущей темы»;

• флажки «Включить свертываемые структуры» и «Изначально свернуть» ® ОК.

Обратите внимание - на странице появится графический маркер.

Скопируйте первый пункт списка, например, Примерный перечень лабораторных работ ® Enter. Обратите внимание, что при переходе на новую строку будет автоматически появляться новый маркер.

3. Для создания вложенного списка оформите отступ, нажав дважды на кнопку Увеличить отступ на панели инструментов Форматирование. Появится графический маркер, имеющий другой цвет. Если необходимо оформить вложенный список как нумерованный щелкните кнопку Нумерация панели инструментов Форматирование.

4. Скопируйте или введите слово Построить: Нажмите клавишу Enter. Еще раз оформите отступ, нажав дважды на кнопку Увеличить отступ на панели инструментов Форматирование. Появится графический маркер, имеющий другой цвет (рисунок 21.21). Введите или скопируйте список предлагаемых для построения моделей, каждый раз переходя на новую строку путем нажатия клавиши Enter.

5. Завершив ввод списка, перейдите на новую строку, нажав клавишу Enter, обратите внимание, что курсор находится на новой строке списка, содержащей только графический маркер.

6. Для того, чтобы ввести второй пункт списка Провести:, вернитесь в исходное положение, нажав дважды кнопку Уменьшить отступ на панели инструментов Форматирование.

7. Оформите вложенным списком Перечень примерных вопросов и заданий для самостоятельной работы и Примерная тематика рефератов, курсовых работ. Для перехода на первый уровень необходимо четыре раза нажать кнопку Уменьшить отступ на панели инструментов Форматирование.

Рисунок 21.21. – Создание вложенного списка

8. Для проверки работы свертываемого списка нажмите кнопку Просмотр на панели Представления (в нижней части страницы) и щелкните верхний уровень списка (например, слова Примерный перечень лабораторных работ), оформленного как свертываемый, раскроется вложенный список, затем щелкните первый уровень списка (например, слово Построить). Повторный щелчок, сворачивает список.

9. Сохраните внесенные изменения.

Содержание отчета и его форма

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

1. название работы;

2. цель лабораторной работы;

3. формулировку задания и технологию его выполнения;

4. ответы на контрольные вопросы;

5. приложение - дискету с файлами, выполненных заданий.

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

1. Как создать новый Web - узел?

2. Как создать новую страницу?

3. Как переименовать страницу?

4. Как установить фоновые параметры страниц Web-узла?

5. Как задать общие границы?

6. Как поместить одну и ту же информацию на всех страницах сайта?

7. Как создать вложенный список

Защита лабораторной работы

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