《实战Dreamweaver CS5 网页制作教程 第2版 教学课件 ppt 作者 刘天真 第4章 表单》由会员分享，可在线阅读，更多相关《实战Dreamweaver CS5 网页制作教程 第2版 教学课件 ppt 作者 刘天真 第4章 表单（38页珍藏版）》请在金锄头文库上搜索。
1、学习目标,理解表单的含义，能够插入表单域制作表单 能够插入和设置各种表单对象 能够在表格布局中添加表单对象,4.1 案例制作：个人信息调查表 4.2 新知解析 4.3 实战演练：网络写作注册信息表,本章内容,4.1 案例制作：个人信息调查表,4.1. 案例制作：个人信息调查表,通过本案例的操作，你将学会：如何建立表单域和插入表单对象、如何设置表单对象属性、如何利用表格定位表单对象。,4.1 案例制作：个人信息调查表,4.1. 案例制作：个人信息调查表,操作步骤： 1）新建文件夹biaodan, 利用站点对象设置向导新建站点，将站点文件夹定义为biaodan。新建网页，保存为diaochabia
2、o.html。 2）在“插入”面板组“表单”选项下单击“表单”按钮 ，在文档窗口中将出现一个红色虚线框，光标处于表单域中。单击菜单“插入”“表格”命令，设表格为9行1列、宽400像素，边框为1，其余参数为0。在属性面板中设“对齐”为居中对齐。选中所有单元格，在属性面板中设“高”为30，“垂直”为居中，颜色为#eeeeee，如图所示。,4.1 案例制作：个人信息调查表,4.1. 案例制作：个人信息调查表,操作步骤： 3）在CSS属性面板中设“目标规则”为“新CSS规则”，单击“编辑规则”按钮，打开“新建CSS规则”对话框，在“选择器名称”中输入“t1”，单击“确定”按钮两次，回到文档窗口。在CS
3、S属性面板中，设字体为黑体，字号大小为16，粗体，文字颜色为黑色。 在CSS属性面板中设“目标规则”为“新CSS规则”，单击“编辑规则”按钮，打开“新建CSS规则”对话框，在“选择器名称”中输入“t2”，单击“确定”按钮两次，回到文档窗口。在CSS属性面板中，设字体为黑体，字号大小为12，文字颜色为黑色。 在单元格中输入相应的文字信息，选中第1行文字，在属性面板的“目标规则”中选择“t1”，设单元格“水平”为居中对齐。选中其他几个单元格，在属性面板的“目标规则”中选择“t2”。如图所示。,4.1 案例制作：个人信息调查表,4.1. 案例制作：个人信息调查表,操作步骤： 4）光标移到表格第2行的
4、文字右侧，单击“插入”面板组“表单”选项下的“文本字段”按钮 插入文本字段。选中该文本字段，在属性面板中设文本域名称为name，如图所示。 同理，在第5行插入文本字段，选中该文本字段，在属性面板中设名称为pw，类型为“密码”。 在第7行插入文本字段，名称为Email。,4.1 案例制作：个人信息调查表,4.1. 案例制作：个人信息调查表,操作步骤： 在第8行插入文本字段。选中该文本，在属性面板中设字段名称为note，字符宽度为50，行数为3，类型为“多行”。光标移到文字“备注：”后面，按Shift+回车键进行换行，效果如图所示。,4.1 案例制作：个人信息调查表,4.1. 案例制作：个人信息调
5、查表,操作步骤： 5）光标移到第3行文字右侧插入单选按钮组按钮 。在弹出的对话框中进行设定，如图4-6所示。插入的按钮组是垂直排列的。只需将光标移到单选按钮前面向前删除，则单选按钮则排列成一行。选中单选按钮及文字，在属性面板的“目标规则”中选择“t2”。,4.1 案例制作：个人信息调查表,4.1. 案例制作：个人信息调查表,操作步骤： 6）在表格的第4行年月日前，分别单击“插入”面板组“表单”选项下的“列表/菜单”按钮 ，分别选中插入的列表菜单，在属性面板中将“类型”设为“列表”，列表名称分别是year、month、day，单击属性面板的“列表值”按钮，在“列表值”对话框中添加“项目标签”和“
6、值”的内容，单击按钮 和按钮 可以添加或删除列表内容，最后单击“确定”按钮，如图所示。,4.1 案例制作：个人信息调查表,4.1. 案例制作：个人信息调查表,操作步骤： 7）在第6 行的付费渠道项目内容中分别单击“插入”面板组“表单”选项下的“复选框”按钮 。选中复选框，在属性面板的“选定值” 文本框中键入支付项目名称。 在文档窗口调整各复选按钮的布局位置，如图所示。,4.1 案例制作：个人信息调查表,4.1. 案例制作：个人信息调查表,操作步骤： 8）光标移到第9 行，在“插入”面板组“表单”选项下单击“按钮”图标插入一个按钮。选中该按钮 ，在属性面板中，“值”设为“提交”，“动作”设为“提
7、交表单”。重复上述操作插入第2个按钮，将按钮的“值”改为“重置”，“动作”改为“重置表单”。 9）调整单元格中文字及表单对象的位置，按F12进行预览。,4.2新知解析,1.插入表单 创建表单可以通过“插入”面板或菜单两种方法实现。步骤如下： 将插入点放在希望表单出现的位置 选择“插入”“表单”，或选择“插入”栏上的“表单”类别，然后单击“表单”图标。 用鼠标选中表单，在属性面板上可以设置表单的各项属性 。,4.2 新知解析,属性面板设置项目： “表单名称”：键入标识该表单的唯一名称，命名表单后就可以使用脚本语言（如 JavaScript 或 VBScript）引用或控制该表单。如果不命名表单，
8、则 Dreamweaver 使用语法 form n 生成一个名称，并在向页面中添加每个表单时递增 n 的值。 “动作”：指定处理该表单的动态页或脚本的路径。可以在“动作”文本框中键入完整路径，也可以单击文件夹图标定位到同一站点中包含该脚本或应用程序页的相应文件夹。,4.2 新知解析,属性面板设置项目： “方法”：弹出菜单中，选择将表单数据传输到服务器的方法。 POST 方法将在 HTTP 请求中嵌入表单数据。 GET 方法将值附加到请求该页面的 URL 中。 默认方法使用浏览器的默认设置将表单数据发送到服务器。通常默认方法为 GET 方法。 “MIME类型”：弹出菜单指定对提交给服务器进行处理
9、的数据使用 MIME 编码类型。 “目标”：弹出菜单指定一个窗口，在该窗口中显示被调用程序所返回的数据。如果命名的窗口尚未打开，则打开一个具有该名称的新窗口 。 “类”：使您可以将 CSS 规则应用于对象,4.2 新知解析,2. 文本字段属性面板设置项目： “字符宽度”：设置域中最多可显示的字符数。 “最多字符数”：设置单行文本域中最多可输入的字符数。 “行数”：设置多行文本域的域高度（在选中了“多行”选项时可用）。 “换行”：指定当用户输入的信息较多，无法在定义的文本区域内显示时，如何显示用户输入的内容（在选中了“多行”选项时可用）。 “类型”：指定域为单行、多行还是密码域。 “初始值”：指
10、定在首次载入表单时域中显示的值。,4.2 新知解析,3. 单选按钮属性面板设置项目： “单选按钮”：文本框中为该对象指定一个名称。 “选定值”：设置在该单选按钮被选中时发送给服务器的值。 “初始状态”：确定在浏览器中载入表单时，该单选按钮是否被选中。,4.2 新知解析,4. 单选按钮组设置项目： “名称”：文本框中输入该单选按钮组的名称。 “单选按钮”：单击加号 (+) 按钮向组添加一个单选按钮，如果需要可以为新按钮输入标签和选定值。单击向上或向下箭头重新对这些按钮排序。 “布局，使用”：可以使用换行符或表格来设置这些按钮的布局。,4.2 新知解析,5. 按钮属性面板设置项目： “按钮名称”：
11、为该按钮指定一个名称。 “值”：确定按钮上显示的文本。 “动作”：选中了“提交表单”选项，当单击该按钮时将提交表单数据进行处理，该数据将被提交到表单的“动作”属性中指定的页面或脚本。,4.2 新知解析,6. 复选框属性面板设置项目： “复选框”：为该对象指定一个名称，每个复选框都必须有一个唯一名称。 “选定值”：设置在该复选框被选中时发送给服务器的值。 “初始状态”：确定在浏览器中载入表单时，该复选框是否被选中。,4.2 新知解析,7. 列表/菜单属性面板设置项目： “列表/菜单”：为该菜单指定一个名称。 “类型”：指定该菜单是单击时下拉的菜单（“菜单”选项），还是显示一个列有项目的可滚动列表
12、（“列表”选项）。 “高度”：（仅“列表”类型）设置菜单中显示的项数。 “选定范围”：（仅“列表”类型）指定用户是否可以从列表中选择多个项。 “列表值”：打开一个对话框，您可以在该对话框中向菜单中添加菜单项。使用加号 (+) 和减号 (-) 按钮添加和删除列表中的项。 “初始化时选定”：设置列表中默认选择的菜单项。,4.2 新知解析,8. 图像域属性面板设置项目： “图像区域”：为该按钮指定一个名称。 “源文件”：指定要为该按钮使用的图像。 “替代”：用于输入描述性文本，一旦图像在浏览器中载入失败，将显示这些文本。 “对齐”：设置对象的对齐属性。 “编辑图像”：启动默认的图像编辑器并打开该图像
13、文件进行编辑。,4.2 新知解析,9. 文件域属性面板设置项目： “文件域名称”：指定该文件域对象的名称。 “字符宽度”：指定希望该域最多可显示的字符数。 “最多字符数”：指定域中最多可容纳的字符数。如果用户通过浏览来定位文件，则文件名和路径可超过指定的“最多字符数”的值。但是，如果用户尝试键入文件名和路径，则文件域仅允许键入“最多字符数”值所指定的字符数。,4.2 新知解析,10. 跳转菜单设置项目： “+”和“-”： 单击加号按钮添加一个菜单项，再次单击该按钮添加另一个菜单项，选定一个菜单项，然后单击减号按钮可将其删除。 “菜单项”: 选定一个，然后用箭头键在列表中向上或向下移动此菜单项。
14、 “文本”: 文本框中为菜单项键入要在菜单列表中显示的文本。 “打开 URL 于”: 在弹出菜单中选择文件的打开位置 。 “菜单名称”: 在文本框中，键入菜单项的名称。 “选项”:“菜单之后插入前往按钮”，可添加一个“前往”按钮，而非菜单选择提示。如果要使用菜单选择提示，请选择“选项”下的“更改 URL 后选择第一个项目”。,4.2 新知解析,4.3 实战演练：网络写作注册信息表,4.3 实战演练：网络写作注册信息表,通过本案例的操作，你将学会：如何利用表格对图像和背景图像进行定位、如何在网页布局中建立表单域和利用表格定位表单对象、如何插入表单对象和设置表单对象属性,4.3 实战演练：网络写作
15、注册信息表,4.3 实战演练：网络写作注册信息表,1）新建文件夹biaodan, 在文件夹中新建images文件夹,将所有的素材拷贝到images文件夹中。 2）启动Dreamweaver CS5，单击菜单“站点”“新建站点”命令，利用站点设置对象向导新建站点，将站点文件夹定义为biaodan。 3）新建网页，保存为zhucebiao.html。设网页标题为“网络写作注册信息表”。 4）在网页中插入3行1列、宽为800px的表格。选中表格，在属性面板中设“对齐”为居中对齐，这样表格在网页中左右居中。 5）光标移到第1行单元格中，在属性面板中设单元格的“高”为74。在单元格中插入图像images
16、/ing_01.jpg。,4.3 实战演练：网络写作注册信息表,4.3 实战演练：网络写作注册信息表,光标移到第3行单元格中，在属性面板中设单元格的“高”为127。在单元格中插入图像images/ing_33.jpg。效果如图所示。,4.3 实战演练：网络写作注册信息表,4.3 实战演练：网络写作注册信息表,6）光标移到第2行单元格，在属性面板中设单元格的“垂直”为顶端。新建一个2行1列、宽为100%，其他参数均为0的表格，该表格是外部大表格的嵌套表格（命名为嵌套表格1）。 光标移到嵌套表格1的第1行，在属性面板中设单元格的“高”为156。 在CSS属性面板中设“目标规则”为“新CSS规则”，单击“编辑规则”按钮，打开“新建CSS规则”对话框，在“选择器名称”中输入“b1”，单击“确定”按钮，在弹出的对话框中设“背景图像”为images/ing_06.jpg，“背景重复”设为不重复，“水平位置”设为右对齐，“垂直位置”设为“顶部”，如图所示。单击“确定”按钮。,
