《Web 前端开发技术》
课程教案
适用专业：
授课班级：
授课教师：
编制日期：
1
教案名称 单元 1 创建非遗项目站点—网页开发入门 计划学时 4 学时
本次授课类型 □理论 □实验 ☑理实一体 □实训 □实习
知识目标
1.了解网页与网站的概念，静态网站与动态网站的概念，网站的分类。
2.了解 HTML、CSS、JavaScript 各自扮演的角色及关系。
能力目标
1.能够识别网页的基本结构。
2.能够使用浏览器开发者工具调试代码。
素质目标
1.培养学生的信息获取和分析能力。
2.提升学生对网页设计的审美能力。
教学目标
思政目标
1.培养学生具备自主学习能力和主动学习意识。
2.激发学生对传统文化的兴趣，增强文化自信。
教学重点
1.网页基本知识与概念。
、CSS、JavaScript 各自的代码特点。
教学难点 1.制作网页过程中涉及的问题处理，如浏览器兼容性问题。
教学设计思路
教学效果及改进思路
绝大部分学生能够掌握本项目中的知识点和技能，针对个别接受程度较慢的学生，可结成班上的学习
小组，一对一的帮扶，努力做到每名学生不掉队。
学生在线上预习环节的完成度不是 100%，为了让他们更积极主动的做好课前准备，可以适当提高这
部分的考评比率，在课上有更多的奖励手段。
教学实施过程
要有详细教学环节，从主要教学内容、师生活动、信息化资源、教学方法等方面进行撰
写
备注
2
一、课前自主学习
（一）教师发布预习任务：观看智慧职教《前端技术开发》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)打开 HBuilder X，选择“文件”菜单中的“新建一项目”选项，如图所示。
3
(2) 在弹出的对话框中选择要创建的项目类型，输人项目名称“非遗网”，可使用默
认保存路径，选择模板“基本 HTML 项目”，单击“创建”按钮完成新项目的创建，如图
所示。
(3) 创建完成
2.师生活动：
教师示范标准操作流程，个别指导学生解决操作问题，收集典型错误案例。
学生模仿练习，记录操作难点，小组讨论解决方案。
3.教学方法：
运用情境教学法，创设真实工作场景，通过角色扮演强化实践技能。
任务 3 制作非遗调研网页（2 学时）
1.任务描述
了解 HTML5 语义化标记。
2.任务准备
(1)具备一定的 HTML5 的基础语法如：标记、标记属性。
(2)明确 HTML5 的整体结构如：文件头部。
(3)了解 HTML5 页面格式化标记如：<footer>、<main>、<nav>等。
4
3.任务实施
1.主要内容：
(1)在 HBuilderX 的目录下新建网页文件 。
(2)定义页面头部信息，utf-8 字符集支持中文。<meta charset=“utf-8”>
(3)定义视口。
<meta name“viewport”content=“widthdevice-width, ”>
(4)定义网页标题为“非物质文化遗产调研”<title>非物质文化遗产调研</title>
(5)构建页眉区域。非遗调研网页分成 3 部分:页眉区域、主体内容区域和页脚区域。
页眉区域通常包含网站的标志、导航栏等，这里显示网页的名称。
(6)构建主题内容代码如下。
(7)构建页脚区域。页脚区域通常包含版权信息、作者信息、联系方式等。
(8)为使页面效果较为美观，对网页元素设置样式。
页面参考代码如下.
5
2.师生活动：
教师提供操作指导手册，巡回检查学生操作规范，进行过程性评价。
学生按照步骤完成实践任务，拍摄操作视频进行自我检查。
3.教学方法：
采用翻转课堂教学模式，课前提供学习资料，课中重点指导实践操作。
三、课后拓展练习
（1）浏览器的兼容性测试
让学生将本次课程中制作的网页在不同浏览器环境中进行测试，完成拓展任务，上
传录制操作视频到线上平台，并各自总结和分析。
（2）响应式设计
让学生利用谷歌浏览器观察淘宝网页在电脑模式和手机模式下页面的布局与内容
的差异，思考今后如何将页面可以在不同设备下，不同分辨率下都能有良好的视觉效果。
(3)完成课后配套习题
