文档详情

Web前端开发技术项目教程(HTML5 CSS3 JavaScript)(微课版)-教案 单元2 制作非遗机构介绍和详情页面—创建网页元素.docx

发布:2025-06-05约2.87千字共6页下载文档
文本预览下载声明

PAGE2

《Web前端开发技术》

课程教案

适用专业:

授课班级:

授课教师:

编制日期:

教案名称

单元2制作非遗机构介绍和详情页面—创建网页元素

计划学时

4学时

本次授课类型

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

教学目标

知识目标

1.掌握使用原型设计工具Axure制作网页原型图的方法。

2.理解HTML中文本元素、超链接和图片标记的使用。

3.熟悉网页元素的布局与设计原则。

能力目标

1.掌握标题和段落的创建

2.掌握超链接的创建及属性设置

3.能正确插入图片并对图片进行设置

4.能设置正确的相对路径与绝对路径

素质目标

1.强化页面布局的规范意识

2.培养文化遗产保护的数字化表达能力

思政目标

1.增强对非遗机构文化价值的认同感

2.树立技术赋能文化传播的责任意识

教学重点

1.文本结构化标签的语义化使用(h1-h6/p)

2.超链接锚点与跨页面跳转实现

3.图片路径引用与无障碍属性(alt)规范

教学难点

1.原型设计与实际代码的转化衔接

2.相对路径/绝对路径的正确应用

3.多元素协同的页面语义结构设计

教学设计思路

教学效果及改进思路

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

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

教学实施过程

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

备注

一、课前自主学习

(一)教师发布预习任务:观看智慧职教《前端技术开发》MOOC课程里的单元2的相关微课视频,完成在线测试。发布Axure入门视频(绘制矩形/文本框/按钮)

,提供非遗机构文字图片素材包。

(二)学生按教学要求完成预习材料学习,记录学习过程中的疑问点。

(三)教师通过教学平台数据分析学习进度,对需要加强指导的学生提供个性化线上辅导,确保全体学员达到预习目标。

二、课上探究学习

(一)情境引入,任务导入

小新在完成非遗项目站点的前期准备工作后,着手制作非遗机构介绍页面时遇到了开发效率问题。由于缺乏系统规划,他在编写网页代码时频繁变更设计思路,导致工作进展受阻。经前端工程师王威学长指导,小新认识到规范的网站开发流程应当遵循整体规划→页面设计→原型制作→开发实施的标准化流程。

(二)

任务1创建文本元素并制作非遗国内机构详情页面(1学时)

1.任务描述

通过创建网页元素(包括各级标题元素、段落元素、特殊字符等)制作非遗国内机构详情页面主题,效果图如2-3所示。

2.任务准备

(1)了解标题元素h1-h6,其中h1为最大级别,h6为最小级别。

(2)了解段落元素p……p/

(3)了解特殊字符,常见特殊字符。

(4)了解文本修饰标记

b加粗修饰标记

em强调斜体修饰标记

u下划线修饰标记

3.任务实施

1.主要实施步骤:制作非遗专业机构详情页面

(1)创建网页文件。打开HBuilderX,创建一个新的网页文件,并保存在对应的站点目录下。

(2)根据非遗国内机构详情页面的原型图创建各级标题和段落。

(3)为了页面美观,本任务将标题文本居中显示,使用了CSS代码,此处不展开说明,后续会详细介绍。

h2style=text-align:center;中国非物质文化遗产保护中心/h2

非遗国内机构详情页面的参考代码如下。

2.师生活动:

教师建立互助学习小组,促进共同进步。学生互相指导,分享学习心得。

3.教学方法:

采用模块化教学,将复杂技能分解训练。

任务2创建超链接并插入相关阅读内容(2学时)

1.任务描述

在非遗国内机构详情页面上增加“相关阅读”内容区块,通过创建超链接元素,外部资源和站点内网页之间的互联。非遗国内机构详情页面整体效果如图所示。

2.任务准备

了解超链接元素,使网页内容进行交互和跳转。

基本语法:aherf=“url”target=“”超链接内容/a

target属性规定在何处打开链接的文件。

3.任务实施

1.主要内容:创建超链接

(1)创建网页文件。打开HBuilderX,创建一个新的网页文件,并保存在对应的站点目录下。

(2)根据非遗国内机构详情页面整体效果制作,参考代码如下。

2.师生活动:

教师开展过程性考核,全面评价学生表现。学生参与评价,了解自身不足。

3.教学方法:

运用行动导向教学,让学生在做中学、学中做。

任务3插入图片并制作非遗机构介绍页面创建超链接并插入相关阅读内容(1学时)

1.任务描述

制作非遗机构介绍页面,该页面内容主要包括国内机构和国际组织

显示全部
相似文档