---
# System prepended metadata

title: 0601 網站地圖
tags: [跨裝置企業平台與資料庫整合設計班]

---

0601 網站地圖
===

## Site Map
![](https://i.imgur.com/6C7Ms39.png =400x)
* 架構說明
![](https://i.imgur.com/PtkKkQQ.png =400x)

* 舉例網站
[三商巧福](http://www.3375.com.tw/)
[全球災害事件簿](https://den.ncdr.nat.gov.tw/)
[momo 購物網](https://www.momoshop.com.tw/main/Main.jsp)
[蝦皮購物](https://shopee.tw/)

jumbotrons 手法 navbar+banner 沒明顯分界
![](https://i.imgur.com/cK95TZf.png =400x)

## footer
* © -> copyright 版權聲明符號
1. 版權聲明
2. 聯絡資訊
3. 網站地圖
4. 隱私權聲明
5. 使用政策
6. 銷售與退款聲明（電商網站需要）
7. 法律聲明（大企業需要）
8. 投資人專區（用於上市櫃公司）

不可以沒有 footer

### 智慧財產權案例說明
合約沒特別寫
智慧財產權屬於自己的:+1:

* 老師提問：
Q:未來就業
可能會簽合約
在職創作屬於誰的？
A:有提著作人格權屬於誰？
就職中製作的網站就屬於誰

* 聊法律上「公開」的定義
104 給的作品網站
屬於私人 :sweat_smile:
因為是「特定多數人」
「不特定多數人」
例:台鐵火車性愛趴

### 隱私權聲明
點擊那個頁面、在那個頁面停留多少時間....
* 有寫出來就是合法的

## content(內文) or context(內文)
context -> 脈絡

### 網站格式
上述網站架構是為了配合 SEO

## 案例說明
老師問:
客戶要點全熟牛排
面對客戶你要如何對應?

1. 一定要問原因
2. 推薦對方選擇比較好的選項

### One Page 一頁式網站
老師問:
「關於我們」的內容有那些?
參考網頁 - [嘖嘖](https://www.zeczec.com/)
找講故事的項目 - [浪雲醇酒器](https://www.zeczec.com/projects/woo-collective-2020)
1. 使命 例：企業存在的理由 食品公司提供消費者健康安全的食品
2. 理念 做事的最指導原則
3. 願景

使命介紹-參考網站
[tsmc 台積電](https://www.tsmc.com/chinese/default.htm)
* 2019 才改成 RWD 網站
7 奈米領先全球 還有 3 奈米

* 至少要寫一個 最重要的是使命

### Bootstrap 簡介
Twitter 工程師開源的 目前是全世界最多人用的外掛
[Bootstrap 是什麼？給網頁設計新手的 Bootstrap 4入門教學](https://tw.alphacamp.co/blog/bootstrap-4-introduction)

* 放越上面 代表越重要 觀念同 SEO 原則
* 
### 日本客戶幼兒教學網站介紹
![](https://i.imgur.com/kaOmT69.jpg =500x)
一般台灣把公告訊息放在最前面
日本則沒公告訊息放前面 
比較重視內涵 
後才會去看公告訊息
* 後端工具介紹
透過設定 調整網頁內容 上資料功能

### 介紹復康巴士
[復康巴士](https://zh.wikipedia.org/zh-tw/%E5%BE%A9%E5%BA%B7%E5%B7%B4%E5%A3%AB)
負面：司機低薪上報

六角學院 -> 甜點電商 
[甜點電商切版 (六角學院網頁排版PK戰)](https://github.com/icguanyu/sweetaste)

[六角學院](https://www.hexschool.com/)
線上課程 有 slack 討論群

[CakeResume](https://www.cakeresume.com/zh-TW)
中階找工作網站

優勢在那？想辦法做出跟別人不一樣的東西

![](https://i.imgur.com/5jKJ1ED.png =500x)
一定要條列式

形象網站 提升大家對這個網站的好感
最快的方法就是先講故事

[創辦人簡介](https://www.eden.org.tw/pages.php?level1_id=JCUxIyE=&level2_id=JCUxIyE=&level3_id=JCUzNSMh)


### 博取同情心
例子：[[爆卦] 你的每一次的購買 都將是中國詐騙養分](https://www.ptt.cc/bbs/Gossiping/M.1590947700.A.1B1.html)
「假的」只要打上「台灣製造」再加上個好故事 就能博取你的同情心
主因是杯水車薪的心理機制 
百萬人的死亡叫做統計數字 
一個人的不幸卻是你能改變的

[29-廖啟森-Planning (企劃)-Site Map (網站地圖)](https://docs.google.com/document/d/1G2Ed4Xn8kFgDhJBq45LUw-apASX2HR86LJ1wLk_eCa4/edit?usp=sharing)

[Fluent Design System](https://www.microsoft.com/design/fluent/#/)
微軟寫的 網站要如何設計

[Material Design](https://material.io/design)
google 用大數據統計來的優秀網站的結論

[Microsoft 發表與 Material Design 相抗衡的 Fluent Design System](https://medium.com/@mrwenchentw/microsoft-%E7%99%BC%E8%A1%A8%E8%88%87-material-design-%E7%9B%B8%E6%8A%97%E8%A1%A1%E7%9A%84-fluent-design-system-72e828e45c85)


心智圖
![](https://i.imgur.com/0OGpEGd.jpg =500x)

網站地圖 [29-廖啟森-Planning (企劃)-Site Map (網站地圖)](https://docs.google.com/document/d/1G2Ed4Xn8kFgDhJBq45LUw-apASX2HR86LJ1wLk_eCa4/edit?usp=sharing)
[0601 網站地圖](https://hackmd.io/@chiisen/HJMmdA-3L)


## 參考資料



###### tags: `跨裝置企業平台與資料庫整合設計班`