《工信版（中职）网页设计与制作项目八 应用网页表单电子课件.pptx》由会员分享，可在线阅读，更多相关《工信版（中职）网页设计与制作项目八 应用网页表单电子课件.pptx（35页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、YCF（中职）网页设计与制作项目八 应用网页表单电子课件=项目八 应用网页表单=任务一 学会制作表单=制作注册页面目的 注册页面设计原则表单域的类型=本节提纲活动一 制作用户注册页面=网页的交互性 我们的网站和电视、广播等都是信息传播的工具，同时也有很大的不同，其中最重要的不同点在于网站它不是一个“被动”的媒体，不是一味的向访问者传播信息，网页需要我们用鼠标去点击，自主控制浏览进度。同时网站还会与用户进行交互，收集用户的访问信息，获取第一手的数据。网站通过用户注册和登录功能，为不同的用户推送不同的网页内容，实现信息的准确传播。这就是网页的交互性。=什么是表单？表单通常由多个表单对象组成，如文本
2、字段、隐藏域、文本区域、复选框、单选按钮等，通过表单，网站可以非常方便地收集访问者的相关信息。如图8-2为注册QQ账号时需要填写的一个表单页面。一个表单一般包括3个组成部分：1、表单标签：包含了如何处理表单数据的方法。2、表单域：包含了文本字段、隐藏域、文本区域、复选框、单选按钮等。3、表单按钮：包括提交按钮、复位按钮和一般按钮。表单在html中的标签为=一般注册页面表单域文本区域隐藏域复选框单选框文本字段=创建和设置表单创建表单。在Dreamweaver CS6中，如图8-3所示，点击“插入”菜单，在下拉选项中选择“表单”命令，单击“表单”，即可插入表单，设计视图中表现为一个红色的虚线框，代
3、码视图中显示 。Tips：表单对象需要包含在表单中，故通常需先插入表单，再在表单中添加表单对象。设计视图中的红色虚线框在网页中是不显示的，当选择实时视图时，红色虚线框不显示。=创建和设置表单设置表单属性设置表单属性。表单属性面板各选项的含义如下：1、表单ID：设置表单的名称，以便在脚本语言中控制该表单。2、动作：设置处理表单数据的程序。3、方法：设置表单数据上传到服务器的方法。GET表示将表单中的数据以追加到处理程序地址后面的方式进行传送；POST表示将表单中的数据嵌入到处理程序中进行传送。4、目标：设置服务器反馈数据的显示方式。5、编码类型：设置提交服务器处理数据所使用的MIME编码类型。默
4、认application/x-www-form-urlencoded，通常与POST方式协同使用。如果要创建文件上传表单，应选择multipart/form-data。6、类：设置需要调用的CSS样式。=创建和设置表单添加表单对象添加表单对象。在创建表单之后，还需要添加表单对象来收集访问者数据，表单对象包括：文本字段、隐藏域、文本区域、复选框、单选按钮等。1.添加文本字段在表单中添加文字字段后，访问者可以在网页中输入各种信息，常被用作“用户名”、“密码”的输入。在表单中添加文本字段，首先鼠标单击红色虚线框，然后在“插入”工具栏“表单”模块下选择“文本字段”，此时Dreamweaver会显示“输
5、入标签辅助功能属性”窗口，根据自己的需要输入“ID”和“标签”，单击确定，即可完成文本字段的添加。=创建和设置表单添加表单对象添加表单对象2.添加文本区域在表单中添加文本区域有两种方法，一为在“插入”工具栏选择“文本区域”，二为插入文本字段后，在“属性”面板中“类型”中选择“多行”。插入文本区域后，单击文本区域，在“属性”面板中即出现文本区域的属性，可以对文本区域的属性进行设置。3.添加隐藏域隐藏域是用来收集或发送信息的不可见元素，用户在访问网页时，隐藏域是不可见的。当表单被提交时，隐藏域中的信息就会发送到服务器上。添加隐藏域可以用工具栏选择“插入”“表单”“隐藏域”插入，或者在插入工具栏选择
6、“隐藏域”。隐藏域的属性主要包括隐藏域ID和值。4.添加复选框在我们的网页中，网页与访问者的交互除了输入文本信息之外，还可以在给定的选项中进行选择，并提交选择的结果给服务器，实现交互性功能。实现选择功能的表单对象主要有复选框、单选按钮、选择列表、跳转菜单等。=创建和设置表单添加表单对象添加表单对象5.添加单选按钮在网页中，除了复选框之外，我们有的时候还需要用户在多个选项中只选择一个选项提交到服务器，这个时候，我们就需要使用到“单选按钮”。单选按钮只允许用户选择一个选项，可用于性别等唯一选项信息的选择。插入单选按钮的方法和插入复选框类似，将光标定位到表单之后，在插入工具栏选择“单选按钮”，输入I
7、D和标签之后就完成了单选按钮的添加。6.添加选择（列表/菜单）在网页中，经常可以看到选择列表，访问者通过下拉菜单看到几个选项进行选择。我们可以通过Dreamweaver表单对象中的“选择（列表/菜单）”进行添加。在“插入”工具栏中单击 “选择（列表/菜单）”，在弹出的窗口中输入ID和标签，就可以完成列表/菜单的插入。添加选择之后，单击，在属性菜单中出现相应的属性设置。7.添加按钮网页访问者填写完成表单后，需要点击“注册”或“提交”将表单信息提交到服务器，这就需要按钮来实现。表单中的按钮可以实现提交表单或重设表单。添加按钮的方法是在“插入”工具栏中，单击“按钮”，在弹出的窗口中输入ID和标签后即
8、可插入按钮。单击添加的按钮，通过设置属性面板，可以对按钮的属性进行设置。=思考Dreamweaver中，制作用户注册界面还可以添加的表单对象有哪些？=自主练习根据图8-15制作一个用户注册页面。=任务二 学会特殊表单对象应用=表单域分类 搜索栏制作流程站内搜索栏的优点=本节提纲活动一 制作站内搜索栏=搜索引擎搜索引擎（Search Engine）是指根据一定的策略、运用特定的计算机程序从互联网上搜集信息，在对信息进行组织和处理后，为用户提供检索服务，将用户检索相关的信息展示给用户的系统。搜索引擎包括全文索引、目录索引、元搜索引擎、垂直搜索引擎、集合式搜索引擎、门户搜索引擎与免费链接列表等。目前
9、，我国常用的搜索引擎有百度、谷歌、搜搜、360搜索、盘古搜索等等。=必备知识一、添加图像域在网页中添加按钮，按钮默认样式为，但是在我们的实际网页中，往往需要更好看，更具个性化的按钮，所以Dreamweaver提供了添加图像域的功能，我们可以提交一张图片作为按钮。添加图像域的方法和添加按钮类似，单击“插入”菜单下的“图像域”，弹出文件浏览器窗口，找到我们要作为按钮的图片，单击“确定”，输入ID和标签，即可完成图像域的添加，单击插入的图像域，出现图像域属性面板，可以对选择的图像域进行设置。二、添加文件域在注册页面中，往往需要上传头像。在Dreamweaver中，可以通过文件域实现图片和其他文件的上
10、传功能。添加文件域的方法为单击插入工具栏下的 “文件域”，在弹出的窗口中输入ID和标签即可完成文件域的插入。单击插入的文件域，即可在属性面板中对该文件域进行设置。=制作站内搜索栏操作步骤分解第一步.在我们需要添加站内搜索的地方，选择“插入”“表单”，出现一个红色的虚线框。并在“动作”中设设置网站地址，例如“http:/”，“方法”为“默认”，目标为“blank”。第二步.单击红色虚线框内空白部分，但插入工具栏的“文本字段”。在属性面板设置“字符宽度”为25，“初始值”为“搜索本站”。=制作站内搜索栏 第三步.在插入工具栏点击“图像域”，在弹出的窗口中选择需要作为按钮的图片。=制作站内搜索栏 第
11、三步.在第三列分别插入四个隐藏域，并为这四个隐藏域添加名称和值，四个名称和值如表8-1，表格前三行是利用百度搜索引擎进行站内搜索的特定格式，不能改变，名称为Si的隐藏域的值可以根据需要改变。点击【插入】-【表单】-【隐藏域】，插入隐藏域之后在其属性面板设置隐藏域的名称和值，如图8-39所示。名称值TNbdsCL3CT2097152S=制作站内搜索栏第四步.完成站内搜索工具栏的制作。=思考 站内搜索栏一般放在网页的什么位置？为什么？=自主练习请利用资源包里的百度标志，练习制作百度搜索栏。=任务三 学会查验表单数据=可验证表单结构 可验证表单意义可验证表单制作方法=本节提纲任务三 制作SPRY可验
12、证表单=表单验证表单验证是javascript中的高级选项之一。JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。被 JavaScript 验证的这些典型的表单数据有：用户是否已填写表单中的必填项目？用户输入的邮件地址是否合法？用户是否已输入合法的日期？=必备知识Spry表单构件是Dreamweaver CS3版本开始增加的一项基于Ajax框架的表单功能。在网页中使用它可以为访问者提供更丰富的输入体验和对表单信息的验证功能。在用户注册页面，网页需要验证用户名是否已经被其他人注册，通过Spry表单构件，网页可以对访问者输入的信息进行验证，并即时提供反馈。
13、一、插入Spry验证文本域Spry验证文本域与普通文本域的不同之处在于可以对文本域中输入的信息进行验证，并显示对应的提示信息。插入Spry验证文本域与插入文本域的步骤基本一致，在插入工具栏点击“Spry验证文本域”，输入ID和标签之后就完成了Spry验证文本域的添加。二、插入Spry验证文本区域Spry验证文本区域是多行的Spry验证文本域。在插入工具栏点击“插入Spry验证文本区域”。点击“Spry文本区域：sprytextarea1”显示属性面板，其属性面板和Spry验证文本域的属性面板类似。三、插入Spry验证复选框Spry验证复选框和普通复选框相比，其差别在于使用Spry验证复选框之后
14、，当用户勾选该复选框时，网页会呈现相应的提示信息。Spry验证复选框的插入方法是在“插入”工具栏点击“Spry验证复选框”，输入ID和标签后即完成插入。在Spry验证复选框的属性面板可以对其属性进行设置。四、插入Spry验证选择Spry验证选择在“选择（列表/菜单）”的基础上增加了对选择的验证功能。单击插入工具栏的 按钮即可添加Spry验证选择。添加“列表值”的方法和普通选择一样。点击“Spry选择：spryselect1”出现Spry验证选择的属性面板。=制作可验证表单。第一步.打开Dreamweaver，选择新建html网页。第二步.在合适的位置，选择“插入”“表单”，网页出现红色虚线框，
15、表示已插入表单。第三步.在插入工具栏表单栏目下，找到“Spry验证文本域”，在弹出的窗口中，输入标签为“电子邮件：”，点击确认后在相应位置插入Spry验证文本域。=制作可验证表单。第四步.单击灰色文本框区域，下方出现文本域属性面板，输入“字符宽度”为20。第五步.点击文本框上方“Spry文本区域：sprytextarea1”文字，在下方属性面板中设置“类型”为“电子邮件地址”，“预览状态”为“无效格式”，“验证于”勾选“onBlur”。=制作可验证表单。第六步.将光标定位到Spry验证文本域后面，按Enter换行，单击“Spry验证文本域”，在弹出的窗口中输入“标签”为“登录密码：”。=制作可验证表单。第七步.单击文本字段区域，在属性面板设置“字符宽度”为20，“类型”为“密码”。第八步.点击文本框上方“Spry文本区域：sprytextarea1”文字，在下方属性面板中设置“最小字符数”为5，“最大字符数”为15，验证于勾选“onChange”和“必须的”，预览状态选择“已超过最大字符数”。第九步.将光标定位到Spry验证文本域后面，按Enter换行。依次点击“按钮”插入两个按钮，第二个按钮在属性面板设置“动作”为重设表单。=思考根据案例请思考一下，除了使用Spry表单构件，还有没有其他办法实现表单验证功能？=自主练习制作如图8-49的具有验证功能的表单登录页面。=谢 谢