МЕТОДИЧЕСКИЕ УКАЗАНИЯ К ВЫПОЛНЕНИЮ КОНТРОЛЬНОЙ РАБОТЫ

Задание контрольной работы предполагает самостоятельное освоение студентом теоретических тем согласно программе по дисциплине «Программные средства разработки web-страниц» (см. Приложение 4) с использованием рекомендуемого списка литературы.

Кроме этого студент должен освоить практические приемы создания web-страниц, в том числе страниц, связанных между собой логически и с помощью ссылок, которые образуют единый web-узел (сайт).

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

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

Студент должен уметь вносить необходимые корректировки в оформление и содержание страниц, редактируя HTML-код страниц. Студент должен обладать навыками просмотра web-страниц с помощью браузера MS Internet Explorer; настройки почтовой программы MS Outlook Express для работы с существующими адресами электронной почты; создания, отправки и просмотра сообщений электронной почты с помощью почтового клиента (MS Outlook Express).

Требования к содержанию web-узла

1. Web-узел должен содержать 3-4 основные страницы согласно варианту задания. Обязательными страницами узла являются: главная страница, страница с формами и страница, содержащая мини-реферат. Файл стартовой (домашней) страницы web-узла должен называться index.htm (или index.html).

2. Если страницы узла создаются с помощью текстового редактора MS Word, они должны быть сохранены в формате «Web-страница с фильтром».

3. Главная страница узла должна содержать следующую информацию:

· название дисциплины,

· ФИО, номер группы, номер зачетной книжки студента,

· № варианта задания,

· список всех созданных в ходе выполнения задания файлов и папок с необходимыми пояснениями.

Фамилия студента должна быть выделена жирным курсивом, а номер варианта – жирным шрифтом.

Пример содержания главной страницы:

4. Конкретный вид формы и тема мини-реферата определяются вариантом задания.

В варианты задания включены формы трех видов: «Заявка», «Регистрация» и «Опрос». Данные форм должны отсылаться на существующий адрес электронной почты.

Примеры форм

Форма «Заявка» (рис.1) содержит следующие элементы: выключатель (флажок) для указания требования подписаться (по умолчанию включен) и выключатель для исключения из списка рассылки (по умолчанию выключен); текстовые поля для ввода ФИО, адреса электронной почты, регистрационного номера рассылки; выпадающий список для выбора темы рассылки; кнопки для очистки содержимого формы и отправки данных формы на электронный адрес. Форма также содержит поясняющий текст и горизонтальную линию – разграничитель двух логических разделов формы (подписка, отказ от подписки).

Рис.1. Внешний вид формы «Заявка»

Форма «Опрос» (рис.2) содержит: текстовое поле для ввода ФИО, переключатель для указания пола (м/ж), выпадающий список для указания возрастной категории, набор выключателей для указания интересов пользователя, поясняющий текст и кнопки для очистки и отправки данных формы на электронный адрес.

Форма «Регистрация» (рис.3) содержит следующие элементы управления: текстовые поля для ввода ФИО, адреса электронной почты, страны и города проживания пользователя (по умолчанию установлена страна Россия); переключатель для указания пола (м/ж); выпадающий список для указания возрастной категории (аналогично форме «Опрос») и кнопки для очистки содержимого формы и отправки данных формы на электронный адрес. Кроме того, форма содержит поясняющий текст и разделитель в виде горизонтальной линии.

Рис.2. Внешний вид формы «Опрос»

Рис.3. Внешний вид формы «Регистрация»

5. Мини-реферат должен иметь объем 2-3 машинописные страницы и разбит на разделы, снабженные заголовками. Заголовки должны быть выделены жирным шрифтом большего по сравнению с остальным текстом размера.

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

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

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

Структура страниц узла может быть реализована с помощью таблиц или фреймовых структур (Рамки в MS FrontPage, MS Word).

Рис.4. Основные типы структур страниц

