簡易學 LLM

實作範例

個人部落格網站 - 完整教學範例

三種風格的提示詞、作品集網站程式碼與部署方法。


📝 提示詞範例(三種風格)

風格 1:簡約專業型(適合求職、商務)

請幫我建立一個專業的個人部落格網站:

網站架構:
1. 頂部導航列(固定):首頁、關於我、作品集、聯絡
2. 首頁區塊:
   - 大型橫幅區:顯示姓名「李明華」和標語「全端工程師 | 熱愛創造美好的數位體驗」
   - 個人照片(圓形頭像,尺寸 200x200px)
   - 簡短介紹(3-4 行)
3. 關於我區塊:
   - 詳細自我介紹(200 字)
   - 技能標籤:JavaScript, React, Node.js, UI/UX Design
   - 興趣愛好:閱讀、攝影、登山
4. 作品集區塊:
   - 3 個作品卡片(圖片 + 標題 + 簡介 + 連結)
   - 作品範例:
     1. 電商網站設計 - 響應式購物網站
     2. 任務管理 App - React 專案
     3. 數據視覺化系統 - D3.js 應用
5. 聯絡區塊:
   - Email:example@email.com
   - GitHub:github.com/username
   - LinkedIn:linkedin.com/in/username
   - 社群媒體圖示連結
6. 頁尾:版權資訊、社群連結

設計風格:
- 配色:主色 #2C3E50(深藍灰)、輔助色 #3498DB(亮藍)、背景 #FFFFFF(白色)
- 字體:標題用粗體,內文用 16px 易讀字體
- 版面:現代簡約風格,每個區塊之間有明顯間隔
- 留白空間充足,視覺舒適

互動效果:
- 導航列固定在頂部,滑動時有陰影效果
- 點擊導航連結平滑捲動到對應區塊
- 按鈕和連結有 hover 效果(顏色變化)
- 作品卡片有陰影,hover 時會稍微放大

技術要求:
- 純 HTML + CSS(內嵌或使用 <style> 標籤)
- 響應式設計(手機、平板、電腦都能正常顯示)
- 程式碼有清楚註解
- 圖片使用 placeholder(之後可以替換)
- 使用語意化 HTML 標籤(header, nav, section, footer)

風格 2:創意活潑型(適合設計師、創作者)

請幫我建立一個充滿創意的個人作品集網站:

網站架構:
1. 全螢幕首頁橫幅:
   - 大標題:「創意無限 | 設計師 Sarah Chen」
   - 動態漸層背景
   - 向下箭頭指示
2. 個人介紹區:
   - 照片(不規則形狀或圓形)
   - 個性化自我介紹
   - 標籤雲:平面設計、插畫、品牌視覺
3. 作品集(網格排列):
   - 6 個作品展示
   - 滑鼠移上去顯示標題和簡介
   - 作品類型:Logo 設計、海報、插畫、包裝設計
4. 設計理念區:
   - 分享設計哲學和工作方式
5. 聯絡表單:
   - 簡單的聯絡欄位
   - 社群媒體連結(Instagram、Behance、Dribbble)

設計風格:
- 配色:活潑的漸層色(粉色 #FF6B9D 到紫色 #C06C84)
- 大膽的排版、不對稱的版面
- 使用 emoji 和圖標
- 視覺元素豐富(形狀、線條)

互動效果:
- 滾動時有視差效果
- 作品集用 grid 排列,hover 時有遮罩效果
- 按鈕有動畫效果

技術要求:
- HTML + CSS,包含動畫效果
- 使用 flexbox 和 grid 排版
- 響應式設計
- 程式碼有註解

風格 3:極簡文青型(適合作家、部落客)

請幫我建立一個極簡風格的個人部落格:

網站架構:
1. 簡潔頂部:
   - 網站名稱「思想的角落」
   - 簡單導航:文章、關於、聯絡
2. 首頁:
   - 個人引言(一句話描述)
   - 最新文章列表(3 篇)
   - 每篇顯示:標題、日期、摘要
3. 關於頁面:
   - 簡短的個人介紹
   - 聯絡方式(Email、社群)
4. 頁尾:
   - 簡單版權聲明

設計風格:
- 配色:黑 #000000、白 #FFFFFF、淡灰 #F5F5F5
- 字體:優雅的襯線字體(標題)、易讀的無襯線字體(內文)
- 大量留白
- 文字為主,少圖片
- 類似 Medium 的閱讀體驗

互動效果:
- 極簡的 hover 效果(底線出現)
- 平滑的過渡動畫
- 專注閱讀體驗

技術要求:
- 純 HTML + CSS
- 語意化標籤
- 響應式(行動裝置優先)
- 程式碼簡潔有註解

💻 完整程式碼(簡約專業型)

portfolio.html

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>李明華 - 個人網站</title>
    <style>
        /* ==================== 全局樣式 ==================== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth; /* 平滑捲動 */
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, '微軟正黑體', 'Segoe UI', sans-serif;
            line-height: 1.6;
            color: #333;
            background: #FFFFFF;
        }

        /* ==================== 頂部導航列 ==================== */
        nav {
            background: #2C3E50;
            color: white;
            padding: 1rem 0;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        nav .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        nav .logo {
            font-size: 1.5rem;
            font-weight: bold;
        }

        nav ul {
            list-style: none;
            display: flex;
            gap: 2rem;
        }

        nav a {
            color: white;
            text-decoration: none;
            transition: color 0.3s;
        }

        nav a:hover {
            color: #3498DB;
        }

        /* ==================== 通用容器 ==================== */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        section {
            padding: 80px 0;
        }

        h2 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            color: #2C3E50;
            text-align: center;
        }

        .section-subtitle {
            text-align: center;
            color: #7f8c8d;
            margin-bottom: 3rem;
            font-size: 1.1rem;
        }

        /* ==================== 首頁橫幅區 ==================== */
        #hero {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            text-align: center;
            padding: 150px 20px 100px;
            margin-top: 60px; /* 留空給固定導航列 */
        }

        #hero h1 {
            font-size: 3rem;
            margin-bottom: 1rem;
            animation: fadeInDown 1s;
        }

        #hero .tagline {
            font-size: 1.3rem;
            margin-bottom: 2rem;
            opacity: 0.9;
            animation: fadeInUp 1s;
        }

        .profile-img {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            border: 5px solid white;
            margin: 2rem auto;
            display: block;
            object-fit: cover;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            animation: fadeIn 1.5s;
        }

        #hero .intro {
            max-width: 600px;
            margin: 2rem auto;
            font-size: 1.1rem;
            line-height: 1.8;
        }

        /* ==================== 關於我區塊 ==================== */
        #about {
            background: #F8F9FA;
        }

        .about-content {
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
        }

        .about-content p {
            font-size: 1.1rem;
            margin-bottom: 2rem;
            line-height: 1.8;
            color: #555;
        }

        .skills {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            justify-content: center;
            margin: 2rem 0;
        }

        .skill-tag {
            background: #3498DB;
            color: white;
            padding: 0.5rem 1.5rem;
            border-radius: 25px;
            font-size: 0.95rem;
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .skill-tag:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
        }

        .interests {
            margin-top: 2rem;
            color: #7f8c8d;
            font-style: italic;
        }

        /* ==================== 作品集區塊 ==================== */
        #portfolio {
            background: #FFFFFF;
        }

        .portfolio-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

        .portfolio-item {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .portfolio-item:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
        }

        .portfolio-item img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .portfolio-content {
            padding: 1.5rem;
        }

        .portfolio-content h3 {
            color: #2C3E50;
            margin-bottom: 0.5rem;
        }

        .portfolio-content p {
            color: #7f8c8d;
            margin-bottom: 1rem;
        }

        .portfolio-link {
            display: inline-block;
            color: #3498DB;
            text-decoration: none;
            font-weight: bold;
            transition: color 0.3s;
        }

        .portfolio-link:hover {
            color: #2980b9;
        }

        /* ==================== 聯絡區塊 ==================== */
        #contact {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            text-align: center;
        }

        #contact h2 {
            color: white;
        }

        .contact-info {
            max-width: 600px;
            margin: 2rem auto;
        }

        .contact-item {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            margin: 1.5rem 0;
            font-size: 1.1rem;
        }

        .contact-item i {
            font-size: 1.5rem;
        }

        .contact-item a {
            color: white;
            text-decoration: none;
            transition: opacity 0.3s;
        }

        .contact-item a:hover {
            opacity: 0.8;
        }

        .social-links {
            display: flex;
            gap: 2rem;
            justify-content: center;
            margin-top: 3rem;
        }

        .social-links a {
            color: white;
            font-size: 2rem;
            transition: transform 0.3s;
            display: inline-block;
        }

        .social-links a:hover {
            transform: scale(1.2);
        }

        /* ==================== 頁尾 ==================== */
        footer {
            background: #2C3E50;
            color: white;
            text-align: center;
            padding: 2rem 0;
        }

        footer p {
            margin: 0.5rem 0;
        }

        /* ==================== 動畫效果 ==================== */
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* ==================== 響應式設計 ==================== */
        @media (max-width: 768px) {
            nav ul {
                gap: 1rem;
            }

            #hero h1 {
                font-size: 2rem;
            }

            #hero .tagline {
                font-size: 1rem;
            }

            h2 {
                font-size: 2rem;
            }

            .portfolio-grid {
                grid-template-columns: 1fr;
            }

            nav .logo {
                font-size: 1.2rem;
            }

            nav ul {
                font-size: 0.9rem;
            }
        }
    </style>
