網頁程式設計聽起來是工程師的事，但把網站外包的老闆，至少要能看懂三個名詞的邊界：HTML5、CSS3、前端。不懂這條線，你連「為什麼換個顏色要報價」「為什麼網頁開發報價差三倍」都無法判斷，只能憑感覺簽。這篇用外行聽得懂的話，把網頁開發的技術地圖鋪一次，最後給三個不寫程式也能驗收工程品質的方法。
HTML5、CSS3、JavaScript 各自管什麼
一張網頁拆開是三層。HTML5 管結構：標題、段落、圖片、表單，瀏覽器靠它知道「這是什麼」。CSS3 管樣式：顏色、字級、位置、動畫，靠它知道「長什麼樣」。JavaScript 管行為：點按鈕彈出視窗、表單送出前的檢查、滑動載入，靠它知道「動起來會怎樣」。所以 html5網頁設計跟 css3網頁設計不是兩種服務、兩種報價，是同一張網頁的兩層——把它們當兩個東西分開買，只會買出銜接問題。
這三層的比喻：HTML 是房子的隔間，CSS 是裝潢，JavaScript 是電器與自動門。裝潢可以重做不動隔間，自動門壞了不影響牆——分層的好處就是單獨改動，報價的差異也從這裡來：動結構的工，永遠比動樣式的貴。
網頁開發的完整技術棧
完整講網頁開發，前端之外還有後端與資料庫。前端是使用者看到的一切；後端是伺服器上跑的邏輯——表單送進來存到哪、會員怎麼登入、商品庫存怎麼扣；資料庫放的是內容與訂單。三十年前這些全要手寫，現在 WordPress 這類內容管理系統把八成的輪子造好了：文章、頁面、選單、權限、多語，裝起來就有。這也是為什麼現在做一個標準官網的費用遠低於二十年前——你付的錢多數不是造輪子，是把輪子組成你要的車。
代價是另一種複雜度：系統、主題、外掛之間的相容與升級。一台 1 核 1GB 的伺服器跑三個 WordPress 站曾經長期不穩，根因不是站多，是 PHP 記憶體上限被設成 1024M、超過整機記憶體，工作進程互相擠兌；改成 256M、進程 6 縮到 4 之後就穩了。這種問題不出現在設計稿上，全部藏在系統層。
什麼時候真的需要寫程式
換 logo、改文案、調顏色，任何頁面產生器都做得到，不需要動程式。需要動程式的訊號有三個：流程是自訂的——多步驟詢價、規格選配、跟庫存系統串接；呈現是動態的——資料從資料庫來、按條件即時變；效能有硬指標——頁面產生器載入的多餘程式碼要被手工裁掉。有這三個訊號之一，報價裡就會有「客製開發」這個行項，此時工程能力比設計能力重要，看團隊的方式也要跟著換：看 code 品質，不看作品集漂不漂亮。反過來說，沒有這三個訊號卻被報了客製開發的費用，問一句「客製了什麼」，這一問就能試出報價的水分。
app網頁設計是什麼
很多人搜 app網頁設計，其實要的不是 App，是「手機上看起來像 App 的網頁」。這件事有三條路，費用差很大。第一條是響應式網頁（RWD）：同一張網頁自動適配手機螢幕，成本最低，九成需求到這裡就夠。第二條是 PWA（漸進式網頁應用）：網頁加上離線快取與主畫面圖示，體驗接近 App，仍是一張網頁。第三條才是原生 App：真正的雙端開發，費用與維護是網頁的另一個量級。先把「要 App 的功能」還是「要 App 的感覺」想清楚，多數案子的答案是第一條——RWD 的驗收細節可以看響應式設計驗收清單。
不寫程式，怎麼驗收工程品質
老闆看不懂程式碼，但三個訊號看得到。第一，速度：Google 官方的體驗門檻是 LCP ≤2.5s、INP ≤200ms、CLS ≤0.1（web.dev Core Web Vitals），上線後實測一次，不及格就是工程問題不是感覺問題。第二，檔案紀律：我們看過一個站的主題目錄裡躺著 36 個 .backup 副本、全部能被公網直接下載——版本亂成這樣的站，背後的工程習慣不用再考察了。第三，頁面重量：一張 15MB 的首圖能讓幾百個產品頁的體驗指標全部不及格，伺服器再好也救不回來，驗收時打開瀏覽器的開發者工具看圖片大小，一分鐘的事。
再往深一層，WordPress 路線的選型（主題怎麼挑、編輯器怎麼取捨、外掛怎麼管）我們在WordPress 網頁設計指南拆過；速度的量測方法在測試網站速度怎麼測才準；懶得自己架的，外貿獨立站架站指南把從網域到上線的路線一次鋪完。
常見問題
網頁程式設計一定要會寫程式嗎？
分角色。外包的老闆不需要會寫，但要懂 HTML5、CSS3、前端的邊界，否則無法判斷報價；自己動手做的人至少要懂 HTML 與 CSS 才改得動版面。
HTML5 網頁設計和 CSS3 網頁設計是兩種服務嗎？
不是。HTML5 是結構層，CSS3 是樣式層，是同一張網頁的兩層，任何網頁都同時用到，不該分開購買。
app網頁設計是要做一個 App 嗎？
多數不是。這個搜尋要的通常是「手機上看起來像 App 的網頁」，響應式網頁（RWD）就能滿足九成需求，PWA 再加離線與圖示，真正的原生 App 是另一個量級的費用。
不懂程式怎麼驗收工程品質？
三個看得到的訊號：實測 Core Web Vitals 三指標、看主題目錄有沒有亂放的 .backup 副本、打開瀏覽器開發者工具看圖片檔案大小。都不需要寫程式。
作者：劉宇，河南天問網路技術負責人。公司 2017 年成立（工商登記 2017-05-03），長期維護 30–40 個外貿獨立站，自營 tianwenwangluo.com、waimaodulizhan.com、tianwenseo.com 三個站。本文數據均來自我們自己站台的實測，不承諾排名、流量與詢價數。