24 октября 2016

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

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

К. Н. Батюшков

<center><body bgcolor="#666666" text="#ffffff"></body></center>
<center><table align="" 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></center>
</div>

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



здесь будет текст

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



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

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

Related Posts Plugin for WordPress, Blogger...