“表格布局”在网页制作教学中的使用技巧——中职计算机专业“网页制作”课程综合实训教学探索

王桂华

(山东省济南商贸学校， 山东 济南 250101)

随着我国信息化建设飞速发展，计算机信息技术已经进入千家万户、各行各业，计算机技术的应用已经渗透到我们生活、工作的方方面面，国家大力发展电子政务、无纸化办公，电子商务普及，物流数据信息化，疫情期间的网络在线办公，等等。社会对中等计算机信息技术人才的需求缺口很大。中等职业学校是培养中等计算机信息技术人才的摇篮，在中职学校开设计算机应用专业十分必要。网页制作课程是中职计算机专业核心课程，对中职计算机专业网页制作课程教学的研究是十分必要的。下面谈谈自己网页制作课程教学的体会和探索。

一、中职教育现状以及学生现状

中职阶段的教育是我国目前教育阶段的重要组成部分，重点培养中等职业技术人才，为社会以及高职院校输送具有初步专业技能水平的人才，培养高素质的劳动者和建设者。中职阶段的教育水平决定着我国劳动者、建设者的素质和水平，因此，国家大力发展职业教育。2013年国家对中等职业教育全部免学费，可见国家对职业教育支持力度之大、办好职业教育决心之大。国家扶持职业教育的政策很好。但职业教育被社会认可的程度远远低于普通教育，而且办职业教育是烧钱的：需要投入实训场地、需要消耗实训原材料。办职业教育的“盈利”不像办普通教育来得那么快，职业教育对社会的影响可能见效比较慢。因此，许多地方未给职业教育提供合理的办学场所，把本来地理位置较好便于招生的校区卖掉或者转给普教办学，把职业教学区搬到比较偏远的地方，没有合适的实训场所，没有足够的办学资金和办学政策，有的地方甚至强制缩减职业学校招生名额，导致一些区级职业教育学校解散转行，职业学校的生存举步维艰。尽管如此，职业教育教师仍应不断提升自己，努力探索新的教学方法，练好内功，如此方可更好地适应目前职业教育发展的需要。

由于家庭和自身等方面的原因，职业学校的学生普遍学习底子较薄弱，自主学习习惯不好、学习能力不够强、学习积极性不够高，综合能力达不到应有的要求。职业学校的学生，在以往的学习经历中，大多经历过多次的挫败，他们不仅需重拾斗志，更加需要心灵的滋养和修复。因此，职业教育的教师不仅仅需要有教书能力，更加需要有育人的经验和爱心。

职业教育阶段的教学需要及时根据教学对象的特点进行调整，不断探索教育教学方法，以适合不同层次、不同特点的学生需求，应该尽可能减少大篇幅理论讲授，应轻理论重技能。计算机专业课应该更加重视技能培养，重视学习习惯的养成，重视育人的培养。可根据学科特点，根据学生基础不同采用分层次教学。有些技能课程，应采用任务驱动、项目教学等方法进行。应该克服化解中职生学习的难点，提升学生的学习热情，鼓励他们重拾学习的信心，激发他们的学习兴趣，帮助他们重塑美好心灵，掌握一技之长，把他们培养成祖国建设的合格技能型人才。

二、“网页制作”课程综合实训教学的必要性

“网页制作”课程教学，我们选取的教材是杨杰、段欣主编的电子工业出版社出版的中等职业学校用书计算机课程改革实验教材系列《Dreamweaver CS6网页制作》。教材共分6个模块，即6个知识单元。

模块1 网页设计基础，主要学习网页结构，HTML语言基础。

模块2 Dreamweaver CS6基本操作，主要学习站点创建与管理，文本以及多媒体元素在网页中的使用，超链接的建立。

模块4 Dreamweaver CS6网页布局表三种方法，主要学习“表格布局”“框架布局”“CSS+Div布局网页”三种布局网页方法。

模块4 Dreamweaver CS6高级应用，学习模板的使用， Spry控件的应用，行为的应用。

模块5 网站的测试与发布。学习表单的应用，动态网站的创建。

