Верстка сайта - процесс перевода картинки (формата .jpg, .gif, .png, обычно .PSD) в HTML-шаблон. Данная процедура является одним их этапов создания сайта.
HTML-шаблон – набор файлов, состоящий из html-страниц(в них определяются правила верстки страницы), файлов картинок, стилей, скриптов, используемых для отображения в интернет. HTML-шаблон передаётся веб-программистам для дальнейшей разработки сайта.
На этапе создания сайта, дизайнер разрабатывает макет сайта. Для этого используются различные графические редакторы, обычно это Adobe PhotoShop и Corel. HTML-верстальщик приступает к верстке сайта после утверждения и передаче ему соответствующего макета.
Стандартное требование HTML-верстальщика, чтобы макет был в формате .PSD. Это позволяет ему быстрее и качественнее сверстать сайт, так как данный формат предполагает наличие в нём слоёв. Каждый слой – это один элемент. А так как верстка осуществляется по-элементно, то процесс верстки при наличии слоев занимает меньше времени.
В процессе верстки, html-верстальщик создаёт html-шаблон, где прописывается структура документа с использование специальных тегов. Из макета верстальщик вырезает необходимые элементы, оптимизирует их и вносит в html-шаблон. Задача верстальщика – идентичное отображение предоставленного макета и создаваемого им html-шаблона – с одной стороны. С другой стороны – html-шаблон должен быть оптимизирован по интернет (быстро загружаться, иметь интерактивные элементы, понятную структуру для программиста).
HTML-верстальщик в процессе создания html-шаблона оперирует не только знанием html-тегов для правильной верстки, а в том числе, должен понимать как правильно оформлять таблицы стилей(CSS), должен понимать как реализовываются интерактивные компоненты (JavaScript, jQuery). Качественный html-шаблон должен содержать в себе все ответы на вопрос «Как должна быть представлена информация на сайте?».
Есть четкие требования, описывающие качество html-шаблонов.
Требования к качеству html-верстки. Тестирование верстки сайта.
Относительно верстки сайта существуют очень чёткие требования, которым должна соответствовать качественная html-верстка:
Быть идентичной предоставленному макету.
Открываться во всех броузерах одинаково. На текущий момент верстка сайта должна правильно отображаться как минимум в IE, Opera, FireFox, Safari, Chrome.
Не содержать в себе ошибок, соответствовать стандартам. Есть стандарты верстки W3C, а также специальные проверяющие сервисы.
Занимать оптимальный размер при просмотре пользователем. Понятие оптимальный размер предполагает некий компромисс между объемом, например картинки и качеством её отображения на странице. Если можно уменьшить объем без потери качества это нужно сделать.
Одинаково хорошо отображаться на различных мониторах (разрешениях экрана). Мониторы у всех разные и следовательно сайт должен отображаться на них одинаково хорошо.
Тянущаяся (резиновая). Проверить «резиновую» верстку можно очень просто. Откройте любую страницу в броузере, сделайте размер окна броузера чуть меньше, чем он есть. Если сайт при этом как бы сжимается-разжимается при изменении размера окна броузера, то верстка данного сайта называют – «резиновая».
Не тянущаяся (статическая). Не тянущиеся страницы при изменении размера окна броузера не меняют расположение элементов.