网页设计教学案例 网页设计教学设计(5篇)

每个人都曾试图在平淡的学习、工作和生活中写一篇文章。写作是培养人的观察、联想、想象、思维和记忆的重要手段。范文书写有哪些要求呢？我们怎样才能写好一篇范文呢？以下是我为大家搜集的优质范文，仅供参考，一起来看看吧

网页设计教学案例 网页设计教学设计篇一

【课时安排】1课时

【教学内容分析】 本节课的主题：让学生认识并利用dreamweaver软件制作简单的网页，学会建立站点和设计有一定主题思想的主页，本课是用该软件创建环保网站，也就是用所掌握的信息技术知识解决生活中的实际问题，使学生能够学以致用。发挥信息技术学科的优势，以素质教育的新理念，增强学生的动手能力，提高学生的综合素质。

1、以教材为基石，作为构建知识的桥梁，依据《课程标准》，创造性、合理的对教材进行二次开发与重组。如：导入新课时，利用学生对美好事物的向往，激发学生的求知欲和学习兴趣；采用任务驱动教学，增强学生自学能力；对学生的评价方式，采用学生作品展示，是学生学习的一个延续，对学生学习起到一种推进的作用。

2、对教材内容进行引申与组合，让学生利用网络强大的功能搜集资料，分组搜集不同内容，包括图片与文章，采用任务驱动，协作互助的授课模式，发挥教师的主导作用，增强学生的主体地位。通过创建环保网站增强学生的审美意识与想象力，提高学生的综合能力。

【分析教学对象】

1、学生的年龄特点和认知特点：

学生对周围的一切充满了好奇，他们急于表现自己，对于教师布置的任务能够认真对待。对于dreamweaver的知识掌握的较好，但综合运用能力尚有欠缺；能够上网搜集资料，但速度与技巧还有待提高。本节课给学生提出一个总的任务：创建环保网站，此项任务的设置合理、艺术，对于学生各项能力的提高有很大帮助。

学生创作欲强，因此本节课中，提倡、鼓励独立完成作品，培养学生热爱自然热爱环境的情感，以增强学生的保护地球、保护环境的意识。

2、在学习本节课之前学生应具备的基本知识和技能：

能掌握基本的文字修饰与排版功能并能查找指定地点的文件，会浏览网页与下载资料。

3、学习者对即将学习的内容应该具备的水平：

本课是学生初次认识dreamweaver并能应用它制作简单的网页，培养学生综合运用知识解决问题的能力，以及各方面素质的一次综合评价。

【教学目标的设计】 1.知识目标：

（1）了解网页的概念；

（2）初识frontpage2000并学会简单地应用；（3）了解建立网站的一般方法；

（4）学习制作包含文字、图片和声音的网页。2.技能目标：

学生通过探究学习过程中，掌握网站的建立方法与创建简单网页的操作。3.情感目标：

培养学生在学习过程，自主探究能力和分类汇总知识的能力。培养学生热爱环境、保护环境的情感并能号召人们行动起来保护地球、保护我们生存的环境。

【教学重点与难点】

（1）重点：建立网站与在网页中插入文字、图片、设置背景和背景音乐。（2）难点：将网页存在网站内并把涉及到的文件分类汇总在相应的站点文件夹中。

【教学策略设计】

1、根据教材内容和学生的实际情况，本课采用“任务驱动”、“问题──探究”等教学方法，创设一个板报展览的情境（创设情境），以逐个任务和问题驱动学生多动手、多思考、多实践，从而了解和掌握dreamweaver的基本知识和技能。并以英语的鼓励语言和信息技术专业术语增强学生的学习兴趣。

2、本课传授给学生的学法是“问题驱动下的自主学习──分组协作学习──探究发现学习”。让学生在创建环保网站的过程中，既鼓励个性张扬，又提倡某些问题的分组协作与自主探究，指导学生对图片及文字的来源进行探究发现（从网络中搜集）。建构主义学习理论强调以学生为中心，要求学生由知识的灌输对象转变为信息加工的主体。故此本课教学过程中，以问题驱动，激发求知欲望，让学生带着逐个任务通过探究发现、相互合作、实际操作等方式，自主学习，使学生在完成任务的过程中不知不觉实现知识的传递、迁移和融合。

3、是在网络教室中完成的，利用多媒体局域网络，实现教师演示、个别指导、网上交流、作品提交及作品展示评比。在出现共性问题与个别错误时教师可以利用网络教室软件演示和个别指导，在创作作品的同时，生生可以进行网上交流。体现教师的指导、组织作用，学生主体、探究协作地位。

【教学评价设计】

1.采用小组间竞争机制，比赛哪个小组解决问题或是完成任务的速度快与质量高，增强学生协作互助的意识。

2.最后进行作品展示，评出“速度”奖，“质量”奖，“原创风味”奖等几个奖项，进一步激发学生的学习热情。对自己的作品有一个反思，增加相互学习、相互交流的机会，让学生学会自己梳理知识，增强自学能力。

【教学过程设计】

一、情景导入

先前我们学习了使用搜索引擎查找我们所需要的资料，这些资料是以网页形式存在于网络中，大家想不想拥有自己创建的网页？（激发学生的求知欲）（学生回答：想）

从这节课开始我们就学习制作网页，到底什么是网页呢？

二、问题驱动 任务一：大家打开课本阅读和浏览一些好的网站了解网页概念，网页与网站的关系？看哪个小组能最先解答该问题？

学生阅读课本（3分钟）分小组讨论自己的理解。

小结：

1.网页使用文字、图形、声音影视等多媒体的形式表达信息，使表达的信息更加鲜活；

2.问网站时看到的第一个页面（网页）就称作网站的首页或主页； 3.网页如同大家一样都必须有一个“家”，这个家就是网站； 4.存在网站中的网页之间采用了链接式的方法将网页串接起来。

任务二：在我们了解网页与网站后，会有疑问：使用什么软件制作网页呢？带着这个问题阅读课本，同时跟随课本启动这个软件。看哪个小组成员最先完成？ 学生阅读并实践„„ 小结：

大家会有疑问为什么选择它，还有别的软件吗？有，如frontpage网页制作软件等，课本中使用了dream weaver这个软件简单易学，并且窗口与我们使用操作系统windows都是基本一致的。

网页设计教学案例 网页设计教学设计篇二

《网页设计》之站点的建立教学案例

新疆阜康市厦门实验小学成伟

一、教学目标

1、知道站点、主页的概念，能在指定位置建立只有一个网页的站点；

2、认识frontpage的界面；

3、掌握在主页中插入文字、图片、水平线；

4、掌握页面文件与图片的保存。

二、教学重点

1、能在指定位置建立只有一个网页的站点（难点）

2、能在页面中插入文字、图片、水平线

3、掌握页面文件与图片的保存（难点）

三、教学方法

在教学中，一方面采用比较教学的方法，促进学生知识的迁移；另一方面，提供学生一个导学课件，让学生根据这个网络环境下的课件自己探索学习，以满足不同层次学生的需求。

四、教学过程 设计

教师活动：

1、引入课题：（激发兴趣，活跃气氛）

同学们喜不喜欢上网？经常上新浪、百度等，有没有同学知道新浪、百度称做什么？

（网站）

浏览新浪网站，浏览的第一个页面称为什么？

（主页）

问题1：网站是不是就是网页？用自己的语言描述一下网站的概念

（网站包含多个网页，通过超链接把不同的页面链接起来）

问题2：网页是不是就是主页？

(第一个页面称为主页,网站设计者可以确定哪一个是主页,主页的文件名一般为：,主页也是网页)

设计网站一般必须经过两个步骤，首先是在计算机里做好，然后发布在internet上，让所有的人访问浏览。

今天我们学习用frontpage建立站点，制作一个主页。先来研究一下没有发布的网站,打开教师做的网站

问：同学们看到了什么？

（文件夹）

总结：

可以这样理解网站：在资源管理器里，网站表现为一个文件夹，里面存放的是所有与网站相关的文件。

打开主页，浏览页面，这是老师做的一个导学课件，将帮助大家完成学习任务。

请学生浏览教师课件，了解学习任务

