El documento describe las funciones principales de Adobe Dreamweaver, incluyendo la creación y edición de páginas web, la inserción de hipervínculos, imágenes y videos, y la opción de ocultar el código HTML al usuario. También explica las barras de herramientas, el inspector de propiedades, los paneles y las vistas de diseño y código. Por último, detalla las funciones de los mapas sensibles, marcos y capas en Dreamweaver.

1. Universidad Fermín Toro
Vice rectorado Académico
Facultad de Ciencias Sociales y Económicas
Escuela de Comunicación Social
Barquisimeto – Estado Lara
Adobe Dreamweaver
Integrantes:
Medina, Natasha
Zambrano, Stephany
Cátedra: Técnicas Graficas II
Prof: Justamalia Saldivia
Sección: SAIA B

2. Adobe Dreamweaver
¿Qué es?
Es una aplicación de la autoría de Macromedia, ahora en manos de Adobe
Systems, que facilita el diseño, creación, y edición de páginas web y todo lo
relacionado a su estructura. Entre sus ventajas se puede señalar que a través del
mismo pueden insertarse hipervínculos, imágenes, videos, tablas, entre otros; de
igual manera, esta aplicación brinda la posibilidad de ocultar el código HTML al
usuario, haciendo que cualquier persona, conocedora o no, pueda crear sitios web sin
preocuparse por escribir códigos. Dicha herramienta está disponible tanto para el
sistema operativo MAC como para Windows.
Entorno de trabajo:
Al ingresar a este programa, tendremos a simple vista la página de inicio que
brinda la opción de crear un nuevo documento o modificar alguno reciente, luego
podremos encontrar las siguientes barras:
 Barra Insertar: Ubicada del lado izquierdo de la pantalla, en la parte superior,
cumple con la función (como su nombre lo indica) de insertar cuando se
accesa a ella, toda clase de objetos a la página, tales como, tablas, imágenes,
capas, entre otros.
 Barra de herramienta de documento: contiene botones que proporcionan
opciones para diferentes vistas de la ventana de documento (como la vista
Diseño y la vista Código), diversas opciones de visualización y algunas
operaciones comunes como la obtención de una vista previa en un navegador.
 La barra de herramientas Estándar (que no aparece en el diseño de espacio de
trabajo predeterminado) contiene las operaciones más habituales de los menús
Archivo y Edición: Nuevo, Abrir, Guardar, Guardar todo, Cortar, Copiar,
Pegar, Deshacer y Rehacer. Para mostrar la barra de herramientas Estándar,
seleccione Ver > Barras de herramientas > Estándar.

3.  El inspector de propiedades: le permite ver y cambiar diversas propiedades del
objeto o texto seleccionado. Cada tipo de objeto tiene diferentes propiedades.
 Los grupos de paneles son conjuntos de paneles relacionados apilados bajo un
encabezado común. Para ampliar un grupo de paneles, haga clic en la flecha
de ampliación situada a la izquierda del nombre del grupo; para desacoplar un
grupo de paneles, es el mismo procedimiento.
 El panel de archivos permite gestionar los archivos y las carpetas, tanto si
forman parte de un sitio de Dreamweaver como si se encuentran en un
servidor remoto. El panel de archivos también proporciona una vista de todos
los archivos del disco local, como ocurre en el Explorador de Windows
(Windows).
 La ventana de documento muestra el documento actual mientras lo está
creando y editando. Puede elegir entre una de las vistas siguientes:
 La vista Diseño es un entorno de trabajo para el diseño visual de la página, la
edición visual y el desarrollo rápido de aplicaciones. En esta vista,
Dreamweaver muestra una representación visual del documento
completamente editable. Puede configurar la vista de diseño para que muestre
el contenido dinámico mientras trabaja en el documento.
 La vista Código es un entorno de codificación manual para escribir y editar
código HTML, JavaScript, código de lenguaje de servidor, como por ejemplo
PHP, ASP o ColdFusion Markup Language (CFML) y otros tipos de código.
Es posible ver el mismo documento en las dos vistas, Código y Diseño, en una
sola ventana de documento. Cuando la ventana de documento tiene una barra
de título, ésta muestra el título de la página y, entre paréntesis, el nombre y la
ruta del archivo. Si se han realizado cambios que aún no se han guardado,
después del nombre del archivo Dreamweaver incluye un asterisco. Cuando se
maximiza la ventana de documento en el diseño integrado de espacio de
trabajo (sólo Windows), no aparece la barra de título; en este caso, el título de
la página y el nombre y la ruta del archivo aparecen en la barra de título de la
ventana principal del espacio de trabajo. Cuando una ventana de documento

4. está maximizada, aparecen fichas en la parte superior de la misma con los
nombres de archivo de todos los documentos abiertos. Para cambiar a un
documento, haga clic en su ficha.
 La barra de herramientas contiene también algunos comandos y opciones
relativos a la visualización del documento y a su transferencia entre los sitios
local y remoto. Estas son;
a) Depuración del servidor muestra un informe que le ayudará a depurar la
página de ColdFusion actual. El informe contiene los errores de la página,
si los hay.
b) Título permite introducir un título para el documento, que aparecerá en la
barra de título del navegador. Si el documento ya tiene título, éste
aparecerá en dicho campo.
c) Vista previa/Depurar en explorador permite ver una vista previa del
documento o depurarlo en un navegador. Seleccione un navegador en el
menú emergente.
d) Actualizar vista de diseño actualiza la vista Diseño tras realizar cambios
en la vista Código. Los cambios realizados en la vista Código no
aparecerán de forma automática en la vista Diseño hasta que se efectúen
determinadas acciones, como guardar el archivo o hacer clic en este botón.
e) Ver opciones permite definir las opciones de las vistas Código y Diseño, y
establecer qué vista va a aparecer en la parte superior de la ventana. Las
opciones del menú corresponden a la vista actual: la vista Diseño, la vista
Código o ambas.
Mapas Sensibles:
Estos son imágenes que se dividen o seccionan en regiones interactivas, esto
quiere decir, que cada región, estará en la capacidad de realizar acciones

5. específicas para las cuales se le programe; por ejemplo, con el click en una
región se abre un archivo, una imagen o notificación.
Estos mapas de imagen, almacenan la información acerca de los vínculos de
hipertexto en el documento HTML en lugar de hacerlo por separado en un
archivo de mapa como hacen los mapas de imagen del lado del servidor.
Cuando el visitante de un sitio hace clic en una zona interactiva, el URL
asociado se envía directamente al servidor. Esto hace que los mapas de
imagen del lado del cliente sean más rápidos que los mapas del lado del
servidor, pues el servidor no necesita interpretar dónde ha hecho clic el
usuario. Los mapas de imagen del lado del cliente son compatibles con
Netscape Navigator 2.0 y versiones posteriores, NCSA Mosaic 2.1 y 3.0 y
todas las versiones de Internet Explorer.
Dreamweaver no modifica las referencias a mapas de imagen del lado del
servidor en documentos existentes. Puede utilizar mapas de imagen del lado
del cliente y del servidor en el mismo documento. Sin embargo, los
navegadores que admiten ambos tipos de mapas de imagen dan prioridad a los
mapas de imagen del lado del cliente. Para incluir un mapa de imagen del lado
del servidor en un documento, deberá escribir el código HTML
correspondiente.
Frames:
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.

6. Es posible editar los documentos contenidos en los marcos desde la página
que contiene el grupo de marcos. Esto facilita el trabajo, ya que es más fácil
hacerse una idea de cómo quedará la página al final, cosa que no es posible si
se editan individualmente cada uno de los documentos que contiene el marco.
¿Cómo realizar marcos?
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.
Capas:
Las capas son unos recuadros, que pueden situarse en cualquier parte de la
página, en los que podemos insertar contenido HTML. Dichas capas pueden
ocultarse y solaparse entre sí, lo que proporciona grandes posibilidades de
diseño. Las capas pueden moverse de una posición a otra de la ventana
pulsando sobre el recuadro blanco, y sin soltar el ratón, arrastrándola hacia la
nueva posición.
También pueden ser redimensionadas pulsando sobre los recuadros negros, y
arrastrándolos hasta conseguir el tamaño deseado.
Dentro del recuadro de la capa es posible insertar texto, tablas, imágenes,
animaciones flash, y todos los elementos que puede contener un documento
HTML.
Este icono sirve para seleccionar la capa al pulsar sobre él, y al eliminarlo se
elimina también la capa.

7. Cómo se insertan:
Las capas pueden insertarse en una página a través del menú Insertar, opción Objeto
de diseño, Capa.
Una vez se ha insertado la capa, pueden editarse sus atributos, pero para ello hay que
seleccionarla primero.
Una capa puede seleccionarse de varias maneras. Una de ellas es pulsando sobre el
icono correspondiente, pero esto no resulta útil cuando existen muchas capas en un
mismo documento, ya que todas las capas tienen asociada una imagen igual a esta, y
no es fácil seleccionar la deseada a la primera.
Cuando existen varias capas en un mismo documento, es preferible seleccionarlas a
través de la pestaña Capas del panel Diseño, que puede abrirse a través del menú
Ventana opción Capas. Si la opción Capas no te aparece directamente en este menú,
posiblemente esté dentro de la opción Otros. También puedes abrir el panel pulsando
F2
En dicho panel aparecen los nombres de todas las capas que existen en el documento
actual, y para seleccionar una de ellas simplemente hay que pulsar sobre el nombre en
el panel.