|
三图边框的制作（二）--源代码
背景边框可以做得很复杂，重重叠叠的七八层边；也可以很简单，只有一两层。它们各有特色，适合不同的需要。这里介绍的“三图背景边框”属于比较简单的一种。三图指的是外层背景图、中间夹条图、内层文本背景图。如果用纯色代替内层文本背景，那么就是“两图边框”了。
习之已经做过两期“三图边框”，其中标题为“音画边框-世博会展馆（二）”的边框，只要将里面的世博会场馆图和解释文字删除，就成为适合各类内容的通用边框。本文用的就是它的第二款。
下面代码框里的就是供拷贝的三图边框的源代码。
<!--三图边框源代码-->
<table align="center" background="http://www.oldkids.cn/uploads/diary/201003/16113833458.jpg" bgcolor="#60b266" cellpadding="0" cellspacing="0" id="bgmove1" width="99%">
<tbody>
<tr>
<td style="padding: 20px;"><div align="center">
<table align="center" background="http://www.oldkids.cn/uploads/diary/201003/16113908048.jpg" cellpadding="0" cellspacing="0" style="border: #0e6409 2px solid;" width="95%">
<tbody>
<tr>
<td style="padding: 20px;"><div align="center">
<table align="center" background="http://www.oldkids.cn/uploads/diary/201003/16114015803.jpg" bgcolor="#60b266" cellpadding="0" cellspacing="0" style="border: #0e6409 2px solid;" width="100%">
<tbody>
<tr>
<td align="left" style="padding-left: 20px; padding-right:20px; line-height: 1.5em; font-family: 宋体; color: #f0fff0; font-size: 20px; word-break: break-all; font-weight: normal;">
<p align="center">
</p>
<p style="margin: 0px">
文字从这里开始写</p>
<p style="margin: 0px">
</p>
</td></tr></tbody></table>
</div></td></tr></tbody></table>
<!--
<script type="text/javascript" language="javascript">
function bgmove1int(){
if(!document.getElementById("bgmove1")) return;
var moveObj = document.getElementById("bgmove1")
var mx1=0;
var my1=0;
bgmove();
function bgmove(){
mx1=mx1+1;
my1=my1-1;
var MX = mx1+"px";var MY = my1+"px";
moveObj.style.backgroundPosition = MX+" "+MY ;
setTimeout(bgmove,80);
}
}
bgmove1int();
</script>
-->
</div></td></tr></tbody></table>
<br />
|
代码里所用到的三图：
要制作这样的三图边框需要替换源代码里的“三图五色”。
三图很容易理解，不少朋友已经会很熟练的替换源代码里的地址。主要是选图，三图中后两个：中间夹条图和文本背景图是一些常规通用的图。上一篇博客：“三图边框的制作（一）--素材”里就有几十个可供选择的小图。直接获取地址就可以了。外层背景图就要根据自己的需要，或临时用PS制作，或从网上获取。上文也推荐了一些背景素材的网站，供大家选用。
本文重点介绍颜色代码的替换。
在源代码里的颜色代码可以有多种写法，最常用的是 《 #RRGGBB 》。引导符#是必须的，不能省。RRGGBB是三组十六进制数，分别是：RR红（red）、GG绿（green）、BB蓝（blue），它们是三元色的比例。如：#FFFFFF 白色；#000000 黑色；#FF0000 红色；#00FF00 绿色；#0000FF蓝色。
推荐：1》老小孩网“菊花”的“常用的颜色代码对照表”；
2》老小孩网“虎子”的“颜色代码大全”
都很直观实用。在网上还可以搜索到更详细的对照表。
这套“三图边框代码”里要替换的五色指的是：内外层背景色（2）、夹条两边线条色（2）、文字的颜色（1）。因此实际颜色只有三种，需要替换的有五处。
两处“内外层背景色”位于内外两层背景图地址的后面：bgcolor="#60b266"。颜色的选择要与内层背景图的总体颜色接近。
初做边框往往会忽视这个颜色的设置，以为既然已经设置了background背景图，bgcolor就被图覆盖了，似乎这设置是多余的。其实不然，很有必要，这是为了当某种原因背景图不显示的时候，bgcolor的设置可以替代背景图，作为文字的底纹，这对于深底浅字尤为重要。譬如，老小孩网7月中开始，老版上传的图全不显示，那么用了有bgcolor设置的边框，不至于看不到在边框内的博客文字。
两处“夹条两边的线条颜色”位于第二、第三个 table 标签内。
style="border: #0e6409 2px solid" 。
这是边框线的CSS样式设置，在引号内border后面跟的是三个参数：颜色、宽度、线型。颜色#0e6409是需要替换的；2px是线条的宽度，单位px不能省；线型有8种可选，solid 是“实线”。较详细的介绍请参考习之的博客：“给照片加个实体边框”。
要注意的是，现在这样的书写是“简写”。因为一框有四边，通过编辑它会展开成上、下、左、右四项（border-bottom、border-left、border-top、border-right）。当这套代码替换好地址和颜色后，在编辑工具里点击“源码”，回到文本编辑状态，这个操作完成了对代码的“编辑”，简写的代码被展开。这可以再点“源码”查看编辑过后的源代码得到验证。如果编辑后发现颜色不理想，需要再回到“源码”作修改，那么原来替换的只是一项，展开后需要改的就变成了四项。CSS里有好几个常用的可以简写的属性， 如 margin、padding 等。
大家比较熟悉的边框线宽度和颜色是用HTML的border属性设置的：
border="宽度" borderColor="#RRGGBB" 。
有时还会用到：borderColorRight（亮边色）、borderColorDark（暗边色）
在上面这套代码里舍HTML而改用CSS，实属无奈之举。因为老小孩网有个软件漏洞，在博客页面上不支持 border="宽度" 的属性设置。用了它在编辑栏里看是正常的，发表后边框线就会不见了。
文字颜色位于最内层的一个td标签内，color:#F0FFF0 。当然文字颜色也可以利用文本编辑工具设置，但是在源代码里设置好文字颜色，是在整个td范围内都有效的，因此在边框里是通管整篇博客的（div标签例外）。
习之制作的“三图边框”外层背景图会缓慢移动，这个效果用到了JavaScript代码。直接用上面提供的代码，背景是不动的，要使背景动起来，需要将代码倒数第四行《 // bgmove1int();》里的两根斜杠//删除。习之曾经有博客“让背景图动起来”介绍过背景图移动的原理。下一篇博客还将介绍在“三图边框”里的JavaScript代码。
|
