［論壇音畫制作入門］第二講:?讀懂表格代碼

清風(fēng)@明月 2010-05-08

展開全文

［論壇音畫制作入門］第二講: 讀懂表格代碼

一：表格代碼的基本結(jié)構(gòu)：
1:功能結(jié)構(gòu)
      <功能參數(shù)><分表參數(shù)>內(nèi)容<分表結(jié)束><功能結(jié)束>
2:代碼結(jié)構(gòu)
   結(jié)構(gòu)1(簡單的表格):
<TABLE width=寬度 height=高度><TD>顯示內(nèi)容</td></TABLE>

二、實(shí)例分析:
一個(gè)要在論壇里寬屏顯示圖片的代碼：
<table style="LEFT: -220px; POSITION: relative; TOP: 100px" align=center border="0" bordercolor=#ff0000 cellpadding="0" cellspacing="0" width="1000" height="440" bgcolor=#0000ff background="http://ai./uu_0912_4/xlfcd_15_2_df8bdca95909ddd.jpg">
<tr>
<td>　</td>
</tr>
</table>
　這個(gè)代碼說明了什么呢？首先我們先簡化一下如下：
<table>
<tr>
<td>　</td>
</tr>
</table>
1、結(jié)構(gòu)標(biāo)簽解釋：
        從<table>開始到</table>結(jié)束。告訴電腦我這里有一個(gè)表格。從<tr>開媽到</tr>結(jié)束，告訴電腦在這個(gè)表格中有一行表單。從<td>開始到</td>結(jié)束，告訴電腦在這一行表單中有一列表單。這個(gè)看懂了吧，這樣你對(duì)這段代碼便有了宏觀的把握，不至于擾亂思路。
這是一個(gè)最基本的表格代碼，這是一個(gè)組合，<table>表格一般不會(huì)單獨(dú)出現(xiàn),<tr><td></td></tr>這是一個(gè)單元格，如果沒有單元格的代碼，在許多網(wǎng)頁中，表格參數(shù)也就失效不顯示效果了。
        參數(shù)：上面的代碼沒有任何參數(shù)，那么，它的參數(shù)就全部是默認(rèn)的了，在軟件中就是軟件默認(rèn)的參數(shù)，在網(wǎng)頁中，就是網(wǎng)頁的默認(rèn)參數(shù)。實(shí)例的表格參數(shù)如下：
2、基本參數(shù)解釋：
align=center      align= 是定義表格內(nèi)容的顯示位置,align=center:是居中 align=left:是左對(duì)齊 align=right:是右對(duì)齊
border="0" cellpadding="0" cellspacing="0"   這是表格的顯示效果，依次為“邊寬”、“單元格間距”、“單元格邊距”，這里設(shè)置為0像素，就不會(huì)有任何表格框的顯示，在一般音畫中可省略這些代碼，因?yàn)槟J(rèn)的情況下，表格是不顯示框架的。在許多有邊框的祝福音畫中，利用這些參數(shù)，合成邊框效果。
bordercolor=#ff0000    定義表格邊的顏色為紅色。
width="1000"           定義了這個(gè)表格的寬度為1000像素。
height="440"           定義了這個(gè)表格的高度為440像素。
bgcolor=#0000ff        定義表格的背景顏色為藍(lán)色。
background="背景的地址">
background="http://ai./uu_0912_4/xlfcd_15_2_df8bdca95909ddd.jpg">      這定義了這個(gè)表格的背景用圖片顯示，網(wǎng)址是：http://ai./uu_0912_4/xlfcd_15_2_df8bdca95909ddd.jpg 地址的引號(hào)也可省略。
3、風(fēng)格參數(shù)解釋：
這部分是表格的風(fēng)格特性參數(shù)，style="" 這是風(fēng)格參數(shù)的格式，引號(hào)內(nèi)是參數(shù)內(nèi)容。參數(shù)內(nèi)容：注意：有多個(gè)參數(shù)時(shí)，每個(gè)參數(shù)之間要用;號(hào)隔開。
本例中以下內(nèi)容便是風(fēng)格參數(shù)：
style="LEFT: -220px; POSITION: relative; TOP: 100px"
LEFT: -220px          表示這個(gè)表格，要在母表格的基準(zhǔn)上向左移動(dòng)220個(gè)像素。在論壇中發(fā)音畫，經(jīng)常用這個(gè)參數(shù)，因?yàn)檎搲l(fā)的帖子內(nèi)容，本身在論壇網(wǎng)頁軟件的一個(gè)表格中，如果不用這個(gè)參數(shù)，超過論壇帖子表格寬度的圖片等內(nèi)容便不能全部顯示了。至于移動(dòng)多少，這和你所在的論壇的左邊條寬度有關(guān)，發(fā)帖子時(shí)，要進(jìn)行不斷的修改，才能達(dá)到圖片等剛好能全屏顯示。注意：你的圖片一般不要超過1000PX，超過了，無論你怎么調(diào)參數(shù)都不會(huì)全屏顯示你的圖片了。除非你的顯示器屏幕特別大，都能把顯示格式選擇為2048x1536。
POSITION: relative   表示這個(gè)表格和母表格的坐標(biāo)關(guān)系，relative 是相對(duì)關(guān)系，表示本表格的所有參數(shù)坐標(biāo)是以母表格為基準(zhǔn)坐標(biāo)的。absolute 是絕對(duì)關(guān)系，表示本表格的所有參數(shù)坐標(biāo)是以總網(wǎng)頁為基準(zhǔn)坐標(biāo)的。
TOP: 100px         表示這個(gè)表格距離頂部的像素距離。這個(gè)參數(shù)的具體效果和上一個(gè)坐標(biāo)關(guān)系的確定有關(guān)，好好想想，能明白了吧。
另外,風(fēng)格參數(shù)等不只可用在表格，也可用在其它標(biāo)簽中，例如：
<tr>
<td style="LEFT: -220px; POSITION: relative; TOP: 100px" border="0" cellpadding="0" cellspacing="0" width="1000" height="440" background="http://ai./uu_0912_4/xlfcd_15_2_df8bdca95909ddd.jpg"></td>
</tr>
三：注意事項(xiàng):
1:數(shù)據(jù)的分配要準(zhǔn)確:
如果你將一個(gè)總表格分為多個(gè)單表格來處理,就要定義每個(gè)單表格的長和寬度.每個(gè)單表格加起來的總長和總寬要和總表格一致.
例1:總寬是200 總高是60 左右分 100x60+100x60=200x60 就和總寬高一樣
<table width=200 height=60><td width=100 height=60>我是芳草</td><td width=100 height=60>我是明月</td></table>
例2:總寬是200 總高是60 上下分 200x30+200x30=200x60 就和總寬高還是一樣
<table width=200 height=60><tr><td width=200 height=30>我是星空</td></tr><tr><td width=200 height=30>我是明月</td></tr></table>
2:固定表格數(shù)據(jù)并不是真的完全固定,會(huì)隨著內(nèi)容的大小和多少來自動(dòng)調(diào)整寬高.
例1:我們固定總寬為300 總高為30.
<table width=300 height=60 bgcolor=FFFF00><td><FONT color=FF0000 size=7>心靈芳草個(gè)歡迎你</FONT></td></table>
我們看到實(shí)際將表格擠高了.超過我們的規(guī)定,我們一定要記住這一點(diǎn).要根據(jù)實(shí)際內(nèi)容的寬高來調(diào)整表格的大小.才能達(dá)到理想的效果.
四、代碼的簡化：
在音畫中，表格一般用來顯示圖片，也就是說只要能按我的要求顯示圖片就可以了，所以，有許多代碼并不是必須的，多余的代碼可以省略。從本例看實(shí)際上只是要用背景方式在表格中顯示圖片，所以代碼可以簡化為如下：
<table style="LEFT: -220px; POSITION: relative; TOP: 100px" width="1000" height="440" background="http://ai./uu_0912_4/xlfcd_15_2_df8bdca95909ddd.jpg">
<tr>
<td>　</td>
</tr>
</table>
其它的對(duì)齊、邊框，格距，格邊距，背景色等都是不需要的了。

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來自：清風(fēng)@明月 > 《我的圖書館》

舉報(bào)/認(rèn)領(lǐng)