• 如何把你的博客装扮的更漂亮


        经常有人问,怎么贴图啊?怎么放音乐啊?啊!真漂亮!怎么弄的?本着普及知识,为广大blog之友做点好事,老猫我特将3个月的HTML知识积累拿出来,供大家分享。希望大家都能作出漂亮的帖子。


    善意提示:请勿在跟贴中练习。因为yourblog设置在回复中禁止使用HTML。

    --------------------------------------------------------------------

    简易贴图\贴歌\FLASH及MTV教程(老猫搜集、汇总并修改)

    简单的HTML语句

    一.如何贴图
    代码: <img src="http://cimg.163.com/lady/0301/27/mei1.jpg">

    在"..."之间的东西就是图的地址(存放的地方),在网页中看到好看的图片就用鼠标的右键(不是左键)点图,出现个表单,点最下面的属性(用左键)这时就能看到图的路径了。也就是你看到的URL后面的东西。你把地址复制,然后更换代码中的地址就成功了。
    例如:http://cimg.163.com/lady/0301/27/mei1.jpg(这就是地址)

    二.如何贴歌
       歌曲的音乐文件非常多,这是贴RA,RM,RAM和MP3的方法。 
    代码:<EMBED height=60 src="http://coolang.com/music/dj.mix/music.rm/bryanadamsHERE.I.AM.ram" type=audio/x-pn-realaudio-plugin width=275 console="Clip1" controls="ControlPanel,StatusBar" autostart="true"></ EMBED>

    在"..."之间的东西就是歌曲的地址,在可以下载的音乐网站上听到好歌就用鼠标的右键点歌曲的名字,或者是它的试听和下载;出现个表单,用左键点最下面的属性,这时就能看到图的地址了,当然它的结尾一定要是RA,RM,RAM和MP3,才是正确的。然后更换代码中的地址。
    例如:http://coolang.com/music/dj.mix/music.rm/bryanadamsHERE.I.AM.ram就是地址

    关于WMA的音乐文件,应该这样贴:<embed autostart="true" controls="ControlPanel" loop="-1"src="mms://202.104.94.61/music/celine2/1.wma";>


    关于背景歌曲的格式(即贴子中不见播放机,但是有声音)
    <bgsound src="http://music.skyhits.com/02/guita.mp3">
    这个是用来放MIDI和WMA.MP3的。

    三.如何贴FLASH的歌曲
    代码:<embed width=400 height=350 src=http://zhuangmincomtypeb.51.net/tuziwu.swf>
    和贴歌曲的方法一样,更换代码中的地址就可以了。但是FLASH歌曲的地址必须是SWF结尾的。找FLASH的地址比较难找,你可以用鼠标的右键点歌曲的名字.试听和下载之外,还可以点它的全屏播放和PLAY。

    四。如何贴原版本的MTV
    视频文件最后面的结尾必须是RA,RM,RAM的可以用这个公式。
    <embed src=rtsp://mtv.runsky.com/mtv1/wind/a_du-tianhei.rm type="audio/x-pn-realaudio-plugin" CONSOLE="Clip1" CONTROLS="ImageWindow" HEIGHT="240" WIDTH="352" AUTOSTART="-1">

    关于WMA音乐文件的MTV,也就是结尾必须是WMA的可以用这个公式。其实这个是MTV难度最大的一个。
    <object align=middle classid=CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95 class=OBJECT id=MediaPlayer width=500 height=350>
    <param name=ShowStatusBar value=-1>
    <param name=Filename value=mms://stream1.100mtv.com/mtv/Eagles_hotelcalifornia.wmv>
    <embed type=application/x-oleobject codebase=http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701 flename=mp src=mms://stream1.100mtv.com/mtv/Eagles_hotelcalifornia.wmv width=500 height=350></embed></object>

    五.如何让字有色彩,
    <font size="4" color="red">大家好!!</font>
    size="4"代表字的大小,7最大,1最小,在这里可以更换。
    color="red"代表颜色,这里是红的。你可以用其他颜色的英文来代替,如blue,green


    六.如何让字的移动:

    1》这是向右移动,direction:是决定字的移动方向的
    <marquee direction=right>啦啦啦,我从左向右移!</marquee>
    <marquee direction=left>啦啦啦,我从右向左移!</marquee>

    2》字在屏幕上来回左右晃,就象喝醉了,就象你那样,嘿嘿(主要用了behavior命令)
    <marquee behavior=alternate>啦啦啦,我来回走耶!</marquee>

    七.如何把别人的网页插入贴子里:
    <iframe frameborder="NO" border="0" src="http://www.hxbook.com/jrnjr/xiangce.htm" width=700 height=600></iframe>
    更换代码中的地址(即网页的地址)

    八.如何做超级连接:
    <a href="歌曲的地址">这里是歌曲的名字</a>
    更换代码中的地址(即换掉前面歌曲的地址和后面的歌曲名字)

    九。如何一帖发多图
    你只要把这些连起来就可以了!如:
    <img src="
    http://cimg.163.com/lady/0301/27/mei1.jpg"><br><br
    >
    <img src="
    http://cimg.163.com/lady/0301/27/mei1.jpg"><br><br
    >
    <img src="
    http://cimg.163.com/lady/0301/27/mei1.jpg"><br><br
    >
    <img src="http://cimg.163.com/lady/0301/27/mei1.jpg">
    在贴之前替换你想要贴的图片地址即可。

    十.如何图片移动
    <marquee behavior=alternate><img src="图片的地址"></marquee>

    说明:上述HTML语句中我们经常看到在引号后面有width=400 height=300等数据,那是在给图片、FLASH、MTV、和播放器等设置宽度和高度。border是指贴图片时图片的边框,不设置边框时border=0 设置时建议设为1~3。

    关于尺寸的设置:

    1.图片:为保证你的页面整齐,建议图片宽度设置为420。即width=420。宽度可不设置,不写即可。

    2.FLASH或MTV:width=400 height=300

    3.播放器:width=400 height=50 (如果您选用的是realone player则应设置为height=0)

    --------------------------------------------------------------

    补充

    贴图片的语法是:。其中各项参数src为图片地址,border为图片边框,width和height为图像宽度和高度,vspace和hspace为图像与文字的纵向和横向边距。如果设置了width和height的值,图片将按照指定大小显示;如果不设置,图片将按默认大小即原始尺寸显示。如果你无需改变图片的显示大小,这两个参数似乎是可有可无的,但它们有一个很重要的作用:告诉浏览器这个图片的大小,以便在该图片未下载到本地硬盘之前在页面上显示一个相应大小的图像占位符,使页面一打开后文字等元素就显示在最终位置,避免了图片很多时页面一次又一次刷新显示,这也能有效提高页面打开的速度。朋友们不防一试


    请确保图片的地址是来源于网上而不是你的硬盘上!!!


    -----------------------------------------------------------------

    初学者必读

    初学者必读 之一:基本设置

    【背景设置参数】
    <body background="外背景网址"></body>
    <center><table cellpadding=0 cellspacing=0 border=0 width=100% align=center table background="内背景网址" width=760><tr><td><center>---------------------这里放所有发贴内容---------------------<td></table>
    (提供背景图片资料网)例http://hisen.myrice.com/main.htm

    【贴flash】
    贴flash稍稍麻烦一点,首先要找出想要贴的flash动画的地址。如果是你自己的主页那当然就不用说了。如果是别人的主页,可以先打开播放flash动画的相应web页,然后查看源文件,找出相应的*.swf(flash)文件。
    用下列格式贴:
    <embed src="flash动画的地址"quality=high width="500" height="350">
    第一个引号中的内容就是flash动画的地址,后面三个参数分别是flash动画的播放质量、宽度和高度。

    【视频】
    <embed src=视频网址quality=high width="500" height="350"autostart="true" loop="true">
    (mtv)
    <center><embed src="flash网址" width="500" height=380>
    <center><embed src="flash网址" quality=high width="640"height="420">

    【音乐】
    一、循环播放(可以贴背景音乐,照顾低版本)
    <embed src=歌曲网址hidden autostart="true" loop="true">
    注意:用此语句贴歌曲,页面不显示播放器!!!

    二、贴歌(rm,wav,swf,mp3等格式)
    <embed src="歌曲网址" autostart="true" width="4000" height="50">

    三、贴背景音乐。除最新格式的 ra 文件外
    mid、mp3、wav等都可(只有展开时音乐才响)
    <bgsound src="歌曲网址" loop="-1">
    注意:用此语句贴歌曲,页面不显示播放器!!!

    四、贴歌(rm,wav,swf,mp3等格式)
    <embed src="歌曲网址" autostart="true" width="400" height="50">

    windows格式音乐

    精简格式
    <embed src="mp3歌曲网址" autostart="true" width="420" height="45">

    标准格式
    <embed src="mp3歌曲网址" type="audio/x-pn-realaudio- plugin" controls="controlpanel,statusbar" height=40 width=420autostart="true" loop="true">

    rm格式:
    <embed src=rtsp://歌曲网址type=audio/x-pn-realaudio-pluginconsole=clip1 controls=imagewindow height=40 width=400 autostart=-1>

    标准方式音乐
    <embed src="歌曲网址" width="400" height="50" autostart="true" loop="true" align="middle" volume="200" type="audio/x-pn-realaudio-plugin" exts="ra,ram" init fn="load-types" mime-types="mime.types">

    精简方式音乐
    <embed src="歌曲网址" type="audio/x-pn-realaudio-plugin" controls="controlpanel,statusbar" height=45 width=450 autostart="true" loop="true">

    特殊格式
    <embed src="歌曲网址" autostart="true" width="400" height="50">

    无控制器方式
    <embed src=歌曲网址type="audio/x-pn-realaudio-plugin" console="clip1" controls="imagewindow" height="300" width="420" autostart="-1">

    【贴图片格式】
    <center><img src="图片网址" width="640" height="480">
    (左右移动的图片)
    <marquee width=100% behavior=alternate scrollamount=3><img src= "图片网址" width=140height=150></marquee>

    红影白色立体字(文字排在参数下面就可以)
    <div align="center"><span style="filter: shadow(color=red); width: 92%; font-size: 15pt;color=#ffffff"><b>文字</b></span></div>

    --------------------------------------------------------

    初学者必读 之二: 贴图语法

    标准帖子的内容:
    背景--(文字与图片居中)
    开头
    <center><table cellpadding=0 cellspacing=0 border=0 width=100% align=center
    table background="http://bimoxuan.vip.myrice.com/feixue/pic/d2.jpg" width=500><tr><
    td><center>
    (上面公式里面的"http://bimoxuan.vip.myrice.com/feixue/pic/d2.jpg"即是所选的图案
    或颜色)

    文字或图片
    爱你一万年
    <img src="http://www2.qglt.com.cn/wsrmlt/qianmingdang/a/anywn_zi.jpg">
    欢迎光临
    <img src="http://hisen.myrice.com/ab/mark/welcome/welcome56.gif">
    结尾</center>
    </td></tr></table>

    ----------------------------------------------------------

    带框的背景:
    <center><table border="5" background=http://szg01.myrice.com/bg5.gif width="600" height="440"><td></table>


    文字
    鼠标放上去停止滚动,移开继续滚动。
    <marquee onmouseover=this.stop() onmouseout=this.start() >
    <center><font color="lime" size="5" face="隶书">文字</font></marquee>

    (文字向上滚)鼠标放上去停止滚动,移开继续滚动

    注意文字分行并拉开行距
    <marquee direction=up onmouseover=this.stop() scrollamount=3 onmouseout=this
    .start() ><center><font color=red style=font-size:18pt face=size=7>祝朋友们天天开心</marquee>

    文字向上滚注意文字分行并拉开行距
    <marquee direction=up scrollamount=3>
    <center><font color="lime" size="5" face="隶书">文字</font>
    </marquee>

    文字向下滚
    <marquee direction=down scrollamount=3>
    <center><font color="lime" size="5" face="隶书">祝朋友们天天开心</font>
    </marquee>

    文字移动速度的设置:
    请注意下面语句中的红色属性(文字向左移动,选250比较好)
    <marquee direction="left" scrolldelay="250"> <font color="green" size="4" face="华文彩云"><*b>朋友,你好!</b></font></marquee>
    ie默认值为60(单位:毫秒)
    取值越大,移动越慢(小于60,ie仍默认为60)。
    取值60 取值100 取值150 取值200 取值250


    常用字体:
    宋体 黑体 楷体_gb2312 仿宋_gb2312
    新宋体 幼圆 隶书 方正舒体
    华文新魏 华文行楷 华文细黑 华文彩云
    常用字体颜色:
    浅绿----aqua 黑----black 兰----blue 紫红----fuchsia,
    灰----gray 绿----green 亮绿----lime 茶----maroon,
    深兰----navy 橄榄----olive 紫----pourple 红---red,
    银----silver 青----teal 白----white 黄----yellow
    紫红--purple


    文字示例:(居中)
    <center><font color="lime" size="5" face="隶书">不想你走</font>

    字体(font)标记(tags)
    标题字体(header)
    <h#> ... </h#> #=1, 2, 3, 4, 5, 6
    <h1>今天天气真好!</h1> 今天天气真好!
    <h2>今天天气真好!</h2> 今天天气真好!
    <h3>今天天气真好!</h3> 今天天气真好!
    <h4>今天天气真好!</h4> 今天天气真好!
    <h5>今天天气真好!</h5> 今天天气真好!
    <h6>今天天气真好!</h6> 今天天气真好!

    <hn>---</hn> 这些标记显示黑体字。
    <hn>---</hn> 这些标记自动插入一个空行,不必用标记再加空行。
    因此在一行中无法使用不同大小的字体。


    字体大小
    <font size=#> ... </font> #=1, 2, 3, 4, 5, 6, 7 or +#,-#
    <basefont size=#> #=1, 2, 3, 4, 5, 6, 7
    <font size=7>今天天气真好!</font> 今天天气真好!
    <font size=6>今天天气真好!</font> 今天天气真好!
    <font size=5>今天天气真好!</font> 今天天气真好!
    <font size=4>今天天气真好!</font> 今天天气真好!
    <font size=3>今天天气真好!</font> 今天天气真好!
    <font size=2>今天天气真好!</font> 今天天气真好!
    <font size=1>今天天气真好!</font> 今天天气真好!


    物理字体(physical style)
    <b>今天天气真好!</b> 今天天气真好!(加粗)
    <i>今天天气真好!</i> 今天天气真好!(倾斜)
    <u>今天天气真好!</u> 今天天气真好!(加下划线)
    <tt>今天天气真好!</tt> 今天天气真好!(加宽)
    <sup>今天天气真好!</sup> 今天天气真好!
    <sub>今天天气真好!</sub> 今天天气真好!
    <s>今天天气真好!</s> 今天天气真好!
    <strike>今天天气真好!</strike> 今天天气真好!


    逻辑字体(logical style)
    <em>今天天气真好!</em> 今天天气真好!
    <strong>今天天气真好!</strong> 今天天气真好!
    <code>今天天气真好!</code> 今天天气真好!
    <samp>今天天气真好!</samp> 今天天气真好!
    <kbd>今天天气真好!</kbd> 今天天气真好!
    <var>今天天气真好!</var> 今天天气真好!
    <dfn>今天天气真好!</dfn> 今天天气真好!
    <cite>今天天气真好!</cite> 今天天气真好!
    <small>今天天气真好!</small> 今天天气真好!
    <big>今天天气真好!</big> 今天天气真好!


    指定“字体大小”的标记和“指定字体”的标记的组合使用
    <i><font size=5><b>今天</b> 天气<font size=6> 真好!</font></i>
    今天 天气 真好!


    字体颜色
    指定颜色 <font color=#> ... </font>
    #=rrggbb 16 进制数码,或者是下列预定义色彩:
    black, olive,
    teal, red, blue,
    maroon, navy,
    gray, lime,
    fuchsia, white,
    green, purple,
    silver, yellow,
    aqua

    ------------------------------------------------------------

    贴图:
    贴图的基本格式是:
    <img src="图片地址">

    指定图片宽度
    <img src=http://www.6to23.com/s8/s8d12/autopostimg/200171711529.jpg width=700>

    图片居中
    <center><img src="http://www.6to23.com/s02101515444.jpg">

    指定图片的宽度和高度
    <center><img src="http://www.china-gift.coq200b.gif" width=650 height=450>

    移动图片的正确格式是:
    <marquee><img src="http://www.cct4.com/bbs/uploadimag.gif"></marquee>

    图片来回移动:(注意指定宽度和高度)
    <marquee width=100% behavior=alternate scrollamount=3><img src= "http://gallery.2088.com.cn/flower/photo/2/fl036.jpg" width=300height=150></marquee>


    背景图片语法:
    <body background="http://xxx.xxx"></body>

    图文居中:
    在图文前面加 <center> 结束图文居中,在图文后加</center>


    初学者必读 之三 特殊效果  插入网页:(宽度和高度可调)
    (并排的漂亮牌)
    <center><img src="http://cssa.ucla.edu/bbs/emot/em32.gif" width="60" height="60"><img src="http://cssa.ucla.edu/bbs/emot/em32.gif" width="60" height="60"><img src="http://cssa.ucla.edu/bbs/emot/em32.gif" width="60" height="60"><img src="http://cssa.ucla.edu/bbs/emot/em32.gif" width="60" height="60"><img src="http://cssa.ucla.edu/bbs/emot/em32.gif" width="60" height="60"><img src="http://cssa.ucla.edu/bbs/emot/em32.gif" width="60" height="60"><img src="http://cssa.ucla.edu/bbs/emot/em32.gif" width="60" height="60"><img src="http://cssa.ucla.edu/bbs/emot/em32.gif" width="60" height="60"><img src="http://cssa.ucla.edu/bbs/emot/em32.gif" width="60" height="60"></center>


    红影白色立体字(文字排在参数下面就可以)
    <div align="center"><span style="filter: shadow(color=red); width: 92%; font-size: 15pt;color=#ffffff"><b>


    红影白色立体字(文字排在参数下面就可以)
    <span>
    (左右移动的图片)
    <marquee width=100% behavior=alternate scrollamount=3><img src= "http://gallery.2088.com.cn/ai/photo/christmas_01/s/030m0020s.jpg" width=140height=150></marquee>


    字一上一下跳动:
    <hr width="100%" size="1" color="#aaaaaa" align=left>
    <font color=green><marquee behavior="alternate"scrollamount=8 direction=right><b><font color=#7700bb size=8><font color=red><marquee behavior=alternate direction=up height=150 width=50>衷</marquee><font color=orange><marquee behavior=alternate direction=up height=200 width=50>心</marquee><font color=fuchsia><marquee behavior=alternate direction=up height=150 width=50>感</marquee><font color=olive><marquee behavior=alternate direction=up height=200 width=50>谢</marquee><font color=green><marquee behavior=alternate direction=up height=150 width=50>您</marquee><font color=red><marquee behavior=alternate direction=up height=200 width=50>的</marquee><font color=orange><marquee behavior=alternate direction=up height=150 width=50>光</marquee><font color=fuchsia><marquee behavior=alternate direction=up height=200 width=50>临</marquee><font color=lime><marquee behavior=alternate direction=up height=150 width=50>!</marquee>
    <body background="http://airyland.myrice.com/wzsc/wysc/background/star.jpg"></body></td> <br><td></table><br><td width=10 bgcolor="whitesmoke"></td><td bgcolor=#000000 width=1></td><td></tr><br><br></font></th></tr><tr><th></th></tr></table></td><br></td></p><br> <br> <br></td><td width=10 bgcolor="gainsboro"></td><td bgcolor=#000000 width=1></td><td></tr>
    <tr bgcolor="gainsboro"><td bgcolor=#000000 width=1><td height=10></td><td width=10 bgcolor="gainsboro"></td><td width=10 bgcolor="gainsboro"></td><td bgcolor=#000000 width=1></tr></table>

    ----------------------------------------------------------

    初学者必读 之四 特殊图片效果

    特别注意使用语法时放网址处不能有空格。

    贴图片时查看图片属性,修改图片的宽度width 和高度height ; width="?" height="?"
    <table height=480 cellspacing=0 cellpadding=0 width=640 align=center background=http://www.365pic.com/bq_picll29/nature2/natureqb2.jpg border=3 table><tbody><tr><td><embed pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.cn898.net/bg/6.swf width=640 height=480 type=application/x-shockwave-flash quality="high" wmode="transparent"></embed> </td></tr></tbody></table>

    一:图下雨前景效果

    <table height=480 cellspacing=0 cellpadding=0 width=640 align=center background=http://www.365pic.com/bq_picll29/nature2/naturegd12.jpg border=3 table><tbody><tr><td><embed pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.cn898.net/bg/104.swf width=640 height=480 type=application/x-shockwave-flash quality="high" wmode="transparent"></embed> </td></tr></tbody></table>


    二:图片 金鱼游动前景效果

    <table height=480 cellspacing=0 cellpadding=0 width=640 align=center background=http://www.365pic.com/bq_picll29/nature2/natureqb3.jpg border=3 table><tbody><tr><td><embed pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.cn898.net/bg/5.swf width=640 height=480 type=application/x-shockwave-flash quality="high" wmode="transparent"></embed> </td></tr></tbody></table>

    三:图片 线样银光闪动前景效果

    <table height=480 cellspacing=0 cellpadding=0 width=640 align=center background=http://www.365pic.com/bq_picll29/nature2/natg15.jpg border=3 table><tbody><tr><td><embed pluginspage=http://www.macromedia.com/go/getflashplayer src=http://mailimg-fs.hanmail.net/fl/effect/18/e-fall1.swf width=640 height=480 type=application/x-shockwave-flash quality="high" wmode="transparent"></embed> </td></tr></tbody></table>


    四:图片 蜻蜓飞舞银光闪动前景效果

    <table height=480 cellspacing=0 cellpadding=0 width=640 align=center background=http://www.365pic.com/bq_picll29/nature2/natg16.jpg border=3 table><tbody><tr><td><embed pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.cn898.net/bg/8.swf width=640 height=480 type=application/x-shockwave-flash quality="high" wmode="transparent"></embed> </td></tr></tbody></table>


    五:图片 青蛙/雨点前景效果

    <table height=480 cellspacing=0 cellpadding=0 width=640 align=center background=http://www.365pic.com/bq_picll29/nature2/natureqb15.jpg border=3 table><tbody><tr><td><embed pluginspage=http://www.macromedia.com/go/getflashplayer src=http://mailimg-fs.hanmail.net/fl/effect/19/e-fall2.swf width=640 height=480 type=application/x-shockwave-flash quality="high" wmode="transparent"></embed> </td></tr></tbody></table>


    六:枫叶飞舞前景效果

    <table height=480 cellspacing=0 cellpadding=0 width=640 align=center background=http://www.365pic.com/bq_picll29/nature2/natureqb15.jpg border=3 table><tbody><tr><td><embed pluginspage=http://www.macromedia.com/go/getflashplayer src=http://mailimg-fs.hanmail.net/fl/effect/19/e-fall2.swf width=640 height=480 type=application/x-shockwave-flash quality="high" wmode="transparent"></embed> </td></tr></tbody></table>

    希望以上的简易语法能够给您带来帮助,有问题可以留言。我们可以互相探讨,共同学习~!

    祝大家的博客越来越漂亮~!


    收藏到:Del.icio.us




    评论

  • zhen lihai !~~~
  • 不给!!!
  • 没收了~:)

    呵呵

发表评论

您将收到博主的回复邮件
记住我