Web Essential 2013功能簡介-2

by vivid 24. 九月 2014 02:43

.NET Magazine國際中文電子雜誌
者:許薰尹
稿:張智凱
文章編號:N140915202
出刊日期:2014/09/24
開發工具:Visual Studio 2013 Ultimate Update 3Web Essential 2013 for Update 3
版本:.NET Framework 4.5.X

在《Web Essential 2013功能簡介-1》這一篇文章中,介紹了Web Essential 2013在網頁設計方面的輔助功能,這篇文章將繼續探討這部分。

設計CSS樣式

在Visual Studio 2013開發工具中設計CSS樣式時,Web Essential也提供許多語法的支援,我們來看看這些功能。

Browser matrix tooltip

例如當你設定一個CSS屬性時,Web Essential會自動偵測哪些版本以上的哪些瀏覽器有提供支援,並馬上顯示出Browser matrix tooltip」:

clip_image002

圖 1:「Browser matrix tooltip」。

另外也更提供多語法的提示,例如以下範例要設定border時,馬上列出設定的參考語法:

clip_image004

圖 2:CSS參考語法。

使用Color Picker

在設計CSS樣式時,若使用到顏色,會在表示顏色的文字前方加上一個小方塊,顯示目前設定的顏色,例如以下圖示,當你使用滑鼠點選這個小方塊,就會叫出Color Picker對話盒,列出常用的顏色:

clip_image006

圖 3:Color Picker對話盒。

你還可以點選右下角的向下箭頭,此時將會顯示調色盤,讓你更容易客製化喜好的顏色:

clip_image008

圖 4:顯示調色盤。

CSS程式碼片段功能

設定CSS屬性時,提供程式碼片段功能,例如想要設定column-count屬性時,只要輸入幾個關鍵字,Visual Studio 2013會自動列出可使用的程式碼片段,你可以按鍵盤上、下鍵選取想要使用的程式碼片段,然後按下鍵盤Tab鍵:

clip_image010

圖 5:CSS程式碼片段功能。

此時將會自動產生以下語法,並且自動地幫你產生vender prefix;「-moz-」是給Firefox瀏覽器使用的;「-webkit-」則是適用於Chrome與Safari:

 

div {
    -moz-column-count: inherit;
    -webkit-column-count: inherit;
    column-count: inherit;
}

 

你也可以在CSS屬性下方,點選屬性的智慧型標籤(或按下CTRL+.),此時將出現一個「Add missing vendor specifics」選項,可以幫你加上vender prefix:

clip_image012

圖 6:自動加上vender prefix。

整合瀏覽器除錯工具

Web Essential 2013也可以整合瀏覽器除錯工具,做雙向的修改動作,若有網頁如下,引用一個外部CSS檔案:

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
  <link href="~/Content/StyleSheet1.css" rel="stylesheet" />
</head>
<body>
    <div>
      <h1>My Page</h1>
    </div>
</body>
</html>

 

StyleSheet1.css樣式檔案內容如下:

h1 {

color: blue;

border: 5px dotted green;

}

網頁執行後,只要勾選瀏覽器Browser Link工具列上的「F12 Auto-sync」選項,接著按F12開啟瀏覽器除錯工具,修改樣式時,會自動更新同步到Visual Studio的樣式表,例如原來樣式表設定h1的顏色是「blue」,在IE除錯工具中,將之設定為「red」,Visual Studio 2013的StyleSheet1.css檔案內容也馬上自動地更新為「red」:

clip_image014

圖 7:整合瀏覽器除錯工具。

你也可以選擇手動更新異動的部分,只要清除選取Browser Link工具列上的「F12 Auto-sync」選項,在瀏覽器除錯工具修改CSS屬性之後,再按下Browser Link工具列上的「Save F12 changes」選項,就會將異動寫回Visual Studio 2013開發工具:

clip_image016

圖 8:手動更新異動。

壓縮 CSS 檔案

Web Essential 2013也提供CSS 檔案壓縮功能,在Visual Studio 2013開發工具「Solution Explorer」視窗中,按CTRL鍵,同時選取多個想要打包的CSS檔案,按滑鼠右鍵,從快捷選單中選取「Web Essential」-「Create CSS bundle file」選項

clip_image018

圖 9:「Create CSS bundle file」選項。

接著Visual Studio 2013會跳出一個對話盒,讓你為打包檔命名:

clip_image020

圖 10:設定bundle檔案名稱。

在專案之中將產生MyCSS.css.bundle、MyCSS.css、MyCSS.min.css三個檔案。MyCSS.css.bundle內容如下,描述組成打包檔案的檔案列表:

<?xml version="1.0" encoding="utf-8"?>
<bundle xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://vswebessentials.com/schemas/v1/bundle.xsd">
  <settings>
    <!--Determines if the bundle file should be automatically optimized after creation/update.-->
    <minify>true</minify>
    <!--Determin whether to generate/re-generate this bundle on building the solution.-->
    <runOnBuild>false</runOnBuild>
    <!--Use absolute path in the generated CSS files. By default, the URLs are relative to generated bundled CSS file.-->
    <adjustRelativePaths>true</adjustRelativePaths>
    <!--Specifies a custom subfolder to save files to. By default, compiled output will be placed in the same folder and nested under the original file.-->
    <outputDirectory />
  </settings>
  <!--The order of the <file> elements determines the order of the files in the bundle.-->
  <files>
    <file>/Content/StyleSheet1.css</file>
    <file>/Content/StyleSheet2.css</file>
  </files>
</bundle>

如有需要,調整一下打包檔案的順序。最後在網頁中引用產生出來的min版本即可:

 

<!DOCTYPE html>

<html>
<head>
  <meta name="viewport" content="width=device-width" />
  <title>Index</title>
  <link href="~/Content/MyCSS.min.css" rel="stylesheet" />
</head>
<body>

  <h1>My Page</h1>
  <div class="Content-images-cat_hiss"></div>
  <div class="Content-images-cat_moustache"></div>

</body>
</html>


設計HTML功能

在Visual Studio 2013開發工具中設計HTML時,Web Essential 2013也為其增加不少擴充功能。

 

為標籤加父標籤

你可以很容易地為標籤加父標籤,舉例來說,若有h1標籤如下。

clip_image022

圖 11:為標籤加父標籤。

按下快速鍵:

SHIFT + ALT +W

則自動在游標所在的標籤之外加一個div標籤,將其包起來。

clip_image024

圖 12:為標籤加父標籤。

可以利用標籤的智慧型標籤將之移除,這樣就不會老是找不到結尾的標籤:

clip_image026

圖 13:移除父標籤。

預覽圖片功能

設計網頁時,若使用到圖片,則有預覽圖片功能,舉例來說,若網頁中有一個img標籤:

<img src="~/Content/images/cat_moustache.png" />

只要將游標移動到此項目上方,就開啟預覽圖片功能

clip_image028

圖 14:預覽圖片功能。

圖片編碼為base64

一般而言,將圖片編碼為base64格式內嵌在HTML或CSS檔案之中,可以減少HTTP請求的數量,以提升網站執行效能。圖片編碼為base64表示將二進位資料轉換成文字格式資料。只要將游標停留在<img>標籤上,選取智慧型標籤,再選取「Encode image in base64」選項:

clip_image030

圖 15:圖片編碼為base64格式。

完成後,你的img標籤看起來如下:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABpTmIHd2…..以下省略" />

後續可以從智慧型標籤選取「Save as image」,將圖片檔另存一個新檔:

clip_image032

圖 16:將圖片檔另存一個新檔。

而「Insert width and height attributes」功能會為img加上width與height屬性:

clip_image034

圖 17:為img加上width與height屬性。

「Optimize image」選項則為圖片做最佳化,縮小圖片檔案的大小。

Image sprite

若網站中有許多圖片,每張圖片要使用到一個HTTP請求從伺服端下載,在圖片的數量多時,請求的數量也顯著地增多,這樣整體而言會降低網站的執行效能。Image sprite是一種技巧,可以將多張圖片(PNG、JPG或GIF檔),組合成一張大圖,網頁只要發一個HTTP請求,來下載這張大圖,以增加網站的執行效能。

要建立Image sprite,只要在Visual Studio 2013開發工具的「Solution Explorer」視窗之中,按同時選取多個圖片檔案(按CTRL鍵),按滑鼠右鍵,從快捷選單中選取「Web Essentials」選項-「Create image sprite」:

clip_image036

圖 18:Create image sprite。

接著將會跳出一個視窗,要求取一個檔案名稱,並選擇儲存檔案的路徑,通常會儲存在images資料夾下

clip_image038

圖 19:取一個檔案名稱。

MySprite.sprite檔案是一個XML格式的檔案,描述大圖是由哪些檔案組成,內容參考如下:

<?xml version="1.0" encoding="utf-8"?>
<sprite xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://vswebessentials.com/schemas/v1/sprite.xsd">
  <settings>
    <!--Determines if the sprite image should be automatically optimized after creation/update.-->
    <optimize>true</optimize>
    <!--Determines the orientation of images to form this sprite. The value must be vertical or horizontal.-->
    <orientation>vertical</orientation>
    <!--File extension of sprite image.-->
    <outputType>png</outputType>
    <!--Determin whether to generate/re-generate this sprite on building the solution.-->
    <runOnBuild>false</runOnBuild>
    <!--Use full path to generate unique class or mixin name in CSS, LESS and SASS files. Consider disabling this if you want class names to be filename only.-->
    <fullPathForIdentifierName>true</fullPathForIdentifierName>
    <!--Use absolute path in the generated CSS-like files. By default, the URLs are relative to sprite image file (and the location of CSS, LESS and SCSS).-->
    <useAbsoluteUrl>false</useAbsoluteUrl>
    <!--Specifies a custom subfolder to save files to. By default, compiled output will be placed in the same folder and nested under the original file.-->
    <outputDirectory />
    <!--Specifies a custom subfolder to save CSS files to. By default, compiled output will be placed in the same folder and nested under the original file.-->
    <outputDirectoryForCss />
    <!--Specifies a custom subfolder to save LESS files to. By default, compiled output will be placed in the same folder and nested under the original file.-->
    <outputDirectoryForLess />
    <!--Specifies a custom subfolder to save SCSS files to. By default, compiled output will be placed in the same folder and nested under the original file.-->
    <outputDirectoryForScss />
  </settings>
  <!--The order of the <file> elements determines the order of the images in the sprite.-->
  <files>
    <file>/Content/images/cat_hiss.png</file>
    <file>/Content/images/cat_moustache.png</file>
    <file>/Content/images/cat_poo.png</file>
    <file>/Content/images/cat_purr.png</file>
    <file>/Content/images/cat_slippers.png</file>
    <file>/Content/images/cat_tied.png</file>
  </files>
</sprite>

此外工具會幫你產生一個MySprite.png檔案,這個檔案是合併先前你選擇的檔案的大圖檔:

clip_image040

圖 20:MySprite.png檔案。

在「Solution Explorer」視窗中,MySprite.sprite節點下,包含了附檔名為css、less、map、scss等檔案,若開啟產生的CSS檔案,你可以看到其中包含使用圖片的CSS語法:

 

/*
This is an example of how to use the image sprite in your own CSS files
*/
.Content-images-cat_hiss {
/* You may have to set 'display: block' */
    width: 256px;
    height: 256px;
    background: url('MySprite.png') 0 0;
}
.Content-images-cat_moustache {
/* You may have to set 'display: block' */
    width: 256px;
    height: 256px;
    background: url('MySprite.png') 0 -256px;
}
.Content-images-cat_poo {
/* You may have to set 'display: block' */
    width: 256px;
    height: 256px;
    background: url('MySprite.png') 0 -512px;
}
.Content-images-cat_purr {
/* You may have to set 'display: block' */
    width: 256px;
    height: 256px;
    background: url('MySprite.png') 0 -768px;
}
.Content-images-cat_slippers {
/* You may have to set 'display: block' */
    width: 256px;
    height: 256px;
    background: url('MySprite.png') 0 -1024px;
}
.Content-images-cat_tied {
/* You may have to set 'display: block' */
    width: 256px;
    height: 256px;
    background: url('MySprite.png') 0 -1280px;
}

 

我們只要將這些CSS設定,複製到你的網站使用的CSS檔案,例如StyleSheet1.css,並適當修訂圖片檔案路徑,假設圖片放在images資料夾下:

 

.Content-images-cat_hiss {
    width: 256px;
    height: 256px;
    background: url('images/MySprite.png') 0 0;
}

.Content-images-cat_moustache {
    width: 256px;
    height: 256px;
    background: url('images/MySprite.png') 0 -256px;
}

在網頁中,引用StyleSheet1.css樣式表,然後在標籤中,如div設定CSS樣式:

<!DOCTYPE html>

<html>
<head>
  <meta name="viewport" content="width=device-width" />
  <title>Index</title>
  <link href="~/Content/StyleSheet1.css" rel="stylesheet" />
</head>
<body>

  <h1>My Page</h1>
  <div class="Content-images-cat_hiss"></div>
  <div class="Content-images-cat_moustache"></div>
</body>
</html>


範例網頁在瀏覽器的執行結果:

clip_image042

圖 21:使用Image sprite。

參考資源

· Web Essential 2013下載

l http://vswebessentials.com/download

Tags:

.NET Magazine國際中文電子雜誌 | Visual Studio | 許薰尹Vivid Hsu

新增評論




  Country flag
biuquote
  • 評論
  • 線上預覽
Loading






NET Magazine國際中文電子雜誌

NET Magazine國際中文電子版雜誌,由恆逸資訊創立於2000,自發刊日起迄今已發行超過500篇.NET相關技術文章,擁有超過40000名註冊讀者群。NET Magazine國際中文電子版雜誌希望藉於電子雜誌與NET Developer達到共同學習與技術新知分享,歡迎每一位對.NET 技術有興趣的朋友們多多支持本雜誌,讓作者群們可以有持續性的動力繼續爬文。<請加入免費訂閱>

月分類Month List