Блочная верстка. Урок 4. Создание блоков-контейнеров.
Приступим к размещению элементов нашей веб-страницы. При построении страницы сначала размещают элементы, определяющие места, на которых впоследствии будет размещен контент, ссылки, картинки и т.п.. Начнем сверху и определим место под заголовок.
Обратите внимание, на нашем макете горизонтальное меню расположено в заголовке сайта. Для того, чтобы нам разместить его так, нужно разрезать картинку шапки сайта чуть выше верхней границы элементов горизонтального меню. В итоге, у нас получится два изображения – верхнее и нижнее, поверх которого будет размещаться меню. Эти два изображения в дальнейшем будут установлены в качестве фона для двух блочных элементов, определяющих расположение шапки сайта.
Откроем наш веб-документ и добавим в область, предназначенную для описания элементов контента в нашем документе (внутри блока с id равным "wrapper"), следующие строки:
<div id="header">
</div>
<div id="hmenu-container">
</div>
Первый блок будет содержать логотип нашего сайта и установленную в качестве фона верхнюю часть шапки. Второй будет содержать все элементы, связанные с горизонтальным меню. Конечно, это все можно было бы разместить и без разделения шапки на отдельные части, но в таком случае позиционирование горизонтального меню стало бы более трудной задачей.
Перейдем к таблице стилей. Не забудьте, сначала нужно записывать правила для всей страницы, затем для общих элементов и блоков, определяющих позиции разделов документа, а уже затем писать правила для конкретных элементов. В противном случае, каскадность не позволит элементам встать на свои места.
Добавим в файл стилей следующие правила:
#header {
width: 780px;
height: 76px;
background-repeat: no-repeat;
background-image: url('zubik_top.jpg');
}
#hmenu-container {
height: 50px;
background-image: url('zubik_btm.jpg');
background-repeat: no-repeat;
}
Как вы, вероятно, поняли, данные правила описывают свойства блоков, относящихся к шапке сайта. Конечно, мы могли бы поместить эти два блока в еще один div, чтобы полностью логически отделить шапку сайта, но мы не стали этого делать. Вообще, div'ами, как и другими элементами, лучше не злоупотреблять.
Для первого блока были заданы ширина (width) и высота (height), равные размеру фонового изображения, а также было установлено само фоновое изображение. Обратите внимание как указан адрес фонового рисунка – указано только имя файла. Это означает что изображение находится в той же папке, что и документ. Если бы изображение находилось в другой папке, мы должны были бы указать полный URL-адрес или путь, относительно папки, в которой находится файл CSS. Также обратите внимание на то, что путь к файлу заключен в одинарные кавычки. Это не обязательное условие, но кавычки помогают избежать ошибки в случае, если в пути находится какой-нибудь специальный символ, например пробел. Отмечу, что в кавычки можно заключать не только путь, но и вообще любые значения, например названия шрифтов, таких как 'Times New Roman'. Еще одним свойством, заданным здесь, является background-repeat. Оно определяет как будет заполняться фон блока с помощью указанного изображения. В данном случае мы установили значение no-repeat, т.е. фоновое изображение не должно повторяться, если размеры блока больше размеров изображения.
В описании стиля второго блока мы указали те же свойства, за исключением ширины. Таким образом, блок займет все доступное ему по ширине пространство. В общем то, в первом блоке ширину можно было также не указывать, он бы и так не вылез за пределы div'а, в котором он расположен, равного ему по ширине.
Сохраним нашу таблицу стилей в файл, например с названием screen.css, т.к правила этого листа стилей будут предназначены для использования при выводе нашей страницы на экран монитора.
Перейдем к веб-документу и добавим под только что добавленными строками теги блоков, в которых будут располагаться контент и вертикальное меню:
<div id="center">
<div id="content">
</div>
<div id="vmenu-container">
</div>
</div>
Здесь мы также задали глобальный центральный блок, относительно которого мы будем позиционировать внутренние блоки под меню и контент.
Откроем лист стилей screen.css и добавим следующие правила:
#vmenu-container {
width:115px;
height: 170px;
background-image: url('sidemenu.jpg');
background-repeat:no-repeat;
padding:1em;
}
#content {
float:right;
width: 610px;
margin-bottom: 1em;
font-family: Verdana, Arial, Hevletica;
font-size:80%
}
Для контейнера под меню, мы задали ширину, высоту, фон и внутренние отступы, чтобы элементы, которые этот блок будет содержать не касались его границ. Блок для контента сделали "плавающим" относительно правой стороны (float: rigth), т.е. другие элементы будут обтекать его слева, и задали ему всю доступную ширину за вычетом ширины блока под правое меню, дав тем самым блоку с меню подняться вверх и поместиться рядом с контейнером для контента. Кроме того, этому же блоку мы задали свойства, определяющие параметры шрифта для содержимого. Таким образом, контент будет выводиться шрифтом, определенным этими свойствами. Также было задано внешнее нижнее поле, чтобы визуально отделить контент от подвала страницы на ширину символа (1 em).
Снова откроем наш веб-документ и добавим строки, относящиеся к подвалу страницы:
<div id="footer">
</div>
Затем добавим правило в лист стилей.
#footer {
color: gray;
height: 3em;
font-family: Arial;
forn-size: 10px;
}
Обратите внимание, если сейчас добавить контент во все блоки, то подвал нашей страницы будет несколько смещен. Это происходит потому, что мы ранее задали значение, определяющее обтекание одного из блоков. Чтобы избавиться от этой неприятности, нужно обтекание запретить. Добавьте перед блоком, определяющем место под подвал следующую строку:
<div class="lastik"></div>
Теперь в листе стилей запишите правило для этого исправляющего блока.
.lastik { clear: both }
Здесь мы запретили обтекание со всех сторон. Можно было бы запретить обтекание только для той стороны, с которой оно реально было. Но дело в том, что стиль, определенный этим классом нам еще понадобится, а лишний запрет на обтекание с другой стороны, никаких проблем здесь для нас не создаст.
Осталось лишь разметить меню, вписать ссылки и контент. Этим мы займемся на следующем уроке.
Обсуждение статьи
