11

Каждый этап создания сайта требует тщательной проработки, поскольку даже малейшее необдуманное решение может обрушить посещаемость.

Создание сайта состоит из следующих этапов:

  • Планирование. Это определение целей, аудитории и средств воздействия на неё;
  • Создание контента: текстов, видео, изображений;
  • Конструирование макета (дизайна) сайта;
  • Вёрстка сайта.

Создание и подбор содержимого можно доверить копирайтеру. Можно найти и готовые статьи, уникальные «свежие» фотографии и картинки, видео.

Как сайт обретает внешний вид

Дизайн сайта

Далее контент нужно «облечь в форму», расположить на странице или наложить на интересный фон. Разработка макета (дизайна) производится в графическом редакторе (CorelDraw, Photoshop, PixBuilder Studio др.). Главное, чтобы результат был удобен и привлекателен для конечного пользователя: интересные, но чёткие шрифты, хорошо видные на фоне страницы. На ней должны располагаться «цепляющие» элементы, которые заставят посетителя подольше задержаться на странице. А сама композиция функциональных блоков и изображений, сочетание цветов требует гармоничности и продуманности.

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

22

Вёрстка сайта

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

Код пишут в блокноте или программе-редакторе: Notepad++, SublimeText, DreamVeawer и др. Блокнот — это вариант для мастеров старой закалки, но большинство предпочитает редакторы. Их функционал облегчает и ускоряет написание кода, но не отменяет его знание.

В первую очередь в HTML прописывается структура сайта, которая зависит от слоёв макета. Далее в CSS для структурных блоков задаются стили. Затем прорабатываются мелкие элементы. Готовые страницы нужно просматривать во всех популярных браузерах, т.к. разные элементы они отображают по-разному.

33

HTML и CSS

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

HTML (HyperText Markup Language) — язык гипертекстовой разметки, разработанный специально для создания веб-страниц. Без него невозможно создание статического сайта. Он формирует его структуру. Грубо говоря, это инструкция для браузера, как показывать элементы страницы.

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

CSS (Cascading Style Sheets) буквально переводится как каскадные таблицы стилей. Этот язык распространён, причём давно, поэтому сайт без него — это нонсенс. Получается, что веб-страница состоит из HTML-файла и подключенного к нему с помощью тега link CSS-документа. CSS дополняет HTML, позволяя сделать страницы интереснее и красивее. Он позволяет изменять внешний вид элементов, гибко настраивать значимые части страниц. Например, менять шрифты и цвета текста.

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

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