Шапка страницы html. Шапка страницы
Элемент сайта, который мы рассмотрим сегодня, является одним из важнейших и очень заметных на странице. Иногда его делают не слишком большим. Он может быть либо статическим, либо динамическим. Всё зависит от желания и фантазий дизайнера и владельца сайта. Возможно, вы уже догадались о чем будет речь — правильно, о шапке сайта. Сегодня мы рассмотрим четыре способа нестандартных способа, с помощью которых можно оформить эту часть сайта. Благодаря этим способам — ваш сайт однозначно выделится на фоне других.
Четыре примера вы можете посмотреть по следующей ссылке:
Скачать
Как пользоваться? — Анимированные шапки для сайта
HTML часть
В коде страницы всё что нужно вставить, это:
1 2 3 | <div id = "large-header" class = "large-header" > |
В блоке Затем в конце страницы необходимо подключить нужные библиотеки. Они находятся в папке js
(в архиве с исходниками — ссылка в начале статьи). Например, для примера №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;
}
И вот такой код самого шаблона:
Первым делом внесем немного изменений в стиль обволакивающего блока 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 вот такую строчку: Logo {
display:block;
height: 104px;
width: 390px;
background: url("image/logo.png") no-repeat;
}
Я сделал элемент блочным, задал ему ширину и высоту, а также сделал фоном картинку-логотип, которую положил в директорию image. В этой директории будут располагаться все картинки шаблона. Размер картинки 388*100 пикселей, почему же тогда размер блока немного отличается? Высоту я сделал 104 пикселя, чтобы был отступ от картинки-логотипа внизу между будущим меню и логотипом, а ширину взял на два пикселя больше на всякий случай, так как сталкивался пару раз с тем, что Mozilla неправильно определяла размер картинки и немного её обрезала. Все, с логотипом закончили. Меню в Я думаю, что многие из Вас уже заметили, что сейчас в тенденцию входят всё больше липких элементов дизайна, которые остаются на виду при прокрутке страницы пользователем. Как по моему это очень удобно, особенно если это навигация сайта. Вот именно такой пример мы сегодня и будем делать. Мы узнаем как сделать анимированную шапку сайта на JQuery и CSS3 с анимацией. Как обычно это, оказывается, делается в минимум строк кода и очень просто, и в то же время очень эффективно. Ну а теперь давайте приступим к уроку. Но для начала хочется сказать огромное спасибо http://www.webdesignerdepot.com ну а теперь давайте точно начнём. HTML код очень и очень простой, нам просто нужно задать теги для , и далее между ними написать содержимое сайта:
Так как это самый простой пример, тут мы добавили просто текст между тегами h1, но там также можно использовать изображения, или же, например, навигацию по сайту. CSS является самым лучшим способом реализации анимации и переходов в настоящее время. Так что скриптов мы будем использовать минимум, и то для того чтобы задать определение срабатывания анимации при прокрутке страницы. Когда значение положения страницы при прокрутке больше чем 1, это означает, что пользователь прокрутил страницу и нужно добавить класс «sticky» к тегу шапки сайта. Таким образом срабатывает и фиксируется шапка сайта. А вот и сам код:
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$("header").addClass("sticky");
}
else{
$("header").removeClass("sticky");
}
});
Важно отметить, что использование в данном примере не очень хорошая затея, так как если в браузере будет отключено использование скриптов, тогда шапка сайта будет просто фиксированная и всё. 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;
Я надеюсь, что этот способ решит множество вопросов по поводу реализации удобной и простой навигации для сайта. К тому же данная реализация очень просто и понятна. Вёрстка страницы
представляет собой процесс разработки структуры html-документа, результатом которого является веб-страница. Структура веб-страницы определяется соответствующими html-тегами. Теги — прямоугольные блоки-контейнеры для содержимого — не отображаются в окне браузера. Они сообщают браузеру о типе контента, а браузер на основании этой информации выводит на экран их содержимое — текст или медиа-файлы. Чтобы создать макет страницы, необходимо выделить основные разделы (секции) документа. Подробнее о секционных элементах вы можете прочитать в статье . Стандартная веб-страница содержит следующие секции:
Мы не будем использовать элемент Элементы Javascript часть
Что? Это всё? И в честь этого названа целая статья?
Конечно, нет. Шапка сайта будет состоять из других элементов: логотипа и меню, которые будут оформлены отдельно.
По сути это ссылка на главную страницу без текста, однако ей присвоен класс class="logo". Теперь нужно его оформить в стилях css. Ι
HTML
Прикреплённая шапка сайта
Код jQuery
CSS
Ι
Заключение
Как создать структуру страницы с помощью блоков (блочная вёрстка)
1. Как разбить макет страницы на секции
Рис. 1. Основные секции страницы