信纸背景的应用实例

┢┦aPpY ☆╮『酷色炫彩... 的个人资料┢┦aPpY ☆╮『酷色炫彩』ⓒⓞⓞⓛ照片日志列表

10月17日

信纸背景的应用实例

MSN Space进入稳定期.能够在Space应用的东西,也基本定型...
下面介绍几种利用信纸图片,来更加丰富日志内容的方法.
如果懂得HTML语言/懂得利用网页编辑软件,就没有必要看下面的内容了.
下面的内容是针对不懂HTML语言的朋友们做的.
基本上是以复制和更改为主,没有对源码做详细注释.
每种实例都标有复制起点和终点.
只要复制该部分到日志里.做一下简单修改即可.

1.利用<Table>标识的背景图片

复制起点

在这里输入文字内容

复制终点

源码：

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="376" height="600">
<tr>
<td width="100%" background="http://www.ka-ca.com/home/m/data/db/photo/69/92/71/16/11234099450" height="600" valign="top">
<p align="center"><font face="Arial" style="font-size: 9pt">在这里输入文字内容</font>
</td>
</tr>
</table>

注释：

<table..width="376" height="600">里的宽度(width)和高度(height)的值,一定要和图片的实际宽度和高度相同.
valign="center" : valign-垂直对齐方式, center为默认值-相对居中, top为顶端对齐,bottom为相对底段对齐.
<p align="center">: 水平对齐方式, center为居中,right为右对齐,left为左对齐.
中间红颜色部分为背景图片地址,可以更改为自己的图片地址.

2.利用<Table>标识的背景图片+框内排版

复制起点

文字或图片	文字或图片
文字或图片	文字或图片
文字或图片	文字或图片

复制终点

注释：这种方式比较复杂.如果有专业编辑软件,可以试一试.因为在日志内直接编辑有很大难度.不做详解.

3.利用<Table>标识的背景图片+滚动框

有时文字内容很多. 超过了背景图片的范围. 不太好看...那么只好利用滚动框, 把文字内容限制在图片之内.

复制起点


	1. 文字内容... 2. 3. 4. 5.右对齐文字内容 6. 7.图片 8. 9. 10.居中文字内容... 11. 12. 13. 14. 15. 16. 17. 18. 19. 20.文字内容...

复制终点

源码：

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="376" id="AutoNumber1" height="514">
<tr>
<td width="100%" background="http://www.ka-ca.com/home/m/data/db/photo/2/72/81/97/11234099451" align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber2" height="495">
<tr>
<td width="11%" height="170">　</td>
<td width="78%" height="170">　</td>
<td width="11%" height="170">　</td>
</tr>
<tr>
<td width="11" height="309">　</td>
<td width="78%" height="309">
<div style="BORDER-RIGHT: black 0px solid; BORDER-TOP: black 0px solid; SCROLLBAR-FACE-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: scroll; BORDER-LEFT: black 0px solid; WIDTH: 300px; SCROLLBAR-SHADOW-COLOR: #ffffff; COLOR: #000000; SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #ff9966; BORDER-BOTTOM: black 0px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; HEIGHT: 270px; BACKGROUND-COLOR: transparent">
<div>
<p align="left"><font face="Arial" style="font-size: 9pt">1.
<span lang="zh-cn">文字内容</span>...</font></p>
<p align="left"><font face="Arial" style="font-size: 9pt">2.</font></p>
<p align="left"><font face="Arial" style="font-size: 9pt">3.</font></p>
<p align="left"><font face="Arial" style="font-size: 9pt">4.</font></p>
<p align="right"><font face="Arial" style="font-size: 9pt">5.<span lang="zh-cn">右对齐文字内容</span></font></p>
<p align="left"><font face="Arial" style="font-size: 9pt">6.</font></p>
<p align="center"><font face="Arial" style="font-size: 9pt">7.<img border="0" src="http://img69.imageshack.us/img69/4432/msnlogo2uw.gif" width="48" height="48"><span lang="zh-cn">图片</span></font></p>
<p align="left"><font face="Arial" style="font-size: 9pt">8.</font></p>
<p align="left"><font face="Arial" style="font-size: 9pt">9.</font></p>
<p align="center"><font face="Arial" style="font-size: 9pt">10.<span lang="zh-cn">居中文字内容</span>...</font></p>
<p align="left"><font face="Arial" style="font-size: 9pt">11.</font></p>
<p align="left"><font face="Arial" style="font-size: 9pt">12.</font></p>
<p align="left"><font face="Arial" style="font-size: 9pt">13.</font></p>
<p align="left"><font face="Arial" style="font-size: 9pt">14.</font></p>
<p align="left"><font face="Arial" style="font-size: 9pt">15. </font>
</p>
<p align="left"><font face="Arial" style="font-size: 9pt">16.</font></p>
<p align="left"><font face="Arial" style="font-size: 9pt">17.</font></p>
<p align="left"><font face="Arial" style="font-size: 9pt">18.</font></p>
<p align="left"><font face="Arial" style="font-size: 9pt">19.</font></p>
<p align="left"><font face="Arial" style="font-size: 9pt">20.<span lang="zh-cn">文字内容</span>...</font></div>
</div>

</td>
<td width="11" height="309">　</td>
</tr>
<tr>
<td width="11%" height="16"></td>
<td width="78%" height="16"></td>
<td width="11%" height="16"></td>
</tr>
</table>
</td>
</tr>
</table>
　

