Em geral, uma barra de pesquisa é composta por três componentes principais: o recipiente forma , o campo de entrada, eo botão de busca. Projetos barra de pesquisa pode variar, mas se for bem feito , uma barra de pesquisa criado em Adobe PhotoShop terão cada um desses elementos em uma camada separada , permitindo que você separá-los facilmente para a codificação. Você precisará determinar quais os elementos que você pode recriar usando estilos CSS e que você deve exportar arquivos de imagem como separados antes que você possa começar a codificação do bar. Elementos de imagem típicos são o fundo do campo de entrada eo botão de busca. Também preste atenção aos efeitos, como sombras e bordas , pois você vai precisar essas configurações para criar estilos CSS que combinam com o design. Instruções
um

Decida como você deseja que a barra de busca para funcionar. Há dezenas de roteiros de busca e trechos de código disponíveis na Internet , usando uma variedade de línguas, incluindo javascript , jQuery , PHP e HTML. Você pode usar qualquer um desses, mas pode achar a criação da barra de pesquisa pela primeira vez em HTML simples, com estilos que correspondem à sua imagem e , em seguida, adaptá-lo a um script é mais fácil do que tentar estilizar um script premade para corresponder à sua imagem.
< Br > 2

Inicie o editor de texto ou HTML favorito e começar adicionando uma abertura " forma " tag:

Dê o tag um nome e classe, o que você vai usar para o estilo do fundo barra de pesquisa e margem:

Concluir adicionando uma variável método e ação :

A ação permanecerá vazio por enquanto . Mais tarde , você vai precisar para preenchê-lo com o caminho para o seu provedor de pesquisa , roteiro ou servidor de pesquisa
3

Siga o tag formulário com uma tag " fieldset " e um campo de entrada : .

Dê a marca de entrada de um tipo de "texto", um nome e ID de "s":

4

Digite um tag " botão" para o botão de pesquisa e dar-lhe uma classe de . " btn " Para manter o código compatível , você deve também adicionar um título :

Search < /button>

a tag " botão " é uma marca nova que permite que o botão para alinhar naturalmente com o campo de entrada, uma função muito melhor sobre a "imagem" tipo anterior do campo de entrada. Você pode usar a classe " btn " para o estilo do botão usando variáveis ​​CSS puros ou uma imagem de fundo .
5

Digite tags de fechamento para o seu formset e forma. Seu HTML completo deve ser algo como isto :

Search < /button>

6

na cabeça do seu documento HTML ou em uma folha de estilo CSS separado criar o seu declarações CSS para cada elemento. Dê uma olhada em sua imagem PhotoShop e determinar a largura e altura da barra de pesquisa, incluindo qualquer espaço acima e abaixo do campo de entrada e botão. Entre nesta altura e largura para o " mainsearch " declaração ID . Outras coisas a considerar pode ser o posicionamento da barra , largura da borda e do fundo. Se ele precisa ser colocado para a direita de um menu de navegação , por exemplo, você deve entrar em um " float: right " . Variável
7

Digite variáveis ​​na classe que você pretende " searchbar ". para aplicar a todas as barras de busca em todo o site. Isso ajuda a reduzir o número de declarações de estilo repetidas, desde que você pode reutilizar a classe " . Searchbar " com um ID diferente forma na mesma página , por exemplo. Variáveis ​​de classe repetidas podem incluir preenchimento , margens, cor da borda e do fundo.
8

Estilo de seu campo de entrada usando a classe barra de pesquisa seguido pelo seletor de entrada . As variáveis ​​a serem incluídos na classe de entrada são coisas como largura, altura, cor do texto , fonte e estilo da fonte , bordas , fundo, preenchimento e margens . Cada uma destas variáveis ​​devem corresponder às dimensões e configurações de efeito no arquivo de Photoshop, que podem ser determinadas , visualizando as opções de camada e usando a ferramenta de seleção para medir pixels.
9

Adicione um estilo para a sua pesquisa botão. Você pode conseguir a maioria dos estilos de botão em CSS , usando uma combinação de fronteira e soltar variáveis ​​de sombra ou você pode usar uma imagem de fundo . As variáveis ​​importantes para incluir em seu estilo de botão são a sua altura e largura. Um exemplo de um estilo de botão é o seguinte:

searchbar button.btn {

width: . 32px ;

height: 32px ;

texto indent: - 9999px ;

background: # CCCCCC URL ( searchbutton.png ) superior direito no-repeat ; }

Este estilo se encaixa a dimensão da imagem de 32 pixels de largura por 32 pixels de altura, empurra o texto " Submit Search " fora de vista para que ele não sobrepor o botão e coloca o gráfico do botão de busca no canto superior direito do recipiente botão para garantir que não é cortado.
10

Finish através da implementação de seu script de busca desejada ou função em seu formulário HTML. Isso geralmente é feito através da adição de nome de arquivo do script ou caminho para a variável " ação" na tag form , mas alguns scripts podem incluir novas medidas , tais como a adição de javascript para a cabeça de sua página HTML , onde a barra de pesquisa será colocado.