Imatge de substitució (dreamweaver)

La imagen de Sustitución describe un comportamiento interactivo que se activa simplemente al pasar el cursor del mouse encima de la imagen en cuestión, es decir, cuando usted desliza por encima el cursor del mouse sobre la imagen ésta cambiará por otra imagen.

En primer lugar se necesitarán dos imágenes, una que estará en estado OFF o Apagado, la cual actuará cuando el cursor del mouse no esté encima de la imagen, la segunda imagen solo actuará en estado ON oEncendido, esto quiere decir que se hará presente siempre y cuando el cursor del mouse esté encima de la imagen con el comportamiento interactivo.

Estado OFF	Estado ON

Después de conseguir las dos imágenes necesarias para aplicar este comportamiento interactivo se necesitará ir al menú principal del programa y elegir la opciónInsertar, inmediatamente seleccione Objetos de Imagen y en el menú emergente elija Imagen de sustitución, tal como muestra la siguiente imagen.

En este instante usted deberá rellenar el cuadro de diálogo Insertar imagen de sustitución. A continuación se describirá brevemente cada campo.

Nombre de la imagen:
Servirá para tener una referencia de la imagen que presenta un comportamiento interactivo.
Imagen original:
Esta imagen será la que actuará en estado OFF
Imagen de sustitución:
Esta imagen será la que actuará en estado ON
Carga previa de imagen de sustitución :
Es importante marcar esta casilla de verificación, ya que permite que se incluya automáticamente en la carga de la página la(s) imagen(es) de sustitución (las del tipo ON), esto evita posibles demoras debido a la descarga de la imagen (del tipo ON) cuando sea oportuno (al pasar el cursor del mouse encima de la imagen de sustitución).
Texto Alternativo:
Este campo se refiere al efecto que se le inserta a las imágenes que permite mostrar un texto después de permanecer el cursor del mouse por pocos segundos encima de la imagen en cuestión. Este campo es opcional.
Al hacer clic, ir a URL:
Este campo se refiere a la inserción de un hipervínculo a la imagen. Este campo es opcional.

En la imagen anterior podrá observar que no se relleno el campo Al hacerse clic, ir a URL, simplemente porque no se tiene intención de hacer un hipervínculo aunque en algunos casos si es conveniente rellenar este campo.

Ahora bien, a pesar de no haber rellenado el último campo del cuadro de diálogoInsertar imagen de sustitución, al hacer clic en la imagen desde el programa Macromedia Dreamweaver se podrá observar en el campo Vínculo en el panel Propiedades que aparece el carácter almohadilla (#), esto se debe porqueMacromedia Dreamweaver genera el código JavaScript necesario para la creación del comportamiento interactivo Sustitución de Imagen o comúnmente llamadoRollover.

En el caso que usted intente eliminar el carácter almohadilla Macromedia Dreamweaver le hará una advertencia, en donde le indica que al eliminar elVínculo se eliminarán los comportamientos generados por el código JavaScript, esto quiere decir en pocas palabras que si usted elimina el evento generado por elVínculo, usted estará eliminando el comportamiento interactivo de Rollover, simplemente aparecerá la imagen en estado ON, no habrá cambio o sustitución alguna.

En caso que usted posea una imagen fuera de la carpeta raíz de su Sitio Actual,Macromedia Dreamweaver le hará una advertencia, en el caso que usted no le preste atención a esta advertencia es muy seguro que se genere un problema al momento de publicar su sitio en la red, esto se debe a que la imagen deja de ser accesible y se crea un vínculo roto, lo recomendable es que usted copie la imagen a la carpeta raíz de su sitio, preferiblemente en la carpeta que usted almacena todas las imágenes.

Frames 8dreamweaver)

Los marcos o frames sirven para distribuir mejor los datos de las páginas, ya que permiten mantener fijas algunas partes, como pueden ser el logotipo y la barra de navegación, mientras que otras sí pueden cambiar. Además de mejorar la funcionalidad, pueden mejorar también la apariencia. Cada uno de los marcos de una página, contiene un documento HTML individual. Por ejemplo,El marco izquierdo puede contener el documento menu.htm y el derecho el documento quienes.htm. Para poder visualizar la página de este modo, hemos tenido que abrir en el navegador el documento marcos.htm, que es la página que contiene los marcos agrupados.

Crear Frames

Existen varias formas de crear un marco. Nosotros vamos a ver solamente una de ellas.

