在当今数字化时代，拥有一个个人或企业网站已经成为展示自我、推广业务的重要途径。对于初学者来说，制作一个静态网站是一个不错的起点。本文将详细介绍如何制作一个静态网站的基本页面。

1. 确定网站结构

在开始制作之前，首先需要确定网站的基本结构。一个典型的静态网站通常包括以下几个页面：

  • 首页（Index）：网站的入口，展示主要内容。
  • 关于我们（About）：介绍网站的背景、团队或个人信息。
  • 服务/产品（Services/Products）：展示提供的服务或产品。
  • 联系我们（Contact）：提供联系方式或留言表单。

2. 编写HTML代码

HTML（超文本标记语言）是构建网页的基础。每个页面的基本结构如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面标题</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>网站标题</h1>
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="about.html">关于我们</a></li>
<li><a href="services.html">服务</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>主要内容标题</h2>
<p>这里是页面的主要内容。</p>
</section>
</main>
<footer>
<p>&copy; 2023 网站名称. 保留所有权利。</p>
</footer>
</body>
</html>

3. 添加CSS样式

CSS（层叠样式表）用于美化网页。创建一个名为styles.css的文件，并添加以下基本样式：

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

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

nav ul {
list-style-type: none;
padding: 0;
}

nav ul li {
display: inline;
margin: 0 15px;
}

nav ul li a {
color: #fff;
text-decoration: none;
}

main {
padding: 20px;
}

footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
position: fixed;
width: 100%;
bottom: 0;
}

4. 创建其他页面

根据网站结构，创建相应的HTML文件，如about.html、services.html和contact.html。每个页面的基本结构与首页类似，只需修改<main>部分的内容即可。

5. 测试与发布

在本地完成所有页面的制作后，使用浏览器打开每个HTML文件进行测试，确保页面显示正常且链接正确。最后，将整个网站文件夹上传至服务器或托管平台，即可发布你的静态网站。

通过以上步骤，你可以轻松制作一个基本的静态网站。随着经验的积累，你可以进一步学习JavaScript、响应式设计等高级技术，使网站更加动态和用户友好。