Лана : другие произведения.

Оформление стихов

Самиздат: [Регистрация] [Найти] [Рейтинги] [Обсуждения] [Новинки] [Обзоры] [Помощь|Техвопросы]
Ссылки:



Шаблон 1
Шаблон 2
Шаблон 3
Шаблон 4
Шаблон 5

    Тем, кому нравится мой способ оформления текстов, попробую объяснить эту несложную хитрость на примере шаблона:

http://samlib.ru/s/sorrelx_a/autumn.shtml

    Такое оформление представляет собой две таблицы, вложенные одна в другую. Первая таблица является фоном странички. Что понадобится для её создания? Фоновое изображение - небольшая фоновая картинка, которая многократным дублированием способна заполнить собой всю площадь таблицы, создавая сплошной бесшовный рисунок. Для выбора таких картинок можно задать в поисковике "фон для сайта дневника" и дополнительный параметр, например, звёзды: "фон для сайта дневника звёзды". Из всего предлагаемого списка выбираем наиболее симпатичный, например этот:

http://anime-glamur.narod.ru/nebo2.html

    Открываем понравившуюся картинку-фон, и копируем её адрес:

http://anime-glamur.narod.ru/photo69.gif

    Теперь можно создать первую таблицу-фон.

<table background="http://anime-glamur.narod.ru/photo69.gif" border=0 width="100%">
<tr><td align=center>
&nbsp;<br>
&nbsp;<br>
&nbsp;<br>
&nbsp;<br>
&nbsp;<br>
&nbsp;<br>
&nbsp;<br>
&nbsp;<br>
</td></tr></table>

Результат.

    Что обозначают все эти символы:

table - таблица, которую мы создаём;

background="http://anime-glamur.narod.ru/photo69.gif" - эта строчка говорит, что мы заливаем фон с помощью той картинки, адрес которой выделен синим цветом (обратите внимание, адрес картинки - в кавычках!);

border=0 - эта запись создает границу таблицы (в данном случае границы нет, мы поставили ширину границы "0");

width="100%" - здесь задана ширина самой таблицы-фона. Она может выражаться и в числах, и в процентах. Проценты ставить удобнее, так как сразу можно прикинуть, на сколько растянется таблица. Так, 100% - это полное заполнение окна браузера. Поставите, например, 80% - ваша таблица-фон будет оставлять по бокам серые полосочки фона СИ.

tr - задаёт строку таблицы;

td - задаёт ячейку таблицы;

align=center - выравнивает содержимое этой ячейки по центру.

    То есть мы получили таблицу, состоящую из единственной ячейки, растянутую на всю ширину экрана. Нижняя часть записи: </td></tr></table> - закрывает всё то, что мы задали.

<br> - в данном случае вспомогательный элемент, который заменил текст. Этот элемент задаёт переход текста на новую строку, "заполненную" пробелом (&nbsp; ).

    Переходим к созданию второй таблицы внутри первой. Эта таблица состоит из двух строк, в каждой из которой по одной ячейке. Одна ячейка заполнена фоном, другая - картинкой. Опять выбираем фон для таблицы и картинку. Возьмём фон с адресом:

http://i92.ltalk.ru/35/57/5735/75/1118475/light.jpeg

и картинку:

http://z3.foto.rambler.ru/public/swordoriginal/3/5/1-web.jpg

    Таблицу сразу выравниваем по центру: table align="center";

и заливаем её выбранным фоном: background="http://i92.ltalk.ru/35/57/5735/75/1118475/light.jpeg".

    Эту таблицу делаем уже с границей: border="1". Ширина таблицы автоматически станет равной ширине картинки, так что предварительно необходимо либо преобразовать нужную картинку в требуемые размеры, либо найти подходящую. Высота же таблицы будет задаваться автоматически по высоте картинки + текста. Теперь формируем ячейки таблицы.

    Пусть первая строка <tr>...</tr> будет с картинкой. Картинку сразу ориентируем по центру: div align="center"; и вставляем её адрес: img src="http://z3.foto.rambler.ru/public/swordoriginal/3/5/1-web.jpg".

    Целиком первый блок с картинкой будет выглядеть:

<tr><td><div align="center">
<img src="http://z3.foto.rambler.ru/public/swordoriginal/3/5/1-web.jpg">
</div></td></tr>

Вторая строка <tr>...</tr> будет с текстом.

Ориентируем текст по центру: div align="center".

По умолчанию цвет шрифта - чёрный, а размер... скажем, стандартный для СИ.

Второй блок будет выглядеть:

<tr><td><div align="center">
Текст<br>
Текст<br>
Текст<br>
</div></td></tr>

    Собирая всё вместе мы получим таблицу:

<table align="center" background="http://i92.ltalk.ru/35/57/5735/75/1118475/light.jpeg" border="1">
<tr><td><div align="center">
<img src="http://z3.foto.rambler.ru/public/swordoriginal/3/5/1-web.jpg">
</div></td></tr>
<tr><td ><div align="center">
Текст<br>
Текст<br>
Текст<br>
</div></td></tr>
</table>

Результат.

    Как видите, текст на таком фоне выглядит несколько непрезентабельно, значит нужно изменить его размер и цвет. Размер шрифта задаётся элементом size. Параметр этого элемента варьируется от одного до семи. По умолчанию размер выставляется size="3". Увеличим этот параметр до size="5".

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

