动手实验：Visual Studio 2013 Web 工具

  • 项目

由 Web Camp 团队

下载 Web Camp 培训工具包

Visual Studio 是适用于 的优秀开发环境。基于 NET 的 Windows 和 Web 项目。 它包括一个功能强大的文本编辑器，可以轻松用于编辑没有项目的独立文件。

编辑每个文件时，Visual Studio 会维护一个功能齐全的分析树。 这允许 Visual Studio 提供无与伦比的自动完成和基于文档的操作，同时使开发体验更快、更愉快。 这些功能在 HTML 和 CSS 文档中特别强大。

所有这些功能也可用于扩展，因此可以轻松地使用强大的新功能扩展编辑器，以满足你的需求。 Web Essentials 是 (的集合，主要) 与 Web 相关的 Visual Studio 增强功能。 它包括许多新的 IntelliSense 补全 (，尤其是 CSS) 、新的浏览器链接功能、JavaScript 文件的自动 JSHint、HTML 和 CSS 的新警告，以及许多对新式 Web 开发至关重要的其他功能。

所有示例代码和代码片段都包含在 Web Camp 培训工具包中，可在 上 https://aka.ms/webcamps-training-kit获取。

概述

目标

在本动手实验中，您将了解如何：

  • 使用 Web Essentials 中包含的新 HTML 编辑器功能，例如丰富的 HTML5 代码片段和 Zen 编码
  • 使用 Web Essentials 中包含的新 CSS 编辑器功能，例如颜色选取器和浏览器矩阵工具提示
  • 对所有 HTML 元素使用 Web Essentials 中包含的新 JavaScript 编辑器功能，例如提取到文件和 IntelliSense
  • 使用浏览器链接在浏览器和 Visual Studio 之间交换数据

先决条件

完成本动手实验需要以下各项：

设置

若要在此动手实验室中运行练习，需要先设置环境。

  1. 打开 Windows 资源管理器窗口并浏览到实验室的 “源 ”文件夹。
  2. 右键单击“ 安装程序.cmd ”，然后选择“ 以管理员身份运行” ，启动将配置环境的安装过程，并安装用于此实验室的 Visual Studio 代码片段。
  3. 如果显示“用户帐户控制”对话框，请确认操作以继续。

注意

确保在运行安装过程之前，您已检查本实验的所有依赖项。

使用代码段

在整个实验文档中，将指示您插入代码块。 为方便起见，此代码的大部分作为Visual Studio Code代码段提供，你可以从Visual Studio 2013内部访问这些代码片段，以避免手动添加代码段。

注意

每个练习都附带一个起始解决方案，该解决方案位于练习的 Begin 文件夹中，使你能够独立于其他练习跟踪每个练习。 请注意，在练习期间添加的代码片段在这些起始解决方案中缺失，在完成练习之前可能无法正常工作。 在练习的源代码中，还可以找到一个 End 文件夹，其中包含 Visual Studio 解决方案，其中包含完成相应练习中的步骤后产生的代码。 如果您在演练本动手实验时需要其他帮助，则可以使用这些解决方案作为指南。

练习

本动手实验包括以下练习：

  1. 使用浏览器链接和 Web Essentials
  2. 利用代码片段和 IntelliSense

注意

首次启动 Visual Studio 时，必须选择一个预定义的设置集合。 每个预定义集合都设计为匹配特定的开发样式，并确定窗口布局、编辑器行为、IntelliSense 代码片段和对话框选项。 本实验室中的过程描述了在使用 “常规开发设置” 集合时，在 Visual Studio 中完成给定任务所需的操作。 如果为开发环境选择不同的设置集合，则应考虑的步骤可能存在差异。

Web Essentials 是一个 Visual Studio 扩展，它为新式 Web 开发添加了各种有用的功能，主要侧重于使 Web 开发体验更快、更愉快。 可以从 Visual Studio 中的扩展库安装 Web Essentials。