Para crear un marco, primero hay que abrir algún documento. Puede ser uno nuevo o uno ya existente.

Después, dirigirse al menú Insertar, HTML, Marcos. A través de esta opción puede elegirse el tipo de marco que va a crearse.

Vamos a ver el marco a la Izquierda.

Si pulsamos sobre Izquierda se creará un nuevo marco a la izquierda del documento actual.

Tamany pantalles

Taules (dreamweaver)

Para insertar una tabla en un documento de Dreamweaver, llevar a término una de estas operaciones:

a) Situar el punto de inserción en el lugar de la ventana de documento donde se desea que aparezca la tabla - Insertar - Tabla

b) En la barra Insertar hacer clic en el botón Insertar Tabla de la ficha Común

c) Con el puntero del ratón arrastrar el botón Insertar Tabla desde la ficha Común en la barra Insertar hasta la posición deseada en la ventana de documento

2.- En estas tres operaciones aparecerá siempre el cuadro de diálogo Insertar tabla :

a) En el campo Filas, especificar el número de filas de la tabla

b) En el campo Columnas, especificar el número de columnas de la tabla

c) En el campo Relleno de celda, especificar el número de píxeles que habrá entre el contenido de la celta y el límite de ésta. El número predeterminado de relleno es 1 píxel. Introducir 0 para especificar que no se desea relleno

d) En el campo Espacio entre celdas, especificar el número de píxeles que debe haber entre las celdas de la tabla. El valor predeterminado es 2 píxeles. Introducir 0 para especificar que no se desea espaciado

e) En el campo Ancho, especificar el ancho de la tabla como porcentaje de la ventana del navegador o como un número de píxeles

f) En el campo Borde, especificar el ancho en píxeles del borde de la tabla. Poner 0 si no se desea que la tabla tenga borde

g) Aceptar 

MODIFICAR UNA TABLA

1.- Añadir filas y columnas

a) Hacer clic en el lugar en el que se quiere insertar una fila o una columna

b) Modificar - Tabla - Insertar filas o columnas

c) Aparece el cuadro de diálogo Insertar filas o columnas

d) Añadir un número de filas o columnas

2.- Eliminar filas y columnas

a) Hacer clic en una celda de la fila o columna que se desea eliminar

b) Elegir una de estas opciones:

Para eliminar una fila: Modificar - Tabla - Eliminar fila o Hacer clic con el botón de la derecha del ratón - Aparece el menú contextual - Tabla - Eliminar fila

Para eliminar una columna: Modificar - Tabla - Eliminar columna o Hacer clic con el botón de la derecha del ratón - Aparece el menú contextual - Tabla - Eliminar columna

3.- Combinar y dividir celdas

a) Para combinar dos celdas:

Se seleccionan con el puntero del ratón las dos celdas que se quieren combinar

Modificar - Tabla - Combinar celdas

b) Para dividir una celda o columna sencilla

Hacer clic en la celda que se quiere dividir

En el inspector de Propiedades hacer clic en el botón Dividir celda

Aparece el cuadro de diálogo Dividir celda

o En el campo Dividir especificar si la celda se divide en filas o columnas

o En los campos Número de filas o Número de columnas especificar en cuántas filas o columnas se dividirá la celda

o Aceptar

4.- Para combinar el alto de fila y el alto de tabla: Se mueve el puntero del ratón a lo largo del borde inferior de la tabla hasta que adopte la forma de selector de borde. Puede utilizarse este método para cambiar el alto de otras filas de la tabla

5.- Para cambiar el ancho de columna y el ancho de tabla.- Se mueve el puntero del ratón a lo largo de un borde de columna hasta que adopte la forma de selector de borde y se arrastra hacia la izquierda o hacia la derecha para cambiar el ancho de una columna. De forma similar se puede cambiar el ancho de toda la tabla

6.- Anidar tablas

a)Una tabla anidada es una tabla que está dentro de otra tabla

b) Para anidar una tabla en una celda de otra tabla, llevar a cabo una de estas operaciones:

Hacer clic en la celda donde se desea que aparezca la segunda tabla - Insertar- Tabla

Arrastrar el botón Insertar tabla de la categoría Común, que se encuentra en la barra Insertar, hasta la celda donde se desea insertar la segunda tabla

7.- Cortar o copiar y pegar celdas

a) Seleccionar una o más celdas de la tabla

b) Edición - Cortar o Copiar

c) Elegir con el puntero del ratón el lugar donde se desean pegar las celdas

d) Edición- Pegar

