网页设计与制作任务驱动式教程单元10设计与制作网站主课件.ppt

1、网页设计与制作网页设计与制作任务驱动式教程任务驱动式教程单元单元1010设计与制作网站主页设计与制作网站主页 教学环节教学环节【教学导航教学导航】1【操作准备操作准备】2【引导训练引导训练/引导训练考核评价引导训练考核评价】3【同步训练同步训练/同步训练考核评价同步训练考核评价】4【拓展训练拓展训练/拓展训练考核评价拓展训练考核评价】5【教学导航教学导航】教学目标教学目标（1 1）能应用）能应用CSSCSS样式设计网站主页的主体布局结构样式设计网站主页的主体布局结构（2 2）能应用）能应用CSSCSS样式设计网站主页的局部布局结构样式设计网站主页的局部布局结构（3 3）能设计与制作导航栏，会使

2、用浮动框架）能设计与制作导航栏，会使用浮动框架（4 4）会插入）会插入FlvFlv视频、视频、AP DivAP Div对象和对象和SWFSWF动画动画（5 5）会设计连续滚动图片的特效）会设计连续滚动图片的特效（6 6）会创建包含底部导航栏和版权信息的脚本文件，在网页中插入外）会创建包含底部导航栏和版权信息的脚本文件，在网页中插入外部脚本文件部脚本文件（7 7）会设计用户登录表单）会设计用户登录表单（8 8）了解实现状态栏中文字移动功能的方法）了解实现状态栏中文字移动功能的方法 本单元重点本单元重点（1 1）应用）应用CSSCSS样式设计网页的布局结构样式设计网页的布局结构（2 2）设计与制作

3、导航栏）设计与制作导航栏（3 3）插入）插入FlvFlv视频、视频、AP DivAP Div对象和对象和SWFSWF动画动画 本单元难点本单元难点（1 1）设计与制作导航栏）设计与制作导航栏（2 2）设计连续滚动图片的特效）设计连续滚动图片的特效（3 3）实现状态栏中文字移动功能）实现状态栏中文字移动功能 教学方法教学方法 任务驱动法、分组讨论法、四步训练法任务驱动法、分组讨论法、四步训练法（操作准备引导训练同步训练拓展训练）（操作准备引导训练同步训练拓展训练）课时建议课时建议 2课时（含考核评价）课时（含考核评价）【操作准备操作准备】（1 1）创建所需的文件夹，拷贝所需的资源）创建所需的文件

4、夹，拷贝所需的资源（2 2）启动）启动Dreamweaver CS6Dreamweaver CS6（3 3）创建本地站点）创建本地站点（4 4）新建一个网页文档）新建一个网页文档（5 5）设置网页标题）设置网页标题（6 6）保存该网页。）保存该网页。【引导训练引导训练】【任务任务10-110-1】制作制作“E E游天下游天下”网站的主页网站的主页 本单元本单元“引导训练引导训练”的任务卡如表的任务卡如表10-110-1所所示。示。【引导训练引导训练】设计网站主页设计网站主页index1001.htmlindex1001.html的主体布局结构，应用的主体布局结构，应用div+CSSdiv+CS

5、S对网站主页的主体结构进行布局。对网站主页的主体结构进行布局。【任务描述任务描述】【任务任务10-1-110-1-1】网站主页主体布局结构设计网站主页主体布局结构设计 【任务实施任务实施】1 1定定义网页义网页主体布局主体布局结构结构的的CSSCSS样样式式 在文件夹在文件夹stylestyle中创建一个中创建一个CSSCSS样式文件样式文件“style.cssstyle.css”，在该样式文件中定义网页布局结构所需的在该样式文件中定义网页布局结构所需的CSSCSS样式。网站样式。网站主页主页index1001.htmlindex1001.html的主体布局示意图如图的主体布局示意图如图10-

