第89章表单与布局排版

1、第八讲表单与布局视图排版,在申请注册时，通常需要填写一些个人信息，如姓名、年龄、联系方式等。填写信息的页面上往往会包括很多表单元素。如文本框、密码框，单选按钮、复选框、下拉菜单、列表等。所有这些表单元素合在一起，称为表单。,8.1制作表单,制作表单的步骤：1将光标定位到要制作表单的位置。2在插入工具栏单击“表单”选项，打开如图所示的表单元素列表。,3单击“表单”按钮，或选择菜单命令“插入”“表单”命令，即可在光标处插入表单；插入的表单在窗口中以红色虚线框表示，如图所示。,8.1制作表单,4将光标定位到插入的表单中，可打开表单属性面板，如图所示。,5“表单名称”输入框用于输入制作的表单名。6“动

2、作”输入框用于指定处理该表单的处理程序的路径，可以是URL地址、HTTP地址，也可以是Mailto地址。7“方法”下拉列表框用来选择将表单数据传输到服务器的方式，有默认、POST、GET三个选项。,8.1制作表单,8“目标”下拉列表框用来设定提交表单后，打开的目标网页将以何种形式进行显示。其中各选项的含义如下:_blank将在未命名的新窗口中打开目标网页_parent将在当前网页窗口的父级窗口中打开目标_self将在当前窗口中打开目标网页_top将在顶级窗口内打开目标网页9“MIME类型”下拉列表框用于指定提交给服务器进行处理的数据使用的编码类型。默认设置为“application/x-www

3、-form-urlencode”，通常与POST方法协同使用。如果要创建文件上传表单，则应选择“multipart/form-data”类型。,8.2插入表单对象,表单对象的插入有以下两种方法:方法1选择菜单“插入”“表单对象”子菜单列表中对应的命令即可。方法2在“表单”插入工具栏的选项中单击相应的按钮即可插入。,8.2插入表单对象,8.2.1添加表单按钮表单按钮在表单中用于控制表单的操作。添加按钮的步骤：1在“表单”插入工具栏中，单击“按钮”图标即可在表单中制作一个“提交”按钮，选中该按钮，按钮属性面板如图所示。,2“按钮名称”输入框用于输入按钮的名称。3“标签”输入框用于输入在按钮上显示的

4、文字如:“提交”，便于浏览者知道该按钮的作用。4“动作”选项组用于指定单击按钮后将要产生的动作。,8.2插入表单对象,8.2.2添加文本域文本域是用户在其中可输入数据的表单对象。根据文本域的行数和显示方式分为单行文本框、多行文本域和密码框3种。添加单行文本框的步骤：1将光标定位在表单中要插入文本框的位置。2.在“表单”插入工具栏中单击“文本字段”按钮，即可在表单域中添加文本框，同时“属性”面板中显示文本框的参数，如图所示。,8.2插入表单对象,3“文本域”输入框用于输入文本框的名称，该名称在该网页中是惟一的，用于在脚本程序中作为该文本框的变量名。4“字符宽度”输入框用于设置文本框中允许输入的字

5、符数，同时规定了文本字段的宽度。默认值约为24个字符。5“最多字符数”输入框用于设置文本框中所能输入的最大字符数。6“类型”选项组显示了当前文本框的类型，也可通过单选项来转换不同的文本域。7“初始值”输入框用于输入文本框中默认状态时显示的内容,8.2插入表单对象,8.2.2添加文本域添加多行文本域的步骤：1将光标定位在表单中要插入多行文本域的位置。2在“表单”插入工具栏中单击“文本域区域”按钮，即可在表单域中添加多行文本域，同时“属性”面板中显示多行文本域的参数。3在“文本域”和“字符宽度”输入框中按单行文本框的方法进行设置即可。4“行数”输入框用于设置多行文本域中的可见行数，“类型”选项组显

6、示了当前的文本域类型为“多行”。5“换行”下拉列表框用于设置当文本域中的内容超过一行时的换行方式。6“初始值”输入框用于输入文本域中默认状态时显示的内容,8.2插入表单对象,8.2.2添加文本域添加密码框的步骤：1将光标定位在表单中要插入密码框的位置。2在“表单”插入工具栏中单击“文本字段”按钮，则在表单域中添加一个文本框。3在“属性”面板的“类型”栏中选择“密码”单选项，其它选项按文本框的方法进行设置即可。,8.2插入表单对象,8.2.3添加复选框复选框用于在信息栏中选择一个或多个选项。添加复选框的步骤：1将光标定位到表单中要添加复选框的位置。2在“表单”插入工具栏中单击按钮，即可在表单中添

7、加一个复选框，同时显示复选框的属性面板，如图所示。3“复选框名称”用于在输入框中输入复选框名称，该名称为复选框变量名。4“选定值”输入框用于输入复选框选中时的取值，该值将传送给服务器端表单处理程序，但不会在表单域中显示。5“初始状态”栏用于设置浏览器中首次载入表单时复选框是否处于选中状态。,8.2插入表单对象,8.2.4添加单选按钮单选按钮一般用在从多个选项中选中其一的情况。添加单选按钮的步骤：1将光标定位到表单中要添加单选按钮的位置。2在“表单”插入工具栏中单击按钮添加单选按钮，同时打开单选按钮属性面板，如图所示。3在没有对单选按钮进行设置前，可以复制多个单选按钮，然后在每个单选按钮后添加提

8、示信息，如“男”，“女”。,8.2插入表单对象,8.2.4添加单选按钮添加单选按钮组的步骤：1将光标定位到表单中需要插入单选按钮组的位置。2在“表单”插入工具栏中单击“单选按钮组”按钮，打开如图所示的“单选按钮组”对话框。,8.2插入表单对象,8.2.4添加单选按钮添加单选按钮组的步骤：3“名称”输入框用于输入单选按钮组的名称。4在“单选按钮”栏的“Label”列表中选择“单选”，并重命名单选按钮的文本项，“Label”列表实际上设定的是单选按钮旁边的说明文字。5当列表中的两个“单选”项都命名完后，若还需要添加单选项，则单击“+”按钮添加“单选”项，如图所示。,8.2插入表单对象,8.2.4添

9、加单选按钮添加单选按钮组的步骤：6若不需要列表中的某项，可单击“一”按钮从列表中删除不要的单选项。7若需调整列表中某项的顺序，则可在列表中选择要调整顺序的项，单击按钮调整到需要的位置即可。8“布局，使用”栏用于选择按钮布局方式。9设置完成后单击“确定”按钮则在光标所在的位置添加一组单选按钮组。10分别选取各单选按钮，在“属性”面板中设置其选定值和初始状态等参数。,8.2插入表单对象,8.2.5添加列表/菜单列表/菜单项用于显示较多的选项。添加列表/菜单的步骤：1将光标定位到表单中要插入列表或菜单的位置。2在“表单”插入工具栏中单击“列表/菜单”按钮，同时显示“列表/菜单”属性面板。3属性面板中

10、的“类型”选项组用于选择类型是“菜单”还是列表，如选择“菜单”单选项时，属性面板中为菜单的设置参数，如图所示。,8.2插入表单对象,8.2.5添加列表/菜单添加列表/菜单的步骤：4单击“列表值”按钮，打开如图所示的“列表值”对话框。5“项目标签”列表用于输入要添加的菜单项。6在“值”列中可设置列表/菜单的值，该值可用于在脚本或应用程序中使用。,8.2插入表单对象,8.2.5添加列表/菜单添加列表/菜单的步骤：7列表和菜单可以相互转换，如在属性面板中选择“类型”单选组中的“列表”单选项，则属性面板为列表参数，如图所示。8“高度”输入框用于设置列表的高度，单位是行。9在“选定范围”栏中，可选取“允

11、许多选”复选框设置列表的可选取项。,8.2插入表单对象,8.2.6添加文件域文件域看上去是一个文本框再加上一个“浏览”按钮，如图所示。添加文件域的步骤：1将光标定位到表单中要添加文件域的位置。2在“表单”插入工具栏中单击“文件域”按钮，即可添加文件域，并打开其“属性”面板，如图所示。,8.2插入表单对象,8.2.7添加图像域添加图像域的步骤：1将光标定位到要添加图像域的位置。2单击“表单”插入工具栏中的按钮，或选择菜单“插入”“表单”“图像域”命令，打开如图所示的对话框。,8.2插入表单对象,8.2.7添加图像域添加图像域的步骤：3在“查找范围”下拉列表框中找到要插入的图像所在的文件夹，在文件

12、列表中选择需要的文件。4单击“确定”按钮将选择的图像添加到表单域中，“属性”面板如图所示。,8.2插入表单对象,8.2.7添加图像域添加图像域的步骤：5“属性”面板的“图像区域”输入框用于设置图像域的变量名，该变量名用于表单处理程序。6“宽”和“高”输入框用于设置图像的输出宽度和高度。7“源文件”输入框用于修改图像域的路径。8“对齐”下拉列表框用于选择图像与文字的相对对齐方式。9“替代”输入框用于输入当浏览器不支持图像格式时图像的替换文字说明。10单击“编辑图像”按钮，可以启动图像的外部编辅器，并对图像进行编辑。,8.2插入表单对象,8.2.8添加隐藏域隐藏域是一种在浏览器上不显示的控件。添加

