《web前端设计》教案18.pdfVIP

教案

授课时间2016年6月30日第18周第1-4节

课程内容项目六综合应用

授课班级2014多媒体设计与制作1、2班授课地点Y404

知识目标复习和巩固所学知识

能力目标综合运用所学知识完成大项目

教学目标

1、具备独立学习并自我解决问题能力的素质。

素质目标2、具备团队合作精神。

3、具备职业岗位提升意识。

重点

多项目代码的综合。

重点难点难点

解决方法代码调试与排错。

重点内容采用详述、多举实例方式讲解；难点内容以原理剖析、动画演示、操作演示等直

观的方式进行讲解。

1、梳理教材，备课，整理教学素材，标记书本重难点，理顺教学思路，修订完善课件。

2、提前发布教学视频，提醒学生登录教学平台自主观看视频，进行课前预习。课前统计

教学准备

并掌握学生的整体学习进度。

3、检查机房的广播设备。

课后作业课后练习

能力训练项

运用所学功能，设计一个综合的网页。

目

教学过程

（根据教学设计延续）

一、任务引入

1、复习上一节课（任务）内容，引入本节课任务——设计一个综合的网页，。

2、教师展示任务的效果。

二、任务内容

运用所学功能，设计一个综合的网页。

设计一个综合的网页，要求实现以下功能：

一、设计导航菜单，要求：

1、菜单包含首页、家用电器（冰箱、空调、电视、洗衣机）、手机数码（华为、小米、酷派、360、魅

族）、日用百货、书籍、帮助中心。当鼠标移进一级菜单时，展开二级菜单（如果有），鼠标移开时收

起二级菜单。

2、所有一级菜单在鼠标移进时呈现“突出”状态（即高亮、选中或聚焦效果），鼠标移出时恢复原状。

3、菜单的美化。

二、制作飘动的广告，要求：

1、遇到屏幕边缘后自动反弹。

2、鼠标移进广告时广告停止，移开时广告继续飘动。

3、广告右上角需有半透明关闭按钮，单击“关闭”按钮后广告消失。

4、广告消失10秒后自动恢复显示，并飘动。

广告图片及关闭按钮自行搜集。

三、设计用户注册页面，要求：

1、有用户名、密码、确认密码、性别、出生日期、爱好（可多选）、年级（下拉选择）、邮件地址、手

机等。所有输入型的输入框需在输入框中以灰色文字提示。

2、用户名和密码规定6-15位；用户名须以字母开头，包含字母、数字和下划线；密码包含字母、数字

和下划线。用户名、密码、出生日期、邮件地址、手机需要进行有效性检测，并提示。

3、两次密码需进行一致性检测。

4、注册页面的美化。

除必须使用JavaScript代码进行解答的要求外，能使用HTML5规范+正则表达式解答的尽量使用该方式

进行解答。

四、制作首页banner焦点图（轮显），要求：

1、banner图片组宽高比须大于2，图片组数量至少有4张，图片两侧要有半透明的向左和向右翻页按钮。

2、点击左右翻页按钮实现图片组的前一张和后一张图片显示。

3、在不点击左右翻页按钮时，图片能实现自动轮显，轮换时间为2秒。

五、设计首页，要求涵盖以上四点功能。

1、网页导航菜单栏显示XXXX年XX月XX日星期X。

2、首页排版及美化。

3、网页右侧设计一个Tab切换区块，Tab数量为2即可。主题内容不限。

4、JavaScript自由运用，要求不能与以上功能重复；需提供文档说明该功能。

三、任务分析

把以前所学的各个功能进行综合，注意代码间的冲突。

四、学生实训

学生根据任务实施方法，访照例子上机实训。

五、教师指导

1、教师引导学生实训，对学生上机实训过程中出现的问题进行纠正。

2、解答学生实训过程中出现的疑问。

3、引导学生进行思考，学会通过调试的方法找出代码中的错误，培养独立思考解决问题的能力。

六、点评总结

1、总结学生上