5.2.3 Разработка меню и строки поиска
Теперь будем делать верстку для ячеек Search и TopMenu (рис.10, 11). Пока не будем трогать тень под ними - с ней мы разберемся в следующей части методических указаний.
Рис. 10 Разработка строки меню и строки поиска
Сделаем фон для каждой из ячеек.
Рис. 11 Разработка макета строки меню и строки поиска
style.css
td.search {
background-image: url(search_bg.jpg);
background-color: #dce1e9;
height: 39px;
}
td.topmenu {
background-image: url(topmenu_bg.jpg);
background-color: #ff8e51;
}
В Search поместим вложенную таблицу (рис.12). Ячейки таблицы будут с небольшим отступом справа (чтобы надпись SEARCH не сливалась с формой ввода, а та - с кнопкой). Сама форма поиска, как и ячейка, в которой она находится, будет 100%-ширины. Откройте страницу с версткой и порастягивайте ее в ширину. Как видите, форма ввода тоже растягивается.
Рис. 12 Разработка строки поиска
Но самое оригинальное мы сделаем с ячейкой, в которой должна быть надпись «:: SEARCH». Назовем ее hdr. Во-первых, в ней нужно указать параметры шрифта (верхний регистр, жирный). Во-вторых, изображение точек - dots.gif - сделаем его фоном ячейки. Причем фон можно точно позиционировать (background-position: 10px - отступ от левого края ячейки). И сделаем padding-left: 21px (отступ текста), чтобы текст не налезал на точки.
Возможно, вам покажется, что это лишние сложности - не проще ли было бы вставить dots.gif в отдельную ячейку таблицы или написать: <font color="Brown"><b style="font-size:10px;">:: SEARCH</b></font> и получить :: SEARCH
Проще. Зато теперь вам не придется больше задумываться над этим. Напишите <td class="hdr"><font color="Brown">Заголовок</font></td>, и точки перед заголовком появятся автоматически. Так как в файле есть еще несколко заголовков такого типа, вы сэкономите время при дальнейшей верстке.
index.html
<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>
style.css
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;
}
В TopMenu тоже сделаем вложенную таблицу из пяти ячеек одинаковой ширины (по 20%)(рис. 13). Возникает вопрос: как лучше сделать разделители между элементами меню? Можно сделать их изображениями шириной 1 пкс, добавить в таблицу еще 5 ячеек (по одной после каждого пункта меню) и поместить в них разделители. Но еще в первом уроке мы договорились как можно больше html-кода вынести в style.css. Так что сделаем div.jpg фоном ячеек Menuitem и привяжем его к правому краю.
Для ссылок в меню пропишем свойства шрифта (10 пкс, верхниц регистр, белый, жирный, без подчеркивания).
Рис. 13 Разработка макета строки меню
index.html
<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>
style.css
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 {
font-size: 10px;
text-transform: uppercase;
color: #ffffff;
font-weight: bold;
text-decoration: none;
}
Меню и строка поиска готовы. Посмотрите 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="news"></td>
<td class="text"></td>
</tr>
<tr>
<td class="copyright"></td>
<td class="bottommenu"></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="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.news {
width: 30%;
}
td.text {
width: 70%;
height: 100%;
}
td.copyright {
}
td.bottommenu {
}