Разработка дизайна макета сайта
Макет разрабатываемого сайта будет состоять из 3 блоков (Рисунке. 3.2): шапки сайта (header), левого меню навигации (navigation), формы обратной связи справа (form) и нижнего блока (footer).
Рисунок. 3.2 Макет сайта
На рисунке 3.3 показано информация о обуви.
Рисунок. 3.3 Вкладка «Обувь»
Листинг 1. Вкладка «обувь»
<html>
<head>
<title>Интернет-магазин одежды</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<table class="site">
<tr>
<td class="shapka" colspan="2">
<h1 class="sitename">Интернет-магазин одежды</h1>
<h2 class="slogan">Будь всегда на стиле</h2>
</td>
</tr>
<tr>
<td class="zagolovok1" ></td>
<td class="zagolovok" >
<h2 class="zag"> </h2>
</td>
</tr>
<tr>
<td class="menu">
<ul class="cssmenu">
<li><a href=index.htm>Категория</a></li><li><a href=list1.htm>Верхняя одежда</a></li><li><a href=list2.htm>Обувь</a></li><li><a href=list3.htm>Толстовки</a></li><li><a href=list4.htm>Пиджаки</a></li><li><a href=list5.htm>Свитера</a></li><li><a href=list6.htm>Футболки</a></li>
</ul>
</td>
<td class="contents">
<font size=5 color=#CCA23F face=Comic Sans MS,cursive style=text-decoration:underline;> Тимберленды</font><img src=images/2.jpg?1969741932 width=500 align=left style=margin:10px>
</div>
</div>
</td>
</tr>
<tr>
<td class="schet" colspan="2">
Сделано Акжунусов Диас на <a href="http://sitesgenerator.ru" class="system"></a>
</td>
</tr>
</table>
На рисунке 3.4 показано информация о «верхний одежде»
На рисунке 3.4 Вкладка «Верхняя одежда»
Листинг 2 «Верхняя одежда»
<html>
<head>
<title>Интернет-магазин одежды</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<table class="site">
<tr>
<td class="shapka" colspan="2">
<h1 class="sitename">Интернет-магазин одежды</h1>
<h2 class="slogan">Будь всегда на стиле</h2>
</td>
</tr>
<tr>
<td class="zagolovok1" ></td>
<td class="zagolovok" >
<h2 class="zag"> </h2>
</td>
</tr>
<tr>
<td class="menu">
<ul class="cssmenu">
<li><a href=index.htm>Категория</a></li><li><a href=list1.htm>Верхняя одежда</a></li><li><a href=list2.htm>Обувь</a></li><li><a href=list3.htm>Толстовки</a></li><li><a href=list4.htm>Пиджаки</a></li><li><a href=list5.htm>Свитера</a></li><li><a href=list6.htm>Футболки</a></li>
</ul>
</td>
<td class="contents">
<font size=5 color=#3140CC face=Comic Sans MS,cursive style=text-decoration:underline;>Аляски,пальто,ветровки скидка 20 не дорого!</font><img src=images/1.jpg?921118563 width=500 align=left style=margin:10px>
</div>
</div>
</td>
</tr>
<tr>
<td class="schet" colspan="2">
Сделано Акжунусов Диас на <a href="http://sitesgenerator.ru" class="system"></a>
</td>
</tr>
</table>
На рисунке 3.5 показано информация о толстовках
На рисунке 3.5 Вкладка «Толстовки»
Листинг 3 Толстовки
<html>
<head>
<title>Интернет-магазин одежды</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<table class="site">
<tr>
<td class="shapka" colspan="2">
<h1 class="sitename">Интернет-магазин одежды</h1>
<h2 class="slogan">Будь всегда на стиле</h2>
</td>
</tr>
<tr>
<td class="zagolovok1" ></td>
<td class="zagolovok" >
<h2 class="zag"> </h2>
</td>
</tr>
<tr>
<td class="menu">
<ul class="cssmenu">
<li><a href=index.htm>Категория</a></li><li><a href=list1.htm>Верхняя одежда</a></li><li><a href=list2.htm>Обувь</a></li><li><a href=list3.htm>Толстовки</a></li><li><a href=list4.htm>Пиджаки</a></li><li><a href=list5.htm>Свитера</a></li><li><a href=list6.htm>Футболки</a></li>
</ul>
</td>
<td class="contents">
<font size=5 color=#CC0E00 face=Comic Sans MS,cursive style=text-decoration:underline;> Модели толстовок кроссфит</font><img src=images/4.jpg?672095365 width=261 align=right style=margin:10px><img src=images/5.jpg?690401733 width=253 align=left style=margin:10px>
</div>
</div>
</td>
</tr>
<tr>
<td class="schet" colspan="2">
Сделано Акжунусов Диас на <a href="http://sitesgenerator.ru" class="system"></a>
</td>
</tr>
</table>
На рисунке 3.6 показано информация о пиджаках
На рисунке 3.6 Вкладки «пиджаки»
Листинг 4 Пиджаки
<html>
<head>
<title>Интернет-магазин одежды</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<table class="site">
<tr>
<td class="shapka" colspan="2">
<h1 class="sitename">Интернет-магазин одежды</h1>
<h2 class="slogan">Будь всегда на стиле</h2>
</td>
</tr>
<tr>
<td class="zagolovok1" ></td>
<td class="zagolovok" >
<h2 class="zag"> </h2>
</td>
</tr>
<tr>
<td class="menu">
<ul class="cssmenu">
<li><a href=index.htm>Категория</a></li><li><a href=list1.htm>Верхняя одежда</a></li><li><a href=list2.htm>Обувь</a></li><li><a href=list3.htm>Толстовки</a></li><li><a href=list4.htm>Пиджаки</a></li><li><a href=list5.htm>Свитера</a></li><li><a href=list6.htm>Футболки</a></li>
</ul>
</td>
<td class="contents">
<img src=images/6.jpg?2075266690 width=500 align=left style=margin:10px><font size=5 color=#00CCA3 face=Verdana,Geneva,sans-serif style=text-decoration:underline;>Стильные пиджачки</font>
</div>
</div>
</td>
</tr>
<tr>
<td class="schet" colspan="2">
Сделано Акжунусов Диас на <a href="http://sitesgenerator.ru" class="system"></a>
</td>
</tr>
</table>
На рисунке 3.7 показано информация о футболках adidas
На рисунке 3.7 Вкладка «Футболки adidas»
Листинг 5 Футболки
<html><head>
<title>Интернет-магазин одежды</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<table class="site">
<tr>
<td class="shapka" colspan="2">
<h1 class="sitename">Интернет-магазин одежды</h1>
<h2 class="slogan">Будь всегда на стиле</h2>
</td>
</tr>
<tr>
<td class="zagolovok1" ></td>
<td class="zagolovok" >
<h2 class="zag"> </h2>
</td>
</tr>
<tr>
<td class="menu">
<ul class="cssmenu">
<li><a href=index.htm>Категория</a></li><li><a href=list1.htm>Верхняя одежда</a></li><li><a href=list2.htm>Обувь</a></li><li><a href=list3.htm>Толстовки</a></li><li><a href=list4.htm>Пиджаки</a></li><li><a href=list5.htm>Свитера</a></li><li><a href=list6.htm>Футболки</a></li>
</ul>
</td>
<td class="contents">
<font size=5 color=#4BA1CC face=Verdana,Geneva,sans-serif style=text-decoration:underline;>Модные Adidas</font><img src=images/9.jpg?508143178 width=286 align=right style=margin:10px><img src=images/10.jpg?318634163 width=362 align=left style=margin:10px>
</div>
</div>
</td>
</tr>
<tr>
<td class="schet" colspan="2">
Сделано Акжунусов Диас на <a href="http://sitesgenerator.ru" class="system"></a>
</td>
</tr>
</table>
Тестирование сайта
Для того, чтоб протестировать наш сайт, набираем в адресной строке браузера адрес http://localhost/interteach/.
В окне браузера должна появиться следующая картинка (Рисунок 3.8):
Заключение
В ходе данной курсовой работы были полученные следующие результаты:
1) Разработан макет/шаблон сайта, отвечающий фирменному стилю компании;
2) Спроектирована база данных MySQL и на основе содержащейся в ней информации построены динамические генерируемые страницы сайта;
3) Разработаны и подключены программные компоненты сайта;
4) Выполнен процесс интеграции текстового содержания, графики и программных компонентов в единое целое, т. е. придание страницам окончательного вида.)
5) Составлена полная пошаговая инструкция создания web-сайта.
В итоге был разработан web-сайт для информационно-консалтингового агенства Interteach. Все вопросы, подлежащие разработке были решены в полном объеме и можно утверждать, что поставленная задача реализована в полной мере.
Рекомендации, вытекающие из проделанной работы можно сформулировать следующим образом: более подробно изучить возможности языков PHP и SQL, чтоб сделать программный код более эффективным и компактным.
В результате выполнения курсовой работы были сделаны следующие основные выводы: очень важным является предпроектное исследование разрабатываемого web-сайта, которое включает в себя сбор сведений о компании, выявление первостепенных целей разрабатываемого сайта, а также составление технического задания. Отсутствие технического задания (особенно, когда заказчик сам не знает чего хочет) приводит к большим трудностям при разработке web-сайта;
Основные направления для дальнейшего развития в этой области:
1. Изучение аспектов безопасности созданного сайта, защита сайта от технических сбоев и хакерских атак;
2. Разработка CMS для управления web-сайтом;
3. Изучение новых web-технологий (Ajax, JQuery и т. п), web-фреймворков (CakePHP, CodeIgniter, Drupal), различных библиотек с целью сделать разработку более современной и универсальной.
Данный курсовой проект может послужить хорошей основой дипломному проекту на аналогичную тему.
Список использованной литературы
1) Кузнецов Максим, Симдянов Игорь, Голышев Сергей PHP 5. Практика создания Web-сайтов. — Спб.: «БХВ-Петербург», 2005. — С. 960. — ISBN 5-94157-552-1;
2) Кузнецов Максим, Симдянов Игорь, Голышев Сергей PHP 5 на примерах. — Спб.: «БХВ-Петербург», 2005. — С. 576. — ISBN 5-94157-670-6;
3) Дмитрий Котеров, Алексей Костарев PHP. В подлиннике. — Спб.: «БХВ-Петербург», 2005. — С. 1120. — ISBN 5-94157-245-Х;
4) Электронный учебник PHP http://www.softtime.ru/bookphp/;
5) Электронный учебник по PHP 4.0 http://web.ixit.ru/php/tutorial/.