Que te parece dreamweaver ?

PARA MI ES MUY BUENO PORQUE ES UN SOFTWARE FCIL DE USAR QUE PERMITE CREAR PGINAS
WEB PROFESIONALES, Y AGREGAR DISEO Y FUNCIONALIDAD A LAS PAGINA .

EL ENTORNO DE DREAMWEAVER CS6

Vamos a ver cules son los elementos bsicos de Dreamweaver CS6, la pantalla, las barras, los
paneles, etc..., para saber diferenciar entre cada uno de ellos. Aprenderemos cmo se llaman,
dnde estn y para qu sirven. Tambin veremos cmo obtener ayuda, por si en algn momento no
sabemos cmo seguir trabajando. Cuando conozcamos todo esto estaremos en disposicin de
empezar a crear pginas web.
2.1. 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 ms fcil entender
el resto del curso. La pantalla que se muestra a continuacin (y en general todas las de este curso)
puede no coincidir exactamente con la que ves en tu ordenador, ya que cada usuario puede decidir
qu elementos quiere que se vean en cada momento y dnde, como veremos ms adelante.

En el resto de esta unidad vamos a ir describiendo los puntos ms importantes sealados en esta
imagen por los nmeros en azul del 1 al 9.

1.- Las barras.

2.- Las pestaas de documentos.
3.- La barra de estado.
4.- El panel de propiedades.
5.- rea de paneles.
6.- Paneles y ventanas.
7.- Lnea inferior de pestaas.
8.- Vista diseo del documento.
9.- Vista cdigo del documento.
Las barras
1.- La barra de la aplicacin.

La barra la aplicacin se incorpor en la versin anterior de Dreamweaver. Si tenemos la ventana

maximizada veremos todos los elementos de la barra ocupando una sola lnea, si no, ocuparn dos
lneas, como en la imagen superior.
Esta barra contiene los siguientes elementos: los mens (en la imagen, en la parte inferior),
varios botones propios de la aplicacin, el conmutador de espacio de trabajo yuna caja de
bsquedas para obtener ayuda on line.

Los botones propios de la aplicacin, que aparecen junto al icono, nos permiten (de derecha a
izquierda) cambiar entre la vista de diseo o cdigo, acceder a las extensiones que se pueden
aadir, o al administrador de sitios, que ya veremos.

Ms hacia la derecha observamos el conmutador del espacio de trabajo, como un desplegable. Un

espacio de trabajo es la configuracin del entorno (paneles visibles y su disposicin) que podemos
guardar y cargar. Lo veremos ms adelante.
Los mens, estn agrupados en categoras.

Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con los diferentes
elementos que se pueden insertar en Dreamweaver. Todas las opciones de Dreamweaver son
accesibles a travs de los mens, aunque en ocasiones nos enven a los paneles.
2.- Las pestaas de documento.

Cada archivo que tengamos abierto, mostrar una pestaa con su nombre, lo que nos permitir
cambiar de uno a otro fcilmente. Si junto al nombre aparece un *, indica que ese archivo tiene
cambios sin guardar. Podemos cerrar cada documento clicando en el aspa de la derecha, o acceder
a otras acciones haciendo clic con el botn derecho, como Cerrar otros archivos.
Debajo de las pestaas encontramos los archivos a que utiliza nuestra pgina, como la hoja de
estilos, archivos JavaScript, etc... pudiendo acceder a ellos con un clic. Esto nos ahorrar bastante
tiempo.
3.- La barra de estado.

Esta barra la encontramos debajo de la ventana de documento, y nos da informacin sobre el

mismo.
A la izquierda, encontramos el selector de etiquetas. Nos sirve para seleccionar etiquetas
completas. Siguiendo hacia la derecha tenemos las herramientas de Seleccin, Mano (para
desplazarse) y Zoom. Ms a la derecha encontramos tres iconos para ver la pgina en tres tamaos
de pantalla: mvil, tableta y PC escritorio.Y al final hay otros datos como el tamao de la ventana,
el tamao de la pgina o su codificacin.
Hasta aqu las barras que siempre veremos en la aplicacin. A parte, existen otras que podemos ver
u ocultar desde el men Ver Barras de herramientas.