13、隐藏域的步骤：1将光标定位到要添加隐藏域的位置。2单击“表单”插入工具栏的按钮，或选择菜单“插入”“表单”“隐藏域”命令，即可在光标处添加隐藏域，它显示为一个图标，同时打开隐藏域“属性”面板，如图所示。3“隐藏区域”输入框用于设置隐藏域的变量名，该变量名可被表单处理程序所引用。4在“值”文本框中可以为隐藏域设置初始值。,8.2插入表单对象,8.2.9添加跳转菜单跳转菜单列出了很多友情链接。添加添加跳转菜单的步骤：1将光标定位到表单中要插入跳转菜单的位置。2单击“表单”插入工具栏中按钮，或选择菜单“插入”“表单”“跳转菜单”命令，打开如图所示的“插入跳转菜单”对话框。,8.2插入表单对象,8.2

14、.9添加跳转菜单添加添加跳转菜单的步骤：3“文本”输入框用于设定下拉列表框中某选项的说明文字。如“武汉大学”。4“选择时，转到URL”输入框用于指定菜单跳转到的路径或网址。如“”。5.“打开URL于”下拉列表框用于选择打开链接的窗口,8.2插入表单对象,8.2.9添加跳转菜单添加添加跳转菜单的步骤：6单击对话框顶部的“+”按钮，将在对话框中新添一个选项，并修改该选项的各项参数，如图所示。,8.2插入表单对象,8.2.9添加跳转菜单添加添加跳转菜单的步骤：7“菜单名称”输入框用于设置跳转菜单项的名称。8在“选项”中若选择“菜单之后插入前往按钮”复选框可在跳转菜单旁添加一个“前往”接钮，此时只有当

15、访问者单击了该按钮后，浏览器才会访问该地址。9如果选择“更改URL后选择第一个项目”复选框，可以在找不到链接的URL地址时，自动打开菜单中第一个项目对应的URL地址。10单击“确定”按钮，即可在表单中插入所设置的跳转菜单。,8.2插入表单对象,8.2.9添加跳转菜单添加添加跳转菜单的步骤：11若要修改跳转菜单中选项，则可选中插入的跳转菜单，打开的“属性”面板如图所示。12单击“属性”面板上的“列表值”按钮，将打开“列表值”对话框，如图所示。,8.2插入表单对象,8.2.9添加跳转菜单添加添加跳转菜单的步骤：13若创建的跳转菜单中有“前往”按钮，选取“前往”按钮，“属性”面板如图所示。14“按钮

16、名称”输入框用于修改创建时设置的按钮名称15“标签”输入框用于设置按钮上要显示的文字。16在“动作”栏中可选择按钮的作用是提交表单还是重设表单。,布局视图排版,Dreamweaver的“布局视图”的功能可以用来制作布局更加自由的网页。,8.3布局视图,添加布局视图的步骤：1在插入工具栏单击“布局”选项，其中包括有和布局视图相关的一些工具，如图所示。2单击“布局”按钮进入布局视图，此时会打开一个“从布局模式开始”提示窗口，其中介绍了“布局单元格”与“布局表格”工具的使用方法。3单击“确定”按钮关闭对话框并自动进入布局模式，如图所示。,8.4添加布局表格和布局单元格,8.4.1添加布局表格添加布局

17、表格的步骤：1单击“布局”插入工具栏上的“布局表格”按钮，此时鼠标就会变成“+”形状。2将鼠标放在要绘制布局表格的区域，然后按住鼠标左键拖动就能绘制出表格来，如图所示。,8.4添加布局表格和布局单元格,8.4.2添加布局单元格添加布局单元格的步骤：1在“布局”插入工具栏上单击“绘制布局单元格”按钮，然后定位到绘制单元格的位置，按下鼠标左键后拖动。松开鼠标后，表格中就会出现一个可以插入文字和图像的单元格了，如图所示。,8.4添加布局表格和布局单元格,8.4.2添加布局单元格添加布局单元格的步骤：2在布局表格中绘制完好单元格后，在“布局”插入工具栏上单击“标准”按钮，切换到标准视图下，此时的布局表

18、格就变成了普通表格，如图所示。,8.5使用标尺与网格,8.5.1使用标尺在使用布局视图创建表格时，为了更方便的定位，往往需要使用标尺和网格来了解表格或单元格的高度和宽度。当位于布局视图时，选择菜单命令“查看”“标尺”“显示”，就可以打开标尺。8.5.2使用网格当位于布局视图时，选择菜单命令“查看”“网格”“显示网格”，就可以显示网格线。,8.6调整布局表格及布局单元格,8.6.1选择布局表格和布局单元格1单击两次布局表格标签，当表格外框出现定位点时，就可以确定该表格处于选中状态。另外，单击表格上的灰色区域，也可以选中表格。如图所示。,8.6调整布局表格及布局单元格,8.6.1选择布局表格和布局单元格2如果鼠标单击的是单元格的外框，当单元格外框出现8个定位点的时候，可以确定该单元格处于选中状态。此外，在按住键盘Ctrl键的同时，在单元格的任意位置单击也可以选中单元格。如图