仓酷云

标题: 来一发CSS Sprites (CSS图象拼合手艺)教程东西 [打印本页]

作者: 海妖 时间: 2015-1-15 23:57
标题: 来一发CSS Sprites (CSS图象拼合手艺)教程工具
你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。
网页制造poluoluo文章简介：甚么是CSSSprites？Sprite（精灵）这个词在盘算机图形学中有它共同的界说，因为游戏、视频等画质愈来愈高，必需有一种手艺能够智能的处置材质和贴图，而且要同时坚持画面流利。Sprite就是如许一种手艺，它将很多图片组合到一个网格上，然后经由过程程序将每一个网格的内容
甚么是CSSSprites？
“Sprite”（精灵）这个词在盘算机图形学中有它共同的界说，因为游戏、视频等画质愈来愈高，必需有一种手艺能够智能的处置材质和贴图，而且要同时坚持画面流利。“Sprite”就是如许一种手艺，它将很多图片组合到一个网格上，然后经由过程程序将每一个网格的内容定位到画面上。
Sprite被定位到一副静态图片上，而且经由过程复杂的程序或硬件便可准确定位到画面上，一幅幅图片就像是被“变”出来的，他们并没有独自占用内存，以是被取名为“Sprite精灵”。

上图是口袋魔鬼的组合图片，能够点这里浏览更多。不是加载每一个但以图片
工夫举行到2000年，Web计划向着精巧、奇妙的偏向开展。计划师们入手下手思索利用非Javascript的方式制造鼠标滑过、悬停菜单的效果，这时候CSSSprite应运而生，它基于同上文提到的游戏Sprite一样的道理，而且利用CSS更简单把持，很快的盛行开来。
2004年，DaveShea提出了一种利用CSS把持组合图片的计划，将许太小的图片组合在一同，利用css界说背景属性，来把持图片的显现地位和体例。
当页面加载时，不是加载每一个独自图片，而是一次加载全部组合图片。这是一个了不得的改善，它年夜年夜削减了HTTP哀求的次数，加重服务器压力，同时延长了悬停加载图片所必要的工夫提早，使效果更流利，不会停留。
CSSSprites用在那里？
CSSSprites能够用在良多场所，年夜型网站能够将很多独自的图片，以无机的体例组合起来，从而使其便于保护和更新。图片之间一般会留出较年夜的空缺，使得图片不会影响网页的内容。但同时CSSSprite年夜多利用于较流动的像素定位中，它的弹性较差，收到定位等要素的制约。以是，你必要在可保护性vs下降负载之间衡量利害，选择最合适你的项目的体例。
上面是一些CSSSprites的利用典范：
Xing
这个网站将一些按钮、图标和LOGO做成了CSSSprites：

Amazon
亚马逊利用的年夜幅、划一奇妙的CSSSprites：

Apple
苹果网站利用CSSSprites来制造导航菜单的鼠标悬停效果：

YouTube
YouTube利用了一个2008像素高的CSSSprites：

CNN
CNN利用了十分复杂审慎的计划：

Digg
Digg的计划对照庞大：

Yahoo
Yahoo将他们大度的图标等间隔排布起来：

Google
Google利用了极为简化的计划：

DragonInteractive
一个丰厚多彩的CSSSprites计划：

TV1.rtp.pt
一个很年夜很酷的CSSSprites计划

CSSSprites经常使用来兼并频仍利用的图形元素，如导航、LOGO、支解线、RSS图标、按钮等。一般它们不会作为网页内容呈现，由于触及内容的图片并非每一个页面都一样。
关于CSSSprites的文章
CSSSprites：ImageSlicing’sKissofDeath
中文版：款式表贴图定位（CSSSprites）：图象切片的出生之吻
最威望的CSSSprites先容文章之一

CSSSprites：WhatTheyAre，WhyThey’reCoolAndHowToUseThem
一篇图文并茂的先容文章

HowYahoo.comandAOL.comImproveWebPerformanceWithCSSSprites
先容Yahoo、AOL等网站利用CSSSprites下降服务器压力的案例。
WhatAreCSSSprites？
又一篇先容文章

SpriteOptimization
DaveShea的思索：是否是真的有需要简历庞大的年夜型CSSSprites？谜底是不！不要弄得太庞大，找到一个折衷的计划才是邪道。

CreatingEasyandUsefulCSSSprites

网页制造poluoluo文章简介：甚么是CSSSprites？Sprite（精灵）这个词在盘算机图形学中有它共同的界说，因为游戏、视频等画质愈来愈高，必需有一种手艺能够智能的处置材质和贴图，而且要同时坚持画面流利。Sprite就是如许一种手艺，它将很多图片组合到一个网格上，然后经由过程程序将每一个网格的内容

一篇教程，其源文件可下载进修

FastRolloversWithoutPreload
一个疾速翻转效果的例子

CSSSprites+Roundedcorners
另外一个例子：利用CSSSprites完成背景圆角

CSSImageSprites
一篇教程
OptimizeYourWebsiteUsingCSSImageSprites
十分具体的教程，先容了CSSSprites的道理和使用办法。

AnimatedGIFForCSSSprites
一个对照出格的使用

ImageSpriteNavigationWithCSS
如何制造复杂的悬停菜单效果

AdvancedCSSMenu
仍是悬停效果

CreatingandUsingCSSSprites
一个十分基础的教程

