Позиционирование блоков. Нормальный поток



В предыдущем уроке мы узнали, что блоки нужны для создания html-документов. Современная веб-страница, состоит из нескольких блоков, которые каким-либо образом размещены на ней. Сейчас мы будем делать страницу в интернете при помощи блоков. Создаём html-документ следующего содержания:

<html>
 <head>
  <title>Размещение блоков на странице в нормальном потоке</title>
  <link rel="stylesheet" type="text/css" href="style9.css">
 </head>
 <body>
  <div id="header">Это шапка сайта. Обычно здесь размещают баннер и ещё чего-нибудь.</div>
  <div id="topmenu"><a href="#">Главная</a> | <a href="#">Новости</a> | <a href="#">О нас</a> | <a href="#">Контакты</a></div>
  <div id="content">Это блок с контентом (основным содержимым страницы). На этом месте должна располагаться статья или список ссылок на что-нибудь. Может быть также страница с блоком новостей.</div>
  <div id="footer">Это подвал. Здесь пишут чаще всего: © Все права защищены и информацию о том, как можно связаться с администрацией ресурса.</div>
 </body>
</html>

Теперь зададим таблицу стилей для этой страницы. Каждый блок выделим разным цветом, чтобы можно было их различить.

#header{
margin:0 auto;
background:#ff6633;
width:800px;
height:100px;
}
#topmenu{
text-align:center;
margin:0 auto;
background-color:#ffcc66;
width:800px;
height:30px;
}
#content{
margin:0 auto;
background-color:#ffccff;
width:800px;
height:400px;
}
#footer{
margin:0 auto;
background-color:#ffff33;
width:800px;
height:50px;
}

Блоки в html-документе мы разместили в нормальном потоке, то есть на странице они отображаются по порядку один под другим. В самом верху - header - заголовок html-документа. В большинстве сайтов он имеется. Обычно там находится баннер и/или большими буквами написано название проекта и/или лозунг (основная идея) этого проекта. Под ним идет блок с идентификатором topmenu, в нём размещены ссылки на основные страницы сайта (здесь 4 штуки), которые в примере отсутствуют. Затем следует блок content, его содержимое, обычно - статья, может быть, лента новостей и прочее. В самом низу расположился блок с идентификатором footer - подвал. В этой части страницы чаще всего пишут о защищённых правах и оставляют почтовый ящик. Каждому блоку присвоен именно идентификатор, а не класс, так как каждый блок на странице является уникальным.



В таблице стилей каждый блок мы выровняли по центру при помощи свойства margin и задали размеры с помощью свойств width (задаёт ширину блока) и height (задаёт высоту). Цвет блоков и текста в них задали, используя свойства color и background-color. Также в блоке topmenu текст разместили по центру с помощью свойства text-align.

Увидеть получившуюся веб-страницу можно, нажав сюда.

2012 год.


<<Предыдущая | В раздел | Следующая>>