🤖 透過 AI 優化網站代碼

三階段漸進式修改示範 - 展示如何用自然語言與AI溝通

📝 學生的原始代碼

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>媒體網站</title>
  </head>
  <body>
    <style>
      body {
        text-align: center;
        padding-top: 100px;
        padding-bottom: 50px;
        color: white;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        min-height: 100vh;
      }
      nav {
        background-color: rgba(0, 0, 0, 0.8);
        padding: 15px 20px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
      }
      h1 {
        font-size: 42px;
        margin-bottom: 20px;
        text-shadow: 2px 2px 4px black;
      }
      video {
        width: 100%;
        margin: 30px 0;
      }
    </style>
    <nav>
      <div class="logo">我的網站</div>
      <ul>
        <li><a href="index.html">首頁</a></li>
        <li><a href="media.html">多媒體</a></li>
      </ul>
    </nav>
    <h1>感受生活的美好</h1>
    <video controls>
      <source src="video3.mp4" type="video/mp4" />
    </video>
  </body>
</html>
⬇️

階段一：影片背景化

將影片從內容區移到背景層

🙋 學生提問：

「我現在想要影片作為背景，然後在導覽列底下，文字在影片上面」

🤖 AI 回答：

我理解了！我會幫你做以下調整：

  • 將影片設定為固定背景，覆蓋整個畫面
  • 影片會在導覽列下方
  • 文字會浮在影片上方，保持可讀性
  • 移除原本的漸層背景
✅ 修改後的完整代碼（版本1）
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>媒體網站</title>
  </head>
  <body>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow-x: hidden;
      }
      
      /* 背景影片容器 */
      .video-background {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
      }
      
      .video-background video {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      
      /* 內容區域 */
      .content {
        position: relative;
        z-index: 1;
        text-align: center;
        padding-top: 150px;
        min-height: 100vh;
        color: white;
      }
      
      nav {
        background-color: rgba(0, 0, 0, 0.8);
        padding: 15px 20px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
      }
      
      .logo {
        color: white;
        font-size: 24px;
        font-weight: bold;
        display: inline;
      }
      
      nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: inline;
      }
      
      nav ul li {
        display: inline;
        margin-left: 20px;
      }
      
      nav ul li a {
        color: white;
        text-decoration: none;
        font-size: 18px;
      }
      
      nav ul li a:hover {
        color: yellow;
      }
      
      h1 {
        font-size: 42px;
        margin-bottom: 20px;
        text-shadow: 2px 2px 4px black;
      }
      
      h2 {
        font-size: 28px;
        margin-bottom: 15px;
        text-shadow: 2px 2px 4px black;
      }
      
      h3 {
        font-size: 22px;
        text-shadow: 2px 2px 4px black;
      }
    </style>
    
    <!-- 背景影片 -->
    <div class="video-background">
      <video autoplay muted loop>
        <source src="video3.mp4" type="video/mp4" />
      </video>
    </div>
    
    <!-- 導覽列 -->
    <nav>
      <div class="logo">我的網站</div>
      <ul>
        <li><a href="index.html">首頁</a></li>
        <li><a href="media.html">多媒體</a></li>
      </ul>
    </nav>
    
    <!-- 內容區 -->
    <div class="content">
      <h1>感受生活的美好</h1>
      <h2>用心聆聽世界的聲音</h2>
      <h3>讓音樂與影像說故事</h3>
    </div>
  </body>
</html>
關鍵修改：
  • 新增 .video-background 容器，使用 position: fixed
  • 影片加入 autoplay muted loop 自動播放
  • 使用 z-index 控制圖層順序
⬇️

階段二：調整影片亮度

基於版本1進行優化

🙋 學生提問：

「影片可以變亮一點嗎？」

🤖 AI 回答：

當然可以！我會使用 CSS 的 filter 屬性來調整影片亮度：

  • 加入 filter: brightness(1.3) 讓影片變亮30%
  • 保持其他設定不變