CSSSprites视频教程
HowtoUseCSSSprites
DavidPerel注释了CSSSprites的基础观点，并演示了怎样在网页中利用它，长度：10分钟
CreatingRoundedButtonsWithCSSSprites
持续下面的教程，展现了怎样制造滑动按钮
ExactlyHowtoUseCSSSprites
AndresFernandez展现了CSSsprites怎样加速加载工夫和削减哀求次数
HowToUseCSSSprites
ChrisCoyier展现了一个CSSsprites的典范，他将8幅图片组合在了一同，而且利用jQuery制造了一个小程序。
FasterPageLoadsWithImageConcatenation
关于庞大的网站，削减图片哀求数目能够加重服务器包袱，这是很多站长所但愿看到的。
CSSImageSpritesIn10Minutes
另外一个关于导航菜单的教程
CSS：UsingPercentagesinBackground-Image
先容背景图片定位的办法
使用CSSSprites制造图象映照（imagemaps）
利用CSSSprites，你能够对一个工具的一小部分加载翻转效果，利用负值的背景图片地位（background-position），你能够创立基于CSS的图象映照，上面的文章报告了这一手艺：
CSSImageMapsUsingSprites
一个基于CSS的图象映照的复杂例子。你能够同传统的体例对照一下好坏。

CityGuideMapUsingSprites
另外一个横向定位的例子

AdvancedMapUsingSprites
一个更初级的手艺。

CSSSprites手艺
CSSSprites2
DaveShea利用jQuery扩大了典范的CSSSprites，他的手艺可让分歧的链接之间利用组合图片，即便用户禁用了Javascript。
CSSSprites2Refactored：BuildinganUnobtrusivejQueryPlug-In
JoelSutherland制造的jQuery插件，收拾了DaveShea的功效，并简化了初始化设置。

BackgroundRepeatandCSSSprites
甚么情形下利用CSSSprites
CSSSprite：PhotoshopScriptCombinesTwoImagesforCSSHover
这是一个能够导进Photoshop的举措设置，可让你疾速制造翻转按钮的背景图片。

ExtendingCSSSpriting
JenniferSemtner扩大了典范CSSSprites手艺，并报告应当在甚么时分利用它。
SlidingDoorsMeetsCSSSprites
滑动门手艺“SlidingDoorsofCSS.”
HowtoPreloadImagesWhenYouCan’tUseCSSSprites
怎样处置CSSSprites对网页内容的影响
JavaScriptSpriteAnimationUsingjQuery
AlexWalker分离CSSSprites和jQuery，完成了“翻开页面”的效果

IE6，CSSSpritesandAlphaTransparency
JulienLecomte报告IE6下的通明hack成绩
CSSSprite制造工具
DataURISprites
DURIS（DataURI［CSS］Sprites）是一个办理网页图片的新工具，它能够最年夜限制的匡助你削减背景图片的数目，削减哀求数。

Spritr
一个天生CSSSprites的复杂工具
SpriteCreator1.0
同上
CSSSpriteGenerator
制造CSSsprites的Drupal插件
CSSSpritesGenerator
这个工具同意你上传多张图片天生CSSSprites和CSS代码
ProjektFondueCSSSpriteGenerator
它具有疏忽反复图象，调剂图象精度，断定横向和纵向偏移，指定背景致和通明度，指定CSS前缀等浩瀚功效。

SmartSprites
基于java的桌面程序
你能够持续以你本人的体例编写CSS和利用图象，有一个工具能够主动为你设置CSSSprites，这里是PHP版本，它是开源的，详细能够看：ChrisBrainard’sSpriteCreator1.0.
附：CSS属性background-position（图象背景地位）该怎样设置
background-position（图象背景地位）这个属性是CSS中十分主要的属性。
依据CSS标准，background-position属性包括了两个（可选的）变量：程度地位（horizontal）和垂直地位（vertical），比方：
1..introduction{
2.background-image：url（bg.gif）;
3.background-position：［horizontalposition］［verticalposition］;
4.}
.introduction{background-image：url（bg.gif）;background-position：［horizontalposition］［verticalposition］;}
利用这个属性，你能够界说块级元素的背景图象地位，可使用%百分比或px像素为单元来界说图象入手下手的地位，也能够利用关头字：topleft，topcenter，topright，centerleft，centercenter，centerright，bottomleft，bottomcenter，bottomright.
在“background-position：x%y%;”如许一个语句中，x%指程度偏移，y%指垂直偏移，左上角是：0%，0%，右下角是：100%，100%，默许的是50%。
比方，你能够如许界说：
1.ulli{
2.background-image：url（bg.gif）;
3.background-position：19px85px;
4.}，
如许背景图片就被定位到了间隔左边19像素，间隔上边85像素。
关于这个属性，能够在这里找到更具体的材料：background-position（CSSproperty）。

那么什么是Div+CSS标准？Div+CSS的标准化设计到底有什么好处？

作者: 小女巫 时间: 2015-1-17 23:51
每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

作者: 只想知道 时间: 2015-1-25 12:47
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

作者: 简单生活 时间: 2015-2-2 22:10
以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

作者: 透明 时间: 2015-2-8 13:49
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

作者: 爱飞 时间: 2015-2-25 18:47
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

作者: 因胸联盟 时间: 2015-3-8 02:20
学Dreamweaver技术的过程其实是一个增加信心的过程。

作者: 山那边是海 时间: 2015-3-15 21:06
俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

作者: 再现理想 时间: 2015-3-22 04:31
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

欢迎光临仓酷云 (http://ckuyun.com/)