实战Dreamweaver CS5 网页制作教程 第2版 教学课件 作者 刘天真 第4章　表单.ppt

《实战Dreamweaver CS5 网页制作教程 第2版 教学课件 作者 刘天真 第4章　表单.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、学习目标理解表单的含义，能够插入表单域制作表单能够插入和设置各种表单对象能够在表格布局中添加表单对象4.1案例制作：个人信息调查表4.2新知解析4.3实战演练：网络写作注册信息表本章内容4.1案例制作：个人信息调查表4.1.案例制作：个人信息调查表通过本案例的操作，你将学会：如何建立表单域和插入表单对象、如何设置表单对象属性、如何利用表格定位表单对象。4.1案例制作：个人信息调查表4.1.案例制作：个人信息调查表操作步骤：1）新建文件夹biaodan,利用站点对象设置向导新建站点，将站点文件夹定义为biaodan。新建网

2、页，保存为diaochabiao.html。2）在“插入”面板组“表单”选项下单击“表单”按钮，在文档窗口中将出现一个红色虚线框，光标处于表单域中。单击菜单“插入”→“表格”命令，设表格为9行1列、宽400像素，边框为1，其余参数为0。在属性面板中设“对齐”为居中对齐。选中所有单元格，在属性面板中设“高”为30，“垂直”为居中，颜色为#eeeeee，如图所示。4.1案例制作：个人信息调查表4.1.案例制作：个人信息调查表操作步骤：3）在CSS属性面板中设“目标规则”为“新CSS规则”，单击“编辑规则”按钮，打开“新建CS

3、S规则”对话框，在“选择器名称”中输入“t1”，单击“确定”按钮两次，回到文档窗口。在CSS属性面板中，设字体为黑体，字号大小为16，粗体，文字颜色为黑色。在CSS属性面板中设“目标规则”为“新CSS规则”，单击“编辑规则”按钮，打开“新建CSS规则”对话框，在“选择器名称”中输入“t2”，单击“确定”按钮两次，回到文档窗口。在CSS属性面板中，设字体为黑体，字号大小为12，文字颜色为黑色。在单元格中输入相应的文字信息，选中第1行文字，在属性面板的“目标规则”中选择“t1”，设单元格“水平”为居中对齐。选中其他几个单元格

4、，在属性面板的“目标规则”中选择“t2”。如图所示。4.1案例制作：个人信息调查表4.1.案例制作：个人信息调查表操作步骤：4）光标移到表格第2行的文字右侧，单击“插入”面板组“表单”选项下的“文本字段”按钮插入文本字段。选中该文本字段，在属性面板中设文本域名称为name，如图所示。同理，在第5行插入文本字段，选中该文本字段，在属性面板中设名称为pw，类型为“密码”。在第7行插入文本字段，名称为Email。4.1案例制作：个人信息调查表4.1.案例制作：个人信息调查表操作步骤：在第8行插入文本字段。选中该文本，在属性面板

5、中设字段名称为note，字符宽度为50，行数为3，类型为“多行”。光标移到文字“备注：”后面，按Shift+回车键进行换行，效果如图所示。4.1案例制作：个人信息调查表4.1.案例制作：个人信息调查表操作步骤：5）光标移到第3行文字右侧插入单选按钮组按钮。在弹出的对话框中进行设定，如图4-6所示。插入的按钮组是垂直排列的。只需将光标移到单选按钮前面向前删除，则单选按钮则排列成一行。选中单选按钮及文字，在属性面板的“目标规则”中选择“t2”。4.1案例制作：个人信息调查表4.1.案例制作：个人信息调查表操作步骤：6）在表格

6、的第4行年月日前，分别单击“插入”面板组“表单”选项下的“列表/菜单”按钮，分别选中插入的列表菜单，在属性面板中将“类型”设为“列表”，列表名称分别是year、month、day，单击属性面板的“列表值”按钮，在“列表值”对话框中添加“项目标签”和“值”的内容，单击按钮和按钮可以添加或删除列表内容，最后单击“确定”按钮，如图所示。4.1案例制作：个人信息调查表4.1.案例制作：个人信息调查表操作步骤：7）在第6行的付费渠道项目内容中分别单击“插入”面板组“表单”选项下的“复选框”按钮。选中复选框，在属性面板的“选定值”文

7、本框中键入支付项目名称。在文档窗口调整各复选按钮的布局位置，如图所示。4.1案例制作：个人信息调查表4.1.案例制作：个人信息调查表操作步骤：8）光标移到第9行，在“插入”面板组“表单”选项下单击“按钮”图标插入一个按钮。选中该按钮，在属性面板中，“值”设为“提交”，“动作”设为“提交表单”。重复上述操作插入第2个按钮，将按钮的“值”改为“重置”，“动作”改为“重置表单”。9）调整单元格中文字及表单对象的位置，按F12进行预览。4.2新知解析1.插入表单创建表单可以通过“插入”面板或菜单两种方法实现。步骤如下：将插入点放

8、在希望表单出现的位置选择“插入”→“表单”，或选择“插入””栏上的“表单”类别，然后单击“表单”图标。用鼠标选中表单，在属性面板上可以设置表单的各项属性。4.2新知解析属性面板设置项目：“表单名称”：键入标识该表单的唯一名称，命名表单后就可以使用脚本语言（如JavaScript或VBScript）引用或控制该表单。如