网页编程教学第5章.ppt

第5章 表单与特殊对象,5.1 创建表单 5.2 创建表单控件 5.3 设置控件的标签 5.4 网页中的特殊对象,5.1 创建表单 5.1.1 什么是表单 表单是用于实现网页浏览者与服务器（或者说网页所有者）之间信息交互的一种页面元素，在 WWW 上它被广泛用于各种信息的搜集和反馈。例如，图 5-1 显示了一个用于进行电子邮件系统登录的表单（图中椭圆标记的位置）。,图 5-1 表单示例 1,图 5-2 显示了一个稍微复杂的表单，其中包含更多种类的表单控件：文本框、口令框、单选按钮、下拉菜单等。,图 5-2 表单示例 2,5.1.2 表单控件的类型 5.1.3 FORM 标记符,5.2 创建表单控件 5.2.1 文本框与口令框 以下 HTML 代码显示了单行文本框和口令框的用法（也包含了表单中必须有的提交按钮），显示效果如图 5-3 所示。,图 5-3 单行文本框和口令框示例, 单行文本框和口令框示例 表单单行文本框和口令框 请输入您的姓名： ,请输入您的密码： ,5.2.2 复选框与单选框 以下 HTML 代码显示了如何在表单中包含多个复选框和单选框，效果如图 5-4 所示。,图 5-4 复选框与单选框示例, 复选框与单选框示例 表单-复选框与单选框 请输入您的姓名： 请选择您的性别： 男 女 东方不败 不告诉你 请选择您的年龄： 20岁以下,2030 30以上 您喜欢什么运动： 篮球 足球 排球 其他球 ,5.2.3 文件选择框 以下 HTML 代码显示了如何在表单中包含文件选择框，效果如图 5-5 所示。,图 5-5 文件选择框示例, 文件选择框示例 表单文件选择框 请选择文件： ,5.2.4 按钮图 5-6 按钮示例 以下 HTML 代码显示了如何在表单中包含各种按钮，效果如图 5-6 所示。,图 5-6 按钮示例, 按钮示例 表单按钮 ,以下 HTML 代码显示了如何使用一个图形化的提交按钮，显示效果如图 5-7 所示。,图 5-7 图形化提交按钮示例, 图形化提交按钮 表单图形化提交按钮 请输入您的姓名： ,5.2.5 多行文本框 以下 HTML 代码显示了如何在表单中使用多行文本框，显示效果如图 5-8 所示。,图 5-8 多行文本框示例, 多行文本框示例 表单多行文本框 请输入您的姓名： 请在下框内输入您的宝贵意见： 请多指教！ ,5.2.6 选项菜单 以下 HTML 代码显示了如何在表单中使用选项菜单，效果如图 5-9 所示。,图 5-9 选项菜单示例, 选项菜单示例 表单选项菜单示例 请输入您的姓名： 请选择您最喜欢的影视明星： 周星驰 周润发 刘德华 其他, 请选择您喜欢的周星驰作品（按住 “Ctrl“ 或 “Shift“ 可以多选）： 鹿鼎记 少林足球 大话西游 喜剧之王大内密探008 九品芝麻官 武状元苏乞儿 百变金刚 其他 ,5.3 设置控件的标签 以下 HTML 代码显示了如何为控件指定标签，效果如图 5-10 所示。,图 5-10 控件标签示例, 控件的标签示例 表单-控件标签 请输入您的姓名： 请输入您的密码： 请选择您要订阅的内容（可以多选）：,娱乐新闻 影视预告 最新游戏 ,5.4 网页中的特殊对象 5.4.1 多媒体对象 OBJECT 标记符和 PARAM 标记符 Flash 对象 插入 Flash 对象之后，Dreamweaver 自动生成的代码如下：,插入 Flash 对象的网页效果如图 5-11 所示。,图 5-11 插入 Flash 对象的网页, Shockwave 对象 如果说 Flash 对象还常常被人称为动画的话，那么 Shockwave 对象则真正是不折不扣的多媒体对象。Shockwave 对象由 Director 开发，相比 Flash 对象而言具有更为强大多媒体表现力，读者可以到 上领略一下 Shockwave 的震撼力（首先需要下载相应的 Shockwave 插件），如图 5-12 所示。,图 5-12 ,如果要制作 Shockwave 对象，应使用 Director 软件，图 5-13 显示了 Director8.0 的用户界面，读者如果需要了解进一步的信息，请参见软件的联机帮助或其他相关书籍。,图 5-13 Director8.0 界面,在 Director 中制作好了电影（与 Flash 一样，Director 作品也称为电影）之后，应该使用“Publish”（发布）命令将其导出为 Web 能够显示的格式（Director 编辑的源文件为 .dir 格式，最后导出的 Shockwave 格式为 .dcr 格式），然后就可以用 Dreamweaver 对象面板中的“Insert Shockwave”按钮 将 Shockwave 对象插入到网页中了，代码如下所示：,插入 Shockwave 对象的网页效果如图 5-14 所示。,图 5-14 插入 Shockwave 对象的网页,5.4.2 Java 小应用程序对象 APPLET 标记符 自动生成 Java 小应用程序效果 1使用 Anfy 自动生成 Java 小应用程序特效 Anfy 是最著名的 Java 特效工具之一，使用它可以制作出多达 40 种 Java 特效。如果要使用该软件，首先应到 （或 ）上下载。安装并启动 Anfy 之后，它的界面如图 5-15 所示。,图 5-15 Anfy 的界面,使用 Anfy 制作 Java 特效非常简单，只要按照对话框的提示一步一步操作即可。做到最后一步，总是显示类似如图 5-16 所示的对话框，单击其中的“Copy into clipboard”按钮，则可以把自动生成的 HTML 代码复制到剪贴板中，然后就可以将其直接插入到网页源文件中。,图 5-16 复制 Anfy 自动生成的 HTML 代码,需要特别注意的是，如果要让 Java 小应用程序正确工作，必须将相应的 .class 文件（也就是 Java 的可执行文件）复制到网页所在目录。比较简便的方法是：单击图 5-16 所示对话框中的“Copy all files to”按钮，将所有相关文件都复制到网页所在目录（之后可以删除不需要的文件）。 例如，图 5-17 显示了插入 Anfy 特效的一个网页（其中显示的是图像的马赛克切换效果）。,图 5-17 插入 Anfy 特效的网页,2使用 FrontPage 自动生成 Java 小应用程序特效 在所见即所得的网页编辑软件 FrontPage 中，也提供了若干种 Java 小应用程序特效。选择“插入”菜单“组件”命令，其中的“横幅广告管理器”和“悬停按钮”都是比较常用的 Java 特