Дата публикации

title

Текстовый

255

Заголовок

newslinks

Текстовый

255

Ссылка на оригинал статьи

newscategory

Числовой

12

Категория новостей

photo

Текстовый

255

Изображение к новостью

4.2 Разработка клиентской части

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

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

Несколько правил интерфейса :

· Забудем об оригинальности.

Усваивать оригинальный и необычный интерфейс пользователю придется достаточно долго. В большинстве случаев посетитель пойдет искать более простой интерфейс.

· Изучаем цели своих посетителей.

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

· Не усложняем.

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

· Не пытаемся решить интерфейсом другие задачи.

Это значит, что мы не сможем руководить тем, что интересует пользователя и заставлять его читать какой определенный раздел (например, «О фирме»), даже если он будет появляться на каждой странице наверху - это только приведет в раздражение посетителя.

· Определяемся, какой именно ресурс мы хотим создать.

Интерфейсы мало посещаемых сайтов и популярных таки отличаются: популярные могут себе позволить использовать что-то нестандартное (потому что со временем пользователи все равно научатся этому). Мало посещаемые, должны быть максимально удобными и простыми.

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

Итак, опираясь на вышеперечисленные правила, была разработана клиентская часть веб - сайта.

4.2.1 Руководство для пользователя

Для работы с электронной багетной мастерской пользователю потребуется браузер Internet Explorer 6.0 и выше, Mozilla FireFox 3.0 и выше, Opera 9.0 и выше. В адресной строке браузера надо прописать адрес сайта: http://localhost/sirena-bagets.kg. После загрузки сайта открывается главная страница (рис.5.2.1).

Рисунок. 5.2.1. Главная страница

В самой верхней части сайта размещен блок для авторизации или регистрации пользователя. Пользователям предоставлена возможность сделать заказ через свой электронный адрес. Для этого в системе есть возможность зарегистрироваться новым пользователям(Рис.5.2.2), а также авторизоваться уже зарегистрированным пользователям(Рис.5.2.3).

Рисунок 5.2.3 Блок для авторизации пользователя



Рисунок 5.2.2 Блок для регистрации нового пользователя

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

Справа от изображения багетов и паспарту имеется ссылка под названием “Применить к фотографии”, которая открывает страницу для применения видов багета к изображению клиента.

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

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

Если клиент является постоянным клиентом, то при выполнении авторизации система сделает пометку с надписью “Постоянный клиент”.

Если клиент окажется постоянным клиентом, система выведет ссылку на заказ посредством интернета. При нажатии на ссылку “Заказать”, система откроет страницу для расчета стоимости заказа, а также выполнить его.

На этой странице можно предварительно узнать о стоимость выполняемого заказа, заполнив нужные поля, а затем нажав на кнопку “Расчет”. Эта кнопка облегчает задачу клиентам, точно рассчитав стоимость заказа, избегая потенциальной ошибки при расчете. Затем нужно указать количество заказываемого комплекта, и нажимать на кнопку “Заказать”.

4.2.2 Руководство для администратора

Для того, чтобы зайти в блок для редактирования содержимого страницы сайта и управления базами данных, нужно авторизоваться под логином администратора. После правильной авторизации в главной странице появится ссылка на блок администрирования (Рис.5.3.1).

Рисунок 5.3.2. Главная страница администрирования

На этой странице предоставляется возможность добавления, удаления, а также редактирования записи на базе данных (Рис.5.3.3). Нужно нажимать на кнопку “Список”, чтобы посмотреть список данных в базе. Например, ниже показан список постоянных клиентов (Рис.5.3.4).

Рисунок 5.3.4 Список постоянных клиентов

Новая запись добавляется посредством кнопки “Добавить новый” в правом верхнем углу сайта. Система позволяет редактировать и удалить данные.

На странице для администрирования так же можно сделать анализ принятых заказов: сколько было заказано багетов, паспарту, комплектующих, и количество заказанных видов багета. Нужно указать дату, между интересующегося администратора периода и нажимать на кнопку “Посмотреть”. Если поставить птичку на значение “В днях” система покажет дату заказов в днях, в ином случае дата заказов отобразится в месяцах.