7. В конце содержимого каждой страницы должна быть помещена ссылка на ее начало (для быстрого возврата в начало просмотренной страницы).

8. Контактные сведения должны содержать ссылку, выполняющую запуск почтовой программы для отправки письма на существующий адрес электронной почты.

Требования к оформлению контрольной

работы

Контрольная работа выполняется на отдельной дискете формата 3,5” и емкостью 1.44 Мб. Этикетка дискеты должна содержать название дисциплины, фамилию студента и номер группы.

В результате выполнения контрольной работы на дискете должны быть созданы:

· файл index.htm, содержащий стартовую страницу web-узла;

· файлы, содержащие остальные web-страницы;

· каталог, содержащий файлы рисунков, использованных для оформления страниц узла.

Если файлы и папки не помешаются на дискету, то они должны быть заархивированы в один файл программой-архиватором WinZip.

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

· название web-страницы, ее заголовок (TITLE) и имя файла страницы;

· внешний вид страницы;

· полный HTML-код страницы.

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

КоНТРОЛЬНЫЕ ЗАДАНИЯ

Вариант 1.

Создать 3-х страничный web-узел, включающий главную страницу, страницу с формой «Заявка» и страницу мини-реферата на тему «Организация гиперссылок средствами HTML». В низу главной страницы разместить графические ссылки (в виде рисунков) на остальные страницы узла. Страницы узла должны иметь горизонтальную структуру, фон оформлен в бежево-зеленых тонах, текст – черный или другого темного оттенка, цвет ссылок – малиновый, цвет активных ссылок – ярко-красный.

Вариант 2.

Создать 3-х страничный web-узел, включающий главную страницу, страницу с формой «Заявка» и страницу мини-реферата на тему «Спецификации HTML. Браузеры Netscape Navigator и Internet Explorer». В низу главной страницы разместить графические ссылки (в виде рисунков) на остальные страницы узла. Страницы узла должны иметь вертикальную структуру, фон оформлен в сине-голубых тонах, текст – светло-серый или другого светлого оттенка, цвет ссылок – белый, цвет активных ссылок – ярко-желтый.

Вариант 3.

Создать 3-х страничный web-узел, включающий главную страницу, страницу с формой «Заявка» и страницу мини-реферата на тему «Электронная почта и web-страницы (вызов почтового клиента с web-страницы, отправка данных формы на электронный адрес)». В низу главной страницы разместить графические ссылки (в виде рисунков) на остальные страницы узла. Страницы узла должны иметь горизонтальную структуру, для оформления фона использовать фоновый рисунок, цвет текста – черный, цвет ссылок – темно-синий, цвет активных ссылок – ярко-синий.

Вариант 4.

Создать 3-х страничный web-узел, включающий главную страницу, страницу с формой «Заявка» и страницу мини-реферата на тему «Создание таблиц средствами HTML и их использование на web-страницах». В низу главной страницы разместить графические ссылки (в виде рисунков) на остальные страницы узла. Страницы узла должны иметь вертикальную структуру, фон оформлен в бежево-зеленых тонах, текст – черный или другого темного оттенка, цвет ссылок – малиновый, цвет активных ссылок – ярко-красный.

Вариант 5.

Создать 3-х страничный web-узел, включающий главную страницу, страницу с формой «Заявка» и страницу мини-реферата на тему «Использование форм на web-страницах». В низу главной страницы разместить графические ссылки (в виде рисунков) на остальные страницы узла. Страницы узла должны иметь горизонтальную структуру, фон оформлен в сине-голубых тонах, текст – светло-серый или другого светлого оттенка, цвет ссылок – белый, цвет активных ссылок – ярко-желтый.

Вариант 6.

