Что такое верстка сайта — просто и понятно

На примере автомобиля

Сравню создание сайта с созданием автомобиля.

При создании нового автомобиля сперва рисуется его дизайн. Это просто картинка. Так же и в сайтостроении сперва рисуется дизайн будущего сайта.

Затем на автомобильном заводе собирается кузов и интерьер (внутренний салон) для автомобиля.

Потом устанавливается двигатель.

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

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

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

Для примера зайдите на сайт imdiz.ru/store/. Это верстка главной страницы интернет-магазина. Вы можете там поводить курсором мыши, что-то пооткрывать, ссылки меняют цвет при наведении. Но вы не сможете перейти на другие страницы сайта, их просто нет.

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

На примере интернет-магазина

У каждого сайта интернет-магазина есть страницы товаров. Например вот 2 страницы товаров одного интернет-магазина:

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

Как я уже написал, в интернет-магазине может быть и 1000 товаров, но страница товара верстается только одна. Дальше уже программист делает так, что администратор интернет-магазина сможет добавлять множество разных товаров. А верстается как бы один шаблон для всех страниц товаров. Здесь, на стадии верстки нужно просто задать, где что будет находиться (где картинка, где заголовок, где кнопка), и какие будут размеры шрифтов, какие будут цвета, например, цвет кнопки на всех страницах оранжевый. 

О верстке и интернет-браузерах

Ваш интернет-браузер (Google Chrome, Yandex Browser или другой) — это программа, которая умеет правильно обрабатывать верстку. Вы наверняка не раз сталкивались с вордовскими файлами (Microsoft Word). Это всегда файлы, в названии которых есть расширение .doc или .docx. Верстка тоже находится в файлах, и у этих файлов расширение .html. И браузеры умеют правильно открывать файлы с расширением html. Точно так же вы открываете документы с расширением .doc или .docx через Microsoft Word. Если вы откроете .doc в обычном блокноте, то скорее всего увидите какие-то иероглифы. То есть, для того, чтобы открывать документы .doc вам нужен Word. А интернет-браузеры нужны для того, чтобы правильно открывать файлы .html.

Вот что такое интернет-браузер. Когда вы открываете в интернете какой-то сайт, то браузер получает файл .html и обрабатывает его. В итоге вы видите сайт.

Верстка и дизайн сайта

Верстка делается по дизайну сайта. То есть верстка и дизайн сайта — это не одно и то же, а совершенно разные вещи. Просто некоторые, считают, что это одно и то же.

Вообще в создании сайтов есть 3 основные стадии: создание дизайна, верстка и программирование.

Дизайн — это просто картинки будущих страниц сайта. Опять же не всех страниц, если вспомнить интернет-магазин, в котором может быть 1000 товаров. Для каждой типовой страницы 1 картинка дизайна (например, 1 картинка дизайна для страницы товара). Дизайн — это обычные картинки, их можно открыть и в браузере, но они всё-равно останутся обычными картинками, на кнопки нажать не получится.

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

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

После верстки начинает работать программист, и после его работы сайт становится готовым.

Вот таким образом создается сайт. Сперва дизайн, потом верстка, потом программирование.

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

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

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

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

В следующих 2-х уроках вы узнаете о технологиях, применяемых в верстке. А в четвертом уроке начнется верстка сайта.