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>

';


 

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

42652. Розрахунок контакних площадок елемента 196.5 KB
  Діаметр контактної площадки розраховується за формулою: де – верхнє граничне відхилення діаметра отвору; – верхнє та нижнє граничні відхилення ширини провідника відповідно приймаємо 0.; – діаметр отвору вибирається із таблиці 1. Діаметри отворів в ПП мм Номінальний діаметр монтажного отвору Максимальний діаметр вивода елемента неметалізованого Перехідного металізованого із урахуванням металізації 05 04 07 06 До 04 09 08 04 – 06 11 10 06 – 08 16 15 08 – 13 21 20 13 – 17 Площа плати. Елемент Діаметр виводу...
42653. Склад програм циклічної структури. Цикли з відомою та невідомою кількістю повторів 43.5 KB
  Які оператори циклу існують та як вони виконуються Яким оператором циклу краще програмувати ті або інші циклічні обчислювальні алгоритми Як ініциалізіруються перемінні циклу for якщо нема вираження el.
42654. Себестоимость продукции 74.81 KB
  Главными задачами развития экономики на современном этапе является всемерное повышение эффективности производства, а также занятие устойчивых позиций предприятий на внутреннем и международном рынках
42655. Строение полукружных каналов, их функциональное значение, связь с другими отделами уха и черепа 14.75 KB
  Задний лабиринт представлен системой полукружных каналов. Это три костных трубки просветом до 0.5 мм, изогнутые полукругом. Оба конца полукружных каналов открываются в преддверие.
42656. Строение перепончатой улитки, особенности звуковосприятия, нарушения слуха при поражении кортиева органа 15.29 KB
  Кортиев орган - рецепторная часть слухового анализатора, расположенная внутри перепончатого лабиринта. Воспринимает колебания волокон, расположенных в канале внутреннего уха, и передаёт в слуховую зону коры больших полушарий, где и формируются звуковые сигналы.
42657. Розробка програм зі складеними типами даних 14.81 KB
  Аномалии развития. Чаще всего отмечаются отклонения в строении надгортанника. Он может быть недоразвитым и даже совсем отсутствовать. Иногда надгортанник оказывается резко деформированным: расщепленным на несколько долей, свернутым в трубку. Существенного влияния на функцию голосоречеобразования дефекты надгортанника обычно не оказывают.
42658. Место расположения и строения Кортиева органа, его назначение, нарушения слуха при его патологии 14.77 KB
  В большинстве врожденных дефектов внутреннего уха отмечается недоразвитие кортиева органа, причем неразвившимся оказывается именно специфический концевой аппарат слухового нерва — волосковые клетки
42659. Роль органов дыхания в механизмах фонации. Строение и функция дыхательных мышц и их иннервация. Теории голосообразования 14.7 KB
  При обычном дыхании голосовая щель широко раскрыта и имеет форму равнобедренного треугольника. Вдыхаемый и выдыхаемый воздух при этом беззвучно проходит через широкую голосовую щель.
42660. Преддверно-улитковый нерв, его периферический и центральный отделы. Нарушения слуха проводникового и центрального характера 15.31 KB
  Преддверно-улитковый нерв - (VIII пара черепно-мозговых нервов) нерв специальной чувствительности, отвечающий за передачу слуховых импульсов и импульсов, исходящих из вестибулярного отдела внутреннего уха.