Создать 3-х страничный web-узел, включающий главную страницу, страницу с формой «Заявка» и страницу мини-реферата на тему «Использование фреймовых структур». В низу главной страницы разместить графические ссылки (в виде рисунков) на остальные страницы узла. Страницы узла должны иметь вертикальную структуру, для оформления фона использовать фоновый рисунок, цвет текста – черный, цвет ссылок – темно-синий, цвет активных ссылок – ярко-синий.

Вариант 7.

Создать 4-х страничный web-узел, включающий главную страницу, страницу с формой «Регистрация», страницу мини-реферата на тему «Структура HTML-документа» и страницу с ссылками на другие ресурсы WWW. Последняя страница должна содержать не менее 3-х графических (т.е. оформленных в виде рисунков) ссылок. Рядом с рисунками расположить поясняющий текст. Страницы узла должны иметь горизонтальную структуру, фон оформлен в бежево-зеленых тонах, текст – черный или другого темного оттенка, цвет ссылок – малиновый, цвет активных ссылок – ярко-красный.

Вариант 8.

Создать 4-х страничный web-узел, включающий главную страницу, страницу с формой «Регистрация», страницу мини-реферата на тему «Использование списков HTML» и страницу с ссылками на другие ресурсы WWW. Последняя страница должна содержать не менее 3-х графических (т.е. оформленных в виде рисунков) ссылок. Рядом с рисунками расположить поясняющий текст. Страницы узла должны иметь вертикальную структуру, фон оформлен в сине-голубых тонах, текст – светло-серый или другого светлого оттенка, цвет ссылок – белый, цвет активных ссылок – ярко-желтый.

Вариант 9.

Создать 4-х страничный web-узел, включающий главную страницу, страницу с формой «Регистрация», страницу мини-реферата на тему «Логическое и физическое форматирование текста HTML-документа» и страницу со ссылками на другие ресурсы WWW. Последняя страница должна содержать не менее 3‑х графических (т.е. оформленных в виде рисунков) ссылок. Рядом с рисунками расположить поясняющий текст. Страницы узла должны иметь горизонтальную структуру, для оформления фона использовать фоновый рисунок, цвет текста – черный, цвет ссылок – темно-синий, цвет активных ссылок – ярко-синий.

Вариант 10.

Создать 4-х страничный web-узел, включающий главную страницу, страницу с формой «Регистрация», страницу мини-реферата на тему «Тэги физического форматирования текста» и страницу со ссылками на другие ресурсы WWW. Последняя страница должна содержать не менее 3-х графических (т.е. оформленных в виде рисунков) ссылок. Рядом с рисунками расположить поясняющий текст. Страницы узла должны иметь вертикальную структуру, фон оформлен в бежево-зеленых тонах, текст – черный или другого темного оттенка, цвет ссылок – малиновый, цвет активных ссылок – ярко-красный.

Вариант 11.

Создать 4-х страничный web-узел, включающий главную страницу, страницу с формой «Регистрация», страницу мини-реферата на тему «Тэги логического форматирования текста» и страницу со ссылками на другие ресурсы WWW. Последняя страница должна содержать не менее 3‑х графических (т.е. оформленных в виде рисунков) ссылок. Рядом с рисунками расположить поясняющий текст. Страницы узла должны иметь горизонтальную структуру, фон оформлен в сине-голубых тонах, текст – светло-серый или другого светлого оттенка, цвет ссылок – белый, цвет активных ссылок – ярко-желтый.

Вариант 12.

Создать 4-х страничный web-узел, включающий главную страницу, страницу с формой «Регистрация», страницу мини-реферата на тему «Тэги уровня блока и последовательные тэги» и страницу со ссылками на другие ресурсы WWW. Последняя страница должна содержать не менее 3-х графических (т.е. оформленных в виде рисунков) ссылок. Рядом с рисунками расположить поясняющий текст. Страницы узла должны иметь вертикальную структуру, для оформления фона использовать фоновый рисунок, цвет текста – черный, цвет ссылок – темно-синий, цвет активных ссылок – ярко-синий.

Вариант 13.

