Картинка на сайт

Как вставить новогоднюю картинку на сайт

До Нового Года осталось совсем немного. И каждый веб-мастер хотел бы украсить свой сайт. И в этой статье я хочу рассказать о том как вставить новогоднюю картинку на сайт.

На самом деле все очень просто. Здесь я рассмотрю пример со вставкой картинки для сайта на движке WordPress. Если у вас сайт на другой CMS или просто HTML страничка, то действия будут аналогичны. В панели администратора находим пункт “Дизайн” и переходим на вкладку “Редактор”. С правой стороны в списке “Шаблоны” находим шаблон заголовка страницы: (header. php). Нажимаем на него и видим код в окне редактора в центре страницы.

Находим строчку “<div id=”wrapper” align=”center”>”.

Для тех у кого сайт не на движке WordPress, нужно найти открывающий тэг “<body>”. И после вышеуказанной строки или тэга вставляем такой код:

<div style=”z-index: 11; left: 10%; position: absolute; top: 5px”><img height=126px alt=”" src=”http://online-biznes. biz/forum/attachment. php? attachmentid=342&stc=1&d=1355951123? width=83px border=0 ></div>

Теперь разберемся с тем, что мы вставили.

Z-index – Указывает уровень элемента. Т. е. если картинка позиционируется в место где уже есть какой либо элемент, то она будет находится впереди него.

Left:10%; – Позиция картинки относительно левого края окна браузера.

Top:5px; - Позиция картинки относительно верхнего края окна браузера.

Position: absolute; – Задает позицию картинки в окне браузера. При значении “absolute” она занимает абсолютное позиционирование относительно тела сайта. Если вы хотите, чтобы картинка было видна при прокручивании страницы вниз поменяйте это значение на “fixed”. Тогда она зафиксируется относительно окна браузера и при прокрутке страницы будет, как бы перемещаться относительно тела сайта.

Src=”http://online-biznes. biz/forum/attachment. php? attachmentid=342&stc=1&d=1355951123? - указание источника картинки.

Width=83px – Ширина картинки.

Border=0 – Рамка. Значение “0? указывает, что рамки нет. Если поставить какое то значение вместо нуля, появится рамка соответствующей ширины.

После вставки кода сохраните изменения, нажав кнопку “Обновить файл” под окном редактора. Откройте главную страницу сайта и посмотрите куда встало изображение. При необходимости, позиционируйте его в нужное вам место, изменяя параметры: “left” и “top”.

Не забывайте обновлять файл после каждого изменения.

В принципе все. Если кто то захочет загрузить другую картинку, подгоните ее по размерам, загрузите на какой либо хостинг картинок и укажите адрес данной картинки в параметре “src”.

Если данная статья была вам полезна, буду благодарен за комментарии.


Карта сайта


Информационный сайт Webavtocat.ru