告訴你如何架設網站！架設網站前需要做些什麼？

來到分享私藏的時候了！今天主廚要跟大家分享架設網站的心路歷程，雖然從架設到現在才過沒多久，但當初也是費了一番功夫，趁著記憶猶新的時候，趕緊把好用的資源跟經驗分享給大家。廢話不多說，我們趕快開始吧！

架設網站是不是很困難？

我想大多數人聽到自己架設網站，多半都會想說不容易吧？

主廚覺得說難也不難，說簡單也不簡單。如果使用Wix或WordPress架設的話，已經有很多人在網路分享教學，中文資源也足夠豐富，只要你想的話，一定可以把網站架起來，剩下的就是你願意投注多少時間。過程中難免會遇到問題，如果你看的教學沒有提到怎麼解決這個問題，那你得花更多心思尋找解法，一直解不出來的話，也許會有人在這邊放棄。

不過現在的工具已經進步到即使不會程式也能架設，網路上也有很多資源能夠參考，大部份的問題都可以找到解答。如果架設網站是一條披荊斬棘的道路，前人已經斬光路上的荊棘了，被路上的小石子絆倒就放棄的話多少有些可惜。要是遇到不會的問題，不妨多花點時間試試，還是解不出來的話，也可以找主廚聊聊喔！

架設網站前要做些什麼？

做完心理建設後，我們到底要怎麼開始呢？

首先，我們要對即將架設的網站有個藍圖！

這個藍圖不用鉅細靡遺，但要能勾勒出整個網站概念。事前規劃做的越完整，實際架站的時候就會越輕鬆，也會減少反覆修改的時間。俗話說好的開始是成功的一半，那這張藍圖究竟要有什麼元素呢？

我們可以把網站的概念規劃分成內容與版面兩大部分。

架設網站前的內容規劃該怎麼做？

在內容規劃上可以先思考這個網站的用途，也就是你創辦網站的目的，可能是公司需要網購平台或是單純想要個人部落格。用途會決定整個網站的大方向，下一步就是你想呈現什麼內容，也許是公司產品、個人興趣等等。以科技雞湯為例，主廚把科技雞湯定位成推廣平台，內容主要是跟產品、科技相關。

到這邊也不會有太大問題，不過也許你很快就會想到下個問題。打個比方來說：

假如我打算經營跟料理相關的個人部落格，到底該怎麼規劃內容呢？

雖然已經把規劃範圍縮小到料理，但料理種類多不勝數，用到的技術也不大相同。正因為範圍太廣才會感到困擾，所以我們接下來該做的就是加上一些限制，把範圍進一步縮小。至於該做怎樣的限制，主廚建議把專長當作內容規劃的基礎，並依據不同受眾作內容安排。

為什麼要以專長為基礎呢？打個比方來說，今天有位重要客人來訪的話，身為主廚的你肯定會端出招牌菜，因為這最能呈現餐廳特色，容易給人留下好印象。而網站內容也是一樣的道理，以專長作為出發點，比較容易言之有物，展現自己的獨到見解。專長不見得是艱澀的技術，也可能是你個人愛好，而你在這個愛好上比別人多懂一點，這樣就足夠了。

不過以專長當作基礎的同時，也不要忘記受眾是誰。正因為我們在這方面比別人多懂一點，才要好好安排內容。舉個例子來說，以一般大眾做為受眾，內容要盡量淺顯易懂；如果針對專門人士，內容可以寫的深入一些。

把握這個原則，我們再回過頭來看看上述問題。如果你特別擅長中式料理與日本料理，不妨把這兩項當作內容規劃的起點，圍繞這兩個主題來建立子題，可以把中式料理細分成川菜、浙江菜等等。決定好內容架構後，再針對不同受眾做內容上的調整。如果受眾分別是想學中式料理的人、想知道哪裡有好吃日本餐廳的人，那對應的內容形式可以是食譜跟食記。

像這樣把專長當成內容規劃的基礎，並依據不同受眾來做內容上的安排，就可以在架設網站前順利規劃內容！

架設網站前的版面規劃該怎麼做？

不用多說，網站內容絕對是非常重要的，但如果網站版面好看可以大大加分！

說是這樣說，我們該怎麼規劃版面呢？不是設計出身的人恐怕都會感到苦惱。預算充足的話，當然可以外包給專業人士，但如果沒這預算，又想要一個看起來還行的網站，外行人該如何著手？主廚當初也有同樣的問題，一起來看看主廚是怎麼做的吧！

版面規劃的第一步就是決定網站風格，像是時尚風、商業風、普普風等等。如果跟主廚一樣是個外行人，光是了解這些風格就要花上不少時間，更甭提在自架網站中套用這些風格。所以最快的方法就是參考同類型網站風格，邊看邊學習這些網站怎麼設計版面。若你已經決定使用Wix或WordPress，也能直接看架站平台中的佈景主題，如果有你喜歡的免費主題，恭喜你！可以直接套用就好！如果沒有找到滿意的免費主題，那你可能得多花點功夫。而你在過程中也許會遇到一個問題：

每個佈景主題看來看去總是有些地方滿意，有些地方不太滿意。

面對這個問題，主廚的做法是每看一個網站就把覺得不錯的設計記下來，之後製作網站的時候，再把這些元素組合起來。不過這樣會衍生一個問題，儘管元素個別看來不錯，但放在同個版面未必好看，因為它們來自不同風格的網站。為了解決這個問題，我們要統一整個網站的風格，讓這些元素在這個風格下呈現。

看到這兒，你可能會有些疑惑。結果說來說去，還是要花時間鑽研時尚風、普普風這些風格嗎？能花時間了解這些設計風格肯定有幫助，但如果你想速成的話，我們可以把風格分成排版、配色、LOGO(素材)這幾項來看。

善用排版來打造專屬風格

做排版之前可以先了解網站頁面的組成，如圖1所示。一個網站頁面通常都會包含Header、Footer、Sidebar、Content。這些欄位可視需求保留或移除。如果想知道有哪些常用的頁面編排方式，可以參考即時互動科技這篇《淺談網頁版面設計編排》。

決定頁面編排方式後，文字排版也要力求統一，頁面的文字排版不同容易給人凌亂的感覺。底下是文字排版的相關建議，若想深入了解文字排版對頁面影響，可以參考CTK這篇《給客戶看的網站設計（一）字級大小對網頁樣式的影響》。

1. 建議中文字可以選用微軟正黑體或是Google推出的思源黑體
2. 需區別標題與內容的字體大小
3. 段落間的文字取適當行距(通常為字級1.5倍 – 2倍)

利用配色凸顯風格特色

如果對配色沒有經驗的話，建議網站色調選擇1 – 3種顏色作為主色調，並使用主色調的近似色作為輔助色系。像是科技雞湯本身選用黑色與桃紅色作為主色系。如果您本身在色彩搭配上很有經驗，主色調超過3種也沒問題。若沒有經驗的話，這樣的配色方式可以讓你輕易配出想要的風格。打個比方來說，你想要整個網站看起來輕快明亮，可以選擇暖系色調作為主色調。

再來聊聊輔助色，前面有提到使用近似色作為輔助色，使用輔助色可以表現出設計上的層次感或是區別不同項目。那我們要怎麼找出近似色呢？我們可以從Coolors這個網站來找輔助色，若對配色沒有太多想法，也能從Coolors看看配色建議喔！Coolors的操作說明可參考這篇文章《Coolors：自動配色的線上工具，快速產生合適的色票》。

好的LOGO可以替網站加分

一個網站有沒有LOGO是相當重要的，好的LOGO可以凸顯網站特色並加深印象，讓訪客更容易識別出你的網站，這個部分在品牌設計中又稱為企業識別系統(Corporate Identity System)，簡稱CIS，包含前兩段的版面與配色，其實也都是CIS的環節之一。同樣道理也能套用在網站經營上，而設計LOGO最重要的就是把網站概念轉化成圖像，進一步提升網站辨識度。

要設計出好的LOGO肯定不容易，要考慮圖像、色彩、文字、排版、像素等等，甚至連色彩都要有標準的色碼。如果有預算的話，外包給設計師肯定是較佳選擇。但沒有預算的話也能試著用下列方法做出自己的專屬LOGO喔！

第一個方法就是透過LOGO線上工具來設計。現在也有很多能夠設計LOGO的線上工具，詳情可以查看《10個網站logo設計工具推薦！自己也能製作專業級商標》，這些線上工具有的免費，有的收費，LOGO所有權也要看網站規定，這部分就得自己斟酌看看。

第二個方法就是自行繪製LOGO。聽到這兒，你可能會覺得不會畫畫是要怎樣設計LOGO？

別急別急，主廚並不是要你自己畫一個。網路上有免費素材可供個人或商業使用，就算不會設計LOGO，只要你對LOGO有些想法，就可以用免費素材組成專屬LOGO。

這邊主廚分享一個尋找免費素材的方法，如圖2所示。假設今天要找熊貓的icon，可以先在Google圖片搜尋打上關鍵字panda icon，接下來你會看到滿山滿谷的熊貓icon，這時候找到的icon不管有沒有版權都會出現。為了要找免費素材，我們接下來點選工具，並從下方頁籤中的使用權選擇創用CC授權。

有沒有發現圖片搜尋結果不太一樣了？這時出現的都是有CC授權的圖片。如果不清楚什麼是創用CC授權的話，可以參考這篇《創用CC是什麼？》。那不管有沒有經營網站，相信大家都曾擔心自己引用圖片的方式是否侵權，怎樣引用圖片才算是合理使用呢？這邊先讓主廚賣個關子，未來會做更詳細的解釋。

主廚結語

看完這篇文章，是否對架設網站前的準備工作多了點認識呢？每個人架設前的準備也不盡相同，只要找到適合你的方法就好。若你對架設網站的事前規劃沒有太多想法，希望這篇文章可以幫助到你。在講完架設網站的事前規劃後，下一步就是要來實際製作網站！那製作網站到底有哪些步驟？我們又該如何做呢？待主廚下回分曉！