В прошлой статье мы сделали каркас нашего 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; }

И вот такой код самого шаблона:

Первым делом внесем немного изменений в стиль обволакивающего блока 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 вот такую строчку:
По сути это ссылка на главную страницу без текста, однако ей присвоен класс class="logo". Теперь нужно его оформить в стилях css.

Logo { display:block; height: 104px; width: 390px; background: url("image/logo.png") no-repeat; }

Я сделал элемент блочным, задал ему ширину и высоту, а также сделал фоном картинку-логотип, которую положил в директорию image. В этой директории будут располагаться все картинки шаблона. Размер картинки 388*100 пикселей, почему же тогда размер блока немного отличается? Высоту я сделал 104 пикселя, чтобы был отступ от картинки-логотипа внизу между будущим меню и логотипом, а ширину взял на два пикселя больше на всякий случай, так как сталкивался пару раз с тем, что Mozilla неправильно определяла размер картинки и немного её обрезала. Все, с логотипом закончили. Меню в

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

Шапка сайта – какой она бывает

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

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

Так, это было немного размышлений, теперь давайте перейдем непосредственно к технической части.

Как в CSS можно оформить шапку сайта?

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

Раньше шапку делали также, как и любой другой блок – обычному тегу div давали нужный идентификатор, после чего в него попадало все нужное содержимое, а потом все это оформлялось. Сегодня же уже принято верстать по-другому. Специально для создания шапки сайта в HTML5 появился парный тег – header. Его использование приветствуется, это позволяет браузерам понимать, что это за часть шаблона и за что она отвечает. Кстати, если вы хотите изучить основы HTML5, то вам прямая дорога в наш , где вы можете посмотреть уроки по этой технологии.

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

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

header{ width: 100%; background: #D8E3AB; height: 70px; }

Вообще, если все делать по-правильному, то следовало бы задать блоку какой-то класс или даже идентификатор (поскольку это важный элемент веб-страницы), но мы пока просто обратимся к элементу по тегу.

Свойство width: 100% делает так, что наш блок будет растягиваться на всю ширину вне зависимости от размеров экрана. Если же все-таки размеры нужно хоть как-то ограничить, используют дополнительно свойство max-width, где в пикселях записывают абсолютный размер, по достижению которого контейнер больше не будет расширяться.

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

2016-12-07

2016-12-07

Оформляем элементы шапки сайта стилями CSS

Здравствуйте уважаемый посетитель!

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

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

• Размещение элементов по вертикали
• Формирование отступов элементов по горизонтали
• Назначение свойств шрифта элементов
• Создание теней для текстовых элементов
• Исходные файлы сайта

Формирование элементов шапки

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