DreamWeaver. CS5 y CS6. Cursosindustriales. Curso de DreamWeaver CS6 1

DreamWeaver CS5 y CS6 Cursosindustriales. Curso de DreamWeaver CS6 1 DREAMWEAVER CS5. BARRA DE HERRAMIENTAS II FORMULARIOS. Vamos a terminar de e...
0 downloads 0 Views 1MB Size
DreamWeaver

CS5 y CS6

Cursosindustriales. Curso de DreamWeaver CS6 1

DREAMWEAVER CS5. BARRA DE HERRAMIENTAS II

FORMULARIOS. Vamos a terminar de estudiar los menús de la barra de herramientas que dejamos en el capítulo anterior empezando directamente por los Formularios en Dreamweaver CS5. Desde este menú de Dreamweaver CS5, puedes agregar al documento Web un formulario con todos los controles necesarios para realizar la función específica que, por general realiza un formulario. Los formularios HTML proporcionan conectividad al usuario de la página Web para que exprese o acceda a servicios que requieren de un objeto en el documento Web para tal fin. Todos los controles del formulario, se tienen que utilizar dentro de un formulario, por lo cual, si no creas un formulario previamente, no podrás utilizar ninguna herramienta de formulario.

Este curso está redactado, diseñado, compilado y distribuido por Cursosindustriales.net. El autor del mismo te da derecho a compartirlo, imprimirlo, usarlo y modificarlo siempre que referencies la procedencia del curso y que en este caso es de Cursosindustriales.net y su autor Deimos_hack. Si has conseguido este curso y has tenido que pagar por ello, envíame un correo a [email protected] y enseguida me pondré en contacto contigo. Si quieres ayudar al proyecto Cursosindustriales, haz una donación mediante PayPal en los puntos autorizados de la Web.

Cursosindustriales. Curso de DreamWeaver CS6 2

Formulario

.

Esta herramienta te permite insertar un formulario predefinido por Dreamweaver CS5.

Dreamweaver CS5 selecciona una parte imprescindible del documento Web para insertar el formulario. El formulario se utiliza como si fuese un documento Web dentro del documento principal; pero como ves, Dreamweaver CS5 ha editado una región específica para el formulario. La ventana de propiedades cambia a las propiedades del formulario:

En donde en Id de formulario te muestra el nombre por defecto que le asigna Dreamweaver CS5 al formulario. Como puedes ver, todos los objetos en Dreamweaver CS5 tienen asignados un nombre por defecto o un Id; o algunas veces, ambos. Esto es muy útil cuando se quiere utilizar el objeto del documento en cuestión mediante alguna función. Las estudiarás más adelante. En Acción, proporcionaremos una dirección a un archivo que gestione los datos que el usuario introduzca en el formulario. Por lo general es un archivo de Script, como por ejemplo el CGIMail. El Método, te permite elegir el tratamiento de los datos y te permite escoger entre dos opciones básicas: GET que envía los datos al servidor por medio de una URL insertada en el encabezado de la petición HTML. POST que envía los datos al servidor en el cuerpo del mensaje de la petición HTML. La diferencia entre un método y otro, es que por GET, los datos se muestran en la dirección URL del navegador; mientras que por el método POST, los datos son ocultos. Eso sí, se suele utilizar el método GET cuando utilizas la opción de Acción y manejas los datos mediante un Script externo a la página. En Tipo de codificación, define la codificación MIME de los datos enviados al servidor. Esta codificación dependerá del tipo de datos enviados al servidor. Cursosindustriales. Curso de DreamWeaver CS6 3

En Dest elige un archivo para que visualice los datos cogidos del formulario una vez enviados al servidor.

Campo de texto

.

Un campo de texto es un Textbox que permite al usuario introducir un texto breve. Por lo general se utiliza para datos personales del usuario como Nombre, Apellidos, etc.

En Id, te inventas un identificador de control, que más tarde podrás utilizar en cualquier función para coger o comparar el valor del control. En Etiqueta, simplemente una palabra que aparecerá junto al control; por ejemplo, NOMBRE. Esta palabra aparecerá al lado del control dependiendo de cómo configures su Posición, y que puede ser antes del control, o después del mismo. El Estilo, proporciona un estilo visual muy básico al control. Se suele dejar por defecto, y aplicarle tus propias reglas CSS. Clave de acceso, te permite que asignes una letra para Tubular a este control. Indice de fichas, proporcionas la prioridad del Tabulador del teclado del usuario para acceder al control. Cuando se crea el control, la ventana de propiedades cambia a la ventana de propiedades del control en concreto.

Cursosindustriales. Curso de DreamWeaver CS6 4

El Textbox Campo de texto, establece el texto en cuestión que aparecerá. Ancho de caracteres, es el tamaño del control en píxeles. Car. máx., es el máximo números de caracteres que permite el control. Por ejemplo 50, te permite introducir cadenas alfanuméricas de hasta 50 caracteres. En el Radiobutton Tipo, puedes seleccionar el aspecto que tendrá el control según los caracteres máximos que puedas introducir y siendo una línea o de varias líneas el control. Contraseña modifica el aspecto del control y cuando insertes texto, aparecerá codificado. Los Checkbox, Desactivados y Solo lectura, te permiten establecer el control para que esté inhabilitado pero visible o que esté habilitado mostrando el texto introducido previamente en Campo de texto y no permita al usuario introducir nada. En Valor inicial, establecerá un identificador para usarlo posteriormente en PHP. Más adelante estudiaremos esta opción. La Clase, te permite establecer una clase establecida.

Campo oculto

.

Este Campo oculto no se mostrará en el formulario ni en el documento Web, pero puedes insertar dentro de él, el destino de un Script de seguimiento o cualquier otro programa que analice la Web o que genere alguna función especial.

Área de texto

.

Es igual que el Campo de texto, pero con la diferencia que está habilitado para insertar más cantidad de caracteres alfanuméricos y sirve para que el usuario pueda insertar un comentario más extendido que el anterior control.

Casilla de verificación

.

Te permite insertar Checkboxs en el formulario. Estos se utilizan para que el usuario pueda seleccionar una serie de opciones que más le guste.

Cursosindustriales. Curso de DreamWeaver CS6 5

En Nombre de la casilla, Dreamweaver CS5 le proporciona un valor por defecto. Valor activado, establece un valor que utilizará un script. Estado inicial, permite que el control esté seleccionado o no. Por defecto está en blanco para que el usuario pueda seleccionar la opción adecuada, pero muchos de estos controles están habilitados desde el inicio. El botón Dinámico, permite establecer comportamientos dinámicos y que veremos junto a PHP.

Botón de opción

.

Este control es muy similar al anterior, pero con la diferencia de que, en cada Grupo de opción, solo se puede seleccionar uno de ellos. Unitariamente sirven a la misma función que el control anterior.

Grupo de casillas de verificación

.

Te permite insertar varios Checkbox en el formulario, consignándolos dentro de un grupo.

Mediante las opciones [ + ] y [ - ], te permite seleccionar más o menos Checkbox. Cursosindustriales. Curso de DreamWeaver CS6 6

En Label el texto que contendrán cada Checkbox. El Value, por defecto estará desactivado. Abajo, Disponer utilizando, te permite establecer el efecto visual que tendrá el grupo dentro del formulario, y será para insertarlo dentro de una tabla o los Checbox estarán separados unos de otros mediante saltos de línea (por defecto).

Grupo de opción

.

Similar anterior, pero formado por Radiobuttons.

Para que solo se pueda seleccionar uno de todos los Radiobuttons que pongas, debes de establecer el mismo Value para todos, es decir, la misma palabra.

Seleccionar (Lista / Menú)

.

Te permite insertar una lista desplegable para que el usuario seleccione uno o varios Ítems. Cuando insertar esta herramienta, la ventana de propiedades cambia a:

En Seleccionar, se muestra el nombre por defecto que le asigna Dreamweaver CS5. En Tipo, Dreamweaver CS5 te permite establecer dos tipos de estilo; el estilo Menú que se visualiza todos los ítems y te permite elegir uno; o el tipo Lista que te muestra el botón desplegable para que se visualice todo el Cursosindustriales. Curso de DreamWeaver CS6 7

