如何自學搭建個人作品集網站

07-07

如何自學搭建個人作品集網站

本文是知乎Live「從零自學搭建個人作品集網站「的縮略版，省略細節內容和詳細降解，減少文本篇幅。

很高興能夠有機會分享我在搭建搭建網站過程中的體會心得，以及搜集整理的乾貨。

本篇文章定位是掃盲貼，希望幫助大家理清思路、合理規劃項目進程、更好的自學搭建個人網站。

1. 為何選擇自主搭建網站

1.1 網站對比PDF在留學申請中的優勢：

幾乎所有院校都有著各自的格式要求，對於PDF、圖片的大小數量要求不一、而對於網站幾乎都沒有更細的要求。這是由於圖片和PDF會佔用相當一部分內存，在不同的顯示器下的效果也各異。但現實往往是，大部分同學都會同時申請5所左右的學校，根據每所學校的要求調整排版是一件非常費時費力的事情；如果選擇使用網站作為載體，可以說是省去了這一耗時的工作。

參考RCA作品集要求，可以看到只接受圖片、視頻、網站這三種格式，相比來說網站的排版比6張圖片要容易些許，更何況還有為其他院校的要求而重新排版。

1.2 第三方建站平台適合你么？

現在有很多第三方建站平台，它們提供了模塊化的版式，圖形化操作避免了操作代碼，方便用戶自己布局並添加內容。一般都具備以下特點：

缺點：

1.需要付費才能獲得增值服務：例如移除廣告、獲得更大主機容量等

2.現有的模版很難改變樣式，沒有自主性，通常適合以圖片為主的作品集。

3.通常無法自定義動態效果和專場

優點：

1.許多已設計好的模版可供選擇

2.無需學習代碼，就像搭建QQ空間一樣搭建自己的網站

2. 準備建站，需要注意哪些？

2.1 明確建站的目的和受眾

如果把個人網站作為一個Project來看，在正式開始之前，需要明確你的需求、受眾、項目時間預算和技術能力限制。以下給一些tips，具體情況因人而異。

申請學校用：

更看重項目的過程展示和思辨能力，因此文字部分很重要

求職用：

1.清晰的導航，便於觀者快速定位興趣。

2.在html頁面中，添加公司的tag，便於在SEO中被搜索出

2.2 購買域名Domain

購買域名準確來說，是租賃域名。域名即為一串可以定位你網站的門牌號，前綴可以自己定義，只要沒有被人搶先註冊即可，推薦使用英文順序的中文拼音，

我使用的域名服務商是Godaddy，國外最大的服務商，平時促銷活動較多，趕上打折的時候，一整套服務（包括域名、主機、和其他維護增值服務）下來花費不會很多。

如果使用國內域名商，如騰訊雲、阿里雲，則需按照中國的法律驚醒域名的備案，此過程很麻煩，會花費不少時間。期間服務商會寄來背景板，需要手持身份證拍照等等。

關於域名，我們可以自定義的功能還有很多，有子域名、重定向域名、附加域、別名、DNS管理器。

2.3 購買伺服器Host

除了定位你網站的門牌號，還需要為你的所有網頁搭建一個存儲的房間，即為主機（又叫伺服器）主機服務商們一般會用存儲容量來區別售價。以下圖為例，對於個人網站，Economy套餐已足夠。

*如果作品集展示中有大量視頻內容，而且不方便鏈接至第三方視頻網站，例如YouTube、Vimeo，需要上傳至伺服器。則這種情況可能會出現容量不夠用，需要升級套餐。

Godaddy 的 Hosting 服務價格一覽

其他部分有趣的功能服務：

解析訪問者的IP：這項功能可以在申請學校的時候幫助你檢查，你的目標院校何時查看了你的網站，分別在什麼頁面停留了多久。
加密：可以給自己的網站設置訪問密碼，只有知道密碼的用戶才可以訪問。
IP阻止：可以阻止特定區間的用戶訪問

2.4 作品集中圖片與文字存檔技巧

當你購買好域名和主機，就可以開始寫代碼布局網站並填充內容了。在此之前，不妨把所有作品集中將要用到的圖片文字整理好，便於後續版式布局好之後，直接填充內容。

