Generalidades sobre los tutoriales de Macromedia Dreamweaver MX

Los tutoriales de Macromedia Dreamweaver MX son para los diseadores del web y los desarrolladores de aplicaciones que estn interesados en aprender a usar Dreamweaver MX para crear aplicaciones web dinmicas. Los tutoriales lo guiarn a travs del proceso de creacin del sitio Trio Dealer Locator (una compaa ficticia), para un distribuidor ficticio de automviles en todo el mundo. Los tutoriales dividen el proceso de desarrollo en dos partes: diseo del sitio y creacin de la aplicacin: El tutorial Creacin y diseo de sitios web con Dreamweaver MX, ofrece una visin global de la nueva interfaz de Dreamweaver MX, crea el sitio con el nuevo asistente de Definicin del sitio, y utiliza las herramientas de diseo y grupos de paneles de Dreamweaver MX para crear pginas estticas. El tutorial Creacin de aplicaciones de Internet con Macromedia Dreamweaver MX y ColdFusion MX convierte las pginas estticas creadas en el tutorial de diseo en una aplicacin de Internet funcional. Los tutoriales se pueden descargar por separado del Centro para desarrolladores de Dreamweaver MX del sitio web de Macromedia.

Creacin y diseo de sitios web con Macromedia Dreamweaver MX

Este tutorial lo guiar a travs del proceso de configuracin del espacio de trabajo de Dreamweaver MX y la creacin de la parte esttica del sitio web Dealer Locator de Trio Motor Company (una compaa ficticia) con el asistente de Configuracin del sitio, las plantillas y otras herramientas de diseo de Dreamweaver MX. Este tutorial requiere tener instalados Macromedia Dreamweaver MX y Macromedia Fireworks MX en su mquina. El tutorial trata de los siguientes temas: Descarga e instalacin de los archivos Configuracin y administracin del espacio de trabajo de Dreamweaver MX Creacin de sitios con el asistente de Definicin del sitio Creacin de pginas para el sitio con las plantillas de Dreamweaver Modificacin de los activos del sitio en Fireworks con la edicin roundtrip Definicin de regiones opcionales en las plantillas Creacin de mapas de imgenes con el editor de mapas de imgenes Trabajar con tablas Uso del editor de cdigo de Dreamweaver MX Uso de hojas de estilo en cascada (CSS) Resumen del tutorial antes de pasar a la creacin de aplicaciones de Internet

Descargar los archivos del tutorial de Dreamweaver MX

El material descargado Creacin y diseo de sitios web con Macromedia Dreamweaver MX contiene lo siguiente: Este archivo del tutorial design_tutorial.pdf. El archivo Trio_design.zip que contiene el archivo lame y archivos de muestra para el sitio web Trio Dealer Locator (una compaa ficticia).

Instalar los archivos del tutorial de Dreamweaver MX

Instrucciones bsicas para la instalacin de todos los tutoriales:
Windows:

1) Descomprima el archivo trio_design.zip y pngalo en la carpeta raz del sitio web predeterminado (normalmente ser C:\CfusionMX\wwwroot o C:\inetpub\wwwroot) o cualquier otro lugar del disco duro si su equipo no tiene ese directorio. Se crea automticamente una carpeta nueva llamada trio_design que contiene todos los recursos del sitio. Si slo desea completar la parte Diseo de sitios web del juego de tutoriales, no importa donde se descompriman los tutoriales y archivos de muestra. Si piensa completar el tutorial Creacin de aplicaciones de Internet con Macromedia Dreamweaver MX y ColdFusion MX (material descargado por separado), descomprima los archivos del tutorial en el directorio wwwroot del servidor de aplicaciones ColdFusion MX (C:\CfusionMX\wwwroot). 2) Seleccione todos los archivos descomprimidos y haga clic con el botn derecho del ratn en > Propiedades y cercirese de que no estn marcados para slo lectura. Quite la marca de la casilla de slo lectura dentro del cuadro de dilogo Propiedades y haga clic en Aplicar y en Aceptar para desbloquear los archivos, si fuera necesario. 3) Cree una copia de seguridad de toda la carpeta de diseo descargada en caso de que tuviera que reiniciar el tutorial con archivos sin usar. (Este paso es opcional.) 4) Mueva (no copie) la carpeta trio_design/TrioSnippet a la carpeta Archivos de programa/Macromedia/Dreamweaver MX/Configuration/Snippet. Ahora tendr que reiniciar Dreamweaver MX para que el programa pueda reconocer los Snippets.
Macintosh

1) Descomprima la carpeta trio_design.zip y pngala en la carpeta Documentos del disco duro. Se crea automticamente una carpeta nueva llamada trio_design que contiene todos los recursos del sitio. 2) Seleccione todos los archivos y cercirese de que no estn marcados para slo lectura. 3) Cree una copia de seguridad de toda la carpeta de diseo descargada en caso de que tuviera que reiniciar el tutorial con archivos sin usar. (Este paso es opcional.) 4) Mueva (no copie) la carpeta TrioSnippet a la carpeta Archivos de programa: Macromedia:Dreamweaver MX:Configuration:Snippets.

Configuracin y administracin del espacio de trabajo de Dreamweaver MX Dreamweaver MX se caracteriza por nuevas mejoras hechas al espacio de trabajo que se aplican a los sistemas operativos Macintosh y Windows, como son el cumplimiento con Windows XP y OS X, la nueva administracin de paneles y la opcin de espacio de trabajo integrado en Windows. La versin Windows de Dreamweaver MX utiliza el nuevo espacio de trabajo de Macromedia MX, el cual tambin es utilizado por Fireworks MX y Macromedia Flash MX. El espacio de trabajo de Macromedia MX est diseado para promover la eficiencia permitindole a los desarrolladores configurar y administrar el espacio de trabajo para satisfacer sus necesidades particulares.
Paso 1: Elegir una opcin de espacio de trabajo.

El cuadro de dilogo Configuracin del espacio de trabajo permite especificar la disposicin del espacio de trabajo, ya sea el espacio de Dreamweaver MX o el espacio de Dreamweaver 4. Tambin tendr la opcin de elegir la disposicin HomeSite/Estilo de codificador para el espacio de trabajo. 1. Ejecute Dreamweaver MX. Si est trabajando en una mquina Windows, el cuadro de dilogo Configuracin del espacio de trabajo se abre automticamente la primera vez que se ejecuta Dreamweaver MX. Tambin se puede tener acceso a este cuadro de dilogo eligiendo Editar > Preferencias > General, y haciendo clic en el botn Cambiar espacio de trabajo. Esta opcin no est disponible en los equipos Macintosh. Tambin la primera vez que ejecute Dreamweaver MX ver el grupo de paneles Bienvenida. Este grupo de paneles es una caracterstica til que sirve para ponerlo al tanto de las nuevas caractersticas de Dreamweaver MX.

2. Seleccione el botn de opcin Espacio de trabajo de Dreamweaver MX. 3. Marque la casilla Homesite/Estilo de codificador si prefiere que las vistas de diseo y cdigo aparezcan en la parte derecha del monitor. Desactive la casilla si prefiere que aparezcan a la izquierda.

4. Haga clic en Aceptar para aceptar las preferencias del espacio de trabajo y cierre el cuadro de dilogo Configuracin del espacio de trabajo. Se puede usar el cuadro de dilogo Configuracin del espacio de trabajo para cambiar la disposicin del mismo en cualquier momento, pero para que los cambios surtan efecto, primero deber reiniciar Dreamweaver MX.
Paso 2: Usar la barra Insertar.

La barra Insertar sustituye al panel Objetos de Dreamweaver 4. Las opciones de la barra Insertar cambian segn el tipo de documento que est siendo editado (HTML, ASP, JSP, ASP.NET, PHP o CFML) y le permiten tener acceso a los editores y comportamientos disponibles para el documento.

Paso 3: Elegir una vista para el espacio de trabajo.

En Dreamweaver MX, se puede trabajar en vista de cdigo, de diseo o de pantalla dividida para ver el cdigo y el diseo simultneamente.
Para cambiar la vista del espacio de trabajo, siga uno de los pasos a continuacin:

Haga clic en los botones Vista de cdigo, Vista de cdigo y diseo, y Vista de diseo de la barra de herramientas Elija Vista > Cdigo, Diseo o Cdigo y diseo

Creacin de sitios con el asistente de Definicin del sitio El asistente de Definicin del sitio de Dreamweaver MX lo guiar a travs del proceso de configuracin de un sitio en Dreamweaver MX. Esto significa ponerle nombre al sitio, especificar la tecnologa de servidor, especificar un lugar para los archivos en el equipo e introducir la informacin para publicar y cargar los archivos en un servidor.
Paso 1: Crear un nuevo sitio con el asistente de Definicin del sitio.

En esta seccin se utilizar el asistente de Definicin del sitio para crear la parte de diseo esttico del sitio Trio Motors Company (una compaa ficticia). 1. Elija Sitio > Nuevo sitio en la barra de men principal para ejecutar el asistente de Definicin del sitio. Si el asistente de Definicin del sitio no aparece automticamente como se muestra a continuacin, seleccione la ficha Bsica. Si ya ha definido un sitio con anterioridad, es posible que al seleccionar la ficha Bsica vea un cuadro de dilogo de advertencia que indica que ya existe un sitio con la misma carpeta raz. Cierre el cuadro de dilogo. En los siguientes pasos se crear una nueva raz del sitio.
2. Escriba Trio Designer como el nombre del sitio y haga clic en Siguiente para

proceder.

3. Seleccione No, no deseo utilizar una tecnologa de servidor. En esta seccin del tutorial slo se crearn las partes estticas del sitio y no es necesario seleccionar una tecnologa de servidor. 4. Haga clic en Siguiente. 5. Seleccione Editar copias locales en mi equipo y luego cargarlas al servidor cuando estn listas. Para llenar el campo titulado En qu lugar del equipo desea almacenar los archivos?, busque el directorio donde descomprimi los archivos para este tutorial.

Nota: Si ha creado anteriormente un sitio en Dreamweaver MX, este campo se llena con la ubicacin del ltimo sitio creado. No se debe usar la misma carpeta raz local para dos sitios diferentes. Si trata de usar la misma carpeta raz local para ms de un sitio, Dreamweaver le pedir que elija una carpeta distinta para el nuevo sitio. Una vez definido el directorio, haga clic en Siguiente.

6. Seleccione Ninguno en el men emergente Cmo conecta con su servidor remoto?. Como ste es un sitio esttico, no es necesario especificar un servidor remoto. 7. Haga clic en Siguiente. 8. Como se muestra a continuacin, la pantalla final del asistente de Configuracin del sitio muestra un resumen de sus preferencias. Revise la informacin y utilice el botn Atrs para regresar y hacer cualquier correccin que fuera necesaria. O bien, haga clic en Listo si toda la informacin es correcta. Una vez que se hace clic en Listo, aparece un cuadro de dilogo donde se explica que Dreamweaver MX crear ahora la memoria cach inicial del sitio. Haga clic en Aceptar, y Dreamweaver crear la memoria cach del sitio.

Paso 2: Configurar opciones adicionales para el nuevo sitio.

Se pueden especificar opciones adicionales con la ficha Avanzadas del cuadro de dilogo Definicin del sitio. La ficha Avanzadas es til para cambiar las configuraciones del sitio despus de que el sitio ha sido definido, o para la configuracin inicial de un sitio una vez que est familiarizado con Dreamweaver MX.
Para ver las opciones avanzadas:

1. Elija Sitio > Nuevo sitio 2. Haga clic en la ficha Avanzadas. 3. Seleccione cada uno de los elementos en el men Categora para ver las opciones de cada uno. 4. Haga clic en Cancelar para cerrar el cuadro de dilogo Definicin del sitio sin definir el nuevo sitio.

Creacin de pginas para el sitio con las plantillas de Dreamweaver MX

Nota: Antes de comenzar esta seccin, cercirese de haber copiado la carpeta TrioSnippets en la carpeta de configuracin Snippets de Dreamweaver MX tal como se especific en las instrucciones de instalacin al principio de este tutorial. Las plantillas de Dreamweaver MX son tiles para crear y administrar diseos y estilos web con el objeto de que sean uniformes en sitios web de gran tamao que actualizan la informacin frecuentemente y tienen equipos de produccin grandes. Dreamweaver MX introduce varias nuevas caractersticas de plantillas, entre ellas las regiones de contenido editables, las regiones opcionales y repetidas, y la capacidad de anidar plantillas dentro de otras plantillas. En este tutorial, todas las pginas del sitio Dealer Locator se crean usando la plantilla trioHome. La plantilla trioHome se compone de dos partes: un campo no editable que contiene los elementos de navegacin que necesitan todas las pginas y un campo editable llamado Body que se utiliza para mostrar el contenido de pginas individuales. En esta seccin ver la imagen de la barra de navegacin no editable, y aadir contenido al campo editable Body para crear una nueva plantilla anidada basndose en la plantilla trioHome.
Paso 1: Ver la plantilla trioHome

1. Abra el grupo de paneles Archivos y seleccione la ficha Sitio. 2. Ample la carpeta Plantillas para ver una lista de las plantillas utilizadas por el sitio. 3. Haga doble clic en la plantilla trioHome para abrir la plantilla en el espacio de trabajo. Si todava no est en la vista de diseo, elija Vista > Vista de diseo o haga clic en el botn Vista de diseo de la barra de herramientas.

4. Observe que la seccin Body de la plantilla tiene un borde verde que indica que es una regin editable. El borde se puede desactivar o activar dentro de las preferencias de Dreamweaver MX. Si el borde no es visible, elija Editar > Preferencias y seleccione la categora Resaltando. Luego, marque la casilla de Regiones editables. La regin editable con borde verde la utilizan los editores de pginas de sitios web y las personas que se dedican a la produccin de sitios web para aadir y actualizar el contenido del sitio.

Paso 2: Crear una nueva plantilla basada en la plantilla de trioHome.

1. Elija Archivo > Nuevo

El cuadro de dilogo Nuevo documento de Dreamweaver MX incluye una variedad de nuevos diseos de pgina, estilos, scripts y plantillas para ayudarle a empezar. Tmese su tiempo para examinar las Categoras y familiarizarse con el contenido disponible. 2. Seleccione la ficha Plantillas para ver la lista de plantillas que existen para este sitio. 3. Seleccione Trio-Designer (o el nombre que le haya puesto al sitio con el asistente de Definicin del sitio) en la lista de sitios que estn a la izquierda. Luego, seleccione trioHome en la lista a la derecha si todava no est seleccionada. 4. Marque la casilla Actualizar pgina cuando cambie la plantilla, si todava no est marcada. Esta opcin le indica a Dreamweaver MX que debe actualizar todas las pginas del sitio que estn basadas en esta plantilla siempre que se hagan cambios en la plantilla. Esta es una caracterstica sumamente potente que permite que las pginas de sitios grandes permanezcan uniformes.

5. Haga clic en el botn Crear.

Se crea un nuevo archivo basado en la plantilla. Todo cambio hecho a la plantilla trioHome se aplicar al nuevo archivo automticamente. Por ejemplo, si la plantilla original se actualiza con una nueva barra de navegacin, la nueva barra de navegacin se aplica a todos los archivos creados a partir de la plantilla original. Sin embargo, las reglas que se aplican a una plantilla individual, se aplicarn solamente a las pginas creadas con esa plantilla en particular.
Paso 3: Modificar la nueva plantilla para crear una plantilla anidada llamada trioDealer.

En esta seccin, se modificar el archivo que fue creado en la seccin anterior para crear una nueva plantilla anidada llamada trioDealer. La plantilla anidada tendr una tabla donde se mostrar una lista de distribuidores para la compaa ficticia Trio Motor Company. 1. Borre la palabra Body de la regin editable, pero deje unos cuantos espacios. Esto evitar que la regin editable se contraiga y todava podr poner el cursor dentro de la misma. Las regiones editables tienen un borde verde. 2. Si todava no est ah, coloque el cursor en la regin editable y haga clic en el botn Insertar tabla de la ficha Comn de la barra Insertar como se muestra a continuacin. Si la barra Insertar no est visible, elija Ventana > Insertar.

3. Llene el cuadro de dilogo Insertar tabla con las opciones que siguen y haga clic en Aceptar.

4. Seleccione la primera fila de celdas de la tabla haciendo clic en una de las celdas de la tabla y seleccionando el selector de etiqueta <tr> al final de la ventana del documento.

5. Haga clic en el botn Combinar celdas del Inspector de propiedades como se muestra a continuacin. El Inspector de propiedades se encuentra al final del espacio de trabajo (Windows) o est flotando (Macintosh). Elija Ventana > Propiedades si no est visible.

6. Escriba la palabra Dealerships en la celda recin combinada. 7. Abra el grupo de paneles Cdigo y seleccione la ficha Fragmentos. O bien, elija Ventana > Fragmentos si el grupo de paneles Cdigo no est visible. 8. Ample la carpeta TrioSnippet y arrastre el fragmento Dealer%20Certification hacia la celda inferior derecha de la tabla. Si no ve la carpeta TrioSnippet, consulte las instrucciones de instalacin al principio de este tutorial. Si todava no ha instalado la carpeta Trio Snippets, tendr que reiniciar Dreamweaver MX despus de instalarla y volver a comenzar desde el principio de esta seccin (Creacin de pginas para el sitio con las plantillas de Dreamweaver MX). Nota: Los vnculos de las imgenes estarn rotos hasta que se guarde el archivo creado en base a la plantilla. 9. Seleccione la celda inferior derecha de la tabla exterior haciendo clic en la tabla y seleccionando la primera etiqueta <td> ubicada a la izquierda de la etiqueta <table> del extremo derecho del selector de etiquetas, como se muestra por la etiqueta <td> en negrita en la ilustracin a continuacin. 10. Luego, use el Inspector de propiedades para cambiar los atributos siguientes de la celda: Alineamiento vertical (vert) Superior Ancho = 33% Imagen de fondo: vaya al archivo tdbg.jpg y seleccinelo en el tutorial descargado (/assets/images/tdbg.jpg). Es posible que aparezca un cuadro de dilogo de advertencia que indica que se va a utilizar una ruta de acceso file/// hasta que se guarde la pgina. Cierre el cuadro de dilogo. La imagen de fondo se puede seleccionar haciendo clic en el icono de carpeta amarilla que est a la derecha del campo bg del Inspector de propiedades y pasando a ese archivo.

11. Haga clic en la celda izquierda de la tabla y seleccione la etiqueta <td> en el selector de etiquetas, como se muestra por la etiqueta <td> en negrita en la ilustracin a continuacin, para seleccionar la celda de la tabla. 12. Haga clic en el botn Regin editable de la ficha Plantillas de la barra Insertar como se muestra en la siguiente ilustracin.

13. Aparece el siguiente cuadro de dilogo que dice que Dreamweaver convertir automticamente este documento en plantilla.

14. Haga clic en Aceptar para cerrar el cuadro de dilogo. 15. Aparece un cuadro de dilogo donde se le pedir que le ponga un nombre a la nueva regin editable. Escriba Content para el Nombre en el cuadro de dilogo Nueva regin editable y haga clic en Aceptar. La nueva regin editable con borde verde aparece en la vista de diseo del documento con el nombre Content. Consulte las instrucciones de arriba sobre cmo mostrar las regiones editables si el borde de las mismas no est visible. 16. Haga clic en el botn Crear plantilla anidada en la ficha Plantillas de la barra Insertar como se muestra en la siguiente ilustracin.

17. En el cuadro de dilogo Guardar como plantilla que aparece, pngale trioDealer a la plantilla y haga clic en Guardar. 18. Cierre la plantilla trioDealer.

En esta seccin, se modific la regin editable en la plantilla trioHome para crear una nueva regin editable llamada Content y se guard el nuevo archivo como plantilla trioDealer. Los diseadores que usan la plantilla trioDealer slo pueden aadir o cambiar el contenido en la regin editable Content, al igual que los diseadores que usan la plantilla trioHome slo pueden aadir o cambiar el contenido en la regin editable Body.
Paso 4: Crear una pgina HTML basada en la plantilla trioDealer.

1. Elija Archivo > Nuevo y seleccione la ficha Plantillas en el cuadro de dilogo Nuevo documento. 2. Seleccione Trio Designer en la lista de la izquierda y seleccione la plantilla trioDealer en la lista de la derecha. 3. Marque la casilla Actualizar pgina cuando cambie la plantilla, si todava no est marcada. 4. Haga clic en el botn Crear. 5. Dreamweaver crea una nueva pgina basada en la plantilla trioDealer y la muestra en el espacio de trabajo. 6. Coloque el cursor en la regin editable Content (marcada con un borde verde si est configurado para mostrarse en las preferencias como se describi arriba) y escriba Locate a dealer by clicking on a region in the map below: y pulse Intro. 7. Con el cursor todava en la regin editable, haga clic en el objeto Imagen de la ficha Comn de la barra Insertar y navegue hacia el archivo worldMap.jpg en la carpeta de imgenes (assets/images/worldMap.jpg) que se instal con este tutorial. 8. Haga clic en Aceptar. 9. Dreamweaver muestra un cuadro de dilogo que indica que se va a utilizar una ruta de acceso al archivo hasta que se guarde el documento. Haga clic en Aceptar para cerrar el cuadro de dilogo. 10. Elija Archivo > Guardar y pngale el nombre dealers.html al archivo. Al guardar el documento, aparecern las imgenes del fragmento insertado en la plantilla trioDealer en el documento. 11. Presione F12 para obtener una vista previa de la pgina dealers.html en el navegador.

12. Elija Archivo > Cerrar para cerrar el archivo dealers.html.

Paso 5: Actualizar la plantilla trioDealer y ver los cambios en la pgina dealer.html.

Al cambiar una plantilla, se cambian todas las pginas creadas a partir de esa plantilla. 1. En la ficha Activos del grupo de paneles Archivos, haga clic en el botn Plantillas , y haga doble clic en la plantilla trioDealer para abrirla en el espacio de trabajo. 2. Borre la palabra Dealerships de la primera celda de la tabla. 3. Con el cursor en la primera celda de la tabla, haga clic en el objeto Imagen de la ficha Comn de la barra Insertar, navegue hacia el archivo dealership.jpg que viene con el tutorial (/assets/images/dealership.jpg), seleccinelo y haga clic en Aceptar. 4. Elija Archivo > Guardar. El cuadro de dilogo Actualizar pginas le solicita actualizar todas las pginas creadas a partir de la plantilla trioDealer; haga clic en Actualizar y luego en Cerrar como se muestra en la siguiente pantalla.

5. Abra la ficha Sitio del grupo de paneles Archivos y abra la pgina dealers.html en el espacio de trabajo para ver cmo al cambiar la plantilla se actualizan las pginas html asociadas.
Modificacin de los activos del sitio en Macromedia Fireworks MX con la edicin roundtrip

En esta seccin, se usar la caracterstica de edicin roundtrip de Dreamweaver MX para editar la plantilla trioHome entre Dreamweaver MX y Fireworks MX. Para poder completar esta seccin deber tener instalado Fireworks MX (versin preliminar) en la misma mquina donde est Dreamweaver MX.
Paso 1: Editar los activos de plantillas en Fireworks MX con la edicin roundtrip.

Esta seccin requiere que tenga instalado Fireworks MX y configurado como el editor de imgenes principal para Dreamweaver MX. Si instal Fireworks MX antes de Dreamweaver MX, Fireworks MX ser automticamente el editor de imgenes principal. Para hacer que Fireworks sea el editor de imgenes principal: 1. Seleccione Editar > Preferencias y seleccione la categora Tipos de archivo/editores. 2. Seleccione la extensin .png y haga clic en el botn de signo ms que est encima del campo de editores. 3. Navegue hacia Archivos de programa > Macromedia > Fireworks MX y seleccione el archivo fireworks.exe. 4. Haga clic en el botn Abrir. 5. Haga clic en el botn Convertir en principal. 6. Repita los pasos del 2 al 5 para la extensin .gif y las extensiones .jpg, jpe y jpeg. 7. Haga clic en el botn Aceptar del cuadro de dilogo Preferencias para cerrarlo. Slo es necesario realizar estos pasos una vez. Fireworks MX ser de ahora en adelante el editor de imgenes principal para Dreamweaver MX. 8. Ahora que Fireworks MX es el editor de imgenes principal para Dreamweaver MX, abra el grupo de paneles Archivos, seleccione la ficha Activos y haga doble clic en la plantilla trioHome. 9. Si la plantilla no se muestra en la vista de diseo, haga clic en el botn Vista de diseo de la barra de herramientas o elija Vista > Diseo. 10. En la ventana de documento, seleccione Find a Dealer (btn4.jpg). 11. Abra el Inspector de propiedades si todava no est abierto. 12. Presione el botn Editar para ejecutar Fireworks MX y editar el archivo de origen para la imagen btn4.jpg. Si se produce un error por imagen bloqueada, navegue hacia la carpeta de activos y desbloquee los archivos.

Se ejecuta el programa Fireworks MX. Es posible que se muestre el cuadro de dilogo Buscar origen. Si anteriormente ha usado Fireworks MX y no eligi Utilizar siempre origen PNG en las opciones del men desplegable que se presentaron al momento de ejecutar el programa, antes de comenzar esta seccin del tutorial, ejecute Fireworks MX y haga una de las siguientes cosas: Si aparece la siguiente pantalla al momento de ejecutar el programa, seleccione Utilizar siempre origen PNG en el men desplegable, salga de Fireworks MX y regrese a Dreamweaver MX.

Si no aparece ninguna opcin al momento de ejecutar el programa, una vez que est dentro de Fireworks MX elija Editar > Preferencias > Ejecutar y editar y seleccione Utilizar siempre origen PNG para la opcin Al editar con aplicaciones externas; cierre el cuadro de dilogo, salga de Fireworks MX y regrese a Dreamweaver MX.

13. Si Fireworks MX no encuentra automticamente el archivo de origen, navegue hacia /assets/images/btn4.jpg y haga doble clic en ste para abrir el archivo. 14. Haga clic en el texto FIND A DEALER, seleccione el texto y sustityalo con DEALERSHIPS. 15. Haga clic en el botn Listo como se muestra en la siguiente ilustracin. Si se produce un error de imagen bloqueada, navegue hacia la carpeta de activos y desbloquee los archivos. 16. El archivo JPG se optimiza usando las configuraciones que se encuentran en el archivo source.png y se actualiza en el documento de Dreamweaver MX.

Definicin de regiones opcionales en las plantillas del sitio La plantilla trioHome tiene una barra de navegacin al final de la pgina que tiene opciones que no son tiles para todas las pginas del sitio Dealer Locator. A modo de ejemplo, no tiene ningn sentido tener un vnculo de distribuidores en las pginas de la seccin de distribuidores del sitio puesto que el usuario ya se encuentra en dicha seccin. En esta seccin del tutorial, aprender a definir las regiones opcionales en las plantillas y a definir reglas avanzadas para definir y presentar pginas de instancias creadas a partir de dichas plantillas. La especificacin de regiones opcionales en las plantillas le permite a los diseadores de pginas individuales incluir o excluir dichas regiones segn cada pgina.
Paso 1: Definir la regin opcional en la plantilla.

1. Abra la plantilla trioHome en la vista de diseo si todava no est abierta. 2. Seleccione el botn DEALERSHIPS haciendo clic en la celda de la tabla y eligiendo la etiqueta <td> en el selector de etiquetas. 3. Haga clic en el botn de Regin opcional en la ficha Plantillas de la barra Insertar como se muestra a continuacin. Aparece el cuadro de dilogo Regin opcional.

4. Dele a la regin el nombre de Dealershipbutton. 5. Haga clic en Aceptar. 6. Elija Archivo > Guardar. 7. Aparece el cuadro de dilogo Actualizar plantillas. Haga clic en el botn Actualizar para actualizar todas las pginas basadas en la plantilla. 8. Haga clic en Cerrar para cerrar el cuadro de dilogo Actualizar pginas.

Paso 2: Modificar la plantilla trioDealer para excluir la regin del botn Dealerships opcional

1. Abra la plantilla trioDealer.dwt. 2. Elija Modificar > Propiedades de plantilla 3. Seleccione Dealershipbutton en el cuadro de dilogo Propiedades de plantilla, quite la marca en la casilla Mostrar DealershipButton y haga clic en Aceptar. 4. Elija Archivo > Guardar para guardar la pgina de la plantilla trioDealer. 5. Haga clic en Actualizar en el cuadro de dilogo Actualizar propiedades y haga clic en Cerrar para cerrar el cuadro de dilogo de resultados. Creacin de mapas
de imgenes con el editor de mapas de imgenes

En esta seccin, se crearn reas donde se puede hacer clic (zonas interactivas) en la imagen del mapamundi que est en el archivo dealers.html. Para cada zona interactiva que se cree, se especificar la informacin que puede utilizar un servidor para obtener y mostrar la informacin sobre los distribuidores en esa regin. Los tutoriales que tratan sobre cmo crear aplicaciones de Internet tratan tambin en detalle sobre el proceso de creacin de pginas de consulta dinmicas.
Paso 1: Trazar las zonas interactivas del mapa

1. Abra el grupo de paneles Archivos, seleccione la ficha Sitio y haga doble clic en dealers.html si todava no est abierto. Nota: En los equipos Macintosh, Sitio es un grupo de paneles aparte. 2. Seleccione la imagen del mapamundi en el espacio de trabajo. 3. Abra y ample el Inspector de propiedades. 4. Escriba dealerMap como nombre del mapa en el Inspector de propiedades. 5. Haga clic en el botn Herramienta Zona interactiva rectangular del Inspector de propiedades como se ilustra a continuacin.

6. Use la Herramienta Zona interactiva rectangular para trazar zonas interactivas sobre los continentes en el mapa como se muestra a continuacin. Use la informacin de la lista de abajo para llenar el campo Vnculo del Inspector de propiedades para cada zona interactiva que cree sobre cada continente respectivo. Especifique .cfm como la extensin para que pueda usar este archivo si piensa completar el tutorial para crear aplicaciones de Internet para ColdFusion. Escriba el texto como se muestra en la siguiente lista. Para Australia, vincular a: dealermaster.cfm?ID=6 Para Asia, vincular a: dealermaster.cfm?ID=5 Para frica, vincular a: dealermaster.cfm?ID=4 Para Europa, vincular a: dealermaster.cfm?ID=3

Para Sudamrica/Centroamrica vincular a: dealermaster.cfm?ID=2 Para Norteamrica, vincular a: dealermaster.cfm?ID=1

7. Guarde la pgina y cirrela.

Trabajar con tablas

En esta seccin, se crear el casco de la pgina utilizada para mostrar los distribuidores de una regin cuando el usuario selecciona tal regin en el mapamundi. Esta pgina casco es la base de la pgina de consulta dinmica creada en el tutorial Creacin de aplicaciones de Internet con Macromedia Dreamweaver MX y Macromedia ColdFusion MX. (Este es un tutorial separado que se puede obtener en el Centro de desarrollo de aplicaciones de Dreamweaver en el sitio web de Macromedia.) Esta seccin tambin ofrece un panorama general de las caractersticas de accesibilidad de Dreamweaver MX.
Paso 1: Crear una nueva pgina html a partir de la plantilla de TrioDealer.

