базовый курс

ГРУППА КУРСА

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

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

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

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

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

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

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

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

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

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

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

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

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

Есть два основных вида вёрстки - табличная и блочная. При табличной вёрстке отдельные части сайта располагаются в разных ячейках таблиц и таким образом получают конкретное место на странице. При блочной вёрстке каждая часть сайта находится в блоке, а расположение этих блоков устанавливается с помощью позиционирования. Считается, что блочная вёрстка более современная. Однако, многие люди, которые так говорят, не понимают, о чём идёт речь. Блочная вёрстка стала часто использоваться потому, что дизайн некоторых современных сайтов трудно реализовать при помощи таблиц. Кроме того, блочная вёрстка применяется в системах управления контентом. Но если Вы делаете обычный сайт, то удобнее использовать табличную вёрстку, потому что она проще. Иногда оба вида вёрстки совмещают: основная часть сайта находится в таблицах, но отдельные элементы располагаются с помощью позиционирования. Вы можете сами выбирать, какой вид для Вас удобнее.

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

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

Media запросы

Иногда для отдельных элементов страницы нужно установить разный стиль в зависимости от размеров экрана. Это делается с помощью media запросов. Media запрос создаётся так: сначала идёт ключевое слово @media, затем можно указать типы устройств и условия, при которых должен применяться стиль. После этого в фигурных скобках пишется обычный CSS код. Если устройство соответствует условиям, указанным в медиа запросе, то код будет применён к элементам страницы. Пример:

Стиль:

+
1
2
3
4
5
6
<!DOCTYPE html>
<html>
<head>
<title>Страница</title>
<meta charset="utf-8">
<style>
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
img
  {
  width: 900px;
  }
@media screen and (max-width: 900px)
  {
  img
    {
    width: 600px;
    }
  }
@media screen and (max-width: 600px)
  {
  img
    {
    width: 400px;
    }
  }

HTML код:

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

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

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

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