Формирование контента и гиперссылки.

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

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

Суть блочной вёрстки

В графическом редакторе создаётся макет сайта: размечается, где какая область страницы ("чердак", "подвал", боковая панель, основной контент) будет находиться и сколько места занимать, готовятся картинки, фоны.

Каждая часть страницы помещается в свой блок <div>: верх сайта — в первый, меню — во второй, контент — в третий и т. д. Каждый блок наполняется содержимым средствами HTML, а также позиционируется и оформляется с помощью CSS-разметки.

Конечный HTML-документ представляет собой набор блоков <div> с контентом внутри. Оформление зачастую находится в отдельном CSS-файле, подключенном к странице тегом <link>, или как минимум в контейнере <style> секции <head>.

Отличия блочной вёрстки от табличной

Если табличная вёрстка подразумевает, что содержимое страницы находятся внутри тега<table>, то концепция блочной вёрстки основана на активном использовании универсальных тегов <div>, внутрь которых помещается содержимое, включая другие теги.

Блочная вёрстка лишена недостатков табличной — поисковыми системами она индексируется лучше, её код не такой развесистый, да и блоки <div>, которые так любят называть «слоями», изначально задумывались универсальными, то есть «для всего», тогда как <table> — это таблица, которую нужно использовать для отображения табличных данных и не более того.

Единственный ощутимый минус блочной вёрстки — сделанные на ней сайты могут по-разному отображаться в обозревателях. Чтобы этого избежать, нужно делать вёрстку «кроссбраузерной», то есть одинаково отображаемой любым обозревателем.

Принципы блочной вёрстки

Первый — конечно же, повсеместное использование тега <div>, который можно назвать базовым элементом блочной структуры, но об этом было сказано уже достаточно много.

Второе правило — принцип разделения кода, согласно которому содержимое от оформления нужно отделять. Говоря проще и ближе к нашему случаю: HTML — отдельно, CSS — отдельно (желательно в разные файлы). Такой подход делает структуру понятней. Программисту не нужно открывать CSS, дизайнеру — HTML.

Третий принцип — таблицы нужно использовать не везде, а по необходимости, при этом полностью отказываться от них так же странно, как и применять не к месту.

Пример блочной вёрстки

Итак, у нас есть макет (рисунок ниже). Условный, конечно, просто разметка, ведь цель примера — как можно наглядней объяснить принцип создания блочной вёрстки(попробовать себя в блочной верстке можно будет в практической работе №5). Зная базу, навести красоту и усложнить макет вы сможете и сами.

Согласно макету, страница сайта будет содержать пять блоков: «чердак», навигационное меню, боковую панель, основной блок с контентом и «подвал».

Сначала создадим HTML-страницу: обозначим структуру, разметим её. HTML-код будет таким:

	<!DOCTYPE html>
<html>
<head>
    <title>Блочная вёрстка</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
	<div id="header">
	<h2>header ("чердак" сайта)</h2>
	</div>
		 
	<div id="navigation">
	<h2>Блок навигации/h2>
	</div>
		 
	<div id="sidebar">
	<h2>Левая панель</h2>
	</div>
		 
	<div id="content">
	<h2>Основной контент страницы</h2>
	</div>
		 
	<div id="clear">
		 
	</div>
							   
	<div id="footer">
	<h2>footer ("подвал" сайта)</h2>
	</div>
</div>
</body>
</html>

<div id="container"> — это блок-родитель, внутри которого расположились все остальные блоки. Как ячейки таблицы внутри <table>. Назначение дочерних контейнеров должно быть понятно, за исключением разве что блока <div id="clear">.

Если открыть HTML-файл в браузере, не подключая таблицу стилей, страница будет выглядеть так.

Результат отображения браузером

Теперь добавим файл CSS, код которого приведён ниже.

	
body {
     background: #FFF;
     color: #000;
     font-family: Arial, sans-serif;
     font-size: 14px;
}

.header {
     background: #F5DEB3;
     width: 100%;
     height: 55px;
}
 
.container {
     background: #FFD700;
     margin: auto auto;
     text-align: center;
     width: 80%;
     height: 400px;
}
 
.navigation {
     background: #FE9798;
     width: 100%;
     height: 25px;
}
 
.sidebar {
     background: #40E0D0;
     float: left;
     width: 20%;
     height: 280px;
}

.content {
     background: #DCDCDC;
     float: right;
     width: 80%;
     height: 280px;
}
 
.clear {
     clear: both;
}
 
.footer {
    background: #00BFFF;
	width: 100%;
	height: 40px;
}

С помощью стилей мы последовательно оформляем содержимое тега <body> и всех находящихся внутри контейнеров с помощью ранее изученных правил. #clear{clear:both;} запрещает обтекание элемента слева и справа. Если убрать это правило, вёрстка «поедет» и низ сайта перестанет корректно отображаться.

CSS творит чудеса, и с ним наша HTML-страница примет уже совсем другой вид.

Результат отображения браузером

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