Как самому создать сайт, или «не боги горшки обжигают»
5,186 просмотров всего, 1 просмотров сегодня
Оглавление
- Аналитика наше все
- Немного об этапах сайтостроения
- Как правильно сверстать сайт
- Базовые правила, или как не допустить ошибок
- Публикация в Интернете
- В мыслях о будущем
Что делать, если бизнесу нужен сайт, а денег на оплату услуг хорошей web-студии нет, и в ближайшее время не предвидится? Придется заняться его созданием самостоятельно. Тем более что сейчас для этого достаточно иметь доступ в Интернет, базовый уровень владения ПК, свободное время и желание. Сегодня поговорим о том, как сделать сайт с нуля и получить ресурс, который окупит потраченное время и затраченные усилия.
И еще. В этой статье мы не будем разбирать конструкторы: шаблонные решения, может быть, и подкупают своей простотой и дешевизной. Однако имеют слишком много минусов, чтобы использовать их для развития бизнеса.
Аналитика наше все
- Основные типы сайтов:
- Landing Page. Одностраничный сайт, «заточенный» под продажу небольшого количества товара, конкретной услуги или акционного предложения.
- Визитка. Самый простой и недорогой ресурс, состоит из 3-5 разделов, подходит для небольших компаний и начинающего бизнеса (преимущественно в сфере услуг).
- Корпоративный сайт. По сути, это «навороченный» сайт-визитка. Информативный, со сложным функционалом, продуманным юзабилити, большим количеством посадочных страниц и разделов для представителей различных целевых аудиторий.
- Интернет-магазин. Как понятно из названия, предназначен для продажи товаров в сети Интернет. Вариантом интернет-магазина является каталог (ресурс, на котором отсутствует возможность онлайн покупки товара).
- Новостной ресурс или блог. Цель такого сайта – предоставление пользователям интересной и полезной информации. Требует регулярного обновления контента и постоянной поддержки.
Чтобы понять, какой именно сайт вам нужен, определите для себя задачи, которые он будет решать для вашего бизнеса. Информировать об услугах компании? Приводить интернет-клиентов? Продавать продукцию или товары со склада?Таких задач может быть несколько, и качество их решения будет зависеть от того, что пользователь увидит на экране.
Немного об этапах сайтостроения
Определились с тематикой и типом сайта? Теперь нужно:
- Придумать и зарегистрировать доменное имя.
- Выбрать компанию-хостера.
- Определиться с движком (можно остановиться на бесплатной CMS).
- Подготовить материалы для наполнения (логотип, фото и картинки, файлы для скачивания, тексты).
- Разработать дизайн (самостоятельно или с помощью дизайнера-фрилансера).
Отрисовка будущих страниц сайта осуществляется в программе Adobe Photoshop. В результате вы получите PSD-файл с макетом будущего сайта, разбитый по слоям (элементам). После этого можно приступать к созданию шаблона и верстке.
Как правильно сверстать сайт
Верстку сайта тоже можно доверить фрилансеру. Но при наличии базовых знаний и большого желания все работы можно выполнить и самому. Верстать будем в HTML5. Это позволит получить более «чистый» код (в отличие от использования фреймворков). А значит, сайт будет легче и быстрее загружаться.
Все работы будут проводиться на локальном компьютере. Поэтому прежде, чем начинать работу с html, нужно создать отдельную папку для сайта. В ней мы создаем отдельную папку «images» (куда будем сохранять картинки) и текстовый файл index.
Этап 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>,будет размещается контент: все то, что пользователь увидит на экране монитора при открытии сайта. Визуально это будет выглядеть следующим образом:
После того, как вы вставили этот код в документ 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-верстки, размещение оптимизированного контента, грамотное применение тегов и релевантное содержание страницы поможет вам вывести свой ресурс в ТОП поисковой выдачи. А значит – привлечь заинтересованных посетителей и достичь цели создания сайта.
