網頁制作表格化繁為簡之應用例談

官玉華

[摘 要] 網頁制作課程是中職學校的計算機應用專業的必修課程之一。其中，用表格技術來定制網頁結構是其中最基礎、最快捷的方法之一。在實際的教學過程中，怎樣讓學生快速掌握用表格布局網頁結構的方法，是培養學生學習興趣，提升學習效率的一個關鍵階段。

[關 鍵 詞] 網頁制作；布局結構；表格；嵌套表格

[中圖分類號] G712 [文獻標志碼] A [文章編號] 2096-0603（2018）09-0140-02

在中職學校網頁制作課程教學中，表格布局技術是最常用、最簡單的布局技術之一。如何幫助學生更快地理解表格以及怎樣用表格布局網頁結構，是學好網頁制作課程的基礎。

筆者多年從事網頁制作課程的教學工作，通過指導學生將網頁布局結構有效分解，化整為零，有利于學生更快更精準地設置網頁布局結構，從而實現網頁高效開發。

一、取大優先

什么是取大優先？就是指在分析網頁效果圖中，能夠將效果圖中的個體對象或若干對象作整體處理的都優先作整體考慮，不宜做更細的分解。

（一）大框架、大格局中的取大優先

確定網頁大框架（外表格）的操作要點：將較為復雜的區域，先看作一個整體，將其看成是表格內的某一行內容。

下面以T-1圖“清華大學數字出版社網頁”為例分析。

通過分析圖片素材信息，我們不難發現“網頁頭部”由兩幅圖構成。我們先將其看作一個整體，置于大框架中第一行的內部；緊接著是一幅banner廣告，它是一個整體，因此，將其置為第二行；再下來是“當前位置”的文字，由于它與下方的網頁正文內容部分有明顯獨立的特點，因此，也適合將其設置為一行來處理，成為第三行；接著是網頁的“主體文字區域”，我們必須將其先看作是一個整體，置為一行；效果圖最后是“頁腳區（版權區域）”，它也是網頁結構中的一個獨立個性，因此也將其置為一行。

經上分析，本例的外框架表格（5行1列）如T-2圖所示：

（二）局部區域的取大優先

依然以“清華大學數字出版社”為例，其中“正文部分”是該網頁中結構最復雜的整體區域，如下T-3圖所示：

從上圖分析可見：（1）左、中、右之間有間隔/分隔；（2）左、右兩塊的背景顏色、圖文處理與中間區域相對不同。因此，我們將該區域分解成三大塊。操作：將第三行拆分成三列，如T-4圖所示。

二、能連不散

所謂能連不散，是指在實際操作中能夠在某行或某列內直接布局若干個對象，我們建議不再細分（拆分或嵌套）表格，直接置于其中某行或某列。

比如“T-1圖”的logo區域由兩幅圖組成，由于可以將兩幅圖直接放在第一行完成logo區域的內容布局，因此不必將該行拆分成兩列去布局這兩個圖片對象。

三、兼顧直觀

兼顧直觀，是指操作上始終圍繞網頁的效果，如內外邊距、對象對齊方式、字體顏色、字體大小、背景圖像等綜合考慮設置周全。

還是以T-3圖為例，其左側區域的背景色是灰色，但是這個灰色背景并沒有充斥該區域的全部，因此，考慮到該區域的背景色并不完滿，我們就可以兼顧這個特點進一步分析該區域的處理：要么是拆分成兩行，第一行設置背景色為灰；要么就要嵌套表格一行一列，并設置背景色為灰。

為了兼顧網頁中各個區域的顯示效果，往往需要嵌套表格以方便獨立設置效果，而不受彼此牽連，影響布局。

本例最終布局效果如圖T-5所示：

通過網頁化繁為簡的應用過程，我們知道定制大框架、內部框架（嵌套表格）既方便將網頁的不同區域獨立出來，又容易實現為不同區域設置各自效果的操作，最終使復雜的網頁結構變得更加清晰、簡潔，能激發學生對網頁制作課程更大的學習興趣和創造性。

參考文獻：

朱英哲，張力.Dreamweaver網頁制作[M].武漢大學出版社，2012.