倍可親

分類博客
博客導航

笨蛋系列 —— 怎麼給博文加上喜歡的背景

作者：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 個評論)

回復 桑兒 2010-8-11 01:59
這麼麻煩，加它幹嗎~~~草莓呢？
回復 agou101 2010-8-11 02:09
桑兒: 這麼麻煩，加它幹嗎~~~草莓呢？
說得也是哈，加它幹嗎~~~草莓呢？
         看來哈，我得親自把草莓給你送去
                          還得親眼看著你吃下去才行涅~
回復 早安太陽 2010-8-11 02:11
大清早地，就把我們電腦盲搞暈，你良苦用心呀你是！
回復 小小.. 2010-8-11 02:12
BD
回復 早安太陽 2010-8-11 02:12
阿狗笨蛋老師，您給製作，我贈分，怎麼樣呀？
回復 小小.. 2010-8-11 02:12
我的狗狗老師辛苦了~~~  先收藏了哈~~~好好學習天天向上
回復 小小.. 2010-8-11 02:13
半夜還在備課。。。。感動S 了~~~
回復 agou101 2010-8-11 02:14
早安太陽: 大清早地，就把我們電腦盲搞暈，你良苦用心呀你是！
這就叫暈了笨蛋，鍛煉了好漢哈！晚安！
回復 agou101 2010-8-11 02:14
早安太陽: 阿狗笨蛋老師，您給製作，我贈分，怎麼樣呀？
好啊好啊！
回復 agou101 2010-8-11 02:15
小小..: BD
BD也被人搶走了哈
我下次多準備幾個哈~
回復 agou101 2010-8-11 02:16
小小..: 我的狗狗老師辛苦了~~~  先收藏了哈~~~好好學習天天向上
對小小老師來講，可是小菜一碟哈
回復 agou101 2010-8-11 02:16
小小..: 半夜還在備課。。。。感動S 了~~~
這就為革命睡覺去哈
回復 早安太陽 2010-8-11 02:19
agou101: 這就叫暈了笨蛋，鍛煉了好漢哈！晚安！
回復 早安太陽 2010-8-11 02:21
agou101: 好啊好啊！
好！爽快！一言為定！
你反悔了就不是一隻好狗哈
回復 小小.. 2010-8-11 02:21
agou101: 這就為革命睡覺去哈
哈哈~~~睡革命的覺，做狗狗的美夢
回復 小小.. 2010-8-11 02:23
agou101: BD也被人搶走了哈
我下次多準備幾個哈~
還好是自家的人。。。。搶得。。小小也能享用的
回復 xinsheng 2010-8-11 02:24
thanks for sharing.
回復 桑兒 2010-8-11 02:24
agou101: 說得也是哈，加它幹嗎~~~草莓呢？
         看來哈，我得親自把草莓給你送去
                          還得親眼看著你吃下去才行涅~
不勞你大駕了，就寄棵樹來吧~~~
回復 caro 2010-8-11 02:24
狗狗，你終於貼出來了，我先收藏在慢慢學習
回復 秋揪瞅 2010-8-11 02:29
真暈菜了
123... 6下一頁

facelist doodle 塗鴉板

您需要登錄后才可以評論 登錄 | 註冊

其它[村內互動]博文更多

關於本站 | 隱私權政策 | 免責條款 | 版權聲明 | 聯絡我們

Copyright © 2001-2013 海外華人中文門戶：倍可親 (http://big5.backchina.com) All Rights Reserved.

程序系統基於 Discuz! X3.1 商業版 優化 Discuz! © 2001-2013 Comsenz Inc.

本站時間採用京港台時間 GMT+8, 2024-4-20 02:25

返回頂部