自定义附件标记 For SaBlog-X 1.6

2007年07月1日 — Asp J

    考完了2门考试，终于有点时间了，嘿嘿……参考了SaBlog BBS里Tension的添加mp3标记的方法，改成了custom标记，可以自动识别播放mp3, swf, flv, wmv, mpg文件，虽然不是很完善，不过先用着好了，等到什么时候不懒了，再把播放rm和rmvb的功能也加进去，嘿嘿……

2007.7.5 新增了wma播放功能，不过因为那个flash播放器不支持wma，所以只能用windows media player来实现了，什么时候再去找找可以支持wma的播放器好了……

安装方法：
1. 下载压缩包mediaplayer，在你的Blog根目录下建立一个mediaplayer的文件夹，把压缩包里面的文件解压到这个目录中
mediaplayer.rar (70)

2. 在./template/你用的模版的目录/style.css里面添加

CSS代码
  1. .customfile {   
  2.  padding: 5px;   
  3.  background: #333333;   
  4.  font: 12px Verdana, Tahoma, sans-serif;   
  5.  border: 1px dotted #777;   
  6. }  

3. 在global.php文件中查找 

PHP代码
  1. // 获取页面调试信息  

在其上面添加 

PHP代码
  1. function makecustomfile($id) {   
  2.     $pt = explode(‘.’,$id);   
  3.     $p  = count($pt);   
  4.     if($p) {   
  5.         $ret = strtoupper($pt[($p-1)]);   
  6.         if($ret == ‘MP3′) $code = ‘<div class="customfile">’.$ret.‘音乐文件：<br><embed src="./mediaplayer/mediaplayer.swf?file=’.$id.‘&width=300&allowfullscreen=true&displayheight=0&height=20&frontcolor=0×333333&lightcolor=0x43B300&overstretch=true" width="300" height="18" scale="ShowAll" menu="menu" wmode="Window" quality="1" type="application/x-shockwave-flash"></embed><br>下载该附件：<a href="’.$id.‘">’.$id.‘</a></div>’;   
  7.         else if($ret == ‘SWF’ or $ret == ‘FLV’) $code = ‘<div class="customfile">Flash视频：<br><embed src="/mediaplayer/mediaplayer.swf?file=’.$id.‘&height=300&width=400&autostart=false" width="400" height="300" scale="ShowAll" menu="menu" wmode="Window" quality="1" type="application/x-shockwave-flash"></embed><br>下载该附件：<a href="’.$id.‘">’.$id.‘</a></div>’;   
  8.         else if($ret == ‘WMV’ or $ret == ‘MPG’ or $ret == ‘AVI’) $code = ‘<div class="customfile">’.$ret.‘视频：<br><object height="300" width="350" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" align="center" border="0"><param name="AutoStart" value="0"><param name="Balance" value="0"><param name="enabled" value="-1"><param name="EnableContextMenu" value="-1"><param name="url" value="’.$id.‘"><param name="PlayCount" value="1"><param name="rate" value="1"><param name="currentPosition" value="0"><param name="currentMarker" value="0"><param name="defaultFrame" value=""><param name="invokeURLs" value="0"><param name="baseURL" value=""><param name="stretchToFit" value="0"><param name="volume" value="100"><param name="mute" value="0"><param name="uiMode" value="full"><param name="windowlessVideo" value="0"><param name="fullScreen" value="0"><param name="enableErrorDialogs" value="-1"><param name="SAMIStyle" value><param name="SAMILang" value><param name="SAMIFilename" value><param name="captioningID" value></object><br>下载该附件：<a target="_blank" href="’.$id.‘">’.$id.‘</a></div>’;   
  9.         else if($ret == ‘WMA’) $code = ‘<div class="customfile">’.$ret.‘音乐文件：<br><object height="64" width="350" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" align="center" border="0"><param name="AutoStart" value="0"><param name="Balance" value="0"><param name="enabled" value="-1"><param name="EnableContextMenu" value="-1"><param name="url" value="’.$id.‘"><param name="PlayCount" value="1"><param name="rate" value="1"><param name="currentPosition" value="0"><param name="currentMarker" value="0"><param name="defaultFrame" value=""><param name="invokeURLs" value="0"><param name="baseURL" value=""><param name="stretchToFit" value="0"><param name="volume" value="100"><param name="mute" value="0"><param name="uiMode" value="full"><param name="windowlessVideo" value="-1"><param name="fullScreen" value="0"><param name="enableErrorDialogs" value="-1"><param name="SAMIStyle" value><param name="SAMILang" value><param name="SAMIFilename" value><param name="captioningID" value></object><br>下载该附件：<a target="_blank" href="’.$id.‘">’.$id.‘</a></div>’;   
  10.         else if($ret == ‘REG’) $code = ‘<div class="customfile">注册表文件：<br>下载该附件：<a target="_blank" href="’.$id.‘">’.$id.‘</a></div>’;   
  11.         else if($ret == ‘ZIP’ or $ret == ‘RAR’) $code = ‘<div class="customfile">’.$ret.‘压缩包：<br>下载该附件：<a target="_blank" href="’.$id.‘">’.$id.‘</a></div>’;   
  12.         else if($ret == ‘EXE’ or $ret == ‘COM’) $code = ‘<div class="customfile">应用程序：<br>下载该附件：<a target="_blank" href="’.$id.‘">’.$id.‘</a></div>’;   
  13.         else $code = ‘<div class="customfile">’.$ret.‘文件：<br>下载该附件：<a target="_blank" href="’.$id.‘">’.$id.‘</a></div>’;   
  14.     } else {   
  15.         $code = ‘<div class="customfile">未知文件：<br>下载该附件：<a target="_blank" href="’.$id.‘">’.$id.‘</a></div>’;   
  16.     }   
  17.     return $code;   
  18. }  

