CSS滤镜功能的使用-张昕-教学设计

1、CSS滤镜功能的使用教学设计信息技术组 张昕一、教材依据高等教育出版社出版的Dreamweaver CS3网页设计与制作第五章HTML与CSS基础第四节CSS滤镜功能的使用。二、设计思路1. 指导思想以能力为本位是职业教育人才培养的指导思想。我校计算机专业教学一直以就业为导向，以能力为本位，以岗位需要和职业标准为依据，满足学生职业生涯发展的需求。本课程采用案例式教学贴近学生实际，走近中职计算机学科，能更好地演绎案例教学任务驱动的精神。2. 设计理念网页设计与制作是一门理论与实践高度融合的计算机专业课，在本课程的教学设计中，我们始终坚持以能力培养为核心，淡化理论、强化实践，坚持以学会学用的原则，

2、注重学生专业整合能力和实际工作中团队协作技能的培养。3. 教材地位及作用本课程选用高等教育出版社出版的Dreamweaver CS3网页设计与制作，旨在以案例讲解的过程中贯穿介绍网页制作软件Dreamweaver CS3的使用方法。本节课主要讲授如何在网页完成CSS滤镜的插入与使用以此来美化网页的方法。本节课的学习使学生完成从“我会做”“做得好”的能力的提升，为后续整站的修饰美化打下良好的基础，由此课程中得到的经验更与其他计算机专业课结合，进一步强化计算机专业各门课程的整合。4. 学情分析本课程面对的是计算机专业二年级学生，学生有了初步的审美能力和图像处理软件的应用能力，渴望学习新的知识。更由

3、于是中职学生有在其年龄心理特点的特殊性，他们希望得到鼓励，收获成功；但由于本章节主要以代码设计为主，学生容易感到枯燥、容易局限于只把课本案例按步骤完成，怠于更多的思考，同时也由于美术专业课程的不足，在完成作品时的美观程度上还有待于提高。三、教学目标1.知识与能力目标a) CSS滤镜的概念b) 建立CSS滤镜（向导方式）c) 使用代码方式建立CSS滤镜滤镜的语法d) 在网页中使用CSS滤镜的设计完成图片的美化；e) 培养学生对图文混排作品的评价能力、实践操作能力；f) 培养学生在练习中的分工合作能力、组织能力、统筹工作能力。2.方法与途径遵循“学生是课堂的主体、教师是主导”的教学思想，教师引导教

4、学步骤，以案例教学法、启发式教学、演示教学法为主要教学方法，让学生在任务分解的各个环节中创设环境、启发思维、自主学习、自我评价、注重总结、提高实践的能力。l 自主探究法：知识点的各个环节是呈上升式环环相扣，一步步展开的，让学生在老师的引导下，在实践过程中，自主学习、探究、理解、并进一步提出疑问，让整个过程中学生是自主自动积极参与的状态。l 实践练习法：多练多思，反复实践。l 分组讨论法：小组结合、协同合作、共同分析、完成任务。l 自我评价：自评发现问题、查缺补漏。互评相互学习、参考借鉴、共同提高。3.情感与评价目标通过师生的相互交流和团队的协作学习，培养学生养成严谨的学习态度和团结协作的精神，

5、体验探究问题和学习的乐趣，并通过自评与互评，相互学习，共同提高。4.现代教学手段本节课在多媒体机房上课，全程使用多媒体教学课件和DW CS3软件贯穿教学活动，最终通过多媒体教学控制软件分发作业，提交作业。四、教学重点教学重点是CSS滤镜的概念，这也是本节课的基础。围绕这个重点，以CSS滤镜的建立和编辑进行展开，将重点化解在演示、实践操作、体会、分析、评价的各个环节中。五、教学难点教学难点是CSS滤镜的语法。在任务引领环节中，以启发思维，讨论分析、具体体验为主体，在讲练结合中，使学生将理性认识转化为感性认识，进而再进化为更高层次的领会贯通。六、教学准备多媒体机房教师机1台，学生机40台，多媒体机

6、房控制软件，教师演示范例、所需网页素材、多媒体教学课件，学生4人1组分组。七、教学过程教学环节教学内容与过程师生活动教法学法设计意图导入新课（5分钟） CSS样式菜单能做什么？ 比对左右两幅效果图，有什么区别？ 大家在做网页时，对图像处理多数都是用Photoshop等图形处理软件，其实在CSS中自带了许多滤镜，合理应用这些滤镜同样可以做出以上软件所做出的效果。教师提出案例，学生思考、讨论回答案例教学法、任务驱动法通过实例，引发中职学生实践兴趣。教学环节教学内容与过程师生活动教法学法设计意图教学知识目标（40分钟）提出任务【案例教学法任务驱动】如果让你完成这幅网页的效果图，你可以采用哪些方式来做

7、？一、认识CSS滤镜滤镜(filter)属性是CSS的一个扩展部分，它能够渲染对象元素，创建出艺术效果。Dreamweaver的CSS样式提供了丰富的滤镜效果，使用这些滤镜能够创建出文本和图像的3D、阴影和淡入淡出等效果，应用在页面中，在一定程度上美化了页面。小游戏：找不同拿出两个网页，一张是PS处理的图像，一张是CSS滤镜处理的图像，让学生比对浏览器显示的效果，之后打开网页的IMAGES文件，让学生从图像的源文件发现不同。CSS滤镜只是加效果不改动原图。教师提出任务学生思考动手实践教师讲解学生讨论思考分析案例教学法、自主探究法、实践练习法、分组讨论法概念性的知识引入游戏加深学生印象引发学生兴

8、趣教学环节教学内容与过程师生活动教法学法设计意图教学知识目标（40分钟）二、滤镜的分类【课件讲授】在Dreamweaver CS3中，滤镜分为有参滤镜和无参滤镜两种。在CSS“扩展”属性对话框中，单击过滤器下拉按钮，就可以看到所有滤镜，如下图所示。Alpha设置透明层次.blur创建高速度移动效果，即模糊效果.Chroma制作专用颜色透明DropShadow创建对象的固定影子FlipH创建水平镜像图片FlipV创建垂直镜像图片glow加光辉在附近对象的边外.gray把图片灰度化.light创建光源在对象上.mask创建透明掩膜在对象上.wave波纹效果Xray使对象变的像被x光照射一样.inv

9、ert反色shadow创建偏移固定影子.【学生活动】观看有参滤镜和无参滤镜的效果图，讨论分析获得直观认识。教师演示讲解学生观察得出直观认识，演示法自主探究法、观察法以课件的直观展示引发学生学习兴趣教学环节教学内容与过程师生活动教法学法设计意图教学知识目标（40分钟）三、滤镜的语法【难点讲解】滤镜的使用和其它CSS样式的定义方法相似，分为外部引用、内部引用和局部引用三种，语法格式为：filter: filtername(parameters)其中filter是滤镜属性标识符，filtername是滤镜属性名称，parameters是滤镜属性自带的若干参数。例如：四、滤镜的创建【以Alpha滤镜为

10、例】【前期准备】利用已有素材在DWCS3中建立站点，打开文件“滤镜实例index.html”1、向导方式【教师演示】选中图像文件 “images/Photo1.jpg”在“CSS样式”面板中单击“新建CSS规则”按钮在弹出的“新建CSS规则”对话框中，在名称编辑框中输入“.lvjing”,选择器类型为类（可应用于任何标签），定义在“Template018.css（默认）”，然后单击“确定”。在弹出的对话框中，选择“分类”中的“扩展”，其对应“过滤器”下拉列表框中选择“Alpha(Opacity=?,FinishOpacity=?,Style=?,StartX=?,StartY=?,Finish

11、X=?,FinishY=?)”。编辑参数，更改为“Alpha(Opacity=100,FinishOpacity=0,Style=2)”，单击“确定”后完成“.lvjing”的样式定义。选中图像文件 “images/Photo1.jpg”在“属性”面板中，在“类”下拉列表框中选择“.lvjing”。完成后保存预览。【学生活动】1.按步骤完成练习。2.学生观看代码提出疑问，为什么图片代码部分上没有显示用到的CSS滤镜的语法？ 3.如果参照滤镜语法完成滤镜的设置，代码部分有何不同？【回顾难点】教师演示示范，学生观察分析讨论教师演示示范，学生分组观察思考分析讨论演示法、观察法案例教学法演示法、观察法

12、案例教学法通过直观演示让学生认识理解，为案例打下基础。案例教学复习前学，巩固本节课知识要点，启发学生思维，以学生的自主探究引出新的问题，得到更多的思考与应用。教学环节教学内容与过程师生活动教法学法设计意图教学知识目标（40分钟）2. 使用代码来添加【难点强化】方法：选中图片切换到代码视图然后修改代码为：参数名称功能参数值Opacity图片不透明程度，单位为百分比0100，0为透明，100为不透明FinishOpacity与Opacity同时使用时，可以制作出透明渐进的效果0100，0为透明，100为不透明Style制定上面设置的透明渐进显示形状0：没有渐进；1：直线渐进；2：圆形渐进；3：矩形

13、辐射StartX渐进开始的X坐标值StartY渐进开始的Y坐标值FinishX渐进结束的X坐标值FinishY渐进结束的Y坐标值预览后观察结果。【学生实践】1.完成第二张图片的滤镜设置。2.比对第二次滤镜设置后的代码，和第一次有何不同？【分组讨论】【师生探究】使用样式面板完成滤镜的添加，主要用到了“类”的方式，适合于多个图片用同一种滤镜效果，具有批量性。第二种方式在制作时需要对代码部分非常熟悉，适合不同图片选用不同滤镜的方式完成。不管采用哪种方式完成CSS滤镜，实际的原图都没有经过任何的改变，只是通过设置在IE浏览器中给我们了不同的视觉印象。【重点回顾】教师演示、讲解、学生观察思考分组讨论自主

14、实践探究任务驱动、演示、观察、自主探究、分组讨论以案例教学为主线，在边讲边练中将代码问题通过学生的观察设问引出，激发学生兴趣同时，以师生的分析讨论获得知识的传承教学环节教学内容与过程师生活动教法学法设计意图教学知识目标（40分钟）五、滤镜的编辑【分组练习】1. 在CSS面板中双击创建的样式文件，在对话框中进行修改2. 在代码视图中，对滤镜语句进行修改六、上机作业【分组练习】1. 完善实例中的图片CSS滤镜美化效果。2. 根据课本P118所提供的其它滤镜参数和教学课件，小组结合创建一个产品说明页面，给所有产品图片选用不同的滤镜，展示效果，自我评价、相互评价。七、教学小结通过运用CSS滤镜，我们在

15、制作网页中省略了运用其它软件处理图片的步骤，而且CSS滤镜对原图片没有丝毫的影响，我们一旦不需要这种图片效果，删除相应的CSS样式文件或语句代码即可，而如何结合网页的主题含义选择和修饰我们的素材是我们网页设计自始至终的要求。八、思维拓展 CSS滤镜除了能对图片进行修改之外还能应用于网页中哪些元素？【补充阅读】CSS滤镜属性只能用在HTML控件元素上。所谓的HTML控件元素就是它们在页面上定义了一个矩形空间，浏览器窗口可以显示这些空间。HTML控件元素包括、和。学生分组练习教师巡回指导分组讨论法、评价法养成学生团队协作意识，培养学生分工合作能力八、教学反思本节课内容比较简单，按照书上的步骤，所有学生能够完成C