Сайтостроение 4

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший - HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей - 4.8 из 5. Пусть вашим сайтам будет хорошо.

  • Антон

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

    2017-06-20 в 12:01 | Ответить
  • Дмитрий

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

    2016-07-08 в 1:41 | Ответить
  • Константин

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

    2016-07-06 в 11:05 | Ответить
    • Михаил

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

      2016-07-07 в 10:53 | Ответить