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> ```