【網站開發學習筆記】網站開發的流程

更新於 發佈於 閱讀時間約 4 分鐘

規劃

需求確認

  在開發網站之前,了解需求是相當重要的,若是不事先了解需求,開始設計甚至是進入程式開發時才發現網站不符合想像及需求,就會形成無端的人力、物力及時間上的浪費。通常在確認需求時,至少會需要確認以下項目:


  • 目的

  需要確認網站是為了什麼而架設?是為了做宣傳?還是做為銷售通路?不同的目的會影響網站的結構及設計。


  • 受眾/使用者

  依照目標客群或使用者的不同,在外觀及使用習慣上都會有所不同,了解受眾及使用者能更好在設計時提升使用者體驗,讓網站不只好看還好用。


  • 功能

  依照不同目的可能會有不同的需求功能,事先確認需要哪些功能,便能在設計時將功能一併考慮進使用流程及體驗中,開發時也才能依照需求進行相關的功能開發。功能方面舉幾個例子,如:商城購物、會員管理、資訊/文章發佈更新等等……


規劃網站架構

  了解需求之後,就需要將網站架構建立起來,那麼什麼是網站架構呢?簡單來說就是所謂的網站地圖。他不只能將網站的輪廓描繪出來,也與使用者體驗有關,若是設計不良的架構,有可能會導致使用者難以從網站中找到所需的資訊;對開發者而言,網站架構也是一個了解網站規模、有哪些網頁需要製作的重要資料。

  網站架構通常可以先參考同類型的網站,畫出雛形後再來依據需求做調整。同時,好的網站架構也能優化SEO。


開發時程安排

  通常在網站架構規劃完後,便能依照架構所呈現的規模及所需的功能來安排開發時程。


設計

  網站規劃完成後,便需要依照規劃進行設計,設計的重點便是要讓網站「好看又好用」,讓使用者更願意在網站停留或使用網站的服務。設計又分為樣式及使用體驗:


樣版設計(風格、版面安排等……)

  就如人要衣裝,網站的模樣也十分的重要。好的樣版設計能吸引使用者佇足,同時也是一種形象的呈現。


使用者體驗(瀏覽動線、閱覽方式及習慣等)

  若說風格樣式是要給使用者留下良好的第一印象,進而吸引使用者閱覽或使用,那麼良好的使用者體驗就是留住使用者持續使用的重要關鍵。


開發

  設計完成後,就需要將設計的內容實際製作成可以使用的網站,依照樣版及需求功能來進行開發。比較通常會需要進行的開發如下:


將圖像設計稿透過HTML/CSS轉成網站

  設計稿本身只是圖像,還需以HTML/CSS製作成可呈現在瀏覽器上的網站。


網站功能開發

  開發階段最主要就是以程式來作業,依照網站性質種類不同,可能會有一些功能上的需求,例如:

  • 購物商場:會員管理、金流、資料庫等
  • 部落格:後台發文管理、數據分析功能等
  • 企業內部網站:內部工作系統、人資系統、倉管系統等


測試及發佈

測試網站功能及除錯

  當網站製作完成後,就需要進行測試,確保網站符合設計並可以使用。例如:

  • 不同瀏覽器下的版面及使用情況
  • 不同使用者及使用狀況模擬
  • 速度及順暢度等等



發佈

  當網站經過測試除錯後,便能將網站上傳至伺服器,讓使用者能透過網址來使用網站。


維護

  網站發佈了之後,通常並非結束,後續的持續經營才能讓網站持續有所作用,所以還需後續的維護,如:


內容更新

  有些網站如部落格或資訊分享型的網站,需要時常更新內容才能提升SEO排名,也才能發揮該網站的價值。


樣版更新

  或許是因為企業經營方針改變、個人形象改變或是因應季節活動等等,有時也會需要幫網站換套外觀。


系統/安全性維護、優化

  隨著時間的發展,可能出現了新的技術、或是資料量變得龐大,導致使用上的效能或體驗下降,這時候就需要針對既有的功能或系統進行維護及優化,使網站能保持良好的運作。



  我是正在努力學習網頁開發知識,立志朝網頁前端工程師邁進的佧佧,這個系列是我的學習筆記及記錄,希望我的學習歷程也能給予同樣走在學習路上的夥伴一些協助,若是內容有任何錯誤或不足,也希望各位前輩、先進不吝提出,謝謝!

我的學習地圖


留言
avatar-img
留言分享你的想法!
avatar-img
佧佧的術式領域
4會員
15內容數
我是佧佧,歡迎來到我的術式領域。 讓我們一起磨練技術、學習程式, 在前端的領域中不斷成長吧!
佧佧的術式領域的其他內容
2024/11/14
在設計輸入日期的表單時,有時我們會需要限定時間範圍。 像是常見的網銀帳戶記錄,很多就有類似從今天開始前的一年內為查詢範圍的限制,有時候就算在說明文字中已說明資料範圍僅有一年內的資料,還是有可能會有用戶去選到超過一年內的日期。 這種時候直接禁止選取超過一年內的日期,可以避免使用者不小心進行錯誤的操作。
2024/11/14
在設計輸入日期的表單時,有時我們會需要限定時間範圍。 像是常見的網銀帳戶記錄,很多就有類似從今天開始前的一年內為查詢範圍的限制,有時候就算在說明文字中已說明資料範圍僅有一年內的資料,還是有可能會有用戶去選到超過一年內的日期。 這種時候直接禁止選取超過一年內的日期,可以避免使用者不小心進行錯誤的操作。
2024/10/27
  在寫程式的時候,我們常會需要針對不同情況來執行不同的工作。這個時候就會用到條件判斷式 ( if statement )
2024/10/27
  在寫程式的時候,我們常會需要針對不同情況來執行不同的工作。這個時候就會用到條件判斷式 ( if statement )
2024/10/26
  在 RWD 設計當中,很常見到某些區塊在大螢幕上要顯示多欄、在小螢幕上要顯示單欄。用 Bootstrap 的排版(格線系統)可以設定不同裝置要呈現的大小及欄位。但若不依靠 Bootstrap 來做,而是自己撰寫 CSS 的話,或許可以試著用設定最大或最小寬度來完成自適應。
2024/10/26
  在 RWD 設計當中,很常見到某些區塊在大螢幕上要顯示多欄、在小螢幕上要顯示單欄。用 Bootstrap 的排版(格線系統)可以設定不同裝置要呈現的大小及欄位。但若不依靠 Bootstrap 來做,而是自己撰寫 CSS 的話,或許可以試著用設定最大或最小寬度來完成自適應。
看更多
你可能也想看
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
當你邊吃粽子邊看龍舟競賽直播的時候,可能會順道悼念一下2300多年前投江的屈原。但你知道端午節及其活動原先都與屈原毫無關係嗎?這是怎麼回事呢? 本文深入探討端午節設立初衷、粽子、龍舟競渡與屈原自沉四者。看完這篇文章,你就會對端午、粽子、龍舟和屈原的四角關係有新的認識喔。那就讓我們一起解開謎團吧!
Thumbnail
當你邊吃粽子邊看龍舟競賽直播的時候,可能會順道悼念一下2300多年前投江的屈原。但你知道端午節及其活動原先都與屈原毫無關係嗎?這是怎麼回事呢? 本文深入探討端午節設立初衷、粽子、龍舟競渡與屈原自沉四者。看完這篇文章,你就會對端午、粽子、龍舟和屈原的四角關係有新的認識喔。那就讓我們一起解開謎團吧!
Thumbnail
企業架設網站有哪些型態? 在架設公司網站前,企業應該優先思考網站所需功能有哪些,像是公司的目標與定位、銷售產品和服務、客戶互動功能和SEO優化需求等等,確認以上基礎設定後,詢問專業網站設計公司時,也可以有更好的規劃和討論。
Thumbnail
企業架設網站有哪些型態? 在架設公司網站前,企業應該優先思考網站所需功能有哪些,像是公司的目標與定位、銷售產品和服務、客戶互動功能和SEO優化需求等等,確認以上基礎設定後,詢問專業網站設計公司時,也可以有更好的規劃和討論。
Thumbnail
網站對一間公司來說越來越重要,而選擇一間適合的網頁設計公司更是難上加難,香港網頁設計公司成千上萬,要如何找出最適合的公司是一大難題,小編經常會收到回答問有沒有推薦的網頁設計公司,但網頁設計公司的服務都不盡相同,每個人的目標不一樣,所以找一間網頁設計公司時要做足功課,這樣才能找到適合你的網站設計公司。
Thumbnail
網站對一間公司來說越來越重要,而選擇一間適合的網頁設計公司更是難上加難,香港網頁設計公司成千上萬,要如何找出最適合的公司是一大難題,小編經常會收到回答問有沒有推薦的網頁設計公司,但網頁設計公司的服務都不盡相同,每個人的目標不一樣,所以找一間網頁設計公司時要做足功課,這樣才能找到適合你的網站設計公司。
Thumbnail
1. 官網設計重點與個人網站設計差別在哪? 2. 官網套版與客製化網站的優缺點比較 3. 網站設計首頁的重點及規劃是什麼? 3. 什麼產業適合一頁式網頁? 📷 官網設計重點與個人網站設計差別在哪? 設計網站首先需要了解使用需求,企業品牌官方網站設計與個人網站製作,架構邏輯將會完全不同。 銷售網頁
Thumbnail
1. 官網設計重點與個人網站設計差別在哪? 2. 官網套版與客製化網站的優缺點比較 3. 網站設計首頁的重點及規劃是什麼? 3. 什麼產業適合一頁式網頁? 📷 官網設計重點與個人網站設計差別在哪? 設計網站首先需要了解使用需求,企業品牌官方網站設計與個人網站製作,架構邏輯將會完全不同。 銷售網頁
Thumbnail
很多時候我們都在專注於擁有一個網站、追求能被搜尋引擎認可,但卻忘了到頭來網站視覺還得經的起使用者考驗。別說是使用者,今天若有兩種不同網頁設計視覺在你眼前,一個精緻但後台可能有問題,另一個粗糙卻有完整的後台功能,你會怎麼選?
Thumbnail
很多時候我們都在專注於擁有一個網站、追求能被搜尋引擎認可,但卻忘了到頭來網站視覺還得經的起使用者考驗。別說是使用者,今天若有兩種不同網頁設計視覺在你眼前,一個精緻但後台可能有問題,另一個粗糙卻有完整的後台功能,你會怎麼選?
Thumbnail
當我們初步對搜尋引擎的運作模式有了概念之後,就進入到真正 SEO 實際操作的環節了。很多 SEO 網站都會把最佳化實踐放在SEO 技術,而並沒有花太多時間關注到網站本身的架構。 而從我個人的理念來說,我們應該要先搞懂架構,所以這一期,讓我們來說網站架構吧。
Thumbnail
當我們初步對搜尋引擎的運作模式有了概念之後,就進入到真正 SEO 實際操作的環節了。很多 SEO 網站都會把最佳化實踐放在SEO 技術,而並沒有花太多時間關注到網站本身的架構。 而從我個人的理念來說,我們應該要先搞懂架構,所以這一期,讓我們來說網站架構吧。
Thumbnail
淺談官方網站的設計規劃:從瞭解需求和提供價值開始 因為長期擔任企業顧問與職業講師的緣故,近年來有很多企業機構或公部門找我教授有關內容行銷與文案寫作的課程,除此之外,他們也會跟我詢問有關官方網站、部落格的架設與經營問題。 舉例來說,之前我就曾接受經濟部中小企業處新創企業價值共創計畫的邀請,為某家新創公
Thumbnail
淺談官方網站的設計規劃:從瞭解需求和提供價值開始 因為長期擔任企業顧問與職業講師的緣故,近年來有很多企業機構或公部門找我教授有關內容行銷與文案寫作的課程,除此之外,他們也會跟我詢問有關官方網站、部落格的架設與經營問題。 舉例來說,之前我就曾接受經濟部中小企業處新創企業價值共創計畫的邀請,為某家新創公
Thumbnail
根據調查,38%的網站造訪者會純粹因為網站不美觀而離開網頁,可見網站設計的重要性。要如何一步一步打造出超強的網站呢?今天,哈利熊為大家整理了網站設計的八大步驟。
Thumbnail
根據調查,38%的網站造訪者會純粹因為網站不美觀而離開網頁,可見網站設計的重要性。要如何一步一步打造出超強的網站呢?今天,哈利熊為大家整理了網站設計的八大步驟。
Thumbnail
本系列文章前面的「資訊架構的三種基本角色」、「事前準備與內容提供者」、以及「評估資訊內容的影響力」三篇,都是關於資訊架構前期規劃的討論,所以本文想談談執行過程的思考,包括進行網站地圖(sitemap)、框線架構(wireframe)等設計時犯過哪些錯誤、以及更理想的作法。
Thumbnail
本系列文章前面的「資訊架構的三種基本角色」、「事前準備與內容提供者」、以及「評估資訊內容的影響力」三篇,都是關於資訊架構前期規劃的討論,所以本文想談談執行過程的思考,包括進行網站地圖(sitemap)、框線架構(wireframe)等設計時犯過哪些錯誤、以及更理想的作法。
Thumbnail
『唉唉!我最近想開始創業,你幫我做個網頁推廣吧?』這大概是我學習程式設計之後最常聽到的一句話,但往往在雙方深入對談之後,朋友才會驚覺事情並不是把圖片放一放這麼簡單的(成本也是),
Thumbnail
『唉唉!我最近想開始創業,你幫我做個網頁推廣吧?』這大概是我學習程式設計之後最常聽到的一句話,但往往在雙方深入對談之後,朋友才會驚覺事情並不是把圖片放一放這麼簡單的(成本也是),
Thumbnail
在前一篇〈資訊架構入門#1〉中,我們提到資訊架構的三個基本角色:使用者、資訊系統、以及資訊提供者;本文將繼續討論思考資訊架構的方式,希望讀者往後可以用新的方式來觀察使用的網站、app、甚至日常生活中各種數位產品的資訊架構。
Thumbnail
在前一篇〈資訊架構入門#1〉中,我們提到資訊架構的三個基本角色:使用者、資訊系統、以及資訊提供者;本文將繼續討論思考資訊架構的方式,希望讀者往後可以用新的方式來觀察使用的網站、app、甚至日常生活中各種數位產品的資訊架構。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News