GUIDesignStudio使用基础手册.doc

目 录
第一部分 GUI DESIGN STUDIO快速入门 3
第一章 环境介绍 3
1. 工程面板 3
2. 元素面板 4
3. 图标面板 5
4. 注释面板 6
5. 小说板面板 7
6. 备注面板 8
第二章 窗口设计 9
1. 创建工程 9
2. 创建对话框 10
3. 创建应用程序窗口 12
4. 创建文档窗口 14
5. 创建"Edit Task"对话框 16
6. 放置屏幕截图 17
第三章 窗口交互 19
1. 添加小说看板 19
2. 添加导航功效 20
3. 添加文件打开标准对话框 23
4. 添加菜单功效 26
第二部分 GUI DESIGN STUDIO功效介绍 28
第一章 使用图片 28
1. 导出设计文档 28
2. 使用图片 29
第二章 使用组件 30
1. 使用设计文档作为一般组件 30
2. 使用设计文档作为组件缩略图 31
3. 使用设计文档作为定制组件 32
第三章 使用模板 33
1. 基于模板创建工程 33
2. 向工程中插入模板 34
第四章 网页程序设计 35
1. 使用图片和文字占位符 35
2. 创建网页头部和尾部 36
3. 创建动态内容 36
4. 鼠标事件 37
5. "前进"和"后退"切换 39

第一部分 GUI Design Studio快速入门
第一章 环境介绍
1. 工程面板
使用工程面板能够访问工程全部设计文档和图片文件。在这里你能够快速做以下事情：
1) 创建新工程目录来组织文件。
2) 创建新设计文档。
3) 复制已经有设计文档。
4) 从剪贴板上粘贴图片生成图片文件。
5) 加入其它工程和文件夹链接，以访问它们全部设计文档和图片文件。尤其适适用于使用库工程公共组件或使用存在别处图片情况。
6) 当你选择了列表中工程或文件夹时候，其对应文件树将出现在下方。
7) 双击设计文件打开它，或拖拽它将其添加到打开设计文档中。
8) 使用鼠标右键拖拽添加组件缩略图。
9) 双击或拖拽图片文件将其添加到打开设计文档中。

2. 元素面板
元素面板提供全部能够用于创建应用程序GUI窗体和控件。元素被分成若干类别。当从列表中选择某一类别时候，该类别元素将出现在下面窗口中。每个元素全部是十分经典，而且为了方便使用，部分类别中包含了同一个元素不一样变形形式。在这里你能够快速做以下事情：
1) 双击或拖拽元素，能够将元素添加到打开设计文档中。
2) 在设计文档中，双击元素编辑它属性。

3. 图标面板
使用图标面板，能够访问公共、主工程中、和其它在经过工程面板链接添加工程或目录中图标。公共图标按类别存放着，能够创建新类别目录来存放新图标。
当从列表中选择某一类别时，该类别图标将出现在下面窗口中，能够经过大小、颜色深度来过滤这些图标。另外，还能够经过外部编辑器创建新图标或编辑已经存在图标。
图标分类列表
过滤条件（图标尺寸、颜色深度）
图标列表
新建图标

4. 注释面板

5. 小说板面板
小说板面板提供用于构建设计文档中控制步骤元素来实现一个模拟原型。小说板元素通常显示在其它设计元素上方。

6. 备注面板
备注面板提供统计关联设计文档和它上面元素笔记摘要，可用于提供弹出注释和生成具体说明规格文档。和其它面板不一样是，备注面板内容会伴随目前活动设计文档而改变。

第二章 窗口设计
1. 创建工程
1) 使用"File | New Project..."菜单命令，打开" New Project"对话框。

2) 选择一个适宜文件夹用于存放创建工程，如上图所表示"C:\My GUI Designs\"。假如想使用文件夹不存在，在"Location"框能够直接输入路径，该文件夹会被自动创建。
3) 在"Name"框输入"Tutorial"，将为工程自动创建一个"Tutorial"子文件夹。
4) 点击"OK"按钮创建工程后，工程将被自动打开。

2. 创建对话框
1) 能够经过"File | New" 菜单命令，或"Ctrl + N"快捷键创建新未命名设计文档，以后在保留时需要指定保留位置和名称。另外，还能够在"Project"面板点击"New Design"图标，将文件直接创建在工程文件夹下。在弹出对话框中输入"NewTaskDialog"。