</head>
<body>
    <!-- ==================== 頂部導航列 ==================== -->
    <nav>
        <div class="container">
            <div class="logo">李明華</div>
            <ul>
                <li><a href="#hero">首頁</a></li>
                <li><a href="#about">關於我</a></li>
                <li><a href="#portfolio">作品集</a></li>
                <li><a href="#contact">聯絡</a></li>
            </ul>
        </div>
    </nav>

    <!-- ==================== 首頁橫幅區 ==================== -->
    <section id="hero">
        <div class="container">
            <h1>李明華</h1>
            <p class="tagline">全端工程師 | 熱愛創造美好的數位體驗</p>

            <!-- 個人照片(使用 placeholder)-->
            <img src="https://placehold.co/200" alt="李明華" class="profile-img">

            <p class="intro">
                我是一位充滿熱情的全端工程師,專注於打造直觀、美觀且高效的網頁應用。
                擁有 5 年的開發經驗,熟悉前端與後端技術,熱衷於學習新技術並解決複雜問題。
            </p>
        </div>
    </section>

    <!-- ==================== 關於我區塊 ==================== -->
    <section id="about">
        <div class="container">
            <h2>關於我</h2>
            <p class="section-subtitle">讓技術為生活帶來更多可能</p>

            <div class="about-content">
                <p>
                    我從大學時期開始接觸程式設計,從最初的網頁製作到現在的全端開發,
                    一直保持著對技術的好奇心與學習熱情。我相信好的產品不僅要功能完善,
                    更要注重使用者體驗和視覺設計。工作之餘,我喜歡參與開源專案、閱讀技術文章,
                    並且樂於分享自己的經驗與知識。
                </p>

                <h3 style="margin-top: 2rem; color: #2C3E50;">技能專長</h3>
                <div class="skills">
                    <span class="skill-tag">JavaScript</span>
                    <span class="skill-tag">React</span>
                    <span class="skill-tag">Node.js</span>
                    <span class="skill-tag">HTML & CSS</span>
                    <span class="skill-tag">UI/UX Design</span>
                    <span class="skill-tag">Git</span>
                </div>

                <p class="interests">
                    💡 興趣愛好:閱讀、攝影、登山
                </p>
            </div>
        </div>
    </section>

    <!-- ==================== 作品集區塊 ==================== -->
    <section id="portfolio">
        <div class="container">
            <h2>作品集</h2>
            <p class="section-subtitle">精選專案展示</p>

            <div class="portfolio-grid">
                <!-- 作品 1 -->
                <div class="portfolio-item">
                    <img src="https://placehold.co/400x200/3498db/ffffff?text=E-Commerce" alt="電商網站">
                    <div class="portfolio-content">
                        <h3>電商網站設計</h3>
                        <p>
                            響應式購物網站,包含產品展示、購物車、結帳流程。
                            使用 React 和 Node.js 建構,注重使用者體驗與效能優化。
                        </p>
                        <a href="#" class="portfolio-link">查看專案 →</a>
                    </div>
                </div>

                <!-- 作品 2 -->
                <div class="portfolio-item">
                    <img src="https://placehold.co/400x200/e74c3c/ffffff?text=Task+Manager" alt="任務管理 App">
                    <div class="portfolio-content">
                        <h3>任務管理 App</h3>
                        <p>
                            協作式任務管理工具,支援團隊成員即時同步。
                            採用 React 前端框架,Firebase 作為後端服務。
                        </p>
                        <a href="#" class="portfolio-link">查看專案 →</a>
                    </div>
                </div>

                <!-- 作品 3 -->
                <div class="portfolio-item">
                    <img src="https://placehold.co/400x200/2ecc71/ffffff?text=Data+Visualization" alt="數據視覺化">
                    <div class="portfolio-content">
                        <h3>數據視覺化系統</h3>
                        <p>
                            企業數據分析與視覺化平台,將複雜數據轉換為直觀圖表。
                            使用 D3.js 和 Chart.js 建構互動式圖表。
                        </p>
                        <a href="#" class="portfolio-link">查看專案 →</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ==================== 聯絡區塊 ==================== -->
    <section id="contact">
        <div class="container">
            <h2>聯絡我</h2>
            <p class="section-subtitle" style="color: rgba(255,255,255,0.9);">歡迎與我交流合作</p>

            <div class="contact-info">
                <div class="contact-item">
                    <span>📧</span>
                    <a href="mailto:example@email.com">example@email.com</a>
                </div>

                <div class="contact-item">
                    <span>💼</span>
                    <a href="https://github.com/username" target="_blank">GitHub: @username</a>
                </div>

                <div class="contact-item">
                    <span>🔗</span>
                    <a href="https://linkedin.com/in/username" target="_blank">LinkedIn</a>
                </div>
            </div>

            <div class="social-links">
                <a href="#" title="GitHub">🐙</a>
                <a href="#" title="LinkedIn">💼</a>
                <a href="#" title="Twitter">🐦</a>
                <a href="#" title="Instagram">📷</a>
            </div>
        </div>
    </section>

    <!-- ==================== 頁尾 ==================== -->
    <footer>
        <div class="container">
            <p>&copy; 2025 李明華 | 用 ❤️ 和 ☕ 打造</p>
            <p>使用 Claude AI 協作開發</p>
        </div>
    </footer>
