Curso Dreamweaver MX - avimcv.e.telefonica.netavimcv.e.telefonica.net/al vuelo/CursoDreamweaver MX...

Curso Dreamweaver MX

Ejercicios prácticos preparados por:

Sebastián Gil Juan Diciembre 2005


Ejercicios prácticos preparados por: Sebastián Gil Juan

Diciembre 2005

2


Índice:

Tema Página

Crear un Sitio Web 3

Crear página Web 7ª

Definición de Sitio para avimcv 10ª

Escribir texto 12ª

Crear tabla 14ª

Insertar tabla flotante o capa 19ª

Crear un vínculo 20ª

Crear un vínculo a un E-mail 21ª

Crear un vínculo en zona interactiva 22ª

Crear un vínculo a página Web 23ª

Crear un botón Flash 24ª

Preparar fotografía para la página Web 25ª

Insertar una imagen de sustitución 28ª

Vincular un archivo o documento 30ª

Agregar un nuevo centro en el menú desplegable 32ª

Configuración de la Opción del Cuadro de Diálogo 33ª

3


Crear un Sitio Web (principal)

Abrimos el programa Dreamweaver MX.

1º.- Pulsar en Sitio de la Barra de menús, seguidamente pulsar en

Administrar sitos y se abre la siguiente ventana Administrar sitios.

2º.- Pulsar en Nuevo > seguidamente pulsar en Sitio y se abre la ventana, Definición

del sitio para (sale el nombre que le dimos a la página).

4


Crear un Sitio Web

3º.- En la ventana Definición del sitio, en la pestaña Básicas (que nombre deseas

asignar al sitio), escribe el nombre para tu página y pulsa Siguiente

4º.- En la siguiente ventana (Editando archivos parte 2), marcaremos No, no deseo

utilizar una tecnología de servidor y pulsar en Siguiente

5


Crear un Sitio Web

5º.- En la siguiente ventana (Editando archivos parte 3), marcar Editar copias locales

en mi equipo y luego cargarlas al servidor cuando estén listas (recomendado). Y

pulsar en Siguiente

6º.- En ventana Definición del sitio (Compartiendo archivos), en Como conecta con su servidor

remoto, selecciona Ninguno y pulsar Siguiente

6


Crear un Sitio Web

7º.- Después de leer el resumen donde nos indica la Configuración de nuestro Sitio,

pulsar en Completado.

8º.- En la ventana de Administrar sitios aparece el sitio que terminamos de crear

(sebas.gil.dibujos), ahora nos queda pulsar en Listo

7


Crear Página Web

9º.- Pulsar Archivo de la barra de menús, en el desplegable seleccionar Nuevo.

10.- En la ventana de Nuevo documento; a) pestaña General, en Categoría

selecciona Página básica. b) en Página básica, seleccionar HTML. Y c) pulsa en

Crear y se abre la siguiente ventana, documento sin título (Untitled-1)

8


Crear Página Web

11.- Escribir el nombre que quieras para la página principal

12.- Pulsar en Archivo de la barra de menús y selecciona Guardar como

13.- escribe en Nombre: index, que es como se denominas todas las páginas

principales y seguidamente pulsa en Guardar

9


Crear Página Web

Ahora ya tenemos dentro de la carpeta Sitio, sebas.gil.dibujos, la página principal

con el nombre de index

Todas las Páginas Web tienen una estructura básica, es decir empiezan por <HTML> forma

abierta y terminan (ver final).

2º.- Es el título <TITLE> forma abierta, es decir el nombre de la página y </TITLE> forma

cerrada.

3º.- <HEAD> forma abierta, que contiene todas las formas comunes para ese documento, es

decir el fondo, etc.… y </HEAD> forma cerrada.

<BODY> forma abierta y </BODY> forma cerrada

Y para finalizar, según indicación anterior, </HTML> forma cerrada.

Nota:

Para actualizar el programa Dremaweaver MX, pulsar el Ver en la barra de menús >>

Código fuente >> En Ampliar, pulsar sobre Dreamweaver exchange

10


Definición del sitio para avimcv

Datos Locales

11


Definición del sitio para avimcv

Datos remotos

12


Escribir Texto

1º.- Abrir Dreamweaver >> Pulsar en Index.

2º.- Pulsar en Archivo en la barra de menús >> luego pulsar en Nuevo y en la

ventana que aparece (Nuevo documento), selecciona Página básica así como

HTML, para finalizar, pulsar en Crear.

13


Escribir Texto

En las ventanas Propiedades de la página, configura los parámetros de Fuente de

página así como tamaño, color y puntos, que se vincularán a todas las páginas,

quedando inalterables el texto en todas.

Una vez escrito el texto selecciona <tr>.

En Propiedades Selecciona la Fuente, el Tamaño, y selecciona Puntos, Color así

como el resto de parámetros.

14


Crear Tabla

1º.- Crear una nueva página: pulsar en Archivo >> selecciona Nuevo.

2º.- En la ventana de Nuevo documento; a) pestaña General, en Categoría

selecciona Página básica. b) en Página básica, selecciona HTLM. Y c) pulsa en

Crear y se abre la siguiente ventana, documento sin título (Untitled-1)

15


Crear Tabla

3º.- Pulsar en Tabla y se abre la siguiente ventana de la izquierda (Tabla)

4º.- En la ventana de Tabla, ajustamos parámetros (filas y columnas) según nuestra

necesidad, para este ejercicio y la página de avimcv, ajustaremos el ancho de la tabla

a 500 píxeles, pulsar en Aceptar y ya tenemos la tabla en el documento, como se

muestra en la ventana de la derecha

16


Crear Tabla

5º.- Clicas sobre el botón secundario dentro de la fila o celda que tengamos que

dividir, en el desplegable que se nos abre, selecciona Tabla y en el menú contextual

que aparece, pulsar sobre Dividir celda, apareciendo la siguiente ventana

(Dividir celda).

6º.- En la ventada Dividir celda, selecciona Filas o Columnas, según la necesidad de

cada caso y posteriormente en Número de filas a columnas escribe la cantidad en la

que se dividirá, por última pulsar sobre Aceptar.

17


Crear Tabla

7º.- Buscar el texto, seleccionar y copiar (Ctrl.+C), seguidamente pegar (Ctrl.+V) en

la fila o celda de la página que estamos trabajando.

Para crear una nueva línea, pulsar en la tecla de Tabulación (dejando dos espacios),

para que solamente deje un espacio entre líneas, pulsar Mayús. + Intro

8º.- Configurar Fuente y tamaño; a) Clic izquierdo dentro de una fila. B) Pulsar en

<tr> para seleccionar texto. c) En Fuente selecciona; Arial-Helvéticas-San-rerif.

d) En tamaño ajusta a 12 y selecciona Puntos.

Una vez finalizado tanto el copiar el texto como de la configuración de la fuente,

pulsar F12 para guardar los cambios efectuados a la página.

Nota: Colocando el puntero del ratón en una celda y pulsando la tecla de tabulación,

baja a la celda siguiente, al llegar a la última celda, si pulsas la tecla se crea toda una

fila nueva.

18


Crear Tabla Dividir y anular celdas desde Propiedades

9º.- a) Selecciona la fila, b) Selecciona <tr> y pulsa sobre] [(dividir la celda en filas o columnas)

y nos sale la ventana de Dividir Celdas, selecciona filas o columnas y escribe el número en que

se dividirá, para finalizar pulsa en Aceptar.

10ª.- a) Selecciona la fila, b) Selecciona <tr> y pulsa sobre y se eliminan las tres columnas,

quedando la fila sin división.

19


Insertar Tablas flotantes o Capas

Para insertar Tablas Flotantes o Capas:

1º.- a) Abrimos la Pestaña Diseño, luego seleccionamos Estándar. b) Pulsar sobre el icono

Dibujar tabla. c) Poner el puntero de inserción (convertido en una cruz +), donde tengamos

que dibujar la tabla (como se muestra en la parte superior derecha de la imagen)

2º.- a) Con el puntero de inserción dentro de la pabla, insertar la imagen o texto adecuado. b) Si

pulsamos sobre el cuadradito situado en la parte superior izquierda de la tabla, se puede arrastrar y

cambiar de posición

20


Crear un Vínculo

1º.- Abrir el programa Macromedia Dreamweaver MX >> Desplegar la Carpeta donde vamos a

trabajar (ventana de la izquierda) y nos aparece la ventana de la derecha, donde nos muestra todos

las páginas que contiene.

2º.- Abrir la página donde queremos hacer el vínculo.

3º.- Marcamos el texto que nos interesa Vincular (en este caso Ciberaula de Repaso)

4º.-En la Barra de Vínculos, abrir la Carpeta y en la siguiente ventana, seleccionamos c_repaso y

ya tenemos en la barra de vínculos, el nombre de la página. Y Aceptar

5º.- seleccionar Blank. Para finalizar, pulsar sobre F12 del teclado y guardamos los cambios.

21


Crear un Vínculo a un e-mail

1º.- Selecciona la Página en la que tienes que trabajar.

2º.- Seleccionamos el Texto o Imagen que necesitamos vincular.

3º.- En la Barra Vínculo, escribe mailto: y la dirección de correo electrónico que tenemos que

vincular

Por ejemplo; (mailto:[email protected]). Para finalizar, pulsar en F12” del teclado y aceptar los

cambios

22


Crear un Vínculo en Zona Interactiva

1º.- Para crear un vínculo, en una parte determinada de una imagen, lo primero que tenemos

hacer es insertar la imagen en la página, seguidamente seleccionar la imagen, si la imagen nos resulta con un tamaño inadecuado la podemos redimensionar, pulsando Mayúsculas + clicar con

el primario del ratón y arrastrar la figura desde la parte inferior derecha.

2º.- a) Seleccionar la parte que queremos vincular (en este caso Castellón). b) Pulsar sobre una

de las figuras geométricas de la Barra de Propiedades. c) Pulsar sobre la carpeta de la barra de

título del vínculo para localizar el archivo que tenemos que vincular y aceptar

Para redimensionar la imagen. Selecciona la imagen.

Pulsar la tecla Mayúsculas + clic izquierdo

sobre el vértice derecho y arrastra el puntero

hasta conseguir el tamaño adecuado.

a) Selecciona la imagen. b) En Propiedades Pulsar

sobre una figura geométricas (en este cado el

rectángulo),c) enmarcar dentro del rectángula

Castellón. d) pulsar sobre la carpeta del vínculo,)

localizar el archivo que tenemos que vincular y por

último pulsar sobre la tecla F12 para guardar los

cambios

23

Curso Dreamweaver MX Crear Vínculo a Página Web

1º.- a) Crear una nueva página y denominarla Links. b) Insertar una tabla donde se anotarán los

nombres de las distintas páginas que tenemos que vincular.

2º.- a) seleccionar Links, b) Abrir la Carpeta de la barra de vínculos. c) seleccionar la página

Links para finalizar pulsar sobre la tecla F12

3º.- a) Seleccionar avimcv. b) Escribe en la barra de títulos de vínculos;

http://www.avimcv.org y pulsar sobre la tecla F12 para guardar los cambios.

4º.- Para vincular una página Web; a) abre la página, b) seleccionar la dirección en la barra de direcciones, c) copiar (Ctrl.+ C), d) Pegar (Ctrl.+V) en la barra de vínculos, por último pulsar

F12 para guardar los cambios

http://www.avimcv.org/

24

Como colocar un Botón Flash

Para preparar un Botón flash. Y crear un vínculo

