免费个人微网站模板,怎么学室内装修设计软件,wordpress主题不一样,给非法公司做网站维护前言
本文将从实战角度出发#xff0c;带你一步步设计一个完整的网站。我们将从 静态网页 开始#xff0c;然后加入 动态功能#xff08;使用 PHP#xff09;#xff0c;连接 数据库#xff0c;最后加入 JavaScript 实现交互功能。通过这个教程#xff0c;你将掌握一个…前言
本文将从实战角度出发带你一步步设计一个完整的网站。我们将从 静态网页 开始然后加入 动态功能使用 PHP连接 数据库最后加入 JavaScript 实现交互功能。通过这个教程你将掌握一个网站的真正设计过程 目录 网站功能设计 准备工具 设计静态网页HTML CSS 设计动态网页PHP 创建数据库MySQL 加入 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 我的网站 欢迎来到我的网站 首页 关于我们 留言板 这是一个简单的网站示例用来学习网站设计。 运行 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( connnewmysqli(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 ( sqlINSERTINTOmessages(name,message)VALUES(′name’, ‘$message’); if ( c o n n − q u e r y ( conn-query( conn−query(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 实战教程
