# Картинки для украшения раздела

Лана

Меня нет в
путеводителе по СИ!
Хочу славы
и денег!

ЛанаКартинки для украшения разделаOrigin: http://samlib.ru/s/sorrelx_a/fishki.shtmlСоздан: 06/11/2009, изменен: 06/11/2009, 17kСправочник: ИзобретательствоSeries: Оформление текстов на СИ

Меня нет в путеводителе по СИ!

Хочу славы и денег!

============================================================

Честно говоря, не знаю, что такое "фишки" и в чём их предназначение, но если это обычные маленькие картинки с подписями, которые служат для украшения странички, могу предложить способ замены этих "фишек" табличками. Предположим, у вас нет никакого графического редактора, с фотошопом вы не знакомы, и картинки подписывать не умеете. А стандартные "фишки" - это слишком скучно, и вы, как говорится, "достойны большего". Тогда выбираете в сети понравившуюся картинку, например, такую: http://powerclip.ru/uploads/photos/3242.jpg. Сохраняете её себе и уменьшаете до нужных размеров. А можете сохранением и уменьшением не заморачиваться, а задать нужный размер изображения прямо "на месте". Для этого создаёте таблицу с границей: table border="1", выравниваете по-середине: align="center". Далее приступаете к обработке ячейки. Выбираете цвет, который вам наиболее симпатичен, и заливаете им ячейку, например, чёрный : td bgcolor="#000000", задаёте требуемую ширину ячейки, например, 60 пикселей: width="60". Теперь вставляете саму картинку (её адрес) и формируете нужный размер. По ширине картинка должна быть такой же, как и ширина ячейки, то-есть 60 пикселей, а высоту height делаете как вам нужно. Пусть она будет 100 пикселей: height="100". Теперь осталось подписать картинку. Для этого в ячейке создаем блок: <font ...> Текст . Внутри <font ...> задаём шрифт, нужный размер шрифта и его цвет. Стандартный размер - это size="3". Уменьшим его до "2". Цвет текста будет белым: color="#FFFFFF", а сам шрифт: face=Arial. Сформировали блок font, теперь впишем в него нужный текст. Чтобы на каждую строчку приходилось по одному слову, в конце первого слова поставим тег переноса на новую строку . Осталось закрыть все теги у сформированной таблицы, и картинка в рамке готова:

Пример 1. <table border="1" align="center"> <tr> <td bgcolor="#000000" width="60">

> <div align="center">

> <font size="2" color="#FFFFFF" face=Arial>

> пишу

> фэнтези

Результат:

пишу фэнтези

Если полученный результат не удовлетворяет (большая картинка, или надпись велика) можно уменьшить размеры:

Пример 2. <table border="1" align="center"> <tr> <td bgcolor="#000000" width="50">

> <div align="center">

> <font size="1" color="#FFFFFF" face=Arial>

> пишу

> романтику

Красным в Примере 2 отмечены изменения, в результате которых табличка-картинка стала выглядеть так:

пишу романтику

Можно значительно разнообразить такие таблички, используя в качестве картинок - анимированные картинки. Ищем подходящую гиф-картинку, желательно сразу маленького размера, например:

Можно, конечно, и большую картинку ужать в таблице до нужного размера, но тогда нужно тщательно соблюдать пропорции, дабы картинка не перекосилась, или же перекос не был заметен. Например, так:

Вставляем адрес этой картинки в Пример 2 и изменяем подпись и размер букв:

пишу детям

Если анимированная картинка совсем маленькая, то её размеры можно не задавать. Табличка сама "обтянет" эту картинку:

Пример 3. <table border="1" align="center" bgcolor="#999999"> <tr> <td>

> <div align="center">

> <font size="2" color="#FFFF00" face=Arial>

> Новичок!

В данном примере вообще убран параметр width а таблица залита серым фоном вместе с рамкой. Для этого параметр bgcolor="#999999"вставлен прямо в блок table, а не в блок ячейки td. И в результате получаем:

Новичок!

Если же есть желание несколько отдалить текст от картинки, то нужно и перед первым словом поставить тег
:

Пример 4. <table border="1" align="center" bgcolor="#FFFFFF"> <tr> <td width="40">

> <div align="center">

> <font size="2" color="#000000" face=Arial>

> Был
> в Топе!

В дополнение к сказанному здесь опять задана ширина ячейки. При этом не обязательно задавать точный размер, можно задать заведомо меньший ширины картинки. Это не позволит табличке "разползтись".

Был в Топе!

Ещё один способ создания таких картинок табличек - заливка ячейки фоном. В этом случае текст можно распологать по центру ячейки. А в качестве фона можно использовать любую маленькую картинку. При этом вместо параметра заливки цветом bgcolor в тег <td> или <table> надо всавить параметр заливки фоном background. И параметр здесь уже не нужен:

Пример 5. <table border="1" align="center" background="http://media.meta.ua/files/pic/0/22/85/30v0NmMlrw.jpg"> <tr> <td width="130" height="50">

> Зарисовки
> о природе

Результат:

Зарисовки о природе

Теперь сформированные таблички-картинки можно разместить в аннотации к разделу или произведению. К сожалению, их нельзя вытянуть в строчку, как рисунки. При размещении несколькох табличек они все будут одна над другой. Но этого можно избежать, если поместить их внуть таблицы с несколькими ячейками, без фона и границ:

Пример 6. <table width="350" border="0" align="center"> <tr> <td width="20%">

> <table border="1" align="center">

> <tr>

> <td bgcolor="#000000" width="50"> <div align="center"><font size="2" color="#FFFFFF" face=Arial> пишу

> детям

<td width="20%">

> <table border="1" align="center" bgcolor="#FFFFFF">

> <tr>

> <td>

> <div align="center"><font size="2" color="#000000" face=Arial>
> Был

> в Топе!

<td width="20%">

> <table border="1" align="center" bgcolor="#FFFFFF">

> <tr>

> <td>

> <div align="center"><font size="2" color="#000000" face=Arial>
> люблю

> критику

<td width="20%">

> <table border="1" align="center" bgcolor="#999999">

> <tr>

> <td>

> Новичок!

<td width="20%">

> <table border="1" align="center">

> <tr bgcolor="#333333">

> <td width="50">

> <div align="center"><font size="1" color="#FFFFFF" face=Arial> пишу

> романтику

Здесь красным выделены отдельные таблички-картинки, которые требуется разместить. Результат:

пишу детям

Был в Топе!

люблю критику

Новичок!

пишу романтику

Эти картинки-таблички можно сделать одинаковымы по высоте, задавая в каждой ячейке парметр высоты: <td height="...">

Как это будет выглядеть, если поместить в аннотацию к разделу, можно посмотреть тут.