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

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-width,

initial-scale-1.0”>

(4)定义网页标题为“非物质文化遗产调研”<title>非物质文化遗产调研</title>

(5)构建页眉区域。非遗调研网页分成3部分:页眉区域、主体内容区域和页脚区域。页眉区域通常包含网站的标志、导航栏等，这里显示网页的名称。(6)构建主题内容代码如下。(7)构建页脚区域。页脚区域通常包含版权信息、作者信息、联系方式等。(8)为使页面效果较为美观，对网页元素设置样式。页面参考代码如下.2.师生活动：教师提供操作指导手册，巡回检查学生操作规范，进行过程性评价。

学生按照步骤完成实践任务，拍摄操作视频进行自我检查。3.教学方法：采用翻转课堂教学模式，课前提供学习资料，课中重点指导实践操作。三、课后拓展练习（1）浏览器的兼容性测试让学生将本次课程中制作的网页在不同浏览器环境中进行测试，完成拓展任务，上传录制操作视频到线上平台，并各自总结和分析。（2）响应式设计让学生利用谷歌浏览器观察淘宝网页在电脑模式和手机模式下页面的布局与内容的差异，思考今后如何将页面可以在不同设备下，不同分辨率下都能有良好的视觉效果。(3)完成课后配套习题《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.相对路径与绝对路径之分绝对路径是从根目录/盘符开始的完整路径，固定不变但可移植性差；相对路径基于当前工作目录定位，随位置变化但可移植性强。核心区别：起点不同（根目录vs当前目录）、可移植性差异（相对路径更优）、适用场景不同（绝对路径用于系统配置，相对路径用于网页开发）。相对路径能减少文件位置变动引发的错误，是开发首选。2.完成单元课后配套习题《Web前端开发技术》课程教案适用专业：授课班级：授课教师：编制日期：

教案名称单元3制作非遗名录页面—表格应用计划学时4学时本次授课类型□理论□实验☑理实一体□实训□实习教学目标知识目标1.掌握表格的创建与属性设置方法2.理解表格结构化标记的应用场景3.掌握跨行跨列操作实现复杂表格4.学会使用表格嵌套进行页面布局能力目标能独立创建非遗名录数据表格能调试解决表格兼容性问题能运用表格实现页面基础布局素质目标培养自主学习和独立思考能力提升快速学习新技术的能力强化对非遗文化的保护意识思政目标通过非遗名录制作增强文化自信培养严谨规范的代码编写习惯教学重点表格跨行跨列操作表格嵌套布局的实现逻辑教学难点复杂表格的结构化语义化设计多浏览器表格样式兼容性处理教学设计思路教学效果及改进思路绝大部分学生能够掌握本项目中的知识点和技能，针对个别接受程度较慢的学生，可结成班上的学习小组，一对一的帮扶，努力做到每名学生不掉队。学生在线上预习环节的完成度不是100%，为了让他们更积极主动的做好课前准备，可以适当提高这部分的考评比率，在课上有更多的奖励手段。教学实施过程要有详细教学环节，从主要教学内容、师生活动、信息化资源、教学方法等方面进行撰写备注一、课前自主学习（一）教师发布预习任务：观看智慧职教《前端技术开发》MOOC课程里的单元3的相关微课视频，完成在线测试。(二）学生根据预习任务完成配套练习题，标注出理解不透彻的知识点。（三）教师通过在线讨论区收集学生疑问，整理共性问题并在课堂中重点讲解。二、课上探究学习（一）情境引入，任务导入小新整理了非遗项目信息，计划在网站上用表格展示国家级非遗名录。在学长王威的建议下，他决定采用类似Excel的表格形式呈现结构化数据，并制定了四个实施步骤：设计页面、创建表格、优化表格结构、完成页面布局。小新准备通过实践来完成这个项目。（二）任务1创建表格—制作非遗名录清单表格（1学时）1.任务描述创建非遗名录表格，定义表头和表主体。设置表格边框样式、填充与边距、背景颜色、表格及内容的对齐方式等。效果如图。2.任务准备(1)熟悉各种表格创建标记如：<table><th>等(2)了解表格基本结构(3)认识网页中三种表达颜色的方式(4)了解<width>、<height>属性(5)了解两种空白：边距与填充(6)了解对齐方式(7)能使用bordercolor属性设置边框颜色3.任务实施1.主要内容：(1)创建网页文件。打开HBuilderX,创建一个新的网页文件，并保存在对应的站点目录下。(2)构建基础表格结构。在<body>标签内插入<table>标签，创建6行5列的表格框架：第1行为表头，使用<th>标签（自动加粗居中），后续5行为数据行，使用<td>标签。(3)设置表格基本属性。宽度设为页面80%（自适应浏览器窗口），高度固定为500像素，边框粗细设为1，居中对齐，边框颜色设为灰色(#CCCCCC)，单元格内边距设为10，单元格间距设为0。美化表格样式。表头行背景色设为深红色，表头文字颜色设为白色，所有内容水平居中显示。非遗名录的参考代码如下：2.师生活动：教师通过分步演示非遗名录表格的制作过程，实时解答学生疑问，并巡视课堂进行个性化指导，记录学生实践情况。学生跟随演示完成实操练习，通过小组互评和自评表格完善学习反馈3.教学方法：采用案例教学法，结合非遗项目真实数据，利用HBuilderX软件实操演示，配合微课视频辅助理解重点难点。任务2表格结构化标记—制作非遗名录清单表格（1学时）1.任务描述在任务1的基础上增加表格结构化标记，标识表格的页眉、主体部分，提高表格的可读性，使表格更易于理解。非遗名录清单网页优化后的效果如图下所示。2.任务准备(1)熟悉表格的优化结构标记<thead><tbody><tfoot>。3.任务实施1.主要内容：(1)将在任务1中的创建表格的第一行划分为表格页眉，添加表格结构化标记<thead></thead>。(2)添加表格右下角文字。(3)将在任务1中的创建表格的数据划分为表格主题，添加表格结构化标记<tfoot></tfoot>。非遗名录的优化参考代码如下：2.师生活动：教师以非遗名录为案例，系统讲解表格布局技巧，在机房巡回检查学生代码编写情况，及时纠正典型错误。学生通过临摹教师案例完成实践任务，并分组展示作品进行互评。3.教学方法：采用任务驱动法，通过实际项目开发场景，结合屏幕录制回放功能强化关键步骤记忆。任务3表格页面布局—非遗名录页面（2学时）1.任务描述非遗名录页面采用三表格布局结构：顶部为13行4列的统计表格，用于展示文字说明和数据概览；中部为核心展示区，以规整的表格形式呈现非遗项目清单；底部设置分页导航表格，包含页面跳转超链接。非遗名录页面整体的效果如图下所示。2.任务准备(1)熟悉表格跨行/跨列操作。(2)具备表格嵌套能力。3.任务实施1.主要内容：(1)首先创建网页文件并建立图片存储目录，随后构建三个结构化表格：首个为3行4列的顶部表格，设置无边框、80%页面宽度且居中对齐，首行跨列显示段落内容。(2)其次完善7行5列的主体表格，末行添加跨列统计信息。(3)最后建立1行5列的底部导航表格。非遗名录页面参考代码如下：2.师生活动：教师以非遗名录为案例，系统讲解表格布局技巧，在机房巡回检查学生代码编写情况，及时纠正典型错误。学生通过临摹教师案例完成实践任务，并分组展示作品进行互评。3.教学方法：采用工作坊模式，强化师生互动和实践指导。课后拓展练习1、传统表格布局存在明显缺陷，当用于复杂页面设计时需要多层嵌套表格，这会导致代码臃肿、可读性降低，后期维护和改版十分困难。相比之下，现代DIV+CSS布局技术通过HTML构建页面结构、CSS控制表现形式，实现了内容与样式的分离，不仅使网页能更好地适配不同设备，还大幅提升了开发效率和维护便利性。CSS为表格样式控制提供了更强大的功能，相较于传统表格标记属性只能进行简单设置，CSS支持对边框、边距、对齐方式等属性进行精细化控制。例如CSS可以单独设置各方向边框样式和内边距，还能实现表格标记不具备的边框折叠等特性，使表格在数据展示时既保持规整性又能实现更丰富的视觉效果。2.完成单元课后配套习题《Web前端开发技术》课程教案适用专业：授课班级：授课教师：编制日期：

教案名称单元4制作非遗登录注册页面—H5表单计划学时4学时本次授课类型□理论□实验☑理实一体□实训□实习教学目标知识目标1.理解表单的基本结构。2.掌握表单控件的类型和属性。3.掌握表单的提交方式。4.掌握HTML5的内置验证功能。5.能够使用正则表达式进行更复杂的数据验证。能力目标1.能够独立完成登录和注册页面的表单设计与实现。2.能够使用HTML5表单控件属性进行数据验证。3.能够使用正则表达式优化表单验证逻辑。素质目标1.培养交互设计能力。2.培养设计思维与创新能力。思政目标1.培养团队合作和沟通能力。2.增强对非遗文化的保护意识，通过技术传承传统文化。教学重点1.表单的基本结构与控件类型。2.HTML5表单控件的属性及内置验证功能。3.正则表达式在表单验证中的应用。教学难点1.表单数据的动态验证与错误提示。2.正则表达式的编写与调试。3.表单在不同浏览器中的兼容性问题。教学设计思路教学效果及改进思路绝大部分学生能够掌握本项目中的知识点和技能，针对个别接受程度较慢的学生，可结成班上的学习小组，一对一的帮扶，努力做到每名学生不掉队。学生在线上预习环节的完成度不是100%，为了让他们更积极主动的做好课前准备，可以适当提高这部分的考评比率，在课上有更多的奖励手段。教学实施过程要有详细教学环节，从主要教学内容、师生活动、信息化资源、教学方法等方面进行撰写备注一、课前自主学习（一）教师发布预习任务：观看智慧职教《前端技术开发》MOOC课程里的单元4的相关微课视频，完成在线测试。（二）学生需严格按照教学要求完成课前预习任务，包括观看教学视频、阅读教材相关内容、完成预习测试题等，并在学习过程中详细记录遇到的疑难问题，形成书面预习报告提交至在线学习平台（三）教师通过教学管理平台的数据分析功能，实时监控每位学生的学习进度和预习完成情况，针对未达标学生及时发送提醒通知，并安排专门的线上辅导时间，通过一对一或小组辅导的形式确保所有学生达到预期的预习效果二、课上探究学习（一）情境引入，任务导入小新在掌握HTML5标记知识后，计划为非遗网站新增用户登录功能，以便记录用户交互数据并提供个性化服务。他认识到HTML5表单是实现这一功能的关键，并制定了详细的学习实践计划：首先设计登录和注册页面框架，然后创建基础表单结构，接着添加各类表单控件，再设置表单属性并实现数据验证，最后运用正则表达式完成复杂验证功能。（二）任务1创建表单—制作非遗登录页面（1学时）1.任务描述为非遗网站创建登录页面。已注册的用户填写相关的信息并提交网站后台后，可以通过该页面登录网站。2.任务准备(1)明确表单的概念(2)了解表单的标记<form>(3)了解文本框和密码框(4)了解控件按钮3.任务实施1.主要内容：(1)在站点目录下创建登录网页文件。

(2)创建登录表单。设置表单数据发送方式为post，代码如下

<form

action=“”

method=“post”></form>

(3)为表单分别添加输入用户名和密码的文本框和密码框。

<input

type=“text”name=“username”>

<input

type=“password”

name=“password”>

(4)创建表单提交按钮。

<button

type=“submit”>登录</button>(5)对表格进行布局排布(6)设置表格宽度与高度(7)CSS美化表格效果图如下：2.师生活动：教师建立在线答疑平台，及时解答学生疑问。学生随时提问，获得针对性指导。3.教学方法：运用探究式教学，引导学生自主发现问题并解决。采用工作坊模式，强化师生互动和实践指导。（二）任务2添加表单控件—制作注册页面（1学时）1.任务描述为非遗网站创建注册页面。用户需要在页面上填写并提交的信息包括用户名、姓名、密码、性别、出生日期、联系电话、所在城市、身份证照片等。用户注册页面效果如

图所示。2.任务准备(1)了解单选按钮控件(<input

type=“radio”>)能够保证用户在一组数据中最多只选择一项(2)复选框控件(<input

type-“”>)允许用户在一组选项中选择多个(3)了解文本框和密码框(4)了解日期控件(5)了解下拉列表(<select>)允许用户在多个选项中选择一个(6)了解文本域({<}textarea{>})允许用户输人多行文本(7)了解文件域3.任务实施1.主要内容：(1)在站点目录下创建非遗网站注册页面文件。(2)创建注册表单。{<}formaction=“”method=“post”{>}{<}/form{>}(3)在表单中添加文本框和密码框。利用placeholder属性设置水印文字，即当文本框为空时显示的浅灰色的文字。(4)添加性别单选按钮。{<}label{>}{<}inputtype=“radio”name=“gender”value=“male”{>}男{<}/label{>}{<}label{>}{<}inputtype=“radio”name=“gender”value=“female”{>}女{<}/label{>}(5)添加日期控件，以设置出生日期。{<}inputtype=“date”name=“birthday”{>}(6)添加联系电话输人框。{<}inputtype=“tel”name=“phone”{>}(7)添加所在城市下拉列表。(8)添加身份证照片文件域。{<}inputtype=“file”name=“photo”{>}(9)添加备注文本域。(10)添加提交按钮和超链接。{<}inputtype=“submit”value=“勾选以下协议并注册”name=“commit”id=“commit”{>}{<}br/{>}{<}ahref=“user.html”{>}《用户协议》{<}/a{>}(11)创建一个10行2列的表格。(12)为了美化页面，设置背景图片.效果图如下：2.师生活动：教师开展操作技能测试，评估学生掌握程度。学生参加测试，检验学习成果。3.教学方法：运用体验式教学，让学生在真实工作环境中实践操作。任务3设置HTML5表单控件属性—验证注册页面表单数据（1学时）1.任务描述对用户名、姓名、密码、出生日期、联系电话、身份证照片等字段进行合法性验证。2.任务准备(1)了解必填属性在HTML5表单标记中可以使用required属性来强制用户填写表单字段。当用户试图提交表单时如果任何带有reguired属性的字段未被填写，浏览器将不会提交表单，并会显示一个错误消息。(2)了解对于文本框、密码框，可以限制输入其中的字符串长度。(3)了解文件限制类型3.任务实施1.主要内容：(1)除备注外所有字段均为“必填”。将用户名设置为必填字段的代码如下{<}inputtype=“text”name=“loginname”placeholder=“请填写登录的用户名”required{>}(2)设置用户名和密码不超过20个字符，代码如下{<}inputtype=“text”name=“loginname”placeholder=“请填写登录的用户名”requiredmaxlength=“20”{>}{<}inputtype=“password”name=“password”requiredmaxlength=“20”{>}(3)设置姓名不超过4个字符，代码如下。(4)出生日期设置为date类型{<}inputtype=“date”name=“birthday”required{>}(5)联系电话设置为tel类型。{<}inputtype=“tel”name=“phone”required{>}(6)身份证照片只允许上传JPG、PNG格式的图片(7)对表格进行布局排布(8)设置表格宽度与高度(9)CSS美化表格总体代码如下：2.师生活动：教师录制微课视频，供学生课前预习操作要点。学生观看视频，提前了解实践内容。3.教学方法：采用协作学习法，组织学生团队完成综合性实践项目。任务4使用正则表达式进行复杂验证（1学时）1.任务描述对字段的验证。1.姓名必须是2~4个中文字符。2.联系电话必须是以1开头的11位数字,第二位数字是3、4、5、6、7、8、9中的任意一个。2.任务准备(1)了解常用元字符：/、^、$等。(2)了解分支规则。3.任务实施1.主要内容：使用正则表达式改写姓名和联系电话两个字段，代码如下，{<}inputtype=“text”name=“truename”placeholder“请填写姓名”requiredpattern=“^[\u4e00-\u9fa5]<{>2,4<}>$”{>}{<}inputtype=“tel”name=“phone”requiredpattern=“^1[3-9]\d<{>9<}>$”{>}2.师生活动：教师设置问题情境，引导学生思考解决方案。学生分组讨论，提出可行性方案并实践验证。3.教学方法：运用游戏化教学策略，将操作要点设计成闯关任务。课后拓展练习1.用户提交表单后表单数据的处理过程表单数据的处理遵循标准化的三阶段流程。在客户端阶段，系统通过HTML5原生验证机制和JavaScript脚本对用户输入进行多重校验，包括格式合规性检查（如邮箱地址、电话号码等特定格式匹配）、安全风险筛查（防范SQL注入和XSS攻击等常见威胁）以及数据一致性验证。数据通过初步验证后，将被提交至服务器端由PHP、Java、C#或Node.js等后端程序接收处理，在此阶段完成数据格式化、业务逻辑运算及必要的格式转换等操作。最终处理完毕的数据通过加密存储机制（如敏感字段加密）和严格的权限控制系统，安全地持久化至数据库，确保数据隐私性和系统安全性。2.用户绕过后端验证时的数据安全保障尽管客户端验证能有效拦截大部分非法数据，但用户仍可能通过开发者工具等技术手段绕过前端校验。为此系统必须建立多层防护机制：首先实施服务器端二次验证，对接收数据进行严格复核；其次采用HTTPS/SSL/TLS等加密协议保障传输过程安全；同时结合存储加密技术（如AES/RSA算法）保护持久化数据。这种防御体系通过客户端与服务器的双重验证、传输加密和存储加密的三重保障，确保即使前端验证被绕过，系统仍能维护数据的完整性，有效防范恶意攻击和数据泄露风险。3.完成单元课后配套习题《Web前端开发技术》课程教案适用专业：授课班级：授课教师：编制日期：

教案名称单元5制作非遗活动详情页面—CSS基础计划学时4学时本次授课类型□理论□实验☑理实一体□实训□实习教学目标知识目标1.掌握CSS基本语法，能正确编写CSS语句。

2.理解CSS选择器的作用及使用方法。

3.掌握文本字体样式的设置方法。

4.学习文本精细排版的技巧。能力目标1.能够在网页中正确引入CSS代码。

2.能够使用CSS美化网页头部和正文区域。

3.能够制作并美化非遗活动详情页面。素质目标1.培养用户导向的设计思维。2.提升网页审美能力和艺术修养。3.培养精益求精的职业素养。思政目标1.激发学生对传统文化的兴趣，增强文化自信。

2.培养学生团队协作和沟通能力。教学重点1.CSS基本语法与选择器的使用。

2.文本字体样式和精细排版的实现方法。教学难点1.CSS选择器的灵活运用。2.多浏览器兼容性问题处理。3.响应式设计的初步实践。教学设计思路教学效果及改进思路绝大部分学生能够掌握本项目中的知识点和技能，针对个别接受程度较慢的学生，可结成班上的学习小组，一对一的帮扶，努力做到每名学生不掉队。学生在线上预习环节的完成度不是100%，为了让他们更积极主动的做好课前准备，可以适当提高这部分的考评比率，在课上有更多的奖励手段。教学实施过程要有详细教学环节，从主要教学内容、师生活动、信息化资源、教学方法等方面进行撰写备注一、课前自主学习（一）教师发布预习任务：观看智慧职教《前端技术开发》MOOC课程里的单元5的相关微课视频，完成在线测试。（二）学生主动完成预习任务，系统整理需要深化的知识模块。（三）教师精准识别学习薄弱环节，开展有针对性的线上助学活动，确保教学起点公平一致。二、课上探究学习（一）情境引入，任务导入通过前期的学习，小新已经掌握了网页内容搭建的基础技能，但在实际制作非遗网站时发现，自己设计的页面在美观度和用户体验方面与主流网站存在明显差距。为了提升网页质量，小新决定通过学习CSS技术来优化页面样式，包括调整字体颜色、段落间距等视觉效果。为此，他制定了分阶段的任务规划：首先设计完整的非遗活动详情页面框架；接着通过CSS美化页面头部区域的字体样式；然后对正文部分的文本进行精细排版；最终完成整个页面的制作与美化，从而打造出更具吸引力和专业感的非遗网站页面。（二）任务1CSS基础与选择器（1课时）1.任务描述2.任务准备打开Axure，建立非遗活动详情页面原型，设计页面。根据任务描述给出以下3种版式设计版式设计1:左上区域为当前位置区域，中间靠上区域是标题区域，中间部分显示正文，右下区域显示编辑部信息。页面上的图片可以放在正文中间显示。非遗活动详情页面版式设计1如所示。版式设计2:页面上的图片放在正文下面显示，一行显示多张图片。非遗活动详情页面版式设计2如图所示。版式设计3:正文内容只显示文字。非遗活动详情页面版式设计3如图所示。3.任务实施1.主要内容：根据要求进行操作。2.师生活动：教师提供操作检查清单，指导学生进行自我评估。学生对照清单检查操作结果，完善实践报告。3.教学方法：采用案例教学法，分析典型工作案例，引导学生举一反三。任务2CSS字体样式—美化非遗活动详情页面头部区域（1课时）1.任务描述设置网页文字的样式。非遗活动详情页面头部区域的网页效果如图所示2.任务准备(1)了解CSS基本语法如下selector<{>property:value;property:value。(2)了解CSS基本选择器：类选择器、id选择器、标记选择器。(3)了解CSS复合选择器：交集选择器、并集选择器、包含选择器。(4)了解CSS代码的四种方式：链入外部样式表、导入外部样式表、内部样式表、行内样式表。(5)了解字体样式的设计。(6)了解文本对齐方式。3.任务实施1.主要内容：(1)创建新网页文件。打开HBuilderX，在非遗项目站点中创建网页文件。(2)在<body></body>标记之间创建网页元素。(3)使用内部样式表引人CSS代码。在当前编辑的网页文件头部插人{<}style{>}{<}/style{>}标记，设置type属性。(4)设置当前位置信息和标题区域的文字样式。2.师生活动：教师建立学习小组，安排组长协助指导组员练习。学生互帮互助，共同完成实践任务。3.教学方法：运用模拟仿真教学，通过虚拟实训平台强化操作技能。任务3精细排版文本—美化非遗活动详情页面正文区域（1课时）1.任务描述非遗活动详情页面的正文区域使用{<}p{>}标记和{<}span{>}标记来创建HTML内容，使用CSS来设置正文的字体样式，并进行文本的精细排版，包括段落首行缩进、段落的行高、字词间距、文本修饰等。正文区域网页效果如图所示。2.任务准备(1)了解文本缩进中文正文段落的排版习惯是将每个段落的首行缩进(2)了解行高调整。可以使用CSS属性lime-height控制行高、调整行间距。(3)文本修饰主要包括给文字添加下划线、删除线、上划线等。(4)了解字间距跟词间距。3.任务实施1.主要内容：(1)创建新的网页文件。(2)在网页文件主体中创建多个正文段落和“编辑部”段落。(3)设置正文段落的字体大小为20像素，首行缩进两个字符、调整行高为1.5借。(4)设置“编辑部”段落的文本对齐方式为向右对齐。该段落为特殊段落，在该段落元素的HTML标记中设置id属性为edit。非遗活动详情页面正文区域参考代码如下。2.师生活动：教师组织技能竞赛活动，评选优秀操作案例。学生参与竞赛展示，互相观摩学习。3.教学方法：采用工作过程导向教学法，按照行业标准流程设计实践环节。任务4制作并美化非遗活动详情页面（1课时）1.任务描述按照网页的设计,可以适当增加图片使网页更加美观,非遗活动详情页面效果如图。2.任务准备(1)在CSS中，设置透明度主要有以下4种方式：使用opacity属性设置透明度、使用rgba()设置透明度、使用hsla()设置透明度、使用filter属性设置透明度。(2)了解CSS五种选择器：关系、属性、伪类、结构伪类、伪元素。3.任务实施1.主要内容：(1)创建网页文件打开HBuilderX，创建非遗活动详情网页(2)设置“编辑部”元素为半透明(3)整合页面头部区域、正文区域，并调试和美化代码。非遗活动详情页面参考代码如下2.师生活动：教师设置分级练习任务，根据学生水平提供差异化指导。学生自主选择练习难度，完成相应实践作业。3.教学方法：运用项目教学法，以完整的工作流程组织教学活动，培养综合实践能力。课后拓展练习1.CSS代码调试方法总结：在网页开发过程中，CSS代码调试是确保页面样式正确显示的关键环节。开发者应当优先选择真实浏览器（如Chrome）进行调试，而非仅依赖开发工具内置的预览功能。调试时，可以通过右键点击页面元素并选择"检查"来打开开发者工具。该工具包含两个核心功能面板：Elements面板用于查看和定位HTML代码，会高亮显示当前选中的页面元素；Styles面板则完整展示该元素应用的所有CSS样式，包括浏览器默认样式和开发者自定义样式。值得注意的是，开发者工具支持对CSS样式进行实时编辑和预览，这些修改虽然不会保存到源文件中，但能帮助开发者快速验证样式效果。完整的调试流程包括：通过开发者工具定位问题元素、实时调整样式参数、观察页面变化，最后将确认有效的修改更新到源代码中。这种方法极大提高了CSS调试的效率和准确性。2.完成课后配套习题《Web前端开发技术》课程教案适用专业：授课班级：授课教师：编制日期：

教案名称单元6制作非遗项目申报指南页面—CSS高级应用计划学时4学时本次授课类型□理论□实验☑理实一体□实训□实习教学目标知识目标1.学会有序列表和无序列表的创建。2.掌握列表的嵌套使用及样式设置。3.掌握超链接、边框、背景的样式设置。4.理解CSS高级应用在实际项目中的整合与美化。能力目标1.能够独立创建和美化列表、导航栏及页面区域。2.能够运用CSS高级样式解决实际页面设计问题。素质目标1.培养持续学习、深度学习的能力。2.关注前沿技术，培养创新思维。思政目标1.激发学生对传统文化的兴趣，增强文化自信。2.培养团队协作精神，提升解决问题的能力。教学重点列表的创建与样式设置（有序列表、无序列表、嵌套列表）。边框与背景的样式设置。超链接的样式设置与水平导航栏的美化。教学难点列表嵌套的逻辑与样式冲突解决。多浏览器环境下边框与背景样式的兼容性问题。页面整体布局与样式整合的协调性。教学设计思路教学效果及改进思路绝大部分学生能够掌握本项目中的知识点和技能，针对个别接受程度较慢的学生，可结成班上的学习小组，一对一的帮扶，努力做到每名学生不掉队。学生在线上预习环节的完成度不是100%，为了让他们更积极主动的做好课前准备，可以适当提高这部分的考评比率，在课上有更多的奖励手段。教学实施过程要有详细教学环节，从主要教学内容、师生活动、信息化资源、教学方法等方面进行撰写备注一、课前自主学习（一）教师发布预习任务：观看智慧职教《前端技术开发》MOOC课程里的单元6的相关微课视频，完成在线测试。（二）学生严格遵守预习要求，详细记录需要解惑的要点。（三）教师科学分析学习成效曲线，为特殊需求学员提供定制化辅导方案，营造全员共进的学习氛围。二、课上探究学习（一）情境引入，任务导入小新计划为非遗网站制作非遗项目申报指南页面，并决定通过列表来实现非遗项目申报指南区域和水平导航栏的设计。他意识到，仅凭之前掌握的入门技能无法实现更加美观的网页效果，因此需要深入学习CSS3的高级应用，包括列表样式、背景样式和边框样式等，以提升页面的整体视觉效果。为此，小新制定了详细的任务规划：首先设计非遗项目申报指南页面的整体框架，接着创建列表并完成申报指南区域的制作，然后通过设置边框样式完善文件下载区域，再制作并美化水平导航栏，最后通过背景样式的调整进一步优化页面效果。（二）任务1认识网页1.任务描述2.任务准备具备非遗项目申报指南页面原型图3.任务实施1.主要内容：根据网页内容来规划和设计页面布局。打开Axurc，建立非遗项目申报指南页面原型，设计页面，原型图如图所示。2.师生活动：教师提供操作指导手册，巡回检查学生操作规范，进行过程性评价。学生按照步骤完成实践任务，拍摄操作视频进行自我检查。3.教学方法：采用翻转课堂教学模式，课前提供学习资料，课中重点指导实践操作。任务2边框样式设置—制作非遗项目文件下载区域1.任务描述使用列表制作申报指南区域的侧边栏，通过列表间的嵌套形成二级目录结构，并设置列表的CSS属性以美化列表样式。2.任务准备(1)能够创建有序无序两种列表(2)能够设置列表的样式属性(3)能够使用overflow属性用于控制内容溢出元素边框时显示的方式(4)能够使用white-space属性用于指定元素内空白的处理方式(5)能够使用text-overflow属性用于指定当文本溢出包含它的元素时应该如何显示3.任务实施1.主要内容：(1)在站点目录下新建非遗项目申报指南页面。(2)在页面中创建一级标题元素“申报指南”，令其居中显示。(3)使用无序列表创建第一级申报指南目录。(4)使用有序列表创建第二级申报指南目录。在第3步无序列表的{<}li{>}{<}/i{>}标记中插入用有序列表表示的二级目录。(5)使用iist-style-image属性设置无序列表的列表项符号为箭头图片。这样，.级目录的列表项符号也会随之变化，需要同时设置有序列表的list-style-image为none。(6)右侧正文部分放置在层{<}divid=“right”>}中，设置固定的大小，当长文本出现时需要进行文本的溢出控制，在右侧添加滚动条以便查看全文。(7)为了使网页更加美观，将侧边栏和正文部分放置在不同的层中，实现左右分布显示，实现方法将在单元7的任务中详细介绍。非遗项目申报指南区域参考代码如下2.师生活动：教师通过项目分析引入知识点，指导学生完成需求分析文档。

学生以小组为单位进行需求讨论，绘制功能流程图。3.教学方法：采用项目导向教学法，结合企业真实案例，引导学生完成项目规划。任务3列表应用—制作与美化水平导航栏1.任务描述使用列表制作文件下载区域，每个列表项都是超链接，单击文件下载链接可以下载相关文件。通过CSS设置列表项的边框样式、背景样式、超链接样式等。文件下载区域网页效果如图所示。2.任务准备(1)了解边框样式的设计(2)了解CSS新增边框属性3.任务实施1.主要内容：(1)在站点目录下新建文件下载区域页面。(2)在页面上创建一级标题"文件下载"和无序列表，每个列表项即文件下载项，单击文件下载链接可以下载对应文件。(3)设置标题文字居中显示。(4)设置无序列表样式。不显示无序列表的列表项符号。(5)设置边框样式。每个列表项的下边框样式为点线、1像素、灰色(#b2b2b2)。(6)设置超链接样式。文字颜色为黑色，无下划线。(7)当鼠标指针悬停在某个文件下载项上方时，其背景颜色变为灰色。文件下载区域参考代码如下2.师生活动：教师现场演示代码调试技巧，巡回解答学生编程问题。

学生独立完成代码编写，通过单元测试验证功能。3.教学方法：采用案例教学法，通过典型错误分析，培养学生debug能力。任务4背景样式设置1.任务描述对列表进行文字样式设置、超链接样式设置等。导航栏的网页效果如图所示2.任务准备能够使用width与height设置元素的宽度与高度3.任务实施1.主要内容：(1)创建导航容器。创建一个id为"nav"的层作为导航栏容器，设置容器宽度为1000px，高度为60px，使容器在页面上水平居中，添加灰色背景便于查看容器范围。(2)添加导航列表结构。在容器内添加无序列表<ul>作为导航栏主体，列表包含5个导航项：首页、机构、资讯、名录、指南，每个导航项使用<li>标记包裹超链接，设置<ul>的宽度和高度与容器一致。(3)设置列表项浮动。由于<li>是块级元素，需要使用浮动属性使其横向排列，设置所有<li>元素向左浮动。(4)调整列表项样式，设置每个<li>宽度为200px，移除列表项符号，添加红色背景便于观察元素范围。(5)清除默认边距。清除<ul>元素的默认外边距和内边距，确保列表与容器完全贴合。(6)设置垂直居中。调整<li>高度与容器一致，通过设置行高实现文字垂直居中，设置文字水平居中显示。(7)美化超链接样式。设置导航文字大小为20px，文字颜色设为白色，移除超链接下划线，统一鼠标移入移出的视觉效果。(8)最终优化建议。可添加鼠标悬停效果（如背景变黑），可进一步调整间距和交互效果，可考虑响应式设计适配不同设备。2.师生活动：教师逐步演示讲解操作，巡回指导学生进行上机练习，完成学生操作过程评价。学生跟练，完成自评与互评。3.教学方法：采用项目驱动法优化教学过程，通过真实软件环境演练，播放视频等多种形式组织教学活动。任务5整合美化非遗项目申报指南页面1.任务描述制作页面头部区域，放置网站10g0、网站名称、水平导航栏，增加页面的背景样式设置，对CSS代码和HTML代码进行有效整合优化。设置水平导航栏背景2.任务准备(1)了解背景颜色设置(2)了解背景图片设置(3)了解背景图片平铺设置(4)了解背景图片附着设置(5)了解背景图片位置设置(6)了解背景组合属性3.任务实施1.主要内容：(1)在站点目录下新建网页文件(2)将网页划分为三个内容区块：页面头部区域、申报指南区域和文件下载区域，分别放置在不同层中(3)整合优化三个内容区块的CSS代码，避免样式冲突(4)设置页面背景图片，大小为50×50像素并默认平铺(5)在页面头部区域左上角显示网站logo和名称，logo设为背景图片并向右偏移100像素(6)设置网站名称的文字样式（颜色、大小、间距）并与logo保持垂直居中(7)统一调整各区域样式风格，提升页面整体美观度2.师生活动：教师组织课堂辩论，引导学生探讨技术方案优劣。

学生分组准备论据，进行技术方案答辩。3.教学方法：采用研讨式教学法，通过头脑风暴激发创新思维。三、课后拓展练习1.列表在网页上的默认样式有序列表和无序列表是组合标记，由{<}ul{>}{<}/ul{>}或{<}o|{>}{<}/ol{>}与{<}li{>}{<}/i{>}组成，都不能单独使用。这3种标记都是块级标记，即独占一行，列表项之间上下排列。无序列表的默认样式如图所示。打开浏览器的开发者工具可以看到{<}ul{>}{<}/ul{>}或{<}ol{>}{<}/ol{>}标记，内容周围出现空白，即上下边距和左边填充。不同的浏览器，空白的大小不同，所以涉及这些标记的网页需要在样式控制的前面几行将这些属性的值设置为0，后面再做具体的设置。CSS3中新增了3个用于设置背景样式的属性，如表所示。3.完成课后配套练习题《Web前端开发技术》课程教案适用专业：授课班级：授课教师：编制日期：

教案名称单元7制作精彩非遗资讯页面—网页布局计划学时4学时本次授课类型□理论□实验☑理实一体□实训□实习教学目标知识目标1.掌握文档流与盒子模型的基本原理。2.掌握元素的填充和边距设置。3.掌握块级元素的浮动应用。4.学会使用绝对定位和相对定位。5.能够使用DIV+CSS进行网页布局。能力目标1.能够熟练运用盒子模型进行页面布局。2.能够解决浮动和定位中的常见问题。3.能够独立完成非遗资讯页面的布局设计。素质目标1.培养耐心细致的职业素养。2.培养精益求精的工匠精神。思政目标1.激发学生对传统文化的兴趣，增强文化自信。2.培养学生团队协作和解决问题的能力。教学重点1.盒子模型的基本原理与应用。2.浮动与定位的实现方法。3.DIV+CSS布局技巧。教学难点1.浮动引起的布局问题及解决方法。2.绝对定位与相对定位的灵活运用。3.多设备兼容性布局设计。教学设计思路教学效果及改进思路绝大部分学生能够掌握本项目中的知识点和技能，针对个别接受程度较慢的学生，可结成班上的学习小组，一对一的帮扶，努力做到每名学生不掉队。学生在线上预习环节的完成度不是100%，为了让他们更积极主动的做好课前准备，可以适当提高这部分的考评比率，在课上有更多的奖励手段。教学实施过程要有详细教学环节，从主要教学内容、师生活动、信息化资源、教学方法等方面进行撰写备注一、课前自主学习（一）教师发布预习任务：观看智慧职教《前端技术开发》MOOC课程里的单元7的相关微课视频，完成在线测试。（二）学生完成预习阶段配套练习题，标注理解不透彻的知识点

（三）教师收集整理学生共性疑问，在课堂中针对性讲解重点难点二、课上探究学习（一）情境引入，任务导入计算机系学生小新在网页制作实践中发现，随着网页内容逐渐丰富，他对元素位置控制和页面排版布局感到力不从心。面对这一挑战，小新没有退缩，而是采取系统化的解决思路：首先设计精彩非遗资讯页面的整体框架，接着深入理解盒子模型原理并搭建页面基础布局；然后学习浮动技术制作资讯推介区域，掌握定位技术完成专题报道区域的设计；最后将所有模块整合优化，实现页面的整体美化。（二）任务1设计精彩非遗咨询页面1.任务描述2.任务准备(1)明确页面分为头部层、内容层（资讯推介+专题报道）、底部层三大区块。(2)复习盒子模型、浮动（实现图文左右布局）、定位（专题区块排列）等CSS布局技术。3.任务实施1.主要内容：根据任务工单中的要求，使用UI原型图工具Axure完成精彩非遗资讯页面U设计任务。精彩非遗资讯页面原型图如图所示。2.师生活动：教师逐步演示讲解操作，巡回指导学生进行上机练习，完成学生操作过程评价。学生跟练，完成自评与互评。3.教学方法：采用项目驱动法优化教学过程，通过真实软件环境演练，播放视频等多种形式组织教学活动。任务2盒子模型和搭建资讯页面整体布局1.任务描述参照设计图将网页内容划分为3个区块，分别为头部层、内容层、底部层，每个区块使用层{<}div{>}来实现。其中内容层分为上下两部分，即资讯推介和专题报道。为了直观了解网页的整体布局，会增加背景等样式来突出不同的区块。页面整体布局如图所示。2.任务准备(1)文档流：网页元素默认按代码顺序从上到下、从左到右排列，块级元素独占一行，行内元素同行排列。(2)元素显示方式：display属性可改变元素显示类型（如block、inline、inline-block），控制布局行为。(3)盒子模型：元素由内容（content）、内边距（padding）、边框（border）、外边距（margin）组成，box-sizing属性决定宽度/高度的计算方式。(4)填充与边距：padding控制内容与边框间距，margin控制元素间距离；百分比值相对于父元素宽度计算。(5)层元素：<div>是块级容器，用于划分网页区块，结合CSS实现灵活布局（DIV+CSS）。3.任务实施1.主要内容：(1)在站点目录下创建网页文件7-2.html(2)在body标记中创建三个层元素：头部层、内容层和底部层(3)在内容层中嵌套创建资讯推介和专题报道两个子层(4)使用CSS设置各区块的宽度和固定高度(5)为各区块设置不同的背景颜色以便区分(6)为每个区块添加下边距以产生间距效果(7)设置网页内容在页面上水平居中显示。2.师生活动：教师逐步演示讲解操作，巡回指导学生进行上机练习，完成学生操作过程评价。学生跟练，完成自评与互评。3.教学方法：采用项目驱动法优化教学过程，通过真实软件环境演练，播放视频等多种形式组织教学活动。任务3设置元素浮动1.任务描述资讯推介区域的制作需要使用CSS文字样式、元素填充和边距等。资讯推介区域的效果如图所示2.任务准备(1)元素浮动：使用float属性（left/right）使块级元素脱离文档流，实现横向排列，宽度自适应内容。(2)浮动影响：浮动元素会脱离文档流，可能影响相邻元素的布局，导致父元素高度塌陷。(3)清除浮动：通过clear属性（如both）禁止指定侧出现浮动元素，常用于解决父元素高度塌陷问题。(4)图文排版：利用float实现左右结构布局，需控制元素宽度避免文字环绕或重叠。(5)布局技巧：优先用CSS调整显示位置（而非HTML顺序），保持内容逻辑清晰。3.任务实施1.主要内容：(1)创建网页文件7-3.html并设置基本结构(2)在news层中添加"资讯推介"标题和newscontent内容层3)在newscontent层中设置图片左浮动和文字区域右浮动4)调整文字区域宽度和高度使其与图片等高5)使用伪元素清除浮动防止父元素高度塌陷(6)优化文字区域的边距、填充和样式效果7)确保图片和文字区域总宽度不超过父元素宽度2.师生活动：教师逐步演示讲解操作，巡回指导学生进行上机练习，完成学生操作过程评价。学生跟练，完成自评与互评。3.教学方法：采用项目驱动法优化教学过程，通过真实软件环境演练，播放视频等多种形式组织教学活动。任务4元素定位制作资讯推介区域1.任务描述专题报道区域在一行上显示3个专题项，每个专题项由图片和文字组成。该区域右上角“查看更多”超链接出现的位置特殊，需要使用定位方式进行布局，从而与所在区域形成相对位置不变的关系。专题报道区域效果如图所示。2.任务准备(1)静态定位：默认定位方式，元素按文档流正常排列，position属性值为static。(2)相对定位：position:relative，元素相对于原位置偏移，不脱离文档流，不影响其他元素布局。(3)绝对定位：position:absolute，元素相对于最近已定位祖先元素偏移，脱离文档流。(4)固定定位：position:fixed，元素相对于浏览器窗口定位，不随页面滚动，脱离文档流。(5)z-index属性：控制定位元素的重叠顺序，数值大的元素覆盖数值小的元素。3.任务实施1.主要内容：(1)创建网页文件。在站点目录下新建7-4.html文件，用于制作专题报道区域。(2)设置专题报道区域结构，在report层中添加标题"专题报道"，添加"查看更多"超链接（ID为more）。(3)实现"查看更多"定位。使用绝对定位（position:absolute）固定"查看更多"位置，设置top:20px和right:50px定位坐标=，将父元素report设为相对定位（position:relative）作为定位基准。(4)专题项横向排列。创建3个类名为item的层元素容器，设置浮动（float:left）实现横向排列，控制宽度为400px并设置右边距50px(5)文本溢出处理。对专题项内段落设置：溢出隐藏（overflow:hidden）、禁止换行（white-space:nowrap）、超出显示省略号（text-overflow:ellipsis）(6)样式统一设置。为专题项统一设置背景色（#ccc）等样式。2.师生活动：教师逐步演示讲解操作，巡回指导学生进行上机练习，完成学生操作过程评价。学生跟练，完成自评与互评。3.教学方法：采用项目驱动法优化教学过程，通过真实软件环境演练，播放视频等多种形式组织教学活动。任务5整合页面1.任务描述将页面中各区块内容进行整合和调试，制作页面底部区域，美化页面整体效果。页面底部放置3个超链接的列表，设置列表和超链接样式。精彩非遗资讯页面整体效果如图所示。2.任务准备掌握HTML结构、CSS布局与样式美化，使用开发者工具调试，实现协调统一的页面底部设计。3.任务实施1.主要内容：(1)将资讯推介区域和专题报道区域进行整合，对代码进行优化。(2)加入页面头部和页面底部。(3)页面底部放置网站相关的3项信息，使用列表来组织内容。每项使用超链接来实现(4)设置列表项在一行上显示。设置列表项的显示方式为inline-block。设置列表项右边框样式，但列表的最后一项不需要显示边框，且列表项之间有空白。(5)将底部内容居中显示。需要定义列表的宽度和边距，(6)设置列表和超链接样式。2.师生活动：教师逐步演示讲解操作，巡回指导学生进行上机练习，完成学生操作过程评价。学生跟练，完成自评与互评。3.教学方法：采用项目驱动法优化教学过程，通过真实软件环境演练，播放视频等多种形式组织教学活动。三、课后拓展练习1.在网页前端开发中，实现块级元素同行排列是常见需求，主要通过三种CSS方式实现：传统float属性虽然简单但会引发父元素高度塌陷，需要配合clearfix技巧；position定位适合精确控制但维护成本高；现代开发更推荐display属性，特别是inline-block兼具行内与块级特性，而Flexbox布局则提供了更强大的对齐与空间分配能力，已成为当前主流的解决方案。这些方法各具特点，开发者需根据具体场景选择，其中Flexbox因其灵活性和易用性，在响应式布局中表现尤为突出。网页布局技术随着Web发展日益丰富，从早期的分栏式、表格布局，到如今的响应式设计，呈现出多样化趋势。分栏式布局适合内容结构化展示，卡片式布局提升信息模块化程度，网格系统（CSSGrid）实现精准的二维排版，单页应用（SPA）优化用户体验流畅度。特别值得注意的是，响应式设计通过媒体查询等技术，使网页能自动适配不同设备，而Flexbox和Grid布局的引入，则大大简化了复杂布局的实现难度。这些技术的演进不仅提高了开发效率，更推动了网页设计向更智能、更美观的方向发展。2.完成课后配套习题《Web前端开发技术》课程教案适用专业：授课班级：授课教师：编制日期：

教案名称单元8制作非遗首页—Javascript基础计划学时4学时本次授课类型□理论□实验☑理实一体□实训□实习教学目标知识目标1.掌握JavaScript基本语法（变量、数据类型、运算符、选择控制结构、函数等）。2.熟悉DOMAPI，能够操作网页元素和属性。3.掌握事件监听和定时器（setInterval和setTimeout）。能力目标1.能够通过JavaScript实现网页交互（如表单验证、轮播图等）。2.能够编写清晰的项目文件和用户手册。素质目标1.培养编程兴趣和逻辑思维能力。2.提升团队协作和问题解决能力。思政目标1.激发学生对传统文化的兴趣，增强文化自信。2.培养学生严谨的编程习惯和创新意识。教学重点1.JavaScript基本语法和DOM操作。2.事件监听和定时器的使用。3.轮播图等动态效果的实现。教学难点1.JavaScript异步编程的理解（如定时器）。2.跨浏览器兼容性问题处理。3.复杂交互逻辑的实现与调试。教学设计思路教学效果及改进思路绝大部分学生能够掌握本项目中的知识点和技能，针对个别接受程度较慢的学生，可结成班上的学习小组，一对一的帮扶，努力做到每名学生不掉队。学生在线上预习环节的完成度不是100%，为了让他们更积极主动的做好课前准备，可以适当提高这部分的考评比率，在课上有更多的奖励手段。教学实施过程要有详细教学环节，从主要教学内容、师生活动、信息化资源、教学方法等方面进行撰写备注一、课前自主学习（一）教师发布预习任务：观看智慧职教《前端技术开发》MOOC课程里的单元8的相关微课视频，完成在线测试。（二）学生按教学要求完成预习材料学习，记录学习过程中的疑问点

