5.2.2 Создание заголовка web-страницы. Ячейка top
Теперь будем заполнять ячейки изображениями. Начнем с Top. Посмотрите на макет (рис.5): верх можно разделить на следующие слои: фон, дом, логотип.
Рис. 5 Макет заголовка web-сайта
При создании макета применяется маленькая хитрость: рисунок с травой и облаками склеен из одного и того же повторяющегося изображения. Это очень удобно, т.к. при растягивании ячейки Top он сможет повторяться столько раз, сколько потребует ширина вашего экрана. Итак, мы вырезали часть изображения и назвали его top_bg.jpg. (рис.6).
Рис. 6 Тонкости создание макета заголовка web-сайта
Важно: если бы рисунок был не повторяющимся, нужно было бы заготовить фон для ячейки Top размером не менее 1280 пкс в ширину - такое разрешение экрана у пользователей с мониторами LCD 17-19 дюймов (можно сделать и 1600 пкс, но такое разрешение у очень малого количества пользователей, а всем остальным придется загружать большую картинку).
Отдельно мы вырежем домик и назовем его house.jpg. (рис.7).
Рис. 7 Создание фона для заголовка web-сайта
Осталось лого. Просто вырезать логотип вместе с кусочком облака нельзя, т.к. логотип всегда должен находиться около правого края страницы, не зависимо от ее длины. Т.е. неизвестно, на какой участок фона попадет лого. Поэтому нужно, чтобы фон просвечивался под буквами. Для этого:
временно отключим слой с облаками в графическом редакторе;
подложим под лого прямоугольник голубого цвета (такого же, как переход «небо-облака»);
вырежем лого и сохраним его в формате .gif. Голубой цвет назначим прозрачным (рис. 8).
Рис. 8 Создание логотипа для заголовка web-сайта
Создадим в Top вложенную таблицу, левая ячейка которой будет содержать house.jpg. По ширине и высоте она будет равна размерам рисунка. Правая ячейка будет растягиваться на всю оставшуюся часть экрана, причем ее содержимое - logo.gif - будет выравниваться по правому краю, отступая от верхнего и правого края экрана по 55 пкс. (рис. 9).
Рис. 9 Создание заголовка web-сайта. Логотип с фоном
Вот код ячейки 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;}
Верхний заголовок web-сайта готов. Посмотрите 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"></td>
<td class="topmenu"></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"></td>
<td class="topmenu"></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 {
}
td.topmenu {
}
td.news {
width: 30%;
}
td.text {
width: 70%;
height: 100%;
}
td.copyright {
}
td.bottommenu {
}