1、项目十,Dreamweaver CS3 创建表单网页,计算机常用工具软件,项目十,任务一,表单的基本概念,任务二,创建表单域,任务三,表单对象的添加,任务四,表单的检查,计算机常用工具软件,项目二,任务一,了解AP Div元素的基本概念,课程导航,任务一 任务描述 任务说明 任务二 任务三 任务四,任务一,小明想申请个网络邮箱，于是他就上网开始先注册，注册的时候要求填写个人信息，他被这个注册网页吸引住了，他在思考，为什么填写后信息，信息会被记录呢？这个网页是如何做的呢？他带着问题找到了老师，请求老师给予解答。,任务描述,课程导航,任务一 任务描述 任务说明 任务二 任务三 任务四,任务一,表单
2、（Form）是实现网页上数据传输的基础，它包含多种对象，或者称作控件。其作用就是能使访问者与网站或网站管理人交互。利用表单，可根据访问者输入的信息，自动生成页面反馈给访问者；还可以为网站收集访问者输入的信息。,任务说明,计算机常用工具软件,项目十,任务二,创建表单域,课程导航,任务一 任务二 任务描述 任务说明 操作步骤 任务三 任务四,任务二,老师跟小明讲解了有关表单的基础知识，并准备教授他如何创建表单域。,任务描述,课程导航,任务二,在Dreamweaver中能创建各种各样的表单，表单中能包含各种对象，在网页中添加表单对象，首先必须创建表单。表单在浏览网页中属于不可见元素。在Dreamwe
3、aver CS3中插入一个表单，当页面处于“设计”视图中时，用红色的虚轮廓线指示表单。,任务说明,任务一 任务二 任务描述 任务说明 操作步骤 任务三 任务四,课程导航,任务二,操作步骤,1）使用菜单命令创建表单域。,任务一 任务二 任务描述 任务说明 操作步骤 任务三 任务四,课程导航,任务二,操作步骤,2）通过面板上的按钮创建表单域,任务一 任务二 任务描述 任务说明 操作步骤 任务三 任务四,计算机常用工具软件,项目十,任务三,表单对象的添加,课程导航,任务一 任务二 任务三 任务描述 任务说明 操作步骤 任务四,任务三,小明在学习过程中提出疑问，注册邮箱的网页上的那些填写信息的单选框和
4、文本框是怎么建立的呢？,任务描述,课程导航,任务三,在创建表单之后，就可以通过表单插入面板在表单中插入各种表单对象，也可以通过相应的菜单在表单中插入相应的表单对象。在Dreamweaver CS3中的表单对象包括文本域、文本区域、按钮、复选框、单选按钮、列表/菜单、文件域、图象域、隐藏域、单选按钮组和跳转菜单。,任务说明,任务一 任务二 任务三 任务描述 任务说明 操作步骤 任务四,课程导航,任务三,操作步骤,1）添加文本域, 使插入点位于表单域中。 单击“插入”面板“表单”类别中的“文本字段”按钮。选择菜单中的“窗口”|“属性”命令 。 在“类型”区域中，需要做哪一类型的文本字段，就在“类型
5、”区域单选框中选择哪个。插入完之后，保存页面，按下F2键，浏览网页。,任务一 任务二 任务三 任务描述 任务说明 操作步骤 任务四,课程导航,任务三,操作步骤,2）添单选按钮,把光标插入到页面的表单范围内。单击“插入”面板“表单”类别中的“单选按钮” 。单击选中其中一个单选按钮，打开属性面板 。,任务一 任务二 任务三 任务描述 任务说明 操作步骤 任务四,课程导航,任务三,操作步骤,3）添加复选框,把光标插入到页面的表单范围内。单击“插入”面板“表单”类别中的“复选框”按钮 。单击选中其中一个复选框，打开属性面板 。,任务一 任务二 任务三 任务描述 任务说明 操作步骤 任务四,课程导航,任
6、务三,操作步骤,4）插入“列表/菜单”, 滚动式列表 下拉式菜单,任务一 任务二 任务三 任务描述 任务说明 操作步骤 任务四,课程导航,任务三,操作步骤,5）创建文件域, 把光标插入到页面的表单范围内。 单击“插入”面板“表单”类别中的“文件域”按钮 。,任务一 任务二 任务三 任务描述 任务说明 操作步骤 任务四,课程导航,任务三,操作步骤,6）创建图象域,将把光标插入到页面的表单范围内。单击“插入”面板“表单”类别中的“图像域”按钮 单击“确定”按钮即可在表单中插入图像。,任务一 任务二 任务三 任务描述 任务说明 操作步骤 任务四,课程导航,任务三,操作步骤,7）建跳转菜单,将把光标插
7、入到页面的表单范围内。单击“插入”面板“表单”类别中的“跳转菜单”按钮。如果要添加多个跳转菜单项，可单击按钮，然后在“文本”文本框中输入名称，也可以单击按钮，删除菜单项。设置完成后，单击“确定”按钮，即在文档中添加了跳转菜单。,任务一 任务二 任务三 任务描述 任务说明 操作步骤 任务四,计算机常用工具软件,项目十,任务四,表单的检查,课程导航,任务一 任务二 任务三 任务四 任务描述 任务说明 操作步骤,任务四,小明心中一直有个疑问，那为什么填写信息时如果填写有错误，网页还会报错呢？网页会自己检查吗？,任务描述,课程导航,任务四,为了提醒用户在填写表单时，出现填写错误或漏填等情况时能及时地改
8、正，就需要对表单的信息在客户端做一些处理。在Dreamweaver Cs中，可以通过“检查表单”行为来检查在表单中输入的内容是否符合要求，例如，当将“密码”文本域设置成输入的密码为数字，若输入的不是数字，系统就会提示错误。,任务说明,任务一 任务二 任务三 任务四 任务描述 任务说明 操作步骤,课程导航,任务四,操作步骤,1）打开表单，选定“密码”文本域。2）选择“窗口”|“行为”命令，打开“行为”面板，单击“行为”面板上的按钮，打开下来菜单，选择“检查表单”命令，打开“检查表单”对话框 3）依次选择各对象，然后选中“必需的”复选框，将各项均设置为必填项。4）在“命名区域”中选择“inputtextfield2”,然后选中“数字”单选按钮， 5）单击“确定”按钮。设置好之后，如果用户在“密码”文本域中输入的不是数字，就会出现一个提示错误的对话框,任务一 任务二 任务三 任务四 任务描述 任务说明 操作步骤,项目小结,本项目详细介绍了网页中表单的基本概念，创建表单域的基本方法，以及表单和表单对象的基本作用和创建方法。,项目小结,在Internet中，表单是网站管理者与浏览者之间沟通的桥梁，它帮助网站管理者从用户处收集信息、获取用户订单等。之后，网站管理者再根据用户的资料等信息进行相应的处理，再反馈给用户。,
