在网页中使用表格、文字和图片实训教案

第一篇：在网页中使用表格、文字和图片实训教案

在网页中使用表格、文本和图片

本节课案例效果图：

一、新建站点

在Dreamweaver中新建站点，站点名自定，在站点文件夹中新建文件夹images，用来存放网页需要的图片素材，新建文件index.html作为网站的首页，并开始编辑网页。（该步骤不熟悉这参考第一周实训教案）

二、index.html网页的编辑

1、添加网页的背景图片

单击【属性检查器】中的【页面属性】

在打开的窗口中，通过【浏览】设置网页的背景图像为images文件夹中的background.gif图片。如下图所示：

2、使用表格对网页进行布局 1）插入4行1列的表格

（1）在菜单【插入】中选择【表格】按钮，如下图所示：

（2）在下边的窗口上进行相应的设置，如下图：

注意：该表格是用来布局页面的，是控制页面中的内容在适当的位置显示的，不是我们用来填数据的表格，所以这里表格的边框粗细设置为0，这样的话表格看上去是隐藏的，不会影响页面的美观性。在这里我们为了编辑的方便可以先设置为1像素的边，最后完成网页后再修改为0。

运行浏览效果为：

我们会发现表格式默认居左的，接下来我们设置表格在整个网页中居中，将光标放在表格的边上单击一下选中整个表格，然后在【属性检查器】中将【对齐】方式设置为【居中对齐】方式。如下图所示：

接下来我们运行查看结果如下图：

2）增加单元格列的划分

（3）在第一行单元格中，再插入一个表格为1行2列，将光标定位在第一个单元格中，点击【插入】菜单，选择【表格】，并进行行列的设置，如下图：

运行效果如下图：

（4）使用同样的方法，在第3行的单元格中插入一个表格为1行3列，设置如下图所示：

运行效果如下：

接下来我们为了编辑过程中视觉比较清晰，我们通过拖拽的方式来拉高行高，如果是嵌套了表格的单元格，可以直接拖拉内部表格来进行高度的调整，结果如下图：

3、第1行内容的插入（1）在第1行内表格的单元格中分别输入Fashion时尚生活和服饰搭配和礼仪，结果如下图：

（2）文字内容的美化

首先，选中Fashion，如下图：

然后，在属性检查器中选中CSS，如下图：

接下来我们单击颜色选择器右下角的黑色小三角，在展开的颜色面板上选择一种橙色，选择是只要单击一下即可，如下图：

在单击的同时弹出CSS设置窗口，如下图：

在【选择器类型】中选择“类（可应用于任何HTML元素）”，然后给出类名为.fashion，注意前边必须有点，名称开始的符号必须为字母。然后确定即可。

接下来，还是保持选中该部分文字，在【属性检查器】中修改文字的大小为36，字体为Tahoma，并且加粗，这时就不会弹出CSS的命名窗口，因为该修改仍然是在.fashion类上进行的，如下图：

在此，如果想给dreamweaver添加新的字体，可以单击【编辑字体列表】进行添加，如下图：

譬如，将黑体添加进来，就可以在右边的【可用字体】中选择黑色，然后单击中间的箭头，则字体就添加到【选择的字体】部分，然后确定即可。

用同样的方法，将时尚生活设置为红色、大小16号、默认字体、加粗。（3）将“服饰搭配与礼仪”在单元格中居右

首先选中“服饰搭配与礼仪”，然后选择【属性检查器】的对齐方式为右对齐，如下图：

单击之后弹出如下窗口：

在【选择器类型】中选择“类（可应用于任何HTML元素）”，然后给出类名为.fsdp，注意前边必须有点，名称开始的符号必须为字母。然后单击确定即可。

运行结果如下：

4、第2行水平线的插入

将光标定位在外层表格的第2行，然后单击菜单【插入】，选择【HTML】-【水平线】，即可插入水平线。运行效果如下：

