Primero en este tutorial, usaremos una web bastante efectiva ( por lo menos para mi ) que ha dado excelente resultados que he aplicado en la misma web. esta web es CSS Menú Builder, en ella entran y se encontrarán con una ventana como la siguiente.
En esta página clickeamos Build Horizontal menú y nos llevará a la siguiente página
En esta pantalla, en la parte izquierda debemos seleccionar el degradado que tendrá el botón, y en la parte derecha, el diseño del mismo.
Una vez seleccionado y definido estos dos parámetros,clickeamos Next y vamos al paso 2.Llegaremos a la siguiente pantalla.
Una vez seleccionado y definido estos dos parámetros,clickeamos Next y vamos al paso 2.Llegaremos a la siguiente pantalla.
En esta pantalla tenemos 4 opciones : background colors, Inactive Colors, Hover Colors y Active color. En Background Color seleccionaremos los colores de fondo de los botones y en Background Shading Elegimos el color que hay detrás del botón, el de la barra. ¿Me explico?
En Hover Colors Elegimos los dos colores para el boton ( siempre y cuando queramos que sea un degradado), como bien dije, en Hover color elegimos el color superior del botón y en Hover Shading el color inferior, en la foto yo use un color superior nero y un color inferior amarillo. Ahora bien en Active color, elegimos el color de la parte superior del boton cuando pasamos el mouse sobre él, y en active shading el color inferior del boton en el momento en que pasamos el mouse sobre él. Hover Text Color es el color del texto cuando no es pasado el raton por encima, y Active Text Color es el color del texto cuando pulsamos o pasamos el boton sobre él.
Una vez listo este paso, pulsamos next y llegaremos a la siguiente pantalla
En Hover Colors Elegimos los dos colores para el boton ( siempre y cuando queramos que sea un degradado), como bien dije, en Hover color elegimos el color superior del botón y en Hover Shading el color inferior, en la foto yo use un color superior nero y un color inferior amarillo. Ahora bien en Active color, elegimos el color de la parte superior del boton cuando pasamos el mouse sobre él, y en active shading el color inferior del boton en el momento en que pasamos el mouse sobre él. Hover Text Color es el color del texto cuando no es pasado el raton por encima, y Active Text Color es el color del texto cuando pulsamos o pasamos el boton sobre él.
Una vez listo este paso, pulsamos next y llegaremos a la siguiente pantalla
En esta pantalla, yo ya tenia los links listos ( los mismos que use en la web ) pero para agregar nuevos botones en Link Name colocan el nombre del boton y en Link URL colocan el vinculo al boton ( es decir, la pagina a donde redirigira cuando sea clickeando) puedes colocar tantos botones como desees.
Una vez listo esto, pulsamos next nuevamente y llegamos al ultimo paso.
Una vez listo esto, pulsamos next nuevamente y llegamos al ultimo paso.
En esta Pantalla pulsamos Download y nos descargará un archivo comprimido con 2 carpetas ( index y css ) y un archivo llamado index.
Lo primero que debemos hacer es entrar a la carpeta images, aqui se encontran con un archivo topMenuImages.png , esta imagen debes subirla a su hosting preferido. ( Yo recomiendo subirla a los albumes de picasa, puesto que no las borran de aqui y tenemos mas de 1000 fotos para almacenar)
Una vez hecho esto, volveremos a la pantalla donde clickeamos download para descargar el archivo y abajo de ese boton, hay dos recuadros, unos que dice CSS y el otro HTML.
Nos dirijimos a nuestra pagina, vamos a Diseño/edicion HTML y expandimos artilugios. presionamos Control + F y buscamos el siguiente código
Lo primero que debemos hacer es entrar a la carpeta images, aqui se encontran con un archivo topMenuImages.png , esta imagen debes subirla a su hosting preferido. ( Yo recomiendo subirla a los albumes de picasa, puesto que no las borran de aqui y tenemos mas de 1000 fotos para almacenar)
Una vez hecho esto, volveremos a la pantalla donde clickeamos download para descargar el archivo y abajo de ese boton, hay dos recuadros, unos que dice CSS y el otro HTML.
Nos dirijimos a nuestra pagina, vamos a Diseño/edicion HTML y expandimos artilugios. presionamos Control + F y buscamos el siguiente código
]]></b:skin>y justo arriba de este mismo, pegamos todo el código que esta en el recuadro CSS antes citado.
Luego en la plantilla buscamos el siguiente código:
<div id='content-wrapper'>u justo arriba de esto, pegaremos el código que se encuentra en el recuadro HTML.Una vez hecho esto tu segundo header horizontal ya estara listo para ser usado como menú y para darle estilo a tu web.
IMPORTANTE: No debemos olvidar reemplazar del cuadro CSS que pegamos primero, todos los caracteres que dicen ('topMenuImages.png') por nuestra imagen en nuestro hosting.
Por ejemplo, si en la plantilla dice background:url('topMenuImages.png') al reemplazarlo quedaría como background:url('http://mihostingdeimagenes/laimagenquesubiamihosting.png')
by Windows2010
0 comentarios:
Publicar un comentario