6、110-1所示。所示。图图10-1网站主页网站主页index1001.html的主体布局示意图的主体布局示意图 【任务实施任务实施】（1 1）定义）定义bodybody标签的样式标签的样式 body body标签的属性设置如表标签的属性设置如表10-310-3所示。所示。（2 2）定义）定义innerWrapperinnerWrapper样式样式 innerWrapper innerWrapper样式的属性设置如表样式的属性设置如表10-410-4所示。所示。（3 3）定义）定义ly-headerly-header样式样式 ly-header ly-header样式的属性设置如表样式的属性设置

7、如表10-510-5所示。所示。（4 4）定义）定义sidebarsidebar样式样式 sidebar sidebar样式的属性设置如表样式的属性设置如表10-610-6所示。所示。（5 5）定义）定义contentcontent样式样式 content content样式的属性设置如表样式的属性设置如表10-710-7所示。所示。（6 6）定义）定义proPanelproPanel样式样式 proPanel proPanel样式的属性设置如表样式的属性设置如表10-810-8所示。所示。（7 7）定义）定义leftleft样式样式 left left样式的属性设置如表样式的属性设置如表10

8、-910-9所示。所示。【任务实施任务实施】（8 8）定义）定义rightright样式样式 right right样式的属性设置如表样式的属性设置如表10-1010-10所示。所示。（9 9）定义）定义proPanelCon2proPanelCon2样式样式 proPanelCon2 proPanelCon2样式的属性设置如表样式的属性设置如表10-1110-11所示。所示。（1010）定义）定义ly-footerly-footer样式样式 ly-footer ly-footer样式的属性设置如表样式的属性设置如表10-1210-12所示。所示。2 2链链接外部接外部样样式文件式文件styl

9、e.cssstyle.css 在网页在网页index1001.htmlindex1001.html中链接外部样式文件中链接外部样式文件style.cssstyle.css，在网页的，在网页的“”内新增一行代码：内新增一行代码：link href=style/style.css rel=stylesheet type=text/css/3 3应应用用div+CSSdiv+CSS布局布局网页网页 在网站主页中插入在网站主页中插入divdiv标签布局该网页，网站主页的主体布局结构代标签布局该网页，网站主页的主体布局结构代码如表码如表10-1310-13所示。所示。【引导训练引导训练】（1 1）在样式

10、文件）在样式文件“style.cssstyle.css”中定义网站主页中定义网站主页index1001.index1001.htmlhtml的局部布局结构所需的的局部布局结构所需的CSSCSS样式。样式。（2 2）设计网站主页）设计网站主页index1001.htmlindex1001.html的局部布局结构，应的局部布局结构，应用用div+CSSdiv+CSS对网站主页的局部结构进行布局。对网站主页的局部结构进行布局。【任务描述任务描述】【任务任务10-1-210-1-2】网站主页局部布局结构设计网站主页局部布局结构设计 【任务实施任务实施】1 1定定义义中部左中部左侧区块侧区块布局布局结构

11、结构的的CSSCSS样样式式（1 1）定义）定义panelpanel样式样式 panel panel样式的属性设置如表样式的属性设置如表10-1410-14所示。所示。（2 2）定义）定义panel-loginpanel-login样式样式 panel-login panel-login样式的属性设置如表样式的属性设置如表10-1510-15所示。所示。（3 3）定义）定义bannerbanner样式样式 banner banner样式的属性设置如表样式的属性设置如表10-1610-16所示。所示。（4 4）定义）定义panel-titlepanel-title样式样式 panel-title

12、 panel-title样式的属性设置如表样式的属性设置如表10-1710-17所示。所示。2 2应应用用div+CSSdiv+CSS布局中部左布局中部左侧区块侧区块 中部左侧区块的布局结构代码如表中部左侧区块的布局结构代码如表10-1810-18所示。所示。【任务实施任务实施】3 3定定义义中部右中部右侧侧主体主体区块区块布局布局结构结构的的CSSCSS样样式式（1 1）定义）定义proPanelCon1proPanelCon1样式样式 proPanelCon1 proPanelCon1样式的属性设置如表样式的属性设置如表10-1910-19所示。所示。（2 2）定义）定义proPanelC

