DISEÑO DE PÁGINAS WEB CON DISEÑO DE PÁGINAS WEB CON DREAMWEAVER MX, CORELDRAW Y DREAMWEAVER MX, CORELDRAW Y

PHOTOSHOPPHOTOSHOP

CONTENIDOS

Principios Básicos de DreamWeaver MX 1.- Instalar el programa. 2.- Abrir el programa. 3.- Crear el sitio. 4.- Crear el primer documento. 5.- La primera página. 6.- Comprobar el documento con los navegadores. 7.- Salir y volver a entrar. 9.- Insertar una tabla. 10.- Modificar una tabla. 11.- Imágenes. 12.- Vínculos. 12.1.- Vínculos a otros documentos del mismo sitio. 12.2.- Vínculos a documentos externos. 12.3.- Vínculos a otras partes del mismo documento. 12.4.- Vínculos a puntos concretos de otros documentos del mismo sitio. 12.5.- Vínculos de correo electrónico. 13.- Una vista al código fuente. El lenguaje HTML. 14.- Salto de línea. 15.- Listas. 16.- Sangrar el texto. 17.- Marcos ( I ) 18.- Marcos ( II ) 18.1.- Cargar otros documentos en el marco principal. 19.- Formularios. 19.1.- Campo de texto. 19.2.- Botón de opción. 19.3.- Casilla de verificación. 19.4.- Listas y menús. 19.5.- Botones ( Borrar y Enviar )

Transparencias del Curso DreamWeaver MX

1.- Instalar el programa. El primer paso es conseguir el programa Dreamweaver en su versión MX e instalarlo en el ordenador. Hay versiones educativas cuyo precio es algo inferior al de venta al público normal. Hay versiones gratuitas de uso limitado a 30 días, en la red. Si deseas descargarte la demo, prueba en:

http://www.macromedia.com/software/dreamweaver/trial/

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.

2.- Abrir el programa. Una vez instalado, el programa lo encontraremos en la ruta Inicio > Programas > Macromedia > Macromedia Dreamweaver MX.

Cuando el programa está abierto presenta una pantalla similar a ésta:

Observa que el espacio de la pantalla se divide en varias partes de cuya importancia, usos y significados iremos tratando a lo largo de este curso.

3.- Crear el sitio. Lo primero que tenemos que hacer es crear una carpeta que será el sitio donde residan nuestras páginas y todos los archivos que vayamos añadiendo. Es recomendable que esta

carpeta "cuelgue" directamente del disco duro C. Así que pinchamos en Sitio, en la Barra de Menús de arriba, y se desplegará el siguiente menú:

Elegimos Nuevo sitio... y se abre esta otra ventana:

Hacemos doble clic en el icono de la Carpeta raíz local. Se desplegará la ventana de

búsqueda de directorios. Elegimos C y le damos al icono para crear una nueva carpeta.

Aparecerá la siguiente ventana:

Cambiamos el nombre de la Nueva carpeta y le ponemos, por ejemplo, mi_sitio_web y le damos a .

Casi con toda seguridad tengas que volver a repetir el proceso anterior pues habrás

vuelto a la ventana de Definición del sitio:

Le das al icono y, ahora sí, seleccionas la carpeta que acabas de crear, le das a

, aparecerá esta ventana:

Le das a y volverás a la ventana de Definición del Sitio pero ahora ya con la carpeta creada y seleccionada como Carpeta raíz local:

Ponemos el nombre al sitio. Por ejemplo Mi primer sitio. Lo demás lo dejamos como está y le damos a Aceptar.

Volveremos a la ventana múltiple del Sitio:

Observa el lateral inferior derecho:

Aparece abierto el sitio que acabamos de crear: que está alojado en una

carpeta denominada mi_primer_sitio que está en el disco duro C:

4.- Crear el primer documento. En la ventana múltiple ya se ha creado un primer archivo al que Dreamweaver llama

Untitled-1: Observa la pestaña inferior izquierda del espacio mayor vacío: Por otro lado, el documento (no el archivo) lo que será la página, tampoco tiene

título: . Antes de hacer nada con él, podemos proceder a guardarlo. Como va a ser nuestro primer documento, vamos a guardarlo con el nombre

especial de index. DreamWeaver le añadirá la extensión .htm de página web.

Le damos a Archivo > Guardar

Aparecerá la ventana Guardar como. Le ponemos el nombre index:

Y pinchamos en Guardar.

