Что нужно знать чтобы сделать. Что нужно, чтобы создать тос

20.07.2020

Немного теории

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

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

Ваше желание. Без комментариев.

Знания. Чем больше возможностей вы хотите получить, тем больше нужно знаний.

JavaScript. Быстрый старт

Деньги. Соответственно, то же самое. Чем круче вы планируете проект, тем больше на него надо денег. Тестовый ресурс можно создать и бесплатно.

Ну и все, что касается самого сайта и его работы: домен, место в сети, движок и т.д.

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

Самые простые способы

Итак, есть такие гиганты-платформы, как: Blogger.com, livejournal, wordpress.com и многие другие. На таких платформах есть возможность бесплатного создания своего блога. То есть вы получаете даром место в сети, где будет размещаться ваш сайт. То же самое с доменом, только он будет третьего уровня, а не второго. То есть с приставками.blogger.com, .wordpress.com. Понятно, что нормальный домен вам за бесплатно никто не даст.

Рис. 1. Выбор темы для создания блога на площадке wordpress

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

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

Более сложный способ

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

Выбор домена (имя сайта)

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Рис. 2. Стоимость регистрации домена в разных зонах

Домен можно зарегистрировать у любого регистратора. Самые популярные: reg.ru, 2domains.ru. Какую доменную зону выбирать? Прежде всего, это зависит от того, людей из какой страны вы преимущественно хотите видеть на сайте. Чаще всего подойдет зона.ru, к тому же, домены в этой зоне стоят дешевле всего.

Допустим, вы преподаватель и создаете сайт для привлечения своих потенциальных клиентов (учеников). Вы живете в Украине и, возможно, вам нужны люди именно из этой страны. Очевидно, что в таком случае лучше зарегистрироваться в зоне.ua. Также и с.by, .kz – беларусские и казахстанские сайты.

Домен в зоне.com означает коммерческую организацию. Если вам нужны только посетители из какого-то определенного города, то можно регистрироваться в еще более узких зонах, подробнее вы можете узнать на сайтах регистраторов. Регистрация на год обычно стоит 100-1000 рублей.

Покупка места в сети, где будет храниться сайт

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

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

Тарифы можно разделить на: бесплатные (тестовый период, минимум возможностей), платные, vip-тарифы, vps, vds, выделенные сервера. Самый последний вариант самый крутой – вы получаете в свое распоряжение настоящий удаленный компьютер! Это стоит 2000-20000 рублей в месяц и подходит для очень серьезных и раскрученных сайтов. VPS/VDS это практически тоже, только вы получаете не весь компьютер целиком, а лишь часть его места и ресурсов. Естественно, вы платите намного меньше. Это оптимальный вариант для всех веб-мастеров, которые заботятся о своих проектах.

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

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

Установка движка или создание веб-страниц без него

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

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

Соответственно, если вы не обладаете знаниями и не можете сами создать такой шаблон, вам придется выбирать: либо пользоваться бесплатными вариантами, либо заплатить специалистам за разработку шаблона. Обычно это стоит от 10 тысяч рублей.

На самом деле вы можете заказать все под ключ. За вас зарегистрируют домен, купят место, все установят настроят, создадут уникальный дизайн и т.д. Все, что захотите. Если у вас имеются средства, чтобы все это оплатить, то пожалуйста. Это обойдется вам от 20-30 тысяч рублей до многих миллионов. Я же говорил вам, что, например, порталы создаются в течение нескольких месяцев?

Итог

Итак, что нужно для создания сайта с нуля? Знания и деньги. А если отвечать с технической точки зрения, то: домен, хостинг, движок, база данных и многое другое. Например, если все делать самому, то еще вам нужны будут знания таких языков, как HTML, CSS, PHP и какого-нибудь движка.

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Что лучше выбрать для самостоятельного создания сайта – конструктор или CMS? Ответ однозначный: только конструктор сайтов . Почему? Всё просто: раз вам нужен совет такого рода, значит, опыта разработки либо нет, либо его меньше, чем необходимо для решения вашей задачи. Танцы с бубном вокруг установки CMS, поиска хостинга отнимут много времени и средств – при этом желаемого результата не получите. Скорее всего, вам нужно разово создать один сайт для себя - небольшую визитку под бизнес, площадку для предоставление услуг, портфолио или, возможно, блог, небольшой магазин на несколько десятков или сотен товаров. Конструкторы помогают решать такие задачи наиболее рациональным способом . Что по деньгам, что по вложениям времени, труда и получения обратной выгоды.

Ниже показаны ТОП-3 лучших конструкторов сайтов А-класса. Все они хорошо сочетаются с неопытностью новичков, помогают достигать результата без стартовых знаний HTML и программирования. Каждый из них функционально продвинут на фоне аналогов. Можно смело использовать, осталось лишь определиться, какой из них конкретно выбрать.

1.1 Создание сайта в uKit → детальный обзор Лучший выбор!

1.2 Создание сайта в Wix → детальный обзор

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

Если бы не стоимость платных тарифов, Wix был бы идеальным решением для всей аудитории начинающих пользователей. Но, увы, за эти деньги многие предпочтут что-нибудь более практичное. Wix - это конструктор вау-эффектов. Он приятен, ярок, дружелюбен, но дорог по меркам конкурентов. Средний из тарифов «Combo» затянет на $99/год. Есть ещё 2 более дорогих.

Wix предлагает пять премиум-планов:

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

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

1.3 Создание сайта в uCoz → детальный обзор

Вся мощь uCoz скрыта в солидном наборе модулей и возможности редактирования исходного кода страниц (html, css, php, js). Настроек очень много, но большинству новичков полезными/понятными окажутся не больше трети. Остальное - на вырост. Набор модулей можно определять самостоятельно.

Пользователи, которые ищут где создать интернет-магазин, порадуются громче всех. На этом поприще uCoz всемогущ, благодаря модулю «Интернет-магазин» (так называемый uShop). Из необходимого есть даже синхронизация с бухгалтерскими продуктами компании 1С. Импорт из CSV и YML позволит экспортировать товары из файла или парсить с AliExpress/Яндекс.Маркет. Это позволит быстро наполнить свои и развернуть партнёрские магазины с указанных площадок. Благодаря субагентам можно сделать настоящий супермаркет, в котором другие продавцы будут продавать свой товар, а владелец магазина будет получать с них процент.

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

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

Подключение платного тарифа сможет упростить жизнь. В первую очередь, исчезновением рекламного баннера системы (реклама отображается только на сайтах, созданных на бесплатной основе ). Статус премиум-пользователя даст по-максимуму использовать дополнительные возможности uCoz без ограничений. Программа лояльности позволит при создании нового сайта заполучить любой тариф со скидкой 50% в течении первых 48 часов. Плюс можно бесплатно получить в подарок домен и премиум-шаблон на выбор (при подписке на год начиная с «Оптимального»).

В uCoz доступно пять пакетов услуг:

Веб-сервис uCoz одинаково хорошо подходит новичкам, профи и веб-студиям. Большой выбор бесплатных и профессиональных премиум-шаблонов, универсальный функционал, миллион дополнительных функций, удобство админки и низкая стоимость (либо полное отсутствие таковой на Free-тарифе). После его использования большинство движков покажутся тусклыми, ограниченными. Начните путь с Юкоз и остальные инструменты в будущем вам уже не понадобятся. Сможете решать любые задачи, не выходя за его пределы. Движок на все случаи жизни.

2. Заказать «под ключ» или сделать самостоятельно?

Заказать создание сайта «под ключ» есть смысл компаниям, то есть юридическим лицам . Это тот случай, когда руководству нужно получить гарантии результата и материально ответственных за решение задачи. Всё на бумагах, в договорах, сроках. Выделены средства, найден исполнитель - сторонний специалист либо веб-студия. Это правильный вариант, особенно если планируется масштабный и дорогостоящий проект. Если что-то пойдёт не так, можно будет найти концы и потребовать исправления ситуации либо компенсации ущерба. Также сразу желательно оговаривать условия администрирования сайта после сдачи - кто этим будет заниматься, размер оплаты услуг, что входит в понятие дальнейшего обслуживания.

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

Просто получить сайт под заказ втридорога - это не выход. Что потом с ним делать – кто и как будет его обслуживать? Всё равно владельцу самостоятельно придётся разбираться в тонкостях его администрирования и продвижения. Не проще ли сразу выкинуть из головы попытки выехать на чужих навыках и поработать своими силами? Если проект несложный (сайт-визитка, портфолио, блог, корпоративный сайт, лендинг, форум), останетесь в выигрыше, в любом случае.