接下来将水平线的颜色修改为红色，单击选中水平线，将会在【属性检查器】中显示水平线的属性： 我们前边在修改“时尚生活”的颜色为红色的时候，曾经创建过一个.ssh的CSS类，现在我们只需要将该CSS类应用到水平线上就可以了，我们在属性“类”中单击下拉列表选择ssh即可将水平线设置为红色。如下图所示：

运行结果如下：

5、第3行第1个单元格内容插入

将光标定位在该单元格内，拷贝文字素材.doc文件中的第一段，粘贴过来即可。单击右键-粘贴。适当的调整该单元格中表格的列宽，运行结果如下：

接下来，在文字底部插入图片，注意这是需要另起一段或者换行，注意直接按Enter回车键是另起一段，按shift+Enter是另起一段，这两种方式都可以，只不过使用分段的方式图片和文字距离远一些，这里我们直接回车，然后在【插入】面板中选择【图像】进行插入。

在弹出的图片选择对话框中单击图片排列方式按钮，如下图所示，选择缩略图，就可以很直观的看到你要选择的图片了。

单击选择图片后确认即可。通过拖拉方式修改图片的大小和单元格的宽度进行适当调整后，运行效果如下：

接下来我们通过创建CSS的方式来美化该单元格中的文字，在CSS面板中，单击新建CSS规则按钮，打开新建CSS窗口，如下图：

在弹出的窗口中，输入CSS的类名，然后单击【确定】，如下图：

确定后，在弹出的窗口中，【分类】中选择【类型】，字体设置为“Tahoma”，字号设置为“14”。如下图：

然后在【分类】中选择【区块】，将首行缩进test-indent设置为25pixels像素，如下图：

最后按【确定】，我们可以在CSS面板中看到刚刚创建的CSS.zgwz。如下图：

但是这个时候，该CSS并没有起作用，我们必须把它应用到文字段落上才可以，现在我们选中整个文字，然后切换到代码视图，我们会看到如下图片：

我们看以看出来整段文字被嵌套在标签中，那么该标签就是表示一个段落的标签，我们只要将刚刚创建的CSS应用到该标签就可以对文字起作用，接下来我们将光标定位到

中的p后边，然后敲空格键，在弹出的下拉菜单中双击选择“class”即可，如下图：

双击选择class后，又弹出一个下拉列表，让你选择你使用哪个类来美化该段落，我们当然要选择我们刚刚创建的.zgwz这个类，只要双击该处即可。如下图：

这时，我们去运行网页，则效果如下：

其实，我们发现好像缩进的不够两个字符，那么我们可以继续在CSS面板中，双击.zgwz这个类，打开CSS设置窗口，在【区块】中去调整text-indent的的像素的多少，直到合适为止。

6、第3行第2个单元格中插入鼠标经过时图像

该效果是当我们的鼠标指针放到这个图片上的时候，这个图片就会变成另一幅图片，从而实现一种美轮美奂的效果。

首先把光标定位在第3行的第2个单元格中，然后单击【插入】面板的【图像】处的黑三角，选择弹出的列表中的【鼠标经过图像】，如下图：

在弹出的窗口中，选择【原始图像】为shishang_r3_c4.jpg，【鼠标经过图像】为shishang_r3_cquse.jpg，然后确定即可，如下图：

调整单元格和图片大小到适合程度后，运行网页后，将鼠标放在图片上，可以观察到图片的切换效果。

7、第3行第3个单元格中插入列表文字和图片

单击【插入】面板【常用】旁边的黑色箭头，展开列表后，选择【文本】，如图所示：

在【文本】面板中，选择编号列表，则插入点处就自动插入1.，如下图：

在插入点出插入文字素材中的“文明大方”后回车，则编号2会自动出现，依次按照文字素材将三个标题拷贝上去，如下图：

接下来我们，将光标定位在“文明大方”后边，敲击回车，如下图：

将光标定位在2.后边，选择【属性检查器】中的【HTML】，如下图：

单击上图红框处的向右缩进按钮，则2.变成1.的下一级列表，如下图：

然后我们再单击【属性检查器】中的项目符号按钮，则数字列表又可以转换成项目列表，如下图：

然后我们将文字素材中的文明大方的内容拷贝到该项目符号处，如下图：

用同样的方法，添加搭配得体和个性特征的内容，结果如下：

接下来，我们来进行列表项的美化，用图片来修饰，首先单击CSS面板的新建CSS规则的按钮，新建CSS规则.liebiao，如下图：

确定后，在弹出的窗口中【分类】中选列表，然后再list-style-image中选择图片point01.gif为列表用图片，单击【确定】。

然后切换到代码视图，如下：

在标签

ol的后边敲空格，选择class，然后选择我们刚才创建的.liebiaoCSS类，这样我们就把.liebiao样式应用到了列表中，结果如下：

在文字的下方插入两幅图片，并适当调整大小，如下图：

8、在最后一行输入内容“Copyright © 2008 by Choice.Lee All Rights Reserved” 我们会发现© 在键盘上是无法直接输入的，需要打开【插入】面板的【文本】，选择特殊的版权字符©即可插入。如下图：

然后我们选中文字内容，并且在【属性检查器】的CSS中选择【居中】按钮，如下图：

在弹出的窗口中，输入类名.footer后确定，如下图：

预览效果如下：

9.去掉布局表格的边框

单击布局用的表格，在【属性检查器】中将【边框】设置为0，敲回车或tab键确认即可。如下图：

注意布局时用了三个表格，全部修改过来，网页会更美观。最终效果如下：

第二篇：网页中表格教案

第三课 在网页中插入表格

一、教材分析

网页制作中用表格来规划整个网页的布局，是我们设计制作网页常用的手法。所以学会在网页中插入表格是网页制作中的一个重要的部分。本课的主要内容包括在网页中插入表格，表格的编辑和修饰，在表格中插入文字、图片等。通过对本课的学习，让学生了解用表格来规划网页会使网页结构显得清晰明快。在网页制作中，引导学生用表格来规划网页，为以后网页的开发设计打下一个良好的基础。

重点：学会使用多种方法在FrontPage中插入表格。难点： FrontPage表格的美化。

二、教学目标

知识与技能：学会在FrontPage中插入表格及美化表格的方法，培养学生运用表格设计来美化网页的能力。

过程与方法：采用研究体验式和协作式学习方法，培养学生对计算机知识的迁移能力和综合运用知识的能力。

情感态度、价值观：通过网页制作，培养学生良好的审美情趣。使学生逐步形成用表格来规划网页布局的网页制作习惯，为今后网页的开发设计打下一个良好的基础。

三、教学准备：

硬件环境：使用多媒体网络教室，配备宽带网络。软件环境：WinXP操作系统、FrontPage2000以上版本。素材资源：

1、在教师机或学生机上为学生建立相关的素材资源文件夹。

2、教师为学生准备上课演示用的教师制作的网页1。

我打算出示一组关于学生作文的中学生作文网。

3、为学生准备上课演示用的教师制作的网页2-----情感小屋网页，通过在情感小屋的首页内插入表格，通过进一步用表格规划情感小屋首页的网页布局来学习网页中表格的设计与制作。

五、教学流程

出示课前准备的含有表格的网页1中学生作文网，（一）创设情境，确定问题，布置任务

师：当你漫步在环境优雅的校园时，是否考虑过校园里的林荫道和绿化带的作用？ 生：起着绿化与方便交通的作用

师：其实还有着非常重要的作用，将行政区、办公区、生活区、活动区分成各自独立的区域，使整个校园错落有致，美丽如画，同样，如何将网页布置的美观整齐，结构清晰呢我们运用表格来布局与美化网页？

任务一：在FrontPage中有几种创建表格的方法？它们各有什么优点？

方法一：“常用”工具栏“插入表格”命令。

优点：操作速度快

方法二：“表格”菜单“插入”→“表格”命令。优点：能对表格预先进行设置。

方法三：“表格”菜单的“绘制表格”命令，手工绘制表格。优点：能做出特殊的表格，可以对表格进行修改。

任务二：

