《网页设计与制作项目实训教程 教学课件 ppt 作者 严加琼 曾金发 项目10》由会员分享，可在线阅读，更多相关《网页设计与制作项目实训教程 教学课件 ppt 作者 严加琼 曾金发 项目10（43页珍藏版）》请在金锄头文库上搜索。
1、项目10 表单网页制作,项目描述,知识储备,实践向导,能力拓展,退 出,项目小结,项目描述,表单是网站管理员与用户之间进行沟通的桥梁，目前大多数的网站都需要与用户进行动态的交流，表单是必不可少的。本项目运用表单知识创建在线注册页面，效果如图10-1所示。,项目描述,图10-1 “在线注册”页面效果图,10.2 知识储备,10.2.1 认识表单 10.2.2 创建及设置表单 10.2.3 创建及设置表单元素,10.2 知识储备,表单在网页中主要负责数据采集功能。一个表单主要有三个基本组成部分：表单标签，这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。表单域
2、，包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。表单按钮，包括提交按钮、复位按钮和一般按钮，用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了脚本的处理工作。,10.2 知识储备,10.2.2 创建及设置表单 1.插入表单 插入表单的具体操作步骤： （1）将光标置于要插入表单的位置。 （2）单击菜单“插入”“表单”选项“表单”命令,如图10-2所示。,图10-2 表单对象面板,10.2 知识储备,（3）选择命令后，页面中就会出现红色的虚线，这虚线就是表单，如图10-3所示。,图10-3 插入表单,10.2 知识储备,2.设置
3、表单属性 表单有对应的属性面板，将光标置于虚线上，打开属性面板，可以设置表单的属性，如图10-4所示。,图10-4表单属性面板,10.2 知识储备,10.2.3 创建及设置表单元素 1.文本域、文本区域、隐藏域 表单中可用于输入文本的对象统称为文本域，Dreamweaver CS5中共提供3种类型的文本域：文本域、文本区域、隐藏域。其中文本域又可分为单行文本域，多行文本域和密码域，可接受任何类型的字母、数字、文本输入内容。,10.2 知识储备,(1)文本域 文本域是一个接受文本信息的文本框。在文本域中几乎可以容纳任何类型的文本数据。网页中常见的文本域有以下三种类型： 单行文本域：只能输入一行的
4、信息。 多行文本域：可以输入多行信息，为访问者提供一个较大的输入区域。 密码文本域：该类型比较特殊，当用户在域中输入时，所输入的文本北替换为星号（*）或项目符号，以隐藏输入文本，保护这些信息。,10.2 知识储备,插入文本域的步骤如下： 将光标置于要添加文本域的位置。 单击菜单“插入”“表单”“文本域”，弹出“输入标签辅助功能属性”对话框，如图10-5所示。 根据需要进行相应的设置后单击“确定”按钮，即可在光标处添加文本域。,图10-5 “输入标签辅助功能属性”对话框,10.2 知识储备,文本域有对应的属性面板。选中文本域，打开属性面板，可以设置文本域的属性，如图10-6所示。,图10-6 文
5、本域属性面板,10.2 知识储备,(2)文本区域 文本区域的外观类似于多行文本框，插入是默认可容纳5行文本，其属性设置也与文本域属性设置相同。 插入文本区域的步骤如下： 将光标置于要添加文本区的位置。 单击菜单“插入”“表单”选项“文本区域”命令，如图10-7所示。,10.2 知识储备,图10-7 文本区域及其属性设置,10.2 知识储备,(3)隐藏域 隐藏域在页面中对于用户是不可见的，它用于存储一些信息，以便于被处理表单的程序使用。 插入隐藏域的步骤如下： 将光标置于要添加隐藏域的位置， 单击菜单“插入”“表单”选项“隐藏域”命令。 选中隐藏域，打开属性面板，如图10-8所示。,图10-8隐
6、藏域属性面板,10.2 知识储备,2.复选框、复选框组、单选按钮、单选按钮组、按钮 (1) 复选框 复选框允许访问在一组选项中选择任意多个适用的选项。例如，在选择兴趣爱好时，访问者可能会同时选择“读书”、“写作”和“旅游”。 插入复选框的步骤如下： 将光标置于要添加复选框的位置。 单击菜单“插入” “表单”选项“复选框”命令，打开“输入标签辅助功能属性”对话框，在“标签”右侧文本框中输入“读书”，如图10-9所示。,10.2 知识储备, 依次逐个插入其他复选框。选中复选框，打开属性面板，如图10-10所示。,图10-9 “输入标签辅助功能属性”对话框,图10-10 复选框及其属性设置,10.2
7、 知识储备,(2) 复选框组 插入复选框组的步骤如下： 将光标置于要添加复选框的位置。 单击菜单“插入”“表单”“复选框组”命令，打开“复选框组”对话框，在其中设置复选框组的名称、组中包含的复选框个数、复选框的文本标签及布局方式等，如图10-11所示。,10-11“复选框组”对话框,10.2 知识储备,(3) 单选按钮 单选按钮作为一个使用组，提供彼此排斥的选项值，用户在单选按钮组内只能选择一个选项。 插入单选按钮的步骤如下： 将光标放到要添加单选按钮的位置。 单击菜单“插入”“表单”“单选按钮”命令，打开“输入标签辅助功能属性”对话框，在“标签”右侧文本框中输入”男”，单击“确定”按钮。如图
8、10-12所示。,10.2 知识储备, 接着再次插入“女”单选按钮。选中单选按钮，打开属性面板，效果如图10-13所示。,图10-12 “输入标签辅助功能属性”对话框,10-13 单选按钮及其属性设置,10.2 知识储备,(4) 单选按钮组 使用单选按钮组对话框，可以一次插入一组单选钮。 插入单选按钮组的步骤如下： 将光标置于要添加单选按钮组的位置。 单击菜单“插入”“表单”选项“单选按钮组”命令，打开“单选按钮组”对话框如图10-14。,图10-14 “单选按钮组”对话框,10.2 知识储备,(5) 按钮 插入普通按钮的步骤如下： 将光标置于要添加按钮的位置。 单击菜单“插入”“表单”“按钮
9、”命令，打开“输入标签辅助功能属性”对话框，在对话框中单击“确定”按钮。 选中按钮，打开属性面板，可以设置按钮的属性如图10-15所示。,图10-15 按钮属性面板,10.2 知识储备,3.列表/菜单、跳转菜单 (1) 列表/菜单 列表和菜单的功能与复选框和单选按钮的功能类似，都可以列举很多选项供浏览者选择，其最大的好处就是可以在有限的空间内为用户提供更多的选项，非常节省版面。 插入列表/菜单的步骤如下: 将光标置于要插入列表的位置。 单击菜单“插入”“表单”“选择（列表/菜单）”命令，在“输入标签辅助功能属性”对话框中，单击“确定”按钮，即可在光标处插入列表/菜单。选中列表/菜单，在属性面板
10、中设置相应的参数。,10.2 知识储备,如果要插入列表框，在列表/菜单的属性选择“类型”选项组中的“列表”单选按钮，如图10-16所示。,图10-16 列表及其属性设置,10.2 知识储备,默认插入的列表框或菜单中不包括任何选项，必须手动添加可供浏览者选择的内容。选择列表或菜单后，单击属性检查器上的“列表值”按钮，打开“列表值”对话框，即可设置选择内容，如图10-17所示。,图10-17 “列表值”对话框,10.2 知识储备,在表单中插入列表框或菜单后，可根据需要更改其属性.列表框与菜单的属性选项内容相同，只是菜单的“高度”与“选定范围”两个属性呈灰色显示，如图10-18所示。如果是列表框，则
11、属性检查器中的所有选项均会被激活。,图10-18 菜单及其属性设置,10.2 知识储备,(2)跳转菜单 跳转菜单是创建链接的一种形式，其中的每个选项都链接到某个文档和文件，以便访问者选择并进行跳转操作。跳转菜单中可放置能够在浏览器中打开的任何文件类型的链接。跳转菜单效果图如图10-19所示。,图10-19 跳转菜单效果图,10.2 知识储备,插入跳转菜单的步骤如下： 将光标置于要插入跳转菜单的位置。 单击菜单“插入”“表单”选项“跳转菜单”命令。 在如图10-20所示弹出对话框中进行插入跳转菜单的设定。,图10-20 “插入跳转菜单”对话框,10.2 知识储备,跳转菜单设置完成后如图10-20
12、所示。,图10-20 跳转菜单及其属性设置,10.2 知识储备,4.图像域、文件域 (1)图像域 向表单中插入图像域后，图像域将起到提交表单的作用，本来需要用提交表单按钮来提交表单，但有时为了使表单更美观，需要用图像来提交表单，只需要把图像设置成图像域就可以了。 插入图像域的步骤如下： 将光标置于要插入图像域的位置。 单击菜单“插入”“表单”“图像域”命令，如图20-21所示。,图10-21 插入图像域,10.2 知识储备,选中图像域，打开属性面板，可以设置图像域属性，如图10-22所示。,图10-22 图像域属性面板,10.2 知识储备,(2)文件域 文件域允许用户将其计算机上的文件上传到服
13、务器。文件域由一个文本框和一个“浏览”按钮组成。访问者可以在文件域的文本框中输入一个文件的路径，也可以单击文件域的“浏览”按钮来选择一个文件，当访问者提交表单时，这个文件被上传。,10.2 知识储备,插入文件域的步骤如下： 将光标置于要插入图像域的位置。 单击菜单“插入”“表单”“文件域”命令，如图10-23所示。 选中文件域，打开属性面板，可以设置文件域属性如图20-24所示。,图10-23 插入文件域,图10-24 文件域属性面板,10.3 实践向导,任务10-1 创建在线注册页面，效果如图10-1所示。 具体操作步骤如下： 1.制作页面表格 （1）启动Dreamweaver CS5，新建
14、一个HTML页面，并保存文件。 （2）单击菜单“插入”“表格”命令，插入一个3行1列，宽度为900像素，边框为0居中对齐的表格。,10.3 实践向导,（3）在表格的第一行插入图片“top.jpg”，在表格的第二行输入“在线注册”，且文字居中。 2.插入正文表格和表单 （1）把鼠标置于表格的第三行，单击菜单“插入” “表单” “表单”命令，插入一个空白表单。 （2）将鼠标放在表单中，单击菜单“插入” “表格”，插入一个10行2列的表格。 （3）选择嵌套表格的左列，设置对齐方式为右对齐。 （4）在第1行至第9行的左边单元格中分别输入：“用户名”、“密码”、“性别”、“爱好”、“联系方式”、“头像上
15、传”、“职业”、“备注”、“验证码”。,10.3 实践向导,3.插入表单元素 （1）将插入点置于第1行的右边单元格中，选择“插入” “表单” “文本域”命令，插入一个文本域。在文本域右面输入一个星号（*）。 （2）将插入点置于第2行的右边单元格中，选择“插入” “表单” “文本域”命令，插入一个文本域。选中该文本域，在其属性面板中“类型”中选择“密码”，在文本域右面输入一个星号（*）。 （3）将插入点置于第3行的右边单元格中，选择“插入” “表单” “单选组按钮” 命令，插入一个单选按钮组。在插入的单选按钮右边输入“男”、“女”。,10.3 实践向导,（4）将插入点置于第4行的右边单元格中，选
16、择“插入”“表单”“复选框” 命令，插入一个复选框。在复选框右侧输入“音乐”，然后在“音乐”右侧再插入3个复选框，并分别对应输入“看书”，“旅游”，“篮球”。 （5）将插入点置于第5行的右边单元格中，选择“插入”“表单” “文本域”命令，插入一个文本域，在文本域右面输入一个星号（*）。 （6）将插入点放入到第6行的右边单元格中，选择“插入”“表单”“文件域”命令。,10.3 实践向导,（7）将插入点放入到第7行的右边单元格中，选择“插入” “表单”“选择（列表/菜单）”命令，打开“列表值”对话框，在“项目标签”栏中单击，输入“请选择”，再单击“添加项目”按钮（+），依次添加“在校学生”、“固定工作者”、“自由职业者”、“待业/无业/失业”、“退休”、“其他” 。单击“确定”按钮完成设置。选择菜单控件，在其属性面板上选择“初始化时选定”列表中的“请选择”选项。,10.3 实践向导,（8）
