1.2 網站開發流程

在團隊中，不同技術專長的人要彼此配合，就必須建立在良好溝通的基礎上。由于企劃、設計和程序這3個領域的工作是息息相關的，唯有良好的溝通與協調才能順利完成整個項目，而且溝通的質量也間接影響到最終成品的優劣。下面將對網站項目的執行流程及相關人員該負責哪些工作事項進行說明，大致的流程如圖1-1所示。

1. 項目經理

項目經理（Project Manager，PM）負責與客戶洽談網頁的相關事宜，待項目成立后，項目經理管理項目團隊的進度并消除客戶的疑問，這個角色也是設計師與客戶之間溝通的橋梁，是統籌整個項目與進度的關鍵角色。

網站在構建過程中需要注意的地方非常多，若客戶一開始的需求不夠明確，就很容易在制作過程中產生不斷修改的問題，在這種不斷修改的過程中會相對提高溝通成本、制作成本、時間成本和機會成本等。

主要工作事項如下。

1）網站規劃與報價確認：逐條確認網站規劃書與報價等內容。網站規劃書闡明制作規格和工作范疇。

2）雙方簽約：由乙方（公司）準備裝訂完成的合約書（一式兩份）、用?。由w印章），連同第一期款項發票寄出。甲方（客戶）收到合約用印后再寄回，并支付第一期款項。

2. 企劃

企劃（Planner）負責了解客戶的需求與期許后，著手構思網站目標、分析現狀、歸納方向、判斷各種可行性，直到擬訂策略、實施方案、追蹤成效與評估成果等，最終整理出一份網站規劃書。之后再將規劃書交至團隊其他成員，團隊成員再根據規劃書中各自負責的事項進行填寫與設計，以組織出網站的內容與各種功能需求。

主要工作事項如下。

1）了解客戶的需求：客戶提出初步的網站設計需求、網站架構圖、功能需求及相關網站風格的參考。

2）提供網站規劃書及報價單：根據討論的網站架構及功能需求，提供網站規劃書、報價單等內容。網站規劃應盡可能涵蓋各個方面，可能包含的內容如下。

● 進行網站構建前的市場分析。

● 設定網站目的及功能定位。

● 網站技術解決方案。

● 網站內容規劃。

● 網頁設計及視覺美編。

● 網站維護與網站內容更新。

● 網站發布前的測試與調整修正。

● 網站優化與網站發布推廣。

● 網站構建工作日程表。

● 網站構建費用明細。

以上為網站規劃書中應該體現的主要內容，可以根據不同的需求、構建目的及內容再進行增減。在構建網站之初，一定要進行細致、詳細的規劃，盡可能避免各種不確定因素，這樣才能如期完成項目，滿足客戶需求。

3. 設計

這里的設計是指視覺設計（Visual Designer，VD）。接手規劃書后，與項目經理、企劃討論網站的細節，并著手進行界面設計、視覺風格、顏色搭配及心理分析等視覺設計。

視覺設計師除了要了解客戶的行業類型，還要了解制作網頁的主要用意，進而設計出符合客戶需求的頁面，設計師需具有獨特的美感及創意，讓網頁能夠兩者兼備，創造出符合客戶需求的網頁。

主要工作事項如下。

1）網站風格討論：雙方進一步討論網站視覺風格。討論網站是否需遵循 CIS（企業識別系統）、VI（視覺識別）進行延伸設計。若無視覺系統，雙方可共同討論網站所使用的顏色、設計元素等需求。

2）首頁版面設計：此階段將根據所討論的各種設計需求進行首頁提案設計，并提供設計稿與客戶討論、調整并最終定稿。

3）圖文資料：由客戶提供內頁所需的圖片和文字，用于內頁版面設計。設計師需要考慮如何將客戶所提供的資料進行妥善編排與設計。

4）內頁版面設計：以先前所定稿的首頁版面設計為基礎，進行各內頁編排設計，并與客戶逐項討論確認。

4. 前端

前端工程師（Front-End Engineer，F2E）負責視覺設計，并整合后端工程師所開發出的各種內容與功能。其主要負責編寫HTML、CSS、JavaScript與接收 API等內容，最終要確保網頁程序的正確性與順暢度，進而將完成的網頁呈現到網絡上。

