.  

 

 

.
.

23 / 03 / 2017

Usuarios conectados: 11

Cargando documento...

Buscar:

.

Este Sitio:

Principal

Dreamweaver

Fireworks

JavaScript

CSS

Sonido

Artículos

Links

E-ufemismos

Descargas

Historial

 

Mailing List:

Suscríbete a la lista de correo, No practico spamming y ofrece algunas ventajas.

Pulsa aquí para saber más y suscribirte.

 

Recomendados:

Tecnorama >Tutoriales Dreamweaver

 

Iframes vs. Frames

Versión para imprimir | Translate this page

Todo el mundo creo que conoce a estas alturas mi escasísimo interés por los frames debido a sus problemas tanto de uso como de programación y diseño (dificultan la navegación,impiden guardar páginas en favoritos, el usuario no sabe realmente en qué dirección se encuentra...). Sin embargo los iframes puede que me hagan cambiar en una pequeña medida.

El iframe se encuentra a medio camino entre los layers, las imágenes y los frames de toda la vida: permite insertar otra página dentro de la actual, para lo que anteriormente había que crear primero una página "contenedora" o frameset (en la que se declaraban cada uno de los frames) y su "fuente" (documento o página que debía abrirse en él).

Ahora, simplemente habrá que colocar las etiquetas <iframe>... </iframe> dentro del documento en que estemos trabajando, asignar los valores correspondientes (que luego veremos) y automáticamente tendremos insertado un frame en nuestro documento actual.

Vamos a ver un ejemplo:

Pincha aquí para ver el documento del iframe

¿Cómo se hace?
Para este iframe, solo he tenido que insertar, en el lugar donde quiero que aparezca, este código:

<iframe name="prueba" src="iframe_content.html" >
Si lees esto, tu navegador no soporta iframes (Hasta IE4 los soporta, deberías actualizarte!)
</iframe>
Donde "prueba" es el nombre del iframe (lo que nos servirá para hacer enlaces (mediante "target")al mismo: Pincha aquí para cambiar el contenido del i-frame superior

El código del enlace es:
<a href="iframe_content2.html" target="prueba">
Pincha aqui para cambiar el contenido del i-frame
</a>

 

Bueno, ahora que sabemos cómo se hacen, ¿qué otros atributos pueden tener?. Aquí mostraremos algunos de ellos, principalmente los que han mostrado total compatibilidad con Explorer y Mozilla (aunque algunos no están aceptados como HTML4)


1.- align: que podrá llevar los valores que se utilizan para alinear una imagen:

por ejemplo:

Llevaría el código:
<iframe name="prueba2" src="iframe_content.html" align="right" >
Tu navegador no soporta iframes...
</iframe>

De todas formas en algunas circunstancias es recomendable utlizar las etiquetas <div align="posicion">....</div> envolviendo al iframe, para conseguir mejor compatibilidad con NS6, sobre todo si se trata de alinear al centro.
ejemplo:

<div align="right">
<iframe name="prueba2" src="iframe_content.html">
Tu navegador no soporta iframes...
</iframe>
</div>

2.- Scrolling ( yes, no auto): Según queramos que nos aparezcan o no barras de scroll. Si no ponemos nada, tomará el valor "auto"

3.- width / height Nos permitirán indicar la altura y anchura del iframe

4.- marginwidth/marginheight: indicarán la separación de los márgenes (es decir, del borde el iframe al borde de la página cargada dentro de él.

5.-frameborder: indica el ancho del broder del iframe (igual que en los frames normales)

Estas etiquetas funcionarán correctamente en los navegadores que soportan iframes (el 99% de los existentes):

Para terminar: un ifame con casi todo lo que hemos visto: ëste es el código:

<div align="center">
<iframe name="prueba3" src="iframe_content.html" width="400" height="300" marginwidth="50" marginheight="50" frameborder="0">
tu navegador no soporta iframes
</iframe>
</div>

Y el resultado es:

 

Como último comentario: los iframes, como descendientes directos de los frames, siguen provocando los mismos malos efectos sobre la usabilidad que ya hemos comentado en numerosas ocasiones en este sitio, por lo que se recomienda, como casi siempre, utilizarlos sin pasarse.

¿Comentarios? 231, de momento. Mostrando 1 ->5

1.- That's really shdwre! Good to see the logic set out so well.

2.- To think, I was cofeusnd a minute ago.

3.- So excited I found this article as it made things much quercik! http://dzuniibse.com [url=http://hfsfabe.com]hfsfabe[/url] [link=http://rvblvifvywi.com]rvblvifvywi[/link]

4.- That's a slick answer to a chnellaging question http://mgtpbjqua.com [url=http://zpujszqd.com]zpujszqd[/url] [link=http://ahuxzdzowhf.com]ahuxzdzowhf[/link]

5.- I'm imdessrep. You've really raised the bar with that.

« Previous | 1 - 5 | 6 - 10 | 11 - 15 | 16 - 20 | 21 - 25 | 26 - 30 | 31 - 35 | 36 - 40 | 41 - 45 | 46 - 50 | Next »

Añade tu comentario



Escribe el código de la imagen superior:

:

Tutoriales Dreamweaver

-El muy buscado Menú desplegable

-¿Qué $%&$% es 'SSI'?

-Utilizar tablas de excel para actualizar tablas en html.

-Plantillas en DW MX: Regiones opcionales.

-Adaptar tablas a la ventana.

-Vista diseño para formatos no reconocidos

-Carga de imagenes en orden

-Mi primera Extensión

-Rollover remoto ('Disjointed Rollover')

-Iframes vs. Frames

-Contenido dinámico en celdas

-DW MX: Repeating Tables

-DW MX: Practica el Cloaking

-DW MX: CSS en tiempo Diseño

-Buscar y Reemplazar en Dreamweaver

-Menú dinámico

-Collaborative Dreamweaver: Design Notes and Files Panel

-Using PHP Server Formats and MySQL Dates

-Creando un Newsticker

-Generate Excel files with DWMX/PHP/MySQL (part 1)

-Manejo de fechas en PHP y MySQL

-Generate Excel files with DWMX/PHP/MySQL (part 2)

-Manejo de Fechas en consultas a MySQL

-Showing all records by default in a results page (PHP)

-Retrieving data using AHAH (1)

-Retrieving data using AHAH (2)

-Retrieving data using AHAH (3)

TECNORAMA es simplemente una página personal. No sirve ni de promoción del autor ni cosas por el estilo.
Todos los códigos, textos y tutoriales son de libre uso mientras se mencione al autor (no es mucho pedir)
Este sitio es compatible con IE6/NS6/Mozilla1.0
Para contactar, puedes enviarme un e-mail a tecnorama@hotmail.com