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

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

2、握网络中常见的网页布 局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。二、课程设计理念与思路课程设计理念： 高职教育的集中实践教学环节需明确必要的理论知识的生化与知识层面 的拓展，不能局限于单纯的技能训练。单纯的技能训练不是提高高等职业教育的理想课程。 以能力的培养为重点， 以就业为导向， 培养学生具备职业岗位所需的职业能力， 职业生涯发 展所需的能力和终身学习的能力，实现一站式教学理念。课程设计思路： 基于工作过程开发课程内容， 以行动为导向进行教学内容设计， 以学生 为主体，以案例（项目）实训为手段，设计除理论学习与技能掌握相融合的课程内容体系。 教学整体设计“以职业技能培养为

3、目标，以案例（项目）任务实现为载体、理论学习与时间 操作相结合” 。三、教学条件要求开发工具：Dreamweaver CS6四、课程的主要内容及基本要求第一章初识HTML5学习单元初识HTML5学时10学时学习目标1. 了解HTML5发展历程2. 理解HTML5浏览器支持情况3. 熟悉HTML5基本语法，掌握HTML5语法新特性。4. 掌握HTML5相关标记及属性，能够制作简单的网页页面。学习内容知识点了解掌握重点难点HTML5发展历史VHTML5的优势VHTML5浏览器支持情况V创建第一个HTML5页面VHTML5文档基本格式VHTML5语法VHTML标记V标记的属性VHTML5文档头部相关

4、标记V标题和段落标记V文本格式化标记V特殊字符标记V常用图像格式V图像标记<img/>V绝对路径和相对路径V创建超链接V锚点链接VV第二章 HTML5页面元素及属性学习单元HTML5页面兀素及属性学时6学时学习目标1. 掌握结构兀素的使用，可以使页面分区更明确。2. 理解分组元素的使用，能够建立简单的标题组。3. 掌握页面交互兀素的使用，能够实现简单的交互效果。4. 理解文本层次语义兀素，能够在页面中突出所标记的文本内容。5. 掌握全局属性的应用，能够使页面兀素实现相应的操作。学习内容知识点了解掌握重点难点ul兀素Vol兀素Vdl兀素V列表的嵌套应用VVheader兀素Vnav兀素

5、Varticle 兀素Vsection 兀素Vfooter兀素Vfigure 禾口 figcaption 兀素Vhgroup兀素Vdetails 禾口 summary 兀素Vprogress 兀素Vmeter兀素Vtime兀素Vmark兀素Vcite兀素Vdraggable 属性Vhidden属性Vspellcheck 属性Vcontenteditable 属性V第三章 css次门学习单元CSS3入门学时8学时学习目标1. 了解CSS3的发展历史以及主流浏览器的支持情况。2. 掌握CSS基础选择器，能够运用 CSS选择器疋义标记样式。3. 熟悉CSS文本样式属性，能够运用相应的属性定义文本样式

6、。4. 理解CSS优先级，能够区分复合选择器权重的大小。学习内容知识点了解掌握重点难点CSS3概述VCSS3发展历史VCSS3浏览器支持情况VCSS样式规则V引入CSS样式表VCSS基础选择器V字体样式属性VV文本外观属性VVCSS层叠性和继承性VCSS优先级VV第四章 CSS3选择器学习单元CSS3选择器学时8学时学习目标1. 掌握CSS3中新增加的属性选择器，能够运用属性选择器为页面中的兀素 添加样式。2. 理解关系选择器的用法，能够准确判断元素与元素间的关系。3. 掌握常用的结构化伪类选择器，能够为相冋名称的兀素定义不冋样式。4. 掌握伪兀素选择器的使用，能够在页面中插入所需要的文字或图

7、片内容。5. 掌握CSS伪类，会使用CSS伪类实现超链接特效。学习内容知识点了解掌握重点难点EattA=value属性选择器VEatt$=value属性选择器VEatt*=value属性选择器V子代选择器（）V兄弟选择器（+、）V:root选择器V:not选择器V:only-child 选择器V:first-child 和:last-child 选 择器V:n th-child( n) 和:nth-last-child(n)选择器VV:n th-of-type( n) 和:nth-last-of-type(n)选择 器V:empty选择器V:target选择器V:before选择器VV:aft

8、er选择器VV链接伪类V第五章 CSS盒子模型学习单元CSS盒子模型学时8学时学习目标1. 掌握盒子的相关属性，能够制作常见的盒子模型效果。2. 掌握背景属性的设置方法，能够设置背景颜色和图像。3. 理解渐变属性的原理，能够设置渐变背景。4. 熟悉CSS控制列表样式的方式，能够运用背景图像定义列表项目符号。学习内容知识点了解掌握重点难点认识盒子模型V<div >标记V盒子的宽与高V边框属性V边距属性Vbox-shadow 属性VVbox-siz ing 属性V设置背景颜色V设置背景图像V背景与图片不透明度的设 置V设置背景图像平铺V设置背景图像的位置V设置背景图像固定V设置背景图像

9、的大小V设置背景的显示区域V设置背景图像的裁剪区域V设置多重背景图像V背景复合属性V线性渐变V径向渐变V重复渐变第六章浮动与定位学习单元浮动与定位学时8学时学习目标1. 理解兀素的浮动，能够为兀素设置浮动样式。2. 熟悉清除浮动的方法，可以使用不同方法清除浮动。3. 掌握兀素的疋位，能够为兀素设置常见的疋位模式。学习内容知识点了解掌握重点难点兀素的浮动属性floatVV清除浮动Voverflow 属性V兀素的疋位属性V静态定位staticV相对定位 relativeVV绝对定位 absoluteVV固定定位 fixedVz-i ndex层叠等级属性V兀素的类型V<spa n>标记V

10、兀素的转换V第七章表单的应用学习单元表单的应用:学时8学时学习目标1. 了解表单功能，能够快速创建表单。2. 掌握表单相关兀素，能够准确定义不冋的表单控件。3. 掌握表单样式的控制，能够美化表单界面。学习内容知识点了解掌握重点难点表单的构成V创建表单V表单属性VIn put兀素的type属性VVIn put兀素的其他属性Vtextarea 兀素Vselect兀素Vdatalist 兀素Vkeygen兀素Voutput兀素VCSS控制表单样式VV第八章多媒体技术学习单元多媒体技术学时6学时学习目标1. 熟悉HTML5多媒体特性。2. 了解HTML5支持的音频和视频格式。3. 掌握HTML5中视频

11、的相关属性，能够在HTML5页面中添加视频文件。4. 掌握HTML5中音频的相关属性，能够在HTML5页面中添加音频文件。5. 了解HTML5中视频、音频的一些常见操作，并能够应用到网页制作中。学习内容知识点了解掌握重点难点HTML5多媒体的特性V视频和音频编解码器V多媒体的格式V支持视频和音频的浏览器V在HTML5中嵌入视频VV在HTML5中嵌入音频VV音视频中的source兀素V调用网页多媒体文件VCSS控制视频的宽咼V视频和音频的方法和事件VHTML5音视频发展趋势V第九章 CSS3高级应用学习单元CSS3高级应用学时8学时学习目标1. 理解过渡属性，能够控制过渡时间、动画快慢等常见过渡

12、效果。2. 掌握CSS3中的变形属性，能够制作 2D转换、3D转换效果。3. 掌握CSS3中的动画，能够熟练制作网页中常见的动画效果。学习内容知识点了解掌握重点难点transition-property 属性Vtransition-duration 属性 V tran siti on-ti min g-fu ncti on 属性Vtransition-delay 属性Vtransition 属性V认识 transformV2D转换VV3D转换VVkeyframesVanimation-name 属性Vanimation-duration 属性Van imatio n-timi ng-fu nc

13、tio n 属性Vanimation-delay 属性Vani mati on-iterati on-count属性Vani mati on-direct ion 属性Vanimation 属性V第十章实战开发一制作电商网站首页面学习单元实战开发一制作电商网站首页面学时6学时学习目标1. 掌握站点的建立，能够建立规范的站点。2. 完成首页面的制作，并能够实现简单的CSS3动画效果。学习内容知识点了解掌握重点难点建立站点V站点初始化设置V效果图分析V页面布局V定义公共样式V制作头部、导航及视频内 容VV制作内容部分（新品）VV制作内容部分（试装）VV制作内容部分（评测）VV制作脚部（信息注册）及

14、 版权信息部分V五、学时分配章目讲课上机合计第一章初识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%）。七、选用教材和主要参考书本大纲