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

Создаем простые круглые уголки для таблицы с розовым фоном, кнопка должна быть серого цвета. Будем использовать HTML-элемент таблицу.

Код таблицы:

<table width=”100%” border=”0″ cellpadding=”5″ cellspacing=”0″ bgcolor=”#EC008C”>

<tr>

<td height=”61″>

<table border=”0″ cellpadding=”0″ cellspacing=”0″>

<tr>

<td><img src=”/img/sub2_left.gif” width=”5″ height=”34″></td>

<td valign=”middle” height=”31″ class=”item”><a href=”#”>Пункт меню</a></td>

<td><img src=”/img/sub2_right.gif” width=”5″ height=”34″></td>

</tr>

</table>

</td>

</tr>

</table>

CSS код:

.item {

vertical-align: middle;

background-color: #BEBDBD;

}

Результат:

Пункт меню