经过我的研究，发现了恢复火狐Firefox 7.0中被隐藏的http://的方法，其实很简单的。

1，在火狐的浏览器地址栏中输入about:config并回车。如果提示会失去质保选择确定就可以了。

2，在顶部输入browser.urlbar.trimURLs，找到这个Boolean类型的值。没有的话就新建一个这个名字的Boolean值。

3，双击将值改成true。

不用重启，现在就能看到浏览器地址栏网址的http://开头就已经回来了。

CSS3是W3C发布的CSS的最新版本，支持大量强大的功能，但是由于各大浏览器对标准的支持程度不同，很难保证制作的东西在所有的浏览器中都保持一致。现在连向来对标准支持很差的IE都发布了遵循W3C标准的IE9，CSS3的特性在各大浏览器上基本都得到了实现。现在我教你使用CSS3添加圆角和阴影，另外还有CSS2中的文字阴影。

CSS离不开HTML，所以先要用HTML把内容写好，然后才能用CSS样式话。HTML很简单，为了演示圆角和阴影，我只使用了一个div，一个h1和一个h2。完成的HTML如下：

SoleilNeon
Design Better

HTML很简单，只有短短3行，如果没有应用CSS，你会发现在浏览器中这相当的丑，当我们应用了CSS样式化HTML之后，效果就不一样了，CSS就是这样化腐朽为神奇的。现在为h1和h2文字设置样式，为div设置背景色和边框。

*{
	margin:0;
	padding:0;
}

body{
	background-color:#333333;
	font:62.5% Arial, Helvetica, sans-serif;
}

h1{
	color:#333333;
	font-size:5em;
	margin-top:50px;
	text-align:center;
}

h2{
	color:#333333;
	font-size:3em;
	text-align:center;
}

#box{
	background-color:#cccccc;
	border:1px solid #ffffff;
	left:50%;
	top:50%;
	margin-left:-251px;
	margin-top:-101px;
	width:500px;
	height:200px;
	position:absolute;
}

现在，有了这个基础的外观，没有圆角，没有阴影，没有文字阴影，最为简单的效果。

现在，我们要给div添加上圆角和阴影，代码如下：

#box{
	background-color:#cccccc;
	border:1px solid #ffffff;
	border-radius:10px;
	box-shadow:0 0 15px 2px #000000;
	left:50%;
	top:50%;
	margin-left:-251px;
	margin-top:-101px;
	width:500px;
	height:200px;
	position:absolute;
}

CSS3中的border-radius属性是用于添加圆角的，属性值为圆角的半径。这里设置的为10像素。

box-shadow属性用于添加阴影。box-shadow共有5个参数，一次为x轴位移，y轴位移，模糊半径，扩展，颜色值。如果你熟悉Photoshop的话，那么这些属性很好理解。

现在，如果你使用的是IE 9，或者Opera 10以上版本的话就能看到圆角和阴影了，就像这样：

但是，如果你使用的是Firefox的话，现在还看不到圆角和阴影，就和第一张图的效果一样，因为Firefox目前还不支持公共的border-radius和box-shadow，只支持Firefox私有的CSS3属性。如果你使用的是Chrome或者Safari浏览器的话现在只能看到圆角，还看不到阴影，因为Chrome和Safari同样只支持Webkit引擎的私有CSS3属性。现在的工作就是给这3个浏览器添加圆角和阴影。添加如下的代码：

#box{
	background-color:#cccccc;
	border:1px solid #ffffff;
	border-radius:10px;
	box-shadow:0 0 15px 2px #000000;
	-moz-border-radius:10px;
	-moz-box-shadow:0 0 15px 2px #000000;
	-webkit-box-shadow:0 0 15px 2px #000000;
	left:50%;
	top:50%;
	margin-left:-251px;
	margin-top:-101px;
	width:500px;
	height:200px;
	position:absolute;
}

现在，所有的浏览器都能正确的显示圆角了。-moz-border-radius和-moz-box-shadow是Firefox的私有CSS3属性，参数方式和公共的border-radius及box-shadow是一样的，其它的浏览器无法识别这两个属性，所以会跳过，并不会有什么影响。-webkit-box-shadow是Chrome和Safari的Webkit引擎的私有属性，参数方式也和公共的box-shadow一样。圆角和阴影都完成了，现在该给文字添加阴影了。添加如下的代码：

