HTML5+CSS3网站设计基础教程教学大纲

1、?HTML5+CSS3站设计根底教程?课程教学大纲课程英文名称课程编号：202101210011学分：5学分学时：76学时其中：讲课学时：47学时上机学时：26学时先修课程：计算机根底、计算机网络、计算机应用后续课程：UI设计、JavaScript网页特效适用专业：信息技术及其计算机相关专业开课部门：计算机系一、课程的性质与目标?HTML5+CSS3网站设计根底教程?是面向计算机相关专业的一门专业根底课,涉及网页根底、HTML标记、CSS样式、网页布局、变形与动画等内容,通过本课程的学习,学生能够了解网页web开展历史及其未来方向,熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果

2、,学会制作各种企业、门户、电商类网站.二、课程设计理念与思路课程设计理念：高职教育的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展,不能局限于单纯的技能练习.单纯的技能练习不是提升高等职业教育的理想课程.以水平的培养为重点,以就业为导向,培养学生具备职业岗位所需的职业水平,职业生涯发展所需的水平和终身学习的水平,实现一站式教学理念.课程设计思路：基于工作过程开发课程内容,以行动为导向进行教学内容设计,以学生为主体,以案例工程实训为手段,设计除理论学习与技能掌握相融合的课程内容体系.教学整体设计“以职业技能培养为目标,以案例工程任务实现为载体、理论学习与时间操作相结合.三、教学条件要

3、求开发工具：DreamweaverCS6四、课程的主要内容及根本要求第一章初识HTML5学习单元初识HTML5学时10学时学习目标1, 了解HTML5开展历程2, 理解HTML5浏览器支持情况3, 熟悉HTML5根本语法,掌握HTML5语法新特性.4, 掌握HTML5相关标记及属性,能够制作简单的网贝贝囿.学习内容知识点了解掌握重点难点HTML5开展历史VHTML5的优势VHTML5浏览器支持情况V创立第一个HTML5贝囿VHTML5文档根本格式VHTML5语法VHTML标记V标记的属性VHTML5文档头部相关标记V标题和段落标记V文本格式化标记V特殊字符标记V常用图像格式V7图像标记<

4、img/>V绝对路径和相对路径V7创立超链接V锚点链接V7第二章HTML5页面元素及属性学习单元HTML5页面兀素及属性学时6学时学习目标1, 掌握结构兀素的使用,可以使页面分区更明确.2, 理解分组元素的使用,能够建立简单的标题组.3, 掌握页面交互兀素的使用,能够实现简单的交互效果.4, 理解文本层次语义兀素,能够在页面中突出所标记的文本内容.5,掌握全局属性日勺应月能够使贝面R素实现相应时操作.学习内容知识点了解掌握重点难点ul儿系Vol儿条Vdl兀系V7列表的嵌套应用V7V7header几素Vnav儿素Varticle几素Vsection儿素Vfooter几素Vfigure和fi

5、gcaption几素Vhgroup儿素Vdetails和summary几素Vprogress几素Vmeter几素V7time儿素Vmark儿素Vcite几素Vdraggable属性Vhidden属性Vspellcheck属性Vcontenteditable属性V7第三章CSS3入门学习单元CSS3入门学时8学时学习目标1. 了解CSS3的开展历史以及主流浏览器的支持情况.2. 掌握CSS根底选择器,能够运用CSS选择器定义标记样式.3. 熟悉CSS文本样式属性,能够运用相应的属性定义文本样式.4. 理解CSS优先级,能够区分复合选择器权重的大小.学习内容知识点了解掌握重点难点CSS3概述VCS

6、S3开展历史VCSS3浏览器支持情况V7CSS样式规那么V弓1人CSS样式表VCSS根底选择器V字体样式属性VV文本外观属性V7VCSS层叠性和继承性VCSS优先级V7V7第四章CSS3选择器学习单元CSS3选择器学时8学时学习目标1.掌握CSS3中新增加的属性选择器,能够运用属性选择器为页面中的兀素添加样式.2. 理解关系选择器的用法,能够准确判断元素与元素间的关系.3. 掌握常用的结构化伪类选择器,能够为相同名称的兀素定义不问样式.4. 掌握伪兀素选择器的使用,能够在页面中插入所需要的文字或图片内容.5. 掌握CSS伪类,会使用CSS伪类实现超链接特效.学习内容知识点了解掌握重点难点Eat

7、tA=value属性选择器VEatt$=value属性选择器VEatt*=value属性选择器V子代选择器V兄弟选择器+、V:root选择器V:not选择器V:only-child选择器V:first-child和:last-child选择器V:nth-child(n)和:nth-last-child(n)选择器VV:nth-of-type(n)和:nth-last-of-type(n)选择器V:empty选择器V:target选择器V:before选择器VV:after选择器V7V7链接伪类V7第五章CSS盒子模型学习单元CSS盒子模型学时8学时学习目标1. 掌握盒子的相关属性,能够制作常见

8、的盒子模型效果.2. 掌握背景属性的设置方法,能够设置背景颜色和图像.3. 理解渐变属性的原理,能够设置渐变背景.4. 熟悉CSS限制列表样式的方式,能够运用背景图像定义列表工程符号.学习内容知识点了解掌握重点难点熟悉盒子模型<div>标记V盒子的宽与局V边框属性V边距属性V7box-shadow属性VV7box-sizing属性V设置背景颜色V设置背景图像V背景与图片不透明度的设置V设置背景图像平铺V设置背景图像的位置V7设置背景图像固定V设置背景图像的大小V设置背景的显示区域V设置背景图像的裁剪区域V设置多重背景图像V背景复合属性V线性渐变V径向渐变V7重复渐变第六章浮动与定位

9、学习单元浮动与定位学时8学时学习目标1. 理解兀素的浮动,能够为兀素设置浮动样式.2. 熟悉去除浮动的方法,可以使用不同方法去除浮动.3. 掌握元素的定位,能够为元素设置常见的定位模式.学习内容知识点了解掌握重点难点兀素的浮动属性floatVV去除浮动Voverflow属性V兀素的定位属性V静态定位static相对定位relativeVV绝对定位absoluteVV7固定定位fixedVz-index层叠等级属性V兀素的类型V<span>标记V7兀素的转换V7第七章表单的应用学习单元表单的应用学时8学时学习目标1. 了解表单功能,能够快速创立表单.2. 掌握表单相关兀素,能够准确定

10、义不问的表单控件.3.掌握表单样式的限制,能够美化表单界面.学习内容知识点了解掌握重点难点表单的构成V创立表单V表单属性VInput兀素的type属性VVInput兀素的其他属性Vtextarea儿素Vselect几素Vdatalist几素Vkeygen儿素V7output儿素V7CSS限制表单样式V7V7第八章多媒体技术学习单元多媒体技术学时6学时学习目标1. 熟悉HTML5多媒体特性.2. 了解HTML5支持的音频和视频格式.3. 掌握HTML5中视频的相关属性,能够在HTML5页面中添加视频文件.4. 掌握HTML5中音频的相关属性,能够在HTML5页面中添加音频文件.5. 了解HTML

11、5中视频、音频的一些常见操作,并能够应用到网页制作中.学习内容知识点了解掌握重点难点HTML5多媒体的特性V视频和音频编解码器V多媒体的格式V支持视频和音频的浏览器V在HTML5中嵌入视频VV在HTML5中嵌入音频V7V首视频中的source兀素V调用网页多媒体文件VCSS限制视频的览图视频和音频的方法和事件VV7HTML5音视频开展趋势V7第九章CSS3高级应用学习单元CSS3高级应用学时8学时学习目标1. 理解过渡属性,能够限制过渡时间、动画快慢等常见过渡效果.2. 掌握CSS3中的变形属性,能够制作2D转换、3D转换效果.3.掌握CSS3中的动回,能够熟练制作网贝中常见的动回效果.学习内

12、容知识点了解掌握重点难点transition-property属性Vtransition-duration属性Vtransition-timing-function属性Vtransition-delay属性Vtransition属性V熟悉transformV2D转换VV3D转换VV7keyframesVanimation-name属性Vanimation-duration属性Vanimation-timing-function属性Vanimation-delay属性Vanimation-iteration-count属性Vanimation-direction属性V7animation属性V7

13、第十章实战开发一制作电商网站首页面学习单元实战开发一制作电商网站首页面学时6学时学习目标1. 掌握站点的建立,能够建立标准的站点.2. 完成首页面的制作,并能够实现简单的CSS3动画效果.学习内容知识点了解掌握重点难点建立站点V站点初始化设置V效果图分析V贝囿布局V7定义公共样式V制作头部、导航及视频内容VV制作内容局部新品VV制作内容局部试装VV制作内容局部评测制作脚部信息注册及版权信息局部VV7V7五、学时分配章目讲课上机合计第一章初识HTML56学时4学时10学时第二章HTML5虫脸素及属性4学时2学时6学时第三章CSS3入门5学时3学时8学时第四章CSS3选择器5学时3学时8学时第五章CSS盒子模型5学时3学时8学时第六章浮动与定位5学时3学时8学时第七章表单的应用5学时3学时8学时第八章多媒体技术4学时2学时6学时第九章CSS3高级应用5学时3学时8学时第十章实战开发一制作电商网站首页面3学时3学时6学时合计47学时29学时76学时六、考核模式与成绩评定方法本课程为测试课程,期末测试采用百分制的闭卷测试模式.学生的测试成绩由平时成绩30%和期末测试70%组成,其中,平时成绩包括出勤5%、作业5%、上机成绩20%.七、选用教材和主要参考书本大纲是根据教材?HTML5+CSS