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

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

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

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

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

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

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

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

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

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

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

Пример фиксированного макета — справочник по html и css — htmlbook.пример-фиксированной-верстки Размер блоков абсолютно никак не меняется с уменьшением ширины экрана, поэтому и возникает горизонтальная прокрутка.

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

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

Да, это реклама, но надеюсь, она будет полезна вам. GetUniq это сервис для вебмастеров и всех работающих с трафиком людей, с помощью которого можно выгоднее пополнять счета в кабинетах рекламных сетей, таких как Яндекс.Директ, MyTarget, ВК Таргет и другие. Без использования сервиса вам придется заплатить 1180 рублей за пополнение счета в Директе на 1000, а используя возможности Getuniq за эти же 1180 на ваш счет поступит 1100-1200 рублей! То же самое для всех других сетей. Я сам уже начал использовать и порекомендовал всем знакомым вебмастерам, рекомендую и вам. При желании, по этой ссылке вы можете почитать мой обзор сервиса.

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

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

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

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

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

Комментариев: 5
  1. Дмитрий Смирнов

    Всем здравствуйте. Совсем недавно провел адаптацию сайта под свое мобильное устройство. Если хотите узнать подробнее переходите на сайт www.mobile-version.ru. Вы спросите для чего это нужно? Тут все достаточно просто. С помощью этого появляется возможность продавать ваши товары и услуги с телефонов пользователей на девяносто процентов больше. Так же хочется сказать, что нынешние поисковые системы все больше рекомендуют адаптировать сайт под ваши смартфоны. После этой адаптации у меня исчезли ошибки в Webmaster и Yandex. Стоимость данной услуги не такая уж и большая, тем более у них сейчас действует скидка около пятидесяти процентов. Если вы считаете, что вашему бизнесу не нужна адаптация вашего телефона под разные разрешения экранов, потому что вы думаете, что почти все клиенты ищут вас в рабочее время со стационарных компьютеров, то вы грубо ошибаетесь, так как в настоящее время средняя статистика пользователей с мобильного трафика составляет приблизительно около сорока процентов. Все это достаточно безопасно. У меня не требовали доступа к базе данных, где у меня хранится весь контент, не требовали доступ к хостингу, домену, электронной почте и персональным данным. Они не стали внедрять в мой сайт различные сторонние ссылки. В общем выбор за вами.

  2. Антон

    Неплохо написано.

  3. Дмитрий

    Неее. С Мишей я согласен. Просто сделать сайт по шаблону — это уже не то). Другое дело взять шаблон и подправить его в коде или добавить что-то свое с целью достижения уникализации.

  4. Константин

    HTML и CSS когда-то изучал, даже какое-то время использовал в работе. Но нынешнее засилье систем управления контентом сводят необходимость их знать к нулю. Для решения почти любых задач есть уже готовые шаблоны — бери да пользуйся, и в код редко кто заглядывает )

    1. Михаил (автор)

      Шаблоны есть шаблоны) Хочется же иногда что-то уникальное сотворить, вот тут умение верстать пригождается

Добавить комментарий