当前位置：首页 > article >正文

从零开始设计一个完整的网站：HTML、CSS、PHP、MySQL 和 JavaScript 实战教程

article 2025/2/12 19:39:49

前言

本文将从实战角度出发，带你一步步设计一个完整的网站。我们将从 静态网页 开始，然后加入 动态功能（使用 PHP），连接 数据库，最后加入 JavaScript 实现交互功能。通过这个教程，你将掌握一个网站的真正设计过程！

1. 网站功能设计

我们的网站将包含以下功能：

首页：展示欢迎信息和网站介绍（静态网页）。
留言板：用户可以提交留言，留言会保存到数据库（动态网页 + 数据库）。
关于我们：介绍网站的背景信息（静态网页）。
JavaScript 交互：表单验证、动态内容更新等。

2. 准备工具

在开始之前，你需要以下工具：

代码编辑器：推荐使用 VS Code（免费且简单）。
本地服务器：安装 XAMPP，它可以帮助你在电脑上运行 PHP 和数据库。
浏览器：用来测试你的网站（比如 Chrome 或 Edge）。

3. 设计静态网页（HTML + CSS）

静态网页使用 HTML 和 CSS 来编写。

3.1 创建项目文件夹

在你的电脑上创建一个文件夹，比如叫 my_website，里面放以下文件：

index.html（首页）
about.html（关于我们）
style.css（样式文件）
contact.php（留言板，后面会用到）

3.2 编写 `index.html`

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的网站</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>欢迎来到我的网站！</h1>
        <nav>
            <a href="index.html">首页</a>
            <a href="about.html">关于我们</a>
            <a href="contact.php">留言板</a>
        </nav>
    </header>
    <main>
        <p>这是一个简单的网站示例，用来学习网站设计。</p>
    </main>
</body>
</html>

运行 HTML

3.3 编写 `about.html`

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>关于我们</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>关于我们</h1>
        <nav>
            <a href="index.html">首页</a>
            <a href="about.html">关于我们</a>
            <a href="contact.php">留言板</a>
        </nav>
    </header>
    <main>
        <p>我们是一个热爱编程的团队，致力于帮助大家学习网站设计！</p>
    </main>
</body>
</html>

运行 HTML

3.4 编写 `style.css`

css

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
}

header {
    background-color: #333;
    color: white;
    padding: 10px;
    text-align: center;
}

nav a {
    color: white;
    margin: 0 10px;
    text-decoration: none;
}

main {
    padding: 20px;
    text-align: center;
}

4. 设计动态网页（PHP）

动态网页可以让用户提交数据，并将数据保存到数据库中。

4.1 编写 `contact.php`

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>留言板</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>留言板</h1>
        <nav>
            <a href="index.html">首页</a>
            <a href="about.html">关于我们</a>
            <a href="contact.php">留言板</a>
        </nav>
    </header>
    <main>
        <form action="save_message.php" method="post">
            <label for="name">你的名字：</label>
            <input type="text" id="name" name="name" required>
            <br>
            <label for="message">留言内容：</label>
            <textarea id="message" name="message" required></textarea>
            <br>
            <button type="submit">提交留言</button>
        </form>
    </main>
</body>
</html>

运行 HTML

4.2 编写 `save_message.php`

php

<?php
// 连接数据库
$servername = "localhost";
$username = "root"; // 默认用户名
$password = ""; // 默认密码为空
$dbname = "my_website_db";

$conn = new mysqli($servername, $username, $password, $dbname);

// 检查连接
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

// 获取用户提交的数据
$name = $_POST['name'];
$message = $_POST['message'];

// 插入数据到数据库
$sql = "INSERT INTO messages (name, message) VALUES ('$name', '$message')";

if ($conn->query($sql) === TRUE) {
    echo "留言成功！";
} else {
    echo "错误: " . $sql . "<br>" . $conn->error;
}

$conn->close();
?>

5. 创建数据库（MySQL）

打开 XAMPP，启动 Apache 和 MySQL。
打开浏览器，访问 http://localhost/phpmyadmin。
创建一个新的数据库，名字叫 my_website_db。
在数据库中创建一张表，名字叫 messages，包含以下字段：
- id（主键，自动递增）
- name（用户名字）
- message（留言内容）

6. 加入 JavaScript 实现交互

6.1 表单验证

在 contact.php 中加入 JavaScript 表单验证功能：

html

<script>
function validateForm() {
    var name = document.getElementById("name").value;
    var message = document.getElementById("message").value;

    if (name === "" || message === "") {
        alert("名字和留言内容不能为空！");
        return false; // 阻止表单提交
    }
    return true; // 允许表单提交
}
</script>

6.2 动态更新内容

在 index.html 中加入 JavaScript 动态显示时间功能：

html

<script>
function showTime() {
    var timeElement = document.getElementById("time");
    var now = new Date();
    timeElement.innerHTML = "当前时间：" + now.toLocaleTimeString();
}
</script>

运行 HTML