4. 在index.php中查找

PHP代码
  1. //处理PHP高亮   
  2. $article['content'] = preg_replace("/\s*\[php\](.+?)\[\/php\]\s*/ies", "phphighlite(‘\\1′)", $article['content']);  

在下面添加

PHP代码
  1. //处理自定义文件   
  2. $article['content'] = preg_replace("/\s*\[custom\](.+?)\[\/custom\]\s*/ies", "makecustomfile(‘\\1′)", $article['content']);  

这里有2处，别少加了，不然进入文档之后就看不到效果了……

5.安装完成，看看效果吧……嘿嘿……

先来做做测试，放2个文件上来……
Black Box Recorder – Seasons In The Sun
black_box_recorder_seasons_in_the_sun.wma (70)

Zack Kim – Supermario Theme 2 Guitars
supermario_2_guitars.flv (60)

Radiohead – Paranoid Android
radiohead.-.[paranoid.android].mv.mpg (72)

Posted in 03 Binary Life. Tags: , . 2 条评论 »

[原创]CSS超快速入门——完结篇

2007年02月10日 — Asp J

    其实用CSS+DIV和SPAN来设计网页，我的心得只有一个字——套，外面的层套着里面的层，里面的层再套着更里面的层，如果你看完下面的文字，你就会很清楚的认识到这一点。

一、Div和Span的区别
    在用CSS+Div和Span来设计网页之前，我们必须知道两者的区别。Span 和 Div 的区别在于，Div是一个块，它包含了标题、段落甚至表格，而且浏览器会为它创建一个单独的区域，不会让他和其他的区域混合在一起，而Span则仅仅是一个样式，浏览器不会给他一个单独的区域。比如一行文字，如果中间部分文字用div标记，那么这段文字就会被单独放在一行，而不会与两边的文字混合，但是如果是但是如果是用Span标记，那么他的位置将不会改变，而只是应用了Span里所设定的样式。

二、Div和Span的定义方式

Div：
<div id=”boxid” class=”boxclass”>
块间元素
</div>

Span：
<span id=”boxid” class=”boxclass”>
行间元素
</span >

    上面的定义中id和class都有，但是只有一个也是可以的。另外id和class是有区别的，但是我们现在暂时只要知道他们在CSS中定义方式的区别就可以了。

id的样式定义：
#boxid {
……
}

#boxid 标记{
……
}

class的样式定义：
.boxclass {
……
}

.boxclass 标记{
……
}

    在定义中，我们不仅可以通过#boxid {}和.boxclass {}来定义整个boxid和boxclass区域中的样式，还可以通过#boxid 标记{}和.boxclass 标记{}的定义方式，单独的定义在boxid或boxclass区域里面<标记></标记>之间的内容的样式。

三、框架介绍
    在用CSS+DIV和SPAN来设计网页的时候，实际上是把网页分成很多个的区域，再定义好每个区域的样式，即可完成整个网页，比如说一个Blog，那么可以这样来设计它的架构：
