HTML+CSS+JavaScript网页制作(Web前端开发)(第3版)-首页

XXXX职业技术学院教案首页

编号：JX/GC7.1-01-JL03

教师姓名

适用班级

课时安排

张老师 部 门 软件与信息学院 课程名称 前端设计与开发

-班级编号-

2学时 教学课型：√理论课 □实验课 □体育课 □习题课 □实训课 □实践环境课

编号 1

教案介质 √纸质 √电子 教案篇幅 √打印稿1页 □手写稿__页 √PPT 23幅 □有其他电子文件

题目（教学章、节或主题）

第一章 网页设计理论

第二章 HTML语言

教学目的要求：

了解网页的来源和本质、网页的组成元素、网页的尺寸、网页的布局、网页的色彩、网站建设需求分析、网页设计流程

了解HTML特点、HTML语法、HTML文档结构

时 间

15分钟

30分钟

30分钟

15分钟

授 课 内 容 提 要

（标注重点、难点）

1、引言

1） 为什么要学习前端设计与开发

2） 前端设计与开发课程的内容

2、网页设计理论

1）网页的来源和本质

2）网页的组成元素

3）网页的尺寸

4）网页的布局

5）网页的色彩

6）网站建设需求分析

7）网页设计流程

3、HTML语言

1）HTML特点

2）HTML语法（难点）

3）HTML文档结构（重点）

4、小结

教 师 活 动

引入新课程

讲授新课内容

授课过程中穿插提问

辅导学生上机操作实践

学 生 活 动

认真听讲并思考

思考并回答问题

上机操作完成任务

使用资源

电脑

投影仪

传奇软件

网络

讨论、思考题、作业：

课后练习题

部门领导意见：

教研室主任签章： 2021 年 8 月 31 日

XXXX职业技术学院教案首页

编号：JX/GC7.1-01-JL03

教师姓名

适用班级

课时安排 2学时

张老师 部门 软件与信息学院 课程名称 前端设计与开发

-班级编号-

教学课型：√理论课□实验课□体育课□习题课□实训课□实践环境课

编号 2

教案介质 √纸质√电子 教案篇幅 √打印稿1页 □手写稿__页 √PPT 23幅 □有其他电子文件

题目（教学章、节或主题）

第二章 HTML语言

教学目的要求：

熟悉HTML常用标记

授课内容提要

（标注重点、难点）

1、引言

1）HTML语法

2）HTML文档结构

2、HTML语言

1）熟悉HTML常用标记

文本标记

图像标记

超链接标记

列表标记

分节标记

3、小结

重点：文本标记、图像标记、超链接标记、列表标记

难点: 文本标记、超链接标记

时间

10分钟

65分钟

15分钟

教师活动

复习上次课程重点内容

讲授新课内容

授课过程中穿插提问

辅导学生上机操作实践

学生活动

认真听讲并思考

思考并回答问题

上机操作完成任务

使用资源

电脑

投影仪

传奇软件

网络

讨论、思考题、作业：

2-13

部门领导意见：

教研室主任签章： 2021 年 8 月 31 日

XXXX职业技术学院教案首页

编号：JX/GC7.1-01-JL03

教师姓名

适用班级

课时安排 2学时

张老师 部门 软件与信息学院 课程名称 前端设计与开发

-班级编号-

教学课型：√理论课□实验课□体育课□习题课□实训课□实践环境课

编号 3

教案介质 √纸质√电子 教案篇幅 √打印稿1页 □手写稿__页 √PPT 23幅 □有其他电子文件

题目（教学章、节或主题）

第二章 HTML语言

教学目的要求：

熟悉HTML常用标记

时间

10分钟

65分钟

15分钟

授课内容提要

（标注重点、难点）

1、复习

2、引言

1）简述文本标记

2）简述图像标记

3）简述超链接标记

4）简述列表标记

3、小结

重点：图像标记

难点: 列表标记

教师活动

复习上次课程重点内容

讲授新课内容

授课过程中穿插提问

辅导学生上机操作实践

学生活动

认真听讲并思考

思考并回答问题

上机操作完成任务

使用资源

电脑

投影仪

传奇软件

网络

讨论、思考题、作业：

2-19

部门领导意见：

教研室主任签章： 2021 年 8 月 31 日

XXXX职业技术学院教案首页

编号：JX/GC7.1-01-JL03

教师姓名

适用班级

课时安排 2学时

张老师 部门 软件与信息学院 课程名称 前端设计与开发

-班级编号-

教学课型：√理论课□实验课□体育课□习题课□实训课□实践环境课

编号 4

教案介质 √纸质√电子 教案篇幅 √打印稿1页 □手写稿__页 √PPT 23幅 □有其他电子文件

题目（教学章、节或主题）

第二章 HTML语言

教学目的要求：

熟悉HTML常用标记

时间

10分钟

65分钟

15分钟

授课内容提要

（标注重点、难点）

1、复习

2、HTML语言

1）熟悉HTML常用标记

分节标记

表格标记

浮动框架标记

多媒体标记

交互标记

3、小结

重点：表格标记、浮动框架标记、多媒体标记、交互标记

难点: 表格标记、交互标记

教师活动

复习上次课程重点内容

讲授新课内容

授课过程中穿插提问

辅导学生上机操作实践

学生活动

认真听讲并思考

思考并回答问题

上机操作完成任务

使用资源

电脑

投影仪

传奇软件

网络

讨论、思考题、作业：

2-21

部门领导意见：

教研室主任签章： 2021 年 8 月 31 日

XXXX职业技术学院教案首页

编号：JX/GC7.1-01-JL03

教师姓名

适用班级

课时安排 2学时

张老师 部门 软件与信息学院 课程名称 前端设计与开发

-班级编号-

教学课型：√理论课□实验课□体育课□习题课□实训课□实践环境课

编号 5

教案介质 √纸质√电子 教案篇幅 √打印稿1页 □手写稿__页 √PPT 23幅 □有其他电子文件

题目（教学章、节或主题）

第三章 HTML5表单

教学目的要求：

掌握动态网页与网页的动态效果原理

掌握表单设计基础知识

掌握表达标记

时间

15分钟

65分钟

10分钟

授课内容提要

（标注重点、难点）

1、引言

1）简述表格标记

2）简述浮动框架标记

3）简述多媒体标记

4）简述交互标记

2、HTML5表单

1）动态网页与网页的动态效果

2）表单设计基础

3）表单标记

表单标记

输入标记

下拉列表框标记

多行文本框标记

3、小结

重点：表单标记、输入标记、下拉列表框标记、多行文本框标记

难点: 表单标记、输入标记

教师活动

复习上次课程重点内容

讲授新课内容

授课过程中穿插提问

辅导学生上机操作实践

学生活动

认真听讲并思考

思考并回答问题

上机操作完成任务

使用资源

电脑

投影仪

传奇软件

网络

讨论、思考题、作业：

3-1

部门领导意见：

教研室主任签章： 2021 年 8 月 31 日

XXXX职业技术学院教案首页

编号：JX/GC7.1-01-JL03

教师姓名

适用班级

课时安排 2学时

张老师 部门 软件与信息学院 课程名称 前端设计与开发

-班级编号-

教学课型：√理论课□实验课□体育课□习题课□实训课□实践环境课

编号 6

教案介质 √纸质√电子 教案篇幅 √打印稿1页 □手写稿__页 √PPT44幅□有其他电子文件

题目（教学章、节或主题）

第三章 HTML5表单

教学目的要求：

掌握表单标记

演练综合实例

时间

10分钟

65分钟

15分钟

授课内容提要

（标注重点、难点）

1、引言

1）简述表单标记

2）简述输入标记

2、HTML5表单

1）表单标记

表单分组标记

分组标题标记

按钮标记

绑定标记

输出标记

生成秘钥对标记

3、小结

重点：分组标题标记、按钮标记、生成秘钥对标记

难点: 生成秘钥对标记

教师活动

复习上次课程重点内容

讲授新课内容

授课过程中穿插提问

辅导学生上机操作实践

学生活动

认真听讲并思考

思考并回答问题

上机操作完成任务

使用资源

电脑

投影仪

传奇软件

网络

讨论、思考题、作业：

3-2

部门领导意见：

教研室主任签章： 2021 年 8 月 31 日

XXXX职业技术学院教案首页

编号：JX/GC7.1-01-JL03

教师姓名

适用班级

课时安排 2学时

张老师 部门 软件与信息学院 课程名称 前端设计与开发

-班级编号-

教学课型：√理论课□实验课□体育课□习题课□实训课□实践环境课

编号 7

教案介质 √纸质√电子 教案篇幅 √打印稿1页 □手写稿__页 √PPT41幅□有其他电子文件

题目（教学章、节或主题）

第四章 CSS基础

教学目的要求：

了解CSS概念

了解CSS的基本语法

熟悉选择器

时间

15分钟

65分钟

10分钟

授课内容提要

（标注重点、难点）

1、引言

1）简述分组标题标记

2）简述按钮标记

3）简述生成秘钥对标记

2、CSS基础

1）CSS概念

2）CSS的基本语法

CSS规则

CSS的引用方法

CSS注释

3）选择器

基本选择器

复合选择器

4、小结

重点：CSS的引用方法、基本选择器、复合选择器

难点:抽象数据类型、算法的性能分析

教师活动

复习上次课程重点内容

讲授新课内容

授课过程中穿插提问

辅导学生上机操作实践

学生活动

认真听讲并思考

思考并回答问题

上机操作完成任务

使用资源

电脑

投影仪

传奇软件

网络

讨论、思考题、作业：

无

部门领导意见：

教研室主任签章： 2021 年 8 月 31 日

XXXX职业技术学院教案首页

编号：JX/GC7.1-01-JL03

教师姓名

适用班级

课时安排 2学时

张老师 部门 软件与信息学院 课程名称 前端设计与开发

-班级编号-

教学课型：√理论课□实验课□体育课□习题课□实训课□实践环境课

编号 8

教案介质 √纸质√电子 教案篇幅 √打印稿1页 □手写稿__页 √PPT41幅□有其他电子文件

题目（教学章、节或主题）

第四章 CSS基础

教学目的要求：

熟悉选择器

了解CSS的继承特性

了解CSS的层叠特性、

了解CSS常用单位

了解CSS书写和命名规范

时间

15分钟

65分钟

10分钟

授课内容提要

（标注重点、难点）

1、引言

1）简述CSS的引用方法

2）简述基本选择器

3）简述复合选择器

2、CSS基础

1）选择器

伪类和伪元素选择器

2）CSS的继承特性

3）CSS的层叠特性

4）CSS常用单位

5）CSS书写和命名规范

3、小结

重点：伪类和伪元素选择器、CSS的继承特性、CSS的层叠特性

难点: 伪类和伪元素选择器、CSS的继承特性、CSS的层叠特性

教师活动

复习上次课程重点内容

讲授新课内容

授课过程中穿插提问

辅导学生上机操作实践

学生活动

认真听讲并思考

思考并回答问题

上机操作完成任务

使用资源

电脑

投影仪

传奇软件

网络

讨论、思考题、作业：

4-11、4-12

部门领导意见：

教研室主任签章： 2021 年 8 月 31 日

XXXX职业技术学院教案首页

编号：JX/GC7.1-01-JL03

教师姓名

适用班级

课时安排 2学时

张老师 部门 软件与信息学院 课程名称 前端设计与开发

-班级编号-

教学课型：√理论课□实验课□体育课□习题课□实训课□实践环境课

编号 9

教案介质 √纸质√电子 教案篇幅 √打印稿1页 □手写稿__页 √PPT98幅□有其他电子文件

题目（教学章、节或主题）

第五章 CSS页面布局及排版

教学目的要求：

理解、掌握CSS盒子模型

理解、掌握盒子之间的关系

时间

15分钟

65分钟

10分钟

授课内容提要

（标注重点、难点）

1、引言

1）简述伪类和伪元素选择器

2）简述CSS的继承特性

3）简述CSS的层叠特性

2、CSS页面布局及排版

1）CSS盒子模型

盒子模型的概念

边框

内容

内边距

外边距

2）盒子之间的关系

标准文档流

div元素和span元素

盒子在标准流中的定位

盒子的浮动与定位

3、小结

重点：内边距、外边距、标准文档流、盒子在标准流中的定位、盒子的浮动与定位

难点: 内边距、外边距、盒子在标准流中的定位、盒子的浮动与定位

教师活动

复习上次课程重点内容

讲授新课内容

授课过程中穿插提问

辅导学生上机操作实践

学生活动

认真听讲并思考

思考并回答问题

上机操作完成任务

使用资源

电脑

投影仪

传奇软件

网络

讨论、思考题、作业：

5-5

部门领导意见：

教研室主任签章： 2021 年 8 月 31 日

XXXX职业技术学院教案首页

编号：JX/GC7.1-01-JL03

教师姓名

适用班级

课时安排 2学时

张老师 部门 软件与信息学院 课程名称 前端设计与开发

-班级编号-

教学课型：√理论课□实验课□体育课□习题课□实训课□实践环境课

编号 10

教案介质 √纸质√电子 教案篇幅 √打印稿1页 □手写稿__页 √PPT98幅□有其他电子文件

题目（教学章、节或主题）

第五章 CSS页面布局及排版

教学目的要求：

掌握盒子之间的关系

掌握CSS页面布局

授课内容提要

（标注重点、难点）

1、引言

1）简述内边距、外边距的关系

2）简述盒子在标准流中的定位

3）简述盒子的浮动与定位

2、CSS页面布局及排版

1）盒子之间的关系

z-index空间位置

盒子的display属性

2）CSS页面布局

宽度固定且居中版式

“工”字型版式

3、小结

重点：z-index空间位置、盒子的display属性、宽度固定且居中版式、“工”字型版式

难点: z-index空间位置、盒子的display属性

时间

15分钟

65分钟

10分钟

教师活动

复习上次课程重点内容

讲授新课内容

授课过程中穿插提问

辅导学生上机操作实践

学生活动

认真听讲并思考

思考并回答问题

上机操作完成任务

使用资源

电脑

投影仪

传奇软件

网络

讨论、思考题、作业：

5-17

部门领导意见：

教研室主任签章： 2021 年 8 月 31 日

XXXX职业技术学院教案首页

编号：JX/GC7.1-01-JL03

教师姓名

适用班级

课时安排 2学时

张老师 部门 软件与信息学院 课程名称 前端设计与开发

-班级编号-

教学课型：√理论课□实验课□体育课□习题课□实训课□实践环境课

编号 11

教案介质 √纸质√电子 教案篇幅 √打印稿1页 □手写稿__页 √PPT98幅□有其他电子文件

题目（教学章、节或主题）

第五章 CSS页面布局及排版

教学目的要求：

掌握CSS内容排版

时间

15分钟

65分钟

10分钟

授课内容提要

（标注重点、难点）

1、引言

