Рейтинг:  0 / 5

Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна
 

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

Обтекаемая текстом картинка

<div style="float: right; margin: 8px; padding: 6px;"><img src="/templates/lora/img/osen.jpg" border="1px #295C8C dotted" alt="Осень" title="Осень" width="300" height="225" align="right" /></div> 

Для новичков в области вёрстки сайтов сделаю небольшие пояснения кода (ещё год назад совсем ничего не понимала и просила всегда «разжевать» что называется любой код, поэтому теперь при написании статьи пытаюсь изложить всё максимально подробно):

  • float: right; - обтекаемость картинки текстом. Если поставите так, то картинка будет справа, текст слева.
  • float: left; - наоборот, картинка слева от текста.
  • margin: 8px; - отступ от картинки до текста.
  • border="1px #295C8C dotted – рамка границ картинки (толщина, цвет, тип рамки).
  • dotted – точечная рамка;
  • solid – сплошная;
  • dashed – пунктирная рамка;
  • double – двойная рамка;
  • groove – затемнены верхняя и левая внешняя часть рамки и нижняя правая внутренняя часть;
  • ridge – затемнённая рамка;
  • inset – затемнены левая и верхняя части рамки;
  • outset – затемнены правая и нижняя часть рамки.
  • Alt – атрибут, который обязательно нужно заполнять. Если ваша картинка по каким-то причинам не будет показываться в браузере – на месте картинки выведется альтернативный текст. Именно тот текст, что Вы прописали в этом атрибуте.
  • Title – тоже обязательно прописывайте в коде. Этот атрибут тоже немаловажен, как и alt при поисковой оптимизации, пусть и играя второстепенную роль, но всё же! Лучше заполнить, тем более это недолго и несложно. Title – это атрибут, который указывает название картинки (при наведении на неё курсором мышки). Плюс для пользователей будет интересно название картинки, особенно если изображена абстракция или что-то в этом роде.
  • img src – это местонахождение Вашей картинки. Создайте для картинок отдельную папочку, с любым названием, но удобным для Вас и обязательно латинскими буквами (например, «img», «image», «kartinki» и т.п.). И в эту папочку положите все картинки, которые будете использовать на своём сайте.

Так как Я работаю чаще всего с CMS Joomla, поэтому в адресе картинки прописан путь именно для этого движка: img src="/templates/lora/img/osen.jpg". Если Вы тоже работаете с этой прекрасной системой управления контентом, можете скопировать этот код, поменяв только названия шаблона и картинки на свои.