2、新建站点

frontpage的启动

问：与word比较，有什么不同？

（增加了视图区，编辑区有三个窗口）

总结：

视图区：多种视图模式是为了方便网站的管理。制作网页时，必须在网页视图中编辑页面

普通窗口：鼠标在闪动，可编辑、修改页面，所见即所得的方式

预览窗口：浏览器中出现的效果，与powerpoint中的“放映幻灯片”类似。

打开导学软件，根据步骤，示范建立只有一个网页的站点，强调新站点的位置、路径的正确输入，站点的名称。任务1：学生根据导学课件，在d:建立自己站点(站点名字改为自己的名字，便于记忆)

请一位学生示范如何建立站点,教师总结

问：在文件夹列表中看到了什么？

（分析多出的文件夹列表栏，多了一个文件夹，里面有两个子文件夹和主页，图片存放在images文件夹中）

3、编辑主页与保存主页

看效果图，请学生分析主页中的元素

总结：鲜明的主题，如：我的世界、开心乐园等，有分割页面的水平线，与主题相关的图片，对网站的简单介绍根据导学软件，学生完成任务2：设计主页、保存主页与图片

4、总结反馈

请学生示范，讲解如何插入图片（来自剪贴画与来自文件）、插入水平线，如何保存

总结：必须切换到“编辑”窗口下编辑

主页的保存中存在问题：

单击“文件”----“保存”或工具栏的“保存”按扭，弹出一个对话框，保存嵌入式文件，改变文件夹，图片必须保存在本站点images文件夹中,便于站点的管理。

5、请学生继续完成自己的主页，有能力的同学完成提高篇

6、教师与学生共同评价总结

老师向学生展示自己的作品，与学生一起讨论评价。

请学生总结今天的学习内容：建立包含一个页面的站点，主页的设计与保存。

学生活动：学生回答问题、学生观察网站的表现形式、浏览课件，并了解本节课的学习任务、学生观察frontpage界面与word的不同，学生观察教师演示不同编辑窗口的区别。学生上机操作，在指定位置建立自己站点、同桌互相帮助，并参考教师做的课件，利用网络环境下的课件自己探索学习，满足不同层次学生的需求、学生总结。

网页设计教学案例 网页设计教学设计篇三

我最成功的一节课——网页设计流程

“网页设计流程”是中职计算机应用专业课《网页制作与设计》的重点教学内容。根据中等职业学校计算机应用专业课程的主要任务及对教材内容的分析研究，在“网页制作流程”这课的教学中，我把掌握网页制作流程的一些技术和方法为知识目标，通过对知识的学习和对作品的创作培养学生创造能力，协作能力，动手能力，评价能力，同时在教学中培养学生的审美、欣赏、创新，主动探索与发展的能力为情感目标。那么，如何来实现教学目标呢?我进行了教学研究的尝试，引导学生开展探究性学习：网页制作作品。

课堂教学实例

课题：网页制作流程

一、教学目标

知识与技能

1、熟悉网页的各种元素，以及各元素在网页制作过程中的应用。

2、掌握网页制作过程中的一些技术和方法。

过程与方法

1、以建构主义理论为指导，以研究性学习为载体，培养学生自学，合作学习和动手能力。

2、学生通过亲身经历，提高分析和解决实际问题的能力。情感与价值观

1、培养学生与他人协作的学习品质，加强集体主义的观念。

2、培养学生的科学探索精神与严谨的治学态度。

任务描述

根据学生不同的学习能力，知识、兴趣爱好，依据自愿组成原则，将全班分为6人的小组，各小组规划出网页设计方案，分工合作制作网页，重点注重网页制作流程，并由学生自己担任评委，评选出优秀网页。

二、教学过程

1、课前准备

（1）以小组为单位，规划网页结构方案，描述网页制作流程。

（2）根据这个方案进行工作分配，依据所给网页制作流程准备材料、备写相关材料。

2、制作过程（1）栏目设计

（2）资料搜集

（3）网页蓝图制作

（4）色系选择（5）字体选择

（6）页面详细设计

3、网页评审

