《Web前端开发技术》教案全套 李保安 模块1--9　Web基础知识---综合实战.docx

PAGE

PAGE1

PAGE

PAGE1

PAGE

PAGE

《Web前端开发技术》教学方案

教师：

XXXX院部：XXXX工程学院

XXXX年XX月

PAGE

PAGE2

PAGE

PAGE2

《Web前端开发技术》教学方案

内容

(标题)

模块1Web基础知识

任务1.1“寻找家乡记忆”网站制作准备

1.1.1认识网页

1.1.2网页与网站

1.1.3网页的基本构成元素

1.1.4网站的建设流程

1.1.5网页的设计基础

课后练习

课时

1

教学目标及要求

知识目标

1．了解网页、网站，以及网页的基本构成元素。

2．理解网页的设计基本原则、色彩搭配及设计要点。

3．了解HTML5。

4．了解常用的几种开发工具，掌握VSCode开发工具的安装。

5．掌握网站的建设流程。

6．掌握站点的创建方法。

7．掌握网页文档的创建与保存。

8．掌握网站的运行。

能力目标

能够安装VSCode开发工具，能够在VSCode中创建“寻找家乡记忆”（Memoriesofhome）网站，能够创建和保存网页文档，能够运行程序。

重点难点及其处理

重点:

（1）掌握网站的建设流程。

（2）掌握站点的创建方法。

（3）掌握网页文档的创建与保存。

（4）掌握网站的运行。

难点：

HTML5、常用的开发工具、开发工具的安装

处理方法：

结合“寻找家乡记忆”网站制作准备，下载VSCode安装包，安装VisualStudioCode，创建站点，整理素材，创建和保存网页文档，最后运行网站。

教学方法

（1）讲授+上机练习

（2）加强课堂指导，及时解决学生学习中出现的问题。

参考文献

及其要求课外作业

预习：模块2

备注

《Web前端开发技术》教学方案

内容

(标题)

模块2HTML5语言基础

任务2.1制作“校史馆参观需知”网页

2.1.1HTML5文档的格式

2.1.2基本标签

2.1.3序列标签

任务2.2制作“家乡美食及制作流程展示”网页

2.2.1图像类型及图像标签

2.2.2路径分类

2.2.3链接标签

2.2.4链接的分类

课后练习

课时

2

教学目标及要求

知识目标

1．了解HTML5文档的格式。

2．掌握HTML中常用的基本标签。

3．掌握HTML中序列标签的语法。

4．了解图像类型，掌握图像标签的语法及属性。

5．掌握超链接标签的基本结构和属性。

6．了解链接的分类。

能力目标

能够利用基本标签、序列标签、图像标签和超链接标签制作网页。

重点难点及其处理

重点:

（1）HTML中常用的基本标签。

（2）HTML中序列标签。

难点：

（1）会使用链接标签。

（2）会使用图像标签。

处理方法：

结合“校史馆参观需知”网页和“家乡美食及制作流程展示”网页的讲授及演示操作介绍本模块中的知识点，并进行针对性的实训练习。

教学方法

（1）讲授+上机练习

（2）加强课堂指导，及时解决学生学习中出现的问题。

参考文献

及其要求

课外作业

预习：模块3

备注

《Web前端开发技术》教学方案

内容

(标题)

模块3HTML5中新增的标签及属性

任务3.1制作“古都花城洛阳代表性古迹”网页

3.1.1语义化标签

3.1.2分组标签

任务3.2制作“数字图书馆”网页

3.2.1页面交互标签

3.2.2全局属性

课后练习

课时

2

教学目标及要求

知识目标

1．掌握HTML5中新增的语义化标签。

2．掌握分组标签。

3．掌握页面交互标签中各个标签的属性。

4．掌握全局属性中各个属性的语法和属性。

能力目标

能够利用语义化标签、分组标签、页面交互标签和全局属性制作网页。

重点难点及其处理

重点：

（1）语义化标签。

（2）页面交互标签。

（3）全局属性。

难点：

利用语义化标签、分组标签、页面交互标签和全局属性制作网页。

处理方法：

结合“古都花城洛阳代表性古迹”网页和“数字图书馆”网页的讲授及演示操作介绍本模块中的知识点，并进行针对性的实训练习。

教学方法

（1）讲授+学生上机练习

（2）加强课堂指导，及时解决学生练习中出现的问题。

参考文献

及其要求

课外作业

预习：模块4。

备注

《Web前端开发技术》教学方案

内容

(标题)

模块4CSS基础

任务4.1制作“美文赏析”网页

4.1.1CSS简介

4.1.2CSS的基本语法

4.1.3CSS的基本属性

4.1.4CSS样式分类

任务4.2制作“大学生身高体重标准表”网页

4.2.1id选择器

4.2.2标签选择器和类选择器

4.2.3伪类选择器

4.2.4表格

任务4.3制作“名人故事”网页

4.3.1复合选择器

4.3.2通配符选择器

课后练习