Dreamweaver

Imagenes

En las páginas Web suelen utilizarse tres formatos de archivos gráficos: GIF, JPEG y PNG. Actualmente, la mayoría de los navegadores sólo reconocen sin problemas los formatos de archivo GIF y JPEG. Microsoft Internet Explorer (4.0 y posterior) y Netscape Navigator (4.04 y posterior) admiten parcialmente la visualización de imágenes PNG. A menos que los destinatarios del sitio utilicen navegadores que admitan el formato PNG, utilice imágenes GIF o JPEG para conseguir una mayor compatibilidad.

Los archivos GIF (Formato de Intercambio Gráfico)utilizan un máximo de 256 colores. El formato GIF es el mejor para mostrar imágenes de tonos no continuos o imágenes con grandes áreas de colores planos, como barras de navegación, botones, iconos, logotipos y otras imágenes con colores y tonos uniformes. Puede crear GIF con fondos transparentes, GIF entrelazados que se enfoquen lentamente a medida que se cargue una imagen en el navegador y GIF animados, que son varios GIF guardados en un solo archivo.

El formato de archivo JPEG (Grupo Conjunto de Expertos Fotográficos)es el mejor para imágenes fotográficas o de tonos continuos, ya que puede contener millones de colores. Los archivos JPEG suelen ser más grandes que los archivos GIF y PNG. Cuando aumenta la calidad de un archivo JPEG, también aumenta su tamaño y el tiempo que tarda en descargarse. A menudo es posible conseguir un equilibrio adecuado entre la calidad de la imagen y el tamaño de archivo comprimiendo el archivo JPEG.

El formato de archivo PNG (Grupo de Redes Portátiles) es un sustituto del formato GIF sin patente que incluye soporte para imágenes con color indexado, escala de grises y color verdadero, además de soporte de canal alfa para transparencias. PNG es el formato de archivo nativo de Macromedia Fireworks.

Los archivos PNG conservan toda la información original de capas, vectores, colores y efectos (por ejemplo, de sombra), así como todos los elementos que se pueden editar plenamente. Los archivos se deben guardar con la extensión .png para que Macromedia Dreamweaver puedareconocerlos como tales.

Puede insertar imágenes GIF, JPEG y PNG en los documentos de Dreamweaver. Además de insertar una imagen en una página, también puede insertarla en una tabla, un formulario o una capa.

Conforme añada imágenes, podrá seleccionarlas y modificarlas directamente en la ventana de documento. Por ejemplo, puede utilizar el inspector de propiedades para añadir vínculos a una imagen, añadir un borde a su alrededor, establecer su tamaño, añadir espacio alrededor de ella y establecer su alineación. Para crear gráficos interactivos, como imágenes de sustitución, barras de navegación o mapas de imagen, utilice los comportamientos de Dreamweaver.
Además de insertar imágenes en una página, puede establecer una imagen como fondo de la página.

Insertar una imagen

Al insertar una imagen en un documento de Dreamweaver, el programa genera automáticamente una referencia al archivo en el código HTML. Para asegurarse de que esta referencia es correcta, el archivo de imagen deberá estar en el sitio actual. Si no lo está, Dreamweaver le preguntará si desea copiar el archivo en la carpeta raíz.

Atributos:

Definición de propiedades de imagen

El inspector de propiedades de imagen permite establecer las propiedades de una imagen. Si no ve todas las propiedades de imagen, haga clic en la flecha de ampliación situada en la esquina inferior derecha.

Ver gráfico a tamaño completo

