Преподаватель который помогает студентам и школьникам в учёбе.

Разработка сайта интернет-магазина инструментов «instrumstore.netdo.ru»

Содержание:

Введение

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

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

Требования к приложению

Веб-сервис netdo.ru предназначен для конструирования веб-сайтов, в частности, интернет-магазинов на основе гибко настраиваемых шаблонов.

Формат входных данных: Веб-конструктор сайтов интернет магазинов netdo.ru, современный браузер, поддерживающий функцию просмотра кода страницы.

Формат выходных данных: Сайт интернет магазина instrumstore.netdo.ru

Разработка приложения

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

$D:\YandexDisk\Институт\Курсовая\2\Сайт\Scr01.jpg$

Рис. 1. Окно редактирования главной страницы сайта сразу после создания аккаунта.

Редактор веб-сайта интернет магазина (Рис. 1) представлен семью вкладками:

1. Вкладка “Главная”

На этой вкладке производится настройка главной страницы сайта. По умолчанию вверху страницы располагается блок “Шапка” (расположение блоков на данной вкладке можно будет поменять далее, во вкладке “Дизайн”). Тут можно, например, разместить логотип сайта или тематическое изображение, указать электронную почту для связи и телефон, а также любую другую текстовую информацию. При необходимости этот блок можно отключить. В своем сайте в данном блоке я разместил логотип (так же является ссылкой на главную страницу сайта), название компании, рекламный слоган и электронную почту для связи.

Рис. 2. Окно редактирования пункта “Каталог товаров” в блоке “Главное меню”.

Ниже располагается блок “Главное меню”, который отображается на любой странице сайта. По умолчанию имеет четырнадцать пунктов, однако вы вольны отключать отображение любых из них или добавлять свои. Пункты меню поддерживают выпадающие списки. При необходимости этот блок можно отключить. В своем сайте в данном блоке я разместил шесть пунктов меню: “Главная” – ссылка на главную страницу сайта; “Каталог товаров” – выпадающий список с ссылками на различные группы товаров (Рис. 2); “Услуги” – ссылка на страницу с дополнительными услугами компании, такими, как доставка и вызов мастера для монтажа; “Статьи” – ссылка на страницу с различной полезной информацией тематической направленности сайта; “Контакты” – ссылка на страницу с контактной информацией о компании; “Поиск” – ссылка на строку текстового поиска по сайту.

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

Еще ниже идет блок “Товары”. В этом блоке в виде достаточно крупных изображений с наименованием, ценой и кнопкой “” отображаются последние добавленные к продаже товары.

Слева от блока “Товары” располагается блок “Меню”. Он в своем большинстве функционально схож с блоком “Главное меню”, но сюда можно поместить такие элементы, как ссылки на социальные сети и пр., кнопку подписки на рассылку и пр. Однако, я решил отключить этот блок, т.к. посчитал, что дублирующие друг друга ссылки на главной странице моему сайту ни к чему. В следствии этого, чтобы вместо отключенного блока “Меню” не оставалось пустое место, а остальные элементы главной страницы распределились по всему возможному пространству, я изменил шаблон сайта, выбрав такой из предложенных вариантов, в котором отсутствовал данный блок.

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

2. Вкладка “Настройки”

На этой вкладке производятся дополнительные настройки сайта. Вкладка “Настройки” открывает доступ к еще пяти подвкладкам: “Сайт” – здесь можно указать электронную почту, на которую будут ссылаться формы обратной связи и пр., добвить файл sitemap.xml для более быстрой индексации поисковыми системами, добавить иконку сайта, включить оптимизацию сайта под мобильные устройства, а так же полностью отключить сайт. Подвкладка “Аккаунт” – тут производится настройка аккаунта сайта, можно задать электронную почту и логин для входа в редактор сайта, а так же пароль. На подвкладке “Домены” можно приобрести платный домен для сайта. На подвкладке “SEO” можно настроить интеграцию с продуктом SEO (этот пункт доступен так же из вкладки “Модули”). Подвкладка “Партнерская программа” – тут можно отслеживать и пополнять баланс средств, их поступления на счет в связи с привлеченными клиентами по партнерской программе, кроме того, по желанию, можно приобрести некоторые платные услуги для сайта, в основном это увеличение лимита на какой-либо контент сайта (видео, статьи и пр.). Также на вкладке “Настройки”, после всех пяти подвкладок, располагается кнопка удаления аккаунта сайта.

3. Вкладка “Модули”

На этой вкладке производится основные настройки модулей: “Страницы”, “Новости”, “Статьи”, “Магазин”, “Услуги”, “Галерея”, “Видео”, “Документы”, “Отзывы”, “Опросы”, “Контакты”, “Вопрос-ответ”, “Поиск”, “Конструктор форм”, “SEO Эксперт”, “Файловый менеджер”. В большинстве случаев настройка заключается в добавлении контента. Самый необходимый модуль – это модуль “Магазин”, именно в нем производится добавление товаров на сайт, их группировка, прикрепление к ним различных признаков и пр. Содержит в себе восемь подвкладок: “Категории” – здесь добавляются группы для товаров. В своем сайте в данной подвкладке я добавил пять категорий товаров: “Электроинструмент”, “Ручной инструмент”, “Измерительный инструмент”, “Расходные материалы для инструмента” и “Организация хранения инструмента”. Подвкладка “Товары” – здесь добавляются сами товары, устанавливается для них признак группы, изображение, цена, признак акции и многие другие параметры (Рис 3). В своем сайте я для примера добавил по несколько товаров в каждую группу, а те товары, реклама которых располагается на слайдере главной страницы, сделал акционными и установил для них скидку.

Рис. 3. Окно редактирования модуля “Магазин”, подвкладка “Товары”.

Подвкладка “Свойства” – тут можно задать какие-либо уникальные свойства для групп товаров. Подвкладка “Бренды” – здесь добавляется список брендов, которыми торгует магазин, для установки в дальнейшем их как признака для товаров. В своем сайте в данной подвкладке я добавил бренды: “DEKO”, “Kolner”, “Vastar” и “STELS”. Подвкладка “Отзывы” – в этом разделе отображаются все отзывы о товарах, оставленные клиентами. Подвкладка “Заказы” – здесь отображаются все заказы сайта, доступны различные фильтры. В подвкладке “Промо-Коды” можно добавлять промо-коды, при вводе которого в специальное поле оформления заказа, клиент получает скидку или какие-либо иные бонусы. Подвкладка “Настройки” – здесь производятся настройки модуля “Магазин”. Содержит в себе еще три подвкладки: “Отображение” – тут настраивается в основном визуальное отображение товаров, их количество и вид на странице, расположение блока корзины и пр.; “Оформление заказа” – в этой подвкладке настраиваются такие параметры, связанные с оформлением заказов, как: способы оплаты заказов, минимальная сумма заказов, способ доставки заказа, правила магазина (можно сделать обязательное согласие с правилами магазина перед оформлением заказа), а так же сообщение, которое увидит клиент после успешного оформления заказа; “Отзывы” – здесь можно отключить или включить опцию отзывов о товаре, уведомления об новых отзывах на электронную почту и настроить предварительную модерацию отзывов.

4. Вкладка “Виджеты”

На этой вкладке производится настройка и добавление следующих виджетов на сайт: кнопка “Обратный звонок” – позволяет посетителям быстро заказать обратный звонок, кликнув по этой кнопке; “Всплывающее окно” – появляется при первом посещении сайта, в него можно добавить текст с описанием какой-либо акции; “Кнопка “Наверх” – позволяет посетителям быстро вернуться в верхнюю честь сайта; “Онлайн консультант “JivoSite” – незаменимый помощник для увеличения продаж и конверсии сайта без дополнительных расходов на рекламу; “Кнопка “Обратная связь” – позволяет посетителям быстро отправить вам сообщение на e-mail, кликнув по кнопке; блок “Поделиться” – позволяет посетителям размещать ссылку на страницу вашего сайта в социальных сетях или блогах; кнопка “Версия для слабовидящих” – должна обязательно присутствовать на сайте любого госучреждения в РФ; “Онлайн консультант “LiveTex” – позволяет общаться с потенциальными и реальными клиентами в чате, с учетом их потребностей и целей, повышая уровень доверия к компании. В своем сайте я подключил виджет “Кнопка “Наверх” и расположил его в правом нижнем углу.

5. Вкладка “Шоткорды”

