У цій статті розглянемо, як зробити шапку сайту, і розташувати на ній заголовок, і опис сайту
Насамперед для шапки сайту потрібна картинка. Її найкраще зробити в фотошопі.
А тим, хто не володіє цим редактором, я пропоную найпростіший спосіб виготовлення картинки для шапки сайту , В наявних на всіх Windows за замовчуванням Paint.
Ширину картинки зробимо 900px, по ширині сайту, висоту - 200px. У Вас звичайно можуть бути свої розміри, аби ширина картинки збігалася з шириною сайту (оболонка wrapper), висота на Ваш розсуд.
Як тільки картинка буде готова, і розміщена в папці images каталогу сайту , візьмемо каркас сайту , Створений на попередній сторінці, і приступимо до встановлення шапки на сайт.
СSS:
У селекторі #header прибираємо задану йому висоту, і прописуємо ширину і висоту зробленої картинки.
#header {
width: 900px; - ширина
height: 200px; - висота
background-color: # 25B33f; - фон
margin-bottom: 10px; - відступ знизу
}
Потім вставляємо саму картинку.
#header {
width: 900px;
height: 200px;
background-color: # 25B33f;
margin-bottom: 10px;
background-image: url (images / i8.png) - картинка
}
Властивість background-color вказується на той випадок, якщо картинка раптом, в будь-якому браузері відвідувача, не відобразиться.
Якщо картинка розмістилася з будь-яким зміщенням, і потрібно її підправити, то сюди ж додається властивість background-position
HTML
Тепер дійшла черга до заголовка і опису сайту. Для цього прописуємо в тезі body блок div з ідентифікатором id = "header", і в ньому два заголовка h1 і h3, в які і вставляємо назву сайту і його опис
<Div id = "header">
<H1> Шапка сайту <h1>
<H3> Як зробити шапку для сайту з заголовком і описом </ h3>
</ Div>
Подивимося, що у нас виходить.
Тепер, додамо вид заголовку і опису. Створюємо для них два селектора, і прописуємо наступні властивості:
h1 {
color: # ffee00; - колір заголовка
font: 40px Georgia; - шрифт
margin-left: 300px; - відступ зліва
}
h3 {
width: 200px; - ширина
color: # ffee00; - колір
font -style: italic; - курсив
margin: 70px 0 0 30px; - розташування
}
Для h3 задамо ширину в 200 пікселів, щоб він не розтягнувся на всю картинку. Відступами можна маніпулювати в залежності від того, в якому місці шапки буде зручніше розмістити текст.
Подивимося результат.
На мою думку, дуже навіть симпатично.
Узагальнимо код цієї сторінки.
<! 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 {
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;
}
h1 {
color: # ffee00;
font: 40px Georgia;
margin-left: 300px;
}
h3 {
width: 200px;
color: # ffee00;
font-style: italic;
margin: 70px 0 0 30px;
}
</ Style>
</ Head>
<Body>
<Div id = "wrapper">
<Div id = "header">
<H1> Шапка сайту </ h1>
<H3> Як зробити шапку для сайту з заголовком і описом </ h3>
</ Div>
<Div id = "sidebar"> Привіт шановні майбутні веб-майстри!
Мені 55 років і я радий вітати
Вас на своєму сайті.
Цей сайт перший, який я розробив самостійно,
а до цього вмів тільки входити в інтернет.
</ Div>
<Div id = "content"> А мені, з огляду на вік і «досвід», було не просто
зрозуміти як раз ці нюанси, вони забирали
найбільше часу.
І я вирішив написати свій матеріал, так що-б іншим було легше
зорієнтуватися в потоці нової інформації.
Тут «розжовані» все дрібниці супроводжують створення сайту,
повз яких зазвичай проскакують інші автори.
</ Div>
<Div class = "clear"> </ div>
<Div id = "footer"> </ div>
</ Div>
</ Body>
</ Html>
Є ще один варіант вставки картинки в шапку сайту. Можна вставити адресу картинки в блок <div id = "header"> перед заголовком <h1> (наприклад, адресу моєї картинки
<Img src = "http://trueimages.ru/img/0b/d0/06bb1a05753316ac3c567d047ba.png">
В такому випадку, в селекторі #header прибираємо властивість background-image: (../images/position.png); , І прописуємо position: relative.
А в селекторах тегів h1 і h3, прописуємо властивість position: absolute; .
При цьому необхідно буде змінити відступи для заголовків. Детальніше про те, чому так робиться, можна прочитати в статті відносне позиціонування
#header {
width: 900px;
heigh t: 200px;
background-color: # 25B33f;
margin-bottom: 10px;
position: relative;
}
h1 {
position: absolute;
color: # ffee00;
font: 40px Georgia;
left: 300px;
}
h3 {
position: absolute;
width: 200px;
color: # ffee00;
font-style: italic;
top: 70px;
left: 30px;
}
Все інше залишається без зміни.
Тепер трохи інформації для тих, у кого сайт розташований на CMS WordPress.
На WordPress встановлюється готова тема, з готовою шапкою, але припустимо, Вам захотілося в цю готову шапку, додати який-небудь свій логотип, або ще яке зображення.
Робиться це в такий спосіб. Відкриваєте в консолі «Записи - Додати нову», переводите редактор в режим HTML, і завантажуєте то зображення, яке потім буде додано в шапку сайту.
У редакторі після завантаження з'явитися код картинки, його потрібно скопіювати, а «Запис» можна видалити.
Потім переходимо в «Зовнішній вигляд - Редактор», і відкриваємо для редагування файл header.php.
У цьому файлі, знаходимо рядок <div id = "header">, і після неї вставляємо скопійований код картинки.
Після цього оновлюємо файл, і дивимося, як зображення розмістилося в шапці сайту.
Якщо його потрібно кудись посунути, то повертаємося в редактор файлу, і в код зображення, в тег img, додаємо атрибут style зі властивістю margin
style = "margin: 0 0 0 0;"
І рухаємо зображення туди, куди нам потрібно.
Ось ми і створили першу сторінку сайту. Після доопрацювання шапки, і ще дещо яких доробок, описаних далі, можна цей файл назвати index.html, і викласти його на хостинг. Потім, за цим же шаблоном, створюються інші сторінки, створюється меню і так далі. І сайт починає своє життя в інтернеті.
PS Якщо комусь захочеться поміняти картинку в шапці сайту на WordPress, і по маніпулювати розташуванням заголовків, то про це в статті Редагуємо тему оформлення
Бажаю творчих успіхів.
зміна
П'яний ніяк не може заштовхнути двушку в проріз автомата. - Напився, - а ще таксист, - сказала перехожа. - З чого взяла? - Шапка таксистська. - Так, - задумливо мовив п'яний, - а була ондатрова.
Як зробити картинку для шапки в Paint <<< В розділ >>> Як вставити картинку і текст в окремий блок
рекомендую: Готові HTML шаблони російською
З чого взяла?