Самостоятельное создание сайта
ВСЕ О ТОМ, КАК
СДЕЛАТЬ САЙТ
САМОМУ


Оставить отзыв или предложение

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

Исходник

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

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

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

Вот общая картина того как выглядит эта шапка в 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:

<style type="text/css">
#header {
width: 100%;
height: 157px;
background: url(bg.jpg);
}
#links {
width: 100%;
height: 33px;
background:url(linkbg.jpg);
font-size: 14px;
font-weight: bold;
color:#FFFFFF;
}
#links div {
padding: 5px;
text-align:center;
width: 150px;
float: left;
border-right: 1px solid #000;
}
.text {
color: #FFFFFF;
padding: 10px;
font-size: 24px;
float: left;
}
h1 {
margin: 0px;
padding: 0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 50px;
font-weight: bold;
color: #FFFFFF;
}
</style>

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

<body style="margin:0px; padding: 0px;">

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

Далее:

<div id="header">

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

<style type="text/css">
#header {
width: 100%;
height: 157px;
background: url(bg.jpg);
}

а именно первым делом задаем ширину шапки в процентах 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


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

Нашли ошибку в тексте

Нашли ошибку в тексте!!!
Просто выделите её мышкой, нажмите Ctrl+Enter.
И мы все исправим.

Allsoft
Хостинг Beget