Forinsur S.L.

Centro de Formacin | Manual de Usuario

Tablas y marcos
Qu es una tabla En HTML tenemos la posibilidad de presentar informacin estructurada gracias a la posibilidad de crear tablas. Bsicamente, una tabla es una estructura compuesta por Filas y Columnas en las que en cada celda resultante podemos incluir cualquier tipo de informacin. Aprovechando este tipo de estructura podemos presentar de una manera muy ordenada informacin variada, como calendarios de actividades, datos de una hoja de clculos, estadsticas, etc..

En este tema vamos a ver cmo trabajar con tablas. Podremos, entre otras cosas, insertar tablas, combinar celdas, insertar filas o columnas y cambiar el tamao del borde.

Todos los objetos se alinean por defecto a la izquierda de las pginas web, pero gracias a las tablas es posible distribuir el texto en columnas, colocar imgenes al lado de un bloque de texto, y otra serie de cosas que sin las tablas seran imposibles de realizar. Hoy en da, la mayora de las pginas web se basan en tablas, ya que resultan de gran utilidad al mejorar notablemente las opciones de diseo. Las tablas estn formadas por un conjunto de celdas, distribuidas en filas y columnas. A continuacin tienes un ejemplo de tabla.

Tcnico Especialista en Diseo, Animacin y Programacin Web

Definiendo una tabla Para insertar una tabla hay que dirigirse al men Insertar, a la opcin Tabla.

En la nueva ventana habr que especificar el nmero de Filas y Columnas que tendr la tabla, as como el Ancho de la tabla. El Ancho puede ser definido como Pxeles o como Porcentaje. La diferencia de uno y otro es que el ancho en Pxeles es siempre el mismo, independientemente del tamao de la ventana del navegador en la que se visualice la pgina, en cambio, el ancho en Porcentaje indica el porcentaje que va a ocupar la tabla dentro de la pgina y se ajustar al tamao de la ventana del navegador, esto permite que los usuarios que tengan pantallas grandes, aprovechen todo el ancho de pantalla. Grosor del Borde indica el grosor del borde de la tabla en pxeles, por defecto se le asigna uno (1). Relleno de celda indica la distancia entre el contenido de las celdas y los bordes de stas.

Forinsur S.L. Centro de Formacin | Manual de Usuario

Espacio entre celdas indica la distancia entre las celdas de la tabla. Tambin se puede establecer si se quiere un encabezado para la tabla es recomendable utilizar encabezados en el caso de que los usuarios utilicen lectores de pantalla. Los lectores de pantalla leen los encabezados de tabla y ayudan a los usuarios de los mismos a mantener un seguimiento de la informacin de la tabla. Si queremos incluir un ttulo, lo indicamos en Texto, el ttulo aparecer fuera de la tabla. En alinear texto indicamos dnde queremos alinear el ttulo con respecto a la tabla. En Resumen: indicamos una descripcin de la tabla, los lectores de pantalla leen el texto del resumen pero dicho texto no aparece en el navegador del usuario.

Las celdas son cada uno de los recuadros que forman una tabla, resultan de la interseccin entre una fila y una columna.

imagen y texto

COLUMNA

Texto

dentro

de una celda

CELDA

FILA

Para poder insertar algn elemento en una celda, ya sea texto o imgenes, simplemente hay que situar el cursor previamente dentro de la celda deseada.

Tcnico Especialista en Diseo, Animacin y Programacin Web

Modificando una tabla Antes de modificar la tabla tenemos que seleccionarla y para ello existen varias formas de seleccionar una tabla. Una de ellas es a travs del men Modificar estando el cursor en la tabla, o desplegando el men contextual de la tabla al pulsar con el botn derecho sobre ella. En ambos casos aparece la opcin Tabla, a travs de la cual se puede elegir la opcin Seleccionar tabla.

Tambin es posible seleccionar una tabla pulsando con el ratn sobre el borde que la rodea, o pulsando sobre la etiqueta <table> que aparece en la barra de estado de la ventana de documento.

