4332

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

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

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

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

Русский

2012-11-16

91.5 KB

16 чел.

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

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

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

  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>

';


 

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

40107. Теорема о необходимых и достаточных условиях оптимальности смешанных стратегий 167.5 KB
  Пусть игра определена матрицей и ценой игры V. оптимальная стратегия 1 игрока х является первой координатой некоторой седловой точки фции выигрыша Мх у. СЛЕДСТВИЕ: Если для смешанных стратегий и числа V одновременно выполняются 1 и 2 то будут оптимальными стратегиями игроков а V цена игры. Докво: умножим 1 на y и просуммируем: умножим 2 на x и просуммируем: Получаем Тогда по следствию Т о седловой точке точка седловая и ...
40108. Функция выигрыша в матричных играх без седловой точки. Смешанные и оптимальные смешанные стратегии. Метод сведения решения матричных игр к задаче линейного программирования 119.5 KB
  Функция выигрыша в матричных играх без седловой точки. Парная игра с нулевой суммой задается формально матрицей игры матрицей А = {ij} элементы которой определяют выигрыш первого игрока и проигрыш второго если первый игрок выберет iю стратегию а второй jю стратегию. Пара i0j0 называется седловой точкой матрицы решением игры если выполняются условия: mx по столбцу I игрок min по строке II игрок Значение функции выигрыша в седловой точке называется ценой игры. Тогда выигрыш первого игрока при условии что он выбирает...
40109. Методы штрафных функций и методы центров в выпуклом программировании 90 KB
  Методы штрафных функций и методы центров в выпуклом программировании Метод штрафных функций Постановка задачи Даны непрерывно дифференцируемые целевая функция fx = fx1 xn и функции ограничений gjx = 0 j = 1 m; gjx 0 j = m1 p определяющие множество допустимых решений D. Требуется найти локальный минимум целевой функции на множестве D т. Стратегия поиска Идея метода заключается в сведении задачи на условный минимум к решению последовательности задач поиска безусловного минимума вспомогательной функции: Fx Ck =...
40110. Методы наискорейшего и координатного спуска для минимизации выпуклой функции без ограничений. Их алгоритмы и геометрическая интерпретация 94.5 KB
  Все методы спуска решения задачи безусловной минимизации различаются либо выбором направления спуска, либо способом движения вдоль направления спуска. Решается задача минимизации функции f(x) на всём пространстве Rn. Методы спуска состоят в следующей процедуре построения последовательност
40111. Субградиент как обобщение понятия градиента. Субградиент для функции максимума. Субградиентный метод и его геометрическая интерпретация в R2 141 KB
  Субградиент для функции максимума. Градиентом дифференцируемой функции fx в точке называется вектор частных производных.x0 y0 а значение lim называется частной производной функции f по x в т. Вектор называется субградиентом опорным вектором функции fx в точке если выполняется: Таких с множество но это множество ограничено и замкнуто.
40112. Типичные производственные функции с несколькими ресурсами: линейная ПФ, степенная ПФ, ПФ с постоянными пропорциями. Коэффициенты эффективности использования ресурсов для этих типов функций 162 KB
  Коэффициенты эффективности использования ресурсов для этих типов функций. Производственные возможности н х в любой момент времени определяются 2мя группами факторов: технологические условия производства которые выражают зависимости между затратами разных ресурсов и выпуском продукции объем и качество используемых ресурсов fx производственная функция зависимость результата производства объема выпуска продукции от затрат ресурсов. X = х1 хm вектор затрат ресурсов. ПФ характеризует максимально возможный выпуск продукции при...
40113. Показатели эффективности использования производственных ресурсов (коэффициенты средней и предельной эффективности). Коэффициент эластичности выпуска. Вычисление этих показателей для степенной производственной функции 134.5 KB
  Средняя эффективность использования ресурсов показывает отдачу от каждой единицы iго ресурса. Предельная эффективность показывает предельный прирост выпуска продукции при увеличении затрат iго ресурса на малую величину. При этом важен характер изменения эффективности дополнительных количеств используемого ресурса. Если найдем максимальный то определим от какого ресурса получим наибольшую отдачу т.
40114. Модель оптимального поведения потребителей на рынке товаров в условиях товарно-денежных отношений 85.5 KB
  Модель оптимального поведения потребителей на рынке товаров в условиях товарноденежных отношений. Исследуется поведение некоторой группы потребителей на рынке на котором представлены n товаров которые будем обозначать: y = y1 yn набор товаров услуг р = р1 рn заданные цены на товары услуги. Тогда задача имеет вид: Графическая интерпретация для случая двух товаров: Линии уровня имеют такой вид так как чем больше потребитель потребляет товар тем менее предпочтительным он становится Присутствующий в модели принцип...
40115. Вариантная задача развития и размещения производства. Метод коэффициентов интенсивности 98 KB
  Отраслевая модель перспективного планирования разрабатывается на 5-15 лет. В пределах этого времени очень часто показатели принимаются за постоянные. Если же относительно некоторых экономических показателей нельзя сделать предположение о постоянстве, то учитывается изменение во времени за некоторый период времени. При этом показатели вычисляются приближенно с помощью коэффициента дисконтирования.