各小组派一名成员上台演示，根据老师制定的评分标准，请各小组长进行评分，评出优秀的班级网页。

三、教学活动主要环节

1、引入教学资源环境，创设学习情境。这个环节的主要教学目的是激发学生的学习兴趣和对新知识的渴望，让他们有对新知识和技能的学习动机，愿望和需求，在教学中，根据学生的思想特点与学习心理。我用自己制作的网页课件以及收集的优秀网页截图来创设情景，向学生展示了优秀网页的网页作品，并指出：大家看到的每一幅画面都是一个网页，这些网页有的美观大方；有的丰富多彩。有的个性鲜明，那么我们自己能不能制作出具有自己风格的网页。这样激发了学生学习网页制作的兴趣及求知欲望，产生了完成作品展网页的动机．此时，我对学生提出研究的目标--如何利用网页三剑客这个软件来完成你们的班级网页制作，最后各研究小组要分别展示你们的研究成果。

2、小组学习与探索研究。在课堂上，我出示范例，引导学生分析网页的结构，指出：网页中可以有文字、图片，甚至有动画和声音，为了和浏览者更好地交流，有时还添加各种表格、组件。当然，各式各样的超链接更是常常出现在网页里。学生有了初步的直观印象后，就不会感到盲目，而且会引起学生极大的兴趣。随后，我将一个网页的制作流程分别说明，那一个环节需要哪些软件，用到哪些技术；就作品网页制作过程简单介绍任务分解，重点在于小组任务的分配，将网页制作流程中各环节根据任务的轻重和学生能力的强弱进行分配，既要每个小组成员都有事可干，能完成各自任务，更要每个成员发挥自己的特长，使网页整体有特色，对技术的掌握更上一层楼，这个过程中引导学生轻松愉快、主动去解决问题，完成任务，进而达到自身对知识的意义建构是关键。

3、小组展示网页评审。展示交流是研究课题的最后一个环节，各小组通过多媒体教室向全班同学展示了各小组的研究成果，并对各个小组进行自评，即；说出哪些是本小组最好的，哪些是本小组还没能解决的．最后请各小组长评选出优秀网页。我认为在此环节，教师应把握评价的尺度，评价的侧重点应该放在学生在自主的学习过程中学会了哪些学习方法，同学间团结合作意识是否体现，井充分肯定学生的成果，鼓励他们继续发扬这种探索研究精神。

四、教学反思

在“网页制作流程”这堂课的教学过程中，我充分利用了软件本身的特点为学生创设了和谐、美好，愉快的信息化学习的平台，发挥了学生的主体作用．教学中，充分调动了学生的学习积极性，培养了学生的动手能力，观察分析能力和主动探索性学习的能力。通过教学方法的设计教会了学生分析问题的方法，教学情景的设计使学生身临其境，启发了学生探索新知，深研新知的强烈欲望，培养了学生良好的思维习惯、学习习惯，使学生学习新知识的同时形成了良好的学习心理，实现了教学目标。实践表明，开展探究性学习对网页制作的教学具有非常好的效果，活动中充分发挥了学生的主体性，学生学习积极性被充分调动起来了。同时，提高了课堂效率，使整节课的教学目标得以顺利完成，小组的分工合作体现了平等原则，每个学生都积极参与到教学活动中．此外，小组成果评比演示也充分体现了学生在课堂活动中的主体地位。

网页设计教学案例 网页设计教学设计篇四

网页设计教学总结

这个学期我担任了10网络(1)(2)班和10商务班的的网页设计这门课程。在前面半个学期的教学中，我做到了认真制定计划，注重教学理论，认真备课和教学，努力上好每一节课，并和其它优秀老师交流，从中吸取教学经验，取长补短，提高自己的教学水平。按照课程要求进行施教，让学生掌握好网页设计知识。还注意以德为本，结合网站实例进行层层善诱，多方面、多角度去培养学生的实践能力、提升其操作技能。

下面从以下几个方面来谈谈我这个半个学期的教学总结： 教学进度

按照教学进度，我们已经完成了课程的全部内容的学习。教学进度基本上按照原计划已经完成了。教学方法

教学中我从以下几方面进行努力：

