7/31/2019 [PW4H-MANL] Creacion-de-una-pagina-web-con-botones

1/1

Creacin de una pagina web con botones

En este artculo te contar el proceso de creacin de una pgina web con botones que poseanefectos elegantes para enlazar las distintas pginas de tu sitio web.

Como primer paso, debers abrir tu editor de imgenes y crear un nuevo documento, el cual debertener las siguientes caractersticas:

Width (Ancho): 150 pxeles Height (Alto): 35 pxeles

Creacin de una pgina web con botones degradados

Luego, como segundo paso, debers darle un efecto degradado para que nos de la sensacin devolumen y dinmica en el sitio web. Y luego, le agregars un texto que t quieras que diga, comopor ejemplo: Home o Inicio. Bien, luego guardars esta imagen de botn en la carpetapredeterminada de imgenes de tu sitio web. Te recomiendo, para una mejor organizacin y visual,que dentro de la carpeta de imgenes predeterminada, crees una subcarpeta para tus botones.Recuerda guardar tu botn en formato .PNG.

Creacin de una pgina web con botones alternativos

Si quieres que a este botn, se le sume un efecto al pasar el mouse por encima de l, lo que deberscrear es un botn alternativo, simulando la imagen que t deseas que el visitante vea al pasar elmouse sobre l. Por ejemplo, si t deseas que el texto del botn cambie de color, debers crear unnuevo botn como el anterior. Similar color de fondo, similar fuente y posicin del texto, pero con uncolor distinto. Te recomiendo que elijas un color contrastante. Por ejemplo, si el color del texto queelegiste para el botn en posicin normal era negro, que el botn alternativo tenga un color de textoblanco. Esto har que cuando el visitante de tu sitio web pase el mouse sobre el botn, captar consu retina un efecto de iluminacin sobre las letras del botn.

Bien, guarda ambos botones. Trata de ponerle nombres que recuerdes, como por ejemplohome.png para el botn en posicin normal, y home_alt.png para el botn alternativo.

Ahora debers agregar ambas imgenes de botn, con el comportamiento requerido para quecuando el mouse pase sobre la imagen en posicin normal, se alterne hacia el botn alternativo.Desde Dreamweaver CS4, simplemente debers ir al men Insert / Navigation Bar, ingresar unnombre para tu elemento, seleccionar la imagen de arriba (Up Image) o normal, luego unaimagen para cuando el mouse pasa por encima del botn (Over Image), y si quieres, puedes crear yoptar por una imagen ms adicional para cuando se hace click con el mouse sobre el botn (DownImage). Por supuesto, t debers ingresar una URL, es decir, el enlace hacia donde quieres que tubotn dirija al usuario que visite tu web. Una vez que termines, le das un click a Ok.

Felicitaciones! Ya sabes cmo es el proceso de creacin de una pgina web con botones interactivosy sencillos. Ponte ya mismo a trabajar en tu pgina web.