Верстка HTML при помощи div (дивов)
Представим себе простую игру тетрис. Как всем известно, в этой игре фигуры разной формы падают сверху. И задача расставить их в нужном порядке, чтобы не оставалось пустых мест в строках. Как только завершена очередная строка мы получаем за нее очки и она исчезает.
Но при чем же здесь HTML спросите вы? Ответ в том что верстка при помощи слоев очень похожа на эту игру. Только она еще проще, потому что мы сами можем заказывать себе фигуры нужной формы, и они всегда будут самыми простыми - прямоугольники и квадраты.
Берем PSD-исходник, выделяем на нем нужный нам слой под фон, это может быть какая-то большая картинка в шапке, ну и возможно градиент в подвале, тогда нужно будет их разрезать на две части и залить в середине нужным фоном. В результате мы получим код примерно следующего вида:
<div id=”header”></div>
<div id=”footer”></div>
Игровая зона будет определена при помощи основного слоя, в котором мы и будем играть в “тетрис”.
<div id=”content”>
Здесь контент
</div>
И теперь просто режем нужные нам кусочки и впускаем их в игровую зону, они будут “падать” в верхнюю часть страницы.
