Med

ios

On-

Line

T

ecn

olo

gía

s W

eb

Ing. En Sistemas Juan Carlos Pérez Reyes

Instalación de Dreamweaver

Mx enWindows. 

Med

ios

On-

Line

T

ecn

olo

gía

s W

eb

Ing. En Sistemas Juan Carlos Pérez Reyes

Dreamweaver Mx

Es el programa más utilizado en el sector del diseño y la programación web, por sus funcionalidades, su integración con otras herramientas como Adobe Flash y recientemente, por su soporte tanto para edición de imágenes como para animación a través de su integración con otras. Hasta la versión MX, fue duramente criticado por su escaso soporte de los estándares de la web, ya que el código que generaba era con frecuencia sólo válido para Internet Explorer y no validaba como HTML.

Med

ios

On-

Line

T

ecn

olo

gía

s W

eb

Ing. En Sistemas Juan Carlos Pérez Reyes

Instalación de Dreamweaver Mx en

Windows.  Al adquirir el producto de Dreamweaver Mx, le damos doble clic en el instalador para alojar toda la paquetería correspondiente al producto.

Med

ios

On-

Line

T

ecn

olo

gía

s W

eb

Ing. En Sistemas Juan Carlos Pérez Reyes

Posteriormente nos saldrá una ventana que cargara los archivos contenidos en el producto Dreamweaver Mx.

Med

ios

On-

Line

T

ecn

olo

gía

s W

eb

Ing. En Sistemas Juan Carlos Pérez Reyes

La siguiente ventana es la bienvenida al producto Dreamweaver Mx, donde le daremos clic izquierdo en el botón emergente con la leyenda siguiente.

Med

ios

On-

Line

T

ecn

olo

gía

s W

eb

Ing. En Sistemas Juan Carlos Pérez Reyes

En Esta ventana se muestra el acuerdo (licencia) del producto Dreamweaver Mx, tanto para el usuario independiente como para una empresa.

Una vez revisada la licencia si estamos de acuerdo con las normas del producto Dreamweaver Mx le daremos clic izquierdo en el botón emergente con la leyenda si.

Med

ios

On-

Line

T

ecn

olo

gía

s W

eb

Ing. En Sistemas Juan Carlos Pérez Reyes

Esta ventana es para elegir la ubicación del destino donde se instalara el producto Dreamweaver Mx, le damos clic izquierdo en el botón examinar y escogemos donde se almacenara el programa, es muy recomendable instalarlo en una nueva carpeta de la unidad del disco duro correspondiente a tu S.O.

Med

ios

On-

Line

T

ecn

olo

gía

s W

eb

Ing. En Sistemas Juan Carlos Pérez Reyes

Una vez elegida la ubicación del producto Dreamweaver Mx le daremos clic izquierdo en el botón emergente con la leyenda siguiente.

Med

ios

On-

Line

T

ecn

olo

gía

s W

eb

Ing. En Sistemas Juan Carlos Pérez Reyes

A continuación se muestra la ventada de configuración de los diferentes tipos de archivos que maneja el producto Dreamweaver Mx, donde veremos cuales usaremos y cuales no, una vez seleccionados le daremos clic izquierdo en el botón emergente con la leyenda siguiente.

Med

ios

On-

Line

T

ecn

olo

gía

s W

eb

Ing. En Sistemas Juan Carlos Pérez Reyes

Esta ventana muestra la configuración actual (copia de archivos), para instalar el producto Dreamweaver Mx, donde veremos el Directorio De Destino, Menú Inicio y Los archivos predeterminado con los cuales interactúa el programa, una vez revisada la configuración le daremos clic izquierdo en el botón emergente con la leyenda siguiente.

Med

ios

On-

Line

T

ecn

olo

gía

s W

eb

Ing. En Sistemas Juan Carlos Pérez Reyes

La siguiente ventana muestra el estado de la instalación actual (el porcentaje de la instalación) del producto Dreamweaver Mx.

Med

ios

On-

Line

T

ecn

olo

gía

s W

eb

Ing. En Sistemas Juan Carlos Pérez Reyes

Esta venta muestra el estado final de la instalación actual (el porcentaje de la instalación) del producto Dreamweaver Mx.

Med

ios

On-

Line

T

ecn

olo

gía

s W

eb

Ing. En Sistemas Juan Carlos Pérez Reyes

Al termino de la instalación del producto Dreamweaver Mx, se muestra la siguiente ventana, donde le daremos clic izquierdo en el botón emergente con la leyenda Finalizar.

Med

ios

On-

Line

T

ecn

olo

gía

s W

eb