1. En el cuadro de texto situado bajo la imagen en miniatura, introduzca un nombre de modo que pueda hacer referencia a la imagen cuando utilice un comportamiento de Dreamwe
2. Seleccione Ventana > Propiedades para ver el inspector de propiedades para una imagen seleccionada.
3. aver (como Intercambiar imagen) o cuando utilice un lenguaje de creación de scripts como JavaScript o VBScript.
4. Defina cualquiera de las opciones de imagen.

   An (Ancho) y Al (Alto)

   El ancho y el alto de la imagen en píxeles. Dreamweaver actualiza automáticamente estos cuadros de texto con las dimensiones originales de la imagen al insertar una imagen en una página.

   Si establece valores de An (Ancho) y Al (Alto) que no se corresponden con el ancho y el alto reales de la imagen, es posible que ésta no se muestre correctamente en el navegador. Para restaurar los valores originales, haga clic en las etiquetas de los cuadros de texto An (Ancho) y Al (Alto), o bien haga clic en el botón de restablecimiento del tamaño de la imagen situado a la derecha de los cuadros de texto An y Al al introducir un valor nuevo.

   Nota: Puede cambiar estos valores para establecer la escala del tamaño de visualización de esta instancia de imagen, aunque no por ello se reducirá el tiempo de descarga, ya que el navegador descarga todos los datos de la imagen antes de asignarle una escala. Si desea reducir el tiempo de descarga y conseguir que todas las instancias de una imagen tengan el mismo tamaño, utilice una aplicación de edición de imágenes.

   Origen

   Especifica el archivo de origen para la imagen. Haga clic en el icono de carpeta para localizar el archivo de origen o escriba la ruta correspondiente.

   Vínculo

   Especifica un hipervínculo para la imagen. Arrastre el icono de señalización hasta un archivo del panel Archivos, haga clic en el icono de carpeta para buscar y seleccionar un documento del sitio o escriba el URL.

   Alinear

   Alinea una imagen y texto en la misma línea.

   Alt

   Especifica el texto alternativo que aparecerá en lugar de la imagen en los navegadores que sólo admiten texto o en aquéllos configurados para descargar las imágenes manualmente. Para usuarios con deficiencias visuales que usan sintetizadores de voz con navegadores que sólo admiten texto, el texto se reproduce en voz alta. En algunos navegadores, este texto también aparece al situar el puntero sobre la imagen.

   Mapa y Herramientas de zona interactiva

   Permiten asignar una etiqueta y crear un mapa de imagen en el lado del cliente.

   Espacio V y Espacio H

   Añaden espacio, en píxeles, a los lados de la imagen. Espacio V añade espacio en la parte superior e inferior de una imagen. Espacio H añade espacio a la izquierda y la derecha de una imagen.

   Destino

   Especifica el marco o la ventana donde se cargará la página vinculada. (Esta opción no está disponible cuando la imagen no está vinculada a otro archivo.) En la lista Destino figuran los nombres de todos los marcos del conjunto de marcos actual. También puede seleccionar estos nombres de destino reservados:

   • _blank carga el archivo vinculado en una ventana de navegador nueva y sin nombre.

   • _parent carga el archivo vinculado en el conjunto de marcos padre o en la ventana del marco que contiene el vínculo. Si el marco que contiene el vínculo no está anidado, el archivo vinculado se cargará en la ventana completa del navegador.

   • _self carga el archivo vinculado en el mismo marco o ventana que el vínculo. Este destino es el predeterminado, por lo que normalmente no es preciso especificarlo.

   • _top carga el archivo vinculado en la ventana completa del navegador, quitando así todos los marcos.

   Borde

   El ancho en píxeles del borde de la imagen. La configuración predeterminada es sin borde.

   Edición

   Inicia el editor de imágenes que ha especificado en las preferencias de editores externos y abre la imagen seleccionada.

   Edición de la configuración de imagen

   Abre el cuadro de diálogo Vista previa de imagen y le permite optimizar la imagen.

   Recorte

   Recorta el tamaño de una imagen, con lo que se eliminan las áreas no deseadas de la imagen seleccionada.

   Volver a muestrear

   Muestrea de nuevo una imagen cuyo tamaño se ha cambiado, lo que mejora su calidad en su nuevo tamaño y forma.

   Brillo y contraste

   Ajusta el brillo y el contraste de una imagen.

   Perfilar

   Ajusta la intensidad de una imagen.

   Restablecer tamaño

   Restaura los valores de An (Ancho) y Al (Alto) para devolver el tamaño original a la imagen. Este botón aparece a la derecha de los cuadros de texto An (Ancho) y Al (Alto) cuando se ajustan los valores de la imagen seleccionada.

Edición de los atributos de accesibilidad de una imagen en el código

Si ha insertado los atributos de accesibilidad de una imagen, puede editar dichos valores en código HTML.

