終極聖經【網站架設、網頁設計】
必看的２０個教學
更新日期：2022-06-15

常用網站架設平台、工具？

架設網站會有分平台及工具二種，平台是指某間公司提供的網路服務，讓使用者在它們的網站透過拖拉的方式設計網站，例如台灣最大的中華黃頁、智邦、痞客邦、WIX、Weebly。而工具是指打造這些平台用的程式語言，例如Java、Php、C#。對於網路什麼都不懂的人，使用平台的方式架設網站會是最容易上手、最推薦。

3.1 基礎平台

如痞客邦、Medium、Google Blogger、Google協作平台，以上適合個人部落格，玩票性質、練習網站架設（Google Blogger、Google協作平台）、寫文章（痞客邦、Medium）都很適合使用這幾種工具。 預算極低、不懂網站的企業架站工具，則可選擇中華黃頁、智邦生活館。網站架設費用每年1,500上下，就可有一個超簡易的網站，功能極度陽春、網站非常不精緻。唯一的好處是 "有一個網站"。

3.2 中階平台

如 Wix／ Weebly／ Strikingly／ Squarespace／ Webnode／ Godaddy ／ wordpress.com等等的。 這類型網站製作軟體歐美公司設計居多，網站提供完整的前後台功能、專業感也可以、支援度普通、收費中等、難度中等，其中以Wix／Weebly／wordpress.com較為人知。 以上的網站製作軟體都有一個很大的問題，就是"無法搬家"，而且未來受限很多，例如無法加硬體規格、外掛支援不足。再加上SEO效能不易、網站精美度中等、網站細膩度就不足了。

3.3 中高階平台

Wordpress.org，為什麼貴設計將Wordpress.org定義在中高階軟體，因為wordpress.org有著套裝軟體的方便與快速，同時也可以透過修改程式碼做到客製化的功能（需懂PHP語言）。貴設計寫了18年的Java程式語言，最推薦wordpress，以企業架設預算不貴、4萬5~6萬之間就有。在網站的掌控能力又高、網路教學資源又豐富，雖然仍是有幾個缺點，但綜合性價比，網站架設工具仍是最推薦Wordpress.org。

3.4 高階工具

若你不是技術咖可直接跳過，因為這得水很深，邏輯思維要非常強烈，永遠有追不完的新技術（學歷史真好，秦始皇也不會死而復活改寫歷史吧！）。使用的語言如java、php、#net、python等等。高階軟體大都用來開發客製化網站，有80%的中小企業都無需用到這類型的工具，一方面客製化網站設計網頁設計費用貴的嚇死人，二方面只要你不是做網路服務，套版的網站架設工具（如中階or中高階平台）可滿足你80%的網站需求。

套版網站與客製化網站的差異

網站架設費用會有很大的落差除了在網站架設軟體， 另一個原因就是在於套版網站or客製化網站，這二者的特色賣點其實是不同的。 客製化網站與套版網站的差異性，一個是賣彈性靈活、賣客製。另一個是賣快速方便、便宜、功能。

何謂"半"客製化網站?是指在現有的套版版型架構准許下，透過寫程式（CSS、Javascript），調整版型的細節，例如網站元素之間的留白（padding）、邊界（margin）、甚至簡單的程式撰寫。所以最重要的第一步，您挑選版型風格，第二步網頁設計公司會針對部分功能客製，擁有了共識後可以減少視覺設計製作時間，讓您能很快擁有一個網站。 套版最常採用Wordpress架設網站，Wordpress是全世界都在用的網站架設系統，比較容易上手，可以自行做調整網頁，除了Google上可以找到很多教學外，現在也很多人都會Wordpress，很容易找到維護人員，採用Wordpress比一般套版網站更彈性，它們提供很多套件可以使用。此外也可以透過增加CSS、JavaScript的方式做半客製化網站的修改。

網站素材準備

一個精美精緻的網站，精美漂亮的圖片素材必不少，若有預算的話，建議可以找專業攝影師做商品拍攝。若預算不足的，可以去 unsplash下載（影片推薦Pexels）。而文案這部份，若要走搜尋引擎優化（SEO），請確定你的文案必需貼地氣，將網站訪客慣用的搜尋關鍵字置入文章內。若不懂SEO，請將自身產品特色、優勢表達出來。 B2B網站請著重在產品的解決方案、相關證明、檢驗 。B2C的話，請把網站用的美美，吸引大眾歐。網站素材準備方式可參考如下：

