Poniendo zonas interactivas.

Una imagen en Dreamweaver puede tener varios vinculos, en donde en una parte de una imagen lleve hacia alguna direccion mientras que la otra parte de la misma imagen lleve a otra.

Por ejemplo:

Como puedes ver, es una sola imagen pero cada elemento lleva hacia una direccion diferente, en este caso el icono/elemento que se presione llevara al usuario a distintos destinos dentro de nuestra pagina.

Como hacerlo?

1ero:

Añadiremos la pagina que queramos poner la interactividad.

2do:

Damos click sobre nuestra imagen, inmediatamente se activaran estos botones en la barra de propiedades:

Para que es cada icono?

Herramienta puntero de zona interactiva:Cuando utilizamos esta opcion y hacemos click dentro de la imagen y sobre donde queramos crear la zona interactiva, aparecera algunos puntos, estos, los podemos agrandar/modificar.

Herramienta zona interactiva rectangular: Esta función es para crera un vinculo de manera rectangular.

Zona interactiva oval: Con este, podremos hacer una selección de manera circular.

Con esta opcion podremos hacer la selección de manera “poco comun” ya que podremos darle la forma que queramos, es como utlizar al Paint.

Da click aqui para ver el tutorial completo.

Como editar un vinculo.

Ya hicimos un vinculo pero que pasa si ya no lo queremos?

Como lo editamos o como lo borramos?

Modificar vinculos:

1ero:

Seleccionamos la imagen/texto, según sea el caso y vamos hacia “Modificar -> Cambiar vinculo”, tambien podremos presionar ctrl.+L

Nos aparecera la misma ventana de “Crear vinculos” pero con la diferencia que tiene las opciones ya completadas con la información de este, asi que solamente deberemos de cambiar la información y presionar Aceptar.

Como eliminar algun vinculo?

Esto es mas sencillo aun, solo debreas de seleccionar el texto o la imagen donde se encuentre el vinculo que queremos eliminar y vamos a “Modificar -> Quitar vinculo”

Y listo, modificamos/eliminamos nuestro vinculo.

Da click aqui para ver el tutorial completo.

Carga previa de imagenes.

Esta funcion lo que hace es “descargar” imágenes, (ojo, no son las mismas que estan en la pagina, son otras) al verse la pagina en el navegador del usuaro que este viendo en ese momento nuestra pagina.

Esto lo que hara sera que no tardara tanto en mostrar estas imágenes ya que ya estarian “descargadas”, para esto debemos de hacer click en “body”, ahí te aparecera la siguiente ventana:

En ella podras ver las siguientes opciones:

Archico de origen de imagen:

Aquí podremos seleccionar una por una las imágenes que queremos que se descarguen previamente.

Carga previa de imágenes:

Cuando hacemos el paso anterior el nombre de la imagen se vera en la lista que lleva el mismo nombre (carga previa de imágenes), si queremos poner alguna imagen mas aparte de las que ya estan solo debemos de presionar el icono:

O bien, si queremos eliminar alguna imagen debemos de seleccionarla y presionar el icono:

Y asi de facil es una carga previa de imagenes.

Da click aqui para ver el tutorial completo.

Texto en Flash.

Para poder darle una presentacion mas dinamica a nuestra pagina podemos añadir elementos flash, como botones imágenes (en tutoriales pasados explicamos como hacer esto) o tambien podemos animar el texto, como hacerlo?, te explico:

Igual que como lo hicimos en el tutorial de “Botones flash”, podremos darle una animación a nuestro texto. Lo haremos de la misma forma y el resultado podra ser:

*Que ese texto tenga un vinculo

*El texto podra ser de cualquier tamaño y tipo de letra.

*Al pasar el mouse por encima de el, cambie de color.

Haremos los mismos pasos que el tutorial “Botones flash” pero en el menú desplegable sustituiremos “Botones flash” por “Texto flash”, nos aparecera una ventana como esta:

En esta nueva ventana pondremos los valores que mas nos gusten.

Da click aqui para ver el tutorial completo.

Insertar imagenes con Dreamweaver.

Como ya hemos hablado en tutoriales pasados, los formatos mas comunes son GIF y JPEG, recordemos lo que esto significa:

Significa que son mapas bits y que a su vez son archivos mas livianos, para que?? Para que al momento de que algun usuario visite nuestra pagina, esta no tarde mucho en cargarse.

Para poder poner una imagen con Dreamweaver debemos de hacer lo siguiente:

Vamos a “Insertar -> Imagen” ..

Cuando hacemos esto, nos aparecera una ventana como esta:

Te explico para que es cada apartado:

Buscar:

Aquí, esta opcion nos permite buscar en nuestra pc la imagen que queremos poner.

Buscar en:

Esta opcion es para cuando nos aparece debajo alguna imagen (previamente seleccionada) esta, podrmos seleccionarla o cambiarla por una nueva.

Nombre:

Esta opcion es para cuando sepamos el nombre de la imagen que buscamos, asi no tendremos que dar click en las opciones de “Buscar” y “Buscar en”.

Vista previa de imagen:

Como su nombre lo indica, cuando activamos la casilla de vista previa, podremos ver la imagen seleccionada, esto evita confusiones.

Relativa a:

Con esta funcion, podremos poner si la direccion de la imagen es de algun lugar de Internet o si es de la misma pagina que estamos haciendo, bueno, mas bien, de nuestra pc.

Cuando ya tengamos seleccionada la imagen y ya hayamos dado click en aceptar nos aparecera una nueva ventana como esta:

Texto alternativo:

Aquí pondremos algun mensaje que aparecera al momento de que algun usuario pase su mouse por encima de la imagen, aparecera en un recuadro amarillo.

Descripción larga:

Esta opcion es para que pongas que, fin tiene esta imagen, mas que nada es para que te sirva como referencia.

Da click aqui para ver el tutorial completo.

Diseñando una plantilla.

Para poder hacer una plantillas debemos de seguir los siguientes pasos:

1ero:

Vamos a “Insertar -> Objetos de plantilla -> Crear plantilla” Cuando hacemos esto, nos aparecera una nueva ventana, como esta:

2do:

Pondremos el nombre que le daremos a nuestra plantilla y lo haremos en “Guardar como”, ahora seleccionamos la pagina que hemos diseñado para que la plantilla forme parte del desplegado de la “Lista sitios”

Cuando pongamos “Guardar”, la pagina con la que estamos trabajando sera ya una plantilla con el nombre asignado y con la extencion “dwt.” Ahora si, podremos empezar a crear nuestra plantilla.

3ro:

Lo que haremos a continuación sera poner los elementos que formaran la parte fija, aunque podemos tambien diseñar toda la plantilla y después seleccionar loe elementos que seran editables.Las zonas que podran modificarse en un futro deberan de marcarse como “Regiones editables” para esto tendremos que seleccionar los elementos que queramos que sean editables después y vamos a “Insertar -> Objetos de plantilla -> Region editable”, haciendo esto, aparecera una nueva ventana como esta:

4to:

Ahí deberemos de poner el nombre de la region.En la pantalla podremos ver un cuadro con bordes azules, este representa las zonas editables y todo lo que pongamos en ese cuadro seran las zonas editables

Da click aqui para ver el tutorial completo.