7、创建各种窗体

（3）增加一个搜索引擎

　　我们经常会看到一些个人主页上都提供了搜索引擎，可以很方便地查找网页或站点。这是怎么做的呢？

　　下面我们创建一个搜索页面，效果是这样的（图1）：在文本框中输入要搜索的关键字，选择搜索的类型，如网站或新闻等，点一下“搜索”按钮，符合条件的记录就找到了。

图1　搜索页面（点击浏览效果）

　　很多大的网站，如新浪、搜狐等，都有这样的搜索引擎，以供个人站点使用。下面我们就用新浪网提供的搜索引擎制作一个搜索表单。

　　新建一个空文档，添加一个Form。 将光标定位在红框内，输入文本“关键字：”，字体大小设置为2（图2）。

图2　添加Form后的页面

　　单击Object面板上的这个按钮，在表单范围内增加一个文字框；再点一下列表框按钮，增加一个列表框（图3）。

图3　加入文本框和列表框后的页面

　　这次我们用一张图片作为表单中的提交按钮。点一下image field按钮，选择事先做好的按钮图片s_up.jpg，确定后，表单布局大体完成（图4）。

图4　加入图形按钮的页面

　　接下来对这些控件进行属性设置。

　　先设置文字框的属性。选中它，在属性面板上将其宽度设为20，最大字符数设为60。文字框的名字为“_searchkey”（图5）。

图5　设置文本框属性

　　选择列表框，将其取名为“_ss”，单击“List Values”，编辑列表框中的内容（图6）。

　　　　网　　站　　sina
　　　　中文网页　　avcn
　　　　英文网页　　aven
　　　　新闻标题　　newstitle
　　　　新闻正文　　newsft
　　　　沪深行情　　stock
　　　　软　　件　　down
　　　　游　　戏　　game

图6　编辑列表框选项内容

　　注意：这里的项目名称可以随便改，但其value值是新浪搜索引擎定义好的，不能改，否则无法查询。

　　关闭列表框编辑窗口，将“网　　站”设为默认选项（图7）。

图7　设置列表框默认选项

　　图形按钮不用设置。

　　将光标移到表单的红色范围线上单击，在Action框中填写搜索引擎的URL，这里我们填入http://search.sina.com.cn/cgi-bin/search/search.cgi，提交表单的方法为GET（图8）。

图8　表单动作设置

　　 保存网页，按F12进入浏览器（图9）。输入“洪恩”，从列表框中选择“新闻标题”，单击“开始搜索”，网页就调用新浪网的搜索引擎进行搜索了。

图9　功能已完成的搜索页面（点击浏览效果）

　　看，我们找到符合条件的资料了（图10）。

图12　搜索结果

　　最后，我们把这个表单稍加美化，加上标题和背景等，就成为我们开始看到的样子了（图11）。

图11　美化过的搜索页面（点击浏览效果）

　　关于表单，我们就讲这些，如果想创建更复杂的表单，就要学习如何编写处理表单的程序，这些不是Dreamweaver中的内容，这里就不讲了。

　　到这里，Dreamweaver中级教程就讲完了，你是不是也和我一起做了不少网页，如果进步了，就写信告诉我，让我和你一起分享快乐。

上一节　下一节   

谈谈您的看法