createHtml参考：http://linder0209.iteye.com/blog/1071818
* 创建html
* @param o
* {tag:string, // 元素的标记名，如果没有，默认为div
children|cn:string|Array|json, // 子结点对应的json数组或字节点的html或单个json
html:string, // 对应的html，如果有cn或children属性就忽略
style:function|string|json, // 元素的样式，可以是函数，字符串，json对象
cls:string, // 元素的class属性的值
htmlFor:string // 元素的For属性，
x:y // x表示其他名字，y表示非函数、非空内容
}
var spec = {
id: 'my-ul',
tag: 'ul',
cls: 'my-list',
style : {width:'20px',height:'30px'},
// append children after creating
children: [ // may also specify 'cn' instead of 'children'
{tag: 'li', id: 'item0', html: 'List Item 0'},
{tag: 'li', id: 'item1', html: 'List Item 1'},
{tag: 'li', id: 'item2', html: 'List Item 2'}
]
};
*/
function createHtml(o){
var b = '',
cn,
attr,
val,
key;
if(typeof o == 'string'){ // 若是 string 类型，直接返回
b = o;
} else if(Ice.isArray(o)){ // 若是 array 类型, 如: [{ tag: 'li', id: 'item0' }]
for(var i=0,len=o.length; i<len; i++){
if(o[i]){
b += createHtml(o[i]);
}
}
} else { // 若是 object 类型
b += '<' + (o.tag = o.tag || 'div'); // 若没有 o.tag 属性，则默认为 div, 如: <div
for (attr in o) {
val = o[attr];
if(!confRe.test(attr)){ // 忽略 tag|children|cn|html，这四个是需自定义属性
if(typeof val == 'object'){ // 若是对象类型, 如: style : {width:'20px',height:'30px'}
b += ' ' + attr + '="'; // 如: style = "
for (key in val) {
b += key + ':' + val[key] + ';'; // 如: width=20px;height:30px
}
b += '"';
} else { // 若不是对象类型， 如: id: 'my-ul'
b += ' ' + ({cls: 'class', htmlFor: 'for'}[attr] || attr) + '="' + val + '"'; // class,for对象处理
}
}
}
if(emptyTags.test(o.tag)){ // 根据xhtml规定，忽略单标签，如： <hr />, <br />等
b += '/>';
} else {
b += '>'; // 如: <div sytle="width=20px;height:30px">
if(cn = o.children){
b += createHtml(cn); // 如: <li id="item0">List Item 0</li><li id="item1">List Item 1</li>
}
b += '</' + o.tag + '>'; // 如: </div>
}
}
return b; // 如: <ol style="width:20px;height:80px;"><li id="item0"></li></ol>
}
/**
* 向DOM中插入一个HTML片段
* @param where 插入的html与el的位置关系--- beforeBegin, afterBegin, beforeEnd, afterEnd.
* @param el 内容元素
* @param html HTML片段
*/
insertHtml: function(where, el, html){
// innerHTML是只读的：col、 colgroup、frameset、html、 head、style、table、tbody、 tfoot、 thead、title 与 tr
// http://www.cnblogs.com/rubylouvre/archive/2009/12/14/1622631.html
var hash = {},
hashVal,
rs,
range,
setStart,
frag,
rangeEl;
where = where.toLowerCase();
hash[beforebegin] = ['beforeBegin', 'previousSibling'];
hash[afterend] = ['afterEnd', 'nextSibling'];
// 为了使后面的代码更易实现，这地方成两部分实现，
// 1. 在当前节点的外边插入，就是if外边
// 2. 在当前节点的里边插入，在if里边做判断
if(el.insertAdjacentHTML){ // ie
// 对ie的table进行单独处理
if(tableRe.test(el.tagName) && (rs = insertIntoTable(el.tagName.toLowerCase(), where, el, html))){
return rs;
}
hash[afterbegin] = ['AfterBegin', 'firstChild'];
hash[beforeend] = ['BeforeEnd', 'lastChild'];
if((hashVal = hash[where])){
el.insertAdjacentHTML(hashVal[0], html);
return el[hashVal[1]];
}
} else { // 旧版 firefox, firefox 11 支持 insertAdjacentHTML
range = el.ownerDocument.createRange();
setStart = 'setStart' + (endRe.test(where) ? 'After' : 'Before');
if(hash[where]){
// setStartAfter() 把该范围的开始点设置为紧邻指定节点的节点之后
// setStartBefore() 把该范围的开始点设置为紧邻指定节点之前
range[setStart](el);
// http://msdn.microsoft.com/zh-cn/library/hh673538(v=vs.85).aspx#createContextualFragment
frag = range.createContextualFragment(html); // http://www.cnblogs.com/rubylouvre/archive/2011/04/15/2016800.html
el.parentNode.insertBefore(frag, (beforebegin == where ? el : el.nextSibling));
return el[(beforebegin == where ? 'previous' : 'next') + 'Sibling'];
} else {
rangeEl = (afterbegin == where ? 'first' : 'last') + 'Child';
if(el.firstChild){
range[setStart](el[rangeEl]);
frag = range.createContextualFragment(html);
if(afterbegin == where){
el.insertBefore(frag, el.firstChild);
} else {
el.appendChild(frag);
}
} else {
el.innerHTML = html;
}
return el[rangeEl];
}
}
throw '非法插入点 -> "' + where + '"';
}
泼水字教程
-
按着习惯先看一下结果图：
在本教程中，我给大家介绍在Photoshop中如何制作泼水文字效果。知识点：笔刷的运用。
-
准备工作：
下载以下素材，水花笔刷是需要付费的，其它倒没什么。另外一点：笔刷在ps载入过多，会影响ps启动速度。谨慎使用。
-
在ps中创建一个新的文件，大小为：940px * 700px ,背景为黑色。并保存，命名为：泼水文字。将湖面的素材打开，并使用套索工具，羽化值为：40px。绘制如图所示的区域，不一定完全相似，太不能偏差太大。
-
使用移动工具，将选区内的区域拖拽到刚才新建的泼水文字文件中。并且将其重命名为水波，透明度降低至60%左右。并用大的软橡皮擦工具擦除边缘，使其边缘与背景完全溶入。效果如下图所示：
-
复制水波图层两次，分别移动到原水层左侧或右侧。并设置透明度比原来略低，创建境深的感觉。主要还是考察构图能力或透视原则。
-
重复复制一次水图层，然后恢复透明度为：100%，并调整位置。
好吧！这地方我不得不承认国外设计人水平的精湛，反正我经过多次的调整，反复的不断尝试才达到他图中所示的效果。一般的教程省略了这些细节，而恰恰这些细节这是初学者所迷惑的地方。我感觉这是国外教程不可取的地方。
话又说回来，这地方还是考察你构图能力和对ps软件基本工具的熟练程度。因为将来上面就是所要创建的水波文字，下面的形状堆叠为一个心形才为润合。
-
在画布上输入任何你喜欢的字：
斜面浮雕
渐变叠加
描边
效果如图：
-
载入文字选区，并新建一层，填充黑色，滤镜 -> 杂色 -> 添加杂色，参数如图所示：
-
将杂色图层模式修改为滤色，透明度为35%左右
-
创建新层，并命名为：光影，用黑白交替的笔刷，填充以下形状：
这又是一步省略细节的步骤，这步要不断的调整笔刷的透明度，还间接考验了对光影的把握。光影没有技巧，就是注意平常对生活中物的光影的观赏。总结，高光，反光，背光等。
-
新建“水花”，导入相关水花笔刷，在其周围添加。
-
运用笔刷添加小溪水的感觉，
-
运用白色的画笔慢慢添加水雾和高光的感觉
-
为使效果更为显著，利用6px左右的小画笔在文本左右添加小的细节：
-
给其它地方添加一些小光点，使某一区域显得更为亮一点。
-
可以利用自由变换命令不断的变换光线的形状，以达到最好的效果。
-
添加色彩平衡调整图层，
-
最终效果如图所示：
在当前文件的所有图层最上层，创建两个调整图层(图层面板第四个按钮半黑半白)，
曲线：
色阶：
火焰字教程
-
按着习惯先看一下结果图：
-
火焰字历来是ps社区中的经典教程之一，我这是它的另外一个版本，主要是利用真实火焰结合ps滤镜技术。准备好了，就让我们开始吧！
ctrl + 双击，新建 600 * 400大小的文件，填充黑色背景，使用文字工具(t)输入数字1, 字体下载，并 ctrl + s 保存当前文字，命为“火焰字”。
-
在图层面板数字1图层名称后双击，弹出混合样式对话框，找到外发光选项，按以下参数设置：
-
并设置颜色叠加：
-
光泽设置：
-
内发光设置：
混合模式为：实色混合，大小：9
-
点击滤镜 -> 液化命令，选择向前变形工具，参考如下设置后，使用放大镜可放大局部，不断的对形状进行拖拽处理，使其造型更像火焰袅绕多变，在期间可不断的调整画笔大小、画笔压力以得到最佳的效果。
-
下载火焰素材，单击图层面板组中的通道面板，选择绿色通道，并按住ctrl单击绿色通道，得到画面中高光选区，然后点击RGB通道，
-
在移动工具的前提下，移动当前选区中的内容到刚才“1”文档处。
-
用大小为15px左右的橡皮擦工具，擦除多余的部分，留下围绕1挥舞的火焰形状。
-
不断的重复上一步骤，降低图层透明度到:30%，并设置混合模式为叠加。
-
重复上一步骤，使整体都有火焰围绕的感觉。
-
根据自己的兴趣，可以创建更多的字母火焰。
-
也可以放置到其它背景中：
在当前文字图层上单击右键并选择“栅格化”。为防止误操作，也可ctrl + j 创建当前图层副本，然后关闭眼睛隐藏，做为备份。
然后在当前文字图层下新建空白图层，合并文字与空白图层，使样式完整应用于图层。
再使用直径大小为200 左右的橡皮擦工具，擦除有尖角的部分，以便癣有空间覆盖火焰。这样效果如下图所示：
这是另外一位新加坡的同学，根据教程所做：
本人根据教程所做：
PSD 分层文件下载：
以下是根据教程所做：
ps 版本 cs2 以上。
原文链接：http://pshero.com/photoshop-tutorials/graphic-design/vista-error-icon
图标教程
-
按着习惯先看一下结果图：
-
先让我们看看几个vista系统的图标。下面左侧的这个图标就是我们今天要说的。通过简单的颜色，图标样式的改变，你就可以很容易做出其它图标，很多人已经做出来一些。
-
让我们开始吧，先创建一个新文件：ctrl + 双击: 预设 -> web -> 600 X 400
然后通过图层面板右下角的新建图层按钮新建一图层，双击图层名称，输入border
如果你当前的工具不是椭圆( Elliptical )选区工具的话，请键盘上的M键，并且使用shift + M，转换到椭圆选区工具上来
-
按住shift键不放，从画布的偏左上角处开始点击并拖拽，直到占满整个画布的2/3时松左键。或离顶，右，下，左空白区域相等时松键。
然后按键盘 D 键，重设前景背影为默认的黑白色，并使用alt + backspace(alt + del)填充前景色给街区。
-
保证在不取消选区的前提下，点击菜单命令：选择 -> 修改 -> 收缩 -> 15, 回车，delete(backspace)。
-
通过图层面板创建新层，双击图层名称，输入middle，并填充另外一个你喜欢的颜色。
然后ctrl + d ，取消当前选区, 并ctrl + s 保存文件，命名为 icon。
-
现在我们添加一些图层样式，在border图层名称后双击，弹出混合图层样式面板。通过以下参数的设定，使我们的图标有良好的光感效果。
inerr Glow: 内发光, 混合模式为：正常，不透明度为：100%
Gradient Overlay: 渐变叠加,角度为：35
Stoke: 描边
-
如果这几步操作对你来说比较不易操作的话，请直接到文章最后下载.PSD文件，以便你更容易的跟上我的思路。
我们一般通过编辑图层样式来更方便的创建效果。
-
然后，在middle图层名称后双击，像前面步骤一样，创建样式。
Bevel and Emboss: 斜面和浮雕,深度：200,大小：3，
渐变叠加，角度：135
-
这样图标已经有一个大概的模样。
-
接下来让我们来添加x。可以使用字体也可以利用ps画出来。由于vista中的x号是两边平行且有圆角，所以我采用一种叫 Army的字体,300pt大小。可以从这儿这儿下载。
-
很明显方向不对，需要旋转一下。ctrl+T转换到自由变换工具，按住shift键(使他保持等比且15度角旋转)且让鼠标在变形区域进行旋转，双击变形区域内或回车，以全确定此步操作。然后调整位置使其水平垂直方向相对于icon背景居中。
-
通过ctrl+J再复制一个x图层，分别命名为：x-top或x-bottom。
单击x-top的眼睛小图标，使他暂时隐藏。
-
对x-bottom进行3D边缘及阴影的制作，利用外发光添加1px的白边，使其看起来略大于x-top，请参考以下两步进行设定。
-
点击x-top，左边的眼睛位置，使其可见。
像前面一样，添加一个渐变图层，使其看起来有金属质感。
-
为使其看起来更有立体的感觉，利用移动工具选中x-botom图层，然后上移或右移使其有下图的效果。
-
在这个教程将要结束之前，还要在icon上添加web2.0的一些样式，使其更为完美。由于vista的icon渐变不是规则的，所以还要进行以下的操作：
在x-top图层上建一新层命为：Highlight，并且保证选中它。然后按住ctrl键单击middle层，获取middle的选区，
-
按 D 键，复位ps前景背景色设置，然后 ctrl + backspace ，填充 Highlight 为白色，然后调整填充为10%，使其看起来更为自然。
-
在保证选区工具的前提下，移动当前的选区到icon偏右下位置 backspace，留下的部分做为一个高光显示。
-
单击这儿下载相关文件。
-
做到这儿或许你感觉图标有点不太圆，或许看着不顺眼，好吧，那儿可能出了问题。
由于ps是像素图软件，所以选区创建的圆不是一个完美的圆，所以在第三步不能用椭圆工具来创建圆，而是用形状工具中的椭圆工具。
以下是我的PSD文件下载。
zencoding自从2009年因html,css的扩展而风靡业界，而webstorm自从2.0之后就已经集成。
无意中被不断输入的console.log,console.dir搞的很恼火，所以才有了今天的js之webstorm。由于其它编辑器对zencoding的外延不是做的很好，现下流行的编辑器里边，只有webstorm才可以扩展以下提到的命令。当然，他除了扩展js之后，还可以扩展：xml,php(phpstorm)，xsl,用户也可以自定义添加：JSP,SQL,Haml或者其它的。只是提供一个思路，抛砖引玉，具体的还要看每个人自己的code习惯。webstorm比eclipse,aptana中的更改zencoding方便之处，不用重启。而比其它ide的好处在于，他可以更改。
1. File -> Settings -> Live Templates (即可手动添加， 也可以下载我添加好的文件，下载后放在：C:\Users\用户名\.WebIde10\config\templates)
这里提几个比较重要简单的扩展原则。
w: window
d: document
db: document.body
di: document.getElementById($END$);
dn: document.getElementsByName($END$);
dw: document.write($END$);
df: document.createDocumentFragment()
dc: document.createElement();
// this
i: this
t that
t.:that.me = me;
i.:this.me = me;
ts:toString()
// 2. console 相关方法
cl: console.log($END$);
cd: console.dir($END$);
cti:console.time('1');
cte:console.timeEnd('1');
// 3. 流程控制
if:
if($END$){
}
ife:
if($END$){
} else {
}
for:
for(var i=0,len=arr.length; i<len; i++{
$END$
}
while:
while($END$){
}
fi:
for (var $VAR$ in $ARRAY$) {
$END$
}
4. 函数创建：
f: function $END$(){ // 函数表达式
}
vf var $end$ = function(){ // 匿名函数
}
fc:
function $INDEX$(){ // 构造函数
}
$INDEX$.prototype = {
name: function (){
}
}
mf: // 字面量式方法创建
$END$: function(){
}
vo:
var $END$ = {
name: function(){
}
}
vf:
var $END$ = function(){
}
bb:
(function(){
$END$
})();
// 4. jQ 相关方法：
// 原本想定为$为jq所有方法的始字母，但后来考虑不方便输入直接定为j，只保留一个 $: $();基本选择符：
// a. 选择器：
$: $()
#: $('#$END$')
j: $('$END$')
>: $('.$END$') (因为.做为方法调用符，所以为shift + .即为键盘上的 >)
ji:$(this)
// b. event
jc: $().click(function(){
})
jh: $().hover(function(){
});
jb:$().bind('click', function(){
});
jl: $().live('click', function(){});
jd: $().delegate('click', function(){ });
// c.插件模板：
fn:
(function($){
$.fn.$END$ = function(options){
var defaults = {
};
opts = $.extend({}, defaults, options);
return this.each(function(){
});
}
})(jQuery);
2. 上面文件，左边即为输入部分，右边为扩展后，如果手动添加，还需要在下方 :