---

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-手機版壢商校園

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

快速鍵ctrl+alt+k
複製成另一個,改色或大小等,改原始組件可一次修改多個
> * 選單底色effect/backgruond blur毛玻璃效果

---
> ### 如何做按鈕互動
> * 複製多個shift連選,autolayout,縮小頁框,prototype選overflow/hozional
> * modal小視窗跳出效果

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



---

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

選單列要選position fixed固定在上

## 互動製作

### 2.有小滑動視窗可另外開frame做

### 滑回去

### 3.圖片滑動
先找好多張圖片,在設計時選autolayout自動排版

將圖片區frame拉小成視窗大小,移進主frame,選擇可水平滑動

### 4.按鈕hover
先畫一個按鈕,按建立元件
鈕後

設計/屬性/變數
再按+增加按鈕狀態,設計好後切到prototype,選預設按鈕,interactive/click/hover/change切換狀態variant/記得選動畫animate slow

回到主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 前貼

<link rel="stylesheet" href="css/animate.css">

* 在網頁中 </body> 前貼

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

## 參考吹糖組複賽海報



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


### [資訊圖表](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可分享,
選Embed HTML然後貼到要放的地方

---

# 單元-6 網站標題及圖示

<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. 問卷的標題記得要按右上角
的自訂主題,上傳專題主視覺
> 3. 題目設計可以選擇"評分"
> 3. 發佈表單
> 4. 選擇右上嵌入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組合

        .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;
        }

## 可愛插圖的處理

> 重組內容與素材、透過小人物插圖

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

> website form design, website card design...

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

### 示範程式

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


    

## 畫面

---

# 單元-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)

<!--寫在</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
>body

## 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也可以

<!-- 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 超連結滑順寫法


---

# 單元-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

<form action="資料傳送目的地" method="資料傳遞方式">
表單內容與表單元素
</form>

標籤  <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: 實作任務

# 留言板實作與google excel文件結合
1. 網頁的內容參考

<!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()會自動抓日期

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/)

<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: 兩個方塊會互換顏色，且在點選時會有動畫

---

# 單元-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放報告

### 貢獻度寫法

---

# :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>