Страница «Монтаж»
Страница install.html (Рис. 5) находится в корне директории с веб-сайтом и была создана с помощью веб-редактора Abode Dreamweaver CS5. Изображение, размещенной на ней, было разработано и скомпилировано в редакторе растровой графики Abode Photoshop CS5. Изображение имеет атрибут стилей style, который задает его положение по центру страницы и отступы. Весь контент данной страницы размечен согласно правилам HTML. Страница содержит тег нумерованного списка <ol> и заголовки первого и второго уровней. Листинг страницы «Монтаж» представлен в Приложении 5.
Рис. 5. Страница «Монтаж»
Страница «Контакты»
Страница contacts.html (Рис. 6) находится в корне директории с веб-сайтом и была создана с помощью веб-редактора Abode Dreamweaver CS5.Страница содержит, помимо заголовка первого уровня, интерактивный модуль Яндекс.Карт со схемой проезда к офису компании (адрес компании указан в качестве примера). Модуль интегрирован в страницу с применением API сервиса Яндекс.Карты и представляет собой подключаемый при помощи языка JavaScript фрейм, стилизованный согласно дизайну данного веб-ресурса.
Также на странице присутствует таблица с заливкой чередующихся строк. Такая реализация является возможной благодаря новым свойствам каскадных таблиц стилей CSS3, а именно – псевдоклассов. Все нечетные строки в данной таблице выделены другим цветом для удобства чтения. Весь контент данной страницы размечен согласно правилам HTML. Листинг страницы «Контакты» представлен в Приложении 6.
Рис. 6. Страница «Контакты»
Заключение
Целью курсовой работы являлось получение навыков в работе с языком гипертекстовой разметки HTML, а также навыков в использовании специализированных редакторов для веб-разработки. В результате выполнения курсовой работы был написан, протестирован и загружен на работающий хостинг веб-сайт «Интернет-магазин каминов Contura», который может быть использован для привлечения новых потенциальных клиентов компании. Цель курсовой работы была достигнута полностью.
Список используемой литературы
Едомский Ю. Техника Web-дизайна для студента. – СПб: BHV, 2005. – 400 с.
Молер Д., Боуэн К. Dreamweaver MX 2004: Руководство Web-дизайнера. – М: Эксмо-Пресс, 2005. – 352 с.
Полонская Е. Л. Самоучитель. Язык HTML. - Изд.:Диалектика, 2003.
Гаевский А. Ю., Романовский В. А. 100% самоучитель. Создание Web-страниц и Web-сайтов. HTML и JavaScript – Изд.: Технолоджи-3000, 2008. – 464 с.
Сайт производителя каминов 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<sup>0</sup></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>