Что такое блочная верстка (div верстка) сайтов. Разбираем основы..

В последнее время очень популярной стала блочная верстка сайтов или, как ее еще называют, div верстка. Большинство современных сайтов строятся именно по этой технологии. Суть ее заключается в том, что базовый каркас (шаблон) страницы формируется из блоков, в качестве которых выступает html тег DIV . С помощью стилей эти блоки позиционируются на странице определенным образом, формируя каркас, который уже затем наполняют содержимым.

В данном уроке я попытаюсь доходчиво объяснить, что такое блочная верстка и по какому принципу она строится. Материал расчитан на людей, впервые столкнувшихся с понятием div верстка, поэтому спецов прошу не судить строго :)

Урок довольно продолжительный, порядка 30 минут. Поначалу я хотел оформить весь этот материал в текстовом варианте, но потом прикинул сколько места это займет и подумал, что лучше будет записать видео :)

Мы рассмотрим построение различных вариаций 2-х наиболее популярных шаблонов, привиденных на рисунке ниже.

Вот примерный план урока:

1. Что такое блочная верстка, и каковы ее базовые принципы.

2. Верстаем двухколонный макет фиксированной ширины (меню слева)

3. Верстаем двухколонный макет фиксированной ширины (меню справа)

4. Верстаем трехколонный макет фиксированной ширины

5. Разбираем различия фиксированных макетов и резиновых(которые тянутся на весь экран) и соответственно верстаем все перечисленные макеты, только в резиновом варианте..

6. Подводим итог о блочной верстке сайтов..

Я в свое время долго искал материалы по данной теме. Конечно, готовых исполнений шаблонов можно найти достаточно много, но понять сам смысл построения, вот тут-то и начинается самое интересное.. Надеюсь мой урок поможет Вам разобраться со всеми тонкостями этого дела :)