1）简述z-index空间位置

2）简述盒子的display属性

3）简述宽度固定且居中版式的核心

4）简述“工”字型版式的核心

2、CSS页面布局及排版

1）CSS内容排版

CSS设置文字样式

CSS设置图像样式

CSS设置背景样式

CSS设置列表样式

CSS设置超链接

3、小结

重点：CSS设置文字样式、CSS设置图像样式、CSS设置背景样式、CSS设置列表样式

难点: CSS设置文字样式

教师活动

复习上次课程重点内容

讲授新课内容

授课过程中穿插提问

辅导学生上机操作实践

学生活动

认真听讲并思考

思考并回答问题

上机操作完成任务

使用资源

电脑

投影仪

传奇软件

网络

讨论、思考题、作业：

5-21

部门领导意见：

教研室主任签章： 2021 年 8 月 31 日

XXXX职业技术学院教案首页

编号：JX/GC7.1-01-JL03

教师姓名

适用班级

课时安排 2学时

张老师 部门 软件与信息学院 课程名称 前端设计与开发

-班级编号-

教学课型：√理论课□实验课□体育课□习题课□实训课□实践环境课

编号 12

教案介质 √纸质√电子 教案篇幅 √打印稿1页 □手写稿__页 √PPT98幅□有其他电子文件

题目（教学章、节或主题）

第五章 CSS页面布局及排版

教学目的要求：

掌握CSS内容排版

了解浏览器兼容

时间

15分钟

65分钟

10分钟

授课内容提要

（标注重点、难点）

1、引言

1）简述CSS设置文字样式

2）简述CSS设置图像样式

2、CSS页面布局及排版

1）CSS内容排版

鼠标特效

2）了解浏览器兼容

3、小结

重点：鼠标特效

难点:文字样式

教师活动

复习上次课程重点内容

讲授新课内容

授课过程中穿插提问

辅导学生上机操作实践

学生活动

认真听讲并思考

思考并回答问题

上机操作完成任务

使用资源

电脑

投影仪

传奇软件

网络

讨论、思考题、作业：

5-32

部门领导意见：

教研室主任签章： 2021 年 8 月 31 日

XXXX职业技术学院教案首页

编号：JX/GC7.1-01-JL03

教师姓名

适用班级

课时安排 2学时

张老师 部门 软件与信息学院 课程名称 前端设计与开发

-班级编号-

教学课型：√理论课□实验课□体育课□习题课□实训课□实践环境课

编号 13

教案介质 √纸质√电子 教案篇幅 √打印稿1页 □手写稿__页 √PPT98幅□有其他电子文件

题目（教学章、节或主题）

第五章 CSS页面布局及排版

教学目的要求：

掌握CSS内容排版

了解浏览器兼容

通过案例综合练习CSS的使用

时间

15分钟

20分钟

45分钟

10分钟

授课内容提要

（标注重点、难点）

1、引言

1）简述CSS设置背景样式

2）简述CSS设置列表样式

2、CSS页面布局及排版

1）CSS内容排版

CSS设置表格样式

CSS设置表单样式

2）了解浏览器兼容

3、通过案例综合练习CSS的使用

4、小结

重点： CSS设置表格样式、CSS设置表单样式

难点: CSS设置表格样式、CSS设置表单样式

教师活动

复习上次课程重点内容

讲授新课内容

授课过程中穿插提问

辅导学生上机操作实践

学生活动

认真听讲并思考

思考并回答问题

上机操作完成任务

使用资源

电脑

投影仪

传奇软件

网络

讨论、思考题、作业：

5-33

部门领导意见：

教研室主任签章： 2021 年 8 月 31 日

XXXX职业技术学院教案首页

编号：JX/GC7.1-01-JL03

教师姓名

适用班级

课时安排 2学时

张老师 部门 软件与信息学院 课程名称 前端设计与开发

-班级编号-

教学课型：√理论课□实验课□体育课□习题课□实训课□实践环境课

编号 14

教案介质 □纸质√电子 教案篇幅 √打印稿1页 □手写稿__页 √PPT 幅□有其他电子文件

题目（教学章、节或主题）

综合练习

教学目的要求：

复习Html标记和CSS相关内容的重点难点

时间

授课内容提要

（标注重点、难点）

教师活动

复习前面课程重点内容

讲解综合练习的要求

授课过程中穿插提问

辅导学生上机操作实践

学生活动

认真听讲并思考

思考并回答问题

上机操作完成任务

使用资源

电脑

投影仪

传奇软件

网络

90分钟 标记语言

标题标记

段落标记

表格标记

表单标记

滚动字幕

超级链接

基础及页面布局

文字样式

图像样式

盒子模型

工字型布局

重点：HTML标记的复习和CSS样式的复习

难点：滚动字幕

页面布局

讨论、思考题、作业：

复习重点和难点

部门领导意见：

教研室主任签章： 2021 年 8 月 31 日

XXXX职业技术学院教案首页

编号：JX/GC7.1-01-JL03

教师姓名

适用班级

课时安排 2学时

张老师 部门 软件与信息学院 课程名称 前端设计与开发

-班级编号-

教学课型：√理论课□实验课□体育课□习题课□实训课□实践环境课

编号 15

教案介质 √纸质√电子 教案篇幅 √打印稿1页 □手写稿__页 √PPT75幅□有其他电子文件

题目（教学章、节或主题）

第六章 JavaScript基础

教学目的要求：

了解JavaScript

了解JavaScript的应用

了解JavaScript嵌入网页的方式

了解JavaScript的特点

了解JavaScript程序代码的编写习惯

授课内容提要

（标注重点、难点）

1、引言

1）简述CSS设置表格样式

2）简述CSS设置表单样式

3）期中考试难点解析

2、JavaScript基础

1）JavaScript简介

2）JavaScript的应用

3）JavaScript嵌入网页的方式

4）JavaScript的特点

5）JavaScript程序代码的编写习惯

3、小结

重点：JavaScript嵌入网页的方式、JavaScript的特点、JavaScript程序代码的编写习惯

难点:无

时间

30分钟

45分钟

15分钟

教师活动

复习上次课程重点内容

讲授新课内容

授课过程中穿插提问

辅导学生上机操作实践

学生活动

认真听讲并思考

思考并回答问题

上机操作完成任务

使用资源

电脑

投影仪

传奇软件

网络

讨论、思考题、作业：

6-1

部门领导意见：

教研室主任签章： 2021 年 8 月 31 日

XXXX职业技术学院教案首页

编号：JX/GC7.1-01-JL03

教师姓名

适用班级

课时安排 2学时

张老师 部门 软件与信息学院 课程名称 前端设计与开发

-班级编号-

教学课型：√理论课□实验课□体育课□习题课□实训课□实践环境课

编号 16

教案介质 √纸质√电子 教案篇幅 √打印稿1页 □手写稿__页 √PPT75幅□有其他电子文件

题目（教学章、节或主题）

第六章 JavaScript基础

教学目的要求：

了解掌握数据类型

了解掌握常量

了解掌握变量

了解掌握数据类型的转换

授课内容提要

（标注重点、难点）

1、引言

1）JavaScript嵌入网页的方式

2）JavaScript的特点

3）JavaScript程序代码的编写习惯

2、JavaScript基础

1）数据类型、常量、变量

数据类型

常量

变量

2）数据类型的转换

3）表达式和运算符

算术运算符、比较运算符、逻辑运算符

赋值运算符、赋值运算符、位运算符

其他运算符、运算符的优先级

3、小结

重点：数据类型、常量、变量、数据类型的转换

难点: 数据类型的转换

时间

15分钟

65分钟

10分钟

教师活动

复习上次课程重点内容

讲授新课内容

授课过程中穿插提问

辅导学生上机操作实践

学生活动

认真听讲并思考

思考并回答问题

上机操作完成任务

使用资源

电脑

投影仪

传奇软件

网络

讨论、思考题、作业：

6-2

部门领导意见：

教研室主任签章： 2021 年 8 月 31 日

XXXX职业技术学院教案首页

编号：JX/GC7.1-01-JL03

教师姓名

适用班级

课时安排 2学时

张老师 部门 软件与信息学院 课程名称 前端设计与开发

-班级编号-

教学课型：√理论课□实验课□体育课□习题课□实训课□实践环境课

编号 17

教案介质 √纸质√电子 教案篇幅 √打印稿1页 □手写稿__页 √PPT75幅□有其他电子文件

题目（教学章、节或主题）

第六章 JavaScript基础

教学目的要求：

掌握JavaScript程序流程控制

时间

15分钟

65分钟

10分钟

授课内容提要

（标注重点、难点）

1、引言

1）比较运算符

2）逻辑运算符

3）赋值运算符

4）运算符的优先级

2、JavaScript基础

1）JavaScript程序流程控制

if条件控制语句

switch条件控制语句

for循环控制语句

while循环控制语句

do while循环控制语句

break和continue语句

try catch finally语句

throw语句

3、小结

重点：if条件控制语句、switch条件控制语句

难点: if条件控制语句、switch条件控制语句

教师活动

复习上次课程重点内容

讲授新课内容

授课过程中穿插提问

辅导学生上机操作实践

学生活动

认真听讲并思考

思考并回答问题

上机操作完成任务

使用资源

电脑

投影仪

传奇软件

网络

讨论、思考题、作业：

6-4、6-5

部门领导意见：

教研室主任签章： 2021 年 8 月 31 日

XXXX职业技术学院教案首页

编号：JX/GC7.1-01-JL03

教师姓名

适用班级

课时安排 2学时

张老师 部门 软件与信息学院 课程名称 前端设计与开发

-班级编号-

教学课型：√理论课□实验课□体育课□习题课□实训课□实践环境课

编号 18

教案介质 √纸质√电子 教案篇幅 √打印稿1页 □手写稿__页 □PPT75幅□有其他电子文件

题目（教学章、节或主题）

第六章 JavaScript基础

教学目的要求：

掌握JavaScript函数

时间

15分钟

65分钟

