想要架設網站自學？前IBM工程師的網頁設計教學
（瀏覽：5352  更新日期： 2024-10-27）

一、企業需要官網？

為什麼企業需要建立自己的官網？對許多企業家來說，是否建立一個官方網站是一個值得深思熟慮的問題。在討論這個話題之前，我們不妨先來看一些數據：你知道目前全球有多少網路使用者嗎？又有多少個網站存在呢？根據InternetLiveStats的數據，全球已有超過50億的網路使用者和近11億個網站。 （資料來源：InternetLiveStats）
在這個數字的背後，如果一個企業沒有自己的官網，相當於錯過了與全球50億網路使用者的互動機會，也無法在網際網路時代中積極發展，更不用說進行網路行銷或透過網路進行商業活動了。 而且，你知道每天都有數十億次的Google搜尋活動嗎？以下圖示顯示，在某天晚上8:30，Google的搜尋次數已接近71億次。這些搜尋活動背後的用戶都在尋找各式各樣的信息，如「2021台北市牛肉麵推薦」或「最新防疫規定」等。沒有官網的企業自然無法透過Google搜尋引擎獲得推薦。 （資料來源：InternetLiveStats）
綜合以上兩點，官方網站的重要性不言而喻。然而，許多企業主可能會有疑問：我已經有了粉絲專頁、YouTube、Instagram等社交媒體平台，我還需要網站嗎？這是很多人在諮詢時會提出的問題。實際上，雖然台灣人使用社交媒體的比例非常高，但擁有一個專業的官網仍具有其獨特的價值和必要性。

1.1 架設官網的好處？

在當今數位時代，建立官方網站對任何企業來說幾乎是必需的。即使有些企業尚未充分認識到官網的重要性，他們至少也會建立像是Facebook粉絲團這樣的線上存在。無論是個人還是企業，建立網站或社交媒體帳號，都是為了接觸廣泛的網路用戶群。然而，擁有一個官方網站是被推薦的最佳方式，因為哪些大品牌僅僅擁有Facebook粉絲團或YouTube頻道呢？以下是一些設立官網的優點：

1. 官方網站象徵公信力：官方網站是企業對外的代言人和品牌的發聲管道，因此企業的主要消息和公告都應該透過官網發布。此外，行銷活動和員工的名片等都以官方網站為主要連結，強化了公眾對官網的信任與權威感。
2. 官方網站展示企業形象：一個專屬的官網不僅能夠展現專業的品牌形象，也顯示出公司的企圖心和承諾。
3. 官方網站增強信任感：想像一下，如果你需要選擇一家之前未合作過的公司，一家擁有專業且資訊完整的官網，與另一家僅有社群媒體資訊的公司，你會覺得哪一家更值得信賴呢？
4. 官方網站聚集行銷歷程：官網的網域代表著企業的價值，且獨立於其他平台之上，對於搜尋引擎而言具有累積效應。即使網站內容有所更改，所有資訊仍會被記錄在網上，使行銷活動可以持續進行。
5. 官方網站內容永久保存：官網能夠長期保存文章、內容、訪客數據等，使訪客能夠輕鬆找到他們感興趣的內容。透過內容行銷和搜尋引擎優化（SEO），這些內容可以創造更大的行銷效益。
6. 官方網站是更持久的經營平台：雖然目前Facebook（現稱為Meta）看似穩定，但誰能保證它將永遠存在？如果哪天Facebook停止運營或者出現更吸引人的新平台，擁有的粉絲和討論可能瞬間消失。
7. 官網代表企業專業性：當你需要選擇合作夥伴、外包服務或購買產品時，擁有官網的企業和沒有官網的企業，你會優先考慮哪一個呢？

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

這是一個很好的問題，許多企業主都有類似的疑惑：既然可以免費使用Facebook，為什麼還要架設官網呢？答案其實很簡單，你有見過哪個大品牌只有Facebook粉絲團而沒有官方網站的嗎？顯然，架設官網是有其重要性的。以下是官網與Facebook粉絲團的一些比較，供您參考：

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

網站建設的成本差異很大，這主要取決於選擇使用套版網站還是客製化網站。這兩者在設計理念和功能上有顯著的不同：