1. En la ventana de documento, seleccione la imagen.
2. Siga uno de estos procedimientos:

   • Edite los atributos de imagen apropiados en la vista Código.

   • Haga clic con el botón derecho del ratón (Windows) o mantenga pulsada la tecla Control y haga clic (Macintosh) y, a continuación, seleccione Editar etiqueta.

   • En el inspector de propiedades, edite el valor de Alt (Alternativo).

   Insertar Imagenes

Al insertar una imagen en un documento de Dreamweaver, se genera una referencia al archivo de imagen en el código HTML. Para asegurarse de que esta referencia es correcta, el archivo de imagen deberá estar en el sitio actual. Si no lo está, Dreamweaver le preguntará si desea copiar el archivo en el sitio.

Asimismo, las imágenes se pueden insertar de forma dinámica. Las imágenes dinámicas son aquellas que cambian con frecuencia. Por ejemplo, en los sistemas de rotación de rótulos publicitarios es necesario seleccionar de forma aleatoria un único rótulo de una lista de posibles rótulos y, después, mostrar dinámicamente la imagen del rótulo seleccionado cuando se solicite una página.

Tras insertar una imagen, puede definir atributos de accesibilidad de etiqueta de imagen que los lectores de pantalla pueden leer para usuarios ciegos. Estos atributos se pueden editar en el código HTML.

Para ver un tutorial sobre la creación de vínculos, consulte www.adobe.com/go/vid0148_es.

1. Coloque el punto de inserción en el lugar de la ventana de documento en el que desea que aparezca la imagen y, a continuación, siga uno de estos procedimientos:

   • En la categoría Común del panel Insertar, haga clic en el icono Imagen .

   • En la categoría Común del panel Insertar, haga clic en el menú Imágenes y seleccione el icono Imagen. Con el icono Imagen visible en el panel Insertar, puede arrastrar el icono a la ventana del documento (o a la ventana de visualización de código, si está trabajando en el código).

   • Seleccione Insertar > Imagen.

   • Arrastre una imagen desde el panel Activos (Ventana > Activos) hasta la posición deseada de la ventana de documento. A continuación, siga con el paso 3.

   • Arrastre una imagen desde el panel Archivos hasta la posición deseada de la ventana de documento. A continuación, siga con el paso 3.

   • Arrastre una imagen desde el escritorio hasta la posición deseada de la ventana de documento. A continuación, siga con el paso 3.

2. En el cuadro de diálogo que aparece, siga uno de estos procedimientos:

   • Seleccione Sistema de archivos para elegir un archivo de imagen.

   • Seleccione Fuente de datos para elegir un origen de imagen dinámica.

   • Haga clic en el botón Sitios y servidores para elegir un archivo de imagen en una carpeta remota de uno de los sitios de Dreamweaver.

3. Busque y seleccione el origen de imagen o contenido que desee insertar.

   Si está trabajando en un documento que no está guardado, Dreamweaver genera una referencia con la estructura file:// para el archivo de imagen. Al guardar el documento en cualquier lugar del sitio, Dreamweaver convierte la referencia en una ruta relativa al documento.

   Nota: Al insertar imágenes, se puede utilizar una ruta absoluta a una imagen que se encuentra en un servidor remoto (es decir, una imagen que no está disponible en la unidad de disco duro local). No obstante, si tiene algún problema de rendimiento al trabajar, le sugerimos que desactive la visualización de la imagen en la vista Diseño anulando la selección de Comandos > Mostrar archivos externos.