1. Cree una nueva pgina a partir de la plantilla TrioDealer siguiendo los mismos pasos que para crear la pgina Dealers.html. 2. Guarde la pgina como dealerMaster.html, pero no cierre el archivo. Nota: .htm es la extensin predeterminada, por lo que el nombre del archivo deber incluir una extensin html de manera explcita.
Paso 2: Aadir una tabla a una regin editable.

En esta seccin se insertar una tabla en la regin editable Content de la pgina. Esta tabla es el contenedor que mostrar la informacin sobre el distribuidor una vez que la pgina se convierta en pgina de consulta dinmica. 1. Coloque el cursor en la regin editable Content, escriba el texto Here is a list of dealerships in the region you selected: y pulse la tecla Intro. 2. Elija Editar > Preferencias, elija Accesibilidad de la lista Categora y marque la casilla para Tablas como se muestra en la siguiente ilustracin. Esto activa el modo de autora Accesibilidad para el objeto Tabla.

3. Haga clic en Aceptar para salir del cuadro de dilogo Preferencias. 4. Haga clic en el botn de objeto Tabla en la ficha Comn de la barra Insertar como se muestra en la siguiente ilustracin.

5. Llene el cuadro de dilogo Insertar tabla con las opciones que se muestran a continuacin y haga clic en Aceptar.

6. Llene el cuadro de dilogo Opciones de accesibilidad para tablas con los datos que siguen y haga clic en Aceptar. Este cuadro de dilogo aparece debido a que se activ el modo de autora Accesibilidad para las tablas en el paso 2.

7. Haga clic en Aceptar. 8. Guarde su trabajo, pero no cierre el archivo.

Paso 3: Aadir encabezados de columnas e insertar una columna adicional en la tabla.

1. Haga clic con el cursor en la celda superior izquierda de la tabla y escriba Dealer Name. 2. Haga clic con el cursor en la celda superior derecha de la tabla y escriba Country. 3. Haga clic con el cursor en la celda Country y elija Modificar > Tabla > Insertar columna. 4. Haga clic en la celda superior de la nueva columna y escriba City. 5. Guarde el archivo dealerMaster.html. Uso del editor de cdigo de Dreamweaver MX El editor de cdigo de Dreamweaver MX combina las caractersticas de edicin de cdigo tradicionales de Dreamweaver como Roundtrip HTML y un editor de texto integrado con las potentes caractersticas de edicin de cdigo de HomeSite. Ahora los desarrolladores pueden crear sitios completamente en cdigo o trabajar en las vistas de diseo y de cdigo para ver los cambios en el cdigo reflejados instantneamente en la ventana de la vista de diseo. En esta seccin del tutorial, se modificar la tabla de la pgina dealerMaster.html en la vista de cdigo y diseo para ver los cambios con el editor de cdigo. A continuacin, se cambiar a la vista de cdigo para obtener ms informacin sobre las otras caractersticas nuevas de edicin de cdigo de Dreamweaver MX.
Paso 1: Cambiar los anchos de columna de la tabla en la vista de cdigo y ver los cambios en la vista de diseo.

1. Abra la pgina dealerMaster.html si todava no est abierta. 2. Haga clic en el botn Vistas de cdigo y diseo para que el espacio de trabajo se vea dividido. de la barra de herramientas

3. Seleccione la tabla en la ventana de vista de diseo haciendo clic en cualquier celda y eligiendo la etiqueta <table> en el selector de etiquetas. Observe cmo la ventana de la vista de cdigo cambia para mostrar el cdigo de la tabla.

4. Seleccione uno de los divisores de columna de la tabla en la ventana de diseo y arrstrelo para ampliar la columna.

Observe que el atributo de ancho en la ventana de cdigo cambia cuando se suelta el botn del ratn despus de arrastrar el divisor de columna. 5. En la ventana de cdigo, cambie el atributo de ancho de la columna Dealer Name. Observe que el ancho de la columna de distribuidores cambia cuando se hace clic en la ventana de diseo.
Paso 2: Usar sugerencias para cdigo para ver los atributos de etiqueta disponibles y especificar archivos en la vista de cdigo.

Las sugerencias de cdigo le permiten ver una lista de las etiquetas, atributos, funciones y parmetros de funciones en la vista de cdigo. 1. Coloque el cursor justo despus de la ltima comilla del ltimo atributo en la etiqueta de tabla y presione la barra espaciadora. Se muestra una lista de atributos para la etiqueta de tabla.

2. Desplcese hacia abajo por la lista de atributos y seleccione bgcolor haciendo doble clic en el mismo. Observe que aparece el selector de color de Dreamweaver para permitirle elegir un valor apropiado para el atributo bgcolor. 3. Cierre el selector de color sin cambiar el atributo haciendo clic en otro lugar del cdigo y quite el cdigo bgcolor = que se introdujo en la etiqueta de tabla.