На данной вкладке (Рис. 4) можно по желанию добавить на сайт шоткорды (набор простейших функций, создающих микро-коды, которые можно использовать в стандартном редакторе. Например, если добавить на какую-либо страницу сайта шорткод [date], то при просмотре данной страницы на сайте, этот шорткод будет заменен на текущую дату - 17.01.2018 23:14). Большинство дополнений платные, однако есть и бесплатные, такие как: “Дата”, “Подсказка”, “Скриншот сайта”, “Линия”, “Подсветка текста”, “Google Переводчик” и “Ссылка на звонок”.

Рис. 4. Окно выбора шоткордов.

6. Вкладка “Дизайн”

На этой вкладке производится визуальные настройки сайта (Рис. 5). Содержит в себе четыре подвкладки: “Дизайн” – здесь настраевается расположения блоков, рассматриваемых в первой вкладке, здесь же можно выбрать общий шаблон сайта, включающий в себя фоновое изображение, шрифты, расположение блоков сайта и пр. В подвкладка “Настройки дизайна” производится настройка визуального оформления сайта, тут можно задать его размеры и цветовую гамму элементов интерфейса. Подвкладка “Настройки фона” – тут производится настройка фонового изображения. В своем сайте я использовал затемненную текстуру металлического листа с противоскользящими насечками. Также функционал редактора не запрещает использовать не изображение, а просто однотонный фон или градиент. Подвкладка “Свой CSS” дает возможность добавить свой CSS код в код сайта.

Рис. 5. Окно редактирования дизайна сайта.

7. Вкладка “Помощь”

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

Рис. 6. Карта сайта instrumstore.netdo.ru

Заключение

В данном курсовом проекте я описал и наглядно показал создание сайта интернет магазина на основе бесплатного сервиса netdo.ru. Получившийся продукт – сайт интернет магазина инструментов и аксессуаров к ним instrumstore.netdo.ru имеет весь необходимый современному сайту интернет магазина функционал, как со стороны клиента, так и со стороны администратора, который при дальнейшей разработке может быть расширен, как встроенными в редактор шаблонными средствами (бесплатными и платными), так и модификацией кода.

Список литературы

Михаил Русаков – Учебник по основам HTM;
Рейчел Эндрю – CSS. 100 и 1 совет;
Adobe Photoshop CS6. Официальный учебный курс.

Приложение

<!doctype html>

<html>

<head>

</head>

<body>

<div class="unreset"><span style="font-size: 51px; color: #000000; font-family: tahoma,arial,helvetica,sans-serif;"><strong>Instrumstore</strong></span></div>

</div>

<div class="unreset"><span style="font-size: 15px; font-family: tahoma,arial,helvetica,sans-serif; color: #000000;"><strong>интернет-магазин доступного инструмента</strong></span></div>

</div>

<div class="unreset"><span style="font-size: 24px;"><strong>Instrumstore@magaz.ru</strong></span></div>

</div><div class="header-logo" style="left:22px; top:3px; width:110px; height:110px"><a href="http://instrumstore.netdo.ru/"><img src="/template/images/logo-5a283d321001d.png" alt="instrumstore.netdo.ru" /></a></div>

</div>

</header></div>

</section>

<a href="/" target="_self">Главная</a>

</li><li class=" nav-sublist">

<a href="/shop" target="_self">Каталог товаров</a>

<li><a href="http://instrumstore.netdo.ru/shop/34182" target="_blank">Электроинструмент</a></li>

<li><a href="http://instrumstore.netdo.ru/shop/34183" target="_blank">Ручной инструмент</a></li>

<li><a href="http://instrumstore.netdo.ru/shop/34184" target="_blank">Измерительный инструмент</a></li>

<li><a href="http://instrumstore.netdo.ru/shop/34185" target="_blank">Расходные материалы</a></li>

<li><a href="http://instrumstore.netdo.ru/shop/34186" target="_blank">Хранение инструмента</a></li>

</ul>

</div>

</li><li class=" ">

<a href="/service" target="_self">Услуги</a>

</li><li class=" ">

<a href="/article" target="_self">Статьи</a>

</li><li class=" ">

<a href="/contact" target="_self">Контакты</a>

</li><li class=" ">

<a href="/search" target="_self">Поиск</a>

</li> </ul>

</div>

</nav></div>

</section>

</div>

</div></div>

</section>

<h3><a class="invert" href="http://instrumstore.netdo.ru/shop">Товары</a></h3>

</div>

<!--

--><div class="grid-col">

</a>

<li><a href="http://instrumstore.netdo.ru/goods/191631">Ящик для инструмента STELS 90712</a></li>

</span>

</li>

