<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
<channel>
<title><![CDATA[eeAoo' s blog - 设计┇design]]></title>
<link>http://www.eeaoo.com/blog/</link>
<description><![CDATA[屈己者，能处众，好胜者，必遇敌。]]></description>
<language>zh-cn</language>
<copyright><![CDATA[Copyright 2005 PBlog3 v2.8]]></copyright>
<webMaster><![CDATA[salacash1115@gmail.com(Jeff)]]></webMaster>
<generator>PBlog2 v2.4</generator> 
<image>
	<title>eeAoo&#39; s blog</title>
	<url>http://www.eeaoo.com/blog/images/logos.gif</url>
	<link>http://www.eeaoo.com/blog/</link>
	<description>eeAoo&#39; s blog</description>
</image>

			<item>
			<link>http://www.eeaoo.com/blog/article/75.htm</link>
			<title><![CDATA[iframe自适应网页高度 多版本浏览器兼容]]></title>
			<author>salacash1115@gmail.com(eeaoo)</author>
			<category><![CDATA[设计┇design]]></category>
			<pubDate>Thu,06 Aug 2009 16:54:41 +0800</pubDate>
			<guid>http://www.eeaoo.com/blog/default.asp?id=75</guid>
		<description><![CDATA[方法一，在每个被包含页在本身内容加载完毕之后，执行JS取得本页面的高度，然后去同步父页面的iframe高度。方法二，在主页面iframe的onload事件中执行JS，去取得被包含页的高度内容，然后去同步高度。在代码维护角度考虑，方法二是优于方法一的 <br/><br/>下面开始讲： <br/>通过Google搜索iframe 自适应高度，结果5W多条，搜索iframe 高度自适应，结果2W多条。<br/>我翻了前面的几十条，刨去大量的转载，有那么三五篇是原创的。而这几篇原创里面，基本上只谈到如何自适应静的东西，就是没有考虑到JS操作DOM之后，如何做动态同步的问题。另外，在兼容性方面，也研究的不彻底。 <br/><br/>这篇文章，希望在这两个方面再做一些深入。 <br/><br/>可能有人还没接触到这个问题过，先说明一下，什么是高度自适应吧。所谓iframe高度自适应，就是，基于界面美观和交互的考虑，隐藏了iframe的border和scrollbar，让人看不出它是个iframe。如果iframe始终调用同一个固定高度的页面，我们直接写死iframe高度就可以了。而如果iframe要切换页面，或者被包含页面要做DOM动态操作，这时候，就需要程序去同步iframe高度和被包含页的实际高度了。 <br/><br/>顺便说下，iframe在迫不得已的时候才去用，它会给前端开发带来太多的麻烦。 <br/><br/><br/>传统做法大致有两个：<br/>方法一，在每个被包含页在本身内容加载完毕之后，执行JS取得本页面的高度，然后去同步父页面的iframe高度。<br/>方法二，在主页面iframe的onload事件中执行JS，去取得被包含页的高度内容，然后去同步高度。<br/>在代码维护角度考虑，方法二是优于方法一的，因为方法一，每个被包含页都要去引入一段相同的代码来做这个事情，创建了好多副本。 <br/><br/>两个方法都只处理了静的东西，就是只在内容加载的时候执行，如果JS去操作DOM引起的高度变化，都不太方便。 <br/><br/><br/>如果在主窗口做一个Interval，不停的来获取被包含页的高度，然后做同步，是不是即方便，又解决了JS操作DOM的问题了呢？答案是肯定的。 <br/><br/>主页面代码示例： <br/><br/>&lt;iframe id=&#34;frame_content&#34; src=&#34;&#39;<a href="http://www.77329.com/index.html" target="_blank" rel="external">http://www.77329.com/index.html</a>&#39;&#34; scrolling=&#34;no&#34; frameborder=&#34;0&#34;&gt;&lt;/iframe&gt;<br/>&lt;script type=&#34;text/javascript&#34;&gt;<br/>function reinitIframe(){<br/>var iframe = document.getElementById(&#34;frame_content&#34;);<br/>try{<br/>iframe.height =&nbsp;&nbsp;iframe.contentWindow.document.documentElement.scrollHeight;<br/>}catch (ex){}<br/>}<br/>window.setInterval(&#34;reinitIframe()&#34;, 200);<br/>&lt;/script&gt;&nbsp;&nbsp;一直执行，效率会不会有问题？<br/>我做了测试，同时开5个窗口（IE6、IE7、FF、Opera、Safari）执行这个代码，不会对CPU有什么影响，甚至调整到2ms，也没影响（基本维持在0%占用率）。 <br/><br/>下面谈谈各浏览器的兼容性问题，如何获取到正确的高度，主要是对body.scrollHeight和documentElement.scrollHeight两个值得比较。注意本文用的是这个doctype，不同的doctype应该不会影响结果，但是假如你的页面没有申明doctype，那还是先去加一个吧。 <br/><br/>&lt;!DOCTYPE HTML PUBLIC &#34;-//W3C//DTD HTML&nbsp;&nbsp;4.01//EN&#34; &#34;<a href="http://www.w3.org/TR/html4/strict.dtd" target="_blank" rel="external">http://www.w3.org/TR/html4/strict.dtd</a>&#34;&gt;&nbsp;&nbsp;在主页面追加以下测试代码，以输出这两个值，代码示例： <br/><br/>&lt;div&gt;&lt;button onclick=&#34;checkHeight()&#34;&gt;Check Height&lt;/button&gt;&lt;/div&gt;<br/>&lt;script type=&#34;text/javascript&#34;&gt;<br/>function checkHeight() {<br/>var iframe = document.getElementById(&#34;frame_content&#34;);<br/>var bHeight = iframe.contentWindow.document.body.scrollHeight;<br/>var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;<br/>alert(&#34;bHeight:&#34; + bHeight + &#34;, dHeight:&#34; + dHeight);<br/>}<br/>&lt;/script&gt;&nbsp;&nbsp;被加载页面，可以切换一个绝对定位的层，来使页面高度动态改变。如果层展开，则会撑高页面高度。代码示例： <br/><br/><br/><br/>&lt;div&gt;<br/>&lt;button onclick=&#34;toggleOverlay()&#34;&gt;Toggle Overlay&lt;/button&gt;<br/>&lt;/div&gt;<br/>&lt;div style=&#34;height:160px;position:relative&#34;&gt;<br/>&lt;div id=&#34;overlay&#34; style=&#34;position:absolute; width:280px; height:280px; display:none;&#34;&gt;&nbsp;&nbsp;&lt;/div&gt;<br/>&lt;/div&gt;<br/>&lt;script type=&#34;text/javascript&#34;&gt;<br/>function toggleOverlay() {<br/>var overlay = document.getElementById(&#39;overlay&#39;);<br/>overlay.style.display = (overlay.style.display == &#39;none&#39;) ? &#39;block&#39; : &#39;none&#39;;<br/>}<br/>&lt;/script&gt;&nbsp;&nbsp;下面列出以上代码在各浏览器的测试值：<br/>（bHeight = body.scrollHeight, dHeight = documentElement.scrollHeight, 红色 = 错误值, 绿色 = 正确值） <br/><br/><br/><br/>/ 层隐藏时 层展开时 <br/>bHeight dHeight bHeight dHeight <br/>IE6 184 184 184 303 <br/>IE7 184 184 184 303 <br/>FF 184 184 184 303 <br/>Opera 181 181 300 300 <br/>Safari 184 184 303 184 <br/><br/><br/><br/><br/>暂且无视Opera比别人少3像素的问题…可以看出，如果没有绝对定位的东西，两个值是相等的，取哪个都无所谓。<br/>但是如果有，那么各个浏览器的表现不太相同，单取哪个值都不对。但可以找到了一条规律，那就是取两个值得最大值可以兼容各浏览器。所以我们的主页面代码就要改造成这样了： <br/><br/>function reinitIframe(){<br/>var iframe = document.getElementById(&#34;frame_content&#34;);<br/>try{<br/>var bHeight = iframe.contentWindow.document.body.scrollHeight;<br/>var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;<br/>var height = Math.max(bHeight, dHeight);<br/>iframe.height =&nbsp;&nbsp;height;<br/>}catch (ex){}<br/>}<br/>window.setInterval(&#34;reinitIframe()&#34;, 200);&nbsp;&nbsp;这样子，基本解决了兼容性问题。顺便说下，不光绝对定位的层会影响到值，float也会导致两个值的差异。 <br/><br/><br/><br/>如果你演示Demo后，会发现，除了IE，其他浏览器中，当层展开后再隐藏，取到的高度值还是维持在展开的高度303，而非隐藏回去的真正值184，就是说长高了之后缩不回去了。这个现象在不同被包含页面之间做切换也会发生，当从高的页面切换到矮页面的时候，取到的高度还是那个高的值。<br/>可以归纳为，当iframe窗体高度高于文档实际高度的时候，高度取的是窗体高度，而当窗体高度低于实际文档高度时，取的是文档实际高度。因此，要想办法在同步高度之前把高度设置到一个比实际文档低的值。所以，在iframe的添加 onload=”this.height=100″，让页面加载的时候先缩到足够矮，然后再同步到一样的高度。<br/>这个值，在实际应用中决定，足够矮但又不能太矮，否则在FF等浏览器里会有很明显的闪烁。DOM操作的时候主页面无法监听到，只能DOM操作完了之后把高度变小了。<br/>在我的一个实际项目中，在成本和收益之间权衡，我并没有做这个事情，因为每个DOM函数中都要插入这个代码，代价太高，其实层缩回去不缩掉也不是那么致命。包括Demo里，也没有去做这个事情。如果读者有更好的方法，请告诉我。 <br/><br/>这是最终的主页面的代码： <br/><br/>&lt;iframe id=&#34;frame_content&#34; src=&#34;&#39;<a href="http://www.77329.com/index.html" target="_blank" rel="external">http://www.77329.com/index.html</a>&#39;&#34; scrolling=&#34;no&#34; frameborder=&#34;0&#34;<br/> onload=&#34;this.height=100&#34;&gt;&lt;/iframe&gt;<br/>&lt;script type=&#34;text/javascript&#34;&gt;<br/>function reinitIframe(){<br/>var iframe = document.getElementById(&#34;frame_content&#34;);<br/>try{<br/>var bHeight = iframe.contentWindow.document.body.scrollHeight;<br/>var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;<br/>var height = Math.max(bHeight, dHeight);<br/>iframe.height =&nbsp;&nbsp;height;<br/>}catch (ex){}<br/>}<br/>window.setInterval(&#34;reinitIframe()&#34;, 200);<br/>&lt;/script&gt;&nbsp;&nbsp;<br/><br/>完整代码事例： <br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.eeaoo.com/blog/images/html.gif" style="margin:0px 2px -3px 0px"> HTML代码</div><div class="UBBContent"><TEXTAREA rows="8" id="temp54784">
<html>
<head>
<meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=gb2312&#34; />
<meta name=&#34;keywords&#34; content=&#34;关键词&#34;/>
<meta name=&#34;description&#34; content=&#34;描述&#34;/>
<meta name=&#34;auther&#34; content=&#34;fq&#34; />
<title>iframe100% 兼容浏览器</title>
<style>
*{ margin:0; padding:0;}
</style>
</head> 
<body>
<div style=&#34;width:100%; margin:auto;&#34;>
  <div style=&#34;background:#ccc;height:100px;&#34;></div>
  <div style=&#34;background:#2769fa; width:100%; overflow:hidden;&#34;>
    <div style=&#34;width:150px; float:left;&#34;></div>
    <div style=&#34;margin-left:160px;background:#fff;&#34;>
   <iframe name='admin_main' id=&#34;frame_content&#34; style=&#34;float:right; float /**/:none;&#34; frameborder='0' scroll='auto' width=&#34;100%&#34; src='<a href="http://www.77329.com/index.html" target="_blank" rel="external">http://www.77329.com/index.html</a>'></iframe>
      <script type=&#34;text/javascript&#34;>
      //此代码所套用的iframe不能垮域
   function reinstallIframe(){
  var iframe = document.getElementById(&#34;frame_content&#34;);
  try{
   iframe.height =  iframe.contentWindow.document.documentElement.scrollHeight;
  }catch (ex){}
  } 
  window.setInterval(&#34;reinstallIframe()&#34;, 200);
   </script>
     </div>
  </div>
  <div style=&#34;background:#ccc;height:100px;&#34;></div>
</div>
</body>
</html> 
</TEXTAREA><br/><INPUT onclick="runEx('temp54784')"  type="button" class="userbutton" value="运行此代码"/> <INPUT onclick="doCopy('temp54784')"  type="button" class="userbutton" value="复制此代码"/> <INPUT onclick="saveCode('temp54784')" type="button" class="userbutton" value="保存此代码"><br/> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</div></div><br/><br/>将以上代码保存为.html文件iframe中的该文件ifxxx.html是你网页中要调用的另一个文件路径。注意：此代码不兼容垮域调用iframe。 ]]></description>
		</item>
		
			<item>
			<link>http://www.eeaoo.com/blog/article/62.htm</link>
			<title><![CDATA[程序员在软件中恶意加病毒]]></title>
			<author>salacash1115@gmail.com(eeaoo)</author>
			<category><![CDATA[设计┇design]]></category>
			<pubDate>Tue,23 Jun 2009 10:32:03 +0800</pubDate>
			<guid>http://www.eeaoo.com/blog/default.asp?id=62</guid>
		<description><![CDATA[本报讯(吴艳燕陈琼珂)上海某软件公司程序员浦加志在参与公司软件程序编写过程中，恶意添加病毒，导致使用该软件的用户的电脑文件被自动删除，造成公司经济损失20余万元。昨天，市二中院对该案作出终审裁定，驳回浦加志的上诉请求，维持一审以破坏计算机信息系统罪对其作出的2年6个月有期徒刑的判决。 <br/><br/>　　2007年7月至9月，浦加志参与公司两款软件的编程工作，在其中一款算量软件内编写了一个含有恶意代码的函数，该函数可以判断计算机的机器时间是否在2007年10月1日零时后，如果是就删除C盘至H盘内所有文件。为了使算量软件在运行时可以执行该恶意代码，浦加志还在主执行程序里添加了调用该函数的代码。此外，浦加志在另一款报表软件内编写了类似恶意代码的函数。<br/><br/>　　当年9月，浦加志从公司辞职。与此同时，公司开始公开销售算量软件，并在网上提供报表软件的免费下载。不料，全国多家单位和个人在使用软件后，计算机内数据和应用程序被恶意删除。公司为恢复客户电脑中被删除的数据花费了20余万元，但仍有部分客户电脑数据无法恢复。<br/><br/>　　去年8月，浦加志向公安机关投案自首。今年4月，一审法院以破坏计算机信息系统罪判处浦加志有期徒刑2年6个月。浦加志不服，上诉称自己为给计算机杀毒才编写相关代码植入两款软件，因忘记删除而造成损失，但该损失可以弥补，原审量刑过重。<br/><br/>　　市二中院审理后认为，浦加志作为计算机软件开发领域从业人员，违背职业操守，故意制作计算机病毒程序植入其就职单位投入巨资研发的两款软件中，给单位造成经济损失，对单位产品信誉造成严重损害。原审法院所作判决事实清楚，证据确实、充分，定罪准确，量刑适当，程序合法，应予维持。 <br/>]]></description>
		</item>
		
			<item>
			<link>http://www.eeaoo.com/blog/article/60.htm</link>
			<title><![CDATA[博客的网络推广实战]]></title>
			<author>salacash1115@gmail.com(eeaoo)</author>
			<category><![CDATA[设计┇design]]></category>
			<pubDate>Tue,23 Jun 2009 10:29:43 +0800</pubDate>
			<guid>http://www.eeaoo.com/blog/default.asp?id=60</guid>
		<description><![CDATA[买广告位置，曝光率增加了，但到期撤掉后也没多少人知道你网站了。买网站链接，网站权重增加，但用户还是不太了解你的网站是做什么。怎么才能把网站的信息完整、高效、准确的传递到目标用户群呢?<br/><br/>　　群发风险<br/><br/>　　这时有人选择群发邮件，QQ群等疯狂的发布广告，但这样的确是费钱费时的事，虽然是软件在操作，但这样做不但不增加你网站的流量，甚至会造成用户对你网站的反感。这样强行发广告给用户的，就好比你手机收到一条广告信息，你不会仔细看就立即删除掉。同样你QQ邮件或者群里有什么广告信息，相信很多人也是无视的。如果这样的网站经常这样出现反而会引起用户的咒骂。<br/><br/>　　SEO优化<br/><br/>　　当然现在有很多人采用SEO，来获取流量、排名等。自己懂的做这个估计还比较不错，但还是免不了被K的风险，毕竟搜索引擎很讨厌有人当他们是白痴。而且不懂的做这个完求是自寻死路，有兴趣的也可以看看几个比较出名的SEO网站，嘴上在谈论怎么样优化的时候，而自己的网站也是被K的。这样带忽悠性质的估计有一些不懂网络的用户会被欺骗。虽然流量会来一些，但光靠搜索来的哪些用户，他们也是来来就走，因为他们并不了解你的网站。除非你的网站自身内容做得很强，能黏住用户，那样的站我觉得不需要推广，用户也会口碑帮你推广出去，这个就像大家经常看人家写的文章，觉得不错的就直接转载甚至推荐给自己的好朋友观看。<br/><br/>　　软文推广<br/><br/>　　这里就讲到如何用软文让用户既了解你的网站，并带来非常多的流量和增加网站的权重。聪明的人都会选择软广告，但很多人也讨厌软广告，那么软文到底是好还是坏呢?这个只能说是中性吧，因为质量比较差的软广告，用户肯定会骂反而会弄巧成拙。而质量好的软广告，用户不但能学到自己需要的一些知识，他们也愿意去帮你主动传播，在这方面马云做得很棒，例子很多相信在站长圈的人经常看到，我就不例举了。而且很多用户都喜欢在自己文章里面加个链接，对于一些质量不错的文章，转载率也是很高的，外链也的确会增加很多。在做软文推广，很多人不会写也没资源不知道怎么去做，这里可以购买A5博客联盟的推广服务，由于专栏作者写的，权威也高，用户看了也不会有一定的反感，毕竟他们写的文章都带了很多知识进去，用户能得到他们想要的，所以也乐于帮忙传播。毕竟好内容能吸引用户，也能让用户参与讨论的。<br/><br/>　　软硬结合<br/><br/>　　有了软文投放到那里呢?放到论坛会被删除，没效果。放到人家网站，收费太昂贵。那么估计有人会考虑到博客，这样的在国外已经很流行，博客推广和论坛的不同，论坛的容易被删除，而博客的不但不会被删除，文章的推荐还会得到一些用户的仔细观看，而且在文章中的还可以加一些链接带动网站的权重，网站也让更多人了解了，得到更多用户的追捧，当然这里我再说一下，文章质量。A5博客联盟的博客质量都很高，写作高手也很多，国内大型的IT专栏作者也有参与撰稿的，文章都是上门户报道的，所以质量是肯定得到到用户的认可的。而且博客文章里面可以随意的增加几个外链，和单纯的购买链接相比这个更划算，不但增加外链，用户也会更加了解你的网站。<br/><br/>　　博客案例<br/><br/>　　广州的服装网站，一个在搜索引擎里面一点排名都没有，也没什么人气，无法将用户转换成有价值的消费用户，于是花钱让我们帮忙推广一下。大家一起策划讨论了一下，因为他的网站只有用户下了订单他才有盈利的，所以我们就帮他增加网站曝光率和自身权重的情况下，多在一些购物、电子商务、本地等相关的论坛进行推广宣传，毕竟真正需要消费的用户都存在在这些论坛中，软广告加我们的硬实力的结合，现在他一个星期就收回成本了，而且这个和传统的广告不一样，因为这些内容将永远存在互联网上。新用户还会有更多，而他只需要认真做好自身的网站，那么他就可以黏住更多老顾客。<br/><br/>]]></description>
		</item>
		
			<item>
			<link>http://www.eeaoo.com/blog/article/44.htm</link>
			<title><![CDATA[世界CSS设计大赛获奖网站]]></title>
			<author>salacash1115@gmail.com(eeaoo)</author>
			<category><![CDATA[设计┇design]]></category>
			<pubDate>Thu,09 Aug 2007 14:30:01 +0800</pubDate>
			<guid>http://www.eeaoo.com/blog/default.asp?id=44</guid>
		<description><![CDATA[<img alt="" src="http://www.kidcomic.net/pjblog/banner/1.gif" border="0" /><br /><br />一流的CSS编写水准,完全的绿色代码,对于从事于CSS编写的朋友很有参考意义,希望能够从中学到点东西哈~好好研究会受益非浅的. <br /><br />Site of the Year<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Winner: <a href="http://www.uxmag.com/" target="_blank">UX Magazine </a><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2nd.- <a href="http://veerle.duoh.com/" target="_blank">Veerle's Blog 2.0</a><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3rd.- <a href="http://www.thinkvitamin.com/" target="_blank">Vitamin</a><br /><br />Associations<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Winner: <a href="http://research.history.org/pf/" target="_blank">Principles of Freedom</a><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2nd.- <a href="http://www.wpine.org/" target="_blank">White Pine Montessori</a><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3rd.- <a href="http://www.dalitnetwork.org/" target="_blank">Dalit Freedom Network</a><br /><br />Blogging<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Winner: <a href="http://www.simplebits.com/" target="_blank">Simple Bits</a><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2nd.- <a href="http://veerle.duoh.com/" target="_blank">Veerle's Blog 2.0</a><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3rd.- <a href="http://www.powazek.com/" target="_blank">This is Powacek</a><br /><br />Business<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Winner: T<a href="http://www.thecity.org/" target="_blank">he City Church</a><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2nd.- <a href="http://www.thinkvitamin.com/" target="_blank">Vitamin</a><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3rd.- <a href="http://www.concept4u.com/" target="_blank">Concept Technical Group</a><br /><br />Entertainment<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Winner: <a href="http://www.zokacoffee.com/" target="_blank">Zoka Coffee</a><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2nd.- <a href="http://www.napster.com/" target="_blank">Napster</a><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3rd.- <a href="http://www.decadesrocklive.com/" target="_blank">Decades Rock Live</a><br /><br />Institutions<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Winner: <a href="http://www.thecity.org/" target="_blank">The City Church</a><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2nd.- <a href="http://www.londonpainconsultants.com/" target="_blank">London Pain Consultants</a><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3rd.- <a href="http://www.reductostart.ro/" target="_blank">Reductostart</a><br /><br />Media<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Winner: <a href="http://www.uxmag.com/" target="_blank">UX Magazine</a><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2nd.- <a href="http://www.decibelmagazine.com/" target="_blank">Decibel Magazine</a><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3rd.- <a href="http://www.thinkvitamin.com/" target="_blank">Vitamin</a><br /><br />Portal<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Winner: <a href="http://www.cssbeauty.com/" target="_blank">CSS Beauty</a><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2nd.- <a href="http://www.rollyo.com/" target="_blank">Rollyo</a><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3rd.- <a href="http://www.download.com/" target="_blank">Download</a><br /><br />Web Design (Companies and Portfolios)<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Winner: <a href="http://www.simplebits.com/" target="_blank">Simple Bits</a><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2nd.- <a href="http://www.gr0w.com/" target="_blank">Gr0w</a><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3rd.- <a href="http://www.timowuerz.com/" target="_blank">Timo Wuerz</a><br /><br />Web Tools<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Winner: <a href="http://www.haveamint.com/" target="_blank">Have a Mint</a><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2nd.- <a href="http://www.ning.com/" target="_blank">Ning</a><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3rd.- <a href="http://www.slideshowpro.net/" target="_blank">Slideshowpro</a> <br /><br /><br />
<div>&nbsp;</div>]]></description>
		</item>
		
			<item>
			<link>http://www.eeaoo.com/blog/article/39.htm</link>
			<title><![CDATA[Flash中声音的压缩与效果处理]]></title>
			<author>salacash1115@gmail.com(eeaoo)</author>
			<category><![CDATA[设计┇design]]></category>
			<pubDate>Fri,29 Jun 2007 11:18:25 +0800</pubDate>
			<guid>http://www.eeaoo.com/blog/default.asp?id=39</guid>
		<description><![CDATA[在Flash中加入声音可以极大地丰富动画的表现效果，但如果我们辛辛苦苦编辑好的声音不能很好地与动画衔接，或者声音文件太大影响了Flash的运行速度，效果就会大打折扣。那么如何使Flash中的声音获得最佳效果呢？下面我们一起来探讨这个问题。<br/><br/>　　一、声音文件在Flash中的压缩<br/><br/>　　当我们将Flash文件导入到网页中时，由于网络速度的限制，我们不得不考虑Flash动画的大小，特别是带有声音的Flash动画。有什么办法在既不影响动画效果的同时又能减小数据量呢？一个可行的方法就是利用声音压缩，效果非常明显。<br/><br/>　　将声音文件导入Flash中，双击组件库中的声音文件，弹出声音属性对话框（图1）。<br/><br/>　　Flash MX为我们提供了四种不同的声音压缩格式：ADPCM、MP3、Raw和Speech格式。选择相应的压缩格式，便可进行压缩。在各种格式中对声音压缩的等级不同，生成的声音文件的质量和大小也不同。要达到最佳效果，就要根据需要反复进行不同的实验，找出最合适的压缩率。<br/><br/>　　1、ADPCM压缩<br/><br/>　　“ADPCM”压缩选项用于8位或16位声音数据的压缩设置。像点击音这样的短事件声音，一般选用“ADPCM”压缩，如图2所示。<br/><br/>　　“预处理”：选择“转换立体声成单声”将混合立体声转换为单音（非立体声）。<br/><br/>　　“采样比率” 选项用以控制文件的饱真度和文件大小。较低的采样率可减小文件，但也会降低声音品质。Flash不能提高导入声音的采样率。如果导入的音频为11kHz声音，就算你将它设置为22kHz，也只是11kHz的输出效果。“比率”选项如下：<br/><br/>　　5kHz的采样率仅能达到人们讲话的声音质量。<br/>　　11kHz的采样率是播放小段声音的最低标准，是CD音质的四分之一。<br/>　　22kHz采样率的声音可以达到CD音质的一半，目前大多数网站都选用这样的采样率。<br/>　　44kHz的采样率是标准的CD音质，可以达到很好的听觉效果。<br/><br/>　　2、MP3压缩<br/><br/>　　通过“MP3”压缩选项可以用MP3格式输出声音。当导出乐曲等较长的音频流时，建议选用“MP3”选项（图3）。<br/><br/>　　对于比特率，用于决定导出的声音文件每秒播放的位数。Flash支持8Kbps到160Kbps CBR（恒定比特率）。当导出声音时，需要将比特率设为16 Kbps或更高，以获得最佳效果。<br/><br/>　　“品质”选项用以确定压缩速度和声音质量。<br/>　　“快速”可以使声音速度加快而使声音质量降低。<br/>　　“中”可以获得稍微慢一些的压缩速度和高一些的声音质量；<br/>　　“最佳”可以获得最慢的压缩速度和最高的声音质量。<br/><br/>　　3、Raw（原始）压缩和Speech（语音）压缩<br/><br/>　　原始压缩选项导出的声音文件是不经过压缩的。语音压缩选项使用一个特别适合于语音的压缩方式导出声音。笔者建议对语音使用11KHz比率。<br/><br/>　　二、声音效果的编辑<br/><br/>　　声音文件在成功导入到动画后，可以依据需要，编辑声音效果。在“属性”面板中，Flash为我们提供了一些常用的声音效果（图4）。选择相应的选项即可实现相应的效果，如果我们要给一段片头动画配音，需要声音慢慢增强，只需选择效果下拉菜单中的“淡入”命令。<br/><br/>　　选中“无”选项：表示不对声音文件应用效果。选用这个选项将删除以前应用的效果。<br/><br/>　　如果我们对这些常用效果不满意的话，我们还可以运用“自定义”选项来自己编辑。下面以“淡入淡出”效果为例，谈谈具体运用。<br/><br/>　　单击“自定义”或“编辑”按钮，弹出编辑窗口，在面板下面，Flash为我们提供了一些简单的辅助工具。缩放工具“+”“-”用来对波形图进行缩放，它的旁边是秒和帧按钮，这两个按钮决定在显示波形图时横坐标是“时间”还是“影格”（图5）。<br/><br/>　　根据你自己的需要，先用缩放工具将波形图缩放至合适的大小，将左侧两个小方块（调节手柄）拖至左下方（将音量设为最小），然后在线上分别点击创建调节手柄，并拖至最高处（将音量设为最大），注意与第一个调节手柄保持一定斜度，淡入效果就出来了，再在音量线上创建最高调节手柄和最底调节手柄（图6）。这样淡入淡出效果便完成了，是不是很方便？别忘了点击播放按钮来欣赏一下你自己的编辑效果。<br/><br/>　　在声音属性面板中，我们还可以对声音的“同步”类型及“循环次数”进行编辑（图7）。<br/><br/>　　“事件”选项会将声音和一个事件的发生过程全部同步起来。如果触发了播放声音的事件，它会自动播放直至结束，在这个过程中声音的停止不受动画本身的制约。例如我们在Flash中制作了一个声音播放按钮，如果事件声音正在播放，而再次点击，第一个实例继续播放，另一个声音实例同时开始播放。<br/><br/>　　“开始”选项和“事件”选项一样，只是如果声音正在播放，就不会播放新的声音实例。<br/><br/>　　“停止”选项可以使指定的声音静音（图8）。我们向影片第一帧导入声音，在50帧处创建关键帧，选择要停止的声音，在“同步”选项中选择“停止”，则声音在播放到50帧时停止播放。<br/><br/>　　“数据流”用于在互联网上同步播放声音。Flash会协调动画与声音流，使动画与声音同步。如果Flash显示动画帧的速度不够快，Flash会自动跳过一些帧。与事件声音不同的是，如果声音过长而动画过短，声音流将随着动画的结束而停止播放。在播放影片时，声音流是混合在一起播放的。<br/><br/>　　在图片右侧循环处填上一个特定的值，可使声音按照特定的次数播放。例如，要循环播放一首15秒长的歌曲90秒，输入6即可。]]></description>
		</item>
		
			<item>
			<link>http://www.eeaoo.com/blog/article/38.htm</link>
			<title><![CDATA[Flash中如何显示清晰的字体]]></title>
			<author>salacash1115@gmail.com(eeaoo)</author>
			<category><![CDATA[设计┇design]]></category>
			<pubDate>Fri,29 Jun 2007 11:17:11 +0800</pubDate>
			<guid>http://www.eeaoo.com/blog/default.asp?id=38</guid>
		<description><![CDATA[Flash显示静态文本的时候，文字显得很模糊，中间甚至粘成一块<br/>解决的办法有3个<br/><br/>1) 使用设备字体<br/><br/>当你在Flash中使用静态文本的时候，Flash会插入字体轮廓信息，并进行抗锯齿处理<br/>所以轮廓会显得很模糊<br/><br/>使用设备字体后，Flash不再插入字体轮廓信息，<br/>只是在客户端播放时调用客户端的字体信息，也不会进行抗锯齿处理，<br/>这样的做结果有：<br/><br/>a. 字体在12pt以下时很清晰，但在比较大（大约18pt以上）时有明显的锯齿<br/><br/>b. 如果客户端不存在相应的字体，则显示会出现预料外的情况，肯定不是你希望的字体就是了<br/><br/>所以使用的字体一定要通用才行<br/><br/>c. Flash对与设备字体无法进行常规的时间线遮罩，需要用setMask命令，参见：<br/>Flash MX 2004 中的文本遮罩<br/><br/>d. 在Flash的编辑状态下，看不出区别，需要导出后才能见到效果。总是有急性子的朋友抱怨说没效果，后来证实是没有按ctrl+Enter，汗<br/><br/>【补充】：<br/><br/>a) Flash 包括三种设备字体： _sans（类似于 Helvetica 或 Arial 字体）、_serif（类似于 Times Roman 字体）和 _typewriter（类似于 Courier 字体）。<br/>你也可以自定义，方法是把文本框属性面板上的“使用设备字体(use device font)”选项勾上<br/><br/>b) 动态文本和输入文本默认是使用设备字体的，所以通常看起来，他们比较清晰<br/>如果你的需要刚好相反，那么就要用到嵌入字体。<br/>方法：<br/>点击属性面板上的“字符(characters)&#34;按钮，<br/><br/>然后看到一个对话框，选择相应的选项即可<br/><br/><br/>【注意】英文字体一般比较小，完全嵌入也不会让swf增大多少。但是中文字体就完全不一样了，千万不要全部嵌入，只要嵌入需要的字符就行了，否则文件肯定以MB计算。<br/>嵌入字体以后，即便是没有安装该字体的机子，也能看到预期的效果<br/><br/>2) 使用锯齿文字工具<br/><br/>使用设备字体让文字清晰是可以，但是有那么多不方便的地方，总是不太舒服<br/>Flash MX 2004中文本属性面板上出现了一个新鲜的东西：锯齿文字<br/>点击这个按钮以后，即使在编辑状态下，也能看到字体变得清晰了<br/>而且在没有安装该字体的电脑上也能正常显示<br/>这让文字的工作变得非常轻松，尤其是象素字体<br/>以前总是担心不清晰，而且不通用，用嵌入字体后并不是每种字体都依旧清晰。现在只用这个工具就搞定了。<br/>关于锯齿文字工具就不多说了，需要注意的是，文字会有一定幅度的“下沉”，可能有时候一个字只有上半部分显示出来了。没多大关系，把文本框拉大一点就行了。<br/><br/>3) 使用位图<br/><br/>用Photoshop之类的图像处理软件做，然后输出透明GIF或PNG，最后导入到Flash中<br/>在Flash的库中，将位图的属性设置一下，取消“允许平滑”选项<br/>这个方法略显麻烦，不怎么常用。但是如果考虑到结合一些修饰、特效，还是比较方便的<br/>比如用Photoshop给文字添加阴影，然后导出透明PNG给Flash<br/>]]></description>
		</item>
		
			<item>
			<link>http://www.eeaoo.com/blog/article/37.htm</link>
			<title><![CDATA[flash按钮弹出固定大小窗口全面解析]]></title>
			<author>salacash1115@gmail.com(eeaoo)</author>
			<category><![CDATA[设计┇design]]></category>
			<pubDate>Fri,29 Jun 2007 11:15:26 +0800</pubDate>
			<guid>http://www.eeaoo.com/blog/default.asp?id=37</guid>
		<description><![CDATA[on (release) {<br/>getURL (&#34;javascript :MM_openBrWindow(‘URL’，&#39;WindowName&#39;,&#39;Width,Height,Tool <br/><br/>bar,Menu bar,Location bar,Scroll bar,Status bar,Resizable&#39;)&#34;);<br/>} <br/><br/>具体参数设置如下:<br/>URL -&gt; 弹出新窗口的页面地址<br/>Width -&gt; 窗口宽度<br/>Height -&gt; 窗口高度<br/>Name -&gt; 窗口名<br/><br/>以下等于0即否定!<br/>Tool bar -&gt; 是否需要工具栏<br/>Menu bar -&gt; ........菜单栏<br/>Location bar -&gt; ....地址栏<br/>Scroll bar －&gt; .....滚动条<br/>Status bar -&gt; ......状态栏<br/>Resizable -&gt; 是否可以改变大小 <br/><br/><br/>在HTML页面的&lt;head&gt;...&lt;/head&gt;之间加入下面的javascript代码. <br/>&lt;script language=&#34;javascript&#34;&gt; <br/>&lt;!-- <br/>function MM_openBrWindow(theURL,winName,features) { //v2.0 <br/>window.open(theURL,winName,features); <br/>} <br/>//--&gt; <br/>&lt;/script&gt; <br/>]]></description>
		</item>
		
			<item>
			<link>http://www.eeaoo.com/blog/article/36.htm</link>
			<title><![CDATA[[风格教程]PHPwind Forums 5.3 官方风格CSS说明]]></title>
			<author>salacash1115@gmail.com(eeaoo)</author>
			<category><![CDATA[设计┇design]]></category>
			<pubDate>Tue,19 Jun 2007 18:35:59 +0800</pubDate>
			<guid>http://www.eeaoo.com/blog/default.asp?id=36</guid>
		<description><![CDATA[一、PHPwind Forums 5.3 的独特模板设计，几个好处： <br/>1、大框架采用div+css构架，提高网页浏览速度； <br/>2、Table后加上,提高表格的加载速度； <br/>3、标题用H2，TH等标签，提高搜索引擎的收录； <br/>4、 色调变量更趋完善，在后台修改配色即可产生新风格。 <br/><br/>二、风格制作流程： <br/>1、风格主要有三个目录，image/wind 图片包，template/wind 代码包，data/style/wind.php 变量配置 <br/>将这二个文件包及一个PHP变量配置文件复制一份，然后将名字修改成自己所要的风格名称，同时在配置文件里将$stylepath = &#39;wind&#39;;（风格路径） $tplpath = &#39;wind&#39;; （图片路径）改成您的风格路径。 <br/>注：代码包只需放改过的页面即可，未修改过的将调用wind里的页面。 <br/>2、修改代码和相应的图片即可。 <br/>三、PWF 5.3模板分区命名图： <br/><br/>样式在Template/wind/header.htm <br/><br/>图一:<br/><br/><img src="http://www.eeaoo.com/blog/attachments/month_0706/q200761918329.gif" border="0" alt=""/><br/><br/>图二:<br/><br/><img src="http://www.eeaoo.com/blog/attachments/month_0706/02007619183314.gif" border="0" alt=""/><br/><br/><br/>.toptool　　 顶端自定义导航样式 <br/>.guide　　　 导航栏样式 <br/>.t 　　　　 为表格外边框样式，表格外边框颜色在此设置 <br/>.h 　　　　 为表格正标题栏样式，设置背景颜色，边框样式，字体样式 <br/>.tr2 　　　 为副标题栏样式，即原.cbg样式，可使用背景图片等css样式 <br/>.f9--.f14　&nbsp;&nbsp;为字体大小控制，不建议修改 <br/>.s1--.s5　　 细节字体颜色 <br/>.gray　　　 次要文字颜色 <br/>h2　　　　　首页板块列表(index.php)板块名称样式 <br/>h3　　　　　主题列表页文章标题名称样式 <br/>h4&nbsp;&nbsp;&nbsp;&nbsp;为帖子标题的字体大小 <br/>.tpc_content 帖子内容样式 <br/>blockquote&nbsp;&nbsp;引用内容样式 <br/>.pages&nbsp;&nbsp;翻页模块样式，建议只修改颜色 <br/>.menu td与.menu li 下拉菜单内容背景色 <br/>.f_one,.f_two, 板块列表(首页)表格背景 <br/>.t_one,.t_two, 主题列表(thread.php)表格背景 <br/>.r_one,.r_two, 帖子页面(read.php)表格背景 <br/>.btn&nbsp;&nbsp;按钮样式 <br/>.input,textarea 输入框样式 <br/><br/><br/><img src="http://www.eeaoo.com/blog/attachments/month_0706/d2007619183520.jpg" border="0" alt=""/><br/><img src="http://www.eeaoo.com/blog/attachments/month_0706/n2007619183529.jpg" border="0" alt=""/><br/><img src="http://www.eeaoo.com/blog/attachments/month_0706/o2007619183539.jpg" border="0" alt=""/><br/><img src="http://www.eeaoo.com/blog/attachments/month_0706/i2007619184047.jpg" border="0" alt=""/><br/><img src="http://www.eeaoo.com/blog/attachments/month_0706/22007619183555.jpg" border="0" alt=""/><br/><img src="http://www.eeaoo.com/blog/attachments/month_0706/n2007619183849.jpg" border="0" alt=""/><br/><img src="http://www.eeaoo.com/blog/attachments/month_0706/s2007619183629.jpg" border="0" alt=""/><br/>]]></description>
		</item>
		
			<item>
			<link>http://www.eeaoo.com/blog/article/31.htm</link>
			<title><![CDATA[各种样式的表格边框]]></title>
			<author>salacash1115@gmail.com(eeaoo)</author>
			<category><![CDATA[设计┇design]]></category>
			<pubDate>Mon,04 Jun 2007 20:06:41 +0800</pubDate>
			<guid>http://www.eeaoo.com/blog/default.asp?id=31</guid>
		<description><![CDATA[<div style="OVERFLOW: hidden; WIDTH: 570px" twffan="done">
<table height="30" cellspacing="0" cellpadding="0" width="100%" border="0">
    <tbody>
        <tr>
            <td><b>三、表格边框</b></td>
        </tr>
    </tbody>
</table>
<table cellspacing="0" cellpadding="8" width="100%" bgcolor="#003300" border="0" class="t">
    <tbody>
        <tr valign="top">
            <td width="47%">
            <table cellspacing="0" cellpadding="0" width="200" border="1">
                <tbody>
                    <tr align="center">
                        <td>普</td>
                        <td>表</td>
                    </tr>
                    <tr align="center">
                        <td>通</td>
                        <td>格</td>
                    </tr>
                </tbody>
            </table>
            这是一普通的表格</td>
            <td width="53%"><textarea rows="4" cols="40" name="textfield">&lt;table border=&quot;1&quot; width=&quot;200&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;&gt;
            &lt;tr align=&quot;center&quot;&gt;
            &lt;td&gt;普&lt;/td&gt;
            &lt;td&gt;表&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr align=&quot;center&quot;&gt;
            &lt;td&gt;通&lt;/td&gt;
            &lt;td&gt;格&lt;/td&gt;
            &lt;/tr&gt;
            &lt;/table&gt;</textarea> </td>
        </tr>
        <tr valign="top">
            <td>
            <table cellspacing="1" cellpadding="0" width="200" bgcolor="#000000" border="0">
                <tbody>
                    <tr align="center" bgcolor="#ffffff">
                        <td bgcolor="#ffffff">细</td>
                        <td bgcolor="#ffffff">表</td>
                    </tr>
                    <tr align="center" bgcolor="#ffffff">
                        <td bgcolor="#ffffff">线</td>
                        <td bgcolor="#ffffff">格</td>
                    </tr>
                </tbody>
            </table>
            表格加上了漂亮的细线<br />(利用cellspacing1像素间隙和表格与单元格背景的不同)</td>
            <td><textarea rows="4" cols="40" name="textarea">&lt;table border=&quot;0&quot; width=&quot;200&quot; cellspacing=&quot;1&quot; cellpadding=&quot;0&quot; bgcolor=&quot;#000000&quot; &gt;
            &lt;tr align=&quot;center&quot; bgcolor=&quot;#FFFFFF&quot;&gt;
            &lt;td bgcolor=&quot;#FFFFFF&quot;&gt;细&lt;/td&gt;
            &lt;td bgcolor=&quot;#FFFFFF&quot;&gt;表&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr align=&quot;center&quot; bgcolor=&quot;#FFFFFF&quot;&gt;
            &lt;td bgcolor=&quot;#FFFFFF&quot;&gt;线&lt;/td&gt;
            &lt;td bgcolor=&quot;#FFFFFF&quot;&gt;格&lt;/td&gt;
            &lt;/tr&gt;
            &lt;/table&gt;</textarea> </td>
        </tr>
        <tr valign="top">
            <td>
            <table cellspacing="0" cellpadding="0" width="200">
                <tbody>
                    <tr align="center">
                        <td style="BORDER-RIGHT: rgb(0,0,0) 1px groove; BORDER-TOP: rgb(0,0,0) 1px groove; BORDER-LEFT: rgb(0,0,0) 1px groove; BORDER-BOTTOM: rgb(0,0,0) 1px groove">细</td>
                        <td style="BORDER-RIGHT: rgb(0,0,0) 1px groove; BORDER-TOP: rgb(0,0,0) 1px groove; BORDER-BOTTOM: rgb(0,0,0) 1px groove">表</td>
                    </tr>
                    <tr align="center">
                        <td style="BORDER-RIGHT: rgb(0,0,0) 1px groove; BORDER-LEFT: rgb(0,0,0) 1px groove; BORDER-BOTTOM: rgb(0,0,0) 1px groove">线</td>
                        <td style="BORDER-RIGHT: rgb(0,0,0) 1px groove; BORDER-BOTTOM: rgb(0,0,0) 1px groove">格</td>
                    </tr>
                </tbody>
            </table>
            这和上面那个可不一样，它用的是CSS，效果却一样。<br />(对单元格border的定义)</td>
            <td><textarea rows="4" cols="40" name="textarea2">&lt;table width=&quot;200&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;&gt;
            &lt;tr align=&quot;center&quot;&gt;
            &lt;td style=&quot;BORDER-top: rgb(0,0,0) 1px groove; BORDER-bottom: rgb(0,0,0) 1px groove; BORDER-left: rgb(0,0,0) 1px groove; BORDER-right: rgb(0,0,0) 1px groove&quot;&gt;细&lt;/td&gt;
            &lt;td style=&quot;BORDER-top: rgb(0,0,0) 1px groove; BORDER-bottom: rgb(0,0,0) 1px groove; BORDER-right: rgb(0,0,0) 1px groove&quot;&gt;表&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr align=&quot;center&quot;&gt;
            &lt;td style=&quot;BORDER-bottom: rgb(0,0,0) 1px groove; BORDER-left: rgb(0,0,0) 1px groove; BORDER-right: rgb(0,0,0) 1px groove&quot;&gt;线&lt;/td&gt;
            &lt;td style=&quot;BORDER-bottom: rgb(0,0,0) 1px groove; BORDER-right: rgb(0,0,0) 1px groove&quot;&gt;格&lt;/td&gt;
            &lt;/tr&gt;
            &lt;/table&gt;</textarea> </td>
        </tr>
        <tr valign="top">
            <td>
            <table cellspacing="0" cellpadding="0" width="200">
                <tbody>
                    <tr align="center">
                        <td style="BORDER-RIGHT: rgb(0,0,0) 1px dotted; BORDER-TOP: rgb(0,0,0) 1px dotted; BORDER-LEFT: rgb(0,0,0) 1px dotted; BORDER-BOTTOM: rgb(0,0,0) 1px dotted">细</td>
                        <td style="BORDER-RIGHT: rgb(0,0,0) 1px dotted; BORDER-TOP: rgb(0,0,0) 1px dotted; BORDER-BOTTOM: rgb(0,0,0) 1px dotted">表</td>
                    </tr>
                    <tr align="center">
                        <td style="BORDER-RIGHT: rgb(0,0,0) 1px dotted; BORDER-LEFT: rgb(0,0,0) 1px dotted; BORDER-BOTTOM: rgb(0,0,0) 1px dotted">线</td>
                        <td style="BORDER-RIGHT: rgb(0,0,0) 1px dotted; BORDER-BOTTOM: rgb(0,0,0) 1px dotted">格</td>
                    </tr>
                </tbody>
            </table>
            再进一步，把边框变成虚线，同样是CSS的神奇作用。</td>
            <td><textarea rows="4" cols="40" name="textarea2">&lt;table width=&quot;200&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;&gt;
            &lt;tr align=&quot;center&quot;&gt;
            &lt;td style=&quot;BORDER-top: rgb(0,0,0) 1px dotted; BORDER-bottom: rgb(0,0,0) 1px dotted; BORDER-left: rgb(0,0,0) 1px dotted; BORDER-right: rgb(0,0,0) 1px dotted&quot;&gt;细&lt;/td&gt;
            &lt;td style=&quot;BORDER-top: rgb(0,0,0) 1px dotted; BORDER-bottom: rgb(0,0,0) 1px dotted; BORDER-right: rgb(0,0,0) 1px dotted&quot;&gt;表&lt;/td&gt;
            &lt;/tr&gt;
            &lt;td style=&quot;BORDER-bottom: rgb(0,0,0) 1px dotted; BORDER-left: rgb(0,0,0) 1px dotted; BORDER-right: rgb(0,0,0) 1px dotted&quot;&gt;线&lt;/td&gt;
            &lt;td style=&quot;BORDER-bottom: rgb(0,0,0) 1px dotted; BORDER-right: rgb(0,0,0) 1px dotted&quot;&gt;格&lt;/td&gt;
            &lt;/tr&gt;
            &lt;/table&gt;</textarea> </td>
        </tr>
        <tr valign="top">
            <td>
            <table cellspacing="2" cellpadding="0" width="200" border="0">
                <tbody>
                    <tr>
                        <td>
                        <table cellspacing="1" cellpadding="0" width="100%" bgcolor="#000000" border="0">
                            <tbody>
                                <tr>
                                    <td bgcolor="#ffffff">&nbsp;</td>
                                </tr>
                            </tbody>
                        </table>
                        </td>
                        <td>
                        <table cellspacing="1" cellpadding="0" width="100%" bgcolor="#000000" border="0">
                            <tbody>
                                <tr>
                                    <td bgcolor="#ffffff">&nbsp;</td>
                                </tr>
                            </tbody>
                        </table>
                        </td>
                    </tr>
                    <tr>
                        <td>
                        <table cellspacing="1" cellpadding="0" width="100%" bgcolor="#000000" border="0">
                            <tbody>
                                <tr>
                                    <td bgcolor="#ffffff">&nbsp;</td>
                                </tr>
                            </tbody>
                        </table>
                        </td>
                        <td>
                        <table cellspacing="1" cellpadding="0" width="100%" bgcolor="#000000" border="0">
                            <tbody>
                                <tr>
                                    <td bgcolor="#ffffff">&nbsp;</td>
                                </tr>
                            </tbody>
                        </table>
                        </td>
                    </tr>
                </tbody>
            </table>
            细线表格的扩展应用，奥妙就是在第个单元格中再套入一个表格。</td>
            <td><textarea rows="4" cols="40" name="textarea3">&lt;table width=&quot;200&quot; border=&quot;0&quot; cellspacing=&quot;2&quot; cellpadding=&quot;0&quot;&gt;
            &lt;tr&gt;
            &lt;td&gt;
            &lt;table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;1&quot; cellpadding=&quot;0&quot; bgcolor=&quot;#000000&quot;&gt;
            &lt;tr&gt;
            &lt;td bgcolor=&quot;#FFFFFF&quot;&gt;&nbsp;&lt;/td&gt;
            &lt;/tr&gt;
            &lt;/table&gt;
            &lt;/td&gt;
            &lt;td&gt;
            &lt;table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;1&quot; cellpadding=&quot;0&quot; bgcolor=&quot;#000000&quot;&gt;
            &lt;tr&gt;
            &lt;td bgcolor=&quot;#FFFFFF&quot;&gt;&nbsp;&lt;/td&gt;
            &lt;/tr&gt;
            &lt;/table&gt;
            &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
            &lt;td&gt;
            &lt;table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;1&quot; cellpadding=&quot;0&quot; bgcolor=&quot;#000000&quot;&gt;
            &lt;tr&gt;
            &lt;td bgcolor=&quot;#FFFFFF&quot;&gt;&nbsp;&lt;/td&gt;
            &lt;/tr&gt;
            &lt;/table&gt;
            &lt;/td&gt;
            &lt;td&gt;
            &lt;table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;1&quot; cellpadding=&quot;0&quot; bgcolor=&quot;#000000&quot;&gt;
            &lt;tr&gt;
            &lt;td bgcolor=&quot;#FFFFFF&quot;&gt;&nbsp;&lt;/td&gt;
            &lt;/tr&gt;
            &lt;/table&gt;
            &lt;/td&gt;
            &lt;/tr&gt;
            &lt;/table&gt;</textarea> </td>
        </tr>
        <tr valign="top">
            <td>
            <table cellspacing="0" bordercolordark="#ffffff" cellpadding="0" width="200" bordercolorlight="#ffffff" border="1">
                <tbody>
                    <tr align="center">
                        <td bordercolorlight="#000000" bgcolor="#b7b7b7" bordercolordark="#eeeeee">立</td>
                        <td bordercolorlight="#000000" bgcolor="#b7b7b7" bordercolordark="#eeeeee">表</td>
                    </tr>
                    <tr align="center">
                        <td bordercolorlight="#000000" bgcolor="#b7b7b7" bordercolordark="#eeeeee">体</td>
                        <td bordercolorlight="#000000" bgcolor="#b7b7b7" bordercolordark="#eeeeee">格</td>
                    </tr>
                </tbody>
            </table>
            立体感的表格<br />(简单的亮暗边框设置，注意只有IE支持这种效果)</td>
            <td><textarea rows="4" cols="40" name="textarea4">&lt;table border=&quot;1&quot; bordercolorlight=&quot;#ffffff&quot; bordercolordark=&quot;#ffffff&quot; width=&quot;200&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;&gt;
            &lt;tr align=&quot;center&quot;&gt;
            &lt;td bgcolor=&quot;#B7B7B7&quot;
            bordercolorlight=&quot;#000000&quot; bordercolordark=&quot;#eeeeee&quot; &gt;立&lt;/td&gt;
            &lt;td bgcolor=&quot;#B7B7B7&quot;
            bordercolorlight=&quot;#000000&quot; bordercolordark=&quot;#eeeeee&quot; &gt;表&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr align=&quot;center&quot;&gt;
            &lt;td bgcolor=&quot;#B7B7B7&quot;
            bordercolorlight=&quot;#000000&quot; bordercolordark=&quot;#eeeeee&quot; &gt;体&lt;/td&gt;
            &lt;td bgcolor=&quot;#B7B7B7&quot;
            bordercolorlight=&quot;#000000&quot; bordercolordark=&quot;#eeeeee&quot; &gt;格&lt;/td&gt;
            &lt;/tr&gt;
            &lt;/table&gt;</textarea> </td>
        </tr>
        <tr valign="top">
            <td>
            <table cellspacing="0" cellpadding="0" width="200">
                <tbody>
                    <tr>
                        <td><fieldset style="WIDTH: 200px" align="center"><legend>无名表格 </legend>
                        <p align="right">&nbsp;</p>
                        </fieldset></td>
                    </tr>
                </tbody>
            </table>
            给表格加上一个表头<br />(应用&lt;fieldset&gt;和&lt;/legend&gt;标签)</td>
            <td><textarea rows="4" cols="40" name="textarea5">&lt;table width=&quot;200&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;&gt;
            &lt;tr&gt;
            &lt;td&gt;&lt;fieldset style=&quot;width:200&quot; align=&quot;center&quot;&gt; &lt;legend&gt; 无名表格 &lt;/legend&gt;
            &lt;p align=&quot;right&quot;&gt;
            &lt;/fieldset&gt;&lt;/td&gt;
            &lt;/tr&gt;
            &lt;/table&gt;</textarea> </td>
        </tr>
        <tr valign="top">
            <td>
            <table cellspacing="0" cellpadding="0" width="200">
                <tbody>
                    <tr>
                        <td><fieldset style="WIDTH: 200px; COLOR: #b7b7b7; BORDER-TOP-STYLE: groove; BORDER-RIGHT-STYLE: groove; BORDER-LEFT-STYLE: groove; BORDER-BOTTOM-STYLE: groove" align="center"><legend style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; COLOR: blue; BORDER-BOTTOM: #000000 1px solid">表中表效果Ⅰ</legend><br /></fieldset></td>
                    </tr>
                </tbody>
            </table>
            给表头再加个框<br />(用CSS为&lt;legnd&gt;定义一个边框)</td>
            <td><textarea rows="4" cols="40" name="textarea6">&lt;table width=&quot;200&quot;&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;&gt;
            &lt;tr&gt;
            &lt;td&gt;
            &lt;fieldset style=&quot;width: 200; color: #B7B7B7; border-style: groove&quot; align=&quot;center&quot;&gt;
            &lt;legend style=&quot;color: blue; border: 1 solid #000000&quot;&gt; 表中表效果Ⅰ&lt;/legend&gt;
            &lt;br&gt;
            &lt;/fieldset&gt;
            &lt;/td&gt;
            &lt;/tr&gt;
            &lt;/table&gt;</textarea> </td>
        </tr>
        <tr valign="top">
            <td>
            <table width="200">
                <tbody>
                    <tr>
                        <td><fieldset style="WIDTH: 200px" align="center"><legend>
                        <table style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid" height="20" cellspacing="1" cellpadding="0" width="80">
                            <tbody>
                                <tr>
                                    <td><font color="#0000ff">表中表效果Ⅱ</font></td>
                                </tr>
                            </tbody>
                        </table>
                        </legend><br /></fieldset></td>
                    </tr>
                </tbody>
            </table>
            看起来和上面的一样，可是这个才是真正的表中表哦。<br />(在&lt;legnd&gt;中插入一个表格)</td>
            <td><textarea rows="4" cols="40" name="textarea7">&lt;table width=&quot;200&quot;&gt;
            &lt;tr&gt;
            &lt;td&gt;&lt;fieldset style=&quot;width:200&quot; align=&quot;center&quot;&gt; &lt;legend&gt;
            &lt;table style=&quot;border: 1 solid #000000&quot; width=&quot;80&quot; cellspacing=&quot;1&quot; cellpadding=&quot;0&quot; height=&quot;20&quot;&gt;
            &lt;tr&gt;
            &lt;td&gt;&lt;font color=blue&gt;表中表效果Ⅱ&lt;/font&gt;&lt;/td&gt;
            &lt;/tr&gt;
            &lt;/table&gt;
            &lt;/legend&gt;&lt;br&gt;
            &lt;/fieldset&gt;
            &lt;/td&gt;
            &lt;/tr&gt;
            &lt;/table&gt;</textarea> </td>
        </tr>
        <tr>
            <td colspan="2"><hr color="#000000" size="1" /></td>
        </tr>
    </tbody>
</table>
</div>]]></description>
		</item>
		
			<item>
			<link>http://www.eeaoo.com/blog/article/29.htm</link>
			<title><![CDATA[制作玻璃墙后的人像特效]]></title>
			<author>salacash1115@gmail.com(eeaoo)</author>
			<category><![CDATA[设计┇design]]></category>
			<pubDate>Wed,30 May 2007 13:30:30 +0800</pubDate>
			<guid>http://www.eeaoo.com/blog/default.asp?id=29</guid>
		<description><![CDATA[将漂亮美眉的照片处理成玻璃后面的效果很有意思，如下面的几张图片。 <br/>很多朋友都在询问怎么做这种效果，我就写了制作步骤，做得比较马虎，大家掌握方法就好。 <br/><br/><img src="http://www.eeaoo.com/blog/attachments/month_0705/b1.jpg" border="0" alt=""/><br/><br/>方形玻璃砖 <br/><br/><img src="http://www.eeaoo.com/blog/attachments/month_0705/b2.jpg" border="0" alt=""/><br/><br/>花玻璃 <br/><br/><img src="http://www.eeaoo.com/blog/attachments/month_0705/b3.jpg" border="0" alt=""/><br/><br/>凹凸图案玻璃 <br/><br/><br/><br/>步骤一: <br/><br/><br/><img src="http://www.eeaoo.com/blog/attachments/month_0705/b4.jpg" border="0" alt=""/><br/><br/>步骤二: <br/><br/><img src="http://www.eeaoo.com/blog/attachments/month_0705/b5.jpg" border="0" alt=""/><br/><br/>步骤三: <br/><br/><img src="http://www.eeaoo.com/blog/attachments/month_0705/b6.jpg" border="0" alt=""/><br/><br/>步骤四: <br/><br/><img src="http://www.eeaoo.com/blog/attachments/month_0705/b7.jpg" border="0" alt=""/><br/><br/>步骤五<br/>: <br/><img src="http://www.eeaoo.com/blog/attachments/month_0705/b8.jpg" border="0" alt=""/><br/><br/>步骤六: <br/><br/><img src="http://www.eeaoo.com/blog/attachments/month_0705/b9.jpg" border="0" alt=""/><br/><br/>完成。]]></description>
		</item>
		
</channel>
</rss>
