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

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

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

>

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

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

Основное

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

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

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

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

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

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

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

Доп. модули

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

Вебмастеру

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

…

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

Инструкция как сделать блок для шапки сайта, и расположить в нём фоновое изображение, логотип, заголовок, и описание сайта используя 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 < < < В раздел > > > Как вставить картинку и текст в отдельный блок
 

А ну-ка, что там ещё интересного
Анимация для шапки сайта;
Как создать каркас сайта средствами CSS;
Каркас сайта (продолжение).Запрет наплывания;
Резиновый каркас сайта;

Website Header Image Stok Fotoğraf, Resimler ve Görseller

Görsel

• Görsel
• Fotoğraf
• İllüstrasyon
• Vektörler
• Video

45.

667 website header image stok fotoğraf ve görselini inceleyin veya daha fazla stok fotoğraf ve görsel keşfetmek için yeni bir arama başlatın.

Телефон:

En popüler

düğmeli renkli web afish. пастель деграде renkler ve soyut geometrik zemin ile yatay promosyon afiş koleksiyonu. башлык тасарымы. Canlı купон Шаблону. вектор eps 10 — изображение заголовка веб-сайта стоковые иллюстрации

Düğmeli renkli Web afish. Pastel degrade renkler ve soyut…

бело-синий современный абстрактный широкий баннер с геометрическими фигурами. темно-синий и белый абстрактный фон. — изображение заголовка веб-сайта стоковые иллюстрации

Белый и синий современный абстрактный широкий баннер с геометрическими фигурами.

баннеры tasarım şablonu ve moleküler yapıları ile site için başlıklar. soyut vektör arka planı. bilim, tıp ve yenilik teknolojisi kavramı. dekorasyon веб-сайтов ве diğer fikirler. — изображение заголовка веб-сайта, стоковые иллюстрации

Banners tasarım şablonu ve moleküler yapıları ile site için başlık

синий современный абстрактный широкий баннер с геометрическими фигурами. темно-синий абстрактный фон. — изображение заголовка веб-сайта стоковые иллюстрации

Синий современный абстрактный широкий баннер с геометрическими фигурами. Dark…

bilim ve teknoloji afiş büyük kümesi. kimyasal ve moleküler yapısı — изображение заголовка сайта стоковые иллюстрации

Bilim ve teknoloji afiş büyük kümesi. Kimyasal ve moleküler yapısı

mavi ve sarı renkli geometrik afiş arka plan. yarı ton geometrik şekillerin evrensel eğilimi. современная векторная иллюстрация. — изображение заголовка веб-сайта, стоковые иллюстрации

Mavi ve sarı renkli geometrik afiş arka plan. Yarı ton geometrik ş

vektör soyut tasarım afish. баннерная сеть şablonları kümesi. eps10 вектор. — изображение заголовка веб-сайта стоковые иллюстрации

Vektör soyut tasarım afiş. Баннерная сеть şablonları kümesi. Eps10…

metin, sözcük veya ürün görüntüleme alanı olan koyu mavi minimal doku afişi. afiş, fon, kutlama, yıldönümü, ekran veya herhangi bir arka plan için. — изображение заголовка веб-сайта stok fotoğraflar ve resimler

Metin, sözcük veya ürün görüntüleme alanı olan koyu mavi minimal. ..

bir fotograf için üçgen elemanları ile vektör beyaz afiş kümesi. — изображение заголовка веб-сайта стоковые иллюстрации

Бир fotograf için üçgen elemanları ile vektör beyaz afiş kümesi.

SoyUt afiş Tasarım Web şablonu seti, yatay başlık web afiş — заголовок веб -сайта. стоковые иллюстрации

Fotograf ве farklı geometrik şekiller ве tasarım öğeleri için…

sunu slayt şablonları veya kahraman баннер resimlere веб-siteleri veya uygulamalar için. i̇ş konsept çizimler. современный düz stil — изображение заголовка веб-сайта иллюстрации

Sunu slayt şablonları veya kahraman banner resimlere Web…

sıvı dinamik arka plan web siteleri, açılış sayfası veya iş sunumu için. soyut geometrik duvar kağıdı. sosyal medya başlığı. модный dalgalı şekiller. — изображение заголовка веб-сайта, стоковые иллюстрации

Sıvı Dinamik arka plan web siteleri, açılış sayfası veya iş…

açılış sayfası şablonu. i̇nternet sayfaları vektör ui iniş için веб-сайты düzeni tasarım elemanları altbilgi üstbilgi menusü navigasyon tel kafes — заголовок веб-сайта изображение стоковые иллюстрации

Açılış sayfası şablonu. Интернет Sayfaları вектор уи iniş için…

dijital uygulama, веб-urünleri için kullanılabilir Iş şablonları paketi. веб-сайты tasarımı, sunumlar, portföy, sunum slaytları, el ilanı, broşür, broşür kapağı, yıllık rapor için vektör şablonları. — изображение заголовка веб-сайта, стоковые иллюстрации

