ACTUALIZACION TECNOLOGICA CURSO DE DREAMWEAVER 01.- Instalar el programa. El primer paso es conseguir el programa Dreamweaver en su versión MX 2004 e instalarlo en el ordenador. Hay una versión de prueba para 30 días descargable desde la página de Macromedia. Al instalar el programa es aconsejable aceptar todo lo que la instalación elija por defecto para no interferir en las presentaciones y en los sitios de ubicación de los archivos y documentos. 02.- Abrir el programa. Una vez instalado, lo encontramos en la ruta (Windows XP) Inicio > Todos los programas > Macromedia > Macromedia Dreamweaver MX 2004
Nótese que es compatible la instalación del nuevo Dreamweaver MX 2004 con el anterior Dreamweaver MX. Al abrirlo por vez primera aparece este mensaje de configuración del espacio de trabajo. Elegimos Diseñador.
Aparecerá la siguiente interfaz:
Antes de continuar, es importante que te familiarices con las columnas y fragmentos de filas que se hacen visibles
o no, pinchando en los correspondientes iconos. Para ocultar la columna de la derecha se le da al icono . Para
recuperar su vista se le da a Tanto en la columna derecha, más estrecha, como en la izquierda, más ancha, hay fragmentos de filas que se muestran o se ocultan pinchando en el nombre. Por ejemplo podemos ocultar el panel de Propiedades pinchando en
. Para volverlo a recuperar, pinchamos en
03.- Crear el sitio. Lo primero que tenemos que hacer es crear una carpeta que será la carpeta en la que guardemos todas nuestras páginas, y todos los archivos que vayamos añadiendo, es la carpeta raíz del sitio. La podemos tener previamente creada o crearla a partir del Dreamweaver. Si tenemos dos particiones en el disco duro del ordenador, elegimos la parte destinada a datos. Le damos a Sitio > Administrar sitios...
Aparecerá el siguiente cuadro de diálogo:
Le damos a Nuevo... > Sitio
Aparecerá momentáneamente este cuadro de diálogo:
Para, automáticamente, saltar a éste otro: (en el caso de que no salte automáticamente, se le da al botón Editar...)
Pinchamos en la pestaña Avanzadas: Ver nota 1
Lo primero que hacemos es poner un nombre al sitio. Por ejemplo, Mi primer sitio y, acto seguido, pinchamos en la carpeta
de Carpeta raíz local. Nos vamos a un disco duro, por ejemplo D
para crear una nueva carpeta y le ponemos como nombre mi_primer_sitio (nombre sin Pinchamos en espacios vacíos, sin acentos, sin caracteres especiales, preferiblemente minúsculas). Ver nota 2
Hacemos doble clic en Abrir:
Y, después en Seleccionar:
Observa que ya tenemos definido el sitio con un nombre Mi primer sitio y en una carpeta mi_primer_sitio. Ver nota 3. Le damos a Aceptar:
Y, luego a Listo. Observa el lateral derecho de la interfaz:
Aparece abierto el sitio Mi primer sitio
que está alojado en la carpeta mi_primer_sitio
dentro del disco duro D 04.- Crear el primer documento. Para crear la primera página (el primer documento) podemos, simplemente, hacer clic en Crear nuevo > HTML en el "tablón de mandos" que aparece en el espacio central principal.
Aparecerá nuestro primer documento que, a falta de guardarlo con un nombre, Dreamweaver lo llama Untitled-1
Pero este tablón de mandos no siempre va a estar visible. El mejor método es hacerlo por medio de Archivo > Nuevo...
Aparecerá este nuevo cuadro de diálogo. Elegimos Página básica y HTML y pulsamos en el botón Crear
Y llegaremos al mismo sitio ya explicado, un Untitled-1 listo para convertirse en nuestra primera página. Procedemos, a continuación, a su guardado. Le damos a Archivo > Guardar
Dreamweaver procederá a guardar el documento en la carpeta raíz del sitio
Como va a ser el primer documento del sitio, podemos llamarlo index.htm Ver nota 4
Pulsamos el botón Guardar. Observa cómo se ha incorporado el nombre del archivo en la pestaña superior.
Y observa también cómo se ha colocado el archivo en la barra lateral derecha de la interfaz:
A continuación, procedemos a poner un título al documento:
Los títulos de los documentos se pueden (y se deben) escribir con la normas de ortografía habituales del idioma. Es un tema importante: Aparecerá en la barra superior de navegación, es el nombre con el que la página se guarda en Favoritos o en Marcadores y es, también, el nombre con el que los buscadores encuentran una determinada página. Pulsamos la tecla F12 para hacer saltar al navegador. Si no hemos guardado la página previamente, nos preguntará:
Le decimos que Sí y vemos nuestra página:
Se me ha cargado en el FireFox de Mozilla (mi navegador predeterminado) pero debemos probar siempre nuestras páginas con, al menos, otro navegador. Por ejemplo el Explorer. Cargo la página en el Explorer:
05.- A poner algo en el documento Simplemente empezamos a escribir en el espacio vacío. Le damos un "enter" para saltar de línea.
Para dar formato al texto, disponemos de las herramientas que aparecen en el Inspector de Propiedades:
Si este panel está oculto es porque está en esta posición:
Observa la cabeza de flecha apuntando hacia la derecha. Haciendo un clic, la cabeza de flecha apuntará hacia abajo y el panel se desplegará como en la situación anterior. Para efectuar los cambios que necesitemos, tendremos que seleccionar previamente el texto que queramos modificar:
He seleccionado la primera palabra. Le he aplicado un Encabezado 1, lo he centrado, no he cambiado el tipo de fuente, ni el tamaño (ya lo hace al ser encabezado de orden 1) y he elegido el color rojo. En estos momentos, Dreamweaver le ha puesto un nombre a esta selección de formatos: Estilo 1 Modifico ahora la segunda frase:
Ahora he puesto en negrita, centrado, he cambiado el tipo de fuente, he puesto como tamaño grande y he elegido ese color. Dreamweaver le ha puesto como nombre Estilo 2. Observa que, mientras hacemos algún cambio y no guardamos, aparece un asterisco en la pestaña que nos indica el documento que tenemos abierto:
Lo guardamos con Archivo > Guardar
Y el asterisco desaparece:
Conviene guardar cada cierto tiempo por lo que pueda pasar... Vamos ahora a poner un color de fondo. Pinchamos en el botón Propiedades de la página... del Inspector de propiedades y se abre el cuadro de diálogo:
Pinchamos en Color de fondo y elegimos uno:
Se habrá colocado en su sitio:
Le damos a Aceptar:
Guardamos y cargamos en el navegador con la tecla F12:
Lo cargo en otro navegador. Esta vez el Mozilla:
06.- Comprobar sin F12 Lo he dado por supuesto en los párrafos anteriores al decir "cargar la página con otro navegador". A veces puede ocurrir también que la tecla F12 no funciona. En este caso, vamos con el Explorador de Windows a la carpeta donde está guardado el documento, en mi caso, en la carpeta mi_primer_sitio dentro del disco duro D:
Hacemos doble clic en la carpeta para abrirla:
El icono que acompaña al archivo es el del FireFox (mi navegador predeterminado). Haciendo doble clic sobre el icono se abrirá el documento. Si lo queremos abrir con otro navegador, una posibilidad es pinchar con el botón derecho del ratón y elegir Abrir con...
O bien, abrir el navegador y buscar el archivo. Por ejemplo, abro el Mozilla y le doy a Abrir archivo...:
Y me muevo por los dicos y carpetas hasta encontrar el archivo que quiero abrir:
07.- Salir y volver a entrar Cuando queramos salir del editor, guardamos el trabajo realizado, Archivo > Guardar y cerramos con el botón
del extremo superior derecho : Para volver a abrir, le damos a Inicio > Todos los programas > Macromedia > Macromedia Dreamweaver MX 2004 (ver apartado 02) y se abrirá el editor con el sitio que hayamos empleado por última vez. Si sólo tenemos uno, el nuestro, pues con el nuestro:
Haciendo doble clic en el icono
se abrirá el documento para poder seguir trabajando:
En el caso de que haya más de un sitio definido por nosotros (o por otros usuarios), entonces hay que pillar primero el sitio pinchando en la flechita de la columna de la derecha:
En la imagen vemos nuestro sitio Mi primer sitio en medio de otros ocho sitios más. Simplemente lo seleccionamos y se abrirá el sitio con sus archivos.
08.- Publicar el sitio Puede parecer un poco prematuro empezar ya a pensar en publicar nuestra página. Tal como la tenemos apenas tiene un saludo de bienvenida... Carece de contenido y, por tanto, de interés. Pero este curso quiere hacer hincapié en enseñar al interesado de manera minuciosa los pasos que, por experiencia, están descuidados en otros cursos o manuales... Al alumno que está aprendiendo le cuestan, fundamentalmente, los primeros pasos y los últimos. Y, es en esos dos momentos, cuando necesita más ayuda. Así que vamos a proceder a desarrollar los pasos necesarios para conseguir publicar nuestra página.
08.1.- Conseguir un servidor que nos lo aloje Es la primera condición: conseguir un Servidor o Host que nos proporcione un espacio para alojar la página. Hay algunos que son gratuitos pero, en contra, van a llenar las visitas a tu página con publicidad no siempre suficientemente discreta. Uno de ellos es Yahoo a través de Geocities. Lo primero que hay que hacer es conseguir una cuenta de correo con Yahoo. Una vez conseguida, hay que darse de alta en Geocities con el nombre de usuario (ID) y la contraseña que te has creado en la cuenta de correo de Yahoo. Otra posibilidad son los espacios proporcionados por algunas empresas a sus empleados, por las universidades a sus profesores y estudiantes, por las consejerías de educación, por los ministerios,... Estos espacios son mejores pues no tienen publicidad aunque, en algunos casos, no son de acceso totalmente público... Para los profesores de enseñanza no universitaria que trabajen en centros públicos, una buena solución es solicitar una cuenta de correo (lleva asociado un espacio web) al CNICE (antiguo PNTIC). Se rellena este formulario y se envía por fax con la firma del director y el sello del centro educativo. Tardan entre dos y tres semanas en enviarte la cuenta. 08.2.- ¿Cual es la dirección URL? Este ordenador servidor nos tiene que proporcionar unas claves para la transferencia de los ficheros y la dirección en la cual se encontrará nuestra página inicial. En el caso de Geocities: Supongamos que el nombre de usuario o ID es angelpuente56 (su dirección de correo es
[email protected]), pues bien, la dirección URL de su página es http://es.geocities.com/angelpuente56/ y se visualizará siempre y cuando su primera página se llame index.htm o index.html En caso de llamarse pagina0.htm habrá que añadir a la dirección anterior, el nombre del archivo inicial pagina0.htm Lo recomendable es llamar a la primera página index.htm Esta es la imagen inicial de la primera página que, por defecto, crea Geocities:
Cuando se mande al servidor el index.htm del propietario, esta primera página de Geocities será sustituida por la creada por el usuario. En el caso del CNICE: También la URL está en relación con la dirección de correo electrónico. Por ejemplo, si la dirección de correo es
[email protected] la página web se encontrará en la dirección http://roble.cnice.mecd.es/~apuente/
El simbolito ~ (vírgula) se consigue teniendo pulsada la tecla ALT y pulsando sucesivamente las teclas 1, 2 y 6 del teclado numérico. Nota: Por motivos históricos y de cambios de nombre, hay otra posibilidad de funcionamiento de las dos direcciones anteriores. La de correo funciona exactamente igual cambiando cnice por pntic pero entonces mecd hay que cambiarlo por mec y lo mismo en la dirección URL de la página. Sería:
[email protected] y para la web: http://roble.pntic.mec.es/~apuente/ En este sitio tengo una publicación. Si el lector ha pinchado en el vínculo habrá comprobado que no se cargaba la página. ¿Por qué no se carga? Pues porque la primera página no se llama index.htm A propósito he querido ponerle un nombre que describiese el contenido del sitio. La primera página se llama colores.html pues bien, el sitio se hará visible añadiendo a la dirección anterior el nombre del primer archivo: http://roble.pntic.mec.es/~apuente/colores.html Por último, considerar que aunque es indiferente llamar a nuestras páginas con la extensión larga .html o con la corta .htm si en la dirección anterior suprimimos la última letra, la página no se visualiza. Luego las extensiones son dos posibles pero, después, a cada archivo hay que llamarlo con la extensión con la que se ha creado. 08.3.- Transferencia de ficheros Podemos emplear un programa específico de transferencia de ficheros por FTP (File Transfer Protocol o Protocolo de Transferencia de Archivos) como el WS_FTP o el CUTE o el FileZilla (este último es software libre y funciona muy bien). Pero no es necesario. El Dreamweaver es perfectamente capaz de realizar la transferencia sin ningún problema. 08.4.- Transferencia desde Dreamweaver Lo que hay que hacer primero es configurar los datos del remoto. Para ello hay que darle a Sitio > Administrar sitios
Se abrirá la ventana de Administar sitios con todos los sitios que tengamos definidos y con el que estemos trabajando, seleccionado.
Pinchamos en Editar...
Pero ahora nos interesan los Datos remotos:
Vamos a poner dos ejemplos concretos. El de Geocities y el del CNICE. 08.4.1.- En el caso de Geocities:
Desplegamos las posibilidades del Acceso, elegimos FTP y rellenamos los datos del Servidor FTP, Directorio del Servidor (en el caso de Geocities no hay que poner nada), el nombre de Usuario (la ID de Yahoo) y la Contraseña. Seleccionamos Guardar y lo demás lo dejamos como está:
Pinchamos en el botón Prueba para comprobar que se conecta correctamente. Aparecen estos mensajes:
Aceptamos y le damos a Listo. Volvemos a nuestro sitio y nos fijamos en la parte derecha:
Hacemos doble clic sobre los dos enchufes. Se intentará la conexión:
A veces, aparece este mensaje temporal:
Cuando se haya producido la conexión, desaparecerán los mensajes, los enchufes permanecerán enganchados y el piloto verde encendido. Y... ¡¡cuidado!! Dreamweaver se va automáticamente a la Vista remota.
Tenemos que volver a la Vista local:
Volvemos a nuestra Vista local:
Seleccionarmos el archivo que queremos transferir y pinchamos en la flecha azul (colocar archivos)
Primero nos preguntará si queremos que mande también los Archivos dependientes:
Los archivos dependientes son, fundamentalmente, las imágenes que lleva la página. Es una opción muy valiosa que permite al DW ver las imágenes que tiene el documento y enviarlas al servidor. En este caso como no tenemos, da igual lo que digamos. Aparecerá, entre otros, el mensaje de la transferencia del archivo:
Cuando acabe, para ver si se ha producio correctamente la transferencia, deberemos visitar la URL: http://es.geocities.com/angelpuente56/ 08.4.2.- En el caso del CNICE: En el caso del CNICE hay que saber que los datos tienen que ser algo parecido a esto:
La importante diferencia con el caso anterior es que, ahora, sí tenemos Directorio del Servidor. Es decir, en el espacio del remoto, los archivos tienen que colocarse dentro de una carpeta que se llama public_html. En caso contrario, si los colocamos fuera de esa carpeta, los archivos se colocarán, pero no se visualizarán en la web. En las direcciones que el PNTIC proporcionaba antes, esta carpeta estaba ya creada. En las nuevas direcciones, parece que la carpeta la tiene que crear el usuario. Para averiguar si está creada o no, escribes los datos como en el cuadro anterior. Le das al botón Prueba. Si da error es probable que se deba a que esta carpeta no está creada. 08.4.2.1.- Crear la carpeta public_html en el servidor remoto del CNICE. Escribimos los datos sin rellenar la caja de texto del Directorio del Servidor:
Pinchamos en el botón Prueba para comprobar que funcionan los datos. Tiene que salir el mensaje:
Aceptamos todo para volver a nuestro sitio. Pinchamos con el botón derecho sobre la carpeta raíz y, en el menú contextual, elegimos Nueva carpeta:
Aparecerá la carpeta untitled:
Le cambiamos el nombre a public_html
Pues bien, hacemos la conexión pinchando sobre los enchufes. El sitio se irá a la Vista remota. Volvemos a la Vista local. Pinchamos sobre la carpeta para seleccionarla. Pinchamos en la flecha azul para colocar la carpeta en el remoto:
La carpeta se irá al remoto. Para comprobarlo vamos a Vista remota:
Como ahora ya está creada en el remoto la carpeta public_html, volvemos a configurar los datos de nuestro sitio, rellenando la carpeta en la que, efectivamente, colocaremos los datos. Ahora ya no tendremos problema:
09.- Insertar una tabla Las tablas son muy importantes para el diseño de una página web. Muchos de los temas de colocación de elementos en un determinado punto del espacio, se resuelven de manera correcta, empleando tablas. La tabla se puede definir con un borde cero con lo que, podremos ocultarla, si no nos gusta presentar los contenidos encorsetados dentro de los límites de las celdas. Pero, insisto, nos habrá servido para colocar los elementos en los puntos, más o menos, deseados. Para insertar una tabla, le damos a Insertar > Tabla
Aparecerá un cuadro de diálogo como éste:
Podemos definir, de entrada, el número de filas y columnas, el ancho que ocupará en % o en píxeles, el grosor del borde, el relleno de celda o el espacio en píxeles que hay desde el borde de la celda al comienzo de los datos, sea escritura o imagen. El espacio entre celdas es lo que indica el nombre, definido en píxeles también. Los encabezados son un preformateado de las celdas elegidas para escribir con caracteres enfatizados y centrados. El resto, no lo consideramos de momento. A modo de ejemplo vamos a insertar una tabla con 3 filas y 6 columnas y que ocupe el 80 % del ancho, un borde de 2 píxeles y un relleno de celda de 5 píxeles y sin encabezado:
09.1.- Modificar la tabla
Si colocamos el cursor en una de las celdas, el Inspector de Propiedades tendrá un aspecto similar a éste:
Lo que hay por encima justo del panel del Inspector de Propiedades son las etiquetas del lenguaje HTML que veremos más adelante. De momento, indicar que la etiqueta (de body, cuerpo) hace referencia a todo el documento que se visualiza con el navegador. La etiqueta (de division, división) hace referencia a una división o un espacio acotado en el que se pueden situar determinados elementos. La etiqueta (de table, tabla) hace referencia a la tabla entera, la etiqueta (de table row, fila de la tabla) a la fila en la que está el cursor y la etiqueta (de table data, o datos de la tabla) a la celda. Observa que la última etiqueta está marcada. Eso quiere decir que es la celda la que está seleccionada y todo lo que ponga en el Inspector de Propiedades será con referencia a esa celda. Si queremos centrar la tabla, la seleccionamos pinchando con el cursor en cualquier punto interno y presionando la etiqueta . La tabla quedará marcada con un borde de color negro con unos cuadraditos (tiradores) en los puntos medios de los lados lateral derecho e inferior:
Una vez seleccionada, observa que el Inspector de Propiedades está relacionado con la tabla. Allí selecciona Alinear > Centro
La tabla quedará alineada al centro:
Lunes
Martes
Miércoles
Jueves
Mañana Tarde Vamos a observar el resto de valores del panel del Inspector de Propiedades:
Viernes
En Id de tabla podremos poner un nombre a la tabla. Posteriormente, cuando la seleccionemos, DW la llamará con su nombre en la etiqueta. Aunque no es un tema importante, vamos a hacer una prueba. Si la llamo uno, por ejemplo, observa la etiqueta que aparece por encima del panel:
Puedo cambiar el número de filas y el de columnas. Establecer un ancho y un alto diferentes (en % o en píxeles). Cambiar los rellenos de celda y los espacios entre celdas, alinear diferente, cambiar el borde. En la parte inferior, dejamos los iconos de la izquierda de momento y observamos el Color de Fondo, el Color del borde y la imagen que puedo colocar como fondo de la tabla. Vamos a hacer algún cambio en la tabla:
Hemos añadido una fila, incrementado el grosor del borde a 5 píxeles, establecido un color de fondo y otro diferente para el borde. El resultado es éste:
Lunes
Martes
Miércoles
Jueves
Viernes
Mañana Tarde
Podemos hacer cambios a una celda concreta, a una fila entera, o a la tabla entera como acabamos de ver. Para hacer cambios a una fila, colocamos el cursor en una celda de esa fila y marcamos la etiqueta de la barra de estado. Quedará seleccionada la fila entera. Desde el panel Propiedades podemos hacer los cambios oportunos:
Observa el aspecto del panel Inspector de Propiedades:
Si, por ejemplo, pulsamos en
y en
Lunes
el texto escrito en la fila se colocará centrado en cada celda y en negrita:
Martes
Miércoles
Jueves
Viernes
Mañana Tarde
Otra forma de seleccionar filas o/y celdas consiste en situar el cursor en una de las celdas y arrastar con el ratón hasta donde se desee:
Hemos seleccionado las cuatro celdas intermedias de la última fila. Si le damos, por ejemplo al icono celdas seleccionadas se agruparán en una sola:
Lunes Mañana Tarde
Martes
Miércoles
Jueves
Viernes
las
Hemos seleccionado por el método de arrastrar el cursor, las celdas siguientes para cambiar el color de fondo:
Éste es el resultado:
Lunes
Martes
Miércoles
Jueves
Viernes
Mañana
Aula 1
Aula 2
Aula 1
Aula 2
Aula 1
Tarde
Aula 1
Aula 3
Aula 1
Aula 2
Aula 1
Noche
Tiempo libre
Fiesta final
Para hacer que el ancho de cada columna permanezca fijo y uniforme, primero pienso cuánto puede ser el % . Por ejemplo, 10% para la primera columna y 15% para las otras seis (tienen que sumar el 100% de la tabla, aunque ésta sea el 80% de la pantalla). Pongo el cursor dentro de la primera celda y, en la casilla An escribo 10% (todo seguido sin espacio). Paso a la segunda celda y escribo 15% y asi hasta el final...
Resultado:
Lunes
Martes
Miércoles
Jueves
Viernes
Mañana Aula 1
Aula 2
Aula 1
Aula 2
Aula 1
Tarde
Aula 3
Aula 1
Aula 2
Aula 1
Aula 1
Noche
Tiempo libre
Fiesta final
10.- Imágenes Para insertar una imagen es conveniente tenerla previamente guardada en la carpeta del sitio. De lo contrario Dreamweaver nos advertirá para que lo hagamos. Las imágenes pueden estar sueltas en la carpeta raíz junto con los archivos de cada uno de los documentos o, mucho mejor, en una carpeta especial dentro del sitio a la que llamaremos imagenes ( nombre de los archivos y carpetas sin acentos ) o cualquier otro nombre que nos sugiera que, dentro de esa carpeta, están nuestras imágenes. Para crear una carpeta dentro de la carpeta raíz del sitio: pinchamos sobre la carpeta raíz en el panel lateral derecho con el botón derecho del ratón y, en el menú conextual, elegimos Nueva carpeta
Aparecerá una nueva carpeta. DW le habrá puesto como nombre untitled
Nosotros le cambiamos el nombre:
Podemos llevar las imágenes a la carpeta por cualquiera de los procedimientos habituales en Windows. Si por ejemplo, tal como indicábamos al principio, la imagen no está previamente guardada en la carpeta, Dreamweaver nos va a sugerir que lo hagamos. Supongamos que queremos insertar una imagen que tenemos guardada en el Escritorio. La imagen se llama enobras.gif Pinchamos en Insertar de la barra de menús y soltamos en Imagen :
Se abre la ventana del explorador para que localizemos la imagen que queremos insertar:
Le damos a Aceptar. Como la imagen está fuera de la carpeta raíz del sitio, aparece este mensaje de advertencia:
Le decimos que sí y se nos abre la carpeta raíz del sitio:
Hacemos doble clic sobre la carpeta imagenes:
Y le damos a Guardar. La imagen se habrá colocado en el documento y en la barra lateral derecha, en archivos, podremos ver la imagen dentro de la carpeta imagenes
Observa la imagen colocada en el documento. Como está seleccionada, el panel del Inspector de Propiedades estará referido a la imagen:
Una imagen puede colocarse también como fondo de una página, o de una tabla, o de una celda. Por ejemplo, en la tabla que hemos creado en el apartado anterior vamos a poner un fondo en la primera celda de la primera fila (vamos a hacerlo desde este propio documento). Insertamos la tabla y situamos el cursor en la primera celda:
Lunes
Martes
Miércoles
Jueves
Viernes
Mañana Aula 1
Aula 2
Aula 1
Aula 2
Aula 1
Tarde
Aula 3
Aula 1
Aula 2
Aula 1
Noche
Aula 1
Tiempo libre
Y, en el panel del Inspector de Propiedades, nos fijamos en
Fiesta final
Una forma de hacerlo es pinchar en y, sin soltar el ratón, arrastar hasta pillar la imagen que queremos colocar (en este caso se llama fondo01.gif) en el panel de archivos de la derecha:
La imagen se habrá colocado como fondo de esa celda:
Lunes
Martes
Miércoles
Jueves
Viernes
Mañana Aula 1
Aula 2
Aula 1
Aula 2
Aula 1
Tarde
Aula 3
Aula 1
Aula 2
Aula 1
Aula 1
Noche
Tiempo libre
Fiesta final
A propósito de las imágenes, es muy importante que controlemos el tamaño de las mismas para que no tarden mucho tiempo en su descarga cuando alguien visite nuestra página. Cuando insertamos una imagen aparece, en
el panel del Inspector de Propiedades, una información sobre el tamaño. de ver estos tamaños es pulsando el icono
Otra forma
( Ampliar/contraer) de la franja lateral derecha.
La ventana se ampliará proporcionando información sobre los tamaños de los archivos:
Así observamos que nuestro fondo, el fondo01.gif ocupa 3 KB que es un tamaño adecuado. Observa, también, los dos formatos de imagen que aparecen aquí el .gif y el .png Los dos son muy similares, se emplean para imágnes con colores planos. El tercer formato de la web, el .jpg se emplea para imágenes con muchos matices de color. El formato .ico es un formato de iconos. Lo que ves allí es un favicon o una pequeña imagen a modo de logotipo que se sitúa delante de la dirección URL de la página y en los listados de los favoritos. En cuanto a los gifs, decir que un uso muy extendido son los gif animados que son imágenes con cierto movimiento que no ocupan demasiado espacio. Por ejemplo:
La imagen ocupa 9 KB y, siempre sin hacer un uso abusivo, estos gifs animados pueden alegrar nuestra páginas. (Nota: Dreamweaver hace un cálculo del tamaño por aproximación redondeando al valor en KB más próximo por arriba -17,2 KB se convierte en 18 KB por ejemplo-. Si deseas ver el tamaño exacto lo puedes hacer desde el explorador de Windows: te situas con el botón derecho del ratón encima de la imagen y le das a Propiedades ) Este gif se ha sacado de la siguiente dirección: http://ausmall.com.au/freegraf/freegrfa.htm Aunque hay muchos otros sitios web que proporcionan gifs animados, y sin animar, de forma gratuita.
11.- Vínculos Los vínculos , hipervínculos , enlaces , hiperenlaces, links (todas estas palabras designan el mismo concepto) es uno de los elementos más importantes del lenguaje HTML con el que se construyen las páginas web. 11.1.- Vínculos a otro documento del mismo sitio Es, quizá, el vínculo más usado. Para ello se selecciona el elemento que va a servir para enlazar (puede ser una palabra, una frase, una imagen, un fragmento de imagen,...). Una vez seleccionado, pinchamos en el icono de la sección Vínculo dentro del panel del Inspector de Propiedades y elegimos el archivo vinculado. Por ejemplo. Vamos a hacer que la frase ir a la página anterior sea un vínculo con la página anterior de este manual de Dreamweaver. Seleccionamos la frase
Y vamos al Inspector de Propiedades (si no está abierto, lo abrimos pinchando en tenemos dos opciones. Por una vez vamos a ver dos formas diferentes de hacer las cosas.
)y,
La primera es pinchar en el icono del apartado y arrastar sin soltar hasta pillar el archivo al que queremos que apunte el vínculo. Si la columna derecha no está
visible, hazla visible antes pinchando en el icono
La segunda es pinchar en el icono carpeta seleccionamos el adecuado y aceptamos.
que está al lado. Se abrirá la carpeta con nuestros archivos,
La palabra o frase activadora del vínculo quedará marcada de otro color (normalmente azul y subrayada, pero esto se puede modificar como ocurre en este documento). Para comprobar el funcionamiento, guardaremos los cambios, le daremos al F12 y veremos que al pinchar sobre la frase nos vamos al otro documento. 11.2.- Vínculos a documentos externos Son los vínculos que nos llevan a otros documentos que no son de nuestro sitio. Se comienza igual: seleccionando la palabra, frase, imagen,... que será la activadora del vínculo. En este caso vamos a partir de una imagen:
Supongamos que queremos hacer que este logo de Google nos lleve a la página principal del famoso buscador. Seleccionamos primero la imagen: se colocará un borde de color negro con tiradores en los laterales derecho e inferior:
y en Vínculo del Inspector de Propiedades
escribimos la dirección URL de
destino: En los vínculos externos es norma de estilo casi obligada que los vínculos se carguen en ventana nueva del navegador. Esto favorece mucho la navegación. Para hacerlo, elegimos en Destino la opción _blank
Nuestra imagen vinculada tiene estos tres parámetros:
Un nuevo parámetro de bastante importancia es colocar un texto alternativo para la imagen. Útil tanto en imágenes activadoras de vínculos como en imágenes normales. Si el visitante opta por no cargarse las imágenes (por rapidez en la carga, por ejemplo) se encontrará con un texto alternativo. Esto se hace en (con la imagen seleccionada, claro): 11.3.- Vínculos a otros puntos del mismo documento En este mismo sitio tienes abundantes ejemplos de este tipo de vínculos. Desde un menú tipo índice, accedemos a cada uno de los apartados de ese índice. Y todos los apartados forman parte del mismo documento. Para hacer esto posible, primero hay que definir las anclas o puntos de destino de los vínculos. Dreamweaver lo llama Anclaje con nombre. Situamos el cursor en el punto en el que queramos situar el ancla y le damos a Insertar > Anclaje con nombre
Aparecerá este cuadro de diálogo:
Tenemos que ponerle un nombre siguiendo las mismas reglas que en los nombres de archivos y carpetas: no acentos, no espacios, no caracteres especiales, mejor minúsculas, mejor nombres cortos y comenzando por letra.
En el sitio donde hemos colocado el ancla aparece este icono de color amarillo (invisible en modo navegación):
Si pincho sobre el icono del ancla, en el Inspector de Propiedades observo todos los parámetros del mismo:
Una vez fijado el anclaje, para establecer el vínculo procedemos, primero, como en los casos anteriores, seleccionando la palabra o frase que activará el vínculo
Y, a continuación en el panel del Inspector de Propiedades escribimos el vínculo con el carácter almohadilla delante:
Y ya estará. 11.4.- Vínculos a puntos concretos de otros documentos del mismo sitio Los dos tipos anteriores de vínculos se pueden unir. Es decir, podemos hacer vínculos a puntos concretos de otros documentos de nuestro sitio. Para ello, lógicamente, tendremos que haber definido previamente el anclaje. Una vez hecho esto, primero se define el vínculo al documento y, posteriormente, se prolonga la dirección vinculada con la coletilla #ancla Veamos un ejemplo: supongamos que queramos ir al apartado 08.4.2.- que se encuentra en el documento 03.htm Primero vinculamos con el documento
Y, después, añadimos el nombre del ancla precedido de #
Comprobar que funciona: Ir al apartado 08.4.2.- del documento 03.htm 11.5.- Vínculos de correo electrónico Se puede establecer también vínculos de correo electrónico a partir de una imagen o un texto, de manera muy similar al resto de los hiperenlaces. Primera posibilidad: La dirección de correo es visible en el documento. Le damos a Insertar > Vínculo de correo
Y, en el siguiente cuadro de diálogo escribimos el texto y la dirección de correo coincidentes:
Resultado:
[email protected] Segunda posibilidad: El texto activador del vínculo es diferente. Se comienza igual pero se escribe:
Resultado: Escríbeme Tercera posibilidad: A partir de una imagen. Insertamos la imagen, la seleccionamos y, en el Inspector de Propiedades escribimos mailto:direcciondecorreo
Resultado:
Cuarta posibilidad: Indicar la dirección sin activar el vínculo Debido a los abusos de la recopilación de firmas por medio de robots que recorren las páginas de internet para el envío de spams indiscriminados, es lo que se hace últimamente, indicar la dirección de correo pero no vincularlo y, tampoco, mostrar la arroba, pues es el criterio de actuación de los robots. "Pillar las cadenas de texto en la que haya una arroba". Esto se puede hacer tanto a nivel superficial, del body mostrado en pantalla, como a nivel de código fuente. Por eso, la ternera posibilidad, la de la imagen vinculada, no protege contra el copiado pues, a nivel código fuente, la dirección es perfectamente pillable.
12.- Una vista al código fuente Ya al principio del Manual, hemos dicho que había que saber un poco sobre código html para aprender a manejar con soltura un editor como Dreamweaver.
Si no tienes mucha idea de a qué nos estamos refiriendo pincha aquí: código html . Si ya sabes, aunque sólo sea un poco, de lenguaje html, continúa leyendo. Una de las potencialidades de este editor es que podemos pasar al código fuente sin ningún problema pinchando en el icono
un determinado elemento, al pinchar en la vista Pero es que, además, si selecciono en la vista Diseño Código aparecerá el código, correspondiente a ese elemento, también seleccionado. Lo cual es muy de agradecer pues, a veces, es muy difícil la localización entre todo el código de un determinado fragmento. Por ejemplo, si señalo la última imagen que he puesto en este documento, la imagen de la vista Diseño y voy al código fuente, aparecerá seleccionado todo el código correspondiente a la inclusión de esta imagen.
La etiqueta está diciendo que la imagen se llama 142.png que se encuentra en la carpeta imag y que hay que salir de la carpeta en la que está el archivo de la página para pillarla (eso quieren decir los dos puntos). Es decir, que la carpeta en la que se encuentra el documento éste y la carpeta imag se encuentran en el mismo nivel. Mira la estructura:
Veamos una ruta de una imagen colocada en el index.htm Aquí no habrá los dos puntos pues la página está "por encima"
Las letras src vienen de source, fuente en inglés. Aquí nos encontramos también el texto alternativo a la imagen alt. Es el texto que se mostrará cuando el visitante visite nuestra página sin que se carguen las imágenes (una opción de navegación que permite mayor rapidez en las descargas). También, pero sólo en el Explorer, ese texto aparecerá cuando aproximemos el cursor a la imagen. Observa, por otro lado, el tema de la tilde. Yo he colocado el texto en la vista Diseño en el Inspector de Propiedades... y he colocado la tilde correspondiente:
Dreamweaver ha transformado la tilde (carácter especial) en un código legible por todos los navegadores: ó Finalmente aparece la anchura y la altura de la imagen. 13.- Salto de línea Probablemente a estas alturas del curso ya te habrás encontrado con la necesidad de separar dos líneas de texto por algo menos del espacio que se origina al pulsar el intro del teclado. Ello se consigue con Insertar > HTML > Caracteres especiales > Salto de línea
Vamos a observar el código que se genera cuando pulsamos el intro (lo pulso):
El párrafo se ha encerrado entre las etiquetas de apertura y de cierre. Veamos ahora el código que se genera cuando insertamos un salto de línea (lo inserto):
Observa que el párrafo no se ha cerrado. En vez de cerrarse se ha escrito la etiqueta
de break, romper. Como este salto de línea se emplea muchísimo y está ciertamente bastante escondido, es más fácil aprenderse el atajo del teclado: se trata de pulsar el intro pero con la tecla de la flecha de las mayúsculas pulsada. 14.- Listas de cosas Cuando queremos realizar una enumeración de objetos, lo hacemos pulsando la tecla del panel de propiedades (una vez que nos hayamos situado en el primer objeto de la lista).
Estas son mis aficiones:
El cine La lectura Los paseos por el campo
Para acabar la enumeración volvemos a pulsar el mismo botón: Veamos el código que se ha generado:
Se introduce la lista con la etiqueta unordered list y después, cada uno de los objetos de la lista con las etiquetas list item de apertura y su correspondiente de cierre. Si, en cambio, queremos que nuestra lista sea numerada, pulsamos el botón: Estas son mis aficiones por orden de preferencia: 1. 2. 3.
El deporte de aventura La música rock Salir de juerga con mis amigos
Veamos el código que se ha generado:
La etiqueta de ordered list, lista ordenada. El resto, es lo mismo que en el caso anterior. 15.- Sangrar el texto Si deseo que una determinada línea comience algo más allá del margen, no lo conseguiré dándole al espaciador. (Sangría de texto) que permitirá que el texto se sitúe sangrado desde el margen Tendré que pulsar el botón izquierdo. Puedo pulsarlo varias veces. Hacemos una prueba pulsándolo cuatro veces. Para deshacer la accíon pulsaré el botón
(Anular sangría de texto)
He pulsado 4 veces el botón Sangría de texto. Y pulso intro: Ahora el margen se guarda. Pulso intro: Para volver al margen inicial pulsaré la tecla Anular sangría. Pulso intro Pulso 4 veces la tecla
. Esta línea ha vuelto al margen inicial.
Veamos el código generado:
Aparte de la etiqueta del sangrado , comentar la etiqueta equivalente a la etiqueta bold para poner el texto en negrita. Hay otra forma de sangrar el texto o de colocar más de un espacio entre dos palabras. Es con Insertar espacio indivisible no breaking space con la secuencia Si lo hacemos desde la vista Diseño se hace con Insertar > HTML > Caracteres especiales > Espacio indivisible
Como veis hay un atajo que conviene aprenderse pues esta secuencia se utiliza mucho. Es la combinación de teclas Ctrl + Mayúsculas + Espacio Hacemos una prueba Hacemos una prueba Hacemos una prueba Hacemos una prueba Hacemos una prueba
Vista del código:
En realidad, aunque el no breaking space se ideó para que dos palabras separadas no puedan nunca verse cortadas en dos líneas diferentes, la utilidad mayor, es la que acabamos de ver. Otra utilidad es el relleno de celdas de una tabla, por ejemplo, para mostrar la celda vacía pero con sus paredes y espacio interior perfectamente definido. Por ejemplo, en esta tabla:
relleno Según la versión del navegador que emplees, la celda primera y la segunda puede que las veas diferentes. Mira el código:
En la primera celda hay un y en la segunda no hemos puesto nada. En el navegador ambos están vacías...
16.- Marcos Se denomina Marcos o Frames a una forma de organizar los diferentes documentos de nuestro sitio web. Una o más partes de la pantalla permanecen con contenidos fijos y otra parte va cambiando en función de los enlaces que pulsamos en otra de las partes de la pantalla. Veamos un aspecto de la pantalla organizada en marcos:
En este caso la pantalla se divide en tres partes:
La parte superior en la que va el título del sitio. La parte de la izquierda que contiene los enlaces de los diferentes documentos que forman nuestro sitio web. La parte más amplia donde se van a cargar los enlaces que pulsemos.
Para ver el funcionamiento de este marco pulsa aquí . Para crear una página con marcos, debemos saber que:
La estructura de la página es un documento independiente. Cada uno de los marcos es otro documento independiente. Cuando se carguen los diferentes documentos, el documento inicial situado en el espacio principal (main frame), será sustituido por el enlace que haya sido pulsado.
Empezamos: Voy a crear una estructura de marcos dentro de este sitio y en una carpeta a la que llamo marcos... podría hacerlo como un sitio absolutamente independiente. En ese caso la carpeta marcos sería la carpeta raíz. Creamos la carpeta pinchando con el botón derecho del ratón sobre la carpeta raíz:
Y le ponemos como nombre marcos
Le damos a Archivo > Nuevo...
Y elegimos Conjunto de marcos y el último modelo que es el que vamos a hacer:
Aparecerá creado en el espacio principal de la interfaz. Observa el nombre que le ha puesto DW UntitledFrameset (conjunto de marcos sin título)
Podría ser conveniente escribir algo en cada uno de los documentos que forman el conjunto de marcos. No olvides que estamos hablando de cuatro documentos, cuatro archivos, en tres espacios:
La estructura de marcos o el conjunto que es un documento especial que distribuye los espacios. El frameset o el conjunto de marcos. El documento titulo que es la banda horizontal superior. El indice que es la banda vertical izquierda. El espacio principal que es el destinado a alojar el contenido de cada documento cargado.
Ahora le damos a Archivo > Guardar todo
Y empezaremos a guardar cada uno de esos documentos. Empezamos:
Observa que el cordón está recorriendo todo el espacio y que DW le ha puesto como nombre provisional UntitledFrameset. Eso quiere decir que estamos guardando la estructura, el conjunto de todos los marcos. Pero antes, hacemos doble clic en la carpeta marcos que es donde quiero guardar todos los archivos de los marcos:
Le podemos poner como nombre conjunto.htm (si fuese lo primero que tuviese que abrirse en un sitio web, le llamaríamos index.htm)
Le damos a Guardar. DW seguirá el proceso de guardado:
Ahora el cordón abraza el espacio principal. Lo podemos guardar con el nombre principal.htm
Sigue el proceso:
Ahora estamos guardando el espacio indice. Lo podemos guardar como indice.htm Sigue el proceso: Guardamos la parte superior como titulo.htm
Una vez guardados nuestros cuatro documentos, comprobamos que en la columna derecha están los cuatro archivos dentro de la carpeta marcos:
Podemos dar formato a cada documento, bien por separado, bien dentro de la estructura del conjunto de marcos:
Ahora sólo nos resta crear los tres nuevos documentos que se cargarán en el espacio principal al pinchar en los enlaces del menú de la izquierda. A los documentos, los podemos llamar pagina1.htm pagina2.htm y pagina3.htm Establecemos los vínculos (con el conjunto de marcos abierto). Seleccionamos página 1 y vinculamos con pagina1.htm
Aceptamos y lo importante es elegir el destino correctamente:
mainFrame es el espacio principal, leftFrame el izquierdo, topFrame el superior. Los destinos que quedan ya no son propios de nuestros marcos concretos: _blank es cargar en ventana nueva, _parent es en el caso de marcos anidados, _self es el que está siempre por defecto, en el propio sitio y _top ocupando toda la pantalla. Podemos estirar o encoger el ancho de cada uno de los marcos, simplemente colocando el cursor sobre uno de los bordes. La flechita blanca se convertirá en doble flecha negra y arrastrando, podremos modificar la anchura establecida originalmente. Si los bordes entre marcos se ocultan, esto no lo podremos hacer. Bastará para ponerlos de manifiesto el darle a Ver > Ayudas visuales > Bordes de marco
Observa los bordes activados:
Nos queda poner un título al conjunto de todos los marcos (y, si quieres, a cada marco). Para hacerlo al conjunto, pincha primero en cualquiera de los bordes de los marcos para que aparezca la etiqueta por encima del panel de propiedades
En ese momento, ya podemos colocar el título:
Comprobación de que funcionan los marcos. 16.1.- Entender los marcos Abrimos nuestro conjunto de marcos haciendo doble clic sobre el nombre del archivo y pinchamos en cualquiera de los bordes para que aparezca una o dos veces la etiqueta frameset encima del Inspector de Propiedades. Si pinchamos en el borde horizontal aparecera un frameset.
Si lo hacemos en el borde vertical, aparecerán las dos etiquetas de los frameset.
Esto tiene que ver con que el primer frameset ha consistido en la división del esapcio en dos filas (la estrecha del título y la otra). El segundo frameset ha consistido en la división de esa segunda fila en dos columnas. Son dos framesets, por tanto, anidados. Ahora pinchamos en
para acceder al código. Veremos algo así:
Lo primero que tenemos que observar es que es una página un tanto especial. Es un documento web que no tiene body. La etiqueta de body ha sido sustituida por la etiqueta frameset. El resto de código es bastante similar. Vamos a intentar entenderlo, al menos en parte. Empezamos en Quiere decir que la primera división del espacio ha consistido en dos rows filas, la primera de 101 píxeles y la segunda "de lo que quede" eso quiere decir el asterisco. Dejamos el resto de los atributos de esa fila. Ahora, las dos filas creadas, han dado origen a 1.
frame en el que se ha cargado src de source fuente Un el documento titulo.htm y al que DW le ha llamado topFrame (frame de arriba).
2.
En la segunda fila, en vez de un frame, hemos creado otro dividido el espacio en dos columnas, la primera de 81 píxeles y la segunda "de lo que quede"
que ha
Falta por decir qué se carga en cada uno de los espacios, columnas, de este segundo frameset: 1.
En el primero un indice.htm y que DW lo llama leftFrame o frame de la izquierda.
2.
En el segundo, DW lo llama mainFrame o marco principal.
en el que se carga el documento se carga el documento principal y
Estos nombres, topFrame, leftFrame, mainFrame son los que aparecen en el Destino de los vínculos:
Lógicamente yo puedo cambiarlos en este código fuente y, entonces, aparecerán con los nombres cambiados en el menú de destino de los vínculos. El resto de código:
frameborder="NO" es el borde del marco. En este caso se define que no haya pero se puede modificar
en el Inspector de Propiedades framespacing="0" es el espacio entre los frames. En este caso, definido a cero. scrolling="NO" quiere decir que no va a aparecer la barra de desplazamiento, el scrolling. noresize quiere decir que no vamos a dejar que el visitante pueda modificar la anchura de los marcos. La etiqueta y lo que viene después, está preparado para poner un contenido para los navegadores que no soporten marcos. Ahora eso ya casi inexistente.
17.- Formularios Vamos con una de las herramientas más útiles en toda página web. Es aquella que recoge información del visitante y, o bien se almacena en el servidor, o bien, se nos envía a través de una dirección de correo electrónico. Son los formularios. Para insertar un formulario le damos a Insertar > Formulario> Formulario
Aparecerá un espacio acotado por líneas discontinuas rojas
Ahora, antes de proseguir, vamos a insertar dentro del formulario, una tabla al 80% de ancho que tendrá dos columnas al 50% cada una de ellas. Pondremos varias filas y, el motivo, es colocar los elementos del formulario con un cierto orden.
En el Inspector de Propiedades, con la tabla seleccionada, le ponemos que la Alinee al Centro:
17.1.- Campo de texto Vamos a hacer, como ejemplo, un formulario que recoja la opinión sobre esta página web. Empezamos con el primer Objeto de formulario: Campo de texto . Situamos el cursor en la primera celda, alineamos a la derecha y escribimos, por ejemplo, Nombre : En la primera celda de la derecha insertamos un campo de texto
Nuestro formulario tendrá este aspecto:
Seleccionamos el cuadro de texto (simplemente pinchando) y observamos el Inspector de Propiedades:
Aquí podemos establecer un Ancho de caracteres diferente, los caracteres máximos si queremos fijarlos, elegir una o varias líneas, el valor inicial que puede estar escrito dentro... Lo más importante es cambiar el textfield por lo que queramos que aparezca cuando recibamos el formulario. Ponemos, por ejemplo, Nombre
17.2.- Botón de opción Vamos ahora a preguntar sobre la opinión de nuestra página. En la segunda celda de la columna derecha insertamos un
Ecribimos una frase adecuada en la celda de la izquierda:
Activamos el botón y nos vamos al Inspector de Propiedades:
Pues bien, cambiamos el nombre radiobutton por el genérico que queramos darle (ten cuidado de llamarlo siempre exactamente igual para cada una de las opciones) y en Valor activado el correspondiente al sentido de lo que escribamos, por ejemplo:
Damos un intro (con la flecha de mayúsculas para que sea sólo un saldo de línea) y ponemos otro botón de opción:
Y, en el Inspector de Propiedades (activa el segundo botón) escribiremos:
Acabamos ya con la tercera opción:
Y, en el Inspector de Propiedades escribiremos:
Si queremos colocar otra pregunta de opción deberemos llamarla de otra manera para que no se excluyan las selecciones. Por ejemplo podemos preguntarle al visitante sobre sus conocimientos de informática. El nombre de la opción podría ser Conoc. Infor. (por ejemplo) El formulario va teniendo este aspecto:
Esto son las propiedades del botón de la última opción.
17.3.- Casilla de verificación En este caso, se pueden elegir más de una opción. No son excluyentes entre sí.
Podemos preguntar sobre lo que más le ha gustado de este Manual. Introducimos la pregunta y empezamos a escribir posibilidades. Ponemos un nombre único para todo el grupo, pr ejemplo, Gustado, y un resumen de cada ítem en el Valor activado. Este es el aspecto de esta parte del formulario
Y estas son las propiedades del último ítem:
17.4.- Listas y menús A continuación, podemos incluir un menú o lista desplegable. La diferencia entre menú y lista es que la lista permite varias elecciones y el menú una única. Podemos hacerlo, por ejemplo, preguntando por la edad del visitante. Escribimos la pregunta en la siguiente celda Indica tu edad e incluimos el menú en la celda de la derecha pulsando en
Pondremos un nombre al Menú Edad, y seleccionaremos Menú
Al pinchar en Valores de lista... se abre este cuadro de diálogo que vamos rellenando. La Etiqueta es lo que se muestra en el formulario y el Valor es la información que se guarda o que se envía. Se pulsa el signo añadir un ítem y las flechas para subir un valor o bajarlo
+
Después de Aceptar, podemos seleccionar algún valor que se muestre como seleccionado inicialmente, eligiéndolo en el Inspector de Propiedades:
Si no elegimos ningún valor inicial, el aspecto de esta parte del formulario es éste:
para
Podemos incluir un campo de texto para comentarios. Lo hacemos con el Campo de texto y, en propiedades, seleccionamos Varias líneas
17.5.- Botones Enviar y Borrar Vamos a colocar el botón para enviar y, si lo deseamos, un botón para borrar todo. Empezamos por el de borrar. Nos situamos en la siguiente celda de la izquierda, alineamos y colocamos el botón. Por defecto, DW coloca el botón para Enviar el formulario:
Nosotros modificamos los valores en el Inspector de Propiedades:
Colocamos en la celda de la derecha el botón para enviar:
Podemos dar por finalizado el formulario. Eliminamos la fila que nos ha sobrado. 17.6.- Envío del formulario Sólo nos queda establecer los parámetros para que el formulario se pueda enviar por correo electrónico. La opción más sencilla y funcional. Ahora bien, este formulario requerirá que el equipo desde el que se envía tenga operativa una cuenta de correo de tipo residente. Si no, no se podrá enviar. para que el Ponemos el cursor en cualquier punto dentro del formulario y pinchamos en Inspector de Propiedades nos refiera las características del formulario que quedan pendientes:
Rellenamos en Acción mailto:direcciondecorreo y en Enctype text/plain
Echamos un vistazo al código fuente para ver que ha cogido lo que acabo de escribir:
Nuestro formulario ya tiene que funcionar. Lo guardamos primero. Lo lanzamos con el navegador, y realizamos un rellenado de prueba para ver si lo recibimos satisfactoriamente por el correo electrónico. Aparecerán estos sucesivos mensajes de advertencia:
Aceptamos y sale este otro:
Le damos a Enviar y, finalmente, se envía:
Y se recibe en el buzón de correo con este aspecto:
17.7.- Mejorar el aspecto físico del formulario
Todavía podemos poner cada una de las filas de un color, para mejorar la presentación: Situamos en la primera celda. Pinchamos en para seleccionar la fila y elegimos un color de fondo:
Elegimos otro color para la segunda fila y vamos alternando.
