表格製作完全版

表格製作完全版表格組合不是一個輕而易舉的技術，所以，我們極少見到論壇各種精美的帖子會用到它，但表格組合技術是一個很有趣的技術，掌握它具有一定的挑戰性，所以，願意花一節的篇幅專門講它，如果你覺得不需要，可以跳過這一節。表格組合更多的用於布局，當然，也有少數情形需要用到它。本節不想探討什麼時候用到表格組合，只從實現手段方面進行討論。先講上下排列的表格組合。先看例子：表一表二要順利地實現N張表格的縱向組合，至少有三種方法：一是，令參與排列的表格都居中（即在<table>里加入align=center），上例就是；二是，不定義表格的對齊屬性，即<table>里沒有align屬性，這樣給出的N張表格代碼，它們都是上下排列的，表格的自身位置全是左對齊（但若定義了align=left，情形不是這樣，大家可以在FP或DW里試試），例子請看錶三和表四；三是把參與排列的表格放在一張表格里，這張作為容器的外表寬度不限，且裡面的表格也不設置align屬性——大家都看得出來，其實，它只是第二種實現方法的擴展，其目的是為了讓參與排列的表格隨心所欲地設置水平對齊，換句話說，外表的作用是為了實現自定義的對齊方式，示例為表五和表六。第三種方法雖然源於第二種，但使用它是個絕好的主意，這個，在使用表格排版過程中，相信大家會慢慢體會到的。表三表四↓我叫表五表六右對齊 表五表六下面看水平排列的表格表格的水平排列更需要精確地計算參與排列的表格的寬度，它們的寬度的總和不能超過其所屬容器所能裝載的寬度，表格和其他元素的混排情形下更應該嚴格考慮。一個好的習慣是，還是用一張表格來規範並列組合的表格，這張表格，最好寬度設置為100%，然後將裡面要並列組合的表格通通設置為左對齊（但注意：它們的寬度總和不能超過可顯示的寬度）。試看以下兩個示例：外表寬度為100% align=leftwidth_=150align=leftwidth_=150align=leftwidth_=150外表居中，寬度為450 align=leftwidth_=150align=centerwidth_=150align=rightwidth_=150本節從某個角度分析了表格的組合問題，它是一個主要用於排版的技術，要求計算精確，並不十分適用於論壇。但如果你是一個不怕挑戰的人，那麼，本節所討論的內容或許對你來說還遠遠不夠，好在聰明的你會自己去嘗試，本節若能起到拋磚引玉的作用就已經達到目的了。謝謝閱讀！多單元格表格在頁面布局方面，比起表格組合，多單元格更能靈活和方便地進行控制，為此，使用多單元格布局Web頁或帖子是一個不錯的習慣。我們前面提過，表格代碼里，有多少組<tr>...</tr>，表格就有行，有多少組<td>...</td>，表格就有多少列。為此，在代碼里，我們將根據需要利用表格代碼里的<tr><td>...</td></tr>來創建單元格。我們先來製作一個1×3即一行三列的表格:代碼：<table border=1 cellpadding=0 cellspacing=0 width_=450 align=center><tbody><tr><td align=center>單元格一（即列1）</td><td align=center>單元格二（即列2）</td><td align=center>單元格三（即列3）</td></tr></tbody></table>效果：（1×3表格）.單元格一（即列1） 單元格二（即列2） 單元格三（即列3）在上述示例里，只有一組<tr>，故而表格只有一行，<tr>...</tr>里有三組td，因此，表格有三列，這就是所謂的1×3表格。現在我們把代碼擴展一下，即增加一組tr，請看代碼和效果：代碼：<table border=1 cellpadding=0 cellspacing=0 width_=450 align=center><tbody><tr><td align=center>單元格一（即列1）</td><td align=center>單元格二（即列2）</td><td align=center>單元格三（即列3）</td></tr><tr><td align=center>單元格四（即列4）</td><td align=center>單元格五（即列5）</td><td align=center>單元格六（即列6）</td></tr></tbody></table>效果：（2×3表格）.單元格一（即列1） 單元格二（即列2） 單元格三（即列3）單元格四（即列4） 單元格五（即列5） 單元格六（即列6）我們可以定義<td>里的寬度和高度值，從而讓表格以我們的預設在其所在區域進行布局，以便達到有效的排版目的。在多行多列的表格里，當某一列的第一個單元格已經定義了寬度，那麼，往下各單元格的寬度將跟它一致，如果同一列的所有單元格都設置了寬度，該列的最終寬度以width值最大的那個單元格為標準，——可見，我們只需設置某列的第一個單元格的寬度即可，其他同列的<td>不必給出width屬性，這樣一可以節省代碼二不會出現無效設置；表格的行的高度情形也是一樣：當定義了某一行頭一個單元格的高度之後，該行其他單元格會自動得到相同的高度值，不必再一一設置<td>的height屬性。盡量減少代碼量總是一個好習慣，一來可以節省空間，二來打開速度也會得到改善——代碼越多，系統處理代碼的時間就越長，同時也更耗可貴的系統資源。我們還應該注意的是，如果不設置<td>的width和height屬性，表格各單元格將根據裡面的內容的佔位情況拓寬自己，表格給各單元格的寬度分配將由系統自動進行，這樣就容易出現不合理的情況，因此，應該根據需要設置單元格的高度和寬度。多單元格表格里一個有趣的問題是單元格合併，其概念與Excel的合併單元格是一致的，只是實現方法不同。在HTML代碼里，我們用colspan屬性合併左右單元格，記作：colspan=數值，「數值」即為需要合併的單元格總數；而rowspan屬性則合併上下單元格，記作：rowspan=數值。讓我們用上面的第二組示例表格來加工一下。先看合併左右的單元格——代碼：<table border=1 cellpadding=0 cellspacing=0 width_=450 align=center><tbody><tr><td align=center colspan=2>1，2單元格合併了</td><td align=center>3</td></tr><tr><td align=center>4</td><td align=center>5</td><td align=center>6</td></tr></tbody></table>效果：.1，2單元格合併了 34 5 6下面是表格的上下單元格合併——代碼：<table border=1 cellpadding=0 cellspacing=0 width_=450 align=center><tbody><tr><td align=center rowspan=2>1,4單元格合併了</td><td align=center>2</td><td align=center>3</td></tr><tr><td align=center>5</td><td align=center>6</td></tr></tbody></table>效果：1,4單元格合併了 2 35 6通過HTML代碼實現單元格的合併略顯抽象一些，你可以研究本示例代碼和第二組代碼（2×3表格）的區別並比較兩組表格的樣式來慢慢領會，要完全掌握這一技術，你還需要親自做些嘗試。最後順便提一下：有些論壇可能不支持表格單元格的合併。表格嵌套論壇所有精美的帖子，幾乎無一例外地都用到表格的嵌套技術，其中的原因，如前所述，論壇中給用戶提供施展身手的餘地十分有限，只有通過表格的修飾，帖子才能既成為獨立的顯示單位，又達到如純完整的Web頁一樣有著自己的裝飾。表格的可分割性和容器特徵在帖子製作中充當著重要的角色，兼管帖子的布局的同時還承載著表達帖子信息元素的重任。作為容器，表格可以往裡放置可以放置的元素。表格也是一個元素，故而表格放在表格里是合理的，因此就有了表格的嵌套。表格的嵌套還可以是另外的形式，那就是，一個表格的單元格里還有表格。不論是哪種形式的嵌套，理論上嵌套的層可以是無窮盡的，但現實中並不會這麼做，我們總是根據需要有限制地使用嵌套，不會沒完沒了。表格嵌套其實也不複雜。如果你能夠獨立用代碼做一張表格（強烈建議練出這樣的本事），那麼，你就可以做一個兩張表格的嵌套，很簡單，把代碼複製一下，粘貼在原代碼的<td>和</td>之間（亦即在「和」的位置）。試看以下代碼和兩個表格的嵌套效果：<table border=1 cellpadding=0 cellspacing=0 width_=450 height=200 align=center><tbody><tr><td>表一<table border=1 cellpadding=0 cellspacing=0 width_=450 height=200 align=center><tbody><tr><td>表二</td></tr></tbody></table></td></tr></tbody></table>效果:.表一 表二從上面的表格效果上看，如果我們把文字「表一」刪除掉，表格的嵌套將是非常完好的。如果再定義邊框大小和顏色、cellpadding和cellspaing為其他值，加上背景色和背景圖，或通過其他手段來修飾，那麼，里表和外表之間，就會出現非常漂亮的邊框，帖子的外框就這麼搞掂了。當然，這是一個細活，你需要做反覆的嘗試，直到效果滿意為止。或許你還需要更多層的嵌套，這就看你的想像力了——實現手段是不難的，因為你已經會了第一層的嵌套，第二層、第三層……第N層，無非就是如此。現在我們來看看多單元格表格中，在單元格是嵌入表格的示例。先看代碼：<table border=1 cellpadding=0 cellspacing=0 width_=450 align=center><tbody><tr><td >單元格一：無表格嵌套 <td><table border=1 bgcolor=#ccc1cc ><tbody><tr><td >我嵌套在單元格二里 </tr></tbody></table></td></tr></tbody></table>以下是效果：.單元格一：無表格嵌套 我嵌套在單元格二里上面的兩個例子里，都將處於外層的表格（即外表）的寬度設置為450個像素，這是由於本頁面的限制。在實際製作中，我們可以充分考慮未來瀏覽者的顯示器的解析度和論壇提供的可顯示寬度來決定取值。好的習慣仍然是取絕對值，因為，你的帖子裡邊的內容寬度非常可能是絕對的，譬如圖片有著自己固定的寬度， Flash影片也是使用絕對的width值，為了不讓正文四周出現太多的空餘，採用絕對值規範外表的寬度是有必要的。當然，還有一個好的做法，那就是，根本不用規定外表的寬度，而是讓裡邊的內容自行撐寬外表，這麼做至少要求我們注意兩個方法的問題：一是，利用cellpadding或border的合理值來讓外表的邊緣顯示外表的既設背景，二是，外表裡面的諸元素的寬度要相對統一。任何一種實現方式都還有其自身的奧妙，不是用語言能夠一一道明的，只有在不斷地實踐中才能逐一領悟和掌握。當今用戶的的顯示器解析度有兩大標準：800×600和1024×768，這兩種解析度下，以動網論壇為例，用戶發帖後帖子可顯示的區域寬度是有區別的。為此，你需要通過嘗試獲知具體寬度，從而製作出的帖子不至於出現瀏覽者不能完整欣賞的現象。過寬的帖子，比如超過510個像素的寬度，解析度設置為800×600的瀏覽者將看不到帖子右邊的內容，而太小的寬度，又可能令帖子顯得小里小氣，也不理想。深入學習表格表格還有一些重要的內容需要徹底弄懂。實際上，這些內容，前面幾節我們已經接觸過，但我們還需要進一步去探討一下。我們先來做個實驗。下面給出一條長度為450個像素的分隔線，然後在分隔線下面放置一張表格，其寬度亦為450個像素：border=1cesllpadding=15cellspacing=8width_=450現在，我們看到，表格的總寬度仍然是450個像素（它沒有超越分隔線），因此，我們可以得出這樣的結論：表格的border、cellpadding和cellspacing雖然都是佔位元素，但它們不會使得表格變得更寬，換一個更生動的說法，表格的這些元素是往裡佔位的，而不是往外佔位。第二個實驗：設定表格的寬度為400個像素，然後在裡面放置一個可視元素，令其寬度為450，看看錶格的總寬度發生了什麼。我們依然用一條長度為450個像素的分隔分做參照。本表格設定寬度為400個像素，但因表格里的分隔線寬度為450個像素，表格的實際顯示寬度發生了變化。現在我們看到，雖然在<table>標籤里設定了width_=400,但表格的總寬度並不是400個像素，而是被表格裡面的那條分隔線的實際寬度（450個像素）撐寬了。你可能會覺得奇怪：為什麼表格總寬度超過了450個像素呢？道理是這樣：表格設置了cellpadding值為10，cellpadding區域是不可放進任何可視內容的。細心比較一下，你將發現，表格寬出的部分正是留空的部分，即表格的單元格襯距。可見，表格裡面的內容會影響到表格的寬度。實際上，如果我們設置好表格裡面的內容的寬度，表格的width值是完全可以不設置的，但這不是一個好的習慣，我們通常仍然需要合理地設置表格的寬度，但必須留意一個問題：表格的總體寬度是否超過了可顯示的範圍。實驗三：設定一個450個像素寬度的表格，表格的邊框、單元格間距和襯距都為實值，該表格有三個單元格，每個單元格設定寬度為150（加起來恰好的450個像素），看看錶格的實際寬度是否發生變化。這個實驗仍然使用450個像素寬度的分隔線作參照。width_=150 width_=150 width_=150上面的表格，我們設置border=1，cellpadding=10，cellspacing=6，三個單元格的寬度均為150個像素，結果是：表格的總體寬度未發生變化。由此我們得出結論：多單元格表格里，只要各單元格的寬度相加起來不超過<table>里的寬度賦值，它們不會因表格邊框、單元格間距和單元格襯距都為實值而撐寬表格。本節通過實驗的方式，從表格的寬度角度剖析了表格的一些深層特徵，估計這些知識和體驗從其他的教程中或許是得不到的。它並不是很抽象，加上黑馬創造的用分隔線做對照標準和耐心的講解，悉心閱讀和比較後，你會很容易掌握的。表格應用示例一本節我舉一個表格嵌套的示例向大家展示帖子的製作過程。以下是本示例的參考代碼，這些代碼得出的是本示例的整體外觀效果，內容需要你自己往裡添加，添加的是此說明和本示例的代碼，純文字。<DIV align=center><table border=1 bordercolor=#363636 cellpadding=20 cellspacing=0 bgcolor=#dd6969 align=center width_=600><tr><td bordercolor=#ff0000><table border=1 bordercolor=#696969 cellpadding=10 cellspacing=0 bgcolor=#aa1212 ><tr><td bordercolor=#aa1212><table border=0 cellpadding=10 cellspacing=0 bgcolor=#ffffff ><tr><td><table border=0 cellpadding=10 cellspacing=0 bgcolor=#dd6969 height=40 align=center><tr><td><p align=center><font face=黑體 size=4 color=#ffcc00>標 題</font></p></td></tr></table><table border=0 cellpadding=0 cellspacing=0 height=0 bgcolor=#ffffff><tr><td></td></tr></table><table border=0 cellpadding=0 cellspacing=10 bgcolor=#393939 height=450 align=center><tr><td valign=top><p><font color=#ffffff>內容</font></p></td></tr></table></td></tr></table></td></tr></table></td></tr></table>.標 題內容如果你還沒有熟悉到一看代碼就明白，你有必要看一下下面的分析。本例有四層表格的嵌套，總共使用了六張表格。最裡層是三張表格上下排列，屬表格組合。我們從外往裡分析代碼。最外層的表格，我們設置邊框值為1並定義其顏色，這樣，配合<td>的邊框顏色能夠起到外邊緣呈現出立體的感覺。外表的單元格襯距（cellpadding）為20，它恰好形成了帖子外邊框。外表的寬度為600個像素，這是根據本頁面而設置的，你可以在實際使用時更改。第二層表格的原理和外層的差不多，只是，我們更改了各元素的顏色，單元格襯距也調小了，cellpadding賦值為10。第三層表格沒有做太多的設置，我們僅令其背景色為白色、單元格襯距為10，這樣得出一個白色的邊框。第四層表格有三個上下並列組合的表格。第一個用來放帖子的標題；第二個表格只是用於隔開第一個和第三個表格並令之與第三層白色底的表格連為一體，為此它的border、cellpading和cellspacing都需要設置為0，高度則為10（與第三層表格所形成的邊框一致）；第三個表格用於放置帖子的內容，故將其單元格間距設置為10（也可設置單元格襯距），以便讓文字等內容不至於太靠邊。本例帖子里的代碼，黑馬採用了縮退方式編寫，意在讓大家能夠清楚的看到不同的代碼代表不同層的表格，越縮進的代碼越在裡層（非表格代碼和自動換行的除外）。這個示例只是展現一種思路，你完全可以在此基礎上通過其他手段（如添加表格背景圖片、加入動態的圖形和Flash影片等）做得更複雜、更精美一些。表格應用示例二以下是一個作品的框架。出於講解方便，在不改變原貌的情況下對原作品作了些改動。<table border=0 cellpadding=20 cellspacing=0 background="yyr/lvsedw.jpg" align=center><tbody><tr><td><table border=1 cellPadding=20 cellSpacing=6 background=yyr/lvsesb.jpg bordercolorlight=#637236 bordercolordark=blue width_=84% align=center><tbody><tr><td><table border=1 cellPadding=0 cellSpacing=0 background=yyr/lvsesb.jpg bordercolorlight=#637236 bordercolordark=#000000 ><tbody><tr><td><table border=0 cellPadding=8 cellSpacing=8 background=yyr/lvsesb3.jpg ><tbody><tr><td><table border=0 cellPadding=1 cellSpacing=1 background=yyr/lvsesb2.jpg ><tbody><tr><td><table border=0 cellPadding=8 cellSpacing=8 background=yyr/fawnbkgtile2.jpg ><tbody><tr><td><table border=0 cellPadding=1 cellSpacing=1 background=yyr/lvsesb2.jpg ><tbody><tr><td><table background=yyr/lvsedn.jpg width_=350><tbody><tr><td><p align=center>此處放一幅與標題相關的圖片</p><p align=center>標 題</p><p align=center>分隔圖標</p><p align=center>【這裡是正文，由六幅圖和五段詩文組成】</p><p align=center>分隔圖標</p><p align=center>簽 名</p><p align=center>小圖修飾+音樂標籤</p></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table>.此處放一幅與標題相關的圖片標 題分隔圖標【這裡是正文，由六幅圖和五段詩文組成】分隔圖標籤 名小圖修飾+音樂標籤這個作品的框架用了八張嵌套的表格，每一張表格都有背景圖片。其中外表是添加上去的，其作用是替代原來的body區域里的背景圖，而原作品中的兩張用於設置帖子正文處的表格略顯多餘，已經將其刪除，僅保留七張表格。下面給出上面帖子框架的代碼並作簡單的分析。從代碼上看，這並不是一個很複雜的構架，它只是一個多重嵌套的方式。為更能直觀地查看各表格定義了背景圖後的效果.最後給出該帖的核心代碼。你應該發現，裡面又多出了一些表格。是的，它們是簡單的表格，作用僅為規範詩文的居中：每一段詩文使用一個表格，共五個。<DIV align=center><table border=0 cellpadding=20 cellspacing=0 background="yyr/lvsedw.jpg"><tbody><tr><td><table border=1 cellPadding=20 cellSpacing=6 background=yyr/lvsesb.jpg bordercolorlight=blue bordercolordark=blue width_=84% align=center><tbody><tr><td><table border=1 cellPadding=0 cellSpacing=0 background=yyr/lvsesb.jpg bordercolorlight=blue bordercolordark=blue ><tbody><tr><td><table border=0 cellPadding=8 cellSpacing=8 background=yyr/lvsesb3.jpg ><tbody><tr><td><table border=0 cellPadding=1 cellSpacing=1 background=yyr/lvsesb2.jpg ><tbody><tr><td><table border=0 cellPadding=8 cellSpacing=8 background=yyr/fawnbkgtile2.jpg ><tbody><tr><td><table border=0 cellPadding=1 cellSpacing=1 background=yyr/lvsesb2.jpg ><tbody><tr><td><table background=yyr/lvsedn.jpg ><tbody><tr><td><p align=center><img border=0 src=圖片地址 width_=340 height=224></p><p align=center><FONT style=" COLOR: #60A000; FILTER: shadow(color=#000000); FONT-FAMILY: 華文彩雲; FONT-SIZE: 32pt; WIDTH: 100%"><B>金鑰匙</B></FONT></p><p align=center><img src=圖片地址></p><p align=center><img src=圖片地址 border=0></p><table border=0 align=center><tbody><tr><td><p><FONT style="COLOR: #60A000; FILTER: shadow(color=#000000); FONT-FAMILY: 宋體; FONT-SIZE: 16pt; WIDTH: 100%"><B>文字</FONT></p></td></tr></tbody></table><p align=center><img src=圖片地址 border=0></p><table border=0 align=center><tbody><tr><td><p><FONT style="COLOR: #60A000; FILTER: shadow(color=#000000); FONT-FAMILY: 宋體; FONT-SIZE: 16pt; WIDTH: 100%"><B>文字</B></FONT></p></td></tr></tbody></table><p align=center><img src=圖片地址 border=0></p><table border=0 align=center><tbody><tr><td><p><FONT style="COLOR: #60A000; FILTER: shadow(color=#000000); FONT-FAMILY: 宋體; FONT-SIZE: 16pt; WIDTH: 100%"><B>文字</B></FONT></p></td></tr></tbody></table><p align=center><img src=圖片地址 border=0></p><table border=0 align=center><tbody><tr><td><p><FONT style="COLOR: #60A000; FILTER: shadow(color=#000000); FONT-FAMILY: 宋體; FONT-SIZE: 16pt; WIDTH: 100%"><B>文字</B></FONT></p></td></tr></tbody></table><p align=center><img src=圖片地址 border=0></p><table border=0 align=center><tbody><tr><td><p><FONT style="COLOR: #60A000; FILTER: shadow(color=#000000); FONT-FAMILY: 宋體; FONT-SIZE: 16pt; WIDTH: 100%"><B>文字</B></FONT></p></td></tr></tbody></table><p align=center><img src=圖片地址 border=0></p><p align=center><img src=圖片地址 border=0></p><p align=center><FONT style="COLOR: #60A000; FILTER: shadow(color=#000000); FONT-FAMILY: 華文彩雲; FONT-SIZE: 20pt; WIDTH: 100%"><B>文:自己改提下<BR>編輯:金鑰匙</B></FONT></p><p align=center><IMG src=圖片地址 border=0><img src=圖片地址 border=0><img src=圖片地址 border=0><embed src=http://www.ewen.cc/res/mp3/cd/xiuxian/Track3.wma autostart=true loop=true hidden=true type=audio/x-ms-wma></p></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table>.

金鑰匙

文字

文字

文字

文字

文字

文:自己改提下編輯:金鑰匙

應該注意的是，表格要設置高度和寬度，且高、寬應與用作背景圖的高、寬相一致，表格的border、cellpadding和cellspacing等值最好設置為 0（原因：為了使圖片完美顯示）。Flash影片也必須設置高度和寬度，設置為多高多寬應根據實際顯示需要而定，但絕對不能大於表格的高度和寬度。表格應用示例三這是很常見的一種做帖手段，其實現思路是：給表格加入一個背景圖片，這樣一來，表格仍然是可以裝載佔位元素的容器，因此，我們給已經有了背景圖片的表格載入一個Flash就成為可能。通過查看圖片的屬性（右擊→屬性），我們可以看到圖片的尺寸為490×605，由此，我們將定義表格的寬為490，高為605。代碼如下：<table border=0 cellpadding=0 cellspacing=0 width_=540 height=540 background=圖片地址 align=center><tbody><tr><td>此處為載入Flash代碼</td></tr></tbody></table>.

Flash是雨，我們將把它們放置在相應的位置。影片底色是純白的，我們通過定義可以令底色消失，代碼是wmode="transparent"。以下是Flash代碼舉例：<EMBED src=Flash地址 pluginspage="http://www.macromedia.com/go/getflashplayer" width_=數值 height=數值 type=application/x-shockwave-flash wmode="transparent" quality="high">OK，現在來看看效果:.

在上例中，我們令表格內部佔位元素的垂直和水平對齊分別為底部對齊、居中，Flash的寬度為490、高度為305。這些，都是根據需要而定義的，可以通過反覆嘗試最後確定。以下是參考代碼：<DIV align=center><table border=3 cellpadding=5 cellspacing=5 width_=490 height=605 background="http://image30.360doc.com/DownloadImg/2011/06/1217/12774274_11.jpg" align=center><tbody><tr><td align=center valign=bottom><EMBED src="https://www.getit01.com/getimg_360.php?url=http://imgfree.21cn.com/free/flash/6.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" width_=490 height=605 type=application/x-shockwave-flash wmode="transparent" quality="high"></td></tr></tbody></table>非常規排版技術在教程的前面我們提到過，論壇里用於顯示用戶的帖子的區域是有限的，在同一顯示解析度的機器里，用戶的帖子可顯示的寬度比該解析度的寬度要少一些。而有一些帖子，出於種種原因，我們可能不滿足於受限的顯示寬度，為此，有必要採用非常規排版技術，其目的是突破顯示寬度限制。這就是所謂的「全屏技術」，即，令帖子以全屏寬度顯示。在HTML代碼中，通過「層」技術，我們非常容易實現全屏顯示某一單元（帖子可視作一個單元）。「層」具有重疊性，即，在一個已經存在的佔位單元里，通過使用「層」的疊加，我們還可以在其上面再放置一個或多個單元。其結果是，多個單元的疊加，整體效果就是立體的，以下頁面的左邊的第二幅圖就是通過使用「層」技術在圖片之上疊加了一個透明的表格，從而導致圖片不能通過正常的右擊進行複製：http://www.gxblk.com/pc/no1/tmtable.htm查看上面黑馬提供的頁面，你或許還不能明白「全屏」技術的實現原理，但你應該理解「層」的疊加概念。當前較高版本的DW已經引入了「層」的概念，用過DW的朋友理解起來可能比較容易，為了讓新手也能夠很快接受這個概念，黑馬舉個不十分確切的例子，對「層」再加以說明：築路，通常鋪上一層較大的石頭，這是第一層，壓緊後再鋪上碎石，第是第二層，往後有若干層。所有的層是重疊在一起的。這些層，就是我們要用於HTML帖子里。我們知道，用img加入一幅圖片，這幅圖片占的位置不可以再加入任何內容了，但通過「層」的疊加，我們就能夠讓其他內容浮於圖片的上方，黑馬在線聽歌台的那個有「52」標誌的Gif圖片，就是這樣放上去的。論壇都有固定的結構，它規定用戶發帖所能顯示的地方是被限制好的。包含有發帖人頭像等信息的左邊欄，它已經有了佔位元素，而它恰好是佔去了我們想利用的顯示帖子的寬度。那麼，通過使用「層」技術，我們將帖子的左邊部分往它那裡疊加，加上正常可顯示的部分，帖子就實現了「全屏」寬度顯示了。同樣的道理，我們還可以讓帖子往上或往下一點，甚至，如果你願意，你還可以讓帖子的頭部把論壇的功能菜單全部遮攔住（不建議這麼做）！不知道道理講明了沒有？呵呵，現在，還是來看看實例吧。以下兩個表格，都以img方式裝載有相同的圖片，不同的是，第一張表格我們用了「層」技術，令圖片不完全在表格裡面；第二張表格則是正常載入圖片的，不作任何處理。

