|
|
||
|
Тем, кому нравится мой способ оформления текстов, попробую объяснить эту несложную хитрость на примере шаблона: 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 - эта запись создает границу таблицы (в данном случае границы нет, мы поставили ширину границы "0"); width="100%" - здесь задана ширина самой таблицы-фона. Она может выражаться и в числах, и в процентах. Проценты ставить удобнее, так как сразу можно прикинуть, на сколько растянется таблица. Так, 100% - это полное заполнение окна браузера. Поставите, например, 80% - ваша таблица-фон будет оставлять по бокам серые полосочки фона СИ. tr - задаёт строку таблицы; td - задаёт ячейку таблицы; align=center - выравнивает содержимое этой ячейки по центру. То есть мы получили таблицу, состоящую из единственной ячейки, растянутую на всю ширину экрана. Нижняя часть записи: </td></tr></table> - закрывает всё то, что мы задали. <br> - в данном случае вспомогательный элемент, который заменил текст. Этот элемент задаёт переход текста на новую строку, "заполненную" пробелом ( ). Переходим к созданию второй таблицы внутри первой. Эта таблица состоит из двух строк, в каждой из которой по одной ячейке. Одна ячейка заполнена фоном, другая - картинкой. Опять выбираем фон для таблицы и картинку. Возьмём фон с адресом: 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>...</tr> будет с текстом. Ориентируем текст по центру: div align="center". По умолчанию цвет шрифта - чёрный, а размер... скажем, стандартный для СИ. Второй блок будет выглядеть:
Собирая всё вместе мы получим таблицу:
Как видите, текст на таком фоне выглядит несколько непрезентабельно, значит нужно изменить его размер и цвет. Размер шрифта задаётся элементом size. Параметр этого элемента варьируется от одного до семи. По умолчанию размер выставляется size="3". Увеличим этот параметр до size="5". Теперь выбираем цвет. Рекомендуется выбирать "безопасные" цвета, то есть такие, которые не будут искажаться ни каким браузером. Таблицы с этими цветами можно посмотреть: Или же можно воспользоваться очень удобным определителем цвета, который показывает, как будут смотреться буквы на цветном фоне. В этих таблицах цвета заданы буквенно-цифровым кодом. Выберем цвет 0033CC - синий. Задают этот цвет элементом color="#0033CC". Чтобы текст не прижимался к краям таблицы сверху и снизу, зададим пропуск двух строк. Целиком блок с текстом будет выглядеть:
Теперь вкладываем текст в таблицу, вкладываем таблицу в основную таблицу, и получаем готовое оформление:
Дабы не заморачиваться со всем вышеописанным, можно просто скопировать это оформление себе, и менять в нём адреса картинки и фона. Ну и ещё подбирать цвет шрифта. И не забывайте ставить после каждой строки элемент <br>, чтобы стих был написан в столбик. Для того, чтобы получить шаблон "текст-картинка", надо поменять местами два блока в исходном шаблоне:
Если же убрать один из блоков - с картинкой - то получим шаблон "рамка в рамке". В этом случае ширину таблицы придётся уже задавать, ибо она не будет определяться картинкой. Эту ширину задают элементом width, в той же строчке, где задана ширина границы рамки border. Можно задавать в процентах или пикселях. Пусть внутренняя таблица будет иметь фиксированные размеры 500px. Убираем из шаблона блок с картинкой, вставляем ширину таблицы:
Если же не удаётся найти фон для вашего текста, то можно залить внутреннюю (или внешнюю) таблицу цветом. Для этого в нашем примере вместо задания картинки-фона: background="http://i92.ltalk.ru/35/57/5735/75/1118475/light.jpeg" задаём цвет, который выбираем из приведённой выше таблицы цветов: bgcolor="#BBFDF7". Тогда получим шаблон:
Ещё, как вариант расположения таблиц, можно задать одну строку с двумя ячейками в ней:
Ещё:
|
|
