實作一個簡單的靜態網頁：從頭開始

2024 iThome 鐵人賽

DAY 3

JavaScript

學習網頁的眉眉角角系列第 3 篇

16th鐵人賽

tsou3636

2024-09-17 23:41:42

130 瀏覽

分享至

在前面兩天，我介紹了 HTML 和 CSS 這兩種技術，今天，我將用這些基礎技術來製作一個簡單的靜態網頁。透過這個實作，可以更了解如何將所學的概念應用到實際的開發中。

步驟 1：建立 HTML 結構
首先，需要建立網頁的基礎 HTML 結構。打開編輯器（例如 VSCode），然後創建一個名為 index.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>
</head>
<body>
    <header>
        <h1>歡迎來到我的簡單網頁</h1>
    </header>

    <nav>
        <ul>
            <li><a href="#">首頁</a></li>
            <li><a href="#">關於我</a></li>
            <li><a href="#">聯絡方式</a></li>
        </ul>
    </nav>

    <main>
        <section>
            <h2>關於這個網站</h2>
            <p>這是我學習 HTML 和 CSS 的第一個簡單網頁實作。</p>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 我的網站</p>
    </footer>
</body>
</html>

說明：
header：是網頁的標頭，通常用來放置標題或導覽列。
nav：是導覽區域，我們放置了一個簡單的導覽列。
main：是網頁的主要內容區域，這裡我們加入了一個簡單的段落，介紹網頁的用途。
footer：是網頁的底部區域，通常用來放置版權資訊或聯絡方式。

步驟 2：加入 CSS 美化
接下來，為了讓網站看起來更美觀，需要透過CSS來美化。創建一個名為 style.css 的檔案，並在 index.html 中加入這段連結：

在 style.css 中，添加以下代碼：

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}
header {
    background-color: #333;
    color: white;
    padding: 10px 0;
    text-align: center;
}
nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    background-color: #444;
}
nav ul li {
    margin: 0 15px;
}
nav ul li a {
    color: white;
    text-decoration: none;
}
main {
    padding: 20px;
    text-align: center;
}
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
    position: fixed;
    width: 100%;
    bottom: 0;
}

說明：
1.為 body 設定了字型和行高，讓內容更易讀。
2.header 和 footer 都使用了深色背景，並將文字顏色設為白色。
3.導覽列的樣式設定為水平排列，並且去掉了項目的預設樣式。

總結
我用 HTML 結構化內容和 CSS 來美化網頁外觀。一個基本但重要的步驟。之前有做過網頁了，雖然有做過，但是沒有很熟悉，這幫助我更深入的理解了。接下來下一篇，我會把網站呈現出來，實作更多互動功能。