网页设计与制作任务驱动式实用教程单元设计与制作网站主页

《网页设计与制作任务驱动式实用教程单元设计与制作网站主页》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

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

2、lv视频、APDiv对象和SWF动画本单元难点（1）设计与制作导航栏（2）设计连续滚动图片的特效（3）实现状态栏中文字移动功能教学方法任务驱动法、分组讨论法、分析探究法、四步训练法课时建议8课时（含考核评价）【操作准备】（1）创建所需的文件夹，拷贝所需的资源（2）启动DreamweaverCS6（3）创建本地站点（4）新建一个网页文档（5）设置网页标题（6）保存该网页。【引导训练】【任务10-1】制作“E游天下”网站的主页本单元“引导训练”的任务卡如表10-1所示。表10-1　单元10“引导训练”任务卡任务

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

4、频区块、图片滚动区块和景点介绍区块（6）在主页index1001.html中插入APDiv对象和SWF动画（7）编写JavaScript程序，实现状态栏中文字的移动效果网页布局结构分析使用div标签+CSS样式布局主页，主页整体为上中下结构，中部区域分为左、右两个区域，右侧区域又分为上、下两个部分网页色彩搭配分析网页中文字的颜色：#000、#013087、#546602、#FFF、#467FB6、#F30、#005CCF、#FFF、#1F6BAF网页中背景颜色：#FFF、#9CDCFE、#F8FEA7．#9

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

6、置：startUnit10task10-1最终文件位置：resultUnit10task10-1本单元“引导训练”的任务跟踪卡如表10-2所示。表10-2　单元10“引导训练”任务跟踪卡任务编号开始时间完成时间计划工时实际工时当前状态本单元“引导训练”网页index1001.html的浏览效果如彩图3所示。【任务10-1-1】网站主页主体布局结构设计【任务描述】设计网站主页index1001.html的主体布局结构，应用div+CSS对网站主页的主体结构进行布局。【任务实施】1．定义网页主体布局结构的

7、CSS样式在文件夹style中创建一个CSS样式文件“style.css”，在该样式文件中定义网页布局结构所需的CSS样式。网站主页index1001.html的主体布局示意图如图10-1所示。313单元10　设计与制作网站首页图10-1　网站主页index1001.html的主体布局示意图（1）定义body标签的样式body标签的属性设置如表10-3所示。（2）定义innerWrapper样式innerWrapper样式的属性设置如表10-4所示。（3）定义ly-header样式ly-header样式的属

8、性设置如表10-5所示。（4）定义sidebar样式sidebar样式的属性设置如表10-6所示。（5）定义content样式content样式的属性设置如表10-7所示。（6）定义proPanel样式proPanel样式的属性设置如表10-8所示。（7）定义left样式left样式的属性设置如表10-9所示。（8）定义right样式right样式的属性设置如表10-10所示。（9）定义proPanelCon2样