使用表单和行为（模块七）电子课件中职Dreamweaver+CS3网页制作任务实训教程（电子教案）.ppt

使用表单和行为（模块七）电子课件 中职Dreamweaver+CS3网页制作任务实训教程（高教版）模块七 使用表单和行为 主讲老师：*Dreamweaver CS3 网页制作任务实训教程学习目标u掌握表单的插入与设置方法u掌握文本域、单选按钮组、列表框、提交按钮等表单对象的插入与设置方法u掌握“行为”面板的使用方法u熟悉“交换图像”行为和“设置文本”行为的使用任务一 制作“客户信息反馈”网页u任务目标在提供的“index.html”网页中制作客户信息反馈表，完成后的最终效果如图所示。“客户信息反馈”网页效果任务一 制作“客户信息反馈”网页u操作思路（1）在提供的“index.html”网页中的第2个单元格中插入表单。（2）对插入的表单进行属性设置。（3）依次在表单中插入文本字段和文本区域等各种对象进行适当设置。制作“客户信息反馈”网页的操作思路操作一 创建表单并设置表单属性（1）打开光盘中提供的“index.html”网页素材，将文本插入点定位到已有表格下方的单元格中，然后在插入栏中单击“表单”选项卡，并单击“表单”按钮，如图所示。（2）此时将在单元格中插入表单，并以红色的虚线边框表示，在属性检查器的“方法”下拉列表框中选择“POST”选项，如图所示。插入表单 设置表单“方法”属性操作一 创建表单并设置表单属性（3）在“动作”文本框中输入“mailto:”，如图所示。设置表单“动作”属性操作二 添加并设置文本字段和文本区域（1）将文本插入点定位到创建的表单区域中，单击插入栏中“表单”选项卡的“文本字段”按钮，如图所示。（2）打开“输入标签辅助功能属性”对话框，在“标签文字”文本框中输入“客户名称：”，单击“确定”按钮，如图所示。插入文本字段设置标签文字操作二 添加并设置文本字段和文本区域（3）选择插入的文本字段（白色区域），在属性检查器中将名称设置为“name”，字符宽度设置为“20”，如图所示。设置文本字段属性操作二 添加并设置文本字段和文本区域（4）将文本插入点定位到插入的文本字段右侧，按“Enter”键换行，如图所示。（5）单击插入栏中“表单”选项卡的“文本区域”按钮，如图所示。换行文本插入点插入文本区域操作二 添加并设置文本字段和文本区域（6）打开“输入标签辅助功能属性”对话框，在“标签文字”文本框中输入“反馈信息：”，单击“确定”按钮，如图所示。（7）选择插入的文本区域，在属性检查器中将名称设置为“content”，字符宽度设置为“50”，行数设置为“6”，如图所示。设置标签文字设置文本区域属性操作三 添加并设置单选按钮组（1）将文本插入点定位到插入的文本区域右侧，按“Enter”键换行，单击插入栏中“表单”选项卡的“单选按钮组”按钮，如图所示。插入单选按钮组操作三 添加并设置单选按钮组（2）打开“单选按钮组”对话框，在“名称”文本框中输入“perform”，如图所示。（3）将下方列表框中的“标签”项和“值”项设置为如图所示的内容，单击“确定”按钮。设置单选按钮组名称 设置各单选按钮标签和值操作三 添加并设置单选按钮组（4）选择插入的“单位”单选按钮，在属性检查器中选中“初始状态”栏中的“已勾选”单选项，如图所示。设置单选按钮组初始状态操作四 添加并设置下拉列表框（1）将文本插入点定位到插入的单选按钮组右侧，按“Enter”键换行，单击插入栏中“表单”选项卡的“列表/菜单”按钮，如图所示。单击“列表/菜单”选项操作四 添加并设置下拉列表框（2）打开“输入标签辅助功能属性”对话框，在“标签文字”文本框中输入“所在地区：”，单击“确定”按钮，如图所示。（3）选择创建的“列表/菜单”，单击属性检查器中的“列表值”按钮，如图所示。设置标签文字设置列表值操作四 添加并设置下拉列表框（4）打开“列表值”对话框，在“项目标签”项和“值”项中均输入“东北”，然后单击对话框上方的“添加”按钮，如图所示。（5）继续在“项目标签”项和“值”项中输入“华东”，然后单击“添加”按钮，如图所示。设置项目标签和值 添加项目标签和值操作四 添加并设置下拉列表框（6）用相同方法设置“项目标签”项和“值”项的其他数据，完成后单击“确定”按钮，如图所示。（7）保持下拉列表框的选中状态，将属性检查器中的“初始化时选定”下拉列表框中的选项设置为“华北”，如图所示。设置项目标签和值 设置初始化时的选定项目操作五 添加并设置按钮（1）将文本插入点定位到插入的下拉列表框右侧，按“Enter”键换行，单击插入栏中“表单”选项卡的“按钮”按钮，如图所示。（2）打开“输入标签辅助功能属性”对话框，直接单击“确定”按钮，如图所示。插入按钮打开的对话框操作五 添加并设置按钮（3）选择插入的按钮，将属性检查器中的“值”文本框中的内容修改为“确认提交”，如图所示。（4）保持创建的网页，按“F12”键预览效果，如图所示。设置按钮值预览效果任务二 制作“畅销车型展厅”网页u任务目标利用交换图像行为和容器文本行为制作出最终效果如图所示的“畅销车型展厅”网页，以实现通过单击左侧缩略图即可在右侧显示相应大图及文本的交互效果。“畅销车型展厅”网页效果任务二 制作“畅销车型展厅”网页u操作思路（1）在提供的“index.html”网页中插入相应的图像。（2）依次为左侧的表格中的缩略图添加交换图像行为和容器文本行为。制作“畅销车型展厅”网页的操作思路操作一 添加交换图像行为（1）打开提供的“index.html”网页，将文本插入点定位在白色边框表格的第1行单元格中，如图所示。定位文本插入点操作一 添加交换图像行为（2）将光盘提供的“01.jpg”图像文件插入到其中，如图所示。（3）依次在下方的3个单元格中插入提供的“02.jpg”、“03.jpg”和“04.jpg”图像文件，如图所示。插入图像 插入图像操作一 添加交换图像行为（4）在右侧的单元格中插入提供的“1.jpg”图像文件，如图所示。（5）选择该图像，将属性检查器中的图形名称设置为“big”，如图所示。插入图像 设置图像名称操作一 添加交换图像行为（6）选择插入的“01.jpg”图像，然后选择【窗口】【行为】菜单命令，如图所示。（7）打开“行为”面板，单击“添加行为”按钮，在弹出的下拉菜单中选择“交换图像”命令，如图所示。打开“行为”面板选择需添加的行为命令操作一 添加交换图像行为（8）打开“交换图像”对话框，在“图像”列表框中选择“图像big”选项，单击下方的“浏览”按钮，如图所示。（9）打开“选择图像源文件”对话框，在其中选择提供的“1.jpg”图像文件，单击“确定”按钮，如图所示。选择需交换的图像选择交换后的图像操作一 添加交换图像行为（10）返回“交换图像”对话框，取消选中“鼠标滑开时恢复图像”复选框，单击“确定”按钮，如图所示。（11）此时“行为”面板中将出现添加的交换图像行为信息，单击“onMouseOver”所在栏，如图所示。设置鼠标指针动作完成行为的添加操作一 添加交换图像行为（12）此时该栏将变为下拉列表框的形式，单击出现的下拉按钮，如图所示。（13）在弹出的下拉列表中选择“onClick”选项，如图所示。单击下拉按钮 选择事件操作一 添加交换图像行为（14）按照相同的方法为其余缩略图设置动作为“onClick”的交换图像行为，交换的图像依次为“2.jpg”、“3.jpg”和“4.jpg”，如图所示。为其他缩略图添加交换图像行为操作二 添加容器文本行为（1）选择第1张缩略图，单击“行为”面板中的“添加行为”按钮，在弹出的下拉菜单中选择【设置文本】【设置容器的文本】菜单命令，如图所示。（2）打开“设置容器的文本”对话框，在“容器”下拉列表框中选择“tdtext”选项，如图所示。选择行为选择容器操作二 添加容器文本行为（3）在“新建 HTML”文本框中输入交换图像时一并显示的文本内容，完成后单击“确定”按钮，如图所示。（4）此时“行为”面板中将显示添加的行为，如图所示。设置内容 成功添加行为操作二 添加容器文本行为（4）用相同方法为其余缩略图添加容器文本行为，如图所示。（5）保存设置的网页，按“F12”键预览效果，此时单击左侧第3幅缩略图时，右侧将显示相应的大图以及对应的文本，如图所示。为其他缩略图添加行为预览效果学习与探究u编辑和删除行为l编辑行为：编辑行为分为编辑事件和编辑动作两种情况，在“行为”面板中单击已有行为选项的左侧部分，然后单击下拉按钮，在弹出的下拉列表中即可选择需要的事件；而在已有行为选项的右侧部分单击鼠标右键，在弹出的快捷菜单中选择“编辑行为”命令，即可在打开的对话框中对行为进行重新编辑。l删除行为：在“行为”面板中选择需删除的行为选项，单击“删除行为”按钮 或在已有行为选项的右侧部分单击鼠标右键，在弹出的快捷菜单中选择“删除行为”命令均可删除所选行为。学习与探究u常见行为举例“弹出信息”行为：“弹出信息”行为是Dreamweaver CS3中较为简单的行为之一，其功能是当设定的网页事件发生时，将触发“弹出提示信息对话框”的动作。使用该行为的方法为：在“行为”面板中单击“添加行为”按钮，在弹出的下拉菜单中选择“弹出信息”命令，并在打开的对话框中进行设置即可。“拖动AP元素”行为：“拖动AP元素”行为的控制功能非常丰富，可以实现在规定范围内拖动AP元素；在AP元素移动到靠近目标位置一定范围内时自动实现靠齐停靠；以及用户自定义拖动行为的鼠标操作有效区域等功能，常用于网络空间或博客的自定义设置功能。使用该行为的方法为：在“行为”面板中单击“添加行为”按钮，在弹出的下拉菜单中选择“拖动AP元素”命令，然后在打开的对话框中指定拖动的AP对象，并设置其他参数即可。效果类行为：效果类行为包括“增大/收缩”效果行为、“滑动”效果行为、“显示/渐隐”效果行为等，这里行为的特点是丰富页面的视觉呈现效果。它们的使用方法都很简单，只需在“行为”面板中单击“添加行为”按钮，在弹出的下拉菜单中选择相应的效果行为命令，并在打开的对话框中指定对象并进行其他参数设置即可。实训一 制作“用户登录”网页u实训目标进行“用户登录”页面表单的创建，最终效果如图所示。其中将主要涉及到插入表单、表格、文本区域和图像域等表单对象操作。“用户登录”网页的最终效果实训一 制作“用户登录”网页u实训分析（1）新建空白网页，并在其中创建宽度为“400”，行数和列数均为“1”的表格，然后利用属性检查器将表格的背景设置为光盘中提供的“bg.jpg”图像文件。（2）在插入的表格中插入表单，并对表单的动作和方法属性进行设置。（3）在表单中插入4行3列的表格，并对表格进行适当调整。（4）在第2行第2列单元格中插入名称为“用户名：”的文本区域表单对象，在第3行第2列单元格中插入名称为“密码：”、最多字符数为“6”、类型为“密码”的文本区域表单对象，在第4行第2列单元格中插入图像域，图像文件为光盘中提供的“bl.png”图像，最后保存网页并预览效果。制作“用户登录”网页的操作思路实训二 制作“脑筋急转弯”网页u实训目标利用行为制作具有交互功能的“脑筋急转弯”网页，以实现将鼠标指针移至“答案”按钮上时按钮发生变化，单击按钮即可弹出相应的答案信息对话框的效果，最终效果如图所示。“脑筋急转弯”网页的最终效果实训二 制作“脑筋急转弯”网页u实训分析（1）新建空白网页，设置背景颜色为“#6C6461”。（2）插入3行3列的表格，并调整各行各列的大小，然后将第2行第1列、第1行第2列和第3行第3列的单元格背景颜色设置为“#CCCCCC”。（3）在第1行第1列单元格中输入标题并设置格式；在第2行第2列单元格中输入脑筋急转弯的题目内容并设置格式；在第3行第2列单元格中插入“01.jpg”图像，并调整大小、设置其对齐方式为“右对齐”，然后将图像名称命名为“answer”。（4）选择图像，利用“行为”面板为其添加交换图像的行为，其中在“交换图像”对话框中选择“answer图像”对应的选项，设置原始档图像为“02.jpg”，并选中两个复选框。实训二 制作“脑筋急转弯”网页（5）保存图像的选中状态，继续利用“行为”面板为其添加“弹出信息”行为，其中信息内容参见效果文件。最后保存并预览网页。制作“脑筋急转弯”网页的操作思路