“网页制作”课程教学中“表格布局”的使用技巧

摘要：在中职学校的计算机专业课程体系中，强调要加强对人才的培养。以“网页制作”课程为例，其主要是培养学生利用各种程序语言和开发软件，从而实现网页设计与制作的目标。然而，“网页制作”课程历来是十分复杂的，学生也比较难掌握。基于此，文章以“表格布局”方法为例进行教学阐述．具有重要的指导价值。

关键词：网页制作；表格布局；计算机

中图法分类号：TP393 文献标识码：A

在中职计算机与网络技术课程体系中，“网页制作”是一门十分重要的基础课程。通过这门课程的学习，能够培养学生日后在相关岗位中的实践能力。当前，中职学校在职业教育中的分量越来越重，其培养技能人才的使命也需要不断加强［１］ 。而“网页制作”课程因为关系到社会与职业发展，所以备受关注。

“网页制作”课程的要求既是技术性的，又是艺术性的。所以，在“网页制作”课程教学中，在传授学生理论知识的时候，更多的是要加强他们对于网页制作实践能力的培养。

１ “网页制作”课程综合实训教学方法

１．１ “案例”教学法

所谓“案例”教学法，是指通过实际案例来开展教学工作，使得学生在上机实验课程中都有明确的任务，从而激起更大的学习兴趣，进而很好地将教学任务完成。通过综合实训，教师首先向学生发放相关的案例材料，然后进行知识的讲解。由此，学生就能够自己去发现问题、思考问题和解决问题。在开展案例教学时，教师通常会将学生进行分组，以小组的形式来评价学生对实验操作的能力。利用小组讨论，使各个小组能够自己对案例知识点和问题进行总结，并找出解决问题的方法。最后，教师对学生的完成情况进行点评，并提出改进建议，使学生能够更好地掌握相关的实践操作。

１．２ “任务驱动”教学法

所谓“任务驱动”教学法，即按照相关的教学要求，教师或学生提出“任务”来开展和完成教学。通过众多的“任务”，将各个知识点联系起来，故学生就能够主动地发现问题，并在教师的指导下解决问题。以“网页制作”课程为例，教师布置任务，让学生设计一个网站。对于这样的任务，会涉及很多内容，包括信息檢索和处理、网站规划与设计、网页框架布局、网页元素定位、图片的处理与插入、超级链接设置、网页的修饰和文件存储等。而在具体教学中，教师往往会对这些任务进行细分，如划分为网站规划与设计、网页框架布局、网页元素定位等小任务，这样一步一步地完成整个实践的操作。因此，一个任务分解成许多小任务，将一个复杂的网页制作任务分为许多容易操作的小任务，使问题得以简化，进而更好地完成实训操作。

２ “表格布局”在“ 网页制作” 课程综合实践教学中的地位

在网页制作时，主要考虑通过合理的布局，从而设计出一个更美观、规范的网页，让浏览者对网页满意，从而愿意停留观看和进行下一步的操作。在开展网页布局的操作时，常用的方法包括３ 种：表格布局、框架布局和“Ｄｉｖ＋ＣＳＳ”布局。在实际操作时，我们往往会对这些方法进行综合应用。在设计网站时，常常会采取模板方式，从而对全网站的风格进行统一设计。而要设计模板时，就往往会利用表格布局的方式。在网页制作中，表格能够起到精确定位网页元素的作用，从而实现网页的合理布局，这是一种常用的网页布局方式。在开展网页布局操作时，即使不通过表格布局的方式，而是利用框架布局或“Ｄｉｖ＋ＣＳＳ”布局的方式，往往也会通过表格布局的方式来对网页元素进行定位。可以说，通过“表格布局”的方式来进行网页布局，这一方法是很简单的，也是灵活、易于操作的。特别是对于中职学生来说，在制作网页时它是最好的选择。

３ “表格布局”在“ 网页制作” 课程综合实践教学中的使用技巧

下文通过２０１９ 年济南市级中职计算机专业网页制作抽测题库“第一套题”的处理技巧作为案例，来对这一技巧进行详细阐述。

在该题库中，总计包含有４ 大图片素材，名称为ｉｎｄｅｘ＿０１，ｉｎｄｅｘ＿０２，ｉｎｄｅｘ＿０３，ｉｎｄｅｘ＿０４。此外，还包括几个文本素材， 以及３ 个网页效果图， 其名称为ｉｎｄｅｘ．ｈｔｍｌ，ｊｉｅｓｈａｏ．ｈｔｍｌ，ｌｉｕｙａｎ．ｈｔｍｌ。题目的要求是完成３ 个网页的创建，分别是ｉｎｄｅｘ．ｈｔｍｌ，ｊｉｅｓｈａｏ．ｈｔｍｌ，ｌｉｕｙａｎ．ｈｔｍｌ。在此，我们首先对这３ 个网页进行对比分析，发现它们的元素存在很多相同之处。基于此，我们套用模板来进行设计就显得很方便了。

