《网页设计与制作（HTML5+CSS3+JavaScript）（第2版）》教学大纲

博学谷——让IT教学更简单，让IT学习更有效《网页设计与制作（HTML5+CSS3+JavaScript）（第2版）》

课程教学大纲（课程英文名称）课程编号：学分：学分学时：72课时（其中：讲课课时：60课时上机课时：12课时）先修课程：计算机基础适用专业：信息技术及其计算机相关专业一、课程的性质与目标网页设计与制作（HTML5+CSS3+JavaScript）是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标签、CSS样式、网页布局、变形与动画、JavaScript等内容，通过本课程的学习，学生能够了解网页Web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。通过本课程，能够为学习后面的前端知识夯实基础。二、课程设计思路和教学要求课程设计理念：课程的集中实践教学环节需明确必要的理论知识的升华与知识层面的拓展，不能局限于单纯的技能训练。单纯的技能训练不是提高高等职业教育的理想课程。以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例为手段，设计出理论学习与技能掌握相融合的课程内容体系。教学整体设计“以技能培养为目标，以案例为载体、理论学习与实践操作相结合”。开发工具：HBuilderX三、课程的主要内容及基本要求第1章HTML入门学习单元HTML入门课时4课时学习目标了解网页和网站的基本概念，能够说明二者之间的联系了解网页基本构成要素，能够描述网页的基本构成要素了解网站页面构成，能够描述网站的页面构成了解网站类型，能够描述常见的网站类型熟悉常用的浏览器，能够区分常见的浏览器熟悉网站制作流程，能够描述网页制作的基本流程熟悉网页设计原则，能够描述网页设计的基本原则熟悉网页设计规范，能够描述网页设计的基本规范掌握HBuilderX的安装与使用，能够独立完成HBuilderX的安装并使用它编写网页掌握人工智能（artificialintelligence，AI）网页工具的使用，能够运用AI网页工具快速编写网页学习内容知识点掌握程度重点难点网页和网站基本概念了解网页基本构成要素了解网站页面构成了解网站类型了解浏览器概述熟悉网站制作流程熟悉网页设计原则熟悉配色原则熟悉设计尺寸规范熟悉字体规范熟悉命名规范熟悉常见的网页编辑器熟悉HBuilderX的安装与使用掌握√AI实践：AI网页工具初体验掌握第2章运用HTML5搭建网页结构学习单元运用HTML5搭建网页结构课时6课时学习目标了解HTML和HTML5，能够归纳HTML和HTML5的概念熟悉HTML标签，能够归纳常用HTML标签的类型和基本用法熟悉HTML文档的基本格式，能够归纳文档的组成部分及其用途熟悉特殊字符标签，能够列举至少五个特殊字符以及其对应的替代代码了解图像格式，能够归纳常用图像格式的特点了解绝对路径和相对路径，能够归纳绝对路径和相对路径的区别熟悉HTML5新标签，能够归纳这些标签的用途掌握标签属性的设置方式，能够根据需要为标签设置指定的属性掌握头部标签的使用，能够使用头部相关标签设置页面标题和元信息掌握标题和段落标签的使用，能够实现设置标题和换行的效果掌握文本样式标签的使用，能够根据需要设置文本的基本样式掌握文本格式化标签的使用，能够根据需要设置文本的基本格式掌握图像标签的使用，能够灵活运用<img>标签定义图像学习内容知识点掌握程度重点难点认识HTML和HTML5了解认识标签熟悉文档基本格式熟悉√标签属性掌握HTML5文档头部相关标签掌握标题和段落标签掌握√文本样式标签掌握√文本格式化标签掌握√特殊字符标签熟悉常用图像格式了解图像标签<img>掌握√√绝对路径和相对路径了解√认识HTML5新标签了解阶段案例：输出文章掌握动手实践：制作个人简介页面掌握第3章运用CSS3设置网页样式学习单元运用CSS3设置网页样式课时7课时学习目标了解CSS和CSS3，能够归纳CSS和CSS3的概念以及区别了解CSS样式规则，能够说出其组成部分熟悉CSS的层叠性和继承性，能够归纳CSS的层叠性和继承性熟悉CSS优先级，能够归纳CSS优先级熟悉CSS3新增的选择器，能够归纳这些选择器的基本使用掌握CSS的引入方式，能够将CSS应用于HTML文档掌握基础选择器的使用方法，能够通过基础选择器选择要改变样式的元素掌握字体样式属性和文本外观属性的用法，能够设置字体、文本的样式学习内容知识点掌握程度重点难点认识CSS和CSS3了解CSS样式规则了解引入CSS掌握√CSS基础选择器掌握√字体样式属性掌握√文本外观属性掌握√CSS层叠性和继承性熟悉√CSS优先级熟悉√CSS3新增选择器熟悉√阶段案例：制作新闻页面掌握动手实践：认真严谨掌握第4章运用盒子模型划分网页模块学习单元运用盒子模型划分网页模块课时7课时学习目标了解盒子模型的概念理解块元素与行内元素的区别，能够进行类型转换掌握内边距属性和外边距属性的使用方法，能够为元素设置内边距、外边距掌握边框属性的使用方法，能够为图像、文本等添加边框掌握box-sizing属性，能够计算元素的总宽度和总高度掌握背景属性，能够通过背景属性控制背景颜色和背景图像掌握块元素垂直外边距的合并，能够实现相邻块元素垂直外边距的合并，以及嵌套块元素垂直外边距的合并学习内容知识点掌握程度重点难点认识盒子模型了解<div>标签掌握√盒子的宽与高掌握√边框属性掌握√√内边距属性掌握外边距属性掌握box-shadow属性掌握√box-sizing属性掌握背景属性掌握√√元素的类型了解<span>标签掌握√元素的转换掌握√相邻块元素垂直外边距的合并掌握√嵌套块元素垂直外边距的合并掌握√阶段案例：制作音乐排行榜掌握动手实践：制作播放器图标掌握第5章为网页添加列表和超链接学习单元为网页添加列表和超链接课时4课时学习目标熟悉列表标签，能够说出列表标签的分类熟悉CSS控制列表样式，能够说出CSS控制列表样式的属性掌握无序、有序及定义列表的使用，能够制作常见的网页模块掌握超链接标签的使用，能够使用超链接定义网页元素掌握CSS伪类的使用，能够使用CSS伪类实现超链接特效学习内容知识点掌握程度重点难点无序列表<ul>掌握√有序列表<ol>掌握√定义列表<dl>掌握list-style-type属性掌握√list-style-image属性掌握list-style-position属性掌握list-style属性掌握√创建超链接掌握√√锚点链接掌握√链接伪类控制超链接掌握√√阶段案例：制作新闻列表掌握动手实践：实现图文混排掌握第6章为网页添加表格和表单学习单元为网页添加表格和表单课时9课时学习目标熟悉表格常用的标签，能够说出常用的表格标签及其作用了解表格结构，能够说出表格的划分结构及各个结构的定义标签了解表单，能够说出表单的概念及表单的组成部分熟悉表单常用的标签，能够说出常用的表单标签及其作用掌握表格标签的应用，能够创建表格并添加表格样式理解表单的构成，可以快速创建表单掌握表单相关标签，能够创建具有相应功能的表单控件掌握表单样式的控制，能够美化表单界面学习内容知识点掌握程度重点难点创建表格掌握√<table>标签的属性掌握<tr>标签的属性掌握<td>标签的属性掌握√<th>标签掌握√CSS控制表格边框掌握CSS控制单元格边距掌握CSS控制单元格宽高掌握表单的构成了解创建表单掌握√√表单属性掌握√input控件掌握√√<input>标签的type属性掌握√<input>标签的其他属性掌握textarea控件掌握select控件掌握datalist控件掌握CSS控制表单样式掌握√阶段案例：制作表单注册页面掌握动手实践：简历表制作掌握第7章运用浮动和定位布局网页学习单元运用浮动和定位布局网页课时7课时学习目标了解什么是布局，能够说出布局的目的与要点熟悉布局的属性，能够说出布局的常用属性熟悉布局类型，能够说出布局的常用类型掌握标签的浮动属性，能够为标签设置和清除浮动掌握标签的定位属性，能够理解不同类型定位之间的差别掌握div+css的布局技巧，能够运用div+css为网页布局学习内容知识点掌握程度重点难点布局概述了解标签的浮动属性-认识浮动掌握√标签的浮动属性-清除浮动掌握√√标签的定位属性掌握√√overflow属性掌握√z-index标签层叠掌握√单列布局掌握两列布局掌握三列布局掌握网页模块命名规范熟悉阶段案例：制作通栏banner掌握动手实践：制作环保网页掌握第8章全新的网页视听技术学习单元全新的网页视听技术课时8课时学习目标掌握页面的音频和视频嵌入技术，能够描述HTML5中嵌入音频和视频的标签和属性理解CSS3中的过渡属性，能够说出不同过渡属性的含义掌握CSS3中的变形属性，能够归纳2D变形和3D变形的效果掌握CSS3中的动画，能够归纳制作动画的常用属性掌握<video>标签和<audio>标签的使用方法，能够在网页中定义视频和音频掌握过渡属性的使用方法，能够实现元素的平滑过渡效果掌握变形属性的使用方法，能够实现元素的平移、缩放、倾斜和旋转等效果掌握动画属性的使用方法，能够实现丰富的动画效果学习内容知识点掌握程度重点难点传统音频、视频嵌入方式了解使用<video>嵌入视频掌握√使用<audio>嵌入音频掌握√浏览器对音视频文件的兼容性了解控制视频的宽高掌握transition-property属性掌握√transition-duration属性掌握√transition-timing-function属性掌握transition-delay属性掌握transition属性掌握√2D变形掌握√√3D变形掌握√@keyframes掌握√animation-name属性掌握√animation-duration属性掌握√animation-timing-function属性掌握animation-delay属性掌握animation-iteration-count属性掌握√animation-direction属性掌握animation属性掌握阶段案例：制作音乐播放界面掌握动手实践：实现风车转动效果掌握第9章CSS应用技巧学习单元CSS应用技巧课时4课时学习目标掌握CSS精灵技术，能够归纳CSS精灵的概念和作用掌握CSS滑动门技术，能够描述滑动门的概念掌握margin设置负值技巧，能够说出margin值设置为负数的作用掌握CSS精灵的应用，能够在网页制作中熟练使用CSS精灵定义背景图片掌握CSS滑动门技术，能够运用滑动门技术制作网站导航掌握margin负值的设置方法，能够使用margin负值设置压线效果学习内容知识点掌握程度重点难点CSS精灵技术掌握√√CSS滑动门技术掌握√√margin设置负值技巧掌握√√第10章JavaScript基础知识学习单元JavaScript基础知识课时9课时学习目标了解什么是JavaScript，能够描述JavaScript的概念熟悉JavaScript语法规则，能够描述JavaScript的语法特点熟悉数据类型，能够描述常见的数据类型熟悉常见JavaScript事件，能够描述常见的JavaScript事件掌握JavaScript引入方式，能够使用三种方式引入JavaScript掌握JavaScript常用输出语句，能够使用输出语句输出运行结果掌握数据基本操作，能够完成数据的运算掌握常见的流程控制语句，能够进行判断和循环操作掌握函数，能够根据实际需求在程序中定义并调用函数掌握对象，能够正确定义和使用对象掌握事件和事件调用，能够通过事件实现交互效果掌握网页中常见的JavaScript特效，能够实现验证码和焦点图轮播效果学习内容知识点掌握程度重点难点JavaScript简介了解JavaScript语法规则熟悉JavaScript引入方式掌握√√JavaScript常用输出语句掌握√简单的JavaScript页面掌握数据类型熟悉数据基本操作掌握√√常见的流程控制语句掌握√√函数掌握√√对象掌握√√事件和事件调用掌握√常见的JavaScript事件掌握√验证码掌握焦点图轮播掌握第11章综合项目实战：摄影·开课吧学习单元综合项目实战：摄影·开课吧课时7课时学习目标熟悉网站设计规划的基本流程，能够描述网站设计规划的基本流程熟悉项目的开发流程，能够归纳总结项目的开发步骤掌握首页的搭建，能够独立完成首页的代码编写掌握注册页的搭建，能够独立完成注册页的代码编写掌握个人中心页的搭建，能够独立完成个人中心页的代码编写掌握视频播放页的搭建，能够独立完成视频播放页的代码编写学习内容知识点掌握程度重点难点确定网站主题熟悉规划网站结构熟悉收集素材熟悉设计网页效果图熟悉首页效果图分析了解首页制作掌握√√注册页效果图分析了解注册页制作掌握√个人中心页效果图分析了解个人中心页制作掌握√√视频播