欢迎来到山村网

用Dreamweaver实现简单的网页搜索功能

2019-03-31 06:59:38浏览:884 来源:山村网   
核心摘要:  客户在浏览公司网站时,常常会对一些产品进行较为简单的查询搜索,本实例将讲解其实现过程。  效果说明  客户可以在如图

  客户在浏览公司网站时,常常会对一些产品进行较为简单的查询搜索,本实例将讲解其实现过程。

  效果说明

  客户可以在如图 86-1 所示的页面中选择特别查询字段,输入查询数据,对产品进行模糊查询,结果如图 86-2 所示。

用Dreamweaver实现简单的网页搜索功能   山村
用Dreamweaver实现简单的网页搜索功能

  创作构思

  在“ index.aspx ”页面中添加下拉列表、文本框及按钮,完成产品搜索页面的设置,制作出跟实例 85 中树形目录索引显示页面相同的页面作为产品搜索页面,然后设置程序以实现产品搜索。

  操作步骤

  步骤一 产品搜索页面的设置

  ( 1 )在“ LeftTb ”表格中添加 4 行并设置样式。打开“ index.aspx ”,在设计视图里的“ LeftTb ”表格中添加 4 行并设置样式,如图 86-3 中圆角方框所示。

用Dreamweaver实现简单的网页搜索功能

  ( 2 )添加控件。单击 ASP.NET 快捷菜单栏上的【 asp :下拉列表】按钮,为新添加的第 2 行添加下拉列表控件,如图 86-4 所示。

  ( 3 )添加列表标签及相应的值。在新添加的下拉列表“ FieldList ”属性窗口中单击【列表项】按钮,在弹出的【列表项】对话框中添加 3 个标签,一个标签为“产品编号”,其值为“ CPID ”;一个标签为“产品名”,其值为“ CPNAME ”;一个标签为“产品分类”,其值为“ CPFL ”,结果如图 86-5 所示。

用Dreamweaver实现简单的网页搜索功能

  ( 4 )继续在新添加的行中添加文本框,设 ID 为“ SearchTxt ”,并添加两个按钮,一个按钮为“搜索”, ID 为“ GoBt ”;另一个按钮为“高级搜索”, ID 为“ TopgoBt ”,结果如图 86-6 所示。

  步骤二 实现产品搜索

  ( 1 )切换到代码视图,在“

:更多精彩教程请关注山村网页设计教程 栏目,

(责任编辑:豆豆)
下一篇:

Flash绘制有趣脸形图

上一篇:

Flash打造可爱卡通小蜜蜂睡觉情景

  • 信息二维码

    手机看新闻

  • 分享到
打赏
免责声明
• 
本文仅代表作者个人观点,本站未对其内容进行核实,请读者仅做参考,如若文中涉及有违公德、触犯法律的内容,一经发现,立即删除,作者需自行承担相应责任。涉及到版权或其他问题,请及时联系我们 xfptx@outlook.com