2.4 Тестирование и отладка сайта
Разработанный сайт для управляющей компании «Забота плюс» был протестирован в трёх браузерах:
MozillaFirefox (рисунок 16);
Рисунок 16 - Сайт в браузере Mozilla Firefox
Google Chrome (рисунок 17);
Рисунок 17 - Сайт в браузере Google Chrome
Internet Explorer (рисунок 18).
Рисунок18 – Сайт в браузере Internet Explorer
Из тестирования программного продукта в самых распространённых браузерах, следует:
программный продукт запускается и работает во всех перечисленных браузерах;
при запуске сайта ни один из браузеров не выводит ошибок на экран;
во всех представленных браузерах программный продукт работает корректно.
Заключение
В курсовом проекте был разработан web-сайт для управляющей компании «Забота плюс».
Была представлена история развития жилищно-коммунального хозяйства, создания управляющих компаний. Была четко выражена актуальность разработки данного программного продукта. От заказчика была получена входная информация, которая была размещена на страницах web-сайта.
На этапе проектирования программного продукта была разработана структурная схема и общий алгоритм работы приложения.
Перед тем как разработать программный продукт, были рассмотрены аналогичные web-приложения, на основе анализа которых выбран опорный web-сайт.
Для создания сайта был выбран язык гипертекстовой разметки HTML, использовалось стилевое оформление средствами CSS. Рисовка дизайна проводилась с использованием графического редактора PhotoScape.
Программный продукт прошел тестирование в браузерах Google Chrome, Mozilla Firefox и Internet Explorer, в которых он отображался корректно.
Готовый сайт был продемонстрирован заказчику. Программный продукт полностью удовлетворил всем его требованиям. Вследствие этого сайт для управляющей компании «Забота плюс» планируется разместить в сети Интернет.
Список использованных источников
Интерфейс: новые направления в проектировании компьютерных системавторДжеф Раскин2005г. - 605с.
CSS - каскадные таблицы стилей. Подробное руководство, 3-е изданиеавторЭрик Мейер2008г. -575с.
HTML и CSS для создания Web-страницавторЭ. Кастро2006г – 126с.
HTML 5. Недостающее руководство автор Мэтью Мак- Дональд2012г. -480с.
http://citforum.ru/internet/iinet96/31.shtml
http://dreamweaver3.narod.ru/
http://youhouse.ru/upravkomp/
http://zhilkomkhoz.ru
http://ru.wikipedia.org/wiki/JQuery
http://www.temaufa.ru/company_category/articles/zhkh/gorodskoe-zhilishhno-kommunalnoe-khozyajjstvo-184/
http://www.temaufa.ru/company_category/articles/zhkh/gorodskoe-zhilishhno-kommunalnoe-khozyajjstvo-185/
http://www.svoysite.info/sozdanie/aktualnost-sozdaniya-sajtov-vo-vsemirnoj-pautine.html
Приложение а Программный код
Index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Zabota</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" media="all" href="css/style.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/style2.css" />
</head>
<body style="color: rgb(0, 0, 0);" alink="#ee0000" link="#0000ee" vlink="#551a8b">
<div id="container">
<div id="header"><big style="color: rgb(102, 102, 102); font-style: italic;"><big><big><big><big> <span style="color: rgb(51, 51, 51);"><br />
<br />
<big><br />
ОООУК "Забота плюс"</big><br />
</span></big></big></big></big></big>
<div style="text-align: center;"><big style="color: rgb(102, 102, 102); font-style: italic;"><span style="color: rgb(255, 102, 102);">
<br />
<br />
<br />
<br />
<span style="color: rgb(51, 51, 51);"> Мызаботимся о
Вас... </span></span><big><big><big><big><span style="color: rgb(51, 51, 51);"></span></big></big></big></big></big><big style="color: rgb(102, 102, 102); font-style: italic;"><big><big><big><big><span style="color: rgb(51, 51, 51);"></span></big></big></big></big></big></div>
</div>
<div id="menu">
<ul>
<li style="color: rgb(0, 153, 0); background-color: rgb(223, 223, 223);"><a href="#" class="current">Главная</a></li>
<li style="font-style: italic;"><a href="okompani.html">О
компании</a></li>
<li style="font-style: italic;"><a href="#">Обратная
связь</a></li>
<li style="font-style: italic;"><a href="deitrlnost.html">Деятельность</a></li>
</ul>
</div>
<div class="sidebar">
<h2 style="color: rgb(0, 51, 0);">Новости</h2>
<p><span style="color: rgb(0, 153, 0);">Как
изменятся тарифы Жилищно-Коммунального Хозяйства в 2012
году? </span><br />
<a style="color: rgb(0, 51, 0);" href="novost1.html" class="read_more">Читатьдальше...</a>
</p>
<p><span style="color: rgb(0, 153, 0);"> В своей
программной статье "Строительство справедливости.
Социальная политика для России" кандидат в президенты премьер-министр
РФ В. В. Путин обозначил меры по установлению порядка в сфере ЖКХ. </span><br />
<a style="color: rgb(0, 51, 0);" href="novost2.html" class="read_more">Читатьдальше...</a>
</p>
<p><span style="color: rgb(0, 153, 0);">Кодексоб
административных
правонарушениях РФ дополнен новыми нормами ответственности в сфере ЖКХ
и энергетики, в связи со вступлением в силу Федерального закона N
403-ФЗ от 06.12.2011.</span><br />
<a style="color: rgb(0, 51, 0);" href="novost3.html" class="read_more">Читатьдальше...</a>
</p>
<p><span style="color: rgb(0, 153, 0);">Длякалужан
настало время ставить общедомовые счетчики </span><br />
<a style="color: rgb(0, 51, 0);" href="novost4.html" class="read_more">Читатьдальше...</a>
</p>
<p><span style="color: rgb(0, 153, 0);">Директор
управляющей компании из Калуги стал фигурантом сразу нескольких
уголовныхдел</span><br />
<a style="color: rgb(0, 51, 0);" href="novost5.html" class="read_more">Читатьдальше...</a>
</p>
<p><spanstyle="color: rgb(0, 153, 0);">Доверяй, нопроверяй. Как самостоятельно подсчитать размер собственной квартплаты? </span><br />
<a style="color: rgb(0, 51, 0);" href="novost6.html" class="read_more">Читатьдальше...</a>
</p>
</div>
<!-- end sidebar -->
<div class="content">
<h2><br />
</h2>
<p class="align-right"><br />
</p>
<ul>
<li style="font-family: Times New Roman;"><big><big><big>Услуги,оказываемые
управляющей организацией по обеспечению поставки в многоквартирный дом
коммунальных ресурсов</big></big></big></li>
</ul>
<ol>
<li style="font-family: Times New Roman;"><big><big><big><small>МУП "Калугатеплосеть" - отопление, горячееводоснабжение,</small></big></big></big></li>
<br />
<li style="font-family: Times New Roman;"><big><big><big><small>ОАО "КТЗ" - отопление, горячееводоснабжение,</small></big></big></big></li>
<br />
<li style="font-family: Times New Roman;"><big><big><big><small>ГП "Калугаоблводоканал" - водоснабжение и водоотведение,</small></big></big></big></li>
<br />
<li style="font-family: Times New Roman;"><big><big><big><small>ООО "Калужскаясбытоваякомпания" - электроснабжениеместобщегопользования,</small></big></big></big></li>
<br />
<li style="font-family: Times New Roman;"><big><big><big><small>ООО ОДУО - аварийноеобслуживание,</small></big></big></big></li>
<br />
<li style="font-family: Times New Roman;"><big><big><big><small>ОАО "Калугамежрайгаз" - обслуживаниефасадных и внутридомовыхгазопроводов,</small></big></big></big></li>
<br />
<li style="font-family: Times New Roman;"><big><big><big><small>ООО "Спецремстрой" - обслуживаниегазоходов и вентканалов,</small></big></big></big></li>
<br />
<li style="font-family: Times New Roman;"><big><big><big><small>МУП "Калугалифтремстрой" - обслуживаниелифтов,</small></big></big></big></li>
<br />
<li style="font-family: Times New Roman;"><big><big><big><small>МУП "Калужскоеспециализированноеавтотранспортноепредприятие" - вывоз ТБО, КГО,</small></big></big></big></li>
<br />
<li style="font-family: Times New Roman;"><big><big><big><small>ООО ЕИРЦ №1- начисление, сбор, расщеплениеплатежейнаселения с последующейоплатойпоставщикамресурсов и услуг.<br />
</small></big></big></big></li>
</ol>
<ul>
<br />
<br />
<li><big style="font-family: Times New Roman;"><big><big>Сведения
о количестве случаев снижения платы за нарушения качества содержания и
ремонта общего имущества в многоквартирном доме за последний
календарныйгод</big></big></big></li>
<br />
</ul>
<p></p>
<h3><br />
</h3>
<p class="align-left"><br />
</p>
<p></p>
<p><a href="http://validator.w3.org/check?uri=referer"><br />
</a>
</p>
<p><a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.webmatter.de/preview/bigcity/index.html&profile=css21&usermedium=all&warning=1&lang=en">
<br />
</a></p>
</div>
<!-- end content -->
<div id="footer">
<p class="copy">© 2012 Заботаплюс</p>
<!-- Please keep the following link intact -->
<p class="link"><br />
</p>
</div>
</div>
</body>
</html>
Style.css
/*
Template: Big City
Author: Esther Nowack
Website: http://www.webmatter.de
Licence: Creative Common
http://creativecommons.org/licenses/by-sa/3.0/legalcode
*/
* {
margin: 0;
padding: 0;
}
html, body {
text-align: center;
background: #fffurl(../images/body_bg.jpg) top center repeat-y;
font:90%/1.5 Verdana,Helvetica,Arial,sans-serif;
}
#container {
margin: 0 auto;
width:960px;
text-align: left;
}
.sidebar, .content {
display:inline;
float:left;
margin-left:10px;
margin-right:10px;
}
#container .sidebar {
clear:left;
width:220px;
}
#container .content {
width:700px;
}
#header {
background: url(../images/header_bg.jpg) top left no-repeat;
height: 180px;
}
#footer {
clear: both;
background: #8e8e8e;
color: #ccc;
border-top: 2px solid #494949;
}
/* Horizontales Menu */
.blockmenu{
margin: 0;
padding: 0;
float: left;
font: bold 13px Arial;
width: 100%;
border: 1px solid #625e00;
border-width: 1px 0;
background: black url(../images/blockdefault.gif) center center repeat-x;
}
.blockmenuli{
display: inline;
}
.blockmenu li a{
float: left;
color: white;
padding: 9px 20px;
text-decoration: none;
border-right: 1px solid white;
}
.blockmenu li a:visited{
color: white;
}
.blockmenu li a:hover, .blockmenu li .active {
color: #fff;
background: transparent url(../images/blockactive.gif) center center repeat-x;
}
/* Endehorizontales Menu */
/* Formular */
form {
margin-left: 20px;
}
fieldset {
width: 550px;
}
legend {
margin: 10px;
padding: 5px;
color: #990000;
}
input, textarea {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:1em;
width:500px;
color: #494949;
background: #f4f4f4;
border: 1px inset #999;
padding-left: 1px;
}
input:hover, textarea:hover {
background: #ccc;
}
.submit {
background: #ccc;
color: #131313;
width: 150px;
border: 1px solid #999;
}
.submit:hover {
background: #999;
color: #f2f2f2;
}
/* EndeFormular */
/* VerschiedeneKlassen */
.align-right {
float:right;
margin: 10px;
}
.align-left {
float: left;
margin: 10px;
}
/* EndeverschiedeneKlassen */
/* Text Formatierungen */
a:focus{
outline:1px dotted invert;
}
a, a:visited {
color: #990000;
}
a:hover {
color: #666;
}
a.read_more {
font-size: .9em;
}
aimg {
border: 0 none;
}
/* Ьberschriften */
h1,h2,h3,h4,h5 {
font-family: Georgia, "Trebuchet MS", "Times New Roman", serif;
margin: 25px 0 0 0;
padding: 0 10px;
color: #666;
background:transparent;
}
h1{
font-size:1.4em;
}
#header h1 {
font-size: 2.7em;
color: #131313;
padding: 1em 0 0 40px;
margin: 0;
}
#header h1 a, #header h1 a:visited {
text-decoration: none;
color: #535353;
}
#header h1 a:hover {
color: #990000;
}
h2{
font-size:1.3em;
}
#header h2 {
padding: 0 0 0 40px;
color: #fff;
font-size: 2em;
margin: .5em 0;
}
.sidebar h2 {
background: #fbfbfburl(../images/heading.jpg) top left no-repeat;
border: 0px solid #d9d9d9;
color: #666;
font-size: 1.1em;
margin-top: 30px;
padding: 5px 5px5px 30px;
}
h3{
font-size:1.1em;
margin: 1em 0 0 0;
padding: 0 10px;
color: #666;
}
h4{font-size:1em}
h5{font-size:1em}
h6{font-size:1em}
/* EndeЬberschriften */
ol{
list-style:decimal;
}
ul{
list-style:square;
}
li{
margin-left:30px;
}
p,dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address,fieldset,blockquote {
margin-bottom:20px;
}
p {
overflow:hidden;
}
#container p {
margin-left: 10px;
font-size: 1em;
}
#footer p {
line-height: 1.5em;
margin: 0;
}
#footer p.copy {
color: #f2f2f2;
text-align: center;
padding: .5em 20px 0 20px;
}
p.link {
padding: 0 20px;
color: #bdbdbd;
text-align: right;
margin: 0;
}
p.link a, p.link a:visited {
text-decoration: none;
color: #494949;
}
p.link a:hover {
color: #f2f2f2;
}
address {
font-style: normal;
margin-left: 10px;
}
blockquote {
color: #666;
border-top: 2px solid #ccc;
border-bottom: 2px solid #ccc;
background: #fbfbfb;
margin-left: 15%;
margin-right: 5%;
padding:10px;
}
hr {
border-color:#ccc;
border-style:solid;
border-width:1px 0 0;
clear:both;
height:0
}
/* EndeTextformatierungen */
/*Выпадающиеменю */
*{
margin:0;
padding:0;
}
body{
\background:#fff;
\color:#666;
\font:12px/18px Tahoma, Arial, Helvetica, sans-serif;
}
\#menu{
\margin:0 auto;
\width:700px;
\}
\#menu ul{
\list-style:none;
\}
\#menu li{
\list-style:none;
\display:block;
\float:left;
\background:#f4f4ec;\
\border-bottom:4px solid #8eb132;\
\}
\#menu li a{
\display:block;
\float:left;
\color:#44494f;
\text-transform:uppercase;
\font-size:11px;
\font-weight:bold;
\line-height:35px;
\border:solid #e1e1d3;
\border-width:1px 1px 0 1px;
\text-decoration:none;
\padding:0 25px;\
\}
\#menu li a:hover{
\color:#75902d;
\}
\#menu li a.current{
\display:block;
\float:left;
\background:url(images/menu_002_h.jpg) repeat-x;\
\color:#fff;
\text-transform:uppercase;
\font-size:11px;
\font-weight:bold;
\line-height:35px;
\border:solid #e1e1d3;
\border-width:1px 1px 0 0;
\text-decoration:none;
\padding:0 25px;
\}
\#menu li a:hover.current{
\color:#fff;
\}
Style2.css
/* --------------------------
AUTHOR : STYLED MENUS
URL : http://www.styledmenus.com
Copyrights by STYLED MENUS
----------------------------*/
*{
margin:0;
padding:0;
}
body{
background:#fff;
color:#666;
font:12px/18px Tahoma, Arial, Helvetica, sans-serif;
}
#menu{
margin:0 auto;
width:700px;
}
#menu ul{
list-style:none;
}
#menu li{
list-style:none;
display:block;
float:left;
background:#f4f4ec;
border-bottom:4px solid #8eb132;
}
#menu li a{
display:block;
float:left;
color:#44494f;
text-transform:uppercase;
font-size:11px;
font-weight:bold;
line-height:35px;
border:solid #e1e1d3;
border-width:1px 1px 0 1px;
text-decoration:none;
padding:0 25px;
}
#menu li a:hover{
color:#75902d;
}
#menu li a.current{
display:block;
float:left;
background:url(images/menu_002_h.jpg) repeat-x;
color:#fff;
text-transform:uppercase;
font-size:11px;
font-weight:bold;
line-height:35px;
border:solid #e1e1d3;
border-width:1px 1px 0 0;
text-decoration:none;
padding:0 25px;
}
#menu li a:hover.current{
color:#fff;
}