Tutorial

Introducción

Qué son los marcos y para qué se utilizan. Cómo insertar un marco sencillo en una página, y cómo trabajar con él es lo que ahora veremos. Los marcos -o frames- sirven para distribuir mejor los datos de las páginas, ya que permiten mantener fijas algunas partes, como pueden ser el logotipo y la barra de navegación, mientras que otras sí pueden cambiar. Además de mejorar la funcionalidad, pueden mejorar también la apariencia. Dicho de un modo sencillo, los marcos podemos decir que son paginas web dentro de otra página que las organiza de una determinada manera.

Cada uno de los marcos de una página, contiene un documento HTML individual. Por ejemplo, en la imagen inferior puedes ver una página con dos marcos. El marco izquierdo contiene el documento menu.htm y el derecho el documento monos.htm. Para poder visualizar la página de este modo, hemos tenido que abrir en el navegador el documento principal.htm, que en este caso es el contiene los marcos.

marcos

Es posible editar los documentos contenidos en los marcos desde la página que contiene el grupo de marcos. Esto facilita el trabajo, ya que es más fácil hacerse una idea de cómo quedará la página al final, cosa que no es posible si se editan individualmente cada uno de los documentos que contiene el marco.

El tabajar con marcos puede resultar una terea algo complicada, sobretodo al principio, por lo que no vamos a profundizar mucho en el tema, y veremos solamente algunos conteptos básicos y ejemplos sencillos.

Crear marcos

Existen varias formas de crear un marco. Nosotros vamos a ver solamente una de ellas. Para crear un marco, primero hay que abrir algún documento. Puede ser uno nuevo o uno ya existente.

Lo primero que hay que hacer es dirigirse al menú Insertar, a la opción Marcos. A través de esta opción puede elegirse el tipo de marco que va a crearse.

marcos

Vamos a ver el marco a la Izquierda. Si pulsamos sobre Izquierda se creará un nuevo marco a la izquierda del documento actual. Como puedes ver en la imagen, aparece una línea que divide el documento en dos. El documento de partida era uno nuevo.

frames

En este caso tendremos tres documentos: el de la izquierda, el de la derecha, y el que contiene los marcos. El de la derecha es el documento que teníamos inicialmente, que está en el marco conocido como marco padre (MainFrame).

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

Si en lugar de insertar un marco a la izquierda lo insertamos a la Derecha, el marco vacío aparecerá a la derecha del documento original. En la imagen de abajo tenemos un ejemplo de marco a la derecha.

frames

Sobre un documento ya existente, por ejemplo 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 los marcos. En este caso, el documento que teníamos inicialmente es el de la izquierda, 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.

marcos

Seleccionar marcos

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.

marcos

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 en sobre el borde que rodea a los marcos (el que aparecen en negro en la imagen).

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.

 

25 diciembre, 2014
dreamweaver

Marcos (frames) en Dreamweaver. Paso a paso.

Introducción Qué son los marcos y para qué se utilizan. Cómo insertar un marco sencillo en una página, y cómo trabajar con él es lo que […]
25 diciembre, 2014
dreamweaver

Utilizar la barra del lanzador en DreamWeaver

La barra del lanzador contiene botones que permiten abrir y cerrar diversos inspectores, paneles y ventanas. También puede ver el lanzador, un panel flotante con idénticos […]
25 diciembre, 2014
dreamweaver

Crea textos en Flash directamente desde DeamWeaver

Una forma muy sencilla de crear botones con animación para los vínculos es, con el denominado, texto flash . Le damos a Insertar > Imágenes interactivas […]
25 diciembre, 2014
dreamweaver

Utilizar la barra de herramientas en DreamWeaver

La barra de herramientas de Dreamweaver contiene botones que permiten alternar entre diferentes vistas del documento rápidamente: Código, Diseño y una tercera vista que combina las […]
25 diciembre, 2014
dreamweaver

Redireccionar a otra página o actualizar con DreamWeaver

Con esta opción se podrá redirigir la página actual o simplemente actualizar el documento al transcurrir cierta cantidad de segundos, regularmente está opción se usa para […]
25 diciembre, 2014
dreamweaver

Utilizar Menús Contextuales con DreamWeaver

Dreamweaver emplea de forma extensiva los menús contextuales, que proporcionan un método para acceder rápidamente a los comandos y las propiedades más útiles relacionados con la […]
25 diciembre, 2014
dreamweaver

Imágenes de sustitución en DreamWeaver

La imagen de Sustitución describe un comportamiento interactivo que se activa simplemente al pasar el cursor del mouse encima de la imagen en cuestión, es decir, […]
25 diciembre, 2014
dreamweaver

Validar nuestro código en DreamWeaver

Poniendo a tono nuestro programa Simplemente abra Dreamweaver MX 2004 y seleccione en el menú Edición » Preferencias (PC: Ctrl+U, MAC: Cmd+U). Seleccione la opción Accesibilidad […]
25 diciembre, 2014
dreamweaver

CSS Hojas de estilo en DreamWeaver

La idea básica del diseño web actual es separar el contenido y la estructura del estilo y la apariencia. El estilo y la apariencia estarán contenidos […]
25 diciembre, 2014
dreamweaver

Cinco pasos hacia páginas más profesionales con Dreamweaver

Cinco pasos hacia páginas más profesionales con Dreamweaver MX Dicen que un mal artesano siempre le echa la culpa a sus herramientas. Y tienen razón. No […]
25 diciembre, 2014
dreamweaver

Cómo hacer un rollover con Dreamweaver

Cómo hacer un rollover con Dreamweaver Antes de empezar debes tener dos imágenes (pueden ser JPEG o GIF) para este ejercicio. Una será la imagen original […]
25 diciembre, 2014
dreamweaver

Creando tablas con esquinas redondeadas en DreamWeaver

Creando tablas con esquinas redondeadas en Dreamweaver Mediante unas pequeñas imágenes de forma redondeada, conseguiremos este tan usado efecto de tablas con esquinas redondeadas. Este es […]
25 diciembre, 2014
dreamweaver

Cambiar el color de los enlaces con DreamWeaver

Cuando escribimos un enlace, por defecto aparece de color azul y subrayado. Como podemos ver aquí: Para que aparezca de otro color e incluso poder quitarle […]
25 diciembre, 2014
dreamweaver

Manejo de archivos con DreamWeaver

Creación de Nuevas Carpetas En caso de que usted no tenga a la vista el Panel Archivos en la parte derecha de la ventana principal del […]
25 diciembre, 2014
dreamweaver

Uso del Comando Limpiar HTML de Word con DreamWeaver

Si a usted por casualidad alguna vez se le ha ocurrido la “gran” idea de generar una página web a través del editor de textos Microsoft […]
25 diciembre, 2014
dreamweaver

Mapas de Imágenes con DreamWeaver

Cada vez que usted inserta una imagen a su documento podrá observar en la parte inferior izquierda del panel Propiedades algo similar a lo siguiente: Lo […]
25 diciembre, 2014
dreamweaver

Inserción de etiquetas meta con DreamWeaver

Las etiquetas meta suministran información sobre la página web, esta información puede ser sobre el autor del documento, la descripción de la página, palabras claves o […]
25 diciembre, 2014
dreamweaver

Botones Flash con DreamWeaver

Los Botones Flash al igual que las imágenes de sustitución describen un comportamiento interactivo, este comportamiento se activa al pasar el cursor del mouse encima del […]
25 diciembre, 2014
dreamweaver

Crear plantillas en DreamWeaver

Introducción Cada vez que deseamos crear un sitio web, tenemos que tener muy en cuenta que las páginas deben seguir un formato uniforme. La mayoría de […]
25 diciembre, 2014
dreamweaver

Comportamientos en DreamWeaver

Introducción Los comportamientos son acciones que suceden cuando los usuarios realizan algún evento sobre un objeto, como puede ser mover el ratón sobre una imagen, pulsar […]
25 diciembre, 2014
dreamweaver

Crear barra de navegación en DreamWeaver

Antes de comenzar con la creación de la Barra de navegación usted deberá tener preparadas ciertas imágenes. Para el desarrollo de esta lección se han creado […]
25 diciembre, 2014
dreamweaver

Crear un album de fotos con DreamWeaver

En esta lección usted aprenderá a Crear un Album de Fotos Web, para tal efecto, en primera instancia usted necesitará tener una carpeta que contenga las […]