原文:Creating Image Sprite in Visual Studio - Web Essential

译者注:有关图片精灵的信息请参阅http://baike.baidu.com/view/2173476.htm

通过本文,可以学习到如何使用Visual Studio的Web Essential扩展来创建图片精灵。假如你有一个网站,使用了大量的图像,且每个图像都是通过独立的请求加载的,那么请求的数量就会增加,这样,网站速度就会变慢。而这就需要进行优化,以加快网站速度。

图片精灵是一种将多个图像合成为一个大图像的排序技术,这样,网站就只需要加载一个文件而不是多个文件,从而可以加快网站速度。

下面先来了解一下Web Essential是什么,然后再看看如何在Visual Studio IDE中创建图片精灵。

Web Essential

Web Essentials为Visual Studio扩展了一些新功能,不过已经被Web开发人员遗忘很多年了。

如果你要编写CSS、HTML、JavaScript、TypeScript、CoffeeScript或者LESS,那么,你将会发现有许多有用的功能可以让你作为一个开发人员的生活更轻松。

该扩展主要面向的是所有使用Visual Studio的Web开发人员。它在2012年8月由Mads Kristensen首次提出。

基于Visual Studio 2013的Web Essentials 1.7现在让图像处理比以往简单了很多。

如果你还没有将该扩展安装到你喜爱的Visual Studio IDE中,那么你将会错过很多功能,你可以从快速的从这里去下载它。

现在,让我们来探讨一下如何去创建图像精灵。

将粘贴板中的图像粘贴到Visual Studio编辑器中

在Web Essential包含此功能之前尽管有许多不同的方法来创建图片精灵,但使用Visual Studio Web Essential扩展可以让该工作比之前的方法更简单。下面,按照以下步骤去做。

第一步:选择图片并右击选择的图片>Web Essentials>Create Image Sprite...

在单击“Create image sprite”后,它会让你输入精灵名称,输入名称并单击保存按钮。默认情况下,新的精灵会被添加到images目录。

第2步:展开精灵树(如上图),会立即在精灵树下看到.png文件。这些.png文件实际上就是单一图像中所包含的我们在创建精灵时选择的小图片。如下图。

第3步:展开MySprite.png文件,会找到.css、.less、.map和.scss文件,这些文件用途不大,只是精灵的备份,不过将他们留在项目里很重要。

如果打开MySprite.png.css文件,会看到一些CSS代码,可以将这些代码复制到原来的样式文件之中(site.css)。以下是MySprite.png.css文件的屏幕截图。

在上图中可以看到每一个小图片的定义,这些小图片是根据他们在大图片的位置来进行显示的。

将这些样式复制到Site.css文件或者其他的样式文件。

第4步:现在,为了能使用这些CSS,也就是新的图片精灵,需要在DOM中使用以下标记:

<div class="orderedList0"></div>
<div class="orderedList1"></div>
<div class="orderedList2"></div>
<div class="orderedList3"></div>
<div class="orderedList4"></div>

可以看到,在这里使用了类选择器来将CSS文件映射到样式。

我为这录了一个Hindi视频。如果你不了解Hindi,可以查看以上步骤。

译者注:要看视频请访问源地址。

作者:Abhimanyu Kumar Vatsa, Microsoft MVP in ASP.NET/IIS | Author | IT Faculty | Student of M.Tech. IT, works as an Assistant Lecturer in Coxtan College, Bokaro. Know More

使用Visual Studio创建图片精灵(Image Sprite)——Web Essential的更多相关文章

  1. 使用Visual Studio创建简单的自己定义Web Part 部件属性

    使用Visual Studio创建简单的自己定义Web Part 部件属性 自己定义属性使用额外的选项和设置拓展你的Web part部件.本文主要解说怎样使用Visual Studio创建简单的自己定 ...

  2. 使用Visual Studio创建映像向导(Image Sprite)——Web Essential

    原版的:Creating Image Sprite in Visual Studio - Web Essential 译者注:有关图片精灵的信息请參阅http://baike.baidu.com/vi ...

  3. 【翻译】使用Visual Studio创建Asp.Net Core MVC (一)

    This tutorial will teach you the basics of building an ASP.NET Core MVC web app using Visual Studio ...

  4. 用Visual Studio创建集成了gtest的命令行工程

    gtest代码库中的sample代码 在gtest的代码库中,包含了10个sample的代码,覆盖了gtest的常见用法,sample的代码位于以下文件夹: gtest\samples 由于gtest ...

  5. 使用Visual Studio 创建新的Web Part项目

    使用Visual Studio 创建新的Web Part项目 Web Part是你将为SharePoint创建的最常见的对象之中的一个.它是平台构建的核心基块. 1. 管理员身份打开Visual St ...

  6. 使用Visual Studio 创建可视Web Part部件

    使用Visual Studio 创建可视Web Part部件 可视Web Part部件是很强大的Web 部件.它提供内置设计器创建你的用户界面. 本文主要解说怎样使用Visual Studio 创建可 ...

  7. Visual studio 创建项目失败vstemplate

    Visual studio 创建项目失败 提示 the vstemplate file references the wizard class 'Microsoft.VisualStudio.WinR ...

  8. Xamarin 中Visual Studio创建项目提示错误

    Xamarin 中Visual Studio创建项目提示错误 错误信息:Object reference not set to an instance of an object 出现这种情况,是由于没 ...

  9. Visual studio 创建文件时自动添加备注

    Visual studio 创建文件时自动添加备注 描述 要求每回添加一个类,普通类或单元测试类文件头自动添加备注, 比如:Copyright, FileName, Author and so on. ...

随机推荐

  1. JAVA面向对象-----包机制

    JAVA面向对象-–包机制 问题: 当定义了多个类的时候,可能会发生类名的重复问题. 在java中采用包机制处理开发者定义的类名冲突问题. 怎么使用java的包机制呢? 1.使用package 关键字 ...

  2. Spark技术内幕:Storage 模块整体架构

    Storage模块负责了Spark计算过程中所有的存储,包括基于Disk的和基于Memory的.用户在实际编程中,面对的是RDD,可以将RDD的数据通过调用org.apache.spark.rdd.R ...

  3. Dynamics CRM2016 Web API之Retrieve Multiple

    之前的博文只介绍了通过记录的primary key来查询单条记录或者单个属性值,本篇介绍多条记录的查询方法 var filter = "?$filter=name eq '123'" ...

  4. SQLite 运算符(http://www.w3cschool.cc/sqlite/sqlite-operators.html)

    SQLite 运算符 SQLite 运算符是什么? 运算符是一个保留字或字符,主要用于 SQLite 语句的 WHERE 子句中执行操作,如比较和算术运算. 运算符用于指定 SQLite 语句中的条件 ...

  5. Sharing The Application Tier File System in Oracle E-Business Suite Release 12.2

    The most current version of this document can be obtained in My Oracle Support Knowledge Document 13 ...

  6. sh里的变量 $0 $1 $$ $#

    $0就是该bash文件名 $?显示最后命令的退出状态.0表示没有错误,其他任何值表明有错误. $*所有位置参数的内容:就是调用调用本bash shell的参数. $@基本上与上面相同.只不过是 &qu ...

  7. 18 Loader 总结

    1. Loader 装载器 Android3.0以后出来的 它可以使Activity和Fragment 异步加载数据 变得简单(Loader里封装了AsyncTask) Loader特点: 1,对每一 ...

  8. 1.3、Android Studio创建一个Android Library

    一个Android Library结构上与Android app模块相同.它可以包含构建一个app需要的所有东西,包括圆满,资源文件和AndroidManifest.xml.然而,并非编译成运行在设备 ...

  9. 《java入门第一季》之对文件和字符串进行MD5加密工具类

    上一篇介绍了MD5加密算法,之前写的代码有些冗余,而且可读性很差.今天把对文本数据的加密,以及获取文件的md5值做一个封装类.代码如下: package com.itydl.utils; import ...

  10. 参数估计:最大似然估计MLE

    http://blog.csdn.net/pipisorry/article/details/51461997 最大似然估计MLE 顾名思义,当然是要找到一个参数,使得L最大,为什么要使得它最大呢,因 ...