網頁與網站是什麼

先分清楚三個名詞

所以「我要做一個網站」的意思是：做一組互相連結的網頁——通常包含首頁、公司介紹、產品或服務、案例、聯絡我們等等。

一個常見的誤解

「網站做好了嗎？」這個問題，指的往往不只是首頁做好了。

一個企業網站通常有數十到數百個網頁，包含：

• 首頁
• 各個單元的列表頁——例如「所有產品」
• 各筆資料的內容頁——例如「某一項產品的詳細說明」
• 功能性頁面——聯絡表單、搜尋結果、隱私權政策

產品越多，網頁數量就越多。 一百項產品就會產生一百個產品內容頁。

網站的結構像一棵樹

多數網站的組織方式是階層式的：

首頁
├── 關於我們
│   ├── 公司簡介
│   └── 團隊介紹
├── 產品服務
│   ├── 產品分類 A
│   │   ├── 產品 1
│   │   └── 產品 2
│   └── 產品分類 B
├── 最新消息
└── 聯絡我們

這種結構圖稱為樹狀圖，是規劃網站時的第一份文件。

為什麼要先畫樹狀圖

• 釐清網站要有哪些內容
• 決定選單怎麼排
• 作為報價的依據——單元數量直接影響費用
• 讓訪客容易找到東西

詳細做法見樹狀圖與線框圖。

層級不要太深

從首頁點擊到任何一頁，建議不超過三次。

層級太深的問題：

• 訪客找不到，中途就離開了
• 搜尋引擎抓取的優先度較低

如果內容多到三層裝不下，通常不是要加深層級，而是分類方式要重新想——可以用篩選或標籤取代層層點擊。

見網站結構與內部連結怎麼影響 SEO。

首頁不是最重要的一頁

這一點常常出乎意料。

多數訪客不是從首頁進來的。 他們在搜尋引擎找到某一篇文章或某一個產品，直接進入內頁。

這代表什麼

• 每一個內頁都要能獨立說明「這是誰的網站、能提供什麼」
• 內頁也要有清楚的聯絡方式或下一步引導
• 不能假設訪客已經看過首頁

把所有心力放在首頁、內頁隨便做，是常見的規劃錯誤。

網站不只是「一個檔案」

一個網頁看起來是一個畫面，但它實際上由多個部分組成：

• 文字內容
• 圖片——每一張都是獨立的檔案
• 版面樣式——決定顏色、字體、排版
• 互動程式——選單展開、輪播、表單驗證

所以打開一個網頁時，瀏覽器實際上下載了很多個檔案。檔案越多越大，網頁就越慢——這也是為什麼圖片要壓縮。

見網站慢的常見原因。

網站與其他管道的差別

這是網站最核心的價值：它是你能完全掌握的資產。

社群與網站是互補的，不是二選一——社群負責觸及既有客戶，網站負責被新客戶找到。

接下來可以了解的

• 打開一個網頁時發生了什麼事——理解網域、主機、程式的關係
• 網站由哪些部分組成——前台、後台與資料庫
• 常見的網站類型有哪些

從輸入網址到看到畫面

這個過程大約在一兩秒內完成，但背後有好幾個步驟。理解它，就能理解為什麼網站需要那麼多不同的服務。

1. 你輸入網址——例如 example.com
2. 電腦去問「這個網址在哪裡」——這一步由 DNS 完成
3. 得到一組位址——指向存放網站的主機
4. 向那台主機要資料
5. 主機回傳網頁內容
6. 瀏覽器把內容組合成畫面

三個必要的角色

做一個網站，最少需要三樣東西：

三者是分開的服務

這一點常被誤解。網域、主機、網站程式可以來自三個不同的廠商，也可以由同一家提供。

它們各自有費用，也各自有到期日——任何一項到期，網站就會出問題。

年度費用的完整說明見網站每年的固定支出有哪些。

DNS 扮演的角色

電腦在網路上實際使用的是一組數字位址，不是文字網址。DNS 的工作就是把文字網址翻譯成數字位址。

可以想成一本電話簿：你查「某某公司」，得到電話號碼。

為什麼要知道這個

因為很多問題出在這一層：

• 換主機時要改 DNS——沒改的話還是連到舊主機
• 改了不會立刻生效——需要時間擴散
• 信件也靠 DNS 決定送到哪裡

