4325

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

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

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

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

Русский

2012-11-16

99 KB

10 чел.

Цель работы: Получить практические навыки работы в виртуальной среде. Создать каркас сайта пользователя с использованием изображений. Изучить основы организации форм в 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>


 

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

33989. Посттромбофлебитический синдром 25.5 KB
  Патогенез: образование тромба не подвергающегося лизису изменение вен превращающихся в ригидную склерозированную трубку с разрушенными клапанами тяжелые гемодинамические нарушения повышение давления в системе комуникантных вен при ходьбе кровь по глубоким венам вверх и в п к вены извращенный рефлюкс крови локальная венозная гипертензия повышение давления в венозных отделах растрытие артериовенулярных анастомозов ишемические изменения преемущественно в н 3 голени над медиальной лодыжкой образование трофических язв....
33990. Тромбоз магистральных сосудов нижних конечностей 45.5 KB
  Начало заболевания характеризуется болями в пораженной конечности которые при эмболиях возникают внезапно и становятся невыносимыми. К болям присоединяется чувство онемения похолодания и резкой слабости в конечности. Кожные покровы пораженной конечности приобретают мертвеннобледную окраску которая в дальнейшем сменяется характерной мраморностью. Кожная температура значительно снижена особенно в дистальных отделах конечности.
33991. Антикоагулянты. Применение 23 KB
  Антикоагулянтный эффект гепарина наступает сразу же после внутривенного и через 10 15 мин после внутримышечного введения и продолжается в течение 4 5 ч. Суточная доза гепарина составляет 30 000 50 000 ЕД. При передозировке гепарина может возникнуть геморрагический синдром который устраняют путем введения 1 раствора протамина сульфата 1 мг которого нейтрализует эффект 100 ЕД гепарина. При этом суточную дозу гепарина постепенно снижают в l' 2 2 раза за счет уменьшения его разовой дозы.
33992. Облитерирующий эндартериит 26.5 KB
  Облитерирующий эндартериит Облитерирующий эндартериит заболевание сосудов нейрогуморального генеза начинается с поражения переферического русла главным образом артерий и приводит к облитерации их просвета. Длительно существующий спазм артерий и сопровождающих их vs vsorum ведет к хронической ишемии сосудистой стенки вследствие чего наступают гиперплазия интимы фиброз адвентиции и дегенеративные изменения собственного нервного аппарата сосудистой стенки. На артериограмме окклюзия артерий голени. На артериограмме оклюзия 23...
33993. Атеросклероз артерий 24 KB
  Физикальное обследование Ослабление пульса на периферических артериях побледнение при поднимании пораженной конечности. Анамнез: внезапная боль или чувство онемения в конечности при отсутствии хромоты в прошлом. Физикальное обследование: отсутствие пульса бледность и снижение температуры конечности дистальнее места окклюзии. Лечение: содержать конечности в тепле внутрь блокаторы кальциевых каналов нифедипин 1040 мг внутрь 34 раза в день.
33994. Лапароскопическая хирургия 24.5 KB
  Следуя интересам пациентов сведение до минимума травматичности операции и под давлением различных социальноэкономических факторов необходимость уменьшать длительность пребывания пациентов в стационаре и быстрее возвращать их к нормальной жизни и работе достижения в современной хирургии и современных технологиях дали рождение новой эре в хирургии эре малоинвазивной хирургии. Противопоказания: Критерии отбора пациентов для лапароскопических операций изменились за последние 56 лет. Основой для безопасного отбора пациентов является...
33995. АБСЦЕСС АППЕНДИКУЛЯРНЫЙ 25 KB
  Частота 1419 случаев аппендикулярного инфильтрата. Этиология и патогенез Исход аппендикулярного инфильтрата при неблагоприятном течении Аппендикулярный инфильтрат ограничивается большим сальником и прилегающими петлями кишечника При благоприятном течении аппендикулярный инфильтрат рассасывается в сроки от 2 до 4 нед При неблагоприятном стечении обстоятельств позднее поступление в стационар устойчивость микрофлоры к антибиотикам и т. происходит абсцедирование инфильтрата. При наличии признаков острого аппендицита в течение 23...
33996. Этапы становления и характерные черты русской философии 29 KB
  формировалась под влиянием общемировой фил. Однако специф Р фил во многом складывалась под влиянием социально культурных процессов происходивших на Руси. фил мысли.
33997. Философский смысл проблемы бытия. Виды бытия 28 KB
  Бытие филос. 1Бытие вещей и процессов. В свою очередь также может быть представлено в двух формах: абытие вещей и состояний природы кот. Бытие второй природы цивилизации.