Curso de creación de sitios web - Lección 5 - Página 3

Cómo interactuar entre las distintas páginas

Dado que estamos trabajando con 3 páginas simultaneamente (en nuestro ejemplo) lo ideal sería poder hacer click en un link de un Marco y que ocurriera algo en el Marco contiguo.
Es decir, si tenemos el menú a la izquierda con varias opciones, lo lógico sería que cuando un usuario haga click en una de ellas apareciera el contenido correspondiente en el Marco de contenidos. Al contrario de lo que puede parecer, realizarlo es muy sencillo.
Ahora es el momento de repasar un poco lo que aprendimos sobre los enlaces en la página 2b, sobre todo en el momento en que hacíamos referencia a los TARGET.
En esa lección, aprendimos que había varios tipos de Target, como era el _self, _top, _blank... Ahora, nos servirá también para especificar el Marco en el que sucederá la acción, usando los nombres que les definimos en el código. Veamos un resumen:

• Target="nombre": carga el enlace en la ventana cuyo nombre se especificó en el código de la plantilla.
• Target="_blank": abre el enlace en una página nueva.
• Target="_self": carga el enlace en la subventana activa.
• Target="_parent": carga el enlace en el "frameset" definido anteriormente, al actual.
• Target="_top": elimina todas las subventanas y carga la página a pantalla completa.

Veamos el contenido del código HTML de nuestra página de menu.htm:

<a href="contenidos.htm" target="contenidos">Contenidos 1</a><br>
<a href="contenidos2.htm" target="contenidos">Contenidos 2</a>

En este caso vemos que el menú de la parte izquierda contiene dos títulos que son "Contenidos 1" y "Contenidos 2". Nos fijamos igualmente en el código y vemos que los target apuntan directamente al Frame "contenidos" por lo que cuando hacemos click en "Contenidos 1 o 2", se abrirá en dicho Frame los contenidos correspondientes a ese enlace.

Descarga de los ejemplos

Para entender todo lo que hemos aprendido en esta lección sobre Frames, lo mejor será probarlo y para ello ponemos a tu disposición las páginas de ejemplo que hemos usado para crear este capítulo. Puedes descargarlas desde aquí. Una vez las tengas en tu PC, las descomprimes con tu descompresor habitual y ejecutas el archivo "FRAME.HTM". Verás que en tu navegador aparece la imagen anterior. Si haces click en los enlaces, la página de contenidos cambiará a "Contenidos 1" y "Contenidos 2".

Como ejercicio deberás analizar los códigos de todas las páginas y modificarlas a tu gusto, usando todo lo que hemos aprendido hasta ahora con el fin de crear una página funcional usando Marcos.

Edición de Frames con programas de diseño web

Desafortunadamente, los dos programas gratuitos que tenemos disponibles en Internet, como son Trellian Webpage (usado en nuestro curso) y también NVU , no permiten la edición de páginas que contengan Frames a tiempo real. Más concretamente, no te permiten crear la plantilla que contendrá el resto de páginas. Algunos programas comerciales como DreamWeaver de Macromedia o Namo WebEditor si permiten la creación de Frames de una manera fácil y sencilla. Ambos programas comerciales disponen de versiones de evaluación por si quisieras descargarlos y probar sus funciones.
A modo de ejemplo, DreamWeaver te muestra varias posibilidades de creación de Frames con un simple menú donde puedes elegir el tipo de plantilla:

De todas formas no supone un grave problema, ya que el diseño de la plantilla de Frames es muy sencillo como hemos visto en este capítulo y una vez realizado no tendremos necesidad de volver a tocarlo, salvo que queramos modificar bordes, márgenes, etc.
Por lo tanto, podemos crear manualmente la plantilla y posteriormente dedicarnos al diseño de las páginas que aparecerán de forma simultanea, y estas si podemos crearlas con NVU o Trellian Webeditor. Para comprobar el resultado, tan solo tendríamos que abrir la plantilla con nuestro navegador habitual.

Iframes o marcos flotantes

Es posible que en alguna ocasión, necesitemos introducir datos externos es decir, otro tipo de información que no queramos incluir directamente en nuestro sitio web. Vamos a explicarnos mejor.

Ya conocemos los Frames, ya que en este capítulo los hemos estudiado detenidamente y también sabemos que podemos usar varias páginas para poder mostrarlas al mismo tiempo. Pero con el uso de Iframes, a parte de todo lo anterior, podemos mostrarlo en cualquier parte de la página y que ocupe el espacio que queramos, de ahí el nombre de flotantes. Además, los navegadores más actuales ya soportan esta etiqueta sin problemas.

La etiqueta HTML que tenemos que escribir para implementar esta característica en nuestra página web, es la siguiente:

<iframe> para abrir,
</iframe> para cerrar la etiqueta.

y los distintos parámetros son los que a continuación se muestran:

• Name: Asigna un nombre único al iframe que estamos creando.
• Width: Ancho de la ventana iframe.
• Height: Alto de la ventana iframe.
• Align: Alineación. Tiene tres valores, izquierda, centro y derecha (left, center, right).
• Frameborder: Asigna un borde alrededor del iframe. Su valor puede ser 0 o 1.
• VSpace: Nos sirve para posicionar el marco, y define la distancia entre el borde superior del marco y el límite superior de la ventana del navegador. Se expresa en píxeles.
• HSpace: Nos sirve para posicionar el marco, y define la distancia entre el borde izquierdo del marco y el límite izquierdo de la ventana del navegador. . Se expresa en píxeles.
• Marginheight: Espacio que quedará entre el borde superio del marco y su contenido.
• Marginwidth: Espacio que quedará entre el borde izquierdo del marco y su contenido.
• Scrolling: Permite definir si queremos que el iframe tenga las "barras" de desplazamiento para movernos por su contenido. Podríamos poner "yes", "no" o "auto" (siempre, nunca, automático).
• src: Mediante este parámetro definimos la dirección de la web que queremos insertar en nuestro iframe.
• style: Nos permite definir parámetros de estilo a nuestro frame directamente (aún no visto en nuestro curso).
• class: Nos permite definir un fichero externo de hojas de estilo para definir el aspecto de la página que se muestra en el iframe. (aún no visto en nuestro curso).
• Id: Identificador. Muy útil para identificar este iframe de forma inequívoca. También posibilita cambiar dinamicamente las propiedades del marco usando un lenguaje de script, como JavaScript.

Pongamos un ejemplo. Imaginemos que nos interesa por alguna razón insertar la página principal de Google en un determinado espacio de nuestro sitio web; podemos hacerlo así:

<iframe name="prueba" width="400" height="400" align="center" frameborder="0" vspace="0" hspace="5" marginheight="5" marginwidth="5" scrolling="no" src="http://www.google.com" >Su navegador no soporta marcos o frames. No podrá visualizar esta página.</iframe>

El resultado es el siguiente:

Analicemos el código anterior:

Abrimos la etiqueta Iframe y le asignamos el nombre "prueba", un nombre único y que identifica a este Iframe. La ventana queda delimitada a un ancho de 400 píxeles y un alto del mismo tamaño. Además, la alineamos al centro y no le asignamos un borde.
Si seguimos leyendo el código, vemos que el espacio en vertical es cero y en horizontal es cinco. Además, añadimos dos medidas más indicando que serán cinco píxeles de margen en alto y ancho. La ventana no tendrá barras de Scroll. Por último, indicamos la página que se abrirá dentro de nuestro Iframe con "src", escribimos un mensaje de advertencia para que se muestre en aquellos navegadores que no tengan posibilidades de mostrarlo y cerramos el código completamente con "Iframe>".