<?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/"
	xmlns:georss="http://www.georss.org/georss" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#" xmlns:media="http://search.yahoo.com/mrss/"
	>

<channel>
	<title>Bluesunries&#039;s Blog</title>
	<atom:link href="http://bluesunries.wordpress.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://bluesunries.wordpress.com</link>
	<description>Just another WordPress.com weblog</description>
	<lastBuildDate>Sat, 15 Jan 2011 02:04:32 +0000</lastBuildDate>
	<language></language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.com/</generator>
<cloud domain='bluesunries.wordpress.com' port='80' path='/?rsscloud=notify' registerProcedure='' protocol='http-post' />
<image>
		<url>http://s2.wp.com/i/buttonw-com.png</url>
		<title>Bluesunries&#039;s Blog</title>
		<link>http://bluesunries.wordpress.com</link>
	</image>
	<atom:link rel="search" type="application/opensearchdescription+xml" href="http://bluesunries.wordpress.com/osd.xml" title="Bluesunries&#039;s Blog" />
	<atom:link rel='hub' href='http://bluesunries.wordpress.com/?pushpress=hub'/>
		<item>
		<title>mb_substr函数的应用</title>
		<link>http://bluesunries.wordpress.com/2010/04/03/mb_substr%e5%87%bd%e6%95%b0%e7%9a%84%e5%ba%94%e7%94%a8/</link>
		<comments>http://bluesunries.wordpress.com/2010/04/03/mb_substr%e5%87%bd%e6%95%b0%e7%9a%84%e5%ba%94%e7%94%a8/#comments</comments>
		<pubDate>Sat, 03 Apr 2010 03:43:18 +0000</pubDate>
		<dc:creator>bluesunries</dc:creator>
				<category><![CDATA[drupal主题]]></category>
		<category><![CDATA[drupal函数]]></category>

		<guid isPermaLink="false">http://bluesunries.wordpress.com/?p=182</guid>
		<description><![CDATA[利用mb_substr截取字符串不会出现乱码问题，高手可以飞过&#8230;&#8230; 首先 1.确保你的Windows/system32下有php_mbstring.dll这个文件，没有就从你Php安装目录extensions里拷入Windows/system32里面。 2.在windows目录下找到php.ini打开编辑，搜索mbstring.dll，找到 ;extension=php_mbstring.dll把前面的;号去掉，这样mb_substr函数就可以生效了 mb_strcut函数功能也可以截取字符串长度，下面实例具体看看区别在哪： &#60;?php $str =&#8216;这样一来我的字符串就不会有乱码^_^&#8217;;   echo&#8220;mb_substr:&#8221;.mb_substr($str,0,7,&#8216;utf-8&#8242;);  //结果：这样一来我的字 echo&#8220;&#60;br&#62;&#8221;;   echo&#8220;mb_strcut:&#8221;.mb_strcut($str,0,6,&#8216;utf-8&#8242;); //结果：这样 ?&#62; 从上面的例子可以看出，mb_substr是按字来切分字符，而mb_strcut是按字节来切分字符，但是都不会产生半个字符的现象。<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=bluesunries.wordpress.com&amp;blog=11014795&amp;post=182&amp;subd=bluesunries&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
			<content:encoded><![CDATA[<p>利用<a href=";" target="_self"><span style="text-decoration:underline;"><strong><span style="color:#000000;">mb_substr</span></strong></span></a>截取字符串不会出现乱码问题，高手可以飞过&#8230;&#8230;<br />
首先<br />
1.确保你的Windows/system32下有php_mbstring.dll这个文件，没有就从你Php安装目录extensions里拷入Windows/system32里面。</p>
<p>2.在windows目录下找到php.ini打开编辑，搜索mbstring.dll，找到<br />
;extension=php_mbstring.dll把前面的;号去掉，这样mb_substr函数就可以生效了<br />
<a href=";" target="_self"><span style="text-decoration:underline;"><strong><span style="color:#000000;">mb_strcut</span></strong></span></a>函数功能也可以截取字符串长度，下面实例具体看看区别在哪：</p>
<div id="code-1">
<div class="code">
<ol>
<li style="font-weight:normal;color:#ff0102;font-style:normal;font-family:'Courier New',Courier,monospace;">
<div style="font-weight:normal;font-family:'Courier New',Courier,monospace;">&lt;?php</div>
</li>
<li style="font-weight:bold;color:#26536a;">
<div style="font-weight:normal;font-family:'Courier New',Courier,monospace;">$str =<span style="color:#cc0000;">&#8216;这样一来我的字符串就不会有乱码^_^&#8217;</span>;</div>
</li>
<li style="font-weight:normal;color:#3a6a8b;font-style:normal;font-family:'Courier New',Courier,monospace;">
<div style="font-weight:normal;font-family:'Courier New',Courier,monospace;"> </div>
</li>
<li style="font-weight:bold;color:#26536a;">
<div style="font-weight:normal;font-family:'Courier New',Courier,monospace;">echo<span style="color:#cc0000;">&#8220;mb_substr:&#8221;</span>.mb_substr<span style="font-weight:bold;color:#006600;">(</span>$str,<span style="color:#800000;">0</span>,<span style="color:#800000;">7</span>,<span style="color:#cc0000;">&#8216;utf-8&#8242;</span><span style="font-weight:bold;color:#006600;">)</span>;</div>
</li>
<li style="font-weight:normal;color:#3a6a8b;font-style:normal;font-family:'Courier New',Courier,monospace;">
<div style="font-weight:normal;font-family:'Courier New',Courier,monospace;"> //结果：这样一来我的字</div>
</li>
<li style="font-weight:bold;color:#26536a;">
<div style="font-weight:normal;font-family:'Courier New',Courier,monospace;">echo<span style="color:#cc0000;">&#8220;&lt;br&gt;&#8221;</span>;</div>
</li>
<li style="font-weight:normal;color:#3a6a8b;font-style:normal;font-family:'Courier New',Courier,monospace;">
<div style="font-weight:normal;font-family:'Courier New',Courier,monospace;"> </div>
</li>
<li style="font-weight:bold;color:#26536a;">
<div style="font-weight:normal;font-family:'Courier New',Courier,monospace;">echo<span style="color:#cc0000;">&#8220;mb_strcut:&#8221;</span>.mb_strcut<span style="font-weight:bold;color:#006600;">(</span>$str,<span style="color:#800000;">0</span>,<span style="color:#800000;">6</span>,<span style="color:#cc0000;">&#8216;utf-8&#8242;</span><span style="font-weight:bold;color:#006600;">)</span>;</div>
</li>
<li style="font-weight:bold;color:#26536a;">//结果：这样</li>
<li style="font-weight:normal;color:#ff0102;font-style:normal;font-family:'Courier New',Courier,monospace;">
<div style="font-weight:normal;font-family:'Courier New',Courier,monospace;">?&gt;</div>
</li>
</ol>
</div>
</div>
<p>从上面的例子可以看出，mb_substr是按字来切分字符，而mb_strcut是按字节来切分字符，但是都不会产生半个字符的现象。</p>
<br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/bluesunries.wordpress.com/182/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/bluesunries.wordpress.com/182/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godelicious/bluesunries.wordpress.com/182/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/delicious/bluesunries.wordpress.com/182/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gofacebook/bluesunries.wordpress.com/182/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/facebook/bluesunries.wordpress.com/182/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gotwitter/bluesunries.wordpress.com/182/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/twitter/bluesunries.wordpress.com/182/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gostumble/bluesunries.wordpress.com/182/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/stumble/bluesunries.wordpress.com/182/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godigg/bluesunries.wordpress.com/182/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/digg/bluesunries.wordpress.com/182/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/goreddit/bluesunries.wordpress.com/182/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/reddit/bluesunries.wordpress.com/182/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=bluesunries.wordpress.com&amp;blog=11014795&amp;post=182&amp;subd=bluesunries&amp;ref=&amp;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://bluesunries.wordpress.com/2010/04/03/mb_substr%e5%87%bd%e6%95%b0%e7%9a%84%e5%ba%94%e7%94%a8/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<media:content url="http://1.gravatar.com/avatar/3d66e1387fd140da99bab12dcc826be7?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">bluesunries</media:title>
		</media:content>
	</item>
		<item>
		<title>CSS在IE6下不起作用，没有效果</title>
		<link>http://bluesunries.wordpress.com/2010/04/03/css%e5%9c%a8ie6%e4%b8%8b%e4%b8%8d%e8%b5%b7%e4%bd%9c%e7%94%a8%ef%bc%8c%e6%b2%a1%e6%9c%89%e6%95%88%e6%9e%9c/</link>
		<comments>http://bluesunries.wordpress.com/2010/04/03/css%e5%9c%a8ie6%e4%b8%8b%e4%b8%8d%e8%b5%b7%e4%bd%9c%e7%94%a8%ef%bc%8c%e6%b2%a1%e6%9c%89%e6%95%88%e6%9e%9c/#comments</comments>
		<pubDate>Sat, 03 Apr 2010 03:38:19 +0000</pubDate>
		<dc:creator>bluesunries</dc:creator>
				<category><![CDATA[CSS/JS技巧]]></category>

		<guid isPermaLink="false">http://bluesunries.wordpress.com/?p=180</guid>
		<description><![CDATA[这几天在做一个网站，结构上用的是DIV+CSS。做站的人都知道，页面显示最难的是兼容各种各样的浏览器。我想兼容ie6、ie7、ie8、 firefox，这几个也是常用的。再多咱也考虑不了。做的过程中发现以下几个问题，如写的CSS定义在ie6中怎么都不起作用，真是伤透了用户脑筋。 对于问题，有几个方面。 一、在我要测试的浏览器中，CSS定义都正常，就是在ie6中这些CSS定义都失效（是失效，不是有效果而达不到要求）刚开始发现这个问题，我大概找了半个小时， 才发现原来定义字体时我使用了中文字体。如font-size:黑体;,直接删除就正常了。 二、后来又发现这个问题，这下我注意了，原来是注释当中有中文，比如/*顶部图片样式*/ 三、改完后，还发现有这个问题，最后解决这个问题，原来是css文件我使用的编码是ANSI，用软件将这个文件转换成utf8编码后，这个问题也就彻底解决了，文件中也可以使用中文了。 总结： 一、css文件中最好不要有中文，注释中也不要有 二、做中文站，最好页面及文字统一全部使用utf8编码。 三、如果在ie6显示css有问题，可以直接用ie6的&#8221;另存为&#8212; &#8220;功能，然后查看这个页面的源码，在源码中去找问题的答案。<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=bluesunries.wordpress.com&amp;blog=11014795&amp;post=180&amp;subd=bluesunries&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
			<content:encoded><![CDATA[<p>这几天在做一个网站，结构上用的是DIV+CSS。做站的人都知道，页面显示最难的是兼容各种各样的浏览器。我想兼容ie6、ie7、ie8、 firefox，这几个也是常用的。再多咱也考虑不了。做的过程中发现以下几个问题，如写的CSS定义在ie6中怎么都不起作用，真是伤透了用户脑筋。</p>
<p>对于问题，有几个方面。</p>
<p>一、在我要测试的浏览器中，CSS定义都正常，就是在ie6中这些CSS定义都失效（是失效，不是有效果而达不到要求）刚开始发现这个问题，我大概找了半个小时， 才发现原来定义字体时我使用了中文字体。如font-size:黑体;,直接删除就正常了。</p>
<p>二、后来又发现这个问题，这下我注意了，原来是注释当中有中文，比如/*顶部图片样式*/</p>
<p>三、改完后，还发现有这个问题，最后解决这个问题，原来是css文件我使用的编码是ANSI，用软件将这个文件转换成utf8编码后，这个问题也就彻底解决了，文件中也可以使用中文了。</p>
<p>总结：</p>
<p>一、css文件中最好不要有中文，注释中也不要有</p>
<p>二、做中文站，最好页面及文字统一全部使用utf8编码。</p>
<p>三、如果在ie6显示css有问题，可以直接用ie6的&#8221;另存为&#8212; &#8220;功能，然后查看这个页面的源码，在源码中去找问题的答案。</p>
<br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/bluesunries.wordpress.com/180/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/bluesunries.wordpress.com/180/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godelicious/bluesunries.wordpress.com/180/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/delicious/bluesunries.wordpress.com/180/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gofacebook/bluesunries.wordpress.com/180/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/facebook/bluesunries.wordpress.com/180/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gotwitter/bluesunries.wordpress.com/180/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/twitter/bluesunries.wordpress.com/180/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gostumble/bluesunries.wordpress.com/180/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/stumble/bluesunries.wordpress.com/180/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godigg/bluesunries.wordpress.com/180/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/digg/bluesunries.wordpress.com/180/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/goreddit/bluesunries.wordpress.com/180/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/reddit/bluesunries.wordpress.com/180/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=bluesunries.wordpress.com&amp;blog=11014795&amp;post=180&amp;subd=bluesunries&amp;ref=&amp;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://bluesunries.wordpress.com/2010/04/03/css%e5%9c%a8ie6%e4%b8%8b%e4%b8%8d%e8%b5%b7%e4%bd%9c%e7%94%a8%ef%bc%8c%e6%b2%a1%e6%9c%89%e6%95%88%e6%9e%9c/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
	
		<media:content url="http://1.gravatar.com/avatar/3d66e1387fd140da99bab12dcc826be7?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">bluesunries</media:title>
		</media:content>
	</item>
		<item>
		<title>web2.0网站CSS兼容ie6 ie7 ff教程大全</title>
		<link>http://bluesunries.wordpress.com/2010/04/03/web2-0%e7%bd%91%e7%ab%99css%e5%85%bc%e5%ae%b9ie6-ie7-ff%e6%95%99%e7%a8%8b%e5%a4%a7%e5%85%a8/</link>
		<comments>http://bluesunries.wordpress.com/2010/04/03/web2-0%e7%bd%91%e7%ab%99css%e5%85%bc%e5%ae%b9ie6-ie7-ff%e6%95%99%e7%a8%8b%e5%a4%a7%e5%85%a8/#comments</comments>
		<pubDate>Sat, 03 Apr 2010 03:35:09 +0000</pubDate>
		<dc:creator>bluesunries</dc:creator>
				<category><![CDATA[CSS/JS技巧]]></category>

		<guid isPermaLink="false">http://bluesunries.wordpress.com/?p=178</guid>
		<description><![CDATA[对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声明. 1.div的垂直居中问题  vertical-align:middle;  将行距增加到和整个DIV一样高 line-height:200px;  然后插入文字，就垂直居中了。缺点是要控制内容不要换行。 2. margin加倍的问题      设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。 解决方案是在这个div里面加上display:inline;     例如： &#60;#div id=”imfloat”&#62;     相应的css为     #IamFloat { float:left; margin:5px;/*IE下理解为10px*/  display:inline;/*IE下再理解为5px*/ }   3.浮动ie产生的双倍距离      #box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略 }  这里细说一下block与inline两个元素： block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素); Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素);     #box {  display:block; //可以为内嵌元素模拟为块元素  display:inline; //实现同一行排列的效果  diplay:table;  } 4 IE与宽度和高度的问题 IE 不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。     比如要设置背景图片，这个宽度是比较重要的。 要解决这个问题，可以这样：     #box{ width: [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=bluesunries.wordpress.com&amp;blog=11014795&amp;post=178&amp;subd=bluesunries&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
			<content:encoded><![CDATA[<p>对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声明.<br />
<em><strong>1.div的垂直居中问题  </strong></em><br />
vertical-align:middle; <br />
将行距增加到和整个DIV一样高 line-height:200px; <br />
然后插入文字，就垂直居中了。缺点是要控制内容不要换行。<br />
<strong>2. margin加倍的问题    </strong> <br />
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。<br />
解决方案是在这个div里面加上display:inline;    <br />
例如：<br />
&lt;#div id=”imfloat”&gt;    <br />
相应的css为    <br />
#IamFloat<br />
{<br />
float:left; margin:5px;/*IE下理解为10px*/ <br />
display:inline;/*IE下再理解为5px*/<br />
}  <br />
<strong><em>3.浮动ie产生的双倍距离    </em></strong> <br />
#box{<br />
float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略<br />
} <br />
这里细说一下block与inline两个元素：<br />
block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);<br />
Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素);    <br />
#box<br />
{ <br />
display:block; //可以为内嵌元素模拟为块元素 <br />
display:inline; //实现同一行排列的效果 <br />
diplay:table; <br />
}<br />
<em><strong>4 IE与宽度和高度的问题 </strong></em><br />
IE 不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。    <br />
比如要设置背景图片，这个宽度是比较重要的。<br />
要解决这个问题，可以这样：    <br />
#box{ width: 80px; height: 35px;}<br />
html&gt;body #box<br />
{ <br />
width: auto; height: auto; min-width: 80px; min-height: 35px;<br />
}<br />
<em><strong>5.页面的最小宽度</strong></em><strong>  </strong>  <br />
 </p>
<p>min -width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个&lt;div&gt; 放到 &lt;body&gt; 标签下，然后为div指定一个类, 然后CSS这样设计：<br />
#container{ min-width: 600px; width:e-xpression(document.body.clientWidth &lt; 600? &#8220;600px&#8221;: &#8220;auto&#8221; );}    <br />
第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。<br />
 </p>
<p><strong><em>6.DIV浮动IE文本产生3象素的bug   </em></strong></p>
<p><em> <br />
</em>左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.    <br />
#box{ float:left; width:800px;}   <br />
#left{ float:left; width:50%;}   <br />
#right{ width:50%;}   <br />
*html #left{ margin-right:-3px; //这句是关键}   <br />
&lt;div id=&#8221;box&#8221;&gt;<br />
    &lt;div id=&#8221;left&#8221;&gt;&lt;/div&gt; <br />
    &lt;div id=&#8221;right&#8221;&gt;&lt;/div&gt;<br />
&lt;/div&gt;<br />
<em><strong>7.IE捉迷藏的问题    </strong></em><br />
当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。<br />
解决办法：<br />
对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。  <br />
 </p>
<p><em><strong>8.float的div闭合;清除浮动;自适应高度;    </strong></em><br />
① 例如：&lt;#div id=”floatA” &gt;&lt;#div id=”floatB” &gt;&lt;#div id=” NOTfloatC” &gt;这里的NOTfloatC并不希望继续平移，而是希望往下排。(其中floatA、floatB的属性已经设置为 float:left;)   这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。在 &lt;#div class=”floatB”&gt; &lt;#div class=”NOTfloatC”&gt;之间加上 &lt; #div class=”clear”&gt;这个div一定要注意位置，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。 并且将clear这种样式定义为为如下即可： .clear{ clear:both;}   <br />
作为外部 wrapper 的 div 不要定死高度<br />
为了让高度能自动适应，要在wrapper里面加上overflow:hidden; 当包含float的 box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。   <br />
例如某一个wrapper如下定义： .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}   <br />
<em><strong>9.对于排版 </strong></em><br />
我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后面做一个统一的背景,<br />
譬如:   &lt;div id=”page”&gt;   &lt;div id=”left”&gt;&lt;/div&gt;   &lt;div id=”center”&gt;&lt;/div&gt;   &lt;div id=”right”&gt;&lt;/div&gt;    &lt;/div&gt;   <br />
比如我们要将page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,<br />
但是我们会发现随着left center right的向下拉长,而 page居然保存高度不变,问题来了,<br />
原因在于page不是float属性,而我们的page由于要居中,不能设置成float,<br />
所以我们应该这样解决:    <br />
&lt;div id=”page”&gt;   <br />
&lt;div id=”bg” style=”float:left;width:100%”&gt;  <br />
&lt;div id=”left”&gt;&lt;/div&gt;   <br />
&lt;div id=”center”&gt;&lt;/div&gt;   <br />
&lt;div id=”right”&gt;&lt;/div&gt;   <br />
&lt;/div&gt;   <br />
&lt;/div&gt;   <br />
再嵌入一个float left而宽度是100%的DIV解决之 <br />
 </p>
<p><em><strong>10.万能float 闭合(非常重要!)     </strong></em><br />
关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup],将以下代码加入Global CSS 中,给需要闭合的div加上 即可,屡试不爽.   <br />
/* Clear Fix */ <br />
.clearfix:after { content:&#8221;.&#8221;; display:block; height:0; clear:both; visibility:hidden; }   <br />
.clearfix { display:inline-block; }    <br />
/* Hide from IE Mac */    <br />
.clearfix {display:block;}   <br />
/* End hide from IE Mac */   <br />
/* end of clearfix */    <br />
<strong>或者这样设置：.hackbox{ display:table; //将对象作为块元素级的表格显示}   </strong></p>
<p><strong><br />
11.高度不适应   </strong> <br />
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或paddign 时。    <br />
例：   <br />
#box {background-color:#eee; }     <br />
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }     <br />
&lt;div id=&#8221;box&#8221;&gt;     <br />
&lt;p&gt;p对象中的内容&lt;/p&gt;     <br />
&lt;/div&gt;     <br />
解决方法：<br />
在P对象上下各加2个空的div对象CSS代码：<br />
.1{height:0px;overflow:hidden;}或者为DIV加上border属性。<br />
<em><strong>12 .IE6下为什么图片下有空隙产生  </strong></em></p>
<p><em><strong><br />
</strong></em>解决这个BUG的方法也有很多,<br />
可以是改变html的排版,<br />
或者设置img 为display:block <br />
或者设置vertical-align 属性为 vertical-align:top | bottom |middle |text-bottom 都可以解决.<br />
<em><strong>13.如何对齐文本与文本输入框  </strong></em><br />
 </p>
<p>加上 vertical-align:middle; <br />
&lt;style type=&#8221;text/css&#8221;&gt; <br />
&lt;!&#8211; <br />
input {width:200px; height:30px;border:1px solid red;vertical-align:middle; }<br />
&#8211;&gt;<br />
&lt;/style&gt;<br />
<em><strong>14.web标准中定义id与class有什么区别吗? </strong></em><br />
一.web标准中是不容许重复ID的,比如 div id=&#8221;aa&#8221;   不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他. <br />
二.属性的优先级问题 ID 的优先级要高于class,看上面的例子<br />
三.方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单.<br />
 </p>
<p><em><strong>15. LI中内容超过长度后以省略号显示的方法  </strong></em></p>
<p><em><strong><br />
</strong></em>此方法适用与IE与OP浏览器 <br />
&lt;style type=&#8221;text/css&#8221;&gt; <br />
&lt;!&#8211;<br />
li {<br />
width:200px;<br />
white-space:nowrap;<br />
text-overflow:ellipsis;<br />
-o-text-overflow:ellipsis; <br />
overflow: hidden;     <br />
} <br />
&#8211;&gt; <br />
&lt;/style&gt;<br />
<strong>16.为什么web标准中IE无法设置滚动条颜色了<br />
</strong></p>
<p>解决办法是<br />
将body换成html <br />
&lt;!DOCTYPE html PUBLIC &#8220;-//W3C//DTD XHTML 1.0 Strict//EN&#8221; &#8220;<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>&#8220;&gt; <br />
&lt;meta http-equiv=&#8221;Content-Type&#8221; content=&#8221;text/html; charset=gb2312&#8243; /&gt; <br />
&lt;style type=&#8221;text/css&#8221;&gt; <br />
&lt;!&#8211; <br />
html {      <br />
scrollbar-face-color:#f6f6f6;      <br />
scrollbar-highlight-color:#fff;     <br />
scrollbar-shadow-color:#eeeeee;     <br />
scrollbar-3dlight-color:#eeeeee;      <br />
scrollbar-arrow-color:#000;      <br />
scrollbar-track-color:#fff;      <br />
scrollbar-darkshadow-color:#fff;      <br />
} <br />
&#8211;&gt; <br />
&lt;/style&gt;<br />
<strong>17.为什么无法定义1px左右高度的容器 </strong><br />
IE6下这个问题是因为默认的行高造成的,<br />
解决的方法也有很多<br />
例如:overflow:hidden | zoom:0.08 | line-height:1px<br />
<strong>18.怎么样才能让层显示在FLASH之上呢 </strong><br />
解决的办法是给FLASH设置透明 <br />
&lt;param name=&#8221;wmode&#8221; value=&#8221;transparent&#8221; /&gt;<br />
<strong>19.怎样使一个层垂直居中于浏览器中 </strong><br />
这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以2<br />
&lt;style type=&#8221;text/css&#8221;&gt; <br />
&lt;!—<br />
div <br />
{      <br />
position:absolute;      <br />
top:50%;      <br />
lef:50%;      <br />
margin:-100px 0 0 -100px;      <br />
width:200px;      <br />
height:200px;      <br />
border:1px solid red;      <br />
} <br />
&#8211;&gt; <br />
&lt;/style&gt;</p>
<p><strong>FF与IE</strong></p>
<p>1. Div居中问题<br />
div设置 margin-left, margin-right 为 auto 时已经居中，<br />
IE 不行，IE需要设定body居中，<br />
首先在父级元素定义text-algin: center;<br />
这个的意思就是在父级元素内的内容居中。   <br />
2.链接(a标签)的边框与背景<br />
a 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。<br />
参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, <br />
若不设 height, 可以在 menubar 中插入一个空格。<br />
3.超链接访问过后hover样式就不出现的问题<br />
被点击访问过的超链接样式不在具有hover和active了<br />
解决方法是<br />
改变CSS属性的排列顺序: L-V-H-A <br />
Code: <br />
&lt;style type=&#8221;text/css&#8221;&gt;<br />
&lt;!&#8211;<br />
a:link {} <br />
a:visited {} <br />
a:hover {} <br />
a:active {} <br />
&#8211;&gt;<br />
&lt;/style&gt;    <br />
4. 游标手指cursor <br />
cursor: pointer 可以同时在 IE FF 中显示游标手指状，<br />
hand 仅 IE 可以  <br />
5.UL的padding与margin<br />
ul标签在FF中默认是有padding值的,<br />
而在IE中只有margin默认有值,<br />
所以先定义 ul{margin:0;padding:0;}就能解决大部分问题   <br />
6. FORM标签   <br />
这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,<br />
因此,如果想显示一致,所以最好在css中指定margin和 padding,<br />
针对上面两个问题,我的css中一般首先都使用这样的样式<br />
ul,form{margin:0;padding:0;}<br />
给定义死了,所以后面就不会为这个头疼了.  <br />
7. BOX模型解释不一致问题   <br />
在FF和IE 中的BOX模型解释不一致导致相差2px<br />
解决方法：<br />
div{margin:30px!important;margin:28px;} <br />
注意这两个 margin的顺序一定不能写反， important这个属性IE不能识别，<br />
但别的浏览器可以识别。<br />
所以在IE下其实解释成这样： <br />
div {maring:30px;margin:28px}<br />
重复定义的话按照最后一个来执行，所以不可以只写margin:xx px!important;     <br />
#box<br />
{ <br />
width:600px; //for ie6.0\<br />
- w\idth:500px; //for ff+ie6.0}    <br />
#box{ <br />
width:600px!important //for ff <br />
width:600px; //for ff+ie6.0 <br />
width /**/:500px; //for ie6.0-}  <br />
8.属性选择器(这个不能算是兼容,是隐藏css的一个bug)    <br />
p[id]{}div[id]{}    <br />
这个对于IE6.0和IE6.0以下的版本都隐藏,<br />
FF和OPera作用.属性选择器和子选择器还是有区别的,<br />
子选择器的范围从形式来说缩小了,<br />
属性选择器的范围比较大,<br />
如p[id]中,所有p标签中有id的都是同样式的.  <br />
9.最狠的手段 &#8211; !important;    <br />
如果实在没有办法解决一些细节问题,<br />
可以用这个方法.FF对于”!important”会自动优先解析,<br />
然而IE则会忽略.<br />
如下   <br />
.tabd1<br />
{    <br />
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/    <br />
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}   <br />
值得注意的是，一定要将xxxx !important 这句放置在另一句之上，上面已经提过   <br />
10.IE,FF的默认值问题   <br />
或许你一直在抱怨为什么要专门为IE和FF写不同的CSS，<br />
为什么IE这样让人头疼，然后一边写css，一边咒骂那个可恶的M$ IE.<br />
其实对于css的标准支持方面，IE并没有我们想象的那么可恶，<br />
关键在于IE和FF的默认值不一样而已，掌握了这个技巧，<br />
你会发现写出兼容FF和IE的css并不是那么困难，或许对于简单的css，<br />
你完全可以不用”!important”这个东西了。    <br />
我们都知道，浏览器在显示网页的时候，都会根据网页的 css样式表来决定如何显示，<br />
但是我们在样式表中未必会将所有的元素都进行了具体的描述，<br />
当然也没有必要那么做，所以对于那些没有描述的属性，<br />
浏览器将采用内置默认的方式来进行显示，譬如文字，<br />
如果你没有在css中指定颜色，那么浏览器将采用黑色或者系统颜色来显示，div或者其他元素的背景，<br />
如果在 css中没有被指定，浏览器则将其设置为白色或者透明，等等其他未定义的样式均如此。<br />
所以有很多东西出现FF和IE显示不一样的根本原因在于它们的默认显示不一样，而这个默认样式该如何显示我知道在w3中有没有对应的标准来进行规定，<br />
因此对于这点也就别去怪罪IE了。<br />
11.为什么FF下文本无法撑开容器的高度<br />
标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,<br />
那我又想固定高度,又想能被撑开需要怎样设置呢？<br />
办法就是去掉height设置min-height:200px;   <br />
这里为了照顾不认识min-height的IE6 <br />
可以这样定义: { height:auto!important; height:200px; min-height:200px; }<br />
12.FireFox下如何使连续长字段自动换行<br />
众所周知IE中直接使用 word-wrap:break-word 就可以了, <br />
FF中我们使用JS插入的方法来解决 <br />
&lt;style type=&#8221;text/css&#8221;&gt; <br />
&lt;!&#8211;<br />
div <br />
{      <br />
width:300px;      <br />
word-wrap:break-word;      <br />
border:1px solid red; }<br />
&#8211;&gt; <br />
&lt;/style&gt; <br />
&lt;div id=&#8221;ff&#8221;&gt;这里是一行很长的文字aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&lt;/div&gt; <br />
&lt;scrīpt type=&#8221;text/javascrīpt&#8221;&gt; <br />
/* &lt;![CDATA[ */ <br />
function toBreakWord(el, intLen)<br />
{      <br />
var ōbj=document.getElementById(el);      <br />
var strContent=obj.innerHTML;      <br />
var strTemp="";      <br />
while(strContent.length&gt;intLen)<br />
{          <br />
strTemp+=strContent.substr(0,intLen)+" ";          <br />
strContent=strContent.substr(intLen,strContent.length);      <br />
}      <br />
strTemp+=" "+strContent;      <br />
obj.innerHTML=strTemp; <br />
} <br />
if(document.getElementById   &amp;&amp;   !document.all)   <br />
toBreakWord("ff", 37); <br />
/* ]]&gt; */ <br />
&lt;/scrīpt&gt; <br />
13.为什么IE6下容器的宽度和FF解释不同呢<br />
&lt;?xml version=&#8221;1.0&#8243; encoding=&#8221;gb2312&#8243;?&gt; <br />
&lt;!DOCTYPE html PUBLIC &#8220;-//W3C//DTD XHTML 1.0 Strict//EN&#8221; &#8220;<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>&#8220;&gt;<br />
&lt;meta http-equiv=&#8221;Content-Type&#8221; content=&#8221;text/html; charset=gb2312&#8243; /&gt;<br />
&lt;style type=&#8221;text/css&#8221;&gt;<br />
&lt;!&#8211;div <br />
{     <br />
cursor:pointer;      <br />
width:200px;     <br />
height:200px;      <br />
border:10px solid red      <br />
}<br />
&#8211;&gt; <br />
&lt;/style&gt; </p>
<p>&lt;div ōnclick=&#8221;alert(this.offsetWidth)&#8221;&gt;让FireFox与IE兼容&lt;/div&gt; <br />
问题的差别在于容器的整体宽度有没有将边框（border）的宽度算在其内,<br />
这里IE6解释为200PX ,而FF则解释为220PX,那究竟是怎么导致的问题呢？<br />
大家把容器顶部的xml去掉就会发现原来问题出在这,顶部的申明触发了IE的qurks mode,关于qurks mode、 standards mode的相关知识,<br />
请参考:http: //www.microsoft.com/china/msdn/library/webservices/asp.net/ ASPNETusStan.mspx?mfr=true<br />
IE6,IE7,FF   IE7.0 出来了，对CSS的支持又有新问题。浏览器多了，网页兼容性更差了，疲于奔命的还是我们 ，<br />
为解决IE7.0的兼容问题，找来了下面这篇文章：<br />
现在我大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，<br />
但是ie7对!important可以正确解释，会导致页面没按要求显示！<br />
 <br />
<em><strong>下面是三个浏览器的兼容性收集. </strong></em></p>
<p> <br />
第一种，是CSS HACK的方法    <br />
height:20px; /*For Firefox*/    <br />
*height:25px; /*For IE7 &amp; IE6*/    <br />
_height:20px; /*For IE6*/    <br />
注意顺序。 <br />
  <br />
这样也属于CSS HACK，不过没有上面这样简洁。    <br />
#example { color: #333; } /* Moz */    <br />
* html #example { color: #666; } /* IE6 */    <br />
*+html #example { color: #999; } /* IE7 */  </p>
<p>第二种,条件注释<br />
&lt;!&#8211;其他浏览器 –&gt;    <br />
&lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;css.css&#8221; /&gt;    <br />
&lt;!&#8211;[if IE 7]&gt;  &lt;!&#8211; 适合于IE7 –&gt;    <br />
&lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;ie7.css&#8221; /&gt;    <br />
&lt;![endif]—&gt;    <br />
&lt;!&#8211;[if lte IE 6]&gt;    <br />
&lt;!&#8211; 适合于IE6及一下 –&gt;    <br />
&lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;ie.css&#8221; /&gt;    <br />
&lt;![endif]—&gt;  <br />
第三种，css filter的办法，以下为经典从国外网站翻译过来的。<br />
新建一个css样式如下：    <br />
#item <br />
{         <br />
width: 200px;         <br />
height: 200px;         <br />
background: red;    <br />
}    <br />
新建一个div,并使用前面定义的css的样式：    <br />
&lt;div id=&#8221;item&#8221;&gt;some text here&lt;/div&gt;     <br />
在body表现这里加入lang属性,中文为zh： &lt;body lang=&#8221;en&#8221;&gt;     <br />
现在对div元素再定义一个样式：    *:lang(en) #item{ background:green !important;}     <br />
这样做是为了用!important覆盖原来的css样式,由于:lang选择器ie7.0并不支持,所以对这句话不会有任何作用,<br />
于是也达到了ie6.0下同样的效果,但是很不幸地的是,safari同样不支持此属性,所以需要加入以下css样式：    <br />
#item:empty {background: green !important    }     <br />
:empty选择器为css3的规范,尽管safari并不支持此规范,<br />
但是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除ie各版本以外的浏览器上。    <br />
对IE6和FF的兼容可以考虑以前的!important 第一种简洁，兼容性比较好。</p>
<h1><a href="http://www.media848.com/" target="_blank"></a></h1>
<br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/bluesunries.wordpress.com/178/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/bluesunries.wordpress.com/178/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godelicious/bluesunries.wordpress.com/178/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/delicious/bluesunries.wordpress.com/178/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gofacebook/bluesunries.wordpress.com/178/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/facebook/bluesunries.wordpress.com/178/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gotwitter/bluesunries.wordpress.com/178/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/twitter/bluesunries.wordpress.com/178/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gostumble/bluesunries.wordpress.com/178/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/stumble/bluesunries.wordpress.com/178/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godigg/bluesunries.wordpress.com/178/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/digg/bluesunries.wordpress.com/178/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/goreddit/bluesunries.wordpress.com/178/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/reddit/bluesunries.wordpress.com/178/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=bluesunries.wordpress.com&amp;blog=11014795&amp;post=178&amp;subd=bluesunries&amp;ref=&amp;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://bluesunries.wordpress.com/2010/04/03/web2-0%e7%bd%91%e7%ab%99css%e5%85%bc%e5%ae%b9ie6-ie7-ff%e6%95%99%e7%a8%8b%e5%a4%a7%e5%85%a8/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<media:content url="http://1.gravatar.com/avatar/3d66e1387fd140da99bab12dcc826be7?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">bluesunries</media:title>
		</media:content>
	</item>
		<item>
		<title>HTML字符实体（Character Entities），转义字符串（Escape Sequence）</title>
		<link>http://bluesunries.wordpress.com/2010/03/16/html%e5%ad%97%e7%ac%a6%e5%ae%9e%e4%bd%93%ef%bc%88character-entities%ef%bc%89%ef%bc%8c%e8%bd%ac%e4%b9%89%e5%ad%97%e7%ac%a6%e4%b8%b2%ef%bc%88escape-sequence%ef%bc%89/</link>
		<comments>http://bluesunries.wordpress.com/2010/03/16/html%e5%ad%97%e7%ac%a6%e5%ae%9e%e4%bd%93%ef%bc%88character-entities%ef%bc%89%ef%bc%8c%e8%bd%ac%e4%b9%89%e5%ad%97%e7%ac%a6%e4%b8%b2%ef%bc%88escape-sequence%ef%bc%89/#comments</comments>
		<pubDate>Tue, 16 Mar 2010 06:50:26 +0000</pubDate>
		<dc:creator>bluesunries</dc:creator>
				<category><![CDATA[前台设计]]></category>

		<guid isPermaLink="false">http://bluesunries.wordpress.com/?p=173</guid>
		<description><![CDATA[为什么要用转义字符串？ HTML中&#60;，&#62;，&#38;等有特殊含义（&#60;，&#62;，用于链接签，&#38;用于转义），不能直接使用。这些符号是不显示在我们最终看到的网页里的，那如果我们希望在网页中显示这些符号，该怎么办呢？  这就要说到HTML转义字符串（Escape Sequence）了。  转义字符串（Escape Sequence）也称字符实体(Character Entity)。在HTML中，定义转义字符串的原因有两个：第一个原因是像“&#60;”和“&#62;”这类符号已经用来表示HTML标签，因此就不能直接当作文本中的符号来使用。为了在HTML文档中使用这些符号，就需要定义它的转义字符串。当解释程序遇到这类字符串时就把它解释为真实的字符。在输入转义字符串时，要严格遵守字母大小写的规则。第二个原因是，有些字符在ASCII字符集中没有定义，因此需要使用转义字符串来表示。  转义字符串的组成 转义字符串（Escape Sequence），即字符实体（Character Entity）分成三部分：第一部分是一个&#38;符号，英文叫ampersand；第二部分是实体（Entity）名字或者是#加上实体（Entity）编号；第三部分是一个分号。  比如，要显示小于号（&#60;），就可以写 &#38;lt; 或者 &#60; 。  用实体（Entity）名字的好处是比较好理解，一看lt，大概就猜出是less than的意思，但是其劣势在于并不是所有的浏览器都支持最新的Entity名字。而实体(Entity)编号，各种浏览器都能处理。  提示：实体名称（Entity）是区分大小写的。  备注：同一个符号，可以用“实体名称”和“实体编号”两种方式引用，“实体名称”的优势在于便于记忆，但不能保证所有的浏览器都能顺利识别它，而“实体编号”则没有这种担忧，但它实在不方便记忆。  如何显示空格？ 通常情况下，HTML会自动截去多余的空格。不管你加多少空格，都被看做一个空格。比如你在两个字之间加了10个空格，HTML会截去9个空格，只保留一个。为了在网页中增加空格，你可以使用&#38;nbsp;表示空格。  HTML特殊转义字符列表 最常用的字符实体 Character Entities 显示 说明 实体名称 实体编号   半方大的空白 &#38;ensp; &#8194;   全方大的空白 &#38;emsp; &#8195;   不断行的空白格 &#38;nbsp; &#160; &#60; 小于 &#38;lt; &#60; &#62; 大于 &#38;gt; &#62; &#38; &#38;符号 &#38;amp; &#38; &#8220; [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=bluesunries.wordpress.com&amp;blog=11014795&amp;post=173&amp;subd=bluesunries&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
			<content:encoded><![CDATA[<div>
<h2>为什么要用转义字符串？</h2>
<p>HTML中&lt;，&gt;，&amp;等有特殊含义（&lt;，&gt;，用于链接签，&amp;用于转义），不能直接使用。这些符号是不显示在我们最终看到的网页里的，那如果我们希望在网页中显示这些符号，该怎么办呢？ </p>
<p>这就要说到HTML转义字符串（Escape Sequence）了。 </p>
<p><a title="常用HTML转义字符,html转义符" href="http://114.xixik.com/character/">转义字符串</a>（Escape Sequence）也称字符实体(Character Entity)。在HTML中，定义转义字符串的原因有两个：第一个原因是像“&lt;”和“&gt;”这类符号已经用来表示HTML标签，因此就不能直接当作文本中的符号来使用。为了在HTML文档中使用这些符号，就需要定义它的转义字符串。当解释程序遇到这类字符串时就把它解释为真实的字符。在输入转义字符串时，要严格遵守字母大小写的规则。第二个原因是，有些字符在ASCII字符集中没有定义，因此需要使用转义字符串来表示。 </p>
<p><!-- Contents of this file are Copyright 2006-2008, Xixik Inc. --></p>
<h2>转义字符串的组成</h2>
<p>转义字符串（Escape Sequence），即字符实体（Character Entity）分成三部分：第一部分是一个&amp;符号，英文叫ampersand；第二部分是实体（Entity）名字或者是#加上实体（Entity）编号；第三部分是一个分号。 </p>
<p>比如，要显示小于号（&lt;），就可以写 &amp;lt; 或者 &#60; 。 </p>
<p>用实体（Entity）名字的好处是比较好理解，一看lt，大概就猜出是less than的意思，但是其劣势在于并不是所有的浏览器都支持最新的Entity名字。而实体(Entity)编号，各种浏览器都能处理。 </p>
<p>提示：实体名称（Entity）是区分大小写的。 </p>
<p>备注：同一个符号，可以用“实体名称”和“实体编号”两种方式引用，“实体名称”的优势在于便于记忆，但不能保证所有的浏览器都能顺利识别它，而“实体编号”则没有这种担忧，但它实在不方便记忆。 </p>
<h2>如何显示空格？</h2>
<p>通常情况下，HTML会自动截去多余的空格。不管你加多少空格，都被看做一个空格。比如你在两个字之间加了10个空格，HTML会截去9个空格，只保留一个。为了在网页中增加空格，你可以使用&amp;nbsp;表示空格。 </p>
<div>
<hr />
<h1>HTML特殊转义字符列表</h1>
<h2>最常用的字符实体<br />
Character Entities</h2>
</div>
<table width="400">
<tbody>
<tr>
<th>显示</th>
<th>说明</th>
<th>实体名称</th>
<th>实体编号</th>
</tr>
<tr>
<td> </td>
<td>半方大的空白</td>
<td>&amp;ensp;</td>
<td>&#8194;</td>
</tr>
<tr>
<td> </td>
<td>全方大的空白</td>
<td>&amp;emsp;</td>
<td>&#8195;</td>
</tr>
<tr>
<td> </td>
<td>不断行的空白格</td>
<td>&amp;nbsp;</td>
<td>&#160;</td>
</tr>
<tr>
<td>&lt;</td>
<td>小于</td>
<td>&amp;lt;</td>
<td>&#60;</td>
</tr>
<tr>
<td>&gt;</td>
<td>大于</td>
<td>&amp;gt;</td>
<td>&#62;</td>
</tr>
<tr>
<td>&amp;</td>
<td>&amp;符号</td>
<td>&amp;amp;</td>
<td>&#38;</td>
</tr>
<tr>
<td>&#8220;</td>
<td>双引号</td>
<td>&amp;quot;</td>
<td>&#34;</td>
</tr>
<tr>
<td>©</td>
<td>版权</td>
<td>&amp;copy;</td>
<td>&#169;</td>
</tr>
<tr>
<td>®</td>
<td>已注册商标</td>
<td>&amp;reg;</td>
<td>&#174;</td>
</tr>
<tr>
<td>™</td>
<td>商标（美国）</td>
<td>™</td>
<td>&#8482;</td>
</tr>
<tr>
<td>×</td>
<td>乘号</td>
<td>&amp;times;</td>
<td>&#215;</td>
</tr>
<tr>
<td>÷</td>
<td>除号</td>
<td>&amp;divide;</td>
<td>&#247;</td>
</tr>
</tbody>
</table>
<div>
<h2>ISO 8859-1 (Latin-1)字符集</h2>
<p>HTML 4.01 支持 ISO 8859-1 (Latin-1) 字符集。 </p>
<p>备注：为了方便起见，以下表格中，“实体名称”简称为“名称”，“实体编号”简称为“编号”</p>
<table width="778">
<tbody>
<tr>
<th>显示</th>
<th>名称</th>
<th>编号</th>
<th>显示</th>
<th>名称</th>
<th>编号</th>
<th>显示</th>
<th>名称</th>
<th>编号</th>
<th>显示</th>
<th>名称</th>
<th>编号</th>
<th>显示</th>
<th>名称</th>
<th>编号</th>
</tr>
<tr>
<td> </td>
<td>&amp;nbsp;</td>
<td>&#160;</td>
<td>¡</td>
<td>&amp;iexcl;</td>
<td>&#161;</td>
<td>¢</td>
<td>&amp;cent;</td>
<td>&#162;</td>
<td>£</td>
<td>&amp;pound;</td>
<td>&#163;</td>
<td>¤</td>
<td>&amp;curren;</td>
<td>&#164;</td>
</tr>
<tr>
<td>¥</td>
<td>&amp;yen;</td>
<td>&#165;</td>
<td>¦</td>
<td>&amp;brvbar;</td>
<td>&#166;</td>
<td>§</td>
<td>&amp;sect;</td>
<td>&#167;</td>
<td>¨</td>
<td>&amp;uml;</td>
<td>&#168;</td>
<td>©</td>
<td>&amp;copy;</td>
<td>&#169;</td>
</tr>
<tr>
<td>ª</td>
<td>&amp;ordf;</td>
<td>&#170;</td>
<td>«</td>
<td>&amp;laquo;</td>
<td>&#171;</td>
<td>¬</td>
<td>&amp;not;</td>
<td>&#172;</td>
<td>­</td>
<td>&amp;shy;</td>
<td>&#173;</td>
<td>®</td>
<td>&amp;reg;</td>
<td>&#174;</td>
</tr>
<tr>
<td>¯</td>
<td>&amp;macr;</td>
<td>&#175;</td>
<td>°</td>
<td>&amp;deg;</td>
<td>&#176;</td>
<td>±</td>
<td>&amp;plusmn;</td>
<td>&#177;</td>
<td>²</td>
<td>&amp;sup2;</td>
<td>&#178;</td>
<td>³</td>
<td>&amp;sup3;</td>
<td>&#179;</td>
</tr>
<tr>
<td>´</td>
<td>&amp;acute;</td>
<td>&#180;</td>
<td>µ</td>
<td>&amp;micro;</td>
<td>&#181;</td>
<td>¶</td>
<td>&amp;para;</td>
<td>&#182;</td>
<td>·</td>
<td>&amp;middot;</td>
<td>&#183;</td>
<td>¸</td>
<td>&amp;cedil;</td>
<td>&#184;</td>
</tr>
<tr>
<td>¹</td>
<td>&amp;sup1;</td>
<td>&#185;</td>
<td>º</td>
<td>&amp;ordm;</td>
<td>&#186;</td>
<td>»</td>
<td>&amp;raquo;</td>
<td>&#187;</td>
<td>¼</td>
<td>&amp;frac14;</td>
<td>&#188;</td>
<td>½</td>
<td>&amp;frac12;</td>
<td>&#189;</td>
</tr>
<tr>
<td>¾</td>
<td>&amp;frac34;</td>
<td>&#190;</td>
<td>¿</td>
<td>&amp;iquest;</td>
<td>&#191;</td>
<td>À</td>
<td>&amp;Agrave;</td>
<td>&#192;</td>
<td>Á</td>
<td>&amp;Aacute;</td>
<td>&#193;</td>
<td>Â</td>
<td>&amp;Acirc;</td>
<td>&#194;</td>
</tr>
<tr>
<td>Ã</td>
<td>&amp;Atilde;</td>
<td>&#195;</td>
<td>Ä</td>
<td>&amp;Auml;</td>
<td>&#196;</td>
<td>Å</td>
<td>&amp;Aring;</td>
<td>&#197;</td>
<td>Æ</td>
<td>&amp;AElig;</td>
<td>&#198;</td>
<td>Ç</td>
<td>&amp;Ccedil;</td>
<td>&#199;</td>
</tr>
<tr>
<td>È</td>
<td>&amp;Egrave;</td>
<td>&#200;</td>
<td>É</td>
<td>&amp;Eacute;</td>
<td>&#201;</td>
<td>Ê</td>
<td>&amp;Ecirc;</td>
<td>&#202;</td>
<td>Ë</td>
<td>&amp;Euml;</td>
<td>&#203;</td>
<td>Ì</td>
<td>&amp;Igrave;</td>
<td>&#204;</td>
</tr>
<tr>
<td>Í</td>
<td>&amp;Iacute;</td>
<td>&#205;</td>
<td>Î</td>
<td>&amp;Icirc;</td>
<td>&#206;</td>
<td>Ï</td>
<td>&amp;Iuml;</td>
<td>&#207;</td>
<td>Ð</td>
<td>&amp;ETH;</td>
<td>&#208;</td>
<td>Ñ</td>
<td>&amp;Ntilde;</td>
<td>&#209;</td>
</tr>
<tr>
<td>Ò</td>
<td>&amp;Ograve;</td>
<td>&#210;</td>
<td>Ó</td>
<td>&amp;Oacute;</td>
<td>&#211;</td>
<td>Ô</td>
<td>&amp;Ocirc;</td>
<td>&#212;</td>
<td>Õ</td>
<td>&amp;Otilde;</td>
<td>&#213;</td>
<td>Ö</td>
<td>&amp;Ouml;</td>
<td>&#214;</td>
</tr>
<tr>
<td>×</td>
<td>&amp;times;</td>
<td>&#215;</td>
<td>Ø</td>
<td>&amp;Oslash;</td>
<td>&#216;</td>
<td>Ù</td>
<td>&amp;Ugrave;</td>
<td>&#217;</td>
<td>Ú</td>
<td>&amp;Uacute;</td>
<td>&#218;</td>
<td>Û</td>
<td>&amp;Ucirc;</td>
<td>&#219;</td>
</tr>
<tr>
<td>Ü</td>
<td>&amp;Uuml;</td>
<td>&#220;</td>
<td>Ý</td>
<td>&amp;Yacute;</td>
<td>&#221;</td>
<td>Þ</td>
<td>&amp;THORN;</td>
<td>&#222;</td>
<td>ß</td>
<td>&amp;szlig;</td>
<td>&#223;</td>
<td>à</td>
<td>&amp;agrave;</td>
<td>&#224;</td>
</tr>
<tr>
<td>á</td>
<td>&amp;aacute;</td>
<td>&#225;</td>
<td>â</td>
<td>&amp;acirc;</td>
<td>&#226;</td>
<td>ã</td>
<td>&amp;atilde;</td>
<td>&#227;</td>
<td>ä</td>
<td>&amp;auml;</td>
<td>&#228;</td>
<td>å</td>
<td>&amp;aring;</td>
<td>&#229;</td>
</tr>
<tr>
<td>æ</td>
<td>&amp;aelig;</td>
<td>&#230;</td>
<td>ç</td>
<td>&amp;ccedil;</td>
<td>&#231;</td>
<td>è</td>
<td>&amp;egrave;</td>
<td>&#232;</td>
<td>é</td>
<td>&amp;eacute;</td>
<td>&#233;</td>
<td>ê</td>
<td>&amp;ecirc;</td>
<td>&#234;</td>
</tr>
<tr>
<td>ë</td>
<td>&amp;euml;</td>
<td>&#235;</td>
<td>ì</td>
<td>&amp;igrave;</td>
<td>&#236;</td>
<td>í</td>
<td>&amp;iacute;</td>
<td>&#237;</td>
<td>î</td>
<td>&amp;icirc;</td>
<td>&#238;</td>
<td>ï</td>
<td>&amp;iuml;</td>
<td>&#239;</td>
</tr>
<tr>
<td>ð</td>
<td>&amp;eth;</td>
<td>&#240;</td>
<td>ñ</td>
<td>&amp;ntilde;</td>
<td>&#241;</td>
<td>ò</td>
<td>&amp;ograve;</td>
<td>&#242;</td>
<td>ó</td>
<td>&amp;oacute;</td>
<td>&#243;</td>
<td>ô</td>
<td>&amp;ocirc;</td>
<td>&#244;</td>
</tr>
<tr>
<td>õ</td>
<td>&amp;otilde;</td>
<td>&#245;</td>
<td>ö</td>
<td>&amp;ouml;</td>
<td>&#246;</td>
<td>÷</td>
<td>&amp;divide;</td>
<td>&#247;</td>
<td>ø</td>
<td>&amp;oslash;</td>
<td>&#248;</td>
<td>ù</td>
<td>&amp;ugrave;</td>
<td>&#249;</td>
</tr>
<tr>
<td>ú</td>
<td>&amp;uacute;</td>
<td>&#250;</td>
<td>û</td>
<td>&amp;ucirc;</td>
<td>&#251;</td>
<td>ü</td>
<td>&amp;uuml;</td>
<td>&#252;</td>
<td>ý</td>
<td>&amp;yacute;</td>
<td>&#253;</td>
<td>þ</td>
<td>&amp;thorn;</td>
<td>&#254;</td>
</tr>
<tr>
<td>ÿ</td>
<td>&amp;yuml;</td>
<td>&#255;</td>
</tr>
</tbody>
</table>
<h2>数学和希腊字母标志<br />
symbols, mathematical symbols, and Greek letters</h2>
<table width="778">
<tbody>
<tr>
<th>显示</th>
<th>名称</th>
<th>编号</th>
<th>显示</th>
<th>名称</th>
<th>编号</th>
<th>显示</th>
<th>名称</th>
<th>编号</th>
<th>显示</th>
<th>名称</th>
<th>编号</th>
<th>显示</th>
<th>名称</th>
<th>编号</th>
</tr>
<tr>
<td>ƒ</td>
<td>&amp;fnof;</td>
<td>&#402;</td>
<td>Α</td>
<td>&amp;Alpha;</td>
<td>&#913;</td>
<td>Β</td>
<td>&amp;Beta;</td>
<td>&#914;</td>
<td>Γ</td>
<td>&amp;Gamma;</td>
<td>&#915;</td>
<td>Δ</td>
<td>&amp;Delta;</td>
<td>&#916;</td>
</tr>
<tr>
<td>Ε</td>
<td>&amp;Epsilon;</td>
<td>&#917;</td>
<td>Ζ</td>
<td>&amp;Zeta;</td>
<td>&#918;</td>
<td>Η</td>
<td>&amp;Eta;</td>
<td>&#919;</td>
<td>Θ</td>
<td>&amp;Theta;</td>
<td>&#920;</td>
<td>Ι</td>
<td>&amp;Iota;</td>
<td>&#921;</td>
</tr>
<tr>
<td>Κ</td>
<td>&amp;Kappa;</td>
<td>&#922;</td>
<td>Λ</td>
<td>&amp;Lambda;</td>
<td>&#923;</td>
<td>Μ</td>
<td>&amp;Mu;</td>
<td>&#924;</td>
<td>Ν</td>
<td>&amp;Nu;</td>
<td>&#925;</td>
<td>Ξ</td>
<td>&amp;Xi;</td>
<td>&#926;</td>
</tr>
<tr>
<td>Ο</td>
<td>&amp;Omicron;</td>
<td>&#927;</td>
<td>Π</td>
<td>&amp;Pi;</td>
<td>&#928;</td>
<td>Ρ</td>
<td>&amp;Rho;</td>
<td>&#929;</td>
<td>Σ</td>
<td>&amp;Sigma;</td>
<td>&#931;</td>
<td>Τ</td>
<td>&amp;Tau;</td>
<td>&#932;</td>
</tr>
<tr>
<td>Υ</td>
<td>&amp;Upsilon;</td>
<td>&#933;</td>
<td>Φ</td>
<td>&amp;Phi;</td>
<td>&#934;</td>
<td>Χ</td>
<td>&amp;Chi;</td>
<td>&#935;</td>
<td>Ψ</td>
<td>&amp;Psi;</td>
<td>&#936;</td>
<td>Ω</td>
<td>&amp;Omega;</td>
<td>&#937;</td>
</tr>
<tr>
<td>α</td>
<td>&amp;alpha;</td>
<td>&#945;</td>
<td>β</td>
<td>&amp;beta;</td>
<td>&#946;</td>
<td>γ</td>
<td>&amp;gamma;</td>
<td>&#947;</td>
<td>δ</td>
<td>&amp;delta;</td>
<td>&#948;</td>
<td>ε</td>
<td>&amp;epsilon;</td>
<td>&#949;</td>
</tr>
<tr>
<td>ζ</td>
<td>&amp;zeta;</td>
<td>&#950;</td>
<td>η</td>
<td>&amp;eta;</td>
<td>&#951;</td>
<td>θ</td>
<td>&amp;theta;</td>
<td>&#952;</td>
<td>ι</td>
<td>&amp;iota;</td>
<td>&#953;</td>
<td>κ</td>
<td>&amp;kappa;</td>
<td>&#954;</td>
</tr>
<tr>
<td>λ</td>
<td>&amp;lambda;</td>
<td>&#955;</td>
<td>μ</td>
<td>&amp;mu;</td>
<td>&#956;</td>
<td>ν</td>
<td>&amp;nu;</td>
<td>&#957;</td>
<td>ξ</td>
<td>&amp;xi;</td>
<td>&#958;</td>
<td>ο</td>
<td>&amp;omicron;</td>
<td>&#959;</td>
</tr>
<tr>
<td>π</td>
<td>&amp;pi;</td>
<td>&#960;</td>
<td>ρ</td>
<td>&amp;rho;</td>
<td>&#961;</td>
<td>ς</td>
<td>&amp;sigmaf;</td>
<td>&#962;</td>
<td>σ</td>
<td>&amp;sigma;</td>
<td>&#963;</td>
<td>τ</td>
<td>&amp;tau;</td>
<td>&#964;</td>
</tr>
<tr>
<td>υ</td>
<td>&amp;upsilon;</td>
<td>&#965;</td>
<td>φ</td>
<td>&amp;phi;</td>
<td>&#966;</td>
<td>χ</td>
<td>&amp;chi;</td>
<td>&#967;</td>
<td>ψ</td>
<td>&amp;psi;</td>
<td>&#968;</td>
<td>ω</td>
<td>&amp;omega;</td>
<td>&#969;</td>
</tr>
<tr>
<td>?</td>
<td>&amp;thetasym;</td>
<td>&#977;</td>
<td>?</td>
<td>&amp;upsih;</td>
<td>&#978;</td>
<td>?</td>
<td>&amp;piv;</td>
<td>&#982;</td>
<td>•</td>
<td>&amp;bull;</td>
<td>&#8226;</td>
<td>…</td>
<td>&amp;hellip;</td>
<td>&#8230;</td>
</tr>
<tr>
<td>′</td>
<td>&amp;prime;</td>
<td>&#8242;</td>
<td>″</td>
<td>&amp;Prime;</td>
<td>&#8243;</td>
<td>‾</td>
<td>&amp;oline;</td>
<td>&#8254;</td>
<td>⁄</td>
<td>&amp;frasl;</td>
<td>&#8260;</td>
<td>℘</td>
<td>&amp;weierp;</td>
<td>&#8472;</td>
</tr>
<tr>
<td>ℑ</td>
<td>&amp;image;</td>
<td>&#8465;</td>
<td>ℜ</td>
<td>&amp;real;</td>
<td>&#8476;</td>
<td>™</td>
<td>&amp;trade;</td>
<td>&#8482;</td>
<td>ℵ</td>
<td>&amp;alefsym;</td>
<td>&#8501;</td>
<td>←</td>
<td>&amp;larr;</td>
<td>&#8592;</td>
</tr>
<tr>
<td>↑</td>
<td>&amp;uarr;</td>
<td>&#8593;</td>
<td>→</td>
<td>&amp;rarr;</td>
<td>&#8594;</td>
<td>↓</td>
<td>&amp;darr;</td>
<td>&#8595;</td>
<td>↔</td>
<td>&amp;harr;</td>
<td>&#8596;</td>
<td>↵</td>
<td>&amp;crarr;</td>
<td>&#8629;</td>
</tr>
<tr>
<td>⇐</td>
<td>&amp;lArr;</td>
<td>&#8656;</td>
<td>⇑</td>
<td>&amp;uArr;</td>
<td>&#8657;</td>
<td>⇒</td>
<td>&amp;rArr;</td>
<td>&#8658;</td>
<td>⇓</td>
<td>&amp;dArr;</td>
<td>&#8659;</td>
<td>⇔</td>
<td>&amp;hArr;</td>
<td>&#8660;</td>
</tr>
<tr>
<td>∀</td>
<td>&amp;forall;</td>
<td>&#8704;</td>
<td>∂</td>
<td>&amp;part;</td>
<td>&#8706;</td>
<td>∃</td>
<td>&amp;exist;</td>
<td>&#8707;</td>
<td>∅</td>
<td>&amp;empty;</td>
<td>&#8709;</td>
<td>∇</td>
<td>&amp;nabla;</td>
<td>&#8711;</td>
</tr>
<tr>
<td>∈</td>
<td>&amp;isin;</td>
<td>&#8712;</td>
<td>∉</td>
<td>&amp;notin;</td>
<td>&#8713;</td>
<td>∋</td>
<td>&amp;ni;</td>
<td>&#8715;</td>
<td>∏</td>
<td>&amp;prod;</td>
<td>&#8719;</td>
<td>∑</td>
<td>&amp;sum;</td>
<td>&#8721;</td>
</tr>
<tr>
<td>−</td>
<td>&amp;minus;</td>
<td>&#8722;</td>
<td>∗</td>
<td>&amp;lowast;</td>
<td>&#8727;</td>
<td>√</td>
<td>&amp;radic;</td>
<td>&#8730;</td>
<td>∝</td>
<td>&amp;prop;</td>
<td>&#8733;</td>
<td>∞</td>
<td>&amp;infin;</td>
<td>&#8734;</td>
</tr>
<tr>
<td>∠</td>
<td>&amp;ang;</td>
<td>&#8736;</td>
<td>∧</td>
<td>&amp;and;</td>
<td>&#8743;</td>
<td>∨</td>
<td>&amp;or;</td>
<td>&#8744;</td>
<td>∩</td>
<td>&amp;cap;</td>
<td>&#8745;</td>
<td>∪</td>
<td>&amp;cup;</td>
<td>&#8746;</td>
</tr>
<tr>
<td>∫</td>
<td>&amp;int;</td>
<td>&#8747;</td>
<td>∴</td>
<td>&amp;there4;</td>
<td>&#8756;</td>
<td>∼</td>
<td>&amp;sim;</td>
<td>&#8764;</td>
<td>∝</td>
<td>&amp;cong;</td>
<td>&#8773;</td>
<td>≈</td>
<td>&amp;asymp;</td>
<td>&#8776;</td>
</tr>
<tr>
<td>≠</td>
<td>&amp;ne;</td>
<td>&#8800;</td>
<td>≡</td>
<td>&amp;equiv;</td>
<td>&#8801;</td>
<td>≤</td>
<td>&amp;le;</td>
<td>&#8804;</td>
<td>≥</td>
<td>&amp;ge;</td>
<td>&#8805;</td>
<td>⊂</td>
<td>&amp;sub;</td>
<td>&#8834;</td>
</tr>
<tr>
<td>⊃</td>
<td>&amp;sup;</td>
<td>&#8835;</td>
<td>⊄</td>
<td>&amp;nsub;</td>
<td>&#8836;</td>
<td>⊆</td>
<td>&amp;sube;</td>
<td>&#8838;</td>
<td>⊇</td>
<td>&amp;supe;</td>
<td>&#8839;</td>
<td>⊕</td>
<td>&amp;oplus;</td>
<td>&#8853;</td>
</tr>
<tr>
<td>⊗</td>
<td>&amp;otimes;</td>
<td>&#8855;</td>
<td>⊥</td>
<td>&amp;perp;</td>
<td>&#8869;</td>
<td>⋅</td>
<td>&amp;sdot;</td>
<td>&#8901;</td>
<td>?</td>
<td>&amp;lceil;</td>
<td>&#8968;</td>
<td>?</td>
<td>&amp;rceil;</td>
<td>&#8969;</td>
</tr>
<tr>
<td>?</td>
<td>&amp;lfloor;</td>
<td>&#8970;</td>
<td>?</td>
<td>&amp;rfloor;</td>
<td>&#8971;</td>
<td>?</td>
<td>&amp;lang;</td>
<td>&#9001;</td>
<td>?</td>
<td>&amp;rang;</td>
<td>&#9002;</td>
<td>◊</td>
<td>&amp;loz;</td>
<td>&#9674;</td>
</tr>
<tr>
<td>♠</td>
<td>&amp;spades;</td>
<td>&#9824;</td>
<td>♣</td>
<td>&amp;clubs;</td>
<td>&#9827;</td>
<td>♥</td>
<td>&amp;hearts;</td>
<td>&#9829;</td>
<td>♦</td>
<td>&amp;diams;</td>
<td>&#9830;</td>
</tr>
</tbody>
</table>
<h2>重要的国际标记<br />
markup-significant and internationalization characters</h2>
<table width="778">
<tbody>
<tr>
<th>显示</th>
<th>名称</th>
<th>编号</th>
<th>显示</th>
<th>名称</th>
<th>编号</th>
<th>显示</th>
<th>名称</th>
<th>编号</th>
<th>显示</th>
<th>名称</th>
<th>编号</th>
<th>显示</th>
<th>名称</th>
<th>编号</th>
</tr>
<tr>
<td>&#8220;</td>
<td>&amp;quot;</td>
<td>&#34;</td>
<td>&amp;</td>
<td>&amp;amp;</td>
<td>&#38;</td>
<td>&lt;</td>
<td>&amp;lt;</td>
<td>&#60;</td>
<td>&gt;</td>
<td>&amp;gt;</td>
<td>&#62;</td>
<td>Œ</td>
<td>&amp;OElig;</td>
<td>&#338;</td>
</tr>
<tr>
<td>œ</td>
<td>&amp;oelig;</td>
<td>&#339;</td>
<td>Š</td>
<td>&amp;Scaron;</td>
<td>&#352;</td>
<td>š</td>
<td>&amp;scaron;</td>
<td>&#353;</td>
<td>Ÿ</td>
<td>&amp;Yuml;</td>
<td>&#376;</td>
<td>ˆ</td>
<td>&amp;circ;</td>
<td>&#710;</td>
</tr>
<tr>
<td>˜</td>
<td>&amp;tilde;</td>
<td>&#732;</td>
<td> </td>
<td>&amp;ensp;</td>
<td>&#8194;</td>
<td> </td>
<td>&amp;emsp;</td>
<td>&#8195;</td>
<td> </td>
<td>&amp;thinsp;</td>
<td>&#8201;</td>
<td>‌</td>
<td>&amp;zwnj;</td>
<td>&#8204;</td>
</tr>
<tr>
<td>‍</td>
<td>&amp;zwj;</td>
<td>&#8205;</td>
<td>‎</td>
<td>&amp;lrm;</td>
<td>&#8206;</td>
<td>‏</td>
<td>&amp;rlm;</td>
<td>&#8207;</td>
<td>–</td>
<td>&amp;ndash;</td>
<td>&#8211;</td>
<td>—</td>
<td>&amp;mdash;</td>
<td>&#8212;</td>
</tr>
<tr>
<td>‘</td>
<td>&amp;lsquo;</td>
<td>&#8216;</td>
<td>’</td>
<td>&amp;rsquo;</td>
<td>&#8217;</td>
<td>‚</td>
<td>&amp;sbquo;</td>
<td>&#8218;</td>
<td>“</td>
<td>&amp;ldquo;</td>
<td>&#8220;</td>
<td>”</td>
<td>&amp;rdquo;</td>
<td>&#8221;</td>
</tr>
<tr>
<td>„</td>
<td>&amp;bdquo;</td>
<td>&#8222;</td>
<td>†</td>
<td>&amp;dagger;</td>
<td>&#8224;</td>
<td>‡</td>
<td>&amp;Dagger;</td>
<td>&#8225;</td>
<td>‰</td>
<td>&amp;permil;</td>
<td>&#8240;</td>
<td>‹</td>
<td>&amp;lsaquo;</td>
<td>&#8249;</td>
</tr>
<tr>
<td>›</td>
<td>&amp;rsaquo;</td>
<td>&#8250;</td>
<td>€</td>
<td>&amp;euro;</td>
<td>&#8364;</td>
</tr>
</tbody>
</table>
<div>
<hr />
<h2>JavaScript转义符</h2>
</div>
</div>
<table width="480">
<tbody>
<tr>
<th width="35%">转义序列</th>
<th width="65%">字符</th>
</tr>
<tr valign="top">
<td width="35%">\b</td>
<td width="65%">退格</td>
</tr>
<tr valign="top">
<td width="35%">\f</td>
<td width="65%">走纸换页</td>
</tr>
<tr valign="top">
<td width="35%">\n</td>
<td width="65%">换行</td>
</tr>
<tr valign="top">
<td width="35%">\r</td>
<td width="65%">回车</td>
</tr>
<tr valign="top">
<td width="35%">\t</td>
<td width="65%">横向跳格 (Ctrl-I)</td>
</tr>
<tr valign="top">
<td width="35%">\&#8217;</td>
<td width="65%">单引号</td>
</tr>
<tr valign="top">
<td width="35%">\&#8221;</td>
<td width="65%">双引号</td>
</tr>
<tr valign="top">
<td width="35%">\\</td>
<td width="65%">反斜杠</td>
</tr>
</tbody>
</table>
<div>
<div>
<p>编程的时候要注意特殊字符的问题，很多运行时出现的问题都是因为特殊字符的出现而引起的。 </p>
<p>注意，由于反斜杠本身用作转义符，因此不能直接在脚本中键入一个反斜杠。如果要产生一个反斜杠，必须一起键入两个反斜杠 (\\)。 </p>
<div>
<hr />
<h2><strong>编码转换</strong>（to Unicode）</h2>
<p>（程序代码来源于网络） </p>
<p><strong>Js版 </strong> </p>
<pre>&lt;script&gt;
     test = "你好abc"
     str = ""
     for( i=0;    i&lt;test.length; i++ )
     {
      temp = test.charCodeAt(i).toString(16);
      str    += "\\u"+ new Array(5-String(temp).length).join("0") +temp;
     }
     document.write (str)
&lt;/script&gt;</pre>
<p><strong>vbs版</strong> </p>
<pre>Function Unicode(str1)
     Dim str,temp
     str = ""
     For i=1    to len(str1)
      temp = Hex(AscW(Mid(str1,i,1)))
      If len(temp) &lt; 5 Then    temp = right("0000" &amp; temp, 4)
      str = str &amp; "\u" &amp; temp
     Next
     Unicode = str
End Function</pre>
<pre>Function htmlentities(str)
     For i = 1 to Len(str)
         char = mid(str, i, 1)
         If Ascw(char) &gt; 128 then
             htmlentities = htmlentities &amp; "&amp;#" &amp; Ascw(char) &amp; ";"
         Else
             htmlentities = htmlentities &amp; char
         End if
     Next
End Function</pre>
<p> </p>
<p><strong>coldfusion版</strong> </p>
<pre>function nochaoscode(str)
{
     var new_str = “”;
     for(i=1; i lte len(str);i=i+1){
         if(asc(mid(str,i,1)) lt 128){
             new_str = new_str &amp; mid(str,i,1);
         }else{
             new_str = new_str &amp; “&amp;##” &amp; asc(mid(str,i,1));
         }
     }
     return new_str;
}</pre>
<p> </p>
<hr /> </p>
<p>附： </p>
<p>在php中我们可以用mbstring的mb_convert_encoding函数实现这个正向及反向的转化。 如： <br />
 </p>
<p>mb_convert_encoding (&#8220;你好&#8221;, &#8220;HTML-ENTITIES&#8221;, &#8220;gb2312&#8243;); //输出：&#20320;&#22909;mb_convert_encoding (&#8220;&#20320;&#22909;&#8221;, &#8220;gb2312&#8243;, &#8220;HTML-ENTITIES&#8221;); //输出：你好 </p>
<p>如果需要对整个页面转化，则只需要在php文件的头部加上这三行代码： </p>
<p>mb_internal_encoding(&#8220;gb2312&#8243;); // 这里的gb2312是你网站原来的编码mb_http_output(&#8220;HTML-ENTITIES&#8221;);ob_start(&#8216;mb_output_handler&#8217;); </p>
</div>
</div>
</div>
</div>
<br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/bluesunries.wordpress.com/173/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/bluesunries.wordpress.com/173/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godelicious/bluesunries.wordpress.com/173/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/delicious/bluesunries.wordpress.com/173/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gofacebook/bluesunries.wordpress.com/173/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/facebook/bluesunries.wordpress.com/173/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gotwitter/bluesunries.wordpress.com/173/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/twitter/bluesunries.wordpress.com/173/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gostumble/bluesunries.wordpress.com/173/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/stumble/bluesunries.wordpress.com/173/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godigg/bluesunries.wordpress.com/173/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/digg/bluesunries.wordpress.com/173/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/goreddit/bluesunries.wordpress.com/173/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/reddit/bluesunries.wordpress.com/173/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=bluesunries.wordpress.com&amp;blog=11014795&amp;post=173&amp;subd=bluesunries&amp;ref=&amp;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://bluesunries.wordpress.com/2010/03/16/html%e5%ad%97%e7%ac%a6%e5%ae%9e%e4%bd%93%ef%bc%88character-entities%ef%bc%89%ef%bc%8c%e8%bd%ac%e4%b9%89%e5%ad%97%e7%ac%a6%e4%b8%b2%ef%bc%88escape-sequence%ef%bc%89/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<media:content url="http://1.gravatar.com/avatar/3d66e1387fd140da99bab12dcc826be7?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">bluesunries</media:title>
		</media:content>
	</item>
		<item>
		<title>WEBJX整理的24个Firefox Web开发插件</title>
		<link>http://bluesunries.wordpress.com/2010/03/11/webjx%e6%95%b4%e7%90%86%e7%9a%8424%e4%b8%aafirefox-web%e5%bc%80%e5%8f%91%e6%8f%92%e4%bb%b6/</link>
		<comments>http://bluesunries.wordpress.com/2010/03/11/webjx%e6%95%b4%e7%90%86%e7%9a%8424%e4%b8%aafirefox-web%e5%bc%80%e5%8f%91%e6%8f%92%e4%bb%b6/#comments</comments>
		<pubDate>Thu, 11 Mar 2010 04:55:02 +0000</pubDate>
		<dc:creator>bluesunries</dc:creator>
				<category><![CDATA[前台设计]]></category>
		<category><![CDATA[firefox]]></category>

		<guid isPermaLink="false">http://bluesunries.wordpress.com/?p=136</guid>
		<description><![CDATA[大多数网页设计师与前端工程师都会使用Firefox(火狐浏览器)，由于Firefox丰富的Web开发辅助插件可以为我们提供许多好的功能，比如HTML,CSS,JS查错，找BUG等等。因此这里整理了目前常用的一些Firefox Web开发插件。 开发工具 1.  Web Developer 1.1.8 https://addons.mozilla.org/en-US/firefox/addon/60 以工具栏的形式对网页的(X)HTML、脚本、多媒体、CSS、缓存、图象等多方面的实用工具。使我们能轻易的获得网页的更多信息，使我们进一步的了解当 前所浏览的网页。 说明：超强的web分析工具，开发人员必装。 2.  Firebug 1.5.0 https://addons.mozilla.org/en-US/firefox/addon/1843 Firebug是firefox下的一个插件,能够调试所有网站语言,如Html,Css等，但FireBug最吸引我的就是javascript调试 功能，使用起来非常方便，而且在各种浏览器下都能使用（IE,Firefox,Opera, Safari），简直难以置信。除此之外，其他功能还很强大。比如html,css,dom的察看与调试，网站整体分析等等。总之就是一整套完整而强大的 WEB开发工具。 说明：查看，编辑，Debug页面的CSS,HTML,javascript。超强的开发调试的工具，开发人员必装。 3.  LinrLightWeb 0.2.1 https://addons.mozilla.org/zh-CN/firefox/addon/14068 安装前，请确认您已安装Firebug插件，获取Firebug请访问:http://getfirebug.com/ 1. 开启网页编辑模式，随意编辑网页——Fiddler的好搭档; 2. 超强Selector，查找操作标记; 3. 刷新CSS，无需刷新整页; 4. 快速设置CSS Sprites背景，鼠标拖移即可得到位置; 5. 保持登录状态，Session不过期;禁用 6. 同步发行IE版，Chrome版。 说明：非常强的web开发工具。 4.  View Source Char 2.7 https://addons.mozilla.org/en-US/firefox/addon/655 画一个 Color-Coded 的图表的 Web 页的源代码。 说明：显示非常好看的源码, 分级缩进, 不同颜色区分。 5.  Tamper [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=bluesunries.wordpress.com&amp;blog=11014795&amp;post=136&amp;subd=bluesunries&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
			<content:encoded><![CDATA[<div id="MyContent">
<p>大多数网页设计师与前端工程师都会使用Firefox(火狐浏览器)，由于Firefox丰富的Web开发辅助插件可以为我们提供许多好的功能，比如HTML,CSS,JS查错，找BUG等等。因此这里整理了目前常用的一些Firefox Web开发插件。</p>
<p><strong>开发工具</strong></p>
<p><strong>1.  Web Developer 1.1.8</strong></p>
<p>https://addons.mozilla.org/en-US/firefox/addon/60</p>
<p>以工具栏的形式对网页的(X)HTML、脚本、多媒体、CSS、缓存、图象等多方面的实用工具。使我们能轻易的获得网页的更多信息，使我们进一步的了解当 前所浏览的网页。<br />
说明：超强的web分析工具，开发人员必装。</p>
<p><strong>2.  Firebug 1.5.0</strong></p>
<p>https://addons.mozilla.org/en-US/firefox/addon/1843</p>
<p>Firebug是firefox下的一个插件,能够调试所有网站语言,如Html,Css等，但FireBug最吸引我的就是javascript调试 功能，使用起来非常方便，而且在各种浏览器下都能使用（IE,Firefox,Opera, Safari），简直难以置信。除此之外，其他功能还很强大。比如html,css,dom的察看与调试，网站整体分析等等。总之就是一整套完整而强大的 WEB开发工具。<br />
说明：查看，编辑，Debug页面的CSS,HTML,javascript。超强的开发调试的工具，开发人员必装。</p>
<p><strong>3.  LinrLightWeb 0.2.1</strong></p>
<p>https://addons.mozilla.org/zh-CN/firefox/addon/14068</p>
<p>安装前，请确认您已安装Firebug插件，获取Firebug请访问:http://getfirebug.com/<br />
1. 开启网页编辑模式，随意编辑网页——Fiddler的好搭档;<br />
2. 超强Selector，查找操作标记;<br />
3. 刷新CSS，无需刷新整页;<br />
4. 快速设置CSS Sprites背景，鼠标拖移即可得到位置;<br />
5. 保持登录状态，Session不过期;禁用<br />
6. 同步发行IE版，Chrome版。<br />
说明：非常强的web开发工具。</p>
<p><strong>4.  View Source Char 2.7</strong></p>
<p>https://addons.mozilla.org/en-US/firefox/addon/655</p>
<p>画一个 Color-Coded 的图表的 Web 页的源代码。<br />
说明：显示非常好看的源码, 分级缩进, 不同颜色区分。</p>
<p><strong>5.  Tamper Data 11.0.0</strong></p>
<p>https://addons.mozilla.org/en-US/firefox/addon/966</p>
<p>Tamper Data 的真实含义，即“篡改数据”（或者说定制 HTTP 请求）：截取浏览器发出的每一个 HTTP 请求，提示我们选择是要进行定制，还是不做定制而直接提交请求，还是终止当前被截取的请求，然后根据我们的选择决定是打开定制窗口，还是直接向 WEB 服务器提交请 求，还是终止当前的请求。<br />
说明：查看 firefox 收发请求的 header, 特别是在发出请求前, 可以修改 header。</p>
<p><strong>6.  javascript Debuger 0.9.87.4</strong></p>
<p>https://addons.mozilla.org/en-US/firefox/addon/216</p>
<p>Venkman 作为Mozilla的调试器，是针对Mozilla(Firefox)的自由工具<br />
说明：firefox 环境下的 javascript Debugger, 强大的脚本调试工具。</p>
<p><strong>7.  Live Http Headers 0.15</strong></p>
<p>https://addons.mozilla.org/en-US/firefox/addon/3829</p>
<p>可以用来实时监测发起的http请求和响应，也可以修改请求参数之后重新发起请求。<br />
说明：浏览页面同时记录所有 HTTP headers 。</p>
<p><strong>8.  Add N Edit Cookies 0.2.1.3</strong></p>
<p>https://addons.mozilla.org/en-US/firefox/addon/573</p>
<p>查看和修改本地的Cookie，Cookie欺骗必备。<br />
说明：查看并且修改 cookies, 不方便的地方是显示所有浏览器的 cookies 而不仅是当前页。</p>
<p><strong>9.  XPath Checker 0.4.1</strong></p>
<p>https://addons.mozilla.org/en-US/firefox/addon/1095</p>
<p>这个工具没什么好多说的，就是安装后可以直接用，在网上看了使用方法，开始没看明白，后来才知道是在页面上点鼠标右键，下面有个view xpath,点击就可以了。<br />
说明：据说可以调试 XPath。</p>
<p><strong>10. YSlow 2.0.6</strong></p>
<p>https://addons.mozilla.org/zh-cn/firefox/addon/5369</p>
<p>YSlow分析网页,并提出如何提高其性能的基础上一套规则,高性能的网页。<br />
说明：能够帮我们分析web页面比较慢的原因，它是基于 Firebug的，也能分开浏览web页面的元素，比如js,css.</p>
<p><strong>HTML验证</strong></p>
<p><strong>11.  HTML Validator(based on CSE HTML Validator)1.2.3<br />
</strong></p>
<p>https://addons.mozilla.org/en-US/firefox/addon/887</p>
<p>HTML Validator是一个Firefox扩展，它能查找并标志出HTML页面上的错误。HTML Validator以Tidy为基础，Tidy最初是W3C为验证HTML代码开发的一个工具。<br />
说明：著名的 CSE HTML Validator 引擎。</p>
<p><strong>12.  Relaxed the HTML Validator 0.9.5</strong></p>
<p>https://addons.mozilla.org/en-US/firefox/addon/3939</p>
<p>Relaxed the HTML Validator 0.9.5 这是一个做html验证的小插件，可以很容易的检测出页面的错误的html代码。<br />
说明：直接在当前页面上进行 HTML validation, 界面清晰直观。</p>
<p><strong>13.  Total Validator 6.2.0</strong></p>
<p>https://addons.mozilla.org/en-US/firefox/addon/2318</p>
<p>这软件帮 助你检查你的网页是否符合标准,结果将帮助你迅速地解决问题。<br />
说明：把当前页面在 http://www.totalvalidator.com 做HTML Validation,输出结果用红字进行了语法修正, 比较友好。不过由于通过其他网站验证, 速度有点慢, 并且结果不易保存。</p>
<p><strong>页面设计</strong></p>
<p><strong>14.  MeasureIt 0.3.92</strong></p>
<p>https://addons.mozilla.org/en-US/firefox/addon/539</p>
<p>通过可以绘制在页面任何地方的刻度尺来显示以像素(px)计算的宽度、高度、元素缩进量。<br />
说明：可以测量页面上任何选择区域的长宽, 对界面设计人员非常有帮助。</p>
<p><strong>15.  ColorZilla 2.0.2</strong></p>
<p>https://addons.mozilla.org/en-US/firefox/addon/271</p>
<p>利用ColorZilla 您可以从浏览器中的任一点读取色彩值，快速调节颜色并粘贴到其他应用程序。您可以缩放正在查看的页面或测量页面任意两点之间的距离。<br />
说明：从 页面, 或者调色板上取色, 同时可以缩放页面。</p>
<p><strong>SEO广告</strong></p>
<p><strong>16.  RankQuest SEO Toolbar 3.9.2</strong></p>
<p>https://addons.mozilla.org/en-US/firefox/addon/1471</p>
<p>检查网站在搜索引擎和alexa的状态<br />
说明：SEO 工具插件, 访问一个页面时, 显示此页面的各种排名及 SEO 信息。</p>
<p><strong>17.  Adsense Preview 1.5</strong></p>
<p>https://addons.mozilla.org/en-US/firefox/addon/2132</p>
<p>将谷歌广告放到你的网页上<br />
说明：在当前页面上显示 Google ADs 帮助确定广告位置。</p>
<p><strong>其他工具</strong></p>
<p><strong>18.  HackBar 1.4.2</strong></p>
<p>https://addons.mozilla.org/en-US/firefox/addon/3899</p>
<p>包含一些常用的工具。(SQL injection,XSS,加密等)<br />
说明：快速对字符串进行各种编码的工具, MD5, Base64, URLencode, URLDecode。</p>
<p><strong>19.  Document Map 0.6.1</strong></p>
<p>https://addons.mozilla.org/en-US/firefox/addon/475</p>
<p>显示当前页的标题结构中侧栏让之间快速导航…<br />
说明：提供页面资源结构信息.。</p>
<p><strong>20.  IE View Lite 1.3.5</strong></p>
<p>https://addons.mozilla.org/en-US/firefox/addon/1429</p>
<p>IE View 简装版，将选项集成到了右键关联菜单中，同时增加了一个工具栏按钮。<br />
说明：点右键可以选择在 IE 中打开页面, 有助于跨浏览器调试。</p>
<p><strong>21.  TimeStamp Converter 2.0.0</strong></p>
<p>https://addons.mozilla.org/en-US/firefox/addon/2063</p>
<p>将转换日期和 timestamps.Context 菜单选项将所选的时间戳转换为日期。<br />
说明：除去从上下文中转换, 还可以手动将 timestamp 时间戳与 date/time 转换。</p>
<p><strong>22.  TimestampDecode 0.1.8</strong></p>
<p>https://addons.mozilla.org/en-US/firefox/addon/3208</p>
<p>将所选的编号视为一个时间戳并显示一个已解码的日期/时间。<br />
说明：将选中的数字作为 timestamp 时间戳转换为 date/time。</p>
<p><strong>23.  Fire Encrypter 4.0</strong></p>
<p>https://addons.mozilla.org/en-US/firefox/addon/2063</p>
<p>说明：将文字加密成各种算法的密文, 甚至包括摩尔斯码。</p>
<p><strong>24.  Add-in-one Sidebar</strong></p>
<p>https://addons.mozilla.org/en-US/firefox/addon/1027</p>
<p>全方位多功能侧边栏。<br />
说明：在浏览器左侧增加打开书签, 历史, 插件等的工具条。</p>
</div>
<br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/bluesunries.wordpress.com/136/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/bluesunries.wordpress.com/136/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godelicious/bluesunries.wordpress.com/136/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/delicious/bluesunries.wordpress.com/136/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gofacebook/bluesunries.wordpress.com/136/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/facebook/bluesunries.wordpress.com/136/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gotwitter/bluesunries.wordpress.com/136/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/twitter/bluesunries.wordpress.com/136/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gostumble/bluesunries.wordpress.com/136/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/stumble/bluesunries.wordpress.com/136/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godigg/bluesunries.wordpress.com/136/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/digg/bluesunries.wordpress.com/136/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/goreddit/bluesunries.wordpress.com/136/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/reddit/bluesunries.wordpress.com/136/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=bluesunries.wordpress.com&amp;blog=11014795&amp;post=136&amp;subd=bluesunries&amp;ref=&amp;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://bluesunries.wordpress.com/2010/03/11/webjx%e6%95%b4%e7%90%86%e7%9a%8424%e4%b8%aafirefox-web%e5%bc%80%e5%8f%91%e6%8f%92%e4%bb%b6/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<media:content url="http://1.gravatar.com/avatar/3d66e1387fd140da99bab12dcc826be7?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">bluesunries</media:title>
		</media:content>
	</item>
		<item>
		<title>drupal 模版变量</title>
		<link>http://bluesunries.wordpress.com/2010/03/11/drupal-%e6%a8%a1%e7%89%88%e5%8f%98%e9%87%8f/</link>
		<comments>http://bluesunries.wordpress.com/2010/03/11/drupal-%e6%a8%a1%e7%89%88%e5%8f%98%e9%87%8f/#comments</comments>
		<pubDate>Thu, 11 Mar 2010 04:53:46 +0000</pubDate>
		<dc:creator>bluesunries</dc:creator>
				<category><![CDATA[drupal主题]]></category>

		<guid isPermaLink="false">http://bluesunries.wordpress.com/?p=134</guid>
		<description><![CDATA[page.tpl.php $base_path 安装目录路径 $base_path: Drupal安装的根目录,返回值最后有“/”,比如你的网址是这样：http://www.domin.com/drupal/,$base_path 返回/drupal/,注意，如果你输出的结果为空，查看一下前面是不是有 global $base_path; 语句。 $base_url: 这个变量返回域名和drupal安装目录，比如http://www.domin.com/drupal，注意，最后不带”/”,同样，用的时候注意加global $base_url; $base_root:返回网址，比如http://www.domin.com,最后不带”/”. base_path():相对于$base_path,base_path()是一个函数，它是对$base_path进行的封装，返回值完全一样，如果你不想加上global $base_path 语句，那么用base_path()代替是一个不错的选择. url($path = NULL, $options = array())函数：返回相对路径，比如你的网址地址为：http://www.domin.com/drupal, url(”node”),返回’drupal/node’. l($text, $path, $options = array())函数：于生成绝对的链接路径,在模块开发中用的最频繁的路径函数，它是对url()函数的封装，直接生成标签，非常有用。 $breadcrumb 返回导航数据 $closure 返回hook_footer（） 的输出,一般在脚部 $css 返回一个所有css 文件组成的数组结构，以添加到页面中去。使用$styles来返回$css 数组的HTML 版本 $content:返回将要展示的HTML 内容.例如，它可以包含一个节点，一组节点，管理接口的内容，等等。 $directory:主题所在的相对路径。例如themes/bluemarine 或者sites/all/themes/custom/mytheme。你通常联合使用该变量和 $base_path 来构建你的站点主题的绝对路径： $feed_icons:返回该页面的RSS种子链接 $footer_message:返回页脚信息文本，在下面页面输入它：Administer ?Site configuration ? Site information. $head:返回放置在部分的HTML。模块可以通过调用drupal_set_html_head()来向$head添加额外的比如RSS种子的纯文本。 $head_title:在页面标题中展示的文本，放在HTML 标签中。 $help: [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=bluesunries.wordpress.com&amp;blog=11014795&amp;post=134&amp;subd=bluesunries&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
			<content:encoded><![CDATA[<p><code><strong>page.tpl.php</strong></p>
<p><strong>$base_path</strong> 安装目录路径</p>
<p>$base_path: Drupal安装的根目录,返回值最后有“/”,比如你的网址是这样：http://www.domin.com/drupal/,$base_path 返回/drupal/,注意，如果你输出的结果为空，查看一下前面是不是有 global $base_path; 语句。</p>
<p>$base_url: 这个变量返回域名和drupal安装目录，比如http://www.domin.com/drupal，注意，最后不带”/”,同样，用的时候注意加global $base_url;</p>
<p>$base_root:返回网址，比如http://www.domin.com,最后不带”/”.<br />
base_path():相对于$base_path,base_path()是一个函数，它是对$base_path进行的封装，返回值完全一样，如果你不想加上global $base_path 语句，那么用base_path()代替是一个不错的选择.</p>
<p>url($path = NULL, $options = array())函数：返回相对路径，比如你的网址地址为：http://www.domin.com/drupal, url(”node”),返回’drupal/node’.</p>
<p><strong>l</strong>($text, $path, $options = array())函数：于生成绝对的链接路径,在模块开发中用的最频繁的路径函数，它是对url()函数的封装，直接生成<a>标签，非常有用。</a></p>
<p><a>$breadcrumb 返回导航数据</a></p>
<p><a>$closure 返回hook_footer（） 的输出,一般在脚部</a></p>
<p><a>$css 返回一个所有css 文件组成的数组结构，以添加到页面中去。使用$styles来返回$css 数组的HTML 版本</a></p>
<p><a>$content:返回将要展示的HTML 内容.例如，它可以包含一个节点，一组节点，管理接口的内容，等等。</a></p>
<p><a>$directory:主题所在的相对路径。例如themes/bluemarine 或者sites/all/themes/custom/mytheme。你通常联合使用该变量和</a></p>
<p><a>$base_path 来构建你的站点主题的绝对路径：</a></p>
<p><a>$feed_icons:返回该页面的RSS种子链接</a></p>
<p><a>$footer_message:返回页脚信息文本，在下面页面输入它：Administer ?Site configuration ? Site information.</a></p>
<p><a>$head:返回放置在部分的HTML。模块可以通过调用drupal_set_html_head()来向$head添加额外的比如RSS种子的纯文本。</a></p>
<p><a>$head_title:在页面标题中展示的文本，放在HTML 标签中。</a></p>
<p><a>$help: 帮助文本，大多数用于管理页面。模块可以通过实现hook_help()来提供该变量。</a></p>
<p><a>$is_front: 如果当前展示的为首页的话为真TRUE。</a></p>
<p><a>$language:站点展示时所使用的语言</a></p>
<p><a>$layout:这一变量允许你定义外观的不同类型的风格，而变量$layout的值依赖于启用的工具条（sidebars）的数量。可能的值包括：none, left,right, and both.</a></p>
<p><a>$logo: 指向logo 图像的路径，在启用主题的主题配置页面定义。通常这样使用：<img src="http://www.hongrs.net/%3C?php print $logo ?&gt;" alt="" /></a></p>
<p><a>$messages: 为表单或者其他信息返回的验证错误和正确的提示信息的HTML。它通常显示在页面的头部。</a></p>
<p><a>$mission: 返回站点使命文本，在 Administer Site configuration Siteinformation中输入.只有当$is_front 为 TRUE 时才可以使用。</a></p>
<p><a>$<strong>node</strong>:整个节点对象，当察看一个单独节点页面时可用。</a></p>
<p><a>$primary_links: 一个包含了一级链接的数组。在Administer ? Site building ?Menus中定义它们。通常$secondary_links通过函数theme(’links’)来定制输出的样式， 如下所示：</a></p>
<p><a>$scripts: 返回向页面的标签中所添加的HTML。这也是关于jQuery 如何被加载的（参看第17章查看关于jQuery的更多信息） $search_box: 返回搜索表单的HTML。当管理员在启用的主题中的主题配置页面禁止展示搜索时，或者搜索模块禁用时,$site_slogan为空。 </a></p>
<p><a>$secondary_links: 一个包含了二级链接的数组。在Administer ? Site building ?Menus中定义它们。通$secondary_links通过函数theme(’links’)来定制输出的样式， </a></p>
<p><a>$sidebar_left:返回左边工具条的HTML，包含了属于该区域的所有区块的HTML。 </a></p>
<p><a>$sidebar_right:返回右边工具条的HTML，包含了属于该区域的所有区块的HTML。</a></p>
<p><a>$site_name: 站点的名称。在Administer ? Site configuration ?Site information中设置。当管理员在启用的主题中的主题配置页面禁止展示标语时，$site_ name为空。 </a></p>
<p><a>$site_slogan: 站点的标语。在Administer ? Site configuration ?Siteinformation中设置。当管理员在启用的主题中的主题配置页面禁止展示标语时，$site_slogan 为空。 </a></p>
<p><a>$styles:返回连接到页面需要的CSS文件的HTML。CSS文件通过drupal_add_css()添加到$styles中去。 $tabs: 返回用于为节点展示诸如View/Edit的标签的HTML。 </a></p>
<p><a>$title:主内容的标题，与$head_title不同。当察看一个单独节点视图页面时，$title就是节点的标题。当常看Drupal的管理员页面时，$title通常有菜单项来设置，菜单项对应于查看的页面。</a></p>
<p><a><strong>node.tpl.php</strong></a></p>
<p><a><strong></strong>$content: 节点的主体部分，如果是一个分页显示的结果时，它为teaser。 </a></p>
<p><a>$date:节点被创建的格式化日期。 </a></p>
<p><a>$links: 与节点相关的链接，比如“read more” 或者“add comment.”模块通过实现hook_link()来添加额外的链接。 </a></p>
<p><a>$name:创建该页面的用户名，连接到他的个人主页。 </a></p>
<p><a>$node:整个节点对象和它的所有属性。 </a></p>
<p><a>$node_url:该节点的持久化的URI。 </a></p>
<p><a>$page: ，当为body 视图方式时，它为真，当为teaser 视图方式时，它为假。 </a></p>
<p><a>$taxonomy:由节点的分类词语构成的一个数组 $teaser:布尔值，用来决定是否展示teaser。当它为假时，意味着节点采用body方式展示，为真时，表示以teaser 方式展示。</a></p>
<p><a>$terms:与该节点相关的分类单词的HTML。每一个单词都指向他自己的分类单词页面。 $title:节点的标题。当在多个节点列表的页面这里有个链接指向该节点的主体视图。 </a></p>
<p><a>$submitted: “Submitted by”文本。管理员可以配置这一信息的展示，在一个基于单个节点类型的主题配置页面配置。 </a></p>
<p><a>$picture:用户图像的HTML，如果启用了图像并且设置了用户图像。</a></code></p>
<br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/bluesunries.wordpress.com/134/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/bluesunries.wordpress.com/134/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godelicious/bluesunries.wordpress.com/134/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/delicious/bluesunries.wordpress.com/134/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gofacebook/bluesunries.wordpress.com/134/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/facebook/bluesunries.wordpress.com/134/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gotwitter/bluesunries.wordpress.com/134/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/twitter/bluesunries.wordpress.com/134/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gostumble/bluesunries.wordpress.com/134/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/stumble/bluesunries.wordpress.com/134/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godigg/bluesunries.wordpress.com/134/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/digg/bluesunries.wordpress.com/134/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/goreddit/bluesunries.wordpress.com/134/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/reddit/bluesunries.wordpress.com/134/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=bluesunries.wordpress.com&amp;blog=11014795&amp;post=134&amp;subd=bluesunries&amp;ref=&amp;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://bluesunries.wordpress.com/2010/03/11/drupal-%e6%a8%a1%e7%89%88%e5%8f%98%e9%87%8f/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<media:content url="http://1.gravatar.com/avatar/3d66e1387fd140da99bab12dcc826be7?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">bluesunries</media:title>
		</media:content>

		<media:content url="http://www.hongrs.net/%3C?phpprint$logo?&#062;" medium="image" />
	</item>
		<item>
		<title>用Viewsslideshow做图片轮播-效果不错呢！</title>
		<link>http://bluesunries.wordpress.com/2010/03/11/%e7%94%a8viewsslideshow%e5%81%9a%e5%9b%be%e7%89%87%e8%bd%ae%e6%92%ad-%e6%95%88%e6%9e%9c%e4%b8%8d%e9%94%99%e5%91%a2%ef%bc%81/</link>
		<comments>http://bluesunries.wordpress.com/2010/03/11/%e7%94%a8viewsslideshow%e5%81%9a%e5%9b%be%e7%89%87%e8%bd%ae%e6%92%ad-%e6%95%88%e6%9e%9c%e4%b8%8d%e9%94%99%e5%91%a2%ef%bc%81/#comments</comments>
		<pubDate>Thu, 11 Mar 2010 04:51:00 +0000</pubDate>
		<dc:creator>bluesunries</dc:creator>
				<category><![CDATA[drupal模块]]></category>

		<guid isPermaLink="false">http://bluesunries.wordpress.com/?p=130</guid>
		<description><![CDATA[先来效果图爽一下： 有朋友会觉得这效果挺熟，呵呵，我借用了ddblock提供的免费效果的一些图片样式（说声谢谢-_-）。 模块使用：CCK、Views、Viewsslideshow 1.图片轮播的内容来源说明（CCK）：     我们总共需要图片，标题，摘要四个字段。     其中图片字段，如果要获取多个内容类型的图片字段，那么我们需要在给内容类型加图片字段时，使用同一个公用的图片字段，才能在一个views中调用多个内容类型的图片字段（其实是一个field）。     还有比较头疼的是图片的尺寸问题，我最后设置的是cck字段设置成450*350.     给我生成的大小是：450*338，差不多啦，比例问题。反正我最后要用css把图片设置成450*300的尺寸。     nid是为了加“阅读全文”所需的，最后当然不会也让它显示出来，会用css将它隐藏掉。 2.Views说明：     Style选slideshow，无疑了。选取上面所需四个字段（顺序为图片，标题，摘要，还有一个nid）。然后自己看看slideshow的配置选项吧，很简单，我就不多说了。     主要说下怎么加“阅读全文”的功能：     方法：覆写 views-view-field--teaser.tpl 文件即可，文件内容：     &#60;?php print $output; ?&#62;     &#60;a href='node/&#60;?php print $row-&#62;nid; ?&#62;'&#62;阅读全文 &#62;&#62;&#60;/a&#62;     这个$row-&#62;nid;就是我们在views输出的nid字段。 3.关于图片素材，可以从这里找到 http://ddblock.myalbums.biz/sunday_donation_day_donations 就是这个样式，根据提示下载这个样式包就找到了。 4.到此，内容结构已经创建好了，这在设计中是很重要的一步。地基打好，才能开始盖建筑，虽然views生成的结构不太简洁，不过整体看来还算规整，这个可以用，呵呵。 下面直接贴出我的css代码吧，大部分应该可以直接用的，大家可参照字段名修改：（block的id可能要改下） #block-views-piclist-block_1 { border: 5px solid #97CAEC; width:648px; padding:3px; background:#82B9E0 url(container_gradient.png) repeat-x left top; [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=bluesunries.wordpress.com&amp;blog=11014795&amp;post=130&amp;subd=bluesunries&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
			<content:encoded><![CDATA[<div>
<p>先来效果图爽一下：</p>
<p><img src="http://www.incollege.cn/userfiles/slideshow.jpg" alt="" width="500" height="278" /></p>
<p>有朋友会觉得这效果挺熟，呵呵，我借用了ddblock提供的免费效果的一些图片样式（说声谢谢-_-）。</p>
<p>模块使用：CCK、Views、Viewsslideshow</p>
<p><strong>1.图片轮播的内容来源说明（CCK）：</strong></p>
<p>    我们总共需要图片，标题，摘要四个字段。</p>
<p>    其中图片字段，如果要获取多个内容类型的图片字段，那么我们需要在给内容类型加图片字段时，使用同一个公用的图片字段，才能在一个views中调用多个内容类型的图片字段（其实是一个field）。</p>
<p>    还有比较头疼的是图片的尺寸问题，我最后设置的是cck字段设置成450*350.</p>
<p>    给我生成的大小是：450*338，差不多啦，比例问题。反正我最后要用css把图片设置成450*300的尺寸。</p>
<p>    nid是为了加“阅读全文”所需的，最后当然不会也让它显示出来，会用css将它隐藏掉。</p>
<p><strong>2.Views说明：</strong></p>
<p>    Style选slideshow，无疑了。选取上面所需四个字段（顺序为图片，标题，摘要，还有一个nid）。然后自己看看slideshow的配置选项吧，很简单，我就不多说了。</p>
<p>    主要说下怎么加“阅读全文”的功能：<code></p>
<p>    方法：覆写 views-view-field--teaser.tpl 文件即可，文件内容：</p>
<p>    &lt;?php print $output; ?&gt;<br />
    &lt;a href='node/&lt;?php print $row-&gt;nid; ?&gt;'&gt;阅读全文 &gt;&gt;&lt;/a&gt;</p>
<p>    这个$row-&gt;nid;就是我们在views输出的nid字段。</p>
<p><strong>3.关于图片素材</strong>，可以从这里找到 <a title="http://ddblock.myalbums.biz/sunday_donation_day_donations" href="http://ddblock.myalbums.biz/sunday_donation_day_donations" target="_blank">http://ddblock.myalbums.biz/sunday_donation_day_donations</a> 就是这个样式，根据提示下载这个样式包就找到了。</p>
<p><strong>4.到此，内容结构已经创建好了</strong>，这在设计中是很重要的一步。地基打好，才能开始盖建筑，虽然views生成的结构不太简洁，不过整体看来还算规整，这个可以用，呵呵。</p>
<p><strong>下面直接贴出我的css代码吧</strong>，大部分应该可以直接用的，大家可参照字段名修改：（block的id可能要改下）</p>
<div><code>#block-views-piclist-block_1 {<br />
border: 5px solid #97CAEC;<br />
width:648px;<br />
padding:3px;<br />
background:#82B9E0 url(container_gradient.png) repeat-x left top;<br />
}</p>
<p>#block-views-piclist-block_1 .content {<br />
margin:0;<br />
}</p>
<p>.views-field-field-pic-fid {<br />
float: left;<br />
margin:0 5px 5px 0;<br />
width:450px;<br />
text-align:center;<br />
border-right:none;<br />
height:300px;<br />
}</p>
<p>.views-field-field-pic-fid img {<br />
width:450px;<br />
height:300px;<br />
}</p>
<p>.views-field-title {<br />
float:left;<br />
height:30px;<br />
line-height:30px;<br />
margin-bottom:3px;<br />
overflow:hidden;<br />
padding:0 5px;<br />
text-align:center;<br />
width:180px;<br />
}</p>
<p>.views-field-title a{<br />
color:#416C96;<br />
font-size:14px;<br />
font-weight:bold;<br />
}</p>
<p>.views-field-teaser {<br />
float:left;<br />
width:170px;<br />
padding:0 10px;<br />
overflow:hidden;<br />
height:267px;<br />
color:#fff;<br />
font-weight:bold;<br />
background:#82B9E0 url(slide_text_gradient.png) repeat-x left bottom;<br />
position:relative;<br />
}</p>
<p>#views_slideshow_singleframe_main_1 {<br />
height:305px;<br />
}</p>
<p>.views_slideshow_singleframe_pager div a img {<br />
height:35px;<br />
width:35px;<br />
padding:3px;<br />
background-color:#ccc;<br />
border:1px #fff solid;<br />
}</p>
<p>.views_slideshow_singleframe_pager div a img:hover {<br />
background-color:yellow;<br />
border:1px yellow solid;<br />
}</p>
<p>.views_slideshow_singleframe_pager.thumbnails a.activeSlide img {<br />
background-color:yellow;<br />
border:1px yellow solid;<br />
}</p>
<p>#views_slideshow_singleframe_pager_1 {</p>
<p>}</p>
<p>.views_slideshow_singleframe_pager div {<br />
padding-left:10px;<br />
}</p>
<p>a.readmore {<br />
display:block;<br />
background:url(readmore.png) no-repeat left top;<br />
width:100px;<br />
color:#FFFFFF;<br />
height:30px;<br />
text-align:center;<br />
position:absolute;<br />
bottom:3px;<br />
right:15px;<br />
text-decoration:none;<br />
}<br />
.views-field-nid {<br />
display:none;<br />
}</code></div>
<p> </p>
</div>
<p></code></p>
<br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/bluesunries.wordpress.com/130/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/bluesunries.wordpress.com/130/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godelicious/bluesunries.wordpress.com/130/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/delicious/bluesunries.wordpress.com/130/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gofacebook/bluesunries.wordpress.com/130/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/facebook/bluesunries.wordpress.com/130/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gotwitter/bluesunries.wordpress.com/130/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/twitter/bluesunries.wordpress.com/130/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gostumble/bluesunries.wordpress.com/130/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/stumble/bluesunries.wordpress.com/130/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godigg/bluesunries.wordpress.com/130/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/digg/bluesunries.wordpress.com/130/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/goreddit/bluesunries.wordpress.com/130/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/reddit/bluesunries.wordpress.com/130/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=bluesunries.wordpress.com&amp;blog=11014795&amp;post=130&amp;subd=bluesunries&amp;ref=&amp;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://bluesunries.wordpress.com/2010/03/11/%e7%94%a8viewsslideshow%e5%81%9a%e5%9b%be%e7%89%87%e8%bd%ae%e6%92%ad-%e6%95%88%e6%9e%9c%e4%b8%8d%e9%94%99%e5%91%a2%ef%bc%81/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
	
		<media:content url="http://1.gravatar.com/avatar/3d66e1387fd140da99bab12dcc826be7?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">bluesunries</media:title>
		</media:content>

		<media:content url="http://www.incollege.cn/userfiles/slideshow.jpg" medium="image" />
	</item>
		<item>
		<title>views_embed_view使用说明</title>
		<link>http://bluesunries.wordpress.com/2010/03/11/views_embed_view%e4%bd%bf%e7%94%a8%e8%af%b4%e6%98%8e/</link>
		<comments>http://bluesunries.wordpress.com/2010/03/11/views_embed_view%e4%bd%bf%e7%94%a8%e8%af%b4%e6%98%8e/#comments</comments>
		<pubDate>Thu, 11 Mar 2010 04:49:22 +0000</pubDate>
		<dc:creator>bluesunries</dc:creator>
				<category><![CDATA[drupal使用]]></category>
		<category><![CDATA[drupal函数]]></category>

		<guid isPermaLink="false">http://bluesunries.wordpress.com/?p=128</guid>
		<description><![CDATA[views_embed_view，我在drupal_abc的首页制作中，使用这个函数，详细地说明一下： views_embed_view('news','default',$tid)，是Views2下面的函数，这里我装了views模块，这个模块你经常用，并自己创建了一个view，它的名字为news，它有一个默认的显示就是default，这个view还有一个参数，就是可以向它传递的参数$tid。这个函数里面的属性是规定了的。第一个为view的名字，第2个为view的类型，后面是传递给它的参数。 下面是这个函数的API views_embed_view 描述: 使用PHP代码嵌入一个视图(view). 这个函数是在PHP代码中调用的,可以在一个节点中或者其它东西中嵌入一个视图.这个函数只提供了最简单的解决方案,它没有给出太多的配置选项,所以这个函数也非常容易理解,一小会儿就可以搞懂它是干什么的了. 注意这个函数没有显示视图的标题,如果你需要显示它的标题的话,那么你需要手工的实现,加载视图,获取预览,接着使用 $view-&#62;get_title()得到标题. 参数 $name 要嵌入的视图的名字. $display_id 要嵌入的显示id.如果不确定的话,可以使用 'default',这个总是有效的.这里也可以使用'page'或者'block'. 而其它的附加参数则作为一个变量传递过来。 下面是这个函数的代码： &#60;?php function views_embed_view($name, $display_id = 'default') {   $args = func_get_args();   array_shift($args); // remove $name   if (count($args)) {     array_shift($args); // remove $display_id   }   $view = views_get_view($name);   if (!$view) {     return;   [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=bluesunries.wordpress.com&amp;blog=11014795&amp;post=128&amp;subd=bluesunries&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
			<content:encoded><![CDATA[<p><code>views_embed_view，我在drupal_abc的首页制作中，使用这个函数，详细地说明一下：</p>
<p>views_embed_view('news','default',$tid)，是Views2下面的函数，这里我装了views模块，这个模块你经常用，并自己创建了一个view，它的名字为news，它有一个默认的显示就是default，这个view还有一个参数，就是可以向它传递的参数$tid。这个函数里面的属性是规定了的。第一个为view的名字，第2个为view的类型，后面是传递给它的参数。</p>
<p>下面是这个函数的API</p>
<p>views_embed_view<br />
描述:<br />
使用PHP代码嵌入一个视图(view).<br />
这个函数是在PHP代码中调用的,可以在一个节点中或者其它东西中嵌入一个视图.这个函数只提供了最简单的解决方案,它没有给出太多的配置选项,所以这个函数也非常容易理解,一小会儿就可以搞懂它是干什么的了.</p>
<p>注意这个函数没有显示视图的标题,如果你需要显示它的标题的话,那么你需要手工的实现,加载视图,获取预览,接着使用 $view-&gt;get_title()得到标题.</p>
<p>参数<br />
$name 要嵌入的视图的名字.<br />
$display_id 要嵌入的显示id.如果不确定的话,可以使用 'default',这个总是有效的.这里也可以使用'page'或者'block'.<br />
而其它的附加参数则作为一个变量传递过来。</p>
<p>下面是这个函数的代码：<br />
&lt;?php<br />
function views_embed_view($name, $display_id = 'default') {<br />
  $args = func_get_args();<br />
  array_shift($args); // remove $name<br />
  if (count($args)) {<br />
    array_shift($args); // remove $display_id<br />
  }</p>
<p>  $view = views_get_view($name);<br />
  if (!$view) {<br />
    return;<br />
  }</p>
<p>  return $view-&gt;preview($display_id, $args);<br />
}<br />
?&gt;</p>
<p><!-- google_ad_section_end --></code></p>
<br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/bluesunries.wordpress.com/128/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/bluesunries.wordpress.com/128/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godelicious/bluesunries.wordpress.com/128/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/delicious/bluesunries.wordpress.com/128/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gofacebook/bluesunries.wordpress.com/128/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/facebook/bluesunries.wordpress.com/128/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gotwitter/bluesunries.wordpress.com/128/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/twitter/bluesunries.wordpress.com/128/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gostumble/bluesunries.wordpress.com/128/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/stumble/bluesunries.wordpress.com/128/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godigg/bluesunries.wordpress.com/128/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/digg/bluesunries.wordpress.com/128/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/goreddit/bluesunries.wordpress.com/128/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/reddit/bluesunries.wordpress.com/128/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=bluesunries.wordpress.com&amp;blog=11014795&amp;post=128&amp;subd=bluesunries&amp;ref=&amp;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://bluesunries.wordpress.com/2010/03/11/views_embed_view%e4%bd%bf%e7%94%a8%e8%af%b4%e6%98%8e/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<media:content url="http://1.gravatar.com/avatar/3d66e1387fd140da99bab12dcc826be7?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">bluesunries</media:title>
		</media:content>
	</item>
		<item>
		<title>如何为Drupal网站创建一个杂志类型的首页</title>
		<link>http://bluesunries.wordpress.com/2010/03/11/%e5%a6%82%e4%bd%95%e4%b8%badrupal%e7%bd%91%e7%ab%99%e5%88%9b%e5%bb%ba%e4%b8%80%e4%b8%aa%e6%9d%82%e5%bf%97%e7%b1%bb%e5%9e%8b%e7%9a%84%e9%a6%96%e9%a1%b5/</link>
		<comments>http://bluesunries.wordpress.com/2010/03/11/%e5%a6%82%e4%bd%95%e4%b8%badrupal%e7%bd%91%e7%ab%99%e5%88%9b%e5%bb%ba%e4%b8%80%e4%b8%aa%e6%9d%82%e5%bf%97%e7%b1%bb%e5%9e%8b%e7%9a%84%e9%a6%96%e9%a1%b5/#comments</comments>
		<pubDate>Thu, 11 Mar 2010 04:47:44 +0000</pubDate>
		<dc:creator>bluesunries</dc:creator>
				<category><![CDATA[drupal主题]]></category>

		<guid isPermaLink="false">http://bluesunries.wordpress.com/?p=126</guid>
		<description><![CDATA[这篇文章很经典,有些细节要注意的是这是drupal5的，drupal6添加类型的时候Type of data to store只有file，然后格式选image。 转自 http://pantao.name/blog/2009/03/drupal-magazine-style-frontpage.html 杂志样式首页（Magazine Style Homepage）是一种应用很广泛的首页样式，它能很好的组织与展示大量的内容，尤其是图文混排的内容，这种样式我们在各种在线杂志、门户网站等等上面看到过很多，在CMS中，我们也见到过很多WordPress的Magazine Style Theme，但是我们确很少看到有Drupal使用的Magazine Sytle主题，这使得很多刚刚接触Drupal的人认为Drupal还没有WordPress的定制能力强。 本文为大家简略介绍一下，如何为Drupal创建一个Magazine Style的主题首页，这个首页有三个内容显示区块，左上区域为一个"首页头条"区块，在这个区块中，将显示一篇文章的摘要、文章的缩略图以及标题，这个标题是指向到文章页面的链接；右上区块为"推荐阅读"区块，在这个区块中，将显示被推荐到首页显示的文章的标题列表，每一个标题后带有该文章的缩略图；下方为"分类文章"区块，我们将四个分类的文章标题列表在这个区块中以文章分类为基础分开显示。如下图所示： 本文章对读者的主要要求有： 使用过Drupal一段时间，并且看过Drupal默认的主题的源代码（推荐） 了解如何安装Drupal模块与主题 了解一些基本的PHP、CSS以及xHTML知识 在本文章正式开始之前我们首先请大家安装好下列Drupal模块： CCK (Content Construction Kit) FileField ImageAPI ImageField ImageCache Views 我们在撰写本文时使用的是Drupal 6.10版，使用的主题是Framework theme。 使用ImageCache创建三个图片自动绽放动作 按下表所示信息创建三个ImageCache Preset： ImageCache Preset Dimensions Namespace Width Height Actions Large 640px 640px Scale And Crop Medium 350px 350px Scale And Crop Thumbnail [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=bluesunries.wordpress.com&amp;blog=11014795&amp;post=126&amp;subd=bluesunries&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
			<content:encoded><![CDATA[<p><code>
<div>
<p>这篇文章很经典,有些细节要注意的是这是drupal5的，drupal6添加类型的时候Type of data to store只有file，然后格式选image。</p>
<p>转自 http://pantao.name/blog/2009/03/drupal-magazine-style-frontpage.html</p>
<p>杂志样式首页（Magazine Style Homepage）是一种应用很广泛的首页样式，它能很好的组织与展示大量的内容，尤其是图文混排的内容，这种样式我们在各种在线杂志、门户网站等等上面看到过很多，在CMS中，我们也见到过很多WordPress的Magazine Style Theme，但是我们确很少看到有Drupal使用的Magazine Sytle主题，这使得很多刚刚接触Drupal的人认为Drupal还没有WordPress的定制能力强。</p>
<p>本文为大家简略介绍一下，如何为Drupal创建一个Magazine Style的主题首页，这个首页有三个内容显示区块，左上区域为一个"首页头条"区块，在这个区块中，将显示一篇文章的摘要、文章的缩略图以及标题，这个标题是指向到文章页面的链接；右上区块为"推荐阅读"区块，在这个区块中，将显示被推荐到首页显示的文章的标题列表，每一个标题后带有该文章的缩略图；下方为"分类文章"区块，我们将四个分类的文章标题列表在这个区块中以文章分类为基础分开显示。如下图所示：</p>
<p><img src="http://www.mihua.net/sites/default/filesimage/3340127925_839aa27368.PNG" alt="" width="500" height="375" /></p>
<p>本文章对读者的主要要求有：</p>
<ul>
<li>使用过Drupal一段时间，并且看过Drupal默认的主题的源代码（推荐）</li>
<li>了解如何安装Drupal模块与主题</li>
<li>了解一些基本的PHP、CSS以及xHTML知识</li>
</ul>
<p>在本文章正式开始之前我们首先请大家安装好下列Drupal模块：</p>
<ul>
<li><a href="http://drupal.org/project/cck" target="_blank"><span style="color:#0000ff;"><span style="text-decoration:underline;">CCK (Content Construction Kit)</span></span></a></li>
<li><a href="http://drupal.org/project/filefield" target="_blank"><span style="color:#0000ff;"><span style="text-decoration:underline;">FileField</span></span></a></li>
<li><a href="http://drupal.org/project/imageapi" target="_blank"><span style="color:#0000ff;"><span style="text-decoration:underline;">ImageAPI</span></span></a></li>
<li><a href="http://drupal.org/project/imagefield" target="_blank"><span style="color:#0000ff;"><span style="text-decoration:underline;">ImageField</span></span></a></li>
<li><a href="http://drupal.org/project/imagecache" target="_blank"><span style="color:#0000ff;"><span style="text-decoration:underline;">ImageCache</span></span></a></li>
<li><a href="http://drupal.org/project/views" target="_blank"><span style="text-decoration:underline;"><span style="color:#0000ff;">Views</span></span></a></li>
</ul>
<p>我们在撰写本文时使用的是<a href="http://drupal.org/drupal-6.10" target="_blank"><span style="text-decoration:underline;"><span style="color:#0000ff;">Drupal 6.10版</span></span></a>，使用的主题是<a href="http://drupal.org/project/framework"><span style="text-decoration:underline;"><span style="color:#0000ff;">Framework theme</span></span></a>。</p>
</div>
<h3>使用ImageCache创建三个图片自动绽放动作</h3>
<p>按下表所示信息创建三个ImageCache Preset：</p>
<table width="50%" summary="The ImageCache module allows you to create several preset image dimensions. It will rescale them to these sizes when you upload an image.">
<caption>ImageCache Preset Dimensions</caption>
<tbody>
<tr>
<th scope="col">Namespace</th>
<th scope="col">Width</th>
<th scope="col">Height</th>
<th>Actions</th>
</tr>
<tr>
<td scope="row">Large</td>
<td>640px</td>
<td>640px</td>
<td>Scale And Crop</td>
</tr>
<tr>
<td scope="row">Medium</td>
<td>350px</td>
<td>350px</td>
<td>Scale And Crop</td>
</tr>
<tr>
<td scope="row">Thumbnail</td>
<td>100px</td>
<td>100px</td>
<td>Scale And Crop</td>
</tr>
</tbody>
</table>
<p>ImageCache设置完成之后，我们现在可以通过CCK为Story内容类型增加一个图片字段，当我们在撰写文章时，如果作者通过此字段上传了图片，那么ImageCache将自动对图片进行绽放与裁切。</p>
<h3>使用文章分类来使事情简单化</h3>
<p>我们可以在网上随意搜索到很多WordPress的免费与收费的Magazine Style Theme，我们稍稍研究WordPress的这些主题就可以很简单的发现他们都是通过一个十分简单的方法来读取首页内容的，那就是"分类"，我们现在要 实现相同的功能，所以也可以使用相同的方法。</p>
<p>首先我们创建一个词汇表，名为Tags（标签），将其设置成为"Tags"，这样我们就有了和WordPress或者Movable Type等博客程序一样的标签系统，将标签类型中的"Story"前面的复选框选中，点击保存；然后我们添加一个名称为"Category"（分类）的词 汇表，将其设置成为"Mutliple Select"（多选），然后将"Story"添加到这个词汇表中，这样我就有了博客系统中的分类系统。接着我们在Category中添加几个词汇（项 目）：</p>
<ol>
<li><strong>Headline（首页头条）：</strong>所有属于这个分类的文章都将在首页头条区域显示，当然，我们可以设置最多显示几篇；</li>
<li><strong>Features（推荐阅读）：</strong>所有属于这个分类的文章都将在首页的推荐阅读区块显示；</li>
<li><strong>其它分类：</strong>
<ul>
<li>网站新闻</li>
<li>生活纪实</li>
<li>学习日记</li>
<li>建站手记</li>
<li>......</li>
</ul>
</li>
</ol>
<h3>注册与创建区块（Create Regions）</h3>
<p>到现在为止，网站、内容、模块与主题的基本配置已经完成，现在我们需要往更深层次学习了，首先，我们进入网站主题的文件夹（我们使用的是Framework），之后将<code>page.tpl.php</code>文件复制一个复本并将复本名称修改为<code>page-front.tpl.php</code>，Drupal将会自动使用这个模块文件来生成网站的首页。</p>
<p>下面这一段代码是在Drupal模板文件中调用某个区块所使用的：</p>
<pre><code>
if ($the_region) {
  print '</code>
<div>';
  print $the_region;
  print '</div>

';
}</pre>
<p>上面代码中的<code>$the_region</code>变量可以代表任何内容，它是在模板的"Info"文件中注册的，其注册的格式为：regions[the_region] = My Region。其中的<code>the_region</code>是用来被机器识别的字段，而My Region是前面机器字段所代表的区块的人类识别用的名称，如下我注册两个名称为Headline和Features的区域，它们的机器识别字段分别为headline和features。</p>
<pre><code>
regions[headline] = Headline
regions[features] = Features
</code></pre>
<p>这个时候你并不能查看你的首页，因为上面注册了两个新的区块，这样一来，把Drupal默认注册的一些区块都给覆盖了，现在我们需要重新将Drupal默认注册的区块重新注册一次，如下：</p>
<pre><code>
regions[left] = Left sidebar
regions[right] = Right sidebar
regions[content] = Content
regions[header] = Header
regions[footer] = Footer
regions[headline] = Headline
regions[features] = Features
</code></pre>
<p>在区块注册这一步骤中的最后一步是将Headline和Features这两个区块添加到模板中，我们打开<code>page-front.tpl.php</code>文件，找到文件中的主区块（如果你使用的是Framework主题，那么就选择id为center的div为主区块），将这个盒子中原来的代码全部删除，再将下列代码添加到主区块中去：</p>
<pre><code>
print '&lt;div&gt;';
if ($headline) {
	print '&lt;div&gt;';
	print $headline;
	print '&lt;/div&gt;';
}
if ($features) {
	print '&lt;div&gt;';
	print $features;
	print '&lt;/div&gt;';
}
print '&lt;/div&gt;';
</code></pre>
<p>为了在后面的工作中更加容易的样式化这块区域，我在这里为这个区块添加了一个CSS类：main，为Headline和Features区块都添加了一个CSS类：region。</p>
<h3>通过CCK扩展Story内容类型</h3>
<p>你想让Story类型与ImageCache模块的功能联系到一起，首先你需要使用CCK为Story添加额外的字段，至少需要一个"Image" （图片）字段，如果你还想为图片添加一些版权信息，你还可以添加图片作者字段或者图片来源字段，现在，请按下表为Story添加三个字段：</p>
<table>
<tbody>
<tr>
<th>Label</th>
<th>Field Name (prefixed field_)</th>
<th>Type of Data to Store</th>
<th>Form element to Edit Data</th>
</tr>
<tr>
<td>Image</td>
<td>image</td>
<td>Image</td>
<td>Image</td>
</tr>
<tr>
<td>Image Author</td>
<td>image_author</td>
<td>Text</td>
<td>Text Field</td>
</tr>
<tr>
<td>Image Source</td>
<td>image_source</td>
<td>Text</td>
<td>Text Field</td>
</tr>
</tbody>
</table>
<p><img src="http://farm4.static.flickr.com/3348/3340955828_6b9b33980b.jpg" alt="extend-story-fields-by-cck" width="500" height="228" /></p>
<p>添加这三个额外的Field的时候没有什么过多需要设置的，仅仅只需要注意的就是，添加Image字段的时候，我们需要为上传的图片选择一个保存目 录，默认是使用网站文件根目录，为了管理与整理方便，我们在这里设置一个新的目录"images"，这样一来，所有上传的文件都会被保存到根文件目录的子 目录"images"中。</p>
<h3>创建Views</h3>
<p>Views与CCK的配合使用可以说是Drupal应用的核心，所以，一般有CCK就一定会用Views，下面我们就要开始为我们的 Magazine Style Frontpage创建Views了。如果你不想自己一步一步添加，你只需要直接本文下方的导入文件直接导入到您的网站上去即可，不过我还是建议你一步一 步自己动手来做。</p>
<h4>Headline View</h4>
<p>Headline View是用来展示你认为最重要的文章的，在这个区块中，它将显示一个固定大小的图片，还有文章的标题和摘要，文章标题链接到文章的页面，现在我们来添加 Headline View。进入View 添加页面（Site Building » Views » Add），View的名称为"Headline"，介绍你可以填写任何东西，一般就是介绍这个View的作用等，Tag就像文章的Tag一样，可以方便我 们在网站有大量的View的时候查找特定的一个View，填写好了之后点击Next（下一步）：</p>
<p><img src="http://farm4.static.flickr.com/3402/3340127897_5055e89223_o.gif" alt="drupal-magazine-style-frontpage-headline-view" width="400" height="650" /></p>
<p>进入下一页之后，首先在左上角的下拉菜单中选择Block，然后点击添加一个Block Display，之后按下面的信息来设置你的这个Display的基本设置（Basic Settings）：</p>
<ul>
<li>Name: Headline</li>
<li>Title: None</li>
<li>Style: Unformatted</li>
<li>Row style: Fields</li>
<li>Use AJAX: No</li>
<li>Use pager: No</li>
<li>Items to display: 1</li>
<li>More link: No</li>
<li>Distinct: No</li>
<li>Access: Unrestricted</li>
<li>Exposed form in block: No</li>
<li>Header: None</li>
<li>Footer: None</li>
<li>Empty text: None</li>
<li>Theme: Information</li>
</ul>
<p>之后为这个Display添加Fields，点击Fields右侧的"+"号，按下表来添加三个Fields：</p>
<table>
<tbody>
<tr>
<th>Field</th>
<th>Notes</th>
</tr>
<tr>
<td>Content: Image: Image (field_image)</td>
<td>Label: none<br />
Format: medium image linked to node</td>
</tr>
<tr>
<td>Node: Teaser</td>
<td>No additional configuration required</td>
</tr>
<tr>
<td>Node: Title</td>
<td>Check Link this field to its node</td>
</tr>
</tbody>
</table>
<p>之后，再按下表添加Filters</p>
<table>
<tbody>
<tr>
<th>Field</th>
<th>Notes</th>
</tr>
<tr>
<td>Node: Published</td>
<td>True</td>
</tr>
<tr>
<td>Taxonomy: Term</td>
<td>Vocabulary: Categories<br />
Selection Type: Drop down<br />
Operator: Is one of<br />
Select terms from vocabulary Categories: Headline</td>
</tr>
</tbody>
</table>
<p>如下图所示为添加好之后的界面：</p>
<p><img src="http://farm4.static.flickr.com/3652/3340127885_c10a4d896a.jpg" alt="drupal-magazine-style-frontpage-headline-view-settings" width="500" height="286" /></p>
<p>之后别忘记点击保存按钮了。</p>
<h4>Features View</h4>
<p>Features区块将显示最新三篇被标记为Features的文章，每一篇文章都有自己的缩略图和摘要。现在再添加一个名称为Features的View，类型继续为Node（节点），并按下面几个表格进行设置：</p>
<h4>Basic settings</h4>
<ul>
<li>Name: Block</li>
<li>Title: Features</li>
<li>Style: List</li>
<li>Row style: Fields</li>
<li>Use AJAX: No</li>
<li>Use pager: No</li>
<li>Items to display: 3</li>
<li>More link: No</li>
<li>Distinct: No</li>
<li>Access: Unrestricted</li>
<li>Exposed form in block: No</li>
<li>Header: None</li>
<li>Footer: None</li>
<li>Empty text: None</li>
<li>Theme: Information</li>
</ul>
<h4>Fields</h4>
<table>
<tbody>
<tr>
<th>Field</th>
<th>Notes</th>
</tr>
<tr>
<td>Content: Image: Image (field_image)</td>
<td>Label: none<br />
Format: thumbnail image linked to node</td>
</tr>
<tr>
<td>Node: Teaser</td>
<td>No additional configuration required</td>
</tr>
<tr>
<td>Node: Title</td>
<td>Check Link this field to its node</td>
</tr>
</tbody>
</table>
<h5>Sort criteria</h5>
<table>
<tbody>
<tr>
<th>Field</th>
<th>Notes</th>
</tr>
<tr>
<td>Node: Post date</td>
<td>asc</td>
</tr>
</tbody>
</table>
<h4>Filters</h4>
<table>
<tbody>
<tr>
<th>Field</th>
<th>Notes</th>
</tr>
<tr>
<td>Node: Published</td>
<td>True</td>
</tr>
<tr>
<td>Taxonomy: Term</td>
<td>Vocabulary: Categories<br />
Selection Type: Drop down<br />
Operator: Is one of<br />
Select terms from vocabulary Categories: Featured</td>
</tr>
</tbody>
</table>
<h3>Posts by Category</h3>
<p>这个View与前面的两个View有一些不一样，它会展示相关分类的最新十篇文章标题列表，每一个标题又链接到文章页面，它与前面两个View最大 的不同点在于，你不需要将这个View添加到哪个区块中，你需要直接在FrontPage模板文件中添加相关的 calls 来调用相关的内容，添加一个新的Node类型的View，你只需要使用Default（默认）的Display即可。</p>
<h4>Basic settings</h4>
<ul>
<li>Name: Defaults</li>
<li>Title: None</li>
<li>Style: List</li>
<li>Row style: Fields</li>
<li>Use AJAX: No</li>
<li>Use pager: No</li>
<li>Items to display: 5</li>
<li>More link: No</li>
<li>Distinct: No</li>
<li>Access: Unrestricted</li>
<li>Exposed form in block: No</li>
<li>Header: None</li>
<li>Footer: None</li>
<li>Empty text: None</li>
<li>Theme: Information</li>
</ul>
<h4>Arguments</h4>
<table>
<tbody>
<tr>
<th>Field</th>
<th>Notes</th>
</tr>
<tr>
<td>Taxonomy: Term</td>
<td>Action to take if argument is not present: Display all values<br />
Validator:&lt;Basic Validation&gt;<br />
Action to take if argument does not validate: Hide view/Page not found (404)</td>
</tr>
</tbody>
</table>
<h5>Fields</h5>
<table>
<tbody>
<tr>
<th>Field</th>
<th>Notes</th>
</tr>
<tr>
<td>Node: Title</td>
<td>Check Link this field to its node</td>
</tr>
</tbody>
</table>
<h4>Filters</h4>
<table>
<tbody>
<tr>
<th>Field</th>
<th>Notes</th>
</tr>
<tr>
<td>Node: Published</td>
<td>True</td>
</tr>
</tbody>
</table>
<h3>Views Templates</h3>
<p>如果前面的内容你都亲手操作并完成得相当漂亮，那么现在可以进入更深入的层次了，我们在这一小节里面将制作Views Templates（Views 模板），用来定制内容的输出。Views有很好的模板支持机制，在你没有为特定的View创建模板时，View将调用主题默认的模板，但是当你为View 创建的特定的模板时，这个View将使用你创建的模板来生成View的内容。</p>
<h4>Headline Template</h4>
<pre><code>
&lt;div&gt;
	&lt;div&gt;&lt;?php print $fields['field_image_fid']-&gt;content; ?&gt;&lt;/div&gt;
	&lt;h2&gt;Headline&lt;/h2&gt;
	&lt;h3&gt;&lt;?php print $fields['title']-&gt;content; ?&gt;&lt;/h3&gt;
	&lt;div&gt;
		&lt;?php print $fields['teaser']-&gt;content; ?&gt;
	&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>将上面的这一段代码复制到名为<code>views-view-fields--Headline--block.tpl.php</code>的文件中，再将这个文件复制到你的主题文件夹里。这个文件会被Views模块自动调用并分配到Headline View的输出过程中。</p>
<h4>Features Template</h4>
<pre><code>
&lt;div&gt;
	&lt;div&gt;&lt;?php print $fields['field_image_fid']-&gt;content; ?&gt;&lt;/div&gt;
	&lt;h4&gt;&lt;?php print $fields['title']-&gt;content; ?&gt;&lt;/h4&gt;
	&lt;div&gt;
		&lt;?php print $fields['teaser']-&gt;content; ?&gt;
	&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>将上面的这一段代码复制到名为<code>views-view-fields--Features--block.tpl.php</code>的模板文件中，再将此文件复制到主题文件夹，现在你已经有了完全由你控制输出的Headline和Features区块。</p>
<h4>Categories Template</h4>
<p>这里是本小节的一个难点，但是也是很有用的一点，所以，在这里大家认真的学习，因为在这里，你将需要在<code>page-front.tpl.php</code>文件中添加一些代码：</p>
<pre><code>
&lt;div id="categories"&gt;
&lt;?php
/* Enter the ID of the vocabulary which terms you want to show as headlines */
$vocabulary_id = "1";
/* Enter the IDs of any terms that should not be displayed */
$terms_to_exclude = array(1,6,7,271);
/*Enter the name of the view that should show the nodes */
$view_name = "posts_by_category";
foreach(taxonomy_get_tree($vocabulary_id,0,-1,1) as $value) {
if ( !in_array( $value-&gt;tid, $terms_to_exclude ) ) {
	  print t("&lt;div class="category-list $value-&gt;description"&gt;n&lt;h3&gt;" . $value-&gt;name . "&lt;/h3&gt;");
	  print views_embed_view($view_name, 'default', $value-&gt;name);
	  print t("&lt;/div&gt;");
   }
}
?&gt;
&lt;/div&gt;
</code></pre>
<p>将上面这些代码复制到<code>page-front.tpl.php</code>文件中主内容区块里，即Features区块的下方，这一个循环会向Posts_by_Category View发出请求，根据Vocabulary来生成内容。</p>
<h3>样式化</h3>
<p>如果你完成按照我们的要求来做，那么现在你可以发布一些文章来测试了，如果没有出错，首页将会按我们的要求输入一个Headline和一个 Features，并且会将存在内容的几个Category输出，每一个分类一个区块，每一个区块内都有文章标题列表，现在要做的工作就是对这些内容进行 样式化。样式化在这里不属于Drupal的专业内容，所以本文不作探讨，如果你不知道如何样式化这些内容，请去查阅与CSS相关的文章或者教程。</code></p>
<br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/bluesunries.wordpress.com/126/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/bluesunries.wordpress.com/126/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godelicious/bluesunries.wordpress.com/126/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/delicious/bluesunries.wordpress.com/126/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gofacebook/bluesunries.wordpress.com/126/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/facebook/bluesunries.wordpress.com/126/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gotwitter/bluesunries.wordpress.com/126/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/twitter/bluesunries.wordpress.com/126/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gostumble/bluesunries.wordpress.com/126/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/stumble/bluesunries.wordpress.com/126/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godigg/bluesunries.wordpress.com/126/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/digg/bluesunries.wordpress.com/126/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/goreddit/bluesunries.wordpress.com/126/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/reddit/bluesunries.wordpress.com/126/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=bluesunries.wordpress.com&amp;blog=11014795&amp;post=126&amp;subd=bluesunries&amp;ref=&amp;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://bluesunries.wordpress.com/2010/03/11/%e5%a6%82%e4%bd%95%e4%b8%badrupal%e7%bd%91%e7%ab%99%e5%88%9b%e5%bb%ba%e4%b8%80%e4%b8%aa%e6%9d%82%e5%bf%97%e7%b1%bb%e5%9e%8b%e7%9a%84%e9%a6%96%e9%a1%b5/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<media:content url="http://1.gravatar.com/avatar/3d66e1387fd140da99bab12dcc826be7?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">bluesunries</media:title>
		</media:content>

		<media:content url="http://www.mihua.net/sites/default/filesimage/3340127925_839aa27368.PNG" medium="image" />

		<media:content url="http://farm4.static.flickr.com/3348/3340955828_6b9b33980b.jpg" medium="image">
			<media:title type="html">extend-story-fields-by-cck</media:title>
		</media:content>

		<media:content url="http://farm4.static.flickr.com/3402/3340127897_5055e89223_o.gif" medium="image">
			<media:title type="html">drupal-magazine-style-frontpage-headline-view</media:title>
		</media:content>

		<media:content url="http://farm4.static.flickr.com/3652/3340127885_c10a4d896a.jpg" medium="image">
			<media:title type="html">drupal-magazine-style-frontpage-headline-view-settings</media:title>
		</media:content>
	</item>
		<item>
		<title>PHP内存限制提升</title>
		<link>http://bluesunries.wordpress.com/2010/03/11/php%e5%86%85%e5%ad%98%e9%99%90%e5%88%b6%e6%8f%90%e5%8d%87/</link>
		<comments>http://bluesunries.wordpress.com/2010/03/11/php%e5%86%85%e5%ad%98%e9%99%90%e5%88%b6%e6%8f%90%e5%8d%87/#comments</comments>
		<pubDate>Thu, 11 Mar 2010 04:45:35 +0000</pubDate>
		<dc:creator>bluesunries</dc:creator>
				<category><![CDATA[drupal使用]]></category>

		<guid isPermaLink="false">http://bluesunries.wordpress.com/?p=124</guid>
		<description><![CDATA[下载了drupal-6.9 本地主机测试 (AppServ) 安装时提示我: 数据库配置 请仔细阅读下面的安装警告: 请考虑将您的PHP内存限制提升到 16M，以避免在安装过程中发生错误。 编辑 D:WINDOWSphp.ini 文件中的内存限制参数，并重新启动网站服务器，可以提高您的内存限制（或联络您的系统管理者或主机营运商，寻求他们的协助）。 请参考 Drupal 系统需求以了解更多信息。 (当前使用 PHP内存限制 8M) 然后  打开 php.ini 把 memory_limit = 8M ; Maximum amount of memory a script may consume (8MB) 改成 memory_limit = 128M ; Maximum amount of memory a script may consume (128MB)<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=bluesunries.wordpress.com&amp;blog=11014795&amp;post=124&amp;subd=bluesunries&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
			<content:encoded><![CDATA[<p><code>下载了drupal-6.9<br />
本地主机测试 (AppServ)</p>
<p>安装时提示我:<br />
数据库配置<br />
请仔细阅读下面的安装警告:<br />
请考虑将您的PHP内存限制提升到 16M，以避免在安装过程中发生错误。 编辑 D:WINDOWSphp.ini 文件中的内存限制参数，并重新启动网站服务器，可以提高您的内存限制（或联络您的系统管理者或主机营运商，寻求他们的协助）。 请参考 Drupal 系统需求以了解更多信息。 (当前使用 PHP内存限制 8M)</p>
<p>然后  打开 php.ini<br />
把<br />
memory_limit = 8M ; Maximum amount of memory a script may consume (8MB)</p>
<p>改成<br />
memory_limit = 128M ; Maximum amount of memory a script may consume (128MB)</code></p>
<br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/bluesunries.wordpress.com/124/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/bluesunries.wordpress.com/124/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godelicious/bluesunries.wordpress.com/124/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/delicious/bluesunries.wordpress.com/124/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gofacebook/bluesunries.wordpress.com/124/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/facebook/bluesunries.wordpress.com/124/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gotwitter/bluesunries.wordpress.com/124/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/twitter/bluesunries.wordpress.com/124/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gostumble/bluesunries.wordpress.com/124/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/stumble/bluesunries.wordpress.com/124/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godigg/bluesunries.wordpress.com/124/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/digg/bluesunries.wordpress.com/124/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/goreddit/bluesunries.wordpress.com/124/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/reddit/bluesunries.wordpress.com/124/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=bluesunries.wordpress.com&amp;blog=11014795&amp;post=124&amp;subd=bluesunries&amp;ref=&amp;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://bluesunries.wordpress.com/2010/03/11/php%e5%86%85%e5%ad%98%e9%99%90%e5%88%b6%e6%8f%90%e5%8d%87/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<media:content url="http://1.gravatar.com/avatar/3d66e1387fd140da99bab12dcc826be7?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">bluesunries</media:title>
		</media:content>
	</item>
	</channel>
</rss>
