前IBM工程師教你如何【網站架設】
網頁設計自學手冊
(瀏覽：3690  更新日期： 2022-06-20)

一、企業需要官網？

為何要架設官網呢？網站架設好難，要如何自架官網呢？自己架設網站要錢嗎？以上的問題是企業家都思考過的問題，這也代表許多企業家都膠著在是不是該架設官網。關於這個問題，在此先詢問你知道全球有多少人在用網路嗎？全球有多少個網站嗎？依據InternetLiveStats網際網路線上資料統計網，全球已經有高達50億的網路使用者，近11億個的網站。 （資料來源：InternetLiveStats）
所以企業沒有網站，企業將與全球50億個使用者擦身而過，企業沒有網站，企業跟本無法在網際網路的時代下發展，更遑論有意走網路行銷，透過網路做生意。所以你說企業的官方網站是不是一件重要的事情。 再論，其實每天都有十億、百億次的Google搜尋？如下圖是於某日晚間近8：30時，就已經產生近71億次的Google搜尋，這些搜尋背後的使用者都在透過”網路尋找答案”。例如 ”2021台北市牛肉麵推薦”、 ”最新防疫規定”之類，所以沒有官網自然就無法被Google搜尋引擎推薦。所以企業官網重不重要呢？ （資料來源：InternetLiveStats）
眾合以上二點，想當然而官方網站的重要性自然不在話下，但有許多企業主說，我有了粉絲專頁、Youtube、IG，我為什麼還需要網站嗎？其實是的，很多企業主都會諮詢時提出的問題，也有不少店家、企業選擇不架設官網，只經營Facebook的粉絲頁，「台灣人愛滑手機，使用臉書的比例偏高，為何不直接開一個粉絲專頁不是更有效？」。

1.1 架設官網的好處？

現在是什麼年代了，那一個企業沒有網站呢?即使分不清楚網站的重要性，至少也會建立一個FB粉絲團吧！所以不管是個人、企業對於藉由成立網站、粉絲團、IG或者是YT 進而接觸到廣大的網路使用者的觀念是存在的。但不管透過何種渠道接觸到廣大的用戶，官方網站仍是最推薦的方式，因為哪家大品牌只有FB粉絲團、YT的呢？所以請參考以下架設官網的優點：

1. 官方網站是公信力的代表 : 官方網站是企業的代言人，品牌的發言人，因此企業大小事都以官網發佈的公告為主。而公司行銷活動、員工名片也都是以官方網站的網址為主，而非社群平台為優先。如此都是代表大眾賦予官網公信力、權威的重要指標。
2. 官方網站傳達是一種企業形象 : 擁有一個真正屬於自己官網，能呈現專業品牌形象外，也在訴說這間公司擁有真正的企圖和承諾的表現。
3. 官方網站提供是一種信賴感 : 上面有提到，官網能帶來公信力，想像一下，如果您要找一家沒合作過的廠商合作，如果A廠商有一個官網，專業、有完整資訊，B廠商剛好沒網站，只有一些資訊在社群媒體上，您會覺得哪一家比較有信賴呢？
4. 官方網站可聚集你的行銷歷程 : 官網價值之一，就是官網的網域，網域=你的價值，網域可以代表企業的價值，不附屬在別人的平台之下，對搜尋引擎來說具有累積性。無論你怎麼更改網站內容，都會記載在網路上，讓你的行銷不至於間斷。
5. 官方網站可永保內容 : 已累績的文章、內容、瀏覽人數等，瀏覽著可以很容易找到他們想看的內容，透過內容行銷＆搜尋引擎優化（SEO）行銷的概念，可以創造出疊加行銷能量。Facebook精心設計的素材、菜單、心得、文章等，經過一段時日，就會被新的貼文不斷往下壓，石沈大海找不到了！
6. 官方網站比FB、IG、Youtube是更能永續經營的通路 : 現在Facebook（已更名叫Meta）的前景看好，但誰能保證它永遠不會消失？哪天Facebook不玩了或是哪天出現更酷更炫的網站使用者紛紛跳槽？到時再多的粉絲和討論全部歸零。
7. 網站代表企業的專業 : 有官網的企業與沒有官網的企業，選擇合作廠商、外包或購買產品。你會優先選擇那一個呢?

1.2 有FB粉絲團，還需要官網嗎？

這是一個好問題，有許多企業主同樣都會有的疑問，既然可以免費使用Facebook，為什麼架設官網？很簡單的問題，你看過哪一個大品牌只有成立FB粉絲團沒有建置官方網站的呢？所以會架設官網一定有其道理存在。或許您可以參考如下：

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

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

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

二、網站類型有哪些？

企業決心架設官網，第一點首要清楚哪些類型的網站適合企業，才不會花大錢，打錯目標。一般網站主要類型為如下：

2.1 形象/品牌網站

企業絕大部份都是屬於該類型，官網可提供公司介紹、服務介紹、產品列表、常見問題、聯絡我們、交通資訊、最新消息、部落格、媒體報導、價格方案、產品訂購、合作提案、FB粉絲團、經銷據點、活動專區等訊息。

2.2 電商購物網站

適用於網路上銷售產品的企業，諸如保養品、手機配件、家家電、文創商品。電商網站的特色就是首頁一進入便是大大的新商品折扣、活動節慶優惠的推廣輪播，首頁下方則是熱銷商品、最新產品，接著商品類別的介紹。雖是以購物平台為主軸，但網站導覽列仍是會有聯絡我們、最新消息的頁面。

2.3 形象+購物網站

形象+購物網站結合了上述二點，在首頁的呈現會以公司形象官網為主軸，介紹公司優勢、解決方案、公司理念之類。接著帶一些最新、熱銷商品在首頁並導流量至某個商品類別的頁面。

2.4 媒體網站 or 部落格網站

媒體網站、部落格其實很類似，整個網站都是以文章為主軸，一進入官網就是滿滿的文章，跟文章分類。經營這類型的網站會很累人，因為你要產出很多文章、精美的圖片。若團隊不擅於產生這方面的內容，實在不適合經營這類型網站。而這二個怎麼區分呢？ 通常首頁比較多精美的圖片、文章分類、生動活潑的風格，這類型我們就會叫做媒體OR雜誌之類的風格，而部落格的風格你應該可以了解，就是相對的簡單，但也會少了許多討人厭的廣告、業配文。

2.5 論壇網站

論壇網站就如MOBILE01、Dcard，會有一堆人刊登討論、詢問問題，接著就有一堆人在下方留言回答。 這類型的網站，若你沒有一個完整的IT或行銷團隊，千萬不要經營這類型的網站。網站剛開始的經營都是團隊要申請好多帳號，並自問自答好一陣子，產生網站很熱絡的假象，才會有人陸續留言、詢問。

2.6 客製化網站

在網路上提供”特有”的服務，需特別開發客製功能。如UberEats、熊貓。缺點是費用昂貴、需求連發包商自己也搞不清楚，導致做錯需求，最後又花了很多錢修正網站規格。所以在沒有專業的系統分析師，或團隊內有軟體工程師的話，通常不建議做客製化網站。

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

架設網站會有分平台及工具二種，平台是指某間公司提供的網路服務，讓使用者在它們的網站透過拖拉的方式設計網站，例如台灣最大的中華黃頁、智邦、痞客邦、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%的網站需求。

四、如何撰寫網站文案？

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

4.1 統整所有資訊

請將所有要傳達給客戶的資訊（包含文字、影片、產品圖片）都放在一個word檔，貴設計建議您豐富的網站內容很重要，所以請盡可能寫，寫的多都可以分頁處理，寫的少生意不會好。

4.2資訊分類

一堆的資訊，那些是產品資訊，那些是公司聯絡資訊，那些是公司理念、介紹等資訊，全都分門別類。

4.3 網站選單建立

一旦資訊分類好之後，留下4~5個最大的分類，並重新命名2~5個字為類別名稱，如此就可以做為網站"選單（又稱網導覽列）"，而選單還能再下拉為”子選單”，參考如下 。

4.4 網頁架構規劃

何謂網頁架構呢？我們將貴設計的首頁分成六個主要的區塊（首頁大圖+標語、網站設計服務、網站設計六大特色、網站設計範例、網站設計費用、網站設計教學），這六個就是所謂的首頁架構。 在步驟4.1，我們將資訊分類後，大分類做為網站建立選單，每一個分類完的資訊仍可再做一次小分類，這個小分類就可以做為網頁的架構圖。 所以你要為每一頁思考網頁的架構是什麼。

4.5 依架構寫內容

承4.4，目前已經把整個網站的架構都已經生出來了，例如首頁的六個主要區塊，接著再開始補文案即可。接後每一頁都是同樣的思考邏輯。若實在沒有想法，就直接參考（抄襲）競爭對手的選單、文案內容（務必加減修改，不然容易有法律糾紛），再修改成企業的名稱、個人用詞是最快的方式。 若企業也不是新興產業的話，一般的選單也就是 "首頁、產品／服務大類、最新消息、關於我們"。

五、善用模版、現省10萬

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

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

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

5.2 網頁模板下載

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

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

5.3 模版與文案

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

六、網站架設流程

架設網站總是一頭霧水，搞不清楚先後順序，但請直接跟著以下的步驟走，一步步的完成每個階段性的目標就可以了。 而一般網站架設流程如上圖所示，缺一不可。步驟1、2、5、6都只要設定、安裝一次即可。 而3、4屬於網站優化的部份，會一直重覆、再重覆。若要架設購物網站則需在第4個步驟加上電商模組及金流。

