從零開始認識網頁：網站架構、網頁設計入門基礎全攻略

更新時間：2026-01-23 12:00 HKT

City Design 2010 年網站展示

網頁（Web Page）的歷史可以追溯到 90 年代。從最原始的 HTML 代碼到現今豐富的互動體驗，網頁技術雖然日新月異，但其核心運作原理——HTML、HTTP 及 URL——始終未變。
對於許多初學者來說，建立網站似乎是一件神祕且複雜的事。但簡單來說，只要擁有一個網址（Domain）、一台伺服器（Server），並上傳一個 index.html 檔案，你就已經成功建立了一個網站。然而，隨著 Google 演算法的更新與用戶體驗要求的提高，「建立網站」與「建立一個成功的網站」是兩回事。本文將由淺入深，帶您了解網頁背後的運作邏輯。

1. 域名（Domain）：是否任何人都可以申請域名

原則上，只要該域名未被註冊，任何人都可以申請通用的 .com 網址。但在香港，特定後綴的域名有嚴格的申請限制，這也代表了更高的公信力：

.hk / .com.hk：通常需要提供香港商業登記證（BR）。
.org.hk：需為非牟利機構或慈善團體。
.edu.hk：僅限教育局認可的教育機構。
.gov.hk：僅限政府部門。

一般商業域名的費用約為 HK$100 - HK$500 / 年。

2. 伺服器（Server）：建構是否很複雜?

架設與維護一台實體伺服器對於即使是 IT 專業人士來說也困難重重，且成本極高。因此，大多數企業選擇購買虛擬主機（Hosting）或雲端伺服器（Cloud Server）服務。這不僅節省硬體成本，還能確保伺服器的穩定性與安全性由專業團隊負責維護。

伺服器的日常運行與維護需要相當的技術與資源，尤其當公司人事變動時，對 IT 團隊而言更是挑戰。因此，我們建議中小型企業選擇專業的託管服務。

3. 檔案管理（File Management）：我可以任意命名和放置檔案嗎？

這是新手最常犯的錯誤。假設您使用 FileZilla 等 FTP 軟體登入伺服器，您會看到 /www、/public_html 或 /httpdocs 等資料夾，這就是您的網站根目錄（Root）。
例如：您建立了一個資料夾 /www/image/abc.jpg，網路上對應的網址就是 http://yourdomain.com/image/abc.jpg。

filezillaDemo

⚠️ 為了網站穩定性，請務必遵守以下 4 大原則：

檔名命名規範
❌ 錯誤示範：小一入學名單?=2025 /1/1.pdf
✅ 正確示範： primary1-admission-list-2025.pdf
中文檔名、空格及特殊符號（如 ?、&）極易導致網址亂碼（404 Error），且不利於 Google 爬蟲讀取。
請使用英文小寫，並用**連字號（-）**分隔單字。Google 明確表示連字號比底線（_）更有利於 SEO 判讀。
嚴格控制檔案大小與格式
圖片（JPG, PNG）、文件（PDF）或音訊檔，應盡量壓縮至 1MB-2MB 以下。過大的檔案會拖慢網站載入速度，直接導致跳出率增加。
可利用網上軟件, 進行格式化, 例如: Photoscape / iLoveResize
善用第三方影音平台
網頁伺服器的頻寬有限，請勿直接將 MP4 影片上傳至主機。最佳做法：將影片上傳至 YouTube 或 Vimeo，再嵌入（Embed）到網頁中。這能大幅減輕伺服器負荷，並提升播放流暢度。
定期清理備份檔
備份產生的 ZIP 檔案下載到本地電腦後，請務必從伺服器上刪除。這不僅是為了節省空間，更是為了資安考量（避免駭客下載您的原始碼備份）。

4. HTML是什麼？可以自己寫嗎？

HTML（HyperText Markup Language）是網頁的基礎語言。早期的網頁設計甚至只需使用 Windows 的「記事本（Notepad）」即可完成。
您可以嘗試以下簡單實驗：