３．１ 创建首页ｉｎｄｅｘ．ｈｔｍｌ

为完成这一网页制作的目标，第一步就是要创建一个站点，因此我们先建立一个空白首页，并将其命名为ｉｎｄｅｘ．ｈｔｍｌ［２］ 。在此基础上，编辑首页。

对于不同的网页页面，在设计时，其实不止有一种设计方法。而本文在对ｉｎｄｅｘ．ｈｔｍｌ 网页进行布局时，采用的就是“表格布局”方法。在这个网页中，总计要有４ 个外层表格，即ｔａ１，ｔａ２，ｔａ３ 和ｔａ４。要完成这一网页，我们采用的是嵌套方法，每个表格宽度皆为１ ０００ 像素。

３．１．１ 表格ｔａ１ 和表格ｔａ２ 创建与编辑

ｔａ１ 和ｔａ２ 皆为单层表格，具有完全一样的结构，具体表现为：１ 行１ 列宽都是１ ０００ ｐｘ，单元格边距都为０、边框粗细都是０、单元格间距也都为０。

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

而接下来，第三个表格ｔａ３ 的设计最为复杂，在３．１．２ 节将进行具体分析。

３．１．２ 表格ｔａ３ 创建与编辑

表格ｔａ３ 的结构与ｔａ１，ｔａ２ 不同，虽然在单元格边距、边框粗细和单元格间距上都为０，但它是２ 行４ 列宽１ ０００ ｐｘ 的结构。

在此，第一步编辑表格ｔａ３ 第１ 行。

此时，我们首先编辑的是最后一列，而不是首列。

我们对第４ 列进行操作，首先是拆分其第一单元格，将其拆分成２ 行，在生成的２ 行中，第１ 行输入文本“快速导航”，第２ 行插入图像ｉｎｄｅｘ＿０３，同时对第４列的列宽重新设置，让其与图像ｉｎｄｅｘ＿０３ 的宽度保持一致；其次，对ｔａ３ 表格的第３ 列进行编辑，与第４ 列操作类似，也是对拆分其第１ 行单元格，将其拆分为２行，并在首行输入文本“ｍｏｒｅ＞＞”；再次，同样地对该表格的第２ 列进行编辑，也是拆分其第一单元格，将其拆分为２ 行，并在首先输入文本“最新新闻”，而对于此时生成的第２ 行，将其与第２ 列生成的第２ 行合并，于是就生成了１ 个新的单元格，在此单元格中插入１个嵌套表格，将其命名为ｔａ３?１，该嵌套表格的属性为７ 行１ 列宽１００％，单元格边距、边框粗细和单元格间距皆为０；接下来，根据ｉｎｄｅｘ．Ｈｔｍｌ 这一效果图，在每一行中将文本素材的相应文本输入进来，同时根据情况调整行宽度，从而有效编辑了嵌套表格ｔａ３?１；最后，处理ｔａ３ 表格的首列，因为它是十分复杂的，特别是不好确定其宽度，所以我们在最后对其进行操作。对此，我们首先对首列的第１ 个单元格插入１ 个嵌套表格，将其命名为ｔａ３?２，该表格属性为２ 行１ 列宽１００％，边框粗细、单元格边距和单元格间距皆为０。

在第２ 行中，将素材中ｉｎｄｅｘ＿０４ 照片插入进来。

在这里，最重要的是对第１ 行的处理：先将表单“红色虚线框”插入进来，再将嵌套表格ｔａ３?２?１ 插入表单，此表格结构为４ 行２ 列宽８０％，边框粗细１，单元格边距和单元格间距都为０。

此时，我们重点探讨这一表格的处理技巧：第一，该表格的表格线是实线，所以它的边框粗细值为“１”；第二，对于嵌套表格在设置宽度的时候，一般数值都是１００％，但是这也不是确定的，可以按照实际的情况进行调整，如效果图的表单内容如果在边框内，此时ｔａ３?２?１ 嵌套表格的宽度则可以小于１００％，如调到８０％；第三，效果图中ｔａ３?２?１ 表格的表格线并非黑色，其颜色要稍微，此时则要对表格线的颜色进行修改，可以将最外层表格ｔａ３ 第１ 行进行选中，利用吸管工具将第３ 列第２ 行图片ｉｎｄｅｘ＿０３ 的背景颜色吸过来，使其形成新的背景颜色，这样新形成的网页颜色看起来是整个融合在一起的，效果不错。

关于样式类型这一问题，此处采用“复合内容（基于选择内容）”，样式名字为默认。我们点击“确定”

