《软件产品设计》课件 第6-9章 元件的交互与动态面板-团队合作、发布与输出

第六章

元件的交互与动态面板CONTENTS目录01

6.1元件的交互02

6.2设置面板状态03

6.3交互样式设置04

6.4动态面板6.1元件的交互01交互事件的类型

交互事件类型元件事件由用户操作触发，如点击、悬停；页面事件涉及整体状态，如加载、滚动、尺寸改变。具体交互事件示例

Axure交互事件示例点击事件：点击元素触发，用于按钮点击、链接跳转；鼠标悬停事件：悬停元素触发，用于显示信息、下拉菜单；输入事件：输入内容触发，用于用户输入、表单验证。

页面与窗口相关事件页面加载事件：页面加载完成后触发，用于初始状态、数据加载。滚动事件：页面滚动时触发，用于滚动动画、悬浮效果。窗口尺寸改变事件：窗口大小改变时触发，用于响应式设计，调整布局和元素大小。交互事件的设置与管理

交互事件设置通过Axure“交互”面板，选元素，定义动作，预设交互，用户操作触发。

设计流程选择目标元素，进入“动作”选项卡，设定交互事件，实现动态响应。交互事件的作用与意义交互事件作用提升原型真实感，模拟用户交互，增强可用性，助团队理解评估设计。设计丰富性创造生动直观交互，展示理念功能，提升演示效果。交互事件的作用与意义：6.1.1交互事件—页面交互

查看与新建交互事件在“交互”面板可查看默认交互事件，单击“新建交互”按钮，下拉菜单可看到更多交互事件。交互事件的作用与意义：6.1.1交互事件—页面交互交互事件设置步骤

交互事件作用通过选中元件，设置“载入时”事件，执行预设动作，实现页面动态交互，如图6-2展示流程。交互编辑功能“交互编辑”对话框含“添加事件”、“添加动作”、“配置动作”和“组织动作”四模块，全面控制交互细节，确保效果精准。交互事件的作用与意义：6.1.1交互事件—页面交互

完成动画交互效果选择动画效果，在“时间”文本框设置动画持续长度，单击“确定”按钮，完成滚动到元件的交互效果。交互事件的作用与意义

元件交互事件选中元件，在“交互”面板单击“新建交互”按钮并点选动作；在弹出的“事件”下拉菜单添加交互事件；单击“打开连接”选项，在对话框输入或选择链接的页面、URL或文件路径。6.2设置面板状态026.2设置面板状态

设置面板状态通过"交互"面板的"单击时"选项，选择"动态面板"，实现面板状态切换，参见图6-4。

元件使用主要运用"动态面板"元件，从"元件库"拖至页面，双击设定交互，确保状态转换流畅。设置文本

设置文本拖入"矩形1"元件，鼠标移入时，设置文本为"此处显示正文内容"。设置图片

设置图片通过元件交互，鼠标移入时更换图片，多状态分别指定不同图片，实现动态展示效果。

图片调整拖入图片元件，调整大小位置，利用交互面板预设动作，增强用户视觉体验。设置选中

设置选中状态三种状态:选中、取消、切换，配合事件使用，设置元件状态。

设置列表选中项单击列表元件，指定选项选中，实现交互功能。启用/禁用启用/禁用用户可手动设置元件启用或禁用，亦可条件触发，配合动作使用，灵活控制元件状态。移动

移动动作应用使用"移动"动作,元件可按设定路径移动;选择目标,设参数,动画效果提升交互感,边界限制确保稳定。

创建页面效果结合"矩形2"与"主要按钮",双击"属性"下"鼠标单击时",添加移动动作,经设置达预期视觉。旋转旋转效果配置动作设置角度、方向、锚点，调整偏移，实现元件旋转，可动画化事件。设置尺寸

设置尺寸指定新尺寸，编辑宽高，选择锚点影响动画效果，选动画形式，设时间持续。

