150 баксов

Именно столько у меня было в начале…


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

Как создать простой интернет магазин

Всем привет! Сегодня расскажу как создать простой интернет-магазин. Не просто расскажу, но и покажу. Мы пройдемся с вами по всем пунктам, от А до Я. После изучения материала вы сможете создать интернет-магазин самостоятельно.

Под «простым интернет-магазином» я понимаю landing page — одностраничный сайт для продажи одного типа товаров или какой-то конкретной услуги. В этом случае попросту не нужен функционал корзины, которая присутствует в полноценных больших магазинах. Следовательно, все, что нам нужно — это форма заявки (чтобы клиент мог с нами связаться). Заставить работать форму заявки — самое сложное в создании простого сайта. Но я вам дам уже готовый вариант. Кстати, некоторые обходятся даже без нее. Но лучше, конечно же, с ней.

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

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

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

Работаем над содержанием

Распакуйте скачанный архив. Там есть 5 картинок и 2 файла, которые мы будем редактировать с помощью обычного Блокнота.

Как вы уже наверное догадались, для фона используется файл fone.jpg. А для примеров работ — соотвественно 1-4.jpg. Рекомендуемый размер фонового изображения — от 1200 до 1600 пикс по горизонтали, и от 900 до 1200 пикс по вертикали. Остальных — меньше по горизонтали раза в два. Вес фоновой картинки (как, в принципе, и остальных) — чем меньше, тем быстрее сайт загружается. Люди не любят долгозагружающиеся сайты.

Примеров работ можете больше накидать. Далее расскажу как это сделать.

index.html

Открываем в Блокноте файл index.html. Это, собственно, и есть ваш сайт. Второй файл send.php используется для отправки сообщения на ваш e-mail. Итак, открыли index.html. Давайте расскажу по-порядку, что вы тут увидите и что сможете поменять.

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

meta name="description" — это описание вашей странички. Чаще всего сюда пишут о чем страница, но вы можете написать сюда какой-нибудь рекламный текст. Размер — до 160 символов вместе с пробелами.

Далее. В блоке style находятся настройки отображения различных элементов: цвет, размер и т.д. Вы тоже сможете поиграться с разными значениями. Кстати, чтобы увидеть изменения, достаточно после коррекции сохранить файл и заново открыть (обновить) его в браузере. Сразу увидите, что изменилось. Таким образом постепенно добьетесь такого внешнего вида и содержания страницы, которые вам нравится.

body отвечает в общем за страницу:

  • background-image:url('fone.jpg'); — фон-картинка. Если, кстати, хотите без картинки, но цветной фон, то надо будет написать background:#цвет в шестнадцатеричной системе; например #ff0000 — красный, #00ff00 — зеленый.
  • background-size:cover; отвечает за масштабирование фона, чтобы он заполнял весь экран.
  • background-attachment:fixed; — фиксирует фон, прокручивается только содержимое страницы.
  • color:#fff; — цвет текста.

a — это тег ссылки. Соответственно, color:#ff0; — это желтый цвет, а text-decoration:none; — ссылка изначально не подчеркивается.
a:hover — действие при наведении мышки на ссылку. В данном случае я сделал text-decoration:underline; — чтобы ссылка подчеркивалась.

h1, h2 {color:#ff0;} — описание отображения заголовков, в данном случае, это просто желтый цвет. Заголовки: Плетеные люстры, Технология изготовления, Качество и гарантия и т.п. Можете раздельно указать цвета для h1 и h2.

.zena — это класс стилей всех элементов, помеченных как class="zena". В нашем случае это: «1000» вверху страницы и «подарочную упаковку» внизу. Класс можете содержать самые разные параметры. В моем случае это:

  • font-size:xx-large; — размер текста на 2 порядка больше обычного.
  • font-weight:bold; — жирный шрифт.
  • color:#ff0; — желтый цвет текста.

Ненужное можете убрать. Если хотите видоизменить параметры, то воспользуйтесь поиском — об этих вещах куча информации. Ищите так, к примеру: color css, font-size css и т.д.

.zatemnenie — класс стилей блоков с пометкой class="zatemnenie". На странице видны блоки с затемненным фоном. Вот это как раз оно. Расшифруем:

  • padding:20px; — внутренний отступ текста от края 20 пикс.
  • background:rgba(0,0,0,0.3); — собственно затемнение фона. Первые три нуля — это цвет заливки в системе RGB. В данном случае — это черный. 0.3 — это полупрозрачность, 0 — полностью прозрачный, 9 — непрозрачный вообще.
  • moz-border-radius:5px; webkit-border-radius:5px; khtml-border-radius:5px; border-radius:5px; — закругление углов блока — чтобы топорно не смотрелось. Радиус 5 пикселей. Четыре похожих параметра — это просто чтобы во всех браузерах одинаковый вид имело.

.zatemnenie1 — почти то же самое, но здесь полупрозрачность выше (или ниже) — 0.5 вместо 0.3. Таким образом затемнение получилось темнее (простите за каламбур).

.ramka {border:solid 1px #fff;} описывает рамку вокруг элемента. В нашем случае это затемненные блоки. border может быть разного значения. В данном случае — это сплошная линия толщиной 1 пикс белого цвета.

.ramka1 {border:solid 1px #000;} — то же самое, но линия черного цвета.

Кстати, классы стилей можно объединять, что я и сделал в некоторых случаях. Записывается через пробел: class="zatemnenie ramka". В таких случаях стили друг друга дополняют. Посмотрите демо: белая рамка дополняет затемнение.

Смотрим код далее. Ниже есть конструкция с h1: Плетеные люстры. На странице это самая верхняя надпись желтого цвета, заголовок, название магазина. Меняйте его на свое.

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

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

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

img src="1.jpg" border="0" width="100%" — это картинка. Поясню:

  • src="1.jpg" — название файла.
  • border="0" — без рамки.
  • width="100%" — ширина на всю ширину ячейки.

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

send.php

Теперь давайте посмотрим файл send.php. Там все проще.

Смотрим 10-ю строку:
$address = "andre_korkin@mail.ru"; — здесь ставьте свой e-mail, на который будут приходить заказы.

Смотрим 12-ю строку:
$send = mail ($address,$sub,$mes,"Content-type:text/plain; charset = UTF-8\r\nFrom:mail@vash-domen.ru");
В конструкции From:mail@vash-domen.ru поменяйте vash-domen.ru на ваш домен (домен — это адрес вашего магазина; как его зарегистрировать расскажу дальше).

Сохраните файл. С ним всё. Переходим к регистрации домена для вашего магазина.

Регистрируем домен

Регистраторов доменов сейчас великое множество, но мне нравился MNE.RU за простоту интерфейса и приемлемые цены. Теперь он объединился с REG.RU с сохранением для меня всех выгодных условий. Поэтому рекомендую. Домен в зоне .RU — всего 199 руб.

В общем, переходим на REG.RU

Здесь можете подобрать себе домен с приемлемым названием. Обратите также внимание на множество «плюшек», которые вам дадут бесплатно. Это и хостинг, и SSL-сертификат (в последнее время все стараются им пользоваться), и купон для Google Adwords (это контекстная реклама от Гугла — рекомендую — почему бы бесплатно свой магазин потом не порекламировать?), и много чего еще.

Но я отвлекся от регистрации домена. Ставьте галочку в .RU (можно не ставить, если вам все равно, в какой зоне домен), пишите желаемое название вашего домена в строке и жмите на кнопку ПОДОБРАТЬ. Для нашего примера с плетеными люстрами, написав pletenye-lustry, получим такой результат:

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

Здесь нам нужно отметить галочкой SSL-сертификат (не отказываться же от подарка :-)) и нажать кнопку ДАЛЕЕ. Нас попросят или войти в существующий аккаунт (которого у нас еще нет), или зарегистрироваться. Выбираем регистрацию. Можно авторизоваться с помощью соцсетей, но я лично всегда регистрируюсь через почту. Если через почту, то указываем свой e-mail и жмем ЗАРЕГИСТРИРОВАТЬСЯ.

Вас попросят ввести кучу данных. Рекомендую раз и навсегда сделать все сразу. Небольшая сложность для понимания в самом низу:

Указываем тот же самый или другой e-mail (если есть) и придумываем имя профиля (другими словами, название этой анкеты, с которой вы возможно в будущем будете регистрировать другие домены, и для этого не придется все заново вводить). Нажимаем ДАЛЕЕ.

Теперь надо ввести DNS. Это для связки домен-хостинг.

Если будете заказывать хостинг там же, где и я (вся инфа будет ниже), пишем в NS1: ns1.ps.kz, в NS2: ns2.ps.kz. Если же пока не определилсь, то оставляем как есть. Потом это можно будет изменить. Жмем ДАЛЕЕ и оплачиваем домен любым удобным способом.

После оплаты надо зайти в свой e-mail и проверить почту. От REG.RU должно быть письмо с адресом личного кабинета, логином и паролем. Не потеряйте)). Переходим к хостингу.