contenido. En Alto, te permite establecer el alto de la fila. Por defecto es un carácter de alto, pero puede ser todos los que tú quieras. En el Checkbox, Selecciones Permitir múltiples, te permite seleccionar más de un Ítem de la lista; tantos como quieras y existan. El botón Valores de la lista:

Te permite editar cada uno de los elementos que tendrás en la lista. Pulsando más o menos, nos agregará nuevos elementos.

Menú de salto

.

Es similar a la anterior herramienta pero con la diferencia de que porporciona un enlace a una URL o un hipervínculo. La propia imagen establece las características de la herramienta, por lo que no tiene lugar hablar más de ello. Cursosindustriales. Curso de DreamWeaver CS6 8

Campo de imagen

.

Inserta una imagen en el formulario al igual que si insertaramos una imagen en el documento Web. Esta imagen se puede editar de la misma forma que se hace en el documento Web. Dentro del formulario, esta imagen tiene un Id y un nombre y puedes establecer unos aspectos visuales rápidos.

Campo de archivo

.

Esta herramienta inserta dentro de un formulario el famoso botón de Examinar que te permite elegir un archivo para subirlo al servidor. Ten en cuenta que, a pesar de que selecciones un archivo, no significa que se envíe al servidor, pues tienes que configurar físicamente el Script que se encargará de realizar dicha acción.

Botón

.

Esta herramienta permite dar una respuesta de salida al formulario. Este control, por defecto cambia la ventana de propiedades a:

En Nombre del botón, establece el nombre que Dreamweaver CS5 establece por defecto. El Valor, por defecto se pone automáticamente en relación al RadioButton Acción, el cual te permite enviar el formulario y su contenido, Restablecer el formulario o no hacer nada. Recuerda que al seleccionar el Radio Enviar formulario, el Valor adquiere el atributo SUBMIT; si seleccionas el RadioButton Restablecer, el Valor cambiará a RESET. Al seleccionar Ninguno, el Valor quedará vacío o NOTHING. Más adelante verás cómo puedes utilizar el botón en modo Ninguno para dar respuestas a tus funciones.

Cursosindustriales. Curso de DreamWeaver CS6 9

VERIFICACIÓN DE LOS DATOS DE UN FORMULARIO

Insertar comportamientos. Dreamweaver CS5 te permite insertar dentro del formulario comportamientos pre configurados para que el usuario introduzca los datos adecuados en vez de datos erróneos. Los comportamientos, asocian un evento con una acción de un Script. Para seleccionar los comportamientos de Dreamweaver CS5, selecciona el formulario, y en la barra de menús, el menú Ventana selecciona Comportamientos. También puedes acceder a esta ventana mediante la tecla Shift + F4.

Pulsa sobre el botón + para añadir un nuevo comportamiento. Se abre la ventana siguiente:

Cursosindustriales. Curso de DreamWeaver CS6 10

Pinchamos la Validación del formulario para que se nos muestre otra ventana en la cual tenemos los controles que debemos de validar en el formulario. Por lo general se validan los controles del texto del formulario, tanto en los caracteres alfanuméricos como los caracteres de Email.

En este formulario corto, solo he dispuesto dos Textbox de campo de texto, con lo cual, solo se muestran los dos campos. El Valor Obligatorio, prohíbe al usuario que deje en blanco el campo seleccionado en la ventana de validación del formulario. En el cuadro Aceptar, puedes elegir varias opciones: Cualquier cosa; Dreamweaver CS5 no impone un tipo de dato en concreto, sino que permite establecer cualquier carácter alfanumérico en el campo seleccionado. Dirección de correo electrónico, establece una dirección de correo electrónico. Dreamweaver CS5 comprueba la presencia del carácter @. Número, establece que solo se puedan insertar números en el campo Cursosindustriales. Curso de DreamWeaver CS6 11

seleccionado. Número del... a..., Indica un rango de números que deberá de aparecer en el control para que el campo se pueda validar. Una vez pulsado Aceptar, el panel de comportamientos, aparece el evento OnMouseOver, que significa "al mover el ratón fuera".

