“網(wǎng)頁制作”課程教學(xué)中“表格布局”的使用技巧

摘要：在中職學(xué)校的計算機專業(yè)課程體系中，強調(diào)要加強對人才的培養(yǎng)。以“網(wǎng)頁制作”課程為例，其主要是培養(yǎng)學(xué)生利用各種程序語言和開發(fā)軟件，從而實現(xiàn)網(wǎng)頁設(shè)計與制作的目標(biāo)。然而，“網(wǎng)頁制作”課程歷來是十分復(fù)雜的，學(xué)生也比較難掌握。基于此，文章以“表格布局”方法為例進行教學(xué)闡述．具有重要的指導(dǎo)價值。

關(guān)鍵詞：網(wǎng)頁制作；表格布局；計算機

中圖法分類號：TP393 文獻標(biāo)識碼：A

在中職計算機與網(wǎng)絡(luò)技術(shù)課程體系中，“網(wǎng)頁制作”是一門十分重要的基礎(chǔ)課程。通過這門課程的學(xué)習(xí)，能夠培養(yǎng)學(xué)生日后在相關(guān)崗位中的實踐能力。當(dāng)前，中職學(xué)校在職業(yè)教育中的分量越來越重，其培養(yǎng)技能人才的使命也需要不斷加強［１］ 。而“網(wǎng)頁制作”課程因為關(guān)系到社會與職業(yè)發(fā)展，所以備受關(guān)注。

“網(wǎng)頁制作”課程的要求既是技術(shù)性的，又是藝術(shù)性的。所以，在“網(wǎng)頁制作”課程教學(xué)中，在傳授學(xué)生理論知識的時候，更多的是要加強他們對于網(wǎng)頁制作實踐能力的培養(yǎng)。

１ “網(wǎng)頁制作”課程綜合實訓(xùn)教學(xué)方法

１．１ “案例”教學(xué)法

所謂“案例”教學(xué)法，是指通過實際案例來開展教學(xué)工作，使得學(xué)生在上機實驗課程中都有明確的任務(wù)，從而激起更大的學(xué)習(xí)興趣，進而很好地將教學(xué)任務(wù)完成。通過綜合實訓(xùn)，教師首先向?qū)W生發(fā)放相關(guān)的案例材料，然后進行知識的講解。由此，學(xué)生就能夠自己去發(fā)現(xiàn)問題、思考問題和解決問題。在開展案例教學(xué)時，教師通常會將學(xué)生進行分組，以小組的形式來評價學(xué)生對實驗操作的能力。利用小組討論，使各個小組能夠自己對案例知識點和問題進行總結(jié)，并找出解決問題的方法。最后，教師對學(xué)生的完成情況進行點評，并提出改進建議，使學(xué)生能夠更好地掌握相關(guān)的實踐操作。

１．２ “任務(wù)驅(qū)動”教學(xué)法

所謂“任務(wù)驅(qū)動”教學(xué)法，即按照相關(guān)的教學(xué)要求，教師或?qū)W生提出“任務(wù)”來開展和完成教學(xué)。通過眾多的“任務(wù)”，將各個知識點聯(lián)系起來，故學(xué)生就能夠主動地發(fā)現(xiàn)問題，并在教師的指導(dǎo)下解決問題。以“網(wǎng)頁制作”課程為例，教師布置任務(wù)，讓學(xué)生設(shè)計一個網(wǎng)站。對于這樣的任務(wù)，會涉及很多內(nèi)容，包括信息檢索和處理、網(wǎng)站規(guī)劃與設(shè)計、網(wǎng)頁框架布局、網(wǎng)頁元素定位、圖片的處理與插入、超級鏈接設(shè)置、網(wǎng)頁的修飾和文件存儲等。而在具體教學(xué)中，教師往往會對這些任務(wù)進行細分，如劃分為網(wǎng)站規(guī)劃與設(shè)計、網(wǎng)頁框架布局、網(wǎng)頁元素定位等小任務(wù)，這樣一步一步地完成整個實踐的操作。因此，一個任務(wù)分解成許多小任務(wù)，將一個復(fù)雜的網(wǎng)頁制作任務(wù)分為許多容易操作的小任務(wù)，使問題得以簡化，進而更好地完成實訓(xùn)操作。

２ “表格布局”在“ 網(wǎng)頁制作” 課程綜合實踐教學(xué)中的地位

在網(wǎng)頁制作時，主要考慮通過合理的布局，從而設(shè)計出一個更美觀、規(guī)范的網(wǎng)頁，讓瀏覽者對網(wǎng)頁滿意，從而愿意停留觀看和進行下一步的操作。在開展網(wǎng)頁布局的操作時，常用的方法包括３ 種：表格布局、框架布局和“Ｄｉｖ＋ＣＳＳ”布局。在實際操作時，我們往往會對這些方法進行綜合應(yīng)用。在設(shè)計網(wǎng)站時，常常會采取模板方式，從而對全網(wǎng)站的風(fēng)格進行統(tǒng)一設(shè)計。而要設(shè)計模板時，就往往會利用表格布局的方式。在網(wǎng)頁制作中，表格能夠起到精確定位網(wǎng)頁元素的作用，從而實現(xiàn)網(wǎng)頁的合理布局，這是一種常用的網(wǎng)頁布局方式。在開展網(wǎng)頁布局操作時，即使不通過表格布局的方式，而是利用框架布局或“Ｄｉｖ＋ＣＳＳ”布局的方式，往往也會通過表格布局的方式來對網(wǎng)頁元素進行定位?？梢哉f，通過“表格布局”的方式來進行網(wǎng)頁布局，這一方法是很簡單的，也是靈活、易于操作的。特別是對于中職學(xué)生來說，在制作網(wǎng)頁時它是最好的選擇。

３ “表格布局”在“ 網(wǎng)頁制作” 課程綜合實踐教學(xué)中的使用技巧

下文通過２０１９ 年濟南市級中職計算機專業(yè)網(wǎng)頁制作抽測題庫“第一套題”的處理技巧作為案例，來對這一技巧進行詳細闡述。

在該題庫中，總計包含有４ 大圖片素材，名稱為ｉｎｄｅｘ＿０１，ｉｎｄｅｘ＿０２，ｉｎｄｅｘ＿０３，ｉｎｄｅｘ＿０４。此外，還包括幾個文本素材， 以及３ 個網(wǎng)頁效果圖， 其名稱為ｉｎｄｅｘ．ｈｔｍｌ，ｊｉｅｓｈａｏ．ｈｔｍｌ，ｌｉｕｙａｎ．ｈｔｍｌ。題目的要求是完成３ 個網(wǎng)頁的創(chuàng)建，分別是ｉｎｄｅｘ．ｈｔｍｌ，ｊｉｅｓｈａｏ．ｈｔｍｌ，ｌｉｕｙａｎ．ｈｔｍｌ。在此，我們首先對這３ 個網(wǎng)頁進行對比分析，發(fā)現(xiàn)它們的元素存在很多相同之處?；诖耍覀兲子媚０鍋磉M行設(shè)計就顯得很方便了。

３．１ 創(chuàng)建首頁ｉｎｄｅｘ．ｈｔｍｌ

為完成這一網(wǎng)頁制作的目標(biāo)，第一步就是要創(chuàng)建一個站點，因此我們先建立一個空白首頁，并將其命名為ｉｎｄｅｘ．ｈｔｍｌ［２］ 。在此基礎(chǔ)上，編輯首頁。

對于不同的網(wǎng)頁頁面，在設(shè)計時，其實不止有一種設(shè)計方法。而本文在對ｉｎｄｅｘ．ｈｔｍｌ 網(wǎng)頁進行布局時，采用的就是“表格布局”方法。在這個網(wǎng)頁中，總計要有４ 個外層表格，即ｔａ１，ｔａ２，ｔａ３ 和ｔａ４。要完成這一網(wǎng)頁，我們采用的是嵌套方法，每個表格寬度皆為１ ０００ 像素。

３．１．１ 表格ｔａ１ 和表格ｔａ２ 創(chuàng)建與編輯

ｔａ１ 和ｔａ２ 皆為單層表格，具有完全一樣的結(jié)構(gòu)，具體表現(xiàn)為：１ 行１ 列寬都是１ ０００ ｐｘ，單元格邊距都為０、邊框粗細都是０、單元格間距也都為０。

在ｔａ１ 表格中，我們插入素材第１ 個圖片ｉｎｄｅｘ＿０１；在ｔａ２ 表格中，我們插入第２ 個圖片ｉｎｄｅｘ＿０２。

而接下來，第三個表格ｔａ３ 的設(shè)計最為復(fù)雜，在３．１．２ 節(jié)將進行具體分析。

３．１．２ 表格ｔａ３ 創(chuàng)建與編輯

表格ｔａ３ 的結(jié)構(gòu)與ｔａ１，ｔａ２ 不同，雖然在單元格邊距、邊框粗細和單元格間距上都為０，但它是２ 行４ 列寬１ ０００ ｐｘ 的結(jié)構(gòu)。

在此，第一步編輯表格ｔａ３ 第１ 行。

此時，我們首先編輯的是最后一列，而不是首列。

