5.2.4 Работа с оформлением, графикой. Ячейки News и Text
Посмотрите на рисунок 14: специально убрано содержимое в ячейках News и Text, т.к. заполнять их мы будем позже. Сейчас сделаем «каркас» ячеек.
Рис. 14 Разработка макета
Макет создан таким образом, чтобы на странице была иллюзия объема: ячейки Search, Topmenu отбрасывают тень вниз, а News, в свою очередь, затеняет Text. При этом на границе всех четырех ячеек есть маленький, но важный для нас участок пересечения теней. Он должен отображаться в браузере точно так же, как на макете. Есть несколько как минимум два варианта верстки в этом случае:
1) Сделать тени в виде полупрозрачных изображений, растянутых по всей ширине ячеек News и Text, а также по всей высоте ячейки Text (рис. 15):
Рис. 15 Разработка макета
Однако чтобы реализовать такое решение, придется потрудиться. Единственный формат для веб-изображений, который поддерживает градиентную прозрачность - это .png, но он некорректно отображается в Internet Explorer. С другой стороны, для IE есть фильтр alpha, который придает изображению прозрачность, но не работает в Opera и Firefox. Можно совместить оба способа: к png-изображению добавить фильтр для IE.
<img style="" src="pic1.png" alt="" /><!-- вертикальный градиент -->
<img style="" src="pic2.png" alt="" /><!-- горизонтальный градиент -->
Но самое сложное - это наложить друг на друга 2 изображения (pic1.png и pic2.png), да еще и поверх содержимого ячейки Text. Можно попытаться сделать это с помощью слоев тегом <div>).
<div style="width: 100%;"><img width="100%" src="pic1.png" alt="" /></div>
<div style="height: 100%;"><img height="100%" src="pic2.png" alt="" /></div>
Однако в Fifefox не растягивается на 100%-ю высоту, а нам это необходимо для отображения вертикальной тени. Если Вам интересно, можете позже попробовать самостоятельно решить эту задачку, а пока рассмотрим второй способ.
2) Сделать в нашей главной таблице еще одну строку с двумя ячейками (они будут располагаться между строками Search&Topmenu и News&Text). Назовем их ShadowLeft и ShadowRight. В них не будет никакой прозрачности - только градиент от серого к белому в качестве фона. В месте пересечения теней будут вставлены соответствующие изображения (рис. 16).
Рис. 16 Тонкости разработки макета
Фоном ячейки News будет изображение вертикальной полосы, а фоном Text - градиент от серого к белому (без прозрачности) (.
Рис. 17 Тонкости разработки макета
index.html
<tr>
<td class="shadowleft"><img width="6" height="5" border="0" src="shadowleftpic.jpg" alt="" /></td>
<td class="shadowright"><img width="7" height="5" border="0" src="shadowrightpic.jpg" alt="" /></td>
</tr>
<tr>
<td class="news"></td>
<td class="text"></td>
</tr>
style.css
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;}
Каркас для ячеек готов. Посмотрите html-страницу, а также полный текст файлов index.html и style.css. Синим цветом в файлах помечен html-код, который мы добавили в данном разделе.
Index.html
<html>
<head>
<title>Layout</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<table class="main">
<tr>
<td class="top" colspan="2">
<table class="main">
<tr>
<td><img src="house.jpg" width="285" height="165" border="0"></td>
<td class="logo"><img src="logo.gif" width="206" height="27" border="0"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="search">
<form action="">
<table class="main">
<tr>
<td class="searchitem hdr">search</td>
<td class="searchitem" width="100%"><input type="text" name="Search" style="width: 100%"></td>
<td class="searchitem"><input type="image" src="button.jpg" width="22" height="39" border="0"></td>
</tr>
</table>
</form>
</td>
<td class="topmenu">
<table class="main">
<tr>
<td class="menuitem"><a class="menu" href="">Home</a></td>
<td class="menuitem"><a class="menu" href="">News</a></td>
<td class="menuitem"><a class="menu" href="">About Us</a></td>
<td class="menuitem"><a class="menu" href="">Catalog</a></td>
<td class="menuitem"><a class="menu" href="">Contacts</a></td>
</tr>
</table>
</td>
</tr>
<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>
<tr>
<td class="copyright"></td>
<td class="bottommenu"></td>
</tr>
</table>
</body>
</html>
Style.css
html, body {
margin:0px;
padding:0px;
}
body, input, select, textarea {
background-color: #ffffff;
}
td, input, select, textarea {
font-family: Tahoma;
font-size: 11px;
color: #000000;
vertical-align: top;
}
td {
padding: 0px;
}
table.main {
width: 100%;
height: 100%;
border-collapse: collapse;
}
td.top {
background-image: url(top_bg.jpg);
height: 165px;
}
td.logo {
width: 100%;
text-align: right;
padding-top: 55px;
padding-right: 55px;
}
td.search {
background-image: url(search_bg.jpg);
background-color: #dce1e9;
height: 39px;
}
td.topmenu {
background-image: url(topmenu_bg.jpg);
background-color: #ff8e51;
}
td.searchitem {
vertical-align: middle;
text-align: center;
padding-right: 11px;
}
form {
margin: 0px;
}
td.hdr {
vertical-align: middle;
text-transform: uppercase;
font-weight: bold;
font-size: 10px;
background-image: url(dots.gif);
background-repeat: no-repeat;
background-position: 10px;
padding-left: 21px;
}
td.menuitem {
vertical-align: middle;
text-align: center;
width: 20%;
background-image: url(menuitem_bg.jpg);
background-repeat: no-repeat;
background-position: right;
}
a.menu {
text-decoration: none;
text-transform: uppercase;
color: #ffffff;
font-weight: bold;
font-size: 10px;
}
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;
width: 30%;
}
td.text {
background-image: url(text_bg.jpg);
background-repeat: repeat-y;
width: 70%;
height: 100%;
}
td.copyright {
}
td.bottommenu {
}