如何隐藏表格边框？-----推出表格属性的用法 任务三：

请同学们尝试着在FrontPage中制作如下表格：

（二）学生自主探究学习我 就 是 我姓名 年龄 学校 家庭住址 特长

姓别 QQ1、在FrontPage插入简单表格这一教学环节，考虑到学生已有Word知识的基础，故在此可放手让学生自主学习。通过让同学演示示范，得出插入表格的几种基本方法。并利用同Word相类似的编辑方法来体会FrontPage中表格的简单编辑。完成表格的简单制作。

2、为完成“表格的调整”这一教学任务，教师可提前演示制作好的表格，带着如下问题以小组为单位，研究和尝试对表格进一步美化：

（1）怎样进行行高与列宽的调整（2）怎样进行单元格的合并和拆分（3）怎样进行插入或删除表格中的行或列，（4）怎样进行平均分布行和列等基本操作（5）怎样进入表格属性对话框？

（6）表格属性对话框中相应选项的改变会给网页的效果带来哪些变化，起到什么修饰作用？

在此过程中，教师也可深入到各小组的研究讨论中去，和同学们共同寻找答案。然后，请完成表格美化的同学演示示范，以此突破本课利用表格属性来美化表格这一教学难点。

（四）创设任务，小组协作，巩固新知

在学生已基本学会插入表格和美化表格的基础上，再次创设学习任务，以小组为单位，打开站点“情感小屋”，并打开首页文件index.htm,分别插入四个表格，依次为：2╳3、2╳2、1╳4、2╳

1、宽度为780像素，水平居中。

最后展示各小组学生的作品，展开自评与互评。

六、评价建议：

本课的评价环节贯穿在学生学习活动的全过程，在学生每完成一个学习任务之后教师都要予以充分肯定，尤其在小组的作品展示阶段，教师要注意引导学生从多方面、多角度评

价每个小组的作品，如对各小组的网页作品，可在网页内容、网页规划及网页美化等方面进行自评和互评。注意培养学生良好的审美情趣。

第三篇：《网页设计中的表格排版》教案

《网页设计中的表格排版》教案

授课老师：陈清锋

总1课时

本周第5课时

备课时间:2010年11月30日

授课班级:高一（2）班

授课时间:2010年12月9日

教学目标

知识与技能

1、掌握网页设计中的格式化操作

2、掌握网页设计中表格底纹设置

3、掌握表格的属性设置

4、掌握网页设计中表格的排版 过程与方法

1、培养学习、比较、归纳等思想方法和自觉学习的方法。

2、培养学生动手操作的动手能力，形成比学赶帮的学习气氛。

3、培养学生基本的网页制作流程，培养学生任务驱动方法。情感态度与价值观

1、在操作过程中体会网页编辑的整体美感，培养学生基本审美的观点。

2、引导学生形成自主学习与合作学习等良好的学习方式。

3、培养学生正确的人生观和道德情感。教学重点

1、表格中单元格的美感排版

2、掌握表格中的底纹操作 教学难点

1、网页设计中的表格美感排版

2、网页设计中表格嵌套操作 教学用时 1课时 教学地点 三楼机房 教学过程

一、课堂准备及引入（2分钟）

师生问好。清点人数。安全教育：大家刚才来到机房是怎么来的？蹦过来的？！不要急冲冲地来，要做一个文明学生，有一个大将风范，从容地走进机房，如果你是跑来，容易撞到别人，自己也容易摔倒。

大家都知道，现在每个公司，每个学校，每个企业都有了自己的网站，他们的网站都是很漂亮，而且都是非常容易吸引人的，其实，你们也是有能力达到那种水平的，关键是看你要不要学的问题，如果你要学，你们完全有可能超越他们。那么，在制作网页之前我们应该做一个什么重要的步骤呢？建立网站站点，下面，让一个同学来建立一个网站。由学生上台操作完成。网站建好以后，我们就可以制作网页了。今天我们的主要内容是如何利用网页设计中的表格对网页进行排版。（展示课题和重难点）

接着，展示本次训练的网页效果。要求学生按要求完成本次作业效果。（发素材到学生机）

二、提出自学训练题目（5分钟）

学生自己建立一个以自己名字命名的站点，新建一个主页页面，同时再建3个页面作子页面。

1、建立主页，同时建立三个子页面，制作主页网页背景，字体大小和网页标题。

2、制作LOGO栏（一行3列）。

3、制作导航条（首页、湄州之旅、三字公约等8个导航）

4、制作主页面的排版。（注意各排版的关系和位置）。

5、制作页面底部的版权和与子页面的链接部分。

三、学生操作，教师巡视（5分钟）

四、学生演示操作结果，检查学生的自学效果（5分钟）学生操作结果。（分别由学生来完成题目）

五、教师讲解，指出学生的不足（板书）（8分钟）

1、建立主页，“文件”→“新建”→“基本页”→“HTML” →“确定”。保存存“index.html”，用同样的方法建立三个子页面，分别保存。a“属性”→“页面属性”→点击“背景图像”右边的“浏览”按钮，选择“pic/bggreen.gif”这个图像文件，作为网页的背景。

b在标题右边输入：欢迎进入充满朝气蓬勃的高一（2）班级网站。

2、制作LOGO：制作一行三列的表格，分别插入各自的图像和文件。

3、制作导航：a新建一个页面文件，然后在编辑区域中插入一个 2 × 1 的表格，并设置表格的基本属性参数。b将光标置于第一行的单元格中，再将单元格的背景颜色设置为 # 69A 538，并应用同样的方法将第二行单元格的背景颜色设置为 #8FCB 5A。设置完成后将光标至于第一行的单元格中，然后在此单元格中插入一个 1 × 8 的表格，并设置表格的基本属性参数.。c录入文字并设置单元格。在新插入的表格的所有单元格中输入文字，然后选中所有单元格，设置单元格的相关属性。d改变其中一个单元格的文字颜色和背景颜色，使其突出显示。e此时即可得到带有层次感的表格效果。

4、主页面的排版：（重点讲解，让学生明白为什么要这样操作）

a插入一个一行三列的表格（重点说明：大的外表格起到排版布局作用）b左边的一列：插入三行一列的表格，并输入必要的图像和文字。c中间的一列：插入三行一列的表格，并输入必要的图像和文字。d右边的一列：插入三行一列的表格，并输入必要的图像和文字。（查看结果与教师的效果有何不一样）

e左边的一列：插入三行三列的表格，并输入必要的图像和文字。f中间的一列：插入三行一列的表格，并输入必要的图像和文字。g右边的一列：插入三行三列的表格，并输入必要的图像和文字。

（整调排版使用网页整洁美观，关键利用网页设计中的空表格作用进行排版）

5、制作版权和子页面：一行一列表格，输入版权。制作部分超链接。

六、学生当堂训练（8分钟）

学生继续完善网页主页和子页面的设计及超链接制作。

七、学生提交作业（2分钟）

让学生把作业提交上来，检查学生的作业。

八、作业讲评，比较，推优（1分钟）

把学生作业进行讲评，学生之间对比在学习中形成一个比学赶帮的气氛。（做好学生作业情况记录）

九、小结（1分钟）

1、网页中的表格排版一定少用空格。

2、页面要整齐美观。

3、网页中排版要注意空隙的使用。

4、使用扩展布局。

5、只设宽度，不设高度。

十、作业（10秒）

制作一个关于个人的网站。

十一、思考题，指导下一节讲课内容（30秒）

1、网页设计中有否其他的页面排版？

2、预习层的使用？它与网页有什么不一样的地方？

十二、检查计算机硬件配件，师生问好，有秩序下课。（5秒）

十三、教学反思

第四篇：在网页中插入图片教学设计

《在网页中插入图片》教学设计

执教：熊

恒

教学目标： 知识与技能：

会打开上次的网页；了解图片在网页中的作用；学会在网页中插入图片的方法。

过程与方法：

通过独立探究和小组探究的方法基本掌握在网页中插入图片。

