官玉華

[摘 要] 網(wǎng)頁制作課程是中職學(xué)校的計(jì)算機(jī)應(yīng)用專業(yè)的必修課程之一。其中，用表格技術(shù)來定制網(wǎng)頁結(jié)構(gòu)是其中最基礎(chǔ)、最快捷的方法之一。在實(shí)際的教學(xué)過程中，怎樣讓學(xué)生快速掌握用表格布局網(wǎng)頁結(jié)構(gòu)的方法，是培養(yǎng)學(xué)生學(xué)習(xí)興趣，提升學(xué)習(xí)效率的一個(gè)關(guān)鍵階段。

[關(guān) 鍵 詞] 網(wǎng)頁制作；布局結(jié)構(gòu)；表格；嵌套表格

[中圖分類號(hào)] G712 [文獻(xiàn)標(biāo)志碼] A [文章編號(hào)] 2096-0603（2018）09-0140-02

在中職學(xué)校網(wǎng)頁制作課程教學(xué)中，表格布局技術(shù)是最常用、最簡單的布局技術(shù)之一。如何幫助學(xué)生更快地理解表格以及怎樣用表格布局網(wǎng)頁結(jié)構(gòu)，是學(xué)好網(wǎng)頁制作課程的基礎(chǔ)。

筆者多年從事網(wǎng)頁制作課程的教學(xué)工作，通過指導(dǎo)學(xué)生將網(wǎng)頁布局結(jié)構(gòu)有效分解，化整為零，有利于學(xué)生更快更精準(zhǔn)地設(shè)置網(wǎng)頁布局結(jié)構(gòu)，從而實(shí)現(xiàn)網(wǎng)頁高效開發(fā)。

一、取大優(yōu)先

什么是取大優(yōu)先？就是指在分析網(wǎng)頁效果圖中，能夠?qū)⑿Ч麍D中的個(gè)體對(duì)象或若干對(duì)象作整體處理的都優(yōu)先作整體考慮，不宜做更細(xì)的分解。

（一）大框架、大格局中的取大優(yōu)先

確定網(wǎng)頁大框架（外表格）的操作要點(diǎn)：將較為復(fù)雜的區(qū)域，先看作一個(gè)整體，將其看成是表格內(nèi)的某一行內(nèi)容。

下面以T-1圖“清華大學(xué)數(shù)字出版社網(wǎng)頁”為例分析。

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

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

（二）局部區(qū)域的取大優(yōu)先

依然以“清華大學(xué)數(shù)字出版社”為例，其中“正文部分”是該網(wǎng)頁中結(jié)構(gòu)最復(fù)雜的整體區(qū)域，如下T-3圖所示：

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

二、能連不散

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

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

三、兼顧直觀

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

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

為了兼顧網(wǎng)頁中各個(gè)區(qū)域的顯示效果，往往需要嵌套表格以方便獨(dú)立設(shè)置效果，而不受彼此牽連，影響布局。

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

通過網(wǎng)頁化繁為簡的應(yīng)用過程，我們知道定制大框架、內(nèi)部框架（嵌套表格）既方便將網(wǎng)頁的不同區(qū)域獨(dú)立出來，又容易實(shí)現(xiàn)為不同區(qū)域設(shè)置各自效果的操作，最終使復(fù)雜的網(wǎng)頁結(jié)構(gòu)變得更加清晰、簡潔，能激發(fā)學(xué)生對(duì)網(wǎng)頁制作課程更大的學(xué)習(xí)興趣和創(chuàng)造性。

參考文獻(xiàn)：

朱英哲，張力.Dreamweaver網(wǎng)頁制作[M].武漢大學(xué)出版社，2012.