Теперь будем заполнять ячейки изображениями. Начнём с «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-код, который мы добавили на этом уроке.
Автор: Инна Пастухова.