11. Práctica 5: Web de Los Alpes con frames
El objetivo de nuestra quinta práctica consistirá en realizar una versión con frames del sitio Web de la agencia de viajes Los Alpes que creamos en la práctica 4 (figura 8.25). Como es nuestro primer gran proyecto con frames nos limitaremos a la división de la ventana del navegador en dos frames fila evitando así las dificultades del anidamiento de frames. Nuestra recomendación para el lector avanzado es que realice la práctica tal y como aquí se expone y una vez completada con éxito intente mejorarla introduciendo un tercer frame. Este tercer frame puede servir por ejemplo para mantener siempre visible los botones de las páginas mes.htm y medida.htm. Para ello aconsejamos crear una división en dos columnas reservando la izquierda para los botones y usando la derecha para mostrar el contenido principal.
Figura 175. Página Web de Los Alpes creada en la práctica 4 de este curso. Ahora la modificaremos para crear una versión con frames.
11.1. Documento de definición de frames
Volvamos a la versión de dos frames. El frame superior (banner) lo usaremos para mantener siempre visible el logo de Los Alpes junto con los botones que nos llevan a las distintas secciones de la página. En el frame inferior (principal) iremos mostrando cada una de las páginas de las que se compone el sitio Web. Estas deberán ser modificadas ya que el logo y los botones ya no deben mostrarse. En su momento veremos que cambios son necesarios. Por ahora empezaremos con el documento de definición de frames. Este será ahora el archivo inicial de nuestro sitio Web por lo que debe llamarse index.htm. El documento HTML con el contenido principal deberá ser renombrado. En esta ocasión hemos elegido darle el nombre main.htm.
Debemos dividir la ventana en dos filas. La fila superior debe tener una altura mínima de 163 pixeles para que quepan las imágenes que queremos incluir. La fila inferior ocupará el resto del espacio. El código que define esta estructura es por tanto:
<FRAMESET ROWS="163,*"> ... contenido frames ... </FRAMESET> |
Que nos divide la ventana en dos tal y como vemos en la figura 8.26.
Figura 176. El frame superior será de 163 pixeles, mientras que el inferior ocupará el resto del espacio de la ventana del navegador.
El contenido del primero de los frames será el archivo banner.htm. El contenido del segundo será el archivo main.htm.
Además de insertar el contenido de los frames debemos incluir un código alternativo para los navegadores que no soporten frames en el que mostraremos un texto acompañado de un enlace a una versión de las páginas sin frames. Para crear esta segunda versión creamos un directorio de nombre noframes y copiamos a él todos los documentos de la práctica 4. Con todo esto el código completo queda:
<HTML> <HEAD> <TITLE>Agencia de viajes LOS ALPES</TITLE> </HEAD> <FRAMESET ROWS="163,*"> <FRAME SRC="banner.htm" NAME="banner" MARGINWIDHT="0" MARGINHEIGHT="0"> <FRAME SRC="main.htm" NAME="principal"> </FRAMESET> <NOFRAMES> <BODY> Esta página tiene frames y su navegador no los soporta. Por favor, visite nuestras páginas especialmente preparadas para navegadores <A HREF="noframes/index.htm">sin frames</A>. </BODY> </NOFRAMES> </HTML> |
Un aspecto que es necesario comentar de este código es que hemos usado los atributos MARGINWIDTH y MARGINHEIGHT dándoles el valor cero en el frame superior. Esta es una práctica muy habitual en los frames que contengan imágenes ya al eliminar los márgenes podremos reducir el tamaño del frame.
 | En un capítulo anterior aprendimos a usar la etiqueta META, para cargar automáticamente otra página (o refrescar la misma) pasados unos segundos. Para ello debíamos incluir en la cabecera del documento HTML el siguiente código:
|
11.2. El frame Banner
El contenido de este frame debe estar en un archivo que hemos decidido llamar banner.htm, y el siguiente paso en nuestro proyecto será escribir su código. Para ello no tenemos más que copiar las primeras líneas del archivo mes.htm (en realidad vale cualquiera menos main.htm). En estas primeras líneas se incluía el código para insertar el logo de Los Alpes y los botones que nos dirigían a las distintas secciones del sitio Web. Nuestro objetivo será que todo ello sea mostrado en este frame para que permanezca siempre visible y se muestre como en la figura 8.27 independientemente del contenido del frame inferior.
Figura 177. El contenido de banner.htm, el logo y encabezado de Los Alpes así como los botones de navegación, serán mostrados en el frame superior.
Este es el momento de tener en cuenta un detalle importante de la creación de toda página con frames. En este documento hay una serie de enlaces (los botones) y debemos elegir cual será el destino donde se mostrará las páginas a las que nos conducen dichos enlaces. Si no especificamos ningún destino cuando pulsemos, por ejemplo, sobre el botón OFERTAS, el documento mes.htm sustituirá a banner.htm en el frame superior. Esto no es lo que queremos ya que precisamente el objetivo de este frame era mantenerse siempre visible. Queda claro por tanto que el mes.htm debe mostrarse en el frame principal. Ya sabemos como hacerlo, no hay más que usar el atributo TARGET en la etiqueta que definía el enlace:
<A HREF="mes.htm" TARGET="principal"> <IMG SRC="img/boton2.jpg" WIDTH=136 HEIGHT=48 BORDER=0 ALT="Ofertas del Mes"> </A> |
El siguiente paso sería añadir el atributo TARGET en el resto de enlaces de banner.htm ya que todos ellos deben mostrar el resultado en el frame principal (figura 8.28). Sin embargo, si recordamos, en estos casos podíamos usar la etiqueta BASE en la cabecera del documento para indicar cual es el frame destino de todos los enlaces del documento. El código que debe emplearse es:
<BASE TARGET=principal"> |
Figura 178. Todos los botones tienen como destino el frame principal. Por tanto es conveniente usar la etiqueta BASE con el atributo TARGET=principal.
Es importante recordar que la etiqueta BASE debía incluirse en la cabecera del documento, entre las instrucciones <<HEAD>> y </</HEAD>>.
El código completo del archivo banner.htm es:
<HTML> <HEAD> <TITLE>LOS ALPES - Encabezado</TITLE> <BASE TARGET="principal"> </HEAD> <BODY LINK="#FED354" VLINK="#EDB301" ALINK="#FFFF00" BGCOLOR="#335142" TEXT="#71AC84" BACKGROUND="img/tratilea.jpg"> <A NAME="arriba"></A> <CENTER> <TABLE ALIGN="center" border="0"> <TR> <TD><IMG SRC="img/logo.gif" WIDTH=90 HEIGHT=99 BORDER=0 ALT="[LOGO]"></TD> <TD><IMG SRC="img/losalpes.gif" WIDTH=440 HEIGHT=99 BORDER=0 ALT="LOS ALPES - Agencia de Viajes"></TD> </TR> <TR> <TD COLSPAN="2"> <A HREF="main.htm"><IMG SRC="img/boton0.jpg" WIDTH=110 HEIGHT=48 BORDER=0 ALT="Página principal"></A> <A HREF="medida.htm"><IMG SRC="img/boton1.jpg" WIDTH=136 HEIGHT=48 BORDER=0 ALT="Viajes a su medida"></A> <A HREF="mes.htm"><IMG SRC="img/boton2.jpg" WIDTH=136 HEIGHT=48 BORDER=0 ALT="Ofertas del Mes"></A> <A HREF="superofe.htm"><IMG SRC="img/boton3.jpg" WIDTH=136 HEIGHT=48 BORDER=0 ALT="La superOFERTA"></A></TD> </TD> </TR> </TABLE> </CENTER> </BODY> </HTML> |
11.3. Frame principal
El frame inferior será nuestro frame principal, su contenido irá cambiando cuando el visitante navegue por nuestras páginas, mientras que el frame con el banner se mantendrá siempre igual. Este contenido será el de los documentos mes.htm, superofe.htm, medida.htm y main.htm. La manera de pasar de unos a otros será pulsar sobre los botones del frame banner.
Estas páginas ya existen y están creadas, sin embargo todas ellas contienen una cabecera con el título y la navegación. Estos elementos ya no son necesarios, dado que se encuentran en el frame superior. Por ello será necesario editar los archivos y quitar esa parte de cada uno. En la figura 8.29 se muestra el documento mes.htm una vez se le ha quitado la cabecera.
11.4. Últimos retoques
El último paso en la creación del sitio Web de los Alpes en su versión con frames consistirá en dar los últimos retoques. Suele ser aconsejable asegurarnos que todo lo anterior funciona antes de realizarlos.
Los retoques abarcan redimensionar los tamaños de los frames para adaptarlo al contenido final que se ha incluido en ellos, cambiar el fondo de algunos de ellos para que contrasten mejor, incluir márgenes para los párrafos, eliminar los bordes, etc. Nosotros nos centraremos en estas dos últimas modificaciones.
Para eliminar el borde debemos editar de nuevo el archivo index.htm e incluir los atributos necesarios para hacer los bordes invisibles. En un principio, y para cumplir el estándar incluimos FRAMEBORDER="0" en las dos etiquetas FRAME que tenía el documento. Posteriormente, para asegurar compatibilidad con todos los navegadores incluimos además: FRAMEBORDER="0", BORDER="0" y FRAMESPACING="0" en la etiqueta FRAMESET.
Por otro lado editaremos el archivo main.htm que contenía el texto de bienvenida al sitio Web y daremos formato a dicho párrafo incluyendo márgenes a la izquierda y a la derecha suyo. Para crear los márgenes usaremos la técnica comentada en el capítulo dedicado a las tablas. Crearemos una de tres columnas. La izquierda estará vacía (contendrá un espacio vacío, ) y constituirá un margen con un ancho igual al 10% de la pantalla. La columna derecha, igualmente vacía, tendrá un ancho del 5% y constituye el margen derecho. En la columna central irá, por supuesto el texto, y ocupará el resto del espacio.
La práctica ha terminado. El resultado final se distribuye junto con este curso en un archivo comprimido: practica5.tgz. El resultado final se puede apreciar en la figura 8.30.
