HTML+CSS网站设计基础教程教学大纲

1、HTML5+CSS3站设计基础教程课程教学大纲（课程英文名称）课程编号：201601210011学 分：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文档头部相关标记V标题和段落标记V义本格式化标记V特殊字符标记V常用图像格

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

5、gure和 figcaption 兀素Vhgroup兀素Vdetails和 summary兀素Vprogress 兀素？Vmeter兀素Vtime兀素Vmark兀素Vcite兀素Vdraggableil 性Vhidden属性Vspellcheck属性Vcontenteditable属性V第三章 CSS3入门学习单元CSS3入门学时8学时学习目标1, 了解CSS3勺发展历史以及主流浏览器的支持情况。2,掌握CSS®础选择器，能够运用 CSS选择器定义标记样式。3,熟悉CS成本样式属性，能够运用相应的属性定义文本样式。4,理解CSStt先级，能够区分复合选择器权重的大小。学习内容知识点了

6、解重点难点CSS3既述VCSS3发展历史VCSS3SU览器支持情况VcsS羊式规则V引入csS羊式表VCSS基础选择器V字体样式属性VV义本外观属性VVCSS层叠性和继承性VCSStt先级VV第四章 CSS斑择器学习单元CSS建择器学时8学时学习目标1 .掌握CSS3中新增加的属性选择器，能够运用属性选择器为页面 中的元素添加样式。2 .理解关系选择器的用法，能够准确判断元素与元素间的关系。3 .掌握常用的结构化伪类选择器，能够为相同名称的元素定义不同 样式。4 .掌握伪兀素选择器的使用，能够在页面中插入所需要的文字或图 片内容。5 .掌握CSSft类，会使用CSS伪类实现超链接特效。学习内容

7、知识点了解重点难点EattA=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)V和:nth-last-of-type(n选择器:empty选择器V:target选择器V:before选择器VV:after选择器VV链接伪类V第五章 CSS盒子模型学习单元CSS盒子模型学时8学时学习目标1.掌握盒

8、子的相关属性，能够制作常见的盒子模型效果。2,掌握背景属性的设置方法，能够设置背景颜色和图像。3.理解渐变属性的原理，能够设置渐变背景。4,熟悉CSSS制列表样式的方式，能够运用背景图像定义列表项目 符号。学习内容知识点了解重点难点认识盒子模型V<div>标记V益子的范与局V边框属性V边距属性Vbox-shadow 属性VVbox-sizing 属性V设置背景颜色V设置背景图像V背景与图片不透明度的设置V设置背景图像平铺V设置背景图像的位置V设置背景图像固定V设置背景图像的大小V设置背景的显示区域V设置背景图像的裁剪区域V设置多重背景图像V背景复合属性V线性渐变V径向渐变V重复渐变

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

10、素，能够准确定义不同的表单控件。3.掌握表单样式的控制，能够美化表单界面。学习内容知识点了解重点难点表单的构成V创建表单V表单属性VInput兀素的type属性VVInput兀素的其他属性Vtextarea兀素VselectTEltVdatalist 兀素VkeygenjEltVoutput兀素Vcsss制表单样式VV第八章多媒体技术？学习单元多媒体技术？学时6学时学习目标1,熟悉HTML5多媒体特性。2, 了解HTML5支持的音频和视频格式。3,掌握HTML5中视频的相关属性，能够在 HTML5页面中添加视 频文件。4,掌握HTML5中音频日勺相关属性，能够在 HTML5贝闻中添加音 频文件

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

12、动回效果。学习内容知识点了解重点难点trans币on-property 属性Vtrans币on-duration 属性Vtransition-timing-function属性Vtransition-delay属性Vtransition 属性V认识 transformV2D转换VV3D转换VVkeyframesVanimation-name属性Vanimation-duration 属性Vanimation-timing-function属性Vanimation-delayH 性Vanimation-iteration-count属性Vanimation-direction 属性Vanimat

13、ion 属性V第十章实战开发一制作电商网站首页面学习单元实战开发一制作电商网站首贝闻学时6学时学习目标1 .掌握站点的建立，能够建立规范的站点。2 .完成首页面的制作，并能够实现简单的 CSS冽画效果。学习内容知识点了解重点难点建立站点V站点初始化设置V效果图分析V贞向布局V定义公共样式V制作头部、导航及视频内容VV制作内容部分（新品）VV制作内咨部分（试装）VV制作内咨部分（评测）VV制作脚部（信息注册）及版权信息部分V五、学时分配章目讲课上机合计第一章初识HTML56学时4学时10学时第二章 HTML5?页面元素及属性4学时2学时6学时第三章 CSS3入门5学时3学时8学时第四章 CSS斑择器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+CSS3