導航:首頁 > 萬維百科 > 網站搜索設計

網站搜索設計

發布時間:2020-08-15 03:09:11

1、如何設計搜索框

所謂搜索框,實際上就是一個輸入域和提交按鈕的組合。有人可能會認為搜索框並不需要設計, 畢竟它只涉及到兩個簡單的元素。然而,在那些重內容的網站上,搜索框常常都是用戶最用到的設計元素。當用戶遇到一個相對復雜的網站時,他們往往會首先尋找這個網站內的搜索框,以便能快速高效地到前往自己想去的頁面或找到自己最為關心的內容。因此,搜索框的設計及其可用性問題其實是一個不容忽視的要點。

1、使用放大鏡圖標

一個搜索框應該始終與放大鏡圖標放在一起。所謂圖標,其實就是代表著一個對象、動作、想法等多種含義的圖形符號。我們通過圖標看到的不僅僅是圖標本身,而是它所代表的內在含義。然而,對於用戶來講,具有通用性代表含義的圖標為數並不多,幸運的是,放大鏡圖標正是其中之一。

2、搜索框要顯著

如果搜索是你的應用程序/網站的一個重要功能,那麼搜索框的顯示務必要足夠顯著,以保證用戶能夠最快的發現它。直接顯示完整的搜索框很重要,因為默認只顯示搜索圖標(點擊圖標才展開搜索框)的話會使搜索功能不那麼明顯,而且增加了用戶的交互成本。

3、提供一個搜索按鈕 

搜索按鈕可以幫助用戶識別出觸發搜索操作的下一步——即使他們可能往往會通過按Enter鍵來執行此操作。

提示:

1)提交按鈕的尺寸大小要合適,以便用戶不必非常精確地移動滑鼠位置到它上面。較大的可點擊區域會使得按鈕本身更容易被發現和點擊。

2)使用Enter鍵或點擊搜索按鈕都應該能執行搜索操作才對,畢竟許多用戶仍然有點擊搜索按鈕來提交搜索的習慣。

4、將搜索框放在每一頁上

用戶在每個頁面上都應該能獲取搜索框,因為如果用戶找不到他們要找的內容,他們往往會自然而然地想要嘗試使用搜索功能來進行查找,他們才不關心自己當前是在你網站的哪個地方(以及該不該有搜索)。

5、搜索框要足夠簡單

如果你設計了一個搜索框,請確保它看起來確實像是一個搜索框,並且使用起來要足夠簡單。可用性研究表明,默認情況下不顯示高級搜索選項對用戶會更加友好。高級搜索選項(例如下面的示例中的布爾搜索查詢)可能會混淆要嘗試使用它的用戶。

6、將搜索框放在用戶預期找到的位置

如果因為搜索框不夠突出、不容易察覺,用戶還得花費精力去找它,那這個設計無疑是不夠友好的。因此,最好將搜索框放在頁面的右上方或中上方,以確保用戶能在預期的位置找到它。

提示:

1)理想情況下,雖然搜索框在用戶需要的地方應該能輕易出現,但是搜索框的設計也應該完美地契合網站的整體設計效果。

2)內容越重的站點,你越希望搜索框顯著。如果搜索對你的網站至關重要,請使用大的對比度,以便搜索框和圖標能從頁面背景和周圍元素中脫穎而出。

7、搜索框尺寸大小要合適

輸入框太短是設計人員常犯的一個錯誤。當然,用戶可以鍵入長查詢,但一次只能看到一部分輸入的文本,這自然也就存在可用性問題,因為用戶無法輕松地回看和編輯其剛剛才輸入的查詢條件。事實上,當搜索框具有有限數量的可見字元時,用戶會被迫使用短的、不精確的查詢條件,因為更長的查詢條件將不易閱讀。 但如果輸入框的長度是根據用戶的預期輸入來確定大小的,那對用戶而言就友好多了。

經驗表明一個可以輸入27個字元的輸入框是比較合適的,它能夠適應90%的查詢條件。

提示:不妨考慮使用擴展型的搜索框,它會在用戶點擊時展開文本輸入框。這種做法一方面節省了屏幕空間,同時仍能給予用戶足夠的視覺提示以便他們快速找到並執行搜索。

8、使用自動檢索匹配機制

自動檢索匹配機制可根據用戶輸入的字元進行預測來幫助用戶找到一個可能匹配的查詢條件。 該機制並不是為了加快搜索過程,而是為了引導用戶並幫助他們構建他們的查詢條件。普通用戶在構建查詢方面往往會有困難:如果他們在第一次嘗試查詢後沒有獲得滿意的結果,後面的查詢也會很難順利,事實上,他們常常就會放棄。而當自動檢索匹配機制運作順利時,它們就能幫助用戶將查詢條件表達的更加清楚。

Google 搜索自2008年起就已經開始應用該機制,現在已經相當成熟。由於用戶常常會多次搜索相同的內容,因此通過記住搜索記錄,Google既節省了時間成本又能創造出更為便捷高效的搜索體驗。

提示:

1)確保自動檢索匹配機制是有效的,若設計不當,就可能會混淆和分散用戶的注意力。因此,不妨使用自動更正拼寫錯誤、根詞識別和文本預測等做法,來改進這種機制發揮更好的作用。

2)你應該盡快提供自動檢索匹配,例如在用戶輸入第三個字元後就提供有效匹配以減少用戶的輸入成本。

3)匹配的查詢條件不要多餘10個(而且不要顯示滾動條),以保證信息不會變得過載。

4)允許使用鍵盤在匹配的條件列表中導航。一旦用戶在最後一個項目中接著向下滾動,他們應該重新返回到列表的頂部。另外,Esc 鍵應該允許用戶退出列表。

5)突出輸入部分跟匹配部分的差異(例如,輸入文本具有標准字重,而匹配部分使用粗體字重)。

9、明確告訴用戶可以搜索哪些內容

在輸入框中顯示一個搜索查詢的示例條件是一個不錯的做法,這樣能夠向用戶表明他們究竟可以應用該搜索框搜索哪些/哪類內容。 如果用戶可以搜索多個條件,則使用輸入提示模式來向用戶說明(例如,HTML5 技術使得我們可以很輕松地在輸入框中寫明作為佔位符的提示文本。)

結論:

對於創建一個重內容的應用程序或網站而言,搜索理應作為一個基本的操作和關鍵要素。即使小幅的改進(例如使搜索框長度更合適或者指明可以搜索哪些信息)都可以顯著增加搜索的可用性以及整體的用戶體驗。

2、怎樣設計一個用戶與搜索引擎都滿意的網站

對於新站,網站內容最好不要太多,一百左右的網頁就差不多了。網站結構一定要清晰明了,主題明確,目標關鍵詞突出,這樣搜索引擎才好最快地給你的網站定位,如果一個網站,你自己都搞不明白網站的主題,搜索引擎也無法給你的網站歸類。搜索引擎資料庫是龐大的,並不是把什麼網站都隨意的放入資料庫裡面,它裡面有很多索引目錄,不同主題的網站,索引目錄也不同。適量的內容,明確的主題是加快網站收錄的保障。還有一點,也是非常重要的一點,如果有可能,在高權重的的網站上放上你網站的導入鏈接,因為高權重的網站,蜘蛛光顧的頻率高,通過導入鏈接,能吸引蜘蛛爬行你的網站,蜘蛛爬行的多了,網站收錄的也就更快了。看起來挺簡單,其實做起來很難,很多細節上都要注意,定時分析自己網站的數據,根據數據來判斷哪些做的可以。哪些需要拋棄了。

3、搜索引擎的設計技巧?

一、搜索引擎的分類

獲得網站網頁資料,能夠建立資料庫並提供查詢的系統,我們都可以把它叫做搜索引擎。按照工作原理的不同,可以把它們分為兩個基本類別:全文搜索引擎(FullText Search Engine)和分類目錄Directory)。

全文搜索引擎的資料庫是依靠一個叫「網路機器人(Spider)」或叫「網路蜘蛛(crawlers)」的軟體,通過網路上的各種鏈接自動獲取大量網頁信息內容,並按以定的規則分析整理形成的。Google、百度都是比較典型的全文搜索引擎系統。

分類目錄則是通過人工的方式收集整理網站資料形成資料庫的,比如雅虎中國以及國內的搜狐、新浪、網易分類目錄。另外,在網上的一些導航站點,也可以歸屬為原始的分類目錄,比如「網址之家」。

全文搜索引擎和分類目錄在使用上各有長短。全文搜索引擎因為依靠軟體進行,所以資料庫的容量非常龐大,但是,它的查詢結果往往不夠准確;分類目錄依靠人工收集和整理網站,能夠提供更為准確的查詢結果,但收集的內容卻非常有限。為了取長補短,現在的很多搜索引擎,都同時提供這兩類查詢,一般對全文搜索引擎的查詢稱為搜索「所有網站」或「全部網站」,比如Google的全文搜索(http://www.google.com/intl/zh-CN/);把對分類目錄的查詢稱為搜索「分類目錄」或搜索「分類網站」,比如新浪搜索和雅虎中國搜索(http://cn.search.yahoo.com/dirsrch/)。

在網上,對這兩類搜索引擎進行整合,還產生了其它的搜索服務,在這里,我們權且也把它們稱作搜索引擎,主要有這兩類:

⒈元搜索引擎(META Search Engine)。這類搜索引擎一般都沒有自己網路機器人及資料庫,它們的搜索結果是通過調用、控制和優化其它多個獨立搜索引擎的搜索結果並以統一的格式在同一界面集中顯示。元搜索引擎雖沒有「網路機器人」或「網路蜘蛛」,也無獨立的索引資料庫,但在檢索請求提交、檢索介面代理和檢索結果顯示等方面,均有自己研發的特色元搜索技術。比如「metaFisher元搜索引擎」
(http://www.hsfz.net/fish/),它就調用和整合了Google、Yahoo、AlltheWeb、百度和OpenFind等多家搜索引擎的數據。

⒉集成搜索引擎(All-in-One Search Page)。集成搜索引擎是通過網路技術,在一個網頁上鏈接很多個獨立搜索引擎,查詢時,點選或指定搜索引擎,一次輸入,多個搜索引擎同時查詢,搜索結果由各搜索引擎分別以不同頁面顯示,比如「網際瑞士軍刀」(http://free.okey.net/%7Efree/search1.htm)。

二、搜索引擎的工作原理

全文搜索引擎的「網路機器人」或「網路蜘蛛」是一種網路上的軟體,它遍歷Web空間,能夠掃描一定IP地址范圍內的網站,並沿著網路上的鏈接從一個網頁到另一個網頁,從一個網站到另一個網站採集網頁資料。它為保證採集的資料最新,還會回訪已抓取過的網頁。網路機器人或網路蜘蛛採集的網頁,還要有其它程序進行分析,根據一定的相關度演算法進行大量的計算建立網頁索引,才能添加到索引資料庫中。我們平時看到的全文搜索引擎,實際上只是一個搜索引擎系統的檢索界面,當你輸入關鍵詞進行查詢時,搜索引擎會從龐大的資料庫中找到符合該關鍵詞的所有相關網頁的索引,並按一定的排名規則呈現給我們。不同的搜索引擎,網頁索引資料庫不同,排名規則也不盡相同,所以,當我們以同一關鍵詞用不同的搜索引擎查詢時,搜索結果也就不盡相同。

和全文搜索引擎一樣,分類目錄的整個工作過程也同樣分為收集信息、分析信息和查詢信息三部分,只不過分類目錄的收集、分析信息兩部分主要依靠人工完成。分類目錄一般都有專門的編輯人員,負責收集網站的信息。隨著收錄站點的增多,現在一般都是由站點管理者遞交自己的網站信息給分類目錄,然後由分類目錄的編輯人員審核遞交的網站,以決定是否收錄該站點。如果該站點審核通過,分類目錄的編輯人員還需要分析該站點的內容,並將該站點放在相應的類別和目錄中。所有這些收錄的站點同樣被存放在一個「索引資料庫」中。用戶在查詢信息時,可以選擇按照關鍵詞搜索,也可按分類目錄逐層查找。如以關鍵詞搜索,返回的結果跟全文搜索引擎一樣,也是根據信息關聯程度排列網站。需要注意的是,分類目錄的關鍵詞查詢只能在網站的名稱、網址、簡介等內容中進行,它的查詢結果也只是被收錄網站首頁的URL地址,而不是具體的頁面。分類目錄就像一個電話號碼薄一樣,按照各個網站的性質,把其網址分門別類排在一起,大類下面套著小類,一直到各個網站的詳細地址,一般還會提供各個網站的內容簡介,用戶不使用關鍵詞也可進行查詢,只要找到相關目錄,就完全可以找到相關的網站(注意:是相關的網站,而不是這個網站上某個網頁的內容,某一目錄中網站的排名一般是按照標題字母的先後順序或者收錄的時間順序決定的)。
搜索引擎並不真正搜索互聯網,它搜索的實際上是預先整理好的網頁索引資料庫。

真正意義上的搜索引擎,通常指的是收集了網際網路上幾千萬到幾十億個網頁並對網頁中的每一個詞(即關鍵詞)進行索引,建立索引資料庫的全文搜索引擎。當用戶查找某個關鍵詞的時候,所有在頁面內容中包含了該關鍵詞的網頁都將作為搜索結果被搜出來。在經過復雜的演算法進行排序後,這些結果將按照與搜索關鍵詞的相關度高低,依次排列。

現在的搜索引擎已普遍使用超鏈分析技術,除了分析索引網頁本身的內容,還分析索引所有指向該網頁的鏈接的URL、AnchorText、甚至鏈接周圍的文字。所以,有時候,即使某個網頁A中並沒有某個詞比如「惡魔撒旦」,但如果有別的網頁B用鏈接「惡魔撒旦」指向這個網頁A,那麼用戶搜索「惡魔撒旦」時也能找到網頁A。而且,如果有越多網頁(C、D、E、F……)用名為「惡魔撒旦」的鏈接指向這個網頁A,或者給出這個鏈接的源網頁(B、C、D、E、F……)越優秀,那麼網頁A在用戶搜索「惡魔撒旦」時也會被認為更相關,排序也會越靠前。

搜索引擎的原理,可以看做三步:從互聯網上抓取網頁→建立索引資料庫→在索引資料庫中搜索排序。

從互聯網上抓取網頁
利用能夠從互聯網上自動收集網頁的Spider系統程序,自動訪問互聯網,並沿著任何網頁中的所有URL爬到其它網頁,重復這過程,並把爬過的所有網頁收集回來。

建立索引資料庫
由分析索引系統程序對收集回來的網頁進行分析,提取相關網頁信息(包括網頁所在URL、編碼類型、頁面內容包含的關鍵詞、關鍵詞位置、生成時間、大小、與其它網頁的鏈接關系等),根據一定的相關度演算法進行大量復雜計算,得到每一個網頁針對頁面內容中及超鏈中每一個關鍵詞的相關度(或重要性),然後用這些相關信息建立網頁索引資料庫。

在索引資料庫中搜索排序
當用戶輸入關鍵詞搜索後,由搜索系統程序從網頁索引資料庫中找到符合該關鍵詞的所有相關網頁。因為所有相關網頁針對該關鍵詞的相關度早已算好,所以只需按照現成的相關度數值排序,相關度越高,排名越靠前。
最後,由頁面生成系統將搜索結果的鏈接地址和頁面內容摘要等內容組織起來返回給用戶。
搜索引擎的Spider一般要定期重新訪問所有網頁(各搜索引擎的周期不同,可能是幾天、幾周或幾月,也可能對不同重要性的網頁有不同的更新頻率),更新網頁索引資料庫,以反映出網頁內容的更新情況,增加新的網頁信息,去除死鏈接,並根據網頁內容和鏈接關系的變化重新排序。這樣,網頁的具體內容和變化情況就會反映到用戶查詢的結果中。

互聯網雖然只有一個,但各搜索引擎的能力和偏好不同,所以抓取的網頁各不相同,排序演算法也各不相同。大型搜索引擎的資料庫儲存了互聯網上幾億至幾十億的網頁索引,數據量達到幾千G甚至幾萬G。但即使最大的搜索引擎建立超過二十億網頁的索引資料庫,也只能佔到互聯網上普通網頁的不到30%,不同搜索引擎之間的網頁數據重疊率一般在70%以下。我們使用不同搜索引擎的重要原因,就是因為它們能分別搜索到不同的內容。而互聯網上有更大量的內容,是搜索引擎無法抓取索引的,也是我們無法用搜索引擎搜索到的。

你心裡應該有這個概念:搜索引擎只能搜到它網頁索引資料庫里儲存的內容。你也應該有這個概念:如果搜索引擎的網頁索引資料庫里應該有而你沒有搜出來,那是你的能力問題,學習搜索技巧可以大幅度提高你的搜索能力。

4、大型網站怎麼製作實現搜索系統

模式匹配演算法
大部分搜索演算法採用匹配的方法,也就是說,它們會比對用戶的査詢字元串與網站文件全文的索引,以尋找符合的文本字元串。找到吻合字元串時,來源文件就加進搜索集合中。所以,如果用戶輸入査詢字元串「electric guitar」時,任何文件只要含有「electric guitar」,就會被檢索出來。聽起型當簡單,但是這個比對過程可以用很多不同方式運作,以產生不同的結果。有些演算法傳回很多的結果,而這些結果各有不同的相關性,有些演算法只傳回高質量的結果。變動范圍的兩個極端術語就是査全率和査准率。甚至還有公式可以計算他們:査全率=#檢索出來的相關文件牌集合中的所有文件,査准率=#檢索出來的相關文件/#集合中的相關文件。那麼是否可以兼顧兩者呢,可惜,魚與熊掌不可兼得,考慮大到用戶的利益,我們需要在西者間取得平衡,然後,根據選擇一種搜索引擎,其演算法是偏向杳全率或者杳准率視情況而定,
其他做法
當你有「好」文件在手上時,有些演算法會把該文件轉換得相當於一個查詢(這種做法通常稱為文件相似度)。例如「the」「is」「he」這些停用詞會從好文件中抽掉,留下一組語義豐富的術語,足以代表文件即可。然後,這些術語會轉換成一種査詢字元串,面這種査詢字元串可以讓你檢索出類似的結果。另一種做法展示那些已經使用相類似的元數據做過索引的結果。當然,一定還有其他的搜索演算法,但重點是這些演算法的主要目的是找出最好的文件集合作為搜索結果。但是,「最好」是相當主觀的,而且必須了解什麼人想在你的網站上找到什麼。
分組結果
盡管我們可以用各種方式列出結果,卻沒有一種是完美的。像Google的混合式做法就很有希望,但是,通常必須介入搜索的設計工作,才可能擁有這樣的工具。無論是哪種情況,我們的網站通常是越來越大,因此,搜索結果也會變大。同時,當用戶放棄再看時,那些就只是理想中的。然而另一種替代排序和排名的做法看來是有希望的:依照某個共同的方面把結果聚集起來。當結果按類別和等級分組時,可以改善效果。 我們怎麼分組結果?可惜,明顯的方式都沒什麼用:我們可以使用現有的元數據,諸如文件類型以及文件建立/修改日期,讓我們把搜索結果分成幾個組群。比較游泳的是從手工添加的元數據衍生出來的組群,諸如主題、用戶、語言,以及產品家族。可惜,根據手工添加的做法會貴到嚇人。有些自動化工具可以得到比較有用的主題類型組群,通常可以滿足用戶所需。這些組群為結果提供了情境,你可以選擇你最感興趣的目錄,就能夠瀏覽相當小的一群搜索集合,以及一群相同主題領域的文件(理想上) 。這種做法很類似動態產生的搜索區域。
設計捜索界面
用戶差異性大,搜索技術也花招百出,所以實在沒有什麼單一化的理想捜索界面。在 web早起,很多搜索引擎都是在校仿在線圖書館目錄和以CD-ROM為主的資料庫中所採用的「傳統」搜索引擎功能,這些傳統系統多半提供給研究者、圖書館員及專業人士,面用戶通常要懂得復雜語言才能使它們。在web的用戶:爆炸增長之後,全方位的搜索經驗和專長下降到最低點,新生代的用戶沒那麼多耐性。用戶通常只會輸入一兩個術語,不會包含任何運算符,然後就按下 「搜索」按鈕,並希望能得到最佳的結果。搜索引擎開發人員的做法是,把老式的花悄找事隱藏在「高級捜索」界面之中。 由於以上理由,最終又會晃回老路,支持受到挫折的用戶可以用更多的搜索語言,而且他們也願意花時間學習復雜的搜索界面,並構造出査詢字元串。但是就目前面言,假設最好的做法是讓搜索界面盡可能簡單,而這也是相當合理的。

5、自己設計的網站,實現站內搜索的方法是什麼?

Google: http://www.google.com/intl/zhCN/add_url.html 

百度: http://www.baidu.com/search/url_submit.html 

可去以上兩個網站中添加你自己網站的網路地址。

6、網頁設計 類似百度搜索頁面是怎麼做出來的

網頁設計這個一般都是要求會前端代碼,html css js flash 還有些其他的腳本插件什麼的。

如果代碼寫的熟練可以不用DW。寫網頁的工具很多,用txt文本文檔也可以。


好了,貼上搜索框代碼,使用需要後台程序支持,直接點了可是什麼都沒有哦。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>搜索框</title>
<style type="text/css" media="screen">
      body {
        background-color: #f1f1f1;
        margin: 0;
      }
      body,
      input,
      button {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      }
      .container { margin: 30px auto 40px auto; width: 800px; text-align: center; }

      a { color: #4183c4; text-decoration: none; font-weight: bold; }
      a:hover { text-decoration: underline; }

      h3 { color: #666; }
      ul { list-style: none; padding: 25px 0; }
      li {
        display: inline;
        margin: 10px 50px 10px 0px;
      }
      input[type=text],
      input[type=password] {
        font-size: 13px;
        min-height: 32px;
        margin: 0;
        padding: 7px 8px;
        outline: none;
        color: #333;
        background-color: #fff;
        background-repeat: no-repeat;
        background-position: right center;
        border: 1px solid #ccc;
        border-radius: 3px;
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        transition: all 0.15s ease-in;
        -webkit-transition: all 0.15s ease-in 0;
        vertical-align: middle;
      }
      .button {
        position: relative;
        display: inline-block;
        margin: 0;
        padding: 8px 15px;
        font-size: 13px;
        font-weight: bold;
        color: #333;
        text-shadow: 0 1px 0 rgba(255,255,255,0.9);
        white-space: nowrap;
        background-color: #eaeaea;
        background-image: -moz-linear-gradient(#fafafa, #eaeaea);
        background-image: -webkit-linear-gradient(#fafafa, #eaeaea);
        background-image: linear-gradient(#fafafa, #eaeaea);
        background-repeat: repeat-x;
        border-radius: 3px;
        border: 1px solid #ddd;
        border-bottom-color: #c5c5c5;
        box-shadow: 0 1px 3px rgba(0,0,0,.05);
        vertical-align: middle;
        cursor: pointer;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-appearance: none;
      }
      .button:hover,
      .button:active {
        background-position: 0 -15px;
        border-color: #ccc #ccc #b5b5b5;
      }
      .button:active {
        background-color: #dadada;
        border-color: #b5b5b5;
        background-image: none;
        box-shadow: inset 0 3px 5px rgba(0,0,0,.15);
      }
      .button:focus,
      input[type=text]:focus,
      input[type=password]:focus {
        outline: none;
        border-color: #51a7e8;
        box-shadow: inset 0 1px 2px rgba(0,0,0,.075), 0 0 5px rgba(81,167,232,.5);
      }
     
      label[for=search] {
        display: block;
        text-align: left;
      }
      #search label {
        font-weight: 200;
        padding: 5px 0;
      }
      #search input[type=text] {
        font-size: 18px;
        width: 705px;
      }
      #search .button {
        padding: 10px;
        width: 90px;
      }

    </style>
</head>
<body>
<div class="container">
  <div id="search">
    <label for="search"></label>
    <input type="text" name="q">
    <input class="button" type="submit" value="Search">
  </div>
</div>
<div style="text-align:center;margin:100px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

7、如何在網頁中實現搜索功能?

有三種常見的方式

1、自己設計表單、編程、與資料庫鏈接檢索。

2、在百度或谷歌注冊申請站內搜索功能。獲得代碼,添加到自己的頁面中。

3、使用第三方的工具軟體,搭建檢索功能

下面是製作』PHP搜索』功能
准備:
資料庫(mysql):一個資料庫(search),庫裡面一個表(title),表裡面一個欄位(name).
PHP頁面:兩個頁面(index.php search.php)
製作工具:Dreamweaver

開始:
——————————————————

第一步.創建資料庫.(目前大家應該都是用的phpmyadmin來操作資料庫的吧?)
建立一個資料庫.

第二步.建表
在剛建立的search資料庫里插入一個名字為title的表.建表時讓你選插入幾個欄位.寫1就可以了.

第三步.建欄位
插入的欄位命名為name,長度值20就可以了.

—–資料庫部分已經做完,接下來是網頁部分—–

第四步.建立兩個頁面
建立兩個文件:index.php和search.php可以使用記事本等文本工具直接建立.我使用的工具是Dreamweaver(方便嘛.呵呵).

第五步.index.php的頁面製作.
這個頁面是用來傳遞你搜索的關鍵字的.代碼如下:
<form method=」post」 action=」search.php」 name=」search」>
<input name=」search」 type=」text」 value=」" size=」15″> <input type=」submit」 value=」Search」>
</form>
這段代碼是建立一個FORM表單.專門用來提交數據的.
第一行是FORM表單的開始.它的傳遞方式是post,傳遞到search.php這個頁面.表單名為name.
第二行是文本域和提交按鈕.文本域命名為search,按鈕默認就可以了.
第三行是FORM表單的結束語句.

第五步.search.php的頁面製作.
這個頁面很關鍵.因為他是獲取index頁面傳遞過來的值,然後導出搜索的數據.
首先要綁定你建立的search資料庫,我用的DW生成的.
上一個頁面傳送的文本域是search.所以,這里需要建立一個search變數.來接收你輸入的關鍵詞.用以下語句定義變數:
<?php
$searchs = $_POST['search'];
?>

然後建立一個記錄集,選擇高級.SQL語句中填寫:
SELECT *

FROM title

WHERE name like 『%$searchs%』

這句的意思是選擇title表裡面的所有欄位(*),然後查詢name中的$searchs變數。這個變數也就是你在index中輸入的值啦。

然後在BODY裡面綁定一個動態文本。選擇NAME。

—–網頁部分完成.真個搜索功能也就完成了—–

8、網站設計中搜索框的設計技巧有哪些

設計精美的網站當然很吸引人,但如果你的網站設計精美,內容上乘,就是不明白網站為何沒達到運營預期目標,問題可能就出在搜素框這一元素的運用之上。本文指出了設計者必須避免的錯誤,並分享了一些搜索框設計技巧,希望在優化網站性能方面有所幫助。

在瀏覽整個網站中,搜索框通常是通向用戶使用的最後一道關卡。如果你的網站內容很多,包含了詳盡的特色,功能,設計元素,產品和服務等等,那麼搜索框就成為了網站不可或缺的一部分。網站的成長往往需要時間。當然,從整個網站設計和開發過程來看,設計肯定要簡潔,有文章和評論,以及非正式的網站通知,特色內容和服務等等。不過,隨著網站層次不斷提升和更新,與網站相關的內容的只是起到了裝飾作用。因此,搜索框對網站的性能優化起到了至關重要的作用。

優質的職能和運作對網站開發確實很重要,但與此同時,我們也不可忽視網站的前端性能。你的網站也許在特色內容,功能以及內容質量等方面都很出眾,但是,如果網站前端性能令人不滿意,並且沒有以用戶為中心,那麼網站其它方面做得再好,也起不到任何作用。

錯誤觀念:搜索框不需要設計

在整個網站設計中,搜索框的外觀要顯眼,方便用戶快速找到。網站站長普遍認為搜索框只是一個輸入和提交內容的按鈕而已,因此他們根本不需要花時間設計。

但是由於錯誤觀念泛濫,站長們也錯失了一些潛在的機會。由於設計上的缺失以及亮點不突出,用戶通常會被搜索框的位置弄得焦頭爛額,他們通常會點擊「返回」按鈕(離開網頁)。因此,設計平庸,辨識度不高的搜索框就是導致這一切的元兇,如果想要網站獲得可觀的流量,但是網站轉化率卻低得離譜,這是不行的。

如果用戶對你的網站感到失望,搜索框則有助於留住用戶。在大量的網站中,真正帶給用戶絕佳體驗的少之又少,用戶有時還沒深入了解整個網站,可能就不斷點擊後退,離開網頁了。如果用戶能進行搜索,他們只需在搜索框中輸入自己想找的內容,上述問題也就迎刃而解了。

在如今這個快速成功的社會,時間就是金錢。搜索框不僅能幫助用戶節約時間,還可帶給用戶高度愉悅和簡潔的瀏覽體驗。

搜索框設計技巧

在為網站設計搜索框時,你可重點考慮以下建議:

1. 搜索框要顯眼

搜索框要清晰可見,千萬不可放在難以注意到的位置。即使你的網站主題是純白色,為搜索框設置黑色的邊框,選用紅色等亮色作為字體顏色,這都可能會解決搜索框不明顯的問題。

2. 搜索框要有搜索框的樣

你可以嘗試在搜索框設計中融入創意,但是不要把它弄得不倫不類。這也是搜索框必須是框狀的原因。訪問網站的用戶不會仔細瀏覽完整個網站的內容,他們只會關注自己感興趣的內容,而且許多學習條件是受制於他們的行為,在用搜索框進行搜索時,實際上用圓角矩形的搜索框就可以了。

3. 搜索框的位置

搜索框的位置對網站優化和性能提升十分重要。一般的經驗表明搜索框的最佳位置應在網站頂部的左上角或右上角,因為用戶希望節約時間和精力,直接搜索到他們所需的內容。但是受廣告等內容的影響,迫使設計者將搜索框放在頁面底部。這並沒真正解決搜索框在網站中的實用性問題,必須避免。

另外,在每個網頁中都放入搜索框是一個明智的主意,即使用戶在網站中迷失,他們也能夠方便地找到需要的內容。

4. 為提交按鈕取一個有創意的名字

搜索框的名字要取得有創意,不要簡單地放上單調的「go」,「find」或「search」在旁邊。不管給它起什麼名字,只要不為難用戶去猜意思就好。

5. 為用戶提供分類搜索

用戶可自由搜索各種分類。同樣的思路,你也可以顯示分類,用戶在輸入區域進行搜索。在JavaScript的幫助下,用戶只需將滑鼠懸停在搜索框上,即可顯示類型或進行用戶自定義搜索,從用戶的角度講,這是一個很棒的選擇。

設計者必須避免的錯誤

我們在試用其它網站的搜索時發現他們在搜索框的顯示上犯了不少錯。這些都是些很常見的錯誤,如果你希望通過搜索框優化網站性能,那麼就必須得避免這些問題。

1. 隱藏搜索框

我們反復強調搜索框的明確顯示的必要性。不要把搜索框放在網站底部,放在網站的右上角效果會更好,如果網站設計得很混亂,用戶在沒有瀏覽到接近網站的底部時就已經離開網頁了。

2. 切忌輸入區域過短

為用戶提供所需范圍准確的輸入查詢。搜索框輸入區域太短只會讓用戶對搜索框感到失望,因為,他們不會在整個區域輸入想查詢的內容。再者,這也非常不方便用戶閱讀和回應。

3. 切忌提交按鈕過短

受網站設計限制,提交按鈕不應過長,但是太短又會讓用戶感到失望,因為他們在滑鼠點擊的准確性上又會有偏差,從而浪費搜索時間,還會被轉入到到一些不同頁面上。

4. 切勿將搜索框與其它菜單混排在一起

如果把搜索框和與新聞和導航條混排在一起,這是相當讓人不爽的事。這樣用戶很難在郵件訂閱或文章搜索欄中區分出搜索框。因此,搜索框應與其它菜單分開排列。

5. 過度設計搜索框

不要因為搜索框要顯眼,在設計時就受到影響。雖然搜索框要清晰地展現出來,但也不要設計過度,以免影響到它的直觀性。

6. 沒必要提供高級搜索工具

高級搜索當然會有它的用處,但這會使本來簡單的搜索變得更加復雜。因此,沒必要提供高級搜索工具,除非你是為了迎合懂技術的用戶。如果你只是搞定一般用戶,盡量保持搜索選項簡單。

7. 一個搜索框有多個提交按鈕

這條建議非常有意思,我們很少看到有網站設置了多個搜索提交按鈕,比如同時有「go」和「find」。很明顯,這會擾亂按鈕的選擇。

8. 如果在網站設計中,你遵從了以上建議,我們相信一個高效的搜索框能夠起到優化網站性能的作用。

9、誰有一些可以搜索設計素材圖片的一些網站,要能搜出高大尚的圖片,昵圖、千圖這樣的就算了,像站酷這樣的

紅動中國、114免費素材網。 紅動很出名,不過要收費

與網站搜索設計相關的知識