CSS樣式設計結合GitHub Copilot

網頁樣式設計對於使用者經驗至關重要。良好的 CSS 樣式設計能提升網頁的視覺吸引力和易用性，進而影響使用者對網站的印象和使用意願。本文將介紹如何利用 GitHub Copilot 協助開發者編寫 CSS 樣式，並以電子商務網站的購物車頁面為例，示範如何透過 CSS 和 Copilot 快速開發美觀且功能完善的網頁。我們也會探討如何將 JavaScript 整合到網頁中，以實作更豐富的互動功能和動態效果，提升使用者經驗。更進一步，我們將探討如何處理資料流，以及如何讀取和寫入資料，為後續的網頁應用開發奠定基礎。

使用 GitHub Copilot 與 CSS 進行應用程式樣式設計

在前一章中，我們探討瞭如何利用 GitHub Copilot 生成 HTML 標記。本章將繼續探討 Web 開發，但重點將轉移到 CSS 和樣式設計。我們將看到相同的或類別似的提示技術如何用於 CSS。

簡介

良好的樣式設計可以大大影響使用者對應用程式的看法。周到的樣式設計包括適應多種裝置、智慧地使用圖形和顏色，並具有良好的對比度。CSS 樣式設計是一個龐大的主題，我們不會詳細介紹。然而，我們將展示如何開始使用它。就像前一章一樣，我們將使用我們的 AI 助手來幫助生成程式碼。

在本章中，我們將探討如何生成所需的 CSS，以及如何繼續應用之前章節中使用的提示模式和策略。我們將繼續在電子商務專案上進行開發，並為其新增吸引人的外觀。

商業問題：電子商務

就像前一章一樣，我們將繼續在電子商務領域工作，並透過其許多有趣的問題。本章重點關注使用 CSS 進行視覺化，因此您可能會想知道它與商業的聯絡是什麼？糟糕的使用者經驗（UX）或設計不良的網站可能無法在桌面以外的裝置上正常運作，或者不能滿足無障礙需求，這可能會讓您損失金錢，因為客戶可能會選擇與您的競爭對手進行業務。

問題和資料領域

本章繼續以電子商務業務領域為基礎，特別關注購物籃頁面，該頁面列出了客戶希望購買的產品。因此，資料是產品資料；不僅如此，從資料的角度來看，我們需要考慮如何展示與產品相關的詳細資料，例如數量和總成本，以便客戶可以決定購買哪些商品和數量。這些考慮因素應反映在所選擇的設計中。

將問題分解為功能

在前一章中，我們選擇識別一個更大的區域「驗證」，並將其分解為特定的功能。讓我們回顧一下該功能分解的樣子。在此之後，我們將看看是否需要更改它，以使其更具設計導向性。首先，讓我們展示功能列表：

• 區域：驗證
• 登入：使用者應該能夠登入。
• 登出：使用者應該能夠登出。
• 建立新使用者：應該可以建立新使用者。
• 更新密碼：現有使用者應該能夠更新其密碼。
• 重置密碼：如果使用者忘記了密碼，應該能夠以安全的方式重置密碼。

上述功能列表構成了我們需要支援的良好高階列表。然而，從設計的角度來看，我們需要考慮諸如適應不同裝置或支援無障礙等問題。因此，第一個功能的提示可能需要調整為如下所示：

[提示] 生成登入頁面。它應該具有使用者名稱、密碼和重複密碼欄位，以及登入按鈕。它還應該透過工具提示和 ARIA 鍵支援無障礙，以便可以使用僅鍵盤和滑鼠操作它。 [提示結束]

正如您從上面的提示中看到的那樣，我們關注的不僅僅是我們需要什麼 UI 元素，如輸入和按鈕，還有它應該如何工作。

使用 CSS 和 Copilot 進行樣式設計

生成 CSS

GitHub Copilot 可以生成樣式設計，我們將展示 AI 協助如何透過檢視文字檔案中的周圍程式碼以及根據 CSS 註解來生成 CSS。

應用提示技術

有多種技術可以用來獲得所需的內容。

將 CSS 新增至電子商務專案

我們將在電子商務專案中選擇幾個頁面，以展示它如何從樣式設計中受益。

/* 這裡是CSS註解，用於提示GitHub Copilot生成樣式 */
.login-page {
    /* 登入頁面樣式 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #f0f0f0;
}

.login-form {
    /* 登入表單樣式 */
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.login-form input[type="text"], .login-form input[type="password"] {
    /* 輸入欄位樣式 */
    width: 100%;
    height: 40px;
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #ccc;
}

.login-form button[type="submit"] {
    /* 提交按鈕樣式 */
    width: 100%;
    height: 40px;
    background-color: #4CAF50;
    color: #fff;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.login-form button[type="submit"]:hover {
    /* 提交按鈕懸停樣式 */
    background-color: #3e8e41;
}

詳細內容解析：

1. .login-page類別定義了登入頁面的整體樣式，包括使用flexbox進行置中對齊，以及設定背景顏色。
2. .login-form類別定義了登入表單的樣式，包括內邊距、邊框、圓角和陰影效果。
3. .login-form input[type="text"], .login-form input[type="password"]選擇器定義了輸入欄位的樣式，包括寬度、高度、外邊距、內邊距和邊框。
4. .login-form button[type="submit"]選擇器定義了提交按鈕的樣式，包括寬度、高度、背景顏色、文字顏色、內邊距、邊框和遊標形狀。
5. .login-form button[type="submit"]:hover偽類別定義了提交按鈕在滑鼠懸停時的背景顏色。

這些 CSS 規則共同構成了登入頁面的基本樣式，可以根據需要進行進一步的調整和擴充套件。

使用 GitHub Copilot 與 CSS 設計網頁樣式

在前一章中，我們探討瞭如何利用 GitHub Copilot 來協助開發 HTML 內容。本章節將著重於如何使用 CSS（Cascading Style Sheets）來為網頁新增樣式，並結合 GitHub Copilot 提升開發效率。

CSS 簡介

CSS 是用於控制網頁視覺呈現的樣式語言，能夠調整字型、大小、顏色、佈局等。透過 CSS，我們可以實作網頁內容與表現的分離，從而更靈活地控制網頁的外觀。

使用 GitHub Copilot 編寫 CSS

與編寫程式碼類別似，我們可以在 CSS 檔案中使用註解來引導 GitHub Copilot 生成所需的樣式。例如，在 product.css 檔案中：

.product {
  /* apply padding and margin */
  padding: 10px;
  margin: 10px;
}

內容解密：

• .product 是一個 CSS 類別選擇器，用於選取具有 class="product" 的 HTML 元素。
• /* apply padding and margin */ 是 CSS 註解，用於提示 GitHub Copilot 生成相關樣式屬性。
• padding: 10px; 設定元素的內邊距為 10 畫素。
• margin: 10px; 設定元素的外邊距為 10 畫素。

持續按下 Return 鍵和 Tab 鍵，GitHub Copilot 將根據上下文生成更多的 CSS 屬性，例如：

.product {
  /* apply padding and margin */
  padding: 10px;
  margin: 10px;
  /* apply border */
  border: 1px solid #ccc;
  /* apply border radius */
  border-radius: 5px;
  /* apply background color */
  background-color: #fff;
  /* apply box shadow */
  box-shadow: 0 0 5px #ccc;
  /* apply display */
  display: inline-block;
  /* apply width */
  width: 200px;
  /* apply text align */
  text-align: center;
  /* apply text decoration */
  text-decoration: none;
  /* apply color */
  color: #333;
}

內容解密：

• border: 1px solid #ccc; 為元素新增灰色實線邊框。
• border-radius: 5px; 設定邊框圓角。
• background-color: #fff; 設定背景顏色為白色。
• box-shadow: 0 0 5px #ccc; 新增陰影效果。
• display: inline-block; 設定元素的顯示方式。
• width: 200px; 設定元素寬度。
• text-align: center; 文字置中對齊。
• text-decoration: none; 去除文字裝飾效果。
• color: #333; 設定文字顏色。

將 CSS 檔案連結到 HTML

生成 product.css 後，我們需要在 HTML 檔案中參照它。在 index.html 檔案末尾新增提示：

<!-- page that includes product.css -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Product</title>
    <link rel="stylesheet" href="product.css">
</head>
<body>
    <div class="product">
        some text
        <div class="product__image">
            <img src="https://via.placeholder.com/200x200" alt="Product Image">
        </div>
        <div class="product__info">
            <h2 class="product__name">Product Name</h2>
            <p class="product__description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.</p>
            <p class="product__price">$9.99</p>
            <button class="product__buy">Buy</button>
        </div>
    </div>
</html>

內容解密：

• <link rel="stylesheet" href="product.css"> 用於連結外部 CSS 檔案。
• HTML 結構中包含了產品圖片、名稱、描述、價格和購買按鈕等元素。

不使用註解直接生成 CSS

除了使用註解，我們還可以直接在空的 CSS 類別中生成樣式。例如：

.product {
}

將遊標置於大括號內，按下 Return 鍵和 Tab 鍵，GitHub Copilot 將提供建議：

.product {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    padding: 0 0 50px 0;
    background-color: #f5f5f5;
}

內容解密：

• display: flex; 設定彈性盒子佈局。
• flex-direction: column; 設定主軸方向為垂直。
• align-items: center; 設定交叉軸對齊方式為置中。
• justify-content: center; 設定主軸對齊方式為置中。
• width: 100%; 設定寬度為 100%。
• margin: 0 auto; 設定水平置中。
• padding: 0 0 50px 0; 設定內邊距。
• background-color: #f5f5f5; 設定背景顏色。

練習：建立圖片函式庫應用程式

請建立一個圖片函式庫應用程式，展示10張圖片，每行5張。利用本章所學，生成對應的 HTML 和 CSS 檔案。

電子商務購物車頁面設計

接續前一章的電子商務案例，我們將重點放在購物車頁面的樣式設計。首先，建立 basket.css 檔案，並觀察 basket.html 中的 CSS 類別。例如：

<div class="container">
    <div class="basket">
        <!-- 購物車內容 -->
    </div>
</div>

根據 HTML 結構，在 basket.css 中新增對應的樣式，並確保在 HTML 檔案中正確參照 CSS 檔案。

@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle

title CSS樣式設計結合GitHub Copilot

package "Git 版本控制" {
    package "工作區域" {
        component [工作目錄
Working Directory] as work
        component [暫存區
Staging Area] as stage
        component [本地倉庫
Local Repository] as local
        component [遠端倉庫
Remote Repository] as remote
    }

    package "基本操作" {
        component [git add] as add
        component [git commit] as commit
        component [git push] as push
        component [git pull] as pull
    }

    package "分支管理" {
        component [git branch] as branch
        component [git merge] as merge
        component [git rebase] as rebase
    }
}

work --> add : 加入暫存
add --> stage : 暫存變更
stage --> commit : 提交變更
commit --> local : 版本記錄
local --> push : 推送遠端
remote --> pull : 拉取更新
branch --> merge : 合併分支

note right of stage
  git status 查看狀態
  git diff 比較差異
end note

@enduml

此圖示展示了使用 CSS 和 GitHub Copilot 的基本流程。透過這些步驟，我們能夠高效地設計出符合需求的網頁樣式。

使用 CSS 和 Copilot 樣式化應用程式

設定購物籃樣式

在前面的程式碼中，我們看到了 basket 和 basket-item 類別。讓我們在 basket.css 中為它們建立 CSS 類別：

首先開啟一個空白的 basket.css 檔案並開始輸入 .basket。當你重複使用 Return 和 Tab 鍵時，你應該會看到類別似以下的輸出。當你對輸出結果感到滿意時，輸入 } 以完成 CSS 類別。

