Блочная вёрстка CSS

Уроки CSS

Блочная вёрстка в CSS

В предыдущем уроке была рассмотрена резиновая табличная вёрстка, а в этом уроке будет продемонстрировано создание шаблона для сайта с помощью блоков.

В качестве примера будет сделана фиксированная (жёсткая) блочная вёрстка – то есть при изменении размеров окна веб-браузера сайт будет сохранять свои размеры. Шаблон будет иметь: шапку; блок для контента; левый блок; и подвал;

Хоть выше и было названо 4 блока – на самом деле их будет больше. Для того что бы технология блочной вёрстки была понятна – рассмотрим каждый блок и идентификатор применяемый к нему по отдельности:

#main_pole { … } (<div id=" main_pole "></div>) – внутри этого блока находится вся конструкция сайта. С помощью стилей применяемых к нему определяется положение сайта относительно окна веб-браузера, длина шапки и поля с контентом (но не подвала);

#header { … } (<div id="header"></div>) – это блок располагается над всеми остальными и равен длине всего сайта. В нём актуально разместить название сайта. С помощью стилей ему можно задать: высоту, цвет отступы и другие параметры;

#middle { … } (<div id=" middle "></div>) – большой блок внутри которого находятся ещё три. С помощью стилей можно задать ширину поля с контентом и отступ от подвала сайта. В нём актуально разместить горизонтальное меню, так как оно будет растянуто в длину всего сайта и находиться над полем для контента и правой колонкой.

В селекторе #middle:after { … } будет три атрибута, значение которых наврятли вам известны:

Сам элемент (свойство) :after – означает, что содержимое блока, к которому применено это свойство будет отображаться после него. То есть если написать вместо :after свойство :before – то подвал сайта "залезет" под шапку поверх других блоков (можете попробовать);

content: ' ' - отображать весь написанный контент после этого блока;

clear: both - задаёт, что с обеих сторон элемента запрещено его обтекание другими элементами;

display: table – данный атрибут придаёт элементу свойство блочной таблицы;

#container { … } (<div id=" container "></div>) – разместив что-либо в этом блоке, это будет отображаться поверх всего контента, но на одном уровне с правой колонкой.

#content { … } (<div id=" content "></div>) – В этом блоке должен располагаться весь основной контент (статьи, таблицы, картинки ссылки и прочее). В селекторе прописан единственный параметр, задающий отступы.

#right_bar { … } (<div id=" right_bar "></div>) – правая колонка. В селекторе значение параметра margin-left: … должно быть равно ширине (длине) блока.

#footer { … } (<div id=" right_bar "></div>) – подвал сайта, в котором размещают счётчики и ссылки на обратную связь, службу поддержки и другое. В селекторе значение параметра width: … должно быть равным значению width: … в #main_pole.

Создайте файл div_style.css и поместите в него ниже написанный код. Это файл стилей может являться шаблоном для страниц вашего будущего сайта.

Содержание файла div_style.css

#main_pole {
	width: 1000px;
	margin: 0 auto;
}

#header {
	height: 140px;
	background: #F0CF63;
	padding: 0 0 0 16px;
}

#middle {
	width: 100%;
	padding: 0 0 70px;
	height: 1%;
	position: relative;
}
#middle:after {
	content: '';
	clear: both;
	display: table;
}

#container {
	width: 100%;
	float: left;
	background: White;
}

#content {
	padding: 0 250px 0 10px;
}


#right_bar {
	float: left;
	width: 240px;
	margin-left: -240px;
	background: #F1FFE4;
}

#footer {
	width: 1000px;
	margin: -70px auto 0;
	height: 70px;
	background: #B6E781;
	font-size: 12px;
}

p {
	margin: 16px 10px 20px;
}

a {
	color: Green;
	outline: none;
	text-decoration: underline;
}

a:hover {
	text-decoration: none;
}

Теперь создайте файл index_test.html. В нём будет размещена структура шаблона, а так же некоторые примеры, демонстрирующие работу стилей. В частности будет размещено горизонтальное выпадающее меню, создание которого рассматривалось в одном из предыдущих уроков. В голове страницы (<head> </head>) подключаются стили для страницы и меню.