2) 在"Elements"面板中选中"Windows and Dialogs"分类。在元素列表中选中"Dialog"元素，以双击或拖拽方法将元素添加到设计文档中。
3) 双击对话框元素打开其属性设置页，修改其标题为"Task Details"。

4) 确保"Layout | Snap to Edges"菜单命令处于选中状态。边缘捕捉许可GUI元素间能够正确对齐。
5) 常常需要在窗口中确保页边空白和按钮布局一致性，这不是必需但这么做能够增强专业感。在"Elements"面板" Design Grids"分类下，经过双击或拖拽方法将下左图所表示按钮添加到对话框中。然后拖拽该按钮使其捕捉到对话框四边，以下右图所表示。

6) 在"Elements"面板中" Buttons"分类下，添加"OK" and "Cancel"按钮。你会发觉按钮默认宽度和网格右列宽度是一致。
7) 在"Elements"面板中"Text"分类下，添加两个"Left Text"元素，将它们对齐到网格左列左边线，双击静态文本框将它们属性分别改为"&Summary"和"&Description"。"&"符号紧跟字符显示带有下划线表明它是键盘快捷键。
8) 点击"Summary"，按住"Ctrl"同时点击"Description"，此时"Summary"和"Description"被同时选中，此时你能够同时调整它们大小。
9) 在"Elements"面板中"Text"分类下，分别添加"Edit Box"和"Multiple Line Edit Box"元素。同时选中"Description"和"Multiple Line Edit Box"元素，使用"Layout | Align | Top"菜单命令或在工具栏点击按钮，使两个元素顶端对齐。
10) 最终，清空两个文本框"Text"属性后保留。做好对话框以下图所表示：

3. 创建应用程序窗口
1) 在项目工程文件夹下创建一个名为"ApplicationWindow"设计文档，在"Elements"面板"Windows and Dialogs"分类下，添加"Frame Window"元素，修改其标题属性为"Tutorial Application"。
2) 在"Elements"面板"Toolbars and Menus"分类下，添加"Menu Bar"元素，左右拉伸菜单栏使其捕捉到应用程序窗口左右两边。
3) 双击菜单栏打开其属性编辑器，选中"&View"项，在编辑框中输入"&Task"后点击"Insert"按钮，将"Task"菜单项插入到"View"项后面，点击"OK"保留修改。

4) 在菜单栏下面添加"Docked Toolbar"元素。默认情况下，工具栏上边框属性为"Groove"以确保它和菜单栏能够融合，下边框属性是"Raised"带有一个凹陷边缘。假如没有菜单栏而想创建一个工具栏，能够在工具栏属性页中将上边框属性设为"Flat"。

5) 在"Elements"面板"Toolbars and Menus"分类下，添加10个"Toolbar Button"元素和3个"Toolbar Spacer – Vertical"元素到工具栏，效果以下左图。切换到"Icons"面板"Toolbars"分类下，添加适宜图标按钮到工具栏按钮上，效果以下右图。

6) 在"Elements"面板"Toolbars and Menus"分类下，添加"Status Bar"元素，调整状态栏大小使其捕捉到应用程序窗口底部。切换到"Controllers"分类，在状态栏右下角添加"Small Window Resize Gripper"元素。重新切换到"Toolbars and Menus"分类下，添加3个"Status Indicator"元素至状态栏，分别修改其文本属性为"CAP"、"NUM"、"SCRL"，并置"NUM"为激活状态其它置为非激活状态。

7) 最终，保留修改，做好应用程序窗口以下图所表示：

4. 创建文档窗口
1) 在项目工程文件夹下创建一个名为"TaskListDocument"设计文档，在"Elements"面板"Windows and Dialogs"分类下，添加"Frame Window"元素，修改其标题属性为"Task List"。
2) 在"Elements"面板"Lists,Trees and Tables "分类下，添加一个"Check List Box"元素。选中CheckBox，使用键盘上"→"和"↓"键能够使CheckBox相对于左上角平移，按住"Shift"键同时使用键盘上"↑"或"←"能够缩放CheckBox。
3) 双击CheckBox打开其属性编辑器，切换到"Style"选项卡，勾选"Flat Style"选项将CheckBox边框设置为细边框。切换到"Data"选项卡，删除默认列表项，插入"Walk the dog"、"Breakfast"、"Fix the car"、"Lunch"、"Watch some TV"、"Dinner"、"More TV"、"Go to bed"项目，选中"Lunch"项勾选"Selected"复选框将其设置为默认状态下选中列表项。

4) 在" Annotations"面板下，添加"Boxed Annotation"元素将其置于文档窗口右侧。设置其"Title"属性为" More Info "，"Annotation"属性为" We probably want more info in columns with headers for sorting..."。
5) 在"Annotations"面板下，添加"Large Dot Target"元素到CheckBox上，单击工具栏上"Make Connection"命令进入构建连接模式：光标变成铅笔形状，任何能够被连接元素将被橙色矩形框包围。在Dot和Annotation间建立连接。

6) 最终，保留修改，完成效果以下图所表示：

5. 创建"Edit Task"对话框
1) 经过在工程树状图中双击打开"NewTaskDialog.gui"文件，使用"Ctrl + A"全选后"Ctrl + C"复制全部元素。创建新设计文档"EditTaskDialog"，使用"Ctrl + V"粘贴之前复制元素。（或，双击打开"NewTaskDialog.gui"文件，使用"File | Save As..."菜单命令将其保留为新设计文档"EditTaskDialog.gui"，该文档会自动创建到工程树状图中。）
2) 分别修改文本框Text属性为"Lunch"和"Phone the nearest pizza place and order something nice."
3) 最终，保留修改，完成效果以下图所表示：

6. 放置屏幕截图
1) 在项目工程文件夹下创建一个名为"Screenshot"设计文档。
2) 在"Project"面板下，经过拖拽方法将"ApplicationWindow.gui"设计文档添加到目前设计中。注意，"ApplicationWindow"只能作为一个组件整体被选中，其中各子元素全部被锁定，而且原来在工具栏各按钮上高亮矩形框全部不被显示。实际上，元素全部直接关联到设计文档而不是创建副本，这意味着设计文档修改后，重新打开或刷新（F5）引用它设计文档将会看到这些改变。
3) 以一样方法添加"TaskListDocumentgui"和"EditTaskDialog.gui"。将会发觉在"TaskListDocument"中创建"Annotation"元素和在"EditTaskDialog"中创建网格线均被隐藏。
4) 选中"EditTaskDialog"对话框，使用工具栏"Open Component"按钮能够直接打开组件所在设计文档。
5) 最终，保留修改，完成效果以下图所表示：

6) 使用"Simulator | Run Simulator"菜单命令（F9）或工具栏按钮，预览结果，以下图所表示。使用"Esc"键退出模拟状态返回设计模式。

第三章 窗口交互
1. 添加小说看板
1) 打开"Project"面板，创建一个新设计文档"Storyboard1"。在工程树状图中使用拖拽方法将"ApplicationWindow.gui"、"TaskListDocument.gui"、"EditTaskDialog.gui" 、"NewTaskDialog.gui"添加到目前设计文档中。
2) 使用命令栏"Make Connection"按钮，构建以下图所表示连接。假如需要创建多个连接，能够按住"Shift"键同时按下命令按钮。再次单击命令按钮或单击"Esc"键退出连接模式。注意：即使"ApplicationWindow"在选择时被作为一个最小单元，不过构建连接时仍然能够使用其中子元素。在应用程序窗口外围出现淡绿色框，意味着该窗口被选为起点或设计主元素。系统默认第一个就是主元素。能够使用F10或使用右键菜单"Set Representative Element"来指明主元素（此时淡绿色会变为深绿色）。主元素是模拟器显示起始元素，也是当该设计文档作为其它设计文档组件时候，展现起始元素。

3) 最终，保留修改，运行模拟器。

2. 添加导航功效
1) 双击打开"Storyboard1"设计文档，使用"File | Save As..."菜单命令将"Storyboard1"设计文档另存为"Storyboard2"，它会被自动创建到工程树中。
2) 双击工具栏"新建"按钮和"Task List"对话框之间连线打开连接属性设置页，修改"Navigation Type"属性由默认"Modal Popup"为"Show Window"，将"Task List"对话框设置为非模态。点击"OK"按钮应用修改，箭头形状发生改变。

