2006年6月26日星期一

“公益广告”模块代码注释

已经有好几位朋友问我的“公益广告”模块是怎么做的了,所以我把我的代码贴出来,并注上解释,你们可以通过解释,简单的写自己的代码。这个模块是采用































MSN Space的自定义HTML模块创建。自从上次MSN































Space升级了系统以来,这个模块的代码字符数限制从512B升到了2KB。2KB的代码足够写一个小小的网页了。

但是MSN Space很坏,上传到MSN Space相册里面的图片的URL的长度简直吓人。如:

http://tk.files.storage.msn.com/x1pxzZ39wV--_emPtX_aBZ74kFCleMZFqJhDb7U7
MCbsZm6jq-mjFrASnQDc77HvE8x4WkV6ucjLRCpI3jx3HOOakGMmj8wUqO9
GZqkwwAv9RkvBHRTaVpE7IOB65oQtaClguwstbBIPUg


这是我的相册里面的一张图片的URL。这样的URL用在HTML里面实在是浪费,所以推荐使用Flickr相册,图片可以自由引用,而且URL比较短,例如下面代码是我的一张图片在Flickr里的地址:

http://static.flickr.com/70/170115886_e711af3b55_o.png

是不是只有其1/3还不到啊。

好了现在开始解释我的代码。

说明:
1. 下面的代码非标准的HTML代码;
2. 部分HTML标签MSN会以“安全因素”而不被解释,例如,<object></object>,以及非标准网络协议:“callto:”(Skype),“ed2k://”(emule),“tencent://”(QQ直聊);
3. 以下所有的引号均为英文引号,并且均可省略(style属性后面的引号最好不要省略);
4. 注释使用红色斜体的字,注释符号为C++风格,而不是标准HTML注释,请在直接引用代码的时候予以删除;
5. 加入你已经在自定义HTML中添加了计数器,你可以在计数器代码后面添加一下代码;
6. 为了节省代码,可以把所有的title、alt属性都删除。


代码:

<div style="text-align:center;background-color:white">
// <div>是一个文字块的开始,下面会有另一个</div>结束这段文字块。块内的所有对象的风格(style)是,文字对齐:居中;背景色:白色
<br>
//<br>是回车符,下同。
<img src="http://www.creativecommons.cn/images/public/somerights.gif"><br>
<a href="http://creativecommons.cn/licenses/by-nd-nc/1.0/">署名-非商业用途-保持一致</a><br>
// <img>标签是没有闭标签</img>的。图片的源地址(src)是:“…”
//回车
//链接<a>指向的地址(href)是:“…”链接的文字是“署名-非商业用途-保持一致”
//回车
<hr width="90%">
//横线,长度是90%的块宽度,下同。
<a































href="http://www.spreadfirefox.com/?q=affiliates&id=0&t=78"><img































border=0 alt="Get Firefox!" title="Get Firefox!"































src="http://sfx-images.mozilla.org/affiliates/Buttons/120x60/get.gif"></a><br>
//































类似前面的。<img>标签中的border=0是为了去除图片作为链接的时候产生“蓝色边框”(类似于文字下的蓝色横线。);alt是用于































标注在网络出现问题无法下载图片的时候出现的解释性文字;tltle是用于标注鼠标悬停出现的解释性文字,可以用于图片的简单解释。

<hr width="90%">
<a































href="http://fedoraproject.org/wiki/Distribution/Download" title="Get































Fedora Linux!"><img































src="http://ersaclarke.blog.edu.cn/UploadFiles/2006-4/426987774.jpg"































border=0></a><br>
<hr width="90%">
<a































href="http://www.ubuntu.com/download" title="Get Ubuntu































Linux!"><img































src="http://ersaclarke.blog.edu.cn/UploadFiles/2006-4/426760508.png"































border=0></a><br>
<hr width="90%">
// <a>标签中的title的作用于<img>标签中的title一致。其实上面这段代码中的title可以移动到<img>标签中。
<a































href="http://www.apple.com/getamac/" title="It's time to revolution































your desktop!"><img































src="http://static.flickr.com/70/170115886_e711af3b55_o.png"































border=0></a><br><hr width="90%">
</div>
//</div>文字块结束。你可以在自定义HTML中使用多个<div></div>包围的文字块。以实现不同的风格。

下面以一个例子说明代码的编写。

假如已经有了计数器或者其他有趣的东西的代码,想要添加创作公用的图标。可以这样写:

<div><!--计数器的代码……--></div>
<div style="text-align:center;background-color:white">
<hr width="90%">
<img src="http://www.creativecommons.cn/images/public/somerights.gif"><br>
<a href="http://creativecommons.cn/licenses/by-nd-nc/1.0/">署名-非商业用途-保持一致</a><br>
</div>


如果想让图片也成为文字链接的一个部分,可以这样修改:

<div style="text-align:center;background-color:white">
<hr width="90%">
<a href="http://creativecommons.cn/licenses/by-nd-nc/1.0/">
<img src="http://www.creativecommons.cn/images/public/somerights.gif" border=0><br>署名-非商业用途-保持一致</a><br>
</div>


说了一通,不知道你明白了没有呢?还是不明白的话,那你就随便找一本HTML的书来看看,不到半天就可以掌握几乎所有HTML的知识了。

1 条评论: