Верстка интерфейса веб-приложения

дата:

Задание. Сверстать главную страницу сайта по своей теме, опираясь на разработанные ранее бриф и макет. Используйте раздел уроки сайта HTML5 book.


На примере мы рассмотрим блочную верстку:

1. Как разбить макет страницы на секции

Чтобы создать макет страницы, необходимо выделить основные разделы (секции) документа. Подробнее о секционных элементах вы можете прочитать в статье 1.11. HTML5 семантические элементы.

Стандартная веб-страница содержит следующие секции:

<body>
<header></header>
<div class="main"></div>
<footer></footer>
</body>
HTML
structure-main
РИС. 1. ОСНОВНЫЕ СЕКЦИИ СТРАНИЦЫ

Мы не будем использовать элемент <main>, так как он поддерживается не всеми браузерами.

Элементы <header>, <div> и <footer> — блочные, поэтому они будут занимать всю ширину их блока-контейнера — элемента <body>. Страница с такой разметкой будет хорошо смотреться на небольших экранах, но на устройствах с большим разрешением текст таких страниц будет неудобно читать. Поэтому необходимо добавить тег-контейнер для контента — содержимого каждой секции:

container-main
РИС. 2. ОСНОВНЫЕ СЕКЦИИ СТРАНИЦЫ С ТЕГОМ-КОНТЕЙНЕРОМ

и задать для него максимальную ширину, внутренние отступы, которые будут отделять контент от краёв экрана устройств с небольшим разрешением, а также внешние отступы, позволяющие выровнять контейнер по середине родительского блока:

.container {
  width: 100%;
  max-width: 1024px; /*максимальная ширина может иметь другое значение*/
  padding: 0 15px;
  margin: 0 auto;
}
CSS

Таким образом мы получили каркас для нашей страницы (высота секций в данном случае виртуальная, так как без содержимого секции имеют нулевую высоту).

2. Разметка шапки сайта и позиционирование её элементов

Приступим к разметке первой секции, так называемой шапки веб-страницы. Элемент <header> предназначен для группировки вводной информации и навигационных средств по странице/сайту. Добавим внутрь тега <header> логотип сайта и навигационные ссылки:

<header>
  <div class="container">
    <a href="/" class="logo">LOGO</a>
    <nav>
      <ul>
        <li><a href="">Главная</a></li>
        <li><a href="">О нас</a></li>
        <li><a href="">Контакты</a></li>
      </ul>
    </nav>
  </div>
</header>
HTML
container-header
РИС. 3. ШАПКА САЙТА С ДОБАВЛЕННЫМИ ЛОГОТИПОМ И ССЫЛКАМИ

Разместим логотип слева, а ссылки навигации — с выравниванием по правому краю шапки (для наглядности я добавила элементам белую границу):

.logo {
  float: left;
}
nav {
  float: right;
}
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block; /*один из способов разместить элементы в строку*/
}
CSS

Существует несколько способов разместить блочные элементы в строку. Все они приведены в уроке Горизонтальное меню для сайта.

header-collapse
РИС. 4. ЭФФЕКТ СХЛОПЫВАНИЯ БЛОКА-КОНТЕЙНЕРА

Обратите внимание, что после того, как мы применили обтекание, шапка исчезла. Это произошло потому, что плавающие элементы (для которых задано свойство float) изымаются из нормального потока и родительский контейнер больше не видит их высоту, поэтому и элемент <header> и элемент внутри него с классом .container схлопнулись. Чтобы исправить эту ситуацию, воспользуемся очисткой потока для элемента с классом .container:

.container:after {
  content: "";
  display: table;
  clear: both;
}
CSS

Также добавим ему вертикальные отступы, отделяющие элементы внутри него от краёв шапки. В результате стили будут иметь следующие вид:

.container {
  width: 100%;
  max-width: 1024px;
  padding: 15px;
  margin: 0 auto;
}
CSS
header-clearfix
РИС. 5. ОЧИСТКА ПОТОКА

Рассмотрим ситуацию, когда в качестве логотипа выступает картинка. Она может быть добавлена непосредственно внутрь тега или же в качестве фонового изображения. Картинка будет иметь свою высоту, которая может сильно отличаться от высоты меню навигации, поэтому перед нами встанет проблема вертикального выравнивания элементов шапки.

logo-header
РИС. 6. ЛОГОТИП-КАРТИНКА

В нашем примере высота логотипа равна 38px, поэтому чтобы выровнять ссылки меню по высоте по середине шапки, нужно задать для них соответствующую высоту строки:

nav a {
  text-decoration: none;
  line-height: 38px;
}
CSS
hyperlinks-header
РИС. 7. ВЫРАВНИВАНИЕ ССЫЛОК МЕНЮ ШАПКИ

3. Создание сетки для основной части страницы

Основная часть страницы чаще всего представляет собой сетку из блоков разной ширины. Позиционирование таких блоков осуществляется также с помощью свойства float:

<div class="main">
  <div class="container">
    <div class="col-1-3"></div>
    <div class="col-2-3"></div>
    <div class="col-1-2"></div>
    <div class="col-1-2"></div>
    <div class="col-1-4"></div>
    <div class="col-1-4"></div>
    <div class="col-1-2"></div>
  </div>
</div>
HTML
layout-main
РИС. 7. СЕТКА ОСНОВНОЙ ЧАСТИ СТРАНИЦЫ
.container div {
  float: left;
  margin-bottom: 15px;
}
.col-1-2 {
  width: 50%;  
}
.col-1-3 {
  width: 33.3333333333%;
}
.col-1-4 {
  width: 25%;
}
.col-2-3 {
  width: 66.6666666667%;
}
CSS

Высота блоков сетки определяется высотой их содержимого, поэтому она может быть разная:

different-height
РИС. 8. РАЗНАЯ ВЫСОТА ЭЛЕМЕНТОВ СЕТКИ

Высоту блоков можно зафиксировать, указав её явно, например, .container div {height: 100px}. Но в этом случае нужно быть уверенным, что при добавлении адаптивности макету содержимое блоков не будет выходить за край блока.

4. Разметка подвала страницы

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

<footer>
  <div class="container">
    <div class="col-1-3"></div>
    <div class="col-1-3"></div>
    <div class="col-1-3"></div>
  </div>
</footer>

Комментарии

Отправить комментарий