---
# System prepended metadata

title: '114網頁設計&實作專題 [下學期]'
tags: [' Talk', Templates]

---

---

title: #114-1網頁設計&創意實作專題教學筆記 [下學期]
tags: Templates, Talk
description: by Fefe

---

<style>

h1{
  color:#FC7A57 !important;        
}
h2{
  color:#ff7e6b !important;            
}
h3{
  color:#ffa69e!important;
}    
</style>

# 114網頁設計&實作專題 [下學期]
<div style="color:rgb(201 78 71);font-size:2em;">
  


<!--       
    
[114各組回報區](https://docs.google.com/spreadsheets/d/1-fz-TGRxml4KFqd5Z58zCjtbFam-va1pbgICqBKevgo/edit?usp=sharing)
  
[114各組檔案上傳下載區](https://drive.google.com/drive/folders/1hMbYpDQ1H0eyLHirk4bZDNzQW-o3pOC7?usp=sharing)    
   
[討論padlet](https://padlet.com/iamfefe/114-2-v486rzj5a3alavoq)
    (https://padlet.com/iamfefe/web-class-activities-sustainability-ddajepq7fdlxz6by)-->
    
</div>

[ [gink](https://github.com/geovens/gInk/releases/) | [ZoomIt](https://learn.microsoft.com/en-us/sysinternals/downloads/zoomit) | [wacom](https://cdn.wacom.com/u/productsupport/drivers/win/professional/WacomTablet_6.4.3-1.exe) | [進度表](https://drive.google.com/file/d/13GSXolAVD-vqrQOoIvryflb9AvuFxc3m/view?usp=sharing) ]

---

---



# 課室英語練習
> ## 「Attention, please. It is class time.（請注意，上課時間到了。）」
Okay. / Got it. / Yes, teacher.
I’m ready. / We’re ready.
Sorry. I’ll be quiet now.
One moment, please. I’m finishing up.
> ## 「Are you ready?（妳/你準備好了嗎？）」
Yes, we are. / Yes, I am.
Not yet. Give me a minute, please.
Almost. I just need a pen/book.
Could you wait a second, please?
I think so. / I’m good to go.
> ## 「I’m going to call the roll.（我要點名了。）」
Here. / Present. / Yes.
I’m here. / Over here.
Present, teacher. / Here, Ms./Mr. [姓氏].
That’s me. / Speaking.
Could you repeat my name, please?
> ## 「Is anybody absent today?（今天有人缺席嗎？）」
Yes, [Name] is absent.
[Name] isn’t here today.
No, everyone is here.
I’m not sure.
[Name] will be late. / [Name] is on leave.
> ## 讓我們開始吧。
Let's get started.

---



---

title: #113-2網頁設計&創意實作專題教學筆記
tags: Templates, Talk
description: View the slide with "Slide Mode".

---

<style>
code.blue {
  color: #337AB7 !important;
}
code.orange {
  color: #8c5e58 !important;
}
h1{
  color:#FC7A57 !important;        
}
h2{
  color:#997e6b !important;            
}
h3{
  color:#83C5BE!important;
}
    
tr:nth-child(even) {
  background-color: #f2f2f2;
}    
</style>



# 單元目標 專題網站完成
# 單元1 UI介面設計 User Interface Design    
# 單元1-1 XD 使用
快速鍵:
ctrl +    =>放大
ctrl -    =>縮小
空白       =>移動畫布
Alt + 移動 =>複製
畫圖形+shift =>等比例

## XD好用套件:
* unDraw 插圖
* Icondrop 按鈕
* iconsout 找icon
* UIFaces 自動人臉
* Quick Mockup 各類預設模板
* unsplash 找圖
* quickmockup 
* color spark 隨機變色
* blobular 隨意色塊
* vizzy charts 統計圖表
* lottie files小動圖(X) 改用iconsout找lottie animations
* google sheet 對照資料庫
* rotato 專案展示(X)
* lorem ipsum 產生假字


# 單元1-2 figma

## Introduce

就是它以黑馬之姿擄獲了全球設計師的心！超人氣 UI 設計工具 Figma 快速上手！/PAPAYA
https://www.youtube.com/watch?v=P96TQwsY_VY

:triangular_flag_on_post: 補充figma的連結作法:
https://www.youtube.com/watch?v=PGxlJSekO50
:triangular_flag_on_post: 補充figma的hover作法：
https://www.youtube.com/watch?v=C8m0_QnKQ6Y

    
---

## [免費網頁figma範本](https://www.figma.com/community/file/849342658995967505)
 
## 好用figma套件
* 按鈕:arrow_right: Phosphor Icons
* 漸層:arrow_right:WebGradients `可以做背景或按鈕等`
* 泡泡:arrow_right:Blobs `可以當底或放插圖`
* 人物插圖:arrow_right:Humaaans for Figma
* AI生圖:arrow_right:AI image generator
* 去背:arrow_right:Icons8 Background Remover `頁面插圖好看`
* 免費模版設計:arrow_right:Wireframe Designer
* 抓網頁到figma:arrow_right:html.to.design
* 小動畫:arrow_right:LottieFiles
* 圖庫:arrow_right:Unsplash
* 假字:arrow_right:lorem ipsum

## :joystick:[網頁設計稿繳交處]    
    
---    
    
## 實作figma-手機版壢商校園
![upload_5b715b2a784eb9488f8295f8c07b28dc](https://hackmd.io/_uploads/Bybsg7rY-e.png)


## :joystick:安裝(新的[beta](https://desktop.figma.com/win/beta/FigmaBetaSetup.exe)版)
> * 套件lorem ipsum,feather icons,iconsout,lottiefiles,blobs
> * ![image](https://hackmd.io/_uploads/r1N1MmHYZl.png)
開frame
> * shift+圖片放大縮小為等比例
> * alt+移動為複製
> * 如何切圖(![](https://i.imgur.com/AP70iuP.png**) **圓角**或**遮罩**放要放下面)
> * 假字
> * lottiefiles的動圖要選gif
> * 素材[beautiful CLVSC by fefe](https://drive.google.com/drive/folders/1XvZvv-HfYHShIfZ40489wo2xyuUWUIHO?usp=sharing)
> * constraints設定位置是否隨縮放變化
> * 固定在上要在prototype選Fixed
> * 組件creat component![image](https://hackmd.io/_uploads/H1kRZQBtWe.png)

 快速鍵ctrl+alt+k 
 複製成另一個,改色或大小等,改原始組件可一次修改多個
> * 選單底色effect/backgruond blur毛玻璃效果    
    
    
---
> ### 如何做按鈕互動
> * 複製多個shift連選,autolayout,縮小頁框,prototype選overflow/hozional
> * modal小視窗跳出效果
![upload_7d96ce5c192b6b2b86e687f6c42bf350](https://hackmd.io/_uploads/SkePbmrYbl.png)

> * 連選按combine as varient切換狀態,拉關連,選hover,改動畫效果
> * 要確定放在主版中的圖字才會出現

![upload_02b757b0021b0c5df62042a3d7cccd23](https://hackmd.io/_uploads/SyetWXSFWx.png)

![upload_27f8b6cf2daa2d040c9d22a3a4a7fdd4](https://hackmd.io/_uploads/SkVY-XBYbx.png)



---


## 視覺美感設計
* 切圖合成多張圖片,figma或是PS作法皆可
* 素材來源:專題實拍,pexels,unsplash等
* 做橫幅技巧:模糊、調色、局部加暗、加文字設計
### 1.按鈕做超連結
各區內容需先有個框,prototype拉超連結,記得選動畫
![1](https://hackmd.io/_uploads/SkzMfIBFZl.png)

選單列要選position fixed固定在上
![2](https://hackmd.io/_uploads/HkaMzLBtWe.png)

## 互動製作
    
### 2.有小滑動視窗可另外開frame做
![3](https://hackmd.io/_uploads/S1NEMUHYZg.png)

### 滑回去
![4](https://hackmd.io/_uploads/HyjrfUBFbe.png)

### 3.圖片滑動
先找好多張圖片,在設計時選autolayout自動排版
![5](https://hackmd.io/_uploads/ByUvzISF-g.png)

將圖片區frame拉小成視窗大小,移進主frame,選擇可水平滑動
![6](https://hackmd.io/_uploads/rJ1_GLSt-x.png)

### 4.按鈕hover
先畫一個按鈕,按建立元件![image](https://hackmd.io/_uploads/SkzYMUrF-l.png)
鈕後

設計/屬性/變數
![7](https://hackmd.io/_uploads/ByAYM8SKZx.png)
再按+增加按鈕狀態,設計好後切到prototype,選預設按鈕,interactive/click/hover/change切換狀態variant/記得選動畫animate slow
![8](https://hackmd.io/_uploads/ByTsfIStZx.png)



回到主frame,選左邊Assets找到後插入

---


:joystick: 搜尋主頁設計款式三張以上，並畫出網站設計

---

## 課堂示範
> [老師示範作品](https://www.figma.com/proto/grwNixAPdEdRjSAKZyraOQ/Untitled?page-id=0%3A1&node-id=1%3A2)

> [趣味作品參考](
https://xd.adobe.com/view/2366cb46-0d5d-45f4-8d87-a5a988c9bc3e-7635/?fullscreen=)

> 優良作品展-網頁設計推薦作品     
421 31 14131 陳雨琪  
421 35 14135 曾羽岑  
423 27 14327 林椀嫺
https://reurl.cc/D306MR
421 23 14123 吳千惠  
421 25 14125 李怡蓁  
421 29 14129 徐佑涵  
https://reurl.cc/28K6Av    
    
    
#### [cantunsee](https://cantunsee.space/) 提昇編排美感小遊戲
> 思考哪個設計比較符合大眾審美






## :joystick:小組設計稿請分享連結交至各組繳交區


<!--穀保期中考https://docs.google.com/spreadsheets/d/1SzJC-IpOewj7OevzabZiaBQAEUtpcIjHESEppw9ZhCA/edit#gid=0
-->

# 單元-2 專題網站各種指定項目


# :triangular_flag_on_post: 專題網站作品要求
* 專題小組名片頁設計-CSS新語法練習
> [Demo](http://203.72.100.60/dpweb/fefe/)
> Sample file [download](https://drive.google.com/file/d/1Z8UPWBgq6JKtdMqeN4zmiUP_qh-RaCB8/view?usp=sharing)
> [PPT](https://www.canva.com/design/DAHC98HYpFE/FPX6-Y_KEMJxXLIJjCg7ww/edit?utm_content=DAHC98HYpFE&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton)
> [Padlet--show time!](https://padlet.com/iamfefe/show-time-l9jizp60kxia4un4) 包含文字與設計說明影片
* 新版網站設計含特效
* 內容完整連結
* 調整色系與專題內容相符
* 網站標題與小圖示
* font awesom使用
* 電子書連結(電子書封面、介紹與超連結)
* 圖文並茂(與專題內容相符)
* 影片嵌入
* 地圖嵌入
* 問卷嵌入
* wow互動動畫
* 固定式廣告(也可以是提醒或是特別連結)
* vtuber介紹產品特點/網站歡迎導覽影片
* 各組討論期初亮點完成度(VR,Vtuber,LINE貼圖,產品,繪本,動畫....)讓專題成果更豐富
* logo設計工具[logoAI](https://www.logoai.com/make)-多媒體設課程有教
* 360照片
* 手機版
* (加碼)英文版
* (加碼)日文版
### jquery語法
* map影像地圖    
* 留言表單
* 購物車     以[wix](https://www.wix.com/)為例
* 問卷圖表chart


             

# 單元-3 font awesome符號使用

## [cdn位址](https://cdnjs.com/libraries/font-awesome)
> 選<>這個符號拷貝,貼在index.html裏<link...my.css>的那行前面
## 去[font awesome](https://fontawesome.com/icons)查符號
> 查需要的符號,拷貝後回需要出現的地方貼上


# 單元-4 WOW動畫套件使用
https://wowjs.uk/docs.html

* 點github / code / download zip
* 解壓縮
* 找到css/libs/animate.css 拷貝到網站中 css/animate.css
* 找到dist/wow.min.js 拷貝到網站中 js/wow.min.js
* 在網頁中/head 前貼
```htmlembedded
<link rel="stylesheet" href="css/animate.css">
```
          
* 在網頁中 </body> 前貼
```htmlembedded
<script src="js/wow.min.js"></script>
<script>
     new WOW().init();
</script>
```
* 要套用的地方寫wow 跟效果
    如`<div class="wow bounceInUp">`
* 參考效果的樣式[animate.css](https://animate.style/)    

---


# 補充 優良作品校內展投稿

例：電子書、專題網站、學習歷程

# 補充 [專題展準備](https://www.clvsc.tyc.edu.tw/p/406-1000-18420,r671.php?Lang=zh-tw)
> 做好中英文簡介放入[雲端連結](https://drive.google.com/drive/u/1/folders/1FDtUT8RaeQ6GloHjjplgBnj1wBup7Y5m)

## 參考吹糖組複賽海報

 ![複賽-吹糖海報-1 (1)](https://hackmd.io/_uploads/BkeoyQ2-gl.jpg)
  
   
 ![複賽-吹糖海報-2](https://hackmd.io/_uploads/BkB2JQn-eg.jpg)


---
### 參考吹糖組決賽海報

![0422吹糖展開拷貝1240](https://hackmd.io/_uploads/B1DIMQhZgx.jpg)

### [資訊圖表](https://relab.cc/blog/%E8%B3%87%E8%A8%8A%E5%9C%96%E8%A1%A8/)的設計概念

---



# 單元-5 360照片嵌入

<iframe width="100%" height="640" frameborder="0" allow="xr-spatial-tracking; gyroscope; accelerometer" allowfullscreen scrolling="no" src="https://kuula.co/share/collection/7Fxyg?logo=1&info=1&fs=1&vr=0&sd=1&thumbs=1"></iframe>
    

   
>     
> ## [素材來源](https://drive.google.com/drive/folders/1Un90k-i9tzWq3aOSxcZMPINygmnEF6g6?usp=sharing)可以是自己去拍
> ### 下載360照片
>  [istreetview](https://svd360.istreetview.com/) 最下面選download
> 1. 到google map 丟小人找到適合的360照片,按分享,複製連結,在另一個視窗貼上後,拷貝原始路徑
> 1. 拷貝路徑到第二個格子
> 2. 第一格選存檔位置
> 3. 可用PS修改編輯,存成jpg檔
> 4. 使用[kuula](https://kuula.co/)平台,upload single image上傳,share可分享,![image](https://hackmd.io/_uploads/rJeuJ0y9xgg.png)
選Embed HTML然後貼到要放的地方


    
---    

# 單元-6 網站標題及圖示
```htmlembedded=
<link rel="icon" href="123.jpg"> 圖示寫法

title 改網站標題
```

# 單元-7 [AI運用](https://padlet.com/amooslin/115-04-01-no-73-gbqryhpxbrzpol54)

## AI四大天王
chatgpt
gemini
cloude
perplexity

## 推薦擴充工具
kortex
youtube to notebookLM
notebookLM web importer
enhancer4 google對話可建資料夾

## notebookLM切換外語版、調整風格可做多國簡報或是考試題目

## AI輔助的網頁程式設計-gemini
網頁購物車
留言板開發
寫前後台,存入google sheet(用canvas)或是用EmailJS寄信

> 按下確認訂位時,需要留下電話與姓名,並且連動到emailjs並寄信給我,製作動態網頁

## 拍產品照片,生成產品介紹

## 快速建立表單
產生google表單,用gas(google app script)程式碼
雲端硬碟/新增/更多/GAS/建立指令/把AI生成的程式貼上/執行/審查權限/可得發佈連結

## 以cloude產生圖表分析
分析附件產生彩色動態儀表板

## 以比賽評分項目、填件附件產生企劃書

## 以CANVA英文版magic layer可個別編輯

## 上傳github發佈網站
1. 申請github帳號
1. +New repository
1. Add file/Upload files
1. Settings/Pages
1. Branch/Main
1. 瀏網網址例如:https://iamfefe.github.io/construct/feedback.html

## notebookLM生成架構格式框架
此為 YAML 簡報結構 格式框架, 勾選此資料則按照以下的結構與格式要求做輸出。
1. 全域設計規範 (Global Design Specification) 
本區段定義簡報的整體視覺基調，規範將貫穿所有頁面 。
氛圍 (atmosphere): 使用 3 個形容詞定義整體調性（如：專業、俐落、高科技）。
色彩方案 (color_scheme): 
background: 背景色 (Hex Code)。
text: 文字顏色 (Hex Code)。
accent: 重點標示或圖表色。
secondary: 次要資訊或分隔線顏色。
字體系統 (typography): 定義標題 (heading)、內文 (body) 與數據 (data) 的字型、大小、字重及行高 。
版面規則 (layout_rules): 
navigation: 頁碼或章節小標的位置與形式。
image_style: 圖片處理方式（如去背、黑白濾鏡）與圖表形式。
layout_design: 格線系統（如 12 欄位）、留白比例與對齊方式。
decorative_elements: 視覺點綴元素（如細線、幾何色塊）。
2. 簡報頁面規劃 (Slide Planning) 
本區段如「施工圖」般具體指導每一頁的呈現方式。
頁面類型 (type): 劃分功能，如封面、引言頁、內容頁、列點頁等 。
佈局風格 (layout style): 描述佈局方法（如：滿版視覺分割、中央聚焦式、圖文分割）。
視覺構成描述 (visual description): 詳細描述畫面元素在版面上的配置 。
實際內容控制 (content): 
title: 頁面大標題。
subtitle: 頁面副標題。
generation_prompt: 指導 AI 根據原始資料生成內容的具體提示（包含字數建議與語氣要求）。
3. 編寫與結構規範 
層級劃分: 採用縮排（Indentation）區分結構層級。
項目分隔: 使用冒號 (:) 分隔項目名稱與內容。
內容標註: 風格設定的具體描述內容必須包裹在雙引號內。
註解規範: 使用 "#" 符號進行項目說明的備註。




# 單元-8 表單
> 1. 針對專題或是網站設計,透過google表單設計問卷
> 2. 問卷的標題記得要按右上角![image](https://hackmd.io/_uploads/ByFto-2blg.png)
的自訂主題,上傳專題主視覺
> 3. 題目設計可以選擇"評分"
> 3. 發佈表單
> 4. 選擇右上![image](https://hackmd.io/_uploads/BJ_ajZhWxg.png)嵌入HTML然後貼到網站中
> 5. 也可以複製作答者連結設計於網頁之中


<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfbZINd_SPbOc6dfFN-QwYVWwaEKik5NL6vtAc3jicGddizow/viewform?embedded=true" width="640" height="446" frameborder="10" marginheight="10" marginwidth="0">載入中…</iframe>
---

# 單元-9 網頁設計美化

## [padlet](https://padlet.com/iamfefe1/ai-oj0qb1wpigw2xv5v)資源
> 1.生成logo,修改icon與網頁上的logo
> 2.生成母親節特惠活動橫幅
> 3.[生成吉祥物,與各種姿勢](https://gemini.google.com/share/3aac187f92c9)
> 4.用於[美化網站中的插圖](https://gemini.google.com/share/50de39849428)或是背景圖,注意下提示詞"照原來的尺寸"
    
## 橫幅設計
> 透過與圖片的結合、漸層色的背景與裁切，素材與插圖下載網站可參考前面的筆記，使用Canva或使用freepik下載，再用PS、AI組合
![](https://i.imgur.com/XhTRtwh.png)

```htmlembedded=
        .navbar{
            background-color: rgba(0,0,0,0) !important;
        }
        #yellowb{
            background-image: url(img/yellow.jpg);
            width:100%;
            height:900px;
            background-size: contain;
            margin:0px;
            padding:0px;
            background-repeat:no-repeat;
        }
```    
    
    
    
## 可愛插圖的處理
    
> 重組內容與素材、透過小人物插圖
![](https://i.imgur.com/H5hGqdI.png)


    
    
## 不同關鍵字可參考設計

> website form design, website card design...
![](https://i.imgur.com/Fbps98n.png)

    
    

---
## 圖片區示範
> 步驟重點
    * vscode 安裝bootstrap套件
    * b4-$：基本Bootstrap文件結構
    * b4-navbar-background：Bootstrap NavBar元件
    * b4-jumbotron-default：Bootstrap Jumbotron元件
    * section 加入圖文段落

### 示範程式
    
```htmlembedded=
    <style>
        .story{
            background-image: url("img/grayback.jpg");
            background-size: cover;
        }
    </style>
    
    ---------------------------------------

    <section class="story">
        <div class="container">
            <div class="row align-items-center">
                <div class="picsleft col-lg-6 col-md-6 col-sm-12">
                    <img src="img/cake.png" alt="">
                </div>
                <div class="picstxt col-lg-6 col-md-6 col-sm-12">
                    <p><span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus quisquam debitis consectetur excepturi ratione quia dolor sequi velit accusantium quasi cum, eius maxime, iure inventore tempora qui dolorum voluptate recusandae.</span><span>Id, dolores corporis alias quia animi voluptatum illum officia numquam minima delectus ea, a quaerat totam, neque ipsam inventore. Minima, ipsum maxime? Perspiciatis quisquam quae fugiat, fugit est quibusdam placeat.</span><span>Corrupti maxime praesentium excepturi odit ex laborum distinctio dicta at voluptas ratione sequi architecto totam aliquid expedita minima a quidem earum tenetur cupiditate culpa recusandae amet, delectus, quaerat molestias! Deserunt!</span></p>
                </div>
                
            </div>
        </div>
    </section>


    
```


## 畫面
![](https://i.imgur.com/H5lfTDI.png)

---

# 單元-9-2 網頁影片
> 可自行拍攝剪輯
> 或使用canva製作,輸出mp4影片
> 網頁中使用[語法](https://steam.oxxostudio.tw/category/html/tags/video.html)
> `<video src="test.mp4" width="400" controls></video>`

---
    
# 單元-10 固定廣告區
[範例](https://www.momoshop.com.tw/edm/cmmedm.jsp?lpn=O4Gqi3d7yXK&n=1&osm=ve03&utm_source=Yahoo&utm_medium=yaside302&utm_content=homepage)
![](https://i.imgur.com/zMtOLtf.png)
```htmlembedded=
<!--寫在</head>之前-->
    <style>
         .fixed{
            background-image: url(images/fix.png);
            z-index: 999;
            position: fixed;
            width:100px;
            height: 100px;
            right:0;
            top:200px;
         }
      </style>


      <!-- 可寫在HTML裏任一區，或最前header section start -->
      <div class="fix">
         <img src="images/fix.png" alt="" class="fixed">
      </div>
```
    

       
    
    
## 廣告加動畫寫法
> style
![image](https://hackmd.io/_uploads/B1ftPCS-C.png)
>body
![image](https://hackmd.io/_uploads/SJU2wCSZR.png)

    
## map影像地圖語法
>[說明](https://www.webtech.tw/info.php?tid=HTML_Image_Map_%E5%BD%B1%E5%83%8F%E5%9C%B0%E5%9C%96%E8%A8%AD%E8%A8%88)
>[線上轉換平台](https://www.image-map.net/)
>用dreamweaver也可以
    
```htmlembedded=
<!-- Image Map Generated by http://www.image-map.net/ -->

<img src="mobileadv_870_8041140_99610.jpg" usemap="#image-map">
<map name="image-map">
    <area target="" alt="click" title="click" href="http://tw.yahoo.com" coords="2023,601,3546,369,4051,2117,2288,2349,1046,2398" shape="poly">
</map>

```
---

# 單元-11 超連結滑順寫法

![image](https://hackmd.io/_uploads/H1K29BUhbe.png)




---        
    
# 單元-12 手機版修正[@media寫法](https://ithelp.ithome.com.tw/articles/10196578)
    
# [CSS選取器寫法](https://webdesign.tutsplus.com/zh-hant/the-30-css-selectors-you-must-memorize--net-16048t)

# [flex細節](https://www.oxxostudio.tw/articles/201501/css-flexbox.html)    
    
---    
    
# 單元-13 留言表單設計

## 基本語法複習
## 基本語法複習簡報


https://www.webtech.tw/info.php?tid=89

```htmlembedded=
<form action="資料傳送目的地" method="資料傳遞方式">
表單內容與表單元素
</form>
```    
```htmlembedded=
標籤  <label>內容</label>
文字 <input type="text" name="" value="">
密碼 <input type="password" name="" value="">
下拉選單 <select name=""><option value=""></option></select>
如      <select id="gender" name="gender">
            <option value="male">男性</option>
            <option value="female">女性</option>
            <option value="other">其他</option>
        </select>    
選項按鈕 <input type="radio" name="" value="">
核取方塊 <input type="checkbox" name="" value="">
文字輸入欄位 <textarea name=""></textarea>
隱藏欄位 <input type="hidden" name="" value="">
按鈕 button <input type="button" name="">
送出表單按鈕 <input type="submit" name="" value="送出表單">
重設表單按鈕 <input type="reset" name="" value="送出表單">
```
### 注意
* checked可指定預設
* 注意單選時命名相同
* [更多寫法](https://www.runoob.com/tags/att-input-type.html)例如date,color,file,number,range的用法
* 可以透過chatgpt檢查修正

:joystick: 實作任務
![](https://i.imgur.com/bGmjiOT.jpg)
    

# 留言板實作與google excel文件結合
1. 網頁的內容參考
```htmlmixed=
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>迷你留言板</title>
    <style>
      .board {
        display: flex;      /*打這三個可置中df*/
        justify-content: center; /*jcc*/
        align-items: center;     /*aic*/
        flex-direction: column;  /*排列方向為欄*/
      }
    </style>
  </head>
  <body>
    <!-- 留言板的長相區-->
    <div class="board">
      <h1>迷你留言板</h1>
      <form id="myForm">
        <label for="username">使用者名稱:</label><br />
        <input type="text" id="username" name="username" /><br />
        <label for="message">留言:</label><br />
        <textarea id="message" name="message"></textarea><br /><br />
        <button type="submit">送出</button>
      </form>
    </div>
    <!-- 留言板的長相區結束-->

    <!-- 留言板的程式區-->
    <script>
      document
        .getElementById("myForm") //注意表單的id
        .addEventListener("submit", function (event) {
          event.preventDefault();
          var formData = new FormData(this);
          var queryString = new URLSearchParams(formData).toString();

          // 發送資料到 Google Apps Script 的URL
          var url = "授權網址貼這裏記得最後加問號?" + queryString;

          // 發起 GET 请求
          fetch(url);
          alert("已寫入資料庫");
        });
    </script>
    <!-- 留言板的程式區結束-->
  </body>
</html>


```
2. google文件新增excel檔:雲端硬碟/+/google試算表
2. 幫文件命名
3. 擴充功能/Apps script
4. 貼入以下程式,注意一個欄位一個parameter,new Date()會自動抓日期  
```htmlmixed=
function doGet(e) {
  var username=e.parameter.username;
  var message=e.parameter.message;
  SpreadsheetApp.getActiveSheet().appendRow([username,message,new Date()]);
}
```
6. 專案命名/按儲存
6. 部署/新增部署/類型/網頁應用程式/誰可以存取/所有人/部署/授與存取權/點自己的帳號/進階/goto未命名專案/allow
7. 管理部署作業/複製網頁應用程式那段/貼到網頁裏,完成!

    
---

    
# [jquery](https://clhuang224.github.io/TechBlog/2019/02/07/20190207-hex-jquery/)
> ↑點標題有教材

### [jquery速查表](https://oscarotero.com/jquery/)
    
```htmlembedded=
<script sr↑="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>
```
    
以jquery官網/console/練習物件隱藏


---
 
### [jqery CDN版本](https://releases.jquery.com/)    
### 線上範例
https://freefrontend.com/jquery-code-examples/
### JavaScript 與 jQuery 轉換
### http://youmightnotneedjquery.com/
### jQuery 官網
http://jquery.com/
### jQuery 官網 Api
https://api.jquery.com/    
    
### 搭配[Animate.css](https://animate.style/)使用
:joystick: 兩個方塊會互換顏色，且在點選時會有動畫
![image](https://hackmd.io/_uploads/HJNmfhxfR.png)
    
    
---
    
    
# 單元-14 套件[使用Chart.js](https://ithelp.ithome.com.tw/articles/10188031)   
    
# 單元-15 AI設計工具
[bing image creator](https://www.bing.com/images/create)文字生圖
[Microsoft Deisigner](https://designer.microsoft.com/) 尬CANVA
[Suno](https://suno.com/)AI寫歌
[Stable Difuusion](https://www.youtube.com/watch?v=gpm9pB4IoBc) 以圖生圖
    
微軟再度出招！全新 AI 平面設計工具直衝著 Canva 而來 | Microsoft Designer/PAPAYA
https://youtu.be/ajbr7wAV2tk
    
---

# 單元-16 網站特效
<iframe width="1396" height="785" src="https://www.youtube.com/embed/gpRJWOAWVg0" title="2025 年你應該知道的 UI/UX 設計趨勢" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

## [2024年網頁設計：探索３大主流趨勢與20大關鍵重點](https://www.e7way.com.tw/article-info.asp?id=67)   
    
### 2022年網頁設計新趨勢，8大風格全解析
https://raise-up.com.tw/web-design-news/website-trend.html/
    
## 設計好站參考

> * https://www.canairi.io/
> * https://artsexperiments.withgoogle.com/meroe/
> * https://hhey.studio/ 
> * https://www.poppr.be/en#
> * https://hsmkrt1996.com/
> * https://www.freaksstore.com/freakmag/ 
> * https://www.georgelittle.design/
> * https://www.apple.com/iphone-14-pro/
> * https://www.martinbuilding.com/about
> * https://www.dfdg.com
> * https://iti.ca/en/it-solutions/

codepen作法
> * https://codepen.io/mariosmaselli/pen/ZpLXpN
> 1.codepen裏選正版html,css,javascript
> 2.body裏貼html,
> 3.head裏加style貼入CSS
> 4./body前,打script,貼入javascript程式
> 5.記得加jquery的[cdn](https://releases.jquery.com/)
> 
> * https://codepen.io/yoannhel/pen/DMzjog
> CSS要選view compiled css
> * https://codepen.io/Anna_Batura/pen/VOPdRd
> HTML要選format HTML,CSS要選view compiled css
>
> ## 關鍵字
> 收合式Accordion
>     https://codepen.io/brenden/pen/Kwbpyj
> 爆裂噴發Burst
>     https://codepen.io/minimalmonkey/pen/jbyKB
> https://codepen.io/mimoduo/pen/MKmvxv
> https://codepen.io/cluzier/pen/PVBeKr
> 輪播Carousel
>     https://codepen.io/johnblazek/pen/nceyw
> https://codepen.io/mephysto/pen/ZYVKRY
> 破碎Fracture
>     https://codepen.io/chrisbolin/pen/eZJLVe
> https://codepen.io/mullany/pen/rjEgRJ
> 磁力Magnetic
>     https://codepen.io/iamryanyu/pen/OBORdo
https://codepen.io/gmrchk/pen/ZMXMJo
跑馬燈Marquee
https://codepen.io/Jaskaranbir/pen/JKNgMb
瀑布流Masonry
https://masonry.desandro.com/
混合模式Mix blend mode
https://codepen.io/stevn/pen/ZOKdjm
https://codepen.io/juliangarnier/pen/RRKpgq
https://codepen.io/theseventh/pen/LYVqMYb
疊加蓋板Overlay
https://codepen.io/fluxus/pen/gPWvZm
https://codepen.io/PaulVanO/pen/GgGeyE
粒子Particles
https://codepen.io/robinselmer/pen/mRjoXr
視差Parallax
https://codepen.io/patrickwestwood/full/MyoBaY
https://codepen.io/andymerskin/pen/XNMWvQ
路徑Path
https://codepen.io/sol0mka/pen/OJMvEK
透視Perspective
https://codepen.io/bosworthco/pen/YWBLpR
https://codepen.io/lbebber/pen/OJWNZV
https://codepen.io/lerouxb/pen/WNRLdP
物理Physics
https://codepen.io/dissimulate/pen/AmwbMr
https://codepen.io/Yakudoo/pen/oXJYxy
揭露Reveal
https://codepen.io/equinusocio/pen/KNYOxJ
https://codepen.io/antho-fsy/pen/wJqWKj
https://codepen.io/okawa-h/pen/qGJMMo
輪播Slideshow
https://codepen.io/astrixsz/pen/zBXvWx
轉圈效果Spinner
https://codepen.io/mandelid/pen/kNBYLJ
https://codepen.io/supah/pen/BjYLdW
黏住導覽Sticky
https://codepen.io/ettrics/full/WRbGRN
https://codepen.io/renduh/full/oBBGbK
磚狀Tiles
https://codepen.io/zavoloklom/pen/ZEmBGR
https://codepen.io/siiron/pen/mdpOrJ
收合Toggle
https://codepen.io/pedronauck/pen/AvpWaO
打字機Typewriter
https://codepen.io/geoffgraham/pen/jrWwWM
https://codepen.io/Danielgroen/pen/VeRPOq
無限Infinite
https://codepen.io/Reklino/pen/KpmRRy
亂流Turbulence
https://codepen.io/vcomics/pen/ZwNgvX
https://codepen.io/cobra_winfrey/pen/eYOXOdB


# chatgpt推薦的codepen特效
| 中文標題             | 英文標題                  |
|-----------------------|----------------------------|
| 滑鼠追蹤效果           | Mouse Tracking Effect      |
| 彈出視窗               | Pop-up Windows            |
| 透明效果               | Transparency Effects       |
| 彈跳球效果             | Bouncing Ball Effect      |
| 打字機效果             | Typewriter Effect         |
| 三維視差效果           | 3D Parallax Effect        |
| 背景視差滾動效果       | Parallax Scrolling Effect |
| 卡片翻轉效果           | Card Flip Effect          |
| 影片播放器自定義       | Custom Video Player       |
| 音樂節奏動畫           | Music Rhythm Animation    |
| 太陽系模型動畫         | Solar System Model        |
| 飛行小鳥動畫           | Flying Bird Animation     |
| 運動軌跡追蹤效果       | Motion Path Tracking      |
| 沉浸式視差滾動效果     | Immersive Parallax Scrolling Effect |
| 電子音樂播放器         | Electronic Music Player   |
| 密碼輸入效果           | Password Input Effect     |
| 漂浮效果               | Floating Effect           |
| 潛艇水下動畫           | Submarine Underwater Animation |
| 樂譜動畫               | Music Sheet Animation     |
| 雨滴效果               | Raindrop Effect           |
| 彩虹效果               | Rainbow Effect            |
| 星空動畫               | Starry Sky Animation      |
| 網格動畫               | Grid Animation            |
| 電梯上升動畫           | Elevator Ascending Animation |
| 火箭發射動畫           | Rocket Launch Animation   |
| 魔幻火焰效果           | Magical Flame Effect      |
| 遊樂園動畫             | Amusement Park Animation  |
| 流星雨動畫             | Meteor Shower Animation    |
| 寶可夢精靈球動畫       | Poké Ball Animation       |
| 貓咪跑步動畫           | Cat Running Animation      |

    
# 特效工具[推薦](https://des13.com/news/web/822-animate1.html)|[夏木樂](https://simular.co/resources/type/effects-tools.html)


:joystick: 實作「中壢高商校史網站」特效首頁，選單內容如下：

| 編號 | 項目         | 說明                                                                                                 | 效益                                           |
|------|--------------|------------------------------------------------------------------------------------------------------|------------------------------------------------|
| 0    | 首頁         | 簡單介紹創校背景、使命和核心價值。解釋當時社會環境和需求，強調時代性、獨特性、重要性。              | 快速了解學校的基本資訊。                         |
| 1    | 校史時間軸   | 利用「時間軸」展示學校的重要里程碑和歷史事件。 大事紀、校景更迭、重要活動。列舉「重要事件、發展轉折、歷任校長、校景更迭、重要人物、重大成就等」。 | 便於回顧學校的歷史脈絡。                         |
| 2    | 校友故事     | 提供校友分享在校期間獨特經歷和日後成就的平台。可以是文字敘述、照片、影音等多媒體形式。              | 展示校友故事和成就，啟發後進、突顯學校影響力和社區連繫。 |
| 3    | 標誌與象徵   | 展示並說明校徽、校訓、校歌、學生圖像、學校願景等的含義和起源。                                   | 有助於傳達學校的價值觀和文化。                   |
| 4    | 經典回顧     | 展示過去學校舉辦的活動、慶典、演講等記錄。                                                           | 透過多媒體和文字回顧，感受學校活力與時空背景。     |
| 5    | 教職員工專區 | 展示歷屆教職員工合照；介紹本校傑出教育人員對學校的貢獻、成就和影響力，包括教學成就、研究領域、社區參與等方面。| 讓校友緬懷恩師，也鼓勵在職同仁積極奉獻教育。     |
| 6    | 互動平台     | 提供互動元素，例如問卷調查、留言板、投票等，讓訪客參與並分享自己的學校回憶或觀點。               | 活化網站、增加趣味性，提供意見交流平台。         |
| 7    | 文物典藏     | 校史重要物品拍照上架。例：校名碑牌、獎盃、校際交流紀念品等。 上架歷年學校出版品，例如「學報、校刊、紀念特刊、學生手冊、畢冊、文宣摺頁、學生創作、比賽獲獎作品等」。 | 數位典藏，利於展示和保存。                       |

### 首頁文案參考
>壢商七十歲了！很難想像已有數萬學子，曾經日以繼夜地在這片土地上，揮灑青春汗水；又有多少教職員工，對這所學校寄予厚望、奉獻畢生。
> 從穿越平野四望、牧童與小販雜處的小路，在晨曦微光中走進校門，到如今仰看高樓林立、搭乘捷運，在市井喧囂、豔陽高照的時刻互道早安，這其中的變遷，豈只是時光流逝所刻劃的景物更迭…。
> 
> 慶祝壢商七十週年校慶，期盼為這所培育眾多英才的老校，築起一座浪漫故事的城堡，將點滴史跡藉由數位化保存、網路傳播，讓身處世界各角落的壢商人，得以緬懷依稀舊景、探索時代脈動，共同見證輝煌過往，讓專屬於你我的青春，再次飛揚！
> 

### 相關連結
> 標誌與象徵
> https://history.clvsc.tyc.edu.tw/p/412-1000-86.php?Lang=zh-tw
>       
> 校史時間軸
> https://history.clvsc.tyc.edu.tw/p/412-1000-87.php?Lang=zh-tw
>       
> 文物典藏
> https://history.clvsc.tyc.edu.tw/p/412-1000-90.php?Lang=zh-tw
>       
> 經典回顧
> https://history.clvsc.tyc.edu.tw/p/412-1000-89.php?Lang=zh-tw
>      
> 師恩永懷
> https://history.clvsc.tyc.edu.tw/p/412-1000-88.php?Lang=zh-tw
>       
> 校友故事
> https://history.clvsc.tyc.edu.tw/p/412-1000-91.php?Lang=zh-tw
>       
> 互動平台
> https://history.clvsc.tyc.edu.tw/p/412-1000-92.php?Lang=zh-tw


[圖片下載](https://drive.google.com/drive/folders/1_tDXUFAk2u1PyA7mWTWS2VRyVb2WuD1n?usp=sharing)

[完成範例](https://historyportal.clvsc.tyc.edu.tw/home2/)

[上傳位址](https://drive.google.com/drive/folders/1_vZPUS2lZa2GYkMZnswNcwEivKasXqeI?usp=sharing)

## 優良作品

https://historyportal.clvsc.tyc.edu.tw/home2/114335/

https://historyportal.clvsc.tyc.edu.tw/home2/114329/

https://historyportal.clvsc.tyc.edu.tw/home2/114336/

---    
    
---
    
# 單元-17 [gamma](https://gamma.app/signup?r=3n00erbf3pr3pb3)製作網站比較    
### 1. 使用gamma AI生成同類型主題網站，做為與目前專題成果的對照組。
### 2. 每組3分鐘報告生成網站與專題網站的差異。
#### 報告大綱
> 1. 問好、自我介紹、主題介紹
> 2. AI建議
> 3. 目前專題成果
> 4. 預計改善內容
### 3. 1分鐘QA與建議提供。

:joystick: 請各組將目前成果放在上傳區**0612報告網站**

> ## 各組連結
> #### 蓋「世武」功「吹」出夢想天「糖」-結合數位行銷及互動式繪本推廣吹糖文化以大溪廖世武吹糖人為例	
> http://203.72.100.60/113_projects/web/t4/
> #### 「歷史新視界」：桃園忠烈祠與AR互動之旅	
> http://203.72.100.60/113_projects/web/t1/
> #### 山間客韻	
> http://203.72.100.60/113_projects/web/t3/
> #### 一「爆」而出–從聲響到滋味	
> http://203.72.100.60/113_projects/web/t5/
> #### 技高一籌，「藥」你知道：蔡記廣東粥	
> http://203.72.100.60/113_projects/web/t2/
> #### 「水」漾「燈」影「排」「排」照 
> http://203.72.100.60/113_projects/web/t8/
> #### 「原動力，族傳千里」-台灣原住民文化傳承	
> http://203.72.100.60/113_projects/web/t9/
> #### 蛇行天下	
> http://203.72.100.60/113_projects/web/t6/
> #### 拯救生命傳遞愛與希望–新屋動物收容所
> http://203.72.100.60/113_projects/web/t7/

---

# 單元-18  UI設計的完形心理學
[參考文章](https://medium.com/as-a-product-designer/%E7%94%A8-%E5%AE%8C%E5%BD%A2%E5%BF%83%E7%90%86%E5%AD%B8-%E5%A2%9E%E5%8A%A0%E4%BB%8B%E9%9D%A2%E8%A8%AD%E8%A8%88%E6%9C%89%E6%84%9F%E5%BA%A6-2fa0018b906e)
[參考文章](https://medium.com/@yihanhuangpolina/%E8%A8%AD%E8%A8%88%E5%B8%AB%E6%89%8B%E5%86%8A-%E4%B8%89-%E5%AE%8C%E5%BD%A2%E5%BF%83%E7%90%86%E5%AD%B8-%E6%98%AF%E4%BB%80%E9%BA%BC-%E8%A8%AD%E8%A8%88%E5%B8%AB%E7%9A%84%E5%BF%85%E4%BF%AE-%E4%B8%8A-343281b05677)


---
    



    
# 產品包裝&創意商品
    
---    

## 補充
https://github.com/IffyArt/course-site/tree/feat/jquery-project

https://threejs.org/

https://d2lgnge1jkbuts.cloudfront.net/exhibition

https://hackmd.io/94w4ooMWSVyWyCgrk3YTYg
 
---

# 單元19 動態特效
1 Codepen
https://codepen.io

2 Codrops
https://tympanus.net/codrops/

3 NavNav+
https://navnav.co/

4 Code My UI
https://codemyui.com/

5 CodyHouse
https://codyhouse.co/


---

# 單元-20 學習歷程報告

## 參考資料
### [技高學習成果呈現建議](https://issuu.com/convofuture/docs/230807_)
> 上傳區有去年優秀學長姊作品可參考，但請務必照以下建議修改
> 
## 建議內容
### 封面
> 標題：多元選修-網頁設計專題製作    
> **專題技術特色**與對應頁碼
> 組員貢獻度說明（組員、%、工作內容說明，各組需討論同一版本我才會認證）
> 個人姓名
> 指導老師
### 中英文簡介
### 組員心得
> 如果失憶了可以看看上下學期的課程筆記發揮
### 個人學習成長與相關成就（如比賽經歷與獲獎）
### 專題報告
### 網站程式畫面
網站網址如下:
http://203.72.100.60/113_projects/web/t1/
   
http://203.72.100.60/113_projects/web/t2/
    
http://203.72.100.60/113_projects/web/t3/

> 畫面與程式可個別截圖＋說明
> 網站全頁截圖看全貌
> 網站操作錄成影片先放自己的頻道,若有解說更好
> 可設為知道連結皆可觀看，轉QR-code放報告

### 貢獻度寫法
![image](https://hackmd.io/_uploads/ry8m9IHfel.png)
![image](https://hackmd.io/_uploads/HkSFcLSMlx.png)


---
     
    

# :triangular_flag_on_post: [期末學習歷程檔案放置處](https://drive.google.com/drive/folders/15hp-jpLSk6IfQ2GoYalQfQ-TTIeUb735?usp=sharing) 
    
> 檔名：學號.pdf
> 請先讓老師看過打平常成績，通過再上傳到系統
> :warning: 很重要**事關升學一定要傳**！
> :warning: 可著重程式能力展現
> :warning: 如果很多件數可以勾選的人，可以把專題與網頁併在一起傳專題
> :warning: 如果件數很少的人，也可以把專題與網頁分開兩個科目傳，未來自己要記得勾選上傳中央資料庫
> :warning: 有得獎獎狀可以在課程成果裏，多元表現也可以再放一次，增加能見度
    
# 期末考
[素材](https://drive.google.com/file/d/1PzJTZtWjVPslmG1ytXjA-Iwo1QRiID0p/view?usp=sharing)

https://youtu.be/HOe5sDSmkqQ
https://youtu.be/rA0PAhmndz8
https://youtu.be/lhuRPKt-8BY

6表格與設計
https://youtu.be/LyGZeFeSPUU
5開檔與固定式飄動廣告
https://youtu.be/NxSq-uILrGY    
7表單設計
https://youtu.be/zbk1RHA3Tbc
8 超連結到新頁    
https://youtu.be/HWtDVdy24_U

---    


---

# [國際網界博覽會](http://cyberfair.taiwanschoolnet.org/news/detail/1)
    
---
   
   
# XAMPP
# VUE
# 網頁空間與SEO

---


### [UX 法則](https://lawsofux.com/)    


---
    
星誌補充

### 開源模板資源

    
    
    
#### [Github Open source 專案](https://github.com/nordicgiant2/awesome-landing-page)
> Github 上開源的公開專案與相關資源整合，下方還有設計的教程以及設計的資源。

#### [HTML5UP](https://html5up.net/)
> 結構標準的 HTML5 開源專案，很適合新手下載查看與做修改練習，但不太會更新內容。


#### [w3layouts](https://w3layouts.com/)
> 多用途的網頁開源 Layout，同時也支援其他服務的架設。


#### [Cruip](https://cruip.com/free-templates/)
> 具有非常良好的結構與特效的範例，非常適合想要較為有設計感頁面的需求，但進階其餘專案需要額外付費才能下載。


#### [zerotheme](https://www.zerotheme.com/)
> 公開平台的資源彙整，有很多不同的版型與 UI 可以下載，但使用許可需要另行查看。


---

### 設計類小遊戲

#### [cantunsee](https://cantunsee.space/)
> 思考哪個設計比較符合大眾審美

#### [designers-eye](https://www.supremo.co.uk/designers-eye/)
> 練習視覺對其與中心點判斷


#### [color](https://color.method.ac/)
> 訓練對色彩的敏感度


</div>




--------------------------
    

---
    



# AI圖形辨視運用    

# 活動行銷    
    



- 作品報告製作：
``` 
- 封面+專題網頁UIUX設計(標題)
- 製作畫面截圖3-5張
- 操作影片超連結（螢幕錄影win+G）+QRcode
- 網站網址+QRcode
- 製作心得
- 存檔注意：
檔名要求 42299徐麗娟-網頁作品報告.ai
勾包含連結檔案

```

# 提醒小論文置換新版網站後可再投稿
    
# 期末投創意組專題為目標
* 特殊產品
* VR,AR,AI運用等    

# AR,VR,XR亮點運用
## 工具
> ### [MAKAR](https://www.makerar.com/)
> [創意案例](https://www.makerar.com/tutorial_01?categoryID=80)
> ### [AR2VR](https://ar2vr.tw/)
> [創意案例](https://ar2vr.tw/videoreview/)

    
---



    
# AR2VR操作

編輯與範例程式 http://readme.ar2vr.com
操作教學影片 http://reurl.cc/nn6n86    

    
VR解決問題 https://www.youtube.com/watch?v=KBL0K2EX-o8
高雄電影節 https://www.youtube.com/watch?v=DdZYQNkeC7Q&list=PLjAYoKwpKK5TU_TND_iKKwPTZAfvnSMYT
innisfree https://www.youtube.com/watch?v=3Pg4Hg66uSY
ikea https://www.designwant.com/article/2165
Microsof hololence https://www.youtube.com/watch?v=eqFqtAJMtYE
old irish https://www.youtube.com/watch?v=3-MMJ-in8AI
厲陰宅 https://www.youtube.com/watch?v=81BGhyJByUc
與觀光結合 https://www.youtube.com/watch?v=2Lq86MKesG4
下載360工具 https://reurl.cc/m9V52l
下載360照片 https://istreetview.com/

多啦a夢vr隨意門+時光機
<iframe width="640" height="360" src="https://www.youtube.com/embed/9DttlhkOg0o" title="多啦A夢 VR『任意門』體驗" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>