Заключение

В рамках данного дипломного проекта была разработана электронная багетная мастерская.

В разделе "Анализ предметной области и постановка задачи" рассмотрена предметная область данной дипломной работы.

В разделе "Обзор средств проектирования и разработки электронной багетной мастерской" были описаны внутренние языки системы.

В разделе “Разработка электронной багетной мастерской” была построена контекстная модель программы и описаны руководства для пользователя и администратора, а также описание структуры базы данных и графического интерфейса.

После разработки всех видов обеспечения системы "Багетная мастерская", были проведены тестовые испытания, результаты которых показали ее работоспособность и удобство в эксплуатации.

Использование системы, написанной на языке высокого уровня PHP, позволило повысить эффективность, производительность, а также упростить работу клиентам, мастеру багетной мастерской, увеличив скорость принятия заказов, снижая время, затрачиваемое на расчет и оформление заказа, а также ведение учета заказов.



ГЛОССАРИЙ

Бамза дамнных -- представленная в объективной форме совокупность самостоятельных материалов (статей, расчётов, нормативных актов, судебных решений и иных подобных материалов), систематизированных таким образом, чтобы эти материалы могли быть найдены и обработаны с помощью электронной вычислительной машины (ЭВМ).

Браузер - программа - клиент, которая используется, чтобы посмотреть на различные ресурсы Internet (Например, Opera, Explorer, Chrome).

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

Данные (Data)- это любая информация, поступающая из внешней среды.

Интерфемйс (англ.Interface -- сопряжение, поверхность раздела, перегородка) -- совокупность возможностей взаимодействия двух систем, устройств или программ, определённая их характеристиками, характеристиками соединения, сигналов обмена и т.п.

Клиемнт -- это аппаратный или программный компонент вычислительной системы, посылающий запросы серверу.

Сервер -- компьютер (или специальное компьютерное оборудование), выделенный и/или специализированный для выполнения определенных сервисных функций.

Система (System) - это совокупность элементов, связанных между собой и образующих целостность, единство.

CSS(англ. Cascading Style Sheets --каскадные таблицы стилей) --формальный языкописания внешнего вида документа, написанного с использованием языка разметки.

HTML -Hyper Text Makeup Language (язык разметки гипертекста) - язык кодирования, который используется для создания гипертекстовых документов в WWW. HTML-файлы просматриваются с помощью WWW-браузеров.

JPEG - Объединенная Фотографическая Группа Экспертов - JPEG обычно употребляется как формат для графических файлов. JPEG - формат предпочтителен чем формат GIF для фотографических изображений.

WWW - (WorldWideWeb) - имеет два значения - во-первых: совокупность ресурсов, которые могут быть доступным, если использовать Gopher, FTP, HTTP, telnet, USENET, и некоторые другие инструментальные средства. Во-вторых, система гипертекстовых документов, допускающих текст, графику, звуковые файлы, и т.п., которые могут быть использованы вместе в одном документе. WWW ныне является, наверное, самой популярной системой на базе Internet.



Список использованных источников

1. Сайт автора программного комплекса "Багетная мастерская" www.ldm2. narod.ru/idex.html;

2. Веб-сервис багетных мастеров www.bagetchik.ru/autobaget/faq. htm;

3. Сайт сети салонов багетных мастерских в Москве http://www.art-master.ru/baget. php;

4. Сайт Википедия - http://ru.wikipedia.org/wiki/%D0%92%D0%B5%D0%B1-%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D1%84%D0%B5%D0%B9%D1%81;

5. Сайт правил веб - интерфейса http://ddd.exmachina.ru/web/5rules/index.shtml;

6. Борисенко А.А. Веб-дизайн. Просто как дважды два. М.: Эскмо. 2008 320 с;

7. Электронная книга “Самоучитель PHP”, IT-студия SoftTime 150 c;

8. Сайт Википедия: http://ru.wikipedia.org/wiki/MySQL.



Приложение 1

ТЕХНИЧЕСКОЕ ЗАДАНИЕ

Для выпускной работы студентке Суйорбек кызы Сиренгуль

Тема: “Проектирование и разработка системы расчета и анализа для багетной мастерской”.

Постановка задачи.

Система оформлена в виде сайта, на котором предоставлена следующая информация и услуги:

· Фотографии имеющихся профилей багетов;

· Программа расчета стоимости фоторамок, в зависимости от выбранного багета и комплектации;

· Просмотр эскиза готовой фоторамки с переданным клиентом изображением;

· Для постоянных клиентов - заказ на изготовление без предоплаты;

· Для обычных клиентов - информация - где и как сделать заказ;

· Новости;

· Регистрация;

· Контактная информация;

· Служебный блок для:

1. корректировки сайта;

2. базы данных;

3. перевода обычных клиентов в разряд постоянных;

4. накопления и анализ статистики по заказам;

5. прогнозирование продаж по нескольким критериям.

Требования к системе.

Используемые программные средства: PHP и MySQL

Информация для блока расчета стоимости фоторамок.

Комплектация фоторамки:

· Размер картины или фотографии в см., например 21 х 29.7 см2;

· Наличие багета;

· Наличие стекла;

· Наличие картона;

· Наличие креплений;

· Наличие паспорту.

Каждый профиль багета характеризуется следующими свойствами:

· Код багета, например К22;

· Добавочной шириной (часть багета, которая теряется при резке);

· Стоимость (сом за метр).

Стекло имеет следующие свойства:

· Площадь в см2 которая зависит от размера картины или фотографии;

· Стоимость (сом за 1м2).

Картон имеет следующие свойства:

· Площадь в см2 которая зависит от размера картины или фотографии;

· Стоимость (сом за 1м2).

Крепления имеют следующие свойства:

· Стоимость за 1 комплект.

Паспорту имеет следующие свойства:

· Ширина паспорту;

· Высота паспорту;

· Толщина паспорту;

· Площадь паспорту, равной размеру фотографии плюс толщина паспорту;



Ширина

· Цвет паспорту;

· Стоимость (сом за 1м2).

Алгоритм расчета.

· Ввод размеров картины (или фотографии) в см. Первый размер - ширина, второй - высота. Например: 30 и 40 см

30

· Выбор вида багета из базы данных (выпадающий список). От этого зависит его цена;

· Указать наличие паспорту или его отсутствие (по умолчанию оно отсутствует);

· Ввести толщину паспорту;

· Выбрать цвет паспорту из базы данных (выпадающий список);

· Вычислить размеры паспорту в см и его площадь в м2. Размеры паспорту равны:

Ширина Паспорту=ШиринаКартины+2*Толщина Паспорту

Высота Паспорту=ВысотаКартины+2*Толщина Паспорту

Площадь Паспорту=(Ширина Паспорту*Высота Паспорту)/10000

· Указать наличие стекла или его отсутствие (по умолчанию оно присутствует). Его размеры (площадь) равна размерам картины или паспорту, если оно есть;

· Указать наличие картона или его отсутствие (по умолчанию оно присутствует). Его размеры (площадь) равна размерам картины или паспорту, если оно есть;

· Указать наличие креплений или его отсутствие (по умолчанию оно присутствует);

· Вычислить количество багета в метрах, необходимого для изготовления изделия с заданными размерами и добавочную длину (длина, которая теряется при скошенной резке):

Обозначим: Р-периметр, Ш - ширина картины, В - высота картины, ТП - толщина паспорту, Д - добавочная длина. Тогда расчет периметра требуемого багета выглядит следующим образом:

Р = (Ш + 2 * ТП + В + 2 * ТП + 2 * Д)) * 2 /100

Если паспорту отсутствует, то ТП=0.

Добавочная длина хранится в базе данных, вместе с видом багета.

· Из базы данных выбрать стоимость багета, стекла, картона, паспорту и креплений за единицу измерения и вычислить требуемую стоимость;

· Вычислить стоимость готового изделия, для этого необходимо сложить стоимости комплектующих. Стоимости тех комплектующих, которые отсутствуют (например, нет стекла) обнуляются.

Требования к структуре базы данных:

· Таблица для хранения видов багетов (текст), фотографии профиля багета (формат jpg и два разрешения - обычное и улучшенное), дополнительной длины (дробное число) и цены (сом за метр);

