分享

网页背景代码及使用方法

 荷花小女子 2011-08-21

 

网页背景代码及使用方法

文/网络     编辑制作/荷花小女子


 
 


      博客背景网页的两种代码,依靠这两种代码可以随便修改任意一篇日志里的背景效果。把两组代码里的任意一种复制修改加入进新日志的源码模式内,就能覆盖掉文学博客模板里设置的背景效果。

  新版背景代码:(<table>方法)


<table background="图片地址" width="100%" height="高度" cellSpacing=0 cellPadding=0 border=0>
<tbody>
<tr>
<td valign=top>日志文字
</td>
</tr>
</tbody>
</table>

      代码中,白底红字的部分是需要修改的,图片地址不用说了吧?高度,可以改成  100%  ,也可以改成以px为单位的值,即:400px ,500px ……等等。

  旧版版背景代码:( <DIV> 方法)


<DIV style="WIDTH: 日志宽度px" align=center>
<DIV style="WIDTH: 100%">
<IMG height=图片高度 src="图片地址" width=图片宽度 align=right>
<DIV style="FLOAT: left; WIDTH: 文字内容的宽度px; HEIGHT: 文字内容的高度px" align=left>
日志文字
</DIV></DIV></DIV>

      代码中,白底红字的部分是需要修改的,

  • 首先,第一个日志宽度,不知道自己日志宽度的参考下面这个图(用宽度为558的朋友注意,在中文和英文下,日志宽度会略有不同):
  • <IMG>标签中的图片宽度理论上自定的,但如果图片太大了,就要把宽度设小一点,小于日志宽度就可以了,同时,高度也要按比例放小,想要做得精确点,拿计算器算吧,不需要精确的话,写个差不多的数就行,图片地址不说了。
  • 文字的宽度还是不要大于日志的宽度,文字高度自定
      两种方法到底用哪个?依情况而定,如果你选择的背景图的宽度小于你的日志宽度,推荐用<table>的方法,方便;如果背景图宽度大于你的日志宽度,建议用第2种方法,否则用table的话,你的背景图显示不全。其他的注意事项,大家慢慢摸索吧。
 
 
 
自从在用文学博客以后,我才知道原来博客也是可以增加代码的。汗一个先,看了许多朋友对留言版以及文章内贴图的问题。偶有一些小小的解决方案,哈哈~~某猫研究代码的成果,愿意与大家一起分享(虽然偶至今仍对自己写代码抱持敬而远之的态度,但是找代码修改貌似还难不倒偶)。

首先是贴图的,这个比较简单,先见效果如下:
http://blog.readnovel.com/blog/htm/do_showone/tid_248409.html

大家可以看到,我博客内的一篇文章中,这个图片没有按照默认变成小图片,这个执行非常简单。只需要一条执行这个效果的代码,代码如下:
<IMG style="BORDER-LEFT-COLOR: #000000; BORDER-BOTTOM-COLOR: #000000; BORDER-TOP-COLOR: #000000; BORDER-RIGHT-COLOR: #000000" src="图片URL链接地址" border=0>

『注』:下面,我来说明一下怎样插入代码,以及代码的改动问题。
1、
“SRC=”后边代表的是图片URL地址。我推荐的方法是先在网上选择你喜欢的图片,然后存到你的电脑里。接着把这张图片放入你的网络相册,然后选择你图片的页面,鼠标右键至属性,即会出现“地址(URL):http://……”,而这就是所谓的“图片URL链接地址”了。最后,用此地址替换上述代码中所在的位置,代码即算修改完成。

2、“border=”这个代表的是图片的边框粗细。如果你不需要在图片外层再添加一层边框,那么后边的数字则不用修改,直接为“0”就可以了。“BORDER-XXX-COLOR”这四个应该分别代表的是边框的颜色。至于图片的大小显示修改,自然是在上述代码中再添加“heigh=”和“width=”,分别为高度和宽度。等号后边的数值越大,图片就越长或越宽。

3、当代码全部修改好以后。把你修改的代码复制粘贴到博客内就搞定了。这里需要说明的是,粘贴代码的位置是在新添文章的“所见所得”编辑器里的源码模式。



·关于额外留言本。许多朋友,包括某猫偶自己也觉得留言和文章的评论最好分开为好。我上次胡逛别人的博客时看见一位朋友就有了妥善的解决方案。方法当然也和代码有所关联。首先,我先把她的方法介绍给大家。

【方法(1)】——

1、步骤一,
添加一篇日记文章。编写题目与欢迎词,也可以插入图片等。

2、步骤二,
在管理页面内添加一处分栏,分栏题目自定。在这里我暂时把这新增的分栏名默认为“留言本”,以便于后文的文字陈述。

3、步骤三,
把新赠的文章加入到留言本这个分栏里。如此,一个简单的留言本就完成了。它可以专门提供大家灌水,留下与你文章无关的言论。

·下面来介绍下我做留言本的方法。当然,个人认为自己的留言本是非常漂亮的,而且与添加分栏项目无关,只是复杂了些许,它需要用到两个代码。我尽量把它们说的具体和明白点。

【方法(2)】——

1、步骤一,
与方法(1)的步骤一没有差别。

2、步骤二,
在管理页面中“修改个人设置”的“自我简介”里,添加一组需修改的代码。代码如下:

<DIV style="RIGHT: 770px; POSITION: absolute; TOP: 292px">

<TABLE cellSpacing=0 cellPadding=0 border=0>

<TBODY>

<TR>

<TD>

<A href="刚才添加的日志页面地址"><STRONG><FONT color=#aaddff>小恶魔记事(公告留言簿)</FONT></STRONG></A>
</A></FONT></TD></TR></TBODY></TABLE></DIV>

