《网页设计与制作》授课教案-参考_第1页
《网页设计与制作》授课教案-参考_第2页
《网页设计与制作》授课教案-参考_第3页
《网页设计与制作》授课教案-参考_第4页
《网页设计与制作》授课教案-参考_第5页
已阅读5页，还剩57页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

教案

2018～2019学年第1学期课程名称：网页设计与制作课程类别：必修课所属部门：主讲教师：职称：授课班级：1使用教材：

教务处制二○18年9月使用说明（打印在封面反页）理论、实验、理实一体、实训和实习课程的教案模版一致。新入职我校的教师（副高职称以上、曾讲授过本课程的教师除外）在担任教学工作的前两年、其他教师上新课的第一轮，教案须手写。除此以外，教案可手写，可为电子文档。理论、实验、理实一体课程的节次以2节为单位进行填写；实习、实训课程的节次根据教学内容选取，一般为2～4节，最大节次单元不超过6节。每一轮课程教案，要体现出内容的更新。教案须以纸质形式带入课堂。教案章节或项目名称课程介绍、初识HTML5本次授课类型□理论实验□理实一体□实训□实习班级地点周次星期节次授课进度310171J2-3061二1-2符合□超前□滞后□符合□超前□滞后□符合□超前□滞后□符合□超前□滞后教学目标全面了解本课程的地位、教学目标、教学内容激发学习兴趣，鼓励学生深入本课程与相关课程的学习了解HTML5发展历程、HTML5优势、HTML5浏览器支持情况、创建第一个HTML5页面，回去安装网页制作的基本环境教学重点课程的地位、教学目标、教学内容介绍、激发学习兴趣教学难点学习兴趣、安装DreamweaverCC版本、HBuilder、Notepad++等之一的开发工具教学设计教学环节内容要点与手段时间分配课程介绍教师自我介绍，创建班级QQ交流群，公布交流方式本课程的地位、教学目标、教学内容暑期生活，讨论？讲授法师生交互20分钟岗位查找上智联招聘、51JOB等网站搜索相关的岗位学生自己描述岗位需求讨论法20分钟明确目标就业：技能培养是专业核心课程的目标，同时要培养学生的学习能力与素质讲授法师生交互10分钟知识讲授掌握网页设计的流程；了解HTML5的发展历史与优势；掌握HTML5的编码方式。讲授法30分钟课程小结再次激发学习兴趣，明确学习目标总结课程教学内容作业，课后安装或HBuilder网页设计工具讲授法10分钟教学效果及改进思路教案一、教师自我介绍与课程介绍教师姓名：刘万辉，创建班级QQ群，或者加入班级QQ群了解学生，认识学生，了解学生的分布，将来的就业意向《HTML5+CSS3网站设计基础》课程是软件技术、计算机维护技术、计算机应用技术等专业的专业基础课程。本课程主要培养学生的静态页面设计能力，该课程综合HTML语言、CSS样式两项技术，通过“教、学、做”理论与实践一体化教学，使学生掌握Web客户端静态页面编写的基本方法，并逐步形成正确的客户端静态页面设计思想，能够熟练地使用HTML语言、CSS样式设计进行页面设计，为Web开发后续课程打下基础。本课程的先导课程有计算机技术基础、程序设计基础、计算机网络技术、操作系统等，后续课程有C#程序设计、基础及应用、JSPweb项目开发、综合项目化实训等。考核方式综合素质评价20%+过程性考核20%+终结性考核40%。暑假大家都干了什么？讨论二、岗位查找上智联招聘、51JOB等网站搜索相关的岗位，学生自己描述岗位需求例如：68design网站岗位/job/?p=2PHP工程师：待遇8000左右项目实施人员项目售后商品营销等平面设计师-网页设计-软件界面设计等：待遇3000-15000左右三、明确目标依据自身的优势确定奋斗目标：愿景——努力奋斗1年，幸福生活一辈子！HTML5还能火多久？人为什么工作？工作能给我们带来什么？活着（生存所需、责任-自己与家人、境界-成就感、满足感，实现自我价值）四、知识讲授HTML5发展历程、HTML5优势、HTML5浏览器支持情况、创建第一个HTML5页面掌握网页设计的流程；掌握HTML5的编码方式。/v5189664-172510-838747.html五、课堂小结课程主线：制定目标，了解网页环境基本配置的使用，最后综合项目。总结课程教学内容，明确学习目标，再次激发学习兴趣。章节或项目名称任务2、体验HTML5的页面特征本次授课类型□理论□实验理实一体□实训□实习班级地点周次星期节次授课进度310171J1-2101三5-6符合□超前□滞后□符合□超前□滞后教学目标了解HTML5的基本文档格式掌握HTML5文件的编写工具掌握HTML的基本文档设置掌握使用HTML5编写简单的Web页面体验HTML5的页面特征教学重点HTML5的基本语法、基本标记HTML5文件的编写工具教学难点HTML5的页面特征教学设计教学环节内容要点与手段时间分配知识讲授HTML5的基本文档格式、HTML5的基本语法、基本标记、属性讲授法10分钟学生实践学生创建一个新页面进行体验基本文档格式、HTML5的基本语法、基本标记、属性演示教学10分钟学生实践编码体验HTML+CSS的编码方式实验教学40分钟学生实践编码体验使用HTML5中HTML+CSS的编码方式讲授法20分钟课程小结HTML5基本标签与文本控制标记、图像标记，体验编码工具的使用讲授法10分钟教学效果及改进思路一、知识讲授与学生实践1通过DW或者HBuilder工具创建一个HTML5文件。体验HTML5的基本格式认识<!doctype><html><head><body>基本标签<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>教育门户</title></head><body></body></html>2认识HTML5的基本语法规则3认识HTML单标签、双标签、注释标签的使用、认识属性的使用4认识head标签的使用二、知识讲授与学生实践HTML5的基本语法、基本标记、属性HTML5的基本结构与编码方式三、知识讲授与学生实践讲解<img标签的基本使用方法与属性规则四、学生实践编码体验HTML+CSS的编码方式编码体验HMTL5中HTML+CSS的编码方式五、课堂小结HTML5基本标签与文本控制标记、图像标记、超链接标记的使用，要多记录，多实践。章节或项目名称任务3、文字与段落标签的使用本次授课类型□理论□实验理实一体□实训□实习班级地点周次星期节次授课进度310171J1-2042二1-2符合□超前□滞后□符合□超前□滞后教学目标了解HTML5的基本文档格式掌握HTML5的基本语法、基本标记、属性掌握HTML的head标记的使用方法掌握HTML的文本控制标签的使用方法掌握HTML的图像控制标签的使用方法教学重点基本语法、基本标记、属性HTML的head标记的使用方法HTML的文本控、图像标签的使用方法教学难点HTML的文本控制标签的使用方法HTML的图像控制标签的使用方法教学设计教学环节内容要点与手段时间分配知识讲授HTML5的基本文档格式、HTML5的基本语法、基本标记、属性讲授法10分钟学生实践学生创建一个新页面进行体验基本文档格式、HTML5的基本语法、基本标记、属性演示教学10分钟知识讲授文本控制标签的使用方法标题、段落、换行、水平线文本的格式化标签b、i、strong、s、u等实验教学20分钟学生实践创建一个新页面进行体验基本文档标签的使用讲授法30分钟知识讲授图像标签的基本使用方法实验教学10分钟课程小结HTML5基本标签与文本控制标记、图像标记的使用，要多记录，多实践讲授法10分钟教学效果及改进思路一、知识讲授与学生实践1．HTML5的基本文档格式1.文档类型声明<!DOCTYPEhtml>2.内容类型HTML5的文件扩展名仍为.html和.htm，内容类型仍为text/html。3.字符编码在HTML5中，使用<meta>元素直接追加charset属性的方式来指定字符编码，代码如下：<metacharset="UTF-8"/>4.不区分英文字母的大小写HTML5不区分英文字母的大小写，如果要兼顾XHTML的兼容性，建议采用小写英文字母。5.代码的注释HTML5代码注释采用<!--...-->标签，例如。<!--这是一段注释。注释不会在浏览器中显示。--><p>这是一段普通的段落。</p>6.可以省略标签的元素在HTML5中，元素的标签可以省略。具体包括3种类型：第一、不允许写结束标签的元素有：area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track和wbr。第二、可以省略结束标签的元素有：li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td和th。第三、开始与结束标签都可以省略的元素有：html、head、body、colgroup和tbody。7.可以省略引号属性值两边既可以使用双引号，也可以使用单引号，还可以省略引号。例如下面的三行代码都是合法的。8.具有布尔值的属性对于具有boolean值的属性，如disabled与readonly等，当只写属性而不指定属性值时，表示属性值为true；如果想要将属性值设置为false，可以不使用该属性。另外，要想将属性值设定为true，也可以将属性名设置为属性值，或将空字符设定为属性值。例如：2．掌握HTML5的基本语法、基本标记、属性3．HTML的head标记的使用方法二、知识讲授与学生实践文本的格式化标签b、i、strong、s、u等文本控制标签的使用方法标题<hn>、段落<p>、换行<br>、水平线<hr>三、知识讲授与学生实践讲解<img标签的基本使用方法与属性规则四、课堂小结HTML5基本标签与文本控制标记、图像标记、超链接标记的使用，要多记录，多实践。章节或项目名称任务4：HTML页面元素及列表元素本次授课类型□理论□实验理实一体□实训□实习班级地点周次星期节次授课进度310171J1-2042三5-6符合□超前□滞后□符合□超前□滞后教学目标综合运用HTML5的基本语法、基本标记、属性。综合应用图像控制标签、超级链接控制标签完成图文的简单混排。综合应用超级链接、表格与列表的使用的简单混排。教学重点HTML5的基本语法、基本标记、属性HTML的超级链接、表格与列表的使用的综合使用教学难点HTML的超级链接、表格与列表的使用教学设计教学环节内容要点与手段时间分配知识回顾HTML5的相关标记及其属性、单标记和双标记、文本、图像讲授法5分钟知识讲授学生实践HTML5的超级链接的使用方法演示教学30分钟知识讲授学生实践HTML5的表格的使用方法实验教学20分钟知识讲授学生实践概述无序列表、有序列表和定义列表。讲解“ul元素”讲解“ol元素”知识讲解“dl元素实验教学30分钟课程小结超级链接、表格与列表的使用的简单混排讲授法5分钟教学效果及改进思路一、知识回顾HTML5的相关标记及其属性、单标记和双标记、文本、图像、超级链接等二、知识讲解与实践超级链接（1）、超级链接标签的创建。（2）、认识绝对路径和相对路径。（3）、锚点路径。（4）、影像地图的使用。三、知识讲解与实践表格（1）、表格的定义。（2）、表格的属性应用（3）、表格的行与列的合并。四、知识讲解“ul元素”“ol元素”“dl元素”（1）、教师展示PPT对“列表”的概念进行讲解，并列举网页中常见的例子进行说明。（2）、教师展示PPT，对“列表的基本语法格式”及常用属性值进行讲解，并进行代码演示。（3）、教师指出定义“列表”时需要注意的问题，并给与解答。（4）、学生练习，教师巡视，对疑难问题进行解答。列表的综合案例：（1）、教师和学生互动：在网上购物商城中浏览商品时，经常会看到某一类商品被分为若干小类，这些小类通常还包含若干的子类，同样，在使用列表时，列表项中也有可能包含若干子列表项，例如“淘宝网”中的导航栏效果。要想在列表项中定义子列表项就需要将列表进行嵌套，下面，将对列表的嵌套进行讲解。（2）、教师通过PPT对“列表嵌套”在网页中的常见效果进行展示。（3）、教师对“列表嵌套”进行讲解并通过代码进行演示。（4）、教师指出“列表嵌套”时需要注意的问题，并给予解答。（5）、学生练习，教师巡视，对疑难问题进行解答。五、阶段小结小结重点：超级链接、表格与列表的使用的简单混排。答疑教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给解释。章节或项目名称任务5、基础标签案例与任务本次授课类型□理论□实验理实一体□实训□实习班级地点周次星期节次授课进度310171J1-2103二1-2符合□超前□滞后□符合□超前□滞后教学目标综合应用HTML的文本与段落标签的设置综合应用图片与超级链接标签的设置综合应用表格与列表标签的设置教学重点综合应用HTML的文本与段落标签、图片与超级链接标签、表格与列表教学难点恰当的使用标签的使用场合教学设计教学环节内容要点与手段时间分配知识回顾页面交互标签与文本层次标签的使用方法等回顾解了HTML5页面元素及其相关属性的使用案例描述讲授法10分钟知识讲授案例分析演示教学10分钟知识讲授案例实现实验教学65分钟课程小结阶段小结应用HTML的文本与段落标签、图片与超级链接标签、表格与列表标签的合理应用讲授法5分钟教学效果及改进思路一、知识回顾1合理使用HTML段落与文本标签。2合理使用HTML图片与超级链接标签。3合理使用HTML表格与列表标签。二、案例描述与实施综合所学的基本HTML标签，依据书法家庄辉的个人介绍页面的布局示意图，如图所示来完成网页页面的效果。三、课堂小结应用HTML的文本与段落标签、图片与超级链接标签、表格与列表标签的合理应用。章节或项目名称任务6：HTML5结构性与分组标签本次授课类型□理论□实验理实一体□实训□实习班级地点周次星期节次授课进度310171J1-2103三5-6符合□超前□滞后□符合□超前□滞后教学目标掌握结构元素header元素、nav元素、article元素、aside元素、section元素、footer元素的使用。掌握figure和figcaption元素、hgroup元素的使用。教学重点合理使用header元素、nav元素、article元素、aside元素、section元素、footer元素的使用合理使用figure和figcaption元素元素教学难点header元素、nav元素、article元素、aside元素、section元素、footer元素的使用教学设计教学环节内容要点与手段时间分配知识回顾有序列表、无序列表、定义列表、嵌套列表等。讲授法5分钟知识讲授知识讲解“header元素”、“nav元素”学练一体20分钟知识讲授知识讲解“article元素”“aside元素”学练一体20分钟知识讲授知识讲解“section元素”“footer元素”学练一体20分钟知识讲授知识讲解figure和figcaption元素、hgroup元素学练一体20分钟课程小结总结如何能合理使用结构元素、分组元素。讲授法5分钟教学效果及改进思路一、知识回顾有序列表、无序列表、定义列表、嵌套列表等。二、知识讲解“header元素”“nav元素”（1）、教师展示PPT对“header元素”的概念及基本语法格式进行讲解。（2）、教师对“header元素”的显示效果及应用范围通过代码进行演示。（3）、教师对“header元素”的注意事项进行讲解，并使用代码进行实时演示。同样讲解nav元素（4）、学生练习，教师巡视，对疑难问题进行解答。三、知识讲解“article元素”“aside元素”（1）、教师展示PPT对“article元素”的概念及基本语法格式进行讲解。（2）、教师对“article元素”的显示效果及应用范围通过代码进行演示。（3）、教师对“article元素”的注意事项进行讲解，并使用代码进行实时演示。同样讲解aside元素（4）、学生练习，教师巡视，对疑难问题进行解答。四、知识讲解“section元素”“footer元素”（1）、教师展示PPT对“section元素”的概念及基本语法格式进行讲解。（2）、教师对“section元素”的显示效果及应用范围通过代码进行演示。（3）、教师对“section元素”的注意事项进行讲解，并使用代码进行实时演示。同样讲解footer元素（4）、学生练习，教师巡视，对疑难问题进行解答。五、讲解figure和figcaption元素、hgroup元素（1）、教师展示PPT对“figure和figcaption元素”的概念及基本语法格式进行讲解。（2）、教师对“figure和figcaption元素”的显示效果及应用范围通过代码进行演示。（3）、教师对“figure和figcaption元素”的注意事项进行讲解，并使用代码进行实时演示。同样讲解hgroup元素（基本被HTML5放弃了）（4）、学生练习，教师巡视，对疑难问题进行解答。六、阶段小结header元素。header元素是一种具有引导和导航作用的结构元素，该元素可以包含所有通常放在页面头部的内容。header元素通常用来放置整个页面或页面内的一个内容区块的标题，也可以包含网站Logo图、搜索表单或者其他相关内容。nav元素。nav元素用于定义导航链接，该元素可以将具有导航性质的链接归纳在一个区域中，使页面元素的语义更加明确。其中的导航元素可以链接到站点的其他页面，或者当前页的其他部分。article元素。article元素代表文档、页面或者应用程序中与上下文不相关的独立部分，该元素经常被用于定义一篇日志、一条新闻或用户评论等。article元素通常使用多个section元素进行划分，一个页面中article元素可以出现多次。aside元素。aside元素用来定义当前页面或者文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等其他类似的有别于主要内容的部分。section元素。section元素用于对网站或应用程序中页面上的内容进行分块，一个section元素通常由内容和标题组成。footer元素。footer元素用于定义一个页面或者区域的底部，它可以包含所有通常放在页面底部的内容。章节或项目名称任务7：页面交互、行内语义标签与全局属性本次授课类型□理论□实验理实一体□实训□实习班级地点周次星期节次授课进度310171J1-20242中午符合□超前□滞后□符合□超前□滞后教学目标能运用details和summary元素、progress元素、meter元素。能运用time元素、mark元素、cite元素。教学重点details和summary元素、progress元素、meter元素、time元素、mark元素、cite元素教学难点details和summary元素、progress元素、meter元素、time元素、mark元素、cite元素使用场景教学设计教学环节内容要点与手段时间分配知识回顾结构标签与分组标签的使用方法等讲授法5分钟知识讲授知识讲解details和summary元素演示教学10分钟知识讲授知识讲解“progress元素”“meter元素”实验教学10分钟知识讲授知识讲解time元素、mark元素、cite元素实验教学30分钟知识讲授知识讲授“draggable属性”、“draggable属性”、“spellcheck属性”、“contenteditable属性”实验教学30分钟课程小结页面交互元素、文本层次语义元素的使用场景与使用技巧讲授法5分钟教学效果及改进思路一、知识回顾结构标签与分组标签的使用方法等。二、知识讲解“details和summary元素”（1）、教师展示PPT对“details和summary元素”的概念进行讲解，并列举网页中常见的例子进行说明。（2）、教师展示PPT，对“details和summary元素”及常用属性值进行讲解，并进行代码演示。（3）、教师指出定义“details和summary元素”时需要注意的问题，并给与解答。（4）、学生练习，教师巡视，对疑难问题进行解答。三、知识讲解“progress元素”“meter元素”（1）、教师展示PPT对“progress元素”“meter元素”的概念进行讲解，并列举网页中常见的例子进行说明。（2）、教师展示PPT，对“progress元素”“meter元素”及常用属性值进行讲解，并进行代码演示。（3）、教师指出定义“progress元素”“meter元素”时需要注意的问题，并给与解答。（4）、学生练习，教师巡视，对疑难问题进行解答。四、知识讲解time元素、mark元素、cite元素（1）、教师展示PPT分别对time元素、mark元素、cite元素的概念进行讲解，并列举网页中常见的例子进行说明。（2）、教师展示PPT，分别对time元素、mark元素、cite元素及常用属性值进行讲解，并进行代码演示。（3）、教师指出定义time元素、mark元素、cite元素时需要注意的问题，并给与解答。（4）、学生练习，教师巡视，对疑难问题进行解答。五、知识讲解“draggable属性”、“draggable属性”、“spellcheck属性”、“contenteditable属性”教师展示PPT分别对“draggable属性”、“draggable属性”、“spellcheck属性”、“contenteditable属性”的概念进行讲解，指出draggable属性用来定义元素是否可以拖动。六、阶段小结总结details和summary元素、progress元素、meter元素、time元素、mark元素、cite元素的使用场景与使用方法。总结，“draggable属性”、“draggable属性”、“spellcheck属性”、“contenteditable属性”章节或项目名称任务8：HTML5的新标签案例任务本次授课类型□理论□实验理实一体□实训□实习班级地点周次星期节次授课进度310171J1-2104三5-6符合□超前□滞后□符合□超前□滞后教学目标掌握如何使用结构元素中的相关标记搭建一个网站的页面结构？根据HTML5新增的结构元素、分组元素、页面交互元素、文本层次语义元素以及常用的标准属性等内容。本节将结合前面所学知识点制作一个“电影影评网”。教学重点准确恰当的选择运用结构元素、分组元素、页面交互元素、文本层次语义元素以及常用的全局属性搭建商业网站。教学难点准确恰当的选择运用结构元素、分组元素、页面交互元素、文本层次语义元素以及常用的标准属性等内容。教学设计教学环节内容要点与手段时间分配知识回顾页面交互标签与文本层次标签的使用方法等回顾解了HTML5页面元素及其相关属性的使用案例描述讲授法10分钟知识讲授案例分析演示教学10分钟知识讲授案例实现任务实现实验教学65分钟课程小结阶段小结课外动手实践，对“列表元素”、“结构元素”、“分组元素”、“页面交互元素”、“全局属性”等知识点的掌握程度讲授法5分钟教学效果及改进思路教案一、知识回顾回顾HTML5页面元素及其相关属性的使用。header元素是一种具有引导和导航作用的结构元素，该元素可以包含所有通常放在页面头部的内容。nav元素用于定义导航链接。article元素通常使用多个section元素进行划分。aside元素用来定义当前页面或者文章的附属信息部分，包括侧边栏、广告、导航条等其他类似的有别于主要内容的部分。section元素用于对网站或应用程序中页面上的内容进行分块，一个section元素通常由内容和标题组成。footer元素用于定义一个页面或者区域的底部。案例描述本章前面讲解了HTML5新增的结构元素、分组元素、页面交互元素、文本层次语义元素以及常用的标准属性等内容。本节将结合前面所学知识点制作一个“门户网站主页”，默认效果如图所示。案例分析综合HTML5的基本语法、HTML5的结构性标签、级块标签、行内语义性标签，分析首页的页面结构，在任务2的基础之上，运用结构性标签完善门户网站的HTML代码。案例实现教师带领学生分步骤地进行网页制作，通过分析效果图、制作页面结构等步骤完成页面的制作，并指出其中需要注意的事项。说明：在网页制作时可适时停下来，让学生自行尝试。小组之间可以协作讨论，教师巡视，对疑难问题进行解答。阶段小结课外动手实践，对“列表元素”、“结构元素”、“分组元素”、“页面交互元素”、“全局属性”等知识点的掌握程度章节或项目名称任务9：初识CSS3与CSS的使用本次授课类型□理论□实验理实一体□实训□实习班级地点周次星期节次授课进度310171J1-2046二1-2符合□超前□滞后□符合□超前□滞后教学目标了解CSS3的发展历史以及主流浏览器的支持情况。掌握CSS基础选择器，能够运用CSS选择器定义标记样式。教学重点CSS样式规则、CSS样式表的引入方式、CSS基础选择器（标记选择器、类选择器、id选择器、通配符选择器）。教学难点准确恰当的选择与运用CSS基础选择器（标记选择器、类选择器、id选择器、通配符选择器）。教学设计教学环节内容要点与手段时间分配知识回顾Html5的元素结构与框架讲授法5分钟知识讲授学生练习CSS的作用及其位置CSS的发展历史，96CSS1，985CSS2、04CSS3CSS3中浏览器的支持情况，测试演示教学学做一体25分钟知识讲授学生练习CSS样式规则、样式表的引用演示教学学做一体15知识讲授学生练习CSS样式规则、样式表的引用标记选择器、类选择器、id选择器、通配符选择器、演示教学学做一体40课程小结阶段小结：CSS的作用、发展历史、CSS样式规则、CSS样式表的引入方式、CSS基础选择器（标记选择器、类选择器、id选择器、通配符选择器）。讲授法5分钟教学效果及改进思路教案一、知识回顾回顾HTML5页面元素及其相关属性的使用。二、知识讲授：“CSS概述”“CSS3发展历史”“CSS3浏览器支持情况”讲解“CSS概述”教师展示PPT对“CSS概念及作用”进行讲解，并打开网页进行效果展示。教师讲解CSS在HTML5中的书写位置，并使用代码进行演示。教师展示PPT，对初学者在书写CSS样式时需要注意的问题进行讲解。（结构样式分离）教师让学生自行尝试，理解“CSS样式规则”的语法，并能灵活运用。“CSS3发展历史”教师展示PPT对“CSS3发展历史”进行说明，并对比各个版本间的区别与联系。“CSS3浏览器支持情况”常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等，但是并不是所有的浏览器都完全支持CSS3。谷歌（Chrome）浏览器对CSS3的支持最好。各浏览器厂商对CSS3各属性的支持程度不一样，因此在标准尚未明确的情况下，会用厂商的前缀加以区分，各主流浏览器都定义了自己的私有属性。内核类型相关浏览器私有前缀TridentIE8/IE9/IE10-msWebkit谷歌（Chrome）/Safari-webkitGecko火狐（Firefox）-mozBlinkOpera-o举例展示：例如，参照表3-1测试，也包括很多动画功能等。三、知识讲授：“CSS样式规则”“引入CSS样式表”教师展示PPT对“CSS样式规则”的具体格式进行讲解，并使用代码进行演示。教师展示PPT，对初学者在书写CSS样式时需要注意的问题进行讲解。教师让学生自行尝试，理解“CSS样式规则”的语法，并能灵活运用。教师展示PPT对“引入CSS样式表”的具体格式进行讲解，并使用代码进行演示。教师展示PPT，对初学者在引入CSS样式表时需要注意的问题进行讲解。教师让学生自行尝试，理解引入CSS样式表的语法，并能灵活运用。四、知识讲授：“CSS基础选择器”（1）、教师展示PPT对“CSS选择器”的概念及用法进行讲解。（2）、教师分别对“标记选择器”、“类选择器”、“id选择器”及“通配符选择器”等的基本语法格式进行详细讲解并通过代码进行演示。（3）、教师对比“标记选择器”、“类选择器”、“id选择器”及“通配符选择器”等的使用方法及应用效果，并指出其优缺点。（4）、学生练习，教师巡视，对疑难问题进行解答。五、阶段小结：阶段小结：CSS的作用、发展历史、CSS样式规则、CSS样式表的引入方式、CSS基础选择器（标记选择器、类选择器、id选择器、通配符选择器）。章节或项目名称任务10：CSS常用选择器本次授课类型□理论□实验理实一体□实训□实习班级地点周次星期节次授课进度310171J1-2046三5-6符合□超前□滞后□符合□超前□滞后教学目标掌握CSS常用选择器，能够运用CSS选择器定义标记样式。教学重点CSS样式规则、CSS样式表的引入方式、CSS基础选择器（标记选择器、类选择器、id选择器、通配符选择器）。教学难点准确恰当的选择与运用CSS基础选择器（标记选择器、类选择器、id选择器、通配符选择器）。教学设计教学环节内容要点与手段时间分配知识回顾Html5的元素结构与框架CSS的作用及其位置CSS的发展历史，96CSS1，985CSS2、04CSS3CSS3中浏览器的支持情况，测试讲授法5分钟知识讲授学生练习CSS基础选择器（标记选择器、类选择器、id选择器、通配符选择器）。演示教学学做一体40分钟知识讲授学生练习CSS基础选择器（指定选择器、后代选择器、并集选择器）。演示教学学做一体40分钟课程小结阶段小结：CSS的作用、发展历史、CSS样式规则、讲授法5分钟教学效果及改进思路一、知识回顾回顾HTML5页面元素及其相关属性的使用。二、知识讲授：“CSS基础选择器”（标签选择器、类选择器、id选择器）（1）、教师展示PPT对“CSS选择器”的概念及用法进行讲解。（2）、教师分别对“标记选择器”、“类选择器”、“id选择器”及“通配符选择器”等的基本语法格式进行详细讲解并通过代码进行演示。（3）、教师对比“标记选择器”、“类选择器”、“id选择器”及“通配符选择器”等的使用方法及应用效果，并指出其优缺点。（4）、学生练习，教师巡视，对疑难问题进行解答。三、知识讲授：CSS基础选择器（指定选择器、后代选择器、并集选择器）（1）、教师展示PPT对“E[att^=value]属性选择器”的具体格式进行讲解。教师展示PPT对“E[att^=value]属性选择器”的用法进行讲解并通过代码进行演示。（2）、学生练习，教师巡视，对疑难问题进行解答。（3）、教师展示PPT对“E[att$=value]属性选择器”的具体格式进行讲解。教师展示PPT对“E[att$=value]属性选择器”的用法进行讲解并通过代码进行演示。（4）、学生练习，教师巡视，对疑难问题进行解答。（5）、教师展示PPT对“E[att*=value]属性选择器”的具体格式进行讲解。教师展示PPT对“E[att*=value]属性选择器”的用法进行讲解并通过代码进行演示。与前两种属性选择器做对比区分。（6）、学生练习，教师巡视，对疑难问题进行解答。阶段小结：重点1：属性选择器的用法。易错点：注意区分各个属性选择器的书写方式及含义。重点2：“子代选择器（>）”、“兄弟选择器（+、~）”的使用易错点：区分“临近兄弟选择器”和“普通兄弟选择器”的用法。章节或项目名称任务11：CSS3属性与关系选择器本次授课类型□理论□实验理实一体□实训□实习班级地点周次星期节次授课进度310171J1-2047二1-2符合□超前□滞后□符合□超前□滞后教学目标掌握CSS基础选择器（指定、包含、群组选择器）。掌握CSS3属性选择器的使用。掌握CSS3关系选择器的使用。教学重点指定、包含、群组选择器的使用、CSS3属性选择器、关系选择器的使用。教学难点CSS3属性选择器、关系选择器的使用。教学设计教学环节内容要点与手段时间分配知识回顾CSS样式规则与基本；CSS样式的使用方式，基础选择器讲授法10分钟知识讲授学生练习CSS3属性选择器的使用演示教学学做一体25分钟知识讲授学生练习CSS3关系选择器的使用演示教学学做一体45分钟课程小结阶段小结：CSS基础选择器（记指定选择器、后代选择器、并集选择器）、CSS3属性选择器、关系选择器的使用。讲授法5分钟教学效果及改进思路教案一、知识回顾回顾HTML5页面元素及其相关属性的使用。CSS基础选择器（指定选择器、后代选择器、并集选择器）二、知识讲解：“E[att^=value]属性选择器”“E[att$=value]属性选择器”“E[att*=value]属性选择器”（1）、教师展示PPT对“E[att^=value]属性选择器”的具体格式进行讲解。教师展示PPT对“E[att^=value]属性选择器”的用法进行讲解并通过代码进行演示。（2）、学生练习，教师巡视，对疑难问题进行解答。（3）、教师展示PPT对“E[att$=value]属性选择器”的具体格式进行讲解。教师展示PPT对“E[att$=value]属性选择器”的用法进行讲解并通过代码进行演示。（4）、学生练习，教师巡视，对疑难问题进行解答。（5）、教师展示PPT对“E[att*=value]属性选择器”的具体格式进行讲解。教师展示PPT对“E[att*=value]属性选择器”的用法进行讲解并通过代码进行演示。与前两种属性选择器做对比区分。（6）、学生练习，教师巡视，对疑难问题进行解答。三、知识讲解：子代选择器（>）、兄弟选择器+：临近兄弟选择器、兄弟选择器~：普通兄弟选择器（1）、教师展示PPT对“子代选择器（>）”的书写格式进行讲解。教师展示PPT对“子代选择器（>）”的用法进行讲解并通过代码进行演示。（2）、学生练习，教师巡视，对疑难问题进行解答。（3）、教师展示PPT对“兄弟选择器+”的书写格式进行讲解。教师展示PPT对“兄弟选择器+”的用法进行讲解并通过代码进行演示。（4）、学生练习，教师巡视，对疑难问题进行解答。（5）、教师展示PPT对“兄弟选择器~”的书写格式进行讲解。教师展示PPT对“兄弟选择器~”的用法进行讲解并通过代码进行演示。区分“临近兄弟选择器”和“普通兄弟选择器”的用法。（6）、学生练习，教师巡视，对疑难问题进行解答。四、阶段小结：重点1：属性选择器的用法。易错点：注意区分各个属性选择器的书写方式及含义。重点2：“子代选择器（>）”、“兄弟选择器（+、~）”的使用易错点：区分“临近兄弟选择器”和“普通兄弟选择器”的用法。教案章节或项目名称任务12：CSS3选择器与样式表的继承与层叠本次授课类型□理论□实验理实一体□实训□实习班级地点周次星期节次授课进度310171J1-2067三5-6符合□超前□滞后□符合□超前□滞后教学目标掌握CSS3链接伪类选择器、结构伪类选择器。掌握CSS3伪元素选择器、UI元素状态伪类选择器。CSS的继承与层叠教学重点CSS3链接伪类选择器、结构伪类选择器、CSS3伪元素选择器、UI元素状态伪类选择器。CSS的继承与层叠。教学难点掌握CSS3伪元素选择器、CSS的权值计算。教学设计教学环节内容要点与手段时间分配知识回顾CSS3的属性、关系选择器的使用讲授法5分钟知识讲授学生练习CSS3链接伪类选择器演示教学学做一体15分钟知识讲授学生练习CSS3结构伪类选择器演示教学学做一体20分钟知识讲授学生练习CSS3伪元素选择器演示教学学做一体20分钟知识讲授学生练习UI元素状态伪类选择器演示教学学做一体10分钟知识讲授学生练习CSS的继承与层叠演示教学学做一体15分钟课程小结阶段小结：CSS3选择器与样式表的继承与层叠讲授法5分钟教学效果及改进思路教案一、知识回顾回顾CSS3的属性、关系选择器的使用。二、知识讲授：CSS链接伪类选择器教师展示链接伪类选择器的使用进行讲解，并打开网页进行效果展示。教师让学生自行尝试，理解“指定选择器”的定义方法，并能灵活运用。三、知识讲解：CSS3结构伪类选择器1基础结构:root选择器、:not选择器、:only-child

