<?xml version="1.0" encoding="utf-8"?><?xml-stylesheet href='http://feed.feedsky.com/styles/temp01.xsl' type='text/xsl' ?><!--这是一个由Feedsy提供技术支持的Feed，为了提高读者阅读的体验，以及满足用户美化自己Feed的需要，我们设计了多种精美的Feed模板，提供给大家选择，所有最终呈现出来的样式，皆由用户自愿选择使用，未经许可，任何团体和个人，请不要擅自修改样式或者盗用，这是对于用户选择权的尊重。--><rss xmlns:atom="http://www.w3.org/2005/Atom" xmlns:fs="http://www.feedsky.com/namespace/feed" 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/" version="2.0"><channel><atom:link href="http://feed.feedsky.com/lenno" type="application/rss+xml" rel="self"></atom:link><fs:self_link href="http://feed.feedsky.com/lenno" type="application/rss+xml"></fs:self_link><lastBuildDate>Wed, 01 Jul 2009 06:18:27 GMT</lastBuildDate><title>山猫上树</title><link>http://www.aiiiii.com</link><language>en</language><pubDate>Wed, 01 Jul 2009 06:18:59 GMT</pubDate><item><title>FLASH自定义鼠标形状</title><link>http://www.aiiiii.com/?p=318</link><content:encoded>&lt;table class=&quot;logtext_table&quot; border=&quot;0&quot;&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;
&lt;div&gt;&lt;span style=&quot;font-size: 12px;&quot;&gt;第一种方法：&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;color: #0080ff;&quot;&gt;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8211;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;font-size: 12px;&quot;&gt;制作mc为鼠标形状，包括2帧，第1帧为鼠标初始状态，第2帧为鼠标按下时状态，第1帧加 &lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;font-size: 12px;&quot;&gt;&lt;span style=&quot;color: #ff0000;&quot;&gt;stop();&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;font-size: 12px;&quot;&gt;将mc拖入主场景，在第1帧加入代码：&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;Mouse.hide();&lt;br /&gt;
mc.Move=() {&lt;br /&gt;
 this._x=this._parent._xmouse;&lt;br /&gt;
 this._y=this._parent._ymouse;&lt;br /&gt;
 updateAfterEvent();&lt;span style=&quot;color: #0080ff;&quot;&gt;//更新舞台&lt;/span&gt;&lt;br /&gt;
};&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;font-size: 12px;&quot;&gt;在mc加代码：&lt;span id=&quot;more-318&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;p&gt;onClipEvent (mouseDown) {&lt;span style=&quot;color: #0080ff;&quot;&gt;//鼠标按下&lt;br /&gt;
&lt;/span&gt; _root.mc.gotoAndStop(2);&lt;/p&gt;
&lt;p&gt;}&lt;br /&gt;
onClipEvent (mouseUp) {&lt;span style=&quot;color: #0080ff;&quot;&gt;&lt;br /&gt;
&lt;/span&gt; _root.mc.gotoAndStop(1);&lt;br /&gt;
}&lt;/p&gt;
&lt;p&gt;&lt;span style=&quot;color: #0000ff;&quot;&gt;____________________________________________&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span style=&quot;font-size: 12px;&quot;&gt;第二种方法：&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span style=&quot;color: #0080ff;&quot;&gt;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8211;&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span style=&quot;font-size: 12px;&quot;&gt;在mc加代码：&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;onClipEvent (load) {&lt;br /&gt;
 Mouse.hide();&lt;br /&gt;
 startDrag(&amp;#8221;_root.mc&amp;#8221;,true);&lt;span style=&quot;color: #0080ff;&quot;&gt;//设置mc为可拖动并吸附在鼠标中心&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;}&lt;br /&gt;
onClipEvent (mouseDown) {&lt;br /&gt;
 _root.mc.gotoAndStop(2);&lt;/p&gt;
&lt;p&gt;}&lt;br /&gt;
onClipEvent (mouseUp) {&lt;br /&gt;
 _root.mc.gotoAndStop(1);&lt;br /&gt;
}&lt;/p&gt;&lt;/div&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;img src=&quot;http://www1.feedsky.com/t1/281072364/lenno/feedsky/s.gif?r=http://www.aiiiii.com/?p=318&quot; border=&quot;0&quot; height=&quot;0&quot; width=&quot;0&quot; style=&quot;position:absolute&quot; /&gt;&lt;p class=&quot;fswww1&quot;&gt;&lt;a href=&quot;http://www1.feedsky.com/r/l/feedsky/lenno/281072364/art01.html&quot; target=&quot;_blank&quot;&gt;&lt;img border=&quot;0&quot; ismap=&quot;ismap&quot; src=&quot;http://www1.feedsky.com/r/i/feedsky/lenno/281072364/art01.gif&quot; onerror=&quot;this.style.display='none'&quot; /&gt;&lt;/a&gt;&lt;/p&gt;</content:encoded><wfw:commentRss>http://www.aiiiii.com/?feed=rss2&amp;p=318</wfw:commentRss><description>第一种方法：
&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8211;
制作mc为鼠标形状，包括2帧，第1帧为鼠标初始状态，第2帧为鼠标按下时状态，第1帧加 
stop();
将mc拖入主场景，在第1帧加入代码：
Mouse.hide();
mc.Move=() {
 this._x=this._parent._xmouse;
 this._y=this._parent._ymouse;
 updateAfterEvent();//更新舞台
};
在mc加代码：

onClipEvent (mouseDown) {//鼠标按下
 _root.mc.gotoAndStop(2);
}
onClipEvent (mouseUp) {
 _root.mc.gotoAndStop(1);
}
____________________________________________
第二种方法：
&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8212;&amp;#8211;
在mc加代码：
onClipEvent (load) {
 Mouse.hide();
 startDrag(&amp;#8221;_root.mc&amp;#8221;,true);//设置mc为可拖动并吸附在鼠标中心
}
onClipEvent (mouseDown) {
 _root.mc.gotoAndStop(2);
}
onClipEvent (mouseUp) {
 _root.mc.gotoAndStop(1);
}&lt;img src=&quot;http://www1.feedsky.com/t1/281072364/lenno/feedsky/s.gif?r=http://www.aiiiii.com/?p=318&quot; border=&quot;0&quot; height=&quot;0&quot; width=&quot;0&quot; style=&quot;position:absolute&quot; /&gt;&lt;p class=&quot;fswww1&quot;&gt;&lt;a href=&quot;http://www1.feedsky.com/r/l/feedsky/lenno/281072364/art01.html&quot; target=&quot;_blank&quot;&gt;&lt;img border=&quot;0&quot; ismap=&quot;ismap&quot; src=&quot;http://www1.feedsky.com/r/i/feedsky/lenno/281072364/art01.gif&quot; onerror=&quot;this.style.display='none'&quot; /&gt;&lt;/a&gt;&lt;/p&gt;</description><category>flash</category><pubDate>Wed, 01 Jul 2009 14:18:27 +0800</pubDate><author>hj</author><comments>http://www.aiiiii.com/?p=318#comments</comments><guid isPermaLink="false">http://www.aiiiii.com/?p=318</guid><dc:creator>hj</dc:creator><fs:srclink>http://www.aiiiii.com/?p=318</fs:srclink><fs:srcfeed>http://www.aiiiii.com/feed</fs:srcfeed><fs:itemid>feedsky/lenno/~7138169/281072364/5246901</fs:itemid></item><item><title>用flash制作360度人物旋转</title><link>http://www.aiiiii.com/?p=314</link><content:encoded>&lt;p&gt;&lt;span style=&quot;text-decoration: underline;&quot;&gt;&lt;span style=&quot;color: #810081;&quot;&gt;&lt;a href=&quot;http://www.7880.com/Upload/2005-03/20052172192336.swf&quot;&gt;http://www.7880.com/Upload/2005-03/20052172192336.swf&lt;/a&gt;&lt;/span&gt;&lt;/span&gt;&lt;a href=&quot;http://www.7880.com/Upload/2005-03/200521721533782.swf&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;var frameNum = 0;&lt;br /&gt;
function onMouseDown() {&lt;br /&gt;
textMove = true;&lt;br /&gt;
tempx = _xmouse;&lt;br /&gt;
}&lt;span id=&quot;more-314&quot;&gt;&lt;/span&gt;&lt;br /&gt;
function onMouseMove() {&lt;br /&gt;
setMove();&lt;br /&gt;
}&lt;br /&gt;
function onMouseUp() {&lt;br /&gt;
textMove = false;&lt;br /&gt;
}&lt;br /&gt;
function hitText() {&lt;br /&gt;
var t = myText.hitTest(_xmouse, _ymouse, true);&lt;br /&gt;
return t;&lt;br /&gt;
}&lt;br /&gt;
function setMove() {&lt;br /&gt;
if (textMove &amp;amp;&amp;amp; hitText()) {&lt;br /&gt;
if (_xmouse&amp;gt;tempx) {&lt;br /&gt;
frameNum += 1;&lt;br /&gt;
} else {&lt;br /&gt;
frameNum -= 1;&lt;br /&gt;
}&lt;br /&gt;
frameNum = getFrameNum(frameNum);&lt;br /&gt;
myText.gotoAndStop(frameNum);&lt;br /&gt;
}&lt;br /&gt;
}&lt;br /&gt;
function getFrameNum(f) {&lt;br /&gt;
var t = myText._totalframes;&lt;br /&gt;
if (f&amp;gt;=t) {&lt;br /&gt;
f = 1;&lt;br /&gt;
} else if (f&amp;lt;=1) {&lt;br /&gt;
f = t;&lt;br /&gt;
}&lt;br /&gt;
return f;&lt;br /&gt;
}&lt;/p&gt;&lt;img src=&quot;http://www1.feedsky.com/t1/281072365/lenno/feedsky/s.gif?r=http://www.aiiiii.com/?p=314&quot; border=&quot;0&quot; height=&quot;0&quot; width=&quot;0&quot; style=&quot;position:absolute&quot; /&gt;&lt;p class=&quot;fswww1&quot;&gt;&lt;a href=&quot;http://www1.feedsky.com/r/l/feedsky/lenno/281072365/art01.html&quot; target=&quot;_blank&quot;&gt;&lt;img border=&quot;0&quot; ismap=&quot;ismap&quot; src=&quot;http://www1.feedsky.com/r/i/feedsky/lenno/281072365/art01.gif&quot; onerror=&quot;this.style.display='none'&quot; /&gt;&lt;/a&gt;&lt;/p&gt;</content:encoded><wfw:commentRss>http://www.aiiiii.com/?feed=rss2&amp;p=314</wfw:commentRss><description>http://www.7880.com/Upload/2005-03/20052172192336.swf
var frameNum = 0;
function onMouseDown() {
textMove = true;
tempx = _xmouse;
}
function onMouseMove() {
setMove();
}
function onMouseUp() {
textMove = false;
}
function hitText() {
var t = myText.hitTest(_xmouse, _ymouse, true);
return t;
}
function setMove() {
if (textMove &amp;#38;&amp;#38; hitText()) {
if (_xmouse&amp;#62;tempx) {
frameNum += 1;
} else {
frameNum -= 1;
}
frameNum = getFrameNum(frameNum);
myText.gotoAndStop(frameNum);
}
}
function getFrameNum(f) {
var t = myText._totalframes;
if (f&amp;#62;=t) {
f = 1;
} else if (f&amp;#60;=1) {
f = t;
}
return [...]&lt;img src=&quot;http://www1.feedsky.com/t1/281072365/lenno/feedsky/s.gif?r=http://www.aiiiii.com/?p=314&quot; border=&quot;0&quot; height=&quot;0&quot; width=&quot;0&quot; style=&quot;position:absolute&quot; /&gt;&lt;p class=&quot;fswww1&quot;&gt;&lt;a href=&quot;http://www1.feedsky.com/r/l/feedsky/lenno/281072365/art01.html&quot; target=&quot;_blank&quot;&gt;&lt;img border=&quot;0&quot; ismap=&quot;ismap&quot; src=&quot;http://www1.feedsky.com/r/i/feedsky/lenno/281072365/art01.gif&quot; onerror=&quot;this.style.display='none'&quot; /&gt;&lt;/a&gt;&lt;/p&gt;</description><category>flash</category><pubDate>Wed, 01 Jul 2009 11:16:17 +0800</pubDate><author>hj</author><comments>http://www.aiiiii.com/?p=314#comments</comments><guid isPermaLink="false">http://www.aiiiii.com/?p=314</guid><dc:creator>hj</dc:creator><fs:srclink>http://www.aiiiii.com/?p=314</fs:srclink><fs:srcfeed>http://www.aiiiii.com/feed</fs:srcfeed><fs:itemid>feedsky/lenno/~7138169/281072365/5246901</fs:itemid></item><item><title>BEE 博客管理桌面化应用</title><link>http://www.aiiiii.com/?p=303</link><content:encoded>&lt;p&gt;不错的博客管理软件，不用登陆博客就好轻松编辑你的博客，速度更快，方便快捷！&lt;/p&gt;
&lt;p&gt;&lt;span&gt;“bee”是利用AIR技术建立的博客管理桌面化应用，不用登陆你的博客，只需要知道你的博客地址和管理密码就可以轻松管理你的博客文章、撰写博客内容。目前这项AIR应用只适用于&lt;a href=&quot;http://wordpress.org/&quot;&gt;&lt;span class=&quot;Apple-style-span&quot; style=&quot;color: #000000;&quot;&gt;&lt;span class=&quot;Apple-style-span&quot; style=&quot;text-decoration: none&quot;&gt;WordPress&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;.&lt;span id=&quot;more-303&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://www.airia.cn/up_files/bee1.jpg&quot; alt=&quot;&quot; width=&quot;407&quot; height=&quot;452&quot; /&gt;&lt;/p&gt;
&lt;p&gt;登陆进入BEE，可以选择浏览博客文章、写博客等操作&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://www.airia.cn/up_files/bee3.jpg&quot; alt=&quot;&quot; width=&quot;512&quot; height=&quot;363&quot; /&gt;&lt;/p&gt;
&lt;p&gt;浏览博客内容&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://www.airia.cn/up_files/bee2.jpg&quot; alt=&quot;&quot; width=&quot;512&quot; height=&quot;363&quot; /&gt;&lt;/p&gt;
&lt;p&gt;撰写文章。&lt;/p&gt;
&lt;p&gt; &lt;/p&gt;
&lt;p&gt;&lt;span&gt;案例知识点：&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;1.AIR在线管理 （非数据库连接式管理）&lt;/p&gt;
&lt;p&gt;关于在线管理，更为强大的你可以试用 &lt;a href=&quot;http://www.airia.cn/AIR_Apply/GoogleAnalyticsAIR/&quot;&gt;&lt;span class=&quot;Apple-style-span&quot; style=&quot;color: #000000;&quot;&gt;&lt;span class=&quot;Apple-style-span&quot; style=&quot;text-decoration: none&quot;&gt;Google 网站流量统计&lt;br /&gt;
AIR版&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;2.FLEX、AIR 图文混排编辑器解决方案&lt;/p&gt;
&lt;p&gt;&lt;span&gt;源码下载：&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;源码       &lt;a href=&quot;http://www.airia.cn/down/Source/bee.zip&quot;&gt;&lt;span class=&quot;Apple-style-span&quot; style=&quot;color: #000000;&quot;&gt;&lt;span class=&quot;Apple-style-span&quot; style=&quot;text-decoration: none&quot;&gt;http://www.airia.cn/down/Source/bee.zip&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;安装包 &lt;a href=&quot;http://www.airia.cn/down/Source/Bee_air.rar&quot;&gt;&lt;span class=&quot;Apple-style-span&quot; style=&quot;color: #000000;&quot;&gt;&lt;span class=&quot;Apple-style-span&quot; style=&quot;text-decoration: none&quot;&gt;http://www.airia.cn/down/Source/Bee_air.rar&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/p&gt;&lt;p class=&quot;fswww1&quot;&gt;&lt;a href=&quot;http://www1.feedsky.com/r/l/feedsky/lenno/281072366/art01.html&quot; target=&quot;_blank&quot;&gt;&lt;img border=&quot;0&quot; ismap=&quot;ismap&quot; src=&quot;http://www1.feedsky.com/r/i/feedsky/lenno/281072366/art01.gif&quot; onerror=&quot;this.style.display='none'&quot; /&gt;&lt;/a&gt;&lt;/p&gt;</content:encoded><wfw:commentRss>http://www.aiiiii.com/?feed=rss2&amp;p=303</wfw:commentRss><description>不错的博客管理软件，不用登陆博客就好轻松编辑你的博客，速度更快，方便快捷！
“bee”是利用AIR技术建立的博客管理桌面化应用，不用登陆你的博客，只需要知道你的博客地址和管理密码就可以轻松管理你的博客文章、撰写博客内容。目前这项AIR应用只适用于WordPress.

登陆进入BEE，可以选择浏览博客文章、写博客等操作

浏览博客内容

撰写文章。
 
案例知识点：
1.AIR在线管理 （非数据库连接式管理）
关于在线管理，更为强大的你可以试用 Google 网站流量统计
AIR版
2.FLEX、AIR 图文混排编辑器解决方案
源码下载：
源码       http://www.airia.cn/down/Source/bee.zip
安装包 http://www.airia.cn/down/Source/Bee_air.rar&lt;p class=&quot;fswww1&quot;&gt;&lt;a href=&quot;http://www1.feedsky.com/r/l/feedsky/lenno/281072366/art01.html&quot; target=&quot;_blank&quot;&gt;&lt;img border=&quot;0&quot; ismap=&quot;ismap&quot; src=&quot;http://www1.feedsky.com/r/i/feedsky/lenno/281072366/art01.gif&quot; onerror=&quot;this.style.display='none'&quot; /&gt;&lt;/a&gt;&lt;/p&gt;</description><category>wordpress</category><category>software</category><category>管理博客</category><category>桌面</category><pubDate>Sun, 18 Jan 2009 23:51:53 +0800</pubDate><author>hj</author><comments>http://www.aiiiii.com/?p=303#comments</comments><guid isPermaLink="false">http://www.aiiiii.com/archives/303</guid><dc:creator>hj</dc:creator><fs:srclink>http://www.aiiiii.com/?p=303</fs:srclink><fs:srcfeed>http://www.aiiiii.com/feed</fs:srcfeed><fs:itemid>feedsky/lenno/~7138169/281072366/5246901</fs:itemid></item><item><title>新年海报</title><link>http://www.aiiiii.com/?p=297</link><content:encoded>&lt;p&gt;新年+圣诞节用的海报&lt;br /&gt;
&lt;img class=&quot;alignnone&quot; title=&quot;美食美客新年海报&quot; src=&quot;http://farm4.static.flickr.com/3236/3135057170_7931296d64.jpg?v=0&quot; alt=&quot;&quot; width=&quot;348&quot; height=&quot;500&quot; /&gt;&lt;a class=&quot;flickr-image&quot; title=&quot;new year2&quot; href=&quot;http://www.flickr.com/photos/21752496@N07/3135057170/&quot;&gt;&lt;/a&gt;&lt;/p&gt;&lt;p class=&quot;fswww1&quot;&gt;&lt;a href=&quot;http://www1.feedsky.com/r/l/feedsky/lenno/281072367/art01.html&quot; target=&quot;_blank&quot;&gt;&lt;img border=&quot;0&quot; ismap=&quot;ismap&quot; src=&quot;http://www1.feedsky.com/r/i/feedsky/lenno/281072367/art01.gif&quot; onerror=&quot;this.style.display='none'&quot; /&gt;&lt;/a&gt;&lt;/p&gt;</content:encoded><wfw:commentRss>http://www.aiiiii.com/?feed=rss2&amp;p=297</wfw:commentRss><description>新年+圣诞节用的海报&lt;p class=&quot;fswww1&quot;&gt;&lt;a href=&quot;http://www1.feedsky.com/r/l/feedsky/lenno/281072367/art01.html&quot; target=&quot;_blank&quot;&gt;&lt;img border=&quot;0&quot; ismap=&quot;ismap&quot; src=&quot;http://www1.feedsky.com/r/i/feedsky/lenno/281072367/art01.gif&quot; onerror=&quot;this.style.display='none'&quot; /&gt;&lt;/a&gt;&lt;/p&gt;</description><category>平面设计</category><category>design</category><category>海报</category><pubDate>Thu, 25 Dec 2008 15:25:57 +0800</pubDate><author>hj</author><comments>http://www.aiiiii.com/?p=297#comments</comments><guid isPermaLink="false">http://www.aiiiii.com/?p=297</guid><dc:creator>hj</dc:creator><fs:srclink>http://www.aiiiii.com/?p=297</fs:srclink><fs:srcfeed>http://www.aiiiii.com/feed</fs:srcfeed><fs:itemid>feedsky/lenno/~7138169/281072367/5246901</fs:itemid></item><item><title>美食美客</title><link>http://www.aiiiii.com/?p=289</link><content:encoded>&lt;p&gt;&lt;span style=&quot;color: #aa2227;&quot;&gt;&lt;strong&gt;美食美客生活餐厅设计系列&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;
&lt;div class=&quot;wp-caption alignnone&quot; style=&quot;width: 360px&quot;&gt;&lt;img title=&quot;美食美客标志&quot; src=&quot;http://farm4.static.flickr.com/3140/3098604281_7fc1da184a.jpg?v=0&quot; alt=&quot;餐厅用标志设计&quot; width=&quot;350&quot; height=&quot;128&quot; /&gt;&lt;p class=&quot;wp-caption-text&quot;&gt;餐厅用标志设计&lt;/p&gt;&lt;/div&gt;
&lt;p&gt;&lt;span id=&quot;more-289&quot;&gt;&lt;/span&gt;&lt;/p&gt;
&lt;div class=&quot;wp-caption alignnone&quot; style=&quot;width: 510px&quot;&gt;&lt;img style=&quot;margin: 2px;&quot; title=&quot;3维效果图&quot; src=&quot;http://farm4.static.flickr.com/3150/3099438082_cc5442c3b3.jpg?v=0&quot; alt=&quot;餐厅3维效果图&quot; width=&quot;500&quot; height=&quot;313&quot; /&gt;&lt;p class=&quot;wp-caption-text&quot;&gt;餐厅3维效果图&lt;/p&gt;&lt;/div&gt;
&lt;div class=&quot;wp-caption alignnone&quot; style=&quot;width: 374px&quot;&gt;&lt;img title=&quot;名片设计&quot; src=&quot;http://farm4.static.flickr.com/3157/3099808136_fc85c9b69e.jpg?v=0&quot; alt=&quot;名片设计&quot; width=&quot;364&quot; height=&quot;445&quot; /&gt;&lt;p class=&quot;wp-caption-text&quot;&gt;名片设计&lt;/p&gt;&lt;/div&gt;
&lt;div class=&quot;wp-caption alignnone&quot; style=&quot;width: 336px&quot;&gt;&lt;img title=&quot;餐厅用菜谱&quot; src=&quot;http://farm4.static.flickr.com/3143/3099438212_326583cf42.jpg?v=0&quot; alt=&quot;餐厅用菜谱&quot; width=&quot;326&quot; height=&quot;500&quot; /&gt;&lt;p class=&quot;wp-caption-text&quot;&gt;餐厅用菜谱&lt;/p&gt;&lt;/div&gt;&lt;p class=&quot;fswww1&quot;&gt;&lt;a href=&quot;http://www1.feedsky.com/r/l/feedsky/lenno/281072368/art01.html&quot; target=&quot;_blank&quot;&gt;&lt;img border=&quot;0&quot; ismap=&quot;ismap&quot; src=&quot;http://www1.feedsky.com/r/i/feedsky/lenno/281072368/art01.gif&quot; onerror=&quot;this.style.display='none'&quot; /&gt;&lt;/a&gt;&lt;/p&gt;</content:encoded><wfw:commentRss>http://www.aiiiii.com/?feed=rss2&amp;p=289</wfw:commentRss><description>美食美客生活餐厅设计系列&lt;p class=&quot;fswww1&quot;&gt;&lt;a href=&quot;http://www1.feedsky.com/r/l/feedsky/lenno/281072368/art01.html&quot; target=&quot;_blank&quot;&gt;&lt;img border=&quot;0&quot; ismap=&quot;ismap&quot; src=&quot;http://www1.feedsky.com/r/i/feedsky/lenno/281072368/art01.gif&quot; onerror=&quot;this.style.display='none'&quot; /&gt;&lt;/a&gt;&lt;/p&gt;</description><category>餐厅</category><category>photo</category><category>平面设计</category><category>logo</category><category>design</category><pubDate>Thu, 11 Dec 2008 10:18:15 +0800</pubDate><author>hj</author><comments>http://www.aiiiii.com/?p=289#comments</comments><guid isPermaLink="false">http://www.aiiiii.com/?p=289</guid><dc:creator>hj</dc:creator><fs:srclink>http://www.aiiiii.com/?p=289</fs:srclink><fs:srcfeed>http://www.aiiiii.com/feed</fs:srcfeed><fs:itemid>feedsky/lenno/~7138169/281072368/5246901</fs:itemid></item><item><title>网页的栅格系统设计</title><link>http://www.aiiiii.com/?p=238</link><content:encoded>&lt;p&gt;&lt;strong&gt;栅格系统的形成&lt;/strong&gt;&lt;br /&gt;
1692年，新登基的法国国王路易十四感到法国的印刷水平强差人意，因此命令成立一个管理印刷的皇家特别委员会。他们的首要任务是设计出科学的、合理的， 重视功能性的新字体。&lt;span id=&quot;more-238&quot;&gt;&lt;/span&gt;委员会由数学家尼古拉斯加宗（Nicolas Jaugeon）担任领导，他们以罗马体为基础，采用方格为设计依据，每个字体方格分为64个基本方各单位，每个方各单位再分成36个小格，这样，一个印 刷版面就有 2304个小格组成，在这个严谨的几何网格网络中设计字体的形状，版面的编排，试验传达功能的效能，这是是世界上最早对字体和版面进行科学实验的活动，也 是栅格系统最早的雏形。&lt;img class=&quot;mce_plugin_wordpress_more&quot; title=&quot;More...&quot; src=&quot;http://www.sunnnny.com/wp-includes/js/tinymce/themes/advanced/images/spacer.gif&quot; alt=&quot;More...&quot; width=&quot;100%&quot; height=&quot;10&quot; /&gt;&lt;/p&gt;
&lt;p&gt;栅格系统英文为“grid systems”，也有人翻译为“网格系统”，其实是一回事。不过从定义上说，栅格更为准确些，从维基百科查到栅格的定义为：&lt;a href=&quot;http://zh.wikipedia.org/w/index.php?title=%E6%A0%85%E6%A0%BC%E8%AE%BE%E8%AE%A1&amp;amp;variant=zh-cn&quot; target=&quot;_blank&quot;&gt;栅格设计系统（又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格），是一种平面设计的方法与风格。运用固定的格子设计版面布局，其风格工整简洁，在二战后大受欢迎，已成为今日出版物设计的主流风格之一&lt;/a&gt;。&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;网页设计中的栅格系统 &lt;/strong&gt;&lt;br /&gt;
我给网页栅格系统下的定义为：以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。&lt;br /&gt;
网页栅格系统是从平面栅格系统中发展而来。对于网页设计来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范。&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://www.mikeposs.com/&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://pic.yupoo.com/sunnnny/22827633e6ee/medium.jpg&quot; alt=&quot;&quot; width=&quot;456&quot; height=&quot;286&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://www.emanuelblagonic.com/&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://pic.yupoo.com/sunnnny/49949633e6d5/medium.jpg&quot; alt=&quot;&quot; width=&quot;456&quot; height=&quot;286&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;栅格系统在现在的网页设计中应用越来越多，从网络上搜罗了一篇关于栅格系统应用的文章：&lt;a href=&quot;http://www.yeeyan.com/articles/view/snlchina/3570&quot; target=&quot;_blank&quot;&gt;30个最顶尖的基于栅格系统的博客网站设计&lt;/a&gt;。&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;栅格系统的设计原理及应用&lt;/strong&gt;&lt;br /&gt;
那么如何设计一个栅格系统？接下来我们将通过实例，详细的介绍一下网页栅格系统的原理与应用：&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://pic.yupoo.com/sunnnny/32848633e6d5/medium.jpg&quot; alt=&quot;&quot; width=&quot;335&quot; height=&quot;388&quot; /&gt;&lt;/p&gt;
&lt;p&gt;在网页设计中，我们把宽度为“W”的页面分割成n个网格单元“a”，每个单元与单元之间的间隙设为“i”,此时我们把“a+i”定义“A”。他们之间的关系如下：&lt;br /&gt;
W =（a×n）+（n-1）i&lt;br /&gt;
由于a+i=A，&lt;br /&gt;
可得：&lt;strong&gt;(A×n) - i = W&lt;/strong&gt;&lt;br /&gt;
这个公式表述了网页的布局与网页“背后”的栅格系统之间的某种关系。我们拿yahoo作例，来看一下栅格系统的应用：&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://pic.yupoo.com/sunnnny/94888633e6d5/medium.jpg&quot; alt=&quot;&quot; width=&quot;454&quot; height=&quot;356&quot; /&gt;&lt;/p&gt;
&lt;p&gt;yahoo的网站页面宽度为W=950px，每个区块与区块的间隔为i=10px；如果应用上面的公式，可以推出A=40px，既yahoo首页横向版式设计采用的栅格系统为：&lt;br /&gt;
&lt;strong&gt;（40×n）- 10 = W&lt;/strong&gt;&lt;br /&gt;
下面我们列出当n等于不同数值时W变化的数值表格 ：&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://pic.yupoo.com/sunnnny/51352633e6d5/medium.jpg&quot; alt=&quot;&quot; width=&quot;456&quot; height=&quot;286&quot; /&gt;&lt;/p&gt;
&lt;p&gt;从表格可以看出：yahoo首页的布局完全是按照栅格系统进行设计的，每个区块的宽度对应的n值分别为：4，11，9。在这里我们看到一个很有意思 的事情：只要保证一个横向维度的各个区块的n值相加等于24，则即可保证页面的宽度一定是950px。然而，950px的宽度也恰好就是当n=24的时 候，W的宽度值。由此我们得出以下的应用模式：&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://pic.yupoo.com/sunnnny/07993633e6d5/medium.jpg&quot; alt=&quot;&quot; width=&quot;417&quot; height=&quot;449&quot; /&gt;&lt;/p&gt;
&lt;p&gt;在栅格系统中，设计师根据需要制定不同的版式或者划分区块，他们的依据将是上面的那张对应表进行设计。这样，一个栅格系统的应用就从此开始了。我们 看到，使用栅格系统的网页设计，非常的有条理性；看上去也很舒服。最重要的是，它给整个网站的页面结构定义了一个标准。对于视觉设计师来说，他们不用再为 设计一个网站每个页面都要想一个宽度或高度而烦恼了。对于前端开发工程师来说，页面的布局设计将完全是规范的和可重用的，这将大大节约了开发成本。对于内 容编辑或广告销售来说，所有的广告都是规则的，通用的，他们再也不用做出一套N张不同尺寸的广告图了……&lt;/p&gt;
&lt;p&gt;当然只要你愿意，我们可以衍生出任何一种栅格系统，只要改变A和i的值，这个根据网站的实际情况来制定。那么如何选择合适栅格系统，主要通过“构成 要素与程序、限制与选择、构成要素的比例、组合、虚空间与组合、四边联系与轴的联系、三的法则、圆与构成、水平构成这些设计元素规划，来实现比例和谐的平 面设计”。比较深奥，我们在这里就不详细阐述了。&lt;/p&gt;
&lt;p&gt;呵呵，说了一堆栅格系统的优点。大家可能会问：难道栅格系统真的是完美的么？答案是否定的：对于内容信息不确定导致高度不确定的页面，在高度层面上就无法做到栅格了。当然，具体的情况还需具体的分析与解决，这就需要设计师们在实际的应用中不断的总结经验，不断实践了。   (本文为转载，版权归淘宝UED所有)&lt;/p&gt;&lt;p class=&quot;fswww1&quot;&gt;&lt;a href=&quot;http://www1.feedsky.com/r/l/feedsky/lenno/281072369/art01.html&quot; target=&quot;_blank&quot;&gt;&lt;img border=&quot;0&quot; ismap=&quot;ismap&quot; src=&quot;http://www1.feedsky.com/r/i/feedsky/lenno/281072369/art01.gif&quot; onerror=&quot;this.style.display='none'&quot; /&gt;&lt;/a&gt;&lt;/p&gt;</content:encoded><wfw:commentRss>http://www.aiiiii.com/?feed=rss2&amp;p=238</wfw:commentRss><description>栅格系统的形成
1692年，新登基的法国国王路易十四感到法国的印刷水平强差人意，因此命令成立一个管理印刷的皇家特别委员会。他们的首要任务是设计出科学的、合理的， 重视功能性的新字体。委员会由数学家尼古拉斯加宗（Nicolas Jaugeon）担任领导，他们以罗马体为基础，采用方格为设计依据，每个字体方格分为64个基本方各单位，每个方各单位再分成36个小格，这样，一个印 刷版面就有 2304个小格组成，在这个严谨的几何网格网络中设计字体的形状，版面的编排，试验传达功能的效能，这是是世界上最早对字体和版面进行科学实验的活动，也 是栅格系统最早的雏形。
栅格系统英文为“grid systems”，也有人翻译为“网格系统”，其实是一回事。不过从定义上说，栅格更为准确些，从维基百科查到栅格的定义为：栅格设计系统（又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格），是一种平面设计的方法与风格。运用固定的格子设计版面布局，其风格工整简洁，在二战后大受欢迎，已成为今日出版物设计的主流风格之一。
网页设计中的栅格系统 
我给网页栅格系统下的定义为：以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。
网页栅格系统是从平面栅格系统中发展而来。对于网页设计来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范。


栅格系统在现在的网页设计中应用越来越多，从网络上搜罗了一篇关于栅格系统应用的文章：30个最顶尖的基于栅格系统的博客网站设计。
栅格系统的设计原理及应用
那么如何设计一个栅格系统？接下来我们将通过实例，详细的介绍一下网页栅格系统的原理与应用：

在网页设计中，我们把宽度为“W”的页面分割成n个网格单元“a”，每个单元与单元之间的间隙设为“i”,此时我们把“a+i”定义“A”。他们之间的关系如下：
W =（a×n）+（n-1）i
由于a+i=A，
可得：(A×n) - i = W
这个公式表述了网页的布局与网页“背后”的栅格系统之间的某种关系。我们拿yahoo作例，来看一下栅格系统的应用：

yahoo的网站页面宽度为W=950px，每个区块与区块的间隔为i=10px；如果应用上面的公式，可以推出A=40px，既yahoo首页横向版式设计采用的栅格系统为：
（40×n）- 10 = W
下面我们列出当n等于不同数值时W变化的数值表格 ：

从表格可以看出：yahoo首页的布局完全是按照栅格系统进行设计的，每个区块的宽度对应的n值分别为：4，11，9。在这里我们看到一个很有意思 的事情：只要保证一个横向维度的各个区块的n值相加等于24，则即可保证页面的宽度一定是950px。然而，950px的宽度也恰好就是当n=24的时 候，W的宽度值。由此我们得出以下的应用模式：

在栅格系统中，设计师根据需要制定不同的版式或者划分区块，他们的依据将是上面的那张对应表进行设计。这样，一个栅格系统的应用就从此开始了。我们 看到，使用栅格系统的网页设计，非常的有条理性；看上去也很舒服。最重要的是，它给整个网站的页面结构定义了一个标准。对于视觉设计师来说，他们不用再为 设计一个网站每个页面都要想一个宽度或高度而烦恼了。对于前端开发工程师来说，页面的布局设计将完全是规范的和可重用的，这将大大节约了开发成本。对于内 容编辑或广告销售来说，所有的广告都是规则的，通用的，他们再也不用做出一套N张不同尺寸的广告图了……
当然只要你愿意，我们可以衍生出任何一种栅格系统，只要改变A和i的值，这个根据网站的实际情况来制定。那么如何选择合适栅格系统，主要通过“构成 要素与程序、限制与选择、构成要素的比例、组合、虚空间与组合、四边联系与轴的联系、三的法则、圆与构成、水平构成这些设计元素规划，来实现比例和谐的平 面设计”。比较深奥，我们在这里就不详细阐述了。
呵呵，说了一堆栅格系统的优点。大家可能会问：难道栅格系统真的是完美的么？答案是否定的：对于内容信息不确定导致高度不确定的页面，在高度层面上就无法做到栅格了。当然，具体的情况还需具体的分析与解决，这就需要设计师们在实际的应用中不断的总结经验，不断实践了。   (本文为转载，版权归淘宝UED所有)&lt;p class=&quot;fswww1&quot;&gt;&lt;a href=&quot;http://www1.feedsky.com/r/l/feedsky/lenno/281072369/art01.html&quot; target=&quot;_blank&quot;&gt;&lt;img border=&quot;0&quot; ismap=&quot;ismap&quot; src=&quot;http://www1.feedsky.com/r/i/feedsky/lenno/281072369/art01.gif&quot; onerror=&quot;this.style.display='none'&quot; /&gt;&lt;/a&gt;&lt;/p&gt;</description><category>网页设计</category><category>design</category><category>布局</category><pubDate>Fri, 28 Nov 2008 16:55:42 +0800</pubDate><author>hj</author><comments>http://www.aiiiii.com/?p=238#comments</comments><guid isPermaLink="false">http://www.aiiiii.com/?p=238</guid><dc:creator>hj</dc:creator><fs:srclink>http://www.aiiiii.com/?p=238</fs:srclink><fs:srcfeed>http://www.aiiiii.com/feed</fs:srcfeed><fs:itemid>feedsky/lenno/~7138169/281072369/5246901</fs:itemid></item></channel></rss>
