磊's profile♨Jacky W-H-Y Cafe♨PhotosBlogListsMore Tools Help

    文字光影效果及滚动文本框和添加背景图片

    文字光影效果

    一篇精彩的日志文章再配上一幅贴切主体的背景画面一定会带来不同凡响的效果。不知道为什么微软没有考虑到用户这么基本的需求,以至于大家为此费了不少心力。以前我也尝试过用若干语法来解决这个问题,但都没有实现。后来因为回国,天天在现实生活中摸爬滚打,一个多月的时间没有再思考网络社会里的这些问题。回到德国后,难得一两天清闲,就又想起了添加背景这档子事,把相关语法逐一试了一遍,终于找到了解决办法。随后又在Space空间闲逛的时候发现有些朋友早就实现了这一功能,遂将自己的与旁人的经验加以总结,写了这篇教程。

    仍然像以往一样,在这里我们不过多地探讨实现这一功能所涉及的语法命令,这样过于繁琐,也没有太多现实意义。我仅将具体应用时所需要的语法列出来,再对几个重要参数加以说明。
    首先进入正常日志编辑模式,键入你所需的日志内容,并视个人需要进行排版编辑。然后点击“Edit It”按钮,进入HTML语法编辑模式,并勾选下面的“使用HTML格式建立网页”。
    将下列语法粘贴至你的编辑页面内顶端:

    <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>

    再将你刚刚编辑好的文字内容(注意,除了文字内容可能还会包含你进行格式编排后的若干语法语句)剪切并粘贴到上面语法中的“你的日志文字”的位置。

    下面简要介绍一下上面语法中的两行主要命令语句的含义:

    <IMG src=…….>控制日志中的背景图片,图片的宽度及高度值均以px为单位;align这一参数控制图片位置,但不要对此进行更改,否则无法实现文字浮于图片之上的效果。Filter控制背景图片的柔化滤镜,大家可以修改其中的数值已达到不同的效果,但注意style的值只能取1,2,3这三个数值。除了柔化效果外,还有翻转、发光、阴影等若干特效,但语法表述各有不同,在此不再赘述,有兴趣的朋友可以在互联网上查询相关语法。在Space空间不同的布局方式下,日志宽度是不相同的,所以为了更好的配合日志的页面效果,建议选择合适宽度的图片,具体可根据布局的实际情况(即日志的宽窄程度)将图片宽度分别设定在260px、350px、370px、550px、730px左右的近似值。

    <DIV style="FILTER…….>控制日志文字的若干效果,其中Filter命令的使用方法与前述一致,也是调节柔化效果。文本宽度也采取px为单位,其最大值也要参照上面不同布局方式时所要求的近似宽度值,如果你希望文字完全分布在整个日志页面上,那么将WIDTH值设为100%即可。在设定了具体宽度的情况下Float命令可以省略,否则请予以保留。

    有一个问题需要注意,预览中文字相对于背景图片的位置往往与最终显示在日志中的位置不一样,这还需要你返回到该日志进行进一步的修改,这确实需要一些耐心,但相信经过一段时间的实际应用,你会总结出一些经验技巧的。

    添加背景图片

    有关文字方面的处理,MSN Space提供了最基本的几个格式化命令,再加上我们的扩展编辑工具,在应付一般的文字编排上应该是绰绰有余了。如果还想获得更多的效果,尤其是在文字排版方面,大家可以参考相应的HTML及CSS中有关文字处理的介绍,在这里就不做讲解了,毕竟我的教程只是给大家提供一些简单实用的小技巧,而并非网页制作方面的专业讲座。不过对于一些比较特殊的文字效果或编排方式,我还是会及时将有关语法和代码提供给大家。

    (注:下述语法的使用,仍然是通过HTML语言编辑模式来实现,有关如何获取HTML扩展功能,请参见本教程第一章)

    下面就给大家介绍我在日志中展示过的三种彩色文字效果的相关语法:

    阴影:<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>

    三种效果的语法格式基本相同,只不过使用了不同的滤镜属性。Color控制文字的颜色;Filter控制不同的滤镜效果,其内部的具体参数,诸如阴影及发光的色彩、模糊的方向及强度都可以按照需要自由调整;注意各效果语法中Width这个参数,当你的字号大小有所变化的时候,你也需要相应调整此项值,否则会造成文字无法正常排列的结果。另外,模糊效果中的Add 意为是否保留原效果,取值为0 or 1,一般设为1即可。其他方面的参数没有太多需要强调的,这里之所以采用华文彩云字体同时加粗,是为了达到更好的效果,你完全可以按照自己的喜好加以调整。需要说明的是,这几种效果只适用于标题或少量文字上,否则后造成阅读上的困难。

    大篇幅的日志会占据页面的大部分空间,从而影响整体的美观性,而通过为其添加一个带有滚动条的文本框,则能够很好地解决上述问题。下面就是相关语法:

    <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>

    上述语法生成一个带有黑色背景及灰蓝色边框的文本滚动框。语法里的参数相当简单,主要是控制不同部分的色彩,你可以做相应变化并在预览中观看实际效果。至于调整文本框的大小,你可以在插入此语法后退出HTML编辑模式,然后在日志编辑页面使用鼠标直接进行调整。

    接下来说说文字竖排是如何实现的。除了制造特殊效果,我在Space空间展示的文字竖排没有什么真正的实用性,只会给阅读者造成麻烦,不过本着尽可能挖掘Space潜力的原则,我还是尝试了如下的语法:

    <DIV style="FONT-SIZE: 9pt; WRITING-MODE: tb-rl; TEXT-ALIGN: left"><p>日志文字</P></DIV>

    这个语法中唯一的亮点就是Writing-Mode这个参数,其后的tb代表文字排列从上到下,rl代表从右到左。

    Comments (2)

    Please wait...
    Sorry, the comment you entered is too long. Please shorten it.
    You didn't enter anything. Please try again.
    Sorry, we can't add your comment right now. Please try again later.
    To add a comment, you need permission from your parent. Ask for permission
    Your parent has turned off comments.
    Sorry, we can't delete your comment right now. Please try again later.
    You've exceeded the maximum number of comments that can be left in one day. Please try again in 24 hours.
    Your account has had the ability to leave comments disabled because our systems indicate that you may be spamming other users. If you believe that your account has been disabled in error please contact Windows Live support.
    Complete the security check below to finish leaving your comment.
    The characters you type in the security check must match the characters in the picture or audio.

    To add a comment, sign in with your Windows Live ID (if you use Hotmail, Messenger, or Xbox LIVE, you have a Windows Live ID). Sign in


    Don't have a Windows Live ID? Sign up

    Picture of Anonymous
    NoNamEr wrote:
    绿色的字很难看清楚的阿
    June 7
    Picture of Anonymous
    媛Ж媛 wrote:
    A ZA A ZA
    May 8

    Trackbacks

    The trackback URL for this entry is:
    http://jackyzhulei.spaces.live.com/blog/cns!33485DDA26C42042!601.trak
    Weblogs that reference this entry
    • None