設計師如何呈現(xiàn)作品集？不會代碼也能開發(fā)個人網(wǎng)站

時間：2023-10-09 03:06:01 | 來源：網(wǎng)站運營

時間：2023-10-09 03:06:01 來源：網(wǎng)站運營

設計師如何呈現(xiàn)作品集？不會代碼也能開發(fā)個人網(wǎng)站：設計師們除了可以在站酷、UI中國、behance、dribbble等平臺上可以發(fā)布自己的作品之外，打理一個屬于自己的個人網(wǎng)站，附在自己的簡歷上也不失為一個點睛之筆。這也是設計師們想要搭個站的原因，也是為了激勵自己產(chǎn)出優(yōu)秀的作品和練習。
如果純手寫網(wǎng)頁，做個簡單的前臺顯示頁面，但是需要有比較強大的寫代碼能力，花費的時間成本也太大，做出來的效果也無法保證，等等原因之后開始考慮起了提供網(wǎng)站搭建服務的服務商和一些無代碼平臺，做了功課之后鎖定了一家無代碼開發(fā)平臺——Zion，通過可視化和組件化模塊就能實現(xiàn)制作小程序、網(wǎng)站。
先來看看搭建一個網(wǎng)站需要什么準備工作。
首先，搭建網(wǎng)站最關鍵的當然是要有一臺服務器，它的作用就是提供網(wǎng)站運行所需要的硬件環(huán)境。但這并不意味著我們真的要去買一臺物理機來當服務器，因為現(xiàn)在國內(nèi)有很多云平臺都可以購買云服務器，而且價格還很便宜。第二，服務器管理軟件的作用就是能夠讓我們很方便地，在服務器上安裝軟件或者是管理文件。第三，域名是我們訪問網(wǎng)站時輸入的地址，由于網(wǎng)站是搭建在服務器上的，按理說我們應該通過服務器的ip地址來訪問網(wǎng)站才對。可全世界的網(wǎng)站那么多，如果通過記住這些冷冰冰的數(shù)字來訪問網(wǎng)站，那豈不是太難了，所以域名就應運而生。當我們在地址欄輸入域名時，會有DNS服務器幫我們找到，站服務器的IP地址并返回給瀏覽器，然后瀏覽器再通過ip地址訪問網(wǎng)站。
搭建網(wǎng)站的最后一個是一份網(wǎng)站程序源碼，它的作用就是提供一個可供訪問的界面，并實現(xiàn)網(wǎng)站的所有功能。按道理來說，開發(fā)網(wǎng)站程序本來是含代碼量最高難度也最大的一個步驟，但是在這里介紹一個無代碼開發(fā)平臺——Zion。通過可視化和組件化模塊就能實現(xiàn)制作小程序、網(wǎng)站。
比如我們需要呈現(xiàn)這樣的效果，去把自己的作品一個一個鏈接起來（當然這只是一個初步的集成導航，暫時先把功能實現(xiàn)了出來，后期會把設計方面再加強一下）



1.1 制作方法
想要實現(xiàn)這種效果的方法有很多，如下：

1. 選擇視圖+條件式容器內(nèi)套列表，在列表過濾字段，然后條件式容器和選擇視圖匹配。
2. 選擇視圖+列表，然后列表過濾字段與選擇視圖名稱匹配（☆推薦）

談談這兩種方法：這兩種方法實現(xiàn)的效果是一樣的，但在制作的過程中方法1絕對比方法2要慢很多而且容易出錯。因為方法1需要對每個條件式容器設置條件及內(nèi)套的列表也要一個個過濾會很麻煩，而且效率也低，制作容易出錯卡頓；方法2直接用選擇視圖和列表，列表過濾字段直接和選擇視圖名稱匹配。
1.2 頁面布局

• 在頁面拖入【選擇視圖】和【列表】及【文字】組件，如圖所示：

1.2.1 選擇視圖布局

• 選擇視圖樣式中將多行打開，X【0】，Y【70】，W【135】，H【650】，如圖所示：

• 雙擊進入【選擇視圖】中，在【正常視圖】和【選中視圖】拖入【按鈕組件】（選擇視圖按鈕樣式自擬），X【0】，Y【0】，W【135】，H【50】，如圖所示：

• 在【正常視圖】中會有個【懸停效果】，選擇【正常視圖的按鈕】點擊進入懸停編輯模式，修過懸停后的文字顏色即可，如圖所示：

1.2.2 文字布局

• 【文字】組件就不多說了，X【144】，Y【70】，W【234】，H【25】，文字顏色自擬，將懸浮勾上，如圖所示：

1.2.3 列表布局

• 【列表】具體參數(shù)，X【144】，Y【102】，W【1122】，H【619】，將懸浮勾上，布局模式改為【充滿父組件】，如圖所示：

• 【列表】樣式，縱列數(shù)量：4，橫向空白和縱向空白都為：10，如圖所示：

• 雙擊【列表】，點擊【容器視圖】，將高度改為80，如圖所示：

• 在【容器視圖】中拖入一個【視圖】，X【0】，Y【0】，W【276】，H【80】并給【視圖】添加邊框效果，后面要做懸停效果的。如圖所示：

• 在【視圖】中拖入圖片和兩個文字組件，具體參數(shù)如下：

• 進入【懸停編輯模式】分別給【視圖】與【文字】添加懸停效果分別修改下顏色即可，如圖所示：

1.3 數(shù)據(jù)表

• 因為不用建立關系，直接參考以下圖片就行了，如圖所示：

1.4 數(shù)據(jù)綁定及過濾
1.4.1 選擇視圖數(shù)據(jù)綁定

• 給【選擇視圖】，默認值自要求默認值遠程數(shù)據(jù)存在的，數(shù)據(jù)來自【遠程數(shù)據(jù)中的導航側(cè)邊】，字段排序可加可不加，過濾類型【無過濾條件】，如圖所示：

• 雙擊進入【選擇視圖】點擊【按鈕】，文字內(nèi)容為【項數(shù)據(jù)中導航側(cè)邊的name】，如圖所示：

1.4.2 文字數(shù)據(jù)綁定

• 文字內(nèi)容為【-選擇器/選擇視圖/name-】，如圖所示：

1.4.3 列表數(shù)據(jù)綁定

• 點擊【列表】，添加數(shù)據(jù)表【導航內(nèi)容數(shù)據(jù)】，過濾條件為【type等于選擇器/選擇視圖/name】，如圖所示：

• 進入【列表】，綁定【視圖數(shù)據(jù)】，圖片【項數(shù)據(jù)/導航內(nèi)容數(shù)據(jù)/image】，name【項數(shù)據(jù)/導航內(nèi)容數(shù)據(jù)/name】，description【項數(shù)據(jù)/導航內(nèi)容數(shù)據(jù)/description】，如圖所示：

1.5 打開外部鏈接

• 在【視圖】中添加點擊行為【打開外部鏈接】，鏈接內(nèi)容為【項數(shù)據(jù)/導航內(nèi)容數(shù)據(jù)/URL】，如圖所示：

一般來說，不會寫代碼想要自己搭建網(wǎng)站是比較困難的，但是這樣的無代碼平臺卻把兩者之間的門檻拉低了，這樣就方便了很多，也安全了很多。最關鍵的是服務器，域名這些都給你準備好了，不懂代碼的小白真的是很適合用這個平臺去落實自己的想法。