CSS 程式碼範例：

.basket {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

內容解密：

這段 CSS 程式碼定義了 .basket 類別的樣式，主要作用是設定購物籃的整體佈局和對齊方式。

• width 和 height 設定為 100%，使元素佔據父容器的全部寬度和高度。
• display: flex 將元素設為彈性盒模型，方便進行佈局控制。
• flex-direction: column 使子元素垂直排列。
• align-items: center 使子元素在橫軸上居中對齊。
• padding: 20px 在元素內部新增 20px 的內邊距，增加視覺上的舒適度。

接著，建立 .basket-item 類別。同樣地，輸入 .basket-item 並重複使用 Return 和 Tab 鍵，直到得到滿意的結果。

CSS 程式碼範例：

.basket-item {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #ccc;
}

內容解密：

這段 CSS 程式碼定義了 .basket-item 類別的樣式，用於設定購物籃中每個專案的佈局和樣式。

• 主要屬性與 .basket 相似，但 flex-direction 設定為 row，使子元素水平排列。
• 新增了 border-bottom 屬性，在每個購物專案底部新增一條灰色分隔線。

繼續檢視 HTML 檔案，可以看到另一個值得關注的部分：

<div class="basket-item-buttons">
    <button type="submit" class="btn btn-primary btn-block btn-large">+</button>
    <button type="submit" class="btn btn-primary btn-block btn-large">-</button>
</div>

使用相同的提示技巧，輸入 .basket-item > .basket-item-buttons 並重複使用 Return 和 Tab 鍵，以生成所需的 CSS 程式碼。

CSS 程式碼範例：

.basket-item > .basket-item-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left: auto;
}

.basket-item-buttons button {
    margin: 5px;
    width: 50px;
    font-size: 20px;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 4px;
}

內容解密：

這段 CSS 程式碼設定了購物籃專案按鈕的樣式。

• .basket-item > .basket-item-buttons 將按鈕容器設為彈性盒，使其子元素垂直排列並居中對齊，同時將其向右對齊（margin-left: auto）。
• .basket-item-buttons button 設定了按鈕的具體樣式，包括大小、字型大小、背景顏色、邊框和圓角，使按鈕更具視覺吸引力。

瀏覽器中的效果

在瀏覽器中檢視應用的 CSS 修改後，你應該會看到類別似以下的畫面：

圖示：購物籃中的專案列表

挑戰

如何修改提示以建立暗黑主題版本的購物籃頁面？

測驗

如何使用 AI 助手生成 CSS？ a. 在 CSS 檔案中建立註解。 b. 建立一個類別並將遊標放在類別中。 c. 以上皆是。

使用 JavaScript 新增行為

簡介

僅有 HTML 和 CSS 的網頁是靜態的，若要實作互動功能，則需要 JavaScript。JavaScript 可用於簡單的表單提交或複雜的單頁應用（SPA）開發。無論應用規模大小，都需要編寫 JavaScript 程式碼並在 HTML 中參照。

本章節將介紹如何使用提示生成 JavaScript 程式碼以新增應用程式行為，以及如何為我們的電子商務應用程式新增互動功能。

商業問題：電子商務

本章節繼續以電子商務領域為例。在前面的章節中，我們使用 HTML 定義了頁面結構和內容，本章節將透過 JavaScript 新增互動功能和資料處理能力。

問題和資料領域

需要解決的問題包括：

• 資料流：如何新增程式碼以讀取和寫入資料？

使用 JavaScript 新增互動功能

透過使用 Copilot，我們可以輕鬆地在 HTML 中新增 <script> 標籤，或是整合 Vue.js 等 JavaScript 框架，以實作更複雜的功能。接下來的章節將展示如何使用 JavaScript 為應用程式新增行為。