主要工作事項如下。

1）切版與組版：接收視覺設計師裁切完畢的各種素材。根據整體的視覺樣式利用HTML+CSS的方式進行網頁切割與組裝操作。

2）效果制作：各種網站模塊、組件、CSS樣式及定制化的程序設計，如Slider（圖片輪播）、Accordion（可折疊式菜單）與圖片特效等。

3）細部微調：切版的細節微調，如圖片與文字尺寸的調整、文字的間距與行距的調整，以及網頁圖文內容的修訂等。

4）內部測試：此階段通過客戶所提供的數據來檢查網站的實用性，查看內容是否會造成跑版、字里行間是否容易閱讀，以及數據是否按照既定的規則顯示。

“切版”就是將視覺設計師設計好的PSD設計文件切成HTML+CSS格式。切版需要具有一定的技巧與專業知識，比如適當的HTML語句tag（標簽）及結構，用什么方式來組成內容可以比較好地呈現并具有較好的性能，CSS怎么編寫比較好維護更新，跨瀏覽器時怎么取得最佳的平衡；跨平臺時要不要設計可以變更尺寸的響應式設計等，這些都是在這一階段就要決定的。

5. 后端

后端工程師（Back-End Engineer，B2E）根據網站規劃書中所需的各項功能、數據庫內容及后臺管理系統等需求進行程序開發。同時需提供一種方式讓前端工程師可以串接所開發出的功能，或是等前端工程師將網頁設計完畢后交由后端工程師進行整合。

主要工作事項如下。

1）數據庫內容：根據需求，開發出對應功能的字段內容與層次關系等。

2）后臺管理系統：制作與數據庫連接的管理頁面，讓客戶可直接從網頁上登錄，以進行頁面數據的添加、刪除、查詢和修改操作，而不是去修改程序代碼與數據庫內容。

3）功能制作：有些功能是前端與數據庫相互連接后才能顯示出的內容。例如首頁的廣告橫幅（Banner），客戶可直接從管理頁面進行圖片的替換，而前端工程師必須編寫切換效果，以及從數據庫中抓取指定的圖片并顯示出來，類似這部分的內容必須由后端工程師告訴前端工程師如何連接數據庫。

6. 測試

待前端工程師與后端工程師將網頁制作與整合完畢后，質量保證（Quality Assurance，QA）工程師根據網站規劃書中的需要項目逐項檢查內容與功能，借此建立和維持質量管理體系來確保網站質量沒有問題。

主要工作事項如下。

1）初步校對：此階段由客戶瀏覽網站進行網頁內容的校對，并列出問題列表，以便逐條進行修正和調整。

2）登錄測試：此階段由客戶針對之后需自行使用的各項功能從網站后臺進行登錄測試，并參照提出的問題列表來進行修正和調整。

3）網頁修正：由公司根據列表內容更正圖文資料并修復互動功能上的錯誤。

4）多國語言版網站：在第一語言版本網站構建完成后，才會進行其他各語言版本網站的制作。此階段由客戶提供各個語言版本的翻譯文稿，再進行其他語言版本網站的制作，各個語言的版式會根據實際情況進行版面的調整。

7. 上線

將通過測試的網站上線，讓大眾可以搜索與瀏覽。

主要工作事項如下。

1）上級的前置工作：準備DNS數據、主機連接數據及新主機環境檢查測試。

2）網站上線：將網站轉移至正式主機，等到DNS指向生效后，網站正式上線。一般而言，DNS指向需24～72小時。網站上線后，需進行網站的各項上線核查。例如，“聯系人”窗體的郵件發送測試、網頁目錄安全性設置、加入Google分析和網站搜索引擎登錄等。

3）整合Google分析：整合Google網頁分析平臺（Google Analytics，GA），客戶可通過GA了解網站每日的訪客數、所使用的搜索關鍵字及訪客來源地區等用戶信息，以調整網站經營的策略。

4）培訓（網站交接）：此階段將會由公司派專人為客戶說明網站的操作和使用。同時也提供操作手冊和網站后臺登錄數據，供客戶日后用于網站的維護工作。