《网页格式刷》教学案例（范文模版）

第一篇：《网页格式刷》教学案例（范文模版）

《网页格式刷》

——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。

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

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

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

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

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

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

2、内联式样式表

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

【自我评析】

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

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

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

第二篇：网页制作教学案例

《网页制作》教学案例分析

【课时安排】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、掌握网页制作过程中的一些技术和方法。

过程与方法

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

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

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

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

任务描述

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

二、教学过程

1、课前准备

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

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

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

（2）资料搜集

（3）网页蓝图制作

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

（6）页面详细设计

3、网页评审

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

三、教学活动主要环节

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

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

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

四、教学反思

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

第四篇：初中信息技术教学案例-美化网页

初中信息技术教学案例

————《美化网页》

一、课题

本课是《美化网页》课时的内容。学生已经学习了制作简单网页的基本方法，这部分的主要内容是，网页中共享边框、导航栏的设置和主题的应用。如果采用传统的教学模式（即教师示范──学生模仿操作）也能完成教学任务，但对学生而言，他们只学会了计算机的操作，而对信息素养并没有得到提高。因此，本着学生自主探究学习意示、创新能力的培养，以综合提高学生的信息素养为目的，笔者在教学时将本课中原来让“做中学”的方式改为了自主探究的学习方式，将课堂交给学生，让学生自主探究学习，教师在课堂中主要起到引导作用。

二、教学目标分析

1．认知目标：学会简单的对网页进行美化的方法。

2．技能目标：

（1）掌握美化网页的几种操作方法；（2）能够应用主题，来改变网页的整体布局；（3）能够灵活地对几种操作方法进行综合运用。

3．情感目标：（1）通过师生协作和学生互相配合，培养学生合作团结的精神；（2）培养学生热爱美的情感，激发学生表现美的欲望，使学生的审美能力得到提高。

三、学习者特征分析

从学生的认知特点来看，他们爱问好动、求知欲强、想象力丰富，对实际操作活动有着浓厚的兴趣，对直观事物感知较强，正处在形象思维向抽象思维逐步过渡的阶段。因此，在学习过程中，应鼓励学生自己观察，亲自动手操作，进行学生讨论和交流，师生共同归纳总结，体验学习。

在讲此内容之前，学生已经学过如何制作一个简单的网页，并且已对网页进行简单的修饰,这为学生进一步对美化网页作好了充分准备。

基于以上学生情况的分析，笔者对教学过程大胆采用让学生为主体，教师为主导为教学思路进行设计。

四、教学策略选择与设计

在讲此内容之前，学生已经学过如何制作一个简单的网页，并且已对网页进行简单的修饰,这为学生进一步对美化网页作好了充分准备。

基于以上学生情况的分析，笔者对教学过程大胆采用让学生为主体，教师为主导为教学思路进行设计。

五、教学资源与工具设计

本课中笔者利用多媒体网络教室系统展示学生制作的各式各样的网页，同时也用简单的幻灯片制作一些简单的页面，以此来出示本课的教学目标以及学习任务，以便学生有目标的去学习和练习。

六、教学过程

（一）组织教学

（二）学生讨论──导出教学目标

师：（利用科教2000多媒体网络教室系统选择几个观看）请同学们将你们所制作的网页打开，说说谁的网页最漂亮。漂亮在什么地方？

（学生讨论）有的说某个同学网页中的文字好看，也有的说某个同学的网页中的图片漂亮，还有的说某个同学的网页底色好看等等。

师：刚才同学们都说出某个网页的某一点好看，没有完全是自己认为最漂亮的一个，那么，今天，就让我们用计算机做出一个自己认为最漂亮一个网页好吗？

生：好！

师：利用多媒体电子教室分别展示已经进行美化了的《美丽家乡1》和当前还没有进行美化的《美丽家乡2》两个网页。谁说说这两个网页哪一个更漂亮，它们的区别在哪儿？

生：“美丽家乡2”更漂亮。

师：那么请同学们讨论一下，要想让网页最漂亮到底要对网页做那些修饰呢？（学生讨论）有的说要加链接栏，也有的说要添加共享边框，还有的说要对网页进行底色的设置。

师：（小结）利用幻灯片出示本节课的教学目标：（1）怎样给网页添加导航与共享边框，来使网页更美观、更具有个性化；（2）如何进行主题的应用来改变网页的整体布局。

（解析：通过学生讨论对老师所展示的学生网页，进而加深对网页的认识，也明白本课的教学目标。由于采用讨论这一形式也能更好地调动全班学生的学习积极性，更容易激发学生的学习兴趣。）

（三）新课讲授

教师利用多媒体电子教室演示

1、插入链接栏导航

教师演示：单击“插入”→“导航”→“插入Web组件”→“选择相应设

置”→“下一步”→“选择相应设置” →“完成”（让学生知道插入链接栏导航的方法）

师：出示学习任务：（展示网页）请同学们插入如教师所示的链接栏。

生：学生自主探究练习。（学生通过自主学习，能初步掌握导航栏的添加，并为后面的共享边框的设置作准备）

师：教师巡视，了解学生操作的情况，进行个别学生指导。对做的好的给予肯定和赞扬。

生：请个别学生示范操作。

教师提出问题：请同学们对“导航栏”属性通话框中的各个“选项”逐个进行研究、总结、掌握。（培养学生的自学能力）

（解析：“插入链接栏导航”是本节教学重难点，通过老师的演示讲解，让学生带着问题去操作，进行自主探究，最终解决实际问题。这样既完成了教学目标，也更好地提高了学生探究意识和创新能力。所以，让学生带着任务直接去学习，这样使学生自主学习得到的体现，也有利于教师对个别学生加以指导，充分体现了学生为主体，教师为主导的思想。）

2．共享边框

教师提示：“共享边框”是在网站的每个网页中，在共同的框架位置上显示相同的内容，我们可以通过“格式”菜单的“共享边框”命令来为网页进行共享边框的设置（让学生知道设置共享边框的概念及设置的基本方法）

师：出示学习任务：（展示网页）请同学们设置如教师所示的共享边框。

生：学生自主探究练习。（学生通过自主学习，能初步掌握共享边框的设置）师：教师巡视，了解学生操作的情况，进行个别学生指导。对做的好的给予肯定和赞扬。

生：请个别学生示范操作。

（解析：本部分教学也应是本节教学重难点，教师并没有完全示范操作，而是稍加提醒，让学生带着问题去操作，最终解决实际问题。这样既完成了教学目标，也更好地提高了学生探究意识。）

3．知识拓展──主题的应用

师：刚才都是我们手工对网页进行的美化，有没有一种更快捷的办法让电脑自动对网页进行美化呢？

生：（学生陷入深思之中）

师：请同学们仔细观察一下“格式”菜单中还有什么命令？（教师适时的加以提醒）生：（此时多数都积极动手操作实践了）

师：那就请同学们各显神通吧！看谁做得又快又好！

生：（此时学生都积极参与操作，都想拿到第一名）

师：（教师巡视，注意观察及个别指导）

师：（过一段时间，当发现有第一位学生运用“主题”做好时）好，我班王伟同学已经做好了，就请他为我们示范讲解一下吧。

师：（结合学生操作和讲解情况加以总结）

（解析：利用知识拓展形式来补充课堂知识，让那些学有余力的学生表现得更出色，同时，也更加激励全班学生向更高层次发展，提高学生对信息技术的兴趣。也要充分注重学生的个体差异性。）

4．放开手脚──充分展显学生个性

师：刚才同学们都掌握了对网页的基本美化方法了，现在老师这还有一个很粗糙的网页想请同学们把它美化的更漂亮些，好吗？

生：好！

师：那就请各位同学大显身手吧，看看谁的网页最漂亮！

生：积极主动地进行练习

师：注意对个别学生进行相关指导。

（解析：通过让学生帮老师解决问题的形式，将问题抛给学生，学生的积极性更高，同时也采用竞赛的形式，比一比谁的最漂亮，这就更好的提高了学生的兴趣。更重要的是能够让学生充分展现个性，放开学生的手脚，让学生大胆发挥想象，尊重了学生的个性发展，大大提高了学生的自主创新能力。）

5．作品分析──填写报告

师：现在同学们都已经美化好了网页，请同学们填写网页上的一份表格。

生：学生认真填写表格内容。

（解析：通过分析自己的作品，让学生在脑海里充分回忆所学过的知识点，加深对操作过程的印象，进而培养学生良好的学习意识和学习习惯。）

作品分析表（略）

6．本课总结

师：（结合某个同学的作品进行总结）这节课我们学习了对网页的一些简单的美化，同学们表现得都很好，希望同学们能将此运用到今后的学习生活中去。

（解析：对全课的总结，首先是进一步理顺了本节的教学重难点，也充分肯定了学生学习成果，为以后的学习奠定了坚实的基础。）

七、教学评价设计

首先，在这节课的教学中，采用了任务驱动的教学方法，注重学生的自主探究意示和创新能力的培养，这种教学方法既培养了学生自主学习的能力，也更好地提高了学生的创新能力，使学生成为真正的学习主体。通过学生自学、实践、质疑、探索的过程，自主完成指定任务来达到教学的目的。在教学过程中多启发、少教授，充分发挥学生的自学能力、独立分析问题和解决问题的能力、创新的能力。

其次，在教学评价上，也让学生进行了自评、互评，提高了学生自我评价的能力，同时也培养了学生良好的学习习惯。

最后，教师从原来的知识的传授者转变为教学的组织者、管理者，教师的主导地位得以充分的体现。

八、帮助和总结

本课教学以“情景导入→知识建构→综合应用→自主创新”为主线，提高了学生学习的主动性。通过本节课的学习使学生们的创新能力增强了许多，制作出了好多漂亮的网页。教师要营造交互式的学习环境，给学生更大的主动权，满足学生个性化的学习需求。教师的引导与学生的思考融为一体，符合学生的认知规律，有助于学生全身心地参与到学习中去。要让学生在课堂上真正“动”起来，教师在课堂预设与生成的诸多环节都要精心设计，科学处理，以理性的思维去点燃学生求知的火焰。

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

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

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

一、教学目标

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

2、认识FRONTPAGE的界面；

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

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

二、教学重点

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

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

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

三、教学方法

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

四、教学过程 设计

教师活动：

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

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

（网站）

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

（主页）

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

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

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

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

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

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

问：同学们看到了什么？

（文件夹）

总结：

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

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

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

2、新建站点

FRONTPAGE的启动

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

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

总结：

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

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

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

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

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

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

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

3、编辑主页与保存主页

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

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

4、总结反馈

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

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

主页的保存中存在问题：

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

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

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

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

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

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