浏览器链接是 Visual Studio 2013 中包含的一项新功能，它提供 Visual Studio IDE 与任何打开的浏览器之间的通道，用于在 Web 应用程序和 Visual Studio 之间交换数据。 Web Essentials 使用工具扩展浏览器链接，以便直接从浏览器操作网页的 DOM 对象模型和 CSS 样式。

在本练习中，你将了解 Web Essentials 和 浏览器链接 支持的一些功能，以增强简单的测验页面。

任务 1 - 在多个浏览器中运行项目

在此任务中，你将将 Web 应用程序配置为同时在多个浏览器中运行，这对于跨浏览器测试非常有用。

  1. 打开“Microsoft Visual Studio”。

  2. 在“文件”菜单中，选择“打开|项目/解决方案...然后浏览到实验室的 Source 文件夹中的 Ex1-WorkingwithBrowserLinkandWebEssentials\Begin (C：\WebCampsTK\HOL\VSWebTooling\Source) 。 选择 “开始”.sln ，然后单击“ 打开”。

  3. 在 Visual Studio 工具栏中，展开浏览器菜单并选择“ 浏览方式...”。

    “浏览方式”菜单选项

    “浏览方式”菜单选项

  4. 在“浏览方式”对话框中，按住 Ctrl 键并单击“设为默认值”，选择 Google Chrome 和 Internet Explorer。

    使用对话框浏览

    选择多个默认浏览器

  5. Google Chrome 和 Internet Explorer 现在都应显示为默认浏览器。 单击“取消”以关闭对话框。

    Google Chrome 和 Internet Explorer 作为默认浏览器

    Google Chrome 和 Internet Explorer 作为默认浏览器

    注意

    配置默认浏览器后，将在浏览器菜单中选择 “多个浏览器 ”选项。

    多个浏览器

  6. 按 Ctrl + F5 在不调试的情况下运行应用程序。

  7. 当两个浏览器窗口都打开时，将其中一个窗口放在另一个上方，以便同时在两个浏览器上查看更新。 浏览器应显示带有浅蓝色矩形的网页。

    将一个浏览器置于另一个上方

    将一个浏览器置于另一个浏览器之上

  8. 请勿关闭浏览器。 你将在下一个任务中使用它们。

任务 2 - 使用 Zen 编码创建 HTML 元素

Zen 编码 是用于高速 HTML、XML、XSL (或任何其他结构化代码格式的编辑器插件，) 编码和编辑。 此插件的核心是一个功能强大的缩写引擎，可用于将表达式（类似于 CSS 选择器）扩展到 HTML 代码中。 Zen 编码是一种使用 CSS 样式选择器语法编写 HTML 的快速方法。

