Cómo código AA Barra de búsqueda creado en Photoshop

En general, una barra de búsqueda se compone de tres componentes principales: la forma del envase, el campo de entrada, y el botón de búsqueda. Buscar diseños de barras pueden variar, pero si se hace bien, una barra de búsqueda creado en Adobe PhotoShop tendrán cada uno de estos elementos en una capa separada, lo que le permite separar fácilmente para la codificación. Usted tendrá que determinar qué elementos se puede recrear la utilización de estilos CSS, y que debe exportar como archivos de imagen por separado antes de poder empezar la codificación de la barra. elementos de imagen típicos son el fondo del campo de entrada y el botón de búsqueda. También debe prestar atención a los efectos, como sombras y bordes, ya que tendrá que estos ajustes para crear estilos CSS que coincidan con el diseño.

Instrucciones

1 Decidir cómo desea que la barra de búsqueda para funcionar. Hay decenas de secuencias de comandos de búsqueda y fragmentos de código disponibles en Internet usando una variedad de idiomas, incluyendo Javascript, jQuery, PHP y HTML plano. Puede utilizar cualquiera de estos, pero puede encontrarse la creación de la barra de búsqueda por primera vez en HTML plano con estilos que responden a su imagen y luego adaptarlo a una secuencia de comandos es más fácil que tratar con el estilo de un guión preparado de antemano para que coincida con su imagen.

2 Lanzamiento de su editor de texto o HTML favorito y comenzar mediante la adición de una etiqueta de apertura "forma":

<Form>

Dar la etiqueta de un nombre y de clase, que va a utilizar para el estilo del fondo de la barra de búsqueda y la frontera:

<Form name = "mainsearch" class = "barra de búsqueda">

Terminar añadiendo una variable método y acción:

<Form name = class = método de "mainsearch" "barra de búsqueda" = "get" action = "">

La acción quedará vacío por ahora. Más tarde, tendrá que llenarlo con la ruta a su proveedor de búsqueda, escritura de la búsqueda o el servidor.

3 Siga la etiqueta de formulario con una etiqueta "fieldset" y un campo de entrada:

<Fieldset>

<input/>

Dar la etiqueta de entrada un tipo de "texto", un nombre y un identificador de "s":

<input type="text" name="s" id="s" />

4 Introduzca una etiqueta de "botón" para el botón de búsqueda y darle una clase de "btn" .Para mantener su código compatible, también se debe agregar un título:

<Clase de botón = "btn" title = "Enviar búsqueda"> Buscar </ botón>

La etiqueta de "botón" es una etiqueta nueva que permite que el botón para alinear de forma natural con el campo de entrada, una función muy mejorada sobre el tipo anterior "imagen" del campo de entrada. Puede utilizar la clase "Bot" para estilizar el botón utilizando variables CSS puro o una imagen de fondo.

5 Introduzca el cierre de etiquetas para el conjunto de formularios y la forma. Su HTML completo debería ser algo como esto:

<Form name = class = método de "mainsearch" "barra de búsqueda" = "get" action = "">

<Fieldset>

<Input type = "text" name = "s" id = "s" />

<Clase de botón = "btn" title = "Enviar búsqueda"> Buscar </ botón>

</ Fieldset>

</ Form>

6 En la cabecera del documento HTML o en una hoja de estilo CSS independiente crear sus declaraciones CSS para cada elemento. Echar un vistazo a su imagen PhotoShop y determinar la anchura y la altura de la barra de búsqueda, incluyendo cualquier espacio por encima y por debajo del campo de entrada y botón. Introduzca este alto y el ancho en el "mainsearch" declaración de identificación. Otras cosas a considerar podría ser la colocación de la barra, el ancho del borde y el fondo. Si tiene que ser colocado a la derecha de un menú de navegación, por ejemplo, usted debe entrar en un "float: right" variable.

7 Introducir variables en la clase ".searchbar", que tiene la intención de aplicarse a todas las barras de búsqueda en todo el sitio. Esto ayuda a reducir el número de declaraciones de estilo repetidos, ya que se puede volver a utilizar la clase ".searchbar" con una forma diferente de identificación en la misma página, por ejemplo. variables de clase repetidas podrían incluir relleno, márgenes, color del borde y el fondo.

8 El estilo de su campo de entrada utilizando la clase barra de búsqueda seguido por el selector de entrada. Las variables a incluir en la clase de entrada son cosas como la anchura, la altura, el color del texto, estilo de fuente y tipo de letra, las fronteras, los antecedentes, el acolchado y los márgenes. Cada una de estas variables debe coincidir con las dimensiones y configuración de los efectos del archivo de Photoshop, que se pueden determinar mediante la visualización de las opciones de capa y utilizar la herramienta de selección para medir píxeles.

9 Añadir un estilo para su botón de búsqueda. Se puede lograr la mayoría de los estilos de botón en CSS mediante el uso de una combinación de frontera y colocar las variables de sombra o puede utilizar una imagen de fondo. Las variables importantes para incluir para su estilo de botón son su altura y anchura. Un ejemplo de un estilo de botón es el siguiente:

button.btn .searchbar {

width: 32px;

altura: 32px;

text-indent: -9999px;

fondo: #CCCCCC URL (searchbutton.png) no-repeat arriba a la derecha;

}

Este estilo se adapta a la dimensión de la imagen de 32 píxeles de ancho por 32 píxeles de alto, empuja el texto "Enviar búsqueda" fuera de la vista para que no se superponen en el botón y coloca la imagen del botón de búsqueda en la parte superior derecha del contenedor botón para asegurarse de que es no corte.

10 Para terminar, la implementación de la secuencia de comandos de búsqueda o función deseada en el formulario HTML. Esto normalmente se realiza mediante la adición de nombre de archivo o la ruta de la secuencia de comandos para la "acción" variable en la etiqueta del formulario, pero algunos guiones puede incluir medidas adicionales, tales como la adición de JavaScript para la cabecera de la página HTML en la que se coloca la barra de búsqueda.

Consejos y advertencias

• Añadir una clase a las etiquetas de fieldset o de entrada de combinar las variables que se aplican a más de un elemento. Aunque no es necesario, esto ayuda a minimizar el código CSS.