打開記事本。複製以下代碼。另存新檔為 index.html。用 Chrome 瀏覽器打開它。


<!DOCTYPE html>
<html>
<head>
    <title>我的第一個網頁</title>
</head>
<body>
    <h1>歡迎來到我的網站</h1>
    <p>這是一個最基礎的 HTML 結構範例。</p>
    <a href="https://www.ctd.hk">點擊這裡訪問 City Design</a>
</body>
</html>

如有興趣了解更多, 可以到w3school 學習

5. 本地端（Local）與伺服器（Server）的區別

這是一個常被忽略的重要觀念：
本地端： file:///C:/user/Desktop/index.html （只有您自己的電腦看得到）
伺服器端： https://www.example.com/index.html （全世界都看得到）
許多客戶反映出現「死圖（Broken Image）」或「死連結（Dead Link）」，通常是因為忘記透過 FTP 上傳檔案，或者路徑指向錯誤（例如在程式碼中引用了自己電腦的路徑）。

6. 什麼是 CMS？它能讓我輕鬆管理網站嗎？

CMS（Content Management System，內容管理系統）是現代網站的主流。最知名的如 Drupal, WordPress，它需要伺服器支援 PHP 與 MySQL 資料庫。
優點：讓不懂程式碼的用戶也能像操作 Word 一樣，輕鬆新增文章、更換圖片、管理產品。
挑戰：雖然「內容」好改，但涉及「功能面」的調整（如會員權限、自動化流程、版型調整）仍相當複雜。
因此，大多數客戶選擇由網頁設計公司建立客製化的 CMS 模板，客戶只需專注於日常內容更新，既能保持設計美感，又能提高工作效率。

7. 設計公司做好的網頁，我可以自行修改設計嗎？

坊間有許多開源框架（如 Bootstrap）或 CMS 系統（如 WordPress, Joomla）。若您具備代碼知識，可以修改內容（如文字與圖片）。
然而，涉及 HTML/PHP 結構、CSS 樣式或 JavaScript 互動的修改則需謹慎處理，因為不當的編輯可能導致整個網站版面崩壞。建議將結構性修改交由專業人士處理。

8. RWD 響應式網頁設計：行動優先時代

RWD（Responsive Web Design）自 2010 年起發展，現已成為網站的「標準配備」。
定義：網站能自動偵測使用者的裝置（桌上形機、平板、手機），並自動調整排版與圖片大小。
重要性： Google 已全面實施 Mobile-First Indexing（行動優先索引）。如果您的網站沒有 RWD，在手機上閱讀困難，Google 將會大幅降低您的搜尋排名。

9. 怎樣才算是一個成功的網頁？

建立網站只是第一步，要讓網站發揮商業價值，必須具備以下 9 點：

目標明確：網站是為了銷售？展示作品？還是收集名單？目標決定設計方向。
UI 設計（視覺）：風格統一、美觀，符合品牌形象。
UX 體驗（操作）：導航清晰，讓用戶在 3 次點擊內找到資訊。
載入速度（Speed）：這是 SEO 的核心指標。需優化圖片與代碼。
RWD 響應式設計：完美支援手機瀏覽。
高品質內容：內容為王，提供對用戶有價值的資訊，而非單純堆砌關鍵字。
多媒體運用：適當加入影片與圖表，降低跳出率。
SEO 搜尋引擎優化：做好 Meta 設定、關鍵字佈局與網站架構。
安全性（Security）：安裝 SSL 憑證（https），並定期掃描漏洞，保護用戶數據。

總結

網頁設計是一門結合「美學」與「技術」的工藝。從底層的伺服器設定、中層的代碼結構，到表層的視覺設計與 SEO 策略，環環相扣。

如果您希望擁有一個既美觀又能帶來生意的網站，建議尋找經驗豐富的設計團隊，歡迎聯絡我們！