|
背景信纸从简单的做起 （一）
我在《再学“绝对定位”》的两篇博客里，都用了简单的背景信纸：背景的颜色是单色，左上角是一叠书籍，右下角是一幅图片。我想以本文开始逐步介绍背景信纸的制作方法 、及相关的一些“源代码”方面的心得，供朋友们参考。
简单地说，一张背景信纸分三个部分，上面和下面各是一幅（或一组）图片，中间是写博客的位置。由于文章长短不一、网页宽度不同，要求背景信纸在宽度和长度方向（ 指屏幕的高度方向，因此代码里称高度）都可以延展。右图是一张信纸的示意图，它分为三个区（上、中、下），每区三块（左、中、右），共九小块。每块都给了一个名字，如“上左”、“下右”等。
可以理解为这是一张表格。分上、中、下三行，每行三格。上下行是信纸的图案区，中间一行就是高度可以延长的书写文本的部分。上中下三行内必有一格是左右可以伸缩的（通常是上中、中中、下中），以此达到上下、左右都可以延展的目的。中左、中右是留空，使文字不紧贴信纸的左右边。如果信纸有格子，那么只在“中中”里有。过去老小孩的博客版面宽度有510px、660px、720px等几种(注：现在最宽已经可以到980px了)，要考虑到不同的版面都好用，信纸能左右延展是必须的。现在新版博客宽度是固定的800px，如果制作信纸只为自己用，也可以做成固定宽度的，那要简单很多。
下图是在老小孩编辑框内一款信纸的截图照片，是用在博客“再学绝对定位（二）”上的。只在上左和下右各有一张图，背景颜色是单色的。这是最简单的信纸，虽然还是三行，但中、下都只有一格了。
下面是这张信纸的两张小图。上左是一张书籍的gif图，背景是透明的。下右是一张茶杯图，底色是绿色。信纸背景颜色代码：#9BC95D。
 |
 |
| 上左的gif图200*150 |
下右的jpg图300*180 |
下面是这款信纸的全部源代码。
为方便相互交流，称为“信纸代码（一）”。
<table align="center" cellspacing="0" cellpadding="0" width="780" bgcolor="#9BC95D" border="0">
<tbody><tr>
<td>
<table align="center" cellspacing="0" cellpadding="0" width="100%" border="0">
<tbody>
<tr>
<td width="250" height="150" align="left" valign="top"><img
src="http://www.oldkids.cn/upload/12000/u11139/2010/11/03/blog_201011031651340.gif"
width="200" height="150"></td>
<td align="left" style="font-size:26px;line-height:1.5em;">这里写标题</td>
</tr>
</tbody>
</table>
<table align="center" cellspacing="0" cellpadding="0" width="100%" border="0">
<tbody>
<tr>
<td style="padding-left: 30px; padding-right: 30px; font-weight: normal; font-size: 18px; color: #000000;
word-break: break-all; line-height: 1.5em; font-family: 微软雅体">
<p style="margin: 0px;">文字从这里开始写</p>
<p style="margin: 0px;"> </p>
</td>
</tr>
</tbody>
</table>
<table align="center" cellspacing="0" cellpadding="0" width="100%" border="0">
<tbody>
<tr>
<td height="180" align="right" valign="bottom" ><img
src="http://www.oldkids.cn/upload/12000/u11139/2010/11/03/blog_201011031650228.jpg"
width="300" height="180"></td>
</tr>
</tbody>
</table>
</td></tr></tbody></table>
|
使用信纸代码（一）制作属于自己的信纸很方便。先决定自己信纸的背景色，并准备两张位于上左、下右的小图。对于初学者，最好两张图都用背景透明的gif图。如果是jpg图，那么jpg图的背景色要与信纸的背景色一致。自己能用PS制图的，可以方便地制作出各种素材的单色背景图。
代码里需要替换的有下面几处：
背景色，在代码第一行，现在是：bgcolor="#9BC9D5"，需要改成新的颜色代码。注意不能少了#号。
蓝色代码里的和紫色代码里原有的图片地址分别更换成新的图片地址。并更改图片img标签里的宽和高的设置（width和height）。
至于td标签里的width和height的数值也应该做相应的更改，（不改问题也不大）。
为方便做练习，下面提供两张信纸的素材，分别有一个颜色代码、两张小图。而且图片的尺寸与上面代码里的一样。
素材一：背景颜色：
 |
 |
| 例一上左gif图200*150 |
例一下右gif图300*180 |
颜色代码： #E3D5A8
左上地址： http://www.oldkids.cn/upload/12000/u11139/2010/11/17/blog_201011171508288.gif
右下地址： http://www.oldkids.cn/upload/12000/u11139/2010/11/17/blog_201011171509215.gif
素材二：背景颜色：
 |
 |
| 例二上左gif图200*150 |
例二下右jpg图300*180 |
颜色代码： #DFEFFF
左上地址： http://www.oldkids.cn/upload/12000/u11139/2010/11/17/blog_201011171511430.gif
右下地址： http://www.oldkids.cn/upload/12000/u11139/2010/11/17/blog_201011171512467.jpg
下面是两个练习的效果图
 |
 |
| 例一效果示意图 |
例二效果示意图 |
“信纸代码（一）”还可以做点变化。如将图片位置换个方向，对角交换。即上面的图显示在右方，下面的图显示在左面。代码里要改两处，上面一个table里的两个td标签，上下要换位置，先是一个“写标题”的td，再是显示图片的td。还要修改在两个td里的对齐属性，改成 align="right"。下面的一个table因为只有一个td，那么就只要修改一处对齐属性，改成： align="left"。上面两个素材中，例二的两个图，方向感不强，可以用做变化的练习。
这款信纸原本只需要用一个table标签就可以实现同样的效果，为了说明信纸的代码结构，并为今后能使用同样代码结构的“模板”制作复杂的信纸做准备，还是用了三个table外加一个套在外面的table来实现信纸的效果。习之做的各类信纸基本上都用了这样的结构。如上面的信纸代码：红色代码是外套的一个table；内部是上（蓝）、中（黑）、下（紫）三个table。 上下table是图，中间的table是书写博客的文本区。通常，中间的一个table的代码变化比较少。不同的信纸，主要靠的上下两个table的不同的变化来实现，因此，做信纸实际就是用活table标签。
音乐：美的世界-乔瓦尼乐队
— 待 续 —
|
