画鸵萌宠网
教 案
（ 2018 年 秋 季学期）
课程名称（全称）： 课 程 代 码： 课程计划总学时：
交互式网站前端开发综合实践
96 本学期学时： 教研室：
96
互联网+学院 所 属 学 院： 网络教研室
任 课 教 师： 制 订 日 期：
年 月 日
四川科技职业学院教学事业部 制
2018年7月20日
《交互式网站前端开发综合实践》
课程教案
第 1 次课，2学时
适用专业 课 题 教学目的 软件技术（Java开发）、计算机网络技术（Web前端开发） 绪论 课程定位与作用 了解本课程在本专业课程体系中的地位 了解本课程知识总体结构 重点与难点 重点：本课程在专业课程体系中的作用 难点：课程知识结构和建议如何学习 教学设计 概述 案例引入—>案例分析—>引出技能项—>引出知识点—>讲解知识点—>举例 教学环境及资源要求 Dreamweaver CS 6以上，能上网 复习提问 你觉得效果比较炫的网站是什么，打开看看 软件技术（java开发）、计算机网络技术（web前端开发）的课程体系介绍 本课程在课程体系中所处的地位 授课要点 不同的工作岗位对本课程知识技能的需求 本课程点知识结构 建议如何学习本课程 课外作业 欣赏JS+JQ效果的网站，并从整体认知Js+JQ的作用和效果
教学设计与教学内容
时间分配 教学内容 学生活动 教师活动 实训设备 10’ 教师自我介绍 课程考核说明 无 教师介绍 多媒体 1、请学生回答：你觉得你看到过的哪个网站比较炫，20’ 并告诉网址 2、分析网站用到的前台技术（源代码查看器） 3、引出JS和JQ技术 学生回答，并操作多媒体 讲解 多媒体，能上网 1、工作岗位分析 【软件技术：前端岗位、后端岗位】 【计算机网络技术（web前端开发）：前端岗位】 25’ 2、课程体系分析（详见“人才培养方案”的思维导图） 【软件技术（java开发方向）】 【计算机网络技术（Web前端开发）方向】 1、 js要学什么 【语法、window、document、css特效、表弟验20’ 证与事件等，并举例】 2、 JQuery要学什么 【语法、选择器、事件、效果（……）】 如何学习JS+JQ n】（抄—>修改—>模仿—>创新），并以个人的经10’ 【 讲解 多媒体 讲解 多媒体，能上网 提问 讲解 多媒体 历为例解释 时间分配 教学内容 学生活动 教师活动 实训设备 5 知识回顾与作业布置 回答 教师总结与布置作业 多媒体
第 2次课，2学时
适用专业 课 题 软件技术（Java开发）、计算机网络技术（Web前端开发） 第一章HTML标记：HTML、XHTML、HTML5标签的使用 掌握HTML标记、属性 教学目的 了解XHTML、HTML5新标签、绘画功能 掌握HTML5表单标签 重点：常用标签、列表标签、表单标签、HTML新标签、链接 难点：HTML画布 重点与难点 教学设计 概述 案例引入—>案例分析—>引出技能项—>引出知识点—>讲解知识点—>举例 教学环境及资源要求 Dreamweaver CS 6以上，能上网 复习提问 1、 如何记忆繁多的HTML标签？ 2、 HTML与XHTML区别是什么？ 授课要点 HTML标记、属性举例，让学生有直接的感官认知 HTML5文档结构、音频、视频、画布 课外作业 模仿课程内容，CANVAS绘制圆
教学设计与教学内容
时间分配 教学内容 学生活动 教师活动 实训设备 1、 回忆上次课程内容 5’ 【专业课程体系、地位与作用】 【HTML学什么，HTML5要学什么】 学生回答 提问与总结 多媒体 1、Web前端开发概述 Web的发展 Web特点及架构 Web新技术的发展及应用 Web 3介绍 Web新技术的应用 2、HTML标签 30’ 文字与段落 图片与超链接 列表标签 表格标签 表单标签 注释标签 3、XHTML基础 HTML5标签 HTML5文档结构 HTML5新增的结构标签及属性 30’ HTML5音视频 HTML5表单 HTML5画布 讨论 讲解与演示 多媒体，能上网 讨论 讲解与演示 多媒体，能上网 时间分配 教学内容 学生活动 教师活动 实训设备 多媒体，能上网 15’ 学生提问或亲自上台操作 学生操作 演示 5’ 知识回顾与作业布置 回答 教师总结与布置作业 多媒体
第 3 次课，4学时
适用专业 课 题 教学目的 软件技术（Java开发）、计算机网络技术（Web前端开发） 第二章JavaScript编程基础：JavaScript基本语法 之 JavaScript介绍与基本语法 了解JavaScript的作用与使用范围 掌握JavaScript简单使用技巧 重点：JavaScript的作用与使用范围 难点：JavaScript简单使用技巧 重点与难点 教学设计 概述 教学环境及资源要求 案例引入—>案例分析—>引出技能项—>引出知识点—>讲解知识点—>举例 Dreamweaver CS 6以上，能上网 复习提问 3、 为什么我觉得学习的过程应该是【（抄—>修改—>模仿—>创新）n】？ 4、 学习好JS+JQuery课程，你觉得你能从事什么岗位的工作？ 授课要点 JS小程序举例，让学生有直接的感官认知 JS代码的作用（使用）位置 课外作业 模仿课程内容，自己设计出能运行且有效果的JS小程序 教学设计与教学内容
时间分配 教学内容 学生活动 教师活动 实训设备 2、 回忆上次课程内容 10’ 【HTML5新标签？强大画图功能】 【JS要学什么，JQ要学什么】 学生回答 提问与总结 多媒体 时间分配 1、 JS简介 教学内容 学生活动 教师活动 实训设备 脚本语言；可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。 JavaScript 是一种轻量级的编程语言。 JavaScript 是可插入 HTML 页面的编程代码。 JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。 JavaScript 很容易学习 2、 快速认知JS的使用：举例 60’ JavaScript：写入 HTML 输出 JavaScript：对事件作出反应 JavaScript：改变 HTML 内容 JavaScript：改变 HTML 图像 JavaScript：验证输入 3、 JavaScript 与 Java？ Java（由 Sun 发明）是更复杂的编程语言。 ECMA-262 是 JavaScript 标准的官方名称。 JavaScript 由 Brendan Eich 发明。它于 1995 年出现在 Netscape 中（该浏览器已停止更新），并于 1997 年被 ECMA（一个标准协会）采纳 1、 JS代码的编写位置 HTML 中的脚本必须位于 标签之间，脚本可被放置在 HTML 页面的
和 部分中 3、 jQuery选择器 基本选择器【举例】 学生回答 提问与总结 多媒体 教学内容 学生活动 教师活动 实训设备 70’ 层次选择器【举例】 讨论 讲解与演示 多媒体，能上网 过滤选择器【举例】 表单选择器【举例】 时间分配 教学内容 通用语法：$(选择元素) { } 例子：$（”#showDiv”）或$（”.showDiv”） 4、 jQuery事件方法 载入事件【举例】 事件处理【举例】 事件切换【举例】 其他事件 1、 jQuery中元素属性的操作 设置元素属性【举例】 删除元素属性【举例】 2、 jQuery中样式类的操作 添加样式类【举例】 移除样式类【举例】 交替样式类【举例】 3、 jQuery中样式属性的操作 读取样式属性【举例】 设置样式属性【举例】 设置元素偏移【举例】 4、 jQuery中元素内容的操作 操作HTML代码【举例】 操作文本【举例】 操作表单元素的值【举例】 5、 jQuery动画特效【举例】 实现图层的隐藏、移动、滑动拉幕、淡入淡出等效果 6、 DOM操作 节点操作、解决冲突 7、 jQuery与AJAX方法 介绍jQuery中的AJAX方法、事件 8、 jQuery插件 学生活动 教师活动 实训设备 70’ 讨论 讲解与演示 多媒体，能上网 15’ 学生提问或亲自上台操作 学生操作 演示 多媒体，能上网 5’知识回顾与作业布置 回答 教师总结与布置作业 多媒体
第 6次课，2学时
适用专业 软件技术（Java开发）、计算机网络技术（Web前端开发） 课 题 第5章 CSS样式运用 掌握style样式属性动态改变边框颜色 教学目的 掌握className类名属性动态改变按钮背景图片 掌握display显示属性实现层或图片的隐藏/显示和切换特效 重点与难点 重点： style样式属性动态改变边框颜色 难点： className类名属性动态改变按钮背景图片 教学设计 概述 案例引入—>案例分析—>引出技能项—>引出知识点—>讲解知识点—>举例 教学环境及资源要求 Dreamweaver CS 6以上，能上网 复习提问 请实现复选框全选或全不选的效果，并讲解 style样式属性动态改变边框颜色 授课要点 className类名属性动态改变按钮背景图片 display显示属性实现层或图片的隐藏/显示和切换特效 课外作业 制作列表菜单; 布局案例制作 教学设计与教学内容
时间分配 教学内容 学生活动 教师活动 实训设备 回忆上次课程内容 【JQuery选择器类型】 10’ 【JQuery动画特效常见类型】 【JQuery与AJAX】 【JQuery操作CSS】 学生回答 提问与总结 多媒体 1、动态改变字体大小 【举例】 15’ DOM来设置和修改节点的CSS样式 修改CSS样式的方法如下： nodeObject.style.cssProperty=newStyle; 其中，nodeObject 为节点对象，cssProperty 为CSS属性，newStyle 为CSS属性的值。 35’ 讨论 讲解与演示 多媒体，能上网 移入和移出事件的应用 onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。 2、改变按钮背景特效 【举例】 20’ 思考：能否通过通过改变样式backImage能否实时间分配 现？ 教学内容 学生活动 教师活动 实训设备 onMouseOver=\"this.style.backgroundImage= 'url(images/back2.jpg)';\" 失败原因分析： 当鼠标移到按钮上方时，除了图片要换以外，还应保留 border、margin、 padding等样式。 解决方法如下： 1) 首先创建mouseOver和mouseOut两种类样式 2) 使用className类属性进行切换。 定义样式：定义mouseOverStyle和mouseOutStyle两种样式，在对应样式中编写所需要的全部属性。 调用样式代码：在事件发生时改变为相应的样式代码： .mouseOverStyle{ background-image: url(images/back2.jpg); color:#CC0099; border:0px; margin:0px; padding:0px; height:23px;width: 82px; font-size: 14px; } .mouseOutStyle{ background-image: url(images/back1.jpg); color:#0000FF; border:0px; margin:0px; padding:0px;height:23px; width:82px; font-size: 14px; 1、层的隐藏和显示 【举例】 30’ 30’ style.display属性操作元素的显示状态 Object.style.display=value 讨论 讲解与演示 多媒体，能上网 时间分配 教学内容 学生活动 教师活动 实训设备 z-index:定义和用法 z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 ➢ 元素可拥有负的 z-index 属性值。 ➢ Z-index 仅能在定位元素上奏效（例如 position:absolute;） 该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远 ➢ Z-index可能的值 多媒体，能上网 10’ 学生提问或亲自上台操作 学生操作 演示 5’
知识回顾与作业布置 回答 教师总结与布置作业 多媒体
第 7次课，2学时
适用专业 课 题 软件技术（Java开发）、计算机网络技术（Web前端开发） 第6章 表单验证技术 熟悉使用表单验证 掌握文本框控件 教学目的 掌握使用DOM模型的层次关系访问元素的方法 掌握使用表单事件和脚本函数实现表单验证技术 掌握DIV的innerHTML或innerText动态显示内容 ； 重点： 使用DOM模型的层次关系访问元素；使用表单事件和脚本函数实现表单重点与难点 验证；使用表单验证；文本框控件；正则表达验证； 难点： 使用表单事件和脚本函数实现表单验证 教学设计 概述 案例引入—>案例分析—>引出技能项—>引出知识点—>讲解知识点—>举例 教学环境及资源要求 Dreamweaver CS 6以上，能上网 复习提问 CSS3能制作什么类型的动画？ 使用DOM模型的层次关系访问元素 授课要点 使用表单事件和脚本函数实现表单验证 使用表单验证 文本框控件 课外作业 编写用于验证用户注册页面的正则表达式，实现注册页面验证功能？
教学设计与教学内容
时间分配 教学内容 学生活动 教师活动 实训设备 回忆上次课程内容 【style样式属性动态改变边框颜色】 5’ 【className类名属性动态改变按钮背景图片】 【display显示属性实现层或图片的隐藏/显示和切换特效】 学生回答 提问与总结 多媒体 1、什么是表单验证 【举例】 10’ 当用户在输入相关数据时，对输入的数据进行相关的验证，检查数据格式是否符合要求，在数据格式正确过后再上传至服务器。表单验证是javascript中的高级选项之一，JavaScript 用来在数据被送往服务器前对HTML 表单中的这些输入数据进行验证 2、为什么要学表单验证 【举例】 15’ 减轻服务器端的压力 25’ 讨论 讲解与演示 多媒体，能上网 每一个元素包含一个拆分后的子串。例如对于下面的字符串： 如果以逗号为分隔符，可以将该字符串拆分为时间分配 教学内容 一个数组，数组中的每一个元素包含一个不同的水果 学生活动 教师活动 实训设备 1、表单验证内容 【举例】 20’ 以注册表单为例： 1）是否为空 2）是否为数字 3） 是否为电子邮件 4）是否在某个范围 5） 长度是否足够 6） 出生日期 7）省市级联菜单 40’ 讨论 讲解与演示 多媒体，能上网 时间分配 replace()方法 教学内容 学生活动 教师活动 实训设备 replace()方法可以根据需要将字符串中的String对象或者文字替换掉，形成一个新的字符串 search()方法 search()方法可以根据模式字符串进行查找。如果目标字符串中找到与模式匹配的第一个字串，则search()方法则返回该子串被找到的位置，否则返回-1。search()方法只接收一个参数，即需要查找的模式字符串 2、文本框控件 【举例】 20’ 文本框对象的常用属性、方法、事件 文本框控件在网页设计中的使用是相当频繁的，当需要获得更好的用户体验时，就需要使用JavaScript代码来对其进行操作，如获取或修改其属性值，控制其获取焦点等等，接下来我们就对文本框的相关属性和方法进行说明。 ➢ value属性 在网页中我们可以使用文本框的value属性来获取其值或者修改其值，例如我们可以获取表单中id为txtEmail的值 ➢ focus()方法 在用户进行操作时，某一些时候需要自动的将某一个文本框设置为焦点，进行数据的输入，此时就可以使用focus()方法来让其获得焦点，以便用户对其进行数据的输入。 例当文本框获取焦点时将文本框的数据清空，并将边框设为红色。 多媒体，能上网 10’ 学生提问或亲自上台操作 学生操作 演示 时间分配 教学内容 学生活动 教师活动 实训设备 5’
知识回顾与作业布置 回答 教师总结与布置作业 多媒体
第 8次课，2学时
适用专业 课 题 软件技术（Java开发）、计算机网络技术（Web前端开发） 第7章 客户端数据请求技术 了解WEB Serice 掌握XML文件 教学目的 掌握HTTP通信机制 掌握AJAX方法； 了解熟悉JSON技术 重点：XML文件、AJAX方法 难点：AJAX方法、JSON数据读取 重点与难点 教学设计 概述 案例引入—>案例分析—>引出技能项—>引出知识点—>讲解知识点—>举例 教学环境及资源要求 Dreamweaver CS 6以上，能上网 复习提问 表单验证的必要性？ 编写XML文件、读取 授课要点 AJAX方法、事件 Javascript实现JSON对象数据读取 课外作业 什么是HTTP通信机制？
教学设计与教学内容
时间分配 教学内容 学生活动 教师活动 实训设备 回忆上次课程内容 5’ 【需要验证的表单元素有哪些？】 【正则表达式】 学生回答 提问与总结 多媒体 1. WEB Service原理、调用 2. 介绍HTTP通信机制 建立TCP连接 发起HTTP请求 响应HTTP请求 关闭TCP连接 3. XML文件
第 9次课，4学时
适用专业 课 题 软件技术（Java开发）、计算机网络技术（Web前端开发） 第8章 综合案例网站制作 掌握站点创建 教学目的 掌握服务器搭建 掌握综合案例网站制作 重点与难点 重点：综合案例网站制作 难点：综合案例网站制作 教学设计 概述 案例引入—>案例分析—>引出技能项—>引出知识点—>讲解知识点—>举例 教学环境及资源要求 Dreamweaver CS 6以上，能上网 复习提问 表单验证的必要性？ 页面布局 授课要点 交互式功能 数据验证 课外作业 综合案例网站制作
教学设计与教学内容
时间分配 教学内容 学生活动 教师活动 实训设备 回忆上次课程内容 5’ 【用户交互的理解？】 学生回答 提问与总结 多媒体 130 1. 2. 3. 4. 5. 6. 综合案例网站制作：页面布局（一） 综合案例网站制作：页面布局（二） 综合案例网站制作：页面布局（三） 综合案例网站制作：交互式动画制作 综合案例网站制作：交互式用户数据验证编程 综合案例网站制作：特效应 讨论 讲解与演示 多媒体，能上网 20’ 学生提问或亲自上台操作 学生操作 演示 多媒体，能上网 5’ 知识回顾与作业布置 回答 教师总结与布置作业 多媒体
因篇幅问题不能全部显示，请点此查看更多更全内容