Tratamiento de imágenes en Dreamweaver

1. DREAMWEAVER
Eliana Navarro Julio
Grado 11.

2. ¿QUÉ ES DREAMWEAVER?
 Dreamweaver es la herramienta más avanzada para el
diseño de páginas Web.
 Dreamweaver es posible diseñar sitios Web , desarrollar
aplicaciones y mantenerlas.
 Dreamweaver proporciona herramientas visuales de
diseño que permiten agregar fácilmente elementos
innovadores y prácticos a las páginas Web, además cuenta
con funciones para el desarrollo de aplicaciones que
permiten crear aplicaciones Web dinámicas.

3. OBJETIVOS
Objetivo General
 Planificar, diseñar y administrar un sitio Web utilizando Dreamweaver MX.
Objetivos específicos
 Planificar y definir la estructura de un sitio Web.
 Utilizar las principales herramientas de Dreamweaver en el diseño de páginas Web.
 Aprender a publicar, mantener y administrar un sitio Web.

4. METODOLOGÍA
 18 horas presenciales. Tendremos alrededor de 12 sesiones de clases. (1,5
horas).
 Lecturas previas: como introducción al tema que se trabajará en la clase.
 Clases: 12 reuniones de 1,5 horas cada una donde se resolverán las dudas y
dificultades que se presenten con las lecturas previas, se desarrollarán
algunos temas, y se realizarán ejercicios de aplicación con el fin de afianzar
los conocimientos adquiridos.
 Prácticas: Al final de cada clase se realizará un ejercicio de aplicación de las
temáticas tratadas aquí y en la lecturas previas.

5. SEGUIMIENTO Y EVALUACIÓN
 La evaluación es continua y se basa en el conjunto de actividades, ejercicios y
trabajos independientes, que se llevan a cabo en Las diferentes clases.
 Calendario de evaluaciones y actividades
 En la primera sesión se propondrá una actividad que deberá ser realizada a
medida que avanza el curso y entregada en la última clase del periodo.
 Clase 5: Entregar el esquema para el sitio web a realizar.
 Valor: 40% de la evaluación total.
 Clase 10: Entrega del trabajo final . Valor: 60% de la evaluación total.
 Es imprescindible superar ésta evaluación para poder aprobar el curso
satisfactoriamente.

6. EL SITIO WEB Y EL ÁREA DE TRABAJO
 El área de trabajo de Dreamweaver contiene elementos como el documento,
la barra de herramientas y los páneles entre otros, los cuales permiten
agregar, modificar y eliminar elementos en nuestro sitio web.
Objetivos
 Identificar los elementos que componen el área de trabajo de Dreamweaver.
 Identificar las características de un sitio web.

7. LECTURA
 ¿Qué es un sitio Web?
Área de trabajo

8.  Archivos electrónicos y páginas Web.
 Son accesibles mediante el protocolo HTTP de Internet. Este conjunto de
páginas tiene como objetivo el desarrollo de algún tema, prestar servicios o
entregar contenidos asociados al entorno de la página.

9. Un Sitio
 El sitio local es una estructura que se establece
en el computador personal para que contenga
todas las carpetas, activos y archivos del sitio
Web. La carpeta raíz local del sitio debe ser única
para cada sitio.

11. Creación de un Sitio
El procedimiento para crear un sitio nuevo es el siguiente:
1. Elija en el menú Sitio la opción Nuevo sitio.
 Seleccione la pestaña Avanzadas.
En la ventana que aparece (Definición de sitio) estará seleccionada
la categoría Datos locales.

13. Planificación del Sitio
 Esta primera actividad consiste en realizar la planificación del sitio, para
ello:
 Defina el nombre del sitio.
 Determine los objetivos del sitio.
 Defina la estructura que tendrá la información que se va a publicar en su
sitio.
 Realice un boceto que muestre la forma como se desplegarán los
contenidos que van a ser publicados.

