1、能力目标：能力目标：(1)行为及表单的创建。行为及表单的创建。(2)表单属性的设置。表单属性的设置。(3)行为属性的设置。行为属性的设置。(4)制作带有简单的行为和表单的网页。制作带有简单的行为和表单的网页。知识目标：知识目标：(1)认识和理解行为与表单的作用。认识和理解行为与表单的作用。(2)掌握表单和行为面板的使用方法。掌握表单和行为面板的使用方法。(3)掌握基本的表单组件添加方法。掌握基本的表单组件添加方法。任务一任务一 认识行为认识行为网页行为的构成网页行为的构成（1）对象：产生行为的主体。网页中的很多元素都可以称为对象，如整个HTML文档、插入的图片、文字等。（2）事件：触发动态效果
2、的条件。网页事件分为不同的种类，有的主要针对网页元素，如鼠标单击、按下键盘上的某个键等；有的事件还和整体网页有关，如网页下载完毕、网页切换等。对于同一个对象，不同版本的浏览器支持的事件种类和多少也是不一样的。（3）动作：由预先编写的JavaScript代码组成的，这些代码执行特定的任务，如打开浏览器窗口、显示或隐藏AP 元素、图片的交换、链接的改变、弹出信息等。任务一任务一 认识行为认识行为行为面板的使用行为面板的使用任务一任务一 认识行为认识行为dreamweaver CS6常见的动作：常见的动作：（1）交换图像与恢复交换图像：“交换图像”动作通过更改IMG（图像）标签的SRC（来源）属性将
3、一幅图像变换为另一幅图像，而“恢复交换图像”动作则将变换的图像还原为其初始图像。（2）弹出信息：使用“弹出消息”动作可以设置一个带有指定消息的JavaScript警告框。（3）打开浏览器窗口：可以在一个新窗口中打开 URL，并指定新窗口的属性，包括窗口大小、是否可调整大小、是否具有菜单栏及名称等。（4）拖动AP元素：允许在浏览器中自由拖动AP元素。（5）转到URL：可以在当前窗口或指定的框架中打开一个新页，此动作尤其适用于通过一次单击更改两个或多个框架的内容。（6）调用JavaScript：允许用户使用“行为”面板指定当发生某个事件时应该执行的自定义函数或 JavaScript 代码行。（7）
4、改变属性：可以更改对象的某个属性值，例如样式、颜色、大小、层的背景颜色或表单的动作等。（8）跳转菜单：可以建立若干个链接的跳级菜单（9）预先载入图像：将在浏览器缓存中载入不会立即出现在页面上的图像，这样可防止图像变换时导致的延迟。任务一任务一 认识行为认识行为常见的事件常见的事件onactivate：当对象设置为活动元素时触发。onblur：在对象失去输入焦点时触发。onchange：当对象或选中区的内容改变时触发。onclick：在用户用鼠标左键单击对象时触发。ondblclick：当用户双击对象时触发。onfocus：当对象获得焦点时触发。onfocusin：当元素将要被设置为焦点之前触发
5、。onmousedown：当用户用任何鼠标按钮单击对象时触发。onmouseenter：当用户将鼠标指针移动到对象内时触发。onmouseleave：当用户将鼠标指针移出对象边界时触发。onmousemove：当用户将鼠标划过对象时触发。onmouseout：当用户将鼠标指针移出对象边界时触发。onmouseover：当用户将鼠标指针移动到对象内时触发。onselect：当当前选中区改变时触发。onselectstart：对象将要被选中时触发。任务二任务二 认识表单认识表单任务二任务二 认识表单认识表单表单的作用表单的作用是用户和服务器之间的桥梁，专门用于接收访问者填写的信息，从而采集客户端信
6、息，使网页具有交互功能。表单的运行工作过程表单的运行工作过程首先由网页设计师制作出一个可以让浏览者输入各项资料的表单页面，这部分属于在显示器上可以看到的内容。此时的表单只是一个外壳而已，不具有真正工作的能力，需要后台程序的支持。接着由程序设计师通过ASP或CGI程序来编写处理各项表单资料和反馈信息等操作所需的程序，这部分浏览者虽然看不见，却是表单处理的核心。任务二任务二 认识表单认识表单表单用标记来创建，在标记之间的部分属于表单的内容。标记具有action、method和target属性。表单语法格式：Action的值是处理程序的程序名，如，如果这个属性值是空值（），则当前文档的URL将被使用
7、，用户提交表单时，服务器将执行这个程序。Method属性用于定义处理程序从表单中获得信息的方式，可取GET或POST中的一个。GET方式是处理程序从当前 html文档中获取数据，这种方式传送的数据量是有所限制的，一般限制在1KB以下。POST方式传送的数据比较大，它使当前的html文档把数据传送给处理程序，传送的数据量要比使用GET方式传送大的多。target属性用于指定目标窗口或目标帧，可选当前窗口self,父级窗口_parent、顶层窗口_top和空白窗口blank。任务二任务二 认识表单认识表单表单组件的基本组成部分表单组件的基本组成部分表单标签：这里面包含了处理表单数据所用CGI程序的
8、URL以及数据提交到服务器的方法。表单域：包含了文本框、密码框、多行文本框、复选框、单选框、下拉选择框和文件上传框等表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。任务二任务二 认识表单认识表单（1）文本域可以接受任何类型的输入内容，可以是单行或多行。（2）在密码域中输入的文本一般是被圆点或星号代替的，以免旁观者看到。（2）单选按钮只允许从多个选项中选择一个选项。单选按钮通常成组使用，在同一组中的所有单选按钮必须具有相同的名称。（4）选择域使访问者可以从列表中选择一个或多个项目，当 空间有限但需要
9、显示许多项目时，即可添加选择域。如果想对返回服务器的值予以控制，也可以使用选择域。选择域与文本域不同，在文本域中用户可以随心所欲地输入信息，甚至包括无效的数据，而使用选择域则可以设置某个菜单返回的确切值。在表单中可以插入两种类型的选择域：一种是用户单击时下拉的菜单，另一种是显示可供用户从中选择的可滚动项目列表的菜单。I（5）复选框允许用户在一组选项中选择多个选项，每个复选框都是独立的，所以必须有一个唯一的名称。（6）文件域使浏览者可以选择其 电脑上的文件，如处理文档或图像文件，并将该文仁上传到服务器。文件域的外观与文本域类似，只是文件域还包括一个“浏览。按宅；钮，浏览者可以手动输入要上传的文件
10、路径，也可以使用“浏览”按钮选择文件。任务二任务二 认识表单认识表单文本框、密码框的代码格式：type=text定义单行文本输入框；type=password定义密码框；name属性定义文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；size属性定义文本框的宽度，单位是单个字符宽度；maxlength属性定义最多输入的字符数；value属性定义文本框的初始值多行文本框的代码格式：name属性定义多行文本框的名称，必须定义一个独一无二的名称；cols属性定义多行文本框的宽度，单位是单个字符宽度；rows属性定义多行文本框的高度，单位是单个字符宽度；wrap属性定义输入内容大于文本
11、域时显示的方式；默认值是文本自动换行；属性值Off，用来避免文本换行；属性值Virtual，允许文本自动换行；属性值Physical，让文本换行。任务二任务二 认识表单认识表单单选框的代码格式：name属性定义单选框的名称，要保证数据的准确采集，单选框都是以组为单位使用的，在同一组中的单选项都必须用同一个名称；value属性定义单选框的值，在同一组中，它们的域值必须是不同的。复选框的代码格式：name属性定义单选框的名称，以组为单位使用的，在同一组中必须用同一个名称；value属性定义单选框的值，在同一组中，它们的域值必须是不同的。下拉框的代码格式：.（6）按钮的代码格式：Type的属性值有三
12、种：button、reset、submit；分别定义一般按钮、复位按钮、复位按钮；name属性定义一般按钮的名称；value属性定义按钮的显示文字；size属性定义下拉选择框的行数；name属性定义下拉选择框的名称；multiple属性表示可以多选，如果不设置本属性，那么只能单选；value属性定义选择项的值；selected属性表示默认已经选择本选项。任务三任务三 使用表单制作新用户注册页面使用表单制作新用户注册页面设计页面设计页面1.规划页面所需表单组件种类在一般的注册页面中，用户名输入框、密码输入框和提交按钮是必不可少的，根据不同的用户注册要求可选择不同的组件。论坛的用户注册需要用户名、密码、邮箱、性别、职业、关注主题和头像图片设置七个内容。根据七个内容可以确定需要文本框、密码框、下拉框、复选框和文件上传框这样几个组件。2.设计页面布局在注册页面设计过程中，一般表单都用表格来布局，表单的组件都需要有文字说明，利用表格布局有利于注册页面的美化。根据所需制作的页面可将页面做如下布局。新用户注册 用户名“文本框”密码“密码框”邮箱“文本框”性别“单选框”男 “单选框”女职业一个下拉框关注主题四个复选框选择不同主题头像上传文件上传框提交按钮重置按钮任务三任务三 使用表单制作新用户注册页面使用表单制作新用户注册页面
