Картинка шапки для сайта: Хедер сайта — , картинки для хедера, красивые шапки сайтов

Сайт 

Содержание

Вёрстка сайта на практике

Глава VIII

Чтобы получить подробное представление о вёрстки мы пройдем весь процесс работы, начиная с получения графического макета и заканчивая публикацией сайта. В качестве примера сверстаем страницы сайта lionindesert.ru представленные на рис. 8.1.

а. Главная страница сайта

б. Внутренняя страница

Рис. 8.1. Макеты сайта lionindesert.ru

Дизайнер подготовил макеты в программе Adobe Illustrator CS4 и одновременно экспортировал их в формат PSD (Adobe Photoshop CS4), так что все необходимые начальные изображения у нас имеются. Здесь надо учесть, что вёрстка это процесс творческий и возможно несколько решений одной задачи, поэтому с графикой придётся работать активно, готовя изображения под своё решение. Один большой PSD-файл надо превратить в набор небольших рисунков, которые будут выводиться в браузере с использованием HTML и CSS. Предполагаем, что верстальщик владеет программой Photoshop и может в ней выполнить какие-то типовые действия вроде вырезания фрагмента картинки и сохранения его в подходящем для веба формате. Либо верстальщик работает в паре с дизайнером и чётко указывает ему, что надо получить.

Для систематизации работы разобьём её на ряд задач по виду макета (рис. 8.2). Но и так хорошо заметно, что страница делится на три главные группы: шапка, основная часть, где располагается весь контент и подвал. «Шапка» и «подвал» это жаргонные выражения для обозначения заголовка страницы и её нижней части. Также применяются термины «хедер» и «футер», являющиеся калькой с английских слов header и footer.

Рис. 8.2. Задачи для вёрстки

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

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

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

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

.header {

height: 405px; /* Высота шапки */

}background: url(images/header-bg.png) no-repeat center bottom;

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

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

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

.header { height: 405px;

}background: url(images/header-bg.png) repeat-x center bottom;

На этом можно считать, что фоновый рисунок в шапке готов (рис. 8.5).

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

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

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

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

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

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

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

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

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

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

<div> <div>

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

</div>

</div>

И стиль для слоёв 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 img {

position: relative; /* Относительное позиционирование */ }top: 40px; /* Сдвигаем картинку вниз */

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

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

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

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

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

Пример 8.1. Шапка сайта XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>

<html xmlns=»http://www.w3.org/1999/xhtml»>

<head>

<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ /> <title>Как поймать льва в пустыне?</title>

<style type=»text/css»> body { margin: 0; }

. 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 img {

position: relative; /* Относительное позиционирование */ }top: 40px; /* Сдвигаем картинку вниз */

</style>

</head>

<body>

<div> <div>

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

</div>

</div>

</body>

</html>

Урок 6 — Школа MODX

  • 35031

  • Июль 2014

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

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

RSS — это файл в формате XML, предназначеный для трансляции собственных новостей, анонсов и т.д., а так же, для чтения чужих новостей и анонсов. Все современные браузеры умеют работать с этим форматом, но существуют и специальные приложения (RSS-агрегаторы), такие как Яндекс. Лента и Google Reader, которые собирают и отображают RSS-каналы. Если на вашем сайте планируется публикация новостей или каких-то статей, то настроить RSS ленту — признак хорошего тона, тем более, что делается это за пять минут.

Создаем RSS-ленту

Сначала нам необходимо создать в дереве ресурсов документ с псевдонимом rss и шаблоном (blank). Я создал такой документ в корневой папке. Убираем галочку с «Показывать в меню» 

затем переходим в закладку «Настройка страницы» и снимаем галочки с пунктов «Использовать HTML-редактор», «Доступен для поиска» и «Кэшируемый». Пункт «Контейнер (содержит дочерние ресурсы)» тоже должен быть отключен. Там же в графе «Тип содержимого» выбираем text/xml, это один из важных моментов.

Документ для нашей ленты готов. Запоминаем его ID, это пригодится далее, у меня ID получился 6. Сохраняем ресурс, после этого опять заходим в него и помещаем в «Содержимое ресурса» вот такой вызов Ditto:

[!Ditto? &parents=`2` &format=`rss` &total=`all` &tpl=`rss_tpl` &display=`10`!]

Где &parents=`2` — ID папки, в которой находятся транслируемые документы, я предполагаю, что мы будем транслировать только статьи, находящиеся на странице Блог о дизайне. У меня ID этой страницы 2, если у вас другой, то укажите его в этом параметре. Если вы хотите транслировать документы и из другой папки, то добавьте ее ID в этот параметр через запятую.

&format=`rss`— тип данных

&tpl=`rss_tpl` — чанк, шаблон для транслируемого документа

