目录

• 安装基础软件
• 设计网站外观
  • 做出计划
  • 绘制草图
  • 选定内容
    • 文本
    • 主题颜色
    • 图像
    • 字体
• 处理文件
  • 网站应保存在何处？
  • 关于大小写和空格的提示
  • 网站应该使用什么结构？
  • 文件路径

安装基础软件

• 计算机
• WebStorm
• Web浏览器：Microsoft Edge
• 图像编辑器
• 版本控制系统：Gitee - 基于 Git 的代码托管和研发协作平台
• 自动化构建工具：用来自动完成压缩代码和运行测试等重复性任务（使用WebStorm中的插件：Gradle）

设计网站外观

做出计划

• 网站主题是什么？
• 基于所选主题要展示哪些信息？
• 网站采用怎样的外观？

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

绘制草图

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

选定内容

文本

包括标题和文字

主题颜色

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

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

图像

Google 图片搜索

1. 找到心仪的图片时，单击放大。
2. 右击图片，选择 “另存图像为...”，然后选择一个安全的位置存放这张图像。也可以复制你的浏览器地址栏上的图像地址以便后来使用。

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

字体

Google Fonts

1. 打开右侧边栏可现实选中的字体家族。
2. 可通过 Categories（类别）、Languages（语言）、Font Properties（字体属性）过滤想要的字体。
3. 在列出的字体风格列表中，选择合适的粗细、是否倾斜等信息。
4. 在右侧边栏中可以看到 Google 给出的代码片段，将其复制到文本编辑器就可以使用了。

处理文件

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

网站应保存在何处？

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

web-projectstest-site

关于大小写和空格的提示

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

my-file.htmlmy_file.html

网站应该使用什么结构？

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

index.htmltest-siteindex.htmlimagestest-siteimagesstylestest-sitestylesscriptstest-sitescripts

文件路径

index.html

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

helloworld.pngimages/helloworld.png

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

index.htmltest-sitehtmlhelloworld.pngtest-siteindex.html../``helloworld.pnghelloworld.png../subdirectory/another-subdirectory/helloworld.png

Web入门(2)——HTML基础