6.1 主機空間租用

主機的概念就是你蓋房子找一個空地，同樣網站也是需要一台電腦，也就是所謂的”伺服器”、並規劃硬碟空間存放。但當然不是真的要叫你找一台電腦存放網站，這樣子太難了，而且電腦還要不斷電、恆濕、恆溫。所以千萬”別了”。 複雜難搞的電腦硬體管理、設定交給專業的處理，而你只要租一個空間或者租一台伺服器，會讓事情簡單許多，而年費大概從免費到上萬都有，依主機規格（如cpu、ram容量）決定。

6.2 網址購買

網址之於網站就如同住家的地址一樣，例如： MOMO購物網站的網址是www.momoshop.com.tw PChome24小時購物是https://24h.pchome.com.tw 所以你也要為你的網站租一個地址，一年費用千元不等，特殊網站則需要購買。本文則會以Godaddy為範例。

6.3 素材準備

素材包含網站文案、圖片、聲音檔、影音檔，其中以文案、圖片最為重要。文案是最難寫的一部份，即使我們專業的網站架設公司，在想文案的時後，也是一個頭二個大。圖片則會最重要，因為圖片是網站美醜很重要的因素。

6.4 網頁設計

網頁設計的概念就跟室內設計的概念一樣，只是從房屋內移駕到網站上。所以其實你也可以自己設計，其差異性就如同你的房屋要請專業的室內設計師的概念是一樣的。專業設計師在美感、質感、施工速度、品質就會相對應的好。而礙於預算考量當然也可以自己至IKEA買現有傢俱自行設計亦可。（本文會聚焦在Wordpress網頁設計）

6.5 GA/GSC安裝

GA（Google Analytics），是一套Google提供的網站流量分析工具，透過GA可以了解網站來了多少人，哪些人，在網站待了多久，做了什麼事情，都可以透過GA觀察到。如下圖說明這期間有69,578人來網站，其中63,826是新的使用者。 GSC（Google Search Console）同樣是Google所提供的工具，主要用來觀察網路使用者是透過Google搜尋那些關鍵字，進入官網的。例如下圖表代表，有許多網站訪客是透過Google搜尋”借址登記、共享辦公室、虛擬辦公室”進入網站的。

6.6 網站登錄

登錄步驟的目地就是希望網路上的用戶，能夠透過搜尋引擎搜尋到網站。該步驟有執行就會”快點”能夠在搜尋引擎被搜到，未執行的話，就是會慢點才被搜尋到。所以差異只在於時間快慢。 新建立的網站會最推薦務必要登錄至Google搜尋引擎，Bing市佔率低可以等Bing自行收錄即可。若主攻中國市場的話，則需至百度搜尋引擎登錄。

七、主機空間租用

上一章節有提到，網站需要一個空間存放，而存放空間的電腦，我們會稱之為伺服器（Server）。而現在做網站千萬別真的生一台電腦做伺服器，除存放伺服器的環境我們很難控制（溫度、濕度、不斷電系統、備援系統），而且管理伺服器又需要大量的軟硬體知識。所以現在其實都用”租伺服器”為主，就好比租辦公室的概念。只要租一台伺服器，或者租伺服器裡面的幾G的網站空間存放網站就足夠。
但問題來了，租伺服器在國內外有數百間伺服器廠商，該怎麼選，怎麼看呢？ 直白的跟你講，很難選又難看，因為伺服器的硬體規格的組合太多了。例如伺服器會依window、linux系統、硬碟種類、硬碟容量、CPU限制、記憶體、每月流量、I／O Rate、資料庫、國外主機、虛擬主機、實體主機…[email protected]#$%^&*（）_+。所以基本上也不用比較了。本書會建議你直接這樣子選吧！
網站架設初階者：選擇台灣主機、例如智邦、pchome、遠振、戰國策、中華電信。台灣主機費相較於歐美主機會偏貴，但好處就是有中文客服可以幫你解決各式疑難雜症，而且主機位置大都在台灣，網站連線速度會較快。
網站架設中階者：Siteground、Cloudway、Bluehost都是在網路上有人推薦的。本書會最推Siteground。Cloudway後台介面速度偏慢，Bluehost的主機因為在歐美，網站速度會偏慢。
網站架設高階者：Linode、GCP、AWS、Azure，但入門門檻高，只適用於技術咖，一般非資訊相關的從業人員非常不適合。
本書是推薦SG（Siteground），SG在目前主機租用廠商中是最推薦的，不僅價錢還算合理、介面友善、搬家快速、客服回覆速度快等原因，同時在一個月之內都有退費的保證服務，所以非常推薦。當然還有其他原因例如？

1. 免費SSL加密憑證
2. 免費 CDN
3. 每天自動備份，自動備份前30天資料
4. 主機穩定性優
5. 24／7客服服務，線上即時聊天，回覆速度快
6. SG介面乾淨，好上手
7. Wordpress一鍵安裝，5分鐘搞定
8. Wordpress免費輕鬆搬家，SG提供免費外掛
9. Wordpress自動更新

八、購買網址

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

8.1 七大推薦原因

1. 費用首年超優惠：Godaddy首年費用極低，在公司首年商業模式測試階段很適合申請。但請注意第二年就會恢復原價。若是精品網域有可能上看十萬、百萬。
2. 介面簡單乾淨好友善：相對於中華電信，Godaddy你定會覺的非常好用。
3. 客後服務好好找：中華電信的客服電話告訴你，非常難找，一直在電話中。而Godaddy的客服可直接播打電話，或透過線上客服直接聯絡。
4. 網址買錯退費好人性：上次買錯一個網址，當下找客服處理，10分後就馬上退費。 完整退款政策，請參考 https://tw.godaddy.com/legal/agreements/refund-policy
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。

8.2 購買前準備

1.喜愛的網域名稱：網域請至Google 瀏覽器試試有無其他人使用，或其他一樣的網域名稱，但結尾不同。
2.基本個人資訊 ： 個人、企業電話、Email、地址。點擊螢幕右上角使用者名稱，再點擊後的帳戶設定即可設定。
3.公司抬頭、統編 ： 若企業要報帳，可將”公司統編”輸入至聯繫人（右上角-->帳戶設定-->編輯）。購買完成後會寄PDF檔，帳單資訊就會有公司統編、抬頭可報帳。
4.信用卡相關資訊

8.3 如何購買網址

Step1：搜尋個人品牌、企業適當的網址
Step2：選擇適當結尾名稱。以台灣來說較多是xxx.com.tw 或是xxx.tw。若是客戶群是全球性的或想看起來很利害則可選擇.com。請特別注意首年年費與第二年年費，有些首年很便宜，但次年（含以後）的費用就會高很多。 而且因為Goaddy是國際性的大品牌，請注意是台幣or美金計價。 接著直點接選購物車的圖示 加入購買，前面購物車清單。
Step3：購物車清單請注意以下紅框部份。購買的年數, 年數愈長打的折數就愈少。全方位網域隱私及保護可省略（別人可經由網域”反查”，網域持有者簡單資訊）。小計是以NT 或 TWD計算。 確認訂單資訊：確認好最終價錢、帳號資訊送出即可。
Step4:確認訂單資訊：確認好最終價錢、帳號資訊送出即可。

九、素材準備

一個精美精緻的網站，精美漂亮的圖片素材必不少，若有預算的話，建議可以找專業攝影師做商品拍攝。若預算不足的，可以去 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／地址／營業時間／合作夥伴網址之類的。

十、設計網頁

網頁設計上述說過有很多的平台、軟體、套件。但貴設計最推的是Wordpress網頁設計，憑什麼呢？憑它全球有40%的網站都是Wordpress架設，美國白宮也是用Wordpress。所以美國白宮都是Wordpress的愛用者，我們一般小企業、個人又有什麼好擔心顧忌的呢？接下來將會介紹更多Wordpress。 （網頁程式原始碼有”wp-content”就是Wordpress網站）

10.1 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）。

10.2 Wordpress網站架設的優勢

強烈建議你使用Wordpress網頁設計的架構，原因如下：

1. 全世界40%的網站都在使用該架構，如迪士尼、時代雜誌、BMW..等等。所以技術純熟、教學資訊多、系統穩定性高，畢竟程式已經過千萬人測試使用。
2. 外掛功能無限擴充、只需安裝外掛按鍵輕輕一按、功能無限增長，且免費的居多。
3. Wordpress技術普遍、新手交接不間斷。
4. 100%網站、資料庫擁用權，搬家、備份簡單又快速。
5. 完整的前、後台功能，形象官網、活動網頁、購物網站、Blog通通有。
6. 以內容管理系統（CMS）為初衷最適於部格格。

10.3 Wordpress不用寫程式也能架網站?

OMG，不會還要寫程式吧！那什麼是HTML、css、js??客倌請您放心。Wordpress之所以能夠佔據全球近40%的市佔不是沒有原因的。使用wordpress網站架設，無需寫任何一點程式。
wordpress已將程式碼給介面化，只要透過拖拉網站架站元件便能快速的製作網站，而不同的架站元件也有提供友善的使用者介面，方便直接調整前台所有的元件、屬性。所以不用程式就能架設網站一切都是真的。
請參考影片連結：https://youtube.com/watch?v=-Sk2jnDstAY