1º.- a) Selecciona la Pestaña Común, del Panel de objetos. b) Pulsar en el icono Media Flas. c)

Selecciona Botón Flash, y se abre la ventana de la derecha.

2º.- a) En Estilo: selecciona el tipo de botón más adecuado según el caso, en la parte superior en

Muestra: verás el Estilo seleccionado. b) En Texto del botón: escribe el nombre que quieres poner

al mismo.

3º.- En Color de fondo: Selecciona el mismo color de fondo, que tiene donde has que insertar el

botón

4º.- Una vez seleccionado el Botón, pulsar en Examinar en la barra de vínculos, y seleccionad a

donde quieres vincular el botón, seguidamente pulsar en Aplicar y Aceptar, por último pulsar

sobre la tecla F12 para guardar los cambios, como nos muestra la siguiente ventana.

25


Preparar fotografías para la web

1º-a) Abrir el programa Adobe Photoshop. b) En la barra de Menús, pulsar sobre Imagen, luego

pulsar sobre Tamaño de imagen.

En la ventana de la izquierda se observa el tamaño original, tanto en píxeles como en cm.

2º.- En Tamaño del documento, en Resolución ajustaremos a 72 píxeles. En Dimensiones en

píxeles, realizar ajustes según la necesidad, en este ejercicio ajustaremos el ancho de la fotografía a

174 píxeles, para finalizar pulsar sobre OK.

26



La fotografía se ha reducido, como se observa en el centro de la ventana.

3º.- Para guardar la imagen, pulsar en Archivo (de la barra de menús) y a

continuación selecciona Guardar para Web.

4º.- Ajustar la calidad de la imagen y pulsar en Guardar.

27



5º.- Para guardar la imagen, buscar el Proyecto, luego Imágenes de la página y

pulsar en Guardar

28


Insertar una imagen de sustitución

Imagen de sustitución, son dos imágenes superpuestas del mismo tamaño y que al

pasar el puntero del ratón sobre la primera imagen, esta desaparece dando paso a la

segunda.

1º.- a) Pulsar en Insertar de la barra de menús. b) selecciona Objetos de imagen.

c) Imagen de sustitución y se abre la siguiente ventana de Insertar imagen de

sustitución

2º.- En Imagen original, pulsar sobre Examinar y localiza la primera de las

fotografías.

3º.- En Imagen de sustitución, pulsar sobre Examinar y localiza la segunda de las

imágenes

4º.- En Texto alternativo, puedes escribir el nombre que quieras dar a la imagen.

5º.- En Al hacer clic, ir a URL: si quieres que sea un Vínculo, escribe el nombre del

mismo. Para finalizar, pulsar sobre Aceptar.

29


Insertar una imagen de sustitución

Esta es la muestra del efecto que causa, al insertar una imagen de sustitución, en

principio puse la fotografía en Gris y luego la sustituye la de color

30


Como vincular un archivo o documento

Primero preparamos el archivo tal y como queremos que se vea en la página

Web.

Seguidamente y dentro del espacio Web, accedemos a la parte donde hemos

de vincular el documento, en este caso y para facilitar el ejercicio, partiremos de

Index, donde se creará el vínculo para acceso a este ejercicio.

1º.- a)-Escribir el texto que tenemos que vincular, en este caso (¿Cómo vincular

archivos - documentos, desde propiedades a la página web?) y seleccionarlo,

(ventana de la izquierda)

b)- Pulsar sobre la Carpeta para buscar el Vínculo y nos aparecerá la ventana de

la derecha, donde buscaremos el archivo que queremos vincular, lo

seleccionamos y para finalizar pulsar sobre Aceptar.

2º.- El Dest: Selecciona _ blank

3º.- Al aceptar en la ventana Seleccionar archivo, nos aparece la siguiente

ventana donde nos indica los pasos a seguir para continuar con el proceso de

vincular el archivo, pulsar en “Sí” y nos aparece la ventana inferior izquierda

31

Curso Dreamweaver MX Como vincular un archivo o documento

4º.- a) Para guardar el archivo buscamos la carpeta de (Página Web AVIMCV) y

abrimos la subcarpeta de Proyecto Web (ventana de la izquierda y se abre la

ventana de la derecha.

b).- En Proyectos Web, buscamos la carpeta donde queremos guardar el archivo

que terminamos de vincular, en este caso sería ¡Al Vuelo! Pulsar sobre Abrir y nos

saldría la ventana inferior izquierda

c).- En la ventana de ¡Al Vuelo! guardaremos el archivo pulsando sobre: Guardar.

5º.- Una vez terminado todo el proceso, pulsar sobre F12 del teclado, y nos

aparecerá la ventana de la derecha, donde nos pregunta que si queremos

guardar los cambios efectuados en Index, pulsamos sobre “Sí” y seguidamente

podemos comprobar el resultado.

32


Como agregar en el menú desplegable ¡¡Centros de la Comunidad!!

Para agregar un Nuevo Centro al un menú desplegable, lo primero es crear una

nueva carpeta dentro del Proyecto Web.

Seguidamente crearemos la página con el nombre del centro que tenemos que

agregar.

Para Agregar un Centro en el Menú de Alicante;

1º.- a) Seleccionar el marco desplegable (AVIM-CV en Alicante) b) En

Propiedades nos muestra las opciones, pulsar sobre Valores de lista y nos

aparecerá la ventana Listar valores como se muestran en la parte inferior

2º.- a) Pulsar sobre + y escribe el nombre del Centro. B) pulsar bajo de Valor y

escribe el nombre de la carpeta, seguidamente pulsar sobre la barra inclinada y

ahora escribe el nombre de la página del Centro.

c).- para finalizar, pulsar sobre Aceptar y de esta forma ya tenemos un nuevo

cetro vinculado en el Menú

33


Configuración de la Opción del Cuadro de Diálogo VALORES DE lista

(Más información sobre el tema)

Utilice el cuadro de diálogo Valores de lista para añadir elementos a un menú de

formulario.

1. Utilice los botones más (+) y menos (-) para añadir y quitar elementos de la

lista.

2. Escriba texto para la etiqueta y un valor opcional para cada elemento de

menú.

Cada elemento de la lista tiene una etiqueta (el texto que aparece en la

lista) y un valor (el valor que se envía a la aplicación de proceso si el

elemento está seleccionado). Si no se especifica ningún valor, la etiqueta

se enviará a la aplicación procesadora.

3. Use los botones de flecha arriba y abajo para reorganizar los elementos de

la lista.

Los elementos aparecen en el menú en el mismo orden que en el cuadro

de diálogo Valores de lista. El primer elemento de la lista es el elemento que

aparece seleccionado cuando la página se carga en un navegador.

Configuración de las Propiedades de un Menú

Utilice este inspector de propiedades para configurar las propiedades de un

menú en un formulario HTML.

Para configurar las propiedades del Menú:

Configure cualquiera de las opciones siguientes en el inspector de

propiedades:

Lista/menú asigna un nombre al menú. El nombre debe ser exclusivo.

Tipo indica si al hacer clic en el menú éste se despliega (opción Menú) o si

muestra una lista de elementos por la que se puede desplazar (opción

Lista). Seleccione la opción Menú si desea que sólo haya una opción visible

cuando el formulario se visualice en un navegador. Para mostrar las otras

opciones, el usuario debe hacer clic en la flecha abajo.

Seleccione la opción Lista si desea mostrar una lista de varias o todas las

opciones cuando se muestre el formulario en un navegador o si desea

permitir a los usuarios seleccionar varios elementos.

34

Alto (sólo en el tipo Lista) establece el número de elementos que se

muestran en el menú.

Selecciones (sólo en el tipo Lista) indica si el usuario puede seleccionar

varios elementos de la lista.

Valores de lista abre un cuadro de diálogo que permite añadir elementos

al menú. Para más información, consulte Configuración de las opciones del

cuadro de diálogo Valores de lista.

Dinámico permite al servidor seleccionar de manera dinámica un elemento

del menú en cuanto éste se visualiza.

Clase permite aplicar reglas CSS al objeto.

Seleccionado inicialmente establece los elementos seleccionados en la

lista de forma predeterminada. Haga clic en el elemento o los elementos

de la lista.

Inserción de Menú de Formulario HTML

Un menú de formulario HTML permite a un visitante seleccionar uno o más

elementos de una lista. Los menús son útiles cuando se dispone de una cantidad

de espacio limitada pero se necesita mostrar muchos elementos. También son

útiles cuando se desea controlar los valores devueltos al servidor. A diferencia de

los campos de texto, en los que el usuario puede escribir todo lo que desea,

incluso datos no válidos, usted establece los valores exactos que debe devolver

un menú.

En un formulario, puede insertar dos tipos de menús: un menú que se despliega

cuando el usuario hace clic en él o un menú que muestra una lista de elementos

en la que puede desplazarse y realizar selecciones. Este tipo se denomina menú

de lista.

Para insertar un Menú:

1. Sitúe el punto de inserción en el interior del contorno del formulario.

2. Seleccione Insertar > Formulario > Lista/menú.

Aparecerá un menú en el documento.

3. En el inspector de propiedades, establezca las propiedades del menú

como desee.

Para más información, consulte Configuración de las propiedades de un

menú.

mk:@MSITStore:C:/Archivos%20de%20programa/Macromedia/Dreamweaver%20MX%202004/Help/dwusing.chm::/41_for53.htm#wp173246




35

Configuración de las Propiedades de un Menú

Utilice este inspector de propiedades para configurar las propiedades de un

menú en un formulario HTML.

Para configurar las propiedades del Menú:

Configure cualquiera de las opciones siguientes en el inspector de

propiedades:

Lista/menú asigna un nombre al menú. El nombre debe ser exclusivo.

Tipo indica si al hacer clic en el menú éste se despliega (opción Menú) o si

muestra una lista de elementos por la que se puede desplazar (opción

Lista). Seleccione la opción Menú si desea que sólo haya una opción visible

cuando el formulario se visualice en un navegador. Para mostrar las otras

opciones, el usuario debe hacer clic en la flecha abajo.

Seleccione la opción Lista si desea mostrar una lista de varias o todas las

opciones cuando se muestre el formulario en un navegador o si desea

permitir a los usuarios seleccionar varios elementos.

Alto (sólo en el tipo Lista) establece el número de elementos que se

muestran en el menú.

Selecciones (sólo en el tipo Lista) indica si el usuario puede seleccionar

varios elementos de la lista.

Valores de lista abre un cuadro de diálogo que permite añadir elementos

al menú. Para más información, consulte Configuración de las opciones del

cuadro de diálogo Valores de lista.

Dinámico permite al servidor seleccionar de manera dinámica un elemento

del menú en cuanto éste se visualiza.

Clase permite aplicar reglas CSS al objeto.

Seleccionado inicialmente establece los elementos seleccionados en la

lista de forma predeterminada. Haga clic en el elemento o los elementos

de la lista.

Objetivos de Formulario

En Dreamweaver, los tipos de entrada de los formularios se denominan objetos de

formulario. Los objetos de formulario son mecanismos que permiten a los usuarios

introducir datos. Puede añadir a un formulario los siguientes objetos de formulario:

Los campos de texto aceptan cualquier valor alfanumérico. El texto se puede

visualizar como una sola línea, como varias líneas y como un campo de



36

contraseña en el que el texto introducido se sustituye por asteriscos o viñetas para

ocultar el texto a otras personas que puedan estar mirándolo.

Nota: las contraseñas y el resto de datos que se envían a un servidor mediante

campos de contraseña no están cifrados. Los datos transferidos pueden ser

interceptados y leídos como texto alfanumérico. Por esta razón, debe facilitar

siempre el cifrado de los datos que desea que permanezcan seguros.

Los campos ocultos permiten almacenar información introducida por el usuario,

como un nombre, una dirección de correo electrónico o una preferencia de

visualización, y utilizarlos la próxima vez que el usuario visite el sitio.

Los Botones realizan acciones cuando se hace clic en ellos. Normalmente estas

acciones incluyen el envío y restablecimiento de formularios. Puede añadir una

etiqueta o un nombre personalizado a un botón, o bien usar una de las etiquetas

predefinidas, "Enviar" o "Restablecer".

Las casillas de verificación admiten múltiples respuestas en un solo grupo de

opciones. Un usuario puede seleccionar tantas acciones como sean necesarias. El

ejemplo siguiente muestra tres casillas de verificación seleccionadas para ilustrar

esto: Surfing, Mountain Biking y Rafting.

Los botones de opción representan opciones que se excluyen mutuamente.

Cuando se selecciona un botón de un grupo de botones de opción, se

desactivan todos los demás botones del grupo (un grupo está formado por dos o

más botones que comparten el mismo nombre). En el ejemplo anterior, Rafting es

la opción seleccionada en este momento. Si el usuario hace clic en Surfing, el

botón Rafting se deselecciona automáticamente.

Lista/menú muestra valores de opciones en una lista de desplazamiento que

permite a los usuarios seleccionar varias opciones. La opción Menú muestra los

valores de las opciones en un menú que permite a los usuarios seleccionar una

sola opción.

Nota: un menú emergente de un formulario HTML no es igual que un menú

emergente gráfico. Para información sobre cómo crear, editar, mostrar y ocultar

un menú emergente gráfico, véase Mostrar menú emergente.

Los menús de salto son listas de navegación o menús emergentes que permiten

insertar un menú en el que cada opción se vincula a un documento o archivo.

Los campos de archivo permiten al usuario examinar los archivos de su ordenador

y cargarlos como datos de un formulario.

Los campos de imagen permiten insertar una imagen en un formulario. Los

campos de imagen se pueden utilizar para crear botones gráficos, como Enviar o

Restablecer.

Creación de formularios HTML

mk:@MSITStore:C:/Archivos%20de%20programa/Macromedia/Dreamweaver%20MX%202004/Help/dwusing.chm::/19_jsb32.htm#wp38274

37

En esta sección se describe cómo crear formularios HTML en Dreamweaver.

También se puede utilizar Dreamweaver para crear formularios Web ASP.NET. Para

más información, consulte Creación de formularios ASP.NET.

Para crear un formulario HTML:

1. Abra una página y sitúe el punto de inserción donde desee que aparezca

el formulario.

2. Seleccione Insertar > Formulario o seleccione la categoría Formularios en la

barra Insertar y haga clic en el icono Formulario.

Dreamweaver inserta un formulario vacío. En modo Diseño, los formularios

aparecen indicados mediante un contorno de línea de puntos de color

rojo. Si no ve el contorno, compruebe que la opción Ver > Ayudas visuales >

Elementos invisibles esté seleccionada.

3. Especifique la página o el script que procesará los datos del formulario.

En la ventana del documento, haga clic en el contorno del formulario para

seleccionarlo. En el inspector de propiedades (Ventana > Propiedades),

escriba la ruta en el cuadro de texto Acción del inspector de propiedades

o haga clic en el icono de la carpeta para desplazarse hasta la página o el

script correspondiente.

4. Indique el método que deba utilizar para transmitir los datos del formulario

al servidor.

En el inspector de propiedades, seleccione una de las opciones siguientes

del menú emergente Método:

Predeterminado utiliza el valor predeterminado del navegador para enviar

