создай свой первый сайтСайт создан на сервисе Яндекс.НародСайт создан на сервисе Sites.GoogleСайт создан на сервисе ucozСайт создан на html/css


Контейнерный дизайн.
Пример веб-страницы - блочная верстка, трехколонный макет

В этом уроке мы создаем веб-страницу на html и css. Она состоит из пяти основных блоков: "шапки" (верхней части страницы - header), блока навигации слева (left), основной части с текстом посередине (content), дополнительного блока справа (right) и "футера" (нижней части страницы - footer) и контейнера со стилем clear (типа заглушки, позволяющей отделить нижнюю часть).
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>Контейнерный дизайн</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="list">

<div id="header">
<h1>Заголовок - шапка</h1>
</div>
<div id="left">
<h3>Блок навигации</h3>
<p>&nbsp;</p>
</div>
<div id="right">
<h3>Доп. блок</h3>
<p>&nbsp;</p>
</div>
<div id="content">
<h1>Содержимое</h1>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
<div id="clear"></div>
<div id="footer">
<p><strong>Футер</strong></p>
</div>

</div>
</body>
</html>


Блокам заданы различные стили.
css-код:

body, html {
margin:0px;
padding:0px;
text-align:center;
}
#list{
margin:0 auto;
text-align:left;
width:800px;
}

#header{
background-color:#99FF99;
}
#header h1 {
margin: 0;
padding: 10px 0;
}

#left{
background-color:#CCCC99;
width:150px;
float:left;
}

#right{
width:100px;
background-color:#CCFF99;
float:right;
}

#content{
background-color:#FFFFCC;
margin:0px;
margin-left:155px;
margin-right:105px;
}
#content h1 {
margin:0px;
}
#content p {
margin:0px;
padding:5px;
}

#clear{
height:0;
font-size:1px;
line-height:0px;
clear:both;
}

#footer{
background-color:#d292bc;
}
#footer p{
margin:0px;
padding: 10px 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #CCCCCC;
}


В принципе, заполнив страницу своей информацией ее можно выкладывать на сервисе Яндекс.Народ через Мастерскую (не Конструктор сайтов) и все будет нормально работать (если у вас, конечно, доступна Мастерская, то вы сможете загрузить файлы на сайт). А далее размещать последующие страницы, связанные с этой посредством гиперссылок. Ссылки лучше выделять другим цветом от остального текста, чтобы пользователь понял, что при щелчке по ней можно будет перейти на другую веб-страницу сайта.

Источник: 1sait.com