第7章 制作表单页面

DreamweaverCS3网页设计第7章制作表单页面想通过网站与浏览者进行交流吗？想知道浏览者的需求吗？那我们就不能不了解表单，因为这些都是需要用到表单元素，它可以帮助我们收集各种用户信息和反馈意见。学好表单，为制作动态网页的学习打下扎实的基础。DreamweaverCS3网页设计教学目标掌握表单元素的各项属性，能独立制作完成常见的各种表单页面DreamweaverCS3网页设计7.1关于表单在申请E-mail邮箱时，往往会要求填写一些个人信息，如姓名、年龄、联系方式等。DreamweaverCS3网页设计•要制作这样的表单页面，一般要经过以下两个步骤：1.确定页面布局：也就是要用表格规划好表单元素的放置位置2.插入表单元素：表单元素中最重要的就是表单域，它用来确定表单中有效数据的范围。DreamweaverCS3网页设计7.2确定页面布局•插入一13行2列的表格，宽为500像素，单元格边距为2像素，单元格间距和边框均为0。•输入文本：见下图所示：DreamweaverCS3网页设计•插入表单域操作步骤：将“插入”工具栏切换到“表单”工具栏，在其中单击“表单”按钮，此时页面中会出现一个红色的虚线框•修改表单域属性单击红色虚线框内部，此时“属性”面板显示的是表单域的属性。各属性含义见下页。7.3添加表单域DreamweaverCS3网页设计表单名称：用来填入表单的名称，该名称在需要引用表单对象时才会用到。动作：用来定义处理数据的应用程序的路径。方法：用来选择表单提交的方法。目标：用来设定提交表单后，打开的目标网页将以哪种形式进行显示。MIME类型：用来指定对提交给服务器进行处理的数据使用的MIME编码类型。默认设置为application/x-选项，通常与POST方法协同使用。DreamweaverCS3网页设计•移动表格由于所有的表单元素都必须位于表单域中，因此需要将表格移动到红色的虚线框中。选中表格，按快捷键Ctrl+X将它剪切到剪贴板。单击红框内部，当“属性”面板显示表单的属性时表示已经选中了表单，此时再按下Ctrl+V将表格粘贴在表单内。DreamweaverCS3网页设计DreamweaverCS3网页设计•添加单行文本：在“表单”插入工具栏中单击“文本字段”按钮，此时将在此单元格中出现一个单行的文本框。•添加密码文本框：添加方式同上，只是将单行文本类型更改为：“密码”类型•添加文本区域：在“表单”插入工具栏中单击“文本字段”按钮，亦可利用插入单行文本的方法，将单选文本改为多行文本7.4添加文本域DreamweaverCS3网页设计•练习：1.添加“姓名”文本框2.添加“密码”文本框3.添加“邮箱”文本框4.添加“留言”文本区域DreamweaverCS3网页设计•复选框允许浏览者同时选择多个选项，有点像考试中的多项选择题。7.5添加复选框添加复选框操作步骤：单击“表单”工具栏上的“复选框”，或者选择“插入”“表单”“复选框”命令，此时一个复选框就会出现在编辑窗口中。复选框各属性含义：复选框名称：用来处理提交数据时识别复选框。注意：同一组复选框应使用相同的名称，例如：关于爱好的同一组复选框的“复选框名称”都要相同，且只能使用英文、数字或“_”。选定值：用来给复选框赋值。初始状态：是浏览者还没有做出选择时的状态，初始状态既可以是“已勾选”，也可是“未选中”。DreamweaverCS3网页设计•练习：添加“个人爱好”复选框DreamweaverCS3网页设计•单选按钮一般用在从多个选项中选中一项的情况下，这有点像考试中的单项选择题。7.6添加单选按钮和单选按钮组添加单选按钮操作步骤：单击“表单”工具栏上的“单选按钮”，此时一个单选按钮就会出现在编辑窗口中。单选按钮各属性含义：单选按钮：用来填写单选按钮的名称。注意：同一组单选按钮必须使用相同的名称，这样才能保证在同一组单选按钮中只能选择一个项目。选定值：用来设定单选按钮提交的值。初始状态：可以将当前的单选按钮设为“已勾选”或“未选中”。DreamweaverCS3网页设计•为减少插入单选按钮时的错误，我们可通过插入“单选按钮组”的方式插入一组单选按钮。添加单选按钮组操作步骤：单击“表单”工具栏上的“单选按钮组”，此时弹出“单选按钮组”对话框。对话框各属性含义：名称：单选按钮组的名称，插入单选按钮组的好处：同一组单选按钮都有统一的名称。标签：设定单选按钮旁边的说明文字，可以是中文。值：用来设定单选按钮提交的内容，只能使用英文玉、数字以及“_”。添加/删除项目，移动项目，布局等不详述。DreamweaverCS3网页设计•练习：添加“性别”单选按钮DreamweaverCS3网页设计•菜单和列表的区别：菜单默认只显示一行，而列表可以显示多行。7.7添加菜单和列表添加菜单操作步骤：单击“表单”工具栏上的“列表/菜单”按钮，此时在编辑窗口中变会出现一个菜单栏。菜单各属性含义：列表/菜单：当前菜单的名称。类型：可选择是“菜单”还是“列表”。列表值：用于设置菜单显示项目。添加列表方式同菜单，不再详述。DreamweaverCS3网页设计•练习：添加“籍贯”菜单或列表【项目标签为北京、上海、天津、重庆等】DreamweaverCS3网页设计•有时需要用户将文件提交到网站服务器上，例如浏览者的个人照片等，此时就会用到文件域。7.8添加其他表单域添加文件域操作步骤：将光标置于要插入文件域的位置，单击“表单”插入工具栏中的“文件域”按钮，文件域就会插入到编辑窗口中。文件域各属性含义：文件域名称：用来填写文件域的名称。字符宽度：用来设定文件域文本框的宽度，单位是字符。最多字符数：用来设文本域文本框中所能添加的最多字符数。DreamweaverCS3网页设计•练习：添加“个人照片“文件域”，各参数值如下图所示：DreamweaverCS3网页设计•有时需要在网页之间传递参数，但这些参数又不希望浏览者看见，此时就可使用隐藏域。添加隐藏域操作步骤：将光标置于要插入隐藏域的位置，单击“表单”插入工具栏中的“隐藏域”按钮，隐藏域就会插入到编辑窗口中。隐藏域各属性含义：隐藏区域：用来给隐藏区域命名。值：在该文本框中设定隐藏域的值。DreamweaverCS3网页设计•表单中的按钮可用来提交或重置表单，也可用来触发特定的事件。7.9插入按钮添加按钮操作步骤：将光标置于要插入按钮的位置，单击“表单”插入工具栏中的“按钮”按钮，此时按钮就会插入到编辑窗口中。按钮各属性含义：按钮名称：用来给按钮命名。动作：用来选择单击按钮时将会触发的动作。•提交表单：当访问者单击该按钮时，将会将表单中的内容提交给表单目标程序•重设表单：当单击该按钮时，会清除浏览者填写的所有表单内容•无：可自定义触发动作标签：设定按钮上的文字DreamweaverCS3网页设计•练习：添加动作按钮：DreamweaverCS3网页设计•普通的提交按钮看起来并不美观，用户可使用图像域来替换它。7.10添加图像域添加图像域操作步骤：将光标置于要插入图像域的位置，单击“表单”插入工具栏中的“图像域”按钮，在打开的“选择图像源文件”对话框中找到要插入的图像，点击“确定”即可。图像域各属性含义：图像区域：用来设定图像域的名称。宽和高：用来设定图像的宽度和高度，单位为像素。源文件：图像的所在路径。替代：图像替代文字。对齐：设置图像与文字的相对对齐方式。DreamweaverCS3网页设计7.11制作跳转菜单制作跳转菜单见视频视频\制作跳转菜单.aviDreamweaverCS3网页设计7.12添加搜索引擎添加搜索引擎见视频视频\添加搜索引擎.aviDreamweaverCS3网页设计作业制作如图示页面：