Создать 3-х страничный web-узел, включающий главную страницу, страницу с формой «Опрос» и страницу мини-реферата на тему «Использование сценариев в HTML-документах». В низу главной страницы разместить графические ссылки (в виде рисунков) на остальные страницы узла. Страницы узла должны иметь горизонтальную структуру, фон оформлен в бежево-зеленых тонах, текст – черный или другого темного оттенка, цвет ссылок – малиновый, цвет активных ссылок – ярко-красный.

Вариант 14.

Создать 3-х страничный web-узел, включающий главную страницу, страницу с формой «Опрос» и страницу мини-реферата на тему «Использование каскадных таблиц стилей CSS». В низу главной страницы разместить графические ссылки (в виде рисунков) на остальные страницы узла. Страницы узла должны иметь вертикальную структуру, фон оформлен в сине-голубых тонах, текст – светло-серый или другого светлого оттенка, цвет ссылок – белый, цвет активных ссылок – ярко-желтый.

Вариант 15.

Создать 3-х страничный web-узел, включающий главную страницу, страницу с формой «Опрос» и страницу мини-реферата на тему «Объектная модель HTML-документа». В низу главной страницы разместить графические ссылки (в виде рисунков) на остальные страницы узла. Страницы узла должны иметь горизонтальную структуру, для оформления фона использовать фоновый рисунок, цвет текста – черный, цвет ссылок – темно-синий, цвет активных ссылок – ярко-синий.

Вариант 16.

Создать 3-х страничный web-узел, включающий главную страницу, страницу с формой «Опрос» и страницу мини-реферата на тему «События, свойства и методы объектов HTML-документа». В низу главной страницы разместить графические ссылки (в виде рисунков) на остальные страницы узла. Страницы узла должны иметь вертикальную структуру, фон оформлен в бежево-зеленых тонах, текст – черный или другого темного оттенка, цвет ссылок – малиновый, цвет активных ссылок – ярко-красный.

Вариант 17.

Создать 3-х страничный web-узел, включающий главную страницу, страницу с формой «Опрос» и страницу мини-реферата на тему «Встраиваемые в web-страницу компоненты: элементы управления ActiveX, скрипты и Java-апплеты». В низу главной страницы разместить графические ссылки (в виде рисунков) на остальные страницы узла. Страницы узла должны иметь горизонтальную структуру, фон оформлен в сине-голубых тонах, текст – светло-серый или другого светлого оттенка, цвет ссылок – белый, цвет активных ссылок – ярко-желтый.

Вариант 18.

Создать 3-х страничный web-узел, включающий главную страницу, страницу с формой «Опрос» и страницу мини-реферата на тему «Использование графических изображений для оформления web-страниц». В низу главной страницы разместить графические ссылки (в виде рисунков) на остальные страницы узла. Страницы узла должны иметь вертикальную структуру, для оформления фона использовать фоновый рисунок, цвет текста – черный, цвет ссылок – темно-синий, цвет активных ссылок – ярко-синий.

Вариант 19.

Создать 4-х страничный web-узел, включающий главную страницу, страницу с формой «Заявка», страницу мини-реферата на тему «Форматирование абзацев средствами HTML» и страницу со ссылками на другие ресурсы WWW. Последняя страница должна содержать не менее 3‑х графических (т.е. оформленных в виде рисунков) ссылок. Рядом с рисунками расположить поясняющий текст. Страницы узла должны иметь горизонтальную структуру, фон оформлен в бежево-зеленых тонах, текст – черный или другого темного оттенка, цвет ссылок – малиновый, цвет активных ссылок – ярко-красный.

Вариант 20.

Создать 4-х страничный web-узел, включающий главную страницу, страницу с формой «Заявка», страницу мини-реферата на тему «Использование графических карт-изображений» и страницу со ссылками на другие ресурсы WWW. Последняя страница должна содержать не менее 3‑х графических (т.е. оформленных в виде рисунков) ссылок. Рядом с рисунками расположить поясняющий текст. Страницы узла должны иметь вертикальную структуру, фон оформлен в сине-голубых тонах, текст – светло-серый или другого светлого оттенка, цвет ссылок – белый, цвет активных ссылок – ярко-желтый.

Вариант 21.

Создать 4-х страничный web-узел, включающий главную страницу, страницу с формой «Заявка», страницу мини-реферата на тему «Основные понятия языка HTML, особенности отображения HTML-документа браузерами» и страницу со ссылками на другие ресурсы WWW. Последняя страница должна содержать не менее 3‑х графических (т.е. оформленных в виде рисунков) ссылок. Рядом с рисунками расположить поясняющий текст. Страницы узла должны иметь горизонтальную структуру, для оформления фона использовать фоновый рисунок, цвет текста – черный, цвет ссылок – темно-синий, цвет активных ссылок – ярко-синий.

Вариант 22.

Создать 4-х страничный web-узел, включающий главную страницу, страницу с формой «Заявка», страницу мини-реферата на тему «Размещение в WWW данных, подготовленных в приложениях MS Office» и страницу со ссылками на другие ресурсы WWW. Последняя страница должна содержать не менее 3‑х графических (т.е. оформленных в виде рисунков) ссылок. Рядом с рисунками расположить поясняющий текст. Страницы узла должны иметь вертикальную структуру, фон оформлен в бежево-зеленых тонах, текст – черный или другого темного оттенка, цвет ссылок – малиновый, цвет активных ссылок – ярко-красный.

Вариант 23.

Создать 4-х страничный web-узел, включающий главную страницу, страницу с формой «Заявка», страницу мини-реферата на тему «Основы безопасной работы с web-страницами и электронной почтой» и страницу со ссылками на другие ресурсы WWW. Последняя страница должна содержать не менее 3‑х графических (т.е. оформленных в виде рисунков) ссылок. Рядом с рисунками расположить поясняющий текст. Страницы узла должны иметь горизонтальную структуру, фон оформлен в сине-голубых тонах, текст – светло-серый или другого светлого оттенка, цвет ссылок – белый, цвет активных ссылок – ярко-желтый.

Вариант 24.

Создать 4-х страничный web-узел, включающий главную страницу, страницу с формой «Заявка», страницу мини-реферата на тему «Браузер MS Internet Explorer 6.0: основные возможности и настройка» и страницу со ссылками на другие ресурсы WWW. Последняя страница должна содержать не менее 3‑х графических (т.е. оформленных в виде рисунков) ссылок. Рядом с рисунками расположить поясняющий текст. Страницы узла должны иметь вертикальную структуру, для оформления фона использовать фоновый рисунок, цвет текста – черный, цвет ссылок – темно-синий, цвет активных ссылок – ярко-синий.

Вариант 25.

Создать 3-х страничный web-узел, включающий главную страницу, страницу с формой «Регистрация» и страницу мини-реферата на тему «Структура глобальной компьютерной сети Интернет, технология «клиент-сервер». В низу главной страницы разместить графические ссылки (в виде рисунков) на остальные страницы узла. Страницы узла должны иметь горизонтальную структуру, фон оформлен в бежево-зеленых тонах, текст – черный или другого темного оттенка, цвет ссылок – малиновый, цвет активных ссылок – ярко-красный.

Вариант 26.

Создать 3-х страничный web-узел, включающий главную страницу, страницу с формой «Регистрация» и страницу мини-реферата на тему «IP-адреса, доменные имена, URL». В низу главной страницы разместить графические ссылки (в виде рисунков) на остальные страницы узла. Страницы узла должны иметь вертикальную структуру, фон оформлен в сине-голубых тонах, текст – светло-серый или другого светлого оттенка, цвет ссылок – белый, цвет активных ссылок – ярко-желтый.

Вариант 27.

Создать 3-х страничный web-узел, включающий главную страницу, страницу с формой «Регистрация» и страницу мини-реферата на тему «Структура, основные протоколы и сервисы глобальной компьютерной сети Интернет». В низу главной страницы разместить графические ссылки (в виде рисунков) на остальные страницы узла. Страницы узла должны иметь горизонтальную структуру, для оформления фона использовать фоновый рисунок, цвет текста – черный, цвет ссылок – темно-синий, цвет активных ссылок – ярко-синий.

Вариант 28.

Создать 3-х страничный web-узел, включающий главную страницу, страницу с формой «Регистрация» и страницу мини-реферата на тему «Назначение основных компонент MS FrontPage 98. Структура FrontPage Редактора». В низу главной страницы разместить графические ссылки (в виде рисунков) на остальные страницы узла. Страницы узла должны иметь вертикальную структуру, фон оформлен в бежево-зеленых тонах, текст – черный или другого темного оттенка, цвет ссылок – малиновый, цвет активных ссылок – ярко-красный.

Вариант 29.

Создать 3-х страничный web-узел, включающий главную страницу, страницу с формой «Регистрация» и страницу мини-реферата на тему «Управление web-узлами с помощью FrontPage Проводника». В низу главной страницы разместить графические ссылки (в виде рисунков) на остальные страницы узла. Страницы узла должны иметь горизонтальную структуру, фон оформлен в сине-голубых тонах, текст – светло-серый или другого светлого оттенка, цвет ссылок – белый, цвет активных ссылок – ярко-желтый.

Вариант 30.

Создать 3-х страничный web-узел, включающий главную страницу, страницу с формой «Регистрация» и страницу мини-реферата на тему «Почтовый клиент MS Outlook Express 5: основные возможности и настройка». В низу главной страницы разместить графические ссылки (в виде рисунков) на остальные страницы узла. Страницы узла должны иметь вертикальную структуру, для оформления фона использовать фоновый рисунок, цвет текста – черный, цвет ссылок – темно-синий, цвет активных ссылок – ярко-синий.

Пример выполнения контрольной работы

Задание: Создать трехстраничный web-узел, включающий главную страницу, страницу с формой и страницу мини-реферата на тему «Оформление фона web-страниц». В низу главной страницы разместить графические ссылки (в виде рисунков) на остальные страницы узла. Страницы узла должны иметь вертикальную структуру, содержимое разбито на три колонки. Фон страниц должен быть оформлен в желто-коричневых тонах, цвет текста – темно-коричневый, цвет ссылок – бордовый, цвет активных ссылок – малиновый.

Рис.5. Внешний вид страницы «Главная» – файл index.htm

HTML-код страницы «Главная»:

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1251”>

<title>Главная</title>

</head>

<body topmargin=”0” leftmargin=”0” rightmargin=”0” marginheight=”0” marginwidth=”0” bgcolor=”#FFFFD5” link=”#cc0066” vlink=”#cc0066” alink=”#993366” text=”#800000”>

<a name=”verh”></a>

<div align=”center”>

<table border=”0” cellpadding=”10” cellspacing=”0” width=”100%”>

<tr>

<td width=”100%” bgcolor=”#E7BF58”

colspan=”3”> <div align=”center”><font size=”6” color=”#800000”><b>Пример создания учебного узла </b></font></div>

<img src=”images/SPACER.GIF” width=”770” height=”1” border=”0”>

</td>

</tr>

<tr>

<td width=”12%” bgcolor=”#E7BF58” rowspan=”3” valign=”top”>&nbsp;<p>

<a href=”index.htm”><b>Главная</b></a></p>

<p><a href=”form.htm”><b>Формы</b></a></p>

<p><a href=”referat.htm”><b>Реферат</b></a></td>

<td width=”61%” valign=”top”><p align=”justify”>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Узел создан для иллюстрации и помощи в