Axure RP Pro - 翻译 - 5.5 Tutorial教程 - AXURE 101 Article 5: Introduction介绍 - HTML Prototypes - HTML原型

Axure RP Pro - 翻译 - 5.5 Tutorial教程 - AXURE 101 Article 5:
Introduction介绍 - HTML Prototypes - HTML原型

Overview

概
述

1. Prototypes Demo

1. 原型演示

2. HTML Prototypes

2. HTML原型

3. Configuring and Generating a Prototype

3. 配置和生成原型

4. Using the Prototype

4. 使用原型

5. Distributing Prototypes

5. 分发原型

1. Prototypes Demo

1. 原型演示

Please
turn on speakers for audio

请打开扬声器听声音

To view on
Vimeo, please click
here
.

在Vimeo上观看高清视频，请单击
这里
.

2. HTML Prototypes

2. HTML原型

After designing the annotated wireframes and interactions in Axure RP,
you can generate an interactive, browser-based prototype. Axure RP
prototypes are HTML and javascript files that can be viewed in Internet
Explorer 6+, Mozilla, or Firefox.

在Axure
RP中设计带标注的线框和交互之后，可以生成一个可交互、基于浏览器的原型。Axure
RP原型由HTML和javascript文件组成，可以在Internet
Explorer(版本6以上），Mozilla或Firefox等浏览器中查看。

3. Configuring and Generating a Prototype

3. 配置和生成原型

To configure and generate the prototype, select Generate->Prototype
(F5) in the main menu or click the Prototype button in the main
toolbar. This will open the Configure HTML Prototype dialog with the
default prototype configuration. In this dialog, you can configure the
prototype.

要配置和生成原型，在主菜单中选择Generate“生成”菜单，然后选择Prototype“原型”菜单项（也可以按F5
快捷键），或者在主工具栏中单击Prototype“原型”按钮。将打开带有默认原型配置的Configure HTML
Prototype“配置HTML原型”对话框。在该对话框中，可以配置原型。

The options are divided into the following sections:

选项分成如下几部分：

General:
Enter the Destination Folder where the prototype will be generated. The
prototype will be made up of many files so it is best to specify a
folder just for the prototype.

通用:
输入生成原型的目标文件夹，原型将包括一定数量的文件，因此最好为原型指定专门的文件夹。

Notes:
Select and order the page level notes that will
be displayed in the prototype.

注释:
选择显示在原型中的页面级注释，并设定顺序。

Annotations:
Select and order the annotation fields to
display in the prototype.

标注:
选择显示在原型中的标注字段，并设定顺序。

Interactions:
Specify how the interactions will behave. i.e. Specify whether
descriptions of the Cases should always be shown or only when multiple
Cases exist.

交互:
指定交互的行为，例如：指定显示用例的描述是否始终显示或者仅在存在多个用例时显示。

Distribution:
Choose to generate a CHM file containing
the prototype.

分发:
选择创建一个包含原型的CHM文件。

Advanced:
Choose to render text panels as images. This
is a legacy feature and used only in rare cases.

高级:
选择把文本面板生成为图片. 这是一个遗留的特性，仅在极少数的情况下使用。

Once the prototype is configured, click the Generate button to produce
the prototype.

配置好原型后，单击Generate“生成”按钮即可生成原型。

4. Using the Prototype

4. 使用原型

The prototype is divided into three frames.

原型分成三个框架

Sitemap Frame (left)

站点地图框架（左）

Navigate to a page in the prototype by clicking on a page in the
sitemap.

在站点地图中单击页面可以在原型中导航到页面

Page Notes Frame (bottom)

页面注释
框架（底）

This frame contains the page notes.

这个框架包含页面注释。

Main Frame (center)

主框架（中）

The main frame contains the wireframes and diagrams. The interactions in
your wireframe will function as designed.
Any interaction defined in the Interactions pane in Axure RP will behave
as defined in the prototype.

主框架包含线框和图表。线框中交互的功能和设计时相同。任何在Axure
RP的Interactions“交互”面板中定义的交互和原型中定义的行为相同。

You can also view annotations on the widgets by clicking on the note
icons next to annotated widgets.

单击带标注的部件旁边的注释图标可以在部件上看到标注。

5. Distributing Prototypes

5. 分发原型

Axure RP prototypes are HTML, Javascript and image files that can be
viewed in popular browsers like Internet Explorer 6+ and Firefox.
Colleagues and clients will not need to install Axure RP or even a
reader to view the prototypes.

Axure
RP原型包括HTML，Javascript和图片文件可以在大多数浏览器中查看，例如Internet
Explorer（版本6以上）和Firefox。合作伙伴和客户不需要安装Axure RP，也不需要安装任何阅读工具即可查看原型。

There are several ways to distribute the prototypes.

有如下几种分发原型的方式：

Publish to a Shared Server or Web
Server

发布到一个共享服务器或Web服务器

The first option is to publish the generated prototype to a shared
server or a web server. This will allow anyone (with permissions to
access that server) to browse to the prototype location in their
browser (or click on a link you send them).

第一个选择是把生成的原型发布到一个共享服务器或一个
web服务器上。这允许任何人（有权限访问服务器）在他自己的浏览器上浏览原型保存的位置（或者单击你发给他们的链接）

With the appropriate access, you can generate the
prototypes directly to the shared server or web server. Alternatively,
you can generate the prototype locally first and move the prototype
folder to the server afterwards. If you are uploading to a web server,
you may need to use an FTP program like Flash FXP to transfer your
files. If you do not know if your organization has a server set up,
your IT folks may be able to help.

通过相应的访问，你可以直接生成原型到共享服务器或web服务器。也可以
先在本地生成原型然后将原型文件夹复制到服务器上。如果是上传到web服务器上，则需要使用一个类似于Flash
FXP的FTP应用程序传输文件。如果不知道你工作的组织是否已设置了服务器，请咨询IT部门寻求帮助。

Compressed Zip File

压缩Zip文件

The second option is to zip up the folder that contains the prototype
files and send the zip file to be unzipped and viewed locally.

第二个选择是
把包含原型文件的文件夹压缩成zip文件后发送zip文件，之后可以解压缩在本地查看。

To create a Zip file in Windows Explorer, go to the
folder where your prototype was generated. Right click on the folder
and select Send To >> Compressed (zipped) Folder.

要在资源管理器中创建Zip
文件，打开包含已生成原型所在的文件夹，右击文件夹后选择“发送到”子菜单，选择“压缩(zipped)文件夹”菜单项。



After the folder is zipped, you can distribute the zip file. The
recipient can then unzip the file and put the unzipped prototype folder
on their computer. They can do this by double clicking on the zip file
and selecting "Extract All Files" or dragging and dropping the
prototype folder in the zip file onto the desktop or into another
folder on the computer. Now, they can browse into the unzipped folder
to view the prototype locally (typically starting with the
[filename]_Start.html file.)

文件夹压缩后，可以分发zip文件。
接收人可以解压缩文件，然后将解压缩后的原型文件夹放在他们的电脑上。他们可以双击zip文件，然后选择“解压缩所有文件”或者拖放zip文件中的原型文
件夹到桌面或者电脑上的任何文件夹，这样他们就可以在本地浏览解压缩后的文件夹中的原型（通常从[filename]_Start.html文件开始）。

CHM File

CHM文件


The
third
option is to generate a CHM file containing the prototype. Like zip
files, this option also gives you the ability to distribute a single
file and typically does not require the recipient to install any
software to view it. It's a little easier on the recipient since they
don't need to unzip any folders. CHM is the format for Microsoft's HTML
Help file so most Windows computers will already have the viewer
installed and users can just double-click the file to view it.

第三个选择是
生成包含原型的CHM文件。和zip文件相似，这个选择可以让你仅分发一个单独的文件，而且通常不需要接收者安装任何软件就可以查看。对接收者也更容易，
他们不需要解压缩任何文件夹。CHM是微软的HTML帮助文件格式，因此大多数Windows计算机已安装有查看工具，用户只需要双击即可打开文件查看。


To set this up, click on the
"Distribute section" in the
Configure HTML Prototype dialog (F5) and check the option to generate
the CHM file.

要设置该功能，在Configure HTML
Prototype"配置HTML原型"对话框中单击Distribute section“分发部分”，然后选择generate the CHM
file“生成CHM文件”选项。

If you do not have the
HTML Help Workshop from Microsoft
installed already, you will need to install it to generate CHM files.
It is available as a free download here
.
Once installed, there will be a hhc.exe file in the folder where it was
installed. Click "Locate hhc.exe" to tell Axure RP the location of the
program on your computer.

如果还没有从微软安装HTML Help
Workshop，为生成CHM需要安装该工具，可以在 这
里
免费下载。安装后，安装文件夹中将有一个hhc.exe文件，单击Locate hhc.exe“定位hhc.exe”来告诉Axure
RP电脑上该应用程序的位置。

Once the prototype and
.chm file are generated, you will
find the .chm file in the same folder as the prototype. You can now
distribute the .chm file to be viewed in the HTML Help viewer

原型和.chm
文件生成后，在原型的同一个文件夹中将看到.chm文件，现在就可以分发.chm文件在HTML Help查看器中查看。



Once the prototype and .chm file are generated, you will find the .chm
file in the same folder as the prototype. You can now distribute the
.chm file to be viewed in the HTML Help viewer.

原型和.chm文件生成后，在原型的同一个文
件夹中将看到.chm文件，现在就可以分发.chm文件在HTML Help查看器中查看。

[Axure
RP Pro - 翻译 - 5.5 Tutorial教程 - AXURE 101: Introduction介绍 - Article 5:
HTML Prototypes - HTML原型]

http://www.axure.com/p101_5.aspx

[Axure RP Pro - 官方网站]

http://www.axure.com/

[Axure RP Pro - 关键词]

axure

[Axure RP Pro - 相关论坛]

http://axure.com/cs/forums/

[Axure RP Pro - Download下载]

当
前版本AXure RP Pro 5.5.0.1939, http://axure.cachefly.net/AxureRP-Pro-Setup.exe
当
前版本AXure RP Pro 5.5.0.1939, http://www.axure.com/files/AxureRP-Pro-Setup.exe
Microsoft
.Net Framework 2.0, http://www.microsoft.com/downloads/details.aspx?FamilyID=0856EACB-4362-4B0D-8EDD-AAB15C5E04F5
翻译, Manual
Installation手工安装包, http://www.axure.com/Files/AxureRPFiles.zip


Microsoft
Office
Compatibility Pack兼容包 Service Pack 1 (SP1), http://www.microsoft.com/downloads/details.aspx?FamilyID=9a1822c5-49c6-47bd-8bec-0d68693ca564
Axure RP Pro 5.1.0.1699, http://www.axure.com/files/5-1-0-1699/AxureRP-Pro-Setup.exe



Axure RP
Pro 5.0.0.1515, http://www.axure.com/files/5-0-0-1515/AxureRP-Pro-Setup.exe

[Axure RP Pro - Beta测试版]

下载Axure RP Pro
5.5 Beta, http://www.axure.com/downloadbeta.aspx

Introduction
to Version 5.5 Features: Part 1, http://axure.com/cs/blogs/axure/archive/2008/11/19/Introduction-to-Version-5.5-Features_3A00_-Part-1.aspx
Introduction
to Version 5.5 Features: Part 2, http://axure.com/cs/blogs/axure/archive/2008/11/13/Introduction-to-Version-5.5-Features_3A00_-Part-2.aspx
Introduction
to Version 5.5 Features: Part 3, http://axure.com/cs/blogs/axure/archive/2008/11/13/Introduction-to-Version-5.5-Features_3A00_-Part-3.aspx

[Axure RP Pro - Tutorial教程 - 翻译]

AXURE 101: Introduction介绍 - Article 1:
Introduction to Axure RP - Axure RP介绍, http://www.axure.com/p101_1.aspx
AXURE 101: Introduction介绍 - Article 2:
Annotated Wireframes, http://www.axure.com/p101_2.aspx
AXURE 101: Introduction介绍 - Article 3:
Basic Interactions基本交互, http://www.axure.com/p101_3.aspx
AXURE
101: Introduction介绍 - Article 4: Masters主控文档, http://www.axure.com/p101_4.aspx
AXURE 101: Introduction介绍 - Article 5:
HTML Prototypes - HTML原型, http://www.axure.com/p101_5.aspx
AXURE 101: Introduction介绍 - Article 6:
Functional mq s功能规格, http://www.axure.com/p101_6.aspx

AXURE 102: Flow Diagrams流程图 - Article
1: Flow Shapes & Connectors流程图形和连接符号, http://www.axure.com/p102_1.aspx

AXURE 102: Flow Diagrams流程图 - Article
2: Generating Flow Diagrams生成流程图, http://www.axure.com/p102_2.aspx


AXURE 201: Rich Interactions复杂交互 -
Article 1: Dynamic Panels动态面板, http://www.axure.com/p201_1.aspx
AXURE
201: Rich Interactions复杂交互 - Article 2: OnMouseEnter, OnMouseOut, and
Rollover Effects - OnMouseEnter, OnMouseOut和翻转效果, http://www.axure.com/p201_2.aspx


AXURE 201: Rich Interactions复杂交互 -
Article 3: Menus菜单, http://www.axure.com/p201_3.aspx
5.5 AXURE 202: Rich
Functionality复杂功能 - Article 1: Conditional Logic条件逻辑, http://www.axure.com/p202_1.aspx
AXURE 202: Rich Functionality复杂功能 -
Article 2: OnChange Event - OnChange事件, http://www.axure.com/p202_2.aspx



AXURE 202: Rich
Functionality复杂功能 - Article 3: OnKeyUp Event - OnKeyUp事件, http://www.axure.com/p202_3.aspx
AXURE
202: Rich Functionality复杂功能 - Article 4: OnFocus and OnLostFocus Events
- OnFocus和OnLostFocus事件, http://www.axure.com/p202_4.aspx
AXURE 202: Rich
Functionality复杂功能 - Article 5: Variables - 变量, http://www.axure.com/p202_5.aspx
AXURE 202: Rich Functionality复杂功能 -
Article 6: OnPageLoad Event - OnPageLoad事件, http://www.axure.com/p202_6.aspx
AXURE
301: Maximizing Reuse of Masters最大化重用主控 - Article 1: Affecting Widgets
in Masters在主控中影响部件, http://www.axure.com/p301_1.aspx
AXURE 301: Maximizing Reuse of
Masters最大化重用主控 - Article 2: Raised Events发起事件, http://www.axure.com/p301_2.aspx
AXURE 401: Collaboration协作 - Article
1: Shared Projects共享工程, http://www.axure.com/p401_1.aspx

[Axure RP Pro - Introduction介绍]

RP的含义

面板的组织方式

[Axure RP Pro - Action动作]

Parent Window父窗口

[Axure RP Pro - Event事件]

窗口间互操作

[Axure
RP Pro - Master主控文档]

拖放控件

Expand.Collapse伸缩控件

将主控文档添加到多个页面

[Axure RP Pro - Prototype原型]

关闭Internet Explorer打开原型时出现的安全警告

[Axure RP Pro - Specification规格文档]

规格文档中显示部件的属性

规
格文档中屏幕截图的脚标

[Axure RP Pro - Wireframe线框]

选择后面的部件

rollover
style翻转样式的常见误解

[Axure RP Pro - Widget部件]

水平线不能调整高度，垂直线不能调整宽度

如
何实现页内多个锚的效果

菜单部件不支持选中样式

[Axure RP Pro - jQuery]

如何在Axure RP Pro生成的HTML原型文档中集成jQuery, How to integrate jQuery into HTML
prototype document generated by Axure RP Pro

如何获取IFrame的URL，How to retrieve the URL of IFrame widget

如何在
Axure RP Pro生成的HTML原型文档中使用自定义脚本, How to integrate customized
javascript into HTML prototype document generated by Axure RP Pro

“移
到最前”效果，"Bring to Front" Interaction

如何实现淡入淡出效果，How to implement
fade in and fade out effects

如何设置焦点，How to implement the "set
focus" action

[Axure RP Pro - 相关问题]

Manual Installation

原型中切换页面时会闪一下

让规格文档中的页面图片和标题保持在同一页，fit section header and page image on one page

跨原型链接页面

显示视频

OnMouseOver事件和Rollover翻转效果浏览器不兼容

导入时保持变量有效

变量值与部件内容并不都能相互传递

导出在PDF

显示Google地图

在规格文档中描述Inline Frame部件的Default Target规格

渐变填充

使用正则表达式的较验函数在Firefox下出错

Style Editor样式编辑器以及已知的一些缺陷

Text Panel部件在设计时的效果与原型不一致

在不同工程之间使用masters主控文档

判断动态面板的状态

原型中Droplist“下拉列表”部件在IE6中总显示在最前面

设置首页面

自定义样式不能应用于翻转样式

线框中的字号与原型中的字号的关系

修改自定义样式对已应用该样式部件的逻辑

与IFrame部件中的页面互操作

在OnPageLoad事件中使用多个case用例

Open Link in Current Window，Close
Current Window，Open Link in Parent Frame将忽略其余动作

使用Google Code服务分享工程的限制及原因

Button按钮部件不支持设置文字以及解决方法

修改生成的prototype原型的css样式表

在文本框中显示提示信息

OnPageLoad事件中的动作不会触发部件的事件

Droplist下拉列表框部件在规格文档中不包括默认值

dynamic panel动态面板上的image图片部件设置了rollover翻转图片后在OnClick事件中不能正确隐藏所在面板

文本不支持Rollover翻转效果以及迂回解决办法

设定多套初始化变量

表格的单元格不能使用动作设置文字

Text Panel文本部件不支持超链接及迂回处理办法

设置页面尺寸

在规格文档中显示部件工具提示

master主控文档的behavior行为是custom
widget自定义部件时丢失raised event可触发事件

模拟加法运算

设置打开原型的默认浏览器

Listbox列表框部件不支持修改选项

数字键盘

checkbox
复选框部件的OnClick事件中复选框的状态已发生了改变

监视变量

限制输入数字

Wireframe
线框绘制尺寸的范围及处理方案

不支持最大化显示Popup窗口

使用masters组件监视变量

在规格文档中动态面板中的droplist下拉列表框部件会重复输出选项列表

一些字符无法直接进入编辑部件文字状态

Hyperlink超链接部件不使用浏览器的超链接效果

Specification规格文档中仅包含Dynamic
Panel动态面板部件在默认状态下的页面截图