Что нужно для создания сайта с нуля – Как создать сайт бесплатно самому с нуля? Есть 3 способа!

Содержание

Что нужно для создания сайта с нуля начинающим вебмастерам

Все сайты в Интернете создаются для определённых целей. Эти цели можно разделить на 2 основные категории: коммерческую и некоммерческую. 80%-90% сайтов создаются для заработка в Интернете, а, значит, преследуют коммерческую цель. Сайты из некоммерческой категории нужны для обмена информацией или благотворительности. Какую бы цель вы не преследовали  при создании собственного сайта, у вас наверняка возникнет вопрос, что нужно для создания сайта с нуля?

Содержание статьи

Три направления для создания сайта

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

  1. Создание сайта через код HTML, CSS, PHP, Java, и др. В этом случае понадобятся знания программирования.
  2. Создание сайта на бесплатной площадке. Из трех направлений это, наверное, самый легкий вариант, т.к. не требует денежных вложений на покупку хостинга и домена. Но в тоже время я бы не стала рассматривать такие сайты серьезно, т.к. они имеют ограниченный функционал для вас, как для владельца.

В качестве примеров бесплатных площадок можно привести blogger.com, livejournal.com, и я бы отнесла к этой категории Яндекс Дзен.

  1. Конструкторы сайтов – wix, ukit, lpgenerator, и др. Я не знаю, есть ли смысл создавать многостраничные сайты на подобных конструкторах, но для сайтов-визиток, одностраничников, корпоративных сайтов это идеальный вариант.
  2. Создание сайта на платформе CMS: drupal, joomla, wordpress и т.д. Большинство сайтов создается на движке вордпресс. На это есть несколько причин:
  • wordpress бесплатный и доступный для каждого;
  • имеет понятный функционал;
  • для него разработано огромное количество дополнительных решений, что делает эту CMS еще более востребованной;
  • для работы с вордпресс в Интернете есть много информации, поэтому, как пользоваться движком, разберется любой начинающий вебмастер.

HTML, CSS, PHP, Java

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

Чтобы профессионально заниматься сайтостроеним, вам нужно знать язык программирования. Это самый идеальный вариант.

Чтобы сразу не тратиться на дорогие курсы, можно начать с бесплатного обучения. Я могу порекомендовать вам книгу автора Михаила Русакова «Создание сайта от начала и до конца», из которой вы узнаете о всех этапах создания сайта: от разработки дизайна до размещения его в Интернете.

что нужно для создания сайта с нуля

Бесплатные площадки для сайтов

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

У сайтов, созданных на таких площадках, есть несколько существенных недостатков:

  • Присваивание домена третьего уровня. По-другому я бы назвала такой домен не уникальным. Приведу пример. Допустим, вы решили создать сайт на площадке Блоггера. Какое бы имя для сайта вы не придумали, оно всегда будет заканчиваться на blogspot.com.
  • Ограниченный выбор тем для сайта или их отсутствие. На мой взгляд, это очень существенный минус, потому что все сайты выглядят, как будто их делали под копирку.
  • Отсутствие возможности изменить код сайта. livejournal и Яндекс Дзен не позволяют вносить никакие изменения в код площадки. Код всегда закрыт, и вам дана возможность пользоваться лишь имеющимся функционалом самой платформы. На blogger.com есть доступ к коду, но этого не достаточно, например, для смены дизайна сайта.
  • Ограниченные способы заработка на сайте. Если собственный сайт с доменом второго уровня вы можете использовать для заработка, как вашей душе угодно, то на сайтах, размещенных на бесплатных площадках, возможности ограничены.

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

Как создать сайт на blogger.com

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

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

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

создание сайта на blogger.com

Статьи на сайт добавляются через кнопку Создать сообщение.

Как создать блог на livejournal.com

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

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

Публикация статей происходит через кнопку в панели личного кабинета Написать в блог.

На мой взгляд, livejournal – это подобие сайта, и больше похож на социальную сеть. Теперь его новый редактор напоминает редактор соцсети ВК.

Как создать канал на Яндекс Дзен

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

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

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

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

99% каналов на Дзене создается для заработка на рекламе. После достижения 7000 дочитываний за последние 7 дней на канале у вас появится возможность подключить монетизацию, и в ваших статьях начнет транслироваться реклама. За эту рекламу вы будете получать доход.

Хотите больше информации по работе с Яндекс Дзен, читайте мою рубрику Все нюансы Яндекс Дзен.

Что нужно знать для создания сайта с помощью конструктора

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

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

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

Что необходимо для создания сайта с нуля на платформе CMS

Я уверена, что 90% читателей этой статьи будут создавать сайты на платформе CMS. Благодаря своей гибкости и богатому функционалу она позволяет реализовывать практически все цели, которые ставит перед собой каждый вебмастер.

Давайте подумаем, что нужно для создания сайта новичкам:

Хостинг

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

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

От себя советую вам обратить внимание на хостинг Timeweb. Я пользуюсь услугами этого хостинга уже практически 3 года и довольна сотрудничеством.

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

Timeweb предлагает выбрать один из трех видов движка: wordpress, joomla и drupal. Ранее на моем сайте уже выходила статья, как зарегистрировать домен и хостинг на Таймвеб. Всю дополнительную информацию вы найдете в ней.

доступные движки для сайта

Кстати, на Timeweb при покупке тарифа на год, можно получить скидку 35% и бесплатный домен в подарок в зоне .ru и .рф.

Домен

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

В любом случае домен должен отвечать следующим требованиям:

  • Желательно в имя домена добавить ключевую фразу (слово), которая будет характеризовать основную тематику вашего сайта;
  • Не делайте доменные имена слишком длинными, отдавайте предпочтение коротким доменам;
  • Пусть домен будет запоминающимся, чтобы посетители сайта могли возвращаться на ваш ресурс;
  • Доменная зона должна отвечать целям сайта. Если вы создаете сайт для русскоговорящей аудитории, отдавайте предпочтение зоне .ru; сайт будет продвигаться только в пределах РФ – ваша зона .рф; для коммерческих сайтов выбирайте зону .com.

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

Движок

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

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

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

FTP-доступ

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

Чек-лист перед запуском сайта

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

  1. Вы должны четко понимать, под какие задачи создается данный сайт. Если его задача давать информацию о владельце сайта – это сайт-визитка. Сайт рассчитан для продажи определенного товара – тогда вам нужен одностраничник. Если сайт создается для заработка на рекламе – это информационный сайт. Хотите продавать через сайт одежду или детские игрушки? – вам понадобится интернет-магазин.
  2. Выбор движка. Для информационных сайтов и блогов идеально подойдет wordpress, для веб-порталов лучше отдать предпочтение CMS-платформе joomla или drupal. Для создания интернет-магазинов понадобится бесплатный движок OpenCart, для форумов – phpBB, для одностраничных сайтов – wordpress, LPgenerator, и т.д.
  3. Подготовленные материалы. Например, для информационных блогов перед тем, как запустить сайт, рекомендуется иметь “запас” готовых статей. Речь не идет о 3-5 статьях, в идеале – 50-100 публикаций. Что еще можно отнести к материалам? Это картинки, фотографии, изображения по теме, видеоролики, аудиофайлы, подкасты, логотипы, иконки, и т.д.

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

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

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

  1. Приобретение хостинга и домена. О том, как купить хостинг, я уже писала выше. Кроме Timeweb популярны следующие хостинги: Sprinthost, Макхост, Beget и др.

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

После подготовительно этапа пришло время запустить сайт в работу.

Заключение

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

Денежные ручейки

denezhnye-ruchejki.ru

Создание Сайта Самостоятельно Бесплатно с Нуля + бесплатно PDF

5. Платить или не платить за CMS

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

Но еще CMS разделяются на:

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

Теперь чуть подробнее.
Начну с приятного

Бесплатные CMS

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

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

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

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

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

Лучший бесплатный движок для интернет-магазина
Лучший бесплатный движок для сайта услуг, визитки, блога

Платные CMS

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

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

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

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

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

Ну согласитесь, ведь не на биржу фрилансеров идти какому-нибудь банку, что повесить заплатку на свой сайт :smile:

:smile:

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

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

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

Важно понимать!

Стоимость любой средней простенькой доработки на Битрикс около 200-300$, на Opencart — около 50$. Для банка или крутой компании даже 1000$ в месяц — это не деньги, там на бумагу больше тратят, им важнее квалификация и сертификация персонала, который на них работает, а для начинающего ипэшника — 200$ за любой чих-пых, это караул и крест на развитии!

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

Лучшая коммерческая CMS для сайта

Самописные CMS

Так называемые самописные движки — это полная «засада» для 99,99% бизнес-сайтов.

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

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

Чтобы вы лучше поняли масштаб трагедии, это примерно как вы купили машину, которая работает не на бензине, и не на газу, и не на солярке, а на уникальном виде топлива — специальном торфе, который есть только у того автодилера, который продал вам эту машину.

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

А есть ли плюсы?

Как по мне, так единственный плюс самописных движков — почти полная защита от взлома со стороны CMS, так как самописный движок как неуловимый Джо, его никто из хакеров не ловит, так как он никому нафиг не нужен.

Поэтому я настоятельно НЕ рекомендую для типовых проектов, вроде сайтов-визиток или интернет-магазинов использовать никакие самописные движки!

Выводы и итоги

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

Так какой движок выбрать конкретно из бесплатных? Joomla? Drupal? ModX? WordPress? Opencart? Prestashop? Magento? — их огромное количество.

Я подскажу, что лично выбрал я, но сначала нужно определиться с тем, а что у вас за сайт?

Ведь именно от вида сайта — зависит подбор правильного движка.

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

moytop.com

Как сделать сайт с нуля своими руками (вводная часть)

Как сделать сайт с нуля своими руками (вводная часть)

Как сделать сайт с нуля своими руками (вводная часть)

Здравствуйте уважаемый посетитель!

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

Причем чтобы такой интернет-ресурс был создан не на каком-нибудь стандартном шаблоне бесплатной СMS (Content management system — система управления контентом) типа WordPress, Drupal, Joomla и т.п., а заточенный под себя, с возможностью обеспечить ему должную безопасность и реализовать все свои индивидуальные потребности.

Часто такие сайты, созданные под конкретные задачи на основе языка разметки веб-страниц HTML, стилей CSS и других инструментов веб-программирования (PHP, JavaScript и т.п.), называют самописными.

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

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

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

Содержание


Причины создания сборника по самостоятельной разработке самописного сайта


Конечно, можно работать и на готовых CMS. А также, помимо упомянутых бесплатных СMS, пытаться использовать и разного рода конструкторы, такие как Setup, Wix, Nethouse, а также сервисы Google Сайты, Яндекс.народ и другие им подобные.

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

Почему самописный сайт

А если же брать платные профессиональны CMS, в которых работа сайта может обеспечиваться на достаточно хорошем уровне, то это удовольствие совсем не из дешевых.

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

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

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

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

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

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

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

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

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

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

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

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

Тема создаваемого сайта


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

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

Тема создаваемого сайта

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

В чем суть?

Недавно, мне поведал один компетентный в этой области человек, что у нас в стране, в довольно распространенным виде «бизнеса», как угон автомобилей, уровень специалистов, которые этим занимаются, стал настолько высоким, что даже самые навороченные и дорогостоящие, напичканные всякой электроникой противоугонные системы, не могут гарантировано защитить а

rabota-vinete.ru

Что нужно для того, чтобы создать свой сайт?

Как создать свой сайт

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

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

Как создать сайт? — тысячи людей ежедневно набирают такую фразу в строке поисковых систем google, yandex, rambler и т.д. Тысячи людей ищут информацию по этому вопросу и вместе с ними тысячи людей каждый день делают свои сайты. Каждый день в интернете появляются несколько десятков тысяч новых сайтов и несколько тысяч блогов! Обалдеть!

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

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

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

В общем я был полный лузер во всем этом, все что я знал — это «Пуск» — «Программы» — «Стандартные» — «Пасьянс Косынка»., а нет вру, еще «Пуск» — «Выключение компьютера» — «Перезагрузка»! Я думал что если перезагружать ПК по чаще, он будет лучше работать! Вот ламер а!!!

Что нужно для того чтобы создать сайт

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

Друзья, я по профессии пожарный и однажды я задумался над тем, чтобы сделать свой личный пожарный сайт! Знаний у меня было ноль! Как это делать, что изучать, где брать информацию и т.д., короче инфы в интернете по созданию сайтов много, а что нужно не знаю! Так вот, я начал искать различную информацию, учиться, научился за 2 недели. Смотрите что получилось — Пожарный сайт России.

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

Что нужно для того чтобы иметь свой сайт:

1. Домен и Хостинг
2. Программа для создания сайта или CMS (Готовый сайт)
3. Программа для соединения компьютера с хостингом. (не обязательно).

Создать бесплатный сайт бесплатно

Перед тем как приступить к объяснению каждого пункта в подробностях скажу следующее: Если вы вообще ноль в создании сайтов, то советую изучить 2 базовых языка для создания сайтов HTML и CSS. Не пугайтесь. Я сказал базовые, то есть за 3-4 часа вы изучите все от и до.

Хорошо! Теперь к делу.

1. Домен и Хостинг.

Что это такое? Объясняю. Домен — это имя вашего сайта. Хостинг — это место для вашего сайта!

Посмотрите сейчас на строку вашего браузера как показано на картинке.

ssylka

Что вы видите? isif-life.ru…………… Так вот isif-life.ru — это доменное имя моего сайта. Это имя нужно купить, как и любое другое. pogarny.ru, vk.com и т.д. Стоит имя сайта не дорого. От 100 до 500р. за год! Купить домен вы можете у любого хостинг-провайдера.

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

Для того чтобы его могли видеть не только вы, но еще и все пользователи интернета, то его нужно положить в интернет. Чтобы вам было проще понять, то скажу проще. Интернет — это огромный жесткий диск, в котором есть миллиарды различных папок, некоторые из них заняты, а некоторые свободные, вот вам как раз и нужно будет купить свободную папку (хостинг) и положить туда свой готовый сайт.

Создать сайт бесплатно

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

Все зависит от нужных вам функций. Если вы хотите сделать обычный сайт на HTML и ни чего более, то тариф за 50-80р. в месяц вполне подойдет, ну а если вы хотите сделать себе сайт на котором будут различные скрипты, фото галереи, аудио, видеоролики, форум, блог, регистрация пользователей и т.д., то ту нужен будет тариф по мощнее, 150-300р. в месяц.

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

2. Программа для создания сайта или CMS

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

а) Web Page Maker — программа для создания сайта. (Видеокурс «Как создать сайт за час»)

б) Joomla — CMS система управления контентом (на этом движке сделан мой первый пожарный сайт).

в) WordPress — CMS для создания блога (Мой блог сделан на этом движке, сделал блог за 3 дня).

Бесплатный сайт создать

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

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

Так же хорошие CMS — mambo, DLE, Drupal (Изучал мельком, очень понравилась — советую). Вообще зайдите в любой поисковик и наберите к примеру «Список популярных CMS», вам выдастся целый список сайтов, на которых вы узнаете о большом количестве программ и CMS систем, благодаря которым можно делать качественные, функциональные и красивые сайты.

Но желательно вам не забивать голову этой кучей. Возьмитесь за одну систему (программу), изучите ее для того чтобы владеть ею в совершенстве, потом за вторую и т.д. Кстати не лишним вам будет прочитать вот эту статью — «Как успевать делать кучу дел. Искусство успевать!»

О трех системах, которые я перечислил выше могу сказать следующее:

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

Joomla — CMS просто супер! Лично мне она очень нравиться! При помощи нее можно делать отличные сайты на которых может быть форум, фотогалерея, видеогалерея, чат, гостевая книга, каталог статей, система регистрации пользователей на сайте + создание сообщества, где люди могут писать друг другу сообщения, добавлять друг друга в друзья, оставлять сообщения на стене в профиле пользователя и т.д. и т.п. Функционал у Joomla очень большой! Советую изучить эту CMS!

WordPress — движок для создания блога! Самый популярный среди всех! Советую! Простой, понятный, легкий в установке, настройке и управлении. Основная часть блоггеров сидят именно на этом движке, для него сейчас есть куча плагинов, тем и т.д.

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

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

3. Программа для соединения компьютера с хостингом.

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

Вообще закинуть сайт на Хостинг можно без всяких программ, можно просто зайти в свою панель управления Хостингом (она у вас будет после покупки хостинга и домена) и через браузер закачать туда свой сайт. Лично я так сайт не закачиваю на Хостинг, я пользуюсь специальной программой Filezilla, некоторые web-мастера пользуются Total Comander и другими прогаммами.

Как закачать файлы сайта на сервер (Хостинг) вы можете узнать так же из моего видеокурса «Как создать сайт за час».

Получиться у нас следующее, когда человек будет набирать имя вашего домена http://site.ru, то он будет попадать на ваш сайт! Все просто!

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

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

Как создать свой сайт

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

У каждого свои тараканы в голове как говориться. Я использую сайты для всего сразу! Делать то-что тебе нарвится + зарабатывать благодаря этому — самое лучшее занятие, чего и вам советую. Почитайте вот эту статью — «Сколько можно заработать на блоге? Зачем вообще нужен блог?»

Всего доброго!

C уважением, Александр Борисов

Как создать свой сайт

isif-life.ru

публикация тематических материалов по веб-разработке и сайтостроению

Отзывы от наших читателей

Отзыв от Микута Олеси

Купленные курсы:

Фреймворк Bootstrap: практика адаптивной верстки от А до Я

Фреймворк CakePHP: с нуля до гуру

Интернет-магазин на Joomla

WordPress-Профессионал

WordPress-Мастер: от Личного блога до Премиум шаблона

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

JavaScript&jQuery с нуля до профи

Интернет-магазин под ключ

Корпоративный сайт под ключ

Благодаря изучению основных 3-х курсов (Интернет-магазин под ключ, JavaScript&jQuery с нуля до профи и Практика верстки под мобильные устройства) я создала уже более 10 сайтов, причем среди них есть интернет-магазины, сайты компаний, лендинг, многоязычный сайт. Есть сайты на WordPress. Один достаточно успешный сайт — copacabanaclub.kz, который не так давно победил в конкурсе на лучший проект, созданный клиентами Webformyself.com.

Мое знакомство с сайтом webformyself.com началось уже несколько лет назад. Сначала меня просто заинтересовала идея научиться создавать сайты, я начала «ходить» по разным сайтам, искать информацию, купила несколько курсов на других сайтах. Освоила html, css, основы PHP и MySQL. Но как объединить эти знания и создать по-настоящему рабочий, полноценный проект — это осталось не понятно.

Однажды так же случайно наткнулась на сайт webformyself.com. Прочитала некоторые статьи, посмотрела видео-уроки. Мне понравилось как доходчиво объясняют многие непонятные для меня моменты.

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

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

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

После прохождения курсов по JavaScript и JQuery и по адаптивной верстке сайта стала больше экспериментировать, открылись новые возможности улучшить внешний вид сайтов, добавить множество интересных эффектов и сделать их адаптивными для всех устройств. Начала использовать возможности технологии AJAX.

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

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

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

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

Хочу искренне поблагодарить всю команду, особенно Кудлай Андрея, Бернацкого Андрея и Виктора Гавриленко за их курсы.

Отзыв от Фоминова Алексея

Купленные курсы:

WordPress-Профессионал

WordPress-Мастер: от Личного блога до Премиум шаблона

Интернет-магазин под ключ

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

Начал я с полного нуля, до этого посмотрев курс Евгения Попова HTML, СSS.

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

Исключительно Ваша репутация в сети, и рекомендации других таких же именитых гуру интернета) А также все отзывы интернета только хорошие. Ну и сервис на высоте, видно что ориентация на клиента растет с каждым днем!

Теперь знаю куда смотреть при разбирании сайта на косточки. Научился пользоваться такими программами как локальный сервер denwer, php designer, filezilla, notepad, adobe dreamweaver, photoshop, дополнениями браузеров для быстрой проверки сайтов и нахождении необходимой строчки кода, с чего начинать писать сайт, работа с CMS WordPress, работа с шаблонами WordPress и подстраивание их под свои требования, написания структуры сайта, плана сайта добавления функция на сайт, написание кода с верстки…вообщем устал перечислять, еще кучу всего!!!

Даже могу теперь спорить с друзьями программистами,которые оказывается ничего не понимают, это жесть, а учились 5 лет!

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

Сейчас цели связаны не с сайтостроением. Но при достижении вернусь к изучению остальных курсов. Следующим этапом будет изучение курса от WebFormyself «Верстка: сайта от основ до конкретного результата» и «Практика верстки под мобильные устройства».

Сейчас занят основами маркетинга в интернете Яндекс, Google, соц. сети и тд и попутно продажи оффлайн. Как только немного разгружусь и появится свободное время вернусь к изучению сайтостроения вместе с WebFormyself, придерживаюсь мнения что своя CMS, это все таки лучший вариант, качественно, чистота кода, профессионально и главное УНИКАЛЬНО!

Курс очень объемный требует только время. Мне понадобилось около месяца в день уделял по 3-4 часа. При изучении вопросы которые возникали, удавалось все решить самому.

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

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

Отзыв от Разумовского Максима

Купленные курсы:

Интернет-магазин под ключ

С помощью приобретенного курса я научился разрабатывать сайты по шаблону MVC. До знакомства с курсом я понятия не имел что такое шаблоны проектирования и зачем они нужны. Но понимание разработки сайтов по шаблонам проектирования стало гигантским скачком в моем развитии как программиста и разработчика сайтов. Кроме того именно этот курс научил меня разрабатывать для сайтов собственные CMS и сейчас мне проще написать для любого сайта собственную панель управления чем использовать и каждый раз затачивать под сайт какой-нибудь WordPress или Jooml-у.

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

Начинал я в далекие 2000-е с изучения XHTML. Тогда еще ни кто не готовил видеокурсы и приходилось собирать информацию по книжкам и тематическим сайтам. Было много длительных перерывов в моем развитии как разработчика и о профессиональном занятии созданием сайтов я даже не предполагал. Сейчас разработка сайтов это моя основная деятельность которая меня кормит. Я уже и не представляю что такое каждое утро ходить на работу. Моя жизнь полностью планируется только мной и зависит только от моей занятости.

На самом деле у меня очень долго не могла проявиться полная картинка процесса создания сайта. Я знал HTML и CSS, мог «слепить» несколько страничек связанных между собой гиперссылками. Но сделать по настоящему что-то стоящее я не мог. Кроме того знаний HTML и CSS было явно не достаточно для полноценной работы. Именно видеокурсы, в том числе кусы webformyself, собрали в моей голове картину «процесс создания сайтов» из обрывков знаний и помогли расширить объем знаний и навыков.

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

Купив курс «Интернет-магазин под ключ» я не только изучил PHP и MySql, но и научился создавать собственные CMS для сайтов. Создание каталога товаров, ЧПУ, хлебные крошки, авторизация на сайте, постраничная навигация для сайта. Большей части того что я умею сейчас я обязан именно этому видеокурсу.

Больше всего наверно запомнилось, как я никак не мог вникнуть в суть шаблона проектирования MVC. Наверно раз 7 я просматривал этот момент, в итоге осознание пришло только утром следующего дня. До «жираф», но главное что дошло.

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

Хотел бы поблагодарить команду WebForMySelf за их нужную и очень полезную работу. Я уверен что, я не единственный для кого WebForMySelf открыли мир веб-разработки, тем самым изменили жизнь, положив начало для нового интересного и прибыльного занятия по жизни. Если сказать прямо то без WebForMySelf не было бы меня как веб-разработчика. Поэтому от Всех нас и от себя лично хочется поблагодарить команду WebForMySelf и пожелать увеличение роста продаж в геометрической прогрессии с каждым новым курсом.

Отзыв от Деникаева Тимура

Купленные курсы:

Фреймворк Bootstrap: практика адаптивной верстки от А до Я

Практика монетизации блога: от раскрутки до реальных денег

Фреймворк CakePHP: с нуля до гуру

WordPress-Профессионал

WordPress-Мастер: от Личного блога до Премиум шаблона

Карьера веб-дизайнера. С нуля до первой продажи за 14 дней

Мастер веб-дизайна 2.0

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

JavaScript&jQuery с нуля до профи

Интернет-магазин под ключ

Практика резиновой верстки

Премиум клуб

WordPress-Ученик

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

Я боялся, что у меня ничего не получится. Были большие сомнения стоит ли начинать в таком возрасте???

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

Я многому научился и до сих пор черпаю огромные знания в области Веб-программирования из видео уроков Андрея и….. Андрея ).

Так как я все время говорю не об одном курсе, то хочу сказать, что в каждом из них есть свои запоминающие моменты. Трудно сказать, что запомнилось больше всего. Правильнее будет сказать, что «воды» там совершенно НЕТ. Все четко, лаконично и на профессиональном уровне!!!

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

Я безумно рад, что мне очень повезло познакомиться с командой Webformyself. Они действительно, делают неоценимый вклад в область Веб индустрии. Хочу отдельно выразить огромную благодарность Бернацкому Андрею и Андрею Кудлаю. Если один из них Автор с Большой Буквы, то у другого это просто ДАР!!! Ребята, ВЫ МОЛОДЦЫ!!!

webformyself.com

Разработка красивого веб-сайта с нуля. Как создать веб-сайт

как создать сайт

Доброго времени суток, уважаемые читатели блога http://www.webformyself.com

С Вами Виктор. Сегодня я хочу предоставить Вашему вниманию еще один интересный перевод с сайта http://net.tutsplus.com/ . Данная статья Вам покажет как можно нарисовать красивый сайт, имея практически нулевые знания в программе Photoshop.

Автором данной статьи является Marko Prljic.

Поехали…

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

как создать сайт

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Автор: Marko Prljic

Редакция: Рог Виктор

Привет, меня зовут Марко, я веб-дизайнер из чудесной страны Хорватии. Я разрабатываю амбициозные, классно выглядящие, современные сайты. Также я пишу статьи для Themeforest и Graphicriver, и люблю писать разные руководства. В свободное от создания сайтов время я просто общаюсь со своими детьми или обдумываю очередной Большой Проект. О, как и все остальные, я веду блог на Twitter.

как создать сайт

Шаг 1 – Скачайте 960 Grid System Template

Почти все дизайны я разрабатываю на основе блочной системы 960 Grid System. Поэтому нам сначала нужно скачать эти блочные шаблоны для Photoshop, которые можно найти на официальном сайте 960.gs. Просто распакуйте zip-архив и найдите в нем PSD-шаблоны. Вы увидите шаблоны двух типов: один – 12_col, второй – 16_col. Как видно по названию, отличаются они тем, что один состоит из 12 колонок, а другой из 16. Чтобы пояснить чуть точнее, допустим, что Ваш дизайн будет состоять из трех вертикальных блоков, тогда Вам нужно взять шаблон 12_col, так как 12 кратно 3. А если Ваш дизайн будет состоять из четырех вертикальных блоков, тогда Вы может брать в качестве шаблона как 12_col, так и 16_col, потому что и 12, и 16 кратно 4. Далее в руководстве мы рассмотрим это на примере.

Шаг 2 – Определяем структуру

как создать сайт

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

Шаг 3

как создать сайт

После того, как мы определились со структурой сайта, можно двигаться дальше. Откройте Ваш шаблон 16_col.psd. Перейдите в меню «Изображение» > «Размер холста» (Image > Canvas size). Установите размер 1200px по ширине и 1700px по высоте. Установите цвет фона #ffffff.

Шаг 4

как создать сайт

Далее выберите инструмент «Прямоугольник» (Rectangle) и нарисуйте прямоугольник по всей ширине холста и высотой примерно 80px. Залейте его цветом #dddddd.

Шаг 5

как создать сайт

Создайте новый слой над прямоугольной областью и установите для этого слоя режим «Перекрытие» (Overlay). При нажатой клавише Ctrl щелкните мышью по слою с прямоугольником. Он будет выделен. Выберите мягкую кисть (soft brush) толщиной 600px, установите белый цвет и несколько раз щелкните, поместив край кисти чуть выше выделенной области, как показано на рисунке. Таким образом, Вы создадите красивый и легкий световой эффект. Кроме того, можно связать эти два слоя.

Шаг 6

как создать сайт

Новый слой. Выберите снова инструмент «Прямоугольник» (Rectangle) и нарисуйте тонкий темно-серый прямоугольник, как показано на рисунке.

Шаг 7

как создать сайт

Выбрав инструмент «Прямоугольник» (Rectangle), нарисуйте большой блок примерно на 500px ниже верхнего прямоугольника. Сделайте его высотой 575px и наложите на него линейный градиент в границах оттенков от #d2d2d0 до #ffffff, с углом -90° и масштабом 100%.

как создать сайт

Шаг 8

как создать сайт

Сейчас мы создадим такой же световой эффект, который описан в Шаге 5. Мы еще не раз будем использовать этот прием, поэтому в следующий раз я просто буду отсылать Вас к Шагу 5, где описан этот эффект.

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

Шаг 9

как создать сайт

Создайте новый слой и нарисуйте большой прямоугольник высотой 400px. Он будет использоваться для шапки нашего сайта. Наложите на него красивый голубой градиент от оттенка #2787b7 до #258fcd.

»Видите, какой нежный переход оттенков?

как создать сайт
как создать сайт
как создать сайт

Шаг 10

как создать сайт

Добавьте темно-синюю линию толщиной 1px вдоль нижней границы шапки, наложите эффект тени (Drop shadow). Для наложения тени используйте режим Умножение (Multiply), непрозрачность (Opacity) 65%, угол (Angle) -90°, смещение (Distance) 1px, размер (Size) 6px. Далее создайте поверх новый слой и нарисуйте под синей линей еще одну линию толщиной 1px белого цвета. Таким образом, мы создадим отчетливую границу для нашего блока с основным контентом. В принципе, этот прием оформления границ Вы можете применять для каждого блока Вашего проекта, только с другими оттенками.

Шаг 11

как создать сайт

Создайте новый слой и с помощью инструмента «Прямоугольник» (Rectangle) нарисуйте в верхней части холста прямоугольную область высотой 50px, как показано на рисунке. Она будет служить для панели навигации.

как создать сайт

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

Шаг 12

как создать сайт

Настало время заняться навигацией. Используйте инструмент «Прямоугольник с округленными углами» (Rounded Rectangle), установите радиус 5px. Нарисуйте прямоугольник, сделайте заливку цветом #f6a836 и наложите следующие эффекты:

— Внутренняя тень (Inner Shadow) – цвет: #ffffff, Режим: Перекрытие, Прозрачность: 60%, Угол: 120 °, Смещение: 7px, Размер: 6px.

— Внутреннее свечение (Inner glow) – Режим: Нормальный, цвет: #ffffff, Размер: 4px, остальные параметры оставьте по умолчанию.

— Обводка (Stroke) – Размер: 1px, Положение: Внутри, цвет: #ce7e01.

как создать сайт

Теперь выделите этот прямоугольник с помощью Ctrl и щелчка мыши. Перейдите в меню «Выделение» > «Модификация» > «Сжать» (Select > Modify > Contract), и введите в появившемся окне 1px.

как создать сайт

Создайте сверху новый слой, установите режим «Перекрытие» (Overlay) и наложите эффект, описанный в Шаге 5, только в этот раз используя кисть меньшего размера. Далее добавьте текст для навигации. Я использовал для ссылок навигации шрифт Arial, все буквы заглавные и без сглаживания.

Шаг 13

как создать сайт

Теперь давайте создадим поле поиска. С помощью инструмента «Прямоугольник с округленными углами» (Rounded Rectangle) с радиусом 5px создайте поле для поиска по правой стороне размеченной сетки шаблона, в середине верхней серой полосы, созданной на Шаге 4. Добавьте к слою следующие стили:

— Внутренняя тень (Inner Shadow) – цвет: #000000, Режим: Умножение (Multiply), Непрозрачность (Opacity): 9%, Угол (Angle): 90°, Смещение (Distance): 0px, Размер (Size): 6px.

— Обводка (Stroke) – Размер (Size): 1px, Положение: Внутри (Position: inside), цвет: #dfdfdf.

как создать сайт

Я добавил текст «Search» и светло-серую кнопку «Go». Выглядеть это должно так.

как создать сайт

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

Шаг 14

как создать сайт

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

как создать сайт

Снова создаем эффект, описанный в Шаге 5.

как создать сайт

Используйте мягкую кисть меньшего размера. Я в данном случае выставил размер 45px.

Шаг 15

как создать сайт

После добавления логотипа и подзаголовка наш сайт должен выглядеть вот так.

Шаг 16

как создать сайт

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

как создать сайт

Создайте еще одну пустую папку слоев и назовите ее «header». В нее мы переместим графику из шапки нашего шаблона. Вот так это должно выглядеть.

Шаг 17

как создать сайт

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

как создать сайт

Выберите большую мягкую кисть размером 600px, цвет #ffffff, и нажмите несколько раз в области под навигационной панелью. Кроме того, для получения более глубокого эффекта мы можем переключить на черный цвет и сделать то же самое в нижней части шапки. Попробуйте!

Шаг 18

как создать сайт

На этом шаге я объясню Вам, как я сделал отражение для изображений в шапке. Найдите пару изображений на свой выбор, я использовал скриншоты браузера Safari с изображениями двух других моих шаблонов. Уменьшите один из них и поместите под вторым, который больше. Создайте дубликат обоих слоев и с помощью инструмента «Свободное трансформирование» (Free Transform) переверните сначала одно изображение, затем второе. Сдвиньте оба изображения на несколько пикселей вниз. Теперь сделайте выделение снизу с внешней стороны до середины первого перевернутого изображения с помощью инструмента «Прямоугольная область» (Rectangular Marquee). Перейдите в меню «Выделение» > «Модификация» > «Растушевка» (Select > Modify > Feather) и в появившемся окне введите 30px или больше. У Вас должно получиться такое же выделение, как показано на рисунке. Нажмите несколько раз кнопку Delete, чтобы получилось красивое затененное отражение оригинального изображения. Повторите этот же шаг для второго изображения.

как создать сайт

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

как создать сайт

Сейчас, чтобы сделать оба изображения немного выступающими, создайте новый слой и установите для него режим «Перекрытие» (Overlay). Наложите эффект, описанный в Шаге 5.

как создать сайт

Вот так наша шапка должна выглядеть после добавления красивого заголовка и нескольких кнопок. Не забудьте сгруппировать все слои с графикой шапки в папку «header», чтобы сохранить порядок на палитре слоев ;)

Шаг 19

как создать сайт

Посмотрев на итоговое превью нашего дизайна, Вы заметите красивые вкладки в блоке с основным контентом. Для создания подобных вкладок нам необходимо будет выполнить еще несколько дополнительных шагов, но это определенно того стоит. Сперва с помощью инструмента «Прямоугольник с округленными углами» (Rounded Rectangle) нарисуйте большую прямоугольную фигуру высотой 70px и радиусом углов 10px или больше, если посчитаете нужным. Сейчас нам надо избавиться от нижних округленных углов и сделать их идеально прямыми. Выберите инструмент «Область (горизонтальная строка)» (Direct Selection) и установите его на границе фигуры. Щелкните по точке вертикальной оси и, удерживая клавишу Shift, оттяните ее вниз, пока она не достигнет уровня горизонтальной оси. Уже неплохо, но угол все еще деформированный. Заметен небольшой хвостик. Нажмите на него и сдвиньте вверх до уровня горизонтальной оси.

как создать сайт

Мы сделали идеально прямой угол. Вот так это должно выглядеть. Теперь повторите этот шаг для правого нижнего угла.

Шаг 20

как создать сайт

Выберите инструмент «Линия» (Line) толщиной 1px.

Шаг 21

как создать сайт

Начертите разделители серого цвета, удерживая клавишу Shift.

Шаг 22

как создать сайт

Разместите какие-нибудь иконки, заголовки и описание для каждой вкладки. Я использовал иконки Рэя Ченга, которые можно скачать с сайта WebAppers.com. Как правило, одна вкладка всегда активна, в то время как другие остаются неактивными. Чтобы это четко было видно в нашем дизайне, нам нужно найти способ это показать. Я обесцветил остальные иконки и уменьшил непрозрачность для заголовков и текста, оставив первую активную вкладку цветной и яркой.

Шаг 23

как создать сайт

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

как создать сайт

Вот так должно выглядеть выделение.

как создать сайт

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

Шаг 24

как создать сайт

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

как создать сайт

Добавьте векторную маску (vector mask), нажав на маленькую иконку внизу палитры слоев.

как создать сайт

Установите черный цвет, выберите большую мягкую кисть и начните удалять прямоугольник небольшими частями, пока не получится красивый эффект имитации тени под нашими вкладками.

как создать сайт

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

как создать сайт

Вот так должны выглядеть наши вкладки.

Шаг 25

как создать сайт

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

как создать сайт

Далее сделайте дубликат слоя и поверните его на несколько градусов с помощью инструмента «Свободное трансформирование» (Free Transform). Повторите этот шаг еще раз.

как создать сайт

Импортируйте подготовленное изображение и поместите его над белыми прямоугольниками. Не волнуйтесь, если изображение выходит за границы блока – мы это исправим. Выделите верхний прямоугольник, перейдите в меню «Выделение» > «Модификация» > «Сжать» (Select > Modify > Contract) и в появившемся окне введите 5px. Выделив слой с изображением, нажмите иконку «Быстрая маска» (Quick Mask) внизу палитры слоев. У Вас получится эффект красивой картинки с рамкой, как показано на рисунке выше.

как создать сайт

Вот так у Вас должен выглядеть порядок слоев.

Шаг 26

как создать сайт

Не забывайте следить за порядком. Создайте папки слоев и распределите по ним слои на своей палитре. У меня это сделано вот таким образом.

как создать сайт

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

как создать сайт

И еще немного организации слоев.

Шаг 27

как создать сайт

Я решил, что этот блок должен быть большим, поэтому я разместил его в большом поле сразу после главного блока. Сначала рисуем большой светло-серый прямоугольник высотой примерно 220px с рамкой серого цвета толщиной 1px.

как создать сайт

Далее рисуем еще один прямоугольник, светлее и меньше предыдущего на 10px с каждой стороны. У него также должна быть светло-серая рамка толщиной 1px.

как создать сайт

Добавляем какой-нибудь текст, и все готово!

Шаг 28

как создать сайт

Теперь займемся нижним колонтитулом. Нарисуйте большой темно-серый прямоугольник высотой 400px.

Шаг 29

как создать сайт

Наложите световой эффект точно так же, как мы описывали в Шаге 5.

Шаг 30

как создать сайт

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

Шаг 31

как создать сайт

Создайте самый нижний блок, в котором будет продублирована навигация. Можно скопировать верхний прямоугольный блок с навигацией, поместить его внизу и установить для него высоту около 40px. Поместите его в самом низу Вашего холста. Пожалуйста, имейте в виду, что Вам возможно потребуется расширить холст для этой цели, чтобы на нем уместилась вся графика. В этом случае откройте в меню «Изображение» > «Размер холста» (Image > Canvas size) и установите высоту, при которой весь проект умещается на холсте.

Шаг 32

как создать сайт

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

Шаг 33

как создать сайт

Наполним колонтитул содержанием и красиво упорядочим его по нашей сетке.

Шаг 34

как создать сайт

Напоследок распределите все Ваши слои по папкам. У меня это сделано так.

Дизайн

как создать сайт
как создать сайт
как создать сайт
как создать сайт
как создать сайт
как создать сайт

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

Пара слов в заключение

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

Автор: Marko Prljic

Источник:http://net.tutsplus.com/

Редакция: Рог Виктор.

E-mail:[email protected]

Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения

как создать сайт

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее как создать сайт

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть

webformyself.com

Отправить ответ

avatar
  Подписаться  
Уведомление о