Как вставить картинку в шапку?

Зачастую при похожем функционале картинка в шапке сайта или блога придает необходимую индивидуальность, а предлагаемые шаблоны, с другой стороны, часто бывают просто "безликими". В картинку, на самый верх удобно ставить логотип фирмы, или картинку с географическим расположением, или определенные фотографии, важные для сайтовладельца.

Вам понадобится

• Навыки работы в графическом редакторе

Инструкция

Если у вас стоит менеджер сайта, в него, как правило, включена функция "сменить картинку". В таком случае вам остается только подставить свое.

Внимательно проанализируйте систему управления сайтом. Если нужной функции нет, придется залезать в html код.Если вы работаете с Joomla, ищите файл: mw_joomla_logo.png , он лежит в пaпке images в папке шaблона ( Joomla emplatesназвание_шаблонаimagesmw_joomla_logo.png)Для того, чтобы сменить картинку в html, надо:Открыть html код сайта ("вид" > "просмотр html кода").

Найти "шапку", выделенную тэгами head

Найти картинку, просмотрев в заголовке тэги img

Ссылка на картинку имеет вид: img src="picture.jpg"

Скачать и проанализировать размер и вес картинки.

В графическом редакторе нарисовать свою, такую же по параметрам картинку

Залить картинку на сервер, поместить ее в тот же каталог, где все картинки сайта (или в просто в сеть, или в альбом изображений, главное, чтобы хранилище было долгосрочным)

Снова открыть код сайта.

Подставить адрес вашей картинки вместо той, которая лежит там сейчас.

Для подстраховки можете задать точный размер картинки и невидимые границы следующим образом:

img src="адрес картинки/picture.jpg" height="нужная высота в пискелях" width="нужная ширина в пикселях" border="0" alt="Пояснение к картинке"

Значение тэгов:

img = image - картинка.

src = source - источник, то есть адрес

border = границы. Если поиграть с этим значением, вокруг картинки будет появляться рамка (обводка)

alt = alternate - текст, который будет подставляться на место картинки в случае, если они выключены из просмотра (для экономии трафика, например). Этот текст, будучи невидимым, все равно считывается поисковиками и может служить хорошим инструментом для раскрутки вашего сайта.Сохранить код с новой картинкой.

При необходимости почистить кэш. Возможно, в него еще загружена прежняя картинка, и он отображает ваш сайт неправильно.Совет добавлен 2 декабря 2011 Совет 2: Как вставить картинку в шапку для сайта Правильно подобранная картинка наилучшим образом характеризует направление сайта, придает ему индивидуальность. К тому же, большинство людей по своей натуре является визуалами, а это значит, что графическое изображение запомнится им куда лучше.

Инструкция

Если вы только создаете свой сайт на основе готового шаблона, то вставить картинку в его шапку можно с помощью простой замены. Для этого достаточно подобрать подходящее изображение и пересохранить его под именем стандартной иллюстрации. Здесь главное подогнать размеры, в противном случае ваша картинка попросту не впишется в параметры ресурса. Точно также можно поступить и с готовым сайтом, который имеет систему управления и уже отправлен в плавание по интернет-пространству.

Для редактирования картинки лучше использовать Adobe Photoshop. Имейте в виду, что версии программы могут быть англоязычные и для удобства работы потребуется русификатор. Его можно скачать бесплатно в интернете.

Откройте в графическом редакторе изображение, которое вы хотите заменить, и выберите в меню «Изображение» - «Размер изображения». Запомните, а лучше запишите значения в пикселах. Можете закрывать картинку – она больше не понадобится.

В меню «Файл» выберите «Новый», после чего перед вами откроется форма. Внесите в нее записанные значения размеров изображения и нажмите «Ок». Вы также можете попутно задать и другие параметры, например, наименование слоя или тип содержимого фона, однако они не являются принципиальными.

Создайте новый слой («Слой» - «Новый»).

Откройте в программе картинку, которую хотите видеть в шапке сайта («Файл» - «Открыть»).

На панели инструментов выберите значок «Прямоугольная область», выделите с ее помощью картинку.

Используйте команду «Скопировать» из меню «Редактирование» и вставьте изображение на новый слой подготовленной формы («Редактирование» - «Вклеить»). Выберите инструмент «Перемещение» и передвиньте картинку при необходимости.

Если размер картинки получился больше или меньше, то его можно подправить с помощью команд из меню «Изображение». В любом случае, параметры основной картинки крайне редко совпадают с требуемыми, поэтому практически всегда остается пустое пространство. Его необходимо заполнить, а для этого лучше всего задействовать «Задний план». Например, можно залить одним цветом или воспользоваться инструментом «Градиент», а впоследствии сгладить переход с помощью осветления/затемнения, «Пальца», «Губки» и т.п.

Для вставки картинок в языке html присутствует специальный тег с разнообразными атрибутами:• src – адрес изображения;• height – высота в px;• width – ширина в px;• border – рамка в px;• alt – пояснение к картинке, отображается у пользователей при выключенной функции приема изображений.Например, . Обратный тег не требуется.

Для удобства работы одновременно с несколькими изображениями в программе Adobe Photoshop, лучше вывести их из режима полноэкранного просмотра с помощью команд «Окно» - «Упорядочить» - «Каскад». Как вставить картинку в шапку для сайта - версия для печати

Оцените статью!