實際操作實驗室：Visual Studio 2013 Web 工具

發行項
06/25/2023

Visual Studio 是的絕佳開發環境。以 NET 為基礎的 Windows 和 Web 專案。它包含功能強大的文字編輯器，可輕鬆用來編輯沒有專案的獨立檔案。

當您編輯每個檔案時，Visual Studio 會維護功能完整的剖析樹狀結構。這可讓 Visual Studio 提供絕佳的自動完成和檔型動作，同時讓開發體驗更快速且更輕鬆。這些功能在 HTML 和 CSS 檔中特別強大。

這項功能也適用于擴充功能，讓您輕鬆地使用功能強大的新功能來擴充編輯器，以符合您的需求。 Web Essentials 是 (的集合，大部分) Visual Studio 的 Web 相關增強功能。它包含許多新的 IntelliSense 完成， (特別適用于 CSS) 、新的瀏覽器連結功能、適用于 JavaScript 檔案的自動 JSHint、HTML 和 CSS 的新警告，以及新式 Web 開發所需的許多其他功能。

所有範例程式碼和程式碼片段都包含在 Web Training Kit 中，可在取得 https://aka.ms/webcamps-training-kit 。

概觀

目標

在此實際操作實驗室中，您將瞭解如何：

使用 Web Essentials 中包含的新 HTML 編輯器功能，例如豐富的 HTML5 程式碼片段和 Zen 編碼
使用 Web Essentials 中包含的新 CSS 編輯器功能，例如色彩選擇器和瀏覽器矩陣工具提示
針對所有 HTML 元素使用 Web Essentials 中包含的新 JavaScript 編輯器功能，例如擷取至檔案和 IntelliSense
使用瀏覽器連結在瀏覽器與 Visual Studio 之間交換資料

必要條件

需要下列專案才能完成此實際操作實驗室：

Microsoft Visual Studio Professional 2013或更新版本
Web Essentials 2013
Google Chrome

安裝程式

若要在此實際操作實驗室中執行練習，您必須先設定環境。

開啟 Windows 檔案總管視窗，並流覽至實驗室的 [來源資料 ] 資料夾。
以滑鼠右鍵按一下 Setup.cmd ，然後選取 [ 以系統管理員 身分執行] 以啟動安裝程式，以設定您的環境並安裝此實驗室的 Visual Studio 程式碼片段。
如果顯示 [使用者帳戶控制] 對話方塊，請確認要繼續的動作。

注意

在執行安裝程式之前，請確定您已檢查此實驗室的所有相依性。

使用程式碼片段

在整個實驗室檔中，系統會指示您插入程式碼區塊。為了方便起見，大部分的程式碼都會以Visual Studio Code程式碼片段的形式提供，您可以從Visual Studio 2013存取，以避免手動新增。

注意

每個練習都會伴隨位於練習 [ 開始 ] 資料夾中的起始解決方案，讓您獨立遵循每個練習。請注意，在練習期間新增的程式碼片段會從這些起始解決方案中遺失，而且在您完成練習之前可能無法運作。在練習的原始程式碼內，您也會找到包含 Visual Studio 解決方案的 End 資料夾，其中包含完成對應練習中步驟所產生的程式碼。當您完成此實際操作實驗室時，如果您需要其他協助，可以使用這些解決方案作為指引。

Exercises

此實際操作實驗室包含下列練習：

使用瀏覽器連結和 Web Essentials
利用程式碼片段和 IntelliSense

注意

當您第一次啟動 Visual Studio 時，必須選取其中一個預先定義的設定集合。每個預先定義的集合都設計成符合特定開發樣式，並決定視窗配置、編輯器行為、IntelliSense 程式碼片段和對話方塊選項。本實驗室中的程式描述使用一 般開發設定 集合時，在 Visual Studio 中完成指定工作所需的動作。如果您為開發環境選擇不同的設定集合，則應該考慮的步驟可能會有差異。

練習 1：使用瀏覽器連結和 Web Essentials

Web Essentials 是一種 Visual Studio 擴充功能，可為新式 Web 開發新增各種實用的功能，主要著重于讓 Web 開發體驗更快速且更輕鬆。您可以從 Visual Studio 中的擴充功能庫安裝 Web Essentials。

Browser Link是包含在 Visual Studio 2013 中的新功能，提供 Visual Studio IDE 與任何開啟瀏覽器之間的通道，以在 Web 應用程式和 Visual Studio 之間交換資料。 Web Essentials 會使用工具來擴充 Browser Link，以直接從瀏覽器操作 DOM 物件模型和網頁的 CSS 樣式。

在此練習中，您將探索 Web Essentials 和 Browser Link 支援的一些功能，以增強簡單的測驗頁面。

工作 1 - 在多個瀏覽器中執行專案

在這項工作中，您會將 Web 應用程式設定為一次在多個瀏覽器中執行，這適用于跨瀏覽器測試。

開啟 [Microsoft Visual Studio]。
在 [檔案]功能表中，選取 [開啟] |專案/方案...並流覽至 Lab (C：\WebCampsTK\HOL\VSWebTooling\Source) 的Source資料夾中，流覽至Ex1-WorkingwithBrowserLinkandWebEssentials\Begin。選取 [Begin.sln ]，然後按一下 [ 開啟]。
在 Visual Studio 工具列中，展開瀏覽器功能表，然後選取 [ 流覽方式...]。

流覽與功能表選項
在 [流覽方式] 對話方塊中，按住CTRL鍵並按一下 [設定為預設值]，以選取Google Chrome和Internet Explorer。

]

選取多個預設瀏覽器
Google Chrome 和 Internet Explorer 現在應該會顯示為預設瀏覽器。按一下 [取消 ] 以關閉對話方塊。

Google Chrome 和 Internet Explorer 作為預設瀏覽器

注意

設定預設瀏覽器之後，會在瀏覽器功能表中選取 [多個瀏覽器 ] 選項。
按CTRL + F5執行應用程式，而不進行偵錯。
當兩個瀏覽器視窗開啟時，請將其中一個放在另一個上方，以便同時查看這兩個瀏覽器上的更新。瀏覽器應該會顯示具有淺藍色矩形的網頁。

將一個瀏覽器放在另一個上方
請勿關閉瀏覽器。您將在下一個工作中使用它們。

工作 2 - 使用 Zen 程式碼建立 HTML 元素

Zen Code 程式碼 是適用于高速 HTML、XML、XSL (或任何其他結構化程式碼格式的編輯器外掛程式，) 編碼和編輯。此外掛程式的核心是功能強大的縮寫引擎，可讓您將類似 CSS 選取器的運算式展開為 HTML 程式碼。 Zen Code 程式碼是使用 CSS 樣式選擇器語法撰寫 HTML 的快速方式。

在此練習中，您將使用 Web Essentials 提供的 Zen 程式碼功能來產生代表問題選項的 HTML 按鈕。

切換回 Visual Studio。
開啟位於Views | Home資料夾中的Index.cshtml檔案。
以< 下列程式碼取代 !-- TODO：在這裡新增選項-- >批註，然後按TAB鍵。
```
button.btn.btn-info.btn-lg.option{Answer $}*4
```
程式碼應該展開為 HTML。

展開的 HTML

注意

若要深入瞭解 Zen 程式碼撰寫語法，請參閱下列文章。
按一下 [ 重新整理連結的瀏覽器 ] 按鈕來更新這兩個瀏覽器。

重新整理連結的瀏覽器

Internet Explorer - 使用四個按鈕更新的頁面

Google Chrome - 使用四個按鈕更新的頁面
切換回 Visual Studio。
您已將按鈕新增至頁面，但仍需要新增範本問題。若要這樣做，您將在名為 Lorem Ipsum 產生器的Web Essentials 中使用新功能。找出具有類別屬性front的div元素。
將下列程式碼新增為 div的第一個子項目，然後按 TAB鍵。
```
p.lead>lorem5
```
程式碼應該展開為 HTML。

Lorem Ipsum 自動產生

注意

在 Zen 程式碼撰寫過程中，您現在可以直接在 HTML 編輯器中產生 Lorem Ipsum 程式碼。只要輸入 lorem 並按 TAB 鍵，就會插入 30 個字 Lorem Ipsum 文字。例如 ，lorem10 會插入 10 個 Lorem Ipsum 字。
您將使用名為 Lorem Pixel 產生器之 Web Essentials 中的另一項新功能，在問題頂端新增標誌。將下列程式碼新增為 div 元素的第一個子項目，並以容器作為類別值，然後按 TAB鍵。
```
div.row.header>pix-436x185-abstract
```
程式碼應該會展開為 HTML。

