如何让BLOG多姿多彩，有声有色（简化版）

海娟님의 프로필喵喵猫，猫喵喵사진블로그리스트

도구

도움말

블로그

정렬 기준:

< 이전 다음 >

2005-04-07

如何让BLOG多姿多彩，有声有色（简化版）

Edit it功能

访问http://www.siteexperts.com/blogging/editit.htm网页（一定要用IE5.0以上版本打开），页面中有一个“Edit It”链接，用鼠标右键点击这个链接，然后将其添加到收藏夹内，记着一定要放到“链接（Link）”这个文件夹中。按照上述操作后，你会在你的“链接（Link）”工具栏内看到一个“Edit It”的链接图标。到你的MSN Space中新添加一篇日志，输入文字前，点击“Edit It”，编辑工具栏会多出了几个图标，剪切、复制、粘贴、字形、字号都有了。

缤纷背景

语法：<div style="width:100%;height:100%;background-color:#990000;"><p></p></div>，在<p>和</p>之间写文字，“#990000”为颜色编码，调整数值即可得到所需颜色。

立体彩色边框

语法：<div STYLE="border-style:solid;border-width:5pt; border-color:red">日志文字</div>，border-width控制边框的粗细，border-color调整边框的颜色，这里你仍然何以使用前文提到的形式如#xxxxxx的颜色数值，而border-style则控制边框的效果。[Solid 简单线形边框 Double 简单双线边框 Groove 沟线立体效果边框 Ridge 脊线立体效果边框 Inset 嵌入线立体效果边框 Outset 浮出线立体效果边框]

通过定制边框的方法再将上一教程添加色彩的语法嵌套其中，你就可以创造出具有立体效果的彩色日志背景。例如：<div STYLE="border-style:outset;border-width:2pt; border-color: red"><div style="width:100%;height:100%;background-color:#ffff00;">日志文字</div></div>使用上述语法将会为你呈现一个黄底色红边框的浮出线效果背景。

      对于背景边框的四个边你也可以按自己的需要进行调整，以左边框为例，你可以使用下述语法：Border-left-style:solid (double, groove, ridge, inset, outset)定制边框样式
      Border-left-color: #xxxxxx定制边框颜色
      Border-left-width: xpt 定制边框粗细

其他三个边框只要分别使用Right, Top, Bottom就可以了。将下面的语法放到你的日志中预览一下，例如：<div style= "border-top-style:outset;border-right-style:outset;border-left-style:outset;border-bottom-style:outset;background-color:#cc3366">

添加背景音乐

语法：<P><IMG height=0 loop=infinite dynsrc=音频文件链接地址 width=0 border=0></P>，Loop控制循环播放的次数，当为infinite时是无限循环，为0时是不循环，其他循环次数只需键入相应数字即可。音乐链接地址越短越好，确认链接直接指向音乐文件（可将此链接粘贴到浏览器的地址栏，回车后如果直接调用播放器软件即为正确连接，如果打开新的播放页面则为错误链接）。

文字效果

阴影：<FONT style="COLOR: #xxxxxx; FILTER: shadow(color=black); FONT-FAMILY: 华文彩云; FONT-SIZE: 20pt; WIDTH: 100%"><B>日志文字</B></FONT>

发光：<FONT style="COLOR: #xxxxxx; FILTER: glow(color=black); FONT-FAMILY: 华文彩云; FONT-SIZE: 20pt; WIDTH: 100%"><B>日志文字</B></FONT>

模糊：<FONT color=#xxxxxx style="FILTER: blur(add=1, direction=40,strength=10); FONT-SIZE: 30px; FONT-WEIGHT: bolder; WIDTH: 200px">日志文字</FONT>

添加带有滚动条的文本框的相关语法：<DIV align=center style=' color: #ffffff; background-color: #000000; border: solid 2px black; width: 120px; height: 200px; overflow: scroll;scrollbar-face-color: #889B9F;scrollbar-shadow-color: #3D5054;scrollbar-highlight-color: #C3D6DA;scrollbar-3dlight-color: #3D5054;scrollbar-darkshadow-color: #85989C;scrollbar-track-color: #95A6AA;scrollbar-arrow-color: #FFD6DA;'>日志文字</DIV>

