《HTML5+CSS3网站设计基础教程》课程标准

《HTML5+CSS3网页设计基础教程》课程标准课程代码：学时：64学分：4课程性质：专业必修课适用专业：计应专业课程归属：编写执笔人及编写日期：2022年2月审定负责人及审定日期：系主任及审定日期：开设时间：第2学期第一部分、课程定位一、课程性质本课程是计算机应用专业一门专业必修课程二、课程性质与目标《HTML5+CSS3网站设计基础教程》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标记、CSS样式、网页布局、变形与动画等内容。通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。三、前导、后续课程（1）前导课程计算机应用基础（2）后续课程JavaScript编程、Vue.js、微信小程序开发第二部分、课程设计一、基本理念高职教育的集中实践教学环节需明确必要的理论知识的深化与知识层面的拓展，不能局限于单纯的技能训练。单纯的技能训练不是提高高等职业教育的理想课程。以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念。1二、课程设计思路（1）以职业岗位和后续课程需求确定课程目标首先组建专业必修课、专业教师、企业专家三方人员组成的课程开发团队，进行课程服务专业的人才培养目标分析，确定计算机应用专业的岗位面向；进而确定本课程所织成的具体核心课程有哪些？同时结合行业对岗位任职的具体标准，确定课程的具体目标。（2）依据职业标准，通过对所服务的后续课程和必修课程本身分析，以专业基础课与学习领域课程聚合点构建教学内容通过对职业标准进行剖析和本门课程所服务的后续课程本身进行分析，得出后续专业课程负载点与专业基础课程支撑点存在聚合，将这些聚合点作为教学内容选择、实训任务确定的依据。（3）根据教学内容需求和学生学情的分析设计教学方法和手段根据教学内容需求，以及根据学生形象思维强、逻辑思维相对弱的现状，设计案例教学法、引导文教法等，应用项目应用设计等教学手段服务抽象的理论教学。（4）以优质的教学资源和优秀障。开发与相关专业课程衔接的特色教材，开发网页制作的实训指导的教学团队，为课程实施和后续课程服务提供保书，需求同时熟悉专业必修课和相关专业课程的优秀教学团队，为课程实施和后续课程服务提供有力保障。第三部分、课程目标《HTML5+CSS3网页设计基础》主要包括HTML5入门基本内容、CSS样式表、网站的总体设计等内容，使学生能熟练运用HTML中的文字、图像、列表、链接、表格、表单、多媒体等元素设计出简单的静态网页；熟练操作应用任一种支持HTML5的Web集成开发环境，如：Hbuilder、VisualStudioCode、WebStorm、Sublime、Dreamweaver等，进行网站布局的实现，能独立设计小型WEB站点。一、知识目标：1．了解网页设计的基础知识；2

2．掌握在网页中插入文本、列表、图像、超链接的方法；3．掌握表格的设计方法；4、掌握表单的设计方法5．掌握DIV+CSS布局技术；6．掌握CSS美化网页的方法；二、职业技能目标：1．能熟练运用Hbuilder、VisualStudioCode、WebStorm、Sublime、Dreamweaver等中任意一款应用软件；2.熟练掌握在网页中加入文字、列表、图像、超链接等元素的方法3.学会制作表格4.学会制作表单5．学会用DIV+CSS布局网页的方法；6.学会运用CSS对网页元素进行格式设计；三、职业素养目标：1．具有勤奋学习的态度，严谨求实、创新的工作作风；2．具有良好的心理素质和职业道德素养；3．具有高度责任心和良好的团队合作精神；4．具有科学思维方式和一定的唯物辩证法思想；5．具有较强的网页设计创意思维、艺术设计素质。四、职业技能证书考核要求：职业技能认证：web前端开发-1+X技能证书（初级）考核要求：自愿第四部分、课程内容一、理论教学部分本课程主要讲解HTML5入门基本内容、CSS样式以及网站的建设等知识。1.网页设计基础知识2.网页中使用文本、列表、图像、超链接的方法3.表格的制作方法4.表单的制作方法3

