Diseo Digital IV.

Diseo Digital V. Gua 4

Gua 4. Tema: Introduccin a Dreamweaver

Objetivo Especfico
Introducir al alumno a la interfaz de Dreamweaver, y que se familiarice con las herramientas y paneles bsicos del programa.

Contenidos
-Interfaz de Usuario -Crear Nuevos Documentos -Diseo y Cdigo de pginas Web -Creacin, Configuracin y Administracin de Sitios

Materiales
-Gua 4 previamente leda y hoja de cotejo correspondiente a la gua 4.

Introduccin terica Introduccin a Dreamweaver

Adobe Dreamweaver CS4 es uno de los programas ms utilizados para el diseo, desarrollo y el mantenimiento de aplicaciones y sitios Web basados en estndares. Gracias a la diversidad y versatilidad de sus herramientas es posible crear fcil y rpidamente sitios Web. Dreamweaver es un editor de HTML visual, lo que significa una herramienta valiosa para los diseadores.

Interfaz de Usuario de Dreamweaver

Al acceder a Dreamweaver CS4, aparece la ventana de bienvenida que permite el acceso a las acciones utilizadas con mayor frecuencia. Por defecto, Dreamweaver utiliza el espacio de trabajo

Diseo Digital V. Gua 4

Diseador. Los grupos de paneles se pueden mostrar u ocultar segn las preferencias del usuario.

A. Barra de Mens B. Barra de aplicaciones C. Barra de Herramientas Documento D. Ventana del Documento E. Inspector de Propiedades F. Ventana Insertar G. Ventana Archivo

La nueva interfaz de usuario de Adobe Dreamweaver permite trabajar de manera ms rpida debido a que todos los elementos del rea de trabajo se encuentran integrados en nica ventana. Adems los documentos abiertos aparecen en fichas independientes lo que permite una navegabilidad sencilla entre ellas.

Previsualizacin de fichas de documentos abiertos

El espacio de trabajo de Dreamweaver incluye los siguientes elementos: Ventana de bienvenida: Le permite abrir un documento reciente o crear un documento nuevo. Barra de la aplicacin: A lo largo de su parte superior, la ventana de la aplicacin contiene un conmutador de espacios de trabajo, mens (slo Windows) y otros controles de aplicacin. Barra de herramientas Documento: Contiene botones que proporcionan opciones para diferentes vistas de la ventana de documento (como la vista Diseo y la vista Cdigo), diversas opciones de visualizacin y algunas operaciones comunes como la obtencin de una vista previa en un navegador. Barra de herramientas Estndar: (No se muestra en el diseo de espacio de trabajo predeterminado) Contiene botones para las operaciones ms habituales de los mens Archivo

Diseo Digital V. Gua 4

y Edicin: Nuevo, Abrir, Examinar en Brigde, Guardar, Guardar todo, Imprimir cdigo, Cortar, Copiar, Pegar, Deshacer y Rehacer. Para mostrar la barra de herramientas Estndar, seleccione Ver > Barras de herramientas > Estndar. Barra de herramientas Codificacin: (Slo se muestra en la vista Cdigo.) Contiene botones que le permiten realizar numerosas operaciones de codificacin estndar. Barra de herramientas Representacin de estilos: (Oculta de manera predeterminada) Contiene botones que le permiten ver cmo aparecera el diseo en distintos tipos de medios sin utilizase hojas de estilos dependientes de los medios. Tambin contiene un botn que le permite activar o desactivar estilos de hojas de estilos en cascada (CSS). Ventana de documento: Muestra el documento actual mientras lo est creando y editando. Inspector de propiedades: Le permite ver y cambiar diversas propiedades del objeto o texto seleccionado. Cada objeto tiene propiedades distintas. El inspector de propiedades no est ampliado de forma predeterminada en el diseo del espacio de trabajo del codificador.

El inspector de propiedades se encuentra, de manera predeterminada, en el borde inferior del espacio de trabajo, aunque puede desacoplarlo y convertirlo en un panel flotante en el espacio de trabajo.

Selector de etiquetas: Situado en la barra de estado de la parte inferior de la ventana de documento. Muestra la jerarqua de etiquetas que rodea a la seleccin actual. Haga clic en cualquier etiqueta de la jerarqua para seleccionar la etiqueta y todo su contenido. Paneles: Le ayudan a supervisar y modificar el trabajo realizado. Ejemplos de paneles son el panel Insertar, el panel Estilos CSS y el panel Archivos. Para ampliar un panel, haga doble clic en su ficha. Panel Insertar: Contiene botones para la insercin de diversos tipos de objeto, como imgenes, tablas y elementos multimedia, en un documento. Cada objeto es un fragmento de cdigo HTML que le permite establecer diversos atributos al insertarlo. Por ejemplo, puede insertar una tabla haciendo clic en el botn Tabla del panel Insertar. Si lo prefiere, puede insertar objetos utilizando el men Insertar en lugar del panel Insertar. Panel Archivos: Le permite administrar los archivos y las carpetas, tanto si forman parte de un sitio de Dreamweaver como si se encuentran en un servidor remoto. El panel Archivos tambin proporciona acceso a todos los archivos del disco local, como ocurre en el Explorador de Windows (Windows) o en el Finder (Macintosh).

Diseo Digital V. Gua 4

Crear Nuevos Documentos HTML

Para crear nuevos documentos en Dreamweaver existen diversas opciones, la ms comn, es crearla mediante la ventana de bienvenida, donde se despliegan los diferentes tipos de documentos. Dreamweaver permite crear y editar otro tipo de documentos basados en otros lenguajes de programacin, adems de las tradicionales pginas HTML.

Previsualizacin de la Ventana de Bienvenida para creae nuevos documentos

Otra manera de crear un nuevo documento, es mediante el cuadro de dilogo Nuevo Documento. Para accesar a este cuadro de dilogo, dirjase al men Archivo en la barra de mens y elija la opcin Nuevo (manzana+n). A continuacin se desplegar el cuadro de dilogo Nuevo Documento:

Cuadro de dilogo Nuevo Documento

La primera columna de opciones del cuadro de dilogo Nuevo Documento permite la creacin de una pgina en blanco, una plantilla en blanco, una pgina de muestra u otro tipo de documento. En el panel de la derecha se muestran los tipos de pgina, que varan segn el tipo de documento seleccionado.

Diseo Digital V. Gua 4

Diseo y Cdigo de Pginas Web

Dreamweaver es un editor visual de pginas web, por lo que no es necesario conocer el lenguaje de programacin para editarlas. Pero el programa tambin permite la edicin directa del cdigo, de modo que los programadores experimentados pueden introducir directamente las instrucciones. Dreamweaver ofrece opciones que le permiten nicamente visualizar el cdigo HTML o nicamente el diseo, o tener una vista divida cdigo/diseo. En la Barra de Herramientas Documento puede encontrar las diferentes opciones para variar de una vista a otra.

A. Mostrar vista de cdigo B. Mostrar vistas de cdigo y diseo C. Mostrar vista de diseo D. Vista en vivo E. Vista Cdigo en vivo F. Ttulo del documento G. Administracin de archivos H. Vista previa/Depurar en explorador I. Actualizar vista de diseo J. Ver opciones K. Ayudas visuales L. Validar formato M. Comprobar compatibilidad con navegadores

Vista Diseo y Vista Cdigo Toda accin realizada de modo visual tiene su reflejo en la programacin de la aplicacin. Vista Diseo: Un entorno para el diseo visual de la pgina, la edicin visual y el desarrollo rpido de aplicaciones. En esta vista, Dreamweaver muestra una representacin visual del documento completamente editable, similar a la que aparecera en un navegador. Vista Cdigo: Un entorno de codificacin manual para escribir y editar cdigo HTML, JavaScript, cdigo de lenguaje de servidor, como por ejemplo PHP o ColdFusion Markup Language (CFML), y otros tipos de cdigo. Vista de cdigo dividida: Versin dividida de la vista Cdigo que le permite desplazarse por el trabajo realizado en diferentes secciones del documento a la vez. Vistas Cdigo y Diseo: Le permite ver las dos vistas, Cdigo y Diseo, para el mismo documento en una sola ventana. Vista en vivo: La Vista en vivo, que es similar a la vista Diseo, muestra una representacin ms realista de la apariencia que tendr el documento en un navegador y le permite interactuar con el documento de la misma forma que lo hara en un navegador. La Vista en vivo no es editable. No obstante, puede realizar modificaciones en la vista Cdigo y actualizar la Vista en vivo para ver los cambios. Vista Cdigo en vivo: Slo est disponible al visualizar un documento en la Vista en vivo. La vista Cdigo en vivo muestra el cdigo que un navegador utiliza para ejecutar la pgina

Diseo Digital V. Gua 4

y cambia dinmicamente conforme se interacta con la pgina en la Vista en vivo. La vista Cdigo en vivo no es editable.

Creacin, Configuracin y Administracin de Sitios

En Dreamweaver, el trmino sitio se emplea para referirse a una ubicacin de almacenamiento local o remota de los documentos que pertenecen a un sitio Web. Un sitio de Dreamweaver permite organizar y administrar todos los documentos Web, cargar el sitio en un servidor Web, controlar y mantener vnculos y administrar y compartir archivos. Para aprovechar al mximo las funciones de Dreamweaver, debe definir un sitio. Nota: Para definir un sitio de Dreamweaver, slo tiene que configurar una carpeta local. Sin embargo, para transferir archivos a un servidor Web o desarrollar aplicaciones Web, tambin debe aadir datos para un sitio remoto y un servidor de prueba. Un sitio de Dreamweaver consta de un mximo de tres partes o carpetas, segn el entorno de desarrollo y el tipo de sitio Web que se desarrolle: Carpeta raz local: Almacena los archivos con los que est trabajando. Dreamweaver se refiere a esta carpeta como el sitio local. Esta carpeta suele encontrarse en el equipo local, pero tambin se puede encontrar en un servidor de red. Carpeta remota: Almacena los archivos para pruebas, produccin, colaboracin, etc. Dreamweaver se refiere a esta carpeta como el sitio remoto en el panel Archivos. En general, la carpeta remota suele colocarse en el equipo donde se ejecuta el servidor Web. La carpeta remota incluye los archivos a los que los usuarios acceden en Internet. Las carpetas locales y remotas permiten transferir archivos entre el disco duro local y el servidor Web, lo cual facilita la administracin de los archivos en los sitios de Dreamweaver. Se trabaja en archivos en la carpeta local y se publican en la carpeta remota cuando se desea que otras personas los puedan ver. Carpeta de servidor de prueba: La carpeta en la que Dreamweaver procesa pginas dinmicas.

Configuracin de un Sitio Local Un sitio en Dreamweaver consta de dos partes: un conjunto de archivos situados en un equipo local (el sitio local) y una ubicacin en un servidor Web remoto donde publicar los archivos (el sitio remoto, espacio Web o alojamiento Web). El mtodo ms comn para crear un sitio Web utilizando Dreamweaver consiste en crear y editar pginas en el disco local y, a continuacin, publicar copias de esas pginas en el servidor Web remoto para ponerlas a disposicin pblica.

Diseo Digital V. Gua 4

Definir una Carpeta Local La carpeta raz local es el directorio de trabajo del sitio de Dreamweaver. Esta carpeta puede encontrarse en el equipo local o en un servidor de red. Si desea comenzar a editar archivos en su equipo (sin publicarlos), configure solamente una carpeta local y, ms adelante, aada la informacin remota y de prueba. Nota: No necesita especificar una carpeta remota si la carpeta raz local est en el sistema que ejecuta el servidor Web. Esto implica que el servidor Web se ejecuta en el equipo local. 1. Seleccione una de las siguientes opciones:
Para configurar un sitio nuevo, seleccione Sitio > Nuevo sitio, o haga clic en la barra de aplicaciones en el botn nuevo sitio:

Botn Nuevo sitio de la Barra de Aplicaciones

Para editar la configuracin de un sitio existente en el disco local o un sitio remoto (o una rama de un sitio remoto), con independencia de si se cre en Dreamweaver o no, elija Sitio > Administrar sitios, seleccione el sitio y haga clic en Editar.

2. Introduzca la informacin de configuracin en el cuadro de dilogo Definicin del sitio:

Para configurar un sitio utilizando el asistente para la configuracin de sitios, haga clic en la ficha Bsicas y siga las instrucciones.

Cuadro de Dilogo del asistente para la Definicin de un Sitio

Diseo Digital V. Gua 4

Para configurar directamente las carpetas local, remota y de prueba (para procesar pginas dinmicas), haga clic en la ficha Avanzadas, seleccione la categora Datos locales y establezca las opciones. (Recomendado)

Cuadro de Dilogo de la ficha Avanzadas, del cuadro de dilogo Definicin de un Sitio

Nota: Slo se requieren las dos primeras opciones de la categora Datos locales de la ficha Avanzadas para configurar un sitio de trabajo en el equipo. Nombre del sitio: El nombre que aparece en el panel Archivos y en el cuadro de dilogo Administrar sitios; no aparece en el navegador. Carpeta raz local: El nombre de la carpeta del disco local en la que se almacenan los archivos del sitio, las plantillas y los elementos de biblioteca. Cree una carpeta en el disco duro o haga clic en el icono de carpeta para localizar la carpeta. Cuando Dreamweaver resuelve vnculos relativos a la raz, toma como referencia esta carpeta. Carpeta predeterminada de imgenes: La ruta de la carpeta en la que se almacenan las imgenes que utiliza en el sitio. Introduzca la ruta o haga clic en el icono de carpeta para localizar la carpeta. Vnculos relativos a: Cambia la ruta relativa de los vnculos que cree con otras pginas del sitio. De manera predeterminada, Dreamweaver crea vnculos mediante rutas relativas a documentos. Seleccione la opcin Raz del sitio para cambiar la configuracin de ruta y asegrese de que especifica la direccin HTTP en la opcin Direccin HTTP. El cambio de esta configuracin no convierte la ruta de vnculos existentes; la configuracin slo ser aplicable a los nuevos vnculos que cree visualmente con Dreamweaver.

10

Diseo Digital V. Gua 4

El contenido vinculado a la ruta relativa a la raz del sitio no se muestra en la vista previa de los documentos en un navegador local, a menos que especifique un servidor de prueba o que active la opcin Vista previa utilizando el archivo temporal en Edicin > Preferencias > Vista previa en el navegador. Esto es as porque los navegadores no reconocen la raz de los sitios. Direccin http: El URL que utilizar el sitio Web. Esto permite que Dreamweaver verifique los vnculos del sitio que utilicen URL absolutos o rutas relativas a la raz del sitio. Dreamweaver tambin utiliza esta direccin para asegurarse de que los vnculos relativos a la raz del sitio funcionan en el servidor remoto, que puede tener una raz del sitio diferente. Por ejemplo, si establece un vnculo con un archivo de imagen ubicado en la carpeta C:\Sales\images\ (donde Sales es la carpeta raz local) y el URL del sitio completo es http://www.mysite.com/ SalesApp/ (donde SalesApp es la carpeta raz remota), la introduccin del URL en el cuadro de texto Direccin HTTP garantizar que la ruta de acceso a la imagen vinculada en el servidor remoto sea /SalesApp/images/. Usar verificacin de vnculos con distincin entre maysculas y minsculas: Comprueba que coincidan las maysculas y minsculas de los vnculos y los nombres de archivos cuando Dreamweaver comprueba los vnculos. Esta opcin resulta til en sistemas UNIX en los que los nombres de archivo distinguen entre maysculas y minsculas. Activar cach: Indica si debe crearse un cach local para mejorar la velocidad de las tareas de administracin de vnculos y sitios. Si no selecciona esta opcin, Dreamweaver volver a preguntarle si desea utilizar un cach antes de crear el sitio. Es recomendable seleccionar esta opcin porque el panel Activos (en el grupo de paneles Archivos) slo funciona si se ha creado un cach. 3. Haga clic en Aceptar y en Listo para crear el sitio (que se muestra en el panel Archivos). Definir una Carpeta Remota La carpeta remota es el lugar donde se almacenan los archivos para produccin, colaboracin, implementacin u otros fines. En general, la carpeta remota suele colocarse en el equipo donde se ejecuta el servidor Web. Puede establecer opciones para esta carpeta respondiendo a las preguntas del asistente de la ficha Bsicas o haciendo clic en la ficha Avanzadas para introducir la informacin directamente. En el panel Archivos de Dreamweaver, la carpeta remota se denomina sitio remoto. Al configurar una carpeta remota, debe seleccionar un mtodo de acceso para que Dreamweaver cargue y descargue archivos del servidor Web. En la misma ventana de configuracin del nuevo sitio haga clic en la categora Datos Remotos y en tipo de acceso seleccione FTP. Introduzca el nombre del Servidor FTP. En el cuadro Directorio del Servidor introduzca la ruta del servidor desde la carpeta raz FTP hasta la carpeta raz del sitio remoto. A continuacin introduzca su nombre de usuario y contrasea en los cuadros de texto

Diseo Digital V. Gua 4

11

correspondientes y para comprobar que los datos de acceso al servidor remoto son correctos haga clic en Prueba. Mantenga el resto de opciones desactivadas. Para guardar la configuracin haga clic en Aceptar y en la ventana del Administrador de Sitios haga clic en Listo.

Cuadro de Dilogo de la configuracin de Datos Remotos

Administrar Sitios Locales Para facilitar su gestin posterior, Dreamweaver permite estructurar un sitio antes de empezar a editar sus documentos. El panel Archivos, permite visualizar archivos y carpetas, diferenciando los asociados a un determinado sitio. Utilice este panel para realizar las siguientes operaciones:

Acceder a sitios, a un servidor y a unidades locales Visualizar archivos y carpetas Administrar archivos y carpetas en el panel Archivos

12

Diseo Digital V. Gua 4

Panel Archivo

Puede abrir archivos o cambiarles el nombre, aadir, mover o eliminar archivos, o actualizar el panel Archivos tras realizar los cambios.

Abrir un archivo 1. En el panel Archivos (Ventana > Archivos), seleccione un sitio, un servidor o una unidad en el men emergente (donde aparece el sitio, el servidor o la unidad actual). 2. Localice y seleccione el archivo que desea abrir. 3. Siga uno de estos procedimientos:

Haga doble clic en el icono del archivo. Haga clic con el botn derecho (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) en el icono del archivo y elija Abrir.

Dreamweaver abre el archivo en la ventana de documento.

Creacin de un archivo o carpeta 1. En el panel Archivos (Ventana > Archivos), seleccione un archivo o una carpeta. Dreamweaver crear el archivo o carpeta dentro de la carpeta seleccionada, o en la misma carpeta que el archivo seleccionado.

Diseo Digital V. Gua 4

13

2. Haga clic con el botn derecho del ratn (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) y seleccione Nuevo archivo o Nueva carpeta. 3. Introduzca un nombre para el nuevo archivo o carpeta. 4. Presione Intro (Windows) o Retorno (Macintosh).

Eliminacin de un archivo o carpeta 1. En el panel Archivos (Ventana > Archivos), seleccione el archivo o la carpeta que desea eliminar. 2. Haga clic con el botn derecho del ratn (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) y seleccione Edicin > Eliminar.

Cambio del nombre de un archivo o carpeta 1. En el panel Archivos (Ventana > Archivos), seleccione el archivo o carpeta cuyo nombre desee cambiar. 2. Siga uno de estos procedimientos para activar el nombre del archivo o carpeta:

Haga clic en el nombre del archivo, haga una pausa y vuelva a hacer clic en el nombre. Haga clic con el botn derecho (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) en el icono del archivo y elija Edicin > Cambiar nombre.

3. Escriba el nuevo nombre sobre el anterior. 4. Presione Intro (Windows) o Retorno (Macintosh).

Traslado de un archivo o carpeta 1. En el panel Archivos (Ventana > Archivos), seleccione el archivo o la carpeta que desea mover. 2. Siga uno de estos procedimientos:

Copie el archivo o carpeta y pguelo en una nueva ubicacin. Arrastre el archivo o carpeta a una nueva ubicacin.

3. Actualice el panel Archivos para ver el archivo o carpeta en su nueva ubicacin.

14

Diseo Digital V. Gua 4

Procedimiento.
1- Cree un nuevo documento HTML por medio de la ventana de Bienvenida de Dreamweaver CS4, o en el men Archivo > Nuevo > Pgina en Blanco > HTML.

2- Una vez creado su nuevo documento, configure un nuevo sitio (carpeta local) a travs del botn Sitio de la barra de aplicaciones, haciendo clic en la opcin Nuevo Sitio. 3- Se desplegar en su pantalla el cuadro de dilogo del asistente de Definicin del Sitio. En la primera pantalla aparecer el nombre que le asignar a la carpeta local:

4- En la siguiente pantalla, escoja la primera opcin:

Nmbrelo como guia4, sin espacios, sin maysculas y sin tildes. Haga clic en siguiente.

5- A continuacin, escoja la opcin de editar copias locales, debido a que no se est conectando con un servidor. Generalmente los archivos HTML se editan en la carpeta local y cuando estn listos se suben a la carpeta remota.

Haga clic en siguiente.

En la segunda opcin: En qu lugar del equipo desea almacenar los archivos durante la etapa de desarrollo?, cree dentro de su carpeta personal una nueva carpeta denominada: guia4_sitio. 6- En la siguiente pantalla escoja la opcin Ninguno, debido a que no est conectando ni configurando una carpeta remota, nicamente est configurando una carpeta local. Haga clic en siguiente.

Diseo Digital V. Gua 4

15

7- A continuacin aparecer el resumen de las especificaciones que defini para la configuracin de su sitio en una carpeta local. Haga clic en Listo.

8- Aparecer automticamente en el panel Archivo el nuevo sitio configurado en la carpeta local. Guarde el HTML que cre al principio con el nombre de index.html, en esa carpeta local que acaba de crear. Observe como automticamente aparece el HTML en el Panel Archivo. 9- Por ltimo, cree desde el panel Archivo una nueva carpeta y nmbrela como images. Observe que el Panel Archivo se actualiza automticamente, y es debido a que ha configurado un nuevo sitio en una carpeta local.

10- Entregue a su instructor la hoja de evaluacin correspondiente a la gua 4 y asegrese que sus archivos y carpetas se encuentren dentro de su carpeta personal.

Bibliografa.

16

Diseo Digital V. Gua 4

Hoja de Resultados

Hoja de resultados

Gua Introduccin a Dreamweaver Gua 4:X: Presentacin del programa

Tema: Presentacin del programa

NOTA FINAL:

Alumno:

MquinaNo:

Alumno:: Docente

MquinaNo: GL:

Fecha:

Docente:
EVALUACIN
% 1-4 Conocimiento deficiente de los conceptos de Creacin, Configuracin y Administracin de Sitios 5-7

GL:
8-10 Conocimiento completo y explicacin clara de los conceptos de creacin, configuracin y administracin de sitios Configur correctamente un nuevo sitio en una carpeta local siguiendo las especificaciones definidas por el docente Cre correctamente la carpeta images desde el panel Archivo Cre correctamente desde el panel Archivo un nuevo documento index. html Trajo los materiales requeridos para la prctica y fueron presentados puntualmente. Tiene actitud proactiva y sus propuestas son concretas. Nota

CONOCIMIENTO
Creacin, Configuracin y Administracin de Sitios

30%

Conocimiento y explicacin incompleta de los conceptos de creacin, configuracin y administracin de sitios

APLICACIN DEL CONOCIMIENTO

20% No configur el sitio

Configur un nuevo sitio pero no con las especificaciones definidas por el docente

10%

No cre la carpeta images

Cre la carpeta pero no en la ubicacin correcta o con el nombre correcto

10%

No cre el archivo index.html

Cre el archivo index. html, pero no en la ubicacin correcta o con el nombre correcto Los materiales requeridos para la prctica no estn desarrollados adecuadamente o no fueron entregados puntualmente. Actitud propositiva y con propuestas no aplicables al contenido de la gua.

ACTITUD
Responsabilidad, lectura de guas de laboratorio, materiales requeridos para la prctica, bocetos 20%

Materiales incompletos o no cumplen con lo requerido para la prctica.

10%

No tiene actitud proactiva.