В прошлом уроке мы сверстали макет нашей страницы, сделали фон и добавили тени отбрасываемые контент областью. Сегодня мы займемся шапкой нашего шаблона.
Первое чем мы займемся – это разметим шапку под основные элементы:
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; }
Ну вот и все.
а вот вопросик можно? У вас время после поста указано. Это московское? Заранее спасибо!
Reply
Очень интересный пост. Добавил в бобрдобр.
Reply
Да время поста московское.
Reply
Спасибо, скоро надеюсь будет продолжение.
Reply
Хотелось бы что-то наваять в комментах креативного, но мысль не складывается, так что просто “зачОт”
Reply
Да, жаль, что обновления на блоге происходят не так часто, как хотелось бы.
Reply
Да самому хотелось бы чаще обновлять блог, тем более писать есть о чем, но… время, главная проблема, тем более лето, хочется после работы больше времени проводит с друзьями, да и с девушкой.
Буду стараться успевать все. Спасибо еще раз за интерес к блогу, это отличный стимул для более частого обновления.
Reply
Отличная статья, мне очень понравилась!
Reply
Знакомый посоветовал зайти на этот блог и явно не зря.
Reply
Автору спасибо, продолжайте нас радовать!
Reply
Спасибо будем стараться!
Reply
Здесь такая же проблема с отображением кода, как и в предыдущем посте.
Reply
Аааааа четко, четко. Столько узнаю на этом блоге класс.
Сейчас попробуем поверстать 🙂
Reply