Aug 28

Урок блочной верстки 1-й

Уроки HTML/CSS Добавить комментарии

Шаблон фиксированной шириныНаконец решилась на создание серии уроков по блочной вёрстке :)
Знакомые не раз просили рассказать о нюансах блочной вёрстки. Поэтому данный материал создаётся от части для того, чтобы не повторять одно и то же по несколько раз. Уж очень я этого не люблю :(
Это первый урок, но в последствии обязательно выйдет еще несколько уроков на тему верстки дивами. Итак, не будем терять времени… Начнём.

Урок 1 – тег <div> описание и синтаксис.

Для начала предлагаю разобраться с тегом <div>,  который выполняет роль контейнера на веб-странице.

Элемент <div> является блочным элементом и позволяет изменять содержимое блока (или же внешний вид самого блока)  с помощью css-стилей.

Вот таким образом записывается данный тег:

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

Обращаю внимание! Тег <div> закрывающийся!
Часто на начальном этапе у новичков возникают сложности с закрытием тегов, но не следует пренебрегать данным правилом, так как не закрытые теги повлекут за собой ошибки в коде и изменения в дизайне.

Рассмотрим пример использования тега <div> на странице фиксированной ширины, которая размещена по-центру экрана.

Перед вами html-код страницы фиксированной ширины.

< !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-стиль ( о том как подключить внешний 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;
}

Как видите, ничего сложного нет. Готовый пример можно увидеть здесь

Похожие статьи

Один ответ на “ Урок блочной верстки 1-й ”

  1. BATAZOR сказал:
    July 31st, 2011 в 2:07 am

    Посмотрим что получится

Оставить ответ