В целом у нас уже есть все теоретические знания, чтобы приступить к созданию шаблона. Первым этапом должна стать подготовка модульной сетки. Делается это на основе дизайна будущего сайта. Очень часто новичкам советуют изучать код готовых шаблонов и учиться по ним. Я, на основе своей многолетней практики, могу со всей ответственностью заявить, что это крайне порочный совет. Можно иногда подсмотреть html-код дизайна, но только в том разрезе, чтобы уточнить точные размеры каких-то элементов, и не «лазить» по экрану с рулеткой.
Самый лучший код - это код, написанный собственноручно. Во первых - это единственный способ чему-то научиться. Во-вторых вы не будете слепо копировать то количество «быдлокода», которое часто кочует от шаблона к шаблону.
Для простоты попробуем сделать макет моего сайта в виде блоков. Такой пример я уже приводил в прошлом уроке. Сейчас рассмотрим как это делается со всеми деталями.
Начальная схема html-кода
Каждый элемент - отдельный блок. Единственный момент, который не совсем очевиден для новичка - это использование общего контейнера. Любой сайт должен иметь общий контейнер. Иногда встречаются шаблоны, где в качастве основного контейнера используется тэг BODY. На практике это крайне неудобный вариант, поскольку свой блок для контейнера автоматом снимает все вопросы об отступах: как внутренних, так и внешних. Каждый блок - это обычный DIV.
<div> <div>ШАПКА</div> <div> <div>КОНТЕНТ</div> <div>САЙДБАР</div> <div class="clearfix"></div> </div> <div>ПОДВАЛ</div> </div>
Родительский DIV - это контейнер. Сайдбар и контент мы также помещаем в свой общий блок.
Запись div.clearfix - указывает применить к блоку стили определенные классом clearfix. В MaxSite CMS этот класс находится в css-файле default-шаблона. Поскольку мы будем делать свой шаблон по технологии default, то в нашем шаблоне будет доступен как этот класс, так и множество других.
Класс clearfix предназначен для подавления float-эффекта. То есть это примерно эквивалентно коду:
<div style="clear: both"></div>
Блок контента и блок сайдбара у нас предполагаются в виде float-блоков, именно поэтому после них мы и добавляем div.clearfix.
Наш макет пока не имеет никакого форматирования, поэтому всё, что мы увидим, так это несколько строчек с названиями блоков. Очевидно, что нам нужно задать стили для позиционирования.
Использование css-хелперов
Хелперы (helpers), помощники - это некие предопределенные css-классы с какими-то стилями под типовые задачи. Например можно указывать style="background: red;", но несколько проще и удобней «class="bg-red"». Класс bg-red определен в стилях так:
.bg-red {background-color: red}То есть тот же стиль. Аналогично определены и некоторые другие css-стили специально для хелперов. В нашу задачу не входит их изучение, поэтому посмотреть вы их сможете самостоятельно в default-шаблоне: css/style-all.css. Секция «/* HELPERS */» в конце файла.
Одновременное указание множества классов
В HTML для одного тэга можно указывать сразу несколько классов. Делается это в атрибуте class через пробел. Например:
<div class="bg-red yellow">Текст</div>
В данном случае для DIV вначале применятся стили класса bg-red, после - yellow. Интуитивно несложно догадаться, что это желтый текст на красном фоне.
Дальше мы попробуем составить наш макет, стараясь ориентироваться на готовые классы.
Позиционирование контейнера
Наш контейнер должен быть выведен по центру браузера. Для выравнивания текста существует css-свойство text-align, которое не работает для блоков. Поэтому для центрирования блоков используется небольшая хитрость с использованием margin. Одним из возможных значений отступа может быть auto. Браузер берет на себя расчет размера отступа. Так вот, если указать auto у левого и правого края, то они станут равными, что визуально приведет к центрированию блока.
У нас уже есть хелпер под этот стиль - .margin-center.
.margin-center {margin: 0 auto}
Для наглядности я добавил серый блок, иммитирующий поля браузера.
<div class="bg-gray"> <div class="margin-center bg-yellow"> <div>ШАПКА</div> <div> <div>КОНТЕНТ</div> <div>САЙДБАР</div> <div class="clearfix"></div> </div> <div>ПОДВАЛ</div> </div> </div>
Мы видим, что желтый блок (контейнер) у нас занял 100% ширину родителя. Одна из ошибок начинающих верстальщиков - нужно всегда указывать ширину блока. Единственное исключение - если блок занимает 100% ширины родителя. Мы ведь уже знаем, что любой блок по-умолчанию стремится занять всю ширину, вот поэтому у нас и образовались нулевые отступы.
Добавляем ширину.
<div class="bg-gray"> <div class="margin-center bg-yellow" style="width: 400px"> <div>ШАПКА</div> <div> <div>КОНТЕНТ</div> <div>САЙДБАР</div> <div class="clearfix"></div> </div> <div>ПОДВАЛ</div> </div> </div>
Вот теперь мы видим, что контейнер расположен по центру.
Шапка и подвал
Шапка и подвал расположены по всей ширине контейнера, поэтому для них нет необходимости указывать ширину. Для наглядности добавим цвет фона.
<div class="bg-gray"> <div class="margin-center bg-yellow" style="width: 400px"> <div class="bg-green">ШАПКА</div> <div> <div>КОНТЕНТ</div> <div>САЙДБАР</div> <div class="clearfix"></div> </div> <div class="bg-blue">ПОДВАЛ</div> </div> </div>
Контент и сайдбар
Из теории мы знаем, что для размещения этих блоков нужно их сделать плавающими (float). Поскольку у нас фиксированная ширина, то необходимо задать ширину контента и ширину сайдбара. Общая их ширина должна быть равна ширине контейнера. Почему так?
Если мы сделаем суммарную ширину больше, то сайдбару просто не хватит места и он начнет выводиться с новой линии уже под контентом (эффект «слетевший сайдбар»). Если же задать ширину меньше контейнера, то появится пустое пространство. Смысла в нем нет никакого.
Привожу код только части контента и сайдбара.
... <div> <div class="left" style="width: 250px">КОНТЕНТ</div> <div class="left bg-red" style="width: 150px">САЙДБАР</div> <div class="clearfix"></div> </div> ...
Зачем общий блок для контента и сайдбара?
На реальном сайте как правило высота контента отличается от высоты сайдбара. Чаще всего контент выше сайдбара, хотя бывают страницы, где все наоборот. Давайте для эксперимента укажем разную высоту контента и сайдбара.
... <div class="bg-black"> <div class="left" style="background: lime; width: 250px; height: 250px;">КОНТЕНТ</div> <div class="left bg-red" style="width: 150px; height: 100px;">САЙДБАР</div> <div class="clearfix"></div> </div> ...
Я добавил черный фон для контейнера и цвет лайма для контента.
Очень часто при верстке стоит задача сымитировать колонку сайдбара, которая будет визуально равна по высоте контенту. Но, посколько нам неизвестны эти высоты, которые к тому же еще и разные, то сделать это через height будет крайне проблематично.
Но, если мы зададим цвет контейнера такой же как и цвет сайдбара, то...
Вот конечнй код, чтобы вы не запутались:
<div class="bg-gray"> <div class="margin-center bg-yellow" style="width: 400px"> <div class="bg-green">ШАПКА</div> <div class="bg-red"> <div class="left" style="background: lime; width: 250px; height: 250px;">КОНТЕНТ</div> <div class="left bg-red" style="width: 150px; height: 100px;">САЙДБАР</div> <div class="clearfix"></div> </div> <div class="bg-blue">ПОДВАЛ</div> </div> </div>
А если сайдбар слева?
По сути это задачка на сообразительность. :) Обратите внимание, что у нас контент и сайдбар имеют левое выравнивание. В данном случае браузер вначале выводит контент слева, потом прижимает к нему сайдбар опять же слева.
Очевидно, что для смещения сайдбара влево, а контента вправо, нам нужно указать у контента float: right или используя хелпер right:
<div class="bg-gray"> <div class="margin-center bg-yellow" style="width: 400px"> <div class="bg-green">ШАПКА</div> <div class="bg-red"> <div class="right" style="background: lime; width: 250px; height: 250px;">КОНТЕНТ</div> <div class="left bg-red" style="width: 150px; height: 100px;">САЙДБАР</div> <div class="clearfix"></div> </div> <div class="bg-blue">ПОДВАЛ</div> </div> </div>
Обратите внимание, что хоть мы и вывели сайдбар перед контентом, в HTML-коде он расположен после.
Считается, что контент должен быть как можно ближе к началу документа. В этом случае, для посетителей с медленным соединением с Интернетом, вначале начнется отображаться основное содержмое. Служебная же часть, к которой относится сайдбар - уже после.
Другой алгоритм размещения сайдбара и контента
Вариант с float:left и float:right достаточно простой для понимания и использования. Но наряду с этим алгоритмом существует другой, достаточно распространенный способ, основанный на указании отступов margin.
Суть его в том, что блок контента сдвигается влево или вправо на ширину сайдбара. При этом сайдбару присваивается такой же отступ, только отрицательный на всю ширину контента.
Исходные данные: у обоих блоков float:left, то есть сайдбар справа. Необходимо перенести его влево.
Вначале сдвигаем контент вправо на ширину сайдбара.
... <div class="bg-red"> <div class="left" style="background: lime; width: 250px; height: 250px; margin-left: 150px;">КОНТЕНТ</div> <div class="left bg-red" style="width: 150px; height: 100px;">САЙДБАР</div> <div class="clearfix"></div> </div> ...
Мы видим, что контент сдвинулся до края родителя и, поскольку места больше нет, то сайдбар стал выводиться с новой линии. Чтобы переместить сайдбар влево нужно ввести отрицательный отступ равный всей ширине родителя.
... <div class="bg-red"> <div class="left" style="background: lime; width: 250px; height: 250px; margin-left: 150px;">КОНТЕНТ</div> <div class="left bg-red" style="width: 150px; height: 100px; margin-left: -100%;">САЙДБАР</div> <div class="clearfix"></div> </div> ...
Данный способ имеет довольно много разных вариаций. Например с тем же успехом можно использовать разные float, но при этом сдвигать блоки через margin в любую сторону. Приципиальной разницы, какой способ будет использоваться, нет. Все они работают одинаково, просто указываются разные точки отсчета и разные сдвиги.
Этот метод еще хорош тем, что позволяет размещать произвольным образом несколько сайдбаров. Например мы хотим добавить второй сайдбар так, чтобы контент оказался в центре.
Сайдбар-контент-сайдбар
Опять же, сделаем так, чтобы контент выводился перед сайдбарами. Вначале расчитываем ширину контента. Она равна родитель минус два сайдбара. У нас родитель 400px, сайдбары пусть будут по 100px. Итого контент = 200px, отступы по 100px с каждой стороны.
<div class="bg-gray"> <div class="margin-center bg-yellow" style="width: 400px"> <div class="bg-green">ШАПКА</div> <div class="bg-red"> <div class="left" style="background: lime; width: 200px; height: 250px; margin: 0 100px;">КОНТЕНТ</div> <div class="left bg-red" style="width: 100px; height: 100px;">САЙДБАР1</div> <div class="left bg-red" style="width: 100px; height: 100px;">САЙДБАР2</div> <div class="clearfix"></div> </div> <div class="bg-blue">ПОДВАЛ</div> </div> </div>
Контент расположен как нужно, сайдбары - ожидаемо сползли вниз.
Первый сайдбар должен иметь левый отрицательный отступ равный ширине родителя. Ведь его позиция занята контентом + margin (который, как мы знаем из блочной модели, включается в полную ширину).
... <div class="left bg-red" style="width: 100px; height: 100px; margin-left: -100%">САЙДБАР1</div> ...
Второй же сайдбар должен быть спозиционирован сразу после контента. То есть на ширину отступа, который равен ширине сайдбара.
... <div class="left bg-red" style="width: 100px; height: 100px; margin-left: -100px;">САЙДБАР2</div> ...
Разберитесь с этим примером, поскольку это наиболее частый вариант размещения сайдбаров по краям.
В качестве домашнего задания попробуйте указать у сайдбаров разную ширину.
Два сайдбара справа
Если вы разобрались с примерами, то без труда сообразите как разместить два сайдбара рядом справа от контента. Привожу сразу готовый код.
<div class="bg-gray"> <div class="margin-center bg-yellow" style="width: 400px"> <div class="bg-green">ШАПКА</div> <div class="bg-red"> <div class="left" style="background: lime; width: 200px; height: 250px; margin: 0 200px 0 0;">КОНТЕНТ</div> <div class="left bg-red" style="width: 100px; height: 100px; margin-left: -200px">САЙДБАР1</div> <div class="left bg-red" style="width: 100px; height: 100px; margin-left: -100px;">САЙДБАР2</div> <div class="clearfix"></div> </div> <div class="bg-blue">ПОДВАЛ</div> </div> </div>
Нетрудно заметить, что у контента задаем только правый отступ, чтобы оставить место для двух сайдбаров. Первый сайдбар смещается на ширину этого отступа, а второй на свою ширину.
Два сайдбара слева
Ну и для коллекции сделаем два сайдбара слева. Контент сдвигаем вправо с помощью margin-left. Первый сайдбар сдвигаем на ширину родителя (-100%), а сдвиг второго расчитываем как ширину родителя минус первый сайдбар.
<div class="bg-gray"> <div class="margin-center bg-yellow" style="width: 400px"> <div class="bg-green">ШАПКА</div> <div class="bg-red"> <div class="left" style="background: lime; width: 200px; height: 250px; margin-left: 200px;">КОНТЕНТ</div> <div class="left bg-red" style="width: 100px; height: 100px; margin-left: -400px">САЙДБАР1</div> <div class="left bg-red" style="width: 100px; height: 100px; margin-left: -300px;">САЙДБАР2</div> <div class="clearfix"></div> </div> <div class="bg-blue">ПОДВАЛ</div> </div> </div>
Недостаток этого способа только в том, что нужно расчитывать размер каждого margin. Поэтому, если внимательно посмотреть на картинку, то легко увидеть, что можно обойтись и без margin вовсе.
<div class="bg-gray"> <div class="margin-center bg-yellow" style="width: 400px"> <div class="bg-green">ШАПКА</div> <div class="bg-red"> <div class="right" style="background: lime; width: 200px; height: 250px;">КОНТЕНТ</div> <div class="left bg-red" style="width: 100px; height: 100px;">САЙДБАР1</div> <div class="left bg-red" style="width: 100px; height: 100px;;">САЙДБАР2</div> <div class="clearfix"></div> </div> <div class="bg-blue">ПОДВАЛ</div> </div> </div>
Какой вариант, конечно проще для реализации и понимания.
Комментариев: 1 RSS
1Аноним29-01-2012 04:36
- не согласна, начинающим разработчиком я была много лет назад, но помню что именно этот совет мне помог разобраться во многих тонкостях вёрстки. Просто нужно учиться на достойных примерах, а не на сайте на джумле сделанном студентом из соседней общаги.... Несколько лет назад достойным сборником примеров был csszengarden, сейчас проект несколко заброшен, но всё равно на нём есть что посмотреть.