网页制作案例教程HTML5+CSS3教学大纲

《网页制作案例教程（HTML5+CSS3）》

课程教学大纲课程编号：学分：4学分学时：64学时（其中：讲课学时：37学时上机学时：27学时）先修课程：信息技术、office综合应用后续课程：JavaScript网页特效适用专业：计算机网络及相关专业一、课程的性质与目标《网页制作案例教程（HTML5+CSS3）》是面向计算机相关专业的一门专业基础课，通过案例讲解来学习网页制作入门、添加网页内容、CSS基础，设置文本字体样式，盒子模型，元素的浮动和定位，多媒体元素，表单的应用，CSS高级选择器，CSS的过渡、变形和动画效果等内容。通过本课程的学习，要求学生熟练掌握网页编辑工具的使用，具备网站设计与制作的能力，根据课程面对的工作任务和职业能力要求，培养学生良好的沟通表达、团队协作等职业素质。二、课程设计理念与思路课程设计理念：依据“Web前端开发”1+X认证标准和近年来国家大赛选取内容，落实立德树人的根本任务，以项目为载体，以任务实施为主线，把工作情景和教学环境有机地结合起来。将知识和技能融入任务实施的过程中。课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例（项目）实训为手段，设计除理论学习与技能掌握相融合的课程内容体系。教学整体设计“以职业技能培养为目标，以案例（项目）任务实现为载体、理论学习与时间操作相结合”。三、教学条件要求开发工具：VSCode四、课程的主要内容及基本要求第一章网页制作入门学习单元网页制作入门学时4学时学习目标了解Web标准。理解网页基本概念。熟悉HTML5页面文档结构。会安装和使用Web开发工具，能够使用VSCode工具创建简单的网页。学习内容知识点了解掌握重点难点网站和网页√浏览器√Web标准√URL地址√HTML5发展历程√HTML5优势√Web页面的开发工具√VisualStudioCode工具√制作简单的HTML5页面√HTML5基本文档结构√HTML标记√属性√注释√添加网页内容学习单元添加网页内容学时8学时学习目标掌握标题、段落等文本标记的使用。了解文本格式化标记，会输入特殊字符。掌握图像标记，会在网页中插入图像，设置图像属性。熟悉超链接标记，知道超链接分类。熟悉列表标记，能够定义列表，了解列表嵌套。会使用标题、段落、图像、列表标记制作简单的网页。能够通过在页面上面添加超链接元素，实现不同页面之间的跳转。学习内容知识点了解掌握重点难点标题标记√段落标记√换行和水平线标记√文本格式化标记√特殊字符√网页中常用的图像格式√图像标记和属性√图像地址√超链接标记和属性√超链接分类√无序列表√有序列表√定义列表√列表嵌套√第三章CSS基础学习单元CSS基础学时6学时学习目标了解CSS标准及发展历史；掌握CSS样式规则及引入方式；熟悉CSS基本选择器；理解CSS的优先级、继承性和层叠性。学习内容知识点了解掌握重点难点CSS标准√CSS样式规则√引入CSS样式表√CSS基础选择器√CSS层叠性和继承性√CSS优先级√√第四章设置文本字体样式学习单元设置文本字体样式学时6学时学习目标熟悉CSS字体属性，能够运用相应的属性定义字体样式。熟悉CSS文本属性，能够运用相应的属性定义文本样式。会设置文字阴影效果。了解特殊字体的使用。学习内容知识点了解掌握重点难点设置字体样式属性√设置文本外观属性√设置文字阴影及模糊效果√使用服务器字体√设置超链接样式√第五章盒子模型学习单元盒子模型学时8学时学习目标熟悉盒子模型及其常用的属性；理解行内元素、块元素和行内块元素，能够在各类元素间进行转换；熟悉盒子的新增样式，能够使用新增样式；熟悉表格标记，能够创建简单表格；熟悉HTML5新增文档结构元素。学习内容知识点了解掌握重点难点认识盒子模型√<div>标记√盒子的宽与高√border属性√margin属性√背景属性√√行内元素√块元素√行内块元素√元素的转换√圆角边框√盒子阴影√渐变背景√表格元素√HTML5新增文档结构元素√第六章元素的浮动和定位学习单元元素浮动和定位学时8学时学习目标理解元素的浮动，能为元素设置浮动效果；熟悉清除浮动的方法，可以使用不同方法清除浮动；掌握元素的定位方法。学习内容知识点了解掌握重点难点设置浮动效果√√清除浮动√相对定位relative√√绝对定位absolute√√固定定位fixed√z-index属性√第七章多媒体元素学习单元多媒体元素学时2学时学习目标了解HTML5支持的音频和视频格式；掌握HTML5中音频的相关属性，能够在HTML5中添加音频文件；掌握HTML5中视频的相关属性，能够在HTML5页面中添加视频文件。学习内容知识点了解掌握重点难点audio标记√√video标记√√source标记√第八章表单的应用学习单元表单的应用学时6学时学习目标理解表单的构成，能够根据不同情况选择相应的表单元素；掌握表单相关标记，能够创建各种表单元素。学习内容知识点了解掌握重点难点Form表单元素√Input控件√√Select控件√label控件√多行文本控件√button控件√HTML5新增控件√HTML5新增input类型√HTML5新增表单属性√第九章CSS高级选择器学习单元CSS高级选择器学时4学时学习目标理解CSS关系选择器，能够准确判断元素与元素间的关系；熟悉CSS属性选择器，能够运用属性选择器为页面中的元素添加样式；熟悉伪类和伪对象选择器，掌握其具体用法。学习内容知识点了解掌握重点难点属性选择器√关系选择器√√子代选择器√√兄弟选择器√伪类选择器√伪对象选择器√第十章CSS3过渡、变形和动画效果学习单元CSS3过渡、变形和动画效果学时4学时学习目标掌握CSS3变形和过渡属性的设置；掌握@keyframes语法规则；掌握animate动画属性的使用。学习内容知识点了解掌握重点难点设置变形√更改变形的中心√transition属性√@keyframes√animation-name属性√animation-duration属性√animation-timing-function属性√animation-delay属性√animation-iteration-count属性√animation-direction属性√animation属性√第十一章综合实例

学习单元综合实例学时8学时学习目标了解网页的整体结构；了解分析、规划、设计、制作网页的流程；掌握HTML5基本元素的使用；掌握文字字体样式、基本选择器、盒子模型、浮动、定位的使用；掌握表单、高级选择器、过渡、变形及动画的使用。学习内容知识点了解掌握重点难点案例分析√网页布局规划实现√√头部内容制作√√内容栏目制作√√底部内容制作√…………………五、学时分配章目讲课上机合计第一章网页制作入门2学时2学时4学时第二章添加网页内容5学时3学时8学时第三章CSS基础4学时2学时6学时第四章设置文本字体样式4学时2学时6学时第五章盒子模型5学时3学时8学时第六章元素的浮动和定位5学时3学时8学时第七章多媒体元素1学时1学时2学时第八章表单的应用4学时2学时6学时第九章CSS高级选择器2学时2学时4学时第十章CSS3过渡、变形和动画效果1学时3学时4学时第十一章制作“河南特色文化旅游”网页综合实例4学时4学时8学时合计37学时27学时64学时六、考核模式与成绩评定办法本课程为考试课程，期末考试采用百分制的闭卷考试模式。学生的考试成绩由平时成绩（40%）和期末考试（60%）组成，其中，平时成绩包括出勤（5%）、作业（15%）、上机成绩（20%）。序号考核方式考核内容成绩比例（%）1平时考核包括课堂考勤10课堂互动表现实训练习情况202项目模块考核学生通过综合实训项目的完成对整个课程内容进行整合，考核是否能够独立完成网站作品的能力303综合项目考核综合课程全部内容，对学生技能掌握情况进行检验。主要考查学生综合职业素质，包括耐心、细心、沟通能力、协作能力、分析问题能力等。40合计100七、选用教材和主要参考书本大纲是根据教材《网页制作案例教程（HTML5+CSS3）》所设计的。参考书籍：传智播客.《网页设计与制作（HTML+CSS）》中国铁道出版社.201408传智播客.《HTML+CSS+JavaScript网页制作案例教程》人民邮电出版社.201508八、大纲说明本课程的授课模式为：课堂授课