13、on3proPanelCon3样式样式 proPanelCon3 proPanelCon3样式的属性设置如表样式的属性设置如表10-2010-20所示。所示。（3 3）定义）定义mapPanelmapPanel样式样式 mapPanel mapPanel样式的属性设置如表样式的属性设置如表10-2110-21所示。所示。（4 4）定义）定义pro-titlepro-title样式样式 pro-title pro-title样式的属性设置如表样式的属性设置如表10-2210-22所示。所示。（5 5）定义）定义pro-imgpro-img样式样式 pro-img pro-img样式的属性设置如表

14、样式的属性设置如表10-2310-23所示。所示。（6 6）定义）定义pro-intropro-intro样式样式 pro-intro pro-intro样式的属性设置如表样式的属性设置如表10-2410-24所示。所示。（7 7）定义）定义pro-morepro-more样式样式 pro-more pro-more样式的属性设置如表样式的属性设置如表10-2510-25所示。所示。【任务实施任务实施】4 4应应用用div+CSSdiv+CSS布局右布局右侧侧的主体的主体区块区块右侧主体区块的布局结构代码如表右侧主体区块的布局结构代码如表10-2610-26所示。所示。5 5应应用用div+C

15、SSdiv+CSS布局右布局右侧侧主体主体区块区块的左部的左部右侧主体区块左部的布局结构代码如表右侧主体区块左部的布局结构代码如表10-2710-27所示。所示。6 6应应用用div+CSSdiv+CSS布局右布局右侧侧主体主体区块区块的右部的右部右侧主体区块右部的布局结构代码如表右侧主体区块右部的布局结构代码如表10-2810-28所示。所示。7 7应应用用div+CSSdiv+CSS布局右布局右侧侧主体主体区块区块的中部的中部右侧主体区块中部的布局结构代码如表右侧主体区块中部的布局结构代码如表10-2910-29所示。所示。【引导训练引导训练】设计与制作一个包含导航栏的网页文档设计与制作一

16、个包含导航栏的网页文档top_nav.htmltop_nav.html，该，该网页显示在网站主页网页显示在网站主页index1001.htmlindex1001.html的顶部浮动框架中。的顶部浮动框架中。【任务描述任务描述】【任务任务10-1-310-1-3】设计与制作包含导航栏的网页文档设计与制作包含导航栏的网页文档top_nav.htmltop_nav.html 【任务实施任务实施】1 1创创建建网页网页文文档档top_nav.htmltop_nav.html 在文件夹在文件夹“webPagewebPage”中创建一个网页文档中创建一个网页文档top_nav.htmltop_nav.ht

17、ml，该网页将在网站主页顶部的浮动框架中显示。该网页将在网站主页顶部的浮动框架中显示。2 2定定义网页义网页文文档档top_nav.htmltop_nav.html的的CSSCSS样样式式 在文件夹在文件夹stylestyle中创建一个中创建一个CSSCSS样式文件样式文件“menu.cssmenu.css”，在，在该样式文件中定义网页该样式文件中定义网页top_nav.htmltop_nav.html中所需的中所需的CSSCSS样式。样式。（1 1）定义标签）定义标签tdtd的样式的样式 标签标签tdtd样式的属性设置如表样式的属性设置如表10-3010-30所示。所示。【任务实施任务实施】

18、（2 2）定义标签）定义标签a a的样式的样式 标签标签a a的属性设置如表的属性设置如表10-3110-31所示。所示。（3 3）定义）定义first_navfirst_nav样式样式 first_nav first_nav样式的属性设置如表样式的属性设置如表10-3210-32所示。所示。（4 4）定义样式）定义样式first_navfirst_nav内所包含元素的样式内所包含元素的样式 first_nav first_nav样式内所包含元素的样式的属性设置如表样式内所包含元素的样式的属性设置如表10-3310-33所示。所示。（5 5）定义）定义second_navsecond_nav样

19、式样式 second_nav second_nav样式的属性设置如表样式的属性设置如表10-3410-34所示。所示。（6 6）定义样式）定义样式second_navsecond_nav内所包含元素的样式内所包含元素的样式 样式样式second_navsecond_nav内所包含元素的样式的属性设置如表内所包含元素的样式的属性设置如表10-3510-35所示。所示。（7 7）定义网站主页）定义网站主页index1001.htmlindex1001.html的二级导航菜单的样式的二级导航菜单的样式 二级导航菜单的样式的属性设置如表二级导航菜单的样式的属性设置如表10-3610-36所示。所示。【

20、任务实施任务实施】3 3编写编写JavaScriptJavaScript代代码码，实现网页实现网页特效特效（1 1）在网页中显示当前日期）在网页中显示当前日期 在网页中显示当前日期的在网页中显示当前日期的JavaScriptJavaScript代码如表代码如表10-3710-37所示，在网页所示，在网页文档文档top_nav.htmltop_nav.html的的与与之间添加这些之间添加这些JavaScriptJavaScript代码。代码。然后在网页中需要显示当前日期的位置添加以下代码即可。然后在网页中需要显示当前日期的位置添加以下代码即可。showNowDate()showNowDate()

21、【任务实施任务实施】（2 2）动态切换二级菜单）动态切换二级菜单 在文件夹在文件夹“js js”中创建一个中创建一个JavaScriptJavaScript文档文档“menu.jsmenu.js”，在该文档中，在该文档中编写动态切换二级菜单的编写动态切换二级菜单的JavaScriptJavaScript代码，如表代码，如表10-3810-38所示。所示。在网页文档在网页文档top_nav.htmltop_nav.html的的与与之间添加以下代码链之间添加以下代码链接外部脚本文件接外部脚本文件menu.jsmenu.js：script language=JavaScript type=text/

22、JavaScript src=./js/menu.js。4 4应应用用div+CSSdiv+CSS布局布局网页网页文文档档top_nav.htmltop_nav.html（1 1）编写一级导航菜单的布局结构代码）编写一级导航菜单的布局结构代码（2 2）编写二级导航菜单的布局结构代码）编写二级导航菜单的布局结构代码【引导训练引导训练】设计与制作网页设计与制作网页image_move.htmimage_move.htm，该页面中包含连续滚，该页面中包含连续滚动图片的网页特效。动图片的网页特效。【任务描述任务描述】【任务任务10-1-410-1-4】设计与制作包含连续滚动图片特效的的网页文档设计与制

23、作包含连续滚动图片特效的的网页文档【任务实施任务实施】1 1创创建建网页网页文文档档image_move.htmlimage_move.html 在文件夹在文件夹“webPagewebPage”中创建一个网页文档中创建一个网页文档image_movimage_move.htmle.html，该网页将在网站主页左侧的浮动框架中显示。，该网页将在网站主页左侧的浮动框架中显示。2 2添加添加divdiv标签标签和多幅和多幅图图片片 在网页文档在网页文档image_move.htmlimage_move.html中插入中插入divdiv标签，然后插入标签，然后插入多幅图片，多幅图片，HTMLHTML代

24、码如表代码如表10-3910-39所示。所示。3 3编写实现连续滚动图编写实现连续滚动图片的片的JavaScriptJavaScript代代码码 在网页文档在网页文档image_move.htmlimage_move.html中添加实现连续滚动图片中添加实现连续滚动图片的的JavaScriptJavaScript代码，这些代码位于已插入的代码，这些代码位于已插入的divdiv标签之后，标签之后，如表如表10-4010-40所示。所示。【引导训练引导训练】创建脚本文件创建脚本文件footer.jsfooter.js，该脚本文件包含实现底部导航栏，该脚本文件包含实现底部导航栏和版权信息的代码。和版

