JavaScript jQuery网页特效设计任务驱动教程-课程设计

课 程 设 计

1．教学单元设计

单元序号

单元1

单元2

单元3

单元4

单元5

单元6

单元7

单元8

单元9

单元名称

设计基本网页特效

设计日期时间类网页特效

设计文字类网页特效

设计图片类网页特效

设计表单控件类网页特效

设计导航菜单类网页特效

设计选项卡类网页特效

设计内容展开与折叠类网页特效

设计页面类网页特效

小计

建议课时

8

8

8

10

6

6

6

6

6

64

建议考核分值

10

10

10

18

10

11

10

10

11

100

2．教学过程设计

教学环节序号

1

2

3

4

教学环节名称

教学导航

特效赏析

知识必备

引导训练

自主训练

说明

明确教学目标、熟悉教学方法、了解课时建议

赏析典型网页特效，使学习者对相关的知识和方法有初步认识

对网页特效设计相关的理论知识进行分析与归纳，为网页特效设计提供方法指导和知识支持

引导学习者一步一步地完成网页特效设计任务

参照引导训练的过程，学习者自主完成类似的网页特效设计任务

5

3．网页特效设计和任务设计

单元序号 训练环节

特效赏析

网页特效设计任务

【任务1-1】JavaScript实现动态加载网页内容

【任务1-2】jQuery实现网页收藏

【任务1-3】JavaScript实现动态改变样式文件

单元1 引导训练

【任务1-4】JavaScript实现动态改变网页字体大小及关闭网页窗口

【任务1-5】JavaScript实现播放Flash动画

【任务1-6】jQuery实现动态设置页面的宽度和高度

自主训练

【任务1-7】利用外部JS文件动态输出网页内容

【任务1-8】巧用CSS实现下拉菜单

JavaScript+jQuery

网页特效设计任务驱动教程

续表

单元序号 训练环节

特效赏析

网页特效设计任务

【任务2-1】显示常规格式的当前日期与时间

【任务2-2】采用多种方式显示当前的日期

【任务2-3】不同的节日显示对应的问候语

【任务2-4】在特定日期的特定时段显示打折促销信息

单元2 引导训练

【任务2-5】不同时间段显示不同的问候语

【任务2-6】一周内每天输出不同的图片

【任务2-7】实现在线考试倒计时

【任务2-8】显示限定格式的日期

自主训练

特效赏析

【任务2-9】验证日期的有效性

【任务2-10】实现限时抢购倒计时

【任务3-1】JavaScript实现滚动网页标题栏中的文字

【任务3-2】jQuery实现向上滚动网站促销公告

【任务3-3】JavaScript实现网页状态栏中的文字呈现打字效果

【任务3-4】JavaScript实现网页文字滚动与等待的交替效果

单元3 引导训练 【任务3-5】JavaScript实现鼠标指针滑过动态改变显示内容及外观效果

【任务3-6】JavaScript实现文本围绕鼠标指针旋转

【任务3-7】jQuery实现网站动态信息滚动与等待的交替效果

自主训练

特效赏析

【任务3-8】JavaScript实现网站公告信息连续向上滚动

【任务3-9】jQuery实现循环滚动网页中的文字

【任务4-1】JavaScript实现纵向焦点图片轮换

【任务4-2】jQuery实现带左右按钮控制焦点图片切换

【任务4-3】JavaScript实现控制网页中的图片尺寸

【任务4-4】JavaScript实现限制图片尺寸与滑动鼠标滚轮调整图片尺寸

【任务4-5】JavaScript实现网页中图片连续向上滚动

【任务4-6】JavaScript实现具有滤镜效果的横向焦点图片轮换

【任务4-7】JavaScript实现具有手风琴效果的横向焦点图片轮换

引导训练

单元4

【任务4-8】JavaScript实现带缩略图且双向移动的横向焦点图轮换

【任务4-9】JavaScript实现随滚动条滑块的移动上下滑动图片

【任务4-10】jQuery实现图片纵向移动的焦点图片轮换

【任务4-11】jQuery实现具有滤镜效果的横向焦点图片轮换

【任务4-12】jQuery实现鼠标指针滑过图片时预览大图

【任务4-13】jQuery实现单击箭头按钮切换图片

【任务4-14】JavaScript实现图片连续向左滚动

【任务4-15】JavaScript实现通用横向焦点图片轮换

自主训练

【任务4-16】JavaScript实现网页图片拖曳

【任务4-17】jQuery实现图片纵向切换

【任务4-18】jQuery实现自动与手动均可切换的焦点图片轮换

【任务4-19】jQuery实现单击左右箭头滚动图片

2

课程设计

续表

单元序号 训练环节

特效赏析

网页特效设计任务

【任务5-1】实现注册表单中的网页特效

【任务5-2】实现反馈意见表单中的网页特效

【任务5-3】JavaScript实现邮箱自动导航

单元5

引导训练 【任务5-4】JavaScript实现获取表单控件的设置值

【任务5-5】jQuery实现自定义列表框与单击清空输入框内容

【任务5-6】JavaScript实现输出列表框中被选项的文本内容

自主训练 【任务5-7】JavaScript实现利用列表框切换网页

【任务5-8】jQuery实现动态改变购买数量

【任务6-1】应用className和display等属性实现横向下拉菜单

特效赏析 【任务6-2】应用jQuery的hover事件和addClass等方法实现横向导航菜单

【任务6-3】应用jQuery的bind和attr等方法实现纵向导航菜单

【任务6-4】应用JavaScript的onmouseover等事件和className属性设计横向导航菜单

引导训练

单元6

【任务6-5】应用jQuery的hover事件和CSS方法设计横向导航菜单

【任务6-6】应用jQuery的find和animate等方法设计横向导航菜单

【任务6-7】应用jQuery的one和each等方法设计复杂导航菜单

【任务6-8】应用HTML元素的样式属性设计横向下拉菜单

【任务6-9】应用jQuery的show和hide等方法设计纵向导航菜单

自主训练 【任务6-10】应用jQuery的slideDown和slideUp等方法设计有滑动效果的横向下拉菜单

【任务6-11】应用jQuery的slideDown和fadeOut等方法设计下拉菜单

【任务7-1】应用setInterval函数和display属性实现选项卡的手动切换和自动

特效赏析 切换

【任务7-2】应用jQuery的index和find等方法实现横向选项卡

【任务7-3】应用DOM的className和style等属性设计纵向选项卡

单元7

【任务7-4】应用DOM的className和style等属性设计横向选项卡

引导训练 【任务7-5】应用仿jQuery的attr方法设计横向选项卡

【任务7-6】应用JavaScript的push和jQuery的animate等方法设计横向选项卡与图文滚动特效

自主训练

特效赏析

单元8

引导训练

【任务7-7】应用DOM的getElementById和className等属性设计横向选项卡

【任务7-8】应用jQuery的mouseover和show等方法设计横向选项卡

【任务8-1】应用jQuery的each和hasClass等方法设计网页内容折叠与展开特效

【任务8-2】应用jQuery的toggle和CSS等方法实现网页内容多层折叠与展开特效

【任务8-3】应用DOM的onclick事件和parentNode属性设计网页内容折叠与展开特效

【任务8-4】应用JavaScript的getElementsByTagName和className等方法或属性设计网页内容折叠与展开特效

【任务8-5】应用jQuery的bind和CSS等方法设计网页内容折叠与展开特效

3

JavaScript+jQuery

网页特效设计任务驱动教程

【任务8-6】应用jQuery的next和toggleClass等方法设计折叠与展开网页内容的特效

续表

单元序号 训练环节

特效

【任务8-8】应用jQuery的hover和click事件设计网页内容折叠与展开特效

【任务8-9】应用jQuery的data和animate等方法设计网页内容折叠与展开特效

特效赏析

【任务9-1】实现页面换肤网页特效

【任务9-2】根据日期特征动态切换背景

【任务9-3】根据屏幕宽度自动设置网页背景和导航栏

引导训练

单元9

【任务9-4】页面快捷导航菜单的显示与隐藏

【任务9-5】下拉窗口的打开与自动隐藏

【任务9-6】滚动屏幕时隐藏或显示“返回顶部”导航栏

【任务9-7】选购商品时打开购物车页面

自主训练

【任务9-8】动态切换页面背景与调整页面大小

【任务9-9】浮动框架的高度自适应页面内容的高度

【任务9-10】随着屏幕高度变化隐藏或显示“返回顶部”导航栏

网页特效设计任务

【任务8-7】应用DOM的getElementById方法和className属性设计网页内容折叠与展开单元8 自主训练

任务合计 92

4．JavaScript和jQuery相关知识的选取与序化

单元序号 JavaScript知识导航

（1）JavaScript简介

（2）JavaScript主要的语法规则

（3）JavaScript常用的开发工具

（4）在HTML文档中嵌入JavaScript代码的方法

单元1

（5）JavaScript的注释

（6）JavaScript的数据类型

（7）JavaScript的常量与变量

（8）JavaScript的消息框

（9）JavaScript的异常处理

（10）JavaScript库

（1）JavaScript的运算符与表达式

（2）JavaScript的语句及其规则

（3）JavaScript的条件语句

单元2 （4）JavaScript的函数

（5）JavaScript的String（字符串）对象

（6）JavaScript的Math（数学）对象

（7）JavaScript的Date（日期）对象

JavaScript和jQuery的使用比较

（1）下载和替代jQuery库

（2）jQuery的引用

（3）jQuery函数的类别

（4）jQuery的基础语法

（5）文档就绪函数ready

jQuery知识导航

4

课程设计

（8）JavaScript的计时方法

（9）JavaScript的RegExp对象及其方法

（10）支持正则表达式的String对象的方法

续表

单元序号 JavaScript知识导航

（1）JavaScript的循环语句

单元3

单元4

单元5

单元6

单元7

单元8

单元9

（2）HTML DOM（文档对象模型）

（3）JavaScript的位置与尺寸方法

JavaScript的对象

（1）JavaScript的事件

（2）JavaScript的事件方法

JavaScript的this指针

（1）JavaScript的数组对象

（2）JSON及其使用

BOM（浏览器对象模型）

正确使用Cookie

jQuery知识导航

（1）jQuery的选择器

（2）jQuery的链式操作

（3）jQuery的效果方法

jQuery文档的操作方法

jQuery的事件方法

（1）jQuery的属性操作方法

（2）jQuery的CSS操作方法

jQuery的尺寸方法

正确区分jQuery对象和DOM对象

（1）jQuery的核心函数

（2）jQuery的选择器

（3）jQuery的遍历方法

（4）jQuery的事件方法

（5）jQuery的效果方法

附录A

（6）jQuery的文档操作方法

（7）jQuery的DOM元素方法

（8）jQuery的属性操作方法

（9）jQuery的CSS操作方法

（10）jQuery的尺寸方法

（11）jQuery的数据操作方法

（12）jQuery的AJAX操作方法

5