Верстаем дизайн для блога. Часть 2

В прошлом уроке мы сверстали макет нашей страницы, сделали фон и добавили тени отбрасываемые контент областью. Сегодня мы займемся шапкой нашего шаблона.

Первое чем мы займемся – это разметим шапку под основные элементы:

1) Логотип сайта

2) Поиск

3) Горизонтальное меню.

Для этого в файл index.html в теге:

Добавим следующий код:

 <!--      Лого        -->

<div id="logo">
            Логотип</div>


    <!--      Поиск        -->

<div id="search">
            Поиск</div>


    <!--      Горизонтальное меню       -->

<div id="top_menu";
            Меню</div>

И в файле style.css добавим необходимые стили:

#logo
    {
        float: left;
        width: 63%;
    }
#search
    {
        float: left;
        width: 37%;
        height: 111px;
    }
    /* Только для IE */
    * html #search
    {
        width: 35%;
    }    #top_menu
    {
        clear: left;
    }

Теперь перейдем к логотипу. Вырезаем лого без текста.

В файле index.html добавил ссылку и описание блога:

 <a class="logo_link" href="/"> </a>
            <label class="logo">Блог 2-х веб разработчиков. Web - Дизайн, Web - Программирование, Seo</label>

И конечно добавим стили:

 #logo
    {
        float: left;
        width: 67%;
        height: 111px;

        background: url('images/logo.gif') no-repeat top left;
    }
        a.logo_link
        {
            display: block;
            width: 627px;
            height: 90px;
            text-decoration: none;
        }
        label.logo
        {
            padding-left:20px;
            font-weight:bold;
            font-size: 12px;
            font-family: Verdana;
        }

На данный момент шапка выглядит следующим образом:

С поиском пришлось повозиться, вот мой вариант его реализации. Для начала добавляем простое input поле, убираем границы и на фон ставим нашу картинку:

После слева и справа добавляем картинки с краями формы поиска:

В коде это выглядит следующим образом. В файл index.html добавляем следующие:

    <img class="search" src="images/input_l.gif" alt="" />
<input class="search" name="search" type="text" />
                <img class="search_btn" src="images/spacer.gif" alt="" />

Стили:

 input.search
        {
            float: left;
            background: url('images/input.gif') repeat-x;
            border: 0;
            padding-top: 3px;
            height: 19px;
            width: 85%;
        }
/* Только для IE */
         * html input.search
        {
            width: 80%;
        }
        img.search
        {
            float: left;
            height: 22px;
            width: 6px;
            border: 0px;
        }
        img.search_btn
        {
            float: left;
            height: 22px;
            width: 31px;
            border: 0px;

            background: url('images/search_btn.gif');
        }
        img.search_btn:hover
        {
            background: url('images/search_btn_hover.gif');
            cursor: pointer;
        }

Осталось сделать обрамления для формы, но тут проще, для этого код поля поиска заключаем в теги:

<div id="search_form_l">

<div id="search_form_r">

<div id="search_form">
                <img class="search" src="images/input_l.gif" alt="" />
<input class="search" name="search" type="text" />
                <img class="search_btn" src="images/spacer.gif" alt="" /></div>
</div>
</div>

И добавляем стили:

 #search_form_l
        {
            background: url('images/search_form_l.gif') left no-repeat;
            height: 29px;
            padding-left: 62px;
            margin-top: 10px;
        }
        #search_form
        {
            background: url('images/search_form.gif') repeat-x;
            height: 29px;
        }
        #search_form_r
        {
            background: url('images/search_form_r.gif') right no-repeat;
            height: 29px;
            padding-right: 37px;
        }

На этом форма поиска готова. Добавим кнопку rss ленты. В index.html ниже формы поиска добавим:

<div id="rss">

<div id="rss_text">
                    <a class="rss" href="#">Подписаться на

RSS ленту</a></div>


<div id="rss_icon">
                    <a class="rss" href="#"><img class="rss" src="images/spacer.gif" alt="" /></a></div>
</div>

И стили:

 #rss
        {
            width: 50%;
            float: right;
        }
            #rss_text
            {
                float: left;
                font-size: 10px;
                font-family: Verdana;
                color: #ada8a2;
                text-align: right;

                padding-top: 28px;
            }
            a.rss
            {
                font-size: 10px;
                font-family: Verdana;
                color: #ada8a2;
                text-decoration: none;
            }
            a.rss:hover
            {
                text-decoration:underline;
            }
            #rss_icon
            {
                float: left;
            }
            img.rss
            {
                background: url('images/rss.gif');
                width: 59px;
                height: 62px;
            }
            img.rss:hover
            {
                background: url('images/rss_hover.gif');
                width: 59px;
                height: 62px;
            }

Вот что имеем на данный момент:

Осталось совсем не много – это горизонтальное меню.

Вырезаем необходимые кусочки:

И правим стили:

 #top_menu
    {
        clear: left;
        width: 100%;
        height: 25px;
        background: #4277ad url('images/top_menu.gif') repeat-x;
    }

В теге:

Добавляем:

<div style="float:left;">
            <a class="top_menu" href="#">Главная</a>
            <a class="top_menu_c" href="#">О нас</a></div>


<div id="flower_top"></div>

И конечно же стили, куда без них:

 #flower_top
        {
            float: right;
            background: url('images/top_menu_flower.gif') no-repeat;
            margin-right: 30px;
            width:178px;
            height:25px;
        }
        a.top_menu
        {
            float: left;
            display: block;
            height: 25px;
            width: 100px;
            text-align: center;
            text-decoration: none;
            font-size: 12px;
            font-family: Verdana;
            color: #fff;
            text-align: center;
        }
        a.top_menu:hover
        {
            text-decoration:underline;
        }
        a.top_menu_c
        {
            float: left;
            display: block;
            height: 25px;
            width: 100px;
            text-align: center;
            text-decoration: none;
            font-size: 12px;
            font-family: Verdana;
            color: #fff;
            text-align: center;
            background: url('images/top_menu_button.gif') repeat-x;
        }
        a.top_menu_c:hover
        {
            text-decoration:underline;
        }

Ну вот и все.

Файлы проекта.

• Верстаем дизайн для блога. Часть 1
• Создание вертикального меню для сайта
• Прокачиваем таблицы с помощью CSS3
• Создание красивых кнопок с помощью css
• 10 генераторов текста

Теги: css, Html, Блог, Верстка, Дизайн