</body>
</html>

🎨 客製化指南

修改 1:更換個人資訊

提示詞:

請把以下資訊替換成我的個人資料:
- 姓名:王曉華
- 標語:UI/UX 設計師 | 用設計說故事
- 自我介紹:[你的介紹文字]
- Email:your-email@example.com
- GitHub:github.com/your-username

修改位置:
在 HTML 中搜尋並替換:

  • <h1>李明華</h1> → 改成你的名字
  • <p class="tagline"> → 改成你的標語
  • <p class="intro"> → 改成你的介紹
  • 聯絡資訊區塊的連結和文字

修改 2:更換配色主題

提示詞範例:

暖色系(橘紅色):

請把配色改成暖色系:
- 主色:#E74C3C(紅色)
- 輔助色:#F39C12(橘色)
- 導航列和頁尾:深灰色 #34495E

冷色系(青綠色):

請把配色改成清新的青綠色:
- 主色:#1ABC9C(青綠色)
- 輔助色:#16A085(深青綠)
- 保持白色背景

修改位置(CSS):

/* 導航列背景 */
nav {
    background: #E74C3C; /* 改成你要的顏色 */
}

/* 首頁橫幅漸層 */
#hero {
    background: linear-gradient(135deg, #E74C3C 0%, #F39C12 100%);
}

/* 技能標籤顏色 */
.skill-tag {
    background: #F39C12;
}

/* 聯絡區塊漸層 */
#contact {
    background: linear-gradient(135deg, #E74C3C 0%, #F39C12 100%);
}

修改 3:更換字體

提示詞:

請引入 Google Fonts 的 'Noto Sans TC' 字體,
讓整個網站使用這個更適合中文閱讀的字體

修改方式:

  1. 在 <head> 中加入:
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700&display=swap" rel="stylesheet">
  1. 在 CSS 中修改:
body {
    font-family: 'Noto Sans TC', sans-serif;
}

修改 4:新增更多作品

提示詞:

請在作品集區塊再新增 3 個作品卡片:
1. 旅遊部落格 - 個人旅遊紀錄網站
2. 天氣查詢 App - 即時天氣資訊應用
3. 線上履歷產生器 - 快速建立專業履歷

新增位置:
在 .portfolio-grid 內複製既有的 .portfolio-item 並修改內容:

<!-- 作品 4 -->
<div class="portfolio-item">
    <img src="https://placehold.co/400x200/9b59b6/ffffff?text=Travel+Blog" alt="旅遊部落格">
    <div class="portfolio-content">
        <h3>旅遊部落格</h3>
        <p>
            記錄旅行足跡的個人部落格,包含遊記、照片集、旅行地圖。
            使用響應式設計,在各種裝置上都能完美呈現。
        </p>
        <a href="#" class="portfolio-link">查看專案 →</a>
    </div>
</div>

<!-- 繼續新增其他作品... -->

修改 5:新增技能進度條(進階)

提示詞:

請把技能區塊改成進度條樣式,顯示每個技能的熟練度:
- JavaScript (90%)
- React (85%)
- Node.js (80%)
- UI/UX Design (75%)

修改 HTML:

<div class="skills-progress">
    <div class="skill-item">
        <div class="skill-info">
            <span>JavaScript</span>
            <span>90%</span>
        </div>
        <div class="progress-bar">
            <div class="progress" style="width: 90%"></div>
        </div>
    </div>

    <div class="skill-item">
        <div class="skill-info">
            <span>React</span>
            <span>85%</span>
        </div>
        <div class="progress-bar">
            <div class="progress" style="width: 85%"></div>
        </div>
    </div>

    <!-- 繼續新增其他技能... -->
</div>

新增 CSS:

.skills-progress {
    max-width: 600px;
    margin: 2rem auto;
}

.skill-item {
    margin-bottom: 1.5rem;
}

.skill-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-weight: bold;
    color: #2C3E50;
}

.progress-bar {
    background: #E0E0E0;
    border-radius: 10px;
    height: 10px;
    overflow: hidden;
}

.progress {
    background: linear-gradient(90deg, #3498DB, #2980b9);
    height: 100%;
    border-radius: 10px;
    transition: width 1s ease;
}

修改 6:新增「最新文章」區塊(進階)

提示詞:

請在作品集和聯絡區塊之間新增一個「最新文章」區塊,
顯示 3 篇部落格文章預覽:
- 標題
- 發布日期
- 摘要(50 字)
- 「閱讀更多」按鈕

新增 HTML(在 #contact 前面):

<section id="blog">
    <div class="container">
        <h2>最新文章</h2>
        <p class="section-subtitle">分享技術心得與學習筆記</p>

        <div class="blog-grid">
            <!-- 文章 1 -->
            <article class="blog-item">
                <div class="blog-date">2025-01-15</div>
                <h3>React Hooks 深入解析</h3>
                <p>
                    深入探討 React Hooks 的運作原理,從 useState 到自訂 Hook,
                    帶你完整理解這個改變 React 開發方式的重要功能...
                </p>
                <a href="#" class="read-more">閱讀更多 →</a>
            </article>

            <!-- 文章 2 -->
            <article class="blog-item">
                <div class="blog-date">2025-01-10</div>
                <h3>CSS Grid 實戰技巧</h3>
                <p>
                    CSS Grid 是現代網頁排版的利器,本文分享 10 個實用技巧,
                    幫助你更有效率地建構響應式版面...
                </p>
                <a href="#" class="read-more">閱讀更多 →</a>
            </article>

            <!-- 文章 3 -->
            <article class="blog-item">
                <div class="blog-date">2025-01-05</div>
                <h3>JavaScript 效能優化</h3>
                <p>
                    介紹 JavaScript 效能優化的常見方法,包括程式碼分割、
                    懶加載、記憶化等技術,讓你的應用更快速...
                </p>
                <a href="#" class="read-more">閱讀更多 →</a>
            </article>
        </div>
    </div>
</section>

新增 CSS:

#blog {
    background: #F8F9FA;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.blog-item {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.blog-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.blog-date {
    color: #3498DB;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.blog-item h3 {
    color: #2C3E50;
    margin-bottom: 1rem;
}

.blog-item p {
    color: #7f8c8d;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.read-more {
    color: #3498DB;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s;
}

.read-more:hover {
    color: #2980b9;
}

📚 教學指引(給講師)

教學流程建議

1. 展示不同風格(10 分鐘)

  • 展示 3 種風格的範例網站
  • 討論各種風格的適用場景
  • 讓學員選擇自己喜歡的風格

2. 規劃內容(10 分鐘)

  • 引導學員思考:

    • 你想呈現什麼形象?
    • 你有哪些作品或經歷可以展示?
    • 你希望誰來看這個網站?(雇主、客戶、朋友)
  • 準備素材:

    • 個人照片(可用 placeholder 代替)
    • 自我介紹文字
    • 作品描述
    • 聯絡方式

3. 撰寫提示詞(10 分鐘)

  • 帶學員一起完成提示詞
  • 強調要包含的元素:
    • 網站架構
    • 設計風格
    • 互動效果
    • 技術要求

4. 生成網站(10 分鐘)

  • 在 Claude 中貼上提示詞
  • 取得完整的 HTML 檔案
  • 測試執行

5. 客製化修改(20 分鐘)

必做項目:

  1. 替換個人資訊(姓名、介紹、聯絡方式)
  2. 修改作品內容(至少 3 個作品)
  3. 調整配色(選擇適合自己的顏色)

選做項目:

  1. 新增更多區塊(技能、經歷、證書)
  2. 改變排版方式
  3. 加入額外互動效果
  4. 新增圖片或圖標

6. 測試與優化(10 分鐘)

  • 測試所有連結
  • 檢查在不同裝置上的顯示
  • 確保文字沒有錯別字
  • 最終潤飾

🎯 學習重點

學員應該學到:

  1. 網站架構規劃

    • 資訊架構(IA)的概念
    • 如何組織內容
    • 導航設計的重要性
  2. 設計思維

    • 配色原理
    • 版面設計
    • 視覺層級
    • 使用者體驗考量
  3. 響應式設計

    • 理解 RWD 的概念
    • 為什麼手機版很重要
    • 如何測試不同裝置
  4. 個人品牌

    • 如何呈現專業形象
    • 作品集的重要性
    • 持續更新的必要性

🚀 延伸挑戰

課後可以嘗試:

難度 ⭐⭐

  • 替換成真實的照片和圖片
  • 新增更多頁面(每個作品獨立頁面)
  • 加入真實的作品連結

難度 ⭐⭐⭐

  • 新增聯絡表單(使用 Formspree 或 Google Forms)
  • 整合 Google Analytics 追蹤訪客
  • 加入深色模式切換功能

難度 ⭐⭐⭐⭐

  • 連接後端 API 顯示動態內容
  • 新增部落格系統(CMS)
  • 加入多語言支援

🌐 部署指南

方法 1:GitHub Pages(免費、推薦)

  1. 註冊 GitHub 帳號
  2. 建立新的 Repository(例如:my-portfolio)
  3. 將 HTML 檔案改名為 index.html
  4. 上傳到 Repository
  5. 在 Settings > Pages 啟用
  6. 你的網站網址:https://username.github.io/my-portfolio

方法 2:Netlify(免費、更快速)

  1. 註冊 Netlify 帳號
  2. 拖曳你的 HTML 檔案到 Netlify
  3. 幾秒鐘後獲得網址
  4. 可以自訂網域名稱

方法 3:Vercel(免費、專業)

  1. 註冊 Vercel 帳號
  2. 連結 GitHub Repository
  3. 自動部署
  4. 每次更新程式碼自動重新部署

💡 常見問題

Q1:如何替換照片?
A:將 https://placehold.co/200 改成你的照片網址,或使用相對路徑(如 images/photo.jpg)。

Q2:如何改變網站寬度?
A:修改 .container 的 max-width 數值(預設 1200px)。

Q3:如何新增更多頁面?
A:建立新的 HTML 檔案(如 about.html),並在導航列加入連結。

Q4:如何加入 Google Analytics?
A:在 </head> 前加入 GA 追蹤碼。


📦 完整資源包

推薦的免費資源:

圖片:

  • Unsplash(免費高品質圖片)
  • Pexels(免費商用圖片)

圖標:

  • Font Awesome(圖標字體)
  • Ionicons(開源圖標)

字體:

  • Google Fonts(免費網頁字體)
  • 推薦中文字體:Noto Sans TC

配色工具:

  • Coolors.co(配色生成器)
  • Adobe Color(配色靈感)

範例版本: v1.0
測試環境: Chrome, Firefox, Safari
適用於: AI 協作開發工作坊
難度等級: 零基礎友善