SdelaemBlog

Создание Сайтов и их настройка

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

Главная Статьи Полезное Как вставить картинку на сайт и украсить сайт на Новый Год?
#Полезное

25 декабря 2013

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

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

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

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

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

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

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

Первый.

Довольно банальный способ вставки с помощью 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 году.

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

Оставьте свой коммент
ДОСТАВКА СТАТЕЙ ПОЧТОЙ, на дом

Ознакомьтесь с условиями хранения ваших данных

Комментарии

  1. Михаил Веб

    @ Александр Иванович:
    Да не за что. Разобраться-то получилось?
    Вам спасибо за поздравления.
    И Вас с Наступающим (пять с половиной часов у нас осталось :)) желаю всего самого наилучшего и преуспеть во всем. Надеюсь, сбудутся все Ваши мечты в будущем году.
    Обращайтесь. Всегда рад ответить на Ваши вопросы. :-)

    4 года назад31.12.2013 Ответить
  2. Михаил Веб

    @ Ирина:
    Можно и таким образом, но это не совсем правильно, так как медиафайлы правильнее использовать для статей. Однако, если это удобно никто Вам не запретит так делать :-)

    4 года назад31.12.2013 Ответить
  3. Александр Иванович

    Большое спасибо за то, что ответили и прошу прощения за задержку — отсутствовал инет.
    Мой сайт на движке WordPress.
    Ну и самое важное!

    Поздравляю Вас и Вашу семью с наступающим Новым годом!

    Желаю всем Вам самого дорогого на Земле, чего не купишь ни за какие деньги — это ЗДОРОВЬЯ!

    С большим уважением, А.И.

    4 года назад30.12.2013 Ответить
  4. Ирина

    а еще путь к картинке можно увидеть в разделе -медиафайлы (если сайт на Вордпресс) при загрузке видно ссылку , и потом в любой момент можно зайти в любой медиафайл для редактирования и увидеть ссылку. от ссылки отрезать ненужное h t t p://domain.ru/ а остальное и будет путь к картинке

    4 года назад29.12.2013 Ответить
  5. Михаил Веб

    @ Александр:
    Здравствуйте.
    Все очень просто. Путь зависит от месторасположения картинки. Вам проще будет разобраться, если напишите какой движок используете, или чистый HTML?
    Например, если у вас wordpress, то обычно изображения находятся в папке images (img), которая находится в папке с используемым шаблоном. Вот в эту папку необходимо загрузить изображение, а затем в коде прописать путь до него. Выглядеть он будет примерно так:

    < ?php bloginfo('template_directory'); ?>/img/картинка.png

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

    4 года назад27.12.2013 Ответить
  6. Александр

    Подскажите, а где брать путь к картинке?

    4 года назад26.12.2013 Ответить

Чтобы оставить комментарий, заполните, пожалуйста форму ниже:

Смайлы

Нажимая на кнопку "Комментировать" Вы согласшаетесь с условиями политики конфиденциальности

Обязательно для Заполнения!

Обязательно для Заполнения!

Проверка комментариев включена. Прежде чем Ваши комментарии будут опубликованы пройдет какое-то время.

Отправить жалобу разработчику сайта

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

[contact-form-7 404 "Not Found"]

Спасибо большое за поддержку проекта! :)

Для поддержки проекта, выберите убодный способ для оплаты: