练习 - 设置 Web 应用的结构

创建和管理网站项目有各种方法。根据你所拥有的特定工具以及组织偏好，会有所不同。创建网站时，由于项目结构愈发复杂，项目结构随时间变化是常见现象。大型项目通常需要更高程度的谨慎和专注，以便许多人能够理清所有内容。关键在于保持组织的相似性，这里提供了可以帮助你的常见策略。

在本单元中，你将使用 Visual Studio Code 创建一个小型项目结构。该项目包含三个文件：一个 HTML 文件、一个 CSS 文件和一个 JavaScript 文件。你还将添加一个 Visual Studio Code 扩展，以简化在浏览器中运行网站的工作。

为网站新建一个文件夹

打开 Visual Studio Code。

打开 Visual Studio Code 时，会打开“欢迎”页。请注意，可以在“开始”列表中创建新文件或打开文件夹。

如果看不到“欢迎”页，可以通过在菜单上选择“帮助”>“欢迎”来显示它。（或者，可以通过使用键盘快捷方式 Shift+Ctrl+P（在 Windows 计算机上）或 Shift+Cmd+P（在 macOS 上）打开“命令面板”或者通过从 Visual Studio Code 菜单中选择“查看”>“命令面板”来显示“欢迎”页面。当显示“命令面板”时，在搜索字段中输入“>帮助: 欢迎”打开“欢迎”页面。）
在“欢迎”页的“开始”列表中选择“打开文件夹”，或者从 Visual Studio Code 菜单中选择“文件”>“打开文件夹”。

打开文件夹时，操作系统会提供用于创建新文件夹的菜单选项。
导航到要在其中为网站创建新文件夹的位置，然后选择“新建文件夹”。
将文件夹命名为 simple-website，然后选择“选择文件夹”。

重要

如果出现 Visual Studio Code 对话框，请选择“信任父文件夹中所有文件的作者...”；这是工作区信任功能，可让你决定项目文件夹是应允许还是限制自动执行代码。你刚刚创建了文件夹，因此它是安全的。

创建新文件时，从菜单中选择“文件”>“新建文件”，或在 Windows 上使用 Control+N，或在 macOS 上使用 Command+N。
在 Windows 上选择 Control+S，或在 macOS 上选择 Command+S 来保存文件。
输入 index.html 作为文件名，然后选择“保存”。
重复上述步骤，再创建两个文件，main.css 和 app.js。完成后，Visual Studio Code 资源管理器中的 simple-website 项目文件夹应包含以下文件：
- index.html
- main.css
- app.js

生成网站时，可以在单个文件中包括所有 HTML、CSS 样式和 JavaScript 代码。但是，在本练习中，你将使用 HTML 文件作为内容结构，使用 CSS 文件进行样式设置，并使用 JavaScript 文件实现交互性。

设置三个文件有助于组织网站项目。将内容、样式和逻辑分开可以体现渐进式增强。即使 JavaScript 未启用或不受客户支持，CSS 和 HTML 将仍旧有效。但是，如果客户不支持 CSS，则至少会显示 HTML 内容。

可以使用扩展市场扩展 Visual Studio Code 的功能。请注意，这些扩展是社区开发的资源，对于同一类型的功能，通常存在若干解决方案。可以在编辑器中逐个安装扩展，也可以使用命令行同时安装多个扩展。

对于 Web 开发，你现在只需open in browser。此扩展可帮助你在默认浏览器中快速打开网站，而不是将文件 URL 复制并粘贴到浏览器中。

若要安装此扩展，请使用以下步骤：

选择垂直“活动栏”（左窗格）上的“扩展”图标。
在搜索栏中输入“open in”，然后选择 TechER 发布的“open in browser”扩展。
选择“安装”后，Visual Studio Code 将安装扩展。
单击“活动栏”中的顶部图标，或在 Windows 上使用 Control+Shift-E，或在 macOS 上使用 Command+Shift-E 切换回“资源管理器”。

我们继续！安装和设置需要一些额外的时间，但你只需安装和设置一次。现在可以开始创建网站。