代码学习群简易教程（29）

代码学习群简易教程 （29） ——“信纸”与“相册”

本节讲解两个内容：“应用信纸撰写文章”与“应用代码制作相册”。

一、应用信纸撰写文章：

在网络中，有许多漂亮的信纸图片，许多朋友来信询问想用信纸图片撰写文章。那么，怎样应用信纸图片撰写文章呢？

应用信纸图片撰写文章，可分为横排版与竖排版两种方法。

（一）横排版方法：

1、先设置一套表格标签，表格标签中要设置css相对定位样式、背景图片、表格的宽度与高度。

2、单元格中要设置块区标签（或者段落标签）和文字标签。块区标签中要设置css绝对定位样式。

举例如下：

<TABLE style="POSITION: relative; WIDTH: 600px; HEIGHT: 450px; TOP: 0px; LEFT: 0px" border=0 background=http://image49.360doc.com/DownloadImg/2012/02/2423/21792405_16.jpg bgColor=#d7ffee align=center> <TBODY> <TR> <TD> <DIV style="POSITION: absolute; WIDTH: 230px; TOP: 148px; LEFT: 370px" class=divBorderStyle><FONT style="LINE-HEIGHT: 1.3em; LETTER-SPACING: 5px; FONT-FAMILY: 微软雅黑,Microsoft YaHei; FONT-SIZE: 20px" color=#f0fbb8>饮茶粤海未能忘,</FONT></DIV> <DIV style="POSITION: absolute; WIDTH: 230px; TOP: 181px; LEFT: 370px" class=divBorderStyle><FONT style="LINE-HEIGHT: 1.3em; LETTER-SPACING: 5px; FONT-FAMILY: 微软雅黑,Microsoft YaHei; FONT-SIZE: 20px" color=#f0fbb8>索句渝州叶正黄。</FONT></DIV> <DIV style="POSITION: absolute; WIDTH: 230px; TOP: 212px; LEFT: 370px" class=divBorderStyle><FONT style="LINE-HEIGHT: 1.3em; LETTER-SPACING: 5px; FONT-FAMILY: 微软雅黑,Microsoft YaHei; FONT-SIZE: 20px" color=#f0fbb8>三十一年还旧国,</FONT></DIV> <DIV style="POSITION: absolute; WIDTH: 230px; TOP: 243px; LEFT: 370px" class=divBorderStyle><FONT style="LINE-HEIGHT: 1.3em; LETTER-SPACING: 5px; FONT-FAMILY: 微软雅黑,Microsoft YaHei; FONT-SIZE: 20px" color=#f0fbb8>落花时节读华章。</FONT></DIV> <DIV style="POSITION: absolute; WIDTH: 230px; TOP: 274px; LEFT: 370px" class=divBorderStyle><FONT style="LINE-HEIGHT: 1.3em; LETTER-SPACING: 5px; FONT-FAMILY: 微软雅黑,Microsoft YaHei; FONT-SIZE: 20px" color=#f0fbb8>牢骚太盛防肠断,</FONT></DIV> <DIV style="POSITION: absolute; WIDTH: 230px; TOP: 305px; LEFT: 370px" class=divBorderStyle><FONT style="LINE-HEIGHT: 1.3em; LETTER-SPACING: 5px; FONT-FAMILY: 微软雅黑,Microsoft YaHei; FONT-SIZE: 20px" color=#f0fbb8>风物长宜放眼量。</FONT></DIV> <DIV style="POSITION: absolute; WIDTH: 230px; TOP: 336px; LEFT: 370px" class=divBorderStyle><FONT style="LINE-HEIGHT: 1.3em; LETTER-SPACING: 5px; FONT-FAMILY: 微软雅黑,Microsoft YaHei; FONT-SIZE: 20px" color=#f0fbb8>莫道昆明池水浅,</FONT></DIV> <DIV style="POSITION: absolute; WIDTH: 260px; TOP: 367px; LEFT: 370px" class=divBorderStyle><FONT style="LINE-HEIGHT: 1.3em; LETTER-SPACING: 5px; FONT-FAMILY: 微软雅黑,Microsoft YaHei; FONT-SIZE: 20px" color=#f0fbb8>观鱼胜过富春江。</FONT></DIV> <DIV style="POSITION: absolute; WIDTH: 230px; TOP: 398px; LEFT: 370px" class=divBorderStyle><FONT style="LINE-HEIGHT: 1.3em; LETTER-SPACING: 5px; FONT-FAMILY: 微软雅黑,Microsoft YaHei; FONT-SIZE: 20px" color=#ff9b98>——毛泽东——</FONT></DIV></TD></TR></TBODY></TABLE>