情感态度与价值观：

培养学生的审美能力，形成与同学和谐相处、共同进步的精神。明白帮助他人的目的就是美化我们的心灵。

教学重难点：

重

点：了解图片在网页中的作用 难

点：能在网页中插入图片

教学时间：一课时

教学过程：

一、导入新课：

同学们，上节课我们学会了制作只有文字的网页。可是“咪咪豆网屋”的主页还有可爱的胖胖熊图片呢！它是怎么进来的？对于这个问题，我们来进行具体的研究。

揭示课题：在网页中插入图片

二、探究新知 任务一：了解图片在网页中的作用。

（1）、教师出示只有文字和带有图片的两个网页，提问：这两个网页哪一个好看呢？

（2）、引导学生观察，并说出为什么？指定学生回答（有图片的那一个）

（3）、小结：网页中的图片可以使网页更加美观漂亮。任务二：打开主页文件咪咪豆网屋index.htm（1）、师生复习启动frontpage 软件。（它是微软公司推出的一款优秀的网页制作软件）

（2）、学生试着打开主页文件咪咪豆网屋index.htm，老师巡视并校正。

操作步骤：网页制作软件——单击文件——打开文件——我的文档，找到主页文件咪咪豆网屋index.htm——再打开。

（3）、学生操作。

任务三：把“胖胖熊”请进来

（1）师生复习在word 中插入图片的方法，指名学生回答。教师小结：方法一：①、复制——粘贴；②、方法二：菜单——插入——图片——来自文件——选择图片单击插入。

（2）学生练习图片的插入，（3）学生探究把胖胖熊请进“咪咪豆网屋”主页中的的方法。

教师提问：能否把在word中插入图片的方法运用在frontpage 软件中呢？（指名学生回答：可以）学生动手操作：教师巡视，对不正确的地方进行校正。教师小结：

我们可以这样把胖胖熊请进“咪咪豆网屋”主页。操作步骤：

① 把光标移到第二行“咪咪豆网屋”的左边；

② 单击“插入”菜单；

③ 选图片来自文件→选C：“网页制作”文件夹→找到“胖胖熊1.gif” 文件并单击→单击“确定”。

（3）、学生操作，教师巡视指导

（4）、要求学生用同样的方法把胖胖熊放到“咪咪豆网屋”的右边。

任务四：保存网页

同学们，我们成功把胖胖熊请进“咪咪豆网屋”主页中，现在，我们要做的就把今天的作品保存起来！

学生试着保存：单击文件菜单——保存文件。

四、教师小结：今天同学们通过努力，基本掌握了在网页中插入和美化图片的方法，我们插入网页的目的是美化网页，帮助他人的目的是美化我们的心灵。

第五篇：信息技术《在网页文档中添加图片》说课稿

2011春季学期公开课说课稿

《在网页文档中添加图片》说课稿

阳山中学 冯世良

尊敬的各位老师：

大家好！今天我说课的题目是《在网页文档中添加图片》，它是粤教版的选修三《网络技术应用基础》中使用Dreamweaver制作网页的内容，教学的对象为高二级学生。本节课我将从以下八个方面加以说明：

一、说教材

（一）教材分析

本教材贯彻“以学生为主体，教师为主导”的方针，把提高学生的积极性，培养学生的创新能力作为教育的根本目标。本课所学的是“在网页文档中添加图片”，是网页页面美化的重点知识之一，是图片在网页上的应用、延伸和拓展。通过本课学习，使同学们了解到Dreamweaver作为一个优秀的网页制作软件，在网页上使用的元素里面除了文字外还可以插入图片、动画等等。学习Dreamweaver的灵活应用，是对学生掌握制作网页的能力训练与提高，激发学生自主创作出更加优秀的作品。

（二）教学目标分析

教师应特别注重培养学生如何获取信息、处理信息和应用信息的能力。在新课程理念指导下，我根据本节课教学内容制定了知识与技能、过程与方法以及情感态度价值观三个方面的教学目标。

1、知识与技能

（1）学生通过使用Dreamweaver在网页上插入图片操作练习，让学生熟悉在网页上使用图片的各种方法；

（2）通过练习操作调整图片、编辑图片，使学生熟练掌握在Dreamweaver中调整图片、编辑图片的技巧。

2、过程与方法

（1）通过教师引导，学生动脑思考、交流与实践操作的学习过程，体验和感悟探究的一般过程；

（2）学生通过自主、合作、探究学习的方式，提高获取信息、处理信息和应用信息的能力。

2011春季学期公开课说课稿

3、情感态度价值观

通过设计“美丽的九寨沟”这一页面，学习在网页文档中插入图片，提高自己的操作能力，激发学生学习计算机的兴趣，鼓励和培养学生自主创新的情感。

（三）教学重、难点分析

这节课的教学内容是在网页文档中插入图片，因此让学生掌握插入图片的方法是本节课的重点。对图片的调整和编辑的操作中学生容易出错，掌握起来还有一定的难度，因此我把图片的调整与编辑作为本节课的难点。

重点：通过本节课学习，熟练使用Dreamweaver在网页文档中插入图片的方法。

难点：学生通过交流与实践操作，熟悉插入图片的方法，掌握对图片的调整和编辑的技巧。

二、说教法

根据教学内容，本课采用的主要教学方法有“创设情境法”、“任务驱动法”、“自主探究法”、“分层教学法”。

信息技术教学大纲中明确指出：知识及技能的传授应以完成典型“任务”为主。为此在授课时，我先通过展示九寨沟美丽的风景图片，激发学生的兴趣，引出本节的主题任务——为九寨沟制作宣传网页，在完成这个主题任务过程中，再给出一个个小任务，让学生运用已学知识，自已动手，自主探究，以任务的方式再次激发学生兴趣，使教学内容合理流动。

三、说学法

在这节课中学生主要用到的学法是：接受任务——思考讨论——尝试操作——自主创造——作品展示。学生在完成每个任务的过程中，总是从思考讨论完成任务的办法开始，在对讨论的结果进行探究验证的基础上，完成任务，最后通过作品展示，让学生更多地体验一种成就感，进一步激发他们强烈的创造欲望。

四、说教学准备

1、带多媒体教学系统的网络教室；

2、多媒体教学课件；

3、学生预先分组，并选一个计算机水平较好，又比较负责任的学生担当小组长；

2011春季学期公开课说课稿

4、将九寨沟相关资料及图片存放在学生机上。

五、说教学过程

根据本课教学内容以及信息技术课程学科特点，结合高二级学生的实际认知水平，我设计了如下四个教学环节：

（一）情境激趣，引出主题

（二）任务驱动，自主探究

（三）实践运用，提高发展

（四）展示评价，归纳总结 第一环节：情景激趣，引出主题

首先，我展示九寨沟风景图片，同学们一定会被眼前美丽的风景所打动。此时，问道：多么美丽的风景啊，你们想不想让外面更多的人了解美丽的九寨沟，让更多的人到九寨沟旅游观光呢？那么，今天我就让大家当一回设计师，用我们所学的Dreamweaver软件为九寨沟的旅游事业设计一个网页，让更多的人来了解九寨沟！好不好？

同学们的激情一下了被调动起来，使新知识的学习成了学生内心的需要，从而使这节课有了一个良好的开端。

第二环节：任务驱动，自主探究

同学们的激情被调动起来后，个个跃跃欲试，紧接着有一些同学会由喜悦转为疑惑：怎样为九寨沟作宣传呢？

这时，打开两个文档：看，这是老师为九寨沟设计的两份宣传页面，你们觉得哪份宣传效果更加形象生动，更能起到很好的宣传效果呢？

学生的回答肯定是带图片的那份，我趁热打铁提出第一个任务。任务一：同学们先自已动手试一试，如何在网页中插入图片？

任务提出后，同学们思考讨论，然后我提示学生插入图片要使用插入菜单，让学生自已动手实践，看看谁最先找到插入图片的方法，这样意在培养学生主动探索的学习习惯。