Таблица 1.      Таблица 2.

   Или же можно воспользоваться очень удобным определителем цвета, который показывает, как будут смотреться буквы на цветном фоне.

    В этих таблицах цвета заданы буквенно-цифровым кодом. Выберем цвет 0033CC - синий. Задают этот цвет элементом color="#0033CC". Чтобы текст не прижимался к краям таблицы сверху и снизу, зададим пропуск двух строк. Целиком блок с текстом будет выглядеть:

<font color="#0033CC" size="5" >
<br>
<br>
Текст<br>
Текст<br>
Текст<br>
<br>
<br>
</font>

    Теперь вкладываем текст в таблицу, вкладываем таблицу в основную таблицу, и получаем готовое оформление:

Шаблон 1

<table background="http://anime-glamur.narod.ru/photo69.gif" border=0 width="100%">
<tr><td align=center>
&nbsp;<br>
&nbsp;<br>

<table align="center" background="http://i92.ltalk.ru/35/57/5735/75/1118475/light.jpeg" border="1">

<tr><td><div align="center">
<img src="http://z3.foto.rambler.ru/public/swordoriginal/3/5/1-web.jpg">
</div></td></tr>

<tr><td ><div align="center">
<font color="#0033CC" size="5" >
<br>
<br>
Текст<br>
Текст<br>
Текст<br>
<br>
<br>
</font>
</div></td></tr>

</table>

&nbsp;<br>
&nbsp;<br>
</td></tr></table>

 

Результат.

    Дабы не заморачиваться со всем вышеописанным, можно просто скопировать это оформление себе, и менять в нём адреса картинки и фона. Ну и ещё подбирать цвет шрифта. И не забывайте ставить после каждой строки элемент <br>, чтобы стих был написан в столбик.

    Для того, чтобы получить шаблон "текст-картинка", надо поменять местами два блока в исходном шаблоне:

Шаблон 2

<table background="http://anime-glamur.narod.ru/photo69.gif" border=0 width="100%">
<tr><td align=center>
&nbsp;<br>
&nbsp;<br>

<table align="center" background="http://i92.ltalk.ru/35/57/5735/75/1118475/light.jpeg" border="1">

<tr><td ><div align="center">
<font color="#0033CC" size="5" >
<br>
<br>
Текст<br>
Текст<br>
Текст<br>
<br>
<br>
</font>
</div></td></tr>

<tr><td><div align="center">
<img src="http://z3.foto.rambler.ru/public/swordoriginal/3/5/1-web.jpg">
</div></td></tr>

</table>

&nbsp;<br>
&nbsp;<br>
</td></tr></table>

 

Результат.

    Если же убрать один из блоков - с картинкой - то получим шаблон "рамка в рамке". В этом случае ширину таблицы придётся уже задавать, ибо она не будет определяться картинкой. Эту ширину задают элементом width, в той же строчке, где задана ширина границы рамки border. Можно задавать в процентах или пикселях.

    Пусть внутренняя таблица будет иметь фиксированные размеры 500px. Убираем из шаблона блок с картинкой, вставляем ширину таблицы:

Шаблон 3

<table background="http://anime-glamur.narod.ru/photo69.gif" border=0 width="100%">
<tr><td align=center>
&nbsp;<br>
&nbsp;<br>

<table align="center" background="http://i92.ltalk.ru/35/57/5735/75/1118475/light.jpeg" border="1" width="500">

<tr><td ><div align="center">
<font color="#0033CC" size="5">
<br>
<br>
Текст<br>
Текст<br>
Текст<br>
<br>
<br>
</font>
</div></td></tr>

</table>

&nbsp;<br>
&nbsp;<br>
</td></tr></table>

 

Результат.

    Если же не удаётся найти фон для вашего текста, то можно залить внутреннюю (или внешнюю) таблицу цветом. Для этого в нашем примере вместо задания картинки-фона:

background="http://i92.ltalk.ru/35/57/5735/75/1118475/light.jpeg"

задаём цвет, который выбираем из приведённой выше таблицы цветов: bgcolor="#BBFDF7".

Тогда получим шаблон:

Шаблон 4

<table background="http://anime-glamur.narod.ru/photo69.gif" border=0 width="100%">
<tr><td align=center>
&nbsp;<br>
&nbsp;<br>

<table align="center" bgcolor="#BBFDF7" border="1" width="500">

<tr><td ><div align="center">
<font color="#0033CC" size="5" >
<br>
<br>
Текст<br>
Текст<br>
Текст<br>
<br>
<br>
</font>
</div></td></tr>

</table>

&nbsp;<br>
&nbsp;<br>
</td></tr></table>

 

Результат.

Ещё, как вариант расположения таблиц, можно задать одну строку с двумя ячейками в ней:

Шаблон 5

<table background="http://anime-glamur.narod.ru/photo69.gif" border=0 width="100%">
<tr><td align=center>
&nbsp;<br>
&nbsp;<br>

<table align="center" background="http://i92.ltalk.ru/35/57/5735/75/1118475/light.jpeg" border="1">
<tr>

<td width="500"><div align="center"><img src="http://z3.foto.rambler.ru/public/swordoriginal/3/5/1-web.jpg">
</div></td>

<td width="203" ><div align="center">
<font color="#0033CC" size="5" >
<br>
<br>
Текст<br>
Текст<br>
Текст<br>
<br>
<br>
</font>
</div></td>

</tr> </table>

&nbsp;<br>
&nbsp;<br>
</td></tr></table>

Результат.

 

Ещё:

 



Связаться с программистом сайта.

Новые книги авторов СИ, вышедшие из печати:
О.Болдырева "Крадуш. Чужие души" М.Николаев "Вторжение на Землю"

Как попасть в этoт список

Кожевенное мастерство | Сайт "Художники" | Доска об'явлений "Книги"