1. 網站類型 : 形象官網、電商網站、部落格網站、論壇。
2. 9.1 網站風格 : 簡約風、工業風、雜誌風、可愛風、科技感、時尚感、可愛風。
3. Logo : 如果目前沒有，可以到網路上製作Logo，推薦到DesignEvo，有中文版本，一步一步製作，下載有免費與付費版本，付費版本可以做更多編輯以及擁有權。對於Logo有更多的要求可以請專業設計師處理，大約5,000~12,000不等。
4. 網站名稱、網址、口號、主色系 : 網站叫什麼名字（EX：貴設計）、網址是什麼（EX：web-design.vip）、有無口號（華碩品質）、主色系（如麥當勞是黃色、AirAsia是紅色）
5. 首頁與內頁架構 : 每頁架構就是每頁會分成那些區塊，例如貴設計就分了"主視覺圖文、 網站設計服務 、網站設計6大特色、網頁設計作品、網站設計費用、網頁設計教學"六大區塊，這就是所謂的架構。
6. 導覽列／選單 : 官方網站的目地是提供資訊，所以選單讓訪客在不同內頁之間移動。
7. 部落格 : 這年頭寫文章做內容行銷已經是主流，即使不寫文章，企業也一定會有如最新消息、即將上市、優惠價格等資訊，一般均放置在部落格。
8. 圖片、影音 : 圖片的精美，100%關乎網站的美醜，所以圖片超級重要。除了產品圖片，一般圖片網頁設計公司都會有圖庫，幫你處理這塊 or 到 Unsplash下載。影片有一點要注意，因為影片檔案容量很大，請務必上傳到Youtube，再將Youtube影片網址嵌進網站就可以。不要上傳到網站，網站空間滿了就需額外付費。影片資源可以至Pexels參考。
9. 網站文案 :網站文案即是公司想傳達給客戶的資訊，但有一點要注意B2B的網站在產品頁面需提供詳細且完整的資訊，如相關證明、檢驗、規格書。而B2C的話則聚焦於利用美美的圖文吸引客戶。若略懂SEO的話，強列建議把大家慣用的搜尋關鍵詞加入你的文案內，如此有益於網站的搜尋行銷。
10. 聯絡資訊 : 公司名稱／統編／電話／Email／FB／Youtube／IG／地址／營業時間／合作夥伴網址之類的。

網站文案撰寫

網站架設最難的就是撰寫文案，一方面不是常寫文章、二方面不知道要寫什麼，所以要做網站的企業主，會常常在這步驟卡關很久。 其實只要先有網站選單，再寫每一頁的架構。也就是說架構出來，接著再補肉就好了。接著讓貴設計慢慢跟您分享如何架構你的網站及文案。 網站文案是指，企業想傳達給客戶知道的訊息，而這些訊息一定多又雜亂。例如貴設計是網站架設公司，我們想傳達貴設計的服務、產品、售價、賣點、差異化、公司與創辦人、聯絡方式....一堆等的資訊。那我們要如何整理成文案給網頁設計公司呢？請跟我這樣子做。

1. 統整所有資訊： 請將所有要傳達給客戶的資訊（包含文字、影片、產品圖片）都放在一個word檔，貴設計建議您豐富的網站內容很重要，所以請盡可能寫，寫的多都可以分頁處理，寫的少生意不會好。
2. 資訊分類： 一堆的資訊，那些是產品資訊，那些是公司聯絡資訊，那些是公司理念、介紹等資訊，全都分門別類。
3. 網站選單建立： 一旦資訊分類好之後，留下4~5個最大的分類，並重新命名2~5個字為類別名稱，如此就可以做為網站"選單（又稱網導覽列）"，而選單還能再下拉為”子選單”，參考如下 。
4. 網頁架構規劃 何謂網頁架構呢？我們將貴設計的首頁分成六個主要的區塊（首頁大圖+標語、網站設計服務、網站設計六大特色、網站設計範例、網站設計費用、網站設計教學），這六個就是所謂的首頁架構。 在步驟4.1，我們將資訊分類後，大分類做為網站建立選單，每一個分類完的資訊仍可再做一次小分類，這個小分類就可以做為網頁的架構圖。 所以你要為每一頁思考網頁的架構是什麼。
5. 依架構寫內容： 承4.4，目前已經把整個網站的架構都已經生出來了，例如首頁的六個主要區塊，接著再開始補文案即可。接後每一頁都是同樣的思考邏輯。若實在沒有想法，就直接參考（抄襲）競爭對手的選單、文案內容（務必加減修改，不然容易有法律糾紛），再修改成企業的名稱、個人用詞是最快的方式。 若企業也不是新興產業的話，一般的選單也就是 "首頁、產品／服務大類、最新消息、關於我們"。

