Sunteți pe pagina 1din 1

Creacin de una pagina web con botones En este artculo te contar el proceso de creacin de una pgina web con

botones que posean efectos 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 deber tener 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 de volumen y dinmica en el sitio web. Y luego, le agregars un texto que t quieras que diga, como por ejemplo: Home o Inicio. Bien, luego guardars esta imagen de botn en la carpeta predeterminada 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 debers crear es un botn alternativo, simulando la imagen que t deseas que el visitante vea al pasar el mouse sobre l. Por ejemplo, si t deseas que el texto del botn cambie de color, debers crear un nuevo botn como el anterior. Similar color de fondo, similar fuente y posicin del texto, pero con un color distinto. Te recomiendo que elijas un color contrastante. Por ejemplo, si el color del texto que elegiste para el botn en posicin normal era negro, que el botn alternativo tenga un color de texto blanco. Esto har que cuando el visitante de tu sitio web pase el mouse sobre el botn, captar con su retina un efecto de iluminacin sobre las letras del botn. Bien, guarda ambos botones. Trata de ponerle nombres que recuerdes, como por ejemplo home.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 que cuando 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 un nombre para tu elemento, seleccionar la imagen de arriba (Up Image) o normal, luego una imagen para cuando el mouse pasa por encima del botn (Over Image), y si quieres, puedes crear y optar por una imagen ms adicional para cuando se hace click con el mouse sobre el botn (Down Image). Por supuesto, t debers ingresar una URL, es decir, el enlace hacia donde quieres que tu botn 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 interactivos y sencillos. Ponte ya mismo a trabajar en tu pgina web.

S-ar putea să vă placă și