---
# System prepended metadata

title: 【Day3】網頁設計常識與基礎規劃

---


## 前/後端運作方式
- 前端
撰寫網頁原始程式，構思呈現的樣子
``` 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
:::