# Проверка

А.Л. Соррель

Соррель А.Л.

Проверка

Origin: http://samlib.ru/s/sorrelx_a/z_what.shtml

Создан: 15/10/2009, изменен: 15/10/2009, 10k

Справочник: Изобретательство

Series: Оформление текстов на СИ

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

Шаблон 1 Шаблон 2 Шаблон 3 Шаблон 4 Шаблон 5 Тем, кому нравится мой способ оформления текстов, попробую объяснить эту несложную хитрость на примере шаблона: http://zhurnal.lib.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 - эта запись создает границу таблицы (в данном случае границы нет, мы поставили ширину границы "0"); width="100%" - здесь задана ширина самой таблицы-фона. Она может выражаться и в числах, и в процентах. Проценты ставить удобнее, так как сразу можно прикинуть, на сколько растянется таблица. Так, 100% - это полное заполнение окна браузера. Поставите, например, 80% - ваша таблица-фон будет оставлять по бокам серые полосочки фона СИ. tr - задаёт строку таблицы; td - задаёт ячейку таблицы; align=center - выравнивает содержимое этой ячейки по центру. То есть мы получили таблицу, состоящую из единственной ячейки, растянутую на всю ширину экрана. Нижняя часть записи:

- закрывает всё то, что мы задали.

- в данном случае вспомогательный элемент, который заменил текст. Этот элемент задаёт переход текста на новую строку, "заполненную" пробелом (  ). Переходим к созданию второй таблицы внутри первой. Эта таблица состоит из двух строк, в каждой из которой по одной ячейке. Одна ячейка заполнена фоном, другая - картинкой. Опять выбираем фон для таблицы и картинку. Возьмём фон с адресом: http://i92.ltalk.ru/35/57/5735/75/1118475/light.jpeg и картинку: http://zhurnal.lib.ru/img/s/sorrelx_a/z_what/23814.jpg Таблицу сразу выравниваем по центру: table align="center"; и заливаем её выбранным фоном: background="http://i92.ltalk.ru/35/57/5735/75/1118475/light.jpeg". Эту таблицу делаем уже с границей: border="1". Ширина таблицы автоматически станет равной ширине картинки, так что предварительно необходимо либо преобразовать нужную картинку в требуемые размеры, либо найти подходящую. Высота же таблицы будет задаваться автоматически по высоте картинки + текста. Теперь формируем ячейки таблицы. Пусть первая строка

...

будет с картинкой. Картинку сразу ориентируем по центру: div align="center"; и вставляем её адрес: img src="/img/s/sorrelx_a/z_what/23814.jpg". Целиком первый блок с картинкой будет выглядеть:

Вторая строка

...

будет с текстом. Ориентируем текст по центру: div align="center". По умолчанию цвет шрифта - чёрный, а размер... скажем, стандартный для СИ. Второй блок будет выглядеть:

Текст

Текст

Текст

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

Текст Текст Текст

Результат. Как видите, текст на таком фоне выглядит несколько непрезентабельно, значит нужно изменить его размер и цвет. Размер шрифта задаётся элементом size. Параметр этого элемента варьируется от одного до семи. По умолчанию размер выставляется size="3". Увеличим этот параметр до size="5". Теперь выбираем цвет. Рекомендуется выбирать "безопасные" цвета, то есть такие, которые не будут искажаться ни каким браузером. Таблицы с этими цветами можно посмотреть: Таблица 1. Таблица 2. Или же можно воспользоваться очень удобным определителем цвета, который показывает, как будут смотреться буквы на цветном фоне. В этих таблицах цвета заданы буквенно-цифровым кодом. Выберем цвет 0033CC - синий. Задают этот цвет элементом color="#0033CC". Чтобы текст не прижимался к краям таблицы сверху и снизу, зададим пропуск двух строк. Целиком блок с текстом будет выглядеть:

Текст

Текст

Текст

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

Текст Текст Текст

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

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

Текст Текст Текст

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

Текст Текст Текст

Результат. Если же не удаётся найти фон для вашего текста, то можно залить внутреннюю (или внешнюю) таблицу цветом. Для этого в нашем примере вместо задания картинки-фона: background="http://i92.ltalk.ru/35/57/5735/75/1118475/light.jpeg" задаём цвет, который выбираем из приведённой выше таблицы цветов: bgcolor="#BBFDF7". Тогда получим шаблон: Шаблон 4

Текст Текст Текст

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

 | Текст Текст Текст

Результат. Ещё: * Работа с таблицами. * Вставка рирунков и разделительных линий. * Оформление текста. ++++++++++++++++++++++++++++++++++++++++