5. Верстка Что такое верстка?

Верстка страницы представляет собой создание кода HTML и CSS. Соответственно человека, занимающегося версткой страниц, называют верстальщиком. Его работа заключается в правильном расположении (в соответствии с макетом или прототипом) элементов веб-страницы и обеспечении правильного ее отображения в различных распространенных браузерах и при различных настройках операционной системы.

Языки HTML и CSS не являются языками программирования, поэтому верстальщик не всегда является программистом. В командах, занимающихся созданием веб-сайтов «под ключ» в промышленном стандарте, часто встречается строгое разделение обязанностей каждого отдельного человека: одни задают концепции, другие занимаются дизайном и созданием макета, третьи — копирайтингом, четвертые — версткой, пятые — программ­и­рованием и т. д.

С кем взаимодействует верстальщик?

Если человек занимается только версткой, то он обязательно взаимодействует в основном с дизайне­рами — специалистами по проектированию. Дизайнеры подготавливают макет страницы и финальную версию спецификации⁴.

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

Как создается веб-страница?

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

Рисунок 5.2. Модульная сетка

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

Рисунок 5.3. Лейаут

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

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

Благодаря этому команда разработчиков экономит ресурсы, которые потом требовались бы для изменений и исправлений. Кроме того, прототип полезен для всех участников команды: художникам более понятен объект оформления, программисты могут точнее оценить объем работы для реализации функциональности и т.д.

Рисунок 5.4. Прототип

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

Рисунок 5.5. Графический макет

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