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

Автор: Инна Пастухова.

Содержание Следующий урок

Ещё материалы по этой теме:

kabantejay
10 сен 2020 в 22:09
было бы крайне полезно иметь такое же руководство но для создания шапки у интернет магазинов, там есть свои нюансы: корзина, избранное, сравнение товаров, услвоия доставки, телефоны для связи и т.п. может забабахаете?

Инна Пастухова
10 сен 2020 в 23:12
Может и забабахаем :)

it
02 дек 2020 в 16:19
Спасибо. Отличная информация. Хочу чтобы картинки в шапке были разные на остальных страницах сайта. Сейчас в шапке картинка на всех страницах одна и та же.

Инна Пастухова
03 дек 2020 в 08:45
Так картинки в шапке сайта (логотип, фон и т. д.) и должны быть одинаковыми у всех страниц! В этом и СМЫСЛ ШАПКИ САЙТА: пользователь должен чётко понимать, на каком сайте он находится, и узнаватьт ваш сайт из мириада других.

Ещё материалы по этой теме:

Комментарии:

Полезные ссылки: