HTML5 CSS3网站设计基础教程（第3版）-教学大纲.docx

©黑马程序员I传智教育旗下高端IT教育品牌HTML+CSS网站设计基础教程（第3版）课程教学大纲（课程英文名称）课程编号：学 分：X学分学 时：78课时（其中：讲课56课时上机22课时）先修课程：计算机基础、计算机网络、计算机应用适用专业：信息技术及其计算机相关专业一.课程的性质与HTML5+CSS3网站设计基础教程（第3版）是面向计算机相关专业的一门专业基 础课，涉及HTML5基础、CSS3基础以及网页布局等内容，通过本课程的学习，学生能够 了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效 果及变形和动画效果，学会制作各种企业、门户、电商类网站。二.课程设计思路和教学要求课程设计理念：高职教育的集中实践教学环节需明确必要的理论知识的升华与知识层 面的拓展，不能局限于单纯的技能训练。单纯的技能训练不是提高高等职业教育的理想课程。 以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发 展所需的能力和终身学习的能力，实现一站式教学理念。课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学 生为主体，以任务实训为手段，设计出理论学习与技能掌握相融合的课程内容体系。教学整©黑马程序员I传智教育旗下高端IT教育品牌新的表单属性掌握使用css控制表单样式掌握阶段案例一信息登记表掌握VV第8章多媒体嵌入学习单元多媒体嵌入课时6学习目标1 . 了解视频音频嵌入技术，能够总结HTM L5视频音频嵌入技术的优点。2 . 了解常用的视频文件格式和音频文件格式，能够归纳HTM L5支持的视频 和音频格式。3 .掌握HTML5中视频的嵌入方法，能够在HTML5页面中添加视频文件。4 .掌握HTM L5中音频的嵌入方法，能够在HTM L5页面中添加音频文件。5 . 了解HTML5中视频、音频的兼容性，能够制作视频、音频兼容性较好的 网贞。6 .熟悉调用网络音频、视频文件的方法，能够调用网络中的音频、视频文件。7 .熟悉CSS控制视频宽度和高度的方法，能够在网页中设置视频宽窗口高 度。学习内容知识点掌握程度重点难点视频、音频嵌入技术概述了解HTML5支持的视频格式和音频格式了解在HTML5中嵌入视频掌握V在HTML5中嵌入音频掌握V视频、音频文件的兼容性问题了解调用网络音频、加文件了解使用CSS控制视频的宽度和高度熟悉阶段案例一音乐播放界面掌握VV第9章过渡,变形和动画学习单元过渡、变形和动画课时8学习目标1 .掌握过渡的各种属性，能够为网页中的兀素添加过渡效果。2 .掌握变形的各种属性，能够制作2D变形效果和3D变形效果。3 .掌握动回的各种属性，能够为网贞中的兀素添加动回效果。学习内容知识点掌握程度重点难点transition-property 属性掌握©黑马程序员I传智教育旗下高端IT教育品牌transition-duration 属性掌握transition-timing-function 属性掌握transition-delay 属 T生掌握transition 属性掌握认识 transform掌握2D变形掌握V3D变形掌握V keyframes 规则掌握animation-name 属性和animation-duration 属性掌握animation-timing-function 属性掌握animation-delay 属，性掌握animation-iteration-count 属性掌握animation-direction 属性掌握animation 属性掌握阶段案例一表情图片掌握VV第10章实战开发一制作油纸伞网站首页学习单元实战开发一制作油纸伞网站首页课时8学习目标1.掌握网页制作方法，能够完成首页面的制作，并实现CSS3动效果。学习内容知识点掌握程度重点难点项目背景了解准备工作熟悉制作头部、导航和视频掌握VV制作内容部分（款式）掌握VV制作内容部分（工艺）掌握VV制作内容部分（定制）掌握VV制作表单信息及版权信息部分掌握VV四.课时分配章目讲课上机合计第1章HTML5入门628©黑马程序员I传智教育旗下高端IT教育品牌第2章HTML5标签和属性628第3章CSS3入门628第4章CSS3选择器628第5章盒子模型628第6章网贞布局628第7章表格与表单628第8章多媒体嵌入426第9章过渡、变形和动画628第10章实战开发一制作油纸伞网站首页448合计562278五、考核模式与成绩评定办法本课程为考试课程，期末考试采用百分制的闭卷考试模式。学生的考试成绩由平时成绩 （30% ）和期末考试（70% ）组成，其中，平时成绩包括出勤（5% ）、作业（5% ）、上 机成绩（20% ） e六.选用教材和主要参考书本大纲是根据黑马程序员编著的教材HTML5+CSS3网站设计基础教程（第3版） 所设计的。七、大纲说明本课程的授课模式为：课堂授课+上机，其中，课堂主要采用多媒体的方式进行授课， 并且会通过测试题阶段测试学生的掌握程度；上机主要是编写程序，要求学生动手完成指定 的程序设计或验证。撰写人：审定人：批准人：执行时间：©黑马程序员I传智教育旗下高端IT教育品牌体设计以职业技能培养为目标，以任务实现为载体、理论学习与实际操作相结合。操作系统：Windows 7及以上版本开发工具：Dreamweaver CS6/VS Code/Hbuilder 均可使用三、课程的主要内容及基本要求第1章HTML5入门学习单元HTML5入门课时8学习目标1 . 了解网页基本概念，能够说出网页的构成以及网页相关名词的含义。2 .熟悉Web标准，能够归纳Web标准的构成。3 . 了解浏览器，能够说出各主流浏览器的特点。4 . 了解HTM L5技术,能够知道HTM L5发展历程、优势以及浏览器对 HTML5的支持情况。5 .掌握HTML5基本结构，能够在网贞中应用HTML5结构。6 .熟悉HTM L5语法，能够归纳HTM L5语法的特点。7 .熟悉HTM L5标签，能够知道HTM L5标签类型、标签属性以及头部相关 标签的用法。8 .熟悉HTML5常用开发工具，能够使用这些开发工具编写HTML5网页代 码。学习内容知识点掌握程度重点难点网虫构成了解网负相关名词了解Web标准熟悉浏览器了解HTML的演变历程了解HTML5的优势了解浏览器对HTML5的兼容情况熟悉HTML5的基本结构掌握7HTML5的语法格式熟悉HTML5标签的类型熟悉HTML5标签的属性熟悉HTML5文档头部相关标签熟悉VS Code的安装、设置熟悉©黑马程序员I传智教育旗下高端IT教育品牌VS Code的使用熟悉阶段案例第一个HTML5贞面掌握第2章HTML5标签和属性学习单元HTML5标签和属性课时8学习目标1 .掌握文本控制标签的用法,能够使用义本控制标签设置文本样式。2 .掌握图像标签的用法，能够使用图像标签在网页中嵌入图片。3 .掌握超链接标签的用法，能够使用超链接实现页面的跳转。4 .掌握列表标签的用法，能够使用列表标签设置导航选项。5 .熟悉结构标签的用法，能够使用结构标签搭建网贞结构。6,熟悉页面父且标签的用法,能够使用页面父目标签设置负面展示信心。7 .熟悉全局属性的用法，能够使用全局属性设置网贞效果。学习内容知识点掌握程度重点难点贞面格式化标签-标题标签掌握V贞面格式化标签-段落标签掌握V贞面格式化标签-水平线标签掌握V贞面格式化标签-换行标签掌握V文本格式化标签掌握V文本样式标签掌握V特殊字符掌握常用图像格式掌握图像标签及其属性掌握V绝对路径和相对路径掌握V无序列表掌握有序列表掌握定义列表掌握列表的嵌套掌握创建超链接掌握锚点链接掌握header标签熟悉<nav>标签熟悉footer标签熟悉article标签熟悉©黑马程序员I传智教育旗下高端IT教育品牌(section标签熟悉<aside> 标签熟悉figure标签和figcaption > 标签熟悉<hgroup> 标签熟悉(details标签和summary标签熟悉progress标签熟悉< meter标签熟悉draggable 属性熟悉hidden属性熟悉contenteditable 属性熟悉阶段案例影片介绍网贞掌握VV第3章CSS3入门学习单元CSS3入门课时81 . 了解CSS的功能和作用，能够列举CSS的应用ZF例。2 .熟悉CSS的发展历史，能够厘清CSS1、CSS2和CSS3三者的关系。3 .掌握CSS的样式规则，能够按照CSS样式规则正确书写CSS样式。4 .掌握CSS样式表的引入方式，能够在网页中引入CSS样式。5 .掌握CSS基础选择器的用法，能够使用CSS基础选择器设置差异化的网6 .掌握字体样式属性的用法，能够在网页中设置不同的字体样式。7 .掌握文本外观属性的用法，能够在网页中设置不同的文本样式。8 .熟悉列表样式属性的用法，能够清除网贞中默认的列表项目符号。9 . 了解CSS层叠性和继承性的特点，能够运用CSS层叠性和继承性优化网 页代码结构。10 .掌握CSS优先级的特点，能够对CSS基础选择器进行优先级排序。学习E笄示学习内容知识点掌握程度重点难点CSS的发展历史熟悉CSS样式规则掌握V引入CSS样式表-行内式掌握弓I入CSS样式表-内嵌式掌握弓I入CSS样式表-链入式掌握V引入CSS样式表-导入式掌握CSS基础选择器-标签选择器掌握V©黑马程序员I传智教育旗下高端IT教育品牌CSS基础选择器一类选择器掌握VCSS基础选择器-id选择器掌握VCSS基础选择器-通配符选择器掌握VCSS基础选择器-交集选择器掌握VCSS基础选择器-并集选择器掌握VCSS基础选择器-后代选择器掌握V字体样式属性-font-size:字号掌握字体样式属性-fo nt-fa m i ly:字体掌握字体样式属性-font-weight:字体粗细掌握字体样式属性-fo nt-va ri a nt:变体掌握字体样式属性-font-style:字体风格掌握字体样式属性-font:综合设置字体样式掌握字体样式属性-font-face规则掌握文本外观属性-co 1 o r:文本颜色掌握文本外观属性-letter-spacing:字间距掌握文本外观属性-word-spacing:单词间距掌握文本外观属性-line-height彳亍间距掌握文本外观属性-text-transform:文本转换掌握文本外观属性-text-decoration:文本装饰掌握文本外观属性-text-a 1 i g n:水平对齐方式掌握文本外观属性-text- in d e nt:首行缩进掌握文本外观属性-white-space:空格处理掌握文本外观属性-text-shadow:阴影效果掌握文本外观属性-text-overflow:处理溢出的 文本掌握文本外观属性-word-wr叩属性掌握list-style-type 属性熟悉list-style-image 属性熟悉list-style-position 属性熟悉list-style 属性熟悉层叠性了解继承性了解CSS优先级掌握阶段案例宣传软义掌握VV©黑马程序员I传智教育旗下高端IT教育品牌第4章CSS3选择器学习单元CSS3选择器课时8学习目标1 .熟悉属性选择器的用法，能够说出不同属性选择器的功能。2 .掌握关系选择器的用法，能够使用关系选择器选取父标签中嵌套的子标 签。3 .掌握结构化伪类选择器的用法，能够使用不同功能的结构化伪类选择器精 准控制标签样式。4 .掌握状态化伪类选择器的用法，能够使用状态化伪类选择器设置导航显示 样式。5 .掌握伪元素选择器的用法,能够使用伪元素选择器为标签添加内容样式。学习内容知识点掌握程度重点难点Eattribute选择器熟悉Eattribute=value选择器熟悉Eattribute= value选择器熟悉Eattribute| 二 value选择器熟悉Eattribute 八二value选择器熟悉Eattribute$=value选择器熟悉Eattribute*=value选择器熟悉子兀素选择器掌握兄弟选择器掌握：root选择器掌握：not选择器掌握:only-child 选择器掌握:first-child 选择器和:last-child 选择器掌握V:nth-child(n)选择器和:nth-last-child(n)选择器掌握V:first-of-type 选择器和:last-of-type 选择器掌握:nth-of-type(n)选择器和:nth-last-of-type(n)选择器掌握：empty选择器掌握larget选择器掌握状态化伪类选择器掌握：before选择器掌握©黑马程序员I传智教育旗下高端IT教育品牌:after选择器掌握阶段案例风入人物列表页面掌握VV第5章盒子模型学习单元盒子模型课时8学习目标1 .熟悉盒子模型的概念，能够说出盒子模型的基本结构。2 .掌握div标签的用法，能够使用div标签制作贞面模块。3 .掌握边框属性的用法，能够为盒子设置不同的边框效果。4 .掌握边距属性的用法，能够使用内边距和外边距设置盒子空间距离。5 . 了解盒子宽度属性和高度属性，能够计算盒子的实际宽度。6 .掌握box-shadow属性的用法，能够为盒子添加阴影。7 .熟悉box-sizing属性的用法，能够控制盒子宽度和高度范围。8 .掌握背景属性的用法，能有为盒子设置不同样式背景。9 .掌握CSS3渐变属性的用法,能够为盒子添加不同的渐变颜色。学习内容知识点掌握程度重点难点认识盒子模型熟悉<div>标签掌握Vborder-style :边框样式掌握Vborder-width :边框宽度掌握Vborder-color:边框颜色掌握Vborder:综合设置边框掌握Vborder-radius :圆角边框掌握Vborder-image :图像边框掌握V内边距属性掌握V外边距属性掌握V宽度属性和局）度属性了解box-shadow 属性掌握box-sizing 属性熟悉设置背景颜色掌握V设置背景图像掌握V设置背景图像平铺掌握V设置背景图像的位置掌握V设置背景图像固定掌握V设置背景颜色与背景图像的不透明度掌握V©黑马程序员I传智教育旗下高端IT教育品牌设置背景图像的大小掌握V设置背景的显示区域掌握V设置背景的裁剪区域掌握V设置多重背景图像掌握V背景复合属性掌握V线性渐变掌握径向渐变掌握重复渐变掌握阶段案例感动中国人物榜掌握VV第6章网页布局学习单元网页布局课时6学习目标1 .熟悉网页布局，能够说明DIV+CSS布局的含义。2 .掌握元素的浮动属性，能够为元素添加和清除浮动。3 .熟悉overflow属性的用法，能够设置不同的内容溢出状态。4 .掌握兀素的定位属性，能够设置不同的定位模式。5 . 了解兀素的类型，能够说出不同类型兀素的特点。6 .熟悉span标签的特点，能够说明span标签应用场景。7 .掌握兀素的转换方法，能够将不同类型的兀素进行转换。8 .熟悉常见布局类型，能够运用HTML+CSS搭建布局结构。9 . 了解网页模块的命名规范,能够按命名照标准命名网页模块。学习内容知识点掌握程度重点难点网页布局概述熟悉兀素的浮动属性掌握V清除浮动掌握Voverflow 属性熟悉兀素的定位属性掌握V静态定位熟悉V相对定位掌握V绝对定位掌握V固定定位掌握Vz-index层叠等级属性掌握V兀素的类型了解<span>标签熟悉©黑马程序员I传智教育旗下高端IT教育品牌兀素的转换掌握单列布局熟悉两列布局熟悉三列布局熟悉网央模块的命名规范了解阶段案例网贞焦点图掌握VV第7章表格和表单学习单元表格和表单课时8学习目标1 .掌握创建表格的方法，能够在网页中创建表格。2 .熟悉表格相关标签的属性，能够运用这些属性设置不同形态的表格。3 .掌握CSS控制表格样式的方法，能够使用CSS设置表格样式。4 . 了解表单的构成，能够说出表单的构成部分。5 .掌握创建表单的方法，能够在网页中创建表单。6 .掌握各类表单控件，能够创建不同功能的表单控件。7 .掌握HTML5表单新增属性，包括input控件类型、form标签、input 属性、form属性。8 .掌握CSS控制表单样式的方法，能够使用CSS美化表单样式。学习内容知识点掌握程度重点难点创建表格掌握V<table>标签的属性熟悉<tr>标签的属性熟悉<td>标签的属性熟悉<th >标签熟悉表格的结构熟悉使用css控制表格边框掌握使用css控制单元格边距掌握使用css控制单兀格的宽度和图度掌握表单的构成了解创建表单掌握V表单控件掌握V新的input控件类型掌握V新的表单标签掌握新的input控件属性掌握V