如何自學(xué)搭建個人作品集網(wǎng)站
時間：2022-08-20 22:00:01 | 來源：網(wǎng)站運(yùn)營
時間：2022-08-20 22:00:01 來源：網(wǎng)站運(yùn)營
本文是本站Live“從零自學(xué)搭建個人作品集網(wǎng)站“的縮略版，省略細(xì)節(jié)內(nèi)容和詳細(xì)降解，減少文本篇幅。
很高興能夠有機(jī)會分享我在搭建搭建網(wǎng)站過程中的體會心得，以及搜集整理的干貨。
本篇文章定位是掃盲貼，希望幫助大家理清思路、合理規(guī)劃項(xiàng)目進(jìn)程、更好的自學(xué)搭建個人網(wǎng)站。
1. 為何選擇自主搭建網(wǎng)站
1.1 網(wǎng)站對比PDF在留學(xué)申請中的優(yōu)勢：幾乎所有院校都有著各自的格式要求，對于PDF、圖片的大小數(shù)量要求不一、而對于網(wǎng)站幾乎都沒有更細(xì)的要求。這是由于圖片和PDF會占用相當(dāng)一部分內(nèi)存，在不同的顯示器下的效果也各異。但現(xiàn)實(shí)往往是，大部分同學(xué)都會同時申請5所左右的學(xué)校，根據(jù)每所學(xué)校的要求調(diào)整排版是一件非常費(fèi)時費(fèi)力的事情；如果選擇使用網(wǎng)站作為載體，可以說是省去了這一耗時的工作。
參考RCA作品集要求，可以看到只接受圖片、視頻、網(wǎng)站這三種格式，相比來說網(wǎng)站的排版比6張圖片要容易些許，更何況還有為其他院校的要求而重新排版。1.2 第三方建站平臺適合你么？現(xiàn)在有很多第三方建站平臺，它們提供了模塊化的版式，圖形化操作避免了操作代碼，方便用戶自己布局并添加內(nèi)容。一般都具備以下特點(diǎn)：
缺點(diǎn)：1.需要付費(fèi)才能獲得增值服務(wù)：例如移除廣告、獲得更大主機(jī)容量等
2.現(xiàn)有的模版很難改變樣式，沒有自主性，通常適合以圖片為主的作品集。
3.通常無法自定義動態(tài)效果和專場
優(yōu)點(diǎn)：1.許多已設(shè)計(jì)好的模版可供選擇
2.無需學(xué)習(xí)代碼，就像搭建QQ空間一樣搭建自己的網(wǎng)站
2. 準(zhǔn)備建站，需要注意哪些？
2.1 明確建站的目的和受眾如果把個人網(wǎng)站作為一個Project來看，在正式開始之前，需要明確你的需求、受眾、項(xiàng)目時間預(yù)算和技術(shù)能力限制。以下給一些tips，具體情況因人而異。
申請學(xué)校用：更看重項(xiàng)目的過程展示和思辨能力，因此文字部分很重要
求職用：1.清晰的導(dǎo)航，便于觀者快速定位興趣。
2.在html頁面中，添加公司的tag，便于在SEO中被搜索出
2.2 購買域名Domain 購買域名準(zhǔn)確來說，是租賃域名。域名即為一串可以定位你網(wǎng)站的門牌號，前綴可以自己定義 ，只要沒有被人搶先注冊即可，推薦使用英文順序的中文拼音，
我使用的域名服務(wù)商是Godaddy，國外最大的服務(wù)商，平時促銷活動較多，趕上打折的時候，一整套服務(wù)（包括域名、主機(jī)、和其他維護(hù)增值服務(wù)）下來花費(fèi)不會很多。
如果使用國內(nèi)域名商，如騰訊云、阿里云，則需按照中國的法律驚醒域名的備案，此過程很麻煩，會花費(fèi)不少時間。期間服務(wù)商會寄來背景板，需要手持身份證拍照等等。
關(guān)于域名，我們可以自定義的功能還有很多，有子域名、重定向域名、附加域、別名、DNS管理器。
2.3 購買服務(wù)器Host除了定位你網(wǎng)站的門牌號，還需要為你的所有網(wǎng)頁搭建一個存儲的房間，即為主機(jī)（又叫服務(wù)器）主機(jī)服務(wù)商們一般會用存儲容量來區(qū)別售價(jià)。以下圖為例，對于個人網(wǎng)站，Economy套餐已足夠。
*如果作品集展示中有大量視頻內(nèi)容，而且不方便鏈接至第三方視頻網(wǎng)站，例如YouTube、Vimeo，需要上傳至服務(wù)器。則這種情況可能會出現(xiàn)容量不夠用，需要升級套餐。
Godaddy 的 Hosting 服務(wù)價(jià)格一覽其他部分有趣的功能服務(wù)：- 解析訪問者的IP：這項(xiàng)功能可以在申請學(xué)校的時候幫助你檢查，你的目標(biāo)院校何時查看了你的網(wǎng)站，分別在什么頁面停留了多久。
- 加密：可以給自己的網(wǎng)站設(shè)置訪問密碼，只有知道密碼的用戶才可以訪問。
- IP阻止：可以阻止特定區(qū)間的用戶訪問
2.4 作品集中圖片與文字存檔技巧當(dāng)你購買好域名和主機(jī)，就可以開始寫代碼布局網(wǎng)站并填充內(nèi)容了。在此之前，不妨把所有作品集中將要用到的圖片文字整理好，便于后續(xù)版式布局好之后，直接填充內(nèi)容。
建議所有項(xiàng)目的素材（包括jpg、video、等文檔）都按照素材名稱命名、并放在以項(xiàng)目名稱命名的文件夾當(dāng)中。圖片請?jiān)赑hotoshop當(dāng)中保存為web格式，此操作可以在不損傷圖片保真度的同時，盡可能的壓縮圖片大小，提高網(wǎng)頁加載速度。
圖片具體清晰程度可按需調(diào)節(jié)，原則是越小越好
3. Html構(gòu)建結(jié)構(gòu)
沿用上文的比喻，網(wǎng)址website是網(wǎng)站的門牌號；主機(jī)Host是網(wǎng)站的戶型容量；那么Html就是網(wǎng)站的骨架，即毛坯房；CSS則是所有的裝潢裝修；你需要展示的作品圖片文字是所有的家具；剩下的JavaScript則是房子內(nèi)的鳥語花香（交互動效等）。
3.1 編輯軟件常用的Html編輯工具有很多，我自己親身試用下來，推薦 Code2（我在ACCD上WEB課的老師也推薦這款軟件），非常的輕量，適合初學(xué)者，并且可以直接鏈接FTP服務(wù)器，上傳文檔，實(shí)時發(fā)布。
Coda 2 售價(jià)為$99, 在Live中發(fā)放了綠色版，供教學(xué)使用。
3.2 推薦教程因?yàn)槲恼缕邢?，所以在此不具體講解html，提供教程參考，如有問題可以在文末取得聯(lián)系支持。
w3schools：A very nuts and bolts HTML construction site. 這是一個類似于詞典一樣的參考書，里面有html所有的tag用法和小案例。
以下介紹一些html的基本構(gòu)架，<>內(nèi)的是標(biāo)簽tag：以<>開始，并以 </>結(jié)束。當(dāng)中的是內(nèi)容，不同的標(biāo)簽給內(nèi)容定義了不同的屬性。網(wǎng)頁的骨架就是由這些不同的屬性組成的。就像一座房子一樣，有地基，有房梁，有承重墻，有屋頂組成。
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 優(yōu)化CSS的編譯語言和編輯器詳細(xì)講解略4.2 借用現(xiàn)成的CSS樣式庫同樣是套用模版，但和第三方平臺服務(wù)商不同的是，你下載的只有html和css文件，需要自行打開編輯器修改代碼。對于基礎(chǔ)較弱的同學(xué)來說，這是一種快速自主建站的方式，幾乎只需要看懂代碼，然后替換文字圖片內(nèi)容即可。
詳細(xì)講解略4.3 如何讀取別人的CSS效果使用chrome查看頁面元素的css樣式 - Wayne-Zhu - 博客園
5. 進(jìn)階學(xué)習(xí)
5.1 JavaScript：讓網(wǎng)頁活起來JavaScript 教程 基礎(chǔ)知識
有許多公開的庫可以供大家使用，three.js是實(shí)現(xiàn)3D效果 jQuery
three.js - Javascript 3D library
5.2 搜商：如何找到優(yōu)秀作品集網(wǎng)站除了學(xué)習(xí)如何搭建網(wǎng)站、如何搭建一個交互順暢的網(wǎng)站，我們還需要參考許許多多優(yōu)秀的作品集網(wǎng)站，學(xué)習(xí)它們?nèi)绾尾季猪?xiàng)目，突出重點(diǎn)。
這邊提供幾種搜索方法供參考：
- Linkedin > search >"example" in people>
在領(lǐng)英上搜索公司／職業(yè)，通過定位公司／人來查看相應(yīng)作品集
有些設(shè)計(jì)師會在LinkedIn中列出自己的作品網(wǎng)站，通過則個方法還可以看到他們的職業(yè)成長路徑- University Web > Program > Gallery > Student Intro
尋找你感興趣的院校專業(yè)，通過優(yōu)秀作品／優(yōu)秀畢業(yè)生定位設(shè)計(jì)師，查看他們的作品集
以RCA Service Design為例，在學(xué)校官網(wǎng)上有優(yōu)秀畢業(yè)作品介紹，會有設(shè)計(jì)師作品集網(wǎng)站的鏈接- INS 和 微博 這樣的社交平臺上也會有設(shè)計(jì)師公開他們的信息，插畫師、漫畫家使用這類平臺較多，比較便于圖片傳播。
上海視覺藝術(shù)學(xué)院 副教授 許一兵 在個人微博信息欄中公開了作品網(wǎng)站其他的networking方式還有很多，總而言之，通過學(xué)會在SEO的關(guān)鍵詞檢索指令，可以幫助你提高獲取信息的途徑和效率。
這是我搜集的優(yōu)秀設(shè)計(jì)的作品集網(wǎng)站，從交互設(shè)計(jì)開始，以后陸續(xù)會更新其他設(shè)計(jì)方向：工業(yè)設(shè)計(jì)、平面設(shè)計(jì)、建筑設(shè)計(jì)。歡迎大家可以直接伸手索取。
5.3 針對留學(xué)申請的作品集網(wǎng)站Tips詳細(xì)講解略6.資源集合
詳細(xì)講解略歡迎大家支持目前5星好評的Live“從零自學(xué)搭建個人作品集網(wǎng)站”～
添加個人微信：tangstrategist
在線咨詢