Ing. En Sistemas Juan Carlos Pérez Reyes

Dreamweaver Mx nos muestra una ventana, donde nos permite elegir la configuración del espacio de trabajo, si somos principiantes la mejor opción es modo Diseñador, si tenemos un poco mas de conocimiento el modo codificador es la mejor opción, una vez elegido el modo le daremos clic izquierdo en el botón emergente con la leyenda Aceptar.

Med

ios

On-

Line

T

ecn

olo

gía

s W

eb

Ing. En Sistemas Juan Carlos Pérez Reyes

Dreamweaver Mx nos da la bienvenida a la activación del producto, y nos muestra una ventana con dos opciones, la primera es la activación de pago (numero de serie si compraste el producto) y la segunda es la versión de prueba (si lo descargaste gratuitamente tienes 30 días del producto), una vez elegida la activación del producto con numero de serie le daremos clic izquierdo en el botón emergente con la leyenda Continuar.

Med

ios

On-

Line

T

ecn

olo

gía

s W

eb

Ing. En Sistemas Juan Carlos Pérez Reyes

En esta ventana nos muestra donde se introducirá el numero de serie correspondiente al producto que hemos adquirido en este caso Dreamweaver Mx.

Med

ios

On-

Line

T

ecn

olo

gía

s W

eb

Ing. En Sistemas Juan Carlos Pérez Reyes

Una vez introducido el numero de serie nos mostrara una palomita verde (señal de que el producto asido activado en modo completo), le daremos clic izquierdo en el botón emergente con la leyenda Continuar.

Med

ios

On-

Line

T

ecn

olo

gía

s W

eb

Ing. En Sistemas Juan Carlos Pérez Reyes

Hecho estos pasos el producto Dreamweaver Mx empezara a cargar la interfaz del programa, para poder interactuar con el mismo.

Med

ios

On-

Line

T

ecn

olo

gía

s W

eb

Ing. En Sistemas Juan Carlos Pérez Reyes

Diferentes Vistas de

Dreamweaver: La barra

de herramientas documento.

Med

ios

On-

Line

T

ecn

olo

gía

s W

eb

Ing. En Sistemas Juan Carlos Pérez Reyes

Una vez instalado el programa Aparecerá la siguiente interfaz.

Med

ios

On-

Line

T

ecn

olo

gía

s W

eb

Ing. En Sistemas Juan Carlos Pérez Reyes

Seleccionamos en Crear nuevo la opción HTML o la que se acople a tus necesidades.

Med

ios

On-

Line

T

ecn

olo

gía

s W

eb

Ing. En Sistemas Juan Carlos Pérez Reyes

Una vez hecho nos mostrara el siguiente diseño, para empezar a editar tu sitio Web.

Med

ios

On-

Line

T

ecn

olo

gía

s W

eb

Ing. En Sistemas Juan Carlos Pérez Reyes

Antes de empezar a editar tu sitio Web, Lo primero que tenemos que hacer es crear una carpeta que será la carpeta en la que guardemos todas nuestras páginas, y todos los archivos que vayamos añadiendo, es la carpeta raíz del sitio. La podemos tener previamente creada o crearla a partir del Dreamweaver. Si tenemos dos particiones en el disco duro del ordenador, elegimos la parte destinada a datos.

Med

ios

On-

Line

T

ecn

olo

gía

s W

eb

Ing. En Sistemas Juan Carlos Pérez Reyes

A continuación le damos en la barra de herramientas en el menú desplegable Sitio y seleccionamos la opción Administrar sitios.

Med

ios

On-

Line

T

ecn

olo

gía

s W

eb

Ing. En Sistemas Juan Carlos Pérez Reyes

Después nos aparecerá el siguiente cuadro de diálogo:

Med

ios

On-

Line

T

ecn

olo

gía

s W

eb

Ing. En Sistemas Juan Carlos Pérez Reyes

Le daremos en la clic izquierdo en el botón Nuevo y escogeremos la opción Sitio.

Med

ios

On-

Line

T

ecn

olo

gía

s W

eb

Ing. En Sistemas Juan Carlos Pérez Reyes

Aparecerá momentáneamente este cuadro de diálogo:

Med

ios

On-

Line

T

ecn

olo

gía

s W

eb

Ing. En Sistemas Juan Carlos Pérez Reyes

Para, automáticamente, saltar a éste otro.

En el caso de que no salte automáticamente, se le da al botón Editar

Med

ios

On-

Line

T

ecn

olo

gía

s W

eb

Ing. En Sistemas Juan Carlos Pérez Reyes