在本练习中，你将使用 Web Essentials 提供的 Zen 编码功能生成表示问题选项的 HTML 按钮。

  1. 切换回 Visual Studio。

  2. 打开“视图 | 主页”文件夹中的 Index.cshtml 文件。

  3. <替换!-- TODO：在此处添加选项-> 注释，并按 TAB。

    button.btn.btn-info.btn-lg.option{Answer $}*4

  4. 代码应扩展为 HTML。

    展开的 HTML

    展开的 HTML

    注意

    若要详细了解 Zen 编码语法，请参阅以下 文章。

  5. 单击“ 刷新链接的浏览器 ”按钮以更新这两个浏览器。

    刷新链接的浏览器

    刷新链接的浏览器

    Internet Explorer - 使用四个按钮更新的页面

    Internet Explorer - 使用四个按钮更新的页面

    Google Chrome - 使用四个按钮更新的页面

    Google Chrome - 页面更新了四个按钮

  6. 切换回 Visual Studio。

  7. 你已将按钮添加到页面，但仍需要添加模板问题。 为此，你将使用 Web Essentials 中名为 Lorem Ipsum 生成器的新功能。 在前面找到具有类属性的 div 元素。

  8. 添加以下代码作为 div 的第一个子元素，然后按 TAB。

    p.lead>lorem5

  9. 代码应扩展为 HTML。

    Lorem Ipsum 自动生成

    Lorem Ipsum 自动生成

    注意

    作为 Zen 编码的一部分，现在可以直接在 HTML 编辑器中生成 Lorem Ipsum 代码。 只需键入 lorem 并点击 TAB ，就会插入 30 个字的 Lorem Ipsum 文本。 例如 ，lorem10 插入 10 个 Lorem Ipsum 单词。

  10. 你将使用 Web Essentials 中名为 Lorem 像素生成器的另一项新功能在问题顶部添加徽标。 将以下代码添加为 div 元素的第一个子元素，并将 容器 作为 类 值，然后按 TAB。

    div.row.header>pix-436x185-abstract

  11. 代码应扩展为 HTML。

    Lorem Pixel autogenerated

    Lorem Pixel 自动生成

    注意

    作为 Zen 编码的一部分，还可以直接在 HTML 编辑器中生成 Lorem 像素代码。 只需键入 pix-200x200-animals 并点击 TAB ，将插入带有动物 200x200 图像的 img 标记。

  12. 单击 “刷新链接的浏览器 ”按钮以更新这两个浏览器。

    Internet Explorer - 自动生成的图像和文本

    Internet Explorer - 自动生成的图像和文本

    Google Chrome - 自动生成的图像和文本

    Google Chrome - 自动生成的图像和文本

    注意

    由于图像是在添加代码片段时随机选择的，因此浏览器中显示的图像可能会有所不同。

  13. 不要关闭浏览器。 你将在下一个任务中使用它们。

任务 3 - 更新样式属性

在此任务中，你将使用浏览器链接的 “检查模式” 功能来检测生成特定 DOM 元素的确切位置，然后使用 Web Essentials 提供的颜色选取器更新该元素的颜色属性。

  1. 在 Internet Explorer 浏览器中，按 Ctrl + Alt + I 以启用“检查模式”。

  2. 将指针移到浅蓝色边框上，然后单击。

    将指针移到浅蓝色边框

    将指针移到浅蓝色边框上

  3. 切换回 Visual Studio。 请注意，在 Visual Studio HTML 编辑器中也选择了浏览器中选择的 HTML 元素。

    在 Visual Studio HTML 编辑器中选择的

    在 Visual Studio HTML 编辑器中选择的 HTML 元素

  4. 现在将更新 前端 CSS 类，以更改所选元素的样式。 为此，请按 Ctrl + 打开“导航到”搜索框。 键入 site.css ，然后按 Enter 打开文件。

    打开文件 Site.css

    打开文件 Site.css

  5. 按 CTRL + F 并键入 .flip-container .front 以查找 CSS 选择器。

  6. 单击 类的边框属性中的浅蓝色正方形以打开颜色选取器。

    打开颜色选取器

    打开颜色选取器

  7. 单击 V 形按钮展开颜色选取器，然后选择新颜色。

    展开颜色选取器

    展开颜色选取器

  8. 按 Ctrl + Alt + Enter 刷新链接的浏览器。

  9. 切换到 Internet Explorer 并注意边框颜色的变化。

    Internet Explorer - 边框颜色已更新

    Internet Explorer - 已更新边框颜色

  10. 切换到 Google Chrome 并注意边框颜色的变化。

    Google Chrome - 已更新边框颜色

    Google Chrome - 已更新边框颜色

  11. 切换回 Visual Studio。

  12. 转到 Site.css 文件的末尾，然后按 Ctrl + F 找到 .btn 选择器。

  13. 请注意 ，-webkit-border-radius 属性的下划线为绿色。

    btn selector-webkit-border-radius 属性的

    btn 选择器的 -webkit-border-radius 属性

  14. 将插入点置于 -webkit-border-radius 属性中。 在 属性的第一个单词的第一个字母下应显示一条蓝线。 这是 智能标记。

  15. 按 Ctrl + 。 打开建议菜单，然后单击“ 添加缺少的标准属性” (边框半径) 。

    添加缺少的标准属性建议

    添加缺少的标准属性建议

  16. border-radius 属性会自动添加到 CSS 规则中。

    缺少标准属性已添加

    添加了缺少标准属性

  17. 将指针移到 边框半径 属性上以显示 浏览器矩阵工具提示。 浏览器矩阵工具提示显示属性在每个浏览器中的可用性。

    浏览器矩阵工具提示

    浏览器矩阵工具提示

  18. 请注意， 边框半径 属性的值仍带有下划线。 将指针移到 值上方以查看警告消息。

    边框半径属性值警告

    Border-radius 属性值警告

  19. 根据工具提示的建议，删除 边框半径 属性值的单位。

  20. 由于 border-radius 是定义圆角边框的标准属性，因此可以从 CSS 规则中删除 -webkit-border-radius 属性和值。

  21. 将插入点置于 自动换行 属性中，请注意智能标记也显示在下方。

  22. 打开菜单，然后单击“ 添加缺少的供应商详细信息”。

    添加缺少的供应商详细信息建议

    添加缺少的供应商详细信息建议

  23. -ms-word-wrap 属性会自动添加到 CSS 规则。

    已添加特定于供应商的属性

    已添加特定于供应商的属性