La barra de herramientas estndar.

La barra de herramientas estndar contiene iconos para realizar las acciones ms habituales del
men Archivo y Edicin. De izquierda a derecha: Nuevo archivo, Abrir, explorar con Adobe Bridge,
Guardar, Guardar todo, Imprimir el cdigo 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 edicin y la vista en vivo,
vistas previa en multipantalla, acceder cmodamente al ttulo de la pgina, o realizar las distintas
opciones de validacin que nos ofrece el programa.
La barra de representacin de estilos.

Esta barra, menos utilizada, nos permite ver la apariencia de nuestra web en distintos dispositivos,
si estamos utilizando hojas distintas que dependan del eso. Hay varias opciones, como las de ver
los estilos que dependen de pseudo clases activas, como cuando el cursor est sobre un elemento.
La barra de navegacin con navegador.

Esta barra nos permite usar Dreamweaver como un navegador web y navegar por las pginas de
nuestro sitio, aunque slo tiene sentido con la Vista en vivo, como ya veremos.

Como tambin veremos al personalizar el entorno, algunos paneles, como Insertar nos permiten
colocarlo como otra barra de herramientas.
Inspectores y paneles
Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se conocen
como paneles (ventanas) 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 fijas.
A travs de la opcin Ventana, de la barra de mens, es posible mostrar u ocultar cada uno de los
paneles o inspectores. A continuacin vamos a ver el inspector de Propiedades y ms adelante
veremos el panel Insertar.
4.- El inspector de Propiedades

El inspector de Propiedades muestra las opciones propias del objeto o texto seleccionado,
permitindonos editarlas, por lo que se convierte en uno de los elementos ms utilizados en

Dreamweaver. Por ejemplo, cuando el elemento seleccionado sea una imagen, como sucede en la
imagen que puedes ver, mostrar su ubicacin, dimensiones, peso, clase, etc...
En otros elementos, como prrafos y estilos, este panel puede mostrar dos tipos de propiedades,
HTML y CSS, que podemos aplicar a los diferentes elementos de la pgina Web que estemos
diseando.

5.- rea de paneles.

En la parte derecha de la pantalla tenemos el rea o pila de paneles.

Inicialmente, el rea de paneles contiene unos determinados elementos, pero podemos quitar y
poner los elementos que queramos. Para quitar un elemento del rea de paneles basta hacer clic
con el botn derecho sobre su nombre para que aparezca un men con la opcin Cerrar. Para aadir
un elemento al rea de paneles hay que ir al men Ventana y hacer clic en el elemento que
queramos aadir, si el elemento se abre en una ventana flotante, bastar arrastrarlo al rea de
paneles.

6.- Paneles.
Una vez tenemos el ea de paneles con los elementos que ms nos interesen, podemos abrirlos o
desplegarlos de tres formas.
1. Abrir el panel dentro del rea de paneles. Para ello primero hay que expandir el rea de paneles
pulsando el botn de la parte superior derecha
, a continuacin, basta hacer clic en cada panel
para que se abra dentro del rea de paneles. Para cerrar el panel hacer doble clic.
Por ejemplo, en la siguiente imagen vemos el panel Archivos abierto dentro del rea de paneles. Se
pueden abrir varios paneles a la vez y ajustar sus tamaos colocando el cursor en el borde inferior y
arrastrndolo.

2. Abrir el panel al lado del rea de paneles. Para ello hay que partir del rea de paneles sin
expandir, y al pulsar en un panel, este se abrir pegado al lado, como vemos en la siguiente figura.

3. Abrir como panel flotante. Para ello hay que pinchar en el ttulo del panel y arrastar el panel
fuera del rea de paneles, el panel se puede colocar en cualquier zona de la pantalla, incluso fuera

de la pantalla de Dreamweaver. Al hacer doble clic en el ttulo del panel, este se contrae pero sigue
flotando en la misma posicin. Para expandirlo, volver a hacer doble clic. En al siguiente imagen
vemos el panel Archivos flotando y epandido.

Hemos visto un inspector y ahora vamos a ver un panel, el panel Insertar.

