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

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

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

Виды верстки

В настоящий момент выделяют следующие типы верстки, исходя из принципа ее отображения:

  1. Статическая
  2. Резиновая
  3. Адаптивная

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

Пример кода:

#block01, #block02 { width: 300px; }

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

Пример кода:

#block01, #block02 { width: 45%; }

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

К примеру, на дисплее с высоким разрешением навигационная панель будет строкой с пунктами меню. На мобильном устройстве меню может свернуться в кнопку, размещенную в верхнем углу. После появления адаптивной верстки отпала необходимость размещения мобильных сайтов на специальных поддоменах (m.site.com).

Для ее реализации применяют 2-3 макета под размеры дисплеев основных устройств. При адаптивной верстке под каждое разрешение указываются отдельные стили CSS и параметры @media.

Пример кода:

#block01, #block02 { width: 520px; }

//для дисплеев, параметром ширины 1300px

@media (max-width: 1300px) {

#block01, #block02 { width: 470px; }

}

//для дисплеев с параметром ширины 1600px

@media (max-width: 1600px) {

#block01, #block02 { width: 600px; }

}

Табличная V.S. блочная верстка

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

Элемент «таблица» присутствует в спецификации HTML5, однако на практике табличную верстку уже никто не применяет. При этом сами таблицы продолжают использовать для отображения данных. Важным минусом в случае их использования считается задержка вывода страницы. Дело в том, что пока браузер не загрузит таблицу, ее содержимое не отобразится, поскольку браузер воспринимает всю таблицу в качестве отдельного элемента.

В блочной верстке основное внимание уделяется тегу <div>. Он представляет собой блок, свойства которого описываются посредством CSS. Этот вид верстки легче читается и индексируется. В последней версии языка гипертекстовой разметки (HTML5) добавлены новые варианты блоков: <footer>, <header>, <nav> и другие.

Каким методом пользоваться?

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

Пример кода (совмещение «адаптива» и «резины»):

#block01, #block02 { width: 100%; }

@media (min-width: 640px) {

#block01, #block02 { width: 50%; }

}

Больше информации о верстке можно узнать в нашем блоге.

Присоединяйся к DevEducation — стань востребованным специалистом и построй карьеру в IT!