笨蛋系列 —— 怎么给博文加上喜欢的背景

作者:agou101  于 2010-8-11 01:54 发表于 最热闹的华人社交网络--贝壳村

通用分类:村内互动|已有120评论

       
 

笨蛋系列 —— 怎么给博文上喜欢的背景

 
   

其实不难!
按下面的123做一遍,先有个感性认识哈,然后再慢慢说。
(1)打开Notepad(当然也可以打开别的文本编辑器,只要你喜欢)
(2)把下面的码复制(Copy、Paste)到刚才打开的Notepad去

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>New Page 1</title>
</head>
<body>

<table style="POSITION: relative; WIDTH:990px; HEIGHT: 100%; TOP: -25px;
LEFT: -11px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="position: relative; width: 990; height: 342;
background-image: url('http://i37.tinypic.com/28asv0l.jpg');
background-repeat: no-repeat; background-position: center top">
<p align="center"> </p>
<p align="center"> </p>
<p align="center"><font face="STCaiyun" size="7" color="#008000">
在这里写标题</font></p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center">
<embed style="width: 1px; height: 1px"
src="http://myzhiyin.com/blog/upld/100725507002318.mp3"
type="application/x-mplayer2" volum="0" loop="true"
autostart="true">
</td>
</tr>
<tr>
<td style="width: 990; height: 100%; background-image:
url('http://i35.tinypic.com/swbvid.jpg');
background-repeat: repeat-y; background-position:
center top">
<div align="center">
<table border="0" cellSpacing="0" cellPadding="25" width="900">
<tr>
<td>
<div class="articalTitle" align="center">
<font face="KaiTi" size="5"><font color="#014517">
<p style="LINE-HEIGHT: 220%" align="left"><b>  
这里写你自己博客的内容,第一段:从前有个山,山里有个庙,
庙里有个老和尚给小和尚讲故事,
说是:从前有个山,山里有个庙,庙里有个老和尚给小和尚讲
故事……<br>
  
这里写你自己博客的内容,第二段:从前有个山,山里有个庙,
庙里有个老和尚给小和尚讲故事,
说是:从前有个山,山里有个庙,庙里有个老和尚给小和尚讲
故事……<br>
</b></font></div>
</font></td>
</tr>


<tr>
<td style="position: relative; width: 200px; height: 30px;
background-image: url('http://i35.tinypic.com/ac7r41.gif');
background-repeat: no-repeat; background-position: center">
</td>
</tr>
<tr>
<td width="900" style="padding-left: 40px">
<p style="LINE-HEIGHT: 220%" align="left">
<font face="KaiTi" size="5" color="#014517">照片1的说明
</font></td>
</tr>
<tr>
<td style="position: relative; width: 900; height: 600;
background-image: url('http://i34.tinypic.com/9qb3mr.jpg');
background-repeat: no-repeat; background-position: center top">
</td>
</tr>
<tr>
<td height="60"></td>
</tr>


<tr>
<td style="position: relative; width: 200px; height: 30px;
background-image: url('http://i35.tinypic.com/ac7r41.gif');
background-repeat: no-repeat; background-position: center">
</td>
</tr>
<tr>
<td width="900" style="padding-left: 40px">
<p style="LINE-HEIGHT: 220%" align="left">
<font face="KaiTi" size="5" color="#014517">照片2的说明
</font></td>
</tr>
<tr>
<td style="position: relative; width: 900; height: 600;
background-image: url('http://i33.tinypic.com/29tpmp.jpg');
background-repeat: no-repeat; background-position: center top">
</td>
</tr>
<tr>
<td height="60"></td>
</tr>

</table>
</div>
</td>
</tr>
<tr>
<td style="position: relative; width: 990; height: 88; background-image:
url('http://i35.tinypic.com/2e4ff9w.jpg');
background-repeat: no-repeat; background-position: center top">
</td>
</tr>
</table>

</body>

</html>

 

(3)在打开的NotePad里面,应该可以看到上面这些编码了吧。
那就按下面的方法,把它保存起来。
[file] --> [Save As...] --> [File name: 随便起个名字,但扩张名必须是.htm,比如起名为:mytest01.htm] --> [Encoding: 选择为:UTF-8] --> [Save]

(4)找到上面保存的文件“mytest01.htm”,用鼠标左键连击两下,应该表示在网页浏览器上的,比如IE.

(5)在已经正常表示的网页浏览器上(比如IE),按下面的顺序把画面复制到你自己的博文编辑画面去
在浏览器上:[Edit] --> [Select All]; [Edit] --> [Copy]
在自己博客上:进入博文编辑画面、在画面任意处按鼠标右键,选择“Paste”
然后,修改博文的标题,博文的内容,最后,选择[保存发布]

感性完了!当然,上面的操作还不能改变图片哈。这个后面再说啦~

   
         
   

好了,说说背景图吧!
整个背景是三个图构成的:
图-1(上部)



 

图-2(中间的图,这个是反复表示的)


图-3(下部的图)

 

图-4(隔在照片与照片之间的)

 

   
         
   

现在说说,怎么把背景图以及自己的图片加进博文里去。
不难哈、完全是填空作业。
下图就是刚才你复制到Notepad上的源码,为了容易说明,便加了行号,还把要填空的地方用红色方框表示出来。
 



 


开始填空吧!
(1)填空-1(第11行):写上背景图-1的宽度和高度(这张图的宽度是990px,高度是342px,如果你自己选图的话,宽度一定要调整为990px,高度无所谓)