Le daremos un clic en la pestaña Avanzadas. Lo primero que hacemos es poner un nombre al sitio. Por ejemplo, Mi primer sitio y, acto seguido, pinchamos en la carpeta de Carpeta raíz local.

Med

ios

On-

Line

T

ecn

olo

gía

s W

eb

Ing. En Sistemas Juan Carlos Pérez Reyes

Nos vamos a un disco duro, por ejemplo D

Pinchamos en crear nueva carpeta y le ponemos como nombre mi_primer_sitio (nombre sin espacios vacíos, sin acentos, sin caracteres especiales, preferiblemente minúsculas). 

Med

ios

On-

Line

T

ecn

olo

gía

s W

eb

Ing. En Sistemas Juan Carlos Pérez Reyes

Hacemos doble clic en Abrir.

Después en Seleccionar.

Med

ios

On-

Line

T

ecn

olo

gía

s W

eb

Ing. En Sistemas Juan Carlos Pérez Reyes

En esta ventana se observa que ya tenemos definido el sitio con un nombre: “Mi primer sitio” y en una carpeta mi_primer_sitio. Le damos clic en el botón Aceptar.

Med

ios

On-

Line

T

ecn

olo

gía

s W

eb

Ing. En Sistemas Juan Carlos Pérez Reyes

Después nos saldrá esta ventana donde le daremos clic en el botón Listo.

Med

ios

On-

Line

T

ecn

olo

gía

s W

eb

Ing. En Sistemas Juan Carlos Pérez Reyes

Aparece abierto el Campo “Mi primer sitio” que está alojado en la carpeta mi_primer_sitio dentro del disco duro D, Sitio – mi primer sitio (la ubicación donde se guardo).

Med

ios

On-

Line

T

ecn

olo

gía

s W

eb

Ing. En Sistemas Juan Carlos Pérez Reyes

Para crear la primera página (el primer documento) podemos, simplemente, hacer clic en Crear nuevo > HTML en el "tablón de mandos" que aparece en el espacio central principal.

Med

ios

On-

Line

T

ecn

olo

gía

s W

eb

Ing. En Sistemas Juan Carlos Pérez Reyes

Aparecerá nuestro primer documento que, a falta de guardarlo con un nombre, Dreamweaver lo llama Untitled-1

Med

ios

On-

Line

T

ecn

olo

gía

s W

eb

Ing. En Sistemas Juan Carlos Pérez Reyes

Pero este tablón de mandos no siempre va a estar visible. El mejor método es hacerlo por medio de Archivo > Nuevo.

Med

ios

On-

Line

T

ecn

olo

gía

s W

eb

Ing. En Sistemas Juan Carlos Pérez Reyes

Aparecerá este nuevo cuadro de diálogo. Elegimos Página básica y HTML y pulsamos en el botón Crear.

Y llegaremos al mismo sitio ya explicado, un Untitled-1 listo para convertirse en nuestra primera página.

Med

ios

On-

Line

T

ecn

olo

gía

s W

eb

Ing. En Sistemas Juan Carlos Pérez Reyes

Procedemos, a continuación, a su guardado. Le damos a Archivo > Guardar.

Dreamweaver procederá a guardar el documento en la carpeta raíz del sitio.

Med

ios

On-

Line

T

ecn

olo

gía

s W

eb

Ing. En Sistemas Juan Carlos Pérez Reyes

Como va a ser el primer documento del sitio, podemos llamarlo index.htm.

Pulsamos el botón Guardar. Observa cómo se ha incorporado el nombre del archivo en la pestaña superior.

Y observa también cómo se ha colocado el archivo en la barra lateral derecha de la interfaz:

Med

ios

On-

Line

T

ecn

olo

gía

s W

eb

Ing. En Sistemas Juan Carlos Pérez Reyes

A continuación, procedemos a poner un título al documento:

Los títulos de los documentos se pueden (y se deben) escribir con la normas de ortografía habituales del idioma. Es un tema importante: Aparecerá en la barra superior de navegación, es el nombre con el que la página se guarda en Favoritos o en Marcadores y es, también, el nombre con el que los buscadores encuentran una determinada página.

Pulsamos la tecla F12 para hacer saltar al navegador. Si no hemos guardado la página previamente, nos preguntará:

Med

ios

On-

Line

T

ecn

olo

gía

s W

eb

Ing. En Sistemas Juan Carlos Pérez Reyes

Le decimos que Sí y vemos nuestra página:

Se me ha cargado en el FireFox de Mozilla (mi navegador predeterminado) pero debemos probar siempre nuestras páginas con, al menos, otro navegador. Por ejemplo el Explorer. Cargo la página en el Explorer: