Шапка страницы | htmlbook.ru

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

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

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

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).

Рис. 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>
 <div>
  <img src="images/header-title.png" alt="Как поймать льва в пустыне">
 </div>
</header>

И стиль для элемента <header> и слоя 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 Кб, что даже меньше ожидаемого.

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

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

  1. Использовать формат PNG-24 при сохранении прозрачности.
  2. Сохранить рисунок в формате 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, добавляемое к родителю тега <img>, а сдвиг вниз через свойство top. Чтобы это свойство сработало, необходимо для картинки задать относительное позиционирование с помощью свойства position со значением relative.

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

<a href="/"><img src="images/header-title.png" alt="Как поймать льва в пустыне"></a>

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

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

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

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Как поймать льва в пустыне?</title>
  <!--[if lt IE 9]>      
   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
  <style>
   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; /* Сдвигаем картинку вниз */
   }
  </style>
 </head>
 <body>
  <header>
   <div>
    <img src="images/header-title.
 
 
 png" alt="Как поймать льва в пустыне"
   >
   </div>
  </header>
 </body>
</html>

Размещение картинок в шапке сайта — Вопрос от Юрий Маков #3

  • Вопросы
  • Горячие
  • Пользователи
  • Вход/Регистрация

>

Категории вопросов

Задать вопрос +

Основное

  • Вопросы новичков (16585)
  • Платные услуги (2144)
  • Вопросы по uKit (82)

Контент-модули

  • Интернет-магазин (1438)
  • Редактор страниц (236)
  • Новости сайта (500)
  • Каталоги (809)
  • Блог (дневник) (113)
  • Объявления (295)
  • Фотоальбомы (434)
  • Видео (255)
  • Тесты (60)
  • Форум (578)

Продвижение сайта

  • Монетизация сайта (220)
  • Раскрутка сайта (2459)

Управление сайтом

  • Работа с аккаунтом (5343)
  • Поиск по сайту (427)
  • Меню сайта (1767)
  • Домен для сайта (1536)
  • Дизайн сайта (13485)
  • Безопасность сайта (1485)
  • Доп. функции (1308)

Доп. модули

  • SEO-модуль (225)
  • Опросы (63)
  • Гостевая книга (99)
  • Пользователи (433)
  • Почтовые формы (319)
  • Статистика сайта (198)
  • Соц. постинг (213)
  • Мини-чат (91)

Вебмастеру

  • JavaScript и пр. (645)
  • PHP и API на uCoz (236)
  • SMS сервисы (10)
  • Вопросы по Narod. ru (429)
  • Софт для вебмастера (39)

…

лучших 500+ изображений в заголовках | Скачать бесплатные изображения на Unsplash

Best 500+ Header Pictures | Download Free Images on Unsplash
  • A photoPhotos 537
  • A stack of photosCollections 2.6k
  • A group of peopleUsers 4

header images

background

wallpaper

person

writing

marketing

nature

Unsplash logo

Unsplash+

В сотрудничестве с Чарльзом Эторомой 9

Joanna Kosinska – –––– – – –– ––– –– –––– – –.

Патрик Томассо

Hd серые обоиHd обои водаморе

Benjamin Wedemeyer

österreichleadershipadventure

Damian Zaleski

workofficemarketing

10 Thought0010 writingblogBook images & photos

Unsplash logo

Unsplash+

In collaboration with Ahmed

Unsplash+

Unlock

Best soccer picturesFootball imagesboy

Hd abstract wallpapersgulf of mexicoEarth images & pictures

Clark Tibbs

signwordsquote

Priscilla Du Preez

WeathermistHd темные обои

Super Snapper

Hd обои для компьютераHd обои для ноутбукаmacbook pro

Tengyart

Nature imagesSpace images & picturesuniverse

Unsplash logo

Unsplash+

In collaboration with Nathan Watson

Unsplash+

Unlock

Hd wallpapersHd 3d wallpapersrender

Brandi Redd

Hd white wallpapersTexture backgroundsPaper backgrounds

Ian Schneider

Фоны для сайтаsocialpic

Hd розовые обои для рабочего столаHd пастельные обои

JESHOOTS. COM

businessstudytech

Дэвид Мартин

чарльстонартур равенел мл. bridgeunited states

Unsplash logo

Unsplash+

In collaboration with Getty Images

Unsplash+

Unlock

standingPeople images & picturesphotography

Edgar Chaparro

Beach images & picturespositanoItaly pictures & images

suitmaleman

workofficemarketing

Best soccer picturesFootball фотомальчик

WeathermistHd темные обои

Природа фотоКосмос картинкивселенная

Hd белые обоиТекстуры фоныБумажные фоны

businessstudytech

Пляж изображения и картинкиpositanoИталия картинки и изображения

–––––––– – –––– –– – –– –––– – – –– ––– –– –––– – –.

Hq фон фотографииHd желтые картинкиHd обои дизайн

Hd серые картинкиHd обои водаморе

österreichлидерствоadventure

writingblogBook images & photos

Hd abstract wallpapersgulf of mexicoEarth images & pictures

signwordsquote

Hd computer wallpapersHd laptop wallpapersmacbook pro

Hd wallpapersHd 3d wallpapersrender

Website backgroundssocialpic

Related collections

Header

375 photos · Curated by Hannes Steiner

Заголовок блога Обои

3.

No related posts.