Проектирование тематического web-сайта "Интернет-магазин каминов"

Размещено на http://www.allbest.ru/

Размещено на http://www.allbest.ru/

Министерство образования и науки России

Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования

"Московский государственный технический университет радиотехники, электроники и автоматики"

Факультет информационных технологий (ИТ)

Кафедра информатики и информационных систем (ИИС)

Курсовой проект

по дисциплине «Мировые информационные ресурсы»

Проектирование тематического web-сайта "Интернет-магазин каминов"

Студентка группы ИСБВ-4-11

Свиридова С.А.

Руководитель курсовой работы

доцент, канд. техн. наук

Ковалев С.Н.

Москва 2014



Реферат

Целью работы является изучение возможностей и особенностей языка гипертекстовой разметки HTML5 путем написания современного и кроссбраузерного веб-сайта, состоящего более, чем из 5 уникальных страниц.

В качестве тематики сайта я выбрала направление «Интернет-магазин каминов Contura» как наиболее интересную и коммерчески ликвидную тему. В процессе написания данного веб-сайта мной была использована библиотека JQuery, подключаемая для упрощения взаимодействия между HTML и JavaScript, что, в конечном счете, позволило расширить функционал веб-сайта и облегчить его дальнейшие редактирование и модернизацию.

На разрабатываемом мной ресурсе представлены, на основании данных об их популярности, отдельно взятые продукты из модельного ряда производителя Contura с указанием их основных технических характеристик.

По окончанию работы я получила ценный опыт по созданию сайтов без предустановки системы управления контентом, а также по работе с языком гипертекстовой разметки.

Адрес в МИРЭА:

pepperchili.1993@yandex.ru 119454, Москва, пр-т Вернадского, д. 78

Тираж: 1 экз. (на правах рукописи) © Свиридова С.А.



Введение

гипертекстовый разметка сайт посетитель

Создаваемый мной веб-ресурс будет посвящен подвиду отопительного оборудования, а именно - шведским печам-каминам компании Contura. При его написании я опиралась на опыт по созданию коммерческих сайтов с целью увеличения конверсии заходов посетителей на веб-сайт в совершение заказов, подразумевающее отправку заявку на обратный звонок. Поэтому на его страницах будут присутствовать модули, позволяющие увеличить лояльность клиента и возможность совершения заказа на популярный товар. Веб-сайт будет полностью выполнен по принципу блочной верстки.

Выбранные мной структура сайта и графическое оформление веб-сайта должны позволить клиенту максимально эффективно найти нужную информацию по данной тематике и посодействовать отправке им заявки.



1. Структура страниц сайта

Структура веб-сайта «Интернет-магазин каминов Contura» состоит из шести веб-страниц формата HTML и из трех папок: папки с подключаемыми JavaScript-файлами, папки с файлом CSS3 и папки с изображениями для веб-сайта.

2. Главная страница сайта

Структура главной страницы веб-сайта (index.html) (Рис. 1) состоит из канонических для любого современного веб-сайта элементов: шапки сайта с указанием контактной информации, логотипом компании, заголовком и меню сайта, «тела» веб-страницы, разделенного на два контейнера для наиболее удобного представления информации, и футера.

Все элементы сайт, кроме шапки, помещены в контейнер <div>, позиционированный по середине экрана и занимающий до 1060 px от его ширины. Шапка веб-сайта помещена в отдельный контейнер с предустановкой ширины на значение 100%, что позволяет придать объемность дизайну веб-сайта.

Шапка веб-сайта обычно является самым стратегически важным графическим элементом главной страницы и создается с расчетом на то, чтобы заинтересовать клиента с первых секунд с начала просмотра им веб-сайта. Объемная, оригинальная и тематически соответствующая шапка гарантирует наилучший (наименьший) показатель отказов и способствует запоминанию посещенного веб-сайта. Наличие в шапке товаров и соответствующего заголовка с использованием точного названия продукции и определением коммерческой основы (продажа, покупка или аренда) позволяет также увеличить релевантность данной страницы запросам посетителя.

Расположение логотипа в верхнем левом углу также неслучайно: его нахождение именно на этом месте, согласно последним маркетинговым исследованиям, позволяет увеличить узнаваемость бренда на 37% по отношению к другим вариантам расположения. Логотип является также относительной ссылкой на главную страницу.

Номер телефона находится в правом верхнем углу и гарантированно попадает в поле обзора клиента сразу при открытии первого экрана веб-сайта без необходимости прокрутки. Такое расположение позволяет сократить до минимума случаи ненахождения клиентом контактного телефона компании.

По центру главной страницы находится интерактивный каталог продукции, выполненный при помощи скрипта на языке JavaScript и позволяющий посетителям веб-сайта быстро получить основную информацию о товарах в оригинальной подаче. Используя кнопки прокрутки образованной скриптом «карусели», посетитель может детальнее рассмотреть внешний вид выбранного им вид товара, а также узнать его каталожное название и основные технические характеристики, которые выводятся в стилизованном окне сверху. В качестве изображений товара используются файлы .png с прозрачным фоном, что позволяет достичь ощущения объёмности всей сцены.

Ниже контейнера с шапкой сайта расположен основной центральный контейнер сайта с двумя внутренними слоями: в первом, занимающей 60% от центрального контейнера без учета полей и отступов размещена общая информация о продвигаемой продукции с описанием ее ключевых преимуществ над аналогами, а во втором, расположенном справа и занимающем 30% ширины центрального контейнера, находятся модули увеличения лояльности клиента. Листинг главной страницы представлен в Приложении 1.



Рис. 1. Главная страница

3. Страница «О компании»

Страница about.html (Рис. 2) находится в корне директории с веб-сайтом и была создана с помощью веб-редактора Abode Dreamweaver CS5. На ней размещена текстовая и графическая информация, размеченная согласно стандартам HTML. В тексте описывается история компании и основные преимущества продаваемой ею продукции. Разметка текста содержит теги <h1> и <h2>, в которые заключены заголовки первого и второго уровня, соответственно, теги параграфов <p>, теги изображений <img>, а также теги <b> для выделения жирным шрифтом важных численных значений. Листинг страницы «О компании» представлен в Приложении 2.



Рис. 2. Страница «О компании»

4. Страница «Акции»

Страница actions.html (Рис. 3) находится в корне директории с веб-сайтом и была создана с помощью веб-редактора Abode Dreamweaver CS5. Изображение, размещенной на ней, было разработано и скомпилировано в редакторе растровой графики Abode Photoshop CS5. Изображение имеет атрибут стилей, который задает его положение по центру страницы и отступы. Весь контент данной страницы размечен согласно правилам HTML. Страница содержит текстовую гиперссылку на другой раздел сайта - «Каталог».

Сам раздел является важной частью сайта, влияющей на лояльность посетителя и позволяющей владельцу сайта донести информацию о скидках и подарках до всех посетителей веб-сайта. Листинг страницы «Акции» представлен в Приложении 3.



Рис. 3. Страница «Акции»

5. Страница «Каталог»

Страница catalog.html (Рис. 4) находится в корне директории с веб-сайтом и была создана с помощью веб-редактора Abode Dreamweaver CS5.Данная веб-страница является ключевой для покупателя, так как на ней представлены полные технические характеристики предоставляемой продукции и цены на них. Каталог печей каминов выполнен в виде контейнера, внутри которого находятся блоки <div> с товарными позициями. Каждый блок имеет следующую структуру:

Слой с изображением с фиксированными размерами

Слой с названием товара, ценой и таблицей с техническими характеристиками

Кнопка «Заказать», вызывающая открытие модального окна с формой и набором полей

Для уменьшения веса всего сайта и увеличения скорости загрузки, изображения товаров, используемые на главной странице, присутствуют и в каталоге. При загрузке главной страницы эти изображения сохраняются в кэш браузера, и их повторное открытие занимает меньше времени.

Нажатие кнопки «Заказать» приводит к открытию модального окна по технологии фрейма. Изначально, модальное окно с формой присутствует в коде страницы, но скрыто при помощи возможностей каскадных таблиц стилей. При его появлении, образуется фрейм фиксированной величины с полупрозрачным белым фоном, в котором и отображается контент спрятанного слоя с модальным окном. Такое использование технологии фреймов позволяет получить возможность экономии пространства на странице и избежать дублирования форм для каждого товара.

Сама форма обратной связи выполнена по технологии HTML5 и имеет стандартные функции проверки наличия вводимых данных. Если пользователь не ввел, допустим, данные в поле «E-mail», то это поле будет гореть красным цветом, сигнализируя о необходимости заполнить его. Форма имеет возможность отправки сообщений, содержащих данные, введенные пользователем, на любой почтовый ящик, но для реализации это функции необходима установка почтового сервера и загрузка дополнительных файлов на хостинг. Листинг страницы «Каталог» представлен в Приложении 4.

Рис. 4. Страница «Каталог»



6. Страница «Монтаж»

Страница install.html (Рис. 5) находится в корне директории с веб-сайтом и была создана с помощью веб-редактора Abode Dreamweaver CS5. Изображение, размещенной на ней, было разработано и скомпилировано в редакторе растровой графики Abode Photoshop CS5. Изображение имеет атрибут стилей style, который задает его положение по центру страницы и отступы. Весь контент данной страницы размечен согласно правилам HTML. Страница содержит тег нумерованного списка <ol> и заголовки первого и второго уровней. Листинг страницы «Монтаж» представлен в Приложении 5.

Рис. 5. Страница «Монтаж»

7. Страница «Контакты»

Страница contacts.html (Рис. 6) находится в корне директории с веб-сайтом и была создана с помощью веб-редактора Abode Dreamweaver CS5.Страница содержит, помимо заголовка первого уровня, интерактивный модуль Яндекс.Карт со схемой проезда к офису компании (адрес компании указан в качестве примера). Модуль интегрирован в страницу с применением API сервиса Яндекс.Карты и представляет собой подключаемый при помощи языка JavaScript фрейм, стилизованный согласно дизайну данного веб-ресурса.

Также на странице присутствует таблица с заливкой чередующихся строк. Такая реализация является возможной благодаря новым свойствам каскадных таблиц стилей CSS3, а именно - псевдоклассов. Все нечетные строки в данной таблице выделены другим цветом для удобства чтения. Весь контент данной страницы размечен согласно правилам HTML. Листинг страницы «Контакты» представлен в Приложении 6.

Рис. 6. Страница «Контакты»



Заключение

Целью курсовой работы являлось получение навыков в работе с языком гипертекстовой разметки HTML, а также навыков в использовании специализированных редакторов для веб-разработки. В результате выполнения курсовой работы был написан, протестирован и загружен на работающий хостинг веб-сайт «Интернет-магазин каминов Contura», который может быть использован для привлечения новых потенциальных клиентов компании. Цель курсовой работы была достигнута полностью.



Список используемой литературы

1. Едомский Ю. Техника Web-дизайна для студента. - СПб: BHV, 2005. - 400 с.

2. Молер Д., Боуэн К. Dreamweaver MX 2004: Руководство Web-дизайнера. - М: Эксмо-Пресс, 2005. - 352 с.

3. Полонская Е.Л. Самоучитель. Язык HTML. - Изд.: Диалектика, 2003.

4. Гаевский А.Ю., Романовский В.А. 100% самоучитель. Создание Web-страниц и Web-сайтов. HTML и JavaScript - Изд.: Технолоджи-3000, 2008. - 464 с.