Cuando se selecciona una tabla o cuando se coloca el cursor sobre cualquier parte de la tabla, Dreamweaver muestra en una zona verde el ancho de la tabla y de cada columna. Junto a los anchos se encuentran unos mens desplegables (men de encabezado de la tabla y men de encabezado de la columna). Estos mens permiten acceder rpidamente a determinados comandos relacionados con la tabla.

Forinsur S.L. Centro de Formacin | Manual de Usuario

Si tiene el cursor en la tabla y no te aparece esa zona verde puedes activar su visualizacin seleccionando la opcin Anchos de tablas del men Tabla o tambin desplegando de la barra de mens, el men Ver, Ayudas visuales, Anchos de tabla. De la misma forma se desactiva su visualizacin.

Si no aparece el ancho de la tabla o de una columna, la tabla o la columna no tiene un ancho especificado, si aparecen dos nmeros, el primer nmero corresponde al ancho especificado en las propiedades de la tabla o columna y el segundo nmero es el ancho el ancho visual que aparece en la vista de diseo, por ejemplo en la tabla anterior la primera columna tiene 139 (142), en las propiedades de la celda tenemos el ancho 139 pxeles pero al contener una imagen que necesita ms espacio, la columna ocupar realmente 142 pxeles (ancho visual de la columna tal como aparece en la pantalla). Cuando ocurren estas diferencias podemos hacer que en el cdigo

(propiedades) se cambie el ancho por el real, para ello slo tenemos que seleccionar la opcin Igualar todos los anchos del men desplegable de encabezado de tabla. En este men vemos que tambin tenemos la opcin Seleccionar tabla.

Tcnico Especialista en Diseo, Animacin y Programacin Web

No siempre se desea seleccionar toda una tabla, en ocasiones se desea seleccionar filas, columnas o celdas. Puede seleccionarse una fila o columna de varias formas, lo mejor es que pruebes las distintas formas y elijas la que ms te gusta. Estas son las formas de seleccin: Puede utilizar la opcin Seleccionar columna del men de encabezado de columna (zona verde de anchos) esto slo es vlido para seleccionar una columna. Manteniendo pulsado y arrastrando el ratn hasta seleccionar la columna/s o fila/s completamente. Tambin puede hacerse situando el cursor junto al borde superior o izquierdo de la columna o fila respectivamente, de modo que el cursor cambia a la forma de una flecha negra. Al hacer clic se selecciona la columna o fila a la que apunta dicha flecha. En cualquier momento, para seleccionar una fila posicionar el cursor en cualquier sitio de la fila y sobre la etiqueta <tr> de la barra de estado o sobre la etiqueta <td> para seleccionar la columna. Para seleccionar varias celdas contiguas, basta con mantener pulsado el ratn mientras se arrastra sobre las celdas deseadas. Para seleccionar una sola celda o varias celdas no contiguas, hay que mantener pulsada la tecla Control mientras se hace clic sobre las celdas.

Forinsur S.L. Centro de Formacin | Manual de Usuario

Las propiedades de la tabla se especifican a travs de su inspector de propiedades.

A travs del inspector de propiedades se pueden modificar los valores que se especificaron al insertar la tabla. Al mismo tiempo, pueden indicarse otros como pueden ser el valor Alinear (que permite alinear la tabla a la izquierda, al centro o a la derecha), el color de fondo (en Col. Fondo) o de borde de la tabla (en Col. borde ), o la imagen de fondo (en Im.). Si lo que se selecciona es una celda, o un conjunto de celdas, el inspector de propiedades cambia, para permitir especificar otros valores.

La parte superior del inspector de propiedades en este caso sirve para especificar las propiedades del texto que se insertar dentro de la celda (o celdas) seleccionada. La parte inferior sirve para especificar valores propios de la celda, como puede ser el color o imagen de fondo diferentes de los especificados para la tabla global (en Fnd), el color del Borde de la celda, etc. Dos opciones que posiblemente necesites utilizar con frecuencia sern Horiz y Vert, que definen la alineacin del contenido de la celda de forma horizontal y vertical respectivamente.

Tcnico Especialista en Diseo, Animacin y Programacin Web

Como ya sabe, el Ancho de una tabla puede ser definido como Pxeles o como Porcentaje. El tamao de la tabla a travs del inspector de propiedades estar especificado por los valores de An (anchura) y Al (altura). Normalmente slo se especifica la anchura, no la altura.

Los valores An y Al de una celda siempre estn en Pxeles. No es necesario especificar ninguno de estos dos valores para las celdas, a no ser que se desee que se mantenga obligatoriamente ese tamao, y no que se ajusten al contenido o al tamao de la ventana. No solo puede establecerse el tamao de las tablas y de las celdas a travs del inspector de propiedades. Tambin es posible hacerlo manteniendo pulsado el ratn sobre alguno de los bordes, arrastrndolo hacia la posicin deseada.

Aadir y eliminar filas y columnas Existen varias formas de aadir y eliminar filas y columnas a una tabla. Lo primero que hay que hacer es, estando el cursor en una celda o seleccionando varias, desplegar el men contextual de la tabla al pulsar con el botn derecho sobre ella, o bien abrir el men Modificar. En ambos casos aparece la opcin Tabla. Segn las celdas seleccionadas, algunas de las opciones de Tabla se podrn utilizar mientras que otras no. Para insertar una fila o una columna, hay que pulsar sobre las opciones Insertar fila o Insertar columna. La fila se inserta sobre la celda o el conjunto de celdas seleccionadas, mientras que la columna se inserta a su izquierda.

Forinsur S.L. Centro de Formacin | Manual de Usuario

Tambin tenemos una opcin ms completa, la opcin Insertar filas o columnas.... Al seleccionarla aparece una nueva ventana, donde es posible determinar si lo que se insertarn sern filas o columnas, el nmero de ellas que se insertar, y la posicin donde se insertarn.

Para eliminar una fila o una columna, hay que posicionar el cursor en la fila o columna a eliminar y elegir la opcin Eliminar fila o Eliminar columna del men Tabla.

Tcnico Especialista en Diseo, Animacin y Programacin Web

Tambin se puede seleccionar la fila o columna a borrar y pulsar la tecla de borrado (Del o Supr) Anidar, dividir y combinar celdas Es posible insertar tablas dentro de las celdas de otras tablas. A esto se le llama anidar tablas. A continuacin tienes un ejemplo de anidamiento. Como puedes ver, en la primera celda de una tabla se ha insertado otra tabla.

Para anidar tablas slo tienes que posicionar el cursor en la celda donde quieres insertar la nueva tabla e insertarla como ya hemos visto. Combinar celdas consiste en convertir 2 o ms celdas en una sola por lo que dejar de haber borde de separacin entre una celda y otra ya que sern una sola. Esto nos puede servir por ejemplo para utilizar la primera

Forinsur S.L. Centro de Formacin | Manual de Usuario

fila para escribir el ttulo de la tabla. En este caso habra que combinar todas las celdas de la primera fila en una sola Mientras que dividir celdas consiste en partir en dos una celda. Una de las formas de dividir y combinar celdas es a travs del inspector de propiedades.

