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>


 

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

29391. Конструктивное исполнение электрооборудования в НГП 30 KB
  Конструктивное исполнение электрооборудования в НГП должно соответствовать условиям его эксплуатации. исполнение характеризуется тем что электродвигатели имеют специальные приспособления крышки кожухи сетки. Водозащищенное IP55 IP56 исполнение электродвигатели недоступны проникновению внутрь струй воды любого направления.
29392. Нерегулируемый ЭП буровых насосов 27.5 KB
  Двигатели брызгозащишенные с влагостойкой изоляцией с самовентиляцией; наверху корпуса двигателя смонтирован возбудитель связанный клиноременной передачей с валом двигателя. Номинальное напряжение двигателя 6 кВ частота вращения 750 об мин. Так как условия пуска двигателя бурового насоса сравнительно легкие момент статического сопротивления на валу двигателя составляет примерно 20 от номинального момента двигателя а время разгона составляет 34 сек в схеме предусмотрен прямой пуск двигателя с наглухо подключенным возбудителем. Для...
29393. Особенности конструкции ЭД станка-качалки 21 KB
  имеют повышенный пусковой момент который обеспечивается за счет специальной конструкции обмотки ротора это может быть или глубокопазная обмотка 10:1 или двойная беличья клетка причем внутренняя клетка выполнена из меди а наружная из латуни имеющей большее удельное сопротивление чем медь. После вытеснения тока на поверхность сечение проводника по которому течет ток уменьшается при этом активное сопротивление обмотки ротора увеличивается и момент развиваемый ЭД при пуске возрастает так как он пропорционален приведенному активному...
29394. Регулируемый ЭП буровых насосов 66.5 KB
  В небольших пределах регулирование скорости электродвигателя буровых насосов можно осуществлять при применении асинхронных двигателей АД с фазным ротором при помощи включении в цепь ротора регулировочных реостатов. При снижении скорости на 2030 скольжение становится равным 0203 и потеря мощности в пусковых реостатах достигнет также 2030. Поэтому в настоящее время реостатный способ регулирования скорости АД не применяется. Схема обеспечивает изменение скорости вращения АД на 40 выше от номинальной.
29395. СИНХРОННЫЕ МАШИНЫ 37 KB
  Синхронные машины обладают свойством обратимости то есть могут работать как генератором так и двигателем.1а изображена схема синхронной машины с явно выраженными полюсами.1 Конструкция и электрическая схема синхронной машины с явно выраженными полюсами а б.
29396. Электрооборудование установок для насосной добычи нефти 237.5 KB
  Глубинный насос 1 станкакачалки подвешивается на колонне насосных труб 3рис. Плунжеру 2 насоса сообщается возвратнопоступательное движение с передачей энергии от балансира станкакачалки при помощи колонны штанг 4. Колонна штанг станкакачалки на устье скважины через шток соединена с головкой балансира 6 станкакачалки. Балансирный и кривошипный противовесы служат для уравновешивания нагрузки подвижной системы станкакачалки и двигателя при ходе колонны штанг вниз и вверх рис.
29397. Бесштанговые насосные установки с погружными центробежными насосами 36 KB
  Конструктивные особенности насосной установки с ЭЦН и электропривода. Установка с ЭЦН состоит из следующих основных элементов см. Серийно выпускаются ЭЦН около 30 типоразмеров с подачей от 40 до 500 м3 в сутки и номинальным напором от 400 до 1500 м. Погружной электродвигатель ПЭД ЭЦН представляет собой трехфазный асинхронный двигатель на 3000 об мин в герметичном исполнении с короткозамкнутым ротором помещенный в стальную трубу заполненную трансформаторным маслом и рассчитанный для работы при температуре пластовой жидкости до 90 0С.
29398. Электробуры. Особенности технологии электробурения 28.5 KB
  Особенности технологии электробурения. Преимущества электробурения состоит в том что используется погружной ЭД приводящий во вращение рабочий инструмент на уровне забоя и имеется возможность контролировать фактическую мощность измерительных приборов. Использование электробурения особо широко применялось в 4060 гг прошлого столетия. В то же время использование электробурения позволяет решать многие проблемы связанные с усложнением строительства скважин.
29399. Электропривод ротора 31 KB
  Требования к ЭП ротора буровой установки: Должен иметь мягкую механическую характеристику. Повышению эффективности привода ротора способствует применение электромагнитных муфт различных конструкций устанавливаемых между двигателем и ротором. Пуск и регулирование частоты вращения ротора связаны с потерями энергии в электромагнитной муфте приводящими к её нагреву и муфту необходимо интенсивно охлаждать.