我們對第４ 列進行操作，首先是拆分其第一單元格，將其拆分成２ 行，在生成的２ 行中，第１ 行輸入文本“快速導(dǎo)航”，第２ 行插入圖像ｉｎｄｅｘ＿０３，同時對第４列的列寬重新設(shè)置，讓其與圖像ｉｎｄｅｘ＿０３ 的寬度保持一致；其次，對ｔａ３ 表格的第３ 列進行編輯，與第４ 列操作類似，也是對拆分其第１ 行單元格，將其拆分為２行，并在首行輸入文本“ｍｏｒｅ＞＞”；再次，同樣地對該表格的第２ 列進行編輯，也是拆分其第一單元格，將其拆分為２ 行，并在首先輸入文本“最新新聞”，而對于此時生成的第２ 行，將其與第２ 列生成的第２ 行合并，于是就生成了１ 個新的單元格，在此單元格中插入１個嵌套表格，將其命名為ｔａ３?１，該嵌套表格的屬性為７ 行１ 列寬１００％，單元格邊距、邊框粗細和單元格間距皆為０；接下來，根據(jù)ｉｎｄｅｘ．Ｈｔｍｌ 這一效果圖，在每一行中將文本素材的相應(yīng)文本輸入進來，同時根據(jù)情況調(diào)整行寬度，從而有效編輯了嵌套表格ｔａ３?１；最后，處理ｔａ３ 表格的首列，因為它是十分復(fù)雜的，特別是不好確定其寬度，所以我們在最后對其進行操作。對此，我們首先對首列的第１ 個單元格插入１ 個嵌套表格，將其命名為ｔａ３?２，該表格屬性為２ 行１ 列寬１００％，邊框粗細、單元格邊距和單元格間距皆為０。

在第２ 行中，將素材中ｉｎｄｅｘ＿０４ 照片插入進來。

在這里，最重要的是對第１ 行的處理：先將表單“紅色虛線框”插入進來，再將嵌套表格ｔａ３?２?１ 插入表單，此表格結(jié)構(gòu)為４ 行２ 列寬８０％，邊框粗細１，單元格邊距和單元格間距都為０。

此時，我們重點探討這一表格的處理技巧：第一，該表格的表格線是實線，所以它的邊框粗細值為“１”；第二，對于嵌套表格在設(shè)置寬度的時候，一般數(shù)值都是１００％，但是這也不是確定的，可以按照實際的情況進行調(diào)整，如效果圖的表單內(nèi)容如果在邊框內(nèi)，此時ｔａ３?２?１ 嵌套表格的寬度則可以小于１００％，如調(diào)到８０％；第三，效果圖中ｔａ３?２?１ 表格的表格線并非黑色，其顏色要稍微，此時則要對表格線的顏色進行修改，可以將最外層表格ｔａ３ 第１ 行進行選中，利用吸管工具將第３ 列第２ 行圖片ｉｎｄｅｘ＿０３ 的背景顏色吸過來，使其形成新的背景顏色，這樣新形成的網(wǎng)頁顏色看起來是整個融合在一起的，效果不錯。

關(guān)于樣式類型這一問題，此處采用“復(fù)合內(nèi)容（基于選擇內(nèi)容）”，樣式名字為默認(rèn)。我們點擊“確定”

選項，然后在出現(xiàn)的各種“分類”選項卡中，將“邊框”

這一選項選中。在設(shè)置參數(shù)上，操作方式為：線型ｓｏｌｉｄ—實線，線粗細Ｗｉｄｔｈ—１，線的顏色Ｃｏｌｏｒ—＃９９９深灰色。

我們根據(jù)ｉｎｄｅｘ．ｈｔｍｌ 效果圖內(nèi)容，將表單里的ｔａ３?２?１ 表格素材和文本輸入相應(yīng)文本以及表單元素等。完成上述步驟之后，表格ｔａ３ 即編輯完成。

３．１．３ 表格ｔａ４ 創(chuàng)建與編輯

在制作完成表格ｔａ３ 后，會進行表格ｔａ４ 的插入，該表為１ 行１ 列寬１ ０００ ｐｘ，表的單元格邊距、邊框粗細和單元格間距都為０。

在制作時，我們首先把黑色背景添加進來，然后將ｉｎｄｅｘ．ｈｔｍｌ 效果圖中所示文本進行輸入。要把文本的顏色改成白色，在編輯好４ 個表格后，首頁ｉｎｄｅｘ．ｈｔｍｌ 設(shè)計就算是完成了。

３．２ 根據(jù)首頁ｉｎｄｅｘ． ｈｔｍｌ 創(chuàng)建模板ｍｏｂａｎ．ｄｗｔ

（１）將首頁ｉｎｄｅｘ．ｈｔｍｌ 另存為模板ｍｏｂａｎ．Ｄｗｔ。

