4325

Модификация сайта студента с использованием графики

Лабораторная работа

Информатика, кибернетика и программирование

Цель работы: Получить практические навыки работы в виртуальной среде. Создать каркас сайта пользователя с использованием изображений. Изучить основы организации форм в HTML. Программное обеспечение Дя выполнения лабораторной работы необходимо следую...

Русский

2012-11-16

99 KB

9 чел.

Цель работы: Получить практические навыки работы в виртуальной среде. Создать каркас сайта пользователя с использованием изображений. Изучить основы организации форм в HTML.

Программное обеспечение

Дя выполнения лабораторной работы необходимо следующее ПО:

  1.  Редактор HTML документов (желательно HomeSite 4.5 и выше)
  2.  Графический редактор (желательно Adobe Photoshop 5.5 и выше)
  3.  Файловый менеджер (желательно Windows Commander 4.0 и выше)
  4.  Браузер (желательно Internet Explorer 5.0 и выше)

Теоретические сведения

1.Графика внутри HTML-документа.

Одна из наиболее привлекательных черт Web - возможность включения ссылок на графические и иные типы данных в HTML-документ. Делается это при помощи тэга <IMG...ISMAP>. Использование данного тэга позволяет значительно улучшить внешний вид и функциональность документов.

Существует два способа использования графики в HTML-документах.

Первый 

- это внедрение графических образов в документ, что позволяет пользователю видеть изображения непосредственно в контексте других элементов документа. Это наиболее используемая техника при проектировании документов, называемая иногда "inline image". Синтаксис тэга:

<IMG SRC="URL" ALT="text" HEIGHT=n1 WIDTH=n2  ALIGN=top|middle|bottom|texttop|absmiddle|baseline|absbottom
BORDER=n3 VSPACE=n4 HSPACE=n5 ISMAP>

  •  URL Обязательный параметр, имеющий такой же синтаксис, как и стандартный URL. Данный URL указывает броузеру где находится рисунок. Рисунок должен храниться в графическом формате, поддерживаемом броузером. На сегодняшний день форматы GIF и JPG поддерживаются большинством броузеров.
  •  ALT="text" Данный необязательный элемент задает текст, который будет отображен броузером, не поддерживающим отображение графики или с отключенной подкачкой изображений. Обычно, это короткое описание изображения.
  •  HEIGTH=n1 и WIDTH=n2 Данные параметры используется для указания высоты и ширины рисунка. Явное указание размеров рисунка позволит браузеру расположить рисунок и текст оптимальным образом, и даст возможность избежать "прыгающей" загрузки страниц.
  •  ALIGN Данный параметр используется, чтобы сообщить броузеру, куда поместить следующий блок текста. Это позволяет более строго задать расположение элементов на экране. Если данный параметр не используется, то большинство броузеров располагает изображение в левой части экрана, а текст справа от него.
  •  ISMAP Этот параметр сообщает броузеру, что данное изображение позволяет пользователю выполнять какие-либо действия, щелкая мышью на определенном месте изображения. Данная возможность является расширением HTML.
  •  BORDER Данный параметр позволяет автору определить ширину рамки вокруг рисунка.
  •  VSPACE Позволяет установить размер в пикселах пустого пространства над и под рисунком, чтобы текст не наезжал на рисунок. Особенно это важно для динамически формируемых изображений, когда нельзя заранее увидеть документ.
  •  HSPACE То же самое, что и VSPACE, но только по горизонтали.

Фоновые рисунки 

Большинство браузеров позволяет включать в документ фоновый рисунок, который будет матрицироваться и отображаться на фоне всего документа. Ненавязчивый полупрозрачный рисунок (обои) обычно хорошо выглядит в качестве фона для большинства документов. Описание фонового рисунка включается в тэг BODY и выглядит следующим образом: <BODY BACKGROUND="URL">

2. Формы

