分享

*教您制作卷轴画

 春天没来 2015-03-04


 
 
       
 
 


卷轴画,这种漂亮的网页形式,许多朋友都喜欢。下面,以我制作的这篇卷轴画为例,讲解一下应用代码制作卷轴画的方法。

制作方法:

设置一个一行三列的表格,放入有定位样式的块区标签中。表格的第一个单元格中放入卷轴画的左画轴,第二个单元格中放入卷轴画的主体内容,第三个单元格放入卷轴画的右画轴。各步骤的显示修改与代码如下:

一、一行三列的表格放入块区标签中的效果:



代码如下:

<DIV class=divBorderStyleRelative title=春天没来 style="LEFT: 0px; WIDTH: 910px; POSITION: relative; TOP: 20px; HEIGHT: 430px" align=center 教您制作卷轴画>
<TABLE title=总表格 style="LEFT: 0px; WIDTH: 910px; TOP: 0px; HEIGHT: 430px" borderColor=#f0f0f0 cellSpacing=0 cellPadding=0 bgColor=#f8f8f8 border=0>
<TBODY>
<TR><!--左画轴开始处-->
<TD title=第一个单元格是左画轴 style="Z-INDEX: 1; LEFT: 1px; WIDTH: 100px; POSITION: relative; TOP: 0px; HEIGHT: 430px"></TD></TR></TBODY></TABLE></DIV>


二、放入左画轴以后的效果:



 


代码如下:

<DIV class=divBorderStyleRelative title=春天没来 style="LEFT: 0px; WIDTH: 910px; POSITION: relative; TOP: 20px; HEIGHT: 430px" align=center 教您制作卷轴画><!--总块区的定位作用是使网页在正常位置,不遮蔽“修改”按钮-->
<TABLE title=总表格 style="LEFT: 0px; WIDTH: 910px; TOP: 0px; HEIGHT: 430px" borderColor=#f0f0f0 cellSpacing=0 cellPadding=0 bgColor=#f8f8f8 border=0>
<TBODY>
<TR><!--左画轴开始处-->
<TD title=第一个单元格是左画轴 style="Z-INDEX: 1; LEFT: 1px; WIDTH: 100px; POSITION: relative; TOP: 0px; HEIGHT: 430px">
<MARQUEE id=mar1 title=第一个移动标签 style="LEFT: 0px; WIDTH: 100px; POSITION: absolute; TOP: 0px; HEIGHT: 430px" scrollAmount=2 scrollDelay=1 direction=right>
<DIV class=divBorderStyleRelative style="LEFT: 0px; WIDTH: 2760px; TOP: 0px; HEIGHT: 430px">
<TABLE style="LEFT: 0px; WIDTH: 2760px; TOP: 0px; HEIGHT: 430px" cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD style="WIDTH: 690px" background=http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3></TD>
<TD style="FILTER: FlipH(); WIDTH: 690px" background=http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3></TD>
<TD style="WIDTH: 690px" background=http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3></TD>
<TD style="FILTER: FlipH(); WIDTH: 690px" background=http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3></TD></TR></TBODY></TABLE></DIV></MARQUEE><!--背景图片的宽度为:690px,高度为:430px。-->
<TABLE title=左画轴之渐变滤镜左半部分 style="LEFT: 0px; WIDTH: 50px; POSITION: absolute; TOP: -20px; HEIGHT: 470px" cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD style="FILTER: alpha(opacity=80,finishOpacity=0,style=1)" bgColor=#444444></TD></TR></TBODY></TABLE>
<TABLE title=左画轴之渐变滤镜右半部分 style="LEFT: 50px; WIDTH: 50px; POSITION: absolute; TOP: -20px; HEIGHT: 470px" cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD style="FILTER: alpha(opacity=0,finishOpacity=85,style=1)" bgColor=#444444> </TD> </TR></TBODY></TABLE> </TD></TR></TBODY></TABLE>


三、放入网页主体内容(即:第二个单元格中的内容)以后的效果:



 
 


代码如下:

<DIV class=divBorderStyleRelative title=春天没来 style="LEFT: 0px; WIDTH: 910px; POSITION: relative; TOP: 20px; HEIGHT: 430px" align=center 教您制作卷轴画><!--总块区的定位作用是使网页在正常位置,不遮蔽“修改”按钮-->
<TABLE title=总表格 style="LEFT: 0px; WIDTH: 910px; TOP: 0px; HEIGHT: 430px" borderColor=#f0f0f0 cellSpacing=0 cellPadding=0 bgColor=#f8f8f8 border=0>
<TBODY>
<TR><!--左画轴开始处-->
<TD title=第一个单元格是左画轴 style="Z-INDEX: 1; LEFT: 1px; WIDTH: 100px; POSITION: relative; TOP: 0px; HEIGHT: 430px">
<MARQUEE id=mar1 title=第一个移动标签 style="LEFT: 0px; WIDTH: 100px; POSITION: absolute; TOP: 0px; HEIGHT: 430px" scrollAmount=2 scrollDelay=1 direction=right>
<DIV class=divBorderStyleRelative style="LEFT: 0px; WIDTH: 2760px; TOP: 0px; HEIGHT: 430px">
<TABLE style="LEFT: 0px; WIDTH: 2760px; TOP: 0px; HEIGHT: 430px" cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD style="WIDTH: 690px" background=http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3></TD>
<TD style="FILTER: FlipH(); WIDTH: 690px" background=http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3></TD>
<TD style="WIDTH: 690px" background=http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3></TD>
<TD style="FILTER: FlipH(); WIDTH: 690px" background=http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3></TD></TR></TBODY></TABLE></DIV></MARQUEE><!--背景图片的宽度为:690px,高度为:430px。-->
<TABLE title=左画轴之渐变滤镜左半部分 style="LEFT: 0px; WIDTH: 50px; POSITION: absolute; TOP: -20px; HEIGHT: 470px" cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD style="FILTER: alpha(opacity=80,finishOpacity=0,style=1)" bgColor=#444444></TD></TR></TBODY></TABLE>
<TABLE title=左画轴之渐变滤镜右半部分 style="LEFT: 50px; WIDTH: 50px; POSITION: absolute; TOP: -20px; HEIGHT: 470px" cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD style="FILTER: alpha(opacity=0,finishOpacity=85,style=1)" bgColor=#444444> </TD></TR></TBODY></TABLE></TD><!--左画轴结束,中间的移动画面开始。-->
<TD title=第二个单元格 style="LEFT: 0px; WIDTH: 800px; POSITION: relative; TOP: 0px; HEIGHT: 430px">
<MARQUEE id=mar3 title=第二个移动标签 style="LEFT: 0px; WIDTH: 800px; POSITION: absolute; TOP: 0px; HEIGHT: 430px" scrollAmount=2 scrollDelay=1 behavior=alternate>
<DIV class=divBorderStyleRelative style="LEFT: 0px; WIDTH: 2760px; TOP: 0px; HEIGHT: 430px">
<TABLE style="LEFT: 0px; WIDTH: 2760px; TOP: 0px; HEIGHT: 430px" cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD style="FILTER: FlipH(); WIDTH: 690px" background=http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3></TD>
<TD style="WIDTH: 690px" background=http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3></TD>
<TD style="FILTER: FlipH(); WIDTH: 690px" background=http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3></TD>
<TD style="WIDTH: 690px" background=http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3> </TD></TR></TBODY></TABLE></DIV></MARQUEE></TD></TR></TBODY></TABLE></DIV>


四、放入右画轴以后的效果:



 
 
       
 
 


代码如下:


