多點影音工作室 AI生成式網頁設計課堂教學影音2-1

我們做網頁設計 我們在學習這個階段 就會模擬像工作情形 譬如你去上班 你又回家 那你的那個網站的進度 怎麼在這個異地之間 就是你公司跟你家裡面來來去去 所以在老師給你的教材裡面 我們就會把它放在 叫Weber Design Tour裡面 在Tour裡面呢 我們就會放上 Mobilize是我們的這個編輯器 好,那本來官方是一個安裝版 老師把它做成可西式版 所以我可以放在我的隨身碟 最佳狀態就是放在隨身碟 像老師的電腦裡面 我來這個地方上課 我常常去的叫做G 可是我在家裡面可能叫F 可能到別的教室可能叫Q 因此我做成可西式 我的檔只有一個 只要放在我的隨身碟 所以我會建議同學 上課的時候你用隨身碟 不管你是這個可西式的USB 就是可以攜帶這個USB的這個SSD硬碟 或者是那個大拇哥那種隨身碟 那大拇哥隨身碟速度比較慢 那我們都會建議說用SSD的外接式硬碟 像我的就是外接式硬碟 它的工作速度比較穩定比較快 好那一樣我們就把它放到這個地方 幹嘛 這個是考量你將來要工作的時候 你就可以用這種方式 攜帶來攜帶去就好了 你知道我們現在的這個軟體 百分之九十通通都可以免安裝 包含你的這個的什麼 這個這個常用的這些軟體 Word這些全部都可以用免安裝的 好那我們在這個地方 來上課或者是回家我要做作業 一樣都是打開插上你的隨身碟 然後進去之後按這個 好那我們學的軟體叫Mobilize 所以我們點兩下它就會啟動 好那我們現在模擬的狀況是 你移動到家或者是陌生的地方 譬如說圖書館或者是公司 打開之後你第一次開嘛 它就會呈現這個 上面只有一個手機的這個圖案 裡面會跑出來Sample 我們上一次做的進度怎麼都不見了 那當然因為你的電腦像還原 或是陌生的地方長相就會這樣子 好所以我們要再打開第二個 第二個工具呢就是你的USB的 USB的Web Server 好那我給你的這個USB Web Server呢 它本身是含了資料庫的 它本身就可以是移動式的網站伺服器 那放在的是你的隨身碟 所以我們稱為叫做本地 本地伺服器 好那我們要有一個概念喔 同學我們養那個海水魚 要有海水魚的魚缸對不對 那可能淡水魚譬如說養鬥魚 只要一杯清水啊 一個杯子啊 小小杯子就可以養活 但海水魚不行 它需要有它的環境 所以對照我們的網頁 好我們網頁就要有一個環境 所以這個稱為伺服器 那是在我們自己能控制的 所以叫本地伺服器 所以我們是對著它按左鍵兩下 好在你的工作列就會出現這個 這個Apache有打勾 MySQL有打勾 綠綠的打勾代表可以運作 老師我的是驚嘆號 橘紅色的那個驚嘆號 那就代表你的檔案 你沒有聽老師說 你把整個老師給你的教材呢 你把它扣在中文的目錄下 例如桌面 下載 這兩個通通都有中文了 你看下載是中文字 桌面是中文字 你放在那裡運作都會出現錯誤 就像老師這樣子 隨身碟直接扣到裡面就好了 通通外面都不要有任何的 中文目錄夾包著它 這樣起來運作就會正常 好那這有什麼優點呢 有因為你的檔案是帶著走 例如我在學校做了一個進度 因為我們網頁不可能一天完成的 網頁都是這樣一段一段 一直一直累積起來的 它不會一天做完喔 也不可能一天做完啊 所以我們就會像 來來去去來來去去對不對 電腦開了又關 關了又開 然後移動地點 因此隨身碟是最佳的工作夥伴 就是我們最好的工具載體 就是隨身碟 好我的進度在這邊 然後回家 我想要複習林老師 這個10月16號教的 那回家打開就可以了 你如果安裝版那就完蛋了 沒辦法搬來搬去嘛 這就是我在思考教材的時候 要怎麼讓學員非常的使用順利 但你要學怎麼用啊 好那Rooter DIR呢 這個打開 上一回我們已經建了 幹嘛 一個還沒建的同學 就要建起來 因為上一次有同學請教 所以你要按右鍵新增資料夾 名字呢我們都統一叫買 就是我的Weber網頁 site s-i-t-e就是網站 我的網站編號001 好這個是我們這一個 跟著老師課堂上做的 這個是要讓你創作的 所以我們有兩個 買Weber site 001 一個是site 002 好那我們上一週喔 我們已經做了一個進度了 所以你看9月18號 就是我日期的 好那這一個檔 這一個網頁 一般的瀏覽器都可以打開的 好這裡我們會看到一個叫 portrait.mobilize 好奇怪老師 那個副檔名怎麼那麼長 一般不是三個字嗎 頂多四個字啊 怎麼會有那麼長 好這個是他的專用檔 好那我們記一下喔 對再來喔 上林老師的課 要帶筆記本 我們每一個小節都會有重點 你如果沒有記載 左耳聽右耳就出去了 到了我四點多問你 今天早上上了什麼 你全部忘光了 這樣就沒有學習的效果 因為我們這個 網頁在製作啊 網頁動畫在做的時候 都是實務課程 一定都是技術上的這個操作 那細節很多 再來一堆的專用詞 例如說我們就記一下 這個軟體的專用檔 叫做portrait.mobilize 他已經告訴你喔 我就是mobilize專用的 所以這個軟體叫mobilize 只有他用 因此你可以看到 這裡面是白白的那個紙張 那個圖案是一個紙張 也就是說 你按左鍵兩下 找不到軟體可以開的 這個專用檔也不可以點兩下開 他必須透過軟體來還原 所以我們上一堂課有講 網站怎麼創建 怎麼發布 怎麼還原 這三個步驟 創建、發布、還原 那我們今天是第二次上 來模擬所有的移動位置 例如 老師 我回到家之後喔 我家的是Mac 可不可以把這個 搬到我家的Mac 把進度搬回家的Mac 可以 那你就要用還原 老師 我的作業不見了 還好我上一次有備份 那我的不見了怎麼辦 還原 所以我們學東西一定要學好 創建、發布 因為創建是你設計而已嘛 發布就像存檔一樣 還原就是東西受損了 叫回來 叫還原 好 這樣概念有了 好 那你只要有概念 再來你就要知道 什麼檔纔可以還原 好那這個檔 必須透過這個軟體 好那我們就打開了嘛 我們第一次開 所以你的電腦會還原的話 因為一般的這個 這個實習的場地 一定電腦都還原嘛 好 那我們要 讓你的電腦 讓這個操作的軟體 要能夠好用 一定要怎麼調教 所以按三條線 帳戶 再我們講一次 這個現在的這個呢 很多的這個使用 都是雲端化 全部都一定要登錄的 一定要用帳號登錄的 這個Mobilize軟體也一樣 你的資料可以雲端化 所以一定要登錄帳號 我們都建議用Google帳號登錄 好那因此登錄進來 它一定會有一個帳號 好那你按了它 按這個應用設置 把這個全部打開 最後一個不要開就好 因為這個是GitHub 那你沒有那個帳號 所以你開了也沒用 因此我們這樣 1234567 好 這裡可以改成語言為中文 但是這裡的中文 它翻著都是簡體字 最後一項不要用 因為我們剛講 這個軟體不用錢 所以這家公司 無所不用其極 希望你去跟他買東西 所以他們就會 怎麼樣卡一些東西 就像Free的嘛 你可以升級為VIP啊 那你就要付錢啊 所有東西 做生意都是這樣子 那最後一項就是 要讓你去買 那我們不用 我們只要 應用設置只要1234567 這樣功能纔有喔 不然會很陽春 所以要開這個 按 好的 好 上面就會多出四種 這個是手機 這是平板指令 平板水平觀看 桌機觀看 好 那我們設計的時候 用桌機觀看 這樣操作上 會比較舒適一點 那這個是基本的調教 好 接下來 你可以看到 這個側面這邊 有頁面 網站 帳戶 擴展跟幫助 剛剛我們已經看了帳戶了 現在來看網站 好 請點選網站 好 同學我們現在要說明喔 好 那我們進來的時候 老師 我的很陽春呢 就看到這個 MySite 這個是Sample 再來一個就是 AI的 好 這個 現在這個軟體呢 它可以透過 這個項目喔 只要提供提示詞 它就可以快速幫你建那個 網站 好 那因為我們是有目的性的 學習操作 所以我們不用這個 那這個呢 是有 創立新建 建立空白是從這個 好 我們第一次做的是從這裡 那現在我們要來複習的是 這個 它翻譯成叫 導入Mobius 網站 它事實上就是還原 就是我剛剛講的那一個 專用檔 透過它 這個專用檔 要透過它 這個軟體喔 透過它 纔能夠幫你 還原回來 好 所以我們要取得這個路徑 好 路徑的取得 是這樣喔 那我再講一次喔 我呢 有一個 伺服器嘛 按 Rooter DIR 看到MyWebsite 001 點進去 上面這一段喔 這一排這一排叫做路徑 你點一下 它就會框住了 好那就不動喔 改用鍵 雙手喔 鍵盤的Ctrl加C 那這一段路徑就Copy了 接下來我們要到這個軟體 好 這一項有兩 等於有兩個 上面跟下面 這個是 創立新的空白 這個是還原 所以我點下去 它就跳一個對話視窗 好那 預設一定會跑到那個文件 本機的文件 所以 點這裡 它路徑就會這樣框住了 而且會包起來 它就會選取狀態 然後你這個時候就不要動 按一下就不要動 改用雙手 鍵盤Ctrl加V 它就貼進去了 但記得喔 要多一個Enter 它才會執行嘛 好 這樣子就找到這個檔 要點這個專用檔 你們看到喔 現在網 有沒有 現在那個HTML HTML就看不見了 有沒有看到 這裡HTML 跟這個圖檔都看不見 只看到這個專用檔 因為它這裡是專門找專用檔的 所以我點到它 開啟 這樣子我們上一週進度就還原了 OK 好 那 來了 老師 啊我之前進度沒有耶 上一週我還請假沒有來 好沒問題喔 那我們不可能重頭嘛 所以我現在就把我這個檔 我上一週進度的檔 拷貝 好 我們放在那個 教材裡面喔 我們放在分享的裡面 好 上一週進度缺的同學 那你就從這裡 你要把它拷貝喔 拷貝 拷貝到哪呢 拷貝到 你 伺服器 打開 這裡面 從這裡面 拷貝然後貼到這個裡面去 像這樣 所以 同一個時間 我們要讓 同學做一件事情 幹嘛 因為我們做網頁設計喔 最重要就是那個檔案嘛 啊老師 啊我那個電腦 或是我那個隨身碟 突然就壞掉了 那怎麼辦 那就沒啦 所以我們 做事情一樣喔 做網頁設計一定要有一個 概念叫做備份 所以我們會在 硬碟裡面 建一個叫做課堂實習備份 然後呢 按照我們工作日期 好按照工作日期喔 然後我們把 當下的進度貼進去 老師那你工作會這樣嗎 是的 因為 假設 我今天10月16號 我做了一個進度 那我可能今天的進度做完了 我要休息了 因為網頁還沒做完喔 但我要休息了 今天只做到這裡 所以我就會 開一個目錄夾 然後建上日期 然後貼進去 好那明天繼續做呢 那就再開一個目錄夾 當下的進度再貼進去 所以你可以看到 我們這樣子往回 可以有好多進度 例如 9月18號我們上課當時 我的進度就會在這裡 好那一樣 我們今天上課 最後要下課了 你也一定要 貼進去 好為什麼 你想一下喔 我們做網頁設計喔 一個案子 不是那一千兩千耶 也不是一萬兩萬耶 都是十幾萬耶 一個案子都是十幾萬 那約好了 十幾萬金額不小啊 所以一定要打合約 打合約 就有契約關係了嘛 你約定了時間 30個工作天 明天就要交了 你的檔案不見了 壞了 受損了 誰知道啊 老天爺常常這樣 開我們玩笑啊 就說你買綠色乖乖 放在你的電腦也沒用啊 不見了怎麼辦 一個月的工作進度 全毀了 還好 我們有按照日期備存 就算毀損 也頂多差一天 或兩天的進度而已 這個就是我們 做職業喔 運作時的應該有的態度 那我們在上課就要教你這個 那最常運什麼會這樣教 因為每次我們在教學的時候 要打成績了 期末要打成績了 就一定會有同學跑來說 老師怎麼辦 小小的時候 老師我那個檔案都不見了 我想說糟了 他會講這個我就問他 你有沒有備份 沒有 怎麼辦 我能怎麼辦 你一定是重做啊 所以教書會重做沒問題啊 你收了人家的錢 不可能說再延一個月 人家有趕時間的 他有進度的 他有約定的 所以我們就一定要謹慎 就是這種方法 每次上課都要進度喔 所以你看我們上一次9月18 我的進度就在這邊 所以我們把它錄下來 就是要讓你知道說 我們的工作模式是這樣子做 OK 那既然我們瞭解了這個 來囉 我就會等於有兩個檔案 一個是什麼 一個在你的伺服器 一個是在你的備份區 所以我這樣就有兩個檔案 這個備份區呢 幾乎是非必要不動它的 就是說遇到緊急狀態 連我的伺服器都不見了 所以我才會去動用這裡的檔 好啦 進度都是設在這 然後它就是一個備份區 一個備份的這個工作 好 這樣我們理解了 再回頭我們再說明一下 網站 這個項目喔 做 幹嘛 三件事情 一 創建新的 就從這裡 二 還原從這裡 三 我接到一個新案子 沒有好的idea 那現在有AI 對不對 有AI的這個來幫助我們寫文案啊 生圖啊 好 那我網站的 這個 可以從這裡 再來就是 打樣 從這裡 好 寫下你的筆記本喔 老師幹嘛打樣 喔有 是這樣子喔 假設我明天 要去接一個牙醫的 案子 我從來沒做過牙醫的啊 牙醫診所的案子啊 那明天就要去找他啦 對不對 你空手去 拿你以前什麼服裝啊 或是什麼其他食品的 什麼那些網站 去給牙醫師看 牙醫師根本沒有fu 他會覺得 你拿那個 又不是我 又不是牙醫診所的東西 你給我看那些幹嘛 對不對 賣餅乾那些 跟我什麼關係 所以他就會覺得你 不到位 不夠專業 可是老師 那難道我還要為那個牙醫 明天我要去找他嗎 那還要為他 趕快去做一個網站嗎 那不累死了 所以 這個AI就是 打樣用 快速打樣用 OK 這個是快速打樣 你只要輸入關鍵字就可以了 好 那我們先把它 記起來喔 打樣用的時候 用AI生成 要注意喔 AI AI 大家都在講AI 那AI超多種喔 幾千幾萬種喔 老師的網站這裡有 連結AI的生成 這個是有分的 我這裡有寫 Mobilize AI是生成網頁 Copilot是生成圖文 Canvas是做影音視覺編輯 這個也很好用喔 再來 Chopped GTT生成文案 它是深入的文案 好 Chopped GTT文案 最近它也可以生圖了 因為AI大家都在努力的 一直往前走 還沒有停喔 我再講一次喔 AI才一兩年 生圖才第一年而已 大家都還在努力改進 找到最好模式 都還沒有停止 所以會一直變化 一直變化 你可能今天睡覺 睡一個起來之後 那整個全面都改變了 因為大家都在競爭 你有壓力 那個公司大廠都有壓力的 好 那每個都有它的專長 那這個是網頁 所以我在這邊 盡可能幫你翻成 讓你知道 這個大概在做些什麼 回到這邊 我們再強調 你要開始做 一定是新建的 打樣用AI 還原用這個 你做好的網站在這裡 做好的網站在這裡 OK 好 那我們第一堂課 先做到就是把進度 上一次的進度 因為中間我們隔比較久 我們把它還原出來 好 按這邊 設定這裡 好 那我打成績喔 為了怕弄錯 所以你這裡一定要 寫上你的名字 再來 我們的作品 會放到那個 遠端的網際網路上 你的名字就會 向對外揭露了 經過半年 人家你去應徵 或是找工作的時候 人家打你的名字 就可以看見 喔 找到你這個 曾經發表過的作品 所以這個有點在 宣傳你自己 好 所以 所以喔 你如果call老師的教材 這個名字要改一下喔 好 這裡就是這個名字 好 這裡有一個 專業用詞喔 記一下喔 寫在你的筆記本喔 叫做favor icon f-a-v-i-c-o-n 這個專業用詞 記起來喔 我再講一次喔 每一行都有行話 那我們要知道 你是不是行家 只要跟你講五分鐘 就知道了 結果你講不出 任何專業術語 那你就知道你是外行的 或是菜鳥 OK 啊什麼是favor icon呢 就是網頁的圖標 你看喔 一看這個標誌 看我滑鼠指的這個 喔 Google 雲端硬碟 YouTube 有沒有 好 所以每一個喔 每一個 每一個都有它的這個 網頁上面標籤的這個 叫做favor icon 百度百科 就是一個腳丫丫 每一個都有一個 favor icon pchome 標誌 等下跑完喔 你看 二十四 二十小時嘛 標誌 一看這個就代表 這家公司 OK 像老師的 就是我的logo 所以我們要你設計logo 將來就會在這上面 這個專業名字就叫做 favor icon 它是有專業名字的喔 好 OK 那以前啊 以前什麼 哇 很多學校啦 補習班啦 對不對 最常用的就是 Adobe軟體嘛 網頁就用Dreamweaver嘛 對啊 老師我也覺得很奇怪 你為什麼不用Dreamweaver 因為Dreamweaver是一片空白 要從頭教會你 到做出一個專業的網站 以我們的時數 那是根本不可能的啦 會只能做那個局部局部局部 學那個有什麼用 因為我們是職業訓練耶 我們不是補習班 也不是學校 一個單位就算了 不是 我是要從無 教到你會 到多面體技巧 到上傳網站 到行銷 到管理 整套的耶 這樣纔能夠工作啊 啊 所以Dreamweaver不行 啊 你要寫這個Favorite icon 哇 Dreamweaver 光寫Dreamweaver icon 你可能就要三個小時 這裡 不用 我只要告訴它 我的Logo 圖就好 好 所以喔 我們在 教材裡面 我給你的實習範例 有兩個目的 一 讓你參考 原來開發一個網站 要有文案 要有照片 那照片呢 你一定要分類 所以你要借目錄講 例如我要做一個工作室 開始我就要有什麼Logo 那我要有工作團隊 我要有導演 我要有剪輯師 等等這些人 因為這是我要秀一個網頁 要有的資料 然後呢 我也要有我的系列作品 那我要引導你啊 所以我們要做好Sample 要按照這樣專業的分類 好 所以你的第二個習作 做個人作品集的時候 千萬不要亂七八糟 什麼東西都亂丟 什麼東西都把它丟上去 這樣子不對喔 一定要分類 好 這一點將記得 OK 好 第二個目的是 老師 這些圖 因為我來不及生圖 那我上課的時候怎麼辦 你就先用老師的圖片頂替 那你事後生好圖了之後 再把它換掉 好 那我們為了評量喔 你自己生圖 分數當然就會比較高 你用了老師的圖 因為這裡所有的圖 我都知道嘛 所以你的分數 就會比較低一點 因為我們是要鼓勵你創作嘛 知道在業界的時候 運用是怎麼情況 OK 好 所以你開發的時候 要按照這裡來 其中我們就會有Logo 好 再來我們要講一個概念 以前我們都認為說 Logo不是就一種 沒有啊 現在那種素材非常多元 樣態非常多 旗幟的 馬克杯的 對不對 扛棒的 網頁的 制服的 信封的 那麼多種 對不對 也會因應需要的時候改變 甚至我們要做一個 多媒體片頭 那我的Logo就要幹嘛 更精彩 我要印一個很單純的 所以我用單色的做Logo 所以我Logo樣態 其實可以變很多種 就如同我們在這邊 模擬給你看的 但我的元素是什麼 什麼不會變 公司名字啊 英文名字啊 這些不會變 OK 好 這樣子我們理解了 好 那我們先暫停一下