完全新手也能做网站！

先说重点：你不需要任何程序经验，只要会用记事本和浏览器就能做网站！

想像一下：

• 就像写 Word 文档一样简单
• 不用花钱买软件，只要有电脑就行
• 不用背程序代码，复制粘贴就完成
• 10分钟内就能看到成果

我们会做出什么？

一个简单但完整的个人网站，包含：

• 你的名字和简介
• 几张照片或作品
• 联系方式
• 在手机和电脑上都好看

总共只需要3样东西：

1. 记事本（电脑里就有）
2. 浏览器（Chrome、Edge 都行）
3. 10分钟时间

第一步：打开记事本开始写

什么是 HTML？

想像你在写一份文档：

• 一般文档：你写「标题」，看起来就是普通文字
• HTML 文档：你写「<h1>标题</h1>」，浏览器就知道要把它变大、变粗

HTML 就是告诉浏览器：「这段是标题、那段是内文、这里放照片」的说明书。

开始动手做

步骤 1：打开记事本

• Windows：开始菜单 → 搜索「记事本」
• Mac：启动台 → 搜索「文本编辑」

步骤 2：复制下面的程序代码 不要怕这些看起来很复杂的字，就直接复制粘贴：

第二步：修改成你自己的信息

现在你有一个基本的网站了！但里面还是范例内容，我们来改成你自己的信息。

要改哪些地方？

找到这些文字并改成你的：

1. 「你的名字」 → 改成你的真名或昵称
2. 「关于我」的内容 → 写一些你的介绍
3. 「我的兴趣」 → 改成你真正的兴趣
4. 「[email protected]」 → 改成你的真实邮箱

简单修改范例

原本：我是 <strong>你的名字</strong>
改成：我是 <strong>小美</strong>

原本：[email protected]
改成：[email protected]

想要更漂亮？简单加个照片

如果你想加照片，找到这一行：

<p>这是我的第一个网站，很开心你来参观！</p>

在下面加上：

<img src="https://picsum.photos/300/200" alt="我的照片" style="width:300px; border-radius:10px;">

解释：

• https://picsum.photos/300/200 是一张随机美图
• 你可以改成你自己的照片网址
• width:300px 控制照片大小
• border-radius:10px 让照片有圆角

第三步：检查你的成果

储存文件

超级重要的步骤：

1. 在记事本按「文件」→「另存为」
2. 文件名称填：index.html（一定要 .html）
3. 文件类型选：「所有文件 (.)」
4. 编码选：「UTF-8」
5. 存到桌面或你记得的地方

开启你的网站

双击你刚存的 index.html 文件

如果一切顺利，浏览器会开启并显示你的网站！

如果出现问题

常见问题和解决方法：

问题1：双击文件没反应

• 检查文件名是否为 .html 结尾
• 尝试右键 → 打开文件 → 选择浏览器

问题2：网页看起来很丑

• 可能复制程序代码时有缺少部分
• 重新复制完整的程序代码

问题3：中文变成乱码

• 重新储存文件，编码选择「UTF-8」

问题4：修改后没有变化

• 记得要存文件
• 重新刷新浏览器（按F5）

第四步：让网站在手机上也好看

你现在的网站在电脑上看很棒，但在手机上可能会太小或跑版。我们来简单修正一下。

什么是响应式设计？

简单说就是：

• 在大屏幕（电脑）上，网站看起来是一种样子
• 在小屏幕（手机）上，网站会自动调整变得适合阅读

超简单的修正方法

在你的程序代码最上面，找到 <style> 这一行，在它的下面加上这段：

/* 让网站在手机上也好看 */
@media (max-width: 600px) {
    body {
        padding: 10px;
    }
    
    .container {
        padding: 20px;
    }
    
    h1 {
        font-size: 24px;
    }
    
    .intro {
        font-size: 16px;
    }
}

这段程序代码的意思：

• 当屏幕宽度小于600px（手机大小）时
• 自动缩小一些间距和文字大小
• 让内容更适合小屏幕阅读

测试手机版本

在电脑上测试：

1. 在浏览器按 F12（开启开发者工具）
2. 点击手机图示（响应式设计模式）
3. 选择不同的手机型号查看效果

在手机上测试：

1. 把 index.html 传到手机（用云端硬盘或微信）
2. 在手机上开启文件
3. 看看是否显示正常

第五步：把网站放到网络上让大家看到

现在你的网站只能在你的电脑上看到，我们来把它放到网络上！

免费网站托管 - GitHub Pages

GitHub Pages 是什么？

• 免费的网站托管服务
• 全世界的人都能看到你的网站
• 不用花钱，不用复杂设定

超简单上传步骤

步骤1：注册 GitHub

1. 去 github.com
2. 点「Sign up」注册帐号
3. 照着指示完成注册

步骤2：建立新的仓库

1. 登入后点右上角的「+」→「New repository」
2. Repository name 填：你的使用者名称.github.io
3. 勾选「Public」和「Add a README file」
4. 点「Create repository」

步骤3：上传你的网站

1. 点「uploading an existing file」
2. 把你的 index.html 拖拽到网页里
3. 在下面写「Add my first website」
4. 点「Commit changes」

步骤4：查看你的网站

• 等1-2分钟
• 在浏览器输入：https://你的使用者名称.github.io
• 你的网站就上线了！

其他简单的选择

如果GitHub太复杂，还有这些超简单的选择：

Netlify Drop

1. 去 netlify.com/drop
2. 直接把你的 index.html 拖拽进去
3. 马上得到一个网址

CodePen

1. 去 codepen.io
2. 注册免费帐号
3. 把程序代码复制粘贴
4. 立刻分享给朋友

恭喜你！现在你是网页设计师了

你已经学会了什么

经过这个教学，你已经：

• ✅ 建立了你的第一个网站 - 有完整的内容和设计
• ✅ 学会了基本的HTML - 知道标签是怎么运作的
• ✅ 做出响应式设计 - 网站在手机上也好看
• ✅ 把网站放到网络上 - 全世界都能看到
• ✅ 有了成就感 - 你真的做出了一个网站！

接下来可以做什么？

立即可以尝试：

1. 换个颜色 - 把 #4285f4 改成 #e74c3c（红色）或 #2ecc71（绿色）
2. 加更多页面 - 复制 index.html，改名为 about.html，写不同内容
3. 加照片 - 上传照片到免费图床，放到你的网站里
4. 学更多语法 - 搜索「HTML CSS教学」继续学习

进阶学习方向：

1. CSS 美化 - 学会更多样式和动画效果
2. JavaScript 交互 - 让网站有按钮、表单等交互功能
3. 设计工具 - 学习 Figma 设计网站外观
4. 更多功能 - 加入购物车、会员系统等

给新手的鼓励

记住这些重点：

• 🎯 每个专家都是从新手开始 - 不要因为不懂而感到挫折
• 💪 做中学最快 - 比看一百本书更有效
• 🔥 犯错是正常的 - 网站坏了可以修，勇敢尝试
• 🌟 享受创造的乐趣 - 你正在创造属于自己的数字作品

下次有朋友说「我不会做网站」，你可以很自豪地说：「我会！而且我可以教你！」

更多新手友善的教学

如果你喜欢这种简单易懂的教学风格，可以继续看：

• 我的第一个动画效果 - 让网站动起来
• 如何选择好看的颜色 - 色彩搭配技巧
• 免费设计工具推荐 - 不用花钱做设计

开始行动吧！每个网页大师都是从复制粘贴第一行程序代码开始的 😊