[附件已失效]

    通过上面这幅图，我们可以看出来，整个网页的结构是一层包含着一层的，最外层的是body，然后用container包含整个Blog的内容——Head，Menu，ContentContainer和Foot，container最上面是Blog的头（Head），头中又包含了Spacename和Intro，头下面是Menu，Menu下面是ContentContainer，它包含了左边栏LeftContainer和主要内容Content，左边栏里又包含了内容框Leftbar，而foot在container的最下面。这样，就形成了整个Blog的外观，而这种一个套着一个或几个的关系就是用CSS+Div设计网页的主要思想。
    这里顺便说一下为什么要用container，也就是大家说的容器。因为在CSS里面，内层块的所有的样式，都是相对于最靠近它的外层和和它在同一个外层的其他内容来说的，所以使用container主要是为了用它来限制里面所有内容的范围。比如说你定义leftbar如下：
.leftbar {
width: 200;
float: left;
}
    如果不用leftcontainer，而直接写：
<div class=”leftbar”>第一个leftbar</div>
<div class=”leftbar”>第二个leftbar</div>
    那么第二个leftbar将显示在第一个leftbar的右边，但是如果定义leftcontainer如下：
.leftcontainer {
 width: 220;
 float: left;
}
    再写
<div class=”leftcontainer”>
<div class=”leftbar”>第一个leftbar</div>
<div class=”leftbar”>第二个leftbar</div>
</div>
    那么，因为2个leftbar的宽度大于1个leftcontainer的宽度，所以，第二个leftbar就无法显示在第一个leftbar的右边了，它就将被挤到下一行来显示，这样就形成了一条和其他内容不相冲突的侧边栏，它旁边的content栏能影响到也只有leftcontainer，而影响不到leftbar对于leftcontainer的相对位置。这就是container的作用。
    当然，你定义的内层的margin之类的东西，也是相对最靠近它的外层的容器和和它在同一层的其他东西而言的。所以要好好计算宽高啊，不然就会出现一些脱节的景象了，呵呵。

四、ID与Class
    其实ID和Class是有一些区别的，并不是像很多地方说的，仅仅是一个是”.”，一个是”#”。
    首先，在HTML中ID是一个独有的标志，在同一个页面中是不允许2个元素具有相同的ID的，不然就不可能通过getElementById来获取这个ID所对应的元素了。而Class不一样，他仅仅是一个样式，可以被不同的元素同时引用，没有指向性。
    其次，就是在优先级上，一般来说ID的优先级要比Class高的，也就是说，如果一个区域中既定义了ID的样式，也定义了Class的样式，那么就优先使用ID的样式。
    最后，就是ID和Class的写法不一样……呵呵……开个玩笑……
    不过说起来，在我用ID的时候，不知道为什么，不能单独定义ID里面标签的样式，只有Class可以，难道是RPWT？

五、important的作用
    important是提升样式优先级的语句，比如：
#boxid {
 height: 200px !important;
 height: 100px;
}
    如果没有important，那么第一个height被定义了之后，又遇见了第二个height，那么第一个height的样式将被第二个height冲掉，即高度为100px，但是因为第一个height加上了important，所以，第二个height被忽略了，实际上，boxid的高度应该是200px。
    但是IE似乎并不支持这条语句，高度仍然是100px，但是Firefox和其他支持important的浏览器，就会显示200px。所以现在很多人都说important在IE中是不被识别的，但是实际上important在一些情况下是可以被识别的，比如：
#boxid {
 color: white;
}
.boxclass {
 color: black;
}
.boxclassimportant {
 color: black !important;
}
<div id=”boxid”>
<div class=”boxclass”>XXXXX</div>
<div class=”boxclassimprtant”>XXXXX</div>
</div>
    根据上面的定义，ID的优先级应该高于Class的，所以第一个XXXXX显示的颜色就是白色，但是因为第二个XXXXX的样式定义中有一个important，所以，它虽然是Class，但是它的样式优先级就比ID要高了，显示黑色。（基础篇我说，如果内、外层对同一种样式都有定义，则优先使用内层的，是因为当时还没有说优先级，所以是建立在同一优先级的条件下的。）关于important，暂时我也只知道这些了。

    好吧，CSS超快速入门，到这里就完结了，大家自己再对着网上的一些语句解释和资料，就应该可以很轻松的通过CSS+DIV和Span建立网站了。因为我自己也是一个小菜，所以如果我说的内容有错误的话，请大家告诉我，我一定及时更正，如果对这篇文章有什么疑问，请联系我，我的QQ是120369119，Email是jimmy1006@163.com，谢谢大家。

Posted in 03 Binary Life. Tags: . 没有评论 »

[原创]CSS超快速入门——基础篇