網站架設費用

網站架設費用多少錢?業主詢問這個問題的時後，不妨先了解一下自身的需求， 在網站類型中提到網站有5種，請先釐清企業網站的類型之後。接著再依開發的技術、功能、頁數才有辦法計算大概的價錢。

以台灣佔有97%的中小企業，都是以企業形象網站為主，差異在些許的功能不同、頁數個數不同會造成價差。 若都使用wordpress網頁設計架設網站，費用會落在45,000~60,000。隔年網址費1000上下，主機費則落在5,000~12,000都有。 若使用的網頁設計軟體不同的話，費用當然會不同，像是若用中華電信1年才1,000多元，網站就極度陽春。以上收費的方式是第一年貴，第二年開始都是以主機費與網址費為主。
尚有一種收費模式是網站經營愈久費用就愈高，該收費方式是以月收，每月收12,000(例如)，用三年繳三年，用五年繳五年之類的。這類的網站架設總額10年為一個單位就會相對的高。

若是客製化網站的費用就是無限上綱，因為客製化所以就跟裝潢系統櫃一樣的貴，但其實有90%的網站都不用客製化網站，只要Wordpress網頁設計就可以完成了。
延申閱讀 : 網站架設費用

網站模板，現省１０萬

網站架設第一點，首重網站要精緻漂亮、所以網站公司請網頁設計師設計網頁版型、 RWD響應式網頁、HTML切版、設計ICON、找形象圖、設計Banner，林林種種一個網站包含首頁、內頁10萬元跑不掉，但這種屬於客製化網站設計就是貴，那為何不考慮使用網站模板的方式！(不要跟我說你會捨棄ZARA、H&M的衣服不穿，自己找設計師設計、打板、剪裁)。
貴設計推薦你使用Themeforest購買網頁模版，2000元不到，精緻美觀又一堆滿足RWD響應式網站模板的設計，不管Wordpress模版、HTML5模版，一頁式網頁模版、形象網站模版通通有。讓你免去一切從零開始一步一步做的時間，瞬間就擁有專業的網站。所以網頁模版就是那麼好用的，再請繼續看我們的分享吧！

網頁版型與網頁模版的關係

早期網頁設計公司做網站時，了解網站需求過後，就會請網頁設計師，設計版型、HTML切版的動作，而 這中間涉汲的專業包括網頁設計、平面設計、前端程式技術，而所需技術如HTML 5、BOOTSTRAP、CSS、jQuery、js、第三方程式外掛。加上一個最重要的就是"美感"，因此設計一個網頁版型絕對不容易。再加上設計出來的網頁版型，至少需能夠在Chrome、Safari二大陣營能夠精美呈現，這中間的難度又更難了。貴設計認為一個優質的版型大概要一個7、8年工作經驗的網頁設計師才能夠一手搞定。若找外包設計光是首頁就上萬元，內頁一頁都7、8000的，稍有規模的網站整個下來10萬跑不掉。所以其實網站版型設計真的不是一件容易的事情。
但現在呢？完全都變了。歐美許多公司單靠賣版型就年收入上千萬，一套RWD響應式網頁模版上千、上萬人購買下載。所以使用模版設計網站，絕不是一個讓人嗤之以鼻的事情，而是所謂的如Zara般的快時尚了。再者你身上穿的衣服，不也是Uniqlo同一件衣服模版打樣出來的嗎?你難道會每一件衣服都客製化嗎? 很明顯的你一定不會嘛。 所以透過購買網頁模版之後，再依網站的資訊架構、圖片、文案去調整模版的外表、介面的設計就可以變成你的網頁版型，是不是簡單又快速！

網頁模板下載

現在講求速度的時代，隨時都在變化，為了追求最新、跟上時代潮流，下載免費網頁版型是一定要的，如果你剛好又沒有前例可參考，要從零開始是一件很費神的事情，尤其使用原刻網頁設計，連最基礎的RWD響應式網頁模版都要針對每一個瀏覽器去寫程式碼，還不如下載版型再加以修改。 下載網頁版型除了能夠縮短製作時間與更多設計方向，又可以參考別人的網站結構、架構、設計、程式碼等，好處多多，可以好好運用免費網頁版型，有的還可以商用喔。

