PRÁCTICA 3 DE DREAMWEAVER 8

CREACIÓN DE UNA WEB USANDO LA ETIQUETA “IFRAME”

IFRAME: El elemento IFRAME define un cuadro en línea para la inclusión de objetos externos,
normalmente documentos HTML, la ventaja de usar un iframe es que carga las paginas de
contenidos, y no descargan todo el entorno gráfico que acompaña una página, cada vez
que se descargue un contenido, por tanto el IFRAME hace mucho mas eficiente el uso de
los recursos de una red.

ESTRUCTURA:
Esta es una
pagina web
solamente con el
contenido
principal

principal.html Estas páginas por

lo general están
hechas con una
sola tabla

quienes-somos.html
500 píxeles
<iframe>

Esta paginas
deben estar
600 píxeles guardadas en el
mismo lugar de
la pagina
index.html (página principal) index.html
500 píxeles
servicios.html
Al hacer clic en los enlaces, estos cargaran
las páginas web, dentro del <iframe>. 600 píxeles

Tener en cuenta que la medida del iframe

debe ser del mismo tamaño de las paginas contactos.html
que se cargaran dentro de el iframe

EJEMPLO DE APLICACIÓN

1. Crear nuestro sitio web local (ver PRACTICA 1)

2. Crear un Archivo Nuevo HTML

Lic. Carlos Meza Vásquez 1

3. Crear el siguiente esquema como ejemplo: En nuestro ejemplo el espacio para el iframe será de
600 de anchura y 500 de altura

Ancho : 600 píseles

Alto : 500 píseles

En este
espacio se
creara el
iframe

4. Clic en la vista dividir, ubicarse dentro del espacio donde se creara el iframe, en la
vista código hacer clic donde aparece el cursor.

5. Y escribir el siguiente código:

<iframe name= “contenedor” src="principal.html" width="600" height="500" frameborder="0" scrolling="no"></iframe>

name= “contenedor”  Es el nombre del iframe

src=“principal”  Es la pagina que por defecto se cargará en el iframe
width="600"  Es el ancho del iframe
height="500"  Es el alto del iframe
scrolling="no">  Se utiliza para activar o desactivar las barras de desplazamiento de las
paginas que se cargan en el iframe (valores “auto”, “no” y “yes”)
frameborder="0"  Muestra u oculta el borde del iframe (valores “0” y “1”)

Lic. Carlos Meza Vásquez 2

6. Antes de hacer la vista previa se debe tener la pagina
principal.html, que es la página que esta configurado para que
cargue con el iframe y debe estar guardado junto a la pagina
index.html

7. Guardar todas las páginas y hacer la vista previa, nos saldrá:

8. Para quitar el margen a la pagina se debe hacer lo siguiente:

9. Abrir la pagina principal.html que es donde se cargara por defecto el iframe y hacer clic en el
menú modificar y seleccionar propiedades de página, donde en márgenes colocar 0 en las 4
casillas:

10. Guardar principal.html, y luego hacer la vista previa de la pagina index.html, la pagina
principal.html cargara sin el margen:

Lic. Carlos Meza Vásquez 3

ENLAZANDO HACIA EL IFRAME

11. Para crear los enlaces, primero se deben tener las demas páginas que se cargaran en el iframe,
como: quienes-somos.html, servicios.html y contactos.html

12. En la pagina index.html seleccionar el texto Quienes Somos

13. Clic en el menú Insertar

14. Seleccionar Hipervínculo

15. Configurar lo siguiente:

Donde:
Texto : Es el texto del enlace
Vínculo : Buscar y seleccionar la pagina que se desea cargar
Destino : Aquí se escribe el nombre del contenedor en el cual se va a
cargar la página

16. Repetir lo mismo para los otros enlaces

Lic. Carlos Meza Vásquez 4