Совет 1: Как вставить картинку в шапку

Зачастую при похожем функционале картинка в шапке сайта или блога придает необходимую индивидуальность, а предлагаемые шаблоны, с другой стороны, часто бывают просто "безликими". В картинку, на самый верх удобно ставить логотип фирмы, или картинку с географическим расположением, или определенные фотографии, важные для сайтовладельца.
Вам понадобится
  • Навыки работы в графическом редакторе
Инструкция
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" alt="Пояснение к картинке"
Значение тэгов:
img = image - картинка.
src = source - источник, то есть адрес
border = границы. Если поиграть с этим значением, вокруг картинки будет появляться рамка (обводка)
alt = alternate - текст, который будет подставляться на место картинки в случае, если они выключены из просмотра (для экономии трафика, например). Этот текст, будучи невидимым, все равно считывается поисковиками и может служить хорошим инструментом для раскрутки вашего сайта.Сохранить код с новой картинкой.
При необходимости почистить кэш. Возможно, в него еще загружена прежняя картинка, и он отображает ваш сайт неправильно.

Совет 2: Как вставить картинку в шапку для сайта

Правильно подобранная картинка наилучшим образом характеризует направление сайта, придает ему индивидуальность. К тому же, большинство людей по своей натуре является визуалами, а это значит, что графическое изображение запомнится им куда лучше.
Инструкция
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\1.gif" width="20" height="20" border="5" alt="картинка">. Обратный тег не требуется.
Видео по теме
Совет полезен?
Для удобства работы одновременно с несколькими изображениями в программе Adobe Photoshop, лучше вывести их из режима полноэкранного просмотра с помощью команд «Окно» - «Упорядочить» - «Каскад».
Видео по теме
Обратите внимание
Внимательно смотрите на адреса папок, соблюдайте регистр букв.
Полезный совет
В блогах на WordPress адрес картинки шапки имеет вид: wp-content / themes / images / header.jpg
Здесь надо просто отрисовать новую картинку и сохранить ее под именем header
Источники:
  • Учебный сайт HTML
  • как вставить картинку в заголовок joomla
Поиск
Совет полезен?
Добавить комментарий к статье
Осталось символов: 500