21 января 2015 г.

Как нанести текст поверх картинки

...Я помню голос милых слов, 
Я помню очи голубые,
Я помню локоны златые
Небрежно вьющихся власов. 

К. Н. Батюшков
HTML-код картинки с текстом:
<body bgcolor="#666666" text="#ffffff"></body>
<table align="left" border="1" cellpedding="0" cellspacing="0" class="news" style="width: 260px;" text="#ffffff">
<tbody>
<tr><td background="прямая ссылка на картинку" height="180" text="#ffffff" valign="center"><div align="center" text="#ffffff">
<b>здесь будет текст </b></div>
</td>
</tr>
</tbody></table>
</div>

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



   Далее редактируем HTML-код. Заносим прямую ссылку на нужную картинку (выделено желтым цветом), изменяем размеры картинки (значения выделены розовым цветом). При переключении в текстовый редактор картинка может быть не видна, я в таком случае пользуюсь функцией редактора "просмотр".
   Чтобы убрать рамку вокруг картинки, значение "border="1" (выделено синим цветом) заменим на "0"; лучше это делать в последнюю очередь, чтобы при написании текста хорошо видеть его расположение на картинке.
   Заменяем все значения текста. Удобнее это делать в текстовом редакторе: пишем  текст вместо слов "здесь будет текст" (выделено зеленым цветом) нужным нам шрифтом и цветом (при этом значения текста в HTML-коде изменятся автоматически). Текст по умолчанию располагается по центру, с помощью функций текстового редактора можно  перенести его налево или направо. Также с помощью функций редактора можно под текстом  отметить фон любым цветом.
   Редактируя HTML-код, можно добиться и других эффектов текста. В помощь нам - интернет. Для тех, кто не очень дружен с HTML-сложностями, этот, по-моему, самый простой способ. Исходим из того, что картинка под текстом - это фон.  И не забываем  про замечательный метод: "метод тыка", т.е. изменяем последовательно значения в коде и останавливаемся на нужном варианте (лучше изменять не более, чем 1-2 значения одновременно, чтобы не запутаться).
   Правда, есть еще более простой способ: сделать картинку с текстом поверх ее в любом графическом редакторе и загрузить уже готовую картинку.
   И последнее: закончив создание картинки с нанесенным на нее текстом, переключаемся в HTML-редактор, копируем получившийся HTML-код, сохраняем его в текстовом редакторе на компьютер и используем его дальше как шаблон.



Комментариев нет:

Отправить комментарий

Related Posts Plugin for WordPress, Blogger...