中职高教版《网页设计与制作任务驱动教程》10-1-6 在主页中插入AP Div课件

1 单元10　设计网站主页与整合网站 【任务10-1】制作“E游天下”网站的主页 《网页设计与制作任务驱动教程（第3版）》 1 2 网页index1001.html的浏览效果如图10-1所示。 图10-1 网页index1001.html的浏览效果 《网页设计与制作任务驱动教程（第3版）》 3 【任务描述】 【任务10-1-6】在主页中插入AP Div 对象和SWF动画 先在网页中插入两个AP Div对象，然后在AP Div对象中各插入一个SWF动画。 《网页设计与制作任务驱动教程（第3版）》 4 【任务实施】 1．插入AP Div对象 在网页index1001.html中图像m03.jpg的位置插入一个AP Div对象layer1且设置其属性。该AP Div的CSS样式代码如表10-44所示。 表10-44　AP Div对象的CSS样式代码 行号 HTML代码 01 02 03 04 05 06 07 08 09 10 11 12 <style type="text/css"> <!-- #layer1 { position: absolute; width: 132px; height: 103px; z-index: 1; left: 44px; top: -120px; } --> </style> 《网页设计与制作任务驱动教程（第3版）》 5 2．在AP Div对象中插入SWF动画 在AP Div对象layer1中插入文件夹“flash”中的SWF动画“02.swf”，且将其宽度设置为“147”，高度设置为“102”。 《网页设计与制作任务驱动教程（第3版）》 5 6 【任务描述】 【任务10-1-7】在主页index1001.html 中插入外部脚本文件 在网站主页index1001.html中插入外部脚本文件footer.js，设置网页的底部导航栏和版权信息。 《网页设计与制作任务驱动教程（第3版）》 7 【任务实施】 在div标签<div id=ly-footer>与</div>之间插入文件夹“js”中的脚本文件“footer.js” ，设置网页的底部导航栏和版权信息，代码如下所示。 <script language=javascript src="js/footer.js" type=text/javascript></script> 《网页设计与制作任务驱动教程（第3版）》 8 【任务描述】 【任务10-1-8】在主页index1001.html 中实现状态栏中文字的移动效果 编写JavaScript代码，实现主页index1001.html的状态栏中文字的移动功能。 《网页设计与制作任务驱动教程（第3版）》 9 【任务实施】 切换到【代码】视图，在网页index1001.html的head部分输入如表10-45所示JavaScript代码，实现状态栏中文字的移动效果。 表10-45　实现状态栏中文字移动效果的代码 行号 JavaScript代码 01 02 03 04 05 06 07 08 09 10 <script language="JavaScript1.2"> <!-- function helpor_net(seed) { var m1 = "天下美景尽收E游天下网" ; var m2 = "" ; var msg=m1+m2; var out = " "; var c = 1; var speed = 120; 《网页设计与制作任务驱动教程（第3版）》 10 表10-45　实现状态栏中文字移动效果的代码(续表） 行号 JavaScript代码 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 if (seed > 100) { seed-=2; var cmd="helpor_net(" + seed + ")"; timerTwo=window.setTimeout(cmd,speed); } else if (seed <= 100 && seed > 0) { for (c=0 ; c < seed ; c++) { out+=" "; } out+=msg; seed-=2;