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

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.任务描述制作非遗机构介绍页面，该页面内容主要包括国内机构和国际组织或机构。通过该页面可以查看各类非遗机构详情页面。非遗机构介绍页面效果如所示。2.任务准备(1)了解插入图片的标记<img>img标记：HTML单标记，用于插入图片src属性：必需属性，指定图片路径（相对/绝对/网络URL）alt属性：提供替代文本（可选项）title属性：提供悬停提示文本（可选项）基础语法：<imgsrc=“url”alt=“”title=“”>相对路径示例：<imgsrc=“images/myimage.jpg”>了解常见图片格式，了解相对路径相对于当前工作目录的路径，不含完整路径信息根据图片来放置有以下几种情况情况1（同目录）：直接写文件名，如“<imgsrc=“bg-deal.jpg”>”情况2（上一层）：用“../”表示上级目录，如“<imgsrc=“../bg-deal.jpg”>”情况3（下一层）：加目录名/，如“<imgsrc=images/bg-deal.jpg”>”路径符号规则：../表示向上一级目录3.任务实施1.主要内容：设置图片相对路径(1)创建网页文件。打开HBuilderX,创建一个新的网页文件，并保存在对应的站点目录下。(2)根据非遗国内机构详情页面整体效果制作，参考代码如下。2.师生活动：教师建立学习档案，记录学生成长轨迹。学生定期反思，制定改进计划。3.教学方法：采用混合式教学，线上线下相结合开展实践教学。三、课后拓展练习1.相对路径与绝对路径之分绝对路径是从根目录/盘符开始的完整路径，固定不变但可移植