&display=`10` — количество документов на странице

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

Создаем шаблон вывода RSS

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

<item>
<title>[+rss_pagetitle+]</title>
<link>[(site_url)][~[+id+]~]</link>
<description><![CDATA[ [+introtext+] ]]></description>
<pubDate>[+rss_date+]</pubDate>
<guid isPermaLink="false">[(site_url)][~[+id+]~]</guid>
</item>

Где [+rss_pagetitle+] — заголовок транслируемого документа

[(site_url)][~[+id+]~] — ссылка на транслируемый документ

[+introtext+] — анонс документа.

[+rss_date+] — дата публикации ресурса

Подключаем RSS

В заголовок нашего сайта (чанки HEAD и HEAD_PORTFOLIO) между тегами <head> и </head> необходимо поместить ссылку на наш канал-RSS:

 <link rel="alternate" type="application/rss+xml" title="[(site_name)] Мой сайт" href="[~6~]" />

Где href=»[~6~]» — ссылка на документ, в котором мы делали вызов Дитто, его ID у меня получился 6, у вас может оказаться другой ID.

Создаем транслируемые статьи

У нас пока папка Блог о дизайне пустая, да и вообще еще не папка. Давайте создадим в ней несколько статей, для тестирования нашей RSS-ленты. В дереве ресурсов наводим курсор на Блог о дизайне и нажимаем правую кнопку мышки. В появившемся меню выбираем Дочерний ресурс. Заполняем шапку документа как показано на рисунке:

Таким же образом создаем еще два документа Статья2 и Статья3. Вы можете называть их иначе.

Теперь надо сделать ссылку на нашу ленту. Кнопки соцсетей и значок RSS-ленты находится в чанке HEADER. Вот нужная нам строчка:

<li><a href="http://www.templatemo.com" target="_parent"><img src="/assets/templates/templatemo_250_chess/images/rss.png" alt="rss" /></a></li>

Заменяем эту строчку на:

<li><a href="[~6~]"><img src="/assets/templates/templatemo_250_chess/images/rss.png" alt="rss" /></a></li>

Давайте посмотрим, что у нас в итоге получилось. Заходим на главную страницу сайта, если она у вас уже была загружена, то просто обновляем ее и жмем на значок RSS. Если вы все сделали правильно, то в браузере Firefox у вас должно отобразиться следующее:

На этом наша RSS-лента готова.

Кнопки соцсетей

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

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

<li><a href="http://www. facebook.com/templatemo" target="_parent"><img src="/assets/templates/templatemo_250_chess/images/facebook.png" alt="facebook" /></a></li>
<li><a href="http://www.templatemo.com" target="_parent"><img src="/assets/templates/templatemo_250_chess/images/twitter.png" alt="twitter" /></a></li>
<li><a href="#"><img src="/assets/templates/templatemo_250_chess/images/myspace.png" alt="myspace" /></a></li>

Сохраняю чанк.

Обратная связь

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

Находим в чанке HEADER строчку, отвечающую за ссылку обратной связи:

<li><a href="#"><img src="/assets/templates/templatemo_250_chess/images/gmail. png" alt="gmail" /></a></li>

Заменяем значение в атрибуте href тега <a> на [~5~] — где 5 это ID ресурса Контакты (у вас может отличаться):

<li><a href="[~5~]"><img src="/assets/templates/templatemo_250_chess/images/gmail.png" alt="gmail" /></a></li>

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

Заголовок сайта

Настало время поменять название в шапке нашего сайта. Продолжаем редактировать чанк HEADER. Заголовок сайта состоит из картинки с названием сайта и краткой подписи:

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

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

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

<a href="http://www.templatemo.com" target="_parent"><img src="/assets/templates/templatemo_250_chess/images/templatemo_logo.png" alt="css templates" /><span>free css templates</span></a>

Это и есть название нашего сайта.

Состоит оно из ссылки, картинки и краткой подписи. Давайте изменим этот код, указав ссылку на главную страницу нашего сайта и поставив вместо картинки нужный нам текст:

<a href="/">МОЙ САЙТ<span>блог о дизайне</span></a>

Открываем в Notepad++ файл со стилями templatemo_style.css, который, как мы помним, находится в папке: C:/xampp/htdocs/site/www/assets/templates/templatemo_250_chess/ и находим в этом файле класс, отвечающий за оформление нашего названия. Находится он в 142 строке:

#templatemo_header  #site_title a {
    margin: 0px;
    padding: 0px;
    font-size: 30px;
 
    color: #ffffff;
    font-weight: normal;
    text-decoration: none;
}

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

После этого в нижней части окна браузера появилось окошко:

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

