CSS教程之CSS教程:新的图象交换办法

表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中，你可以减少未来网页无效的可能。
网页制造poluoluo文章简介：熟习CSS的开辟者必定晓得图象交换手艺，也深知它的意义，DaveShea曾在他的一篇文章对此做了具体的总结，参看DaveShea’sexcellentsummary，PaulYoung在剖析现存的一切办法的优弱点以后，提出了一种新的办法，并将其定名为“形态域办法”（TheStateMethod），
熟习css的开辟者必定晓得图象交换手艺，也深知它的意义，DaveShea曾在他的一篇文章对此做了具体的总结，参看DaveShea’sexcellentsummary，PaulYoung在剖析现存的一切办法的优弱点以后，提出了一种新的办法，并将其定名为“形态域办法”（TheStateMethod），本文将具体先容该办法的道理：
现存办法的弱点：

• 简单生效，比方：图象禁用大概交换图象含有通明地区；
  
• 过于庞大不克不及敏捷牢靠的实行；
  
• 经由过程js遍历文档树，在页面加载时呈现的明灭不尽人意；
  
• 大概与一些扫瞄器不兼容
  

新的图象交换办法：
新的图象交换手艺必要借助于js来完成，但很简单实行，只必要将一小段js引进到头部便可。一旦js实行，呼应的划定规矩前将附加“.image-on”，只需客户真个图片未被禁用，划定规矩就会失效，上面是一条使用到h1“形态域办法”的声明：
h1{
width:100px;
height:50px;
}
@mediascreen{
.images-onh1{
text-indent:-10000px;
background-image:url(image.png);
overflow:hidden;
}
}
第一条划定规矩老是失效，第二条只要在image未被禁用时失效。“text-indent”使笔墨偏移于屏幕以外，“overflow:hidden”次要用来在FF下安排锚点在被点击时其核心偏移于屏幕以外。
第二条划定规矩包绕在@mediascreen中，次要用来包管图象交换只产生在屏幕浏览器中，而不是在打印形态下实行。假如不如许处置，页面打印时，多半用户将看到一个很年夜的清闲而不是成心义的文本。
该项手艺实行起来很快。由于文本偏移于屏幕以外，图象能够包括通明元素，透过图象自己，你看不就任何文本。Js实行很快，几近是瞬时的，它充实使用扫瞄器自己的特征。

办法剖析

“形态域办法”是在一种假定的形态下，疾速使css划定规矩失效的办法，其高低文背景为document，如许制止了扫瞄器遍历DOM树。使用“形态域办法”有两个来由：

• 针对用户的反响，页脸部份内容再格局化；
  
• 基于客户端扫瞄器、设备、和别的情况而附加分外的款式。
  

“形态域办法”经由过程利用上面的script给html附加一个class。
document.enableStateScope=function(scope,on)
{
varde=document.documentElement;
if(on)
de.className+=""+scope;
else
de.className=de.className.replace(
newRegExp(""+scope+""),"");
};
这段js有一点小成绩，在示例页中切换功效其实不失效，我从头修正了一下，代码以下：
functionhasClass(ele,cls){
returnele.className.match(newRegExp((s|^)+cls+(s|$)));
}
functionaddClass(ele,cls){
if(!this.hasClass(ele,cls))ele.className+=""+cls;
}
functionremoveClass(ele,cls){
if(hasClass(ele,cls)){
varreg=newRegExp((s|^)+cls+(s|$));
ele.className=ele.className.replace(reg,);
}
}
document.enableStateScope=function(scope,on){
varde=document.documentElement;
On?addClass(de,scope):removeClass(de,scope);
};
下面的hasClass、addClass、removeClass办法借用的是《ProJavaScriptTechniques》供应的办法。假如你利用过jquery，办法将更复杂。

“形态域”能够经由过程上面的办法来切换：
if(condition==true){
document.enableStateScope("myScope",true);
}
假如“形态域”为“on”，形态域的名字将附加到划定规矩的选择器之前，上面这条划定规矩在前提为真时会将锚点的色彩酿成blue。
a{color:red;}
.myScopea{color:blue;}
正如你所料想的那样，形态域图象替换手艺是经由过程反省图象是不是被禁用而事情的。假如未被禁用，将激活“image-on”形态域，这很直截了当。

网页制造poluoluo文章简介：熟习css的开辟者必定晓得图象交换手艺，也深知它的意义，DaveShea曾在他的一篇文章对此做了具体的总结，参看DaveShea’sexcellentsummary，PaulYoung在剖析现存的一切办法的优弱点以后，提出了一种新的办法，并将其定名为“形态域办法”（TheStateMethod），

反省图片是不是禁用
该办法反省图片是不是禁用，并非哀求服务器上的图片，由于那样会招致一次分外的http哀求。作者创立了一个奇妙的办法。
在年夜多半扫瞄器中，Image工具能够实例化并追溯到一个有效的URL（http：//0），如许很简单检测Image的形态。假如禁用，onerror事务将触发，在js文件的开首，j创建一个新的图象工具：
varimg=newImage();
可是，有两个乖僻的扫瞄器对此办法其实不兼容。在Gecko扫瞄器中，不管Image是不是被禁用。Onerror事务老是被触发。所幸的是，别的一种可行的计划能够办理此成绩－－给html元素附加一个有效的背景图片，然后经由过程getComputedStyle办法取得style属性。假如Image禁用，其属性为none或url(invalid-url:):
if(img.style.MozBinding!=null)
{
img.style.backgroundImage="url("+document.location.protocol+"//0)";
varbg=window.getComputedStyle(img,).backgroundImage;

if(bg!="none"&&bg!="url(invalid-url:)"||document.URL.substr(0,2)=="fi")
{
document.enableStateScope("images-on",true);
}
}
别的一个富有应战性的扫瞄器是safari，假如哀求是一个有效的URL，safari的形态栏将呈现毛病提醒，但页面结构不受任何影响。假如用户的形态栏处于开启形态，报错将一向延续，这很不专业，一样，作者研讨了别的一种可行的计划。假如Image来自于1*1的gif图象，且被数据编码。假如Image禁用，其宽度将为0，以下为在safari中测试的情形：
else
{
img.style.cssText="-webkit-opacity:0";
if(img.style.webkitOpacity==0)
{
img.onload=function()
{
document.enableStateScope("images-on",img.width>0);
}
img.src=
"data:image/gif;base64,"+
"R0lGODlhAQABAIAAAP///wAAACH5BAE"+
"AAAAALAAAAAABAAEAAAICRAEAOw==";
}
}
最初，关于别的扫瞄器，在入手下手初始化Image工具时，仅仅必要测试onerror触发事务。
else
{
img.onerror=function(e)
{
document.enableStateScope("images-on",true);
}
img.src="about:blank";
}
形态域是能够切换的
能够创立一个体系让用户在文本和替换图象之间切换。
检察示例（示例文件由PaulYoung供应）
class属性增加到html之上而不是body或别的子元素之上，次要缘故原由在于在图象交换之前，body必要周全加载。假如“image-on”不增加到html之上。当形态域启用时，将会呈现明灭。
图象交换手艺是css中相称主要的一部分。鉴于现存图象交换手艺的弱点，作者花大批工夫另辟门路，办法独到，值得自创。
示例下载：tate-scope-image-replacement.zip
翻译原文：http://www.denisdeng.com/?p=235
英文原文：http://www.sitepoint.com/article/image-replacement-state-scope/

凡是和我讨论客户段效率的全是脑子有问题的，影响的全是图片和Flash，所以我一直建议一个提交按钮就不要用图片带代替了。

时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上

使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

仓酷云

每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。