《H5网页设计》课程标准.docx

H5网页设计课程标准一、课程定位HTML5开发及商务网站建设是大数据技术与应用专业的专业学习领域课。该课程实现Web程序开发知识、方法及工具，着重介绍在Web开发过程用到的HTML5基础知识，用于美化Web页面的样式表知识。是一门用途广泛、前景良好的计算机行业课程，是适应计算机大数据技术与应用专业课程的需要。该课程的学习可为后续PHP动态网站设计等课程奠定一定的职业能力基础。二、课程目标通过HTML5开发及商务网站建设课程的学习，使学生具备Web应用开发的基本知识，为学习和掌握专业知识和职业技能打下基础。1.知识目标(1)理解网站的基本概念和HTML5网页编程语言基础；(2)掌握搭建开发环境、网站的搭建(3)掌握HTML5中文字和段落的设置和常用标签；(4)掌握列表标签的使用；(5)掌握超级链接标签的使用；(6)掌握表格标签的设计和使用；(7)掌握框架页面布局；(8)掌握表单的设计；(9)掌握网页中多媒体的应用；(10)掌握层叠样式表CSS3的基本知识；（三）掌握一到多款网页设计软件的运用。2.能力目标(1)能运用HTML5标签设计网页；(2)能使用CSS3设计网页；(3)会网页设计工具设计网页。3.素质目标(1)具有自我学习的能力；(2)具备规范化、标准化的代码编写习惯，一定速度的代码编写能力；（3）养成忠于职守、认真负责、精益求精的敬业精神；（4）具备良好的沟通能力；（5）具备良好的团队合作精神以及自我展示能力。三、课程设计1、设计思想（1）教学内容框架课程按照以能力为本位，紧密围绕在使用HTML5标签，利用CSS3+DIV布局制作网页过程中遇到的实际需要和应该掌握的技术，全面介绍HTML5标签设计网页的内容和技巧。（2）总体设计思路以完整的网页制作工作过程为导向，重构教学内容。根据行业企业发展需要和完成职业岗位实际工作任务所需要的知识、能力素质要求，按照网页设计与制作的过程和学生的学习认知规律，打破原有的功能化知识体系，对教学内容从简单到复杂，从入门到深化进行科学安排，循序渐进的实现教学目标，课程内容与项目开发内容一致，理论与实践一体化，实现学习和工作的深度融合。以职业岗位工作过程为导向，遵循以学生为主体，以教师为主导的教育理念。在教学安排上采取“教师提出任务、教师操作讲解示范、教师巡视指导、教师总结归纳”四个步骤；在学生训练上按照职业素质培养理念，在教学中采取“模仿学习、小组互动学习、网络课程开放学习、项目自主创新”四个阶段，学生除了完成规定的项目制作外，必须自主选择并独立设计制作一个网站项目，以此培养学生的职业技能和职业素养。在教学评价上采取“个人自评、小组点评、教师点评”三个环节。个人自评是学生对个人的作品进行评价；小组点评是组内成员对学生作品进行评价；教师点评是根据学生的作品完成情况和答辩情况进行评价。（3）课程开发和学习情境设计整个学习领域由以下学习情境（课程单元）组成:课程项目任务网页设计项目一网页制作基础知识1. Web的基本概念2. HTML简介3. CSS简介4. 编写软件5. HTML结构项目二“说旅游”专题制作1. HTML文本控制标签2. HTML图像标记项目三“网上花店”专题制作1. CSS基础知识2. CSS3选择器3. CSS高级特性（层叠性、继承性、优先级）3.CSS文本样式项目四“青春树儿童摄影网”专题制作1.CSS盒子模型2 .元素的浮动3 .元素的定位项目五“穿搭速递”专题制作1 .列表标签2 .CSS控制列表样式3 .超链接项目六“千年之恋”专题制作L表格2.表单3. CSS控制表格样式4. CSS控制表单样式项目七“赶快回家网”首页制作1 .JavaScript概述2 .JavaScript语言基础3 .流程控制语句4 .函数项目八“学习类网站建设”首页制作1.对象2.数组3 .BOM与DOM对象4 .事件处理课程开发和学习情境设计，整个学习领域由以下学习情境（课程单元）组成:学习情景1网页制作基础知识学习情景2“说旅游”专题制作学习情景3“网上花店”专题制作学习情景4“青春树儿童摄影网”专题制作学习情景5“穿搭速递”专题制作学习情景6“千年之恋”专题制作学习情景7“赶快回家网”首页制作学习情景8“学习类网站建设”首页制作2、课时分配建议本课程课时为64课时，其中理论教学32课时，实践教学28课时。序号课程单元学习任务及教学要求参考学时学习任务教学要求理论教学实践教学1网页制作基础知识了解Web基本概念网页制作入门工具1 .掌握网页的结构2 .掌握元数据的定义和使用2编写一个简单的网页掌握网页的基本知识22“说旅游”专题制作认识HTMLHTML文本控制标记HTML图像标记L掌握HTML标签及属性2 .掌握HTML文本控制标记3 .掌握HTML图像、音频、视频标记4 .掌握路径4“说旅游”专题制作掌握HTML标签、文本控制标签、图像等标签的运用43“网上花店”专题制作LCSS基础知识2. CSS3选择器3. CSS高级特性（层叠性、继承性、优先级）L掌握CSS命名规则2 .掌握在HTML中引用CSS样式表3 .掌握CSS选择器63.CSS文本样式4.掌握CSS控制文本样式“网上花店”专题制作掌握CSS样式、选择器、控制文本样式的运用44“青春树儿童摄影网”专题制作1.CSS盒子模型2.元素的浮动3.元素的定位1 .掌握盒子模型相关属性2 .掌握元素的类型与转换3 .掌握元素的浮动与定位4“青春树儿童摄影网”专题制作掌握盒子模型、盒子属性、浮动与定位的运用45“穿搭速递”专题制作1 .列表标签2 .CSS控制列表样式3 .超链接1 .掌握有序、无序、定义列表2 .掌握列表的嵌套应用3 .掌握CSS控制列表样式4 .掌握超链接及其相关属性4“穿搭速递”专题制作掌握列表、超链接的运用46“千年之恋”专题制作1.表格2.表单3. CSS控制表格样式4. CSS控制表单样式1 .掌握表格、表单的创建及其属性2 .掌握表单控件3 .掌握CSS样式控制表格样式4 .掌握CSS样式控制表单样式4“千年之恋”专题制作掌握表格、表单的运用27“赶快回家网”首页制作1 .JavaScript概述2 .JavaScript语言基础3 .流程控制语句4 .函数1 .掌握JavaScript的引入方式2 .掌握JaVaSCriPt语言基础3 .掌握流程控制语句4 .掌握函数4“赶快回家网”首页制作掌握JaVaSCriPt语句、函数的应48“学习类网站建设”首页制作1.对象2.数组3.BOM与DOM对象1 .掌握对象、数组2 .掌握BOM与DOM对象3 .掌握事件的处理44.事件处理“学习类网站建设”首页制作掌握对象、数组、事件的应用4合计603、课程单元描述课程单元1课程单元名称网页制作基础知识课时数理论教学实践教学22学习目标知识目标1 .掌握HTML5的基本结构2 .掌握元数据的定义和使用能力目标L能够区分网站和网页、静态网页和动态网页2 .能够编写基本的HTML5网页3 .能够知道网页中出现乱码的原因并解决4 .能够定义网页的元数据素质目标1 .能够在完成任务过程中自觉遵守相关的各项规定，按相应操作规程进行操作，保证操作安全2 .能在任务实施过程中主动学习、新技术、新技能学习内容1.完成典型网站网页赏析；2.网页设计基本知识；3.网页设计流程；4.网页评价基本参考指标。教学方法和建议教学方法：通过“练学思拓”训练模式和项目化教学法实施教学建议：教学一体化教学条件要求1 .课程标准2 .授课计划3 .授课教案4 .教学案例学生已有基础图形处理基础、计算机应用基础教师所需执教能力要求1 .熟悉网站建设和网页制作工具；2 .熟悉网站建设流程和规划。校企双师授课安排建议校内教师授课内容：典型网站网页赏析；网页设计基本知识；网页设计流程；网页评价基本参考指标。企业兼职教师授课内容：典型网站网页赏析，网页结构布局与配色、网站开发流程。课程单元2课程单元名称“说旅游”专题制作课时数理论教学实践教学44学习目标知识目标L理解块级元素和行内元素、相对路径和绝对路径2 .掌握基本的文字排版标签（p、br、hr、hh6）3 .掌握描述文本语义化、结构化元素（上下标等）4 .掌握将字符实体表示特殊的字符5 .掌握在网页中插入图像、音频和视频能力目标L能够运用标签（P、br、pre、hr、hlh6、上下标、div、span）2 .能够使用字符实体表示特殊字符3 .能够插入图像、视频、音频、多媒体文件4 .能够定义媒介分组和标题素质目标1 .具备根据任务需要主动学习的意愿和能力2 .能够在任务完成过程中发现问题、分析问题，并努力解决问题3 .能主动交流、合作，决策并执行学习内容LHTML5的文档结构2 .HTML标签3 .标签的属性4 .HTML文本控制标记5 .HTML图像、音频、视频标记6 .路径教学方法和建议教学方法：通过“练学思拓”训练模式和项目化教学法实施教学建议：教学一体化教学条件要求1.课程标准2 .授课计划3 .授课教案4 .教学案例学生已有基础图形处理基础、计算机应用基础教师所需执教能力要求1 .熟悉网页编辑软件中站点的建立和管理2 .熟悉网页基本元素的使用方法校企双师授课安排建议校内教师授课内容：文本的输入、编辑和格式设置，图片插入和设置，多媒体元素的使用企业兼职教师授课内容：标签的使用课程单元3课程单元名称“网上花店”专题制作课时数理论教学实践教学64学习目标知识目标1 .掌握CSS的基本语法、命名规范2 .掌握在HTML文档中使用CSS的方法（行内样式、内部样式表、链入外部样式表、导入外部样式表）及CSS的优先级层叠性3 .掌握基本选择器（标签、类、ID、通配）、组合选择器（包含、子、相邻、兄弟、分组）、属性、伪类选择器4 .掌握CSS设置文本颜色、字型、大小、大小写、粗细、斜体行高、缩进和对齐方式、字符间距和单词间距、文本修饰样式、阴影、书写模式、首行和首字字母样式能力目标1 .能够在HTML文档中使用CSS样式表2 .能够定义和使用基本选择器、组合选择器、属性选择器、伪类选择器3 .能够使用CSS设置文本颜色、字型、大小、大小写、粗细和斜体、行高、缩进和对齐方式、字符间距和单词间距、文本修饰样式、阴影、书写模式、首行和首字字母等样式素质目标1 .具备根据任务需要主动学习的意愿和能力2 .能够在任务完成过程中发现问题、分析问题，并努力解决问题3.能主动交流、合作，决策并执行学习内容1 .CSS命名规则2 .在HTML中引用CSS样式表3 .选择器4 .CSS控制文本样式教学方法和建议教学方法：通过“练学思拓”训练模式和项目化教学法实施教学建议：教学一体化教学条件要求1 .课程标准2 .授课计划3 .授课教案4 .教学案例学生已有基础图形处理基础、计算机应用基础教师所需执教能力要求1 .熟悉CSS样式完2 .选择器的使用校企双师授课安排建议校内教师授课内容：CSS样式的运用企业兼职教师授课内容：CSS样式的运用课程单元4课程单元名称“青春树儿童摄影网”专题制作课时数理论教学实践教学44学习目标知识目标1 .掌握边框颜色、线形、粗细、内外边距的设置2 .掌握CSS3圆角边距、图像边距和盒子阴影等属性的设置3 .掌握top、bottom、right、Ieft属性配合PoSitiOn属性来定义偏移量的设置4 .掌握CSS元素的定位方法(static、relative、absolute、fixed、sticky)5 .掌握z-index、可见性、溢出、display能力目标1 .能够设置盒子的边框颜色、线形、粗细、内外边距2 .能够使用CSS3的圆角边框、图像边框和盒子阴影等属性3 .能够计算盒子的实际大小、改变盒子大小4 .能够使用CSS属性来定位5 .能够对盒子进行可见性、溢出、显示、浮动、清除进行设置(visibility、overflowdisplay、float>clear)6 .能够对盒子进行堆叠次序的设置素质目标1 .具备根据任务需要主动学习的意愿和能力2 .能够在任务完成过程中发现问题、分析问题，并努力解决问题3 .能主动交流、合作，决策并执行学习内容L认识盒子2 .盒子模型相关属性3 .元素的类型与转换4 .元素的浮动5 .元素的定位教学方法和建议教学方法：通过“练学思拓”训练模式和项目化教学法实施教学建议：教学一体化教学条件要求1 .课程标准2 .授课计划3 .授课教案4 .教学案例学生已有基础图形处理基础、计算机应用基础教师所需执教能力要求1 .熟悉使用CSS美化网页2 .熟悉使用CSS+DIV布局网页校企双师授课安排建议校内教师授课内容：CSS的盒子模型；使用CSS实现DIV的浮动和定位布局;应用DIV+CSS实现首页整体结构布局;使用CSS+DIV制作网页页眉、导航栏、网页主内容区及页脚。企业兼职教师授课内容：使用CSS+DIV制作网页页眉、导航栏、网页主内容区及页脚。课程单元5课程单元名称“穿搭速递”专题制作课时理论实践数教学教学44学习目标知识目标1 .掌握有序列表、无序列表、定义列表2 .掌握列表的项目符号、图像作为项目符号、以及列表符号位置的设置3 .掌握列表项目的复合属性4 .掌握基本的超链接形式（外部链接、内部链接）5 .掌握a标记的属性、EnIail链接、锚记（书签）链接6 .掌握映射、内联框架iframe及其链接的设置7 .掌握在页面中定义基准地址base能力目标1 .能够设置列表的项目符号、使用图像作为项目符号、列表符号的位置、列表项目的复合属性2 .能够创建超链接、外部链接、内部链接、Email链接、锚记（书签）链接3 .能够设置图像映射4 .能够使用内联框架iframe及其链接5 .能够定义基准地址base素质目标1 .具备根据任务需要主动学习的意愿和能力2 .能够在任务完成过程中发现问题、分析问题，并努力解决问题3 .能主动交流、合作，决策并执行学习内容L有序、无序、定义列表2 .列表的嵌套应用3 .CSS控制列表样式4 .超链接教学方法和建议教学方法：通过“练学思拓”训练模式和项目化教学法实施教学建议：教学一体化教学条件要求1.课程标准2.授课计划3.授课教案4.教学案例学生已有基础图形处理基础、计算机应用基础教师所需执教能力要求1 .熟悉使用CSS美化网页2 .熟悉使用CSS+DIV布局网页校企双师授课安排建议校内教师授课内容：CSS的盒子模型；使用CSS实现DlV的浮动和定位布局;应用DIV+CSS实现首页整体结构布局;使用CSS+DIV制作网页页眉、导航栏、网页主内容区及页脚。企业兼职教师授课内容：使用CSS+DIV制作网页页眉、导航栏、网页主内容区及页脚。课程单元6课程单元名称“千年之恋”专题制作课时数理论教学实践教学42学习目标知识目标1 .掌握表格、表单的建立和基本语法结构2 .掌握在单元格中设置插入图像3 .掌握合并单元格（跨列、跨行）4 .掌握表格中嵌套表格5 .掌握对表格进行分组显示6 .掌握文本框和密码框、按钮和单选按钮、复选框、文件域、hidden类型、多行文字框、下拉列表7 .掌握input新增表单的高级元素（Url类型、email类型、时间日期、数字类型、CoIor类型、ficldset控件组）8 .掌握HTML5新增输入类型（email、Ur1、numberrange日期选择器、searchtel、color）9 .掌握HTML5新增属性（autocompleteautofocusdatalist）能力目标L能够创建表格、表单2 .能够设置带图像的单元格3 .能够合并单元格（跨列、跨行）4 .能够对表格进行嵌套5 .能够运用表单的基本元素（input标记、多行文字框textarea下拉列表等）6 .能够在表单中使用input新增的高级元素（Ur1、email、日期和时间、数字、colorfieldset、searchtel类型）7 .能够设置表单的通用属性（autofocus、multiple、placeholderrequiredpattern属性）素质目标1 .具备根据任务需要主动学习的意愿和能力2 .能够在任务完成过程中发现问题、分析问题，并努力解决问题3 .能主动交流、合作，决策并执行学习内容L表格、表单的创建及其属性2. 表单控件3. CSS样式控制表格样式4. CSS样式控制表单样式教学方法和建议教学方法：通过“练学思拓”训练模式和项目化教学法实施教学建议：教学一体化教学条件要求1 .课程标准2 .授课计划3 .授课教案4 .教学案例学生已有基础图形处理基础、计算机应用基础教师所需执教能力要求1 .熟悉使用CSS美化网页2 .熟悉使用CSS+DIV布局网页校企双师授课安排建议校内教师授课内容：CSS的盒子模型；使用CSS实现DIV的浮动和定位布局;应用DIV+CSS实现首页整体结构布局;使用CSS+DIV制作网页页眉、导航栏、网页主内容区及页脚。企业兼职教师授课内容：使用CSS+DIV制作网页页眉、导航栏、网页主内容区及页脚。课程单元7课程单元名称“赶快回家网”专题制作课时理论实践数教学教学44学习目标知识目标1 .掌握JavaScript的引入方式2 .掌握JavaScript语言基础3 .掌握流程控制语句4 .掌握函数能力目标1 .能够在页面中引入方式JavaScript2 .能够运用语言基础知识3 .能够运用流程控制语句4 .能够自定义函数素质目标1 .具备根据任务需要主动学习的意愿和能力2 .能够在任务完成过程中发现问题、分析问题，并努力解决问题3 .能主动交流、合作，决策并执行学习内容1 .JavaScript的引入方式2 .JavaScript语言基础3 .流程控制语句4 .函数教学方法和建议教学方法：通过“练学思拓”训练模式和项目化教学法实施教学建议：教学一体化教学条件要求1.课程标准2 .授课计划3 .授课教案4 .教学案例学生已有基础图形处理基础、计算机应用基础教师所需执教能力要求1 .熟悉使用CSS美化网页2 .熟悉使用CSS+DIV布局网页校企双师授课安排建议校内教师授课内容：CSS的盒子模型；使用CSS实现DlV的浮动和定位布局;应用DIV+CSS实现首页整体结构布局;使用CSS+DIV制作网页页眉、导航栏、网页主内容区及页脚。企业兼职教师授课内容：使用CSS+DIV制作网页页眉、导航栏、网页主内容区及页脚。课程单元8课程单元名称“学习类网站建设”专题制作课时数理论教学实践教学44学习目标知识目标1 .掌握对象2 .掌握数组3 .掌握BOM与DOM对象4 .掌握事件处理能力目标1 .能够运用对象2 .能够运用数组3 .能够运用BOM与DOM对象4 .能够运用事件处理素质目标1 .具备根据任务需要主动学习的意愿和能力2 .能够在任务完成过程中发现问题、分析问题，并努力解决问题3 .能主动交流、合作，决策并执行学习内容L对象2 .数组3 .BOM与DOM对象4 .事件处理教学方法和建议教学方法：通过“练学思拓”训练模式和项目化教学法实施教学建议：教学一体化教学条件要求1 .课程标准2 .授课计划3 .授课教案4 .教学案例学生已有基础图形处理基础、计算机应用基础教师所需执教能力要求1.熟悉使用CSS美化网页2.熟悉使用CSS+DIV布局网页校企双师授课安排建议校内教师授课内容：CSS的盒子模型；使用CSS实现DIV的浮动和定位布局;应用DIV+CSS实现首页整体结构布局;使用CSS+DIV制作网页页眉、导航栏、网页主内容区及页脚。企业兼职教师授课内容：使用CSS+DIV制作网页页眉、导航栏、网页主内容区及页脚。四、课程评价1.课程评价及方式说明本课程的考核应注重过程性评价、成长性评价，注重实际操作能力的考核。建议采用学生自评、互评、教师评价相结合，过程与结果相结合的评价方式，全面客观的评价学生的成长与发展。课程评价考核可以由2个部分构成：第一部分为平时成绩，即学生对老师给出实例的完成情况的记载，一般不布置书面作业，根据制作完成情况给定分数作为平时成绩。第二部分为期末考核成绩，即学生在最后学期考核中的成绩。（考核建议为上机考核）。总评成绩=平时成绩（40%）+期末考核（60%）2.课程考核说明（1）平时成绩包括课堂检查作业、课堂提问、纪律考勤；（2）期末考核是指期末统考或项目考核，主要采用上机方式考核，主要考核学生的对网站网页的规划、设计与制作能力。（3）为了更准确地体现学生掌握知识程度和能力，也可以采用大作业的形式进行期末考核。大作业的内容可以采用真实设计案例或模仿企业实际项目。表1考核标准序号考核项目考核内容成绩比例觥）1过程考核考勤有无迟到早退现象等102课堂提问根据课程内容随机抽问53作业课堂检查考核254总结性考核期末统考、项目考核、大作业60合计100表2总结性考核标准序号考核项目考核内容成绩比例(%)1自选主题，规划、设计与制作一个真实的网站网页结构布局、网页配色、网页特效使用、设置网页栏目及栏目网页内容；网页制作技术是否合理使用了CSS、模板等100合计100表3技能考核点序号考核内容考核方式考核内容成绩比例(%)1平时考核平时出勤、课堂实训态度102基本技能考核设计操作根据学生完成质量进行成绩评定30课堂提问能够较为准确地回答设计中的专业技术问题3综合设计操作根据学生完成情况进行考核40考核完成质量根据学生的完成质量(符合设计规范、体现设计要求等)20合计100五、实施建议I.授课资料编写建议授课资料是实现教学目标的重要载体，必须依据本课程标准以及网页设计与制作员、网站管理员、网站编辑员的职业岗位的要求为主线编写授课计划、教案和教学案例；教学参考书与实训指导书的编写应当充分考虑工学结合的需求，坚持理论够用，强调知识传授的趣味性。本课程经过多年的建设，已积累丰富的教学和学习资源，具有学习领域课程大纲、PPT课件、教学视频、教学案例、习题、学习指南以及网络学习空间平台等相关教学资源满足网络课程教学需要。教师和学生都应重视该精品开放课程的资源的使用。2.教学方法建议在教学过程中根据项目开发的需要灵活穿插角色分工、项目任务教学、案例教学、小组工作等多种教学方法。教学过程注重行为引导和任务驱动。(1)项目教学法教学内容紧紧围绕职业岗位进行选取和重新序化，课程内容的教学载体是一个真实的项目，教学内容均以真实项目中的典型任务驱动教学和实训。采用“项目教学法”，充分调动学生学习积极性，培养学生的学习兴趣。(2)案例教学法每一教学单元要完成一个典型的工作任务，在“行为引导”教学法的“演示模仿”的环节中还运用了“案例教学法”，即教师首先对要讲述的案例进行分析，并通过示范完成案例，然后学生模仿完成案例。(3)小组工作法每3名学生为一组，组成一个团队承担一个任务，团队成员分工协作，共同完成任务,学生评价与团队其他成员表现密切相关。这样很好地培养了学生的团队精神和沟通能力。六、教材及其它教学资源教材，使用教材：CSS+DIV网页设计与制作，梁小芳主编，清华大学出版社，2015.2参考书目：1 .HTML5+CSS3网页设计与制作案例教程，姬莉霞、李学相主编，清华大学出版社,2017.12 .HTML5+CSS3+JavaScript网页设计实战，常新峰、王金柱编著，清华大学出版社，2018.13 .HTML5+CSS3+JavaScript从入门到精通，未来科技编著，中国水利水电出版社,2017.84 .HTML+CSS+JavaScript基础教程，莫振杰主编，人民邮电出版社，2017.9