Si se seleccionan varias celdas pueden combinarse pulsando sobre el botn del inspector de propiedades (lo encontrars en la parte inferior

izquierda del panel Propiedades, o pulsando sobre la opcin Combinar celdas de la opcin Tabla, que como ya has visto puedes dirigirte a ella a travs del men contextual de la tabla y a travs del men Modificar. Tienes que tener en cuenta que slo es posible combinar celdas contiguas, cuya combinacin pueda dar como resultado otra celda, es decir, que su combinacin d como resultado un recuadro. Por ejemplo, en la siguiente tabla no podran combinarse las celdas 1 y 4, ni las celdas 1, 2 y 3, porque dichas combinaciones no dan como resultado una celda. 1 3 2 4 del inspector de

Para dividir una celda hay que pulsar sobre el botn

propiedades, o sobre la opcin Dividir celda de la opcin Tabla. En ambos casos, aparece una ventana como sta, en la que hay que especificar si la celda se va a dividir en filas o columnas, y el nmero de stas.

Tcnico Especialista en Diseo, Animacin y Programacin Web

Ordenando una tabla Si en tu pgina web trabajas con muchos datos seguramente utilizars tablas para mostrarlos y probablemente te habr ocurrido que despus de haberte pasado horas insertando los datos te das cuenta de que los queras insertar ordenados por cierto campo, as que te tocara pasarte unas horas ms ordenando la tabla... si no tuvieses DreamWeaver. DreamWeaver trae una herramienta para ordenar tablas con suma facilidad. Para este ejemplo utlizaremos una tabla pequea. Supongamos que esta tabla es la que hemos escrito desordenada y nos damos cuenta de que la queremos ordenar por la nota. Alumno Prez Bueno Arroyo Guzmn Nota 6.1 9.5 7.3 6.4

Maldonado6.4

Seleccionamos la tabla haciendo click en un lugar cualquiera y vamos a Comandos > Ordenar Tabla... , nos aparecer la siguiente ventana:

Forinsur S.L. Centro de Formacin | Manual de Usuario

Como queremos ordenar la tabla por la nota, el alumno con nota ms alta primero, el que tenga la nota ms baja, ltimo, seleccionamos Ordenar por Columna2, Ordenar Numricamente (ya que es un nmero) y Descendente. Adems, si dos alumnos tienen la misma nota, queremos que salgan con los apellidos ordenados alfabticamente, por eso en Despus por seleccionamos Columna1, Alfabticamente y Ascendente. El resultado es: Alumno Bueno Arroyo Guzmn Prez Nota 9.5 7.3 6.4 6.1

Maldonado6.4

Insertando datos desde un fichero de datos delimitado Es bastante comn que algunos programas de bases de datos y hojas de clculos, permitan exportar los contenidos de una base de datos a un fichero delimitado. Esta delimitacin puede venir dada por comas, o por tabulaciones, o por cualquier otro smbolo estndar.

Tcnico Especialista en Diseo, Animacin y Programacin Web

En Dreamweaver se ha aadido la posibilidad de insertar los datos de un fichero delimitado o tabulado directamente sobre un documento HTML. Dreamweaver importa estos datos y genera una tabla ordenada con ellos. Al importar los datos de un fichero tabulado, Dreamweaver detectar cada uno de los campos que componen la base de datos. Cada uno de los campos de la base de datos ocuparn una columna de la tabla. Cada uno de los distintos registros de la base de datos ocupar una nueva fila en la tabla resultante. Para realizar esta importacin: 1. Posicionamos el cursor en el punto donde queremos insertar los datos dentro del documento. No es necesario que definamos ninguna tabla. Este proceso se har automticamente cuando importemos los datos. 2. Una vez seleccionado el punto donde queremos insertar los datos, podemos utilizar men Insertar > Objetos de tabla > Importar Datos de Tabla.

En la imagen superior, se observa el aspecto de la ventana en la que podemos ajustar las opciones para la importacin de datos desde un fichero tabulado. Archivo de datos: En este campo incluiremos la URL del fichero tabulado que contiene los datos. Lo ms cmodo es localizar y seleccionar el fichero navegando por nuestro disco duro, haciendo uso del botn "Browse...".

Forinsur S.L. Centro de Formacin | Manual de Usuario

Delimitador: En esta lista desplegable debemos escoger el carcter con el que se ha delimitado los datos en el fichero. Estos caracteres pueden ser: Tab (Tabulador), Comma (Coma), Semicolon (Punto y coma), Colon (dos puntos) u Other (Otro), en cuyo caso podremos introducir el carcter delimitador en el campo que aparecer junto a esta lista desplegable.

Ancho de tabla: En este apartado definimos el ancho de la tabla. Las opciones disponibles son: Relleno de celda: En este campo ajustamos el valor de los mrgenes interiores de cada celda de la tabla resultante. Espacio entre celdas: En este campo ajustamos el valor del espacio que separar unas celdas de otras en la tabla resultante. Formato prmera fila: En esta lista desplegable podemos escoger un formato para la primera fila de la tabla resultante. As, podemos escoger que el texto tenga uno de los siguientes formatos: Bold (negrita), Italic (Itlica), Bold Italic (Negrita e Itlica) o No Formatting (Ningn formato).

Borde: En este campo introducimos el valor para el ancho del borde de la tabla resultante.

Una vez hayamos introducido los ajustes necesarios, podemos hacer click en "OK" y en el punto donde habamos seleccionado, aparecer una tabla que contendr los datos que hubiera en el fichero de datos tabulados, convenientemente distribuidos en filas y columnas. Una vez importados los datos de un fichero tabulado y presentados en la tabla correspondiente de Dreamweaver, esta tabla y todo su contenido pasa a ser un elemento ms del documento. La tabla puede ser formateada y ordenada de la misma manera que cualquier otra tabla.

Utilizando una tabla para disear Las tablas fueron creadas para presentar informacin ordenada en Filas y Columnas, tal y como hemos visto hasta ahora. Sin embargo, gracias a la

Tcnico Especialista en Diseo, Animacin y Programacin Web

flexibilidad y el control que permiten para distribuir la informacin, los diseadores vieron rpidamente en ellas una similitud con las "retculas" utilizadas en el diseo y maquetacin de publicaciones impresas, como revistas, peridicos, folletos o libros. En este tipo de publicaciones, se diseaba una "retcula maestra" en la que se divida la pgina en columnas para definir las distintas zonas para distribuir la informacin. Esta similitud de las tablas con las "retculas" de diseo tradicionales, junto con el relativo control que ofrecen para el posicionamiento de elementos en un documento HTML, hicieron de esta herramienta la nica opcin posible al alcance de los diseadores para "maquetar" el contenido de un documento HTML. Al menos as era hasta la aparicin del HTML dinmico, que veremos posteriormente en este curso. Por tanto, todo lo visto hasta ahora sobre las tablas, puede ser utilizado para distribuir y disear el contenido de un documento de manera que su presentacin esttica este ms cuidada. A continuacin listamos algunas de las opciones para las que puede utilizar las tablas: Distribucin de textos e imgenes en distintas columnas Creacin de mrgenes y espacios en blanco dentro de un documento HTML Mayor control para el posicionamiento de imgenes con respecto al resto de los elementos de una pgina Destacar contenidos usando los ajustes de fondo para las celdas de una tabla Establecer un ancho mximo para los contenidos de la pgina, con independencia del tamao de la ventana del navegador. En fin, en este pequeo apartado pretendemos incitar al uso de las tablas en la creacin de "rejillas" para la maquetacin de documentos HTML, a pesar de que esta no sea la utilidad para la que fueron creadas las tablas en HTML. Los ejemplos citados arriba son solo parte de los usos "aadidos" que la creacin de tablas puede tener dentro de un documento. Si observa cualquier revista o peridico, observar como todos los contenidos estn distribuidos dentro de una "rejilla", con mayor o menor flexibilidad, que consiguen ordenar jerrquica y estticamente la informacin presentada.

Forinsur S.L. Centro de Formacin | Manual de Usuario

Todos esos conceptos de diseo tradicional, son fcilmente transpolables al diseo web gracias a las tablas. Utilcelas como las herramientas tiles que son.

Arriba tenemos un ejemplo del uso de las tablas para disear y maquetar documentos HTML. Como se puede observar, el parecido de la composicin con tablas con respecto a los medios impresos tradicionales es bastante grande. Este tipo de composiciones en HTML no seran posibles sin las tablas.

Qu es un conjunto de Marcos Los marcos o frames sirven para distribuir mejor los datos de las pginas, ya que permiten mantener fijas algunas partes, como pueden ser el logotipo y la barra de navegacin, mientras que otras s pueden cambiar. Adems de mejorar la funcionalidad, pueden mejorar tambin la apariencia. Cada uno de los marcos de una pgina, contiene un documento HTML individual. Por ejemplo, en la imagen de la derecha puedes ver una pgina con dos marcos. El marco izquierdo contiene el documento menu.htm y el derecho el documento quienes.htm. Para poder visualizar la pgina de este modo, hemos tenido que abrir en el navegador el documento marcos.htm, que es la pgina que contiene los marcos agrupados.

Tcnico Especialista en Diseo, Animacin y Programacin Web

Es posible editar los documentos contenidos en los marcos desde la pgina que contiene el grupo de marcos. Esto facilita el trabajo, ya que es ms fcil hacerse una idea de cmo quedar la pgina al final, cosa que no es posible si se editan individualmente cada uno de los documentos que contiene el marco. El trabajar con marcos puede resultar una tarea algo complicada, sobretodo al principio, por lo que no vamos a profundizar mucho en el tema, y veremos solamente algunos conceptos bsicos y ejemplos sencillos. Definir un conjunto de Marcos Existen varias formas de crear un marco. Nosotros vamos a ver solamente una de ellas. Para crear un marco, primero hay que abrir algn documento. Puede ser uno nuevo o uno ya existente. Despus, dirigirse al men Insertar, HTML, Marcos. A travs de esta opcin puede elegirse el tipo de marco que va a crearse. Vamos a ver el marco a la Izquierda. Si pulsamos sobre Izquierda se crear un nuevo marco a la izquierda del documento actual.

Como puede ver en la imagen, aparece una lnea que divide el documento en dos. El documento de partida era uno nuevo. En este caso tendremos tres documentos: el de la izquierda, el de la derecha, y el que contiene el grupo de marcos. El de la derecha es el documento que tenamos inicialmente, que est en el marco conocido como marco padre (MainFrame).

Forinsur S.L. Centro de Formacin | Manual de Usuario

Para seleccionar el documento que contiene el grupo de marcos hay que pulsar sobre la lnea que separa los marcos. Esto solo es posible mientras dicho documento no se haya guardado.

Si en lugar de insertar un marco a la izquierda lo insertamos a la Derecha, el marco vaco aparecer a la derecha del documento original. En esta imagen puedes ver un ejemplo de marco a la derecha. Sobre un documento ya existente, menu.htm, se ha insertado un marco a la derecha. Al igual que en el caso anterior, tenemos tres documentos: el de la izquierda, el de la derecha, y el que contiene el grupo de marcos. En este caso, el documento que tenamos inicialmente es el de la izquierda,

Tcnico Especialista en Diseo, Animacin y Programacin Web

mientras que antes era el de la derecha. Por ello, en este caso el marco padre ser el de la izquierda. El marco padre siempre es el marco en el que se encuentra el documento inicial, sobre el que se han insertado el resto de marcos. Modificando un conjunto de Marcos Una vez seleccionado un marco a travs del panel Marcos, pueden establecerse sus propiedades a travs del inspector de propiedades.

Cada marco tiene asignado un nombre, que puede cambiarse a travs de Nombre de marco. El nombre no puede contener espacios en blanco. En Origen aparece el nombre del documento HTML que est contenido en el marco. En Bordes puede elegirse si aparecer o no una lnea separando el marco del resto de marcos. En el caso de que se muestre el borde, se puede especificar un color para ste a travs de Color borde. Desplaz. indica si aparecern o no las barras de desplazamiento cuando el documento del marco no pueda visualizarse completamente. Si la opcin Mismo tamao est activa, indica que los usuarios no podrn variar las medidas del marco desde el navegador. El Ancho del margen y el Alto del margen indican la separacin que habr entre el contenido del marco y sus bordes izquierdo-derecho y superior-inferior. Si lo seleccionado es todo el conjunto de marcos (la pgina de marcos), el inspector de propiedades es algo diferente.

Forinsur S.L. Centro de Formacin | Manual de Usuario

En Bordes puede elegirse si aparecer o no una lnea separando los marcos entre s y puede especificarse un color para este a travs de Color del borde. Tambin es posible establecer un grosor para el borde a travs de Ancho. El campo Columna (o Fila dependiendo del marco elegido en Seleccin Fila Col.) sirve para especificar el tamao del marco, que puede ser en Pxeles, Porcentaje (de la ventana) o Relativo (proporcional al resto de marcos). Normalmente utilizars dos marcos, uno de ellos con tamao en Pxeles, que ser el que contenga la barra de navegacin, y el otro marco con tamao Relativo, para que se ajuste a la ventana del navegante.

Utilizar conjuntos de Marcos para disear El uso ms comn de los marcos es la navegacin. Una pgina Web puede utilizar un marco para albergar el men de navegacin y otro marco para el contenido de la pgina. Dado que el men de navegacin se encuentra en un marco, los visitantes pueden hacer clic en un elemento del men y el contenido aparecer en el marco de contenido sin que cambie el men de navegacin. De este modo, el visitante podr orientarse perfectamente en el sitio. Sin embargo, los marcos pueden ser difciles de aplicar y a menudo es posible crear una pgina Web sin marcos que consiga los mismos objetivos que una pgina con marcos. Por ejemplo, si desea que la navegacin se realice en la parte izquierda de la pgina, puede dividir la pgina en dos marcos o, simplemente, incluir la navegacin izquierda en todas las pginas del sitio. La diferencia radica en que con marcos slo necesitar crear la navegacin una vez. Si decide utilizar marcos en el sitio Web, deber

Tcnico Especialista en Diseo, Animacin y Programacin Web

conocer la relacin entre los marcos y los conjuntos de marcos, pues el establecimiento de vnculos con marcos puede resultar confuso. Los marcos pueden ser una excelente herramienta para los diseadores Web, pero deben aplicarse correctamente para que funcionen. Siga los pasos que se detallan a continuacin para conseguir que la pgina Web funcione correctamente (no necesariamente en un determinado orden): Guarde todos los archivos utilizados en el sitio. Recuerde que cada marco y conjunto de marcos es una pgina HTML independiente y que es necesario guardar cada pgina. Defina las propiedades de cada marco y conjunto de marcos, incluidos sus nombres, opciones de desplazamiento y no desplazamiento, etc. Compruebe que todos los vnculos incluyen su destino de modo que el contenido vinculado aparezca en el rea correcta. Enlaces entre distintos Marcos Como ya ha visto, el contenido de un marco puede establecerse a travs del campo Origen del inspector de propiedades.

Cuando trabajamos con marcos, queremos poder cargar diferentes documentos en cada uno de ellos. El contenido de alguno de los marcos ha de ser fijo, mientras que el de otros ha de poder variar. A travs del campo Origen del inspector de propiedades, slo es posible especificar el documento que se cargar inicialmente en el marco, pero hemos de poder cambiar este documento por otro a travs de vnculos. Como recordars, en el tema de hipervnculos vimos los posibles destinos de los enlaces. Estos destinos podan ser _blank, _parent, _self, y _top. Vamos a recordar para que serva cada uno de ellos, ya que ahora que ya sabes trabajar con marcos te sern ms fciles de entender.

Forinsur S.L. Centro de Formacin | Manual de Usuario

_blank: Abre el documento vinculado en una ventana nueva del navegador. _parent: Abre el documento vinculado en la ventana del marco que contiene el vnculo o en el conjunto de marcos padre. Como ya sabes, el marco padre es el marco en el que se encuentra el documento inicial, sobre el que se han insertado el resto de marcos. _self: Es la opcin predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vnculo. _top: Abre el documento vinculado en la ventana completa del navegador, lo cual quiere decir que los marcos de la ventana desaparecern al abrir el vnculo en ella.

Adems de estos destinos para los enlaces, tambin aparecern los nombres de los distintos marcos de la pgina. Podemos aadir todos estos destinos a cualquier elemento de la pgina que contenga algn enlace, ya sea texto, una imagen, un mapa de imagen, un elemento Flash, etc. Gracias a todo esto podremos hacer que las barras de navegacin y el resto de enlaces funcionen a nuestro antojo, cargando unas u otras pginas en alguno de los marcos, en una ventana nueva, en toda la ventana, etc. Esta tarea puede resultar algo pesada, y al principio complicada, pero da muy buenos resultados finales.