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: