还剩11页未读,继续阅读
本资源只提供10页预览,全部文档请下载后查看!喜欢就下载吧,查找使用更方便
文本内容:
《HTML5+CSS3网页设计基础教程》课程标准课程代码03020038学时64学分4课程性质专业必修课课程归属软件技术教研室适用专业计应专业编写执笔人及编写日期2022年2月开设时间第2学期审定负责人及审定日期系主任及审定日期第一部分、课程定位
一、课程性质本课程是计算机应用专业一门专业必修课程
二、课程性质与目标《HTML5+CSS3网站设计基础教程》是面向计算机相关专业的一门专业基础课,涉及网页基础、HTML标记、CSS样式、网页布局、变形与动画等内容通过本课程的学习,学生能够了解网页web发展历史及其未来方向,熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果,学会制作各种企业、门户、电商类网站
三、前导、后续课程
(1)前导课程计算机应用基础
(2)后续课程JavaScript编程、Vue.js、微信小程序开发第二部分、课程设计
一、基本理念高职教育的集中实践教学环节需明确必要的理论知识的深化与知识层面的拓展,不能局限于单纯的技能训练单纯的技能训练不是提高高等职业教育的理想课程以能力的培养为重点,以就业为导向,培养学生具备职业岗位所需的职业能力,职业生涯发展所需的能力和终身学习的能力,实现一站式教学理念课时分配表课时分配序号课程内容理论课习题课实训课其它共计1HTML概述3362HTML5标签及属性3363CSS3入门2244CSS3选择器3365CSS盒子模型4486元素的浮动与定位2247表单的应用3368HTML5音视频技术2249CSS3高级应用44810跨平台移动Web技术4812合计313364第五部分、课程实施
一、教学组织在教学过程中充分体现学生的主体性具体体现在以下2个模块的教学模式上1基础模块理论讲授一小实例驱动一学生自主实践教师巡回指导一教师补授一综合实例驱动一学生自主练习教师巡回指导f展示部分学生作品师生共同欣赏、评价f教师总结2应用模块项目驱动一师生讨论项目素材一学生实践制作素材一师生讨论关键技术教师补授一学生实践完成项目一测试、评价学生作品一教师总结一企业网上平台展示优秀作品
二、实施条件
1.师资条件本课程建设已经形成一种专兼结合、具备良好双师素质、双师结构的课程教学团队,还拥有一支由一线技术人员组成的技术指导支持团队
2.设备条件多媒体机房
3.学习场所条件1)校内实训基地条件多媒体计算机2)校外实训基地条件第六部分课程考核与评价本课程考核内容包括过程性评价和总结性评价,其中过程性考核占60%,总结性评价(网站总体设计)占40%过程性评价主要包括
(1)课堂纪律、学习态度、出勤情况占30%
(2)平时作品30%
一、考核标准
1.过程性评价考核标准
(1)课堂纪律、学习态度、出勤情况(30%)采取灵活考勤方式,通过教学日志反应
(2)平时布置作业能否按时、是否独立、高质量完成(30%)
2.总结性评价考核标准
(1)期末作品网站总体设计(40%)主要从作品的美观、流畅、交互性以及行业标准来判断实际考核过程中,任课教师可结合学生实际情况和教学情况进行分值和内容的适当调整第七部分、课程资源的开发与利用多媒体课件电子教案实验指导书实训指导书校本教材课程网站技能竞赛活动推荐教材本课程所选用的教材,其内容应满足本专业标准和本课程标准的要求语言应精炼、准确、科学,体现先进性、通用性、实用性教材应图文并茂,提高学生学习兴趣与积极性建议采用以下教材《HTML5+CSS3网页设计基础教程》全丽莉主编人民邮电出版社
二、课程设计思路1以职业岗位和后续课程需求确定课程目标首先组建专业必修课、专业教师、企业专家三方人员组成的课程开发团队,进行课程服务专业的人才培养目标分析,确定计算机应用专业的岗位面向;进而确定本课程所织成的具体核心课程有哪些?同时结合行业对岗位任职的具体标准,确定课程的具体目标2依据职业标准,通过对所服务的后续课程和必修课程本身分析,以专业基础课与学习领域课程聚合点构建教学内容通过对职业标准进行剖析和本门课程所服务的后续课程本身进行分析•,得出后续专业课程负载点与专业基础课程支掠点存在聚合,将这些聚合点作为教学内容选择、实训任务确定的依据3根据教学内容需求和学生学情的分析设计教学方法和手段根据教学内容需求,以及根据学生形象思维强、逻辑思维相对弱的现状,设计案例教学法、引导文教法等,应用项目应用设计等教学手段服务抽象的理论教学4以优质的教学资源和优秀的教学团队,为课程实施和后续课程服务提供保障开发与相关专业课程衔接的特色教材,开发网页制作的实训指导书,需求同时熟悉专业必修课和相关专业课程的优秀教学团队,为课程实施和后续课程服务提供有力保障第三部分、课程目标《HTML5+CSS3网页设计基础》主要包括HTML5入门基本内容、CSS样式表、网站的总体设计等内容,使学生能熟练运用HTML中的文字、图像、列表、链接、表格、表单、多媒体等元素设计出简单的静态网页;熟练操作应用任一种支持HTML5的Web集成开发环境,如Hbuilder Visual Studio Code、WebStorm、Sublime、Dream weaver等,进行网站布局的实现,能独立设计小型WEB站点
一、知识目标I.了解网页设计的基础知识;
2.掌握在网页中插入文本、列表、图像、超链接的方法;
3.掌握表格的设计方法;
4、掌握表单的设计方法
5.掌握DIV+CSS布局技术;
6.掌握CSS美化网页的方法;
二、职业技能目标
1.能熟练运用Hbuilder VisualStudio CodeWebStormSublime Dreamweaver等中任意一款应用软件;
2.熟练掌握在网页中加入文字、列表、图像、超链接等元素的方法
3.学会制作表格
4.学会制作表单
5.学会用DIV+CSS布局网页的方法;
6.学会运用CSS对网页元素进行格式设计;
三、职业素养目标
1.具有勤奋学习的态度,严谨求实、创新的工作作风;
2.具有良好的心理素质和职业道德素养;
3.具有高度责任心和良好的团队合作精神;
4.具有科学思维方式和一定的唯物辩证法思想;
5.具有较强的网页设计创意思维、艺术设计素质
四、职业技能证书考核要求职业技能认证web前端开发-1+X技能证书(初级)考核要求自愿第四部分、课程内容
一、理论教学部分本课程主要讲解HTML5入门基本内容、CSS样式以及网站的建设等知识
1.网页设计基础知识
2.网页中使用文本、列表、图像、超链接的方法
3.表格的制作方法
4.表单的制作方法
5.DIV+CSS布局网页的方法
6.用CSS美化网页的方法
7.CSS3高级应用
8.响应式Web设计中的媒体查询、流式布局、弹性盒布局
二、实践教学内容与要求
1.站点的创建要求学生掌握在Hbuilder、VisualStudioCodeWebStormSublimeDreamweaver等任意一款应用软件中建立站点的能力
2.HTML语言图文混排的网页设计要求学生能够使用HTML语言及标签属性进行网页的图文混排网页的设计
3.使用CSS样式美化网页格式使用CSS样式对网页进行美化
4.使用DIV+CSS进行网页布局能够利用DIV+CSS布局,结合实例设计网页
三、教材主要内容及要求第一章HTML概述学习单元HTML概述|学时6学时
1.了解HTML5发展历程
2.理解HTML5浏览器支持情况学习目标
3.熟悉HTML5基本语法,掌握HTML5语法新特性
4.掌握HTML5相关图像、超链接标记及属性,能够制作简单的网页页面知识点了解掌握重点难点HTML5发展历史V HTML5的优势V HTML5浏览器支持情况V创建第一个HTML5页面V HTML5文档基本格式V HTML5语法V学习内容HTML标记V标记的属性V HTML5文档头部相关标记V标题和段落标记V文本格式化标记V特殊字符标记V常用图像格式V图像标记img/V绝对路径和相对路径V创建超链接V锚点链接V V第二章HTML5标签及属性学习单元HTML5标签及属性学时6学时
1.掌握结构元素的使用,可以使页面分区更明确
2.理解分组元素的使用,能够建立简单的标题组学习目标
3.掌握页面交互元素的使用,能够实现简单的交互效果
4.理解文本层次语义元素,能够在页面中突出所标记的文本内容
5.掌握全局属性的应用,能够使页面元素实现相应的操作知识点了解掌握重点难点ul素V ol元素V dl元素V列表的嵌套应用V Vheader元素V nav元素V article元素V section元素V footer元素V figure和figcaption元素V学习内容hgroup元素V details和summary元素V progress元素V meter元素V time元素V mark元素V cite兀素V draggable属性V hidden属性V spellcheck属性V contenteditable属性V第三章CSS3入门学习单元CSS3入门学时4学时
1.了解CSS3的发展历史以及主流浏览器的支持情况
2.掌握CSS基础选择器,能够运用CSS选择器定义标记样式学习目标
3.熟悉CSS文本样式属性,能够运用相应的属性定义文本样式
4.理解CSS优先级,能够区分复合选择器权重的大小学习内容知识点了解掌握重点难点CSS3概述CSS3发展历史V CSS3浏览器支持情况V CSS样式规则V引入CSS样式表V CSS基础选择器V字体样式属性V V文本外观属性V V CSS层叠性和继承性V CSS优先级V V第四章CSS3选择器学习单元CSS3选择器|学时6学时
1.掌握CSS3中新增加的属性选择器,能够运用属性选择器为页面中的元素添加样式
2.理解关系选择器的用法,能够准确判断元素与元素间的关系学习目标
3.掌握常用的结构化伪类选择器,能够为相同名称的元素定义不同样式
4.掌握伪元素选择器的使用,能够在页面中插入所需要的文字或图片内容
5.掌握CSS伪类,会使用CSS伪类实现超链接特效知识点了解掌握重点难点E[att A=value]属性选择器V E[att$=value]属性选择器V E[ail*=va2e]属性选择器V子代选择器(>)V兄弟选择器(+、Vroot选择器:not选择器V:only-child选择器V:first-child和:last-child选择V学习内容器:nth-childn V和:nth-last-childn选择器:nth-of-typcn V和:nth-last-of-typen选择器:empty选择器V:target选择器V:be fore选择器V V:after选择器V V链接伪类V第五章CSS盒子模型学习单元CSS盒子模型学时8学时
1.掌握盒子的相关属性,能够制作常见的盒子模型效果
2.掌握背景属性的设置方法,能够设置背景颜色和图像学习目标
3.理解渐变属性的原理,能够设置渐变背景
4.熟悉CSS控制列表样式的方式,能够运用背景图像定义列表项目符号知识点了解掌握重点难点认识盒子模型V div标记V盒子的宽与高边框属性V边距属性V box-shadow属性V box-sizing属性V设置背景颜色V设置背景图像V背景与图片不透明度的设置V学习内容设置背景图像平铺V设置背景图像的位置V设置背景图像固定V设置背景图像的大小V设置背景的显示区域V设置背景图像的裁剪区域V设置多重背景图像V背景复合属性V线性渐变V径向渐变V重复渐变V第六章元素的浮动与定位学习单元元素的浮动与定位I学时4学时
1.理解元素的浮动,能够为元素设置浮动样式学习目标
2.熟悉清除浮动的方法,可以使用不同方法清除浮动
3.掌握元素的定位,能够为元素设置常见的定位模式知识点了解掌握重点难点元素的浮动属性float V清除浮动V overflow属性V元素的定位属性V学习内容静态定位static V相对定位relative V V绝对定位absolute V V固定定位fixed Vz-index层叠等级属性V元素的类型V span标记V元素的转换V第七章表单的应用学习单元表单的应用学时6学时
1.了解表单功能,能够快速创建表单学习目标
2.掌握表单相关元素,能够准确定义不同的表单控件
3.掌握表单样式的控制,能够美化表单界面知识点了解掌握重点难点表单的构成V创建表单表单属性V Input元素的type属性V VInput元素的其他属性V学习内容textarea元素V select元素dalalist元素V keygen元素V output元素V CSS控制表单样式V第八章HTML5音视频技术学习单元HTML5音视频技术|学时4学时
1.熟悉HTML5多媒体特性
2.了解HTML5支持的音频和视频格式学习目标
3.掌握HTML5中视频的相关属性,能够在HTML5页面中添加视频文件
4.掌握HTML5中音频的相关属性,能够在HTML5页面中添加音频文件
5.了解HTML5中视频、音频的一些常见操作,并能够应用到网页制作中知识点了解掌握重点难点HTML5多媒体的特性V视频和音频编解码器V多媒体的格式支持视频和音频的浏览器在HTML5中嵌入视频V学习内容在HTML5中嵌入音频V音视频中的source元素V调用网页多媒体文件V CSS控制视频的宽高V视频和音频的方法和事件V HTML5音视频发展趋势V第九章CSS3高级应用学习单元CSS3高级应用学时8学时
1.理解过渡属性,能够控制过渡时间、动画快慢等常见过渡效果学习目标
2.掌握CSS3中的变形属性,能够制作2D转换、3D转换效果
3.掌握CSS3中的动画,能够熟练制作网页中常见的动画效果知识点了解掌握重点难点transition-property属性V transition-duration属性V V transition-timing-function属性transition-delay属性Vtransition属性认识transform V2D转换V V3D转换V V学习内容@keyframes V animation-name属性V animation-duration属性V Vanimation-timing-function属性animation-delay属性V Vanimation-iteration-count属性animation-direction属性Vanimation属性V第十章跨平台移动Web技术学习单元跨平台移动Web技术学时12学时
1.掌握站点的建立,能够建立规范的站点学习目标
2.完成首页面的制作,并能够实现简单的CSS3动画效果知识点了解掌握重点难点响应式Web设计简介响应式Web设计相关技术V CSS2媒体查询VCSS3媒体查询的用法V媒体查询常用尺寸及代码学习内容创建流式布局V VCSS3流式排版V VFlcxbox简介V基本概念V伸缩容器的属性VV伸缩项目的属性VV
四、学时分配。