《人机界面设计》实验指导书.doc

人机界面设计实 验 指 导 书丰 艳青岛科技大学信息科学技术学院实验一 使用Visio 2003设计网页初稿一、实验目的及要求：（1）了解Visio工具软件的功能特色、安装、工作环境和基本操作等各方面的基本知识。（2）掌握应用Visio工具绘制软件开发图形的基本操作。（3）学习使用Visio工具绘制网页设计初稿。二、实验平台： 操作系统：Windows XP以上版本 实验环境：Microsoft Visio Professional 2003版三、实验内容：1、本实验中，我们以Microsoft Visio Professional 2003中文版为例，来学习Visio的工作界面和基本操作。具体包括：(1) 菜单(2) 工具栏(3) 定位工具：使用标尺、网格、定位导线和连接点、体会它们的定位功能。(4) 文件操作(5) 绘图页面操作2、制作第一个Visio图形：一个关于演示C程序运行步骤的流程图。3、Visio应用实践：尝试使用Visio绘制你的网页设计初稿。四、实验步骤：1、Visio的工作环境Visio的工作环境包括工作窗口、菜单、工具栏、定位工具以及帮助等内容。1) 工作窗口。对应所打开Visio文件的不同，工作窗口也会有所差异，但其基本样式类似。如图1是个新建的Visio数据流程图文件的工作窗口。 菜单：通过单击菜单命令的操作，可以实现Visio的各项功能。 工具栏：可以快速执行各项功能和操作，是菜单的快捷方式。 绘图页面：相当于一张图纸，可以在它上面生成并编辑图形。一个绘图文件可以产生好几个绘图页面，可以通过“页面标签”来切换。 网格：在绘图时对图形的位置进行校正，但打印时一般并不显示。 标尺：用于对图形进行更为精确的定位。 绘图窗口：相当于一个工作台，在上面放置绘图页面等其他组件。 形状 (也称图件) ：是Visio中最核心的部分。通过鼠标的拖拽而在绘图页面中产生对应的图形副本。将鼠标指针在图件上停留片刻，可以看到对该图件的注释，即对该图件功能和使用范围的说明。 模具：存放各种图件的仓库。2) 视窗的调整。主要依靠菜单中的“视图”、“窗口”命令和“视图”工具栏来实现。视窗调整中常见的操作包括： 缩放操作：利用该操作可以调整页面的显示比例，以便更有效地进行绘图操作，且该功能改变的只是页面在屏幕上的显示效果，对实际大小并无影响。提示：“视图”菜单中有几个命令比较特殊：“全屏显示”仅显示页面中的内容；“整页”使页面恰好显示为一页；“页宽”使页面在页宽方向上最大显示。 显示方式调整：当有多个文件同时打开时，可以用“并排”、“水平”和“层叠”三种排列方式来显示视窗。并排排列可在“窗口”菜单中单击“平铺”命令；水平排列可在按下Ctrl键的同时，在“窗口”菜单中单击“平铺”命令；层叠排列可在“窗口”菜单中单击“层叠”命令。图1 Visio的工作窗口3) 任务窗格。这项功能提供了一些常用的命令选项。Visio的任务窗格功能主要有开始工作、帮助、剪贴画、信息检索、搜索结果、新建绘图、模板帮助、共享工作区、文档更新和审阅等。在“视图”菜单中单击“任务窗格”命令，可以调出任务窗格并显示在屏幕右侧。图2 Visio的四个小视窗4) 小视窗。Visio有四个小视窗，堪称其“显微镜”，它们分别是；扫视和缩放窗口、自定义属性窗口、大小和位置窗口和绘图资源管理器窗口。可以通过“视图”菜单中的相应命令来打开它们，还可以使小视窗始终处于绘图窗口的最上层。利用这四个小视窗，可以更加方便快捷地观看并修改图形的各种信息。打开这四个小视窗后的效果如上图2所示。四个小视窗的功能分别为： 扫视和缩放窗口：该视窗将显示出完整的绘图页面略图。移动或改变红色矩形框的位置和大小可以局部放大绘图页面中对应位置的图形，并实现改变结果的同步显示。 自定义属性窗口：在绘图页面选中图形，则在该窗口中可以看到所选图形的自定义属性，可以在此对自定义的属性值进行修改。 大小和位置窗口：利用该视窗可以显示和修改所选择图形的位置坐标和尺寸。 绘图资源管理器窗口：该视窗列出了当前打开绘图文件中的所有资源数据，例如页面、图形、图层、背景页、图件等等。5) 定位工具作为一种绘图软件，提供必要的工具以进行精确定位是非常重要的。Visio提供了多种定位工具，主要有标尺、网格、参考线和连接点等四种。可以在“视图”菜单下找到这些工具。 标尺：分为垂直标尺和水平标尺两种，分别位于绘图窗口的左侧和上方。标尺的单位可以根据需要，在“文件”菜单中单击“页面设置”命令，在对话框“页属性”选项卡的“度量单位”中进行修改。默认情况下，水平标尺和垂直标尺的坐标零点都位于绘图页面的左下角，而绘图窗口左上角处水平标尺和垂直标尺相交的位置称为“辅助点”，在按下Ctrl键的同时，用鼠标拖动“辅助点”，可以改变标尺坐标零点的位置；而用鼠标双击“辅助点”，可以将坐标原点恢复成默认值 (及绘图页面的左下角处) ，如图3所示。图3 标尺的坐标原点和辅助点 网格：在绘制图形时网格是必不可少的，它的作用是用来对齐对象，使图形的整体效果整齐美观。网格只是起到辅助绘图的作用，在实际打印时一般并不出现。网格的格式设置如网格线的粗细、间距等，可以通过在“工具”菜单中单击“标尺和网格”命令来进行。 参考线 (定位导线) ：这同样也用于帮助对齐各种图形。与网格不同的是，参考线可以在绘图窗口中随意产生和移动，而且在移动参考线时，所有和它对齐的图形也将随之移动。将鼠标指针置于水平或垂直标尺上，当形状变为双箭头时，按鼠标左键并拖动，参考线就会自动产生并随鼠标移动。参考线平常为蓝色虚线，而在被选中时变为绿色粗实线。若是在“辅助点”处开始进行拖动操作的话，最终将会产生一个小型的十字参考线辅助点。选中参考线，再单击Delete键即可将其删除。 连接点：这是Visio的最大特色之一。Visio的图形一般都有若干连接点，利用这些连接点，不但可以准确定位，而且通过连接点的“粘和”操作，还能将多个图形连为一体，相当方便快捷。在“视图”菜单中单击“连接点”命令，可以显示图形上的连接点，所有的连接点都标记为蓝色叉号。在Visio中，连接点可以根据实际需要随意增加、移动和删除。6) 绘图页面操作Visio为绘图页面提供了强大的编辑功能，利用它们可以完成绘图页面的打印格式页面设置、绘图页的增加和删除以及背景页的生成等各种操作。 页面属性设定。在绘图文件的打开状态下，可以对绘图页面的属性进行设定。在“文件”菜单中单击“页面设置”命令，将弹出“页面设置”对话框，可在其中进行“打印设置”、“页面尺寸”、“绘图缩放比例”、“页属性”和“布局和排列”等选项操作。 增加新绘图页。当建立一个新的绘图文件时，Visio已经自动生成了一个新的绘图页，将其命名为“页-1”并显示在“页面标签”中。每个绘图文件都可以包含多个绘图页，在每个绘图页中都可以绘制各自的图形。为增加新的绘图页，可在绘图窗口下方的“页面标签”上单击鼠标右键，在快捷菜单中单击“插入页”命令，此时，将弹出“页面设置”对话框，可在其中填入新绘图页的各项属性，如类型、名称等，然后单击“确定”按钮即可。当然，也可以使用系统默认值而直接单击“确定”按钮。 删除绘图页。在“编辑”菜单中单击“删除页”命令，或者使用右键快捷菜单，可选择删除某个绘图页。 重命名绘图页。在要重命名的绘图页的“页面标签”上单击鼠标右键，在弹出的右键菜单中单击“重命名页”命令，则对绘图页名称进行修改。 背景页操作。在绘图文件中加入背景页，可以使图形显得更加美观和专业。生成背景页有多种方法，最简单的方法是利用Visio提供的“背景”模具。当我们打开Visio程序时，就是使用某个模具来建立新文件，则“背景”模具一般是自动打开的；如果“背景”模具没有自动打开，则可以在“文件”菜单中单击“形状”>“其他Visio方案”>“背景”命令，或者单击“常用”工具栏上的“形状”按钮进行选择。如图4所示。 图4 “背景”模具 图5 绘制“基本流程图”的图件用鼠标选中“背景”模具中任意一个图件，并拖放到绘图页面上，此时将弹出一对话框询问是否要为所选择的绘图页增加一个背景页，单击“是”按钮，系统自动生成一个背景页，内容便是刚才选取并拖动的图形。用户也可以用自己绘制的页面作为背景。方法如下：步骤1：新建一个页面，其“页属性”中类型设为“前景”，背景设为“无”。步骤2：在该新建页上绘制自己的图形或写上文字。步骤3：编辑完毕后，在“文件”菜单中单击“页面设置”命令，在弹出对话框的“页属性”选项卡下将类型设置为“背景”。单击“确定”按钮，则该页被设置为背景页。步骤4：此时再切换到“页-1”页面，在“文件”菜单中单击“页面设置”命令，打开“页面设置”对话框，在“页属性”选项卡的背景选项列表中，可以看到在前面设置的几个背景选项。从中选择一个作为“页-1”的背景页面。类似地，可以进行删除背景页的操作。但需要注意的是，在删除背景页之前，需要先将其从所有以它为背景的绘图页面中移除，否则会出现警告对话框，且不能完成背景页的删除操作。 页眉与页脚的设定。与Office系列的其他软件一样，Visio的页眉和页脚也是给绘图页面编上页码，加入作者、日期和文件名称等各种附加信息，使得打印出来的图形更美观、更专业和方便读者阅读。页眉与页脚的设置方法是；在“视图”菜单中单击“页眉和页脚”命令，在弹出的“页眉和页脚”对话框的对应栏中填入内容即可。 其他设定。Visio还允许对它的其他一些功能进行设定。这些功能设定主要集中在“选项”对话框中。在“工具”菜单中单击“选项”命令，可在对话框的不同选项卡中对不同类型的功能进行相应的设定。2、制作第一个Visio图形在对Visio有了初步了解的基础上，接下来，我们来制作第一个Visio图形。将要制作的图形是一个关于演示C程序运行步骤的流程图。步骤1：启动Visio，进入“新建和打开文件”窗口。步骤2：在“选择绘图类型”栏的“类别”中单击选择“流程图”-“基本流程图”模板，Visio自动启动相关模板，并生成新的空白绘图页。可以看到，窗口左侧是绘图模具，里面放置了大量绘图所需的图件，见图5。将鼠标指向图件图标时，将自动显示该图件的用途。步骤3：在模具中选中一个图件，将其拖放到绘图页面上的合适位置。步骤4：重复上述拖动步骤，将进程、判定、顺序数据和终结符等图件拖入页面中，并将其摆放在合适的位置，排列好。步骤5：单击“常用”工具栏上的“连接线工具”按钮 (注意观察鼠标指针形状的变化) ，将鼠标移动到第一个要连接图形的连接点附近，当连上图形时，在连接点处会出现红色方框，表示连接线和连接点已经连上了。步骤6：按下鼠标，移动到下一个图形的连接点上，待出现红色边框时松开鼠标，此时完成了两图形间的连接。步骤7：重复上述步骤，完成其他图形之间的连接。步骤8：所有图形连接完毕后，单击“常用”工具栏上的“指向工具”按钮，退出连接状态，恢复到鼠标选取状态。步骤9：接着进行线型设定。用鼠标单击要改变线型的连接线将其选中 (若要同时选择多条连接线需在按下Shift键的同时进行选取) ，然后单击“格式”工具栏上的“线型”按钮选择线型。步骤10：在第一个图形上双击鼠标，进入文字编辑模式，输入文字“开始”。如果对文字的字体和大小不满意，可以先将文字选中，然后在“格式”工具栏的“字体”和“字号”选项中进行设置。步骤11：重复上述步骤，在图形中输入其他文字。连接线上的文字也可以通过双击连接线进入文字编辑模式来输入。至此，流程图便基本制作完成，为了显得更加美观和专业，还可以给它加上背景页以及页眉和页脚等。步骤12：最后，记得执行存盘操作，保存文件。3、Visio应用实践：尝试使用Visio绘制你的网页设计初稿制作一份Visio绘图文件，需要经过以下六个主要步骤：1) 选择合适的模板建立绘图文件。2) 从模具中向绘图页拖入图件形成图形。3) 用连接线工具将相互间有关系的图形连接起来。4) 为图形和连接线加上适当的文字说明。5) 对绘图文件进行美化处理。6) 保存绘图文件。五、总结本次实验并完成实验报告