文档介绍：第10章制作网站主页
本章综合应用HTML、CSS和JavaScript的知识,设计与制作网站的主页。
【教学导航】
教学目标
(1)能应用CSS样式设计网站主页的主体布局结构
(2)能应用CSS样式设计网站主页的局部布局结构
(3)能设计与制作导航栏,会正确使用浮动框架
(4)会插入Flash视频、AP Div对象和Flash动画
(5)会设计连续滚动图片的特效
(6)会设计包含底部导航栏和版权信息的脚本文件,且在网页中插入外部脚本文件
(7)会设计用户登录表单
(8)了解实现状态栏中文字移动功能的方法
本章重点
(1)应用CSS样式设计网页的布局结构
(2)设计与制作导航栏
(3)插入Flash视频、AP Div对象和Flash动画
本章难点
(1)设计与制作导航栏
(2)设计连续滚动图片的特效
(3)实现状态栏中文字移动功能
教学方法
任务驱动法、分组讨论法、三步训练法、理论实践一体化、讲练结合
课时建议
8课时(含课堂同步训练)
课前准备
(1)在本地硬盘创建文件夹
(2)启动Dreamweaver CS3
(3)创建名称为“网站首页”的本地站点
(4)新建一个网页文档
(5)设置网页标题
(6)保存该网页。
课堂引导训练及评价
【课堂引导训练任务描述】
1、网页制作任务卡
网页制作任务卡如表10-1所示。
表10-1 网页制作任务卡
任务编号
10-1
任务名称
制作“E游天下”网站的主页
网页主题
E游天下
计划工时
180min
网页制作任务描述
(1)设计主页的主体布局结构和局部布局结构
(2)
(3)
(4)设计包含底部导航栏和版权信息的脚本文件
(5)。在该网页顶部导航区域插入浮动框架,;设计与制作用户登录区域、图片和视频欣赏区域、图片滚动区域、景点介绍区域
(6) Div对象和Flash动画
(7)编写JavaScript程序,实现状态栏中文字的移动效果
网页布局结构分析
使用Div标签+CSS样式布局主页,主页整体为上中下结构,中部区域分为左、右两个区域,右侧区域又为析上、下两个部分
网页色彩搭配分析
网页中文字的颜色:#000、#013087、#546602、#fff、#467fb6、#f30、#f、#fff、#1F6BAF,背景颜色:#FFFFFF、#9CDCFE、#F8FEA7、#939393、#E1F0FE、#51AFE7
网页组成元素分析
主要包括文字、图像、Flash动画、视频、顶部二级导航栏、底部导航栏、表单、各种特效等网页元素
任务实现流程分析
创建本地站点“E游天下”→设计主页的主体布局结构→设计主页的局部布局结构→→→设计脚本文件→创建网页文档“”→设计与制作网站主页的中部区域→插入AP Div对象→插入Flash动画→编写JavaScript程序,实现网页特效
配盘素材导引
原始文件位置:start\10第10章制作网站首页\task10-1
最终文件位置:result\10第10章制作网站首页\task10-1
2、网页制作任务跟踪卡
网页制作任务跟踪卡如表10-2所示。
表10-2 网页制作任务跟踪卡
任务编号
开始时间
完成时间
计划工时
实际工时
当前状态
【网页效果展示】
-1所示。
图10-1
【任务完成过程】
网站主页主体布局结构设计
【操作要求】
设计网站主页的主体布局结构,应用DIV+CSS对网站主页的主体结构进行布局。
【实施过程】
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、
,在网页的“<H