Регистрируем хостинг

Хостинг — это, по сути, место, где будет ваш сайт находиться. Есть бесплатные хостинги, есть и платные. Бесплатный хостинг нам не подходят тем, что он будет размещать на нашем сайте свою рекламу. Несерьезно. Лучше найти хороший недорогой вариант. Я пользуюсь услугами компании PS.KZ — самая низкая цена, что я нашел. И техподдержка отзывчатая. Но вы можете поискать себе другого хостера. Личное дело каждого.

Для начала регистрируемся. Ссылка в правом верхнем углу. Рекомендую указывать все правдивые данные.

Выбираем физическое лицо и нажимаем кнопку ПРОДОЛЖИТЬ.

Заполняем все поля и жмем кнопку ЗАРЕГИСТРИРОВАТЬ МЕНЯ. Скорее всего, система опросит подтверждения e-mail. Для этого на почту пришлет письмо с проверочной ссылкой. Перейдите по ней.

На этом регистрация личного кабинета у хостера заканчивается. Можно переходить к регистрации хостинга. Для этого в меню жмем на пункт ХОСТИНГ И СЕРВЕРЫ.

Выбираем Виртуальный хостинг:

Выбираем тариф F-1 — его вам будет более чем достаточно:

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

Период оплаты выбирайте на свое усмотрение. Можете для начала выбрать ежемесячный вариант. Потом можно будет изменить, если потребуется. Жмем кнопку ПРОДОЛЖИТЬ.


Все, жмем на кнопку ЗАВЕРШИТЬ ЗАКАЗ.


Я обычно плачу с Киви-кошелька, но вы можете выбрать любой другой способ. Давайте глянем, что тут есть:

В общем, выбираем, что больше нравится. Все, счет сохранен. Теперь его надо оплатить. Для этого в верхнем меню нажимаем на пункт ЛИЧНЫЙ КАБИНЕТ и выбираем в нем слева пункт МОИ СЧЕТА.

Откроется страница со счетами. В моем случае это 3 неоплаченных счета, в вашем случае будет 1 счет:

Нажимаем на кнопку ОПЛАТИТЬ. В зависимости от выбранного способа оплаты процедуры будут различаться. Поэтому вам придется самим это сделать. Могу сказать только, что на ваш e-mail придет подтверждение создания счета, подтверждение оплаты и письмо с логином и паролем от панели управления сайтом. В моем случае оно выглядит так:

Переходим по ссылке URL-адрес панели управления, вводим логин (Имя пользователя) и пароль. Попадаем в панель управления. На первый взгляд все сложно, но нам для простого сайта достаточно просто закинуть все наши файлы в МЕНЕДЖЕР ФАЙЛОВ:

У меня там куча файлов, но когда только регистрируешь хостинг, там находится всего один файл index.html.

Надо его удалить, т.к. у вас он будет свой. Для этого поставьте галочку слева от него и нажмите на кнопку УДАЛИТЬ.

Корневая папка сайта станет пустой. Теперь нажмите на кнопку ЗАГРУЗИТЬ и выберите все свои файлы сайта на компьютере. Файлы загрузятся.

На этом работа с хостингом закончена. Возвращаемся в панель управления доменом (помните, на ваш e-mail приходило письмо с ссылкой?) и корректируем DNS-записи — чтобы связать домен с хостингом.

В личном кабинете жмем на пункт ДОМЕНЫ.

У меня их куча, у вас должен быть один. Жмем на домен.

Жмем на DNS-серверы.

Изменяем на ps.kz и жмем на кнопку ИЗМЕНИТЬ.

Изменения вступят в силу примерно через сутки. На следующий день смело набирайте адрес в строке браузера — откроется ваш магазин. Советую сразу же проверить отправку сообщений. Если вы нигде не ошиблись, то все должно работать. Сам пользуюсь такой системой. Письмо приходит часто не сразу, в особенности — первое с вашего сайта — почтовая система проверяет его на спам. Соответственно, чаще всего первое письмо попадает в СПАМ. Поэтому проверяйте его. Если оно туда попало, то выделите его и отметьте как НЕ СПАМ. После этого все сообщения с вашего сайта будут приходить быстро и в папку ВХОДЯЩИЕ.

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

Понравилась статья? Расскажи своим друзьям:

• 25.02.2017


Предыдущий пост 

Следующий пост ↠ 

Добавить комментарий

Войти с помощью: