20分鐘完成作品集網站架設，手把手帶你用Portfolio架設專業 ...

幾乎每個設計師、創作者都會希望能將自己的作品整理成線上作品集，好讓自己的作品 ... 網站排版、顏色、背景、字體設定; 網站容器; 網站名稱/標誌; 導覽列/選單; 頁尾. 跳至主要內容 首頁 自由工作者 20分鐘完成作品集網站架設，手把手帶你用Portfolio架設專業作品集 20分鐘完成作品集網站架設，手把手帶你用Portfolio架設專業作品集  幾乎每個設計師、創作者都會希望能將自己的作品整理成線上作品集，好讓自己的作品有更多曝光機會，面試工作或接案子時，直接讓公司或客戶瀏覽線上作品集也能建立更專業的形象，幫自己大大加分。

 不過架設作品集網站，對許多不懂寫程式的創作者來說，聽起來就挺頭痛的，外包給工程師架設又要花上好大一筆費用，許多人因此選擇在Facebook或Instagram申請帳號經營粉專當作自己的作品集，但社群平台的性質和格式的限制卻無法為自己的專業加分。

 因此這篇文章的目的就是要幫助創作者用AdobePortfolio架設出自己的作品集網站，別擔心，你不需要學會寫程式，平台的操作也十分簡單，就算是3C白癡也能完成具有自己風格的作品集網站架設喔~ 那我們就從頭開始，跟著步驟一步步完成作品集網站吧！  文章目錄 為甚麼選擇用AdobePortfolio架設作品集網站？ 適合甚麼人？不適合甚麼人？AdobePortfolio架站需要多少費用？登入Portfolio，選擇網站主題網站設置網域名稱首頁分析搜尋最佳化最愛圖示WebClip圖示 社交分享縮圖 帳戶和地區解除發佈網站 建立網站頁面製作收藏集製作頁面 製作歡迎頁面 製作聯絡頁面 管理所有頁面從Behance或Lightroom匯入網站視覺排版設定 網站排版、顏色、背景、字體設定 網站容器 網站名稱/標誌 導覽列/選單頁尾GoogleAnalytics分析網站數據網站上線 為甚麼選擇用AdobePortfolio架設作品集網站？ 架設網站的平台非常多，在網站上搜尋「架設網站」關鍵字，會出現一大堆讓人眼花撩亂的選項，往往只會讓搜尋者感到更困惑，不知道哪個方式最適合自己，下方是較為常見的平台及架站方式比較圖。

作品集網站架設方法比較圖 如上圖所示，使用Adobe的Portfolio這個平台架站，可以做出較具風格與質感的作品集，比起使用社群媒體或是直接上傳設計師社群平台更為專業；而比起Wordpress這樣的內容管理系統或語法架站又更為簡單好上手，適合單純想展示作品的設計師、創作者族群。

 而我之所以選擇用Portfolio架設作品集網站，不考慮其他架站平台還有幾個原因：  熟悉度：Adobe系列軟體對設計師來說通常都不陌生，因此使用Adobe的Portfolio也較容易上手。

便利性：若是已經有使用Behance的創作者，可以直接從Behance導入作品。

獨特性：Portfolio內建有Adobe開發的Typekit網站字體，包含數以千計的英文字體以及多種中文字體，讓你的網站更具美觀與特色。

附加價值：訂購AdobePortfolio的用戶可以免費使用Photoshop與Lightroom兩款設計軟體，並享有20GB的雲端儲存空間，對設計師、攝影師來說非常便利實用。

綜上所述，我認為AdobePortfolio是非常適合創作者的作品集架設平台。

  適合甚麼人？ 用AdobePortfolio架站，適合專注於視覺設計的工作者，例如平面設計師、室內設計師、藝術創作者、攝影師、服裝設計師等等。

Portfolio可以幫助你架設一個很好的線上展示空間，讓更多觀眾欣賞你的作品，並且能讓你的作品以更有個性、質感的方式展現。

不適合甚麼人？ 用AdobePortfolio架站不適合需要複雜網頁功能的人，例如放置商品、使用購物車、金流、社群等技術。

如果你希望能直接在網站上販售你設計的商品，那Portfolio這樣單純提供作品展示的架站平台就不適合你。

  AdobePortfolio架站需要多少費用？ AdobePortfolio有60天的免費試用，試用期過後你需要購買AdobeCreativeCloud的「所有應用程式」或「攝影」方案來繼續使用你的Portfolio。

S女王推薦大家購買攝影方案，一個月只要NT$326就能同時擁有Portfolio網站、Photoshop、Lightroom軟體以及20GB的雲端儲存空間，非常划算！ 查看價格方案  如果還不確定是否要購買，可以先把網站架設起來後再付費喔~對Portfolio有了基礎認識後，我們就開始架設作品集網站吧~  登入Portfolio，選擇網站主題 點選下方按鈕進入AdobePortfolio 登入Portfolio 點選「免費開始使用」 進入之後會要你選擇一個佈景主題，這個主題也就是你的網站外觀，但不用擔心，佈景主題可以隨時在網站控制台裡更改。

  點選你喜歡的主題，便可以預覽網站的風格，你可以點進頁面看看排版的方式喜不喜歡，左上角也可以切換不同裝置上的瀏覽畫面，例如手機跟平板。

選擇好主題後點選右上角「使用此主題」。

選擇好佈景主題後，會出現登入畫面，如果你已經有Adobe帳號，可以選擇使用AdobeID登入，沒有的話就選擇其他登入方式。

一個帳號最多可以同時架設並管理5個網站。

登入後會出現更新的使用條款，下方勾選我已閱讀並接受使用條款，點選「繼續」。

網站設置 接下來進到的頁面就是我們網站的控制台。

控制台的右側就是我們網站的外觀，包括網站標題、選單和每一個頁面。

左側則是製作網站的各種選項和工具。

首先我們要對網站做基本的設置，點選左側工具列的「設定」選項。

網域名稱 左上角點選「網域名稱」，這裡你可以自訂你的子網域名稱，但網域名稱統一為myportfolio，也就代表你的網站是在myportfolio底下的子網域，若希望自訂網域名稱的話則要另外付費，你可以點選「購買網域」，購買你想要的名稱。

子網域可更改五次，自訂網域需另外付費 有些人會好奇，自訂網域名稱有甚麼好處？為甚麼需要另外付費？網域名稱會影響到搜尋引擎、網路使用者識別、網站品牌形象等因素，因此，若你希望藉由這個作品集建立個人品牌，藉由搜尋引擎優化的方式提高網站權重，讓更多人瀏覽你的網站的話，自訂網域名稱會是比較好的選擇。

但如果只是希望架設一個展示作品的線上空間，不考慮競爭關鍵字排名的話，就不須另外購買網域。

想更了解網域以及對網站的影響可以參考這篇文章👇🏻主網域、子網域、網域寄放和附加網域是什麼？對SEO有何影響？設定網域或子網域名稱時，盡量選擇簡短好記的名稱，網址看起來會更簡潔漂亮，也容易讓造訪者留下記憶和好的印象。

設定好子網域名稱後，記得點選右方「套用」保存設定。

首頁 左上角點選「首頁」，這裡可以自訂訪客造訪時出現的首頁以及出現錯誤時的頁面，但需要在我們製作好頁面、發佈網站後再回來設定。

分析 如果你希望藉由GoogleAnalytics分析你的網站流量，可以點進「分析」，在這裡輸入你的追蹤碼。

至於如何申請追蹤碼以及GoogleAnalytics的功能，會在文章的後面教大家。

搜尋最佳化 左側點選「搜尋最佳化」，這裡的設定會影響到搜尋引擎優化，也就是決定使用者能不能容易根據他們輸入的關鍵字找到你的網站。

如上圖，「網站標題」的欄位打上你整個網站的標題，它會直接出現在你的頁首上方。