SELECCIONAR ELEMENTOS DE UNA TABLA

1.- Seleccionar toda la tabla. Llevar a cabo una de estas operaciones:

Hacer clic en la esquina superior izquierda de la tabla o en cualquier punto del borde derecho o inferior

Hacer clic en la tabla - Modificar - Tabla - Seleccionar tabla

Hacer clic en la tabla - Edición - Seleccionar todo

Hacer clic en la tabla con el botón derecho del ratón - Aparece el menú contextual - Tabla - Seleccionar tabla

2.- Seleccionar filas o columnas. Llevar a cabo una de estas operaciones:

Situar el punto de inserción en el margen izquierdo de una fila o en la parte superior de una columna - Hacer clic cuando aparezca la flecha de selección

Hacer clic en una celda y arrastrar el puntero del ratón en horizontal para seleccionar filas o en vertical para seleccionar columnas

3.- Seleccionar una o varias celdas. Llevar a cabo una de estas operaciones:

Hacer clic en una celda y arrastrar el puntero del ratón en horizontal o en vertical hasta otra celda

Hacer clic en una celda - Presionar la tecla Mayús y hacer clic en otra celda. Todas las celdas de la región rectangular quedarán seleccionadas

4.- Seleccionar un conjunto de celdas no contiguas.

Presionar la tecla Control

Hacer clic en las celdas que se quiere seleccionar 

Enllaços interns (dreamweaver)

El primer paso, como siempre es seleccionar un punto de la página. En este caso estamos seleccionando un punto para situar un anclaje, esto es un punto al que posteriormente podremos referenciar.

Una vez que lo hayamos seleccionado, deberemos pulsar en el icono anclaje de la barra común, tal como vemos en la imagen superior.

En la ventana de diálogo siguiente debemos crear un nombre de anclaje, es decir, un nombre único al que después podamos referenciar de manera sencilla, por ejemplo, “párrafo.”

Dream300064

Cuando pulsemos aceptar, la vista de diseño nos mostrara este aspecto, tranquilos, ese ancla tan bonita sólo se ve en la vista de diseño, el usuario verá la página normalmente, tal como la diseñamos.

El siguiente paso es crear el punto de enlace, es decir, marcar una palabra, frase o imagen sobre la que pulsaremos para ir al destino que ya hemos elegido.

Una vez que hemos seleccionado el texto, por ejemplo, iremos al panel de propiedades y pulsaremos sobre la opción vínculo, esta vez no introduciremos ninguna página web.

Simplemente escribiremos el nombre del anclaje precedido por el signo “#”

La opción destino podemos utilizarla tal como estamos acostumbrados.

De esta manera cuando pulsemos sobre el enlace, la página se desplazará hasta mostrarnos el punto de anclaje que hemos vinculado al enlace.

Mapa d'imatge (dreamweaver)

para insertar un mapa de imagen tenemos que seleccionar la imagen, seguidamente desde el panel Propiedades en el cuadro de texto Mapa le asignaremos un nombre ya que podemos haver mas de un mapa d'imatge 

Para crear las zonas interactivas tiene tres opciones: La herramienta zona interactiva oval , la herramienta zona interactiva rectángular y la herramienta zona interactiva poligonal .
Las dos primeras herramientas trabajan de manera similar, debe ubicarse dentro de la imagen y luego arrastrar el cursor del mousehasta que usted lo considere adecuado.
La tercera herramienta le permitirá crear zonas interactivas irregulares, para trabajar con esta herramienta en primer lugar debe ubicarse dentro de la imagen, para comenzar la zona interactiva haga click al botón izquierdo del mouse, para continuar la construcción de la zona interactiva irregular deberá dar click en las esquinas de lo será dicha zona, Dreamweaver se encargara de unir los puntos trazando una recta entre ellos. Para finalizar la zona interactiva irregular deberá seleccionar la herramienta Puntero .

Esto deveremos a anclarlo a cualquier cosa para que al seleccionarnos nos diriga directamente al enlace seleccionado

Ejercicio reticula

Documento: 230x300

a)
- farem una reticula simetrica de dos columnas una que sea 1/4 de la otra

2 páginas

b)
-Pagina asimetrica de tres columnes

4 páginas

c)

-Pagina asimetrica modulada ( guias 6x5 )

4-6 páginas


(para crear esta seleccionaremos en composición------crear guias )

( en esta ventana seleccionaremos las guias deseadas es decir 6x5)

a)

b)

c)