Каждый этап создания сайта требует тщательной проработки, поскольку даже малейшее необдуманное решение может обрушить посещаемость.
Создание сайта состоит из следующих этапов:
- Планирование. Это определение целей, аудитории и средств воздействия на неё;
- Создание контента: текстов, видео, изображений;
- Конструирование макета (дизайна) сайта;
- Вёрстка сайта.
Создание и подбор содержимого можно доверить копирайтеру. Можно найти и готовые статьи, уникальные «свежие» фотографии и картинки, видео.
Как сайт обретает внешний вид
Дизайн сайта
Далее контент нужно «облечь в форму», расположить на странице или наложить на интересный фон. Разработка макета (дизайна) производится в графическом редакторе (CorelDraw, Photoshop, PixBuilder Studio др.). Главное, чтобы результат был удобен и привлекателен для конечного пользователя: интересные, но чёткие шрифты, хорошо видные на фоне страницы. На ней должны располагаться «цепляющие» элементы, которые заставят посетителя подольше задержаться на странице. А сама композиция функциональных блоков и изображений, сочетание цветов требует гармоничности и продуманности.
Внешний вид страницы в целом не должен отвлекать от контента, а излишне назойливые элементы скорее отпугнут. Разработку макета сайта выполняет веб-дизайнер.
Вёрстка сайта
Далее начинается дело верстальщика. Он создаёт сами веб-страницы с помощью языков программирования HTML, CSS и JavaScript, превращая макет в раздел сайта. Он должен знать, как работать с графическим редактором, как при помощи вышеназванных языков создать структуру сайта и добиться некоторых эффектов, например, как сделать картинку фоном. Для непосвящённых верстальщик просто пишет код из непонятных букв и значков.
Код пишут в блокноте или программе-редакторе: Notepad++, SublimeText, DreamVeawer и др. Блокнот — это вариант для мастеров старой закалки, но большинство предпочитает редакторы. Их функционал облегчает и ускоряет написание кода, но не отменяет его знание.
В первую очередь в HTML прописывается структура сайта, которая зависит от слоёв макета. Далее в CSS для структурных блоков задаются стили. Затем прорабатываются мелкие элементы. Готовые страницы нужно просматривать во всех популярных браузерах, т.к. разные элементы они отображают по-разному.
HTML и CSS
Сайты пишутся с помощью единого языка, понимаемого программистами и компьютерами во всех странах мира.
HTML (HyperText Markup Language) — язык гипертекстовой разметки, разработанный специально для создания веб-страниц. Без него невозможно создание статического сайта. Он формирует его структуру. Грубо говоря, это инструкция для браузера, как показывать элементы страницы.
Язык состоит из тегов, которые несут информацию о форматировании и разметке страницы. В зависимости от него его содержимое отображается, причём в заданном варианте. Но он не может сделать привлекательным внешний вид страницы, разные эффекты и т.д.
CSS (Cascading Style Sheets) буквально переводится как каскадные таблицы стилей. Этот язык распространён, причём давно, поэтому сайт без него — это нонсенс. Получается, что веб-страница состоит из HTML-файла и подключенного к нему с помощью тега link CSS-документа. CSS дополняет HTML, позволяя сделать страницы интереснее и красивее. Он позволяет изменять внешний вид элементов, гибко настраивать значимые части страниц. Например, менять шрифты и цвета текста.
Также CSS позволяет сделать сайт адаптивным, т.е. удобным к просмотру на устройствах с разной диагональю: смартфон, планшет, десктоп или телевизор.
Синтаксис у этого языка один из самых простых. Стили состоят из селекторов, описания их свойств и значений.