5.2.5 Создание нижнего меню. Ячейки Copyright и Bottom
Еще раз вспомним наш макет. Две нижние ячейки довольно простые для верстки, но и здесь есть свои тонкости (рис. 18).
Рис. 18. Создание нижнего меню
Сначала
сверстаем левую ячейку.
В ячейке Copyright нужно добиться того, чтобы сверху она отчеркивалась линией, не доходящей до края ячейки на 5 пкс. Для этого сделаем соответствующий отступ внутри ячейки (справа), а все остальное пространство заполним таблицей с одной-единственной ячейкой. Верхняя граница у нее будет в виде серой линии толщиной 1 пкс (на рисунке она помечена красным пунктиром). Также для ячейки укажем цвет фона и шрифт. Текст разместим по центру.
index.html
<td class="copyright">
<table class="main">
<tbody>
<tr>
<td class="cprghtitem">Copyright © RealErtateCompany.com</td>
</tr>
</tbody>
</table>
</td>
style.css
td.copyright {
padding-right: 5px;
height: 32px;}
td.cprghtitem {
border-top: 1px solid #cacaca;
background-color: #f5f5f5;
font-size: 10px;
color: #656565;
vertical-align: middle;
text-align: center;}
Теперь правая ячейка (BottomMenu) (рис. 19).
Рис. 19 Создание нижнего меню
Для нее сделаем повторяющийся оранжевый фон. Внутри BottomMenu будет вложенная таблица - как и в первом случае, всего с одной ячейкой. Это сделано для того, чтобы в этой ячейке указать в качестве фона изображение тени. Можно было бы поступить по-другому: сделать вложенную в BottomMenu таблицу с двумя ячейками. В левую вставить тень, в правую - собственно ссылки нижнего меню. Но html-код в этом случае был бы тяжелее.
В ячейку со ссылками - назовем ее BtmenuItem - вставим ссылки, разделенные изображение точек (dots2.gif). У dots2.gif я выставила величины:
hspace="12". Это отступ по горизонтали от картинки до текста. Он нужен, чтобы точки находились на расстоянии от букв (Как вариант можно было бы поставить пару пробелов: ).
vspace="1". Отступ по вертикали - для того, чтобы точки были повыше, как бы посередине букв (по вертикали).
index.html
<td class="bottommenu">
<table class="main">
<tbody>
<tr>
<td class="btmenuitem">
<a href="" class="menu">Home</a>
<img width="5" vspace="1" hspace="12" height="5" src="dots2.gif" alt="" />
<a href="" class="menu">News</a>
<img width="5" vspace="1" hspace="12" height="5" src="dots2.gif" alt="" />
<a href="" class="menu">About Us</a>
<img width="5" vspace="1" hspace="12" height="5" src="dots2.gif" alt="" />
<a href="" class="menu">Catalog</a>
<img width="5" vspace="1" hspace="12" height="5" src="dots2.gif" alt="" />
<a href="" class="menu">Contacts</a>
</td>
</tr>
</tbody>
</table>
</td>
style.css
td.bottommenu {
background-image: url(bottom_bg.jpg);
background-color: #ff8e51;
height: 32px;}
td.btmenuitem {
background-image: url(bottom_shadow.jpg);
background-repeat: no-repeat;
vertical-align: middle;
text-align: center;}
Ячейка с копирайтом и нижнее меню готовы. Посмотрите html-страницу, а также полный текст файлов index.html и style.css. Синим цветом в файлах помечен html-код, который мы добавили сейчас.
Main.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">
<table class="main">
<tr>
<td class="cprghtitem">Copyright © RealErtateCompany.com</td>
</tr>
</table>
</td>
<td class="bottommenu">
<table class="main">
<tr>
<td class="btmenuitem">
<a class="menu" href="">Home</a>
<img src="dots2.gif" width="5" height="5" vspace="1" hspace="12">
<a class="menu" href="">News</a>
<img src="dots2.gif" width="5" height="5" vspace="1" hspace="12">
<a class="menu" href="">About Us</a>
<img src="dots2.gif" width="5" height="5" vspace="1" hspace="12">
<a class="menu" href="">Catalog</a>
<img src="dots2.gif" width="5" height="5" vspace="1" hspace="12">
<a class="menu" href="">Contacts</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</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">
<table class="main">
<tr>
<td class="cprghtitem">Copyright © RealErtateCompany.com</td>
</tr>
</table>
</td>
<td class="bottommenu">
<table class="main">
<tr>
<td class="btmenuitem">
<a class="menu" href="">Home</a>
<img src="dots2.gif" width="5" height="5" vspace="1" hspace="12">
<a class="menu" href="">News</a>
<img src="dots2.gif" width="5" height="5" vspace="1" hspace="12">
<a class="menu" href="">About Us</a>
<img src="dots2.gif" width="5" height="5" vspace="1" hspace="12">
<a class="menu" href="">Catalog</a>
<img src="dots2.gif" width="5" height="5" vspace="1" hspace="12">
<a class="menu" href="">Contacts</a>
</td>
</tr>
</table>
</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 {
padding-right: 5px;
height: 32px;
}
td.cprghtitem {
border-top: 1px solid #cacaca;
background-color: #f5f5f5;
vertical-align: middle;
text-align: center;
color: #656565;
font-size: 10px;
}
td.bottommenu {
background-image: url(bottom_bg.jpg);
background-color: #ff8e51;
height: 32px;
}
td.btmenuitem {
background-image: url(bottom_shadow.jpg);
background-repeat: no-repeat;
vertical-align: middle;
text-align: center;
}