第 二 章 标 签 应 用
第十五节 移动图片（7）
本节继续学习移动图片。下面讲解图片的两种移动代码。要深刻领会标签中的内容，学会应用这些移动标签。
一、交替展示的图片代码：
<table border="2" cellSpacing="25" cellPadding="0" width="600"
0916/3145880_2.gif" align="center">
<tbody>
<tr>
<td>
<table border="0" cellSpacing="10" borderColorLight="#6c3365"
borderColorDark="#6c3365" cellPadding="0" width="100%"
0916/3145880_3.jpg" bortercolor="#000000">
<tbody>
<tr>
<td>
<table border="0" cellSpacing="0" width="100%" background="
<table border="0" cellSpacing="20" width="100%" background="
<table border="0" cellPadding="0" width="600" background="
align="center" height="800">
<tbody>
<tr>
<td>
<div>
<marquee height="800" width="600" scrollAmount="4">
<marquee direction="right" height="800" width="600" scrollAmount="4">
<img style="height: 800px; filter: fliph;" title="" alt="“春天没来”欢迎您" src="
width="600" height="800"></marquee></marquee> </div></td></tr></tbody>
</table> </div></td></tr></tbody></table> </div></td></tr></tbody></table>
</td></tr></tbody></table> </td></tr></tbody></table>
代码解析：
1、“交替展示的图片”设置了一个五层表格，在第五层表格中，放置了一个背景图片。第五层表格的单元格中，用两个移动标签控制一个图片，第一个移动标签移动方向“向左”，第二个移动标签移动方向“向右”。背景图片和单元格中的图片，是同一地址的图片（也就是同一个图片），只不过在单元格的图片标签里，添加了一个左右翻转（也叫水平翻转）代码（filter: fliph）罢了。
2、我用五种不同的颜色标示各个表格的代码，以便大家能够分辨清楚各个表格。前面的四层表格中也有三处设置了背景图片，其作用有两点：
（１）当设置了表格的cellSpacing（间距）属性的时候，边框会更加美丽；
（２）是预防某个背景图片失效的。怕背景图片失效以后，边框不够美丽。
“交替展示的图片”显示效果：
展开的图片自右向左逐渐消失，下层的图片自右向左逐渐展开。两个图片如此不断循环。
二、图片围绕图片转代码：
<center>
<div style="left: -20px; top: 0px; width: 620px; position: relative;" id="table1"
class="divBorderStyleRelative">
<table border="20" cellSpacing="0" borderColor="#990000" cellPadding="1"
width="620" bgColor="#00ff00" height="300">
<tbody>
<tr>
<td>
<table border="0" cellSpacing="1" cellPadding="2" width="610" bgColor="#228b22">
<tbody>
<tr>
<td>
<table border="0" cellSpacing="1" cellPadding="2" width="610" bgColor="#228b22" height="90">
<tbody>
<tr>
<td>
<marquee scrollAmount="2">
0613/16/4086709_201106131657330633.jpg">
<br><img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
</marquee></td></tr></tbody></table>
</td></tr></tbody></table>
<table border="0" cellSpacing="1" cellPadding="2" width="616"
bgColor="#228b22"
height="100">
<tbody>
<tr>
<td width="120">
<marquee direction="up" height="180" width="110" scrollAmount="2">
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<br><img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
</marquee></td>
<td width="370">
<table border="1">
<tbody>
<tr>
<td>
<p align="center"><font style="font-size: 24px;" color="#ffff00">
<strong>“春天没来”欢迎您</strong></font>
<embed height="200"
type="application/x-shockwave-flash" width="350"
quality="high" menu="false" wmode="transparent">
</p></td></tr></tbody></table>
<td width="120">
<marquee direction="down" height="180" width="110"
scrollAmount="2">
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<br><img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
</marquee></td></tr></tbody></table>
<table border="0" cellSpacing="2" cellPadding="3" width="616"
bgColor="#228b22" height="90">
<tbody>
<tr>
<td>
<marquee direction="right" scrollAmount="2">
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<br><img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
<img style="width: 50px; height: 50px;"
</marquee></td></tr></tbody></table></td></tr></tbody></table></div></center>
效果图：
代码解析：
1、“图片围绕图片转”在二重表格中放入了三个表格。
2、第一个表格的单元格内放入了向左移动的20个小图片，放入的小图片分为两行。
3、第二个表格分为三个单元格。第一个单元格内放入了向上移动的20个小图片，放入的小图片分为两列；第二个单元格内放入了一个表格。表格的单元格中输入了一段文字：“'春天没来’欢迎您”，并插入了一个动画图片；第三个单元格内放入了向下移动的20个小图片，放入的小图片分为两列。
4、第三个表格放入了向右移动的20个小图片，放入的小图片分为两行。
作业：
1、应用上面的两种代码，各制作一篇文章。
2、制作“交替展示的图片”时，替换图片以后，一定要把上面代码中的“表格规格”、“背景图片规格”都修改得和你选择的图片规格相一致，这样制作出来的网页比较美观。
3、“图片围绕图片转”中的小图片，可以减少小图片的个数，把小图片的规格加大。
可以应用已经学过的代码知识，任意修改上面的代码，以便发挥自己的创作能力。但是有一条原则，必须观察显示的实际效果，以效果好为标准。
２０1２年11月9日于北京
第 二 章 标 签 应 用
第十六节 移动图片（8）
本节继续学习图片的移动。下面讲解两种“交替展示的图片”代码和“图中图 移动图”代码。要深刻领会标签中的内容，学会应用这些移动标签。
一、交替展示的图片：
代码1：
<table border="2" cellSpacing="15" cellPadding="0" width="600"
background=http://image9.360doc.com/DownloadImg/2010/05/0916/3145880_2.gif"
align="center">
<tbody>
<tr>
<td>
<table border="0" cellSpacing="10"
borderColorLight="#6c3365" borderColorDark="#6c3365" cellPadding="0" width="100%"
background=http://image9.360doc.com/DownloadImg/2010/05/0916/3145880_3.jpg bortercolor="#000000">
<tbody>
<tr>
<td>
<table border="0" cellSpacing="0" width="100%"
background=http://image9.360doc.com/DownloadImg/2010/05/0916/3145880_4.jpg">
<tbody>
<tr>
<td>
<table style="border: 1px double white; left: 0px;
overflow: hidden;" cellSpacing="0" cellPadding="0"
width="479" height="270">
<tbody>
<tr>
<td align="center">
<table border="0" cellPadding="0" width="600"
background="
http://image9.360doc.com/DownloadImg/2010/05/0916/3145880_1.jpg" align="center"
height="800">
<tbody>
<tr>
<td>
<marquee direction="right" height="800" width="600" scrollAmount="4">
<marquee height="800" width="600" scrollAmount="4">
<img style="height: 800px; filter: fliph;" title=""
alt="“春天没来”欢迎您" src=http://image9.360doc.com/DownloadImg/2010/05/0916/3145880_1.jpg
width="600" height="800">
</marquee></marquee></td></tr></tbody></table>
</td></tr></tbody></table></td></tr></tbody>
</table></td></tr></tbody></table></td></tr>
</tbody></table>
代码解析：
此代码设置了一个五重表格。在第五层表格的表格标签中设置了一个背景图片；在单元格中放入了一个由两个移动标签控制的图片，这个图片是背景图片的左右翻转图片。两个移动标签的移动方向，一个“向左”，另一个“向右”。显示效果：背景图片与单元格中的图片交替展示。
比较一下，此图片与上一节的交替展示的图片显示效果有何不同？（提示：图片的移动方向。）
代码2：
<table border="0" cellPadding="0" width="800"
background=http://image16.360doc.com/DownloadImg/2010/10/2620/6309818_1.jpg height="600">
<tbody>
<tr>
<td>
<div>
<marquee direction="down" height="600" width="800" scrollAmount="4">
<marquee direction="up" height="600" width="800"
scrollAmount="4">
<img style="height: 600px; filter: alpha WIDTH: 800px;" alt="春天没来"
width="800" height="600" >
</marquee></marquee></div></td></tr></tbody>
</table>
二、图中图 移动图 代码：
代码解析：
1、此代码设置一个表格，表格中放入一个背景图片（表格的规格一定要和背景图片的规格相同），单元格中放入一个图片。
2、背景图片最好是规格大一些的风景图片；
3、第一个移动标签，移动方向“向上”，移动方式“来回走”；
4、第二个移动标签，移动方向“向左”，移动方式“来回走”。第二个移动标签的“移动屏幕宽度”可以和第一个移动标签的移动屏幕宽度相同，移动高度，必须小于第一个移动标签的移动屏幕高度。
5、两个移动标签中的移动速度最好相同。
6、表格的规格要比移动屏幕的规格大一些。
作业：
应用上面的两种移动代码，各制作一篇文章。
２０1２年11月9日于北京