Observa como en el lateral inferior derecho aparece el archivo dentro de la carpeta del sitio:

Y, en la pestaña inferior del documento ya aparece el nuevo nombre (index)que le hemos

dado al archivo: .

Falta poner el título al documento. Lo vamos a hacer en el próximo apartado.

5.- La primera página. Simplemente empezamos a escribir en el espacio vacío.

Podemos empezar dando la bienvenida a nuestros visitantes. Escribimos pulsando Enter para saltar a la siguiente línea:

Para dar formato al texto, disponemos de las herramientas que se desplegan en el

denominado Inspector de Propiedades:

Si no ves este panel es porque está oculto: . Observa que el triángulo en flecha está señalando hacia la derecha. Simplemente haciendo clic en él, pasa a la posición anterior.

Para efectuar los cambios que deseemos, previamente seleccionaremos el texto al que queramos hacer referencia:

Por ejemplo a la primera línea le hemos aplicado un tamaño de Encabezado 1. No hemos modificado el tipo de fuente, ni el tamaño (de forma explícita). Le hemos puesto de color rojo y lo hemos centrado en la línea.

Ahora hacemos cambios en la segunda línea:

Ahora hemos cambiado el tipo de fuente, el tamaño, el color. Lo hemos puesto en negrita y centrado.

Para finalizar, vamos a poner un título al documento, por ejemplo, Página de saludo. Lo

escribimos directamente en la ventana Título: .Observa cómo ha cambiado la barra de título:

En primer lugar aparece el nombre del documento: Página de saludo. En segundo lugar la carpeta raíz: mi_sitio_web y finalmente, el nombre del archivo: index. El asterisco que viene a continuación nos recuerda que el documento no ha sido guardado después de los

cambios efectuados. Así que es lo que podemos hacer ahora: Archivo > Guardar.

El asterisco habrá desaparecido:

Ahora vamos a poner un color de fondo a la página. Para ello pinchamos en cualquier punto

vacío de la página con el botón derecho del ratón y elegimos Propiedades de la página... del menú contextual:

Aparecerá la siguiente ventana:

De todo lo que se puede hacer aquí, de momento nos quedamos con poner un color de fondo.

Pincha en el cuadrito de Fondo y aparecerá la paleta de colores:

Elegimos el que nos parezca y vemos su efecto en Aplicar. Cuando estemos convencidos, le damos a Aceptar.

Nuestra página tiene, ahora este aspecto:

Le damos a Archivo > Guardar (No olvides hacerlo de vez en cuando, por lo que pueda pasar...)

6.- Comprobar el documento con los navegadores. Va siendo hora de que comprobemos nuestra página con el navegador (con los navegadores).

Una primera forma de hacerlo consiste en darle a la tecla de funciones de nuestro teclado: F12. Se abrirá el navegador que tengamos configurado como predeterminado y veremos el aspecto de la página.

Aquí hacemos una simulación: F12.

Otra forma conveniente es ver nuestra página desde fuera de Dreamweaver. Para ello vamos al Explorador de Windows o al disco duro C y buscamos la carpeta mi_sitio_web y el archivo que contiene la primera página: index.htm

En C vemos la carpeta mi_sitio_web. Hacemos doble clic sobre ella:

Hacemos doble clic sobre el archivo y visualizaremos nuestra página con el navegador que

tengamos predeterminado. En este caso, como vemos por el icono, es el Explorer.

Conviene comprobar la página, también, con algún otro navegador, para asegurarnos de que no hay problemas de visualización: A veces hemos cometido un fallo que un navegador detecta y otro no...Algunas de las funciones un poco más sofisticadas, no son igualmente soportadas por todos los navegadores (hojas de estilo,

comportamientos,...). Si el otro navegador es el Netscape (el segundo más conocido), lo buscamos y abrimos. Probablemente nos pedirá que iniciemos la conexión telefónica. Le decimos que no y, cuando esté ya la primera página del navegador abierta sin mensajes, le

damos a Archivo > Abrir página...:

Nos aparecerá la ventana Abrir página. Le damos a Elegir archivo...

Y buscamos en el disco duro la carpeta mi_sitio_web

Le damos a Abrir

Haciendo doble clic sobre el icono para abrirla:

Aparecerá esta ventana. Le damos a Abrir estando seleccionado Navigator.

La página se ve así con el Netscape:

A partir de este momento conviene minimizar (no cerrar) el Netscape, para tener a mano la

