網站建置流程有哪些？網站設計各階段需要多少時間？

網站建置5大階段流程，每個階段也各有不同的細項與時程。架設網站前，你可能會想知道網站建置各階段的準備工作有哪些、預計花多少時間完成。讓我們進一步解說，讓你了解各階段的重點。

網站建置流程圖 - 凱士網頁設計

網站建置前有哪些準備工作？
建置流程1：網頁設計階段 | 確認版面設計與操作流程
建置流程2：網站建置階段 | 穩定開發、建立網站整體建構
建置流程3：網站測試、上稿 | 細心校對網頁每一個細節
建置流程4：網站正式上線與驗收

網站從零到有，將會歷經網站規劃、網頁設計、網站建置、網站測試上稿、上線驗收這5大階段流程。我們先來了解網站建置前的準備工作，後續再一一為大家介紹網站建置的各階段流程。

網站建置前有哪些準備工作？

對於公司網站的建置來說，有很大的機率會直接找網頁設計公司進行網站建置。網站建置的技術與細節很多，在網站建置前(也就是簽約前)，會有哪些準備工作？下列這幾點通常是決定性的重點，給各位參考。

準備好你的網站架構表 - 網站架構表(sitemap)代表整個網站設計的工作範疇，有了網站架構表，至少網頁設計公司比較知道你的網站是大是小，有沒有什麼特殊功能、有沒有什麼特殊版面、適合用套版或是客製化的方式進行網站建置。
找出至少5個目標網站參考範例 - 網頁設計的需求品質與風格很難用口語或文字表達，但通常可以在網站參考範例看得出來。提供網頁設計參考範例可以讓網頁設計公司很直覺來理解你對設計品質的要求程度。
提出預算範圍 - 網站製作的預算範圍可以從5萬到100萬，就像蓋房子一樣，預算決定了你可以蓋多大的房子，決定了室內裝潢能做到什麼程度，提出你的預算範圍有助於讓網頁設計公司評估你的預算是否能達到你的期望。
決定你的上線時間 - 網站建置通常有一定的時程，尤其是客製化的網站，製作細節很多，也會花比較多時間。讓網頁設計公司了解你的上線期限(例如跟前網站製作公司的合約到期、或是要趕著參展時程)，有助於掌握網站製作的時程，避免什麼事都規劃好了，才發現沒辦法在預期時間內將網站上線。

延伸閱讀：不知如何開始跟網頁設計公司談？推薦4個網站設計溝通前的準備重點

延伸閱讀：網站架構、網站內容要放些什麼？網站架設前該準備的公司網站架構、參考清單

建置流程1：網頁設計階段 | 確認版面設計與操作流程

簽約後即可開始進行網頁設計。從首頁開始，透過訪談及需求匯整後，提供提案稿給客戶進行討論，確認後再進行設計稿。首頁是整個網站設計風格與樣式的基準，首頁定稿也就代表網站風格定下來了。完成首頁設計後，就可以往下進行各內頁的設計，並確保各內頁設計風格的一致性。完成各內頁版面設計並經雙方確認後，即可進行下一階段的網站建置工作。

首頁提案稿確認
首頁設計稿確認、網站設計風格定稿
各內頁設計、對稿，建立設計說明書
網站客製功能版面設計(UI)、流程規劃(UX)、資料庫規劃
建立切版說明書

預估時間：4~6週

網站進度：10%~50%

延伸閱讀：談網頁設計流程：如何進行視覺設計溝通？

建置流程2：網站建置階段 | 穩定開發、建立網站整體建構

這個階段的工作包含前台網頁切版(html+CSS)、CMS後台系統整合、資料庫與程式功能建置。這段時間可以進行網站上稿資料的整理和歸檔。

網站進行本地端開發與測試(於設計公司內部開發環境)
網站選單架構建立
網站切版工作、RWD響應式網頁
網頁前端CSS樣式、網頁動態效果
網站客製功能撰寫、邏輯測試、單元測試

預估時間：3~4週

網站進度：70%~80%

延伸閱讀：5個CMS後台管理系統的優點

建置流程3：網站測試、上稿 | 細心校對網頁每一個細節

網站在測試流程中有幾個小階段，當網站於開發環境初步建置完成後，就會在開發環境中依網站架構表(sitemap)進行選單/內容建置、基礎功能性測試，待網站轉移至demo site後，就可以讓客戶看到約80%網站的樣子。在這個階段可以驗證網站是否如規劃書和設計稿呈現在網路上，RWD及網頁瀏覽切換也可以在這個階段得到實際的反饋。網頁內容上稿的過程中，也能用來驗證當初的版面規劃是否符合實際上稿的情況。各語言版本的資料也會在第一語言版本確認後開始進行。這個階段會經過反覆的測試和微調，確認無誤後，就可以進行網站正式上線，轉移到正式主機。