2007年02月6日 — Asp J

    本文章是给那些刚开始学习CSS的新手和那些急着建站却又不知道怎么写CSS的人看的，所以文章里面不会牵涉到一些理论性的东西，而且文章也很浅显，写下的内容都是我个人的一些结论和经验，但是如果你完全不懂HTML，我还是建议你放一本HTML在旁边做参考。如果有错误还请大虾们多多指正。

    在这一篇中，我主要就是说一些CSS最基本的概念和写法，如果你已经了解，即可跳过。

一、什么是CSS
    CSS的全称是Cascading Stylesheet，中文含义是层叠样式表，个人理解的CSS就是：因为HTML是一种标记语言，一个标记就有一个对应的样式，那么把HTML的各个标记所对应的样式都放在同一个地方进行定义而产生的表，就是CSS——样式表。如果你创建了CSS，那么之后要使用这些标记的时候就可以不要重复的写那么多样式了，因为在之前的CSS里面已经定义了。这样就可以少写很多代码，这应该就是CSS的优点吧。另外CSS文件的后缀名是.css，用记事本即可查看和更改。好的，接下来开始正题。

二、CSS的添加
    知道了CSS是什么，我们就先来看看怎么样添加CSS，CSS的添加其实很简单，常用的有2种方法：

    现在不知道选择符和样式属性是什么不要紧，接着往下看吧，因为这个不是这一节主要的内容，大概能会意就行，第三节中我会解释的。

方法一：
    在<head></head>标记之间直接写入CSS代码，格式如下：
<style type=”text/css”>
选择符1 { 样式属性1 : 取值1; 样式属性2 : 取值2; ……}
选择符2 { 样式属性1 : 取值1; 样式属性2 : 取值2; ……}
……
</style>
    如果你要想在现有的样式表中导入外部的样式表的话可以使用@import url，格式如下：
<style type=”text/css”>
@import url（样式表的地址）
选择符1 { 样式属性1 : 取值1; 样式属性2 : 取值2; ……}
选择符2 { 样式属性1 : 取值1; 样式属性2 : 取值2; ……}
……
</style>
    @import url中接的地址可以是绝对地址也可以是相对地址，另外这个语句必须写在所有其他选择符的前面。
    另外，老版本的浏览器是不能识别<style>标记的，所以会把CSS直接放在网页中而导致出错，解决方法就是使用HTML注释把CSS代码包起来，当然，一般来说也没有这种情况，所以不写也差不多，具体格式为：
<style type=”text/css”>
<!–
选择符1 { 样式属性1 : 取值1; 样式属性2 : 取值2; ……}
选择符2 { 样式属性1 : 取值1; 样式属性2 : 取值2; ……}
–>
</style>
    <!–和–>就是注释标记。

方法二：
    在<head></head>标记之间调用外部的CSS文件，格式如下：
<link rel=”stylesheet” type=”text/css” href=”样式表文件的地址”>
    同样，这个地址也是既可以是内部地址，也可以是外部地址，在这里再次说明，CSS文件的后缀名是.css，在CSS文件中定义的CSS代码是不要加<style type=”text/css”></style>标记的，直接写中间的选择符和属性就行。

三、CSS的格式
    在CSS中，定义语句的格式为：
选择符 {
样式属性1 : 取值1;
样式属性2 : 取值2;
……
}

    选择符的作用其实就是选择一个HTML的标记，像body、p、img等等都可以是选择符，选择符body就相当于选择了<body>标记，选择符p就相当于选择了<p>标记，依次类推。然后选择符下面的{}中就是对HTML中这个标记所包含内容样式的定义。

现在我们来看一个CSS的样例：
body {
 background:#636363;
 font-size:12px;
 font-family: Verdana, Arial;
 color:#B8BEBC;
 text-align:center;
 line-height: 140%;
 margin:0px;
 padding:0px;
}

    在这个样例中，选择符是body，那么其后{}中所有的样式就将应用于<body></body>标记之间的所有内容，同理，如果选择符是h1的话，那么其后{}中的所有样式就将应用于<h1></h1>标记之间。而background、font-size和color等等就是样式属性，而#636363、12px和#B8BEBC就是其所对应的取值。
    现在大家肯定会有一个问题，如果我定义了body的样式，又定义了h1的样式，我在<body></body>中使用了<h1></h1>，那么在<h1></h1>中内容的样式应该是什么呢？
    答案是这样的，因为CSS具有继承性，如果外层对一个属性有了定义，而内层没有，那么内层就会继承外层的样式，比如说，我写了这样的HTML：
