Graficación y Multimedios 2018A Tema: Iframe

M en A. Gabriel Alanis Boizo

Tema: Iframe.
Objetivo.
Introducir al alumno en el conocimiento sobre la forma adecuada de mostrar el contenido de una página web dentro de
una capa a través del objeto iframe en Dreamweaver.

 Concepto de iframe.
Subtemas.  Inserción de un iframe.
 Mostrar el contenido de una página web en un iframe.

Concepto Un iframe es un objeto que se utiliza principalmente para mostrar el contenido de una página web, en un
de
segmento de otra, normalmente se insertan dentro de una capa para que se puedan organizar.
iframe.

Inserción Antes de comenzar a insertar un iframe es conveniente tener un diseño en papel de la distribución de
de un
iframe. información que debe tener la página, así como el lugar y tamaño que debe tener el iframe. A continuación se

1
Graficación y Multimedios 2018A Tema: Iframe
M en A. Gabriel Alanis Boizo

muestra el procedimiento para insertar un iframe:

a). Con la finalidad de contar con la misma distribución del escenario de trabajo de Dreamweaver y evitar
confusiones se selecciona la distribución del escenario clásico en el menú principal de la siguiente forma:

b). Para comprender la utilidad del objeto iframe, así como el procedimiento de inserción, vamos a partir de
que contamos con la página de nombre <facultad.html>, la cual tiene la finalidad de mostrar la información
que contiene la página de la UAEMex en la capa de nombre <contenido> (color blanco) al dar clic en el texto
<Objetivo>:

2
Graficación y Multimedios 2018A Tema: Iframe
M en A. Gabriel Alanis Boizo

c). Para insertar un iframe, el primer paso es dar clic dentro de la capa que lo va a contener, en este caso la
capa de color blanco, posteriormente se da clic en la opción Insertar del menú principal y se elige la opción
Etiqueta, como se muestra a continuación:

3
Graficación y Multimedios 2018A Tema: Iframe
M en A. Gabriel Alanis Boizo

d). Se despliega una ventana, de la cual en la parte izquierda se selecciona la carpeta Etiquetas HTML, del
lado derecho se despliegan las etiquetas contenidas en la carpeta, se busca y selecciona la etiqueta iframe,

4
Graficación y Multimedios 2018A Tema: Iframe
M en A. Gabriel Alanis Boizo

finalmente se da clic en el botón de Insertar, como se muestra a continuación.

5
Graficación y Multimedios 2018A Tema: Iframe
M en A. Gabriel Alanis Boizo

e). Se despliega una nueva ventana, donde se piden varios datos, los que no deben faltar son: nombre, ancho,
altura, se digitan los datos y se da clic en el botón de Aceptar, como se muestra en la parte inferior:

6
Graficación y Multimedios 2018A Tema: Iframe
M en A. Gabriel Alanis Boizo

f). En la ventana selector de etiquetas se da clic en el botón Cerrar y para saber si el procedimiento se hizo
adecuadamente se da clic dentro de la capa de nombre contenido (blanca), debe aparecer un rectángulo gris
oscuro del tamaño de la capa, como se muestra a continuación:

7
Graficación y Multimedios 2018A Tema: Iframe
M en A. Gabriel Alanis Boizo

g). Finalmente para crear el vínculo se selecciona el texto Objetivo, en panel de propiedades en el apartado
de Vínculo se digita la dirección electrónica de la página y en el apartado Destino se digita el nombre del
iframe que creamos, como a continuación se muestra:

8
Graficación y Multimedios 2018A Tema: Iframe
M en A. Gabriel Alanis Boizo

h). Ejecutamos la página presionando la tecla F12, se da clic en el texto Objetivo y la página de la UAEMex
debe mostrarse en el segmento de la capa contenido, como se muestra en la siguiente imagen:

9
Graficación y Multimedios 2018A Tema: Iframe
M en A. Gabriel Alanis Boizo

Nota: Si el iframe no aparece dentro de la capa contenido, es porque al momento de insertarlo el cursor no estaba dentro
de la capa.

10