2.8.- Aplicar marcos. a) Creación de un marco

Transcripción

1 2.8.- Aplicar marcos. Los marcos sirven para distribuir mejor los datos dentro de las páginas ya que permiten mantener fijas algunas partes que queramos, mientras que otras si se pueden cambiar, además de mejorar la funcionalidad también ayudan a la apariencia. Se puede decir que son páginas web dentro de otra página que las organizan de una manera determinada. La mejor forma de trabajar con ellos es editar los documentos contenidos en los marcos desde la página que contiene el grupo de marcos, ya que esto nos facilita el trabajo a la hora de ver cómo quedaría la página final en Dreamweaver. Cada uno de los marcos de una página, contiene un documento HTML. a) Creación de un marco Existen varias formas de crear marcos: la primera consiste en hacerlo al crear el documento HTML en la pantalla de presentación de Dreamweaver como se muestra en la imagen de la derecha, dando clic en la opción Más. Esta es una forma simple de hacerlo utilizando los marcos predeterminados, pero que el problema es que si tenías avanzado tu trabajo, tendrías que comenzar de nuevo. Esto nos llevara a la pantalla nuevo documento, en la cual 191 Academia de Informática Aplicada 191

2 podremos elegir nuestro documento con los marcos que necesitemos seleccionandolos de en el cuadro diseño y en la parte superior derecha se nos muestra un ejemplo de como se ve el diseño seleccionado. Como podremos observar existen diferentes tipos de diseño que contienen diferentes tipos de marco, además encontramos que existen marcos elásticos, flotantes, híbridos y fijos. Los elásticos cambiaran su tamaño basados en la unidad em, los flotantes, cambiaran su tamaño basados en porcentaje y los híbridos son una combinación de porcentaje y em. Estos marcos se adaptaran a la resolución que tenga el usuario final por lo que es muy recomendable utilizarlos. Finalmente el tipo de diseño fijo, tendrá un valor absoluto en pixeles por lo cual no cambiara su tamaño y siempre 192 Academia de Informática Aplicada 192

3 estará igual, lo que podría ocasionar que algunos usuarios no pudieran apreciar bien nuestra página. Elásticos Flotantes Híbridos Fijos La segunda forma, lo que hay que hacer es abrir un documento, ya sea nuevo o uno que ya tengamos y que queramos editar. Después de eso nos vamos al menú Insertar, en la pestaña de Diseño y elegimos la opción de Marcos, se nos presentan varias opciones para insertar un marco, ya sea a la izquierda, a la derecha, arriba, etc., elegimos el que más nos convenga. 193 Academia de Informática Aplicada 193

4 Si insertamos un marco a la izquierda aparecerá una línea punteada que separa el documento en dos partes, en este momento ya tenemos tres documentos, el de la izquierda, el de la derecha y el que contiene a ambos marcos. El documento que está a la derecha es que el teníamos originalmente y se llama Marco Padre (MainFrame). Inmediatamente aparecerá un cuadro de dialogo en el que podemos asignar nombre a cada uno de los marcos agregados o bien dejar los nombres que por default le asigna Dreamweaver. Si queremos seleccionar el documento que contiene el grupo de marcos debemos hacer clic sobre la línea que divide los marcos. Esto solo es posible siempre y cuando el documento no se haya guardado. Los marcos y los conjuntos de marcos disponen de su propio inspector de propiedades. Las propiedades de marco determinan el nombre del marco, el archivo de origen, las márgenes, el desplazamiento, el cambio de tamaño y los bordes de los distintos marcos de un conjunto de marcos. Para especificar propiedades de marco: Seleccionamos un marco ya sea mediante el panel de Marcos o bien hacemos clic en un marco y presionamos la tecla Alt al mismo tiempo. Si no está activado el Inspector de propiedades, vamos al menú Ventana > Propiedades. Hacemos clic en la flecha de ampliación, situada en la esquina inferior derecha, para ver todas las propiedades. 194 Academia de Informática Aplicada 194

5 En el campo Nombre de Marco escribimos el nombre que le vamos a asignar a ese marco, este determina el nombre del marco actual que se utilizará como destino de hipervínculos y referencias de secuencias de comandos. El nombre de un marco tiene que estar formado por una sola palabra. Se admite subrayado (_), pero no guiones (-), puntos (.) ni espacios. Los nombres de marcos deben comenzar con una letra (no con un número). No debemos utilizar palabras reservadas de JavaScript (como top o navigator) para los nombres de los marcos. Las siguientes propiedades también las podemos utilizar para definirlas en nuestros marcos: Origen: Determina el documento de origen del marco. Introducimos un nombre de archivo o hacemos clic en el icono de la carpeta para examinar y seleccionar el archivo. Desplaz.: Determina si aparecerán barras de desplazamiento cuando no haya suficiente espacio para mostrar todo el contenido del marco actual. La configuración predeterminada de la mayoría de los navegadores es Automático. Mismo tamaño: Restringe el tamaño del marco actual e impide que los usuarios puedan arrastrar los bordes del marco. Siempre podemos cambiar el tamaño de los marcos en la ventana de documento; sin embargo, si está seleccionada esta opción, los usuarios no podrán cambiar el tamaño de los marcos en sus navegadores. Bordes: Controla el borde del marco actual. Las opciones posibles son Sí, No y Predeterminado. La configuración predeterminada de la mayoría de los navegadores es Sí. Un borde sólo puede desactivarse cuando todos los marcos contiguos están definidos como No o cuando están definidos como Predeterminado con el conjunto de marcos padre definido como No. Color de borde: Establece un color de borde para todos los bordes contiguos al marco actual. Ancho del margen: Establece en píxeles el ancho de los márgenes izquierdo y derecho (es decir, del espacio que hay entre el borde del marco y su contenido). Alto del margen: Establece en píxeles el alto de los márgenes superior e inferior (es decir, del espacio que hay entre el borde del marco y su contenido). Seleccionar marcos 195 Academia de Informática Aplicada 195

6 Para seleccionar los marcos del documento es necesario dirigirse al panel Marcos, que puede abrirse a través del menú Ventana. Si la opción Marcos no te aparece directamente en este menú, posiblemente esté dentro de la opción Otros. También puedes abrir el panel Marcos pulsando la combinación de teclas Mayús+F2. En el panel Marcos aparecen los marcos que contiene el documento de marcos, y se puede pasar de uno a otro pulsando sobre ellos en el panel. También puede seleccionarse la página de marcos pulsando sobre el borde que rodea a los marcos. No es necesario seleccionar los marcos para editar los documentos que éstos contengan. Si es necesario seleccionar los marcos para especificar las propiedades específicas de cada uno de ellos. b) Color de fondo de una marco Primero debemos situarnos en el punto de inserción en el marco, después seleccionamos Modificar, la opción de Propiedades de la página, en el cuadro de dialogo que aparece hacemos clic en el menú de color de fondo, seleccionamos el color y le damos aceptar. c) Establecer vínculos en un marco La única diferencia que existe entre los vínculos típicos de HTML y los de marcos es que cuando estamos trabajando en un conjunto de marcos y queremos hacer un vínculo, tenemos que precisar cuál va a ser el marco de destino. El destino es el marco en el que se abrirá el contenido vinculado. Por ejemplo, si el menú de navegación se encuentra en el marco izquierdo y se desea que el material vinculado aparezca el marco de contenido principal, se deberá utilizar destinos para todos los vínculos del menú de navegación. El destino tendrá el nombre del marco de contenido principal, por ejemplo, marco principal. Cuando el usuario haga clic en un vínculo de navegación, el contenido se abrirá en el marco principal. Si deseamos seleccionar un marco para abrir un archivo en él, debemos utilizar el menú emergente Destino en el inspector de propiedades. Se puede establecer la apertura de un archivo en un nuevo marco, sustituir información en el marco del vínculo o sustituir información en otro marco. También puede hacer que el contenido vinculado sobrescriba el marco actual (para ello, no seleccione un destino) o que aparezca en una ventana de navegador totalmente nueva. d) Establecer marcos destino Lo primero que debemos hacer es seleccionar un texto o un objeto. En el campo Vínculo del inspector de propiedades, escribimos el nombre del archivo con el que debe establecerse el vínculo o bien hacemos clic en el icono de carpeta y 196 Academia de Informática Aplicada 196

7 seleccione el archivo con el que debe establecerse el vínculo. En el menú emergente Destino, elegimos la ubicación en la que debería aparecer el documento vinculado. Es recomendable que asignemos nombres a los marcos en el inspector de propiedades, para que se nos facilite seleccionar en donde queremos que aparezca el documento que estamos vinculando. También podemos utilizar los siguientes parámetros para abrir nuestro documento: _blank abre el documento vinculado en una nueva ventana del navegador y conserva la ventana actual. _parent abre el documento vinculado en el conjunto de marcos padre del enlace. _self abre el vínculo en el marco actual y sustituye el contenido de dicho marco. _top abre el vínculo en el conjunto de marcos de nivel más alto del documento actual y sustituye todos los marcos. Practica Guiada. Ahora posiciónate en el marco principal (el de abajo) e inserta un marco izquierdo, recuerda que tendrás que cambiar la opción de marco de main frame a left frame y ponerle un título como hiciste con el marco anterior, también cambia su color de fondo a uno distinto de los otros marcos. Para que nuestro trabajo que bien guardado realizaremos el siguiente procedimiento: Abre un nuevo documento HTML en Dreamweaver y luego inserta un marco superior como se muestra en la imagen de la izquierda. Al hacerlo aparecerá un cuadro de dialogo, en el que tendremos que cambiar la opción marco de main frame por la de top frame y ponerle un título a tu marco y luego dar clic en aceptar como podrás observar en la imagen de abajo. Ahora cambia el fondo de los marcos aplicando colores diferentes para poder distinguirlos. - Posiciónate en el marco superior, luego ve al menú archivo y selecciona la opción guardar marco cómo, selecciona la ubicación donde guardaras tu marco y ponle un nombre representativo (marco_superior). 197 Academia de Informática Aplicada 197

8 - Haz lo mismo pero ahora con el marco izquierdo y el marco principal. - Una vez que guardaste el marco superior, izquierdo y principal, ve a archivo y selecciona la opción guardar todo, del cuadro de dialogo que aparece, selecciona la ubicación donde guardaras el archivo y nombra al archivo como Índex. Si realizaste bien los pasos anteriores encontraras que tienes cuatro documentos HTML, uno para cada marco y el de Índex el cual está formado por la unión de los tres marcos y en este es el que podrás trabajar y realizar los cambios que desees, solo ten cuidado de no eliminar alguno de los marcos ya que perderás su contenido. 198 Academia de Informática Aplicada 198