Разработка веб-сайта "Интернет-магазин футбольной атрибутики"

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

[Введите текст]

ВВЕДЕНИЕ

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

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

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

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

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

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

Результатом работы станет веб-сайт «Интернет-магазин футбольной атрибутики». 

1. АНАЛИТИЧЕСКОЕ ИССЛЕДОВАНИЕ

1.1 Описание предметной области

1.1.1 Общая информация

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

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

1.1.2 Специализация

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

Аудитория: молодежь и люди среднего возраста, преимущественно мужского пола.

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

1.1.3 Ассортимент товаров

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

футболки;

футбольная форма;

обувь;

мячи;

вратарская экипировка;

верхняя одежда;

специализированное оборудование;

фанатская атрибутика;

прочее.

Предполагается расширение ассортимента за счет эксклюзивных и экзотических товаров, не представленных в магазинах-конкурентах.

Товары будут разделены на следующие категории:

одежда, форма;

обувь;

мячи;

аксессуары;

клубная продукция;

прочее.

В описании товаров должны присутствовать следующие свойства:

название;

цена;

производитель;

размер;

количество, остаток на складе;

материал;

описание товара.

1.1.4 Описание процесса оформления заказа

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

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

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

Пользователь может видеть наличие товаров на складе. В случае если для оформления заказа товаров не хватает, пользователь получает уведомление о невозможности оформления доставки в данный момент.

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

По окончанию оформления заказа, пользователь получает уведомление, на указанный ранее, электронный адрес.

1.1.5 Опрос потенциальных пользователей

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

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

Основные вопросы, которые были заданы:

Как часто вы покупаете товары в Интернет-магазинах?

Что вы обычно покупаете в Интернет-магазинах?

Какие Интернет-магазины вы обычно используете?

Какую самую дорогую покупку вы делали?

Чем для вас удобны Интернет-магазины?

Не переживаете ли вы за безопасность своих данных в Интернете?

Заказываете ли вы товары через Интернет для своих знакомых?

Ваши пожелания относительно будущего Интернет-магазина.

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

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

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

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

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

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

1.2 Разработка структуры сайта

1.2.1 Общее содержание сайта

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

Веб-сайт «Интернет-магазин футбольной атрибутики» должен содержать:

информацию о товарах;

список категорий товаров;

информацию об Интернет-магазине;

меню для регистрации пользователей;

страница авторизации пользователей на сайте;

карту сайта;

инструкцию по работе с сайтом;

корзину товаров;

страницу оформления заказа;

страницу обратной связи;

контакты.

1.2.2 Структура сайта

По результатам выполненных этапов была разработана структура веб-сайта.

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

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

Рисунок 1 - Структура сайта

1.3 Анализ технологий

1.3.1 Выбор технологий

Для создания веб-сайтов используется ряд технологий. Для создания внешнего интерфейса веб-сайта применяется язык гипертекстовой разметки HTML. Для создания дизайна страниц веб-сайта, используются таблицы каскадных стилей CSS. Для осуществления интерактивности во взаимодействии веб-сайта с пользователем, применяется язык программирования JavaScript.

В последующих пунктах рассмотрим каждую технологию подробнее.



1.3.2 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 также определяет некоторые особенности обработки ошибок вёрстки, поэтому синтаксические ошибки должны рассматриваться одинаково всеми совместимыми браузерами.[1]

1.3.3 CSS3

CSS3 -- активно разрабатываемая спецификация CSS. Представляет собой формальный язык, реализованный с помощью языка разметки. Самая масштабная редакция по сравнению с CSS1, CSS2 и CSS2.1. Главной особенностью CSS3 является возможность создавать анимированные элементы без использования JS, поддержка линейных и радиальных градиентов, теней, сглаживания и многое другое.

Преимущественно используется как средство описания и оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.[2]

1.3.4 JavaScript

JavaScript -- прототипно-ориентированный сценарный язык программирования. Является диалектом языка ECMAScript.

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

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

На JavaScript оказали влияние многие языки, при разработке была цель сделать язык похожим на Java, но при этом лёгким для использования непрограммистами. Языком JavaScript не владеет какая-либо компания или организация, что отличает его от ряда языков программирования, используемых в веб-разработке.[3]

2. ПРОЕКТИРОВАНИЕ

2.1 Общие положения

2.1.1 Наименование продукта

Наименование продукта: веб-сайт «Интернет-магазин футбольной атрибутики».

2.1.2 Назначение продукта

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

2.1.3 Состав и содержание работ по созданию системы

Состав работ по созданию системы:

проектирование структуры веб-сайта;

создание дизайна;

верстка веб-сайта.

