Что такое вёрстка и кто такой верстальщик?

Немного истории

Вёрстка – процесс оформления страниц книг, журналов, газетных полос, других видов полиграфии, а также web-страниц.

Профессия верстальщика в современном понимании появилась с развитием книгопечатания в XV–XVI веках, когда для создания книги нужно было выполнить большой объем утомительной ручной работы, чтобы скомпоновать издание, расположив на его страницах текст и картинки. Тогда в каждой типографии работал метранпаж (от французского «верстающий в страницы»). Он изготовлял макет, сводил текст в страницы, сочетал его с иллюстрациями, добавлял колонтитулы, «собирал» страницы вручную из отдельных металлических букв, пробельных элементов и металлических пластин с иллюстрациями, которые потом отпечатывались на бумаге.

В конце XIX века появилась возможность набрать текст на линотипе или монотипе с помощью клавиатуры для последующей отливки матрицы. Так готовили печатные издания до 60-х годов XX столетия.

Линотип (от лат. linea — линия и греч. týpos — отпечаток) — наборная строкоотливная машина для набора текста газет, книг и журналов и его отливки в виде монолитных металлических строк с рельефной печатной поверхностью.

Монотип – это усовершенствованная технология линотипа. Она позволяет выполнять более сложные полосы, например, содержащие формулы, иероглифы и т. д.

С развитием компьютерной техники и интернета профессия трансформировалась в HTML-верстальщика.

Кто такой HTML-верстальщик?

HTML — аббревиатура от Hyper Text Markup Language (англ.) — это язык разметки гипертекста, принятый в World Wide Web для создания и публикации web-страниц.

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

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

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

Верстальщик web-сайтов отвечает за то, чтобы интернет-ресурс во всех основных браузерах отображался корректно и одинаково, а его динамические или интерактивные элементы работали без сбоев.

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

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

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

Говоря простыми словами, дизайнер рисует будущий сайт в виде условной «картинки». Однако браузеры (Google Chrome, Яндекс.Браузер и другие) картинки не понимают. Им нужен специальный код, который показывает программе, где вывести меню на странице, фотографии, текст и другие элементы, и какими они должны быть. Все это кодируется при помощи языка разметки HTML и каскадных таблиц стилей CSS.

Последовательность этапов:

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

Виды вёрстки:

• Фиксированная — ширина сайта остается одинаковой независимо от разрешения экрана;
• Резиновая — меняется в зависимости от размера экрана пользователя;
• Адаптивная — самый сложный вид верстки, при котором страница подстраивается под различные экраны;
• Отзывчивая — слияние адаптивной и резиновой верстки. Является самой сложной с технической точки зрения, но в то же время самой эффективной;
• Версия сайта для мобильных устройств. Фактически является созданием другого сайта с другим дизайном, версткой и URL адресом.

Понятие верстки тесно переплетается с понятием валидности. Валидная верстка веб-сайта — написание HTML и CSS кода, который соответствует стандартам W3C и успешно проходит тест на валидаторе.

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

Верстать веб-сайты можно вручную в Notepad, но на это уходит много времени и сил. Поэтому разработаны специальные программы и плагины, облегчающие верстку: DreamWeaver, Amaya, KompoZer, Sublime, Komodo, Firebug, и другие.

Первые навыки верстки можно получить на любых курсах (кратко или долгосрочных) или в любом самоучителе, найденном в интернете. Имея базовые навыки html-верстальщика и небольшое портфолио своих проектов (3-4 сверстанных сайта), можно устроиться в штат какой-либо интернет-студии в качестве младшего специалиста. Хорошим верстальщиком вполне реально стать за 2-3 года работы.