175東山咖啡莊園 AI生成式網頁設計課堂教學影音 2-2
林金露_AI微型電商創業系統_網頁設計教學
116 位粉絲
2026年2月5日
這是林金露老師_在勞動部勞動力發展署桃竹苗分署_網頁設計課程的教學課堂錄影檔。
林金露老師教學網站有提供教材軟體,下載網址= https://linjinlu.com
歡迎你一起加入AI生成式網頁設計學習行列。
針對Canvas我們的運用
不管在我們的直播
或是我們平時的這個工作
它都很適合
因此
它們呢
你在你登入帳號之後
在正常的首頁下
你會看到一個
它問你今天要設計什麼
底下呢
就會有一些導覽
這裡按三個點點
就可以看到
更多東西
注意這裡還有個三個點點
那這裡面
用條類四
你會看到
它從熱門
常用版面配置
辦公跟商業
行銷與宣傳
我們在這裡
行銷與宣傳
OK
這裡我們就會看到一個
叫橫幅廣告
你先記一下喔
我們網頁喔
會用的東西就叫橫幅廣告
橫的那一個叫Banner
英文叫Banner
就是橫幅廣告
好
底下喔
我們可以運用上的
叫手機桌布
這個
你平時去換都可以
我們也學會它
OK
學會說
我們能夠自己換那個手機桌布
那
還有什麼用處呢
可以
我們要
如果我要正確的圈粉
對不對
我直播我要跟網友互動
你只要
我設計了一個桌布
對吧
你不是說我的粉嗎
好
那你
我放了一個路徑
讓你下載桌布
你的手機只要變成
我指定的桌布
我就送你產品
OK
這個就是要你跟
你的粉要互動
就可以這樣子玩
那我手機桌布是不是設計得很漂亮
人家
你的粉
鐵絲
你的粉絲
就會用你的那個設計的桌布
喔
這個就是這樣產生關聯
好
那
為什麼
因為上面桌布有我產品的名字
然後他的朋友
他的親戚
他的誰
看到了之後說
你怎麼會有這個桌布
然後就會講
去哪裡
你買什麼
你如果用他的桌布
我有打九折
OK
這就是這樣子做生意
好
那你可以看到後面還有喔
這樣子還可以有
OK
好
再來底下這一段
我們比較會常用
再來
這個
叫
照片拼貼
好
寫在你的筆記本上喔
我們會把我們的產品
例如
五張照片
產品照片
拼成一個畫面
上面就去寫你的文案
或標題
用這個方式
去拼你的產品照片
成一個畫面
對
如果你去看那個臉書
很多人
比如說我們出去玩
或是一個宴會
他們PO照片的時候
對不對
會出現一個切割畫面
有沒有
那個是臉書的
那個
太low了
沒有變化
你
就可以自己這樣做
等一下
你可以自己玩玩看
再來
這裡面的
就是我們提到用的影片
好
TikTok
OK
到後面這些
YouTube
YouTube短片
投影片
等等
OK
好
這些都是我們最常用的喔
OK
你都可以用的喔
好
那
其中我們會為你介紹
是
像投影片式的影片
投影片
PowerPoint
你都知道嘛
同學
它就是
用投影片
因為投影片
你一定懂啊
投影片式
來編成影片
這個
對入門的
最合適
例如
這一個不用錢
你看喔
我現在準備編輯
所以我是一個空白
然後
這邊停在設計
範本呢
從側邊就跳到這裡來了
好
樣式是指定色彩
如同我們做網頁
我們編輯啊
我們編輯
有沒有
我們編輯這個網頁的時候
我們不是按這裡嗎
編輯這個叫做主題色彩
這個叫影片色彩
一樣就是樣式
就是你的主題色彩
有沒有看到
然後它會搭配字型
一起
就是你有一個色調的
好
一定是先選範本
再選樣式
就可以變更色調
這個概念
就跟我們做網頁一樣
一定要有一個主題色彩
所以我們做設計喔
做設計的人
絕對不是亂弄那個配色
一定都是有一個理論
就是什麼
一定是選定色彩
好
同學我要抽問喔
我們的色彩是從哪裡來
我們的色彩是從哪裡訂的
是不是首頁
是不是首頁的image
對吧
首頁的這個
PAD這個首頁的意象圖
從那裡用吸管把它吸出來
對吧
我們是用PICA那個軟體
把顏色吸出來
眼睛瞇瞇的
顏色最多那一個人
就是我的主色
對吧
其他就是配色
這樣你做出來的色調
就會能夠有統一性
然後你怎麼看
就會很順眼
因為你是從那裡面
吸取顏色來
啊
這個的概念就是那樣子
OK
所以他們範本
是會有一個特色的
這樣子
都是有一個特色的
好
那我在範本這邊
這裡面喔
這裡面一樣都可以選
然後底下有範本
好
那現在難在於說
老師我要找到
跟你一樣的範本比較難
為什麼
因為這個會
它會有AI篩
所以看這裡
上面這一節
是我AI篩過的
啊你沒有
前面沒有做過一些東西的時候
它就篩不出來
所以這個就比較難找
所以它變成會有一個名字啦
好
那我現在換一個
這個概念給你看
注意喔
我點到這個範本
注意看喔
我是點進去喔
我並沒有拉進去喔
注意喔
我不是拉進去喔
我是點一下
之後
這個範本
這個作者喔
注意
這個範本都是
由不同的作者做出來的
好
你看到那麼多範本
都是不同作者
那所以有一些作者
做得不錯
賣給了Canva
Canva就加了一個皇冠
要收錢
有一些是基本Sample
就不用錢
這個概念跟我們的Mobilize
就反正不用錢的軟體啊
或是讓你用的東西
都是這個概念
都會有付錢的項目
那在Canva是用一個皇冠
代表要收錢
啊這裡就會很明顯
跟你標註Money
OK
好
啊這裡
我選了這個不用錢
讓他進去之後
他做了
二四六八十個頁面
啊我呢
我
因為我不是整個拉進去喔
我是點進去
他說
你要不要套用全部呢
你就
如果你要全部
就是按下去就全部
如果不要
我按封面
他就封面進去
然後呢
這裡
我就增加頁面
OK
好
然後我再看
設計這邊
有沒有這個又進來
這個就是返回
這個又進來
然後假設我要現在
其中我要第二頁是要這個
我就要拉進來
第二頁就不同了
也就是說
原本他的Sample是
一二三四五六七八九十
我不需要照單全收
我只挑他好的範本進來
好
之後我就再回去
回到設計這個地方
回去喔
然後我再挑別的範本
你看喔
我再挑別的範本
有皇冠就是要付錢
就不要按
不同
沒有的我就可以按
例如這個
我按下去
哇
他有十六個頁面
那一樣我不全挑喔
我挑我要的
OK
拉
進去
塞到
加
剛剛我是直接按加
就產生空白
現在我不用
我直接按
拉加
放
他就直接進去了
所以我是把兩個範本
集合起來
那老師
那我可不可以十個範本
去東拿西拿
當然可以啊
所以我們在這邊
就會預覽很多的範本
以這為例
影片片頭
短的片頭
所以你的手機喔
隨時都可以拍一段
三秒五秒的影片
換個字
你的那個片頭就有了
所以我們每一次的直播
或者是你的導引
都可以有一個片頭
我再講喔
因為假設你用在臉書上直播
那麼你前一天
或者是當天
早上預告
晚上直播
都可以這樣子
每一次都換不同的影片
就是這樣的短片頭
一次隔就是五秒嘛
好
例如
我前面要加一個倒數計時
有沒有
倒數計時的影片
OK
那我就可以這樣子
拉
注意喔
我拉進去喔
砍在哪一個
我擠在前面
他就擠到前面去了
你按住滑鼠左鍵
不要放的時候
我去插你要的位置
這樣子
他就有一個Play鍵
好
如果不要的影片
點到他
有一個紫色區框框
你就可以按鍵盤的Delete
就可以刪掉了
好
我們再看一次喔
剛剛的練習是一種
現在是告訴你
原來他們很多免費的範本
你就可以東拿西拿
組成你的綜合影片
OK
再看一次喔
這個上面是一個導回鍵
因為我現在這個框
被框著
你按了什麼
他就會直接進去
如果我要這個範本
我是按住不要放
拖進來
放掉
這一個就會進來
本身他們都會有動畫
這個動畫
每一個都可以動喔
你點兩下
側邊處理的就會進來
這裡可以裁切
有沒有
幾比幾
幾比幾的裁切
快速裁切
他就幫你裁了
這個照片裡面的框
就依你上傳的產品
拉進來
一樣塞進去
塞進去
放
他就進去了
所以我們要用他的模板的原因
就在這
他這個模板本身加了一個白色的
就像外面沖洗照片那種感覺
而且陰影都幫你做好
你要用範本的原因就在這
因為你在用Photoshop
在那邊畫圖
在那邊弄啊
那個時代已經過了
只是
很多的訓練單位
或者是補習班排課
都會排那個課進去
事實上在我們看來
那個都已經有一點點過時
為什麼
因為環境在變
東西科技變到我們已經
你看
而且這個還可以幹嘛呢
複製
換影片
換照片
旋轉
注意看
旋轉
對吧
隨時我都可
再來
疊位置
這個遮住他了
OK
你可以把這一張
這個有一個叫位置
移到最前
或往前移一格
移一格
或這個一次就到最前
他本身範本已經做好了陰影
你看到
我這樣疊多漂亮啊
啊這些
我們不用再做
因為再怎麼做
還是那個樣子嘛
所以我們才會用範本
啊我現在教你
就是要教你會靈活運用
所以
仔細看喔
好
那因為我們的時間有限
OK
所以
影片老師都錄了
假設
老師
我五分鐘之內還沒辦法練好
沒問題
課後的時候再用
啊不用急
好
那我們這個講完
等一下讓你練個幾分鐘之後
我們再叫下一個
這樣子
這樣子進度就不怕
啊這就是我們
為什麼要課堂錄影的原因
課後你都有一個依據
不用等到說
老師
我這個一定要會
你才能教下一個
那樣的話
就卡住在那邊
東西就
因為我們的課
沒有辦法那麼長的時間
好
所以
記住喔
位置
可以旋轉
啊一定都是
以點到為基準
都紫色的
有沒有
點到為基準
放縮
旋轉
移動
不要delete
連這個星星喔
都可以做動畫
動畫這邊
按下去
就會改變
最好用的是蜜蜂
你可以建好你自己的動畫路線
OK
你看
就會跑來了
這裡面可以移動的速度
速度快一點
慢一點
OK
所以很好玩喔
再來
老師
我不小心
本來他有那個字的啊
我不小心按delete掉了
不用怕
因為這裡
一定有給你字
字
有標準型
就這樣標準型的
跟
他們有設計過的
這就是有設計過的字
有沒有
有設計過的字
好
剛同學問我說
老師字的顏色在哪呢
OK
都是可以在上面這裡變更
上面這裡有變更
顏色就會跳出來
OK
這是文件用的配色
這個
照片的配色
這個
是他原始預設的顏色
你看
都可以更改
OK
好
那這個
學這個的時候不用心急
抓時間
老師就是把它錄好
你
可以慢慢看
點某一個
就有一個
記住喔
跟電腦互動
我們
我們教那麼多學員
差別在哪
第一
你不要心急
二
不要跟電腦生氣
你血壓會高喔
OK
三
電腦一定是互動
你不動
它不會動
因為它不是你肚子會吵
再來
你一定是點到了
工具就會變化
例如
你放掉都不動它
說
老師
我想要變那個字的顏色
我都不知道
我都沒看到啊
當然
因為你是點到照片
沒有字條
字的顏色的
因為面積有限
全部都秀出來
東西都太小
所以一定是跟電腦互動
你點到它
譬如說
我點到它
老師
沒有啊
你都還沒點
你是摸而已
點
上面工具列才會變化
你點了就變化了
點了
纔有
這裡纔可以換
出體
變化
這個是
藝術字
阿
標準字在上面
標準字可以大小
你可以直接Key
也可以
下拉
大小就有
這裡
就是Key你的文案
你的文案是什麼
就Key什麼
阿
一樣都可以旋轉
OK
都可以移動
好
都可以排序
位置喔
就是排序
殺到最底下
就會被蓋住了
有沒有
OK
好
這個都是排序的
運用的手法
有沒有看到
塞到最底下
所以
本身一個版面喔
你都可以變化萬千
再來
這裡
有元素
嗯
這個東西也很好用
OK
寫起來
元素喔
它上面就有分
你需要有愛心的
這裡就來了
注意看
有這個
你可以用嗎
你要付錢纔可以用嗎
為什麼
有皇冠
好
所以你會看到
它這裡幾乎都掛上皇冠
有沒有看到
好
這裡面就會有
不同的
有沒有
好
也有照片
也有點點點
這種的
阿
影片
你有沒有發覺
這裡很多都掛上
付費的東西
好
形狀
邊框
圖像
或按全部
全部就是
你都可以看到東西
好
以這裡為例
這裡有各種的邊框
你拉進來的邊框
注意喔
有這個圖案喔
這個圖案就是照片圖案
這個就是照片圖案
它是一顆愛心的
然後呢
我的照片上去喔
塞進去喔
它就是一個愛心形狀
對吧
不然你還要去Photoshop
那邊做出愛心形
然後再填圖進去
再用Layer兩個圖層
然後再合併
哇塞
那要搞多久啊
那已經跟不上時代了
我們很不客氣的講
那已經是
時代的這種
就是你運用的時候
好
那
老師就是幫你找到一個
適合你運用快的
像這個
OK
你進去就是有
然後有這個影片
新的影片
OK
現在我們拍照都喜歡比一個愛心嘛
或是比到一半
心裡一半一半在臉頰嘛
那個就是你跟粉絲
對不對
這個
它就是可以用這一種
桃園這個新的形狀
可以去做的
OK
好
運用是這樣子喔
好
然後
設計就是回到剛剛那個點
按這個回到範本
依照範本喔
可以挑選
這裡可以選範本的點
你可以用搜尋
OK
例如
我想要有照片的
照片跟照片相關的
馬上就出現
照片跟相關的
例如
我們直播喔
我可以辦一個小型的見面會嘛
對不對
我幾個
譬如說幾個人來了
我就可以
他們來了
大家都拍照
然後就放上去啊
用照片去記錄
所以當我用到這個點
這個
OK
同學
我現在要問你喔
我現在看到一個範本
我可以直接拉進來嗎
可以拉進來嗎
拉進來是整個全部進來呢
還是單一個畫面呢
喔
對喔
所以我會勸你喔
因為你正在編輯了
你現在拿
參考
因為這個人的風格
我只喜歡封面
這個人的風格
我喜歡中間頁
這個人我喜歡風格
喜歡他的封面
那
這個一樣
你不要
你全部一拉就變成他的啦
所以我們會
點下去
注意看喔
我是點下去
並不是拉進來喔
點下去
原來他有六個頁
那我就可以單獨的看
有沒有看到
他有動畫喔
有沒有
好
啊你喜歡哪一個
例如
這個是圖一半字一半
適合用在封面上
這個
有小標
適合放在內頁上
啊
我的首頁已經有了嘛
我現在是要加在後面的內頁
所以我應該是這個
好
那他有一個加
我按下去
他就問你
欸
你要加到新增為頁面嗎
還是取代現有的呢
取代現有
就是這個會被取代掉
新增他會加到後面去
OK
好
所以
我還可以選嘛
我再講一次喔
我不是拉喔
我是從這裡按喔
所以他開關很多種
我這樣子拉
他就進來
拉
在他前
有沒有
我可以插頁
後面
放
啊我也可以按
按下對話
這樣子
你按太快就會變成取代了
OK
好
再來
再來再來
寫在你的筆記本上喔
頁跟頁之間
是可以過場
用過場動畫
注意看
在中間
注意看喔
本來中間沒有
本來中間沒有東西嘛
我遊標遊標遊標
擠過來
他就出現了
然後這邊就有一個
上面就是
注意看喔
擠過來之後
他分成兩個動作
上面的一個加
跟底下的動畫
OK
好
如果上面的加
就是卡一頁進去
OK
然後呢
底下的就是動畫
動畫你按下去
啪
他就會變成
這個叫做轉場效果
我要的這個轉場效果的動畫
OK
那我就可以這樣子
有沒有看到
那個就會滾動的跑掉喔
你看
前後張喔
前後張
他就會用這樣子的方式來
很順暢的結合
OK
好
以這個跟這個為例
我都可以插進去喔
這樣子插進去
動畫就有
他就一種抹去的
直線插去的
下降的
有沒有
滾動的
所以原本他的東西物件
會因為我的動畫而感受
變化不同
當我是這樣滾動
你看他
拉過來
這樣子的時候
對方是直線下來
所以你做出來的影片喔
就會千變萬化
好
同學
我這個是什麼
投影片式的影片
這個最好用
最穩
啊
變化越多
變化最多
而且
你可以同時
看很多影片在裡面
影片可以
同時有很多的影片
可以在裡面運用的
當你裡面是有影片的時候
好
來
我們以這個為例喔
這個是照片
對吧
我在按上傳這裡
如果我的是影片
我拉
一樣
砍進去
他就是影片
那
PowerPoint裡面的影片
只能砍一個
就一個page
只能砍一個
砍嗎
不是喔
點到他
注意看喔
他是照片喔
我用影片
拉進去
他就是影片
OK
拉進去
他就變影片了
如果原本的範本是影片
你拉照片
他就變照片了
框都還是用原本他們的範本
框
這些物件
這些有沒有
這些都是來裝飾
是讓你的畫面變漂亮的
你也可以
經由複製喔
經由複製
把這個
挪到別人家去
注意看喔
我這樣挪
挪到別人家
他變紫色了
我就可以進來了
然後再按複製
挪到別人家去
注意看喔
他就變進來了
所以我可以有一種風格的統一性
對吧
這個
你就會想
以後你做投影片喔
你要做提案報告啊
做投影片啊
或是我要去
例如我要去開發一個廠商
請他來給我賣東西嘛
你怎麼吸引他
你就做一段影片
不要用powerpoint
你不要用傳統的powerpoint
因為那太low了
現在有新的工具了
你這樣子就可以做了
注意看
我影片比較長
所以他把影片自動有沒有
加長了
有沒有看到
會依照影片的長度而變長
這就是
好用的地方就在這
啊
powerpoint當然就跟不上喔
啊
但
他就是powerpoint式的
簡報式的
什麼意思
右下方這邊有一個式格
按下去喔
就跟簡報一樣有沒有
剛要嘛
簡報不是有一個剛要式的方式
就這樣可以看
對吧
你可以針對某一個
再複製
有沒有看到
複製一頁
然後再用這一頁
來變化不同的圖
有沒有
前面一樣
我再來變換不同的圖
我把東西
調進去
就不是影片了
就五
只有五秒而已
我拉影片會依照影片長度
伸長
變回照片
他就以照片的長度為長度了
就五秒而已
OK
好
所以你可以看到
我們作為直播拍賣運用的時候
第一
我要去招攬新的客戶
讓我在我的直播上賣東西
你一定要去提案引誘他
人家為什麼要給你做
然後你就告訴他
我們有一系列
針對你的商品
來做行銷的企劃
OK
這樣子
那你要讓他看過你的Demo
那當然
我就是放上
幹嘛
兩分鐘幾分鐘的影片
有沒有看到
影片
總影片可以從這樣子來
OK
這些都可以換喔
OK
這個砍影片喔
好
那我就做一段
他影片的Demo的展示
不管他是化妝品也好
這一個呢
手提包
揹包
行李箱
什麼我都可以為你行銷
啊
來了
我們就可以開一個
公開的連結
我再講一次喔
公開連結
我去招攬生意
給他看三天
三天後
刪除公開連結
為什麼
我們怕給你太多天
你拿我的影片
去找別人弄
所以
我不給他檔案喔
我是用這種方式
可以公開
我也可以
幹嘛
關閉
公開跟關閉
主控權都在你身上
那我們就用這種方式去招攬
好
等一下
你再玩玩看喔
用
設計
可以看到更多範本
OK
這裡面
可以依照這裡
找到相似配色
以色彩來找模板
就看到
以色彩來找模板
就是這樣子
以色彩來找模板
我們避開
皇冠那個就可了
要
拉
跟
點下去
針
這樣子的方式來
好
OK
所以就是我們
在時間有限的情況之下
我們為同學介紹這個
Canva
它基本的
那我會建議喔
課後的時候
你都去玩玩看
因為這個都是中文介面版
你都可以玩玩看
OK
然後
影片喔
本身也可以在上面編輯
啊
我把畫面給你切一下
這裡
我講這個
影片喔
在上面可以編輯
因為你用手機拍
我們現在大概都是
直播主大概都用手機去拍東西了
不會再去
花錢去買那個
租那個什麼
專業的那個錄影機啊
攝影機來弄
不會了
那我在這邊可以這樣子卡
卡影片
剪輯
我再講一次喔
如果你看很多的補習班
它會教你用剪影
去剪影片
不用那麼麻煩啦
我用這個方式就可以了
啊上面喔
最簡單的
你可以哪一段哪一段
啊你可以預覽那一段
是不是你要的那一段
好
如果OK
啊你也可以控制
精準控制秒數
我要4秒就直接key進去
可以看音樂跟文字嗎
可以啊
都可以再加啊
那我們在這邊完成
就是影片的剪輯
好剛同學問到加文字
文字就是這樣子加
啊這個文字就會配合
你就是4秒鐘的文字
OK
然後要加音樂都可
但注意
它只有單音軌
它的音軌只有一個
所以可以單音軌的方式去做
好OK
好
然後
啊就是在編輯裡面了
比如說我們在上傳這個地方音訊
拉進來這個音軌軌道有沒有
這個叫單音軌就一個
好那我剛講到
有外面的一些補習班在教的一些簡映
那樣的呢
它是多音軌的
就是好多音軌放在一起都可以
叫多音軌
好像是
那所以單音軌我在加的時候呢
我可以某一段有聲音某一段
你看這樣子
就是單音軌的方式的做法
啊你可以這樣子
OK
啊不要的方式我們就會Delete
那這一段到這邊才會有聲音
這樣子
啊不要就是Delete
它可以把那個背景音樂
背景蛇去掉嗎
背景什麼
背景蛇
因為我們拍安東戲也是有那個聲音啊
好OK
好那來了
你說的事情就是等於
專業的影音剪輯軟體了
OK
好
Canva呢
它是屬於比較快速通用型的
好
就不要對它要求太多
基本上啊
我們做直播拍賣的
不用搞到那麼
好像在拍電影一樣那樣東西
因為那是不對的
為什麼
你把自己直播搞得像拍電影一樣
要佈置要那麼那個
那個太慢了
跟不上
成本太貴了
這樣理解嗎
拍電影跟我們做一個直播
東西是不一樣的啦
就像你現在的直播
我們只是一個LED燈打燈
但真正的電影不是像你那樣子玩嘛
要更多角度嘛
光線的注意
都是一門學問嘛
打燈就專門的人的
OK
所以我們是直播
我們是要拍賣東西
所以不用搞到那麼複雜
好
讓同學操作看看喔
