Картинка шапки для сайта – Как сверстать фоновую картинку в шапке сайта чтобы хорошо смотрелось как на маленьких разрешениях так и на больших?

Leave a Comment / Разное / By /

Содержание

Бесплатные шапки для сайтов и для блогов

Здравствуйте, дорогие читатели блога beloweb.ru. Сегодня хочу представить Вам довольно таки полезный пост, а именно подборку бесплатных шапок для сайта и Ваших блогов.

Данная подборка очень поможет начинающим дизайнерам. А некоторые из них вдохновят на новые шедевры в веб дизайне.

Обновлено 19,08,2013

Друзья, теперь все шапки доступны здесь

В общем наслаждайтесь, друзья.

Шапки с огненным шаром, город и другие

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

Шапка для сайтов и блогов Cosmosource

Замечательная, современная шапка для стильных сайтов разной тематики.

Шапка Lighthouse

Красивая и бесплатная шапка с очень хорошо прорисованной и качественной графикой. Так же эта шапка может Вас вдохновить на создание нового и креативного шаблона.

[R] Evolution

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

Шапка для блогов и сайтов Mindscape

Стильная шапка с векторными людьми

Шапка для сайтов в ретро стиле

Клёвая шапка с ретро автомобилем посередине.

Типографические шапки

Несколько исходников типографических шапок.

Шапки на грязную и подземную тематику

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

A New Day

Замечательная шапка в светлых и красивых тонах.

Красивые шапки Fellowsisters

Очень красивые 2 шапки с замечательными иллюстрациями.

Шапка Inspiration

Lucifix

Уже готовая шапка для блога, с красивыми и приятными тонами.

Тёмная шапка Rocket And Go

Замечательная шапка для сайта в тёмном стиле и с отличным логотипом.

Sublog

2 шапки Elements

Не плохие шапки для блогов с красивой, плавной графикой

Canvas

Большая и красивая красная шапка для сайта.

Ephemeral

Несколько простых светлых шапок.

Monsteck Variketch

Magic Box

Шапка для сайтов Dream

Kultivating

Metamorphosis

Обновлено 19,08,2013

Друзья, теперь все шапки доступны здесь

Как сделать шапку сайта

Инструкция как сделать блок для шапки сайта, и расположить в нём фоновое изображение, логотип, заголовок, и описание сайта используя HTML и CSS

Блок для шапки сайта, обычно это «header» записывается так:

HTML


<div></div>

CSS


#header{
  width: 900px;     - ширина
  height: 200px;    - высота
  background-color: #25B33f;  - фоновый цвет (можно не задавать)
  margin-bottom: 10px;    - отступ снизу
}

Фоновое изображение для шапки сайта делаем по размерам блока, т.е. 900px X 200px. Его лучше всего сделать в фотошопе.

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

Готовое изображение прописываем в блок «header».


#header{
  width: 900px;
  height: 200px;
  background-color: #25B33f;
  margin-bottom: 10px;
  background-image: url(images/i8.png)   - в свойстве указывается путь к изображению. Как сохранить картинку, чтоб потом прописать путь для неё читайте в статье Каталога сайта
}

Свойство background-color указывается на тот случай, если картинка вдруг, в каком либо браузере посетителя, не отобразится.

Если картинка разместилась с каким-либо смещением, и нужно её подправить, то сюда же добавляется свойство background-position

Следующий шаг — добавляем заголовка и описания сайта.

Для этого в HTML блока прописываем код заголовка и абзаца. Абзацу зададим класс, так как описание будет только в шапке.

HTML


<div>
  <h2>Шапка сайта<h2>
    <p>Как сделать шапку для сайта с заголовком и описанием</p>
</div>

Посмотрим, что у нас получается.

Теперь, придадим вид заголовку и описанию. Создаём для них два селектора, и прописываем следующие свойства:
CSS


h2{
  color: #ffee00;  - цвет заголовка
  font: 40px Georgia;  - шрифт
  margin-left: 300px;  - отступ слева
}
.descript{
  width: 300px;  - ширина
  color: #ffee00;  - цвет
  font-style: italic;  - курсив
  margin: 70px 0 0 30px;  - расположение
  font-size:22px; - размер шрифта
}

