在互联网世界中，静态网站因其简洁、快速加载和易于维护的特点，一直是个人博客、小型企业展示和项目介绍的首选，本教程将带你一步步从零开始，制作一个简单的静态网站，以下是详细的步骤和源码，确保你能够独立完成。
准备工作
在开始之前，请确保你的电脑上已安装以下工具：
1、文本编辑器：如Notepad++、Sublime Text或Visual Studio Code。
2、网页浏览器：用于预览和测试网站效果。
图片来源于网络，如有侵权联系删除
3、图片编辑软件（可选）：如果你打算使用图片，可能需要一些基本的图片编辑技能。
第一步：创建网站结构
我们需要创建一个文件夹来存放我们的网站文件，这个文件夹可以命名为my_website。
在my_website文件夹中，我们可以创建以下文件：
index.html：网站的首页。
about.html：关于页面。
contact.html：联系方式页面。
图片来源于网络，如有侵权联系删除
style.css：网站的样式表。
script.js：网站的脚本文件。
第二步：编写HTML代码
让我们开始编写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>
</header>
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="about.html">lt;/a></li>
<li><a href="contact.html">联系</a></li>
</ul>
</nav>
<main>
<section>
<h2>这里是主要内容</h2>
<p>这里是详细内容...</p>
</section>
</main>
<footer>
<p>版权所有 © 2023 我的静态网站</p>
</footer>
<script src="script.js"></script>
</body>
</html>第三步：添加CSS样式
我们需要为网站添加一些样式，在style.css文件中，我们可以添加以下代码：
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header, footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 1em 0;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 20px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
main {
padding: 20px;
}
section {
margin-bottom: 20px;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 1em 0;
position: fixed;
bottom: 0;
width: 100%;
}第四步：编写JavaScript代码
图片来源于网络，如有侵权联系删除
虽然我们的静态网站目前不需要JavaScript，但我们可以编写一些简单的交互功能，在script.js文件中，我们可以添加以下代码：
// 这里可以添加一些JavaScript代码，
document.addEventListener('DOMContentLoaded', function() {
console.log('页面加载完毕！');
});第五步：测试和部署
完成以上步骤后，打开你的网页浏览器，分别访问index.html、about.html和contact.html来测试你的网站，确保所有的页面都能够正常显示，并且导航链接能够正确跳转。
如果你的网站只是为了个人展示或测试，你可以在本地运行，如果你想要将网站发布到互联网上，你需要将其部署到一个网站托管服务提供商，如GitHub Pages、Netlify或Vercel等。
通过以上步骤，你已经成功制作了一个简单的静态网站，虽然这个网站的功能非常基础，但它为你提供了一个很好的起点，你可以在此基础上添加更多的内容和功能，逐步构建起自己的网站，实践是学习最好的方式，不断尝试和修改，你的网站将会越来越完善。
标签： #制作一个静态网站源码
评论列表