任务 4 - 从浏览器更新 HTML 代码

在此任务中，你将使用浏览器链接的设计 模式 功能从浏览器中编辑 DOM 对象，并将更改传输到 Visual Studio 中的 HTML 源文件。

  1. 在 Google Chrome 中，按 Ctrl + Alt + D 启用设计模式。

  2. 将指针移到 Lorem Ipsum dolor sit amet 标签上，然后单击。

    编辑问题

    编辑问题

  3. 应显示光标。 将原始文本替换为 编写较长问题时的外观是什么？，然后按 ESC 退出设计模式。

    已编辑的问题

    已编辑的问题

  4. 切换回 Visual Studio 并打开 Index.cshtml（如果尚未打开）。 请注意，p> 元素的内部<文本已更新。

    HTML 页面中的更新问题

    HTML 页中更新了问题

任务 5 - 查看 SEO 相关警告

搜索引擎优化 (SEO) 是使网站在搜索引擎的结果列表中排名更高的过程。 网站排名越高，列出得越一致，网站从该搜索引擎获取的访问者就越多。 Web Essentials 包含一个分析工具，用于检查 HTML、报告发现的问题并提供解决这些问题的帮助。

  1. 转到“ 视图 ”菜单，然后单击“ 错误列表 ”打开 “错误列表” 窗口。

    “视图”菜单中的错误

    “视图”菜单中的错误列表

  2. 请注意，有一个 SEO 警告， <通知页面说明的元> 标记缺失。 双击 SEO 警告条目以修复它。

    “错误列表”窗口

    “错误列表”窗口

  3. 在 “Web Essentials ”对话框中，单击“ 是 ”插入说明 <元> 标记。

    “Web Essentials”对话框

    “Web Essentials”对话框

  4. _Layout.cshtml 的编辑器随即打开，<元>标记会自动添加到 HTML 文件的 head 节。

    在_Layout页中自动添加元标记

    元标记自动添加到_Layout页

  5. 将 content 属性的值更改为 GeekQuiz 并保存文件。

练习 2：利用代码片段和 IntelliSense

借助 Web Essentials，HTML 编辑器已扩展了额外的功能。 在本练习中，你将看到开发 Web 应用程序时有用的一些新功能。

任务 1 - 在 HTML 文档中使用 IntelliSense

你将在此任务中看到的第一个新功能称为 动态 IntelliSense。 动态 IntelliSense 读取其他标记和属性，以推断要使用的可能 ID。

在此任务中，您将创建一个新的 HTML 表单元素，其中包含一个标签和一个输入字段。 然后，将 for 属性添加到标签以将其绑定到输入，并且你将看到基于范围内输入的 ID 的 IntelliSense 建议。

  1. 打开 Visual Studio Express 2013 for Web 和 Begin.sln 解决方案，该解决方案位于 Source/Ex2-TakingAdvantageofCodeSnippetsandIntelliSense/Begin 文件夹中。 或者，可以继续使用在上一练习中获取的解决方案。

  2. 在 解决方案资源管理器中，打开“视图 | 主页”文件夹中的 Index.cshtml 文件。

  3. 在 section> 元素中添加<以下窗体。

    (代码片段 - VisualStudio2013WebTooling - Ex2 - 窗体) 

    <form>
     <input type="text" id="name" />
</form>

  4. 输入标记前面应有一个标签，其中包含字段的一些说明。 在输入标记之前添加以下标签。

    <form>
    <label id="name">Name</label>       
    <input type="text" id="name" />
</form>

  5. 标签>的<for 属性指定标签绑定到哪个窗体元素。 特性的值应等于相关元素的 ID。 将 for 属性添加到 <label> 元素。 如下图所示，“name”值会根据同一范围内元素的 ID 在 IntelliSense 框中弹出， (封闭 <形式>) 。

    在 IntelliSense 中

    在 IntelliSense 中显示 ID

  6. 删除最近添加 <的表单> 元素及其内容。

任务 2 - 使用 HTML 代码片段

HTML5 引入了超过 25 个新的语义标记。 Visual Studio 已对这些标记提供 IntelliSense 支持，但Visual Studio 2013通过添加新代码片段，可以更快、更轻松地编写标记。 虽然这些标记并不复杂，但它们具有一些细微之处，例如为 音频 标记添加正确的编解码器回退。 在此任务中，你将看到音频标记的 HTML 代码片段。

  1. 在 Index.cshtml 文件中，在 section> 元素内<键入 <aud，如下图所示。

    插入音频元素

    插入音频元素

  2. 按 TAB 两次，注意如何在页面上添加以下代码，并将光标置于第一个源的 src 属性上。

    <audio controls="controls">
     <source src="file.mp3" type="audio/mp3" />
     <source src="file.ogg" type="audio/ogg" />
</audio>

    注意

    按 TAB 键两次即可插入代码片段。 音频代码片段显示了 音频 标记的标准用法，其中包含两个源文件，用于改进支持。

  3. 删除第二行，并使用以下指向安装 ASP.NET 和 Web 工具显示的链接更新第一行的源：https://video2.skills-academy.com/shows/asp-net-site-videos/installing-aspnet-web-tools。 生成的代码如下所示。

    <audio controls="controls">
     <source src="http://media.ch9.ms/ch9/11d8/604b8163-fad3-4f12-9607-b404201211d8/KatanaProject.mp3" type="audio/mp3" />
</audio>

    注意

    源文件用作示例。 如果需要，可以使用其他源。

  4. 按 Ctrl + S 保存文件。

  5. 按 Ctrl + F5 启动应用程序。

  6. 请注意，音频播放器已添加到应用程序。

    Internet Explorer 中的音频

    Internet Explorer 中的音频播放器

    Google Chrome 中的音频播放器

    Google Chrome 中的音频播放器

  7. 不要关闭浏览器。 你将在下一个任务中使用它们。

任务 3 - 在 JavaScript 文档中使用 IntelliSense

在 Web Essentials 2013 中，样式表和 HTML 页面生成 ID 和类名的列表。 在此任务中，你将了解这些列表如何改进 Web Essentials 2013 中的 JavaScript IntelliSense 支持。

  1. 在 Index.cshtml 文件中，添加以下代码以定义 JavaScript 代码的 脚本 标记。

    ...
