Curso Dreamweaver MX
Ejercicios prácticos preparados por:
Sebastián Gil Juan Diciembre 2005
Curso Dreamweaver MX
Ejercicios prácticos preparados por: Sebastián Gil Juan
Diciembre 2005
2
Curso Dreamweaver MX
Í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
Curso Dreamweaver MX
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
Curso Dreamweaver MX
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
Curso Dreamweaver MX
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
Curso Dreamweaver MX
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
Curso Dreamweaver MX
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
Curso Dreamweaver MX
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
Curso Dreamweaver MX
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
Curso Dreamweaver MX
Definición del sitio para avimcv
Datos Locales
11
Curso Dreamweaver MX
Definición del sitio para avimcv
Datos remotos
12
Curso Dreamweaver MX
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
Curso Dreamweaver MX
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
Curso Dreamweaver MX
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
Curso Dreamweaver MX
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
Curso Dreamweaver MX
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
Curso Dreamweaver MX
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
Curso Dreamweaver MX
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
Curso Dreamweaver MX
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
Curso Dreamweaver MX
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
Curso Dreamweaver MX
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
Curso Dreamweaver MX
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
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
Curso Dreamweaver MX
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
Curso Dreamweaver MX
Preparar fotografías para la web
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
Curso Dreamweaver MX
Preparar fotografías para la web
5º.- Para guardar la imagen, buscar el Proyecto, luego Imágenes de la página y
pulsar en Guardar
28
Curso Dreamweaver MX
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
Curso Dreamweaver MX
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
Curso Dreamweaver MX
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
Curso Dreamweaver MX
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
Curso Dreamweaver MX
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ú.
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
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.
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