1.2 Постановка задачи
Требуется разработать web-сайт «Строительной компании». Установленный язык разметки сайта – XHTML (1.1). Браузеры для просмотра сайта – Interbet Explorer, Mozilla Firefox, Opera, где web-страницы должны выглядеть одинаково, не искажённо.
Общее количество разделов сайта – не менее шести. Уровень вложенности должен быть не менее трёх, минимум для четырёх разделов. Общее количество страниц – не менее четырнадцати; наличие страницы «Карта сайта». Внешний вид всех однотипных элементов задаётся через каскадные таблицы стилей (css). Все страницы сайта должны быть наполнены осмысленной информацией. Курсовая работа должна содержать задание и пояснительную записку, оформленную по ГОСТ 19.404-79 и cодержащую описание предметной области, XHTML-файлы с комментариями, а так же css-файлы с комментариями. Практическая часть курсовой работы должна храниться на CD-диске.
2. Разработка Web-cайта «Строительной компании Рост»
2.1. Пошаговый разбор, комментарии
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE>.
<html xmlns="http://www.w3.org/1999/xhtml">
<hmtl> - заключает весь сайт. Вначале пишется и в конце закрывается </html>
<head>
Используется для содержания дополнительных элементов. Например заголовок страницы, ссылка на css файлы, на java script файлы, мета тэги.
<title>Строительная компания "Рост"</title>
Заголовок страницы. В браузере отображается следующим образом (см. рис.1.1) :
Рис. 2.1 Заголовок браузера Firefox
<meta content="" name="keywords" /> - ключевые слова (стройка, кирпич, камень, отделка и т.д.)
<meta content="" name="description" /> - описание (Наша фирма строит великолепные дома из кирпича)
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> - сообщает какую кодировку использовать и тип документа - документ текстовый содержащий html правила.
<meta http-equiv="Content-Style-Type" content="text/css" /> - задается язык таблиц стилей - документ текстовый содержащий css правила.
<meta http-equiv="pragma" content="no-cache" /> - не разрешает браузеру кэшировать содержимое страницы. Для разработки хорошо, потому что изображения в КЭШе браузера не сохраняются.
<meta> определяет метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Разрешается использовать более чем один метатег, все они размещаются в контейнере <head>. Как правило, атрибуты любого метатега сводятся к парам «имя=значение», которые определяются ключевыми словами content, name или http-equiv.
<link rel="stylesheet" type="text/css" href="style/style.css" />
Указывает на то, где находится CSS файл.
<body>
В этом тэге начинается написание страницы, это тело всего документа.
<div id="wrapper">
<div id="header">
<div class="helper">
</div>
</div>
<div id="content" >
<div class="helper">
</div>
</div>
<div id="footer" >
<div class="helper">
</div>
</div>
</div>
Многие страницы сайта сделаны аналогично главной. Код одной из них описан ниже:
Рис. 2.2 Заголовок в верхней части главной страницы
Код, комментарии:
<div class="right about-company"> - блок с текстом
О компании «Рост» - текст: О компании «Рост», где « - левая кавычка, » - правая кавычка
</div> - конец блока
/********************************************/
.about-company,.uslugi-zag,.uslugi-zag2 { - стиль используется еще для двух элементов
color: #8c9fb1; - цвет текста
font-size: 20px; - размер текста
margin-right: 202px; - внешний отступ справа
margin-top: 38px; - внешний отступ сверху
position: relative; - позиционирование
z-index:5; - слой; чем выше слой, тем он виднее.
}
<div class="company-txt"> - блок, в котором располагается текст страницы
<p>Наша организация - динамично развивающаяся компания… <p><br/> - текст заключен в тэг параграфа, <br/> - переход на новую строку.
<p>Мы осуществляем весь комплекс работ при проведении строительства Вашего …</p><br/>
<p>Качество предоставляемых услуг - наша основная задача. Заказывая у нас… <p><br/>
Рис. 2.3 Вид web-страницы строительной компании (главная → О компании)
<p>При производстве работ мы используем только сертифицированные и …<p><br/>
<p>Ремонтно-строительные и отделочные работы, выполненные специалистами нашей </p>
<br/><br/>
/*************************************************************/
.company-txt,.uslugi-txt,.decor-gips-txt{ - стиль еще используется у двух элементов
color:#8c9fb1;
width:790px;
padding:10px 8px 8px; - внутренний отступ у блока 10 пикселей сверху 8 пикселей слева и справа и 8 пикселей снизу
font-size:17px;
}
Рис. 2.4 Ссылка для перехода на следующую страницу сайта
<div class="dop-spisok"> - блок в котором располагается ссылка для перехода на следующую страницу
<a href="o_maloet_i_dacha.html"> Наша специализация - малоэтажное строительство! О дачах и коттеджах >></a>
- ссылка </div>
</div>
/**************************************************************/
.dop-spisok ul{ - стиль применяется к тэгу UL
position: absolute; - позиционирование абсолютное, то есть блок исключается из основного потока
right: 1px; - справа 1 пиксели отодвигается
top: 1px; - сверху на 1 пиксель отодвигается
color: #2e6c8a; - цвет
width:150px; - ширина 150 пикселей
text-align:left; - выравнивание текста по левому краю
}
.dop-spisok a{ - тэг применяется к ссылкам
color: #2e6c8a; - цвет
font-size: 13px; - размер шрифта
text-decoration: none; - подчеркивание ссылок отключено
}
.dop-spisok a:hover,.next a:hover{ - при наведении на ссылку
color: #8C9FB1; - цвет
}
Рис. 2.5 Ссылка для перехода на главную страницу сайта
<div class="back"><ul> - блок
<li><a href="index.html">Вернуться на главную</a></li> - ссылка
</ul></div>
</div>
</div>
/****************************************************/
.back ul ,.back a{ - стили для ссылки и блока
color:#2E6C8A; - цвет
text-decoration:none; - подчеркивание ссылки нет
font-size:17px; - размер шрифта
font-weight:bold; - шрифт жирный
}
.back{
position:absolute; - абсолютная позиция
bottom:60px; - снизу 60 пикселей
right:60px; - справа 60 пикселей
padding:20px; - внутренние отступы 20 пикселей
background: url(../pic/pl.png) repeat; - фоновая картинка
border-radius: 20px; - скругляет углы (так как технология новая, то не во всех браузерах скругляет. Использован CCS3. Современные браузеры выводят так, как требуется.)
z-index:5; - слой
}
Код страницы «Карта сайта» рассмотрим отдельно. Его описание расположено ниже.
<div style="padding-top:0px;" class="decor-kamen-txt"> - общий блок
<ul class="karta-line1"> - список общий и первого уровня
<li><a href="o_kompanii.html">О компании</a></li> - элемент списка первого уровня
<ul class="karta-line2"> - список второго уровня
<li><a href="o_maloet_i_dacha.html">Малоэтажное строительство - о дачах и коттеджах</a></li> - элемент списка второго уровня
<ul class="karta-line3"> - список третьего уровня
<li><a href="activnoe_stroitelstvo.html">Активно ли ведется продажа малоэтажных строений?</a></li> - элемент списка третьего уровня
<ul class="karta-line4"> - список четвертого уровня
Рис. 2.6 Отображение всех ссылок, расположенных на странице «Карта сайта»
<li><a href="vigodnoe_reshenie.html">Выгодные решения для дачников</a></li> - элемент списка четвертого уровня
</ul>
</ul>
</ul>
<li><a href="project.html">Проекты</a></li> - элемент 1 уровня
<li><a href="uslugi.html">Услуги</a></li> - элемент 1 уровня
<ul class="karta-line2">
<li><a href="design_interier.html">Дизайн интерьеров</a></li> - элемент 2 уровня
<ul class="karta-line3">
<li><a href="disign_kvartir_ofis.html">Дизайн интерьеров при ремонте квартиры и офиса</a></li> - элемент 3 уровня
<li><a href="disign_komnata_deti.html">Дизайн комнаты для двух детей</a></li> - элемент 3 уровня
<li><a href="disign_landshaft_dacha.html">Ландшафтный дизайн на даче</a></li> - элемент 3 уровня
<li><a href="disign_exclusiv_otdelka.html">Эксклюзивная отделка</a></li> - элемент 3 уровня
<li><a href="disign_speshit_na_pomosh.html">Дизайнер спешит на помощь!</a></li> - элемент 3 уровня
</ul>
<li><a href="remont.html">Ремонт и отделка</a></li> - элемент 2 уровня
<ul class="karta-line3">
<li><a href="decor_gips.html">Декор из гипса и искуственного камня</a></li> - элемент 3 уровня
<ul class="karta-line4">
<li><a href="decor_gips_v.html">Гипсовый декор</a></li> - элемент 4 уровня
<li><a href="decor_kamen.html">Лепнина из искуственного камня</a></li> - элемент 4 уровня
</ul>
</ul>
<li><a href="maloet_stroitelstvo.html">Малоэтажное строительство</a></li> - элемент 2 уровня
</ul>
<li><a href="stroi_material.html">Материалы</a></li> - элемент 1 уровня
<ul class="karta-line2">
<li><a href="material_peschanik.html">Наша компания предлагает следующую продукцию</a></li> - элемент 2 уровня
<ul class="karta-line3">
<li><a href="bruschatka_peschanik.html">Песчаник и брусчатка</a></li> - элемент 3 уровня
</ul>
</ul>
<li><a href="statya_o_stroit.html">Статьи о строительстве</a></li> - элемент 1 уровня
<ul class="karta-line2">
<li><a href="remont_kvartir.html">Какие услуги по ремонту квартиры сейчас наиболее востребованы?</a></li> - элемент 2 уровня
<li><a href="derev_da4a.html">Чем хорош деревянный дачный дом?</a></li> - элемент 2 уровня
<ul class="karta-line3">
<li><a href="derevo_kak_stroi_material.html">Дерево - как строительный материал</a></li> - элемент 3 уровня
</ul>
<li><a href="design_kvartir.html">Как заказывать дизайн проект квартиры, и каким он должен быть?</a></li> - элемент 2 уровня
</ul>
</ul></div>
/****************************************************************/
.karta-line1 a{
color: #2E6C8A;
font-size: 20px;
font-weight: bold;
text-decoration: none;
}
.karta-line2,.karta-line2 a{
font-size: 17px;
font-weight: normal; - текст не жирный
margin-left:10px; - внешний отступ слева 10 пикселей
}
.karta-line3,.karta-line3 a{
font-size: 15px;
font-weight: normal;
margin-left:10px;
}
.karta-line4,.karta-line4 a{
font-size: 12px;
font-weight: normal;
margin-left:10px;
}
.karta-line1 a:hover{
text-decoration:underline;
}
Вложенность страниц.
Положение страницы сайта в общей его структуре. Определяется по количеству кликов, которые необходимо сделать с главной страницы, чтобы попасть на страницу с искомым уровнем вложенности (к этому количеству прибавляется единица).
Главная страница сайта имеет уровень вложенности 1. Все страницы, на которые можно попасть непосредственно с главной страницы – уровень вложенности 2. С этих страниц открывается доступ к страницам с уровнем вложенности 3, и так далее. Когда говорят, что «страница находится в двух кликах от главной», имеют в виду страницу с уровнем вложенности 3.
Пример одной из вложенностей данного курсового проекта:
Главная → Услуги → Декор из гипса и искусственного камня → Лепнина из искусственного камня
Рис 2.7 Фрагмент главной страницы сайта
Рис. 2.8 Фрагмент страницы услуг компании
Рис. 2.9 Фрагмент страницы «Декор из гипса и искусственного камня»
Рис. 2.10 Фрагмент страницы «Лепнина из искусственного камня»
Красным обведены ссылки перехода на рис.2.7, рис. 2.8, рис. 2.9. На рис. 2.10 выделены заголовки.