Вёрстка страницы

В этой теме мы рассмотрим вёрстку страницы обычного сайта. Есть сайты которые выглядят иначе, и вёрстка их страниц делается по-другому. Но тот тип вёрстки, который мы рассмотрим, является самым распространённым.

Элементы сайта

Страница сайта состоит из нескольких частей. Они указаны на следующем рисунке.

Рассмотрим эти элементы.

Header - это шапка сайта. Обычно он содержит название сайта, логотип и изображение. Желательно, чтобы название или логотип были ссылкой на главную страницу. Ещё на нём могут быть дополнительные элементы, значимые для всего сайта. Например, форма авторизации.

Menu bar. Также его называют side bar.Это узкая колонка, расположенная слева или справа от контента. В ней содержится главное меню сайта. Также в ней может быть меню раздела и другая дополнительная информация. Некоторые сайты имеют такие колонки и слева и справа.

Top menu - в верхней части сайта может находиться горизонтальное меню. Оно может дублировать главное меню или отличаться от него. Иногда его делают выпадающим. При наведении на любой пункт выпадает вложенное в него меню.

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

Content - основная колонка страницы. В ней находится содержимое сайта, например статья.

Footer - подвал сайта. В нём располагаются данные о владельце сайта и авторских правах, счётчики посещаемости, ссылки на группы сайта в социальных сетях. Также в нём могут быть ссылки на важные страницы сайта.

Чтобы показать особое значение и возможности какой-то части страницы, для неё можно установить свой вид курсора.

Табличная и блочная вёрстка

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

Адаптивная вёрстка

Пользователи просматривают сайты не только на персональных компьютерах, но и на мобильных устройствах, у которых размеры экрана гораздо меньше. Поэтому нужно обеспечить нормальное отображение сайта на таких устройствах. Самое лучшее решение - это мобильная версия сайта. Но это подходит не всем, ведь по сути это два сайта с разной вёрсткой и работать с этими сайтами придётся по отдельности. Более универсальный способ - адаптивная вёрстка. Это такая вёрстка, которая позволяет страницам адаптироваться к разным размерам экранов. Размеры элементов адаптивной вёрстки зависят от размера экрана. Многие отступы и размеры указываются в процентах. Элементы могут иметь разное расположение.

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

Вёрстку сайта нужно проверять на экранах всех размеров. Нужно убедиться, что при малых размерах элементы страницы не пересекаются. Желательно делать размер текста не меньше 16 пикселей. Текст меньшего размера с трудом читается на мобильных телефонах.

Media запросы

Иногда для отдельных элементов страницы нужно установить разный стиль в зависимости от размеров экрана. Это делается с помощью media запросов. Media запрос создаётся так:

• сначала идёт ключевое слово @media
• затем можно указать типы устройств и условия, при которых должен применяться стиль
• затем в фигурных скобках пишется обычный CSS код

Если устройство соответствует условиям, указанным в медиа запросе, то код будет применён к элементам страницы. Пример:

Стиль:

img
  {
  width: 900px;
  }
@media screen and (max-width: 900px)
  {
  img
    {
    width: 600px;
    }
  }
@media screen and (max-width: 600px)
  {
  img
    {
    width: 400px;
    }
  }

HTML код:

<img src="image.jpg" alt="Разные размеры">

В строках 11 и 18 созданы медиа запросы. После ключевого слова @media идёт указание тапа устройства. screen это персональные и планшетные компьютеры и мобильные телефоны. Если для Вас тип устройства не имеет значения, то его можно не указывать. Затем следует оператор and, связывающий несколько условий. Далее идёт указание условия, при котором применяется стиль. Обычно условия - это минимальные и максимальные размеры экранов.

Этот код работает так: если страница открыта на большом экране компьютера, то применяется стиль вне media запросов. Он написан в самом начале. Если уменьшить экран до 900 пикселей то картинка становится меньше. А если уменьшить экран до 600 пикселей, то картинка будет ещё меньше. Попробуйте уменьшить ширину окна браузера и вы увидите результат работы медиа запросов.

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