Как вставить картинку на сайт и украсить сайт на Новый Год?

Здравствуйте, Друзья.

Во-первых, хочу поздравить всех с наступающими праздниками!

До Нового Года осталось совсем немного времени. И если вы являетесь владельцем сайта, почти наверняка у вас возникал вопрос, как украсить сайт к Новому Году?

В этой статье мы постараемся понять, как подготовить сайт к новогодним праздникам. И к другим тоже. Сначала, разберемся, как вставить картинку на сайт? После чего, на живом примере рассмотрим, как украсить сайт на новогодние праздники. Затем попробуем понять,  где мы можем раздобыть украшений для наших целей?

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

Вставить изображение на сайт довольно просто. В статье о том, как сделать картинку ссылкой я показывал код, который можно использовать для вставки. Но это не единственный вариант.

В зависимости от ситуации мы можем воспользоваться одним из двух вариантов вставки изображения.

Первый.

Довольно банальный способ вставки с помощью HTML. И не имеет значения, какой движок вы используете для администрирования своего сайта.

Чтобы вставить картинку в нужном месте прописываем тег img с указанием некоторых параметров. И радуемся результату. Все довольно просто.

Прописываем тег. Это одиночный тег.

<img>

Но при этом мы обязательно должны использовать два атрибута этого тега: src и alt. Src отвечает за путь до картинки. А alt — за ее краткое описание, которое будет выводиться, если у посетителя отключен показ изображений в браузере или по какой-то причине рисунок не загрузился.

То есть должно быть как минимум так:

<img src="путь к картинке" alt="краткое описание изображения">

Кроме того для подгонки рисунка по размеру мы можем использовать еще два параметра: width и height. Width — отвечает за ширину изображения. А height за высоту. Значения данных параметров мы можем указать в любых удобных единицах измерения, которые мы можем использовать. Таких как проценты или пиксели. Это самые распространенные единицы измерения для подобных элементов.

И если мы воспользуемся этими двумя параметрами, код станет выглядеть так:

<img src="путь к картинке" alt="краткое описание изображения" width="ширина" height="высота">

И теперь живой примерчик:

<img src="путь к картинке" alt="Новогодняя елка" width="200" height="250">

А вот так это будет выглядеть:

Здесь стоит отметить, что размеры указывать необязательно. Кроме того мы можем дополнительно оформит рисунок с помощью CSS.

Также, хочу заострить внимание на том, что реальный размер изображения больше. Ширина — 300 пикселей, а высота 350 пикселей. Однако при указании ширины и высоты изображение уменьшается согласно параметрам. А если указать размер только одной стороны, то размер уменьшится прямо пропорционально. То есть если он будет уменьшен с одной стороны на 50 пикселей, то и с другой тоже. При этом изображение не будет растягиваться или сжиматься.

Теперь поговорим о втором способе как вставить картинку на сайт.

Второй.

Второй способ ничуть не сложнее первого. Он осуществляется с помощью CSS, а не HTML как в прошлом примере.

Здесь мы можем воспользоваться универсальным элементом DIV. И прописать для него стили CSS.

Div является блочным элементом и парным тегом. То есть мы должны прописать как открывающий тег, так и закрывающий.

В этом случае мы поступаем следующим образом. Добавим блок div, а затем укажем для него некоторые свойства.

<div></div>

Сразу добавим универсальный атрибут class, чтобы потом указать для него свойства. Значение данного атрибута у меня будет tree.

<div class="tree"></div>

После добавления данного элемента, изменений на странице не произойдет, так как это пустой блок, который никак не будет отображен, так как внутри ничего нет и не указано никаких свойств CSS.

Теперь в файле, который используется для указания свойств (style.css), укажем некоторые свойства. Такие как фоновое изображение блока и его размеры. За фоновую картинку отвечает свойство background-image, в значении которого мы указываем путь к изображению. За высоту отвечает свойство height, а за ширину свойство width.

.tree /*селектор элемента*/
 { /*начало свойств элемента*/
 background-image: url (путь к изображению); /*указываем относительный или абсолютный путь в одинарных или двойных кавычках, или без них. Например, папка с картинками/название и формат картинки.*/
 width: 200px; /*ширина 200 пикселей*/
 height:250px; /*высота 250 пикселей*/
 } /*завершение свойств*/

И выглядеть все это будет так:

Снова вспоминаем, что реальный размер у нас больше на 100 пикселей с каждой стороны. И в этом случае как мы видим, изображение просто обрезается и поэтому может быть видна только его часть. Это следует учитывать при создании картинки и сразу задавать правильные размеры.

Предположим, что у нас размеры сразу подогнаны в графическом редакторе. Тогда, для блока в свойствах необходимо указать реальные размеры картинки.

.tree /*селектор элемента*/
 { /*начало свойств элемента*/
 background: url (путь к изображению) no-repeat; /*указываем относительный или абсолютный путь в одинарных или двойных кавычках, или без них. Например, папка с картинками/название и формат картинки.*/
width: 300px; /*реальная ширина 300 пикселей*/
height:350px; /*реальная высота 350 пикселей*/
 } /*завершение свойств*/

Тогда картинка станет выглядеть так:

Вот такими способами мы можем вставить изображения на сайт.

Украсить сайт на Новый Год!

Естественно, все что мы обсуждали выше мы можем использовать для того чтобы украсить сайт на какой-либо праздник. Но часто вставка изображения не дает желаемого результата, так как его нужно не только добавить, но и расположить картинку в нужном месте. Обо всем конечно поговорить в данной статье не получится, поэтому обсудим один конкретный пример.

Предположим, что мы хотим добавить нашему логотипу новогоднюю шапку. Вот что мы хотели бы получить в конечном итоге.

И так цель у нас есть. Что делать дальше?

Теперь мы вставим изображение, на сайт, используя второй способ. То есть создаем пустой блок DIV, добавим ему универсальный атрибут class со значением shapka. Естественно добавить нужно примерно в необходимое место HTML-кода. Я добавил непосредственно перед выводом самого логотипа, который выводится с помощью тега img. При этом оба эти элемента находятся внутри общего div-контейнера, который нам тоже может пригодиться. То есть выглядит это примерно так:

<div class="block">
<div class="shapka"></div>
<img class="logo" src="" alt="" width="" height="" >
</div>

После того, как мы добавили пустой блок, мы можем прописать для него свойства стилей CSS. Примерно так:

.shapka{
background-image: url(img/shapka.png);
width: 80px;
height: 92px;
}

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

Что же делать теперь? Теперь достаточно определить правильную позицию для нашей шапки, а также определить по отношению, к какому элементу будет происходить позиционирование.

Для того чтобы определить позиционирование нашей шапки относительно других элементов, мы воспользуемся свойством position. А в значении укажем абсолютное позиционирование нашей шапки: absolute. Это позволит, вытащит нужный нам элемент из общей структуры элементов, и мы сможем двигать его независимо от других элементов. В этом случае координаты будут начинать свое начало с левого верхнего угла веб-браузера. После добавления этого свойства:

А свойства CSS станут выглядеть так:

.shapka{
background-image: url(img/shapka.png);
width: 80px;
height: 92px;
position:absolute;
}

Как мы видим, наша шапка позиционируется сейчас относительно левого угла браузера. Однако правильнее будет позиционировать элемент относительно какого-либо другого элемента сайта. Как мы помним у нас логотип, и шапочка находятся внутри еще одного блока. Данный блок для наших элементов является родительским. Именно относительно его мы и будем позиционировать картинку. Для этого, мы также укажем для него свойство position, но со значением relative.

.block{
position:relative;
}

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

Теперь, это уже становится похоже на первоначальный замысел. Осталось только немного подправить расположение и все.

После того, как мы назначили шапке абсолютную позицию, мы можем использовать еще четыре свойства позиционирования, это left, right, top и bottom. То есть с помощью данных свойств мы сможем определить окончательное расположение нашего элемента, сдвигая его в нужном нам направлении.

Мы уже знаем, что отсчет у нас начинается с левого верхнего угла. То есть проще всего использовать два свойства, это top, которое отвечает за позицию относительно верхнего края элемента и left, которое отвечает за позицию слева.

Для начала опустим картинку чуть ниже. Для этого пропишем свойство top и укажем необходимое значение в пикселях. Здесь возможно придется повозиться с подбором значений.

Свойства будут примерно такими (не считая цифровых значений).

.shapka{
background-image: url(img/shapka.png);
width: 80px;
height: 92px;
position:absolute;
top: 28px;
}

Результат уже лучше.

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

Для этого, мы можем использовать либо left — от левого края, либо right — от правого. На самом деле мы можем использовать любое из этих свойств, так как данные свойства могут принимать не только положительные значения, но и отрицательные. То есть, если мы будем использовать left, тогда значение у нас будет отрицательное, значит со знаком «минус». В итоге должен получиться примерно такой css-код:

.shapka{
background-image: url(img/shapka.png);
width: 80px;
height: 92px;
position:absolute;
top: 28px;
left: -30px;
}

Если же будет использовано свойство right:

.shapka{
background-image: url(img/shapka.png);
width: 80px;
height: 92px;
position:absolute;
top: 28px;
right: 230px;
}

И тот и другой результат будет правильным. То же самое касается top и bottom.

В итоге мы получили желаемый результат.

Остается последний вопрос.

Где взять новогодних изображений, чтобы вставить картинку на сайт?

Способов существует масса.

1. Нарисовать самостоятельно.
2. Google-изображения.
3. Яндекс-картинки.
4. Масса других специализированных сайтов, где можно скачать картинки различной тематики.

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

Поэтому, если вы еще не подписались на блог, обязательно это сделайте, сразу под статьей. И не забудьте подтвердить Вашу подписку.

Также, всех желающих приглашаю в свои сообщества и группы в социальных сетях. Список групп можно увидеть в правой колонке блога.

И еще. Все подписчики, подписанные, через форму ниже (не RSS), получат небольшой отчет по итогам года 2013, отчет по ВидеоКурсу и другие интересные новости.

На этом у меня все. Надеюсь, что понятно объяснил, как вставить картинку на сайт и украсить его к новогодним праздникам. Если же нет — добро пожаловать в комментарии, постараюсь помочь ВСЕМ!

Удачи, Вам, Друзья в 2014 году.

До новых статей уже в новом году! :-)