科技资讯

Document

个人网站制作 Part 1 创建网站 | Web开发项目

文章目录

👩‍💻 基础Web开发练手项目系列：个人网站制作

欢迎来到基础Web开发练手项目系列！本系列旨在帮助初学者通过实际项目构建，掌握Web开发的基本理论和技术。在第一篇中，我们将一起创建一个简单而实用的个人网站。

在这里插入图片描述

🚀 项目概述

个人网站是展示你技能和项目的理想场所。通过这个项目，你将学到如何搭建基本的网页结构、添加样式和交互，以及使用常见的Web开发工具。

🔧 开发工具和环境配置

在开始之前，确保你已经安装了以下工具：

  1. 文本编辑器：用于编写HTML、CSS和JavaScript代码。推荐使用 Visual Studio Code。

  2. 浏览器：用于预览网站。我们推荐使用 Google Chrome 或 Mozilla Firefox

🛠 项目实现步骤

步骤 1: 创建HTML文件

首先，创建一个名为 index.html 的文件。在文件中添加以下基本结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>你的名字 - 个人网站</title>
</head>
<body>
    <header>
        <h1>欢迎来到我的个人网站</h1>
    </header>
    <!-- 其他内容将在后续步骤中添加 -->
</body>
</html>
步骤 2: 添加CSS样式

创建一个名为 style.css 的文件，并将以下样式添加到文件中：

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

header {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 1rem;
}
步骤 3: 链接CSS文件

在 index.html 文件的 <head> 部分中添加以下代码，将CSS文件链接到HTML文件中：

<link rel="stylesheet" href="style.css">
步骤 4: 添加JavaScript交互

在 index.html 文件的 <body> 部分底部添加以下代码，引入JavaScript文件：

<script src="script.js"></script>

创建一个名为 script.js 的文件，并在其中添加一些简单的交互代码，例如：

// 在控制台输出欢迎消息
console.log('欢迎访问我的个人网站！');

🔧 开发工具和环境配置

在开始之前，确保你已经安装了以下工具：

  1. 文本编辑器：用于编写HTML、CSS和JavaScript代码。推荐使用 Visual Studio Code。

  2. 浏览器：用于预览网站。我们推荐使用 Google Chrome 或 Mozilla Firefox

🚀 下一步计划

在下一篇文章中，我们将学习如何添加导航栏、项目展示和联系信息。记得关注本系列，与我们一同进步！

通过这个项目，你将建立起对基础Web开发的坚实理解。祝你编码愉快！