一、课前准备。熟悉教材。解教材的结构，重点与难点，掌握知识的逻辑，能运用自如，知道应补充哪些资料，采用哪个实例作为网页教学实例；解学生的知识结构，解他兴趣、需要和习惯，知道他学习新知识可能会有哪些困难，采取相应的预防措施；结合学生情况采取何种教学方法，解决如何把教材上的知识系统地传授给学生，包括如何组织教材、如何安排每节课、如何讲解实例。设计一些实际中的商业网站案例。

二、课堂情况。网页设计课上。课堂上引起学生的兴趣，激发学生的创作兴趣。网页设计课里包含有一些图片设计和动画设计，这些需要有丰富的想象力才能制作出优秀的作品，课堂上，也尽力培养学生的想象力，引导学生想象。课堂上，始终以学生为学习主体，把学习的主动权交给学生，挖掘学生潜在能力，让学生自主学习，提高学生学习的独立性。记得在有节课，把一个网站拿来讲解，让学生先看，看了后让学生在草稿纸上画出自己的设计草图。最后我再来以不同的方式讲解该网站制作的方式，给学生从多角度进行分析。有时也让学生在教师机上当场操作，让学生的智慧、能力得到体验，使学生成了学习的主人，使学习成了需求，让他觉得学习中有发现、有乐趣、有收获。课堂上关注全体学生，注意信息反馈，调动学生的注意，使其保持相对安静，同时，激发学生的情感，使他产生愉悦的心境，创造良好的课堂气氛，课堂语言简洁明了努力克服重复的毛病，课堂提问面向全体学生，努力引发学生学网页课的兴趣。还要做好课后辅导工作。认真批改学生的作业。

三、课后工作。要提高教学质量。总结学生本次作业中的不足，解哪些知识学生还没有理解并在下一节课时进行补充说明。鼓励优秀学生，激发其它学生。课后多和学生交流，解其学习情况，以便改善教学。存在问题:

一、教学中的相互合作有待提高。

二、网络教学资源还不是特别丰富，不能很好满足教学需求。今后将进一步加强网络资源建设，并提高资源利用率。

总结整个2007年上半年的教学工作，收获是丰富的，不管从知识，还是教学管理，还是教学经验上都是丰富的。给了我成长的道路上宝贵的一笔。虽然有很多时候都是在一种紧张，忙碌的状态下走过，但我知道，走过了这一段，人生就会是另一个起点，有另一个更大的目标等着我去前进。

屈明 2011-12-28

网页设计教学案例 网页设计教学设计篇五

《网页格式刷》

——css样式表教学案例

【教材分析】

“css样式表”是高中信息技术选修《网络技术应用》的第五章“动态网页制作”中的内容。教材中将这块内容分为“什么是css”、“css实现”、“在html中加入css”三部分。本节内容的重点应该是“运用css进行样式设置的方法和格式”及“在html中加入css的三种方法”。因此我认为将“css实现”与“在html中加入css”两部分结合在一起讲比较好。此外，我认为“体会css样式表的优点”也应该是一个教学重点。学生以往用frontpage做网页都习惯用工具按钮、菜单命令来进行网页外观设置，使用代码对学生来说是件令他们头疼的事，所以我认为有必要通过让学生体会css样式表的优点让学生明白为何我们要学习这部分内容。【教学目标分析】

1、知识与技能

(1)什么是css样式表。(2)css样式表的优点。

(3)嵌入式、内联式、外联式三种样式表的使用方法。

(4)通过对三种样式表的亲身实践，感受这三种样式表的优缺点。

2、过程与方法

(1)通过word排版中的“格式刷”引入网页中的“css样式表”，通过类比，使学生初步了解css样式表的作用，激发学习兴趣。

(2)对于css样式表的概念和优点主要由教师讲解，并让学生在实践操作中感受样式表的优点。(3)对于嵌入式、内联式、外联式三种样式表的使用，由教师讲授方法和代码的书写格式要求，由学生根据实例要求自我实践操作。

(4)在学生的实践操作过程中，让完成较快的学生充当小老师，帮助其他同学发现和改成错误。

3、情感态度与价值观

(1)通过css样式表的学习，提高学生美化网页的技能。(2)培养学生的探索、实践能力。

(3)通过实践过程中的“小老师”角色，让学生感受同学之间的互助友爱，团结协作。【学情分析】

通过前阶段的学习，学生已经认识了动态网页，并对html的标签及属性也有了了解。考虑到我所在学校的学生学习能力、领悟能力比较强。因此虽然css样式表对于学生来说是全新的内容，但如果教师采用“讲授概念→操作演示→学生操作”的模式上课，将无法激发学生自主探索学习的兴趣和热情，所以我采用了教师讲授概念和方法，然后由学生自主探索实践操作，使学生的学习更具挑战性。

【教学重点、难点分析】

1、教学重点

(1)css样式表的概念。

(2)体会css样式表的优点。

(3)嵌入式、内联式、外联式三种样式表的使用方法。(4)css代码的书写格式，输入的准确性。

2、教学难点

(1)三种样式表在使用上区别。(2)css代码的书写格式。【教学过程】 [新课导入：] 教师活动：教师展示两篇word文档a和文档b，文档a已经进行了文字字号、字体、颜色、行距、首行缩进等排版，文档b未进行任何排版。

教师提问：同学们，在word编辑中，有什么方法能让文档b以最快捷的速度排版成文档a的字号、字体、颜色、行距呢？

学生活动：部分学生思考后回答“格式刷”。

教师活动：教师迅速的利用格式刷将文档b设置成文档a的排版外观。

教师活动：教师展示两张网页，网页a已经进行了文字字号、字体、颜色、文字链接动态效果、彩色滚动条等外观设置，网页b未进行任何设置。

教师提问：现在老师想把网页b也设置成网页a的外观，有什么方法能够快捷而方便地帮我们做到呢？

学生活动：部分学生回答说“格式刷”。

教师提问：如果我们在做网页的过程中，也有一把“格式刷”，是不是就能很方便的将网页b设置成网页a的外观呢？网页制作中，到底有没有这样的“格式刷”呢？

教师操作：打开网页a的源代码，将css样式代码复制到网页b，立刻使网页b具有了与网页a相同的外观。

教师提问：老师刚才复制粘贴的那段代码是不是具有与“格式刷”相同的作用？今天我们就来学习“网页中的格式刷”——css样式表。

[新课讲授：] 一：什么是css样式表？

教师活动：讲授css样式表的概念。

用一个指定的名字来标识和保存的一组相关字符和段落格式的选项集合。

让学生了解css样式表的优点。(结合实例)

1、避免在标识字符和设置段落格式等操作时重复定义需要的样式（如字体、字号、颜色），从而使应用该样式的网页具有相同的风格。

2、只需要修改一个css代码就可以改变页数不定的网页外观和格式，提高网页编辑效率。

3、可以“随心所欲”地控制页面布局和外观。

4、在所有浏览器和平台之间具有较好的兼容性。

二：如何在html中加入样式？

1、嵌入式样式表

教师活动：教师讲授嵌入式样式表的使用方法。

方法：只需在每个要应用样式的html的标记后写上css属性就可以了。

css属性书写格式：style=“color:red;font-family:黑体;font-size:24pt”

注意：color的属性值还可以用颜色代码，如：#ff0000。教师活动：布置课堂练习题1。

，将网页中文章标题文字“秋天的童话·如梦”用嵌入式样式表设置成：#ff9900，30pt，黑体。（效果如下图）

学生活动：依据教师讲的方法，进行练习。

教师活动：巡回辅导，提醒学生输入字母、标点一定要准确。

教师提问：如果用嵌入式样式表来为网页中的文字设置外观，方不方便？ 学生回答：不方便。

教师活动：总结嵌入式样式表的不足。

嵌入式样式表主要用于对具体的标签作具体的调整，其作用的范围只限于本标签。这种样式表并不能充分体现出css样式表的优越性。引入内联式样式表。

2、内联式样式表

（1）作用于网页中的部分文字

教师活动：教师讲授第一种内联式样式表的使用方法。

方法：(1)在网页的 定义样式，如：

