dreamweaver cs 网页制作案例教程电子教案第章设计与制作网站主页

《dreamweaver cs 网页制作案例教程电子教案第章设计与制作网站主页》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第10章　制作网站首页第10章　制作网站主页本章综合应用HTML、CSS和JavaScript的知识，设计与制作网站的主页。【教学导航】教学目标（1）能应用CSS样式设计网站主页的主体布局结构（2）能应用CSS样式设计网站主页的局部布局结构（3）能设计与制作导航栏，会正确使用浮动框架（4）会插入Flash视频、APDiv对象和Flash动画（5）会设计连续滚动图片的特效（6）会设计包含底部导航栏和版权信息的脚本文件，且在网页中插入外部脚本文件（7）会设计用户登录表单（8）了解实现状态栏中文字移动功能的方法本章重点（1）应用CS

2、S样式设计网页的布局结构（2）设计与制作导航栏（3）插入Flash视频、APDiv对象和Flash动画本章难点（1）设计与制作导航栏（2）设计连续滚动图片的特效（3）实现状态栏中文字移动功能教学方法任务驱动法、分组讨论法、三步训练法、理论实践一体化、讲练结合课时建议8课时（含课堂同步训练）10.1　课前准备（1）在本地硬盘创建文件夹（2）启动DreamweaverCS3（3）创建名称为“网站首页”的本地站点（4）新建一个网页文档（5）设置网页标题（6）保存该网页。10.2　课堂引导训练及评价【课堂引导训练任务描述】311第10

3、章　制作网站首页1、网页制作任务卡网页制作任务卡如表10-1所示。表10-1　网页制作任务卡任务编号10-1任务名称制作“E游天下”网站的主页网页主题E游天下计划工时180min网页制作任务描述（1）设计主页的主体布局结构和局部布局结构（2）设计与制作包含导航栏的网页top_nav.html（3）设计与制作包含连续滚动图片特效的网页image_move.html（4）设计包含底部导航栏和版权信息的脚本文件（5）制作主页index1001.html。在该网页顶部导航区域插入浮动框架，在该浮动框架中显示网页top_nav.html

4、；设计与制作用户登录区域、图片和视频欣赏区域、图片滚动区域、景点介绍区域（6）在主页index1001.html中插入APDiv对象和Flash动画（7）编写JavaScript程序，实现状态栏中文字的移动效果网页布局结构分析使用Div标签+CSS样式布局主页，主页整体为上中下结构，中部区域分为左、右两个区域，右侧区域又为析上、下两个部分网页色彩搭配分析网页中文字的颜色：#000、#013087、#546602、#fff、#467fb6、#f30、#005ccf、#fff、#1F6BAF，背景颜色：#FFFFFF、#9CDCF

5、E、#F8FEA7、#939393、#E1F0FE、#51AFE7网页组成元素分析主要包括文字、图像、Flash动画、视频、顶部二级导航栏、底部导航栏、表单、各种特效等网页元素任务实现流程分析创建本地站点“E游天下”→设计主页的主体布局结构→设计主页的局部布局结构→设计与制作网页top_nav.html→设计与制作网页image_move.html→设计脚本文件→创建网页文档“index0901.html”→设计与制作网站主页的中部区域→插入APDiv对象→插入Flash动画→编写JavaScript程序，实现网页特效配盘素材

6、导引原始文件位置：start10第10章制作网站首页task10-1最终文件位置：result10第10章制作网站首页task10-12、网页制作任务跟踪卡网页制作任务跟踪卡如表10-2所示。表10-2　网页制作任务跟踪卡任务编号开始时间完成时间计划工时实际工时当前状态【网页效果展示】网页index1001.html的浏览效果如图10-1所示。311第10章　制作网站首页图10-1　网页index1001.html的浏览效果【任务完成过程】10.2.1　网站主页主体布局结构设计【操作要求】设计网站主页的主体布局结构，应

7、用DIV+CSS对网站主页的主体结构进行布局。【实施过程】311第10章　制作网站首页1、定义网页主体布局结构的CSS样式（1）定义body标签的样式（2）定义innerWrapper样式（3）定义ly-header样式（4）定义sidebar样式（5）定义content样式（6）定义proPanel样式（7）定义left样式（8）定义right样式（9）定义proPanelCon2样式（10）定义ly-footer样式2、链接外部样式文件style.css在网页index1001.html中链接外部样式文件style.css

8、，在网页的“”内新增一行代码：3、应用DIV+CSS布局网页10.2.2　网站主页局部布局结构设计10.2.2.1　中部左侧区块【操作要求】