詳見DNS 是什麼？常見的記錄類型。

網域是租的，不是買的

這是新手最常誤解的一點。

網域是按年承租的使用權，不是永久擁有。 忘記續約會被釋出，可能被他人註冊走。

更重要的是：註冊人要登記為自己

如果網域登記在網頁設計公司名下，你對它就沒有真正的控制權——日後要換廠商可能會有困難。

這是實務上很常見的糾紛來源。見網域要自己註冊還是交給網頁設計公司。

主機決定了什麼

主機是實際存放網站檔案、執行網站程式的電腦。它影響：

• 網站的速度——特別是主機的位置與規格
• 能不能承受流量
• 穩定性
• 能使用哪些功能

主機類型的選擇見虛擬主機、VPS 與雲端主機怎麼選。

網址開頭的 https 是什麼

它代表你與網站之間的連線是加密的——傳輸的資料即使被攔截也看不懂。

為什麼一定要有

• 沒有的話，瀏覽器會顯示「不安全」的警告，訪客看到通常會離開
• 表單填寫的資料會以明文傳輸
• 它是所有網站的基本配備，不只是購物網站需要

一個重要的澄清

看到鎖頭只代表「連線是加密的」，不代表「這個網站可以信任」。 詐騙網站也可以有加密。

詳見SSL 是什麼？網站為什麼一定要安裝。

為什麼有時候網站打不開

理解了上面的架構，就能理解問題可能出在哪一環：

先確認是不是只有你

用手機的行動網路（不要連公司 Wi-Fi）開一次看看。如果手機正常，那就是你這端的問題，不是網站壞了。

為什麼改了東西看不到變化

新手很常遇到這個狀況。原因是快取——把資料暫存起來以加快速度。

快取可能存在好幾個地方：瀏覽器、網站系統、中間的加速服務。

先試最簡單的

• 用無痕視窗開啟——這樣不會用到瀏覽器的舊資料
• 或強制重新整理

如果無痕視窗看得到新內容，那就是瀏覽器快取的問題。詳見快取是什麼。

前台與後台

這是理解網站運作最重要的一組概念。

簡單說：你在後台輸入資料，訪客在前台看到成果。

後台能做什麼

• 新增、修改、刪除文章與產品
• 上傳圖片
• 調整選單
• 查看表單詢問與訂單
• 管理會員
• 設定網站的基本資訊

詳細說明見後台管理系統是什麼。

資料庫：內容實際存放的地方

你在後台輸入的文字，不是存成一個個檔案，而是存進資料庫。

可以把資料庫想成一個很大的表格系統——每一篇文章是一列，標題、內容、日期各是一個欄位。

為什麼要用資料庫

• 可以快速查詢與排序——例如「最新的十篇文章」
• 同一筆資料可以在多處呈現——首頁的最新消息與列表頁用的是同一筆
• 方便管理——改一次，所有出現的地方都會更新

這解釋了一件事

備份時只備份檔案是不夠的——因為文章內容都在資料庫裡。只有檔案的備份，還原出來會是一個沒有內容的空殼。

這是最常見也最嚴重的備份疏失。見備份策略怎麼規劃。

靜態網站與動態網站

如果網站的內容需要自己更新，那就需要動態網站與後台。

不是每個單元都需要做成可自行管理——判斷方式見哪些內容需要做成後台可自行管理。

網頁的三種組成

從技術角度看，一個網頁由三種東西構成：

• 結構——決定有哪些內容、哪個是標題、哪個是段落
• 樣式——決定顏色、字體、排版、間距
• 互動——決定點擊之後會發生什麼

用房子比喻

• 結構是隔間與樑柱
• 樣式是油漆與裝潢
• 互動是電燈開關與門鎖

你不需要懂怎麼寫，但知道它們是分開的，有助於理解為什麼「只是改個顏色」與「改版面結構」的工時差很多。

版型（模板）是什麼

版型決定了網站的視覺外觀與版面配置。

三種做法

比較與選擇見版型、模組化與客製設計的差別。

外掛與模組

指的是為網站增加特定功能的元件——例如表單、會員系統、購物車、多語系。

兩個實務提醒

• 外掛越多，出問題的機會越大——每一個都需要維護與更新
• 來源不明的外掛可能有安全風險