comprobación de los cambios que vayamos realizando también con este navegador. La Barra de Tareas debería tener un aspecto similar a éste:

El botón de Dreamweaver, el botón del Explorer y el del Netscape.

7.- Salir y volver a entrar. Cuando queramos salir del programa, guardaremos el documento abierto y cerraremos el

archivo y el correspondiente sitio haciendo clic en el botón Cerrar (el más alto de los dos botones del borde derecho superior; el otro botón cierra el documento en el que

estamos trabajando y deja otro nuevo untitled dentro del mismo sitio):

En el caso de que nos hubiésemos olvidado de guardar los últimos cambios, el programa nos lo recordará antes de hacer efectivo el cierre:

Le damos a Sí y tendremos cerrado el programa.

Cuando queramos volver a entrar. Le damos a Inicio > Programas > Macromedia > Macromedia Dreamweaver MX .

Si tenemos un único sitio web almacenado será éste el que se abra. Si el sitio tiene un sólo archivo como es nuestro caso en el que estamos trabajando probablemente se abrirá éste. En caso de no ser así como esta vez:

hacemos doble clic sobre el archivo: y el documento quedará abierto para poder seguir trabajando en él.

9.- Insertar una tabla. 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 de 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

10.- 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. Observa que la última etiqueta está en negrita. Eso quiere decir que es la celda la que está seleccionada.

Por debajo de esta barra de estado nos encontramos con el panel del Inspector de Propiedades que harán referencia a la celda en la que, en ese momento, esté el cursor:

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.

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 seis 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

11.- Imágenes. Para 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 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, pulsamos la pestaña Archivo

de la franja lateral derecha y elegimos Nueva carpeta

Por cierto, para hacer visible o invisible la franja lateral derecha le damos al icono

Se creará una carpeta con el nombre untitled que habrá que cambiar por el que deseemos tenga nuestra carpeta de imágenes:

Por ejemplo, podemos llamarla imag:

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 obras.

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

Aparecerá la ventana Seleccionar origen de imagen:

Pinchamos en Escritorio y seleccionamos la imagen: obras

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:

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

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 3 Aula 1

Noche Tiempo libre Fiesta final

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 de Seleccionar origen de imagen. La buscamos y. una vez seleccionada,

le damos a Aceptar 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. Cuando insertamos una imagen aparece, en el cuadro de diálogo, una información sobre el tamaño y el tiempo de descarga aproximado. Otra forma de ver estos tamaños es pulsando el

icono (Ampliar/contraer) de la franja lateral derecha. La ventana se ampliará proporcionando información sobre los tamaños de los archivos:

Así vemos que la imagen obras ocupa 3 KB lo cual es un tamaño aceptable. En cambio el fondo1 ocupa mucho espacio: 24 KB. Esta imagen sería adecuado sustituirla por otra que fuese bastante más ligera.

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 los jpg para imágenes, como fotografías, que requieren más colores.

Ahora empieza a extenderse otro formato: el png.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 nuestras 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 sitúas 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.

12.- Vínculos Los 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.

12.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 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 de este curso de Dreamweaver. Seleccionamos la frase

abrimos el panel Propiedades, si no está abierto, pinchamos en :

Pinchamos en el icono de y se abrirá:

Seleccionamos el archivo correspondiente, en este caso es seis y le damos a Aceptar.

El enlace habrá quedado marcado de otro color y subrayado aunque esto se puede modificar:

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.

12.2.- Vínculos a documentos externos Es 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

12.3.- Vínculos a otras partes del mismo documento Se utilizan 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... pero siempre dentro del mismo documento.

Para ello primeramente hay que establecer 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 (apartado 12) y a los apartados 12.1, 12.2, 12.3 y 12.4. 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 > Punto de fijación con nombre

Aparecerá un cuadro de diálogo para que introduzcamos el nombre que le queremos dar:

Ponemos 1 y 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 visualizará cuando veamos la página con el navegador.

Hacemos los mismo con los apartados siguientes: Les damos el nombre 2 , 3 , 4 y 5. 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) • Ir a vínculos a puntos concretos de otros documentos del sitio (5)

Seleccionamos las frases y en la caja de texto del vínculo escribimos #1, #2, ... según vaya correspondiendo

12.4.- Vínculos a puntos concretos de otros documentos del mismo sitio Los 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.

• Ir a Declaración de Intenciones • Ir a Instalar el Programa • Ir a Abrir el Programa • Ir a Crear el Sitio • Ir a Crear el primer documento

12.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.

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:

Colocar el cursor en el punto en el que queramos que esté el enlace y darle a Insertar > Vínculo de correo electrónico:

Aparecerá el cuadro de diálogo en el que pondremos el texto que queramos que sirva como enlace y la dirección de correo electrónico:

Éste es el resultado:

Escríbeme

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.- Una vista al código fuente Podemos aprovechar este tema para echar un vistazo al código que Dreamweaver va generando automáticamente.

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.

Vamos a ver cómo ha quedado el código para ese enlace de correo electrónico: Selecciono

la palabra Escríbeme y, una vez seleccionada, pincho en el botón de la barra de herramientas: . Veremos el código fuente de nuestra página. Entre el resto del código aparecerá:

Vemos la palabra seleccionada Escríbeme (el acento se escribe con los caracteres especiales &iacute;) rodeada de dos etiquetas. La primera de enlace al correo que

comienza <a href= con el mailto dentro de las comillas y la segunda etiqueta de cierre del enlace </a>.

Para volver a la vista normal pincho en

Pues bien, si yo quiero emplear una imagen como enlace del correo, puedo hacerlo desde el

código. Primero coloco la imagen: . La selecciono y me voy a ver el código

fuente pinchando en . Veré lo siguiente:

Que me está diciendo que la imagen (img) se encuentra (src source en inglés) en la carpeta ima, se llama correo_sonrisa y tiene formato gif. Después viene su medida en píxeles en anchura y altura.

Pues bien, puedo colocar las etiquetas de enlace de correo anteriores: <a href="mailto:apuente@roble.cnice.mecd.es"> delante y </a> detrás:

Dándole a Archivo > Guardar cuando hayas acabado y volviendo a la vista normal (Vista

diseño) pinchando en

De esta manera he conseguido que la imagen anterior se convierta en un enlace al correo electrónico. Comprueba que funciona dándole a la tecla f12.

(Nota: Al ir escribiendo directamente el código, Dreamweaver MX nos va ayudando a partir de las primeras letras que vayamos introduciendo, proporcionándonos los posibles fragmentos de código que pudiéramos ir necesitando. Simplemente haciendo doble clic sobre el correcto, éste se incorpora al código)

14.- 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 > Caracteres especiales > Salto de línea

Vamos a observar el código que se genera cuando pulsamos el intro (lo pulso):

Observa que ha colocado el párrafo anterior entre la etiqueta <p> con los atributos de estilo "texto"(esto lo veremos más adelante) y alineación izquierda y la etiqueta de cierre (no imprescindible) </p>

Vamos ahora a insertar un salto de línea. (Lo inserto) Observamos el código que se ha escrito:

En el momento que hemos insertado el salto de línea se ha escrito la etiqueta <br> del inglés break, romper.

Este salto de línea es una utilidad que, siendo muy usada, parece que está un poco escondida en este editor.

15.- Listas. Cuando 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 cine • La lectura • Los paseos por el campo

Para acabar la enumeración, vuelvo a pulsar el mismo botón:

Veamos el código que se ha generado:

Se introduce la lista con la etiqueta <ul> unordered list y después cada uno de los objetos de la lista con las etiquetas <li> 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. El deporte de aventura. 2. La música rock 3. Salir de juerga con mis amigos

Veamos el código que se ha generado:

La etiqueta <ol> de ordered list. Las otras etiquetas son las mismas <li> list item que en el caso de las listas no ordenadas.

16.- 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 intro

Pulso 4 veces la tecla . Esta línea ha vuelto al margen inicial.

Veamos el código generado:

Cada vez que pulso el botón se ha generado la etiqueta <blockquote> que quedaba sin cerrar. El botón se encargaba de ir cerrando cada una de las etiquetas anteriormente abiertas.

Otra forma de hacer esto de manera más manual (y más precisa o exacta) es introduciendo

desde el código un carácter especial de avance de un espacio. Es el carácter &nbsp; no break space. Podemos poner tantos como haga falta para conseguir nuestros objetivos:

aaaa aaaa aaaa aaaa aaaa aaaa aaaa

aaaa aaaa

Este es el código que, esta vez, hemos escrito directamente:

No olvidarse de guardar los cambios dando a Archivo > Guardar )

17.- Marcos ( I ) 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 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 un sitio nuevo al que voy a llamar Ejemplo de marcos dentro de la carpeta raíz marcos que creo en el disco duro C.

Empiezo creando un nuevo archivo: Archivo > Nuevo archivo

Aparecerá el nuevo archivo al que Dreamweaver llamará untitled.htm

Hago doble clic sobre él para abrirlo:

Pulsamos para que se despliegue:

Pinchamos en la pestaña para que aparezcan los patrones de marcos:

Colocando el cursor sobre cada uno de los iconos nos muestra los diferentes conjuntos de marcos que podemos insertar.

Una vez decidido qué conjunto de marcos vamos a utilizar (en nuestro caso: ) hacemos un clic sobre el icono y el conjunto de marcos dividirá nuestra página. Si no estamos de acuerdo con la anchura de los marcos podemos modificarlo simplemente situándonos con el cursor en el borde y arrastrando.

En este momento, Dreamweaver ya ha creado 4 diferentes documentos: El primero que es el

que contiene la estructura de los tres marcos (frameset) y uno por cada marco (el

superior, el izquierdo y el principal) los frames. Podemos, ahora, escribir algo en cada una de las tres partes para identificarlas posteriormente: Por ejemplo:

• Escribimos: Frame del título. • Frame del índice. • Frame principal.

Algo así:

Procedemos a Guardar: Archivo > Guardar todo:

Este proceso es muy importante y te sugiero que lo hagas tal como se indica:

Aparecerá esta ventana:

Observa que a la carpeta raíz del sitio la hemos llamado marcos, luego vamos a guardar en esta carpeta los frames creados. Puede ocurrir que Dreamweaver intente guardarlo en

otro sitio, en ese caso tienes que buscar la carpeta marcos dentro del disco duro C.

Observa, también, que aparece, aparte de la carpeta _notes, un documento denominado

untitled (más adelante sabremos qué documento es éste).

Lo primero que se va a guardar es el conjunto de marcos o frameset. Dreamweaver le ha puesto un nombre: UntitledFrameset-7. Nosotros le podemos llamar conjunto o bien index porque es la página que se va a abrir al principio con todos los marcos cargados. Observa

el cordón que recorre todo el espacio, eso nos indica que es el conjunto de marcos lo que estamos guardando.

Una vez cambiado el nombre y guardado, aparecerá la siguiente ventana:

Observa que ahora el cordón está rodeando el frame de la izquierda, el frame de

los enlaces. Además, el nombre que le está poniendo Dreamweaver ya no es Frameset sino Frame: UntitledFrame-6 Le ponemos el nombre que nos parezca, por ejemplo, indice.

Le damos a Guardar y aparecerá la última ventana:

Ahora el cordón está rodeando al marco superior. De nuevo observamos el nombre de

Dreamweaver: UntitledFrame... Estamos guardando el marco del título. Podemos llamarlo titulo.

Le damos a Guardar y ya no aparecen más ventanas. Nos falta, sin embargo, un frame por guardar el frame principal: Éste es el documento que Dreamweaver ha guardado con el

nombre untitled que veíamos en la carpeta marcos.

Veamos los archivos que tenemos:

Observamos que aparecen los cuatro documentos:

• index.htm con la estructura de todos los marcos.

• indice.htm el marco izquierdo. • titulo.htm el marco superior. • untitled.htm que es el marco principal.

Podemos cambiar el nombre a este último marco y le llamamos principal.htm desde este

mismo lugar. Botón derecho del ratón: Renombrar

Al haberle cambiado el nombre, aparecerá la siguiente ventana de actualización de los vínculos:

Le damos a Actualizar. Nuestro proceso habrá finalizado. Lo único que nos queda es modificar el texto de cada uno de los marcos con los contenidos reales que queramos colocar.

Comprobamos, finalmente, que los tres marcos y el conjunto de marcos están dentro de la carpeta del sitio:

18.- Marcos ( II ) Vamos a intentar entender un poco la estructura de este complejo sistema.

Abrimos nuestro index.htm haciendo doble clic sobre él.

Observa las etiquetas que aparecen: : Nos indican que el frame principal (observa que está subrayado el contorno y la etiqueta en negrita) está dentro de un frameset que es la banda horizontal entera (con el frame del índice) y que este frameset está dentro de otro que divide al espacio en dos bandas.

Si al menos un no aparece al abrir el index pincha con el ratón en cualquiera de los bordes internos de separación entre marcos (a veces cuesta un poco, parece que el borde inferior es el que antes responde). Cuando ya tengas al menos un frameset pincha en

para ver el código fuente generado:

Nos fijamos en la etiqueta <frameset rows"80,*". Esto nos está diciendo que la primera estructura de marcos es una división del espacio en una fila de 80 píxeles y "lo que quede" (eso indica el asterisco). El resto de esa línea lo dejamos de momento. La

siguiente línea <frame name="topFrame" indica que la primera fila es el marco

topFrame y que en ese marco se va a cargar el documento titulo.htm: src="titulo.htm">

Si sólo hubiese esa división en dos filas, ahora vendría la etiqueta de esa segunda fila,

pero como la segunda fila se ha dividido en dos columnas, eso es otro frameset, que es la etiqueta que viene en la tercera línea:

<franeset cols="80,*: Dos columnas, la primera de 80 píxeles y la segunda de "lo que quede" (lo indica el *). Ahora viene los nombres y lo que se carga en cada una de esas

dos columnas: En la primera cuyo nombre es leftFrame <frame name="leftFrame" se carga el indice.htm src="indice.htm">

En la segunda columna cuyo nombre es mainFrame <frame name="mainFrame" se carga el documento principal.htm src="principal.htm>

Los dos frameset tienen border=0, eso significa que el borde entre ellos no se va a visualizar con una línea cuando se visite el sitio. Esto se puede modificar con el panel de propiedades del conjunto de marcos:

18.1.- Cargar otros documentos en el marco principal Cada uno de los tres documentos que forman nuestro espacio se pueden modificar desde el conjunto de marcos, o bien, abriendo cada uno de ellos de manera independiente.

El documento que va a tener los enlaces se recomienda que sea modificado dentro de la estructura de marcos para poder elegir el destino de los enlaces. Así colocamos el texto, los fondos, que nos parezca y, cuando vayamos a hacer los enlaces:

Seleccionamos el 1 y pinchamos en la carpeta del panel de propiedades:

Nos aparecerá la ventana de selección de archivos.

Elegimos uno (que tenemos que tener preparado de antemano, lógicamente) y le damos a Aceptar.

A continuación tenemos que elegir el marco de destino en Dest:

Elegimos mainFrame

Hacemos lo mismo para el enlace del 2: Lo seleccionamos le damos a la carpeta del

vínculo. Elegimos el archivo dos y en Dest seleccionamos el mainFrame.

Lo mismo para el tercer enlace.

Y guardamos: Archivo > Guardar todo

Le damos a F12 para comprobar con el navegador que las cosas funcionan.

19.- 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: Pinchamos en para que se desplegue el panel:

si no está ya desplegado, y elegimos la pestaña

Colocamos el cursor en el sitio donde queramos que se coloque el formulario y pinchamos

en el icono .

Aparecerán los límites del formulario representados por un rectángulo cuyos lados son una línea discontinua de color rojo:

Ahora, por motivos estéticos, vamos a colocar una tabla dentro del formulario con dos columnas y varias filas: Situamos el cursor dentro del rectángulo de líneas discontinuas, introducimos la tabla y la centramos:

Vamos a emplear, la columna de la izquierda para realizar la pregunta correspondiente (justificado a la derecha) y la columna de la derecha para colocar los objetos de formulario (justificado a la izquierda).

19.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:

Y, debajo, 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

19.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 .

Nuestro formulario tendrá este aspecto:

Y, debajo, aparecerá el panel 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í:

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ínea

El segundo botón, por ejemplo, debería quedar así:

Ponemos un tercer botón con la opción de que la página es Mala.Bastante 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:

19.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.

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í:

19.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 .

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

Vamos escribiendo en los elementos del menú. En Valor escribimos lo mismo (será lo que aparezca al ser enviado el formulario). Pulsando la tecla 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 navegador:

Podemos incluir una campo de texto para comentarios. Lo podemos hacer con el botón de

Campo de texto definiendo en las propiedades, o

bien, dando directamente al botón: (Área de texto):

Lo introducimos:

Podemos introducir ahora (campo de texto) la dirección de correo electrónico del

visitante. En este caso, podemos poner un Valor inicial:

19.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:

Vamos a colocar el botón de borrar 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:

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án las propiedades del formulario:

En Acción escribimos mailto:direcciondecorreo. Por ejemplo en mi caso, escribiría mailto:apuente@roble.pntic.mec.es

De 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".

Podemos intentar seleccionarlo del menú: Si no está allí tenemos que escribirlo 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:

Vemos, de nuevo, las propiedades del formulario:

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.

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.