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

Урок 1 | Урок 2 | Урок 3 | Урок 4 | Урок 5 | Урок 6 | Урок 7 | На главную страницу