
Теперь будем делать вёрстку для ячеек Search и TopMenu. Пока не будем трогать тень под ними — с ней мы разберёмся в следующем уроке.

Сделаем фон для каждой из ячеек:

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 поместим вложенную таблицу. Ячейки таблицы будут с небольшим отступом справа (чтобы надпись SEARCH не сливалась с формой ввода, а та — с кнопкой). Сама форма поиска, как и ячейка, в которой она находится, будет шириной в 100%. Откройте страницу с вёрсткой и порастягивайте её в ширину. Как видите, форма ввода тоже растягивается.

Но самое оригинальное мы сделаем с ячейкой, в которой должна быть надпись «:: 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%). Возникает вопрос: как лучше сделать разделители между элементами меню? Можно сделать их изображениями шириной в 1 пиксель, добавить в таблицу ещё 5 ячеек (по одной после каждого пункта меню) и поместить в них разделители. Но ещё в первом уроке мы договорились, что как можно больше html-кода вынесем в style.css. Так что сделаем div.jpg фоном ячеек Menuitem и привяжем его к правому краю.
Для ссылок в меню пропишем свойства шрифта (10 пикселей, верхний регистр, белый, жирный, без подчёркивания).

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-код, который мы добавили на этом уроке.
Автор: Инна Пастухова.