任务1.1 工作环境准备
☑学习目标
①能够陈述常用的Web前端开发软件及其优缺点：Adobe Dreamweaver、Visual Studio Code、Sublime Text 3、Notepad++、HBuilder等。
②能够根据系统环境选择合适的开发软件。
☑任务描述
下载Visual Studio Code软件安装程序，按照说明文档的安装指引，将Visual Studio Code软件安装到自己的客户端。
☑知识学习与课堂练习
网页开发工具有很多，可以使用任何能够生成TXT类型源文件的文本编辑来产生页面文件，因此记事本也可以作为网页开发工具。
【课堂练习1.1-1】使用记事本制作一个网页。
①打开记事本，输入如下标签（注意代码格式缩进）：
②将记事本保存到桌面：保持类型为“所有文件（*.*）”，文件名为“index.html”，第一个静态网页制作完成。
③双击桌面上的“index.html”文件，浏览器打开的网页显示效果如图1.1-1所示。
记事本是最基础的网页开发工具。为了提高网页编写效率，很多公司开发了网页辅助开发软件，以提高网页开发的效率。
下面介绍一些常用的Web前端开发软件：
图1.1-1 使用记事本制作网页
1.Adobe Dreamweaver
Adobe Dreamweaver，简称DW，中文名称为“梦想编织者”，是集网页制作和网站管理于一身的所见即所得网页编辑器，DW是第一套针对专业网页设计师特别开发的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。
2.Visual Studio Code
Visual Studio Code（简称VS Code / VSC）是微软公司推出的一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比Diff、GIT等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。软件跨平台支持Windows、Mac OS以及Linux，运行流畅。
3.Sublime Text
Sublime Text是一个代码编辑器，也是HTML等的文本编辑器。有漂亮的用户界面和非凡的功能，如迷你地图、多选择、Python插件、代码段等。Sublime Text的主要功能包括拼写检查、书签、完整的Python API、Goto功能、即时项目切换、多选择、多窗口等。
4.Notepad++
Notepad++是Windows操作系统下的一套文本编辑器，有完整的中文接口及支持多国语言编写的功能（UTF8技术）。
Notepad++功能比Windows中的Notepad（记事本）强大，除了可以用来制作一般的纯文字说明文件，也十分适合编写计算机程序代码。Notepad++不仅有语法高亮度显示，也有语法折叠功能，并且支持宏以及扩充基本功能的外挂模组。
5.HBuilder
HBuilder是DCloud推出的一款支持HTML5的Web开发IDE。“快”是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、JS、CSS的开发效率。同时，它还包括最全面的语法库和浏览器兼容性数据。
【课堂练习1.1-2】根据自己的情况选用Web开发软件。
请根据自己的系统开发环境情况，选择Web前端开发软件，如表1.1-1所示。
表1.1-1 Web前端开发软件环境的配置
请根据情况完成上表，并说出选择的理由。
☑任务实施
考虑到市场上的软件应用以及软件大小情况，本书以Visual Studio Code为例，简要介绍此软件的安装和配置。
1.软件下载
①打开浏览器，输入微软官方网站地址www.microsoft.com（见图1.1-2）并按Enter键，在搜索框中输入Visual Studio Code，单击搜索按钮，出现Visual Studio Code的常规信息（见图1.1-3）。
图1.1-2 微软官方网站
图1.1-3 Visual Studio Code的常规信息
②选择图1.1-3第二项中的“Visual Studio Code”，单击“下载Code”（见图1.1-4），进入软件下载界面见图1.1-5。
图1.1-4 Visual Studio Code下载页面
③在软件下载界面（见图1.1-5）中根据系统选择对应的下载项，并下载Visual Studio Code软件。
2.软件安装
①双击下载的VSCodeSetup-stable.exe文件，在弹出的“用户账户控制”对话框中单击“是”按钮后进入“安装程序”对话框（见图1.1-6），单点击“下一步”按钮，出现安装程序“许可协议”对话框（见图1.1-7），选择“我接受协议”单选按钮，单击“下一步”按钮，进入“选择目标位置”对话框（见图1.1-8）。
图1.1-5 Visual Studio Code不同平台下载页面
图1.1-6 “安装程序”对话框
图1.1-7 “许可协议”对话框
②在“选择目标位置”对话框中选择Visual Studio Code软件的安装路径，可以选择默认路径，也可以改至D：\Microsoft VS Code，单击“下一步”按钮，进入“选择开始菜单文件夹”对话框（见图1.1-9），如果不想其出现在“开始”菜单文件夹中，可勾选“不创建开始菜单文件夹”复选框，单击“下一步”按钮，进入“选择其他任务”对话框（见图1.1-10）。
③在“选择其他任务”对话框中可勾选“创建桌面对话框快捷方式”复选框，在桌面中创建Visual Studio Code软件快捷方式，单击“下一步”按钮，进入软件安装准备就绪对话框（见图1.1-11）。
④在“安装准备就绪”对话框中单击“安装”按钮，进入“正在安装”对话框（见图1.1-12），等待软件安装完成（见图1.1-13），单击“完成”按钮。至此，软件安装成功。
图1.1-8 “选择目标位置”对话框
图1.1-9 “选择开始菜单文件夹”对话框
图1.1-10 “选择其他任务”对话框
图1.1-11 “安装准备就绪”对话框
图1.1-12 “正在安装”对话框
图1.1-13 安装完成对话框
3.软件使用介绍
（1）软件界面介绍
安装完Visual Studio Code软件，打开后界面如图1.1-14所示。顶部为菜单栏，包括文件、编辑、查看、转到和帮助功能项，左侧为快捷菜单栏，包括资源管理器、搜索、Git、调试，其他部分是代码编辑区，底部为鼠标输入区域信息，包括行数，列数。
（2）软件常用快捷键
通过按Ctrl+Shift+P组合键可以打开主命令面板，在主命令面板中可以执行VSCode的任何一条命令，如图1.1-15所示。
图1.1-14 Visual Studio Code软件界面
图1.1-15 主命令面板
通过按Ctrl+P组合键进入“本地文件导航模式”，该模式默认列出了打开过的文件。在输入框中可以输入想要打开的文件，如图1.1-16所示。
在图1.1-16的输入框中输入“？”可以获得一些帮助，输入“：”，可以跳转到行数，也可以使用Ctrl+G组合键。
图1.1-16 本地文件导航模式
另外还有一些常用的编辑器及窗口快捷键，如表1.1-2所示。
表1.1-2 编辑器及窗口快捷键
☑任务回顾
Visual Studio Code支持语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比Diff、Git等特性，并针对网页开发和云端应用开发做了优化。软件跨平台支持Windows、Mac OS以及Linux，运行流畅。
网上可供下载安装的Visual Studio Code软件版本有很多，可以通过它的官网进行下载。通常下载的安装包中都会附带相关的安装说明文档，按照安装说明的指引一般都能顺利地把软件安装到计算机中。
☑任务拓展
1.网站文件夹结构及命名
关于网站文件夹结构及命名，看似无足轻重，但实际上如果没有良好的网站文件夹结构及命名规则进行必要的约束，最终导致的结果就是整个网站或是文件夹无法管理。所以，网站文件夹结构及命名规则很重要。需要特别注意的是，网站文件或文件夹命名要尽量避免使用中文字符命名。
建立网站文件夹的原则是以最少的层次提供最清晰简便的访问结构。
根目录只允许存放index.html文件和js、img、css这三个文件夹，所有的js文件存放在根目录下的js文件夹，所有的css文件存放在根目录下的css文件夹，所有的图片存放在根目录下的img文件夹中。网站文件夹结构如图1.1-17所示。
图1.1-17 网站文件夹结构
2.W3C的介绍
W3C指万维网联盟，它是建立于1994年的组织，其宗旨是通过促进通用协议的发展并确保其通用性，以激发Web世界的全部潜能。
W3C标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C的DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，如ECMA的ECMAScript标准。
为了简化网站代码，降低网站建设的成本，保证网站在长期互联网环境中有效，加强网站的兼容性，能适应不同的网络设备和网络终端，在建设网站时应该要保证代码符合W3C规范。