标签。
当要创建一个层时,执行如下操作。
1.创建一个HTML文档。
2.调出【插入】面板,选择【布局】选项,如图9-2-1所示。
图9-2-1【插入】面板的【布局】选项
3.单击【描绘层】
按钮,在页面中要创建“层”的位置上,拖拽鼠标创建层,如图9-2-2所示。
图9-2-2创建“层”
提示:
当要一次传见出多个层时可以在创建层的时候,按下Ctrl键。
9.2.2创建嵌套层
嵌套层也就是在一个层中继续创建一个新的层,“子层”将按照“父层”的属性进行调整,例如,移动“父层”时“子层”也会同时移动。
在以前的嵌套概念中,“子对象”将无法比“父对象”的尺寸大,但是在嵌套层中完全可以制作大于“父层”尺寸的“子层”,换句话说,“子层”可以完全将“父层”覆盖住。
创建嵌套层的方法有两种:
●一般的创建嵌套层的方法
1.单击【布局】选项中的【描绘层】按钮,在【文档】窗口拖拽鼠标创建一个层,如图9-2-3所示。
图9-2-3创建一个“层”
2.继续单击【描绘层】按钮,按下Alt键,在创建的层中继续拖拽鼠标创建一个“子层”,如图9-2-4所示。
这时的【层】面板如图9-2-5所示。
图9-2-4创建一个“子层”
图9-2-5【层】面板
●使用【层】面板创建嵌套层
通过使用【层】面板,可以使创建嵌套层更加方便
1.单击【布局】选项中的【描绘层】按钮,在【文档】窗口中按下【Ctrl】键的同时,拖拽鼠标创建若干个层。
但是这些层并不是嵌套层。
【层】面板如图9-2-6所示。
图9-2-6【层】面板
2.按下Ctrl键,在【层】面板中拖拽“子层”到“父层”中,如图9-2-7所示。
操作后【层】面板如图9-2-8所示。
图9-2-7拖拽“子层”到“父层”中
图9-2-8完成拖拽
9.2.3编辑层属性
可以通过手动的方式和【属性】面板的调整,重新编辑层的属性。
当要快速自由地编辑层属性时,例如可以通过使用鼠标直接调整层的“位置”和“尺寸”。
如果要精确调整层的“位置”、“尺寸”和其他属性的精确参数时,可以使用【属性】面板进行调整。
【属性】面板如图9-2-9所示。
图9-2-9【属性】面板
●【层编号】:
在该文本框中输入当前选中的层的名称。
●【左】、【上】:
在两个选项的文本框中输入该层的精确位置坐标。
●【宽】、【高】:
在两个选项的文本框中输入该层的精确尺寸。
●【Z轴】:
在该选项的下拉列表中可以确定层的堆叠顺序。
编号较高的层显示在编号较低的层的上面。
值可以为正值,也可以为负值。
●【可见性】:
指定该层最初是否可见。
从以下选项中选择:
“默认”:
不指定可见性属性;
“继承”:
使用该层的“父层”的可见性属性;
“可见”:
显示该层的内容,而不管“父层”的值是什么;
“隐藏”:
隐藏该层的内容,而不管“父层”的值是什么。
●【背景图像】:
在该选项右侧的文本框中输入要定义为背景图像的路径,或者单击右侧的【浏览文件】按钮,在弹出的对话框中选择要使用的图像文件,将其定义到层的背景中。
●【背景颜色】:
单击该选项右侧的按钮
按钮,在弹出的面板中选择颜色,或直接在右侧的文本框中输入“十六进制颜色代码”定义颜色,将选定的颜色定义到层的背景上。
●【类】:
在该下拉列表中可以选择在该文档中创建的CSS样式,定义该层中的元素使用的“样式表”。
●【溢出】:
在该选项的下拉列表中可以确定在层的内容超出尺寸时的设置方式。
当选择“可见”时,增加层的大小,使它的所有内容均可见,层向右下方扩展;当选择“隐藏”时,保持层的尺寸并剪辑任何超出的内容,并且不提供任何滚动条的使用;当选择“滚动”时,不论内容是否超出层的尺寸,在层中都添加滚动条;当选择“自动”时,使滚动条仅在层的内容超出它的边界时才出现。
●【剪辑】:
在该选项区域中可以确定【上】、【下】、【左】和【右】的可视区域。
层是一个非常游泳的Web页面的布局工具,但是这一节中的内容并没有将所有层的使用讲述完毕。
读者可以自己去探索尝试。
9.3制作表单
在日常的学习、生活和工作中,使用Internet最为普遍的还是Email,当在一个站点中申请一个邮箱时,都需要填写大量的用户信息,如图9-4-1所示为hotmail邮箱的注册页面。
图9-3-1hotmail邮箱的注册页面
在图9-3-1中可以看到页面中出现了需要填写的一些内容,这里的内容并不是要求浏览者通过打印进行填写的,而是使用鼠标和键盘在Web页面中直接填写的,通过网络直接上传到相应的服务器上,从而实现“用户信息”的采集。
在网页中出现的这些“交互信息”对象,称之为“表单”。
Dreamweaver提供了多种表单对象的创建功能,在【插入】菜单中的【表单】选项中提供了左右的表单对象,在这一节中将介绍一些网页中常用表单对象的使用方法。
9.3.1插入表单
在Web页面中如果要使用表单时,都需要利用两部分使用表单部分,一个部分为表单标签,另一部分为相应的表单对象。
如果在页面中没有表单标签,表单对象通用可以正常显示在页面中,也可以进行填写,但是无法提交。
换句话说,不使用表单标签创建的表单页面根本就没有真正的使用意义,所以表单标签的使用是比较重要的。
下面我们进行插入表单的操作。
1.调出【插入】面板,选择【表单】选项,如图9-3-2所示。
图9-3-2【插入】面板的【表单】选项
2.单击【表单】
按钮,或选择菜单【插入】|【表单】|【表单】命令。
3.此时,在【文档】窗口中出现一个表单标签,以红色虚线表示,如图9-3-3所示。
图9-3-3插入表单
当一个表单创建完毕后,需要对其进行详细的设置,方能够发挥其本身的作用。
当需要对表单标签进行设置时,用鼠标将其选中,调出【属性】面板如图9-3-4所示。
在【属性】面板中可以对表单进行详细的设置。
图9-3-4【属性】面板
●【表单名称】:
在该文本框中输入一个唯一的名称字样。
●【动作】:
在该文本框中可以指定处理该表单的动态页或脚本的路径。
可以在文本框中输入完整路径,也可以单击【浏览文件】按钮在弹出的对话框中定位包含脚本或应用程序页的相应文件夹。
在该文本框中还可以输入一个URL或mailto(电子邮件地址)。
提示:
在使用mailto地址时,可以将表单中的内容发送到相应的邮箱中。
但是,有些浏览器被设置为:
当选择mailto的表单按钮时,进行提示。
虽然许多用户会让邮件功能执行,但是,也确实有人设置为阻止邮件发送。
●【目标】:
在该下拉列表中可以选择到不同的选项,从而定义新页面打开的位置:
“_blank”:
在未命名的新窗口中打开目标文档;
“_parent”:
在显示当前文档的窗口的父窗口打开目标文档;
“_self”:
在提交表单所使用的窗口中打开目标文档;
“_top”:
在当前窗口的窗体内打开目标文档。
●【方法】:
在该下拉列表中可以选择表单数据传输到服务器的方法。
“GET”:
当选择该选项时,将值附加到请求该页的URL中;
“POST”:
当选择该选项时,将在HTTP请求中嵌入表单数据。
●【MIME类型】:
在该下拉列表中可以制定对提交给服务器进行处理的数据使用MIME编码类型。
application/x-www-form-urlencode选项通常与“POST”共同使用。
如果要创建文件上传域,则选择multipart/form-data选项类型。
●【类】:
在该下拉列表中可以定义在该表单中的元素CSS样式。
9.3.2使用文本字段
当表单中需要填入文本信息时,就需要使用到文本字段。
在该表单区域中不能输入太多文字。
当要制作填写“姓名”、“邮件地址”、“家庭地址”和“密码”等类似信息时,可以使用文本字段。
1.在已经插入表单的情况下,单击【文本字段】
按钮,不设置弹出的对话框,直接单击【确定】按钮。
2.此时,在红色虚线区域内出现文本字段,如图9-3-5所示。
图9-3-5插入文本字段
3.按下键盘上的F12键,在浏览器中浏览该文本字段。
当要对创建的文本字段进行属性调整时,可以用鼠标选中该文本字段,按【Ctrl+F3】调出【属性】面板,如图9-3-6所示。
图9-3-6【属性】面板
●【文本域】:
在该文本框中输入唯一的名称字样。
●【字符宽度】:
在该文本框中可以设置域中最多可显示的字符数。
此数字可以小于【最多字符数】,【最多字符数】指定在域中最多可输入的字符数。
例如,如果在【字符宽度】文本框中输入为“20”(默认值),而浏览者输入了100个字符,则在该文本域中只能看到其中的20个字符。
注意:
虽然无法在该域中看到多出来的字符,但域对象可以记录这些字符,而且会被发送到服务器中进行相应处理。
●【最多字符数】:
在该文本框中可以设置文本字段中最多可输入的字符数。
例如使用【最多字符数】文本框可以设置“邮政编码”限制为6位数,将“密码”限制为16个字符等。
如果将【最多字符数】文本框保留为空白,则浏览者可以输入任意数量的字符。
如果文本超过域的【字符宽度】的设置时,文本将滚动显示。
如果浏览者输入的字符超过【最大字符数】时,计算机会发出“警告”音。
●【类型】:
在该选项区域中,可以选择三种不同的选项,从而定义“文本框”的类型,三个选项分别为:
“单行”:
当选中该选项时,文本域中只能输入一行文字,不支持换行;
“多行”:
当选中该选项时,文本域中可以输入多行文字内容,支持换行;
“密码”:
当选中该选项时,文本域中输入的文字作为“密码”处理,所有的文字以星号(*)显示,并无法进行复制和粘贴操作。
提示:
因为采用的浏览器不同,可能显示密码的符号也有所不同。
●【初始值】:
在该文本框中可以指定在下载该表单时文本域中即刻显示的内容。
例如输入年份时可以先输入“2006”字样,方便浏览者修改。
●【类】:
在该下拉列表中可以定义该文本字段的CSS样式。
9.3.3使用文本区域
当表单中需要填入大量的文本信息时,就需要使用到文本区域。
在该区域中可以输入较多文字。
当填写的文字过多时,可以通过调整滚动条调整显示文字的位置。
当要制作填写“流言”等信息时,可以使用文本区域。
1.创建表单标签以后,在【插入】面板的【表单】选项中单击【文本区域】
按钮,在弹出的对话框中不设置任何参数,按【确定】按钮创建文本区域。
2.此时,在红色虚线区域内出现文本区域,如图9-3-7所示。
图9-3-7插入文本区域
3.按下键盘上的【F12】键,在浏览器中浏览该文本区域。
当要对创建的文本区域进行属性调整时,可以用鼠标选中该文本区域,按【Ctrl+F3】调出【属性】面板,如图9-3-8所示。
图9-3-8【属性】面板
可以发现,这就是文本字段的【类型】选择“多行”时的界面,换句话说,当文本字段的【类型】设为“多行”时,文本字段则转换为文本区域,同理,当文本区域的【类型】设为“单行”时,文本区域将转换为文本字段。
所以这里就只介绍在文本字段属性中没有出现属性设置。
●【行数】:
在该文本框中输入数值可以定义该文本区域同时显示的行数,当浏览者输入的行数多与该选项设置的值时会自动显示滚动条。
●【换行】:
在该选项区域中,可以选择三种不同的选项,从而定义文本区域的换行模式,三个选项分别为“关”、“虚拟”和“实体”,读者可以更换选项来查看文本区域显示效果的差异。
9.3.4使用按钮
按钮是表单对象中一个非常常用的表单对象,通过对按钮的使用,可以实现表单的提交和重设,相应的功能文字会自动放置到按钮的上面。
1.创建表单标签以后,在【插入】面板的【表单】选项中单击【按钮】
按钮,在弹出的对话框中不设置任何参数,按【确定】按钮创建按钮。
2.此时,在红色虚线区域内出现“提交”按钮,如图9-3-7所示。
图9-3-9插入“提交”按钮
3.按下键盘上的F12键,在浏览器中浏览该按钮的效果。
按钮的【属性】面板如图9-3-10所示,可以在【属性】面板中对按钮进行属性调整。
图9-3-10【属性】面板
●【按钮名称】:
在该文本框中定义该按钮的名称。
●【值】:
在该文本框中输入的文字,将显示在按钮的上面。
●【动作】:
在该选项区域中可以选择“提交表单”、“重设表单”和“无”选项。
当选中“提交表单”选项时,单击该按钮,可以将同一个表单标签中的数据提交到相应的