Як вставити картинку в шапку для сайту

Як вставити картинку в шапку для сайту

Правильно підібрана картинка якнайкраще характеризує напрям сайту, надає йому індивідуальність. До того ж, більшість людей по своїй натурі являються визуалами, а це означає, що графічне зображення запам'ятається ним куди краще.

 

Інструкція

1. Якщо ви тільки створюєте свій сайт на основі готового шаблону, то вставити картинку в його шапку можна за допомогою простої заміни. Для цього досить підібрати відповідне зображення і пересохранить його під ім'ям стандартної ілюстрації. Тут головне підігнати розміри, інакше ваша картинка просто не впишеться в параметри ресурсу. Точно також можна поступити і з готовим сайтом, який має систему управління і вже відправлений до плавання по інтернет-простору.

2. Для редагування картинки краще використати Adobe Photoshop. Майте на увазі, що версії програми можуть бути англомовні і для зручності роботи знадобиться русифікатор. Його можна викачати безкоштовно в інтернеті.

3. Відкрийте в графічному редакторові зображення, яке ви хочете замінити, і виберіть в меню "Зображення" - "Розмір зображення". Запам'ятайте, а краще запишіть значення в пікселах. Можете закривати картинку - вона більше не знадобиться.

4. У меню "Файл" виберіть "Новий", після чого перед вами відкриється форма. Внесіть в неї записані значення розмірів зображення і натисніть "Оки". Ви також можете попутно задати і інші параметри, наприклад, найменування шару або тип утримуваного фону, проте вони не є принциповими.


5. Створіть новий шар ("Шар" - "Новий").

6. Відкрийте в програмі картинку, яку хочете бачити в шапці сайту ("Файл" - "Відкрити").

7. На панелі інструментів виберіть значок "Прямокутна область", виділите з її допомогою картинку.

8. Використайте команду "Скопіювати" з меню "Редагування" і вставте зображення на новий шар підготовленої форми ("Редагування" - "Вклеїти"). Виберіть інструмент "Переміщення" і пересуньте картинку при необхідності.

9. Якщо розмір картинки вийшов більше або менше, то його можна підправити за допомогою команд з меню "Зображення". У будь-якому випадку, параметри основної картинки украй рідко співпадають з потрібними, тому практично завжди залишається порожній простір. Його необхідно заповнити, а для цього краще всього задіяти "Задній план". Наприклад, можна залити одним кольором або скористатися інструментом "Градієнт", а згодом згладити перехід за допомогою освітлення/затемнення, "Пальця", "Губки" і тому подібне

10. Для вставки картинок в мові html є присутнім спеціальний тег <img> з різноманітними атрибутами:

  • src - адреса зображення;
  • height - висота в px;
  • width - ширина в px;
  • border - рамка в px;
  • alt - пояснення до картинки, відображається у користувачів при вимкненій функції прийому зображень.

Наприклад, <img src= images.gif width= 20 height= 20 border= 5 alt= картинка>. Зворотний тег не потрібно.

 



Надрукувати  

Схожі матеріали