• 客製化網站強調的是彈性和個性化定制。
• 套版網站則著重於快速、方便和成本效益。

所謂的"半"客製化網站，是指在選定的套版架構允許的範圍內，透過程式碼調整（如CSS、JavaScript）來微調版型細節，比如網站元素間的留白、邊界，甚至簡單的功能調整。這種方式的好處是，一開始您選擇了版型風格，隨後網頁設計公司可根據需要對特定功能進行調整，這樣可以在縮短視覺設計的製作時間的同時，迅速搭建起網站。套版網站中，使用WordPress是很普遍的選擇，因為它的上手門檻低，並且允許用戶自行調整網頁。此外，增加CSS和JavaScript也可以進一步實現半客製化的修改，使得使用WordPress的套版網站具有更高的彈性和擴展性。

二、網站類型有哪些？

當企業決定架設官方網站時，首先應該明確了解哪些類型的網站最適合自身需求，以確保投資精準，達到預期的商業目標。一般來說，網站可以分為以下幾種主要類型：

2.1 形象/品牌網站

大多數企業會選擇建立一個全面的品牌官網，這類網站能夠提供豐富的資訊，涵蓋公司概況、服務與產品介紹等多方面內容。官網通常包括以下幾個重要組件：

• 公司介紹：詳細描述公司的歷史、使命、願景和核心價值觀。
• 服務介紹：列出公司提供的各種服務，並詳細說明每項服務的特點和好處。
• 產品列表：展示公司產品的詳細目錄，包括產品規格、功能、使用方法等。
• 常見問題：提供對顧客常見疑問的答案，幫助顧客更好地了解產品和服務。
• 聯絡資訊：包括電話、郵箱、辦公地址等，方便顧客直接聯繫。
• 交通資訊：提供地圖、交通路線和停車資訊，方便實地訪客找到公司位置。
• 最新消息：更新公司最新動態、產品發布、活動通知等。
• 部落格：分享業界資訊、專業知識文章、公司新聞等，增加網站內容的豐富性和互動性。
• 媒體報導：彙集所有關於公司的外部報導和新聞文章。
• 價格方案：明確展示各種產品或服務的價格，幫助顧客做出購買決策。
• 產品訂購：提供一個直觀的訂購平台，使顧客可以線上直接購買產品。
• 合作提案：說明合作模式、合作條件等，吸引潛在的商業合作夥伴。
• 社交媒體連結：連接到公司的社交媒體平台，如Facebook粉絲團，增強與顧客的互動。
• 經銷據點：列出所有的經銷據點信息，方便顧客找到最近的銷售或服務點。
• 活動專區：介紹即將舉辦的活動，並提供報名或參與方式。

2.2 電商購物網站

對於專注於線上銷售產品的企業，如保養品、手機配件、家用電器及文創商品等，建立一個電商網站是極為合適的選擇。電商網站的設計通常以促銷和銷售為中心，首頁設計會特別突出，以吸引顧客的注意力和促進銷售。
典型的電商網站設計包括：

• 首頁輪播廣告：展示新商品折扣、節日優惠等各類促銷活動，通常配有吸引人的圖像和引人注目的標題。
• 熱銷和最新產品：在首頁下方展示熱銷商品和最新上市產品，方便顧客快速瀏覽和購買。
• 商品類別導航：清晰的分類導航幫助顧客快速找到他們感興趣的商品類別。

雖然主軸為購物平台，電商網站同樣重視顧客服務與資訊提供，常見的導航列包括：

• 聯絡我們：提供顧客聯絡企業的方式，包括電話、電子郵件及實體地址等。
• 最新消息：更新有關產品發布、公司新聞或特別活動的最新資訊。

這樣的網站設計不僅促進產品銷售，同時也提升了顧客的購物體驗，增強顧客對品牌的忠誠度。

2.3 形象+購物網站

形象+購物網站是一種結合了企業形象展示和電子商務功能的網站類型，旨在同時推廣品牌形象和促進產品銷售。這種網站在設計上既強調公司的專業形象，也注重提供用戶友好的購物體驗。 首頁的設計通常如下：

• 公司形象展示：首頁設計會重點介紹公司的優勢、解決方案和公司理念，透過吸引人的視覺元素和精煉的內容來傳遞品牌價值。
• 產品展示：在突出公司形象的同時，首頁會展示最新商品和熱銷產品，並通過精心設計的導航引導顧客訪問特定商品類別的頁面。

這種網站的設計不僅有助於建立品牌信任，還能直接推動銷售，是許多希望在線上建立強大品牌同時銷售產品的企業的理想選擇。透過結合形象宣傳和電商功能，企業能夠更全面地與目標客戶互動，提高轉化率。

2.4 媒體網站 or 部落格網站

媒體網站和部落格雖然在內容表現上有許多相似之處，主要都是以文章內容為主，但它們在設計和目的上還是有一些細微的差異。 媒體網站通常設計得更為豐富和視覺吸引力較強，【部落格】通常設計更為簡潔，重點在於內容的個人性和原創性。
選擇經營媒體網站還是部落格，取決於你的資源、目標讀者群以及內容策略。無論哪種形式，重要的是保持內容的質量和一致性，以及與讀者建立和維護良好的互動關係。

2.5 論壇網站

論壇網站如MOBILE01和Dcard是以社群互動為核心的平台，用戶可以自由發表話題、討論問題，並進行互動回應。這種網站的成功往往依賴於活躍的用戶基礎和高質量的內容互動。 管理論壇網站的挑戰就有許多，例如初期用戶參與、內容和用戶管理、技術支持。
如果沒有足夠的資源，如一個完整的IT支持團隊和行銷策略，經營論壇網站可能會非常具有挑戰性。需要準備的不僅是技術解決方案，還有用戶管理策略和內容創建計劃。
論壇網站的成功關鍵在於能否創建一個有吸引力的平台，讓用戶願意持續回來並參與討論。這需要時間、耐心以及創意的行銷策略。

2.6 客製化網站

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

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

3.1 基礎平台

對於個人部落格和初學者，平台如痞客邦、Medium、Google Blogger和Google協作平台非常適合。這些平台適合用於練習網站架設、撰寫文章。如果是預算有限且不太懂網站架設的企業，可以考慮使用中華黃頁或智邦生活館，這些平台可以用年費約1,500元就可以搭建一個基本的網站，功能簡單且設計基礎，但至少能夠擁有一個自己的網站。

3.2 中階平台

中階平台如Wix、Weebly、Strikingly、Squarespace、Webnode、Godaddy和wordpress.com等，這些多數由歐美公司開發，提供完整的前後台功能。這些平台的設計專業感強，支援度和價格適中，操作難度中等。然而，這些平台的一大限制是不易進行遷移，並且在未來的擴展性上有所限制，如硬體升級困難、外掛支援不足，且SEO優化和網站精緻度有限。

3.3 中高階平台

Wordpress.org被定義為中高階軟體，因其結合了套裝軟體的便利性與客製化的靈活性（需懂PHP語言）。我們的設計團隊在Java程式設計上有18年經驗，極力推薦使用Wordpress.org，它不僅成本合理（大約45,000到60,000元），還提供高度的網站控制能力和豐富的網路教學資源，雖有一些缺點，但整體性價比依然優越。

3.4 高階工具

高階工具，如Java、PHP、.NET、Python等，主要用於開發客製化網站。如果你不是技術專家，則無需深入了解，因為這需要強大的邏輯思維和持續學習新技術的能力。這類工具的開發成本非常高，且多數中小企業不需要這種級別的工具，因為大多數網站需求可以透過中階或中高階平台滿足。

四、如何撰寫網站文案？

建立網站時，文案撰寫通常是企業主遇到的一大挑戰。許多人不經常寫文章，或不確定應該撰寫什麼內容，因此這一步驟往往會耗時甚久。其實，建立初步的網站結構後，再逐步完善內容通常是一個有效的方法。下面就是貴設計將分享如何構建您的網站結構和文案。

4.1 統整所有資訊

首先，將所有您希望傳達給客戶的信息（包括文字、影片、產品圖片等）集中在一個Word文件中。記住，豐富的網站內容非常重要，充足的內容可以支持更多的網頁分頁，而內容不足則可能不利於業務發展。

4.2 資訊分類

