Маркет Витрина

HTML верстка. Урок 4: Ячейки News и Text. Посмотрите на рисунок: я специально убрала содержимое в ячейках News и Text, т.к. заполнять их мы будем позже. Сейчас сделаем «каркас» ячеек.

Макет создан таким образом, чтобы на странице была иллюзия объема: ячейки Search, Topmenu отбрасывают тень вниз, а News, в свою очередь, затеняет Text. При этом на границе всех четырех ячеек есть маленький, но важный для нас участок пересечения теней. Он должен отображаться в браузере точно так же, как на макете. Есть несколько как минимум два варианта верстки в этом случае:

1) Сделать тени в виде полупрозрачных изображений, растянутых по всей ширине ячеек News и Text, а также по всей высоте ячейки Text:

Однако чтобы реализовать такое решение, придется потрудиться. Единственный формат для веб-изображений, который поддерживает градиентную прозрачность – это .png, но он некорректно отображается в Internet Explorer. С другой стороны, для IE есть фильтр alpha, который придает изображению прозрачность, но не работает в Opera и Firefox. Можно совместить оба способа: к png-изображению добавить фильтр для IE.

<img src='pic1.png' 
style='filter: alpha(style=1, opacity=30, startx=0, 
finishx=0, starty=0, finishy=100)'>
<!-- вертикальный градиент  -->
<img src='pic2.png' 
style='filter: alpha(style=1, opacity=30, startx=0, 
finishx=100, starty=0, finishy=0)'>
<!-- горизонтальный градиент  -->

Но самое сложное – это наложить друг на друга 2 изображения (pic1.png и pic2.png), да еще и поверх содержимого ячейки Text. Можно попытаться сделать это с помощью слоев (тег <div>).

<div style='width: 100%'>
<img src='pic1.png' width='100%'>
</div>
<div style='height: 100%'>
<img src='pic2.png' height='100%'>
</div>

Однако в Fifefox <div> не растягивается на 100%-ю высоту, а нам это необходимо для отображения вертикальной тени. Если Вам интересно, можете позже попробовать самостоятельно решить эту задачку, а пока рассмотрим второй способ.

2) Сделать в нашей главной таблице еще одну строку с двумя ячейками (они будут располагаться между строками Search&Topmenu и News&Text). Назовем их ShadowLeft и ShadowRight. В них не будет никакой прозрачности – только градиент от серого к белому в качестве фона. В месте пересечения теней будут вставлены соответствующие изображения.

Фоном ячейки News будет изображение вертикальной полосы, а фоном Text – градиент от серого к белому (без прозрачности).

<tr>
 <td class='shadowleft'>
 <img src='shadowleftpic.jpg' 
 width='6' height='5' border='0'></td>
 <td class='shadowright'>
 <img src='shadowrightpic.jpg' width='7' 
 height='5' border='0'></td>
</tr>
<tr>
 <td class='news'></td>
 <td class='text'></td>
</tr>

td.shadowleft, td.shadowright {
 background-image: url(shadow.jpg);
 height: 5px;
}
td.shadowleft {
 text-align: right;
}
td.news {
 background-image: url(news_bg.jpg);
 background-repeat: repeat-y;
 background-position: right; 
}
td.text {
 background-image: url(text_bg.jpg);
 background-repeat: repeat-y;
}

Каркас для ячеек готов.