基礎網站架設知識

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

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"。 二者的差異就在於多了"https://ezstartup.cc/article/web_design/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）是指網站會依照電腦、平板與手機等不同螢幕尺寸，自動調整版面、圖片與內容排列。

WordPress 是一套常見的內容管理系統（Content Management System, CMS），可以用來建立形象官網、部落格、電商網站與簡易會員功能網站。

對新手來說，WordPress 的優點是後台管理直覺、外掛資源多、教學資料多，也比較適合日後自己更新文章與頁面。不過，若網站需要複雜流程、特殊系統或大量客製功能，就不能只用「會裝 WordPress」來判斷是否足夠。

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

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 是網站透過 SSL 憑證加密傳輸資料的安全協定，網址前方出現 https，代表網站與使用者瀏覽器之間的資料會經過加密。

對企業官網、表單網站與電商網站來說，HTTPS 是網站架設的基本配備。只要網站會收集姓名、電話、Email、訂單或會員資料，就應該確認是否已啟用 HTTPS。

有心截取你資料的駭客是無法解密的（理論上）。網站要使用免費的https，可以去Cloudflare or Let's Encrypt註冊。一年大概可以省下2xxx多的成本。 但當然加密等級是有差的囉！

搞懂以上幾個名詞有利於找網頁外包時搞清楚你官網架設的基礎建設問題，所以在網站需求表訪談時請務必詢問以下幾個問題

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

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

簡單來說，測試機是網站正式上線前用來檢查功能、版面與錯誤的環境，正式機則是真正提供訪客使用的網站環境。

網站上線前先在測試機檢查，可以降低表單失效、頁面跑版、購物流程錯誤與資料異常的風險。對企業網站來說，測試不是可有可無，而是正式上線前的基本流程。