多點影音工作室 AI生成式網頁設計課堂教學影音5-1_block模板程式碼編修技巧

接續上一回,我們要來增強這個呢 我們在網頁作品裡面的這種展示手法 那我們前面做了有婚禮、企劃、旅遊、美食等等 那我們都用了一些,譬如說我們從婚禮的是圖片牆 形象企業的、旅遊的 這個呢,slider的輪波 到美食,我們把它區塊能夠放大 好,那圖片的展示就那幾種啊 變到沒得變了對不對 結果我們用了更進階的 我們希望在藝術展覽這個呢 我們去用了這個 叫做Design Block Gallery 這裡面我們是去找了網路上 一些高手喔 那他們的一些支援Mobilize的 他們已經寫好程式了喔 而且這個程式是支援Mobilize的 他們是要經過包裝的 然後呢,他把它包裝好放到網路上 老是去花了三個月的時間找啊找啊找啊 一找到他們,然後我把他抓下來 讓你安裝 那你這樣就有這些東西了 其中這裡 針對我們網頁所用到的東西 他都有 譬如說 有動態效果的 針對文章的 image的 video的 誒,video對我們就很適合喔 因為我們多媒體學了很多影片 我們有一些微電影影片 或者是短影片等等 那你要呈現給你的客戶看 或是你的客戶呢 就有這幾支短影片 你要一個畫面裡面陳列 不是一直捲軸讓他選喔 是要一個畫面讓他陳列 那這樣就要靠這個 好,那也有形象的表單的 網頁尾部的 地圖的 幾乎網頁所有的 他在這邊都有 這邊都有 好 那麼其中喔 我們 要來呈現那個 設計的時候 image 我們透過這個搜尋 就看喔 我先選了image and video 我按了搜尋 然後他就會幫我找這個分類 我們再看一次喔 如果你第一次點 他是不知道你要哪個分類的 所以他這個選項叫做 任何的block 就是任何區塊都幫你排起來 都幫你找出來 所以這裡面有那個 哇好長好長好長好長 對不對 好那因為我們要做商業嘛 所以老師給你六七十個 這樣子的 我們收集來的東西 啊 每一個東西都有兩三樣 你可以選 所以在職業上就夠了 好那我們要更精準啊 所以我們就是按這邊 下拉之後選你要的 因為我們是要來做 我們作品的系列 所以一定是怎麼樣 展示啊 啊作品不外乎就是圖片 影片 所以你看這裡叫 image and video 對不對我們多媒體 你要幫客戶展示 就是長這個樣子而已啊 image and video 然後按搜尋 好那這裡面 為什麼要用它呢 因為它就是一個進階的 高級的 好那也就是說 一般的網友少看到的 他很少看 一般圖片講他常常看啊 我再講一次啊 我們的客戶他也是網友喔 所以你不要以為說 啊他可能是六七十歲了 所以沒見過網站 沒有不可能啊 他們天天在滑 天天在看 甚至他也都知道 同行是做些什麼 何況 四五十歲的 他幹嘛 他當老闆 他更清楚了 他更知道了啊 因為他們的 接觸的面裡面都有了 只是 高階的還是比較少看到 因為比較貴嘛 一般網頁都是編的 也是比較便宜的 好那我們就要去找 那其中這裡面就有 好那它的英文名字就是 手風琴 這個是一個手風琴效果 一二三 四 這樣子都來 它編號是從這裡導過來 一二三四四種 好那上一回 我們用的是這個 用這個來demo 好啦 底下這個是video 這是video OK 其他兩個不是了 所以它的video部分呢 只有兩個 OK 好那video呢 放在你的 個人作品集裡面 要show這個 因為你會有 你的影片作品了嘛 OK 那你要用這個 那記一下 記在你的筆記本上喔 我們看你的 第二個 這個呢 作品 你自己訂內容嘛 譬如說 老師我要做我 這半年的這個 個人作品集 那太好啦 那其中你就有很多支影片嘛 所以你就可以用這個來 展示 好那 我們就指定 你的第二個席座 如果看到你的video的 這個效果 我們就會加分了喔 因為這是我們做多媒體 後製編輯裡面 一定會用上的啊 因為客戶一定會有這個影片啊 好 OK 好 例如 我們舉例喔 我要幫一個 房屋仲介 對不對 房屋仲介很多分支機構嘛 他很多分店啊 他店長想說 我認識你的朋友啊 想說你會做網頁對不對 我花個幾萬塊 請你幫我做一個網站 幹嘛 我銷售了幾個 現在正在銷售的幾個店 我都有拍 他們用手機拍的嘛 拍這個房子的這個樣子 哪個房間 哪個客廳等等 但 我不會編啊 我只能丟在YouTube上啊 那你可不可以幫我編一個網頁 不要太貴啊 對不對 因為我沒辦法 就是我 這個店長我自己掏腰包的嘛 我不可能 請公司幫我支付嘛 但是我為了銷售嘛 因為業績算我的啊 啊你會網站 啊你又便宜 那當然怎麼樣 我就找你啊 啊我手機拍好 啊 影片放到YouTube上 那請你幫我編 那當然你就用這個最好了 好 我們後面會再談 好 那 手風琴 的效果 在展現上 他有一個互動的那個效果 會是比較優的 好 那我們就用這個 按下去 沒反應 對不對 你要按一下 然後 到這邊 右下方這裡 ADD BLOCK TO PAGE 好 這樣子 他就會增加了 好 老師 我們上回不是有一個DEMO 在這邊嗎 我們增加就會在這裡 好 那上回因為我們時間的關係 所以 沒有詳細的講 所以我們今天 複習 我們要再把它 詳細的 呈現給你看 好 啊上面這個你不用刪掉 我們 等 拿底下這個來 再練習 這樣在技術上 我們就 可以了 好 那我再講一次 我的教學 並不是要從頭 讓你寫網頁 因為太辛苦了 也不需要 我們受限於教學的時間 而且我們又希望你 幹嘛 能夠做到最新的 網頁技術 好 又能夠輕鬆 因為幹嘛 除了我影片剪輯的技能之外 我再加上網頁編輯 這樣子我就可以 控制整個啦 而且網頁的設計是 所有行業裡面 對外接觸的 幹嘛 管道啊 很好的管道啊 好 OK 你任何行業都可以做嘛 都可以 都需要用到網頁嘛 因為你要 公告要呈現的時候 就是它了 OK 啊 你的那個 YouTube 你只把影片丟到YouTube 還不夠哦 因為它沒有辦法呈現 你自己專門的 這個形象 不可能嘛 所以我們要結合它 好 那既然是這樣 又要容易學 所以我們採用 Mobilize 它是一種 Block 模組的型態 好 所以現在寫在 你的筆記本上 我們現在學的是 手風琴的 圖片展示技巧 這個很實用 手風琴的 圖片展示技巧 好 原則上就是 我們用別人的 幹嘛 半成品嘛 我加一邊修 就可以用我的 東西出去了 例如它的Demo 是這樣子 好 按旁邊的這個齒輪 它的圖片 是從這裡換的 以往我們的認知啊 以前我們的認知都是說 好 你不要動哦 看我展示就好 以往我們的認知都是 我點兩下 我從這裡換圖 這個版型不一樣 這個不一樣 原因為什麼 因為這個是 由網頁高手 他們自己編寫 主要他們自己編寫 然後再 包裝成為 Mobilize 專用的 擴充套件 好 我再講一次 講那個概念 你不要動 看我畫面就好 我們在這個 城市這邊有一個擴展 好 為什麼要擴展 同學以後的概念 就是這樣子 以後的概念就是 軟體可以說 幾乎會不用錢 當然 Adobe除外 但Adobe也一直在改變 搞不好未來的幾年之後 Adobe也不用錢了 那不用錢 他們的公司賺什麼 賺這個 就是交由 廣大的網友 或設計師 或是專業人士 他們去設計好之後 跟公司合作 也就是說 我的東西寄你的店賣 譬如說 這是我設計的 然後我來 跟Mobilize公司合作 然後我把我的作品 給他 他去賣給全世界 我只要賣 0.1美金 可是我是賣給 一億個人 哇 那我就發了 為什麼 量大啊 但是你一個人 把你的 你辛辛苦苦 你做了一個月的版型 只賣給一家公司 而且那一家公司的老闆 還不太欣賞你的做法 東嫌西嫌的 那我們對我們設計的人 就會很嘔啊 對不對 因為我的東西 你不懂欣賞 我收的才你一點點費用 好 所以 Mobilize公司 他們就是像這樣的做法 把全世界那些高級設計 當然 你給他 他還要篩選嗎 覺得你的東西有沒有價值啊 能不能被廣泛使用啊 能不能當作範本啊 這樣子 所以你看這裡 各行各業都進來 而且他們有一個準則 就是可以 View Demo 好 那這個Demo 幹嘛呢 欸 同學我們去接案子的時候 我們就可以把別人的Demo 當成我們可以做到的東西 然後跟客戶提 譬如說 我現在去找一家 他是牙醫診所 可是 我來不及做啊 沒有時間 可是明天就要去了 那沒關係 我就去從這個版型上面 找到一個 然後我去的時候 就把這個網址 Demo給他看 他們覺得可以 好 那 幹嘛 很簡單啊 客戶喜歡啊 我回頭 我再跟 Mobilize公司 幹嘛 我花49塊美金 我去賣那個 版型來 把客戶的資料 篩進去 我就可以賣給客戶了 好 歐美的網頁設計師 都是這樣做的 所以 大量購買版型 這個在國外的設計師 歐美的設計師 稀鬆平常的事情 OK 好 那我們在這裡 因為 我們教學的關係 對不對 我們不可能說 同學來花個錢 來買個東西 不行嘛 我們都要讓同學 先學會嘛 日後你需要 纔去購買 因為我知道案子在那邊 我再花 我去花錢就可以了嘛 好 怎麼辦 沒有啊 沒有東西啊 所以我們直接 往路上找 好 同學我們打開 那個Google搜索引擎 現在你跟我同步 因為 我們教給你的東西 不能夠說 照著老師做 什麼你也不要問 不可以這樣子 在我們職業教學裡面 是不可以這樣子的 一定要告訴你 來由 運用 跟 從哪裡來 也就是說 不只要給你雨 還要給你釣竿 它是告訴你 這個釣場在哪邊 你要 你有自己 你可以自己做釣竿 你也可以自己去釣 你也知道魚怎麼釣 這樣纔可以 這樣纔是我們教學的目的 所以我們在這邊 我們打上 我們的關鍵字 就是Mobilize 空格 注意到 搜尋的東西 有時候是這樣 奇怪老師你找得到 為什麼我找不到 原因就是你的關鍵字 錯誤了 就像 我為什麼 老師你怎麼找得到 因為我們 知道 每一行都有一個 它 這一行的關鍵字 其實就是行話 就是關鍵字 重點的那個關鍵字 你不做那一行 大概就不懂那一行的關鍵字 好那我們要去搜尋 因為網路上 什麼都有 什麼都不奇怪 就是你只要 用對關鍵字就好了 我知道 軟體就叫Mobilize 好我就要空一個 結果呢 Google 找到我 它就會幫你找到 你們這一行的人 都 底下都這樣問了 都這樣問了 OK 因為常常被搜尋的 來了 這裡就有一個 Mobilize 空格 Extension 就是擴充 Extension就是擴充 因為我們習慣都打 翻成中文 可是你打 Mobilize 後面接擴充 兩個中文字是 找不到東西的 你要用英文 因為所有資料 都在歐美 那個工程師那邊 他們才會分享 所以你要用英文 英文就是Extension 然後我們要Free 我們要Download 所以它這裡有人在用 這個可能就會看到 那個付費版 這個 它就加註說 Free Download 好那 老師 你是怎麼找到的 我也是用這樣找而已 沒什麼啊 就是這樣找啊 好 那我們找了 搜尋的時候 會是第一筆就是 你找到的東西 哪有可能 因為好東西都藏在很裡面 表面那個東西 都 就是普普通通 OK 那很多東西都藏在 再來 分享的人 不是隻有一家 很多家 所以你就要 去多找 所以就是 所謂的花時間 好 那這裡我們要再 這樣跟你說 請記住這個關鍵字 叫Template 我們先寫在筆記本上 T-E-M-P-L-A-T-E Template 好 同學你另外再開一個標籤 一樣用搜索引擎 那在我們臺灣 他們最常用的 都是Google搜索引擎 OK 好那 再打一個關鍵字 這時候我們打網頁 叫HTML 那我們現在 最新的版本叫 HTML5 好記得 空格喔 那字不能 全部都連在一起 空格 注意看 我現在只要空格一下 我都還沒打字喔 這一行 就是我要跟你說的 剛剛我們不是請你 認識一個英文字 叫做Template 那個叫模板 版型啦 那你知道我們現在 這個世界 現在所有的這個環境 所有東西 生產面 什麼面 全部都有版型的 手機也有版型 所以研發科 幹嘛 就做一些公版嘛 大陸一些山寨手機 就可以跟我買這些板子 他可以硬貼 他自己的牌子 他就出去了 研發科做的就是公版 OK 那個公版 在業界裡面 就叫Template 模板 所有的都有 包含你要抄襲別人的東西 就是要找他的模板 Template 什麼都有模板 然後你的 譬如說你 洗衣機 有洗衣機的模板 你要設計的 照這個模板 這樣子做 然後裡面的東西 稍微換一下 儀錶板稍微改一下 就這樣 好 你按這裡 你看喔 這裡就可以找到 一堆的 最新的 網頁的版型 OK 好 那現在的網頁一定都是 Responsive 就是RWD的 寫在筆記本上 現在都是RWD的網頁 我現在教你的都是RWD 因為之前有 前幾屆的學員 教完了之後 問說 還LINE給我說 老師 我是前幾屆畢業的 那請問一下 我們的網頁 那個老闆叫我做RWD 那請問 什麼是RWD 我想說 啊 你都學了半年了 結業了 還不知道什麼是RWD 那這樣怪我嘛 可能課堂上 沒有給你強調 對不對 什麼是RWD 就是能夠自適應 Responsive 就是自適應 能夠滿足所有東西 它能夠伸縮 所以 我們現在設計的網頁 就像水一樣 水你倒在四方形 那就是四方形 倒在圓形 圓形就圓形 橢圓形就橢圓形 水就是這樣子 所以 上善若水嘛 對不對 老子說 上善若水 古人就已經觀察到 水 水就是液態 翻成英文字 叫做Fluid 容器叫Container 我現在講的這些 都是 對不對 會講到英文嘛 那為什麼 因為這行 就是很多的專業英文 然後 就那麼幾個字 你認識了 你講得出來 你就是同行 你講不出來 你就是外行 OK 因為每一個 都有一個 專業嘛 好 那 這裡面就有很多Fluid 你看喔 它的手機 平板 到桌機上面 都可以展示 那我們現在Mobilize 就是基於這個 所以就不用擔心 我現在學完Mobilize 就是這個 啊 我們要不要從 HTML去學 不用 因為 所以我們只要找到Mobilize 就好 好那 回到我剛剛講的 Mobilize的擴充 因為 Mobilize軟體 本身是陽春 你想一下 從商業行為來看 我軟體給你不用錢 對你很好了嘛 對不對 你就先不用花錢啊 你也不用去 什麼破解 什麼用盜版 都不用 我給你陽春 啊你想要進階 請付錢給我 他們的公司的策略 都是這樣嘛 那以後很多軟體 都會這樣 Why 因為你如果要收錢 沒人跟你買 你慢慢 慢慢 你就會被淘汰 OK 啊 Adobe慢慢也會面臨 這個問題嘛 所以他得要 什麼便宜啊 降價啊 什麼什麼什麼 交易板啊 這樣一直推啊 不然怎麼辦 慢慢 他的人口會流失的 當流失了之後 就回不來了 OK 好 那我們在這邊 找的時候 其中 唉 你看第二家 好 第五個 這個 就是官方的 你看 mobilize.com公司的 啊 這個不是官方 注意看喔 有的是官方的喔 所以你不要弄錯 官方就是要付錢嘛 啊 別人 有一些專家 弄出來的東西 是別的 好 那我們點一下這個 參考一下 好 同學你看一下這個網頁 有沒有超簡單 有 好 現在最新 就是現在的網頁風格 就是 簡單 不是很複雜喔 不是那麼 哇 動一塊 細一塊 像日本是那種 小一塊啊 一塊一塊一塊這樣子 不是喔 現在的都是 網頁都是超乾淨 為什麼 走向比較 藝術性的這種 而且呈現的 那 欸 老師 它背後有一個 很漂亮的東西耶 同學 那就是影片嘛 影片特效嘛 啊 你不是會做特效嗎 你做的特效 是在這裡 而且一定是滿版 注意看喔 一定是滿版 有沒有 進來一定是滿版 然後 logo 那 它的那個 公司名字 可以關掉 同學 我們的也可以關掉啊 你不要動喔 看我 你看我畫面就可以了 不要動 看我畫面就可以了 我們在 首頁的 我回到首頁 首頁的 menu 這裡 就可以有 logo 我可以不要有logo 只有品牌名字 我也可以只有logo 關掉品牌名字 剛那個網站 就是關掉品牌名字 只要logo 再來上面這一 就是menu 這個 就社交的 那個logo 我們的都可以做喔 我們的都可以做得到 OK 好 那所以 基本上喔 應該說 Mobilize 它就可以做 全世界最頂尖的網站 都沒有問題的 OK 啊 就是這樣而已 好 那麼 這裡面的字 就是 它想要說的事情 我公司叫 這個 W-I-T-S-E-C 有沒有 然後底下就是它的 slogan 好啊 我們 我們的做法不就這樣嗎 品牌名字嘛 slogan嘛 做法都相同 OK 好 所以 它本身就告訴你 我的喔 就是Mobilize做 啊 這裡面就有一個 叫extension擴充 這裡就是design block 設計的block 如果你一般 你如果不是做 不是學 Mobilize 你看 block的時候 你會覺得這是什麼東西 好 block 你翻成那個中文的時候 區塊 什麼是區塊 因為你沒學過 Mobilize 你只是學 一般的網頁設計 看不懂 啊我們學過 我們一按 它就在這裡 好 那我們知道 我們現在的那個 瀏覽器都可以翻譯嘛 像我現在就把它翻了 我們來溝通進去 就會比較快 它就說 我們給你那個 design block 同學 我們給你的就是 design block 就是這個 design block 沒有 design block 然後它說 我給你 底下有這些 你自己去下載 這裡 它說 我這個擴展 design block gallery 有沒有看到 我們的就是這個 design block gallery ok 好 老師就找到這個 之後去測試 對不對 我要拿來 商業使用跟教學 都要經過測試啊 所以他們這裡有一個 變更日誌 就是說 有哪一些更新 有什麼有問題 除錯啊 講了一堆 好 這裡就告訴我們 我只要裝上這個 就有這個 好 我現在已經告訴你 我給你的這個東西 來自於哪裡 這個網站 好 那它這邊有一個 extension 擴充 好 我們能夠編輯程式碼 就是這個 不然 官方說 你想要編程式碼 想要付錢 啊 這個網站說不用付錢 它這裡有講 然後還有這些 等等 好 那記一下 這個網 這個網站 就是經由你這樣的搜尋 找到它了 當然 那我找的不是 只有這一家網站 還有別的 一大堆 其中 這些 像Github Github就是一個 技術論壇的 就是一些高階工程師 學程式的人 都會放在這個地方 好 那老師你怎麼會認識 Mobilize 我們就是去這裡看見的 不然在國外的東西 我們國內又沒有 怎麼會有 啊 老師在 我們一直在 因為我們 因為網頁設計 是一個與時既進的東西 所以雖然老師 在這邊教了三十年 可是我們技術 要一直進一直進 很麻煩 你不能用 二十三十年前的 技術來教你 這個 我們要自己 老師都要自己 警告自己說 哎 一定要找最新的 所以我們一直被 被逼著一直往前走 OK 好 那這裡面就是這樣 我們去這個技術裡面 去找到它 啊 同學我們來 看一下 好 我們的目標就是 基礎的我們會了 你怎麼成為 高 進階的這個高手 只要再突破這個關卡就好 這個關卡就是 來龍去脈 我們要講一下 好 那這個GitHub 就像一隻貓咪那個 這個GitHub裡面 就是 所有的技術 都在這邊 很多高階技術 都是在這裡 OK 好 這邊可以搜尋 搜尋你要想找到 什麼東西 好 我們認識的東西 都可以這樣子來找 你如果要找程式 就是找code 裡面的 好 這些運用 就從這裡面 然後很多官方 都會從 高階的技術者 都會從 都是丟到這邊來 其實它就是雲端硬碟 只是它 上面可以放程式 它可以放程式 可以討論 有論壇 可以討論 分享 就是這樣子 GitHub 好 同學還記得嗎 我們 你不要動喔 看我畫面就好 我們在帳戶設定這邊 應用設置這裡 我們說 一二三四五六七 七個都打勾 最後一個不要 你不要 請你不要勾 原因是因為 這個 有沒有 它就是說 把你的作品 發佈到GitHub 同學沒有GitHub的帳號 所以你勾了也沒用 我們不想請你勾 原因就是說 你的 我們還不是那麼高手 所以不需要把那個東西 丟到上面去 高手都會把東西丟上去 OK 所以我們只要勾 前面這幾個 因為你如果勾了 它會問你帳號 你又沒有 又登不進去 OK 所以當時我們說 這樣子 好 所以簡單的說 Mobilize 它會與時俱進 老師你為什麼這樣說 因為他們的技術是來自於 很多的高手 幹嘛 去彙整 去建議給他們 建議他們去改變 增強 然後最新技術都會討論 OK 所以它的技術 因為它的軟體 是不用錢的 所以才會激發 有人願意 協助你公司 改進成為最佳 如果你們公司都是收錢的 沒有人會跟你說的 OK 原因就是在這樣子 OK 好 所以 擴充 這樣我們 來源 我們知道了 我們認識了Template 注意喔 這個字也請記住 Theme T-h-e-m-e 好 T-h-e-m-e 就是主題 網頁的主題 好 一樣 我們打開Google 搜尋一下 例如 我們打 html 5 空格 th eme 所以你看 這裡就有了 html5 空格 theme free download 就是網頁主題 比如說 老師 我要去 做一個 接一個案子 然後他們就有一些 什麼什麼什麼樣的 那我就可以 主題幹嘛 給他挑 主題可以給他挑 這樣子 你看他這裡有 1500個 OK 啊 theme就是主題 就是網頁的主題 比如說 服裝 眼鏡行 基金會 點點點點點 一大堆 就是不同的 不同的那個 啊就不同的版型 啊我們都講溝通版型 好 好這樣 我理解了 幾個字 html5 然後 template theme OK 好 其中 網頁 為什麼能夠 進步這麼發展 有一個關鍵 就這個字 好 我們再寫在筆記本上 叫做 bootstrap b-o-o-t-s-t-r-a-p 好 翻成中文的話 就叫做 前導 前面的導航 就像那個導遊一樣 叫前導 bootstrap 就是前導 意思就是說 我的網頁 就是最前端 最頂尖 最頂尖的 前導 bootstrap OK 一樣喔 我們再來搜尋那個關鍵字 好 你看喔 bootstrap theme free 怎麼這幾個字都通的 對 這樣 經由我們這樣的介紹 因為 有同學說 老師 你時間這麼短 這樣我們真的 真的有辦法做網頁嗎 可以的 為什麼 因為 技術的改革 技術的變更 網頁不再是 像以前那樣子 圖法令綱的 一個字一個字 程式碼這樣刻出來 沒有啦 那個已經是 舊時代的東西了 當然現在很多補習班 還這樣教啦 這個我們 這個是因為他們的 教學的人的技術 還沒到那個位置嘛 好 那我們在職業訓練裡面 我們能夠在職業訓練裡面 教學 就是因為我們的方法 都要最先 不然就會被淘汰啦 中信也不會聘我們啦 OK 好 那你可以看到這裡 就是Pushtrap Steam跟 幹嘛 已經最新的了 那我們按下去喔 原來喔 Pushtrap是誰發明的 他是 Twitter Twitter不就不在了嗎 對啊 被馬斯克 詬病了 在Twitter之前 他們兩個工程師 他們一樣要負責做網頁 他們就是這樣子 兩個人好兄弟嘛 在那邊做網頁的時候 就很煩啊 為什麼 每次做又重頭做 每做一個案子 又重頭來 重頭來 所以他們就在想 欸 能不能把 這個方法都差不多啊 那可不可以先把它寫好 好 寫好 都準備在那邊 然後要的時候再叫出來 好 他們這樣的想法 就訂定了後面的基礎 Pushtrap就是這樣而誕生的 然後他們也很好心 他說 欸 我把這個技術 所有程式碼 都放在剛剛的 GitHub裡面 他就放在這裡 然後幹嘛 給那些高階的人 去論壇啊 什麼什麼之類的 這樣子啊 在這邊都可以這樣子的 好 然後 一炮而紅 大家都 欸 這個方式太好了 那 Pushtrap到現在 大概是六年左右 六年還是七年左右 然後 老師 在他的 Pushtrap3的時候 一樣嘛 我們都會去弄論壇 欸 哇 這個東西很好用 好 所以在我的 教學指網裡面 我就會用這樣的概念 去編寫 好 你看喔 最早 傳統的教學 當然就是要先認 HTML5 跟樣式表 跟JavaScript 之後才Pushtrap 啊 我的Mobilize 最後的整合 商業就是這個 那因為我們時間很短 沒有時間啊 所以我們就直接教這個 那Mobilize 就整合了前面這兩個人 成為 只要拖拖拉拉 就可以做網頁的 原因就是這樣 所以 老師 我要不要回到前面 不用 你不用回到前面 直接學他就可以 啊 我現在就是在 利用這個課 把那個關係 接起來 所以就不用擔心 好 那 這個 就在講 Dreamweaver 就不用講Dreamweaver了 為什麼 因為 它 是最早前的 那種做法 也就是說 一二十年前 你一定要用學Dreamweaver 不學Dreamweaver 不然沒辦法做啊 可是經過這樣的演變 有沒有 啊 就有其他軟體了 而且不用錢 啊Dreamweaver要錢 OK 就會這樣的改變 好 那 我們理解了之後 現在回到我們的 藝術展覽這個頁面 這個版型 就是有剛剛那個 人家整理好的 而它是 它們本身又是 網路上收集來的 也就是說 經過好幾首 彙整 成為這樣的一個 系列 成為一個 這樣的系列 而你 對不對 我們常講嘛 前人種樹 後人乘涼 我們就是後人 我們只要能乘涼就好 前面呢 我們不用懂 我只要怎麼運用就好 OK 所以第一 你要有一個能力 找到它 喔 Image Video 它 啊 在我們的 這個 影片是用Video這裡 啊 現在我們要用這個 它叫手風琴 手風琴 啊 我就能夠加入進去 好 這就是我們所謂的 會乘涼 對吧 好 接下來 這個 這個不行喔 這個是要去付錢的 這個 叫 ED Block 前面的英文字 叫ED Code 這 ED Block 啊這個 ED Block 就是老師找到那個網站 他們可以有 編寫那個程式嘛 那個 工具 好 這個工具 因為 加上去你就有這個能力了 好 剛剛那個網站 按右下方的加 選到這邊 你有沒有看到 W-I-T-S-E-C 剛剛我們 剛剛老師導讀給你看 那個網站就在這裡 好 那我不只去這個網站嘛 因為我們要做為 商業專業用 不可能只找一個人 底下這個 這個 總共一二三四 含這個總共有五個 所以老師找了五個網站 拜訪了五個網站 然後 各有千秋 同學你看一下 按這個 這裡有 按這一個 就這一家的 你看這個有設計的那個 波浪型的 加下去就很好用喔 好 你會用 用在你的第二個席座 喔 那我們就加分 為什麼 因為我們在這一堂課 就告訴你 怎麼運用 老師給你的東西 你會運用 當然你就是學好了嘛 學得很好了嘛 OK 好 這裡 另外一家的 這邊也有 像這個 MobiShop 就是購物車 但 Mobilize 只有前臺 沒有後臺喔 後臺是要資料庫 阿這個 它是做好了 前臺的 程式 後端要接資料庫的 阿 老師你會不會教 不會 在我們這裡時間不夠 沒辦法教 但 這一家公司 有這個版型 好 OK 好 那底下的 User Block 就是老師自己給你的 我做好的東西 給你的 阿 你都可以運用在你的 第二個 期作裡面 就是你的個人作品 裡面的 加運用 你要會運用 就達到目標 我的教學目標就是 同學要能夠運用 快速做出來 快速做 成本就壓低 例如 老師 網頁設計到底行情是什麼 網頁設計 沒有行情啊 蛤 網頁設計沒有行情 沒有啊 網頁設計 就是你情我願而已啊 我們說 網頁一個網站 一百萬貴不貴 便宜啊 為什麼 以我們中興為例 那個網站 哇 好貴的 怎麼可能一百萬做得起來 做不起來啊 權什麼都要用啊 系統都要用啊 還要維護啊 老師 一個百萬好貴喔 一般公司不可能付得起 對啊 阿 老師 網頁一萬塊貴不貴 很便宜啊 為什麼 因為 你一個小時就做完了 一個小時賺一萬塊 很好賺啊 所以網頁 基本上來講 沒有 它的那個範圍 非常非常的大 啊 只有一件事情 就是 你怎麼取得客戶的信任 你的報價 客戶認為 是非常值得 就這麼樣子 所以你要給他感覺 他花十萬塊 請你是非常值得 他花三萬 你就會覺得你好貴 你就代表 你給他的感覺不好 他覺得三萬塊好貴喔 這就是這樣的概念 好 這樣我們理解了 好 那我們中間稍微休息一下 等一下我們再 進行呢 進一步的 這個程式編輯