（三）教师通过教学平台数据分析学习进度，对需要加强指导的学生提供个性化上辅导，确保全体学员达到预习目标二、课上探究学习（一）情境引入，任务导入小新最近在浏览各大网站时，发现那些吸引人的网页都有一个共同特点——都运用了JavaScript来实现动态效果。特别是当他看到一些文化类网站的轮播图时，眼前一亮：精美的非遗图片像幻灯片一样自动切换，还能手动控制播放节奏。这让他萌生了一个想法——为自己的非遗网站首页也添加这样一个"会动"的轮播图。虽然知道JavaScript比之前学的HTML和CSS要复杂，但小新觉得这是个很好的挑战机会。他相信通过编写JavaScript代码，不仅能实现酷炫的效果，更能锻炼自己分析问题、解决问题的能力。为此，他认真制定了分步计划：先设计好网站首页的整体框架、学习JavaScript基础知识、研究轮播图的实现原理、逐步添加自动播放和手动控制功能、最终完成一个完整的动态轮播图。任务1Javascript基础语法任务实施1.JavaScript核心特性解释性语言：代码运行时逐行解释执行，无需预编译弱类型特性：变量类型灵活可变，赋值时自动转换数据类型事件驱动机制：通过响应点击/键盘等用户操作触发代码执行跨平台能力：只需浏览器支持即可运行，不依赖操作系统基于对象：支持创建和使用对象进行编程2.代码引入方式内嵌式：在HTML文件中使用<script>标签直接编写代码外部引入：通过<scriptsrc="文件.js">引入独立JS文件执行位置：可放置在<head>或<body>中的任意位置3.变量与常量变量声明：let声明块级作用域变量var声明函数作用域变量（存在变量提升问题）常量声明：const声明不可重新赋值的常量必须在声明时初始化标识符规则：由字母/数字/下划线/$组成首字符不能是数字区分大小写不使用关键字保留字四、数据类型体系基本类型：Number（含NaN/Infinity特殊值）、String（单/双引号表示）、Boolean（true/false）、Null（空对象指针）、Undefined（未初始化）、Symbol（唯一值标识）对象类型：Object（属性集合）、Array（有序数据集）、Function（可执行代码块）五、运算符系统算术运算符：+-*/%++--赋值运算符：=+=-=*=/=%=关系运算符：=====!=><>=<=逻辑运算符：&&||!特殊行为：+可作加法或字符串连接不同类型运算时自动类型转换6.流程控制结构选择结构：if分支：单条件判断if...else：双分支选择if...elseif：多条件分支switch：多值匹配选择循环结构：for：已知循环次数while：条件满足时循环do...while：至少执行一次跳转语句：break：终止循环/switchcontinue：跳过当前循环7.DOM操作基础文档对象模型：树形结构表示HTML文档节点类型：文档节点（Document）、元素节点（Element）、文本节点（Text）、属性节点（Attribute）核心功能：访问元素：getElementById等、修改内容：innerHTML/textContent、改变样式：style属性操作、事件响应：添加事件监听器。2.师生活动：教师提供项目模板，指导文档规范要求。学生完善项目文档，进行版本管理。。3.教学方法：采用标准化教学法，培养职业规范意识。任务2制作首页轮播图1.任务描述为非遗网站的首页添加一个轮播图，网页效果如图所示。2.任务准备了解JavaScript语言3.任务实施1.主要内容：(1）创建网页文件。打开HBuilderX，创建一个新的网页文件，并保存在对应站点目录下(2)准备好3到5张图片，图片的尺寸尽量保持一致。在页面上放置一个固定尺寸的层元素作为窗口，窗口的尺寸和图片的尺寸