los datos del formulario del servidor. Normalmente, el valor predeterminado

es el método GET.

GET añade el valor al URL que solicita la página.

POST incrusta los datos del formulario en la petición HTTP.

Para más información, consulte Configuración de las propiedades de un

formulario.

5. Inserte los objetos de formulario.

Sitúe el punto de inserción en el lugar del formulario en el que desee que

aparezca el objeto de formulario y, a continuación, seleccione el objeto en

el menú Insertar > Formulario o en la categoría Formularios de la barra

Insertar.




38

Para más información, consulte Inserción de objetos de formulario HTML o

Inserción de objetos de formulario HTML dinámicos.

Si así lo desea, configure las propiedades del objeto de formulario después

de insertarlo en la página. Para más información, seleccione el objeto de

formulario y haga clic en el icono Ayuda del inspector de propiedades.

6. Ajuste el diseño del formulario como lo desee.

Puede utilizar saltos de línea, saltos de párrafo, texto con formato

predeterminado o tablas para aplicar formato a los formularios. No puede

insertar un formulario en otro formulario (es decir, superponer etiquetas),

pero puede incluir varios formularios en una misma página.

Cuando diseñe formularios, asigne textos descriptivos a las etiquetas de los

campos para que los usuarios puedan saber a qué están contestando. Por

ejemplo, utilice la etiqueta "Escriba su nombre" para solicitar el nombre del

usuario.

Utilice tablas para estructurar los objetos del formulario y las etiquetas de los

campos. Cuando utilice tablas en los formularios, asegúrese de que todas

las etiquetas table estén situadas entre las etiquetas form.

Validación de datos de formulario HTML

Dreamweaver puede añadir código JavaScript que comprueba el contenido de

los campos de texto especificados para asegurarse de que el usuario ha

introducido el tipo correcto de datos.

Nota: esta característica sólo funciona con formularios HTML. Para los formularios

ASP.NET, puede insertar controles de validación ASP.NET en la vista Código. Para

más información, consulte la documentación de ASP.NET.

Para validar datos de formulario:

1. Cree un formulario HTML que incluya al menos un campo de texto y un

botón Enviar.

Asegúrese de que cada uno de los campos de texto que desee validar

tenga un nombre exclusivo.

2. Seleccione el botón Enviar.

3. En el panel Comportamientos (Ventana > Comportamientos), haga clic en

el botón más (+) y seleccione de la lista el comportamiento Validar

formulario.

Aparece el cuadro de diálogo Validar formulario.

mk:@MSITStore:C:/Archivos%20de%20programa/Macromedia/Dreamweaver%20MX%202004/Help/dwusing.chm::/41_form8.htm#wp537369


39

Nota: el comportamiento Validar formulario sólo está disponible si se ha

insertado un campo de texto en el documento.

4. Establezca las reglas de validación para cada campo de texto y haga clic

en Aceptar.

Por ejemplo, puede indicar que un campo de texto para la edad de una

persona sólo acepte números. Para más información, consulte Validar

formulario.

Temas relacionados.

Utilización de componestes JAVASCRIPT

Los comportamientos de Macromedia Dreamweaver MX 2004 introducen código

JavaScript en los documentos para permitir a los visitantes interactuar con una

página Web para modificarla de diversas maneras o para que se realicen

determinadas tareas. Un comportamiento es una combinación de un evento con

una acción que desencadena ese evento. En el panel Comportamientos, un

comportamiento se añade a una página especificando en primer lugar una

acción y, a continuación, el evento que desencadena esa acción.

Ejercicios preparado por:

Sebastián Gil Juan

Diciembre 2005



Curso Dreamweaver MX - avimcv.e.telefonica.netavimcv.e.telefonica.net/al vuelo/CursoDreamweaver MX...

Documents

Transcript of Curso Dreamweaver MX - avimcv.e.telefonica.netavimcv.e.telefonica.net/al vuelo/CursoDreamweaver MX...