Как сделать сайт самостоятельно с нуля: 10 шагов, чтобы создать сайт с нуля

Содержание

Сделать сайт самостоятельно с нуля бесплатно

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

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

Что такое сайт и какие они бывают

Для начала формальное определение:

«Сайт (место; местонахождение) — это совокупность электронных документов (файлов) частного лица или организации в компьютерной сети, объединённых под одним адресом (доменным именем или IP-адресом). »

Первый сайт в мире был создан совсем недавно — в августе 1991 года. Его автором был британец Тим Бернерс-Ли. Именно здесь впервые была опубликована информация о новой технологии World Wide Web.

Прошло всего 30 лет и Интернет покорил мир. Он пришел на каждый письменный стол и активно внедряется на все другие — кухонные, обеденные, карточные и прочие. Соответственно и сайты распространились на все сферы деятельности человека. Вот какие они бывают:

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

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

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

Под платформой я понимаю совокупность ваших персональных точек присутствия в Интернете, а именно:

персональные страницы в соцсетях;
группы в соцсетях;
персональные каналы в YouTube, Телеграм;
подписные страницы в E-mail сервисах;
и наконец ваш сайт — ядро платформы.

С платформы, как с плацдарма, вы ведете работу по захвату и расширению вашей целевой аудитории (ЦА). Отсюда распространяется ваше влияние и продвижение вашего продукта.

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

Что такое блог и почему мы его выбрали

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

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

Блог — это информационный сайт, содержащий регулярно добавляемые автором записи произвольного содержания. Для блогов характерна возможность публикации комментариев. Это делает блоги средой сетевого общения…

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

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

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

Вот что пишет один из топ-менеджеров Google Джим Лесински:

«Битва за симпатию и внимание покупателей теперь ведется не на прилавках и сайте компании, а на нейтральной территории: тематических блогах, форумах, ресурсах для сравнения различных товаров… А также на страницах выдачи поисковых систем.»

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

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

Как делается сайт

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

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

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

Выберите домен — имя вашего блога, которое пишется в адресной строке. Хорошо, если оно будет как-то связано с вашей личностью или с вашим продуктом.
Придумайте название вашего блога — несколько слов на русском языке, поясняющих содержание вашего сайта.
Установите домен на хостинг — компанию, которой вы доверите размещение вашего блога на ее серверах, заботу о его сохранности, доступности и скорости загрузки. Здесь лучше опираться на рекомендации. Я, например, давно пользуюсь хостингом ТаймВеб и вполне этим доволен.
Выберите и установите на сайт CMS (Content Management System), или по-простому — движок. Задача движка — максимально упростить создание и управление сайта. Самой популярной и удобной считается CMS WordPress, изначально созданная для блогов, но ставшая потом абсолютно универсальной.
Выберите тему (шаблон) сайта. Их очень много — на любой вкус и карман. Поэтому выбирать вам. У меня только два совета. Во-первых, не берите бесплатную тему. Она сильно ограничит ваши возможности по развитию сайта. Во-вторых, проследите за тем, чтобы тема включала в себя как можно больше инструментов SEO-оптимизации. Это избавит вас от многих забот и лишних плагинов.
Добавьте блог в Яндекс и Гугл Вебмастер. Это важно сделать чтобы поисковики «узнали» о новом сайте и начали его индексацию.
Установите на блоге Яндекс.Метрику и Гугл Аналитик и вы всегда будете знать всю статистику посещений сайта.
Настройте карту сайта и пропишите файл robots.txt. Почитайте в Интернете, как это делается или поручите эту работу фрилансеру. Это важно сделать для правильной индексации сайта.
Установите на блог все необходимые плагины. Это процесс индивидуальный. С одной стороны, плагинов чем меньше — тем лучше. С другой — некоторые из них совершенно необходимы. Кроме того нужно знать, какие инструменты содержатся в теме, чтобы случайно их не продублировать. В любом случае важно исключить спам и битые ссылки и обеспечить SEO — оптимизацию.
Установить формы подписки и кнопки соцсетей. Эти инструменты опять либо включены в тему, либо требуют установки специальных плагинов.

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

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

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

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

Написание контента — это отдельная тема и специальное занятие. О копирайтинге, сторителлинге и прочем можно почитать здесь>>.

Из практического опыта

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

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

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

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

Движок WordPress, как наиболее удобный и популярный. Это важно, т.к. для этого движка существует огромное количество тем и плагинов.

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

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

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

Одновременно создавались другие элементы платформы — страницы и группы в соцсетях, канал в YouTube, аккаунты в сервисах рассылки.

И каковы же результаты? Где-то на второй год платформа «задышала». Появилась аудитория — по несколько тысяч друзей и подписчиков в аккаунтах соцсетей, несколько тысяч участников групп и около тысячи подписчиков в рассылках. Это принесло до 400 посетителей сайта в день, из них несколько десятков приходят через поисковики.

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

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

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

Как сделать лендинг самому. Пошаговая инструкция (2019)

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

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

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

Как сделать лендинг самому — подготовка контента

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

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

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

Пример лендинга

Работа над контентом при создании лендинга проходит в несколько этапов.

Этап 1. Сформулировать гипотезу

Если вы решили сделать лендинг, значит, у вас есть идея или представление о странице. Запишите их коротко по плану:

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

Этап 2. Изучить конкурентов

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

Как это сделать? Посмотрите, что предлагают в ответ на запросы поисковики Google или Яндекс.

Сначала найдите популярные запросы в сервисах подбора слов Яндекса или планировщика ключевых слов Google:

Поиск вариантов ключевых слов в Google Adwords

Затем введите в строку поиска подходящие ключевые слова и изучите страницы конкурентов:

Рекламные объявления компаний по запросу «беседка для дачи»

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

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

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

Этап 3. Описать целевую аудиторию и выделить сегменты

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

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

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

Как изучить свою аудиторию и найти сегменты:

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

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

Пример отзыва на сайте магазина настольных игр

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

Этап 4. Написать текст лендинга

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

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

Структура лендинга

Название блока	Задача	Что писать
Шапка лендинга	Объяснить посетителю, куда он попал.	Логотип, название компании, чем занимается, контакты.
Уникальное торговое предложение или оффер	Передать одним предложением суть, главную выгоду для целевой аудитории, и почему это лучше, чем у конкурентов.	Пример: Деревянные беседки для дачи — собираются за один день.
Подзаголовок	Усилить или уточнить оффер.	Пример: Готовые беседки и под заказ.
Призыв к действию	Побудить посетителя купить или оставить контакты.	Кнопка «Заказать». Форма «Оставить заявку».
Описание услуги/свойства продукта	Дать подробную информацию о продукте.	Описание в формате «свойства-преимущества», фотографии продукта, скриншоты, видео, таблицы.
Сценарии использования	Описать ситуации, в которых будет полезен продукт или услуга.	Например, деревянная беседка нужна, чтобы отдыхать с друзьями, укрыться летом от солнца, украсить дачу, обедать всей семьей на свежем воздухе.
Кто мы/О компании/Почему выгодно купить у нас	Доказать экспертность, объяснить, почему вам можно доверять.	Опыт работы, сертификаты и дипломы, крупные клиенты.
Как это работает Как купить/заказать	Объяснить, как человек получит желаемый результат.	Например: «Вы скачиваете прайс, вам звонит наш менеджер и составляет смету. Вы одобряете смету и назначаете время доставки. Получаете складную беседку для дачи».
Сколько стоит	Показать цену или варианты цены.	Цена со скидкой, тарифные планы, калькулятор, форма «рассчитать стоимость».
Ответы на частые вопросы	Снять возражения, развеять страхи читателя.	Как оплатить товар, можно ли вернуть или обменять.
Призыв к действию	Еще раз предложить купить товар или оставить заявку.	Кнопка «Заказать». Форма «Оставить заявку».

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

Этап 5. Подобрать картинки, видео, фотографии

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

Фотографии товара можно попросить у поставщика или сфотографировать самому.

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

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

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

Как сделать лендинг — оформляем текст в конструкторе

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

Сделать лендинг бесплатно можно с помощью конструкторов:

Tilda
Lpgenerator
Lpmotor
Platformalp

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

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

После регистрации сервис сразу предложит вам создать сайт.

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

Справочные материалы на сайте Tilda

Создать сайт

Придумайте название сайта. Это рабочий вариант, он виден только вам:

Создание сайта в конструкторе Tilda

Выбрать шаблон

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

Выбор шаблона на сайте Tilda

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

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

Шаблон «Ремонтная компания» для создания страницы

Вставить свой текст и фотографии

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

Шаблон со своим текстом и фотографией

Опубликовать сайт

Когда все отредактировано, нажимаем «сохранить» и смотрим результат.

Если результат вас устраивает, ссылки работают, можно публиковать страницу в интернете и запускать рекламу.

На бесплатном тарифе адрес страницы будет иметь такой вид:

Бесплатный адрес сайта на субдомене Tilda

Чтобы подключить домен и получить короткий адрес страницы, нужно перейти на платный тариф.

Как увеличить конверсию лендинга

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

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

Email рассылки

Рассылки помогают прогреть посетителей, которые пока не готовы к покупке. Вы можете добавить на лендинг форму подписки из SendPulse. Тогда контакты подписчиков будут сразу попадать в сервис. В справочном разделе Tilda описано, как вставить на страницу форму подписки SendPulse и собирать email адреса потенциальных клиентов.

Автоматические серии писем

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

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

Чтобы настроить авторассылки, нужно зайти в SendPulse и выбрать раздел «Авторассылки»:

Создание автоматических рассылок в SendPulse

Web push уведомления

Еще один способ повысить конверсию лендинга — настроить web push уведомления. Когда посетитель находится на странице, в браузере появляется предложение подписаться на уведомления:

Предложение подписаться на push уведомления

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

Web push уведомления помогают решить несколько задач:

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

Push уведомление с напоминанием о начале вебинара

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

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

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

Регистрируйтесь в SendPulse, чтобы повышать конверсию лендинга с помощью рассылок и push уведомлений и превращать посетителей в покупателей!

Создание веб-сайта: недостающее руководство, 4-е издание [книга]

Введение

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

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

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

Короче говоря, эта книга является идеальным руководством для людей, которые хотят создать сайт самостоятельно, начиная с нуля, но со всеми преимуществами, которые может предложить современный Интернет. Это также неплохая отправная точка для всех, кто хочет глубже погрузиться в область дизайна веб-сайтов (и в Приложении А есть множество предложений для амбициозных читателей, которые хотят узнать больше). Если какое-либо из этих описаний описывает вас, добро пожаловать на борт!

Слава создания веб-сайта с нуля

Существует множество способов заявить о своем присутствии в Интернете. Вы можете общаться с друзьями через страницу в Facebook, делиться своими снимками в Instagram или Flickr, размещать домашние видео на YouTube или писать короткие заметки в стиле дневника в блоге, размещенном в такой службе, как Blogger. Но если вы достаточно честолюбивы, чтобы взять в руки эту книгу, значит, вам нужен золотой стандарт Интернета: полностью персонализированный, созданный с нуля сайт, который вы можете назвать своим.

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

В зависимости от ваших целей ваш веб-сайт может быть чем угодно: от удобного места для хранения вашего резюме до центра электронной коммерции, где продаются персонализированные трусы (эй, это сделало не одного интернет-миллионера). Дело в том, что создание собственного веб-сайта дает вам возможность точно решить, что это за сайт, и возможность изменить все по прихоти. И если вы уже используете другие веб-сервисы, такие как YouTube и Facebook, вы также можете сделать их частью своего веб-сайта, как вы узнаете из этой книги. Например, вы можете разместить видеоролики YouTube, где ваша кошка играет в бильярд, рядом с персонализированными товарами для кошек.

Конечно, с большой силой приходит и большая ответственность. Это означает, что если вы решите создать свой собственный сайт, вы сами должны убедиться, что он не будет выглядеть так нелепо, как портрет из ежегодника 1960-х годов, или работать так же неуклюже, как 1970-е годы. Шевроле. Чтобы помочь вам избежать этих опасностей, эта книга начинается с того, что дает вам прочную основу для кажущихся занудными языков HTML и CSS. Не паникуйте — эти стандарты на удивление легко освоить как для компьютерных гениев , так и для обычных людей. Вы даже получите несколько упражнений, которые помогут вам практиковаться.

Это не значит, что нужно делать все сложно. В этой книге много времени посвящено бесплатным сервисам веб-сайтов, которые могут выполнять сложную работу, которую вы определенно не хотите выполнять самостоятельно, например, отслеживать посетителей или создавать корзину для покупок. И самодельные веб-умные устройства, которые вы приобретете, сослужат вам хорошую службу, даже если вы перейдете к удобным инструментам для создания веб-сайтов, таким как популярное программное обеспечение Dreamweaver от Adobe. (На самом деле вы научитесь выбирать из нескольких совершенно бесплатных инструментов веб-дизайна в главе 5, в том числе профессиональный инструмент для разработки сайтов от Microsoft, который когда-то стоил сотни долларов, и новый выскочка от Adobe.)

Типы сайтов

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

Личные сайтов о вас. Если вы хотите поделиться фотографиями Джуниора с родственниками, рассказать о поездке в Куала-Лумпур или просто опубликовать свои последние мысли и навязчивые идеи, личный веб-сайт — это то, что вам нужно. В наши дни вы можете использовать сайты социальных сетей, таких как Facebook и Instagram, чтобы поделиться своей жизнью с друзьями, но личный сайт — хороший выбор, если вы более амбициозны (например, вы хотите составить карту пяти поколений семейной истории) или хотите получить полную информацию. управление дизайном (забудьте синий цвет Facebook).
Резюме Сайты представляют собой специализированный тип личных сайтов и мощный инструмент построения карьеры. Вместо того, чтобы копировать чемодан, полный бумажных резюме, почему бы не отправлять электронные письма и не распространять визитные карточки, указывающие на ваше онлайн-резюме? Лучше всего то, что при небольшом планировании ваша онлайн-биография может включать больше деталей, чем ее древовидный аналог, например, ссылки на бывшие компании, онлайн-портфолио и даже фоновую музыку, играющую «YMCA» (что определенно не рекомендуется).
Тематические сайтов сосредоточены на конкретной теме, которая вас интересует. Если вы больше заинтересованы в разговорах о своей любимой музыке, искусстве, книгах, еде или политических движениях, чем о своей жизни, тематический веб-сайт для вас.
Подсказка
Прежде чем приступить к созданию сайта, подумайте, захотят ли его посещать другие люди со схожими интересами, и взгляните на существующие сайты по этой теме. Лучшие тематические веб-сайты привлекают людей, разделяющих общие интересы. Худшие сайты содержат ту же дюжину ссылок, которые вы можете найти где угодно. Помните, что Интернет тонет в информации. Последнее, что ему нужно, это еще Магазин фанатов Джастина Бибера .
Сайты Event не рассчитаны на то, чтобы выдерживать годы — вместо этого они вращаются вокруг конкретного события. Типичный пример — свадебный сайт. Организаторы мероприятия создают его, чтобы предоставить указания, справочную информацию, ссылки на реестры подарков и несколько романтических фотографий. Когда свадьба заканчивается, сайт исчезает или превращается во что-то другое (например, личный сайт, рассказывающий о медовом месяце). Другие события, к которым вы могли бы относиться аналогичным образом, включают семейные встречи, костюмированные вечеринки или марши протеста «сделай сам».
Рекламные сайты идеально подходят, если вы хотите продемонстрировать свой собственный компакт-диск или книгу, выпущенную в горячем виде. Они предназначены для того, чтобы рассказать о конкретном предмете, будь то керамика ручной работы или ваше собственное программное обеспечение. Иногда эти веб-сайты превращаются в сайты для малого бизнеса, где вы фактически продаете свои товары (см. пункт «Малый бизнес» ниже).
Малый бизнес (или электронная коммерция) сайтов демонстрируют наиболее успешное использование Интернета — продают все, от портативных музыкальных плееров до лекарств, отпускаемых по рецепту. Сайты электронной коммерции сейчас настолько широко распространены, что трудно поверить, что когда Интернет только появился, никому в голову не приходило зарабатывать деньги.

Примечание

Создать полноценный сайт электронной коммерции, такой как Amazon.com или eBay, далеко за пределами способностей одного человека. Эти сайты нуждаются в команде программистов, работающих со сложными языками программирования и изощренными методами программирования. Но если вы пришли в Сеть зарабатывать деньги, не теряйте надежды! Инновационные компании, такие как PayPal и Yahoo, предоставляют услуги, которые помогут вам создать сайт в стиле корзины для покупок и принимать платежи по кредитным картам. Вы также можете размещать рекламу Google или продавать продукты с веб-сайта Amazon, чтобы заработать немного денег. Вы узнаете больше в главе 13.

Как только вы определите raison d’être своего веб-сайта, вы должны лучше понять, кто будет вашими посетителями. Знание и понимание вашей аудитории имеет решающее значение для создания эффективного сайта. (И даже не пытайтесь предположить, что вы создаете сайт только для себя — если это так, то вообще незачем размещать его в Интернете!)

Об этой книге

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

Что нужно для начала работы

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

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

Примечание

Ни при каких обстоятельствах вам не нужно ничего знать о сложных технологиях веб-программирования, таких как Java или ASP.NET. Вам также не нужно ничего знать о базах данных или XML. Эти темы увлекательны, но их безумно сложно реализовать без солидного опыта программирования. Из этой книги вы узнаете, как создать наилучший веб-сайт, не становясь программистом. (Однако вы станете , изучите JavaScript достаточно, чтобы использовать многие из бесплатных библиотек сценариев, которые вы можете найти в Интернете.)

О программе Outline

Эта книга состоит из пяти частей, каждая из которых состоит из нескольких глав:

Глава 3. В этой части вы изучите основы HTML, языка Интернета (глава 1 и главу 2). Далее вы познакомитесь со стандартом CSS, который позволяет применять к страницам причудливые цвета, шрифты и рамки (глава 3), а также добавлять изображения (глава 4). Наконец, вы узнаете, как можно упростить свою жизнь с помощью программ редактирования веб-страниц (глава 5).
Часть 2. В этом разделе показано, как увеличить масштаб до полного веб-сайта, состоящего из нескольких страниц. Вы узнаете, как связать свои страницы вместе (глава 6), создать стиль всего сайта одним движением (глава 7) и освоить несколько изящных макетов (глава 8). Наконец, вы разместите свои страницы в Интернете с помощью надежной хостинговой компании (глава 9).
Часть 3. В третьей части книги объясняется, как сделать так, чтобы ваш сайт заметили поисковые системы, такие как Google (глава 10), и как привлечь веб-трафик (глава 11). Вы также посмотрите на блоги (сокращение от веб-журналов ) и бесплатные программы, которые помогут вам их создавать (глава 12). Наконец, вы узнаете, как встать на путь веб-богатства, показывая рекламу или продавая собственные продукты (глава 13).
Часть 4. Теперь, когда вы можете создать профессиональный, работающий веб-сайт, почему бы не украсить его необычными функциями, такими как светящиеся кнопки и всплывающие меню? Вы не узнаете головоломных подробностей о том, как стать хардкорным программистом на JavaScript, но вы узнаете достаточно, чтобы использовать бесплатные мини-программы на JavaScript на своих собственных страницах для выполнения основных задач (глава 14 и глава 15). Вы также поэкспериментируете с видеоклипами и добавите музыкальный проигрыватель MP3 прямо на обычную веб-страницу (глава 16).
Часть 5. В конце этой книги вы найдете два приложения. Первое приложение указывает на дополнительные ресурсы по созданию сайтов для амбициозных веб-дизайнеров, которые хотят продолжать совершенствовать свои навыки. Второй дает вам краткий справочник по HTML. В нем перечислены и определены основные элементы HTML, а также указана ссылка на соответствующую главу этой книги для более подробного обсуждения.

ПК с Windows и Macintosh

Одна из лучших особенностей Всемирной паутины заключается в том, что она действительно распространяется по всему миру: где бы вы ни жили, от Арубы до Замбии, Сеть с нетерпением ждет вашей компании. То же самое касается компьютера, который вы используете для разработки своего сайта. От ранних моделей ПК с Windows до новейшего и самого лучшего MacBook Pro — вы можете применять приемы, инструменты и приемы, описанные в этой книге, практически на любом компьютере, который у вас есть. (Конечно, некоторые программы предпочитают одну операционную систему другой, но вы услышите об этих различиях всякий раз, когда они возникнут.) Хорошая новость заключается в том, что эта книга полезна и подходит для владельцев компьютеров всех мастей.

О программе→Эти→Стрелки

В этой книге вы встретите такие предложения: «Чтобы сохранить документ в Блокноте, выберите «Файл» → «Сохранить». Это сокращение для несколько более длинного набора инструкций, который звучит так: «Откройте меню «Файл», нажав «Файл» в строке меню. Затем в меню «Файл» нажмите «Сохранить». На рис. I-1 вы можете рассмотреть его поближе.

Рисунок I-1. В этой книге обозначения со стрелками упрощают инструкции по папкам и меню. Например, «Выберите «Файл» → «Сохранить» — это более компактный способ сказать: «В меню «Файл» выберите «Сохранить», как показано здесь.

Об онлайн-ресурсах

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

Пропавший компакт-диск

В задней обложке этой книги нет компакт-диска, но вы ничего не упустите. Вы можете загрузить все сопутствующие материалы для этой книги со страницы Missing CD по адресу www.missingmanuals.com/cds/caw4 или с сайта-компаньона книги по адресу http://prosetech.com/web.

Сопутствующий сайт включает в себя три полезных элемента:

Образцы веб-страниц . У вас никогда не может быть слишком много примеров. На компакт-диске Missing вы найдете коллекцию, включающую все примеры веб-страниц, приведенные в этой книге. Вы загружаете их в виде одного ZIP-файла, а затем распаковываете на своем компьютере. Файлы примеров организованы в папки по главам (таким образом, файлы из главы 1 находятся в папке с названием Chapter 1), что упрощает поиск интересующих вас примеров.
Подсказка
Если вы хотите поработать с определенным файлом примера, вот быстрый способ найти его: Посмотрите на соответствующий рисунок в этой книге. Имя файла обычно отображается в конце адресной строки веб-браузера. Например, если вы видите URL-адрес c:\Creating a Website\Chapter 1\popsicles.htm (рис. 1-6, Учебное пособие. Создание HTML-файла), вы будете знать, что соответствующий пример файла — popsicles. хтм .
Учебники . Загружаемый компакт-диск Missing также содержит очень полезные обучающие файлы, которые вы будете использовать с практическими упражнениями в этой книге. Вот как это работает: Когда вы начинаете один из учебников книги, мы отсылаем вас к пронумерованной папке с учебниками. Например, если вы работаете над первым упражнением в главе 2, вы будете перенаправлены в папку с именем 9.0011 Учебник-2-1 . В этой папке вы найдете все начальные файлы, необходимые для начала работы, и файлы решения для руководства — окончательный, законченный продукт. Поэтому, если вы попробуете учебник, и он не совсем сработает, вы можете проверить свою работу и отследить проблему.
Примечание
В этой книге представлены два типа учебных пособий. Наиболее важные и подробные упражнения представлены в отдельных разделах книги, названия которых начинаются со слова «Учебное пособие», как в разделе «Учебное пособие: создание HTML-файла». Эти уроки обучают ключевым навыкам, поэтому вам обязательно стоит их попробовать. Вы также встретите более короткие необязательные учебные пособия для дополнительной практики. Эти учебные пособия отображаются на боковых панелях «Увеличение резкости».
Ссылки . В этой книге упоминается множество полезных веб-сайтов и онлайн-сервисов. К счастью, вам не нужно напрягать пальцы, вводя длинные веб-адреса в браузере. Вместо этого сопутствующий сайт предлагает список интерактивных ссылок на все упомянутые веб-сайты, упорядоченные по главам и перечисленные в том порядке, в котором они появляются в книге.

Регистрация

Если вы зарегистрируете эту книгу на сайте www.oreilly.com, вы получите право на специальные предложения, например скидки на будущие издания 9 книг.0011 Создание веб-сайта: недостающее руководство . Регистрация бесплатна и занимает всего несколько кликов. Введите http://tinyurl.com/registerbook в адресную строку браузера, чтобы сразу перейти на страницу регистрации.

Errata

Чтобы эта книга была как можно более актуальной и точной, каждый раз, когда мы печатаем новые копии, мы будем вносить любые подтвержденные исправления, которые вы предложите. Мы также отмечаем такие изменения на странице опечаток книги, так что вы можете отметить важные исправления в своем собственном экземпляре книги, если хотите. Перейдите на http://tinyurl.com/cws-errata, чтобы сообщить об ошибке и просмотреть существующие исправления.

Safari® Books Online

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

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

Safari Books Online предлагает ряд планов и цен для предприятий, государственных учреждений, образовательных учреждений и частных лиц.

Участники имеют доступ к тысячам книг, обучающим видео и рукописям перед публикацией в одной базе данных с возможностью поиска от таких издателей, как O’Reilly Media, Prentice Hall Professional, Addison-Wesley Professional, Microsoft Press, Sams, Que, Peachpit Press, Focal Press. , Cisco Press, John Wiley & Sons, Syngress, Morgan Kaufmann, IBM Redbooks, Packt, Adobe Press, FT Press, Apress, Manning, New Riders, McGraw-Hill, Jones & Bartlett, Course Technology и сотни других. Для получения дополнительной информации о Safari Books Online посетите наш сайт www.safaribooksonline. com.

Создание веб-сайта клиента с нуля – создание бренда | Создание бренда

Создание клиентского веб-сайта с нуля – создание бренда | Создание бренда | Webflow TV. Как вы проектируете и развиваете веб-сайт? Что выделяет сайт? Как создать веб-сайт с отличным пользовательским интерфейсом (UX) и простым в обслуживании? Как профили пользователей влияют на дизайн веб-сайта?

‍В 8-м эпизоде «Создания бренда» мы познакомим вас с процессом создания веб-сайта с нуля для Гамильтона. Веб-сайт сегодня является одним из самых важных инструментов для любого бизнеса. В то время как клиент Blind, семейная пивоварня Hamilton, в основном работает вне офиса, владельцы Джош и Кристен Гамильтон надеются выйти на розничную торговлю и развивать свой бренд в Интернете. свое пиво и информировать посетителей о своих предстоящих мероприятиях, при этом Джошу и Кристен легко поддерживать себя. В команде дизайнеров Blind нет штатных разработчиков, поэтому они решили использовать Webflow для разработки нового Гамильтона без необходимости писать ни строчки кода.

В этой серии

Смотреть серию

Эпизод 1 | 11:00