在上例中，第一張表格里，我們在圖片代碼前後用了如下代碼：這段代碼就是實現圖片部分超越表格框架亦即突破常規位置的關鍵。其中，id很重要，是系統識別哪個單元的重要標誌，命名時一定不要與其他的id重複；left表示要移位的單元左邊起始位置， top則是指上部開始位置，用負數值表示往左、往上移位，正數則往右、往下移位； width和 height其實指「層」的高度和寬度，通常與要移位的元素的寬度和高度相一致（論壇中可以省略width和height值，因為我們採用的是嵌入式使用「層」，「層」會自動獲取寬與高。複雜的HTML頁面不建議省略）； position表明疊加的方式，有relative（相對位置疊加）和absolute（絕對位置疊加），使用前者的話，「層」所疊加的位置不因不同的解析度而改變，即它的位置是固定的，使用絕對疊加則相反，會因解析度的不同而發生位置變化，比如你想讓一隻蜜蜂採花粉，那麼，如果你使用了相對位置，不同解析度下打開你的帖子，它都是在花朵上採花粉的，但如果用了絕對位置，800×600解析度下它是在花朵上採花粉，而1024×768解析度下，蜜蜂可能是在石頭上採的； z-index標識「層」在所有層中的位置，因為論壇有不可預知性，所以，好的習慣是把它賦值很大，以便保證它是在最上方的。這段「層」代碼還可嵌入到其他的代碼中去。比如表格，我們可以在<table>裡面插入它，表格仍然給出id，樣式如下：<table border=1 style=";left:-50px;top:-10px;z-index:99" ...>...</table>上述代碼式樣里黑馬沒有定義寬度和高度——剛才說過，可以不定義的。在這裡，「層」的寬度與高度實際上就是表格的實際寬度與高度，你也可以定義。移位技術是實現「全屏」顯示帖子技術的實現手段，通過上面的學習，如果已經掌握了「移位」帖子的方法，那麼，在實踐中多多嘗試，掌握好精細的移位尺寸（單位為像素，即代碼中的px），你就能夠在需要的時候得心應手地讓你的帖子得以完美地呈現出來。使用「全屏」技術應該注意的事項：一、盡量使用相對疊加位置方式以確保不同解析度下帖子的移位都是按照預定義的方式進行；二、注意計算尺寸，儘力避免帖子將功能按鈕、菜單和相應應該顯示的項目遮攔住；三、編輯帖子之前記得將論壇編輯框下邊的「自動修正」功能取消，否則有可能所做的移位設置不起作用。做帖的一些好習慣一、選擇一款好用的HTML編輯器儘管你可能對代碼非常熟練，仍然建議使用HTML編輯器，一方面，可以事半功倍、減少代碼的出錯機率，另一方面，可以邊編寫帖子邊查看效果以便隨時更改不如意的地方。編輯程序的版本不要太低，比如，FrontPage2000儘管很優秀，但它未集成代碼編輯環境下的自動顯示和補齊代碼功能，對一些標籤的代碼自動調整也常常令帖子面目全非，而FrontPage2003則是相當不錯的，功能齊全，並有代碼標錯功能（以非常顯眼的顏色將有錯誤的代碼區域標識出來），非常貼切用戶。DreamWaver的新版本則整合了圖片處理功能，比如，用一張圖片做表格的背景，可以通過動動滑鼠、輸入數字，輕而易舉地將此圖片割開（當然你需要上傳被割開的圖片才能在帖子中使用），它還集成有圖片的簡單處理，且，如果安裝了與之配套的兄弟軟體，它就更加十全十美了。總之，編輯器不必安裝太多，有一款用得上手的就行了。二、如果習慣了在線編寫帖子，請編寫完一組完整的代碼後再切換到Design編輯環境預覽，否則論壇系統的自動填充功能會將你的代碼弄得亂七八糟，極可能難以挽救。對於需要移位的帖子，在編寫時先不要使用移位代碼，待帖子編寫完畢並檢查無誤了，再加入移位代碼。有音頻的影視、音樂代碼也盡量在最後再放上去，因為，一旦放了音樂之類的代碼上去，如果多次切換到Design環境，音樂會同時播放，重唱一樣的音樂會弄得你難以適應。三、表格的居中，盡量不要使用其他的代碼來令其對齊，而是使用表格的對齊屬性代碼來完成，在table代碼里使用align=對齊數值。這是一個好習慣，也會減少廢碼的出現——當使用p、div或center之類的標籤對齊表格時，系統通常會在代碼里生成大量的其他代碼，有時根本無法人為地控制。單一列的表格，也沒有必要給td賦寬度值，因為那是沒有必要的，它總要佔滿表格的寬度（前提是表格已經定義的寬度）。四、做帖時，對帖子所使用到的圖片尺寸盡量做到心中有數。比如，你要用表格背景圖片方式發圖，那麼，表格的高與寬必須與圖片的尺寸一致。而Flash影片、WMP和RP的播放界面尺寸，也應該在設置的時候考慮到表格的總體寬度。五、沒有影像的音頻文件，其播放界面不要設置太大的高度，在embed標籤里，WMP的高度45個象素最合適，RP在80上下就可以了。當需要隱藏播放界面時，請最好不用將width和height設置為0，因為那不是真正的隱藏，好的方法是設置hidden值為true。六、當使用img形式發圖時，你得根據論壇的情況設置裝載有圖片的表格的寬度。多數論壇會設置了一組JS代碼來處理圖片的寬度，即當圖片的寬度大於300個象素時，圖片就以300個象素顯示。有時，一個論壇當時可能是這樣的設置，往後又是那樣的設置，也需要我們充分考慮到。七、永遠是在有了主題和準備好素材後再做帖子，千萬彆強迫自己做帖。八、不要老依賴別人的帖子代碼，因為，這樣的話，你的創作能力永遠得不到發揮，你只是沿著別人走過的路再走一回而已。九、在自己的硬碟里建立一個文件夾，此文件夾下又建立若干子文件夾，當發現有好的素材，就分門別類地保存好，有條件的，能用得著的就上傳，並用一個文件記錄好它們的URL，甚至，為了更方便，不妨在本地硬碟建立一個HTML頁面，用絕對路徑顯示這些資源的真實面目。十、對於那些優秀的已經發布了的帖子要有個備份，建議修改一下代碼，以相對路徑將所有資源保存在本地磁碟，這樣，當帖子借用的資源鏈接失效後，你仍然有補救的餘地。.
推薦閱讀：