网页设计与开发（HTML5CSS3）教学大纲课标.docxVIP

网页设计与开发教学大纲

(本课程采用授课+任务驱动教学模式)

课程性质和任务

本课程是移动互联网应用技术(五年高技)专业必修的一门专业课，作为用于培养学生专业基本能力和基本素养的重要组成部分。

本课程涉及网页基础、HTML标记、CSS样式、网页布局、变形与动画等内容，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。

本课程基于工作过程开发内容，以行动为导向进行教学内容设计，以学生为主体，以案例实训为手段，设计除理论学习与技能掌握相融合的课程内容体系。

二、课程教学目标

以培养高素质、高技能应用型人才为目标，通过以情境化、项目制为特色的实践教学，将本课程专业知识系统地融于实践全过程。从而培养学生独立与协作工作的能力，提升学生自主学习的兴趣，锻炼学生通过自主学习掌握工作思路与方法的能力，切实提高学生的职业技能和处理实际问题的综合素质。

1．专业能力目标

培养学生熟练使用HTML5相关标记及属性，制作简单的网页页面的能力。

培养学生熟练掌握全局属性的应用，能够使页面元素实现相应的操作。

培养学生熟练使用CSS选择器定义标记样式的能力。

培养学生熟练使用运用属性选择器为页面中的元素添加样式的能力。

培养学生熟练使用CSS控制列表样式的能力。

培养学生熟练使用为元素设置常见的定位模式的能力。

培养学生熟练掌握创建表单的能力。

培养学生熟练利用CSS3制作网页特效的能力。

2．社会能力目标

?培养学生的沟通能力及团队协作能力。

?培养学生分析问题、解决问题的能力。

?培养学生勇于创新、敬业乐观的工作作风。

?培养学生的质量意识、安全意识、环保意识。

?培养学生爱岗敬业的态度与社会责任心。

3．方法能力目标

?培养学生收集与整理资料的能力。

?培养学生制定、实施工作计划的能力。

?培养学生利用各种信息媒体，获取新知识、新技术的能力。

?培养学生时间管理与规划工作的能力。

培养学生分析问题、解决问题的能力。

三、课程内容和要求

项目1

利用HTML5制作图文混排页面

学时

12

学习要求

了解HTML5发展历程

理解HTML5浏览器支持情况

熟悉HTML5基本语法,掌握HTML5语法新特性

掌握HTML5相关标记及属性，能够制作简单的网页页面

学习内容

教学方法和建议

创建第一个HTML5页面

HTML5文档基本格式

创建图文混排的网页

·理论讲授

·模拟演练

项目2

利用HTML5搭建网页结构

学时

12

学习要求

掌握结构元素的使用，可以使页面分区更明确

理解分组元素的使用，能够建立简单的标题组

掌握页面交互元素的使用，能够实现简单的交互效果

理解文本层次语义元素，能够在页面中突出所标记的文本内容

掌握全局属性的应用，能够使页面元素实现相应的操作

学习内容

教学方法和建议

结构元素的使用

页面交互元素的使用

文本层次语义元素的使用

搭建网页结构框架

理论讲授

模拟演练

案例驱动

启发式

项目3

利用CSS3美化网页文本

学时

14

学习要求

掌握CSS基础选择器，能够运用CSS选择器定义标记样式

熟悉CSS文本样式属性，能够运用相应的属性定义文本样式

理解CSS优先级，能够区分复合选择器权重的大小

学习内容

教学方法和建议

CSS基础选择器与样式表

CSS文本样式属性

CSS3优先级?

·理论讲授

·模拟演练

项目4

利用CSS3新增的选择器制作网页

学时

10

学习目标

掌握CSS3中新增加的属性选择器，能够运用属性选择器为页面中的元素添加样式

理解关系选择器的用法，能够准确判断元素与元素间的关系

掌握常用的结构化伪类选择器，能够为相同名称的元素定义不同样式

掌握伪元素选择器的使用，能够在页面中插入所需要的文字或图片内容

掌握CSS伪类，会使用CSS伪类实现超链接特效

学习内容

教学方法和建议

属性选择器的应用

关系选择器的用法

伪元素选择器的使用

CSS伪类选择器的应用

案例驱动

启发式

讲授法

示范法

项目5

利用盒子模型布局网页

学时

12

学习目标

掌握盒子的相关属性，能够制作常见的盒子模型效果

掌握背景属性的设置方法，能够设置背景颜色和图像

理解渐变属性的原理，能够设置渐变背景

理解元素的浮动，能够为元素设置浮动样式

熟悉清除浮动的方法，可以使用不同方法清除浮动

掌握元素的定位，能够为元素设置常见的定位模式

学习内容

教学方法和建议

盒子的相关属性

背景属性的设置方法

渐变属性的应用

设置浮动样式

清除浮动的方法

元素的定位

·理论讲授

·模拟演练

项目6

利用CSS3美化列表样式

学时

10

学习目标

熟悉CSS控制列表样式的方式，能够运用背景图像定义列表项目符号

掌握利用列表与CSS3结合制作网页