您好,欢迎来到素彩网!

DreamWeaver中表单的使用和电子邮件表单的打造

来源:sc115.com | 236 次浏览 | 2011-06-29

标签: Dreamweaver DreamWeaver中表单的使用和电子邮件表单的制作 Dreamweaver教程

首先,看一下你将要做的电子邮件表单的最后界面,当然,这只是一个简单的例子,旨在抛砖引玉而已,相信您将做得更加漂亮或设计得更加有条理。
  接下来,就开始制作这个电子邮件表单:
  第一步:插入表单,用“Insert”——“Form”命令或选择对象面板Objects上的“Forms”中的黄色,此时将弹出一个红色虚框,这就是表单的外围,在下面讲到的表单元素必须位于红色的虚线框里才起作用。为了表单中的元素定位方便,再插入一个表格,至于表格的大小可自行控制,图中的表格是7行×2列的。然后把第1、5、6和7这四行合并单元格。
  第二步:将文字输入表格中,到此为止,准备工作已经做好了。
  第三步:插入表单元素,在“您的姓名”边上的单元格中插入一个文本框,用“Insert”——“FormObject”——“TextField”命令或在面板上选择图标。同样在下面的“邮件地址”、“主页”边上和“您的建议”下面的单元格中也分别插入一个文本框。选中一个文本框。
参数的具体含义如下所示:
“TextField”:文本框的名字,对于本例,可分别取名如“姓名”、“邮件地址”、“主页地址”和“意见”;
“CharWidth”:文本框显示在网页上的长度;
“MaxChars”:最多能输入的字符长度;
“Type”:共有三类,“Singleline”表示单行文本,“Multiline”表示多行文本,“PassWord”表示密码框;
“InitVal”:文本框中的初始值。
当你选中“Type”中的“Multiline”类型时,属性面板又有所变化了。与前面的面板相对比,“CharWidth”被“NumLines”代替,表示文本的行数。“Wrap”是多行文本的外观参数,四个选项,你可以分别试试。现在文本框都已做好,下面要做“发送”和“清除”按钮了。
  第四步:在第七行的单元格里再插入一个边框Border=0的1行×2列的表格(用表格可以很方便地控制元素的位置),然后在单元格中插入按钮,使用“Insert”——“FormObject”——“Button”命令或选择蓝色图标,选中按钮,看看属性面板的变化吧。其中“ButtonName”按钮的名称;“Lable”按钮上显示的内容,如例子中的“发送”和“清除”;“Action”按钮的类型,有三种:“Submitform”提交按钮和“Resetform”重置按钮、“None”普通按钮。在本例中用到了前两种即提交(发送)和重置(清除)按钮。
第五步:这是最关键的一步,单击表单周围的红色虚框。图中“FormName”表示表单的名称;“Action”表示表单提交后将由哪个程序来处理,这儿填入你的E-MAIL地址,格式如:mailto:你的E-MAIL地址;“Method”表示提交方法,有“Post”和“Get”两种,默认为Post。
  现在,你已经做好了一个简单的电子邮件表单,当然在这个例子里只用了表单的一部分元素,其它的表单元素还有复选框,在页面上显示为;单选框,在页面上显示为。这两个在表单中也是经常用到的元素,有关的属性可在属性面板上看到,在一组中复选框能同时选取多个,而单选框一组只能选中一个,将多个复选框(或单选框)定义为一组的方法是:将这几个复选框(或单选框)取相同名字。 

搜索: Dreamweaver DreamWeaver中表单的使用和电子邮件表单的制作 Dreamweaver教程 

最热-Dreamweaver综合教程

Fireworks 4/Dreamweaver 4双剑合壁造弹出菜单

Dreamweaver 4新功能试用手记(1)

Micromedia Dreamweaver UltraDev 安装及使用教程(五)

挖掘Dreamweaver 4.0的“潜力”(三)

怎样用好DREAMWEAVER

Dreamweaver高级进阶之可控幻灯片效果(下)

挖掘Dreamweaver 4.0的“潜力”(五)

DREAMWEAVER3.0中重复元素的使用

DreamWeaver表格妙用-线框打造详解(一)

Dreamweaver 4.0,让我欢喜让我忧

Dreamweaver 2.0全接触

Dreamweaver 4.0密技

Micromedia Dreamweaver UltraDev 安装及使用教程(三)

素材
多种冰激凌和蛋糕PNG图标多种冰激凌和蛋糕PNG图标
精美蔬菜高清图片4精美蔬菜高清图片4
精美蔬菜高清图片2精美蔬菜高清图片2
精美蔬菜高清图片3精美蔬菜高清图片3
精美蔬菜高清图片1精美蔬菜高清图片1
景观效果图素材景观效果图素材
景观效果图素材景观效果图素材
手机高清图片手机高清图片
景观效果图素材景观效果图素材