---
# System prepended metadata

title: 111-2網頁設計&創意實作專題
tags: [Curriculum notes]

---

111-2網頁設計&創意實作專題
=

###### tags: `Curriculum notes` ๐˙Ⱉ˙๐
 <a href="https://hackmd.io/@Yueyi20051214/coyaohayo">**【111-1筆記傳送門:star:】**</a>
 
<a href="https://hackmd.io/@iamfefe/H1HisJiJj">**【教學筆記】**</a>

<a href="https://docs.google.com/spreadsheets/d/11lfkH05dxkAxL6VKNYsjM_izd9-GbTVgv1JU52GREMs/edit?usp=sharing">**【功課筆記回報區】**</a>

<a href="https://meet.google.com/ink-avsn-cjc">**【Meet連結】**</a>

<a href="https://drive.google.com/drive/folders/14IrVwE4XufiGfVGkupb2pVOlJYnwKdFz">**【專題資料夾】**</a>

<font color="705840">0215~16課程</font>
=
## **小論文二版修正並投稿完成:writing_hand:**

**<a href="https://docs.google.com/document/d/1dMxT6aLzTGt3SOblntW3zlF8hc3nUQwf/edit?usp=share_link&ouid=111856945520216895972&rtpof=true&sd=true">【小論文傳送門】</a>**

<font color="705840">0222~0323課程</font>
=
## 13th 國際華文暨教育盃　電子書創作大賽
**<a href="https://13thebook.gogofinder.com.tw/">【網站傳送門】</a>**

**<a href="https://edu.gogofinder.com.tw/gogofinderReader/index.php?bid=11694&p=1#page/1">【電子書傳送門】</a>**

---
### 開始創作　スタート！
![](https://i.imgur.com/vy6upk4.png)

**<a href="https://edu.gogofinder.com.tw/book/content.php?id=11694">【刊物網址】</a>**
### **標題**
> 你知道生機飲食是什麼嗎？
### **架構**
> 一、前言
> 
> 二、研究動機
> 
> 三、認識生機飲食　
> 
> (1)生機飲食是什麼
> (2)生機飲食的優缺點
> (3)生機飲食的迷思
> 
> 四、正確的攝取生機飲食
> 
> 五、生機飲食的注意事項
> 
> 六、小組工作分配、心得感想
>
> 七、參考資料　
### **工作分配**
> 我負責的是<font color="RoyalBlue">**章節頁**</font>、<font color="RoyalBlue">**注意事項**</font>、<font color="RoyalBlue">**資料來源**</font>、<font color="RoyalBlue">**工作分配的版面設計**</font>和<font color="RoyalBlue">**超連結**</font>
>  ️
> 　　　　　　　　　　　**⇣　⇣　⇣　以下都是我負責的頁面　⇣　⇣　⇣**
![](https://i.imgur.com/BhwO9yC.png)
![](https://i.imgur.com/VnPxtEC.png)
![](https://i.imgur.com/bH9sDo6.png)

### **學習重點**
> 1.　**有效運用<a href="https://openai.com/blog/chatgpt">ChatGPT</a>**
> 　　參考ChatGPT給的答案
> 　　再加以自己的想法觀點來統整運用:sparkles:
> 　　而不是盲目地抄
> 　　-------------------------------------------
> 2.　**版面設計技巧**
> 　　運用色塊方形、旋轉、點圖(或圓形、三角) 可創造律動感
> 　　運用點圖、大的英文字橫排裝飾
> 　　顏色可選擇主圖上有的配色、清爽的配色
> 　　深底配白字、淺底配深字(不要用全黑)
> 　　可留下<font color="RoyalBlue">大膽留白</font>
> 　　可運用商品的<font color="RoyalBlue">去背效果</font>並加入陰影
> 　　<font color="RoyalBlue">色塊透明</font>做出毛玻璃效果
> 　　<font color="RoyalBlue">放大插圖</font>搭配白色的字給人強烈印象
> 　　--------------------------------------------
> 3.　**利用人工智慧套件將文字產生配音檔:notes:**
> 　　Step1.安裝**vscode**
> 　　Step2.裝python(要用**管理員模式**執行)
> 　　Step3.裝pip
> 　　Step4.貼上以下程式碼
```javascript
from gtts import gTTS
         #↓檔名記得改
with open ("sin.txt","r",encoding="utf-8") as fin:
    flagA=True
    c=0
    while flagA:
        line=fin.readline().strip()
        if not line:
            print("end of file")
            flagA=False
        else:
            tts=gTTS(text=line, lang='zh')
            tts.save("C:\\Users\\CAD\\Desktop\\test\\"+str(c)+".mp3") 
            c+=1
            #↑路徑記得改#
```


### **心得感想**
> 　　從這次的電子書創作，我對於電子書的排版、統整資料也比以前更加熟練了，也首次嘗試放段落語音在電子書當中，希望能夠讓讀者們從我們的電子書中學到更多！

### **電子書瀏覽過程**
<iframe width="894" height="484" src="https://www.youtube.com/embed/d9hELh-FfpA" title="你知道生機飲食是什麼嗎？" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>!

<font color="705840">0330~0406課程</font>
=
## 挑選網頁版型

選用網站：**<a href="https://www.free-css.com/free-css-templates">Free CSS</a>**
![](https://i.imgur.com/nHLE8Ko.jpg)
## 討論網站特色且分工
![](https://i.imgur.com/0ezz6zr.jpg)

<font color="705840">0426課程</font>
=
## 360實境照片實作
**【運用網站】**
istreetview
Kuula
<iframe width="100%" height="640" frameborder="0" allow="xr-spatial-tracking; gyroscope; accelerometer" allowfullscreen scrolling="no" src="https://kuula.co/share/collection/7FCqx?logo=1&info=1&fs=1&vr=0&sd=1&thumbs=1"></iframe>
![](https://i.imgur.com/tfwDbGc.png)

---
```htmlembedded=
<!DOCTYPE html>
<html>
<body>

<h2>歐嗨喲ouo</h2>
<label>班級</label>
<select>
    <option>請選擇班級</option>
    <option>資二一</option>
    <option>資二二</option>
    <option>資二三</option>
</select>
<br>
<label>座號</label>
<input type="text" name="" value="">
<br>
<label>姓名</label>
<input type="text" name="" value="">
<br>
<label>性別</label>
<input type="radio" name="" value=""><label>男</label><input type="radio" name="" value=""><label>女</label>
<br>
<label>疫苗</label>
<input type="checkbox" name="" value=""><label>第一劑</label><input type="checkbox" name="" value=""><label>第二劑</label><input type="checkbox" name="" value=""><label>第三劑</label>
<br>
<label>密碼</label>
<input type="text" name="" value="">
<br>
<label>隱藏代碼</label>
<input type="hidden" name="" value="">
<br>
<input type="button" value="說明" name=""><input type="reset" name="" value="送出表單"><input type="submit" name="" value="送出表單">
</body>
</html>
```

<font color="705840">0503課程</font>
=
## 具有超連結的圖片語法
**【運用網站】**
<a href="https://www.image-map.net/">Image-Map</a>

![](https://i.imgur.com/zrSSmHA.png)
> **【步驟】**
> 1. 上傳要用的圖片
> 2. 選擇需要的類型設定
【Shape】
Poly 多邊形
Rect 方形
Circle 圓形
【Link】
貼上超連結想連到的網址
【Target】
可選擇在何處打開鏈接文件
> 3. 點下Show Me The Code!
> 4. 【輸出的程式碼如下】
```htmlembedded=
<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="bH9sDo6.png" usemap="#image-map">

<map name="image-map">
    <area target="" alt="" title="" href="https://hackmd.io/RKe4naXzRoiO4uUHKcbEUw?both" coords="43,42,631,29,611,156,47,154" shape="poly">
</map>
```