Как было сказано в одном из предыдущих уроков, в процессе верстки, при создании сайтов HTML не используется самостоятельно. W3C консорциумом, с целью управления внешним видом деталей web-страницы, был придуман и разработан инструмент под названием CSS. И если HTML можно сравнить с корпусом здания, то CSS в этой аналогии – деталь интерьера.
Цель данного урока — показать web-страницу изнутри. Подробно механизм взаимодействия двух основных инструментов сайтостроения, а также все возможные способы верстки рассматриваются в следующем разделе, в уроке CSS верстка.
Жесткая блочная верстка Итак, исходный код файла index.html:
Code
<!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>Первая страница</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:
Code
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 атрибутов и значений, но в нашем самоучителе не был описан такой метод, так как это нерационально и не способствует движению вперед.
Блочная верстка, жесткая или резиновая является наиболее распространенным видом верстки среди профессиональных сайтов.
