1、第5讲 表格与表单,【本讲导读】本讲主要介绍了网页制作的表格和表单的基本知识,熟悉表格的基本操作,以及表单的设计。【本讲要点】表格的基本操作表单的设计,5.1表格的基本操作,5.1.1 创建表格 5.1.2单元格的拆分与合并 5.1.3 行与列的添加与删除,5.1.1 创建表格,创建表格的具体步骤如下: (1)选择菜单命令【插入】表格】,会自动打开【表格】对话框。 (2)在上图中设置表格的行数与列数,默认为3行3列。 (3)设置表格的宽度。可为百分比或者像素,在此设为100,这样无论当前的窗口有多大,表格始终可以充满整个页面。,5.1.1 创建表格,(4)在【边框粗细】文本框中设置表格边框的粗
2、细。在此设置为0,数值越大,边框就越粗。 (5)设置单元格边距和间距,在此设为1。 (6)设置页眉,即为表格的对齐方式,有无、左、顶部、两者共四种选择,在此选择默认。实际操作时可根据需要选择合适的方式。 (5)此外,还有辅助功能区,可根据需要进行设置,也可留空。 (8)单击【确定】按钮,在当前文档中,插入了一个3行3列,宽度为100%的表格。,5.1.2单元格的拆分与合并,表格中行与列围成的区域称为单元格,在单元格中可以插入文本、图像等元素,也可以根据实际的需要对单元格进行合并和拆分,具体的步骤如下: (1)将单元格拆分成行或列,行数中可以输定数字,显示拆分的数量。将光标放在刚插入的表格第一行
3、,单击【属性】面板中的“拆分单元格”按钮,会弹出【拆分单元格】对话框。,5.1.2单元格的拆分与合并,(2)在对话框中将【单元格拆分】后的“列”单选按钮选中,在【列数】文本框中输入2,单击【确定】按钮,就可以把表格的第一行拆分成2列,变成2个单元格。 (3)选中刚才拆分的2个单元格,此时在属性面板中,单击【合并单元格】按钮,则2列单元格又会合并成1个。,5.1.3 行与列的添加与删除,对行与列进行添加与删除的操作步骤如下: (1)在新建的表格上分别输入文本。 (2)在第四行右击,在弹出的快捷菜单中选择【表格】插入行】命令,此时就会在当前行上方插入一行。 (3)在当前的第5行右击,在弹出的快捷菜
4、单中选择【表格插入行或列】命令。,5.1.3 行与列的添加与删除,(4)打开【插入行或列】对话框,如果选择插入【行】选项,可以设置插入的行在插入点的上或下,如果选项的是插入【列】选项,可以设置插入的列在插入点的前或后。这里仅以对行的操作为例,选择在所选位置之前插入2行。 (5)单击【确定】按钮,此时表格变成了5行。 (6)将光标置于要删除行的任意一个单元格中,右键选择【表格删除行】命令或者按下Delete键,可将该行删除。,5.2设置单元格属性,单元格作为表格的重要的组成部分,其属性的设置影响到表格的外观,将鼠标放到某个单元格内,可以通过【属性】面板对这个单元格进行设置。 在属性面板中,各参数
5、的含义如下: (1)水平对齐:有默认、左对齐、居中对齐、右对齐4种对齐方式。默认的对齐方式是左对齐,设置后的三种效果。 (2)垂直对齐:有默认、顶端、底部、基线4种方式,默认的对齐方式是居中,设置后的三种效果。,5.2设置单元格属性,(3)在【属性】面板中宽和高的文本框中输入数值,可以设置单元格的高度和宽度,此数值的单位可为像素(px)或者百分比(%) (4)单元格中设置背景图片,单击背景后的按钮,在弹出的【选择图像源文件】对话框中选择背景图像,然后单击【确定】按钮,完成背景图像的设置。 (5)设置背景色,单击背景颜色后的按钮,可以对选中的单元格背景颜色进行设置。 (6)设置单元格边框颜色,单
6、击边框颜色后的按钮,可以对所选单元格的边框颜色进行设置。,5.3设置表格属性,5.3.1 表格的边框属性 5.3.2 表格的背景属性 5.3.3表格的对齐属性 5.3.4表格的填充与间距 5.3.5 表格的嵌套,5.3.1 表格的边框属性,边框属性有2个:大小和颜色,边框的大小属性用于设置边框的宽度,在【属性】面板中“边框”选项中设置其宽度,可以设置为0或其他数值。只有在其数值大于0时,边框才可以在浏览器中可见。表格边框在网页设计过程中经常用到,有时会根据需要设置成一定的数值,以像素为单位。 边框的颜色是为了美化表格和网页而设置的,可以在“边框颜色”选项中直接输入颜色值,或单击“边框颜色”后的
7、按钮,出现颜色选择器,或采用自定义颜色适配器,进行边框颜色的设置,而且边框颜色只有在表格的宽度大于0时才有效。,5.3.2 表格的背景属性,表格的背景可以使用颜色填充也可以使用图片填充。使用背景色填充表格的步骤如下: 选中表格,在【属性】面板中的背景颜色后面的文本框中输入颜色值,或者在颜色选择框中选择背景颜色。 设置背景颜色的表格在浏览器中的显示效果。,5.3.2 表格的背景属性,使用背景图片填充表格的步骤如下: (1)选中表格,打开【属性】面板,在背景后面的文本框中输入表格背景图像的路径和名称,或者单击【文件夹】按钮,打开【选择图像源文件】对话框,选择本地图片作为背景图像。 (2)单击【确定
8、】按钮,就可以将表格的背景设置为图片,表格在浏览器中的预览效果。,5.3.3表格的对齐属性,选中表格,在属性面板中可以设置表格在文档中的对齐方式。可以设置为:左对齐、居中对齐、右对齐,根据需要进行设置,默认是左对齐。如果表格的宽度为100%时,就不需要设置对齐属性,不同的对齐属性在浏览器中的效果。,5.3.4表格的填充与间距,在属性面板中可以设置表格的填充与间距数值。填充:通过数值设置单元格内部空白区域的大小;间距:通过数值设置单元格之间的距离。设置表格填充和间距的属性效果。 使用表格的填充和间距属性可以设置细边框的表格,此属性在实际制作过程中经常用到。,5.3.5 表格的嵌套,使用表格嵌套来
9、制作网页的步骤如下: (1)单击工具栏中【插入表格】按钮,插入一个2行2列的表格。表格的属性。 (2)在第1行第1列中插入图像,第1行第2列中插入文本。 (3)在第2行的2个单元格插入和第1行同样的元素,此时文档效果。 (4)将第2行第1列的图像换成一个大图,此时文档的界面发生了错位,第1行第1列的单元格的宽度被第2行第1列的图给撑大了。,5.3.5 表格的嵌套,(5)如果需要保持第1行的原图片和文档位置不变,需要建立表格嵌套。 (6)选中第1行的2个单元格,单击【属性】面板中的“合并单元格”按钮,将第1行的2个单元格合并。 (5)然后在合并后的单元格中插入一个1行2列的表格,并设置边框为0。
10、 (8)单击【确定】按钮,将表格插入到单元格中。 (9)将原来单元格的图像和文本分别移到新建的这个表格的2个单元格中,保存文档,并在浏览器中预览效果。,5.4表格的排序,在网页中,用户经常要对表格中的大量数据进行排序,使用Dreamweaver8可以很容易实现将表格内的数据排序,具体的操作步骤如下: (1)选中页面中的表格。 (2)选择菜单命令【命令】排序表格】,弹出【排序表格】对话框。 (3)设置排序按【列3】。 (4)设置【顺序按数值顺序降序】。 (5)设置【再按顺序按字母顺序升序】。 (6)选中【完成排序后所有行的颜色保持不变】复选项。 (5)单击【确定】按钮,表格中数据的排序结果。,5
11、.5格式化表格,下面将介绍如何美化表格,具体的操作步骤如下: (1)选中表格,单击【命令】格式化表格】选项。 (2)单击【格式化表格】选项后,将弹出【格式化表格】对话框。 (3)在【格式化表格】对话框的左上角有各种样式,读者可以根据各自的喜好自行选择。本例中选择【AltRows:Earth Colors】这一项。这里需要注意的是最后一项,该项询问是否把各样式代码添加到TD标注里而非默认添加到TR标签中。建议不要勾选该项,否则会生成比默认设置多得多的代码。,5.6表格数据的导入和导出,5.6.1 表格数据的导入 5.6.2 表格数据的导出,5.6.1 表格数据的导入,(1)在将Excel中的数据
12、导入之前,也可以先将Excel中的文本另存为文本格式的文件再导入,但要注意保存类型应选择【文本文件(制表分隔符)】。 (2)选择菜单命令【文件导入表格式数据】,弹出“导入表格式数据”对话框。 (3)单击【浏览】按钮,选择存放数据的文本文件即cj.txt文件。其定界符项要和文本文件里的分离符相对应,因为cj.txt文件里用的是制表符,所以在此选择了Tab,其他各项可根据读者的需要进行修改。 (4)如果选择菜单命令【文件导入Excel文档】,则弹出“导入Excel文档”对话框。 (5)单击【确定】按钮,完成表格数据的导入,此时再文档中插入了表格。,5.6.2 表格数据的导出,利用Dreamweav
13、er 8同样可以将表格数据导出为文本文件,具体的操作步骤如下: (1)将光标移至表格中的任意一个单元格,选择菜单命令【文件导出表格】,弹出“导出表格”对话框。 (2)选择【定界符】下拉列表中的选项,设置导出表格后各单元格之间用什么符号来进行分隔,在此例中选择Tab。 (3)选择【换行符】下拉列表中的选项,设置导出的表格适用于哪个操作系统,本例选择Windows。 (4)单击【导出】按钮,弹出【表格导出为】对话框,在文件名后的文本框中输入导出的文件名及扩展名。(5)单击【保存】按钮,完成表格数据的导出。,使用表单可以收集来自用户提交的各类信息,它是网站管理者与浏览者之间沟通的重要途径。通过表单收
14、集和对用户反馈意见的分析,作出科学的和合理的决策,是一个网站成功的重要因素。有了表单,网站不仅是信息提供者,同时也是信息收集者,充分体现了网站的动态和交互效果,真正体现了用户与网站交互的目的,表单的通常应用是调查表、订单和搜索界面等。 表单有两个重要的组成部分,一是描述表单的HTML源代码;二是用于处理用户在表单中输入的信息的服务器端应用程序或客户端脚本等,所有的表单元素放到表单域中才会有效,因此制作表单页面的第一步是创建表单域。,表单,5.7 表 单 对 象,在Dreamweaver 8中,表单输入类型称为表单对象,表单可以包含标准对象,如文本域、按钮、图像域、复选框、单选按钮、列表菜单、文
15、件域等。 在菜单栏选择【插入表单】选项,切换到【表单】插入栏,在插入栏中单击要插入的对象类型按钮或者将其拖入到文档窗口中。,在图1中,由左边第一个图标开始,分别代表表单域、文本字段、隐藏域、文本区域、复选框、单选按钮、单选按钮组、列表/菜单、跳转菜单、图像域、文本域、按钮、标签、字段集。下面将详细介绍各个表单对象的使用。,图1:,5.8 创建表单域,构成表单文档的图片、文本等元素必须处于表单区域内,这样才会被确认为表单文档,为了使文档能够顺利运行,首先要制作表单文档的框架,即表单区域。由此可见,要先设置表单文档,然后再插入构成元素。 要在网页中创建表单文档,可以选择菜单命令【插入表单表单】,或
16、者选择【插入】栏中的【表单】选项卡,在【表单】选项卡中单击【表单】按钮,将在文档中插入一个表单,如图2所示。,图2:,要设置表单属性,可以先选中表单,然后选择【窗口属性】命令来显示表单【属性】面板,如图3所示。,图3:,【属性】面板中的各个选项参数含义为: (1)表单名称:用于输入表单的名称,在同一个文档中表单的名称必须唯一; (2)动作:用于指定处理该表单的动态页或者脚本路径,可以是HTTP类型的地址或者mailto类型的地址; (3)目标:若要使链接的文档出现在当前窗口或者框架以外的其他位置,可以从【属性】面板中的“目标”下拉列表中选择一个选项; (4)类:用于指定用于该表单的CSS样式;
17、 (5)方法:用于选择需要设置表单数据的发送方法,包含3个选项; (6)MIME类型:用于指定对提交给服务器进行处理的数据使用MIME编码类型。,5.9 使用表单对象,表单由文本字段、传送按钮、单选按钮等表单对象组成。当访问者将信息输入表单并单击“提交”按钮时,这些信息将被发送到服务器。服务器端脚本或应用程序在该处对这些信息进行处理,并且通过将请求信息发送回用户,基于该表单内容执行一些操作来进行响应。因此表单样式文档的学习是进行网页编程的基础。,5.9.1 创建文本域,在Dreamweaver 8中,可以使用“文本字段”和“文本区域”两种方法来创建文本域,文本域包括“单行”、“多行”和“密码”
18、3种类型。以适应不同情况下的需要。文本域在网页中的主要作用是输入如用户名、密码等相关信息,在网页中创建文本域的具体步骤如下:1、选择【插入】工具栏中的【表单】选项卡,在【表单】工具栏中单击“文本字段”按钮,将在文档中创建一个单行的文本区域。,图4:,2、设置文本区域属性。先单击文档中的文本域,然后选择菜单命令【窗口属性】,以显示其【属性】面板。,图5:,【属性】面板中的各个选项参数含义为: (1)文本域:用于输入文本域的名称; (2)字段宽度:指定在文本字段栏中能够显示的最多字数,用于设置文本字段的长度; (3)类型:指定在文本字段中可以输入的最多字数; (4)类:用于应用CSS样式中的类;
19、(5)行数:用来限制文档的行数; (6)换行:用于指定多行文本的换行方式,其中包括4个选项:,5.9.2 创建隐藏域,在浏览器中不被显示出来的文本域主要是用来实现浏览器和服务器后台隐藏数据的交换信息。在提交表单时,该域中存储的信息将一起被发送到服务器。 选择菜单命令【插入】表单】隐藏域】,将在文档中创建一个隐藏域。,图6:,要设置隐藏域,可以单击选择文档中的隐藏域,然后再选择【窗口属性】命令,就可以显示隐藏域的“属性”面板。,图5:,【属性】面板中的各个选项参数含义为: (1)隐藏区域:指定隐藏域的名称,默认为hiddenField; (2)值:设置要为隐藏域指定的值,该值将在提交表单时传递给
20、服务器。,5.9.3 创建文件上传域,通过文件上传域,用户可以实现将计算机上的文件(如文档或图形文件),上传到服务器。文件域的外观与其他文本与类似,只是文本域还包含一个“浏览”按钮。用户可以手动输入要上传的文件的路径,也可以使用“浏览”按钮定位并选择该文件。选择菜单命令【插入】表单】文件域】,将会在文档中创建一个文本上传域。,图8:,单击文件域,然后单击工作区域下的属性标签,就可以看到文件域的【属性】面板,面板中各个参数的含义与文本域相同。,图9:,5.9.4 创建复选框,复选框是预定义选择对象的表单对象,利用这样的表单对象可以限制访问者填写的内容,并且有利于信息的统计。 选择【插入】表单】复
21、选框】命令,将在文档中创建一个复选框。,图10:,要设置复选框的属性,可以先单击复选框,然后执行【窗口属性】命令,以显示复选框【属性】面板。,图11:,【属性】面板中各个参数的含义如下: (1)复选框名称:用于输入复选框的名称; (2)选定值:用于输入复选框选中后控件的值; (3)初始状态:用于设置复选框在文档中的初始状态。,5.9.5 创建单选按钮及单选按钮组,单选按钮是预定义选择对象的表单对象,单选按钮组是单选按钮的组合。当需要对不同的单选按钮进行选择时,为了使不同组之间互不干涉,即需要使用单选按钮组。 选择菜单命令【插入表单单选按钮】,如图12所示,【属性】面板中的参数含义和复选框的相同
22、。,图12:,要使用单选按钮组,可以执行菜单栏【插入表单单选按钮组】。,图13:,对话框中各个参数的含义如下: (1)名称:用于指定单选按钮组的名称; (2)和:用于增减单选按钮; (3)标签:左边列为按钮的Label标签; (4)值:右边列是按钮的值。,5.9.6 创建列表和菜单,列表和菜单是比较常用的两个表单,其优点是在有限的空间为用户提供多个选项,列表提供一个滚动条,允许访问者浏览多个选项并进行多重选择。菜单仅显示一个选项,该项也是活动选项,访问者只能从菜单中选择一项。 选择菜单栏中的【插入表单列表/菜单】命令,将在文档中创建一个列表和菜单,默认情况下为菜单,如图14所示。,图14:,若
23、要设置列表菜单属性,可以单击选取文档中的菜单,然后执行菜单栏中的【窗口属性】命令,显示列表/菜单【属性】面板,如图15所示。,图15:,面板中各个参数选项的含义如下: (1)列表/菜单:用于输入列表/菜单的名称; (2)类型:用于选择“列表/菜单”的显示方式,包括“菜单”和“列表”选项; (3)高度:用于输入列表框的高度,单位为字符; (4)列表值:单击打开列表值对话框。在对话框的左边列为列表和菜单的项目标签,也就是显示在列表中的名称;右边是该项的值,也就是该项要传送到服务器的值,可以通过单击左上角的“”、“”按钮来增删项目,通过右上角的上下按钮来改变项目的显示顺序; (5)类:指定用于该列表
24、和此案单的CSS样式; (6)初始化时选定:用于设置列表或菜单的初始值。,5.9.7 创建跳转菜单,跳转菜单实际上是一种下拉列表菜单,它通常被用来实现网页之间的跳转,一般在论坛上比较常用。要在网页中创建跳转菜单,可以通过以下方法实现:执行菜单命令【插入表单跳转菜单】,打开【插入跳转菜单】对话框,如图16所示。,图16:,对话框中各个参数的含义如下: (1)“”和“”:增加或减少项目; (2)上移或下移按钮:单击上移或下移按钮,可以在菜单列表中上移或下移项; (3)菜单项:菜单列表中显示所有项; (4)文本:在“文本”文本框中,为菜单项输入要在菜单列表中显示的文本; (5)选择时,转到URL:单
25、击文件夹图标并通过浏览找到要打开的文件,或者在文本框中输入该文件的路径;,(6)菜单名称:输入菜单项的名称; (5)选项:选中“选项”下的“菜单之后插入前往按钮”复选框,可添加一个“前往”按钮,而非菜单选择提示。如果要使菜单选择提示,应选中“选项”下的“更改URL后选择第一个项目”复选框。 如果用户要编辑跳转菜单,可以在工作区域中选择跳转菜单,然后执行菜单栏中的【窗口属性】命令,在打开的“属性”面板中设置跳转菜单,它的设置与菜单/列表属性设置相似。,5.9.8 创建文本表单按钮,表单制作好以后,就要把表单提交给服务器,这就需要文本表单按钮来完成表单制作的最后一步,另外,如果对输入的值不满意,可
26、以插入一个重置按钮重新在表单中设置数据。 执行【菜单】表单】按钮】命令来插入表单按钮。如图17所示。,图17:,要设置“提交”按钮属性,可以单击选取“提交”按钮,然后执行菜单栏命令【窗口属性】,打开其【属性】面板,如图18所示。,图18:,面板中个选项参数含义如下: (1)按钮名称:用于输入按钮名称; (2)值:用于设置按钮标签的文本; (3)“提交表单”单选按钮:将当前按钮设置为一个提交表单类型的按钮; (4)“无”单选按钮:不能对当前按钮设置行为; (5)“重设表单”单选按钮:将当前按钮设置为一个复位类型的按钮。,5.9.9 创建图形提交按钮,在网页中除标准表单提交按钮以外,还有图形提交按
27、钮,采用图形提交按钮一般可以增强网页的美观效果。如果要将某个JavaScript行为附加到该按钮,可以先选择该图形,然后在【行为】面板中选择行为,这个在其他的章节将会介绍到。在网页中插入图形提交按钮的步骤如下: (1)执行菜单命令【插入表单图像域】,弹出如图19所示的“选择图像源文件”对话框。,图19:,(2)在【选择图像源文件】对话框中选择一幅图像,单击“确定”按钮,在网页中插入一幅图像。 (3)在工作区中选中图像,然后执行菜单栏中的【窗口属性】命令,打开其【属性】面板,如图20所示。,图20:,5.10 制作注册表单实例,(1)选择菜单命令【插入】表单】表单】,如图21所示,将插入一个表单
28、。,图21:,(2)将光标定位于表单内,执行菜单命令【插入表格】,弹出如图22所示的对话框,在对话框中设置行数为6,列数为1,表格宽度为“380”。,图22:,如图23所示为插入的表格,下一步将插入表单对象。,图23:,(3)在表格的第1行输入“用户注册系统”,并设置相应的格式。如图24所示。,图24:,(4)把光标定位于表格的第2行,选择菜单命令【插入】表单】文本域】,弹出如图5-25所示的对话框。在“标签文字”文本框中输入“姓名”,然后选中“无标签标记”和“在表单项前”单选按钮,并单击“确定按钮”。如图25所示为插入的文本域。,图25:,如图26所示为插入的文本域。,图26:,(5)重复第
29、(4)步的操作,分别插入“密码”、“确认密码”、“邮件”四个文本域,并设置相应的格式,操作完毕如图25所示。,图25:,(6)选择菜单栏的【插入表单按钮】命令,在弹出“输入标签辅助功能属性”对话框中,选中“无标签标记”和“在表单项前”单选按钮,然后单击“确定”,即可插入一个按钮,如图28所示。,图28:,(5)重复第6步,再插入一个按钮,然后单击选中第1个按钮,在该按钮的属性面板中,将其值设为“会员注册”,动作选择“提交表单”;第2个按钮的值设为“重置”,动作选择“重设表单”,如图29所示。,图29:,(8)选中表单对象,在服务器行为面板中选中【插入新纪录】选项,弹出如图30所示的对话框,设置如下:,图30:,(9)保存网页,按F12键在浏览器中预览效果,如图31所示。,图31:,本 章 小 结,本章主要介绍了表格和表单对象的基本概念、用途及具体用法,为制作动态网页打下基础。但表单的设计需要与功能及程序相结合,将前台的显示界面与后台的程序完整的结合才可以实现用户与网站的完美交互。因此更需要我们熟悉和掌握好表单的各个元素的使用和设置。,