《单元10设计与制作网站主页》由会员分享，可在线阅读，更多相关《单元10设计与制作网站主页（43页珍藏版）》请在金锄头文库上搜索。
1、网页设计与制作 任务驱动式教程,单元10 设计与制作网站主页,教学环节,【教学导航】,【操作准备】,（1）创建所需的文件夹，拷贝所需的资源 （2）启动Dreamweaver CS6 （3）创建本地站点 （4）新建一个网页文档 （5）设置网页标题 （6）保存该网页。,【引导训练】,【任务10-1】制作“E游天下”网站的主页,本单元“引导训练”的任务卡如表10-1所示。,【引导训练】,设计网站主页index1001.html的主体布局结构，应用div+CSS对网站主页的主体结构进行布局。,【任务描述】,【任务10-1-1】网站主页主体布局结构设计,【任务实施】,1定义网页主体布局结构的CSS样式
2、在文件夹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样式 ly-header样式的属性设置如表10-5所示。 （4）定义sidebar样式 sidebar样式的属性设置如表10-6所示。
3、（5）定义content样式 content样式的属性设置如表10-7所示。 （6）定义proPanel样式 proPanel样式的属性设置如表10-8所示。 （7）定义left样式 left样式的属性设置如表10-9所示。,【任务实施】,（8）定义right样式 right样式的属性设置如表10-10所示。 （9）定义proPanelCon2样式 proPanelCon2样式的属性设置如表10-11所示。 （10）定义ly-footer样式 ly-footer样式的属性设置如表10-12所示。 2链接外部样式文件style.css 在网页index1001.html中链接外部样式文件styl
4、e.css，在网页的“ ”内新增一行代码： 3应用div+CSS布局网页 在网站主页中插入div标签布局该网页，网站主页的主体布局结构代码如表10-13所示。,【引导训练】,（1）在样式文件“style.css”中定义网站主页index1001.html的局部布局结构所需的CSS样式。 （2）设计网站主页index1001.html的局部布局结构，应用div+CSS对网站主页的局部结构进行布局。,【任务描述】,【任务10-1-2】网站主页局部布局结构设计,【任务实施】,1定义中部左侧区块布局结构的CSS样式 （1）定义panel样式 panel样式的属性设置如表10-14所示。 （2）定义pa
5、nel-login样式 panel-login样式的属性设置如表10-15所示。 （3）定义banner样式 banner样式的属性设置如表10-16所示。 （4）定义panel-title样式 panel-title样式的属性设置如表10-17所示。 2应用div+CSS布局中部左侧区块 中部左侧区块的布局结构代码如表10-18所示。,【任务实施】,3定义中部右侧主体区块布局结构的CSS样式 （1）定义proPanelCon1样式 proPanelCon1样式的属性设置如表10-19所示。 （2）定义proPanelCon3样式 proPanelCon3样式的属性设置如表10-20所示。 （
6、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所示。,【任务实施】,4应用div+CSS布局右侧的主体区块 右侧主体区块的布局结构代码如表10-26所示。 5应用div+CSS布局右侧主体区块的左部 右侧主体区块左部的布局结构代码如
7、表10-27所示。 6应用div+CSS布局右侧主体区块的右部 右侧主体区块右部的布局结构代码如表10-28所示。 7应用div+CSS布局右侧主体区块的中部 右侧主体区块中部的布局结构代码如表10-29所示。,【引导训练】,设计与制作一个包含导航栏的网页文档top_nav.html，该网页显示在网站主页index1001.html的顶部浮动框架中。,【任务描述】,【任务10-1-3】设计与制作包含导航栏的网页文档top_nav.html,【任务实施】,1创建网页文档top_nav.html 在文件夹“webPage”中创建一个网页文档top_nav.html，该网页将在网站主页顶部的浮动框架
8、中显示。 2定义网页文档top_nav.html的CSS样式 在文件夹style中创建一个CSS样式文件“menu.css”，在该样式文件中定义网页top_nav.html中所需的CSS样式。 （1）定义标签td的样式 标签td样式的属性设置如表10-30所示。,【任务实施】,（2）定义标签a的样式 标签a的属性设置如表10-31所示。 （3）定义first_nav样式 first_nav样式的属性设置如表10-32所示。 （4）定义样式first_nav内所包含元素的样式 first_nav样式内所包含元素的样式的属性设置如表10-33所示。 （5）定义second_nav样式 second
9、_nav样式的属性设置如表10-34所示。 （6）定义样式second_nav内所包含元素的样式 样式second_nav内所包含元素的样式的属性设置如表10-35所示。 （7）定义网站主页index1001.html的二级导航菜单的样式 二级导航菜单的样式的属性设置如表10-36所示。,【任务实施】,3编写JavaScript代码，实现网页特效 （1）在网页中显示当前日期 在网页中显示当前日期的JavaScript代码如表10-37所示，在网页文档top_nav.html的与之间添加这些JavaScript代码。 然后在网页中需要显示当前日期的位置添加以下代码即可。 showNowDate(
10、) ,【任务实施】,（2）动态切换二级菜单 在文件夹“js”中创建一个JavaScript文档“menu.js”，在该文档中编写动态切换二级菜单的JavaScript代码，如表10-38所示。 在网页文档top_nav.html的与之间添加以下代码链接外部脚本文件menu.js：。 4应用div+CSS布局网页文档top_nav.html （1）编写一级导航菜单的布局结构代码 （2）编写二级导航菜单的布局结构代码,【引导训练】,设计与制作网页image_move.htm，该页面中包含连续滚动图片的网页特效。,【任务描述】,【任务10-1-4】设计与制作包含连续滚动图片特效的的网页文档,【任务实
11、施】,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所示。,【引导训练】,创建脚本文件footer.js，该脚本文件包含实现底部导航栏和版权信息的代码。,
12、【任务描述】,【任务10-1-5】创建实现底部导航栏和版权信息的脚本文件,【任务实施】,在文件夹“js”中新建一个脚本文件“footer.js”，在该文件中输入表10-41所示的代码。,表10-41 脚本文件footer.js的代码,【引导训练】,在网站主页index1001.html的顶部导航区域插入浮动框架。,【任务描述】,【任务10-1-6】在网站主页的顶部导航区域插入浮动框架,【任务实施】,在网页index1001.html中div标签 内插入浮动框架，代码如表10-42所示。,表10-42 包含浮动框架的导航区域的代码,【引导训练】,设计与制作网站主页的中部区域，该区域中包括用户登录
13、表单、展示图片和播放视频区块、图片滚动区块。,【任务描述】,【任务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）在
14、用户登录表单插入form与div标签 在网页index1001.html的用户登录表单中插入表单与div标签，且设置其属性，HTML代码如表10-47所示。 （4）在表单中插入表单控件 在用户登录表单的表单中分别输入标签文字，插入文件域、图像和按钮。,【任务实施】,2设计与制作展示图片和播放视频的区块 （1）定义展示图片和播放视频区块的CSS样式 在样式文件“style.css”中定义展示图片和播放视频区块所需的CSS样式。重新定义标签“td”的样式，代码如表10-49所示。 重新定义标签“a”的样式，代码如表10-50所示。 （2）编写自定义函数showContent( )实现动态改变背景的
15、功能 自定义函数showContent( )用于动态改变背景，其代码如表10-51所示。 （3）插入一个1行1列表格table1 在div标签与之间插入一个1行1列的表格，设置其宽度为“175像素”，高度为“128像素”，填充、间距和边框都为“0”，其ID标识为“table1”，HTML代码如表10-52所示。,【任务实施】,2设计与制作展示图片和播放视频的区块 （4）在表格table1中插入两个表格 在表格table1中先插入一个4行1列的表格，设置其宽度为“175像素”，高度为“20像素”，填充、间距和边框都为“0”，其ID标识为“table11”。在该表格的第2个和第3个单元格中输入文字
16、，设置单元格的背景图像，输入必要的代码，代码如表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设计与制作展示图片和播放视频的区块 将光标置于表格content_1的单元格中，在Dreamweaver CS6的主界面中，选择命令【插入】【媒体】【FLV】，打开【插入 FLV】对话框，在该对话框中输入Flv视频的URL，设置Flv视频的属性。 然后单击【确定】按钮，在表格content_1的单元格中完成flv格式视频的插入。在表格content_1中选取所插入的Flv视频，在【属性】面板中对
