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通配符选择器
课后练习