第十一课
顺序结构一图片的放大与缩小
教学目标
（一）知识与技能
1赋值语句的含义。
2程序的顺序结构。
3变量的意义。
4程序调试(编辑错误与逻辑错误)的方法。
（二）过程与方法
演示、讲解顺序结构一图片的放大与缩小相关知识，学生操作体验、探究和指点疑难相结合。
情感态度价值观
培养提高学生观察、思维、信息技术应用能力，激发学生探究兴趣，体验学习的快乐。
教学重难点
1、程序的顺序结构。
2、程序调试(编辑错误与逻辑错误)的方法。
教学过程
问题与任务导入：
图像处理软件中有种功能，点击放大或缩小图标时，图片会随之放大或缩小(如“图11-1图片的放大与缩小运行效果图”所示)。小明是个爱动脑筋的孩子，他想起老师的话:“应用软件背后的秘密是计算机程序设计。”于是，他想用自己学过的VB语言实现以下功能。
(1)鼠标单击“放大(+)”按键即实现图片的等比例放大。
(2)鼠标单击“缩小（－）”按键实现图片等比例缩小。
一、分析问题
1.分析选用对象及设置对象属性
在VB程序设计中，一是要根据问题需求明确应选用什么对象，以便用户应用程序解决问题;二是要思考每个对象承担的任务是什么;三是确定对象的属性应该如何设置，以便用户阅读程序;四是要选定响应动作的方式是什么。
？想一想
表11-1列出了本程序中部分对象及属性要求，试结合问题描述思考:还需要什么对象?对象承担什么任务?对象的属性如何设置?并填写表11-2。
表11-1程序“图片的放大与缩小”中部分对象名称及属性设置一览表(样表)
表11-2程序“图片的放大与缩小”中部分对象名称及属性设置一览表(学生完成)
练一练
在VB中新建一个工程文件，并根据表11及表1-2中控件及属性的设置，完成程序界面设计任务。
2.分析图片放大与缩小的原理
？想一想
在VB中，图片框
Image的属性里有两个属性分别为
Height、Width。请结合“图11-2图片的属性面板参数显示”、“图11-3图片的放大与缩小界面图”对其中的数据参数进行观察。
(1)你发现了什么?
(2)属性面板下端提示符与蓝色选定项的关系如何?
讨论
观察图11-4中的代码，说说图片放大与缩小的原理是什么。
图11-4图片的放大与缩小程序代码窗口图
二、设计图片放大与缩小的算法
1.算法
算法是算题的方法，可引申为解决问题的方法，是用语言来表达思想的方法。在计算机程序设计中，“算法”一词特指用计算机求解某一问题的方法步骤。通常算法的描述方式有自然语言、流程图与伪代码表示法等。
2.设计实现图片放大与缩小算法的流程图
(1)图片放大的算法流程图(“图11-5图片放大的算法流程图”)。
试一试
请根据图片缩小的原理，完成“图11-6图片缩小的算法流程图”缩小的算法流程图。
资料室
流程图中图形符号的含义
在计算机程序设计中，为了更加简洁直观地表达算法，人们习惯使用流程图。在流程图中使用的图形符号有固定的含义，圆角矩形表示“开始与结束”(如图11-5中的第个、第4个框);矩形框表示“处理”(如图11-6中的第2个、第3个框)，除此之外，还有棱形框表示“判断”;平行四边形表示“输入与输出”。
(2)顺序结构。
从图11-5、图11-6中所表达的图片放大与缩小的算法流程图可见，执行第一条语句后，必然依次执行第二条、第三条…其规律是依次执行所有语句，直至结束语句，像这样的控制结构称为程序的顺序结构。
讨论
请总结这种结构的特征是什么。
三、赋值语句
1.赋值语句的功能
？想一想
“=”的作用是什么?
ImageZs.
Width=
ImageZs.
Width
1.1
ImageZs.
Height=lmageZs.
Height
1.1
语句“
ImageZs.
Width=
ImageZs.
Width
1.1”的含义是:将名称为
“ImageZs”的图片框的宽度属性值(
Width)乘1.1倍后再赋值给
ImageZs.width，以达到图片宽度不断增加的目的，这就是赋值语句的功能。
讨论
说一说实现图片高度增大1.1倍的赋值语句的含义，如若高度(
Height)与宽度(
Width)放大的比例系数不相同，会造成什么结果?
2.赋值语句的格式
赋值语句的格式:变量=表达式。
练一练
请在下框中写出表达
ImageZs.
Height与
ImageZs.Widh等比例缩小三分之一的赋值语句。
四、设计程序代码
明确算法即意味着找到解决问题的方法。学会了用赋值语句表达让图片宽度与高度等比例增加，也就意味着学会了用计算机程序语言表达处理这个问题的想法。接下来，我们在VB中将赋值语句逐句输入给指定对象就可以了。
具体操作步骤如下。
(1)打开素材文件夹中的文件“图片放大与缩小.vbp”。
(2)在工程管理器窗口中选中
FormFdsx(图片放大与缩小.frm)→点击“查看代码”按钮进入代码编辑窗口，如图11-7所示。
图11-7工程管理器窗ロ
(3)在代码窗口中，依据图11-8所示操作。
图11-8“图片放大与缩小”代码窗口
五、调试“图片放大与缩小”程序
计算机编写程序的一个重要环节是调试。事实上，当我们在代码窗口输入程序代码时，计算机就会自动进行语法检查。图11-9所示的就是计算机发现我们输入的表达式不完整的提醒方式，即输入的关键字呈现红色，并弹出如图11-10所示的提示框提示编译不成功，点击“确定”按钮后可继续输入代码。
图11-9表达式输入不完整
图11-10弹出的提示框
若输入的关键词出错，当我们点击按钮时，会弹出如图11-11所示的对话框，点击“调试”按钮后，代码框中出错的一行即呈现黄色提示，如图11-12所示。此时需要仔细检查错误的地方，修改正确后，才可正常运行。
图11-11调试常见情况
图11-12代码框黄色表示出错行
无论是专业的程序员，还是程序设计的初学者，都会遇到这样或那样的出错情况，因此，在程序调试环节须认真仔细地总结改正错误的方法，掌握一些调试的方法，积累一些经验去解决问题。
思考与练习
“图11-13用变量实现数据交换的程序界面效果图与代码窗口”所示的是用变量实现数据交换的程序界面效果图与代码窗口图，(1)请思考什么是变量。(2)请思考实现数据交换的原理是什么。(3)参考样例完成程序的设计。
资料室
注释语句的功能
在计算机程序设计中有一条语句十分特殊，计算机读到它后，不执行任何操作，其功能是用来帮助程序设计人员读懂每条语句的含义，它就是注释语句。
在程序中注释语句是用单引号引领的一段文字说明，如图11-13(c)中绿色字体所显示的内容。
课堂小结
这节课，我们知道了赋值语句的含义，程序的顺序结构，设计图片放大与缩小的算法（变量的意义）和设计程序代码以及程序调试(编辑错误与逻辑错误)的方法。
板书设计
分析问题
设计图片放大与缩小的算法
顺序结构一图片的放大与缩小
赋值语句
设计程序代码
调试“图片放大与缩小”程序
课后反思(共40张PPT)
第十一课
顺序结构一图片的放大与缩小
图像处理软件中有种功能，点击放大或缩小图标时，图片会随之放大或缩小(如图11-1所示)。小明想用自己学过的VB语言实现以下功能。
(1)鼠标单击“放大(+)”按键即实现图片的等比例放大。
(2)鼠标单击“缩小（－）”按键实现图片等比例缩小。
图11-1图片的放大与缩小运行效果图
一、分析问题
1.分析选用对象及设置对象属性
在VB程序设计中
一是要根据问题需求明确应选用什么对象，以便用户应用程序解决问题;
二是要思考每个对象承担的任务是什么;
三是确定对象的属性应该如何设置，以便用户阅读程序;
四是要选定响应动作的方式是什么。
？想一想
表11-1列出了本程序中部分对象及属性要求，试结合问题描述思考:还需要什么对象?对象承担什么任务?对象的属性如何设置?并填写表11-2。
练一练
在VB中新建一个工程文件，并根据表11及表1-2中控件及属性的设置，完成程序界面设计任务。
2.分析图片放大与缩小的原理
？想一想
在VB中，图片框
Image的属性里有两个属性分别为
Height、Width。请结合图11-2、图11-3对其中的数据参数进行观察。
(1)你发现了什么?
(2)属性面板下端提示符与蓝色选定项的关系如何?
讨论
观察图11-4中的代码，说说图片放大与缩小的原理是什么。
图11-4图片的放大与缩小程序代码窗口图
二、设计图片放大与缩小的算法
1.算法
算法是算题的方法，可引申为解决问题的方法，是用语言来表达思想的方法。在计算机程序设计中，“算法”一词特指用计算机求解某一问题的方法步骤。通常算法的描述方式有自然语言、流程图与伪代码表示法等。
2.设计实现图片放大与缩小算法的流程图
(1)图片放大的算法流程图(图11-5)。
试一试
请根据图片缩小的原理，完成图11-6图片缩小的算法流程图。
资料室
流程图中图形符号的含义
在计算机程序设计中，为了更加简洁直观地表达算法，人们习惯使用流程图。在流程图中使用的图形符号有固定的含义，圆角矩形表示“开始与结束”(如图11-5中的第个、第4个框);矩形框表示“处理”(如图11-6中的第2个、第3个框)，除此之外，还有棱形框表示“判断”;平行四边形表示“输入与输出”。
(2)顺序结构。
从图11-5、图11-6中所表达的图片放大与缩小的算法流程图可见，执行第一条语句后，必然依次执行第二条、第三条…其规律是依次执行所有语句，直至结束语句，像这样的控制结构称为程序的顺序结构。
讨论
请总结这种结构的特征是什么。
1.赋值语句的功能
？想一想
“=”的作用是什么?
ImageZs.
Width=
ImageZs.
Width
1.1
ImageZs.
Height=lmageZs.
Height
1.1
语句“
ImageZs.
Width=
ImageZs.
Width
1.1”的含义是:将名称为
“ImageZs”的图片框的宽度属性值(
Width)乘1.1倍后再赋值给
ImageZs.width，以达到图片宽度不断增加的目的，这就是赋值语句的功能。
讨论
说一说实现图片高度增大1.1倍的赋值语句的含义，如若高度(
Height)与宽度(
Width)放大的比例系数不相同，会造成什么结果?
2.赋值语句的格式
赋值语句的格式:变量=表达式。
练一练
请在下框中写出表达
ImageZs.
Height与
ImageZs.Widh等比例缩小三分之一的赋值语句。
四、设计程序代码
学会了用赋值语句表达让图片宽度与高度等比例增加，也就意味着学会了用计算机程序语言表达处理这个问题的想法。接下来，我们在VB中将赋值语句逐句输入给指定对象就可以了。
具体操作步骤如下。
(1)打开素材文件夹中的文件“图片放大与缩小.vbp”。
(2)在工程管理器窗口中选中
FormFdsx(图片放大与缩小.frm)→点击“查看代码”按钮进入代码编辑窗口，如图11-7所示。
图11-7工程管理器窗ロ
(3)在代码窗口中，依据图11-8所示操作。
图11-8“图片放大与缩小”代码窗口
五、调试“图片放大与缩小”程序
当我们在代码窗口输入程序代码时，计算机就会自动进行语法检查。图11-9所示的就是计算机发现我们输入的表达式不完整的提醒方式，即输入的关键字呈现红色，并弹出如图11-10所示的提示框提示编译不成功，点击“确定”按钮后可继续输入代码。
若输入的关键词出错，当我们点击按钮时，会弹出如图11-11所示的对话框，点击“调试”按钮后，代码框中出错的一行即呈现黄色提示，如图11-12所示。此时需要仔细检查错误的地方，修改正确后，才可正常运行。
图11-11调试常见情况
图11-12代码框黄色表示出错行
在程序调试环节须认真仔细地总结改正错误的方法，掌握一些调试的方法，积累一些经验去解决问题。
思考与练习
图11-13所示的是用变量实现数据交换的程序界面效果图与代码窗口图，(1)请思考什么是变量。(2)请思考实现数据交换的原理是什么。(3)参考样例完成程序的设计。
资料室
注释语句的功能
在计算机程序设计中有一条语句十分特殊，计算机读到它后，不执行任何操作，其功能是用来帮助程序设计人员读懂每条语句的含义，它就是注释语句。
在程序中注释语句是用单引号引领的一段文字说明，如图11-13(c)中绿色字体所显示的内容。
课堂小结
这节课，我们知道了赋值语句的含义，程序的顺序结构，设计图片放大与缩小的算法（变量的意义）和设计程序代码以及程序调试(编辑错误与逻辑错误)的方法。
板书设计
分析问题
设计图片放大与缩小的算法
赋值语句
设计程序代码
调试“图片放大与缩小”程序
顺序结构--图片
的放大与缩小