「Meta描述」的欄位裡，你需要介紹你的網站提供什麼樣的內容或服務，當使用者搜尋到你的網站時，它會出現在標題的下方，如下圖所示👇🏻 網站標題和Meta標籤圖示 「Meta關鍵字」的欄位，可以填上你的網站關鍵字，這個關鍵字只是讓搜尋引擎知道你的網站內容，所以只要精確簡短地描述你的網站就行了。

輸入完成後下方兩個選項記得打勾，點選「完成」。

最愛圖示 點選「最愛圖示」，可以上傳你希望顯示在網頁瀏覽器標籤中的圖示，如下圖左方的logo圖示。

最愛圖示示意圖 請注意圖示必須為正方形，且不能小於32×32像素。

WebClip圖示 點選「WebClip圖示」可以上傳行動裝置主畫面上的圖示，如下圖的應用程式圖示👇🏻 WebClip圖示示意圖 請注意圖示必須為正方形，且不能小於180×180像素。

社交分享縮圖 點選「社交分享縮圖」，這裡上傳的影像會成為在社交媒體上分享你的網站時看到的預覽影像，你可以選擇精選的作品照片或是個人風格的商標。

帳戶和地區 點選「帳戶和地區」，這裡你可以更改你的付款帳戶資訊以及所在國家地區。

解除發佈網站 若你需要解除發佈你的網站，可以點選這裡「解除發佈網站」。

（不要太快放棄啊！！)  建立網站頁面 做好網站的基本設置後，最重要的當然就是把我們的作品分門別類放進來，在portflio裡，你可以建立無數個頁面，再建立不同類別的收藏集將所有頁面進行分類。

下圖是我做的範例。

頁面結構示意圖 如圖所示，在這個攝影作品集裡，我建立不同活動類別的收藏集，如音樂、舞蹈、商業活動等等，再將每個案子的攝影作品製作成子頁面放在所屬類別的收藏集裡，這樣方便觀看者找到他們想看的內容。

而我將第一個收藏集設為首頁，裡面放一些精選的作品，讓觀看者可以先在首頁瀏覽我的作品風格，這部分可以因人而異。

另外我也製作了歡迎頁面和聯絡頁面，當然這完全取決於你的需求，你也可以依你的需求建立更多獨立頁面。

那就來看看怎麼製作這些頁面吧。

製作收藏集 點選左側工具列「頁面」，這裡你可以檢視所有收藏集和頁面，點選右下角的 你可以選擇要新增的選項，這裡我們點選「收藏集」。

輸入收藏集標題，若你想將此收藏集設為首頁，下方選項可以打勾，然後「建立收藏集」。

新增之後你會進入這個空的收藏集頁面，在這下面你可以點選「新增頁面」來放置不同作品。

 在工具列的最下方「所有收藏集」可以編輯所有收藏集的樣式和顯示的內容，你可以先在這裡做好設定，再到每個收藏集裡製作不同的細節。

首先，點選「頁面封面」→「版面選項」，這裡可以設定一欄裡容納的頁面封面數量，如上圖所示。

也可以調整封面與封面之間的間距和預留的邊界寬度。

若想調整頁面封面的尺寸，進到「頁面封面」→「長寬比例」裡做調整。

 回到「頁面封面」→「封面影像」，可以將封面加上圓角修飾，並設定滑鼠覆蓋時的影像顏色。

收藏集右下角的「返回頁首」圖示，幫助觀看者快速回到頁面上方，你可以點選左上角或點選所有頁面下方「返回頁首」修改其樣式。

若你想單獨修改特定的收藏集，點進你想修改的收藏集，在左側「此收藏集」下方選擇你要修改的內容。

你可以點選「收藏集背景」為收藏集加上一個背景圖片，但記得以頁面容易閱覽為主，不要太過複雜。

在收藏集裡加入刊頭，它會出現在頁面最上方，點選「刊頭」→「刊頭背景」可以設定刊頭的背景圖片並調整透明度，你也可以在這裡選擇希望在刊頭上顯示的資訊。

刊頭完成後如下圖的效果👇🏻 製作頁面 點選「新增頁面」 這裡你可以選擇自製頁面或直接從Lightroom匯入相簿，這也是我推薦大家選擇攝影方案的原因，Lightroom可以大量的修圖、整理照片，對設計工作者來說是很方便的工具，如果你在Lightroom裡處理完照片的後製，便可以在這裡直接將照片上傳。

輸入頁面標題，選擇所屬的收藏集，點選「建立頁面」。

. 進入新增的頁面後，下面有許多選項，這些都是可以放在頁面裡的內容，你可以依你的需求去組合這些元素，比如插入影片、文字說明、超連結、社交圖示等等。

  如上圖所示，我在頁面裡放了影像和相片拼貼。

當你想繼續新增頁面內容時，把滑鼠移到下方，會出現，點選便可新增。

在頁面裡，你可以點選每個物件左上角的圖示對物件進行編輯，你可以自由調整欄位寬度、高度、圖片大小、字體、對齊方式等等。

點選圖片左上角，你也可以替每張圖片新增連結或文字註解。

點選頁首左上角→「編輯頁面資訊」，在頁面描述的欄位輸入你的作品內容簡介或資訊。

頁面日期可以選擇作品的完成日期，自訂欄位可以多加上其他資訊，最後在關鍵字的欄位輸入作品的關鍵字。

點選左側工具列裡所有頁面下方的「頁首」，這裡可以調整頁首的寬度、高度，以及選擇要顯示哪些欄位。

  滑到頁面下方，你會看到「增加更多內容」的欄位，這裡是portfolio內建的欄位，它會推薦觀看者其他頁面吸引他們繼續瀏覽網站。

點選所有頁面下方「增加更多內容」，這裡可以修改它的排版並選擇要顯示的資訊。

點選「區段標題」，這裡的預設是「Youmayalsolike」，你可以改成你想要的標題。

返回頁首選項與收藏集相同，你可以點選左上角或點選所有頁面下方「返回頁首」修改其樣式。

要注意的是，這裡修改的所有內容會套用到其他頁面上，若你希望單獨修改頁面，就到左側「這個頁面」下方選擇要修改的項目。

與頁面相同，你可以為每個收藏集加上刊頭，將「刊頭」的選項取消隱藏，選擇圖片並設定顯示內容即可。

   製作歡迎頁面 歡迎頁面是一個全螢幕的登陸頁面，也就是使用者點進網站後所出現的第一個頁面，它可以幫你建立一個網站的第一印象，再引導使用者繼續瀏覽你的網站。

如果你想製作歡迎頁面的話，點選左側工具列的新增頁面。

點選「歡迎頁面」。

左側可以選擇版面，輸入頁面標題後點選「建立頁面」。

在歡迎頁面裡你可以依照它原本的版型去放置內容，也可以自由插入其他影像、圖片、連結等等，方法就跟一般頁面裡一樣。

如下圖。

在歡迎頁面裡你會希望將觀看者引導至你的首頁或其他精選頁面。

這時點選按鈕左上方的圖示編輯按鈕。

在連結至的地方選擇你的首頁，或其他你希望引導觀看者前往的頁面。

完成後就是基本的歡迎頁面了，你可以再用自己的風格編輯細節及排版，但要記住它的目的是快速地讓觀看者了解你的網站內容、風格，吸引觀看者點進你的網站瀏覽。

  製作聯絡頁面 聯絡頁面提供對你的作品有興趣或想洽談合作的人聯繫你的管道，所以十分重要，建議大家的網站保留這個頁面。

聯絡頁面通常都是預設好的頁面，你可以直接點進來進行編輯。

如同子頁面一樣，你可以移動滑鼠到想要的位置點選自由插入任何你想要的內容。

點選聯絡表單左上角的，再點選「自訂」，會進到聯絡人表單的設定畫面。

這裡你可以新增其他欄位讓想與你聯繫的人輸入你需要的資訊。

進入「表單選項」，電子郵件的欄位輸入你的信箱，聯絡人填的表單就會寄到你的信箱。

這裡也可以調整表單的寬度和對齊方式。

  進入「表單標籤」，可以調整表單項目的字型顏色及欄位高度等等。

進入「表單欄位」，這裡可以調整欄位的字體和欄位。

進入「提交按鈕」，這裡可以更改按鈕的外觀。

進入「提交後的訊息」，這裡輸入的文字內容會出現在聯絡人點選提交後，你可以自行設定內容。

 設定後記得點選「完成」，就完成你的聯絡頁面了，當然你可以在頁面裡做更多設計，但記得讓表單保持簡潔，讓聯絡人可以很方便的輸入資訊聯繫你。

   管理所有頁面 點選左側工具列「頁面」，在這裡你可以檢視所有的收藏集和頁面。

按住左邊的圖示可以拖曳移動它們，調整你想要的順序。

點選圖示可以編輯名稱或刪除頁面。

右邊的可以讓你關閉頁面不在網站裡顯示。

當你想新增收藏集或頁面，你也可以直接點選右下方的進行新增。

  從Behance或Lightroom匯入 如果你原本就是Behance或Lightroom的使用者，可以選擇直接將Behance或Lightroom上的內容匯入成為頁面。

 點選左側工具列「整合」，如果你已經購買攝影方案，下面會出現「新增相簿」，點選直接將相簿匯入。

    網站視覺排版設定 在前面我們看完了基本功能，也新增了收藏集和頁面，現在就要來設定整個網站的視覺和排版，在左側工具列的「整個網站」下方，你可以設計整個網站的視覺外觀。

網站排版、顏色、背景、字體設定 首先點選「背景、顏色和字體」，這裡可以設定整個網站的顏色、字體，也可以直接上傳圖片當網站背景。

  在字型下面點選「新增字型」，這裡你可以找到數千種不同的字型，不需再另外下載，這也是AdobePortfolio的一項優勢，你的網站可以更具美觀與特色。

網站容器 左側工具列點進「網站容器」，這裡可以調整整個頁面的內容寬度以及邊界寬度，你可以依你的需求排版，但建議不要把內容排得太擁擠，才能讓觀看者瀏覽網站時有好的體驗。

網站名稱/標誌 直接在網站標題的左上角點擊或在左側工具列點選「標誌」，可以設定你的網站標題樣式以及邊界。

在連結至的地方選擇點擊標題後進入的頁面，通常會設定為首頁，這樣方便觀看者在觀看其他頁面時點擊標題回到首頁。

  導覽列/選單 導覽也就是出現在你網站頁首上方的選單，方便觀看者找到他們想看的內容，如下圖用紅線框起來的部分就是我的導覽列。

想編輯導覽列，移動滑鼠點到導覽列左上角的選擇「自訂」，或在左側工具列點選「導覽」→「導覽容器」。

進到導覽容器裡可以調整導覽列的樣式、寬度和邊界。

若將固定導覽下方選項打勾，往下滑動頁面的時候導覽列就會維持在上方。

 回到工具列的「導覽」，你可以選擇要顯示在導覽列上的內容，這裡我把子頁面標題隱藏，只顯示主要的收藏集和頁面供瀏覽者點選。

每項標題也可以直接點進去修改樣式及邊界。

如果你想在導覽列裡加上社交圖示，方便瀏覽者點擊你的其他社群媒體，也可以點進「社交圖示」裡貼上你的社群媒體網址。

  頁尾 頁尾指的就是整個網站頁面的底部，預設的內容會有PoweredbyAdobePortfolio的字樣，你可以進行編輯放上你想要的內容。

點選工具列裡的「頁尾」，這裡你可以刪掉預設的內容，加上你想要的文字，也可以更改樣式及寬度。

若想在頁尾加上社交圖示，可以開啟頁尾下方的「社交圖示」，並貼上你的社群媒體網址。

  GoogleAnalytics分析網站數據 完成所有頁面的製作和網站設計後，我們就要來幫網站申請GoogleAnalytics，GoogleAnalytics是Google提供幫網站分析數據的工具，你可以透過它分析你的網站流量、跳出率、觀看者觀看時間等等，若你沒有分析網站數據的需求，也可以直接跳過這一段喔！ 搜尋googleanalytics，點擊第一個選項。