Результат:

Теперь добавим логотип.

В качестве логотипа я возьму изображение вот такого чёртика

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

Чтоб разместить логотип проводим три изменения в коде:

а) в HTML блока добавим код картинки;

б) в CSS в блок header пропишем относительное позиционирование, так как логотип будет размещаться в этом блоке;

в) в CSS добавляем селектор логотипа, и позиционируем его абсолютно, относительно блока header.

HTML


<div>
  <h2>Шапка сайта<h2>
    <p>Как сделать шапку для сайта с заголовком и описанием</p>
<img src="images/hortic.gif">
</div>

CSS


#header{
  position:relative;
  width: 900px;
  height: 200px;
  background-color: #25B33f;
  margin-bottom: 10px;
  background-image: url(images/i8.png)  
}
h2{
  color: #ffee00;  - цвет заголовка
  font: 40px Georgia;  - шрифт
  margin-left: 300px;  - отступ слева
}
.descript{
  width: 300px;  - ширина
  color: #ffee00;  - цвет

  font-style: italic;  - курсив
  margin: 70px 0 0 30px;  - расположение
  font-size:22px; - размер шрифта
}
img{
  position:absolute;
  top:10px;
  left:10px;
}

Результат:

Получилась вот такая шапка сайта.

На  предыдущей странице мы сделали каркас сайта и теперь можно вставить в него шапку и посмотреть что получилось.

Код страницы:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
#wrapper{
    width: 900px;
    outline: 1px solid #787274;
    padding: 10px;
    margin: 0 auto;
}
#header{
    position:relative;
    width: 900px;
    height: 200px;
    background-color: #25B33f;
    margin-bottom: 10px;
    background-image: url(images/i8.png)

}
#sidebar{
    background-color: #2FF553;
    margin-bottom: 10px;
    width: 180px;
    padding: 10px;
    float: right;
}
#content{
    background-color: #9EF5AF;
    margin-bottom: 10px;
    width: 670px;
    padding: 10px;
}
#footer{
    height:80px;
    background-color: #41874E;
    margin-bottom: 10px;
}
.clear{
clear: both;
}
h2{
color: #ffee00;
font: 40px Georgia;
margin-left: 300px;
}
.descript{
width: 300px;
color: #ffee00;
font-style: italic;
margin: 70px 0 0 30px;
  font-size:22px;
}
img{
  position:absolute;
  top:10px;
  left:10px;
}
</style>
</head>
<body>
  <div>
    <div>
      <h2>Шапка сайта</h2>
        <p>Как сделать шапку для сайта с заголовком и описанием</p>
<img src="images/hortic.gif">
    </div>
    <div>Здравствуйте уважаемые будущие веб-мастера!
Мне 55 лет и я рад приветствовать
Вас на своём сайте.
Этот сайт первый, который я разработал самостоятельно,
а до этого умел только входить в интернет.
    </div>
    <div>А мне, учитывая возраст и «опыт», было не просто
понять как раз эти нюансы, они отнимали
больше всего времени.
И я решил написать свой материал, так что-бы другим было легче
сориентироваться в потоке новой информации.
Здесь «разжеваны» все мелочи сопровождающие создание сайта,
мимо которых обычно проскакивают другие авторы.
    </div>
    <div></div>
    <div></div>
  </div>
</body>
</html>

По моему не плохо, надеюсь у вас получится лучше.

Теперь немного информации для тех, у кого сайт расположен на CMS WordPress.

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

Делается это следующим образом. Открываете в консоли «Записи — Добавить новую», переводите редактор в режим HTML, и загружаете то изображение, которое потом будет добавлено в шапку сайта.

В редакторе после загрузки появиться код картинки, его нужно скопировать, а «Запись» можно удалить.

Затем переходим во «Внешний вид — Редактор», и открываем для редактирования файл header.php.

В этом файле, находим строку <div>, и после неё вставляем скопированный код картинки.

После этого обновляем файл, и смотрим, как изображение разместилось в шапке сайта.

Если его нужно куда то подвинуть, то возвращаемся в редактор файла, и в код изображения, в тег img, добавляем атрибут style со свойством margin

style="margin:0 0 0 0;"

И двигаем изображение туда, куда нам нужно.

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

