审定时间《网页设计与制作HTML5》课程教学大纲.doc

执笔人（课程负责人）执笔时间审阅人（专业负责人）审阅时间审定人（学院负责人）审定时间彭学军2017-07网页设计与制作（HTML5）课程教学大纲课程代码 适用专业 计算机信息管理 课程类型 职业技能课 学 分 数 4 学 时 数 64 第一部分 总 纲一、课程性质、教学目的1课程性质本课程是计算机信息管理专业的职业技能课。课程主要针对行业企业在网络媒体方面的网页设计与制作员、网站开发与管理员岗位。通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。培养学生具有诚实、守信，善于沟通和合作的团队合作能力，为从事网络媒体网页制作工作奠定良好的基础。2教学目的通过本课程的学习，学生可以在网络公司、软件公司、广告公司，企事业单位的制作部、技术部、信息部、网络中心等部门，担任网页设计师、网站编辑、B/S模式软件界面设计师、网站维护员等职务，从事静态网站制作、网站内容制作与维护、动态网站界面设计与制作、B/S模式软件界面设计与制作项目工作。3前导课程与后续课程前导课程： 无后续课程：网络程序设计、移动互联网软件开发、毕业综合实践。二、推荐教材及主要参考资料1. 传智播客高教产品研发部，HTML5+CSS3网页设计基础教程，人民邮电出版社 ，2016年3月。2. 方锦明，网页设计与制作，中国科学技术出版社，2007年1月。3. 郭子明，网页设计与制作技能案例教程，印刷工业出版社，2011年9月。三、大纲执行说明1.总学时64学时，理论32学时，实践32学时；2如无特殊情况，应严格按照教学大纲的时间、内容、课时要求及有关规定执行，如遇特殊情况，可作适当调整。第二部分 理论教学一、教学基本要求通过学习网页设计与制作（HTML5）这门课程，使学生掌握网页设计和制作的基本技能，能够制作企事业单位的静态网站，具备网站的策划、设计和制作能力。具体教学要求如下：1. 熟悉HTML5基本语法，掌握HTML5语法新特性。2. 掌握HTML5相关标记及属性，能够制作简单的网页页面。3. 掌握HTML5结构、分组、页面交互、文本层次语义元素的使用，能够使页面元素实现相应的操作。4. 了解CSS3的发展历史，熟练掌握CSS基础选择器、文本样式属性、优先级、属性选择器、结构化伪类选择器的使用方法，能够在CSS页面文件进行熟练应用。5. 掌握盒子的相关属性及设置方法，能够制作常见的盒子模型效果。6. 理解渐变属性的原理，能够设置渐变背景。7. 熟悉CSS控制列表样式的方式，能够运用背景图像定义列表项目符号。8. 理解元素的浮动，能够为元素设置浮动样式。9. 熟悉清除浮动的方法，可以使用不同方法清除浮动。10. 掌握元素的定位，能够为元素设置常见的定位模式。11. 了解表单功能，能够快速创建表单。12. 掌握表单相关元素，能够准确定义不同的表单控件并能掌握表单样式的控制，能够美化表单界面。13. 熟悉HTML5多媒体特性，了解HTML5支持的音频和视频格式。14. 掌握HTML5中视频、音频的相关属性，能够在HTML5页面中添加视频、音频文件并能够应用到网页制作中。15. 理解过渡属性，能够控制过渡时间、动画快慢等常见过渡效果。16. 掌握CSS3变形属性，能够制作2D转换、3D转换效果。17. 掌握CSS3动画，能够熟练制作网页中常见的动画效果。18. 掌握站点的建立方法，能够建立规范的站点并能够实现简单的CSS3动画效果。二、教学方法与手段在整个课程体系上是采用项目驱动的教学方法，在不同的教学情景上则是采用的任务引领的教学方法。根据课程内容和学生特点，在教学各个环节，灵活运用案例分析、分组设计、角色扮演、启发引导、课堂与实习地点一体化等教学方法，引导学生积极思考、乐于实践，提高教学效果。运用现代教育技术手段进行教学。网页设计与制作课程是一门操作很强的课程，课程组教师坚持全程多媒体投影器演示教学。将真实项目的设计和制作过程直观的演示给学生。三、教学内容的设置与学时数分配表序号教学环节学时教学内容小计讲授实训其他（一）HTML5基本语法22（二）HTML5页面元素及属性44（三）CSS3基本语法22（四）CSS3选择器44（五）CSS盒子模型44（六）元素的浮动和定位44（七）HTML5表单44（八）HTML5多媒体42（九）CSS3高级应用44（十）综合应用22合 计3232四、理论教学内容与要求（一）HTML5基本语法教学内容: 1. HTML5发展历程；2. HTML5浏览器支持情况；3. HTML5基本语法；4. HTML5相关标记及属性。教学要求: 1. 了解HTML5发展历程；2. 理解HTML5浏览器支持情况；3. 熟悉HTML5基本语法，掌握HTML5语法新特性；4. 掌握HTML5相关标记及属性，能够制作简单的网页页面。重点: 1. HTML5相关标记及属性。难点: 1. HTML5相关标记及属性。教学建议：1. 向学生演示HTML5浏览器支持情况：通过演示对比不同浏览器对HTML5的支持情况，让学生对此了解全新的HTML5这门WEB新技术创新应用。 （二）HTML5页面元素及属性教学内容: 1. HTML5结构元素；2. HTML5分组元素；3. HTML5页面交互元素；4. HTML5文本层次语义元素；5. HTML5全局属性。教学要求: 1. 掌握结构元素的使用，可以使页面分区更明确。2. 理解分组元素的使用，能够建立简单的标题组。3. 掌握页面交互元素的使用，能够实现简单的交互效果。4. 理解文本层次语义元素，能够在页面中突出所标记的文本内容。5. 掌握全局属性的应用，能够使页面元素实现相应的操作。重点: 1. 结构元素的使用；2. 列表元素的嵌套使用。难点: 1. 列表元素的嵌套使用。教学建议：1对于实现建立和设计网页的相关细节，大量采用演示、讲解和观察等方式。使学生在建立和设计网页的实践中加深对相关内容的理解并熟练掌握。（三）CSS3基本语法教学内容: 1. CSS3的发展历史以及主流浏览器的支持情况；2. CSS基础选择器；3. CSS文本样式属性；4. CSS优先级。教学要求: 1. 了解CSS3的发展历史以及主流浏览器的支持情况。2. 掌握CSS基础选择器，能够运用CSS选择器定义标记样式。3. 熟悉CSS文本样式属性，能够运用相应的属性定义文本样式。4. 理解CSS优先级，能够区分复合选择器权重的大小。重点: 1. CSS文本样式属性；2. CSS优先级。难点: 1. CSS优先级。教学建议：1对于实现建立和设计网页的相关细节，大量采用演示、讲解和观察等方式。使学生在建立和设计网页的实践中加深对相关内容的理解并熟练掌握。（四）CSS3选择器教学内容: 1. 属性选择器；2. 关系选择器；3. 结构化伪类选择器；4. 伪元素选择器；5. CSS伪类。教学要求: 1. 掌握CSS3中新增加的属性选择器，能够运用属性选择器为页面中的元素添加样式。2. 理解关系选择器的用法，能够准确判断元素与元素间的关系。3. 掌握常用的结构化伪类选择器，能够为相同名称的元素定义不同样式。4. 掌握伪元素选择器的使用，能够在页面中插入所需要的文字或图片内容。5. 掌握CSS伪类，会使用CSS伪类实现超链接特效。重点: 1. 结构化伪类选择器；2. 伪元素选择器。难点: 1. 结构化伪类选择器；2. 伪元素选择器。教学建议：1对于实现建立和设计网页的相关细节，大量采用演示、讲解和观察等方式。使学生在建立和设计网页的实践中加深对相关内容的理解并熟练掌握。（五）CSS盒子模型教学内容: 1. 盒子模型；2. 背景属性；3. 渐变属性；4. CSS控制列表样式；教学要求: 1. 掌握盒子的相关属性，能够制作常见的盒子模型效果；2. 掌握背景属性的设置方法，能够设置背景颜色和图像；3. 理解渐变属性的原理，能够设置渐变背景；4. 熟悉CSS控制列表样式的方式，能够运用背景图像定义列表项目符号。重点: 1. 盒子模型相关属性；2. 背景属性。难点: 1. 盒子模型相关属性。教学建议：1 对于实现建立和设计网页的相关细节，大量采用演示、讲解和观察等方式。使学生在建立和设计网页的实践中加深对相关内容的理解并熟练掌握。（六）元素的浮动和定位教学内容: 1. 元素的浮动；2. 清除浮动的方法；3. 元素的定位。教学要求: 1. 理解元素的浮动，能够为元素设置浮动样式。2. 熟悉清除浮动的方法，可以使用不同方法清除浮动。3. 掌握元素的定位，能够为元素设置常见的定位模式。重点: 1. 元素的浮动；2. 清除浮动的方法。难点: 1. 元素的相对定位和决定定位。教学建议：1对于实现建立和设计网页的相关细节，大量采用演示、讲解和观察等方式。使学生在建立和设计网页的实践中加深对相关内容的理解并熟练掌握。（七）HTML5表单教学内容: 1. 表单功能；2. 常用表单控件；3. 表单样式控制。教学要求: 1. 了解表单功能，能够快速创建表单。2. 掌握表单相关元素，能够准确定义不同的表单控件。3. 掌握表单样式的控制，能够美化表单界面。重点: 1. Input控件的使用；2. 表单样式控制。难点: 1. 表单样式控制。教学建议：1对于实现建立和设计网页的相关细节，大量采用演示、讲解和观察等方式。使学生在建立和设计网页的实践中加深对相关内容的理解并熟练掌握。（八）HTML5多媒体教学内容: 1. HTML5多媒体特性；2. HTML5支持的音频和视频格式；3. HTML5中视频的相关属性；4. HTML5中音频的相关属性；5. HTML5中视频、音频的一些常见操作。教学要求: 1. 熟悉HTML5多媒体特性。2. 了解HTML5支持的音频和视频格式。3. 掌握HTML5中视频的相关属性，能够在HTML5页面中添加视频文件。4. 掌握HTML5中音频的相关属性，能够在HTML5页面中添加音频文件。5. 了解HTML5中视频、音频的一些常见操作，并能够应用到网页制作中。重点: 1. HTML5中嵌入视频；2. HTML5中嵌入音频。难点: 1. HTML5中嵌入视频；2. HTML5中嵌入音频。教学建议：1对于实现建立和设计网页的相关细节，大量采用演示、讲解和观察等方式。使学生在建立和设计网页的实践中加深对相关内容的理解并熟练掌握。（九）CSS3高级应用教学内容: 1. 过渡属性；2. CSS3变形属性；3. CSS3动画。教学要求: 1. 理解过渡属性，能够控制过渡时间、动画快慢等常见过渡效果。2. 掌握CSS3中的变形属性，能够制作2D转换、3D转换效果。3. 掌握CSS3中的动画，能够熟练制作网页中常见的动画效果。重点: 1. CSS32D转换、3D转换；2. CSS3动画animation属性。难点: 1. CSS32D转换、3D转换；2. CSS3动画animation属性。教学建议：1对于实现建立和设计网页的相关细节，大量采用演示、讲解和观察等方式。使学生在建立和设计网页的实践中加深对相关内容的理解并熟练掌握。（十）综合应用教学内容: 1. 站点的建立；2. HTML5页面元素；3. CSS3动画。教学要求: 1. 掌握站点的建立，能够建立规范的站点。2. 完成典型电商网站页面的制作，并能够实现简单的CSS3动画效果。重点: 1. 电商网站页面分析、布局；2. 电商网站动画效果。难点: 1. 电商网站页面分析、布局；2. 电商网站动画效果。教学建议：1. 对于实现建立和设计网页的相关细节，大量采用演示、讲解和观察等方式。使学生在建立和设计网页的实践中加深对相关内容的理解并熟练掌握。第三部分 实训教学一、 实训基本要求网页设计与制作（HTML5）课程的实训目的在于让学生掌握网页设计和制作的基本技能，能够制作企事业单位的静态网站，具备网站的策划、设计和制作能力。通过这一环节要求学生：1学会熟练运用HBuilder应用软件；2. 熟练掌握使用文本、图像及超链接标记的建立方法；3熟练掌握列表元素、结构元素、分组元素、页面交互元素、文本层次语义元素、全局属性的使用方法；4熟练使用CSS控制页面字体和文本外观样式；5熟练运用盒子模型相关属性控制网页中的各种元素；6熟练运用浮动和定位对网页进行布局，掌握常用清除浮动方法；7掌握常用表单控件及相关属性，并能熟练运用表单制作页面；8. 熟悉常用多媒体格式，熟练掌握在页面中嵌入音视频文件的方法；9熟练应用元素过渡、平移、缩放、倾斜、旋转及动画等特效；10.掌握网站设计与制作的流程和思路。二、实训方式、实训场所实训方式包括：上机实践操作、课外实训。实训场所包括：机房。三、实训项目的设置与学时数分配表序号教学环节学时项目或单元小计指导实践上机其他(一)安全教育及实训规章制度学习11(二)HTML5、CSS3概述11(三)HTML5语法及文字、图片和超链接22(四)结构、分组、页面交互、文本层次语义元素22(五)网页表现语言CSS22（六）CSS选择器、伪类连接22（七）盒子模型44（八）元素的浮动、定位44（九）HTML5表单44（十）HTML5多媒体22（十一）CSS3过渡、变形、动画44（十二）综合应用44合 计32311四、实训教学内容与要求（一）安全教育及实训室规章制度学习实训内容： 实验室规章制度学习及实验器材认识。实训要求： 了解实验室规章制度。实训方式： 老师讲解。实训场所： 专业实验/实训室/机房。（二）HTML5、CSS3概述实训内容： 1. 检索并下载和网页设计相关的不同类型文件，了解它们的大概结构；2. 搜索并列举著名的HTML5、CSS3类型网站，了解它们使用的技术或提供的服务；3. 搜索HTML5、CSS3学习资源网站。实训要求： 准确把握HTML5网站的技术特点；初步了解和网页相关的不同类型的文件内容；了解HTML5、CSS3等学习资源网站。实训方式： 上机实践操作。实训场所： 机房。（三）HTML5语法及文字、图片和超链接实训内容： 1. HTML5基本语法；2. 在网页中设置图片、超链接等相关信息3. 通过给定主题，自主设计网页。实训要求： 熟悉HTML5基本语法,掌握HTML5语法新特性。掌握HTML5相关标记及属性，能够制作简单的网页页面。实训方式： 上机实践操作。实训场所： 机房。（四）结构、分组、页面交互、文本层次语义元素实训内容： 1. HTML5结构元素、分组元素；2. HTML5页面交换元素、文本层次语义元素。3. 根据给定的主题，进行网页规划，设计网页。实训要求： 掌握结构元素的使用；掌握页面交互元素的使用，能够实现简单的交互效果；掌握全局属性的应用，能够使页面元素实现相应的操作。实训方式： 上机实践操作。实训场所： 机房。（五）网页表现语言CSS实训内容： 1. CSS3的发展历史以及主流浏览器的支持情况；2. CSS基础选择器；3. CSS选择器定义标记样式；4. CSS复合选择器；5. 根据给定的主题，进行网页规划，设计网页。实训要求： 了解CSS3的发展历史以及主流浏览器的支持情况；掌握CSS基础选择器，熟练运用CSS选择器定义标记样式；熟悉CSS文本样式属性，熟练运用相应的属性定义文本样式。实训方式： 上机实践操作。实训场所： 机房。（六）CSS选择器、伪类连接实训内容： 1. CSS3中新增加的属性选择器；2. 结构化伪类选择器；3. 伪元素选择器；4. CSS伪类；5. 根据给定的主题，进行网页规划，设计网页。实训要求： 掌握CSS3中新增加的属性选择器，能够运用属性选择器为页面中的元素添加样式。掌握常用的结构化伪类选择器，能够为相同名称的元素定义不同样式。掌握伪元素选择器的使用，能够在页面中插入所需要的文字或图片内容。掌握CSS伪类，会使用CSS伪类实现超链接特效。实训方式： 上机实践操作。实训场所： 机房。（七）盒子模型实训内容： 1. 盒子模型相关属性；2. CSS控制列表样式；3. 根据给定的主题，进行网页规划，设计网页。实训要求： 掌握盒子的相关属性，能够制作常见的盒子模型效果。熟悉CSS控制列表样式的方式，能够运用背景图像定义列表项目符号。实训方式： 上机实践操作。实训场所： 机房。（八）元素的浮动、定位实训内容： 1. 元素的浮动；2. 清除浮动的方法；3. 元素的定位；4. 根据给定的主题，进行网页规划，设计网页。实训要求： 理解元素的浮动，熟练掌握为元素设置浮动样式。熟悉清除浮动的方法，可以使用不同方法清除浮动。掌握元素的定位，能够为元素设置常见的定位模式。实训方式： 上机实践操作。实训场所： 机房。（九）HTML5表单实训内容： 1. 常见表单控件；2. 表单样式控制；3. 根据给定的主题，进行网页规划，设计网页。实训要求： 掌握表单相关元素，能够准确定义不同的表单控件；掌握表单样式的控制，能够美化表单界面。实训方式： 上机实践操作。实训场所：