Содержание файла index_test.html

<!DOCTYPE html>
<html>
<head>
<title>Шаблон для сайта - фиксированная блочная вёрстка</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel="stylesheet" href="page_style.css" type="text/css" />
<link rel="stylesheet" href="drop_vert_menu.css" type="text/css" />
</head>

<body style="background-color: WhiteSmoke">

<div id="main_pole">

	<div id="header">
	
<br><br>
<h1 style="color: White;">Название сайта</h1> 

	</div>

	<div id="middle">
					<ul class="menu">
  <li><a href="#">Главная</a></li>
  <li><a href="#">Второй пункт</a>
    <ul>
      <li><a href="#">Подпункт 1</a></li>
      <li><a href="#">Большое подменю 2</a></li>
      <li><a href="#">Подпункт 3</a></li>
    </ul>
  </li>
    <li><a href="#">Пункт 3</a></li>
  <li><a href="#">Пункт 4</a>
    <ul>
      <li><a href="#">Подпункт 4</a></li>
      <li><a href="#">Подпункт 5</a></li>
      <li><a href="#">Подпункт 6</a></li>
      <li><a href="#">Подпункт 7</a></li>
      <li><a href="#">Подпункт 8</a></li>
    </ul>
  </li>
</ul>

		<div id="container">
	
			<div id="content">

<h2 align="center">Демонстрация </h2>
<p>Текст между тегами <b>&lt;p>&lt;/p></b>, для которых прописаны стилевые параметры.</p>
<i>Наклонный текст между тегами <b>&lt;i>&lt;/i></b>, для которых стили не прописаны.</i>
<br>
<br>
<a href="#">Ссылка зелёного цвета</a>
<br>
<br>
<big>Большой текст без применения стилей.</big>
<br>
<br>
 <p> Контент заключённый между тегов &lt;p>&lt;/p>, в котором уже с другими 
 отступами отображаются:
 <br>
 <br>
 <i>Наклонный текст между тегами &lt;i>&lt;/i>.</i>
 <br>
 <br>
 <a href="#">Ссылка зелёного цвета</a>
 <br>
 <br>
 <big>Большой текст между тегов &lt;big>&lt;/big>.</big> 
 <br>
 <br>
<div style="height:78px; width:512px;  margin: auto; background-color:#EDEDED;  
border-left:4px solid #8B8B8B;" align="center">
<q>Целью школы всегда должно быть воспитание гармоничной личности, 
а не специалиста.</q> <p align="right"><sub> А. Эйнштейн</sub></p>
</div>
 </p>

			</div>
		</div>
	
	<div  id="right_bar">

<h4 align="center">Новостная колонка</h4>
 
<table align="center" width="230" border="1" cellspacing="2" cellpadding="8">
<tr>
<td>Первая новость</td>
</tr>
<tr>
<td>Вторая новость</td>
</tr>
<tr>
<td>Интересные события</td>
</tr>
<tr>
<td>Архив новостей</td>
</tr>
</table>

<br>
<br>

<p>Это правая колонка светлозелёного цвета</p>

	</div>
	
	</div>
	

	<div id="footer">
<br>
<b>Тут могeт быть размещены счётчики</b>	

	</div>	

</div>


</body>
</html>

Результат жёсткой блочной вёрстки

Вы можете и сами дописать необходимые стилевые атрибуты для блоков, опираясь на информацию изложенную в уроках по CSS и HTML.

Таким образом можно сделать простой движок для своего сайта, если каждый из блоков поместить в отдельный файл и подключать его с помощью PHP – <?php include(" … ") ?> Так можно будет внести изменения только в одном файле, а они отобразятся во всех файлах, где объявлено подключение этого элемента. (php include будет работать, только если html-страница находится на хостинге или домашнем сервере).

◄ Предыдущий урок

Содержание

Следующий урок ►

Генератор цветов	Уроки C++	Уроки Windows forms	Учебники по программированию	Уроки HTML	Уроки CSS	Готовые задания	Исходники	Полезные программы