[Day-28] 從設計到實現：開發屬於你的第一個網頁

2024 iThome 鐵人賽

DAY 29

Modern Web

初學者入門 - 有人叫我寫blog那就來做吧！系列第 29 篇

16th鐵人賽

麻糬Mouchi

2024-10-13 23:50:28

66 瀏覽

分享至

前面聊這麼久，我們來做一下簡單小網頁練習

1. 環境準備

在開始之前，你需要用一個順手的編輯器
我自己是比較喜歡用VSCode 搭配擴充套件例如： LiveServer 可以做即時預覽

2.基本HTML結構

在使用VSCode時，第一需要先開啟資料夾，並建立一個名為index.html的檔案
輸入 ! 按下 tab 應該會就會出HTML基本結構了

大概長這樣

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

3.套用設計指引

如果你們有像我昨天那樣撰寫設計指引，那應該就會有初步的認識
我個人習慣將整體架構運用註解先規劃好要做甚麼 (這邊小提示，也可以裝擴充套件讓 TODO 這個詞彙變得明顯)

這邊我給一個假設的案例：

配色與主題：
- 基本色彩：主要背景色為淺灰（#f0f0f0），文字色為深灰（#333），卡片背景色為白色（#fff），強調色為藍色（#4a90e2）。
- 暗色模式：背景色變為深灰（#222），文字色為淺灰（#e0e0e0），卡片背景色為中灰（#333），強調色為亮藍（#64b5f6）。
- 過渡效果：背景色和文字色的變化設有0.3秒的平滑過渡，增強視覺效果。
文字與排版：
- 字體：採用 Noto Sans TC 無襯線字體，更適合清晰易讀
- 排版：標題使用大號字體以突出顯示（2.5em），正文行高為1.6，提高閱讀舒適度。
布局與結構：
- 卡片式設計：每個卡片具有圓角和陰影，增加立體感和層次感，並在鼠標懸停時提供動態效果（向上移動和陰影加深）。
互動元素：
- 暗色模式切換：提供一個按鈕來切換網站的色彩主題，並隨著模式改變按鈕文字。
- 動畫效果：在轉換主題時，擁有漸變效果；公告顯示也有彈出效果
行為和功能：
- 公告顯示與隱藏：頁面底部的公告條會在頁面載入後自動彈出，並在5秒後自動隱藏。

測試網頁效果：

以下為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>
        :root {
            --bg-color: #f0f0f0;
            --text-color: #333;
            --card-bg: #fff;
            --card-shadow: 0 4px 6px rgba(0,0,0,0.1);
            --accent-color: #4a90e2;
        }

        body {
            font-family: 'Noto Sans TC', sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            transition: background-color 0.3s, color 0.3s;
            margin: 0;
            padding: 20px;
            line-height: 1.6;
        }

        .dark-mode {
            --bg-color: #222;
            --text-color: #e0e0e0;
            --card-bg: #333;
            --card-shadow: 0 4px 6px rgba(255,255,255,0.1);
            --accent-color: #64b5f6;
        }

        header {
            text-align: center;
            margin-bottom: 40px;
        }

        h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
        }

        #mode-toggle {
            background-color: var(--accent-color);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 20px;
            cursor: pointer;
            transition: transform 0.3s;
        }

        #mode-toggle:hover {
            transform: scale(1.05);
        }

        .card-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
        }

        .card {
            background-color: var(--card-bg);
            border-radius: 10px;
            box-shadow: var(--card-shadow);
            padding: 20px;
            width: calc(33.333% - 20px);
            min-width: 250px;
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 12px rgba(0,0,0,0.15);
        }

        .card h2 {
            color: var(--accent-color);
            margin-top: 0;
        }

        @media (max-width: 768px) {
            .card {
                width: calc(50% - 20px);
            }
        }

        @media (max-width: 480px) {
            .card {
                width: 100%;
            }
        }

        #announcement {
            background-color: var(--accent-color);
            color: white;
            padding: 10px;
            text-align: center;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            transform: translateY(100%);
            transition: transform 0.3s;
        }

        #announcement.show {
            transform: translateY(0);
        }
    </style>
</head>
<body>
    <header>
        <h1>我的測試網頁</h1>
        <button id="mode-toggle">切換暗色模式</button>
    </header>

    <div class="card-container">
        <div class="card">
            <h2>最新文章</h2>
            <p>這裡是最新文章的摘要。點擊閱讀更多精彩內容！</p>
        </div>
        <div class="card">
            <h2>專案展示</h2>
            <p>查看我最近完成的專案。</p>
        </div>
        <div class="card">
            <h2>關於我</h2>
            <p>了解更多關於我的背景和專業技能。</p>
        </div>
    </div>

    <div id="announcement">
        新功能上線：現在支援暗色模式啦！
    </div>

    <script>
        const modeToggle = document.getElementById('mode-toggle');
        const body = document.body;
        const announcement = document.getElementById('announcement');

        modeToggle.addEventListener('click', () => {
            body.classList.toggle('dark-mode');
            if (body.classList.contains('dark-mode')) {
                modeToggle.textContent = '切換亮色模式';
            } else {
                modeToggle.textContent = '切換暗色模式';
            }
        });

        // 顯示公告
        setTimeout(() => {
            announcement.classList.add('show');
        }, 1000);

        // 5秒後隱藏公告
        setTimeout(() => {
            announcement.classList.remove('show');
        }, 6000);

        // 載入動畫
        document.addEventListener('DOMContentLoaded', () => {
            document.querySelectorAll('.card').forEach((card, index) => {
                setTimeout(() => {
                    card.style.opacity = '1';
                    card.style.transform = 'translateY(0)';
                }, index * 200);
            });
        });
    </script>
</body>
</html>