Шапка для сайта

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

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

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

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

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

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

HTML — Урок 8: Верстаем шапку и простое меню для нашего HTML шаблона (Часть 1)


В прошлой статье мы сделали каркас нашего HTML шаблона, который готов к его заполнению и оформлению. Сегодня я расскажу как красиво сделать шапку сайта (верхнюю часть) и простенькое меню. Также сегодня внесем немного изменений в стили других блоков.
Итак, что мы имеем на данный момент? Сейчас у нас вот такие стили:
html, body { height:100%; color: #000; background: #FFFFFF; word-wrap: break-word; font-size: 12px; font-family: Verdana, Arial, Sans-Serif; } #wrapper { height:auto !important; height:100%; min-height:100%; } #header { height:100px; } #container { min-width:800px; } #center { margin:0px 200px 0px 200px; } #left { float:left; width:200px; } #right { float:right; width:200px; } #footer { height:100px; margin-top:-100px; } .clear { clear:both; } #space { height:100px; }

И вот такой код самого шаблона:
<!DOCTYPE html> <html> <head> <meta http-equiv=»content-type» content=»text/html; charset=utf-8″ /> <meta name=»keywords» content=»ключевые, слова» /> <meta name=»description» content=»описание сайта» /> <title>название сайта</title> <link rel=»stylesheet» href=»style.css» type=»text/css» > </head> <body> <div id=»wrapper»> <div id=»header»></div> <div id=»container»> <div id=»left»></div> <div id=»right»></div> <div id=»center»></div> <div></div> <div id=»space»></div> </div> </div> <div id=»footer»></div> </body> </html>
Первым делом внесем немного изменений в стиль обволакивающего блока wrapper:
#wrapper { height:auto !important; height:100%; min-height:100%; width: 1024px; margin: 0 auto; text-align: left; }
Я поставил фиксированную ширину — width блока, размером 1024 пикселя, выровнял сам блок по центру, а текст в нем по левому краю с помощью text-align:left. Выровнять блок по центру мы можем с помощью стиля margin, задав величину отступа сверху и снизу 0, а по ширине auto. К сожалению, это не всегда работает в Internet Explorer 6, поэтому в body я прописал text-align: center; и именно поэтому мне пришлось выравнивать текст в обволакивающем блоке и подвале по левому краю. Также в body я указал margin:0, тем самым задав отступы от краев 0 пикселей. В итоге у Body получились вот такие стили:
html, body { height:100%; color: #000; background: #FFFFFF; word-wrap: break-word; font-size: 12px; font-family: Verdana, Arial, Sans-Serif; margin: 0; text-align: center; }
Также я внес изменения и в подвал:
#footer { width: 1024px; margin: 0 auto; text-align: left; height:100px; margin-top:-100px; background: #4a90d9; }
Тут все аналогично блоку wrapper: установил ширину 1024px, выровнял блок по центру, а текст по левому краю. Также добавил в container отступ от шапки margin-top: 20px; и убрал минимальную ширину, так как у нас фиксированная ширина обволакивающего.
Ну что ж, шаблон мы подготовили, пора перейти и к шапке сайта. Стили будут такими:
#header { height:140px; background: #fff; padding-top: 40px; }
Высота блока 140px, фон белый, а величина отступа от верхнего края 40 пикселей. Вот и все изменения в стилях шапки.
Что? Это всё? И в честь этого названа целая статья?
Конечно, нет. Шапка сайта будет состоять из других элементов: логотипа и меню, которые будут оформлены отдельно.
Пропишем в код HTML шаблона внутри блока header вот такую строчку:
<a class=»logo» href=»/» title=»Логотип сайта»></a>
По сути это ссылка на главную страницу без текста, однако ей присвоен класс class=»logo». Теперь нужно его оформить в стилях css.
.logo { display:block; height: 104px; width: 390px; background: url(«image/logo.png») no-repeat; }
Я сделал элемент блочным, задал ему ширину и высоту, а также сделал фоном картинку-логотип, которую положил в директорию image. В этой директории будут располагаться все картинки шаблона. Размер картинки 388*100 пикселей, почему же тогда размер блока немного отличается? Высоту я сделал 104 пикселя, чтобы был отступ от картинки-логотипа внизу между будущим меню и логотипом, а ширину взял на два пикселя больше на всякий случай, так как сталкивался пару раз с тем, что Mozilla неправильно определяла размер картинки и немного её обрезала. Все, с логотипом закончили. Меню в следующей части урока.

Кстати, если Вас интересуют юбилейные монеты 10 рублей, то посетите сайт 10rublej.ru.

Web Design
7 простых советов по созданию шапки продающего сайта

Приветствую, уважаемые читатели.

Разработка любого продающего сайта и не только продающего, начинается с проектирования шапки. Очень часто у дизайнеров возникает вопрос – с чего начать рисовать шапку сайта, как сделать ее эффективной и привлекательной.

Сегодня мы рассмотрим 7 простых и проверенных на практике правил, которые позволяют создать хорошую, «цепляющую» шапку для лендинга или продающего сайта на примере.

Пример шапки:

Что нужно учитывать, создавая дизайн шапки сайта.

1. Логотип

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

Логотип в шапке – это важнейший элемент брендирования, который пользователь должен заметить в первую очередь. Взгляд пользователя, попавшего на новый, не знакомый сайт начинает свое путешествие по сайту именно с левого верхнего угла. И если он там не обнаружит логотипа, автоматически страничка будет восприниматься у пользователя нестандартной и хитрой, пользователь начнет напрягать свое внимание и мозг. А этого нужно по максимуму избегать, так как вероятность того, что посетитель уйдет с такого сайта, ничего не купив на долю процентов увеличивается.

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

2. Контактный телефон.

Традиции в веб-дизайне, как и в любой другой области, складываются годами и имеют под собой весьма объективные основания. Расположение основного контактного телефона также вытекает из сложившихся традиций. Находится телефон справа сверху.

Если пользователь немедленно хочет приобрести товар или заказать услугу, то он непременно позвонит. И поиск телефона не должен занимать много времени и усилий у покупателя. Расположение телефона справа сверху – лучшее решение при создании шапки. Кроме того, под телефоном или над ним, обязательно нужно разместить ссылку заказа обратного звонка.

Смысл обратного звонка в том, чтобы помочь потенциальному покупателю принять решение, внушить доверие и дело тут даже не в сэкономленных на звонке деньгах. Человек, который заказывает обратный звонок – проверяет, как работает компания, как оперативно сотрудники отвечают, как общаются. Это очень важный момент.

3. Навигационное меню.

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

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

4. Точный и лаконичный заголовок.

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

Такие несложные размышления позволят вам придумать красивый и понятный заголовок.

5. Тематическая иллюстрация.

Вы наверняка заметили в шапке из примера – большую тематическую картинку. Такая картинка может идти фоном, как в примере, либо просто располагаться рядом с текстом в шапке. Кроме того, такую картинку можно заменить или дополнить каким-либо тематическим видеоматериалом.

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

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

В примере с обучающей компанией – это непосредственно класс с учениками за партами. Если это доставка пиццы – должна быть картинка курьера с красивой и вкусной пиццей. Ну, вы поняли. Человек должен видеть товар или процесс лицом. И он должен захотеть это.

6. «Текст доверия».

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

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

7. Простая форма обратной связи.

Очень часто пользователь на подсознательном уровне после просмотра первого экрана сайта или его шапки уже принимает решение о покупке, а страничку листает ниже просто так. По инерции. Важно в шапке разместить простую форму заказа. В данной форме должно быть 2-3 поля.

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

Максимум 3 поля – Имя, телефон и E-mail. Или еще какое-нибудь, которое требует специфика компании, для которой разрабатывается дизайн.

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

Несколько хороших шапок напоследок:

Шапка сайта «Русское Поместье»

Шапка сайта логистической компании

Шапка сайта компании «Такси Хорошее»

Шапка сайта компании «REKLAMARKET»

Шапка сайта компании «ВОЛНАКОЛОР»

Шапка сайта компании «Спело Зрело»

Премиум уроки от WebDesign Master:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *