版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
网页设计与制作任务驱动式教程单元10设计与制作网站主页网页设计与制作单元10设计与制作网站主页教学环节【教学导航
】
1【操作准备】2【引导训练/引导训练考核评价】3【同步训练/同步训练考核评价】
4【拓展训练/拓展训练考核评价】5教学环节【教学导航】1【操作准备】2【引导训练/引导【教学导航】教学目标（1）能应用CSS样式设计网站主页的主体布局结构（2）能应用CSS样式设计网站主页的局部布局结构（3）能设计与制作导航栏，会使用浮动框架（4）会插入Flv视频、APDiv对象和SWF动画（5）会设计连续滚动图片的特效（6）会创建包含底部导航栏和版权信息的脚本文件，在网页中插入外部脚本文件（7）会设计用户登录表单（8）了解实现状态栏中文字移动功能的方法
本单元重点（1）应用CSS样式设计网页的布局结构（2）设计与制作导航栏（3）插入Flv视频、APDiv对象和SWF动画
本单元难点（1）设计与制作导航栏（2）设计连续滚动图片的特效（3）实现状态栏中文字移动功能
教学方法任务驱动法、分组讨论法、四步训练法（操作准备－引导训练－同步训练－拓展训练）
课时建议2课时（含考核评价）【教学导航】教学目标（1）能应用CSS样式设计网站主页的主体【操作准备】（1）创建所需的文件夹，拷贝所需的资源（2）启动DreamweaverCS6（3）创建本地站点（4）新建一个网页文档（5）设置网页标题（6）保存该网页。【操作准备】（1）创建所需的文件夹，拷贝所需的资源【引导训练】【任务10-1】制作“E游天下”网站的主页本单元“引导训练”的任务卡如表10-1所示。【引导训练】【任务10-1】制作“E游天下”网站的主页【引导训练】设计网站主页index1001.html的主体布局结构，应用div+CSS对网站主页的主体结构进行布局。【任务描述】【任务10-1-1】网站主页主体布局结构设计【引导训练】设计网站主页index1001.html的主体布【任务实施】1．定义网页主体布局结构的CSS样式在文件夹style中创建一个CSS样式文件“style.css”，在该样式文件中定义网页布局结构所需的CSS样式。网站主页index1001.html的主体布局示意图如图10-1所示。图10-1网站主页index1001.html的主体布局示意图
【任务实施】1．定义网页主体布局结构的CSS样式图10-1【任务实施】（1）定义body标签的样式body标签的属性设置如表10-3所示。（2）定义innerWrapper样式innerWrapper样式的属性设置如表10-4所示。（3）定义ly-header样式ly-header样式的属性设置如表10-5所示。（4）定义sidebar样式sidebar样式的属性设置如表10-6所示。（5）定义content样式content样式的属性设置如表10-7所示。（6）定义proPanel样式proPanel样式的属性设置如表10-8所示。（7）定义left样式left样式的属性设置如表10-9所示。【任务实施】（1）定义body标签的样式【任务实施】（8）定义right样式right样式的属性设置如表10-10所示。（9）定义proPanelCon2样式proPanelCon2样式的属性设置如表10-11所示。（10）定义ly-footer样式ly-footer样式的属性设置如表10-12所示。2．链接外部样式文件style.css在网页index1001.html中链接外部样式文件style.css，在网页的“<head></head>”内新增一行代码：<linkhref="style/style.css"rel="stylesheet"type="text/css"/>3．应用div+CSS布局网页在网站主页中插入div标签布局该网页，网站主页的主体布局结构代码如表10-13所示。【任务实施】（8）定义right样式【引导训练】（1）在样式文件“style.css”中定义网站主页index1001.html的局部布局结构所需的CSS样式。（2）设计网站主页index1001.html的局部布局结构，应用div+CSS对网站主页的局部结构进行布局。【任务描述】【任务10-1-2】网站主页局部布局结构设计【引导训练】（1）在样式文件“style.css”中定义网站【任务实施】1．定义中部左侧区块布局结构的CSS样式（1）定义panel样式panel样式的属性设置如表10-14所示。（2）定义panel-login样式panel-login样式的属性设置如表10-15所示。（3）定义banner样式banner样式的属性设置如表10-16所示。（4）定义panel-title样式panel-title样式的属性设置如表10-17所示。2．应用div+CSS布局中部左侧区块中部左侧区块的布局结构代码如表10-18所示。【任务实施】1．定义中部左侧区块布局结构的CSS样式【任务实施】3．定义中部右侧主体区块布局结构的CSS样式（1）定义proPanelCon1样式proPanelCon1样式的属性设置如表10-19所示。（2）定义proPanelCon3样式proPanelCon3样式的属性设置如表10-20所示。（3）定义mapPanel样式mapPanel样式的属性设置如表10-21所示。（4）定义pro-title样式pro-title样式的属性设置如表10-22所示。（5）定义pro-img样式pro-img样式的属性设置如表10-23所示。（6）定义pro-intro样式pro-intro样式的属性设置如表10-24所示。（7）定义pro-more样式pro-more样式的属性设置如表10-25所示。【任务实施】3．定义中部右侧主体区块布局结构的CSS样式【任务实施】4．应用div+CSS布局右侧的主体区块右侧主体区块的布局结构代码如表10-26所示。5．应用div+CSS布局右侧主体区块的左部右侧主体区块左部的布局结构代码如表10-27所示。6．应用div+CSS布局右侧主体区块的右部右侧主体区块右部的布局结构代码如表10-28所示。7．应用div+CSS布局右侧主体区块的中部右侧主体区块中部的布局结构代码如表10-29所示。【任务实施】4．应用div+CSS布局右侧的主体区块【引导训练】设计与制作一个包含导航栏的网页文档top_nav.html，该网页显示在网站主页index1001.html的顶部浮动框架中。【任务描述】【任务10-1-3】设计与制作包含导航栏的网页文档top_nav.html
【引导训练】设计与制作一个包含导航栏的网页文档top_nav【任务实施】1．创建网页文档top_nav.html在文件夹“webPage”中创建一个网页文档top_nav.html，该网页将在网站主页顶部的浮动框架中显示。2．定义网页文档top_nav.html的CSS样式在文件夹style中创建一个CSS样式文件“menu.css”，在该样式文件中定义网页top_nav.html中所需的CSS样式。（1）定义标签td的样式标签td样式的属性设置如表10-30所示。【任务实施】1．创建网页文档top_nav.html【任务实施】（2）定义标签a的样式标签a的属性设置如表10-31所示。（3）定义first_nav样式first_nav样式的属性设置如表10-32所示。（4）定义样式first_nav内所包含元素的样式first_nav样式内所包含元素的样式的属性设置如表10-33所示。（5）定义second_nav样式second_nav样式的属性设置如表10-34所示。（6）定义样式second_nav内所包含元素的样式样式second_nav内所包含元素的样式的属性设置如表10-35所示。（7）定义网站主页index1001.html的二级导航菜单的样式二级导航菜单的样式的属性设置如表10-36所示。【任务实施】（2）定义标签a的样式【任务实施】3．编写JavaScript代码，实现网页特效（1）在网页中显示当前日期在网页中显示当前日期的JavaScript代码如表10-37所示，在网页文档top_nav.html的<head>与</head>之间添加这些JavaScript代码。然后在网页中需要显示当前日期的位置添加以下代码即可。<scriptlanguage="javascript"type="text/javascript">showNowDate()</script>【任务实施】3．编写JavaScript代码，实现网页特效【任务实施】（2）动态切换二级菜单在文件夹“js”中创建一个JavaScript文档“menu.js”，在该文档中编写动态切换二级菜单的JavaScript代码，如表10-38所示。在网页文档top_nav.html的<head>与</head>之间添加以下代码链接外部脚本文件menu.js：<scriptlanguage='JavaScript'type='text/JavaScript'src='../js/menu.js'></script>。4．应用div+CSS布局网页文档top_nav.html（1）编写一级导航菜单的布局结构代码（2）编写二级导航菜单的布局结构代码【任务实施】（2）动态切换二级菜单【引导训练】设计与制作网页image_move.htm，该页面中包含连续滚动图片的网页特效。【任务描述】【任务10-1-4】设计与制作包含连续滚动图片特效的的网页文档【引导训练】设计与制作网页image_move.htm，该页【任务实施】1．创建网页文档image_move.html在文件夹“webPage”中创建一个网页文档image_move.html，该网页将在网站主页左侧的浮动框架中显示。2．添加div标签和多幅图片在网页文档image_move.html中插入div标签，然后插入多幅图片，HTML代码如表10-39所示。3．编写实现连续滚动图片的JavaScript代码在网页文档image_move.html中添加实现连续滚动图片的JavaScript代码，这些代码位于已插入的div标签之后，如表10-40所示。【任务实施】1．创建网页文档image_move.html【引导训练】创建脚本文件footer.js，该脚本文件包含实现底部导航栏和版权信息的代码。【任务描述】【任务10-1-5】创建实现底部导航栏和版权信息的脚本文件【引导训练】创建脚本文件footer.js，该脚本文件包含实【任务实施】在文件夹“js”中新建一个脚本文件“footer.js”，在该文件中输入表10-41所示的代码。表10-41脚本文件footer.js的代码行号JavaScript代码010203040506070809101112varfooterContent='';footerContent+='旅游服务
|
';footerContent+='联系我们
|
';footerContent+='网站地图
|
';footerContent+='旅游调查
|
';footerContent+='用户留言
|
';footerContent+='设为首页
|
';footerContent+='收藏本站<br/>';footerContent+='e游天下网版权所有Copyright2013-2016©
蝴蝶工作室<br/>';footerContent+='为了您正常的浏览页面，推荐使用分辨率为1024×768及以上';footerContent+='<divstyle="display:none;"></div>';document.write(footerContent);【任务实施】在文件夹“js”中新建一个脚本文件“footer【引导训练】在网站主页index1001.html的顶部导航区域插入浮动框架<iframe>…</iframe>。【任务描述】【任务10-1-6】在网站主页的顶部导航区域插入浮动框架【引导训练】在网站主页index1001.html的顶部导航【任务实施】在网页index1001.html中div标签<divid=ly-header></div>内插入浮动框架，代码如表10-42所示。表10-42包含浮动框架的导航区域的代码行号JavaScript代码010203040506<divid="ly-header"><iframesrc="webpage/top_nav.html"name="top_nav"id="top_nav"width="100%"marginwidth="0"height="63"marginheight="0"align="middle"scrolling="no"frameborder="0">图片移动
</iframe></div>【任务实施】在网页index1001.html中div标签<【引导训练】设计与制作网站主页的中部区域，该区域中包括用户登录表单、展示图片和播放视频区块、图片滚动区块。【任务描述】【任务10-1-7】设计与制作网站主页的中部区域【引导训练】设计与制作网站主页的中部区域，该区域中包括用户登【任务实施】1．设计与制作网页的用户登录表单（1）定义用户登录表单的CSS样式在样式文件“style.css”中定义网页中部区域所需的CSS样式。重新定义标签form的属性，代码如表10-43所示。定义样式div#panel-login内所包含元素的样式，代码如表10-44所示。定义标签input的属性及其所包含元素的样式，代码如表10-45所示（2）编写验证用户输入信息的JavaScript代码验证表单控件中输入信息的JavaScript代码如表10-46所示。（3）在用户登录表单插入form与div标签在网页index1001.html的用户登录表单中插入表单与div标签，且设置其属性，HTML代码如表10-47所示。（4）在表单中插入表单控件在用户登录表单的表单中分别输入标签文字，插入文件域、图像和按钮。【任务实施】1．设计与制作网页的用户登录表单【任务实施】2．设计与制作展示图片和播放视频的区块（1）定义展示图片和播放视频区块的CSS样式在样式文件“style.css”中定义展示图片和播放视频区块所需的CSS样式。重新定义标签“td”的样式，代码如表10-49所示。重新定义标签“a”的样式，代码如表10-50所示。（2）编写自定义函数showContent()实现动态改变背景的功能自定义函数showContent()用于动态改变背景，其代码如表10-51所示。（3）插入一个1行1列表格table1在div标签<divclass=banner>与</div>之间插入一个1行1列的表格，设置其宽度为“175像素”，高度为“128像素”，填充、间距和边框都为“0”，其ID标识为“table1”，HTML代码如表10-52所示。【任务实施】2．设计与制作展示图片和播放视频的区块【任务实施】2．设计与制作展示图片和播放视频的区块（4）在表格table1中插入两个表格在表格table1中先插入一个4行1列的表格，设置其宽度为“175像素”，高度为“20像素”，填充、间距和边框都为“0”，其ID标识为“table11”。在该表格的第2个和第3个单元格中输入文字，设置单元格的背景图像，输入必要的代码，代码如表10-53所示。在表格table11的下方插入一个1行1列的表格，设置其的宽度为“175像素”，填充、间距和边框都为“0”，其ID标识为“table12”，代码如表10-54所示。（5）在表格table12中插入两个表格在表格table12中先插入一个1行1列的表格，设置其的宽度为“175像素”，填充、间距和边框都为“0”，其ID标识为“content_1”，显示方式为“block”，代码如表10-55所示。【任务实施】2．设计与制作展示图片和播放视频的区块【任务实施】2．设计与制作展示图片和播放视频的区块将光标置于表格content_1的单元格中，在DreamweaverCS6的主界面中，选择命令【插入】→【媒体】→【FLV…】，打开【插入FLV】对话框，在该对话框中输入Flv视频的URL，设置Flv视频的属性。然后单击【确定】按钮，在表格content_1的单元格中完成flv格式视频的插入。在表格content_1中选取所插入的Flv视频，在【属性】面板中对其属性进行设置。切换到【代码】视图，在表格content_1的下方输入HTML代码，插入另一个1行1列的表格，其ID标识为“content_2”，显示方式为“none”，且在表格content_2中的单元格中插入一幅图像，代码如表10-56所示。在div标签<divclass=panel-title>与</div>之间输入文字“神奇的自然界”，插入文件夹“images”中的图像“more.gif”。【任务实施】2．设计与制作展示图片和播放视频的区块【任务实施】3．设计与制作主页的图片滚动区域在div标签<divclass=banner>与</div>之间插入浮动框架，显示网页“image_move.html”，代码如表10-57所示。4．设计与制作主页index1001.html中部右侧的主体区域（1）在proPanel区域输入文字和插入图像在网站主页index1001.html中部右侧的主体区域中输入文字，插入图像，HTML代码如表10-58所示，其浏览效果如图10-5所示。（2）在mapPanel区域插入景点分布图在mapPanel区域插入一幅景点分布图，HTML代码如表10-59所示。图10-5网页中部右侧主体区域浏览效果
【任务实施】3．设计与制作主页的图片滚动区域图10-5网页【引导训练】先在网页中插入两个APDiv对象，然后在APDiv对象中各插入一个SWF动画。【任务描述】【任务10-1-8】在主页中插入APDiv对象和SWF动画【引导训练】先在网页中插入两个APDiv对象，然后在AP【任务实施】1．插入APDiv对象在网页index1001.html中景点分布图map01.gif左下角插入一个APDiv对象layer1，且设置其属性。同样在图像m03.jpg的位置插入一个APDiv对象layer2且设置其属性。两个APDiv对象的CSS样式代码如表10-60所示。2．在APDiv对象中插入SWF动画在APDiv对象layer1中插入文件夹“flash”中的SWF动画“01.swf”，且将其宽度设置为“233”，高度设置为“122”。同样，在APDiv对象layer2中插入文件夹“flash”中的SWF动画“02.swf”，且将其宽度设置为“147”，高度设置为“102”。【任务实施】1．插入APDiv对象【引导训练】在网站主页index1001.html中插入外部脚本文件footer.js，设置网页的底部导航栏和版权信息。【任务描述】【任务10-1-9】在主页index1001.html中插入外部脚本文件【引导训练】在网站主页index1001.html中插入外部【任务实施】在div标签<divid=ly-footer>与</div>之间插入文件夹“js”中的脚本文件“footer.js”
，设置网页的底部导航栏和版权信息，代码如下所示。<scriptlanguage=javascriptsrc="js/footer.js"type=text/javascript></script>【任务实施】在div标签<divid=ly-foo【引导训练】编写JavaScript代码，实现主页index1001.html的状态栏中文字的移动功能。【任务描述】【任务10-1-10】在主页index1001.html中实现状态栏中文字的移动效果【引导训练】编写JavaScript代码，实现主页index【任务实施】切换到【代码】视图，在网页index1001.html的head部分输入如表10-61所示JavaScript代码，实现状态栏中文字的移动效果。【任务实施】切换到【代码】视图，在网页index1001.h【引导训练考核实战】本单元的“引导训练”考核评价内容如表10-62所示。表10-62单元10“引导训练”考核评价表
【引导训练考核实战】本单元的“引导训练”考核评价内容【同步训练】【任务描述】【任务10-2】制作“快乐旅游”网站的主页
表10-63单元10“同步训练”任务卡本单元“同步训练”的任务卡如表10-63所示。【同步训练】【任务描述】【任务10-2】制作“快乐旅游”网站【同步训练考核实战】本单元的“同步训练”考核评价内容如表10-71所示。表10-71单元10“同步训练”考核评价表
【同步训练考核实战】本单元的“同步训练”考核评价内容如表1【拓展训练】【任务描述】【任务10-3】制作“爱旅游”网站的主页
表10-72单元10“拓展训练”任务卡本单元“拓展训练”的任务卡如表10-72所示。【拓展训练】【任务描述】【任务10-3】制作“爱旅游”网站的【拓展训练考核实战】本单元的“拓展训练”考核评价内容如表10-74所示。表10-74单元10“拓展训练”考核评价表
【拓展训练考核实战】本单元的“拓展训练”考核评价内容如表【单元小结】本单元综合运用了多方面的知识和技能设计与制作网站的主页，详细介绍了该网页的主体布局结构和局部布局结构的设计过程。本单元运用了div+CSS布局网页，该网页中包含了多种网页元素：文字、图像、导航栏、浮动框架、表单、视频、APDiv、SWF动画，也展示了这些网页元素的综合运用效果。该网页的底部导航栏和版权信息通过插入外部脚本文件footer.js获取，同时使用了JavaScript程序实现状态栏中文字的移动功能。【单元小结】本单元综合运用了多方面的知识和技能设计快乐学习、高效学习快乐学习、高效学习网页设计与制作任务驱动式教程单元10设计与制作网站主页网页设计与制作单元10设计与制作网站主页教学环节【教学导航
】
1【操作准备】2【引导训练/引导训练考核评价】3【同步训练/同步训练考核评价】
4【拓展训练/拓展训练考核评价】5教学环节【教学导航】1【操作准备】2【引导训练/引导【教学导航】教学目标（1）能应用CSS样式设计网站主页的主体布局结构（2）能应用CSS样式设计网站主页的局部布局结构（3）能设计与制作导航栏，会使用浮动框架（4）会插入Flv视频、APDiv对象和SWF动画（5）会设计连续滚动图片的特效（6）会创建包含底部导航栏和版权信息的脚本文件，在网页中插入外部脚本文件（7）会设计用户登录表单（8）了解实现状态栏中文字移动功能的方法
本单元重点（1）应用CSS样式设计网页的布局结构（2）设计与制作导航栏（3）插入Flv视频、APDiv对象和SWF动画
本单元难点（1）设计与制作导航栏（2）设计连续滚动图片的特效（3）实现状态栏中文字移动功能
教学方法任务驱动法、分组讨论法、四步训练法（操作准备－引导训练－同步训练－拓展训练）
课时建议2课时（含考核评价）【教学导航】教学目标（1）能应用CSS样式设计网站主页的主体【操作准备】（1）创建所需的文件夹，拷贝所需的资源（2）启动DreamweaverCS6（3）创建本地站点（4）新建一个网页文档（5）设置网页标题（6）保存该网页。【操作准备】（1）创建所需的文件夹，拷贝所需的资源【引导训练】【任务10-1】制作“E游天下”网站的主页本单元“引导训练”的任务卡如表10-1所示。【引导训练】【任务10-1】制作“E游天下”网站的主页【引导训练】设计网站主页index1001.html的主体布局结构，应用div+CSS对网站主页的主体结构进行布局。【任务描述】【任务10-1-1】网站主页主体布局结构设计【引导训练】设计网站主页index1001.html的主体布【任务实施】1．定义网页主体布局结构的CSS样式在文件夹style中创建一个CSS样式文件“style.css”，在该样式文件中定义网页布局结构所需的CSS样式。网站主页index1001.html的主体布局示意图如图10-1所示。图10-1网站主页index1001.html的主体布局示意图
【任务实施】1．定义网页主体布局结构的CSS样式图10-1【任务实施】（1）定义body标签的样式body标签的属性设置如表10-3所示。（2）定义innerWrapper样式innerWrapper样式的属性设置如表10-4所示。（3）定义ly-header样式ly-header样式的属性设置如表10-5所示。（4）定义sidebar样式sidebar样式的属性设置如表10-6所示。（5）定义content样式content样式的属性设置如表10-7所示。（6）定义proPanel样式proPanel样式的属性设置如表10-8所示。（7）定义left样式left样式的属性设置如表10-9所示。【任务实施】（1）定义body标签的样式【任务实施】（8）定义right样式right样式的属性设置如表10-10所示。（9）定义proPanelCon2样式proPanelCon2样式的属性设置如表10-11所示。（10）定义ly-footer样式ly-footer样式的属性设置如表10-12所示。2．链接外部样式文件style.css在网页index1001.html中链接外部样式文件style.css，在网页的“<head></head>”内新增一行代码：<linkhref="style/style.css"rel="stylesheet"type="text/css"/>3．应用div+CSS布局网页在网站主页中插入div标签布局该网页，网站主页的主体布局结构代码如表10-13所示。【任务实施】（8）定义right样式【引导训练】（1）在样式文件“style.css”中定义网站主页index1001.html的局部布局结构所需的CSS样式。（2）设计网站主页index1001.html的局部布局结构，应用div+CSS对网站主页的局部结构进行布局。【任务描述】【任务10-1-2】网站主页局部布局结构设计【引导训练】（1）在样式文件“style.css”中定义网站【任务实施】1．定义中部左侧区块布局结构的CSS样式（1）定义panel样式panel样式的属性设置如表10-14所示。（2）定义panel-login样式panel-login样式的属性设置如表10-15所示。（3）定义banner样式banner样式的属性设置如表10-16所示。（4）定义panel-title样式panel-title样式的属性设置如表10-17所示。2．应用div+CSS布局中部左侧区块中部左侧区块的布局结构代码如表10-18所示。【任务实施】1．定义中部左侧区块布局结构的CSS样式【任务实施】3．定义中部右侧主体区块布局结构的CSS样式（1）定义proPanelCon1样式proPanelCon1样式的属性设置如表10-19所示。（2）定义proPanelCon3样式proPanelCon3样式的属性设置如表10-20所示。（3）定义mapPanel样式mapPanel样式的属性设置如表10-21所示。（4）定义pro-title样式pro-title样式的属性设置如表10-22所示。（5）定义pro-img样式pro-img样式的属性设置如表10-23所示。（6）定义pro-intro样式pro-intro样式的属性设置如表10-24所示。（7）定义pro-more样式pro-more样式的属性设置如表10-25所示。【任务实施】3．定义中部右侧主体区块布局结构的CSS样式【任务实施】4．应用div+CSS布局右侧的主体区块右侧主体区块的布局结构代码如表10-26所示。5．应用div+CSS布局右侧主体区块的左部右侧主体区块左部的布局结构代码如表10-27所示。6．应用div+CSS布局右侧主体区块的右部右侧主体区块右部的布局结构代码如表10-28所示。7．应用div+CSS布局右侧主体区块的中部右侧主体区块中部的布局结构代码如表10-29所示。【任务实施】4．应用div+CSS布局右侧的主体区块【引导训练】设计与制作一个包含导航栏的网页文档top_nav.html，该网页显示在网站主页index1001.html的顶部浮动框架中。【任务描述】【任务10-1-3】设计与制作包含导航栏的网页文档top_nav.html
【引导训练】设计与制作一个包含导航栏的网页文档top_nav【任务实施】1．创建网页文档top_nav.html在文件夹“webPage”中创建一个网页文档top_nav.html，该网页将在网站主页顶部的浮动框架中显示。2．定义网页文档top_nav.html的CSS样式在文件夹style中创建一个CSS样式文件“menu.css”，在该样式文件中定义网页top_nav.html中所需的CSS样式。（1）定义标签td的样式标签td样式的属性设置如表10-30所示。【任务实施】1．创建网页文档top_nav.html【任务实施】（2）定义标签a的样式标签a的属性设置如表10-31所示。（3）定义first_nav样式first_nav样式的属性设置如表10-32所示。（4）定义样式first_nav内所包含元素的样式first_nav样式内所包含元素的样式的属性设置如表10-33所示。（5）定义second_nav样式second_nav样式的属性设置如表10-34所示。（6）定义样式second_nav内所包含元素的样式样式second_nav内所包含元素的样式的属性设置如表10-35所示。（7）定义网站主页index1001.html的二级导航菜单的样式二级导航菜单的样式的属性设置如表10-36所示。【任务实施】（2）定义标签a的样式【任务实施】3．编写JavaScript代码，实现网页特效（1）在网页中显示当前日期在网页中显示当前日期的JavaScript代码如表10-37所示，在网页文档top_nav.html的<head>与</head>之间添加这些JavaScript代码。然后在网页中需要显示当前日期的位置添加以下代码即可。<scriptlanguage="javascript"type="text/javascript">showNowDate()</script>【任务实施】3．编写JavaScript代码，实现网页特效【任务实施】（2）动态切换二级菜单在文件夹“js”中创建一个JavaScript文档“menu.js”，在该文档中编写动态切换二级菜单的JavaScript代码，如表10-38所示。在网页文档top_nav.html的<head>与</head>之间添加以下代码链接外部脚本文件menu.js：<scriptlanguage='JavaScript'type='text/JavaScript'src='../js/menu.js'></script>。4．应用div+CSS布局网页文档top_nav.html（1）编写一级导航菜单的布局结构代码（2）编写二级导航菜单的布局结构代码【任务实施】（2）动态切换二级菜单【引导训练】设计与制作网页image_move.htm，该页面中包含连续滚动图片的网页特效。【任务描述】【任务10-1-4】设计与制作包含连续滚动图片特效的的网页文档【引导训练】设计与制作网页image_move.htm，该页【任务实施】1．创建网页文档image_move.html在文件夹“webPage”中创建一个网页文档image_move.html，该网页将在网站主页左侧的浮动框架中显示。2．添加div标签和多幅图片在网页文档image_move.html中插入div标签，然后插入多幅图片，HTML代码如表10-39所示。3．编写实现连续滚动图片的JavaScript代码在网页文档image_move.html中添加实现连续滚动图片的JavaScript代码，这些代码位于已插入的div标签之后，如表10-40所示。【任务实施】1．创建网页文档image_move.html【引导训练】创建脚本文件footer.js，该脚本文件包含实现底部导航栏和版权信息的代码。【任务描述】【任务10-1-5】创建实现底部导航栏和版权信息的脚本文件【引导训练】创建脚本文件footer.js，该脚本文件包含实【任务实施】在文件夹“js”中新建一个脚本文件“footer.js”，在该文件中输入表10-41所示的代码。表10-41脚本文件footer.js的代码行号JavaScript代码010203040506070809101112varfooterContent='';footerContent+='旅游服务
|
';footerContent+='联系我们
|
';footerContent+='网站地图
|
';footerContent+='旅游调查
|
';footerContent+='用户留言
|
';footerContent+='设为首页
|
';footerContent+='收藏本站<br/>';footerContent+='e游天下网版权所有Copyright2013-2016©
蝴蝶工作室<br/>';footerContent+='为了您正常的浏览页面，推荐使用分辨率为1024×768及以上';footerContent+='<divstyle="display:none;"></div>';document.write(footerContent);【任务实施】在文件夹“js”中新建一个脚本文件“footer【引导训练】在网站主页index1001.html的顶部导航区域插入浮动框架<iframe>…</iframe>。【任务描述】【任务10-1-6】在网站主页的顶部导航区域插入浮动框架【引导训练】在网站主页index1001.html的顶部导航【任务实施】在网页index1001.html中div标签<divid=ly-header></div>内插入浮动框架，代码如表10-42所示。表10-42包含浮动框架的导航区域的代码行号JavaScript代码010203040506<divid="ly-header"><iframesrc="webpage/top_nav.html"name="top_nav"id="top_nav"width="100%"marginwidth="0"height="63"marginheight="0"align="middle"scrolling="no"frameborder="0">图片移动
</iframe></div>【任务实施】在网页index1001.html中div标签<【引导训练】设计与制作网站主页的中部区域，该区域中包括用户登录表单、展示图片和播放视频区块、图片滚动区块。【任务描述】【任务10-1-7】设计与制作网站主页的中部区域【引导训练】设计与制作网站主页的中部区域，该区域中包括用户登【任务实施】1．设计与制作网页的用户登录表单（1）定义用户登录表单的CSS样式在样式文件“style.css”中定义网页中部区域所需的CSS样式。重新定义标签form的属性，代码如表10-43所示。定义样式div#panel-login内所包含元素的样式，代码如表10-44所示。定义标签input的属性及其所包含元素的样式，代码如表10-45所示（2）编写验证用户输入信息的JavaScript代码验证表单控件中输入信息的JavaScript代码如表10-46所示。（3）在用户登录表单插入form与div标签在网页index1001.html的用户登录表单中插入表单与div标签，且设置其属性，HTML代码如表10-47所示。（4）在表单中插入表单控件在用户登录表单的表单中分别输入标签文字，插入文件域、图像和按钮。【任务实施】1．设计与制作网页的用户登录表单【任务实施】2．设计与制作展示图片和播放视频的区块（1）定义展示图片和播放视频区块的CSS样式在样式文件“style.css”中定义展示图片和播放视频区块所需的CSS样式。重新定义标签“td”的样式，代码如表10-49所示。重新定义标签“a”的样式，代码如表10-50所示。（2）编写自定义函数showContent()实现动态改变背景的功能自定义函数showContent()用于动态改变背景，其代码如表10-51所示。（3）插入一个1行1列表格table1在div标签<divclass=banner>与</div>之间插入一个1行1列的表格，设置其宽度为“175像素”，高度为“128像素”，填充、间距和边框都为“0”，其ID标识为“table1”，HTML代码如表10-52所示。【任务实施】2．设计与制作展示图片和播放视频的区块【任务实施】2．设计与制作展示图片和播放视频的区块（4）在表格table1中插入两个表格在表格table1中先插入一个4行1列的表格，设置其宽度为“175像素”，高度为“20像素”，填充、间距和边框都为“0”，其ID标识为“table11”。在该表格的第2个和第3个单元格中输入文字，设置单元格的背景图像，输入必要的代码，代码如表10-53所示。在表格table11的下方插入一个1行1列的表格，设置其的宽度为“175像素”，填充、间距和边框都为“0”，其ID标识为“table12”，代码如表10-54所示。（5）在表格table12中插入两个表格在表格table12中先插入一个1行1列的表格，设置其的宽度为“175像素”，填充、间距和边框都为“0”，其ID标识为“content_1”，显示方式为“block”，代码如表10-55所示。【任务实施】2．设计与制作展示图片和播放视频的区块【任务实施】2．设计与制作展示图片和播放视频的区块将光标置于表格content_1的单元格中，在DreamweaverCS6的主界面中，选择命令【插入】→【媒体】→【FLV…】，打开【插入FLV】对话框，在该对话框中输入Flv视频的URL，设置Flv视频的属性。然后单击【确定】按钮，在表格content_1的单元格中完成flv格式视频的插入。在表格content_1中选取所插入的Flv视频，在【属性】面板中对其属性进行设置。切换到【代码】视图，在表格content_1的下方输入HTML代码，插入另一个1行1列的表格，其ID标识为“content_2”，显示方式为“none”，且在表格content_2中的单元格中插入一幅图像，代码如表10-56所示。在div标签<divclass=panel-title>与</div>之间输入文字“神奇的自然界”，插入文件夹“images”中的图像“more.gif”。【任务实施】2．设计与制作展示图片和播放视频的区块【任务实施】3．设计与制作主页的图片滚动区域在div标签<divclass=banner>与</div>之间插入浮动框架，显示网页“image_move.html”，代码如表10-57所示。4．设计与制作主页index1001.html中部右侧的主体区域（1）在proPanel区域输入文字和插入图像在网站主页index1001.html中部右侧的主体区域中输入文字，插入图像，HTML代码如表10-58所示，其浏览效果如图10-5所示。
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 辽源市热力集团有限公司招聘笔试题库2024
- 2023年小学教师资格证山西省 《小学综合素质》科目单项选择题+材料分析题+写作题真题拔高卷3月份A卷
- 2023年小学教师资格证江西省 《小学综合素质》科目单项选择题+材料分析题+写作题真题冲刺卷9月份A卷
- 我的叔叔于勒课件
- 小学生主题班会《感恩父母》
- 九省联考2024年甘肃省普通高等学校招生考试适应性测试政治试题及答案
- 金太阳课件演讲
- 统计学课件教学课件
- 宣贯资料 声发射
- 窨井清掏合同范本
- 护士执业注册健康体检表最新版本
- 员工职业健康调研报告
- 《水浒传》导读4杨志课件
- DB31∕T 1315-2021 车载毫米波雷达探测性能测试方法
- 劳动防护用品规范使用培训课件
- 北师大版九年级数学上册教案（全册完整版）教学设计含教学反思
- 体检中心安全管理制度范本
- 对外汉语教案(体育健身)
- 高压隔膜压滤机安装方案
- (最新版)中小学思政课一体化建设实施方案三篇
- 甲醛释放量干燥器法测定步骤
评论
0/150
提交评论