4332

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

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

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

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

Русский

2012-11-16

91.5 KB

13 чел.

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

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

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

  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>

';


 

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

67369. ПРАВОВОЙ НИГИЛИЗМ И ПРАВОВОЙ ИДЕАЛИЗМ 245.5 KB
  Проблема правового нигилизма и правового идеализма в учебной литературе по теории государства и права до сих пор не рассматривалась. Современное российское общество характеризуется множеством различных противоречий среди которых наблюдается и такое как причудливое переплетение...
67370. Перевантаження операторів введення-виведення даних 85.5 KB
  У розглянутих раніше прикладах програм для виконання операції введення або виведення «класових» даних створювалися функції-члени класів, призначення яких полягало тільки у тому, щоб ввести або вивести ці дані. Незважаючи на те, що у такому вирішенні цих питань немає нічого неправильного, проте у мові...
67371. МЕХАНИЗМ ПРАВОВОГО РЕГУЛИРОВАНИЯ 118.5 KB
  Право — многогранное явление, призванное регулировать общественные отношения. Его можно рассматривать с разных сторон. В роли социального феномена цивилизации, элемента культуры, меры свободы и справедливости право в большей степени...
67372. Форматування даних за допомогою функцій-членів класу ios 645 KB
  Дотепер під час введення або виведення інформації в наведених вище прикладах програм діяли параметри форматування, які за замовчуванням використовує С++-система введення-виведення. Але програміст може сам керувати форматом представлення даних, причому двома способами.
67373. СТИМУЛЫ И ОГРАНИЧЕНИЯ В ПРАВЕ 118.5 KB
  Правовое регулирование не имеет ни вещественной, ни энергетической формы, а осуществляется преимущественно на информационном уровне. Однако информация бывает разная: описательного характера (дескриптивная) и сугубо управленческая, нормативная, предписывающая (прескриптивная).
67374. Створення власних маніпуляторних функцій 532 KB
  Програміст може самостійно створювати власні маніпуляторні функції. Існує два типи маніпуляторних функцій – ті, що приймають (параметризовані) і не приймають аргументи (непараметризовані). Для створення параметризованих маніпуляторів використовуються підходи...
67375. ЛЬГОТЫ И ПООЩРЕНИЯ В ПРАВЕ 162 KB
  Находит новое отражение в законодательстве и учет особых интересов субъектов средством которого выступают правовые льготы. Льготы есть прежде всего социальная мера в этом проявляется их общественная ценность. Кроме того льготы все активнее используются в российской правовой системе...
67376. ИНДИВИД И ЛИЧНОСТЬ 98 KB
  Проблема nостоянства или тождества личности одна из важнейших и наиболее разработанных проблем философии психологии и социологии. Религиозная концепция личности также настаивает на бессмертии и бесконечной ответственности постоянного ядра личности но либо допускает перевоплощение душ...
67377. ЗАКОННОСТЬ И ПРАВОПОРЯДОК 136.5 KB
  Проблема законности одна из центральных в общей теории государства и права. В свете этих изменений существующая в литературе интерпретация законности обладает рядом принципиальных недостатков. Вопервых содержание данной категории не отражает всего многообразия явлений формирующих представления о ней...