Пишите на сайтах красиво!
УРОК «Как сделать надпись на картинке с помощью HTML»
Дорогие друзья!
Иногда возникает ситуация, когда у нас есть красивая картинка и нужно написать на ней текст в определённом месте, не прибегая к помощи графических редакторов (Paint.NET, Photoshop или др.), чтобы, к тому же, если возникнет необходимость, иметь возможность быстро отредактировать этот текст в любой момент.
Принцип создания таких изображений следующий:
мы создаём таблицу по размеру нашей картинки и эту картинку используем в качестве фона таблицы. Затем определяем область размещения текста (то есть смотрим, где лучше всего сделать надпись на картинке), создаём необходимое количество ячеек и столбцов внутри таблицы и подгоняем их размер так, чтобы наш текст оказался в нужном месте. При этом мы можем выравнивать его так, как нужно, задать ему фон и размер, чтобы вся "конструкция" выглядела привлекательно.
Вот для таких случаев мы можем воспользоваться нашими умениями кодировать таблицы. Как сделать таблицу вы можете прочитать в уроке " Как сделать каркас таблицы".
Пример:
|
Всегда вместе! |
|
Скучаю!
Мечтаю!
Целую!
Люблю!
Жду!
|
|
Код картинки:
Теперь объясню, что я сделала:
-
У меня есть красивая картинка размером 414 на 376 пикселей. Размер я узнала, когда открыла её в Paint.NET. Я хочу сделать из неё открытку и разместить на сайте, например. Но я вижу, что эта картинка имеет расширение .gif, то есть она анимированная и, если я просто напишу на ней в графическом редакторе что-то, то она перестанет быть анимированной, к сожалению. Что делать? Будем делать таблицу!
-
Посмотрим, какой именно она должна быть. Я хочу сделать надпись сверху и несколько слов слева. Эти несколько слов вполне могут располагаться в одной ячейке в одной строке, если каждое из них поместить в свой контейнер <p>...</p>. Справа у нас изображение, значит, нам будет достаточно сделать таблицу из 2 строк, причём верхняя ячейка должна охватывать 2 нижние.
-
Напишем каркас таблицы:
-
Теперь пропишем размеры таблицы по размерам картинки и саму картинку как фон. Я загрузила картинку на сайт-хостинг и использовала полученную ссылку. Также зададим высоту верхней строки - получится примерно 30 пикселей. Кроме того, сразу введём в ячейки нужный текст:
На данный момент наша картинка выгладит вот так:
|
Всегда вместе! |
|
Скучаю! Мечтаю! Целую! Люблю! Жду! |
|
-
Мы видим, что у нас всё получилось, как нужно, но текст пока не оформлен и прижат к краю таблицы. Теперь нужно задать в открывающем теге таблицы отступ cellpadding, чтобы немного отодвинуть текст от краёв. Кроме того, нужно заключить каждое слово в контейнер <p>, чтобы они были порознь, а не на одной строке, а также получили небольшое расстояние друг между другом:
-
И, наконец, с помощью тега font и его атрибутов оформим текст курсивом, зададим ему тёмно-серый цвет и нужный размер. В результате получится то, что мы и увидели в начале этого урока.
Кроме того, используя таблицу, вы можете создать рамку определённого цвета вокруг своей картинки. Для этого таблицу с картинкой нужно будет вложить в другую таблицу с одной ячейкой, задать фон нужного цвета для этой таблицы (атрибут bgcolor) и отступ от границы ячейки до её содержимого (атрибут cellpadding), чтобы проявилась рамка. В этом случае мы не можем прописать рамку и её цвет в таблице картинки, так как, если мы напишем любое значение border, отличное от нуля, то у нас вокруг ячеек таблицы появятся границы, а нам это не нужно.
О том, как вкладывать одну таблицу в другую, вы сможете прочитать в специальном уроке.
Точно так же, играя ячейками и строками, например, сдалав одну строку в 2 ячейки, можно написать текст на картинке в 2 колонки. Экспериментируйте и учитесь.
http://webmaster-html.ucoz.ru/publ/html_tekhnologi...s_pomoshhju_html_quot/3-1-0-35