---
# System prepended metadata

title: 產創設計小組 12/09 網頁設計工作坊

---

# 產創設計小組 12/09 網頁設計工作坊
[TOC]

## AI
### 類神經網絡
#### Bing AI
![image](https://hackmd.io/_uploads/rkgY7PZ86.png)

##  如何使用AI生成粉專圖片
### CANVA：魔法媒體工具_輸入你想要的圖片屬性
![image](https://hackmd.io/_uploads/SyB07vZ8a.png)

## HTML 是什麼
### MARKDOWN
![12](https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Markdown-mark.svg/1200px-Markdown-mark.svg.png)
### 基礎 HTML
```htmlembedded
<head>
	<title>
		產創設計小組
	</title>
</head>
<body>
<p style="color:red">你好
    這也會是紅色的
</p>
<p>這個不會是紅色的</p>
</body>
```
---
<style>
    .blue-big {
        color:blue;
        font-size:20px
    }
    .green-big {
        color:green;
        font-size:20px
    }
    .orange-small{
        color:orange;
        font-size:12px
    }
    .red-green{
        color:green;
        font-size:12px
    }
    .small{
        font-size: 11px
    }
</style>
---
<p class="small blue-big">測試</p>

> [name="葦"]

---
<p style="color:red">紅色</p>
<p style="color:purple">在span前面加一個tab線分層，方便閱讀</p>
<p class="green-big">聖
    <span style="color:red;font-size:20px">誕</span>
</p>

> [name="竹"]
---
<p class="green-big">嘿<span style="color:blue">嘿</p>
<p style="color:pink; font-size:35px">哈囉
    <span style="color:green;font-size:20px">哈囉囉</p>
<p style="color:#820041	">這個不會是紅色的</p>

> [name="魚"]
---
<p style="color:#02F78E; font-size:25px">聖
    誕
    <span style="color:#02F78E; font-size:25px">節</span>
</p>
<p class="red">not green</p>

> [name="圓"]
---
<p style="color:yellow">Hi!
    <span style="color:orange">你好</span>
</p>
<p style="color:orange; font-size:20px">這個不會是黃色的</p>
<p style="color:yellow; font-size:40px">這個會是黃色的</p>
<p class="orange-small">not yellow</p>

>[name="林"]
---

## VSCODE
- [Visual Studio Code](https://code.visualstudio.com/)
- [Live Preview](https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server)
- [Little Link](https://github.com/sethcottle/littlelink)