基礎網站架設知識

網頁設計是指創建和設計網頁的過程。它包括了規劃網頁的外觀、佈局、圖形、色彩、字體選擇以及互動元素等，以確保網站看起來吸引人且易於使用。 網頁設計旨在為網站的訪問者提供一個良好的視覺和使用者體驗。
以下是網頁設計的主要方面

1. 視覺設計：這包括網頁的整體外觀，如背景、圖像、顏色、字體、圖標等。視覺設計應該反映網站的品牌和目標受眾。
2. 佈局設計：佈局設計涉及網頁上各元素的排列，確保它們在各種屏幕大小和設備上都能正確顯示。
3. 互動設計：這包括添加按鈕、表單、導航菜單和其他互動元素，以便用戶可以輕鬆地與網站進行互動。
4. 使用者體驗 (User Experience, UX) 設計：UX 設計旨在確保網站易於導航，並提供有關內容和功能的清晰資訊，以便用戶能夠快速找到所需的資訊並達成目標。
5. 響應式設計：這是確保網站能夠在不同設備上（如桌面電腦、平板電腦、智能手機）都正確顯示和運作的設計方法。
6. 可訪問性設計：可訪問性設計關注如何確保網站對所有用戶，包括身體殘障或使用輔助技術的用戶，都是可訪問的。

網站設計是指創建和規劃網站的過程，旨在使網站在外觀、功能和用戶體驗方面達到特定的目標。這涉及到多個方面，包括設計、內容、結構、互動和性能等，以下是一些主要的元素

1. 設計和外觀：這包括網站的整體風格、色彩、排版、圖像、圖示和其他視覺元素。良好的設計能夠吸引用戶，並提供一個吸引人的外觀。
2. 用戶體驗（UX）：網站的UX設計旨在確保用戶可以輕松地瀏覽網站，找到他們需要的訊息或執行所需的操作。這包括易用性、導航、頁面載入速度等方面的考慮。
3. 內容：這是網站的核心，包括文字、圖片、視頻和其他多媒體元素。內容應該有組織、易於閱讀，並符合網站的目標和目標受眾。
4. 結構：網站的結構決定了網頁之間的層次結構和關聯。這包括菜單、導航列、頁面層次結構等。
5. 互動：網站可以包括各種互動元素，如表單、按鈕、社交媒體分享功能、評論區等，以促進用戶參與和互動。
6. 性能：這包括優化網站的載入速度，確保在不同設備和瀏覽器上都能正常運行，以提供最佳的用戶體驗。
7. 響應式設計：現代網站通常需要能夠在不同的設備上適應，包括桌面電腦、平板電腦和智能手機。響應式設計確保網站在各種屏幕尺寸上都能夠正確顯示和運作。

網站設計是一個綜合性的過程，需要專業的技能和對目標受眾的了解。成功的網站設計應該能夠吸引用戶、提供價值、易於使用並符合品牌形象或目標。
綜合以上網頁設計與網站設計其實很類似，但網站設計和網頁設計是兩個相關但不同的概念，它們在範圍和目標上存在一些差異：

1. 網站設計（Web Design）：
   ●範圍：網站設計通常指的是整個網站的設計過程，包括所有網頁、頁面間的連結和結構，以及整體的視覺風格和用戶體驗。
   ●目標：網站設計的主要目標是創建一個統一的網站，以確保網站在整體上看起來一致，用戶可以輕松地在不同頁面之間導航，並實現整體品牌形象或目標。
2. 網頁設計（Web Page Design）：
   ●範圍：網頁設計專注於單個網頁的設計，它處理該網頁的佈局、視覺元素、內容和互動元素等。每個網站通常包括多個網頁，每個網頁都需要單獨的設計。
   ●目標：網頁設計的主要目標是確保單個網頁的內容和設計在該網頁上呈現得清晰、吸引人，以便用戶能夠理解訊息、完成任務或執行操作。

網站設計與網頁設計的差異處，幫您整理如下

項目	網站設計	網頁設計
範圍	整個網站的設計	單個網頁的設計
目標	確保統一性和用戶體驗	確保單個網頁的清晰性和吸引力

網站架設（Website Development）是指創建和開發一個網站的過程。這個過程涉及到構建網站的技術和功能方面的工作，通常需要深入的編程和開發知識。網站架設的主要目標是將網站的設計和功能變成實際可用的線上資源。
以下是網站架設的一些主要方面：

1. 前端開發：前端開發涉及創建網站的使用者界面，包括網頁的佈局、內容呈現、互動元素等。前端開發人員使用HTML、CSS和JavaScript等技術來實現這些功能。
2. 後端開發：後端開發關注網站的伺服器端邏輯，包括資料庫管理、用戶註冊和登錄、內容管理、安全性等方面。後端開發人員使用各種編程語言和框架來實現這些功能，如PHP、Python、Ruby、Node.js等。
3. 資料庫管理：資料庫是存儲網站內容和用戶資料的地方，網站架設需要設計和管理資料庫結構，以確保資訊的有效存儲和檢索。
4. 伺服器配置：伺服器配置涉及將網站代碼和資料部署到伺服器上，確保伺服器能夠正確運行並處理用戶的請求。
5. 性能優化：網站性能優化包括加速網站的載入速度、減少頁面加載時間、提高伺服器的反應能力等，以提供更好的用戶體驗。
6. 安全性：網站架設需要考慮到安全性，包括防止惡意攻擊、保護用戶資料、處理身份驗證等方面的工作。

網站架設（Web Development）和網站設計（Web Design）是建立網站的兩個不同但緊密相關的方面，它們有著不同的焦點和任務：

1. 網站設計（Web Design）：
   ● 焦點：網站設計教學一般會聚焦在網站的外觀、視覺風格和用戶體驗（User Experience, UX）。它包括網站的整體外觀、色彩、排版、圖像、圖示等設計元素，以確保網站吸引人並易於使用。
   ● 任務：網站設計師通常負責創建網站的視覺設計，並確保網站在不同設備上能夠正確呈現。他們設計網站的用戶界面，以確保用戶能夠輕松地導航、理解內容並執行操作。
   ● 工具：設計師通常使用軟件工具如Adobe Photoshop、Adobe XD、Sketch等來創建網站的視覺設計和原型。
2. 網站架設（Web Development）：
   ● 焦點：網站架設關注網站的功能和技術實現。它包括前端開發和後端開發。前端開發處理用戶界面和互動，而後端開發處理伺服器端的邏輯和資料庫。
   ● 任務：網站開發人員將設計師創建的設計轉化為實際可用的網站。他們編寫HTML、CSS和JavaScript代碼來實現網站的外觀和互動。同時，後端開發人員使用編程語言（如Python、PHP、Node.js等）來處理資料庫、用戶註冊、登錄和其他伺服器端功能。
   ● 工具：網站開發人員使用程式環境、腳本編輯器、開發工具環境（IDE）等工具來編寫、測試和部署代碼。

網站設計和網站架設是網站開發過程中的兩個不可或缺的部分。設計關注外觀和用戶體驗，而架設關注功能和技術實現。這兩個方面需要合作以創建具有吸引力且功能完備的網站。

項目	網站設計	網站架設
焦點	外觀和用戶體驗	功能和技術實現
任務	設計外觀和用戶界面	編寫前端和後端代碼
工具	設計軟件（如Photoshop）	編程環境和文本編輯器

如何架設網站的第一個步驟，請先清楚哪種網站的種類適合已身的企業。因為不同種類網站架設費用會差到百萬，若公司網頁製作只是要一個小小小的企業網站又何需客製化網站的費用呢？所以為了不白花冤枉錢，搞清楚網站架設種類是至關重要的。

種類	說明
📌 形象官網	一般的品牌形象網站，官網可提供公司介紹、產品列表、常見問題、聯絡我們、交通資訊、最新消息（即為部落格）、媒體報導、價格方案、產品訂購、合作提案、FB粉絲團、經銷據點、活動專區等訊息。 EX：維西杰。
📌 電商、購物網站	適合於網路上銷售產品，諸如保養品、手機配件、皮件、手飾、手機等。電商網站的特色就是首頁一進入就是大大的新商品折扣、活動節慶優惠的推廣的輪播，首頁下方有可能就是熱銷商品、最新產品之類的，接著商品類別的介紹。雖是以購物平台為主軸，但網站的導覽列至少還會有個聯絡我們、最新消息的頁面。 EX：Com2Buy
📌 形象+購物網站	形象+購物網站便是結合了上述二點，在首頁的呈現會以公司形象官網為主軸，介紹公司優勢、解決方案、公司理念之類。接著帶一些最新、熱銷商品在首頁並導流至電商的某個商品類別的頁面。 EX：JustBeWell
📌 Blog、媒體網站	Blog跟媒體網站其實很類似，整個網站都是以文章為主軸，一進入官網就是滿滿的文章，跟文章分類。經營這類型的網站會很累人，因為你要產出很多文章、精美的圖片。若團隊不擅於產生這方面的內容，實在不適合使用這類的網站，EX：SOLEDAD。 這二個怎麼區分呢？ 通常首頁比較多精美的圖片、文章分類、生動活潑的風格，這類型我們就會叫做媒體OR雜誌之類的風格，而BLOG的風格你應該可以了解，就是相對的較呆板、無趣、制式排版。
📌 論壇網站	論壇網站總是會有很多人問，也很多人回答，就這樣你一句我一答的形成一個天然的問答聚落，例如就如MOBILE01，會有一堆人刊登討論、詢問問題，接著就有一堆人在下方留言回答。 這類型的網站，若你沒有一個完整的it團隊，千萬不要經營這類型的網站。網站剛開始的經營都是要團隊申請好多帳號，並自問自答好一陣子，產生網站很熱絡的假象，才會有人陸續留言、詢問。 EX：SOLEDAD
📌 客製化網站	在網路上提供特有的服務，需特別開發功能。ex:UberEat、熊貓。但缺點就是費用昂貴。 EX：簡單創 （請參考【客製化網站設計】為什麼網頁設計費用貴的嚇死人！！）

以上是網站的種類，但或許還有聽過RWD網站、WORDPRESS網頁設計。RWD網站指的是官網要滿足RWD響應式網站（響應式網頁設計是什麼）。 所以上述種類有滿足RWD響應式網站，都可以稱之為"RWD網站"。

而Wordpress網站則是指網站製作軟體是使用Wordpress（也有些使用Wix、Weebly、Google Blogger），就會稱之為Wordpress網站（請參考 Wordpress網頁設計是什麼）。因此形象官網或電商網站若是使用Wordpress製作的，我們也會稱之為Wordpress網站。 所以RWD網站、Wordpress網頁設計，其實是從技術的角度定義網站。

每一個網站都需要架在一台電腦上面，因此該電腦即是所謂的"主機"。主機對於環境有很嚴苛的要求，如溫度、濕度、24小時開機、不斷電系統，因此要自架在家裡是不可能的，除非是玩票性質，因此信譽良好、不易當機的主機商便是很重要的。此外還要注意的項目如下

• 網站主機位置，請務必選擇亞洲地點，網站下載速度很重要。請參考10個【網站下載速度】優化面向。
• 網站主機商，不用比了就是Siteground（適用於企業）。英文不好的請選GoDaddy（適用個人網頁設計、不適合企業），台灣主機商偏貴。
• Uptime：主機商都會保證＂99% Uptime＂，這是指主機有保證99%都是正常執行不死機（參考用）。 Uptime很重要，若網站1個月營業額上千萬，今天停機2小時公司就虧損上百萬。
• 熱門網紅、部落格主的網站，請選擇適當的網站空間（10G居多）與流量
• 勿用共享主機，硬體資源是大家共享的，當愈多網站加入你的主機，你的網站就會愈慢，問題愈多，甚至連IP（共用IP）都會被列成黑名單。 主機費很低的，大都是使用共享主機。

再來說明一下網域（domain）、網址（URL）、IP。網域是什麼呢？以貴設計網站來說明網域（Domain）就是指"https://web-design.vip/"，而網址（URL） 即為"https://ezstartup.cc/website-design-guidelines.html"。 二者的差異就在於多了"website-design-guidelines.html"，所以網址會指示到特定頁面名稱，而網域則是整個網站的域名。 所以一個網域下會有很多的網址。但在口語化的說法，網域也會稱為網址，但網址一般則不會是網域的意思。
再來什麼是IP位址呢？在電腦的世界裡，只認識一堆數字，所以facebook.com其實對映到的是以4組數字組成例如35.123.32.33，這組數字則謂之IP。但你每次要上FB的時後， 你總不能記憶35.123.32.33，所以為了真實生活中方便記憶，就會對應另一組網址如facebook.com（即為網域）。 挑選網域除了好記，也要尋找適合品牌的網域。