Формы были созданы и используются в WWW для получения отклика пользователя на предоставленную информацию и сбора данных о пользователе. После заполнения пользователем формы и запуска процесса ее обработки информация из нее попадает к программе, работающей на сервере. Простота использования тега <MAILTO:> в формах позволяет даже владельцам небольших страниц получать отклик от своих читателей. Для обработки большого количества откликов используются программы, поддерживающие Common Gateway Interface (CGI) и расположенные на сервере, в адрес которого поступают отклики. Таким образом пользователь может интерактивно взаимодействовать с Web-сервером через Internet.

Задание формы — элемент FORM 

Элемент FORM обозначает документ как форму и определяет границы использования других тегов, размещаемых в форме. Тег <FORM> определяется последовательностью тегов <INPUT>, размещенных внутри пары <FORM> и </FORM>. В форме используется как метод (method), так и действие (action) для описания обработки данных, вводимых пользователем в форму. Метод (GET или POST) определяет, как должны обрабатываться входные данные из формы, а действие указывает на URI программы, ответственной за обработку этих данных.

<FORM METHOD="post" ACTION="mailto:yourname@your.email.address">

Определение элементов управления формы — тег <INPUT> 

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

Атрибут TYPE=text 

Когда пользователю необходимо ввести небольшое количество текста (одну или несколько строк), используется тег <INPUT>, и атрибут TYPE устанавливается в значение text. Это значение принято по умолчанию и указывать его необязательно. Кроме того, задается атрибут NAME для определения наименования переменной поля.

Ваше имя <INPUT NAME="Name" SIZE="35">

Имеется еще три дополнительных атрибута, которые можно использовать. Первый называется MAXLENGTH, он ограничивает число символов, вводимых пользователем в текущее поле. По умолчанию данное число не ограничено. Вторым атрибутом является SIZE, определяющий размер видимой на экране области, занимаемой текущим полем. Значение по умолчанию определяется типом браузера. Если значение MAXLENGTH больше, чем SIZE, браузер будет прокручивать данные в окне. Последним из дополнительных атрибутов является атрибут VALUE, обеспечивающий начальное значение поля ввода.

Атрибут TYPE=checkbox 

При создании форм часто требуется получить ответ пользователя на вопрос типа "Да/Нет". Для создания независимых кнопок в формах HTML используется тег <INPUT> с атрибутом TYPE=checkbox. В зависимости от содержания формы пользователь может отметить несколько флагов. Когда форма использует тег <INPUT> с атрибутом CHECKBOX, в нем должны присутствовать и атрибуты NAME, и VALUE. Атрибут NAME указывает на наименование данного поля (флага) ввода. В атрибуте VALUE будет содержаться значение поля.

Россия<INPUT NAME="Страна" TYPE=checkbox VALUE="Россия"> %

Страны СНГ<INPUT NAME="Страна" TYPE=checkbox VALUE="СНГ">

В некоторых случаях необходимо инициализировать данный флаг, как уже отмеченный. В таких случаях тег <INPUT> должен содержать атрибут CHECKED.

Атрибут TYPE=radio 

В некоторых случаях требуется организовать выбор одного из нескольких возможных значений. Для создания формы ввода при выборе пользователем одного значения из нескольких возможных необходимо использовать тег <INPUT> с атрибутом TYPE=radio. Когда в форме применяется данный атрибут, в теге <INPUT> должны быть указаны атрибуты NAME и VALUE. Атрибут NAME указывает наименование соответствующего поля (кнопки). Атрибут VALUE содержит значение поля.

Пол мужской<INPUT NAME="Пол" TYPE=radio VALUE="Мужской"> %

Пол женский<INPUT NAME="Пол" TYPE=radio VALUE="Женский">

Атрибут TYPE=image 

В зависимости от содержимого формы может случиться так, что пользователю потребуется щелкнуть мышью на изображении, чтобы завершить работу с формой. Для этого программисты используют тег <INPUT> с атрибутом TYPE=image. Когда пользователь щелкает мышью по изображению, браузер сохраняет координаты соответствующей точки экрана. Далее он "обрабатывает" введенную в форму информацию. Когда форма использует атрибут image, тег <INPUT> должен содержать также атрибуты NAME и SRC. NAME указывает наименование поля ввода формы. Атрибут SRC содержит URI файла — источника изображения. Атрибут ALIGN является дополнительным и используется аналогично тому же атрибуту тега <IMG>.

<BR>Выберите точку<INPUT TYPE=image NAME=point SRC="image.gif">

Атрибут TYPE=password 

Если в форме требуется организовать ввод пароля, то атрибут TYPE можно установить в значение password (TYPE=password). Используя данный тип, можно организовать ввод пароля без вывода на экран составляющих его символов. При этом следует помнить, что введенные данные передаются по незащищенным каналам связи и могут быть перехвачены.

Подпись<INPUT NAME="login"> %

Пароль <INPUT TYPE=password NAME="pass">

Атрибут TYPE=reset 

Когда пользователь заполняет форму, ему может потребоваться начать все сначала. На такой случай существует кнопка Reset, по которой пользователь может щелкнуть мышью, чтобы вернуться к первоначальным значениям полей. Когда пользователь выбирает данную кнопку, форма восстанавливает первоначальные значения всех элементов, в которых присутствует атрибут TYPE=reset. Для создания кнопки Reset используется тег <INPUT> с атрибутом TYPE=reset. Браузер в свою очередь будет выводить изображение данной кнопки. Если в форме используется атрибут reset, тег <INPUT> может дополнительно содержать атрибут VALUE. Данный атрибут определяет надпись на изображении кнопки.

<INPUT TYPE=reset VALUE="Очистить форму">

Атрибут TYPE=submit 

Используя форму HTML для ввода информации от пользователя, необходимо обеспечить пользователю возможность завершить ввод данных. Для этого используется тег <INPUT> с атрибутом TYPE=submit. Браузер, в свою очередь, выводит данный элемент, как кнопку, по которой пользователь может щелкнуть, чтобы завершить процесс редактирования. Когда в форме используется тег <INPUT> с атрибутом submit, данный элемент может содержать два дополнительных атрибута: NAME и VALUE. Атрибут NAME хранит значение переменной поля в вашей форме. Атрибут VALUE — указывает наименование кнопки Submit.

<BR><INPUT TYPE=submit VALUE="Отправить сообщение"> %

Атрибут TYPE=hidden 

Скрытые поля. Добавление в тег INPUT атрибута TYPE=hidden позволит включить в отправляемую форму значения атрибутов NAME и VALUE, которые пользователь изменить не может. Такие метки полезны при наличии нескольких форм для дальнейшей обработки данных.

Создание многострочных областей ввода текста — тег <TEXTAREA> 

В зависимости от типа формы может потребоваться организовать ввод большого количества текста. В таких случаях используется тег <TEXTAREA> для создания текстового поля из нескольких строк. Данный тег использует три атрибута: COLS, NAME и ROWS.

Атрибут COLS Указывает (число символов) число колонок, содержащихся в текстовой области.

Атрибут NAME Определяет наименование поля.

Атрибут ROWS Задает количество видимых строк текстовой области.

<TEXTAREA NAME=тема COLS=38 ROWS=3> </TEXTAREA>

Использование списков в форме — тег <SELECT> 

Когда формы HTML становятся более сложными, в них часто включают списки с прокруткой и выпадающие меню. Для этого используют тег SELECT с атрибутом TYPE=select. Для определения списка пунктов используют тег <OPTION>. Тег <SELECT> поддерживает три необязательных атрибута: MULTIPLE, NAME и SIZE.

Атрибут MULTIPLE Позволяет выбрать более чем одно наименование.

Атрибут NAME Определяет наименование объекта.

Атрибут SIZE Определяет число видимых пользователю пунктов списка. Если в форме установлено значение атрибута SIZE=1, то браузер выводит на экран список в виде выпадающего меню. В случае SIZE > 1 браузер представляет на экране обычный список.

В форме может использоваться тег <OPTION> только внутри тега <SELECT>. Эти теги поддерживают два дополнительных атрибута: SELECTED и VALUE.

Атрибут SELECTED Используется для первоначального выбора значения элемента по умолчанию.

Атрибут VALUE Указывает на значение, возвращаемое формой после выбора пользователем данного пункта. По умолчанию значение поля равно значению тега <OPTION> (открыть).

Выбор <SELECT NAME="Выбор"> %

<OPTION>Вариант 1 </OPTION>%

<OPTION>Вариант 2 </OPTION>%

<OPTION VALUE="Вариант 3">Вариант 3 </OPTION>%

<OPTION SELECTED>Вариант 4 </OPTION>%

</SELECT>

Задание

  1.  Разработать стартовую страницу сайта

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

  1.  Разработать графическое меню

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

  1.  Заполнить таблицу документов

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

№ п/п

Название HTML файла

Раздел

Номера связанных документов

Обязательные страницы:

  •  Об авторе.
    •  Мой ВУЗ
    •  Моя группа.
    •  Моя будущая профессия.
    •  Мои увлечения или хобби.
    •  Любая другая информация.

  1.  Заполнить таблицу изображений

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

№ п/п

Название файла

Длина изображения

(пикселы)

Ширина

Изображения

(пикселы)

Размер файла (байты)

Присутствует в документах (номера из табл. документов)

5. Создайте форму ввода сведений о пользователе-посетителе Вашего сайта, содержащую не менее 20 полей различного вида и назначения.

Отчет

Отчет о выполнении лабораторной работы должен содержать следующие разделы:

  1.  Титульный лист
  2.  Таблицу документов
  3.  Таблицу изображений
  4.  Текст стартовой страницы сайта
  5.  Текст одного HTML документа, входящего в состав сайта, по выбору студента.
  6.  Текст формы

Защита


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

     Демонстрация работоспособности сайта осуществляется на рабочей станции дисплейного класса путем загрузки страниц сайта из папки студента программой просмотра страниц (браузером).

Пример

  1.  Таблица изображений (в данном примере не содержит информации о стартовой странице сайта)

№ п/п

Название файла

Длина изображения

(пикселы)

Ширина

Изображения

(пикселы)

Размер файла (байты)

Присутствует в документах (номера из табл. документов)

1

res.gif

157

47

494

1,2,3

2

bio.gif

157

47

607

1,2,3

3

proj.gif

157

47

537

1,2,3

  1.  Текст файла res.html

<html>

<head>

<title>Персональный сайт Иванова И.И. Резюме</title>

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

<meta name="keywords" content="Иванов, персональный сайт, резюме">

</head>

<body bgcolor="#CCCCCC">

<center><font size="5" color="Teal">Резюме</font></center>

<hr size="1" width="100%">

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

<tr>

 <td width="200" valign="top">

  <a href="res.html"><img src="img/res.gif" width="157" height="47" alt="Резюме" border="0"></a><br><br>

  <a href="#"><img src="img/bio.gif" width="157" height="47" alt="Биография" border="0"></a><br><br>

  <a href="#"><img src="img/proj.gif" width="157" height="47" alt="Проекты" border="0"></a>

 </td>

 <td>

  <table width="100%" cellspacing="0" cellpadding="0" border="0">

   <tr>

 <td>

<b>Ф.И.О:</b> Иванов Иван Иванович<br>

<b>дата рождения:</b> 1 января 1970г.<br>

<b>Семейное положение:</b> холост<br>

<b>домашний телефон:</b> 111-11-11<br>

<b>E-mail:</b> ivanov@mail.ru<br><br>

<b><u>Образование</u></b><br>

Иркутский государственный университет, филиал в г.Братске(БФ ИГУ).<br>

<b>Специальность:</b> Прикладная информатика в экономике.<br><br>

     <b><u>Опыт работы</u></b><br>

     2004-2010 ООО "СуперСофт"<br>

     <b>Должность:</b> системный администратор<br><br>

     <b><u>Профессиональные навыки</u></b><br>

     <b>ОС:</b> MS Windows 9x/2000/XP, UNIX<br>

     <b>Языки программирования:</b>  C/С++, Visual Basic<br>

     <b>Программные продукты:</b> MS Office, MS Visio<br><br>

     <b><u>Дополнительные сведения</u></b><br>

     <b>Личные качества:</b> аккуратность, педантичность, обучаемость<br>

     <b>Увлечения:</b> музыка, литература, спорт, компьютерные игры<br>

     <b>Прочее:</b> Английский язык (технический)

 </td>

</tr>

  </table>

 </td>

</tr>

</table>

</body>

</html>


 

А также другие работы, которые могут Вас заинтересовать

2888. Генетика человека 267.5 KB
  Генетика человека Генеалогический и близнецовый методы Запишите номера вопросов и дайте ответ одним предложением: Что затрудняет изучение генетики человека. В чем сущность генеалогического метода изучения генетики человека. Кто так...
2889. Генетика. Закономерности изменчивости 343 KB
  Генетика. Закономерности изменчивости. Характеристика модификационной изменчивости Заполните таблицу: Модификационная изменчивость Характеристика  Причины изменчивости  Можно ли ее считать определенной изменчивостью. Приведите примеры...
2890. Генетика пола, Хромосомные механизмы определения пола 79.5 KB
  Генетика пола Проблема пола, т.е. вопрос о механизмах, которые определяют развитие мужских и женских особей, остаётся одной из самых актуальных и ещё не решена окончательно. Пол особи – совокупность генетических, морфологических и физиологическ...
2891. Сборник задач и упражнений по курсу Высшая математика 1.38 MB
  Вторая часть сборника задач по курсу Высшая математика содержит введение в математический анализ (Глава 3) и индивидуальные домашние задания по теме. Предел функции и непрерывность и по теме: Производная Глава 3 содержит следующие темы. комбин...
2892. Конструкции передвижных компрессорных станций с поршневыми компрессорами 4.72 MB
  Конструкции передвижных компрессорных станций с поршневыми компрессорами Цель: Изучить конструкцию передвижной компрессорной станции с поршневым компрессором, изучить устройство и взаимодействие основных узлов и систем, получить навыки пуска и...
2893. Унифицированные базы и конструктивные элементы поршневых компрессоров 4.57 MB
  Унифицированные базы и конструктивные элементы поршневых компрессоров Цель: Ознакомить студентов с принципом создания поршневых компрессоров на унифицированных базах и изучить конструкции деталей компрессора с базовыми элементами. Унифицированные...
2894. Транзисторы. Устройство и принцип действия 232.01 KB
  Транзисторы 1. Устройство и принцип действия биполярного транзистора Транзистором называется преобразовательный полупроводниковый прибор, имеющий не менее трех выводов, предназначенный для усиления мощности электрического сигнала. Наиболее распростр...
2895. Фрагмент сети сотовой связи федерального стандарта в Вольно-Надеждинском районе Приморского края 3.78 MB
  В данном дипломном проекте произведен расчет сети сотовой связи стандарта GSM в заданном районе (Вольно-Надеждинский район Приморского края) в условиях ограниченного радиоресурса. Проведен расчет нагрузки от одного абонента, учитывая продолжительнос...
2896. Проект системы охранной сигнализации. 867 KB
  Своевременно полученная информация позволяет сводить последствия любых чрезвычайных происшествий к минимуму, а главное сохранять жизнь людей и их имущество. Эта задача решается с помощью систем обеспечения безопасности: систем пожарно-охранного...