Axure 免費(fèi)建個(gè)網(wǎng)站

時(shí)間：2022-08-28 06:39:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2022-08-28 06:39:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

前言

Axure 是產(chǎn)品經(jīng)理們耳熟能詳?shù)脑凸ぞ?，用?lái)畫原型寫文檔，實(shí)在不要太方便；但是大部分人不知道Axure更為強(qiáng)大的一面...

Axure在日常分享時(shí)，可以導(dǎo)出html文件包，別人可以直接打開html文件預(yù)覽原型，那么其實(shí)Axure導(dǎo)出的html文件包是可以放在Web服務(wù)器上的，這樣，Axure可以做一件十分炫酷的事，用Axure可以創(chuàng)建十分自由的靜態(tài)網(wǎng)站

Axure靜態(tài)網(wǎng)站相對(duì)hexo靜態(tài)博客類軟件來(lái)說(shuō)更靈活，靜態(tài)博客的確可以方便的發(fā)文章，但是頁(yè)面內(nèi)容布局都被固定，類似于個(gè)人網(wǎng)站，企業(yè)官網(wǎng)，產(chǎn)品官網(wǎng)，活動(dòng)頁(yè)等可以個(gè)性化設(shè)計(jì)且僅需要靜態(tài)網(wǎng)頁(yè)的網(wǎng)站是無(wú)法使用hexo這類靜態(tài)博客程序?qū)崿F(xiàn)的，何況Axure是產(chǎn)品和設(shè)計(jì)師們吃飯的工具，入手門檻要比靜態(tài)博客軟件低得多

同時(shí)與建站工具相比，Axure 網(wǎng)站有免費(fèi)的托管平臺(tái)，不需要購(gòu)買服務(wù)器，沒(méi)有年費(fèi)，如果對(duì)域名有要求，買個(gè)域名一年也就幾十塊錢，如果對(duì)域名沒(méi)要求，那么就是完全的零費(fèi)用

Axure可以完成網(wǎng)站設(shè)計(jì)到部署，對(duì)，你沒(méi)看錯(cuò)，直接設(shè)計(jì)好，然后部署，跳過(guò)了開發(fā)環(huán)節(jié)，讓我們產(chǎn)品經(jīng)理、設(shè)計(jì)師，無(wú)需代碼編程，即可實(shí)現(xiàn)網(wǎng)站從設(shè)計(jì)到部署上線，我們可以自己搞定純靜態(tài)類企業(yè)官網(wǎng)，產(chǎn)品官網(wǎng)，最重要的是我們可以非常自由的設(shè)計(jì)自己的個(gè)人網(wǎng)站，無(wú)論是在職場(chǎng)亦或是在行業(yè)里，可以算是一張個(gè)人名片了。

案例展示

話不多說(shuō)，先看我完成的一個(gè)產(chǎn)品導(dǎo)航網(wǎng)站的案例，主要是互聯(lián)網(wǎng)行業(yè)優(yōu)質(zhì)的網(wǎng)站推薦




視頻教程

Axure RP 8 免費(fèi)建個(gè)網(wǎng)站

Axure 制作網(wǎng)站知識(shí)點(diǎn)

主要考慮到有些小伙伴對(duì)Axure一些功能點(diǎn)不是很熟悉，所以在此對(duì)本原型中用到的Axure功能做個(gè)簡(jiǎn)單介紹，方便小伙伴們修改產(chǎn)品導(dǎo)航原型內(nèi)容

當(dāng)然，以下的教程需要小伙伴對(duì)Axure有基礎(chǔ)的使用，至少對(duì)Axure是熟悉的，如果是零基礎(chǔ)新手，那么建議可以先看下面內(nèi)容，如果看不懂，可以先學(xué)習(xí)下Axure，一般也就一周時(shí)間就學(xué)會(huì)了

產(chǎn)品導(dǎo)航的原型是使用Axure RP 8 制作的，為什么選擇8不選9呢，是因?yàn)槟壳坝行┕δ?還沒(méi)有，特別是手機(jī)適配倍數(shù)放大的功能，9是沒(méi)有的，導(dǎo)致手機(jī)屏幕適配效果不是很理想，所以大家要做手機(jī)屏幕適配，建議選擇RP 8會(huì)更合適一點(diǎn)

以下僅講重要的設(shè)置要點(diǎn)，如果想觀看更細(xì)節(jié)的設(shè)置，可以觀看文章頂部的視頻教程

網(wǎng)址內(nèi)容（中繼器）

中繼器類似于數(shù)據(jù)庫(kù)的概念，可以重復(fù)中繼器的內(nèi)容，但是數(shù)據(jù)可以使用不同的內(nèi)容

修改中繼器內(nèi)容

在畫布中雙擊中繼器元件，可進(jìn)入中繼器里，對(duì)中繼器內(nèi)容進(jìn)行編輯




中繼器數(shù)據(jù)內(nèi)容

數(shù)據(jù)表格中的內(nèi)容與畫布中中繼器的元件內(nèi)容需要一一對(duì)應(yīng)，類似數(shù)據(jù)庫(kù)的字段，我這里設(shè)置了網(wǎng)站名稱（name)、網(wǎng)址鏈接（link)、簡(jiǎn)介（jianjie）、圖標(biāo)（icon)字段，數(shù)據(jù)與畫布內(nèi)容元件通過(guò)交互設(shè)置“每項(xiàng)加載時(shí)”配置對(duì)應(yīng)關(guān)系




交互設(shè)置

我們這里有2組文字，1組圖像，所以在“每項(xiàng)加載時(shí)”我們?cè)O(shè)置了一組文字?jǐn)?shù)據(jù)來(lái)源，一組圖標(biāo)數(shù)據(jù)來(lái)源，這個(gè)配置是為了在網(wǎng)頁(yè)加載時(shí)，顯示圖標(biāo)、網(wǎng)址名稱、網(wǎng)址簡(jiǎn)介內(nèi)容

設(shè)置文本值或圖片值時(shí)，先選中對(duì)應(yīng)元件，

然后點(diǎn)擊"fx"圖標(biāo)，

然后點(diǎn)擊界面中的"插入變量、屬性、函數(shù)或運(yùn)算符...",找到"中繼器/數(shù)據(jù)集"下面的Item開頭后面的對(duì)應(yīng)字段，比如name，則是Item.name，然后點(diǎn)擊確定，

此時(shí)就將網(wǎng)址名稱對(duì)應(yīng)到了數(shù)據(jù)表格的name字段，網(wǎng)頁(yè)加載時(shí)，網(wǎng)址名稱就會(huì)顯示name字段對(duì)應(yīng)的內(nèi)容

設(shè)置超鏈接

設(shè)置超鏈接需要先進(jìn)入中繼器，我這里是設(shè)置的整塊內(nèi)容都可以點(diǎn)擊跳轉(zhuǎn)，所以我把整塊建了分組，然后在分組上創(chuàng)建超鏈接，設(shè)置超鏈接依然是找到中繼器對(duì)應(yīng)的link字段，這樣就會(huì)鏈接到中繼器link字段下的地址

修改網(wǎng)址

如果你需要替換網(wǎng)址內(nèi)容，或者修改網(wǎng)址的呈現(xiàn)方式，可以修改如圖這部分?jǐn)?shù)據(jù)內(nèi)容，網(wǎng)址展示是按照表格的從上到下順序依次展示的

側(cè)邊內(nèi)容（動(dòng)態(tài)面板）

針對(duì)導(dǎo)航內(nèi)容多的頁(yè)面，我做了一個(gè)側(cè)邊欄錨點(diǎn)鏈接快捷跳轉(zhuǎn)，點(diǎn)擊后可以快速定位到對(duì)應(yīng)的導(dǎo)航網(wǎng)站分類上

固定動(dòng)態(tài)面板：設(shè)置為橫向左側(cè)，垂直居中

滾動(dòng)到元件：鼠標(biāo)單擊交互，配置動(dòng)作元件選擇對(duì)應(yīng)分類的標(biāo)題元件即可

QQ跳轉(zhuǎn)

http://wpa.qq.com/msgrd?v=3&uin=524858791&site=qq&menu=yes

把標(biāo)注的QQ號(hào)碼修改成自己的QQ號(hào)，然后QQ圖標(biāo)鏈接到這個(gè)地址，訪客就可以通過(guò)瀏覽器打開QQ與你聊天

Axure 導(dǎo)出HTML注意事項(xiàng)

導(dǎo)出HTML

通過(guò)【發(fā)布-生成原型文件】，將原型導(dǎo)出為HTML

配置網(wǎng)站ico圖標(biāo)

制作一個(gè)ico圖標(biāo)文件，放到導(dǎo)出的HTML網(wǎng)站根目錄

給大家推薦一個(gè)轉(zhuǎn)換ico格式的網(wǎng)站，大家可以自行轉(zhuǎn)換ico文件，或者百度搜索ico生成網(wǎng)站

刪除Axure預(yù)覽工具欄

Axure導(dǎo)出的HTML文件打開后自帶有預(yù)覽工具欄，如果需要?jiǎng)h除那么在Axure 原型中，將要作為首頁(yè)的頁(yè)面命名為index即可，index文件是網(wǎng)站的首個(gè)訪問(wèn)的頁(yè)面，Axure會(huì)生成一個(gè)默認(rèn)的index文件，如果將頁(yè)面修改為index后，那么此頁(yè)面將會(huì)覆蓋默認(rèn)index，成為網(wǎng)站的首頁(yè)，同時(shí)不會(huì)再出現(xiàn)預(yù)覽工具欄了

網(wǎng)頁(yè)地址和標(biāo)題分別設(shè)置

設(shè)計(jì)原型時(shí)，頁(yè)面名稱采用英文，導(dǎo)出后修改html源碼中<title>標(biāo)簽中的頁(yè)面標(biāo)題，即可實(shí)現(xiàn)頁(yè)面標(biāo)題為中文，頁(yè)面地址為英文的效果

給大家推薦 HBuilder X 工具（https://www.dcloud.io/hbuilderx.html），來(lái)修改源碼，當(dāng)然，不在乎中文地址的同學(xué)，可以忽略此步驟

網(wǎng)站部署（Coding免費(fèi)托管網(wǎng)站）

目前主流的代碼托管平臺(tái)，都是需要將網(wǎng)站文件通過(guò)Git命令或者工具，推送到代碼倉(cāng)庫(kù)的，不過(guò)近期我在Coding上發(fā)現(xiàn)了一個(gè)新上線的功能【通過(guò)壓縮包文件部署靜態(tài)網(wǎng)站】，讓部署網(wǎng)站完全沒(méi)有了技術(shù)門檻。

首先在Coding網(wǎng)站創(chuàng)建一個(gè)賬號(hào)https://coding.net/




然后創(chuàng)建一個(gè)項(xiàng)目，選擇DevOps項(xiàng)目模板




填好項(xiàng)目信息




將本地導(dǎo)出的html文件，從文件夾選中全部文件，打包為一個(gè)壓縮包，建議使用2345壓縮軟件，不要使用360壓縮軟件，上傳的文件會(huì)亂碼




在Coding的文件網(wǎng)盤中上傳壓縮包文件




然后在持續(xù)部署-靜態(tài)網(wǎng)站中，發(fā)布靜態(tài)網(wǎng)站，此功能需要先進(jìn)行實(shí)名認(rèn)證，根據(jù)網(wǎng)站提示完成實(shí)名認(rèn)證就可以了




在【新建靜態(tài)網(wǎng)站】中填寫網(wǎng)站名稱，【部署來(lái)源】選擇【本項(xiàng)目文件】，【項(xiàng)目文件】選擇在文件網(wǎng)盤中上傳的壓縮包，【觸發(fā)機(jī)制】選擇【自動(dòng)部署】，然后點(diǎn)擊保存




然后網(wǎng)站已經(jīng)部署好了，點(diǎn)擊訪問(wèn)地址可以訪問(wèn)網(wǎng)站了。







在設(shè)置中，可以綁定域名，將需要綁定的域名填入【綁定新域名】，選擇【首選域名】則該網(wǎng)站地址為【首選域名】，添加的域名需要在DNS中添加CNAME記錄指向本項(xiàng)目地址，也就是紅色橫線的地址







更新網(wǎng)站文件版本，可以上傳同名文件進(jìn)行覆蓋，網(wǎng)站會(huì)自動(dòng)更新部署，或者修改靜態(tài)網(wǎng)站，在項(xiàng)目文件中重新選擇新文件，保存修改即可更新網(wǎng)站新版內(nèi)容

注冊(cè)與綁定域名

域名建議大家注冊(cè).com 或 .cn 后綴的域名，一個(gè)是這兩種后綴域名使用最廣泛，容易被記住；其次續(xù)費(fèi)便宜，.com續(xù)費(fèi)69/年，.cn續(xù)費(fèi)39/年，相比其他個(gè)性化域名動(dòng)輒100+的續(xù)費(fèi)實(shí)惠的多，所以不要輕信購(gòu)買1元后綴為.design、.cc的域名，續(xù)費(fèi)的時(shí)候貴的想哭了

購(gòu)買域名國(guó)內(nèi)比較推薦下面兩家

阿里萬(wàn)網(wǎng) https://wanwang.aliyun.com/

騰訊云 https://dnspod.cloud.tencent.com/

都是大平臺(tái)，可以放心購(gòu)買，域名其實(shí)就是一個(gè)很普通的商品，大家如果沒(méi)有接觸過(guò)技術(shù)，也無(wú)須擔(dān)心，當(dāng)一個(gè)普通商品購(gòu)買即可，不會(huì)涉及到編碼什么的

購(gòu)買域名以后，去域名解析平臺(tái)，將域名地址指向服務(wù)器IP地址，或者指定域名，那么用戶訪問(wèn)此域名時(shí)，就會(huì)跳轉(zhuǎn)到你的網(wǎng)站，你可以理解為，域名解析就是一個(gè)中轉(zhuǎn)站，你讓它指定轉(zhuǎn)向哪里，它就轉(zhuǎn)向哪里，有的人網(wǎng)站在服務(wù)器，那么就通過(guò)IP指向網(wǎng)站的服務(wù)器IP地址

如果是放在代碼托管平臺(tái)如Coding之類的，因?yàn)镃oding會(huì)為你的網(wǎng)站生成一個(gè)默認(rèn)的域名地址，所以在域名中通過(guò)指向域名方式，指向Coding生成的默認(rèn)域名地址就行

進(jìn)入阿里云控制臺(tái)，搜索域名，點(diǎn)擊域名可以進(jìn)入域名列表




點(diǎn)擊下圖指向的兩處都可以進(jìn)入域名解析，然后去設(shè)置域名解析，在Coding中綁定解析的域名就可以了




按照以下截圖設(shè)置解析信息就可以將購(gòu)買的域名指向Coding的默認(rèn)域名

最后，總結(jié)一下

制作步驟

1.設(shè)計(jì)好網(wǎng)站原型，導(dǎo)出HTML文件

2.對(duì)導(dǎo)出的HTML文件進(jìn)行處理，比如添加ico圖標(biāo)，刪除預(yù)覽工具欄，設(shè)置網(wǎng)頁(yè)title名稱等

3.在Coding上傳HTML壓縮包，部署靜態(tài)網(wǎng)站

4.購(gòu)買一個(gè)域名，然后添加CNAME指向Coding靜態(tài)網(wǎng)站地址，最后在Coding綁定域名

5.現(xiàn)在可以預(yù)覽網(wǎng)站了




源文件下載

用 Axure 免費(fèi)建個(gè)網(wǎng)站




好了，就到這里了，更多驚喜，下期再見！