上面的代码中，第一个尖括号（包括尖括号里面的内容）是表格标签。表格标签中，style="POSITION: relative; WIDTH: 600px; HEIGHT: 450px; TOP: 0px; LEFT: 0px"是css相对定位样式。
css相对定位样式解析：样式＝“定位类型：相对定位；表格宽度：600px；表格高度：450px；居上值：0px; 居左值：0px;”
单元格中的块区标签：<DIV style="POSITION: absolute; WIDTH: 260px; TOP: 143px; LEFT: 320px">
块区标签解析：<块区标签 样式＝“定位类型：绝对定位；宽度：260px；居上值：143px；居左值：320px”>
单元格中的文字标签：<FONT style="LINE-HEIGHT: 1.5em; LETTER-SPACING: 20px; FONT-FAMILY: 微软雅黑,Microsoft YaHei; FONT-SIZE: 20px" color=#00fff00>
块区标签解析：<文字标签 样式＝“行高：1.5em；字距： 20px；字体：微软雅黑；字号：20px” 颜色＝绿色>

3、找到你要使用的信纸，“右击”信纸图片，点击“属性”，就会弹出一个方框，方框中“地址”一栏中就是信纸的“地址”，“维度”一栏中就是信纸图片的“宽度×高度”。

4、把信纸的“地址”粘贴（替换）到表格标签中背景图片“地址”处，把“信纸的宽度与高度”粘贴（替换）到表格标签与块区标签的“宽度与高度”处。

5、“文字内容”要输入到文字标签与其尾标签之间。

6、每一行文字要用一套块区标签与一套文字标签控制。

7、要反复修改块区标签中css绝对定位样式的“居上值”与“居左值”，观察文字所在的位置，把文字放置到合适的位置上。

8、文字的字体、大小与颜色，可修改文字标签中的字体、字号与颜色，还可以修改文字标签中的行高与字距。

效果如下：

饮茶粤海未能忘, 索句渝州叶正黄。 三十一年还旧国, 落花时节读华章。 牢骚太盛防肠断, 风物长宜放眼量。 莫道昆明池水浅, 观鱼胜过富春江。 ——毛泽东——

（二）竖排版方法：

竖排版方法与横排版方法基本相同，不同点在于竖排版时，要在控制每一行文字的块区标签或者文字标签中添加竖排版样式：WRITING-MODE: tb-rl。

举例如下：

<TABLE style="POSITION: relative; WIDTH: 700px; HEIGHT: 500px; TOP: 0px; LEFT: 0px" border=0 background=http://image49.360doc.com/DownloadImg/2012/02/2423/21792405_14.jpg bgColor=#d7ffee align=center> <TBODY> <TR> <TD> <DIV style="POSITION: absolute; WRITING-MODE: tb-rl; WIDTH: 40px; TOP: 200px; LEFT: 605px" class=divBorderStyle><FONT style="LINE-HEIGHT: 1.3em; LETTER-SPACING: 25px; FONT-FAMILY: 微软雅黑,Microsoft YaHei; FONT-SIZE: 20px" color=#0050b8>七绝</FONT></DIV> <DIV style="POSITION: absolute; WRITING-MODE: tb-rl; WIDTH: 40px; TOP: 130px; LEFT: 570px" class=divBorderStyle><FONT style="LINE-HEIGHT: 1.3em; LETTER-SPACING: 12px; FONT-FAMILY: 微软雅黑,Microsoft YaHei; FONT-SIZE: 20px" color=#0050b8>为女民兵題照</FONT></DIV> <DIV style="POSITION: absolute; WIDTH: 40px; TOP: 200px; LEFT: 550px" class=divBorderStyle><FONT style="LINE-HEIGHT: 1.3em; LETTER-SPACING: 5px; FONT-FAMILY: 微软雅黑,Microsoft YaHei; FONT-SIZE: 20px" color=#0050b8>毛泽东</FONT></DIV> <DIV style="POSITION: absolute; WIDTH: 40px; TOP: 130px; LEFT: 510px" class=divBorderStyle><FONT style="LINE-HEIGHT: 1.3em; LETTER-SPACING: 5px; FONT-FAMILY: 微软雅黑,Microsoft YaHei; FONT-SIZE: 20px" color=#0050b8>飒爽英姿五尺枪，</FONT></DIV> <DIV style="POSITION: absolute; WIDTH: 40px; TOP: 130px; LEFT: 470px" class=divBorderStyle><FONT style="LINE-HEIGHT: 1.3em; LETTER-SPACING: 5px; FONT-FAMILY: 微软雅黑,Microsoft YaHei; FONT-SIZE: 20px" color=#0050b8>曙光初照演兵场。</FONT></DIV> <DIV style="POSITION: absolute; WIDTH: 40px; TOP: 130px; LEFT: 430px" class=divBorderStyle><FONT style="LINE-HEIGHT: 1.3em; LETTER-SPACING: 5px; FONT-FAMILY: 微软雅黑,Microsoft YaHei; FONT-SIZE: 20px" color=#0050b8>中华儿女多奇志，</FONT></DIV> <DIV style="POSITION: absolute; WIDTH: 40px; TOP: 130px; LEFT: 390px" class=divBorderStyle><FONT style="LINE-HEIGHT: 1.3em; LETTER-SPACING: 5px; FONT-FAMILY: 微软雅黑,Microsoft YaHei; FONT-SIZE: 20px" color=#0050b8>不爱红装爱武装。</FONT></DIV></TD></TR></TBODY></TABLE>

效果如下：

七绝 为女民兵題照 毛泽东 飒爽英姿五尺枪， 曙光初照演兵场。 中华儿女多奇志， 不爱红装爱武装。

下面为您提供我收藏的一些漂亮的信纸图片，文章地址如下：

http://www.360doc.com/content/13/0705/17/4127803_297869785.shtml

二、应用代码制作相册：

网络中有许多精美的相框，如果把自己的照片放入精美的相框中，制作成相册，既不用花钱，又很美观，我们何乐而不为呢？

相册有静态相册与移动相册两种。下面分别讲解这两种相册的制作方法。

（一）静态相册：

代码举例：

<DIV align=center> <TABLE style="POSITION: relative; WIDTH: 405px; TOP: 0px; LEFT: 0px" id=table1> <TBODY> <TR> <TD> <TABLE width=416 height=479> <TBODY> <TR> <TD><IMG border=0 src="http://image14.360doc.com/DownloadImg/2010/09/0714/5114845_2.jpg" width=405 height=470> </TD></TR></TBODY></TABLE> <DIV style="POSITION: absolute; TOP: 3px; LEFT: 3px" class=divBorderStyle height="470" width="416"><IMG style="TOP: 0px; LEFT: 0px" src="http://image52.360doc.com/DownloadImg/2012/05/2208/24265553_69.jpg"></DIV></TD></TR></TBODY></TABLE></DIV>

代码简析：

静态相册，用二层表格制作。第一层表格标签中设置“css相对定位样式”，单元格中用设置有“css绝对定位样式”的块区标签控制相框图片；第二层表格的单元格中放置照片。

照片的规格要略小于相框的规格。

制作时要测试调整css绝对定位样式的“居上值”与“居左值”，使移动照片位于相框的合适位置中。

相册效果：

（二）移动相册：

代码举例：

<DIV align=center> <TABLE style="POSITION: relative; WIDTH: 416px; TOP: 0px; LEFT: 0px" id=table1> <TBODY> <TR> <TD> <MARQUEE height=479 width=416 behavior="alternate" scrollAmount=3> <TABLE width=1917 height=479> <TBODY> <TR> <TD><IMG border=0 src="http://image35.360doc.com/DownloadImg/2011/08/2907/16637697_3.jpg" width=416 height=479> <IMG border=0 src="http://image35.360doc.com/DownloadImg/2011/08/2907/16637697_2.jpg" width=416 height=479> <IMG border=0 src="http://image35.360doc.com/DownloadImg/2011/08/2907/16637697_1.jpg" width=416 height=479> <IMG border=0 src="http://image35.360doc.com/DownloadImg/2011/08/2907/16637697_6.jpg" width=416 height=479> <IMG border=0 src="http://image35.360doc.com/DownloadImg/2011/08/2907/16637697_5.jpg" width=416 height=479> </TD></TR></TBODY></TABLE></MARQUEE> <DIV style="POSITION: absolute; TOP: 3px; LEFT: 3px" class=divBorderStyle width="416" height="479"><IMG style="TOP: 0px; LEFT: 0px" src="http://image52.360doc.com/DownloadImg/2012/05/2208/24265553_69.jpg"></DIV></TD></TR></TBODY></TABLE></DIV>

代码简析：

移动相册也是用两层表格制作。第一层表格标签中设置“css相对定位样式”，用设置有“css绝对定位样式”的块区标签控制单元格中放入的相框图片；第二层表格用移动标签控制，表格的单元格中放置多张照片，表格的宽度为多张照片宽度之和。

照片的规格要略小于相框的规格。

制作时要测试调整css绝对定位样式的“居上值”与“居左值”，使移动照片位于相框的合适位置中。

相册效果：

（三）用音画图片做相框的移动相册：

代码举例：

<DIV align=center> <TABLE style="POSITION: relative; WIDTH: 416px; TOP: 0px; LEFT: 0px" id=table1> <TBODY> <TR> <TD><EMBED height=550 type=application/x-shockwave-flash align=right width=750 src=http://hsb345./domName/hsb345/20135239264731874.swf quality="high" menu="false" wmode="transparent" allowNetworking="internal" allowScriptAccess="never"> <MARQUEE style="POSITION: absolute; TOP: 40px; LEFT: 60px" height=450 behavior=alternate width=630 scrollAmount=3> <TABLE width=1917 height=479> <TBODY> <TR> <TD><IMG alt="" src="http://image33.360doc.com/DownloadImg/2011/08/0411/15253067_1.jpg" width=630 height=430><IMG alt="" src="http://image33.360doc.com/DownloadImg/2011/08/0411/15253067_2.jpg" width=630 height=430><IMG alt="" src="http://image33.360doc.com/DownloadImg/2011/08/0411/15253067_3.jpg" width=630 height=430><IMG alt="" src="http://image33.360doc.com/DownloadImg/2011/08/0411/15253067_4.jpg" width=630 height=430><IMG alt="" src="http://image33.360doc.com/DownloadImg/2011/08/0411/15253067_5.jpg" width=630 height=430><IMG alt="" src="http://image33.360doc.com/DownloadImg/2011/08/0411/15253067_6.jpg" width=630 height=430><IMG alt="" src="http://image33.360doc.com/DownloadImg/2011/08/0411/15253067_7.jpg" width=630 height=430><IMG alt="" src="http://image33.360doc.com/DownloadImg/2011/08/0411/15253067_8.jpg" width=630 height=430> </TD></TR></TBODY></TABLE></MARQUEE></TD></TR></TBODY></TABLE></DIV>

代码简析：

用音画图片做相框的移动相册，同上面的移动相册，只不过把相框图片换为了音画图片，把“css定位样式”设置在移动标签中罢了。

用音画图片做相框的移动相册，效果挺美的。不但可以欣赏漂亮的相册，而且能够聆听悦耳的音乐声音。

相册效果：

作业：

一、填空：

1、应用信纸撰写文章，有两种方法：（）方法与（）方法。

2、应用信纸撰写文章，css的相对定位样式应该设置在（）标签中，css的相对定位样式应该设置在什么标签中。

3、要想把文章内容放置到信纸的合适文章上，需要反复调整css绝对定位样式的（）值与（）值。

4、应用竖排版方法撰写文章，需要在（）标签或者（）标签中设置css的（）样式。

二、怎样获取信纸图片的地址？怎样获取信纸图片的宽度与高度？

三、简述应用信纸撰写文章的方法。

四、简述应用代码制作相册的方法。

五、应用信纸制作一篇横排版网页。

六、应用信纸制作一篇横排版网页。

七、制作一个静态相册。

八、制作一个移动相册。

“春天没来”编撰 2014年7月16日于北京