10分钟

授课内容提要

（标注重点、难点）

1、引言

1）循环控制语句

2）异常控制语句

2、JavaScript基础

1）JavaScript函数

JavaScript的全局函数

用户自定义函数

3、小结

重点：JavaScript的全局函数、用户自定义函数

难点: JavaScript的全局函数、用户自定义函数

教师活动

复习上次课程重点内容

讲授新课内容

授课过程中穿插提问

辅导学生上机操作实践

学生活动

认真听讲并思考

思考并回答问题

上机操作完成任务

使用资源

电脑

投影仪

传奇软件

网络

讨论、思考题、作业：

6-14

部门领导意见：

教研室主任签章： 2021 年 8 月 31 日

XXXX职业技术学院教案首页

编号：JX/GC7.1-01-JL03

教师姓名

适用班级

课时安排 2学时

张老师 部门 软件与信息学院 课程名称 前端设计与开发

-班级编号-

教学课型：√理论课□实验课□体育课□习题课□实训课□实践环境课

编号 19

教案介质 √纸质√电子 教案篇幅 √打印稿1页 □手写稿__页 √PPT61幅□有其他电子文件

题目（教学章、节或主题）

第七章 JavaScript对象

教学目的要求：

了解掌握对象和类

了解掌握对象的使用

了解掌握对象废除

了解掌握对象类型

授课内容提要

（标注重点、难点）

1、引言

1）JavaScript的全局函数

2）用户自定义函数

2、JavaScript对象

1）对象和类

2）使用对象

3）对象废除

4）对象类型

3、小结

重点：对象和类、对象类型

难点: 对象和类

时间

10分钟

70分钟

10分钟

教师活动

复习上次课程重点内容

讲授新课内容

授课过程中穿插提问

辅导学生上机操作实践

学生活动

认真听讲并思考

思考并回答问题

机操作完成任务

使用资源

电脑

投影仪

传奇软件

网络

讨论、思考题、作业：

7-2

部门领导意见：

教研室主任签章： 2021 年 8 月 31 日

XXXX职业技术学院教案首页

编号：JX/GC7.1-01-JL03

教师姓名

适用班级

课时安排 2学时

张老师 部门 软件与信息学院 课程名称 前端设计与开发

-班级编号-

教学课型：√理论课□实验课□体育课□习题课□实训课□实践环境课

编号 20

教案介质 √纸质√电子 教案篇幅 √打印稿1页 □手写稿__页 √PPT61幅□有其他电子文件

题目（教学章、节或主题）

第七章 JavaScript对象

教学目的要求：

了解掌握核心对象

时间

15分钟

65分钟

10分钟

授课内容提要

（标注重点、难点）

1、引言

1）对象和类

2）对象类型

2、JavaScript对象

核心对象

1）Math对象

2）Number对象

3）Boolean对象

4）String对象

5）Array对象

3、小结

重点：Math对象、Number对象、Boolean对象、String对象、Array对象

难点: Array对象

教师活动

复习上次课程重点内容

讲授新课内容

授课过程中穿插提问

辅导学生上机操作实践

学生活动

认真听讲并思考

思考并回答问题

机操作完成任务

使用资源

电脑

投影仪

传奇软件

网络

讨论、思考题、作业：

7-3

部门领导意见：

教研室主任签章： 2021 年 8 月 31 日

XXXX职业技术学院教案首页

编号：JX/GC7.1-01-JL03

教师姓名

适用班级

课时安排 2学时

张老师 部门 软件与信息学院 课程名称 前端设计与开发

-班级编号-

教学课型：√理论课□实验课□体育课□习题课□实训课□实践环境课

编号 21

教案介质 √纸质√电子 教案篇幅 √打印稿1页 □手写稿__页 √PPT61幅□有其他电子文件

题目（教学章、节或主题）

第七章 JavaScript对象

教学目的要求：

了解掌握核心对象

了解掌握环境对象

时间

15分钟

65分钟

10分钟

授课内容提要

（标注重点、难点）

1、引言

1）Math对象、Number对象、Boolean对象、String对象、Array对象的语法和用途

2、JavaScript对象

1）核心对象

Date对象

Object对象

Function对象

RegExp对象

2）环境对象

window对象

3、小结

重点：核心对象、环境对象

难点: 核心对象、环境对象

教师活动

复习上次课程重点内容

讲授新课内容

授课过程中穿插提问

辅导学生上机操作实践

学生活动

认真听讲并思考

思考并回答问题

机操作完成任务

使用资源

电脑

投影仪

传奇软件

网络

讨论、思考题、作业：

7-5、7-9

部门领导意见：

教研室主任签章： 2021 年 8 月 31 日

XXXX职业技术学院教案首页

编号：JX/GC7.1-01-JL03

教师姓名

适用班级

课时安排 2学时

张老师 部门 软件与信息学院 课程名称 前端设计与开发

-班级编号-

教学课型：√理论课□实验课□体育课□习题课□实训课□实践环境课

编号 22

教案介质 √纸质√电子 教案篇幅 √打印稿1页 □手写稿__页 √PPT61幅□有其他电子文件