连接类型具体说明参见下表：
连接类型
箭头形状
说明

1. Modal Popup

把目标对象作为模态窗口在其它全部窗口高一级打开，直到全部同级窗口全部关闭为止。

2. Modal Choice Popup

和"Modal Popup"类似。目标窗口打开后点击窗口区域以外窗口会自动关闭或取消）。当窗口关闭后，之前打开"Modal Choice Popup"窗口也会自动关闭。适适用于嵌套级联菜单和其它弹出式选择窗口。

3. Show Window

在同级显示目标窗口，而其它同级窗口仍可处于活动状态。（个人认为把目标窗口作为非模态窗口，类似于查找替换窗口）
4. Hide Window

隐藏指定目标窗口。

5. Toggle Window

依据目标窗口是否可见显示或隐藏窗口。目标窗口不可见则显示它，目标窗口可见则隐藏它。
6. Toggle Overlay

依据目标窗口是否可见显示或隐藏窗口。和"Toggle Window"类似，不一样点在于目标窗口不识别鼠标事件而鼠标事件传输给目标窗口压盖下层元素。适适用于响应鼠标经过事件同时，按钮、选项卡或其它元素仍然需要导航切换情况。

7. Replace Window

显示目标窗口，替换另一个窗口使其隐藏。
假如目标窗口连接到" Window Placeholder Anchor"（窗口占位符锚点），则连接到该占位符全部窗口将被替换，适适用于选项卡和面板等。
假如目标窗口连接到"Window Position Anchor"（窗口位置锚点）或没有连接锚点，将显示目标窗口而关闭源窗口，适适用于向导和序列化显示等。（？）

8. Replace Top Window

显示目标窗口，替换全部其它同级窗口使其隐藏。使用该连接类型和组件缩略图，网页程序能够在页面间进行导航切换，支持历史统计前进和后退切换。（？）
3) 默认情况下，窗口均在屏幕中心被打开。在"Storyboard"面板下添加"Window Position Anchor"元素，将其置于欲显示"Task List"对话框位置上，在锚点和"Task List"对话框之间建立连接。运行模拟器测试"Task List"对话框是否出现在预想位置。

4) 在"Storyboard"面板下，添加"Close"、"Close and Accept"、"Close and Cancel"按钮到设计文档，建立以下图所表示连接。"Close"按钮用来关闭连接父窗口；而"Close and Accept"、"Close and Cancel"按钮用来关闭和它关联全部同级窗口，二者并没有什么实际区分。注意，在本版本中，这一步不是必需，不过这么做能够使设计思想愈加明确。

5) 在"Storyboard"面板下，添加"Exit"按钮和"Tutorial Application"应用程序窗口建立连接，用来直接关闭模拟器。
6) 最终，保留修改，完成效果以下图所表示：

3. 添加文件打开标准对话框
1) 以"TaskListDocument.gui"文件为模板创建一个新副本文件方法有三：
l 打开"TaskListDocument.gui"文件，使用"File | Save As..."菜单命令将该设计文档重新保留为"EmptyDocument.gui"文件。
l 打开"TaskListDocument.gui"文件，使用"Project | Duplicate Design..."菜单命令。
l 打开"TaskListDocument.gui"文件，在"Project"面板下使用命令图标。
2) 双击打开列表框属性页删除全部列表项，保留修改，完成效果以下图所表示：

3) 以"Storyboard2.gui"为模板，创建副本文件"Storyboard3.gui"。打开"Storyboard3.gui"，添加"EmptyDocument.gui"。
4) 在"Project"面板上，使用"Add Project Link"命令按钮添加标准组件库工程链接。（链接地址为"C:\Documents and Settings\All Users\Documents\GUI Design Studio\Samples\Standard Components\Standard Components.gdp"）

5) 双击打开"Dialog_FileOpen_Standard.gui"，能够看到文件打开对话框有自己一系列导航用于关闭对话框和打开下拉菜单。不过，当把它拖拽到设计文档中时，它只能被看作是一个整体组件，它只是一个对话框而已！这一特征使得我们能够自由使用之前设计好设计文档作为模板。大多数情况下，使用文件打开对话框只是为了表明这里将出现一个文件打开窗口而已，若认为标准文件打开对话框不能满足应用需求，能够以"Dialog_FileOpen_Standard.gui"为模板创建一个新副本。为了预防不小心修改标准模板库里已经有模板，提议在Tutorial工程下创建"Dialog_FileOpen_Standard"副本。
6) 双击打开"Storyboard3.gui"，添加"Dialog_FileOpen_Standard"到设计文档，在工具栏文件打开按钮和文件打开对话框之间建立"Modal Popup"类型连接。
7) 在文件打开对话框中单击"Open"按钮后需要实施操作实际是关闭对话框并打开"TaskListDocument"窗口。首先，从"Storyboard"面板中添加"Close and Accept"按钮，在在"Open"按钮和"Close and Accept"按钮之间创建连接；然后，在"Open"按钮和"TaskListDocument"对话框之间创建连接。
l 新导航切换动作会覆盖该组件设计文档中原先切换动作。在本例中，"Dialog_FileOpen_Standard.gui"中"Open"按钮关联着"Close and Accept"按钮，假如在"Storyboard3"将文件打开对话框"Open"按钮关联到"TaskListDocument"对话框，那么实际运行时单击"Open"将切换到"TaskListDocument"对话框。
l 当一个按钮或其它元素上有多个导航切换行为时，切换动作根据它们创建时次序实施。（"Open"按钮为何不能先和"TaskListDocument"对话框再和"Close and Accept"按钮建立连接？若先显示文档窗口再关闭打开对话框，文档窗口和打开对话框处于同一等级，"Close and Accept"命令会使文档窗口立即关闭。）
8) 在"Storyboard"面板下添加"Window Position Anchor"元素，将锚点和"Task List"对话框之间建立连接，调整好"Task List"对话框显示位置。
9) 在"Storyboard"面板下添加"Navigation Overlay"元素（见下左图），使用拖拽方法将其置于以下右图所表示位置上。将其和"EditTaskDialog"对话框间建立连线，双击连线打开连接属性设置页，将"Event Trigger"属性从"Left Click"改为"Left Double Click"。运行模拟器，将鼠标移至条纹矩框范围内双击可打开"EditTaskDialog"对话框。

10) 最终，保留修改，完成效果以下图所表示：

4. 添加菜单功效
1) 以"Storyboard3 "为模板，创建副本"Storyboard4.gui"。
2) 在"Project"面板上打开"Standard Components" 下"Common_Meuns.gui"设计文档。按下"Ctrl"键同时，鼠标左键单击"File"、"Edit"、"View"、"Window"和"Help"菜单元素，使用"Ctrl + C"复制。双击打开"Storyboard4"设计文档，使用"Ctrl + V"粘贴菜单元素。

3) 在"Elements"面板"Toolbars and Menus"分类下，添加"Popup Menu"元素。双击打开属性设置对话框，在"Item"选项卡中，删除原先菜单项，添加"&New…"和"&Edit…"菜单项。

4) 在应用程序窗口菜单项和对应弹出菜单间建立连接。注意建立连接自动变成"Modal Choice Popup"类型，当用户在目标窗口（在本例中是菜单）区域外单击后将关闭目标窗口，一样适适用于级联菜单。
5) 从"Storyboard"面板中添加"Exit"按钮，和"File"菜单中"Exit"命令建立连接。
6) 在"File"菜单中"Open…"命令和文件打开对话框间建立连接
7) 在"Task"菜单中"New…"和"Edit…"命令分别和对应任务对话框间建立连接。
8) 最终，保留修改，完成效果以下图所表示：

第二部分 GUI Design Studio功效介绍
第一章 使用图片
1. 导出设计文档
使用"File | Export…"菜单命令，将打开设计文档导出成图片格式，支持图片格式有*.bmp、*.gif、*.jpg、*.png、*.emf。

2. 使用图片
其实，很多设计全部不是白手起家，通常情况全部是修改原有界面或基于原有界面做改善。那么，一个一个元素拖拉和摆放还原原先界面工作量是惊人。能够使用截图方法重用原有界面：
l 将截好图片放在工程目录下，使用"Design | Add Bitmap…"菜单命令将图片添加到设计文档中。
l 将截好图片放在工程目录下，在"Project"面板下使用"Refresh Files"按钮刷新，截好图片文件会自动添加到工程树状图中。
粘贴文件到图片
刷新
l 将图片复制到剪贴板，在"Project"面板下使用"Paste Image to File"按钮将剪贴板中图像保留到工程目录下，然后就能够添加到设计文档中使用。

