La herramienta de diseño de páginas web, más avanzada..!

1. 1

2.  1.¿ Qué es Dreamweaver ?
 2. Ventana principal de Dreamweaver.
 3. Elementos de la ventana de
Dreamweaver.
 4. inspectores y paneles de la ventana
de Dreamweaver.

3. 3

4.  Adobe Dreamweaver es
una aplicación en forma de estudio que
está destinada a la construcción, diseño
y edición de sitios, videos y aplicaciones
web basados en estándares.
 Es el programa más utilizado en el sector
del diseño y la programación web, por
sus funcionalidades y su integración con
otras herramientas como Adobe flash. 4

5. 5

6. 6

7.  1. La Ventana de documento o zona de edición, en la que
escribirá y creará los detalles de una página.
 2. La barra Insertar, que contiene botones para la
inserción de diversos tipos de objetos, como imágenes,
tablas, etc.
 3. 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.
 4. 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.
 5. Debajo de la barra Insertar, se encuentra la barra de
7
herramientas de documento, que contiene botones y menús

8. 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 .
8

9.  6. La ventana documento muestra el
documento actual, mientras lo está
creando y editando.
 7. 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.

9

10.  8. convierte 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.
 9. 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.
 10. 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.
› 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 situado en el borde izquierdo de la barra
de título del grupo.
 11. El panel Sitio, desplegado, permite administrar los archivos y
carpetas que forman el sitio Web.
 El botón Ampliar / Contraer del panel de Archivos ofrece la 10
posibilidad de ver todos los archivos del disco duro local de
manera semejante a como lo hace el Explorador de Windows.

11.  12. Interesante es el botón en forma de
punta de flecha que se ve en el lateral
izquierdo del panel. Haciendo clic,
conseguimos plegar el panel hacia el
margen derecho para ampliar la superficie
de edición o volverlo a desplegar para ver
de nuevo el árbol de archivos del sitio Web.
 13. Recuerde que pulsando F4 oculta
todos los paneles lo que aumenta la
superficie de la ventana documento. Esto
es muy útil cuando escribe la página Web.
 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ú 11
Ventana.

12.  Dreamweaver utiliza ventanas flotantes
similares a las barras de herramientas, que
se conocen como paneles o inspectores.
La diferencia entre panel e inspector es
que, en general, la apariencia y opciones
de un inspector cambian dependiendo del
objeto seleccionado, mientras que el panel
nos da acceso a opciones generales.
 A través de la opción Ventana, de la barra
de menús, es posible mostrar u ocultar
cada uno de los paneles o inspectores.
Vamos a ver los más importantes. 12

13.  El inspector de Propiedades:
El inspector de Propiedades muestra las opciones propias del
objeto o texto seleccionado, permitiéndonos editarlas, por lo
que se convierte en uno de los elementos más utilizados en
Dreamweaver. Por ejemplo, cuando el elemento
seleccionado sea una imagen, mostrará su ubicación,
dimensiones, peso, clase, etc...
Este panel puede mostrar dos tipos de propiedades, HTML y
CSS, que podemos aplicar a los diferentes elementos de la 13
página Web que estemos diseñando.

14.  El panel Insertar:
En el panel Insertar, encontramos todos los elementos que
podemos encontrar en el menú Insertar, clasificados en
categorías. Podemos emplearlo para insertar imágenes,
enlaces, multimedia, tablas, formularios... cualquier elemento
que nuestra web necesite.
Como vemos en las imágenes, es posible configurar este panel
para verlo como menú, como panel flotante o como una 14
barra de herramientas integrada en la ventana de trabajo.

15.  Grupo de paneles:
15

16. 16