1. 購買網址GoDaddy：非常推薦
2. 中華電信域名申請：DNS生效極慢、介面又非常難用
3. PChome買網址

網站前台、後台 ，就用餐廳來舉例吧。你在餐廳內用餐，餐廳內所有看到的裝潢、擺設、牆壁顏色等一切就是這個餐廳的前台，而後台就是所謂的廚房，廚房需準備餐廳前台的一切食物、飲料、餐點等。 以網站來講，你是一個FB網站的訪客，當你進入某某FB粉絲團所有看到的內容、網頁介面、資訊等一切，都是需要一個後台進行上稿、發EDM。
所以網站前台是讓網路使用者瀏覽的畫面，如文字、圖片、特效、動畫、表單填寫。前台都會由網頁設計師規劃排版讓網站精美呈現。 網站後台則為管理網站功能、使用者登入，文章頁面、商品等等。

響應式網頁設計（RWD），是指網站的畫面會依瀏覽器的尺寸，自動變換網頁排版，而不會造成網頁在不適當的尺寸下造成使用者體驗差勁的問題， 所以一個網站滿足RWD設計原則（可用RWD開發工具Bootstrap）是基本需求。
若架設網站外包商提出RWD設計報價要加1萬，請直接封鎖這間RWD網頁架設廠商。因為RWD已是標配，現在是行動網站的時代，人手2隻手機的可能性大增， 你的網站沒有滿足RWD的規格的話，就不用妄想會有陌生訪客從網站詢價。 網站架設沒有【RWD響應式網頁設計】Google：那你就等死吧！

RWD響應式網站優點

1. 只存在單一網站：因應手機時代，較古老的網站不支援手機版，又難以重建網站成RWD，因此會建置m.example.com的網頁給手機載具使用，但RWD響應式網站只需一個網站，管理/建置成本皆低。
2. SEO提升：因單一網站，流量只會存在於同一頁面，不會分流至電腦or手機版，避免了重覆頁面的問題。參考更多SEO
3. 畫面瀏覽體驗佳：良好瀏覽體驗讓使用者願意多停留一些時間，下單機會越大，回流客越多！
4. 單一網站維護：只存在單一網站，所以只需維護一個網站，減少工作負載。

Wordpress是功能強大的內容管理系統（Content Management System），全世界市佔已經40%的網站，將近9億5千萬的形像網站、購物網站、部落格都是Wordpress建置，Wordpress知名網站如 美國白宮、CNN、BMW、FB都是愛好者。
Wordpress的初衷是一套內容管理系統（CMS），最適合建立部落格網站，但隨著WP演化，它可用來建立形像官網、電子購物車、線上教學平台， 甚至做簡易的半客製化系統。對於一般只需形象官網的你，透過WP就能簡單管理你的網站， 而不是像過去需要寫一堆的程式碼，只需在後台修改頁面跟文章，就如同Word一樣的簡單。而且WP是免費、開放式的程式碼。 還能快速的擴充各式的功能（稱之為外掛），只需輕輕一鍵即可。
在Wordpress網頁架設價格，相對於過往使用Java、PHP都簡單且便宜許多。 Wordpress架站費用大概4萬5至6萬。但若是客製化網站費用可是會嚇死人，所以沒事不要做客製化的網站。
WP架站怕被宰！【Wordpress費用】醬算才合理【Wordpress是什麼】何以市佔全球40% 連白宮、FB都愛Wordpress超過30.6%使用者（來源：wordpress）

Wordpress優點

1. 全球40%的都使用Wordpress架站。所以技術純熟、教學支援多、系統穩定性高，畢竟架構已經千萬人測試使用。
2. 以內容管理系統（CMS）的初衷、非常適合部落客專用官網術。
3. 100%網站、資料庫擁用權，搬家、備份簡單又快速。
4. 完整的前、後台功能，形象官網、一頁式網頁、電商平台、部落格一應俱全。
5. 100%視覺化編輯，無需任何的程式碼，也能快速的建置網站，懂程式碼會讓網頁架設更精緻、完美（視覺化編輯請參考WP文章功能的教學）
6. Wordpress教學、影音文件網路上眾多
7. 相對於Weebly、Wix、Blogger，Wordpress的搜尋引擎優化（SEO）是相對的友善、好操作
8. 功能無限擴充、外掛輕輕一裝、功能無限增長，重點外掛能功只要1,000~3,000不等的費用，且免費的居多（如Wordpress Plugin 外掛必裝推薦清單）
9. 因為WP的受歡迎，使得懂這方面的專業能力很好找，員工的交替技術不斷層
10. 上千種Wordpress佈景主題，絕對滿足你想要的風格。

