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

2023-07-14胡晋源

计算机应用文摘 2023年12期

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

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

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

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

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

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

１．１ “案例”教学法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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