Содержание:
Введение
Актуальность темы. Электронный магазин — это прикладная система, построенная
с использованием технологии системы электронной торговли. Подобно обычному
магазину, электронный магазин реализует следующие основные функции:
представление товаров (услуг) покупателю, обработку заказов, продажу и
доставку товаров.
Интернет-магазин объединяет элементы прямого маркетинга с образом посещения
традиционного магазина. Отличительной чертой интернет-магазинов по сравнению
с обычной формой торговли является то, что интерактивный магазин может
предложить значительно большее количество товаров и услуг, и обеспечить
потребителей значительно большим объемом информации, необходимым для
принятия решения о покупке. Кроме того, за счет использования компьютерных
технологий возможна персонализация подхода к каждому из клиентов, исходя из
истории его посещений магазина и сделанных ранее покупок.
Аудитория в интернете стремительно растет, а продажи через интернет в крупных
городах достигают до 25%, при этом специалисты подчеркивают тенденцию к
росту продаж именно через интернет. Ежегодно количество интернет-магазинов
увеличивается, так как это действительно прибыльно и удобно для покупателя, не
говоря о экономии бюджета и времени. Интернет-магазин работает круглые сутки
и может продавать определенные товары в автоматическом режиме без участия
продавца. К преимуществам так же можно отнести то, что не надо закупать товар
заранее, а это существенная экономия, на складских помещениях. Нужно лишь
договориться с поставщиками, и в нужный момент, просто выкупить товар,
который у вас закажут.
Цель курсовой работы — создание веб-сайта «Интернет-магазин футбольной
атрибутики».
Объект данной работы — интернет-магазин футбольной атрибутики.
Предмет — разработка Интернет-магазина.
Исходя из данной цели необходимо решить такие задачи:
1) разработка структуры сайта;
2) проектирование сайта;
3) реализация сайта;
4) общие сведения о разрабатываемом веб-интерфейсе;
5) разработка сайта.
Глава 1. Аналитическое исследование
1.1 Описание предметной области
Интернет-магазин футбольной атрибутики – это веб-сайт, позволяющий клиенту
приобрести интересующие его товары с заказом на дом. Веб-сайт должен
предоставлять пользователю информацию о продаваемых товарах, о категориях
товаров, о правилах покупки, контактную информацию Интернет-магазина.
Главная задача веб-сайта – осуществление продажи товаров клиентам.
Пользователь, желающий приобрести тот или иной товар, добавляет его в корзину
товаров, оплачивает заказ безналичным способом с помощью электронных
терминалов.
Данный Интернет-магазин ориентирован на продажу фирменной футбольной
атрибутики. Данный сегмент товаров слабо развит на российском рынке, что
представляет собой хороший плацдарм для создания компании.
Аудитория: молодежь и люди среднего возраста, преимущественно мужского пола.
Портрет ключевого пользователя: мужчина, 18-25 лет, спортсмен, с активной
жизненной позицией, болельщик футбольного клуба, веселый, жизнерадостный,
среднего достатка, возможно студент.
В магазине будут представлены для продажи товары следующих категорий:
— футболки;
— футбольная форма;
— обувь;
— мячи;
— вратарская экипировка;
— верхняя одежда;
— специализированное оборудование;
— фанатская атрибутика;
— прочее.
Предполагается расширение ассортимента за счет эксклюзивных и экзотических
товаров, не представленных в магазинах-конкурентах.
Товары будут разделены на следующие категории:
— одежда, форма;
— обувь;
— мячи;
— аксессуары;
— клубная продукция;
— прочее.
В описании товаров должны присутствовать следующие свойства: название; цена;
производитель; размер; количество, остаток на складе; материал; описание товара.
Прежде чем совершить покупку через веб-сайт, пользователь должен пройти
регистрацию и зайти на сайт со своего созданного профиля. Пользователь может
оформить заказ понравившегося товара, нажав на соответствующую кнопку на
странице данного товара и добавив его в корзину.
На странице с товаром пользователь может ознакомиться с характеристиками
товара, наличием остатка товара на складе, выбрать размер. Пользователь может
видеть наличие товаров на складе. В случае если для оформления заказа товаров
не хватает, пользователь получает уведомление о невозможности оформления
доставки в данный момент.
После выбора всех понравившихся товаров в корзину, пользователь может перейти
к оформлению заказа. Регистрация сделки производится при помощи электронной
платежной системы.
По окончанию оформления заказа, пользователь получает уведомление, на
указанный ранее, электронный адрес.
1.2 Разработка структуры сайта
На основе результатов описания предметной области можно определить
содержание веб-сайта.
Веб-сайт «Интернет-магазин футбольной атрибутики» должен содержать:
— информацию о товарах;
— список категорий товаров;
— информацию об Интернет-магазине;
— меню для регистрации пользователей;
— страница авторизации пользователей на сайте;
— карту сайта;
— инструкцию по работе с сайтом;
— корзину товаров;
— страницу оформления заказа;
— страницу обратной связи;
— контакты.
По результатам выполненных этапов была разработана структура веб-сайта. По
заявлениям различных авторитетных исследователей, существует «теория трех
кликов», повествующая о том, что пользователь должен найти любую информацию
на сайте всего за три клика – максимум на третьей странице сайта. Иначе,
пользователь разочаруется в данном веб-сайте и с большой долей вероятности
покинет данный Интернет-ресурс.
Следовательно, структуру веб-сайта необходимо разработать таким образом,
чтобы выполнялось приведенное выше требование. Разработанная структура вебсайта Интернет-магазина приведена рисунке 1.
Image not found or type unknown
Рисунок 1 – Структура сайта
1.3 Анализ технологий
Для создания веб-сайтов используется ряд технологий. Для создания внешнего
интерфейса веб-сайта применяется язык гипертекстовой разметки HTML. Для
создания дизайна страниц веб-сайта, используются таблицы каскадных стилей
CSS. Для осуществления интерактивности во взаимодействии веб-сайта с
пользователем, применяется язык программирования JavaScript.
HTML 5.
HTML5 — язык для структурирования и представления содержимого всемирной
паутины. Это пятая версия HTML, последняя (четвёртая) версия которого была
стандартизирована в 1997 году. По состоянию на май 2014 года, HTML5 ещё
находится в разработке, но, фактически, является рабочим стандартом. Цель
разработки HTML5 — улучшение уровня поддержки мультимедиа-технологий,
сохраняя при этом удобочитаемость кода для человека и простоту анализа для
парсеров.
Во всемирной паутине долгое время использовались стандарты HTML 4.01 и XHTML
1.1, и веб-страницы на практике оказывались свёрстаны с использованием смеси
особенностей, представленных различными спецификациями, включая
спецификации программных продуктов, например, веб-браузеров, а также
сложившихся общеупотребительных приёмов. HTML5 был создан, как единый язык
разметки, который мог бы сочетать синтаксические нормы HTML и XHTML. Он
расширяет, улучшает и рационализирует разметку документов, а также добавляет
единое API для сложных веб-приложений. В HTML5 реализовано множество новых
синтаксических особенностей. Например, элементы <video>, <audio> и <canvas>,
а также возможность использования SVG и математических формул. Эти новшества
разработаны для упрощения создания и управления графическими и
мультимедийными объектами в сети, без необходимости использования сторонних
API. Другие новые элементы, такие как <section>, <article>, <header> и <nav>,
разработаны для того, чтобы обогащать семантическое содержимое документа
(страницы). Новые атрибуты были введены с той же целью, хотя ряд элементов и
атрибутов был удален. Некоторые элементы, например, <a>, <menu> и <cite>,
были изменены, переопределены или стандартизированы. API и DOM являются
фундаментальными частями спецификации HTML5. HTML5 также определяет
некоторые особенности обработки ошибок вёрстки, поэтому синтаксические
ошибки должны рассматриваться одинаково всеми совместимыми браузерами.
CSS3.
CSS3 — активно разрабатываемая спецификация CSS. Представляет собой
формальный язык, реализованный с помощью языка разметки. Самая масштабная
редакция по сравнению с CSS1, CSS2 и CSS2.1. Главной особенностью CSS3
является возможность создавать анимированные элементы без использования JS,
поддержка линейных и радиальных градиентов, теней, сглаживания и многое
другое. Преимущественно используется как средство описания и оформления
внешнего вида веб-страниц, написанных с помощью языков разметки HTML и
XHTML, но может также применяться к любым XML-документам, например, к SVG
или XUL.
JavaScript.
JavaScript — прототипно-ориентированный сценарный язык программирования.
Является диалектом языка ECMAScript. JavaScript обычно используется как
встраиваемый язык для программного доступа к объектам приложений. Наиболее
широкое применение находит в браузерах как язык сценариев для придания
интерактивности веб-страницам.
Основные архитектурные черты: динамическая типизация, слабая типизация,
автоматическое управление памятью, прототипное программирование, функции
как объекты первого класса.
На JavaScript оказали влияние многие языки, при разработке была цель сделать
язык похожим на Java, но при этом лёгким для использования непрограммистами.
Языком JavaScript не владеет какая-либо компания или организация, что отличает
его от ряда языков программирования, используемых в веб-разработке.
Глава 2. Проектирование
2.1 Общие положения
Наименование продукта: веб-сайт «Интернет-магазин футбольной атрибутики».
Веб-сайт «Интернет-магазин футбольной атрибутики» предназначен для
осуществления взаимодействия клиентов Интернет-магазина в базой данных
Интернет-магазина. При помощи данного веб-сайта, пользователи могут
приобретать различные товары футбольной тематики.
Состав работ по созданию системы:
— проектирование структуры веб-сайта;
— создание дизайна;
— верстка веб-сайта.
2.2 Требования к функциональным
характеристикам
Проектируемый сайт должен обеспечивать вывод информации из базы данных,
такой, как: информация о товарах; категории товаров; корзина товаров
пользователя; информация о пользователе; информация о сайте; история заказов
пользователя.
Веб-сайт должен позволять пользователю оформить заказ, предварительно выбрав
желаемые товары, наполняя, таким образом, корзину товаров, а также перейти к
странице оплаты заказа при помощи популярных электронных терминалов.
Сайт должен предоставлять возможность пользователям создавать и изменять
записи в базе данных о своей учетной записи.
2.3 Требования к оформлению страниц
Веб-сайт должен быть выполнен в цветах, отражающих футбольную
направленность Интернет-магазина. Приветствуются темный текст на белом фоне,
повышающий удобочитаемость материала, представленного на веб-страницах.
В верхней части сайта должно располагаться: логотип Интернет-магазина;
контактная информация; форма поиска товаров; ссылки на социальные сети;
корзина товаров; меню сайта; меню категорий.
В нижней части страниц должно присутствовать меню быстрого доступа, а также
копирайт.
Содержимое страниц должно быть поделено на логические группы. Интерфейс
должен быть интуитивно понятен пользователю.
2.4 Требования к верстке страниц
Верстка должна быть валидной, проходить валидацию на веб-ресурсе
www.validator.w3.org. Верстка должна быть кроссбраузерной. Содержимое вебстраниц должно одинаково отображаться в популярных браузерах, таких как:
Google Chrome;
Mozilla Firefox;
Internet Explorer (вплоть до версии 8.0);
Opera;
Safari;
Яндекс.Браузер.
На веб-сайте предполагается наличие одной языковой версии – русской.
2.5 Группы пользователей
Работу с веб-сайтом должны осуществлять следующие группы пользователей:
пользователи (клиенты); администраторы; модераторы.
2.6 Технико-экономические показатели
Эффективность внедрения проекта оценивается, прежде всего, по количеству
оформленных заказов клиентами с помощью веб-сайта.
2.7 Стадии и этапы разработки
В таблице 1 приведены основные этапы разработки проекта.
Таблица 1 – Основные этапы разработки веб-сайта
№ Название этапа
1
2
Срок
Разработка технического
15.03.14
задания
03.05.14
Разработка интерфейса
04.05.14
пользователя
21.05.14
%
выполнения
15%
40%
Отчетность
Техническое задание
Разработанный
интерфейс
22.05.14
3 Написание исходного кода
80%
Исходный код
26.05.14
27.05.14
4 Тестирование и отладка сайта
5 Внедрение сайта
95%
Готовая верстка веб-
28.05.14
сайта
29.05.14 100%
Реализованный проект
2.8 Порядок контроля и приемки
Контроль выполнения и приемка работы осуществляется руководителем проекта.
Глава 3. Реализация
3.1 Общие сведения о разрабатываемом вебинтерфейсе
Пользовательский интерфейс веб-сайта представляет собой HTML-верстку дизайна
страниц сайта, с применением каскадных таблиц стилей CSS.
Для интерактивности веб-сайта применяются технологии языка программирования
JavaScript.
На сайте предполагается двенадцати-блочная верстка.
Верстка будет «резиновой» или, говоря иначе, адаптивной под различные
разрешения экранов.
Ограничение ширины страницы будет установлено в пределах от 320px до 1170px.
Разметка для дизайна страниц приведена на рисунке 2.
Рисунок 2 – Разметка для дизайна
3.2 Разработка прототипа
На основе требований к проекту, указанных в техническом задании, был составлен
макет прототипа будущего веб-сайта.
Прототип приведен на рисунке 3.
Рисунок 3 – Прототип веб-сайта
3.3 Разработка дизайна страниц
Дизайн страниц был разработан на основе двенадцати-блочного макета разметки.
Metro style – стиль, на основе которого выполнялся дизайн страниц веб-сайта.
Данный стиль предполагает простоту форм и минимум лишних элементов в
дизайне интерфейса.
Смысловые блоки сайта, например, верхняя часть и нижняя, разделены цветом или
линиями, рамками. Цвета, используемые на сайте: белый, черный, зеленый,
желтый. Данные цвета отлично отражают футбольную направленность веб-сайта.
Остальные цвета, такие как желтый, синий, красный, используемые на сайте,
предают страницам динамичность, что отражает саму суть игры.
Гарнитуры шрифтов, используемые на сайте: Arial; Trebuschet MS.
Данные шрифты удобны для чтения, а также хорошо вписываются в концепцию
Metro стиля.
Элементы веб-сайта имеют большие размеры, что улучшает просмотр и
использование веб-страниц на портативных устройствах, таких как планшеты или
мобильные телефоны.
Дизайн страниц создан с учетом особенностей верстки страниц на HTML и CSS.
На главное странице сайта было необходимо уделить особое внимание
презентации сайта, его проектов, предложений. Для этого на странице был
размещен слайдер, демонстрирующий пользователю все новые эксклюзивные
предложения Интернет-магазина. Все категории товаров, имеющихся в Интернетмагазине, обозначены большими блоками на главной странице, что позволяет
пользователю очень быстро найти необходимый товар. Для поднятия уровня
продаж определенных товаров, некоторые товары приведены на главной странице.
Дизайн главной страницы сайта приведен на рисунке 4.
Рисунок 4 – Дизайн главной страницы сайта
На странице с информацией о товаре необходимо уделить наибольшее внимание
презентации самого товара. Для этого блок о товаре визуально разделен на две
части: изображения товара и информация о товаре.
Дизайн страницы с товаром приведен на рисунке 5.
Рисунок 5 – Дизайн страницы с товаром
На странице категории товара представлен список товаров, относящихся к данной
категории. В правой колонке имеется форма для задания условий поиска товаров
по каталогу. В основной части страницы приведены изображения, названия и цена
товаров, найденных в каталоге по указанным параметрам.
3.4 Разработка сайта
Верстка была выполнена на языке гипертекстовой разметки HTML, с
использованием таблиц каскадных стилей CSS. Для обеспечения
кроссбраузерности веб-сайта, была подключена таблица каскадных стилей
Normalize, сбрасывающая настройки браузеров, установленные разработчиками
значениями по умолчанию.
Для создания адаптивной верстки был применен фраймеворк Twitter Bootstrap 2.3.
Для поддержки решений, написанных на языке JavaScript, была подключена
библиотека jQuery 1.8.1.
В данной работе применяется блоковая, резиновая верстка.
Исходный код верстки главной страницы сайта и стилей сайта приведен в
Приложении 1.
Twitter Bootstrap — свободный набор инструментов для создания сайтов и вебприложений. Включает в себя HTML и CSS шаблоны оформления для типографики,
веб-форм, кнопок, меток, блоков навигации и прочих компонентов вебинтерфейсов, включая JavaScript расширения.
jQuery 1.8.1
jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и
HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM,
обращаться к атрибутам и содержимому элементов DOM, манипулировать ими.
Также библиотека jQuery предоставляет удобный API для работы с AJAX.
Разработка слайдера.
Слайдер, располагающийся на некоторых страницах сайта реализован с помощью
языка программирования JavaScript.
Слайдер выводит поочередно элементы слайдера на веб-страницу. Это действие
достигается путем изменения параметра у элемента со значения «none» свойства
display на значение «block». Отображение блоков происходит поочередно, через
определенный промежуток времени, или после нажатия на кнопки «влево» или
«вправо», находящиеся по бокам слайдера.
Анимация перехода на слайдере создана путем изменения положения элементов
на странице. Это достигается при помощи изменения параметра left. Для того,
чтобы элементы не отображались за пределами области слайдера, к блоку
слайдера добавлено свойство «overflow: hidden».
Исходный код слайдера приведен в Приложении 2.
Верстка сайта полностью валидная, что обеспечивает корректное отображение
страниц сайта во всех популярных браузерах.
Проверка на валидность была пройдена на веб-сайте www.w3c.org.
3.5 Тестирование и отладка системы
Для тестирования веб-сайта, страницы сайта были протестированы на всех
популярных браузерах.
В результате проверки, удалось выявить некоторые ошибки.
Браузер Internet Explorer 8.0 не имеет поддержки новых свойств HTML 5 и CSS 3, что
вызвало определенные ошибки в отображении сверстанных страниц в данном
браузере. Так, необходимо заменить html-теги <header> и <footer>, на
поддерживаемый в этой версии браузера <div>. Также, данный браузер не
поддерживает псевдо-классы, в особенности, используемые в работе классы «:firstof-type» и «:nth-child», в связи с этим, необходимо в блоках, использующих свойства
данных псевдо-классов, прописать дополнительные классы.
В браузере Opera возникли проблемы с отображением изображений товара, на
странице товара. Для исправления данной ошибки у изображений были прописаны
максимально разрешенные размеры.
Заключение
В результате проделанной работы был создан веб-сайт «Интернет-магазин
футбольной атрибутики».
Для разработки веб-сайта был проведен анализ предметной области, было
составлено техническое задание, на основании которого был создан дизайн
будущего сайта и сверстаны веб-страницы по разработанному дизайну. Созданный
веб-сайт полностью соответствует требованиям, предъявленных к проекту в
техническом задании.
При создании сайта были использованы самые популярные технологии, такие как
HTML, CSS, JavaScript. Полученный сайт является адаптивным и имеет четкую
логическую структуру, что без особого труда позволит привязать данный веб-сайт
к какой-либо системе управления сайтами, использовать и развивать сайт в
дальнейшем.
Разработанный веб-сайт имеет понятный и простой пользовательский интерфейс,
что обеспечит одобрение сайта со стороны клиентов Интернет-магазина.
Реализованный сайт позволяет отображать информацию о товарах, о категориях
товаров, позволяет клиентам добавлять товары в корзину, оформлять заказ.
Данный веб-сайт создан для русскоговорящей аудитории. Сайт можно
использовать для продаж товаров Интернет-магазина на территории стран СНГ.
Для запуска веб-сайта в сеть Интернет необходимо приобрести домен, хостинг,
систему управления сайтом, если это необходимо.
Веб-сайт «Интернет-магазин футбольной атрибутики» поможет организации,
желающей продавать свои товары через Интернет, расширить свою клиентскую
базу и увеличить прибыль.
Список литературы
1. Бородаев Д. В. Веб-сайт как объект графического дизайна: Монография /
Бородаев Д. В. — Х.: «Септима ЛТД», 2016. — 354 с.
2. Дронов, Владимир Macromedia Dreamweaver 4: разработка Web-сайтов; M.: БХВ
- Москва, 2014. - 608 c.
3. Колисниченко Д.Н. Движок для вашего сайта. CMS Joomla!, Slaed, PHP-Nuke:
учебное пособие / Колисниченко Д.Н. — СПб.: БХВ-Петербург, 2017. - 357 c.
4. Кузнецов М., Симдянов И. PHP. Практика создания Web-сайтов; БХВ-Петербург
- Москва, 2012. - 347 c.
5. Макфарланд Д. Большая книга CSS3: учебное пособие / Макфарланд Д. — СПб.:
Питер, 2014. — 608 с.
6. Магдануров Г.И. ASP.NET MVC Framework: учебное пособие / Магдануров Г.И.,
Юнев В.А. - СПб.: БХВ-Петербург, 2014. - 211 c.
7. Марк Д. Joomla. Программирование: учебное пособие / Марк Д., Луис Л. — М.:
Вильямс, 2017. - 592 с.
8. Наролина Т.С. Технико-экономические обоснование проектов: учеб. пособие /
Т.С. Наролина. – Воронеж: ВГТУ, 2015. – 197 с.
9. Хуторской А. В., Орешко А. П. Технология создания сайтов. 10-11 классы;
Дрофа - Москва, 2014. - 256 c.
10. Юрасов А.В. Электронная коммерция: учебное пособие / Юрасов А.В. — М.:
Дело, 2018. – 482 c.
Приложения
Приложение 1
Исходный код главной страницы
Исходный код файла index.html:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>soccerstore.ru - онлайн-магазин футбольной атрибутики</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery.js"></script>
<!--<script type=" text/javascript" src="js/bootstrap.js"></script>-->
</head>
<body>
<header class="header row-fluid">
<div class="wrap1">
<div class="top_menu">
<ul class="store_menu">
<li class="home active"><a href="#">Главная</a></li>
<li class="mail"><a href="#">Контакты</a></li>
<li class="about_us"><a href="#">О нас</a></li>
</ul>
<ul class="social_menu">
<li class="login"><a href="#">Войти</a></li>
<li class="registration"><a href="#">Регистрация</a></li>
<li class="twitter_button"><a href="#"></a></li>
<li class="facebook_button"><a href="#"></a></li>
<li class="vk_button"><a href="#"></a></li>
</ul>
<div class="clearfix"></div>
</div><!--top menu-->
</div>
<div class="header_area">
<div class="logo">
<a href="#"><img src="img/logo.png" alt=""></a>
</div>
<div class="right_header_block">
<div class="phone">
<div class="nomber">+7(953) 264-55-24</div>
<div class="clearfix"></div>
<div class="datetime">Пон-ПТ с 09.00 до 19.00</div>
<div class="clearfix"></div>
</div>
<div class="cart">
<a href="#">
<span class="icon_cart"></span>
Корзина (Пусто)
</a>
</div>
<div class="search">
<form class="form-search">
<input type="text" class="input-medium search-query">
<button type="submit" class="btn"></button>
</form>
</div>
</div>
<div class="clearfix"></div>
</div><!--header area-->
<div class="main_menu">
<div class="wrap2">
<ul>
<li><a href="#">Одежда</a></li>
<li><a href="#">Обувь</a></li>
<li><a href="#">Мячи</a></li>
<li><a href="#">Аксессуары</a></li>
<li><a href="#">Клубная<br/>продукция</a></li>
<li><a href="#">Прочее</a></li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</header>
<div class="wrap3">
<div class="preview">
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item row-fluid">
<div class="span8 slider_image">
<img src="img/slider_image1.jpg" alt="">
</div>
<div class="span4 slider_about">
<div class="promo">Специальное предложение</div>
<h4>Купи бутсы как у Месси</h4>
<h5>Специально к 1/8 финала Лиги Чемпионов известная всему миру компания
Adidas снабдила Лионеля Месси новыми именными бутсами. Как и прежде, за
основу была взята самая легкая модель бутс adizero f50, которая весит всего 165
грамм и позиционируется как выбор скоростных форвардов, к которым относят и
талантливого аргентинца.</h5>
</div>
</div>
<div class="item">…</div>
<div class="item">…</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev"></a>
<a class="carousel-control right" href="#myCarousel" data-slide="next"></a>
</div>
<div class="categories">
<ul class="row-fluid">
<li class="item_cat item1 span4">
<a href="#">
<img src="img/cat1.jpg" alt="">
<h3>Одежда</h3>
</a>
</li>
<li class="item_cat item2 span4">
<a href="#">
<img src="img/cat2.jpg" alt="">
<h3>Обувь</h3>
</a>
</li>
<li class="item_cat item3 span4">
<a href="#">
<img src="img/cat3.jpg" alt="">
<h3>Мячи</h3>
</a>
</li>
<li class="item_cat item4 span4">
<a href="#">
<img src="img/cat4.jpg" alt="">
<h3>Аксессуары</h3>
</a>
</li>
<li class="item_cat item5 span4">
<a href="#">
<img src="img/cat5.jpg" alt="">
<h3>Клубная продукция</h3>
</a>
</li>
<li class="item_cat item6 span4">
<a href="#">
<img src="img/cat6.jpg" alt="">
<h3>Прочее</h3>
</a>
</li>
</ul>
</div>
</div><!--preview-->
</div>
<div class="container">
<div class="popular_products">
<h4 class="modul">Рекомендуемые товары</h4>
<ul class="row-fluid">
<li class="span3 item_pro">
<a href="#"><img src="img/pro1.jpg" alt=""></a>
<h5><a href="#">Nike Mercurial Victory IV FG Soccer Cleats</a></h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id dui id arcu rhoncus
viverra. Aenean id congue mauris, commodo consectetur dui. </p>
<div class="prize">2299.00</div>
<div class="clearfix"></div>
<div class="add_to_cart"><a href="#">Добавить в корзину</a></div>
</li>
<li class="span3 item_pro">
<a href="#"><img src="img/pro2.jpg" alt=""></a>
<h5><a href="#">Nike Tiempo Legend IV FG Soccer Cleat White Black</a></h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id dui id arcu rhoncus
viverra. Aenean id congue mauris, commodo consectetur dui. </p>
<div class="prize">4999.00</div>
<div class="clearfix"></div>
<div class="add_to_cart"><a href="#">Добавить в корзину</a></div>
</li>
<li class="span3 item_pro">
<a href="#"><img src="img/pro3.jpg" alt=""></a>
<h5><a href="#">Adidas Predator Absolion LZ TRX FG</a></h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id dui id arcu rhoncus
viverra. Aenean id congue mauris, commodo consectetur dui. </p>
<div class="prize">1899.00</div>
<div class="clearfix"></div>
<div class="add_to_cart"><a href="#">Добавить в корзину</a></div>
</li>
<li class="span3 item_pro">
<a href="#"><img src="img/pro4.jpg" alt=""></a>
<h5><a href="#">New Mens Nike Sz 9 M Rio II FG Soccer Cleat</a></h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id dui id arcu rhoncus
viverra. Aenean id congue mauris, commodo consectetur dui. </p>
<div class="prize">699.00</div>
<div class="clearfix"></div>
<div class="add_to_cart"><a href="#">Добавить в корзину</a></div>
</li>
<li class="span3 item_pro item5">
<div class="sale">Распродажа</div>
<a href="#"><img src="img/pro5.jpg" alt=""></a>
<h5><a href="#">adidas F50 adizero, Predator LZ</a></h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id dui id arcu rhoncus
viverra. Aenean id congue mauris, commodo consectetur dui. </p>
<div class="prize">4399.00</div><div class="old_prize">8049.00</div>
<div class="clearfix"></div>
<div class="add_to_cart"><a href="#">Добавить в корзину</a></div>
</li>
<li class="span3 item_pro">
<a href="#"><img src="img/pro6.jpg" alt=""></a>
<h5><a href="#">Mens Nike HyperVenom Phatal FG Soccer Cleats</a></h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id dui id arcu rhoncus
viverra. Aenean id congue mauris, commodo consectetur dui. </p>
<div class="prize">3399.00</div>
<div class="clearfix"></div>
<div class="add_to_cart"><a href="#">Добавить в корзину</a></div>
</li>
<li class="span3 item_pro">
<a href="#"><img src="img/pro7.jpg" alt=""></a>
<h5><a href="#">New Mens Nike Tiempo Natural III FG</a></h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id dui id arcu rhoncus
viverra. Aenean id congue mauris, commodo consectetur dui. </p>
<div class="prize">699.00</div>
<div class="clearfix"></div>
<div class="add_to_cart"><a href="#">Добавить в корзину</a></div>
</li>
<li class="span3 item_pro">
<a href="#"><img src="img/pro8.jpg" alt=""></a>
<h5><a href="#">New Mens Nike Tiempo Natural IV</a></h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id dui id arcu rhoncus
viverra. Aenean id congue mauris, commodo consectetur dui. </p>
<div class="prize">849.00</div>
<div class="clearfix"></div>
<div class="add_to_cart"><a href="#">Добавить в корзину</a></div>
</li>
</ul>
</div>
</div>
<footer>
<div class="footer">
<div class="row-fluid">
<ul class="categories span3">
<li><a href="#">Одежда</a></li>
<li><a href="#">Обувь</a></li>
<li><a href="#">Мячи</a></li>
<li><a href="#">Аксессуары</a></li>
<li><a href="#">Клубная продукция</a></li>
<li><a href="#">Прочее</a></li>
</ul>
<ul class="categories span3">
<li class="bestsell"><a href="#">Лидеры продаж</a></li>
<li class="contacts"><a href="#">Контакты</a></li>
<li class="sitemap"><a href="#">Карта сайта</a></li>
</ul>
</div>
<div class="copyright">
&copy; 2014 Дизайн и разработка — <a href="http://vk.com/bsanchezb">Беляков
Александр</a>
</div>
</div>
</footer>
</body>
</html>
Приложение 2
Исходный код слайдера
магазин сайт код слайдер
Исходный код слайдера на JavaScript:
!function ($) {
"use strict"; // jshint ;_;
var Carousel = function (element, options) {
this.$element = $(element)
this.options = options
this.options.pause == 'hover' && this.$element
.on('mouseenter', $.proxy(this.pause, this))
.on('mouseleave', $.proxy(this.cycle, this))
}
Carousel.prototype = {
cycle: function (e) {
if (!e) this.paused = false
this.options.interval
&& !this.paused
&& (this.interval = setInterval($.proxy(this.next, this), this.options.interval))
return this
}
, to: function (pos) {
var $active = this.$element.find('.item.active')
, children = $active.parent().children()
, activePos = children.index($active)
, that = this
if (pos > (children.length - 1) || pos < 0) return
if (this.sliding) {
return this.$element.one('slid', function () {
that.to(pos)
})
}
if (activePos == pos) {
return this.pause().cycle()
}
return this.slide(pos > activePos ? 'next' : 'prev', $(children[pos]))
}
, pause: function (e) {
if (!e) this.paused = true
if (this.$element.find('.next, .prev').length && $.support.transition.end) {
this.$element.trigger($.support.transition.end)
this.cycle()
}
clearInterval(this.interval)
this.interval = null
return this
}
, next: function () {
if (this.sliding) return
return this.slide('next')
}
, prev: function () {
if (this.sliding) return
return this.slide('prev')
}
, slide: function (type, next) {
var $active = this.$element.find('.item.active')
, $next = next || $active[type]()
, isCycling = this.interval
, direction = type == 'next' ? 'left' : 'right'
, fallback = type == 'next' ? 'first' : 'last'
, that = this
,e
this.sliding = true
isCycling && this.pause()
$next = $next.length ? $next : this.$element.find('.item')[fallback]()
e = $.Event('slide', {
relatedTarget: $next[0]
})
if ($next.hasClass('active')) return
if ($.support.transition && this.$element.hasClass('slide')) {
this.$element.trigger(e)
if (e.isDefaultPrevented()) return
$next.addClass(type)
$next[0].offsetWidth // force reflow
$active.addClass(direction)
$next.addClass(direction)
this.$element.one($.support.transition.end, function () {
$next.removeClass([type, direction].join(' ')).addClass('active')
$active.removeClass(['active', direction].join(' '))
that.sliding = false
setTimeout(function () { that.$element.trigger('slid') }, 0)
})
} else {
this.$element.trigger(e)
if (e.isDefaultPrevented()) return
$active.removeClass('active')
$next.addClass('active')
this.sliding = false
this.$element.trigger('slid')
}
isCycling && this.cycle()
return this
}
}
var old = $.fn.carousel
$.fn.carousel = function (option) {
return this.each(function () {
var $this = $(this)
, data = $this.data('carousel')
, options = $.extend({}, $.fn.carousel.defaults, typeof option == 'object' && option)
, action = typeof option == 'string' ? option : options.slide
if (!data) $this.data('carousel', (data = new Carousel(this, options)))
if (typeof option == 'number') data.to(option)
else if (action) data[action]()
else if (options.interval) data.cycle()
})
}
$.fn.carousel.defaults = {
interval: 5000
, pause: 'hover'
}
$.fn.carousel.Constructor = Carousel
$.fn.carousel.noConflict = function () {
$.fn.carousel = old
return this
}
$(document).on('click.carousel.data-api', '[data-slide]', function (e) {
var $this = $(this), href
, $target = $($this.attr('data-target') || (href = $this.attr('href')) &&
href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
, options = $.extend({}, $target.data(), $this.data())
$target.carousel(options)
e.preventDefault()
})
}(window.jQuery)
