DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Dreamweaver教程 >> Dreamweaver相關 >> 用Dreamweaver實現簡單的網頁搜索功能
用Dreamweaver實現簡單的網頁搜索功能
編輯:Dreamweaver相關     

 客戶在浏覽公司網站時,常常會對一些產品進行較為簡單的查詢搜索,本實例將講解其實現過程。

  效果說明

  客戶可以在如圖 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 )切換到代碼視圖,在“

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved