不會(huì)編程？Axure一樣可以做網(wǎng)站

時(shí)間：2023-09-25 23:36:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-25 23:36:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

不會(huì)編程？Axure一樣可以做網(wǎng)站：說(shuō)起Axure，做產(chǎn)品的朋友再熟悉不過(guò)了，它是我們?cè)谌粘坦ぷ髦凶畛Ｒ?jiàn)的原型制作軟件之一，今天分享的文章，主要是教大家如何使用Axure打造簡(jiǎn)單的個(gè)人網(wǎng)站，不會(huì)編程我們依然可以做網(wǎng)站。

接下去將分為幾個(gè)步驟去闡述：

1. 這些我們必須知道的小知識(shí)

• axure是可以生成html文件的，這為我們使用它來(lái)制作網(wǎng)站提供了可能性
• axure只能搭建小型的個(gè)人網(wǎng)站 ，他不具備數(shù)據(jù)庫(kù)，比較適合做展示類的網(wǎng)站
• 和普通網(wǎng)站構(gòu)建一樣，我們需要購(gòu)買(mǎi)域名和購(gòu)置虛擬服務(wù)器

2. 利用xmind思維導(dǎo)圖，對(duì)我們要構(gòu)建的網(wǎng)站進(jìn)行知識(shí)整理

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

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

整理如下圖所示：

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

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

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

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

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

利用母版進(jìn)行top導(dǎo)航的設(shè)計(jì)

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

設(shè)置導(dǎo)航頻道的點(diǎn)擊效果與跳轉(zhuǎn)

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













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







左側(cè)導(dǎo)航在滾動(dòng)時(shí)觸發(fā)具體欄目類別，采用的是熱區(qū)范圍來(lái)觸發(fā)，當(dāng)窗口滾動(dòng)時(shí)觸發(fā)相應(yīng)的類別選中

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

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

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

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

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

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

如下圖包含了圖片，標(biāo)簽，標(biāo)題，詳情描述幾個(gè)內(nèi)容，在中繼器中就要有相應(yīng)的字段來(lái)進(jìn)行控制

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

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

（2）我們還需要一個(gè)服務(wù)器，我選擇的是海外云虛擬機(jī)，不需要備案可以在阿里云進(jìn)行購(gòu)買(mǎi)；

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

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

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

總結(jié)

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

謝謝大家的觀看！