10.4 安裝wordpress

首先購買SiteGround主機，購買主機後，就可以開始安裝Wordpress。
Step1：選單上選“WEBSITES”。
Step2：右手邊按“NEW WEBSITE”。
Step3：新增網站，第一個步驟先放網址，有三個選項：
➤新增網址（New Domain）：可以直接在SG購買網址。但不是很方便，建議可以到Godaddy購買（請至第七章節）。 
➤已有網址（Existing Domain）：已有網址可以直接使用這項，可以直接在正式網址製作網站。 
➤暫時網址（Temporary Domain）：還沒想好網址沒關係，SG有提供暫時網址，讓網站作業不用停擺，到時候取代網址就可以了。
Step4：先用“暫時網址Temporary Domain”，按“Select”，本次暫時網址是：ezstartu25.sg-host.com，確定後“Continue”。
Step5：新增新網站，選“Start New Website”按“Select”。
Step6：選“ＷordPress”按“Select”。
Step7：設定登入帳密，再按“Continue”。
Step8：這是SG提供的代管網站的服務，如果您有需要可以購買每年計算。目前不需要就直接按“Finish”。
Step9：等待轉完網站就完成了！
Step10：網站準備好了！登入後台按“Log In Admin”，用剛剛設定的帳號密碼登入後台，就可以開始編輯網站囉。

10.5 Wordpress後台登入

安裝好Wordrpess後，請輸入 https://購買的網址/wp-admin。再輸入帳密即可登入。 登入之後，就會看見如下的後台。就代表你已經成功。 左邊的黑色選單，最常使用的功能如”文章、媒體、頁面、外觀、外掛、使用者、設定”，其中以”文章、頁面”會是最常使用，所以熟悉文章與頁面的編輯器操作方式就會很重要。

10.6 Wordpress後台基本設定

在Wordpress的後台左邊選單有一個"設定"，裡面包含了很多功能，在這邊介紹幾個重要的功能。 ➤Google搜尋結果的長相：在設定->一般，你可以調整"網站標題、網站說明"。這二個欄位決定了Google搜尋出來的標題及說明。
➤管理者信箱：在設定->一般，你可以藉由調整”網站管理員電子郵件地址”。將所有網站的通知信件（例如新會員註冊、商品售出、網站系統信）轉發寄新的Email內。
➤網站語言：在設定->一般，你可以藉由調整”網站介面語言”將網站調整成英文或其他語言。
➤更改文章網址：在設定->永久連結，請將一般設定的部份，勾選"文章名稱"，以後文章網址就會是文章的標題。理由是SEO、使用者體驗也都會較好。

10.7 Wordpress佈景安裝

為什麼要安裝佈景呢? 安裝佈景其實就是所謂”套版的動作”，一旦套版之後再做網站的調整，網站就會有基本的外觀，而不是一個醜醜什麼都沒有的網站，若願意購買付費版的版型，網站就會有更精緻、美觀。屆時只要換換圖片、改改文案、刪除用不到的區塊，一個漂亮的網站大約只要3天就可以搞定。接著我們來看看Wordpress如何安裝版型：
Step 1：至左邊選單外觀 -> 佈景主題
Step 2：選擇佈景主題：如有購買佈景主題，請先下載主題後，至安裝佈景主題進行安裝。也可以使用Wordpress提供免費版型
Step 3：選好後只需要在下方按「啟用」，即可蓋掉現有的佈景主題。
Step 4：佈景主題就安裝好了！ 在佈景主題安裝完成後，貴設計推薦您使用Elementor編輯器去設計你的網頁，貴設計用過許多網頁編輯器後，深覺的Elementor的好用，所見即所得的模式，讓你在修改、新增頁面能夠馬上見到效果。再加上提供許多好用的元件，直接拖拉並修改文字及設計，就能做到網頁的設計。

10.8 Wordpress媒體庫

Wordpress網站所用到的網站素材，不管是影片、圖片、聲音一經上傳之後都會放在”媒體庫”，所以媒體庫可以用來管理圖片、影音的新增、刪除、使用，甚至是圖片的基本剪輯。但強列建議圖片可以上傳至媒體庫，對於聲音、影音請上傳至SoundCloud及Youtube 的平台，再利用嵌入的方式放進網站內，不然很快主機的容量就爆了，就要付費再買空間了。 而對於圖片的管理可以參考如下
➤新增圖片：媒體庫最上方有一個「新增媒體」，這裡可以新增照片、影片、檔案等。但影片的檔案剛有提到建議上傳到Youtube然後再用嵌入到文章/頁面，千萬不要上傳到網站。 ➤編輯圖片：Wordpress有提供簡易的編輯照片功能，只要再圖片「詳情資料」最下方，「編輯圖片」 點進去「編輯圖片」右邊有一個可以等比例調整尺寸，如果太大了，可以在這調整數字即可。 左邊還有其他編輯圖片功能，「裁剪、旋轉、翻轉」
➤「裁剪」部分。 按「裁剪」 ->調整點點的框框，調整到想要的位置 ->再按「裁剪」->按「儲存」 這樣就完成裁剪囉，但這不會這麼快出現在前臺，有可能會有「快取」要等一下。

10.9 wordpress頁面管理

在Wordpress網站上你看到的網頁，都會對應到在Wordpress後台的”頁面及文章”這二種。隨著網站經營成長，需要對頁面有所調整、新增。但Wordpress網站要如何管理頁面or新增修改頁面？以下是頁面的清單頁，清單頁包含所有”頁面”，你可以針對每個頁面做編輯、快速編輯、檢視、移至回收桶….等等的動作（請參考下圖紅框2的位置），若要新增頁面請點選下圖紅框1的按鈕就可以了。 點擊進入頁面的新增修改後，接著就是整個網站架設的重頭戲了，就是網頁設計。如何把網站架的漂亮、架的美觀就是在這設計?但How-To呢?
Step 1：有一句話” 工欲善其事，必先利其器”，要能夠設計出漂亮的網頁絕不是易事，但首先善用”編輯器”很重要。不懂編輯器（Builder）會讓你寸步難行。哪編輯器是什麼呢?就是用來設計網頁的”工具”，市面著名的Wordpress編輯器有Elementor、Divi、WPBakery、Betheme…不在少數。貴設計推薦使用Elementor，主要原因在於直覺，所見即所得的設計方式讓設計變的非常流暢。所以善用且熟習網站的編輯器為最重要的一件事情。 Step 2：套版型，一個漂亮的版型讓你少做三個月的工去設計。網路上有很多的免費版型都可以下載使用，但若要更精緻美觀的，可以至themeforest.net購買。 Step 3：開始設計吧！網頁設計就跟室內裝潢一樣，你可以請專業的室內設計師，也可以至IKEA買傢俱設計，其中的差異不外就是專業、品質、美感、速度。但網頁設計較棒的是，你有套版這檔事。剛上一個步驟套好版之後，只要刪除掉無用的區塊，再調整版型上的圖片、文案成為你的文案就搞定了。其實一個60分的網站就這樣子簡單的建置好了。針對Elementor是如何編輯頁面的，可以參考以下連結：
如何用Elementor編輯器【新增】Wordpress頁面的區塊
如何使用Elementor編輯器【修改】Wordpress頁面

10.10 Wordpress文章管理

網站架設完成後，接著讓網站有流量、訪客才是重要的，而時下相當流行的SEO更是大家所推崇的可免費取得流量的方式。所以寫文章就是每日按表操課，那要如何在Wordpres文章管理、撰寫文章呢？ 請參考影片 ： https://www.youtube.com/watch?v=Kb8FZQ5D8BM （影片中為Wordpress傳統編輯器，非Elementor編輯器）

10.11 Wordpress選單管理

Wordpress選單（導覽列）是什麼呢 ? 選單的用功是提供網站訪客藉由選單可以瀏覽不同頁面的資訊（如下圖）。 所以一旦有新的網頁、文章都可將該連結掛在選單上， 這樣一來訪客可更方便的前進該頁面，進而了解您提供的資訊、優惠訊息。 請直接參考影片介紹： https://www.youtube.com/watch?v=S8QS2-kQ1Kc

10.12 Wordpress外掛安裝教學

使用Wordpress網站設計的好處是已經受到全世界廣泛網站使用，它的自由度相當高，可以很靈活運用。在Wordpress後台可以找到很多強大的外掛外，也不少第三方公司開發Wordpress外掛呢。外掛可以提供網站需要的功能，例如：網站備份、安全性、表格、開課、購物車、金流等。
只要到Wordpress後台就可以找到上萬個免費外掛，免費外掛都處於基本的功能，如過需要某外掛更多功能，很多都可以付費升級，價格都不會太貴。外掛可以到各個網站購買，推薦到Themeforest購買外掛，這裡有上千個外掛可以購買下載，購買後會給一組序號，終生可以使用，可以不斷更新。
安裝外掛有2種方式： 如果是Wordpress官方網站原有的：
Step1：後台找尋「外掛」
Step2：「安裝外掛」
Step3：「搜尋外掛」
Step4：「立即安裝」
如果是到Themeforest或著其他網站上購買的：
Step 1：後台找尋「外掛」
Step 2：「上傳外掛」
Step 3：「瀏覽上傳檔案」
Step 4：「立即安裝」

Wordpress外掛有太多人開發了，好壞層次不齊，安裝外掛前請確認：
✓更新版本，是否與你的版本相符 
✓更新時間，如果更新時間兩年以上，可以考慮要不要使用  下載人數，下載人數高，代表這外掛會持續更新，也不太會出什麼問題 
✓評價好壞，可以看看別人下載後有沒有遇到什麼狀況等 
✓特殊功能外掛，比較少人下載，卻你需要，這時候就要看下載下來會不會與你的版本起衝突
這邊特別提醒一點，一旦安裝外掛網站出現問題，請立即關閉即可。因為外掛是由不同公司寫的功能。外掛之間起衝突機率很高的。因此網站千萬不要使用自動更新外掛，以避免外掛更新完畢後，網站就掛了的窘境。

10.13 Woredpress使用者管理權限

Wordpress使用者管理的目地就是為了設定網站管理者依不同的角色而賦予不同的管理權限，如最大權限是"網站管理員"可以新增刪除修改管理員、管理外掛、新增頁面、安裝主題..等等。而最小權限則是訂閱者，只有閱讀的權限或修改個人資訊，如暱稱、密碼等。本文會為各位分享Wordpress的五個使用者權限，及如何對網站使用者新增、刪除與修改。 使用者管理權限：使用者管理權限角色分為五種，權限分別從最多到最少為

1. 網站管理員：最大管理權限，可以對網站做任何的動作、如安裝外掛、管理使用者、主題佈景、重設。
2. 編輯：可修改頁面、文章、留言、媒體。
3. 作者：文章、留言、媒體。一般若要操作搜尋引擎優化（SEO）的話，可以只給作者。
4. 投稿者：文章、留言
5. 訂閱者：登入之後會在帳號控制台裡，帳號控制台可檢視近期的訂單（若為電商網站），管理您的收貨地址 和更改密碼或修改帳號資料。

十一、GA/GSC安裝

GA、GSC的安裝在不同的平台，安裝方式會有所不同，本文只聚焦在以wodpress.org是如何安裝的，其他平台的安裝可諮詢各平台的客服單位。在wordpress的安裝很簡單，只要申請一組Gmail，並安裝Google Site Kit的外掛。透過該外掛就能快速又無Code的安裝GA、GSC。

安裝Google Site Kit

Step 1：請登入Google帳號 Step 2：Google Analytics 和 Search Console都要打勾 Step 3：點選Process Step 4：點選Allow Step 5：Add Site 出現以下的畫面，就代表Google Site Kit已經安裝成功了，再點選Go To my Dashboard即可。

11.2 利用Google Site Kit安裝GA、GSC

進入Wordpress的後台Site Kit的Dashboard就會看見如下圖，如Search Console、Ad Sense、Analytics、Page Speed Insights。其中Search Console出現”Connected”代表GSC已經安裝完畢了。Analytics出現”Connected Service”代表GA還未安裝，請點擊Connect Service，就一直ok、繼續執行下去就好了。GA就會安裝好了。 那Google Site Kit到底是什麼呢? 你可以想像成他是GA、GSC的簡易版工具。因為GA、GSC其實還是需要學習才能看的懂，但透過Google Site Kit把GA、GSC的資料抓進網站，並重新設計簡易的介面呈現方式，讓網站主能更簡單的了解網站流量及網站關鍵字。但想要對網站有更深入的了解、認識，還是會建議透過GA、GSC才會最好。

十二、網站登錄

網站架設完成，但搜尋引擎始終無法搜尋到你的網站嗎？甚至連品牌字關鍵字在搜尋結果也沒有看見！OMG到底要如何讓Google搜尋引擎搜尋到我的網頁呢？ 其實【網站登錄】就好比新生兒出生報戶口的動作，同樣你的新網站也要跟Google報戶口。 時代的演進，全球主要的搜尋行為高達93%都在Google搜尋引擎上發生（參考下圖）， 所以網站架設完成後，請務必至Google搜尋引擎做網站登錄的動作。不然花了5、6萬打造一個蚊子館實為浪費，就讓貴設計跟您分享3種 Google登錄的方式。 網站登錄的三種方法 # 方法 優點 缺點 1 無為而治法 什麼都不必做 登錄時間最..慢 2 一條連結法 只要1秒鐘就搞定 登錄時間較上述快 3 GSC網站登錄法 難度較高 登錄快則15分鐘就會生效

12.1 無為而治法

一旦有新的網站上線，你什麼都不做，依然會被Google搜尋引擎找到，但這就是碰運氣。一旦時間拉長，終就會被Google搜尋引擎收錄的。貴設計的某個客戶網站就因為未想快速登錄，就一直放著，結果大概1個月不到還是被Google收錄了。時間雖最省，但登錄時間會超慢。

12.2 一條連結法

新網站or網頁上線，請馬上分享到"既有"的網站或網頁內，又或者至個人FB，Google機器人會隨著既有的網頁爬到新網站/頁，接著就收錄了。二來有一個好處，一旦網頁內容被收錄會有一個時間標籤，該時間標籤會證明你的內容是第一手，防止他人盜用你的內容而被Google誤判為抄襲。網站登錄時間生效較上述快，要加速就是拿去更多的網頁內分享，如Pixnet、FB粉絲團、IG、Mobile01、高流量的網頁之類。

12.3 GSC網站登錄法

GSC（Google Search Console）網站登錄法指是透過的GSC網址審查功能，一旦送出審核，快則一分鐘後就登錄生效了，慢數小時內也會生效。但要如何透過該方法登錄網站呢？開通GSC，並將新網址貼至以下紅色框的部份按下Enter即可 上述方式不管是在Google網址提交or網站提交都是一樣的方式，想要快速被Google搜尋出來都是同樣的方法，快則一分鐘你的網頁就會被呈現在Google搜尋結果。

12.4 Yahoo、Bing、Baidu、MSN網站登錄

下圖是截至今年2021年全球搜尋引擎市場佔有率，從圖表看出Google紅線遠遠超過任何一個搜尋引擎，Bing、Yahoo、Baidu、完全被打趴。 所以這代表什麼？ 可以不用去登錄其他搜尋引擎 其他的搜尋引擎你使用無為而治法 ，什麼都不必做，自然就會被收錄了。但有一種情況需要登錄網站至特定的搜尋引擎，那就是你的客戶只使用該搜尋引擎，例如百度（Baidu）。若企業目標客戶在中國大陸，你就一定要去百度登錄（需中國的手機號碼），這樣子被Baidu搜尋引擎到的速度會比較快。

12.5 如何讓google搜尋不到？

網站架設時總有一些情況會希望網頁不要被Google搜尋出來，但網頁被Google搜尋出來其實是"遲早"的問題而已。那要如何解決避免網頁被google出來呢？這個就只能從程式面去著手。

1. 將該頁移除並回傳410（非404）的狀態碼。參考外掛： Ultimate 410 Gone Status Code
2. 設定noindex,nofollow。參考外掛： Yoast SEO、 All in one SEO
3. 將該頁canonical設定成別頁
4. 在robots.txt設定成禁止收錄

十三、網站的經營管理與行銷

網站架設完成後，絕不是放在那邊就會有源源不絕的流量流進來，然後達成某種成交並賺錢。你不理網站，網站也不會理你，所以對於網站絕對是要加以的管理、經營。以下是網站經營管理、行銷的幾個面向，可以參考看看。

13.1 網站管理要素

1. 網站當機、死機：網站勿三不五時的死機、若常發生該情況，可以考慮是否要換主機提供商。
2. 網站下載速度過慢：下載速度過慢，有可能文案、圖片過多、主機位置太遠，可以考慮優化網站下載速度。
3. 連結壞掉：網站連結壞掉，可以使用Dr.Link或其他工具檢查。
4. 網站破圖產生：一般小型網站頁數不多，請直接用人眼觀察。若為中大型網站的話，同樣可使用如上工具。
5. 網站頁面壞掉：頁面有些程式壞掉就會導至頁面壞掉。
6. 找不到頁面：連結壞掉就會產生找不到頁面的問題。
7. 網站中毒、綁架：被駭客入侵、植入病毒。
8. 官網Email、FB粉絲團留言回覆：總會有許多形形色色的Email、例如求結盟、問合作、問服務等事項要回覆。
9. 網站新功能擴充：網站下一步擴充什麼功能？如何擴充，委外或自行處理。
10. 網站檔案備份：如圖片檔、程式、文件等。
11. 資料庫資料備份：資料庫內有許多系統設定、使用者註冊資料等。
12. 網站GA、GSC設定：一旦GA、GSC設定好之後，仍是有可能會跑掉，所以三不五時還是要檢查設定是否正常無誤。

13.2 官網經營要素

1. 品牌：品牌名聲是否有愈來愈有名的感覺。
2. 網路聲量：是否有部落格介紹公司品牌，或網路上開始有人在搜尋品牌網站名稱。
3. 網站流量：網站的流程有持續升高嗎？
4. 流量品質：進入網站的使用者是否與品牌的目標族群有一致呢？
5. 維持老客戶與開發新客戶：二個主要的客戶要如何管理。
6. 網站行銷：要如何持續為網站帶來更多的流量。
7. 使用者註冊：使用者註冊，及使用者註冊後的轉換。
8. 公司開始賺錢：網站為公司帶來了業績嗎？

以貴設計手邊有三個自己的網站，貴設計每天就是在做這些事情，並且還要讓網站能夠有所營利，其實這不是一件易事，都是需要靠時間累積下來的。所以只能持續的不斷優化、再優化、再優化。

13.3 網路行銷方式

官網架設完成後，就要開始做行銷了，其實網路行銷的費用才是真的貴，隨便要有效果都是10來萬起跳。而一個Wordpress網站設計卻只要50,000~65,000。 所以自己要先有心理準備。可參考網站架設費用。以下是常見的網站行銷方式。

1. Google關鍵字搜尋廣告 這是大家最常見的行銷方式，當你在搜尋月子餐，搜尋結果的第一、二、三筆就都是Google關鍵字搜尋廣告。刊登該位置費用是算"點擊"，別人點擊一下你的廣告就會開始付款，並未成交，而不同關鍵字會有不同的價錢。
2. Google聯播網廣告、youtube廣告、FB廣告 常在各大網站會看見。這是一種很侵入性的廣告，所以很討人厭，使用者體驗不好。同樣以點擊廣告為計費方式（其實也有以曝光方式啦），點擊費用較低。適用於短期行銷活動。 聯合新聞網上的Google聯播網廣告
3. SEO 搜尋引擎優化 該行銷方式免費，但有很高的技術門檻存在。使用得當，可佔據自然搜尋結果的第一頁第1名，以賺取很多的搜尋流量進入網站。適用長春型的產品。
4. 部落客、網紅（KOL） 業配、業配就是業配文。簡單來說就是花一筆錢，請網紅、部落客在他的頻道推廣你的產品。但這需要觀察他的觀眾屬性跟你的產品屬性是否有搭，例如找一個尚未生小孩的網紅幫你代言月子餐，這一定是會曝光率很高，但轉換率很低。廣告受眾不同。 廣為所使用的行銷方式就上述幾種，但還是需看手中目前的資源有哪些有益於做什麼行銷。例如有預算就可以走Google關鍵字廣告行銷、有人願意會寫文章則可以做SEO搜尋引擎優化。

十四、網站優化

網站架設完成後，還會開啟一個大議題”網站優化”。網站優化的目地很簡單，就是為了將網站轉化營業額出來。而優化的面向也很多，如網站速度、關鍵字、使用者介面、轉換率、文案都是一種優化。每種優化都需要工具去觀察數據，才能做到準確的數據驅動優化。而不是單純的只憑感覺優化，如此會很飄渺、不切實際。以下介紹幾種常用的優化工具。

14.1 Google Analytics（GA）

如上所提GA是Google提供的網站流量統計服務工具，此外它可以觀察網站訪客的行為、狀態、轉換...等等。最主要你可以在GA做5件大事情。

1. 即時：即時觀察網站人數、流量來源、事件、地區
2. 目標對象：了解客戶、網站訪客的樣貌，例如族群年齡、性別、客層、興趣、裝置...等等
3. 客戶開發：網站訪客從那個管道來？ 也就是流量來源
4. 行為：網站訪客進入網站做了什麼事情
5. 轉換：網站訪客有無完成我們期待做的事情

例如下圖： 網頁／apply-trademark.html， 被瀏覽了28,040次、 不重複瀏覽量23,444（粗略的解釋就是2萬多人的意思）、在這頁看了3分22秒..然後近68%的人看完直接離開網站。所以可以從GA了解網站的狀態，但最難的是看完數字後你要如何去解讀這些數字，進而提出解決方案。不然就跟看股票一樣，有看沒有懂。

14.2 搜尋引擎優化SEO

何謂搜尋引擎優化呢？就是透過Google上有成千萬上億的使用者搜尋到你的網站，進入網站，並購買你的商品。所以關鍵字優化的目地就是為了提昇網站流量，不然網站就會變成蚊子館。但要如何優化呢？請先安裝Google Search Console（GSC）吧。安裝GSC後，你才可以開始大玩所謂的"搜尋引擎優化SEO呢？”。
而SEO稱為搜尋引擎最佳化，是一種行銷的技術。全世界每天都有上億次的人口，在Google輸入關鍵字做搜尋，如果搜尋出來結果的第一名，就是你的商家名稱，可想而知那個就是"黃金店面"，黃金店面帶來的人潮就是金流，重點還不用付房租。更棒的一旦搶上黃金店面，還不容易落入別人他手，是有辦法獨佔長長久久的可能性。
以貴設計所經營的另一個網站簡單創是以創業為主軸的網站，”公司登記、工商登記、網頁設計、網頁設計推薦”都有很不錯的自然搜尋排名。這些都無需廣告費，每日就會為簡單創帶來網站流量。

14.3 轉換率優化

轉換率優化是最難的一件事情，從小轉換到大轉換都需要透過工具觀察。如上所提的GA也是轉換率優化工具。另一套推薦的是Google最佳化工具（Google Optimize）。透過Google最佳化工具的AB-Testing方法測試網站訪客偏好，以增加網站轉換率。

如上圖，貴設計在測試五種字樣，那一種文字最易激起網站訪客點擊”電話播出”。 看資料顯示原始版本"立即來電"這個字樣的轉換率為1.54%，高於其他字樣（如立即播打、馬上播打）的轉換率。

14.4 網站速度優化

快速的網站，不只為網站帶流量，也帶來營收。所以確保公司官網能夠快速下載，尤其在人手一機的時代就更是金律。同時網站的下載速度也影響著轉化率，可以參考以下圖。 當速度愈慢，轉換的百分比就會減低 。 網站速度測試工具如PageSpeed Insigh（如下圖）、 Pingdom，這個分數沒有絕對。但就是建議比你的競爭對手高即可
速度優化的方式有那些呢？

1. 主機位置：主機位置就是一拍二瞪眼的事情，物理環境就是遠的話，網站下載速度就是慢。若在台灣的話，請盡量選擇亞洲主機，例如GCP、 AWS、 Siteground、 Linode都有提供亞洲的主機位置。覺的網站速度慢，把主機遷移到亞洲，若預算許可，就可選擇GCP位於台灣彰化的主機，下載速度超快無人能比。若目標族群位於歐美就請選擇歐美的主機位置。 GCP、AWS 、Siteground、 Linode
2. 減少HTTP Requests次數 減少HTTP： Requests次數的概念，會比較難懂。一般瀏覽網站時，網站一開始就會下載全部的圖片、JS檔、CSS檔，甚至從資料庫取得要呈現的資料。在每一次的"下載"，都是一個瀏覽器伸手向主機伺服器端"索取"的概念，這個索取的動作，就可以稱之為”Request”。例如向主機端索取8張圖片、1個css檔，就要伸手9次。若一個網頁畫面有50張圖片，3個CSS檔，就要伸手53次。這個9次、53次就是所謂的HTTP Requests的次數。
   一個畫面索取的資源愈少，畫面被下載、呈現的速度就愈快。所以減少前端向伺服器索取資源的次數，就是所謂的減少HTTP Requests次數。這個是確定提高速度很快的方式。但要如何減少HTTP Requests次數的方法，參考如下：
   1. 合併多個css為一個，但容易發生錯誤，需小心處理
   2. 移除未使用的css、js
   3. 減少使用第三方外掛
3. 壓縮網頁程式碼 繼"減少HTTP： Requests次數"的說明，繼續往下承接這個概念，上述提到瀏覽器伸手向主機端索取資源，以達到完整呈現網頁畫面。若這份資源是又大又重，想當然在傳回到瀏覽器端的過程中是會佔據更冗長的時間下載。為減低傳送時間，可以把html、css、js檔都壓縮。 壓縮工具可以直接在Google搜尋html minifier。
4. 移除未使用的CSS、JS程式碼： 當網站經營好一陣子，CSS、JS的程式碼總是會一修再改，所以經過積年累月的修改，總會有很多程式碼已經不再使用，所以請記得移除多餘的程式碼。
5. 精簡圖片檔案大小：圖片檔也是資源的一種，同樣都是要瀏覽器伸手向伺服器索取（即送出Http Request），所以同樣的盡量精簡網頁的圖片至200K以下，若圖片呈現在的位置更小塊應當讓檔案更小、更精簡才對。若您的行業是磁磚、攝影師、新秘，類似那種需要以高清圖檔呈現作品集的大概抓到400K為主即可。精簡圖檔有二種方式，一種是減少像素值圖檔大小不變，一種是整個圖檔長寬都縮小。 可使用的平台如Tinypng、IloveImg。
6. 減少HTML元素：在Google page insights其中有一項會計算，網頁一整個共有多少的HTML標籤，請保持你的網頁所有的HTML標籤在1500個以下。若可以的話，是愈少愈好。要如何減少HTML元素呢? 除了改變網頁排版、減少畫面呈現的資訊就別無他法了。
7. 延遲載入（Lazyload）：何謂延遲載入呢?就是"等需要再拿"的意思。在HTTP Requests中提到，網頁在"一開始載入的時後會全部向主機端索取資源檔"。有看到重點了嗎? "一開始"、"全部"。 但通常訪客一進入網頁的時後，只會看到網站最上方的第一個畫面，此時只需給訪客看到第一個畫面所需的圖片、資源檔。 所以尚未用到的圖檔、js、CSS 則可以等訪客將網頁畫面下拉到 下方，再將相對的呈現圖檔、資源檔即可。所以延遲載入就是這個概念，讓不是在第一個畫面所需的圖檔、影片檔無需載入，直到網頁拉到第二、第三個畫面才能載入。 您可以直接在Google搜尋Wordpress lazyload plugin直接安裝再開啟即可。
8. 善用CDN服務：最著名的CDN服務非Cloudflare莫屬了，但CDN是一個什麼樣子的概念呢? 其實就是說你的主機在台灣，但美國的訪客要瀏覽您的網站速度就會很慢（物理環境遠）， 所以CDN的服務就將您的資源檔先儲存在它們在美國的主機，美國的訪客瀏覽你的網站便先從CDN服務抓取資源檔，便不是從台灣抓取的。如此便大大的節省時間。 但這個以台灣來說幫助不大，因為Cloudflare沒有台灣的免費節點。
9. 伺服器端程式優化： 伺服器端的程式演算法優化，一般不是IT咖這個就甭提了，所以可以直接跳過。若您有興趣的話，不妨可以從這幾個角度優化。
   • 網頁畫面上所需要的欄位，全都放在另一個表單（部份情境下適用）
   • 表單的欄位，也適用"延遲載入"
   • 抓取欄位資料，只抓取所需的資料，而不是抓取整個物件資料。
   • 移除表單內無用的欄位
   • 針對字串欄位的長度給予適當的長度欄位。例如電話的長度就只有10來碼，就只需給至多20個字元的長度。
10. Wordpress網站速度優化：說很簡單也很簡單，說很難也很難，怎麼說呢? Wordpress只要安裝一個"延遲載入"的外掛立馬就好了，相當的簡單，無需寫任何的程式。但要到更高階的網站下載速度優化其實是相當有難度的，你不只要懂PHP語言、還要懂Wordpress官方架構的定義。所以以Wordpress來說網站下載速度優化有限，能夠優化的部份我列在如下。主機位置、壓縮網頁程式碼、精簡圖片大小、Lazyload、善用CDN服務。上述幾個是目前Wordpress網站下載速度優化可以著手的部份。其餘都很難處理。

14.5 UIUX優化

只要做網站很多老師開始講到UIUX，什麼是UIUX？他們差異在哪裡？
UI＝產品該怎麼呈現，要設計每一個與使用者互動和操作的畫面。像是網站所有的風格、整個產品設計元素的一致，例如：定義什麼時候出現警告狀態的動作、什麼時候用什麼元素的跳出與跳出來的方式等。
UX＝產品用起來的感覺，UX是要確保產品從這一步到下一步符合邏輯，這需要第三人來測試，我們須在旁邊觀察使用者行為，因為自己測試很容易有盲點。 UX要關心所有會影響使用者體驗的一切，例如：資訊架構、互動設計、內容、價值觀等。
所以其實UI與UX是密不可分的，UX是使用者體驗，使用者體驗當然也包含了UI的畫面與互動等。UXUI感覺太難了？沒關係，網站本來就是慢慢優化，一步一步來，所有的大廠牌的網站也不是一次到位，他們也是慢慢測試慢慢地觀察使用者行為來優化網站的。
新手可以首先著手於介面、動線，例如：我想讓使用者點到Ａ產品，我的動線是不是都有導到Ａ產品呢？或著可以讓網站視覺一致，按鈕的顏色、按鈕的大小、按鈕的動畫等，一點一點提升網站。
除了介面，還有文案也很重要，例如：按鈕 「請下載」、「立即下載」、「下載立即得到優惠劵」，這3個其實會有不一樣的結果，這都需要測試過後才知道。 這時候可以使用上面文章有提到的工具「 Google Optimize」，做一個AB-Testing方法測試使用這偏好。
再來可以請第三人（排除工程師、設計師、製作的人）使用體驗，才能真正了解使用著通常一到網站會做什麼、看什麼、有沒有照著與你操作的差不多？還是不一樣？
如果沒有太多人可以幫忙，那就用真實使用者的行為吧！可以使用網路工具「Hotjar、 Clarity」，提供熱點圖跟錄影讓你一眼看出網站使用者在做什麼，快速了解使用者有沒有迷路。 可以查看熱點與瀏覽動線（圖片來源：hotjar）

十五、網站外包

公司網站架設，總是希望找到優質的網頁設計公司， 但在許多資訊未透明化的期況下，要找到正派、老實、不亂呼弄的廠商，除多了解產業知識（例如 網站架設費用、 網站架設流程）、找網站架設推薦、親友介紹以外 ，接著就是燒香拜拜，所以降低風險就變的很重要。
貴設計也是網頁設計公司，常聽到很多業主網站被綁架的案例，不論甲乙方對錯、分手總是有難免的，但要如何與網頁設計公司安全分手呢？ 此外你知道企業最常被網頁設計公司綁架的是什麼呢？ 網址、無法搬家、網站GA資料。若網站的所有人對這三樣沒有100%的控制權利，到時後有可能遭受到毀滅式的分手 為公司帶來重大的損害。接下來就讓貴設計幫大家解析如何避免這災難吧！

15.1 如何避免網址綁架？

網站架設流程的第2步就是購買網址。 若公司網址不在公司手上是最X100嚴重的問題，因為只要一個動作，將網址的IP設定移除or對映到18禁網站，貴公司官網3分鐘馬上掛，就是那麼的毀滅式分手，千萬不要懷疑。 還有若公司網站已操作多年的SEO，有許多自然流量進來，那包你被網站設計公司壓的死死的，漲你價，你一點也不敢吭聲。
所以找網頁設計公司委外形象官網時，請務必自行購買公司網址。購買網址是一件很簡單的事情，請直接選擇 Godaddy買網址。一旦買到網址的時後，在網頁設計公司未收到尾款時， 你可以大大的放心將帳密提供給他們做一些網站架設設定之類的事情，付尾款之前，請務必把密碼換掉。

題外話，最近又聽到太多被網站設計公司綁架的案例，解決方法就是直接向網站架設公司索取網域的擁有權。例如GoGaddy就可以將網址轉出到另一個GoDaddy帳號。 所以你只要到GoDaddy註冊新帳號，請網站架設公司轉出到你的帳號，每年再固定信用卡扣款即可。要是網站設計公司說無法轉移呢？除了換網域，沒有第二個方法。但舊網站請做二件事情。
在首頁主視覺上大大強調，"本公司官方網站已正式轉移到https://abc.com.tw xxxxx"之類的話，這的目地是為了導流，讓流量進來新網站轉單成銷售額。第二更改所有官方網站網址，例如Google商家、FB、IG、Youtube。Google商家一定要做。 做了以上的二件事情，最長抓個一年的時間（陣痛期），新網站的品牌名會慢慢浮到Google搜尋結果的第1頁第一名，再把舊網站關閉即可。若仍是不行，就只能找貴設計幫你重新Wordpress網站架設一個官網了（我們超正派）。

15.2 如何避免網站無法搬家的窘境？

網站架設軟體、平台市面上有百百種，多得是讓人眼花撩亂。例如Wix、Weebly、strikingly、Joomla、Drupal、中華黃頁、智邦、91APP、OpenCart、Java、C++、C語言、Wordpress.com、imweb、monosquare、webnode、Wordpress.org 自有網站架設技術..（族超級繁就不及備載了）。
若是企業要經營網站的話仍是最推薦Wordpress網頁設計 。是為什麼呢？ Wordpress在全球的市佔率有40%，代表全世界有4成的網站都是Wordpress技術製作的（Wordpress是什麼），如FB、美國白宮都是。這除了代表Wordpress有公信力、認可外，最重要的一件事情， 你可輕易的搬家到任何Wordpress主機上。若網頁設計公司使用Wix 、Weebly、strikingly甚至自有架站技術，你是搬家的機會都沒有，所以你只能保證跟廠商結下的是一段好姻緣。
剛提到使用Wordpress網站架設可以輕易的搬家（使用All-in-one-migration），但在搬家的前提，完整的網站檔案是少不了的。 以貴設計提供給客戶的保障是，網站首次做完會先提供一次完整備份檔案、爾後每日天天備份，客戶會在提供的Google雲端信箱內取的最新的備份檔案 。同樣的換做是你 請在網站完成後，請先索取一份完整備份，後續也可詢問要如何拿到每日的備份。一旦有備份檔案要分手的時後，找間是WP主機的網頁設計公司重新部署網站就可以了。
重要！重要！務必請網頁設計公司提供網站後台的最大權限，不然即使你搬家也是沒有權限可以動網站。

15.3 如何避免網站GA資料綁架

在【網站優化】面向與工具探討，中提到 GA（Google Analytics）是Google提供的一套網站分析工具，透過它你可以了解網站的流量、每日使用者的變化與行為、使用者分析、熱門產品、網頁速度、站內搜尋、轉換...等等。 所以在網站經營過程中，GA數據是非常重要的，透過GA資訊才可做網站優化，例如最重要的就是網站流量。所以能力許可的話，自行申請Gmail安裝GA（如何在Wordpress網站安裝GA呢）， 不行的話，請自行提供Gmail將GA、GSC綁定在該Gmail上面。事後你在換掉密碼就可以了。
上述的介紹絕不是一竿子打翻一船人，只是認為業主在經營企業都應該降低各式的風險，而貴設計只能協助您在網站架設的保障，讓您100%的放心、安心使用我們的網站架設的服務。就算不愛我們家的風格，找任何一間網頁設計公司也都應該使用相同的做法，這才是保障企業形象官網正確的方法。 不然其實每年花了上萬元，你只是網站的租用人，你不是擁有者。

十六、關於客製化網站這檔事

客製化網頁設計固名思義，全依委外廠商提出的特有需求設計網頁功能，但其實真的每一個委外廠商都需要客製化的設計服務嗎? 其實不然，大約有80%的廠商使用Wordpress網頁設計就能滿足大部份的設計需求。 而網站架設費用卻只要30%或更低的價格費用。所以差異在於發包廠商不了解，網站架設公司也不願意講（可以賺50萬，為什麼要賺5萬呢），那我們就快點進入正題吧！

16.1 客製化網站的適用時機？

只要你的產品、服務不是建構在網路上就能滿足消費者需求，網站客製化一點都不需要。例如皮件、課程教學、手工肥皂、傳產電子零件.... 。 此時網站對公司來說只是一個形象網站、銷售管道。
但相反的若你要把產品、服務建構在網路上滿足消費者需求，較高的機會上你會需要客製化網站，例如線上皮件製作教學、線上找工作（104）、房屋（591） 、外送（Uber Eat、熊貓）之類的。區分的方式很簡單，只要移除網路這塊你還能做的話，其實你就不需要客製化網站。使用 Wordpress網頁設計就能滿足近80%的需求，另外20%的需求看找國外的Wordpress外掛 或許就能滿足你所有的需求。所以公司網站架設之前，請先諮詢專業的 網站架設公司（如貴設計）。千萬不要貿然就決定網站客製。

16.2 客製化網站的優缺點？

客製化網站讓人又愛又恨，它非常好用，將近可滿足99%的需求，但就是非常的昂貴，隨便都是上萬起跳，更多的客製化網頁設計的好處與壞處參考如下：

客製網頁設計好處方面，因為網站、系統是純寫程式一點一滴打造，所以程式開發員有100%的控制的能力，所以通常只有開發不出來的功能，沒有無法開發的功能。 其他優點同樣因為畢竟使用原刻程式語言（java、php、.net）打造，所以在彈性、SEO、網站速度都有很大的優化空間。 缺點方面，最大的問題就是費用高昂，每個功能都是萬元起跳。若專案規模大，上千萬、上億都是有可能的，且開發時間冗長。
第二點壞處的部份，即然稱之為客製化網站，所以程式邏輯都在軟體開發員身上，自已要修改、調整、開發新功能都難（所以程式交接、註解、說明手冊就變的很重要）。因為你要先搞懂對方寫的程式，你才可以調整。 所以其實修改功能比開發新功能還要複雜，費用會更貴。 優化這塊另外講一下，以Wordpress的優化方式常可以安裝許多外掛並啟動一下即可，但客製化程式並沒有，你必需要了解優化什麼與怎麼優化。所以它的優化門檻較高，但效用會比較好。 反觀Wordpress的外掛安裝完會遇到瓶頸，就上不去了，因為程式架構的問題就卡住了。

16.3 客製化網站與Wordpress套版網站的差異？

客製化網站與Wordpress套版網站的賣點其實是不同的，一個是賣彈性靈活、賣客製。另一個是賣快速方便、便宜、功能。

16.4 客製化網站費用價格？

客製化網站費用還真沒有一定，小到學生作業幾千元，大到上市貴公司上千萬的價格都有，完全就取決於網站功能數量與需求功能的難度，但一般上10萬元是跑不了的。
在做客製化網站之前請務必弄清楚網站需求，因為客製化網站最大的問題就是業主自已的需求都搞不清楚， 例如很多業主的需求都是使用者在網站上做特定的事情，但在網站需求卻都未估到會員管理系統，光是會員管理系統 所包含的基本頁面就有"使用者註冊、密碼忘記、登入、會員登入的後台管理頁面"，至少就四頁了。還沒有包括FB登入、Google登入、我不是機器人、Email發信的基本功能。 而網站管理者的後台也需要實做"使用者的新增、刪除、修改、啟用/停用權限"的功能。請參考最近我們提出的客戶需求單。 所以廠商在估價的時後，也不敢把價格估死，因為通常都是開工的時後做下去，業主才知道缺了什麼、要加什麼。 若早在網站功能完成前提出來修改，還不會被額外收費，最怕的就是廠商做完功能的時後，才驚覺這不是我要的，此時你會收到一張程式設計修改報價費吧。 所以網站架設報價的時後通常只會收到費用範圍。等到有意簽約時後會先收一筆功能需求訪談費用（功能需求訪談有可能會耗到好幾天）、功能需求訪談出來時後，再簽約時，再正式收取製作網站費用。收費模式因為金額有可能較大，都會看業主偏好，分多次收款。 客製化網站的賣點客製、彈性、靈活。所以相對的程式功能需求、設計感及風格都是獨樹一幟。再加上客製化網站之前 還有一件很重要的事情要做就是"需求探訪"。貴設計過去為了做一個專案，光是需求探訪就花了3個星期的時間，每天就是找使用者聊天、談需求。 所以客製化網站的費用高昂不是沒有道理的，需求探訪+專案執行少則1個月、多則半年~1年都是有可能的。

十七、網站架設免費資源

資金拮据，創業家無不想圖個免費網站架設（例如：Google Site），貴設計跟你講，絕對有可能，即使是免費購物網站架設也都有。但即然是免費的，在網站軟硬體資源、美感還是會有限制的，但至少以一個入手的網站架設玩玩是足夠的。 等事業正式進入量產期、資金足夠，可轉往Wordpress網頁設計。 以下是貴設計為你整理了一些免費資源讓你能運用，不管是寫文章、網頁設計、還是要發佈文章，都是非常夠用的。

17.1 免費虛擬主機/網站

創業初期想要製作網站，需要虛擬主機、網站空間，貴設計找到了幾個免費網站空間，讓你省下一筆費用，也能享受不錯網站空間。

PS：免費虛擬主機/網站空間都會有各種風險，畢竟是免費的，主機商擁有主導權，如果事業步入軌道，可以考慮採用付費方式，確保公司網站能一直都好好的。 PS：做部落格做到流量太大時，也建議採用付費方式，畢竟很多免費的都會有限制流量或是容量，到時候會導致網站掛掉，要特別注意一下。

17.2 免費網站架設平台

想自己打造網頁卻不會寫程式嗎？以下介紹免費架站平台完全不需要程式碼也能在幾分鐘就擁有高質感個人或企業網站，只需要拖拉、編輯的方式產生網站。

17.3 免費購物網站架設

想在線上開店又不想在購物網站賣，那邊競爭太強烈了外，又綁手綁腳的，那就來自己架設購物網站吧！以下提供各大電商網站，基本上電商網站很少有免費的，都是需要收點費用，電商有需要更多設定，例如：安全、金流、物流等，所以有些會採用抽成、付一些基本費用，很多家都提供14-30天的免費體驗，都可以嘗試看看你喜歡哪一家。

17.4 免費網頁模組下載

會寫程式的人看過來～這裡有免費網頁模組可以下載，免去從0到有，免自己動手寫程式，大大提升網站架站的效率！以下有CSS、HTML5、Bootstrap、Wordpress網站模板、佈景主題，都是響應式網站，對製作網站開發者來說，是一大福音！

17.5 免費圖片下載

設計師、部落客與小編常常需要大量的高質感的照片，在哪裡才能找得到免費的圖片呢？很多圖庫下載時會發現有浮水印、或著圖片很小，必須付費才能下載原始檔，以下提供免費、沒浮水印、不小的圖片，快收藏下來吧！

1. Pixabay：百萬張免費的照片，不需要註冊，可用於商業用途。
2. Unsplash：高解析度圖庫，無需付費、也不用標記原作者名稱，可用於商業用途，每十天更新10張圖片。
3. Picjumbo：免費高畫質圖片，可商業用途。
4. FreeImages：30萬張免版稅照片，可以商業用途。
5. Morgue File：38萬張免費高畫質，可以商業用途。
6. Gratisography：免費高品質照片，可商業用途，每日新增圖片。
7. Pickupimage：免費高品質照片下載自然和戶外場景，無須要求授權，可以複製、修改等，可商業用途。
8. Life of Pix：提供免費高品質照片，可以使用自由修改、複製，可用顏色去搜尋照片，可商業用途。
9. Foodiesfeed：超過1600張食物照，如果需要美食相關照片，這可以下載，可商業用途。
10. Pexels：可任意使用的免費上萬張圖庫相片，免費用於商業用途，無需註明相片來源。
11. CleanPNG：提供免費高畫質透明背景的圖庫，無限下載。
12. SplitShire：免費下載照片，可商業用途。
13. Stockio：免費下載照片，可商業用途。

17.6 免費影片下載

網站架設為了要讓網站更生動活潑，有時需要一個背景影片，以下推薦給你。

1. Pixabay Free Videos：數千隻免費的影片，可用於商業用途。
2. Coverr：免費影片下載，可商業用途。
3. SplitShire：免費影片下載，可商業用途。
4. VidsPlay：免費影片下載，無版權限制，可商業用途。
5. Mixkit：免費影片下載，有自然、商業、動物、食物等，可商業用途。
6. Stockio：免費下載影片，可商業用途。

17.7 免費圖片編輯

小編、部落客絕不能錯的的免費圖片編輯，完全免費，並且可以自由使用下載，不要猶豫了，趕快把這篇加入書籤，也可以分享給朋友～

1. Photopea：類似Photoshop線上版，可以免費編輯圖片、開啟PSD、XD、PDF、RAW、Sketch、SVG等。
2. inPixio Remove Background：網站提供免費去背，可以迅速去除背景轉為透明背景。
3. Moose Photos：不用再找圖庫找圖了～自己動手做吧！可以選擇人物、物件、背景來製作圖片，可以免費下載JPG檔案，如需要PSD要付費。
4. Vector Creator：使用向量插圖製作圖片，打造符合你的網站，可以下載PNG檔案，如需要SVG要付費。
5. DesignCap：加快你的創作過程，為你的業務、活動、社交媒體等製作精美的圖形設計，可免費下載JPG檔案，可以免費儲存5個設計。
6. Stencil：社群媒體宣傳圖、廣告圖、部落格圖片都需要美美的Banner，可以在這裡製作，內建有大量的免費圖庫，加上文字，有各式各樣廣告尺寸。
7. Canva：人人都能建立專業的設計，數十萬張免費照片和圖片，100+ 設計類型，完全免費。

17.8 免費圖示

網站架設很需要一些圖示讓網站更活潑，以下免費圖是可以下載。

1. IconPark：上千圖示可以下載SVG或PNG。
2. Evil Icons：線條圖示，免費SVG下載。
3. Icon8：萬個免費圖示，可下載PNG、SVG
4. Basicons：208個圖示免費下載。
5. System UIcons：免費使用220個圖示。
6. Feather Icons：286個圖示免費下載。

17.9 免費向量插圖

1. PixelTrue：每週都會更新向量圖與動畫插畫，可商業用途。
2. PICaboo：日本可愛向量圖，可下載EPS、PNG檔案，可商業用途。
3. FLAT ICON DESIGN：日本扁平化設計圖，走簡約風、可愛，可商業用途，有提供Ai、EPS、JPG、PNG、SVG下載。
4. illustAC：人物、交通、植物、美食等的插圖，可商業用途。
5. FREE LINE DESIGN：各式各樣的分隔線裝飾線，可以免費下載，可商業用途。
6. Icons8 Illustrations：提供插圖下載，讓不會畫插圖的創作者，也能有高質量的圖像，可以用於商業用途，但須標示出處來源。
7. Blush：免費用戶只能下載小型or中型的PNG圖片，可商業使用。
8. Free Control Illustrations：提供108種向量圖，免費的只提供PNG檔案下載，可以使用商用途，付費才提供可編輯向量檔案。
9. DrawKit：每日更新，提供彩色與單色風格SVG下載，圖包含了商業、人物、交通、旅行等，可商業用途。
10. unDraw：扁平化插畫設計，很適合使用在於網頁設計、開發、簡報製作，可免費下載SVG、PNG檔案，可用於商業用途。
11. Illustration Gallery：每週更新，提供向量圖，提供SVG、PNG檔案下載，可自行修改、編輯，可用於商業用途。
12. Stories by Freepik：可以在線上自訂調整顏色、背景、人物等，還可以變動態的，可以免費使用，但需標示來源。
13. illlustrations：這是一個開放原始碼插圖庫，已經有120+向量圖，開放下載Ai、SVG、PNG、EPS，可用於商業用途。

17.10 免費CDN

1. CloudFlare
2. Incapsula
3. Jetpack免費CDN：Wordpress專用

17.11 免費Https

1. Cloudflare：除了DNS，也提供內建免費SSL功能。
2. ZeroSSL
3. AlwaysOnSSL
4. SSL For Free

十八、網頁設計相關名詞

18.1 響應式網頁設計

在RWD響應式網站設計尚未問世之前，網頁設計會"分別"為手機版、電腦版、平版設計， 例如MOMO購物電腦版https://www.momoshop.com.tw/ 手機版https://m.momoshop.com.tw網址前會有一個m. 這是因為早期RWD響應式網頁設計未出現，手機網站設計便只能以這種模式設計（稱之為AWD），所以你的電腦版、手機版就會使用不同的網址。而使用AWD網頁設計你就需要三套程式，做開發、備份、測試..%^&*（），許多繁瑣的管理，開發時間又臭又長。 而唯一的好處就是各別的優化較容易。
RWD網站設計的出現徹底解決AWD帶來的困擾，從此統一一套程式、一個網址就解決了不同載具的呈現，所以RWD響應式網頁設計才得以成為全球的主流技術。那RWD響應式網頁設計是什麼？
RWD響應式網頁設計又稱為回應式網頁設計（英文： Responsive Web Design）。響應式網頁設計是讓網站內容會隨著訪客載具（電腦、平版、手機）自動調整成適當的排版（只需一套程式代碼）。 讓網站使用者能有較好的網站使用體驗，（好的網站使用體驗可以提高客戶詢價、帶來營業額、增加業績）
在過去手機未成王道載具之前，網頁排版只需完美呈現在電腦螢幕。但隨著手機、平版、各種尺寸手機螢幕的興起，過去一個14寸螢幕的網頁內容要塞到只有小小5寸的手機螢幕or8寸平版裡面，這跟本就是不可能的事。 因此響應式網頁設計（RWD）的設計概念就跑出來了（也有稱為自適應網頁、變形蟲網頁設計），它的概念就是一種流動性的排版方式，如水在不同的容器內，會自動隨著容器而流動變化形狀。
所以響應式網頁設計（RWD）就是讓你的設計出來的網頁，就能夠完美的呈現在各式大小的螢幕內，一點也沒有網頁跑版、壞掉之問題。 重點只要一套程式代碼，便能完全開發RWD。這點就是AWD無法相比的。
所以響應式網站的優勢是「同一個網站在不同尺寸的螢幕上會自動調適內容，以符合版面大小，都能夠清楚地看到網站的圖片和內文，都能完美呈現。」支援多種瀏覽裝置，如電腦、平版或是手機等，可增加行動裝置用戶外在您的網站上直接下單的機率。 再者台灣使用智慧型手機高達82%，提供給您的用戶最佳瀏覽體驗，讓您的網站手機、平板、電腦一次搞定！品牌形象一致，不需要針對不同版本而設計不同視覺效果，可使用單一網址做宣傳。在SEO（搜尋引擎最佳化）加分，因響應式網站不必拆成電腦版、手機版兩個連結，因此流量分析能統一，有利於SEO。

18.2 一頁式網站

一頁式網站，指網站在網站架設時就規劃成只有一頁， 因為只有一頁，因此在網站製作上特別簡單方便，成本又低（參考網站架設費用），但也容易成為詐騙網站的手段。在網站資訊傳達方式，一頁式網頁的製作設計讓使用者閱讀，更能依網站的文案設計，讓使用者沉浸於故事的發展而提高轉換率。 所以一頁式網站特別受企業愛用於廣告活動、一頁式購物車網站的原因。 一頁式網頁方便好用，但也有相對的壞處，但整體上是優大於缺，尤其在一頁式購物的銷售頁方面，銷售轉換非常好。
一頁式網站的優缺分析？

1. 網頁製作成本低:因為一頁式，所以在溝通、製作、素材的準備上相對的降低，若為自製更相對的簡單快速。 常用於短期性的活動網站、廣告頁面。
2. 故事型瀏覽:一頁式的關係，會讓使用者頁只能依網站所安排的使用者劇情發展，讓使用者易於閱讀。
3. 轉換率高:同樣因為一頁式的關系，讓使用者不會因為網頁有多個出口按鈕而離開頁面，所以會聚焦在該頁面瀏覽，直到最後進而轉換。
4. 手機瀏覽順暢:手機當道的時代，有許多的網站因設計不良，並沒有所謂的RWD，一頁式網站就無這個問題，直接從上往下瀏覽，非常順暢。

至於一頁式網頁設計的缺點呢?

1. 詐騙網站:由於製作成本低，眾多的詐騙事件偏愛使用一頁式網站。
2. SEO差:一頁式網站要的就是精簡與準確的傳遞訊息，對於SEO愛的就是內容，一頁式網頁實在很難寫的落落長的文章。
3. 資訊豐富性有限:同第二點的理由，因為無法提供豐富的內容，所以只能提供重要內容。二來手機速度下載較慢，也無法放滿滿的圖片、影片、動畫提供網站豐富性。

一頁式網站與形象官網比較
一頁式網站如登錄頁、銷售頁，其主要的目地是為了達成交易(如留下Email、購買、註冊帳號、播打電話)。這點目地跟官方網站是截然不同的。網站的目的是提供必要的內容，讓訪客透過連結、導覽在網頁之間移動， 取得必要的資訊。反觀一頁式網站的目的性就只有一個"達成交易"，就是讓訪客抵達該頁面，留下、申請或購買這個頁面的目地(達成交易)。
因此許多一頁式的銷售頁只需提供必要的資訊，無需準備多餘的選項讓訪客藉由其他連結、電話號碼、Email、名片資訊而跑到銷售頁外，失去交易的機會。而設計也是專注在顧客的動線只有設置一道，終點也是設計為一個，一頁式的專注引導客戶完成交易目地。

網頁設計教學自學入門款

1. 從0到100+的網站架設術
2. 一本絕不能少的網頁設計自學書
3. 從網頁製作到架設網站一條龍教學
4. 網頁設計難嗎? 無Code無痛的教你如何架設網站?
5. 11種免費網頁設計資源統統分享給你
6. 完整網站架設完整流程
7. 手機世代的響應式網頁(RWD)教學
8. 世佔40%的Wordpress網頁設計教學

📥立即下載檔案