4. Haga clic en Aceptar. Aparece el cuadro Atributos de accesibilidad de la etiqueta de imagen si se ha activado el cuadro de diálogo en Preferencias (Edición > Preferencias).
5. Introduzca los valores en los cuadros de texto Texto alternativo y Descripción larga y haga clic en Aceptar.

   • En el cuadro de diálogo Texto alternativo, escriba un nombre para la imagen o una breve descripción. El lector de pantalla lee la información introducida en dicho cuadro. Debe limitar la entrada a alrededor de 50 caracteres. Si desea introducir descripciones más largas, puede proporcionar un vínculo en el cuadro de texto Descripción larga, a un archivo que contenga más información sobre la imagen.

   • En el cuadro Descripción larga, escriba la ubicación de un archivo que aparezca cuando el usuario haga clic en la imagen o en el icono de carpeta para desplazarse hasta el archivo. Este cuadro de texto proporciona un vínculo a un archivo con el que está relacionado u ofrece más información acerca de la imagen.

   Nota: Puede completar uno o ambos cuadros de texto, en función de sus necesidades. El lector de pantalla lee el atributo Texto alternativo de la imagen.
   Nota: Si presiona Cancelar, la imagen aparece en el documento, pero Dreamweaver no le asocia etiquetas o atributos de accesibilidad.
6. En el inspector de propiedades (Ventana > Propiedades), establezca las propiedades de la imagen.

Editar Imagenes

ahora nos trae una nueva capacidad, la inclusión de un editor de imágenes "on the fly" que nos da la capacidad de editar. modificar, optimizar y añadir ciertos efectos todo dentro del mismo entorno.

Para empezar quiero aclarar que la intención de Dreamweaver jamas ha sido la de un editor de imágenes, para eso esta el evolucionado y modificado "Fireworks MX 2004", sin embargo, un software tan potente como Fireworks MX 2004 no justifica ser abierto para, por ejemplo, cortar un trozo de imagen, asi que para optimizar tiempo y trabajo, ahora Dreamweaver lo hará por nosotros

Dreamweaver MX 2004 (De ahora en adelante dreamweaver no más) tiene las siguientes capacidades graficas :

1. Sharpen (Perfilar)
   
2. Ajuste de brillo y contraste
3. Crop (Corte)
   
4. Optimización de imagen (Plugin de Fireworks para optimizar)
5. Ajuste del tamaño de la imagen (Plugin de Fireworks para tamaño)
6. Y por supuesto, editar en Fireworks

Asi que iniciamos y nuestra foto base sera esta divertida fotografia de un evento de Macromedia (Bueno, de divertida no tiene mucho)

Mapas Sencibles

Un mapa de imagen es una imagen que ha sido dividida en regiones o "zonas interactivas"; cuando se hace clic en la "zona interactiva", se ejecuta un vínculo.

@

También se puede emplear la totalidad de la imagen como "inicio" de un vínculo (rellenando el campo Vincular del Inspector de propiedades de Imagen)

Para crear un mapa de imagen

En Dreamwever los mapas de imagen se configuran en el propio Inspector de propiedades:

1. Seleccionar la imagen a la que queremos añadir el "mapa sensible"
   
2. Hacer clic en la flecha de ampliación del Inspector de propiedades, para ver todas las propiedades.
   
3. Escribir el nombre del mapa en el campo Mapa. Si se utilizan varios mapas de imagen en el mismo documento, asegurarse de que se asigna un nombre exclusivo a cada mapa.
4. Para definir las áreas sensibles, emplear las tres herramientas de trazado: rectangular, elíptica o poligonal.
   El icono en forma de flecha es el cursor para seleccionar mapas ya creados y modificar su forma o tamaño.
   Cuando se selecciona una zona interactiva, aparece el Inspector de Zonas Interactivas en lugar del Inspector de propiedades.
5. En el Inspector de Zonas Interactivas, se puede configurar un vínculo para cada una de las zonas sensibles que hayamos introducido en la imagen y una etiqueta alternativa.

   Cuando se copia una determinada imagen de un documento a otro, las zonas interactivas asociadas a dicha imagen tambien se copiarán

   Se pueden utilizar las teclas de flecha para mover una, o varias, zonas interactivas a la vez.

   Se puede elegir menú Modificar> Capas y zonas interactivas para dimensionar o alinear varias zonas interactivas entre sí (de modo similar a las capas). Si hay dos zonas interactivas solapadas, la zona interactiva situada delante será la dominante.

Imagenes Rollover

Dentro de Dreamweaver (3, 4 ó MX), vamos al área de menú principal hasta encontrar la palabra INSERT. Dentro de INSERT nos movemos a INTERACTIVE IMAGES y ahí escogemos ROLLOVER IMAGE.

