Web前端开发技术项目教程(HTML5 CSS3 JavaScript)(微课版)-教案 单元2 制作非遗机构介绍和详情页面—创建网页元素.docx
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.任务描述
制作非遗机构介绍页面,该页面内容主要包括国内机构和国际组织