建議所有項目的素材（包括jpg、video、等文檔）都按照素材名稱命名、並放在以項目名稱命名的文件夾當中。圖片請在Photoshop當中保存為web格式，此操作可以在不損傷圖片保真度的同時，儘可能的壓縮圖片大小，提高網頁載入速度。

圖片具體清晰程度可按需調節，原則是越小越好

3. Html構建結構

沿用上文的比喻，網址website是網站的門牌號；主機Host是網站的戶型容量；那麼Html就是網站的骨架，即毛坯房；CSS則是所有的裝潢裝修；你需要展示的作品圖片文字是所有的傢具；剩下的JavaScript則是房子內的鳥語花香（交互動效等）。

3.1 編輯軟體

常用的Html編輯工具有很多，我自己親身試用下來，推薦 Code2（我在ACCD上WEB課的老師也推薦這款軟體），非常的輕量，適合初學者，並且可以直接鏈接FTP伺服器，上傳文檔，實時發布。

Coda 2 售價為$99, 在Live中發放了綠色版，供教學使用。

3.2 推薦教程

因為文章篇幅有限，所以在此不具體講解html，提供教程參考，如有問題可以在文末取得聯繫支持。

w3schools：A very nuts and bolts HTML construction site. 這是一個類似於詞典一樣的參考書，裡面有html所有的tag用法和小案例。

以下介紹一些html的基本構架，<>內的是標籤tag：以<>開始，並以 </>結束。當中的是內容，不同的標籤給內容定義了不同的屬性。網頁的骨架就是由這些不同的屬性組成的。就像一座房子一樣，有地基，有房梁，有承重牆，有屋頂組成。

HTML基本骨架：<!DOCTYPE HTML><html lang="en"><head> <meta charset="UTF-8"> <meta name="author" content="Author Name Here"> <title>...</title></head><body> ...</body></html>

4. 添加樣式並美化界面

4.1 優化CSS的編譯語言和編輯器

詳細講解略

4.2 借用現成的CSS樣式庫

同樣是套用模版，但和第三方平台服務商不同的是，你下載的只有html和css文件，需要自行打開編輯器修改代碼。對於基礎較弱的同學來說，這是一種快速自主建站的方式，幾乎只需要看懂代碼，然後替換文字圖片內容即可。

詳細講解略

4.3 如何讀取別人的CSS效果

使用chrome查看頁面元素的css樣式 - Wayne-Zhu - 博客園

5. 進階學習

5.1 JavaScript：讓網頁活起來

JavaScript 教程基礎知識

有許多公開的庫可以供大家使用，three.js是實現3D效果 jQuery

three.js - Javascript 3D library

5.2 搜商：如何找到優秀作品集網站

除了學習如何搭建網站、如何搭建一個交互順暢的網站，我們還需要參考許許多多優秀的作品集網站，學習它們如何布局項目，突出重點。

這邊提供幾種搜索方法供參考：

Linkedin > search >"example" in people>
在領英上搜索公司／職業，通過定位公司／人來查看相應作品集

有些設計師會在LinkedIn中列出自己的作品網站，通過則個方法還可以看到他們的職業成長路徑

University Web > Program > Gallery > Student Intro
尋找你感興趣的院校專業，通過優秀作品／優秀畢業生定位設計師，查看他們的作品集

以RCA Service Design為例，在學校官網上有優秀畢業作品介紹，會有設計師作品集網站的鏈接

INS 和微博這樣的社交平台上也會有設計師公開他們的信息，插畫師、漫畫家使用這類平台較多，比較便於圖片傳播。

上海視覺藝術學院副教授許一兵在個人微博信息欄中公開了作品網站

其他的networking方式還有很多，總而言之，通過學會在SEO的關鍵詞檢索指令，可以幫助你提高獲取信息的途徑和效率。

這是我搜集的優秀設計的作品集網站，從交互設計開始，以後陸續會更新其他設計方向：工業設計、平面設計、建築設計。歡迎大家可以直接伸手索取。

Tammy Tang：作品集網站收集分享-交互設計類?

zhuanlan.zhihu.com

5.3 針對留學申請的作品集網站Tips

詳細講解略

6.資源集合

詳細講解略

歡迎大家支持目前5星好評的Live「從零自學搭建個人作品集網站」～