1. Comenzaremos asignándole un nombre a nuestro “rollover”. De esta manera nuestro documento estará mas organizado.
2. ORIGINAL IMAGE va la imagen inicial del “rollover”. Esta es la imagen que se mostrará cuando no este el cursor del mouse o ratón sobre ella.
3. En ROLLOVER IMAGE va la imagen que cambiará cuando el curso se coloque sobre la imagen.
4. Para terminar verificamos que este marcado donde dice PRELOAD ROLLOVER IMAGE.

Opcional. También tienes la opción de añadirle un texto alterno al “rollover”, este se activa cuando el cursor se mantiene varios segundos sobre la imagen. Y además de una dirección web para cuando el usuario de click sobre la imagen.

Ejemplo del “rollover”

Botones Flash

Los Botones Flash al igual que las imágenes de sustitución describen un comportamiento interactivo, este comportamiento se activa al pasar el cursor del mouse encima del botón. En esta lección usted aprenderá lo siguiente:

Para proceder a insertar un Botón Flash usted deberá dirijirse al menú principal del programa y seleccionar la opción Insertar, inmediatamente seleccione la opción Media y a continuación elija del menú emergente Botón Flash, se muestra el resumen de esta operación a continuación.

En este instante, usted podrá apreciar el cuadro de dialogo Insertar botón Flash, se procederá a describir de manera breve cada campo que compone este cuadro.

Hojas de estilo CSS

Definición

La idea básica del diseño web actual es separar el contenido y la estructura del estilo y la apariencia. El estilo y la apariencia estarán contenidos en las CSS, Hojas de Estilo en Cascada.

Si usted no logra visualizar el panel Diseño en la parte derecha de la ventana principal del programa, proceda a dirigirse al menú principal del programa y seleccione la opción Ventana, posteriormente seleccione Estilos CSS, puede abreviar todo este proceso presionando la combinación de teclas Mayús + F11.

Inmediatamente se desplegará el panel Diseño y se mostrará el contenido que pueda existir en la lengüeta Estilos CSS.

Si usted aún no posee ninguna hoja de estilo CSS asociada a la página actual en la lengüeta Estilos CSS no se mostrará ninguna información.

Usted podrá observar cuatro iconos en la parte inferior derecha del panel Diseño. A continuación se explicará la función de cada uno de ellos.

Hojas de estilo CSS internas

Se va a crear un nuevo estilo en el documento actual en base a la etiqueta h1 (encabezado 1).

Hay dos formas de dar de alta una nueva regla CSS, una a través del panel CSS y otra desde el menú texto tal como se indica en las figuras 7.32 y 7.33

Figura 7.32. Creación de una nueva regla CSS desde el panel CSS.

Figura 7.33. Creación de una nueva regla CSS desde el menú texto.

Figura 7.34. La regla se aplicará a los encabezados de nivel 1.

Figura 7.35. Se indica que la regla CSS se defina en el documento actual.

Figura 7.36. En la categoría Tipo se establece como propiedad el tamaño “más grande”

Figura 7.37. En la categoría Tipo se selecciona la opción de pasar el texto automáticamente a mayúsculas. Se observa que existen otras opciones de formato.

Figura 7.38. En la categoría Fondo se cambia el color de fondo.

Figura 7.39. En la categoría “Fondo” se selecciona el formato de posición horizontal centrada. Se observa que existen otras opciones de formato.

Figura 7.40. En la ficha “Borde” se indica que presente un borde alrededor del elemento en altorrelieve. Se observa que existen otras opciones de formato.

Figura 7.41. En la ficha “Posición” se indica que será del tipo relativa, es decir, cambiará en proporción al tamaño de la ventana. Se observa que existen otras opciones de formato.

Figura 7.42. En la ficha “Extensiones” se podrían forzar saltos de página pero para la cabecera que se está definiendo no se va a utilizar.

Figura 7.43. Aspecto que presenta el título de tipo h1 después de aplicar el estilo CSS.

Figura 7.44. En el panel CSS aparecerá el estilo creado. En el tipo de vista seleccionado por defecto aparecerán sólo las propiedades establecidas.

Figura 7.45. En el panel CSS se pueden elegir otros dos tipos de vista; “Mostrar vista de categoría” y “Mostrar vista de lista”.