P.S. Если кому-то захочется поменять картинку в шапке сайта на WordPress, и по манипулировать расположением заголовков, то об этом в статье Редактируем тему оформления

Желаю творческих успехов.

Короткий отдыхПеремена

Пьяный никак не может затолкнуть двушку в прорезь автомата. — Напился, — а еще таксист, — сказала прохожая. — С чего взяла? — Шапка таксистская. — Да, — задумчиво произнес пьяный, — а была ондатровая.

Как сделать картинку для шапки в Paint < < < В раздел > > > Как вставить картинку и текст в отдельный блок

 

Рекомендую: Бесплатные HTML шаблоны на русском от TemplateMonster

шапка сайта PNG, векторы, осчс, иконы для свободного скачивания

  • резюме доклада флаер

    резюме доклада флаер «представление элементов брошюра шаблон а4 установленные для рекламы рекламы на сайте

    800*800

  • снежный занос вектор праздники дизайн замороженный лед снежная шапка снежок изолированные иллюстрация, лед, снег, сосулька PNG ресурс рисунок и векторное изображение

    снежный занос вектор праздники дизайн замороженный лед снежная шапка снежок изолированные иллюстрация

    5000*5000

  • день рождения макет сайта, день рождения, С днем рождения, цветной шар PNG и PSD

    день рождения макет сайта

    1200*1200

  • шапка с изображением снеговика, снеговик клипарт, мультфильм снеговик, рождественский снеговик PNG и PSD

    шапка с изображением снеговика

    1200*1200

  • Счастливого Рождества название типография красный с новогодней шапкой, рождество, Christmas, красный PNG и PSD

    Счастливого Рождества название типография красный с новогодней шапкой

    1200*1200

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

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

    5000*5000

  • рождественская снежная шапка, снежная шапка, творческое рождество, в рождественской шапке PNG и PSD

    рождественская снежная шапка

    1200*1200

  • шапка бакалавра, мультфильм шапка бакалавра, шляпа, черная шляпа PNG и PSD

    шапка бакалавра

    1200*1200

  • Красная текстурированная рождественская шапка Шаблон

    Красная текстурированная рождественская шапка

    1200*1200

  • визитная карточка визитная карточка шаблон горизонтальной простой чистой формат шаблона бизнес баннер шаблон для веб сайта Шаблон

    визитная карточка визитная карточка шаблон горизонтальной простой чистой формат шаблона бизнес баннер шаблон для веб сайта

    800*800

  • новогодняя шапка прозрачный элемент материал, здесь, рождество, клаус PNG и PSD

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

    2500*2500

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

    иллюстрации к бизнес решения поисковой оптимизациисовременные вектор иллюстрации концепций для веб сайта и мобильного веб сайтов начать

    2000*2000

  • в рождественской шапке, шляпа, санта - клаус, Santaclaus PNG и PSD

    в рождественской шапке

    1200*1200

  • Векторная иллюстрация фон сайта в разработке, строительный вектор, строительство, сайт PNG ресурс рисунок и векторное изображение

    Векторная иллюстрация фон сайта в разработке

    800*800

  • наушники значок вектор на веб сайте, бизнес, наушники значок, векторная Icon PNG ресурс рисунок и векторное изображение

    наушники значок вектор на веб сайте

    6668*6668

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

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

    5000*5000

  • концепция развития программ и кодирования применение значок для веб сайтов,

    концепция развития программ и кодирования применение значок для веб сайтов

    5000*5000

  • набор иконок для электронной коммерции 36 иконок для веб сайтов и мобильных приложений, Ecommerce, вектор, икона PNG ресурс рисунок и векторное изображение

    набор иконок для электронной коммерции 36 иконок для веб сайтов и мобильных приложений

    4000*4000

  • Новогодняя шапка коммерческий материал, рождество, Новогодняя шапка, шляпа PNG и PSD

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

    2000*2000

  • Рисованной медицинская больница Шапка медсестры, Костюм медсестры, Медицинский работник, Шапка медсестры PNG и PSD

    Рисованной медицинская больница Шапка медсестры

    2000*2000

  • шеф повар шапка, шеф - повар шапка, шляпа, белых PNG ресурс рисунок и векторное изображение

    шеф повар шапка

    1300*1262

  • компьютерное зрение примером концепцииквартиру концепции веб дизайна веб сайтов и мобильных websitevector иллюстрация, резюме, доступ, справочная информация PNG ресурс рисунок и векторное изображение

    компьютерное зрение примером концепцииквартиру концепции веб дизайна веб сайтов и мобильных websitevector иллюстрация

    2000*2000

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

    снег дрейф вектор праздники новогодний дизайн замороженный лед снежная шапка снежный ком изолированных на прозрачном фоне иллюстрации

    5000*5000

  • вектор окончил шапка бакалавра, платье, стиль, издание типа PNG и PSD

    вектор окончил шапка бакалавра

    1200*1200

  • Рейтинг на иллюстрации рейтинг сайта обратной связи и обзор концепции плоская векторная иллюстрация, оценка, оценка, баннер PNG ресурс рисунок и векторное изображение

    Рейтинг на иллюстрации рейтинг сайта обратной связи и обзор концепции плоская векторная иллюстрация

    5000*5000

  • больше любит изометрический примером концепцииизометрический квартиру концепции веб дизайна веб сайтов и мобильных websitevector иллюстрация,

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

    2000*2000

  • Новогодняя шапка коммерческий материал, рождество, Новогодняя шапка, шляпа PNG и PSD

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

    2000*2000

  • Декоративная милая новогодняя шапка, Рождественская шляпа, рог оленя, Кошачий слух PNG и PSD

    Декоративная милая новогодняя шапка

    1200*1200

  • дизайн сайта примером концепцииквартиру концепции веб дизайна веб сайтов и мобильных websitevector иллюстрация, резюме,

    дизайн сайта примером концепцииквартиру концепции веб дизайна веб сайтов и мобильных websitevector иллюстрация

    2000*2000

  • чемпион шапка диаграмма, красный, первое место, в школе PNG и PSD

    чемпион шапка диаграмма

    1200*1200

  • чёрно белый выпуск шапки творческий элемент, потерять шапку, проекция, шапка бакалавра PNG и PSD

    чёрно белый выпуск шапки творческий элемент

    1200*1200

  • набор игровых кнопок и игрового интерфейса для игр или приложений и веб сайтов, Game, кнопка, всплывающее окно игры PNG и PSD

    набор игровых кнопок и игрового интерфейса для игр или приложений и веб сайтов

    5000*5000

  • Векторная иллюстрация фон сайта в разработке, строительство, сайт, веб - PNG ресурс рисунок и векторное изображение

    Векторная иллюстрация фон сайта в разработке

    800*800

  • сообщение веб сайтов, Facebook, Twitter, Facebook иконок PNG и PSD

    сообщение веб сайтов

    1200*1200

  • рождество рождество Новогодняя шапка подарок, Мультяшный стиль, подарок, Новогодняя шапка PNG и PSD

    рождество рождество Новогодняя шапка подарок

    2000*2000

  • Милая новогодняя шапка Красная шапка Шляпа санты Украшение из красных фруктов, Зеленый лист украшения, Счастливого Рождества, шлема PNG и PSD

    Милая новогодняя шапка Красная шапка Шляпа санты Украшение из красных фруктов

    2480*2480

  • кроликовый пасхальный кролик малая красная шапка, кролик, мультфильм, милосердие PNG и PSD

    кроликовый пасхальный кролик малая красная шапка

    1200*1200

  • шеф повар белые шапки моды, белый, шеф - повар шапка, мода PNG ресурс рисунок и векторное изображение

    шеф повар белые шапки моды

    1010*1010

  • Доктор окончания шапка, шапка бакалавра, выпускной, диплом PNG и PSD

    Доктор окончания шапка

    1200*1200

  • участие ставка изометрический иллюстрации концепцииизометрический квартиру концепции веб дизайна веб сайтов и мобильных websitevector иллюстрация, реклама, реклама, анализ PNG ресурс рисунок и векторное изображение

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

    2000*2000

  • мультфильм рождественской шапке элемент, мультфильм, милый, рождество PNG и PSD

    мультфильм рождественской шапке элемент

    1200*1200

  • Анимированные шапки для сайта — делаем крутые шапки на сайте