· Таблица комплектующих для хранения цены стекла (сом за м2), картона (сом за м2), паспорту (сом за м2), креплений (сом за комплект.).

· Таблица цветов паспорту (jpg);

· Таблица постоянных клиентов: код, имя, дата создания, email, телефон, адрес;

· Таблица статистики по заказам (код заказа, дата, код клиента, сумма, код багета, код паспорту, наличие стекла, наличие картона, код клиента, уровень инфляции по данным госстатистики, уровень безработицы по данным госстатистики, уровень дефицита бюджета по известным данным правительства.

Требования к функционированию сайта:

· Для выдачи эскиза требуется прием фотографии картины в формате jpg (ограничить разрешение). Только для зарегистрированных пользователей. Файл сохранять под зарегистрированным почтовым адресом (email).

Для формирования эскиза хранить шесть готовых форм изделий без паспорту:

и с паспорту:



Клиент должен выбирать одну из форм. Вид багета и цвет паспорту выбирать из базы данных;

· Новости могут содержать дату, текст и рисунок в jpg. Количество новостей ограничено некоторым числом (пока неясно);

· Архив новостей - не делать;

· Регистрация содержит, имя, пароль, почтовый адрес - обязательные;

· Служебный блок должен позволять корректировку текста страниц сайта, его разделов и содержимого базы данных;

· В служебном блоке должен иметь механизм анализа статистики в виде диаграмм или графиков по запросам, а также прогнозирование прибыли по нескольким критериям (уровень инфляции, безработицы, дефицита бюджета);

· Контактная информация содержит телефоны и адреса.

Эскиз страницы с расчетом изделия:

Содержание базы данных:

NBaget
id_bag	Name	Dob	PriceReal
74	15k	2.5	95
117	22к	2.5	110
125	J3030	5	270
126	GD	5	480
127	GE	5	500

Mat
id_mat	Name	PriceReal
2	Картон	110
3	Стекло	630
6	Паспорту	470
15	Крепление	40



Приложение 2

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

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<script type='text/javascript' id="optimost_global_head" src="/store/js/optimost_global_head.js?live=true"></script>

<title>Багетнаямастерская</title>

{% block stylesheets %}

<link href="{{ asset("public/css/jquery.fancybox.css") }}" rel="stylesheet">

<link href="{{ asset("public/css/style.css") }}" rel="stylesheet">

<link href="{{ asset("public/css/newdesign/styleforgallery.css") }}" rel="stylesheet">

<link href="{{ asset("public/css/newdesign/newgeneral.css") }}" rel="stylesheet">

<link href="{{ asset("public/css/newdesign/min_jl.common.css_1365113293000min_jl.common.css.css") }}" rel="stylesheet">

<link href="{{ asset("public/css/newdesign/min_jlprod.css_1365113293000min_jlprod.css.css") }}" rel="stylesheet">

<link href="{{ asset("public/css/newdesign/min_jlsidenav.css_1365113293000min_jlsidenav.css.css") }}" rel="stylesheet">

<style>

body{

background:repeaturl("{{ asset("bundles/diplomabaget/img/newdesign/background/fon5.jpg") }}");

}

.col-13{

}

.col-3{

background-color: #dfdfdf;

}

</style>

{% endblock %}

{% block javascripts %}

<script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>

<script src="{{ path('fos_js_routing_js', {"callback": "fos.Router.setData"}) }}"></script>

<script type="text/javascript" src="{{ asset("public/js/newdesign/Cantarell.font.js") }}"></script>

<script type="text/javascript" src="{{ asset("public/js/newdesign/cufon-yui.js") }}"></script>

<script type="text/javascript" src="{{ asset("public/js/newdesign/jquery.easing.1.3.js") }}"></script>

<script type="text/javascript" src="{{ asset("public/js/jquery.js") }}"></script>

<script type="text/javascript" src="{{ asset("public/js/jquery.fancybox.pack.js") }}"></script>

<script type="text/javascript" src="{{ asset("public/js/newdesign/libs_modernizr-1.7.min.js_1365113293000libs_modernizr-1.7.min.js.js") }}"></script>

<script type="text/javascript" src="{{ asset("public/js/newdesign/min_swfobject.js_1365113293000min_swfobject.js.js") }}"></script>

<script type="text/javascript" src="{{ asset("public/js/newdesign/min_config_s7viewers_flash.js_1365113293000min_config_s7viewers_flash.js.js") }}"></script>

<script type="text/javascript" src="{{ asset("public/js/newdesign/s_code.js_1365113293000s_code.js.js") }}"></script>

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />

<script type="text/javascript" src="{{ asset("public/js/newdesign/p13n.js") }}"></script>

{% endblock %}

</head>

<body>

<div id="wrapper">

<header class="main-header">

<div id="banner" role="banner">

<ul class="my-account">

<li class="first" >

{% block auth %}

{% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}

<div class="nick">

<div class="text">

<p>Вывошликак:{{ app.user.email }}</p>

{% if clientlabel %}

<h4 style="color: #006dcc;">{{ clientlabel }} </h4>

{% endif %}

</div>

<a href="{{ path('fos_user_security_logout') }}" class="exit">Выход</a>

<div class="clear"></div>

</div>

{% else %}

<div style="">

<form action="{{ path("fos_user_security_check") }}" method="post">

<input type="hidden" name="_csrf_token" value="{{ crfs }}" />

<label for="username">{{ 'security.login.username'|trans({}, 'FOSUserBundle') }}</label>

<input type="text" id="username" name="_username" value="" size = '23' required="required" />

<label for="password">{{ 'security.login.password'|trans({}, 'FOSUserBundle') }}</label>

<input type="password" id="password" name="_password" size = '23' required="required" />

<input type="checkbox" id="remember_me" name="_remember_me" value="on" />

<label for="remember_me">{{ 'security.login.remember_me'|trans({}, 'FOSUserBundle') }}</label>

&nbsp;&nbsp;

<input type="submit" id="_submit" name="_submit" value="{{ 'security.login.submit'|trans({}, 'FOSUserBundle') }}" />

nbsp;&nbsp; или

<a href="{{ path("fos_user_register") }}">Регистрация</a>

</form>

</div>

{% endif %}

{% endblockauth %}

</li>

</ul>

</div>

<nav role="navigation">

<ul>

<li class="menu">

<a href="{{ path("diploma_baget_new")}}" style="font-family:Times New Roman;

text-decoration:none;

font-size: 15px;

color: #363636;

font-weight:bold;

padding-left: 50px;">Главная</a>

</li>

<li class="menu">

<a href="{{ path("diploma_baget_news",{'id':1})}}" style="font-family:Times New Roman;

font-size: 15px;

color: #363636;

font-weight:bold;

padding-left: 50px;

text-decoration: none;">Новости</a>

</li>

<li class="menu">

<a href="{{ path("diploma_baget_forms",{'id':1})}}" style="font-family:Times New Roman;

text-decoration:none;

-size: 15px;

color: #363636;

font-weight:bold;

padding-left: 50px;">Программа для расчета</a>

</li>

<li class="menu">

<a href="{{ path("diploma_baget_aboutcomp")}}" style="font-family:Times New Roman;

text-decoration:none;

font-size: 15px;

color: #363636;

font-weight:bold;

padding-left: 50px;">Окомпании</a>

</li>

<li class="menu">

<a href="{{ path("diploma_baget_contacts")}}" style="font-family:Times New Roman;

font-size: 15px;

text-decoration: none;

font-weight:bold;

color: #363636;

padding-left: 50px;">Контакты</a>

</li>

<li class="menu">

<a href="banner" style="font-family:Times New Roman;

font-weight:bold;

text-decoration:none;

font-size: 15px;

color: #363636;

padding-left: 50px;">Blank</a>

</li>

</ul>

</nav>

<div id="breadcrumbs">

</div>

</header>

<div id="content">

<div class="main main-with-row hori-3" id="view-orders" role="main">

<div class="row vert-3">

<div class="col-3 first lt-nav">

<section>

<section class="mod lt-nav-container lt-nav-container-links">

<header>

<h4>Наши продукции</h4>

<br>

<h2>

Производители багетов:

</h2>

</header>

<div class="expand-wrapper">

<ul>

{% for item in bagets %}

<li><a href="{{ path("diploma_baget_baget", {'id':item.id}) }}">{{ item }}</a></li>

{% endfor %}

</ul>

</div>

</section>

<section class="mod lt-nav-container lt-nav-container-links">

<header>

<h2>

Цвета паспарту:

</h2>

</header>

<div class="expand-wrapper">

<ul>

{% for p in passportList %}

<li><a href="{{ path("diploma_baget_passport", {'id':p.id}) }}">{{ p }}</a></li>

{% endfor %}

</ul>

</div>

</section>

<section class="mod lt-nav-container lt-nav-container-links">

</section>

</section>

</div>

<div class="col-13 last ">

<h1>Профиль, паспарту, готовые рамы</h1>

<br>

<div>

<div class="parsys par">

<div class="section cms30r">

<div class="free-html"style="height: 350px">

<div class="content">

<div id="hs_container" class="hs_container">

<div class="hs_area hs_area1">

<img class="hs_visible" src="{{ asset("bundles/diplomabaget/img/newdesign/images/area1/1.jpg") }}" alt=""/>

<imgsrc="{{ asset("bundles/diplomabaget/img/newdesign/images/area1/2.jpg") }}" alt=""/>

<imgsrc="{{ asset("bundles/diplomabaget/img/newdesign/images/area1/3.jpg") }}" alt=""/>

</div>

<div class="hs_area hs_area2">

<img class="hs_visible" src="{{ asset("bundles/diplomabaget/img/newdesign/images/area2/1.jpg") }}" alt=""/>

<imgsrc="{{ asset("bundles/diplomabaget/img/newdesign/images/area2/2.jpg") }}" alt=""/>

<imgsrc="{{ asset("bundles/diplomabaget/img/newdesign/images/area2/3.jpg") }}" alt=""/>

</div>

<div class="hs_area hs_area3">

<img class="hs_visible" src="{{ asset("bundles/diplomabaget/img/newdesign/images/area3/1.jpg") }}" alt=""/>

<imgsrc="{{ asset("bundles/diplomabaget/img/newdesign/images/area3/2.jpg") }}" alt=""/>

<imgsrc="{{ asset("bundles/diplomabaget/img/newdesign/images/area3/3.jpg") }}" alt=""/>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<div class="mod-category-grid" id="category-grid">

</div>

</div>

</div>

</div>

</div>

</div>

<div id="footer-continue">

<aside>

<section class="footer-links">

<div class="parsys par">

<div class="section cms30r">

<div class="free-html">

<section class="cq-seo-links fn_sc_p11 clear">

<div class="cq-seo-list">

<h3>Услуги клиентам</h3>

</div>

<div class="cq-seo-list">

<h3>Помощь</h3>

</div>

<div class="cq-seo-list">

<h3>О компании</h3>

</div>

<div class="cq-seo-list">

<h3>Наши сайты</h3>

</div>

</section>

</div>

</div>

</div>

</section>

</aside>

<footer>

<div class="parsys par">

<div class="section cms30r">

<div class="free-html">

<section class="cq-footer-legal">

<p>Copyright &copy; Sirenabagets - 2013</p>

<address><p class="cq-legal-address">SirenaBagets Registered office 171 .</p></address>

<p>Company registration number 233462 VAT no. GB232457280</p>

</section>

<section class="cq-footer-social fn_sc_e48">

<ul>

<li class="cq-soc-fb"><a target="_blank" href="#" title="Facebook">Facebook</a></li>

<li class="cq-soc-tw"><a target="_blank" href="#">Twitter</a></li>

<li class="cq-soc-yt"><a target="_blank" href="#">YouTube</a></li>

<li class="cq-soc-ggl"><a target="_blank" href="#">Google+</a></li>

<li class="cq-soc-pin"><a target="_blank" href="#">Pinterest</a></li>

</ul>

</section>

</div>

</div>

</div>

</footer>

</div>

</body>

</html>

Размещено на Allbest.ru

...