javierquintana.ftp.catedu.esjavierquintana.ftp.catedu.es/tic/tematicos/... · web viewpor lo tanto,...

Curso básico y práctico de páginas Web con Dreamweaver 4

Contenido1 Definiendo mi sitio...............................................................................................................2

1.1 Crear una carpeta con todos los recursos....................................................................21.2 Definir el sitio................................................................................................................2

2 Creando las página índice.....................................................................................................32.1 Página con marcos........................................................................................................3

3 Formatos a las páginas.........................................................................................................43.1 Fondo...........................................................................................................................43.2 Tipos de letra, alineaciones, etc...................................................................................43.3 Comprobamos la página...............................................................................................43.4 Salto de línea................................................................................................................43.5 Listas.............................................................................................................................53.6 Sangrar el texto............................................................................................................5

4 Como volver a entrar en el sitio...........................................................................................55 Insertar una tabla.................................................................................................................6

5.1 Modificar la tabla.........................................................................................................66 Imágenes..............................................................................................................................97 Insertar vínculos.................................................................................................................11

7.1 Vínculos a otra página del mismo sitio.......................................................................117.2 Vínculos a archivos y documentos..............................................................................117.3 Vínculos a páginas fuera del sitio, es decir a páginas Web.........................................117.4 Vínculos a otras partes del mismo documento..........................................................127.5 Vínculos a puntos concretos de otros documentos del mismo sitio...........................137.6 Vínculos de correo electrónico...................................................................................13

8 Publicar y mantener la página Web....................................................................................149 Formularios........................................................................................................................15

9.1 Campo de texto..........................................................................................................169.2 Botón de opción.........................................................................................................169.3 Casillas de verificación................................................................................................189.4 Listas y menús............................................................................................................189.5 Botones (Borrar y Enviar)...........................................................................................19

1


1 Definiendo mi sitio1.1 Crear una carpeta con todos los recursosIMPORTANTE: Hay que crear una carpeta que sea EXACTAMENTE IGUAL que la tengamos en el servidor, nos evitaremos molestias innecesarias, y comodidad.Por lo tanto, es MUY IMPORTANTE que tengamos TODOS los recursos en esta carpeta, imágenes, sonidos, etc… en otros programas como el Word las imágenes se incorporan en el documento EN LAS PÁGINAS WEB ESTO NO OCURRE se crea la página y se guarda un vínculo a la imagen incrustada, pero no la imagen, por lo tanto tiene que estar en la carpeta donde lo pongamos todo.EJERCICIO: Crear una carpeta que se llame Mi_Sitio_Web, dentro de ella crearemos una carpeta que se llame imag y colocaremos las imágenes de la página Web, igualmente crear una carpeta para sonidos, etc…1.2 Definir el sitioUna vez creado la carpeta, hay que crear el sitio (cada sitio tiene asociado una carpeta local) Entramos en Dreamweaver y pinchamos en Sitio-Definir sitio y seleccionamos Nuevo

Ahora tenemos que definir el sitioDatos Locales

Ahora entraremos los datos remotos que tengamos de nuestro servidorAcceso FTP: lo normal es acceso FTP pero puede ser SFTP (ver 8 Dreamweaver)Servidor FTP: es el nombre del servidor remoto, por ejemplo cprcalam.educa.aragon.esDirectorio: el lugar donde colgar la página, lo normal es /public_html/ pero en nuestro

caso será una carpeta exclusiva de cada ordenadorConectar: el nombre de usuario, utilizaremos cprcalamPassword: ¿qué te creías? ¿Qué te iba a dar la contraseña? Ja ja jaURL: Es optativo, si ponemos la dirección de la página Web Dreamweaver podrá

hacer comprobaciones, por ejemplo si la URL es http://cprcalam.educa.aragon.es/ y tenemos un enlace a http://cprcalam.educa.aragon.es/TIC/pagina.htm Dreamweaver lo convertirá a /TIC/pagina.htm

2

http://cprcalam.educa.aragon.es/TIC/pagina.htm

http://cprcalam.educa.aragon.es/y


2 Creando las página índiceLa primera página tiene que llamarse index con la extensión que ponga el programa, o sea index.htm o index.html etc…. Con esto conseguimos que en la URL no sea necesario poner el nombre index pues automáticamente es el nombre por defecto2.1 Página con marcosLa forma más fácil de navegar es tener una página con marcos. Una página con marcos son realmente 3 páginas, si index es la página principal, y llamamos Izq y Der a los marcos, las páginas son: Index.html: Esta página contiene los marcos Izq.html: El marco de la izquierda Der.html: El marco de la derecha

