flyingleaf's blog

Firebug IE 版--- Internet Explorer Developer Toolbar

下载地址：

http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038

DIV CSS设计时IE6、IE7、FF 与兼容性有关的特性

在网站设计的时候，应该注意css样式兼容不同浏览器问题，特别是对完全使用DIV CSS设计的网站，就应该更注意IE6 IE7 FF对CSS样式的兼容，不然，你的网站可能出现一些不可预知的效果！

所有浏览器通用
height: 100px;
IE6 专用
_height: 100px;
IE6 专用
*height: 100px;
IE7 专用
*+height: 100px;
IE7、FF 共用
height: 100px !important;

一、CSS 兼容
以下两种方法几乎能解决现今所有兼容.

1, !important (不是很推荐，用下面的一种感觉最安全)
随着IE7对!important的支持, !important 方法现在只针对IE6的兼容.(注意写法.记得该声明位置需要提前.)

代码:
<style>
#wrapper {
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}
</style>

2, IE6/IE77对FireFox <from 针对firefox ie6 ie7的css样式>
*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.

代码:
<style>
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序 */
</style>

注意:
*+html 对IE7的兼容必须保证HTML顶部有如下声明：

代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"　"http://www.w3.org/TR/html4/loose.dtd">

二、万能 float 闭合(非常重要!) 可以用这个解决多个div对齐时的间距不对，
关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup]
将以下代码加入Global CSS 中,给需要闭合的div加上 class=”clearfix” 即可,屡试不爽.
代码:
<style>
/* Clear Fix */
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
</style>

三、其他兼容技巧(相当有用)
1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)
2, 居中问题.
1).垂直居中.将 line-height 设置为当前 div 相同的高度, 再通过 vetical-align: middle.( 注意内容不要换行.)
2).水平居中. margin: 0 auto;(当然不是万能)
3, 若需给 a 标签内内容加上样式, 需要设置 display: block;(常见于导航标签)
4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题.
5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)
6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.
7, 关于手形光标. cursor: pointer. 而hand 只适用于 IE.贴上代码:

兼容代码:兼容最推荐的模式。
/* FF */
.submitbutton {
float:left;
width: 40px;
height: 57px;
margin-top: 24px;
margin-right: 12px;
}
/* IE6 */
*html .submitbutton {
margin-top: 21px;
}
/* IE7 */
*+html .submitbutton {
margin-top: 21px;
}

什么是浏览器兼容：当我们使用不同的浏览器（Firefox IE7 IE6）访问同一个网站，或者页面的时候，会出现一些不兼容的问题，有的显示出来正常，有的显示出来不正常，我们在编写CSS的时候会很恼火，刚修复了这个浏览器的问题，结果另外一个浏览器却出了新问题。而兼容就是一种办法，能让你在一个CSS里面独立的写支持不同浏览器的样式。这下就和谐了。呵呵！
最近微软发布的IE7浏览器的兼容性确实给一些网页制作人员添加了一个沉重的负担，虽然IE7已经走向标准化，但还是有许多和FF不同的地方，所以需要用到IE7的兼容，有许多朋友问过IE7的兼容是什么，其实我也不知道。暂时还没找到IE7专用的兼容。除了前面那片文章，《针对firefox ie6 ie7的css样式》中的兼容方式也是很好用的。
有一点逻辑思想的人都会知道可以用IE和FF的兼容结合起来使用，下面介绍三个兼容，例如：（适合新手，呵呵，高手就在这里路过吧。）

程序代码
第一个兼容，IE FF 所有浏览器公用（其实也不算是兼容）
height:100px;
第二个兼容 IE6专用
_height:100px;
第三个兼容 IE6 IE7公用
*height:100px;
介绍完了这三个兼容了，下面我们再来看看如何在一个样式里分别给一个属性定义IE6 IE7 FF专用的兼容，看下面的代码，顺序不能错哦：

程序代码
height:100px;
*height:120px;
_height:150px;
下面我简单解释一下各浏览器怎样理解这三个属性：
在FF下，第2、3个属性FF不认识，所以它读的是 height:100px;
在IE7下，第三个属性IE7不认识，所以它读第1、2个属性，又因为第二个属性覆盖了第一个属性，所以IE7最终读出的是第2个属性 *height:120px;
在IE6下，三个属性IE6都认识，所以三个属性都可以读取，又因为第三个属性覆盖掉前2个属性，所以IE6最终读取的是第三个属性。

1 针对firefox ie6 ie7的css样式
现在大部分都是用!important来兼容，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针对IE7不错的兼容方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了现在写一个CSS可以这样：
#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE*/

那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。

2 css布局中的居中问题
主要的样式定义如下：
body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
说明：
首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。
但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。

3 盒模型不同解释.
#box{
width:600px;
//for ie6.0- width:500px;
//for ff+ie6.0
}
#box{
width:600px!important
//for ff
width:600px;
//for ff+ie6.0
width /**/:500px;
//for ie6.0-
}

4 浮动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;

5 IE与宽度和高度的问题
IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

6 页面的最小宽度
min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把 width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个<div> 放到 <body> 标签下，然后为div指定一个类：
然后CSS这样设计：
#container{
min-width: 600px;
width:expression(document.body.clientWidth < 600? “600px”: “auto” );
}
第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

7 清除浮动
.兼容box{
display:table;
//将对象作为块元素级的表格显示
}
或者
.兼容box{
clear:both;
}
或者加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，所以并不影响到IE/WIN浏览器。这种的最麻烦的
……#box:after{
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
8 DIV浮动IE文本产生3象素的bug
左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.
#box{
float:left;
width:800px;}
#left{
float:left;
width:50%;}
#right{
width:50%;
}
*html #left{
margin-right:-3px;
//这句是关键
}
HTML代码
<DIV id=box>
<DIV id=left></DIV>
<DIV id=right></DIV>
</DIV>

9 属性选择器(这个不能算是兼容,是隐藏css的一个bug)
p[id]{}div[id]{}
p[id]{}div[id]{}
这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用
属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

10 IE捉迷藏的问题

当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。
有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。
解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。

11 高度不适应
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用
margin 或paddign 时。例：
<div id=”box”>
<p>p对象中的内容</p>
</div>

CSS：
#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
解决方法：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}或者为DIV加上border属性。

屏蔽IE浏览器（也就是IE下不显示）
*:lang(zh) select {font:12px !important;} /*FF,OP可见*/
select:empty {font:12px !important;} /*safari可见*/
这里select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。

仅IE7识别
*+html {…}
当面临需要只针对IE7做样式的时候就可以采用这个兼容。

IE6及IE6以下识别
* html {…}
这个地方要特别注意很多地主都写了是IE6的兼容其实IE5.x同样可以识别这个兼容。其它浏览器不识别。
html/**/ >body select {……}
这句与上一句的作用相同。

仅IE6不识别
select { display /*IE6不识别*/:none;}
这里主要是通过CSS注释分开一个属性与值，流释在冒号前。

仅IE6与IE5不识别
select/**/ { display /*IE6,IE5不识别*/:none;}
这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。

仅IE5不识别
select/*IE5不识别*/ { display:none;}
这一句是在上一句中去掉了属性区的注释。只有IE5不识别

盒模型解决方法
selct {width:IE5.x宽度; voice-family :""}""; voice-family:inherit; width:正确宽度;}
盒模型的清除方法不是通过!important来处理的。这点要明确。

清除浮动
select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的兼容来对父级做一次定义，那么就可以解决这个问题。

截字省略号
select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrapoverflow:hidden; }
这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾，很好的一个技术。只是目前Firefox并不支持。

只有Opera识别
@media all and (min-width: 0px){ select {……} }
针对Opera浏览器做单独的设定。

以上都是写CSS中的一些兼容，建议遵循正确的标签嵌套(div ul li 嵌套结构关系)，这样可以减少你使用兼容的频率，不要进入理解误区，并不是一个页面就需要很多的兼容来保持多浏览器兼容)，很多情况下也许一个兼容都不用也可以让浏览器工作得非常好，这些都是用来解决局部的兼容性问题，如果希望把兼容性的内容也分离出来，不妨试一下下面的几种过滤器。这些过滤器有的是写在 CSS中通过过滤器导入特别的样式，也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。

IE5.x的过滤器，只有IE5.x可见
@media tty {
i{content:"";/*" "*/}} @import ’ie5win.css’; /*";}
}/* */

IE5/MAC的过滤器，一般用不着
/**//*/
@import "ie5mac.css";
/**/

下面是IE的条件注释，个人觉得用条件注释调用相应兼容是比较完美的多浏览器兼容的解决办法。把需要兼容的地方单独放到一个文件里面，当浏览器版本符合的时候就可以调用那个被兼容的样式，这样不仅使用起来非常方便，而且对于制作这个CSS本身来讲，可以更严格的观察到是否有必要使用兼容，很多情况下，当我本人写CSS如果把全部代码包括兼容都写到一个CSS文件的时候的时候会很随意，想怎么兼容就怎么兼容，而你独立出来写的时候，你就会不自觉的考虑是否有必要兼容，是先兼容 CSS？还是先把主CSS里面的东西调整到尽可能的不需要兼容？当你仅用很少的兼容就让很多浏览器很乖很听话的时候，你是不是很有成就感呢？你知道怎么选择了吧～～呵呵
IE的if条件兼容自己可以灵活使用参看这篇IE条件注释

Only IE
所有的IE可识别
只有IE5.0可以识别
Only IE 5.0+
IE5.0包换IE5.5都可以识别
仅IE6可识别
Only IE 7/-
IE6以及IE6以下的IE5.x都可识别
Only IE 7/-
仅IE7可识别

Css 当中有许多的东西不不按照某些规律来的话，会让你很心烦，虽然你可以通过很多的兼容，很多的!important 来控制它，但是你会发现长此以往你会很不甘心，看看许多优秀的网站，他们的CSS让IE6,Ie7,Firefox,甚至Safari,Opera运行起来完美无缺是不是很羡慕？而他们看似复杂的模版下面使用的兼容少得可怜。其实你要知道IE 和 Firefox 并不不是那么的不和谐，我们找到一定的方法，是完全可以让他们和谐共处的。不要你认为发现了兼容的办法，你就掌握了一切，我们并不是兼容的奴隶。
div ul li 的嵌套顺序

今天只讲一个规则。就是<div><ul><li>的三角关系。我的经验就是<div>在最外面，里面是<ul>，然后再是<li>，当然<li>里面又可以嵌套<div>什么的，但是并不建议你嵌套很多东西。当你符合这样的规则的时候，那些倒霉的，不听话的间隙就不会在里面出现了，当你仅仅是<div>里面放<li>，而不用 <ul>的时候，你会发现你的间隙十分难控制，一般情况下，IE6和IE7会凭空多一些间距。但很多情况你来到下一行，间隙就没了，但是前面的内容又空了很大一块，出现这种情况虽然你可以改变IE的Margin，然后调整Firefox下面的Padding，以便使得两者显示起来得效果很相似，但是你得CSS将变得臭长无比，你不得不多考虑更多可能出现这种问题补救措施，虽然你知道千篇一律来兼容它们，但是你会烦得要命。

具体嵌套写法
遵循上面得嵌套方式，<div><ul><li></li></ul>< /div> 然后在CSS 里面告诉 ul {Margin:0px;Padding:0px;list-style:none;}，其中list-style:none是不让<li> 标记的最前方显示圆点或者数字等目录类型的标记，因为IE和Firefox显示出来默认效果有些不一样。因此这样不需要做任何手脚，你的IE6、和 IE7、Firefox显示出来的东西(外距，间距，高度，宽度)就几乎没什么区别了，也许细心的你会在某一个时刻发现一、两个象素的差别，但那已经很完美了，不需要你通过调整大片的CSS来控制它们的显示了，你愿意，你可以仅仅兼容一两个地方，而且通常这种兼容可以适应各种地方，不需要你重复在不同的地方调试不同的兼容方式–减轻你的烦。你可以ul.class1, ul.class2, ul.class3 {xxx:xxxx}的方式方便的整理出你要兼容的地方，而统一兼容。尝试一下吧，再也不要乱嵌套了，虽然在Div+CSS的方式下你几乎可以想怎么嵌套就怎么嵌套，但是按照上面的规律你将轻松很多，从而事半功倍！

"FCKeditor is not defined" on joomla frontend page[solved]

Insert the following code to /components/com_content/content.html.php file:
<script src="http://xxx.xxx.xxx/mambots/editors/fckeditor/fckeditor.js" type="text/javascript"></script>

Then it's working on joomla frontend page. Good luck!

FCKeditor 的配置和使用方法

FCKeditor 是一个十分强大的网页文本编辑器，它支持多种脚本编程语言和支持多国语言。
如果你还不知道或者你知道还不会配置这个的话，请你继续往下看。

我用是FCKeditot的版本是2.1，不过现在已经有FCKeditor 2.3.2 released版本了，
你可以到他的官方网站上去下载 http://www.FCKeditor.net/。

本文介绍的是关于php的配置方法，其他语言的配置方法是和它一样的。

假设网站的目录为：
www
    index.php
    inc
    FCKeditor

一、调用FCKeditor的两种方法

1、通过创建实例
在这里只写调用它的代码了，网站的其他代码当然由你自己写了，把下面的代码加在需要编辑器的地方：
<?php
include_once("FCKeditor/fckeditor.php");    //引用FCKeditor.php这个文件
$FCKeditor=new FCKeditor('welefen');        //创建FCKeditor对象的实例
$FCKeditor->BasePath='FCKeditor/';          //FCKeditor所在的位置，这里它的位置就是'FCKeditor/';
$FCkeditor->ToolbarSet='Default';           //工具按钮设置
$FCKeditor->Width='100%';                   //设置它的宽度
$FCKeditor->Height='300px';                 //设置它的高度
$FCkeditor->Create();
?>
2:通过iframe调用创建
在你认为该加的地方加上
<INPUT id=content style="DISPLAY: none" type=hidden name="welefen">
<INPUT id=content___Config style="DISPLAY: none" type=hidden>
<IFRAME id=content___Frame src="FCKeditor/editor/fckeditor.html?InstanceName=welefen&Toolbar=Default" frameBorder=0 width=100% scrolling=no height=300>
</IFRAME>

对上述两种方法的说明：

在上述两种方法中，你都看到了字符串'welefen'，你可能不知道是什么意思，现在我给你解释一下
如果你要将文本编辑器中的内容在另外一个页面显示或者要将在它保存在数据库，你可以用
$_POST['welefen']或者用$_GET['welefen']来获取文本编辑器中的内容,具体是用post还是用get那要看你用的是什么传递方法了
当然你也可以把welefen改成你想要用的，如'content'.

如果你还不知道什么是ajax，那么这一段话你就不用看了。
当你用ajax的来获得内容的时候是不是发现得不到内容，如：
<script>alert(document.form.content.value)</script>你会发现谈出的窗口没内容
那么我们可以通过下面的代码来获得它的内容：
function getContentValue()
{
var oEditor = FCKeditorAPI.GetInstance('content') ;
var acontent=oEditor.GetXHTML();
return acontent;
}

二：配置一些文件
1:fckconfig.js的配置
(1).工具按钮设置

查找FCKConfig.ToolbarSets["Default"]，这里有很多按钮，下面我们将对他们详细介绍

EditSource 显示HTML源代码 StrikeThrough 删除线
Save 保存 Subscript 下标
NewPage 新建空白页面 Superscript 上标
Preview 预览 JustifyLeft 左对齐
Cut 剪切 JustifyCenter 居中对齐
Copy 复制 JustifyRight 右对齐
Paste 粘贴 JustifyFull 两端对齐
PasteText 纯文本粘贴 InsertOrderedList 自动编号
PasteWord 来自Word的粘贴 InsertUnorderedList 项目符号
Print 打印 Outdent 减少缩进
SpellCheck 拼写检查 Indent 增加缩进
Find 查找 ShowTableBorders 显示表格线
Replace 替换 ShowDetails 显示明细
Undo 撤销 Form 添加Form动作
Redo 还原 Checkbox 复选框
SelectAll 全选 Radio 单选按钮
RemoveFormat 去除格式 Input 单行文本框
Link 插入/编辑链接 Textarea 滚动文本框
RemoveLink 去除连接 Select 下拉菜单
Anchor 锚点 Button 按钮
Image 插入/编辑图片 ImageButton 图片按钮
Table 插入/编辑表格 Hidden 隐藏
Rule 插入水平线 Zoom 显示比例
SpecialChar 插入特殊字符 FontStyleAdv 系统字体
UniversalKey 软键盘 FontStyle 字体样式
Smiley 插入表情符号 FontFormat 字体格式
About 关于 Font 字体
Bold 粗体 FontSize 字体大小
Italic 斜体 TextColor 文字颜色
Underline 下划线 BGColor 背景色

这个默认的是包含了所有的工具按钮，不过到我们具体要用的时候，有的按钮并不需要，而且还影响速度。那么我们可以将我们不需要的按钮给删了。下面是我的配置，给大家一个参考，当然你可以根据你的喜好。
FCKconfig.ToolbarSets["Default"] = [
['EditSource','Save','NewPage','Preview','-','Cut','Copy','Paste','PasteText','-','Find','Replace','-','Undo','Redo','-','SelectAll','-','Link','RemoveLink','-','Image','Table','Rule','SpecialChar','Smiley'] ,
['Bold','Italic','Underline','-','JustifyLeft','JustifyCenter','JustifyRight','-','InsertOrderedList','InsertUnorderedList','-','Form','Checkbox','Radio','Input','Textarea','Select','Button','-','FontStyleAdv','TextColor'] ] ;

如果在前台给用户回复一写帖子的话，还是没必要要上面的，这时你可以在加一个：
FCKConfig.ToolbarSets["Basic"] = [
['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','About']
] ;

这样的话，你在前台调用的时候就要用$FCKeditor->ToolbarSet='Basic',不能再为"Default"了。

(2)：语言的配置

查找FCKConfig.DefaultLanguage将它设置为'zh-cn'.

(3):脚本语言的设置

查找var _FileBrowserLanguage和var _QuickUploadLanguage将他们设置为'php', 默认是'asp',如果这里不设置的话，图片将不能上传，这点很重要。当时我在用FCKeditor由于没配置这个，不能上传图片，而我同寝室的用asp 能上传图片，让我烦恼了好多天，最后终于找到是这个原因。

2:图片上传的配置

打开文件FCKeditor/editor/filemanager/browser/default/connectors/php/config.php
查找$Config['Enabled']，将它设置为'true'
查找$Config['UserFilesPath']，将它设置图片的目录，这个目录是相对于主目录的。
例如：我写了一个blog，就可以设置为/blog/upload/

打开文件FCKeditor/editor/filemanager/upload/php/config.php
查找$Config['Enabled']，将它设置为'true'
查找$Config['UseFileType']，将它设置上传文件的目录，最好与上面的图片目录相同。

好了，现在所有的配置都已经完成了，现在你要做的只是删除一些不必要的文件了。
只要包含'_'的目录名和文件名都可以删除，当然你用的是php，其他语言的一些目录也都可以删除，这样就减小了文件的大小。

Joomla & Mambo页面布局教程

(图一)Mambo页面布局

1．Mambo页面布局说明

这里我们使用mambo自带的模板来举例说明，参考上图。
作为架设网站的工具mambo页面基本分为以下几个区域：
<1> 顶部：<pathway>, <user3> and <user4> 模块
<2> 左侧栏：<left>模块
<3> 中间： <banner>，<user1>, <user2> 和 <mainbody>模块
<4> 右侧栏：<right>模块
<5> 底部：<footer>模块

这些只是默认的mambo模块布局，所有模块的位置都可以通过修改模板文件index.php来定义和调整到任意位置。载入模块的php语句是：

mosLoadModules($position_name [, $style] )

例如：

mosLoadModules( “left”, -1 )

在Mambo4.5.2以前的版本中，对于$style的定义有0（默认），-1，1，-2, Mambo4.5.2.1版本新增了”-3”的定义。（见图1 (c)）使用他们会有什么不同的效果呢。我们一起来看看吧！

I. $style=0 (默认)时，模块纵向单独显示，实例如下：

 <!-- Individual module -->
<table cellpadding="0" cellspacing="0" class="moduletable[suffix]">
  <tr>
    <th valign="top">Module Title</th>
  </tr>
  <tr>
    <td>
      Module output
    </td>
  </tr>
</table>
<!-- Individual module end -->

II. $style=1时，模块横向显示。每个模块显示在一个表格栏cell内。实例如下：

 <!-- Module wrapper -->
<table cellspacing="1" cellpadding="0" border="0" width="100%">
  <tr>
    <td align="top">
      <!-- Individual module -->
      <table cellpadding="0" cellspacing="0" class="moduletable[suffix]">
        <tr>
          <th valign="top">Module Title</th>
        </tr>
        <tr>
          <td>
            Module output
          </td>
        </tr>
      </table>
      <!-- Individual module end -->
    </td>
    <td align="top">
      <!-- ...the next module... -->
    </td>
  </tr>
</table>

III. $style=-1时，模块外部没有任何边框修饰而且也没有模块标题（名称）。效果如下（本来面目）：

模块1 模块2 模块3

IV. $style=-2时，模块显示格式如下：

<!-- Individual module -->
<div class="moduletable[suffix]">
 <h3>Module Title</h3>
  Module output
</div>
<!-- Individual module end -->

V. $style=-3时，模块全部用div来修饰，有利于给网页减肥，另外还可以实现圆角边框。

<!-- Individual module -->
<div class="module[suffix]">
  <div>
    <div>
      <div>
        <h3>Module Title</h3>
        Module output
      </div>
    </div>
  </div>
</div>
<!-- Individual module end -->

相信很多mambo fans一定喜欢 “-3”效果（圆角，cool!），现在你也可以创建自己的可爱圆角mambo模板了！如何作出圆角模块显示效果？我们将在以后的教程里介绍～，所以敬请关注！

<2> 模块的显示/隐藏技巧

在制作mambo模板时，必须为每个模块留出显示的区域，我们经常会使用例如table,td,div标签把模块包装起来定义这个区域的宽度。所以，当模块在某些页面被设置成为隐藏状态时，包装模块的这些 table或div还在，而且会显示为空白，很影响页面的美观。而一个简单的php语句就可以解决这个问题，if {} condition ＋ mosCountModules （见图1 （b））

下面的例子告诉我们如何使用 if {} 语句达到更好的效果，同时去掉了不必要的html代码。举例：

<!-- START set the width for td of user1 and user2  -->
<?php 
  $numblock = 0;
  if (mosCountModules( "user1" )>0 && mosCountModules( "user2" )>0) {
    $numblock = 2;
    $blockwidth = 50;
  }else if (mosCountModules( "user1" )>0 || mosCountModules( "user2" )>0) {
    $numblock = 1;
    $blockwidth = 100;
  }
?>
<!-- END set the width for td of user1 and user2  -->
<!-- START load module user1 and user2  -->
<?php if ($numblock > 0) { ?>
  <tr>
  <?php if (mosCountModules( "user1" )) { ?>
    <td width="<?php echo $blockwidth; ?>%" valign="top">
    <div class="colorbox"> 
    <div id="user1" class="roundblock">
    <?php mosLoadModules ( "user1", -3 ); ?>
    </div>
    </div>    
    </td>
<?php } ?>
<?php if (mosCountModules( "user2" )) { ?>
  <td width="<?php echo $blockwidth; ?>%">
  <div id="user2" class="roundblock">
  <div class="colorbox"> 
  <?php mosLoadModules ( "user2", -3 ); ?>
  </div>
  </div>
  <?php } ?>
  </tr>
<?php } ?>
<!-- END load module user1 and user2  -->

上面代码非常有用，你一定会用到，它的效果是使uer1和user2的显示区域宽度相等，如图2，而且当其中一个（user1或user2）模块被隐藏时，另一个模块的宽度会自动变成内容页宽度，如图3，当user1和user2都不发布时，这些区域的修饰代码都会被自动去除。

（图2）user1,user2同时发布

____

（图3）user1或user2发布

这个技巧可以用于所有模块（尤其是left,right,top,users）, 但对于那些一般必须具备的模块例如查询（user4），顶部菜单(user3), 当前路径(pathway)，主体内容（mosMainBody）, 只使用一个if{} 就足够了（参考图1(b)）

<3> $mosConfig_sitename的使用

用来显示网站的名称，你可以把此代码放在页面顶部/网站标志的位置。php语句为：

<?php echo "$mosConfig_sitename!";?>

<4> $mosCurrentDate: 用来显示当前时间

<?php echo mosCurrentDate();?>

或者

<?php echo mosFormatDate('2005-01-01 10:00:00');?>

Setting Up Joomla RSS Feed

How To Feed Your visitor Joomla RSS Newsfeeds

Limited Syndication in Joomla
The basic Joomla RSS feed possibility is Limited to the Frontpage items.
It is standard set to on, and You can Find the Configuration one Components - Syndicate.

Most people overlook this or are looking at the Feeds section.
In short RSS Stands for Real Simple Syndication , although there are other abbreviations.

The better Joomla RSS Feed Manager
As said, the basic Joomla Syndication is limited to the Frontpage, or One other Category.
To overcome this problem I suggest You install Run-Digital RSS Feed Manager

This lets You choose from a number of categories to put into the feed, Like Blogging, News, Newsflashes and Your basic best Categorie That Your users are most likely to subscribe to.

Configuration of the Joomla Syndication Component.

Once You installed the component and chosen the Categories to Syndicate, there are a few other things to Change.

Setting For the standard Joomla RSS feed is done through the Main Control Panel, Choose Components and from there "Sycndicaton".

These settings also apply to the standard Joomla Syndication Component.

The Items You really have to change are Title and description...
There are about 802.000 Joomla Syndication URLs in Google that say that they are a Joomla! Powered website......

So please change this to your own Title and description, and don't forget to Change the Image Alt description as well.

SEO Tip: Put your major keyword in all three items.

Other parameters to look at

Cache Time
I suggest your change the Cache Time to fit your Publishing schedule, for a news site, you can leave this to the standard 3600 seconds = 1 Hour.
If Your site is not changed that often, set it a LOT Higher like 86400 = 24 Hours or more.

Number of Items
These are the total of Items included in the Feed.
For most websites this will be enough, if Your site is really buzzing, set it to 10.

Limit text and Text Lenght
These two belong together.
If you limit your text to put into the feed, users will get a Link to read more on the site, thus giving your more page hits.
Now 20 words is very limited, set it according to the length of words of your normal text introduction.
My option would be to set Limit text to NO, your readers will appreciate it a lot more!
And you stand out of the crowd in a positive way, and for the number of page hits.. your readers are more likely to visit you again and again.
Providing of course you give them the right content in the feeds.

Finishing and Testing Your feed
Subscripe to Your own Feed with a Feed Reader and check if you receive the Information you want Your users to get.
If its not what you want, go back and set it right.

If your are happy with this, then take the next step...get Feedburner setup at www.feedburner.com

technorati tags:

开源软件历史十大杰出人物

No.1 自然非伟大的 RMS 莫属了。Richard Stallman，GNU 的创始人，GCC 和Emacs 的作者。GPL 的发明人。

No.2 Linux Fan 的教父，Linus Torvalds，Linux 的创始人和领导者。

No.3 Apache 的作者 Brian Behlendorf。

No.4 Perl 的发明人 Larry Wall。

No.5 Miguel de Icaza，GNOME 和 Ximian 的创始人。

No.6 Michael Tiemann，G++（GNU C++ 编译器）的作者，Cygnus 公司创始人，RedHat CTO。

No.7 Python 的发明人 Guido van Rossum。

No.8 Samba 的作者 Andrew Tridgell。

No.9 谈到 OpenSource 就不能不提到 ESR，Eric S. Raymond，
《The Art of UNIX Programming》、《大教堂与市集》的作者，老牌 Unix 黑客，黑客道行话的收集者，OSI 的创始人，OpenSource 的鼓手。

No.10 Marc Fleury，JBoss Group 的 CEO，JBoss 项目的领头人。JBoss 商标的所有人。

本文出自 51CTO.COM技术博客

php截取UTF-8编码的中英文字符串

PHP截取UTF-8编码的中英文字符串就会出现乱码，这确定是很麻烦的事，校验页面是否符合xhtml 1.0格式的时候也会报错。

字符串里如有包含英文的单字节，用substr($strChar,$len)处理会出错?的乱码，终于用正则表达式的函数得以解决（发在自己的blog和大家分享）。

function utf8_substr($str,$from,$len){
return preg_replace(’#^(?:[x00-x7F]|[xC0-xFF][x80-xBF]+){0,’.$from.’}’. ‘((?:[x00-x7F]|[xC0-xFF][x80-xBF]+){0,’.$len.’}).*#s’, ‘$1′,$str);
}

令人哭笑不得的便条

给恶心的弟弟：
问你为什么要用5只手指头轮流挖鼻孔时请别回答我说：“每只手指头挖起来各有不同的感觉。”
——小鼻孔姊姊留

给伤心欲绝的老板：
公司会倒，我想跟名字也有一点关系吧？
——惠岛有限公司的员工留

给大眼：
请你不要每次都用很羡慕的口吻对我说：“眼睛小真好，上课打瞌睡都不会被老师发现！好吗？”
——不知道该可悲还是该庆幸的小眼留

给反应很快的阿婆：
那天您坐在公车上，252司机的紧急刹车，您重心不稳冲了出去，竟问司机：“找我有什么事情？”
——觉得你蛮可爱的学生留

给表达不佳的琳：
虽然你的语文能力不好，但请不要离谱地告诉我：“阿琪他爷爷有一次死掉……”
——认为人只能死一次的璇留

给从没捐过血的大牛：
当你收到捐血报告书时，请不要大声嚷嚷，它把你的血打零分（O）而我的血是A！
——被你彻底打败的捐血人小明留

DIV+CSS布局-- 关于ID和CLASS

首先，有些东西需要说明一下。对于之前的文章，由于为了让大家更好的区分各层的关系，教程中不少地方使用了大写的CLASS或者ID，其实这样做是不推荐的，我推荐的方法是使用单词之间增加下划线，或者单词拼接的方法。因为CSS是区分大小写的。大家可以看到，我提供给大家的下载文件中全部都是使用小写来处理的。

　　我们先来处理sidebar的样式，经过分析，我们可以得知，sidebar有四个部分，我们将这四个部分分为四个层：
<div id="search"></div>
<div id="login">
<div class="bar_title"></div>
<div class="bar_body"></div>

中国网管论坛

</div>
<div id="infomation">
<div class="bar_title"></div>
<div class="bar_body"></div>
</div>
<div id="standard">
<div class="bar_title"></div>
<div class="bar_body"></div>
</div>　　在这里我们有到ID和CLASS，那么有的朋友就要问了，究竟什么情况下用ID，什么情况下用CLASS呢？

　　ID，表示的是唯一性，并且在这个页面中只会出现一次，我们用它来表示布局的结构；
　　CLASS，表示一组（类）或一个具有同样性质的元素，它们可以共用样式，并且在页面中将会出现多次。

　　因为会员登录、站点信息、页面标准以及这几个区域中的内容字的样式将会是一样的，所以我们将它们放在一个组里面。

　　但有的时候，我们需要给这些层中的元素设置不同的样式时，我们要如何做呢？例如会员登录这几个文字使用14px加粗，其他是使用12px加粗，我们要怎么写CSS呢，看下面的代码？
.bar_title {font-size:12px;font-weight:bold}
#login .bar_title {font-size:14px}

　　#login .bar_title 表示的是在ID为login的层下的CLASS为bar_title的元素的样式，这样表示的就可以有针对性的对某些元素定制样式。#login .bar_title 在单独设置了font-size:14px的样式时，同时也继承了.bar_title这一组（类）的样式，那就是font-weight:bold，加粗。

中国网管联盟

<div class="title">
<a>title1</a>
</div>
<span class="title">
<a>title2</a>
</div>

　　这里，我要将title1的文字样式设置为14px,红色，将title2的文字样式为10px，绿色，title1和title2都需要加粗，DIV加一个红色的1px的边框，SPAN加一个绿色的1px的边框，样式可以这样写：
.title {border:1px solid #f00} /*默认为1px的红色边框*/
span.title {border-color:#0f0}
.title a {font-weight:bold}
div.title a {font-size:14px;color:#f00}
span.title a {font-size:12px;color:#0f0}

　　大家可以看到，使用CLASS可以使得许多的元素可以共用同样的样式，通过元素的TagName的不同，又可以对每一个元素定制不同的样式，我想大家应该对什么时候该用ID，什么时候该用CLASS已经有了深刻的理解了吧！

　　好了，这次的教程到这里，我不知道下一篇教程什么时候更新，但我会尽快的，谢谢大家的支持。

　　另外，花了点时间把以前的文件又重新整理了一下，提供下载，并添加了详细的注释，大家可以通过查看文档内的注释来了解到更多的内容。