3. Два способа создать сайт: CMS+хостинг или Конструктор

Сайты делаются на CMS либо в конструкторах сайтов . Ещё есть самописные и построенные на фреймворках «движки», но, это совсем не подходящие варианты, они заведут в тёмный лес, не стоит брать их в расчёт.

На чем может быть создан ваш сайт:

CMS

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

Для использования CMS нужен хостинг (сервер на котором установится «движок» и где потом будут хранится все файлы сайта). Поэтому необходимо быть грамотным пользователем ПК. Уверенное обращение с компьютером, понимание софта в широком смысле – базовая необходимость, которая при наличии упорства позволит новичку создать сайт в такого рода программе. Все технические нюансы, лежат на плечах самого пользователя.

Конструктор сайтов

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

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

Оба варианта имеют свои плюсы и минусы в зависимости от точки зрения оценивающего их человека. Отметим лишь, что CMS как класс инструментов для создания сайтов появились значительно раньше облачных конструкторов. Последние стали результатом эволюции и адаптации сложных систем под нужды массового пользователя. Со временем сайтбилдеры обзавелись интуитивным интерфейсом и визуальным редактором (WYSIWYG — «What You See Is What You Get» - «что видишь, то и получишь»). Лучшие из них уже работают на базе ИИ (искусственного интеллекта) и по возможностям превосходят некоторые CMS.

3.1 Особенности создания сайта на CMS

Создание сайта на базе CMS требует аренды хостинга - удалённого сервера, на котором будут лежать файлы сайта. Как правило, панели управления хостингом дают возможность в автоматическом режиме устанавливать широкий набор бесплатных CMS. Тем не менее, необходимо вручную создать базу данных под новый сайт в разделе phpMyAdmin и подключить её (перед установкой движка указать логин и пароль от нужной б/д).

ТОП-3 самых популярных CMS:

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

Если в планах нет цели научится работать с кодом напрямую, то нет особой необходимости использовать CMS вообще.

Принципиальным отличием CMS от большинства конструкторов сайтов является прямой доступ к файлам движка. Через FTP-клиент или встроенный в панель управления хостингом файловый менеджер. Это даёт возможность править код сайта в свободном режиме: файлы любых модулей, шаблонов, страниц, базовых функций. Конечно, для этого нужно понимание и знания программирования. Навыки работы с HTML/CSS необходимы по умолчанию, но к ним, как правило, добавляются PHP и JavaScript.

Особенности создания сайта в CMS:

  • Потребуется покупка надежного, быстрого хостинга и домена.
  • Как правило, в комплекте с движком идёт несколько базовых шаблонов, хотя бывают и исключения вроде WordPress, в котором встроенный магазин на тысячи бесплатных шаблонов. Шаблоны можно покупать у разработчиков системы, веб-студий или фрилансеров. Ассортимент у разных систем отличается, нужно гуглить.
  • Многие вещи, особенно связанные с редактированием дизайна, принято делать через код. В некоторых системах плагины тоже устанавливаются напрямую через FTP путём копирования файлов (например, в DLE), а не через инсталлятор панели управления (как в Joomla или WordPress).
  • Стоит выбирать специализированные CMS под свою задачу. Это даст гарантию наличия нужного функционала (хотя бы базового) из коробки. К примеру, для создания интернет-магазинов стоит использовать только профильные системы (Magento, Bitrix, Opencart, PrestaShop). Избегайте создания сайтов, основной функционал которых будет целиком держаться на плагинах.
  • Если решитесь использовать бесплатно скачанные шаблоны, обязательно проверьте наличие в них чужих скрытых ссылок или вредоносного кода. Методы проверки разные, нужно гуглить для конкретных случаев.
  • Для любой CMS после ознакомления с базовым функционалом нужно выяснить список доступных плагинов, их стоимость и возможности. Наверняка, со временем, что-то из них понадобится, иначе просто не бывает.
  • Создавайте резервные копии (бекапы) сайта перед установкой больших плагинов и после достижения текущей крупной с технической точки зрения цели. Очень рекомендуем скачивать и хранить бекапы на своем компьютере.
  • Любая бесплатная CMS имеет сообщество, форум, официальный сайт или что-то ещё. При использовании платных систем в большинстве случаев можно рассчитывать на официальную техподдержку за деньги.

Об использовании базовых функций особого смысла говорить нет, поскольку их реализация обычно более-менее доступная. Интерфейсы у CMS отличаются значительно, поэтому каких-то общих алгоритмов вроде последовательности действий по созданию страниц, заполнению общих настроек сайта и прочего выделить невозможно. Приведём эпизод в качестве примера особенности: в Joomla перед созданием меню нужно создать и активировать модуль меню, иначе ничего не получится. Также нельзя создать пустое меню, которое не будет иметь привязки к хотя бы одной опубликованной странице. Это частный случай конкретной системы. Таких мелких и покрупнее нюансов хватает у любой CMS. Нужно изучать каждую персонально, чтобы продуктивно с ней работать.

3.2 Особенности создания сайта в конструкторах сайтов

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

ТОП-3 самых популярных конструктора:

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

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

Разные конструкторы имеют между собой довольно много общих черт в алгоритме создания сайтов. Условно такие системы можно поделить на те, что поставляются с WYSIWYG-редактором (визуальный редактор, часто имеет поддержку drag&drop, работает с виджетами), и все остальные. Кстати, вторая категория своими панелями управления очень напоминает CMS, да и по принципам администрирования сайтов мало чем отличается.

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

  • Старт работ почти всегда одинаков: регистрация, выбор шаблона, заполнение общей информации о сайте, вход в панель управления.
  • Хостинг всегда настроен надлежащим образом, защищён, создание баз данных происходит автоматически без участия пользователя.
  • Любой конструктор имеет набор готовых шаблонов, отсортированных по категориям.
  • Любая система имеет несколько платных тарифных планов, разграниченных разницей в предоставляемых возможностях.
  • Примерно у трети сервисов стоимость тарифных планов не является окончательной. Многие системы практикуют акции, промо-коды и прочие способы, позволяющие снизить стоимость тарифных планов вплоть до 80%. Скидки вполне реальные.
  • В большинстве случаев шаблоны поставляются с демо-контентом, что служит наглядным примером и помогает лучше понять, как можно удачным образом оформить сайт.
  • Большинство систем позволят построить сайт совсем без кодинга, даже если поддерживают возможность правки кода шаблонов, модулей и прочего.
  • Всегда есть встроенная FAQ и техподдержка, а вот реализация может быть разной: живой чат, форум, база знаний, форма обратной связи, система тикетов.
  • Все конструкторы позволяют подключать аналитику от поисковых систем, свой домен и работать с SEO-настройками.
  • 99% конструкторов сайтов имеют пробный период или бесплатный тарифный план. Их легко тестировать, достаточно зарегистрироваться.
  • Возможности конструкторов постоянно расширяются, обновляются, внедряются актуальные новинки веб-индустрии. Которые, в итоге, преподносятся пользователю на блюдечке.

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

4. FAQ – Часто задаваемые вопросы

1. Сколько времени нужно для создания сайта? За 5-10 минут реально сделать?

Смотря о каком сайте идёт речь. Если мы говорим о готовой структуре, скажем, визитки, но не заполненной контентом (тексты, таблицы, изображения), то да – за 10 минут при помощи конструктора с визуальным редактором вроде uKit это вполне возможно сделать. При работе с портфолио можно уложиться и в 3 минуты. Толку от такой спешки мало, тем не менее, это возможно.

За указанное время у вас на руках появится готовый макет сайта. Наполнение контентом может занять от 1 часа до недели – смотря, сколько и чего вы собираетесь публиковать. Но, повторимся, чисто технически создать сайт за 5-10 минут – это реально. И даже несложно. Но только в конструкторе. В CMS, блокноте или при помощи фреймворка это невозможно сделать за столь малое время. Даже в сыром виде. 3. Создание сайта в блокноте. Это что правда возможно?

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

Так что создание сайта в блокноте – архаизм и пережиток прошлого. Так уже никто не делает. Создание простеньких страничек в Блокноте использовалось ранее для обучения HTML на различных курсах. Не более того.

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

Конструкторы сайтов, такие как uKit, Wix и uCoz - это универсальный набор на все случаи жизни, они являются бестселлерами на рынке онлайн-конструкторов. Каждый обладает своими уникальными фишками и возможностями. Задумав создание сайта, имеет смысл ознакомиться, в первую очередь с ними:

uKit – полезен на поприще создания разноплановых сайтов-визиток под бизнес или услуги. Обладает лучшим визуальным редактором на рынке, понятный на интуитивном уровне. Понравится тем, кому нужно без лишних хлопот и больших затрат создать лендинг высокого уровня или привлекательный магазин. Хорошо подходит для портфолио, промо-страниц и вообще всего, где нужно лаконично и красиво преподнести графические материалы для рекламы чего-либо.
Wix – порадует феерией шаблонов и относительно большими возможностями для платформы с визуальным редактором. Подойдёт для создания красивой визитки или стильного блога. О магазине тоже можно задуматься, но только о небольшом и если не смущает стоимость. Цену легко можно снизить вдвое, подождав ближайшего праздника, – в эти периоды Wix раздаёт хорошие скидки всем желающим.
uCoz – подходит для любых задач. В принципе, визитку на нём сделать не намного сложнее, чем в uKit или Wix. Если не планируется ограничиваться одним-единственным сайтом, тогда нужно сразу начинать с Юкоза. Уйдет чуть больше времени, зато освоится универсальный инструмент, который выручит в любой постановке требований к будущим сайтам. Магазины, блоги, форумы, доски объявлений, порталы…

К каждому конструктору прилагается подробная инструкция как создать сайт в нем, дополнительно в Интернет есть масса уроков что и как делать. У каждой из представленных здесь систем есть своя База знаний (FAQ), где расписано пошаговое создание сайта с нуля. Поставив цель, вы за пару дней чтения статей и просмотра видео на Ютубе обрастёте полной комплектацией необходимых для начала работы в нише знаний. Это избавит от трудностей администрирования. Да и деньги немалые сэкономите.

Сайтостроение от А до Я
Все права защищены

Скопируйте этот код в новый текстовый файл и сохраните его на своем компьютере. Задайте для сохраняемого файла имя index.html . Затем откройте этот файл в любом браузере и посмотрите на результат.

Обратите внимание, что по умолчанию любой веб-сервер пытается выдать браузеру именно страницу с названием index.html . Поэтому в 99% случаев исходный код главной страницы сайта сохраняется в файле под таким названием и это считается хорошим тоном.

Полную версию этого простейшего HTML-сайта вы можете скачать в виде (10,8Mb) . После распаковки архива запускаем html/index.html .

Ключевые этапы создания сайта

Самостоятельное создание сайта с нуля состоит из трех основных этапов:

Давайте разберемся со всеми этими этапами более подробно.

Создание макета сайта

Чаще всего макет (в данном случае под этим словом стоит понимать визуальное оформление ) сайта создается в программах, которые принято называть графическими редакторами. Наиболее популярными являются Adobe Photoshop и CorelDRAW . Мы рекомендуем использовать именно Photoshop , так как он чуть проще в освоении и при этом обладает богатейшими возможностями. Кроме того, именно им пользуются все веб-дизайнеры.

Создаем новый документ в Adobe Photoshop . Задаем ему имя – MySite .

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

Выбираем разрешение 72 пикселя на дюйм и RGB-цвет . Эти установки делаем обязательно, так как именно они отвечают за корректное отображение веб-страницы.

Затем устанавливаем цвет фона F7F7C5 в шестнадцатеричном формате или выбираем его с помощью палитры цветов.

После этого выбираем пункт меню «Просмотр » – «Направляющие » и активируем отображение линеек и направляющих.

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

С помощью инструмента «Текст» , вводим текстовое название будущего сайта, слоган под ним, а также контактный номер телефона справа вверху макета.

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

Затем с помощью инструмента «Формы » создаем прямоугольник с закруглёнными краями (радиус – 8 точек ) и с его помощью обозначаем место под изображение, которое будет располагаться в шапке сайта.

Теперь пришло время вставить изображение в шапку сайта.

С помощью инструмента «Текст » , и шрифта Georgia , входящего в стандартный набор операционной системы Windows , создаем навигационное меню и заголовок главной страницы сайта.

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

Для заголовка в тексте используем черный шрифт. Для навигационного меню – белый.

Перемещая правую границу основного текстового блока, вставляем изображение в текст страницы (справа от текста ).

Используя инструмент «Формы » - «Прямая » , проводим заключительную линию под текстом страницы.

C помощью инструмента «Текст » (шрифт Arial ) размещаем копирайт в подвале страницы (под линией ).

Нарезаем необходимые для вёрстки сайта фрагменты изображений с помощью инструмента «Раскройка » (мы выделили основную картинку в шапке и картинку в тексте страницы ).

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

Для того чтобы сохранить и использовать результаты проделанной работы в виде изображений для последующей вёрстки сайта, переходим в меню «Файл » и выбираем пункт «Сохранить для Веб » . Затем настраиваем качество выходных изображений и сохраняем их.

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

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

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

Верстка сайта

Прежде всего, необходимо создать новый текстовой файл и сохранить его под названием index.html .

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

Она сообщит браузеру, как именно обрабатывать содержимое страницы. Далее следует набор тегов:

«Голова» документа «Тело» документа

Пара тегов … говорит о том, что внутри содержится HTML-код .

Внутри … располагаются теги, которые не отображаются в окне браузера пользователя. Как правило, они начинаются со слова meta, и называются мета-тегами, а вот тег отображается в качестве заголовка окна браузера и анализируется поисковыми системами.

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

) и в виде таблиц (…
).

Что касается формата отображения элементов, то он может быть задан как напрямую, с использованием соответствующих тегов, так и с помощью таблиц стилей CSS . При этом именно второй способ является наиболее предпочтительным, так как он позволяет повторно применять стили компонентов. Таблица стилей задается либо в внутри тега , либо в отдельном файле (чаще всего этот файл имеет имя style.css ), ссылка на который также располагается внутри .

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

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

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

Создание сайта с помощью PHP

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

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

Для создания таких страниц необходимо использовать языки веб-программирования . Среди них наиболее широко распространены PHP, Python и Ruby on Rails для Unix-систем , а для Windows характерна разработка динамического контента с использованием средств .NET .

Это все касается серверной части, а для программирования на клиентской стороне чаще всего используется JavaScript .

В подготовленном нами есть папка php , в которой сохранен файл index.php . Именно он позволяет реализовать три странички нашего тестового сайта с помощью PHP .

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

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

Суть этих действий заключается в том, что мы выносим шапку и подвал сайта в отдельные файлы: header.php и footer.php соответственно. А затем на страницах с текстовым содержанием вставляем их в макет сайта с помощью PHP . Сделать это можно с помощью приведенного ниже кода:

...

Попробуйте запустить в браузере файл php/index.php . Не получилось? Конечно нет. Ведь браузер не знает, что ему делать с командами, из которых состоит PHP-файл (он же PHP-скрипт ).

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

Для отладки веб-приложений и реализации полноценного веб-сервера на компьютерах, работающих под управлением операционной системы Windows , был создан бесплатный пакет Denwer (для вашего удобства он присутствует в подготовленном нами ). Он включает в себя веб-сервер Apache , интерпретаторы таких языков веб-программирования как PHP и Perl, базу данных MySQL , а также средства для работы с электронной почтой.

Установка пакета приложений Denwer не требует каких-либо серьезных усилий. Запускаем установочный файл, выполняем все его требования. Выбираем букву виртуального диска для быстрого доступа к веб-серверу, создаем ярлыки. Вот и все! Denwer готов к работе!

Только что установленный нами веб-сервер запускается кликом по ярлыку Start Denwer (у вас он может называться иначе ). После старта веб-сервера скопируйте в папку home/test1.ru/www/ , расположенную на появившемся в системе виртуальном диске (обычно Z ), содержимое папки php из , с которым мы работаем, кроме файла index.html .

После этого наберите в адресной строке браузера test1.ru . Знакомая картина? А теперь пройдитесь по ссылкам, расположенным сверху страницы. Работает? Отлично!

Создавать сайт с нуля или на конструкторе сайтов?

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

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

В приведенной ниже таблице мы постарались обобщить ключевые преимущества и недостатки сайта с нуля VS конструктора сайтов:

Сравнительная характеристика Сайты, созданные с помощью конструктора Сайты, созданные самостоятельно с нуля
Простота создания Просто Сложно
Скорость создания Очень быстро Долго
Возможность редактирования исходного кода Нет Есть
Возможность продвижения в поисковых системах Возможны нюансы Полная свобода
Гибкость в настройке дизайна и функциональности Ограничена Не ограничена
Возможность перенести на другой хостинг Чаще нет Есть

Какой же способ создания сайта наиболее предпочтителен?

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

Но если вы хотите создать современный и действительно качественный сайт в предельно короткий срок, мы рекомендуем воспользоваться именно !

Полезные программы для начинающих вебмастеров

Мы перечислим несколько полезных программ, которые значительно облегчат и ускорят процесс самостоятельного создания сайта:

Notepad++ - текстовый редактор, позволяющий создавать и редактировать исходный код создаваемого сайта. Отличная замена программе «Блокнот », входящей в состав операционной системы Windows .

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

NetBeans – среда разработки приложений, которая позволяет эффективно работать с такими языками разметки и Веб-программирования, как HTML , CSS , JavaScript и PHP .

Публикация созданного сайта в сети Интернет

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

Что такое «домен» и зачем он нужен

Домен — это имя сайта. Кроме того, под термином «доме н» зачастую понимают адрес вашего сайта в сети «Интернет ».

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

Как видно из приведенного выше примера доменное имя сайта состоит из двух частей:

Также стоит отметить, что существуют домены различных уровней. Разобраться в этом очень просто – достаточно посмотреть на количество разделенных точкой частей адреса сайта. Например:

Доменные зоны могут быть разными. Чаще всего выбор доменной зоны зависит от страны или назначения каждого конкретного сайта.

Наиболее часто используются следующие доменные зоны:

Если большая часть целевой аудитории находится в России, мы рекомендуем регистрировать домен в зоне «.ru ».

Как выбрать домен

При выборе домена для собственного сайта мы рекомендуем руководствоваться следующими принципами:

Где можно купить домен?

Мы рекомендуем пользоваться услугами надежного и проверенного временем регистратора доменных имен – WebNames . Мы используем именно его.

Помимо всего прочего, сайт этого регистратора позволяет прямо в режиме онлайн подобрать имя (домен) для своего сайта. Сделать это довольно просто.

Для этого достаточно ввести в соответствующее поле желаемое имя домена и нажать кнопку «Искать домен ».

Что такое «хостинг»

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

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

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

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

Как выбрать хостинг

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

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

Размещение готового сайта на сервере

Допустим, вы уже создали сайт, купили домен и хостинг. Что делать дальше?

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

  1. Это загрузка содержимого вашего сайта по HTTP-протоколу с помощью панели управления хостингом.
  2. По протоколу FTP с помощью так называемого FTP-клиента .

Именно второй способ является наиболее быстрым. Для этой задачи мы рекомендуем один из лучших бесплатных FTP-клиентов – FileZilla .

После установления связи с FTP-сервером выбранного вами хостинг-провайдера (обычно после оплаты хостинга провайдер передает IP-адрес, логин и пароль входа ) доступное дисковое пространство отобразится в виде логического устройства (как и обычные жесткие диски компьютера ) на одной из двух панелей используемой программы. После этого останется запустить процесс копирования и дождаться его окончания.

Ответы на распространенные вопросы

С чего начать обучение будущему вебмастеру (создателю сайтов)?

Что касается дальнейшего обучения и развития, для создания одностраничных сайтов будет полезно освоить такую программу как Abobe Muse . Если же вы захотите создавать многофункциональные сайты на заказ, обязательно найдите время на освоение CMS Wordpress , ведь именно она сейчас является наиболее популярной и распространенной.

Как найти и выбрать специалистов для создания сайта

Вам нужен сайт, но при этом вы не хотите создавать его самостоятельно? Тогда нужно будет найти действительно хороших и грамотных специалистов. Давайте разберемся, как это сделать. Есть сразу несколько критериев, на которые следует опираться при выборе специалистов для создания сайта. Выделим основные:

2 голоса

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

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

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

Важные качества

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

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

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


Вам я могу предложить курс «WordPress 4. Пример создания блога ». Вы сами научитесь рисовать шаблоны, верстать сайты. Пройти его можно за один вечер от начала и до конца. Вы узнаете все, что нужно знать о ВордПресс.


Все хорошо в этом движке, но есть и свои недостатки. Ничто не идеально. Если вы хотите создать интернет-магазин, то можете о нем забыть. Не все плагины в интернете бесплатные и полезные. К сожалению, тот, что превращает довольно дорогой и не слишком «правильный».

В этом случае я посоветую OpenCard. У Михаила Русакова также есть курс о создании сайта при помощи этой CMS. Называется он «Создание Интернет-магазина на OpenCart 2.0 ». Помимо основных навыков вы получите полезные бонусы: как сэкономить на Яндекс Директ, раскрутить сайт и так далее.


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

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

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