Как самому создать сайт, или «не боги горшки обжигают»

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

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

Аналитика наше все

Прежде, чем приступать к созданию собственного интернет-ресурса, стоит обязательно задать себе вопрос: а зачем мне, собственно, нужен сайт? Чтобы был? Для имиджа? Для продаж? Для привлечения новых клиентов? Если вы мечтаете о прибылях и выходите на просторы Сети с коммерческими целями (а в 95% так и есть), придется подумать о том, как сделать правильный сайт для своей целевой аудитории. А для этого придется изучить потребности и желания своего потребителя. О том, как это сделать, в блоге выйдет отдельная статья. Сейчас мы поговорим о том, зачем это вообще нужно — анализировать. В первую очередь для того, чтобы определиться с типом сайта и разработать сценарий страницы.

    Основные типы сайтов:

  • Landing Page. Одностраничный сайт, «заточенный» под продажу небольшого количества товара, конкретной услуги или акционного предложения.
  • Визитка. Самый простой и недорогой ресурс, состоит из 3-5 разделов, подходит для небольших компаний и начинающего бизнеса (преимущественно в сфере услуг).
  • Корпоративный сайт. По сути, это «навороченный» сайт-визитка. Информативный, со сложным функционалом, продуманным юзабилити, большим количеством посадочных страниц и разделов для представителей различных целевых аудиторий.
  • Интернет-магазин. Как понятно из названия, предназначен для продажи товаров в сети Интернет. Вариантом интернет-магазина является каталог (ресурс, на котором отсутствует возможность онлайн покупки товара).
  • Новостной ресурс или блог. Цель такого сайта – предоставление пользователям интересной и полезной информации. Требует регулярного обновления контента и постоянной поддержки.

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

Немного об этапах сайтостроения

Определились с тематикой и типом сайта? Теперь нужно:

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

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

Как правильно сверстать сайт

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

Все работы будут проводиться на локальном компьютере. Поэтому прежде, чем начинать работу с html, нужно создать отдельную папку для сайта. В ней мы создаем отдельную папку «images» (куда будем сохранять картинки) и текстовый файл index.

kak-pravilno-sverstat-sayt

Этап 1. Подготовка изображений

Изображения, встречающиеся на страницах вашего будущего сайта, при необходимости нарезаем и сохраняем в папку «images». Для этого с помощью Adobe Photoshop сохраняем каждый из слоев макета сохраняем по отдельности. Логотипы, иконки соцсетей и другие простые изображения сохраняются в формате .png, а фотографии – в формате .jpg.

Этап 2. HTML код

Каждая html страница имеет базовую структуру, одинаковую для всех страниц сайта. Выглядит она следующим образом:<!DOCTYPE html>

<html lang="ru">
	<head>
  	    <meta charset="UFT-8">
  	    <title>заголовок сайта</title>
 	</head>
	
	<body>
		
		<header>
			
		</header>
		
		<section>
			<article>
				
			</article>
		</section>
		
		<aside>
			
		</aside>
		
		<footer>
			
		</footer>
 	
	</body>
</html>

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

header

<header>
			
</header>

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

content

<section>
			<article>
				
			</article>
</section>

Блок, предназначенный для размещения основной информации: текстовой и графической.

sidebar

<aside>
			
</aside>

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

footer

<footer>
			
</footer>

Завершающий блок, “ноги” сайта. Располагается в самом низу страницы, “замыкая” все остальные блоки.

То есть, в основной части (теле), между тегами <body></body>,будет размещается контент: все то, что пользователь увидит на экране монитора при открытии сайта. Визуально это будет выглядеть следующим образом:

str

После того, как вы вставили этот код в документ index, сохраните его в формате html в кодировке «UTF-8». Для этого можно использовать любой из HTML-редакторов (к примеру — Notepad++).

Этап 3. CSS

Для того, чтобы сверстать сайт из PSD в HTML, нужно задать документу начальное оформление. Лучше всего в отдельной папке создать файл style.css, но можно прописать стили в нашем html документе. Для этого перед </head> вставляем теги <style> … </style>, между которыми и будет располагаться собственно код CSS. Он будет содержать данные о цвете текста, шрифтах, вариантах отображения ссылок и пр. Пример:

</style>
         <style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}
</style>

Но хорошим тоном считается разделять CSS и HTML.

Этап 4. Верстка блоков

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

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

Базовые правила, или как не допустить ошибок

Существует несколько правил оформления html кода, придерживаясь которых вы сможете с нуля сверстать качественный сайт:

  • Всегда указывайте Doctype.
  • Все html теги прописываются с использованием строчных букв (BODY – неверно!).
  • Для написания атрибутов обязательно используются кавычки (align=»right»). Это необходимо для совместимости с XML.
  • При присвоении значения в пикселях стоит обязательно это указывать (height=»23%», width=»5px».) Все размеры в обязательном порядке задаются целыми числами (width=»7,5px — неверно»)
  • Никогда не забывайте закрывать теги (<body>…<body> — неверно!)
  • Одиночные теги, не требующие закрытия, используются с закрывающим слешем (<br/>). Это необходимо для правильного отображения в xhtml и проверки на валидность (<br> — не рекомендуется)
  • Старайтесь не оставлять в коде лишние ненужные комментарии, не несущие практической пользы вам или другому web-мастеру.
  • JavaScript и CSS лучше всего сохранять и править в отдельном файле. Это не только удобно, но и позволяет сократить код страницы.
  • Не забывайте об использовании тегов H1 — H6 и мета-тегов для SEO-оптимизации (два или более H1 на одной странице — неверно).
  • title, keywords и description располагайте вверху страницы, сразу после открытия <head>.
  • Добавьте к картинкам атрибут «Alt».

Публикация в Интернете

Итак, ваш сайт готов, осталось выложить его в Сеть. Для этого загрузите все файлы вашего сайта на хостинг-сервере. Сделать это можно с помощью HTTP-протокола, специальной панели управления или по FTP (с помощью клиентов Total Commander, FileZilla или любого другого). После завершения процесса копирования введите в адресную строку имя приобретенного домена и любуйтесь полученным результатом.

В мыслях о будущем

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

Основной трафик в Интернете поступает из органического поиска (поисковых систем). И качественный, простой и валидный HTML-код – обязательное требование поисковых роботов Яндекс и Google. Использование SEO-верстки, размещение оптимизированного контента, грамотное применение тегов и релевантное содержание страницы поможет вам вывести свой ресурс в ТОП поисковой выдачи. А значит – привлечь заинтересованных посетителей и достичь цели создания сайта.