2.2 Назначение и цели разработки

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

Задачи, решаемые веб-сайтом:

просмотр клиентами информации о товарах;

поиск товаров по категориям;

поиск товаров по заданным условиям;

добавление товаров в корзину;

оплата пользователем заказа.

2.3 Требования к сайту

2.3.1 Требования к функциональным характеристикам

Проектируемый сайт должен обеспечивать вывод информации из базы данных, такой как:

информация о товарах;

категории товаров;

корзина товаров пользователя;

информация о пользователе;

информация о сайте;

история заказов пользователя.

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

Сайт должен предоставлять возможность пользователям создавать и изменять записи в базе данных о своей учетной записи.

2.3.2 Требования к оформлению страниц

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

В верхней части сайта должно располагаться:

логотип Интернет-магазина;

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

форма поиска товаров;

ссылки на социальные сети;

корзина товаров;

меню сайта;

меню категорий.

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

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

2.3.3 Требования к верстке страниц

Верстка должна быть валидной, проходить валидацию на веб-ресурсе www.validator.w3.org.

Верстка должна быть кроссбраузерной. Содержимое веб-страниц должно одинаково отображаться в популярных браузерах, таких как:

Google Chrome;

Mozilla Firefox;

Internet Explorer (вплоть до версии 8.0);

Opera;

Safari;

Яндекс.Браузер.

2.4 Языковые версии сайта

На веб-сайте предполагается наличие одной языковой версии - русской.

2.5 Группы пользователей

Работу с веб-сайтом должны осуществлять следующие группы пользователей:

пользователи (клиенты);

администраторы;

модераторы.

2.6 Технико-экономические показатели

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

2.7 Стадии и этапы разработки

В таблице 1 приведены основные этапы разработки проекта.

Таблица 1 - Основные этапы разработки веб-сайта

№	Название этапа	Срок	% выполнения	Отчетность
1	Разработка технического задания	15.03.14 03.05.14	15%	Техническое задание
2	Разработка интерфейса пользователя	04.05.14 21.05.14	40%	Разработанный интерфейс
3	Написание исходного кода	22.05.14 26.05.14	80%	Исходный код
4	Тестирование и отладка сайта	27.05.14 28.05.14	95%	Готовая верстка веб-сайта
5	Внедрение сайта	29.05.14	100%	Реализованный проект

2.8 Порядок контроля и приемки

Контроль выполнения и приемка работы осуществляется руководителем проекта.

3. РЕАЛИЗАЦИЯ

3.1 Проектирование интерфейса пользователя

3.1.1 Общие сведения о разрабатываемом веб-интерфейсе

Пользовательский интерфейс веб-сайта представляет собой HTML-верстку дизайна страниц сайта, с применением каскадных таблиц стилей CSS.

Для интерактивности веб-сайта применяются технологии языка программирования JavaScript.

На сайте предполагается двенадцати-блочная верстка.

Верстка будет «резиновой» или, говоря иначе, адаптивной под различные разрешения экранов.

Ограничение ширины страницы будет установлено в пределах от 320px до 1170px.

Разметка для дизайна страниц приведена на рисунке 2.

Рисунок 2 - Разметка для дизайна



3.1.2 Разработка прототипа

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

Прототип приведен на рисунке 3.

Рисунок 3 - Прототип веб-сайта

3.1.3 Разработка дизайна страниц

Дизайн страниц был разработан на основе двенадцати-блочного макета разметки.

Metro style - стиль, на основе которого выполнялся дизайн страниц веб-сайта. Данный стиль предполагает простоту форм и минимум лишних элементов в дизайне интерфейса.

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

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

Гарнитуры шрифтов, используемые на сайте:

Arial;

Trebuschet MS.

Данные шрифты удобны для чтения, а также хорошо вписываются в концепцию Metro стиля.

Элементы веб-сайта имеют большие размеры, что улучшает просмотр и использование веб-страниц на портативных устройствах, таких как планшеты или мобильные телефоны.

Дизайн страниц создан с учетом особенностей верстки страниц на HTML и CSS.

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

Дизайн главной страницы сайта приведен на рисунке 4.

Рисунок 4 - Дизайн главной страницы сайта

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

Дизайн страницы с товаром приведен на рисунке 5.

Рисунок 5 - Дизайн страницы с товаром

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

Дизайн страницы категории товаров приведена на рисунке 6.



Рисунок 6 - Дизайн страницы категории товаров

3.2 Разработка сайта

3.2.1 Верстка

Верстка была выполнена на языке гипертекстовой разметки HTML, с использованием таблиц каскадных стилей CSS.

Для обеспечения кроссбраузерности веб-сайта, была подключена таблица каскадных стилей Normalize, сбрасывающая настройки браузеров, установленные разработчиками значениями по умолчанию.

Для создания адаптивной верстки был применен фраймеворк Twitter Bootstrap 2.3.

Для поддержки решений, написанных на языке JavaScript, была подключена библиотека jQuery 1.8.1.

В данной работе применяется блоковая, резиновая верстка.

Исходный код верстки главной страницы сайта и стилей сайта приведен в Приложении А.

3.2.2 Twitter Bootstrap 2.3

Twitter Bootstrap -- свободный набор инструментов для создания сайтов и веб-приложений. Включает в себя HTML и CSS шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейсов, включая JavaScript расширения.[4]

3.2.3 jQuery 1.8.1

jQuery -- библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API для работы с AJAX.[5]

3.2.4 Разработка слайдера

Слайдер, располагающийся на некоторых страницах сайта реализован с помощью языка программирования JavaScript.

Слайдер выводит поочередно элементы слайдера на веб-страницу. Это действие достигается путем изменения параметра у элемента со значения «none» свойства display на значение «block». Отображение блоков происходит поочередно, через определенный промежуток времени, или после нажатия на кнопки «влево» или «вправо», находящиеся по бокам слайдера.

Анимация перехода на слайдере создана путем изменения положения элементов на странице. Это достигается при помощи изменения параметра left. Для того, чтобы элементы не отображались за пределами области слайдера, к блоку слайдера добавлено свойство «overflow: hidden».

Исходный код слайдера приведен в Приложении Б.

3.2.5 Валидация

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

Проверка на валидность была пройдена на веб-сайте www.w3c.org.

3.3 Тестирование и отладка системы

Для тестирования веб-сайта, страницы сайта были протестированы на всех популярных браузерах.

В результате проверки, удалось выявить некоторые ошибки.

Браузер Internet Explorer 8.0 не имеет поддержки новых свойств HTML 5 и CSS 3, что вызвало определенные ошибки в отображении сверстанных страниц в данном браузере. Так, необходимо заменить html-теги <header> и <footer>, на поддерживаемый в этой версии браузера <div>.

Также, данный браузер не поддерживает псевдо-классы, в особенности используемые в работе классы «:first-of-type» и «:nth-child», в связи с этим, необходимо в блоках, использующих свойства данных псевдо-классов, прописать дополнительные классы.

В браузере Opera возникли проблемы с отображением изображений товара, на странице товара. Для исправления данной ошибки у изображений были прописаны максимально разрешенные размеры.

На этапе тестирования других ошибок выявлено не было.

ЗАКЛЮЧЕНИЕ

В результате проделанной работы был создан веб-сайт «Интернет-магазин футбольной атрибутики».

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

При создании сайта были использованы самые популярные технологии, такие как HTML, CSS, JavaScript. Полученный сайт является адаптивным и имеет четкую логическую структуру, что без особого труда позволит привязать данный веб-сайт к какой-либо системе управления сайтами, использовать и развивать сайт в дальнейшем.

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

Данный веб-сайт создан для русскоговорящей аудитории. Сайт можно использовать для продаж товаров Интернет-магазина на территории стран СНГ.

Для запуска веб-сайта в сеть Интернет необходимо приобрести домен, хостинг, систему управления сайтом, если это необходимо.

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

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

1. w3school [Электронный ресурс]: w3c - Интернет-сайт - Режим доступа: http://www.w3schools.com/html/html5_intro.asp - HTML 5 Introduction

2. w3school [Электронный ресурс]: w3c - Интернет-сайт - Режим доступа: http://www.w3schools.com/css/css3_intro.asp - CSS 3 Introduction

3. The JavaScript Source [Электронный ресурс]: Developer JavaScript - Интернет-сайт - Режим доступа: http://www.javascriptsource.com/ - JavaScriptSource.com - Free JavaScripts, Tutorials, Example Code, Reference, Resources, And Help

4. Bootstrap.ru [Электронный ресурс]: Twitter Bootstrap - Интернет-сайт - Режим доступа: http://bootstrap-ru.com/index.php - Twitter Bootstrap: на Русском, Примеры, Уроки, Документация, Генератор, Дизайн, CSS, HTML, JavaScript

5. jQuery [Электронный ресурс]: The jQuery Foundation - Интернет-сайт - Режим доступа: http://jquery.com/ - jQuery



ПРИЛОЖЕНИЕ А

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

Исходный код файла 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>



ПРИЛОЖЕНИЕ Б

Исходный код слайдера

магазин сайт код слайдер

Исходный код слайдера на 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);

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