动画配置通过动画下拉列表选择形式，时间文本框设定持续时长，锚点决定中心点和效果。置于顶层/底层置于顶层/底层满足条件时，通过下拉菜单或交互编辑器，可将对象置顶或置底，实现元素层级调整。设置不透明度设置不透明度满足条件时，为元件设定不同不透明度效果，通过双击事件，于交互编辑器中选择设置，调整不透明度、动画与时长。获取焦点获取焦点在"交互"面板下,为"文本框"元件添加"获取焦点时"触发的"获取焦点"动作,勾选"文本框"和"选择文本"以自动选中文本。6.3交互样式设置036.3交互样式设置

交互样式设置用户拖放元件，选中后在“交互”面板点击“鼠标悬停”，弹出“设置交互样式”对话框进行配置。交互样式—填充

填充颜色选择用户通过“填充颜色”下拉列表选色，可更改元件色彩，支持单色、线性、径向填充。

渐变颜色调整滑块调节渐变色范围，单击添加新色，拖动调整角度，实现多角度填充，滑动“不透明度”改变透明效果。交互样式—阴影

阴影样式设置AxureRP9提供外部和内部两种阴影样式，点击“内部阴影”按钮弹出对话框，勾选“阴影”复选框可给元件增加投影效果。交互样式—阴影：边框选项设置

边框选项展开与基础设置单击“边框”三角形展开选项，可设置元件线宽、颜色、类型、位置和箭头样式，线宽用数值设置，有9种线段类型。交互样式—阴影：边框选项设置线段位置与箭头样式设置

边框选项设置通过"线段位置"可选择性显示元件四边边框，调整后元件外观变化显著。箭头样式添加创建线性元件或用"钢笔""链接"工具绘图，可通过"箭头样式"下拉列表为两端添加箭头。交互元件样式—圆角半径交互元件样式—圆角半径选择矩形、图片或按钮元件，设置圆角半径值，实现圆角效果，自定义边角类型，观察不同设置下的元件效果变化。交互元件样式—不透明度用户可以通过修改“不透明”的数值，获得不同透明度的元件效果交互元件字体样式

交互元件字体样式Axure支持自定义字体、字号、字型，可加粗、斜体、下画线，调整文本颜色及阴影效果，操作直观便捷。字体样式—行间距当使用文本段落时，可以通过设置行间距控制字体显示的效果，如图6-15所示字体样式—项目符号单击该选项后面的“项目符号”按钮，会为段落文本添加项目符号标志字体样式—对齐01字体样式可设置左、居中、右对齐，及顶、中、底垂直对齐。02文本段落调整对齐方式，增强版面布局灵活性，优化阅读体验。字体样式—边距

字体样式默认字体样式清晰易读，支持自定义选择，增强文档美观与专业度。

边距设置元件默认2px边距，可独立调整上下左右边距，优化布局灵活性。6.4动态面板04动态面板元件简介

动态面板元件AxureRP强大元件，实现多样动态效果，多种状态的超级元件，图6-16展示拖入页面过程。动态面板状态管理

动态面板操作双击元件，管理不同状态，添加、复制或删除。

面板功能指定名称，高效控制，图6-17展示操作界面。动态面板使用流程

动态面板的重要性动态面板是Axure重要元件，可完成大部分网页交互效果，创建需拖入元件、命名并添加修改面板。

面板状态的编辑单击“编辑全部状态”按钮，打开3个状态页和1个index页，编辑状态页后保存，返回index页添加交互，动态面板含若干页面。

交互效果的实现在“交互”面板添加交互实现丰富页面效果，保存文件后单击“预览”按钮进行原型预览。THEEND谢谢第七章

变量、表达式与函数的应用CONTENTS目录01

7.1使用变量02

7.2使用表达式03

7.3使用函数7.1使用变量017.1.1全局变量

设置变量值操作在“用例编辑”对话框中单击“设置变量值”动作选项，勾选“OnLoadVariableto”复选框，在下拉列表中选择设置全局变量值。

全局变量值类型9种全局变量值：值、变量值、变量值长度、元件文字、焦点元件文字、元件文字长度、被选项、选中状态、面板状态。

全局变量管理用户可通过“添加全局变量”创建变量，能重命名、调整顺序及删除选中变量。7.1.2局部变量

01局部变量创建编辑值/文本页插入，列表选择，"设置变量值"动作添加，"编辑文本"对话框下部。

02局部变量作用事务内赋值，函数运算变量，不在外部页面逻辑显现。7.1.2局部变量

设置条件用户可为动作设置条件以控制启动，方法是单击“启用情形”按钮，弹出“情形编辑”对话框添加条件。

条件逻辑设置全部：必须同时满足所有条件编辑器中的条件，用例才有可能发生。任何：只要满足所有条件编辑器中任何一个条件，用例就会发生。

条件判断值值为自定义变量值，可据变量值、变量值长度、元件文字、焦点元件文字、元件文字长度、被选项进行逻辑判断。7.1.2局部变量：设置条件-用来进行逻辑判断的值

面板与指针功能面板状态：判断动态面板状态以执行用例。指针：获取鼠标位置，实现拖曳功能，根据拖曳位置判断操作。元件与视图设置元件范围：为元件事件添加条件事件指定范围。自适应视图：根据元件所在面板判断。确定变量或元件名称：依据前面选择方式确定，可添加新变量。7.1.2局部变量：设置条件-用来进行逻辑判断的值逻辑判断与操作

逻辑判断运算符可选等于、大小、小于等，含“包含”、“不包含”判断，用于值间比较。选择被比较的值方式同“进行逻辑判断的值”，如对比两变量，需选定二者的名称。输入框使用若“被比较的值”为“值”，则需在此输入具体数值以作比较。逻辑描述框功能AxureRP自动生成描述，基于用户输入，辅助判断条件逻辑正确性。7.1.2局部变量：设置条件-用来进行逻辑判断的值

功能键与操作键：输入值时使用常规函数（获取日期、截断字符串、预设参数），使用少；键：新增条件；键：删除条件。7.2使用表达式027.2使用表达式

Axure表达式功能动态控制页面元素行为和效果，增强交互性。

表达式应用编写表达式调整元素状态，实现动态展示，提升设计灵活性。Axure表达式的定义与功能

Axure表达式定义计算、控制展示交互工具，动态调整页面元素，实现数据动态展示。Axure表达式功能支持元素大小、位置、状态动态控制，与动态数据交互，语法近似编程语言。Axure表达式的语法与元素变量与常量Axure有内置变量如Target、MouseX、MouseY，用户可自定义变量；常量值在程序执行中不可改变，可表固定值。运算符Axure表达式支持数学运算符和逻辑运算符，类型主要有算术、关系、赋值、逻辑运算符，用于数学运算和逻辑判断。表达式格式与函数表达式格式如a+b、a>b、a+b&&=c等。Axure内置丰富函数库，如Math函数库含数学运算函数，可处理复杂逻辑和数据。Axure表达式的应用

动态文本生成根据用户输入或系统状态，动态生成文本，如实时计算并显示购物车金额。

动态数据绑定页面元素与数据源绑定，实现实时数据更新与展示，提升用户体验。

复杂逻辑判断通过编写复杂表达式，实现深度逻辑判断与业务规则，增强应用灵活性。使用Axure表达式的注意事项

语法正确性注意变量、函数名及运算符使用，确保语法无误。

变量作用域了解变量作用域，保证在适当上下文使用。

性能优化考虑表达式对性能影响，避免复杂表达式和过多动态更新。示例

购物车总金额计算使用Axure表达式，定义price和quantity变量，页面元素文本设为[[price*quantity]]，自动更新总金额。

动态显示机制当商品单价或数量变化，Axure自动重新计算总金额并即时更新页面显示，无需刷新。7.3使用函数03使用函数

Axure函数简介Axure函数是AxureRP中编写表达式、控制元素行为及实现复杂交互的重要组成部分。

函数类型与用途涵盖数学、字符串、时间、元件等多种类型，各有特定用途和参数，可让原型制作更迅速、灵活、逼真。

