Наиболее часто встречающаяся вёрстка - блочная. Однако, не все правильно верстают блоками, в основном, это те, кто делает это впервые. Как показывает практика, такие новички долго мучаются с первой блочной вёрсткой, а уже последующие им даются гораздо легче, так как они уже знают структуру блочной вёрстки . И чтобы...
Наиболее часто встречающаяся вёрстка - блочная. Однако, не все правильно верстают блоками, в основном, это те, кто делает это впервые. Как показывает практика, такие новички долго мучаются с первой блочной вёрсткой, а уже последующие им даются гораздо легче, так как они уже знают структуру блочной вёрстки. И чтобы облегчить немного жизнь новичкам, я в данной статье покажу уже готовую структуру блочной вёрстки.
Привожу HTML-код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Заголовок страницы</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Описание страницы." />
<meta name="keywords" content="ключевые слова страницы" />
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">Шапка сайта</div>
<div id="content">
<div id="left">Левые блоки</div>
<div id="right">Правые блоки</div>
<div id="center">Центральная часть</div>
</div>
<div class="clear"></div>
<div id="footer">Содержимое подвала</div>
</body>
</html>
И CSS-код:
#left {
float: left; // Левые блоки размещаем слева
width: 200px; // Установка ширины 200 пикселей
}
#right {
float: right; // Правые блоки размещаем справа
width: 200px; // Установка ширины 200 пикселей
}
#center {
margin-left: 200px; // Отступ слева 200 пикселей
margin-right: 200px; // Отступ справа 200 пикселей
}
.clear {
clear: both; // Отменяем позиционирование (влияние float)
}
Эту структуру Вы можете смело копировать на свой сайт. Безусловно, некоторые элементы можно менять. Например, размеры левых и правых блоков. Соответственно, надо будет поменять и отступы у центрального блока. Также если вёрстка фиксированная, или она не должна растягиваться на всю страницу, то необходимо все блоки добавить в другой, самый верхний, у которого задать фиксированную ширину в пикселях (фиксированная вёрстка) или в процентах (резиновая, но не на всю страницу).
Надеюсь, данная структура блочной вёрстки поможет новичкам с минимальным количеством проблем сверстать свою первую страницу блоками.
