推荐阅读
Photoshop制作大气的3D荧光灯艺术字设计教程
这次做的是一个暗色背景，用的是一个数字“2”来模拟荧光灯开灯的效果(原型是韩国的一个游戏网站)，笔者简单做了一个排版和气氛烘托，效果图如下：未开灯时开灯后动图 1. 新建画布900 x 600px，分辨率72，用渐变工具拉一个渐变作为背景：
Photoshop制作后期人像甜美逆光效果教程
本系列是后期高手他山之眼独家授权优设首刊的后期风格全方位科普教程，囊括了十几种常见的后期风格，而且每一种都有系统全面的综合教学，可以帮你从头开始完整地掌握后期修图。同学们别看是免费的就马克不看，这样高质量的教程放到哪个培训班都可以直接收钱，给大神点赞吧。在线修图神器泼辣熊：Polaxiong.com日系风格的照片多以静物、人物为主题，注重捕捉细节，擅长营造氛围，前期多以大光圈拍摄，加上合理光线的运用以及留白的处理，以及偏蓝、偏青色彩的运用，能够给人一种干净、祥和而又充满生活趣味的感觉。运用日系风格比较纯熟的摄影师有川内伦子、小林纪晴、岩田俊介、嶋本麻利沙、滨田英明等，有兴趣的可以自行去翻阅一些他们的作品。日系风格大致有如下分类：一：逆光类这类照片的共同点是巧妙利用侧逆光、正逆光等拍摄手法，整体颜色偏淡，有留白处理。例如滨田英明的作品：二：胶片类
PS图层样式调制不锈钢金属链条
本教程介绍利用图层样式制作金属质感物体。制作的时候先画出自己喜好的图形，教程是铁链也可以是其它。然后设置图层样式即可。设置的时候需要根据图形的实际大小而定。 最终效果 一、新建一个画布，在上面画一个椭圆，并填充黑色，这个图层可以取名叫大金属环。 二、挖空这个椭圆，并在下面再制作一个细一点的椭圆（小金属环）！ 三、为金属环添加效果： 内阴影，混合模式正片叠底，其他设置如图：
Photoshop绘制晶莹剔透发光的水珠
先看一下最终效果： 使用工具：Photoshop CS4 注：文中所使用快捷方式，均在英文输入法状态下有效。 第一步：打开Photoshop CS4，执行【文件―新建】命令，新建一个400×400像素的文件，并命名为【水珠】，如下图所示。 第二步：将前景色设为#0580ac，背景色设为白色。在工具箱中选择【渐变工具】，从画面的坐下到右上拉一个从前景色到背景色的线性渐变，效果如下图所示。
最新发布
safari：webkit
支持CSS属性Safari和WebKit实施大子的CSS 2.1规格所界定的万维网联盟（ W3C ） ，以及部分的CSS 3规格。 。这个CSS属性本条划分的群体界定由W3C的CSS规格：1,webkit Box模型 CSS定义：-webkit-border-bottom-left-radius: radius; CSS定义：-webkit-border-top-left-radius: horizontal_radius vertical_radius; CSS定义：-webkit-border-radius:radius; CSS定义：-webkit-box-sizing: sizing_model; 边框常量值：border-box CSS定义：-webkit-box-sizing: sizing_model; 内容常量值：content-box CSS定义：-webkit-box-shadow: hoff voff blur color; CSS定义：-webkit-margin-bottom-collapse: collapse_behavior;常量值：collapse CSS定义：-webkit-margin-bottom-collapse: collapse_behavior;常量值：discard CSS定义：-webkit-margin-bottom-collapse: collapse_behavior;常量值：separate CSS定义：-webkit-margin-start: width; CSS定义：-webkit-padding-start: width; CSS定义:-webkit-border-image:url(borderimg.gif) 25 25 25 25 round round; CSS定义:-webkit-border-image:url(borderimg.gif) 25 25 25 25 stretch stretch;
IETester兼容win7
IETester兼容win7啦，http://www.my-debugbar.com/wiki/IETester/HomePageIETester is a free WebBrowser that allows you to have the rendering and javascript engines of IE8, IE7 IE 6 and IE5.5 on Windows 7, Vista and XP, as well as the installed IE in the same process.New in v0.5 : IETester now working on Windows 7 !This is an alpha release, so feel free to post comments/bugs on the IETester forum.Requirement : Windows 7, Windows Vista or Windows XP with IE7 (Windows XP/IE6 config has some problems and IE8 instance do not work under XP without IE7)Download IETester v0.3.5 (24MB)(IETester v0.3.5 zipped intaller for people unable to download .exe files due to proxy limitations)
优秀产品设计中的9点良好的用户体验设计
我们在研究网页的用户体验时，不因该仅仅局限与网页的范围，在很多优秀的产品和设计中都体现出许多好的用户体验设计，我们来看下以下的九点，他们都代表了一些出色用户体验方式，当然这些在网页设计中也是通用的。1.依赖第一印象：酒店了解这一点，因此，良好的酒店都会在酒店大堂提供微笑，在您的枕头准备巧克力和书面说明。2.发现和注重细节：apple公司通过对细节的努力考虑，并考虑的结果应用到他们产品的包装上，从而实现了差异化。结果就是他们的用户从ipod的包装拆起就开始拍照，记录哈。3.个性化和自定义的matter： 星巴克允许他们的顾客自主自定义coffee,任天堂和其他的一些游戏公司也允许用户自己创建游戏角色。Second life（第二人生–备注：一个游戏）公司拿走这一创意，并且把它作为一个新的标准满足用户需求并且主张用户的个性化。对于web开发者来说，有些事情也 是一样简单，比如在网站的欢迎词中使用用户的名字，会让用户有感觉更受欢迎，跟喜爱你的网站。4.(dripfeed your information)—这里可以理解为分类或者分级。我理解的意思就是信息不能一次大量的冲击波似的提供给用户那样用户会一下接受不了。最好就是有选择性和针对性的提供给用户，可以让用户自己操作细化选择自己需要的信息比如：Basecamp提供给用户根据video特征去任意选择video，雅虎网站也会用一些的lightbox（广告灯箱）形式去解析他们网页重新设计的一些特点。5.照顾世俗6.使他更充满乐趣：在一些文案或者操作的提示的时候，让用户感觉更亲切，更感兴趣的做法。比如Moo在他们发给客户的邮件中会这样说：hi，您好主人我是小MOO，我会按照您的指示管理。。。。
网页设计中的标点符号应用规范
网页中的标点符号经常会被很多人忽视，其实无论是英文还是中文网站，短句还是长句，标点符号的应用在一定程度上也影响着网站用户的体验。包括我们在设计页面时，不仅要注重网页的布局，颜色，设计等，另外对于文字的标点符号也要引起足够的重视，具体标点符号会起到什么作用在下文中我们一一解说：标点符号的作用标点符号大致来说有三种作用：表停顿；表语气；表词语的性质。1、表停顿，用来表明句子的结构。2、表语气。通常交谈的语气有三种：陈述预期，告诉别人一件事情；疑问预期，向别人提出一个问题；祈使预期，要别人做一件事情。这几种语气在交谈中用语调来表示，在书面上用标点符号表示。3、表词语的性质。某些词语加上某种标点，词语的性质就会发生变化。如“高兴”指的是一个形容词；而《高兴》就表示一部电影或书籍或文章的名字。中英文标点符号的差异1、汉语中某些英文中所没有的标点符号。a) 顿号（、），英文中分割居中的并列成分多用都好。b) 书名号（《》），英文中没有书名号，书名、报刊名用斜体或下划线表示。在英文中文章、诗歌、乐曲、电影、绘画等名称和一些专有名词也常用斜体表示。c) 间隔号（·），英文中需要间隔时多用逗号。
微软IE团队开始注重HTML 5规范
本周五微软表示，IE团队正在详细查看HTML 5规范现有草案，并汇总自己的意见。此举显示，微软开始认真对待这一新Web标准。HTML标准上一次正式更新发生在1999年。Google、苹果、Opera和Mozilla等公司一直在致力于创建新一代HTML标准，但微软的参与热情一直不高。不过，本周五IE开发经理艾德里安·巴特曼（Adrian Bateman ）表示，IE团队希望分享自己对HTML 5的看法，并参与制定该标准的讨论。巴特曼表示，尽管目前IE团队更多是提出问题，而非给出解决办法，但是公开讨论正是推动HTML 5发展的最佳方式。目前HTML 5规范草案中已经包含了许多重大改进功能，例如内置支持视频和音频，以及可以将数据存储于本地计算机的功能。在Google、苹果和Mozilla的最新版浏览器中，一直在宣传HTML 5功能，但是微软在这方面一直保持谨慎态度。
iframe自适应大小
页面域关系：主页面a.html所属域A：www.taobao.com被iframe的页面b.html所属域B：www.alimama.com,假设地址：http://www.alimama.com/b.html实现效果：A域名下的页面a.html中通过iframe嵌入B域名下的页面b.html,由于b.html的宽度和高度是不可预知而且会变化的,所以需要a.html中的iframe自适应大小.问题本质:js对跨域iframe访问问题,因为要控制a.html中iframe的高度和宽度就必须首先读取得到b.html的大小,A、B不属于同一个域,浏览器为了安全性考虑，使js跨域访问受限,读取不到b.html的高度和宽度.解决方案:引入代理代理页面c.html与a.html所属相同域A，c.html是A域下提供好的中间代理页面，假设c.html的地址：www.taobao.com/c.html,它负责读取location.hash里面的width和height的值,然后设置与它同域下的a.html中的iframe的宽度和高度.代码如下：
HTML网页制作教程:谨慎使用iframe标记
使用 iframe 可以轻易的调用其他网站的页面，但应谨慎使用。它比创建其他 DOM 元素（包括 style 和 script）多耗费数十甚至数百倍的性能。增加100个不同元素的时间对比显示 iframe 是多么耗费性能：使用 iframe 的页面通常没有这么多 iframe，所以创建 DOM 的时间不用多虑。更值得关心的是 onload 事件和连接池。iframe 阻塞 onloadwindow 的 onload 事件尽快执行非常重要。这会让浏览器的载入进度指示器完成，用户依据此判断页面是否已经加载完。而 onload 事件延迟，会让用户感觉页面变慢。window 的 onload 事件直到它所包含的所有 iframe，以及所有 iframe 中的资源完全加载完成后才会触发。在 Safari 和 Chrome 中，用 javascritpt 动态的给 iframe 的 src 赋值可以避免这种阻塞行为。一个连接池对每个 web 服务器来说，浏览器只打开极少的几个连接数。老的浏览器，包括 IE 6/7 和 Firefox 2，每个主机只有2个连接。在新的浏览器中，连接数增加鸟。Safari 3+ 和 Opera 9+ 增至4个，Chrome 1+ 、IE 8 及 Firefox 3 增至6个。人们可能期望每个 iframe 有单独的连接池，但并非如此。在大多数浏览器中，连接被主页面和它的 iframe 所共享，这意味着有可能 iframe 中的资源占用了可用连接而阻塞了主页面的资源加载。如果 iframe 中的内容同等重要，或比主页面更重要，这很好。然而在通常情况下 iframe 中的内容对页面来说不太重要，iframe 占用连接数是不可取的。一个解决方案是在优先级更高的资源下载完成后再动态的给 iframe 的 src 赋值。美国的10大网站中有5个使用了 iframe。它们多数用来加载广告。这不是很合适，但可以理解，这是一个简便的在内容中插入广告的途径。在很多情况下，使用 iframe 是合理的。但要意识到这对你的页面的性能影响。非必要时，请谨慎使用。
HTML减肥:精简HTML标记制作网页
改善网站速度的一个很明显的方法是减小 HTML 文件的大小。有一些方法，比如：硬压缩（rigid compression），acupuncture-like ID 及改变 class 名。下面是一些我们总结的使 HTML 标记更精简的方法。HTML 4HTML （非XHTML），MIME type 为 text/html ，允许省略一些标签。通过 HTML 4 DTD，你可以省略以下标签（那些所谓可避免的元素，这里用删除线加以标记）</area> </base> <body> </body> </br> </col> </colgroup> </dd> </dt> <head> </head> </hr> <html> </html> </img> </input> </li> </link> </meta> </option> </p> </param> <tbody> </tbody> </td> </tfoot> </th> </thead> </tr> 比如，你的代码是<li>List item</li> 可以写为<li>List item 又比如段落要以</p> 结尾，你可以只写<p>My paragraph 甚至可以去掉 html，head，body（把这作为你的编码规范之前请确保这会令你舒服）。省略标签后 HTML 依然有效，同时减小了文件大小。对一般的页面来说，可以节省 5-20%。HTML 5
HTML 5解析规则
HTML 5推荐标准的成功之一是提供了一个详细的规范来说明如何解析HTML文档。一直以来，浏览器提供商都试图猜测和拷贝其它浏览器的实现，寄希望于他们的解析器在处理HTML文档的时候不产生过多的问题。尽管HTML 5中的一些部分目前争议比较大，关于解析的这部分得到了浏览器厂商的一致认同。一旦浏览器开始实现它，用户就可以从所带来的兼容性提升中获益。HTML 5解析规则的最初实现之一是为了支持HTML 5验证器而开发的。（如果你想测试这个验证器的话，http://ejohn.org应该是合法的HTML 5。）这个实现是用Java开发的，提供了SAX和DOM的接口，并且是开源的。有趣的是Henri Sivonen（验证器的作者）最近为Gecko开发了一个全新的HTML 5解析引擎，会在下一个版本的Firefox中使用。这个实现实际上是通过把Henri的HTML 5解析器的Java实现自动转换为C++来完成的。这个转换是自动完成的，所有的改动都会提交到Mozilla的代码库中。一般来说，当提到这种大规模的程序式的把Java代码库转换到C++的做法时，我会跳出来。不过结果非常的出人意料：页面加载的性能提升了3%。这些是建立在该代码库会提供的一连串的bug修正和一致性检查的基础上。你可以在Mozilla的bug库中查看该补丁的进度。如果你想尝试新的解析器的话（你不太可能发现很多明显的变化，但是任何寻找bug的努力都是值得感谢的。），下载一个Firefox的每日构建版本，打开about:config，把html5.enable设成true就可以了。如果想升级到HTML 5，那么现在就是时候。因为HTML 5是HTML 4和XHTML 1提供的功能的超集，所以升级是非常容易的。只需要把目前的(X)HTML文档类型声明换成HTML 5文档类型就可以了。
IE 下的只读 innerHTML
今天做东西遇到一个问题，我试图动态为一个表格添加多行数据，先定义了一个table：1 2 3 4 5 6 <table> <thead> </thead> <tbody id="filelist"> </tbody> </table> 然后在JavaScript 中这样操作：1 2 3 4 5 for(var i in entries){ ... var filetable = document.getElementById('filelist'); filetable.innerHTML += '<tr><td>111</td><td>222</td></tr>'; } 在FireFox 下这么干是没有问题的，但是放到 IE 下面就死活不行了，问了下同事+搜索了一下，发现在 IE 下 COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR 这些元素的 innerHTML 属性都是只读的，不能直接操作。但是也不是没有解决办法，TD 的innerHTML 还是可以操作的，上面的代码可以这样修改：1 2 3 4 5 6 7 8 9 10 11 12 for(var i in entries){ ... var filetable = document.getElementById('filelist'); var tr = document.createElement('tr'); var td1 = document.createElement('td'); td1.innerHTML = '111'; var td2 = document.createElement('td'); td2.innerHTML = '222'; tr.appendChild(td1); tr.appendChild(td2); filetable.appendChild(tr); } 可以先使用 DOM 的 createElement 方法创建 tr 和 td，然后对 td 的 innerHTML 进行相应操作，最后用 appendChild 方法把创建的元素添加到 DOM 树中。这样在 IE 下就可以正常运行了。需要注意的是，如果你的 table 没有 tbody，而是这样：1 <table id="filelist"></table> 这个时候就不能对 table 直接使用 appendChild 方法了，因为IE6 下 table 元素是不支持 appendChild 方法的(IE8 貌似已经支持了)。网上也有人提出用 insertRow() 等方法来做，不过这个方法对不同浏览器的兼容也是有问题的（在FireFox 下就需要使用 insertRow(-1) ），所以就没用。BTW，虽然之前也有意识地看了不少 JS 的资料，但还是实践出真知啊，现在刚开始手忙脚乱的，学习淡定ING