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