Internet, Deporte y Educación

Página personal de Sergio Palay

Archive for the ‘Diseño Web’ Category

Crear un banner flotante en una página web

Posted by sergiopalay en febrero 18, 2013

La oferta permanece activa hasta que apretamos cerrar.

La oferta permanece activa hasta que apretamos cerrar.

El siguiente pique es para colocar una ventana flotante en cualquier página html algo que se usa mucho a la hora de presentar ofertas o información que es útil que aparezca al inicio de la carga de la web pero que puede ser cerrada fácilmente.
Van los pasos:

PASO 1
Editar el archivo de la página web (Se puede hacer con programas especiales como DreamWeaver, FrontPage, etc. o simplemente abriéndolo con el clásico Bloc de notaas)

PASO 2
Ubicamos el espacio comprendido entre la etiqueta <head> y la etiqueta </head>

PASO 3
En cualquier parte de dicha etiqueta (el encabezamiento de la página) copiamos el siguiente código

<script>function cerrarimagen(){div = document.getElementById(«close»);div.style.display=»none»;}</script>

PASO 4
Ubicamos el espacio comprendido entre la etiqueta <body> y la etiqueta </body>

PASO 5

En cualquier parte del Body copiamos el siguiente código.

<div id=’close’ style=’border: 0 !important; background: transparent; left:830px;top:60px;position:fixed;width: 475px;z-index:9999′> <a href=’javascript:cerrarimagen();’><img src=’DIRECCION COMPLETA DE DONDE ESTÁ ALOJADO EL BOTON CERRAR … EJEMPLO http://www.arho.com.uy/images/cerrar.jpg&#8217; style=’float: right;’ title=’Oferta de febrero’/><img src=’DIRECCION COMPLETA DE DONDE ESTÁ ALOJADA LA IMAGEN … EJEMPLO  http://www.arho.com.uy/images/oferta.jpg’/></a></div&gt;

PASO 6
Guardar

Nota: Comentando el código del paso 5, veremos que tenemos dos lugares dedicados a las imágenes, una del botón cerrar y otra de la imágen del banner. Las mismas deben haber sido subidas a una carpeta dentro del sitio previamente.
Los otros parámentros de destaque que se pueden ajustar son de ajuste: top ajusta hacia arriba y left hacia la izquierda … mientras que width define el ancho de la ventana.

Posted in ArTIC, Diseño Web, Docencia | Etiquetado: , , , | Leave a Comment »

Buscando imágenes con licencia Creative Commons

Posted by sergiopalay en abril 24, 2012

Les dejo un nuevo videotutorial que muestra como encontrar imágenes en Flickr.com con Licencia Creative Commnos para que podamos utilizar tranquilos en nuestros trabajos.

De paso les muestro como hacer un pequeño fotomontaje. ¿Se animan a hacer uno parecido? Pueden agregar texto.

Posted in Diseño Gráfico, Diseño Web, Docencia, LNG | Etiquetado: , , , , , , | Leave a Comment »