說起Axure，做產(chǎn)品的朋友再熟悉不過了，它是我們在日程工作中最常見的原型制作軟件之一，今天分享的文章，主要是教大家如何使用Axure打造簡單的個人網(wǎng)站，不會編程我們依然可以做網(wǎng)站。

接下去將分為幾個步驟去闡述：

1. 這些我們必須知道的小知識axure是可以生成html文件的，這為我們使用它來制作網(wǎng)站提供了可能性axure只能搭建小型的個人網(wǎng)站 ，他不具備數(shù)據(jù)庫，比較適合做展示類的網(wǎng)站和普通網(wǎng)站構(gòu)建一樣，我們需要購買域名和購置虛擬服務器2. 利用xmind思維導圖，對我們要構(gòu)建的網(wǎng)站進行知識整理

舉個例子，我構(gòu)建的是一個小型個人展示站

包含以下主要內(nèi)容：網(wǎng)址導航、常用工具、實用資源、案例展示，通過思維導出對其內(nèi)容進行

整理如下圖所示：

3. 整理好了內(nèi)容所需，接下去我們進入制作部分

因為我們是利用Axure去制作網(wǎng)站，在我們平時工作的流程常常是，原型-設計-前端-開發(fā)，而這里我們只需進行原型和設計，這里將不再有前后關(guān)系，為了節(jié)約時間，我們可以把Axure當做設計工具，直接進行頁面設計，里面所需的圖片素材可以用ps輔助設計。

創(chuàng)建一個項目文件夾用來整理此網(wǎng)站涉及到的全部資源素材

對網(wǎng)站全局配色、字體、樣式進行布局

采用的是藍色調(diào)，可以看下我的主色、輔助色的配色如下

利用母版進行top導航的設計

導航布局如下，采用了頂部導航的方式，設置了動態(tài)面板并將此轉(zhuǎn)化成母版用于多個頁面

設置導航頻道的點擊效果與跳轉(zhuǎn)

如下圖所示，有懸停效果和點擊跳轉(zhuǎn)的設置

網(wǎng)址導航欄目的左側(cè)菜單設置，滑塊移動位置的y坐標按具體位置設置，每個元素都要設置

左側(cè)導航在滾動時觸發(fā)具體欄目類別，采用的是熱區(qū)范圍來觸發(fā)，當窗口滾動時觸發(fā)相應的類別選中

利用柵格系統(tǒng)對網(wǎng)站進行布局

布置完畢將柵格去除（紫紅色是1200px寬度的邊界）

每個元件盡可能的規(guī)范，再進行下一步

拿網(wǎng)址導航頁做示例，每個單元模塊標題，網(wǎng)址卡片、左側(cè)導航的排布盡可能規(guī)范統(tǒng)一，立馬包含了各種元素的基本規(guī)范如：字體大小、顏色、寬度、懸停交互效果點擊跳轉(zhuǎn)效果

合理利用中繼器做頁面的數(shù)據(jù)關(guān)聯(lián)

常用工具與實用資源頁面，采用了中繼器來制作，在中繼器的微型數(shù)據(jù)表中，插入對應字段后，關(guān)聯(lián)每項參數(shù)的內(nèi)容（對元件名稱進行命名），以后增加一條數(shù)據(jù)對應改變其內(nèi)容即可。

如下圖包含了圖片，標簽，標題，詳情描述幾個內(nèi)容，在中繼器中就要有相應的字段來進行控制

4. 制作完畢，接下去要解決的是如何把生成的網(wǎng)站，能讓其它人進行訪問

（1）我們需要一個域名，可以到阿里云萬網(wǎng)去購買https://wanwang.aliyun.com/，我選擇的域名是uedart.com的域名；

（2）我們還需要一個服務器，我選擇的是海外云虛擬機，不需要備案可以在阿里云進行購買；

（3）都準備好之后，我們要做的是按照阿里云的步驟進行虛擬機的設置布局，下載Filezilla進行關(guān)聯(lián)，將我們axure生成的文件進行上傳，上傳之后，我們再進行域名的解析，即可通過域名對我們的網(wǎng)站進行外網(wǎng)訪問。

5. 可能遇到的問題，工具欄明明在生成的時候關(guān)閉了，上傳之后還是出現(xiàn)了

可以將index和start的html刪除，復制第一個頁面的html改名成index重新上傳即可，查看我制作完畢的網(wǎng)址http://xintu.uedart.com/

總結(jié)

至此通過以上5個步奏，我們利用Axure完成了一個小型網(wǎng)站設計與制作，當然這并不是一個傳統(tǒng)意義上的網(wǎng)站開發(fā)，只是借此向大家介紹下，利用Axure的html生成，我們可以簡單的處理一個網(wǎng)站的制作，如果只是個人的網(wǎng)站，且不需要過多的復雜功能，此方法足以滿足各位的需求，大家也可以利用這樣發(fā)方式來制作自己的網(wǎng)站。

謝謝大家的觀看！