<DIV class=divBorderStyleRelative title=春天没来 style="LEFT: 0px; WIDTH: 910px; POSITION: relative; TOP: 20px; HEIGHT: 430px" align=center 教您制作卷轴画><!--总块区的定位作用是使网页在正常位置,不遮蔽“修改”按钮-->
<TABLE title=总表格 style="LEFT: 0px; WIDTH: 910px; TOP: 0px; HEIGHT: 430px" borderColor=#f0f0f0 cellSpacing=0 cellPadding=0 bgColor=#f8f8f8 border=0>
<TBODY>
<TR><!--左画轴开始处-->
<TD title=第一个单元格是左画轴 style="Z-INDEX: 1; LEFT: 1px; WIDTH: 100px; POSITION: relative; TOP: 0px; HEIGHT: 430px">
<MARQUEE id=mar1 title=第一个移动标签 style="LEFT: 0px; WIDTH: 100px; POSITION: absolute; TOP: 0px; HEIGHT: 430px" scrollAmount=2 scrollDelay=1 direction=right>
<DIV class=divBorderStyleRelative style="LEFT: 0px; WIDTH: 2760px; TOP: 0px; HEIGHT: 430px">
<TABLE style="LEFT: 0px; WIDTH: 2760px; TOP: 0px; HEIGHT: 430px" cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD style="WIDTH: 690px" background=http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3></TD>
<TD style="FILTER: FlipH(); WIDTH: 690px" background=http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3></TD>
<TD style="WIDTH: 690px" background=http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3></TD>
<TD style="FILTER: FlipH(); WIDTH: 690px" background=http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3></TD></TR></TBODY></TABLE></DIV></MARQUEE><!--背景图片的宽度为:690px,高度为:430px。-->
<TABLE title=左画轴之渐变滤镜左半部分 style="LEFT: 0px; WIDTH: 50px; POSITION: absolute; TOP: -20px; HEIGHT: 470px" cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD style="FILTER: alpha(opacity=80,finishOpacity=0,style=1)" bgColor=#444444></TD></TR></TBODY></TABLE>
<TABLE title=左画轴之渐变滤镜右半部分 style="LEFT: 50px; WIDTH: 50px; POSITION: absolute; TOP: -20px; HEIGHT: 470px" cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD style="FILTER: alpha(opacity=0,finishOpacity=85,style=1)" bgColor=#444444> </TD></TR></TBODY></TABLE></TD><!--左画轴结束,中间的移动画面开始。-->
<TD title=第二个单元格 style="LEFT: 0px; WIDTH: 800px; POSITION: relative; TOP: 0px; HEIGHT: 430px">
<MARQUEE id=mar3 title=第二个移动标签 style="LEFT: 0px; WIDTH: 800px; POSITION: absolute; TOP: 0px; HEIGHT: 430px" scrollAmount=2 scrollDelay=1 behavior=alternate>
<DIV class=divBorderStyleRelative style="LEFT: 0px; WIDTH: 2760px; TOP: 0px; HEIGHT: 430px">
<TABLE style="LEFT: 0px; WIDTH: 2760px; TOP: 0px; HEIGHT: 430px" cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD style="FILTER: FlipH(); WIDTH: 690px" background=http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3></TD>
<TD style="WIDTH: 690px" background=http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3></TD>
<TD style="FILTER: FlipH(); WIDTH: 690px" background=http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3></TD>
<TD style="WIDTH: 690px" background=http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3> </TD></TR></TBODY></TABLE></DIV></MARQUEE></TD><!--中间的移动画面结束,右画轴开始。-->
<TD title=第三个单元格 style="Z-INDEX: 100; LEFT: 0px; WIDTH: 100px; POSITION: relative; TOP: 0px; HEIGHT: 430px">
<MARQUEE id=mar2 title=第三个移动标签 style="LEFT: 0px; WIDTH: 100px; POSITION: absolute; TOP: 0px; HEIGHT: 430px" scrollAmount=2 scrollDelay=1 direction=right>
<DIV class=divBorderStyleRelative style="LEFT: 0px; WIDTH: 2760px; TOP: 0px; HEIGHT: 430px">
<TABLE style="LEFT: 0px; WIDTH: 2760px; TOP: 0px; HEIGHT: 430px" cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD style="FILTER: FlipH(); WIDTH: 690px" background=http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3> </TD>
<TD style="WIDTH: 690px" background=http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3> </TD>
<TD style="FILTER: FlipH(); WIDTH: 690px" background=http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3> </TD>
<TD style="WIDTH: 690px" background=http://image48.360doc.com/DownloadImg/2012/02/0117/21195399_3> </TD></TR></TBODY></TABLE></DIV></MARQUEE>
<TABLE title=右画轴之渐变滤镜左半部分 style="LEFT: 0px; WIDTH: 50px; POSITION: absolute; TOP: -20px; HEIGHT: 470px" cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD style="FILTER: alpha(opacity=80,finishOpacity=0,style=1)" bgColor=#444444> </TD></TR></TBODY></TABLE>
<TABLE title=右画轴之渐变滤镜右半部分 style="LEFT: 50px; WIDTH: 50px; POSITION: absolute; TOP: -20px; HEIGHT: 470px" cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD style="FILTER: alpha(opacity=0,finishOpacity=85,style=1)" bgColor=#444444> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV><BR><BR><!--两个换行标签的作用是使网页不遮蔽馆方推荐的内容-->

制作说明:

一、把代码中的图片地址替换为你喜爱的图片地址。图片地址替换以后,图片的高度值与宽度值也应替换。移动屏幕中的高度值也应随着替换。

二、每部分代码中都有注释,请您认真阅读,深刻领会各部分代码的作用,仔细观察其显示效果。

三、如果有什么不懂的问题,可以给我的图书馆中发送短信询问,我们共同商榷。

点击下面的小模块,浏览更多精彩内容:

“春天没来”撰写
2015年3月4日于北京

    转藏 全屏 打印 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多