CURSO COMPLETO DE DREAMWEAVER 8

--MEDIOS--



03 - MARCO FLOTANTE

Vamos a ver como crear un marco flotante con dreamweaver, aunque dreamweaver no dispone de una herramienta especifica para crearlo y/o modificarlo, lo podemos hacer a través del menú insertar y luego configurarlo a nuestro antojo desde el inspector de propiedades.


Abrimos la página html, que encontramos dentro de la carpeta del material.

Como vemos la página está formada por distintas imágenes, vamos a eliminar la imagen central ya que es ahí donde vamos a situar nuestro marco, para ello nos situamos encima de la imagen y damos click a suprimir:



Antes de eliminarla, nos fijaremos bien en las medidas de nuestra imagen.



Ahora le damos un color a nuestra página de acuerdo al fondo de nuestro diseño, en este caso #7E998A

Vamos a crear nuestro iframe, como ya hemos dicho anteriormente, dreamweaver, no tienen una herramienta específica de diseño, para crear un iframe, por lo que tenemos que crearlo directamente en el código.

Ahora nos aseguramos que el cursor está en el recuadro donde estaba nuestra imagen, y nos vamos al menú Insertar > Html



Nos vamos ahora a la ventana de código:



y buscamos ahí la marca del editor:



Ahí es donde debemos insertar nuestro código del iframe, para ello, sin tocar nada de la página, nos vamos a Insertar > Html > Iframe y seleccionamos marco flotante

Ya tenemos nuestro marco creado, ahora tan solo debemos modificarlo a nuestro gusto desde el inspector de etiquetas.

Pasamos a la ventana de diseño y seleccionamos nuestro iframe:



Y con él seleccionado nos vamos a nuestro inspector de etiquetas:



Lo primero que haremos será darle un nombre, para que más adelante, podemos vincular nuestros archivos en nuestro iframe.



Ahora configuradmos nuestro iframe de la siguiente forma:



Align: La alineación de nuestro iframe

Frameborder: Si queremos darle un borde especificamos aquí los pixeles que debe llevar es mismo.

Heigth: Altura que debe tener nuestro Iframe

Marginheight: Altura del margen del Iframe, si quisieramos darle un margen.

Marginwidth: Ancho del margen del Iframe.

Name: Nombre del Iframe

Scrolling: Si queremos que lleve barra desplazadora. Yo siempre pongo auto, para que solo se vea cuando la página es superior al marco.

Src: Aquí seleccionamos desde el explorardor de archivos, el documento que se abrirá, al cargar la página por primera vez.

Width: Ancho de nuestro Iframe

Con esto ya tenemos configurado nuestro iframe, para enlazar las páginas de nuesto menú al iframe, tan solo hay que darle como destino, el nombre de nuestro iframe que hayamos elegido, en mi caso Iframe, cuidado con las mayusculas y minúsculas que suelen ser la causa de muchos errores con los enlaces de los iframes.

Para terminar el ejercicio, debemos terminar la página y crear las restantes, hasta tener una web completa.



2007©By Almaweb.es

subir

Ir al menú de tutoriales de DREAMWEAVER

Todos los tutoriales son de mi completa autoría,

cualquier parecido con otros, es pura coincidencia.

Queda totalmente prohibida su reproduccion, total o parcial.

Si quieres enlazar mis tutoriales, no hay problema,

solo mandame un e-mail, para comunicarmelo.

Cualquier duda o sugerencia:

Tutoriales registrados

 

Alma Web

Design Sensation by almaweb.es

Foro Design Sensation