Главная | Обратная связь | Поможем написать вашу работу!
МегаЛекции

HTML верстка. Урок 3: Ячейки Search и TopMenu





Теперь будем делать верстку для ячеек 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-код, который мы добавили на этом уроке.

 





Рекомендуемые страницы:

Воспользуйтесь поиском по сайту:



©2015- 2021 megalektsii.ru Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав.