1.1安装基础软件【web技术私房菜】

专业人员会使用的工具：

计算机：Windows，Mac或者Linux系统
文本编辑器：使用纯文本编辑器（Visual Studio Code、Atom）和混合编辑器（Dreamweaver或WebStorm）
Web浏览器：用来测试代码。使用最多的是火狐，谷歌，Opera，Safari；Lynx是一个基于文本的终端Web浏览器，可以用来测试视力障碍用户的浏览体验。
图像编辑器：用来编辑网页中的图形图像，PS、XD。
版本控制系统：用来管理服务器上的文件，支持项目团队协作，共享代码资源。当下最流行的版本控制工具是Git，同时基于Git的代码托管服务网站Github十分流行。
FTP工具：老师Web托管账户，逐渐被Git取代，如Cyberduck、Fetch和FileZilla。
自动化构建工具：用来自动完成压缩代码和运行测试等重复性任务，如Grunt、Gulp
模板，库，框架等等可以提高效率的工具

最短的开发工具清单：

安装文本编辑框：Visual Studio Code可以实时免费预览，特别好用，简单的可以记事本禾TextEdit
安装现代web浏览器：

Linux系统: Firefox、Chrome、Opera、Brave。
Windows系统: Firefox、Chrome、Opera、Internet Explorer（Windows 7 及以上版本可以安装 Internet Explorer 11）、Microsoft Edge（Windows 10 的默认浏览器，采用 Chromium 内核）、Brave。
macOS系统: Firefox、Chrome、Opera、Safari（macOS 和 iOS 的默认浏览器）、Brave。

要至少准备两款或以上的浏览器用于测试。

3.安装本地Web服务器

第一步：做出计划

开始之前，请考虑以下问题：

网站的主题是什么？是狗、上海城市还是吃豆人？
基于所选的主题要展示哪些信息？写下标题和几段文字，构思一个用于展示的图形。
网站采用怎样的外观？用高阶术语说就是，选什么背景色？什么字体（正式的或卡通，粗体还是细体）？

绘制草图

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

注：即使在现实的复杂网站中，设计团队也是首先在纸上画出草稿，然后在图形编辑器中或者使用web技术做出数码模型。

web团队通常包括一个图形设计师和用户体验设计师。图形设计师的作用很明显是将网页视觉部分组合在一起。用户体验设计师则以一种更抽象的模式来定义用户和交互。

选定内容

此时可以开始组织网页上的内容了。

文本

准备好刚才撰写的标题和文字。

主题颜色

打开色彩选择器挑选心仪的颜色。选中某种颜色时，你会看到一个六位神秘代码，类似于#660066。它是一个十六进制数，用于表示颜色。将其复制并展示保存。

图像

访问 Google 图片搜索来搜索合适的图片。

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

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

字体

要选择一种字体：

访问 Google Fonts 挑选心仪的字体。也可以在左侧控制栏中过滤结果。
选中字体后点击右上角的“加号”按钮。
点击页面底部面板中的 "* Family Selected" （选中*族字体）按钮（ "*" 取决于所选字体数量）。
在弹出框中，可以看到 Google 给出的代码片段，将其复制到文本编辑器就可以使用了。

网站应该保存在何处？

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

文件夹存在哪儿都可以，只要容易找到，比如桌面、用户家目录，或是系统根目录。

确定网站项目储存位置。在该位置下创建一个文件夹（比如web-projects）。又有网闸项目都存在一处
在这个文件夹里再新建一个文件夹（比如test-site，你可以自由发挥想象），来存放第一个网站。

关于大小写和空格的提示

你会注意到，文中所有的文件夹名和保存一张图片文件都使用小写字母，且没有空格。这是因为：

1.很多计算机，特别是web服务器，是对大小写敏感的。比如，如果你保存一张图片test-site/MyImage.jpg，然后再另一处以test-site/myimage.jpg访问这张图片，可能会失败。

2.浏览器、web服务器，还有编程语言处理空格的方式不一致。比如，一些系统会将包含空格的文件名其视为两个。一些服务器将会把文件名里的空格替换为“%20”（URL里空格的编码），从而使链接遭到破坏。最好使用中划线，而不是下划线来分离单词：对比my-file.html和my_file.html。

简而言之，文件名中应使用连字符。谷歌搜索引擎把连字符当作单词的分隔符，但不会识别下划线。基于此，最好在一开始就养成习惯，文件夹和文件名使用小写，用短横线而不是空格来分隔。可以避免许多问题。

网站应该使用什么结构？

下面来看看测试网站应该使用什么结构。最基本、最常见的结构是：一个主页、一个图片文件夹、一个样式表文件夹和一个脚本文件夹：

1.index.html：这个文件一般包含主页内容，即用户第一次访问站点时看到的文本和图像。使用文本编辑器在test-site文件夹中新建index.html。

2.images 文件夹：这个文件夹包含站点中的所有图像。在test-site文件夹中新建images文件夹。

3.styles 文件夹：这个文件夹包含站点所需样式表（比如，设置文本颜色和背景颜色）。在test-site文件夹中国新建一个styles文件夹。

4.scripts 文件夹：这个文件夹包含提供站点交互功能的JavaScript代码（比如读取数据的按钮）。在test-site文件夹中新建一个script文件夹。

注：Windows 中查看完整文件名有点小麻烦，因为 Windows 默认开启“隐藏已知文件类型扩展名”选项。在 Windows 8/10 中，可以打开资源管理器，选择“查看”选项卡，在“显示/隐藏”列中，选中“文件扩展名”复选框。其它 Windows 版本操作方法可在网上搜索。

文件路径

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

将图案保存带image文件夹。
打开index.html文件，粘贴以下代码。现在看不懂不用担心，以后会慢慢讲解。

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

3.<img scr="" alt="我的测试页面">是在页面里插入图像的HTML代码。我们需要告诉HTML的图像的位置。这张图片在imagges目录下，而images目录与index.html处于同级目录。要从index.html所处一级目录进入图片所在目录，所需的文件路径是images/image-filename.png。例如，这里的图像叫做firefox-icon.png ，所以文件路径就是 images/firefox-icon.png 。

4.在HTML代码里scr=""的双引号中插入文件路径。

5.保存HTML文件，然后使用浏览器打开（双击文件）。图案显示出来了

wen

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

若引用的目标文件与 HTML 文件同级，只需直接使用文件名，比如 my。
要引用子文件夹中的文件，要在路径前写下目录名并加一个斜杠，比如 subdirectory/my-image.jpg 。
若引用的目标文件位于 HTML 文件的上级，需要加上两个点。比如，如果 index.html 在 test-site 下面的一个子目录而 my-image.png 在 test-site 目录，你可以在 index.html 里使用 ../my-image.png 引用 my-image.png 。
以上方法可以随意组合，比如 ../subdirectory/another-subdirectory/my-image.png。

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

大功告成。现在站点文件夹结构应该类似于：