## 前/後端運作方式 - 前端 撰寫網頁原始程式，構思呈現的樣子 ``` mermaid graph LR; 瀏覽器接收程式-->HTML轉成架構/CSS轉成視覺/JS轉成動作; ``` - 後端 傳參數至後端，由URL(綽號)找到電腦IP位置(真正位置) ``` mermaid graph LR; 傳資料-->檢索資料庫有無對應資料去運算; 檢索資料庫有無對應資料去運算-->更新特殊資料並產生對應網站 ``` ## 網站開發流程 ``` mermaid graph TD; 開發流程-->前置階段; 開發流程-->執行階段; 開發流程-->上線階段; ``` 1.前置階段 ``` mermaid graph LR; 需求確認-->合作合約; 合作合約-->規格書; 規格書-->網站架構繪製; ``` 2.執行階段 ``` mermaid graph TD; 前端-->CI主要識別設計; CI主要識別設計-->UI介面/元素設計; UI介面/元素設計-->前端網頁開發; 後端-->資料庫結構規劃; 資料庫結構規劃-->主機設置與後台介面開發; 主機設置與後台介面開發-->後端API介面開發; 前端網頁開發-->前後台整合; 後端API介面開發-->前後台整合; ``` 3.上線階段 ``` mermaid graph LR; 測試-->系統上線; 系統上線-->維護合約與執行; ``` :::info 正式經營一個網頁的成本 1. 租用一台伺服器 約NT$100/月(無後台)；約NT$300-400/月(有後台，較完整) 2. 買網址 NT$1000內/年 --->成本：一年NT$6000左右 ::: ## 網站主題名稱logo 執行任何網站時， 1. 先想好要做甚麼，每頁大致上的內容、結構、配色 2. 文字放些甚麼，並延伸想到可用哪些圖像元素(為何?)(東西存在要有意義) 3. 其他細節 ## 網站結構樹 ### 範例1 ``` mermaid graph LR; 工作室--->首頁--->其他細節; 工作室--->簡介--->...; 工作室--->服務--->....; 工作室--->作品集--->.....; 工作室--->projects--->......; 工作室--->聯絡方式--->.......; ``` <補> Database：網站內後台要儲存的資料 ### 範例2 ``` mermaid graph LR; 課程網站--->首頁--->其他細節; 課程網站--->課程--->...; 課程網站--->書籍--->....; 課程網站--->線上教學--->.....; 課程網站--->聯絡--->......; 課程網站--->後台--->.......; ``` ## 網頁排版規劃與分類 結構分析 - 整頁式 - 捲動式 - 無限滾動 - fat footer - 左右固定導覽 - 上下固定導覽 ## 視覺配色概念與資源 ``` mermaid graph TD; 顏色--->主色:最大面積; 顏色--->輔色:重點強調; 顏色--->為提示功能性而標示的顏色:連結或按鈕等; ``` 顏色組合通常是：==黑+白+三種特殊色==，看起來才不會亂。 - 現代風UI設計共通點 1. Material design 2. 板子背後的陰影 ---> 空間感 3. 跨版面 - 資源 1. 搜「KULER」 ---> Adobe color cc 有多種顏色組合可供參考 2. AWWWARDS 許多網站案例可參考 3. dribbble ---> 搜「daily ui」 可找到使用者介面範例、動態參考... 4. coolors 按空白鍵產生隨機顏色直至找到想要的顏色為止 5. BrandColors 列出百大品牌顏色操作 :::warning 內容主要整理自「動畫互動網頁程式入門 (HTML/CSS/JS)」課程，網址：https://hahow.in/courses/56189df9df7b3d0b005c6639/discussions?item=5a1e1745a2c4b000589dd21d :::