Entramos en Insertar-Marcos- y lo usual es ponerlo a la izquierda

Una vez creado lo vamos a guardar con los nombres anteriores, pinchamos en la división de los marcos (de paso le ponemos nombre al título)

y le damos a grabar el conjunto de los marcos como index

Pinchamos en el marco de la izquierda, e igual Archivo-Guardar marco como izq Le ponemos de título Menú pues va a ser el menú

análogamente con el de la derecha, de título le ponemos Marco Derecha

3


3 Formatos a las páginas3.1 FondoEn un marco, con el botón derecho entramos en propiedades de páginaTambién podemos entrar en el menú en Modificar-Propiedades de página o también con las teclas ctrl+jModificamos el fondo, además de otras opciones(consejo: elegir un fondo claro)

3.2 Tipos de letra, alineaciones, etc..Igual que en Word, podemos hacer todo tipo de formatos, excepto el formato justificado, que no existePara ello entramos en Ventana-Propiedades o también ctrl+F3 y vemos el menú donde podemos modificar tanto el formato del texto: Fuente, justificación…

El mejor tipo de letra para ver en internet es el Verdana3.3 Comprobamos la páginaPulsando en F12 podemos ver cómo queda la página de momento no hay ningún enlace ni imágenes, sólo una página con dos marcos

3.4 Salto de línea.extraído del tutorial Ángel R. Puente Pérez http://roble.pntic.mec.es/apuente/dw_4_iniAl escribir 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.Al pulsar Intro estamos insertando un nuevo párrafo. Si queremos sólo un salto de línea se consigue con Insertar > Caracteres especiales > Salto de líneaEste salto de línea es una utilidad que, siendo muy usada, parece que está un poco escondida en este editor.

4

http://roble.pntic.mec.es/apuente/dw_4_ini


3.5 ListasCuando queremos realizar una enumeración de objetos, lo hacemos pulsando la tecla del panel de propiedades (una vez que nos hemos situado en el primer objeto de la lista):Estas son mis aficiones:

El cineLa lecturaLos paseos por el campo

Para acabar la enumeración, vuelvo a pulsar el mismo botón: Si, en cambio, queremos que nuestra lista sea numerada, pulsamos el botón :

3.6 Sangrar el texto.Si deseo que una determinada línea comience algo más allá del margen, no lo conseguiré dándole al espaciador. Tendré que pulsar la tecla que permitirá que el texto se sitúe sangrado desde el margen izquierdo. Puedo pulsarlo varias veces. Hacemos una prueba pulsándolo cuatro veces:

He pulsado 4 veces este botón . Y pulso intro:Ahora el margen se guarda. Pulso intro:

Para volver al margen inicial pulsaré la tecla Pulso introPulso 4 veces la tecla . Esta línea ha vuelto al margen inicial

4 Como volver a entrar en el sitioextraído del tutorial Ángel R. Puente Pérez http://roble.pntic.mec.es/apuente/dw_4_iniCuando queramos volver a entrar. Le damos a Inicio > Programas > Macromedia Dreamweaver > Dreamweaver 4 y, puede ocurrir, que se nos abra la doble ventana de nuestro sitio (en cuyo caso no tendremos más que hacer doble clic sobre el documento correspondiente o crear uno nuevo) o bien, que se nos abra un documento nuevo untitled que no es de ningún sitio concreto. En ese caso, le damos a Sitio > Abrir Sitio > Mi primer sitio

5



5 Insertar una tablaextraído del tutorial Ángel R. Puente Pérezhttp://roble.pntic.mec.es/apuente/dw_4_ini

Desde Insertar de la barra de Menús, elegimos Tabla.

Aparecerá una ventana similar a ésta:

Podemos determinar el número de Filas, el número de Columnas, el Ancho de la tabla en píxeles o porcentaje, especificar si queremos que la tabla tenga Borde e indicarle el grosor del borde en su caso.

El Relleno celda hace referencia al espacio que queremos que exista entre el texto, o lo que coloquemos en cada una de las

celdas, y su borde. El Espacio celda es el espacio que queremos que haya entre una celda y otra. Ambos se indican en píxeles y se pueden quedar vacíos en el caso de que queramos que tanto el relleno de celda como el espacio de celda sea el mínimo posible.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:

Lunes Martes Miércoles Jueves Viernes

Mañana

Tarde

5.1 Modificar la tabla.Si ponemos el cursor en cualquier punto de la tabla, en la barra de estado, encontraremos una

información similar a ésta:Son las etiquetas del lenguaje HTML que veremos más adelante. De momento, indicar que la etiqueta <body> hace referencia a todo el documento que se visualiza con el navegador. La etiqueta <table> hace referencia a la tabla entera, la etiqueta <tr> a la fila en la que está el cursor y la etiqueta <td> a la celda. Observar que la última etiqueta está en negrita. Eso quiere decir que es la celda la que está seleccionada.Si ahora abrimos el panel Propiedades. Desde Ventana de la barra de menús

nos aparecerá el panel Propiedades que hace referencia a esa celda:

Desde ese panel podríamos cambiar las propiedades de la celda en cuestión.Si, desde la Barra de Estado pulsamos la etiqueta <table>, se seleccionará toda la tabla.

6



Si ahora vemos las propiedades, éstas serán las propiedades de la tabla y, desde allí, podremos cambiar las propiedades de la tabla y su configuración.

Podemos modificar el número de Filas en Filas, el número de columnas en Cols, la anchura en An, la altura en Al, el espacio entre los bordes y el contenido en Rell.celda, el espacio entre las celdas en Esp.celda, la alineación en Alinear, el grosor del borde en Borde. De momento, ignoraremos los

cuatro iconos siguientes: . Podemos establecer un color de fondo en Col.Fondo, un color de borde en Col.borde o una imagen en Im.Vamos a realizar algún cambio en la tabla:

Hemos añadido una fila, alineado al centro, 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 <tr> de la barra de estado. Quedará seleccionada la fila entera. Desde el panel Propiedades podemos hacer los cambios oportunos:

Hemos seleccionado la primera fila. Ahora el panel Propiedades afectará a la fila seleccionada:

7


Si pulsamos, por ejemplo, el botón el texto que esté escrito en las celdas de esa fila se colocará centrado en cada una de las celdas. Pulsando, por ejemplo, el botón el texto escrito pasará a estar en negrita. El resultado será:

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 las celdas seleccionadas se agruparán en una sóla:

Podemos añadir texto o variar las propiedades de las celdas por los procedimientos descritos:

Hemos seleccionado por el método de arrastrar el cursor las celdas anteriores para cambiar el color de fondo:

El resultado es:

8


6 Imágenesextraído del tutorial Ángel R. Puente Pérez)http://roble.pntic.mec.es/apuente/dw_4_iniPara insertar una imagen es conveniente tenerla previamente guardada en la carpeta del sitio. De lo contrario Dreamweaver nos advertirá para que guardemos una copia en la carpeta correspondiente.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 imag (nombre de los archivos y carpetas sin acentos y sin letras no disponibles en el idioma inglés como la ñ) Si 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 obras03.

Pinchamos en Insertar de la barra de menús y soltamos en Imagen:

Aparecerá la ventana Seleccionar origen de la imagen

Si pinchamos en Escritorio y seleccionamos la imagen: obras03

Aparecerá el mensaje de advertencia diciéndonos que la imagen no está en la carpeta raíz del sitio:

Le decimos que Sí y se abrirá la ventana Copiar archivo como

Hacemos doble clic sobre la carpeta imag para abrirla

Le damos a Guardar. La imagen se guardará en la carpeta imag y se colocará en el documento:

9



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

Podemos poner una imagen de fondo en alguna o algunas de las celdas. Por ejemplo, seleccionamos la primera celda (colocamos el cursor en ella y pulsamos <td> en la barra de estado). En el panel de Propiedades pinchamos en de

Aparecerá la ventana

Le damos a Seleccionar y la imagen se colocará como fondo de la celda seleccionada.

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. Para ver el tamaño de la imagen, vamos a la doble ventana del sitio y allí obtenemos información sobre su tamaño:

Así vemos que la imagen obras03 ocupa 3 KB lo cual es un tamaño aceptable. En cambio el fondo1 ocupa mucho espacio: 240 KB. Esta imagen sería adecuado sustituirla por otra que fuese bastante más ligera. El tamaño indicado por Dreamweaver es una aproximación por exceso al número entero más próximo

Observa que los dos formatos de imagen que más abundan (precisamente porque no ocupan demasiado) en Internet, son los formatos gif y los jpg. Los gif se emplean para imágenes con pocos colores y también animados y los jpg y png para imágenes, como fotografías, que requieren más colores.

10

Ir creando páginas que se llamen uno, dos, tres … con imágenes de tu materia y texto correspondiente


7 Insertar vínculosextraído del tutorial Ángel R. Puente Pérez)http://roble.pntic.mec.es/apuente/dw_4_iniLos vínculos, hipervínculos, enlaces, hiperenlaces (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.

7.1 Vínculos a otra página del mismo sitioEs, 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 de Propiedades.

Por ejemplo. Vamos a hacer que la frase ir a la página anterior sea un vínculo con la página anterior.

Seleccionamos la frase

abrimos el panel Propiedades, si no está abierto, pinchamos en y se abre una ventana donde seleccionaremos el archivo correspondiente, si estás en la página dos, a la uno, etc..

Cuando probemos con el navegador comprobaremos que al pinchar en la frase nos vamos al documento anterior: Imágenes. El documento se abrirá en su comienzo. Comprobar que la frase ha cambiado de color y se ha quedado subrayada.Ahora entra en los marcos e intentar hacer el menú de la izquierda

7.2 Vínculos a archivos y documentosSi tenemos un documento Word por ejemplo ejercicio.doc en el escritorio, podemos hacer un vínculo a este documento igual como si fuera a una página del mismo sitio, pero al estar en el escritorio, Dreamweaver nos pedirá que lo pongamos en nuestra carpeta de sitio, lo pondremos en una subcarpeta que se llame Docs7.3 Vínculos a páginas fuera del sitio, es decir a páginas WebEs cuando el vínculo nos lleva a una página de internet ajena a nuestro sitio. Hay que hacer lo mismo: Seleccionar el elemento que va a ser el activador del vínculo y, ahora, escribir en la caja de texto la dirección completa del sitio.

Supongamos que queremos hacer que esta imagen

sea un vínculo a la página del CNICE. Pues bien, la seleccionamos y escribimos la URL de la página http://www.cnice.mecd.es en la caja de texto:

Como en el caso anterior, comprobaremos que funciona dándole a la tecla F12 y comprobando con el navegador

11

http://roble.pntic.mec.es/apuente/dw_4_ini/seis.htm


http://www.cnice.mecd.es/

http://www.cnice.mecd.es/


7.4 Vínculos a otras partes del mismo documentoEs cuando queremos que al pinchar en el activador se nos coloque al principio de la página, al final, al comienzo de un apartado determinado, ... siempre dentro del mismo documento. Para ello primeramente hay que hacer marcas en los puntos a los cuales queremos que vaya el vínculo.Por ejemplo: Vamos a hacer vínculos a cada una de las partes de este documento: Al comienzo, al apartado 1, al apartado 2 y al apartado 3. Para ello nos colocamos con el cursor en el punto en cual queremos establecer un denominado punto de fijación con nombre.

Lo hacemos con el comienzo: Situamos el cursor delante del título del documento (delante de Vínculos) y pinchamos en la barra de menús Insertar > Etiquetas invisibles > Punto de fijación con nombre

Aparecerá una ventana para que introduzcamos el nombre que le queremos dar. pongamos 1.

Le damos a Aceptar.

Aparecerá este icono: justo en el sitio donde habíamos colocado el cursor y que es el punto al cual se irá cuando activemos el enlace. Este icono no se visulizará cuando veamos la página con el navegador.Hacemos los mismo con los apartados siguientes: Les damos el nombre 2 , 3 , y 4. Ahora establezcamos los enlaces:Ir al comienzo (1)Ir a vínculos con otros documentos del mismo sitio (2)Ir a vínculos externos (3)Ir a vínculos con otras partes del mismo documento (4)Seleccionamos las frases y en la caja de texto del vínculo escribimos #1 , #2 , .. según vaya correspondiendo

12

http://roble.pntic.mec.es/apuente/dw_4_ini/siete.htm#4





7.5 Vínculos a puntos concretos de otros documentos del mismo sitioLos dos tipos de vínculos anteriores se pueden combinar, de tal manera que podamos ir a partes concretas de otros documentos. En este caso, una vez definido el punto de fijación con nombre en el documento correspondiente, se establece el enlace escribiendo el nombre de la página con su extensión .htm seguido de almohadilla y el nombre del punto de fijación.

7.6 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.Veamos un ejemplo. Vamos a vincular un nombre (o una expresión o frase cualquiera) con su dirección de correo electrónico. Una forma de hacerlo es utilizando la herramienta del panel de objetos. Abrimos el Panel: Ventana > Objetos

Aparecerá el Panel de Objetos:Apenas lo hemos empleado de momento, pero desde este panel se pueden realizar muchas funciones. Una de ellas es ésta: Pinchamos en el sobre y se nos abre la siguiente ventana:En el Texto: escribimos la palabra o palabras que queramos sean el enlace al correo (puede ser el nombre y apellido de la persona a cuyo correo enlazamos) y en el segundo cuadro de texto, eliminamos la dirección de correo que haya, y escribimos la que nos interese.

Cuando un visitante de nuestra página pinche sobre este vínculo se abrirá su programa de correo y podrá enviar un mensaje a la persona a cuya dirección hemos vinculado el enlace.

13


8 Publicar y mantener la página WebCada vez que modifiquemos algo y queremos que se publique lo mejor es sincronizarlo, y así no perdemos ningún archivo si esta bien definido (ver 1.2 Definir el sitio) con sólo entrar en Sitio->Abrir sitio

Nos aparecerá una ventana con todos los archivos locales, y si apretamos el botón nos aparecerá el del sitio remoto (la primera vez en el sitio remoto no saldrá nada)

Si pulsamos en Sitio -> Sincronizar nos aparecerá una ventana donde lo mejor es poner que lo sincronice todo, tal y como lo pone en la figura

14


9 Formulariosextraído del tutorial Ángel R. Puente Pérez)http://roble.pntic.mec.es/apuente/dw_4_iniVamos 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 lo hacemos desde Insertar > FormularioAparecerá en nuestra ventana documento un rectángulo cuyos lados son una línea discontinua de color rojo:

Nos situamos en el interior del rectángulo con el cursor y le damos a Insertar > Objetos de formulario

Aparecerá la siguiente relación de objetos que podemos insertar

Lo mismo lo podemos encontrar de una manera gráfica, y por tanto, más intuitiva, desde Ventana > Objetos > Formulario

Antes de continuar con la inserción de los diferentes objetos del formulario, vamos a insertar, dentro del formulario, una tabla para que los objetos se queden ordenados de manera más presentable. Así nos situamos dentro del rectángulo rojo e Insertar > Tabla

Aparecerá la ventana de configuración de nuestra tabla. Escribimos 6 filas (ya veremos cuántas necesitamos más adelante, y dos columnas, un ancho inferior al 100% de nuestro documento y, mejor, sin borde:Le damos a Aceptar y, después centramos la tabla seleccionándola y eligiendo

Alinear Centro del panel de Propiedades de la tabla.

El aspecto inicial de nuestra tabla y formulario será algo así:

15



En la columna de la izquierda, y alineado a la derecha , escribiremos el texto de lo que queramos preguntar o conocer y en la columna de la derecha, y alineado a la izquierda , insertaremos el objeto de formulario correspondiente.

9.1 Campo de texto.Supongamos que queremos hacer un formulario que recoja la opinión del visitante sobre nuestra pagina web.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:

Y aparecerá la ventana de propiedades del campo de texto:

Allí podemos elegir la anchura del campo, el número de caracteres máximo, si queremos que conste de una o varias líneas, si queremos que se oculte al ser escrito (tipo contraseña), si queremos que aparezca un texto inicialmente y, lo que es más importante, el nombre que le queremos dar: Quitamos textfield y ponemos: nombre

9.2 Botón de opción.Vamos ahora a preguntar la opinión sobre la página. En la segunda celda de la columna de la

derecha, insertamos un botón de opción Aparecerá la ventana de propiedades del botón:

En la primera casilla de la izquierda borramos radiobutton y escribimos el nombre de la opción global: opinion En la segunda casilla al lado de Valor activado, escribimos lo que corresponda con esta primera opción que puede ser: muy buena. Podemos elegir que esta opción esté activada o desactivada de entrada. Tenemos que escribir a la derecha del botón el texto que verá el visitante: Muy buena, excelente. El formulario irá quedando así:

16


Tenemos que seguir insertando los demás botones de opción correspondientes a esta misma cuestión. Por lo tanto los siguientes botones se deberán seguir llamando opinion y en cada caso habrá que escribir lo que corresponde con esa opción.Para que el segundo botón no quede muy separado del primero le damos un salto de línea ¿recuerdas? Insertar > Caracteres especiales > Salto de líneaEl segundo botón, por ejemplo, debería quedar así:

Y nuestro formulario va teniendo este aspecto:

Ponemos un tercer botón con la opción de que la página es mala: Ya sabes el mismo nombre: opinion y como valor activado: mala.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:

17


9.3 Casillas de verificación.

Vamos a insertar ahora casillas de verificación (permiten elegir varias opciones). En nuestro caso, podríamos hacerlo con las cosas que le han gustado o llamado la atención de este curso de Dreamweaver.Introducimos la pregunta en la siguiente celda de la izquierda ¿Qué es lo que más te ha gustado del curso?. En la celda de la derecha introducimos la primera casilla de verificación pulsando en el icono correspondiente . Aparecerá la ventana de propiedades de esa casilla

Le ponemos un nombre a la casilla, por ejemplo, gustado, y, como primer valor uno de los que se nos puedan ocurrir, por ejemplo, paso a paso (para Valor activado) y una frase un poco más construida para el formulario visible. Damos un salto de línea e introducimos nuevas casillas, siempre con el mismo nombre, gustado, y una frase nueva como Valor activado que debe ser una expresión corta de lo que escribamos en el formulario. Esta parte del formulario podría quedar así:

9.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 . Aparecerá la siguiente ventana:

Le damos un nombre a la Lista/menú, por ejemplo, edad y pulsamos . Aparecerá la siguiente ventana:

Vamos escribiendo en los elementos del menú, Etiqueta del elemento. En Valor escribimos lo mismo (será lo que aparezca al ser enviado el formulario). Pulsando la tecla

18


para incluir el siguiente y la tecla para quitar uno ya introducido. Con las flechas vamos cambiando el orden de las etiquetas de elemento.

Cuando lo tengamos todos le damos a Aceptar.

Las diferentes etiquetas no aparecen, sólo lo harán al lanzar la página con el navedador:

Podemos incluir una campo de texto para comentarios. El campo lo podemos definir:

Lo introducimos:

Se nos han acabado las celdas. Introducimos un par más de filas en la tabla: Modificar > Tabla > Insertar filas o columnas:

Podemos introducir ahora (campo de texto) la dirección de correo electrónico del visitante. En este caso, podemos poner un Valor inicial:

Tendrá este aspecto:

9.5 Botones (Borrar y Enviar).

Finalmente, tenemos que insertar un botón para enviar el formulario y, si lo deseamos, un botón para borrar todo lo que haya podido escribir el visitante. Empezamos por el de borrar:

19


Vamos a colocar el primer botón en la última celda de la izquierda alineado a la derecha. Colocamos el cursor en la celda, alineamos y pulsamos el icono . Por defecto, Dreamweaver coloca el botón de Enviar.

Nosotros modificamos de la siguiente forma:

A continuación, nos colocamos en la celda de la derecha, alineamos a la izquierda, pulsamos el icono Aparecerá, de nuevo la ventana anterior que modificamos, esta vez ligeramente:

La última fila del formulario tiene este aspecto:

Podemos dar por finalizado nuestro formulario. Queda por definir la acción que queremos que haga una vez relleno. Para usuarios personales, la opción más habitual es el envío por correo electrónico de los datos obtenidos. Esto se hace colocando el cursor en cualquier punto del formulario y eligiendo <form> desde la barra de estado . Aparecerá la siguiente ventana:

En Acción escribimos mailto:direcciondecorreo. Por ejemplo en mi caso, escribiría mailto:[email protected] todas formas, para que el envío del formulario pueda leerse como un mensaje de correo ordinario, hay que escribir en la etiqueta del formulario del código fuente el atributo enctype="text/plain". Esto lo vamos a escribir directamente en el código. Seleccionamos el formulario colocando el cursor y pulsando <form> de la barra de estado. Pulsamos el botón

para acceder al código:

Incluimos lo acordado:

Nuestro formulario ya tiene que funcionar. Lo lanzamos con el navegador y realizamos un rellenado de prueba para ver si lo recibimos satisfactoriamente por el correo electrónico.

20


Antes de dar por concluido el formulario podemos hacer alguna modificación en la tabla, añadiendo algún color de fondo para separar unas filas de otras. Con el cursor (arrastrando) seleccionamos la primera fila:

Y en la ventana de propiedades de la fila

Elegimos un color de fondo:

Elegimos otro color para la segunda fila y vamos alternando.

21

javierquintana.ftp.catedu.esjavierquintana.ftp.catedu.es/tic/tematicos/... · web viewpor lo tanto,...

Documents