『注』先别急着马上插入代码。代码仍然需要修改后,才能插入。

1、
首先,大家要记得千万别动代码里的空行,不然在首页里显示出的东西就会有所出入。

2、
第二,代码里标有“刚才添加的日志页面地址”这个地址是文章页面的地址。也就是说,你们所需要做的是把先前新添加的那篇日志的地址栏复制下来替换它。通常每篇日志的地址都有些微的差异,即使他们是在同一个博客里。而这个地址就位于游览器的地址栏。

3、
上述代码的蓝色数字,就是留言本链接在博客首页里的显示位置。“RIGHT:”和“TOP:”分别代表纵向坐标和横向坐标。“RIGHT:”后边数字越大,留言本链接显示的位置越靠左。“TOP:”后边的数值越大,链接位置越靠下。

4、
代码中“小恶魔记事(公告留言簿)”是代表留言本链接的文字,一般你给自己的留言本起了个什么样的名字,只要照样修改替换就成。汉字两边的粗体“<STRONG>和</STRONG>”代表该文字是否为粗体。“<FONT color=#aaddff>和</FONT>”则代表字体显示的颜色。

5、
全部代码修改完毕后,按照步骤二插入“个人设置”里即可生效。


·最后,最重要的问题是怎样美化留言本。这种美化与先前介绍的两种方法无关,无论你决定使用哪种方法制作留言本,美化的工作只需要在你新添日志内进行即可。留言本的功用对于很多朋友来说真的是个方便实用的东西,偶再也不用为文章内掺杂N多问好声烦恼。如果你们是个像偶一样龟毛的完美主义者,偶就在这里恭喜你。因为,虽然制作需要相当麻烦的步骤,也需要很多时间,但偶再也不用因为不够美观或者页面杂乱而心里不爽。
·我的留言本里为了不使它过于单调,在美化里添进许多不同的元素,比如偶最近动态和公告,想对客人们所说的话,自己的资料以及对博客的介绍等。为此,我在文章页面里添入图片以及代码。使文字在图片上显现。呃,或许我该称它为博客文章内的“图片滚动文本框”。


大家可以参看我的留言本页面:

http://blog.readnovel.com/blog/htm/do_showone/tid_225608.html

上述页面里。各位可以看见这篇日记内的文字都是建立于一张图片中,而文章上有滚动条可供大家翻阅。这种效果不仅节约了博客内的页面长度,也使页面看得比较舒服。要制作这种效果,就会比较麻烦,代码也较长。那么,具体代码如下:
<TABLE style="WIDTH: 562px; HEIGHT: 777px" background=图片URL地址>
<TBODY>
<TR><TD></TD><TD></TD></TR>
<TR>
<TD width=80 height=238></TD>
<TD width=80 height=238><DIV style="SCROLLBAR-FACE-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #c3d6da; OVERFLOW: auto; WIDTH: 468px; SCROLLBAR-SHADOW-COLOR: #3d5054; SCROLLBAR-3DLIGHT-COLOR: #3d5054; SCROLLBAR-ARROW-COLOR: #009900; SCROLLBAR-DARKSHADOW-COLOR: #85989c; HEIGHT: 649px">日志文字</DIV></TD>
</TR></TBODY></TABLE>


『注』:老样子,我来说明一下怎样插入代码,以及代码的改动问题。

1、
首先,你需要找到一张适合的图片,这张图片的长宽可能需要你放进软件里剪裁成合适的大小。高度没有特别的要求,几乎是想要多少长就可以用多少长。宽度则比较敏感,如果做不好极有可能是页面产生增大移动等。那么,我就先说明一下自己的情况。我的网页模板宽度设置为“95%”,也就是系统给予的宽度设置最大的那个。自然,我的日志页面宽度范围也较大。所以,我修改的滚动图宽度在“630”,这刚巧可以完全覆盖整个页面。

2、
第二,将修改好高宽的图片添加进相册。复制该图片地址,替换上述代码中“background=”后的“图片URL地址”。

3、第三,将代码“height=”和“width=”后的数字大小修改成与你图片大小相同的数字。

4、
第四,将修改后的代码复制,粘贴到日志“所见所得”编辑器的“源码模式”里。然后,查看按“设计模式”可参看一下你的成果。这里需要说明的是,上述代码中“width=80”这两个数值为图片内滚动文本框与图片的间隔距离。即是说,“width=80”这个数值的等号后边越小,文本框与图片本身边界的距离越小。而文本框的长宽,只需要在“设计模式”里拉长或者拉宽就可以做到。

·以上大致就是该代码的应用了,偶已经把基本上的情况全部都说明了,具体还请自己摸索。接下来我就解释一下上述代码里“DIV style=”后方代码的大致意思。

注意说明:
SCROLLBAR-FACE-COLOR: #ffcocb;         滚动条的颜色
SCROLLBAR-HIGHLIGHT-COLOR: #98fb98;     滚动条向光方向的颜色
SCROLLBAR-SHADOW-COLOR: #ffb6c1;       滚动条背光方向的颜色
SCROLLBAR-3DLIGHT-COLOR: #FFFFFF;       滚动条左和上外边框的颜色
SCROLLBAR-DARKSHADOW-COLOR: #FFFFFF;    滚动条右和下外边框的颜色
SCROLLBAR-ARROW-COLOR: #f5deb3;       滚动条箭头的颜色
SCROLLBAR-TRACK-COLOR: #ffdead;        滚动条底色
background-color:#FFFFE0;             滚动条内部的背景色

 
 
 
 

0     荷花小女子
 
 

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多