函数添加步骤在“用例编辑”对话框添加“设置变量值”动作，勾选“OnLoadVariableto”复选框，单击“fx”按钮，再单击“插入变量或函数”选项即可查看。7.3.1常见函数：中继器/数据集

01中继器函数Repeater获取父中继器，visibleItemCount统计可见项，itemCount与dataCount分别计算过滤和总项数。

02中继器页面信息pageCount记录总页数，pageIndex显示当前页码，辅助分页操作优化。7.3.2元件函数函数名称及说明x：部件X坐标；y：部件X坐标；This：当前部件；width：部件宽度；height：部件高度；scrollX：动态面板X轴滚动距离(px)；scrollY：动态面板Y轴滚动距离(px)；text：部件文本值；name：部件名称；top：部件顶部Y坐标；left：部件左侧X坐标；right：部件右侧X坐标；bottom：部件底部Y坐标。7.3.2元件函数：使用元件函数步骤

插入并命名图片新建Axure文档，插入图片命名“大图”，复制调整大小。导入另一图片，分别命名“小图1”“小图2”。

创建边框元件使用矩形元件，创建一个如图所示的边框，并将其命名为“红框”。7.3.2元件函数：使用元件函数步骤小图1交互设置

使用元件函数步骤选择“小图1”，设置鼠标移入交互，选择“设置图片”动作，目标为“大图”，导入首图，添加“移动”动作至图片，使用X轴元件函数确保对齐，调整Y轴函数完成设置。

具体操作细节点击“新建交互”，在“设置图片”后，通过“选择”导入图片，利用“移动”动作和X轴函数使图片移动3单位，确保与边框对齐，最后设置Y轴函数，完成元件函数应用。7.3.2元件函数：使用元件函数步骤小图2交互设置按照相同的方法，为“小图2”在“交互”面板添加交互事件，如图7-10所示。7.3.3页面函数PageName函数获取当前页面名称，用于界面元素定位。部件X坐标函数获取部件的X坐标，辅助页面布局调整。7.3.4窗口函数

窗口尺寸Window.width和Window.height获取浏览器打开原型页面的当前宽度和高度。

滚动距离Window.scrollX和Window.scrollY分别记录页面水平和垂直滚动的距离。7.3.5鼠标指针函数

常用鼠标指针函数说明Cursor.x：鼠标X坐标；Cursor.y：鼠标Y坐标；DragX：本次拖动X距离；DragY：本次拖动Y距离；TotalDragX：总拖动X距离；TotalDragY：总拖动Y距离。7.3.5鼠标指针函数：基础元件创建与隐藏设置插入基础元素新建Axure文档，插入并调整“图片”元件命名为“原图片”，拖入“动态面板”命名为“放大图片”，编辑State1指定背景图片并设为隐藏。创建显示区域返回Page1页，拖入动态面板命名“大图显示区”，双击State1导入图片命名“放大图片”，返回后勾选“隐藏”按钮隐藏该元件。设置交互事件创建与图片大小一致的热区并命名，分别为“鼠标移入时”“鼠标移出时”事件添加“显示/隐藏”动作并设置参数。7.3.5鼠标指针函数

鼠标移动时边界与动作设置选择“鼠标移动时”事件，选“移动”动作，为mask动态面板添加左、右、上、下边界并设函数，再设“到达”及指针函数。

大图显示控制参数配置插入“移动”动作，勾选“放大图片”元件，选“到达”，设X、Y值控制大图显示，添加“显示/隐藏”事件隐藏相关元件。7.3.6数字函数(Number)

指数与定点计数法函数toExponential：转换为指数计数法；toFixed：转换为指定位数小数点字符串；toPrecision：格式化为指定长度。

基础算术运算符+：加，返回和；-：减，返回差；*：乘，返回乘积；/：除，返回商；%：余，返回余数。

数学计算与几何函数abs(x)返回x绝对值；acos(x)、asin(x)、atan(x)返回反余弦、反正弦、反正切值；atan2(y,x)返回X轴到(X,Y)角度；cos(x)、sin(x)、tan(x)返回余弦、正弦、正切值。