选择器器（1）、教师展示PPT对:root选择器、:not选择器、:only-child

选择器的使用方法的书写格式进行讲解。（2）、教师展示PPT对:root选择器、:not选择器、:only-child

选择器的使用方法的用法进行讲解并通过代码进行演示。（3）、学生练习，教师巡视，对疑难问题进行解答。2子元素伪类选择器:first-child和:last-child选择器、:\o"CSS:nth-child(n)选择器"nth-child(n)和:nth-last-child(n)选择器、:\o"CSS:nth-of-type(n)选择器"nth-of-type(n)和:nth-last-of-type(n)选择器器（1）、教师展示PPT对:first-child和:last-child选择器、:\o"CSS:nth-child(n)选择器"nth-child(n)和:nth-last-child(n)选择器、:\o"CSS:nth-of-type(n)选择器"nth-of-type(n)和:nth-last-of-type(n)选择器器的使用方法的书写格式进行讲解。（2）、教师展示PPT对:first-child和:last-child选择器、:\o"CSS:nth-child(n)选择器"nth-child(n)和:nth-last-child(n)选择器、:\o"CSS:nth-of-type(n)选择器"nth-of-type(n)和:nth-last-of-type(n)选择器器的使用方法的用法进行讲解并通过代码进行演示。（3）、学生练习，教师巡视，对疑难问题进行解答。3:\o"CSS:nth-child(n)选择器"empty选择器、:target选择器的使用方法（1）、教师展示PPT对:\o"CSS:nth-child(n)选择器"empty选择器、:target选择器的书写格式进行讲解。（2）、教师展示PPT对:\o"CSS:nth-child(n)选择器"empty选择器、:target选择器的用法进行讲解并通过代码进行演示。（3）、学生练习，教师巡视，对疑难问题进行解答。四、知识讲解：CSS3伪元素选择器教师展示PPT对“:\o"CSS:before选择器"before选择器”“:\o"CSS:before选择器"after选择器”的概念及书写格式进行讲解。学生练习，教师巡视，对疑难问题进行解答。五、知识讲解：UI元素状态伪类选择器教师展示PPT对“UI元素状态伪类”的概念及书写格式进行讲解。学生练习，教师巡视，对疑难问题进行解答。六、知识讲解：CSS层叠与继承1、CSS层叠性与继承性教师展示PPT对“CSS层叠性与继承性”的概念进行讲解。2、讲解“CSS优先级”、权值的计算七、阶段小结：CSS3链接伪类选择器、结构伪类选择器、CSS3伪元素选择器、UI元素状态伪类选择器。CSS的继承与层叠。章节或项目名称任务13：CSS应用的案例任务本次授课类型□理论□实验理实一体□实训□实习班级地点周次星期节次授课进度310171J1-2028二中午符合□超前□滞后□符合□超前□滞后教学目标掌握如何使用CSS实现网站的门户页眉导航。掌握如何使用CSS3实现网站的门户页眉导航。教学重点使用CSS3的新选择器构建页面导航效果。教学难点使用CSS3中的结构化伪类的使用。教学设计教学环节内容要点与手段时间分配知识回顾CSS3链接伪类选择器、结构伪类选择器、CSS3伪元素选择器、UI元素状态伪类选择器。CSS的继承与层叠。讲授法10分钟知识讲授案例分析演示教学10分钟知识讲授案例实现任务实现实验教学65分钟课程小结阶段小结页眉导航中CSS3链接伪类选择器、结构伪类选择器、CSS3伪元素选择器、UI元素状态伪类选择器。CSS的继承与层叠。讲授法5分钟教学效果及改进思路教案一、知识回顾CSS3链接伪类选择器、结构伪类选择器、CSS3伪元素选择器、UI元素状态伪类选择器。CSS的继承与层叠。二、案例描述本任务就是在任务3的基础之上，编写基本的CSS3样式表，实现网站头部的页面效果，如图所示。三、案例分析第一步：使用通配符编写通用样式，统一页面中所有的文本样式，统一页面中的内外边距与边框，统一样式表的风格。第二步：根据需要可以在<header>标签内添加2个<div>标签，第1个来放置整个导航信息，第2个来实现超级链接的页面效果。第三步：设置nav区域中的超级链接的样式。四、案例实现教师带领学生分步骤地进行网页CSS代码的编写与测试。五、阶段小结CSS3链接伪类选择器、结构伪类选择器、CSS3伪元素选择器、UI元素状态伪类选择器。CSS的继承与层叠。章节或项目名称任务14：文本样式与CSS高级特性本次授课类型□理论□实验理实一体□实训□实习班级地点周次星期节次授课进度310171J1-2068三5-6符合□超前□滞后□符合□超前□滞后教学目标掌握CSS字体样式掌握CSS字体外观属性教学重点CSS字体样式教学难点CSS字体外观属性教学设计教学环节内容要点与手段时间分配知识回顾CSS样式规则、CSS样式表的引入方式、CSS基础选择器讲授法5分钟知识讲授学生练习CSS字体样式演示教学学做一体40知识讲授学生练习CSS字体外观属性演示教学学做一体40课程小结阶段小结：CSS字体样式、CSS字体外观属性、CSS3的层叠性和继承性、CSS的优先级讲授法5分钟教学效果及改进思路一、知识回顾CSS样式规则、CSS样式表的引入方式、CSS基础选择器二、知识讲解：CSS字体样式属性（1）、教师和学生互动：浏览网页的时候，我们经常看到一些特殊的字体效果，比如：控制字体的字号、将字体进行加粗，或者设置字体倾斜等。为了更方便的控制网页中各种各样的字体，CSS提供了一系列的字体样式属性。（2）、教师展示PPT对“网页中常见的字体效果”进行展示及说明。（3）、教师分别对“font-size、font-family、font-weight、font-variant、font-style及font综合设置属性”进行讲解，并进行代码演示。注意：font综合属性的使用font：font-stylefont-weightfont-size/line-heightfont-family顺序-顺序-顺序-顺序-顺序！！（4）、拓展样式：@font-face属性word-wrap的使用（5）、学生练习，教师巡视，对疑难问题进行解答。三、知识讲解：CSS文本外观属性（1）、教师和学生互动：使用CSS不仅可以设置一些特殊的字体效果，还可以设置一些段落文本的外观显示效果，比如：设置文本颜色、字间距、行间距、文本装饰效果等。使用HTML只能进行简单的控制，但是效果并不理想，为此CSS提供了一系列的文本外观样式属性。（2）、教师展示PPT对“网页中常见的文本外观效果”进行展示及说明。（3）、教师分别对“color、letter-spacing、word-spacing、line-height、text-transform、text-decoration、text-align、text-indent、white-space”等文本外观属性进行讲解，并进行代码演示。拓展：text-shadow阴影效果text-overflow标示对象内溢出文本（4）、教师分别对使用CSS设置文本外观时需要注意的问题进行说明。（5）、学生练习，教师巡视，对疑难问题进行解答。四、阶段小结：CSS字体样式、CSS字体外观属性、CSS3的层叠性和继承性、CSS的优先级章节或项目名称任务15：CSS设置背景属性及渐变属性本次授课类型□理论□实验理实一体□实训□实习班级地点周次星期节次授课进度310171J12049二中午符合□超前□滞后□符合□超前□滞后教学目标掌握CSS中背景属性及渐变属性的相关设置教学重点设置背景复合属性教学难点背景图像的大小、显示区域、裁剪区域、多重背景图像、渐变属性的设置教学设计教学环节内容要点与手段时间分配知识回顾文字与字体的使用讲授法5分钟知识讲授学生练习设置背景颜色、设置背景图像、设置背景与图片不透明度、设置背景图像平铺、设置背景图像的位置、设置背景图像固定。演示教学学做一体20分钟知识讲授学生练习设置背景图像的大小、设置背景的显示区域、设置背景图像的裁剪区域、设置多重背景图像。演示教学学做一体25分钟知识讲授学生练习背景的复合属性的设置。演示教学学做一体10分钟知识讲授学生练习渐变属性的设置。演示教学学做一体20分钟课程小结阶段小结：重点：背景复合属性、背景图像的大小、显示区域、裁剪区域、多重背景图像、渐变属性的设置、渐变的设置。易错点：浏览器的兼容处理。讲授法5分钟教学效果及改进思路一、知识回顾CSS中盒子模型的相关设置。二、知识讲解：设置背景颜色、设置背景图像、设置背景与图片不透明度、设置背景图像平铺、设置背景图像的位置、设置背景图像固定（1）、教师展示PPT对“background-color属性”的应用效果进行展示及说明。（2）、教师对使用“background-color属性”的三种属性值进行讲解，并进行代码演示。（3）、学生练习，教师巡视，对疑难问题进行解答。依次讲解背景图像、设置背景与图片不透明度、设置背景图像平铺、设置背景图像的位置、设置背景图像固定等。三、知识讲解：设置背景图像的大小、设置背景的显示区域、设置背景图像的裁剪区域、设置多重背景图像（1）、教师和学生互动：我们知道在CSS2及之前的版本，背景图像的大小是不可以控制的。要想使背景图像填充元素区域，只能预设较大的背景图像或者让背景图像以平铺的方式填充，操作起来繁琐不方便。运用CSS3中的background-size属性可以轻松解决这个问题。（2）、教师展示PPT对“background-size属性”的应用效果进行展示。（3）、教师对“background-size属性”的基本语法格式及不同的属性值进行讲解，并进行代码演示。（4）、教师对使用“background-size属性”时需要注意的问题进行说明。（5）、学生练习，教师巡视，对疑难问题进行解答。依次讲解设置背景的显示区域、设置背景图像的裁剪区域、设置多重背景图像等内容。四、知识讲解：背景的复合属性的设置（1）、教师和学生互动：在CSS中，可以设置背景的颜色、图像、平铺、位置、固定等多种属性，每个属性都是设置背景单一的属性，那么是否可以将这些属性进行综合，同时设置几个背景属性呢？下面，将对如何综合设置元素的背景属性进行讲解。Background：background-colorbackground-iamgebackground-repeatbackground-attchmentbackground-positionbackground-sizebackground-clipbackground-origin;(注意顺序)（2）、教师对使用“背景复合属性”时需要注意的问题进行分析、说明。（3）、学生练习，教师巡视，对疑难问题进行解答。五、知识讲解：线性渐变、径向渐变、重复渐变（1）、教师展示PPT对“线性渐变”的概念及特点进行说明。（2）、教师对“线性渐变”的基本语法格式及常见参数进行讲解，并使用代码进行演示。（3）、教师分别对“渐变角度”、“颜色值”等概念进行讲解，并举例说明。用于标示颜色渐变的位置例如下面的示例代码：background-image:linear-gradient(30deg,#0f050%,#00F80%);在上面的示例代码中，可以看做绿色（#0f0）由50%的位置开始出现渐变至蓝色（#00f）位于80%的位置结束渐变。可以用Photoshop中的渐变色块进行类比，如下图所示。（4）、教师对使用“线性渐变”时需要注意的问题进行分析、说明。学生练习，教师巡视，对疑难问题进行解答。依次讲解径向渐变与径向渐变。阶段小结：重点：背景复合属性、背景图像的大小、显示区域、裁剪区域、多重背景图像、渐变属性的设置、渐变的设置。易错点：浏览器的兼容处理。章节或项目名称任务16：文字、背景与列表案例本次授课类型□理论□实验理实一体□实训□实习班级地点周次星期节次授课进度310171J12049三5-6符合□超前□滞后□符合□超前□滞后教学目标掌握如何使用文字、背景、列表的样式实现网站的门户页眉导航。掌握如何使用CSS3实现网站的商品导航。教学重点使用CSS3的新选择器构建页面导航效果。教学难点使用CSS3中的背景与列表的使用。教学设计教学环节内容要点与手段时间分配知识回顾文字、背景、列表的样式使用讲授法10分钟知识讲授案例分析演示教学10分钟知识讲授案例实现任务实现实验教学65分钟课程小结阶段小结文字、背景、列表的样式使用。讲授法5分钟教学效果及改进思路一、知识回顾文字、背景、列表的样式使用。二、案例描述本任务就是在任务4的基础之上，通过本章对文本、背景、列表的学习，构建网站<header>与<banner>区域区域的页面效果。图2电商产品分类列表展示效果三、案例分析第一步：编写<header>与<banner>区域的HTML代码。第二步：编写<header>区域的渐变背景色。第二步：设置<banner>区域内的多图背景效果。四、案例实现教师带领学生分步骤地进行网页CSS代码的编写与测试。五、阶段小结CSS3中对文字、背景、列表的样式的综合使用。拓展案例：通过本章学习的文本、背景以及列表的相关内容，构建一个电商网站的商品类别展示导航菜单，如图2所示。章节或项目名称任务17：文字、背景与列表任务本次授课类型□理论□实验理实一体□实训□实习班级地点周次星期节次授课进度310171J1-20610二1-2符合□超前□滞后□符合□超前□滞后教学目标掌握如何使用文字、背景、列表的样式实现网站的门户页眉导航。掌握如何使用CSS3实现网站的商品导航。教学重点使用CSS3的新选择器构建页面导航效果。教学难点使用CSS3中的背景与列表的使用。教学设计教学环节内容要点与手段时间分配知识回顾文字、背景、列表的样式使用讲授法10分钟知识讲授案例分析演示教学10分钟知识讲授案例实现任务实现实验教学65分钟课程小结阶段小结文字、背景、列表的样式使用。讲授法5分钟教学效果及改进思路一、知识回顾文字、背景、列表的样式使用。二、案例描述本任务就是在任务4的基础之上，通过本章对文本、背景、列表的学习，构建网站<header>与<banner>区域区域的页面效果。三、案例分析第一步：编写<header>与<banner>区域的HTML代码。第二步：编写<header>区域的渐变背景色。第二步：设置<banner>区域内的多图背景效果。四、案例实现教师带领学生分步骤地进行网页CSS代码的编写与测试。五、阶段小结CSS3中对文字、背景、列表的样式的综合使用。章节或项目名称任务18：盒子模型及相关属性本次授课类型□理论□实验理实一体□实训□实习班级地点周次星期节次授课进度310171J1-20610三5-6符合□超前□滞后□符合□超前□滞后教学目标掌握认识盒子模型、<div>标记、盒子的宽与高、边框属性、边距属性、box-shadow属性、box-sizing属性的使用教学重点盒子模型、盒子的宽与高、边框、边距属性的使用教学难点box-shadow属性、box-sizing属性的使用教学设计教学环节内容要点与手段时间分配知识回顾CSS的使用方法，文本、背景、列表等的使用方式。讲授法5分钟知识讲授学生练习盒子模型演示教学学做一体10分钟知识讲授学生练习<div>标记、盒子的宽与高演示教学学做一体25分钟知识讲授学生练习边框属性、边距属性演示教学学做一体20分钟知识讲授学生练习box-shadow属性、box-sizing属性演示教学学做一体25分钟课程小结阶段小结：重点：盒子模型、<div>标记、盒子的宽与高、边距属性。易错点：盒子模型的总宽度和总高度的计算原则。注意区分内边距与外边距。讲授法5分钟教学效果及改进思路一、知识回顾CSS的使用方法，文本、背景、列表等的使用方式。二、知识讲解：认识盒子模型（1）、教师展示PPT对“CSS盒子模型”的概念进行讲解，并以生活中常见的手机盒子的构成进行演示。（2）、教师展示PPT，对CSS盒子模型的构成元素进行具体讲解。（3）、教师使用CSS盒子模型控制网页中的元素，并进行代码演示。（4）、学生练习，教师巡视，对疑难问题进行解答。三、知识讲解：“<div>标记”与“盒子的宽与高”（1）、教师展示PPT对“<div>标记”的概念及用途进行讲解，同时去认识“盒子的宽与高”，并举例说明。（2）、教师对“<div>标记”的使用方法进行讲解，并通过代码进行演示认识“盒子的宽度与高度”的常用单位数值进行讲解。（3）、教师指出使用“<div>标记”布局时需要注意的问题，教师指出计算“盒子模型的总宽度和总高度”的计算原则，并能够根据实际情况进行计算。盒子的总宽度=width+左右内边距之和+左右边框宽度之和+左右外边距之和盒子的总高度=height+上下内边距之和+上下边框宽度之和+上下外边距之和（4）、学生练习，教师巡视，对疑难问题进行解答。四、知识讲解：“边框属性”与“边距属性”（1）、教师展示PPT对“边框属性”的概念及用途进行讲解。教师分别对“设置边框样式”、“设置边框宽度”、“设置边框颜色”及“综合设置边框”的属性值及应用效果进行讲解并通过代码进行演示。教师分别对设置“圆角边框”、“图片边框”进行讲解，并进行实时演示。教师指出应用“边框属性”时需要注意的问题，并给与解答。（2）、学生练习，教师巡视，对疑难问题进行解答。（3）、教师展示PPT将CSS边距属性分为“内边距”和“外边距”两种，展示PPT对“内边距”、“外边距”的概念进行讲解。教师分别对“内边距属性”、“外边距属性”进行讲解并通过代码进行演示。教师分析内外边距的区别与联系，并对比其应用效果。（4）、学生练习，教师巡视，对疑难问题进行解答。五、知识讲解：“box-shadow属性”与“box-sizing属性”（1）、教师展示PPT对“box-shadow属性”的概念及用途进行讲解，指出box-shadow属性用于实现阴影。讲解“box-shadow属性”参数值进行说明并讲解。（2）教师对“box-shadow属性”进行讲解并通过代码进行演示。教师指出应用“box-shadow属性”时需要注意的问题，并给与解答。（3）、教师展示PPT对“box-sizing属性”的概念进行讲解，指出box-sizing属性用于定义盒子的宽度值和高度值是否包含元素的内边距和边框。教师对“box-sizing属性”的content-box、border-box取值进行说明并讲解。（4）教师对“box-sizing属性”进行讲解并通过代码进行演示。（5）教师指出应用“box-sizing属性”时需要注意的问题，并给与解答。（6）、学生练习，教师巡视，对疑难问题进行解答。阶段小结：重点：盒子模型、<div>标记、盒子的宽与高、边距属性。易错点：盒子模型的总宽度和总高度的计算原则。注意区分内边距与外边距。章节或项目名称任务19：元素的属性float、清除、定位本次授课类型□理论□实验理实一体□实训□实习班级地点周次星期节次授课进度310171J1-20611二1-2符合□超前□滞后□符合□超前□滞后教学目标掌握理解元素的浮动，能够为元素设置浮动样式。熟悉清除浮动的方法，可以使用不同方法清除浮动。掌握元素的定位，能够为元素设置常见的定位模式。教学重点元素的浮动属性float、运用clear属性清除浮动、运用overflow属性清除浮动、使用after伪对象清除浮动、overflow属性、元素的定位属性。教学难点元素的浮动属性float、overflow属性、元素的定位属性教学设计教学环节内容要点与手段时间分配知识回顾盒子模型、背景、渐变的相关设置讲授法5分钟知识讲授学生练习浮动属性float、清除浮动演示教学学做一体20分钟知识讲授学生练习overflow属性的使用演示教学学做一体15分钟知识讲授学生练习定位属性、静态定位、相对定位、绝对定位、固定定位、z-index层叠等级属性演示教学学做一体30分钟知识讲授学生练习元素的类型、<span>标记、元素的转换演示教学学做一体15分钟课程小结阶段小结：元素的浮动属性float、运用clear属性清除浮动、运用overflow属性清除浮动、使用after伪对象清除浮动、overflow属性、元素的定位属性的使用细节。讲授法5分钟教学效果及改进思路一、知识回顾盒子模型、背景、渐变的相关设置。二、知识讲解：浮动属性float、清除浮动（1）、教师通过PPT对网页中常见的元素浮动效果进行展示。（2）、教师通过PPT对“浮动”的概念及基本语法格式进行讲解，并进行代码演示。（3）、教师对“浮动”的常用属性—左浮动、右浮动进行讲解，并进行代码演示。（4）、教师指出对元素应用“浮动”时需要注意的问题，并给予解答。（5）、学生练习，教师巡视，对疑难问题进行解答。教师对元素的浮动会对其他元素产生影响，并进行代码演示。讲解，清除浮动的方法。三、知识讲解：overflow属性的使用（1）、教师通过PPT对“overflow属性”的作用进行讲解。（2）、教师对“overflow属性”的基本语法格式进行讲解，并进行代码演示。（3）、教师对“overflow属性”的四个常用属性值进行讲解，演示其具体用法和效果，通过对比分析不同属性值的异同。（4）、教师指出应用“overflow属性”时需要注意的问题，并给予解答。（5）、学生练习，教师巡视，对疑难问题进行解答。四、知识讲解：定位属性、静态定位、相对定位、绝对定位、固定定位、z-index层叠等级属性（1）、教师和学生互动：制作网页时，如果希望元素出现在某个特定的位置，就需要使用定位属性对元素进行精确定位。元素的定位属性主要包括定位模式和边偏移两部分。下面，将进行具体讲解。（2）、教师分别针对“定位模式”和“边偏移”进行详细讲解。（3）、教师对“定位模式”的基本语法格式进行讲解，并进行代码演示。（4）、教师指出position属性的四个常用值，并进行分析。（5）、学生练习，教师巡视，对疑难问题进行解答。依次学习静态定位、相对定位、绝对定位、固定定位、z-index层叠的关系。五、知识讲解：元素的类型、<span>标记、元素的转换（1）、教师和学生互动：HTML标记语言提供了丰富的标记，用于组织页面结构。为了使页面结构的组织更加轻松、合理，HTML标记被定义成了不同的类型，一般分为块标记和行内标记，也称块元素和行内元素。下面，我们开始学习块元素和行内元素。（2）、教师展示PPT对“块元素和行内元素”的概念及特点进行说明。（3）、教师分别对“块元素和行内元素”进行讲解，并进行代码演示。（4）、教师列举常见的块元素和行内元素，并对比其不同。（5）、学生练习，教师巡视，对疑难问题进行解答。“元素的转换”功能，注意display属性的使用。阶段小结：重点：元素的浮动属性float、运用clear属性清除浮动、运用overflow属性清除浮动、使用after伪对象清除浮动、overflow属性、元素的定位属性使用细节。章节或项目名称任务20：使用盒子模型布局网页本次授课类型□理论□实验理实一体□实训□实习班级地点周次星期节次授课进度310171J1-20611三5-6符合□超前□滞后□符合□超前□滞后教学目标综合使用元素的浮动属性float、运用clear属性清除浮动、运用overflow属性清除浮动、使用after伪对象清除浮动、overflow属性、元素的定位属性教学重点元素的浮动、元素的定位、元素的类型与转换。教学难点注意区分行内元素和块元素的区别教学设计教学环节内容要点与手段时间分配知识回顾元素的浮动属性float、运用clear属性清除浮动、运用overflow属性清除浮动、使用after伪对象清除浮动、overflow属性、元素的定位属性使用细节讲授法5分钟案例描述当鼠标移上图中的焦点图时，两侧将会出现焦点图切换按钮演示教学学做一体5分钟案例分析分析“网页焦点图”的构成元素，将其拆解为几个部分，分析各部分使用了哪些HTML标记及应用了哪些CSS样式。演示教学学做一体10分钟案例实现教师带领学生分步骤地进行网页制作，通过分析效果图、制作页面结构、定义CSS样式等步骤完成页面的制作，并指出其中需要注意的事项。演示教学学做一体65分钟课程小结重点：元素的浮动、元素的定位、元素的类型与转换。易错点：注意区分行内元素和块元素的区别。讲授法5分钟教学效果及改进思路一、案例描述本章前几节重点讲解了元素的浮动、定位、以及清除浮动。为了使读者更好地运用浮动与定位组织页面，本节将通过案例的形式分步骤制作一个网页焦点图，其默认效果如图所示。当鼠标移上图中的焦点图时，两侧将会出现焦点图切换按钮，效果如下图所示。二、案例分析分析“网页焦点图”的构成元素，将其拆解为几个部分，分析各部分使用了哪些HTML标记及应用了哪些CSS样式。三、案例实现教师带领学生分步骤地进行网页制作，通过分析效果图、制作页面结构、定义CSS样式等步骤完成页面的制作，并指出其中需要注意的事项。说明：在网页制作时可适时停下来，让学生自行尝试。小组之间可以协作讨论，教师巡视，对疑难问题进行解答。阶段小结：重点：元素的浮动、元素的定位、元素的类型与转换。易错点：注意区分行内元素和块元素的区别。完成的同学可以制作：章节或项目名称任务21：盒子模型的案例与任务本次授课类型□理论□实验理实一体□实训□实习班级地点周次星期节次授课进度310171J1-20612二1-2符合□超前□滞后□符合□超前□滞后教学目标综合使用元素的浮动属性float、运用clear属性清除浮动、运用overflow属性清除浮动、使用after伪对象清除浮动、overflow属性、元素的定位属性教学重点元素的浮动、元素的定位、元素的类型与转换。教学难点注意区分行内元素和块元素的区别教学设计教学环节内容要点与手段时间分配知识回顾文字、背景、列表的样式使用讲授法10分

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论