《HTMLCSS网站设计基础教程》教学指导大纲.docx

1、HTMLCSS网站设计基础教程教学指导大纲HTML5+CSS3网站设计基础教程课程教学大纲（课程英文名称）课程编号：201601210011学分：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发展历史HTML5的优势HTML5浏览器支持情况创建第一个HTML5页面HTML5文档基本格式HTML5语法HTML标记标记的属性HTML5文档头部相关标记标题和段落标记文本格式化标记特殊字符标记常

4、用图像格式图像标记绝对路径和相对路径创建超链接锚点链接第二章HTML5页面元素及属性学习单元HTML5页面元素及属性学时6学时学习目标1. 掌握结构元素的使用，可以使页面分区更明确。2. 理解分组元素的使用，能够建立简单的标题组。3. 掌握页面交互元素的使用，能够实现简单的交互效果。4. 理解文本层次语义元素，能够在页面中突出所标记的文本内容。5. 掌握全局属性的应用，能够使页面元素实现相应的操作。学习内容知识点了解掌握重点难点ul元素ol元素dl元素列表的嵌套应用header元素nav元素article元素section元素footer元素figure和figcaption元素hgroup元

5、素details和summary元素progress元素?meter元素time元素mark元素cite元素draggable属性hidden属性spellcheck属性contenteditable属性第三章CSS3入门学习单元CSS3入门学时8学时学习目标1. 了解CSS3的发展历史以及主流浏览器的支持情况。2. 掌握CSS基础选择器，能够运用CSS选择器定义标记样式。3. 熟悉CSS文本样式属性，能够运用相应的属性定义文本样式。4. 理解CSS优先级，能够区分复合选择器权重的大小。学习内容知识点了解掌握重点难点CSS3概述CSS3发展历史CSS3浏览器支持情况CSS样式规则引入CSS样式

6、表CSS基础选择器字体样式属性文本外观属性CSS层叠性和继承性CSS优先级第四章CSS3选择器学习单元CSS3选择器学时8学时学习目标1. 掌握CSS3中新增加的属性选择器，能够运用属性选择器为页面中的元素添加样式。2. 理解关系选择器的用法，能够准确判断元素与元素间的关系。3. 掌握常用的结构化伪类选择器，能够为相同名称的元素定义不同样式。4. 掌握伪元素选择器的使用，能够在页面中插入所需要的文字或图片内容。5. 掌握CSS伪类，会使用CSS伪类实现超链接特效。学习内容知识点了解掌握重点难点Eatt=value属性选择器Eatt$=value属性选择器Eatt*=value属性选择器子代选择

7、器（）兄弟选择器（+、）:root选择器:not选择器:only-child?选择器:first-child和:last-child选择器:和:nth-last-child(n)选择器:和:nth-last-of-type(n)选择器:target选择器:选择器:选择器链接伪类第五章CSS盒子模型学习单元CSS盒子模型学时8学时学习目标1. 掌握盒子的相关属性，能够制作常见的盒子模型效果。2. 掌握背景属性的设置方法，能够设置背景颜色和图像。3. 理解渐变属性的原理，能够设置渐变背景。4. 熟悉CSS控制列表样式的方式，能够运用背景图像定义列表项目符号。学习内容知识点了解掌握重点难点认识盒子模

8、型标记盒子的宽与高边框属性边距属性box-shadow属性box-sizing属性设置背景颜色设置背景图像背景与图片不透明度的设置设置背景图像平铺设置背景图像的位置设置背景图像固定设置背景图像的大小设置背景的显示区域设置背景图像的裁剪区域设置多重背景图像背景复合属性线性渐变径向渐变重复渐变第六章浮动与定位学习单元浮动与定位学时8学时学习目标1. 理解元素的浮动，能够为元素设置浮动样式。2. 熟悉清除浮动的方法，可以使用不同方法清除浮动。3. 掌握元素的定位，能够为元素设置常见的定位模式。学习内容知识点了解掌握重点难点元素的浮动属性float清除浮动overflow属性元素的定位属性静态定位st

9、atic相对定位relative绝对定位absolute固定定位fixedz-index层叠等级属性元素的类型标记元素的转换第七章表单的应用学习单元表单的应用学时8学时学习目标1. 了解表单功能，能够快速创建表单。2. 掌握表单相关元素，能够准确定义不同的表单控件。3. 掌握表单样式的控制，能够美化表单界面。学习内容知识点了解掌握重点难点表单的构成创建表单表单属性Input元素的type属性Input元素的其他属性textarea元素select元素datalist元素keygen元素output元素CSS控制表单样式第八章多媒体技术?学习单元多媒体技术?学时6学时学习目标1. 熟悉HTML5

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

11、1. 理解过渡属性，能够控制过渡时间、动画快慢等常见过渡效果。2. 掌握CSS3中的变形属性，能够制作2D转换、3D转换效果。3. 掌握CSS3中的动画，能够熟练制作网页中常见的动画效果。学习内容知识点了解掌握重点难点transition-property属性transition-duration属性transition-timing-function属性transition-delay属性transition属性认识transform2D转换3D转换keyframesanimation-name属性animation-duration属性animation-timing-function属性

12、animation-delay属性animation-iteration-count属性animation-direction属性animation属性第十章实战开发制作电商网站首页面学习单元实战开发制作电商网站首页面学时6学时学习目标1. 掌握站点的建立，能够建立规范的站点。2. 完成首页面的制作，并能够实现简单的CSS3动画效果。学习内容知识点了解掌握重点难点建立站点站点初始化设置效果图分析页面布局定义公共样式制作头部、导航及视频内容制作内容部分（新品）制作内容部分（试装）制作内容部分（评测）制作脚部（信息注册）及版权信息部分五、学时分配章目讲课上机合计第一章初识HTML56学时4学时10

13、学时第二章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+CSS3网站设计基础教程所设计的。参考书籍：传智播客.网页设计与制作（HTML+CSS）中国铁道出版社.201408传智播客.HTML+CSS+JavaScript网页制作案例教程人民邮电出版社.201508八、大纲说明本课程的授课模式为：课堂授课+上机，其中，课堂主要采用多媒体的方式进行授课，并且会通过测试题阶段测试学生的掌握程度；上机主要是编写程序，要求学生动手完成指定的程序设计或验证。撰写人：审定人：批准人：执行时间：