Верстка

Верстка макетов - создание HTML-документов, которые отобразят все элементы сайта (графику, текст, линии и прочие блоки) в браузерах в том виде, как дизайнер расположил их в графическом макете. Верстальщики работают с предоставленными дизайнерами графическими файлами: PSD, AI, PDF и формируют из них интерактивные HTML-документы. Верстка определяет, как будет выглядеть тот или иной элемент и сайт в целом; на этапе верстки реализуются интерактивные функции, зависимые от поведения пользователя, просматривающего макеты, например: подсветка ссылок при наведении мыши; замена изображений при наведении на какое-либо из них и т.п. Работая с макетом дизайна, верстальщик разделяет его на элементы: изображения и их части, заголовки, фоны страниц и информационных блоков, навигационное меню, блоки ссылок. Для каждого элемента создается стиль, описывающий его внешний вид и поведение. Стили описываются в документе CSS: каскадной таблице стилей. Набор HTML-страниц и CSS-файлов представляют собой готовый статический сайт: он выглядит так же, как завершенный, но при этом возможности управления контентом не реализованы, т.к. сайт не привязан ни к какой системе управления.

Варианты верстки макетов

Существует 3 способа верстки макетов, в зависимости от того, как дизайнер планировал работу сайта:

  1. Фиксированная верстка. Ширина страницы всегда одинакова. Если ширина экрана пользователя меньше, чем ширина макета - появляется полоса горизонтальной прокрутки.
  2. Резиновая верстка. Ширина информационных блоков указывается в процентах от ширины экрана пользователя. Такой сайт растягивается на весь экран и сужается до минимальной ширины без появления горизонтальной прокрутки.
  3. Адаптивная верстка. Количество и размеры показываемых информационных блоков зависят от ширины экрана пользователя. Это самый современный способ верстки: если экран пользователя достаточно широк, возможнен показ дополнительных элементов дизайна (например, рекламных блоков). Если экран небольшого размера - показывается самый важный контент, при этом страница не выглядит перегруженной.

Способы верстки макетов сайта

Сверстать макеты сайта можно двумя способами:

  • табличным;
  • блочным.

Табличная верстка применялась ранее, в настоящее время используется редко из-за громоздкого кода. В этом случае верстальщик разделяет макет на строки и столбцы таблицы, каждый элемент дизайна размещается в своей ячейке. Для каждой ячейки указывается ширина, высота и длина. Макет делится на строки, например: шапка сайта, верхнее меню, поиск, заголовок, текст, нижнее меню, блок копирайтов. Каждый из этих элементов в свою очередь может содержать дополнительные таблицы, например: строка поиска и кнопка "найти" будут представлять собой таблицу из одной строки и двух столбцов. В левом столбце разместится строка для ввода поискового запроса, в правом - кнопка "найти". Блочная верстка описывает размер, положение и внешний вид каждого из элементов: фона страницы, логотипа, слогана, навигационного меню (и всех элементов этого меню) и так далее. Для однотипных элементов (например, одинаковых зеленых кнопок) создается 1 стиль в документе CSS, далее для всех одинаковых кнопок в HTML-документе указывается ссылка на этот стиль.  Блочная верстка - это компактный и чистый код HTML-страниц, удобный для обновления и изменения. Группа компаний 7Version рада предложить вам свои услуги в разработке и продвижении сайтов. Вы можете обратиться к нам по телефону или электронной почте, указанных на сайте в разделе контактов и мы обязательно поможем вам.

Обратитесь в 7Version
и получите комплексное предложение по развитию вашего бизнеса
Выберите правильный ответ
Вы получите подтверждение в течение 15 минут в рабочее время. Онлайн-консультант доступен с 10 до 19 Мск (GMT +3)