Верстка

/
/
/ Верстка

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

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

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

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

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

«Резиновая» ширина — полосы сайта растягиваются на весь экран, занимая место в соответствии настройкам верстальщика.

Существует несколько видов подхода к верстке:
  • табличная вёрстка
  • вёрстка слоями
  • блочная вёрстка
  • вёрстка фреймами

Сайты, по макету вёрстки, делятся на три группы:
  • жёстко фиксированные (Rigid fixed)
  • адаптивные резиновые (Adaptable fluid)
  • расширяемые эластичные (Expandable elastic) макеты.
  • Фиксированный тип макета — дизайн (табличный либо блочный), в котором ширина столбца/рисунка заданы в пикселях, то есть указаны точно.

       Преимущества:
    Такой дизайн гораздо легче разрабатывать, можно предугадать как будет выглядеть сайт. Дизайнер может следить за размером строки.

       Недостатки:
    На различных разрешениях может появиться горизонтальная прокрутка, у сайта существует только одно оптимальное разрешение экрана.

  • Резиновый тип макета — дизайн, в котором ширина столбца(рисунка) задана в процентах от текущего разрешения экрана.

       Преимущества:
    Сайт заполняет всё пространство браузера, что порядочно улучшает его вид. Сайт с таким дизайном одинаково смотрится на разных разрешениях.

       Недостатки:
    Разработка такого дизайна сплошной эксперимент, не известно, как поведёт себя структура сайта в любой момент. Возможно появление очень длинных строк на больших разрешениях, что значительно доставляет хлопот читателю.

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

       Преимущества:
    Сайт будет отображаться на различных размерах экрана так, как это наиболее удобно пользователю.

       Недостатки:
    Требует более тщательной проработки нескольких макетов, для экранов разных размеров.

У каждого вида дизайна есть свои нюансы и выбор зависит от решаемой задачи. Так же можно использовать и смешанный дизайн, где некоторые столбцы табличного дизайна допускается задать в процентах, а другие в пикселях.

Комментарии отсутствуют
Добавить комментарий
Имя*
Почта
Текст комментария*
Отправка данных...