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

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

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

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

Осталось совсем не много – это горизонтальное меню.
Вырезаем необходимые кусочки:







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

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

В теге:


1

Добавляем:

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

Ну вот и все.



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

Добавлено: 01 Марта 2015 10:47:00 Добавил: Андрей Ковальчук Нравится 0

Добавить