進入後點選「免費設定」。

這裡你會需要填入帳戶名稱，直接輸入你的姓名即可。

這裡選擇「網站」，點擊下方「下一步」。

填入「網站名稱」以及「網站網址」，注意前面要選成https://，選擇產業類別，完成後點選「建立」。

這時會跳出服務條款合約的視窗，點選「我接受」。

建立完成後你會得到上方這串追蹤ID，將它複製起來。

回到我們的網站，左側「設定」→「分析」，在這裡將追蹤ID貼上，點選「套用」。

這樣就完成了。

之後你可以進入GoogleAnalytics分析你的網站數據，上方使用者代表網站的流量，也就是瀏覽你的網站的總人數；跳出率指的是瀏覽者瀏覽你的網站時離開的比例，所以越低代表你的網站越能吸引觀看者瀏覽；工作階段持續時間指的是瀏覽者的平均造訪時間。

 其他更詳細的數據你可以在左側的目標對象、客戶開發、行為等地方找到，這裡就不多加贅述。

 如果對GA分析網站數據有興趣，希望了解更多的話可以參考這篇文章👇🏻GA(GoogleAnalytics)實用教學，快速掌握7大重點分析指標 這部影片內也有詳細的說明👇🏻 網站上線 所有步驟都完成後，我們就可以將網站上線了！ 回到我們的網站控制台左下角，你可以先點選「預覽」看看是否滿意，沒問題的話就點選「發佈網站」。

出現這個畫面後就完成網站上線了，趕快到你的網站上看看吧！你也可以隨時回來修改內容，只要在編輯完成後點左下方「更新線上網站」就行了。

希望大家都完成了自己的作品集網站，其實Portfolio的介面非常容易上手，使用方式很直觀，不同於其他市面上的架站軟體，需要花很長時間熟悉複雜的介面，對不懂網站的創作者來說非常友善。

架設好網站後也別忘了訂閱Adobe的「攝影方案」或「完整應用程式」，以免試用期結束後就無法使用了喔！ 訂閱方案 有其他關於架站的問題，歡迎在下方留言~你的問題也許能幫助到其他人喔！期待大家都做出具有自己特色風格的作品集網站！也把文章分享給需要建立作品集的朋友吧~ 延伸閱讀： 如何成為自由工作者？8個你需要具備的核心能力 10本自由工作者必讀書籍推薦，想從市場中脫穎而出就先讀完它們 自由接案三年，我用血淚換來的報價心法    實踐僧人心態後，我的人生有什麼轉變？ 2021-10-16 尚無留言 如果你覺得自己的生活陷入了汲汲營營 ReadMore» 自由工作者，你思考過自己的商業模式嗎？ 2021-09-14 尚無留言  「商業模式」（Business ReadMore» 大學生該打工嗎？最完整分析&過來人親身經歷分享 2021-08-26 尚無留言  離家唸大學到出社會的 ReadMore» 8款低成本桌上型麥克風推薦&簡易調音教學輕鬆調出高質感音頻 2021-08-18 尚無留言   在這個 ReadMore» 窮人如何翻身？努力向上真的有用嗎？我的真實經歷分享 2021-07-14 2則留言  我出生在弱勢家庭，從 ReadMore» 疫情結束後，一人公司的時代才正要來臨，你準備好了嗎？ 2021-07-06 尚無留言   在《一人公司》這本商業書籍 ReadMore» 文章導覽 上一篇文章下一篇文章 PostaComment取消回覆 在瀏覽器中儲存顯示名稱、電子郵件地址及個人網站網址，以供下次發佈留言時使用。

搜尋本站 搜尋關鍵字: 搜尋 NewPost 實踐僧人心態後，我的人生有什麼轉變？ 自由工作者，你思考過自己的商業模式嗎？ 大學生該打工嗎？最完整分析&過來人親身經歷分享 📌優質線上課程 SQueenBetterSelf