14. HOJAS DE ESTILOS, IMÁGENES Y
MARQUESINAS
Las hojas de estilo permiten dar un formato homogéneo y actualizar los
elementos de una página Web en forma automática. Se usan principalmente para
especificar el formato de texto y para definir atributos de imágenes, tablas,
vínculos, etc.
Objetivos:
 Aplicar hojas de estilo a una página.
 Importar imágenes y modificar sus propiedades.
 Aplicar marquesinas a una página.

15. Hojas de estilos
 Plantillas que permiten cambiar el formato de presentación de cualquier
etiqueta de HTML.
 Controlar todos los elementos de la presentación de un documento HTML:
márgenes de página, espaciado entre párrafos, tamaños y tipos de letra, color
y fondos, etc.
 Atributos de etiquetas.

16. Fuente - Font
Fuente - Font
Nombre del Atributo Descripción Posibles Valores Ejemplos
color
Sirve para indicar el
color del texto. Lo
admiten casi todas las
etiqetas de HTML.
valor RGB o nombre
de color.
color: #009900;
color: red;
font-size
Sirve para indicar el
tamaño de las fuentes
de manera más rígida
y con mayor exactitud.
xx-small | x-small |
small | medium |
large | x-large | xx -
large Unidades de CSS
font-size:
12pt; font-size:
x-large;

17. PARRAFOS - TEXT
PARRAFOS - TEXT
Nombre del
Atributo
Descripción Posibles Valores Ejemplos
line -height
El alto de una línea,
y por tanto, el
espaciado entre
líneas. Es una de
esas características
que no se podian
mofificar utilizando
HTML.
normal y unidades
CSS
line-height: 12px;
line-height: normal;

18. ¿Qué se definen las Hojas de Estilos?
 El modo de funcionamiento de las Hojas de Estilos en Cascada (CSS) consiste
en definir, mediante una sintaxis especial, la forma de presentación que se le
aplicará a:
 Un sitio Web entero, de modo que se puede definir la forma de presentación
de todo el sitio Web de una sola vez.
 Un documento HTML o página Web.
 Una porción del documento.
 Una etiqueta en concreto.
 Creación de una Hoja de Estilos.

19. Cómo crear una hoja de estilos
 se deben seguir los siguientes pasos:
 Abrir el panel Estilos. Ventana > Estilos CSS.
 Dar click en la opción Nuevo estilo del panel Estilos CSS.
 Asignamos nombre y tipo de estilo.

20. •Crear estilo personalizado: también llamados estilos de clase, le permiten
configurar atributos de estilo a cualquier rango o bloque de texto.
•Redefinir etiqueta HTML: redefinen el formato de una determinada etiqueta,
como h1. Cuando se crea o cambia un estilo CSS para la etiqueta h1, todo el texto
formateado con dicha etiqueta se actualiza inmediatamente.
Usar selector CSS: redefinen el formato de una determinada combinación de
etiquetas (por ejemplo, td h2 se aplica cada vez que aparece un encabezado h2
dentro de una celda de tabla) o de todas las etiquetas que contienen un atributo id
específico (por ejemplo, #miEstilo se aplica a todas las etiquetas que contienen el
par atributo-valor ID=“miEstilo”).

22. Aplicar estilos
 Para aplicar un estilo CSS se debe seleccionar el objeto al cual se le quiere
aplicar el estilo y seleccionar en el panel "Estilos CSS" el estilo que se quiere
aplicar.
 O Hacemos clic derecho, seleccionar Estilos CSS y luego seleccionar el estilo
que se desea aplicar.

23. Imágenes
Insertar una imagen
1.Sitúe el punto de inserción en el lugar de la ventana de documento donde
desea que aparezca la imagen y, a continuación lleve a cabo una de estas
operaciones:
•Elija Insertar > Imagen.
•Haga clic en el botón Insertar imagen de la categoría "Común" del panel
Objetos.
•Presione Control+Alt+I.