只裝真正需要的。 裝了但沒用的應該移除，不是停用。

網站在手機上為什麼會自動變版

這叫做響應式設計——同一個網站會依螢幕寬度自動調整版面。

手機看到的是一欄式、選單收合成按鈕；電腦看到的是多欄並排。內容是同一份，只是排法不同。

為什麼重要

多數網站的訪客有一半以上來自手機。手機版不好用，等於流失一半的機會。

見手機版優先的設計思維。

整理成一張圖

訪客 → 前台網頁
              ↑
        （取出資料）
              ↑
           資料庫 ← 後台編輯 ← 管理者

理解這個流程，就能理解：

• 為什麼要備份資料庫
• 為什麼後台要保護好
• 為什麼改了後台前台就會變

先想目的，再選類型

網站沒有「哪一種比較好」，只有「哪一種適合你的目的」。

常見的目的：讓客戶找得到、建立專業形象、直接賣東西、收集詢問、提供資訊減少客服負擔。

一、形象官網

最常見的類型。介紹公司、服務、案例，並提供聯絡方式。

典型的單元

• 首頁
• 關於我們
• 產品或服務介紹
• 案例或作品
• 最新消息
• 聯絡我們

適合

幾乎所有企業。特別是客戶在成交前會先查資料的行業——工程、設計、專業服務、B2B。

重點

不是版面漂亮就好。要能回答客戶的疑問、展現可信度、並讓對方知道下一步怎麼做。

二、產品型錄網站

形象官網的延伸，重點在大量產品的呈現與查找。

需要的功能

• 產品分類與篩選
• 規格表
• 搜尋
• 詢價功能或詢價車
• 型錄下載

適合

產品數量多、但不在線上直接交易的行業——工業零件、建材、機械設備。

與購物網站的差別

沒有金流與物流，客戶是詢價而不是下單。 這讓開發成本明顯低於購物網站。

三、購物網站

可以直接在線上完成交易。

需要的功能

• 商品管理（含規格、庫存）
• 購物車與結帳
• 金流串接
• 物流串接
• 訂單管理
• 會員系統
• 發票

成本會高很多

因為要處理錢與貨。每一種付款方式、每一種配送方式都是獨立的串接工作。

報價的組成見電商網站的報價包含哪些項目。

一個實務建議

剛起步時，可以先用開店平台驗證商品賣不賣得動，等營運穩定再評估自建。

見開店平台、套版還是自建。

四、預約與訂位系統

讓客戶在線上選擇時段或房型並完成預約。

適合

旅宿、餐飲、美業、診所、課程、場地租借。

規劃時最關鍵的一件事

先決定「被預約的最小單位是什麼」——是人數、是空間、還是時段？

這個問題答錯，整套庫存邏輯都會錯。例如用人數計算，遇到「1 人訂雙人房」就會出問題——系統顯示還有空位，實際上房間已經不能再賣了。

詳見訂房訂位系統要規劃什麼。

五、一頁式網站與活動落地頁

所有內容在同一頁，靠捲動瀏覽。

適合

• 單一產品或服務的推廣
• 活動報名
• 廣告的到達頁面

優點與限制

• 優點——聚焦、製作快、適合搭配廣告
• 限制——內容量有限、能被搜尋到的範圍較窄

不建議把一頁式當成公司的主網站——它的內容承載力與搜尋能見度都不足以支撐長期經營。

六、知識庫與問答網站

把常被問到的問題整理成內容，讓客戶自己找得到答案。

兩個價值

• 減少重複回答的人力——直接把連結給客戶
• 被搜尋到——有問題的人正在找答案，這是很精準的流量

對專業服務業特別有效。做法見內容行銷是什麼。

怎麼選：三個問題

1. 客戶會在線上完成交易嗎？ 會 → 購物網站；不會 → 形象或型錄網站
2. 有時段或名額要管理嗎？ 有 → 預約系統
3. 內容會持續增加嗎？ 會 → 需要後台管理

可以分階段做

不必一次做到最完整。常見的合理路徑：

1. 先做形象官網——讓客戶找得到、看得懂
2. 再加詢價或預約功能
3. 確認需求後才做交易功能

好處是投入可控，而且第一階段運作過之後，你會更清楚真正需要什麼。

常見的情況是：原本以為必要的功能，實際運作三個月後發現根本沒用到。