（２）對ｔａ３ 進行修改。首先是將其第１ 列的嵌套表格ｔａ３?２ 的第２ 行向３ 行１ 列進行拆分；其次，把之前第２ 行的圖片ｉｎｄｅｘ＿０４ 作剪切操作，并粘貼到第３行；接下來，對表格ｔａ３ 的第４ 列第２ 行的圖片ｉｎｄｅｘ＿０３ 也進行剪切操作；最后，剪切表格ｔａ３ 的第４ 列第１行文本“快速導(dǎo)航”，將其粘貼到第１ 行。

３．３ 根據(jù)模板創(chuàng)建網(wǎng)頁ｊｉｅｓｈａｏ．ｈｔｍｌ

上文進行了模板的創(chuàng)建，在此基礎(chǔ)上，我們來新建一個網(wǎng)頁，將其進行保存，文件名為ｊｉｅｓｈａｏ．ｈｔｍｌ，我們將嵌套表格ｔａ３?３ 插入可編輯區(qū)ｂｉａｎｊｉｑｕ，表格的屬性為１ 行１ 列寬１００％，表格的單元格邊距、邊框粗細和單元格間距都為０。

根據(jù)ｊｉｅｓｈａｏ．ｈｔｍｌ 效果圖，我們向ｔａ３?３ 表格中導(dǎo)入素材中相應(yīng)文本，然后基于ＣＳＳ 樣式，來進行字體、字號和行距的調(diào)整，最后編輯好網(wǎng)頁ｊｉｅｓｈａｏ．ｈｔｍｌ。

３．４ 根據(jù)模板創(chuàng)建網(wǎng)頁ｌｉｕｙａｎ．ｈｔｍｌ

基于模板，新建立１ 個命名為ｌｉｕｙａｎ．Ｈｔｍｌ 的文件，并保存。

我們首先將表單插入可編輯區(qū)ｂｉａｎｊｉｑｕ，接著將嵌套表格ｔａ３?４ 插入進來， 其結(jié)構(gòu)為７ 行２ 列寬１００％，邊框粗細為１，單元格邊距和間距都為０。

在此需要注意，此表格邊框線粗細為１，在瀏覽時，邊框線是會顯示的。此時，我們同樣需要通過ＣＳＳ樣式，來對其顏色進行修改。

我們按照題目的相關(guān)要求，會在模板中加入一些超鏈接， 并進行更新和保存。由此， ｉｎｄｅｘ． ｈｔｍｌ，ｊｉｅｓｈａｏ．ｈｔｍｌ，ｌｉｕｙａｎ．ｈｔｍｌ 即編輯和制作完成。

４ 使用表格布局網(wǎng)頁的規(guī)律

（１）通過表格布局的方式來進行網(wǎng)頁設(shè)計，通常會采用很多小表格來進行布局。這主要是因為大表格布局往往會降低下載速度。而表格有時使用單層，也有很多時候是嵌套表格，包括嵌套雙層和多層等。

（２）網(wǎng)頁中所使用的表格大于１ 個，我們就需要對每一個表格進行命名。

（３）通常嵌套表格的寬度為１００％，然而有時也會比這個小，這都是要按照實際情況來決定。

（４）表格線的粗細通常為０，在瀏覽時，表格線是不顯示出來的。如果確實有需要，就將表格線的精細值設(shè)為１ ｐｘ，從而進行顯示。

（５）通常我們不需要對表格線的顏色進行修改。

確需修改的，則根據(jù)ＣＳＳ 樣式來進行操作。

（６）我們在布局表格時，往往是先操作簡單的，然后操作比較困難的，尺寸也是從開始的固定式，到后來不容易確定的。

５ 結(jié)束語

中職“網(wǎng)頁制作”課程對“網(wǎng)頁布局”的使用技巧并沒有真正的講解，以上是根據(jù)筆者的教學(xué)實踐而總結(jié)的。今后，不管是在教學(xué)過程中，還是對于學(xué)生本人來說，都要不斷加強實踐，并進行總結(jié)。利用這些使用技巧，使學(xué)生能夠更好地得到相關(guān)能力的培養(yǎng)，為今后在社會上的發(fā)展奠定基礎(chǔ)，不斷培養(yǎng)具有開創(chuàng)性、技能性的綜合人才。

參考文獻：

［１］ 劉浩．用表格為網(wǎng)頁布局教學(xué)設(shè)計［Ｊ］．中國教育技術(shù)裝備，２０１５（２１）：１０８?１１０．

［２］ 陳洪敏．ＤＩＶ＋ＣＳＳ 布局技術(shù)在網(wǎng)頁設(shè)計中的應(yīng)用［Ｊ］．現(xiàn)代信息科技，２０２３，７（２）：８７?８９＋９３．

作者簡介：胡晉源（１９７４—），本科，講師，研究方向：中等職業(yè)學(xué)校網(wǎng)頁制作與設(shè)計學(xué)科和信息技術(shù)學(xué)科教學(xué)方法。