Четыре различных способа создания HTML / CSS макета для сайта

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

Первый день новой жизни

В этой статье мы используем четыре различных способа верстки сайта:

  • Таблицы. Вам даже не нужно использовать отдельный файл стилей. И, что более важно, они не ломаются.
  • Float. Мы говорим о свойстве CSS. Это довольно распространенный способ создания макета веб-страницы. И в этом случае нам необходимо будет использовать отдельную таблицу стилей. Файл HTML используется, только чтобы определить контент веб-страницы. Если вы хотите выровнять контент, то должны использовать файл CSS.
  • CSS-фреймворки. Они работают так же, как JavaScript-фреймворки. Подключите исходный файл в заголовке (например, <link rel="stylesheet" type="text/css" href="stylesheets/framework_file.css">), и он готов к работе! Вам не нужно задавать значения свойств самостоятельно. Для этого используются классы, которые разработчики фреймворка приготовили для вас.
  • Флексбокс. Флексбокс - это короткое название CSS Flexible Box Layout Module. Это более новая по сравнению со свойством float технология. Основной принцип флексбокс - предоставить контейнеру возможность изменять ширину, высоту и порядок содержащихся в нем элементов. Если вы хотите наилучшим образом заполнить все свободное пространство, нужно использовать для верстки div флексбокс. Например, для охвата всех типов устройств и размеров экрана. Плавающий контейнер будет расширять содержащиеся в нем элементы, чтобы заполнить весь экран.

Теперь пора попробовать каждый из них.

Способы создания

Это дизайн моего сайта:

Z1DSMYC

Таблицы

Для создания шапки сайта я использовал свойство position: relative. Давайте попробуем сделать это с нуля, используя табличную верстку.

Вот мой HTML-код:

<table height="230px" background="images/header1.jpg">
    <tr>
        <td colspan="3"></td>
        <td colspan="3" style="font-size: 4em; font-weight: bold" valign="bottom">Cinematron</td>
    </tr>
    <tr>
        <td colspan="2"></td>
        <td colspan="4" style="font-size: 1.3em; font-weight: bold;" valign="top">All the stuff you need to know about the movies</td>
    </tr>
    <tr>
        <td width="400px"></td>
        <td width="70px"><a href="#">HOME</a></td>
        <td width="120px"><a href="#">PREMIERES</a></td>
        <td width="120px"><a href="#">BOX-OFFICE</a></td>
        <td width="80px"><a href="#">PHOTOS</a></td>
        <td ><input type="search" placeholder="search"></td>
    </tr>
</table>

И вот, что я получил:

RyhmXS3

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

table, td {
    border-collapse: collapse;
    border: 1px solid red;
}

И вы увидите, что макет стал выглядеть так:

ru8yB0Y.png Visible borders.png Visible borders

Таким образом, можно легко определить, что где находится, если запутались.

Теперь плохая новость. Еще раз посмотрите на HTML-код. Это простая таблица, но представьте, как она будет выглядеть с десятками ячеек. Вот какой исходный код у меня:

<div id="header">
    <h2>Cinematron</h2>
    <p>All the stuff you need to know about the movies</p>
    <ul id="menu">
        <li>home</li>
        <li>premieres</li>
        <li>box-office</li>
        <li>photos</li>
        <li><input type="search" placeholder="search"></li>
    </ul>
</div>

И файл CSS:

#header {
    height: 230px;
    background-image: url(../images/header1.jpg);
    background-repeat: no-repeat;
    font-family: 'Shift', sans-serif;
}
#header h2 {    
    font-size: 4em;
    position: relative;
    top: 30px;
    left: 550px;
    display: inline;
}
#header p {
    font-size: 1.3em;
    font-weight: bold;
    position: relative;
    top: 50px;
    left: 60px;
    display: inline
}    
#menu {
    position: relative;
    top: 100px;
    left: 340px;
    display: inline-block;
}
#menu li{
    font-weight: bold;
    display: inline;
    text-transform: uppercase;
    margin-right: 14px;
}
#menu input {
    font-size: 0.7em;
    text-transform: lowercase;
    text-align: right;
    position: relative;
    top: -4px;
}

В этом случае вам нужно использовать блочную верстку сайта с помощью CSS. Применив что-то наподобие этого:

div {
    position: relative;
    top: 100px;
    left: 100px;
}

Вы указываете переместить <div> на 100 пикселей вниз и на 100 пикселей вправо по отношению к его исходной позиции. С помощью этих свойств легко перемещать текст на странице. Можно перемещать его из одного угла в другой, чтобы определить, какое положение является наилучшим. Это лучше, чем таблица.

