DREAMWEAVER CS6 INTERFAZ

1. UNIVERSIDAD AGRARIA DEL ECUADOR
INGENIERIA EN COMPUTACION E
INFORMATICA
TEMA: DREAMWEAVER CS6
DOCENTE: ING KAREN MITE
INTEGRANTES:
1. MARIA ELISA MANZABA
2. BLANCA ELIZABETH PLUA
3. LILIANA CORDOVA
4. ABRAHAM ILLESCA

2. Dreamweaver CS6
Es un software fácil de usar que permite crear páginas web profesionales
y su funciones de edición visual permiten agregar rápidamente diseño y
funcionalidad a las páginas, sin la necesidad de programar manualmente
el código HTML, también Se puede crear tablas, editar marcos, trabajar
con capas, insertar comportamientos JavaScript de una forma muy
sencilla y visual Además incluye un software de cliente FTP (Protocolo de
Transferencia de Ficheros) completo, permitiendo trabajar con mapas
visuales de los sitios web, actualizando el sitio web en el servidor sin salir
del programa

3. Novedades de Dreamweaver cs6
Plantillas diseño fluido: él acceso ala
web a través de todo tipo de dispositivo
esta experimentando un aumento
importante(fig.1)
Transiciones: permite pasar propiedades CSS
(Hojas de Estilo en Cascada) de un estado inicial a
otro estado final de forma continua.
Fuentes web: permite incorporar los archivos de
nuevas fuentes de forma sencillas
Integración con phoneGap: es un servicio para
generar aplicaciones para teléfonos móviles.
Fig.1

4. Interfaz del Dreamweaver

5. La barra de la aplicación
La barra la aplicación se incorporó en la versión anterior de Dreamweaver.
Esta barra contiene los siguientes elementos: los menús (en la imagen, en la parte inferior),
varios botones propios de la aplicación, el conmutador de espacio de trabajo y una caja de
búsquedas para obtener ayuda online.
Las pestañas de documento
Cada archivo que tengamos abierto, mostrará una pestaña con su nombre, lo que nos permitirá
cambiar de uno a otro fácilmente. Si junto al nombre aparece un *, indica que ese archivo tiene
cambios sin guardar y Debajo de las pestañas encontramos los archivos que utiliza nuestra página.

6. La barra de estado
Esta barra la encontramos debajo de la ventana de documento, y nos da información sobre el mismo.
la izquierda, encontramos el selector de etiquetas. Nos sirve para seleccionar etiquetas completas.
Siguiendo hacia la derecha tenemos las herramientas de Selección, Mano (para desplazarse) y
Zoom. Más a la derecha encontramos tres iconos para ver la página en tres tamaños de pantalla:
móvil, tableta y PC escritorio. Y al final hay otros datos como el tamaño de la ventana, el tamaño de
la página o su codificación.
La barra de herramientas estándar.
La barra de herramientas estándar contiene iconos para realizar las acciones más habituales del
menú Archivo y Edición. De izquierda a derecha: Nuevo archivo, Abrir, explorar con Adobe
Bridge, Guardar, Guardar todo, Imprimir el código fuente, Cortar, Copiar, Pegar, Deshacer y
Rehacer.

7. La barra de herramientas de documento.
Contiene iconos que nos permiten cambiar entre las distintas vistas de edición y la vista en vivo,
vistas previa en multipantalla, acceder cómodamente al título de la página, o realizar las
distintas opciones de validación que nos ofrece el programa.
La barra de navegación con navegador.
Esta barra nos permite usar Dreamweaver como un navegador web y navegar por las páginas de nuestro sitio.
Muestra las opciones propias del objeto o texto seleccionado, permitiéndonos editarlas, Por ejemplo, cuando el elemento
seleccionado sea una imagen, como sucede en la imagen que puedes ver, mostrará su ubicación, dimensiones, clase, etc.
En otros elementos, como párrafos y estilos, este panel puede mostrar dos tipos de propiedades, HTML y CSS.
El inspector de Propiedades

8. Panel Archivos
El panel archivo es para ver y administrar los archivos del sitio de Dreamweaver normalmente el
panel que se encuentra abierto corresponde al de archivos que permite administrar el sitio web o
portal, mostrando los archivos y carpetas que lo conforman utilizamos este panel para crear un
nuevo sitio, crear una nueva carpeta y archivo. Cuando se le cambia de nombre a las carpetas y
archivos, automáticamente Dreamweaver realizará las actualizaciones.

9. La vista Diseño
La vista Diseño permite trabajar con el editor visual.
Nos ofrece un aspecto muy similar al resultado final, pero totalmente editable.
La vista Código
La vista Código se utiliza para poder trabajar en un entorno totalmente de
programación, de código fuente. No permite tener directamente una referencia
visual de cómo va quedando el documento.
La vista Dividir
La vista Dividir permite dividir la ventana en dos zonas: Código y Diseño.
La zona izquierda muestra el código fuente, y la derecha el editor visual.
Cuando se realiza un cambio en alguna de las zonas, este cambio se aplica
directamente sobre la otra. Vista en vivo
La vista en Vivo es una mejora reciente de Dreamweaver muestra una representación realista
del aspecto que tendrá el documento en un navegador, y le permite interactuar con el
documento de la misma forma que lo haría en un navegador. Puede editar elementos HTML
directamente en la vista en vivo y obtener de inmediato una vista previa de los cambios en la
misma vista.
Divide en dos partes el área de trabajo mostrando el contenido de la página web en vivo y a la
vez que es posible editar dicho contenido mediante código.
Vista Código en vivo

10. GRACIAS POR SU ATENCIÓN…