Это еще одно дополнение HTML Validator, которое проверяет мой сайт на ошибки. Зеленый кружок с галочкой говорит о том, что никаких ошибок и предупреждений на данный момент нет. Об этих дополнениях к браузеру Mozilla Firefox я писал во вступлении к этим урокам.

Но вернемся к редактированию стиля нашего названия. Для начала, давайте добавим жирное начертание. Делается это с помощью font-weight: bold;. Теперь добавим тень к тексту: text-shadow: 1px 1px 2px #555;. Белый цвет названия не совсем подходит нам, давайте окрасим в малиновый, этим цветом было окрашено слово WEB в исходном шаблоне, код этого цвета

e92e51. Заодно увеличу размер шрифта font-size: 38px;. Вот что получилось в конечном счете:

#templatemo_header  #site_title a {
    margin: 0px;
    padding: 0px;
    font-size: 38px;
    color: #e92e51;
    font-weight: normal;
    text-decoration: none;
    font-weight: bold;
    text-shadow: 1px 1px 2px #555;    
}

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

Добавляю в стиль, который описывает тег span с этой надписью, внутренний отступ: padding: 2px;

#templatemo_header  #site_title a span {
    display: block;
    text-align: left;
    font-size: 14px;
    color: #5f6675;
    font-weight: bold;
    letter-spacing: 2px;
    padding: 2px;    
}

Вы можете экспериментировать со стилями, пока не добьетесь желаемого результата. Я же останавливаюсь на этом варианте.
Давайте изменим надпись LOREM IPSUMdolor sit amet на что-нибудь, более подходящее нам по смыслу, к примеру, на «Веб-разработка, сайты любой сложности». Находим в чанке HEADER

следующий код:

<h2>LOREM IPSUM<span>dolor sit amet</span></h2>

Заменяем на:

<h2>ВЕБ-РАЗРАБОТКА<span>сайты любой сложности</span></h2>

На этом чанк HEADER полностью изменен.

© 2011 — 2022 Школа MODX

Бесплатные заголовочные фото и картинки

Связанные изображения из iStock | Сохранить сейчас

облака небо небо

Облака размера заголовка Facebook 4

облака небо небо

Облака размера заголовка Facebook 1

облака небо небо

Облака размера заголовка Facebook 5

облака небо небо

Облака размера заголовка Facebook 3

Маска Заголовок размер

Маски размера заголовка Facebook

птица гнездо фейсбук

Гнездо размера заголовка Facebook

Фейсбук Заголовок красочный

Размер заголовка Facebook Цветной

птица парк рельс

Размер шапки Facebook Bird N Rail

пчела цветок черный

Facebook Размер заголовка пчелы на цветке

абстрактный арабский искусство

Вселенная Паутины

Интернет стрелка будущее

Интернет и будущее

искусство художественный фон

Вселенная Интернета

луна залитый лунным светом ночь

Ночь

урожай ферма пшеница

На ферме

заголовок точка прямой

Шарик и стрела 4

заголовок точка прямой

Шарик со стрелой 3

заголовок точка прямой

Шарик и стрела 2

заголовок точка прямой

Шарик и стрела 5

любовь любовь ты

Я ЛЮБЛЮ ТЕБЯ

синий голубоватый абстрактный

Фотофайлы_03

обои зеленый абстрактный

Бесплатные фото_01

баннер баннеры заголовок

Цветочные веб-заголовки

сеть веб-дизайн баннеры

Набор красочных веб-баннеров

пляж закат Флорида

Закат бесплатные фото с парусником и чайками

газета газеты Новости

Серия газет+ 2

газета газеты Новости

Серия газет+ 1

жесткий диск жесткий диск жесткий диск

Ошибка чтения диска

утка кряква водоплавающие птицы

Двойной коллектор

Тренироваться Железнодорожный локомотив

Двойной коллектор в Алматы

девочка ана Мария

Ана-Мария

Румыния расслабляться берег

Расслабьтесь

примечание повестка дня слово

Примечания

пейзаж природа Румыния

Зеленый и синий

мечтать девочка хороший

Дневной сон

футбол футбольный сеть

Заголовок

Роза лепесток любовь

Лепестки роз 1

Цель — спортивный инвентарь Ребенок Люди

Сохранение заголовка

Женщины среднего возраста Мяч Англия

Заголовок Amazon

Футбольная форма Возглавляя мяч На открытом воздухе

Два футболиста бьют головой

Футбольная форма Фокус — Концепция 25-29Годы

Футболистка собирается нанести удар головой

Футбольная форма 25-29 лет Возглавляя мяч

Два футболиста, один из которых бьет головой (ч/б)

Ищете иллюстрации для заголовков? Перейти к иллюстрациям

Связанные изображения из iStock | Сохраните сейчас

Где взять крутое изображение в шапке веб-сайта и советы по его выбору