Microsoft Expression Web - Página de pesquisa

Neste capítulo, aprenderemos como adicionar uma opção de pesquisa ou uma caixa de pesquisa ao site. Se for um site grande, você precisará ter uma caixa de pesquisa no site para que o usuário possa encontrar qualquer dado facilmente. Existem muitos gratuitos disponíveis, como Windows Live, Google, etc.

Windows Live Search

As etapas a seguir mostram como adicionar uma caixa do Windows Live Search à sua página da Web e, em seguida, definir o formulário de pesquisa para pesquisar em toda a Web ou apenas em seu site.

Step 1 - Crie uma nova página HTML e chame-a SearchPage.

Step 2 - Vá para o menu Formatar e selecione Dynamic Web Template → Attach Dynamic Web Template…opção. Selecione o arquivo master.dwt e clique no botão Abrir.

Step 3 - Vamos adicionar o seguinte código dentro da região editável.

<form method = "get" action = "http://search.live.com/results.aspx"> 
   <input type = "hidden" name = "cp" value = "1252"/> 
   <input type = "hidden" name = "FORM" value = "FREESS"/> 
   <table style = "background-color: #ffffff;"> 
      <tr> 
         <td>
            <a href = "http://search.live.com/"> 
               <img src = "http://search.live.com/s/affillogoLive.gif" 
                  style = "border:0px;" alt = "Live Search"/> 
            </a> 
         </td> 
         <td> 
            <input type = "text" name = "q" size = "30" /> 
            <input type = "submit" value = "Search Site"/> 
            <input type = "hidden" name = "q1" 
               value = "site:http://www.microsoft.com/expression"/> 
         </td> 
      </tr> 
   </table> 
</form>

Step 4- Salve a página. Vá para o menu Arquivo e selecione Visualizar no navegador.

Step 5- Você verá o Windows Live Search em sua página da web. Vamos inserir algo na pesquisa e clicar no botão Pesquisar no site

Step 6- Como você pode ver que vai pesquisar na web. Se quiser restringir a pesquisa apenas ao seu site, você deve especificar o domínio do site com o seguinte nome em vez de www.microsoft.com/expression

<input type = "hidden" name = "q1" value = "site:http://www.microsoft.com/expression"/>

Step 7 - Da mesma forma, você pode adicionar a opção de pesquisa do Google adicionando o seguinte código na região editável.

<form method = "get" action = "http://www.google.com/search"> 
   <div style = "border: 1px solid black; padding: 4px; width: 20em; margin: 0px auto 0px auto"> 
      <table border = "0" cellpadding = "0"> 
         <tr> 
            <td class = "center"> 
               <input type = "text" name = "q" size = "25" maxlength = "255" value = "" /> 
               <input type = "submit" value = "Google Search" /> 
            </td> 
         </tr> 
         <tr> 
            <td align = "center" style = "font-size: 75%"> 
               <input type = "checkbox" name = "sitesearch" 
                  value = " http://www.microsoft.com/expression" checked = "checked" /> 
               Only search this website<br /> 
            </td> 
         </tr> 
      </table> 
   </div> 
</form>

Step 8 - Salve sua página HTML e você verá uma caixa de pesquisa, um botão de pesquisa, uma caixa de seleção e uma etiqueta de caixa de seleção.

Step 9- Para restringir os usuários a pesquisar apenas em seu site, marque a caixa de seleção e vá para o painel Propriedades da tag e defina a propriedade Value para o URL de seu site, como www.microsoft.com/expression .

Step 10- Salve sua página e visualize-a no navegador. Agora você verá a opção Pesquisa do Google em sua página da web.