Главная или честный способ заработка в сети Зачем мне это? Всё начинается с идеи

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

В предыдущем уроке мы узнали, что блоки нужны для создания 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.

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


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