“網頁制作”課程教學中“表格布局”的使用技巧

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

關鍵詞：網頁制作；表格布局；計算機

中圖法分類號：TP393 文獻標識碼：A

在中職計算機與網絡技術課程體系中，“網頁制作”是一門十分重要的基礎課程。通過這門課程的學習，能夠培養學生日后在相關崗位中的實踐能力。當前，中職學校在職業教育中的分量越來越重，其培養技能人才的使命也需要不斷加強［１］ 。而“網頁制作”課程因為關系到社會與職業發展，所以備受關注。

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

１ “網頁制作”課程綜合實訓教學方法

１．１ “案例”教學法

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

１．２ “任務驅動”教學法

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

２ “表格布局”在“ 網頁制作” 課程綜合實踐教學中的地位

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

３ “表格布局”在“ 網頁制作” 課程綜合實踐教學中的使用技巧

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

在該題庫中，總計包含有４ 大圖片素材，名稱為ｉｎｄｅｘ＿０１，ｉｎｄｅｘ＿０２，ｉｎｄｅｘ＿０３，ｉｎｄｅｘ＿０４。此外，還包括幾個文本素材， 以及３ 個網頁效果圖， 其名稱為ｉｎｄｅｘ．ｈｔｍｌ，ｊｉｅｓｈａｏ．ｈｔｍｌ，ｌｉｕｙａｎ．ｈｔｍｌ。題目的要求是完成３ 個網頁的創建，分別是ｉｎｄｅｘ．ｈｔｍｌ，ｊｉｅｓｈａｏ．ｈｔｍｌ，ｌｉｕｙａｎ．ｈｔｍｌ。在此，我們首先對這３ 個網頁進行對比分析，發現它們的元素存在很多相同之處。基于此，我們套用模板來進行設計就顯得很方便了。

３．１ 創建首頁ｉｎｄｅｘ．ｈｔｍｌ

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

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

３．１．１ 表格ｔａ１ 和表格ｔａ２ 創建與編輯

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

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

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

３．１．２ 表格ｔａ３ 創建與編輯

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

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

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

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

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

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

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

關于樣式類型這一問題，此處采用“復合內容（基于選擇內容）”，樣式名字為默認。我們點擊“確定”

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

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

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

３．１．３ 表格ｔａ４ 創建與編輯

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

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

３．２ 根據首頁ｉｎｄｅｘ． ｈｔｍｌ 創建模板ｍｏｂａｎ．ｄｗｔ

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

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

３．３ 根據模板創建網頁ｊｉｅｓｈａｏ．ｈｔｍｌ

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

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

３．４ 根據模板創建網頁ｌｉｕｙａｎ．ｈｔｍｌ

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

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

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

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

４ 使用表格布局網頁的規律

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

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

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

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

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

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

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

５ 結束語

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

參考文獻：

［１］ 劉浩．用表格為網頁布局教學設計［Ｊ］．中國教育技術裝備，２０１５（２１）：１０８?１１０．

［２］ 陳洪敏．ＤＩＶ＋ＣＳＳ 布局技術在網頁設計中的應用［Ｊ］．現代信息科技，２０２３，７（２）：８７?８９＋９３．

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