<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>能人所能</title>
	<atom:link href="http://nenge.pybbs.org/feed" rel="self" type="application/rss+xml" />
	<link>http://nenge.pybbs.org</link>
	<description>心存邪恶必遭天谴!</description>
	<lastBuildDate>Fri, 12 Jun 2009 03:58:24 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>百度为什么要把你的站K掉</title>
		<link>http://nenge.pybbs.org/20090612-53.html</link>
		<comments>http://nenge.pybbs.org/20090612-53.html#comments</comments>
		<pubDate>Fri, 12 Jun 2009 03:58:24 +0000</pubDate>
		<dc:creator>能哥</dc:creator>
				<category><![CDATA[个人心得]]></category>

		<guid isPermaLink="false">http://nenge.pybbs.org/20090612-53.html</guid>
		<description><![CDATA[　　在中国，让百度K掉的网站不计其数，或许这个数目百度可以知道。
　　让百度干了的网站最大的特点就是你永远没有机会了，解封的机会是很小的。
　　所以我很郁闷，我的网站让干掉了，我还有机会吗，或许永远没了。
　　百度官方解释了为什么要干你的站，一般是因为你网站上不对头的地方，然后K你。
　　其实百度解释的只是解释，那里的话只是说了一方面。
　　其实还有些地方也会让百度把你的站干掉的。
　　比如：
　　1、你的网站改版频繁，优化厉害，特别是网站刚上线的时候，改动太多的东西都不行。
　　2、你没有交保护费，这不用我多说。
　　但愿这个全球最大的中文搜索引擎可以对中国人自己好一点。
　　中国的互联网不能没有百度，百度也绝对不可能没有中国的互联网。
]]></description>
		<wfw:commentRss>http://nenge.pybbs.org/20090612-53.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Design Process of the Phoenix</title>
		<link>http://nenge.pybbs.org/20090611-46.html</link>
		<comments>http://nenge.pybbs.org/20090611-46.html#comments</comments>
		<pubDate>Thu, 11 Jun 2009 11:00:34 +0000</pubDate>
		<dc:creator>能哥</dc:creator>
				<category><![CDATA[素材资源]]></category>
		<category><![CDATA[Phoenix]]></category>

		<guid isPermaLink="false">http://nenge.pybbs.org/?p=46</guid>
		<description><![CDATA[用了10-15小时就可以画到这样的效果，真厉害啊！有空学习一下！

1. Sketching
The images below show how I sketched out the phoenix in abstract form. I started off by drawing the phoenix’s body, flowing towards the wings, feathers, and then filling in the details.

Inspired by Nature
A lot of my design patterns are inspired by natural elements such as:

DNA Helix
blowing dandelions
and the patch patterns on the butterfly [...]]]></description>
		<wfw:commentRss>http://nenge.pybbs.org/20090611-46.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Two New Illustrations</title>
		<link>http://nenge.pybbs.org/20090611-43.html</link>
		<comments>http://nenge.pybbs.org/20090611-43.html#comments</comments>
		<pubDate>Thu, 11 Jun 2009 10:45:57 +0000</pubDate>
		<dc:creator>能哥</dc:creator>
				<category><![CDATA[素材资源]]></category>

		<guid isPermaLink="false">http://nenge.pybbs.org/?p=43</guid>
		<description><![CDATA[ It has been a while since last time I drew any illustration (traditional and digital). Finally, I have two new pieces that I would like to share. These two illustrations were presented in the design conference (Future of Web Design 2008) in New York (check out the presentation slides to see the design process). The first piece is called Abstract Peacock and the second one is Abstract Phoenix. You can download a high resolution jpg of the new illustrations for your desktop wallpaper.]]></description>
		<wfw:commentRss>http://nenge.pybbs.org/20090611-43.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>300+Jquery, CSS, MooTools 和 JS的导航菜单资源</title>
		<link>http://nenge.pybbs.org/20090523-39.html</link>
		<comments>http://nenge.pybbs.org/20090523-39.html#comments</comments>
		<pubDate>Sat, 23 May 2009 06:45:58 +0000</pubDate>
		<dc:creator>能哥</dc:creator>
				<category><![CDATA[网站编程]]></category>
		<category><![CDATA[Jquery CSS JS]]></category>

		<guid isPermaLink="false">http://nenge.pybbs.org/?p=39</guid>
		<description><![CDATA[　如果你是网站前端开发人员，那么对你来说，也许做一个漂亮导航菜单会很得心应手。但今天暴风彬彬要为大家总结各种导航菜单的资源，以便让大家的网站前端开发的工作更方便更快速，只要选择现成的例子就可以应用于自己的网站了。暴风彬彬收集的这些资源，从非常简单的HTML和CSS导航菜单，到非常复杂和高级的JQuery、JavaScript和MooTools技术，这都可以让你轻松实现褪色、滑动、拖动等效果。如果您觉得这些资源值得一用，那就快把本网页收藏以备日后查阅吧！
 

1.Fancy menu - 非常酷的导航菜单:


2. 专为Mac爱好者开发的CSS dock菜单，使用jQuery框架。

下载 dock 菜单

3.37个不同的CSS导航菜单技术：


4.这个导航五年前就有了，但现在看来依然很棒！


5.漂亮的JQuery滑动效果菜单，有四种不同的例子。


6.更新jquery嵌套标签设置,有演示;


7.垂直JavaScript菜单,含子菜单效果。 查看演示


8.13个精选纵向及横向CSS菜单


9.各种不同的CSS菜单教程

10.很全的收集CSS纵向菜单的网站：dynamicdrive.com

11.CSSplay.com，一个非常全面的收集各种CSS菜单的网站，而且经常有更新，推荐！


12.有显示/隐藏效果的菜单 - 有 CSS 和 MooTools两种;


13.Superfish v1.4.8 – jQuery 菜单插件

14.方便的图片标签翻转菜单;


15.模仿Digg.com风格的CSS纵向菜单


16.JavaScript可折叠菜单，查看演示


17.独特的使用jQuery和MooTools的导航菜单;   查看演示


18.CSSmenumaker.com - 提供专业的CSS菜单;


19. 非常酷的 JavaScript 菜单 ，摘自 JavaScriptkit.com;

20. 使用CSS创建的多级下拉菜单并用JQuery进行了改善。查看演示


21. jdMenu 多层次菜单插件 ， jQuery框架 - 纵向多级下拉菜单列表

22. 难以置信的Apple风格导航菜单:


23.折叠风格JQuery菜单


24. 非常酷的使用CSS和 jQuery制作的动画导航菜单:


25. jQuery树插件


26. 35种独特的JQuery菜单演示

27.Jquery 快速导航 - 点击 toogle 菜单, 以弹出导航菜单:


28. jQuery id标签 - 8种不同的很酷的JQuery菜单例子


29. jQuery ContextMenu；轻量级JQuery插件，可以自定义右键弹出的菜单


30. jQuery UI tabs - 可以自定义不同效果的标签菜单，比如：幻灯片效果、淡出效果等…查看演示

31. iconDock jQuery - 有一个模仿 MAC OS X dock效果的菜单;


32.SlidingMenu - 很简单的滑动菜单效果


33. 标签导航
11个使用了滑动门技术的菜单，并且兼容IE浏览器

下载这些菜单

34.另一种CSS标签导航菜单


35.9种不同的CSS块级菜单

直接下载这些菜单

36.12种以上不同的CSS菜单


37. ADxMenu-4种非常酷的导航菜单

下载

38.在CSSmenubuilde你可以自己选择喜欢的菜单风格，这个网站有一个庞大的菜单列表供你选择


40. 很多不同的菜单风格



41.CSS菜单，纵向、横向都有


42.非常棒的导航菜单，其中有一种是非常有人气的折叠菜单；

下载这个折叠菜单
]]></description>
		<wfw:commentRss>http://nenge.pybbs.org/20090523-39.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CSS Sprites + 圆角</title>
		<link>http://nenge.pybbs.org/20090521-32.html</link>
		<comments>http://nenge.pybbs.org/20090521-32.html#comments</comments>
		<pubDate>Wed, 20 May 2009 18:19:45 +0000</pubDate>
		<dc:creator>能哥</dc:creator>
				<category><![CDATA[网站编程]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[网页布局]]></category>

		<guid isPermaLink="false">http://nenge.pybbs.org/?p=32</guid>
		<description><![CDATA[初步介绍
当然，我知道现在有成千上万个关于 用CSS处理圆角 的教程，但不管怎么说，我仍然想把这篇文章展示给您。也希望您会发现这篇文章会非常有用。需要重点指出的是，这篇教程彻底地应用高级CSS技术，但是，我会尽力使初学者看起来简单。CSS3 在这里还没有得到完全的应用，所以，知道现在，我会保持W3C验证的有效。
看一下演示
下载 css sprites + 圆角
您还可以参考一下文章：
43个PSD转XHTML, CSS创建布局及导航辅导教程,解析事件背后的每一个步骤
我们将怎样来处理?
我处理圆角的版本是由内置的绝对定位的四个div组成，每个div都有唯一的圆角图片作CSS Sprite操作。我们将会这样做:
 是什么方式导致这项技术表现得这么了不起呢(What makes this technique cool)?
通过可变的宽度和高度处理毗邻的元素的能力。没有极限。(The ability to make rounded-bordered elements with fluid width and height. No limits whatsoever.) 这项技术，正如我之前提到的，是与 CSS Sprites 结合操作完成的。如果您不知道这是项怎样的技术或者说不知道怎么使用它，那么请先阅读我 之前的文章。CSS sprites 都学会了吗? 那我们就开始吧!
第一步: 创建我们的 Sprite
1、为矩形圆角图片处理选择一款编辑器 (在这个案例中我选择的是Firework).

2、切割并且导出圆角到本地临时位置 (我们将会在之后用到).

3、新创建一个文件，将圆角导入到这个新文件中，复制三次，然后旋转这三个新切片得到另外的三个圆角。

4、合成四个圆角为一张图片, 并用 1px 的红线 来区分它们.

5、导出合成图片，sprite 也就大功告成了。
第二步: HTML 代码
首先，我们会给容器 div 一个 .roundedBox
类 :



以下为引用的内容：
&#60;div class=&#8221;roundedBox&#8221;&#62;&#60;/div&#62;



现在，我们必须再增加四个 div ，这会在将来创建圆角的时候用到。之后必须给每个加载一个类 .corner，同时也标识一个类来指定它们格子的位置。



以下为引用的内容：
&#60;div class=&#8221;roundedBox&#8221;&#62;
&#60;strong&#62;My [...]]]></description>
		<wfw:commentRss>http://nenge.pybbs.org/20090521-32.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>一行代码轻松实现拖动效果</title>
		<link>http://nenge.pybbs.org/20090521-29.html</link>
		<comments>http://nenge.pybbs.org/20090521-29.html#comments</comments>
		<pubDate>Wed, 20 May 2009 18:06:16 +0000</pubDate>
		<dc:creator>能哥</dc:creator>
				<category><![CDATA[网站编程]]></category>
		<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://nenge.pybbs.org/?p=29</guid>
		<description><![CDATA[写JS实现拖动需要一大堆不便维护的代码，实属麻烦，Google了大半天，发现了一个优秀的Jquery插件EasyDrag，只需要一行代码便可轻松在主流浏览器上
实现拖动效果.



以下为引用的内容：
  $(document).ready( function()
       {
        $(&#8220;#divPanel&#8220;).easydrag();
       }
     );



Html 代码



以下为引用的内容：
  &#60;div id=&#8220;divPanel&#8220; style=&#8220;width:300px;height:300px;background:white;border:1px solid #000000;position:absolute;left:5px;top:50px&#8220; &#62;
        &#60;div id=&#8220;divTitle&#8220; style=&#8220;width:100%;height:25px;background:lavender&#8220;&#62;
            &#38;nbsp;Title
        &#60;/div&#62;
        &#60;div style=&#8220;width:100%&#8220;&#62;
            
        &#60;/div&#62;
    &#60;/div&#62;



EasyDrag还可以指定可拖动的区域，比如只能通过标题拖动整个div，我们JS可以这样写



以下为引用的内容：
    $(document).ready ( function()
            {
                $(&#8220;#divPanel&#8220;).easydrag();
            
                $(&#8220;#divPanel&#8220;).setHandler(&#8220;divTitle&#8220;);
            }
        );



一个setHandler搞定,不错开源是个好东西，Jquery更是好东西，插件扩展机制不是一般的好。
下载：http://fromvega.com/wordpress/2007/07/14/easydrag-jquery-plugin/
]]></description>
		<wfw:commentRss>http://nenge.pybbs.org/20090521-29.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>弹性+固宽布局[窄屏With宽屏]</title>
		<link>http://nenge.pybbs.org/20090521-26.html</link>
		<comments>http://nenge.pybbs.org/20090521-26.html#comments</comments>
		<pubDate>Wed, 20 May 2009 17:57:38 +0000</pubDate>
		<dc:creator>能哥</dc:creator>
				<category><![CDATA[网站编程]]></category>
		<category><![CDATA[网页布局]]></category>

		<guid isPermaLink="false">http://nenge.pybbs.org/?p=26</guid>
		<description><![CDATA[在当今用户的显示器越来越大的今天，之前的1024*768固宽布局有点越来越不合时宜，对大屏幕的用户而言，两侧空空的留白给人第一眼的印象是严重的屏幕浪费，作为网页设计师的你有责任给这一批用户一个良好的用户界面。
当然为了减少这种屏幕的浪费，采用弹性流体布局是最好的解决方案，它可以充分利用屏幕空间，无论你是多大分辩率的用户，都能尽情满屏展示内容。然而因为种种限制，目前的网页完全采用流体弹性布局条件还不具备（特别是浏览器厂商对标准的肆意蹂躏以及CSS标准的不完全支持等等）。作为夹在用户和厂商的中间者，我们只能以一种兼容的心态去适应两者的差距。所以，作为一种过渡的解决方案，有了这样一种布局：弹性+固宽布局。
这里所说有弹性，指的是背景去自适应屏幕宽度，而固宽呢，则是让正文内容无论在宽屏还是窄屏中都能自动居中。夹缝中求生存，以满足不同大小分辩率用户的需要。如下图所示的设计就是一个典型的样例。

图一
废话少说，言归正传，我们就来制作一个这样的布局结构：
首先构建结构层：



以下为引用的内容：
&#60;div id=&#8221;wrapper&#8221;&#62;
    &#60;div id=&#8221;main&#8221; class=&#8221;clearfix&#8221;&#62;
        &#60;div id=&#8221;header&#8221;&#62;
            &#60;div id=&#8221;inheader&#8221;&#62;&#60;/div&#62;
        &#60;/div&#62;
        &#60;div id=&#8221;content&#8221;&#62;&#60;/div&#62;
    &#60;/div&#62;
&#60;/div&#62;
&#60;div id=&#8221;footer&#8221;&#62;
    &#60;div id=&#8221;infoot&#8221;&#62;&#60;/div&#62;
&#60;/div&#62;



分析一下结构层，一个网页一般包括页头，内容区和页脚三大部分，我们将页头和内容放在一个容器层，取名为wrapper，而将页脚独立出来，取名为footer，为什么要这样设计，我们想让这个页脚在内容区不满一屏的情况下也是绝对居底的。其具体的实现原理可以参考这篇文章：《CSS Sticky Footer: 完美的CSS绝对底部》。
我们将wrapper和footer这两个容器设置100%的宽度，让它自动适应屏幕的宽度。并且也将header页头区域也设置成100%宽度。这样我们可以在页头和页脚中插入一张可以水平平铺的图片，使页头和页脚的背景在大屏幕下能水平充满整个屏幕空间。
作为正文内容，我们一般的做法是，当分辩率变大，让它居中显示，两侧留出空白。因为页头区域已经设置为100%宽度，所以我们在header中再添加一个容器层inheader，它来作为真正的页头文字内容的载体，我们再给它设置一个固定的宽度值，比如是960像素宽，然后让它自动居中。



以下为引用的内容：
#inheader{width:960px;height:110px; margin:0 auto; }



这样页头的正文浮动haeader的上层，这两个层可以设置不同的背景图片，形成一个叠加的页头效果，它能自动适应更大的屏幕分辩率。
同样的道理，页脚也可以采用这种方法来实现。
在上面的结构层，我在中间内容区没有采用这种方法，而是做了一点变通，我们可以看到在content这个内容区中，没有内嵌一个容器，而只有一个容器。如果我们为了让正文内容的两侧在大分辩率下两侧不显得太空洞，该怎么办呢，当然你可以采用页头和页脚的做法，在它的内容再加一个div。当然为了减少嵌套，我们可以采用变通的办法。我们可以将一张超大的图片加在body中背景中，并用background-position来定位居中显示这张图片，这样在内容区两侧的图片就显示出来了。
本博客就是一个具体案例，在大分辩率下看看本博客两侧图片，然后缩小窗口，就可以看到两侧图片在1024*768时只显示了一小块，而正文内容始终居中显示的。
为了演示效果，我们加入一些其它颜色调置，最后的样式如下所示：



以下为引用的内容：
*{margin:0;padding:0;}
html, body, #wrapper {height: 100%;font-size:12px;}
#wrapper{width:100%;background:#777;}
body &#62; #wrapper {height:auto; min-height:100%;}
#main {padding-bottom: 54px;min-width:960px;}/* 必须使用和footer相同的高度,最小宽度ie6中加JS解决 */
#header{text-align:center;color:#fff;background:#333;}
#inheader{width:960px;height:110px;line-height:110px;margin:0 auto;background:#CC9933;}
h3{font-size:14px;line-height:50px;}
#inheader p{font-size:12px;line-height:30px;}
#footer {
    position: relative;
    margin-top: -54px; /* footer高度的负值 */
    height: 54px;/* footer高度*/   
    width:100%;
    min-width:960px;/*最小宽度ie6中加JS解决*/
    clear:both;
    background:#666;
    text-align:center;
    color:#fff;
}
#infoot{height:54px;line-height:54px;width:960px;margin:0 auto;background:#CC9966;}
#footer p{line-height:26px;}
#content{background:#999;width:960px;margin:0 [...]]]></description>
		<wfw:commentRss>http://nenge.pybbs.org/20090521-26.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>10个CSS简写技巧让你永远受用</title>
		<link>http://nenge.pybbs.org/20090521-23.html</link>
		<comments>http://nenge.pybbs.org/20090521-23.html#comments</comments>
		<pubDate>Wed, 20 May 2009 17:42:50 +0000</pubDate>
		<dc:creator>能哥</dc:creator>
				<category><![CDATA[网站编程]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[代码优化]]></category>

		<guid isPermaLink="false">http://nenge.pybbs.org/?p=23</guid>
		<description><![CDATA[CSS简写就是指将多行的CSS属性声明化成一行，又称为CSS代码优化。CSS简写的最大好处就是能够显著减少CSS文件的大小，其实还有很多其他益处。臃肿而杂乱的CSS样式表会使你遇到问题是难以调试。尤其是当一个团队在进行设计的时候，你的臃肿的CSS代码会使你的团队其他成员的工作效率下降。
今天，暴风彬彬整理了一些CSS简写技巧，它们其实是CSS最常用的写法，但是太多的人使用Dreamweaver这种所见即所得软件来编写CSS，使得代码过于臃肿。不过没关系，看过本文之后，你一能能掌握CSS代码优化的技巧，今后让你的每一个CSS样式表都看起来整洁而简短吧。
属性值为0
书写原则是如果CSS属性值为0，那么你不必为其添加单位(如:px/em)，你可能会这样写:
padding: 10px 5px 0px 0px;
试试这样吧:
padding: 10px 5px 0 0;
移除选择器
选择器是你在为一些元素应用CSS样式时的基本方法，比如h1, h2, h2, div, strong, pre, ul, ol等等…如果你使用了class(.类名)或ID(#id名),那么就不用再在声明CSS时包含选择器了。
div#logowrap
尝试扔掉多余的选择器吧:
#logowrap
在这个例子中所谓的那个选择器就是div
*总爱和你开玩笑
要明智的使用*而避免它在整个CSS样式表中乱开玩笑，*是个通配符，你可以使用它来为你的设计部分或全部进行一系列CSS声明。例如:
* {
margin: 0;
}
这个声明会将所有元素的margin值设置为0，同样的，为了严谨起见，你可以尝试这样设置:
#menu * {
margin: 0;
}
这样的声明是指将#menu下的所有元素的margin设为0。
背景
背景(background)属性可能会包含设置背景色、背景图、背景图的位置和背景图重复方式的参数，你可能会写成:
background-image: url(”logo.png”);
background-position: top center;
background-repeat: no-repeat;
其实可以写成:
background: url(logo.png) no-repeat top center;
颜色
颜色(color)属性在CSS通常指定为一个十六进制的值,一个#加6位数，他的简写方式是如果颜色值由成对儿出现的三对而数字组成，你可以省略掉没对中的一个数字。
#000000 可以写成 #000, #336699 可以写成 #369
这种简写技巧只适用于成对出现的颜色值，其它颜色值不适用这种技巧，比如:
#010101, #223345, #FFF000
Margin(外边距/空白边)
声明CSS magin值得时候通常会写成这样:
margin-top:0px;
margin-right:10px;
margin-bottom:0px;
margin-left:10px;
让我们试试把值为0的单位去掉，并把4条声明合并成一条声明:
margin:0 10px 0 10px;
当你生命padding、margin、border(还有一些其他属性)时，记得要把按照顺时针的方向来声明属性值，也就是按照上-右-下-左的方向。关于这些属性还有另一个更加简单的写法，看看属性中上和下、左和右是否值是相等的，如果是那么就可以进一步优化了，你可以省略掉后两个值，剩下的两个值前者指上下，后者指左右:
margin:0 10px;
它是指左右的值为10px，上下的值为0;
Padding(内边距)
padding的简写技巧等同于margin:
padding-top:0px;
padding-right:10px;
padding-bottom:0px;
padding-left:10px;
可以写成:
padding: 0 10px;
Borders(边框)
边框的简写方式相比其它生命来说会比较复杂，很多CSSer一开始都容易记混它的简写顺序，如果你想声明一个1像素宽的实线黑色边框，可能会写成:
border-width:1px;
border-style:solid;
border-color:#000;
其实可以写成:
border:1px solid #000;
注意:这里的颜色值已经使用了上面讲过的颜色简写方法了哦。
我们还可以为四个边设置不同的宽度:
border-top-width:1px;
border-right-width:2px;
border-bottom-width:3px;
border-left-width:4px;
可以简写成:
border-width:1px 2px 3px 4px;
最后，我们还可以只设置右和下边框的样式:
border-right:1px solid #000;
border-bottom:1px solid #000;
虽然并没减少多少代码,但暴风彬彬建议写成这样:
border:1px solid #000;
border-width:0 1px [...]]]></description>
		<wfw:commentRss>http://nenge.pybbs.org/20090521-23.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Web UI 设计(网页设计)命名规范</title>
		<link>http://nenge.pybbs.org/20090521-12.html</link>
		<comments>http://nenge.pybbs.org/20090521-12.html#comments</comments>
		<pubDate>Wed, 20 May 2009 17:23:24 +0000</pubDate>
		<dc:creator>能哥</dc:creator>
				<category><![CDATA[网站编程]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[网页设计]]></category>

		<guid isPermaLink="false">http://nenge.pybbs.org/?p=12</guid>
		<description><![CDATA[
最近工作实在是繁忙，所以好久没有更新自己的博客了，实在是对不起各位读者。今天好不容易闲下来半天，所以和大家分享一下我之前总结的一套Web UI 设计命名规范，也就是网站用户界面设计(俗称网页设计)命名规范。
这套规范并非单纯的CSS、html或JavaScript命名规范，它涉及了很多使用PhotoShop这类设计工具进行网页设计过程中的命名规范。(好久没写文章了，有点罗嗦，吼吼~)。首先我是出于公司几位美工的设计效果图源文件没有对图层命名而开始考虑总结一套的，还有一个原因就是网上大多命名规范都是关于编码的，也就是那些css、html、js和一些服务器端语言的，至于设计方面的命名规范实在是很少。但是毕竟设计师也是技术团队的成员，而且前端开发工程师是要使用设计师的效果图源文件的，所以统一命名规范和设计规范对于团队的协作和工作效率肯定是有好处的。
这套WebUI设计命名规范总结自我的一些Web设计经验和国外设计师的命名方式推荐。
Web UI 设计命名规范
一.网站设计及基本框架结构:

1. Container
“container“ 就是将页面中的所有元素包在一起的部分，这部分还可以命名为: “wrapper“, “wrap“, “page“.
2. Header
“header” 是网站页面的头部区域，一般来讲，它包含网站的logo和一些其他元素。这部分还可以命名为:“page-header” (或 pageHeader).
3. Navbar
“navbar“等同于横向的导航栏，是最典型的网页元素。这部分还可以命名为:“nav”, “navigation”, “nav-wrapper”.
4. Menu
“Menu”区域包含一般的链接和菜单，这部分还可以命名为: “subNav “, “links“，“sidebar-main”.
5. Main
“Main”是网站的主要区域，如果是博客的话它将包含的日志。这部分还可以命名为: “content“, “main-content” (或“mainContent”)。
6. Sidebar
“Sidebar” 部分可以包含网站的次要内容，比如最近更新内容列表、关于网站的介绍或广告元素等…这部分还可以命名为: “subNav “, “side-panel“, “secondary-content“.
7. Footer
“Footer”包含网站的一些附加信息，这部分还可以命名为: “copyright“.
二.需要注意的几点:
1.尽量考虑为元素命名其本身的作用或”用意”，达到语义化。不要使用表面形式的命名.
如:red/left/big等。
2.组合命名规则:
[元素类型]-[元素作用/内容]
如:搜索按钮: btn-search
登录表单:form-login
新闻列表:list-news
3.涉及到交互行为的元素命名:
凡涉及交互行为的元素通常会有正常、悬停、点击和已浏览等不同样式，命名可参考以下规则:
鼠标悬停:：hover 点击：click 已浏览：visited
如:搜索按钮: btn-search、btn-search-hover、btn-search-visited
三.Photoshop图层结构规范:
Photoshop图层命名遵循树形结构，凡某元素组成的图层大于3层，即可形成组，所有图层尽量避免使用默认命名(图层+编号)。
第一级图层结构如下图:

第二级结构图例(医院网站):

第三级结构图例及效果图对比(医院新闻栏目)：

效果图
 
图层命名结构
四.常用命名汇总:
页头:header
登录条:loginbar
标志:logo
侧栏:sidebar
广告条:banner
导航:nav
子导航:subNav
菜单:menu
子菜单:subMenu
下拉菜单:dropMenu
工具条: toolbar
表单:form
栏目:column
箭头:arrow
搜索:search
搜索按钮:btn-search
滚动条:scroll
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
链接:links
页脚:footer
服务:service
热点:hot
新闻:news
下载:download
注册:regsiter
状态:status
按钮:btn
投票:vote
合作伙伴:partner
版权:copyright
网站地图: sitemap
以上命名规范仅供参考。如果大家对于Web UI设计规范有自己的见解，欢迎大家在此留言一同讨论，互相学习，共同进步:)
]]></description>
		<wfw:commentRss>http://nenge.pybbs.org/20090521-12.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Javascript对象概念大全</title>
		<link>http://nenge.pybbs.org/20090521-8.html</link>
		<comments>http://nenge.pybbs.org/20090521-8.html#comments</comments>
		<pubDate>Wed, 20 May 2009 17:00:23 +0000</pubDate>
		<dc:creator>能哥</dc:creator>
				<category><![CDATA[网站编程]]></category>
		<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://nenge.pybbs.org/?p=8</guid>
		<description><![CDATA[本文介绍了几乎所有关于对象的基本概念，什么是对象，如何创建对象，对象的属性的设置和读取，删除属性的方法，构造函数，对象原型，父类，子类，继承等等。
/*
1.对象
 对象是一种复合数据类型，它们将多个数据值集中在一个单元中，而且运行使用名字来存取这些值。解释对象的另一种方式是，对象是一个无序的属性集合，每个属性都有自己的名字和值。存储在对象中的已命名的值可以是数字和字符串这样的原始值，也可以是对象。
*/
var o = new Object();
/*
2.对象直接量创建对象
 对象直接量由属性说明列表构成，列表包含在大括号中，其中的属性说明由逗号隔开。
 对象直接量中的每个属性说明都由属性名加上冒号和属性值构成。
*/
var zhangsan = {name:”zhangsan”, age:34, married:true};
window.alert(typeof zhangsan); //输出object
/*
3.属性的读取和设置
* 对象的属性通过点号运算符读取和设置。对象的新属性可以通过直接创建。
*/
window.alert(zhangsan.car); //输出undefined
zhangsan.car=”BMW”; //直接赋值
window.alert(zhangsan.car); //输出BMW
/*
 4.属性的枚举
* 通过for循环枚举每一个属性，顺序不能保证固定。
* 注意枚举出的是属性名称，并不是属性值。
*/
var values = “”;
for(var v in zhangsan)values += v+”\n”; //枚举每一个属性
window.alert(values);
/*
5.属性的删除使用delete，如delete zhangsan.car
*/
/*
6.构造函数
* 构造函数是具有两个特性的javascript函数：
* (1)它由new 运算符调用；
* (2)传递给它的是一个对新创建的空对象的应用，将该引用作为关键字this的值，而且它还要对新创建的对象进行适当的初始化。
* 记住：构造函数只是初始化对象，并不返回新创建的对象。
*/
function Rectangle(w, h){
this.width = w;
this.height = h;
}
var ret1 = new Rectangle(2, 1);
//注意构造函数是如何使用它的参数来初始化this关键字所引用的对象的属性
/*
7.对象的方法
* 所谓方法，就是通过对象调用的javascript函数。我们知道，函数就是数值，它们所使用的名字没有任何特殊之处，可以将函数赋给任何变量，甚至赋给一个对象的任何属性，那么这个属性就是对象的方法了。
* 在对象的方法体内，关键字this的值就成了调用该方法的对象。
*/
function print(){}
ret1.print = print;
/*
 8.关于this的讨论
* 任何一个用作方法的函数都会得到一个额外的实际参数，即调用该函数的对象。由于方法通常是对那个对象执行某种操作，所以要表达函数作用于对象这一事实，最好采用方法的调用语法。
* [...]]]></description>
		<wfw:commentRss>http://nenge.pybbs.org/20090521-8.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
