Инструкция как сделать блок для шапки сайта, и расположить в нём фоновое изображение, логотип, заголовок, и описание сайта используя 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.
Измените дизайн заголовка в зависимости от размера экрана. Измените размер окна браузера, чтобы увидеть эффект.
Попробуйте сами »
/ * Стиль ссылок заголовков * /
.header a {
float: осталось;
цвет: черный;
выравнивание текста: по центру;
набивка: 12px;
текст-оформление: нет;
размер шрифта: 18 пикселей;
высота строки: 25 пикселей;
border-radius: 4px;
}
/ * Стиль логотипа ссылка (обратите внимание, что мы установили то же значение line-height и font-size равным предотвращать увеличение заголовка при увеличении шрифта * /
.заголовок a.logo {
font-size: 25 пикселей;
font-weight: жирный;
}
/ * Измените цвет фона при наведении указателя мыши * /
.header a: hover {
цвет фона: #ddd;
цвет: черный;
}
/ * Стиль активная / текущая ссылка * /
. заголовок a.активный {
цвет фона: голубой;
цвет: белый;
}
/ * Плавающий раздел ссылок справа * /
.header-right {
float: right;
}
/ * Добавьте медиа-запросы для оперативности - когда экран имеет ширину 500 пикселей или меньше, размещайте ссылки друг на друга * /
@media screen и (макс. ширина: 500 пикселей) {
.заголовок a {
float: none; Дисплей
: блок;
выравнивание текста: по левому краю;
}
.header-right {
float: none;
}
}
Совет: Перейдите к нашему руководству по CSS Navbar, чтобы узнать больше о панелях навигации.
Jennifer Bourn
Заголовок веб-сайта - это область, которая является одной из наиболее ценных областей вашего веб-сайта. Он проходит в верхней части страницы и появляется на каждой странице вашего веб-сайта, за исключением шаблонов продаж или целевых страниц, из которых он удален.
Цель заголовка вашего веб-сайта - продвигать ваш бренд и сделать ваш сайт мгновенно узнаваемым для тех, кто уже знаком с вами.Для многих компаний заголовок - идеальное место, чтобы эффективно и действенно передать, о чем именно ваш сайт и чем занимается ваш бизнес.
Если вы называете человека знаменитостью или представителем бренда , заголовок должен быть направлен на то, чтобы сразу установить связь между посетителем и человеком. Самый быстрый способ достичь этого ощущения связи , ускорить процесс построения отношений и добиться признания - это использовать счастливую, улыбающуюся фотографию человека в заголовке.Даже если посетитель никогда не встречал вас, простое постоянное наблюдение за вашим лицом со временем заставит их почувствовать, что они уже знают вас.
Примеры дизайна заголовков веб-сайтов с брендингом
Если вы занимаетесь брендом , помните, что заголовок вашего веб-сайта не повлияет на ваш успех в Интернете.Фактически, во многих случаях лучшая стратегия - минимизировать заголовок, чтобы поднять контент на страницу выше, или вообще не использовать заголовок веб-сайта - потому что давайте будем честными, ваш логотип - это не то, что будет убеждать кто-то, чтобы нанять вас, купить у вас или учиться у вас.
Примеры дизайна заголовков веб-сайтов Брендинг бизнеса
Если вы рекламируете вещь, событие, продукт, программу или услугу , подумайте о создании логотипа для основного предложения. Если оно предлагается брендом, упомяните, что предложение «сделано вам…» или «представлено…», чтобы мгновенно повысить доверие. Добавление краткого изложения преимуществ также может помочь посетителям быстрее определить, в нужном ли они месте.
Примеры дизайна заголовков веб-сайтов Брендинг предмета
Заголовок веб-сайта занимает ценное пространство в верхней части окна браузера , что не всегда необходимо.Некоторым компаниям лучше не использовать традиционный заголовок веб-сайта, а вместо этого просто использовать логотип и поднять контент выше на странице. (Нравится наш сайт!)
Примеры веб-сайтов, на которых не используется традиционный заголовок
Правильный заголовок вашего веб-сайта может быть стрессовым и разочаровывающим, потому что существует так много информации - и я уверен, что вам интересно, какая информация заслуживает доверия, какая точная, а какая актуальная.Я уверен, что вы читали сообщения в блогах о том, почему вы должны помещать поле согласия в заголовок своего веб-сайта или почему вы должны размещать свою фотографию в заголовке.
Но позвольте мне дать вам совет: не превращайте чужие обобщения в правила и утверждения о фактах. Большинство рекомендаций по дизайну заголовков веб-сайтов, которые вы найдете в маркетинговых блогах, представляют собой просто рекомендации - это чье-то мнение или повторение чужого мнения. Вместо этого сделайте домашнее задание, соберите информацию, прислушайтесь к мнению других и оцените стратегии самостоятельно.Оцените, какая стратегия заголовков веб-сайта лучше всего подходит для вашего бренда и вашего бизнеса.
Вот несколько советов по дизайну заголовка веб-сайта:
Вы работаете над дизайном шапки вашего сайта? Вы нашли эту запись полезной? У вас есть вопросы по созданию шапки сайта? Если да, мы будем рады услышать от вас в комментариях ниже!
.Узнайте, как создать адаптивный веб-сайт, который будет работать на всех устройствах, ПК, ноутбук, планшет и телефон.
Перед созданием веб-сайта может быть целесообразно нарисовать черновик макета страницы:
Какой-то текст какой-то текст ..
Какой-то текст какой-то текст..
Какой-то текст какой-то текст ..
Какой-то текст какой-то текст ..
HTML - это стандартный язык разметки для создания веб-сайтов, а CSS - это язык, описывающий стиль HTML-документа. Мы объединим HTML и CSS, чтобы создать простую веб-страницу.
Веб-сайт, созданный мной.