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