Rambler's Top100

Создание каркаса страницы html

1. Создание общего блока-контейнера

Обозначаются блоки открывающим и закрывающим тегом <div></div>

В созданной нами странице создадим общий контейнер, и идентефицируем его как "container", код будет таким: <div id="container"> </div>,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Мой первый сайт</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<LINK href="style.css" TYPE="text/css" rel="stylesheet">
</head>
<body>

<div id="container">

</div>

</body>
</html>

 

а в файл style.css добавим стили для этого контейнера, зададим размер ширины и высоты контейнера, фоновый цвет, ну и чтобы наглядно был контейнер виден добавим ему рамку-бордюр

#container {
margin:0 auto;
text-align:left;
width:1037px;
height:700px;
background-color: #F3FAFF;
border:1px solid #999999;
}

и смотрим что получилось на странице html пример (Откроется в новой вкладке), а в файле style.css запись будет выглядеть ТАК

Как видите наш блок-контейнер получился по заданным размерам
ширина: width="1037px",
высота: height="700px"

Обычно размер ширины блока задаётся в конкретных цифрах, а высота в процентах-100%, и по мере заполнения страницы содержимым, она будет вытягиваться в высоту, но для наглядного примера указана реальная высота, если бы мы поставили height=100%, то увидели бы на странице вверху только горизонтальную полосу, это верхний и нижний бордюр, слившийся в одну линию, потому что в этом контейнере ничего не размещено

2. Создание блока для шапки и верхнего меню

Далее внутрь блока "container" поместим блок для шапки сайта и идентифицируем его как "header" и блок для верхнего меню, идентефицируем его как "top_menu"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Мой первый сайт</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<LINK href="style.css" TYPE="text/css" rel="stylesheet">
</head>
<body>

<div id="container">

<div id="header"></div>

<div id="top_menu"></div>

</div>

</body>
</html>

Для блоков "header" и "top_menu" в файле style.css пропишем стили

#header {
background-image: url(images/header.jpg);
width:1037px;
height:197px;
}

#top_menu {
background-color:#E1C435;
background-image:url(images/menu.jpg);
width:1037px;
height:37px;
}

Теперь наша страница будет выглядеть ТАК, а запись в файле style css такой

3. Создание левого, правого и центрального блоков

Далее создадим блоки левой, правой и центральной части страницы и индефецируем их как:
id="left"
id="right"
id="content"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Мой первый сайт</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<LINK href="style.css" TYPE="text/css" rel="stylesheet">
</head>
<body>

<div id="container">

<div id="header"></div>

<div id="top_menu"></div>

<div id="left"></div>

<div id="right"></div>

<div id="content"></div>

</div>

 

</body>
</html>

В файл style css для этих блоков пропишем стили, левой и правой колонке зададим размер ширины 230px, и значение float-обтекание, для левой колонки left и соответственно для правой колонке right, а центральной колонке ширину задавать не нужно, а только отступы от левого и правого края центрального блока. Добавим к ширине левого и правого блока по 2 пикселя и в стилях пропишем отступы 232px

#left {
width:230px;
height: 500px;
float:left;
}

#right {
width:230px;
height:500px;
float:right;
}

#content {
height:100%;
margin:0px;
margin-left:232px;
margin-right:232px;
}

Сейчас наша страница сайта выглядит ТАК, а запись в файле style.css будет такой такой

4.Создание блока для низа страницы

Перед блоком низа страницы, создадим пустой блок и индефицируем его как "clear", этот блок как бы подводит черту под тремя блоками - левой, правой и центральной колонок, а так же создадим блок и индефицируем его как "footer"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Мой первый сайт</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<LINK href="style.css" TYPE="text/css" rel="stylesheet">
</head>
<body>

<div id="container">

<div id="header"></div>

<div id="top_menu"></div>

<div id="left"></div>

<div id="right"></div>

<div id="content"></div>

<div id="clear"></div>

<div id="footer"></div>

</div>

 

</body>
</html>

А в файл style.css добавим стили для этих блоков

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

#footer {
background-color:#C5AC2E;
background-image: url(images/footer.jpg);
width:1036px;
height:25px;
padding-top:0px;
text-align: center;
}

Сейчас наша html страница сайта выглядит ТАК, а запись в файле style.css будет такой

Нам осталось создать верхнее и левое меню и каркас страницы будет готов, смотрим продолжение, нажмите кнопку 4

Rambler's Top100 Яндекс цитирования