下载APP | 繁體版 | 发布广告 |常用工具

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

作者：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 涂鸦板

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

agou101最受欢迎的博文
  1. 蒙蒙细雨中的原宿 [2009/12]
  2. I LOVE YOU - 尾崎 豊(Yutaka Ozaki) [2009/06]
  3. 倒不妨变个花样如何！？ [2009/06]
  4. 我有心救她，却无能为力…… [2010/07]
  5. 笨蛋系列 ——05 情深深意切切手把着手: 教婉子录歌 [2010/04]
  6. 唉~、多余的悲哀 [2010/07]
  7. 贴一张日本MM [2009/03]
  8. 感秋 [2010/09]
  9. 五彩缤纷的梦 [2010/05]
  10. 白岩松6两二锅头下肚 新闻1+1侃国足黑天昏地 [2009/12]
  11. 笨蛋系列 —— 怎么给博文加上喜欢的背景 [2010/08]
  12. 那顿质朴的晚餐 [2010/08]
  13. 忙忙的周末，意外的收获 [2010/04]
  14. 笨蛋系列 ——02 阿狗柔情细语纯声解说: 迷人音乐播放器 [2010/01]
  15. 质朴的晚餐・之三 [2010/08]
  16. 追暑去 [2010/08]
  17. 晒晒我可爱的小妖精 [2010/05]
  18. 笨蛋系列 —— 更环保地贴音乐（视频解说·阿狗粉墨登场） [2009/12]
  19. 笨蛋系列 ——04 柔情细语纯声解说: 轻轻松松音画合一 [2010/03]
  20. 章鱼，烧酒 ，与 竖琴 [2009/11]
  21. 既想起来，则说干就干 [2009/08]
  22. 您喝酒么？愛喝什么酒？能喝多少酒？ [2009/11]
其它[村内互动]博文更多

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

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

程序系统基于 Discuz! X3.1 商业版 优化 Discuz! © 2001-2013 Comsenz Inc. 更新：GMT+8, 2022-4-28 04:02

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

返回顶部