En este caso, solo hemos configurado uno de los dos campos que había en el formulario. Si decidimos habilitar los dos campos, el panel de comportamientos, mostraría dos comportamientos, uno por cada campo. Desde el panel de comportamientos, puedes cambiar el evento que tendrá lugar en el formulario. Al seleccionar un campo en concreto, pulsa sobre el icono de mostrar todos los eventos

, y selecciona el evento en cuestión.

O desde el panel de comportamientos, pinchando sobre la flecha que aparece junto al evento en cuestión se despliega una ventana con el nuevo evento a elegir.

Cursosindustriales. Curso de DreamWeaver CS6 12

Si no rellenas el campo al que has configurado de forma adecuada, Dreamweaver CS5 te mostrará un mensaje de error en el cual se te pedirá que corrijas la situación. Estos errores se introducen dentro de un Script de JavaScript que Dreamweaver CS5 crea por defecto al generar el evento de formulario:

Para que los mensajes se muestren en tu idioma predefinido, debes de modificar, los textos azul que estén entre comillas simples. En concreto y en este ejercicio, la línea 7 en la zona 'must contain an e-mail address.'; la línea 9,'must contair a number.'; la línea 12, 'must contain a number between '; y la línea 13, 'The following error(s) occurred:'. El cambio de tabulador \n debe de mantenerse en su sitio tal cual. Con esto, los mensajes de error se mostrarán en tu idioma traducido.

VALIDACIÓN DE WIDGETS DE SPRAY. En el menú de Formularios del panel de herramientas, además de poder insertar los controles básicos de los formularios, puedes insertar controles específicos con un estilo visual CSS y que además te obliguen como usuario, a responder su contenido. Cursosindustriales. Curso de DreamWeaver CS6 13

Estos componentes ayudan al administrador ya que analizan y comprueban que los datos introducidos por el usuario sean del tipo adecuado.

Campo de texto de validación de Spray

.

Esta herramienta se puede acceder desde la barra de menús, el menú Insertar y la función Spray te muestra una lista de posibilidades.

Una vez, rellenado el ID, el nombre y la posición relativa; se crea el control y la ventana de propiedades cambia según muestra la imagen superior. En Campo de texto Spray, será el nombre por defecto que Dreamweaver CS5 le pone al control. En Tipo, podemos seleccionar el tipo de dato que contendrá este campo de texto; puede ser:

Y seleccionado el Tipo, se mostrará una ventana que te permita configurarla adecuadamente; es decir, un Correo electrónico, deberá tener el símbolo @, una fecha deberá de tener un formato 01/01/0001, o día/mes/año o mes/día/año, etc. El número de teléfono, unos dígitos establecidos, etc., etc.

Cursosindustriales. Curso de DreamWeaver CS6 14

En Formato, eliges el formato que debe de visualizarse el tipo de dato. En Estado de vista previa, se podrá visualizar en el propio Dreamweaver CS5 el mensaje de aviso cuando la introducción de datos no sea correcta:

Siendo Inicial, sin mensaje de aviso, Obligatorio, el campo se vuelve rojo y no permite al usuario rellenar otro control si antes no rellena este; Válido, el fondo verde sin mensaje. En el CheckBox Validar al puedes seleccionar tres opciones:   

OnBlur, valida al desenfocar el control, es decir, cuando el ratón sale del campo correspondiente. OnChange, es cuando el usuario cambia el valor del campo o lo modifica. OnSubmit, cuando el usuario envía el formulario, Spray revisa el campo y actúa en consecuencia.

En el control de Sugerencia, puedes insertar una ayuda para el usuario que se mostrará cuando el control tenga el foco. La ayuda la tienes que describir tú. El control Patrón, te permite insertar un patrón establecido para un valor fijo; por ejemplo imagina que en el campo de SPRAY de texto quieres que el usuario inserte un número de teléfono; pues en patrón pones tantos espacios números como tenga el número en concreto, por ejemplo 000000000. Hay que indicar que al incluir cero como Patrón, el campo de validación, espera una serie de números enteros y no permitirá caracteres alfabéticos. Sin en Patrón, hubieses escrito una letra en mayúsculas o minúsculas, te permitiría introducir todo el texto en mayúsculas o minúsculas, según la letra insertada como Patrón. Por lo general:

A, representa un carácter alfabético en mayúsculas. a, representa un carácter alfabético en minúsculas. B ó b. A Dreamweaver CS5 no le importa el hecho de que sean mayúsculas o minúsculas. X, representa un carácter alfabético en mayúsculas. x, representa un carácter alfabético en minúsculas. Y, representa un carácter alfabético en mayúsculas. y, representa un carácter alfabético en minúsculas. Los controles Car. mín. y Car. Máx., establecen el tamaño mínimo y máximo del valor del campo SPRAY, por ejemplo; un mínimo de 10 caracteres alfanuméricos y un máximo de 30 caracteres alfanuméricos.

Cursosindustriales. Curso de DreamWeaver CS6 15

Este control se habilita cuando el tipo de dato a introducir en el campo de SPRAY es un tipo entero, un correo electrónico o una dirección URL. Los controles Valor min., y Valor máx., hace la misma función que el anterior, pero es válido para más tipos de datos como fecha, hora, moneda y notación científica, entre otros, aparte de los anteriores. Por ejemplo si en Tipo de dato escogemos un valor Entero, podemos hacer que el campo de SPRAY en cuestión solo permita un rango de números si ponemos en valor u otro en cada Valor. Por ejemplo, en Car. min., ponemos un dos y en Car. Máx., otro dos para asignar el ancho de bytes de la cadena. En Valor min., ponemos, por ejemplo 10, y en Valor máx., ponemos un 99. Ahora el control de SPRAY en concreto nos permitirá introducir números desde el 10 hasta el 99 incluido. De introducir cualquier otro dato fuera de ese rango, Dreamweaver CS5 nos mostraría un error de SPRAY.

Área de texto de validación

.

Este control es muy parecido al anterior, con la diferencia que está concebido para que el usuario exponga un contenido u opinión más extensa de la que podría hacer con el campo anterior. El panel de propiedades, cuando seleccionas este control queda así.

Como puedes ver, no difiere mucho del anterior, salvo en pequeñas diferencias. El Radiobutton, Contador, te permite insertar un pequeño contador de caracteres que, junto al Car. Máx., permitirá ver al usuario los caracteres que le quedan para escribir en el campo. El CheckBox, Bloquear caracteres extra, te permite bloquear los caracteres extras que inserte el usuario en el campo de área de validación de SPRAY. En Sugerencia, puedes poner una sugerencia para el usuario.

Cursosindustriales. Curso de DreamWeaver CS6 16

Casilla de verificación de campo SPRAY. Cuando seleccionas este campo SPRAY, la ventana de propiedades cambia a.

El Radiobutton Obligatorio, obliga al usuario a marcar la casilla de validación. En Aplicar rango, dependiendo de los Checkbox que tengas en el documento Web, podrás seleccionar un rango de Nº mínimo de opciones seleccionadas o Nº máximo de opciones seleccionadas. En Estado de vista previa, la opción Inicial hace que Dreamweaver CS5 no valide el control cuando carga el documento Web, pues de lo contrario saldría error si tienes el Radiobutton Obligatorio seleccionado.

Selección de validación de SPRAY

.

Este campo de SPRAY servirá para mostrar una lista desplegable en la cual el usuario deberá elegir uno o varias opciones de la lista.

Como puedes ver tampoco tiene mayor secreto este Widget. En la opción, No permitir, puedes seleccionar dos tipos de estados; el Valor en blanco, que no dejará que el usuario no seleccione ningún Ítem, o Valor no válido, que no realizará ninguna acción. Este campo nos permitirá validar el campo de SPRAY y actuará según el evento que seleccionemos en Validar al. Pinchando en el modo Diseño sobre el control de SELECT, la ventana de propiedades cambia a:

Cursosindustriales. Curso de DreamWeaver CS6 17

Este control se rellena igual que su homólogo en HTML por lo que no voy a invertir más tiempo en su explicación.

Contraseña de validación de SPRAY

.

Este campo te permite establecer el tamaño y formato que tendrá un campo de texto en el cual se tome como contraseña.

Siendo: Min. car., y Máx. car., el tamaño mínimo y máximo de la contraseña. Es decir, un mínimo, por ejemplo de 5 caracteres alfanuméricos y 10 máximo. Mín. letras y Máx. Letras, establece el mínimo y máximo de letras alfabéticas que tiene que tener el control. Mín. números y Máx. Números, establece el mínimo y máximo de números que debe tener la contraseña. Mín. mayúsculas y Máx. Mayúsculas, establece el mínimo y máximo de mayúsculas en el control. Mín. car. especiales, Máx. car. especiales, establece el mínimo y máximo de caracteres especiales como por ejemplo @. No es obligatorio que se rellenen esas propiedades. Si no se rellenan, podrás rellenar el control como si de un campo de texto normal se tratase; pero este control está designado para que al introducir una contraseña de usuario, tenga establecidos unos valores mínimos de caracteres distintos y así la contraseña sea más compleja. En estado de vista previa, puedes seleccionar varias opciones:

Y al rellenar el contenido, si no has introducido la contraseña de acuerdo a las propiedades que has marcado te mostrará un error de acuerdo al tipo de error, en el navegador. Cursosindustriales. Curso de DreamWeaver CS6 18

Confirmación de validación de SPRAY

.

Este control se usa, generalmente junto al control anterior de validación de contraseña de SPRAY. Este control, comprueba el control anterior y obliga al usuario a repetir la misma contraseña para validar la misma. Cuando pinchas sobre el control:

En Validar con, se muestra el nombre del control de la contraseña de validación SPRAY anterior. Esto hará posible que si no introduces en este control, la misma contraseña que en el anterior, se producirá un error de validación.

Grupo de opciones de validación SPRAY

.

Este control te permite insertar un grupo de Radiobutton de SPRAY cuya configuración es similar al grupo de opción convencional.

En Label, configuras el texto de cada Radiobutton. En Value, le agregas un valor si quieres usarlo después en algún Script.

Cursosindustriales. Curso de DreamWeaver CS6 19

En el Textbox Valor vacío, introduces un mensaje que aparecerá cuando el usuario presione ese Radiobutton. Hay que asignar en este campo el valor de Value del Radio correspondiente. Esta propiedad de SPRAY te permitirá marcar el Radio, pero no te dejará confirmarlo; será como si estuviese vacío. El Textbox Valor no válido, insertas el Value rellenado anteriormente de cualquiera de los Radiobutton para que, a la hora de confirmar el formulario, no te permita seleccionar dicho Radio, y te exija que marques otro. Esto se hace para que a la hora de seleccionar un conjunto de opciones, veas que la opción que va a marcar el usuario no es adecuada o está bloqueada por un motivo único. Cuando, en modo de diseño, pulsamos sobre cualquier Radio, la ventana de propiedades cambia a:

En donde te indica el Valor que tiene asignado el control, e inicialmente si se está activado o desactivado. El botón Dinámico, sirve para establecer unas funciones de PHP que más tarde estudiarás.

SPRAY Este menú te proporciona herramientas visuales agradables para insertar en tu página Web. Aunque ya hemos visto la mayoría de los controles de SPRAY, existen varios controles que dejamos para ver más adelante. Ahora es el momento de estudiarlos. Desde el menú de SPRAY de la barra de herramientas, y en el menú Diseño, dispones de estas herramientas que ahora vas a estudiar.

Cursosindustriales. Curso de DreamWeaver CS6 20

Conjunto de datos de SPRAY Los conjuntos de datos SPRAY son objetos JavaScript que recopilan datos especificados para así cargar los datos más rápidamente al guardarlos como una fuente de datos XML o HTML. El conjunto de datos SPRAY se guardan en forma de matriz y en columnas y filas y ofrecen un aspecto visual más agradable y un dinamismo a los datos más rápido. Tanto el conjunto de datos de Spray como las otras herramientas de SPRAY siguientes (Región de SPRAY, Repetición de SPRAY y Lista de Repetición de SPRAY), se utilizan con un conjunto de datos SPRAY, con lo que por el momento, dejaremos el contenido para más adelante cuando creemos nuevos contenidos de datos y estudiemos a fondo estas herramientas.