El panel Insertar.
En el panel Insertar, encontramos todos los elementos que podemos encontrar en el men Insertar,
clasificados en categoras. Podemos emplearlo para insertar imgenes, enlaces, multimedia, tablas,
formularios... cualquier elemento que nuestra web necesite.

Como vemos en las imgenes, es posible configurar este panel para verlo como men (imagen
anterior), como panel flotante o como una barra de herramientas integrada en la ventana de
trabajo (imagen siguiente)

.
Personalizar el rea de trabajo es bastante intuitivo, pero si necesitas ayuda, te recomendamos
este avanzado

7. Lnea inferior de pestaas.

En al parte inferior de la pantalla tenemos una lnea que contiene varias pestaas (Buscar,
Validacin , ... )

Para abrir una pestaa basta hacer clic sobre ella, para cerrarla hacer doble clic en su ttulo.
Estas pestaas se pueden configurar de forma similar a como acabamos de ver con el rea de
paneles. Es decir, se pueden aadir y quitar, convertir en flotantes, etc.
Vistas de un documento

Podemos editar el documento con distintas vistas, que puedes cambiar travs de la barra de
documento:

8.- La vista Diseo

La vista Diseo permite trabajar con el editor visual.

Nos ofrece un aspecto muy similar al resultado final, pero totalmente editable.
9.- La vista Cdigo
La vista Cdigo se utiliza para poder trabajar en un entorno totalmente de programacin, de cdigo
fuente. No permite tener directamente una referencia visual de cmo va quedando el documento
segn se va modificando el cdigo.

El cdigo que vemos es el que genera Dreamweaver al editar el contenido en la vista Diseo.

- La vista Dividir
La vista Dividir permite dividir la ventana en dos zonas: Cdigo y Diseo. La zona izquierda muestra
el cdigo 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.

- La Vista en vivo
La vista en Vivo es una mejora reciente de Dreamweaver. Nos ofrece una vista del resultado final no
editable. A diferencia de la vista Diseo, que nos permite editar los elementos, esta vista nos
permite interactuar con ellos, tal como lo haramos con el navegador.
La funcin de esta vista es la de ahorrarnos tiempo, al no tener que comprobar que pequeos
cambios se previsualizan correctamente en el navegador.
No obstante, siempre hay que comprobar la pgina con los principales navegadores del mercado
que sern los que emplearn nuestros visitantes. De hecho, a lo largo del curso vers cmo algunos
elementos se ven de forma muy distinta si los vemos en la vista de diseo, en la vista en vivo o en
el navegador. Tambin es conveniente comprobar la pgina con los distintos tamaos de pantalla,
telfono mvil, tablet y PC.

- La vista Cdigo en vivo

Esta vista se emplea conjuntamente con la Vista en vivo. Divide la pantalla como la vista Dividir,
pero sin que podamos editar el cdigo. Lo que hace es que al seleccionar partes de la web en
la Vista en vivo, se seleccione su correspondiente cdigo fuente y refleja los cambios
dinmicamente al interactuar con la pgina. Si adems pulsamos el botn

podremos ver

los estilos asociados a cada elemento. Por ejemplo, al colocar el cursor sobre un prrafo podemos
ver sus mrgenes, como se aprecia en la siguiente imagen.

2.5. La ayuda

A travs del men Ayuda puedes ir a varias opciones, veamos algunas de ellas:

Si seleccionas la opcin Ayuda de Dreamweaver o simplemente pulsando F1 se accede a la ayuda

en lnea de Adobe Community Help donde puedes buscar por temas o por bsqueda de palabras
clave, .
Ayuda de Business Catalyst que es un sistema de alojamiento de pginas web con funciones
adicionales. Es de Adobe y hay diferentes opciones de pago al mes.
Ayuda de Spry Framework. Veremos Spry Framework a partir de la unidad 14.
Referencia abre un panel en el que encontrars la sintaxis y descripcin de las etiquetas HTML.
Acceder al Centro de soporte de Dreamweaver en la web.
Dreamweaver Exchange es un sistema para compartir extensiones.
Acceder al Foros en lnea de Adobe.
Adems, en la barra de aplicacin encontramos una caja de bsqueda. Al introducir los trminos de
la bsqueda y buscar, iremos a la ayuda online de Adobe.