Float

Свойство float широко применяется при блочной верстке сайта. Мы будем использовать это свойство для вывода основной области размещения контента. Небольшой пример поможет вам лучше понять, как это работает:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head> 
    <body>
        <div id="green"></div>
        <div id="red"></div>
        <div id="blue"></div>
    </body>
</html>

В нем есть три разноцветных элемента <div>. Зеленый для основных статей, красный для новостных статей и синий для подвала.

А вот файл CSS:

#green {
    width: 200px;
    height: 200px;
    border: 1px solid green;
    float: left;
    margin: 5px;
}
#red {
    width: 100px;
    height: 200px;
    border: 1px solid red;
    margin: 5px;
    float: left;
}
#blue {
    width: 310px;
    height: 100px;
    border: 1px solid blue;
    margin: 5px;
    clear: both;
}

И вот, что у нас получилось:

MUBpU8Q

При верстке слоями вы указываете через свойство float, что хотите, чтобы ваш элемент <div> был плавающим. Затем задаете для него направление смещения. Обычно это float: left или float: right. Когда вы указываете элементу <div> смещаться влево, он это и будет делать, пока не закончится свободное пространство.

Следующий плавающей элемент будет смещаться, пока не встретит первый, и так далее. Следующий за плавающим элемент будет обтекать его как вода! Но если вы не хотите спускать все свои объекты "на воду", можно использовать свойство clear. Оно определяет, какие стороны элемента не должны обтекать плавающие элементы.

Вот как выглядит часть моего макета для основного контента:

<div id="main-content">
    <div class="article">
        <h2>First article header</h2>
        <img src="images/star_wars.jpg">
        <p>First article body<a href="#">Read more</a></p>
    </div>
    <div class="article">
        <h2>Second article header</h2>
        <img src="images/Interstellar.jpg">
        <p>Second article body<a href="#">Read more</a></p>
    </div>
</div>
<div id="news">
    <div class="news-article">
        <h3>First news article header</h3>
        <p>First news article body</p>
    </div>
    <div class="news-article">
        <h3>Second news article header</h3>
        <p>Second news article body</p>
    </div>
</div>

Теперь давайте сделаем ее плавающей:

#main-content {
    width: 780px;
    float: left;
}
#news {
    margin-left: 20px;
    float: left;
    width: 180px;
}

Мы добавили несколько стилей и получили что-то вроде этого:

A9Tzngw

У нас есть большой блок для статей и блок поменьше для новостей. Мы использовали свойство float: left и для изображений. Обратите внимание, как они обтекаются тегом <p></p>. Этот макет выглядит, как ваш любимый журнал.

CSS-фреймворки

Если вы немного ленивы

Если у вас нет времени возиться с кодом при CSS верстке, можно использовать один из CSS-фреймворков. В нашем примере мы используем Bootstrap. Для этого нужно скачать его и подключить в HTML-файле.

Bootstrap содержит сетку, которая состоит из 12 равных по размеру столбцов. HTML-элементы упорядочиваются так, чтобы охватывать различное количество столбцов. Таким образом, создаются пользовательские макеты. Каждая часть контента выравнивается относительно этой сетки через указанное количество столбцов, на которые они растягиваются.

Вот пример:

<div class="row">
    <div class="col-md-6">
        <!--some content-->
    </div>
    <div class="col-md-6">
        <!--some more content-->
    </div>
</div>

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

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

HTML-код:

<div id="coming-soon">
    <h2>Coming Soon:</h2>
    <div class="row">
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="images/soon_01.jpg">
            </div>
        </div>
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="images/soon_02.jpg">
            </div>
        </div>
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="images/soon_03.jpg">
            </div>
        </div>
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="images/soon_04.jpg">
            </div>
        </div>
    </div>
</div>

Я также добавил класс thumbnail, чтобы сделать постеры красивее. Он также содержится в Bootstrap.

И вот, что я получил:

YLsEnoU

Выглядит неплохо. И при верстке сайта из PSD вам даже не нужно редактировать файл CSS. Но вы не видите, что происходит внутри.

Флексбокс

Классика завтрашнего дня

Мы будем использовать флексбокс, чтобы создать раздел сайта "Бокс-офис". Вот HTML-код:

