шапка сайта, создание Как создать свой сайт > Создать сайт на HTML > Урок 2. Ячейка «TOP»

Урок 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», чтобы она занимала всю площадь ячейки.

 

    <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>

 

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

 

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

 

 

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


⇓ 

Поделись ссылкой на Seoded.ru с друзьями, знакомыми и собеседниками в соцсетях и на форумах! А сам сайт добавь в закладки! Так победим.

Поделиться ссылкой на эту страницу в:

 

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

Запятые перед как Собрать кубик Рубика 5х5

 


основан в 2008 г. © Все права на материалы сайта Seoded.ru принадлежат Алексею Вострову.
Копирование (полное или частичное) любых материалов сайта возможно только с разрешения автора и при указании ссылки на источник.
Ослушавшихся находит и забирает Бабайка!