Html верстка. Урок 2: Ячейка top
Теперь будем заполнять ячейки изображениями. Начнем с Top. Посмотрите на макет: верх можно разделить на следующие слои: фон, дом, логотип.
При создании макета я применила маленькую хитрость: рисунок с травой и облаками склеен из одного и того же повторяющегося изображения. Это очень удобно, т.к. при растягивании ячейки Top он сможет повторяться столько раз, сколько потребует ширина вашего экрана. Итак, мы вырезали часть изображения и назвали его top_bg.jpg.
(Подсказка: если бы рисунок был не повторяющимся, нужно было бы заготовить фон для ячейки Top размером не менее 1280 пкс в ширину - такое разрешение экрана у пользователей с мониторами LCD 17-19 дюймов (можно сделать и 1600 пкс, но такое разрешение у очень малого количества пользователей, а всем остальным придется загружать большую картинку).
Отдельно мы вырежем домик и назовем его house.jpg.
Осталось лого. Просто вырезать логотип вместе с кусочком облака нельзя, т.к. логотип всегда должен находиться около правого края страницы, не зависимо от ее длины. Т.е. неизвестно, на какой участок фона попадет лого. Поэтому нужно, чтобы фон просвечивался под буквами. Для этого мы:
временно отключим слой с облаками в графическом редакторе;
подложим под лого прямоугольник голубого цвета (такого же, как переход "небо-облака");
вырежем лого и сохраним его в формате .gif. Голубой цвет назначим прозрачным.
Создадим в Top вложенную таблицу, левая ячейка которой будет содержать house.jpg. По ширине и высоте она будет равна размерам рисунка. Правая ячейка будет растягиваться на всю оставшуюся часть экрана, причем ее содержимое - logo.gif - будет выравниваться по правому краю, отступая от верхнего и правого края экрана по 55 пкс.
Вот код ячейки Top. Для вложенной таблицы мы воспользовались уже имеющимся в style.css классом main, чтобы она занимала всю площадь ячейки.
index.html
<td colspan="2" class="top">
<table class="main">
<tbody>
<tr>
<td><img width="285" height="165" border="0" src="house.jpg" alt="" /></td>
<td class="logo"><img width="206" height="27" border="0" src="logo.gif" alt="" /></td>
</tr>
</tbody>
</table>
</td>
style.css
td.top {
background-image: url(top_bg.jpg);
height: 165px;}
td.logo {
width: 100%;
text-align: right;
padding-top: 55px;
padding-right: 55px;}
Верх готов. Посмотрите html-страницу, а также полный текст файлов index.html и style.css. Синим цветом в файлах помечен html-код, который мы добавили на этом уроке.
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-код, который мы добавили на этом уроке.