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

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

Но сейчас только блочная верстка, не касаясь оптимизации, продвижения и программирования.

Продолжаем использовать нашу заготовку, только перед тем, как запустить денвер, переименуйте папку “test.ru”, например в “cofemir.ru”. А чего тут выдумывать? Если до переименования денвер уже был запущен, то перезапустите его.

Создание скелета сайта

Открывайте файлы с кодом и стилями. Стили все сотрите и сотрите содержимое body — блочная верстка начинается с нуля :) . Заполните в заголовке название, описание и ключевые слова. Ну чтобы создать ощущение реального сайта.

Сначала вы должны знать, что мы не будем чертить таблицу и размещать в ней содержимое. Этот слишком старый (хотя довольно эффективный) способ морально устарел. На смену ему пришла дивная блочная верстка (используются div-контейнеры). Когда-нибудь мы изучим и таблицы, например, для оформления текста или модуля, там ничего сложного, но блочную верстку мы изучим сразу.

Самым простым вариантом верстки является верстка с фиксированной шириной. Динамически меняющиеся размеры (резиновая верстка) будем применять позже.

Первое, что вы должны уловить, на мой взгляд, — центрирование основного блока с оформлением, относительно краев браузера. Для этого создайте в блоке тела документа контейнер div, и присвойте ему идентификатор id=”wrap”. Почему не класс? Из предыдущей статьи вы знаете, что классы могут применяться для группы повторяющихся элементов, но этот контейнер у нас будет только один, и будет содержать все остальное оформление.

image05

 Скелет нового проекта. Подсветка парных тегов

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

Теперь в файле стилей (style.css) сделайте обращение к идентификатору #wrap, укажите его ширину и назначьте отступы сверху и снизу по 0, а с боков автоматический отступ. Выглядит это так:

#wrap {
    width:900px;
    margin:0 auto;
}

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

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

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

#wrap {
    width:900px;
    margin:0 auto;
    background-color:#cccccc;
}

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

Основы блочной верстки

Теперь настало время продумать структуру оформления. Предлагаю стандартную структуру: шапка, контент, подвал (#top,#center,#footer). При этом блок «контент» будет разбит еще на три вертикальных блока (левая и правая колонки, основной блок с содержимым:#left,#right,#content).

Запишите код в индексный файл:

<body>
        <div id="wrap">
            <div id="top"></div>
            <div id="center"></div>
            <div id="footer"></div>
        </div>
</body>

В стилях нужно присвоить им определенные свойства. Шапке и подвалу – фиксированную высоту, и всем разные цвета фона. Я реализовал это таким образом:

#top {
    width:100%;
    height:100px;
    background-color:#99ccff;
}
#center {
    width:100%;
    background-color:#6699ff;
    min-height:200px;
}
#footer {
    width:100%;
    height:50px;
    background-color:#3366ff;
}

Заметили новое свойство min-height? Это из названия видно, что независимо есть или нет содержимое в блоке center, его высота не будет менее 200px, а при наличии содержимого растянется. Ширину указал в процентах, это означает, что блок будет занимать всю ширину родительского элемента.
Ничего сложного? Подождите…

Теперь нам важно разбить центральный контейнер на три части. Сначала рассчитаем ширину каждого блока. При наличии у нас общей ширины 900px, сделаем боковые колонки по 200px, тогда под содержимое останется 500. Все верно? Измение индексный файл:

<body>
        <div id="wrap">
            <div id="top"></div>
            <div id="center">
                <div id="left"></div>
                <div id="content"></div>
                <div id="right"></div>
            </div>
            <div id="footer"></div>
        </div>
    </body>

Добавьте стили в таблицу

#left {
    width:200px;
    min-height:50px;
    background-color:#ccff99;
}
#content {
    width:500px;
    min-height:50px;
    background-color:#99ff66;
}
#right {
    width:200px;
    min-height:50px;
    background-color:#66ff33;
}

При таком коде все блоки расположатся по порядку вертикально и примут изначально всю доступную ширину. Если вы зафиксируете размеры, то они все равно будут вертикально и расположатся по левому краю. Как же быть? Ну сначала убедитесь в моих словах и не забудьте фоновые цвета.

image06

Неправильное расположение блоков

Теперь, чтобы расположить их последовательно слева направо по горизонтали, воспользуемся свойством float (может принимать значения left и right). Получим код:

#left {
    width:200px;
    min-height:200px;
    background-color:#ccff99;
    float:left;
}
#content {
    width:500px;
    min-height:200px;
    background-color:#99ff66;
    float:left;
}
#right {
    width:200px;
    min-height:200px;
    background-color:#66ff33;
    float:left;
}

Для большей показательности я добавил высоты.

image07

Правильное расположение блоков

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

Совет: С этими флоатами следует быть предельно осторожными. Влияние этого свойства распространяется на последующие нижние элементы и может привести к неверному отображению (съезжанию) блоков. Чтобы избежать этих проблем применяйте очищающий контейнер сразу после блоков с флоатами.

В индексном файле:

<body>
        <div id="wrap">
            <div id="top"></div>
            <div id="center">
                <div id="left"></div>
                <div id="content"></div>
                <div id="right"></div>
            </div>
            <div class="clear"></div>
            <div id="footer"></div>
        </div>
 </body>

В таблице стилей:

div.clear{
    clear:both;
}

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

Добавить комментарий

Защитный код

Введите код с картинки в текстовое поле