5. Сайт производителя каминов Contura. http://www.contura.eu/ru/Russia/ от 13.11.2014 г.



Приложение 1

Листинг главной страницы:

<!DOCTYPE html>

<html>

<head>

<meta charset="windows-1251" />

<title>Шведские печи-камины Contura</title>

<meta name="keywords" content="камины, камины contura, шведские печи-камины, contura" />

<meta name="description" content="Шведские камины Contura - эталон отопительного оборудования, соответствующий всем потребностям его владельца. Они безопасны, долговечны и эффективны.">

<link href="/css/style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="/js/jquery.js"></script>

<script type="text/javascript" src="/js/cloud-carousel.1.0.5.js"></script>

<script type="text/javascript" src="/js/jquery.colorbox.js"></script>

<script type="text/javascript" src="/js/scripts.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("#carousel1").CloudCarousel(

{

xPos: 510,

yPos: 40,

xRadius: 460,

yRadius: -40,

buttonLeft: $("#left-but"),

buttonRight: $("#right-but"),

altBox: $("#alt-text"),

titleBox: $("#title-text")

}

);

});

</script>

<!--[if lt IE 9]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

</head>

<body>

<div id="wrapper">

<div class="author">

<p>Московский государственный технический университет радиотехники, электроники и автоматики</p>

<p>Кафедра информатики и информационных систем</p>

<p>Тема работы: "Интернет-магазин каминов"</p>

</div>

<div class="author right">

<p>Курсовая работа по дисциплине "Мировые информационные ресурсы" <br/>

выполнил студент: Свиридова С.А. <br/>

Руководитель курсовой работы: Ковалев С.Н.</p>

<p>2014 год.</p>

</div>

<div id="header">

<div id="topInfo"> <a href="#" class="logotype"><img src="/images/logotype.png" width="190" height="59"></a>

<div id="sloganWrap">

<p>Продажа и установка шведских печей-каминов Contura</p>

</div>

<div id="contactsWrap"><span class="yaPhone">+7 495 555-555-5</span>

<p>многоканальный</p>

</div>

<ul class="mainMenu">

<li><a href="about.html">О компании</a></li>

<li><a href="actions.html">Акции</a></li>

<li><a href="catalog.html">Каталог</a></li>

<li><a href="install.html">Монтаж</a></li>

<li><a href="contacts.html">Контакты</a></li>

</ul>

</div>

<div id="carousel1">

<input id="right-but" type="button" value="" />

<input id="left-but" type="button" value="" />

<a href="#"> <img src="/images/Contura-880-G-FL.png" alt="Мощность -- 5 кВт <br/> Эффективность -- 82%" width="220" height="500" class="cloudcarousel" title="Contura 880 G FL" /> </a> <a href="#"> <img src="/images/Contura-560T-G.png" alt="Мощность -- 3-9 кВт <br/> Эффективность -- 79%" width="220" height="500" class="cloudcarousel" title="Contura 560T G"> </a> <a href="#"> <img src="/images/Contura-i31A.png" alt="Мощность -- 4-9 кВт <br/> Эффективность -- 80%" width="220" height="500" class="cloudcarousel" title="Contura i31A"> </a> <a href="#"> <img src="/images/Contura_820_T_S.png" alt="Мощность -- 5 кВт <br/> Эффективность -- 82%" width="220" height="500" class="cloudcarousel" title="Contura 820 T S"> </a> <a href="#"> <img src="/images/Contura-54.png" alt="Мощность -- 3-7 кВт <br/> Эффективность -- 81%" width="220" height="500" class="cloudcarousel" title="Contura 54"> </a>

<div id="controls"> <span id="title-text">Название котла</span>

<p id="alt-text">Технические характеристики</p>

</div>

<div id="microText">

<p>Шведские камины Contura - эталон отопительного оборудования, соответствующий любым потребностям его владельца. Они безопасны, долговечны и эффективны.</p>

</div>

</div>

</div>

<div class="wrapper">

<div id="mainContainer">

<h1>Печи-камины Contura: комфорт и удобство в Вашем доме!</h1>

<p>Дровяные камины популярны всегда. И это понятно. Только они дают зрелищное наслаждение игрой живого пламени, позволяют создать настоящее живое тепло. Приятный звук потрескивающих дров, завораживающая игра огня, обволакивающее тепло и уют в доме - все это предоставит настоящий дровяной камин своему владельцу.</p>

<h2>Почему именно Contura?</h2>

<p> Печи и камины Contura - идеальный вариант для отопления загородного дома. Это надежные высокоэффективные отопительные приборы, в конструкции которых удачно сочетаются безопасность пользования и продуманная устройство отопительного процесса.</p>

<p> Камины Contura производства Швеции соединяют в себе элегантный дизайн и новые технологии. При этом производители учитывают функциональность и высокую эргономичность создаваемых приборов с учетом основной функции обогрева помещений.</p>

<div id="advBlock">

<div class="advItem"> <img src="/images/icon-1.jpg" width="100" height="100"> <span class="advName">Высокая эффективность</span>

<p>производит больше тепла при минимальном расходе дров. КПД от 78%!</p>

</div>

<div class="advItem"> <img src="/images/icon-2.jpg" width="100" height="100"> <span class="advName">Настраиваемая мощность</span>

<p>позволяет экономить дрова: расход всего 1 кг в час!</p>

</div>

<div class="advItem"> <img src="/images/icon-3.jpg" width="100" height="100"> <span class="advName">Изоляция топочной камеры</span>

<p>вермикулит позволяет продлить срок службы и эффективность горения</p>

</div>

<div class="advItem"> <img src="/images/icon-4.jpg" width="100" height="100"> <span class="advName">Настраиваемое подключение</span>

<p>подача воздуха для горения может производиться как с улицы, так и из комнаты.</p>

</div>

<div class="advItem"> <img src="/images/icon-5.jpg" width="100" height="100"> <span class="advName">Современный дизайн</span>

<p>изгибы линии топки и используемые природные материалы добавят элегантности и роскоши любому интерьеру.</p>

</div>

<div class="advItem"> <img src="/images/icon-6.jpg" width="100" height="100"> <span class="advName">Обзор огня до 178⁰</span>

<p>новая эффективная технология горения минимизирует образование копоти и сажи. Любуйтесь огнем без преград!</p>

</div>

</div>

<hr />

<h2>Подчеркните Ваш неповторимый стиль!</h2>

<p>При помощи дополнительных устройств Вы можете придать своему камину собственный неповторимый стиль и привести его в соответствие со своими вкусами и потребностями. Например, вы можете выбрать цвет, материал верхней панели, дверцу, ящик для хранения дров, конфорку, духовку, вентилятор, теплонакопительный блок, трубу дымохода, напольный лист и многое другое. Все аксессуары производятся под маркой Contura для каминов Contura и прекрасно подходят ко всем моделям.</p>

</div>

<div id="rightContainer">

<div id="specialOffer"><img src="/images/test-img.jpg" width="173" height="304"><span class="prName">Печь-камин Contura i31A</span> <span class="costItem">271 200 руб.</span><a href="#" class="buyButton">Заказать</a></div>

<div id="special">

<h3>Наши акции:</h3>

<div class="inner"> <img src="/images/delivery.png" width="88" height="127" style="margin:-10px 0 0 20px; float:right;">

<p> При покупке любой печи-камина Contura Вы получаете бесплатную доставку по Москве и Области!</p>

</div>

</div>

</div>

</div>

</div>

<div id="footer">

<div class="wrapper">

<table>

<tbody>

<tr>

<td width="25%"><img src="/images/logotype.png" width="190" height="59">

<p>Продажа шведского отопительного оборудования</p></td>

<td width="40%"><p><img src="/images/sitemap-icon.png" width="16" height="16" style="margin-right:7px;" align="left"> Карта сайта:</p>

<ul>

<li><a href="about.html">О компании</a></li>

<li><a href="actions.html">Акции</a></li>

<li><a href="catalog.html">Каталог</a></li>

<li><a href="install.html">Монтаж</a></li>

<li><a href="contacts.html">Контакты</a></li>

</ul></td>

<td width="35%"><p class="bottomPhone">Номер телефона: <span>+7 495 555-555-5</span> Почтовый ящик: info@domain.ru </p></td>

</tr>

</tbody>

</table>

</div>

</div>

<div style="display:none;background-color:#FFF">

<div id="sp_order" class="fieldContainer">

<div class="wrapper_form">

<form name="send_form" method="post" onsubmit="return check();" id="signupForm" class="contact_form">

<input type="hidden" name="cmd" value="send">

<ul>

<li>

<label for="fio">Вас зовут:</label>

<input type="text" name="fio" id="fio" value="" required="">

<span class="form_hint">Пример: "Иванов Иван"</span> </li>

<li>

<label for="mail">E-mail:</label>

<input type="text" name="mail" id="mail" value="" required="">

<span class="form_hint">Пример: "ivanov@yandex.ru"</span> </li>

<li>

<label for="phone">Телефон:</label>

<input type="text" name="phone" id="phone" value="" required="">

<span class="form_hint">Пример: "+7 (916) 123-45-67"</span> </li>

<li>

<label for="text">Доставка:</label>

<textarea class="textarea" name="text" style="width:300px; height:100px;"></textarea>

</li>

</ul>

<div class="signupButton">

<center>

<input class="sendData" type="button" value="Заказать" onClick="order_call();"/>

</center>

</div>

</form>

</div>

</div>

</div>

</body>

</html>



Приложение 2

Листинг страницы «О компании»:

<!DOCTYPE html>

<html>

<head>

<meta charset="windows-1251" />

<title>Шведские печи-камины Contura</title>

<meta name="keywords" content="камины, камины contura, шведские печи-камины, contura" />

<meta name="description" content="Шведские камины Contura - эталон отопительного оборудования, соответствующий всем потребностям его владельца. Они безопасны, долговечны и эффективны.">

<link href="/css/style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="/js/jquery.js"></script>

<script type="text/javascript" src="/js/jquery.colorbox.js"></script>

<script type="text/javascript" src="/js/scripts.js"></script>

<!--[if lt IE 9]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

</head>

<body>

<div id="wrapper">

<div id="header-inner">

<div id="topInfo"> <a href="/" class="logotype"><img src="/images/logotype.png" width="190" height="59"></a>

<div id="sloganWrap">

<p>Продажа и установка шведских печей-каминов Contura</p>

</div>

<div id="contactsWrap"><span class="yaPhone">+7 495 555-555-5</span>

<p>многоканальный</p>

</div>

<ul class="mainMenu">

<li><a href="about.html">О компании</a></li>

<li><a href="actions.html">Акции</a></li>

<li><a href="catalog.html">Каталог</a></li>

<li><a href="install.html">Монтаж</a></li>

<li><a href="contacts.html">Контакты</a></li>

</ul>

</div>

</div>

<div class="wrapper">

<div id="mainContainer">

<h1>Компания "Феникс"</h1>

<p><img src="/images/logotype.png" width="190" height="59" align="left" style="margin:0 18px 14px 0;"> Компания "Феникс" была основана в 2008 году, и на протяжении уже <b>6 лет</b> занимается поставкой, монтажом и сервисным обслуживанием отопительного оборудования. За это время был сформирован профессиональный и квалифицированный штат сотрудников, способных справится даже с самой непростой задачей при монтаже инженерных систем, было изучено большинство отопительных каминов, представленных на российском рынке, и получен неоценимый опыт работы с ними. Опираясь на полученный опыт, мы с полной ответственностью рекомендуем нашим клиентам именно шведские камины-печи Contura, как наиболее качественные, энергоэффективные и безопасные в своем классе печи.</p>

<h2>Современные технологии на страже Вашего уюта!</h2>

<p><img src="/images/shem-of-item.jpg" width="227" height="322" align="right" style="margin:7px 2px 8px 19px;"> Используя самые современные технологии производства каминов в Европе, шведский производитель предоставляет не просто качественный продукт, а определяет направление всего рынка отопительных каминов. Уникальная запетентованная конструкция шведских каминов позволяет добиться по-настоящему высоких процентов КПД горения - до <b>85%</b>, при том, что у конкурентов этот показатель колеблется от 40% до 60%. А использование специального огнестойкого стекла позволит Вам любоваться процессов горения дров с невероятно широким углом обзора - <b>178%!</b> Оцените шведское качество и практичность уже сегодня: купите камин Contura с бесплатной доставкой!</p>

</div>

<div id="rightContainer">

<div id="specialOffer"><img src="/images/test-img.jpg" width="173" height="304"><span class="prName">Печь-камин Contura i31A</span> <span class="costItem">271 200 руб.</span><a href="#" class="buyButton">Заказать</a></div>

<div id="special">

<h3>Наши акции:</h3>

<div class="inner"> <img src="/images/delivery.png" width="88" height="127" style="margin:-10px 0 0 20px; float:right;">

<p> При покупке любой печи-камина Contura Вы получаете бесплатную доставку по Москве и Области!</p>

</div>

</div>

</div>

</div>

</div>

<div id="footer">

<div class="wrapper">

<table>

<tbody>

<tr>

<td width="25%"><img src="/images/logotype.png" width="190" height="59">

<p>Продажа шведского отопительного оборудования</p></td>

<td width="40%"><p><img src="/images/sitemap-icon.png" width="16" height="16" style="margin-right:7px;" align="left"> Карта сайта:</p>

<ul>

<li><a href="about.html">О компании</a></li>

<li><a href="actions.html">Акции</a></li>

<li><a href="catalog.html">Каталог</a></li>

<li><a href="install.html">Монтаж</a></li>

<li><a href="contacts.html">Контакты</a></li>

</ul></td>

<td width="35%"><p class="bottomPhone">Номер телефона: <span>+7 495 555-555-5</span> Почтовый ящик: info@domain.ru </p></td>

</tr>

</tbody>

</table>

</div>

</div>

<div style="display:none;background-color:#FFF">

<div id="sp_order" class="fieldContainer">

<div class="wrapper_form">

<form name="send_form" method="post" onsubmit="return check();" id="signupForm" class="contact_form">

<input type="hidden" name="cmd" value="send">

<ul>

<li>

<label for="fio">Вас зовут:</label>

<input type="text" name="fio" id="fio" value="" required="">

<span class="form_hint">Пример: "Иванов Иван"</span> </li>

<li>

<label for="mail">E-mail:</label>

<input type="text" name="mail" id="mail" value="" required="">

<span class="form_hint">Пример: "ivanov@yandex.ru"</span> </li>

<li>

<label for="phone">Телефон:</label>

<input type="text" name="phone" id="phone" value="" required="">

<span class="form_hint">Пример: "+7 (916) 123-45-67"</span> </li>

<li>

<label for="text">Доставка:</label>

<textarea class="textarea" name="text" style="width:300px; height:100px;"></textarea>

</li>

</ul>

<div class="signupButton">

<center>

<input class="sendData" type="button" value="Заказать" onClick="order_call();"/>

</center>

</div>

</form>

</div>

</div>

</div>

</body>

</html>



Приложение 3

Листинг страницы «Акции»:

<!DOCTYPE html>

<html>

<head>

<meta charset="windows-1251" />

<title>Шведские печи-камины Contura</title>

<meta name="keywords" content="камины, камины contura, шведские печи-камины, contura" />

<meta name="description" content="Шведские камины Contura - эталон отопительного оборудования, соответствующий всем потребностям его владельца. Они безопасны, долговечны и эффективны.">

<link href="/css/style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="/js/jquery.js"></script>

<script type="text/javascript" src="/js/jquery.colorbox.js"></script>

<script type="text/javascript" src="/js/scripts.js"></script>

<!--[if lt IE 9]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

</head>

<body>

<div id="wrapper">

<div id="header-inner">

<div id="topInfo"> <a href="/" class="logotype"><img src="/images/logotype.png" width="190" height="59"></a>

<div id="sloganWrap">

<p>Продажа и установка шведских печей-каминов Contura</p>

</div>

<div id="contactsWrap"><span class="yaPhone">+7 495 555-555-5</span>

<p>многоканальный</p>

</div>

<ul class="mainMenu">

<li><a href="about.html">О компании</a></li>

<li><a href="actions.html">Акции</a></li>

<li><a href="catalog.html">Каталог</a></li>

<li><a href="install.html">Монтаж</a></li>

<li><a href="contacts.html">Контакты</a></li>

</ul>

</div>

</div>

<div class="wrapper">

<div id="mainContainer">

<h1>Акции и специальные предложения</h1>

<p>Мы рады объявить о начале беспрецедентной акции "Доставка камина за наш счет"! С 01.12.14 и вплоть до 31.12.14 при заказе в нашем интернет-магазине любого камина от шведской компании Contura, Вы сэкономите от 1 000 до 3 000 рублей, так как мы доставим его Вам совершенно бесплатно! Подарите родным и близким замечательные мгновения нахождения в уюте и комфорте в эту Новогоднуюю ночь!</p>

<img src="/images/free-delivery.jpg" width="600" height="370" style="margin:10px auto; display:block;">

<h2>Как получить камин с бесплатной доставкой?</h2>

<p>Перейдите в аш <a href="/catalog.html">каталог продукции</a> и выберите понравившийся камин. Если Вы не можете подобрать камин самостоятельно или нуждаетесь в консультации специалиста, обратитесь к нам по телефону +7 (495) 555-55-55, и мы с удовольствием поможем Вам с выбором.</p>

<p>После того, как Вы опеределились с выбором, нажмите на кнопку "Заказать" напротив нужного камина и заполните все необходимые поля. Наш менеджер свяжется с Вами в течение 5 минут для подтверждения и уточнения деталей заказа. После оплаты, камин будет доставлен Вам на следующий день совершенно бесплатно!</p>

</div>

<div id="rightContainer">

<div id="specialOffer"><img src="/images/test-img.jpg" width="173" height="304"><span class="prName">Печь-камин Contura i31A</span> <span class="costItem">271 200 руб.</span><a href="#" class="buyButton">Заказать</a></div>

<div id="special">

<h3>Наши акции:</h3>

<div class="inner"> <img src="/images/delivery.png" width="88" height="127" style="margin:-10px 0 0 20px; float:right;">

<p> При покупке любой печи-камина Contura Вы получаете бесплатную доставку по Москве и Области!</p>

</div>

</div>

</div>

</div>

</div>

<div id="footer">

<div class="wrapper">

<table>

<tbody>

<tr>

<td width="25%"><img src="/images/logotype.png" width="190" height="59">

<p>Продажа шведского отопительного оборудования</p></td>

<td width="40%"><p><img src="/images/sitemap-icon.png" width="16" height="16" style="margin-right:7px;" align="left"> Карта сайта:</p>

<ul>

<li><a href="about.html">О компании</a></li>

<li><a href="actions.html">Акции</a></li>

<li><a href="catalog.html">Каталог</a></li>

<li><a href="install.html">Монтаж</a></li>

<li><a href="contacts.html">Контакты</a></li>

</ul></td>

<td width="35%"><p class="bottomPhone">Номер телефона: <span>+7 495 555-555-5</span> Почтовый ящик: info@domain.ru </p></td>

</tr>

</tbody>

</table>

</div>

</div>

<div style="display:none;background-color:#FFF">

<div id="sp_order" class="fieldContainer">

<div class="wrapper_form">

<form name="send_form" method="post" onsubmit="return check();" id="signupForm" class="contact_form">

<input type="hidden" name="cmd" value="send">

<ul>

<li>

<label for="fio">Вас зовут:</label>

<input type="text" name="fio" id="fio" value="" required="">

<span class="form_hint">Пример: "Иванов Иван"</span> </li>

<li>

<label for="mail">E-mail:</label>

<input type="text" name="mail" id="mail" value="" required="">

<span class="form_hint">Пример: "ivanov@yandex.ru"</span> </li>

<li>

<label for="phone">Телефон:</label>

<input type="text" name="phone" id="phone" value="" required="">

<span class="form_hint">Пример: "+7 (916) 123-45-67"</span> </li>

<li>

<label for="text">Доставка:</label>

<textarea class="textarea" name="text" style="width:300px; height:100px;"></textarea>

</li>

</ul>

<div class="signupButton">

<center>

<input class="sendData" type="button" value="Заказать" onClick="order_call();"/>

</center>

</div>

</form>

</div>

</div>

</div>

</body>

</html>



Приложение 4

Листинг страницы «Каталог»:

<!DOCTYPE html>

<html>

<head>

<meta charset="windows-1251" />

<title>Шведские печи-камины Contura</title>

<meta name="keywords" content="камины, камины contura, шведские печи-камины, contura" />

<meta name="description" content="Шведские камины Contura - эталон отопительного оборудования, соответствующий всем потребностям его владельца. Они безопасны, долговечны и эффективны.">

<link href="/css/style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="/js/jquery.js"></script>

<script type="text/javascript" src="/js/jquery.colorbox.js"></script>

<script type="text/javascript" src="/js/scripts.js"></script>

<!--[if lt IE 9]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

</head>

<body>

<div id="wrapper">

<div id="header-inner">

<div id="topInfo"> <a href="/" class="logotype"><img src="/images/logotype.png" width="190" height="59"></a>

<div id="sloganWrap">

<p>Продажа и установка шведских печей-каминов Contura</p>

</div>

<div id="contactsWrap"><span class="yaPhone">+7 495 555-555-5</span>

<p>многоканальный</p>

</div>

<ul class="mainMenu">

<li><a href="about.html">О компании</a></li>

<li><a href="actions.html">Акции</a></li>

<li><a href="catalog.html">Каталог</a></li>

<li><a href="install.html">Монтаж</a></li>

<li><a href="contacts.html">Контакты</a></li>

</ul>

</div>

</div>

<div class="wrapper">

<div id="mainContainer">

<h1>Каталог печей Contura</h1>

<div id="catalog">

<div class="item"> <span class="img-wrapper"><img src="/images/Contura_820_T_S.png" width="220" height="500"></span>

<div class="card"> <span class="prName">Печь-камин Contura 820 T S</span> <span class="costItem">151 800 руб.</span>

<div class="anons">

<table>

<tbody>

<tr>

<td>Мощность</td>

<td>5 кВт</td>

</tr>

<tr>

<td>Эффективность</td>

<td>82%</td>

</tr>

<tr>

<td>Отапливаемая площадь</td>

<td>до 100 м²</td>

</tr>

<tr>

<td>Высота</td>

<td>930 мм</td>

</tr>

<tr>

<td>Ширина</td>

<td>460 мм</td>

</tr>

<tr>

<td>Глубина</td>

<td>360 мм</td>

</tr>

<tr>

<td>Bec</td>

<td>125 кг</td>

</tr>

</tbody>

</table>

</div>

</div>

<a href="#" class="buyButton">Заказать</a> </div>

<div class="item"> <span class="img-wrapper"><img src="/images/Contura-54.png" width="220" height="500"></span>

<div class="card"> <span class="prName">Печь-камин Contura 54</span> <span class="costItem">109 800 руб.</span>

<div class="anons">

<table>

<tbody>

<tr>

<td>Мощность</td>

<td>3-7 кВт</td>

</tr>

<tr>

<td>Эффективность</td>

<td>81%</td>

</tr>

<tr>

<td>Отапливаемая площадь</td>

<td>до 120 м²</td>

</tr>

<tr>

<td>Высота</td>

<td>825 мм</td>

</tr>

<tr>

<td>Ширина</td>

<td>550 мм</td>

</tr>

<tr>

<td>Глубина</td>

<td>455 мм</td>

</tr>

<tr>

<td>Bec</td>

<td>149 кг</td>

</tr>

</tbody>

</table>

</div>

</div>

<a href="#" class="buyButton">Заказать</a> </div>

<div class="item"> <span class="img-wrapper"><img src="/images/Contura-560T-G.png" width="220" height="500"></span>

<div class="card"> <span class="prName">Печь-камин Contura 560T G </span> <span class="costItem">187 700 руб.</span>

<div class="anons">

<table>

<tbody>

<tr>

<td>Мощность</td>

<td>3-9 кВт</td>

</tr>

<tr>

<td>Эффективность</td>

<td>79%</td>

</tr>

<tr>

<td>Отапливаемая площадь</td>

<td>до 120 м²</td>

</tr>

<tr>

<td>Высота</td>

<td>1010 мм</td>

</tr>

<tr>

<td>Ширина</td>

<td>536 мм</td>

</tr>

<tr>

<td>Глубина</td>

<td>455 мм</td>

</tr>

<tr>

<td>Bec</td>

<td>145 кг</td>

</tr>

</tbody>

</table>

</div>

</div>

<a href="#" class="buyButton">Заказать</a> </div>

<div class="item"> <span class="img-wrapper"><img src="/images/Contura-880-G-FL.png" width="220" height="500"></span>

<div class="card"> <span class="prName">Печь-камин Contura 880 G FL</span> <span class="costItem">136 600 руб.</span>

<div class="anons">

<table>

<tbody>

<tr>

<td>Мощность</td>

<td>5 кВт</td>

</tr>

<tr>

<td>Эффективность</td>

<td>82%</td>

</tr>

<tr>

<td>Отапливаемая площадь</td>

<td>до 140 м²</td>

</tr>

<tr>

<td>Высота</td>

<td>1060 мм</td>

</tr>

<tr>

<td>Ширина</td>

<td>460 мм</td>

</tr>

<tr>

<td>Глубина</td>

<td>360 мм</td>

</tr>

<tr>

<td>Bec</td>

<td>90 кг</td>

</tr>

</tbody>

</table>

</div>

</div>

<a href="#" class="buyButton">Заказать</a> </div>

<div class="item"> <span class="img-wrapper"><img src="/images/Contura-i31A.png" width="220" height="500"></span>

<div class="card"> <span class="prName">Печь-камин Contura 880 G FL</span> <span class="costItem">271 200 руб.</span>

<div class="anons">

<table>

<tbody>

<tr>

<td>Мощность</td>

<td>4-9 кВт</td>

</tr>

<tr>

<td>Эффективность</td>

<td>80%</td>

</tr>

<tr>

<td>Отапливаемая площадь</td>

<td>до 120 м²</td>

</tr>

<tr>

<td>Высота</td>

<td>1750 мм</td>

</tr>

<tr>

<td>Ширина</td>

<td>1660 мм</td>

</tr>

<tr>

<td>Глубина</td>

<td>580 мм</td>

</tr>

<tr>

<td>Bec</td>

<td>590 кг</td>

</tr>

</tbody>

</table>

</div>

</div>

<a href="#" class="buyButton">Заказать</a> </div>

<p style="padding:5px 20px">Чтобы посмотреть полный каталог каминов, обратитесь к нашим менеджерам по телефону: +7 (495) 555-55-55</p>

</div>

</div>

<div id="rightContainer">

<div id="specialOffer"><img src="/images/test-img.jpg" width="173" height="304"><span class="prName">Печь-камин Contura i31A</span> <span class="costItem">271 200 руб.</span><a href="#" class="buyButton">Заказать</a></div>

<div id="special">

<h3>Наши акции:</h3>

<div class="inner"> <img src="/images/delivery.png" width="88" height="127" style="margin:-10px 0 0 20px; float:right;">

<p> При покупке любой печи-камина Contura Вы получаете бесплатную доставку по Москве и Области!</p>

</div>

</div>

</div>

</div>

</div>

<div id="footer">

<div class="wrapper">

<table>

<tbody>

<tr>

<td width="25%"><img src="/images/logotype.png" width="190" height="59">

<p>Продажа шведского отопительного оборудования</p></td>

<td width="40%"><p><img src="/images/sitemap-icon.png" width="16" height="16" style="margin-right:7px;" align="left"> Карта сайта:</p>

<ul>

<li><a href="about.html">О компании</a></li>

<li><a href="actions.html">Акции</a></li>

<li><a href="catalog.html">Каталог</a></li>

<li><a href="install.html">Монтаж</a></li>

<li><a href="contacts.html">Контакты</a></li>

</ul></td>

<td width="35%"><p class="bottomPhone">Номер телефона: <span>+7 495 555-555-5</span> Почтовый ящик: info@domain.ru </p></td>

</tr>

</tbody>

</table>

</div>

</div>

<div style="display:none;background-color:#FFF">

<div id="sp_order" class="fieldContainer">

<div class="wrapper_form">

<form name="send_form" method="post" onsubmit="return check();" id="signupForm" class="contact_form">

<input type="hidden" name="cmd" value="send">

<ul>

<li>

<label for="fio">Вас зовут:</label>

<input type="text" name="fio" id="fio" value="" required="">

<span class="form_hint">Пример: "Иванов Иван"</span> </li>

<li>

<label for="mail">E-mail:</label>

<input type="text" name="mail" id="mail" value="" required="">

<span class="form_hint">Пример: "ivanov@yandex.ru"</span> </li>

<li>

<label for="phone">Телефон:</label>

<input type="text" name="phone" id="phone" value="" required="">

<span class="form_hint">Пример: "+7 (916) 123-45-67"</span> </li>

<li>

<label for="text">Доставка:</label>

<textarea class="textarea" name="text" style="width:300px; height:100px;"></textarea>

</li>

</ul>

<div class="signupButton">

<center>

<input class="sendData" type="button" value="Заказать" onClick="order_call();"/>

</center>

</div>

</form>

</div>

</div>

</div>

</body>

</html>



Приложение 5

Листинг страницы «Монтаж»:

<!DOCTYPE html>

<html>

<head>

<meta charset="windows-1251" />

<title>Шведские печи-камины Contura</title>

<meta name="keywords" content="камины, камины contura, шведские печи-камины, contura" />

<meta name="description" content="Шведские камины Contura - эталон отопительного оборудования, соответствующий всем потребностям его владельца. Они безопасны, долговечны и эффективны.">

<link href="/css/style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="/js/jquery.js"></script>

<script type="text/javascript" src="/js/jquery.colorbox.js"></script>

<script type="text/javascript" src="/js/scripts.js"></script>

<!--[if lt IE 9]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

</head>

<body>

<div id="wrapper">

<div id="header-inner">

<div id="topInfo"> <a href="/" class="logotype"><img src="/images/logotype.png" width="190" height="59"></a>

<div id="sloganWrap">

<p>Продажа и установка шведских печей-каминов Contura</p>

</div>

<div id="contactsWrap"><span class="yaPhone">+7 495 555-555-5</span>

<p>многоканальный</p>

</div>

<ul class="mainMenu">

<li><a href="about.html">О компании</a></li>

<li><a href="actions.html">Акции</a></li>

<li><a href="catalog.html">Каталог</a></li>

<li><a href="install.html">Монтаж</a></li>

<li><a href="contacts.html">Контакты</a></li>

</ul>

</div>

</div>

<div class="wrapper">

<div id="mainContainer">

<h1>Установка и эксплуатация печей-каминов Contura</h1>

<p>Крайне важно, чтобы установка камина была проведена сертифицированной компанией еще до

начала его использования. Также настоятельно рекомендуем внимательно изучить инструкцию по эксплуатации камина до того, как разжечь его в первый раз. </p>

<img src="/images/install-shem.jpg" alt="Пример схемы сборки камина" style="margin:5px auto 0; display:block;" />

<ol>

<li>Дровяная решетка</li>

<li>Колосниковая решетка</li>

<li>Внутренняя отделка топки</li>

</ol>

<h2>Будьте внимательны при эксплуатации</h2>

<p>Некоторые поверхности камина становятся очень горячими во время использования камина и могут привести к ожогам при касании. Также будьте осторожны с теплом, излучаемым через стекло дверцы топки. Размещение горючих материалов ближе отмеченной безопасной дистанции может привести к пожару. Неправильная эксплуатация камина может спровоцировать быстрое воспламенение газов, которое может привести к повреждению Вашего имущества и нанесению вреда здоровью.</p>

</div>

<div id="rightContainer">

<div id="specialOffer"><img src="/images/test-img.jpg" width="173" height="304"><span class="prName">Печь-камин Contura i31A</span> <span class="costItem">271 200 руб.</span><a href="#" class="buyButton">Заказать</a></div>

<div id="special">

<h3>Наши акции:</h3>

<div class="inner"> <img src="/images/delivery.png" width="88" height="127" style="margin:-10px 0 0 20px; float:right;">

<p> При покупке любой печи-камина Contura Вы получаете бесплатную доставку по Москве и Области!</p>

</div>

</div>

</div>

</div>

</div>

<div id="footer">

<div class="wrapper">

<table>

<tbody>

<tr>

<td width="25%"><img src="/images/logotype.png" width="190" height="59">

<p>Продажа шведского отопительного оборудования</p></td>

<td width="40%"><p><img src="/images/sitemap-icon.png" width="16" height="16" style="margin-right:7px;" align="left"> Карта сайта:</p>

<ul>

<li><a href="about.html">О компании</a></li>

<li><a href="actions.html">Акции</a></li>

<li><a href="catalog.html">Каталог</a></li>

<li><a href="install.html">Монтаж</a></li>

<li><a href="contacts.html">Контакты</a></li>

</ul></td>

<td width="35%"><p class="bottomPhone">Номер телефона: <span>+7 495 555-555-5</span> Почтовый ящик: info@domain.ru </p></td>

</tr>

</tbody>

</table>

</div>

</div>

<div style="display:none;background-color:#FFF">

<div id="sp_order" class="fieldContainer">

<div class="wrapper_form">

<form name="send_form" method="post" onsubmit="return check();" id="signupForm" class="contact_form">

<input type="hidden" name="cmd" value="send">

<ul>

<li>

<label for="fio">Вас зовут:</label>

<input type="text" name="fio" id="fio" value="" required="">

<span class="form_hint">Пример: "Иванов Иван"</span> </li>

<li>

<label for="mail">E-mail:</label>

<input type="text" name="mail" id="mail" value="" required="">

<span class="form_hint">Пример: "ivanov@yandex.ru"</span> </li>

<li>

<label for="phone">Телефон:</label>

<input type="text" name="phone" id="phone" value="" required="">