Marcos Flotantes

(Iframes)

Material necesario para empezar a trabajar:

       Macromedia Dreamweaver
       Materiales
      

         Autora del tutorial: Lilian´s Design

En este tutorial aprenderás:

  • Poner un marco flotante
  • Redireccionar los hipervínculos hacia el marco flotante.

REALIZACION:

En el zip de materiales hay contenida una carpeta que se llama iframes, extrae esa carpeta y cópiala en tu sitio Dreamweaver al lado de las que ya tienes allí. En ella hay contenidos estos archivos:

 

Si tu quieres construir tu página de marco flotante propia, debes tener tus gráficos y además un mínimo de 2 docuementos html para probar los hipervínculos. Si usas los míos en el zip ya viene todo el material que necesitarás pues lo que realmente queremos aprender es cómo poner un marco flotante en Dreamweaver 8.

Comenzamos estableciendo siempre las propiedades de página para el documento actual:

Luego en la barra insertar, vamos a cambiar la forma de visualizar los datos y mostraremos todas las opciones como fichas:

Bien, así es como se verá ahora. Clic en insertar tabla dentro de la ficha común y añadiremos una tabla de 1 fila x 2 columnas y un ancho medido en píxeles de 750.

En el inspector de propiedades terminamos de configurar la tabla. Alinear al centro, borde 1 y color #002850.

Situamos el puntero del ratón en la celda derecha de la tabla e insertamos una nueva tabla, esta vez de 2 filas por 1 columna y ancho de tabla 100 medido en porcentaje.

Insertamos la imagen principal en la fila superior (Imagen8_1x1) - fíjate que las imágenes van numeradas esto te ayudará para colocarlas de manera sencilla. Al insertar la imagen ves que queda alineada a la izquierda y desplaza además el borde de la tabla. Alinea la imagen a la derecha y con el puntero del ratón fija el borde de la tabla arrastrándolo y lo sueltas al lado del borde izquierdo de la imagen.

Situamos el puntero del ratón en la segunda fila e insertamos una nueva tabla en ella de 1 fila x 6 columnas, acho de tabla 100%

 

Insertamos ahora las imágenes restantes numeradas secuencialmente de menor a mayor.

Y ahora vamos al meollo de la cuestión. Vamos a ver cómo se inserta un marco flotante en Dreamweaver 8. Situamos el puntero del ratón en la celda izquierda que aún tenemos libre:

Hacemos clic en la pestaña HTML y cambiamos a vista de código. Fíjate bien donde está situado el puntero del ratón.

En el menú de la pestaña HTML elegimos la opción Marco flotante y nota como ha cambiado de manera automática el HTML del documento con una nueva instrucción añadida.

Cambiamos ahora a vista de diseño y vemos que en la celda aparece un cuadrado pequeñito.

En el selector de etiquetas, haz clic sobre la etiqueta <iframe> para seleccionarla:

Y en el grupo de paneles, haz un clic sobre el panel de Etiqueta y nota que al lado está el nombre de la etiqueta que está activa, en este caso <iframe>. Si despliegas el apartado General dentro de la pestaña atributos, ves que hay un montón de cosas que se pueden modificar:

Vamos a ir cambiando cosillas. Para rellenar solo hay que hacer un clic al lado del atributo que deseamos cambiar. Rellena tal como se muestra en la imagen: (es importante que te fijes en el nombre que le damos al marco - name ---> flotante)

Si miramos nuestra página en el navegador, veremos ahora esto:

El marco flotante como podemos apreciar se abre por defecto con la página indice.html como le hemos indicado, ahora vamos a poner hipervínculos en las estrellas. Alternaremos indice.html y quien.html para ver los cambios.

Clic en la primera estrella, y rellenamos las opciones según se muestran en la imagen. Haz lo mismo con el resto de las estrellas y en la última pones un vinculo de correo electrónico.

Ahora guardamos nuestra pagina Archivo - Guardar como y la nombras iframes.html, luego clic en F12 y la visualizamos en el navegador y esto es lo que veremos:

Mi página Web

Esto es todo. No era tan dificil, ¿verdad que no? ;)

 

Tutorial creado el 30/03/2006
Prohibida la reproducción total o parcial sin consentimiento escrito.