Базовая разметка

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

Способов задания разметки множество, и если посмотреть на сайты, разработанные в разные года, то можно увидеть абсолютно непохожие подходы к созданию структуры документов. Было время, когда разметку создавали на основе таблиц, на смену таблицам пришла блочная верстка, позже появились фреймворки, такие как bootstrap. Несморя на очевидную эволюцию техник, специалисты по верстке испытывали те или иные трудности в работе. Например, меня всегда мучал вопрос с вертикальным вырававниванием внутри блока. Ну не люблю я не табличный элемент заставлять вести себя как табличный. Решение долго блуждало где-то неподалеку, но окончательно большинство неудобных приемов удалось избежать благодаря появлению и массовой поддержкой браузерами спецификации "CSS Flexible Box Layout Module" или сокращенно FlexBox.

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

Создаем необходимые файлы

Итак, приступим.

В директории сайта создаем базовый минимум файлов:

  • index.html
  • style.css

Открываем в редакторе кода файл index.html и прописываем туда необходимый минимум тегов для оформления html-документа.

<!DOCTYPE html>
<html lang="ru">
    <head>
        <!--Блок мета-тегов-->
            <meta charset="utf-8">
            <title>Название сайта/страницы</title>
            <meta name="description" content="">
            <meta name="keywords" content="">
            <meta name="author" content="">
            <meta name="publisher" content="">
            <meta name="robots" content="">
            <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <!--Блок подключения стилей, шрифтов и т.д-->
            <link href="style.css" rel="stylesheet">
            <link href="favicon.png" rel="icon/png">
    </head>
    <body>
        <!--Тело документа, здесь будет располагаться основа разметки-->
        <!--Блок подключения скриптов-->
            <script src="http://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    </body>
</html>

Обнуляем стили

Каждый браузер по умолчанию показывает html-страницу по разному. Все дело в том, что у каждого браузера есть свои базовые стили. Для того, чтобы базовые стили не мешали странице выглядеть так, как планировалось, их необходимо обнулить. Можно делать это по ходу проведения работ по верстке, но корректнее всего будет "обнулить" браузерные стили перед подключением основных стиле. Для этого в файле style.css можно вставить блоки стилей с обнулением либо подключить отдельный "сбрасывающий" файл. Самих схем обнуления предостаточно, разработчики их выкладывают на github в свободный доступ. Обычно они имеют название reset.css.

Оформляем разметку

После выполнения вышеописанных шагов, пришло время приступать непосредственно к указанию разметки сайта. Для начала, создадим пустые контейнеры базовой разметки, а затем пропишем для них css-свойства, основываясь на технике flexbox, для того, чтобы они вели себя так, как нам необходимо. Я приведу фрагмент кода, который необходимо вставить внутрь тега body. В примере создадим базовый вариант разметки главной страницы с боковой колонкой, для большей наглядности. Будем отталкиваемся от ширины экрана в 1920px и ширины контента в 1200px.

...
<body>
    <!--Верхний колонтитул сайта - "шапка"-->
        <header>

        </header>
    <!--Основное содержимое сайта-->
        <main>
            <!--Главный экран сайта-->
                <section class="full-width">

                </section>
            <!--Секция сайта с боковой колонкой-->
                <section class="no-full-width">
                    <!--Основное содержимое сайта - контент-->
                        <article>

                        </article>
                    <!--Дополнительное содержимое сайта - боковая колонка - "сайдбар"-->
                        <aside>

                        </aside>
                </section>
        </main>
    <!--Нижний колонтитул сайта - "подвал"-->
        <footer>

        </footer>
</body>
...

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

Создаем стили для элементов

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

header
main-content
main-screen
content
sidebar

Вот такой схемы расположения элементов нам необходимо добиться. Сделаем это, используя технику flexbox. Открываем файл style.css в редакторе кода и начинаем заполнять необходимые стили. Все наши стили прописываем после стилей "обнуления". Для большей наглядности, окрасим разные элементы в разные цвета.

...
body {
    width: 100%; /*устанавливаем ширину на весь экран*/
    height: auto; /*высота будет зависеть от контента*/
    display: flex; /*указываем тип контейнера*/
    flex-direction: column; /*указываем направление главной оси - сверху-вниз*/
    justify-content: flex-start; /*выравнивание дочерних элементов вдоль главной оси*/
    align-items: center; /*выравнивание дочерних элементов вдоль поперечной оси*/
}
header {
    width: 100%;
    height: 50px; /*статичная высота*/
    background: rgb(196, 97, 41);
}
main {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
section.full-width {
    width: 100%;
    height: 100vh; /*высота равна высота экрана*/
    background: rgb(106, 158, 121);
}
section.no-full-width {
    width: 1200px; /*ширина секции с контентом и боковой колонкой*/
    height: auto;
    display: flex;
    flex-direction: row; /*необязательно, так как по умолчанию элементы так и располагаются*/
    justify-content: space-between; /*прижимаем дочерние элементы к концам оси родителя*/
    align-items: flex-start; /*необзательно, привожу для наглядности*/
}
article {
    width: 70%; /*либо точное значение в пикселях*/
    height: 400px; /*приведем для наглядности, можно оставить auto*/
    background: rgb(99, 116, 232);
}
aside {
    width: 28%;
    height: 400px;
    background: rgb(235, 190, 99);
}
footer {
    width: 100%;
    height: 50px;
    background: rgb(190, 109, 223);
}

Прописав все стили, указанные выше и открыв страницу index.html в браузере, мы увидим такую разметку:

Вывод

Вот таким простым и быстрым способом, с помощью техники flexbox можно создать разметку страницы.

Юрий Скачко

14.11.2017