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/zh-hk/n/372513.html