費用的估算見網站架設費用怎麼算。

拆解一個網址

以這個網址為例：

https://www.example.com.tw/products/item-123?color=red

協定：http 與 https

• http——未加密，瀏覽器會顯示不安全警告
• https——加密，現在所有網站都應該使用

詳見SSL 是什麼。

網域結尾的差別

選擇的考量見.com 與 .com.tw 有什麼差別。

子網域是什麼

在主網域前面加上一段名稱，例如：

• shop.example.com
• blog.example.com
• en.example.com

子網域不需要另外付費，可以自行建立。它常用來區隔不同的服務或系統。

但要注意：子網域需要各自的憑證，主網域的憑證不會自動涵蓋。

見子網域怎麼開。

有 www 與沒有 www 的差別

技術上是兩個不同的網址，但實務上應該指向同一個網站。

重點是「統一」

你可以選擇要用哪一種，但另一種應該自動轉向到主要的那一個。

如果兩種都能打開且各自獨立，網站的評價會被拆成兩份。

怎麼檢查

把這四種形式各輸入一次，看是否都導向同一個：

http://example.com
http://www.example.com
https://example.com
https://www.example.com

只要有任何一個停在原地沒有轉向，就是需要處理的。

見網址正規化與重複內容怎麼處理。

路徑：網站內的位置

斜線後面的部分表示這一頁在網站中的位置。

/products/            → 產品列表
/products/item-123    → 某一項產品
/news/2026/           → 某年的消息

好的路徑怎麼寫

• 用有意義的英文小寫，單字之間用連字號
• 避免中文與空格——會變成一長串編碼，難以閱讀與分享
• 避免無意義的編號——/page?id=47 不如 /about-us
• 層級不要太深

一個重要提醒

網址一旦上線就不要輕易更動。

改了之後，原本的連結會失效——搜尋結果、別人分享的連結、書籤全部連不到。若必須改，一定要設定轉向。

參數：問號後面的東西

/products?category=chair&sort=price

常見的用途：

• 篩選——只看某個分類
• 排序——依價格或日期
• 分頁——第幾頁
• 追蹤——記錄訪客從哪個管道來

追蹤參數很實用

在社群貼文或電子報的連結後面加上追蹤參數，就能在分析工具中看出有多少訪客是從那裡來的。

做法見流量分析基本上要看什麼。

看網址可以判斷的事

是不是同一個網站

要看網域的部分，不是看有沒有出現公司名稱。

詐騙常用的手法是把知名品牌名稱放在路徑或子網域中，但實際的網域是別的：

https://example-bank.fake-site.com/login

這個網址的實際網域是 fake-site.com，不是 example-bank。

判斷的方法

從網址中找到第一個單獨的斜線，往左看最後兩段，那才是真正的網域。

相關的防範見郵件的安全防護與詐騙防範。

常見的網址問題

怎麼使用這份對照表

與網頁設計公司溝通時，常會遇到一堆術語。這裡用最白話的方式解釋常見的名詞，並附上延伸閱讀。

不需要全部記住——遇到不懂的回來查即可。

基本架構

延伸：打開一個網頁時發生了什麼事

網站組成

延伸：網站由哪些部分組成

設計相關

延伸：手機版優先的設計思維

檔案與素材

延伸：網站圖片格式怎麼選

搜尋與行銷

延伸：搜尋引擎怎麼抓取與收錄網站

技術與維護

延伸：快取是什麼

電商與功能

延伸：金流串接是什麼

三個最容易誤解的名詞

「網站」不等於「首頁」

一個網站通常有數十到數百個頁面。多數訪客是從搜尋直接進入內頁，不是從首頁開始。

「有鎖頭」不等於「安全」

鎖頭只代表連線是加密的，不代表這個網站可以信任——詐騙網站也可以有加密。

「免費」不等於「沒有成本」

免費的版型、圖庫、平台通常有其限制——授權範圍、資料能否帶走、日後的維護。評估時要看三年的總成本，以及停止使用後還剩下什麼。

與廠商溝通的小建議

• 聽不懂就直接問——好的廠商應該能用白話解釋
• 重要的事情要有書面——口頭承諾容易各自解讀
• 問「這樣做的原因是什麼」——比問「這樣好不好」更能得到有用的資訊