从零开始设计一个完整的网站HTMLCSSPHPMySQL-和-JavaScript-实战教程
从零开始设计一个完整的网站：HTML、CSS、PHP、MySQL 和 JavaScript 实战教程
前言
本文将从实战角度出发，带你一步步设计一个完整的网站。我们将从 静态网页 开始，然后加入 动态功能 （使用 PHP），连接 数据库 ，最后加入 JavaScript 实现交互功能。通过这个教程，你将掌握一个网站的真正设计过程！
目录
- 网站功能设计
- 准备工具
- 设计静态网页（HTML + CSS）
- 设计动态网页（PHP）
- 创建数据库（MySQL）
- 加入 JavaScript 实现交互
- 测试与发布
- 总结与扩展
1. 网站功能设计
我们的网站将包含以下功能：
- 首页 ：展示欢迎信息和网站介绍（静态网页）。
- 留言板 ：用户可以提交留言，留言会保存到数据库（动态网页 + 数据库）。
- 关于我们 ：介绍网站的背景信息（静态网页）。
- JavaScript 交互 ：表单验证、动态内容更新等。
2. 准备工具
在开始之前，你需要以下工具：
- 代码编辑器 ：推荐使用 （免费且简单）。
- 本地服务器 ：安装 ，它可以帮助你在电脑上运行 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
我的网站
欢迎来到我的网站！
这是一个简单的网站示例，用来学习网站设计。
运行 HTML
3.3 编写 about.html
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
留言板
留言板
你的名字：
留言内容：
提交留言
运行 HTML
4.2 编写 save_message.php
php
<php
// 连接数据库
$servername = “localhost”;
$username = “root”; // 默认用户名
$password = “”; // 默认密码为空
$dbname = “my_website_db”;
c o n n
n e w m y s q l i ( conn = new mysqli(
co
nn
=
n
e
w
m
ys
ql
i
( servername, $username, $password, $dbname);
// 检查连接
if ($conn->connect_error) {
die(“连接失败: " . $conn->connect_error);
}
// 获取用户提交的数据
$name = $_POST[‘name’];
$message = $_POST[‘message’];
// 插入数据到数据库
s q l
" I N S E R T I N T O m e s s a g e s ( n a m e , m e s s a g e ) V A L U E S ( ′ sql = “INSERT INTO messages (name, message) VALUES ('
s
ql
=
"
I
NSERT
I
NTO
m
ess
a
g
es
(
nam
e
,
m
ess
a
g
e
)
V
A
LU
ES
(
′ name’, ‘$message’)”;
if (
c o n n −
q u e r y ( conn->query(
co
nn
−
q
u
ery
( sql) === TRUE) {
echo “留言成功！”;
} else {
echo “错误: " . $sql . “
” . $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
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
实战教程