1. Wordpress
2. Template Monster
3. AThemes
4. Themeforest
5. Start Bootstrap
6. Templated
7. Template Monster
8. Bootstrapmade
9. Templatemo

模版與文案

開開心心下載好模版了，要開始製作網站了，但問題來了？？模版是專為攝影師打造的，但我是工程師，我跟本無法使用模版上作品集的區塊。又死定了，這個模版的文案怎麼有那麼多?我又不會寫文案。挫賽我只是要寫Blog用的網站，怎麼有購物車的功能呢？？這個餐廳的版模好漂亮，立即下載，結果這個模版要吃很多精美又漂亮的圖片。COW，難不成叫我請專業攝影師來拍一組？Orz！OMG！
上面的情境是常常會發生的，貴設計有一個客戶就是如此，他是賣電動牙刷的，但卻想用攝影師的作品集方式呈現，這是很不適合的。作品集一方面只是只是呈現屬於照片式的作品，例如攝影師、新秘、風影照之類的。但電動牙刷賣的是功能與實用性，不是精美照片，用作品集的方式非常的不適合。
所以選擇模版之前，不只要確認版型的上次更新日期、下載次數、FAQ，還要確認版型的區塊、甚至功能，是否能與您的官網資訊、手中的文案相符。不然再漂亮的模版也英雄無用武之地。一頭霧水，搞不清楚。

網站架設流程

1. 租主機：租主機，我只推Siteground，穩定度高、24小時客服、服務佳、功能又齊全，而且每日備份不怕網站掛掉。
2. 買網址：買網址，則推Godaddy，因為DNS生效快，相較於台灣的都要24~48小時才能生效，實在快速太多了。
3. 素材準備：官網Logo、官網的主色系、選單架構、文案、產品圖片，形象圖片、影片、公司資訊、公司社群媒體資訊
4. 網頁設計：Wordpress網頁設計、。若是Wix網頁設計、Weebly、Squarespace、strikingly則無需租主機，因為它們的主機跟網頁設計是綁在一起的。
5. GA安裝：透過安裝GA才能得知網站的流量與分析網站上訪客的行為。
6. Google登錄：向Google登錄網站後，才能在網站上搜尋到自已的品牌官網。

圖片來源 : 貴設計【網頁設計、網站架設流程】6步驟｜第6步沒做就GG

主機空間租用

購買網址

網站架設最基本的就是網址，但要去那邊買網址呢？在台灣大家第一個想到的就是中華電信，但本文最推薦的還是Godaddy。 以下是維基百科的介紹 “Godaddy是從事網際網路域名註冊及網站託管的美國上市公司。 截至2016年1月，據稱GoDaddy管理的域名超過6,100萬個，成為獲得ICANN認證的全球最大註冊商，服務逾1,300萬客戶，員工總數超過4,000。” 因此Godady的可信賴度、品牌度也是無庸置疑。但當然還有其他原因囉。

七大推薦原因

1. 費用首年超優惠：Godaddy首年費用極低，在公司首年商業模式測試階段很適合申請。但請注意第二年就會恢復原價。若是精品網域有可能上看十萬、百萬。
2. 介面簡單乾淨好友善：相對於中華電信，Godaddy你定會覺的非常好用。
3. 客後服務好好找：中華電信的客服電話告訴你，非常難找，一直在電話中。而Godaddy的客服可直接播打電話，或透過線上客服直接聯絡。
4. 網址買錯退費好人性：上次買錯一個網址，當下找客服處理，10分後就馬上退費。 請參考退款政策
5. DNS生效好快速：DNS的用意就是將網址對應到主機的IP位置，例如我在Google Chrome瀏覽器上輸入facebook.com.tw, Chrome會自動對應到FB公司在美國的主機位置256.124.25.23。你就可以開始玩FB了，這個動作就稱之為DNS設定。這個動作會依各家而不同，如中華電信需24~48小時，Godaddy只需幾分鐘的時間就可設定完成。
6. 程序簡單好快速：中華電信買個網址需要輸入至少10個欄位，Godaddy註冊完，直接刷卡帶走。
7. 多樣化網址選擇好方便：直接參考下圖吧。.com是台灣最愛的，但隨著網址也跟著進步，不用再死守.com的網址，還有.info、.cc、.vip。

免費網站架設

找免費網站架設也不是不可能，但竟然是免費的，一定會有許多受限。受限就有可能包括

1. 網站內有廣告
2. 子網域
3. 無法安裝外掛、佈景
4. 陽春到極點的網站
5. 功能超少

但不同的情境適用於不同的網站架設，若練習網站架設能力，其實找這些免費網站架設的平台其實是相當足夠了。以下是免費網站架設的一些平台

1. 熱搜情報網
2. Wordpress.com
3. Google協作平台
4. Wix
5. Weebly
6. Webnode
7. Jimdo
8. Strikingly

網站架設推薦軟體

網站架設軟體百百種，從很早期的Frontpage直到現在仍有少數人在使用的Dreamweaver，但在2022年網站架設已經進化到不用寫程式，難易度相較於10年是大大減低，而現在只要拖拖拉拉的就可以獨立架設一個網站了。

而目前業界普遍使用的網站架設推薦軟體、平台、工具還真的是千百種。有分寫部落格、架網站、一頁式商店的，我們幫您處理如下
部落格專用

1. Medium：自帶流量
2. Pixnet：自帶流量
3. 天空：自帶流量
4. Google Blogger

1. MOMO：自帶流量
2. Pchome：自帶流量
3. 蝦皮：自帶流量
4. 91APP
5. Shopline
6. MeepShop
7. Easystore
8. WACA
9. 一頁商店

1. 中華電信
2. wordpress.org
3. wordpress.com
4. weebly
5. wix
6. strikingly
7. Webnode
8. Google協作平台
9. Google商家
10. 族繁不及備載

評估網站架設軟體架站or電商專用的開店平台有很大的一個分水嶺，就是"自帶流量"。 何謂自帶流量呢？也就是說在該平台上架好網站資訊or銷售頁or部落格之後，就會有流量。 一般這種都是平台的會比較多，如Momo、Pchome、蝦皮、Medium、pixnet之類的。所以與其說是架設網站，我更認為只是產品頁、銷售頁之類的上架而已，說要稱為"形象官網"。會建議還是要有獨立的網址，例如facebook.com.tw之類的。
另一種電商專用的開店平台，是不會帶流量的，例如ezstore、WACA、一頁商店，這類型的開店平台是整合了強大的電商功能與數據追蹤功能，費用都是每月收、每年收，若以是新創企業、商品試水溫的話 ，是非常的適合，但年費高、抽成也高。若是成熟穩定的企業，仍是會建議有自有的電商網站，一方面品牌形象很重要、二方面抽成低、網站掌控的程度都好許多。

設計網頁

設計網頁是整個在架設網站中最讓人頭痛的事情（也是委外費用最貴的部份，可參考網站架設費用），但其實Wordpress、Wix、Weebly類似的套裝軟體，提供友善的圖形化介面，已經讓設計網頁這檔事，變的非常簡單。此外再搭配網站模板，要設計一個有基本個人網站，再帶有些美感已經不是難事。 只要將適當的文案量配合網站模板的內容排版即可。

如上有26萬1,679人買模板設計網站，所以使用網站模板設計網站已經是很普遍的一件事了。那貴設計最推的就是Wordpress網頁設計。因為

1. Wordpress是美國白宮、Mercedes-Benz建置官網的工具。
2. Wordpress建置的網站全球市佔40%、共約7億5千萬個。
3. Wordpress每月全球熱搜274萬次。
4. Wordpress有上萬種的精美版型佈景可直接套用，1秒變高貴。
5. Wordpress至2021/07/29有58,633個免費的外掛。
6. Wordpress是一種你不用會寫程式也可以架設網站的工具。
7. Wordpress是PHP和MySQL為平台的自由開源的部落格軟體和內容管理系統（CMS）。
8. 外掛功能無限擴充、只需安裝外掛按鍵輕輕一按、功能無限增長，且免費的居多。
9. Wordpress技術普遍、新手交接不間斷。
10. 100%網站、資料庫擁用權，搬家、備份簡單又快速。
11. 完整的前、後台功能，形象官網、活動網頁、購物網站、Blog通通有。
12. 以內容管理系統（CMS）為初衷最適於部格格。
13. Wordpress不用寫程式也能架網站，使用wordpress網站架設，無需寫任何一點程式。

網站不登錄，Google搜不到

上述方式不管是在Google網址提交or網站提交都是一樣的方式，想要快速被Google搜尋出來都是同樣的方法，快則一分鐘你的網頁就會被呈現在Google搜尋結果。