h1{
	color:#333333;
	font-size:5em;
	margin-top:50px;
	text-align:center;
	text-shadow:1px 1px 1px #ffffff;
}

h2{
	color:#333333;
	font-size:3em;
	text-align:center;
	text-shadow:1px 1px 0px #ffffff;
}

text-shadow属性用于给文字添加阴影，但是如果你有技巧的话可以做成像我这样的向内凹陷的浮雕效果。text-shadow的参数依次为，x轴位移，y轴位移，模糊半径，颜色值。看起来是阴影还是浮雕最重要的就是颜色的把握上。

现在除了IE9之外的浏览器都能显示文字阴影效果了，IE9不支持text-shadow属性。完成之后的效果就像这样：

这个效果在IE9，Firefox 3.6.10，Chrome 7.0.544.0，Opera 10.70，Safari 5.0.1上测试通过。其实只要浏览器版本不要太旧，不要是非IE9版的IE浏览器就能显示出来。你可以用IE8打开这个页面看看效果，没有圆角，没有阴影，没有文字阴影。

这个效果可以在Smigoo的主页看到，由SoleilNeon荣誉制作，哈哈。

但是Twitter是怎么封也封不住的，只要想上Twitter就没有上不去的道理。原因在于Twitter是支持API的，任何人可以在任何服务器上架设API，这是根本就封不了的。鉴于从本月1日开始Twitter强制使用Oauth验证，这里要搭建的API就是支持Oauth的。

网上有不少架设Twitter API的教程，但是我看了几乎所有要么是讲解的不细致，要么就是介绍的方法不管用，所以我特意写下这篇文章。先说一下服务器的要求。服务器需要支持PHP和.htaccess，Windows主机是不行了，Linux主机倒是支持.htaccess。记得.htacess是由Apache支持，如果是安装Apache的Windows主机也有可能支持，不妨试试。

第一步，注册一个Twitter API

架设自己的Twitter API第一步就是要去Twitter的Developers页面注册一个API，地址为http://dev.twitter.com，然后选择页面中的Register an app，如下图。

然后进入注册API的页面，如下图所示，红框的部分为必填，我将一一讲解。

Application Name：自己给API起一个名字，可以随便起，中文也行。这个Name将会显示在每条Tweet后的via部分。
Applicattion Website：API的网站，点击via部分的API名字之后打开的网页，可以是任意地址，如果有自己的网站，可以填写自己的。
Application Type：这里使用Twip架设API就必须选择Browser
Callback URL：这里是回调地址，一般只要写twip所在的路径即可。比如将twip上传至http://www.example.com/twip/，那么只要写http://www.example.com/twip/即可。
Default Access type：选中Read&Write
Application Icon：这个不是必须的，可以自己上传一个图标。

完成之后Twitter会转到API详细信息的页面，这里需要记下Comsumer Key和Consumer Secret。这样API就注册完成了。

第二步，配置Twip

先去这里下载Twip，当前最新版为4.0.2。将下载好的文件解压，用文本编辑器打开其中的config-example.php文件，在OAUTH_KEY处输入刚从Twitter得到的Comsumer Key，在OAUTH_SECRET处输入Comsumer Secret。如果需要压缩数据，将COMPRESS处设置为TRUE。将文件保存为config.php保存。

接着将文件夹上传至服务器，地址应该和API的Callback URL一致。如果Callback URL为http://www.example.com/twip/，那么这里也应该是http://www.example.com/twip/。

第三步，获取API地址

打开Twip所在的URL，会进入Twip的界面，选择其中的使用O模式。

接着要求输入自定义的URL地址，可以自己随便输入。然后就能得到API地址了，利用这个API就能在自己的客户端里使用Twitter服务了。

OK，API就架设完成了。

从小我们上学的时候就已经知道自然界是三原色组成的，那是红黄蓝色原色。可是到了计算机中，三原色不再是红黄蓝，而是红绿蓝，也就是俗称的RGB色彩。为什么计算机中的三原色是红绿蓝？那么这篇文章就为你揭晓答案。

生活中的红黄蓝三原色是基于减法原理的，也就是说基础色是白色，这是印刷领域的标准，俗称CMYK。而计算机中的基础色是黑色，是基于加法原理的，这也是为什么电视机，液晶电视，电脑，手机这些设备的屏幕都是黑的，而且是越黑越好，因为黑色是基础色，需要显示图像的话就要在上面加上色彩。

