Вредоносное ПО (malware) - это назойливые или опасные программы,...
Основная сложность с резиновым макетом это обеспечить корректное отображение на разных разрешениях, от высокого до низкого. Поскольку мы ограничили ширину контента 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. Код 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
Как поймать льва в пустыне?
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; /* Сдвигаем картинку вниз */
}
От автора: приветствуем вас на нашем блоге о сайтостроении. У любого сайта есть то, чем он обычно запоминается и выделяется среди остальных. Обычно это именно шапка сайта. 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-каркас и обертывал его ссылкой, пытался угадать местоположение навигации с помощью абсолютного или относительного позиционирования. Я решил сам попробовать сделать шапку сайта так, как мне кажется более правильным.
В основу создания шапки я положил свойство вложенных слоев на
, , которой прописываются свойства центрирования страницы и задания ей ширины: #wrap { width : 800px ; height : 100% ; margin : 0 auto ; background : #c0c0c0 ; }Затем создается слой
и задаю ее высоту: #header { width : 100% ; height : 70px ; }Затем создаю слой
| 1 | div id="nav" |
Рисунок короткий и будет занимать не всю ширину шапки, а только некоторую ее правую часть, как раз ровно настолько, чтобы вместить в себя навигационный список. CSS-код для этого слоя представлен ниже:
#nav { background : url(i/bg-nav.gif) #b318cf 100% 0 no-repeat ; height : 70px ; }Теперь создаю еще один слой
и будет располагаться поверх этого слоя, перекрывая его.Поэтому фон слоя
явно задаю его высоту. Код со свойствами приведен ниже: #head { background : url(i/bg-header.gif) #2b66c8 0 0 no-repeat ; height : 50px ; }Ну вот, задача практически и решена. При этом не было использовано ни абсолютного, ни относительного позиционирования. только смещение фона слоя. Осталось создать последний слой, который будет выполнять задачу логотипа сайта. Размещаю его поверх всех остальных слоев и делаю кликабельным на все его пространство.
При этом снова воспользуюсь фоновым изображение, которое вложу внутрь этого слоя. Никаких img в html-коде! Позиционировать или смещать его никуда не надо, так как он по-умолчанию расположится в левом верхнем углу блока (как мною задумано для простоты эксперимента ). Только явно задам этому слою высоту и ширину, равную высоте и ширине фонового рисунка:
#logo { background : url(i/logo.gif) #36cf18 0 0 no-repeat ; width : 30px ; height : 30px ; }Чтобы сделать слой кликабельным, помещаю внутрь него ссылку. Так как изначально она является строчным элементом (
.| 1 | display:block |
Осталось создать навигационное меню шапки, которое должно располагаться поверх слоя
. Так как по коду слой .Теперь достаточно сместить список вправо с помощью
| 1 | float: right |
Единственный момент, который вызвал у меня затруднения, это появившиеся еле заметные отступы между внешним блоком
. Первоначально для них я прописал свойство проблема была решена. Для элементов и для я дополнительно задал высоту строки . Зазоры пропали и пункты меню растянулись на всю высоту блока-родителя.Все, шапка сайта готова. Если посмотреть на html-код, то видно, что он “правильный”. То есть, он не замусорен всякими
| 1 | img |
Ниже приведу полный код html-каркаса и CSS-кода.
/* reset */ * { margin : 0 ; padding : 0 ; } /* main */ #wrap { width : 800px ; height : 100% ; margin : 0 auto ; background : #c0c0c0 ; } #header { width : 100% ; height : 70px ; } #nav { background : url(i/bg-nav.gif) #b318cf 100% 0 no-repeat ; height : 70px ; } #nav ul { list-style-type : none ; float : right ; } #nav li { display : inline-block ; } #nav a { text-decoration : none ; color : #fff ; font-weight : bold ; margin-right : 15px ; line-height : 20px ; display : inline-block ; } #head { background : url(i/bg-header.gif) #2b66c8 0 0 no-repeat ; height : 50px ; } #logo { background : url(i/logo.gif) #36cf18 0 0 no-repeat ; width : 30px ; height : 30px ; } #logo a { display : block ; width : 100% ; height : 100% ; }Здесь я представлю нарисованную мною схему расположения всех блоков в шапке сайта.
Вёрстка страницы представляет собой процесс разработки структуры html-документа, результатом которого является веб-страница. Структура веб-страницы определяется соответствующими html-тегами. Теги — прямоугольные блоки-контейнеры для содержимого — не отображаются в окне браузера. Они сообщают браузеру о типе контента, а браузер на основании этой информации выводит на экран их содержимое — текст или медиа-файлы.
Как создать структуру страницы с помощью блоков (блочная вёрстка) 1. Как разбить макет страницы на секцииЧтобы создать макет страницы, необходимо выделить основные разделы (секции) документа. Подробнее о секционных элементах вы можете прочитать в статье .
Стандартная веб-страница содержит следующие секции:
Рис. 1. Основные секции страницы
Мы не будем использовать элемент , так как он поддерживается не всеми браузерами.
Элементы , и — блочные, поэтому они будут занимать всю ширину их блока-контейнера — элемента . Страница с такой разметкой будет хорошо смотреться на небольших экранах, но на устройствах с большим разрешением текст таких страниц будет неудобно читать. Поэтому необходимо добавить тег-контейнер для контента — содержимого каждой секции:
Рис. 2. Основные секции страницы с тегом-контейнером
и задать для него максимальную ширину, внутренние отступы, которые будут отделять контент от краёв экрана устройств с небольшим разрешением, а также внешние отступы, позволяющие выровнять контейнер по середине родительского блока:
Container { width: 100%; max-width: 1024px; /*максимальная ширина может иметь другое значение*/ padding: 0 15px; margin: 0 auto; }
Таким образом мы получили каркас для нашей страницы (высота секций в данном случае виртуальная, так как без содержимого секции имеют нулевую высоту).
2. Разметка шапки сайта и позиционирование её элементовПриступим к разметке первой секции, так называемой шапки веб-страницы. Элемент предназначен для группировки вводной информации и навигационных средств по странице/сайту. Добавим внутрь тега логотип сайта и навигационные ссылки:
LOGO
- Главная
- О нас
- Контакты
Рис. 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. Разметка подвала страницы
Подвал страницы, или нижний колонтитул, обычно содержит информацию о копирайте, дополнительные ссылки и т.п. Вся эта информация также размещается в столбцах, которые могут быть одинаковой или разной ширины.
Элемент сайта, который мы рассмотрим сегодня, является одним из важнейших и очень заметных на странице. Иногда его делают не слишком большим. Он может быть либо статическим, либо динамическим. Всё зависит от желания и фантазий дизайнера и владельца сайта. Возможно, вы уже догадались о чем будет речь — правильно, о шапке сайта. Сегодня мы рассмотрим четыре способа нестандартных способа, с помощью которых можно оформить эту часть сайта. Благодаря этим способам — ваш сайт однозначно выделится на фоне других.
Четыре примера вы можете посмотреть по следующей ссылке:
СкачатьКак пользоваться? — Анимированные шапки для сайтаHTML частьВ коде страницы всё что нужно вставить, это:
| 1 2 3 |
В блоке с идентификатором и классом large-header находится тег , в которм и происходит вся анимация. А блок лишь содержит фоновое изображение.
Javascript частьЗатем в конце страницы необходимо подключить нужные библиотеки. Они находятся в папке js (в архиве с исходниками — ссылка в начале статьи).
Например, для примера №1 нужно подключить следующие библиотеки:
Ниже я сделал скриншоты каждого из эффектов.
