4332

Разработка персонального сайта студента. Структура и интерфейс сайта

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

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

Разработка персонального сайта студента. Структура и интерфейс сайта Необходимое программное обеспечение: Для выполнения лабораторной работы необходимо следующее ПО: Редактор HTML документов (HomeSite, AditorPro Блокнот...

Русский

2012-11-16

91.5 KB

14 чел.

Разработка персонального сайта студента. Структура и интерфейс сайта

Необходимое программное обеспечение:

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

  1.  Редактор HTML документов (HomeSite 4.5 и выше, Aditor Pro 3.05 , Блокнот и др.)
  2.  Файловый менеджер (Windows Commander 4.0 и выше)
  3.  Браузер (Internet Explorer 5.0 и выше)
  4.  Веб сервер Apache 1.3.27 и выше
  5.  Интерпретатор языка PHP 4.2.3 и выше

Задание

  1.  Определить название сайта

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

  1.  Определить список разделов сайта

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

  1.  Разработать систему навигации между разделами и внутри разделов сайта.

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

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

Меню, осуществляющее навигацию между разделами сайта, должно быть анимировано средствами Javascript. Анимация заключается в изменении цвета пункта меню при наведении на него курсора мыши. После того, как курсор убран, пункт меню должен восстанавливать свой цвет.

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

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

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

№ п/п

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

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

(пикселы)

Ширина

Изображения

(пикселы)

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

  1.  Разработать стилевые решения

Стили должны быть описаны во внешнем файле. Файл со стилями должен быть связан со всеми документами, входящими в состав сайта.

  1.  Разработать шаблон страницы

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

  1.  Поместить данные во внешний файл

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

  1.  Разработать процедуру формирования документа

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

  1.  Разработать счетчик загрузки для каждой страницы сайта.

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

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

Отчет

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

  1.  Титульный лист
  2.  Название сайта
  3.  Список разделов сайта
  4.  Таблицу изображений
  5.  Описание стилей
  6.  Шаблон документа
  7.  Текст файла(ов), содержащего информационное наполнение страниц сайта
  8.  Текст файла, содержащего скрипт счетчика

Защита

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

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

Учащийся допускается к защите ТОЛЬКО ПРИ НАЛИЧИИ отчета и демонстрационной версии сайта.

Пример

  1.  Название разрабатываемого сайта: Персональный сайт Иванова И.И.
  2.  Сайт содержит разделы: Резюме, Биография, Файлы, Ссылки. Каждый раздел представлен одной страницей.
  3.  Таблица изображений (в данном примере не содержит информации о стартовой странице сайта)

№ п/п

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

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

(пикселы)

Ширина

Изображения

(пикселы)

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

1

biogr1.gif

157

33

4138

2

biogr.gif

157

33

963

3

file1.gif

157

33

3163

4

file.gif

157

33

757

5

  1.  Описание стилей (файл styles.css)

.verh {

font-family: "Times New Roman", Times, serif;

font-size: 9px;

color: Black;

font-weight: bold;

}

.title {

font-family: "Monotype Corsiva";

font-size: 30px;

color: ffcc66;

font-weight: bold;

}

.subtitle {

font-family : "Times New Roman", Times, serif;

font-size : 16px;

color : Black;

text-decoration : underline;

font-weight : bold;

}

.bold {

font-family : "Times New Roman", Times, serif;

font-size : 16px;

color : Black;

font-weight : bold;

}

.normal {

font-family : "Times New Roman", Times, serif;

font-size : 16px;

color :black;

font-weight : normal;

}

.ssilka {

font-family : "Times New Roman", Times, serif;

font-size : 16px;

color : 990066;

font-weight : normal;

}

  1.  Шаблон документа (файл index.php)

<?

require ("data.php"); // подключения файла данных

if (!isset($page)) $page=0;

?>

<html>

<head>

<title>Персональный сайт студента <? echo $title[$page]; ?></title>

<link href="image/style.css" rel="stylesheet">

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

<meta name="keywords" content="студент, персональный сайт, <? echo $meta[$page]; ?>">

</head>

<center><body bgcolor="#FFFFFF">

<script language="Javascript">

<!--

//massivi

 var PassivePictures=new Array(4);

 var ActivePictures=new Array(4);

 ActivePictures[0]="image/rezum.gif";

 PassivePictures[0]="image/rezum1.gif";

 ActivePictures[1]="image/biogr.gif";

 PassivePictures[1]="image/biogr1.gif";

 ActivePictures[2]="image/file.gif";

 PassivePictures[2]="image/file1.gif";

 ActivePictures[3]="image/ssilk.gif";

 PassivePictures[3]="image/ssilk1.gif";

function Change(button,param,type) { //zamena

 if (type=="act") button.src=ActivePictures[param];

 else button.src=PassivePictures[param];

}

-->

</script>

<table width="788" height="100%" cellspacing="5" cellpadding="0" border="0" bgcolor="white">

<TR>

<TD width="200" height="5"><left><span class="verh">Персональный сайт студента 4-го курса</span></left></TD></TR>

   <TD width="200" height="50" bgcolor="#ffcc66"><center><img src="image/verh.gif" width="100" height="50" border="0" align="center" alt=""></center>

 </TD>

   <TD bgcolor="#00509D"><center><span class="title"><? echo $title[$page]; ?></span></center></TD>

<tr>

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

 <br>

  <center><a href="index.php?page=0"><img src="image/rezum1.gif" width="157" height="33" align="center" alt="Резюме" border="0"

       onmouseover="Change(this,0,'act')" onmouseout="Change(this,0,'pas')"></a></center><br><br>

  <center><a href="index.php?page=1"><img src="image/biogr1.gif" width="157" height="33" align="center" alt="Биография" border="0"

      onmouseover="Change(this,1,'act')" onmouseout="Change(this,1,'pas')"></a></center><br><br>

  <center><a href="index.php?page=2"><img src="image/file1.gif" width="157" height="33" align="center" alt="Файлы" border="0"

     onmouseover="Change(this,2,'act')" onmouseout="Change(this,2,'pas')"></a></center><br><br>

  <center><a href="index.php?page=3"><img src="image/ssilk1.gif" width="157" height="33" align="center" alt="Ссылки" border="0"

      onmouseover="Change(this,3,'act')" onmouseout="Change(this,3,'pas')"></a></center><br><br>

   <hr size="2" width="100% color="#006699">

      <center><? require ("s4et.php"); ?></center>

 </td>

 <td bgcolor="white">

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

   <tr>

 <td class="normal" bgcolor="white" VALIGN="top">

  <left><? echo $content[$page]; ?></left>

 </td>

</tr>

  </table>

 </td>

</tr>

 </tr>

</table>

</body>

</center>

</html>

  1.  Файл, содержащий информационное наполнение страниц (файл data.php)

<?

// Файл содержит описание массивов, содержащих названия страниц и их текст

$title[0]='..::Резюме::..';

$meta[0]='резюме';

$kol[0]="kol.cnt";

$content[0]='

  <img src="image/my.gif" width="108" height="100" border="0" align="left" alt="Моя фотография">

  <span class="bold">Ф.И.О:</span> Иванов Иван Иванович<br>

     <span class="bold">Дата рождения:</span> 11.11.1985<br>

     <span class="bold">Домашний телефон:</span> 111-11-11<br>

     <span class="bold">E-mail:</span> <a href="mailto:mail@mail.ru"> mail@mail.ru</a><br><br><br>

     <span class="subtitle">Образование</span><br>

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

  <span class="bold">Специальность:</span> Прикладная информатика (по областям применения).<br><br>

     <span class="subtitle">Профессиональные навыки</span><br>

     <span class="bold">ОС:</span> MS Windows 9x/2000/XP/2003<br>

     <span class="bold">Языки программирования:</span>  Visual С++, Delphi<br>

     <span class="bold">Программные продукты:</span> MS Office, СУБД MySQL, HomeSite 5.0, Photoshop 8.0. <br><br>

     <span class="subtitle">Дополнительные сведения</span><br>

     <span class="bold">Личные качества:</span> Аналитический склад ума, уравновешен, коммуникабелен<br>

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

     <span class="bold">Прочее:</span> Английский язык

';

$title[1]='..::Биография::..';

$meta[1]='биография';

$kol[1]="kol1.cnt";

$content[1]='

      <img src="Image/enc.gif" width="70" height="61" border="0" align="top"><br><br>

      Родился 11 ноября 1985 года. В 2002 году закончил школу №3 г. Братска.</br>

   В 2002 году поступил в  ИГУ </br>

   (БФ ИГУ) на специальность:</br>

   Прикладная информатика (по областям применения).</br>

';

$title[2]='..::Файлы::..';

$meta[2]='Файлы';

$kol[2]="kol2.cnt";

$content[2]='

    <img src="image/sub.gif" width="70" height="52" border="0" align="top" ><br><br>

 <span class="bold">Файлы для скачивания:</span><br><br>

 <A href="image/file1.gif"><span class="ssilka">Файл №1</span></A><br><br>

 <A href="image/file.gif"><span class="ssilka">Файл №2</span></A><br><br>

 <A href="image/my.gif"><span class="ssilka">Файл №3</span></A><br><br>

';

$title[3]='..::Ссылки::..';

$meta[3]='ссылки';

$kol[3]="kol3.cnt";

$content[3]='

<img src="image/web.gif" width="70" height="70" border="0" align="top" ><br><br>

 <span class="bold">Ссылки университета:</span><br><br>

  <A href="http://www.igu.ru/infopage">Информация об университете</A><br>

<A href="http://www.igu.ru/statistika">БФ ИГУв цифрах и фактах</A><br>

<A href="http://www.igu.ru/abitur/fdp.shtml">Факультет довузовской подготовки</A><br>

 <a href="http://fdp.igu.ru">Интернет-школа</a><br>

<A href="http://www.igu.ru/fakultet/">Факультеты</A><br>

<A href="http://www.igu.ru/dissovet/default.htm">Аспирантура</A><br>

 <a href="http://www.igu.ru/wizard/main.htm">Дополнительное и бизнес-образование</A><br>

<a href="http://new.igu.ru/C14/C15/umu/default.aspx?dID=2">Учебно-методическое управление</A><br>

 <a href="http://www.igu.ru/science/main.htm">Наука</A><br>

<a href="http://new.igu.ru/sites/science">Научный фонд БФ ИГУ</A><br>

<a href="http://www.igu.ru/inter/">Международные связи</A></br>

<a href="http://library.igu.ru/">Библиотека</A><br>

<a href="http://www.igu.ru/journals/main.htm">Издательский дом</A><br>

<a href="http://www.igu.ru/alumni.shtml">Выпускники БФ ИГУ</A><br>

 <a href="http://career.igu.ru/">Центр развития карьеры</A><br>

 <a href="http://www.igu.ru/student/index.htm">Студенческая жизнь</A><br>

';

?>

  1.  Текст файла, содержащего скрипт счетчика (файл counter.inc.php)

<?

require ("data.php");

if (!isset($kol)) $kol="kol.cnt";

if (!file_exists($kol[$page])) $number=1;

else {

$fp=fopen($kol[$page],"r");

$number=fgets($fp);

$number++;

fclose($fp);

}

echo '<span class="normal">Количество загрузок страницы: </span><span class="bold">'.$number.'</span>';

$fp=fopen($kol[$page],"w");

fputs($fp,$number);

fclose($fp);

?>

Приложение 1.

Для того чтобы добавить новый пункт меню (например: контакты) необходимо:

В шаблоне документа (файл index.php) добавить:

1. В массив картинок названия новых картинок:

ActivePictures[4]="image/kon.gif";

 PassivePictures[4]="image/kon1.gif";

2. Добавить еще одно меню:

<center><a href="index.php?page=4"><img src="image/kon1.gif" width="157" height="33" align="center" alt="Контакты" border="0"

      onmouseover="Change(this,4,'act')" onmouseout="Change(this,4,'pas')"></a></center><br><br>

В файле содержащий информационное наполнение страниц (файл data.php) добавить:

$title[4]='..::Контакты::..';

$meta[4]='контакты';

$kol[4]="kol4.cnt";

$content[4]='

      <img src="Image/Newkont.gif" width="70" height="61" border="0" align="top"><br><br>

      Контактная информация.</br>

';


 

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

29955. Природные чрезвычайные ситуации метеорологического происхождения: ураганы, бури, смерчи и их последствия; меры, принимаемые по защите населения 34.5 KB
  Последствиями воздействия ураганов бурь и смерчей являются повреждение и разрушение зданий и сооружений линий электропередачи и связи заносы и завалы на дорогах уничтожение посевов сельскохозяйственных культур повреждение и гибель кораблей. Чаще всего они поражаются летящими предметами и обрушивающимися конструкциями зданий и сооружений. Меры по защите от ураганов бурь и смерчей: точный прогноз и своевременное оповещение населения; уменьшение воздействия вторичных поражающих факторов пожаров прорывов плотин аварий на различных...
29956. Природные чрезвычайные ситуации биологического происхождения: эпидемии, эпизоотии, эпифитотии; меры, принимаемые по защите населения 43 KB
  Эпизоотия это одновременное прогрессирующее во времени и пространстве в пределах определенного региона распространение инфекционной болезни среди большого числа одного или нескольких видов животных значительно превышающее обычно регистрируемый на данной территории уровень заболеваемости. Эти чрезвычайные ситуации возможны при наличии и взаимодействии трех непременных элементов: возбудителя инфекционной болезни путей его передачи и восприимчивых к этому возбудителю людей животных и растений. Основные мероприятий направленные на...
29957. Теоретические подходы к изучению мышления в зарубежной психологии 53 KB
  Теоретические подходы к изучению мышления в зарубежной психологии Мышление – это процесс познавательной деятельности индивида включает в себя анализ синтез обобщение условий и требований решаемой задачи и способов ее решения. В настоящее время мышление изучается не только психологией но и философией логикой физиологией кибернетикой лингвитсикой. Мышление как ассоциация представлений Психология мышления стала специально разрабатываться лишь в XX в. Поэтому представители ассоциативной психологии не считали нужным специально исследовать...
29958. Теоретические подходы к изучению мышления в отечественной психологии 59 KB
  Теоретические подходы к изучению мышления в отечественной психологии. Развитие мышления ребенка происходит постепенно. Генетически наиболее ранняя форма мышления – нагляднодейственное мышление появляется в конце первого – начале второго года жизни еще до овладения им активной речью. Связь мышления с практическими действиями хотя и сохраняется но не является такой тесной прямой и непосредственной как раньше.
29959. Творческое мышление как предмет исследования в психологии 43.5 KB
  Продуктивная умственная деятельность не обеспечивается только свойствами интеллекта она определяется качествами мышления и личной позицией занимаемой субъектом по отношению к своей деятельности. Проблема изучения продуктивного творческого мышления. На основе модели были сконструированы южнокалифорнийские тесты RP тесты творческого мышления Торренса. Выделил 4 особенности творческого мышления: оригинальность семантическая гибкость способность видеть новое спонтанная гибкость способность дальновидения.
29960. Учение о развитии интеллекта Ж.Пиаже и других представителей швейцарской школы 51 KB
  Развитие операционального интеллекта в концепции Пиаже. Позднее Пиаже при изучении детского мышления больше фокусируется на анализе самих действий основными для Пиаже становятся исследования систем операций интеллекта. Важнейшее открытие Пиаже открытие эгоцентризма ребенка как центральной особенности мышления скрытой умственной позиции и как следствие своеобразие детской логики детской речи детских представлений о мире. Феномены Пиаже: 1.
29961. Психологическая сущность и механизмы воображения 45.5 KB
  Воображение и его развитие в детском возрасте Рибо Т. В основе способности к предвосхищению лежит воображение. В старой психологии существовала точка зрения согласно которой воображение не рассматривается как самостоятельный психический процесс поскольку преобразование образа и открытие нового традиционно выделяемые в качестве основных признаков воображения являются необходимыми сторонами любого процесса чувственного отражения действительности и функциями всех психических процессов Вундт Т. Рибо: воспроизводящее воображение = памяти...
29962. Виды и функции речи 48 KB
  Рубинштейн Речь – это процесс материализации мысли. Леонтьев Речь – Это деятельность общения – выражения воздействия сообщения = посредством языка; речь – это язык в действии. Речь это форма существования сознания мыслей чувств переживаний для другого служащая средством общения с ним и форма обобщённого отражения действительности или форма существования мышления. Рубинштейн Важно отличать речь от языка.
29963. Теория поля Курта Левина 46.5 KB
  Теория поля Курта Левина 1.: категория гешт образ Левин мотив; у гештальтистов образ рассматривался в отрыве от мотивации а мотивация у Левина отрывается от предметносмыслового содержания ситуации т. Для Левина поле это структура в которой совершается поведение. Понятие поля у Левина охватывает внутренний человека и внешний окружающее факторы.