Что такое верстка сайта?
Опубликовано: 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 уже ввел новый алгоритм — адаптивный дизайн, который будет влиять на ранжирование.