將收集到的大量資訊進行分類。明確哪些是產品信息，哪些是公司聯繫方式，哪些是關於公司的理念和介紹等，這樣有助於後續的信息組織和呈現。

4.3 網站選單建立

一旦信息分類完成，選出四到五個最重要的類別，並為這些類別重新命名，名稱控制在二到五個字之間。這些類別將用於構建網站的導航菜單（選單），而這些選單還可以有下拉選項來進一步細化。

4.4 網頁架構規劃

何謂網頁架構呢？例如，將貴設計的首頁分成六個主要區塊：首頁大圖加標語、網站設計服務、六大特色、設計案例、設計費用、設計教學等。這些區塊即形成了首頁的結構。從4.1步驟的分類資訊中，大類可用作建立網站導覽菜單，每個大類下的資訊還可再細分，用於具體網頁的架構。

4.5 依架構寫內容

基於4.4步驟中的網頁架構，可以開始撰寫每一頁的具體內容。例如，根據首頁的六個主要區塊來撰寫相應的文案。如果缺乏靈感，可以參考競爭對手的網站內容來獲得靈感（但需適度修改以避免法律問題）。通常對於非新興行業的企業，常見的網站選單包括“首頁”、“產品/服務”、“最新消息”和“關於我們”等基本項目。

五、善用模版、現省10萬

在建立網站的過程中，最初且最關鍵的考慮之一是網站的美觀與功能性。網站公司常常需要聘請專業的網頁設計師來創建精緻的網頁版面，包括RWD響應式設計、HTML切版、圖標設計、選擇合適的形象圖及製作Banner等。一般而言，包括首頁和內頁在內的客製化網站設計，成本可能高達10萬元。考慮到這種高昂的成本，為何不選擇使用現成的網站模板呢？（不是每個人都會放棄ZARA或H&M的成衣去尋找設計師來定制衣服的。）
貴設計推薦您使用 Themeforest 購買網頁模板。不到2000元，您就能擁有美觀且完全支持RWD響應式的網站模板，包括WordPress模板、HTML5模板、一頁式網站模板以及形象網站模板等。這種方式可以省去從頭開始的時間，迅速擁有一個專業的網站。所以，網頁模板的便利性和實用性不容小覷，接下來請繼續關注我們的分享。

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

在早期，網頁設計公司在了解客戶需求後，會指派網頁設計師進行版型設計和HTML切版，這涉及到網頁設計、平面設計以及前端程式技術等專業知識，包括HTML5、Bootstrap、CSS、jQuery、JS及第三方程式插件。
此外，"美感"是設計中至關重要的一環，一個精美的網頁版型需要一位擁有至少七、八年經驗的網頁設計師來完成。如果外包設計，僅首頁的設計費用就可能高達數萬元，而內頁也需要七、八千元，一個稍有規模的網站總成本很容易達到10萬元。然而，現在情況已大不相同，許多歐美公司僅憑賣模板就能創造出年收入上千萬。因此，使用模板設計網站已成為業界的一種快時尚，就像Uniqlo的衣服一樣普遍。事實上，誰不是穿着印刷模板製作的成衣呢？

5.2 網頁模板下載

在這個追求速度的時代，能夠快速追隨潮流至關重要。使用免費的網頁模板可以大大縮短製作時間，並提供更多設計選擇。這不僅有助於節省時間，還可以參考其他網站的結構、設計和程式碼，帶來諸多好處。以下是一些可供下載免費或可商用網頁模板的平台：

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

5.3 模版與文案

下載模版後，開始搭建網站時可能會遇到問題。例如，如果模版是為攝影師設計的，但您是一名工程師，那麼模版中的作品集區塊可能就無法使用。
又或者模版中的文案過多，而您不擅長寫文案；或者模版中包含了不需要的購物車功能。在選擇模版前，不僅要檢查更新日期、下載次數、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、資料庫、國外主機、虛擬主機、實體主機…!@#$%^&*（）_+。所以基本上也不用比較了。本書會建議你直接這樣子選吧！
網站架設初階者：選擇台灣主機、例如智邦、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、名片資訊而跑到銷售頁外，失去交易的機會。而設計也是專注在顧客的動線只有設置一道，終點也是設計為一個，一頁式的專注引導客戶完成交易目地。