使用Visual Studio创建图片精灵(Image Sprite)——Web Essential
原文: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的更多相关文章
- 使用Visual Studio创建简单的自己定义Web Part 部件属性
使用Visual Studio创建简单的自己定义Web Part 部件属性 自己定义属性使用额外的选项和设置拓展你的Web part部件.本文主要解说怎样使用Visual Studio创建简单的自己定 ...
- 使用Visual Studio创建映像向导(Image Sprite)——Web Essential
原版的:Creating Image Sprite in Visual Studio - Web Essential 译者注:有关图片精灵的信息请參阅http://baike.baidu.com/vi ...
- 【翻译】使用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 ...
- 用Visual Studio创建集成了gtest的命令行工程
gtest代码库中的sample代码 在gtest的代码库中,包含了10个sample的代码,覆盖了gtest的常见用法,sample的代码位于以下文件夹: gtest\samples 由于gtest ...
- 使用Visual Studio 创建新的Web Part项目
使用Visual Studio 创建新的Web Part项目 Web Part是你将为SharePoint创建的最常见的对象之中的一个.它是平台构建的核心基块. 1. 管理员身份打开Visual St ...
- 使用Visual Studio 创建可视Web Part部件
使用Visual Studio 创建可视Web Part部件 可视Web Part部件是很强大的Web 部件.它提供内置设计器创建你的用户界面. 本文主要解说怎样使用Visual Studio 创建可 ...
- Visual studio 创建项目失败vstemplate
Visual studio 创建项目失败 提示 the vstemplate file references the wizard class 'Microsoft.VisualStudio.WinR ...
- Xamarin 中Visual Studio创建项目提示错误
Xamarin 中Visual Studio创建项目提示错误 错误信息:Object reference not set to an instance of an object 出现这种情况,是由于没 ...
- Visual studio 创建文件时自动添加备注
Visual studio 创建文件时自动添加备注 描述 要求每回添加一个类,普通类或单元测试类文件头自动添加备注, 比如:Copyright, FileName, Author and so on. ...
随机推荐
- Python3 日期和时间
Python 程序能用很多方式处理日期和时间,转换日期格式是一个常见的功能. Python 提供了一个 time 和 calendar 模块可以用于格式化日期和时间. 时间间隔是以秒为单位的浮点小数. ...
- 基于Java配置Spring加Hibernate和再加SpringData时的差别
先在类路径application.properties jdbc.driverClassName = org.postgresql.Driver jdbc.url = jdbc:postgresql: ...
- 安卓 新版本 获取wifi状态网络是否可用等
写下这篇文章目的:当我学习的和百度看看如何获取网络状态 发现都是一些比较老的方法 API23已结过时 所以在此写下记录 ,我不明白国内为什么那么少 那么我们来看看旧方法 package com.che ...
- MPAndroidChart图形联动
MPAndroidChart图形联动 本篇基于博客MPAndroidChart的K线图上添加均线,两个MPAndroidChart是有联动效果的 原理 获取正在滑动的Chart的触摸事件,将事件同步给 ...
- Android设置竖屏
Android设置竖屏(禁止旋转屏) 清单文件,Activity下添加属性 android:screenOrientation="portrait" 如下 <?xml ver ...
- Android线性布局
线性布局 LinearLayout 是一个视图组,用于使所有子视图在单个方向(垂直或水平)保持对齐. 您可以使用 android:orientation 属性指定布局方向. LinearLayout ...
- python 3 黑色魔法元类初探
最近读django源码,发现必须了解元类才能理解一些很神奇的行为. 发现元类实际上是控制class的创建过程.比如类B继承某个看似平淡无奇的类A之后,你在类B中定义的属性或方法可能会遭到彻底改变. 假 ...
- JAVA面向对象-----成员内部类的访问方式
成员内部类的访问方式 1.内部类可以直接访问外部类的成员属性.(孙悟空相当于内部类飞到牛魔王的肚子里面去). 2.外部类需要访问内部类的成员属性时需要创建内部类的对象. 1.在外部类的成员函数中创建内 ...
- 使用MD5SUM检查文件
有不少网站提供下载文件的同时,提供了文件的MD5SUM的值.如何检查自己下载的文件与原文件一样呢?用md5sum的-c选项. 操作如下: 1.先新建一个文本文件,写入网站上提供的md5sum的值,空两 ...
- Struts 2 标签库
<s:if>标签 拥有一个test属性,其表达式的值用来决定标签里内容是否显示 <s:if test="#request.username=='clf'"> ...