</section>
@section scripts{
    <script type="text/javascript">

    </script>
}

  2. 在 脚本 标记中添加以下代码，以定义就绪回调函数。

    (代码片段 - VisualStudio2013WebTooling - Ex2 - ReadyFunction) 

    (function () {
    $(document).ready(function () {

    });
}());

  3. 将插入点放在脚本标记中，然后按 Ctrl + 打开建议菜单。

  4. 单击“ 提取到文件”。

    JavaScript 提取到文件建议

    JavaScript 提取到文件的建议

  5. 在“ 另存为 ”窗口中，选择“ 脚本” 文件夹，将文件命名 init.js 并单击“ 保存”。

    “另存为”窗口

    “另存为”窗口

    注意

    创建 init.js 文件，并将脚本的内容移动到该文件。

    使用包含的内容创建的Init.js

    使用包含的内容创建的Init.js文件

  6. 打开 Index.cshtml 文件，检查脚本标记已替换为对init.js 文件的引用。

    Init.js html 参考

    Init.js html 参考

  7. 转到解决方案资源管理器，可以看到init.js文件自动包含在解决方案中。

    解决方案中包含的Init.js文件

    解决方案中包含的Init.js文件

  8. 切换回 init.js 文件以更新 就绪 函数回调。

  9. 在传递给 ready 的函数回调定义中，添加以下代码以按特定类属性获取所有元素。

    (function () {
     $(document).ready(function () {
          document.getElementsByClassName("")
     });
}());

  10. 在 getElementsByClassName 函数调用内的引号之间按 Ctrl + 空格键。

    显示 getElementsByClassName 函数的 IntelliSense

    显示 getElementsByClassName 函数的 IntelliSense

    注意

    请注意，IntelliSense 显示项目样式表中定义的类。

  11. 将创建的行替换为以下代码。

    (function () {
     $(document).ready(function () {
          var audioElements = document.getElementsByTagName("au");
     });
}());

  12. 将光标置于 getElementsByTagName 函数的引号内 au 之后，然后按 Ctrl + 空格键。

    显示 getElementByTagName 方法的 IntelliSense

    显示 getElementsByTagName 方法的 IntelliSense

  13. 从列表中选择 “audio” ，然后按 Enter。 结果如下图所示。

    检索音频元素

    检索音频元素

  14. 在“解决方案资源管理器”中，右键单击“脚本”文件夹中的init.js文件，然后从“Web 概要”菜单中选择“缩小 JavaScript 文件 () ”。

    缩小 JavaScript 文件 ()

    缩小 JavaScript 文件 ()

  15. 当系统提示在源文件更改时启用自动缩小时，请单击“ 是”。

    启用自动缩小警告

    启用自动缩小警告

    注意

    创建init.min.js并将其添加为init.js文件的依赖项。

    Init.min.js创建文件

    已创建Init.min.js文件

  16. 打开 init.min.js 文件，注意该文件已缩小。

    Init.min.js文件内容

    Init.min.js文件内容

  17. 在 init.js 文件中，在 getElementsByTagName 函数调用下方添加以下代码，以播放所有音频元素。

    (代码片段 - VisualStudio2013WebTooling - Ex2 - PlayAudioElements) 

    var len = audioElements.length;
for (var i = 0; i < len; i++) {
    audioElements[i].play();
}

  18. 单击 “CTRL + S ”保存文件。 由于已打开缩小的文件，你将看到一个对话框，指出该文件已在源编辑器外部修改。 单击 “是” 。

    Microsoft Visual Studio 警告

    Microsoft Visual Studio 警告

  19. 切换回 init.min.js 文件，验证文件是否已使用新代码更新。

    Init.min.js文件更新

    已更新Init.min.js文件

  20. 单击“ 浏览器链接刷新 ”按钮。

  21. 刷新两个浏览器后，在上一任务中看到的音频播放器将自动开始播放。

    视图中包含的音频播放器

    视图中包含的音频播放器

摘要

通过完成此动手实验，你已了解如何：

  • 使用 Web Essentials 中包含的新 HTML 编辑器功能，例如丰富的 HTML5 代码片段和 Zen 编码
  • 使用 Web Essentials 中包含的新 CSS 编辑器功能，例如颜色选取器和浏览器矩阵工具提示
  • 对所有 HTML 元素使用 Web Essentials 中包含的新 JavaScript 编辑器功能，例如提取到文件和 IntelliSense
  • 使用浏览器链接在浏览器和 Visual Studio 之间交换数据