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

2023-07-14 06:32胡晋源
计算机应用文摘 2023年12期
关键词:网页制作计算机

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

关键词:网页制作;表格布局;计算机

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

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

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

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

1.1 “案例”教学法

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

1.2 “任务驱动”教学法

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

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

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

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

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

在该题库中,总计包含有4 大图片素材,名称为index_01,index_02,index_03,index_04。此外,还包括几个文本素材, 以及3 个网页效果图, 其名称为index.html,jieshao.html,liuyan.html。题目的要求是完成3 个网页的创建,分别是index.html,jieshao.html,liuyan.html。在此,我们首先对这3 个网页进行对比分析,发现它们的元素存在很多相同之处。基于此,我们套用模板来进行设计就显得很方便了。

3.1 创建首页index.html

为完成这一网页制作的目标,第一步就是要创建一个站点,因此我们先建立一个空白首页,并将其命名为index.html[2] 。在此基础上,编辑首页。

对于不同的网页页面,在设计时,其实不止有一种设计方法。而本文在对index.html 网页进行布局时,采用的就是“表格布局”方法。在这个网页中,总计要有4 个外层表格,即ta1,ta2,ta3 和ta4。要完成这一网页,我们采用的是嵌套方法,每个表格宽度皆为1 000 像素。

3.1.1 表格ta1 和表格ta2 创建与编辑

ta1 和ta2 皆为单层表格,具有完全一样的结构,具体表现为:1 行1 列宽都是1 000 px,单元格边距都为0、边框粗细都是0、单元格间距也都为0。

在ta1 表格中,我们插入素材第1 个图片index_01;在ta2 表格中,我们插入第2 个图片index_02。

而接下来,第三个表格ta3 的设计最为复杂,在3.1.2 节将进行具体分析。

3.1.2 表格ta3 创建与编辑

表格ta3 的结构与ta1,ta2 不同,虽然在单元格边距、边框粗细和单元格间距上都为0,但它是2 行4 列宽1 000 px 的结构。

在此,第一步编辑表格ta3 第1 行。

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

我们对第4 列进行操作,首先是拆分其第一单元格,将其拆分成2 行,在生成的2 行中,第1 行输入文本“快速导航”,第2 行插入图像index_03,同时对第4列的列宽重新设置,让其与图像index_03 的宽度保持一致;其次,对ta3 表格的第3 列进行编辑,与第4 列操作类似,也是对拆分其第1 行单元格,将其拆分为2行,并在首行输入文本“more>>”;再次,同样地对该表格的第2 列进行编辑,也是拆分其第一单元格,将其拆分为2 行,并在首先输入文本“最新新闻”,而对于此时生成的第2 行,将其与第2 列生成的第2 行合并,于是就生成了1 个新的单元格,在此单元格中插入1个嵌套表格,将其命名为ta3?1,该嵌套表格的属性为7 行1 列宽100%,单元格边距、边框粗细和单元格间距皆为0;接下来,根据index.Html 这一效果图,在每一行中将文本素材的相应文本输入进来,同时根据情况调整行宽度,从而有效编辑了嵌套表格ta3?1;最后,处理ta3 表格的首列,因为它是十分复杂的,特别是不好确定其宽度,所以我们在最后对其进行操作。对此,我们首先对首列的第1 个单元格插入1 个嵌套表格,将其命名为ta3?2,该表格属性为2 行1 列宽100%,边框粗细、单元格边距和单元格间距皆为0。

在第2 行中,将素材中index_04 照片插入进来。

在这里,最重要的是对第1 行的处理:先将表单“红色虚线框”插入进来,再将嵌套表格ta3?2?1 插入表单,此表格结构为4 行2 列宽80%,边框粗细1,单元格边距和单元格间距都为0。

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

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

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

这一选项选中。在设置参数上,操作方式為:线型solid—实线,线粗细Width—1,线的颜色Color—#999深灰色。

我们根据index.html 效果图内容,将表单里的ta3?2?1 表格素材和文本输入相应文本以及表单元素等。完成上述步骤之后,表格ta3 即编辑完成。

3.1.3 表格ta4 创建与编辑

在制作完成表格ta3 后,会进行表格ta4 的插入,该表为1 行1 列宽1 000 px,表的单元格边距、边框粗细和单元格间距都为0。

在制作时,我们首先把黑色背景添加进来,然后将index.html 效果图中所示文本进行输入。要把文本的颜色改成白色,在编辑好4 个表格后,首页index.html 设计就算是完成了。

3.2 根据首页index. html 创建模板moban.dwt

(1)将首页index.html 另存为模板moban.Dwt。

(2)对ta3 进行修改。首先是将其第1 列的嵌套表格ta3?2 的第2 行向3 行1 列进行拆分;其次,把之前第2 行的图片index_04 作剪切操作,并粘贴到第3行;接下来,对表格ta3 的第4 列第2 行的图片index_03 也进行剪切操作;最后,剪切表格ta3 的第4 列第1行文本“快速导航”,将其粘贴到第1 行。

3.3 根据模板创建网页jieshao.html

上文进行了模板的创建,在此基础上,我们来新建一个网页,将其进行保存,文件名为jieshao.html,我们将嵌套表格ta3?3 插入可编辑区bianjiqu,表格的属性为1 行1 列宽100%,表格的单元格边距、边框粗细和单元格间距都为0。

根据jieshao.html 效果图,我们向ta3?3 表格中导入素材中相应文本,然后基于CSS 样式,来进行字体、字号和行距的调整,最后编辑好网页jieshao.html。

3.4 根据模板创建网页liuyan.html

基于模板,新建立1 个命名为liuyan.Html 的文件,并保存。

我们首先将表单插入可编辑区bianjiqu,接着将嵌套表格ta3?4 插入进来, 其结构为7 行2 列宽100%,边框粗细为1,单元格边距和间距都为0。

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

我们按照题目的相关要求,会在模板中加入一些超链接, 并进行更新和保存。由此, index. html,jieshao.html,liuyan.html 即编辑和制作完成。

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

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

(2)网页中所使用的表格大于1 个,我们就需要对每一个表格进行命名。

(3)通常嵌套表格的宽度为100%,然而有时也会比这个小,这都是要按照实际情况来决定。

(4)表格线的粗细通常为0,在浏览时,表格线是不显示出来的。如果确实有需要,就将表格线的精细值设为1 px,从而进行显示。

(5)通常我们不需要对表格线的颜色进行修改。

确需修改的,则根据CSS 样式来进行操作。

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

5 结束语

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

参考文献:

[1] 刘浩.用表格为网页布局教学设计[J].中国教育技术装备,2015(21):108?110.

[2] 陈洪敏.DIV+CSS 布局技术在网页设计中的应用[J].现代信息科技,2023,7(2):87?89+93.

作者简介:胡晋源(1974—),本科,讲师,研究方向:中等职业学校网页制作与设计学科和信息技术学科教学方法。

猜你喜欢
网页制作计算机
计算机操作系统
穿裙子的“计算机”
基于计算机自然语言处理的机器翻译技术应用与简介
计算机多媒体技术应用初探
信息系统审计中计算机审计的应用
网站建设和网页制作的方法
浅析当前计算机网页制作的应用技术和管理流程
表格在网页中的灵活运用
Moodle平台下《网页制作》校本课程的开发
职业技能大赛对《网页设计与制作》教学的启示