Существует два принципиально разных способа создать сайт. Первый требует затрат на доменное имя и хостинг, базовых знаний работы сервера, основ сайтостроения в виде языка разметки HTML и прочих сопутствующих вещей. Второй способ бесплатен и предъявляет менее критичные требования к создателю сайта — все делается в онлайн режиме на специальных сервисах, называемых конструкторами сайтов. Интернет развивается бурно и таких конструкторов становится все больше и больше. Их список с описаниями сослужит вам добрую службу в том случае, если вы не хотите вкладываться и решили воспользоваться услугами бесплатных сайтостроителей.
При составлении списка были охвачены бесплатные конструкторы сайтов России, Украины и зарубежья. Некоторые из них имеют платные тарифы, но абсолютно все дают возможность бесплатно создать сайт. Есть, конечно, различные ограничения, которые описаны и дадут вам общую картину о каждом конкретном конструкторе предлагаемого списка. Отмечу, что в нем нет конструкторов, предлагающих создание сайта с ограниченным количеством страниц — рано или поздно сайт разрастется и потребуется переход на платную версию.
Количество сайтостроительных сервисов в интернете исчисляется десятками — охватить все довольно тяжело, впрочем, такая цель и не ставилась. Если вы считаете, что какой-то хороший конструктор пропущен, то вам стоит лишь отправить его адрес через форму связи без всякой регистрации, после чего сервис будет добавлен в список. Что ж, пора начинать!
ucoz.ru
Известнейший, один из самых старых и раскрученных сайтостроительных конструкторов рунета. Создан в 2005 году, имеет украинскую версию ucoz.ua. Ucoz предоставляет множество возможностей, на нем можно сделать практически все. Мне приходилось делать парочку бюджетных сайтов на Юкозе и могу сказать, что сделать можно очень многое при полном контроле кода и гибкости: хочешь «резиновый» дизайн — на здоровье, нужно нестандартное решение — садись и пиши, все будет работать. Интерфейс может показаться несколько запутанным, но это, понятно, субъективное мнение и дело привычки. Юкоз предлагает 16 языковых локализаций, более 200 готовых шаблонов, множество готовых виджетов и опцию бесплатного подключения своего домена. Есть FAQ, учебник, блог, форум и контакты в социальных сетях. Система гарантирует 99% аптайма и резервное копирование сайта. Конструктор предлагает также бесплатную опцию создания резервной копии сайта на своем жестком диске — при падении сайта вы сможете восстановить его из сделанной копии. Список адресов для сайта, предоставляемых Юкозом, довольно велик: имя.ucoz.ru (com, net, de, org, ua, lv и др.), имя.clan,su, имя.moy,su, имя.at,ua, имя.do,am и другие. Достоинства. Широкие возможности, полный контроль кода, много готовых решений, шаблонов, огромное количество учебных материалов. Есть возможность бесплатно присоединить свой домен. Мощная поддержка на форуме. Недостатки. Навязчивый рекламный блок, размещенный в правом верхнем углу вашего сайта, снятие которого требует оплаты (для некоторых некоммерческих и образовательных сайтов возможно бесплатное отключение баннера). Создание сайта нельзя назвать очень простым процессом — людям, не владеющими навыками конструирования сайтов, придется затратить некоторое время на обучение. |
a5.ru Российский конструктор сайтов, предлагающий возможность бесплатного создания и размещения своего проекта (тариф «Бесплатно»). Создан в 2011 году. Бесплатность тарифа подразумевает значительные ограничения в сравнении с платными тарифами конструктора. Тем не менее простой сайт сделать получится. Редактора кода нет, взамен предоставляется множество готовых виджетов — меню, кнопки, блоки, обратный звонок, галерея и т. д. Количество страниц сайта не ограничивается, чего не скажешь о дисковом пространстве — на все отводится до 150 мегабайт. В принципе, достаточно много. Редактирование содержимого сайта происходит посредством перетягивания блоков, а редактирование самих блоков — при помощи визуального редактора. Для новичков есть раздел помощи При создании предлагается довольно большой выбор шаблонов, которые можно «заточить» под свои нужды, поменяв картинки. В плане SEO конструктор радует — есть возможность задавать свои мета-тэги. И URL, конечно. Теперь о ложке дегтя. Бесплатный тариф не позволяет присоединить свое доменное имя — адрес сайт будет выглядеть примерно так: 1778314.mya5.ru. Сохранения резервной копии на этом тарифе тоже найти не удалось. И реклама — куда же без нее. Она, правда, ненавязчива — вверху с правой стороны страницы показывается небольшой аккуратный блок, в нижней части полоса. В обеих местах сообщается, что сайт использует возможности сервиса a5.ru. Достоинства. Реально простой и быстрый старт. Большое количество виджетов. Простота редактирования страниц — знания HTML не требуется. Недостатки. Корявое доменное имя при невозможности смены на свое. Нет опции сохранения копии сайта. Небольшие рекламные блоки. |
webstolica.ru
Конструктор на базе известной системы управления сайтом Amiro.CMS, дающий в руки всю мощь этого движка. Проект имеет различные редакции, в том числе и две бесплатные (на момент публикации этого списка), позволяющие сделать полноценный сайт с гибкой структурой и гибким построением отдельно взятой страницы. Выделяемое дисковое пространство для этого — 500 мегабайт. Работа с Вебстолицей начинается очень быстро, равно как и создание сайта, а вот его редактирование и наполнение может вызвать некоторые сложности: Amiro, как и любой мощный конструктор, требует времени на изучение интерфейса, его возможностей и опций. А их у этого конструктора очень много — есть возможность создавать свои шаблоны с разным расположением блоков, редактировать готовые шаблоны, управляющие выводом информации, работать с онлайн файловым менеджером и через протокол ФТП, группировать страницы в каталоги, задавать каждой странице множество свойств, в том числе свои мета-тэги и URL, создавать новые блоки со своим кодом. В качестве готовых решений предоставляется форум, гостевая книга, блог со своим архивом, фотогалереи, файловый архив, регистрация посетителей на сайте, карта сайта, поиск и теги (с облаком тэгов). При редактировании структуры и обслуживании сайта используется центральное меню, при работе со страницами используется визуальный редактор с полным доступом к HTML-коду и подсветкой синтаксиса. Посредством визуального редактора можно вставлять различные предустановленные блоки — последние новости, случайная фотография, анонсы, последние комментарии и т.д. Помимо этого, есть готовые плагины для работы с Trustlink.ru и Sape.ru. Вебстолица позволяет бесплатно присоединять свой домен и в любой момент производить резервное копирование своего сайта, при этом копии хранятся на сервере конструктора. Сервис предоставляет достаточно большое количество документации, есть форум и раздел вопросов-ответов. Реклама публикуется, но она очень незаметна — несколько контекстных ссылок в нижней части сайта. Список URL-адресов выглядит так: имя.web-box.ru, имя.wmsite,su, имя.nsknet,ru. Достоинства. Широкие возможности и гибкость в конструировании структуры сайта и страниц в отдельности, Полный контроль кода. Большое количество учебной документации. Бесплатное использование своего домена и опция создания резервной копии. Неагрессивная, малозаметная реклама. Недостатки. Наличие рекламы (ненавязчивая, но все же есть). Требуется время на изучение движка. |
nethouse.ru Очень неплохой и перспективный российский конструктор, Имеет русскую, украинскую и английскую локализации, а также полностью украинскую версию, расположенную на nethouse.ua. Один из проектов, где рекламы нет вообще и есть бесплатная опция подключения домена — у немногих конструкторов есть такое великолепная комбинация! В плане какой-то особой гибкости в создании сайта говорить не приходится — контроля кода нет, нет и возможности создания своего блока на боковой панели сайта. Впрочем, это можно сказать о большинстве конструкторов, зато среди готовых решений есть фото-галерея, каталог товаров, отзывы и комментарии, поиск, новости, статистика посещений и даже перечень услуг с возможностью оформления заказа — полный набор для создания как сайта-визитки, так и небольшого представительства фирмы с перечнем продукции. Кроме этого, на Nethouse также можно бесплатно создать свой интернет-магазин. Редактирование сайта производится посредством различных меню — ничего нового нет, довольно удобно. Тест редактируется небольшим визуальным редактором, позволяющем загружать картинки и видеоматериалы. Каждая страница имеет свои мета-теги. Свои CSS стили создавать нельзя. Готовых шаблонов маловато, но есть возможность их изменения. Сохранения резервной копии сайта нет — вот уж действительно жалко. Есть живой форум, блог, группа вКонтакте и учебные материалы. Адреса сайтов, предоставляемые Nethouse: имя.nethouse.ru, имя.nethouse.me, имя.nethouse.ua Достоинства. Быстрый старт без специальных знаний. Интуитивно понятное редактирование. Довольно широкий набор готовых решений. Бесплатное присоединение своего домена. Нет рекламы — в нижней части сайта только ссылка и маленький логотип Nethouse. Недостатки. Отсутствие контроля кода. Нет возможности сохранения копии сайта на винчестере. |
qoda.site Достаточно новый (создан в 2017 году) конструктор лендингов, набирающих популярность в последнее время. Конструктор имеет простой интерфейс (сделать сайт-одностраничник сможет даже неопытный пользователь интернета), множество готовых блоков, которые можно видоизменять до неузнаваемости по своему усмотрению. Самым главным отличием от других конструкторов является возможность скачивания готового исходного кода на жесткий диск. Создавать, дорабатывать сайт можно бесплатно, нет никаких ограничений по использованию готовых шаблонов, секций и т.д., нет ограничений по объему и времени. Оплата взимается только за скачивание уже готового сайта. Причем есть два тарифа: 590 р за 3 дня неограниченного скачивания неограниченного количества лендингов и 2490 р за месяц свободного доступа к выгрузке кодов (цены указаны на момент написания обзора). Конструктор может быть неплохим решением для веб-студий и мастеров, которые делают лендинги на заказ. Достоинства. Отсутствие рекламы, возможность выгружать готовый исходный код и размещать его на любом хостинге, множество дизайнерских решений для создания красивого и эффективного лендинга. Недостатки. Необходимость самостоятельно размещать сайт на хостинге, что может стать затруднением для чайников. Платность выгрузки кода. |
setup.ru Список продолжает Setup.ru — еще один представитель рунета, пытающийся занять свою нишу на рынке сайтостроительных сервисов. Сделать это нелегко, поэтому владельцы проекта пытаются привлечь новых членов посредством партнерской программы — на этом деле можно даже немного подзаработать. Setup создан в 2011 году. На базе этого конструктора можно довольно быстро сделать себе сайт — предлагается множество качественных шаблонов, наполнение производится при помощи визуального редактора. Доступа к коду в бесплатной версии нет, как нет возможности создавать свои стили CSS. Расширяемость сайта довольно широка — в качестве новых страниц можно выбрать фото-галерею, обычную страницу, страницу каталога или новостей. В качестве дополнительных готовых расширений предлагаются форма обратной связи, комментарии, поиск по сайту и счетчик лайков. Setup предоставляет возможность использования своего домена бесплатно. Реклама присутствует в виде баннера, но располагается он в боковой панели и посему не столь навязчив, как на Юкозе. Из обучающих материалов проект имеет FAQ и видеоматериалы. Форума нет, но есть живой раздел Вконтакте. Сохранения файлов сайта и его базы данных на жесткий диск нет. Достоинства. Очень быстрый старт. Не требуется специальных знаний. Большое количество шаблонов — более 7000. Реклама ненавязчива, есть возможность бесплатного присоединения своего домена. Недостатки. Отсутствие контроля кода и вытекающие из этого ограничения в гибкости. Нет возможности сохранения образа сайта на винчестер. |
webnode.ru Зарубежный конструктор со штаб-квартирой в Швейцарии. Создан чешскими программистами. Проект имеет разные пакеты (личный-сайт, бизнес-сайт и интернет-магазин), которые в стартовых вариантах бесплатны — деньги берутся за дополнительные услуги, Но даже на стартовых вариантах обеспечивается очень широкие возможности и гибкость в создании как страниц, так и структуры сайта. Webnode имеет множество языковых локалей, в том числе русскую и украинскую. На базе этого конструктора можно бесплатно сделать ресурс с достаточно сложной структурой — есть возможность создания категорий статей, что редко встречается в бесплатных вариантах сайтостроителей. Помимо каталогов есть возможность создания фото-архивов, опросов и новостей. Есть конструктор форм и RSS-каналы,. Есть, что действительно поражает, возможность применения разных шаблонов к разным страницам, создания любительских блоков с возможностью их размещения в разных местах страниц, использование тэгов с последующей генерацией облака тэгов. Каждая страница сайта имеет свои мета-тэги и опцию, позволяющую задать ей свой url-адрес. Есть возможность подтверждения сайта в аккаунте Google Webmaster, вставки кода Google Analytics, социальных сервисов и карт Гугла. При создании сайта автоматически генерируется его карта и по умолчанию есть поиск. Редактирование структуры сайта происходит из логичного общего меню, блоки и текст редактируются визуальным редактором, позволяющим загружать свои графические элементы. Рекламы и контроля кода нет. Увы, нет и возможности сохранения сайта — только в платном варианте. Webnode предоставляет учебные материалы и FAQ, доступное по адресу support.webnode.com. Адрес сайта, сделанного на Webnode, будет таким: имя.webnode.ru. Достоинства. Широчайшие возможности в создании страниц и структуры сайта. Бесплатное присоединение своего доменного имени. Множество различных готовых дополнений. Достаточно понятный для таких возможностей интерфейс. Нет рекламы. Недостатки. Платная услуга создания запасной копии сайта. На освоение интерфейса новичкам может потребоваться определенное время — плата за широкие возможности. |
umi.ru Umi.ru — дочерний проект известного движка для сайта UMI. Конструктор имеет платную и бесплатные версии. Последняя имеет довольно много ограничений, среди которых наиболее важным является отсутствие привязки своего домена. Размер сайта на бесплатной версии конструктора не должен превышать 100 мегабайт. Среди доступных расширений сайта предлагаются фото-галерея, каталог товаров, форма связи и блог — не так уж и мало. Контроля кода нет, редактирование производится в предустановленных блоках шаблона при помощи визуального редактора. Возможности создания своих стилей CSS в бесплатной версии не предусмотрено. Адрес сайта будет выглядеть как имя.umi.ru. Рекламы нет. Опции сохранения копии сайта также нет. Есть партнерская программа. Umi.ru предлагает большое количество шаблонов, которые можно менять, загружая свои картинки — в этом плане все здорово, а вот учебных материалов нет. Для опытных пользователей или вебмастеров проблем не будет, но для начинающих раздел помощи наверняка пригодился бы. Достоинства. Нет рекламы — только ссылка в подвале сайта. Готовые стандартные решения. Недостатки. Отсутствие контроля кода и гибкости в построении страницы. Присоединение собственного домена требует перехода на платный пакет. |
wix.com Достаточно известный зарубежный бесплатный сайтостроительный сервис. Создан в 2006 году. Сайты делаются с использованием стандарта HTML5. Конструктор предлагает множество шаблонов, меню, галерей, шрифтов и дизайнерских решений, которые можно использовать в работе. На wix.com можно очень быстро сделать сайт (в том числе и мобильный) без знания HTML и программирования — все шаги предлагает мастер создания сайта, а его наполнение, включая внедрение мультимедийных элементов и социальных сервисов осуществляется при помощи специального Drag and Drop (перетянул и вставил) редактора. Я не сторонник визуальных редакторов, но вынужден признать, что Wix предложил очень интересный вариант — он очень легок в освоении и для людей, не имеющих навыков создания с сайтов, окажется просто находкой — действительно конструктор. Соответственно, при таком подходе контроля кода уже нет. Wix, к сожалению, имеет платную опцию присоединения собственного домена, зато в бесплатной версии сайта нет рекламы — только небольшая полоса внизу страниц с названием конструктора и ссылкой не него. На сервисе есть обучающие материалы, блог и форум. Достоинства. Очень быстрый старт без специальных знаний. Удобный редактор, множество качественных шаблонов и готовых решений — чат, строитель форм и другие. Недостатки. Отсутствие контроля кода и вытекающее из этого фактора ограничение в гибкости сайта — если захочется сделать шаг в сторону, то это может оказаться проблемой. Присоединение своего домена требует перехода на платный пакет. Некоторые из готовых решений на английском языке. |
jimdo.com Немецкий конструктор сайта, имеющий множество языковых локализаций, в том числе и русскую — с интерфейсом проблем нет, все работает четко. Сервис предлагает несколько тарифных планов, среди которых есть и JimdoFree — бесплатный. Тариф JimdoFree позволяет сделать довольно много и очень быстро. Как и прочие конструкторы, функционал его ограничен, но сделать небольшой корпоративный сайт с блогом можно, в том числе и мобильную версию. При этом начать работать можно практически сразу — регистрация очень быстра. Наполнение сайта происходит через центрального меню и различные контекстные меню, появляющиеся при наведении курсора мыши на редактируемый элемент страницы. Такой подход достаточно гибок, ибо вариантов расположения, отображения элемента, его перемещения и свойств предлагается довольно много. Можно конструировать формы, вставлять различные виды полей. Гибкая система всегда сложнее, чем простая, поэтому на изучение выпадающих меню может потребоваться некоторое время. Есть, конечно, учебные материалы, но их маловато, вернее, нет нужных подробностей. У вебмастера вопросов не возникнет — все понятно, а вот для людей, не разбирающихся в коде, некоторые моменты наверняка будут непонятными. Конструктор предлагает много шаблонов оформления. Полного доступа к коду нет, но есть возможность вставлять свои HTML-элементы в виде кода. Можно редактировать тэг HEAD, создавать свои стили CSS. К сожалению, бесплатный тариф не позволяет привязать свой домен. Нет и сохранения копии сайта, взамен конструктор делает ежедневное общее сохранение. В качестве расширений кроме блога есть галерея, RSS-лента, форма связи и гостевая книга. Достоинства. Довольно широкие возможности редактирования страницы. Встроенная галерея, блог и другие расширения. Нет рекламы, только небольшой блочок Jimdo в подвале сайта. Недостатки. Нет сохранения копии сайта. Нет возможности присоединения своего домена — только на платном тарифе. В бесплатном варианте нет мета-тегов. |
webhoma.ru Webhoma.ru — еще одна российская разработка. Конструктор позволяет бесплатно создать сайт, в который, помимо статей, можно внедрять разделы новостей, слайдеры-фотогалереи, карту Яндекса, поиск по сайту, меню, «хлебные крошки», кнопки социальных сетей. За более сложные проекты и другие расширения (интернет-магазин, каталог товаров, форма обратной связи и пр.) придется доплачивать. Размер сайта на бесплатной версии конструктора не должен превышать 100 мегабайт. Реклама отсутствует — лишь ссылка в правом верхнем углу, на которой сообщается, что сайт использует возможности сервиса. Созданный сайт изначально будет находиться в платном режиме, для перехода в бесплатный нужно зайти в управление услугами и отключить платные модули. Редактирование содержимого происходит посредством перетягивания блоков, а редактирование самих блоков — при помощи визуального редактора. Конструктор позволяет создавать собственные титулы, метаописания и url страниц и разделов. Одной из особенностей конструктора являются временные рамки, ограничивающие работу сайта — после захода в админку он будет работать в течение 15 дней. Таким образом вы будете автоматически продлевать работу своего ресурса и она будет вечной, но если забудете зайти, то через 15 сайт дней будет отключен. Достоинства. Достаточно простой и быстрый старт. В целом простое редактирование страниц — знания HTML не требуется, но в некоторых случаях нужно понять логику работы. Возможность бесплатного присоединения своего домена второго уровня. Отсутствие рекламы — только ссылка. Недостатки. В бесплатной версии нет сохранения и возможно создание только одного сайта. Малое количество шаблонов (на момент написания статьи). Нет полного контроля кода сайта. Наличие ссылки на конструктор. Необходимость периодически заходить в админку сайта для предотвращения его отключения. |
key.ua Украинский бесплатный конструктор сайта, является часть портала online.ua. Проект не навязывает рекламу, имеет русскую и украинскую локализации интерфейса. Конструктор позволяет делать очень гибкие сайты — можно создавать свои блоки, располагать из в нужном порядке и указывать, будет ли блок отображаться на всех страницах или только на одной. Есть контроль HTML кода — можно даже вставлять Javascript. Редактирование сайта происходит перетягиванием блоков, а редактирование самих блоков — при помощи визуального редактора. Конструктор не балует обилием шаблонов и расширений — среди готовых есть только счетчики и форма отправки. Все остальное придется делать самому, для этого и дается полный контроль кода. Опции присоединения своего домена нет, равно как нет и мета-тегов для каждой страницы и опции сохранения копии сайта. Учебных материалов нет, доступ к коду предполагает его знание и понимание совершаемых действий. Форума и блога также нет. Достоинства. Очень гибкие возможности при создании и редактировании страниц сайта. Контроль кода. Нет рекламы. Недостатки. Нет опции присоединения своего домена и учебных материалов. Мало расширений функционала. Нет сообщества и возможности сохранения копии сайта. |
Итак, теперь вы знаете, где можно бесплатно сделать сайт — выбор более чем широк. Завершая обзор, хочется напомнить одно высказывание — бесплатный сыр бывает только в мышеловке. Нет, никто не собирается доказывать, что сайт на конструкторе — это плохо: сотни тысяч сайтов сделаны на различных конструкторах и спокойно работают. Но дело в том, что администрация сайтостроительных сервисов не несет никакой ответственности перед вами — чтобы убедиться в этом достаточно заглянуть в соглашение об использовании. Посему, затевая действительно серьезный проект, стоит подумать о целесообразности использования бесплатных конструкторов, а если уж решили, то, по крайней мере, обязательно стоит купить собственное доменное имя, которое останется вашим навсегда.
И еще. Если вы планируете заняться заработком в интернете посредством сайта, то обязательно нужно помнить, что многие сети — баннерные, тизерные, сервисы контекстной рекламы и прочие подобные ресурсы НЕ ПРИНИМАЮТ сайты, размещенные на бесплатных площадках.
И, конечно, следует подвести некий итог.
Я не люблю конструкторы, предпочитая делать сайты на движках или нативном коде. Но если бы именно сейчас возникла необходимость работы с конструктором, то я бы делал выбор по следующим критериям — отсутствие рекламы, возможности сохранения сайта на свой диск и присоединения собственного домена. Бесплатно, разумеется.
Если для вас не имеет значения вышеуказанные критерии, и вы не хотите «париться» с кодом, то в этом случае ваш путь лежит на Wix — проще уж некуда: к примеру, сделать сайт-визитку можно буквально за 5-10 минут. Если не имеет значение наличие рекламы и нужна исключительная гибкость сайта, то это вам дадут Вебстолица или Юкоз. Великолепен и очень гибок Webnode, неплох Nethouse, жаль что в них нет сохранения. А, вообще, выбор конструктора — дело довольно ответственное. Если предполагается проект с несколькими десятками страниц, то имеет смысл попробовать несколько конструкторов, руководствуясь вышеприведенными описаниями, чем потом мучиться и переезжать на другой конструктор. Потраченные полдня стоят этого, поверьте.
Любой сайт, а в идеале и сама идея о создании сайта должны начинаться с четкого понимания цели создания и дальнейшего развития нового интернет-ресурса.
С какой целью может быть создан сайт?
На самом деле, все цели создания нового сайта можно разделить на две основные категории:
- коммерческие;
- некоммерческие.
Нужно признать, что в большинстве случаев интернет-ресурсы создаются именно с коммерческими целями. Давайте рассмотрим конкретные примеры подобных целей, чтобы все стало понятно.
Итак, коммерческой целью создания сайта может быть:
- продажа товаров и услуг;
- личный или политический пиар;
- передача ценной информации целевой аудитории с целью последующего получения прибыли;
- создание положительного имиджа для коммерческой компании;
- создание сайтов для клиентов.
Что же касается некоммерческих целей создания сайта, среди них можно выделить создание интернет-ресурсов для благотворительных организаций, а также создание интернет-площадок, предназначенных для общения и обмена разнообразным контентом и информацией между определенными группами пользователей.
Определение задач, стоящих перед создаваемым сайтом
В первую очередь необходимо отметить, что любой грамотно созданный сайт способен решать самый широкий спектр задач. Например:
- формирование потока целевых посетителей для вашего бизнеса;
- организация эффективной обработки заявок, поступающих от потенциальных клиентов;
- повышение узнаваемости компании или личного бренда создателя сайта;
- формирование доверия со стороны потенциальных клиентов;
- предоставление актуальной информации в наиболее востребованных форматах, таких как текст, изображения, а также видео- и аудио- материалы;
- предоставление посетителям сайта возможности скачать интересующий их файл, например прайс-лист или презентацию предлагаемого товара;
- автоматизация вашего бизнеса;
- и многое, многое другое.
А вы уже знаете, какие задачи будет решать ваш сайт? Это действительно важно, потому что, только исходя из поставленных задач, можно выбрать тот тип сайта, который лучше всего подходит для создания вашего интернет-ресурса.
Технические аспекты создания сайта
Технические аспекты создания собственного сайта во многом зависят от правильного выбора необходимых инструментов. Прежде всего, стоит понимать, что на сегодняшний день существует три основных способа самостоятельного создания сайта:
- с помощью конструкторов сайтов;
- с помощью CMS-систем;
- путем самостоятельного написания исходного кода сайта.
Давайте рассмотрим каждый из этих способов более подробно. Начнем с того, который, на наш взгляд лучше других подходит для новичков.
Конструкторы сайтов
Мы убеждены, что, если у вас ограничено время или желание разбираться, то оптимальным способом будет создание сайта в конструкторе. Мы выбрали самые эффективные и простые в использовании, что для создания сайта не потребуется каких-либо знаний в области верстки, программирования и веб-дизайна.
Итак, конструктор сайта — это специализированный онлайн-сервис, включающий в себя готовые варианты графического оформления для создаваемых сайтов, а также имеющий удобный и интуитивно понятный пользовательский интерфейс. В идеале современный конструктор сайтов должен позволить любому человеку создать свой собственный интернет-ресурс без необходимости получения знаний в области веб-программирования и дизайна.
Наиболее популярные конструкторы сайтов
- Wix – один из наиболее популярных конструктов сайтов, который позволяет быстро и просто создавать интернет-ресурсы действительно высокого качества. На нашем сайте вы найдете подробный обзор этого конструктора, а также пошаговое руководство по работе с ним. Рекомендуем!
- UKit – конструктор, который позволяет создавать современные сайты, а затем успешно заниматься их SEO-продвижением. Он имеет простой в освоении и интуитивно понятный пользовательский интерфейс, а также включает в себя продвинутую систему аналитики. Специально для читателей нашего сайта мы подготовили пошаговое руководство по работе с этим конструктором.
- Nethouse – конструктор, который отлично подойдет для создания сайтов-визиток, сайтов-портфолио, интернет-магазинов. Он достаточно прост в первичном освоении и дальнейшем использовании. Мы подготовили его подробный обзор, а также пошаговое руководство.
- UMI – еще один простой в освоении и использовании конструктор сайтов. Прочтите наш подробный обзор, а также пошаговое руководство по работе с ним.
Кроме того, специально для читателей нашего сайта мы составили рейтинг лучших конструкторов сайтов. Обязательно обратите на него внимание, чтобы проанализировать все возможные варианты!
Простой пример создания сайта
Давайте вкратце пробежимся по этапам создания сайта в конструкторе Wix. Он отлично подойдет для деловых людей, кто не желает погружаться в тонкости создания сайтов и избавит их от необходимости делать свой первый ресурс на «голом» HTML или разбираться с особенностями работы CMS.
Сам процесс состоит из нескольких понятных и простых шагов, о которых чуть ниже!
Шаг первый – регистрация в конструкторе и вход в аккаунт.
Проходим простую процедуру регистрации, заполнив данные формы либо просто авторизовавшись в одной из популярных соц.сетей.
Шаг второй – выбираем базовый шаблон дизайна для будущего сайта.
Конструктор предоставляет в распоряжение пользователей коллекцию из более 500 уникальных бесплатных шаблонов! Такого выбора нет нигде!
Ваша задача будет выбрать наиболее подходящий по функционалу и визуальному оформлению шаблон, после чего можно приступать к его настройке и наполнению.
Шаг третий – оформляем и персонализируем сайт.
В первую очередь необходимо дать создаваемому ресурсу уникальное название. Стоит отметить, что в случае необходимости присвоенное на этом шаге название сайта можно будет изменить в любой момент.
По умолчанию, вы получаете домен третьего уровня (вида вашлогин.wix.com/вашсайт), но вы легко можете подключить своей домен 2го уровня.
Визуальный редактор с простотой MS PowerPoint, позволяет изменять любой элемент создаваемого сайта, а также без каких-либо проблем добавлять или удалять самые разнообразные блоки и модули.
В частности можно:
- Добавлять на сайт необходимые страницы и наполнять их контентом.
- Фотогалереи и видеоролики.
- Разнообразные функциональные элементы, такие как формы, кнопки и меню.
- Кнопки социальных сетей.
- Функционал для ведения блога компании.
- Реализовать полноценный интернет-магазин.
- Активировать SEO-инструменты для продвижения создаваемого сайта.
- Добавить красочный favicon.
- Разнообразные счетчики и метрики для отслеживания важных параметров и характеристик сайта.
- И еще множество и множество самых разных модулей под разные назначения.
Шаг четвертый – финальные штрихи и запуск.
- Просмотрите мобильную версию, убедитесь, что вас все устраивает.
- Подтвердите ранее введенные контактные данные.
- Обязательно сделайте «Предпросмотр» перед запуском сайта.
- И наконец, нажмите кнопку «Публикация», чтобы созданный вами сайт стал частью всемирной паутины и был доступен всем пользователям.
Конечно, создание сайта это процесс творческий и скорее всего вы будете постоянно возвращаться к нему и внедрять новые возможности и фишки. Конструктор дает возможность сконцентрироваться на самом важном и наслаждаться процессом создания.
В результате вы получаете высококачественный сайт с удобной мобильной версией и совсем без технических знаний. Если у вас остались вопросы по конструктору, то вы сможете найти ответ на них в нашей подробной пошаговой инструкции.
CMS-системы
Термин CMS происходит от английского выражения Content Management System и используется для обозначения так называемых «систем управления контентом» (сайтом). Эти же системы зачастую называют «движками» для сайтов. На сегодняшний день любая CMS-система позволяет управлять всем содержимым сайта с помощью простого и наглядного интерфейса.
Вполне естественно, что выбор CMS-системы зависит от цели создания конкретного сайта. Каждый движок для сайта имеет свои особенности, преимущества и недостатки. Кроме того, стоит учитывать, что все CMS-системы делятся на две большие группы: бесплатные и платные движки.
Топ бесплатных CMS-систем
- WordPress – отлично подходит для создания блогов, сайтов-визиток, корпоративных сайтов. Кстати, сайт, который вы сейчас читаете, работает на базе именно этой CMS. И мы уже опубликовали руководство, в котором рассказывается о том, как создать сайт на WordPress.
- Joomla – еще одна многофункциональная CMS-система, которая позволяет создать как простой сайт-визитку или корпоративный сайт, так и полноценный интернет-магазин. Обязательно прочитайте наше руководство, посвященное тому, как создать сайт на Joomla.
- InstantCms – в первую очередь, этот движок предназначен для создания социальных сетей, городских порталов, а также сайтов знакомств и онлайн-клубов;
- Drupal — ещё одна популярная CMS-система, которая отлично подходит для создания корпоративных сайтов, сайтов-визиток, а также сайтов-портфолио, социальных сетей и интернет-магазинов;
- OpenCart –данная CMS-система предназначена, прежде всего, для создания интернет-магазинов. Вместе с тем стоит учитывать, что она проста в использовании, но при этом достаточно сложна в плане разработки. Как показывает практика, для разработки полноценного интернет-магазина на основе этого движка требуется привлечение опытного PHP-программиста.
- phpBB – отличная CMS-система, предназначенная для создания форумов.
Топ платных CMS-систем
- «1С-Битрикс» — мощная и многофункциональная система управления сайтами. Она позволяет создавать и поддерживать интернет-ресурсы практически любого типа. В качестве ключевых особенностей стоит выделить простоту управления созданным сайтом, высокую производительность, интеграцию с 1С (это очень важный момент для российских интернет-магазинов), а также обширные возможности мобильного администрирования.
- UMI.CMS – еще один достойный представитель платных CMS-систем. Девиз его разработчиков — «удобство для людей». Специально для этого движка было создано 500 уникальных шаблонов, которые подойдут практически для любого сайта и при этом предоставят возможность доработки под каждый конкретный проект. А 2500 разработчиков будут рады помочь вам в создании сайта на основе UMI.CMS и его «затачивании» именно под ваши цели.
- osCommerce — платная CMS-система, предназначенная для создания современных интернет-магазинов и обладающая богатейшими функциональными возможностями.
Самостоятельное создание сайта
Специально для тех, кто хочет научиться самостоятельно писать исходный код создаваемого сайта, мы подготовили пошаговую инструкцию по созданию простого сайта на HTML. Поехали!
Внимание! Если вы абсолютный новичок или просто не хотите погружаться в работу с кодом и другие технические моменты, можете смело переходить к разделу «Создать сайт с нуля или на конструкторе сайтов?»
Создание HTML-сайта
В качестве первого примера мы создадим простой HTML-сайт, который будет состоять всего из одной страницы. HTML (HyperText Markup Language — язык разметки гипертекстов) – универсальный язык, предназначенный для описания веб-страниц. Его задача заключается в том, чтобы указать браузеру, что и как нужно отображать при загрузке страницы в браузере пользователя. Каждый из его тегов описывает фрагмент страницы.
Ниже приводится исходный код простейшей HTML-страницы:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<base href="http://www.internet-technologies.ru/wp-content/uploads/pages/createMySite/" />
<title>Туристическое агентство ТурБюро</title>
<meta name="description" content="Описание страницы" />
<meta name="keywords" content="Ключевые слова" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>
<div id="page">
<header>
<a href="/" title="" class="logo"><img src="images/logo.png" alt="Туристическое агентство" /></a>
<div class="phone">+7 (123) 45-67-89</div>
<br><nav>
<ul id="top_menu">
<li><a href="index.html">О компании</a></li>
<li><a href="services.html">Наши услуги</a></li>
<li><a href="contacts.html">Контакты</a></li>
</ul>
</nav>
<br><div class="header_img">
<img src="images/header_img.jpg" alt="Туристическое агентство" />
</div>
</header>
<section id="content">
<h1>Приветствуем Вас на сайте ТурБюро!</h1>
<img src="images/content_img.jpg" alt="Картинка" class="float-right" />
<p>Здравствуйте! Мы рады приветствовать вас на сайте туристического агентства «ТурБюро»! Мы предлагаем нашим клиентам только самые интересные и захватывающие приключенческие туры по всему миру!</p>
<p>Только у нас вы сможете полететь в Индию на слоне и окунуться в глубокое синее море, держась за плавник акулы. Но не волнуйтесь - каждый клиент нашего агентства застрахован по полной программе и жаждет приключений снова и снова!</p>
<p>Если вам нечего заняться, вы поистине решили заняться приключениями на свою голову, то приглашаем вас в офисы нашей компании по всей стране для выбора самых вкусных предложений.</p>
</section>
<footer>
<a href="http://www.internet-technologies.ru/" title="Сайтостроение от А до Я">Сайтостроение от А до Я</a><br />Все права защищены
</footer>
</div>
</body>
</html>
Скопируйте этот код в новый текстовый файл и сохраните его на своем компьютере. Задайте для сохраняемого файла имя index.html. Затем откройте этот файл в любом браузере и посмотрите на результат.
Обратите внимание, что по умолчанию любой веб-сервер пытается выдать браузеру именно страницу с названием index.html. Поэтому в 99% случаев исходный код главной страницы сайта сохраняется в файле под таким названием и это считается хорошим тоном.
Полную версию этого простейшего HTML-сайта вы можете скачать в виде архива (10,8Mb). После распаковки архива запускаем html/index.html.
Ключевые этапы создания сайта
Самостоятельное создание сайта с нуля состоит из трех основных этапов:
- Создание макета сайта. Именно на этом этапе появляется четкое визуальное представление, как будет выглядеть создаваемый интернет-ресурс. Чаще всего используется Adobe Photoshop или другие растровые редакторы.
- Верстка сайта. На этом этапе приступают к верстке сайта из макета .psd, мобильной адаптации и тестированию на корректное отображение в различных браузерах.
- Внедрение PHP. На этом этапе сайт превращается из статичного в динамический.
Давайте разберемся со всеми этими этапами более подробно.
Создание макета сайта
Чаще всего макет (в данном случае под этим словом стоит понимать визуальное оформление) сайта создается в программах, которые принято называть графическими редакторами. Наиболее популярными являются Adobe Photoshop и CorelDRAW. Мы рекомендуем использовать именно Photoshop, так как он чуть проще в освоении и при этом обладает богатейшими возможностями. Кроме того, именно им пользуются все веб-дизайнеры.
Создаем новый документ в Adobe Photoshop. Задаем ему имя – MySite.
Выбираем разрешение 1000 на 1000 пикселей. Оно гарантирует корректное отображение у любого пользователя, размер по вертикали в дальнейшем можно будет увеличить.
Выбираем разрешение 72 пикселя на дюйм и RGB-цвет. Эти установки делаем обязательно, так как именно они отвечают за корректное отображение веб-страницы.
Затем устанавливаем цвет фона F7F7C5 в шестнадцатеричном формате или выбираем его с помощью палитры цветов.
После этого выбираем пункт меню «Просмотр» – «Направляющие» и активируем отображение линеек и направляющих.
В пункте меню «Просмотр» — «Привязка к» необходимо проверить, что включена привязка к направляющим и границам документа.
С помощью инструмента «Текст», вводим текстовое название будущего сайта, слоган под ним, а также контактный номер телефона справа вверху макета.
Слева от логотипа и справа от контактного номера телефона проводим направляющие, которые позволят обозначить рамки по ширине сайта.
Затем с помощью инструмента «Формы» создаем прямоугольник с закруглёнными краями (радиус – 8 точек) и с его помощью обозначаем место под изображение, которое будет располагаться в шапке сайта.
Теперь пришло время вставить изображение в шапку сайта.
С помощью инструмента «Текст», и шрифта Georgia, входящего в стандартный набор операционной системы Windows, создаем навигационное меню и заголовок главной страницы сайта.
Затем, используя инструмент «Текст» и шрифт «Arial», добавляем текст главной страницы. В данном случае лучше всего использовать блочный текст для последующей работы с ним.
Для заголовка в тексте используем черный шрифт. Для навигационного меню – белый.
Перемещая правую границу основного текстового блока, вставляем изображение в текст страницы (справа от текста).
Используя инструмент «Формы» — «Прямая», проводим заключительную линию под текстом страницы.
C помощью инструмента «Текст» (шрифт Arial) размещаем копирайт в подвале страницы (под линией).
Нарезаем необходимые для вёрстки сайта фрагменты изображений с помощью инструмента «Раскройка» (мы выделили основную картинку в шапке и картинку в тексте страницы).
В результате проделанной работы мы создали полноценный макет сайта. В случае если вы захотите внести собственные изменения в макет страницы, PSD-файл также можно найти в архиве.
Для того чтобы сохранить и использовать результаты проделанной работы в виде изображений для последующей вёрстки сайта, переходим в меню «Файл» и выбираем пункт «Сохранить для Веб». Затем настраиваем качество выходных изображений и сохраняем их.
В результате этого мы получим множество графических фрагментов для нашего будущего шаблона. В папке, где был сохранен сам шаблон, появится папка с изображениями (images). Отбираем нужные и переименовываем.
Макет страницы создан, необходимые фрагменты получены, можно переходить к верстке.
Вместе с тем стоит отметить, что для максимально быстрого старта можно воспользоваться готовыми шаблонами, а не создавать их самостоятельно. В разделе «шаблоны сайтов» можно найти и создать собственный сайт на основе HTML и CSS.
Верстка сайта
Прежде всего, необходимо создать новый текстовой файл и сохранить его под названием index.html.
Первая строка этого файла должна выглядеть следующим образом:
<!DOCTYPE html>
Она сообщит браузеру, как именно обрабатывать содержимое страницы. Далее следует набор тегов:
<html><head> «Голова» документа</head><body> «Тело» документа</body></html>
Пара тегов <html>…</html> говорит о том, что внутри содержится HTML-код.
Внутри <head>…</head> располагаются теги, которые не отображаются в окне браузера пользователя. Как правило, они начинаются со слова meta, и называются мета-тегами, а вот тег <title>…</title> отображается в качестве заголовка окна браузера и анализируется поисковыми системами.
Далее располагается пара тегов <body>…</body>, в которые заключено содержимое страницы. Именно эта часть, которую часто называют телом страницы, отображается в браузере пользователя.
Также важно понимать, что существует несколько способов организации контента. Наиболее популярные из них – организация с помощью блоков (<div>…</div>) и в виде таблиц (<table>…</table>).
Что касается формата отображения элементов, то он может быть задан как напрямую, с использованием соответствующих тегов, так и с помощью таблиц стилей CSS. При этом именно второй способ является наиболее предпочтительным, так как он позволяет повторно применять стили компонентов. Таблица стилей задается либо в внутри тега <head>, либо в отдельном файле (чаще всего этот файл имеет имя style.css), ссылка на который также располагается внутри <head>.
Основополагающими документами, в которых описываются все компоненты того или иного языка, применяемого при создании сайтов, являются спецификации.
Более подробно изучить все основные 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 include('templates/header.php'); // Вставка шапки сайта ?>
...
<?php include('templates/footer.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.
Публикация созданного сайта в сети Интернет
Допустим, вы уже создали свой первый сайт, но что нужно сделать, чтобы на него мог зайти любой пользователь Всемирной паутины?
Что такое «домен» и зачем он нужен
Домен — это имя сайта. Кроме того, под термином «домен» зачастую понимают адрес вашего сайта в сети «Интернет».
Отличным примером домена может быть имя сайта, на котором вы сейчас находитесь — internet-technologies.ru.
Как видно из приведенного выше примера доменное имя сайта состоит из двух частей:
- непосредственно названия сайта — в нашем случае это internet-technologies;
- выбранной доменной зоны. В нашем случае была выбрана доменная зона «.ru». Доменная зона указывается в адресе сайта после его названия.
Также стоит отметить, что существуют домены различных уровней. Разобраться в этом очень просто – достаточно посмотреть на количество разделенных точкой частей адреса сайта. Например:
- internet-technologies.ru – домен второго уровня;
- forum.internet-technologies.ru – домен третьего уровня (он же поддомен).
Доменные зоны могут быть разными. Чаще всего выбор доменной зоны зависит от страны или назначения каждого конкретного сайта.
Наиболее часто используются следующие доменные зоны:
- .ru — наиболее популярная доменная зона в рамках русскоязычного сегмента Всемирной паутины;
- .biz — часто доменная зона используется для сайтов бизнес-тематики;
- .com — эта доменная зона чаще всего используется для коммерческих и корпоративных сайтов;
- <