Académique Documents
Professionnel Documents
Culture Documents
Dreamweaver MX
Los tutoriales de 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 web Trio Dealer Locator, una compaa ficticia. 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.
5) Los usuarios de Macintosh debern tener acceso por FTP o red a una PC con
Windows que tenga instalado un servidor ColdFusion MX. En el sistema de
ayuda de Dreamweaver encontrar los pasos detallados sobre cmo configurar los
parmetros FTP. Para acceder a dichas instrucciones elija Ayuda > Utilizacin de
Dreamweaver. A continuacin, haga clic en la ficha ndice y escriba FTP.
En este tutorial se tratan los siguientes temas:
Uso del panel Bases de datos para ver las fuentes de datos de ColdFusion MX
que se ha elegido la misma carpeta raz que un sitio existente. Haga clic en Aceptar
para cerrar el cuadro de dilogo. En los siguientes pasos se elegir una nueva carpeta
raz para el sitio.
3. Introduzca Trio_CF para el nombre del sitio y haga clic en Siguiente.
4. Seleccione el botn de opcin S, deseo utilizar una tecnologa de servidor, y elija
ColdFusion en el men emergente para elegir la tecnologa de servidor.
5. Haga clic en Siguiente.
En esta seccin, se crean dos consultas a la base de datos: una con el objeto Juego de
registros y otra en la vista de cdigo. La primera consulta obtiene una lista de los
distribuidores de Trio de una regin seleccionada, y la segunda obtiene una descripcin
de texto de la regin seleccionada.
Paso 1: Crear la consulta qDealers.
13. Seleccione la ficha Vinculaciones del panel Aplicacin para ver el juego de
registros qRegion que acaba de crear.
14. Guarde la pgina dealerMaster.cfm, pero no la cierre.
No es necesario usar las sugerencias de cdigo y las caractersticas de arrastrar y colocar
para crear juegos de registros en la ventana de cdigo. Puede simplemente escribir el
cdigo directamente. Utilizar sugerencias de cdigo y arrastrar objetos desde la ficha
Bases de datos del panel Aplicacin podra no ser tan eficiente como escribir cuando se
trata de bloques pequeos de cdigo como ste, pero s evita las consultas incorrectas por
errores tipogrficos.
Agregar contenido dinmico
Cuando un visitante del sitio web Dealer Locator selecciona una regin en el mapamundi
que aparece en la pgina dealerMaster.cfm (que se cre en el tutorial de diseo de sitios
web para el localizador de distribuidores), las consultas que cre en la seccin anterior
obtienen los datos que se necesitan para mostrar una lista de los distribuidores de la
regin. En esta seccin, se usa el objeto dinmico Tabla para crear un contenedor para
mostrar los datos consultados en la pgina dealerMaster.cfm. Tambin ver cmo el
modo de edicin Live Data le permite editar pginas visualmente con datos dinmicos.
Paso 1: Agregar informacin dinmica de regiones a la pgina dealerMaster.cfm y aplicar
un estilo CSS al encabezado.
5. Abra la ficha Vinculaciones del grupo de paneles Aplicacin, haga clic en el nodo
(signo +) Juego de registros qRegion, y arrastre la entrada NAME a la ventana de
cdigo y colquela sobre el texto resaltado.
Dreamweaver MX cambia el texto seleccionado por el cdigo que se necesita para
mostrar los datos devueltos por la consulta qRegion:
<cfoutput>#qRegion.NAME#</cfoutput>.
Siga los siguientes pasos para aplicar un estilo CSS al texto usando el panel Diseo y la
vista de cdigo:
1. Abra el grupo de paneles Diseo y seleccione la ficha Estilos CSS.
Si no aparece el grupo de paneles Diseo, elija Ventana > Estilos CSS.
2. Seleccione el botn de opcin Aplicar estilos.
3. En la ventana de cdigo, resalte toda la lnea Here is a list of the dealerships
incluyendo las etiquetas <p> y </p>.
4. Seleccione el estilo big en los Estilos CSS para aplicarlo al texto seleccionado.
Dreamweaver actualiza la etiqueta <p> con el atributo de clase necesario, como se
muestra en la siguiente ilustracin. Se agregar una etiqueta "span" con el atributo
de clase si no se seleccionaron ambas etiquetas <p> y </p>.
5. Elija Archivo > Guardar para guardar su trabajo.
Tambin puede elegir el panel Estilos CSS para aplicar estilos en la vista de diseo.
En esta seccin, se implementa una tabla dinmica para mostrar la lista de distribuidores
en la regin que el usuario seleccion y vincular los nombres de los distribuidores a una
pgina de Informacin detallada de distribuidores generada de manera dinmica.
1. Haga clic en el botn
2. Selecciona la tabla que contiene las columnas Dealer Name, City y Country y
brrela. No mueva el cursor. Puede seleccionar toda la tabla haciendo clic en
cualquier lugar de la tabla y luego haciendo clic en la etiqueta <table.box1> en el
selector de etiquetas en la parte inferior del espacio de trabajo.
3. Seleccione la ficha Aplicacin en la barra Insertar y haga clic en el botn de
objeto Tabla dinmica como se muestra en la siguiente ilustracin.
Puede editar el cdigo de las pginas dinmicas y ver los datos en vivo mientras trabaja.
1. Seleccione la tabla dinmica en la vista de diseo.
2. Haga clic en el botn Vista de cdigo para ver el cdigo de la tabla.
Si selecciona un elemento de pgina en la vista de diseo y despus se cambia a la
vista de cdigo, el cdigo para el elemento seleccionado se muestra y se resalta
automticamente, lo cual le evita el problema de tener que buscar fragmentos de
cdigo.
3. Cambie las etiquetas de tabla <td> por <th> en la primera fila entre el primer
conjunto de etiquetas <tr></tr>. No olvide cambiar tambin las etiquetas </td>
por etiquetas </th>.
La pgina de formulario Impresiones, como todas las pginas del sitio web de Trio, se
basa en la plantilla trioHome. Si complet el tutorial sobre diseo de sitios web, utiliz la
plantilla trioHome para aprender a usar plantillas para mantener la uniformidad en todas
las pginas de un sitio web y racionalizar el proceso de desarrollo.
1. Elija Archivo > Nuevo, seleccione la ficha Plantillas, seleccione el sitio web
trio_cf, seleccione la plantilla trioHome y haga clic en Crear. Esto crea una nueva
pgina web en base a la plantilla trioHome.
2. Si el espacio de trabajo an no est en la vista de diseo, haga clic en el botn
Vista de diseo en la barra de herramientas del espacio de trabajo.
3. Elimine la palabra Body de la regin editable Body.
Las regiones que se pueden editar tienen un borde verde. Este borde se puede
activar y desactivar en las preferencias de Dreamweaver MX. Si no se ve el borde,
elija Editar > Preferencias y seleccione la categora Resaltando. A continuacin,
marque la casilla de verificacin Mostrar para las Regiones editables.
4. Escriba Contact Trio en la regin editable y pulse Intro dos veces para crear
algo de espacio en la regin editable.
5. En la prxima lnea de la regin editable, escriba el texto We value any
comments and welcome any questions you may have. Please use this form to tell
us what you think of the Trio website., y pulse Intro.
6. Resalte la palabras Contact Trio
7. Abra el grupo de paneles Diseo y seleccione la ficha CSS.
8. Seleccione el estilo big en la lista de estilos CSS.
Se aplica el estilo big al texto resaltado.
9. Elija Archivo > Guardar y guarde la pgina como contact.cfm
Paso 2: Crear el juego de registros qRegion para llenar el men Seleccionar regin.
En esta seccin, se crea un juego de registros qRegion para llenar el men de seleccin
Regin en el formulario de insercin de registro que est creando. El juego de registros
qRegion que se crea aqu se especifica al crear el formulario con el objeto Insercin de
registro ms adelante en este tutorial.
1. Abra el grupo de paneles Aplicacin y seleccione la ficha Vinculaciones.
2. Haga clic en el vnculo Tipo de documento, seleccione ColdFusion del men
emergente en el cuadro de dilogo y haga clic en Aceptar.
3. Elija Archivo > Guardar para guardar el archivo.
4. Haga clic en el icono Juego de registros
Insertar.
14. Haga clic en Aceptar para salir del cuadro de dilogo Propiedades del men y otra
vez en Aceptar para crear el formulario. Si recibe un error de regin bloqueada,
coloque el cursor en la regin editable de la tabla y pulse Intro varias veces para
ampliar el rea de la regin editable. A continuacin, coloque el cursor muy por
encima del borde inferior de la regin editable y repita los pasos 1-14.
15. Pruebe modificar la composicin visual del formulario: cambie el tamao de las
columnas, reemplace las etiquetas de campo de la fuente del cdigo, aplique
estilos CSS o cambie el color.
16. Elija Archivo > Guardar para guardar la pgina.
Paso 4: Ejecutar el formulario de insercin
Las pruebas son una parte importante del desarrollo de pginas dinmicas. En esta
seccin, se prueba el formulario de insercin que se cre y se visualizan los datos
enviados.
1. Abra un navegador y vaya a http://localhost:8500/trio_cf/contact.cfm, o al sitio de
su servidor de pruebas si est usando un servidor remoto. Si est usando un
servidor remoto, asegrese primero de "poner" el archivo en el servidor remoto.
Consulte el sistema de ayuda de Dreamweaver MX para obtener ms informacin
sobre cmo hacerlo (elija Ayuda > Utilizacin de Dreamweaver).
2. Llene el formulario y haga clic en Insertar registro.
Aparece la pgina contactOK.html lo que indica que los datos fueron enviados a
la base de datos. Si recibe un error, verifique que la base de datos no est marcada
como de slo lectura.
11. Haga clic en Aceptar para poner etiquetas CFOUTPUT antes y despus del texto
#getMapRet#.
12. Elija Archivo > Guardar para guardar la pgina dealerDetail.cfm.
Paso 3: Ver y probar la seccin de distribuidores completada del sitio web de Trio.
Paso 2: Invocar los mtodos y las propiedades del nuevo servicio web.