(2)填空-2(第12行):背景图-1的地址。

(3)填空-3(第22行):背景音乐的地址。

(4)填空-4(第29行):背景图-2的地址。

(5)填空-5(第55行):图-4(隔在照片与照片之间)的地址。

(6)填空-6(第66行):自己的插图-1的宽度和高度。

(7)填空-7(第67行):自己的插图-1的地址。

(8)填空-8(第103行):背景图-3(下部的图)的宽度和高度。

(9)填空-9(第104行):背景图-3(下部的图)的地址。

注意:以上填空作业时要在Notepad上完成的。完成填空后,再保存,然后用浏览器打开,最后复制到自己的博文编辑画面。
黄色方框的部分,在自己的博文编辑画面上编辑修改。
浅蓝色的方框,是你自己一幅插图的码。上面的例子是假定你有两幅插图。如果只有一幅插图的话,把最下面浅蓝色方框的语句全部删除。如果多于两幅插图,则把浅蓝色方框的码复制到下面,写入插图的宽度、高度和地址即可。

   
         
   

提供两套背景图:

图-1(上部)990x494



 

图-2(中间的图,这个是反复表示的)990x93


图-3(下部的图)990x89

 

图-4(隔在照片与照片之间的)

 

 
   
         
   

提供两套背景图:

图-1(上部)990x418



 

图-2(中间的图,这个是反复表示的)990x76


图-3(下部的图)990x66

 

图-4(隔在照片与照片之间的)

 

 
   

高兴

感动

同情

搞笑
1

难过

拍砖

支持
2

鲜花

刚表态过的朋友 (3 人)

发表评论 评论 (120 个评论)

2 回复 桑儿 2010-8-11 01:59
这么麻烦,加它干吗~~~草莓呢?
2 回复 agou101 2010-8-11 02:09
桑儿: 这么麻烦,加它干吗~~~草莓呢?
说得也是哈,加它干吗~~~草莓呢?
         看来哈,我得亲自把草莓给你送去
                          还得亲眼看着你吃下去才行涅~
2 回复 早安太阳 2010-8-11 02:11
大清早地,就把我们电脑盲搞晕,你良苦用心呀你是!
1 回复 小小.. 2010-8-11 02:12
BD
2 回复 早安太阳 2010-8-11 02:12
阿狗笨蛋老师,您给制作,我赠分,怎么样呀?
2 回复 小小.. 2010-8-11 02:12
我的狗狗老师辛苦了~~~  先收藏了哈~~~好好学习天天向上
2 回复 小小.. 2010-8-11 02:13
半夜还在备课。。。。感动S 了~~~
2 回复 agou101 2010-8-11 02:14
早安太阳: 大清早地,就把我们电脑盲搞晕,你良苦用心呀你是!
这就叫晕了笨蛋,锻炼了好汉哈!晚安!
1 回复 agou101 2010-8-11 02:14
早安太阳: 阿狗笨蛋老师,您给制作,我赠分,怎么样呀?
好啊好啊!
2 回复 agou101 2010-8-11 02:15
小小..: BD
BD也被人抢走了哈
我下次多准备几个哈~
1 回复 agou101 2010-8-11 02:16
小小..: 我的狗狗老师辛苦了~~~  先收藏了哈~~~好好学习天天向上
对小小老师来讲,可是小菜一碟哈
2 回复 agou101 2010-8-11 02:16
小小..: 半夜还在备课。。。。感动S 了~~~
这就为革命睡觉去哈
2 回复 早安太阳 2010-8-11 02:19
agou101: 这就叫晕了笨蛋,锻炼了好汉哈!晚安!
2 回复 早安太阳 2010-8-11 02:21
agou101: 好啊好啊!
好!爽快!一言为定!
你反悔了就不是一只好狗哈
2 回复 小小.. 2010-8-11 02:21
agou101: 这就为革命睡觉去哈
哈哈~~~睡革命的觉,做狗狗的美
1 回复 小小.. 2010-8-11 02:23
agou101: BD也被人抢走了哈
我下次多准备几个哈~
还好是自家的人。。。。抢得。。小小也能享用的
2 回复 xinsheng 2010-8-11 02:24
thanks for sharing.
2 回复 桑儿 2010-8-11 02:24
agou101: 说得也是哈,加它干吗~~~草莓呢?
         看来哈,我得亲自把草莓给你送去
                          还得亲眼看着你吃下去才行涅~
不劳你大驾了,就寄棵树来吧~~~
2 回复 caro 2010-8-11 02:24
狗狗,你终于贴出来了,我先收藏在慢慢学习
2 回复 秋揪瞅 2010-8-11 02:29
真晕菜了
123... 6下一页

facelist doodle 涂鸦板

您需要登录后才可以评论 登录 | 注册

关于本站 | 隐私政策 | 免责条款 | 版权声明 | 联络我们 | 刊登广告 | 转手机版 | APP下载

Copyright © 2001-2013 海外华人中文门户:倍可亲 (http://www.backchina.com) All Rights Reserved.

程序系统基于 Discuz! X3.1 商业版 优化 Discuz! © 2001-2013 Comsenz Inc. 更新:GMT+8, 2023-4-22 20:26

倍可亲服务器位于美国圣何塞、西雅图和达拉斯顶级数据中心,为更好服务全球网友特统一使用京港台时间

返回顶部