Ventanas Emergentes

Post on 09-Jul-2015

4.083 views 0 download

Transcript of Ventanas Emergentes

Empecemos...Abrimos la administración del campus y

vamos a la administración del sitio web

En este tutorial veremos la utilidad de colocar, en un link común, la posibilidad de que se despliegue una ventana con información, sin que el usuario salga de la página que está visitando. la llamaremos ventana emergente, porque aparece superpuesta a la de navegación actual, y puede cerrarse sin perjuicio de seguir el ”paseo”.

Seleccionamos la página en la cual queremos que se abra la ventana emergente, para editarla

Vamos a suponer que queremos abrir un link que muestre el sitio web del Ministerio de Nación, en una ventana nueva

Ubicamos el cursor en el espacio en el que queremos colocar el link.

Vamos a necesitar tener copiado (y disponible en el portapapeles) este texto que nos servirá para hacer el link.

<a onclick="window.open(this.href, this.target, 'toolbar=0,menubar=0,status=1, location=1,scrollbars=1,

width=300,height=400'); return false; " href="http://www.me.gov.ar" target="_blank"> Ministerio </a>

No es necesario entender el código!Basta con copiarlo tal cual, sin modificar los espacios, comillas y signos.Lo que está en rojo…después lo vemos

Para pegarlo, buscamos en la barra de menú el icono para pegar, pero el que tiene la letra ”H” (que indica HTML, es decir, el código de las páginas web) y hacemos clic

En la ventana Insertar texto HTML pegamos el código previamente copiado y presionamos Insertar

Notemos que ahora se lee el texto ”Ministerio” y ya se ve como un enlace

No olvidemos ir al pie de la página y presionar ”Modificar” para guardar los cambios

Volvemos a la vista de usuario para ver el resultado...

Un paso más allá

<a onclick="window.open(this.href, this.target, 'toolbar=0,menubar=0,status=1, location=1,scrollbars=1,

width=300,height=400'); return false;" href="http://www.me.gov.ar" target="_blank"> Ministerio </a>

Para editar el código y poder definir el tamaño de la ventana emergente, basta con modificar estos datos:

Pixeles de ancho Pixeles de largo

Dos pasos más allá

<a onclick="window.open(this.href, this.target, 'toolbar=0,menubar=0,status=1, location=1,scrollbars=1,width=300,height=400'); return false;" href="http://www.educ.ar" target="_blank"> el portal educar </a>

Y esto es para editar el código y elegir otro sitio como destino del link

Dirección o sitio webdestino (va pegado a las comillas!)

Texto que se mostrará como link.Puede ser una palabra o más (cuidado con usar acentos y caracteres especiales, ya que estamos en la vista de código puro).

Y la frutilla del postre

¿Qué tal si queremos que en la ventana emergente aparezca una información propia?

Volvamos al listado de páginas del sitio...

Elegimos la página que se verá emergente y sobre ella presionamos usando el botón derecho del mouse

Del menú contextual que se activa seleccionamos “Copiar dirección del enlace”

Veamos el contenido de los que acabamos de copiar...

javascript:VerNovedad2('http://infd.e-ducativa.com/sitio/upload/html/12.html')

Para eso lo pegamos en el bloc de notas

Esta es la dirección de destino para reemplazar en nuestro código original

<a onclick="window.open(this.href, this.target, 'toolbar=0,menubar=0,status=1, location=1,scrollbars=1,width=500,height=600'); return false;" href="http://infd.e-ducativa.com/sitio/upload/html/12.html" target="_blank"> Jornada La Rioja </a>

Veamos el resultado...

Tenemos que tener el código copiado en texto sin formato (bloc de notas es lo mejor) para poder modificarlo (dimensiones de la ventana emergente y página de destino)

Tenemos que tener también los datos a modificar (tamaño, dirección web...para poder usarlos en ese código que tendremos a mano)

En la página en la que queremos crear el enlace a la ventana emergente, desde el editor, colocamos el cursor en el punto que lo queremos insertar

Pegamos el código con el botón para pegar código (H) y presionamos insertar

No olvidemos el clic en “Modificar”

Resumiendo

¡Y listo! A rodar...