题目（教学章、节或主题）

第七章 JavaScript对象

教学目的要求：

了解掌握环境对象

时间

10分钟

70分钟

10分钟

授课内容提要

（标注重点、难点）

1、引言

1）核心对象

2）环境对象

2、JavaScript对象

1）环境对象

location对象

navigator对象

history对象

screen对象

document对象

3、小结

重点：location对象、navigator对象、history对象、screen对象、document对象

难点: navigator对象、history对象、document对象

教师活动

复习上次课程重点内容

讲授新课内容

授课过程中穿插提问

辅导学生上机操作实践

学生活动

认真听讲并思考

思考并回答问题

机操作完成任务

使用资源

电脑

投影仪

传奇软件

网络

讨论、思考题、作业：

7-15

部门领导意见：

教研室主任签章： 2021 年 8 月 31 日

教师姓名

适用班级

课时安排 2学时

张老师 部门

XXXX职业技术学院教案首页

编号：JX/GC7.1-01-JL03

软件与信息学院 课程名称 前端设计与开发

-班级编号-

教学课型：√理论课□实验课□体育课□习题课□实训课□实践环境课

编号 23

教案介质 √纸质√电子 教案篇幅 √打印稿1页 □手写稿__页 √PPT18幅□有其他电子文件

题目（教学章、节或主题）

第8章 DOM技术

教学目的要求：

了解dom技术中的相关概念

时间

10分钟

70分钟

10分钟

授课内容提要

（标注重点、难点）

1、引言

网页文档对应的节点树

2、DOM技术

1）DOM概述

2)获取节点

3)操作节点

3、小结

重点：节点的属性和方法

难点: 访问和操作节点

教师活动

复习上次课程重点内容

讲授新课内容

授课过程中穿插提问

辅导学生上机操作实践

学生活动

认真听讲并思考

思考并回答问题

机操作完成任务

使用资源

电脑

投影仪

传奇软件

网络

讨论、思考题、作业：

8-7

部门领导意见：

教研室主任签章： 2021 年 8 月 31 日

XXXX职业技术学院教案首页

编号：JX/GC7.1-01-JL03

教师姓名

适用班级

课时安排 2学时

张老师 部门 软件与信息学院 课程名称 前端设计与开发

-班级编号-

教学课型：√理论课□实验课□体育课□习题课□实训课□实践环境课

编号 24

教案介质 √纸质√电子 教案篇幅 √打印稿1页 □手写稿__页 √PPT17幅□有其他电子文件

题目（教学章、节或主题）

第8章 DOM技术

教学目的要求：

节点的应用

时间

10分钟

65分钟

15分钟

授课内容提要

（标注重点、难点）

1、引言

1）DOM节点的概念

2、DOM节点

1）Node对象

2）Element对象

3）NodeList对象

3、JavaScript的对象事件处理程序

3、小结

重点：NodeList对象、JavaScript的对象事件处理程序

难点: JavaScript的对象事件处理程序

教师活动

复习上次课程重点内容

讲授新课内容

授课过程中穿插提问

辅导学生上机操作实践

学生活动

认真听讲并思考

思考并回答问题

机操作完成任务

使用资源

电脑

投影仪

传奇软件

网络

讨论、思考题、作业：

9-12

部门领导意见：

教研室主任签章： 2021 年 8 月 31 日

XXXX职业技术学院教案首页

编号：JX/GC7.1-01-JL03

教师姓名

适用班级

课时安排 2学时

张老师 部门 软件与信息学院 课程名称 前端设计与开发

-班级编号-

教学课型：√理论课□实验课□体育课□习题课□实训课□实践环境课

编号 25

教案介质 √纸质√电子 教案篇幅 √打印稿1页 □手写稿__页 √PPT17幅□有其他电子文件

题目（教学章、节或主题）

JQuery基础

教学目的要求：

JQuery概述

JQuery程序

时间

15分钟

65分钟

10分钟

授课内容提要

（标注重点、难点）

1、引言

1）什么是jQuery

2）jQuery的特点

2、编写JQuery程序

1）下载和配置JQuery

2）编写JQuery程序

3、小结

重点：jQuery的特点、下载和配置JQuery、编写JQuery程序

难点: 下载和配置JQuery、编写JQuery程序

教师活动

复习上次课程重点内容

讲授新课内容

授课过程中穿插提问

辅导学生上机操作实践

学生活动

认真听讲并思考

思考并回答问题

机操作完成任务

使用资源

电脑

投影仪

传奇软件

网络

讨论、思考题、作业：

9-3、9-4

部门领导意见：

教研室主任签章： 2021 年 8 月 31 日

XXXX职业技术学院教案首页

编号：JX/GC7.1-01-JL03

教师姓名

适用班级

课时安排 2学时

张老师 部门 软件与信息学院 课程名称 前端设计与开发

-班级编号-

教学课型：√理论课□实验课□体育课□习题课□实训课□实践环境课

编号 26

教案介质 √纸质√电子 教案篇幅 √打印稿1页 □手写稿__页 √PPT17幅□有其他电子文件

