Web前端开发技术项目教程（HTML5 CSS3 JavaScript）（微课版）-教案全套 单元1--8 创建非遗项目站点—网页开发入门 --- 制作非遗首页—Javascript基础.docx

PAGE1

《Web前端开发技术》

课程教案

适用专业：

授课班级：

授课教师：

编制日期：

教案名称

单元1创建非遗项目站点—网页开发入门

计划学时

4学时

本次授课类型

□理论□实验?理实一体□实训□实习

教学目标

知识目标

1.了解网页与网站的概念，静态网站与动态网站的概念，网站的分类。

2.了解HTML、CSS、JavaScript各自扮演的角色及关系。

能力目标

1.能够识别网页的基本结构。

2.能够使用浏览器开发者工具调试代码。

素质目标

1.培养学生的信息获取和分析能力。

2.提升学生对网页设计的审美能力。

思政目标

1.培养学生具备自主学习能力和主动学习意识。

2.激发学生对传统文化的兴趣，增强文化自信。

教学重点

1.网页基本知识与概念。

2.HTML、CSS、JavaScript各自的代码特点。

教学难点

1.制作网页过程中涉及的问题处理，如浏览器兼容性问题。

教学设计思路

教学效果及改进思路

绝大部分学生能够掌握本项目中的知识点和技能，针对个别接受程度较慢的学生，可结成班上的学习小组，一对一的帮扶，努力做到每名学生不掉队。

学生在线上预习环节的完成度不是100%，为了让他们更积极主动的做好课前准备，可以适当提高这部分的考评比率，在课上有更多的奖励手段。

教学实施过程

要有详细教学环节，从主要教学内容、师生活动、信息化资源、教学方法等方面进行撰写

备注

一、课前自主学习

（一）教师发布预习任务：观看智慧职教《前端技术开发》MOOC课程里的单元1的相关微课视频，完成在线测试。

（二）学生自主学习，记录疑问。

（三）教师了解学生在线完成情况，检测学生的掌握程度，根据学生完成情况进行线上针对个别学生辅导，保证所有学生能够掌握预习内容，以便顺利开展本次课程教学。

二、课上探究学习

（一）情境引入，任务导入

面对全新的网页开发领域，小新既充满向往又感到忐忑——他虽怀有浓厚兴趣，却苦于缺乏实际操作经验。每当看到精美网站时，他既羡慕又渴望能亲手打造这样的作品。为此，小新主动寻求了在前端技术工程师王威学长的专业指导。作为业内专家，王威不仅给予宝贵建议，还为他量身定制了循序渐进的入门计划：从基础认知（认识网页）、到实践应用（建立非遗站点）、再到主题创作（制作调研网页）。

（二）任务1认识网页（1学时）

1.任务描述

依次打开3个网页,查看网页有什么变化。分析HTML5、CSS3和JavaScript在网页开发中扮演着的不同角色及它们之间的关系。

2.任务准备

对网站和网页、浏览器的兼容性、CSS3、JavaScripyt、HTML5的新增特性有初步了解。

3.任务实施

1.主要内容：

打开第三个网页,网页上右击，在弹出的菜单中选择“查看网页源代码”选项，观察三段代码。

2.师生活动：

教师逐步演示讲解操作，巡回指导学生进行上机练习，完成学生操作过程评价。

学生跟练，完成自评与互评。

3.教学方法：

采用项目驱动法优化教学过程，通过真实软件环境演练，播放视频等多种形式组织教学活动。

任务2建立非遗站点（1学时）

1.任务描述

利用?HBuilderX创建并管理一个关于非物质文化遗产(简称非遗)的网站项目，要求开发者将非遗网站的?HTML5?文件、CSS3?文件、JavaScript?脚本、图片、视频等按照一定的目录结构进行组织和管理。

2.任务准备

(1)了解非遗站点

(2)下载好网站开发工具

(3)明确网站开发的注意事项

3.任务实施

1.主要内容：

(1)打开HBuilderX，选择“文件”菜单中的“新建一项目”选项，如图所示。

在弹出的对话框中选择要创建的项目类型，输人项目名称“非遗网”，可使用默认保存路径，选择模板“基本?HTML项目”，单击“创建”按钮完成新项目的创建，如图所示。

创建完成

2.师生活动：

教师示范标准操作流程，个别指导学生解决操作问题，收集典型错误案例。

学生模仿练习，记录操作难点，小组讨论解决方案。

3.教学方法：

运用情境教学法，创设真实工作场景，通过角色扮演强化实践技能。

任务3制作非遗调研网页（2学时）

1.任务描述

了解HTML5语义化标记。

2.任务准备

(1)具备一定的HTML5的基础语法如：标记、标记属性。

(2)明确HTML5的整体结构如：文件头部。

(3)了解HTML5页面格式化标记如：footer、main、nav等。

3.任务实施

1.主要内容：

(1)在HBuilderX的目录下新建网页文件1-1.htmml。

(2)定义页面头部信息，utf-8字符集支持中文。metacharset=“utf-8”

(3)定义视口。

metaname“viewport”content=“widthdevice