1. VENTANA DREAMWEAVER
Presentado por:
Angie De La Torre Mendoza
Presentado a :
Analida Carvajal
Grado :
11°e

2. INDICE
• ¿Que es Dreamweaver?
• Ventana principal Dreamweaver.
• Barras de herramientas Dreamweaver.
• Panel de objetos.
• Inspector de propiedades Dreamweaver.
• Pasos para crear documentos Dreamweaver
• Pasos para guardar documentos Dreamweaver
• Dreamweaver MX 2004
• Dreamweaver CS 6

3. ¿Que es Dreamweaver?
Dreamweaver es la herramienta de diseño de páginas web
más avanzada, tal como se ha afirmado en muchos
medios. Aunque sea un experto programador de HTML
el usuario que lo maneje, siempre se encontrarán en este
programa. Esta pagina esta destinada a la construcción,
diseño y edición de sitios, videos y aplicaciones Web
basados en estándares. Dreamweaver CS5 es un software
fácil de usar que permite crear páginas web
profesionales.

4. Ventana principal Dreamweaver

5.  La Ventana de documento o zona de edición, en la que escribirá y creará los
detalles de una página.
 La barra Insertar, que contiene botones para la inserción de diversos tipos
de objetos, como imágenes, tablas, etc.
 El botón desplegable Común cuenta con un buen número de barras, que
clasifican por temas los objetos que se pueden manipular. Cada objeto es un
fragmento de código HTML y podrá establecer diversos atributos al insertarlo.
 Por ejemplo, puede insertar una imagen haciendo clic en el botón Imagen de la
barra Insertar. Si lo prefiere, puede insertar objetos utilizando el menú Insertar
en lugar de la barra de herramientas Insertar.
 Debajo de la barra Insertar, se encuentra la barra de herramientas de
documento, que contiene botones y menús emergentes que proporcionan
diferentes vistas de la ventana de documento (como la vista Diseño y
la vista Código ) y algunas operaciones comunes como la obtención de
una vista previa en un navegador .

6.  La ventana documento muestra el documento actual, mientras lo está creando y
editando.
 En la parte inferior de la ventana vemos el inspector de propiedades, con el
que podemos cambiar diversas propiedades del objeto o texto seleccionado.
Conviene advertir, que cada tipo de objeto tiene diferentes propiedades.
 En general, puede convertir estos paneles en flotantes. Para ello pase el
puntero del ratón por la esquina izquierda, hasta obtener un cursor con cuatro
flechas . En ese momento arrastre el panel a la posición que desee.
Una punta de flecha horizontal indica panel replegado y si hacemos clic
sobre ella se despliega el panel. Por el contrario, la punta de flecha con una
orientación vertical indica panel desplegado.
 Una punta de flecha horizontal indica panel replegado y si hacemos clic
sobre ella se despliega el panel. Por el contrario, la punta de flecha con una
orientación vertical indica panel desplegado.
 A la derecha de la ventana, tenemos los grupos de paneles. Son conjuntos de
paneles relacionados y apilados y se les identifica con un nombre.

7. - Para desplegar un grupo de paneles, haga clic en la punta de
flecha de despliegue
- Para desacoplar un grupo de paneles, arrástrelo pinchando en el botón
mover (formado por dos columnas de puntitos) situado en el borde
izquierdo de la barra de título del grupo.
Dreamweaver ofrece otros
muchos paneles, inspectores
y ventanas, como el panel
Historial y el Inspector de
código. Para abrir paneles,
inspectores y ventanas tiene
que utilizar el menú Ventana.

8. Barras de herramientas
Dreamweaver
La barra de herramientas de Dreamweaver contiene botones que
permiten alternar entre diferentes vistas del documento rápidamente,
cambiar el título del documento o pre visualizar la página en el
navegador. Los elementos del menú Opciones (botón situado en el
extremo derecho de la barra de herramientas) cambia en función de la
vista que seleccione.

9. • Para ver u ocultar la barra de herramientas, elija en el menú Ver la
opción Barra de herramientas.
• Para ver sólo código en la ventana de documento, haga clic en el botón
Vista de código.
• Para ver una vista que contenga las vistas de Código y de Diseño, haga
clic en el botón Vistas de código y diseño.
• Para ver sólo la vista de Diseño, haga clic en el botón Vista de diseño.
• Para introducir un título para el documento, utilice el campo Título. Si el
documento ya tiene título, éste aparecerá en dicho campo.
• Para poner, obtener o proteger un archivo, haga clic en el botón de menú
de "Estado de archivo".
• Para pre visualizar o depurar un documento en un navegador, haga clic
en Vista previa/depurar en navegador y elija uno de los navegadores
enumerados en el menú emergente.

10. • Para actualizar la vista de Diseño, haga clic en el botón Actualizar vista
de diseño.
• Para obtener información de referencia sobre código HTML, CSS y Java
Script, haga clic en el botón Referencia.
• Para desplazarse por el código, haga clic en el botón Navegación por el
código. Para obtener más información, consulte "Introducción al
depurador Java Script".
• Para mostrar u ocultar la regla, la cuadrícula y las ayudas visuales, haga
clic en el botón de menú Opciones.

11. Panel de objetos Dreamweaver
Este panel contiene botones que permiten la creación e inserción de
diversos tipos de objetos, como tablas, vínculos, capas e imágenes. El
panel contiene siete categorías de forma predeterminada: Común,
Formularios, Marcos, Head, Invisibles y Caracteres. También contiene
botones que cambian de vista: Estándar y Disposición. Cada uno de estos
elementos serán explicados en temas posteriores.
Si desea insertar un objeto en el documento haga clic en el
correspondiente botón del panel o arrastre el ícono del botón hasta la
ventana de documento. Dependiendo del objeto, aparecerá un cuadro de
diálogo en el cual se le pedirá que seleccione o inserte el archivo u objeto
deseado.

12. Inspector de propiedades
Dreamweaver
El inspector de propiedades permite examinar y editar las propiedades del
elemento que esté seleccionado actualmente, puede ser un objeto o texto. Es
posible seleccionar los elementos en la ventana de documento o en el
inspector de código.
La mayoría de los cambios realizados en las propiedades se aplicarán de
inmediato en la ventana de documento. (Para algunas propiedades, los
cambios no se aplican hasta que se hace clic fuera de los campos de texto de
edición de la propiedad, se presiona Enter o se presiona Tab para cambiar a
otra propiedad.)
El inspector de propiedades muestra inicialmente las propiedades del
elemento seleccionado que se utilizan con mayor frecuencia; para ver todas
las propiedades haga clic en la flecha de ampliación situada en la esquina
inferior derecha del inspector de propiedades, para ver más propiedades del
elemento.

13. Pasos para crear un documento
Dreamweaver
Para crear un documento HTML vacío en una nueva ventana de
documento, realice una de estas operaciones:
 En Windows, elija Archivo > Nuevo desde una ventana de
documento existente o elija Archivo > Nueva ventana desde la
ventana Sitio.
Si abre la vista de Código (en la ventana de documento) o el inspector
de código, podrá ver que el nuevo documento no está totalmente
vacío, pues contiene etiquetas HTML, head y body para que pueda
comenzar a trabajar. Mientras escriba en la vista de Diseño de la
ventana de documento o inserte objetos tales como tablas e imágenes,
podrá dejar abierto un editor de código y observar cómo se crea el
código HTML

14. Pasos para guardar un documento
Dreamweaver
Para abrir un archivo HTML existente, lleve a cabo una de estas
operaciones:
• Seleccione Archivo > Abrir.
• Si el archivo se ha creado con Microsoft Word, elija Archivo > Importar
> Importar HTML de Word.
Si elige Importar HTML de Word, Dreamweaver abre el archivo y le
permite especificar opciones para eliminar código ajeno a HTML
generado por Word. (Microsoft Word 97 y las versiones posteriores
cuentan con el comando Guardar como HTML, que añade código HTML
innecesario al convertir un documento a este formato.)

15. Dreamweaver MX 2004
Al iniciar Macromedia Dreamweaver MX 2004 aparece, como primera
novedad, la elección de una modalidad de programación, lista formada por
ASP.Net, PHP, ColdFusion, y HTML. Luego se presenta otra selección, el
ambiente de trabajo, en donde encontramos las opciones, ya conocidas de
anteriores versiones, WYSIWYG (que consiste en diseñar una página Web
sin necesidad de escribir ningún código), la opción de trabajar con el
Código, y por último la posibilidad de ver ambas ventanas de desarrollo a la
vez.
Los lenguajes de programación que domina Dreamweaver MX 2004 son
ASP, CSS, PHP, SQL, JSP, y XML. El potencial del software en cuanto a la
capacidad de programar bajo los lenguajes que acabamos de citar es de lo
más amplio, permitiendo la creación de aplicaciones y diseños web
complejos.

16. Dreamweaver CS 6
Dreamweaver es una aplicación en forma de estudio (basada en la forma
de estudio de Adobe Flash) que está destinada a la construcción, diseño y
edición de sitios, videos y aplicaciones Web basados en estándares. Creado
inicialmente por Macromedia (actualmente producido por Adobe Systems)
es el programa más utilizado en el sector del diseño y la programación web,
por sus funcionalidades, su integración con otras herramientas como Adobe
Flash y, recientemente, por su soporte de los estándares del World Wide
Web Consortium.
Dreamweaver permite al usuario utilizar la mayoría de los navegadores Web
instalados en su ordenador para pre visualizar las páginas web. También
dispone de herramientas de administración de sitios dirigidas a principiantes
como, por ejemplo, la habilidad de encontrar y reemplazar líneas de texto y
código por cualquier tipo de parámetro especificado, hasta el sitio web
completo.