Forinsur S.L.

Centro de Formacin | Manual de Usuario

Introduccin a Macromedia Dreamweaver CS3

Introduccin a Macromedia Dreamweaver CS3 Macromedia Dreamweaver CS3 es un editor HTML profesional para disear, codificar y desarrollar sitios, pginas y aplicaciones Web. Tanto si desea controlar manualmente el cdigo HTML como si prefiere trabajar en un entorno de edicin visual, Dreamweaver le proporciona tiles herramientas que mejorarn su experiencia de creacin Web. Este inicio es una introduccin para utilizar Macromedia Dreamweaver CS3 dirigida a los usuarios que no estn familiarizados con algn aspecto fundamental de esta aplicacin. Las funciones de edicin visual de Dreamweaver permiten crear pginas Web de forma rpida, sin escribir una sola lnea de cdigo. Puede ver todos los elementos o activos del sitio y arrastrarlos desde un panel fcil de usar directamente hasta un documento. Puede agilizar el flujo de trabajo de desarrollo mediante la creacin y edicin de imgenes en Macromedia Fireworks o en otra aplicacin de grficos y su posterior importacin directa a Dreamweaver. Dreamweaver tambin contiene herramientas que facilitan la adicin de activos de Flash a las pginas web. Adems de las funciones de arrastrar y soltar que le ayudan a crear pginas web, Dreamweaver le ofrece un entorno de codificacin con todas las funciones, que incluye herramientas para la edicin de cdigo (tales como coloreado de cdigo, terminacin automtica de etiquetas, barra de herramientas para codificacin y contraccin de cdigo) y material de referencia para lenguajes sobre hojas de estilos en cascada (CSS), JavaScript y ColdFusion Markup Language (CFML) entre otros. La tecnologa Roundtrip HTML de Macromedia importa los documentos con cdigo manual HTML sin modificar el formato del cdigo. Posteriormente, si lo desea, puede formatear el cdigo con el estilo que prefiera. Adems, Dreamweaver le permite crear aplicaciones Web dinmicas basadas en bases de datos empleando tecnologas de servidor como CFML, ASP.NET, ASP, JSP y PHP. Si prefiere trabajar con datos en XML, Dreamweaver

Tcnico Especialista en Diseo, Animacin y Programacin Web

incorpora herramientas que le permiten crear fcilmente pginas XSLT, adjuntar archivos XML y mostrar datos XML en sus pginas. Dreamweaver se puede personalizar totalmente. Puede crear sus propios objetos y comandos, modificar mtodos abreviados de teclado e incluso escribir cdigo JavaScript para ampliar las posibilidades que ofrece Dreamweaver con nuevos comportamientos, inspectores de propiedades e informes de sitios. Macromedia Dreamweaver CS3 incluye diversos recursos para ayudarle a aprender rpidamente el funcionamiento del programa y a dominar la creacin de sus propias pginas Web. Toda la documentacin de Dreamweaver est disponible en formatos de ayuda electrnica y PDF. El sistema de ayuda en lnea disponible a travs del men de Ayuda contiene informacin detallada sobre todas las operaciones que puede realizar con Dreamweaver. Novedades Dreamweaver CS3 incorpora muchas funciones nuevas que le ayudarn a disear pginas Web y aplicaciones con un mnimo de tiempo y esfuerzo. Dreamweaver simplifica las tecnologas ms complejas y las hace accesibles, ayudndole a conseguir ms en menos tiempo. stas son algunas de las nuevas funciones de Dreamweaver: Herramienta Zoom y guas Vinculacin de datos visual de XML Nuevo panel de estilos CSS Visualizacin de diseo CSS Contraccin de cdigo Barra de herramientas de codificacin Transferencia de archivos en segundo plano Insercin de comando de Fash Video

o o o o o o o o

Dreamweaver CS3 incluye herramientas para trabajar aplicaciones que manejan XML, as como mejoras a su manejo de hojas de estilo (CSS). Del lado del XML, incluye interesantes herramientas visuales para incluir contenidos de este formato como son los feeds RSS, integrndolos fcilmente en sitios web y aplicaciones.

Forinsur S.L. Centro de Formacin | Manual de Usuario

Para el trabajo con CSS han simplificado la creacin y manejo de diferentes estilos, promoviendo los estndares para nuevos usuarios y facilitando su aplicacin para usuarios avanzados. Tambin han buscado facilitar la difusin de Flash Video, con herramientas que permiten incluir este formato muy fcilmente en pginas web. Adems incluye nuevas herramientas de zoom y gua para revisar los diseos. Y una barra de codigo para accesar funciones frecuentes. Destaca tambin que las funciones para cargar y descargar archivos ahora funcionan en el background sin interrumpir la productividad en el programa. Espacio de trabajo El espacio de trabajo de Dreamweaver permite ver las propiedades de los documentos y los objetos. Adems, coloca muchas de las operaciones ms frecuentes en barras de herramientas para que pueda realizar cambios en los documentos rpidamente.

Tcnico Especialista en Diseo, Animacin y Programacin Web

En Windows, Dreamweaver proporciona un diseo integrado en una nica ventana. En el espacio de trabajo integrado, todas las ventanas y paneles estn integrados en una nica ventana de la aplicacin de mayor tamao.

o Ventana de documento
La ventana de documento muestra el documento actual. Puede elegir entre una de las vistas siguientes:

Forinsur S.L. Centro de Formacin | Manual de Usuario

La vista Diseo es un entorno de diseo 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. La vista Cdigo es 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. Es posible ver el mismo documento en las dos vistas, Cdigo y Diseo, en una sola ventana de documento. Cuando la ventana de documento tiene una barra de ttulo, sta muestra el ttulo de la pgina y, entre parntesis, el nombre y la ruta del archivo. Si se han realizado cambios que an no se han guardado, despus del nombre del archivo Dreamweaver incluye un asterisco. Cuando se maximiza la ventana de documento en el diseo integrado de espacio de trabajo, no aparece la barra de ttulo; en este caso, el ttulo de la pgina y el nombre y la ruta del archivo aparecen en la barra de ttulo de la ventana principal del espacio de trabajo. Adems, cuando una ventana de documento est maximizada, aparecen fichas en la parte superior de la misma con los nombres de archivo de todos los documentos abiertos. Para cambiar a un documento, haga clic en su ficha.

o Barra de herramienta de documentos

La barra de herramientas de Documento contiene botones que permiten alternar entre diferentes vistas del documento rpidamente: vista Cdigo, vista Diseo y una vista dividida que muestra las vistas Cdigo y Diseo. La barra de herramientas contiene tambin algunos comandos y opciones relativos a la visualizacin del documento y a su transferencia entre los sitios local y remoto.

Tcnico Especialista en Diseo, Animacin y Programacin Web

En la barra de herramientas de Documento, aparecen las siguientes opciones: Mostrar cdigo slo muestra la vista Cdigo en la ventana de documento. Mostrar cdigo y diseo muestra la vista Cdigo en una parte de la ventana de documento y la vista Diseo en la otra parte. Cuando seleccione esta vista combinada, se encontrar disponible la opcin Vista de diseo encima del men Ver. Utilice esta opcin para especificar qu vista debe aparecer en la parte superior de la ventana de documento. Mostrar diseo slo muestra la vista Diseo en la ventana de documento. Depuracin del servidor muestra un informe que le ayudar a depurar la pgina de ColdFusion actual. El informe contiene los errores de la pgina, si los hay. Ttulo del documento permite introducir un ttulo para el documento, que aparecer en la barra de ttulo del navegador. Si el documento ya tiene ttulo, ste aparecer en dicho campo. No hay errores de comprobacin de navegador permite comprobar la compatibilidad con distintos navegadores. Validar formato permite validar el documento actual o una etiqueta seleccionada. Administracin de archivos muestra el men emergente Administracin de archivos.

Forinsur S.L. Centro de Formacin | Manual de Usuario

Vista previa/Depurar en explorador permite ver una vista previa del documento o depurarlo en un navegador. Seleccione un navegador en el men emergente. Actualizar vista de diseo actualiza la vista Diseo tras realizar cambios en la vista Cdigo. Los cambios realizados en la vista Cdigo no aparecern de forma automtica en la vista Diseo hasta que se efecten determinadas acciones, como guardar el archivo o hacer clic en este botn. Ver opciones permite definir las opciones de las vistas Cdigo y Diseo, y establecer qu vista va a aparecer en la parte superior de la ventana. Las opciones del men corresponden a la vista actual: la vista Diseo, la vista Cdigo o ambas. Ayudas visuales permite utilizar distintas ayudas visuales para el diseo de las pginas.

o Barra de estado
La barra de estado, situada en la parte inferior de la ventana de documento, proporciona informacin adicional sobre el documento que est creando.