光在物理学上是一种电磁波，波长介于0.39-0.77微米之间的电磁波是人眼可见的范围，这个范围称为可见光谱，超出这个范围人类就看不到了，比如红外线，紫外线。光是以波动形式直线传播，具有波长和振幅两个因素。不同的波长产生不同的色相，不同的振幅大小产生明暗差别。

计算机，电视，手机这些设备的屏幕显示色彩都是需要发光的（即使液晶屏幕的液晶本身不发光，但是它仍然需要背光），这也是为什么在黑暗中能看清手机屏幕而看不见书本的封面的原因。而光的三原色就是红绿蓝，当三种颜色全部叠加在一起的时候就是白色，而三种颜色都没有的时候就是黑色。当三种，或者两种，甚至只有一种颜色以不同量的形式混合的话就会形成任意多的颜色。

色谱

这是个RGB色谱，12点钟，8点钟，4点钟的方向分别是三原色红绿蓝。而在两个三原色之间的是三间色，是临近的两个原色分别混合而成的，分别是黄色，青色和玫红色。

色相

色相是指色彩的外相，是在不同波长的光波照射下人眼所能看到的颜色，比如红色，黄色，蓝色。

明度

明度指颜色的亮度，不同的颜色具有不同的明度，例如黄色就比蓝色的明度高，在一个画面中如何安排不同明度的色块也可以帮助表达画作的感情，如果天空比地面明度低，就会产生压抑的感觉。

饱和度

饱和度是指色彩的鲜艳程度，也称色彩的纯度。饱和度取决于该色中含色成分和消色成分(灰色)的比例。含色成分越大，饱和度越大；消色成分越大，饱和度越小。

色相，明度，饱和度的关系

上面解释过三个特性的含义，至于三者的关系就用一副图来表示。

16进制颜色

在网页中，使用最多的色彩表示方式就是以16进制来表示，在色彩数值前加上一个#，然后跟着6位16进制的数值，每两位数值为一组，分别表示RGB值。比如#330000，就是RGB值为51，0，0的红色。

216色网页安全色

上个世纪90年代，Windows系统，Mac系统，Linux系统对颜色管理都存在差异，同样一个颜色在不同的系统中显示起来有细微的不同。后来发现有216个颜色在不同的系统中显示起来是一致的。这216色网页安全色将每个原色以00，33，66，99，cc，ff级别从低到高等额分割6次，这样3种颜色混合在一起就形式了6的3次方，也就是216色。

以上所有的理论都是我个人总结，如果有什么不对的地方，欢迎指出。

左边的就是属于Serif字体的Georgia字体，这是Windows系统中自带的。右边的是属于Sans Serif字体的Arial字体，也是Windows系统中自带的字体，Arial字体在网页中使用很广泛。可以看到Serif字体在笔画末端会有衬线，而Sans Serif字体则没有。Serif字体常出现在印刷当中，而网页中使用Sans Serif比较广泛。

原因在于电脑屏幕是基于像素的，当使用Serif字体的时候如果想要达到与Sans Serif字体的可读性的话就需要增加字体大小。因为Serif字体具有衬线，所以当小于12px或者更小的情况下就会显得字幕挤成一团，辨认起来较为困难。当然还有一种平滑显示的技术，称作抗锯齿，原理就是在字母的边界增加灰色的像素，这样看起来更为平滑一些。下面这张图对比了一段文字使用了Serif字体与Sans Serif的对比以及平滑显示和没有平滑显示的文字外观。

可以看到显示效果最好的就是平滑处理后的Sans Serif字体，而未平滑处理的Serif字体是最难阅读的。当然这个情况只限于字体比较小的正文部分，所以我推荐在正文部分使用Sans Serif字体增加可阅读性，使读者阅读起来更轻松。

不过Serif字体还是有其他用途的，比如说标题。标题一般都会使用大于20px大小的字体，这样就算是Serif字体也不会难于阅读，相反Serif字体能够给人一种沉稳的厚重感。

这里使用的是Serif字体，如果要使用Sans Serif字体的话恐怕效果就会大打折扣。只有这使用大号字体的情况下才适合使用Serif字体。

因此我建议在正文部分不要使用Serif字体，这会使文字变得非常难于辨认，除非你有足够的信心能够做出出色的显示效果，否则Sans Serif字体是最佳选择。至于标题部分，没有什么限制，但是要记住不要为了可以使用某种字体而使用，页面的整体美观性是最重要的。

首先，需要创建HTML列表，代码如下：

Links

Link One
Link Two
Link Three
Link Four

接着在HTML页面的<head>和</head>标签之间添加下面的JavaScript代码，原理是通过切换元素的css的display属性来控制显示或隐藏。

function collapse(zap){
	if(document.getElementById){
		var abra=document.getElementById(zap).style;
		if(abra.display=="block"){
			abra.display="none";
		}else{
			abra.display="block";
		}
		return false;
	}else{
		return true;
	}
}

最后把给标题添加a元素，添加onclick事件，当点击鼠标的时候就是触发事件，调用定义好的函数：

Links

这样就完成了简单的可折叠菜单，可以自己添加相应的CSS样式。

以这张图为例，我在Photoshop中分别使用传统方法和智能对象旋转一圈，每次旋转10度，录制为动作之后重复播放，所以旋转一圈需要36次。

下面来看看传统方法将一个普通图层分为了10度为阶梯，总共旋转一圈360度之后的效果。

那么，如果转换为智能对象再进行10度为阶梯，总共旋转一圈360度是什么效果：

这样就能看出来普通的图层进行旋转和智能对象的区别了：普通图层进行36次每次10度的旋转之后画质变得相当的差，但是智能对象却几乎没有任何损失（其实完全没有损失）。这是为什么？

原因在于智能对象记录了原始信息，每次所作的更改都是建立在原始信息之上。第一次更改建立在原始信息上，第二次更改还是建立在原始信息上，第三次也一样在原始信息上。而普通图层就不一样，第一次更改建立在原始信息上，第二次更改是建立在第一次的信息上，第三次更改建立在第二次的信息上，也就是说普通图层的更改建立在上一次的信息上。在这里因为刚好旋转一圈，和原始状态一样，所以智能对象没有画质损失，但是如果只旋转一次10度的话，智能对象还是会有损失的，因为要重新采样。

可以自己试验一下，同样的东西在旋转45度之后按下Ctrl+T可以看到，在普通图层上度数为0，而在智能对象上度数是45。

为什么仅仅旋转就能产生如此大的变化？原因在于，计算机内部处理图像是基于像素的，而像素以x（横轴）和y（数轴）排列，最终形成二维的面。理论上只有当图像进行以90度为单位的旋转才不会出现画质的变化。例如像我采取的以10度为单位进行一次旋转，普通同层每旋转一次就要进行重新采样，一两次看不出画质的劣化，但是次数越来越大画质劣化的越明显，最终就成这个鸟样了。而智能对象始终是基于原始信息的，当进行36次每次10度的旋转之后其实就等于没有旋转。

如何创建智能对象？很简单，智能对象也是个图层。选择需要转换成智能对象的图层，然后在鼠标右键菜单中选择转换为智能对象（Convert to Smart Object）就创建好一个智能对象了。

智能对象能干什么？在需要多次对图像进行变形（包括旋转，缩放，透视等）的时候使用智能对象是再合适不过的。智能对象能保存原始信息，所以当进行了无数次的变形之后都不用担心画质会有降低，因为是以原始信息作为修改而不是上一次。可以说智能对象就是为了大量变形而准备的。

智能对象不能干什么？智能对象不能使用图像菜单中的自动色调，自动颜色，自动对比度，也不能使用图像-〉调整菜单中的几乎所有功能，除了阴影/高光和变化。也就是说几乎无法调整智能对象的色彩，比如曲线，色阶，色彩平衡。智能对象可以使用大部分滤镜，除了抽出和液化。

怎样把智能对象转换为普通图层？这很简单，只要选择智能对象图层，然后在鼠标右键菜单中选择栅格化图层（Rasterize Layer）

以上就是我对智能对象的介绍和理解。如果有什么疑问或者不同的观点欢迎交流。

调整图层和用图像菜单中的调整子菜单里面的各个功能的区别在于，调整图层会新建一个图层，所以不会对原始像素进行修改，而且既然是图层，那么就可以通过图层面板中的小眼睛把它隐藏，还能够添加图层蒙版控制调整图层的影响范围。而用菜单命令的话就会改变图像中的像素信息，而且没有办法还原，除非使用撤销或者历史纪录。

