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

好 依照前面的 我們已經具備了 能力 什麼能力 我再彙整一下 從別人的block版型 同學這一點超重要 為什麼 因為我們想要成功 不要自己從頭摸索 那樣太累了 這樣 為什麼就是說 網頁設計 大部分的學校 都有資管系 都有在教 對不對 從國中 高中 大學 研究所 資訊都在教 為什麼成功那麼少 因為 你都從頭來啊 什麼都從頭來 太累了 所以我們的概念是 你要快速成模型 所以我們剛剛 前面的課也教你 HTML五空格template 就可以找到一堆的模型 然後你拿到模型 再來幹嘛 更改 你第一件事情要先看懂 消化才能變更 所有人類的模式 都是這樣子來的 所以我們從這個來 之後 我們能夠進去看懂 看懂怎麼看 把它歸類就好了 所有事情都分類 分類 再分類 這樣我就有辦法 仔細知道誰是誰 所以從這裡 知道說 原來你們就是這樣子 image 1 2 3 4 5 而且他很好心 還怎麼樣 一階梯式 對不對 階梯式排列 這樣我就懂了 那我就copy 注意喔 我們copy一定是 最尾巴那個人 一定是抓最尾巴那個人 copy貼上 然後呢 你只要改編號就好 所以寫在你的筆記本上 我們最大的本事 就是copy貼上 幹嘛 再來改編號 絕對不從頭寫程式 注意喔 只要你從頭寫 那就是錯 那就是做錯了嘛 幹嘛要從頭寫 那就是做錯啦 對不對 林老師教我們 最快的方式 看懂別人 運用過來 copy貼上 修編號 就這樣 上面的這個也是 上編句 下編句 我只改編號就好了 加到它的數量而已 這個是改編編號的順序 好 所以我們第一個從這裡來 注意喔 這是前端控制 再來就是內容 不然你要控制哪裡 所以內容也要copy貼上 一樣改編號 那這裡比較多一點就是 它多了一個這個 好 那我們要再加強那個理論喔 同學 這個英文叫class 寫在你的筆記本 你把它翻譯呢 叫做類別 分類的類 哪一類的類 類別 分別的別 我舉個例子 老師這什麼東西啊 我舉例子喔 同學 你叫陳某某 就讀我們中心的多媒體班 好 多媒體班就是class 類別 而你陳某某 就是ID 個別 ID就是個別 所以我們講說 你的身分證ID編號多少 就是你個別 你那個是你唯一的 就是你個別 啊class就是類別 好 那寫在筆記本上喔 那class呢 在樣式表裡面 要記載的時候 就變成一個點 有沒有 你看這個 來我們舉例喔 A5 A5的前面 A5這個字的前面 有一個小小的點 老師我以為它是逗點 不是喔 它是一個點黑點 這個class 轉換成語法的時候 就是一個小點點 那ID呢 轉換成為 那個化 那個程式碼的話 就是警號 好 那你在這裡都看不到ID Why 因為它是一個模板 模板就是不會是個別的 都是通用的 我舉例喔 同學你這一期就讀多媒體班 你結訓的時候 我們中心會再招新的一批學生來 那它一樣是class 是同一個名字 還是多媒體班 這樣可以理解嗎 所以 它呢是一個類別 class 在這邊寫中文 寫英文 CALSS 可是對照成 樣式表的語法 叫做點 所以你看喔 這其實是兩個人 一個叫Box 一個叫A6 好 注意看喔 Box在前面這邊 Box在前面這裡 啊A6在這裡 我們剛剛 copy貼上改的 叫A6 原來老師 這個是指兩個人 寫在你的筆記本喔 記一下這一段 這一段喔 我們記一下喔 class 等號 雙引號 Box空格A6 你就指說 這是兩個對象 一個叫Box 一個叫A6的 這兩個對象 你就要筆記這樣做 你就會知道 這是兩個對象 是兩個人就對了 不是一個人喔 那因為語法要一次講 例如我現在講說 陳同學 林同學 請你們站起來 一次講兩個人 所以這個語法 就是一次講兩個人 然後對照這個樣式表 那老師 前面我剛剛做了 把這個Box5 copy然後貼上改6 改A6 為什麼圖不會出現 因為你的樣式表沒有出來 樣式表沒有出來 注意喔 這個控制這邊 不是叫Image6嗎 這裡有一個Image Image Value 6 這個 它就沒有出現 為什麼 因為這個對照這裡的名字啊 這個名字就對照它 這裡的名字 就是對照這個名字 那因為你沒有寫 就圖就不會出現 雖然在前端控制出現 你的樣式表沒有講 沒有A6 好 現在 我要挑戰 你到底有沒有理解喔 同學我們要做第七個 第七張圖 現在客人說要有七張圖 我要你挑戰第七張圖 OK 好 所以來了 你能做七張 我在評分的就知道 啊 這位同學上課很認真 所以一定是加分嘛 現在要第七張囉 現在 再來一次喔 第七張 老師 那你剛剛說從最尾巴的開始Copy 對 那我就從A6囉 Copy它 那我知道 一定是Enter 下來一點 然後我們一樣要退縮進去 我貼上 因為那個很長嘛 我說水平這邊拉回來 然後這邊改 7 因為都退縮了 你不要看錯喔 這邊 Image 對不對 這裡後面的數字 英文字你不要動喔 改成7 那麼 我的前端控制就搞定 捲捲捲捲捲 捲往內容這邊的Box6 我就Copy 那我就知道嘛 它的屁股後面Enter往下 Ctrl V貼上 更改為 7 A7 Image 7 其他都不動 但我們想要讓它字 也能夠確認是7 所以我把這個字加一個7 當然喔 你也可以把這個字內容 全部改掉 變成7777777777 OK 好 這個是完成第二個步驟了 第三 因為它有兩個人 要控制兩個人 那Box是不可能改的 那我們來改A7 可是樣式表裡面沒有A7 所以我們從A6裡面 因為要多出來嘛 多出來就是增加嘛 所以要拷貝別人 Copy A6 貼上 改為A7 老師 那我照著打何必呢 你不要浪費時間 再打不是長一樣的 你幹嘛重新打 所以就Copy貼上就好了 好 其他的不動喔 只要改編號 你們看就是Copy貼上改編號 然後存檔 好 出來沒 有 你的第七張的圖 長一樣 跟它那個長一樣 所以你要換圖 第七張圖有沒有 按下去 換 圖 所以就去找我的實習的素材 七張圖 還好我有其他張嘛 所以我要來放第七張圖 而且你看7777 你有沒有發現 底下這個框框比較短 別人都滿版 它比較短 原來為什麼 喔 你字很長就滿版 字很短就字的那個長度而已 到多長就是多長 原來是這樣子喔 那這個框框喔 顯示字的這個地方 是有點半透明 然後我們這個是圖 現在我已經搞定囉 第七張沒問題 那當然第八第九第十第二十 都嘛可以 所以不要再做了 我已經會了 第七張那就夠了 因為開始我從五變六 不確定 自己到底真的有沒有辦法 把對方的東西變成自己的嘛 所以我要變成增加第七 我確認第七我都會了 那就不要再做了 而且 把這個喔 存到有沒有 存成user block 幹嘛 欸 你的那個第二個席座可以用啊 裡面拉進去就有七個了啊 對不對 這個席座可以用耶 這樣子就是 把別人的模板 變成經由我們看懂 而且編修 然後就變成自己的 而且是變成幹嘛 用在下一個案子都可以用 這樣子你就職業級的啦 我的程度也都到這樣而已啊 就夠啦 就能做案子啦 這樣你就跟我一樣的程度啦 但來了 我們說過喔 要美啊 老師這樣不夠美嗎 哪有美 你那個圖都小小的 底下還空了一大截 這樣子不好啦 可是老師 它原本的版型 高度就這麼高耶 那改啊 對不對 你現在喔 就差那麼一點點 讓它更美嘛 所以來了 現在要講重點了 也就是說 我本來改了三個嘛 圖已經出現了 現在改第四個 寫在筆記本了 我現在要把高度變高 高度為什麼要變高 因為我要來適應我的版面 我要高度變高 什麼高度 注意要寬不用變 高度我要變高 圖的高度我要變高 好 現在就是第四個修改 高度 老師那高度在哪 所以我們要再解釋喔 高度 高度英文字叫做 high 同學這裡都沒有 這裡都沒有 這裡都沒有喔 為什麼 寫在了筆記本 高 寬 大 小 通通都是形容 形容都在樣式表 樣式表 樣式表都來形容什麼 顏色 多高 多寬 多大 樣式表幹的事情就是這個 所以你看 什麼顏色 還有多大有沒有 寬度99 990pixel 然後什麼顏色 RGB什麼顏色 有沒有看到 還有 對齊靠左靠右靠中 就是樣式表 高 寬 大 小 字的大小 顏色 背景色 背景圖 通通都在樣式表 只要你知道這個概念就好了 好 所以我們從這裡看喔 誰有高 他 從第一行 你從最上面看下來 high 高 300 那我們記一下300 好 可是我這樣講 你可能會頭暈對不對 好 老師已經做好講義了 在老師的網站上 課程教材的 綜合數位講義區這裡 我們現在在學什麼 我們在學Mobilize 所以你就看Mobilize 好 那 我 講義是老師製作的 所以看這邊 上面就是官方的講義 這是老師自己做的 我們上課需要的時候做的 好 其他這些我們都有提過 或是還沒有提的 你就可以自己看 然後這邊 老師要上這門課 想一想 我還是做個講義好了 免得上課的時候 同學我講他沒掃筆記 他就忘記了 好 所以我就做好 昨天才做的 好 點兩下 你如果覺得字太小 你可以把它 底下這邊加號 它就變大一點 好 現在我就來講 就是樣式表的原始內容 然後要改什麼地方 來改 第一條先看這一條 就在手風琴這一項 現在對照這個講義 手風琴這個名字 有沒有 這個就是手風琴名字 這個名字 我們剛剛有解釋 前面有一個點 就是在這裡 class 手風琴 就這個 所以它控制底下所有的內容 然後在這邊宣告說 它的高300 同學 你先把它變成400 存檔 真的變高一點了 真的變高了一點了 老師它有變400嗎 對喔 來 打開螢幕兩尺 老師什麼東西 來我給你的 Web Design Tool工具包裡面 Tool裡面 有個螢幕擷取軟體 Pick Up 你把它打開 這個很好用喔 它有多種功能 它可以吸管 我們前面學過對不對 抓取那個 網頁的主題色 這裡 還有個功能 因為它遮住我的工具了 我把它移開 按右鍵這邊有一個 尺規 OK 你把它打開 就有螢幕兩尺 你可以關掉這個 用螢幕兩尺 這邊可以旋轉 水平 旋轉 這邊是伸長 這邊是縮短 很好玩對不對 這是關閉 我現在要這樣轉過來 移動 按住左鍵移動 這樣子量它 老師真的是400Pixel 不會騙人 你不可以拿那個 公分尺來量喔 桌上有公分尺來量 拜託那笑死人了 我現在給你一個工具 就是網頁設計師專用的工具 可是你們家電腦都沒有 這裡面 是藏在這個軟體內 螢幕兩尺 做網頁設計師要這個 螢幕兩尺 OK 你紅色的指標 就會指在哪邊 而且它都會出現刻度 現在 玩一次喔 進來喔 來 現在我們把這個 變成 剛400嘛 好 我們現在把它變成600 然後存檔 真的變600喔 來 間距囉 底下也有間距喔 我們要調間距囉 這邊TOP 調間距有沒有看到 你不要這樣 這樣的話 上面的選單都被你遮住了 擠進去了 所以你要距離一點點距離 那到底是多少呢 你要看底下 你要用這個發佈 來 瀏覽器觀看 但你看喔 因為我們現在這個網站 大量的圖片 所以要發佈喔 時間都很長 眼睛 等一下可以用眼睛 眼睛就是不用存檔 先讓你看 OK 所以當你的網站 如果圖越來越大 每次要發佈一下 就要搞很久的時候 我們就會用眼睛 建議先用眼睛 等正確了 才用發佈 好 我現在已經按發佈了 就等它一下 好 那我的評量的重點就是 你有辦法用這個版型 增加數量 再來調高它的高度 當我都能夠控制到這樣 那個版型的美感就有了嘛 你看 我現在已經瀏覽器看了喔 哇 老師 我這樣的話 上面這個有對不對 底下還空很多耶 注意喔 底下還要滑進去的時候 對啊 老師 滑進去怎麼縮短了 因為你剛剛只改一個嘛 這個滑路 滑鼠 滑過去這個你還沒改 所以要改喔 再來 我們這個寬喔 窄窄的有沒有發現 我應該到這邊 到這邊騎 然後我的照片才會變大 因為你這邊窄窄的 這整體的寬喔 也就是說這個整體寬 注意看你這個整體寬 才這麼窄啊 我照道理啊 我應該跟上面那個差不多寬 上面到這邊 上面大概要到一千 三百多pixel 對不對 你那個太窄啦 那怎麼辦 好 依照講義這邊 講義我這裡就寫 Max 最大的Width 它是 990pixel 那我們剛剛不是量了嗎 大概一千三百多 你這樣打 太亂了 而且如果東西 變成它用平板 或是桌機 筆電來看的話 你這樣子不就完蛋了嗎 所以我會建議 用比例 100% 把本來它指定的數量 改成100% 好 現在 請來修改 一樣就是在這一個 注意 後面有一個分號 你不要弄到 把它刪掉了 990pixel 這五個字 重新框好之後 打上100% 一定要有%喔 OK 然後 存檔 嘿 你看它變寬了 好 相對它變寬了之後 高度 同學我們再量一下喔 我再量尺規 一樣這裡旋轉 移動 對齊這個上頭 再來往下量 老師 一樣是600 對 高度不會變 因為我們是指定的 所以高度絕對不會變 但感覺比剛剛圖還大 那是你錯覺 因為你是寬變寬了 每一個的可視面積 變大了而已 喔 這樣子 再來喔 這個高度我們已經知道了 我就把它關了喔 接下來就是 滑進去 你正常的時候是改了600 但是它滑進去的時候 縮短了 所以我們要去改 好 按照講義喔 這裡 .box 就是原來那個名字 但它這裡寫了冒號 hub hub是指滑鼠滑進去的樣子 注意喔 box是原本的名字 冒號 滑入 就是指它的情況 被滑鼠滑進去的時候的情況 它的高 是400 原來box是300嘛 高是 多出它100px 所以它是400 那我在這邊就改成700 為什麼 因為我們原本這裡改成600了 我要比它多 往下拉100px 好 所以 厚 原來就是找到那個人 box嘛 hub 400 700 老師為什麼改700 因為我原本的圖已經改成高度600 我希望它往下拉 把我的那個註解說明文字 往下 多出100px 所以是700 700是這樣來的喔 不是亂打喔 老師你說700我就打700 不對 是因為我的上面 box 這邊手風琴的圖的高度是600 然後我的盒子 要多100px 所以是700 好 存檔 滑進去 你看多出來了 100px 所以我要預留這個量喔 滑鼠滑過來那個量 它的比例 對不對 那我還可以上面怎麼樣 tab還可以多一點點 多一些 然後按這個眼睛 注意看喔 眼睛就不存檔喔 所以它速度跑很快 然後來我的瀏覽器看 嗯 這樣的比例上下的間距 跟底下間距 就可以 老師我覺得可以再下去一點 可以啊 那同學 你把圖改成 700 600 滑進去變800 好 來 現在我們再玩一次喔 好 老師講一寫600對不對 你幹嘛一定要照著我想的 你懂了啊 現在600嘛 我就改成700 那我知道box half 這就是800 存檔 喔 變大了喔 那變大了之後怎麼樣 我的tab 就要短一點了 就要上去一點了 因為所有東西都是與時俱進 互動關係 所以 有沒有 都是互動關係 有沒有看到 老師那要這麼大嗎 要 因為我們越大越好 為什麼 因為要讓網友看到 最高解析的產品 欸老師 你那個是那個 那個桌機對不對 要是手機咧 放心 手機就變這樣 手機是變這樣的 都在手機範圍內 哇怎麼那麼強 對 因為這個就是這個 它的版型 它的模板的強度 就是這個樣子 如果要從頭寫語法 我講到天黑了 你都還不懂 所以不要那樣子玩了 就是我們是用這樣的方式 來學習 速度才快 纔能夠進入 直接進入產業 幹嘛從頭來 因為你 從頭自己寫一個 又沒有多強 英文字都長一樣 語法都相同 那你幹嘛自己寫 好所以我們 最重要的重點是 教會你應用 就算在平板都長這個樣子 在平板都長這個樣子 都很漂亮 都是高解析 OK 好現在 我們說美 還要再更美嗎 哪裡更美 有 把那個陰影有沒有 再強化陰影一點 因為它有點半透明 你知道我們透明度 是0到1 1是不透明 0是全透明 這個0.47 大概一半一半 我們要你把它加深 變成0.8 OK 變成0.8 好 那個在哪呢 這邊 注意看 它有一個英文字 叫做box shadow box shadow就是陰影的意思 好那陰影 同學你在什麼 學Photoshop 以拉 不是有做過陰影嗎 我們大部分的陰影 都做在右下角 所以 這個就是座標 對不對 你陰影的錯位的位置 座標 OK 顏色 這就是顏色 這個就是透明度 好 所以 它寫RGBA 老師 什麼是RGBA 你前面不是教RGB而已嗎 怎麼多了一個A 同學寫在你的筆記本 好 A呢 叫alpha透明度 正常的標示 是不是RGB而已 對 但是在網頁裡面呢 要讓它更漂亮 要透明 所以又加入第四項 叫做alpha透明度 取它的前面第一個字 A 那alpha的刻度呢 是0到1 RGB是0到255 這樣專業術語 你就懂了 好 所以這邊 0 就是黑的嘛 都沒東西啊 所以黑色的嘛 所以它陰影是黑色的 然後呢 透明度是半透明左右 同學 你把它改成為0.8 如果你要改顏色對不對 顏色的話 變成是可以 這樣子調整 注意這一節 這一節就是透明度 有沒有看到 這一節就是透明度 你看上面就是在調整了 上面就是調整了 這樣子就是低透明 透明度很高 這樣子就是 比較不透明 它會 小數點下面三個字 好麻煩喔 所以我會建議你 直接打字啦 0.8就好了 好 這邊一樣 Box 這邊 0.4的都把它改為 0.47的都把它改為0.8 OK 我們這樣子看 都已經改完了 然後 儲存起來 你看陰影 深度就比較深 深度就比較深了 你那個 調那個Top 這些要這樣調 我們的深度就比較深 好 同學 剛剛在那邊調什麼黑色 有沒有 就在這邊 叫做 Background Color 黑 同學你把它改成別的顏色 試試看 假設 桃紅色 原來這個是這個 這個 注意看喔 這個半透明 這個顏色都變成桃紅色 它不是陰影喔 我再講一次 Background Color 這一個 是解說 文字解說的 顏色的字 啊 你呢 要盡量跟你的主題 就是這個 區塊的背景色 很接近 這樣起來 才漂亮 譬如說 我現在背景色調了 對不對 然後我的Background 這邊 選到這邊 有沒有 Background Color 老師 怎麼兩個都是Background Color 對喔 所以這個Background Color 應該叫做 說明文字的顏色 底色 說明文字的底色 這個 這樣子 它有 這個透明度 你調好之後 你看 這個說明字跟底色 就很接近 但因為我是有半透明喔 我這邊有透明喔 所以你可以看得出 顏色的區別 然後我們就會 比較同一個系列 它的預設是黑色的 有沒有看到 那感覺上呢 它就覺得 跟你這個版型 比較不融 所以我就會建議你調整 當然你懂得調 那我就要給你加分了 對不對 因為你的技術能力 已經跟我同等級 對不對 好 這樣子 瞭解了喔 好 接下來就是文字的顏色 文字的顏色 那字裡面 就Copy貼上這個文 就不用教你了 你把你的那個文 這個文案 Copy貼上 那我就不教你了 那我現在教你的是顏色 老師那個顏色怎麼調呢 要去程式碼了嗎 不用不用不用 就在這邊 視覺這邊就可以調了 假如我用咖啡色 深咖啡色 好調好了 你看 我的字就深咖啡色了 好那白色的字呢 我要調 別的顏色 OK 好我要灰一點 這樣就調好了 原來是在這邊調 老師 怎麼一下在前 一下在程式碼 一下在這個 前臺這邊調 當然啊 網頁的變化 就是千變萬化 啊你要成為一個高階設計師 經過這樣的訓練 你就可以懂 喔 前端界面沒有 就是在視覺碼 視覺沒有 就是在程式碼 就三個地方而已啊 你還能跑到哪裡去 對不對 喔所以我們從這裡 你看我的那個陰影很深喔 很深喔 就要強化它的立體感 好現在 我突然 我的感覺 本來是那咖啡色 我突然一個感覺 完全 大改變 我要變成一個 藍色系 請問我哪裡要改 字嗎 這個啊 對不對 你那個改了 我這個就要改啦 那這裡有個背景 注意看喔 這個顏色 我改成 字就改了嘛 這個字 顏色 我就改了嘛 老師可是這個咧 這個背景咧 就在這裡嘛 前端控制這邊嘛 注意看喔 你前端控制按的時候 這樣子 這個嘛 這個纔是嘛 那我就有辦法 調整了嘛 你看它就變這樣了嘛 就一系列了嘛 對吧 所以 色調一動 我就能動 好 把這個最終結果 存起來 以這兩個為例 這個最美 這個是改一半的 那我就不要用了嘛 我要留下最美的那一個 當作版型嘛 當 我的 第二個席座 好 我現在模擬喔 你的第二個作品 或是 接案的第二個案子 打開 按 右下方的 橘黃色的加 這個就可以拉進去 我 下一個作品的 編輯內容裡面了嘛 啊 把圖換掉 啊不就是了嗎 對不對 老師 這個的話 可以換上 我的這個作品 幾個作品嗎 當然啊 就是要讓你這樣換啊 啊文字就改啦 說明字都在這邊了啊 對不對 這樣子改完之後 哇 你的那個作品就很漂亮了 而且你可以看到喔 整個 效果就很強 那你上面呢 有menu的位置要空著 這樣子 下拉 陰影都會有 不要 不要弄成 底下這樣收縮喔 被擠到了就不對了喔 這樣子我們才會有 加分喔 OK 好 我們這個部分喔 強化的部分就到這邊 這樣的話 你就整個版型就會了 運用就OK 沒有問題了