25、权信息的代码。【任务描述任务描述】【任务任务10-1-510-1-5】创建实现底部导航栏和版权信息的脚本文件创建实现底部导航栏和版权信息的脚本文件 【任务实施任务实施】在文件夹在文件夹“js js”中新建一个脚本文件中新建一个脚本文件“footer.jsfooter.js”，在该文件，在该文件中输入表中输入表10-4110-41所示的代码。所示的代码。表表10-4110-41脚本文件脚本文件footer.jsfooter.js的代码的代码行号行号JavaScript代码代码010203040506070809101112var footerContent=;footerContent+=旅游服

26、务旅游服务|;footerContent+=联系我们联系我们|;footerContent+=网站地图网站地图|;footerContent+=旅游调查旅游调查|;footerContent+=用户留言用户留言|;footerContent+=设为首页设为首页|;footerContent+=收藏本站收藏本站;footerContent+=e游天下网游天下网 版权所有版权所有 Copyright 2013-2016 蝴蝶工作室蝴蝶工作室;footerContent+=为了您正常的浏览页面，推荐使用分辨率为为了您正常的浏览页面，推荐使用分辨率为1024768及以上及以上;footerConten

27、t+=;document.write(footerContent);【引导训练引导训练】在网站主页在网站主页index1001.htmlindex1001.html的顶部导航区域插入浮动框的顶部导航区域插入浮动框架架。【任务描述任务描述】【任务任务10-1-610-1-6】在网站主页的顶部导航区域插入浮动框架在网站主页的顶部导航区域插入浮动框架 【任务实施任务实施】在网页在网页index1001.htmlindex1001.html中中divdiv标签标签 内插入内插入浮动框架，代码如表浮动框架，代码如表10-4210-42所示。所示。表表10-4210-42包含浮动框架的导航区域的代码包含浮

28、动框架的导航区域的代码行号行号JavaScript代码代码010203040506 图片移动图片移动 【引导训练引导训练】设计与制作网站主页的中部区域，该区域中包括用户登录设计与制作网站主页的中部区域，该区域中包括用户登录表单、展示图片和播放视频区块、图片滚动区块。表单、展示图片和播放视频区块、图片滚动区块。【任务描述任务描述】【任务任务10-1-710-1-7】设计与制作网站主页的中部区域设计与制作网站主页的中部区域 【任务实施任务实施】1 1设计与设计与制作制作网页网页的用的用户户登登录录表表单单（1 1）定义用户登录表单的）定义用户登录表单的CSSCSS样式样式 在样式文件在样式文件“s

29、tyle.cssstyle.css”中定义网页中部区域所需的中定义网页中部区域所需的CSSCSS样式。重新样式。重新定义标签定义标签formform的属性，代码如表的属性，代码如表10-4310-43所示。所示。定义样式定义样式div#panel-logindiv#panel-login内所包含元素的样式，代码如表内所包含元素的样式，代码如表10-4410-44所示。所示。定义标签定义标签inputinput的属性及其所包含元素的样式，代码如表的属性及其所包含元素的样式，代码如表10-4510-45所示所示（2 2）编写验证用户输入信息的）编写验证用户输入信息的JavaScriptJavaSc

30、ript代码代码 验证表单控件中输入信息的验证表单控件中输入信息的JavaScriptJavaScript代码如表代码如表10-4610-46所示。所示。（3 3）在用户登录表单插入）在用户登录表单插入formform与与divdiv标签标签 在网页在网页index1001.htmlindex1001.html的用户登录表单中插入表单与的用户登录表单中插入表单与divdiv标签，且设标签，且设置其属性，置其属性，HTMLHTML代码如表代码如表10-4710-47所示。所示。（4 4）在表单中插入表单控件）在表单中插入表单控件 在用户登录表单的表单中分别输入标签文字，插入文件域、图像和在用户登

