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

閱讀時間約 4 分鐘

規劃

需求確認

  在開發網站之前,了解需求是相當重要的,若是不事先了解需求,開始設計甚至是進入程式開發時才發現網站不符合想像及需求,就會形成無端的人力、物力及時間上的浪費。通常在確認需求時,至少會需要確認以下項目:
  • 目的
  需要確認網站是為了什麼而架設?是為了做宣傳?還是做為銷售通路?不同的目的會影響網站的結構及設計。
  • 受眾/使用者
  依照目標客群或使用者的不同,在外觀及使用習慣上都會有所不同,了解受眾及使用者能更好在設計時提升使用者體驗,讓網站不只好看還好用。
  • 功能
  依照不同目的可能會有不同的需求功能,事先確認需要哪些功能,便能在設計時將功能一併考慮進使用流程及體驗中,開發時也才能依照需求進行相關的功能開發。功能方面舉幾個例子,如:商城購物、會員管理、資訊/文章發佈更新等等……

規劃網站架構

  了解需求之後,就需要將網站架構建立起來,那麼什麼是網站架構呢?簡單來說就是所謂的網站地圖。他不只能將網站的輪廓描繪出來,也與使用者體驗有關,若是設計不良的架構,有可能會導致使用者難以從網站中找到所需的資訊;對開發者而言,網站架構也是一個了解網站規模、有哪些網頁需要製作的重要資料。
  網站架構通常可以先參考同類型的網站,畫出雛形後再來依據需求做調整。同時,好的網站架構也能優化SEO。

開發時程安排

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

設計

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

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

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

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

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

開發

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

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

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

網站功能開發

  開發階段最主要就是以程式來作業,依照網站性質種類不同,可能會有一些功能上的需求,例如:
  • 購物商場:會員管理、金流、資料庫等
  • 部落格:後台發文管理、數據分析功能等
  • 企業內部網站:內部工作系統、人資系統、倉管系統等

測試及發佈

測試網站功能及除錯

  當網站製作完成後,就需要進行測試,確保網站符合設計並可以使用。例如:
  • 不同瀏覽器下的版面及使用情況
  • 不同使用者及使用狀況模擬
  • 速度及順暢度等等

發佈

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

維護

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

內容更新

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

樣版更新

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

系統/安全性維護、優化

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

  我是正在努力學習網頁開發知識,立志朝網頁前端工程師邁進的佧佧,這個系列是我的學習筆記及記錄,希望我的學習歷程也能給予同樣走在學習路上的夥伴一些協助,若是內容有任何錯誤或不足,也希望各位前輩、先進不吝提出,謝謝!
4會員
14內容數
我是佧佧,歡迎來到我的術式領域。 讓我們一起磨練技術、學習程式, 在前端的領域中不斷成長吧!
留言0
查看全部
發表第一個留言支持創作者!
佧佧的術式領域 的其他內容
在了解網站是什麼之後,讓我們來了解什麼是網站開發?網站開發究竟在做些什麼呢?
到底什麼是網站?網站有什麼功用?又是怎麼運作的呢?
  利用excel建立了個人的學習地圖,持績修正優化中……   目前的作法是,先從概論性的東西開始了解學習,對於可能有哪些東西需要學習再來做滾動式的安排,並記錄學習歷程及耗時。
在了解網站是什麼之後,讓我們來了解什麼是網站開發?網站開發究竟在做些什麼呢?
到底什麼是網站?網站有什麼功用?又是怎麼運作的呢?
  利用excel建立了個人的學習地圖,持績修正優化中……   目前的作法是,先從概論性的東西開始了解學習,對於可能有哪些東西需要學習再來做滾動式的安排,並記錄學習歷程及耗時。
你可能也想看
Google News 追蹤
Thumbnail
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議 分析兩位候選人政策利多/ 利空的板塊和股票
Thumbnail
🤔為什麼團長的能力是死亡筆記本? 🤔為什麼像是死亡筆記本呢? 🤨作者巧思-讓妮翁死亡合理的幾個伏筆
Thumbnail
這個月,忽然達成 2 個里程碑。 第一個里程碑,是我在 2022 年底,有訂下 2023 年的創業月收入(不含合夥),想要盡可能達到 2 萬元生活費。 我並沒有全心投入創業行銷,而是被動行銷,想嘗試會如何。所以我 2023 年每月的創業大概是 1 萬元上下,而今這個月計算下來,忽然發現達到...
Thumbnail
隨著科技不斷進步,智能家居技術正日益融入我們的日常生活。這種趨勢不僅影響了我們的家居生活,還對現代網站開發產生了深遠的影響。本文將深入探討智能家居與現代網站開發之間的聯繫,並預測未來的趨勢。
Thumbnail
《爛漫基隆國際藝術聖誕港12月2日熱情點燈、陸海空光雕耶誕與您緊抓時刻 》 2023年的《英雄聯盟》世界賽總決賽在首爾高尺天空巨蛋舉行,獲得《英雄聯盟》世界賽總決賽主題曲,受邀演唱、本次入選由LCK賽區T1對上LPL賽區WBG,除了虛擬偶像團體心鋼之聲(Heart Steel)以外,人
Thumbnail
想要自架網站,以下幾個網站架設的重點必須掌握! 網域 (Domain Name): 網域是網站的網址或URL的一部分,如 "example.com"。它使使用者能夠輕鬆訪問你的網站,而無需記住複雜的IP地址。網域的購買和續約通常透過域名註冊商進行管理。
Thumbnail
"讓我們一起探索世界的聲音!英文方塊的線上英文發音課程絕對是狗狗的智慧之選!" 本穀對於聲音很敏銳也很敏感,學習力應該算是滿快的(自己說), 馬麻之前教我指令的時候,都是講中文,某天她心血來潮, 想說試試看用英文講,想考驗本穀的智慧,好吧我就秀一波給妳看! 當她說SIT!我很快速就坐了下
Thumbnail
自2022年8月份開始,我盡量在每周透過電子報方式分享當周我所找到的有趣新玩意兒。這篇是擷取2022年8月份的部份精彩內容:面對恐懼勇往直前 – Fear Setting Exercise 🦁🚀全球遠端工作的好選擇:一個月台北房租,享受全世界旅行 🌍✈️ 檔案分享工具好神物 – WeTrans
Thumbnail
說是開發過程的筆記,應該是撞牆心血錄,因為各式各樣的原因,所以為前後端串接困擾了很久⋯⋯
Thumbnail
無論是個人或企業層面,學習使用 No Code 工具和技術都有助提升工作效率。對於個人職涯來說,能夠掌握 No Code 的開發技能,懂得利用相關工具改善流程和解決問題,必能助你在職場上脫穎而出。這篇文章會為大家介紹 7 個 No Code 網站開發工具,並逐一詳細說明它們的特式和架站方法。
Thumbnail
每個人可能都不只有一項專長與興趣,有些可能在後來才會發展出來,也可能是自己以前未曾想像過的結果,此篇為貓頭鷹開啟人生另一斜槓興趣「理財」研究的緣由與投資理財心路歷程,想知道如何一步步學習聰明投資理財,讓資產安穩增值,請伴隨貓頭鷹腳步一起成長。
Thumbnail
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議 分析兩位候選人政策利多/ 利空的板塊和股票
Thumbnail
🤔為什麼團長的能力是死亡筆記本? 🤔為什麼像是死亡筆記本呢? 🤨作者巧思-讓妮翁死亡合理的幾個伏筆
Thumbnail
這個月,忽然達成 2 個里程碑。 第一個里程碑,是我在 2022 年底,有訂下 2023 年的創業月收入(不含合夥),想要盡可能達到 2 萬元生活費。 我並沒有全心投入創業行銷,而是被動行銷,想嘗試會如何。所以我 2023 年每月的創業大概是 1 萬元上下,而今這個月計算下來,忽然發現達到...
Thumbnail
隨著科技不斷進步,智能家居技術正日益融入我們的日常生活。這種趨勢不僅影響了我們的家居生活,還對現代網站開發產生了深遠的影響。本文將深入探討智能家居與現代網站開發之間的聯繫,並預測未來的趨勢。
Thumbnail
《爛漫基隆國際藝術聖誕港12月2日熱情點燈、陸海空光雕耶誕與您緊抓時刻 》 2023年的《英雄聯盟》世界賽總決賽在首爾高尺天空巨蛋舉行,獲得《英雄聯盟》世界賽總決賽主題曲,受邀演唱、本次入選由LCK賽區T1對上LPL賽區WBG,除了虛擬偶像團體心鋼之聲(Heart Steel)以外,人
Thumbnail
想要自架網站,以下幾個網站架設的重點必須掌握! 網域 (Domain Name): 網域是網站的網址或URL的一部分,如 "example.com"。它使使用者能夠輕鬆訪問你的網站,而無需記住複雜的IP地址。網域的購買和續約通常透過域名註冊商進行管理。
Thumbnail
"讓我們一起探索世界的聲音!英文方塊的線上英文發音課程絕對是狗狗的智慧之選!" 本穀對於聲音很敏銳也很敏感,學習力應該算是滿快的(自己說), 馬麻之前教我指令的時候,都是講中文,某天她心血來潮, 想說試試看用英文講,想考驗本穀的智慧,好吧我就秀一波給妳看! 當她說SIT!我很快速就坐了下
Thumbnail
自2022年8月份開始,我盡量在每周透過電子報方式分享當周我所找到的有趣新玩意兒。這篇是擷取2022年8月份的部份精彩內容:面對恐懼勇往直前 – Fear Setting Exercise 🦁🚀全球遠端工作的好選擇:一個月台北房租,享受全世界旅行 🌍✈️ 檔案分享工具好神物 – WeTrans
Thumbnail
說是開發過程的筆記,應該是撞牆心血錄,因為各式各樣的原因,所以為前後端串接困擾了很久⋯⋯
Thumbnail
無論是個人或企業層面,學習使用 No Code 工具和技術都有助提升工作效率。對於個人職涯來說,能夠掌握 No Code 的開發技能,懂得利用相關工具改善流程和解決問題,必能助你在職場上脫穎而出。這篇文章會為大家介紹 7 個 No Code 網站開發工具,並逐一詳細說明它們的特式和架站方法。
Thumbnail
每個人可能都不只有一項專長與興趣,有些可能在後來才會發展出來,也可能是自己以前未曾想像過的結果,此篇為貓頭鷹開啟人生另一斜槓興趣「理財」研究的緣由與投資理財心路歷程,想知道如何一步步學習聰明投資理財,讓資產安穩增值,請伴隨貓頭鷹腳步一起成長。