4. Nuevamente, coloque el cursor justo despus de la ltima comilla del ltimo atributo en la etiqueta de tabla y presione la barra espaciadora. 5. Seleccione background en la lista de atributos haciendo doble clic en el mismo, y use el vnculo examinar que aparece para seleccionar el archivo tdbg.jpg que vino con el tutorial descargado (/assets/images/tdbg.jpg). Esto establecer la imagen de fondo de la tabla. Despus de hacer esto, haga clic en Actualizar en el Inspector de propiedades. 6. Guarde el documento.
Paso 3: Usar el Editor de etiquetas y el Selector de etiquetas de Dreamweaver MX.

Dreamweaver MX viene con un juego completo de editores de etiquetas para todas las etiquetas HTML, CFML, JSP, PHP, ASP, WML, etiquetas de Macromedia JRun Tag Library, etiquetas de Macromedia Sitespring Project Site, as como una amplia gama de etiquetas del servidor ASP.NET y de control de validacin. Los editores de etiquetas le permiten a los desarrolladores editar rpidamente atributos relevantes de etiquetas HTML y etiquetas del lado del servidor. 1. Coloque el cursor en cualquier lugar dentro de la etiqueta de tabla. 2. Elija Modificar > Editar etiqueta. Aparece el cuadro de dilogo del Editor de etiquetasTabla. Se puede usar este cuadro de dilogo para ver los atributos disponibles para navegadores especficos, especificar eventos, definir o cambiar el tamao de la tabla y mucho ms.

3. Haga clic en Cancelar para cerrar el Editor de etiquetas. El Selector de etiquetas es una lista de todas las etiquetas que estn instaladas y que se pueden usar dentro de Dreamweaver MX, entre ellas, las etiquetas personalizadas que se hayan importado. 1. Haga clic en el botn Selector de etiquetas en la ficha Comn de la barra Insertar.

2. Explore el Selector de etiquetas navegando a travs de los nodos, seleccionando etiquetas individuales y haciendo clic en el botn Datos de etiqueta.

4. Haga clic en Cerrar para salir del Selector de etiquetas. Uso de hojas de estilo en cascada (CSS) Dreamweaver MX ha mejorado y ampliado el soporte para las CSS. El panel CSS ha sido mejorado para trabajar con mayor eficiencia en la edicin y aplicacin de estilos a las pginas web y la adicin de visualizacin adicional para las nuevas CSS.
Paso 1: Crear un nuevo estilo.

1. Abra el archivo dealerMaster.html en la vista de diseo si todava no est abierta. 2. Abra el grupo de paneles de Diseo si todava no est abierto, seleccione la ficha Estilos CSS y haga clic en el botn de opcin Editar estilos

de la parte inferior del panel y 3. Haga clic en el botn Nuevo estilo CSS seleccione el botn de opcin Redefinir etiqueta HTML. 4. Seleccione la etiqueta a en el men emergente Etiquetas y haga clic en Aceptar.

5. Defina los siguientes estilos y valores en el cuadro de dilogo Definicin de estilo CSS: Estilo: oblicua Grosor: negrita Color = #333366 (escriba el nmero o use el selector de colores)

6. Haga clic en Aceptar para definir el estilo.

Paso 2: Aplicar el nuevo estilo CSS.

1. En el grupo de paneles Diseo, seleccione la ficha Estilos CSS y seleccione el botn de opcin Aplicar estilos como se ilustra a continuacin.

2. Haga clic dentro de la tabla de distribuidores que cre anteriormente, luego elija Modificar > Tabla > Seleccionar tabla para seleccionarla. 3. Seleccione el estilo box1 del panel Estilos CSS del grupo de paneles Diseo para aplicarlo a la tabla. El estilo box1 crear un borde biselado alrededor de la tabla. 4. Acaba de usar el panel de diseo CSS para aplicar un estilo a un elemento en la pgina, pero tambin se pueden aplicar los Estilos CSS usando las sugerencias de cdigo en la ventana de cdigo. 5. Haga clic en Control-Z o elija Editar > Deshacer Aplicar para deshacer el estilo CSS que acaba de aplicar. 6. Haga clic en el botn Vista de cdigo y diseo de la barra de herramientas para que el espacio de trabajo se vea dividido. 7. Seleccione la tabla en la ventana de diseo para resaltar el cdigo de la tabla en la ventana de cdigo. 8. Coloque el cursor despus del ltimo atributo en la etiqueta de tabla. Presione la barra espaciadora para ver las sugerencias de cdigo y haga doble clic en class en la lista de atributos. Observe que los estilos CSS disponibles se muestran en el men de sugerencias de cdigo. 10. Haga doble clic en box1 de la lista de estilos de sugerencias de cdigos. 11. Haga clic en el botn Vista de diseo en la barra de herramientas para ver los cambios de cdigo en la pgina. 12. Elija Archivo > Guardar. 13. Presione F12 para obtener una vista previa del archivo dealerMaster.html en un navegador.

Resumen del tutorial antes de pasar a la creacin de aplicaciones dinmicas En este tutorial, aprendi a usar las herramientas de diseo bsicas de Dreamweaver MX y a crear la parte esttica del sitio Trio Motor Company (una compaa ficticia). Para aprender a convertir los archivos que cre en este tutorial en pginas de consulta dinmica, tome el tutorial Creacin de aplicaciones de Internet con Macromedia Dreamweaver MX y Macromedia ColdFusion MX.