El selector de etiquetas 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. Haga clic en <body> para seleccionar todo el cuerpo del documento. Para definir los atributos class o id para una etiqueta en el selector de etiquetas, haga clic con el botn de derecho del ratn y elija una clase o un ID del men contextual. El selector de etiquetas es el mtodo ms adecuado para seleccionar etiquetas, porque le garantiza que siempre se est seleccionado la etiqueta de manera precisa.

Tcnico Especialista en Diseo, Animacin y Programacin Web

La herramienta Mano permite hacer clic en el documento y arrastrarlo hasta la ventana de documento. Haga clic en la herramienta Seleccionar para desactivar la herramienta Mano. La herramienta Zoom y el men emergente Establecer nivel de aumento permiten establecer el nivel de ampliacin del documento El men emergente Tamao de ventana (que slo aparece en la vista Diseo) permite cambiar el tamao de la ventana de documento para que adopte dimensiones predeterminadas o personalizadas. A la derecha del men emergente Tamao de ventana aparecen la estimacin del tamao del documento y del tiempo de descarga de la pgina, incluidos todos los archivos dependientes, como imgenes y otros archivos multimedia.

o Barra insertar
La barra Insertar contiene botones para la creacin e insercin de diversos tipos de objetos, como tablas, capas e imgenes. Al pasar el puntero sobre un botn, aparece una descripcin de la herramienta con el nombre del botn.

La barra Insertar est organizada en las categoras siguientes: La categora Comn permite crear e insertar los objetos que se utilizan con ms frecuencia, como las imgenes y las tablas. La categora Diseo permite insertar tablas, etiquetas div, capas y marcos. Tambin puede elegir entre las tres vistas de las tablas: Estndar (valor predeterminado), Tablas expandidas y Diseo. Si se selecciona el modo de diseo, se pueden utilizar las herramientas de diseo de Dreamweaver: Dibujar celda de diseo y Dibujar tabla de diseo. La categora Formularios contiene botones que permiten crear formularios e insertar elementos de formulario.

Forinsur S.L. Centro de Formacin | Manual de Usuario

La categora Texto permite insertar diversas etiquetas de formato de texto y listas, como b, em, p, h1 y ul. La categora HTML permite insertar etiquetas HTML para las reglas horizontales, el contenido de la seccin head, las tablas, los marcos y los scripts. Las categoras de cdigo de servidor slo estn disponibles para las pginas que emplean un lenguaje de servidor determinado, como ASP, ASP.NET, CFML Basic, CFML Flow, CFML Advanced, JSP y PHP. Cada una de estas categoras contiene objetos de cdigo de servidor que pueden insertarse en la vista Cdigo. La categora Aplicacin permite insertar elementos dinmicos como juegos de registros, regiones repetidas y grabar formularios de insercin y actualizacin. La categora Elementos Flash permite insertar elementos de Macromedia Flash. La categora Favoritos le permite agrupar y organizar los botones de la barra Insertar que utiliza con ms frecuencia en un lugar comn.

o Barra de herramientas de codificacin

La barra de herramientas de Codificacin contiene botones que le permiten realizar numerosas operaciones de codificacin estndar, como ampliar y contraer las selecciones de cdigo, resaltar cdigo no vlido, insertar o eliminar comentarios, aplicar sangra al cdigo e insertar fragmentos de cdigo utilizados recientemente. La barra de herramientas de Codificacin slo est visible en la vista Cdigo y aparece verticalmente en el lado izquierdo de la ventana de documento.

o El Inspector de propiedades
El inspector de propiedades permite examinar y editar las propiedades ms comunes del elemento de pgina seleccionado actualmente, como texto o un objeto insertado. El contenido del inspector de propiedades es distinto en funcin del elemento seleccionado. Por ejemplo, si selecciona una imagen en

Tcnico Especialista en Diseo, Animacin y Programacin Web

la

pgina,

el

inspector

de

propiedades

cambiar

para

mostrar

las

propiedades de la imagen (como la ruta del archivo de imagen, el ancho y alto de la imagen, el borde que la rodea, etc.).

o El panel Archivos
El panel Archivos se utiliza para ver y administrar los archivos del sitio de Dreamweaver.

o El panel Estilos CSS

El panel Estilos CSS le permite supervisar las reglas y propiedades CSS que afectan a un elemento de pgina actualmente seleccionado el modo Actual o las reglas y propiedades que afectan a todo un documento, con el modo Todo. Un botn situado en la parte superior del panel Estilos CSS le permite cambiar entre estos dos modos. El panel Estilos CSS tambin le permite modificar propiedades CSS tanto en modo Todo como en modo Actual.

Forinsur S.L. Centro de Formacin | Manual de Usuario