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

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

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

Інструкція

  1. Якщо ви тільки створюєте свій сайт на основі готового шаблону, то вставити картинку в його шапку можна за допомогою простої заміни. Для цього досить підібрати відповідне зображення і перезберегти його під ім’ям стандартної ілюстрації. Тут головне підігнати розміри, інакше ваша картинка просто не впишеться в параметри ресурсу. Точно також можна вчинити і з готовим сайтом, який має систему управління і вже відправлений в плавання по інтернет-простору.
  2. Для редагування картинки краще використовувати Adobe Photoshop. Майте на увазі, що версії програми можуть бути англомовні і для зручності роботи буде потрібно русифікатор. Його можна завантажити безкоштовно в інтернеті.
  3. Відкрийте в графічному редакторі зображення, яке ви хочете замінити, і виберіть у меню «Зображення» — «Розмір зображення». Запам’ятайте, а краще запишіть значення в пікселях. Можете закривати картинку — вона більше не знадобиться.
  4. У меню «Файл» виберіть «Новий», після чого перед вами відкриється форма. Внесіть в неї записані значення розмірів зображення і натисніть «Ок». Ви також можете попутно задати і інші параметри, наприклад, найменування шару або тип вмісту фону, однак вони не є принциповими.
  5. Створіть новий шар («Шар» — «Новий»).
  6. Відкрийте в програмі картинку, яку хочете бачити в шапці сайту («Файл» — «Відкрити»).
  7. На панелі інструментів виберіть значок «Прямокутна область», виділіть з її допомогою картинку.
  8. Використовуйте команду «Скопіювати» з меню «Редагування» і вставте зображення на новий шар підготовленої форми («Редагування» — «Вставити»). Виберіть інструмент «Переміщення» і пересуньте картинку при необхідності.
  9. Якщо розмір картинки вийшов більше або менше, то його можна підправити за допомогою команд з меню «Зображення». У кожному разі, параметри основної картинки вкрай рідко збігаються з необхідними, тому практично завжди залишається порожній простір. Його необхідно заповнити, а для цього найкраще задіяти «Задній план». Наприклад, можна залити одним кольором або скористатися інструментом «Градієнт», а згодом згладити перехід за допомогою освітлення / затемнення, «пальці», «Губки» і т.п.
  10. Для вставки картинок в мові html присутній спеціальний тег з різноманітними атрибутами:

    • src — адресу зображення;

    • height — висота в px;

    • width — ширина в px;

    • border — рамка в px;

    • alt — пояснення до зображення, відображається у користувачів при вимкненій функції прийому зображень.

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

Корисні поради

Для зручності роботи одночасно з декількома зображеннями в програмі Adobe Photoshop, краще вивести їх з режиму повноекранного перегляду за допомогою команд «Вікно» — «Упорядкувати» — «Каскад».