Es un software de edición en forma de un estudio

(basado en la forma de Adobe Flash) su propósito

es construir, desarrollar, diseñar y editar sitios,

vídeos y aplicaciones web. Inicialmente fue creado

por Macromedia pero actualmente es desarrollado

por Adobe Systems. Adobe Dreamweaver se ha

convertido en el programa más utilizado para el

diseño y la programación web, esto gracias a las

funciones que posee, su fácil integración a otros

programas como Adobe Flash y recientemente por

su soporte para estándares del World Wide Web

Consortium...

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

razones para utilizarlo,

sobretodo en lo que a

productividad se refiere.

Cumple perfectamente el

objetivo de diseñar páginas

con aspecto profesional, y

soporta gran cantidad de

tecnologías, además muy

fáciles de usar:

Hojas de estilo y capas

Javascript

para crear efectos e

interactividades

Inserción de archivos

multimedia..

.

MENÚA continuación se describirá los elementos más importantes del

Menú

De Adobe Dreamweaver CS3: El menú

ArchivoContiene los elementos de menú estándar como Nuevo, Abrir, Guardar,

Guardar como. También contiene otros comandos para la visualización o

manipulación del documento actual, como Vista previa en el navegador e

Imprimir código. El menú

EdiciónContiene los elementos de menú estándar como Cortar, Copiar y Pegar.

También incluye comandos de selección y búsqueda, como Seleccionar

etiqueta padre, Buscar y reemplazar, y proporciona acceso al editor de

Métodos abreviados de teclado y al Editor de la biblioteca de etiquetas.

El menú

.

Vamos a ver cuáles son los elementos básicos

de Dreamweaver CS6, la pantalla, las barras, los

paneles, etc..., para saber diferenciar entre

cada uno de ellos. Aprenderemos cómo se

llaman, dónde están y para qué sirven. También

veremos cómo obtener ayuda, por si en algún

momento no sabemos cómo seguir trabajando.

Cuando conozcamos todo esto estaremos en

disposición de empezar a crear páginas web.

La pantalla inicial

Al arrancar Dreamweaver aparece una pantalla

inicial como ésta, vamos a ver sus componentes

fundamentales. Así conoceremos los nombres

de los diferentes elementos y será más fácil

entender el resto del curso. La pantalla que se

muestra a continuación (y en general todas las

de este curso) puede no coincidir exactamente

con la que ves en tu ordenador, ya que cadausuario puede decidir qué elementos quiere que

se vean en cada momento y dónde, como

veremos más adelante.

.

En el resto de esta unidad vamos a ir describiendo los puntos más

importantes señalados en esta imagen por los números en azul del 1 al 9.

1.- Las barras.

2.- Las pestañas de documentos.

3.- La barra de estado.

4.- El panel de propiedades.

5.- Área de paneles.

6.- Paneles y ventanas.

7.- Línea inferior de pestañas.

8.- Vista diseño del documento.

9.- Vista código del documento.

.

1.- La barra de la aplicación.

La barra la aplicación se incorporó en la versión anterior de

Dreamweaver. Si tenemos la ventana maximizada veremos

todos los elementos de la barra ocupando una sola línea, si

no, ocuparán dos líneas, como en la imagen superior.

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 on line.

Los botones propios de la aplicación, que aparecen junto al

icono, nos permiten (de derecha a izquierda) cambiar entre la

vista de diseño o código, acceder a las extensiones que se

pueden añadir, o al administrador de sitios, que ya veremos.

.

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. Esta barra puede ser muy

útil, pero en realidad casi todo el mundo usa esos

comandos directamente con el teclado (Ctrl + G para

guardar, Ctrl + C para copiar, etc.)

La barra de herramientas de documento.

La 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, aunque sólo

tiene sentido con la Vista en vivo, como ya veremos.

Como también veremos al personalizar el entorno, algunos

paneles, como Insertar nos permiten colocarlo como otra barra

de herramientas.

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, como sucede en la imagen que puedes ver,

mostrará su ubicación, dimensiones, peso, clase, etc...

.

Área de panelesEn la parte derecha de la pantalla tenemos el área o pila

de paneles.

PanelesUna vez tenemos el área de paneles con los elementos

que más nos interesen, podemos abrirlos o desplegarlos

de tres formas.

.

La barra de herramientasLa 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.

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.

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 JavaScript, 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

JavaScript".

Para mostrar u ocultar la regla, la cuadrícula y las

ayudas visuales, haga clic en el botón de menú

Opciones.

.

Universidad Bicentenaria de

Aragua

Cátedra: Informática IV

Elaborado por:

Eledurad Marcano 19.800.748

Profesor: Ysabel Sánchez