27 июня 2017

Создаем трехслойную рамку "школьная доска"

    HTML код рамки "школьная доска". Здесь рамка ограниченных размеров. Создадим такую рамку, растягивающуюся в длину. Картинка может быть и другой. Принцип "сборки" один.  Так что HTML код можно считать базовым.
    Создаем рамку из 3-х частей, редактируя HTML код готовой рамки. Я взяла   ЭТОТ КОД.    См. ниже в красной рамке. Три слоя - три цвета: верхняя часть - синий цвет, средняя часть (самая большая, т.к. на ней будет размещено все основное содержание рамки) - красный, нижняя часть - зеленый.  Средняя часть растягивается в длину.
 
HTML код трехслойной рамки:

<table width="600" height="103" style="border:0px none #000000;background-image:url(http://lili-lilya2009.narod.ru/oformlenie/ramki/1/translucense3verkh.jpg)" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" align="center"><span style="color:#000000;font-size:20px">содержимое рамки 1</span></td></tr></table><table width="600" style="border:0px none #000000;background-image:url(http://lili-lilya2009.narod.ru/oformlenie/ramki/1/translucense3seredina.jpg)" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" align="center"><span style="color:#000000;font-size:20px">содержимое рамки 2</span></td></tr></table><table width="600" height="85" style="border:0px none #000000;background-image:url(http://lili-lilya2009.narod.ru/oformlenie/ramki/1/translucense3niz.jpg)" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" align="center"><span style="color:#000000;font-size:20px">содержимое рамки 3</span></td></tr></table>



содержимое рамки 1
 
содержимое рамки 2:

   Прежде всего картинку, из которой делаем рамку, разделим на 3 части и все загружаем на любой фотохостинг (их достаточно в интернете), где затем берем адреса ссылок на эти картинки (image: url , сама ссылка в скобках) и проставляем в код, заменив ссылки в коде. 
 Заменяем в коде размеры картинок: ширину каждой (width)  и длину height) верхней и нижней (средняя картинка "безразмерная" в длину). 
   Вообще смелее "перебираем" разные значения в коде. Те, что указаны выше - основные. Еще обращаем внимание на размер шрифта в рамках (особенно верхней и нижней, если они узкие), он должен свободно разместиться в рамке по длине, не исказив картинку.


HTML код трехслойной рамки:

<table width="600" height="37" style="border:0px none #000000;background-image:url(http://lili-lilya2009.narod.ru/kartinki/zhulan/1/ramka_shkolnaja_verkh.jpg)" cellspacing="0" cellpadding="0"><tr><td style="padding:0px" align="center"><span style="color:#000000;font-size:20px">содержимое рамки 1</span></td></tr></table> <table width="600" style="border:0px none #000000;background-image:url(http://lili-lilya2009.narod.ru/kartinki/zhulan/1/ramka_shkolnaja_seredina.jpg)" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" align="center"><span style="color:#000000;font-size:20px">содержимое рамки 2</span></td></tr></table> <table width="600" height="71" style="border:0px none #000000;background-image:url(http://lili-lilya2009.narod.ru/kartinki/zhulan/1/ramka_shkolnaja_niz.jpg)" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" align="center"><span style="color:#000000;font-size:20px">содержимое рамки 3</span></td></tr></table>

содержимое рамки 3

Комментариев нет:

Отправить комментарий

Related Posts Plugin for WordPress, Blogger...