选项，然后在出现的各种“分类”选项卡中，将“边框”

这一选项选中。在设置参数上，操作方式為：线型ｓｏｌｉｄ—实线，线粗细Ｗｉｄｔｈ—１，线的颜色Ｃｏｌｏｒ—＃９９９深灰色。

我们根据ｉｎｄｅｘ．ｈｔｍｌ 效果图内容，将表单里的ｔａ３?２?１ 表格素材和文本输入相应文本以及表单元素等。完成上述步骤之后，表格ｔａ３ 即编辑完成。

３．１．３ 表格ｔａ４ 创建与编辑

在制作完成表格ｔａ３ 后，会进行表格ｔａ４ 的插入，该表为１ 行１ 列宽１ ０００ ｐｘ，表的单元格边距、边框粗细和单元格间距都为０。

在制作时，我们首先把黑色背景添加进来，然后将ｉｎｄｅｘ．ｈｔｍｌ 效果图中所示文本进行输入。要把文本的颜色改成白色，在编辑好４ 个表格后，首页ｉｎｄｅｘ．ｈｔｍｌ 设计就算是完成了。

３．２ 根据首页ｉｎｄｅｘ． ｈｔｍｌ 创建模板ｍｏｂａｎ．ｄｗｔ

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

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

３．３ 根据模板创建网页ｊｉｅｓｈａｏ．ｈｔｍｌ

上文进行了模板的创建，在此基础上，我们来新建一个网页，将其进行保存，文件名为ｊｉｅｓｈａｏ．ｈｔｍｌ，我们将嵌套表格ｔａ３?３ 插入可编辑区ｂｉａｎｊｉｑｕ，表格的属性为１ 行１ 列宽１００％，表格的单元格边距、边框粗细和单元格间距都为０。

根据ｊｉｅｓｈａｏ．ｈｔｍｌ 效果图，我们向ｔａ３?３ 表格中导入素材中相应文本，然后基于ＣＳＳ 样式，来进行字体、字号和行距的调整，最后编辑好网页ｊｉｅｓｈａｏ．ｈｔｍｌ。

３．４ 根据模板创建网页ｌｉｕｙａｎ．ｈｔｍｌ

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

我们首先将表单插入可编辑区ｂｉａｎｊｉｑｕ，接着将嵌套表格ｔａ３?４ 插入进来， 其结构为７ 行２ 列宽１００％，边框粗细为１，单元格边距和间距都为０。

在此需要注意，此表格边框线粗细为１，在浏览时，边框线是会显示的。此时，我们同样需要通过ＣＳＳ样式，来对其颜色进行修改。

我们按照题目的相关要求，会在模板中加入一些超链接， 并进行更新和保存。由此， ｉｎｄｅｘ． ｈｔｍｌ，ｊｉｅｓｈａｏ．ｈｔｍｌ，ｌｉｕｙａｎ．ｈｔｍｌ 即编辑和制作完成。

４ 使用表格布局网页的规律

（１）通过表格布局的方式来进行网页设计，通常会采用很多小表格来进行布局。这主要是因为大表格布局往往会降低下载速度。而表格有时使用单层，也有很多时候是嵌套表格，包括嵌套双层和多层等。

（２）网页中所使用的表格大于１ 个，我们就需要对每一个表格进行命名。

（３）通常嵌套表格的宽度为１００％，然而有时也会比这个小，这都是要按照实际情况来决定。

（４）表格线的粗细通常为０，在浏览时，表格线是不显示出来的。如果确实有需要，就将表格线的精细值设为１ ｐｘ，从而进行显示。

（５）通常我们不需要对表格线的颜色进行修改。

确需修改的，则根据ＣＳＳ 样式来进行操作。

（６）我们在布局表格时，往往是先操作简单的，然后操作比较困难的，尺寸也是从开始的固定式，到后来不容易确定的。

５ 结束语

中职“网页制作”课程对“网页布局”的使用技巧并没有真正的讲解，以上是根据笔者的教学实践而总结的。今后，不管是在教学过程中，还是对于学生本人来说，都要不断加强实践，并进行总结。利用这些使用技巧，使学生能够更好地得到相关能力的培养，为今后在社会上的发展奠定基础，不断培养具有开创性、技能性的综合人才。

参考文献：

［１］ 刘浩．用表格为网页布局教学设计［Ｊ］．中国教育技术装备，２０１５（２１）：１０８?１１０．

［２］ 陈洪敏．ＤＩＶ＋ＣＳＳ 布局技术在网页设计中的应用［Ｊ］．现代信息科技，２０２３，７（２）：８７?８９＋９３．

作者简介：胡晋源（１９７４—），本科，讲师，研究方向：中等职业学校网页制作与设计学科和信息技术学科教学方法。