1、第7章 使用表单和行为普通高等学校计算机教育“十二五”规划教材网页设计与制作立体化教程（Photoshop+Dreamweaver+Flash CS6双色微课版）27.1 课堂案例：制作“学员注册”网页内容导航7.2 课堂案例：完善网页行为效果7.3 项目实训7.4 课后练习课堂案例：制作“学员注册”网页老洪告诉米拉，在网页中，表单是一个常用的元素，它以各种各样的形式存在于各种网页中，如登记注册邮件、填写资料或收集用户的资料等，因此需要掌握表单的相关操作。本例将为小儿郎网页制作学员注册页面，完成后的参考效果如图所示。“学员注册”网页效果7.1.1认识表单1.表单的形式020103会员制网页中，
2、要求输入的会员信息的形式，大部分都是采用表单元素进行制作注册网页输入用户名和密码，单击按钮后进行登录操作,这些操作都会使用到表单中的文本、密码及按钮元素登录网页在网页的公告栏或留言板上发表文章或建议时，输入用户名和密码，并填写实际内容的部分，全都是表单要素留言板或电子邮件网页7.1.1认识表单2.表单的组成元素3.HTML中的表单制作表单页面之前首先要创建表单，然后才能在表单区域内添加表单对象。在Dreamweaver中组成表单的元素很有多，如文本字段、复选框、单选项、按钮、选择等。在HTML中，表单是使用标记表示，并且表单中的各种元素都必须存在于该标记之间。7.1.2创建表单表单是表单对象的
3、容器，任何表单对象都必须在表单中才能生效，如果用户在添加表单对象时并未创建表单，这时系统将自动在文档中添加表单。表单的创建比较简单，但创建后的表单在默认情况下是以“100%”宽度显示，所以在创建表单前可根据实际需要创建一个容器，然后再进行表单的插入。7.1.2创建表单下面在“xelzc.html”网页中创建一个表单，并设置相关的属性。插入表单插入的表单区域7.1.3插入表单对象1.插入单行文本字段单行文本字段适合少量文本的输入，如输入账户名称、邮箱地址和文章标题等。其具体操作如下。插入文本字段设置ID和标签7.1.3插入表单对象设置昵称文本字段设置编号文本字段7.1.3插入表单对象2.插入密码
4、字段密码字段用于输入具有保密性质的内容，当用户在输入密码时，网页中将以“”符号代替，使内容不可见，以保证数据内容的隐私。其具体操作如下。插入文本字段设置ID和标签7.1.3插入表单对象设置密码字段插入文本字段7.1.3插入表单对象设置ID和标签插入文本字段7.1.3插入表单对象3.插入单选按钮组单选按钮组适用于多项中选择一项的情况，如性别、职位等信息就可以利用单选按钮组来设置。（1）插入单选按钮组（2）更改标签名称（3）调整单选按钮组7.1.3插入表单对象4.插入列表或菜单列表和菜单可为浏览者提供预定选项，方便用户进行选择。插入列表设置标签属性7.1.3插入表单对象设置列表属性设置列表值查看效
5、果预览效果7.1.3插入表单对象5.插入复选框如果想让浏览者在给定的选项中选择一个或多个选项，可在表单中添加复选框。插入复选框设置复选框属性7.1.3插入表单对象6.插入复选框组复选框组的效果与添加多个复选框的效果相同，但其操作比重复添加复选框更加便捷。设置复选框组查看效果7.1.3插入表单对象7.插入多行文本字段多行文本字段常用于浏览者留言和个人介绍等需输入较多内容的情况。设置ID 和标签设置多行文本字段属性7.1.3插入表单对象8.插入文件域文件域表单元素可实现文件上传的功能，如上传用户头像。插入文件域设置ID和标签7.1.3插入表单对象插入的文件域设置字符宽度和数量7.1.3插入表单对象
6、9.插入按钮按钮可用于提交表单或重置操作，它只有在被单击时才能执行，对于表单网页而言，按钮元素必不可少。设置ID名称设置插入的按钮属性7.1.3插入表单对象10.插入字段集字段集可将多个表单元素整合到一起，使页面看上去更加整齐。选择表单元素插入字段集设置字段集标签名称7.1.3插入表单对象插入的字段集预览网页效果247.1 课堂案例：制作“学员注册”网页内容导航7.2 课堂案例：完善网页行为效果7.3 项目实训7.4 课后练习课堂案例：制作“学员注册”网页通过观察，米拉发现许多网页会在打开时会弹出欢迎提示框，这极大地提高网页与用户之间的交互性，老洪告诉米拉，这是因为在网页中添加了行为，因此。米
7、拉决定为制作的“学员注册”网页和“详情网”网页添加相关的行为。完善网页行为效果7.2.1行为的基础知识1.事件行为是由事件和该事件所触发的动作组合而成的。动作控制何时执行（如单击时开始执行等），事件控制执行的内容（如弹出对话框显示提示信息等）。一般情况下，每个浏览器都提供一组事件，不同的浏览器有不同的事件，但常用的事件大部分的浏览器都支持。7.2.1行为的基础知识常用的事件及作用说明如下。事件作用说明onLoad当载入网页时触发onUnload当用户离开页面时触发onMousOver当鼠标光标移入指定元素范围时触发onMouseDown当用户按下鼠标左键但没有释放时触发onMouseUp当用户
8、释放鼠标左键后触发onMouseOut当鼠标光标移出指定元素范围时触发onMouseMove当用户在页面上拖动鼠标时触发onMouseWheel当用户使用鼠标滚轮时触发onClick当用户单击了指定的页面元素，如链接、按钮或图像映像时触发onDblClick当用户双击了指定的页面元素时触发onKeyDown当用户任意按下一键时，在没有释放之前触发7.2.1行为的基础知识事件作用说明onKeyPress当用户任意按下一键，然后释放该键时触发。该事件是onKeyDown和onKeyUp事件的组合事件onKeyUp当用户释放了被按下的键后触发onFocus当指定的元素（如文本框）变成用户交互的焦点时
9、触发onBlur和onFocus事件相反，当指定元素不再作为交互的焦点时触发onAfterUpdate当页面上绑定的数据元素完成数据源更新之后触发onBeforeUpdate当页面上绑定的数据元素已经修改并且将要失去焦点时也就是数据源更新之前触发onError当浏览器载入页面发生错误时触发onFinish当用户在选择框元素的内容中完成一个循环时触发onHelp当用户选择浏览器中的“帮助”菜单命令时触发onMove当移动浏览器窗口或框架时触发7.2.1行为的基础知识2.添加行为行为是预先编写好的一组JavaScript代码，执行这些代码可执行特定的任务，完成不同的特殊效果，如打开浏览器窗口、交互
10、图像和预载图像等，而添加各行为的操作都需要通过“行为”浮动面板进行实现。3.修改行为添加行为后，可根据实际需要对行为进行修改，其方法为：在“行为”面板的列表框中选择要修改的行为，双击右侧的行为名称，在打开的对话框中重新进行设置，单击 按钮即可。7.2.1行为的基础知识4.删除行为对于无用的行为，可利用“行为”面板及时将其删除，以便更好地管理其他行为内容。删除行为的方法主要有以下几种。利用 按钮删除在“行为”面板列表框中选择需删除的行为，单击上方的“删除事件”按钮。利用快捷键删除在“行为”面板列表框中选择需删除的行为，然后直接按【Delete】键删除。利用快捷菜单删除在“行为”面板列表框中选择需
11、删除的行为，在其上单击鼠标右键，在弹出的快捷菜单中选择“删除行为”命令。7.2.2弹出窗口“弹出信息”行为可以打开一个消息对话框，常用于为欢迎、警告或错误等信息弹出相应的对话框。下面以在“xelzc1.html”网页中添加“弹出窗口”行为为例进行介绍。选择行为设置信息内容7.2.2弹出窗口保存设置查看效果7.2.3打开浏览器窗口使用“打开浏览器窗口”行为可在触发事件后打开一个新的浏览器窗口并显示指定的文档，该窗口的宽度、高度和名称等属性均可自主设置。下面以在“xelzc1.html”网页中添加“打开浏览器窗口”行为为例进行介绍。选择行为设置要显示的窗口文件7.2.3打开浏览器窗口选择网页文件设
12、置窗口属性7.2.3打开浏览器窗口设置事件设置窗口属性7.2.4检查表单在网页中添加表单后，可能会漏填、误填一些信息，这样会给接收与处理信息时带来许多麻烦，为了避免这种麻烦，可在提交表单前，对表单中的各项进行检查，再对提示错误或漏填等信息进行修改。选择行为设置文本域的验证条件7.2.4检查表单设置密码域的验证条件预览效果7.2.5交换图像“交换图像”行为可实现一个图像和另一个图像的交换行为，为网页增加互动性。添加图像ID名称选择行为7.2.5交换图像选择图像选择交换的图像确定事件设置设置事件7.2.5交换图像选择行为选择图像选择交换的图像设置交换图像其他属性7.2.5交换图像设置事件添加行为7
13、.2.6添加效果“效果”行为可以为网页中的页面元素添加各种有趣的动态效果，如“增大/收缩”“挤压”“晃动”“显示/渐隐”和“高亮颜色”等。选择行为设置“增大/收缩”属性7.2.6添加效果设置事件预览效果447.1 课堂案例：制作“学员注册”网页内容导航7.2 课堂案例：完善网页行为效果7.3 项目实训7.4 课后练习7.3.1制作“会员注册”网页本实训的目标是制作“会员注册”网页，制作时先创建表单并设置属性，然后插入表单对象。本实训完成后的参考效果如图所示。1实训目标7.3.1制作“会员注册”网页在实际工作中制作表单页面时需注意以下几个方面，从而提高表单制作的专业水平。2.专业背景l制作表单页
14、面前需先插入一个表单，然后向表单中添加各种表单对象，如果没有插入表单而直接插入表单对象，Dreamweaver会弹出对话框询问用户是否添加表单。l不要对表单对象进行统一的命名，而应根据实际需要进行不同的设置，否则可能会出现选择混乱。但有时也需要将名称设置相同，如分别添加了两个单选按钮，如果名称不一样则会出现两个都可选中的情况，如果将两个对象设置为相同的名称，则在网页中将只能选中一个。l很多表单页面仅需收集用户的一些文字信息，如用户名、密码、联系方式、出生年月等，如需用户提供一些文件信息，如单独的个人简历、照片等，则可在表单中添加文件域，让用户可以通过单击文件域按钮来向表单中添加附加文件。插入表
15、单 插入文本字段7.3.1制作“会员注册”网页3.操作思路 插入其他表单对象完成本实训需要先在网页中添加一个表单，然后在表单中插入相关的表单对象。7.3.2制作“用户注册”网页本实训的目标是使用表单功能来制作“用户注册”页面，然后通过行为使其实现交互功能。本实训完成后的参考效果如图所示。1实训目标7.3.2制作“用户注册”网页大多数优秀的网页中，不只包含文本和图像，还有许多其他交互式效果，其中就包含了JavaScript行为。行为可以将事件与动作进行结合，使用行为可以让页面中实现许多特殊的交互效果。2.专业背景3.操作思路完成本实训需要先创建表单并设置属性，然后插入表单对象并进行验证，最后为该
16、页面添加相关的行为，并将其链接到主页上 添加检查表单行为 添加打开浏览器窗口行为 创建表单507.1 课堂案例：制作“学员注册”网页内容导航7.2 课堂案例：完善网页行为效果7.3 项目实训7.4 课后练习练习1：制作“航班查询”网页本练习要求制作“航班查询”网页，主要通过列表/菜单、按钮来完成。参考效果如图所示。练习1：制作“航班查询”网页要求操作如下。l新建“hangban.html”网页文件，在其中插入表格，并设置表格属性。l添加表单标签，输入文本“出发城市：”，在其右侧添加一个选择（列表/菜单），通过“属性”面板设置其列表值。l在 下方的单元格中输入文本“到达城市：”，复制添加的选择（
17、列表/菜单）。l在下一行单元格中输入文本“出发日期：”，在其右侧分别插入3个选择（列表/菜单），根据需要设置其列表值。l在下一行单元格中输入文本“航空公司：”，在其右侧添加一个选择（列表/菜单），根据需要设置其列表值。l在下一行单元格中输入文本“航段类型：”，在其右侧添加单选按钮组，并分别设置其标签和选定值为“直达、1”和“所有、2”。l在 最后一行表格中添加按钮，并设置按钮的值为“国内航班实时查询”。保存网页完成网页的制作。练习2：制作搜索条本练习要求结合文本字段、按钮、单选按钮组来制作一个内容搜索条。参考效果如图所示。l新 建一个名为“search.html”的网页文件，设置页面背景为“黑
18、色”，文本颜色为“白色”。l添加文本字段、按钮、单选按钮组即可。练习3：制作“login.html”登录界面本练习要求使用表单功能来制作登录页面，制作时先在“login.html”网页中添加表单，在表单中添加相应的表单对象，并对表单对象的属性进行设置，最后添加行为。参考效果如图所示。l打开提供的素材网页文件，在其中添加文本字段、按钮、复选框等表单对象。l为表单添加“检查表单”行为。55Thank you!海量图书方便查询免费申请样书下载配套资源优惠购书成为作者更多样书申请和资源下载需求，请登录人邮教育社区（)囊括各大品类，您想要的应有尽有教师免费申请样书，我们将安排快递迅速送达教学视频、PPT课件、教学案例、习题答案、模拟试卷等丰富资源免费下载教师可以申请最低折扣学生直接优惠购买图书欢迎写文章投稿，我们强大的编辑团队将为您提供专业和高效的编辑出版服务