注释：

这么长的代码,即使懂HTML语言,也很难做分析.所以尽量复制上部的演示部分.
在这里重点解释几个重要组成部分.
1.<table>标识部分：有两套<table>.
外部的<table>是为了添加最底部背景图片.此部分可参考第一个演示注释.
内部的<table>是为了固定滚动框的位置而添加的.
2.<div>部分：也有两套<div>
外部的<div>是滚动框部分.内部的<div>是文字内容部分.
在这里对外部<div>做简单的解释.此部分代码较长.

只要记住(红色部分)宽度和高度位置就可以.

利用<Table>标识的表格,实现文字与分隔线对齐

复制起点

第1行-文字居中

第2行-文字左对齐

第3行-文字右对齐

最后1行

复制终点

源码：

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="425" id="AutoNumber1" background="http://www.ka-ca.com/home/m/data/db/photo/84/90/3/90/11234104990" height="571">
<tr>
<td width="100%" height="474" align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="300" id="AutoNumber2" height="145">
<tr>
<td width="100%" align="center" height="129">　</td>
</tr>
<tr>
<td width="100%" align="center" height="20">
<font face="Arial" style="font-size: 9pt"><span lang="zh-cn">第</span>1<span lang="zh-cn">行-文字居中</span></font></td>
</tr>
<tr>
<td width="100%" align="center" height="20">
<p align="left"><font face="Arial" style="font-size: 9pt">
<span lang="zh-cn">第2行-文字左对齐</span></font></td>
</tr>
<tr>
<td width="100%" align="center" height="20">
<p align="right"><font face="Arial" style="font-size: 9pt">
<span lang="zh-cn">第3行-文字右对齐</span></font></td>
</tr>
<tr>
<td width="100%" align="center" height="20">　</td>
</tr>
<tr>
<td width="100%" align="center" height="20">　</td>
</tr>
<tr>
<td width="100%" align="center" height="20">　</td>
</tr>
<tr>
<td width="100%" align="center" height="20">　</td>
</tr>
<tr>
<td width="100%" align="center" height="20">　</td>
</tr>
<tr>
<td width="100%" align="center" height="20">　</td>
</tr>
<tr>
<td width="100%" align="center" height="20">　</td>
</tr>
<tr>
<td width="100%" align="center" height="20">　</td>
</tr>
<tr>
<td width="100%" align="center" height="20">　</td>
</tr>
<tr>
<td width="100%" align="center" height="20">　</td>
</tr>
<tr>
<td width="100%" align="center" height="20">　</td>
</tr>
<tr>
<td width="100%" align="center" height="20">　</td>
</tr>
<tr>
<td width="100%" align="center" height="20">　</td>
</tr>
<tr>
<td width="100%" align="center" height="20"><span lang="zh-cn">
<font face="Arial" style="font-size: 9pt">最后</font></span><font face="Arial" style="font-size: 9pt">1<span lang="zh-cn">行</span></font></td>
</tr>
</table>
</td>
</tr>
</table>
　

注释：

上部的源码是在FrontPage制作的源码.根据表格和单元格的属性设置,字体大小的设置都会出现不同的效果.

注意：不要强求~要根据自己掌握的HTML语言知识.
<table>是一个比较复杂的标识.
如果在日志里用得不当,会出现意想不到的结果
如：主页日志内容消失或只显示一半, 模块会出现在应有的位置之外等.
所以,没有HTML基础的朋友一定要谨慎使用.

9:16 | 写入日志 | ➸﹌MSN技巧篇♀

若要添加评论，请使用您的 Windows Live ID 登录（如果您使用过 Hotmail、Messenger 或 Xbox LIVE，您就拥有 Windows Live ID）。登录

还没有 Windows Live ID 吗？请注册

LooK－Rock发表:

又来晚了。这个背景似乎也过期了。看不到效果。还有我今天花了很大功夫搞了几个flash游戏和一个用flash播放器播放url的mv（我也说不清楚。反正看似是flash，点右键也是flash，但是放的东西一看就不是flash，我想应该是一个flash的播放器，进行在线播放的）。

都弄完了。我以为都好了。可是一预览，哇！～什么都没了，根本不显示flash。我想肯定是被屏蔽掉了。现在知道的用flash的唯一方法就是wmp了吧。反正日志是不行了。

还有上次公告板的事，我实在是没有天赋啊～只有把你这个：http://spaces.msn.com/akulix/Blog/cns!1pYz7-94V5jDULwIevJHc-Jg!200.entry

复制过去才能双击写字，而且html代码有很多的。显然不仅仅是一个gif吧，至少我是这么琢磨的，只有gif地址我真觉得根本没办法弄出你那种效果，应该是有代码，可是你的我复制过去代码太长，看不懂哪一部分是我需要的。我自己感觉就想ps的用法一样好像有图层似的，有一层是文字的，一层是gif图，还有好像是个效果什么的。还有就是你这个公告栏：http://spaces.msn.com/akulix/Blog/cns!1pYz7-94V5jDULwIevJHc-Jg!199.entry

我纯粹就没办法复制，你是做成背景还是怎么弄了？我怎么什么都不会啊？？？？

唉！没文化，真可怕啊～～～～～

2 月 10 日

引用通告

此日志的引用通告 URL 是：

http://akulix.spaces.live.com/blog/cns!C12449916995B2EF!849.trak

引用此项的网络日志

日志

信纸背景的应用实例

评论 (1)

引用通告