Barra de menús SPRAY

.

La barra de menús SPRAY te ofrece la posibilidad de crear atractivos menús personalizados para que puedas insertar contenido en tu página Web con Dreamweaver CS. Esta barra de menú creada en JavaScript y manipulada por CSS, ofrece al usuario un aspecto diferente a los obtenidos por medios tradicionales ya que es desplegable en fichas. Cuando pulsas sobre la herramienta, se muestra la ventana de selección del menú:

Desde aquí puedes seleccionar el aspecto visual que quieres que tenga el menú de fichas y que se desplacen en horizontal o en vertical. Yo seleccionaré en horizontal, por defecto.

Cursosindustriales. Curso de DreamWeaver CS6 21

Cuando se muestra el menú, ya viene predefinido con un estilo CSS que Dreamweaver CS le proporciona. Pero si en tu sitio Web ya tienes otra barra de menús de SPRAY en uso, el elemento de SPRAY actual tendrá el mismo estilo que los otros menús del sitio, ya que el menú de SPRAY copia los estilos CSS cuando se crean. Como primera opción, podemos ver qué encima del menú de SPRAY en una zona en azul, al seleccionarla cambiará la ventana del propiedades a la ventana de propiedades de menú de SPRAY.

En esta ventana puedes observar los Ítems que tendrá cada elemento y sus Ítems anidados. Resaltado, en azul, puedes ver que en los TextBoxs de la derecha de la ventana puedes configurar el nombre, insertar un vínculo al pulsar sobre él, ponerle un título y asignarle un destino de apertura del hipervínculo asignado. Puede quitar y agregar Ítems mediante los botones de + y - de que dispone el panel de propiedades de este control. En el TextBox Barra de menús, puedes poner un nombre al control para luego llamarlo desde otro elemento JavaScript. El botón inferior izquierdo, Desactivar estilos, desactiva los estilos .css asignados al control lo que entonces se mostrará la forma básica de esta barra de menú simplemente con etiquetas de alineación . El link, Personalizar este widget, te permite personalizar el control abriéndote la ayuda de Dreamweaver CS5 para que así puedas guiarte en la personalización del widget. Pero para que te hagas una idea, en la raíz del directorio de nuestro sitio Web, Dreamweaver crea una carpeta llamada SpryAssets en la cual se incluyen todos los archivos de widget que tengas usando en las páginas de tu sitio Web. La ayuda de Dreamweaver CS5 te va indicando en donde tienes que buscar para cambiar la apariencia como el color, el tipo de fuente, los efectos gráficos, etc.

Cursosindustriales. Curso de DreamWeaver CS6 22

Paneles en fichas de SPRAY

.

Este componente de widget, proporciona un estilo de navegación en fichas horizontales a modo de carpeta de documentación.

Como puedes ver el aspecto de este widget es muy similar al control TabControl de cualquier entorno de desarrollo orientado a objetos. Dentro del control de paneles en fichas de Dreamweaver CS5, puedes insertar contenido igual que si lo insertaras dentro del propio cuerpo del documento Web. Al igual que en el anterior control, al pulsar sobre la zona azul superior, la ventana de propiedades muestra las propiedades de este widget para que puedas configurar su aspecto:

Como puedes ver es muy similar al anterior, con la diferencia que existe un ComboBox (en la esquina superior derecha), y en el cual se puede seleccionar la ficha que estará presente al abrir el documento por defecto. Pulsando dos veces sobre el nombre seleccionado, podrás cambiarlo y poner el nombre que tú quieras.

Cursosindustriales. Curso de DreamWeaver CS6 23

Acordeón de SPRAY

.

Este componente muestra un control con varias fichas que pueden expandirse y ocultarse para mostrar más contenido dentro de la ficha seleccionada.

Como ves es muy similar al anterior, pero la diferencia es que el contenido se muestra en vertical en vez de en horizontal. Además en cada panel de acordeón tienes en una esquina, un símbolo de un ojo para que puedas mostrar (en modo Diseño), el panel en concreto y así poder insertar contenido en él. La ventana de propiedades de dicho control cambia a esta forma:

Que como puedes ver es aún más sencillo que el anterior control. Desde esta ventana puedes cambiar el nombre de cada panel, o mediante las flechas de arriba y abajo seleccionar el panel que se mostrará en primer lugar al abrirse el documento Web. Los controles + y - agregan un nuevo panel de acordeón al control o elimina el seleccionado.

Cursosindustriales. Curso de DreamWeaver CS6 24

Panel que puede contraerse

.

Este componente te muestra un panel que se muestra y que se despliega totalmente:

La ventana de propiedades cambia a la ventana de propiedades del control al clicar sobre la zona azul del control:

Casi no tiene explicación esta ventana, pero puedes seleccionar en Mostrar, que el control permanezca abierto o cerrado cuando se ejecute la página Web. Por defecto está en Abierto y solo tienes dos opciones: Abierto o Cerrado. En el CheckBox Activar animación, Dreamweaver CS5 la tiene marcada por defecto y hace que cuando pulses el panel para mostrar contenido, se abra continuamente y no se muestre de repente abierto, que es lo que pasaría si desactivásemos este control.

Información sobre herramientas de Spray

.

Este control muestra una información adicional cuando el usuario pasa el ratón sobre cierto elemento en concreto de la página Web. El widget de Información sobre herramienta de SPRAY está formado por tres partes:

Cursosindustriales. Curso de DreamWeaver CS6 25

El contenedor de la información sobre la herramienta, el elemento o elementos de la página que activan la información, y el Script JavaScript que genera la información.

Huelga decir que para usar esta herramienta necesitas tener un control de Widget en el documento Web.

En el TextBox, Desencadenante, seleccionarás el control de Widget que tengas en el propio documento Web, y en el cual se mostrará la información que rellenes en el contenedor de la herramienta de información. Los controles Desplazamiento horizontal y Desplazamiento vertical, permiten que la información se muestre de una manera u otra en el control seleccionado. La Demora para mostrar, indica el tiempo en segundos que esperará esta herramienta para mostrar la información desde que apunta el ratón al control. La Demora para ocultar, una vez quitado el ratón del control, indica el tiempo que tarda en desaparecer la información. En el RadioButton Efecto, puedes escoger un efecto de visualización siendo en Persiana, que se muestra la información en esa forma; y en Desvanecer va apareciendo y después desaparece progresivamente. Los CheckBox Seguir al ratón y Ocultarse fuera del ratón, ofrecen la posibilidad de que la información, una vez mostrada, siga al movimiento del ratón, o permanezca fuera del radio de acción del ratón y permanezca fija en el documento Web.

Cursosindustriales. Curso de DreamWeaver CS6 26

INCONTEXT EDITING Desde esta herramienta, InContext Editing es un servicio online de hospedaje que permite a los usuarios hacer simples cambios en el contenido web en un navegador web. Para cambiar de una página web, los usuarios simplemente vaya a la página, registrarse en el servicio de InContext Editing y editar la página. Las opciones de edición son sencillas y elegantes, y no requieren conocimientos previos de HTML o de edición web.

Crear región editable

.

Esta herramienta te permite configurar las regiones editables en nuestro documento Web. Está claro que para que las regiones sean editables, deberían de tener una configuración para poder ser editables y no estar bloqueadas. Por norma general, para usar estas regiones editables, se suelen usar en plantillas Dreamweaver CS5.

Crear región repetida

.

Para más información AQUÍ.

TEXTO Desde este menú de herramientas, podremos configurar los estilos gramaticales que tendremos en nuestro documento Web y en nuestro sitio. También podremos acceder a estos tipos de herramientas desde la barra de menús en el menú Formato.

En este menú podrás establecer por orden de aparición: el formato de la sangría, el estilo en itálica, negrita, sobresaliente, énfasis, seleccionar un nuevo párrafo, insertar comillas especiales, proponer la etiqueta PRE, seleccionar los estilos de cabecera o insertar títulos de documentos (h1, h2, h3), usar listas predefinidas por defecto, utilizar etiquetas de alineación, e insertar otros tipos de símbolos al documento Web.

Cursosindustriales. Curso de DreamWeaver CS6 27