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.

Dreamweaver

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.

Dreamweaver de Macromedia se ha convertido en la solución

estándar de la industria para el desarrollo profesional de la

Web y, actualmente, más de 3,2 millones de profesionales

utilizan Dreamweaver para desarrollar sus sitios Web. Con su

tecnología Roundtrip HTML, que protege la calidad del código

cuando el usuario alterna entre la vista del código y la del

diseño, Dreamweaver es la solución pionera para el desarrollo

profesional de sitios visuales en Internet. En el año 2000, en

respuesta a la creciente popularidad de las tecnologías de

servidor entre los desarrolladores de la Web, Macromedia

presentó Dreamweaver UltraDev, que, además de la

funcionalidad de Dreamweaver, ofrecía una serie de

herramientas para crear aplicaciones Web en ASP, JSP y

ColdFusion.

EVOLUCION

Entorno

de Dreamweaver CS6

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.

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.

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.

Herramientas

Herramientas

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 representación 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 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

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 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. A continuación vamos a ver el inspector de

Propiedades y más adelante veremos el panel Insertar.

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

En otros elementos, como párrafos y estilos, este panel

puede mostrar dos tipos de propiedades, HTML y CSS, que

podemos aplicar a los diferentes elementos de la página Web

que estemos diseñando.

Herramientas

HERRAMIENTAS

Enseguida de la barra de herramientas del documento se

observa la ventana o área de trabajo, que muestra el

documento actual que se está creando y editando, como

se muestra en la siguiente imagen.

Características

Ofrece la posibilidad de crear botones flash, formularios,

JavaScripts, y más, es de gran ayuda. Además de poder

insertar elementos web, encontramos una gran precisión

en la importación de información de Word y Excel, con las

funciones de copiar y pegar.

Dreamweaver es conocido por ofrecer herramientas

avanzadas en el desarrollo de sitios web, y si bien se trata

del producto de mayores características del mercado, su

uso está limitado a usuarios con experiencia, ya que de no

ser así, uno se encuentra con la dificultad de no saber por

dónde comenzar

Ventajas • La gran ventaja de este editor sobre otros

es su gran poder de ampliación y

personalización del mismo, puesto que en

este programa, sus rutinas (como la de

insertar un hipervínculo, una imagen o

añadir un comportamiento) están hechas

en Javascript-C, lo que le ofrece una gran

flexibilidad en estas materias.

•Como editor WYSIWYG que es,

Dreamweaver permite ocultar el

código HTML de cara al usuario, haciendo

posible que alguien no entendido pueda

crear páginas y sitios web fácilmente sin

necesidad de escribir código.

Desventajas

Aunque muchos usuarios afirmen en los

foros de DW que no tiene desventajas,

tampoco se puede decir que Dreamweaver

lo puede utilizar cualquiera, al ser tan

avanzado el único inconveniente es que

puede resultar difícil su manejo para

usuarios menos experimentados en el

diseño de páginas web, ya que quien lo

utiliza tiene que tener un conocimiento

básico de este programa.

Bien entonces una vez que ya hemos

analizado la definición, su características y

sus ventajas ya tenemos una idea de lo que

se trata Adobe Dreamweaver qué es lo que

nos ofrece y en qué nos puede servir. Pues

quizás los estudiantes no le veamos la

importancia de utilizar este programa, a lo

mejor no nos sirva ahora, pero cuando ya

nos involucremos en el campo laboral ya

sabremos cómo se utilizan los programas

de Adobe, además con esta práctica ya

tenemos una idea de lo que será nuestro

website, ese es el objetivo de estudiar ese

diseñador web

Configuración

Configuración rápida de un sitio web en

Dreamweaver

Configurar un sitio web en Dreamweaver es muy

sencillo, tan sólo es necesario especificar las

propiedades del sitio local y los parámetros de

conexión al sitio remoto utilizando un acceso FTP

para empezar a publicar archivos en el servidor.

Configurar un sitio web en Dreamweaver es muy sencillo, tan sólo es

necesario especificar las propiedades del sitio local y los

parámetros de conexión al sitio remoto (en este caso utilizando un

acceso FTP) para empezar a publicar archivos en el servidor. Inicie

Dreamweaver y en el menú superior seleccione Sitio / Administrar

sitios.... Aparecerá una nueva ventana, se trata del Administrador de

Sitios, haga clic en Nuevo... / Sitio para abrir la ventana de

configuración del nuevo sitio.

Definir una carpeta local

Definir una carpeta remota

Publicar archivos locales

Utilidades

•PLANTILLAS DISEÑO FLUIDO.

El acceso a la web a través de todo tipo de

dispositivos está experimentando un aumento

importante. Ahora es habitual acceder a internet

desde el teléfono móvil y desde las tabletas. Esto

complica el diseño de los sitios web porque los

dispositivos son de diferentes dimensiones.

Una forma de afrontar este problema es

utilizando el diseño fluido, este tipo de diseño

hace que la página se adapte automáticamente a

las dimensiones del dispositivo. Este tipo de

diseño utiliza HTML 5 por los que los navegadores

antiguos no son capaces de representarlo

correctamente. Sin embargo, existen librerías de

Javascript que solucionan este inconveniente

Utilidades •Integración con PhoneGap mejorada:

PhoneGap es un servicio para generar

aplicaciones para teléfonos móviles en las

plataformas más utilizadas (Android, Apple, ...)

ahora se ha mejorado la compatibildad con

PhoneGap desde Dreamweaver .

•Funciones exclusivas para Creative Cloud.

Creative Cloud:

Es la nueva forma de adquirir productos Adobe,

como Dreamweaver, mediante suscripción

mensual o anual, de esta forma se tiene acceso

más rapido a las actualizaciones y se puede

disponer de los archivos de trabajo en cualquier

ubicación con acceso a internet.

Utilidades •Transiciones

Las transiciones

permiten pasar

propiedades CSS de un

estado inicial a otro

estado final de forma

continua. Con

transiciones se pueden

lograr vistosos efectos

de animaciones.

•Fuentes Web

Existen sitios web con multitud de nuevas fuentes

que pueden dar un aire distinto a nuestros diseños

de páginas web. En esta versión, Dreamweaver

permite incorporar los archivos de nuevas fuentes

de forma sencilla.

Autor: CINTHYA ACOSTA