《网页设计与制作（HTML5+CSS3）立体化项目教程》 课程标准

《网页设计与制作》课程标准课程类型理论+实践课课程性质专业必修课学时及学分64学时/4学分适用专业（群）信息技术大类编制人周礼萍二〇二四年六月《网页设计与制作》课程标准课程名称：网页设计与制作课程代码：\o"点击显示单个教学任务具体安排"220110090课程类型：专业课学分：4计划学时：64实践课时：64主要授课方式：理实一体化考核方式：考查适用专业：软件技术、大数据应用技术、计算机应用技术先修课程：信息技术企业参与人员及单位名称：何自林，成都双禾科技发展有限公司1.概述1.1课程性质《网页设计与制作》是信息技术大类专业群平台课程，可作为计算机类专业的专业必修课，也可作为电子商务专业的专业选修课。培养可从事Web前端工程师、网站开发工程师、网页美工、网站编辑、网站规划与设计等工作的应用型、创新型、复合型高素质技术技能人才。通过学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。1.2课程设计理念课程设计理念：高职教育的集中实践教学环节需明确必要的理论知识的升华与知识层面的拓展，不能局限于单纯的技能训练。单纯的技能训练不是提高高等职业教育的理想课程。以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念。课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以任务实训为手段，设计出理论学习与技能掌握相融合的课程内容体系。教学整体设计“以职业技能培养为目标，以任务实现为载体、理论学习与实际操作相结合”。1.3课程开发思路网站日益成为信息内容生产传播的重要渠道，兼具社会属性和公共属性，在坚持正确价值取向、保障网络内容安全、维护网民合法权益等方面，具有不可替代的地位和作用。要求从业人员不仅要有扎实的专业知识，还要具备较强的职业素养、责任意识和法治意识。教学内容包括HTML、CSS3、跨平台移动Web应用等，课程采用“情境引入+任务驱动+理论讲解+项目实践”的教学方法，通过预设情境将项目导入、分析、实践来讲解和强化知识点，引导学生在“学中做”、“做中学”，把价值观的形成、基础知识的学习以及基本技能的培养和提高进行有机的结合。2.课程目标依据《职业技能等级标准Web前端开发》、《1+XWeb前端开发职业技能等级中级证书标准》与《软件技术专业人才培养方案》，本课程主要培养Web前端开发工作的应用型、创新型、复合型高素质技术技能人才，要求学生掌握Web前端开发岗位技能、具备利用HTML5和CSS3进行应用开发的能力。通过课程学习,教育引导学生用发展的眼光看世界,用创新思维来适应社会的发展，激励学生勇于开拓，致力于Web前端技术的创新发展，同时激发学生的民族自豪感和社会责任心。在培养学生核心岗位技能的同时，培养学生追求卓越、精益求精的工匠精神，实现“基础扎实、敢于创造、实事求是、勤勉敬业”的课程育人目标。能力描述知识目标职业技能目标职业素养目标思政教育目标专业能力掌握HTML+HTML5+CSS+CSS3的基本语法及应用，能够根据用户需求设计出各种的网页布局页面，进行网站主页面设计和内页设计。掌握网站开发流程，能应用HTML+HTML5+CSS+CSS3制作不同布局的页面，掌握基本的色彩知识和配色原理，能使用PS设计网页图片素材等。培养自主学习能力、终身学习意识、团队协作精神、精益求精的工作作风和工匠精神等。了解网络安全的法律法规，通过网页案例制作，助力乡村振兴、弘扬中华优秀传统文化，了解专业学科发展、生态环境保护，培养文化自信、专业自信，树立环保意识，增强社会责任感和使命感。社会能力培养自主学习能力、良好的学习习惯和终身学习的意识。培养良好的规范意识和创新精神。提升人文素养和审美能力等。培养工匠精神、精益求精之敬业精神。方法能力培养学生发现问题、分析问题和解决问题的能力。能主动接受新知识、新技术更新变化并学习。具备良好的沟通表达和合作能力。树立网页是传播社会正能量工具的意识。3.课程结构与内容学习模块知识模块技能要求和能力培养学时安排模块一Web前端开发基础知识1.网页的相关术语、Web标准2.网页的基本组成元素3.常见Web开发工具4.创建本地站点和管理本地站点5.网站建设的基本流程1.掌握网页设计的概念与开发流程2.学会安装使用网页常见的开发工具3.能使用开发工具创建站点文件夹4.能设计绘制网页草图4模块二网页中的图文展示1.HTML5文档结构2.标签的分类和关系3.常见的文字标签4.常见的文本格式化标签1.掌握HTML5基本结构2.认识标签3.掌握常用文字标签、文本格式标签21.注释标签2.常见转义符3.图像标签4.音频标签5.视频标签6.路径7.网页中相对单位1.学会使用注释和转义符，养成注释的开发习惯（职业素养）2.能正确的运用相对路径插入多媒体3.认识到网页中的知识产权的应用（职业素养）4.培养网页是弘扬正能量的地方（素质目标）5.熟练使用相对路径6.认识网页中常见单位2拓展训练（可选）1.巩固前期所学知识2.培养学生的创新能力（2）模块三网页中超链接的应用1.超链接的概念2.超链接标签3.超链接的分类4.传统布局标签5.结构语义化标签1.知道什么是超链接2.掌握链接标签不同属性和属性值的使用3.熟练使用链接标签实现页面与页面之间的跳转4.用中国传统节日为案例，弘扬优秀的传统文化（素质目标）5.掌握传统布局标签div和span的特点6.能运用结构标签对页面结构进行划分21.锚点的概念2.锚点链接的使用方法1.熟练掌握链接和锚点链接的使用2.掌握锚点的运用场景2拓展训练（可选）1.巩固前期所学知识2.培养学生的创新能力（2）模块四网页中列表的应用1.无序列表2.有序列表3.HTML5页面交互标签1.了解列表的样式类型2.掌握新闻列表的制作方法3.掌握清除和修改列表样式的方法4.会使用页面交互标签details、summary、progress、meter21.定义列表2.列表的嵌套3.开发者工具的使用1.能运用列表标签进行搭建结构2.会使用浏览器开发者工具查看网页元素2模块五网页中表格的应用1.认识表格2.创建表格3.表格中常见属性4.表格结构划分标签1.掌握表格标签的语法和属性2.能够设置网页边框、单元格的内外边距设置3.能够对表格结构进行划分21.表格中的合并单元格2.表格嵌套1.能够对表格单元格进行合并2.能用表格对网页进行布局2模块六CSS3美化页面1.CSS概述2.CSS书写位置3.CSS样式规则4.CSS代码规范5.CSS基础选择器1.了解CSS的作用，掌握CSS样式规则2.掌握CSS样式表的引入方式，能够在网页中引入CSS样式21.CSS字体样式属性2.CSS文本外观属性3.CSS列表样式属性1.掌握字体样式属性的用法，能够在网页中设置不同的字体样式2.掌握文本外观属性的用法，能够在网页中设置不同的文本样式3.能运用CSS修改列表样式属性21.关系选择器2.属性选择器3.结构化选择器4.状态化伪类选择器5.伪元素选择器掌握CSS各类选择器的用法，并能灵活应用设置网页样式21.CSS层叠性2.CSS继承性3.CSS优先性1.了解CSS继承性、层叠性的特点，能够运用优化网页结构代码2.掌握CSS优先级的特点，能对优先级排序、根据需求提升权重21.块级元素2.行内元素3.行内块元素4.元素之间的转换5.元素的隐藏掌握元素显示模式，并能实现不同类型元素模式的转换2模块七盒子模型和背景属性的应用1.认识盒模型2.盒子模型的组成3.盒子边框4.内边距5.外边距6.外边距塌陷问题7.box-sizing属性1.熟悉盒子模型的概念，能够说出盒子模型的基本结构2.掌握边框属性的用法，能够为盒子设置不同的边框效果3.掌握边距属性的用法，能够使用内外边距设置盒子的空间距离4.了解盒子宽、高属性，能够计算盒子实际的宽度和高度5.掌握box-sizing属性的用法，能够控制盒子的宽度和高度的范围21.圆角边框2.图像边框3.盒子阴影掌握box-shadow属性的用法，能够为盒子添加阴影效果21.背景颜色2.背景图片3.背景平铺4.背景位置5.背景图像固定/附着6.背景连写7.背景尺寸掌握背景属性的用法，能够为盒子设置不同的背景21.多重背景2.背景渐变3.精灵图1.能运用背景渐变制作优惠券案例2.了解精灵图的原理3.会使用图片工具测量精灵图，在页面正确引入精灵图2模块八网页中常见布局的应用1.浮动的语法2.浮动的特性1.掌握元素的浮动属性2.能够为元素添加浮动21.清除浮动1.能够为元素添加和清除浮动2.至少掌握2种清除浮动的方法21.多列布局掌握网页常见的多列布局21.定位的作用2.定位的组成3.相对定位4.绝对定位1.掌握元素定位属性2.能设置不同定位模式21.固定定位2.粘性定位3.定位叠放次序z-index21.flex布局简介2.flex父项常见属性3.flex子元素常见属性掌握网页常见的弹性盒布局21.网格布局中的基本概念2.grid布局容器属性3.grid-gap属性4.grid-template-areas属性/grid-area属性1.能使用网格系统进行制作常用布局2.能够运用HTML+CSS搭建布局结构2模块九网页中表单的应用1.认识表单2.表单的组成3.表单域4.常见的表单控件5.H5新增部分控件和属性1.了解表单的功能，能够快速创建表单2.清楚表单的组成3.掌握表单相关元素，能够准确定义不同的表单控件4.掌握表单的样式控制，能够美化表单界面5.掌握常见登录、注册页面的制作方法6.掌握用CSS样式修改表单外观的方法4模块十CSS3高级应用1.过渡2.定义动画3.调用动画4.位移1.掌握过渡的各种属性，能够为网页中的元素添加过渡效果2.掌握动画的各种属性，能够为网页中的元素添加动画效果21.缩放2.旋转3.变形1.掌握变形的各种属性2.能够制作2D变形效果3.能对旋转中心点进行设置21.perspective（透视）2.transform-style：preserve-3d（3D呈现）3.translate3d（3D移动）4.rotate3d（3D旋转）5.3D旋转正方向的判断方法：左手法则1.掌握左手法则判断正方向2.清楚3D效果设置属性3.能够制作3D变形效果2机动（含考试）4合计学时644.课程实施与保障本课程每周4课时，教学周共16周，总学时为64学时。教学采用讲练结合的方法，理论教学和操作练习穿插进行。根据专业课程目标和涵盖工作任务要求，确定课程内容和要求，说明学生应获得的知识、技能与态度。本课程的主要任务是培养网页设计、网页美工以及WEB综合开发的初级专业人才。学生能掌握HTML+HTML5+CSS+CSS3语言，并能使用CSS样式美化网页等，初步掌握CSS3特效文字、动画等制作，使用photoshop制作网页动画图片素材等，具有静态网站的设计与制作、网站的发布的能力。4.1课程的重点、难点及解决办法课程重点难点学习单元模块一Web前端开发基础知识课时4知识点掌握程度重点难点1.认识网页网页构成了解网页相关名词了解Web标准熟悉主流浏览器了解2.网站开发前准备VSCode的安装、设置熟悉√VSCode的使用熟悉√创建本地站点和管理本地站点掌握√网站开发的流程了解学习单元模块二网页中的图文展示课时4知识点掌握程度重点难点1.HTML结构和常用标签HTML5的基本结构掌握√HTML5的语法格式熟悉HTML5标签的类型熟悉HTML5标签的属性熟悉HTML5文档头部相关标签熟悉页面格式化标签-标题标签掌握√页面格式化标签-段落标签掌握√页面格式化标签-水平线标签掌握√页面格式化标签-换行标签掌握√文本格式化标签掌握√文本样式标签掌握√2.图像与多媒体标签注释标签掌握特殊字符转义符掌握常用图像格式掌握图像标签及其属性掌握√视频、音频嵌入技术概述了解HTML5支持的视频格式和音频格式了解在HTML5中嵌入视频掌握√在HTML5中嵌入音频掌握√绝对路径和相对路径掌握√☆学习单元模块三网页中超链接的应用课时4知识点掌握程度重点难点超链接和常用布局标签创建超链接熟悉√超链接的分类了解传统布局标签熟悉√☆结构语义化标签掌握√锚点链接掌握学习单元模块四网页中列表的应用课时4知识点掌握程度重点难点列表标签无序列表熟悉√有序列表掌握HTML5页面交互标签了解定义列表了解列表嵌套了解开发者工具的使用掌握√学习单元模块五网页中表格的应用课时4知识点掌握程度重点难点1.表格的创建创建表格熟悉√表格中常见属性掌握√表格结构的划分了解2.合并单元格单元格跨行合并掌握√☆单元格跨列合并掌握√☆表格嵌套了解学习单元模块六CSS3美化页面课时10知识点掌握程度重点难点1.CSS核心基础CSS样式规则掌握√CSS样式表书写位置熟悉√CSS样式表代码规范了解CSS基础选择器-标签选择器掌握√CSS基础选择器-类选择器掌握√CSS基础选择器-id选择器掌握√CSS基础选择器-通配符选择器掌握√CSS基础选择器-交集选择器掌握√CSS基础选择器-并集选择器掌握√CSS基础选择器-后代选择器掌握√2.CSS文本样式美化字体样式属性-font-size:字号掌握√字体样式属性-font-family:字体掌握√字体样式属性-font-weight:字体粗细掌握√字体样式属性-font-style:字体风格掌握√字体样式属性-font:综合设置字体样式掌握√字体样式属性-@font-face规则掌握文本外观属性-color:文本颜色掌握√背景颜色-background-color:背景颜色掌握√文本外观属性-letter-spacing:字间距掌握√文本外观属性-word-spacing:单词间距掌握文本外观属性-line-height:行间距掌握√文本外观属性-text-transform:文本转换掌握√文本外观属性-text-decoration:文本装饰掌握√文本外观属性-text-align:水平对齐方式掌握√文本外观属性-text-indent:首行缩进掌握√文本外观属性-text-shadow:阴影效果掌握√文本外观属性-text-overflow:处理溢出的文本掌握√3.复合选择器关系选择器熟悉√☆属性选择器掌握√结构化选择器掌握√状态化伪类选择器掌握√伪元素选择器掌握√☆4.CSS三大特性层叠性了解继承性了解CSS优先级掌握☆5.元素转换元素的类型了解√元素的转换掌握√元素的隐藏掌握学习单元模块七盒子模型和背景属性的应用课时8知识点掌握程度重点难点1.盒子模型认识盒子模型清楚border-style：边框样式掌握√border-width：边框宽度掌握√border-color：边框颜色掌握√border：综合设置边框掌握√border-radius：圆角边框掌握√border-image：图像边框掌握√内边距属性掌握√☆外边距属性掌握√☆外边距塌陷问题了解外边距合并问题了解box-sizing属性掌握√☆2.元素美化圆角边框了解图像边框了解盒子阴影掌握√☆3.背景设置背景颜色熟悉√☆背景图片熟悉√☆背景平铺掌握√背景位置掌握√背景固定了解背景尺寸掌握√4.背景属性的拓展运用多重背景了解背景渐变了解精灵图了解学习单元模块八网页中常见布局的应用课时14知识点掌握程度重点难点1.浮动浮动语法掌握√浮动的特性了解清除浮动掌握√☆2.多列布局column-count列数掌握√column-gap列间距掌握√column-rule列边框了解column-span是否跨越列了解column-width列宽度了解columns多列复合属性了解3.定位元素的定位属性掌握√静态定位了解相对定位熟悉√☆绝对定位掌握√☆固定定位掌握粘性定位了解z-index层叠等级属性掌握√元素的定位属性掌握√4.弹性盒布局Flex布局简介了解Flex容器常见属性掌握√☆Flex项目常见属性掌握√☆5.网格布局网格布局中的基本概念了解grid布局容器属性掌握√☆grid-gap属性掌握√grid-template-areas属性/grid-area属性掌握√☆学习单元模块九网页中表单的应用课时4知识点掌握程度重点难点表单表单的构成了解创建表单掌握√表单控件掌握√新的input控件类型掌握√新的表单标签掌握新的input控件属性掌握√新的表单属性掌握使用CSS控制表单样式掌握学习单元模块十CSS3高级应用课时6知识点掌握程度重点难点1.过渡与动画transition属性掌握√认识transform了解@keyframes规则掌握√animation-name属性掌握√animation-duration属性掌握√animation-timing-function属性了解animation-delay属性掌握√animation-iteration-count属性了解animation-direction属性了解animation属性掌握√2.2D技术2D变形-位移掌握√2D变形-缩放掌握√2D变形-变形掌握2D变形-旋转掌握3.3D技术3D变形了解为有效达成教学目标，解决教学重点难点，高效执行课堂教学策略，我们建设并充分运用了“323”教学平台和工具，全面整合教学资源，拓展教学时空。借助在线开发工具进行辅助教学，在讲授过程尽量细化，并分解为多个任务，举一反三的练习，在代码演示过程中，每一步的注释都书写详细，要求学生整理成笔记。清楚，教师对讲授内容充分提炼，将复杂的操作录制下来，方便学生反复观看和学习，形象生动的动态展示和讲解。使抽象、难懂的教学内容变得直观、易懂和容易掌握，提高教学效率，便于学生自主学习。“323”教学平台和工具如下图所示︰图4.1“323”教学资源4.2教学方法和教学手段4.2.1教学方法自主学习法：学生通过教学网站上的《网页设计基础》精品课程资源进行线上自主学习知识点内容，完成课前测试、随堂测试和课后测试等，并参与讨论思考题的交流互动、完成单元作业，自行评价并检测学习成效；情景教学法：教师通过小视频或图文话题，引入特定情境，结合知识点案例驱动教学，学生分组完成作品效果的匹配；讨论教学法：学生通过有声思维讨论，进行合作学习，在小组中开展课前任务实施，课中合作，培养学生相互沟通、相互配合、提高思维表达能力，促进主动学习，从而共同达成目标。直观演示法：教师使用在线CSS3动画工具直观演示2D和3D转换以及结合过渡的动画参数设置，帮助学生训练三维立体思维；合作探究法：学生分组“有声思维”后，绘制技能点思维导图，提出案例完成方案。任务驱动法：通过教师布置绘制思维导图任务，学生以小组为单位配合完成，选出代表进行讲解，最后老师进行总结。图4.2.1教学过程4.2.2教学手段根据每个情境教学任务的需要，结合学生的学习特点和基础素质，充分利用课程现有教学资源来设计教学进程、教学方法和手段，具体如下：（1）利用本课程丰富的线上数字化教学资源，改革教学模式，重构教学流程，实施线上线下混合式教学，课前、课中和课后教学安排如图4.2.1所示。（2）根据生态文明建设和课程思政建设的要求，重构线上和线下的教学案例内容，精选案例中使用的文字和图片素材，使能与生态文明建设和课程思政建设的主题相契合线上视频和课堂教学案例中，将国家发展战略乡村振兴、绿色发展、工匠精神的内涵等相关文字和图片为素材融入课堂案例，使思政元素融合到教学全过程。在实战项目训练中，培养学生团队合作、规则和规范意识等职业素养，同时了解学科发展，树立专业自信。（3）根据网页设计的学习特点，设计“线上自主学习-自测自评-线下课堂项目仿真-项目考核”的形成性评价+总结性评价的综合评价方式进行学习评价，结合课程资源平台的统计数据，及时反馈学生的学习进程、学习态度等，对学习全过程实施大数据监督，并实施个性化的指导，实现线上线下全过程的育人模式。4.3教学评价（1）课程考核方式教学评价分为过程性考核（60%）+期末考试（40%）（2）课程考核标准过程性考核（60%）过程性考核包括平时考核分配：课前（20%）+课中活动（40%）+课后（40%）。每次考核成绩按以下比例打分，分值分配以第一次网页概述为例，如表4.3.1所示。综合考核分值分配如4.3.2所示表4.3.1过程性评价评价构成评价要素评价主体分值课前20%课前资料的收集准备教学平台5%调查问卷的参与教学平台5%理论知识的测试教师10%课中40%签到考勤教学平台5%第1节课堂活动知识点提问，回答（10%）网页鉴赏后，小组讨论回答（10%）教师小组互评20%第2节课堂活动开发工具的安装与站点文件的创建（10%）个人博客首页设计图（10%）20%课后40%课后理论题库检测教学平台10%项目拓展教师小组互评20%教学评价反馈教师5%表4.3.2综合性评价过程性考核（60%）期末考核（40%）课前课中课后期末考核线上活动线上测试考勤签到课堂表现活动参与课堂项目线上题库项目拓展教学互动教学评价项目作品作品汇报66312126123%404.4教材选用《网页设计与制作(HTML+CSS+JavaScript)（第3版）》，高等教育出版社，刘万辉编著4.5课程资源的开