添加Flash的方法及其改进

<小绿人原创代码>

“<DIV id=byGene align=center>
<P><A id=byGene href="javascript:document.getElementById
('playflash3').innerHTML='<embed width=400 height=300 src=http://www.infonegocio.com/xeron/bruno
/adam.swf></embed>';document. getElementById('playflash3') .releaseCapture();">
<U>給我FLASH、其餘免談~.按我播放</U></A></P>
<DIV id=playflash3 style="WIDTH: 400px; HEIGHT: 300px;border:1px solid #C0C0C0;"></DIV></DIV>”

使用上述代码，直接将红色部分的链接替换成你自己的Flash或音视频链接就可以使用了，而绿色部分的文字也可以随你自己的心意更改。需要注意的是蓝色的代码部分，如果你加入多个媒体元素的话，应该将其数值作相应的修改，否则不能正常播放，例如除了Flash，你又用此代码加入了一段音频，那么就须将代码中的蓝色部分改写为playflash4，以此类推。使用上述代码加入多媒体元素后，你的日志中会出现一块带有颜色的背景，那么如何避免这种情况呢？

第一种选择-- 可以将这块带有颜色的背景替换成别的图片，代码如下：

<IMG style="FILTER: alpha(opacity=100, finishOpacity=0,style=2);
WIDTH: 350px; HEIGHT: 220px" height=220 src="http://............
.................gif" width=350 align=right>
<DIV style="FLOAT: left; WIDTH: 378px; HEIGHT: 253px">
<P align=center><A href="javascript:document.getElementById
('playflash3').innerHTML='<embed width=350 height=220 src=http://www.thefilebucket.com/userfiles/ memory/ minigolf.swf>
</embed>';document.getElementById('playflash3').releaseCapture();">
Play</A></P><DIV align=center><DIV id=playflash3 style="WIDTH: 350px; HEIGHT: 253px; ">

和原代码相比，变化的地方就是加入了添加背景图片的代码（橙色部分），这其中的数值可根据自己的实际情况进行修改，而背景图片的大小可按照你的Flash播放窗口的尺寸来确定（即褐色部分的数值）。通过这种办法可以实现不播放Flash的时候显示一张图片，而播放Flash时播放窗口就会遮挡住原来的背景，而不影响观看。

第二种选择点击播放按钮后，Flash或音视频播放窗口自动展开，代码如下：

<DIV align=center>
<P><A href="javascript:document.getElementById
('playflash5').innerHTML='<embed width=370 height=300 src=http://.................swf></embed>'; document.getElementById('playflash5').releaseCapture();">XXXXXXXXX</A></P>
<DIV id=playflash5 style="WIDTH: 1px; HEIGHT: 1px;
BACKGROUND-COLOR: #ffffff"></DIV>

大家会注意到，这里变化的部分只是播放窗口大小的数值（即紫色部分）。利用这种办法大家会实现如下效果：日志中只有相关播放按钮，而且日志版面的大小也不再受播放窗口的影响；当你点击播放时，Flash或相关视频窗口以及音频播放控制按钮会自动在该日志内展开。

文绕图

align="right"：图靠右
left－图靠左

强调显示

style="BACKGROUND-COLOR:#FF00000：底色－红色
color="#FFFFFF"：文字颜色－白色

背景效果制作

1.只要設定背景圖片位址和寬高(純網誌背景圖而已)(background-color: TRANSPARENT;可省略)

最簡單背景之設法(純網誌背景圖而已)(連圖寬都不用設)

2.可自行設定本文寬、本文高(需使用絕對大小如px)，也可自行加線框，配合★圖層框框製作附加捲軸變化教學，會有豐富效果。

HTML部分(background-color: TRANSPARENT;可省略)

<IMG src="背景图片链接地址" width=图片宽度值 height=图片高度值 align=right style="FILTER: alpha(opacity=100, finishOpacity=0,style=2) ">
<DIV style="FILTER: alpha(opacity=45, finishOpacity=45,style=0); FLOAT: left; WIDTH: 文本宽度值">
<DIV style="LINE-HEIGHT: 行间距值(pt); LETTER-SPACING: 字符间距值(em)">
<P><FONT color=#ffffff size=2>你的日志文字</FONT></P>
</DIV></DIV>

範例：

HTML：

<div style="WIDTH: 109px; HEIGHT: 108px;">
<img height="108px" src="http://storage.msn.com/x1pw_6EGuGCxXCMx46GPzrYuVVA27PnQROvKQbnBS92FTAzXu41h1iYKIUxwFaK4un2jHce9TcoXNqj4_u1Z5mApG-Nq-P-zTUe" width="109" align="right">
<div style="float:left; background-color: TRANSPARENT;WIDTH: 109px; HEIGHT: 108px; ">
<br>
<font color="#FF00FF">內容
<br>
<br>
圖片在文字下方</font>
</div>
</div>

在任意处放置图片和文字

“TOP: 120px”是指该图片或文本与页面最顶端的距离。
“LEFT: 450px”是指该图片或文本与页面最左端的距离。
“WIDTH: 200px”是指定放置图片或文字“框”的宽度（在任意处放置图片和文字的方法并非直接定位图片或文字与页面的距离，而是先定位一个“框”的位置，再将图片或文字放在“框”），如果你是单独放一张图片，完全可以删除此代码！如果是放置一段文字就得用到它，不然显示出来的文字会自动换行的。
“HEIGHT: 30px”是指定放置图片或文字“框”的高度，一般不会用到的代码，就算是放置文字也不需要，可以删除。
<IMG height=60 src="http://......" width=468 border=0>这段是控制图片文件的代码，当然也可以把它换成文字的代码！！

提醒大家注意，由于该代码是写在日志中的，就如同背景音乐一样，如果该日志已不在首页面了，则添加的那些图片或文字也将不会出现在你的空间首页面上。

举例：我用的MSN小蝴蝶代码！
<DIV class=LayoutIBeam style="TABLE-LAYOUT: auto; DISPLAY: block; LEFT: 420px; TOP: 200px; BORDER-COLLAPSE: separate"><IMG src="http://storage.msn.com/x1pk64-9H0OKxSrRpInqnXO2wcezamNlhxD2nev3PpmMbRnJMJp1WFI4sRLg_LyicfZZ27TXjFndpU8XXAYadTZ8hZ63gli43y8-gESstOwvi_P2nx4SXwZa1Mv7IlRyqX15DSfVFOWimrqMaEaY8rylw" border=0></DIV>

文字绕图

<P><A href=http://...... target=_blank><IMG height=225 src=http://...... width=300 align=right></A></P>
<P>环绕图片的文字</P>

注：
“A href=http://......”是点击图片时打开的链接；
“target=_blank”是指打开链接的方式为新开窗口。
如果不需要点击图片打开链接可以删除“<A href=http://......target=_blank>”和“</A>”代码。
“src=http://......”是图片的URL地址，
“height=225”是指定图片的高度（不更改图片高度可删除此代码），
“width=300”是指定图片的宽度（不更改图片宽度可删除此代码）。
“align=right”是指定图片的水平对齐方式。可更改等号后面参数：right—靠右；left—靠左；center—居中。

日记背景图片制作

注：

“src=http://......”是背景图片的URL地址，
“height=225”是指定背景图片的高度（不更改背景图片高度可删除此代码），
“width=300”是指定背景图片的宽度（不更改背景图片宽度可删除此代码）。

“align=right”是指定背景图片的水平对齐方式。可更改等号后面参数：right—靠右；left—靠左；center—居中。

“style="FLOAT: left; WIDTH: 473px"”指定前景文字框的水平对齐方式和宽度。

“style=2”背景图片滤镜样式，可更改等号后面参数： 0—均匀；1—线状；2—圆形；3—长方形。

“opacity=95”指定背景图片起始透明度，有效范围是“0~100”

“finishOpacity=10”指定背景图片结束透明度，有效范围是“0~100”

美化文字

<font style="text-decoration:line-through">刪除線</font>
刪除線

<FONT style="BACKGROUND-COLOR: #ffddff">加上背景色</FONT>
加上背景色

<font style="filter:FlipH;height:10pt;">左右翻转效果</font>
左右翻转效果

<font style="filter:FlipV ;height:10pt;">上下翻转效果</font>
上下翻转效果

<FONT style="FONT-SIZE: 9pt; FILTER: Glow(color=#4A7AC9,strength=2); COLOR: #ffffff; HEIGHT: 9pt">发光文字效果</FONT>
发光文字效果

<FONT style="FONT-SIZE: 9pt; FILTER: Glow(color=#FF0000,strength=2); COLOR: #ffffff; HEIGHT: 9pt">发光文字效果</FONT>
发光文字效果

<FONT style="FONT-SIZE: 9pt; FILTER: Glow(color=#FF0080,strength=2); COLOR: #ffffff; HEIGHT: 9pt">发光文字效果</FONT>
发光文字效果

<FONT style="FONT-SIZE: 9pt; FILTER: Glow(color=#FF8000,strength=2); COLOR: #ffffff; HEIGHT: 9pt">发光文字效果</FONT>
发光文字效果

<FONT style="FONT-SIZE: 9pt; FILTER: Glow(color=#008080,strength=2); COLOR: #ffffff; HEIGHT: 9pt">发光文字效果</FONT>
发光文字效果

<FONT style="FONT-SIZE: 9pt; FILTER: Glow(color=#0000FF,strength=2); COLOR: #ffffff; HEIGHT: 9pt">发光文字效果</FONT>
发光文字效果

<FONT style="FONT-SIZE: 9pt; FILTER: Glow(color=#8000FF,strength=2); COLOR: #ffffff; HEIGHT: 9pt">发光文字效果</FONT>
发光文字效果

<FONT style="FONT-SIZE: 9pt; FILTER: Glow(color=#000000,strength=2); COLOR: #ffffff; HEIGHT: 9pt">发光文字效果</FONT>
发光文字效果

<FONT style="FONT-SIZE: 12pt; FILTER: Shadow(color=#4A7AC9,direction=135); HEIGHT: 19pt" face=Verdana color=#ffffff>投射阴影文字效果  </FONT>投射阴影文字效果

<FONT style="FONT-SIZE: 12pt; FILTER: Shadow(color=#FF0000,direction=135); HEIGHT: 19pt" face=Verdana color=#ffffff>投射阴影文字效果   </FONT>
投射阴影文字效果

<FONT style="FONT-SIZE: 12pt; FILTER: Shadow(color=#FF0080,direction=135); HEIGHT: 19pt" face=Verdana color=#ffffff>投射阴影文字效果   </FONT>
投射阴影文字效果

<FONT style="FONT-SIZE: 12pt; FILTER: Shadow(color=#FF8000,direction=135); HEIGHT: 19pt" face=Verdana color=#ffffff>投射阴影文字效果   </FONT>
投射阴影文字效果

<FONT style="FONT-SIZE: 12pt; FILTER: Shadow(color=#008080,direction=135); HEIGHT: 19pt" face=Verdana color=#ffffff>投射阴影文字效果   </FONT>
投射阴影文字效果

<FONT style="FONT-SIZE: 12pt; FILTER: Shadow(color=#0000FF,direction=135); HEIGHT: 19pt" face=Verdana color=#ffffff>投射阴影文字效果   </FONT>
投射阴影文字效果

<FONT style="FONT-SIZE: 12pt; FILTER: Shadow(color=#8000FF,direction=135); HEIGHT: 19pt" face=Verdana color=#ffffff>投射阴影文字效果   </FONT>
投射阴影文字效果

<FONT style="FONT-SIZE: 12pt; FILTER: Shadow(color=#000000,direction=135); HEIGHT: 19pt" face=Verdana color=#ffffff>投射阴影文字效果   </FONT>
投射阴影文字效果

<font style="FILTER:Dropshadow(color=#cccccc,offX=3,offY=3); height=1px">阴影文字效果</font>
阴影文字效果

