Примеры форм
Форма «Заявка» (рис.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‑х графических (т.е. оформленных в виде рисунков) ссылок. Рядом с рисунками расположить поясняющий текст. Страницы узла должны иметь горизонтальную структуру, фон оформлен в сине-голубых тонах, текст – светло-серый или другого светлого оттенка, цвет ссылок – белый, цвет активных ссылок – ярко-желтый. Вариант 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”> <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”> Узел создан для иллюстрации и помощи в
|
