Учимся делать рамки.

Четверг, 10 Ноября 2011 г. 10:17 + в цитатник

Цитата сообщения Rukodelkino

Прочитать целиком В свой цитатник или сообщество!

Для рамки нам нужны фоны и их адреса. Адрес фона всегда начинается с http://
Я лично пользуюсь Радикалом для получения такого адреса. Берётся ссылка под №1.
Итак, начнём.

Ставим первый фон в рамке

<table width="100%" align="center" cellspacing="10" cellpadding="0" border="0" background="ФОН"><tr><td>СОДЕРЖИМОЕ РАМКИ</td></tr></table>

ФОН - это код //s49.radikal.ru/i124/0904/3a/8c432dff930b.jpg" из Радикала, ссылка №1
Подставляем этот код вместо слова ФОН

<table width="100%" align="center" cellspacing="10" cellpadding="0" border="0" background="//s49.radikal.ru/i124/0904/3a/8c432dff930b.jpg"><tr><td>СОДЕРЖИМОЕ РАМКИ</td></tr></table>

И вот, что у нас получилось

СОДЕРЖИМОЕ РАМКИ

Теперь после <tr><td> ставим второй фон

<table width="100%" align="center" cellspacing="10" cellpadding="0" border="0" background="//s49.radikal.ru/i124/0904/3a/8c432dff930b.jpg"1"><tr><td><table width="100%" align="center" cellspacing="10" cellpadding="0" border="0" background="//s51.radikal.ru/134/0906/62/493ae9eead5a.jpg"><tr><td> СОДЕРЖИМОЕ РАМКИ</td></tr></table></td></tr></table>

Обратите внимание на концовку: здесь уже прописано дважды </td></tr></table>
Это потому, что у нас уже 2 фона. И так будем дописывать таких элементов столько, сколько у нас будет фонов.
Смотрим, что же у нас получилось.

СОДЕРЖИМОЕ РАМКИ

А теперь добавим ещё парочку фончиков

<table width="100%" align="center" cellspacing="10" cellpadding="0" border="0" background="//s49.radikal.ru/i124/0904/3a/8c432dff930b.jpg"><tr><td><table width="100%" align="center" cellspacing="10" cellpadding="0" border="0" background="//s51.radikal.ru/i134/0906/62/493ae9eead5a.jpg"><tr><td><table width="100%" align="center" cellspacing="10" cellpadding="0" border="0" background="//i062.radikal.ru/0906/3e/8838502f3f73.jpg"><tr><td><table width="100%" align="center" cellspacing="10" cellpadding="0" border="0" background="//s56.radikal.ru/i151/0904/a5/55765256a2a9.jpg"><tr><td> СОДЕРЖИМОЕ РАМКИ</td></tr></table></td></tr></table></td></tr></table></td></tr></table>

СОДЕРЖИМОЕ РАМКИ

Можно добавлять фонов сколько хотите.

Теперь вставим картинку вместо слов СОДЕРЖИМОЕ РАМКИ

<table width="100%" align="center" cellspacing="10" cellpadding="0" border="0" background="//s49.radikal.ru/i124/0904/3a/8c432dff930b.jpg"><tr><td><table width="100%" align="center" cellspacing="10" cellpadding="0" border="0" background="//s51.radikal.ru/i134/0906/62/493ae9eead5a.jpg"><tr><td><table width="100%" align="center" cellspacing="10" cellpadding="0" border="0" background="//i062.radikal.ru/0906/3e/8838502f3f73.jpg"><tr><td><table width="100%" align="center" cellspacing="10" cellpadding="0" border="0" background="//s56.radikal.ru/i151/0904/a5/55765256a2a9.jpg"><tr><td><img src="//s58.radikal.ru/i161/0908/91/4d9087bd7f1c.jpg">
</td></tr></table></td></tr></table></td></tr></table></td></tr></table>

Код картинки берётся из Радикала, ссылка №6. Начинается с <img src= У нас это
<img src="//s58.radikal.ru/i161/0908/91/4d9087bd7f1c.jpg">

И что же у нас получилось?

Добавим к картинке текст.

Учимся делать рамки

Как-то он у нас встал не правильно. Будем исправлять. Нам ведь надо, чтобы он был под картинкой и по центру. Используем элемент center, т.е. заключим весь текст в тэги <center></center>

<table width="100%" align="center" cellspacing="10" cellpadding="0" border="0" background="//s49.radikal.ru/i124/0904/3a/8c432dff930b.jpg"><tr><td><table width="100%" align="center" cellspacing="10" cellpadding="0" border="0" background="//s51.radikal.ru/i134/0906/62/493ae9eead5a.jpg"><tr><td><table width="100%" align="center" cellspacing="10" cellpadding="0" border="0" background="//i062.radikal.ru/0906/3e/8838502f3f73.jpg"><tr><td><table width="100%" align="center" cellspacing="10" cellpadding="0" border="0" background="//s56.radikal.ru/i151/0904/a5/55765256a2a9.jpg"><tr><td><img src="//s58.radikal.ru/i161/0908/91/4d9087bd7f1c.jpg"><center>Учимся делать рамки</center></td></tr></table></td></tr></table></td></tr></table></td></tr></table>

Учимся делать рамки

Вы, конечно, заметили, что текст у меня поменял цвет и размер. Это я добавила некоторые атрибуты текста. Об этом я уже, по-моему, писала. А если нет, то напишу.

Теперь посмотрите на эту же рамку, но с некоторыми изменениями.

Учимся делать рамки

В ней я поменяла значения cellspacing и cellpadding
cellspacing="10" - расстояние между ячейками
cellpadding="0" - отступ текста или следующей рамки от предыдущей (если создаем рамку из нескольких фонов).
10 и 0 меняйте как вам нравится.

Теперь ещё вот, что надо знать

width - это ширина рамки. Если нужна определенная ширина, то вместо 100% ставим нужный размер в пикселях или изменяем количество процентов.
border="0" - толщина рамки в сером цвете. Чтобы не портить красоту, ставьте ноль.
При вставке ссылок будьте внимательны, между ссылкой и кавычками не должно быть пробелов.
Рамку создаем в формате HTML.

Ну вот, пожалуй, и всё для начала. Что не понятно, спрашивайте.

Желаю удачи!

Все уроки

Из блога Джулии для Вас