<body>
<h1>测试</h1>
</body>
    在这个HTML中<body>包含了<h1>，所以<body>为外层，<h1>为内层，而我定义了body的background为#636363，那么如果我没有定义h1的background的值，那么h1的background也是#636363，但是如果我在h1的CSS中也定义了background，那么h1的CSS就应该以h1中定义的为准。

    现在大家应该知道一个基本的CSS语句是什么格式了，我们就来看看CSS的一些最常用的语句吧，一般知道了这些语句，写基本的CSS样式也就不成什么问题了，当然你也可以略过下面的内容，在网上搜一搜就可以了，我在这里也推荐一个看CSS语句的好网站：http://www.yesky.com/imagesnew/software/css/index.html，大家有什么语句不知道，进去找找就OK。

1.width和height
    width是用来定义当前块的宽度的，height是用来定义当前块的高度的。语法为：
    width: 宽度;
    height: 高度;
    比如：h3 { height: 100px;}
    那么，<h3></h3>这个块的高度就有100px，但是里面的内容不一定是100px，他只代表边界的高度。

2. background:
    这条语句是用来设置背景的，语法为：
    background: 背景颜色 url（背景图片地址） 背景图片重复方式;
    背景颜色就填写颜色代码，背景图片重复方式有3种：no-repeat——不重复，repeat-x——水平方向重复，repeat-y——垂直方向重复。如果你不要设置背景图片，那就不写url（背景图片地址）和背景图片重复方式即可。
    比如：background: #404040 url(sidebar_border.gif) repeat-y;
    那么它所对应的标记的背景颜色就应该是#404040，背景图片则使用sidebar_border.gif，并在垂直方向重复，直到填满标记所对应的整个区域为止。
    比如：background: #404040;
    那么这个你的背景颜色就为#404040，而没有背景图片。

3. border:
    这条语句是用来设置边框的，具体的使用方法为：
    border: 边框粗细 样式 颜色;
    边框粗细的单位一般都是用的 px（像素），常用的样式有实线solid和虚线dotted，颜色还是写颜色代码。另外border是定义所有的边框，当然，你也可以使用border-left、border-right、border-top和border-bottom对左右上下的边框单独定义。
    比如：border-bottom: 1px dotted #777777;
    那么它所对应的标记的底部就会有一条1px粗的颜色为#777777的虚线。

4. color:
    这条语句是用来设置字体颜色的，使用方法为：
    color: 颜色代码;

5. font:
    这条语句是用来设置字体的，因为整条语句写在一起很长，所以一般都把他拆开来使用：
    font-size: 字体大小;
    font-family: 字体;
    font-weight: 字体粗细;
    一般来说字体大小为12px，默认的字体粗细为400，如果你要加粗，可以使用900或者bolder。
    比如：font-size:12px;
    font-family: Verdana, Arial, Tahoma;
    font-weight: bolder;
    那么该字体就为Verdana，如果没有Verdana，就为Arial，依次类推，字体大小则为12px，并且字体加粗。

6. text-align:
    这条语句是用来设置字体的对齐方式的，使用方法为：
    text-align: 对齐方式;
    其中left为左对齐，right为右对齐，center为居中。

7. margin:
    这条语句是用来设置边距的，使用方法为：
    margin: 上边距 右边距 下边距 左边距;
    一般来说单位也是px，记这个边距顺序也很好记，就是从上开始逆时针的顺序，当然如果你不想记，也可以使用margin-left、margin-right、margin-top、margin-bottom来分别定义边距即可。

8. padding:
    这条语句和margin十分的像，是用来设置边界填充的，使用方法为：
    padding: 上填充范围 右填充范围 下填充范围 左填充范围;
    和margin完全一样，单位一般也是px，顺序也是逆时针，也可以使用padding-left、padding-right、padding-top、padding-bottom来分别定义。不过需要注意的是，边距和填充的区别，一个区域与另外一个区域之间的距离叫做边距，而一个区域中的内容离该区域边界的距离叫填充。

    关于颜色代码的获取，我上传了一个非常好的颜色代码获取软件，虽然这个软件要求你注册，但是这个注册是完全免费的，而且就算你不去注册，也完全不会影响到软件的功能和使用次数，最主要的还是这个软件小的好，用起来是十分方便，下载地址是：http://www.bigasp.com.cn/Uploads/Files/Program/Color_Select.rar，希望大家也还喜欢。

    好吧，基础篇就讲到这里，基本上掌握这一些就可以实现一些简单的CSS样式了，不过这个实在是太简单了，在下一章完结篇中，我将说下怎么超快速的掌握用CSS+DIV和SPAN来设计网页，另外还十分的感谢大家能够耐心的开完这篇冗长的文章，这也是对我莫大的支持，谢谢。

Posted in 03 Binary Life. Tags: , . 4 条评论 »
«
»