✅ 修改後的完整代碼（版本2）
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>媒體網站</title>
  </head>
  <body>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow-x: hidden;
      }
      
      /* 背景影片容器 */
      .video-background {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
      }
      
      .video-background video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: brightness(1.3);  /* 增加亮度 */
      }
      
      /* 內容區域 */
      .content {
        position: relative;
        z-index: 1;
        text-align: center;
        padding-top: 150px;
        min-height: 100vh;
        color: white;
      }
      
      nav {
        background-color: rgba(0, 0, 0, 0.8);
        padding: 15px 20px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
      }
      
      .logo {
        color: white;
        font-size: 24px;
        font-weight: bold;
        display: inline;
      }
      
      nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: inline;
      }
      
      nav ul li {
        display: inline;
        margin-left: 20px;
      }
      
      nav ul li a {
        color: white;
        text-decoration: none;
        font-size: 18px;
      }
      
      nav ul li a:hover {
        color: yellow;
      }
      
      h1 {
        font-size: 42px;
        margin-bottom: 20px;
        text-shadow: 2px 2px 4px black;
      }
      
      h2 {
        font-size: 28px;
        margin-bottom: 15px;
        text-shadow: 2px 2px 4px black;
      }
      
      h3 {
        font-size: 22px;
        text-shadow: 2px 2px 4px black;
      }
    </style>
    
    <!-- 背景影片 -->
    <div class="video-background">
      <video autoplay muted loop>
        <source src="video3.mp4" type="video/mp4" />
      </video>
    </div>
    
    <!-- 導覽列 -->
    <nav>
      <div class="logo">我的網站</div>
      <ul>
        <li><a href="index.html">首頁</a></li>
        <li><a href="media.html">多媒體</a></li>
      </ul>
    </nav>
    
    <!-- 內容區 -->
    <div class="content">
      <h1>感受生活的美好</h1>
      <h2>用心聆聽世界的聲音</h2>
      <h3>讓音樂與影像說故事</h3>
    </div>
  </body>
</html>
關鍵修改：
  • 只加入一行代碼：filter: brightness(1.3);
  • 數值可調整：1.0是原始亮度，1.3是增亮30%
⬇️

階段三：加入個人照片

基於版本2進行最終優化

🙋 學生提問：

「導覽列我要加上一個圓形的我的照片，照片叫樹哥1-1.jpg」

🤖 AI 回答：

沒問題！我會在導覽列加入圓形頭像：

  • 在 logo 前面加入圓形照片
  • 設定固定大小（40px）和圓形樣式
  • 適當的間距和對齊
✅ 修改後的完整代碼（最終版本）
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>媒體網站</title>
  </head>
  <body>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow-x: hidden;
      }
      
      /* 背景影片容器 */
      .video-background {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
      }
      
      .video-background video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: brightness(1.3);
      }
      
      /* 內容區域 */
      .content {
        position: relative;
        z-index: 1;
        text-align: center;
        padding-top: 150px;
        min-height: 100vh;
        color: white;
      }
      
      nav {
        background-color: rgba(0, 0, 0, 0.8);
        padding: 15px 20px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
        display: flex;
        align-items: center;
      }
      
      /* 圓形頭像 */
      .profile-pic {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 15px;
        border: 2px solid white;
      }
      
      .logo {
        color: white;
        font-size: 24px;
        font-weight: bold;
      }
      
      nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: inline;
        margin-left: auto;
      }
      
      nav ul li {
        display: inline;
        margin-left: 20px;
      }
      
      nav ul li a {
        color: white;
        text-decoration: none;
        font-size: 18px;
      }
      
      nav ul li a:hover {
        color: yellow;
      }
      
      h1 {
        font-size: 42px;
        margin-bottom: 20px;
        text-shadow: 2px 2px 4px black;
      }
      
      h2 {
        font-size: 28px;
        margin-bottom: 15px;
        text-shadow: 2px 2px 4px black;
      }
      
      h3 {
        font-size: 22px;
        text-shadow: 2px 2px 4px black;
      }
    </style>
    
    <!-- 背景影片 -->
    <div class="video-background">
      <video autoplay muted loop>
        <source src="video3.mp4" type="video/mp4" />
      </video>
    </div>
    
    <!-- 導覽列 -->
    <nav>
      <img src="樹哥1-1.jpg" alt="個人照片" class="profile-pic">
      <div class="logo">我的網站</div>
      <ul>
        <li><a href="index.html">首頁</a></li>
        <li><a href="media.html">多媒體</a></li>
      </ul>
    </nav>
    
    <!-- 內容區 -->
    <div class="content">
      <h1>感受生活的美好</h1>
      <h2>用心聆聽世界的聲音</h2>
      <h3>讓音樂與影像說故事</h3>
    </div>
  </body>
</html>
關鍵修改：
  • 加入 <img> 標籤：src="樹哥1-1.jpg"
  • CSS 設定圓形：border-radius: 50%
  • 調整導覽列為 display: flex 以正確對齊元素
  • 加入白色邊框讓照片更突出

💡 教學重點總結

透過這三階段示範，學生學到：

  1. 用自然語言描述需求 - 不需要懂技術術語，AI會理解你的意思
  2. 漸進式優化 - 每次只改一個功能，逐步完善
  3. AI會保留之前的修改 - 每個版本都是基於上一版本
  4. 從具體問題出發 - 「影片變亮一點」比「優化視覺效果」更有效
  5. AI會給出完整代碼 - 可以直接複製使用，不用擔心遺漏

🎯 關鍵心法：把AI當作你的編程助手，用對話方式說出你想要的效果！