Что такое верстка сайта?

Опубликовано: 24.08.2018

видео Что такое верстка сайта?

Что такое верстка сайта и какие бывают её виды?

Всем привет. Сегодня я рассмотрю вопрос: «Что такое верстка сайта?» Очень многие из вас задают его. Это говорит о том, что пока вы очень мало знаете о сайтостроении, так как верстка — это практически один из самых главных этапов создания сайта.

Как создается сайт?

Чтобы лучше понять, что означает верстка, необходимо хорошо представлять этапы создания сайта. Мы не будем рассматривать все, а только первые из них. В частности:



Создается какой-то план, по которому будет создаваться проект. Делается ТЗ на дизайн. Рисуется дизайн сайта. Эту работу выполняет веб-дизайнер. В результате получается готовый psd-макет. Далее в работу вступает верстальщик, вот он и выполняет верстку сайта.

Хорошо, что он делает? С помощью фотошопа или другой программы для работы со слоями он открывает psd-макет, вырезает из него нужные картинки, берет нужные цвета и шрифты, и с помощью html и css кода все это воссоздает до реальной веб-страницы.


Что такое вёрстка сайта

Итак, если обобщить, то верстка — это процесс создания из простой многослойной картинки (psd-макета) реальных веб-страниц. Чтобы это сделать, нужно писать код на языках html и css. Первый отвечает за разметку страницы, а второй за ее оформление. Я не буду в этой статье подробно описывать эти две технологии, более подробно я это уже сделал. Например, здесь вы можете прочитать о том, что такое html, а здесь  — что такое css. Я попытался там объяснять все максимально подробно. Сначала нужно читать об html, а потом о css, чтобы было гораздо понятнее.


Современная верстка сайта - Начинаем с нуля

О процессе создания сайта также очень хорошо объясняется в этом видео:

Собственно, сам термин я вам объяснил, а лучше понять суть и процесс верстки вы сможете после того, как прочитаете статьи про html и css. Теперь я вам рассказу про виды верстки.

Какой бывает верстка сайта?

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

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

Пример фиксированного макета — справочник по html и css — htmlbook.

Размер блоков абсолютно никак не меняется с уменьшением ширины экрана, поэтому и возникает горизонтальная прокрутка.

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

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

Что такое адаптивная верстка сайта?

Собственно, это я уже сказал, но тут можно еще многое сказать. Для реализации адаптивности используются так называемые медиа-запросы, которые прописываются в стилях и позволяют при изменении ширины окна отменять определенные css-правила или добавлять их. Супер. Пример использования таких запросов вы можете увидеть в этой статье . Крайне рекомендую прочитать. Там, по сути, я и провожу адаптивную верстку, просто в упрощенном виде.

Адаптивная верстка подразделяется на адаптивную фиксированную и адаптивную резиновую. Разница только в том, как задается размер блокам. Если в жестко пикселях (без использования max-width) — то это фиксированная, если в процент или с применением max-width — то резиновая. В обоих случаях медиа-запросы позволяют адаптировать сайт под просмотр на любых устройствах, но подход различается.

Вот пример адаптивного шаблона:

При уменьшении ширины окна почти в 2 раза, меню и кнопки входа и регистрации свернулись в иконки.

Адаптивная верстка — это самый правильный на сегодня стандарт, учитывая то, как растет количество мобильного трафика. Например, Google уже ввел новый алгоритм — адаптивный дизайн, который будет влиять на ранжирование.

IRC (Internet Relay Chat)
rss