Div верстка является актуальной моделью создания сайтов.
В сети постоянно появляются новые сайты - новостные порталы, блоги и личные странички. Практически каждый из них создается на основе блочной модели, основу которой составляют блоки DIV. Сегодня мы разберемся в этой технологии, рассмотрим основные нюансы div верстки.
Оглавление:
Поток HTML документа
Если вспомнить о том, что язык HTML позволяет структурировать гипертекстовую информацию, то становится понятно, что любой сайт, по своей сути, является набором блоков: картинки, текст, ссылки и тд. Мы сейчас не говорим конкретно о блоках DIV, но это тесно связанные темы.
Итак, мы имеем некий поток данных, из которых и собирается HTML страница. На данный момент различают два типа структурных элементов: блочные и строчные. Блочные, в нормальном HTML потоке располагаются друг за другом в вертикальном порядке. При этом, по умолчанию ширина блока занимаем все доступное место, относительно страницы или родительского элемента. В свою очередь, строчные элементы располагаются друг за другом в горизонтальном порядке.
Основными представителями этих двух категорий, являются тэги div и span.
Соответственно, если речь идет о нормальном HTML потоке, все блоки div будут располагаться друг под другом, а span в линию.
Как вы понимаете, строчными элементами не получится создать нормальную разметку для сайта. Поэтому несколько лет назад, на смену табличной верстке, решили применять верстку на основе блоков DIV.
DIV верстка сайта
Итак, для разметки сайта стали использовать блоки DIV. Используя их, можно была расчертить основной макет, и создать дополнительные блоки для всех необходимых типов контента.
Давайте посмотрим этот процесс, на примере стандартной страницы, включающей в себя шапку, блок контента, сайдбар и футер.
Это классический вариант. В шапке сайта чаще всего располагается логотип, в боковом блоке навигационные ссылки. Основной блок используется для вывода информации - статьи, описании компании, фото архив и тд. В нижнем блоке можно вставить адрес, контакты и прочую служебную информацию.
Как вы видите на картинке, для верстки макета у нас используются следующие основные блоки:
- MAIN
- header
- nav
- content
- footer
Блок Main используется как контейнер для всего содержимого. Header - шапка сайта. Nav - блок навигации. Content - основная информация и контент. Footer - подвал сайта.
Каждый из этих блоков является контейнером DIV. Но исходя из теории, блоки должны идти друг за другом. Нам же нужно получить рассмотренный выше макет, чтобы блоки имели следующую структуру:
- MAIN
- header
- nav
- content
- footer
И плюс ко всему, располагались бы на странице так же, как мы видим на шаблоне. Как же нам добиться этого? Для этой цели мы будем использовать свойства для блоков DIV, которые позволят нам расположить их нужным образом, относительно друг друга, и страницы в целом.
Но для начала, давайте создадим саму HTML основу нашего макета, и дадим блокам наименования, чтобы можно было работать с таблицами стилей.
HTML каркас
Если пропустить все служебные теги, то каркас нашего сайта будет выглядеть вот так.
<div class="wrapper"> <div class="header">Шапка</div> <!--header--> <div class="main"> <div class="content">Контент</div> <div class="nav">Навигация</div> <!--nav--> </div> <!--main--> </div> <!--wrapper--> <div class="footer">Подвал</div> <!--footer-->
Для каждого блока у нас назначен класс. С его помощью мы будет задавать стили для блока - это поможет нам добиться нужного расположения на странице.
Самое время познакомится со стилями и свойствами, которые используются для div верстки сайта.
CSS стили
Если кто-то еще не знает, в сайтостроении уже давно используют таблицы стилей CSS. С их помощью можно изменять любой элемент на страницы. Это касается как визуального оформления для блока, так и его месторасположения и масштаба.
Float
Для начала, давайте познакомимся со свойством, которое позволяет расположить блок DIV справа или слева на странице или относительно родительского контейнера.
Небольшое отступление. Всегда когда мы будет назначать стиль для блока, он будет изменять его свойства (размер, расположение), относительно родительского контейнера.
Свойство float имеет четыре значения: none, right, left, inherit.
Нас интересует значение "слева" и "справа".
Значение float указывает на то, с какой стороны будет отображаться наш блок. Все прочие блоки будут обтекать его с противоположной стороны.
В нашем случае, для блока навигации мы должны указать значение left, а для основного контента значение right. Вот как это будет выглядеть в файле стилей:
.nav {
float:left;
}
.content {
float:right;
}Кстати, можно задать свойство только для блока навигации. Блок с контентом будет автоматически расположен справа от навигации. Это будет достигнуто, благодаря обтеканию, которое получается при задании свойства float.
Отступы в CSS: margin и padding
Теперь давайте разберемся с двумя важными свойствами, используемыми при верстке на основе блоков div. Они отвечают за отступы. Понять суть их работы проще всего на примере.
Давайте представим, что нам необходимо сделать таким образом, чтобы наш основной блок MAIN, имел небольшой отступ от шапки сайта. Это можно реализовать, если назначить для блока div с классом main, свойство margin. Оно отвечает за внешние отступы блока.
Свойство margin имеет следующие значения: [значение | проценты | auto] {1,4} | inherit.
Таким образом, вы можете указать отступ в пикселях, в процентах, поочередно для каждой стороны.
Есть возможность задавать только определенный отступ, например с верхней стороны. Это как раз наш случай. Вот как это будет реализовано:
.main {
margin-top:10px;
}
Теперь наш блок main будет иметь верхний отступ в 10 пикселей.
Теперь давайте оформить блок с навигацией и контентом. Представьте, что у нас уже есть готовый сайт. Все ссылки в навигации вплотную прилегают к левому краю страницы. А текст в блоке контента наоборот, вплотную прилегает к правой стороне. Довольно не приятное оформление. Нам нужно сделать внутренние отступы.
За это отвечает свойство padding, имеющее следующие значения: [значение | проценты] {1, 4} | inherit
Здесь тот же принцип, что и со свойством margin - можно задавать отступ для каждой стороны отдельно.
Давайте для начала отодвинем ссылки в навигации от левого края на 15 пикселей. Затем текст в блоке контента на 20 пикселей от правой стороны. В итоге наш CSS код немного дополнится:
.nav {
float:left;
padding-left: 15px;
}
.content {
float:right;
padding-right: 20px;
}Используя эти основные свойства, вы сможете добиться нужного расположения блоков DIV. В итоге вы получите готовый макет сайта, и останется только заполнить его нужной информацией.
Видео к статье:
Заключение
Мы рассмотрели только основные свойства. В действительности их существует намного больше. Но в любом случае, представленная информация будет использоваться в div верстке всегда.
Наши рекомендации
Как удалить страницу в инстаграм.
Создаем кнопки для сайта онлайн.
Стоит почитать
Зачем искать информацию на других сайтах, если все собрано у нас?