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>

';


 

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

21935. Защита информации в телекоммуникационных системах 811.5 KB
  Уязвимость ТКС - это некоторое неудачное свойство системы, которое делает возможным возникновение и реализацию угрозы. Атака на компьютерную систему - это действие, предпринимаемое злоумышленником, которое заключается в поиске и использовании той или иной уязвимости системы. Таким образом, атака-это реализация угрозы безопасности.
21937. РОЗВЯЗАННЯ ІНЖЕНЕРНИХ ЗАДАЧ ПО ТОПОГРАФІЧНИМ КАРТАМ ТА ПЛАНАМ 1.23 MB
  Довжина горизонтального прокладання лінії на місцевості визначиться за формулою Д = dпл М.1 Довжину нахиленої лінії місцевості L визначають за формулою 3. Якщо виміряно горизонтальне прокладання Д лінії на місцевості то її довжину на топографічному плані визначають за формулою .3 Довжину ламаної лінії рис.
21938. Розв’язання інженерних задач по топографічним картам та планам 324.5 KB
  Це і читання карти визначення координат висот дирекцій них кутів та ін. Визначення меж водозбірної площі Водозбірною площею називають поверхню землі з якої за умовами рельєфу збирається поверхнева вода в даний водостік річку логовину яр і т. Визначення меж водозбірної площі 22. Визначення площ Вимірювання площ ділянок місцевості виконується по топографічним картам та планам – графічним аналітичним та механічним способами.
21939. Оцінювання точності геодезичних вимірювань 207.5 KB
  Сукупність що впливають на результати вимірів називають комплексом умов: 1 об’єкт; 2 суб’єкт; 3 прилад; 4 метод; 5 зовнішнє середовище. При порушенні комплексу умов результати вимірів називають нерівноточними. Результати вимірів розглядають з точки зору кількісних та якісних характеристик. Математична обробка результатів вимірів дає можливість отримати як кількісні так і якісні характеристики.
21940. Вимірювання кутів 2.34 MB
  2: вертикальна вісь обертання теодоліта ZZ; вісь візування зорової труби VV; вісь обертання зорової труби НН; вісь циліндричного рівня LL; площина горизонтального кутовимірного круга ГК; площину вертикального кутовимірного круга ВК. П – з прямим зображенням зорової труби; М – маркшейдерське виконання; А – з автоколімаційним окуляром. 1 – зорова труба; 230 – вертикальний круг; 329 – колонки труби; 426 – горизонтальний круг; 522 – підставка теодоліта; 623 – підйомний гвинт; 724 – платформа; 8 – становий гвинт; 9 –...
21941. Загальні відомості. Системи координат в геодезії 130.5 KB
  Геодезія вивчає фігуру і розміри Землі зображення її поверхні на планах і картах виконання вимірювань необхідних для розв’язання різноманітних задач народного господарства та оборони країни. Розв’язання надзвичайно складних завдань привело до поділу геодезії на: Вищу геодезію – яка вивчає фігуру і розміри Землі її гравітаційне поле визначення координат точок земної поверхні. Супутникову геодезію – яка розглядає методи розв’язання геодезичних задач за допомогою штучних супутників Землі. Фотограмметрію і дистанційне зондування Землі –...