HTML верстка. Виды верстки.

К оглавлению
Разберем кратко виды верстки, в чем их отличия, плюсы, минусы.

Табличная верстка

Самый старый вид верстки - это Табличная верстка.
Сайт пишется с помощью таблицы (тэг <table>), которая растянута на 100% размера сайта. В ячейках размещается необходимая информация. Рамку таблицы и ячеек убирают, и пользователь не видит что это таблица, перед ним красивый сайт.
Пример в коде: 
<HTML>
	<HEAD>
	</HEAD>
	<BODY>
		<table width="100%" cellpadding="5" cellspacing="0">
			<tr>
				<td height="30" colspan="3" bgcolor="grey">
					Заголовок
				</td>
			</tr>
			<tr>
				<td bgcolor="green" valign="top">
					Левая колонка
				</td>
				<td bgcolor="red" valign="top">
					Середина
				</td>
				<td bgcolor="yellow" valign="top">
					Правая колонка
				</td>
			</tr>
			<tr>
				<td height="30" colspan="3" bgcolor="purple">
					Футер
				</td>
			</tr>
		</table>
	</BODY>
</HTML>

Получиться вот так:
Заголовок
Левая колонка Середина Правая колонка
Футер


Плюсы:


Минусы:
  • Старомодность. Если говорить о моде :D
  • Очень много кода. Соответственно медленная загрузка страниц (в наш век это не существенно)
  • Возможные сложности в дизайне сайта


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

Самый "модный" и популярный вид верстки - это Блочная верстка.
В данном случае сайт пишется с помощью блоков(слоев) - <div>.
Пример: 
<HTML>
	<HEAD>
	</HEAD>
	<BODY>
		<div class="wrap">
			<div class="head">
				Заголовок
			</div>
			<div class="left">
				Левая колонка
			</div>
			<div class="center">
				Середина
			</div>
			<div class="right">
				Правая колонка
			</div>
			<div class="footer">
				Футер
			</div>
		</div>
	</BODY>
</HTML>

Блоки сайта располагаются в одном общем блоке, в данном случае это блок с классом "wrap". Это делается для того, чтобы можно было произвольно располагать сайт в окне браузера(прим. по центру).

В случае с блочной версткой, необходимо использовать CSS стили. Для того чтобы выровнять блок по правому, левому краю, прижать к низу, задаются определенные стили. К примеру:
float:left; - Обтекание по левому краю.
float: right; - Обтекание по правому краю

Плюсы:
  • Накладывание слоев друг на друга
  • Меньшее количество кода, соответственно быстрая загрузка страниц
  • Лучшая индексация поисковиками


Минусы:
  • Корректирование стилей, для отображения в разных браузерах(слабая кроссбраузерность).
  • Сложность построения структуры блоков


Резиновая и фиксированная верстка


Также, верстка делиться на резиновую и фиксированную. Различие заключается лишь в том, что в резиновой верстке применяется стиль ширины и высоты элементов в процентном отношении. А в фиксированной версте в постоянной величине - пикселях.

Резиновая верстка

Ширина блоков изменяется в зависимости от размеров браузера.
Рассмотрим пример: 
<HTML>
	<HEAD>
		<style>
			.wrap {
				/*Ширина блока с содержимым сайта равна ширине окна браузера*/
				width: 100%;
				min-width: 60%; // Можно задать минимальную ширину
			}
		</style>
	</HEAD>
	<BODY>
		<div class="wrap">
			<div class="head">
				Заголовок
			</div>
			<div class="left">
				Левая колонка
			</div>
			<div class="center">
				Середина
			</div>
			<div class="right">
				Правая колонка
			</div>
			<div class="footer">
				Футер
			</div>
		</div>
	</BODY>
</HTML>

Фиксированная верстка

Ширина блоков не изменна. Она задана в стилях в постоянной величине - пикселях. И не важно, какого размера окно браузера, блок будет установленной величины.
В простейшем случае с фиксированной версткой, если блок не умещается в окно браузера(блок 1000 пикселей, а ширина экрана 500), появляются полосы прокрутки.
Полосы прокрутки


Основные виды верстки мы с Вами разобрали. Мы с вами будем пользоваться блочной версткой, как фиксированной, так и резиновой, в некоторых случаях мы будем комбинировать оба этих подхода.