5.DIV+CSS布局网页的方法6.用CSS美化网页的方法7.CSS3高级应用8.响应式Web设计中的媒体查询、流式布局、弹性盒布局二、实践教学内容与要求：1．站点的创建要求学生掌握在Hbuilder、VisualStudioCode、WebStorm、Sublime、Dreamweaver等任意一款应用软件中建立站点的能力。2．HTML语言图文混排的网页设计要求学生能够使用HTML语言及标签属性进行网页的图文混排网页的设计。3．使用CSS样式美化网页格式使用CSS样式对网页进行美化4．使用DIV+CSS进行网页布局能够利用DIV+CSS布局，结合实例设计网页。三、教材主要内容及要求第一章HTML概述学习单元HTML概述1.了解HTML5发展历程2.理解HTML5浏览器支持情况学时6学时学习目标3.熟悉HTML5基本语法,掌握HTML5语法新特性。4.掌握HTML5相关图像、超链接标记及属性，能够制作简单的网页页面。知识点了解掌握重点难点HTML5发展历史HTML5的优势√√HTML5浏览器支持情况√创建第一个HTML5页面√HTML5文档基本格式HTML5语法√√√学习内容HTML标记√√√标记的属性HTML5文档头部相关标记标题和段落标记文本格式化标记特殊字符标记常用图像格式√√√4图像标记<img/>绝对路径和相对路径创建超链接√√√√锚点链接√第二章HTML5标签及属性学习单元HTML5标签及属性学时6学时1.掌握结构元素的使用，可以使页面分区更明确。2.理解分组元素的使用，能够建立简单的标题组。学习目标3.掌握页面交互元素的使用，能够实现简单的交互效果。4.理解文本层次语义元素，能够在页面中突出所标记5.掌握全局属性的应用，能够使页面元素实现相应的操作。的文本内容。知识点了解掌握重点√难点ul元素ol元素√dl元素√列表的嵌套应用header元素nav元素√√√√√√√√√√√√article元素section元素footer元素figure和figcaption元素hgroup元素details和summary元素progress元素meter元素time元素学习内容√√√√√√√mark元素cite元素draggable属性hidden属性spellcheck属性contenteditable属性第三章CSS3入门学习单元CSS3入门学时4学时1.了解CSS3的发展历史以及主流浏览器的支持情况。2.掌握CSS基础选择器，能够运用CSS选择器定义标记样式。学习目标3.熟悉CSS文本样式属性，能够运用相应的属性定义文本样式。4.理解CSS优先级，能够区分复合选择器权重的大小。学习内容知识点了解掌握重点难点5CSS3概述CSS3发展历史√√√CSS3浏览器支持情况CSS样式规则√引入CSS样式表CSS基础选择器字体样式属性√√√√√√文本外观属性CSS层叠性和继承性CSS优先级√√√第四章CSS3选择器学习单元CSS3选择器学时6学时1.掌握CSS3中新增加的属性选择器，能够运用属性选择器为页面中的元素添加样式。2.理解关系选择器的用法，能够准确判断元素与元素间的关系。3.掌握常用的结构化伪类选择器，能够为相同名称的元素定义不同样式。4.掌握伪元素选择器的使用，能够在页面中插入所需要的文字或图片内容。5.掌握CSS伪类，会使用CSS伪类实现超链接特效。学习目标知识点了解掌握√重点难点E[att^=value]属性选择器E[att$=value]属性选择器E[att*=value]属性选择器子代选择器（>）兄弟选择器（+、~）:root选择器√√√√√:not选择器√√:only-child选择器:first-child和:last-child选√√学习内容择器:nth-child(n)√和:nth-last-child(n)选择器:nth-of-type(n)和:nth-last-of-type(n)选择器√:empty选择器:target选择器:before选择器:after选择器√√√√√√√链接伪类第五章CSS盒子模型学习单元CSS盒子模型学时8学时61.掌握盒子的相关属性，能够制作常见的盒子模型效果。2.掌握背景属性的设置方法，能够设置背景颜色和图像。学习目标3.理解渐变属性的原理，能够设置渐变背景。4.熟悉CSS控制列表样式的方式，能够运用背景图像定义列表项目符号。知识点了解掌握重点难点认识盒子模型<div>标记√√盒子的宽与高√边框属性√边距属性√box-shadow属性box-sizing属性设置背景颜色设置背景图像背景与图片不透明度的设√√√√√√√学习内容置设置背景图像平铺设置背景图像的位置设置背景图像固定设置背景图像的大小设置背景的显示区域设置背景图像的裁剪区域设置多重背景图像背景复合属性线性渐变√√√√√√√√√径向渐变重复渐变√第六章元素的浮动与定位学习单元元素的1.理解元素的学习目标2.熟悉清除浮动的方法，3.掌握元素的定浮动与定位学时4学时浮动，能够为元素设置浮动样式。可以使用不同方法清除浮动。位，能够为元素设置常见的定位模式。知识点了解掌握重点难点元素的浮动属性float√√√清除浮动overflow属性√√元素的定位属性学习内容静态定位static√相对定位relative绝对定位absolute固定定位fixed√√√√√√z-index层叠等级属性7元素的类型<span>标记√√元素的转换√第七章表单的应用学习单元表单的应用1.了解表单功能，能够快速创建表单。学习目标2.掌握表单相关元素，能够准确定义不同的表单控件。学时6学时3.掌握表单样式的控制，能够美化表单界面。知识点了解√掌握重点难点表单的构成创建表单√表单属性√Input元素的type属性√√Input元素的其他属性√√√学习内容textarea元素select元素datalist元素keygen元素output元素CSS控制表单样式√√√√√第八章HTML5音视频技术学习单元HTML5音视频技术学时4学时1.熟悉HTML5多媒体特性。2.了解HTML5支持的学习目标3.掌握HTML5中视频的相关属性，能够在HTML5页面中添加视频文件。4.掌握HTML5中音频的相关属性，能够在HTML5页面中添加音频文件。5.了解HTML5中视频、音频的音频和视频格式。一些常见操作，并能够应用到网页制作中。知识点了解√掌握重点难点HTML5多媒体的特性视频和音频编解码器多媒体的格式√√支持视频和音频的浏览器在HTML5中嵌入视频在HTML5中嵌入音频音视频中的source元素调用网页多媒体文件CSS控制视频的宽高√√√√√学习内容√√√视频和音频的方法和事件√HTML5音视频发展趋势√第九章CSS3高级应用8学习单元CSS3高级应用1.理解过渡属性，能够控制过渡时间、动画快慢等常见过渡效果。学习目标2.掌握CSS3中的变形属性，能够制作2D转换、3D转换效果。3.掌握CSS3中的动画，能够熟练制作网页中常见的动画效果。学时8学时知识点了解掌握重点难点transition-property属性transition-duration属性transition-timing-function属性√√√transition-delay属性transition属性认识transform√√√2D转换√√√√3D转换学习内容@keyframes√√√√animation-name属性animation-duration属性animation-timing-function属性animation-delay属性animation-iteration-count属性√√animation-direction属性animation属性√√第十章跨平台移动Web技术学习单元跨平台移动Web技术1.掌握站点的学时12学时建立，能够建立规范的站点。学习目标2.完成首页面的制作，并能够实现简单的CSS3动画效果。知识点了解掌握重点难点√响应式Web设计简介响应式Web设计相关技术√CSS2媒体查询√√CSS3媒体查询的用法媒体查询常用尺寸及代码√√√学习内容创建流式布局CSS3流式排版Flexbox简介基本概念√√√√伸缩容器的属性√√√√伸缩项目的属性四、学时分配9课时分配表课时分配序号课程内容理论课习题课实训课其它共计1HTML概述332342324431332342324833662HTML5标签及属性CSS3入门3454CSS3选择器CSS盒子模型686元素的浮动与定位7表单的应用4689HTML5音视频技术CSS3高级应用4810跨平台移动Web技术1264合计第五部分、课程实施一、教学组织在教学过程中充分体现学生的主体性。具体体现在以下2个模块的教学模式上：(1)基础模块：理论讲授→小实例驱动→学生自主实践教师巡回指导→教师补授→综合实例驱动→学生自主练习教师巡回指导→展示部分学生作品师生共同欣赏、