37. Marcos

<< 36. Abrir HTML con Marcos                               38. Comportamientos_I >>

http://cursodw.papelyweb.com/37_Marcos/marco_padre.html

1/ Abrimos desde Mi_Plantilla 2/ Guardamos como marcos.html dentro de una nueva carpeta 37_Marcos, 3/ Copiamos los textos de Mi_Sitio / Guiones / 37_Marcos.txt, 4/ Pegar el texto en marcos.html, 5/ Realizar las prácticas, 6/ Enlazar entre marcos.html y galeria.html.

Marcos

Para incluir páginas dentro de otras páginas tenemos los Iframes y los Marcos. En éstos últimos tendremos un documento .html con una estructura de marcos que llamaremos “marco_padre.html” y cargaremos las páginas en sus diferentes marcos.
En esta práctica los marcos serán “marco_navegacion” y “marco_contenedor”.

papel y web

01. Crear marcos

Insertar / Html / Marcos / Izquierda (en este caso). Observamos que se ha creado un marco a la izquierda. En realidad ha creado un documento nuevo que contiene dos marcos, el de la izquierda (leftFrame) y el que contiene el documento “marcos.html” (mainFrame).

papel y web

02. Nombrar los marcos

Abrimos Ventana / Marcos. Seleccionamos el marco de la izquierda y lo nombramos como “marco_navegacion”. El marco de la derecha lo nombramos como “marco_contenedor.

papel y web

 03. Tamaño de marcos

Seleccionamos ahora el borde exterior (marco_padre) y vamos al inspector de propiedades para ver cada uno de los dos marcos. Los bordes los dejaremos en “NO” en ambos casos y las medidas en el caso de “marco_navegacion” le damos 125 px para incluir una barra de navegación. En “marco_contenedor” las medidas las dejaremos como relativo para que cuando lo visualizamos en el navegador se adapte al tamaño que necesite.

papel y web

04. Modificar marco_navegacion

Ahora iremos a “marco_navegacion” y crearemos una pequeña barra de navegación para hacer la práctica (repetimos la de 35. Iframes, y añadimos un enlace a marco.html).

papel y web

05. Enlaces a marco_contenedor

Cuando hagamos cada enlace le diremos en la casilla de destino dónde queremos que se abra el documento enlazado. Hacemos un repaso a los Destinos:

_blank Abre el documento en una nueva ventana.

_Parent Abre el documento en la ventana que contiene el conjunto de marcos, que llamaremos “marco_padre.html”

_Self Abre el documento en la misma ventana (o marco) en el que se encuentra el vínculo.

_top Abre el documento en la ventana del navegador.

_marco_contenedor Es el nombre que le hemos dado al marco derecho y desde donde se abren los enlaces de esta práctica.

_marco_navegacion Es donde se aloja la barra de navegación de esta práctica.

papel y web

06. Guardar marco_padre

Nos dirigimos a Ventana / Marcos. Seleccionamos el borde exterior y en Archivo / Guardar conjunto de marcos guardamos el documento como “marco_padre.html” en la carpeta “37_Marcos”.

papel y web

07. Guardar marco_navegacion

Ahora nos posicionamos en el marco_navegacion para guardar el documento html que hemos generado creando la barra de navegación y lo guardamos en la carpeta 37_Marcos como marco_navegacion.html

¡Ojo! una cosa son los marcos y otra la página que está contenida en el marco.

Crear las carpetas del curso

C: … / Cursos / Curso_Dreamweaver /  Curso_Final. Contiene los archivos finalizados que vamos a necesitar para completar las prácticas de curso.

C: … / Cursos / Curso_Dreamweaver /  Mi_Sitio. Es donde realizaremos las prácticas.

Si es necesario crea las carpetas que necesites. Es muy importante mantener la estructura de carpetas que recomendamos en estos apuntes, para seguir el curso sin perdidas de tiempo adicionales.

Envia un comentario

Debes ser Conectado Para publicar un comentario.