Axure导出HTML

一、导出HTML的方法

Axure RP是一款流行的低保真原型设计工具，使用它可以快速制作交互原型，同时也支持将原型导出为HTML文件。导出HTML文件的方法如下：

1、在Axure软件内选择菜单“发布”->“生成HTML文件”；
2、设定要导出的页面数量和导出路径；
3、设定是否包含Axure生成的JS和CSS文件，是否包含Axure预设的Web字体文件；
4、点击“生成”按钮，Axure会按照设定生成HTML文件。

值得注意的是，导出的HTML文件可能在不同的浏览器和设备上会存在显示效果上的差异。

二、整体HTML文件结构

当导出HTML文件后，可以看到生成的文件的整体HTML文件结构如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>页面标题</title>
    <link rel="stylesheet" type="text/css" href="styles/styles.css">
    <script type="text/javascript" src="scripts/prototype.js"></script>
    <script type="text/javascript" src="scripts/repeater.js"></script>
  </head>
  <body>
    <div id="base">
      <div id="page_DIV" class="ax_default" data-footable-mode="client" data-footable-breakpoint="640" >
        <!-- 页面所有部件的HTML代码 -->
      </div>
    </div>
  </body>
</html>

导出的HTML文件包含了一个DOCTYPE声明，meta标签，title标签和body标签。在head标签中，引用了导出的CSS、JavaScript文件。HTML文件中页面所有部件的HTML代码都在div id=”page_DIV”的div标签内。

三、页面HTML代码结构

除了整体HTML文件之外，也需要观察单个页面的HTML代码结构，观察单个页面HTML代码可通过以下步骤实现：

1、在Axure RP中双击要导出的页面，在“页面”选项卡下找到“页面样式”；
2、找到页面样式中的“添加注释”，在“代码注释”中点击“HTML”，然后点击“保存”；
3、在生成HTML文件后，在项目文件夹内找到“document.html”文件，用文本编辑器打开，找到页面名称所对应的HTML代码片段。

可以发现，页面代码由多个div包裹构成，每个div代表一个页面的部件。在每个div中，可以看到如下代码：

data-label="Page" class="ax_default" data-left="0" data-top="0" data-width="1280" data-height="960">

这些代码代表了部件自身的宽度、高度、坐标和绑定的Axure默认类名。如果需要样式定制，可以修改已有类或自定义类，定制CSS文件。

四、Axure页面部件的CSS类名

在导出的HTML文件中，每个部件都会被赋予一个CSS类名，这个类名是Axure“预设样式”的结果。这里列出一些常见的Axure样式类名及其对应的样式：

1、ax_default：表示部件没有自定义的样式；
2、ax_shape：表示图形部件，如矩形、圆形等；
3、ax_table_cell：表示表格单元格；
4、ax_image：表示图片部件；
5、ax_text_cell：表示文本部件；
6、ax_checkbox：表示复选框部件；
7、ax_radio：表示单选框部件；
8、ax_listbox：表示下拉选择框部件；
9、ax_text_area：表示文本框部件。

五、HTML文件中加入JavaScript

在导出的HTML文件中，Axure也会通过JavaScript生成一些功能，比如按钮的点击事件、导航菜单的展开与收起。在需要实现交互的元素上，选择“添加交互”后，Axure将会在页面底部的JavaScript中添加相应的代码。如果需要添加自定义的JavaScript代码，可以通过添加HTML注释进行实现：

1、在Axure RP中的“页面”选项卡下找到“页面样式”；
2、找到页面样式中的“添加注释”，在“代码注释”中点击“HTML”，然后点击“保存”；
3、在代码注释中添加script标签，定义自定义的JavaScript代码；
4、在HTML代码中需要执行JavaScript代码的部件上添加指向定义好的JavaScript代码标注的axure标注。比如：
   <div id="menu_DIV" class="ax_default" data-label="menu" data-left="10" data-top="10" data-width="100">
      <!-- 对应JS代码注释: <!--JS menu--> -->
      <div id="menu_Image" class="ax_image"></div>
   </div>

原创文章，作者：QYIVO，如若转载，请注明出处：https://www.506064.com/n/372513.html