<a data-role="basket_add" data-params='{"id": 191631}' href="http://instrumstore.netdo.ru/goods/191631" class="btn btn-mm icon-basket"> Купить</a>

</li>

</ul>

</div>

</div><!--

--><!--

--><div class="grid-col">

</a>

<li><a href="http://instrumstore.netdo.ru/goods/191633">Шлем сварщика DEKO PRO MZ224</a></li>

</span>

</li>

<a data-role="basket_add" data-params='{"id": 191633}' href="http://instrumstore.netdo.ru/goods/191633" class="btn btn-mm icon-basket"> Купить</a>

</li>

</ul>

</div>

</div><!--

--><!--

--><div class="grid-col">

</a>

<li><a href="http://instrumstore.netdo.ru/goods/191632">Руковицы сварщика DEKO PRO TBKR-BY</a></li>

</span>

</li>

<a data-role="basket_add" data-params='{"id": 191632}' href="http://instrumstore.netdo.ru/goods/191632" class="btn btn-mm icon-basket"> Купить</a>

</li>

</ul>

</div>

</div><!--

--><!--

--><div class="grid-col">

</a>

<li><a href="http://instrumstore.netdo.ru/goods/191628">Инверторный сварочный аппарат DEKO PRO DKA-120</a></li>

</span>

</li>

<a data-role="basket_add" data-params='{"id": 191628}' href="http://instrumstore.netdo.ru/goods/191628" class="btn btn-mm icon-basket"> Купить</a>

</li>

</ul>

</div>

</div><!--

--> </div>

</div></div><div id="b-m-3" class="block b-m b-m-shop"> <div class="block-head">

<h3><a class="invert" href="http://instrumstore.netdo.ru/shop">Каталог товаров</a></h3>

</div>

<!--

--><div class="grid-col">

</div>

<h3 class="reset"><a href="http://instrumstore.netdo.ru/shop/34182"><b>Электроинструмент</b></a></h3>

<li class="color-light">Товаров: 3</li>

</ul>

</div>

</div><!--

--><!--

--><div class="grid-col">

</div>

<h3 class="reset"><a href="http://instrumstore.netdo.ru/shop/34183"><b>Ручной инструмент</b></a></h3>

<li class="color-light">Товаров: 2</li>

</ul>

</div>

</div><!--

--><!--

--><div class="grid-col">

</div>

<h3 class="reset"><a href="http://instrumstore.netdo.ru/shop/34184"><b>Измерительный инструмент</b></a></h3>

<li class="color-light">Товаров: 3</li>

</ul>

</div>

</div><!--

--><!--

--><div class="grid-col">

</div>

<h3 class="reset"><a href="http://instrumstore.netdo.ru/shop/34185"><b>Расходные материалы для инструмента</b></a></h3>

<li class="color-light">Товаров: 3</li>

</ul>

</div>

</div><!--

--><!--

--><div class="grid-col">

</div>

<h3 class="reset"><a href="http://instrumstore.netdo.ru/shop/34186"><b>Организация хранения инструмента</b></a></h3>

<li class="color-light">Товаров: 1</li>

</ul>

</div>

</div><!--

--> </div>

</div></div></div>

</section>

</div>

</section>

</div>

</footer></div>

</section>

</div>

<h3 style="display:inline-block !important; font-size:15px !important; padding-left:30px !important; background:url('http://netdo.ru/static/img/logo.svg') no-repeat left center !important; background-size:25px 17px !important; height:17px !important; line-height:17px !important; text-transform:uppercase !important; margin:0 0 3px 0 !important;">NETDO.RU</h3>

<strong style="display:block !important; font-size:11px !important;">Лучший конструктор сайтов

</strong>

</a>

</div>

$(function() {

var t = $('#gotop');

$(window).scroll(function() {

if ( $(this).scrollTop() > 200 ) {

t.css('opacity', 1);

} else {

t.css('opacity', 0);

}

});

t.click(function() {

$("html, body").animate({scrollTop:0}, 600, 'swing');

return false;

});

</script></div>

<script><!--

document.write('<img src="//' + window.location.host + '/counter' + '?' + 'u=' + encodeURI( document.URL ) + '&' + Math.random() +

'" style="position:absolute; bottom:0; left:0; opacity:0; border:0; width:0; height:0;" />')

//--></script>

</body>

</html>

Приложение 1. Html код главной страницы сайта instrumstore.netdo.ru.