跳到主要內容

網站開發是怎麼一回事!?點解!?

網站開發是怎麼一回事!?點解!?


此篇文章獻給完全不瞭解網站開發是何物的人!

網站開發,聽起來就是一個神秘又奇妙的名詞,這類的人,總會讓人覺得講著神秘的語言,笑著奇異的笑點,當群聚的時候有一個很強大的力場。

這群人,就是大家口中所說的『程式設計師,網站工程師』

身為專業的人,口中烙英文這也是很正常的事情,就如小弟本身,每天都至少掛著很特別的名詞 - HTML ,念起來潮到一個不行,更不用說 CSS 什麼的,那就太夢幻了。

網站開發,在其中工作的人,不論是設計,開發,到 QA ,一定都會讓其他人覺得,你電腦一定很好吧,然後就把電腦送到你家門口,請你幫忙『看一下』。

這種事情一直都在我們身邊發生,但是這邊要極力聲明『電腦問題,請找專業』,請認明黃色 X 屋。

網站架構什麼的

對於各位來說,網站就如同信仰一般,深植於你我的心裡,隨時在身邊發生。舉例 facebook, google, line 無一不用到網站,所以這玩意兒,已經是生活中不可獲缺的一部份。

那網站的架構是什麼?那就先切分成兩個大方向來看,網站的表皮,網站的肉。
網站的皮 -> 網站資料
簡單來說眼睛所看,就是網站的皮。送出的資料及回饋資訊,就是網站的肉,也就是網站資料。(至於資料是怎麼儲存,怎麼進行!?這就不屬於本文所介紹的範圍)

所以網站架構就是這麼簡單,但是卻需要至少一批人來進行。 從專案需求者,專案架構師,專案管理師,設計師,前端設計師,後端設計師等人都會需要,當然一個開發團隊不一定會有這麼多人,但是這些角色是一定都會存在著(有些人重複身兼數職)

而這中間很多事情都牽扯到人,許多人與人之間的溝通,行為,互動,思考等,所以『網站開發』這件事情也就變的不是這麼容易。(畢竟牽扯到人的問題,就是一個很大的問題)

邏輯,程式什麼的重要嗎?

對於網站開發,對於一個好的網站設計師,程式設計師兩角色來說,邏輯的清晰是需要的,而且必要存在心中。

畢竟網頁目前需要符合在不同載具(手機,平版,電腦等),為了要一體適用所有情境,就會有所謂的規範,才有辦法讓這麼多不同的尺寸解析度條件下,達到最小標準,讓使用者可以在不同載具上進行閱讀,互動。(RWD)

但是至於程式功力是不是要很強大!?這可能就要看需求,以及這個網站的目的,也許要,也許不用。(沒有標準答案)

要如何進入這個領域

熱情,熱情還是熱情!

對於自己來說,網站開發的這個領域實在變動太快,光是前面講的皮,肉(還沒有講到骨頭)裡面就已經包含多要學習的基本概念,不同的語言語法需要被學習。
如果沒有了熱情,這股力量將難以持續

如果想知道自己有沒有熱情,可以試著從底下推薦的文章開始耐心閱讀起,甚至推薦完成基本的推薦線上課程。

希望這樣講解,能夠讓更多人瞭解『網站開發』,到底是怎麼一回事。

初階入門文章

何謂前端工程師

思維

2015 前端趨勢

實做線上課程

留言

  1. A 'lazy-eyed man' named Caesar shows love for casino giant
    Caesar 후 스코어 is 출장안마 the most famous man in the world and an important figure in the history of 토토 라이브스코어 gambling in many 신규 가입 머니 지급 countries. He 파워 볼 사이트 is most popular in

    回覆刪除

張貼留言

這個網誌中的熱門文章

Vibe Coding:到底?氛圍驅動程式開發必殺技?

Vibe Coding(氛圍編程) 是由 OpenAI 共同創辦人 Andrej Karpathy 在 2025 年提出的革命性程式開發方式,它讓開發者透過自然語言與 AI 對話來生成程式碼,徹底改變了傳統的編程模式。 這種開發方式的核心理念是 「順著感覺走」 ,讓 AI 處理技術細節,開發者專注於創意和需求描述。 Vibe Coding 需要基本上的規劃和執行,但並沒有強制規範,從日常經驗來說可分為三個階段, 前期準備、開發過程、和後期維護 三個關鍵階段。每個階段都有其特定的任務和注意事項,正確執行這些步驟將大幅提升開發效率和程式品質。 將靈感與需求透過 AI 快速轉化成產品功能或原型。以下幫你分成 「前、中、後」 三階段要做的事情,適合你自己做、或帶團隊做 前期:設定 vibe & 準備素材 這個階段的重點是 「建立開發語境」 ,因為 AI 的生成表現高度依賴前期提供的上下文與資料。 明確目標 :釐清要解決的問題、預期要做的功能與核心價值。例如在筆記軟體的情境中,可能是:「我要做一款讓使用者能用 Markdown 記錄筆記,並提供標籤與全文搜尋功能的簡單 App。」 收集靈感 :觀察同類產品(如 Obsidian、Notion)、蒐集市場痛點(例如太多筆記軟體無法脫機使用,或同步效能差)。 建立語境 :準備初步 prompt、背景知識、產品定位、品牌調性、目標使用者輪廓等。 確認資源 :決定用哪些工具(Gemini、ChatGPT、設計軟體、流程管理工具等)。 確認完上述內容之後,就可以先開始進行準備規格,進行第一次的 Vibe Coding 方向驗證 提示詞模板準備 很多人會跳過這步驟,但一份 「好的 AI 提示詞模板」 將決定接下來每一次 AI 對話的品質。有效的提示詞模板需具備: 描述具體且無歧義 包含技術要求和約束條件 提供範例資料和測試案例 指定程式碼風格和慣例 例如針對筆記軟體的案例:   「建立一個支援 AI 功能純文字筆記,輸入內容可即時渲染;需支援儲存到本地檔案,提供標籤欄位做分類;以 React 架構,程式風格採用 Tailwind style components 並使用 hooks。」 開發工具選擇 開發工具的選擇 同樣重要,目前市場上主要的 ...

Claude Code Hooks:自動化與安全的最佳實踐

寫在最前頭,這份文章主要寫起來是給自己看, 同時內容是比較適合開發者,工程師們可以做些自動化處理的簡單筆記。 Claude Code hooks Claude Code hooks 是一種強大的自動化機制,允許用戶在 Claude Code 的不同生命週期階段,自定義執行 shell 指令。這種設計讓開發者能夠將規則和自動化行為嵌入到應用層級,確保每次都能可靠執行,而不必依賴 LLM(大型語言模型)是否會選擇執行某項操作。 Hooks 的核心用途 通知 :自訂收到 Claude Code 等待用戶輸入或執行權限時的提醒方式。 自動格式化 :如在每次檔案編輯後自動執行 prettier (針對 .ts 檔)、 gofmt (針對 .go 檔)等。 日誌記錄 :追蹤所有執行過的命令,便於合規或除錯。 自動反饋 :當 Claude Code 產生不符合團隊規範的程式碼時,自動給出反饋。 自訂權限 :阻擋對生產環境檔案或敏感目錄的修改[^1]。 配置與結構 Hooks 透過設定檔進行配置,分為全域( ~/.claude/settings.json )、專案( .claude/settings.json )、本地專案( .claude/settings.local.json )以及企業級策略設定。每個 hook 由「事件名稱」和「匹配器」組成: "hooks": { "PreToolUse": [ { "matcher": "Bash", "hooks": [ { "type": "command", "command": "jq -r '...'" } ] } ] } matcher :用於匹配工具名稱(支援正則表達式),如 Write 、 Edit|Write 、 Notebook.* 。 hooks :當匹配時要執行的命令陣列。 type :目前僅支援 "command" 。 ...

[CSS] z-index 在不同瀏覽器繼承問題

今天會討論到這個課題,是因為要實做一個Popup dialog,所以我們希望的結果如下圖。 可是在IE7 卻發生了這樣的情況。 Popup不論怎麼設定z-index都無法浮在最上層,我們看一下html架構發生什麼事情。