24. O, sin seleccionar el punto de inserción de la imagen, puede realizar
una de las siguientes operaciones
•Arrastre el botón Insertar imagen desde el panel Objetos hasta
la posición deseada de la ventana de documento.
•Arrastre una imagen desde el panel Activos hasta la posición
deseada de la ventana de documento. A continuación, siga con
el paso 3.
•Arrastre una imagen desde la ventana Sitio 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.

25. 2.En el cuadro de diálogo que aparece, haga clic en Examinar para
elegir un archivo o escriba la ruta del archivo de imagen.
3.Defina las propiedades de la imagen en el inspector de propiedades.

26. Configurar Propiedades de las
imágenes
 Para configurar las propiedades de imágenes, seleccione una imagen
en la ventana de documento y, a continuación, podrá visualizar todas
sus propiedades en el Inspector de propiedades.
 An y Al: Reservan espacio para una imagen en una página al
cargarla en un navegador. Dreamweaver rellena automáticamente
estos campos con el tamaño original de la imagen.

27.  Orig: Especifica el archivo de origen para la imagen.
 Vínculo: Especifica un hipervínculo para la imagen.
 Alinear: Alinea una imagen y texto en la misma línea.
 Alt: Especifica el texto alternativo que aparece en lugar de la imagen en los
navegadores que sólo admiten texto o en aquéllos configurados para
descargar las imágenes manualmente.
 Map: Permite crear mapas de imagen de la parte 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.

28.  Destino: Especifica el marco o la ventana donde se cargará la página
vinculada.
 Orig base: Especifica la imagen que debe cargarse antes de la imagen
principal. Muchos diseñadores utilizan una versión de dos bits (blanco y negro)
de la imagen principal porque se carga más rápidamente y ofrece a los
visitantes una idea de lo que van a ver.
 Borde: Establece en píxeles el ancho del borde del vínculo alrededor de la
imagen.
 Editar: Inicia el editor de imágenes que ha especificado en las preferencias
de editores externos y abre la imagen seleccionada.
 Restablecer tamaño: Restablece los valores de An y Al para devolver el
tamaño original a la imagen.

29. Cambiar el tamaño de un elemento
1.Seleccione el elemento (por ejemplo, una imagen) en la ventana de
documento.
En los lados inferior y derecho del elemento y en la esquina inferior derecha
aparecen manejadores de cambio de tamaño.
2. Cambie el tamaño del elemento arrastrando el manejador de selección del lado
derecho (para ajustar ancho), de la parte inferior (para ajustar altura), o de la
esquina (para ajustar ancho y alto simultáneamente)
Para conservar las proporciones del elemento (su relación ancho/alto) al ajustar
sus dimensiones, arrastre el manejador de selección de la esquina mientras
presiona la tecla Mayús.

30. Mapas de imágenes
Es una imagen que se ha dividido en regiones o zonas interactivas. Cuando
se hace clic en una zona interactiva, se realiza una acción, por ejemplo, la
apertura de un archivo.
Crear un mapa de imagen
1.Seleccione la imagen.
2. Haga clic en la flecha de ampliación, situada en el ángulo inferior derecho
del Inspector de propiedades, para ver todas las propiedades.
3.En el campo Mapa, introduzca un nombre exclusivo para el mapa de
imagen.
Nota: Si utiliza múltiples mapas de imágenes en el mismo documento,
asigne un nombre exclusivo a cada uno.
4.Para definir las áreas de mapas de imagen, lleve a cabo una de estas
operaciones:

31.  Seleccione la herramienta circular y arrastre el puntero sobre la imagen
para crear una zona interactiva circular.
•Seleccione la herramienta de rectángulo y arrastre el puntero sobre la
imagen para crear una zona interactiva rectangular.
Seleccione la herramienta poligonal y defina una zona interactiva con
forma irregular haciendo clic una vez en cada esquina. Haga clic en la
herramienta de flecha para cerrar la forma.
Una vez creada la zona interactiva, aparecerá el inspector de propiedades de
zonas interactivas. Para obtener más información sobre el Inspector de
propiedades de zonas interactivas, consulte "Configurar propiedades de
zonas interactivas".

32. Imagen de sustitución
 Una imagen de sustitución es una imagen que cambia cuando el
puntero pasa sobre ella. Una imagen de sustitución consta en
realidad de dos imágenes: la imagen principal (la que aparece
al inicialmente la página) y la imagen de sustitución (la que
aparece cargarse al pasar el puntero sobre la imagen principal).
Ambas imágenes deben tener el mismo tamaño. Si tienen
tamaños distintos, Dreamweaver cambia automáticamente el
tamaño de la segunda imagen para que se ajuste a las
propiedades de la primera.


33. Para crear una imagen de sustitución:
 En la ventana de documento, sitúe el punto de inserción en el lugar donde desea
que aparezca la imagen de sustitución.
 Introduzca la imagen de sustitución mediante uno de estos métodos:
En la categoría Común del panel Objetos, haga clic en el icono Insertar imagen de
sustitución.
 En la categoría Común del panel Objetos, arrastre el icono Insertar imagen de
sustitución hasta la posición deseada de la ventana de documento.
 Elija Insertar > Imágenes interactivas >Imagen de sustitución.
Aparecerá el siguiente cuadro de diálogo:

34. Marquesinas
 Las marquesinas son texto, imágenes, o una mezcla entre texto e imágenes, que
pueden desplazarse de un lado a otro de la ventana, pararse o estar en continuo
movimiento en forma de línea cómo los ejemplos.
 Las marquesinas no se pueden insertar a través del editor gráfico de Dreamweaver,
es necesario hacerlo a través del código.
 Para crear una marquesina hay que insertar las etiquetas <MARQUEE> y
</MARQUEE>. Entre dichas etiquetas han de introducirse los elementos que se
desea que aparezcan en la marquesina.
 Muchas veces el uso de marquesinas no es recomendable, ya que distrae al
visitante del contenido que realmente es de su interés.
 Ejemplos:

35. <MARQUEE
BEHAVIOR=SCROLL>texto</MARQUEE>
Texto en movimiento de derecha a izquierda sin
interrupciones
<MARQUEE BEHAVIOR=SLIDE>
texto</MARQUEE>
Texto en movimiento desde la derecha con parada en
el lado izquierdo
<MARQUEE BEHAVIOR=ALTERNATE>
texto</MARQUEE>
Texto en movimiento continuo de derecha a izquierda
y viceversa
<MARQUEE
BGCOLOR=red>texto</MARQUEE>
Establece el color de fondo
<MARQUEE
DIRECTION=RIGHT>texto</MARQUEE>
Define la dirección del movimiento (en este caso de
derecha a izquierda)
<MARQUEE HEIGHT=20
WIDTH=300>texto</MARQUEE>
Altura (height) y anchura (width) en píxel.
<MARQUEE HSPACE=10
VSPACE=10>texto</MARQUEE>
Distancia, en píxel, de los márgenes laterales
(HSPACE) y superior e inferior (VSPACE)
<MARQUEE LOOP=5>texto</MARQUEE>
Número de veces que pasa el texto. El parámetro
puede impostarse en INFINITAS.
<MARQUEE SCROLLDELAY=5
SCROLLAMOUNT=2>texto</MARQUEE>
Velocidad, en milésimas de segundo, de visualización
de los mensajes.
<MARQUEE>texto + imagen</MARQUE>
También se puede hacer con texto e imagenes

36. TALLER EN CLASE
 1. Con la siguiente imagen crear zonas interactivas para los departamentos de
Antioquia, Cesar, Córdoba, Boyacá, Sucre, Guajira y vincularlo con sus
respectivas páginas.
 2. Crear en las páginas de Antioquia, Córdoba, Guajira, imágenes de
sustitución con las imágenes de sus respectivos departamentos.
 3. Para las páginas de Antioquia, Córdoba y Guajira crear marquesinas con
información como la población, la extensión, Capital, temperatura etc.

37. CONSULTA EN CASA
 ¿Por qué usar plantillas?
 ¿Cómo se crea una plantilla?