31、录表单的表单中分别输入标签文字，插入文件域、图像和按钮。按钮。【任务实施任务实施】2 2设计与设计与制作展示制作展示图图片和播放片和播放视频视频的的区块区块（1 1）定义展示图片和播放视频区块的）定义展示图片和播放视频区块的CSSCSS样式样式 在样式文件在样式文件“style.cssstyle.css”中定义展示图片和播放视频区块所需的中定义展示图片和播放视频区块所需的CSSCSS样式。重新定义标签样式。重新定义标签“tdtd”的样式，代码如表的样式，代码如表10-4910-49所示。所示。重新定义标签重新定义标签“a a”的样式，代码如表的样式，代码如表10-5010-50所示。所示。（2

32、 2）编写自定义函数）编写自定义函数showContent()showContent()实现动态改变背景的功能实现动态改变背景的功能 自定义函数自定义函数showContent()showContent()用于动态改变背景，其代码如表用于动态改变背景，其代码如表10-5110-51所示。所示。（3 3）插入一个）插入一个1 1行行1 1列表格列表格table1table1 在在divdiv标签标签与与之间插入一个之间插入一个1 1行行1 1列的表格，列的表格，设置其宽度为设置其宽度为“175175像素像素”，高度为，高度为“128128像素像素”，填充、间距和边框，填充、间距和边框都为都为“0

33、 0”，其，其IDID标识为标识为“table1table1”，HTMLHTML代码如表代码如表10-5210-52所示。所示。【任务实施任务实施】2 2设计与设计与制作展示制作展示图图片和播放片和播放视频视频的的区块区块（4 4）在表格）在表格table1table1中插入两个表格中插入两个表格 在表格在表格table1table1中先插入一个中先插入一个4 4行行1 1列的表格，设置其宽度为列的表格，设置其宽度为“175175像素像素”，高，高度为度为“2020像素像素”，填充、间距和边框都为，填充、间距和边框都为“0 0”，其，其IDID标识为标识为“table11table11”。在该

34、。在该表格的第表格的第2 2个和第个和第3 3个单元格中输入文字，设置单元格的背景图像，输入必要的个单元格中输入文字，设置单元格的背景图像，输入必要的代码，代码如表代码，代码如表10-5310-53所示。所示。在表格在表格table11table11的下方插入一个的下方插入一个1 1行行1 1列的表格，设置其的宽度为列的表格，设置其的宽度为“175175像像素素”，填充、间距和边框都为，填充、间距和边框都为“0 0”，其，其IDID标识为标识为“table12table12”，代码如表，代码如表10-5410-54所示。所示。（5 5）在表格）在表格table12table12中插入两个表格中

35、插入两个表格 在表格在表格table12table12中先插入一个中先插入一个1 1行行1 1列的表格，设置其的宽度为列的表格，设置其的宽度为“175175像素像素”，填充、间距和边框都为填充、间距和边框都为“0 0”，其，其IDID标识为标识为“content_1content_1”，显示方式为，显示方式为“blockblock”，代码如表代码如表10-5510-55所示。所示。【任务实施任务实施】2 2设计与设计与制作展示制作展示图图片和播放片和播放视频视频的的区块区块 将光标置于表格将光标置于表格content_1content_1的单元格中，在的单元格中，在Dreamweaver CS

36、6Dreamweaver CS6的主界面中，的主界面中，选择命令选择命令【插入插入】【媒体媒体】【FLVFLV】，打开，打开【插入插入 FLVFLV】对话框，在该对话框，在该对话框中输入对话框中输入FlvFlv视频的视频的URLURL，设置，设置FlvFlv视频的属性。视频的属性。然后单击然后单击【确定确定】按钮，在表格按钮，在表格content_1content_1的单元格中完成的单元格中完成flvflv格式视频的插格式视频的插入。在表格入。在表格content_1content_1中选取所插入的中选取所插入的FlvFlv视频，在视频，在【属性属性】面板中对其属性进面板中对其属性进行设置。行

37、设置。切换到切换到【代码代码】视图，在表格视图，在表格content_1content_1的下方输入的下方输入HTMLHTML代码，插入另一代码，插入另一个个1 1行行1 1列的表格，其列的表格，其IDID标识为标识为“content_2content_2”，显示方式为，显示方式为“nonenone”，且在表格，且在表格content_2content_2中的单元格中插入一幅图像，代码如表中的单元格中插入一幅图像，代码如表10-5610-56所示。所示。在在divdiv标签标签与与之间输入文字之间输入文字“神奇的自然界神奇的自然界”，插入文件夹插入文件夹“imagesimages”中的图像中的

38、图像“more.gifmore.gif”。【任务实施任务实施】3 3设计与设计与制作主制作主页页的的图图片片滚动区滚动区域域 在在divdiv标签标签与与之间插入浮动框架，显示网页之间插入浮动框架，显示网页“imaimage_move.htmlge_move.html”，代码如表，代码如表10-5710-57所示。所示。4 4设计与设计与制作主制作主页页index1001.htmlindex1001.html中部右中部右侧侧的主体的主体区区域域（1 1）在）在proPanelproPanel区域输入文字和插入图像区域输入文字和插入图像 在网站主页在网站主页index1001.htmlindex

39、1001.html中部右侧的主体区域中输入文字，插入图像，中部右侧的主体区域中输入文字，插入图像，H HTMLTML代码如表代码如表10-5810-58所示，其浏览效果如图所示，其浏览效果如图10-510-5所示。所示。（2 2）在）在mapPanelmapPanel区域插入景点分布图区域插入景点分布图 在在mapPanelmapPanel区域插入一幅景点分布图，区域插入一幅景点分布图，HTMLHTML代码如表代码如表10-5910-59所示。所示。图图10-5网页中部右侧主体区域浏览效果网页中部右侧主体区域浏览效果 【引导训练引导训练】先在网页中插入两个先在网页中插入两个AP DivAP D

40、iv对象，然后在对象，然后在AP DivAP Div对象中对象中各插入一个各插入一个SWFSWF动画。动画。【任务描述任务描述】【任务任务10-1-810-1-8】在主页中插入在主页中插入AP DivAP Div对象和对象和SWFSWF动画动画 【任务实施任务实施】1 1插插入入AP DivAP Div对对象象 在网页在网页index1001.htmlindex1001.html中景点分布图中景点分布图map01.gifmap01.gif左下角插入一个左下角插入一个AP AP DivDiv对象对象layer1layer1，且设置其属性。同样在图像，且设置其属性。同样在图像m03.jpgm03.

41、jpg的位置插入一个的位置插入一个A AP DivP Div对象对象layer2layer2且设置其属性。且设置其属性。两个两个AP DivAP Div对象的对象的CSSCSS样式代码如表样式代码如表10-6010-60所示。所示。2 2在在AP DivAP Div对对象中象中插插入入SWFSWF动画动画 在在AP DivAP Div对象对象layer1layer1中插入文件夹中插入文件夹“flashflash”中的中的SWFSWF动画动画“01.swf01.swf”，且将其宽度设置为且将其宽度设置为“233233”，高度设置为，高度设置为“122122”。同样，在同样，在AP DivAP D

42、iv对象对象layer2layer2中插入文件夹中插入文件夹“flashflash”中的中的SWFSWF动画动画“0 02.swf2.swf”，且将其宽度设置为，且将其宽度设置为“147147”，高度设置为，高度设置为“102102”。【引导训练引导训练】在网站主页在网站主页index1001.htmlindex1001.html中插入外部脚本文件中插入外部脚本文件footer.jsfooter.js，设置网页的底部导航栏和版权信息。设置网页的底部导航栏和版权信息。【任务描述任务描述】【任务任务10-1-910-1-9】在主页在主页index1001.htmlindex1001.html中插入

43、外部脚本文件中插入外部脚本文件【任务实施任务实施】在在divdiv标签标签与与之间插入文件夹之间插入文件夹“js js”中的脚本文件中的脚本文件“footer.jsfooter.js”，设置网页的底部导航栏和，设置网页的底部导航栏和版权信息，代码如下所示。版权信息，代码如下所示。script language=javascript src=js/footer.js type=text/javascript【引导训练引导训练】编写编写JavaScriptJavaScript代码，实现主页代码，实现主页index1001.htmlindex1001.html的状态栏的状态栏中文字的移动功能。中文字

44、的移动功能。【任务描述任务描述】【任务任务10-1-1010-1-10】在主页在主页index1001.htmlindex1001.html中实现状态栏中文字的移动效果中实现状态栏中文字的移动效果【任务实施任务实施】切换到切换到【代码代码】视图，在网页视图，在网页index1001.htmlindex1001.html的的headhead部分部分输入如表输入如表10-6110-61所示所示JavaScriptJavaScript代码，实现状态栏中文字的代码，实现状态栏中文字的移动效果。移动效果。【引导训练考核实战引导训练考核实战】本单元的本单元的“引导训引导训练练”考核评价内容如考核评价内容如

45、表表10-6210-62所示。所示。表表10-6210-62单元单元1010“引导训练引导训练”考核评价表考核评价表 【同步训练同步训练】【任务描述任务描述】【任务任务10-210-2】制作制作“快乐旅游快乐旅游”网站的主页网站的主页 表表10-6310-63单元单元1010“同步训练同步训练”任务卡任务卡 本单元本单元“同步训练同步训练”的任务卡如表的任务卡如表10-6310-63所示。所示。【同步训练考核实战同步训练考核实战】本单元的本单元的“同步训练同步训练 ”考核评价内容如表考核评价内容如表10-7110-71所示。所示。表表10-7110-71单元单元1010“同步训练同步训练 ”考

46、核评价表考核评价表 【拓展训练拓展训练】【任务描述任务描述】【任务任务10-310-3】制作制作“爱旅游爱旅游”网站的主页网站的主页 表表10-7210-72单元单元1010“拓展训练拓展训练”任务卡任务卡本单元本单元“拓展训练拓展训练”的任务卡如表的任务卡如表10-7210-72所示。所示。【拓展训练考核实战拓展训练考核实战】本单元的本单元的“拓展训练拓展训练 ”考核评价内容如表考核评价内容如表10-7410-74所示。所示。表表10-7410-74单元单元1010“拓展训练拓展训练 ”考核评价表考核评价表 【单元小结单元小结】本单元综合运用了多方面的知识和技能设计与制作网本单元综合运用了多

47、方面的知识和技能设计与制作网站的主页，详细介绍了该网页的主体布局结构和局部布局站的主页，详细介绍了该网页的主体布局结构和局部布局结构的设计过程。本单元运用了结构的设计过程。本单元运用了div+CSSdiv+CSS布局网页，该网布局网页，该网页中包含了多种网页元素：文字、图像、导航栏、浮动框页中包含了多种网页元素：文字、图像、导航栏、浮动框架、表单、视频、架、表单、视频、AP DivAP Div、SWFSWF动画，也展示了这些网页动画，也展示了这些网页元素的综合运用效果。该网页的底部导航栏和版权信息通元素的综合运用效果。该网页的底部导航栏和版权信息通过插入外部脚本文件过插入外部脚本文件footer.jsfooter.js获取，同时使用了获取，同时使用了JavaScriJavaScriptpt程序实现状态栏中文字的移动功能。程序实现状态栏中文字的移动功能。快乐学习、高效学习快乐学习、高效学习