Конспект занятия 7
Блочная верстка
Мы уже знаем какием образом можно размечать таблицу при помощи таблиц. Однако, такой подход не без недостактов:
- Верстка таблицами содержит большое количество кода
- Иногда медленно отображается мобильными устройствами
- Семантически неверная — таблицы необходимо использовать для табличных данных, а не для верстки страниц
Каким образом можно заставить блочные элемент вести себя как ячейка таблицы? Мы же знаем, что он всегда занимает все доступное пространство? Однако, давайте обратим внимание на свойство float, которое заставляет все следующие объекты обтекать нужный нам объект одним из двух способов: слева или справа.
Рассмотрим пример:
<style>
div.cut {
width: 200px;
background-color: #c0c0c0;
float:left;
}
</style>
<body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi libero sapien, convallis
vitae sodales eget, feugiat sit amet odio. Nunc sagittis vulputate elit, vel posuere felis
hendrerit quis. Maecenas porta suscipit sem, id interdum est ultrices nec.
<div class="cut">Это Lorem
ipsum.</div>
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Ut ullamcorper mauris at nisi mollis venenatis. Proin tempus, lorem ac
elementum eleifend, quam nunc tincidunt orci, vel fringilla elit tellus
sed magna. Donec vehicula vulputate risus id feugiat. Nunc nec
ante eget dolor iaculis tincidunt ac sed turpis. Mauris non tempus magna.
Sed et turpis sit amet lorem facilisis laoreet. Suspendisse tristique sollicitudin
dictum. Pellentesque ac erat nisi. Nunc non rhoncus urna. Vestibulum
interdum nunc eu magna mattis suscipit. Nulla facilisi. Proin vel
mi egestas lacus sodales varius ut lacinia felis. Morbi consequat urna eu augue condimentum
facilisis quis sed dolor.
В браузере это будет выглядеть так:
Как мы видим, текст обтекает элемент div справа, а сам div находится справа. В случае, если бы указали свойство float:right, ситуация была бы зеркальная: объекты бы обтекали слева, а div находился бы справа.
Как раз используя float для div мы заставим их располагаться так, как обычные колонки.
Итак, для создания страницы при помощи блоков, нам потребуется создать столько блоков, сколько у нас будет логических элементов на странице. В нашем классическом трехколоночном макете нам потребуется 5 div'ов:
- для заголовка (header)
- для левой колонки
- для правой колонки
- для центральной колонки
- для подвала (footer)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> </head> <body> <div class="header">Заголовок</div> <div class="left">Левая колонка</div> <div class="main">Центральная колонка</div> <div class="right">Правая колонка</div> <div class="footer">Подвал</div> </body> </html>
Добавим теперь в раздел head тэг style, в котором будем описывать все стили всех наших блоков. Для наглядности, пока раскрасим их в различные цвета, чтобы было удобно ориентироваться где какой находится.
<style>
div.header{
background-color: red;
}
div.left {
background-color: yellow;
}
div.main{
background-color: olive;
}
div.right {
background-color: green;
}
div.footer{
background-color: blue;
}
</style>
В браузере на этом этапе страница будет выглядеть предсказуемо: поскольку все div являются блочными, то они располагаются один под другим
Для элемента header нам особых действий осуществлять не нужно. Он и так находится на своем месте. Зададим лишь только его высоту (если это требуется)
Для элемента left уже потребуется использование float, и мы также зафиксируем ширину у этого элемента. Аналогичные действия совершим и с элементом right.
div.header{
height: 150px;
background-color: red;
}
div.left {
float:left;
width:100px;
background-color: yellow;
}
div.right {
float: right;
width:200px;
background-color: green;
}
Как мы видим, правая колонка разместилась не совсем так, как нам хотелось бы.
Это произошло потому, что float действует на те элементы, которые находится позже в коде странице. После правой колонки у нас в коде шел только наш подвал, поэтому только он и стал обтекать правую колонку слева. Для того, чтобы обтекание осуществлялось нужным нам способом, нам потребуется поменять порядок тегов в коде страницы, чтобы после правой колонки шел не только подвал, но и центральная колонка:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> </head> <body> <div class="header">Заголовок</div> <div class="left">Левая колонка</div> <div class="right">Правая колонка</div> <div class="main">Центральная колонка</div> <div class="footer">Подвал</div> </body> </html>
Теперь, поведение колонок стало похожим на правду. Однако, посмотрите, что произошло с центральной колонкой:
При достаточно большом содержимом (большим чем высота колонок), она, после обтекания правой и левой колонки, начинает занимать их место. Такое поведение, безусловно, правильное, потому что так и работает обтекание элементов. Но нам, для создания блочного макета, такое положение дел не устраивает. Поэтому, мы добавим в стиль центральной колонки отступы слева и справа, равные ширинам левой и правой колонки:
div.main{
background-color: olive;
margin-left: 100px;
margin-right: 200px;
}
Теперь займемся подвалом. Все что требуется от него — так это располагаться в самом низу страницы. Мы это можем сделать, если включим абсолютное позиционирование у этого элемента и укажем координату bottom:0px. Поскольку, у абсолютно позиционированных элементов необходимо указывать ширину, то мы ее и укажем необходимой, а имеено — 100%.
div.footer{
background-color: blue;
position:absolute;
bottom:0px;
width: 100%;
}
Возникающую полосу прокрутки (на рисунке ее не видно) мы уберем, убрав отступы от краев страницы
html,body{
margin:0px;
}
все, макет почти готов. Однако, он не идеален. Давайте посмотрим, что произойдет, если в какой-либо ячейке содержимого будет настолько много, что должна будет появиться полоса прокрутки
Мы видим, что эта колонка находится как будто-то бы под подвалом и подвал будет прокручиваться вместе с полосой прокрутки. Такое поведение нас не устраивает, поэтому мы делаем следующее:
html,body{
margin:0px;
position:absolute;
width:100%;
}
div.right{
float: right;
width:200px;
background-color: green;
overflow: hidden;
margin-bottom: 100px; /*должен быть равен высоте подвала*/
}
Для того, чтобы в каждую колонку не записывать свойство overflow и отступ снизу (ведь не всегда известно какая колонка будет самой высокой), для этого все три колонки обвалакивают еще одним дивом и указанные свойства назначают ему.
Блоки со скругленными краями
Довольно часто в Web-дизайне используются блоки со скругленными краями. Каким образом, можно закруглить края, например, у div? Существует много различных подходов. Но мы ограничимся рассмотрением двух: CSS3-подход и old-school подход.
Подход CSS3
Этот подход еще не всеми бразуерами поддерживается, поскольку он включен лишь в спецификацию CSS3, которая официально еще не вышла в свет. Поэтому Internet Explorer (до 9 версии) не поддерживает в принципе это свойство, а для остальных браузеров потребуется небольшие модифицации.
Итак, для того, чтобы скруглить края у любого элемента используется свойство border-radius. Чем больше значение принимает это свойство, тем более круглыми будут уголки. Поскольку свойство еще экспериментальное, для для многих браузеров его необходимо указывать со специальными префиксами:
div{
border:1px solid black; /* делаем видимую границу, сплошую черную */
border-radius: 10px;
-moz-border-radius: 10px; /*для FireFox */
-webkit-border-radius: 10px; /*для Safari и Google Chrome */
}
Old-school подход
Этот подход очень рутинный, но зато работает всегда и во всех браузерах. Основывается он на том, что создается таблица 3х3, в крайние ячейки которой помещаются изображения для скругленных уголков. Нижняя, верхняя, правая и левая границы создаются стилями границ соответствующих ячеек.
для того, чтобы границы таблицы отображались даже в случае, если у нее нет содержимого, будем использовать свойство empty-cells:show. У угловых ячеек также укажем ширину и высоту, равные ширине и высоте изображений уголков. Итак, у нас подготовлено четыре изображения
 | lt.gif |
 | rt.gif |
 | rb.gif |
 | lb.gif |
<table class="rounded">
<tr>
<td class="lefttop"><img src="lt.gif" /></td>
<td class="top"></td>
<td class="righttop"><img src="rt.gif" /></td>
</tr>
<tr>
<td class="left"></td>
<td>Содержимое блока</td>
<td class="right"></td>
</tr>
<tr>
<td class="leftbottom"><img src="lb.gif" /></td>
<td class="bottom"></td>
<td class="rightbottom"><img src="rb.gif" /></td>
</tr>
</table>
Классы тогда будут следующими
<style>
table.rounded{
margin:0px;
padding:0px;
border-collapse:collapse;
}
table.rounded td{
empty-cells:show;
padding:0px;
}
table.rounded td.lefttop,td.righttop,td.leftbottom,td.rightbottom{
width:9px;
height:9px;
}
table.rounded td.left{
border-left:1px solid black;
}
table.rounded td.right{
border-right:1px solid black;
}
table.rounded td.top{
border-top:1px solid black;
}
table.rounded td.bottom{
border-bottom:1px solid black;
}
</style>
Внешние CSS файлы
Внешние CSS файлы используются для того, чтобы не дублировать одни и те же стили в теге STYLE. Чаще всего все стили выносят в отдельный текстовый файл, у которого расширение css, а затем этот файл подключают в нужные страницы следующим образом:
<link rel="stylesheet" type="text/css" href="имя_файла.css"/>
Сам Css файл представляет собой содержимое тега style. Т.е. все что мы раньше писали в тег Style, сейчас можно писать в отдельном файле (без самого тега style)