安装基础软件

设计网站外观

注：复杂项目需要更详细的指引，包括颜色、字体、间距、编写规范等等。亦称为设计指南、设计系统、品牌手册

接下来，拿出纸笔画出网站草图。虽然第一个简单网页能做的不多，但最好在一开始就该养成这样的习惯。画草图很有用，而且并不需要梵高的手法。

包括标题和文字

色彩选择器：一个好用的调色板 | 颜色选择器 - Codeeeee 在线工具

色彩提取器：安装 PowerToys | Microsoft Docs

Google 图片搜索

请注意大多数网络图片（包括 Google 图片）都是受版权保护的。为了降低盗版风险，可以使用“Google 许可证过滤器”。点击“工具”按钮，然后在使用权限的选项下选择类似“启用CC授权”的选项：

Google Fonts

网站由文本、代码、样式表、媒体内容、等多种文件组成。构建站点时要确保文件夹结构合理，文件之间交互通畅，没有明显错问，然后再上传至服务器。

对于本地网站，应将所有相关文件放在一个单独文件夹内，可以映射出服务器端站点文件结构。

文中所有的文件夹名和文件都使用小写字母，且没有空格。

很多计算机，特别是 Web 服务器，是对大小写敏感的。
浏览器、Web 服务器，还有编程语言处理空格的方式不一致。比如，一些系统会将包含空格的文件名其视为两个。一些服务器将会把文件名里的空格替换为 “%20”（URI 里空格的编码），从而使链接遭到破坏。
最好使用中划线，而不是下划线来分离单词：对比 my-file.html 和 my_file.html 。谷歌搜索引擎把连字符当作单词的分隔符，但不会识别下划线。基于此，最好在一开始就养成习惯，文件夹和文件名使用小写，用短横线而不是空格来分隔。可以避免许多问题。

最基本的结构：主页、图片文件夹、样式表文件夹和脚本文件夹。

主页index.html：这个文件一般包含主页内容，即用户第一次访问站点时看到的文本和图像。使用文本编辑器在test-site文件夹中新建index.html。
图片文件夹images：这个文件夹包含站点中的所有图像。在 test-site 文件夹中新建 images 文件夹。
样式表文件夹styles：这个文件夹包含站点所需样式表（比如，设置文本颜色和背景颜色）。在 test-site 文件夹中新建一个 styles 文件夹。
脚本文件夹scripts：这个文件夹包含提供站点交互功能的JavaScript代码（比如读取数据的按钮）。在 test-site 文件夹中新建一个 scripts 文件夹。

为使文件间正常交互，应为每个文件提供访问路径，让一个文件知道另一个文件的位置。在index.html 文件中插入一小段 HTML，让其显示设计网站外观小节中的Hello World图案。

打开 index.html 文件，粘贴以下代码。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>我的测试页面</title></head><body><img src="" alt="我的测试页面"></body>
</html>

<img src="" alt="我的测试页面"> 是在页面里插入图像的 HTML 代码。我们需要告诉 HTML 图像的位置。这张图片在 images 目录下_，_而 images 目录与 index.html 处于同级目录。要从 index.html 所处一级目录进入图片所在目录。例如，这里的图像叫做 helloworld.png ，所以文件路径就是 images/helloworld.png 。
在 HTML 代码里 src＝"" 的双引号中插入文件路径。
保存 HTML 文件，然后使用浏览器打开（双击文件）。

文件路径的一些通用规则：

注：Windows 文件系统使用反斜杠而不是正斜杠，比如 C:\Windows 。但与 HTML 没什么关系，即使在 Windows 上做 Web 开发，代码中仍应使用正斜杠。

若引用的目标文件夹位于HTML的上级，需要加上两个点。比如，如果 index.html 在 test-site 下面的一个子目录html中，而 helloworld.png 在 test-site 目录，你可以在 index.html 里使用 ../``helloworld.png 引用 helloworld.png 。
以上方法可以随意组合，比如 ../subdirectory/another-subdirectory/helloworld.png。