 Уроки от Джулии
Учимся делать рамки. Для рамки нам нужны фоны и их адреса. Адрес фона всегда начинается с 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. Ну вот, пожалуй, и всё для начала. Что не понятно, спрашивайте.
Желаю удачи! Все уроки  Из блога Джулии для Вас  |
Подборка картинок