模块6 Dreamweaver CS6综合应用。在这一单元里教材选用的3个综合网站：一个是CSS+Div布局，一个是表格布局，另外一个是动态网站设计。这三个案例都普遍较难，不太适合目前中职计算机专业学生初期综合训练需要。

中职阶段的学生动态网站建设相对较难。对2014级以前的学生，我们还要讲动态网站设计、数据库的连接等。那时候的学生，有部分还可以接受，能实现简单的互动。近几年的职业学校生源文化基础大幅降低，学校机房硬盘大部分做了硬盘保护，对于运行动态网页很不方便。因此，对2015级以后的学生，我们就不在课堂上讲授动态网站建设(只用微课视频播放一下简单动态网站建设实例，对部分有兴趣的同学可以在社团、兴趣小组等第二课堂进行讲解训练)，只讲授静态表单的设计。

济南市教育教学研究院连续六七年进行市级专业技能抽测，都在每年的5月中旬进行，抽测的题目根据市级统一要求，由各个职业学校任课教师出题，然后组成题库。一般是每个学科5～10套题目组成题库。为了迎接市级专业抽测，一般我们每年4月初就结束新课学习，开始综合实训。在本课程前几个模块的学习中，学习的均是零碎的网页制作基本操作。学完之后，学生并不能独立完成一个小型综合网站的设计与制作，学生综合运用知识的能力仍然不够。从网页制作知识性学习到设计一个综合的网站，是一个知识跃迁过程，这个过程的实现需要通过大量的综合网站设计模拟实训来完成，在多次网站设计综合实训中摸索、探究、学习，学生才能慢慢掌握综合网站的设计方法与技巧。因此，网页制作综合实训课是中职计算机专业学生必须进行的模拟综合实训过程，是学生将知识转化为能力的重要过程。为了提高学生网站设计与制作的综合实践能力，同时又为了迎接市级专业技能抽测，我们近几年的网页制作综合实训教学内容就选择了市级专业技能抽测题库内容。市级抽测模拟练习题库的题目，都是职业学校教学一线网页制作教师编写的，难易程度最符合目前中职生学习的实际情况。这样在综合网站模拟实训过程中，既圆满完成了市级专业抽测训练任务，又提升了学生的综合网站设计能力，一举两得。

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

在网页制作综合实训内容教学中，可以应用多种教学手段，多种教学流程。

(一)每一个综合实训案例，教师要反复做很多遍，然后总结出步骤方法，做出学案，主要技术难点抓图放在学案中，便于学生学习。重要环节，要做出微课操作视频。在课前通过班级QQ群，把学案、微视频下发给学生预习参考。

(二)第一次课，教师先展示作品成果，让学生有个直观印象。然后分析怎么运用现有的知识完成这个作品。然后教师讲解、让一个学生上台同步演示，下边同学一起做，完成作品。教师每讲解一个知识单元，放手让学生自己练习、讨论、互帮互助学习。

(三)第二次课，将上节课案例成品网站在教师机展示，教师直接给学生发素材，教师答疑，让学生互助学习，把上节课完成的网站，自己独立完成或者和同学一起互助完成网站的设计。

(四)大部分网站作品，一般一周两次课，一次教师领着完成，一次学生自己独立完成，这个网站的设计就比较熟练了。个别比较复杂的网站，也可以分三次完成，加强难点地方训练，便于学生掌握。

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

在制作网页过程中，如何布局网站页面，让网页更加规范、统一、美观，吸引更多浏览者，是网站开发、网页制作成败的关键。

网页布局最常用的方法有三种：表格布局、框架布局、Div+CSS布局。在实际的网页制作中，常常是多种方法综合应用。在网站开发中，有很多网站设计会用到模板方式统一整个网站的风格。在模板设计中，也经常使用表格布局页面。表格在“网页制作”中所起的作用是对网页元素精确定位，合理布局页面。即便是应用框架布局、Div+CSS布局，也经常用到表格布局定位网页元素。因此，“表格布局”是最常用、最灵活、最简单、最方便的网页布局方法，是中职阶段计算机专业学生制作网页最方便实用的方法。

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

