HTML & CSS блочная верстка

Верстка сайта блоками div

Урок 23. HTML + CSS блочная верстка сайта

Блочная верстка или верстка сайта блоками <div> </div>

В процессе верстки, при создании сайтов HTML не используется самостоятельно.

W3C консорциумом, с целью управления внешним видом деталей web-страницы, был придуман и разработан инструмент под названием CSS. И если HTML можно сравнить с корпусом здания, то CSS в этой аналогии является деталью интерьера.

Цель данного урока – показать интернет-страницу изнутри.

Более подробно механизм взаимодействия двух основных инструментов сайтостроения, а также все возможные способы верстки рассматриваются в уроке CSS верстка таблицами и блоками.

Жесткая блочная верстка сайта, пример верстки блоками div

Итак, исходный код файла index.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример HTML & CSS блочной верстки сайтов</title>
<link rel="stylesheet" href="file.css" type="text/css" />
</head>
<body>
<div class="werty">
<div id="header">
<h2 align="center">Моя первая страница!</h2>
</div>
<div id="spisok">
<ul class="nav">
<li><a href="#">llllllll</a></li>
<li><a href="#">oooooooo</a></li>
<li><a href="#">mmmmmmmm</a></li>
<li><a href="#">kkkkkkkk</a></li>
<li><a href="#">eeeeeeee</a></li>
</ul>
</div>
<div id="l">
<h3 style="text-align:center">wwwwwwwwwwww</h3>
<p>wwwww www wwww wwww www www wwwww wwww wwwwww wwwww wwwwww wwwww wwwwww wwwww wwwwww www www wwwwwwwwww wwwwwwwww www ww www ww wwwwww wwww wwwwww wwww www www www wwww ww wwwwww wwwwwwwwww ww wwww wwwwwww ww ww wwwwwwww wwwww wwwww wwwwwwwwww ww wwwwwww www www www wwww wwwww ww wwwwww ww ww wwwww wwwww ww www www wwww wwww wwwwww www wwwwwww www wwwwwww wwwww wwww wwwwwww wwww ww wwwwwwwww wwwwww wwww wwww wwwwwwww wwww www wwww ww wwww wwww wwwwwww www wwwwww www www wwwwww wwww www ww wwwww wwwww wwwww wwww www wwwwwww www wwwww www www wwwwww www wwww www wwww wwww wwww www wwwwwww www wwwwwww www wwwwwwww ww wwwww wwww</p>
<p style="text-align:center"><a href="#">wwwwwwwwwww</a></p>
</div>
<div id="r">
<h3 style="text-align:center">mmmmmmmmmmmm</h3>
<p>mmmmm mmmmmmm mm m mmmm mm mmmm mmmm mm mm mmm mmmmmm mmmmm mmmmmm mm mmmm mmmmm mm mmmm mmmm mmm mmm mmmm mmm mmm mmmmmm mmm mmm mmmmm mm mmm mmmm mm mmmm mmmmm mm mmmm mmmm mm mmmm mmmmmm mmmm mm mmmmm mmm mmmmm mm mmmmm mmmm mm mmmm mmmm mmm mmmmm mm mmm mmmm mm mmmmmm mmmm mmmm mmm mm mmm mmmm mm mmm mmm mmm mmmm mm mm mmm mm mmm mmm mmmm mmm mmm mmm mmmm mmm mmmm mm mmmm mmmm mmm mmmmm mmm mmm mm mmmm mmmmmmmm mm mm mmm mmmmmm mm mmm mmm mmmmm mmmmm mm mm mmmmmmm mmmmm m mmmm mm mmmm mmm mm mmmm mmm mmmmm mmmm mm mmmm mmmmm mmmmm mm mmm mmmm mm mmm mmm mm mm mm</p>
<p style="text-align:center"><a href="#">mmmmmmmmm mmmm</a></p>
</div>
<img src="images/fon.jpg" alt="" hspace="36" />
<p id="bottom">eeeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeeeee eeeeeeeeeee eeeeeeeeee eeeeeeeeeee eeeeee eeeeeee eeeeeeee eeeeeeee eeeeeeeeee eeeeeeeee</p>
</div>
</body>
</html>

Исходный код file.css:

body {font-family: Verdana, sans-serif}
div.werty {margin: 0 auto; width: 800px; background-color: #ff66cc}
#l, #r {width: 340px; margin-top: 30px; float: left}
#l {padding: 30px 20px 30px 40px; text-align: right}
#r {padding: 30px 40px 30px 20px}
#bottom {
width: 740px;
background-color: #cc66ff;
margin: 35px 0 0 0;
border-top: 1px solid #ff3366;
padding: 20px 30px 20px 30px;
line-height: 180%;
text-align: center;
font-size: 10px
}
#header {
height: 130px;
width: 800px;
margin: 0;
padding: 0;
background: #cc66ff;
border-bottom: 1px solid #ff3366
}
#header h2 {padding-top:47px}
ul.nav {
display: block;
margin: 0;
padding: 0 0 0 91px;
list-style-type: none
}
ul.nav li {background-color: #660033; display: inline; padding: 0}
ul.nav li a:link, ul.nav li a:visited, ul.nav li a:active {
background-color: #660033;
padding: 5px 15px 1px 15px;
color: #cccccc;
text-decoration: none;
border-bottom: 2px solid #660033
}
ul.nav li a:hover {
background-color: #ffffff;
padding: 5px 15px 1px 15px;
color: #cc0000;
text-decoration: none;
border-bottom: 2px solid #660033
}
#spisok {margin-left: 30px}
a:link {color: #cccccc}
a:visited {color: #ffffff}

Результат: жесткая блочная верстка

Мы имеем 2 файла: index.html и file.css.

<link rel="stylesheet" href="file.css" type="text/css" /> в секции <head> </head> файла index.html не что иное, как ссылка на отдаленный документ file.css. Атрибуты style="" со значениями – прямое включение Каскадных таблиц стилей в HTML документ, что не является оптимальным вариантом внедрения стилевых описаний – семантически правильным есть способ ввода атрибутов class="" и id="" в теги документа и последующее описание их значений (значений атрибутов class="" и id="") во внешнем файле с расширением .css — такой способ не засоряет код страницы, что очень важно для поисковых роботов.

В этом демонстрационном уроке был представлен тип жесткой верстки, реализованной с помощью блоков <div> </div>. Верстка называется жесткая, потому что размеры блоков установлены в пикселях. Другой вариант – табличная верстка рассматривается в cледующем уроке.

Так выглядит страница index.html без использования стилей: страница

Конечно же, самый элементарный дизайн можно обеспечить с помощью HTML атрибутов и значений, но в нашем самоучителе не был описан такой метод, так как это нерационально и не способствует движению вперед.

Блочная верстка, жесткая или резиновая является наиболее распространенным видом верстки среди профессиональных сайтов.

Дата публикации: Ноябрь 2009 | Обновление: Август 2014

Урок 22. HTML музыка   Блочная верстка   Урок 24. Табличная верстка

    Сохранить в сервисы и закладки