<?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>DesignStudio-50M深蓝</title>
	<atom:link href="http://design-studio.cn/blog/feed" rel="self" type="application/rss+xml" />
	<link>http://design-studio.cn/blog</link>
	<description>专注于互联网体验...</description>
	<lastBuildDate>Tue, 02 Mar 2010 03:48:56 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.1</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>创建折叠式菜单-源自 css cookbook</title>
		<link>http://design-studio.cn/blog/post/1458.html</link>
		<comments>http://design-studio.cn/blog/post/1458.html#comments</comments>
		<pubDate>Tue, 02 Mar 2010 03:48:12 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Lean Jquery&js]]></category>
		<category><![CDATA[折叠式菜单]]></category>

		<guid isPermaLink="false">http://design-studio.cn/blog/?p=1458</guid>
		<description><![CDATA[一段折叠菜单JS，百用不爽
代码：


&#60;!DOCTYPE html PUBLIC &#34;-//W3C//DTD XHTML 1.0 Strict//EN&#34;
	&#34;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&#34;&#62;
&#60;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&#62;
&#60;head&#62;
&#60;title&#62;CSS Cookbook&#60;/title&#62;
&#60;style type=&#34;text/css&#34;&#62;
&#60;!--
#menulink {
	display: none;
}
--&#62;
&#60;/style&#62;
&#60;script language=&#34;JavaScript&#34;&#62;
function kadabra(zap) {
 if (document.getElementById) {
  var abra = document.getElementById(zap).style;
  if (abra.display == &#34;block&#34;) {
   abra.display = &#34;none&#34;;
   } else {
   abra.display = &#34;block&#34;;
  }
  return false;
  } else {
  return [...]]]></description>
		<wfw:commentRss>http://design-studio.cn/blog/post/1458.html/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Don&#8217;t make me think pdf 下载</title>
		<link>http://design-studio.cn/blog/post/1455.html</link>
		<comments>http://design-studio.cn/blog/post/1455.html#comments</comments>
		<pubDate>Tue, 02 Mar 2010 03:39:25 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Web观察]]></category>
		<category><![CDATA[XHTML & CSS]]></category>
		<category><![CDATA[资源分享]]></category>
		<category><![CDATA[Don't make me think pdf]]></category>

		<guid isPermaLink="false">http://design-studio.cn/blog/?p=1455</guid>
		<description><![CDATA[


最近很懒，估计是春天到了，老是犯困，一本书啃了好几天~~，《Don&#8217;t make me think 》确实是本好书，推荐从事互联网工作的朋友阅读一下，
点击下载PDF
]]></description>
		<wfw:commentRss>http://design-studio.cn/blog/post/1455.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>纯css下拉菜单-出自eric meyer谈css</title>
		<link>http://design-studio.cn/blog/post/1449.html</link>
		<comments>http://design-studio.cn/blog/post/1449.html#comments</comments>
		<pubDate>Mon, 01 Mar 2010 07:02:19 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[XHTML & CSS]]></category>
		<category><![CDATA[css下拉菜单]]></category>
		<category><![CDATA[eric meyer谈css PDF]]></category>
		<category><![CDATA[eric meyer谈css 书源码]]></category>

		<guid isPermaLink="false">http://design-studio.cn/blog/post/1449.html</guid>
		<description><![CDATA[周末去图书馆翻了几本css的书，翻了《eric meyer谈css》，《CSS那些事儿》，《精通CSS与HTML设计模式》，《CSS权威指南》，学了些新东西。
印象最深的是eric大师的css驱动的下拉菜单，和大家分享一下啊：


&#60;!DOCTYPE HTML PUBLIC &#34;-//W3C//DTD HTML 4.01//EN&#34;
        &#34;http://www.w3.org/TR/html4/strict.dtd&#34;&#62;
&#60;html&#62;
&#60;head&#62;
&#60;title&#62;Project 6&#60;/title&#62;
&#60;style type=&#34;text/css&#34;&#62;
body {
	background: #EEE;
	color: #000;
	behavior: url(csshover.htc);
} /* WinIE behavior call */
h1 {
	color: #AAA;
	border-bottom: 1px solid;
	margin-bottom: 0;
}
#main {
	color: #CCC;
	margin-left: 7em;
	padding: 1px 0 1px 5%;
	border-left: 1px solid;
}
div#nav {
	float: left;
	width: 7em;
	background: #FDD;
}
div#nav ul {
	margin: 0;
	padding: 0;
	width: 7em;
	background: white;
	border: 1px solid;
}
div#nav li {
	position: relative;
	list-style: [...]]]></description>
		<wfw:commentRss>http://design-studio.cn/blog/post/1449.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>浅谈css框架开发</title>
		<link>http://design-studio.cn/blog/post/1443.html</link>
		<comments>http://design-studio.cn/blog/post/1443.html#comments</comments>
		<pubDate>Fri, 26 Feb 2010 04:41:17 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[XHTML & CSS]]></category>
		<category><![CDATA[css框架]]></category>

		<guid isPermaLink="false">http://design-studio.cn/blog/?p=1443</guid>
		<description><![CDATA[个人总结了在开发css框架中的一点经验，献丑了。希望大家的讨论能使我们共同进步。:)
1、css框架
中国的互联网行业已经发展了10年，浏览器也从最早流行的NS到现在的FF3.IE7等等……前端开发工程师的职位也诞生了。近几年在web开发中，有个非常火的词——“框架”。YUI、JQuery、Prototype这些javascript框架在开发网站时，确实成为前端开发工程师的手中利器。为什么呢？因为框架是包含工具、函数库、约定，以及尝试从常用任务中抽象出可以复用的通用模块，让设计师与程序员避免重复开发。通俗地讲便是把大多数重复工作的时间给节约了。

编写css也是一样，从最初只是定义文字颜色、内容排版，到现在定义所有的表现。css框架也渐渐被重视了，因为大家都认识到：从具象的表现中抽出抽象的模块来重复使用，是减少用户下载、方便团队及个人开发最重要的手段。
2、css框架的开发顺序
a) 格式化 reset.css
格式化css的真正好处是能够快速启动工作，你可以在新的HTML文件里引入框架，不用再处理重置padding 和 margins，实现统一的排版、浏览器下的相同表现。
b) 布局 layout.css
定义页面是二栏还是三栏，是全屏还是1024×768……
一个网站的设计可能有很多种布局，但是大多数都是由几个具有复用性的布局组成，选择性的引入所需要的布局，可以很快地应用所期望的页面布局。
c) 基本样式 type.css
定义body、h1-h6、a:link-a:active、p等的字体大小和颜色。
基本样式的css引用，譬如将ul定义class为“ul-text”，用来展现相同的icon、行间距、链接色彩。
还可以像这样应用：class=”ul-text square”，li前展现的是方型的icon。
d) 表格修饰 table.css
定义table、tr、td、th、thead、tfoot、tbody、caption等标签的表现。
和基本样式一样，但是表格在现有网站的展现形式几乎都是处理数据，所以分开存放引用。譬如在table上应用table-style-1便是黑色边框的表格，table-style-2便是黄色边框的表格。
e) 表单修饰 form.css
定义fieldset、label、button、input 、select、textarea这几个标签的表现。
大多数网站的表单、按钮、输入框几乎都是一样的。之所以引入这个css，是为了便于统一在各个浏览器中的展现。默认的按钮、输入框等在各个浏览器下的展现区别很大，虽然在格式化的css中已经初步的统一，但是输入框的边框，按钮的样式都是需要在这个css中定义的。无奈的是select无法做到统一，如果考虑到用js实现的话，这个成本太大了点。
f) 打印修饰 print.css
修饰打印输出的页面。
g) 包含其他css的css
frontpage.css、list.css、detail.css、register.css等等
根据各种引用去引入相应的css。譬如list页面中没有需要表格的修饰，那就不引入table.css。以节约代码量。
3、css框架文件夹的建立
a) core 主要的
存放reset.css、layout.css、type.css、print.css
b) bud 模块
存放table.css、form.css、album.css等css
c) petal 具体应用
存放封装过的css。frontpage.css、llist.css、detail.css、register.css等css。这个文件夹存放的css都是被直接引用的。
文件夹的命名，按个人喜好啦! 我还希望用电子、质子等命名呢。嘿嘿！
4、css框架的优点
a) 提高开发效率。
b) 规范名称定义，便于维护。
c) 规范项目开发流程
d) css代码更清晰、简单。html代码更合理。
5、css框架的弊端
a) 学习成本提高。你需要了解整个框架，需要阅读框架的文档。
b) css框架对于一个小项目等页面来说很臃肿。框架中可能有大部分你用不到的代码。
c)可能会无法帮助你的技术提高。太依赖框架，以至于很难排除bug。包括框架中本身就带的bug。
d) 选择自己需要的框架与开发框架都很痛苦。写到后面发现越来越不灵活，越来越臃肿。残念 -_-
6、开发及使用css框架中常遇到的问题
1、页面外部引用样式过多。
譬如关于ul的margin定义,在格式化的css中会声明为0，而在基本样式的css中又可能会声明margin:5px 10px;
所以在Yslow中会出现多次定义。
2、组件复用性的考量。
譬如表单定义的css中定义了所有表单的修饰,而假定在注册这个页面中只是需要这个css的百分之三十。那是否应切割出去那不要的百分之七十?
综合以上的二个问题，个人认为解决的方式便是封装，让该有的有，不该有的没有。尽量减少http连接数和css的大小。但如果彻底是这样做的话，css的复用性又会变得很差，后期手工的封装会很痛苦。只能套用小马的一句话“具体情况，具体分析”。人生真是矛盾啊…
3、到底该不该支持em?
可见如要支持em，最大的目的是为了在浏览器中可以根据用户的分辨率大小自由缩放，对于拥有超大显示器的用户与小显示器的用户是非常有用的。可是在采集我们用户的浏览器数据后，发现分辨处于这二端的用户非常少，可想而知，为这部分的用户多花比正常开发一倍以上的时间显然是件不划算的事情，所以当初在开发tbsp的时候，我们团队就决定了不支持em。当然这是个建议，我们也希望能使用em带给用户最好的感受。
出自淘宝UED
]]></description>
		<wfw:commentRss>http://design-studio.cn/blog/post/1443.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>jquery的idTabs插件</title>
		<link>http://design-studio.cn/blog/post/1436.html</link>
		<comments>http://design-studio.cn/blog/post/1436.html#comments</comments>
		<pubDate>Thu, 25 Feb 2010 10:27:36 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Lean Jquery&js]]></category>
		<category><![CDATA[idTabs css]]></category>

		<guid isPermaLink="false">http://design-studio.cn/blog/?p=1436</guid>
		<description><![CDATA[
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
&#60;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&#62;
&#60;head&#62;
&#60;meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=utf-8&#34; /&#62;
&#60;title&#62;jQuery插件Tab选项卡-选择指定栏&#60;/title&#62;
&#60;script type=&#34;text/javascript&#34; src=&#34;jquery.js&#34;&#62;&#60;/script&#62;
&#60;script type=&#34;text/javascript&#34; src=&#34;jquery.idTabs.js&#34;&#62;&#60;/script&#62;
&#60;style type=&#34;text/css&#34;&#62;
/*主容器*/ 
.usual {
	background:#cee;
	color:#111;
	padding:15px 20px;
	width:500px;
	border:1px solid #099;
	margin:8px auto;
}
/*选项卡*/ 
.usual ul {
	margin:0;
	padding:0;
	padding-left:2em;
	overflow:auto;/*火狐等清理浮动*/
	_display:inline-block;/*ie6清理浮动*/
}
.usual li {
	list-style:none;
	float:left;
}
.usual ul a {
	display:block;
	padding:6px 10px;
	text-decoration:none;
	font:12px Arial;
	color:#FFF;
	background:#22A4C4;
	outline:none;
}
.usual ul a:hover {
	color:#FFF;
	background:#0B718B;
}
.usual ul a.selected {
	color:#000;
	background:snow;
	cursor:default;
}
/*tab页*/ 
.usual div {
	padding:10px 10px 8px 10px;
	background:snow;
	font:10pt Arial;
}
&#60;/style&#62;
&#60;/head&#62;
&#60;body&#62;
&#60;div id=&#34;usual1&#34; class=&#34;usual&#34;&#62;
  &#60;ul&#62;
    &#60;li&#62;&#60;a href=&#34;#tab1&#34;&#62;教育&#60;/a&#62;&#60;/li&#62;
    &#60;li&#62;&#60;a href=&#34;#tab2&#34;&#62;儿童&#60;/a&#62;&#60;/li&#62;
  [...]]]></description>
		<wfw:commentRss>http://design-studio.cn/blog/post/1436.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>任意位置浮动固定层-转</title>
		<link>http://design-studio.cn/blog/post/1433.html</link>
		<comments>http://design-studio.cn/blog/post/1433.html#comments</comments>
		<pubDate>Thu, 25 Feb 2010 10:07:00 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Lean Jquery&js]]></category>
		<category><![CDATA[浮动固定层]]></category>

		<guid isPermaLink="false">http://design-studio.cn/blog/?p=1433</guid>
		<description><![CDATA[/*任意位置浮动固定层*/
/*没剑(http://regedit.cnblogs.com) 08-03-11*/
/*说明：可以让指定的层浮动到网页上的任何位置，当滚动条滚动时它会保持在当前位置不变，不会产生闪动*/

/*2008-4-1修改：当自定义right位置时无效，这里加上一个判断
有值时就不设置，无值时要加18px已修正层位置在ie6下的问题
*/
/*调用：
1 无参数调用：默认浮动在右下角
$(&#8220;#id&#8221;).floatdiv();
2 内置固定位置浮动
//右下角
$(&#8220;#id&#8221;).floatdiv(&#8220;rightbottom&#8221;);
//左下角
$(&#8220;#id&#8221;).floatdiv(&#8220;leftbottom&#8221;);
//右下角
$(&#8220;#id&#8221;).floatdiv(&#8220;rightbottom&#8221;);
//左上角
$(&#8220;#id&#8221;).floatdiv(&#8220;lefttop&#8221;);
//右上角
$(&#8220;#id&#8221;).floatdiv(&#8220;righttop&#8221;);
//居中
$(&#8220;#id&#8221;).floatdiv(&#8220;middle&#8221;);
3 自定义位置浮动
$(&#8220;#id&#8221;).floatdiv({left:&#8221;10px&#8221;,top:&#8221;10px&#8221;});
以上参数，设置浮动层在left 10个像素,top 10个像素的
示例代码下载
]]></description>
		<wfw:commentRss>http://design-studio.cn/blog/post/1433.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>menuswitch</title>
		<link>http://design-studio.cn/blog/post/1427.html</link>
		<comments>http://design-studio.cn/blog/post/1427.html#comments</comments>
		<pubDate>Thu, 25 Feb 2010 09:53:24 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Lean Jquery&js]]></category>
		<category><![CDATA[menuswitch]]></category>

		<guid isPermaLink="false">http://design-studio.cn/blog/?p=1427</guid>
		<description><![CDATA[
DEMO_1
DEMO_2
点击下载
]]></description>
		<wfw:commentRss>http://design-studio.cn/blog/post/1427.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>7 Years &amp; 50 Days</title>
		<link>http://design-studio.cn/blog/post/1410.html</link>
		<comments>http://design-studio.cn/blog/post/1410.html#comments</comments>
		<pubDate>Thu, 04 Feb 2010 02:35:06 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Music]]></category>
		<category><![CDATA[groove coverage]]></category>

		<guid isPermaLink="false">http://design-studio.cn/blog/?p=1410</guid>
		<description><![CDATA[7 Years &#38; 50 Days

seven years and fifty days
the time is passing by
nothing in this world could be
as nice as you and i
and how could we break up like this
and how could we be wrong
so many years, so many days
and i still sing my song
now i run to you
like i always do
when i close my [...]]]></description>
		<wfw:commentRss>http://design-studio.cn/blog/post/1410.html/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
<enclosure url="http://wellimg.cn/works/shx/bjmusic.mp3" length="4757829" type="audio/mpeg" />
		</item>
		<item>
		<title>AS3与JavaScript进行交互[转]</title>
		<link>http://design-studio.cn/blog/post/1399.html</link>
		<comments>http://design-studio.cn/blog/post/1399.html#comments</comments>
		<pubDate>Wed, 03 Feb 2010 05:40:32 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[ActionScript 2 & 3]]></category>
		<category><![CDATA[AS3与JavaScript进行交互]]></category>

		<guid isPermaLink="false">http://design-studio.cn/blog/?p=1399</guid>
		<description><![CDATA[1.JS调用AS3中的函数
首先，我们新建一个FLASH文档，然后在舞台上绘制一个动态文本，该文本的实例名称为wen_txt。好了！美工的部分就算完成了（我们这里是一个非常简单的实例，不要求太复杂。力求突出重点）！
现在，我们要在FLASH中建立一个允许被外部调用的函数。那么如何去建立声明这样一个函数呢？我们要使用到一个类，这个类的名字就是ExternalInterface。很多人都没有太注意过这个类。这个类实际上是在flash.external 包中。这个包是专门用来和外部容器进行通信的。那么对这个ExternalInterface类，它的官方解释是“ExternalInterface 类是外部 API，在 ActionScript 和 Flash Player 的容器之间实现直接通讯的应用程序编程接口，例如，含有 JavaScript 的 HTML 页。”很显然，这里已经提到了JS。好了！下面我们就来写一下脚本吧！
代码如下：


1
2
3
4
ExternalInterface.addCallback(&#34;abcd&#34;,yun);
function yun(zi:String):void{
wen_txt.text = zi;
}

我们看，建立一个可以被外部调用的函数实际上就是使用了ExternalInterface类的addCallback方法。我们可以从宏观上这样理解。但实际上它的真正作用是将一个函数注册为可从容器调用。实际上我们的FLASH端就这么简单。好了！保存文件，发布。注意！这里，我发布出来的SWF文件的文件名是ab.swf。
上面我们已经将FLASH端的脚本写好了，下面我们来编写JS代码，其实也是一个HTML网页代码，这个HTML代码中包含JS代码！
代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
&#60;html lang=&#34;en&#34;&#62;
&#60;head&#62;
&#60;meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=utf-8&#34; /&#62;
&#60;title&#62;FLASH与JS交互&#60;/title&#62;
&#60;script language=&#34;JavaScript&#34;&#62;
     function pageInit() { 
        sendToActionScript(&#34;你好&#34;);
     }
     function sendToActionScript(value) { 
     [...]]]></description>
		<wfw:commentRss>http://design-studio.cn/blog/post/1399.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>AS3加载外部SWF文件</title>
		<link>http://design-studio.cn/blog/post/1393.html</link>
		<comments>http://design-studio.cn/blog/post/1393.html#comments</comments>
		<pubDate>Tue, 02 Feb 2010 10:05:52 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[ActionScript 2 & 3]]></category>
		<category><![CDATA[AS3加载SWF]]></category>
		<category><![CDATA[AS3学习]]></category>

		<guid isPermaLink="false">http://design-studio.cn/blog/?p=1393</guid>
		<description><![CDATA[在 ActionScript 3.0 中，SWF 文件是使用 Loader 类来加载的。若要加载外部 SWF 文件，
ActionScript 需要执行以下 4 个操作：
1. 用文件的 URL 创建一个新的 URLRequest 对象。
2. 创建一个新的 Loader 对象。
3. 调用 Loader 对象的 load() 方法，并以参数形式传递 URLRequest 实例。
4. 对显示对象容器 （如 Flash 文档的主时间轴）调用 addChild() 方法，将 Loader 实例添加到显示列表中。
示例代码：

1
2
3
4
5
var request:URLRequest = new URLRequest&#40;&#34;http://design-studio.cn/
blog/wp-content/uploads/2010/02/generateur_avatars.swf&#34;&#41;;
var loader:Loader = new Loader&#40;&#41;;
loader.load&#40;request&#41;;
addChild&#40;loader&#41;;

]]></description>
		<wfw:commentRss>http://design-studio.cn/blog/post/1393.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
