Web前端开发技术项目教程（HTML5 CSS3 JavaScript）（微课版）-课程标准、课程整体设计 高莺

《Web前端开发技术》课程标准一、课程定位《前端技术开发》课程是所有计算机相关专业的专业基础课程。本课程用于培养学生具有网页设计制作，网站管理与维护等岗位需求的综合职业素质和职业技能，为学生学习《HTML5应用开发》、《PHP程序设计基础》、《JavaWeb应用开发》等后续职业课程打下基础。二、课程目标依据岗位工作需要结合专业人才培养需要，科学合理确定课程培养目标，明确学生的知识、能力和素质要求的基本要求。着力培养学生的创新精神和实践能力，增强学生的职业适应能力和可持续发展能力。为落实立德树人这一根本任务，课程教学要充分考虑课程思政和劳动教育，建议将思政教育目标和劳育目标单列，或者融入素质目标。找准切入点，包括爱国主义精神、团队精神、工匠精神等，把课程教学和思想政治教育很好地结合起来，在潜移默化中实现“三全育人”。本课程以对计算机网页设计制作、网站管理与维护人才的能力需求为导向，针对高职学生的认知特点，以企业典型产品项目或学生创新项目为载体。每个项目采用以学生为中心、基于工作过程的项目驱动式教学方法，项目蕴含的核心技能用若干生动、直观的案例进行导入。形成从简单到复杂的系统化教学项目，突出学生的教学主体作用，重视职业能力的培养，充分体现课程教学的职业性、实践性和开放性。让学生在循环进行项目过程中培养网页设计制作的综合职业技能和职业素质。课程具体目标为：1.知识目标（1）了解网页与网站的概念，静态网站与动态网站的概念，网站的分类。（2）了解HTML语言的结构、格式、标记及相关属性。（3）了解需求分析的概念与内容，网站结构知识，网站的开发流程。（4）了解网页设计的基本原则，网页版面布局要求。（5）知道文件与文件夹的命名规则，Dreamweaver工具的工作界面，“文件”面板使用方法。（6）知道站点的创建方法，站点的管理方法。（7）认识标题、段落等创建文本的标记。（8）认识图片、超链接等网页常用标记及属性。（9）认识表格结构化标记，表格样式的属性设置。（10）认识表单及表单控件标记及属性。（11）认识文档流，块级元素和行内元素；（12）了解DIV标记的用法；（13）认识盒子模型中的4个要素；（14）知道CSS属性display的设置；（15）学会float属性的设置；（16）学会position属性的设置；（17）知道HTML5音频和视频的用法；（18）了解常用列表标记，学会使用列表CSS样式设置；（19）JavaScript的基本语法；（20）JavaScriptDOM和HTMLDOM事件和对象。2.能力目标（1）会手工编写HTML代码。（2）掌握规划网站结构，建立站点与管理站点的能力。（3）熟练掌握利用表格进行页面布局的能力。（4）掌握编辑文本与图像的能力。（5）熟练掌握创建网页超链接的能力。（6）熟练掌握使用表单进行用户交互的能力。（7）熟练掌握使用CSS+DIV进行页面布局的能力；（8）掌握插入动画、视频等控件对象的能力；（9）掌握制作交互页面和框架页面的能力；（10）掌握使用JavaScript创建页面特效的能力；（11）掌握网站测试与发布的能力；3.素质目标（1）具有一定策划能力；（2）具有一定想象力；（3）具有色彩感悟能力；（4）具有结构布局能力；（5）提高学生走向社会发展所需要综合职业技能和职业素质；（6）培养学生良好的职业认同感与职业价值观，提高团队协作意识；4.思政目标/劳育目标/美育目标（1）培养学生具备自主学习能力和主动学习意识；（2）培养耐心细致的职业素养；（3）培养精益求精的工匠精神；（4）培养学生具有健康的生活习惯、积极人生态度、正确的人生观；（5）培养学生高度的社会责任感和国家认同感；（6）培养学生具备坚定的理想信念。三、课程内容组织1.课程设计理念从网页设计与制作的实际需要出发，全面、系统地介绍网页设计与制作的相关知识，并配合大量典型案例，加强对学生实际操作与应用能力的培养。以对计算机网页设计制作、网站管理与维护人才的能力需求为导向，针对高职学生的认知特点，以企业典型案例为载体。形成从简单案例到复杂案例的系统化教学，突出学生的教学主体作用，重视职业能力的培养，充分体现课程教学的职业性、实践性和开放性。让学生在递进式案例教学过程中培养网页设计制作的综合职业技能和职业素质。以职业素养为依托、以学生为主体、以技能培养为主线，用好课堂教学这个主渠道，把思想政治教育融入到各类课程的教学中，形成协同效应，开展面向新一代前端相关技术的教学、课程研发、人才培养和技术服务。科学的把思想政治教育融入课程教学的各环节、各方面，以“隐性思政”的功用，与专业课程一道，使思想政治教育的因子融入课程之中，赋予思想政治教育以鲜活的生命力，同时丰富专业课自身内涵，挖掘其育人价值，拓展其教育教学功能。由此，课程思政的实施需基于系统思维，借助有效的科学设计，统筹各种资源，调动多方面的积极性，真正推动这一工程卓有成效地开展。（1）遵循规律，实现思想政治教育与课程的有机融合。（2）找准“契合点”，建立思想政治教育与课程之间的“生成性”关系。（3）重点突出，在“深”字上做足功夫。思想政治教育内容不可能在课程的全部知识点中都能得到全面体现，应该基于“契合点”突出思想政治教育的重点，以教育的“深入”、“深刻”为突破点。（4）科学规划，凸显循序渐进特征。综合考虑学段、学生身心发展特征、学科专业特征、课程进度及延展性等因素，对设计的思想政治教育内容信息合理设定，做到既紧贴课程，又科学有序。（5）注重系统设计，保证有效性。教学内容与评价制度（标准）、教材开发等方面周祥考虑，并保持同步性和一致性。（6）多维度培养。注重知识能力和情感态度价值观的不同维度的培养，由浅入深、由知到行，由知识掌握到内生情感态度价值观。图1课程设计理念2.课程实施思路本课程遵循“学生主体，教师主导”的教学理念，采用线上线下混合式教学模式，引入企业真实的网页设计与制作案例，激发学生的学习兴趣。基于汽车维修企业岗位工作流程，设计了“课前启化、课中内化、课后转化”三个阶段和“知、引、析、探、仿、练、拓”七个环节的教学过程，并在授课中将Web前端开发1+X证书制度和职业资格证书内容加以渗透。同时将思想政治教育和岗位技能积累有机统一，推进“三全育人”，打造“守初心、铸匠魂、强技能”的高效课堂教学模式。图2课程实施思路表1课程内容组织表序号学习模块学习单元知识技能点1项目一创建非遗项目站点—网页开发入门任务一：搭建站点开发环境知识点：网页与网站概述、浏览器的兼容性问题、网页的组成HTML、CSS、JS三者之间的关系、HTML5和CSS3的新特性技能点：使用HB创建站点任务二：创建非遗项目站点知识点：HTML文档基本结构、标记和属性的定义技能点：编写第一个网页2项目二制作非遗机构介绍和详情页面—创建网页元素任务一：创建文本元素—非遗专业机构详情页面知识点：HTML文本元素介绍、文本修饰标记介绍技能点：特殊字符的应用、文本修饰标记的使用任务二：创建超链接—情页面增加相关阅读内容知识点：超链接元素技能点：超链接的应用任务三：插入图片—非遗机构介绍页面知识点：图片标记和属性介绍、相对路径与绝对路径技能点：插入图片、相对路径的设置3项目三作非遗名录页面—表格应用—表格应用任务一：创建表格—非遗名录清单表格知识点：表格结构与常用标记、表格宽度和高度、网页上表示颜色的方式、表格边距与填充、表格中的对齐方式、表格背景和边框颜色属性技能点：创建表格基本结构、width属性和height属性的设置、cellpadding属性和cellspacing属性的设置、align属性设置任务二表格结构化标记—非遗名录清单表格知识点：表格结构化标记技能点：使用结构化标记优化表格结构任务三表格页面布局—非遗名录页面知识点：表格跨行与跨列操作、表格嵌套技能点：合并单元格的应用、表格布局4项目四遗登录注册页面的制作—H5表单任务一制作非遗登录页面—创建表单知识点：表单的概念、文本框与密码框、按钮技能点：用户登录任务二添加表单控件—制作注册页面知识点：单选框与复选框控件、日期控件、下拉框控件、其它控件技能点：单选框与复选框的使用、下拉框的使用、用户注册任务三设置属性—完成表单数据验证知识点：数据验证、正则表达式技能点：数据验证5项目五：制作非遗活动详情页面—CSS基础任务一：CSS字体样式—美化非遗活动详情页面头部区域知识点：CSS样式表的概念及基本语法、CSS基本选择器、常见复合选择器、CSS的四种引入方式、字体样式属性、文本对齐方式属性技能点：三种基本选择器的使用、三种复合选择器的使用、如何选择合适的CSS引入方式、CSS字体样式设置、文本对齐设置任务二：文本精细排版—美化非遗活动详情页面正文区域知识点：文本缩进属性、设置行高属性、文本修饰属性、字间距与词间距属性技能点：段落文本缩进设置、调整文本行高、超链接样式设置、字间距与词间距设置任务三：实现非遗活动详情页面知识点：创建列表、溢出属性技能点：嵌套列表的应用、列表样式属性的使用、文本溢出应用6项目六：制作非遗项目申报指南页面—CSS高级应用任务一：创建列表—制作非遗项目申报指南区域知识点：设置透明的几种方法技能点：设置透明的几种方法任务二：边框样式设置—制作非遗项目文件下载区域知识点：边框属性、CSS3新增边框样式属性、CSS3属性图片边框属性技能点：边框样式设置、CSS3边框应用任务三：列表应用—制作与美化水平导航栏知识点：设置宽度和高度属性技能点：设置网页元素的宽度和高度任务四：背景样式设置—整合美化非遗项目申报指南页面知识点：背景设置、CSS3背景属性技能点：背景图片设置、CSS3背景图片设置7项目七：制作精彩非遗资讯页面—网页布局任务一：盒子模型—搭建资讯页面整体布局知识点：文档流与层的概念、元素显示方式、盒子模型、填充与边距技能点：块级与行内元素、display属性的使用、网页元素居中显示任务二：元素浮动—制作资讯推介区域知识点：元素浮动、清除浮动技能点：图文左右排版、图文上下排版、魔方任务三：元素定位—制作资讯页面专题报道区域知识点：元素绝对定位、元素相对定位、z-index空间位置技能点：元素定位应用8项目八：非遗首页的制作—Javascript基础任务一：轮播图结构知识点：变量和常量、分支和循环、函数和DOM技能点：元素定位应用、轮播图结构任务二：定时切换知识点：定时器技能点：倒计时、读取和修改元素属性、定时切换任务三：手动切换知识点：事件监听技能点：手动切换任务四：网站首页整合技能点：首页制作与整合四、教学方法建议(1)模块式教学法：解构项目工作，分解职业技能要素，重构教学内容模块，以工作岗位的项目为主线实施教学，打破传统的知识章节模式。(2)案例教学法：通过全工程过程案例，分析、讲解，渗透本课程知识点和技能点，结合模块式教学方法组织教学过程。(3)项目分组法：对于一个庞大、复杂的工程项目包含的知识和技能可能不是一门课程的内容，同时在项目中有一门课的多项内容，通过分组分解课程和内容，不同的组轮流完成不同的部分。(4)归纳法：对各组所做的项目，进行归纳总结，归纳知识点和技能点。五、教学实施条件1.学生学习基础本课程是计算机相关专业的基础课程，要求学生具备基本的信息技术素养，包括独立的学习能力、基本的技术使用能力、信息处理和分析能力，能够熟练地使用信息系统和技术工具。2.师资团队要求本课程的主讲教师要求不仅具有比较深厚的前端开发的理论基础和项目经验，而且能够有针对性地开展教育教学活动，具有强烈的奉献精神和为学生服务的意识，具有现代职业教育以职业活动为导向、突出能力目标的先进理念。本课程的主将教师要求具有与实际企业项目保持技术同步的能力，能了解最新的行业发展，并且把实用的技术融合进教学活动中。本课程的教学团队要求经常交流教学经验，探讨教学改革的有效方法。在教学团队建设中，要强化培训，尤其要加强对教师的职业教育教学能力培训。采取集中培训和个人钻研相结合，提高教师素质。不断完善教师科研和教学相促进的激励机制，形成有利于教师队伍良性发展的长效机制。3.实践教学条件要求设备、场地：一体化教室，相应的软件与教学资源，每台学生机安装Hbuilder开发软件、chrome浏览器、Windows7或Windows10操作系统。4.教学资源基本要求依据目前企业的真实需求进行讲解，充分体现项目（或案例）驱动的课程设计思想。教材应以理论联系实际为标准，每个项目应包含理论内容与相关实验。每个项目（或案例）的编写建议采用“任务布置－教学重点难点－知识技能－操作步骤－技能拓展－实训小结”的形式组织，所有的任务应难易适中，具有较强的可操作性。教材表达必须精炼、准确、科学；教材应图文并茂，描述主要的项目场景，提高学生的学习兴趣。（1）教材选用与编写依据目前企业的真实需求进行讲解，充分体现项目（或案例）驱动的课程设计思想。教材应以理论联系实际为标准，每个项目应包含理论内容与相关实验。每个项目（或案例）的编写建议采用“任务布置－教学重点难点－知识技能－操作步骤－技能拓展－实训小结”的形式组织，所有的任务应难易适中，具有较强的可操作性。教材表达必须精炼、准确、科学；教材应图文并茂，描述主要的项目场景，提高学生的学习兴趣。本课程选用如下规划教材。（2）课程资源的利用注重实验实训指导书和实验实训教材的开发和应用加强常用课程资源的开发，建立多媒体课程资源的数据库，努力实现跨学校多媒体资源的共享，以提高课程资源利用效率。积极开发和利用网络课程资源，充分利用诸如课程网站、电子书籍、电子期刊、数据库、数字图书馆、教育网站和电子论坛等网上信息资源，使教学从单一媒体向多种媒体转变；教学活动从信息的单向传递向双向交换转变；学生单独学习向合作学习转变。同时应积极创造条件搭建远程教学平台，扩大课程资源的交互空间。校企合作开发实验实训课程资源，充分利用本行业典型的企业的资源，进行产学合作，建立实习实训基地，进行“工学”交替，满足学生的实习实训要求，同时为学生的就业创造机会。六、考核方法1.考核总体要求注重结合当前教学模式的转变重新设置考核方式，注重过程性考核，注重线上学习评价，注重实践教学评价。要具体、可操作性强。2.考核标准线上学习考核：占30%。主要是在线课程学习成绩，包括在线课程参与度、在线课程随堂测验、在线课程单元测试以及在线课程在线考试成绩：线上学习考核=学生在线平台参与度40%+在线学习得分60%，其中：在线学习得分=作业10%+随堂检测20%+考试30%。平时考核：20%。主要包括考勤、学生平时课堂表现、实验学习效果等方面。期末考核：50%。通过闭卷考试评定学生理论成绩。七、其他说明建议64学时，参考资料：1.w3school网站——HTML、CSS、JavaScript工具书2.Bootstrap——热门的前端开发框架《Web前端开发技术》课程整体教学设计一、课程设计思路1.课程设计理念从网页设计与制作的实际需要出发，全面、系统地介绍网页设计与制作的相关知识，并配合大量典型案例，加强对学生实际操作与应用能力的培养。以对计算机网页设计制作、网站管理与维护人才的能力需求为导向，针对高职学生的认知特点，以企业典型案例为载体。形成从简单案例到复杂案例的系统化教学，突出学生的教学主体作用，重视职业能力的培养，充分体现课程教学的职业性、实践性和开放性。让学生在递进式案例教学过程中培养网页设计制作的综合职业技能和职业素质。以职业素养为依托、以学生为主体、以技能培养为主线，用好课堂教学这个主渠道，把思想政治教育融入到各类课程的教学中，形成协同效应，开展面向新一代前端相关技术的教学、课程研发、人才培养和技术服务。科学的把思想政治教育融入课程教学的各环节、各方面，以“隐性思政”的功用，与专业课程一道，使思想政治教育的因子融入课程之中，赋予思想政治教育以鲜活的生命力，同时丰富专业课自身内涵，挖掘其育人价值，拓展其教育教学功能。由此，课程思政的实施需基于系统思维，借助有效的科学设计，统筹各种资源，调动多方面的积极性，真正推动这一工程卓有成效地开展。（1）遵循规律，实现思想政治教育与课程的有机融合。（2）找准“契合点”，建立思想政治教育与课程之间的“生成性”关系。（3）重点突出，在“深”字上做足功夫。思想政治教育内容不可能在课程的全部知识点中都能得到全面体现，应该基于“契合点”突出思想政治教育的重点，以教育的“深入”、“深刻”为突破点。（4）科学规划，凸显循序渐进特征。综合考虑学段、学生身心发展特征、学科专业特征、课程进度及延展性等因素，对设计的思想政治教育内容信息合理设定，做到既紧贴课程，又科学有序。（5）注重系统设计，保证有效性。教学内容与评价制度（标准）、教材开发等方面周祥考虑，并保持同步性和一致性。（6）多维度培养。注重知识能力和情感态度价值观的不同维度的培养，由浅入深、由知到行，由知识掌握到内生情感态度价值观。图1课程设计理念二、课程整体设计表1：岗位工作任务—学习情境分析表工作岗位典型任务学习情境前端开发工程师（初级/中级）1.实现静态Web页面的制作。2.使用HTML、CSS、JavaScript等前端技术栈进行开发。3.与UI设计师、后端工程师等团队成员紧密合作，确保项目的顺利进行。1.基础知识学习HTML/CSS：学习HTML的结构和语义，CSS的布局和样式。JavaScript：掌握JavaScript的基本语法、数据类型、函数、条件语句和循环等。工具：了解常用的前端开发工具，如代码编辑器（如Hbuilder）等。2.实践项目静态网页制作：从简单的静态网页开始，逐步增加难度，如制作一个个人网站或博客。交互式网页：使用JavaScript实现简单的交互功能，如轮播图、表单验证等。前端UI工程师1.前端页面的UI设计和实现。2.与UI设计师紧密合作，将设计稿转化为高质量的前端页面。3.关注用户体验和交互效果，提升页面的可用性和美观性1.基础知识学习HTML/CSS：掌握HTML的基本结构、语义化标签和CSS的布局、样式设计。JavaScript：了解JavaScript的基本语法、数据类型、函数以及DOM操作。设计基础知识：学习UI设计的基本原则，如留白(whitespace)、对齐(alignment)、对比度(contrast)、比例(scale)、排版(typography)、颜色(color)和视觉层次(visualhierarchy)。实践项目：静态网页制作：从简单的个人网站或博客开始，注重页面的布局和样式设计。基本交互实现：使用JavaScript为网页添加简单的交互效果，如按钮点击、表单验证等。表2：教学内容组织设计表序号学习模块学习单元教学目标教学方式建议学时1项目一创建非遗项目站点—网页开发入门任务一：搭建站点开发环境1.能够认识网页和网站的区别2.能够理解HTML、CSS、JS三者的作用和扮演的角色3.能够认识HTML5和CSS34.能够创建站点5.熟练掌握网页文档基本结构。6.熟练掌握HTML标记和属性7.能够编写网页。线下：汇报讨论、现场教学、案例分析、机房实践线上：实训任务、作业测验、分组测验、论坛互动24任务二：创建非遗项目站点22项目二制作非遗机构介绍和详情页面—创建网页元素任务一：创建文本元素—非遗专业机构详情页面1. 掌握标题的创建。2. 掌握段落元素的创建。3. 掌握超链接的创建以及属性设置。4. 能够正确插入图片。5. 能够学会相对路径的设置。线下：汇报讨论、现场教学、案例分析、机房实践线上：实训任务、作业测验、分组测验、论坛互动26任务二：创建超链接—情页面增加相关阅读内容2任务三：插入图片—非遗机构介绍页面23项目三制作非遗名录页面—表格应用—表格应用任务一：创建表格—非遗名录清单表格1. 掌握表格的创建。2. 掌握表格属性的设置。3. 掌握表格跨行跨列操作。4. 能够使用表格嵌套进行网页布局。线下：汇报讨论、现场教学、案例分析、机房实践线上：实训任务、作业测验、分组测验、论坛互动25任务二表格结构化标记—非遗名录清单表格1任务三表格页面布局—非遗名录页面24项目四遗登录注册页面的制作—H5表单任务一制作非遗登录页面—创建表单1.理解表单的基本结构。2.掌握表单控件的类型和属性。3.掌握HTML5的内置验证功能，以及使用正则表达式进行更复杂的验证。4.掌握表单的提交方式。线下：汇报讨论、现场教学、案例分析、机房实践线上：实训任务、作业测验、分组测验、论坛互动26任务二添加表单控件—制作注册页面2任务三设置属性—完成表单数据验证25项目五：制作非遗活动详情页面—CSS基础任务一：CSS字体样式—美化非遗活动详情页面头部区域1.掌握CSS基本语法，学会写CSS语句。2.能够在网页中正确引入CSS代码