<div id="boxoffice">
    <ul class="flex-container">
        <li class="item first">Cinderella: $67.9M</li>
        <li class="item second">Run All Night: $11.0M</li>
        <li class="item third">Kingsman: The Secret Service: $6.2M</li>
        <li class="item">Focus: $5.7M</li>
        <li class="item">Chappie: $5.7M</li>
        <li class="item">McFarland USA: $3.6M</li>
        <li class="item">The DUFF: $2.9M</li>
        <li class="item">American Sniper: $2.8M</li>
    </ul>
</div>

Вот CSS-код для контейнера “boxoffice”:

#boxoffice {
    width: 780px;
    height: 500px;
    background-image: url(../images/box_office_cropped.jpg);
    background-repeat: cover;
    border-radius: 5px;
    padding: 20px;
}

Теперь пришло время создать гибкий контейнер. Для этого нужно задать для элемента display: flex. Согласно правилам верстки, все элементы флексбокса располагаются вдоль главной и поперечной осей:

гибкий контейнер

Для флексбокса задаются два типа свойств. Первый используется для управления гибким контейнером, второй - для заполнения гибких элементов. Рассмотрим подробно первый тип.

По умолчанию, главная ось горизонтальная, поэтому элементы будут растягиваться в ряд. Для изменения основной оси мы можем использовать свойство flex-direction. Оно может принимать следующие значения: row, row-reverse, column и column-reverse. Мы будем использовать значение column. Давайте также добавим свойство height. Для чего это нужно, вы поймете чуть позже:

flex-container {
    height: 300px;
    display: flex;
    flex-direction: column;
}

Вот как выглядит наш небольшой бокс-офис:

6LAHU7e

Мы использовали свойство height, потому что не хотим, чтобы контейнер флексбокса перекрывал изображение стрелки в нижней части фона.

Флексбокс также дает возможность вносить изменения в содержимое без изменения HTML-файла. Например, если вы хотите поменять расположение элементов на противоположное, вы можете изменить значение flex-direction на columns-reverse. Это изменит направление флексбокса на противоположное. Но вам нужно будет также изменить порядок расположения элементов внутри контейнера.

Для этого мы используем свойство justify-content. Доступные для него значения: flex-start, flex-end, center, space-between и space-around. Для него нужно установить значение justify-content, которое эквивалентно flex-end.

Вот наш код:

.flex-container {
    height: 300px;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
}

И вот каким образом отразились эти изменения:

xAg5Vtx

Также можно перемещать элементы вдоль поперечной оси. Для этого используется свойство align-items. Вы можете задать для него следующие значения: flex-start, flex-end, center, baseline или stretch.

Чтобы использовать его, добавьте свойство в селектор флексбокса:

.flex-container {
    align-items: flex-end;
}

Все элементы сместятся к правому краю:

KE0oR9S

Есть еще одно полезное свойство - flex-wrap. Представьте, что бокс-офис быстро увеличивается. Что произойдет, если он станет больше, чем контейнер? Ничего плохого, если вы используете свойство flex-wrap.

Попробуйте добавить следующий код:

.flex-container {
    height: 300px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

И вот, что в результате получится:

Cmcpshm

Как видите, элементы теперь укладываются в несколько столбцов. Значение по умолчанию для этого свойства – nowrap. При его применении элементы будут располагаться в один столбец (или строку - это зависит от значения flex-direction). Можно использовать значение wrap-reverse. Тогда элементы будут располагаться в обратном порядке.

Есть много полезных свойств. С их помощью вы можете изменять параметры каждого отдельно взятого элемента контейнера. Например, свойство order позволяет изменять порядок размещения элементов без необходимости вносить изменения в HTML-код.

Какой из способов выбрать?

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

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

Float. Свойство float является наилучшим выбором, если у вас не слишком высокие требования. Это простой способ сделать ваш сайт более привлекательным. Его применение для изображений является, как по мне, признаком хорошего тона. Только нужно помнить, как работают свойства float и clear. Этого достаточно для начала.

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

CSS-фреймворки. Если нужно создать макет быстро, используйте фреймворки. На сегодняшний день их много. Среди них выберите тот, который вам больше подходит.

Флексбокс. Придется потратить некоторое время, чтобы узнать, как он работает. Думаю, вы уже поняли, насколько удобны флексбоксы для управления отдельными элементами.

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

Надеюсь, теперь вы знаете, что такое верстка сайта. До новых встреч!

Перевод статьи «4 Different HTML-CSS Layout Techniques to Create a Site» был подготовлен дружной командой проекта Сайтостроение от А до Я.

27 февраля 2016 в 12:15
Материалы по теме
{"url":"http://www.fastvps.ru/", "src":"/images/advbanners/fastvps.png", "alt":"Хостинг Fastvps.ru. Наш выбор!"}
Заработок