Как красиво можно вставить картинки в тексте


Без картинок в блоге, ну ни как не обойтись. Как вставлять изображения в текст сообщения блога мы уже разобрались здесь. Ну и как оптимизировать картинки . Хочу сегодня предложить ещё 2 варианта , как красиво вставить картинки в текст сообщения. Это, больше, наверно подойдёт для блогов
, где предполагается вставлять не одну , а несколько картинок.
Вариант первый-как вставить две картинки между текстом сообщения. Выглядит это примерно так-смотрим ниже


Ух ты, а вот и наши любимые мультяшные герои появились.И мультик захотелось просмотреть заново.Правда.

Для этого нужно зайти в СООБЩЕНИЯ_СОЗДАТЬ НОВОЕ и в режиме HTML вставляем следующий код и пишем там же текст, который хотим видеть между картинками, ну и соответственно адрес картинки. Можно поменять высоту (height) и ширину (width) на своё.


<table align=center><tr><td><img src="URL АДРЕС КАРТИНКИ слева"></td><td>...ТЕКСТ между картинками ...</td><td><img src="URL АДРЕС КАРТИНКИ справа"></td></tr></table>

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

А ниже код , как   вставить 2- 3 картинки подряд по горизонтали. Таким образом можно создать галерею изображений на странице.

<table border="0" cellpadding="0" cellspacing="8"><tbody>
<tr> <td><img src="URL адрес КАРТИНКИ" /> </td> <td><img src="URL адрес КАРТИНКИ" /> </td> <td><img src="URL адрес КАРТИНКИ" /> </td> </tr></table>


И смотрим, что мы в итоге получаем-


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

Ну, на сегодня достаточно. С кодами разобрались, мультиков насмотрелись. До встречи. Не забудьте добавить пост в закладки, чтобы потом не искать.
Удачи всем нам.


хотите оформить подписку на новые шпаргалки

введите пожалуйста свой email :

6 комментариев:

  1. Этот комментарий был удален администратором блога.

    ОтветитьУдалить
  2. Алла, попробуйте, это просто даже интересно поэкспериментировать.

    ОтветитьУдалить
  3. Здравствуйте Виктория, на этой странице http://www.dogrami-sofia.eu/p/opit_2.html я применила первый вариант и поставила бегущая строка. Появилась серая линия и не знаю как удалить ее. Помогите мне, пожалуйста.

    ОтветитьУдалить
    Ответы
    1. Пепа, бегущая строка тут не при чём. Это на мой взгляд разделительная линия между элементами., как везде . смотрите в стилях CSS line-height.
      мне кажется она вообще не мешает. Посмотрите у меня внизу тоже такие есть. между гаджетами и футером.

      Удалить
  4. Благодаря, Виктория. И аз така си мислех, че разделителната линия е заложена в шаблона. Благодаря още веднъж. Здраве и успехи желая.

    ОтветитьУдалить
    Ответы
    1. Пепа, Да. у Вас ведь тоже сторонний. Не переживайте, она абсолютно не мешает. Вам успехов.

      Удалить

Пользовательский поиск
Foto Saya
My Photo