(2)在要设置此样式的文字头插入,文字尾插入,如：

1、提示一些不相干的话。

注意：a1为定义的样式名，不同的网页，样式名可以不同。教师活动：布置课堂练习题2。

，用内联式样式将网页中的9个小标题字体设置为：绿色、14pt、黑体。（效果如下图）

学生活动：依据教师讲的方法，进行练习。

教师活动：巡回辅导，提醒学生定位插入点要准确，样式名前的点不能丢，输入字母、标点也一定要准确。教师活动：发现很多学生的错误都来自输入错误，自己检查半天也查不出来，于是提议让同桌同学帮忙找错。

学生活动：学生很认真的帮同学找错。

教师提问：如果要把“”网页中的小标题的颜色由绿色改为蓝色，想一想该如何做？ 学生回答：只要在定义样式的代码中将“green”改为“blue”就行了。教师提问：但是如果我们没有用内联式样式表，那又该如何做？ 学生回答：那就得九个标题一个一个改颜色，改九次。

教师活动：引导学生体会样式表的使用提高了我们修改网页的效率！（2）作用于整个网页

教师活动：教师讲授第一种内联式样式表的使用方法。

方法：在网页的 插入代码：

教师活动：布置课堂练习题3。

，用内联式样式表制作超链接文字的动态效果：当鼠标划过时，设为超连接的文字，变成橘黄色，并出现下划线。（效果如下图）

此题代码由教师提供代码图片，学生自己输入。

学生活动：依据教师讲的方法，进行练习。

教师活动：巡回辅导，提醒学生定位插入点要准确，输入字母、标点也一定要准确。提示学生利用复制粘贴相同代码后修改，提高自己的输入速度。继续鼓励同学互相帮忙找错误。

教师提问：如果网站内有几十网页都要用到此浮动链接效果，该如何做呢？

学生回答：每张网页都插入同样的css代码。

教师提问：有没有什么方法可以简化这项操作呢？既然几十张网页都要用同样的代码，能不能把这段代码制作成一个独立的文件，然后由每张网页调用呢？

3、外联式样式表 教师活动：教师讲授外联式样式表的使用方法。

方法：(1)将样式定义成一个“.css”的文件：

可在记事本中输入样式代码，然后保存为扩展名为“.css”的文件。(2)在网页的head区插入引用代码：

注意：标签中的属性没有前后次序要求。教师活动：布置课堂练习题4。

，用外联式样式表制作超链接文字的动态效果： 当鼠标划过时，设为超连接的文字，变成橘黄色，并出现下划线。

学生活动：依据教师讲的方法，进行练习。

教师活动：巡回辅导，提醒学生定位插入点要准确，输入字母、标点也一定要准确。样式文件和网页文件要保存于同一个文件夹内。

[课堂小结：] 教师活动：通过两节课的学习，同学们知道了什么是css样式表，掌握了三种css样式表的使用。同学们通过实践操作，也体会到了使用css样式表可以避免很多重复操作，从而提高网页编辑和修改的效率。希望同学们以后在自己制作网站时，能灵活运用css样式表来美化自己的网页。

【自我评析】

本节内容如果但看教学内容，感觉1课时就可以完成，但是考虑到高二会考对css代码的输入有一定的要求，所以我决定所有练习题的代码都由学生自己输入，由于学生的输入速度及准确性问题，比预计多用了一课时。虽然多用了一课时，但是由于知识点讲得比较清晰，给学生练习的时间比较充裕，自我感觉学生的学习效果比较好。

虽然课题引入用去的时间比较多，但是通过word文档中的“格式刷”类比引入，给了学生很直观的感受，很好的激发了学生们的学习兴趣。在讲授三种css样式表的使用方法时，采用通过实践前一种，感受总结不足，引出第二种，使学生对于三种使用方法的区别有了比较深刻的认识。

在学生实践过程中，虽然教师已经一再提醒代码中的字母、冒号、分号、引号不能输错，但学生还是会出现输入错误，而且自我检查不容易找到错误。于是我就让同桌同学互相帮忙找错，既让学生感受了同学互助，又收到了很好的学习效果。