作業二解析：讓網頁動起來

在作業一的歌詞網頁上「加料」：圖片、透明與漸層、動畫、jQuery 互動、圖示字體與影片。每個效果都有互動實驗室可以先玩，再跟著 9 個步驟自己打、即時預覽、自動檢查，卡住時由 AI 提問產生器協助。

4 hours 第六–七週 CSS3 · jQuery 含 AI 學習法 步驟 0 / 10 作業檢核 0 / 7

01先看目標：讓歌詞網頁更有「感覺」

作業二同樣要針對歌詞意境，加入圖片、jQuery 動態語法、CSS3 進階語法與圖示字體，讓網頁有更多效果，藉此認識更多樣的語法與功能。

jQuery 動態語法

至少放置兩項，例如「fadeIn 淡入效果」與「tabs 標籤轉換頁」。

CSS3 語法

透明度、漸層色、漸層加透明、文字陰影、區塊陰影、圓角、CSS3 動畫。

圖示字體

在適當的地方加入圖示字體（icon font），讓網頁更活潑、更有設計感。

作業範例：【作業 02｜範例】、【作業 02｜學校空間範例】。更多 jQuery 與圖示字體說明，請參考 ［講義 06］jQuery 動態網頁初探與圖示字體。

沿用作業一的心情配色（會套用到後面的步驟）

互動：我的作業大概會拿幾分？

依講義的評分標準，選擇你目前（或預計）的完成狀況，看看對應的分數區間。

02步驟工作台：一步一步加上所有效果

從「作業一完成版」出發（步驟 0），每一步加入一種效果。用法和作業一相同：對照答案（新增行高亮）→ 我來打（即時預覽＋自動檢查）。鍵盤 ← → 可切換步驟。預覽中的圖片、jQuery、圖示字體都需要網路連線。

0

    index.html
    
                    
                    
    綠色高亮 = 這一步新增或修改的行｜「對照答案」是唯讀的：直接點一下程式碼，就會切到「我來打」並載入本步答案，可以邊改邊看右側預覽。拖拉中間的分隔線可以調整左右寬度。
    
                  
    
                  
    
                    
    預覽 index.html
    
                    
    
                  
    
                
    
              
    

              
      

              

              
      
                
                進度會記在你的瀏覽器　·　
                
              
      

              
      

              

              
      
                
       這一步卡住了？產生一個好問題問 AI（自動帶入目前步驟與程式碼）
                  
      
                
      
                
      提醒：範例是自編文字；請不要貼完整的版權歌詞給 AI。
      
              
      
            
      
          
      

          
          
      
            
      03圖片：找圖、健檢、放進網頁
      
            
      沒有適合的自己拍攝照片，可以使用專業免費圖庫取得高清圖片。但圖片太大會拖慢整個網頁，放進網站前請先檢查。
      
            
      
              
      免費圖庫
      Unsplash、Pexels、Pixabay。下載後留意授權說明；講義原本建議的 Unsplash 仍可使用。
      
              
      壓縮與轉檔
      Squoosh（Google 的線上壓縮，可轉 WebP／AVIF）、TinyPNG。
      
            
      
            
      講義的規格滿版底圖寬度需超過 2000px，但檔案要小於 1MB，否則影響網站流量與載入速度。一般內容圖片 1200px 左右通常就夠。
      

            
      
              
       互動工具：圖片健檢（圖片只在你的瀏覽器分析，不會上傳）
      
              
              
        還沒有選擇圖片。
        
            
        
            
        
              
        用在網頁的寫法
        <img src="img/cover.jpg" alt="描述" width="1200" height="600">
        放在 img 資料夾；alt 寫圖片內容的描述，盲人讀屏軟體與圖片載入失敗時都會用到。
        
              
        格式怎麼選
        JPG／WebP：照片首選。PNG：需要透明背景的圖示或截圖。SVG：標誌與簡單圖示，放大不失真。
        
            
        
          
        

          
          
        
            
        04CSS3 進階：圓角、陰影、透明、漸層、動畫
        
            
        下面把講義裡的 CSS3 語法做成可以玩的工具。先看語法重點，再用混色器與動畫實驗室調出你要的效果，複製程式碼貼進 style.css。
        
            
        效果語法與說明
        
              
        圓角border-radius: 20px; 四角皆 20px
        border-radius: 10px 0 10px 0; 依序為 上左、上右、下右、下左
        
              
        區塊陰影box-shadow: x y blur spread color inset;
        x＝水平位移、y＝垂直位移、blur＝模糊、spread＝擴散、inset＝內陰影。例：box-shadow: 1px 1px 3px 2px rgba(51,51,102,.5) inset;
        
              
        文字陰影text-shadow: 1px 1px 1px #000;（x、y、模糊、顏色）
        
              
        透明度rgba(102,153,255,0.5)：R、G、B 加上 Alpha，1 完全不透明、0 完全透明，只影響顏色。
        opacity: 0.5;：整個元素（含文字、內容）變 50% 透明。
        
              
        漸層background: linear-gradient(#B8E7F3, #43C3E4); 由上到下
        background: linear-gradient(rgba(123,219,241,.8), rgba(0,91,112,.8)); 漸層加透明
        background: radial-gradient(#B8E7F3, #43C3E4); 放射漸層
        
            
        
            
        顏色轉換可以用 MDN 色彩選擇工具，輕鬆在 HEX 與 RGB／RGBA 之間轉換；或用下面的混色器。
        

            
        互動：透明與漸層混色器
        
            
        
              
        
                
        顏色一顏色二
        
                
        顏色一透明
        
                
        顏色二透明
        
                
        角度
        
                
        
              
        
              
        
                
        棋盤格＝透明處
        
                
        CSS
        
              
        
            
        

            
        互動：CSS 動畫實驗室（@keyframes）
        
            
        動畫只需要定義兩個部分：① 動畫的最初與結尾（@keyframes，用百分比或 from／to）；② 動畫轉變的方式（animation-duration 時間、animation-name 名稱等）。
        
            
        
              
        
                
        
                
        時間
        
                
        延遲
        
                
        重複次數
        
                
        節奏
        
                
              
        
              
        
                
        夜裡的風
        
                
        style.css
        
              
        
            
        
            
        新做法｜尊重「減少動態效果」有些使用者會在系統設定打開「減少動態效果」。請加上 @media (prefers-reduced-motion: reduce) { … animation: none; }，這是現在專業網站的基本做法。
        
          
        

          
          
        
            
        05jQuery 動態語法：選取元素，再做動作
        
            
        作業至少要放置兩項 jQuery 動態語法，例如淡入效果與標籤頁。jQuery 的核心只有一個模式：$('選擇器').動作()——先選到元素，再對它做事。
        
            
          
              
        1. 引入 jQuery在 </body> 前加入 <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>。（原教材是放在 head，並同時引入 jQuery UI 的 CSS 與 JS。）
          2. 
              
        2. 等網頁準備好寫在 $(function () { … }); 裡，代表「網頁載入完成後才執行」。
          3. 
              
        3. 選取＋動作$('main').hide().fadeIn(2000);：先把整體 .hide() 隱藏，再用 2 秒（2000 毫秒）.fadeIn() 淡入出現。
          4. 
            
        
            
        互動：jQuery 效果操作台（右邊是真正執行 jQuery）
        
            
        
              
        
                
        
                
        時間長度
        
              
        
              
        
                
        
                
        你按的效果對應的程式碼
        // 點選左邊的效果，這裡會顯示對應的 jQuery 程式碼
        
                
              
        
            
        
            
        標籤頁（Tabs）的邏輯
        
            
        原教材使用 jQuery UI 的 tabs 外掛（需另外載入 jQuery UI 的 CSS 與 JS，再把 style.css 放在 jquery-ui.css 下方以覆蓋樣式）。現在建議自己用 jQuery 寫，因為只需要記住一個流程：
        
            
        STEP 1
        被點擊
        $('.tab-nav li').on('click', function () {…})
        STEP 2
        全部清除
        $('.tab-nav li, .tab-panel').removeClass('active')
        STEP 3
        只亮起被點的那一個
        $(this).addClass('active')，再讓對應內容 addClass('active').fadeIn()
        
            
        新做法｜jQuery 的現況jQuery 仍被大量既有網站使用，語法簡潔適合入門互動觀念；不過新專案多半改用原生 JavaScript（document.querySelector()、classList、addEventListener）。學好「選取 → 動作」的邏輯，兩種寫法都能理解。想比較？到第 08 章「語法速查」複製問法，請 AI 幫你改寫成原生 JS。
        
          
        

          
          
        
            
        06圖示字體：用字體畫小圖示
        
            
        圖示字體（icon font）是把圖示做成「字體」，所以可以像文字一樣用 CSS 調整大小、顏色。作業使用 Font Awesome。
        
            
          
              
        1. 引入 Font Awesome在 head 加入：<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">。
          2. 
              
        2. 挑選圖示用下方挑選器，或到 Font Awesome Icons 搜尋免費圖示，點進去複製 HTML 語法。
          3. 
              
        3. 貼到想出現的地方例如 <i class="fa-solid fa-music"></i> 歌名，並用 CSS 調整大小與顏色。
          4. 
            
        
            
        新做法｜不一定要註冊 Kit原教材是註冊 Font Awesome 帳號、建立 Kit 後，把專屬的 <script> 貼進 head。現在用上面的 CDN 連結就能直接使用免費圖示，作業更簡單；若想用 Kit（可選擇圖示子集、載入更快），也可以註冊後貼上 Kit 的程式碼。另外 Bootstrap Icons 也是免註冊的好選擇，本站就在使用。
        
            
        互動：圖示挑選器（需連網載入圖示）
        
            
            
        
              
        
              
        
                
        
                
        大小
        顏色
        
                
        貼進你的網頁
        
              
        
            
        
          
        

          
          
        
            
        07嵌入 YouTube 影片
        
            
        傳統做法：到影片頁面 → 分享 → 嵌入 → 複製程式碼 → 貼進 HTML。下面的產生器更快：貼上網址，直接產生符合現在做法（隱私強化、延遲載入、自動縮放）的程式碼。
        
            
        1. 複製影片網址進入要放的影片，從瀏覽器網址列複製（或按「分享」）。
        2. 貼到產生器自動產生嵌入程式碼，並即時預覽。
        3. 貼進 HTML貼到想放影片的位置（如 MV 標籤頁），以 <p> 或 <div> 包覆；CSS 一併放進 style.css。
        
            
        
              
         互動工具：YouTube 嵌入產生器
        
              
              
        
              
              
              
        
              
        
                
        HTML + CSS
        
                
        
              
        
            
        
            
        新做法｜三個小升級① youtube-nocookie.com：隱私強化模式，在使用者播放前不寫入追蹤 Cookie；② loading="lazy"：捲到才載入，網頁更快；③ aspect-ratio: 16 / 9：取代舊的 padding-bottom 撐高度技巧，影片自動隨寬度縮放。
        
          
        

          
          
        
            
        08AI 學習搭檔：更快理解 jQuery 與 CSS3
        
            
        作業二的語法比較多，也是最容易「複製貼上卻看不懂」的一份作業。請記得：AI 用來加速理解，不是用來代做。看不懂的程式碼，就算畫面正確，下次也改不動。
        
            
        
              
        你要自己能說明
        每一個效果「選到誰、做什麼動作、為什麼放在這裡」。期中、期末與小組作品都會用到。
        
              
        可以請 AI 幫忙
        用比喻解釋 jQuery、說明錯誤訊息、比較兩種寫法、調整數值、改寫成原生 JS、出練習題。
        
            
        
            
        每個新語法都走「4 步學習循環」
        
            
        
            
        語法速查＋AI 問法對照
        
            
        
              
        
              
            
        
            
        
            
        語法白話意思＋範例問 AI 的句子
        
            
        AI 給的 jQuery／CSS 要小心驗證AI 常混用不同版本的寫法，例如 jQuery UI 外掛、已淘汰的 -webkit- 前綴。用瀏覽器 F12 的 Console 看有沒有紅色錯誤，並用 MDN 確認語法。不要貼完整版權歌詞、個人資料或學校空間帳密給 AI。
        
          
        

          
          
        
            
        09課後作業 HomeWork
        
            
        【作業二】html + css 進階練習｜歌詞排版
        
            
         第 7 週繳交　·　平時作業
        
            
          
              
        • 參考作業一的製作說明，並分別於兩首歌詞加入 CSS3 視覺效果、jQuery 動態效果、Font Awesome 圖示字體等。
          • 
              
        • 設定出符合歌詞意境的網頁；加入圖片、影片與效果，使其產生透明感、漸層、陰影等。
          • 
              
        • 上傳至學校 FTP，網址為 https://my.cute.edu.tw/~學號/hw02-學號（以課堂公告為準）。上傳與除錯步驟請看 UNIT 03。
          • 
            
        
            
        作業評分標準分數
        
              
        完成兩個檔案、分別設定符合要求的 css，無錯誤至少 80 分
        
              
        完成以上說明，符合歌詞意境、設計符合美感85 分以上；優秀作品 90 分以上
        
              
        只完成一個檔案的 css 設定，無錯誤至多 70 分
        
              
        只完成一個檔案的 css 設定，且有錯誤至多 60 分
        
              
        完成兩個檔案，部分設定未符合要求，且有錯誤至多 70 分
        
            
        
            
        想知道自己大概落在哪個區間？回到第 01 章的「評分自評器」試試。
        

            
        繳交前自我檢核
        
            
        0 / 7 完成
        
            
          
              
          • 
              
          • 
              
          • 
              
          • 
              
          • 
              
          • 
              
          • 
            
        

            
        學長姐作業參考
        
            
        
               1081445079
               1091445085
               1095445027
               1091445028
               1091445032
               1091445069
            
        

            
        自我測驗
        
            
        
              
        Q1想讓區塊背景半透明、但裡面的文字保持清楚，應該用哪個？
        
              
        Q2下列哪一行是 jQuery「選取元素後執行動作」的正確寫法？
        
              
        Q3border-radius: 10px 0 10px 0; 哪兩個角有圓角？
        
              
        Q4嵌入 YouTube 影片後，想讓它隨視窗寬度自動縮放並維持 16:9，現在建議用哪個？