Немного истории
Вёрстка – процесс оформления страниц книг, журналов, газетных полос, других видов полиграфии, а также 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 года работы.