数值处理与运算函数ceil(x)上舍入，floor(x)下舍入，exp(x)e指数，log(x)自然对数，max(x,y)最大值，min(x,y)最小值，pow(x,y)X的Y次幂，random()0到1随机数，sqrt(x)平方根。7.3.7字符串函数基础长度与字符函数length返回字符串字符长度；charAt(index)返回指定位置字符，index从0开始；charCodeAt(index)返回指定位置字符Unicode编码，index从0开始；concat(‘string’)连接多个字符串。7.3.7字符串函数：查找与替换函数indexOf方法说明

indexOf('searchValue')：返回指定字符串在原字符串中首次出现的位置，值为0~字符串长度-1，searchValue为查找的指定字符串。lastIndexOf方法说明

lastIndexOf('searchValue')返回指定字符串在原字符串中最后一次出现的位置，范围0~字符串长度-1，searchValue为查找的指定字符串。replace方法说明

replace('searchvalue','newvalue')将字符串中被替换字符串替换为替换成的字符串，searchvalue是被替换字符串，newvalue是替换成的字符串。7.3.7字符串函数：截取与分割函数slice函数功能slice(str,end)提取字符串的片段，并返回被提取的部分split函数功能split('separator',limit)将字符串按规则分割成字符串组，元素以“,”分隔，separator为分隔字符串，limit为数组最大长度。substr函数功能substr(start,length)是字符串截取函数，从start位置提取length长度字符串，从第一个字符截取时start为0。substring函数功能substring(from,to)是字符串截取函数，截取从from位置到to位置的子字符串，从第一个字符截取时from等于0。7.3.7字符串函数

转换与修整函数toLowerCase()转换字符串全部字符为小写；toUpperCase()转换全部字符为大写；trim删除字符串首尾空格；toString()转换为字符串并返回。7.3.8日期函数：日期函数列表基础日期时间获取

日期函数列表Now获取系统当前日期时间，GenDate获原型生成日期，getDate()取1-31表每月日，getDay()取0-6表周几，getDayOfWeek()返回英文星期，getFullYear()取四位年份，getHours()取0-23小时，getMilliseconds()取毫秒，getMinutes()取0-59分，getMonth()取月份，getMonthName()返回月全名，getSeconds()取0-59秒，getTime()算1970至今毫秒，getTimezoneOffset()本地与GMT时差分钟。7.3.8日期函数：日期函数列表UTC时间相关方法

日期函数列表包括getUTCDate(),getUTCDay(),getUTCFullYear(),getUTCHours(),getUTCMilliseconds(),getUTCMinutes(),getUTCMonth(),getUTCSeconds(),覆盖日期的天、周、年、时、毫秒、分、月、秒的获取，均基于世界标准时间。7.3.8日期函数：日期函数列表日期时间转换处理

日期函数列表包括parse、toDateString、toISOString、toJSON、toLocaleDateString、toLocaleTimeString、toLocaleString、toTimeString、toUTCString、UTC、valueOf，用于处理日期格式化、转换及计算。

函数功能概述parse将日期字符串转为毫秒数；to*系列函数将日期对象转换为不同格式的字符串；UTC创建指定世界标准时间对象；valueOf返回日期对象原始值。7.3.8日期函数：日期函数列表日期时间增减操作

addYears(years)将Date对象增加指定年数，返回新Date对象。

addMonths(months)将Date对象增加指定月数，返回新Date对象。

addDays(days)将Date对象增加指定天数，返回新Date对象。7.3.8日期函数：日期函数列表

addHours(hours)将Date对象增加指定小时数，返回新Date对象。

addMinutes(minutes)将Date对象增加指定分钟数，返回新Date对象。

addSeconds(seconds)将Date对象增加指定秒数，返回新Date对象。

addMilliseconds(ms)将Date对象增加指定毫秒数，返回新Date对象。7.3.8日期函数：使用日期函数步骤

准备基础元件新建Axure文档，拖入“二级标题”元件修改文本，命名为日期和时间，转换为动态面板并命名为“动态时间”，复制State1状态。7.3.8日期函数：使用日期函数步骤设置交互事件

使用日期函数点击“交互”面板“载入时”事件，设“设置面板状态”动作为“下一项”，启用循环，间隔1000ms；于“状态改变时”事件设“设置文本”，插入日期函数，配置两“日期”选项，重复此步设定两“时间”选项。交互面板设置完成上述设置后，交互面板显示更新后的事件与动作配置，确保所有功能正确无误。7.3.8日期函数：使用日期函数步骤

预览页面效果单击“确定”按钮，页面效果如图所示。单击工具栏上的“预览”按钮，页面预览效果如图7-26所示。THEEND谢谢第八章

中继器的使用CONTENTS目录01

8.1中继器的组成02

8.2中继器的使用03

8.3数据集的操作04

8.4项目列表操作8.1中继器的组成01中继器的组成基本概念Axure中继器是创建重复数据集合或列表的功能强大组件，可模拟动态数据和展示重复内容。使用步骤使用时需先定义数据源和模板，再设置交互事件和条件，实现动态操作和响应。数据填充与面板中继器元件由数据集中文本、图片或页面链接等数据项填充，双击可进入中继器面板编辑设置。默认显示设置默认显示数量与“检视：中继器”面板数据行一致，默认元件为一列3行。数据集

01数据集位置位于“检视：中继器”面板底部，可添加行、列，管理内容。02数据集内容包含文本、图片、页面引用，右键菜单操作导入、引用。项目交互

项目交互功能用于数据集数据传递至原型元件显示或执行动作，支持载入、每项加载、尺寸调整触发，常用“每项加载时”显示数据集信息。

常用触发事件“每项加载时”事件，用于将数据集中的书籍等数据直接显示在模板元件上，实现数据动态展示效果。交互样式设置

交互样式设置调整中继器排版、布局、分页，支持垂直、水平布局，自定义每页项目数。

中继器布局默认垂直布局，可切换至水平，启用网格排布设定每排项目数。

分页显示设置勾选分页显示，设置每页项目数及起始页码，实现自定义分页效果。8.2中继器的使用02中继器的使用中继器的使用将中继器拖入页面，双击编辑，用图片和文本标签制作页面，命名元件，返回后在样式面板输入参数并导入图片。使用中继器属性对象编组与填充设置全部内容选中，组合对象（Ctrl+G）并命名“表格”，设置交互样式“选中”填充颜色为#3389FF。选项组与事件配置在“设置选项组名称”文本框中设置选项组名，双击“鼠标单击时”事件，选择“选中”动作，勾选中继器组并设置参数。中继器选项设置返回Page1页，点击“交互”面板下“（中继器名称）”右边图标，取消“隔离列表项之间的选项组”选项。页面预览操作单击工具栏上的“预览”按钮或者按下“.”键预览页面，预览效果。8.3数据集的操作03中继器基础操作

中继器操作添加、标记、取消标记、更新和删除行，管理数据集内容。

具体功能通过简单命令，灵活控制中继器数据集行的状态和操作。使用中继器实现自增步骤

拖入基础元件使用中继器实现自增新建Axure文档，拖入默认按钮并修改文字，拖入中继器修改宽度、删除数据集至1行，返回Page1命名中继器为“data”。

设置按钮交互选择按钮元件，在“交互”面板新建交互，选“单击时”事件，添加“添加行”动作，勾选“data”复选框，单击“添加行”按钮，在对话框中单击“fx”按钮，再添加局部变量并设置参数。

完成设置与预览单击“插入变量和函数”插入变量，多次单击“确定”按钮，单击“预览”按钮预览效果。8.4项目列表操作048.4.1使用中继器中继器设置页面载入时，设置每页显示4项，实现分页效果。预览效果单击“确定”，预览页面，确认分页功能正常。8.4.2使用中继器设置排序

按钮设置调整按钮大小、位置，设置文字，触发“鼠标单击时”事件，添加按价格升序排序动作。

预览效果确认设置后，返回index页面，通过预览按钮查看动态排序效果。8.4.3使用中继器添加分页

中继器分页功能通过“按钮”元件设置分页导航，首页按钮跳转至“商品展示”页，实现“上一页”、“下一页”、“尾页”的翻页功能。

页面跳转配置配置“单击时”事件，选择“设置当前显示页面”动作，针对不同按钮选择“Last”、“Previous”、“Next”实现分页。8.4.4使用中继器添加翻页

创建文本标签使用“文本标签”元件创建文本内容，创建名称为“page”的文本标签，再次创建名称为“all”的文本标签。设置中继器事件选择中继器元件，单击“载入时”事件，选“设置文本”动作，勾选“page”，设文本为“富文本”，单击“编辑文本”，在对话框底部选“添加局部变量”。插入变量与函数单击“插入变量或函数”，选“pageIndex”函数，设显示文本样式，确定。勾选“all”，同法添加文本。预览原型效果单击工具栏上的“预览”按钮，预览原型产品的效果如图8-31所示。THEEND谢谢第九章

团队合作、发布与输出CONTENTS目录01

9.1团队合作02

9.2TortoiseSVN客户端应用03

9.3使用团队项目04

9.4使用AxureShare05

9.5发布与输出06

综合练习9.1团队合作01软件下载与安装

VisualSVNServer简介VisualSVNServer是集成SVN服务端工具，含mmc管理工具，需先安装，提供32位和64位版本，下载地址及TortoiseSVN客户端和中文语言包可下载。软件下载与安装：VisualSVNServer安装启动安装程序下载完成后双击VisualSVNServer安装包，单击Next，勾选同意协议，再单击Next。选择版本与配置单击StandardEdition按钮，设置安装目录、版本库目录、端口，勾选安全连接，单击Next按钮。完成安装过程单击Install按钮开始安装，稍等后在弹出对话框中单击Finish按钮完成安装，如图9-3所示。软件下载与安装

TortoiseSVN安装设置双击安装包，按提示完成安装；安装中文语言包，右键设置Language为中文。版本库创建与项目导入：启动VisualSVNServer启动VisualSVN在开始菜单找到VisualSVNServerManager启动，右侧显示版本库信息，左侧REPOSITORES文件夹右键选“新建>repository”。创建版本库基本设置在“CreateNewRepository”对话框保持默认，点击“下一步”，指定版本库名称，再点击“下一步”，选择包含默认文件夹。完成版本库创建单击“下一步”，保持默认属性，单击“Create”，弹出对话框，单击“Finish”完成创建，默认建立trunk、branches和tags三个文件夹。版本库创建与项目导入：导入项目到版本库

项目导入版本库初始操作找到项目文件夹并选中，右键选“TortoiseSVN”及“导入”，弹出对话框后右键幻库复制URL，点CreateUser设名称密码。

完成项目导入版本库右键项目文件夹，选TortoiseSVN的导入，输入版本库URL和导入信息，确定后输入用户密码，完成项目导入版本库。用户权限设置与代码检出：创建用户与用户组

01创建用户返回“VisuaISVNserver”对话框，选“Users”右键“新建”→“User”，弹出“CreateNewUser”对话框创建用户，用相同方法继续创建6个用户。02创建用户组右键Groups选新建Group，填Groupname为Developers，添加三个xdesign，点Ok，同法创建其他组。用户权限设置与代码检出设置版本库权限在VisualSVNServer中选myRepository1，右键Properties，Security选项卡添加Developers、Managers、Testers组，设Developers和Managers为Read/Write，Testers为ReadOnly。客户端检出代码桌面空白处右键选“SVN检出”，填版本库URL、选检出目录，确定后开始检出，完成后工作副本文件夹文件有绿色对勾。9.2TortoiseSVN客户端应用02创建并提交Readme文件夹

创建Readme文件夹在绿色对勾文件夹中添加Readme，初始显示为问号，右键选"TortoiseSVN>增加"。

提交Readme文件夹选择Read