Departamento de Diseño Gráfico

Licenciatura en Diseño de la Imagen Visual

Diseño Interactivo II
¿Cómo crear un Sitio en Dreamweaver CC y configurarlo?
El siguiente tutorial muestra cómo crear un Sitio en Dreamweaver CC agregándole servidores de
prueba, servidores remotos y probando archivos en los servidores creados. Un Sitio en
Dreamweaver debe entenderse como un Proyecto en cualquier otro entorno de desarrollo.

Para hacerlo se tiene que abrir la aplicación, ingresar al menú Sitio y dar clic en la opción Nuevo
sitio… o Administrar sitios…, que se encuentra un poco más abajo.

Dreamweaver CC – Opción Nuevo Sitio

Si se da clic a Administrar sitios… se verá una ventana desde la cual también se podrá ver un botón
en la parte inferior para crear un Nuevo sitio

Dreamweaver CC – Ventana Administra Sitios

Se hace clic a dicho botón se mostrará una ventana llamada Configuración del sitio
 Departamento de Diseño Gráfico
Licenciatura en Diseño de la Imagen Visual
Diseño Interactivo II

Dreamweaver CC – Configuración del sitio

En esta ventana se asignará un nombre al Sitio haciendo uso del campo Nombre del sitio. Luego se
asignará una carpeta del disco duro local en la cual se almacenarán los archivos del sitio. Se
intentará siempre que la carpeta elegida en este paso sea distinta a una carpeta del servidor local, si
se tiene uno. Luego de haber asignado dichos valores se hace clic a Guardar y luego clic al botón
Listo. Se verá en el panel Archivos la carpeta del Sitio vacía.

Dreameaver CC – Panel Archivos

Para agregar archivos se puede hacer clic con el botón secundario del mouse sobre la carpeta del
Sitio en el Panel de Archivos y luego hacer clic a Nuevo archivo. Se le da el nombre index.html.
 Departamento de Diseño Gráfico
Licenciatura en Diseño de la Imagen Visual
Diseño Interactivo II

Dreamweaver CC – Nuevo Archivo

Pero el sitio que se ha creado aún no tiene servidores asociados. Entonces, se puede ingresar de
nuevo a Administrar sitios…, seleccionar el sitio que se ha creado y hacer clic a la opción Editar.
 Departamento de Diseño Gráfico
Licenciatura en Diseño de la Imagen Visual
Diseño Interactivo II

Dreamweaver CC – Editar Sitio

Esto los llevará de regreso a la ventana de Configuración del sitio desde la cual anteriormente
editamos el nombre y la ubicación de almacenamiento del sitio. Sin embargo, se tienen aún más
opciones por configurar. Estas opciones están agrupadas en 4 secciones: Sitio, Servidores, Control
de versión y Configuración avanzada. Todas estas secciones se pueden ver en la barra lateral
izquierda de la ventana Configuración del sitio.

Se hace clic a la sección Servidores desde la cual se procederá a configurar un servidor local de la
siguiente manera
 Departamento de Diseño Gráfico
Licenciatura en Diseño de la Imagen Visual
Diseño Interactivo II

Dreamweaver CC – Configurar Servidor Local

Se debe notar que la opción Carpeta del servidor no indica la misma ubicación que se había
configurado anteriormente para la carpeta en donde se almacenan los archivos del proyecto. En su
lugar, es una subcarpeta de la carpeta principal del servidor local web. También se puede ver que la
opción URL Webtiene una dirección del tipo localhost ya que es la dirección que se usará para poder
realizar pruebas en el servidor web local. Se debe marcar solo la opción De Prueba para este
servidor y se hace clic a Guardar.

Dreamweaver CC – Servidor de prueba

Para poder realizar pruebas en dicho servidor se procede a abrir un archivo y luego se usa el
menú Vista previa/Depurar en navegador. Para este ejemplo se usa la opción Vista previa en Google
Chrome
 Departamento de Diseño Gráfico
Licenciatura en Diseño de la Imagen Visual
Diseño Interactivo II

Dreamweaver CC – Vista previa en Google Chrome

Cuando se haga uso de esta opción se mostrará un mensaje preguntando si desea actualizar los
archivos en el servidor de prueba. Lo que hace realmente esta previsualización es mover archivos
desde la carpeta de almacenamiento del sitio hacia la carpeta correspondiente en el servidor de
prueba. Es por ello que se pregunta primero si se desean mover dichos archivos. En caso no se
muevan la vista previa se realizará haciendo uso de los archivos que anteriormente se encontraban
en la carpeta correspondiente del servidor. También pedirá mover archivos dependientes a lo cual
de nuevo deben responder afirmativamente. Con esto ya se podrá ver en el navegador elegido la
vista previa del archivo seleccionado.

Por último, deben de saber que se puede usar el servidor local como servidor de prueba y servidor
remoto a la vez. Aunque no tenga mucho sentido, Dreamweaver CC no lo impide.