Lorem Pixel 自動產生

注意

在 Zen 程式碼撰寫過程中，您也可以直接在 HTML 編輯器中產生 Lorem 圖元程式碼。只要輸入 pix-200x200-animals ，並點擊 TAB 和具有 200x200 動物影像的 img 標籤，就會插入。
按一下 [ 重新整理連結的瀏覽器 ] 按鈕來更新這兩個瀏覽器。

Internet Explorer - 自動產生的影像和文字

Google Chrome - 自動產生的影像和文字

注意

因為新增程式碼片段時會隨機選取影像，所以瀏覽器中顯示的影像可能會不同。
請勿關閉瀏覽器。您將在下一個工作中使用它們。

工作 3 - 更新樣式屬性

在此工作中，您將使用瀏覽器連結的檢查模式功能來偵測產生特定 DOM 元素的確切位置，然後使用 Web Essentials 提供的色彩選擇器更新該專案的色彩屬性。

在 Internet Explorer 瀏覽器中，按CTRL + ALT + I以啟用檢查模式。
將指標移至淺藍色框線上方，然後按一下。

上方

將指標移至淺藍色框線上方
切換回 Visual Studio。請注意，您在瀏覽器中選取的 HTML 元素如何在 Visual Studio HTML 編輯器中選取。

在 Visual Studio HTML 編輯器中選取的 HTML 元素
您現在會更新 front CSS 類別，以變更所選項目的樣式。若要這樣做，請按CTRL + 鍵，以開啟[巡覽至搜尋] 方塊。輸入 site.css ，然後按 ENTER 開啟檔案。

開啟 File Site.css
按CTRL + F並輸入.flip-container .front以尋找 CSS 選取器。
按一下類別框線屬性中的淺藍色方塊，以開啟 [色彩選擇器]。

開啟色彩選擇器
按一下箭號按鈕並選取新的色彩，以展開色彩選擇器。

展開色彩選擇器
按CTRL + ALT + ENTER以重新整理連結的瀏覽器。
切換至 Internet Explorer，並注意框線的色彩如何變更。

Internet Explorer - 已更新框線色彩
切換至 Google Chrome，並注意框線的色彩如何變更。

Google Chrome - 已更新框線色彩
切換回 Visual Studio。
移至Site.css檔案的結尾，然後按CTRL + F以找出.btn選取器。
請注意， -webkit-border-radius 屬性會加上綠色底線。

btn 選取器的 -webkit-border-radius 屬性
將插入號放在 -webkit-border-radius 屬性中。藍色線條應該會出現在屬性第一個單字的第一個字母底下。這是 智慧標籤。
按CTRL + 鍵，開啟建議功能表，然後按一下 [新增遺漏的標準屬性] (框線半徑) 。

新增遺漏的標準屬性建議
框線半徑屬性會自動新增至 CSS 規則。

遺漏已新增的標準屬性
將指標移至 框線半徑 屬性上方，以顯示 瀏覽器矩陣工具提示。 瀏覽器矩陣工具提示會顯示每個瀏覽器中屬性的可用性。

瀏覽器矩陣工具提示
請注意， 框線半徑 屬性的值仍然加上底線。將指標移至值上方，以查看警告訊息。

框線半徑屬性值警告
移除工具提示所建議的 框線半徑 屬性值單位。
由於 框線半徑 是定義圓角圓角的標準屬性，因此您可以從 CSS 規則移除 -webkit-border-radius 屬性和值。
將插入號放在 自動換行 屬性中，並注意智慧標籤也會出現在下方。
開啟功能表，然後按一下 [ 新增遺漏的廠商細節]。

新增遺漏的廠商特定建議
-ms-word-wrap屬性會自動新增至 CSS 規則。

已新增廠商特定屬性

工作 4 - 從瀏覽器更新 HTML 程式碼

在這項工作中，您將使用瀏覽器連結的設計模式功能，從瀏覽器編輯 DOM 物件，並將變更傳送至 Visual Studio 中的 HTML 原始程式檔。

在 Google Chrome 中，按CTRL + ALT + D以啟用設計模式。
將指標移至 Lorem Ipsum dolor 的上方，再按一下 amet 標籤。

編輯問題
游標應該會出現。將原始文字取代為 當我撰寫較長的問題時看起來的樣子？，然後按 ESC 以結束設計模式。

已編輯的問題
如果尚未開啟，請切換回 Visual Studio 並開啟 Index.cshtml。請注意，p > 元素的內部 <文字已更新。

已更新 HTML 頁面中的問題

搜尋引擎優化 (SEO) 是在搜尋引擎的結果清單中提高網站排名的程式。網站排名愈高，且其列出程度愈高，網站將會從該搜尋引擎取得的訪客越多。 Web Essentials 包含一個分析工具，可檢查 HTML、回報發現的問題，並提供修正問題的協助。

移至 [ 檢視 ] 功能表，然後按一下 [ 錯誤清單 ] 以開啟 [ 錯誤清單] 視窗。

[檢視] 功能表中的錯誤清單
請注意，有 SEO 警告通知< 頁面描述的中繼 >標籤遺失。按兩下 SEO 警告專案以修正它。

錯誤清單視窗
在 [Web Essentials ] 對話方塊中，按一下 [ 是 ] 以插入描述 < 中繼 > 標記。

Web Essentials 對話方塊
_Layout.cshtml的編輯器隨即開啟，且< 中繼 >標籤會自動新增至 HTML 檔案的前端區段。

自動新增至_Layout頁面的中繼標籤
將內容屬性的值變更為 GeekQuiz 並儲存檔案。

練習 2：利用程式碼片段和 IntelliSense

使用 Web Essentials 時，HTML 編輯器已擴充額外的功能。在此練習中，您將會看到一些新功能，在開發 Web 應用程式時很有説明。

工作 1 - 在 HTML 檔案中使用 IntelliSense

您將在這項工作中看到的第一項新功能稱為 「動態 IntelliSense」。動態 IntelliSense 會讀取其他標記和屬性，以推斷您將使用的可能識別碼。

在此工作中，您將建立新的 HTML 表單專案，其中包含標籤和輸入欄位。然後，您會將 for 屬性新增至標籤，以將其系結至輸入，而且您會根據範圍中輸入的識別碼看到 IntelliSense 建議。

開啟 Visual Studio Express 2013 for Web和Begin.sln解決方案位於Source/Ex2-TakingAdvantageofCodeSnippetsandIntelliSense/Begin資料夾中。或者，您可以繼續進行您在上一個練習中取得的解決方案。
在方案總管中，開啟位於Views | Home資料夾中的Index.cshtml檔案。
在section > 元素內 <新增下列表單。

(程式碼片段 - VisualStudio2013WebTooling - Ex2 - Form)
```
<form>
     <input type="text" id="name" />
</form>
```
輸入標籤前面應該加上一些欄位描述的標籤。在輸入標記之前新增下列標籤。
```
<form>
    <label id="name">Name</label>       
    <input type="text" id="name" />
</form>
```
卷標的< for 屬性會指定標籤 >所系結的表單專案。屬性的值應該等於相關專案的識別碼。將for屬性加入至< 標籤 >專案。如下圖所示，[名稱] 值會在 IntelliSense 方塊中快顯，根據相同範圍內元素的識別碼， (封入< 表單 >) 。

在 IntelliSense 中顯示識別碼
刪除最近加入< 的表單 >專案及其內容。

工作 2 - 使用 HTML 程式碼片段

HTML5 引進了超過 25 個新的語意標記。 Visual Studio 已經有這些標記的 IntelliSense 支援，但Visual Studio 2013藉由新增程式碼片段，讓您更快速且更容易撰寫標記。雖然這些標籤並不複雜，但有一些小的細微之處，例如為音訊標記新增正確的編解碼器後援。在這項工作中，您會看到音訊標籤的 HTML 程式碼片段。

在Index.cshtml檔案中< ，于 section >元素內輸入< aud，如下圖所示。

插入音訊專案
按 TAB 兩次，並注意頁面新增下列程式碼的方式，並將游標放在第一個來源的 src 屬性上。
```
<audio controls="controls">
     <source src="file.mp3" type="audio/mp3" />
     <source src="file.ogg" type="audio/ogg" />
</audio>
```
注意

按下 TAB 鍵兩次，就會插入程式碼片段。音訊程式碼片段會顯示音訊標籤的標準用法，並顯示兩個來源檔案，以改善支援。
刪除第二行，並更新第一行的來源，其中包含安裝ASP.NET 和 Web 工具顯示下列連結： https://learn.microsoft.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>
```
注意

原始程式檔會做為範例使用。如果您想要的話，可以使用另一個來源。
按CTRL + S以儲存檔案。
按CTRL + F5以啟動應用程式。
請注意，音訊播放程式已新增至應用程式。

Internet Explorer 中的音訊播放程式

Google Chrome 中的音訊播放程式
請勿關閉瀏覽器。您將在下一個工作中使用它們。

工作 3 - 在 JavaScript 檔中使用 IntelliSense

使用 Web Essentials 2013 時，樣式表單和 HTML 頁面會產生識別碼和類別名稱的清單。在此工作中，您將瞭解這些清單如何改善 Web Essentials 2013 中的 JavaScript IntelliSense 支援。

在 Index.cshtml 檔案中，新增下列程式碼來定義 JavaScript 程式碼的腳本標籤。
```
...
</section>
@section scripts{
    <script type="text/javascript">

    </script>
}
```
在腳本標籤內新增下列程式碼，以定義就緒的回呼函式。

(程式碼片段 - VisualStudio2013WebTooling - Ex2 - ReadyFunction)
```
(function () {
    $(document).ready(function () {

    });
}());
```
將插入號放在腳本標籤中，然後按CTRL + 鍵，以開啟建議功能表。
按一下 [解壓縮至檔案]。

JavaScript 擷取至檔案建議
在 [ 另存新檔 ] 視窗中，選取 [ 腳本 ] 資料夾，將檔案命名 為init.js ，然後按一下 [ 儲存]。

檔

[另存新檔] 視窗

注意

會建立init.js檔案，並將腳本的內容移至檔案。

Init.js使用包含的內容所建立的檔案
開啟 Index.cshtml 檔案，並檢查腳本標籤是否已取代為 init.js 檔案的參考。

Init.js html 參考
移至方案總管，並注意到解決方案中會自動包含init.js檔案。

方案中包含的Init.js檔案
切換回 init.js 檔案，以更新就緒的函式回呼。

在傳遞至就緒的函式回呼定義中，新增下列程式碼，以依特定類別屬性取得所有元素。

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

在getElementsByClassName函式呼叫內的引號之間按CTRL + 空格鍵。

顯示 getElementsByClassName 函式的 IntelliSense

注意

請注意，IntelliSense 會顯示專案樣式表單中定義的類別。

以下列程式碼取代您所建立的行。

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

將游標放在getElementsByTagName函式中的引號後面，然後按CTRL + 空格鍵。

顯示 getElementsByTagName 方法的 IntelliSense
從清單中選取 [音訊] ，然後按 ENTER鍵。其結果如下圖所示。

擷取音訊元素
在[方案總管] 中，以滑鼠右鍵按一下 [腳本] 資料夾中的 [init.js檔案]，然後從[Web Essentials] 功能表中選取[將 JavaScript 檔案 () 。

將 JavaScript 檔案縮 ()
當系統提示您在來源檔案變更時啟用自動縮小時，請按一下 [ 是]。

啟用自動縮小警告

注意

init.min.js會建立並新增為init.js檔案的相依性。

已建立Init.min.js檔案
開啟 init.min.js 檔案，並注意檔案已縮小。

Init.min.js檔案內容
在 init.js 檔案中，在 getElementsByTagName 函式呼叫下方新增下列程式碼，以播放所有音訊元素。

(程式碼片段 - VisualStudio2013WebTooling - Ex2 - PlayAudioElements)
```
var len = audioElements.length;
for (var i = 0; i < len; i++) {
    audioElements[i].play();
}
```
按一下CTRL + S以儲存檔案。由於已開啟縮排的檔案，您會看到一個對話方塊，指出檔案已在來源編輯器之外修改。按一下 [是] 。

Microsoft Visual Studio 警告
切換回 init.min.js 檔案，以確認檔案已使用新的程式碼更新。

已更新Init.min.js檔案
按一下 [瀏覽器連結重新整理] 按鈕。
一旦重新整理這兩個瀏覽器，您在上一個工作中看到的音訊播放程式就會自動開始播放。

中包含的

檢視中包含的音訊播放程式