論壇制作代碼帖是不需要用到任何網(wǎng)頁編輯軟件的，只需要理解一些簡單的HTML語言就可以了，所以多看一些HTML語法教程才對做帖有最大的幫助。一定會有人問，不用網(wǎng)頁軟件那代碼哪里來？呵，當然也不會讓你一個一個的給背下來（想想也是不可能的），其實很簡單，直接復(fù)制要用的HTML代碼編輯就可以了。不然人家給出源碼的目的是什么？我們又何必看到漂亮的效果就想方設(shè)法的去得到源碼呢？而且制作網(wǎng)頁與論壇做帖是有區(qū)別的，很多東西又是只能意會不能言傳的，所以個中詳情只有自己親自試驗才能拿捏得清楚。希望大家不要被一些功能強大的網(wǎng)頁編輯軟件迷惑，所謂網(wǎng)頁編輯軟件是用來編輯網(wǎng)頁的，論壇里的帖子是網(wǎng)頁嗎？不是！在大家對代碼有了一定的了解之后可以適當?shù)倪x擇一些網(wǎng)頁編輯器使用，只有對網(wǎng)頁語言有了一定的了解編輯軟件才容易上手，才能達到使用軟件的目的－－便捷。
大家也不要一味的只是看教程，教程里給出某段代碼說是什么效果就是什么效果嗎？你不自己試試看怎么知道到底是不是呢？試著把別人的源碼拿來試著編輯，換換圖片和文字在論壇里發(fā)表看看效果，做多了自然就懂了。學(xué)這東西是沒有捷徑可走的，只有不斷的實踐才能進步，知識是一點一點積累出來的。學(xué)到的東西是自己的，也不要一味的想著依賴別人，自己可以找到答案的問題就自己解決，一次不行就二次，一直試下去總會成功。
制作一個獨特的帖子最重要的是創(chuàng)意，一個人的風格也是由他的創(chuàng)意來定格的。創(chuàng)意這東西就不是可以隨便學(xué)來的，所以大家只有多欣賞別人的帖子，多接觸一些精美的網(wǎng)頁，從中吸收別人的精華，以激發(fā)自己的靈感。
最后就是學(xué)習的目的，一定要明確自己學(xué)做帖的目的。我們不管學(xué)什么都要擺明正確的學(xué)習態(tài)度，相信這個是大家都明白的道理吧。我當初學(xué)代碼做帖，只是因為看到別人做的帖子漂亮，自己也要做漂亮的帖子；因為想要做出漂亮的帖子就要學(xué)習HTML語法，所以我學(xué)網(wǎng)頁語言的目的是為我做帖子服務(wù)的；我學(xué)的東西是為了達到我的目的而學(xué)的。方法是死的，人的思維是活的，技能都只是用來為創(chuàng)意服務(wù)的。希望大家在學(xué)做帖前先想清楚為什么而學(xué)？
◆ 如果看完了上面的“廢話”，就開始學(xué)做帖吧。
| 實例教程<一> --初級篇
| ||
| ||
|
| ||
| ◇ 源 碼 (注 釋): | ||
|
<html><head><!-- 標題(開始) --><title>童 話</title><!-- 標題(結(jié)束) --><!-- 音樂(開始) --><bgsound src="http://cry.shidabbs.com/web/css/bbsjc/images/tonghua.wma" loop=3><!-- 音樂(結(jié)束) --></head> <!-- 內(nèi)容(開始) --><body background="http://cry.shidabbs.com/sc/set/white/0515/kos_bg8.jpg"> <!-- 背景表格(開始) --><TABLE align=center background="http://cry.shidabbs.com/sc/set/white/0515/kos_bg5.jpg" border="1" cellPadding="0" cellSpacing="60" bordercolordark="#D66D31" bordercolorlight="#EF82BD" width="520"><TBODY><TR><TD align="center" width="100%" bgcolor="#Ffffff"><BR><!-- 分隔線1(開始) --><IMG src="http://cry.shidabbs.com/sc/set/white/0515/kos_line1.gif" width="343" height="77" border="0"><!-- 分隔線1(結(jié)束) --><BR><BR><!-- 主題文字(開始) --><FONT style="COLOR: #EF598C; FILTER: glow(color=#F7D75A); FONT-FAMILY: 華文彩云; FONT-SIZE: 40pt; LINE-HEIGHT: 150%; WIDTH: 100%"><B>童 話</B></FONT><!-- 主題文字(結(jié)束) --><!-- 分隔線2(開始) --><IMG src="http://cry.shidabbs.com/sc/set/white/0515/kos_line2.gif" width="240" height="54" border="0"><!-- 分隔線2(結(jié)束) --><br><br><!-- 圖片邊框表格(開始) --><TABLE align=center border="1" cellPadding="0" cellSpacing="8" bgcolor="#EF82BD" bordercolor="#F7D75A"><TBODY><TR><TD> <!-- 圖片1(開始) --><IMG src="http://cry.shidabbs.com/web/css/bbsjc/images/pic00.jpg" width="260" height="377" border="0"><!-- 圖片1(結(jié)束) --></TD></TR></TBODY></TABLE> <!-- 圖片邊框表格(結(jié)束) --><br><!-- 文字1(開始) --><font face=宋體 size=2 color=#DE3C73>忘了有多久<br>再沒聽到<br>你對我說你最愛的故事</font> <!-- 文字1(結(jié)束) --><br><br><!-- 以下部分圖片和文字為重復(fù)使用相同代碼(只是更換了圖片地址和文字) --><TABLE align=center border="1" cellPadding="0" cellSpacing="8" bgcolor="#EF82BD" bordercolor="#F7D75A"><TBODY><TR><TD><IMG src="http://cry.shidabbs.com/web/css/bbsjc/images/pic01.jpg" width="260" height="377" border="0"></TD></TR></TBODY></TABLE><br><font face=宋體 size=2 color=#DE3C73><br>我想了很久<br>我開始慌了<br>是不是我又做錯了什么 </font><br><br><TABLE align=center border="1" cellPadding="0" cellSpacing="8" bgcolor="#EF82BD" bordercolor="#F7D75A"><TBODY><TR><TD><IMG src="http://cry.shidabbs.com/web/css/bbsjc/images/pic02.jpg" width="260" height="377" border="0"></TD></TR></TBODY></TABLE><br><font face=宋體 size=2 color=#DE3C73>你哭著對我說<br>童話里都是騙人的<br>我不可能是你的王子</font><br><br><TABLE align=center border="1" cellPadding="0" cellSpacing="8" bgcolor="#EF82BD" bordercolor="#F7D75A"><TBODY><TR><TD><IMG src="http://cry.shidabbs.com/web/css/bbsjc/images/pic03.jpg" width="260" height="377" border="0"></TD></TR></TBODY></TABLE><br><font face=宋體 size=2 color=#DE3C73>也許你不會懂<br>從你說愛我以后<br>我的天空 星星都亮了</font><br><br><TABLE align=center border="1" cellPadding="0" cellSpacing="8" bgcolor="#EF82BD" bordercolor="#F7D75A"><TBODY><TR><TD><IMG src="http://cry.shidabbs.com/web/css/bbsjc/images/pic04.jpg" width="260" height="377" border="0"></TD></TR></TBODY></TABLE><br><font face=宋體 size=2 color=#DE3C73>我愿變會變成童話里<br>你愛的那個天使<br>張開雙手變成翅膀守護你</font><br><br><TABLE align=center border="1" cellPadding="0" cellSpacing="8" bgcolor="#EF82BD" bordercolor="#F7D75A"><TBODY><TR><TD><IMG src="http://cry.shidabbs.com/web/css/bbsjc/images/pic05.jpg" width="260" height="377" border="0"></TD></TR></TBODY></TABLE><br><font face=宋體 size=2 color=#DE3C73><br>你要相信<br>相信我們會象童話故事里<br>幸福和快樂是結(jié)局 </font><br><br><TABLE align=center border="1" cellPadding="0" cellSpacing="8" bgcolor="#EF82BD" bordercolor="#F7D75A"><TBODY><TR><TD><IMG src="http://cry.shidabbs.com/web/css/bbsjc/images/pic06.jpg" width="260" height="377" border="0"></TD></TR></TBODY></TABLE><br><font face=宋體 size=2 color=#DE3C73><br>我會變會變成童話里<br>你愛的那個天使<br>一起寫我們的結(jié)局</font><br><br><TABLE align=center border="1" cellPadding="0" cellSpacing="8" bgcolor="#EF82BD" bordercolor="#F7D75A"><TBODY><TR><TD><IMG src="http://cry.shidabbs.com/web/css/bbsjc/images/pic07.jpg" width="260" height="377" border="0"></TD></TR></TBODY></TABLE><!-- 圖片和文字部分(結(jié)束) --><br><!-- 落款部分(開始) --><TABLE align=right width="302" height="189" border="0" cellPadding="0" cellSpacing="0"><TBODY><TR><TD align="left" width="100"><!-- 簽名文字(開始) --><font face=宋體 size=2 color=#DE3C73>音樂:童話/光良<br><br>編緝:雪夜寒星<br><br></font> <!-- 簽名文字(結(jié)束) --></TD><TD><!-- 底部裝飾圖(開始) --><IMG src="http://cry.shidabbs.com/sc/set/white/0515/kos_moon2.jpg" width="202" height="189" border="0"><!-- 底部裝飾圖(結(jié)束) --></TD></TR></TBODY></TABLE><!-- 落款部分(結(jié)束) --> </TD></TR></TBODY></TABLE><!-- 背景表格(結(jié)束) --> </BODY> <!-- 內(nèi)容(結(jié)束) --></HTML>
| ||
| ◇ 制 作 步 驟: | ||
|
◆ 1>準備工作: 先將做帖所需的圖片和素材上傳到有效空間(比如論壇),所需的文字用記事本保存到電腦文件夾中,以及音樂找到有效的連接地址. ◆ 2>用記事本編寫代碼: 首先請大家直接復(fù)制上面源碼注釋部分的代碼到發(fā)帖欄點擊預(yù)覽看看是什么效果？那么，大家按照注釋改變相應(yīng)的圖片或者文字再預(yù)覽看看有什么不同了(編寫代碼時注釋部分可以不要）。編寫相應(yīng)的代碼并不是叫你一個一個符號的打出來,大家可以直接復(fù)制圖片、文字等相應(yīng)的HTML格式語法套入自己所用的圖片和文字就可以了。再在電腦中新建一個記事本用來編寫代碼,把編寫好的代碼保存為文件名.html或者文件名.htm格式，在電腦中可以直接點擊該文件查看效果(在效果頁面上點擊右鍵選擇查看源文件就可以打開該頁面的源碼記事本)。之所以讓大家用記事本編輯代碼是由于網(wǎng)頁中ENTER的換行不會影響最終效果，把各段代碼間格開來大家看起來比較清晰，也方便編輯，而且保存到電腦里作為備份以免因為失誤造成丟失。注明：編寫代碼請用英文打字法（大小寫不限），文字部分就轉(zhuǎn)換為中文（智能ABC、五筆或其它）打字法。 ◆ 3>論壇發(fā)表帖子: 全選（Ctrl+A）記事本里的源碼復(fù)制（Ctrl+C）,粘帖（Ctrl+V）到論壇的發(fā)帖欄里。再把所有的空行和空格刪除，以保持所有的代碼連在一起（也就是不能有因敲擊Enter回車鍵而造成的斷行或空行）。寫上主題，預(yù)覽查看效果，如果沒有問題就可以發(fā)表了。
| ||
| ◇ 源 碼 解 析:（這里只是針對論壇做帖） | ||
|
◆ 1>背景 <body background="http://cry.shidabbs.com/sc/set/white/0515/kos_bg8.jpg">內(nèi)容部分</BODY> <BODY> 常用參數(shù)解說： background="bg1.gif" 設(shè)定背景墻紙。GIF 或 JPEG 皆可，可以是絕對途徑或相對途徑。 bgcolor="#FFFFFF" 設(shè)定背景顏色。當己設(shè)定背景墻紙時會失去作用，除非墻紙有透明部分。 text="#000000" 用以設(shè)定文字顏色。 #000000 代表黑色，亦可以采用顏色的名稱，即 text="black"
◆ 2>表格 背景使用的表格: <!-- 背景表格(開始) --><TABLE align=center background="http://cry.shidabbs.com/sc/set/white/0515/kos_bg5.jpg" border="1" cellPadding="0" cellSpacing="60" bordercolordark="#D66D31" bordercolorlight="#EF82BD" width="520"><TBODY><TR><TD align="center" width="100%" bgcolor="#Ffffff">內(nèi)容部分</TD></TR></TBODY></TABLE><!-- 背景表格(結(jié)束) -->圖片邊框使用的表格: <!-- 圖片邊框表格(開始) --><TABLE align=center border="1" cellPadding="0" cellSpacing="8" bgcolor="#EF82BD" bordercolor="#F7D75A"><TBODY><TR><TD>內(nèi)容部分</TD></TR></TBODY></TABLE><!-- 圖片邊框表格(結(jié)束) -->落款部分使用的表格: <!-- 落款部分(開始) --><TABLE align=right width="302" height="189" border="0" cellPadding="0" cellSpacing="0"><TBODY><TR><TD align="left" width="100">文字格</TD><TD>圖片格</TD></TR></TBODY></TABLE>><!-- 落款部分(結(jié)束) --> <TABLE>相關(guān)參數(shù)解說： <TR> 指表格列數(shù) <TD> 指表格行數(shù) align="center" 表格的擺放位置（水平），可選值為： left, right, center background="kos_bg5.jpg" 表格的背景，與 bgcolor 不要同用。可以在<td>中與<TABLE>中分別使用。 border="1" 表格邊框厚度，不同瀏覽器有不同的內(nèi)定值，故請指明。 cellpadding="0" 文字與格線的距離 cellspacing="60" 表格格線厚度 bordercolordark="#D66D31" 表格邊框背光部分的顏色。（效果帖中背景邊框粉紅色線部分） bordercolorlight="#EF82BD" 表格邊框向光部分的顏色。（效果帖中背景邊框桔紅色部分） width="520" 表格寬度，接受絕對值（如 80）及相對值（如 80%）?？梢栽?lt;td>中與<TABLE>中分別使用。 bgcolor="#Ffffff" 表格底色，與 background 不要同用?？梢栽?lt;td>中與<TABLE>中分別使用 bordercolor="#F7D75A" 表格邊框顏色 注明：有些參數(shù)在<TABLE>與<TD>中可以同用，產(chǎn)生不同效果。
◆ 3>文字 主題文字: <!-- 主題文字(開始) --><FONT style="COLOR: #EF598C; FILTER: glow(color=#F7D75A); FONT-FAMILY: 華文彩云; FONT-SIZE: 40pt; LINE-HEIGHT: 150%; WIDTH: 100%"><B>童 話</B></FONT><!-- 主題文字(結(jié)束) --> 相關(guān)參數(shù)解說： COLOR: #EF598C 文字顏色 FILTER: glow(color=#F7D75A) 發(fā)光顏色 FONT-FAMILY: 華文彩云 文字字體 FONT-SIZE: 40pt 文字大小 LINE-HEIGHT: 150% 區(qū)域的高度 WIDTH: 100% 文字區(qū)域的寬度 注明：主題文字是用CSS濾鏡實現(xiàn)的發(fā)光字效果與css語法和html語法的編寫上有所區(qū)別，有關(guān)CSS濾鏡效果將在以后的教程中作詳細的說明。 <!-- 文字1(開始) --><font face=宋體 size=2 color=#DE3C73>忘了有多久<br>再沒聽到<br>你對我說你最愛的故事</font><!-- 文字1(結(jié)束) --> <!-- 簽名文字(開始) --><font face=宋體 size=2 color=#DE3C73>音樂:童話/光良<br><br>編緝:雪夜寒星<br><br></font><!-- 簽名文字(結(jié)束) --> 相關(guān)參數(shù)解說： face=宋體 字體 size=2 文字大小 color=#DE3C73 文字顏色
◆ 4>圖片 實例中，分隔線、圖片和裝飾圖都是應(yīng)用的圖片標簽（廢話，都是圖片當然用圖片標簽），下面以內(nèi)容圖片做參照說明： <!-- 圖片1(開始) --><IMG src="http://cry.shidabbs.com/web/css/bbsjc/images/pic00.jpg" width="260" height="377" border="0"><!-- 圖片1(結(jié)束) --> 相關(guān)參數(shù)解說： src="pic00.jpg" 圖片連接地址 width="260" 圖片寬 height="377" 圖片高
◆ 5>音樂 <!-- 音樂(開始) --><bgsound src="http://cry.shidabbs.com/web/css/bbsjc/images/tonghua.wma" loop=3><!-- 音樂(結(jié)束) --> <BGSOUND> 是用以插入背景音樂，但只適用於 IE，其參數(shù)設(shè)定不多。 相關(guān)參數(shù)解說： src="your.mid" 設(shè)定 midi 檔案及路徑，可以是相對或絕對。 autostart=true 是否在音樂檔傳完之後，就自動播放音樂。true 是，false 否 (內(nèi)定值)。 loop=infinite 是否自動反覆播放。LOOP=2 表示重復(fù)兩次，Infinite 表示重復(fù)多次。
◆ 6>總結(jié) 除以上所說明的代碼以外實例還用到了一個排版標記<br>，該標記稱為換行標記。作用：令字、畫、表格等顯示于下一行。 關(guān)與<!-- 以下部分圖片和文字為重復(fù)使用相同代碼(只是更換了圖片地址和文字) -->注釋部分，大家可以先編緝設(shè)定好一張圖片和所配文字的代碼，由于其它圖片和文字所用到的效果相同，所以只用復(fù)制粘帖多次，把相應(yīng)的圖片和文字進行更換就可以了。 |