在动手实践过程中，学生的水平不一，有些同学不仅很快就找到了插入图片的方法，还找到了其他插入图片的方法。但是，也有少数学生找不到，这时，我

2011春季学期公开课说课稿

请已学会的学生担任小老师，指导其他同学，并鼓励学生走上讲台为大家分别演示插入图片的方法，给学生提供一个展示才能的机会。

然后，我利用事先做好的课件，演示操作步骤，归纳操作方法。这样做，既突出了本节课的重点，又强化了学生对重点知识的掌握。

通过学生的演示，教师的归纳，学生们都能将图片插入到网页。紧接着我找出几份具有代表性的学生作品，利用多媒体网络教室广播软件进行展示，我首先对这些作品给予充分肯定的同时，请同学们议一议如何使这些作品更加完美，同学们畅所欲言，对于学生们提出的建议，我归纳成3个有待解决的问题：

问题1：如何改变图片的大小？ 问题2：如何移动图片的位置？

问题3：如何调整图片和文字之间的位置关系？

这3个问题转变成为3个新的任务摆在了学生们的面前，我让学生根据自已能力的高低选择1个或多个任务进行探究，并尝试操作。这样采用分层教学的方法，既让能力高的学生充分展示自已的才华，也能让能力较低的学生品尝到成功的喜悦，使得全体学生都得到最大程度的发展。

同学们在操作前，我这样提示大家：如果遇到解决不了的问题，可通过教材的阅读或网络搜索解决方法的方式来完成。

教师巡回指导，对于个别学生遇到的问题，可以让小组中会操作的学生传授方法，开展合作学习。对于大部分同学都解决不了的问题，则进行启发引导。

然后选几位学生将屏幕上的几幅作品进行完善，最后教师进行归纳总结，并对操作过程中容易出现的问题进一步强调。通过生生互动，师生互动，突破了对图片进行调整编辑这个难点。

在这一环节，同学们在任务的驱动下，自主探究，动手实践，解决了问题，学生的角色从“让我学”变成“我要学”，学习的兴趣在不断提高，好奇心也随之得到满足。动手实践的得与失，不再是作品的好坏，而是“自主学习”的成功体验。

第三个环节：实践运用，提高发展

在学生掌握新知后，我设计了一个以小组为单位来为九寨沟设计一宣传网站的比赛，在制定比赛规则后，给学生留下自由发挥的空间，鼓励学生自主创造，2011春季学期公开课说课稿

充分发挥自已的灵感和特长，以小组合作的形式，让学生体验团结协作的力量，以比赛的方式，使学生的兴奋点再次激起高潮，不知不觉中使知识得到了巩固。

第四个环节：展示评价，归纳总结

在这个环节里，利作多媒体网络教室的优势，将小组中的优秀作品传送到教师机，我利用广播教学让学生欣赏。学生在欣赏的过程中，既可以相互学习，交流心得，锻炼口头表达能力和评价能力，又可以使学生获得成功的兴奋，被认可的满足，品尝到学习的快乐。

六、布置作业

在我结束本节课的教学活动时，我将请同学们对这节课谈谈自已的收获，目的在于让同学人回顾教学过程，对知识进行系统化的梳理，加深对本课重难点的理解。最后，我会说：今天大家已经成功地为网页添加图片，但是网页还不够完美，比如动态元素的使用，背景的设置等，这些知识我们将在下节课继续学习。然后，布置作业：预习在网页文档中设置动态元素的方法，并尝试着操作练习，这样给学生造成学习的期待心理，激发他们下阶段的学习热情。

七、评价分析

本节课以任务为主线，有意识地留给学生适度的思维空间，使传授知识与培养能力容为一体。鼓励学生大胆上台演示，让学生暴露思维过程，教师将从多方面给予评价，同时，通过作品展示，让学生自评，互评，从而体现评价主体的多元化，评价方式的多样化。

八、板书设计（略）

我的说课到此结束，敬请各位评委老师指正，谢谢！