Новые уроки
Получай новые уроки по RSS

Подписка на рассылку


Голосование
Чего выкладывать больше?
Программ
Уроков
Скриптов
Шаблонов
Макетов
CMS
Видеоуроков
Облако тегов

HTML и XHTML, CSS → Блочная верстка. Первый урок

Блочная верстка. Первый урокСегодня поговорим о блочной верстке, познакомимся с азами веб-дизайна, что в последствии послужит нам хорошей базой наших знаний, которые потом сможем применить на практике.

Меньше слов больше дел и так начнем!

Пункт 1

Тэг div это блочный элемент который выполняет роль контейнера на веб странице. С помощью таблицей css стилей можно изменять как содержание блока так и его внешний вид.

тэг div следует записывать следующим образом

Код:

<div>
<!--содержимое контейнера-->
</div>


ВНИМАНИЕ!!! ТЭГ DIV ВСЕГДА ЗАКРЫВАЕТСЯ !!!
Часто начинающие веб-дизайнеры допускают такую оплошность, что ведет за собой изменения как в коде так и в дизайне.

Покажу вам довольно простой пример как необходимо использовать тэг
на странице которая размещенна по центру экрана и еще имеет фиксированую ширину.

Код страницы с фиксированной шириной:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Fixed Width CSS Layouts</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<!-- Begin Wrapper -->
<div id="wrapper">
<!-- Begin Header -->
<div id="header">
Header
</div>
<!-- End Header -->
<!-- Begin Content -->
<div id="content">
Content
</div>
<!-- End Content -->
<!-- Begin Footer -->
<div id="footer">
Footer
</div>
<!-- End Footer -->
</div>
<!-- End Wrapper -->
</body>
</html>


Таблица css стилей :

/*Задаём для "каркаса" страницы нулевые отступы, шрифт, цвет*/
body{
padding:0;
margin:0;
font:bold 13px Verdana, Arial, Helvetica, sans-serif; /*свойства шрифта для всей страницы*/
color:#666; /*цвет текста*/
text-align:center; /*центрирование текста по-центру*/
}
/*Блоку с id="wrapper" задаем ширину главного блока равную 920px,
a margin:0 auto; как раз и центрирует блок и всё его содержимое*/
#wrapper {
margin:0 auto;
width:920px;
}
/*Создаём шапку сайта*/
#header {
width:900px; /*ширина блока*/
padding:10px; /*внутренние отступы с четырёх сторон равны 10px*/
border:1px solid #a4ce60; /*граница блока*/
height:100px; /*фиксированная высота блока*/
margin:10px 0 5px 0; /*внешние отступы блока, в данном случае сверху и снизу*/
background:#bdda7e; /*цвет фона*/
line-height:100px; /*расстояние между строк*/
}
/*Этот блок делается таким же образом как и шапка, единственное, для того,
чтобы блок тянулся вниз с увеличением контента (текста), необходимо
убрать фиксированную высоту height*/
#content {
width:900px;
border:1px solid #d2d2d2;
background:#e6e6e6;
margin:0 0 5px 0;
padding:10px;
height:350px;
line-height:350px;
}
/*Футер строится по аналогии*/
#footer {
width:900px;
border:1px solid #bed63a;
background:#e1edbf;
margin:0 0 10px 0;
padding:10px;
}


Вот и все, удачи!
Опубликовал dimas_ua, 10-08-2010, 00:00 Комментариев: 0
 (голосов: 3)