Как самому сделать шапку сайта

Для начала распишем техническое задание. Нам необходимо создать шапку сайта, которая будет иметь блок ссылок, содержать несколько графических элементов заданной тематики и соответственно иметь некую текстовую часть, которая будет использоваться под слоган или еще что либо, так же я реализую данное творение в резиновом варианте так, чтобы размеры данной шапки изменялись вместе с размерами окна браузера.

Итак, вот что мы получим в конце урока:

Я выбрал тему рыбалки, потому что она мне очень близка и соответственно приятно что либо делать. Графику естественно я заготовил заранее в фотошопе, все сверсвтал и нарезал, как я это делал я вам не буду объяснять, так как это отдельная тема, а в этом уроке я покажу вам как это все реализуется непосредственно в коде, поэтому перейдем ближе к делу.

Вот общая картина того как выглядит эта шапка в html:

<body style="margin:0px; padding: 0px;">
<div id="header">
<div style="float: left;"><img src="men.jpg" /></div>
<div class="text"><h1>Рыбалка</h1>
Рыбачьте с нами и поймаете...
</div>
<div style="float: right;"><img src="right.jpg" /></div>
</div>
<div id="links">
<div>Новости</div><div>Крючки</div><div>Удочки</div><div>Леска</div><div>О проекте</div>
</div>
</body>

А вот CSS:

Как вы могли заметить код достаточно короткий и при этом очень эффективный, я буду разбирать все по порядку и соответственно комментировать каждый шаг:

Тег тела документа, здесь мы сразу обнуляем все возможные отступы от краев окна браузера и внутри самого тега body, соответствующими параметрами margin:0px; padding: 0px; это нам необходимо для того чтобы не было белых пробелов по краям окна браузера, да и в принципе это применяется всегда при любой нормальной верстке сайта.

Это у нас начало шапки мы создаем контейнер с заданными параметрами:

а именно первым делом задаем ширину шапки в процентах width: 100%; что дает нам возможность создать так называемую резиновую верстку, затем высоту height: 157px; и соответственно фоновый рисунок background: url(bg.jpg); который лежит у нас в той же папке что и файл шапки. Следующим делом нам необходимо создать три контейнера внутри данного, для того чтобы разместить там рисунки и текст:

<div style="float: left;"><img src="men.jpg" /></div>
<div class="text"><h1>Рыбалка</h1>
Рыбачьте с нами и поймаете...
</div>
<div style="float: right;"><img src="right.jpg" /></div>

Первому контейнеру мы задаем выравнивание к левой части чтобы он соответственно был слева, для этого мы используем параметр позиционирования float: left; и просто вставляем туда наше изображение, размер контейнера будет определяться размером изображения. Следующий контейнер мы так же выравниваем с помощью параметра float чтобы он у нас был на одной линии и не перешел на следующею строчку. Здесь мы используем класс class="text":

.text {
color: #FFFFFF;
padding: 10px;
font-size: 24px;
float: left;
}

В первую очередь задали цвет шрифта color: #FFFFFF; отступы от текста внутри контейнера padding: 10px; размер шрифта font-size: 24px; и выравнивание в лево. Так же в данном контейнере присутствует тег <h2> которому, так же отдельно прописали параметры:

h1 {
margin: 0px;
padding: 0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 50px;
font-weight: bold;
color: #FFFFFF;
}

Первым делом мы убрали все возможные отступы margin: 0px; padding: 0px; далее задали шрифт font-family:Verdana, Arial, Helvetica, sans-serif; размер шрифта font-size: 50px; вес шрифта font-weight: bold; и цвет color: #FFFFFF; вот и все. Остался последний третий бокс который мы выравниваем в право, так же параметром float для того чтобы как и в прошлый раз он был на одной строчке и вставляем второй рисунок. Если у вас возникли затруднения с понятием свойств параметра float советую прочитать урок «CSS позиционирование основные моменты» и вам все станет ясно. На этом наша верхушка закончена, остался блок ссылок:

<div id="links">
<div>Новости</div><div>Крючки</div><div>Удочки</div><div>Леска</div><div>О проекте</div>
</div>

Итак, делаем полосу с фоном:

#links div {
padding: 5px;
text-align:center;
width: 150px;
float: left;
border-right: 1px solid #000;
}

Для красоты отображения делаем отступы в 5 пикселей по всем сторонам padding: 5px; затем выравниваем содержимое контейнеров по центру text-align:center; задаем ширину width: 150px; выравниваем сами контейнеры к левому краю, и осталось только разделить наши ссылки с помощью элементарной обводки краев контейнера справа, а именно border-right: 1px solid #000; мы задали обводку границы справа, полосой шириной в 1 пиксель, стиль solid и цвет черный.

Вот и все, вот так получилась шапка сайта с резиновой версткой, очень удобно и практично и как я надеюсь вы заметили при верстке было использовано очень мало html кода поскольку основная нагрузка ложится на CSS, что позволяет создавать более оптимизированные сайты к которым поисковые системы будут более предрасположены.

Конечно, это не единственный вариант реализации шапки сайта и в будущем я обязательно постараюсь написать еще несколько уроков на данную тему.

Дата публикации:2011-10-11

Буду очень признателен, если вы поделитесь ссылкой на страницу со своими друзьями в социальных сетях.
Если у вас возникнут вопросы по теме пишите, надеюсь у вас все получиться, удачи вам и всего наилучшего!

Автор: Алексей Мезенцев