本頁將說明如何自訂搜尋框和搜尋結果的外觀和風格。如要使用內容檔案實作搜尋引擎設計，請參閱「使用 XML 設計外觀和風格」頁面。
總覽
您可以透過控制台或 XML 內容檔案變更搜尋框和程式化搜尋引擎的搜尋結果。如果您使用多種搜尋引擎，可以透過控制台管理及自訂這些搜尋引擎，操作上也相當簡單。只要前往外觀和風格頁面選取樣式，設計元件並按一下「Save」即可。接著，即可瞭解如何完成這些操作。但是，如果您要建立及管理大量的搜尋引擎，就連在多個搜尋引擎中重複進行這種簡單的程序也一事並不容易。在這種情況下，使用 XML 會比較好。如果您決定使用 XML，請先詳閱本頁，瞭解一般的運作方式。之後，請參閱「使用 XML 設計外觀和風格」頁面，瞭解 XML 元素和屬性。
如果不確定是否只要使用控制台或 XML 格式，請參閱基本資訊頁面，瞭解各種格式的優點和挑戰。
注意事項：開始設計自訂搜尋引擎的外觀和風格前，請先詳閱 程式化搜尋引擎實作指南 。這份簡短文件將說明應如何處理 Google 品牌宣傳和作者資訊。
使用搜尋元素代管結果
Search 元素是一種可嵌入網頁的物件，可大量自訂。它可以顯示搜尋框和搜尋結果，可以同時顯示在讀者正在檢視的同一個網頁中，或是顯示在不同的網頁上。
注意：將搜尋元素與精簡版面配置配對時，可在行動裝置上順利運作。
您也可以使用 Programmable Search Element Control API，進一步自訂搜尋 UI。HTML 屬性可支援許多自訂項目。舉例來說，您可以為搜尋結果網頁選取六個版面配置，也可以設定要傳回的搜尋結果數量。
程式化搜尋引擎不再支援 iframe 代管選項。建議您在 Search 元素中使用「兩頁」或「僅限搜尋結果」版面配置做為新選項。詳情請參閱我們的 網誌文章 。
設計搜尋使用者介面的個別元件
可自訂的元件
可自訂的元件取決於您搜尋引擎所選取的元素版面配置。舉例來說，控制台可讓您只為 Google 代管的搜尋引擎新增標誌，而您無法透過其他代管選項將標誌新增到搜尋引擎中。
您可以使用控制台定義下列元件：
設定搜尋元素版面配置
您可以選擇自訂搜尋使用者介面在網頁上的顯示方式。您可以將搜尋框和結果部分放在同一欄中，也可以將搜尋框分別顯示在單一資料欄中，結果部分則放在另一欄 (甚至是其他頁面)。
版面配置選項包括 (按一下連結即可查看示範)：
| 選項 | 說明 |
|---|---|
| OverLay | 在重疊中顯示搜尋結果。 |
|
兩頁
簡易 多個搜尋框/結果區段 |
搜尋框和搜尋結果部分會出現在兩個不同的網頁中。
注意：搜尋結果部分也會包含搜尋框。使用者可以在搜尋結果網頁中直接提交查詢。 |
| 完整寬度 | 搜尋框和搜尋結果部分會以頁面或已插入搜尋元素的資料欄填滿整個寬度。 |
| 兩欄 | 搜尋框和搜尋結果部分位於網頁的不同欄或區段。使用者點選搜尋框旁邊的 X 圖示來關閉搜尋結果部分。 |
| 密集 |
與全寬度選項相同，這會佔用網頁或資料欄的整個寬度，但結果部分顯示的結果較少，因此在網頁展開時佔用較少垂直空間。
提示：這個選項已針對智慧型手機和行動裝置進行最佳化。 |
|
僅限搜尋結果
透過網址搜尋 透過搜尋框搜尋 |
搜尋結果會顯示在您的其中一個網頁，而搜尋結果網頁不會顯示搜尋框。使用自己的搜尋框提交搜尋查詢。 注意：不顯示廣告的程式化搜尋引擎無法停用品牌宣傳功能。 |
|
Google 代管
目前視窗 新視窗 |
搜尋框放置在您的其中一個網頁上。搜尋結果會顯示在 Google 代管的網頁上，該網頁可以在相同視窗或新視窗中開啟。 |
設計搜尋框
您可以將搜尋框插入網頁 HTML 內文中的任何位置，不過，搜尋框會放置在網頁的頂端 (或靠近頂端) 處，如以下範例所示：
圖 1：已將搜尋框置於頂端的網頁。
啟用自動完成功能
當使用者在您的搜尋框輸入搜尋查詢時，自動完成功能會提供查詢選項給使用者。這類似於您在 Google 搜尋中看到的選擇性查詢。
圖 2：只要在搜尋框中輸入幾個字元，系統就會顯示下拉式清單，提供不同搜尋查詢的選項。
程式化搜尋引擎會特別根據您的搜尋引擎自動執行自動完成建議。它會採用不同的演算法，擷取多個來源，包括對您搜尋引擎的查詢，以及從搜尋引擎涵蓋的網站內容中擷取的關鍵字和詞組。
由於自動完成的查詢功能是搜尋搜尋引擎所涵蓋網頁內容的特定部分，因此程式化搜尋引擎不會針對搜尋整個網路的搜尋引擎產生自動完成查詢。換句話說，只有搜尋包含網站的搜尋引擎 (預先指定的網站集合) 才能提供自動完成的查詢。您可以在「總覽」頁面的「要搜尋的網站」部分，設定搜尋引擎的涵蓋範圍。
自動完成功能位於「搜尋功能」頁面的「自動完成」部分。
如要啟用自動完成功能，請按照下列步驟操作：
- 前往「搜尋功能」頁面的「自動完成」部分。
-
開啟「啟用自動完成功能」控制項。
注意：由於自動完成的查詢會針對各個搜尋引擎產生，因此需要數小時的時間，自動完成功能才會開始在您的搜尋引擎中顯示。
- 如果您是第一次在現有的搜尋引擎中啟用自動完成功能，則必須移除您在網頁中插入搜尋框的程式碼片段。請換成「取得程式碼」分頁中產生的新程式碼。如需詳細操作說明，請參閱「在網站實作設計」一節。
設計結果
結果網頁的各項元素可供變更的項目如下：
個別結果
如果您想以視覺化方式呈現個別結果，或是醒目顯示使用者選取的結果，可以定義個別結果的邊框和背景。
圖 3：滑鼠遊標懸停時醒目顯示的個別結果和個別結果。
分類標籤
如果您已在搜尋引擎中建立分類標籤，這些標籤會以搜尋元素分頁的方式顯示。您可以使用控制台變更分類標籤的顏色。
促銷抵免額
如果您已在搜尋引擎中建立促銷活動，您可以變更這些項目的外觀和風格。促銷活動是一種您建立的特殊搜尋結果類型。
標誌 (僅限 Google 代管)
如果您允許 Google 代管搜尋結果網頁，可以選擇在搜尋結果網頁的搜尋框旁邊加上標誌或小圖片。圖片必須是 .jpg、.png 或 .gif 檔案，並由該網站代管 (您所擁有的網站或是沒有版權限制的網站)。您可以選擇將網址與圖片建立關聯，轉換為可點擊的圖片。
以下是含有標誌的結果網頁範例。
圖 4：含有圖片的搜尋框
將設計導入網站
設計搜尋引擎的外觀和風格後，您可以按照下列步驟實作，在網頁中導入搜尋引擎：
- 在「外觀和風格」頁面中修改的部分，按一下「儲存」。
- 在「外觀和風格」頁面的「版面配置」部分中，按一下「取得程式碼」。
-
複製「程式碼」彈出式視窗中產生的程式碼片段。
如果您選取了兩欄的版面配置，請複製兩段程式碼片段：一個用於搜尋框，另一個用於結果。
如果您選取了雙頁版面配置，請輸入要顯示搜尋引擎搜尋結果的網頁網址。輸入網址嵌入的查詢參數名稱 (由搜尋結果網頁剖析)。最後，複製這兩段程式碼片段。
當搜尋結果顯示在新頁面中時，純搜尋結果版面配置的程式碼片段適用於搜尋結果。輸入網址嵌入的查詢參數名稱 (由搜尋結果網頁剖析)。最後，複製搜尋結果的程式碼片段。
-
在要建立程式化搜尋引擎方塊的每個網頁上插入程式碼。您可以將程式碼貼到網頁
<body></body>標記內的任何位置。注意：為達到最佳的跨瀏覽器相容性，建議您使用支援的 DOCTYPE，例如
<!DOCTYPE html>。如果您要為搜尋元素使用懸停效果，HTML 網頁必須使用支援的 DOCTYPE，例如
<!DOCTYPE html>。
如果您選取了兩欄的版面配置，請將搜尋框的程式碼插入其中一欄，並將結果的程式碼插入另一欄。
如果您選擇了雙頁版面配置，請在您想要顯示搜尋框的網頁上插入搜尋框的程式碼，並在要顯示搜尋結果的網頁中插入搜尋結果的程式碼。
如果您選擇了只顯示搜尋結果的版面配置，請將程式碼片段插入要顯示搜尋結果的網頁。