Блочная верстка
Для создания первого сайта удобно использовать таблицы. Каждый элемент страницы — заголовок, текст, картинка — располагался в собственной ячейке, ячейки размещались в других, более крупных ячейках, те в свою очередь лежали в главной ячейке. Ярким примером такой верстки может служить сайт "Тайны Михайловского замка" и многие другие саты учащихся 1-го года обучения. Но табличная верстка в настоящее время ушла на второстепенные позиции. Большим минусом ее является громозкий код. Для создания динамичных страниц необходимо перейти к блочной верстке.
Выражение «блочная вёрстка» или вёрстка с помощью слоёв заключается в конструктивном использовании тега <div> и стилей.
Тег <div> является универсальным и может выполнять множество функций. Фактически это основа, на которую «навешиваются» стили, превращая его в контейнер для кнопки, меню, для текста, графики, видео и др. Тег <div> является кирпичиком вёрстки, её базовым фундаментом.
Благодаря этому тегу HTML-код распадается на ряд чётких наглядных блоков, код при этом получается более компактным, чем при табличной вёрстке, к тому же поисковые системы его лучше индексируют.
1. Понятие "блок".
Рамка (border) — это контур, для которого можно задать такие характеристики как толщина, цвет и тип (пунктирная, штриховая, сплошная, двойная, точечная, вдавленная, выпуклая).
Поля (padding) — отделяют содержимое блока от его рамки слева, снизу, справа, сверху, чтобы текст, например, не был “впритык” к стенкам блока.
Отступы (margin) — это пустое пространство между различными блоками слева, снизу, справа, сверху, позволяющее на заданном расстоянии расположить два блока относительно друг друга.
Блоки, как и таблицы — это элементы, всегда располагающиеся на странице вертикально. То есть, если в коде страницы записаны подряд два блока, то отобразятся они в браузере один под другим.
Если нам нужно расположить несколько блоков горизонтально, то в их свойствах задаётся такой параметр как “обтекание” (float). Но об этом чуть позже.
2. Позиционирование блоков
- Абсолютное позиционирование. Вариант 1.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Абсолютное позиционирование</title>
</head>
<body>
<h1>Абсолютное позиционирование</h1>
В этом документе картинка абсолютно позиционирована. Она располагается в 100 рх по гиризонтали и в 50 пикселах по вертикали от начала документа.
<img src="header__logo-vk.jpg" width="201" height="200" alt="логотип" style="position:absolute; left:100px; top:50px;" />
</body>
</html>
- Абсолютное позиционирование. Вариант 2.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Абсолютное позиционирование</title>
</head>
<body>
<h1>Абсолютное позиционирование</h1>
<p>В этом документе обе картинки позиционированы в точку (100,50), но начало координат одной отсчитывается от начала документа, а начало координат для позиционирования другой - начало таблицы.</p>
<p><img src="header__logo-vk.jpg" width="201" height="200" alt="логотип" style="position:absolute; left:100px; top:50px;"></p>
<table width="400" border="1" cellspacing="0" cellpadding="0" style="position:absolute; left:50px; top:300px;">
<tr>
<td>Таблица абсолютно позиционирована<img src="header__logo-vk.jpg" width="201" height="200" alt="логотип" style="position:absolute; left:100px; top:50px;"></td>
</tr>
</table>
</body>
</html>
- Абсолютное позиционирование. Вариант 3.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Абсолютное позиционирование</title>
</head>
<body>
<h1>Абсолютное позиционирование</h1>
<p>В этом примере обе картинки абсолютно рлзиционированы. Т.к. код одной картинки идет раньше кода второй картинки, то вторая картинка устанавливается поверх первой. </p>
<p><img src="header__logo-vk.jpg" width="201" height="200" alt="логотип" style="position:absolute; left:100px; top:150px;">
<img src="header__logo-vk.jpg" width="201" height="200" alt="логотип" style="position:absolute; left:200px; top:250px;">
</p>
<p> </p>
<p> Из приведенных примеров видно, что абсолютно позиционируемые элементы выпадают их процесса обычного последовательного форматирования. Браузер не берет в расчет порядок следования кодов, а учитывает только вложенность для определения начала координат.</p>
</body>
</html>
- Относительное позиционирование.
Относительное позиционирование задается стилевым указанием:
position: relative;
Такой элемент участвует в обычном последовательном форматировании документа. За начало координат принимается та точка, в которой элемент был бы размещен без позиционирования.
Последовательность выполнения кода страницы браузером будет следующая: сначала браузер размещает элемент на странице, выполняя обычное форматирование, а затем по указаниям left и top.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Относительное позиционирование</title>
</head>
<body>
<h1>Относительное позиционирование</h1>
<p>
<img src="header__logo-vk.jpg" width="201" height="200" alt="логотип" align="left" hspace="10" style="position:relative; left:0px; top:150px;">
В этом примере картинка смещена вниз на 150 пикс. относительно начала абзаца. <br clear="left">
</body>
</html
- Смешанное позиционирование.
2.1. absolute [relative] – в блоке, который позиционирован абсолютно, расположен элемент позиционированный относительно.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Смешанное позиционирование</title>
</head>
<body>
<h1>Смешанное позиционирование</h1>
<p>
В этом документе таблица абсолютно позиционирована в точку (50,0). Внутри кода таблицы расположена кртинка с относительным позиционированием на 100 пиксел вниз.
</p>
<table border="1" cellpadding="0" cellspacing="10" width="80%" bgcolor="#eee5db" style="position:absolute; left:50px; top:0px;">
<tr><td>
<p><img src="header__logo-vk.jpg" align="left" width="201" height="200" alt="логотип" style="position:relative; left:0px; top:100px;">Картинка размещена внутри таблицы. Для картинки записано относительное позиционирование на 100 пиксель вниз.<br clear="left"></p>
</td></tr>
</table>
</body>
</html>
2.2. relative [absolute]. Код абсолютно позиционированной картинки расположен внутри кода относительно позиционированной таблицы. Таблица смещена вправо на 50 рх.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Смешанное позиционирование</title>
</head>
<body>
<h1>Смешанное позиционирование. relative [absolute]</h1>
<p>В этом документе таблица относительно позиционирована вправо на 50 px. Внутри кода таблицы расположена кртинка с абсолютным позиционированием (0,100).</p>
<p>
<table border="1" cellpadding="0" cellspacing="0" width="80%" bgcolor="#eee5db" style="position:relative; left:50px; top:0px;">
<tr><td>
<p><img src="header__logo-vk.jpg" border="1" align="left" width="201" height="200" alt="логотип" style="position:absolute; left:0px; top:100px;">Картинка размещена внутри таблицы. Для картинки записано абсолютное позиционирование на 100 пиксель вниз.<br clear="left"></p>
</td></tr>
</table>
</body>
</html>
z-index.
Стилевое свойство z-index позволяет отойти от плоского представления документа на экране. Его значением является целое число, номер плоскости, в которой будет размещаться элемент (вместе с потомками). Основной текст имеет нулевой уровень (z-index:0). Положительный z-index размещает элементы над основным текстом, отрицательный - под ним. Из двух плоскостей размещения та расположена выше, у которой z-index больше.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title> Свойство z-index</title>
</head>
<body>
<h1>Свойство z-index</h1>
<p>Этот текст — основной. К нему не приписано никаких стилевых воздействий. Значит этот текст лежит на нулевой плоскости.
<img src="header__logo-vk.jpg" border="1" align="left" alt="логотип" style="position:absolute; left:200px; top:100px; z-index:-1;" />
<img src="header__logo-b.png" border="1" align="left" alt="логотип" style="position:absolute; left:80px; top:70px; z-index:-2;" />
</p>
</body>
</html>
- Двухколонная верстка.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1251">
<title>Трехколонная верстка</title>
<style type="text/css">
body{
text-align:center;/*весь текст на сайте по центру*/
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
}
#wrapper {/*общая оболочка*/
width: 700px;
margin:auto;
border:1px solid #050000;/*рамка*/
height:500px;/*высота*/
background-color:#C4BEBE;/*цвет фона*/
}
#header{/*шапка*/
border:1px solid #050000;/*рамка*/
height:50px;/*высота*/
background-color:#777DEF;/*цвет фона*/
}
#sidebarL{/*левый блок*/
border:1px solid #050000;/*рамка*/
width:200px;/*ширина*/
height:348px;/*высота*/
float:left;/*переносим блок влево*/
background-color:#F9CD04;/*цвет фона*/
}
#sidebarR{/*правый блок*/
border:1px solid #050000;/*рамка*/
width:200px;/*ширина*/
height:348px;/*высота*/
float:right;/*переносим блок вправо*/
background-color:#A8770F;/*цвет фона*/
}
#content{/*контент*/
border:1px solid #050000;/*рамка*/
height:348px;/*высота*/
background-color:#FAFCF9;/*цвет фона*/
}
#footer{/*подвал*/
border:1px solid #050000;/*рамка*/
height:50px;/*высота*/
background-color:#109E06;/*цвет фона*/
}
/*вы можете добавить множество других стилей,
таких как размер и цвет текста, отступы и.т.п.*/
</style>
</head>
<body>
<div id="wrapper">общая оболочка (wrapper)
<div id="header"><p>шапка (header)</p></div>
<div id="sidebarL"><p>левый блок<br>(sidebarL)</p></div>
/* слой для 3-х колонной верстки*/
<div id="sidebarR">
<p> </p>
<p>правый блок<br>
(sidebarR)</p>
</div>
/* end слоя 3-х колонной верстки*/
<div id="content"><p>контент<br>
попробуйте изменить размер окна браузера
всё прекрассно сжимается и растягивается</p>
<p>(content)</p>
</div>
<div id="footer">подвал (footer)</div>
общая оболочка (wrapper)</div>
</body>
</html>
