author: Loveyuki
via: Loveyuki’s BLOG
IE 6 只有在图片完全下载完成后才会自动调整大小
这里使用了 expression，但是利用了一次加载，所以 expression 不会造成内存泄漏
.Image {
max-width:600px;height:auto;cursor:pointer;
border:1px dashed #4E6973;padding: 3px;
zoom:expression( function(elm) {
if (elm.width>560) {
var oldVW = [...]

这篇文章包括了 8 个非常有用的浏览器兼容解决办法
在进行 CSS 设计遇到代码在几个浏览器之间不能正常显示时你就会用到它们…

这里要介绍的是一个在photoshop中给黑白照片上色的简单方法，步骤如下…

CSS圆角框的出现已经不是一天两天了，它出现的直接目的就是为了替换原有的以四个角上安放图片为主的圆角框，它的优势在于不需要用图片，对于统一 主题中出现不同颜色样式的需求，不需要用作图工具重复制作多套圆角图片，而可以直接从css抽取颜色信息，方便做成独立的配色方案，其次，它对于圆角框长 宽等位置信息的设置具有比图片圆角更为高明的自适应能力，真正可以把程序员的注意力集中到内容的排布而不是陷入对页面布局应对的泥藻中（这也可以作为一个 简单的分离关注点的有效例子）。[…]

Photoshop：它是由Adobe公司开发的图形处理系列软件之一，主要应用于在图像处理、广告设计的一个电脑软件。最先它只是在Apple机（MAC）上使用，后来也开发出了for window的版本。下面是这个软件里一些基本的概念。  
位图：又称光栅图，一般用于照片品质的图像处理，是由许多像小方块一样的"像素"组成的图形。由其位置与颜色值表示，能表现出颜色阴影的变化。在Photoshop主要用于处理位图。
矢量图：通常无法提供生成照片的图像物性，一般用于工程持术绘图。如灯光的质量效果很难在一幅矢量图表现出来。
分辩率：每单位长度上的像素叫做图像的分辩率，简单讲即是电脑的图像给读者自己观看的清晰与模糊，分辩率有很多种。如屏幕分辩率，扫描仪的分辩率，打印分辩率。
图像尺寸与图像大小及分辩率的关系：如图像尺寸大，分辩率大，文件较大，所占内存大，电脑处理速度会慢，相反，任意一个因素减少，处理速度都会加快。
通道：在PS中，通道是指色彩的范围，一般情况下，一种基本色为一个通道。如RGB颜色，R为红色，所以R通道的范围为红色，G为绿色，B为蓝色。
图层：在PS中，一般都是多是用到多个图层制作每一层好象是一张透明纸，叠放在一起就是一个完整的图像。对每一图层进行修改处理，对其它的图层不含造成任何的影响。
图像的色彩模式：
1）RGB彩色模式：又叫加色模式，是屏幕显示的最佳颜色，由红、绿、蓝三种颜色组成，每一种颜色可以有0-255的亮度变化。
2）CMYK彩色模式：由品蓝，品红，品黄和黄色组成，又叫减色模式。一般打印输出及印刷都是这种模式，所以打印图片一般都采用CMYK模式。
3）HSB彩色模式：是将色彩分解为色调，饱和度及亮度通过调整色调，饱和度及亮度得到颜色和变化。
4）Lab彩色模式：这种模式通过一个光强和两个色调来描述一个色调叫a，另一个色调叫b。它主要影响着色调的明暗。一般RGB转换成CMYK都先经Lab的转换。
5）索引颜色：这种颜色下图像像素用一个字节表示它最多包含有256色的色表储存并索引其所用的颜色，它图像质量不高，占空间较少。
6）灰度模式：即只用黑色和白色显示图像，像素0值为黑色，像素255为白色。
7）位图模式：像素不是由字节表示，而是由二进制表示，即黑色和白色由二进制表示，从而占磁盘空间最小。
怎样正确显示中文字体名？
按CTRL+K，然后把Show Fonts Name In English去掉就可以了。
输入写字的时候显示半个情况该如何处理？
这是字库的原因。建议使用特粗XX时，用“方正字库”或“微软”。文鼎字库在字体的间距设置不好时，就是半个。……汉仪的“turetype”字体也会出问题。
使用路径(Path)工具时的几个技巧？
使用笔形(Pen)工具制作路径时按住Shift键可以强制路径或方向线成水平、垂直或45度角，按住Ctrl键可暂时切换到路径选取工具，按住 Alt键将笔形光标在在黑色节点上单击可以改变方向线的方向，使曲线能够转折；按Alt键用路径选取(DirectSelection)工具单击路径会选 取整个路径；要同时选取多个路径可以按住Shift后逐个单击；使用路径选工具时按住“Ctrl+Alt”键移近路径会切换到加节点与减节点笔形工具。
若要切换路径(path)是否显示，可以按住Shift键后在路径调色板的路径栏上单击鼠标， 或者在路径调色版灰色区域单击即可。
若要一起执行数个宏(Action)，可以先增加一个宏，然后录制每一个所要执行的宏。
若要在一个宏(Action)中的某一命令后新增一条命令，可以先选中该命令，然后单击调色板上的开始录制(Begin recording)图标，选择要增加的命令，再单击停止录制(Stop recording)图标即可。
在使用Filter/Render/Clouds滤镜时，若要产生更多明显的支纹图案，可先按住Alt键后再执行该命令；若要生成低漫射支彩效果，可先按住Shift键后再执行命令。
在使用Filter/Render/Lighting Effects滤镜时，若要在对话框内复制光源时，可先按住Alt键后再拖动光源即可实现复制。
若要在Color调色板上直接切换色彩模式，可先按住Shift键后，再将光标移到色彩条上单击即可。
如何制作透明背景的图片？
首先，只有GIF才可以使用透明，所以在保存文件的时候不要选择保存或另存为，而是直接选“输出GIF”然后，选择透明色，如果你需要透明的部分都是白色就选白色，依次类推做图片时把背景图片隐藏调然后再Save for Web 就可以透明了。
在GIF图上写上中文，字迹为何不连续？
先把GIF转成RGB，写完字再转回Index Color，选择Image>Mode>Rgb/Image>Mode>Index Color。
怎样用PS做一个实体的倒影和背影？比如一个瓶子怎么制造出它的倒影和背影？
把瓶子复制一层放下面，把这层黑了，然后Blur，然后把这层Trasnform>Distort，对好比例后，调整透明度。
或者直接把瓶子层给Shadow或者Outerglow，然后把Effect层独立出来，接着也是扭曲变形了。
如果你是说瓶子正面要看到背面反射的周围物体的画面，可以用Render-3DTransform，这样的方法不如用3D建模更*真，PS里有滤镜 Lens Pro ，可以直接做玻璃球之类的表面倒映。倒影是水里的？复制瓶子层，翻转过来，把透明度降低，放在水层上，如果觉得太清楚，就选择Filter> Distort>Ripple，加点波纹，如果觉得太生硬，就在Layer [...]

如果仓促而为，设计一个专题或者网站一定会成为恶梦。Web设计需要遵循一些准则并有计划地去做。
规则 #1 : 先出设计图
这是必须的。不要假设设计图在你的头脑中就开始设计web，必须要放到纸上。可以这样做：
1， 拿尺子、笔和纸，按照具体的尺寸一行一行地画下来；
2， 记得考虑分界线的长度等，这样才能符合CSS的像素；
3， 记下设计的每一个细节免得忘记，如果把所有细节都累积到最后将是巨大的麻烦。
规则 #2 :配色
这是设计的核心部分，只有颜色搭配合适才能使你的网页看起来不错。首先要决定的是主色，也即你在网页中多数使用的颜色；然后选择跟主色调搭配的第二颜色；不要选择超过三种颜色不然你的设计看起来会很乱。如果你想要更多的颜色，可以使用浅色或者深色的阴影来搭配主色调。
1， 浏览十个跟你网页有同样主色调的网页；
2， 给几个人看你的配色方案并取得反馈；
3， 从浏览的网页和反馈你将更好地完善你的颜色搭配。
规则 #3 : 从基本的版块开始构建
定下配色和设计图之后，从最基本的框架开始构建——我的意思是说不添加任何文本。因为在版面中加入文本会使得架构混乱。方法如下：
1， 每一个版块设定边界线，这样能够看到具体的尺寸和位置；
2， 对不同的版块使用不同的颜色，在完成版块后再改成你想要的颜色。
规则 #4 : 理清CSS
不要在你的HTML文件中将styling元素搞得太复杂，不然等到你修改的时候你就不得不到处搜索。所以将所有styling元素归置在一个单独的CSS文档中。
在styling之前理清你的CSS免得太过杂乱导致你多次重复同一件事。CSS支持继承，也即parent block的style可以用于child block.，充分利用这条特性。命名CSS分类名也要易懂易记。比如使用“main_content”而不是“div_1”。
规则 #5 : 制订多重 CSS 文档
我们都知道，使用浏览器可以轻易地看到网页的输出，但使用另一浏览器的时候则可能发现输出不正常。这不是什么稀奇事儿，因为每个浏览器对HTML和CSS的处理方式都不一样。
为避免这种情况，每个浏览器准备一个CSS文档，这样所有浏览器都可以正常浏览。虽然这有一定的难度，但是记着指望一个CSS文档来满足所有浏览器是不可能的。
原文作者：nitinpai
原文链接：5 Rules For A Good Web Design
译者：小猪哥

原作者: vandelay 译者: 小猪哥 原文链接

 
当你在创建一个新的网站的时候，一个版面独特的网页总会在不经意间激发你的灵感。不知道这些使用背景图片产生强烈视觉冲击的页面有没有给你带来设计灵感。

2，Digitalmash.com

3，Melissahie.com

4，Evanescenceuk.co.uk

5，Sitotis.hr

6，Mussatto.com.br

7，Basil Gloo

8，Danviv.net

9，CraigEarl.co.uk

10，JeremyCowart.com

11，Huge

12，Interview Magazine

13，The Horizontal Way

14，Swiths.com

15，Davor van Eijk

16，Ribbit.com

17，BootB

18，Vesess

19，Dinulovic.com

20，StoryAbout.net

如果你只在乎自己的网站在IE中的表现，请略过此文。
网 页设计中，保证网页在不同的浏览器中的兼容性始终是个头疼的问题。往往不得不再机器上装多个 浏览器，但是浏览器种类太多了，IE6，IE7，Firefox1，firefox2，Opera，Safari，Konqueror。更要命的是这些浏 览器再不同的操作系统上结果也有可能不一样。很难相信谁会在自己的机器上同时安装mac os，windows，linux，仅仅为了检测网页的兼容性。
说了这么多都是要推荐这个优秀的在线检测工具，它可以同时为你检测几十种浏览器，并生成直观图片让你分析。

【1】页面之间无法传递变量 get,post,session
在最新的php版本中自动全局变量是关闭的，所以要从上一页面取得提交过来得变量要使用$_GET[''foo''],$_POST[''foo''],$_SESSION[''foo'']来得到 
当然也可以修改自动全局变量为开(php.ini改为register_globals = On)；考虑到兼容性，还是强迫自己熟悉新的写法比较好。   ================================
PHP中的超全局变量 
从PHP 4.2.0 开始，register_globals 的默认值为 off，这样一来，以前的很多可以直接使用的变量，如 $PHP_SELF 或者你设定的SESSION变量都不能用 “$变量名”的形式访问了，这可能会给你带来很多不变，但却有助于安全性的提高。访问这些变量，你需要使用PHP 超全局变量，如下：  
$_SERVER   变量由 Web 服务器设定或者直接与当前脚本的执行环境相关联。类似于旧数组 $HTTP_SERVER_VARS 数组。以前的$PHP_SELF对应$_SERVER[''PHP_SELF'']，你可以使用phpinfo来查看你的$_SERVER变量。  
$_GET   经由 HTTP GET 方法提交至脚本的变量。类似于旧数组 $HTTP_GET_VARS 数组。  
$_POST   经由 HTTP POST 方法提交至脚本的变量。类似于旧数组 $HTTP_POST_VARS 数组。  
$_COOKIE   经由 HTTP Cookies 方法提交至脚本的变量。类似于旧数组 $HTTP_COOKIE_VARS 数组。  
$_SESSION   [...]

有朋友问我FF下，页面如何能让内容自动撑高。
试了一下，在css代码上加上“height:100%; overflow:auto;”就行了
其实这两种定义方法一种是针对IE的，一种是针对FF的，两种都写上最然比较罗嗦，但也算是一种方法

下面是一些常用的IE与FF兼容问题的解决方法，有需要的可以存档备用[...]