【Google Blogger】超好用，12大優點還可賺錢Weebly、Wix是什麼？ 它們的優缺是什麼呢？

網路平台是指在網路上運作的一個系統或服務，用於提供各種功能、資源和互動的場所。這些平台通常由一個中央實體或組織管理，並與用戶進行交互。 以下是一些常見的網路平台範例：

1. 社交媒體平台：像 Facebook、Instagram、Twitter 和 LinkedIn 等社交媒體平台，讓用戶建立個人檔案、分享訊息、照片和影片，並與其他用戶互動。
2. 電子商務平台：像 Amazon、eBay、Alibaba 和 Taobao 等電子商務平台，提供購物功能，允許商家上架商品，消費者可以在平台上購買商品。
3. 在線服務平台：像 Uber、Airbnb、Grab 和美团等在線服務平台，提供以共享經濟為基礎的服務，如車載服務、住宿預訂、外賣訂購等。
4. 知識共享平台：像 Wikipedia、Quora 和Stack Exchange 等知識共享平台，用戶可以創建、編輯和分享知識性內容。
5. 媒體分享平台：像 YouTube、Netflix、Spotify 和 SoundCloud 等媒體分享平台，用戶可以上傳、分享和播放音樂、影片和其他媒體內容。
6. 在線教育平台：像 Coursera、Udemy 和 Khan Academy 等在線教育平台，提供各種主題的學習課程和教育資源。

任何的網路平台都是相當難經營的，因為一個平台會有2~3甚至更多的使用者、用戶。三者之間都是相輔相成，因此 必需針對這三方使行銷、做優化。但這就是一個先有雞還是先有蛋的問題。

貴設計的網址是https://web-design.vip，在網址前面有一個"https"，這代表網站透過協定上的加密機制後能夠防止資料竊取者就算攔截到了傳輸資訊卻也無法直接看到傳輸中的資料，講白一點就是資料從網站傳到你電腦上的瀏覽器都是經過加密的。

有心截取你資料的駭客是無法解密的（理論上）。網站要使用免費的https，可以去Cloudflare or Let's Encrypt註冊。一年大概可以省下2xxx多的成本。 但當然加密等級是有差的囉！
搞懂以上幾個名詞有利於找網頁外包時搞清楚你官網架設的基礎建設問題，所以在網站需求表訪談時請務必詢問以下幾個問題

請問我的主機位置在那裡？ 網址IP一年費用？ 網站有提供免費的https加密嗎？ 網站應該會有完整的前後台權限吧？  應該會有RWD吧，然後再請問一下是WP網頁設計嗎？

主機以台灣最棒（日本、新加坡亦可），非特殊網址一年1000有找，https歐美有提供免費的加密（如Cloudflare、Let’s Encrypt），後台要有100%權限、RWD、WP網站架設這些都一定要有 以上任一點若是NO的話 ，對你的網站都會有很大的影響，所以請審思該網站架設的公司。

在網站開發中，測試機與正式機是兩個不同的環境，用於不同階段的測試和運行。以下是它們的解釋：
測試機（Test Server）：測試機是用於開發者和測試人員進行測試和調試的環境。在這個環境中，開發團隊可以測試新功能、修復錯誤、進行性能測試等。測試機通常是一個與真實環境相似的環境，但並不直接對外提供服務，而是用於內部測試。
正式機（Production Server）：正式機是最終部署和運行網站的環境，也稱為生產環境。當網站開發和測試完成後，它將被部署到正式機上，供實際用戶訪問和使用。正式機必須穩定、可靠，並且需要滿足實際使用情況的需求。
總結來說，測試機是用於開發和測試的環境，而正式機則是用於實際運行和提供服務的環境。通過在測試機上進行測試，開發團隊可以確保網站在部署到正式機之前是穩定且功能正常的。