网页设计与制作任务驱动式教程单元10设计与制作网站主页
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
文档top_nav.html的<head>与</head>之间添加这些JavaScript代码。 然后在网页中需要显示当前日期的位置添加以下代码即可。
<script language="javascript" type="text/javascript">
showNowDate() </script>
first_nav样式的属性设置如表10-32所示。 （4）定义样式first_nav内所包含元素的样式
first_nav样式内所包含元素的样式的属性设置如表10-33所示。
（5）定义second_nav样式 second_nav样式的属性设置如表10-34所示。
（6）定义样式second_nav内所包含元素的样式
/JavaScript' src='../js/menu.js'></script>。
4．应用div+CSS布局网页文档top_nav.html
（1）编写一级导航菜单的布局结构代码
（2）编写二级导航菜单的布局结构代码
【引导训练】
【任务10-1-4】设计与制作包含连续滚动图片特效的的网页文档
【任务描述】 设计与制作网页image_move.htm，该页面中包含连续滚 动图片的网页特效。
1．定义中部左侧区块布局结构的CSS样式
（1）定义panel样式
panel样式的属性设置如表10-14所示。 （2）定义panel-login样式
panel-login样式的属性设置如表10-15所示。
（3）定义banner样式 banner样式的属性设置如表10-16所示。
（4）定义panel-title样式
【引导训练】
【任务10-1-2】网站主页局部布局结构设计
【任务描述】 （1）在样式文件“style.css”中定义网站主页index1001. html的局部布局结构所需的CSS样式。 （2）设计网站主页index1001.html的局部布局结构，应
用div+CSS对网站主页的局部结构进行布局。
【任务实施】
ly-header样式的属性设置如表10-5所示。
（4）定义sidebar样式 sidebar样式的属性设置如表10-6所示。
（5）定义content样式
content样式的属性设置如表10-7所示。 （6）定义proPanel样式 proPanel样式的属性设置如表10-8所示。 （7）定义left样式 left样式的属性设置如表10-9所示。
在文件夹style中创建一个CSS样式文件“style.css”，
在该样式文件中定义网页布局结构所需的CSS样式。网站 主页index1001.html的主体布局示意图如图10-1所示。
图10-1
网站主页index1001.html的主体布局示意图
【任务实施】
（1）定义body标签的样式 body标签的属性设置如表10-3所示。 （2）定义innerWrapper样式 innerWrapper样式的属性设置如表10-4所示。 （3）定义ly-header样式
【任务实施】
4．应用div+CSS布局右侧的主体区块
右侧主体区块的布局结构代码如表10-26所示。
5．应用div+CSS布局右侧主体区块的左部 右侧主体区块左部的布局结构代码如表10-27所示。 6．应用div+CSS布局右侧主体区块的右部 右侧主体区块右部的布局结构代码如表10-28所示。
7．应用div+CSS布局右侧主体区块的中部
在文件夹style中创建一个CSS样式文件“menu.css”，在
该样式文件中定义网页top_nav.html中所需的CSS样式。 （1）定义标签td的样式 标签td样式的属性设置如表10-30所示。
【任务实施】
（2）定义标签a的样式 标签a的属性设置如表10-31所示。
（3）定义first_nav样式
panel-title样式的属性设置如表10-17所示。
2．应用div+CSS布局中部左侧区块
中部左侧区块的布局结构代码如表10-18所示。
【任务实施】
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所示。
右侧主体区块中部的布局结构代码如表10-29所示。
【引导训练】
【任务10-1-3】设计与制作包含导航栏的网页文档top_nav.html
【任务描述】 设计与制作一个包含导航栏的网页文档top_nav.html，该 网页显示在网站主页index1001.html的顶部浮动框架中。
【任务实施】
1．创建网页文档top_nav.html 在文件夹“webPage”中创建一个网页文档top_nav.html， 该网页将在网站主页顶部的浮动框架中显示。 2．定义网页文档top_nav.html的CSS样式
【引导训练】
【任务10-1-6】在网站主页的顶部导航区域插入浮动框架
【任务描述】 在网站主页index1001.html的顶部导航区域插入浮动框架 <iframe>…</iframe>。
【任务实施】
在网页index1001.html中div标签<div id=ly-header> </div>内插入浮
【任务实施】
1．创建网页文档image_move.html 在文件夹“webPage”中创建一个网页文档image_move. html，该网页将在网站主页左侧的浮动框架中显示。 2．添加div标签和多幅图片 在网页文档image_move.html中插入div标签，然后插入 多幅图片，HTML代码如表10-39所示。 3．编写实现连续滚动图片的JavaScript代码
【任务实施】
在文件夹“js”中新建一个脚本文件“footer.js”，在该文件
中输入表10-41所示的代码。
表10-41 脚本文件footer.js的代码
行号 01 02 03 04 05 06 07 08 09 10 11 12 JavaScript代码 var footerContent = ''; footerContent += '旅游服务 | '; footerContent += '联系我们 | '; footerContent += '网站地图 | '; footerContent += '旅游调查 | '; footerContent += '用户留言 | '; footerContent += '设为首页 | '; footerContent += '收藏本站<br />'; footerContent += ' e游天下网 版权所有 Copyright 2013-2016 © 蝴蝶工作室<br />'; footerContent += '为了您正常的浏览页面，推荐使用分辨率为1024×768及以上'; footerContent += '<div style="display:none;"></div>'; document.write(footerContent);
【任务实施】
（8）定义right样式 right样式的属性设置如表10-10所示。
（9）定义proPanelCon2样式
proPanelCon2样式的属性设置如表10-11所示。 （10）定义ly-footer样式
ly-footer样式的属性设置如表10-12所示。
百度文库
2．链接外部样式文件style.css
在网页文档image_move.html中添加实现连续滚动图片
的JavaScript代码，这些代码位于已插入的div标签之后， 如表10-40所示。
【引导训练】
【任务10-1-5】创建实现底部导航栏和版权信息的脚本文件
【任务描述】 创建脚本文件footer.js，该脚本文件包含实现底部导航栏 和版权信息的代码。
【任务实施】
（2）动态切换二级菜单 在文件夹“js”中创建一个JavaScript文档“menu.js”，在该文档中
编写动态切换二级菜单的JavaScript代码，如表10-38所示。
在网页文档top_nav.html的<head>与</head>之间添加以下代码链 接外部脚本文件menu.js：<script language='JavaScript' type='text
样式second_nav内所包含元素的样式的属性设置如表10-35所示。 （7）定义网站主页index1001.html的二级导航菜单的样式 二级导航菜单的样式的属性设置如表10-36所示。
【任务实施】
3．编写JavaScript代码，实现网页特效
（1）在网页中显示当前日期
在网页中显示当前日期的JavaScript代码如表10-37所示，在网页
【引导训练】
【任务10-1-7】设计与制作网站主页的中部区域
【任务描述】 设计与制作网站主页的中部区域，该区域中包括用户登录 表单、展示图片和播放视频区块、图片滚动区块。
【引导训练】
本单元“引导训练”
的任务卡如表10-1所 示。
【任务10-1】制作“E游天下”网站的主页
【引导训练】
【任务10-1-1】网站主页主体布局结构设计
【任务描述】 设计网站主页index1001.html的主体布局结构，应用
div+CSS对网站主页的主体结构进行布局。
【任务实施】
1．定义网页主体布局结构的CSS样式
网页设计与制作 任务驱动式教程
单元10 设计与制作网站主页
教学环节
1 2 3 【教学导航 】 【操作准备 】 【引导训练/引导训练考核评价】 【同步训练 /同步训练考核评价】 【拓展训练 /拓展训练考核评价】
4
5
【教学导航】
（1）能应用CSS样式设计网站主页的主体布局结构 （2）能应用CSS样式设计网站主页的局部布局结构 （3）能设计与制作导航栏，会使用浮动框架 （4）会插入Flv视频、AP Div对象和SWF动画 （5）会设计连续滚动图片的特效 （6）会创建包含底部导航栏和版权信息的脚本文件，在网页中插入外 部脚本文件 （7）会设计用户登录表单 （8）了解实现状态栏中文字移动功能的方法 （1）应用CSS样式设计网页的布局结构 （2）设计与制作导航栏 （3）插入Flv视频、AP Div对象和SWF动画 （1）设计与制作导航栏 （2）设计连续滚动图片的特效 （3）实现状态栏中文字移动功能
任务驱动法、分组讨论法、四步训练法（操作准备－引导训练－同步训练－拓展训练）
2课时（含考核评价）
教学目标
本单元重点
本单元难点
教学方法
课时建议
【操作准备】
（1）创建所需的文件夹，拷贝所需的资源 （2）启动Dreamweaver CS6
（3）创建本地站点
（4）新建一个网页文档 （5）设置网页标题 （6）保存该网页。
动框架，代码如表10-42所示。
表10-42 包含浮动框架的导航区域的代码
行号 01 02 03 04 05 06 JavaScript代码 <div id="ly-header" > <iframe src="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中链接外部样式文件style.css，在网页的“< head> </head>”内新增一行代码：<link href="style/style.css" rel ="stylesheet" type="text/css" />
3．应用div+CSS布局网页
在网站主页中插入div标签布局该网页，网站主页的主体布局结构代 码如表10-13所示。
<script language="javascript" type="text/javascript">
showNowDate() </script>
first_nav样式的属性设置如表10-32所示。 （4）定义样式first_nav内所包含元素的样式
first_nav样式内所包含元素的样式的属性设置如表10-33所示。
（5）定义second_nav样式 second_nav样式的属性设置如表10-34所示。
（6）定义样式second_nav内所包含元素的样式
/JavaScript' src='../js/menu.js'></script>。
4．应用div+CSS布局网页文档top_nav.html
（1）编写一级导航菜单的布局结构代码
（2）编写二级导航菜单的布局结构代码
【引导训练】
【任务10-1-4】设计与制作包含连续滚动图片特效的的网页文档
【任务描述】 设计与制作网页image_move.htm，该页面中包含连续滚 动图片的网页特效。
1．定义中部左侧区块布局结构的CSS样式
（1）定义panel样式
panel样式的属性设置如表10-14所示。 （2）定义panel-login样式
panel-login样式的属性设置如表10-15所示。
（3）定义banner样式 banner样式的属性设置如表10-16所示。
（4）定义panel-title样式
【引导训练】
【任务10-1-2】网站主页局部布局结构设计
【任务描述】 （1）在样式文件“style.css”中定义网站主页index1001. html的局部布局结构所需的CSS样式。 （2）设计网站主页index1001.html的局部布局结构，应
用div+CSS对网站主页的局部结构进行布局。
【任务实施】
ly-header样式的属性设置如表10-5所示。
（4）定义sidebar样式 sidebar样式的属性设置如表10-6所示。
（5）定义content样式
content样式的属性设置如表10-7所示。 （6）定义proPanel样式 proPanel样式的属性设置如表10-8所示。 （7）定义left样式 left样式的属性设置如表10-9所示。
在文件夹style中创建一个CSS样式文件“style.css”，
在该样式文件中定义网页布局结构所需的CSS样式。网站 主页index1001.html的主体布局示意图如图10-1所示。
图10-1
网站主页index1001.html的主体布局示意图
【任务实施】
（1）定义body标签的样式 body标签的属性设置如表10-3所示。 （2）定义innerWrapper样式 innerWrapper样式的属性设置如表10-4所示。 （3）定义ly-header样式
【任务实施】
4．应用div+CSS布局右侧的主体区块
右侧主体区块的布局结构代码如表10-26所示。
5．应用div+CSS布局右侧主体区块的左部 右侧主体区块左部的布局结构代码如表10-27所示。 6．应用div+CSS布局右侧主体区块的右部 右侧主体区块右部的布局结构代码如表10-28所示。
7．应用div+CSS布局右侧主体区块的中部
在文件夹style中创建一个CSS样式文件“menu.css”，在
该样式文件中定义网页top_nav.html中所需的CSS样式。 （1）定义标签td的样式 标签td样式的属性设置如表10-30所示。
【任务实施】
（2）定义标签a的样式 标签a的属性设置如表10-31所示。
（3）定义first_nav样式
panel-title样式的属性设置如表10-17所示。
2．应用div+CSS布局中部左侧区块
中部左侧区块的布局结构代码如表10-18所示。
【任务实施】
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所示。
右侧主体区块中部的布局结构代码如表10-29所示。
【引导训练】
【任务10-1-3】设计与制作包含导航栏的网页文档top_nav.html
【任务描述】 设计与制作一个包含导航栏的网页文档top_nav.html，该 网页显示在网站主页index1001.html的顶部浮动框架中。
【任务实施】
1．创建网页文档top_nav.html 在文件夹“webPage”中创建一个网页文档top_nav.html， 该网页将在网站主页顶部的浮动框架中显示。 2．定义网页文档top_nav.html的CSS样式
【引导训练】
【任务10-1-6】在网站主页的顶部导航区域插入浮动框架
【任务描述】 在网站主页index1001.html的顶部导航区域插入浮动框架 <iframe>…</iframe>。
【任务实施】
在网页index1001.html中div标签<div id=ly-header> </div>内插入浮
【任务实施】
1．创建网页文档image_move.html 在文件夹“webPage”中创建一个网页文档image_move. html，该网页将在网站主页左侧的浮动框架中显示。 2．添加div标签和多幅图片 在网页文档image_move.html中插入div标签，然后插入 多幅图片，HTML代码如表10-39所示。 3．编写实现连续滚动图片的JavaScript代码
【任务实施】
在文件夹“js”中新建一个脚本文件“footer.js”，在该文件
中输入表10-41所示的代码。
表10-41 脚本文件footer.js的代码
行号 01 02 03 04 05 06 07 08 09 10 11 12 JavaScript代码 var footerContent = ''; footerContent += '旅游服务 | '; footerContent += '联系我们 | '; footerContent += '网站地图 | '; footerContent += '旅游调查 | '; footerContent += '用户留言 | '; footerContent += '设为首页 | '; footerContent += '收藏本站<br />'; footerContent += ' e游天下网 版权所有 Copyright 2013-2016 © 蝴蝶工作室<br />'; footerContent += '为了您正常的浏览页面，推荐使用分辨率为1024×768及以上'; footerContent += '<div style="display:none;"></div>'; document.write(footerContent);
【任务实施】
（8）定义right样式 right样式的属性设置如表10-10所示。
（9）定义proPanelCon2样式
proPanelCon2样式的属性设置如表10-11所示。 （10）定义ly-footer样式
ly-footer样式的属性设置如表10-12所示。
百度文库
2．链接外部样式文件style.css
在网页文档image_move.html中添加实现连续滚动图片
的JavaScript代码，这些代码位于已插入的div标签之后， 如表10-40所示。
【引导训练】
【任务10-1-5】创建实现底部导航栏和版权信息的脚本文件
【任务描述】 创建脚本文件footer.js，该脚本文件包含实现底部导航栏 和版权信息的代码。
【任务实施】
（2）动态切换二级菜单 在文件夹“js”中创建一个JavaScript文档“menu.js”，在该文档中
编写动态切换二级菜单的JavaScript代码，如表10-38所示。
在网页文档top_nav.html的<head>与</head>之间添加以下代码链 接外部脚本文件menu.js：<script language='JavaScript' type='text
样式second_nav内所包含元素的样式的属性设置如表10-35所示。 （7）定义网站主页index1001.html的二级导航菜单的样式 二级导航菜单的样式的属性设置如表10-36所示。
【任务实施】
3．编写JavaScript代码，实现网页特效
（1）在网页中显示当前日期
在网页中显示当前日期的JavaScript代码如表10-37所示，在网页
【引导训练】
【任务10-1-7】设计与制作网站主页的中部区域
【任务描述】 设计与制作网站主页的中部区域，该区域中包括用户登录 表单、展示图片和播放视频区块、图片滚动区块。
【引导训练】
本单元“引导训练”
的任务卡如表10-1所 示。
【任务10-1】制作“E游天下”网站的主页
【引导训练】
【任务10-1-1】网站主页主体布局结构设计
【任务描述】 设计网站主页index1001.html的主体布局结构，应用
div+CSS对网站主页的主体结构进行布局。
【任务实施】
1．定义网页主体布局结构的CSS样式
网页设计与制作 任务驱动式教程
单元10 设计与制作网站主页
教学环节
1 2 3 【教学导航 】 【操作准备 】 【引导训练/引导训练考核评价】 【同步训练 /同步训练考核评价】 【拓展训练 /拓展训练考核评价】
4
5
【教学导航】
（1）能应用CSS样式设计网站主页的主体布局结构 （2）能应用CSS样式设计网站主页的局部布局结构 （3）能设计与制作导航栏，会使用浮动框架 （4）会插入Flv视频、AP Div对象和SWF动画 （5）会设计连续滚动图片的特效 （6）会创建包含底部导航栏和版权信息的脚本文件，在网页中插入外 部脚本文件 （7）会设计用户登录表单 （8）了解实现状态栏中文字移动功能的方法 （1）应用CSS样式设计网页的布局结构 （2）设计与制作导航栏 （3）插入Flv视频、AP Div对象和SWF动画 （1）设计与制作导航栏 （2）设计连续滚动图片的特效 （3）实现状态栏中文字移动功能
任务驱动法、分组讨论法、四步训练法（操作准备－引导训练－同步训练－拓展训练）
2课时（含考核评价）
教学目标
本单元重点
本单元难点
教学方法
课时建议
【操作准备】
（1）创建所需的文件夹，拷贝所需的资源 （2）启动Dreamweaver CS6
（3）创建本地站点
（4）新建一个网页文档 （5）设置网页标题 （6）保存该网页。
动框架，代码如表10-42所示。
表10-42 包含浮动框架的导航区域的代码
行号 01 02 03 04 05 06 JavaScript代码 <div id="ly-header" > <iframe src="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中链接外部样式文件style.css，在网页的“< head> </head>”内新增一行代码：<link href="style/style.css" rel ="stylesheet" type="text/css" />
3．应用div+CSS布局网页
在网站主页中插入div标签布局该网页，网站主页的主体布局结构代 码如表10-13所示。