注意：添加图片关联到图片文件而不是创建图片拷贝。

第二章 使用组件
1. 使用设计文档作为一般组件
在"Project"面板下，按下鼠标左键经过拖拽方法能够把选中设计文档作为组件添加到设计文档中。另外，还能够使用"Design | Add Component Design..."菜单命令添加。
添加组件只能作为一个整体被选中，其中各子元素全部被锁定，元素全部直接关联到设计文档而不是创建副本。所以，组件所在设计文档被修改后，在使用该组件设计文档中经过"Design | Refresh"菜单命令（F5）刷新后就能够看到修改产生改变。
l 覆盖连接
组件能够看作一个独立整体，组件中子元素仍然能够添加导航连接。假如组件某个子元素在其本身设计文档中已经存在连接，那在包含该组件设计文档中对该组件子元素建立导航连接将覆盖原先连接。
l 覆盖属性
能够覆盖组件子元素属性，甚至该子元素本身还包含子元素情况下也能够覆盖属性。属性覆盖能够延伸到任何深度。使用工具栏"Component Item Selection Mode"按钮选中组件子元素，该子元素周围会出现橙色矩框，双击（或"Alt + Enter"快捷键或"Edit | Porperties…"菜单命令）打开其属性设置页能够修改其属性。

还原被覆盖子元素属性，方法有二：
1) 使用工具栏"Component Item Selection Mode"按钮选中欲还原组件子元素，点击鼠标右键，选择右键菜单中"Restore Component Item"命令，还原组件子元素。
2) 以任意模式选中子元素或组件，点击鼠标右键，选择右键菜单中"Restore Component"命令，还原整个组件。

2. 使用设计文档作为组件缩略图
当仅需要和组件创建一个连接时，为了节省空间能够创建组件缩略图（"Thumbnail component"），常见于在网页程序中切换网页。在"Project"面板下，按下鼠标右键经过拖拽方法能够把选中设计文档作为组件缩略图添加到设计文档中。组件缩略图功效是有限制，在包含组件缩略图设计文档中，不能覆盖组件缩略图属性，也不能在组件缩略图间建立连接。

3. 使用设计文档作为定制组件
定制组件是一个包含一个或多个元素用于重用设计文档，它被放置于一个特殊文件夹下，能够像添加一般组件那样添加定制组件。
和一般组件不一样，添加定制组件到设计文档实际上是产生定制组件副本。所以，定制组件原始设计文档发生改变并不会影响到定制组件副本。
在"Project"面板下，选中任何一个文件夹，使用"Project | Set as Custom Elements Folder"菜单命令或单击鼠标右键在弹出右键菜单中使用"Set as Custom Elements Folder"命令，文件夹状态变为下图所表示状态。

l 设计文档在定制组件文件夹下
在"Project"面板下，按下鼠标左键经过拖拽方法能够把选中设计文档作为定制组件添加到设计文档中。
l 设计文档在一般组件文件夹下
在"Project"面板下，按住"Ctrl"键同时按下鼠标左键经过拖拽方法能够把选中设计文档作为定制组件添加到设计文档中。

第三章 使用模板
1. 基于模板创建工程
使用"File | New Project…"菜单命令打开新建工程对话框，在"Based on"下拉列表中能够选择基于某个模板创建新项目。若选择"Select template..."，能够浏览当地上安装全部模板。

2. 向工程中插入模板
能够向现有工程中插入模板，在工程树状列表中选汉字件夹，点击鼠标右键在弹出右键菜单中选择"Insert from Template..."。插入模板文件不会覆盖原先已经存在文件，假如出现同名情况，新插入模板文件将会使用替换名称。

第四章 网页程序设计
GUI Design Studio提供了"Replace Top Window"连接类型用于页面链接。另外，还新增浏览模式。页面顶部为带有"Back"按钮和"Forward"按钮浏览栏，页面默认出现在顶部而不是窗口中心区域。假如设计主元素是网页，则会自动进入浏览模式。当然，能够随时在浏览模式和非浏览模式自由切换。
1. 使用图片和文字占位符
很多网页程序包含大量文本和图片内容，不过通常情况下在设计程序时这些内容全部是不可用。所以，能够使用文本和图片占位符替换真实文本直到这些文本变得可用为止。
l 文本
在"Elements"面板"Web"分类下，使用"Greek Text"元素实现文本占位。通常，该元素含有大量拉丁文本，假如不需要这么多文本能够删除部分内容这么能够加速绘图。
l 图片
在"Elements"面板"Web"分类下，使用"Image Placeholder"元素实现图片占位。能够设置图片占位符文字、背景色、页边留白。

2. 创建网页头部和尾部
一个经典网站或网页程序常常会在每个页面上全部有公共元素，比如头部和尾部，它们常常会包含部分页面连接。在GUI DesignStudio中，能够创建共享组件并把它们添加到每个需要页面中。对于页面级导航切换，能够使用"Replace Top Window"连接类型，它会使用目标页面替换目前页面。为了节省空间能够使用目标组件缩略图。

上图所表示例子中，网页头部使用"Web Tab"元素用于页面切换，右上角为"Test List Link"元素。四个目标页面本身也包含公共顶部和尾部，这本会产生无限循环引用，但GUI Design Studio把它作为一个特例处理所以不会造成任何问题。在目标页面中能够覆写头部组件属性用来指示目前页面。
3. 创建动态内容
在网页上创建动态内容适适用于改变网页上一小部分内容而不是整个网页。怎样实现这一功效取决于改动类型和发生改变页面数量。
假如改动量较大，使用"Replace Top Window"类型连接能够快速替换整个页面。而对于小改动，为每个不一样状态创建"Web Pannel"元素，元素间使用"Show Window"、"Hide Window"、"Toggle Window"或"Replace Window"建立连接。不过，假如"Web Pannel"想要扩大，下层窗口布局不会随之发生改变。能够在设计时为扩大版本留下足够空间，不过这么做会使元素间产生间隙。比较提议做法是为每个面板扩大和缩小版创建不一样页面。假如网页布局不需要发生改变，能够轻松地经过切换面板方法来实现动态效果。

4. 鼠标事件
GUI Design Studio提供3种鼠标事件：
l 鼠标经过事件——鼠标经过活动区域时触发该事件
常见于"Toggle Window"类型连接，用于当鼠标在活动区域范围经过时使窗口或面板显示一段时间。以下图所表示，鼠标在"Person B"条纹矩框中移动时，将显示"Person B"具体信息窗口。

对于"Toggle Overlay"类型连接，目标窗口屏蔽了鼠标事件，鼠标事件传输给源窗口。以下图所表示，鼠标经过选项卡时，显示对应黄色选项卡。而鼠标事件仍然被发送给下层蓝色选项卡，所以下层蓝色选项卡和不一样页面间切换仍然有效。

l 鼠标进入事件——鼠标进入活动区域时触发该事件
打开"Product A Detail.gui"设计文档，双击打开"Thumbnail1"和"Product A Image 1"连接属性页，能够看到"Event Trigger"属性设为"Mouse Enter"，"Navigation"属性设为"Replace Window"。一样，"Thumbnail2"和"Product A Image 2"和"Thumbnail3"和"Product A Image 3"连接属性也是如此。这么，鼠标在进入"Thumbnail1"区域时将在产品详图区域显示"Product A Image 1"；进入"Thumbnail2"区域时显示"Product A Image 2"；进入"Thumbnail3"区域时显示"Product A Image 3"。

l 鼠标离开事件——鼠标离开活动区域时触发该事件

5. "前进"和"后退"切换
当用户在网页间切换时，浏览器维护网页切换历史统计，并提供"Back"和"Forward"命令使得用户能够向前或向后切换到访问过页面。GUI Design Studio在一定程度上支持这一特征。"Replace Top Window"连接类型统计浏览历史统计，而其它连接类型仅改变页面内容并不影响历史统计。
在浏览模式下，提供"Back"和"Forward"按钮能够在使用"Replace Top Window"连接类型页面间切换，其工作方法和实际浏览器相同，除了直接使用"Back"和"Forward"按钮外，还能够使用右键菜单和"Alt + →"和""Alt + ←"键盘快捷键。
另外，在"Storyboard"面板下还提供"Back"和"Forward"按钮，用于连接页面间前进和后退切换。