另外一点区别在于调整图层对下方的所有图层都起效果，而菜单命令只对当前选中的图层其效果，无法将效果应用到多个图层上，除非将多个图层合并之后再进行调整。

在Photoshop图像->调整菜单中的项目基本上在调整菜单中都能找到。创建一个新的调整图层只要在图层面板下方选择中间的那个按钮，然后选择需要的调整功能，比如，亮度/对比度，色阶，曲线。

在草的下方新建一个曲线的调整图层，这样调整的效果会对除了草意外的地方产生影响。同时会出现调整面板，在这里可以调整曲线信息。我要讲述的是调整图层，所以忽略曲线的调整方法。

调整完成之后直接关闭调整面板就可以了，这样对于下方的所有图层都应用了同一种效果。

这张图的左边是原始效果，右边是添加调整图层之后的效果。因为调整图层在草的下方，所以没有修改草的曲线信息。试想一下，再这样的一个PSD文件中一共有几十个图层，如果要调整整个画面的色调的话使用调整图层是最方便的，如果使用菜单命令对每个图层调整的话将会是个费时费力的工程，除非先合并在调整，但是这样就影响到了图层的结构。

但是调整图层也有一个不好的地方就是，它对于下方的所有图层都会产生影响。如果确实有一个图层不想受到影响的话那就只有添加蒙版了。

为什么要设置不同的样式表？网页中一般会包含很多除了内容之外的其他内容，没有必要把这些也打印出来，可以为打印机设备另外一个样式表，这样去掉网页中的导航条，边栏之类的部分，节约油墨和打印空间。同样对于盲人可以添加另外一个适合语音朗读程序的样式表，对于手持设备可以针对小屏幕设置另外一个内容更为紧凑的CSS样式表。

有两种方法给网页添加不同应用类型的CSS样式表，一种是把样式表分为不同应用类型的单个文CSS文件，或者把所有内容写在一个CSS文件里。

例如，现在有3个样式表，screen.css用于屏幕显示，print.css用于打印，handheld.css用于手持设备。在HTML源代码的head部分添加下面几行：

<link rel=”stylesheet” type=”text/css” href=”screen.css” media=”screen”</>
<link rel=”stylesheet” type=”text/css” href=”print.css” media=”print”</>
<link rel=”stylesheet” type=”text/css” href=”handheld.css” media=”handheld”</>

media属性用于设置不同用途的CSS，media=”print”属性用于打印，screen是屏幕显示，handhel就是手持设备。

另外还可以用@media在同一个样式表中指定不同的类型：

<style type=”text/css”>
<!--
@media screen{
    body{font:12pt verdana, arial, sans-serif}
}
@media print{
    body{font:10pt times, georgia, serif}
}
@media screen, print, projection{
    body{line-height:120%}
}
-->
</style>

创建一个打印样式时，可以把这些样式加到print.css文件中，这样它们只有在打印时才会被调用。这就确保了打印页面不会浪费空间，打印图片不会浪费油墨。

我顺便整理了media属性的不同值的名字和用途。

投影能够创造一种立体的感觉。在一幅图片或者网页的设计中，所有元素组合成一个整体，所有元素的投影都必须满足一体性。初学者通常在各个堆叠的元素上会放置同样的大小和距离的投影。以下面这幅图片为例。

在这幅图中，各个元素是堆叠在一起的效果，按照投影产生的层次感来看，由下到上依次是右下，左下和上部。想象一下现实生活中的情况就会发现这个投影有些不合适。右下的投影距离是20像素，而左下在右下的投影距离是20像素，那么距离叠加起来之后，左下距离背景应该有40像素，而这里还是20像素，这明显就是不合逻辑的。很多时候一附图看起来就是有那么一些不对劲，但是又说不上来在什么地方，这些问题往往都是最基本的一些原则性错误。

这附图的投影就是正确的。右下的投影是10像素，左下在右下的投影是5像素，那么很自然的左下投影在背景上的距离应该是15像素，接着上部的投影也应该符合这个逻辑。而且距离不同投影的大小也不同。这样一幅图片就看起来非常习惯了。

绘制投影大小要注意一个整体的层次感，这样才能设计出美观而且又合理的图片。其实投影并没有这么简单，这里只是讲解了投影的大小和距离而已。