<DIV style="WIDTH: 80px; HEIGHT: 19px; BACKGROUND-COLOR: #cccccc"><FONT style="FILTER: Dropshadow(color=#FFFFFF,offX=1,offY=1); HEIGHT: 15pt" color=#000000> 雕刻文字效果</FONT></DIV>

雕刻文字效果

<DIV style="FONT-SIZE: 14pt; FILTER: Wave(freq=17,strength=3,lightstrength=1,phase=0); WIDTH: 125px; LINE-HEIGHT: 15pt; FONT-FAMILY: Verdana; HEIGHT: 20px" align=left>
<FONT color=#ff8000><STRONG><B>扭曲文字效果</B></STRONG></FONT></DIV>

扭曲文字效果

오후 9:34:17 | 트랙백 보기(총 3개) | 스크랩 | SPACE窍门

댓글 (19개)

댓글을 추가하려면 Windows Live ID로 로그인하세요. 핫메일, 메신저 또는 Xbox LIVE를 사용하는 경우 해당 계정을 Windows Live ID로 사용할 수 있습니다.로그인

Windows Live ID가 없으신가요? 등록

	猩红火狸 님이 남긴 글: 8错8错 12월 7일
	丫呀 님이 남긴 글: 好善良的女孩！ 8월 14일
	品质人生活品质 님이 남긴 글: 不错啊~~~谢谢分享网络知识..回头我也用用看 7월 13일
	hyohare小晴 님이 남긴 글: 阿……楼主哇……那个工具栏的edit素拖曳到编辑日志的框里……点了貌似灭用哈~~ 6월 25일
	喵喵rain 님이 남긴 글: 这个真是太好了，但看着让人头晕，可能要研究好一会儿才行，呵呵。 6월 21일
	皮皮鲁_zhao 님이 남긴 글: 谢谢! 6월 9일
	江小鱼的天空 님이 남긴 글: 按你说来添加Flash,但不能播放及播放点不了的?请指教.. 6월 4일
	江小鱼的天空 님이 남긴 글: 按你说来添加Flash,但不能播放及播放点不了的?请指教.. 6월 4일
	长着碧绿眼睛的黑猫 님이 남긴 글: 好聪明啊！！等有时间，我再琢磨了！ 6월 1일
	皮皮虎tt 님이 남긴 글: 背景音乐我会加了，用ＨＴＭＬ把语法打上面就ＯＫ了：） 5월 31일
	长着碧绿眼睛的黑猫 님이 남긴 글: sorry，皮皮虎tt，上面的内容我也不是全会，像背景音乐，我弄了几次，好像不是很成功。也就没再试了。 5월 31일
	皮皮虎tt 님이 남긴 글: 请问背景音乐怎么弄啊????? 5월 30일
	火柴心 님이 남긴 글: 嗯，值得研究个半辈子~~~ 5월 18일
	长着碧绿眼睛的黑猫 님이 남긴 글: 你打开照片栏，选择“我的网络日志照片”，打开相册，选择编辑相册，你想删除哪张照片，就点击，你会看到在“添加照片”旁边有“删除所选照片”。就可以进行删除了！ 4월 20일
	傻傻 님이 남긴 글: 我直接添加电脑里的图片到网络日志里，但是现在我想删除一些照片，不知道用什么办法…… 这些添加到网络日志里的照片并没有背上传到我的space上~~~所以……只能请教请教了……！！！ 4월 20일
	寻找鼓点 님이 남긴 글: 受益匪浅学习 4월 9일
	小新-style 님이 남긴 글: 找音乐要去找纯地址意思就是说下载的地址 4월 8일
	长着碧绿眼睛的黑猫 님이 남긴 글: 不客气。认识就是缘分嘛~~~ 4월 8일
	流浪的猫猫 님이 남긴 글: 沙发！谢谢你的关心啊！ 4월 8일

트랙백(3)

이 블로그의 트랙백 URL은 다음과 같습니다.

http://evelynfan.spaces.live.com/blog/cns!F2754BF5D1CCAE93!325.trak

이 블로그를 참조하는 웹 로그