题目（教学章、节或主题）

JQuery基础

教学目的要求：

JQuery对象和DOM对象、JQuery插件

时间

10分钟

65分钟

15分钟

授课内容提要

（标注重点、难点）

1、引言

1）JQuery对象和DOM对象

2）JQuery对象和DOM对象的相互转换

2、JQuery插件

1）引用JQuery插件的方法

2）常用JQuery插件简介

3、小结

重点：JQuery对象和DOM对象的相互转换、引用JQuery插件的方法、常用JQuery插件简介

难点: 常用JQuery插件简介

教师活动

复习上次课程重点内容

讲授新课内容

授课过程中穿插提问

辅导学生上机操作实践

学生活动

认真听讲并思考

思考并回答问题

机操作完成任务

使用资源

电脑

投影仪

传奇软件

网络

讨论、思考题、作业：

9-12

部门领导意见：

教研室主任签章： 2021 年 8 月 31 日

XXXX职业技术学院教案首页

编号：JX/GC7.1-01-JL03

教师姓名

适用班级

课时安排 2学时

张老师 部门 软件与信息学院 课程名称 前端设计与开发

-班级编号-

教学课型：√理论课□实验课□体育课□习题课□实训课□实践环境课

编号 27

教案介质 √纸质√电子 教案篇幅 √打印稿1页 □手写稿__页 √PPT17幅□有其他电子文件

题目（教学章、节或主题）

JQuery基础

教学目的要求：

JQuery常用操作和JQuery事件处理

时间

10分钟

65分钟

15分钟

授课内容提要

（标注重点、难点）

1、引言

1）JQuery常用操作

2）元素的操作

3）操作DOM节点

4）操作表单元素

2、JQuery事件处理

1）JQuery事件处理机制

2）页面加载响应事件

3）JQuery中的事件绑定

3、小结

重点：JQuery常用操作、JQuery事件处理

难点: JQuery事件处理机制

教师活动

复习上次课程重点内容

讲授新课内容

授课过程中穿插提问

辅导学生上机操作实践

学生活动

认真听讲并思考

思考并回答问题

机操作完成任务

使用资源

电脑

投影仪

传奇软件

网络

讨论、思考题、作业：

9-12

部门领导意见：

教研室主任签章： 2021 年 8 月 31 日

XXXX职业技术学院教案首页

编号：JX/GC7.1-01-JL03

教师姓名

适用班级

课时安排 2学时

张老师 部门 软件与信息学院 课程名称 前端设计与开发

-班级编号-

教学课型：√理论课□实验课□体育课□习题课□实训课□实践环境课

编号 28

教案介质 √纸质√电子 教案篇幅 √打印稿1页 □手写稿__页 √PPT 幅□有其他电子文件

题目（教学章、节或主题）

机动

教学目的要求：

机动

时间

90分钟 机动

授课内容提要

（标注重点、难点）

教师活动

机动

学生活动

机动

使用资源

电脑

投影仪

传奇软件

网络

讨论、思考题、作业：

无

部门领导意见：

教研室主任签章： 2021 年 8 月 31 日

XXXX职业技术学院教案首页

编号：JX/GC7.1-01-JL03

教师姓名

适用班级

课时安排 2学时

张老师 部门 软件与信息学院 课程名称 前端设计与开发

-班级编号-

教学课型：√理论课□实验课□体育课□习题课□实训课□实践环境课

编号 29

教案介质 √纸质√电子 教案篇幅 √打印稿1页 □手写稿__页 √PPT 幅□有其他电子文件

题目（教学章、节或主题）

课堂课业

教学目的要求：

综合应用html、css和Javascript三项核心技术进行前端设计与开发。

时间

授课内容提要

（标注重点、难点）

教师活动

下发设计素材、提出设计要求、进行辅导

学生活动

根据要求进行珠宝店的前端设计与开发

使用资源

电脑

投影仪

传奇软件

网络

90分钟 根据给定的项目主题进行前端设计

讨论、思考题、作业：

无

部门领导意见：

教研室主任签章： 2021 年 8 月 31 日

XXXX职业技术学院教案首页

编号：JX/GC7.1-01-JL03

教师姓名

适用班级

课时安排 2学时

张老师 部门 软件与信息学院 课程名称 前端设计与开发

-班级编号-

教学课型：√理论课□实验课□体育课□习题课□实训课□实践环境课

编号 30

教案介质 √纸质√电子 教案篇幅 √打印稿1页 □手写稿__页 √PPT 幅□有其他电子文件

题目（教学章、节或主题）

课堂课业

教学目的要求：

综合应用html、css和Javascript三项核心技术进行前端设计与开发。

时间

授课内容提要

（标注重点、难点）

教师活动

指导学生，为学生打开思路

学生活动

根据设计题目进行素材的获取和前端开发与设计

使用资源

电脑

投影仪

传奇软件

网络

90分钟 自拟题目进行前端设计与开发

讨论、思考题、作业：

无

部门领导意见：

教研室主任签章： 2021 年 8 月 31 日