在网页制作综合实训教学过程中，笔者摸索出一些网页布局的使用技巧。以2019年济南市级中职计算机专业网页制作抽测题库“第一套题” 处理技巧为例，现分享如下：

题库提供了4个图片素材index_01、index_02、index_03、index_04和一些文本素材，提供了index.html、jieshao.html、liuyan.html三个网页的效果图，要求创建index.html、jieshao.html、liuyan.html三个网页。

这三个网页都有很多共同元素，用模板的方法制作网页显然最恰当。

(一)创建首页index.html

先按题目要求创建站点，新建空白首页index.html。然后编辑首页。

每个网页页面的设计思路都可能有多种方法。笔者采用了“表格布局”方法布局index.html网页。该网页共需要四个外层表格ta1、 ta2、 ta3、 ta4，这4个表格宽度都是1000像素。该网页用多层表格嵌套方法来完成。

1.表格ta1和表格ta2创建与编辑

第一个表格ta1、第二个表格ta2,都是单层表格，结构完全一样：1行1列宽1000px，边框粗细0、单元格边距0、单元格间距0(如果一个网页中用到两个以上的表格，为了便于管理表格，一般要求给每个表格起一个合法的名称)。

ta1表格插入素材第一个图片index_01，ta2表格插入第二个图片index_02。

最复杂的是第三个表格ta3，ta3如何设计是关键，是难点。

2.表格ta3创建与编辑

在表格ta2后面插入表格ta3，ta3表格结构是：2行4列宽1000px，边框粗细0、单元格边距0、单元格间距0 。

首先完成表格ta3第1行编辑：

完成最后一列：第4列，第一单元格拆分为两行，第1行输入文本“快速导航”，第2行插入图像index_03，把最后一列列宽度改为图像index_03宽度。

第3列，第1行单元格拆分为2行，第1行输入文本“more>>”。

第2列，第1行单元格拆分为2行，第1行输入文本“最新新闻”。

第2列第3列的第2行合并，在合并的这个单元格里，插入一个嵌套表格ta3-1，表格结构是：7行1列宽100%，边框粗细0、单元格边距0、单元格间距0。

然后按照index.html效果图，每行输入文本素材中相应的文本，并把行宽度做适当调整，就完成了嵌套表格ta3-1的编辑。

最复杂的是表格ta3第1列，宽度不好确定，所以最后完成第1列。

先把第1列第一个单元格，插入一个嵌套表格ta3-2，表格结构是：2行1列宽100%，边框粗细0、单元格边距0、单元格间距0 。

第2行插入素材中index_04照片。

第1行是关键：先插入表单“红色虚线框”，然后表单里再插入嵌套表格ta3-2-1，表格结构是：4行2列宽80%，边框粗细1、单元格边距0、单元格间距0 。

注意这个表格(最复杂)处理技巧如下：

(1)这个表格的表格线是实线，所以边框粗细是“1”。

(2)嵌套表格的宽度一般是100%，但是根据实际需要也可以是小于100%，因为效果图上表单内容比边框往里缩进一块，所以这里ta3-2-1嵌套表格宽度可以是75%～80%。

(3)效果图中ta3-2-1表格的表格线不是黑色，是比背景颜色灰色亮一点的颜色，需要修改表格线颜色，处理方法如下：先选中最外层表格ta3第一行，添加背景颜色，记得用吸管吸第3列第2行图片index_03的背景颜色，这样使得网页颜色很融合。然后选中最里层嵌套表格ta3-2-1的所有单元格，打开CSS面板，创建样式。

样式类型选择“复合内容(基于选择内容)”，样式名字默认，然后“确定”，选择“分类”选项卡中的“边框”，然后按下面要求设置参数：

线型soli—实线，线粗细 Width—1，线的颜色Color—#999深灰色。

结论：表格线的颜色编辑，用创建“复合内容(基于选择内容)样式”方法可以实现。

将表单里的ta3-2-1表格按照index.html效果图内容以及素材文本输入相应文本以及表单元素等内容，最终实现表格ta3所有编辑。

3．表格ta4创建与编辑

在表格ta3后边插入表格ta4，表格ta4结构是：1行1列宽1000px，边框粗细0、单元格边距0、单元格间距0。

先添加黑色背景，再输入index.html效果图中所示文本，修改文本颜色为白色，就完成了ta4表格的编辑，从而完成了首页 index.html所有设计。

(二)根据首页index.html创建模板moban.dwt

1.将首页index.html另存为模板moban.dwt。

2.ta3第1列修改：将ta3 表格的第1列的嵌套表格ta3-2的第2行拆分为3行1列。第3行：将原来第2行的图片index_04剪切放在第3行。第2行：将ta3的第4列第2行图片index_03剪切过来。第1行：将ta3的第4列第1行文本“快速导航”剪切过来。

3.将表格ta3的第1行第2列、第3列内容“最新新闻”“more>>”删除掉，然后将下一行嵌套表格ta3-1删除掉。选中ta3第1行第2、3、4列所有单元格合并，然后在这个合并的单元格插入可编辑区域bianjiqu。至此，模板的编辑完成，保存模板。

(三)根据模板创建网页jieshao.html

用模板新建网页，保存为jieshao.html，在可编辑区bianjiqu里插入嵌套表格ta3-3，表格结构是：1行1列宽100%，边框粗细0、单元格边距0、单元格间距0。

在ta3-3表格中按照jieshao.html效果图，导入素材中相应文本，用CSS样式调整行距、字体、字号，完成网页jieshao.html所有编辑。

(四)根据模板创建网页liuyan.html

用模板新建网页，保存为liuyan.html。

在可编辑区bianjiqu里插入表单，然后在表单里插入嵌套表格ta3-4，表格结构是：7行2列宽100%，边框粗细1、单元格边距0、单元格间距0。

注意：这个表格边框线粗细是1，是浏览时显示边框线的。这个表格需要参考上面的方法用CSS样式改变表格线颜色。

根据liuyuan.html效果图，在表格ta3-4中输入素材中相应文本，插入相应表单元素，调整行高，完成网页liuyan.html所有编辑。

根据题目要求，在模板里完成相应超链接，保存更新。完成index.html、jieshao.html、liuyan.html全部编辑与制作。

六、综述

表格布局网页，总结如下规律：

(一)表格布局网页一般是一个页面用多个小表格布局(极少用一个大的表格布局整个页面，浏览时下载速度慢)。有时用单层表格，有时用嵌套表格，有时嵌套两层，有时嵌套多层。至于是否需要嵌套、嵌套多少层，要根据网页布局的实际需要来决定。

(二)只要网页中出现一个以上的表格，每个表格必须起名字(英文、数字或者英文数字组合)。

(三)嵌套表格宽度一般是100%，是由外层表格的宽度决定的，有时候根据实际需要，嵌套表格的宽度也可以是小于100%或者是固定尺寸。

(四)表格线粗细一般是0，浏览时不显示表格线，表格在网站中起到布局定位作用。有时根据需要会显示表格线，表格线的粗细可以设为1px。

(五)表格线颜色一般不需要修改。有时候需要修改表格线的颜色，可以通过给表格添加CSS样式来实现。

(六)表格的布局顺序一般是从简单到复杂，先完成简单的、尺寸比较固定的，再完成复杂的、尺寸不好确定的。

(七)有时单元格的背景图像，也需要创建CSS样式来实现。

上文所述网页布局中的使用技巧，在教材中没有涉及，是笔者在多年的网页制作教学实践中摸索、领悟出来的。这些实用网页布局技巧，初学网页制作的中职计算机专业学生以及新入职网页制作教学的教师短时间内摸索出来有一定难度。因此，笔者把自己多年来对“网页制作”综合实训教学的探索作了总结。这对于完善计算机教学来说有一定意义。