2022年插入单行文本实验资料 .pdf

实验 1 插入表单元素一、插入表单1、打开 index_ori.htm 页面，将光标定位到“调查问卷”字样的后面；2、选择 “ 插入 ” 中的 “ 表单 ” 快捷栏，单击左侧第1 个“ 表单 ” 按钮；3、一个表单域便插入到了网页中，它在网页编辑窗口中显示为一个红色虚线框范围，其他表单对象一定要放入这个范围内才能够发挥作用；4、接下来设置表单域的属性。单击虚线的边框，使虚线框内出现黑色区域，表示该表单域已被选中，此时的属性面板可见；5、“ 表单名称 ” 用来设置这个表单的名称，这里设置其为forml；6、“ 动作 ” 用来设置处理这个表单的服务器端脚本的路径。假设为某网站制作一个表单网页，需要一个用ASP 编写的脚本进行处理，则路径可以写成submit.asp （该 ASP 文件名），如果希望该表单通过E-mail方式发送，而不被服务器端脚本处理，需要在“ 动作“后填入“ mailto:”和希望发送到的E-mail 地址，在这里我们输入“mailto:hu_song126. com” ，表示把表单中的内容发送到作者的电子邮箱中；7、在“方法”一项选择表单提交的方法。POST 表单信息将以文件的形式提交，Get会将浏览者提供的信息附加在URL 地址的后面提交到服务器。因为 GET 为默认的提交表单的方式，所以如果选择DEFAULT ，将以GET 方式提交表单。实际使用中不建议使用GET方法， 一方面 GET 方法将表单内容附加在URL 地址后面， 所以对提交信息的长度进行了限制，最多不可以超过8192 个字符。如果信息太长，将被截去，从而导致意想不到的处理结果。同时GET 方法不具有保密性，不适合处理如信用卡卡号等要求保密的内容。这里选择POST 方法。二、插入单行文本1、打开 index-_ori2.htm 页面，将光标定位到“ 调查问卷 ” 下“年龄”字样的后面；2、选择 “ 插入 ” 中的 “ 表单 ” 快捷栏，单击左侧第2 个“文本字段”按钮；3、随后一个文本字段便插入到了网页中；4、在属性面板的“文本域”下面给单行文本框命名，这个名字应该尽量使用英文，不应该和网页中其他对象的名称出现相同的现象，不应该有空格， 如果有空格应该使用下划线代替，除此之外，文本域的名称是程序处理的依据，命名要和文本域收集信息的内容一致，名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 8 页 - - - - - - - - - 例如收集的是姓名信息，那么就命名为name，这样在程序处理时可以很形象地知道该文本域的含义；5、在“字符宽度”文本框中设置文本框的宽度为30，默认状态下约为24 个字符的长度，这里的字符是英文的字符，换算成中文， 两个英文字符相当于一个中文的字符长度，所以默认状态下约为12 个中文字符的长度；6、 “最大字符数 ” 为文本框内所能填写的最多的字符数，这和上面的文本框宽度是一个不同的概念。例如，对于中文的姓名，可以限制填写的最多字符毅为4 个，但是设置文本框的宽度可以大于4 个中文字符的宽度，有些时候， 浏览者会不负责任地填写信息，无用信息过多加重服务器的负担，限制“ 最大字符数 ” 可以有效地解决这一问题；7、 “初始值” 文本框用于设置默认状态下填写在单行文本框中的文字。可以在这里填写一些提醒的文字，例如要浏览者填写姓名，可以在该框中输入“在此填写姓名”，文字就会出现在网页编辑窗口中的文本框中。三、插入密码域密码框只用于需要填写密码等机密内容时，浏览者填写的内容都将以* 号的形式显示。1、将光标定位到“调查问卷”下“密玛”字样的后面；2、选择“插入”中的“表单”快捷栏，单击左侧第2 个“文本字段”按钮；3、随后一个文本字段便插入到了网页中，选中文本字段属性面板上的“密码单选按钮，文本字段变为密码框，密码框的属性设置和单行文本框完全一致。四、插入文本区域1、将光标定位到“调查问卷”下“玩网络游戏的经验：”字样的后面；2、选择“插入”中的“表单”快捷栏，单击左侧第4 个“文本区域”按钮；3、随后一个文本区域便插入到了网页中；4、在“文本域”下方的文本框中填写该多行文本框的名称，切记要使用英文填写。命名要和用户填写的内容有关，在“初始值” 文本框中可以填写多行文本框的初始内容，这些项目的含义和文本字段的属性是一样的；5、在“字符宽度”文本框中设定多行文本框的宽度为30，默认值为20 个字符的宽度，在“行数”文本框中设定多行文本框的高度为5，以相当于几行文本进行计算，默认为两行文本的高度。当用户填写在多行文本框中的内容超过了右侧的边界时，“换行”设定将决定是否采用自动的方式， 以及用户提交表单后， 多行文本框中填写的内容是否采取换行的方式。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共 8 页 - - - - - - - - - 五、插入隐藏域1、将光标定位到“调查问卷”下“年龄”字样的后面；2、选择“插入”中的“表单”快捷栏，单击左侧第3 个“隐藏域”按钮；3、随后一个隐藏域的标记便插入到了网页中；4、隐藏域的属性设置相对简单，首先要在“隐藏区域”下的文本框中给隐藏域命名，注意使用英文， 同时命名和隐藏域内容有关。然后在 “ 值” 中设定隐藏域的值，同样也要使用英文。六、插入复选框1、将光标定位到“调查问卷”下“请问你一般在什么地方购买点卡（月卡）： ”字样的后面；2、选择“插入”的“表单”快捷栏，单击左侧第5 个“复选框按钮；3、随后一个复选框便插入到了网页中，它在“网页编辑窗口”中显示为一个方形的小按钮，在它后面还可以加上说明文字；4、按照相同的方法加入其他复选框项目；5、在属性面板的“ 复选框名称 ” 下方输入复选框的名称，这个名称将在验证用户提交的表单或服务器上的脚本文件处理表单时用来区别复选框的内容。需要注意的是， 同一组复选框应该使用统一的名称，如果同一组复选框都是关于地方的，那么 “ 复选框名称 ” 一项设置为location。复选框名称也应该使用英文填写；6、“ 选定值 ” 文本框用于给复选框赋值。用户如果对复选框进行了选择后提交，那么提交的内容是什么呢？并不是复选框旁边的说明文字，而是在选定值中输入的内容。所以， 选定值中的内容应该和复选框旁边的说明文字是一致的；如果说明文字是“ 网上购买 ” ， 那么 “ 选定僮 ” 就可以填写web，当然要使用英文；7、“ 初始状态 ” 是浏览者还没有对复选框进行选择时的状态，初始状态既可以是“ 已勾选” ，也可以是 “ 未选中 ” 。七、插入单选按钮（一）1、将光标定位到“ 调查问卷 ” 下“ 你最想玩的休闲类游戏：” 字样的后面；2、选择 “ 插入 ” 中的 “ 表单 ” 快捷栏，单击左侧第6 个“ 单选按钮 ” 按钮；3、随后一个单选按钮便插入到页面中，它在“网页属性窗口”中显示为一个圆形的小按钮，在它后面还可以加上说明文字；4、按照相同的方法加入其他单选按钮项目；名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页，共 8 页 - - - - - - - - - 5、在属性面板的“ 单选按钮 ” 下面的文本框中填写单选按钮的名称，注意同一组单选按钮应该使用相同的名称，这样才能保证同一组单选按钮中只能选择一个项目，名字应该使用英文，应该起到提示单选按钮内容的作用；6、在 “ 选定值 ” 中设定如果用户选中了该单选按钮后提交的内容。注意提交的内容并不是单选按钮旁边的说明文字，而是在“ 选定值 ” 中设定的内容。这一项同样要使用英文，内容要和说明文字一致；7、通过 “ 初始状态 ” 可以将当前的单选按钮设为“ 已勾选 ” ，也可以将选按钮设为“ 未选中” ，根据设计者的要求在这两个选项之间进行选择。八、插入单选按钮（二）Dreamweaver 还提供了插入单选按钮组的方法。单选按钮组主要是为了方便插入一组单选按钮，这样在制作单选按钮的时候就不容易出现错误了。步骤如下：1、将光标定位到“ 调查问卷 ” 下“ 你愿意每月付多少费用来玩休闲游的后面；2、选择 “ 插入 ” 中的 “ 表单 ” 快捷栏，单击左侧第7 个“ 单选按钮组；3、接下来弹出“ 单选按钮组 ” 对话框；4、在“名称 ” 文本框中输入单迭按钮的名称，插入单选按钮组的优点就是使同一组单选按钮都有统一的名称；5、单击 Label 一列的文字，文字变为可修改状态，可以添入需要的内容，Label 列设定的是单选按钮旁边的说明文字，所以可以使用中文；6、单击 value -列的文字， 文字变为可修改状态，可以添入需要的值。Value 列设定的是选中单选按钮后提交的内容，应使用英文；7、在 “ 布局，使用 ” 区域可以选择使用“ 换行符 ” 或“ 表格 ” 来设置组中单选按钮的布局，如果选中 “ 表格 ” 单选按钮，则 Dreamweaver 会创建一个单列的表格，并将单选按钮放在左侧，将标签放在右侧，这里选中“ 表格 ” 单选按钮；8、单击 “ 确定 ” 按钮，单选按钮组就出现在编辑窗口相应的位置。九、插入列表/菜单1、将光标定位到“ 调查问卷 ” 下“ 职业 ” 字样的后面；2、选择 “ 插入 ” 中的 “ 表单 ” 快捷栏，单击左侧第8 个“ 列表 /菜单 ” 按钮；3、随后一个列表/菜单便插入到了网页中；名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 8 页 - - - - - - - - - 4、在属性面板的“ 类型 ” 中选择当前是 “ 菜单 ” 还是 “ 列表 ” ，可以根据需要在两者之间转换，这里选中 “ 菜单 ” 单选按钮；5、在 “ 列表 /菜单 ” 下方填写当前菜单的名称，名称应该和菜单的内容相关，使用英文命名；6、单击属性面板上的“ 列表值 ” 按钮，打开设置面板，添加当前菜单的选择项目；7、设定列表值后回到列表属性面板，这时“ 初始化时选定 ” 列表中会出现刚刚设定的菜单项目， 如果在该项窗口中不进行选择，菜单未被选择之前为空，如果在该项目中选择了一项，这一项就会出现在菜单窗口中，作为初始状态下默认的选择项。如果在步骤4 中选择的类型是“ 列表 ” ，则可以在属性面板的“ 高度 ” 文本框中设定列表的高度，以容纳几行文字计算。面且，还可以在“ 选定范围 ” 中设定是否允许多项选择，需要勾选“ 允许多项 ” 复选框。这样，浏览者可以按住键盘上的Shift 或 Ctrl 键后，同时选中列表中的多个选项。十、插入文件域1、将光标定位到“ 调查问卷 ” 下“ 上传照片： ” 字样的后面；2、选择 “ 插入 ” 中的 “ 表单 ” 快捷栏，单击右侧第4 个“ 文件域 ” 按钮3、随后一个文件域便插入到了网页中；4、在属性面板的“ 文件域名称 ” 一项填写文件域的名称，应该以英文命名，并和文件域内容相关。 在“ 字符宽度 ” 文本框中设定文件域文本框的宽度，单位是字符， 这里是指英文字符。在 “ 最多字符数 ” 文本框中设定文件域文本框中所能添加的最多的字符数。十一、插入按钮1、将光标定位到“ 调查问卷 ” 下“ 上传照片： ” 字样的下面；2、选择 “ 插入 ” 中的 “ 表单 ” 快捷栏，单击右侧第3 个“ 按钮 ” 按钮；3、随后一个按钮便插入到了网页中；4、在属性面板的“ 动作 ” 一项中，选择单击按钮时触发的动作。其中，“ 提交表单 ” 单选按钮将按钮设置为提交按钮。浏览者单击按钮，可以将表单提交到表单属性“ 动作 ” 一项设定的路径。 “ 重置表单 ” 单选按钮将按钮设置为重置按钮。浏览者单击按钮时，将清除浏览者填写的表单内容。 “ 无” 设定单击元动作，之后可以通过脚本语言赋予按钮新的功能。这里选中“ 提交表单 ” 单选按钮；5、在 “ 按钮名称 ” 下面的文本框中填入按钮的名称，使用英文命名。然后根据需要可以改变 “ 标签 ” 按钮上显示的文字；名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页，共 8 页 - - - - - - - - - 6、 使用同样的方法， 在“ 提交 ” 按钮后选择 “ 插入 ” 中的 “ 表单 ” 快捷栏，单击右侧第3 个“ 按钮” 按钮，随后又一个按钮便插入到了网页中；7、在属性面板的“动作”一项中，选中“重置表单”单选按钮，并改变“标签”按钮上显示的文字为“清除”。此时的按钮效果。十二、插入图像域1、将刚才添加的按钮删除，然后选择“ 插入 ” 中的 “ 表单 ” 快捷栏，单击右侧第五个“ 图像域” 按钮；2、随后弹出 “ 选择图像源文件” 对话框，在对话框选择一幅要作为按钮的图像，这里选择 images 文件夹下的GO.gif 图像文件；3、单击 “ 确定 ” 按钮即可将其插入到网页中；4、在 “ 图像区域 ” 文本框中设置图像域的名字，应该以英文命名，“ 宽” 和“ 高” 的设置不应该改变， 尽量使用图像原本的高度和宽度，也不应该删除图像的高度和宽度，因为这样浏览器下载图像时不知道图像的大小，图像区域会被缩小，影响网页整体的效果，如果要更改图像的高宽，应该在图像编辑较件中编辑。5、“ 替代 ” 文本框用于设置图像的替换文字。图像无法下载的时候，图像位置会插入替换文字。如果图像下载完成，鼠标放在图像上方，替换文字会显示出来，起到说明的作用。这里输入 “ 提交 ” ；6、按下 F12 键，在浏览器中预览的效果，这个图像具有提交按钮的所有功能。实验 2 插入跳转菜单1、打开 index ori.htm 页面，将光标定位到Flash 动画的下方；2、选择 “ 插入 ” 中的 “ 表单 ” 快捷栏，单击其中的“ 跳转菜单 ” 按钮；3、单击按钮后弹出“ 插入跳转菜单” 对话框；4、在 “ 文本 ” 文本框中填入项目的标题，这里添入Sohu；5、在“ 选择时， 转到也 ” 文本框中填入链接网页的地址http:/”，或直接单击 “ 浏览 ” 按钮找到链接的网页；6、在 “ 菜单名称 ” 文本框中设定跳转菜单的名字，注意使用英文，内容要和跳转菜单相关；7、一项链接的设置完成，单击面板上方的“+”按钮， 又可添加新的链接项目。选择项目名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 6 页，共 8 页 - - - - - - - - - 后单击面板上方的“ ” 按钮，可以删除项目。选择已经添加的项目，然后单击面板上方的向上或者向下按钮，调整项目在跳转菜单中的位置；8、按下F12 键预 Dr 后，跳转菜单的效果制作完成了，单击菜单中的栏目即可打开相应的网页。 接下来回到Dreamweaver，选择 “ 窗口行为 ” 命令打开行为面板，单击这个菜单，可以看到行为面板中出现了“ 跳转菜单 ” 一项；9、双击行为面板中的“ 跳转菜单 ” 位置，可以编辑跳转菜单的设置。如果在设置的过程中勾选了“ 菜单之后插入前往按钮” 复选框，可以在页面跳转菜单后添加一个 “ 前往 ” 按钮，它的作用是， 浏览者首先在下拉列表中选择要跳转的项目，之后单击 “ 前往” 按钮进行跳转。未勾选的效果是在下拉列表中选择要跳转的项目即可直接进行跳转。实验 3 通过行为检查表单1、打开提供的index_ori3.htm 页面，设置 ” Email 地址： ” 文本域的属性，” 文本域 ” 名称为 mail；2、选中页面中的红色虚线，将表单命名为chinaSerch；3、选中页面中的“ 提交 ” 按钮 ; 4、选择 “ 窗口行为 ” 命令，打开行为面板，单击“ +”按钮，从列表中选择“ 检查表单 ”选项；5、随后会弹出“ 检查表单 ” 对话框；6、在 “ 命名的栏位 ” 的列表中列出了所有设置过名称的表单对象。如果读者要检查单个域，则从 “ 命名的栏位 ” 列表中选择已在网页编辑窗口中选择的同一个域。如果读者要检查多个域，则从 “ 命名的栏位 ” 列表中选择某个文本域。实例中选择名称为mail 的文本域即可；7、 如果确定该域中必须包含某种数据，勾选 “ 必需的 ” 复选框。 实例中需要填入的E-mail地址为必填内容，因此勾选“ 必需的 ” 复选框。8、“ 可接受 ” ：其中包含4 项内容。“任何东西 ” ：如果该域是必需的但不需要包含任何特定类型的数据，选择此项。“数字 ” ：如果需要该域中只包含数字，选择此项，如填入年龄。“电子邮件地址” ：如果需要该域中的内容属于电子邮件格式，也就是其中需要有一个 ，选择此项。“数字从 到” ：如果需要该域中包含特定范围内的数字，选择此项。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 7 页，共 8 页 - - - - - - - - - 实例中需要浏览者填入E-mail 地址，因此读者应当选择第3 项。9、之后单击 “ 确定 ” 按钮， “ 行为 ” 浮动面板即增加了“ 检查表单 ” 的项目，左侧的onClick表示是通过 “ 单击 ” 的方式来执行的；10、保存网页并预览，至此，速个具有验证功能的表单就制作完成了。读者可以验证一下，如果文本框中什么也不填，单击“ 提交 ” 按钮，则会弹出提示框，告诉读者该框中需要填入 E-mail 地址，如果文本框中填入了内容，但是没有符号 ，单击 “ 提交 ” 按钮，则也会弹出提示框，告诉读者该框中的内容不是E-mail 地址的格式，需要重填。实验 4 HTML 中关于表单的操作使用 HTML 完成下面页面的制作：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 8 页，共 8 页 - - - - - - - - -