Dijital uygulama, web ürünleri için kullanılabilir iş şablonları…

soyut afiş tasarım web şablonu seti, yatay başlık web afiş — website header image stock illustrations

Soyut afiş tasarım web şablonu Seti, Yatay başlık web afiş

arama çubuğu ve büyüteç cam simge тасарими. — изображение заголовка веб-сайта стоковые иллюстрации

Arama çubuğu ve büyüteç cam simge tasarımı.

yatay vektör siyah web banner fotograf için diyagonal renk hatları ve alan ile şablonlar. — изображение заголовка веб-сайта, стоковые иллюстрации

Yatay vektör siyah web banner fotoğraf için diyagonal renk hatları

mutlu çeşitli erkek iş ortakları el sıkışma — website header image stok fotoğraflar ve resimler

Mutlu çeşitli erkek iş ortakları el sıkışma

üstbilgi, banner tasarım şablonları düzenlenebilir düzenini minimalist vektör illustration. daireler ve yuvarlak şekiller ile yaratıcı современный план мави арка. — изображение заголовка веб-сайта стоковые иллюстрации

Üstbilgi, banner tasarım şablonları düzenlenebilir düzenini…

basma düğmesi ile renkli web afişi. soyut sıvı şekilli promosyon afişleri. — изображение заголовка сайта стоковые иллюстрации

Basma düğmesi ile renkli web afişi. Soyut sıvı şekilli promosyon…

halftone style banners set — website header image stock illustrations

Halftone style banners set

i̇ş için ayarlanan açılış sayfaları şablonları — website header image stock illustrations

İş için ayarlanan açılış sayfaları şablonları

online tıp açılış sayfası şablonu veya tıbbi kahraman afish tasarım konsepti. soyut arka plan üzerinde 3d çizgi sanat tarzı insan kalp anahat organ vektör illüstrasyon — изображение заголовка веб-сайта стоковые иллюстрации

Интернет tıp açılış sayfası şablonu veya tıbbi kahraman afiş tasarım

веб-sayfaları düzeni. веб-сайты elemanları arayüzü ui şablon vektör tasarım ile internet tarayıcısı pencereleri — изображение заголовка веб-сайта фондовые иллюстрации

Web sayfaları düzeni. Web SiteSi Elemanları Arayüzü Ui şablon …

iş Isicin açılış Sayfası şablonu — Заголовок веб -сайта.0016 Yaratıcı zihin вектор веб-сайтов açılış sayfası tasarım şablonu

веб-сайтовsayfayı вектор. i̇ş веб-сайтыi. веб-сайты. açılış tasarım şablonu. süreçleri ve office durum. toplantı takım çalışması. i̇nsan kaynakları. çözüm desteklemiyor. i̇llüstrasyon — изображение шапки веб-сайта стоковые иллюстрации

Веб-сайты. İş Веб-сайтыi. Веб-сайты. Açılış…

afiş şablonlar kümesi. современный tasarlamak вектор çizim tasarım. — изображение заголовка веб-сайта стоковые иллюстрации

Afiş şablonlar kümesi. Современный tasarlamak вектор çizim tasarım.

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

Best 500+ Header Pictures | Скачать бесплатные изображения на Unsplash

• A Photophotos 536
• Степка фотосколков 2,6K
• Группа людей 4

Header Images

Фоны

Person

Письменная работа

9003 9003 9003

. ply

. logo

Unsplash+

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

Unsplash+

Разблокировать

мужской костюм

Джоанна Косинска – –––– – – –– ––– –– –––– – –.

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

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

Benjamin Wedemeyer

österreichleadershipheader image

Damian Zaleski

marketingworkoffice

Thought Catalog0003

writingblogBook images & photos

Unsplash logo

Unsplash+

In collaboration with Ahmed

Unsplash+

Unlock

Best soccer picturesFootball imageschild

Hd abstract wallpapersgulf of mexicoEarth images & pictures

Clark Tibbs

signwordsquote

Priscilla Du Preez

WeatherMitrain

Super Snapper

Hd обои для компьютераHd обои для ноутбуказаголовок фото

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

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

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

JESHOOTS. COM

businessstudytech

Дэвид Мартин

чарльстонартур равенел мл. bridgeHq background images

Unsplash logo

Unsplash+

In collaboration with Getty Images

Unsplash+

Unlock

photographyPeople images & picturesstanding

Edgar Chaparro

positanoBeach images & picturesItaly pictures & images

malemansuit

marketingworkoffice

Best soccer обоиФутбол фотографииребенок

weathermistrain

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

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

businessstudytech

positanoПляж фото и картинкиИталия фото

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

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

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

österreichleadershipheader изображение

writingblogBook images & photos

Hd abstract wallpapersgulf of mexicoEarth images & pictures

signwordsquote

Hd computer wallpapersHd laptop wallpapersheader photo

Hd wallpapersHd 3d wallpapersrender

Website backgroundssocialidea

Related collections

Header

375 photos · Curated by Hannes Steiner

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

3.