Як вставити картинку в шапку.

Найчастіше при схожому функціоналі картинка в шапці сайту або блогу додає необхідну індивідуальність, а пропоновані шаблони, з іншого боку, часто бувають просто "безликими". В картинку , на самий верх зручно ставити логотип фірми, або картинку з географічним розташуванням, або певні фотографії, важливі для сайтовладельца.
Вам знадобиться
  • Навики роботи в графічному редакторі
Інструкція
1
Якщо у вас стоїть менеджер сайту, в нього, як правило, включена функція "змінити картинку ". В такому випадку вам залишається тільки підставити свое.Внімательно проаналізуйте систему управління сайтом. Якщо потрібної функції немає, доведеться залазити в html код.Еслі ви працюєте з Joomla, шукайте файл: mw_joomla_logo.png", він лежить в пaпке images в папці шaблона (Joomla emplatesназвание_шаблонаimagesmw_joomla_logo.png") Для того, щоб змінити картинку в html, треба: Відкрити html код сайту ("вид"> "перегляд html коду"). Знайти "шапку", виділену тегами headНайті картинку , переглянувши в заголовку теги imgСсилка на картинку має вигляд: img src="picture.jpg"
2
Завантажити та проаналізувати розмір і вага картінкі.В графічному редакторі намалювати свою, таку ж за параметрами картинку Залити картинку на сервер, помістити її в той же каталог, де всі картинки сайту (або в просто в мережу, або в альбом зображень, головне, щоб сховище було довгостроковим)
3
Знову відкрити код сайта.Подставіть адресу вашої картинки замість тієї, яка лежить там сейчас.Для підстраховки можете задати точний розмір картинки і невидимі кордони таким чином: img src="адреса картинки/picture.jpg" height="потрібна висота в піскелей" width="потрібна ширина в пікселях "border="0 "Значення тегів: img = image - картінка.src=source - джерело, тобто адресborder=кордону. Якщо пограти з цим значенням, навколо картинки з'являтиметься рамка (обведення) alt = alternate - текст, який буде підставлятися на місце картинки в разі, якщо вони вимкнені з перегляду (для економії трафіку, наприклад). Цей текст, будучи невидимим, все одно зчитується пошукачами і може служити хорошим інструментом для розкрутки вашого сайта.Сохраніть код з новою картінкой.Прі необхідності почистити кеш. Можливо, в нього ще завантажена колишня картинка, і він відображає ваш сайт неправильно.
Відео по темі
 http://www.youtube.com/watch?v=qBUIi0cnEFg
Зверніть увагу
Уважно дивіться на адреси папок, дотримуйте регістр букв.
Корисна порада
В блогах на WordPress адресу картинки шапки має вигляд: wp-content/themes/images/header.jpg"Здесь треба просто отрисовать нову картинку і зберегти її під ім'ям header
Правильно підібрана картинка щонайкраще характеризує напрям сайту, надає йому індивідуальність. До того ж, більшість людей по своїй натурі є візуалами, а це означає, що графічне зображення запам'ятається їм куди краще.
Інструкція
1
Якщо ви тільки створюєте свій сайт на основі готового шаблону, то вставити картинку в його шапку можна за допомогою простої заміни. Для цього достатньо підібрати відповідне зображення і перезберегти його під ім'ям стандартної ілюстрації. Тут головне підігнати розміри, в іншому випадку ваша картинка просто не впишеться в параметри ресурсу. Точно також можна вчинити і з готовим сайтом, який має систему управління і вже відправлений у плавання по інтернет-простору.
2
Для редагування картинки краще використовувати Adobe Photoshop. Майте на увазі, що версії програми можуть бути англомовні і для зручності роботи буде потрібно русификатор. Його можна скачати безкоштовно в інтернеті.
3
Відкрийте в графічному редакторі зображення, яке ви хочете замінити, і виберіть в меню «Зображення» - «Розмір зображення». Запам'ятайте, а краще запишіть значення у точках. Можете закривати картинку - вона більше не знадобиться.
4
В меню «Файл» виберіть «Новий», після чого перед вами відкриється форма. Внесіть в неї записані значення розмірів зображення і натисніть «Ок». Ви також можете попутно задати і інші параметри, наприклад, найменування шару або тип вмісту фону, проте вони не є принциповими.
5
Створіть новий шар («Шар» - «Новий»).
6
Відкрийте в програмі картинку, яку хочете бачити в шапці сайту («Файл» - «Відкрити»).
7
На панелі інструментів виберіть значок «Прямокутна область», виділіть з її допомогою картинку.
8
Використовуйте команду «Скопіювати» з меню «Редагування» і вставте зображення на новий шар підготовленої форми («Редагування» - «Вклеить»). Виберіть інструмент «Переміщення» та пересунути картинку при необхідності.
9
Якщо розмір картинки вийшов більше або менше, то його можна підправити за допомогою команд з меню «Зображення». У кожному разі, параметри основної картинки вкрай рідко збігаються з необхідними, тому практично завжди залишається порожній простір. Його необхідно заповнити, а для цього найкраще задіяти «Задній план». Наприклад, можна залити одним кольором або скористатися інструментом «Градієнт», а згодом згладити перехід за допомогою освітлення/затемнення, «пальці», «Губки» і т.п.
10
Для вставки картинок в мові html присутній спеціальний тег . Зворотний тег не потрібно.
Корисна порада
Для зручності роботи одночасно з декількома зображеннями в програмі Adobe Photoshop, краще вивести їх з режиму повноекранного перегляду за допомогою команд «Вікно» - «Упорядкувати» - «Каскад».