Создать однотонную шапку пошаговая инструкция css. Шапка страницы. Шапка страницы Что обычно содержится в шапке

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

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

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

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

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

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

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

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

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

< header > < / header >

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

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

header {

width : 100 % ;

background : #D8E3AB;

height : 70px ;

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

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

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

< div id = "wrap" >

< header > < / header >

< / div >

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

Рис. 1. Пока это только контейнер, в котором будет все содержимое.

Что обычно содержится в шапке?

Обычно там вставлен логотип, название, описание сайта. Также там может находиться какая-то контактная информация, навигация по страницам или даже реклама.

Логотип обычно вставляют как фоновое изображение. Давайте, например, поставим такой:

Для этого достаточно дописать некоторые правила к фону:

background: #D8E3AB url(logo.png) no-repeat 5% 50%;

background : #D8E3AB url(logo.png) no-repeat 5% 50%;

То есть помимо сплошного цвета даем еще и фоновую картинку (в нашем случае logo.png) и предварительно я ее положил в ту же папку, что и файл стилей. Запрещаем повторение логотипа и определяем его позицию в блоке – немного сместим влево и по центру по вертикали.

Добавим в шапку какое-то содержимое. Например, заголовок и меню.

Название сайта

< div class = "title" > Названиесайта< / div >

< ul class = "menu" >

< li > < a href = "#" > Контакты< / a > < / li >

< li > < a href = "#" > Онас< / a > < / li >

< li > < a href = "#" > Услуги< / a > < / li >

< / ul >

Теперь все это оформим.

Title{ font-size: 36px; padding-top: 10px; text-align: center; } .menu{ list-style: none; position: absolute; top: 10px; right: 100px; }

Title {

font - size : 36px ;

padding - top : 10px ;

text - align : center ;

Зачастую вроде бы простые задачи верстки требуют сложной структуры HTML-разметки и использования CSS-трюков. Центрирование элементов или выравнивание контента может быть очень утомительным. Одна из таких задач - это выравнивание элементов верхней части сайта так, чтобы логотип был слева, а пункты меню - справа. Можно использовать float и position:absolute, а для выравнивания по вертикали - добавлять margin и padding разным элементам. Вроде бы ничего сложного. Но если сайт должен корректно отображаться и на мобильных устройствах, возникает много проблем.

Ниже описан лаконичный способ решения этой проблемы.

HTML-разметка максимально проста:

Super Bad First Link Second Link Third Link

Высота шапки фиксированная, добавляем text-align: justify , для дочерних элементов:

Header { text-align: justify; letter-spacing: 1px; height: 8em; padding: 2em 10%; background: #2c3e50; color: #fff; }

Добавляем display: inline-block для всех элементов nav , чтобы можно было расположить их друг за другом:

Header h1, header nav { display: inline-block; }

Чтобы атрибут text-align: justify работал, как мы хотим, нужно использовать небольшой трюк с псведоэлементами, который был найден в статье Perfectly justified CSS grid technique using inline-block , автор Jelmer de Maat:

Header::after { content: ""; display: inline-block; width: 100%; }

В итоге получилось выравнивание по горизонтали, без использования float и position:absolute . Теперь необходимо выравнивание элементов по вертикали. При использовании vertical-align для элементов nav будет зависимость от высоты родительского блока - шапки. А это не очень правильно. Примеры использования vertical-align: top и vertical-align: middle на jsbin. Ниже представлен возможно наиболее удобный способ вертикального выравнивания.

Используем снова псевдоэлементы. используя пример из статьи Centering in the Unknown , упомянутый Michał Czernow:

Header h1 { height: 100%; } header h1::before { content: ""; display: inline-block; vertical-align: middle; height: 100%; }
В результате получается то, что нужно:

Осталось решить две задачи: корректное отображение при большом количестве текста в шапке и адаптивность. Если заголовок сайта будет слишком длинный, верстка начнет съезжать:

Используем трюк с псевдоэлементом на header :

CSS-код

header { text-align: justify; height: 15em; padding: 2em 5%; background: #2c3e50; color: #fff; } header::after { content: ""; display: inline-block; width: 100%; } header > div, header nav, header div h1 { display: inline-block; vertical-align: middle; } header > div { width: 50%; height: 100%; text-align: left; } header > div::before { content: ""; display: inline-block; vertical-align: middle; height: 100%; }

Выглядит намного лучше:

Теперь перейдем к адаптивности. Есть несколько способов решения этой задачи, можно просто не задавать высоту шапке, и все внутренние элементы будут адаптивны высоте. При этом не потребуется второй трюк с псевдоэлементами, живой пример на jsbin.

CSS-код

header { text-align: justify; padding: 2em 5%; background: #2c3e50; color: #fff; } header::after { content: ""; display: inline-block; width: 100%; } header h1, header nav { display: inline-block; vertical-align: middle; } header h1 { width: 50%; text-align: left; padding-top: 0.5em; } header nav { padding-top: 1em; }

Если же необходимо задать высоту шапки, то придется использовать и второй трюк с псевдоэлементами, и добавлять media query для экранов разных размеров:

@media screen and (max-width: 820px){ header { height: auto; } header > div, header >

Результат адаптивен и на мобильных устройствах выглядит так:

В примере используется 820px для наглядности, на живом сайте значение конечно должно быть другое, в соответствии с требованиями. Для поддержки Internet Explorer 8 необходимо вместо “::” использовать “:” для псевдоэлементов.

Финальный CSS-код

@import url(http://fonts.googleapis.com/css?family=Lato:400,700italic); * { padding: 0; margin: 0; } body { background: #1abc9c; font-family: "Lato", sans-serif; text-transform: uppercase; letter-spacing: 1px;} header { text-align: justify; height: 8em; padding: 2em 5%; background: #2c3e50; color: #fff; } header::after { content: ""; display: inline-block; width: 100%; } header > div, header > div::before, header nav, header > div h1 { display: inline-block; vertical-align: middle; text-align: left; } header > div { height: 100%; } header > div::before { content: ""; height: 100%; } header > div h1 { font-size: 3em; font-style: italic; } header nav a { padding: 0 0.6em; white-space: nowrap; } header nav a:last-child { padding-right: 0; } @media screen and (max-width: 720px){ header { height: auto; } header > div, header > div h1, header nav { height: auto; width: auto; display: block; text-align: center; } }

Результат:

Вёрстка страницы представляет собой процесс разработки структуры html-документа, результатом которого является веб-страница. Структура веб-страницы определяется соответствующими html-тегами. Теги - прямоугольные блоки-контейнеры для содержимого - не отображаются в окне браузера. Они сообщают браузеру о типе контента, а браузер на основании этой информации выводит на экран их содержимое - текст или медиа-файлы.

Как создать структуру страницы с помощью блоков (блочная вёрстка) 1. Как разбить макет страницы на секции

Чтобы создать макет страницы, необходимо выделить основные разделы (секции) документа. Подробнее о секционных элементах вы можете прочитать в статье.

Стандартная веб-страница содержит следующие секции:

Рис. 1. Основные секции страницы

Мы не будем использовать элемент, так как он поддерживается не всеми браузерами.

Элементы,

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

Рис. 2. Основные секции страницы с тегом-контейнером

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

Container { width: 100%; max-width: 1024px; /*максимальная ширина может иметь другое значение*/ padding: 0 15px; margin: 0 auto; }

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

2. Разметка шапки сайта и позиционирование её элементов

Приступим к разметке первой секции, так называемой шапки веб-страницы. Элемент предназначен для группировки вводной информации и навигационных средств по странице/сайту. Добавим внутрь тега логотип сайта и навигационные ссылки:

Рис. 3. Шапка сайта с добавленными логотипом и ссылками

Logo { float: left; } nav { float: right; } nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; /*один из способов разместить элементы в строку*/ }

Существует несколько способов разместить блочные элементы в строку. Все они приведены в уроке.

Рис. 4. Эффект схлопывания блока-контейнера

Обратите внимание, что после того, как мы применили обтекание, шапка исчезла. Это произошло потому, что плавающие элементы (для которых задано свойство float) изымаются из нормального потока и родительский контейнер больше не видит их высоту, поэтому и элемент и элемент внутри него с классом.container схлопнулись. Чтобы исправить эту ситуацию, воспользуемся очисткой потока для элемента с классом.container:

Container:after { content: ""; display: table; clear: both; }

Также добавим ему вертикальные отступы, отделяющие элементы внутри него от краёв шапки. В результате стили будут иметь следующие вид:

Container { width: 100%; max-width: 1024px; padding: 15px; margin: 0 auto; }

Рис. 5. Очистка потока

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

Рис. 6. Логотип-картинка

В нашем примере высота логотипа равна 38px , поэтому чтобы выровнять ссылки меню по высоте по середине шапки, нужно задать для них соответствующую высоту строки:

Nav a { text-decoration: none; line-height: 38px; } Рис. 7. Выравнивание ссылок меню шапки

3. Создание сетки для основной части страницы

Основная часть страницы чаще всего представляет собой сетку из блоков разной ширины. Позиционирование таких блоков осуществляется также с помощью свойства float . Каждую строку блоков обернём дополнительным блоком с классом.row:

Рис. 7. Сетка основной части страницы.col-1-2 { width: 50%; float: left; } .col-1-3 { width: 33.3333333333%; float: left; } .col-1-4 { width: 25%; float: left; } .col-2-3 { width: 66.6666666667%; float: left; }

Для элемента с классом.row также применим очистку потока:

Container:after, .row:after { content: ""; display: table; clear: both; }

Чтобы отделить ряды друг от друга, можно добавить нижний внешний отступ:

Row { margin-bottom: 15px; }

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

Рис. 8. Разная высота элементов сетки

Высоту блоков можно зафиксировать, указав её явно, например, .row div {height: 100px} . Но в этом случае нужно быть уверенным, что при добавлении адаптивности макету содержимое блоков не будет выходить за край блока.

Если необходимо задать фоновый цвет для блоков ряда, то это можно сделать следующим образом: для элемента с классом.row добавим новый класс, который позволит стилизовать только этот ряд (получится.row row-one), укажем для него фоновый цвет меньшего по высоте блока, а для высокого блока зададим его собственный цвет, то есть таким образом мы сделаем фоновую подложку.

Lorem ipsum dolor sit amet.

Duis lobortis tempor tortor vel iaculis. Fusce volutpat commodo lacus, eget vestibulum lorem semper at.

Row-one { background: lightblue; } .col-2-3 { width: 66.6666666667%; float: left; background: seashell; }

Рис. 9. Фоновая подложка

Если основная секция страницы содержит только два блока, то дополнительный ряд-обёртку можно не добавлять:

4. Разметка подвала страницы

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

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

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

Но для начала хочется сказать огромное спасибо http://www.webdesignerdepot.com ну а теперь давайте точно начнём.

Ι HTML

HTML код очень и очень простой, нам просто нужно задать теги для, и далее между ними написать содержимое сайта:

Прикреплённая шапка сайта

Так как это самый простой пример, тут мы добавили просто текст между тегами h1, но там также можно использовать изображения, или же, например, навигацию по сайту.

Код jQuery

CSS является самым лучшим способом реализации анимации и переходов в настоящее время. Так что скриптов мы будем использовать минимум, и то для того чтобы задать определение срабатывания анимации при прокрутке страницы.

Когда значение положения страницы при прокрутке больше чем 1, это означает, что пользователь прокрутил страницу и нужно добавить класс «sticky» к тегу шапки сайта. Таким образом срабатывает и фиксируется шапка сайта.

А вот и сам код:

$(window).scroll(function() { if ($(this).scrollTop() > 1){ $("header").addClass("sticky"); } else{ $("header").removeClass("sticky"); } });

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

CSS

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

Header{ position: fixed; width: 100%; text-align: center; font-size: 72px; line-height: 108px; height: 108px; background: #335C7D; color: #fff; font-family: "PT Sans", sans-serif; }

Теперь самый интересный момент: когда пользователь прокручивает страницу вниз, тогда будет применяться класс.sticky, которому мы можем задать совершенно разнообразное отображение, на которое только способно CSS. Мы так же установим фиксированную позицию, что бы наша шапка сайта была всегда на виду.

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

Header.sticky { font-size: 24px; line-height: 48px; height: 48px; background: #efc47D; text-align: left; padding-left: 20px; }

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

Ну а сейчас давайте добавим немного анимации нашему переходу с помощью. Вот код:

Transition: all 0.4s ease;

Ι Заключение

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

Основная сложность с резиновым макетом это обеспечить корректное отображение на разных разрешениях, от высокого до низкого. Поскольку мы ограничили ширину контента 760 пикселами, картинку в шапке стоит разместить так, чтобы более важная часть изображения вписывалась в этот размер. На рис. 6.3 показано, как это сделать. Тёмным цветом выделена центральная часть шириной 760px, буквой А обозначены одинаковые по ширине оставшиеся фрагменты.

Рис. 6.3. Ширина шапки

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

Header { display: block; /* Для старых браузеров */ height: 405px; /* Высота шапки */ background: url(images/header-bg.png) no-repeat center bottom; }

В идеале рисунок должен иметь большую ширину от 2000 пикселов, тогда практически при любом разрешении монитора рисунок будет показывать центральную часть, обрезая всё, что не помещается в окно. Но беда в том, что изначально картинка не настолько широкая, а рисовать бесконечно тянущиеся по бокам чёрные полоски не хочется. Один из вариантов решения это включить повторение фона по горизонтали. Те, у кого разрешение 1280 пикселов по ширине и меньше, увидят единственную картинку, а владельцы широких мониторов смогут полюбоваться сразу несколькими животными и одновременно заходящими солнцами. Здесь важно подредактировать рисунок так, чтобы он без стыков совмещался сам с собой по горизонтали (рис. 6.4). Градиент для наглядности спрятан.

Рис. 6.4. Совмещение изображения по горизонтали

На данном рисунке место стыка обозначено стрелкой и промежутком, чтобы стык можно было заметить. Если правильно отредактировать правую и левую часть фоновой картинки, то она будет повторяться по горизонтали без видимых стыков, как один сплошной рисунок. Остаётся слегка подправить стиль, заменив значение no-repeat (без повторения) на repeat-x (повторение по горизонтали).

Header { display: block; height: 405px; background: url(images/header-bg.png) repeat-x center bottom; }

Рис. 6.5. Фоновая картинка для шапки

В формате PNG-24 файл с фоном размером 1325х405 пикселов занимает около 32 Кб, а в PNG-8 с 256-цветовой палитрой, где качество градиента несколько хуже - около 15 Кб. Можно разбить фон на две составные части - градиент и картинку и сохранить каждое изображение в своём формате, что должно привести к повышению качества отображения градиента. Впрочем, 32 Кб для столь большого изображения это немного и дополнительную оптимизацию кто-то посчитает «экономией на спичках». Тем не менее, альтернативный подход к созданию шапки сайта кому-то окажется полезным, а при желании вы можете его пропустить.

Оптимизация шапки

Поскольку градиент в шапке повторяется по горизонтали, его можно вырезать из макета и установить как фоновую картинку. На рис. 6.6 показан градиент высотой 405 пикселов, подготовленный для этой цели. Формат PNG-24 не вносит искажения в изображение, а градиенты хорошо сжимает (итоговый объем 402 байта), так что в этом случае однозначно следует использовать именно его. Рамка вокруг рисунка добавлена для наглядности.

Рис. 6.6. Градиентный рисунок (header-gradient.png)

Картинка с силуэтными животными делается на прозрачном фоне и высотой 198 пикселов, нет смысла делать её на всю высоту шапки, поскольку она занимает лишь часть. Фрагмент изображения показан на рис. 6.7. Шахматное поле означает прозрачность.

Рис. 6.7. Фоновая картинка с прозрачностью (header-animal.png)

Поскольку сохранение этой картинки идет в формате PNG-8, у которого только один уровень прозрачности, в отличие от 256 уровней формата PNG-24, важно обеспечить корректное наложение на градиентный фон. Для этого при сохранении в Photoshop-е надо указать цвет краёв (Matte) близкий к средней части градиента, где идёт наложение силуэта. Примерно это цвет #9de1f0. В этом случае не возникнет грязных контуров вокруг деревьев и животных, а картинка при наложении на градиент будет восприниматься как единое целое.

Два рисунка для фона шапки подготовлены, пишем код HTML.

И стиль для элемента и слоя header-bg .

Header { background: #00b0d8 url(images/header-gradient.png) repeat-x; } .header-bg { background: url(images/header-animal.png) repeat-x center bottom; height: 405px; }

В итоге объем файлов оказался 12,5 Кб, что даже меньше ожидаемого.

Название сайта

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

Использовать формат PNG-24 при сохранении прозрачности.

Сохранить рисунок в формате GIF или PNG-8 с фрагментом градиента, а затем наложить рисунок на градиент так, чтобы совпадение было с точностью до пиксела.

Очевидно, что второй способ имеет ряд недостатков - изображение нельзя сдвинуть даже на пару пикселов, оно привязано к градиенту, и если его градиент изменить, придётся менять и картинку. Так что сохраняем заголовок в формате PNG-24. Код HTML останется прежним, а стили расширятся.

Header { background: #00b0d8 url(images/header-gradient.png) repeat-x; } .header-bg { background: url(images/header-animal.png) repeat-x center bottom; height: 405px; /* Высота шапки */ text-align: center; /* Выравнивание по центру */ } .header-bg img { position: relative; /* Относительное позиционирование */ top: 40px; /* Сдвигаем картинку вниз */ }

Выравнивание по центру делается через свойство text-align , добавляемое к родителю тега , а сдвиг вниз через свойство top . Чтобы это свойство сработало, необходимо для картинки задать относительное позиционирование с помощью свойства position со значением relative .

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

Значение / у атрибута href указывает на главную страницу и работает только на веб-сервере, но никак не локально.

Окончательный код для шапки приведён в примере 6.14.

Пример 6.14. Шапка сайта

HTML5 CSS 2.1 IE Cr Op Sa Fx

Как поймать льва в пустыне?

Ниже описан лаконичный способ решения этой проблемы.

HTML-разметка максимально проста:

Super Bad First Link Second Link Third Link

Высота шапки фиксированная, добавляем text-align: justify , для дочерних элементов:

Header { text-align: justify; letter-spacing: 1px; height: 8em; padding: 2em 10%; background: #2c3e50; color: #fff; }

Добавляем display: inline-block для всех элементов nav , чтобы можно было расположить их друг за другом:

Header h1, header nav { display: inline-block; }

Header::after { content: ""; display: inline-block; width: 100%; }

Используем снова псевдоэлементы. используя пример из статьи Centering in the Unknown , упомянутый Michał Czernow:

Header h1 { height: 100%; } header h1::before { content: ""; display: inline-block; vertical-align: middle; height: 100%; }
В результате получается то, что нужно:

Используем трюк с псевдоэлементом на header :

CSS-код

Выглядит намного лучше:

CSS-код

@media screen and (max-width: 820px){ header { height: auto; } header > div, header >

Результат адаптивен и на мобильных устройствах выглядит так:

Финальный CSS-код

Результат:

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

Один из них как зафиксировать шапку сайта ? Я тут же решил исправить положение и написать статью, так как тема актуальная, и есть вопросы в данной области.

Вообще, существует несколько способов того, при прокрутке страницы. Можно воспользоваться javascript, но я не очень силен в этой теме и только изучаю ее. Поэтому, пока, будем обходиться css. Слава Богу, зафиксировать шапку сайта (да и не только шапку, а любой другой элемент), можно «малой кровью»:)

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

Фиксация шапки при прокрутке страницы

Для того, чтобы зафиксировать шапку, придется создать два блока. Один - для того, чтобы была возможность центрировать шапку. А в нем дочерний, который и будет фиксироваться. Начнем…

Вот такая простая html структура! Теперь добавим стили!

#headerMain { width:920px; height: 195px; margin:0px auto; z-index:0; } #header { width:920px; height: 195px; background: url(../img/bg-header.jpg) no-repeat; position: fixed; z-index: 9999; }

Теперь шапка будет зафиксирована вверху экрана и будет неподвижна при прокрутке.

2016-12-07

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

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

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

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

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

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

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

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

Ниже, приведен фрагмент шапки HTML-страницы, взятый из файла "index.html", с содержимым контейнера , где цветом выделены нужные элементы.

"images/logo.gif" alt ="Фавикон" />

Название сайта

Противоугонная маркировка стекол -

надежная защита автомобиля от угона

Рис.1 Фрагмент кода шапки HTML-страницы

Как видно из таблицы, фавикон и заголовок названия сайта объединены в один блок с атрибутом класса "hdr-block" , а два фрагмента ключевой фразы размещены в отдельные блоки

Один с классом "hdr-p1" , другой "hdr-p2"

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

В итоге, получим следующие данные:

расстояние до блока с классом "hdr-title" - 28px;
расстояние до нижней границы фавикона - 55px;
расстояние до блока
С классом "hdr-p1" - 74px;
расстояние до верхней границы эл-та
С классом "hdr-p2" - 105px;
расстояние до нижней границы эл-та
С классом "hdr-p2" - 160px;

Исходя из этого, вычислим высоту элементов:

высота фавикона - 27px (55px - 28px);
высота блока с классом "hdr-block" - 46px (74px - 28px);
высота блока
С классом "hdr-p1" - 31px (105px - 74px);
высота блока
С классом "hdr-p2" - 55px (160px - 105px);

На основании этих данных назначим соответствующие стили.

Hdr-title {

margin-top: 28px;

Hdr-block {

height: 46px;

Hdr-block img {

height: 27px;

Hdr-p1 {

height: 31px;

Hdr-p2 {

height: 55px;

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

Ниже, на рис.4 показан вид шапки до назначения свойств CSS, на рис.5 - после назначения.

Рис.4 Вид шапки до назначения свойств CSS

Рис.5 Вид шапки после назначения свойств CSS

Однако, расположение фавикона и заголовка названия сайта, которые размещены в блоке с классом "hdr-block" , пока не соответствуют макету (на макете они располагаются в один ряд, здесь же заголовок находится под фавиконом).

Это происходит из-за того, что по умолчанию элементы располагаются один под другим по мере загрузки HTML-страницы.

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

О свойстве float очень хорошо объясняется в справочнике "Puzzleweb" на странице "http://www.puzzleweb.ru/css/pr_float.php" . Поэтому, если кто еще не знаком этим важным свойством CSS, то может воспользоваться данной ссылкой.

Как назначить в данном случае свойство float показано ниже.

Hdr-title {

margin-top: 28px;

Hdr-block {

height: 46px;

Hdr-block img {

height: 27px;

float: left;

Hdr-p1 {

height: 31px;

Hdr-p2 {

height: 55px;

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

Формирование отступов элементов по горизонтали

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

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

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

В результате, мы получили следующие значения:

отступ фавикона - 100px;
отступ заголовка - 145px;
отступ блока
С классом "hdr-p1" - 196px;
отступ блока
С классом "hdr-p2" - 243px.

Исходя из того, что общая ширина страницы дизай-макета составляет 1200px, подсчитаем процентное соотношение измеренных величин по каждому элементу:

отступ фавикона - 8.33%;
отступ заголовка - 12.08%;
отступ блока
С классом "hdr-p1" - 16.33%;
отступ блока
С классом "hdr-p2" - 20.25%.

На основании этих данных присвоим полученные значения соответствующим свойствам элементов.

Hdr-title {

margin-top: 28px;

Hdr-block {

height: 46px;

Hdr-block img {

height: 27px;

float: left;

margin-left: 8.25%;

Hdr-block h1 {

margin-left: 12.08%;

Hdr-p1 {

height: 31px;

margin-left: 16.33%;

Hdr-p2 {

height: 55px;

margin-left: 20.25%;

После изменения CSS-кода мы можем убедиться, что все отступы элементов приведены в соответствие с дизайн-макетом.

Назначение свойств шрифта элементов

Теперь назначим свойства шрифта рассматриваемых элементов, а именно: размер, цвет и стиль.

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

В данном случае, шрифт заголовка имеет следующие значения:

стиль - стандартный (не курсивный, нежирный);
размер - 2.25em = 36px / 16px;
цвет - #c03838.

Аналогично, определяем параметры шрифта для элемента ключевой фразы:

шрифт "Arial" из семейства шрифтов без засечек;
стиль - курсивный, нежирный;
размер - 1.5em = 24px / 16px;
цвет - #437744.

Теперь, присвоим полученные значения соответствующим свойствам.

Hdr-title {

margin-top: 28px;

Hdr-block {

height: 31px;

Hdr-block img {

height: 27px;

float: left;

margin-left: 8.33%;

Hdr-block h1 {

margin-left: 12.08%;

font-size: 2.25em;

color: #c03838;

line-height: 0.8;

Hdr-p1 {

height: 31px;

margin-left: 16.33%;

Hdr-p2 {

height: 55px;

margin-left: 20.25%;

Hdr-p1, .hdr-p2 {

font-style: italic;

font-size: 1.5em;

color: #437744;

line-height: 0.8;

По назначенным свойствам шрифта следует сделать некоторые уточнения:

шрифт "Arial" назначен ранее при установке базовых настроек файла css, поэтому здесь, повторного его назначения не требуется;
значение normal стиля font-weight для элемента здесь не указывается, так как оно установлено также в базовых настройках файла css, а для блока
Это значение установлено по умолчанию;
Для того, чтобы верхнюю границу текста совместить с верхней границей родительского элемента свойству line-height присвоено значение 0.8 . Таким образом, межстрочный интервал становится равным размеру текущего шрифта.

После обновления страницы можно увидеть нужные изменения в шрифте текста.

Создание теней для текстовых элементов

И, последнее, что осталось для оформления шапки, это создание теней для текста.

В CSS3 для формирования теней текста имеется свойство text-shadow , в котором задаются значения вертикального и горизонтального смещения, размытость и цвет.

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

Таким образом, на основании изображения дизан-макета можно получить данные, которые соответствуют свойствам CSS, такие, как:

угол - 157 o ;
смещение - 3px;
размер - 3px;
цвет - #564949.

Из них можно получить необходимые для CSS значения смещения тени, а именно: смещение по горизонтали 3px, а по вертикали - 1px. Таким образом, получим для свойств CSS следующие значения:

смещение по-горизонтали - 3px;
смещение по-вертикали - 1px;
размытость - 3px;
цвет - #564949.

Аналогично, получим данные по тени для ключевой фразы.

смещение по-горизонтали - 2px;
смещение по-вертикали - 1px;
размытость - 2px;
цвет - #298384.

После назначения соответствующих свойств получим окончательный вариант таблицы стилей CSS

Hdr-title {

margin-top: 28px;

Hdr-block {

height: 46px;

Hdr-block img {

height: 27px;

float: left;

margin-left: 8.33%;

Hdr-block h1 {

margin-left: 12.08%;

font-size: 2.25em;

color: #c03838;

line-height: 0.8;

text-shadow: 3px 1px 3px #564949;

Hdr-p1 {

height: 31px;

margin-left: 16.33%;

Hdr-p2 {

height: 55px;

margin-left: 20.25%;

Hdr-p1, .hdr-p2 {

font-weight: bold;

font-style: italic;

font-size: 1.5em;

color: #437744;

line-height: 0.8;

text-shadow: 2px 1px 2px #298384;

После обновления страницы можно увидеть окончательный вид элементов шапки.

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

Исходные файлы сайта

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

Рис. 6.3. Ширина шапки

Header { display: block; /* Для старых браузеров */ height: 405px; /* Высота шапки */ background: url(images/header-bg.png) no-repeat center bottom; }

Рис. 6.4. Совмещение изображения по горизонтали

Header { display: block; height: 405px; background: url(images/header-bg.png) repeat-x center bottom; }

Рис. 6.5. Фоновая картинка для шапки

Оптимизация шапки

Рис. 6.6. Градиентный рисунок (header-gradient.png)

Рис. 6.7. Фоновая картинка с прозрачностью (header-animal.png)

Два рисунка для фона шапки подготовлены, пишем код HTML.

И стиль для элемента и слоя header-bg .

Header { background: #00b0d8 url(images/header-gradient.png) repeat-x; } .header-bg { background: url(images/header-animal.png) repeat-x center bottom; height: 405px; }

В итоге объем файлов оказался 12,5 Кб, что даже меньше ожидаемого.

Название сайта

Использовать формат PNG-24 при сохранении прозрачности.

Значение / у атрибута href указывает на главную страницу и работает только на веб-сервере, но никак не локально.

Окончательный код для шапки приведён в примере 6.14.

Пример 6.14. Шапка сайта

HTML5 CSS 2.1 IE Cr Op Sa Fx

Как поймать льва в пустыне? body { margin: 0; } header { display: block; background: #00b0d8 url(images/header-gradient.png) repeat-x; /* Градиент */ } .header-bg { background: url(images/header-animal.png) repeat-x center bottom; /* Животные */ height: 405px; /* Высота шапки */ text-align: center; /* Выравнивание по центру */ } .header-bg img { position: relative; /* Относительное позиционирование */ top: 40px; /* Сдвигаем картинку вниз */ }

Категории
- Android
- Apple
- Hardware
- Malware
- Networks
- Software
- Windows
- Windows 10
- Windows 7
- Windows Server

Популярное