前言
本文将从实战角度出发，带你一步步设计一个完整的网站。我们将从 静态网页 开始，然后加入 动态功能 （使用 PHP），连接 数据库 ，最后加入 JavaScript 实现交互功能。通过这个教程，你将掌握一个网站的真正设计过程！
目录
-
网站功能设计
-
准备工具
-
设计静态网页（HTML + CSS）
-
设计动态网页（PHP）
-
创建数据库（MySQL）
-
加入 JavaScript 实现交互
-
测试与发布
-
总结与扩展
1. 网站功能设计
我们的网站将包含以下功能：
-
首页：展示欢迎信息和网站介绍（静态网页）。
-
留言板：用户可以提交留言，留言会保存到数据库（动态网页 + 数据库）。
-
关于我们：介绍网站的背景信息（静态网页）。
-
JavaScript 交互：表单验证、动态内容更新等。
2. 准备工具
在开始之前，你需要以下工具：
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
7. 测试与发布
-
将项目文件夹放到 XAMPP 的
htdocs文件夹中。 -
打开浏览器，访问
http://localhost/my_website/index.html。 -
测试各个页面的功能。
8. 总结与扩展
通过这个项目，你学会了：
-
使用 HTML 和 CSS 设计静态网页。
-
使用 PHP 实现动态功能。
-
使用 MySQL 数据库保存数据。
-
使用 JavaScript 实现交互功能。
你可以继续扩展这个网站，比如添加用户登录、图片上传等功能。加油！
如果你有任何问题，欢迎在评论区留言！如果觉得这篇文章对你有帮助，别忘了点赞、收藏和关注哦！👍
标签 ：网站设计 HTML CSS PHP MySQL JavaScript 实战教程