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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

（１）通過表格布局的方式來進(jìn)行網(wǎng)頁設(shè)計(jì)，通常會采用很多小表格來進(jìn)行布局。這主要是因?yàn)榇蟊砀癫季滞鶗档拖螺d速度。而表格有時(shí)使用單層，也有很多時(shí)候是嵌套表格，包括嵌套雙層和多層等。

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

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

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

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

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

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

５ 結(jié)束語

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

參考文獻(xiàn)：

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

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

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