Figura 7.46. Si se pulsa dobble click sobre el estilo creado se podrán editar de nuevo las opciones en la ventana de definición de reglas.

Hojas de estilo CSS externas.

En este caso se va a crear un estilo en una página distinta y después se aplicará a un documento.

Figura 7.47. Se abre un documento nuevo.

Figura 7.48. Se crea una página básica de tipo “CSS”.

Se siguen los pasos indicados en las figuras 7.33 al 7.42 para definir un estilo que se aplicará al texto con formato encabezado 1.

Figura 7.49. Se puede observar a la izquierda el código generado, está en el formato de regla indicado al principio de este tema. A la derecha se observa el panel de Estilos CSS con las propiedades definidas.

Figura 7.50. Se selecciona Guardar Archivo.

Figura 7.51. Al ser un documento CSS se guardrá con la extensión “.css”

Figura 7.52. Se abre el documento que se va a basar en la hoja CSS recién creada.

Figura 7.53. Se selecciona arriba a la derecha del panel CSS y se seleccciona la opción para adjuntar una hoja de estilos.

Figura 7.54. Aparece este diálogo y hay que pinchar en “examinar”

Figura 7.55. Se selecciona la plantilla a aplicar.

Figura 7.56. se puede obtener la vista previa del documento aplicándole la hoja de estilos.

Figura 7.57. Se pulsa en “aceptar” y se puede observar cómo queda finalmente el documento con la hoja de estilos externa aplicada. En el panel CSS aparece ahora el documento css con los estilos que contiene para verlos e incluso modificarlos.

Creando Estilos

Los Estilos en cascada, estilos css, nos permiten controlar los parámetros de estilo para todos los documentos que forman un sitio web. Esto es así cuando los estilos css los definimos en una hoja externa, por otro lado, la forma más rentable de trabajar esta herramienta. Definir así los estilos de un sitio le da una coherencia y sensación de unidad que, de otro modo, es difícil de conseguir. Por otro lado, si un estilo no nos gusta una vez ya realizado todo el sitio, bastará modificar el estilo concreto en esa hoja, para que se modifique en todos los documentos que formen el sitio y que estén vinculados con esa hoja de estilos.

Para crear una hoja de estilos css, teniendo abierto cualquier documento del sitio, le damos a Ventana > Estilos CSS

El CSS (Hoja de Estilo en Cascada, Cascading Style Sheet para los de colegio inglés) ha sido el gran alivio para los que hemos tenido que maquetear una gran cantidad de archivos. Separa el diseño de la maquetación, no van unidos. Es un simple indicador al browser que le informa 'Hey socio, esas letras las necesito rojas por favor y más todas las que le diga'. Afortunadamente si quiero cambiar las instrucciones de ese indicador, lo hago sólo una vez y no las 235 veces. Pero hay más.

CSS tiene grandes posibilidades de cambiar la apariencia de un sitio. Entre los trucos más solicitados están: el de cambiar las características de los links (sacarle el subrayado por ejemplo); hacer que en un documento existan todos los tipos de links que yo quiera; jugar con las imágenes de fondo; cambiar la apariencia de objetos de formularios; cambiar cursores; agregar filtros; cambiar características de los elementos de HTML, entre otros. Ustedes deben ser los descubridores: acá va un pequeño empujón.

Vamos a la práctica. Dreamweaver > Windows > CSS Styles. O Shift+F11 es más sencillo. Abre esa paleta y aparecerá por defecto la palabra none y unos iconos abajo a la derecha. Básicamente Dreamweaver da la posibilidad de vincular un nuevo estilo CSS desde un archivo (archivo de extensión .css que puedes abrir desde el block de notas y desde el que puedes tener todos los estilos que necesites), crear un nuevo archivo, editarlo, crear estilos sólo para esa página (incrustados) y además editarlos.

Para crear una hoja de estilos css, teniendo abierto cualquier documento del sitio, le damos a Ventana > Estilos CSS

En la columna de la derecha se abrirá:

Aplicando estilos

Biografia

http://ocw.innova.uned.es/mm2/dw/contenidos/html/unidad2/temas/tema007.html