Modulo B

Captulo 4.
Documentos

Dreamweaver CS4. Captulo 4. Documentos
Captulo 4. DOCUMENTOS

La unidad bsica de cualquier sitio Web es la pgina Web, y a la primera pgina de cualquier sitio web,
solemos llamarla index. En el captulo anterior hemos creado varias pginas Web en blanco, ahora
vamos a conocer cmo crear, abrir, guardar estos documentos. Tambin aprenderemos a configurar
las propiedades ms importantes y a insertar texto.

4.1. Estructura de una pgina Web

Antes de comenzar a crear nuestros primeros documentos vamos a conocer la estructura de una
pgina Web y a identificar cada una de sus partes. Como ya sabemos, los documentos HTML son
documentos de texto con unas palabras claves, denominadas etiquetas, que sirven al navegador para
interpretar sus instrucciones y poder representar en la pantalla los elementos que contenga el
documento.

Las etiquetas HTML se escriben entre ngulos, <nombre de la etiqueta> y generalmente se utilizan
una etiqueta de inicio y otra de final para indicar que ha terminado la instruccin correspondiente. La
diferencia entre ambas etiquetas es que la de cierre lleva una barra inclinada / antes del nombre de
la etiqueta. Tambin existen etiquetas slo de inicio.

Por ejemplo, para poner Dreamweaver CS4 en negrita, deberamos escribir en la vista Cdigo del
programa, en el cuerpo del documento, <b>Dreamweaver CS4</b> y el resultado sera Dreamweaver
CS4 en la vista Diseo.

Figura 4.1. Etiqueta html negrita vista cdigo.

Figura 4.2. Resultado texto negrita vista
diseo.

La estructura de una pgina Web, consta bsicamente de las siguientes etiquetas:

<html> (Etiqueta de inicio de un documento HTML)

<head> (Etiqueta de inicio de la cabecera)
...
<title> (Etiqueta de inicio del ttulo del documento)
...
</title> (Etiqueta de fin del ttulo del documento)

</head> (Etiqueta de fin de la cabecera)

<body> (Etiqueta de inicio del cuerpo del documento)
...

</body> (Etiqueta de fin del cuerpo del documento)

</html> (Etiqueta de fin de un documento HTML)

Toda la informacin de la pgina Web se encuentra entre las etiquetas <html> y </html> y sirve para
identificar el documento como HTML (Hyper Text Mark-up Language)

Entre las etiquetas de la cabecera <head> y </head> se aade la informacin del autor, palabras
claves, etc. En esta parte de la cabecera entre las etiquetas <title> y </title> se encuentra el ttulo del
documento y es la nica informacin de toda la existente en la cabecera que se presenta en la barra de
ttulo del navegador.

El contenido de la pgina se coloca en el cuerpo del documento, entre las etiquetas <body> y </body>
y esta parte ser visible en la ventana del navegador. El contenido que insertamos en el documento
(texto, tablas, imgenes, etc.) tambin lleva asociadas etiquetas con las instrucciones correspondientes
a los efectos que deseamos conseguir.

RECOMENDACIN. Como existen multitud de etiquetas, es conveniente que pases de vez en
cuando a la vista Dividir para que te muestre simultneamente las vistas cdigo y diseo del
documento que ests elaborando y puedas identificar cada una de sus partes as como las
etiquetas asociadas a cada instruccin.

4.2. Operaciones bsicas con documentos

Crear, guardar, abrir y cerrar documentos

Desde el comando Nuevo del men Archivo podemos crear nuevos documentos en Dreamweaver.
Este comando nos abre el cuadro de dilogo Nuevo documento que nos va a permitir el acceso a
distintos tipos de pgina y diseos en cada una de sus Categoras, adems de poder crear diseos y
plantillas por nosotros mismos.

Si hacemos clic en cualquier Categora, podemos, en el cuadro de dilogo, ver los distintos tipos de
pgina, su diseo y su vista previa, si la posee, as como una descripcin del tipo de documento.

Desde este mismo men Archivo, podremos tambin Guardar, Abrir y Cerrar un documento creado en
Dreamweaver.


Figura 4.3. Cuadro de dilogo Nuevo documento.


Ejercicio

El objetivo de este ejercicio ser crear y guardar un nuevo documento en blanco, as como cerrar y
abrir documentos existentes.
Para crear un documento nuevo, seguiremos los siguientes pasos:

o Despliega el men Archivo y selecciona Nuevo.

Figura 4.4. Archivo>Nuevo.

o Se abre el cuadro de dilogo Nuevo documento; seleccionamos la categora Pgina en blanco,
HTML en Tipo de Pgina, y dejamos <ninguno> en Diseo, tal y como viene por defecto. A
continuacin hacemos clic en Crear. Dreamweaver crear en la vista diseo un nuevo
documento en blanco, listo para insertar contenido. Si quieres ver la estructura de la pgina
puedes pulsar en el icono Dividir para observar cada una de sus partes. Cuando
termines, vuelve a la Vista Diseo.

Figura 4.5. Crear un nuevo documento HTML.

Figura 4.6. Vista Dividir de un nuevo documento en blanco.

o Una vez creado el documento nuevo, es necesario guardar esta pgina web para no perder
nuestro trabajo. Al guardar el documento, deberemos nombrar el archivo que lo contiene,
recordando, que como norma general, en el nombre de dicho fichero no deberemos utilizar
espacios en blanco, ni caracteres especiales como tildes, , maysculas, etc.; tampoco debers
usar signos de puntuacin como puntos, comas o barras inclinadas, aunque s podemos utilizar
guiones bajos si el nombre del fichero tuviese dos palabras, por ejemplo.
Estas normas bsicas tambin son vlidas para las carpetas que vayamos a alojar en el sitio

remoto, pues muchos servidores cambian estos caracteres durante la carga de la pgina y esto
provoca que se rompan los vnculos existentes entre los archivos.

Para guardar el documento nuevo que acabamos de crear en nuestro sitio local seguiremos los
siguientes pasos:
o Desplegamos el men Archivo y seleccionamos Guardar.

Figura 4.7. Guardar documento desde el men Archivo.

o Se abre el cuadro de dilogo Guardar como. Por defecto, Dreamweaver muestra el sitio local
en el que estamos trabajando para guardar el documento. En el campo Nombre, aparecer
Untitled-1.htm, nombre por defecto que Dreamweaver da a los ficheros sin ttulo; vamos a
eliminarlo y en su lugar, teclearemos enlaces. En el campo Tipo, deberemos comprobar que
est seleccionado Todos los documentos (*.htm;*.html;*.shtm;*.shtml;*.hta;*). Por ltimo,
hacemos clic en Guardar.


Figura 4.8. Guardar un documento .htm.

Lgicamente, si en la estructura de nuestro sitio local hemos creado distintas carpetas, desde este
cuadro de dilogo Guardar como, deberemos localizar y abrir la carpeta correcta para guardar
nuestro documento en el lugar adecuado.
Es interesante saber que la mayora de los documentos web contienen cdigo HTML (HyperText
Markup Language), por lo que son vlidas las extensiones .htm o .html.

Cuando guardamos un documento, almacenamos los ltimos cambios realizados, pero permanece
abierto para seguir trabajando con l. Si deseamos cerrarlo, entonces podemos hacerlo de varias
formas:
o desde el men Archivo, seleccionando Cerrar, o con la combinacin de teclas Ctrl+W.


Figura 4.9. Cerrar un documento desde el men Archivo.

o Desde la ventana del documento, haciendo clic en el icono de la pestaa del propio
documento abierto, o simplemente haciendo clic en el botn Cerrar , que adems
cerrar Dreamweaver.

Cierra el documento enlaces.htm de cualquiera de estas formas. Si no habas guardado los cambios
como te proponamos anteriormente en este ejercicio, entonces al intentar cerrarlo, te aparecer
un cuadro de dilogo preguntando si quieres guardar los cambios en el documento que estamos
intentando cerrar.

Figura 4.10. Cuadro de dilogo Guardar cambios.

Si contestamos afirmativamente, entonces se guardarn todas las modificaciones realizadas; si

contestamos que no, guardar el documento con las modificaciones que habamos guardado antes.
Si el documento no ha sido guardado ninguna vez y pulsamos No, entonces perderemos todos los
cambios que hayamos efectuado en el mismo.
Si tenemos ms de un documento abierto en una sesin, Dreamweaver tambin nos permite cerrar
de una sola vez todos los documentos abiertos, pulsando en Cerrar todos, desde el men Archivo.

Figura 4.11. Cerrar todos desde el men Archivo.

Si deseamos abrir documentos en Dreamweaver, ya sean existentes o no creados en
Dreamweaver, que luego podamos editar en las vistas Diseo y Cdigo, podemos hacerlo de varias
formas:

o Para abrir un documento existente podemos desplegar el men Archivo y seleccionar Abrir.


Figura 4.12. Abrir un documento desde el men Archivo.

o Se abre el cuadro de dilogo Abrir, que por defecto abre el sitio local en el que hemos estado
trabajando, en nuestro caso MiWeb. Localizamos el archivo rutas.htm, lo seleccionamos y
hacemos clic en Abrir.

Figura 4.13. Cuadro de dilogo Abrir.

o Desde el panel Archivos, localiza el archivo monumentos.htm en la Vista local del sitio MiWeb
y haciendo clic con el botn derecho del ratn, selecciona Abrir, en el men contextual que
aparece. Tambin lo puedes abrir haciendo doble clic en el icono del archivo.


Figura 4.14. Abrir un documento desde el panel Archivos.

o Si has estado trabajando recientemente con uno o varios archivos, tambin tienes la
posibilidad de abrirlos desplegando el men Archivo y seleccionando Abrir reciente, que
desplegar una lista de los documentos ms recientes con los que hayas estado trabajando.

Figura 4.15. Abrir archivos recientes desde el men Archivo.

o Al abrir Dreamweaver, desde la pgina de inicio, puedes tambin seleccionar un documento
con el que hayas estado trabajando recientemente, en la seccin Abrir un elemento reciente,
por ejemplo MiWeb/enlaces.html.


Figura 4.16. Abrir un elemento reciente desde la pgina de inicio.


4.3. Propiedades del documento

Cuando estamos definiendo nuestro sitio, es conveniente mantener una identidad, es decir que las pginas
que lo forman tengan un mismo formato, procurando que el fondo, las fuentes, etc. guarden una
uniformidad.

La configuracin del formato de las pginas se establece en las Propiedades de la pgina. Para abrir el
cuadro de dilogo Propiedades de la pgina lo podemos hacer de tres modos diferentes.

Ejecutando la opcin Propiedades de la pgina desde el men Modificar.

Figura 4.17. Propiedades de la pgina desde el men Modificar.

Haciendo clic con el botn derecho del ratn sobre el fondo de la pgina y seleccionando la opcin
Propiedades de la pgina desde el men contextual que nos aparece.


Figura 4.18. Men contextual Propiedades de la pgina.
Pulsando las teclas Ctrl+J.

Con cualquiera de las tres formas descritas anteriormente, se nos abrir el cuadro de dilogo de las
Propiedades de la pgina, organizadas en Categoras.

En la categora Apariencia (CSS), podemos especificar varias opciones bsicas de diseo de pgina:

Figura 4.19. Categora Apariencia de las Propiedades de la pgina.

Fuente de pgina: nos permite seleccionar una combinacin o familia de fuentes. Las combinaciones de
fuentes determinan cmo se muestra el texto de la pgina Web en un navegador. El navegador utiliza la
primera de las fuentes de la combinacin, si no est instalada, utilizar la siguiente fuente de la
combinacin y si no est instalada ninguna de las fuentes de la combinacin, el navegador mostrar el
texto de acuerdo a sus preferencias.

Si desplegamos este cuadro de seleccin, y seleccionamos Editar lista de fuentes, podemos agregar,
quitar o modificar las combinaciones de fuentes. Se abrir el cuadro de dilogo Editar lista de fuentes y
podremos llevar a cabo las siguientes acciones:

Figura 4.20. Desplegar Fuente de pgina y editar
lista de fuentes.

Figura 4.21. Cuadro de dilogo Editar lista de fuentes.

o Aadir o quitar fuentes de una combinacin: debemos seleccionar previamente, en la
parte superior, del cuadro de texto Lista de fuentes, la combinacin de fuentes que vamos
a modificar. Las fuentes que forman esta combinacin aparecen en el cuadro de texto
Fuentes elegidas.
Si queremos quitar una fuente de la combinacin, seleccionamos la fuente del cuadro de
texto Fuentes elegidas y hacemos clic en el botn de flecha . Si queremos aadir una
fuente a la combinacin, seleccionamos la fuente del cuadro de texto Fuentes disponibles
y hacemos clic en el botn de flecha .

Figura 4.22. Agregar o quitar fuentes.

o Aadir o quitar una combinacin de fuentes: para aadir una combinacin de fuentes,
hacemos clic en el botn o seleccionamos una familia de fuentes concreta, como por
ejemplo, , seleccionamos la fuente que
vayamos a aadir a nuestra combinacin desde el cuadro de texto Fuentes disponibles y
hacemos clic en el botn de flecha . Este procedimiento lo emplearemos para aadir
todas las fuentes que deseemos a nuestra combinacin, pero debemos tener presente que
no estaremos seguros de la forma que se visualizarn nuevas fuentes en otros sistemas.
Para evitar esto, en la medida de lo posible, sera interesante aadir combinaciones
genricas de fuentes desde el men Fuentes disponibles a nuestra combinacin de fuentes
especficas.

Las familias genricas de fuentes son: cursiva, fantasa, monoespacio, san-serif y serif. Si
ninguna de las fuentes de la lista Fuentes elegidas est disponible en el sistema del
usuario, el texto aparecer en la fuente predeterminada asociada con la familia genrica
de fuentes.

Para quitar una familia de fuentes, seleccionamos la combinacin de fuentes del cuadro de
texto Lista de fuentes y hacemos clic en el botn .

Desde esta categora Apariencia, tambin podemos seleccionar el formato Negrita , Cursiva , o
ambos.
Tamao: nos permite definir el tamao de la fuente. Si seleccionamos un valor numrico, tambin nos
permite elegir la unidad de medida.

Figura 4.23. Tamao de la fuente desde la categora Apariencia.

Color del texto: nos permite definir el color de texto. De forma predeterminada, el color de texto de los
documentos es el negro.

Figura 4.24. Color del texto.

Color de fondo: nos permite definir un color de fondo para el documento. Por defecto, el color de fondo
de los documentos es el blanco. El color de fondo se mostrar siempre que no seleccionemos ninguna
imagen de fondo.

Figura 4.25. Color de fondo.
Imagen de fondo: nos permite definir una imagen de fondo para el documento. La imagen se muestra
en mosaico ocupando todo el fondo del documento. Para insertar una imagen de fondo deberemos pulsar
en Examinar, que abrir el cuadro de dilogo Seleccionar origen de imagen y que nos permitir localizar
una imagen en nuestro equipo; una vez localizada la imagen que queremos como fondo, la seleccionamos
y pulsamos Aceptar.

Figura 4.25. Seleccionar imagen de fondo.

Si la imagen que vamos a establecer como fondo estaba ubicada fuera de la carpeta raz del sitio local con
el que estamos trabajando, en nuestro ejemplo MiWeb, Dreamweaver nos dar la posibilidad de copiarla
al mismo en ese momento, evitando as problemas de rutas posteriores. Slo tenemos que contestar
afirmativamente a la pregunta de si deseamos copiar el archivo de imagen a la raz del sitio en ese
momento.

Figura 4.26. Copiar imagen de fondo a la raz del sitio local.

Entonces se abrir el cuadro de dilogo Copiar archivo como y localizaremos la ubicacin dentro de
MiWeb donde queremos copiar el fichero de imagen, que en nuestro ejemplo ser al interior de la
subcarpeta imagenes que habamos creado dentro de la carpeta Elementos cuando creamos nuestro sitio
web. Cuando nos encontremos en el interior de dicha carpeta, slo nos quedar pulsar el botn Guardar.


Figura 4.27. Guardar fichero de imagen en la raz de nuestro sitio MiWeb.

Adems, podemos decidir cmo va a aparecer en nuestro documento la imagen de fondo insertada, si se
repite y de qu forma lo hace. As, si desplegamos Repetir, podemos seleccionar:
o No-repeat muestra la imagen de fondo una sola vez.
o Repeat forma un mosaico con la imagen en sentido horizontal y vertical.
o Repeat-x y repeat-y muestran, respectivamente, una banda horizontal y vertical de
imgenes. Las imgenes se recortan para que quepan dentro de los lmites.

Figura 4.28. Repetir.

RECOMENDACIN. Es importante hacer una buena combinacin de colores entre la fuente y
los colores de fondo del documento.

Margen izquierdo, derecho, superior e inferior: nos permite establecer los mrgenes en el documento y
su unidad de medida. Dreamweaver no muestra los mrgenes de pgina en la ventana del Documento,
deberemos ver su efecto desde los navegadores correspondientes.

La configuracin de propiedades en la categora Apariencia (HTML), del cuadro de dilogo Propiedades de
la pgina da como resultado una pgina con formato HTML en lugar de CSS.

Figura 4.29. Categora Apariencia (HTML).
Desde esta categora podemos tambin establecer una imagen de fondo del mismo modo en el que
hemos aprendido para la categora Apariencia (CSS), un color de fondo y un color del texto del
documento, as como establecer los mrgenes izquierdo y superior con su ancho y alto respectivamente.
Pero esta categora, adems, nos permite establecer un color para los vnculos del documento, as como
para los vnculos visitados y activos del mismo.

En la categora Vnculos (CSS) podemos definir la fuente predeterminada del vnculo, el tamao de la
fuente del vnculo, as como los colores de los vnculos visitados, activos y de sustitucin; por ltimo,
tambin podemos seleccionar el estilo subrayado del vnculo desplegando Estilo subrayado.


Figura 4.30. Categora Vnculos (CSS).

Fuente de vnculo: nos permite especificar el tipo de fuente que se debe utilizar para el texto de un
vnculo. Dreamweaver utiliza, de forma predeterminada, la misma combinacin de fuentes especificada
para todo el documento, a menos que aqu especifiquemos otra fuente.

Tamao: nos permite definir el tamao de la fuente. Si seleccionamos un valor numrico, tambin nos
permite elegir la unidad de medida.

Color de vnculo: nos permite especificar el color de los vnculos. Este color ayuda al usuario a distinguir
entre el texto normal y los vnculos que sirven de enlace a otras pginas.

Vnculos de sustitucin: nos permite especificar el color que tendr el vnculo cuando se coloque encima
el ratn.

Vnculos visitados: nos permite especificar el color de los vnculos visitados y ayuda al usuario a
distinguirlos de los que an no han sido visitados.

Vnculos activos: nos permite especificar el color de un vnculo al hacer clic con el ratn.

Estilo subrayado: nos permite definir el estilo subrayado que se debe aplicar a los vnculos. Por defecto,
cuando tenemos un texto con un vnculo asociado, el texto aparece subrayado.

Los vnculos los estudiaremos ms detenidamente en un tema especfico.

RECOMENDACIN. No es conveniente modificar los colores estndar de los enlaces as como
tampoco es recomendable utilizar estos colores para el resto del texto del documento pues

podemos confundir a los usuarios y pueden no llegar a localizar nuestros vnculos.

La categora Encabezados (CSS), nos permite especificar la combinacin y tamao de las fuentes para los
encabezados de las pginas:

Fuente de encabezado: nos permite especificar la familia de fuentes predeterminada que se va a utilizar
en las pginas Web. Dreamweaver utilizar las fuentes que especifiquemos, a menos que definamos de
forma concreta otro tipo de fuente para un elemento de texto. Tambin podemos seleccionar el formato
Negrita , Cursiva , o ambos.

Encabezado 1 a encabezado 6: nos permite especificar el color y tamao de la fuente que se debe
utilizar, hasta un mximo de 6 niveles de etiquetas de encabezado. Si seleccionamos un valor numrico,
tambin nos permite elegir la unidad de medida.

Figura 4.31. Categora Encabezado (CSS).

La categora Ttulo/Codificacin, permite especificar el tipo de codificacin del documento especfico para
el idioma utilizado al crear las pginas Web, as como especificar el Formulario de normas Unicode que
debe utilizarse con dicho tipo de codificacin:

Ttulo: nos permite especificar el ttulo de la pgina. Este ttulo aparecer en la barra de ttulo de la
ventana de documento y la ventana de la mayora de los navegadores.

Tipo de Documento (DTD): Especifica la definicin de un tipo de documento. Por ejemplo, puede hacer
que un documento HTML sea compatible con XHTML seleccionando XHTML 1.0 de transicin o XHTML 1.0
estricto del men emergente.

Codificacin: nos permite especificar la codificacin empleada para los caracteres del documento. Para
nuestro caso, espaol y otros idiomas de Europa Occidental, seleccionaremos Europeo occidental. Existen
otras opciones que podemos apreciar desplegando la lista. Si la pgina que vamos a crear utiliza otro
alfabeto, deberemos configurar este atributo. Si seleccionamos Unicode (UTF-8) como codificacin del
documento, no ser necesaria la codificacin de entidades, ya que la codificacin UTF-8 puede representar
todos los caracteres.

Volver a cargar permite convertir el documento existente o volver a abrirlo con la nueva codificacin.

Formulario de normas Unicode: slo est activado si seleccionamos UTF-8 como codificacin del
documento. Existen cuatro formularios de normas Unicode. El ms importante es el formulario de
normalizacin C porque es el formulario ms utilizado en el modelo de caracteres para la Web.

Incluir firma Unicode (BOM): permite incluir en el documento una marca de orden de bytes (BOM, en
sus siglas en ingls). Una BOM est formada por entre 2 y 4 bytes situados al comienzo de un archivo de
texto que identifican a un archivo como Unicode y, en este caso, el orden de los bytes siguientes. Dado
que UTF-8 carece de orden de bytes, la adicin de una BOM UTF-8 es opcional. Es obligatoria en el caso de
UTF-16 y UTF-32.

Figura 4.32. Categora Ttulo/Codificacin.

La categora Imagen de rastreo, nos permite insertar un archivo de imagen para utilizarlo como gua al
disear la pgina Web:

Imagen de rastreo: especifica una imagen que se va a emplear como gua para copiar un diseo. Esta
imagen slo sirve como referencia, ya que no aparece cuando el documento se muestra en un navegador.

Transparencia: nos permite determinar la opacidad de la imagen de rastreo, desde completamente
transparente hasta completamente opaca.

Figura 4.33. Categora Imagen de rastreo.

4.4. Vista previa en el navegador

Cuando trabajamos en un documento, lo que estamos elaborando en la vista Diseo, es muy parecido a lo
que realmente aparecer en el navegador. No obstante es conveniente ir visualizando frecuentemente las
pginas, obteniendo una vista previa en navegadores para detectar los errores y evitar repetirlos. Tambin
podemos utilizar la Vista en vivo que nos ofrece Dreamweaver.

Para visualizar la pgina Web en un navegador, lo primero que debemos hacer es aadir dicho navegador a
la lista de navegadores. Esto lo realizaremos desde el cuadro de dilogo Preferencias, y tenemos dos
formas diferentes de hacerlo:

1. Ejecutando el comando Preferencias desde el men Edicin, o usando la combinacin de teclas Ctrl+U

Figura 4.34. Comando Preferencias del men Edicin.
2. Activando el cuadro de dilogo Preferencias desde Archivo>Vista previa en el navegador>Editar lista
de navegadores.

Figura 4.35. Comando Editar lista de navegadores.

En el cuadro de dilogo Preferencias que nos aparece, en la seccin de la izquierda seleccionamos la
Categora Vista previa en el navegador.

Figura 4.36. Vista previa en el navegador del cuadro Preferencias.
Si queremos aadir un navegador a la lista, hacemos clic en el botn y se abre un nuevo cuadro de
dilogo, Aadir navegador.

Figura 4.37. Cuadro de dilogo Aadir navegador.

Para indicar en el cuadro de texto Aplicacin, la ruta donde se encuentra el navegador en el disco duro,
hacemos clic en Examinar y localizamos su ubicacin. Una vez localizado en el cuadro de dilogo
Seleccionar Navegador, pulsamos Abrir.

Figura 4.38. Seleccionar navegador.

Dreamweaver escribir el nombre del navegador en el cuadro de texto Nombre del cuadro de dilogo
Aadir navegador.

Figura 4.39. Aadir navegador.

Activamos la casilla Navegador principal o Navegador secundario para establecer la categora del
navegador. Esta opcin tambin la podremos modificar, si as lo queremos, desde el cuadro de dilogo
Preferencias. Podemos aadir tantos navegadores como creamos necesario.
Para eliminar un navegador de la lista, lo seleccionamos y hacemos clic en el botn . El nombre del
navegador desaparecer de la lista.


Desde el cuadro de dilogo Aadir navegador, tambin se nos permite activar la opcin Vista previa
utilizando el archivo temporal, para crear una copia temporal del documento para su vista previa y su
depuracin del servidor o bien, si no activamos la opcin, podemos actualizar el documento directamente.

Una vez configurados todos los parmetros que consideremos oportunos, hacemos clic en Aceptar para
validar los cambios. Ahora, podemos obtener una vista previa del documento en el que estamos
trabajando pulsando F12 para abrir el navegador principal y Ctrl+F12 para abrir el navegador secundario.

Tambin podemos hacer clic en el botn Vista previa de la barra de herramientas del documento y
a continuacin seleccionar el navegador que deseamos abrir.

Figura 4.40. Desplegar Vista previa/Depurar en el explorador.

4.5. Paletas de colores

Antes de decidir los colores que vamos a usar en nuestra Web debemos tener presente que una misma
pgina se ver diferente dependiendo del monitor, del navegador y del sistema operativo.

Actualmente existen en el mercado multitud de monitores que soportan distintas configuraciones de color.
Esto es fcil comprobarlo si accedemos a las propiedades de la pantalla de nuestro ordenador y vemos las
posibilidades de Resolucin de pantalla y Calidad del color que nos ofrece la ficha Configuracin.

Figura 4.41. Configuracin de pantalla.


Asimismo, los navegadores y los sistemas operativos difieren en los colores que utilizan cada uno. Estos
colores, consta generalmente de una gama de 256 colores, que se denomina paleta de color.

En los navegadores ms utilizados, la paleta est formada por 216 colores comunes y 40 adicionales, que
de alguna forma garantizan la velocidad de descarga de las pginas Web. De todas formas, si el navegador
que visualiza nuestra pgina Web no dispone de nuestros colores, har una conversin de los colores de
nuestra imagen a sus colores por defecto.

El modelo de color de un monitor se corresponde con el modelo RGB. Si asignamos a cada una de las luces
8 de los 24 bits disponibles, podemos obtener 28 = 256 intensidades diferentes de rojos, 28
= 256 intensidades diferentes de verdes y otras 28 = 256 intensidades diferentes de azules, que puede
crear 16.777.216 colores distintos.

En los sistemas de Windows y Macintosh la paleta de color est formada por 256 colores, elegidos entre
los 16.777.216 posibles. El problema es que difieren en la eleccin de los 256 colores para la formacin de
sus paletas de color, por defecto.

En Dreamweaver la paleta de colores est formada por 216 colores seguros para la Web, es decir, que se
muestran de la misma forma en los dos sistemas, adems de estar orientada a dispositivos Web
alternativos como las PDA y las pantallas de telfonos mviles. Esta paleta se nos presenta en Cubos de
color, de forma predeterminada, y en Tono continuo.

Figura 4.42. Cubo de color.

Figura 4.43. Tono continuo.

En Dreamweaver, en el Inspector de Propiedades o en los cuadros de dilogo de los elementos que
forman la pgina, existe un cuadro de color que, si lo pulsamos, nos abre el Selector de color.

Figura 4.44. Selector de color.
Desde el selector de color podemos:

Utilizar el cuentagotas para seleccionar un color de la paleta activa. El cuentagotas tambin nos permite
seleccionar un color incluso fuera de las ventanas de Dreamweaver. Basta con hacer clic en el color que
deseemos.

Quitar el color actual y establecer el color predeterminado del navegador. Hacemos clic en el botn
Color predeterminado.

Abrir el selector de colores del sistema, para seleccionar uno de los colores bsicos del sistema
operativo. Hacemos clic en el botn Colores del Sistema y se abre la ventana Color.

Figura 4.45. Ventana Color.

Desde este cuadro de dilogo podemos seleccionar uno de los Colores bsicos. Tambin podemos
seleccionar un color del espectro de colores o bien definir su valor en los cuadros de texto
correspondientes. Una vez seleccionado lo podemos Agregar a los colores personalizados y aceptamos los
cambios para utilizar el color seleccionado.

Cambiar de paleta de colores. Las paletas de colores Sistema Windows, Sistema Mac y Escala de grises
no son seguras para la Web. Si utilizamos una de estas paletas y a continuacin elegimos Ajustar a Web
Safe, Dreamweaver sustituir el color seleccionado por el color seguro para la Web que ms se le parezca.

En HTML, los colores se expresan en forma de valor hexadecimal. El sistema hexadecimal es un sistema de
numeracin de base 16, es decir, utiliza 16 dgitos en su numeracin (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E,
F).

El valor hexadecimal que representa al color est formado por el smbolo # y seis dgitos (hexadecimales),
de los cuales, los dos primeros corresponden al color rojo, los dos siguientes al color verde y los dos
ltimos al color azul. Con estos dos dgitos podemos obtener las 256 intensidades diferentes de cada color.

Por ejemplo, el color amarillo tiene valor hexadecimal #FFFF00, es decir el valor del color Rojo es FF, el del
color Verde es FF y el del color Azul es 00, (que se corresponden con el valor en decimal Rojo:255,
Verde:255, Azul:0).

4.6. Texto en un documento Web

Para insertar texto en nuestra pgina, lo haremos desde la vista diseo. Aunque es posible hacerlo
directamente en cdigo HTML, desde la vista Cdigo, podremos comprobar que Dreamweaver genera
automticamente dicho cdigo sobre el texto y formato introducido desde la vista diseo.

Tambin podemos utilizar el texto creado con otras aplicaciones. Abrimos el fichero con el texto, lo
seleccionamos y lo copiamos con el comando Edicin>Copiar o Ctrl+C.

Abrimos nuestro documento en la vista Diseo, colocamos el cursor donde vayamos a insertar el texto y lo
pegamos con el comando Edicin>Pegar o Ctrl+V.

Dreamweaver conserva el formato de texto original. Este formato lo podremos modificar si lo
seleccionamos previamente.

Propiedades del texto

Como hemos visto, al crear un nuevo documento, podemos definir las caractersticas que tendr en lo
referente a formato del texto, es decir, el tipo de fuente, el tamao, el color, etc.

No obstante, todos estos atributos los podemos modificar de forma puntual para el texto que estamos
editando en ese momento. Las modificaciones las podemos realizar desde el men Formato. Sin embargo,
desde el Inspector de Propiedades tenemos tambin la posibilidad de aplicar el formato HTML o de Hojas
de estilos en cascada (CSS). Al aplicar formato HTML, Dreamweaver aade propiedades al cdigo HTML

en el cuerpo de la pgina. Al aplicar formato CSS, Dreamweaver escribe propiedades en la seccin head del
documento o en una hoja de estilos independiente.
Aunque veremos CSS ms adelante, vamos a observar ahora el aspecto del inspector de propiedades con
el botn CSS pulsado:

Figura 4.46. Inspector de propiedades. Formato de texto. Botn CSS pulsado.

o Regla de destino: es la regla que est editando en el inspector de propiedades de CSS. Si hay una
regla ya existente aplicada al texto, se mostrar el formato de la regla que afecta al texto al hacer
clic en el texto de la pgina. Tambin se puede utilizar el men emergente Regla de destino para
crear nuevas reglas CSS y nuevos estilos en lnea o aplicar clases existentes al texto seleccionado. Si
deseas crear una regla nueva, debers rellenar el cuadro de dilogo Nueva regla CSS.

o Editar regla: abre el cuadro de dilogo Definicin de regla CSS para la regla de destino. Si
seleccionas Nueva regla CSS del men emergente Regla de destino y haces clic en el botn Editar
regla, Dreamweaver abrir el cuadro de dilogo de definicin de nueva regla CSS.

o Panel CSS: abre el panel Estilos CSS y muestra propiedades para la regla de destino en la vista
actual.

o Fuente: cambia la fuente de la regla de destino.

o Tamao: establece el tamao de la fuente para la regla de destino.

o Color del texto: establece el color seleccionado como color de fuente en la regla de destino.

o Negrita: aade la propiedad de negrita a la regla de destino.

o Cursiva: aade la propiedad de cursiva a la regla de destino.

o Alinear a la izquierda, al centro o a la derecha y justificar: aade las correspondientes propiedades
de alineacin a la regla de destino.

Es importante observar que las propiedades de Fuente, Tamao, Color del texto, Negrita, Cursiva y
Alineamiento siempre muestran las propiedades correspondientes a la regla que afecta a la seleccin
actual de la ventana de documento. Al cambiar alguna de estas propiedades, los cambios que realice
afectarn a la regla de destino.

Vamos a ver ahora el inspector de propiedades con el botn HTML pulsado :

Figura 4.47. Inspector de propiedades. Formato de texto. Botn HTML pulsado.

De todas las opciones que podemos modificar desde el Inspector de Propiedades cuando pulsamos el
botn HTML, las correspondientes al formato de un texto seleccionado son:

Formato: establece el estilo de prrafo del texto seleccionado. Prrafo aplica el formato
predeterminado para una etiqueta <p>, Encabezado 1 aade una etiqueta H1, etc.

ID: asigna una ID a la seleccin. El men desplegable ID (en caso de ser aplicable) enumera
todos los ID declarados pero no utilizados en el documento.

Clase: muestra el estilo de clase que se aplica actualmente al texto seleccionado. Si no se
ha aplicado ningn estilo a la seleccin, el men emergente muestra Sin estilo CSS. Si se
han aplicado varios estilos a la seleccin, el men aparece en blanco.
Puedes utilizar el men Estilo para seguir uno de estos procedimientos:
o Seleccione el estilo que desea aplicar a la seleccin.
o Seleccione Ninguno para quitar el estilo seleccionado actualmente.
o Seleccione Cambiar nombre para cambiar el nombre del estilo.
o Seleccione Adjuntar hoja de estilos para abrir un cuadro de dilogo en el que
poder adjuntar una hoja de estilos externa a la pgina.
Negrita: aplica <b> o <strong> al texto seleccionado, en funcin de la preferencia de estilo
definida en la categora General del cuadro de dilogo Preferencias.

Cursiva: aplica <i> o <em> al texto seleccionado, en funcin de la preferencia de estilo
definida en la categora General del cuadro de dilogo Preferencias.

Lista sin ordenar: crea una lista con vietas del texto seleccionado. Si no hay texto
seleccionado, comienza una nueva lista con vietas.

Lista ordenada: crea una lista numerada del texto seleccionado. Si no hay texto
seleccionado, comienza una nueva lista numerada.

Sangra y Anular sangra: inserta y anula sangra en el texto seleccionado aplicando o
quitando la etiqueta
blockquote. En una lista, la aplicacin de sangra crea una lista anidada y su anulacin
elimina la anidacin de la lista.

Vnculo: crea un vnculo de hipertexto del texto seleccionado. Haz clic en el icono de
carpeta para localizar un archivo del sitio, escribe el URL, arrastra el icono de sealizacin

hasta un archivo del panel Archivos o arrastra un archivo desde el panel Archivos hasta el
cuadro.

Ttulo: especifica el texto de informacin sobre una herramienta para un vnculo de
hipertexto.
Destino: permite especificar el marco o la ventana donde se cargar el documento
vinculado.
o _blank carga el archivo vinculado en una nueva ventana sin nombre del
navegador.
o _parent carga el archivo vinculado en el conjunto de marcos padre o en la
ventana del marco que contiene el vnculo. Si el marco que contiene el vnculo
no est anidado, el archivo vinculado se cargar en la ventana completa del
navegador.
o _self carga el archivo vinculado en el mismo marco o ventana que el vnculo.
Este destino est implcito, por lo que normalmente no es preciso
especificarlo.
o _top carga el archivo vinculado en la ventana completa del navegador,
quitando as todos los marcos.

Ms adelante, en el captulo dedicado a vnculos, veremos los destinos con detenimiento.

RECOMENDACIN. Selecciona tipos de letras que sean universales para que se puedan leer
perfectamente desde cualquier plataforma y navegador. Cuida que el tamao no sea muy grande que
alargue innecesariamente la pgina, pero tampoco demasiado pequeo que dificulte su lectura.

Es importante observar que, aunque CSS es el mtodo preferido para aplicar formato al texto,
Dreamweaver todava permite aplicar formato al texto con HTML.

Propiedades del prrafo

Podemos modificar el formato de un prrafo ejecutando el comando Formato de prrafo desde el men
Formato.

Figura 4.48. Comando Formato de prrafo. Men Formato.

Al igual que podemos modificar de forma concreta un texto, desde el Inspector de propiedades HTML
tambin podemos modificar prrafos enteros.
Para dar formato a un prrafo, no hace falta seleccionarlo previamente, basta con colocar el cursor en el
prrafo y hacer clic sobre el botn correspondiente para aplicar los cambios.

En el inspector de propiedades HTML, despliega Formato y selecciona un formato de prrafo (por
ejemplo, Encabezado 1, Encabezado 2, Texto con formato predeterminado, etc.)

Figura 4.49. Seleccionar formato de prrafo.

La etiqueta HTML asociada con el estilo seleccionado (por ejemplo, h1 para Encabezado 1, h2 para
Encabezado 2, pre para Formato predeterminado, etc.) se aplicar a todo el prrafo. La etiqueta HTML
asociada es <p>, etiqueta de inicio de prrafo y </p>, etiqueta de fin de prrafo. La etiqueta HTML
asociada a cada uno de los encabezados es <h1> y </h1> para indicar el inicio y el final del Encabezado 1,
<h2> y </h2> para el Encabezado 2, <h3> y </h3> para el Encabezado 3 y as sucesivamente. El formato
predeterminado utiliza la fuente Courier y asocia las etiquetas <pre> y </pre> para indicar el inicio y el
final.

Para quitar un formato de prrafo, selecciona Ninguno.

Cuando aplicas una etiqueta de encabezado a un prrafo, Dreamweaver aade automticamente la
siguiente lnea de texto como un prrafo sencillo. Para cambiar esta configuracin, selecciona Edicin >
Preferencias, y a continuacin, en la categora General, en la seccin Opciones de edicin, comprueba que
la casilla Cambiar a prrafo sencillo tras el encabezado no est activada.


Figura 4.50. Cambiar a prrafo sencillo tras el encabezado.

Otras opciones del formato de prrafo que podemos modificar desde el Inspector de propiedades HTML
son:
Lista sin ordenar: nos permite crear una lista con vietas de los prrafos seleccionados. Si no
hay texto seleccionado, aplica el formato lista sin ordenar al prrafo donde se encuentre el
cursor y comienza una nueva lista con vietas. Las etiquetas HTML asociadas a las listas sin
ordenar son:
<ul>
<li>elemento 1</li>
<li>elemento 2</li>
<li>elemento 3</li>
</ul>
Lista ordenada: nos permite crear una lista numerada de los prrafos seleccionados. Si no
hay texto seleccionado, aplica el formato lista ordenada al prrafo donde se encuentre el
cursor y comienza una nueva lista numerada. Las etiquetas HTML asociadas a las listas
ordenada son:
<ol>
<li>elemento 1</li>
<li>elemento 2</li>
<li>elemento 3</li>

</ol>
Desde el cuadro de dilogo Propiedades de lista podemos configurar el aspecto de toda una
lista o de sus elementos por separado. Desde aqu podemos establecer el estilo de nmero,
restablecer el recuento o configurar las opciones de las vietas de los distintos elementos o de
toda la lista.
Si queremos establecer las propiedades de toda una lista debemos crear, en la ventana de
documento, al menos un elemento de la lista.
Colocamos el cursor sobre el texto del elemento de lista y seleccionamos Formato > Lista >
Propiedades para abrir el cuadro de dilogo Propiedades de lista.

Figura 4.51. Men Formato. Comando Lista. Propiedades de la lista.
En el cuadro de dilogo que aparece, podemos definir las opciones para la lista.

Figura 4.52. Cuadro de dilogo Propiedades de lista.
Tipo de lista: especifica las propiedades de la lista. Desde el men emergente podemos
seleccionar Lista con vietas, Lista con nmeros, Lista de directorio o Lista de men.

Figura 4.53. Tipo de lista.
Estilo: determina el estilo de las vietas o los nmeros empleados para una lista con vietas
o numerada. Todos los elementos de la lista tendrn este estilo a menos que especifiquemos
un estilo nuevo para determinados elementos.

Figura 4.54. Estilo lista con nmeros.
Iniciar recuento: nos permite establecer el valor del primer elemento en una lista
numerada.
Si queremos aplicar un estilo concreto a un elemento de la lista, entonces colocaremos el
cursor sobre el texto del elemento de la lista modificar, accedemos al cuadro de dilogo
Propiedades de lista del modo que ya hemos descrito, desplegamos Nuevo estilo en la seccin
Elemento de lista y seleccionamos un estilo nuevo. El campo Rest. Recuento a:, permite
establecer un nmero concreto desde el que comienza la numeracin de los elementos de
lista.

Figura 4.55. Aplicar formato a un elemento de una lista.


Hacemos clic en Aceptar para guardar la configuracin y cerrar el cuadro de dilogo. De esta
forma el nuevo estilo se aplicar automticamente a todos los elementos que vayamos
aadiendo a la lista y/o al elemento concreto de la lista.
Las propiedades de un Elemento de la lista, tambin podemos establecerlas desde el botn
en el Panel del Inspector de Propiedades.
Sangra y Anular sangra: inserta y anula sangra en el texto seleccionado. Las etiquetas
HTML asociadas a la sangra son: <blockquote> para iniciar la sangra y </blockquote> para
cerrar la sangra. Si aplicamos sangra en una lista, nos creara una lista anidada.
Si seleccionamos Anular sangra, quitara la sangra del prrafo seleccionado o la anidacin de
la lista. Esta accin eliminara el cdigo HTML asociado.
4.7. Estilos CSS
Como ya hemos mencionado, el panel del Inspector de Propiedades cuenta con un botn
. Al aplicar formato CSS, Dreamweaver escribe propiedades en la seccin head del
documento o en una hoja de estilos independiente. No se debe olvidar que al crear estilos en
lnea CSS, Dreamweaver aade cdigo de atributos de estilo directamente al cuerpo de la
pgina.
Podemos tambin acceder a los distintos estilos CSS que podemos crear y aplicar a nuestro
documento desde el men Formato > Estilo CSS.

Figura 4.56. Comando Estilos CSS. Men Formato.
Los estilos CSS (Cascading Style Sheets), llamadas tambin Hojas de Estilo en Cascada, son un
conjunto de reglas que nos permiten configurar el aspecto de las pginas de nuestro Sitio.
La utilizacin de estilos CSS para aplicar formato a una pgina permite separar el contenido de
la presentacin. El contenido de la pgina (el cdigo HTML) reside en el archivo HTML,
mientras que las reglas CSS que definen la presentacin del cdigo residen en otro archivo
(una hoja de estilos externa) o en otra parte del documento HTML (normalmente, en la

seccin head). La separacin del contenido y la presentacin hace que resulte mucho ms fcil
mantener el aspecto del sitio desde una ubicacin central, ya que no es necesario actualizar las
propiedades de las distintas pginas cuando se desea realizar algn cambio. La separacin del
contenido y la presentacin tambin depura y simplifica el cdigo HTML, lo que disminuye el
tiempo de carga en los navegadores y agiliza la navegacin para personas con problemas de
accesibilidad.
Con CSS, se pueden controlar numerosas propiedades del texto, entre ellas las fuentes y los
tamaos de fuente especficos; negrita, cursiva, subrayado y sombras de texto; color de texto y
de fondo; color y subrayado de vnculos; etc. Si utilizas CSS para controlar las fuentes, tambin
el diseo y el aspecto de la pgina sern ms coherentes en mltiples navegadores.
Adems de para dar formato al texto, se puede utilizar CSS para definir el formato y la posicin
de elementos de nivel de bloque (block-level) de una pgina Web. Un elemento de nivel de
bloque es un elemento de contenido independiente que normalmente est separado por una
nueva lnea en el cdigo HTML y que tiene visualmente el formato de un bloque. Por ejemplo,
las etiquetas h1, p y div generan elementos de nivel de bloque en una pgina Web. Puedes
ajustar mrgenes y bordes para elementos de nivel de bloque, situarlos en una ubicacin
concreta, aadirles color de fondo, colocar texto flotante alrededor de ellos, etc. La
manipulacin de elementos de nivel de bloque es la forma en que se establece el diseo de las
pginas con CSS.
Crear un estilo CSS
Para crear un estilo CSS, seleccionamos el texto cuyas propiedades vamos a modificar.

Ejercicio
El objetivo en este ejercicio ser crear un nuevo estilo CSS a partir de un texto previamente
escrito.

Crea un nuevo documento HTML segn hemos visto anteriormente: Archivo>Nuevo...
Pgina en blanco>HTML>Crear.

En vista Diseo, escribe en la ventana del Documento el texto: Creacin de un nuevo estilo
CSS.

Figura 4.57. Escribir texto en la ventana del documento.

Selecciona la palabra nuevo haciendo doble clic sobre ella con el ratn.

En el Inspector de Propiedades CSS elige:
o Regla de destino <Nueva regla CSS> y pulsa cualquier opcin del inspector de
propiedades, por ejemplo el botn negrita .


o En el cuadro de dilogo Nueva reglas CSS despliega Tipo de Selector y
selecciona Clase (puede ser aplicado a cualquier elemento HTML). En Nombre
del selector introduce un nombre que sea identificativo del nuevo estilo CSS,
por ejemplo .normal (Los nombres de clase deben comenzar por un punto y
pueden contener cualquier combinacin alfanumrica. Si te olvidas de poner el
punto inicial, Dreamweaver lo har automticamente). Despliega Definicin
de regla y selecciona (Slo este documento) para que el nuevo estilo CSS
quede incrustado en el documento actual. Despus pulsa Aceptar.

Figura 4.58. Nueva regla CSS.

o A continuacin pulsa el botn del inspector de propiedades CSS.
Se abre el cuadro de dilogo Definicin de regla para .normal, ya que .normal es el
nombre del selector que habamos escogido en el cuadro de dilogo anterior. En
este cuadro, categora Tipo, introducimos las siguientes propiedades: Fuente
familia Verdana, Geneva, sans-serif; Tamao 14 pxeles, Color azul #0000FF, Estilo
cursiva (italic). Luego pulsa en Aplicar para ver los cambios en pantalla y por
ltimo, pulsa Aceptar.


Figura 4.59. Definicin de regla.

De forma automtica, Dreamweaver le ha aplicado a nuestro texto seleccionado los
atributos del nuevo estilo CSS.

Figura 4.60. Nuevo estilo CSS.

Si en algn momento deseas cambiarle el nombre a una regla CSS, puedes hacerlo
fcilmente desde el panel Estilos CSS, ficha Todo, haciendo un solo clic sobre la regla cuyo
nombre deseas modificar; automticamente el nombre de la regla se convierte en editable, y
podrs ponerle el nombre que desees, aunque nosotros no vamos a hacerlo en este ejercicio.


Figura 4.61. Cambiar nombre a una regla CSS.

Para editar la regla, puedes hacer doble clic sobre ella en este mismo panel, pulsar en el
icono Editar estilo de la barra de herramientas del panel, o simplemente desplegar la
propiedad a modificar desde Propiedades de .normal, donde tambin puedes aadirle
nuevas propiedades.
Si deseas eliminarla, puedes seleccionarla en el panel y pulsar Eliminar regla CSS en la
barra de herramientas de este panel Estilos CSS.

Guarda el documento (Archivo>Guardar como) con el nombre estilos.

Una vez creada la regla CSS, para aplicarla sobre un elemento del documento en el que
estamos trabajando, basta con seleccionar dicho elemento y elegir, en el Inspector de
Propiedades CSS, la regla de destino que deseamos aplicar desplegando el men disponible en
el cuadro Regla de destino.

4.8. Tipos de estilos CSS
Crear nuevos estilos CSS
Hemos comprobado como Dreamweaver nos permite crear estilos de forma rpida y sencilla.
Los estilos creados de esta manera, se agrupan en una hoja de estilos que se encuentra
incrustada en el cdigo de nuestro documento Web.
Para crear un nuevo estilo, podemos hacerlo de varias formas:
Haciendo clic en el botn Nueva regla CSS del Panel Estilos CSS, que abre el cuadro de
dilogo Nueva regla CSS.
Desde el men Formato>Estilos CSS>Nuevo.

Figura 4.62. Comando Nueva regla CSS desde el men Formato.
Una tercera forma de abrir este cuadro de dilogo es desde el Inspector de Propiedades
CSS, seleccionando <Nueva regla CSS> en Regla de destino
y haciendo clic en .
Segn el Tipo de selector que seleccionemos en el cuadro de dilogo Nueva regla CSS,
podemos hablar de:
Estilos de Clase
Son los nicos estilos que se pueden aplicar a cualquier texto del documento como atributo
class.
Ejercicio

El objetivo en este ejercicio ser crear y definir un estilo CSS de clase.

Abre el documento estilos.html, si no lo tienes abierto.

Para crear un estilo de clase, abre el cuadro de dilogo Nueva regla CSS con cualquiera de
los procedimientos descritos anteriormente.

En Tipo de selector, activa la opcin Clase (puede ser aplicable a cualquier elemento HTML).

Escribe el nombre .titulo2 para el nuevo estilo en el cuadro de texto Nombre del selector.
Los nombres de los estilos de clase, como mencionbamos en el ejercicio anterior, deben
comenzar con un punto y pueden contener valores alfanumricos. Si no pones el punto,
Dreamweaver lo har de forma automtica.

En el apartado Definicin de regla, selecciona (Nuevo archivo de hoja de estilos) para crear

una hoja de estilo externa.

Figura 4.63. Crear un nuevo archivo de hoja de estilos.

Haz clic en Aceptar; se abrir el cuadro de dilogo Guardar archivo de hoja de estilos como.
Localiza la carpeta donde vayas a guardar la hoja de estilos en el cuadro. Escribe el nombre
hoja1 para la nueva hoja de estilos. La extensin .css se pone de forma automtica. Haz clic en
el botn Guardar.


Figura 4.64. Guardar archivo como hoja de estilos css.

Al hacer clic en Aceptar, automticamente se abre el cuadro de dilogo Definicin de regla
para .titulo2 en hoja1.css.


Figura 4.65. Definicin de regla para .titulo2 en hoja1.css

En este cuadro de dilogo podemos configurar diferentes atributos para definir el estilo desde
las distintas categoras:

Tipo: desde esta categora podemos definir los atributos de texto, como el tipo de fuente, el
tamao, color, etc.
Fondo: podemos definir los atributos del fondo, imagen de fondo, decidir si esta imagen se
repite o no, si est fija a su posicin original, etc.
Bloque: nos permite definir la configuracin del espaciado y de la alineacin de las etiquetas
y propiedades.
Cuadro: desde aqu podemos definir la configuracin de las etiquetas y propiedades que
controlan la ubicacin de los elementos en la pgina.
Borde: define la configuracin de los bordes que rodean a los elementos (Ancho, Color o
Estilo).
Lista: nos permite definir la configuracin de la lista para las etiquetas de lista (por ejemplo
el tamao y el tipo de vietas).
Posicin: sus propiedades determinan cmo debe colocarse el contenido relacionado con el
estilo CSS en la pgina.
Extensiones: podemos definir los atributos de los filtros, saltos de pgina y opciones de
puntero.

Vamos ahora a modificar las siguientes propiedades de la Categora Tipo del estilo .titulo2,
creado anteriormente:

o Fuente: Georgia, Times New Roman, Times, Serif.
o Tamao: 24 pxeles.
o Estilo: oblicua.
o Alto de lnea: normal.
o Grosor: negrita.

o Variante: versales.
o Color: azul oscuro (#000099).

Figura 4.66. Modificar definicin de regla.

Haz clic en los botones Aplicar y Aceptar, respectivamente, para guardar los cambios en
estilos.html.

Ahora, si quisiramos agregar una nueva regla CSS a la hoja de estilos recin creada, veramos
si desplegsemos el cuadro de dilogo Nueva regla CSS como ya hemos aprendido, la
hoja1.css en el desplegable Definicin de regla.


Figura 4.67. Crear una nueva regla CSS en una hoja ya existente.
Estilos de Etiqueta.
Son los estilos que se utilizan para redefinir el formato predeterminado de una etiqueta HTML
especfica.
Por ejemplo, si aplicamos el formato Encabezado 1 a un texto, Dreamweaver aplicar de forma
automtica las etiquetas <h1> de inicio y </h1> de cierre al texto seleccionado. Si redefinimos
la etiqueta <h1>, todo el texto al que se le haya aplicado cambiar al nuevo formato.
Para crear este nuevo estilo podemos hacer clic en el botn Nueva regla CSS en el panel
Estilos CSS y se abre el cuadro de dilogo Nueva regla CSS.
Al seleccionar Etiqueta desde Tipo de selector, podemos seleccionar la etiqueta que vayamos
a modificar desde la lista que se despliega en el cuadro Nombre del selector. En nuestro
ejemplo vamos a seleccionar h1 (encabezado 1) y vamos a definir la regla en la hoja1.css que
habamos creado antes.

Figura 4.68. Crear nueva regla CSS de etiqueta.

Al hacer clic en Aceptar, se activa el cuadro de dilogo Definicin de regla para h1 en
hoja1.css, en el cual podemos modificar como hemos aprendido anteriormente, las
propiedades que deseemos y aceptar los cambios, como por ejemplo en la Figura 4.69. de
abajo.

Figura 4.69. Definicin de regla para h1.
Automticamente, si vamos cambiamos al inspector de propiedades HTML, desplegamos
Formato y seleccionamos Encabezado1, el texto que
tecleemos en la ventana del documento, tendr las propiedades de la regla CSS que hemos
creado para la etiqueta h1.
Hojas de estilo Avanzadas.
Son los estilos, tambin llamados compuestos, que se utilizan para redefinir el formato
predeterminado de una combinacin concreta de etiquetas que contengan un cdigo
especfico de atributo Id.
Por ejemplo, si queremos modificar un encabezado h2 introducido en la celda de una tabla,
podemos modificar las etiquetas <td> y <h2> respectivamente.
Para crear este nuevo estilo debemos hacer clic en el botn Nueva regla CSS y nos
aparece el cuadro de dilogo Nueva regla CSS.
Seleccionamos la opcin Compuesto (basado en la seleccin) desde Tipo de selector y en el
Nombre del selector podemos escribir las etiquetas que vayamos a modificar, en nuestro

ejemplo td h2. En Definicin de la regla, podemos decidir si agregar esta nueva regla a
hoja1.css o aplicarla slo a este documento.

Figura 4.70. Crear una regla CSS compuesta.

Al hacer clic en Aceptar, se activa el cuadro de dilogo Definicin de regla para la td h2 y
desde aqu podemos modificar las propiedades que deseemos; al aceptar los cambios, de
forma automtica se aplicar el nuevo formato a todo el texto que tenga Formato Encabezado
2 y est dentro de la celda de una tabla que hayamos insertado en el documento.
4.9. Operaciones con estilos CSS
Editar un estilo CSS
Para modificar un estilo existente, podemos editarlo, como ya hemos mencionado antes,
desde el botn Editar estilo de la barra de herramientas del panel Estilos CSS, o
seleccionar la opcin Edicin que nos aparece en el men contextual, al pulsar con el botn
derecho del ratn sobre el estilo correspondiente.

Figura 4.71. Editar regla CSS desde el men contextual Edicin.
En cualquier caso, se abrir el cuadro de dilogo Definicin de regla desde el que podremos
modificar las propiedades de la regla CSS.
Borrar un estilo CSS
Para eliminar una regla CSS de una hoja de estilos, basta con seleccionarla desde el panel
Estilos CSS y hacer clic en el botn Eliminar regla CSS .

Mover estilos CSS
Dreamweaver nos permite convertir reglas CSS en externas, cambiarlas de ubicacin y
reorganizarlas segn nuestras necesidades.
Simplemente, en el panel Estilos CSS tendremos que seleccionar una regla CSS que hayamos
creado, por ejemplo en nuestro documento estilos.html y arrastrarla con el ratn, bien al
interior de hoja1.css, o bien una regla de hoja1.css al exterior de la hoja.
Si queremos integrar una regla en una hoja de estilos externa con la que contemos de
antemano, tambin podemos seleccionar la regla y con el botn del ratn, seleccionar Mover
reglas CSS desde el men contextual que se abre:

Figura 4.72. Mover regla CSS desde men contextual.
Automticamente, se abre el cuadro de dilogo Mover a hoja de estilos externa, desde el que
podemos seleccionar la hoja1.css que habamos creado antes, o localizar otra hoja de estilos
que tengamos en nuestro equipo pulsando el botn Examinar; tambin podemos moverla a
una nueva hoja de estilos.

Figura 4.73. Mover a hoja de estilos externa.
Aplicar Hojas de Estilo Externas
Ejercicio

El objetivo en este ejercicio ser aplicar una hoja de estilo externa a un nuevo documento,
para lo cual vamos a utilizar una de las hojas de estilos de muestra que nos ofrece
Dreamweaver.
Con esto podemos utilizar estilos que se encuentren en un archivo externo a cualquier
documento HTML. Esta posibilidad es muy til cuando nuestro Sitio Web tiene varias pginas y
con definir una sola hoja de estilos, podremos utilizarlos en todas las pginas del sitio.

Crea un nuevo documento HTML segn hemos visto anteriormente. (Archivo>Nuevo...
Pgina en blanco>HTML>Crear).

Para asociar una hoja de estilos al nuevo documento, haz clic en el botn Adjuntar hoja de

estilos del panel Estilos CSS.

Se abre el cuadro de dilogo Vincular hoja de estilos externa.

Figura 4.74. Cuadro de dilogo Vincular hoja de estilos externa.

En Aadir como, puedes seleccionar una de las siguientes opciones:

o Vincular: para crear un vnculo entre el documento actual y la hoja de estilos
externa. De esta forma se crea una etiqueta de vnculo href en el cdigo HTML y
conduce al URL al lugar en el que se encuentra la hoja de estilos publicada. Haz clic
en esta opcin; de esta forma conseguimos que con una sola hoja de estilos
podamos tener vinculadas varias pginas.

o Importar: para anidar la hoja de estilos en nuestra pgina.

o En el botn Vista previa, podemos verificar que la hoja de estilos aplica los estilos
que deseamos en la pgina actual. Si estos estilos no cumplen con lo que
esperamos, podemos hacer clic en Cancelar y la pgina recupera su aspecto
anterior.

Ahora pulsa en hojas de estilos de muestra para abrir el cuadro de dilogo del mismo
nombre. Selecciona Diseo completo: Accesible y despus pulsa el botn Examinar del
cuadro Guardar en para localizar la carpeta del sitio MiWeb dentro de la cual debers
guardar la nueva hoja que por defecto se llama Accessible_Design.css. Por ltimo, pulsa en
Aceptar.


Figura 4.75. Hojas de estilos de muestra.

Como el documento nuevo nunca ha sido guardado antes, Dreamweaver te lo recordar con el
siguiente mensaje, que debers leer y aceptar.

Figura 4.76. Mensaje de alerta del programa.

El nombre de la hoja de estilos CSS externa aparece en el panel Estilos CSS.


Figura 4.77. Hoja de estilos externa.

En vista Diseo, escribe en la ventana del Documento el texto: Utilizacin de un estilo CSS
externo y observa sus propiedades.

Figura 4.78. Estilo CSS externo.

Guarda el documento (Archivo>Guardar como) con el nombre estilos2.

Captulo 5.
Imgenes

Dreamweaver CS4. Captulo 5. Imgenes
Captulo 5. IMGENES
Las imgenes de un sitio Web atraen la atencin de los visitantes y transmiten informacin
inmediata sobre el tema que trata el sitio.
La imagen para la Web es distinta a la imagen para imprimir. En la Web se sigue trabajando
para que las imgenes sigan teniendo el tamao ptimo ms pequeo posible.
Cuando estamos construyendo nuestra Web, el principal problema que nos podemos
encontrar es el tiempo de descarga de nuestra pgina. La insercin de imgenes puede hacer
pesada nuestra pgina y hacer que el usuario desespere en el tiempo de acceso a la misma.
Una forma de optimizar el tiempo de descarga de nuestra Web es disminuir el tamao de un
fichero de imagen. Esto podemos hacerlo disminuyendo las dimensiones de la imagen o su
resolucin.
Las imgenes generalmente se miden en pxeles y para disminuir sus dimensiones deberemos
utilizar programas de edicin de imgenes.

RECOMENDACIN. Si reducimos el tamao de una imagen con Dreamweaver, nos puede dar
la falsa impresin de que la imagen es ms pequea, pero realmente lo nico que hemos
hecho es reducir la forma en que la vemos, el tamao sigue siendo el mismo.

Otra forma de disminuir el tamao del fichero es comprimir las imgenes, pero manteniendo
un equilibrio con su calidad. Debemos tener presente que la informacin que se pierde en la
compresin de una imagen es irrecuperable.

RECOMENDACIN. Deberemos tener la imagen original con la mxima resolucin y trabajar
con una copia de la misma, pues si en algn momento necesitamos editarla nuevamente no
habremos perdido informacin alguna.

5.1. Formatos de archivos de imgenes
Los formatos de imgenes se dividen principalmente en dos categoras: mapa de bits y
vectoriales.
Mapa de bits
El formato de mapa de bits est basado en la informacin contenida en cada pxel de la
imagen. Esta informacin consta principalmente del color y de la posicin de cada pxel
expresada en coordenadas.
Cuanta mayor informacin tengamos de la imagen, es decir cuanto mayor sea el nmero de
pxeles, mayor ser el tamao del fichero que la contiene. Este formato puede representar
imgenes de fotografas, dibujos, ilustraciones, etc.

En este tipo de formato debemos tener en cuenta los cambios de tamao, pues suele haber
prdida de calidad en la imagen, especialmente cuando aumentamos sus dimensiones, pues el
nmero de pxeles es invariable.
Veamos un ejemplo de una imagen realizada con un formato de mapa de bits.

Figura 5.1. Imagen de mapa de bits.

Figura 5.2. Imagen de mapa de bits ampliada.

En los ejemplos anteriores se aprecia una prdida de calidad en la imagen de la figura 5.2 al
aumentar su tamao con respecto a la imagen original, figura 5.1.
Aunque existen formatos muy conocidos de mapa de bits, como por ejemplo BMP, TIFF, etc.
stos no se suelen utilizar para insertar en las pginas Web porque su tamao es
excesivamente grande y retrasara mucho la carga de la pgina.
Los formatos que generalmente se utilizan para las pginas Web son GIF, JPEG y PNG por ser
comprimidos y por tanto ocupar menor tamao. Los formatos GIF y JPEG son los ms
compatibles y pueden verse en la mayora de los navegadores, mientras que PNG es
compatible a partir de las versiones de Internet Explorer 4.0 y Netscape Navigator 4.04.
El formato GIF (Graphic Interchange Format), como su nombre indica, es un formato de
intercambio de grficos y es idneo para visualizar imgenes con grandes reas de color
homogneo, como logotipos, iconos, botones y otras imgenes con colores y tonos uniformes.
El mtodo de compresin est basado en una paleta de 256 colores como mximo, de tal
forma que si pudiramos observar la cadena de nmeros entre 0 y 255 que describen los
colores, podramos comprobar que existen muchos nmero iguales consecutivos,
correspondientes a las zonas ms o menos extensas del mismo color. As, por ejemplo, en vez
de almacenar 300 veces seguidas el color 132, es ms sencillo decir que los siguientes 30o
nmeros son iguales al 132 y para esto se necesitan muy pocos bytes de memoria.

El formato JPEG (Joint Photographic Experts Group) es el mejor para fotografas, texturas o
imgenes con ms de 256 colores. Este formato posibilita un equilibrio adecuado entre la
calidad de la imagen y el tamao de archivo.
El formato de archivo PNG (Portable Network Group) soporta bien tanto las imgenes de
pocos colores como las multicolores. Es compatible con el canal alfa para transparencias. PNG
es el formato de archivo nativo de Fireworks y dichos archivos se deben guardar con la
extensin .png para que Dreamweaver pueda reconocerlos como tales.
Para encontrar el formato ms idneo de la imagen, existen varios programas de edicin de
imgenes como Paint Shop Pro, Adobe Photoshop, Fireworks, el gratuito GIMP, etc. Pero si no
tenemos ninguno de estos programas y tenemos dudas sobre qu tipo de formato utilizar en
nuestra imagen, debemos tener presente que JPEG va bien con todo tipo de imgenes y tiene
un buen nivel de compresin. La desventaja de este formato con respecto a los otros es que no
admite transparencias.

RECOMENDACIN. Haz siempre una copia de la imagen original, pues es imposible recuperar
informacin de una imagen comprimida.

Vectoriales
El formato vectorial est basado en la informacin mediante vectores calculados
matemticamente. El procedimiento que trata la informacin es indicar el punto inicial, el
punto final y el color que hay entre ambos puntos. Este procedimiento es idneo para dibujos
pues la calidad no la pierde ya que si modificamos el tamao, el programa slo tiene que
volver a calcular a partir de los nuevos datos, adems el tamao del fichero ser mucho menor
por tener que guardar menos informacin.
Veamos un ejemplo de imagen realizada en formato vectorial.

Figura 5.3. Imagen vectorial.

Figura 5.4. Imagen vectorial ampliada.
En el ejemplo de la figura anterior no se aprecia prdida de calidad en el aumento de tamao
de la imagen de la figura 5.4 con respecto a la original de la imagen de la figura 5.3.

Este tipo de formato no es aconsejable para fotografas y similares, porque entonces debera
almacenar mucha informacin debido al constante cambio de color en este tipo de ficheros.
Los archivos de formato vectorial no suelen ser aceptados por los navegadores a excepcin de
los realizados en Flash que, gracias a un programa vinculado al navegador (Plug-in), nos
perrmite cargar y visualizar este tipo de ficheros.
5.2. Insertar una imagen
Para insertar una imagen en nuestro documento lo podemos hacer desde el men Insertar >
Imagen,

Figura 5.5. Insertar imagen desde el men Insertar.
desde el panel Insertar, haciendo clic en el botn Imgenes: Imagen, de la ficha Comn,
pulsando en el icono o arrastrando dicho icono desde la ficha Comn directamente al
escenario..

Figura 5.6. Insertar imagen desde el panel Insertar.
Al hacer esto se abre el cuadro de dilogo Seleccionar origen de imagen desde donde
podemos buscar y seleccionar una imagen.

Figura 5.7. Cuadro de dilogo Seleccionar origen de imagen.
En esta ventana nos aparecen por defecto los ficheros con extensiones gif, jpg, jpeg, png y
.psd. Si queremos seleccionar un fichero de imagen con otra extensin, por ejemplo tif, bmp,
etc, deberemos seleccionar en Tipo la opcin Todos los archivos (*.*).
URL nos indica la ruta donde se encuentra la imagen. Esta ruta es relativa a lo que indiquemos
en el cuadro Relativa a:. En este cuadro podemos definir si la imagen es relativa al Documento
o a la Raz del Sitio. Es recomendable que activemos la opcin Documento para no perder el
vnculo en el caso de mover todo el sitio a una ubicacin diferente. Los vnculos y rutas los
trataremos ms detalladamente en el tema siguiente.

Si activamos la opcin Vista previa de imagen, nos aparece la imagen en miniatura as como
sus dimensiones, formato, tamao y tiempo aproximado de descarga.
Al hacer clic en Aceptar, automticamente se abre la ventana Atributos de accesibilidad de la
etiqueta de imagen, si previamente hemos activado dicho cuadro en Preferencias; en esta
ventana podemos teclear un texto alternativo para que los usuarios lo lean cuando pasan el
cursor por encima de la imagen, en el navegador. Deber ser un texto descriptivo de la imagen
y su longitud deber limitarse a 50 caracteres. Tambin podemos rellenar el campo
Descripcin larga, tecleando una ubicacin de un archivo que aparezca cuando el usuario haga
clic en la imagen o en el icono de carpeta para desplazarse hasta el archivo. Este cuadro de
texto proporciona un vnculo a un archivo con el que est relacionado u ofrece ms
informacin acerca de la imagen.

Figura 5.8. Atributos de accesibilidad de la etiqueta de imagen.
Si hacemos clic en Aceptar, la imagen se inserta en nuestro documento. Si hacemos clic en
Cancelar, la imagen se inserta en nuestro documento, pero Dreamweaver no le asocia
atributos o etiquetas de accesibilidad.
Al insertar una imagen en el documento, Dreamweaver genera de forma automtica una
referencia al archivo imagen en el cdigo HTML como en el del siguiente ejemplo:
<img src="Elementos/Imágenes/teatro.jpg" width="1024" height="768">
Para asegurar que la referencia es correcta, el archivo de imagen deberemos tenerlo en el sitio
actual. Si no estuviera, Dreamweaver nos preguntar si deseamos copiar el archivo en el sitio.
Una vez insertada la imagen, al seleccionarla, en el Inspector de Propiedades nos muestra el
archivo de origen de la imagen y sus dimensiones en pxeles. Adems, desde este inspector,
podemos tambin establecer propiedades de la imagen.


Figura 5.9. Inspector de propiedades de imagen.
A veces puede ocurrir, mientras diseamos nuestra pgina, que no tengamos todas las
imgenes que necesitamos. Dreamweaver nos permite insertar un Marcador de posicin de
imagen en el lugar destinado a la imagen que vayamos a colocar posteriormente.
Para insertar un Marcador de posicin de imagen desplegamos el men Insertar > Objetos
de imagen > Marcador de posicin de imagen.

Figura 5.10. Insertar marcador de posicin de imagen.
Se abre el cuadro de dilogo Marcador de posicin de imagen.

Figura 5.11. Cuadro de dilogo Marcador de posicin de imagen.

En este cuadro podemos poner el nombre del marcador, establecer el ancho y la altura que
tendr nuestra imagen, el color que vamos a poner al marcador para hacerlo ms visible y un
texto alternativo para completar la informacin.
Para sustituir el marcador de posicin por la imagen basta con hacer doble clic sobre l y se
abrir el cuadro de dilogo Seleccionar origen de imagen (Figura 5.7).

Ejercicio

El objetivo en este ejercicio ser insertar un marcador de posicin de imagen.

Crea un nuevo documento en blanco (Archivo > Nuevo).

Inserta un Marcador de posicin de imagen (Insertar > Objetos de imagen > Marcador
de posicin de imagen).

En el cuadro de dilogo Marcador de posicin de imagen, indica las siguientes
caractersticas:

o Nombre: templo.
o Ancho: 300 pxeles.
o Altura: 200 pxeles.
o Color: #FFFF99.
o Texto alternativo: Templo Diana.

Figura 5.12. Propiedades del marcador de posicin de imagen.

Haz clic en Aceptar. El marcador de posicin de imagen quedar como muestra el
siguiente ejemplo:

Figura 5. 13. Marcador de posicin de imagen desde vista diseo.

Guarda el documento como imagen1.

5.3. Propiedades de la imagen
Cuando insertamos una imagen y la seleccionamos, el Inspector de Propiedades nos permite
ver y modificar sus propiedades. Si es necesario, para que podamos ver todas las propiedades
de la imagen, debemos hacer clic en la flecha de ampliacin situada en la esquina inferior
derecha.

Figura 5.14. Inspector de propiedades de una imagen seleccionada.
En el cuadro de texto situado bajo la imagen en miniatura podemos establecer un nombre de
modo que pueda hacer referencia a la imagen cuando utilicemos un comportamiento de
Dreamweaver (como Intercambiar imagen) o cuando utilicemos un lenguaje de creacin de
Scripts como JavaScript o VBScript.
Origen: en este cuadro de texto especificamos el archivo de origen para la imagen. En el
icono de la carpeta podemos localizar la ruta del archivo de origen.
Vnculo: en este cuadro de texto podemos indicar un hipervnculo para la imagen. En el
siguiente captulo trataremos como crear vnculos.
Alt: en este cuadro de texto pondremos el texto alternativo que aparecer en lugar de la
imagen. Esto es muy vlido para los navegadores que slo admiten texto o en aqullos
configurados para descargar las imgenes manualmente. En algunos navegadores, este texto
tambin aparece al situar el puntero sobre la imagen.

Tamao de la imagen
Dreamweaver nos permite modificar el tamao de las imgenes. Esta modificacin no se
efecta sobre la imagen sino sobre la visualizacin de la misma, por lo tanto slo
modificaremos las proporciones de la imagen en la pantalla, pero no su tamao real. Para
modificar el tamao real de una imagen necesitaremos un editor de imgenes externo.
Podemos modificar el tamao de la imagen de dos formas:
Arrastrando los manejadores de cambio de tamao que aparecen alrededor de la imagen al
seleccionarla, o

Figura 5.15. Manejadores de cambio de tamao de imagen.
Desde el Inspector de Propiedades, modificando los valores An (Ancho) y Al (Alto) de la
imagen seleccionada. An (Ancho) y Al (Alto) especifican el ancho y el alto de la imagen en
pxeles.
Con los manejadores de tamao, al cambiar la imagen, varan automticamente las
dimensiones de la misma en el Inspector de Propiedades. Para mantener las proporciones de
la imagen, basta con mantener pulsada la tecla Mays mientras manipulamos los
manejadores.
Para recuperar el ancho y el alto originales de una imagen redimensionada, podemos hacer clic
en el botn Restablecer tamao que aparece a la derecha, entre los cuadros An y Al cuando se
han modificado los valores de la imagen seleccionada . Tambin lo
podemos hacer seleccionando Restablecer tamao en el men contextual que aparece al
hacer clic con el botn derecho sobre la imagen.

RECOMENDACIN. Comprueba en el panel del Inspector de Propiedades, que aunque
modifiques desde l las dimensiones de la imagen, el tamao del fichero no vara.


Edicin de imgenes
Dreamweaver nos va a permitir utilizar diferentes programas para editar y modificar las
imgenes.
Para configurar un editor de imgenes externo desplegamos el men Edicin y seleccionamos
Preferencias. Se abre el cuadro de dilogo Preferencias y seleccionamos la Categora Tipos de
archivos / editores.

Figura 5. 16. Preferencias de archivos y editores.
Desde este cuadro podemos seleccionar el editor de imagen con el que deseamos abrir y
editar los archivos grficos. Tambin podemos configurar los tipos de archivo que abre un
editor determinado, seleccionar varios editores de imagen y asignar un editor distinto
dependiendo del tipo de archivo que se trate y seleccionar el origen de Fireoworks, que es el
editor de imagen que se complementa mejor con Dreamweaver, ya que ambos son de la
misma familia de productos.
Por ejemplo, si tenemos como editores Fireworks y Photoshop, podemos indicar a
Dreamweaver que inicie Fireworks cuando deseemos editar un archivo GIF y que inicie
Photoshop cuando sea un archivo JPG o JPEG.
Si deseamos configurar un editor de imgenes externo para un tipo de archivo existente,
llevaremos a cabo las siguientes acciones:
Abrimos el cuadro de dilogo Edicin > Preferencias... y en Categora, seleccionamos
Tipos de archivos/editores.


En el apartado Extensiones, seleccionamos la extensin del archivo para la que deseamos
configurar un editor externo, por ejemplo .png.

Figura 5.17. Seleccionar extensin.

Hacemos clic en el botn Aadir situado encima del apartado Editores. Se abrir el
cuadro de dilogo Seleccionar editor externo.
En este cuadro de dilogo, localizamos la aplicacin que deseamos que se inicie como
editor para este tipo de archivo, por ejemplo Fireworks, si lo tenemos ya instalado en
nuestro equipo pero no configurado como editor principal. Puedes bajarte una versin de
prueba del programa Fireworks de la web oficial de Adobe, e instalarlo en tu equipo para
despus localizar su ejecutable en la ubicacin donde lo hayas instalado, desde este
cuadro de dilogo Seleccionar editor externo.
Hacemos clic en Abrir y volvemos al cuadro de dilogo Preferencias con el nuevo editor
aadido para este tipo de fichero. Si deseamos que sea el editor principal hacemos clic en
Convertir en principal .
Con el mismo procedimiento podemos configurar otros editores adicionales para este tipo de
archivo as como aadir nuevos editores a otros tipos de archivos.
Para aadir un nuevo tipo de archivo a la lista Extensiones, realizaremos los siguientes pasos:
Volvemos a abrir el cuadro de dilogo Preferencias (Edicin > Preferencias...) y en
Categora seleccionamos Tipos de archivo/editores.
Hacemos clic en el botn Aadir situado encima de la lista Extensiones.
Aparecer un cuadro de texto al final de la lista Extensiones en el que escribimos la
extensin del nuevo tipo de archivo, por ejemplo .bmp, (debes colocar el punto delante
para indicar que es una extensin de archivo) y pulsamos la tecla Intro o hacemos clic en
cualquier sitio para quedar escrita la extensin.
Seguimos los pasos descritos anteriormente para seleccionar un editor externo con el que
deseamos iniciar este tipo de archivos.

Figura 5. 18. Aadir nueva extensin de archivo a Preferencias.

Si deseamos cambiar la configuracin del editor, deberemos llevar a cabo las siguientes
acciones:
Abrimos el cuadro de dilogo Edicin > Preferencias... y en Categora seleccionamos Tipos
de archivos/editores.
Seleccionamos el tipo de archivo en la lista Extensiones para ver los editores existentes
para las diversas extensiones, por ejemplo seleccionamos .gif.
En la lista de Editores, seleccionamos el editor deseado y hacemos clic en el botn
Eliminar situado sobre esta lista para eliminarlo o bien hacemos clic en el botn
Aadir para aadir un nuevo editor.
Tambin podemos hacer clic en el botn para cambiar el editor que
debe iniciarse de manera predeterminada.
Desde el Inspector de Propiedades, Dreamweaver introduce unas sencillas herramientas que
nos van a permitir editar o modificar las imgenes :
Editar: desde este botn podemos iniciar el editor de imgenes que hayamos
especificado en las preferencias de editores externos. El editor de imgenes especificado abre
la imagen seleccionada.

Editar configuracin de la imagen: pulsando este botn , abrimos el cuadro de dilogo
Vista previa de la imagen y nos permite optimizar la imagen.
Actualizar desde original: al pulsar el botn podemos actualizar la imagen
seleccionada basndonos en el original de la misma.
Si pulsamos los iconos agrupados en esta barra del mismo inspector de propiedades de la
imagen, podremos llevar a cabo:
Recortar: desde el botn Recorte podemos recortar el tamao de una imagen y
eliminar las reas no deseadas de la imagen seleccionada. Tambin nos permite salvar la
imagen recortada.
Volver a muestrear: este botn nos permite mejorar la calidad de una imagen cuyo
tamao se ha cambiado, aadiendo o quitando pxeles.
Brillo y contraste: con este botn podemos ajustar los valores de brillo y de contraste
de una imagen para corregir su iluminacin.
Perfilar: este botn nos permite ajustar la nitidez de una imagen borrosa.

RECOMENDACIN. Es aconsejable utilizar programas de edicin para las modificaciones que
vayamos a efectuar en las imgenes.

5.4. Imgenes interactivas
Mapa de imagen
Un mapa de imagen es una imagen que se ha dividido en regiones o zonas interactivas.
Cuando el usuario hace clic en una zona interactiva, se realiza una accin, por ejemplo, se abre
un archivo nuevo.
Cuando insertamos un mapa de imagen del lado del cliente, debemos crear una zona
interactiva y, a continuacin, definir un vnculo que se abra cuando el usuario haga clic en esta
zona. En un mapa podemos crear mltiples zonas interactivas, pero formarn parte del mismo
mapa de imagen.
Para crear un mapa de imagen del lado del cliente, seleccionamos la imagen en la ventana de
documento.

En el Inspector de Propiedades tenemos herramientas para crear el mapa de la imagen
seleccionada as como las zonas interactivas de la misma .
En el cuadro de texto Mapa, escribimos un nombre para el mapa de imagen. Si vamos a
utilizar varios mapas de imagen para un mismo documento, deberemos asignar un nombre
distinto a cada uno.
Para definir las zonas interactivas de mapas de imagen podemos seleccionar la herramienta
Zona interactiva rectangular , la herramienta Zona interactiva oval o la herramienta
Zona interactiva poligonal , dependiendo del tipo de zona interactiva que vayamos a
crear. Una vez elegida la herramienta que vamos a utilizar, dibujamos sobre la imagen
seleccionada, con el puntero del ratn la zona interactiva que vamos a insertar. Al hacerlo,
Dreamweaver nos mostrar el siguiente aviso referente a la accesibilidad de las webs para
personas con problemas de visin:

Figura 5.19. Aviso Dreamweaver accesibilidad mapas de imgenes.
Si pulsamos Aceptar, podemos ver el Inspector de Propiedades de la zona interactiva que
hayamos creado.

Figura 5.20. Inspector de propiedades de zona interactiva.
Desde este Inspector de Propiedades podemos seleccionar las opciones de Vnculo, Destino y
Texto alternativo (campo Alt), para la zona interactiva seleccionada. Estas caractersticas las
iremos viendo con ms detalle en los siguientes captulos, a lo largo del curso.
Una vez terminado de definir el mapa de imagen, basta con hacer clic en cualquier parte del
documento para cambiar el Inspector de Propiedades.

Con la herramienta Puntero de zona interactiva podemos seleccionar y mover las zonas
interactivas.
Otras opciones de la imagen disponibles en el inspector de propiedades si tenemos una
imagen seleccionada son:
Espacio V (vertical) y Espacio H (horizontal): son cuadros que nos permiten aadir espacios
a los lados de la imagen. Los valores que pongamos en el cuadro de Espacio V ser el espacio
en pxeles que aadiremos en la parte superior e inferior de la imagen, mientras que en el
cuadro Espacio H, los valores que pongamos, crearan los espacios en pxeles a la izquierda y a
la derecha de la imagen.
Destino: este men desplegable slo est disponible cuando la imagen est vinculada a otro
archivo. En este men figuran los nombres de todos los marcos de un conjunto de marcos
actual y podemos seleccionar el marco o la ventana donde se cargar la pgina vinculada.
Adems podemos seleccionar destinos reservados:
- _blank carga el archivo vinculado en una ventana de navegador nueva y sin nombre.
- _parent carga el archivo vinculado en un conjunto de marcos padre o en la ventana del
marco que contiene el vnculo. Si el marco que contiene el vnculo no est anidado, el archivo
vinculado se cargar en la ventana completa del navegador. La creacin de Marcos la veremos
en un captulo posterior.
- _self carga el archivo vinculado en el mismo marco o ventana que el vnculo. Este destino es
el predeterminado, por lo que normalmente no es preciso especificarlo.
- _top carga el archivo vinculado en la ventana completa del navegador, quitando as todos los
marcos.
Desde el campo Original podemos insertar directamente una imagen original creada con
Fireworks (extensin .png) o con Photoshop (extensin .psd) simplemente pulsando el icono
Sealar archivo y arrastrndolo hasta el archivo correspondiente en el panel de Archivos;
automticamente Dreamweaver la guardar en el formato de imagen ms conveniente y la
insertar en nuestro documento. Si no tenemos el archivo en el panel tambin podremos
localizarlo en nuestro sitio web abriendo el icono Buscar archivo que abrir el cuadro
de dilogo Seleccionar archivo original.
Borde: en este cuadro podemos crear un borde a la imagen. El valor del cuadro se
corresponder con el ancho del borde en pxeles. El color del borde ser el mismo que
tengamos definido para el texto y si la imagen tiene asignado un hipervnculo, entonces el
color ser el mismo que tengan definidos los hipervnculos. Por defecto, las imgenes no
presentan borde.
Alinear: Desplegado, este men nos permite alinear una imagen con el texto, con otra
imagen, con un plug-in o con otros elementos de la misma lnea.

Desde el men desplegable podemos modificar la alineacin de una imagen con respecto a
otros objetos adyacentes. Basta con seleccionar la opcin que deseemos del men.

Figura 5.21. Men desplegable Alinear.
Las opciones son:
Predeterminado suele especificar una alineacin con la lnea de base. (El valor
predeterminado puede variar en funcin del navegador del visitante del sitio.)
Lnea de base e Inferior alinean la lnea de base del texto (u otro elemento del mismo
prrafo) con la parte inferior del objeto seleccionado.
Superior alinea la parte superior de una imagen con la parte superior del elemento ms alto
(imagen o texto) de la lnea actual.
Medio alinea la parte central de la imagen con la lnea de base de la lnea actual.
Texto superior alinea la parte superior de la imagen con la parte superior del carcter ms
alto de la lnea de texto.
Medio absoluta alinea la parte central de la imagen con la parte central del texto de la lnea
actual.
Inferior absoluta alinea la parte inferior de la imagen con la parte inferior de la lnea de
texto (incluidos los trazos descendentes, como en el caso de la letra g).
Izquierda sita la imagen seleccionada en el margen izquierdo, ajustando a la derecha el
texto que la rodea. Si hay texto alineado a la izquierda delante del objeto, los objetos
alineados a la izquierda suelen pasar a una nueva lnea.
Derecha sita la imagen en el margen derecho, ajustando a la izquierda el texto que la
rodea. Si hay texto alineado a la derecha delante del objeto, los objetos alineados a la derecha
suelen pasar a una nueva lnea.
Imgenes de sustitucin
Una imagen de sustitucin o Rollover es una imagen que al pasar el puntero del ratn sobre
ella se transforma en otra imagen.

El Rollover es muy utilizado en los botones o mens que nos llevan a distintas pginas.

Ejercicio

El objetivo en este ejercicio ser la creacin de un Rollover o imagen de sustitucin. Para
realizarlo, vamos a crear previamente dos sencillas imgenes con el Paint.

Desde el men Inicio de Windows, lanza la aplicacin Paint, suele estar en Accesorios. Si no
localizas este programa, ejecuta el comando Inicio > Ejecutar y en el cuadro de dilogo que te
aparece escribe mspaint. Aceptar.
Dibuja un rectngulo de color rojo y sobre l inserta el texto: Imagen de sustitucin, de color
amarillo, tal como se muestra en la figura siguiente:

Figura 5.22. Crear una imagen con Paint.

Guarda la imagen en MiWeb>Elementos>imgenes, como img1.png (Archivo > Guardar
como).
Crea una nueva imagen con el Paint, idntica a la anterior, pero el fondo de color amarillo y
el texto de color rojo.
Guarda la nueva imagen como img2.png. Debes tener dos imgenes parecidas a las
siguientes:

Figura 5.23. img1.png

Figura 5.24. img2.png

NOTA: Si tienes dificultades para crear estas imgenes, te las podrs descargar desde la Mesa
de trabajo del curso. Estn dentro de Materiales de Apoyo>Material necesario para
ejercicios>Ejercicios del Captulo5, y continuar el ejercicio desde aqu.

Crea en Dreamweaver un nuevo documento en blanco (Archivo > Nuevo).

Coloca el cursor donde vayas a insertar el Rollover y selecciona Insertar > Objetos de imagen
> Imagen de sustitucin.
Tambin puedes hacerlo seleccionando Imagen de sustitucin, desde el botn Imagen en la
ficha Comn de la barra Insertar.

Figura 5.25. Seleccionar imagen de sustitucin desde Ficha Insertar.

Se abre el cuadro de dilogo Insertar imagen de sustitucin.

En el cuadro de texto Nombre de la imagen: escribe rollover como nombre de la imagen.
En el cuadro de texto Imagen original: utiliza el botn Examinar... para localizar el fichero
img1.png en la carpeta donde lo guardaste.

En el cuadro de texto Imagen de sustitucin: utiliza el botn Examinar... para localizar el
fichero img2.png en la carpeta donde lo guardaste.

Activa la opcin Carga previa de imagen de sustitucin para que se cargue a la vez que la
pgina y as evitar retrasos por la descarga de la imagen cuando llega el momento de aparecer.

En el cuadro Texto alternativo: si quieres, puedes poner el texto que aparecer al poner el
puntero del ratn sobre la imagen o el que aparecer en lugar de la imagen en el caso que esta
no se pudiera mostrar en el navegador.

En el cuadro de texto Al hacerse clic, ir al URL: puedes crear un hipervnculo a la imagen de
sustitucin, pero por ahora lo dejamos en blanco.

Figura 5.26. Cuadro de dilogo Insertar imagen de sustitucin.

Guarda el documento como imagen2 (Archivo>Guardar como).

Pulsa la tecla F12 para ver el documento en el navegador. Comprueba el efecto al pasar el
cursor sobre la imagen.

Barra de navegacin
Una barra de navegacin es una imagen o un conjunto de imgenes cuya visualizacin cambia
segn las acciones que realice el usuario y se utilizan generalmente como men para navegar
por las pginas y los archivos de un sitio.
Para insertar una barra de navegacin, podemos hacerlo desde el men Insertar>Objetos de
imagen>Barra de navegacin, o seleccionando Barra de navegacin, desde el icono Imgenes
en la ficha Comn de la barra Insertar.

Figura 5.27. Insertar Barra de navegacin.
Se abre el cuadro de dilogo Insertar barra de navegacin.

Figura 5.28. Cuadro de dilogo Insertar barra de navegacin.

En el nuevo cuadro nos aparece de forma predeterminada el elemento sinnombre1. Este
elemento se corresponde con un botn, sinnombre1, al cual debemos adjudicar un nombre
desde el cuadro de texto Nombre de elemento: para nuestra barra de navegacin. Si no
escribimos ningn nombre, Dreamweaver utilizar el nombre de la imagen que le insertemos.
Para cada elemento (botn) que insertemos en nuestra barra de navegacin podemos
especificar cuatro imgenes diferentes, correspondientes a cada uno de los estados del botn:
Imagen arriba: la imagen que aparece en el botn antes de usarse.
Sobre imagen: la imagen que aparece al pasar el puntero sobre el botn.
Imagen abajo: la imagen que aparece al hacer clic sobre el botn.
Sobre mientras imagen abajo: la imagen que aparece al pasar el puntero sobre el botn
despus de haber hecho clic en l.
Podemos utilizar el botn Examinar... para localizar las imgenes que vayamos a utilizar en
cada uno de los estados del botn de la barra de navegacin, aunque no es necesario incluir
imgenes en todos ellos.
En el cuadro Texto alternativo pondremos el texto que aparecer en lugar de la imagen del
botn en el caso que esta no se pudiera mostrar en el navegador.
En el cuadro de texto Al hacerse clic, ir al URL, podemos crear un hipervnculo desde el
botn a un URL. A la derecha de este cuadro de texto, aparece un cuadro desplegable donde
podremos seleccionar en qu ventana se mostrar el documento vinculado.
Podemos activar la opcin Carga previa de imgenes si queremos que las imgenes se
carguen automticamente.
Si queremos que se muestre la imagen del botn pulsado, deberemos activar la opcin
Mostrar Imagen abajo inicialmente.
Podemos insertar ms elementos (botones) a nuestra barra de navegacin haciendo clic en el
botn . Si queremos eliminar algn elemento existente, lo seleccionamos y hacemos clic
en el botn .
Una vez creado los elementos de nuestra barra de navegacin, si queremos cambiar el orden,
podemos utilizar los botones y sobre el elemento seleccionado.
Por ltimo, podemos indicar si queremos que la barra de navegacin se muestre horizontal o
verticalmente desde el desplegable Insertar y si queremos o no Utilizar tablas activando o
desactivando dicha opcin en el cuadro de dilogo.

Captulo 6.
Vnculos

Dreamweaver CS4. Captulo 6. Vnculos
Captulo 6. VNCULOS
Un vnculo, hipervnculo, enlace, hiperenlace, etc. es la misma forma de denominar a un
elemento que al ser pulsado te lleva de una pgina o archivo a otra pgina o archivo.
Podremos asignar vnculos a una imagen, un botn, un texto, etc. La etiqueta HTML asociada a
los vnculos es:
<a href="archivoenlazado">elementodeenlace</a>
6.1. Rutas de vnculos
Cuando vayamos a crear un vnculo, es fundamental conocer la ruta entre el elemento que
establece el vnculo y el archivo vinculado.
Para explicar las rutas de los vnculos vamos a partir de un ejemplo que nos puede ayudar a
tener ms claras las ideas.
Supongamos que trabajo en un edificio de oficinas de varias plantas. Mi direccin completa de
trabajo sera el pas, la provincia, la ciudad, la calle, el nmero, el piso y la letra. Esta direccin
podramos considerarla como una ruta de acceso absoluta.
Mi oficina de trabajo est en la planta 5 y me encuentro en un momento determinado en la
planta 3. Si alguien me pregunta por mi direccin de trabajo, podra indicarle la ruta absoluta
que hemos visto anteriormente, pero no es lgico repetir el pas, la provincia, la ciudad, la calle
y el nmero. Bastara con indicar que trabajo 2 plantas arriba. En este caso le indicara una ruta
de acceso relativa al lugar donde me encuentro actualmente. Pero tambin le podra haber
indicado que trabajo en la planta 5 con lo que le estoy indicando una ruta de acceso relativa a
la ubicacin del edificio.
Visto esto, podemos decir que existen varios tipos de rutas de acceso al definir los vnculos:
Rutas absolutas: son las rutas que nos llevan a un documento externo al sitio y suelen
indicar la direccin completa, es decir, el URL.
Por ejemplo, https://centrovirtual.educacion.es/mentor/inicio.html. El URL (Uniform Resource
Locator) son direcciones nicas que sirven para localizar una pgina Web en Internet.
La ruta absoluta se suele utilizar para vincular documentos situados en otro servidor, sera
como la direccin completa de mi lugar de trabajo del ejemplo anterior.
Aunque tambin se podra utilizar para vnculos del sitio local, no es prctico. Adems, el
problema est en que si cambiamos el sitio de dominio, se romperan todos los vnculos de las
rutas absolutas locales.
Rutas relativas al documento: son las rutas que nos llevan a otro documento de nuestro
sitio, pero partiendo del directorio en el que se encuentra el documento actual. En este tipo de
ruta se omite la parte del URL que es comn a ambos documentos.


En nuestro ejemplo de la oficina, sera indicar que trabajo dos plantas ms arriba, es decir,
sera la ruta relativa al lugar donde me encuentro en ese momento (planta 3). Aqu no hace
falta que indiquemos la direccin completa de mi lugar de trabajo, slo lo que difiere con
respecto a mi localizacin actual.
Qu ocurre si me preguntan por mi lugar de trabajo cuando estoy en la planta 1?
Lgicamente la ruta que indiqu en la planta 3 ya no es vlida, pues mi lugar de trabajo no
est dos plantas arriba. Es decir, al modificar mi localizacin, mi ruta relativa tambin ha sido
modificada.
Igualmente, cuando se mueve un archivo que tengamos vinculado, necesitaremos actualizar
las rutas de sus vnculos. Dreamweaver actualiza los vnculos de forma automtica si tenemos
activada esta opcin en la categora General de Edicin>Preferencias; podemos decidir si
queremos que actualice los vnculos siempre, nunca, o que nos muestre un mensaje.

Figura 6.1. Preferencias de actualizacin de vnculos.
Si nos hemos decidido esta ltima posibilidad, entonces nos preguntar si queremos aceptar
los cambios.
Rutas relativas a la raz del sitio: son las rutas que nos llevan a otro documento de nuestro
sitio desde la carpeta raz. Una ruta relativa a la raz de un sitio comienza por una barra
diagonal (/) que representa la carpeta raz del sitio.

Figura 6.2. Actualizar vnculos.
Siguiendo con nuestro ejemplo, nos basta con indicar que nuestro lugar de trabajo es la planta
5 y esta ruta permanece invariable respecto al edificio, es decir, no importa en la planta que
nos encontremos. Aqu tampoco hace falta indicar la direccin completa.
NOTA. Dreamweaver crea de forma automtica una ruta absoluta mientras no tengamos
guardado el documento en el que estamos trabajando. En cuanto lo guardemos cambia el tipo
de ruta asociado al vnculo.
Para que podamos entender esto y veamos las diferencias entra las rutas relativas al
documento y a la raz del sitio (MiWeb), pongamos un ejemplo prctico.

Figura 6.3. Carpetas y archivos del Sitio local.
En el documento monumentos.htm escribimos las palabras FOTO e INICIO. Desde la palabra
FOTO vamos a crear un vnculo al fichero templo_diana.png y desde la palabra INICIO creamos
otro vnculo al fichero index.htm.

Adems, en el documento index.htm escribimos la palabra MONUMENTOS para crear un
vnculo al fichero monumentos.htm. Con esto podemos comprobar las diferencias de rutas
dependiendo del origen del vnculo y el objeto vinculado
Si los vnculos los creamos relativos al documento, las rutas que debemos indicar para cada
uno de los enlaces ser:
o Desde la palabra FOTO, en monumentos.htm, la ruta ser:
Elementos/imagenes/templo_diana.png. Observa que la ruta desde la palabra foto
indica todo el camino hasta el nombre del fichero vinculado (templo_diana.png) ya
que se encuentra dentro de la carpeta imgenes del directorio Elementos, un
directorio distinto al de monumentos.htm, por lo cual indica la carpeta (imgenes) que
contiene el fichero vinculado (templo_diana.png) y que adems est dentro de otra
carpeta distinta (Elementos).
El cdigo HTML asociado a este tipo de vnculo es <a
href="Elementos/imagenes/templo_diana.png">FOTO</a>.
o Desde la palabra INICIO, en monumentos.htm, la ruta ser: index.html. Simplemente
el nombre del documento hacia el cual se dirige el vnculo, ya que index.htm y
monumentos.htm se encuentran en el mismo nivel.
El cdigo HTML asociado a este vnculo ser <a href="index.html">INICIO</a>.
o Si el fichero vinculado estuviese en un directorio distinto del fichero en el que
realizamos el enlace y la ruta necesaria para localizarlo debiera subir un nivel en la
jerarqua de carpetas, entonces la ruta comenzara por ../ y el cdigo HTML asociado a
ese tipo de vnculo sera: <a href="../index.html">INICIO</a>

o Desde la palabra MONUMENTOS, en index, la ruta ser: monumentos.htm. Observa
que la ruta desde la palabra monumentos es idntica al ejemplo anterior, ya que el
fichero vinculado (monumentos.htm) se encuentra en un directorio idntico al fichero
index.htm.
El cdigo HTML asociado es <a href="monumentos.htm">MONUMENTOS</a>.
Si los vnculos los creamos relativos a la raz del sitio, las rutas de cada uno de los enlaces
ser:
Desde la palabra FOTO, en monumentos.htm, la ruta ser:
/mgas0012/Elementos/imagenes/templo_diana.png. (mgas0012 es el usuario de
ejemplo que tenemos en el sitio MiWeb, el tuyo variar segn el que tengas asignado
por Mentor).
El cdigo HTML asociado a este vnculo es <a
href="/mgas0012/Elementos/imagenes/templo_diana.png">FOTO</a>
Desde la palabra INICIO, en monumentos.htm, la ruta ser: /mgas0012/index.html.
(mgas0012 es el usuario de ejemplo que tenemos en el sitio MiWeb, el tuyo variar

segn el que tengas asignado por Mentor). En este caso, observa que en el vnculo
desde la palabra INICIO slo aparece la barra inclinada (/) para indicar que este fichero
(index.htm) se encuentra en la raz del sitio (ejemplo: mgas0012).
El cdigo HTML asociado a este vnculo es <a href="/mgas0012/index.html">INICIO</a>
Desde la palabra MONUMENTOS, en index, la ruta ser idntica en forma a la
anterior: /mgas0012/monumentos.htm. (mgas0012 es el usuario de ejemplo que
tenemos en el sitio MiWeb, el tuyo variar segn el que tengas asignado por Mentor).
El cdigo HTML asociado a este vnculo es <a
href="/mgas0012/monumentos.htm">MONUMENTOS</a>
Como norma general, para vincular documentos de la misma carpeta deberemos utilizar las
rutas de acceso relativas al documento, mientras que si trabajamos con sitios muy grandes,
que contienen muchas carpetas y subcarpetas, es mejor utilizar las rutas relativas a la raz del
sitio.
Las caractersticas de las rutas absolutas y relativas explicadas anteriormente son vlidas para
todos los elementos que componen una pgina Web, aunque para las imgenes y otros tipos
de archivos multimedia es aconsejable utilizar la rutas relativas al sitio.

RECOMENDACIN. Pasa de vez en cuando a la vista Dividir para que te muestre
simultneamente las vistas cdigo y diseo del documento que ests elaborando y puedas
identificar las etiquetas asociadas a los vnculos y sus rutas.

6.2. Creacin y eliminacin de vnculos
Crear vnculos
La forma ms sencilla que tenemos de crear un vnculo es a travs del Inspector de
Propiedades HTML. Seleccionamos el elemento que vamos a vincular, ya sea una o varias
letras, palabras, prrafos, imgenes, tablas, capas, etc., y despus, en el cuadro de texto
Vnculo del Inspector de Propiedades HTML indicamos cual es el archivo vinculado.
Si el documento es externo a nuestro sitio, escribiremos en el cuadro de texto Vnculo el URL
completo, con indicacin del protocolo utilizado. Por ejemplo http://www.mentor.mec.es.

Ejercicio

El objetivo en este ejercicio ser la creacin de un vnculo externo.

Abre el documento enlaces.html (Doble clic sobre el nombre del fichero en el sitio local
en la panel Archivos).

Si no lo tienes creado, debers crearlo y guardarlo con el nombre enlaces.htm. en tu sitio

MiWeb.

Escribe en maysculas la palabra ISFTIC. Selecciona la fuente Arial, tamao 36 pxeles,
color #000, negrita.

Selecciona la palabra completa (doble clic con el cursor del ratn sobre ella).

Localiza en el Inspector de Propiedades HTML el cuadro de texto Vnculo y escribe en
l la ruta absoluta a http://www.isftic.mepsyd.es/.

Figura 6.4. Crear un hipervnculo externo.

Guarda los cambios del documento enlaces.html y pulsa F12 para visualizar la pgina
en el navegador.

Comprueba en el navegador que ocurre al hacer clic sobre la palabra vinculada
(ISFTIC).

Si cuando vamos a establecer un vnculo, el documento vinculado pertenece a nuestro propio
sitio, podemos hacerlo directamente a travs del botn Sealar archivo . Para ello, basta
con hacer clic en este botn y sin soltar, llevarlo hasta el fichero que deseamos vincular.

Figura 6. 5. Vincular con el botn Sealar archivo.
Tambin podemos utilizar el botn Buscar el archivo para localizar el fichero que
vayamos a vincular y de esta forma asegurarnos de que la ruta est correctamente
introducida.
Al hacer clic en este botn se nos abre el cuadro de dilogo Seleccionar archivo.

Figura 6.6. Cuadro de dilogo Seleccionar archivo.

En este cuadro elegiremos el fichero que vayamos a vincular. Para ello localizamos la carpeta
que lo contiene en el cuadro Buscar en: y en el cuadro de texto inferior Nombre:,
seleccionamos el fichero correspondiente. De forma automtica se nos escribe la ruta del
enlace en el cuadro de texto URL:.
En el cuadro de seleccin Relativa a: indicamos si la ruta ser relativa al Documento o a la
Raz del sitio. Dependiendo de nuestra eleccin, en el cuadro de texto URL aparecer una ruta
u otra.
Tambin podemos establecer un vnculo seleccionando el texto o la imagen que vamos a
vincular y haciendo clic en el comando Insertar>Hipervnculo. Se abrir el cuadro de dilogo
Hipervnculo.

Figura 6.7. Cuadro de dilogo Hipervnculo.
En el cuadro Texto, escribimos el texto que deseamos que aparezca como hipervnculo en el
documento.
En el cuadro Vnculo, escribimos el nombre del archivo de destino del vnculo. Tambin lo
podemos seleccionar a travs del icono de la carpeta Examinar que nos ayudar a
localizar el archivo de destino en nuestro directorio.
En el cuadro Destino, seleccionamos la ventana en la que deber abrirse el archivo. En la lista
emergente figuran los nombres de todos los marcos que hayamos creado en el documento
actual, si se tratase de un conjunto de marcos. Tambin podemos seleccionar los nombres de
destino reservados.
En el cuadro de texto Ttulo, escribimos un ttulo para el hipervnculo el cual aparece al colocar
el cursor sobre el mismo.
En el cuadro de texto Clave de acceso, introducimos un equivalente de teclado (una letra) para
seleccionar el hipervnculo en el navegador.

Por ejemplo, si escribimos la letra a como clave de acceso, al navegar, si pulsamos Alt + a se
nos cargar el archivo vinculado.
En el cuadro de texto ndice de fichas, introduciremos un nmero para el orden de fichas. Es
decir, si en una pgina tengo creados varios vnculos, puedo establecer el orden al que se
pueden acceder, con el tabulador, a estos vnculos, indicando el nmero en este cuadro. Este
atributo es muy vlido para los formularios en Internet.
Tambin podemos acceder al cuadro de dilogo Hipervnculo haciendo clic en el botn
Hipervnculo de la barra Insertar, categora Comn.
Por ejemplo, si creamos un vnculo con los siguientes datos:

Figura 6. 8. Insertar hipervnculo.
El cdigo HTML que le corresponde es:
<a href="index.html" tabindex="2" title="Volver al inicio" accesskey="a"
target="_self">vnculo</a>
Tambin podemos crear vnculos a ficheros del sitio simplemente situndonos sobre el
elemento a partir del cual vamos a crear el enlace y seleccionando, con el botn derecho del
ratn, Crear vnculo. Se abrir el cuadro de dilogo Seleccionar archivo y podremos proseguir
como ya hemos aprendido.

Figura 6.9. Crear vnculo.

Ejercicio

El objetivo en este ejercicio ser la creacin de varios vnculos pertenecientes a nuestro sitio.

Crea, si hay alguno que an no tengas creado, los siguientes documentos en la raz del
sitio MiWeb: index, rutas, monumentos y fiestas. Guarda los cambios.

Abre el documento index (Archivo > Abrir).

Crea una lista sin ordenar, para ello despliega el men Formato, y selecciona
Lista>Lista sin ordenar.


Figura 6.10. Insertar lista sin ordenar

Escribe las siguientes palabras en maysculas: RUTAS, MONUMENTOS, FIESTAS,
ENLACES.

Figura 6. 11. Lista sin ordenar.

Selecciona la palabra RUTAS y desde el Inspector de Propiedades HTML, con el
botn Sealar archivo , a la derecha del cuadro de texto Vnculo, crea un
vnculo al documento rutas.htm.


Figura 6. 12. Seleccionar vnculo con el Sealador.

Selecciona la palabra MONUMENTOS y desde el Inspector de Propiedades HTML,
con el botn Examinar , a la derecha del cuadro de texto Vnculo, localiza el
documento monumentos.htm y seleccinalo para crear un vnculo al mismo. En el
cuadro de texto Relativa a:, selecciona Documento, para crear una ruta relativa al
documento.


Figura 6. 13. Seleccionar vnculo relativo a documento.

Ahora selecciona la palabra FIESTAS y desde el Inspector de Propiedades HTML,
con el botn Examinar , a la derecha del cuadro de texto Vnculo, localiza el
documento fiestas.htm y seleccinalo para crear un vnculo al mismo. En el cuadro
de texto Relativa a:, selecciona Raz del sitio, para crear una ruta relativa a la raz
del sitio.


Figura 6. 14. Seleccionar vnculo relativo a la raz del sitio.

Por ltimo, selecciona la palabra ENLACES y desde el comando
Insertar>Hipervnculo, lanza el cuadro de dilogo Hipervnculo. Observa que
aparece escrita la palabra ENLACES en el cuadro Texto. A la derecha del cuadro de
texto Vnculo, con el botn Examinar , localiza el documento enlaces.htm y
seleccinalo para crear un vnculo al mismo. En el cuadro de texto Relativa a:,
selecciona Documento, para crear una ruta relativa al documento.

Figura 6. 15. Crear vnculo desde el cuadro Hipervnculo.

Guarda los cambios en el documento index.htm y pulsa F12 para visualizar la
pgina en el navegador.

Comprueba en el navegador que ocurre al hacer clic sobre las palabras vinculadas.

RECOMENDACIN. Pasa a la vista Dividir para que te muestre simultneamente las vistas
cdigo y diseo del documento que ests elaborando y comprueba las diferencias de cdigo
HTML que se han generado en los distintos vnculos.

Eliminar vnculos
Para eliminar un vnculo creado en nuestro documento, sin eliminar el elemento que lo
contiene, podemos hacerlo seleccionando previamente este elemento, texto o imagen, y, con
el botn derecho del ratn, ejecutando Quitar vnculo, o borrando directamente el enlace
escrito en el cuadro Vnculo del Inspector de Propiedades HTML.
6.3. Destinos de los vnculos
El destino de los vnculos indica en qu ventana va a ser abierto el documento vinculado y
depender de los marcos, si procede, que hayamos establecido en nuestro documento.
El destino de los vnculos lo podemos establecer desde el cuadro Destino del Inspector de
Propiedades HTML o desde el cuadro de dilogo Hipervnculo que se abre si seleccionamos el
men Insertar>Hipervnculo.
Adems de los nombres de los marcos creados en nuestro documento, en el caso de que
hayamos creado un conjunto de marcos, podemos seleccionar los nombres de destino
reservados:
_blank, carga el archivo vinculado en una ventana de navagador nueva y sin nombre.
_parent, carga el archivo vinculado en el conjunto de marcos padre o en la ventana del
marco que contiene el vnculo. Si el marco que contiene el vnculo no est anidado, el archivo
vinculado se cargar en la ventana completa del navegador. La creacin de Marcos la veremos
en un captulo posterior.
_self, carga el archivo vinculado en el mismo marco o ventana que el vnculo. Este destino es
el predeterminado, por lo que normalmente no es preciso especificarlo.
_top, carga el archivo vinculado en la ventana completa del navegador, quitando as todos
los marcos.
6.4. Otros vnculos
Vnculos a un anclaje con nombre

Cuando estamos trabajando con un documento muy extenso y queremos facilitar el acceso a
varias partes del mismo, podemos establecer vnculos a estas partes. El sistema sera similar al
ndice de un libro. Cuando tenemos un libro y efectuamos una consulta a su ndice buscando
un elemento del mismo, ste nos indica en qu pgina se encuentra dicho elemento. Despus
basta con acceder a esta pgina y localizamos el elemento buscado. Pues el sistema de
vnculos a un anclaje con nombre acta de tal forma que, una vez localizado el elemento que
deseamos en el ndice del documento, al hacer clic con el ratn sobre l, accedemos de
forma automtica a esa parte.
Al igual que en el libro tenemos numeradas las pginas que facilitan nuestra bsqueda, en
estos documentos debemos establecer un anclaje que ser el elemento que nos facilite la
tarea.
Para crear este anclaje, colocamos el cursor en el lugar donde deseamos poner el punto de
fijacin. Hacemos clic en el comando Insertar>Anclaje con nombre o tambin haciendo clic en
el botn Anclaje con nombre de la barra Insertar, categora
Comn. En ambos casos se nos abrir el cuadro de dilogo Anclaje con nombre.

Figura 6. 16. Cuadro de dilogo Anclaje con nombre.
En el cuadro de texto Nombre de anclaje, escribimos un nombre para el anclaje procurando no
dejar ningn espacio en blanco. Hacemos clic en Aceptar para insertarlo en el lugar donde
habamos colocado el cursor. Dreamweaver inserta un icono en el lugar donde hemos
colocado el anclaje y en el cdigo HTML se nos ha creado una etiqueta como por ejemplo sta:
<a name="rutas" id="rutas"></a> . Si no aparece el icono en la pantalla de diseo, deberemos
activar Elementos invisibles en el comando Ver>Ayudas visuales.
Si seleccionamos nuestro haciendo doble clic sobre l en la ventana del documento,
tambin podremos ver sus propiedades y modificarlas en el inspector, como en nuestro
ejemplo.

Figura 6. 17. Propiedades de Anclaje con nombre.

Ahora slo nos queda crear el vnculo al anclaje de nombre creado. Lo primero que debemos
hacer es seleccionar el elemento, texto o imagen, que vamos a vincular. Desde el Inspector de
Propiedades HTML, en el cuadro de texto Vnculo, ponemos el signo # y el nombre del
anclaje. En nuestro ejemplo pondramos #rutas. Debemos tener cuidado al escribir el nombre
del anclaje, pues distingue entre maysculas y minsculas.
Tambin podemos establecer un vnculo con un anclaje con nombre utilizando el botn
Sealar archivo . Basta con seleccionar el elemento que vamos a vincular y desde el botn
Sealar archivo hacemos clic y arrastramos hasta el anclaje con nombre que deseemos.
De forma automtica Dreamweaver pondr en el cuadro de texto Vnculo del Inspector de
Propiedades HTML el signo # y el nombre del anclaje.

Figura 6. 18. Crear un vnculo a un anclaje con nombre desde el Sealador.
Si queremos establecer un vnculo con un anclaje con nombre de un documento distinto, pero
en la misma carpeta que el actual, deberemos poner en el cuadro de texto
nombrearchivo.html#anclaje. Por ejemplo, si hemos creado un anclaje llamado ndice en el
documento rutas.htm y queremos vincularlo desde el documento monumentos.htm, haremos

los siguiente: abrimos el archivo monumentos.htm, seleccionamos el elemento que vamos a
vincular y en el campo Vnculo del Inspector de Propiedades HTML de este elemento,
escribimos rutas.htm#indice.

Ejercicio

El objetivo en este ejercicio ser la creacin de vnculos a anclajes de nombre.

Accede desde tu navegador a la direccin:
https://centrovirtual.educacion.es/mentor/informacion_cursos/informacion.htm?dreamw
eaver_cve.

Selecciona con el ratn toda la informacin del curso. Para ello debes colocar el puntero
del ratn al inicio del documento, hacer clic y arrastrar sin soltar hasta el final del
documento. Suelta el ratn, haz clic con el botn derecho sobre el texto seleccionado y en
el men contextual elige Copiar.

Crea un nuevo documento en Dreamweaver.

Desde la ventana de diseo, haz clic en Edicin > Pegar (o bien pulsa Ctrl+V).

Comprueba que el texto anterior se ha pegado en tu nuevo documento. Selecciona todo el
documento (Edicin > Seleccionar todo o Ctrl+A) y cambia la fuente a Arial desde el
Inspector de Propiedades CSS. Te quedar un documento similar al que muestra la
siguiente figura:


Figura 6.19. Aspecto del documento.

Observa que hay palabras en azul y subrayadas, es debido a que conservan el vnculo que
tenan en el documento original. Deja estos vnculos como estn en tu documento.

Ahora vas a insertar un anclaje con nombre en cada uno de los siguientes apartados:
CONTENIDOS DEL CURSO, MATERIALES, MTODO DE TRABAJO, CERTIFICACIN FINAL.

o CONTENIDOS DEL CURSO: Sita el cursor justo a la izquierda de la palabra
CONTENIDOS. Haz clic sobre el botn Anclaje con nombre
de la barra Insertar, categora Comn. Teclea la
palabra CONTENIDOS en el cuadro de dilogo. Pulsa Aceptar para insertar el
Anclaje con nombre.


Figura 6. 20. Crear un anclaje con nombre.

Observa que Dreamweaver ha insertado el icono del anclaje justo delante de la
palabra CONTENIDOS.

o MATERIALES: Sita el cursor justo a la izquierda de la palabra MATERIALES. Haz
clic sobre el botn Anclaje con nombre de la
barra Insertar, categora Comn. Teclea la palabra MATERIALES en el cuadro de
dilogo. Pulsa Aceptar para insertar el Anclaje con nombre.

o MTODO DE TRABAJO: Sita el cursor justo a la izquierda de la palabra MTODO.
Haz clic sobre el botn Anclaje con nombre de la
barra Insertar, categora Comn. Teclea la palabra METODO (sin tilde para evitar
conflictos de caracteres) en el cuadro de dilogo. Pulsa Aceptar para insertar el
Anclaje con nombre.

o CERTIFICACIN FINAL: Sita el cursor justo a la izquierda de la palabra
CERTIFICACIN. Haz clic sobre el botn Anclaje con nombre
de la barra Insertar, categora Comn. Teclea la
palabra CERTIFICACION (sin tilde para evitar conflictos de caracteres) en el cuadro
de dilogo. Pulsa Aceptar para insertar el Anclaje con nombre.

Coloca el cursor al principio del documento (lo puedes hacer tambin pulsando a la vez
Ctrl + Inicio. Teclea dos veces la tecla Intro para crear unos espacios delante del texto del
documento.

Vuelve a colocarte al principio del documento, escribe NDICE en maysculas y negrita.
Pulsa la tecla Intro para escribir debajo.

Crea una lista sin numerar ejecutando Formato>Lista>Lista sin ordenar con los ttulos de
cada uno de los apartados en maysculas y negrita: CONTENIDOS DEL CURSO,
MATERIALES, MTODO DE TRABAJO, CERTIFICACIN FINAL.


Figura 6. 21. Crear un ndice en el documento.

Crea un vnculo a cada anclaje. Para ello, realizaremos lo siguiente:

o Selecciona CONTENIDOS DEL CURSO que acabas de escribir en el ndice. Pulsa
sobre el botn de la barra Insertar, categora Comn. En el
cuadro de dilogo Hipervnculo que se abre, despliega la lista Vnculo, selecciona
#CONTENIDOS y pulsa Aceptar para crear el vnculo al anclaje.

Figura 6. 22. Crear vnculo a un anclaje con nombre.

o Repite la misma operacin con las palabras del resto de la lista sin ordenar del

ndice, para hacer vnculos desde MATERIALES DEL CURSO al anclaje con nombre
#MATERIALES, desde MTODO DE TRABAJO al anclaje con nombre #METODO, y
desde CERTIFICACIN FINAL al anclaje con nombre #CERTIFICACION.

Guarda el documento como anclajes y comprueba pulsando F12 en el navegador lo que
ocurre al hacer clic sobre las palabras que has vinculado en el listado del ndice.

Ejercicio

El objetivo de este ejercicio ser la creacin de un vnculo a anclaje con nombre desde otro
documento.

Crea un nuevo HTML en Dreamweaver (Archivo>Nuevo).

Escribe la palabra Certificacin y haz doble clic sobre ella para seleccionarla.

En el cuadro de texto Vnculo del Inspector de Propiedades HTML, escribe
anclajes.html#CERTIFICACION.

Observa que anclajes.html es el documento que contiene el anclaje con nombre al que
vas a vincular. Y #CERTIFICACION es el anclaje al que vas a vincular y que has creado en el
ejercicio anterior.

Guarda el documento como anclajes2 y pulsa F12 para comprobar en el navegador lo que
ocurre al hacer clic sobre la palabra que has vinculado.

Vnculos a un correo electrnico
Al igual que especificamos vnculos a otros documentos, podemos hacerlo tambin a
direcciones de correo electrnico. Esto es muy til cuando deseamos que los visitantes de
nuestra Web se pongan en contacto con nosotros.
Para indicar que es un enlace a un correo electrnico deberemos escribir el comando mailto
delante de la direccin electrnica a la que deseamos nos escriban, procurando no dejar
espacios en blanco entre los dos puntos y la direccin de correo. Por ejemplo,
mailto:mgas0012@fresno.pntic.mec.es, donde mgas0012 ser mi login o nombre de usuario.
La etiqueta del cdigo HTML que vincula los correos electrnicos sera, en el caso de que
hubisemos tecleado en un documento la palabra Correo y hubisemos creado un vnculo a
nuestro correo electrnico de muestra, la siguiente:
<a href="mailto:mgas0012@fresno.pntic.mec.es">Correo</a>.
Con esta instruccin estamos indicando al navegador que abra el programa que gestiona el
correo electrnico para crear un mensaje que ir dirigido a la direccin electrnica indicada en
el vnculo.

Como hemos visto anteriormente, al crear un vnculo de correo electrnico desde un texto o
una imagen, basta con escribir el comando mailto delante de la direccin electrnica en el
cuadro de texto Vnculo, del Inspector de Propiedades HTML.

Figura 6. 23. Crear un Vnculo a un correo electrnico.

El vnculo de correo tambin lo podemos crear desde Insertar>Vnculo de correo electrnico
o haciendo clic en el botn Vnculo de correo electrnico de la
barra Insertar, categora Comn. En ambos casos se nos abrir el cuadro de dilogo Vnculo
de correo electrnico.

Figura 6.24. Cuadro de dilogo Vnculo de correo electrnico.

En el cuadro Texto escribimos el texto que vamos a vincular y en el cuadro Correo electrnico
escribimos la direccin electrnica. Observa que en este cuadro no ponemos mailto, ya que al
Aceptar, nos crea automticamente la etiqueta HTML correspondiente.
Con este procedimiento no nos ser posible asignar vnculos de correo electrnico a una
imagen, slo podremos introducir el texto que contendr el vnculo y la direccin electrnica.

Ejercicio

El objetivo de este ejercicio ser la creacin de un vnculo a un correo electrnico desde una
imagen.

Abre en tu navegador la siguiente direccin:
https://centrovirtual.educacion.es/mentor/inicio.html

En la pgina que se abre, localiza la imagen Correo web . Sitate sobre esta

imagen y haz clic con el botn derecho del ratn sobre ella, selecciona Guardar imagen
como y gurdala en la carpeta imagenes de tu sitio MiWeb. Se trata de un fichero de
imagen llamado correo_click.gif.
Si tienes dificultades haciendo esto, tambin puedes descargarte la imagen
correo_click.gif desde Materiales de Apoyo, Material necesario para ejercicios, Ejercicios
del Captulo6.

Localiza en tu sitio el documento index y brelo.

Coloca el cursor debajo de los vnculos que tenas creados en este documento y cntralo
en la pgina.

Desde el comando Insertar>Imagen o desde el botn de la
barra Insertar, categora Comn, accede al cuadro de dilogo Seleccionar origen de
imagen para localizar la imagen que acabas de guardar (correo_click.gif).

Figura 6.25. Insertar una imagen en documento.

Pulsa Aceptar para insertar la imagen en el documento index. Automticamente se abrir
el cuadro de Atributos de accesibilidad de la etiqueta de imagen donde vamos a teclear
Correo web en el campo Texto alternativo y luego pulsaremos Aceptar.

Selecciona la imagen o comprueba que est seleccionada (es suficiente con hacer clic
sobre ella). En el Inspector de Propiedades de la imagen escribe en el cuadro de texto
Vnculo tu direccin de correo electrnico, pero teniendo la precaucin de anteponer

mailto. Por ejemplo, si tu correo es mgas002@fresno.pntic.mec.es, en el cuadro de texto
Vnculo, debers teclear sin espacios: mailto:mgas0012@fresno.pntic.mec.es

Figura 6.26. Crear un vnculo a un correo electrnico desde una imagen.

Guarda los cambios del documento y pulsa la tecla F12. Comprueba en el navegador lo que
ocurre al hacer clic sobre la imagen del correo.

NOTA. Para que el enlace a un correo electrnico funcione correctamente, es necesario que
en el ordenador desde el que accedemos a la pgina Web que contiene este tipo de vnculo,
est configurado correctamente el programa gestor del correo electrnico.


6.5. Formato de los vnculos:
Generalmente, cuando un texto contiene un vnculo, el texto suele aparecer subrayado y
adems suele tener asociados tres colores distintos.
- uno para indicar el vnculo, que suele ser por defecto el color azul, e indica que el vnculo no
se ha visitado an
- otro para indicar el vnculo activo, que suele ser por defecto de color rojo e indica que hemos
hecho clic sobre l, y
- un tercero para indicar el vnculo visitado, por defecto de color violeta.

RECOMENDACIN. No es aconsejable modificar esta identificacin de los vnculos, pues
aunque no es necesario mantenerla, el usuario de nuestra Web puede estar habituado a ello.

Si de todas formas decidimos modificar estas caractersticas del vnculo, podremos hacerlo
accediendo a las Propiedades de la pgina desde el men Modificar, desde el Inspector de
Propiedades CSS del documento activo, o haciendo clic con el botn derecho del ratn sobre
cualquier parte en blanco del documento y seleccionando Propiedades de la pgina, para
despus seleccionar Vnculos (CSS).

Figura 6.27. Cuadro Propiedades de la pgina. Categora Vnculos (CSS).
En la categora Vnculos (CSS) podemos configurar:

Fuente de vnculo: nos permite especificar el tipo de fuente que se debe utilizar para el
texto de un vnculo. Dreamweaver utiliza, de forma predeterminada, la misma combinacin de
fuentes especificada para todo el documento, a menos que aqu especifiquemos otra fuente.

Figura 6.28. Lista de seleccin de Fuente de vnculo.
Tamao: nos permite definir el tamao de la fuente.

Figura 6.29. Lista de seleccin de Tamao de fuente.
Si seleccionamos un valor numrico, tambin nos permite elegir la unidad de medida.

Figura 6.30. Lista de seleccin de unidad de medida.
Color de vnculo: nos permite especificar el color de los vnculos. Este color ayuda al usuario
a distinguir entre el texto normal y los vnculos que sirven de enlace a otras pginas.
Vnculos de sustitucin: nos permite especificar el color que tendr el vnculo cuando se
coloque encima el ratn.
Vnculos visitados: nos permite especificar el color de los vnculos visitados y ayuda al
usuario a distinguirlos de los que an no han sido visitados.
Vnculos activos: nos permite especificar el color de un vnculo al hacer clic sobre l con el
ratn.

Figura 6.31. Especificar color de vnculos.
Para modificar los colores del texto de los distintos estados del vnculo, debemos hacer clic en
el botn Selector de color y seleccionarlo de la paleta de colores o poner su valor
hexadecimal en cada cuadro de texto.
Estilo subrayado: nos permite definir el estilo subrayado que se debe aplicar a los vnculos.
Por defecto, cuando tenemos un texto con un vnculo asociado, el texto aparece subrayado.

Figura 6.32. Lista de seleccin de estilos de subrayado.

Captulo 7.
Tablas

Dreamweaver CS4. Captulo 7. Tablas
Captulo 7. TABLAS
Las tablas son una de la herramientas ms eficaces para la presentacin de textos, imgenes,
objetos, etc. en una pgina Web, pues nos ayudan a mejorar las posibilidades de diseo al
poder distribuir su contenido por toda la pantalla.
Podemos definir una tabla como un conjunto de filas y columnas, cuya interseccin se
denomina celda.
Figura 7.1. Esquema de una tabla.
Aunque Dreamweaver nos va a permitir manipular de forma sencilla la tabla y todos sus
elementos: filas, columnas y celdas, en HTML no se especifican las columnas explcitamente,
por lo que podramos decir que una tabla sera una o varias filas, donde cada una de ellas
constara de una o varias celdas.
Las etiquetas HTML ms bsicas que definen una tabla son:
<table> .... </table> estas etiquetas nos indican el principio y el final de una tabla y entre
ellas se debe desarrollar su contenido.
<tr> .... </tr> estas etiquetas definen el comienzo y el final de cada fila de la tabla.
<td> .... </td> estas etiquetas identifican a cada una de las celdas de cada fila. Entre estas
etiquetas se insertar el contenido de cada celda.
<th> ... </th> son etiquetas de celda que se utilizan para los encabezados. Se pueden definir
los mismos atributos que al resto de celdas, pero hace que el texto aparezca centrado y en
negrita.
Teniendo en cuenta lo anterior, para definir en cdigo HTML la tabla de la figura 7.1.,
deberamos escribir:
<table> (etiqueta que indica el principio de la tabla)
<tr> (etiqueta que indica el principio de la fila 1)

<td> </td> (etiquetas de la celda 1,1)
</tr> (etiqueta que indica el final de la fila 1)
<tr> (etiqueta que indica el principio de la fila 2)
</tr> (etiqueta que indica el final de la fila 2)
</table> (etiqueta que indica el final de la tabla)
7.1. Insertar una tabla
Para insertar una tabla en nuestro documento, colocamos el cursor en el lugar deseado y
elegimos cualquiera de las dos opciones:
A travs del men Insertar>Tabla.
Con el botn Tabla en la categora Comn de la barra Insertar.
En ambos casos se nos abrir el cuadro de dilogo Tabla.

Figura 7.2. Cuadro de dilogo Tabla.
Desde este cuadro de dilogo podemos especificar los atributos de la tabla antes de insertarla:
1. En la seccin Tamao de tabla, especificaremos las opciones siguientes:
Filas: en el cuadro especificaremos el nmero de filas de la tabla.
Columnas: en el cuadro especificaremos el nmero de columnas de la tabla.
Ancho de tabla: desde aqu podemos especificar el ancho de la tabla en pxeles o como
porcentaje del ancho de la ventana del navegador o del elemento que la contiene: tabla, capa,
etc. La diferencia principal es que el ancho en pxeles permanece inalterable y caso que no se
viera todo el contenido desde la pantalla del navegador, deberamos utilizar las barras de
desplazamiento, en cambio, el ancho en Porcentaje indica el porcentaje que ocupar de la
ventana del navegador o del elemento que la contiene y por lo tanto se adaptar a su tamao.
Cuando indicamos un ancho de tabla, en el cdigo HTML se crea una de las siguientes
etiquetas:
<table width="100"> para indicar que la tabla tiene un ancho de 100 pxeles,
independientemente de la ventana del navegador o del elemento que la contenga.
<table width="100%"> para indicar que la tabla tiene un ancho del 100% de la ventana del
navegador o del elemento que la contenga.

Grosor del borde: escribiremos el ancho en pxeles de los bordes de la tabla. Para disear la
tabla sin borde, deberemos escribir el valor 0; en el caso de no escribir nada, la mayora de los
navegadores mostrarn la tabla como si tuviera el valor 1. Dreamweaver mostrar los bordes
de la tabla con puntos cuando el grosor del borde es 0. Si no lo podemos ver, deberemos
activar Bordes de tabla desde Ver > Ayudas visuales.
Cuando indicamos un borde de tabla, por ejemplo de 1 pxel, en el cdigo HTML se crea la
siguiente etiqueta: <table border="1">
Relleno de celda: especificaremos la distancia en pxeles entre el borde de las celdas y sus
contenidos. Si no escribimos ningn valor, por defecto, los navegadores mostrarn como valor
de relleno de celda el 1.
Cuando indicamos un relleno de celda, por ejemplo de 2 pxeles, en el cdigo HTML se crea la
siguiente etiqueta:
<table cellpadding="2">
Espacio entre celdas: indicaremos la distancia de separacin en pxeles entre las celdas de la
tabla. Si no escribimos ningn valor, por defecto, los navegadores mostrarn el espaciado de
celda como si fuera 2.
Cuando indicamos un espacio entre celdas, por ejemplo de 2 pxeles, en el cdigo HTML se
crea la siguiente etiqueta: <table cellspacing="2">
Lgicamente estas etiquetas pueden ir combinadas, indicando las propiedades que va a tener
la tabla que estamos construyendo. Por ejemplo la etiqueta:
<table width="100" border="1" cellspacing="2" cellpadding="2"> nos define una tabla con 100
pxeles de ancho, 1 pxel de borde, 2 pxeles de relleno de celda y 2 pxeles de espacio entre
celdas.
2. En el caso que los usuarios utilicen lectores de pantalla, es recomendable la utilizacin de
un encabezado para la tabla. Los lectores de pantalla leen los encabezados de tabla y ayudan
a los usuarios de los mismos a mantener un seguimiento de la informacin de la tabla. En la
seccin Encabezado, seleccionaremos una de las siguientes opciones:
Ninguno: con esta opcin no utilizamos encabezados para la tabla.
Izquierda: con esta opcin introducimos un encabezado para cada fila de la tabla,
convirtiendo la primera columna de la tabla en una columna de encabezados.
Superior: con esta opcin introducimos un encabezado para cada columna de la tabla,
convirtiendo la primera fila de la tabla en una fila de encabezados.
Ambos: con esta opcin podemos introducir encabezados de columna y de fila en la tabla.
3. En la seccin Accesibilidad, podemos especificar las siguientes opciones:
Texto: si queremos poner un ttulo a la tabla que aparecer fuera de la misma.

Resumen: podemos escribir una descripcin de la tabla. Los lectores de pantalla leen el
texto del resumen pero dicho texto no aparece en el navegador del usuario.

Ejercicio

El objetivo de este ejercicio ser la creacin de dos tablas para apreciar sus diferencias.

Crea un nuevo documento HTML (Archivo>Nuevo...).

Inserta una tabla (Insertar>Tabla) con las siguientes caractersticas:

o 2 Filas y 3 Columnas.
o Ancho de tabla 100 Pxeles
o Borde de 5 pxeles
o Espacio entre celdas 3 pxeles
o Texto: Tabla con borde.

Figura 7.3. Insertar tabla con borde.

Crea otra tabla (Insertar>Tabla), debajo de la anterior, (pulsa dos veces Intro en la
ventana del documento despus de la tabla creada anteriormente) con las siguientes
caractersticas:

o 2 Filas y 3 Columnas.
o Ancho de tabla 100 Porcentaje
o Borde de 0 pxeles

o Espacio entre celdas 10 pxeles
o Texto: Tabla sin borde.

Figura 7.4. Insertar tabla sin borde.

Guarda el ejercicio (Archivo > Guardar) como tabla1.html.

Las tablas debern quedar similares a como se aprecia en la siguiente figura:

Figura 7.5. Vista diseo de tablas en ventana del documento.

simultneamente las vistas de cdigo y diseo del documento que ests elaborando y puedas
identificar las etiquetas asociadas a las tablas que has creado.


7.2. Propiedades de tabla
Propiedades de las tablas
Las propiedades de la tabla se especifican en el Inspector de Propiedades.

Figura 7.6. Inspector de propiedades de tabla.
A travs del Inspector de Propiedades podemos modificar los valores que habamos
especificado al insertar la tabla.
El cuadro desplegable situado justo debajo de Tabla en el inspector es el
identificador de la tabla, en el cual se especifica un nombre o identificador para la tabla.
Filas: indicamos el nmero de filas de la tabla
Cols: indicamos el nmero de columnas que tendr la tabla.
An: indicamos el ancho de la tabla en pxeles o como porcentaje del ancho de la ventana del
navegador.
Rell. celda: indicamos el nmero de pxeles entre el contenido de una celda y su borde.
Esp. celda: indicamos el nmero de pxeles entre celdas contiguas de una tabla.
Alinear: podemos determinar, desplegndolo , dnde aparecer la tabla
en relacin con otros elementos del mismo prrafo, como por ejemplo texto o imgenes.
Las opciones son:
o Izquierda: alinea la tabla a la izquierda, por lo que el texto del mismo prrafo se ajusta
alrededor de la tabla a la derecha.
o Derecha: alinea la tabla a la derecha, por lo que el texto del mismo prrafo se ajusta
alrededor de la tabla a la izquierda.
o Centro: centra la tabla, con el texto encima y/o debajo de la tabla.
o Predeterminado: indica que el navegador debe utilizar su alineacin predeterminada. En
este caso, otro contenido no se mostrar junto a la tabla. Para mostrar una tabla junto a otro
contenido, debemos utilizar la alineacin Izquierda o Derecha.
Borde: especificamos el ancho en pxeles de los bordes de la tabla.

Clase: especificamos la hoja de estilos que deseemos aplicar a la tabla.
La botonera del inspector nos permite:
o Convertir anchos de tabla a porcentaje : establece el ancho de toda la tabla en su
ancho actual como porcentaje del ancho de la ventana de documento.
o Convertir anchos de tabla a pxeles : establece el ancho de toda la tabla en su ancho
actual en pxeles.
o Borrar ancho de columna : elimina todos los valores especificados para el ancho de la
tabla.
o Borrar alto de fila : elimina todos los valores especificados para el alto de fila de la
tabla.
Cuando hayamos introducido un valor en un cuadro de texto del Inspector de Propiedades,
deberemos pulsar el tabulador o la tecla Intro para aplicar el cambio.
Si pulsamos sobre el men del encabezado de la tabla , desplegaremos una lista de
comandos que nos permitirn tambin modificar la tabla:

Figura 7.7. Modificar tabla.
Propiedades de las celdas, filas o columnas
Si seleccionamos una o varias celdas, filas o columnas, el Inspector de Propiedades HTML
cambia con respecto al de la tabla para poder modificar otras opciones, aunque es el mismo
para las celdas, filas y columnas.

Figura 7.8. Inspector de propiedades HTML de celda.


La parte superior del Inspector de Propiedades sirve para configurar las propiedades del texto
que se insertar en la celda, que ya describimos en el captulo del texto, por lo que vamos a
centrarnos en las opciones especficas de los elementos de la tabla.
Horiz: especificaremos la alineacin horizontal del contenido a la izquierda, a la derecha o al
centro. La alineacin predeterminada toma la configuracin del navegador que generalmente
es a la izquierda para celdas normales y al centro para celdas de encabezado.
Vert: especificaremos la alineacin vertical del contenido con la parte superior, media,
inferior o con la lnea de base de la celda. La alineacin predeterminada del navegador
generalmente es al medio.
An y Al: podemos indicar el ancho y el alto de las celdas seleccionadas en pxeles o como
porcentaje del ancho o alto total de la tabla. Para especificar un porcentaje, introduciremos el
smbolo de porcentaje (%) tras el valor. Para que el navegador determine el ancho o alto
apropiado en funcin del contenido de la celda, y el ancho y alto del resto de las columnas y
filas, dejemos dejar el campo en blanco.
No aj.: activando esta opcin impedimos el ajuste de lnea, manteniendo todo el texto de
una celda en una sola lnea. En este caso las celdas se adaptarn para incluir todos los datos a
medida que se introducen o pegan en una celda. Habitualmente, las celdas se expanden
horizontalmente para incluir la palabra ms larga o la imagen ms grande y, a continuacin, se
expanden verticalmente cuando es necesario adaptarse a otros contenidos.
Enc.: aplica a la celda seleccionada el formato de celdas de encabezado de tabla. De forma
predeterminada, el contenido de las celdas de encabezado de la tabla aparecer en negrita y
centrado. La etiqueta HTML para este tipo de celdas es <th> en lugar de <td> como es habitual
para el resto de las celdas.
Fondo: podemos indicar el color de fondo de una celda, columna o fila seleccionndolo con
el selector de color o indicando su valor hexadecimal.
El botn Combinar celdas combina, usando extensores, las celdas, filas o columnas
seleccionadas para crear una sola celda.
El botn Dividir celda divide una celda para crear dos o ms celdas. Slo puede
dividirse una celda cada vez, por lo que este botn estar desactivado al seleccionar ms de
una celda.
Cuando hayamos introducido un valor en un cuadro de texto del Inspector de Propiedades,
deberemos pulsar el tabulador o la tecla Intro para aplicar el cambio.
Al establecer las propiedades de una columna, Dreamweaver modifica los atributos de la
etiqueta <td> correspondientes a cada celda de la columna. Sin embargo, cuando se trata de
una fila, Dreamweaver modifica los atributos de la etiqueta <tr> de la fila en lugar de los
atributos de cada etiqueta <td> de las celdas. Con esto conseguimos un cdigo HTML ms
claro y conciso.

Hemos de tener en cuenta que al aplicar formato a una tabla en vista Diseo, hay un orden de
prioridad de tal forma que el formato de celda tiene prioridad sobre el formato de fila y ste
sobre el de la tabla.
7.3. Operaciones con tablas: Seleccionar
Una vez que hemos insertado la tabla, podemos introducir las modificaciones que deseemos.
Para ello necesitaremos seleccionar el elemento o elementos de la tabla que vayamos a
modificar.
Seleccionar la tabla
Podemos seleccionar una tabla de diversas formas:
Llevamos el puntero del ratn hacia la esquina superior izquierda de la tabla, o a cualquier
punto del borde derecho o inferior de la tabla o al borde de una fila o columna. Cuando el
puntero cambia de forma y se convierte en el icono de cuadrcula de tabla , podemos
seleccionar la tabla con un simple clic.
Hacemos clic en el interior de la tabla, en cualquier celda y, seguidamente seleccionamos la
etiqueta <table> del selector de etiquetas situado en la parte inferior izquierda de la ventana
del documento .
Colocamos el cursor en cualquier celda de la tabla, hacemos clic con el botn derecho del
ratn y seleccionamos Tabla>Seleccionar tabla.

Figura 7.9. Seleccionar tabla desde el men contextual.


Colocamos el cursor en cualquier celda de la tabla y a continuacin seleccionamos
Modificar>Tabla>Seleccionar tabla.

Figura 7.10. Seleccionar tabla desde el men Modificar.
Hacemos clic en el interior de la tabla, en cualquier celda y, seguidamente hacemos clic en
el indicador de ancho de la tabla. Nos aparece un men contextual, del que elegiremos
Seleccionar tabla.

Figura 7.11. Seleccionar tabla desde el indicador de ancho.
Cuando hayamos ejecutado cualquiera de las opciones anteriores para seleccionar la tabla,
nos aparecern los manejadores de seleccin en los bordes inferior y derecho de la tabla.
Desde estos manejadores podremos modificar el ancho y el alto de la tabla.

Figura 7.12. Tabla seleccionada y puntos de control.
Dreamweaver nos muestra el ancho de la tabla y de cada columna cuando est seleccionada o
cuando tenemos colocado el cursor en cualquiera de sus celdas.

Figura 7.13. Visualizacin de anchos de tabla y columna.
Podemos activar o desactivar la visualizacin de los anchos y mens de dos formas:
A travs del men Ver>Ayudas visuales>Anchos de tabla.
Haciendo clic con el botn derecho del ratn sobre cualquier parte de la tabla y
seleccionando Tabla>Anchos de tabla, desde el men contextual.
Si no apareciera el ancho de la tabla o de la columna, significa que la tabla o la columna no
tienen el ancho especificado. En la figura anterior slo aparece el ancho de la tabla porque
est especificado, sin embargo no aparece el de las columnas porque no hemos indicado
ningn valor.
Junto a estos anchos se encuentran unas flechas de men desplegables que nos permiten
acceder de forma inmediata a algunos comandos de las tablas.

Figura 7.14. Men de tabla.
A veces nos aparecen dos nmeros en la tabla y puede deberse a dos causas:
Que al insertar la tabla, hayamos definido el ancho como Porcentaje. En este caso nos
aparecer el valor en tanto por ciento aplicado y entre parntesis el valor en pxeles
.
Que el ancho visual que aparece en la vista diseo no se corresponda con el ancho que
hayamos especificado. Esto nos puede ocurrir si insertamos un contenido en la tabla, como por

ejemplo una imagen, con dimensiones superiores a las especificadas. En este caso nos
aparecer el valor del ancho especificado y entre parntesis el valor del ancho tal como
aparece en la vista diseo.

Figura 7.15. Diferencia entre ancho definido y visualizado.

Cuando nos ocurra este caso, podemos modificar el tamao del contenido de la tabla o hacer
que se cambie el ancho especificado por el real (el que estamos utilizando en la vista diseo);
para ello debemos seleccionar la opcin Igualar todos los anchos del men desplegable.
Seleccionar filas
Podemos seleccionar una fila de diversas formas:
Colocar el puntero del ratn en la primera celda de la fila que vayamos a seleccionar, pulsar
el ratn y mantenindolo pulsado, arrastrarlo hasta la ltima celda de la fila.

Figura 7.16. Seleccionar fila con el ratn.
Situar el puntero del ratn en el borde izquierdo de la fila que vayamos a seleccionar,
cuando cambie de forma y se convierta en una flecha de seleccin, hacemos clic para
seleccionarla.

Figura 7.17. Seleccionar fila con flecha de seleccin.
Colocamos el cursor en cualquier celda de la fila que vayamos a seleccionar y, seguidamente
seleccionamos la etiqueta <tr> del selector de etiquetas situado en la parte inferior izquierda
de la ventana del documento .


Seleccionar columnas
Podemos seleccionar una columna de diversas formas:
Colocar el puntero del ratn en la primera celda de la columna que vayamos a seleccionar,
pulsar el ratn y mantenindolo pulsado, arrastrarlo hasta la ltima celda de la columna.

Figura 7.18. Seleccionar columna con el ratn.
Situando el puntero del ratn en el borde superior de la columna que vayamos a seleccionar,
cuando cambie de forma y se convierta en una flecha de seleccin, hacemos clic para
seleccionarla.

Figura 7.19. Seleccionar columna con flecha de seleccin.
Desde el men desplegable de los anchos de columnas, podemos elegir la opcin Seleccionar
columna.

Figura 7.20. Seleccionar columna desde el men de anchos.

Seleccionar celdas
Para seleccionar una celda, tambin lo podemos hacer de diversas formas:
Presionando la tecla Control (Ctrl), mientras hacemos clic en la celda que vamos a
seleccionar.
Colocando el cursor en la celda que deseamos seleccionar y, a continuacin, ejecutamos el
comando Edicin>Seleccionar todo. Si volvemos a ejecutar Seleccionar todo, estando la celda
ya seleccionada, seleccionaramos toda la tabla.


Colocamos el cursor en la celda que vayamos a seleccionar y, seguidamente seleccionamos
la etiqueta <td> del selector de etiquetas situado en la parte inferior izquierda de la ventana
del documento .
Para seleccionar varias celdas contiguas, el procedimiento ms sencillo es mantener pulsado
el ratn mientras lo arrastramos sobre las celdas que deseamos seleccionar.

Figura 7. 21. Seleccionar celdas contiguas.
Si queremos seleccionar varias celdas no contiguas, deberemos mantener la tecla Control
(Ctrl) pulsada mientras hacemos clic sobre las celdas que deseamos seleccionar.

Figura 7.22. Seleccionar celdas no contiguas.

7.4. Operaciones con tablas: Aadir, Eliminar
Aadir filas o columnas
Para aadir filas o columnas a una tabla, podemos hacerlo de varias formas:
Ejecutando el comando Modificar>Tabla>Insertar fila; se insertar una fila encima de la fila
donde hayamos colocado el cursor. Si ejecutamos el comando Modificar>Tabla>Insertar
columna se insertar una columna a la izquierda de la columna donde hayamos colocado el
cursor.
Si ejecutamos el comando Modificar>Tabla>Insertar filas o columnas se activar el cuadro
de dilogo Insertar filas o columnas.

Figura 7.23. Cuadro de dilogo Insertar filas o columnas.
Este cuadro de dilogo nos va a permitir insertar una o varias filas o columnas en una tabla. En
Insertar indicamos si queremos insertar Filas o Columnas. En Nmero de filas o Nmero de
columnas, escribimos el nmero de filas o columnas que deseamos insertar. En Dnde,
especificamos si las nuevas filas o columnas deben aparecer Sobre la seleccin o Bajo la
seleccin, en el caso de las filas, o Antes de la columna o Despus de la columna, en el caso
de las columnas, con respecto a la celda seleccionada.
Desde el men contextual podemos acceder a las dos opciones anteriores seleccionando
Tabla>Insertar fila, Tabla>Insertar columna o Tabla>Insertar filas o columnas. Este men
contextual nos aparece al hacer clic con el botn derecho del ratn sobre la posicin donde
deseamos insertar la fila o la columna.
Cuando seleccionamos la tabla completa, desde el Inspector de Propiedades HTML
podemos aumentar el valor de Filas para aadir filas o aumentar el valor de Cols para aadir
columnas. Dreamweaver aade las filas al final de la tabla y las columnas a la derecha de la
tabla.

Figura 7.24. Aadir filas o columnas desde el Inspector de Propiedades.
Para insertar una columna, tambin lo podemos hacer desde el men desplegable de ancho
de columna, seleccionando la opcin Insertar columna izquierda o Insertar columna derecha,
con respecto a la columna seleccionada.

Figura 7.25. Insertar columna desde men de anchos.

Eliminar filas o columnas
Para eliminar filas o columnas podemos utilizar varios procedimientos:
Colocamos el cursor en la fila o columna que deseamos eliminar y ejecutamos
Modificar>Tablas>Eliminar fila o Modificar>Tabla>Eliminar columna, segn corresponda.
Tambin lo podemos hacer desde el men contextual, colocando el cursor en el lugar
indicado y haciendo clic con el botn derecho del ratn. Ejecutamos Tabla>Eliminar fila o
Tabla>Eliminar columna, segn el caso.
Seleccionando la fila o la columna completa que deseamos eliminar y, a continuacin,
ejecutamos Edicin>Borrar o pulsamos la tecla Supr.
Seleccionando toda la tabla, desde el Inspector de Propiedades, podemos eliminar filas o
columnas disminuyendo el valor de Filas o de Cols, respectivamente. Dreamweaver eliminar
las filas del final de la tabla y las columnas de la derecha de la tabla.
7.5. Operaciones con tablas: Modificar tamao
Modificar el tamao de la tabla
Lo primero que debemos hacer es seleccionar la tabla completa para que nos aparezca el
Inspector de Propiedades de la tabla.

Figura 7.26. Inspector de propiedades Tabla.
Generalmente se especifica el ancho, An, mientras que el Alto, Al, no contiene valor y, por
tanto, no aparece en el inspector. En el cuadro An podemos especificar los nuevos valores para
el ancho de la tabla, indicando si el nuevo tamao ser en pxeles (px.) o en porcentaje (%).
Al cambiar el tamao de toda la tabla, Dreamweaver modifica el tamao de las celdas
proporcionalmente, excepto de aquellas que tengan un tamao especificado anteriormente. Si
todas las celdas de la tabla tuvieran un tamao definido, al cambiar el tamao de la tabla
tambin lo hara el tamao visual de las celdas en la ventana del documento, aunque no vare
el valor especificado.
Desde el Inspector de Propiedades podemos hacer modificaciones de forma rpida para el
conjunto de elementos de la tabla a travs de los siguientes botones:
Este botn convierte el ancho de la tabla en porcentaje del ancho total de la ventana
del documento, as como el ancho de todas las columnas de la tabla como porcentaje del
ancho de la tabla.

Este botn convierte el ancho de la tabla en su ancho actual en pxeles, as como el
ancho de todas las columnas de la tabla.
Este botn elimina todos los valores especificados para el ancho de la tabla, as como
de las columnas.
Este botn elimina todos los valores especificados para el alto de la tabla, as como de
las filas.
Otro procedimiento para modificar el tamao de la tabla consiste en utilizar los manejadores
de seleccin que aparecen al seleccionarla completamente. Para modificar el ancho de la
tabla, basta con arrastrar el manejador de seleccin de la derecha, para modificar el alto de la
tabla, arrastraremos el manejador de seleccin de la parte inferior y para modificar ambos a la
vez, arrastraremos el manejador de seleccin de la esquina inferior derecha.
Modificar el tamao de una fila
Para cambiar el alto de una fila lo podemos hacer:
Desde el Inspector de Propiedades, seleccionando previamente la fila que vamos a
modificar, ponemos el nuevo valor en el cuadro Al. y pulsamos la tecla Intro.
Tambin podemos modificar el tamao, arrastrando el borde inferior de la fila.
Al arrastrar el borde inferior de una fila, las filas que se encuentran por debajo de ella, son
desplazadas hacia abajo, respetando sus alturas, pero modificando la altura general de la
tabla.
Modificar el tamao de una columna
Para cambiar el ancho de una columna lo podemos hacer de varias formas:
Desde el Inspector de Propiedades, seleccionando previamente la columna que vamos a
modificar, ponemos el nuevo valor en el cuadro An. y pulsamos la tecla Intro.
Tambin podemos modificar el ancho de la columna arrastrando su borde derecho.
Con este procedimiento tambin modificamos el ancho de la columna contigua, por lo que
modificamos los dos anchos, pero el ancho general de la tabla no vara.
Para cambiar el ancho de la columna, sin modificar el ancho de la columna contigua
deberemos mantener la tecla Mays pulsada mientras arrastramos su borde derecho.
7.6. Operaciones con tablas: Dividir, Combinar, Anidar
En ocasiones nos encontramos con la necesidad de incluir dos o ms celdas en una misma fila
o columna o por el contrario, que una celda ocupe el alto de dos o ms filas o el ancho de dos
o ms columnas.

Para conseguir dividir o combinar las celdas de una tabla podemos hacerlo de varias formas.
Divisin de celdas
Para dividir una celda deberemos colocar el cursor en la celda que vamos a modificar y seguir
uno de estos procedimientos:
Ejecutando el comando Modificar>Tabla>Dividir celda.
Desde el Inspector de Propiedades, haciendo clic en el botn Dividir celda . Si no se
muestra el botn, deberemos ampliar el panel del Inspector de Propiedades desde el botn
Expandir .
En ambos casos nos aparece el cuadro de dilogo Dividir celda:

Figura 7.27. Cuadro de dilogo Dividir celda.
En este cuadro de dilogo podemos especificar si la celda debe dividirse en Filas o Columnas,
seleccionando lo que corresponda desde la opcin Dividir celda. Tambin podemos indicar el
Nmero de filas o Nmero de columnas en que debe dividirse la celda, segn el caso.

Figura 7.28. Ejemplo de tabla con celdas divididas en filas y columnas.

Combinacin de celdas
Para combinar las celdas, debemos tener presente que slo podemos hacerlo con aquellas
celdas contiguas formando lnea o rectngulo. Una vez conocido esto, lo primero que debemos

hacer es seleccionar las celdas que vamos a combinar y despus seguir uno de estos
procedimientos:
Ejecutando el comando Modificar>Tabla>Combinar celdas.
Desde el Inspector de Propiedades, haciendo clic en el botn Combinar celda . Si no se
muestra el botn, deberemos ampliar el panel del Inspector de Propiedades desde el botn
Expandir .
Desde Dreamweaver podemos aumentar o disminuir el nmero de filas o columnas que ocupa
una celda de forma ms sencilla, pero con ciertas limitaciones.
Para aumentar el nmero de filas o columnas basta con colocar el cursor en la celda y
seleccionar Modificar>Tabla>Aumentar tamao de fila o Modificar>Tabla>Aumentar tamao
de columna, segn corresponda.
Con este procedimiento combinamos la celda seleccionada con la que tiene debajo en el caso
de Aumentar el tamao de fila o con la celda de su derecha en el caso de Aumentar el tamao
de la columna. Por esta razn, la opcin Aumentar tamao de columna no es vlido para las
celdas que se encuentren en la columna derecha de la tabla y Aumentar tamao de fila no es
vlida para las celdas que se encuentren en la fila inferior de la tabla.
Para disminuir el nmero de filas o columnas basta con colocar el cursor en la celda combinada
y seleccionar Modificar>Tabla>Reducir tamao de fila o Modificar>Tabla>Reducir tamao de
columna, segn corresponda.
Esto slo es vlido para las celdas combinadas.

Figura 7.29. Ejemplo de tabla con distintas combinaciones de celdas.
Cuando combinamos dos o ms celdas, en HTML se crean unas etiquetas para indicar el
nmero de columnas y/o filas que ocupa la celda.
Colspan: indica el nmero de columnas que ocupa la celda. Por ejemplo, la etiqueta <td
colspan="2"> ... </td> indica que la celda ocupa dos columnas.

Rowspan: indica el nmero de filas que ocupa la celda. Por ejemplo, la etiqueta <td
rowspan="2"> ... </td> indica que la celda ocupa dos filas.
A veces podemos combinar varias celdas, cuyo cdigo HTML sera por ejemplo, <td
colspan="2" rowspan="2"> ... </td>. En este caso indicamos que la celda ocupa dos columnas y
dos filas.

Ejercicio

El objetivo en este ejercicio ser la personalizacin de una tabla mediante la modificacin de
sus filas y columnas.

Crea un nuevo documento HTML e inserta una tabla (Insertar>Tabla) de 4 filas y 5
columnas, con 400 pxeles de ancho y 1 pxel de grosor del borde.

Figura 7.30. Insertar tabla.

Para facilitar la localizacin de las celdas, voy a numerar las celdas de la tabla que has
insertado. Lgicamente esto no es necesario que lo hagas, basta con que te sirva de referencia
para identificar la ubicacin de las celdas que vamos a combinar.


Figura 7.31. Identificacin de celdas en tabla.

Selecciona las celdas (1,1), (2,1) y (3,1). Para ello, haz clic en una de ellas (1,1) y arrastra el
ratn sin soltar hasta la ltima (3,1).

Figura 7.32. Seleccionar celdas.

Haz clic con el botn derecho del ratn sobre las celdas seleccionadas y en el men
contextual que te aparece selecciona Tabla > Combinar celdas.

Figura 7.33. Combinar celdas.


Selecciona las celdas 3,2 y 4,2. Para ello haz clic en una de ellas (3,2) y arrastra el ratn sin
soltar hasta la siguiente (4,2). Desde el Inspector de propiedades haz clic en el botn
Combinar celdas . Si es necesario expande el panel para que te aparezca el botn.

Selecciona las celdas 1,3 y 1,4. Para ello haz clic en una de ellas (1,3) y arrastra el ratn sin
soltar hasta la siguiente (1,4). A continuacin combina las celdas desde
Modificar>Tabla>Combinar celdas.

Por ltimo, selecciona las celdas 3,4, 3,5, 4,4 y 4,5. Para ello haz clic en una de ellas (3,4) y
arrastra el ratn sin soltar hasta la ltima (4,5). Observa que se han seleccionado las
cuatro celdas. Desde el Inspector de propiedades haz clic en el botn Combinar celdas
. Si es necesario expande el panel para que te aparezca el botn.

Al final te deber quedar una tabla parecida a la siguiente:

Figura 7.34. Aspecto final de la tabla.

Guarda el documento como tabla2.

Anidar tablas
Anidar tablas es insertar una tabla dentro de una celda de otra tabla. El procedimiento es
bastante sencillo, basta con colocar el cursor en la celda elegida e insertamos la tabla como
hemos visto anteriormente en este captulo.

Figura 7.35. Ejemplo de tabla anidada.
Ordenar tablas
Las filas de una tabla pueden ordenarse en funcin del contenido de una sola columna, e
incluso en funcin del contenido de dos columnas. Las tablas que no se pueden ordenar son
aquellas con atributos colspan o rowspan, es decir, tablas con celdas combinadas.

Para ordenar una tabla, deberemos seleccionarla o hacer clic en cualquiera de sus celdas, y
despus seleccionar Comandos>Ordenar tabla. Se abre el cuadro de dilogo Ordenar tabla.

Figura 7.36. Cuadro de dilogo Ordenar tabla.
Seleccionando en los diferentes desplegables del cuadro podemos establecer lo siguiente:
Ordenar por determina los valores de la columna que se utilizarn para ordenar las filas
de la tabla.
Orden determina si la columna debe ordenarse alfabtica o numricamente, y si el orden
ser ascendente (de la A a la Z, de los nmeros ms bajos a los ms altos) o descendente.
Si la columna contiene nmeros, selecciona Numricamente. Una clasificacin alfabtica
aplicada a una lista de nmeros de uno y dos dgitos ordenar los nmeros como si fueran
palabras (como 1, 10, 2, 20, 3, 30) en lugar de ordenarlos como si fueran nmeros (como 1, 2,
3, 10, 20, 30).
Despus por / Orden establece el orden de una clasificacin secundaria en otra columna.
Especificaremos la columna de clasificacin secundaria en el men emergente Despus
por y el orden de clasificacin secundaria en los mens emergentes de Orden.
El apartado Opciones permite activar:
El orden incluye la primera fila especifica que la primera fila de la tabla debe incluirse en
la clasificacin. Si la primera fila contiene un encabezado que no se debe mover, no
seleccionaremos esta opcin.
Ordenar filas de encabezado especifica que se ordenen todas las filas de la seccin thead
de la tabla (si las hay) siguiendo los mismos criterios que para las filas del cuerpo.
(Observamos que las filas thead permanecern en la seccin thead y seguirn apareciendo
en la parte superior de la tabla, incluso despus de ordenarlas.)
Ordenar filas de pie especifica que se ordenen todas las filas de la seccin tfoot de la tabla
(si las hay) siguiendo los mismos criterios que para las filas del cuerpo. (Observamos que

las filas tfoot permanecern en la seccin tfoot y seguirn apareciendo en la parte superior
de la tabla, incluso despus de ordenarlas.)
No modificar los colores de fila hasta que haya finalizado la operacin de orden
especifica que los atributos de fila de la tabla (como por ejemplo, el color) deben
permanecer asociados al mismo contenido despus de que la tabla sea ordenada. Si el
formato de las filas de la tabla alterna dos colores, no se debe seleccionar esta opcin para
garantizar que la tabla ordenada incluya filas con colores alternos. Si los atributos de fila
son especficos del contenido de cada fila, se debe seleccionar esta opcin para garantizar
que los atributos permanezcan asociados a las filas apropiadas de la tabla ordenada.
7.7. Modos de tablas
Cuando estamos trabajando con tablas, Dreamweaver nos facilita el trabajo con distintos
modos de visualizacin. Generalmente se trabaja como lo hemos hecho hasta ahora, es decir,
en Modo estndar, pero tambin podemos trabajar en Modo de tablas expandidas.
Modo de tablas expandidas
El modo de tablas expandidas aade temporalmente relleno y espaciado de celda a las tablas
de un documento y aumenta los bordes de las tablas para facilitarnos la edicin. Este modo se
utiliza principalmente porque permite seleccionar elementos de las tablas o colocar el punto
de insercin de forma precisa, pero no nos presenta la pgina como quedar exactamente.
Cuando hayamos realizado la seleccin o hayamos colocado el punto de insercin, deberemos
volver al modo estndar para realizar las modificaciones de la pgina.
Para pasar al modo de tablas expandidas desde la vista diseo, pues no lo podemos hacer
desde la vista cdigo, seguiremos uno de los siguientes procedimientos:
Ejecutando Ver > Modo de tabla > Modo de tablas expandidas.
Haciendo clic en el en el botn Ampliada, en la categora Diseo de la barra Insertar, para
activar el modo de tablas expandidas, o pulsando F6.

Figura 7.37. Botn Ampliada de la categora Diseo de la barra Insertar.
Dreamweaver aade relleno y espaciado de celdas a todas las tablas de la pgina y aumenta
sus bordes. En la ventana del Documento, en la parte superior, aparecer una barra
etiquetada Modo de tablas expandidas y a su derecha un vnculo para Salir de este modo.

Figura 7.38. Modo de tablas expandidas de la ventana del documento.

Tambin podemos salir de este modo ejecutando Ver > Modo de tabla > Modo estndar o
bien haciendo clic en el botn Estndar, en la categora Diseo de la barra Insertar.
Dreamweaver regresa al modo estndar.
1.8. Importar y exportar datos de tablas
Puedes importar datos de tabla creados con otra aplicacin y guardados en un formato
de texto delimitado (con elementos separados por tabuladores, comas, dos puntos o puntos y
comas) a Dreamweaver y aplicarles formato de tabla.
Tambin puedes exportar los datos de tabla desde Dreamweaver a un archivo de texto, con el
contenido de las celdas contiguas separado por un delimitador. Se pueden utilizar comas, dos
puntos, puntos y comas o espacios como delimitadores. No se pueden exportar partes de una
tabla, por lo que es necesario exportar la tabla entera en todos los casos.
Importar datos de tabla
Podemos importar datos de tabla de diversas formas:
Ejecutando Archivo>Importar>Datos de tabla.

Figura 7.39. Importar datos de tabla.


Pulsando el icono Importar datos de tabla de la categora
Datos de la barra Insertar.

Desplegando el men Insertar y seleccionando Objetos de tabla>Importar datos de tabla.

Figura 7.40. Importar datos de tabla desde Insertar.

En cualquier caso, se abrir el cuadro de dilogo Importar datos de tabla:


Figura 7.41. Cuadro de dilogo Importar datos de tabla.

En el campo Archivo de datos podremos especificar el nombre del archivo de datos
que deseamos importar; si pulsamos en Examinar, podremos localizarlo en nuestro
equipo.
Si desplegamos Delimitador , podemos seleccionar el
delimitador utilizado en el archivo que estamos importando; deber usarse el mismo
delimitador que se us cuando se guard en nuestro equipo el fichero de datos. En
caso de seleccionar Otro, aparecer un cuadro de texto a la derecha del men
emergente.

En Ancho de tabla , podemos
activar Ajustar a los datos, si deseamos que todas las columnas tengan el ancho
suficiente para contener la cadena de texto ms larga en la columna; o activar
Establecer en, introduciendo un valor de ancho fijo de la tabla en pxeles o como
porcentaje del ancho de la ventana del navegador.

En el campo Relleno de celda podemos especificar el nmero de pxeles entre el
contenido de una celda y los lmites de la misma. En el campo Espacio entre celdas,
determinaremos el nmero de pxeles entre celdas de tablas contiguas, y en el campo
Borde, podemos teclear el ancho en pxeles de los bordes de la tabla.


Si desplegamos Formatear primera fila , podemos
determinar el formato aplicado a la primera fila de la tabla de entre las cuatro
opciones de formatos posibles.
Exportar datos de tabla
Situando el cursor dentro de cualquier celda de una tabla, podemos seleccionar
Archivo>Exportar>Tabla. Se abre el cuadro de dilogo Exportar tabla.

Figura 7.42. Cuadro de dilogo Exportar tabla.
En este cuadro podemos establecer el Delimitador a usar para separar los elementos en el
archivo a exportar y seleccionar en Saltos de lnea, el sistema operativo en el que va a abrirse
el archivo exportado.

Captulo 8.
Marcos

Dreamweaver CS4. Captulo 8. Marcos
Captulo 8. MARCOS
Cuando diseamos un sitio Web, podemos pensar en distribuir la informacin de una cierta
forma. Por ejemplo podemos tener una zona superior de la pgina en la que se muestre por
ejemplo un logotipo, otra zona lateral en la que se incluya un men que enlaza con las
diferentes secciones del sitio Web.
Queremos que estas dos zonas se mantengan fijas en todo el sitio. Adems queremos que el
resto de las pginas del sitio se muestren en la parte central.
Ser solamente esta parte la que cambie segn navegamos por las pginas de nuestro sitio
Web.
Para disear un sitio web, siguiendo modelos similares a estos, podemos utilizar marcos. Por
tanto podemos considerar un marco como una zona de la pgina que puede mantenerse fija
en todo el sitio o bien albergar distintas pginas Web.
La utilizacin de marcos en HTML nos permite al disear una pgina Web dividir el contenido
de la misma en diferentes partes, facilitando su visin ya que, es posible mantener fijas alguna
de estas regiones mientras que otras pueden variar. Por tanto, adems de la funcionalidad de
nuestro sitio Web tambin mejoran su apariencia.
Cada uno de estos marcos individuales va a contener a su vez una pgina HTML, pudiendo
editarse todos los marcos a la vez desde la pgina que los contiene de forma que es posible
contemplar de un solo vistazo el aspecto final que tendr nuestra pgina Web. A modo de
resumen se podra decir que los marcos no son ms que pginas Web contenidas en el interior
de otra pgina Web que las engloba.
8.1. Ventajas y desventajas de los marcos
Entre las principales ventajas del uso de marcos en el diseo de pginas Web podramos
destacar las siguientes:
Cada marco puede disponer, si as lo especificamos al disear nuestra pgina Web, de su
propia barra de desplazamiento, para mostrar su contenido en el caso de que no pueda
visualizarse en su totalidad en la ventana del navegador.
Si en uno de los marcos mostramos imgenes que sirven de vnculo al contenido del marco
central de nuestra pgina Web, dichas imgenes no se cargarn nada ms que la primera vez
que se acceda a la Web, con lo que la velocidad a la hora de visualizarla aumentar.
Como principales desventajas se pueden indicar:
Algunos buscadores no tienen configurados sus motores de bsqueda para que funcionen
correctamente en pginas con marcos, aunque los ms conocidos y utilizados s que tienen
resuelto este problema.
La alineacin de objetos situados en distintos marcos puede llegar a ser complicado en
ocasiones.

Comprobar las opciones de navegacin puede llevar mucho tiempo.
No todos los navegadores son compatibles con el uso de marcos, por lo que algunos
visitantes con discapacidades pueden experimentar dificultades para navegar. Si utilizas
marcos, incluye siempre una seccin noframes (sin marcos) en tu conjunto de marcos para los
visitantes que no pueden verlos. Tambin se puede incluir un vnculo explcito con una versin
sin marcos del sitio.
Al disear la pgina Web en funcin de nuestras necesidades y a la vista de esta lista de
ventajas y desventajas podemos optar por disearla con o sin marcos a nuestro gusto.
8.2. Operaciones con marcos
Crear marcos y conjuntos de marcos
Un marco es una regin de una ventana del navegador Web que puede mostrar un documento
HTML independientemente de lo que se muestre en el resto de dicha ventana.
Un conjunto de marcos es un archivo HTML que va a indicar el nmero de marcos que van a
componer la pgina Web, su ubicacin dentro de la misma e incluso la direccin Web a travs
de la cual se acceder a esa misma pgina.
La forma general de trabajar con marcos se podra resumir en la creacin de una pgina
principal HTML que va a englobar a todos los marcos (a la que podemos denominar conjunto
de marcos), a continuacin la creacin de los marcos que deseemos dentro de esta pgina
principal y por ltimo el alojamiento a su vez de cada uno de ellos en una pgina HTML. Se
debe tener claro que tanto la pgina principal, como cada una de las pginas HTML que se
alojen en los distintos marcos son pginas independientes y como tales deben ser tratadas y
almacenadas. Por ejemplo, si disponemos de una pgina principal con tres marcos: uno
superior, uno lateral y uno central, estaremos trabajando con cuatro pginas HTML
independientes.
Para crear un marco en Dreamweaver basta con abrir un documento ya existente o crear uno
nuevo, a continuacin hacemos clic en la opcin Insertar>HTML>Marcos y dentro de ella
indicamos la posicin donde deseamos aadir el marco dentro de la pgina: izquierda,
derecha, superior, inferior,...:

Figura 8.1. Crear un marco.
Tambin es posible aadir un marco haciendo clic en el icono Marcos dentro del panel
Insertar, categora Diseo, pestaa Estndar, eligiendo el conjunto de marcos que mejor se
adapte a nuestras necesidades:

Figura 8.2. Insertar marcos.

Si ejecutamos Archivo>Nuevo, tambin podemos crear directamente un conjunto de marcos
de entre los diversos de muestra que nos ofrece Dreamweaver, si en el cuadro de dilogo
Nuevo Documento, pulsamos la seccin Pgina de muestra, seleccionamos Conjunto de
marcos en Carpeta de muestra y elegimos el conjunto de que ms se ajuste a nuestras
necesidades.

Figura 8.3. Crear un nuevo conjunto de marcos.
Si decidimos crear un conjunto de marcos utilizando los iconos del panel Insertar y hacemos
clic en una de las opciones que se nos muestran en la categora Diseo, icono , por
ejemplo en la opcin Marco superior , en la pgina Web que estamos
creando aparece una lnea horizontal, indicndonos que se ha creado un marco superior;
adems se abre el cuadro de dilogo Atributos de accesibilidad de la etiqueta marco, en el
que podremos darle un ttulo al marco principal (mainframe) y al marco superior (topFrame)
que acabamos de crear en nuestro nuevo conjunto de marcos.

Figura 8.4. Pgina web con marco superior
En este caso estamos creando un conjunto de marcos sobre el documento actual, es decir uno
de los marcos creados denominado marco principal va a contener dicho documento.
Podemos crear un conjunto de marcos en Dreamweaver con todos los marcos en blanco,
desde el cuadro Nuevo documento, como hemos mencionado antes, es decir, un nuevo
documento totalmente vaco, que es a la vez un conjunto.
Si nos decidimos por esta ltima opcin, Seleccionamos Pgina de muestra, carpeta Conjunto
de marcos en Carpetas de muestra y, a continuacin, seleccionamos uno de los conjuntos que
se nos muestran en la columna Pgina de muestra, de los cuales podemos ver una
previsualizacin a la derecha, tal y como muestra la Figura 8.3.

RECOMENDACIN. Debemos tener claro que antes de poder ver en un navegador nuestra
pgina compuesta por diferentes marcos, hay que guardarlos uno a uno, as como guardar el
conjunto de marcos que los engloba.

Para llevar a cabo esta tarea tenemos que seleccionar cada uno de ellos de forma individual
como veremos en el apartado siguiente y seleccionar la opcin Archivo>Guardar marco. Una
vez realizado esto, aparecer un cuadro de dilogo indicndonos dnde deseamos almacenar
dicho marco en nuestro disco duro y con qu nombre:

Figura 8.5. Cuadro de dilogo Guardar como para un marco.
De la misma forma debemos almacenar tambin el conjunto de marcos, seleccionndolo
como veremos a continuacin en el siguiente apartado, y haciendo clic en la opcin
Archivo>Guardar conjunto de marcos.
Seleccionar marcos
Para seleccionar marcos individuales podemos hacer clic dentro del documento actual en el
marco que se desea modificar o bien pulsar sobre un marco concreto en el Panel Marcos
de Dreamweaver:

Figura 8.6. Panel Marcos.

En este panel es posible:
Seleccionar el conjunto de marcos haciendo clic en la lnea que rodea a todos los marcos
(indicado por una lnea gruesa de color oscuro).

Figura 8.7. Seleccionar conjunto de marcos.
Seleccionar marcos individuales haciendo clic en cada una de las regiones delimitadas por
lneas de color ms claro.

Figura 8.8. Seleccionar un marco individual.
Para poder seleccionar un marco o un conjunto de marcos desde la ventana principal del
documento, en la vista Diseo, haciendo clic en cada uno de ellos es necesario que estn
activas las lneas que los delimitan. En el caso de que no estn activas, podemos activarlas
haciendo clic en Ver>Ayudas visuales>Bordes de marco.

Figura 8.9. Ver bordes de marco.
Tambin es posible modificar marcos que hayamos creado previamente, realizando dentro de
los mismos divisiones a travs del men Modificar>Conjunto de marcos eligiendo
posteriormente cualquiera de las divisiones que se nos muestran.

Figura 8.10. Modificar conjunto de marcos.


Cdigo alternativo para pginas con marcos
A la hora de disear una pgina Web con marcos debemos tener en cuenta que no todos los
navegadores los aceptan o bien que puede que no estn configurados correctamente para
ello, con lo cual no se vern las pginas correctamente. Para solucionar este problema, existe
una etiqueta en HTML denominada noframes que nos va a permitir especificar un cdigo
alternativo para dichos navegadores.
Dicho cdigo alternativo, debera tener el mismo contenido (o al menos lo ms parecido
posible) que nuestra pgina Web con marcos y no debe limitarse simplemente a los mensajes
tipo Su navegador no acepta marcos.
En Dreamweaver hay otra forma de especificar este cdigo alternativo a travs de la opcin
Modificar>Conjunto de marcos>Editar contenido sin marcos.

Figura 8.11. Editar contenido sin marcos.
Una vez hecho esto la ventana que mostraba el documento ahora nos muestra otra ventana
bajo el ttulo Contenido sin marcos en la cual se podr especificar dicho contenido de forma
similar a como haramos con otra pgina HTML:

Figura 8.12. Contenido sin marcos.
En el caso de querer indicar ese contenido a travs de la vista cdigo se especificara entre las
etiquetas de inicio y de fin noframes de la siguiente forma:
<noframes>
.... cdigo HTML alternativo....
</noframes>
8.3. Propiedades de los marcos
Para modificar las propiedades de un marco o conjunto de marcos es necesario seleccionarlo
previamente.
Una vez llevado a cabo este paso previo, podemos modificar las caractersticas del marco o
conjunto de marcos desde el Inspector de Propiedades.
Si este Inspector de propiedades no est visible podemos hacer que sea as desde
Ventana>Propiedades.

Figura 8.13. Propiedades de un conjunto de marcos.
Desde este inspector es posible especificar si deseamos que los marcos aparezcan separados
por una lnea o no, cambiando el valor del campo Bordes ; podemos
indicar adems el color del borde si hemos activado S, en el campo Color del borde
(seleccionndolo desde el selector de colores o indicndolo mediante
un valor hexadecimal) e, incluso el grosor del mismo en el campo Ancho .
En el campo Fila (o Columna segn el marco que hayamos elegido en el campo Seleccin Fila
Col.), podemos indicar:
El tamao deseado para el marco indicando un valor en el campo Valor.
La unidad de medida a la que se aplicar dicho valor. Dicha unidad de medida se especifica
en el campo Unidades y podr ser Pxeles, Porcentaje o Relativo .
Lo normal es especificar un tamao concreto en pxeles a uno de los marcos y al otro asignarle
un valor relativo (indicando un 1 en el campo Valor, lo que equivale a no introducir ningn
valor), para que se ajuste al tamao de la ventana del navegador.
Si lo que se desea modificar son las propiedades de un marco concreto basta con seleccionarlo
tal y como vimos en el apartado anterior e indicar los datos concretos a modificar en el
Inspector de Propiedades:

Figura 8.14. Propiedades de un marco.
En este inspector se van a poder especificar las siguientes propiedades:

Nombre de marco: en l se especificar el nombre que deseamos dar a este marco, con una
particularidad, dicho nombre no podr contener espacios en blanco.
Origen: en este campo indicaremos la pgina HTML que se alojar en este marco. Si hacemos
clic en el icono de la carpeta aparecer el cuadro de dilogo Seleccionar archivo HTML
para buscar el fichero deseado en nuestro equipo.
Bordes: si se desea que entre los marcos aparezcan lneas de separacin se elegir el valor S.
Color borde: si en la propiedad anterior se ha indicado que se desea que las lneas de
separacin sean visibles, aqu podremos especificar el color de dichas lneas. Es posible utilizar
para ello el selector de colores, o bien, indicar un valor hexadecimal.
Desplaz.: en funcin del valor elegido , en la ventana del navegador Web
aparecern barras de desplazamiento, siempre que el documento contenido en el marco
pueda mostrarse completamente o no.
Mismo tamao: si seleccionamos este campo, el usuario no podr modificar el tamao de
los distintos marcos desde el navegador.
Ancho y Alto del margen: indican respectivamente la distancia entre el contenido del marco
y sus bordes izquierdo o derecho en el caso de la propiedad Ancho y superior e inferior en el
caso del Alto del margen.
8.4. Vnculos entre marcos
En el apartado anterior en el que veamos como modificar las propiedades de un marco,
indicbamos que en el campo Origen era posible indicar la pgina que inicialmente contendr
el marco.
Sin embargo, como se ha mencionado a lo largo de este captulo el uso ms habitual de los
marcos es situar una serie de vnculos en uno de estos marcos de manera que al hacer clic en
alguno de ellos, el contenido del marco principal vare.
Para llevar a cabo esta tarea, es necesario indicar, al crear un vnculo, cul ser su destino y en
qu marco se debe mostrar esa pgina de destino. Utilizamos para ellos los campos Vnculo y
Destino del Inspector de propiedades del vnculo.
En el campo Vnculo se indica cul es la pgina que se desea mostrar.

En el campo Destino es posible especificar si queremos mostrar la pgina indicada en el
campo Vnculo, dentro de uno de los marcos definidos en la propia pgina Web o no
. (En la imagen hay dos marcos especificados, mainframe y topFrame)
Adems de los posibles destinos predeterminados de todo hipervnculo podemos seleccionar
tambin:
_blank: muestra el documento vinculado en nueva ventana del navegador,
_parent: muestra el contenido del documento indicado en el conjunto de marcos padre,
_self: es la opcin predeterminada del sistema y abre el contenido del documento vinculado
en el propio marco donde se encuentre el vnculo y
_top: muestra el documento vinculado en la ventana actual del navegador, con lo que
desaparecern todos los marcos.
Aparecen tambin, como hemos visto en la imagen, los nombres de los marcos existentes en
la pgina Web que estamos creando.
El equivalente en cdigo HTML al campo Destino en el cual indicar en qu marco mostrar el
documento vinculado es el parmetro target, dentro de la etiqueta correspondiente al vnculo,
por ejemplo.
<a href="http://www.mipagina.com" target="_blank"> Enlace</a>

Ejercicio

El objetivo de este ejercicio ser la creacin de una pgina Web que contenga tres marcos:
uno en la parte superior de la pgina donde incluiremos un logotipo y el ttulo de nuestra Web,
otro en el lateral izquierdo de la pgina donde incluiremos enlaces a diferentes pginas web y
el tercer marco lo situaremos en el centro de la pgina que contendr el contenido principal
de nuestra Web.

Crea una pgina bsica de HTML (Archivo>Nuevo).

Crea los marcos de los que se va a componer la pgina desde la barra de mens de la
aplicacin Insertar>HTML>Marcos. A continuacin selecciona los distintos marcos a
aadir: superior, izquierda, O bien, cralos usando la barra Insertar, categora Diseo,
Marcos, seleccionando los marcos a aadir. Esta ltima opcin es la ms rpida y cmoda,
ya que te va a permitir crear los tres marcos de una sola vez si haces clic en el icono Marco
superior e izquierdo anidado.


Figura 8.15. Insertar conjunto de marcos.

En el marco lateral se incluirn varios enlaces cuyo contenido se deber mostrar en el
marco central de la pgina. Para llevar a cabo esta tarea selecciona el marco izquierdo a
travs del panel Marcos situado en la parte derecha del documento actual haciendo clic
en el recuadro correspondiente a dicho marco (si no est activo dicho panel, lo puedes
activar a travs del men Ventana>Marcos).

Figura 8.16. Seleccionar marco izquierdo desde el panel Marcos.


Inserta en el marco izquierdo el texto ENLACES OFICIALES, a modo de ttulo.

Crea los siguientes enlaces mediante el men Insertar > Hipervnculo:

o Enlace a la web del ISFTIC con el Texto ISFTIC; como Vnculo escribe
http://www.isftic.mepsyd.es/, como Destino selecciona el marco central o
mainFrame, y como Ttulo, indica Web del ISFTIC.

Figura 8.17. Configurar hipervnculo.

o Enlace al Aula MENTOR, con el Texto Aula Mentor; como Vnculo escribe
https://centrovirtual.educacion.es/Visitas/inicio.html, Destino mainFrame o
marco central; Ttulo, Web del Aula Mentor.
o Enlace a la web del Ministerio de Educacin, con el Texto Ministerio de Educacin;
como Vnculo escribe http://www.mepsyd.es/portada.html, Destino mainFrame o
marco central; Ttulo, Web del Ministerio de Educacin.

En el marco superior inserta una tabla de 616 pxeles de Ancho con Borde 0, con dos
columnas y una sola fila, tal y como hemos visto en el captulo anterior.

En la primera columna inserta la imagen (Insertar > Imagen) correspondiente al logotipo del
Ministerio de Educacin. Para obtener esta imagen debes acceder con tu navegador a
http://www.mepsyd.es/portada.html, localizar la imagen que vers en la esquina superior
izquierda de la web, hacer clic sobre ella con el botn derecho del ratn y seleccionar Guardar
imagen como. Gurdala dentro de la carpeta imagenes de MiWeb; se llama escudo-
ministerio.gif. Desde ah, puedes insertarla en la tabla.
Si tienes dificultades localizando la imagen, tambin la tienes disponible para descargar desde
Materiales de Apoyo, Material necesario para ejercicios, Ejercicios del Captulo 8.

En la segunda columna aades un texto, como por ejemplo: Pgina web creada con marcos.

Guarda todo lo creado hasta ahora (Archivo>Guardar todo). Observa que el primer nombre
que pide es el de la pgina que contiene los marcos, el conjunto de marcos, es decir la pgina
que contiene el resto de marcos. Despus ir pidiendo el nombre de las dems pginas, cada
una correspondiente a un marco. Para identificar la pgina que vas a guardar en cada
momento observa en la vista diseo de Dreamweaver que aparece seleccionada.

Estos son los nombres que vas a dar a las pginas:
o Al conjunto de marcos: marcos.html
o Al marco central: principal.html
o Al marco izquierdo: menu.html (sin tilde)
o Al marco superior: superior.html

Recuerda que no es recomendable usar tildes ni caracteres especiales en los nombres de
ficheros y carpetas para que se puedan leer correctamente en todas las plataformas y
navegadores, as como dejar espacios en blanco en dichos nombres.

El aspecto que presentar tu pgina hasta ahora deber ser similar a ste:

Figura 8.18. Aspecto de la pgina web creada con marcos.

Ahora, para distinguir los marcos superior e izquierdo, les vamos a asignar un color de fondo
distinto al del marco principal.

Si habas cerrado tu trabajo, abre las pginas alojadas en el marco superior e izquierdo, es
decir, superior.html y menu.html respectivamente, desde el panel Archivos.

En el Inspector de Propiedades haz clic en el botn Propiedades de la pgina
. Se abre el cuadro de dilogo Propiedades de la pgina con la
categora Apariencia (CSS) seleccionada. En el campo Color de fondo teclea el color #006699 a
las dos pginas; pulsa Aplicar y luego Aceptar.


Figura 8.19. Color de fondo de pgina.

Si al pulsar Aceptar no ves el color de fondo aplicado en la vista Diseo, no te preocupes, pulsa
Vista en vivo para ver como quedara tu pgina en un navegador, y en esta
vista s vers el nuevo color de fondo.

Realiza los cambios que ms te gusten para el formato de los textos, pero que se puedan ver
correctamente en la pgina. Por ejemplo te puede quedar como muestra la siguiente figura:

Figura 8.20. Aspecto final de la pgina creada con marcos.

Guarda los cambios y pulsa F12 para ver la pgina en tu navegador. Prueba los enlaces que

has creado en el marco izquierdo.

Captulo 9.
Formularios

Dreamweaver CS4. Captulo 9. Formularios
Captulo 9. FORMULARIOS
Los formularios en HTML permiten a los visitantes de una pgina web una cierta interaccin,
permitindoles enviar o recibir informacin segn el tipo de formulario.
Esto se consigue gracias a la adicin de campos de entrada/salida a la pgina Web
denominados campos de formulario. Los hay de muy diferentes tipos: campos de texto,
botones, casillas de verificacin, botones de opcin, etc. stos permitirn al usuario de la web,
rellenar dichos campos o seleccionar entre las diferentes opciones disponibles y pasar toda
esta informacin al servidor.
Todos estos campos se deben incluir entre las etiquetas <form> y </form> de inicio y fin de
formulario respectivamente (Dreamweaver se encargar de crearlas cuando le digamos que
queremos insertar un formulario en nuestra pgina HTML).
Cuando el usuario, despus de hacer clic en el botn del formulario, enva la informacin al
servidor, en l se procesan los datos, y si debe haber una respuesta, se genera una nueva
pgina HTML con los datos correspondientes que se devuelve de nuevo al navegador desde el
que se origin la peticin. Este procesamiento de datos en el servidor no se realiza con HTML
sino con otro tipo de lenguajes denominados lenguajes de servidor como pueden ser: PHP,
ASP, CGI,
9.1. Crear formularios
Para crear un formulario en Dreamweaver slo tenemos que crear un nuevo HTML como ya
hemos aprendido en captulos anteriores. Despus, situamos el cursor en el punto del
documento donde queramos insertar el formulario, desplegamos el men Insertar>Formulario
y seleccionamos Formulario.

Figura 9.1. Insertar Formulario.

Dicho formulario se identifica en la vista Diseo de la pgina web, mediante un cuadro de
trazos discontinuos de color rojo.

Figura 9.2. Formulario en la vista diseo de un documento.

RECOMENDACIN. Si no observas el cuadro que identifica el formulario puedes activarlo
desde el comando Ver > Ayudas visuales > Elementos invisibles.

Para modificar las propiedades del formulario que acabamos de crear, slo hay que
seleccionarlo, bien haciendo clic en el contorno de trazos antes mencionado, o haciendo clic
en la etiqueta form en el selector de etiquetas situado en la parte inferior de la ventana y
especificar los datos concretos relativos al formulario en el Inspector de Propiedades.

Figura 9.3. Propiedades de un formulario.
Las propiedades que podemos modificar son:
Nombre del formulario: aqu debemos escribir un nombre significativo para identificar al
formulario dentro del cdigo HTML.
Accin: indicamos qu programa o pgina HTML debe ejecutar el formulario al interactuar
con el servidor, por ejemplo al pulsar un botn de envo de datos de formulario.
Por ejemplo, si indicamos como destino una pgina HTML hay que especificar la ruta completa
de la forma: http://www.mipagina.com/index.html
Si por el contrario deseamos ejecutar un programa escrito con cualquier lenguaje de
programacin web, por ejemplo PHP, deberemos especificar el nombre de dicho programa y
en el caso de ser necesaria la ruta completa donde se encuentra dicho programa alojado, de la
siguiente forma: /php/recoger_datos.php
Mtodo: aqu seleccionamos cmo se pasarn los datos del formulario al servidor. En este
caso podemos especificar dos posibles valores :

GET: este mtodo lo utilizaremos para pasar los datos del formulario al servidor utilizando el
URL de la barra de navegacin segn el formato:
http://www.nombre_pagina.es?nombre_campo1=valor_campo1&nombre_campo2=valor_ca
mpo2&...... es decir, en primer lugar la direccin completa de la pgina HTML donde est
alojado nuestro formulario, a continuacin el smbolo ?, y por ltimo parejas de nombres de
campos con sus valores correspondientes separados por el smbolo &.
Supongamos que nuestro formulario alojado en http://www.miweb.com, tiene dos campos,
uno llamado nombre y otro apellidos, cuando el usuario rellene los campos y haga clic en
enviar los datos mediante el botn dentro de ese formulario, este mtodo aadira los valores
introducidos al URL de la siguiente forma:
http://www.miweb.com?nombre=Antonio&apellidos=Lpez
A la hora de seleccionar este mtodo se deben tener en cuenta dos puntos importantes:
- El primero y ms importante es que al mostrar todos los datos del formulario a travs de la
URL, dichos datos son totalmente visibles por lo que si no queremos que sea as (supongamos
un formulario donde se introduzcan contraseas, datos bancarios,...) ste mtodo no ser el
ms adecuado.
- Otro aspecto a tener en cuenta es que los URL admiten como mximo 8.192 caracteres, con
lo cual si nuestro formulario contiene muchos campos, o bien si los datos introducidos en cada
uno de estos campos tienen una longitud muy grande, es posible que se sobrepase este lmite
y por tanto los datos no se enven completamente, pudiendo quedar algunos de ellos
cortados.
POST: al contrario que el mtodo citado anteriormente, POST no utiliza el URL para enviar los
datos del formulario, sino que los incluye en la peticin HTTP del formulario de forma
transparente al usuario. Este mtodo soluciona los dos problemas antes mencionados con el
mtodo GET, ya que, los datos enviados no son visibles en ningn momento para el usuario y
adems en este caso no existen limitaciones de tamao de ningn tipo.
La eleccin del mtodo de envo de datos queda a nuestra eleccin en funcin de nuestras
necesidades y preferencias al disear el formulario.
Dest: en el campo Destino, podemos especificar dnde queremos que se ejecute los datos
mostrados por el archivo indicado en el campo Accin, en una ventana nueva sin nombre
(opcin _blank), en la ventana padre de la que est mostrando el documento actual (_parent),
en la misma ventana que contiene el formulario que ha realizado el envo del formulario
(opcin _self) o en la ventana actual pero cubrindola por completo (eligiendo la opcin _top).
Tipo de codificacin: este campo nos sirve para especificar el formato de los datos que se
van a mostrar en la pgina (MIME). El explorador utiliza este atributo para codificar de forma
correcta la informacin que se muestra en el servidor. En funcin del valor que se asigne a
este atributo la informacin se mostrar de una forma u otra, por ejemplo si el valor es
text/plain la informacin se enviar como texto plano, legible y sin codificar.

El valor predeterminado en los formularios de tipo POST es application/x-www-form-
urlencode.
Para aquellos formularios que contengan campos de tipo fichero es necesario utilizar el
mtodo POST, seleccionando el valor multipart/form-data para subir los ficheros desde el
navegador al servidor.

Figura 9.4. Desplegable Tipo de codificacin de propiedades de formulario.
Una vez realizado el envo de la informacin lo ms usual es que algn programa escrito en un
lenguaje del lado del servidor tipo PHP, ASP, recoja dicha informacin, realice algunas
operaciones con ella y la presente en pantalla con algn formato concreto; tambin es posible
que dichos lenguajes de programacin interacten con bases de datos, sin embargo este tipo
de programacin va un paso ms all de lo que estamos viendo en este curso y, por tanto, no
procede en estos momentos entrar en detalle con dichos lenguajes.
Sin embargo se menciona porque en la mayor parte de los casos en los que se trabaje con
formularios se trabajar tambin con este tipo de lenguajes de programacin.
Podemos establecer la diferencia entre las dos partes que entran a formar parte de un
formulario: lenguaje HTML y lenguajes del lado del servidor. El lenguaje HTML lo utilizaremos
para disear el aspecto visual del formulario, es decir, lo que el usuario ve cuando accede a
una pgina Web que contiene un formulario y forma parte del contenido de este curso. Los
lenguajes del lado del servidor se utilizan para el procesamiento y posterior tratamiento de la
informacin que es enviada desde estos formularios. Estos lenguajes se estudian en otros
cursos del Aula Mentor (por ejemplo el curso de PHP).
Para ilustrar la diferencia existente entre utilizar el mtodo GET o el mtodo POST a la hora de
enviar informacin a travs de un formulario vamos a ver el siguiente ejemplo.
Partimos de un formulario con tres campos de texto de distinto tipo y que se van a llamar
respectivamente campo1, campo2 y campo3 y que van a contener los valores contenido1,
contenido2 y contenido3. Dicho formulario es el que se muestra en la siguiente figura:

Figura 9.5. Ejemplo de un formulario.

Suponiendo que la pgina destino de nuestro formulario es la pgina del Ministerio de
Educacin (http://www.mepsyd.es), si utilizamos el mtodo POST para el envo de datos a
travs de este formulario, el contenido de la barra de navegacin sera:
http://www.mepsyd.es.
Mientras que si utilizsemos el mtodo GET el contenido sera:
http://www.mepsyd.es/?texto1=contenido1&texto2=contenido2&texto3=contenido3&Submit
=Enviar
Como se observa claramente con el mtodo GET la informacin enviada est expuesta a la
vista de cualquier usuario, con lo cual, si dicha informacin fuese confidencial este mtodo no
podra ser utilizado.
Cuando insertamos un formulario en la vista diseo de Dreamweaver, el cdigo HTML que se
genera sera el siguiente:
<form action="" method="" name="" target="" id=" ">

</form>
Este cdigo est situado en el cuerpo de la pgina HTML, es decir, entre las etiquetas <body> y
</body>. Adems, todos los elementos que se quieran insertar en el formulario deben ir
lgicamente entre las etiquetas de inicio y fin del formulario: <form> y </form>.

En el interior de la etiqueta de inicio de formulario es donde se deben indicar todos los
parmetros que se quieran especificar para el formulario (parmetros que hemos visto con
anterioridad) y que iran entre las comillas. Ms adelante veremos algunos cdigos ms
concretos.

simultneamente las vistas cdigo y diseo del documento y puedas identificar las etiquetas
asociadas a los formularios.

Ejercicio

El objetivo de este ejercicio ser la creacin de un sencillo formulario.

Crea un nuevo HTML desde Archivo>Nuevo.

Desde el panel Insertar, categora Formularios, inserta un formulario en tu nuevo
documento.

Figura 9.6. Insertar Formulario desde panel Insertar.

Selecciona el formulario que acabas de crear haciendo clic en el recuadro que lo
representa para poder modificar sus propiedades desde el Inspector de Propiedades con
los siguientes datos:
o Nombre del formulario: formulario1
o Accin: http://www.mepsyd.es
o Mtodo: POST
o Dest: _blank (para que la pgina destino se abra en una ventana nueva).


Figura 9.7. Propiedades de formulario1.

Guarda la pgina HTML que contiene el formulario (Archivo>Guardar como...) en MiWeb
con el nombre formulario1.html.

El aspecto final del formulario que hemos creado debe ser el siguiente:

Figura 9.8. Aspecto final de formulario1.html

El cdigo HTML que ha generado este formulario es:
<form action="http://www.mepsyd.es" method="post" name="formulario1" target="_blank"
id="formulario1">
</form>
Un detalle a tener en cuenta tambin en los formularios es el del envo de correos electrnicos
a travs de formularios, pues su inclusin no garantiza la recepcin de los mismos.
Navegando por Internet encontraremos pginas con formularios, que despus de rellenar una
serie de datos, debemos hacer clic sobre un enlace que nos permitir enviar un correo
electrnico (normalmente se utiliza para enviar consultas, quejas, al creador de la pgina, o
al propietario de la misma). Al hacer esto se abrir el gestor de correo electrnico
predeterminado que tengamos instalado en nuestro ordenador para que escribamos el texto y
enviemos el correo. Sin embargo, si no hay configurada previamente una cuenta de correo
electrnico en este equipo, el correo nunca llegar a su destino, puesto que no sabr qu
camino seguir (en trminos tcnicos no sabe cul es el servidor POP a utilizar para realizar el
envo).
Para solucionar este problema existe otro camino, y es utilizar lenguajes de programacin
como PHP que gestionen el envo de manera transparente al usuario, de forma que ste, al
hacer clic en un botn que se presente en la pgina, automticamente enviar el correo
electrnico a su destinatario. Pero, como hemos dicho anteriormente, no es un tema a tratar
en este curso.


9.2. Objetos de formulario
Una vez que hemos detallado las propiedades que debe tener nuestro formulario, el siguiente
paso es darle contenido incluyendo los campos que van a componerlo.
Veremos a continuacin las posibilidades de las que disponemos a la hora de aadir campos al
formulario, as como sus distintas propiedades.
Para aadir objetos dentro de un formulario existen dos mtodos, podemos hacerlo a travs
de los mens Insertar>Formulario>... donde en el men desplegable mostrado podemos
elegir cualquier objeto de entre todos los que tenemos disponibles: campos de texto,
botones,...

Figura 9.9. Insertar objetos de formulario.
El otro mtodo disponible para aadir objetos de formulario es a travs del panel Insertar
eligiendo la categora Formulario, y a travs de los botones correspondientes, aadir un objeto
u otro.

Figura 9.10. Panel Insertar, Categora Formularios
Objetos de Campo de texto
Un campo de texto es un objeto de formulario que podemos utilizar para recoger informacin
que previamente se desconoce, como por ejemplo el nombre, apellidos, direccin, etc. en el
cual el usuario puede introducir caracteres de todo tipo. Existen tres tipos de campos de texto
disponibles:
Campos de texto de una sola lnea: para textos cortos y sencillos: datos personales, datos
postales,...
Campos de texto de varias lneas: para textos ms amplios y de mayor contenido:
observaciones respecto a un tema, comentarios,...
Campos de tipo contrasea: para aquellos textos que no deseamos que se muestren por
pantalla; al escribir cualquier texto, aparecer un asterisco por cada carcter alfanumrico
tecleado para que quede oculto.
Para insertar un campo de texto dentro del formulario tenemos dos caminos:
A travs del men Insertar>Formulario>Campo de texto.
Con el botn Campo de texto en la categora Formularios de la barra Insertar.
De cualquier forma, se abrir el cuadro de dilogo Atributos de accesibilidad de la etiqueta de
entrada que nos permitir crear un identificador y darle un nombre al campo de texto y decidir
el estilo y la posicin del campo. Tambin podremos aadir en el campo Etiqueta, un texto que
ir al lado del campo, para indicar cul es el contenido que se solicita en el campo, como por
ejemplo, si se debe rellenar con el nombre, los apellidos, etc.

Figura 9.11. Cuadro de dilogo Atributos de accesibilidad de la etiqueta de entrada.
Si no queremos rellenar estos datos ahora, podemos simplemente pulsar Cancelar y hacerlo
ms adelante.
Una vez que hayamos aadido el campo de texto, si no habas tecleado antes una Etiqueta
para el mismo en el cuadro de dilogo Atributos de accesibilidad de la etiqueta de entrada, lo
normal ser hacerlo ahora, aadiendo por tanto un texto al lado del campo para indicar cul
ser el contenido que se solicita en el campo: si se debe rellenar con un nombre, con
apellidos,... Para ello slo hay que hacer clic en el lado del campo donde queramos incluir
dicho texto (dentro de la vista Diseo) y escribirlo.

Figura 9.12. Nombre indicativo de un campo de texto.
Podemos elegir un tipo de campo de texto u otro en el Inspector de Propiedades del campo
de texto insertado, as como indicar otros detalles referentes a estos campos.


Figura 9.13. Propiedades de un campo de texto.
Para los campos de texto de una lnea y para los de tipo contrasea, el aspecto del
Inspector de Propiedades es el que se muestra en la figura anterior (difiere un poco, como
veremos a continuacin, del relativo a los campos de texto de varias lneas). En este tipo de
campos podemos especificar las propiedades siguientes:
o Campo de texto: nombre identificativo del campo de texto (es recomendable
darle un nombre que identifique claramente el contenido que tendr el campo, ya
que dicho nombre ser el utilizado por el formulario para su procesamiento). Este
nombre no puede contener espacios ni caracteres especiales.
o Ancho car: en este campo debemos establecer el ancho del campo de texto
indicado por el nmero de caracteres que debe mostrar inicialmente.
o Car. mx.: este campo va a indicar el nmero mximo de caracteres que el usuario
podr introducir en el campo de texto.
o Si el valor especificado en el campo anterior Ancho car es inferior al introducido
en este campo, esto provocar que a primera vista no se vea todo el texto
introducido en el campo, sin embargo el formulario s lo considerar en su
totalidad a la hora de ser enviado al servidor.
o Val. inicial: en este campo pondremos un valor inicial para mostrarlo al usuario. A
veces utilizamos el valor inicial como ejemplo de lo que puede escribir en el
cuadro, pero ocurre que a veces, los usuarios no introducen nada en estos campos
con valores iniciales. Lo ms recomendable es utilizar el ejemplo fuera del cuadro.

Figura 9.14. Valor inicial de ejemplo.

o Clase: si hemos definido una hoja de estilo para nuestra pgina, en este campo se
la podremos asociar al campo que estamos creando.
o Desactivado: desactiva el rea de texto del campo.
o Slo lectura: convierte el rea de texto del campo en un rea de slo lectura.
Los campos de texto de mltiples lneas, tendran el aspecto siguiente:

Figura 9.15. Campo de texto multilena.
Para los campos de texto que pueden contener mltiples lneas, las propiedades varan un
poco con respecto a los otros campos de texto.

Figura 9.16. Propiedades de un campo de texto con mltiples lneas.
En este caso adems de las propiedades antes mencionadas para los otros campos de texto,
podemos establecer:
o Lneas nm: nos permite indicar el mximo nmero de lneas de este campo.

Ejercicio

El objetivo de este ejercicio ser la creacin de tres campos de texto con diferentes
propiedades.

Abre el formulario que creaste en el ejercicio anterior con el nombre formulario1.html, al
que vamos a aadir ahora tres campos de texto. Sita el cursor dentro del formulario que
habas insertado, justo al final del objeto de formulario que habas creado en el ejercicio
previo y pulsa dos veces la tecla Intro.

Ahora, aadimos un campo de texto de una sola lnea, llamado texto con una etiqueta
denominada Campo 1. Para ello, pulsa sobre el icono de la categora Formularios
del panel Insertar y en el cuadro de dilogo Atributos de accesibilidad de la etiqueta de
entrada, teclea en el cuadro ID, texto; y en el cuadro Etiqueta, Campo 1. Deja activado
Ajustar con etiqueta de Rtulo en Estilo, y en Posicin, activa Antes del elemento del
formulario. Despus, pulsa Aceptar.


Figura 9.17. Atributos de accesibilidad de campo de texto 1.

Selecciona el campo y desde el Inspector de propiedades, modifica lo siguiente:
o Ancho car: 50
o Car. mx.: 100
o Val inicial: sin ningn valor
o Clase: Ninguna

Figura 9.18. Propiedades del campo de texto 1.

A continuacin, crea un segundo campo de texto de tipo contrasea. En el cuadro de
dilogo Atributos de accesibilidad de la etiqueta de entrada, teclea textocontrasea en ID,
y Campo 2 en Etiqueta, dejando el resto de valores tal y como los tenas en el primer campo
que insertaste.


Ahora selecciona este campo y en el Inspector de Propiedades realiza lo siguiente:

o En Tipo, activa Contrasea
o Ancho car: 10
o Car. Max: 10
o Val inicial: sin ningn valor.
o Clase: Ninguna.

Figura 9.20. Propiedades del campo de texto 2.

Por ltimo aade al formulario un campo de texto de varias lneas de la forma en la que lo
hemos hecho hasta ahora. En el cuadro Atributos de Accesibilidad de la etiqueta de
entrada, en ID teclea areatexto y en Etiqueta Campo 3.



A continuacin selecciona el campo y en el Inspector de Propiedades modifica lo siguiente:

o Activa Varias lneas en el apartado Tipo.
o Ancho car: 80.
o Lneas nm: 10
o Val inicial: sin ningn valor
o Clase: Ninguna

Guarda la pgina (Archivo > Guardar). Pulsa F12 para ver como se muestra en el navegador.


Figura 9.22. Aspecto final del formulario.

El cdigo HTML generado en el formulario para cada uno de los distintos campos de texto que
acabamos de insertar en este ejercicio es el siguiente:
<form name="form1" method="post" action="">
<p>Campo1
<input name="texto" type="text" id="texto" size="50"
maxlength="100">
</p>
<p>Campo2
<input name="textocontraseña" type="password" id="textocontraseña"
size="10" maxlength="10">
</p>
<p>Campo3
<textarea name="areatexto" cols="80" rows="10" wrap="PHYSICAL"
id="areatexto"></textarea>

</p>
</form>
OBSERVACIN. Como puedes observar, en el cdigo HTML el carcter no existe como tal,
por lo que Dreamweaver lo traduce como ñ. De igual forma puedes identificar desde
la vista Cdigo las palabras acentuadas y otros caracteres especiales.
La prctica totalidad de los campos de entrada de un formulario se caracterizan porque las
etiquetas HTML que los identifican comienzan por la palabra reservada input.
Los campos de texto de mltiples lneas son una excepcin, pues comienzan con la palabra
reservada textarea. Adems, en este tipo de campos su contenido no se muestra con el
parmetro value (como en la gran mayora de los campos de entrada de un formulario), sino
encerrado entre las etiquetas de comienzo y de fin del campo, es decir entre las etiquetas
<textarea> y </textarea>.
Campos ocultos
Los campos ocultos son utilizados habitualmente para enviar informacin al servidor, al
procesar el formulario, que no deseamos que sea visible para el visitante de nuestra pgina.
Normalmente se trata de informacin relativa al usuario que deseamos enviar al servidor.
Para insertar un campo oculto en nuestro formulario existen dos caminos:
A travs del comando: Insertar>Formulario>Campo oculto.
Haciendo clic en el botn Campo oculto en la categora Formularios del panel Insertar.
Una vez insertado el campo oculto en el formulario, Dreamweaver inserta un marcador de
campo oculto en la ventana del documento actual para indicar el lugar que ocupa.
El siguiente paso despus de insertar el campo oculto es asignarle las propiedades desde el
Inspector.
Campo oculto: este campo se utiliza para dar un nombre al campo oculto creado.
Valor: para asignarle un valor concreto a dicho campo oculto, que se transfiere al servidor
cuando se enva el formulario.

Figura 9. 23. Propiedades de un campo oculto.


El cdigo HTML generado en el formulario para un campo oculto sera similar al siguiente:
<input name="nombreoculto" type="hidden" id="nombreoculto" value="valoroculto">
</form>
Como podemos comprobar, en este caso, lo nico que diferencia a este tipo de campos de los
campos de entrada de texto, que vimos anteriormente, es el atributo type, que en este caso
indica que estamos tratando con un campo oculto (hidden).
Campos de carga de archivos
Este tipo de campos se utiliza para permitir al usuario subir ficheros desde su disco duro al
servidor donde est alojada la pgina Web como dato del formulario.
El aspecto de estos campos es similar al de los campos de texto normales, pero con la salvedad
de que en el lateral aparece un botn Examinar donde, al hacer clic, se permite al usuario
seleccionar desde su sistema de ficheros local el archivo a cargar en el servidor a travs del
formulario.

Figura 9.24. Campo de carga de archivo.
Como ya se explic con anterioridad al hablar de los mtodos de envo de datos de formularios
para poder utilizar de forma correcta este tipo de campos de archivos, al crear un nuevo
formulario es necesario que le asignemos a la propiedad Mtodo el valor POST y a la
propiedad Tipo de codificacin, el valor multipart/form-data.
Para insertar un campo de archivo podemos:
Ejecutar el comando: Insertar>Formulario>Campo de archivo.
Haciendo clic en el botn Campo de archivo en la categora Formularios de la barra
Insertar.
Una vez insertado el campo, podemos seleccionarlo y modificar sus propiedades desde el
Inspector de Propiedades. Los posibles valores a modificar son los siguientes:
Campo archivo: para indicar un nombre al campo que estamos creando.
Ancho car: de la misma forma que suceda con los campos de texto normales, indicamos el
ancho del campo en nmero de caracteres.
Car. mx: mximo nmero de caracteres que se podr incluir en este campo. Si el fichero es
seleccionado a travs del cuadro de dilogo que aparece al hacer clic en el botn Examinar,

dicho lmite no ser tenido en cuenta, sin embargo si es el usuario el que introduce
manualmente el nombre del fichero, no se le permitir superar el nmero mximo de
caracteres aqu introducido.
Clase: si existe alguna hoja de estilo creada es posible asignrsela a este campo para adaptar
su formato.

Figura 9.25. Propiedades de un campo de archivo.
Para representar un formulario con un campo de seleccin de archivos en cdigo HTML
utilizaramos un cdigo como ste:
<form action="" method="post" enctype="multipart/form-data" name="form1">
Foto
<input name="fotografía" type="file" id="fotografía" size="30"
maxlength="50">
</form>
Observa que en la etiqueta de inicio de formulario necesitamos especificar que se va a trabajar
subiendo ficheros al servidor y por ello hay que especificarlo con la propiedad enctype y el
valor multipart/form-data.
Casilla de verificacin
Las casillas de verificacin son utilizadas habitualmente para permitir la eleccin entre una
serie de opciones disponibles en el formulario. Estos campos se diferencian de los llamados
botones de opcin en que permiten seleccionar varias opciones de entre todas las disponibles,
mientras que stos ltimos slo permiten seleccionar una opcin de entre todas las
proporcionadas.
Para insertar una casilla de verificacin lo podemos hacer desde:
El comando: Insertar>Formulario>Casilla de verificacin.
Haciendo clic en el botn Casilla de verificacin en la categora Formularios de la
barra Insertar.
En las casillas de verificacin tambin debemos poner un texto que facilite la seleccin de las
opciones que se pueden presentar.

Figura 9.26. Aspecto de casillas de verificacin en un formulario.
En estos campos podemos modificar las siguientes propiedades desde el Inspector de
Propiedades:
Nombre de casilla: nombre exclusivo e indicativo que deseamos dar a la casilla de
verificacin.
Valor activado: pondremos el valor inicial que ser el que se enve al servidor cuando se
active esta casilla de verificacin (habitualmente se suelen asignar valores numricos; por
ejemplo si disponemos de cuatro casillas de verificacin en este campo asignaramos valores
consecutivos del 1 al 4).
Estado inicial: en funcin de si deseamos que la casilla de verificacin est inicialmente
activada o no, elegiremos una de entre las dos opciones disponibles.
Clase: para aplicarle al campo un formato basado en una hoja de estilo previamente creada
y que podemos seleccionar de la lista desplegable.

Figura 9.28. Propiedades de casilla de verificacin (correspondiente a Opcin 1).
El cdigo HTML del formulario para dos casillas de verificacin llamadas opcion1 y opcion2
cuyos valores respectivos son 1 y 2 sera el que se muestra a continuacin:
<p>Opción 1
<input name="opcion1" type="checkbox" id="opcion1" value="1" checked>
</p>
<p>Opción 2
<input name="opcion2" type="checkbox" id="opcion2" value="2">
</p>
</form>

En la primera casilla de verificacin comprobamos que al final de la etiqueta aparece la palabra
reservada checked. Esto nos indica que la primera casilla de verificacin aparecer activada de
forma predeterminada al ser mostrada por primera vez al usuario que visite nuestra pgina.
Se pueden crear tambin grupos de casillas de verificacin, mediante el botn Grupos de
casillas de verificacin , cuyo funcionamiento ser similar a los grupos de opcin que
vamos a ver en el apartado que viene a continuacin.
Botn de opcin
Otra de las opciones disponibles para permitir a los usuarios elegir una de entre varias
opciones disponibles son los botones de opcin. Como hemos dicho anteriormente estos
botones tienen la particularidad de que su eleccin es individual y excluyente, es decir, slo se
permite elegir uno de ellos a la vez.
Aunque Dreamweaver nos permite insertar botones de opcin aislados, tanto a travs de
mens (Insertar>Formulario>Botn de opcin) como mediante un clic de ratn en el Botn
de opcin del panel Formularios, de la barra Insertar, el uso ms habitual de este tipo de
botones es que se encuentren integrados dentro de un grupo (parece que no tiene mucho
sentido agregar un solo botn de este tipo cuando su funcionalidad es permitir una nica
opcin de entre varias disponibles).
Por este motivo en este apartado vamos a tratar el tema de los grupos de botones de opcin.
Dichos grupos pueden incluirse en el formulario:
Mediante el comando Insertar>Formulario>Grupo de opciones.
Haciendo clic en el botn Grupo de opcin en la categora Formularios de la barra
Insertar.
Tras realizar este paso nos aparece el cuadro de dilogo Grupo de opcin.

Figura 9.29. Cuadro de dilogo Grupo de opcin.

Dentro de este cuadro es posible configurar el grupo de opciones que estamos creando:
En el cuadro de texto Nombre asignamos un nombre al grupo de opciones.
Podemos aadir opciones haciendo clic en el botn . Si por el contrario queremos
eliminar alguna, debemos seleccionarla y hacer clic en el botn .
Cuando insertemos un botn de opcin, podemos asignarle el nombre de la opcin (Label)
y el valor (Value), dentro del recuadro de texto situado en la parte central de dicha ventana. El
texto que se escriba bajo el ttulo Label (Etiqueta), ser el que aparezca en nuestro formulario,
mientras que el valor que escribamos en el campo Value ser el que se tenga en cuenta
cuando se procese la informacin del formulario y se enve al servidor.
Los botones ) y nos permitirn subir o bajar la opcin en la lista o men para
cambiar el orden.
Por ltimo, es posible elegir si deseamos que nuestro grupo de opciones se muestre con
saltos de lnea de HTML o en el interior de una tabla, segn lo que escojamos en la ltima
opcin, Disponer utilizando. Haciendo clic en el botn Aceptar se crear nuestro grupo de
opciones. En el botn Ayuda encontramos comentarios acerca de cmo completar la
informacin en esta ventana.
Supongamos un formulario con un grupo de opciones compuesto por dos de estos botones
cuyos valores respectivos son 1 y 2. El cdigo HTML equivalente sera el que se muestra a
continuacin:
<p>
<label>
Opcin 1
<input type="radio" name="GrupoOpciones1" value="1">
</label>
<br>
<label>
Opcin 2
<input type="radio" name="GrupoOpciones1" value="2">
</label>
<br>

</p>
</form>
Para especificar que deseamos que uno de los botones est activado de forma
predeterminada al mostrarse la pgina por primera vez se utiliza, al igual que ocurra con las
casillas de verificacin, la palabra reservada checked.
Para este caso particular de los botones de opcin, observamos que en el parmetro name
ambos tienen el mismo valor; esto se utiliza para decir que los dos botones de opcin
pertenecen al mismo grupo, es decir que son excluyentes entre s y si uno de ellos est
seleccionado, el otro no podr ser seleccionado al mismo tiempo.
Tambin podemos observar en este cdigo HTML que la etiqueta del botn va situada detrs
del mismo. Para colocarla delante slo deberemos poner Opcin 1 y Opcin 2 delante de la
etiqueta input. Esto queda siempre a gusto del diseador de la pgina.
Listas y mens
Las listas y los mens son utilizados en un formulario para presentar a los usuarios diferentes
opciones de entre las cuales pueden escoger varias (si se trata de una lista de desplazamiento)
o una sola (si estamos trabajando con un men).
Aunque ambos elementos de formulario compartan una misma forma de ser aadidos a
nuestra pgina HTML, como veremos a continuacin, cada uno de ellos tiene unas opciones
particulares para ser detalladas en las propiedades como ahora veremos.
Para aadir una lista o un men, podemos hacerlo a travs de las opciones de mens
correspondientes Insertar>Formulario>Lista/men, o bien, haciendo clic en el botn
Lista/men en la categora Formularios de la barra Insertar.
Una vez aadido este elemento en el interior del formulario, nos aparece un cuadro de
seleccin sin contenido .
En este punto, y en funcin de nuestras necesidades deberemos optar por configurar, bien una
lista de desplazamiento, o bien un men indicando las propiedades precisas para un elemento
u otro en el Inspector de Propiedades.
Si la opcin elegida es un Men, el Inspector de Propiedades presentar un aspecto similar a
ste:

Figura 9.30. Propiedades de un men.
En este Inspector de propiedades es posible configurar las siguientes opciones:
Lista/men: bajo este ttulo debemos escribir el nombre que se quiera para el men (o la
lista de desplazamiento).
Tipo: en esta opcin escogemos si el elemento que queremos aadir es un Men o una Lista
de desplazamiento.
Valores de lista: al hacer clic en este botn se nos muestra una nueva ventana en la que
podemos configurar las opciones que aparecern en la lista.

Figura 9.31. Cuadro Listar valores.
Bajo el ttulo Etiqueta de elemento escribiremos una etiqueta para cada elemento del men o
lista y bajo el ttulo Valor escribiremos el texto que ser enviado al servidor cuando el
formulario sea procesado.
Para aadir ms elementos hacemos clic en el botn y para eliminar alguno, basta con
seleccionarlo y hacer clic en el botn .
Los botones y nos permitirn cambiar el orden de la opcin en la lista o men.
Tras hacer clic en el botn Aceptar las opciones sern aadidas al men (o a la lista segn el
elemento que estemos configurando).
Dicha ventana dispone adems de un botn de ayuda con informacin precisa acerca de cmo
completar los datos correctamente.

Clase: si deseamos dar formato a la lista mediante una hoja de estilo, ste es lugar para
hacerlo.
Seleccionado inicialmente: si queremos que aparezca nuestro men en el formulario con
una de las opciones sealada de forma predeterminada, bastar con indicarlo en este campo
haciendo clic sobre la opcin elegida.
Si por el contrario, el elemento que queremos aadir al formulario es una Lista de
desplazamiento adems de las propiedades comentadas para los mens dispondremos de las
siguientes:

Figura 9.32. Propiedades de una lista.

Alto: en este campo es posible especificar cuntas opciones deben mostrarse de la lista.
Selecciones Permitir mltiples: si queremos permitir al usuario poder seleccionar ms de
una opcin simultneamente. Si se selecciona esta opcin, en la lista Seleccionado
inicialmente podremos indicar las opciones sealadas de forma predeterminada.
Al crear un formulario con un men y una lista desplegable en formato HTML , con cuatro
opciones posibles, deberamos escribir un cdigo HTML similar al siguiente:
<p>
Menú
<select name="select">
<option value="1" selected>opcion menu 1</option>
<option value="2">opcion menu 2</option>
</select>
</p>
<p>

Lista desplegable
<select name="select" size="3" multiple>
<option value="1" selected>opcion lista 1</option>
<option value="2">opcion lista 2</option>
</select>
</p>
</form>
Si analizamos este trozo de cdigo mostrado, comprobamos que:
Las etiquetas que marcan el principio y el final del men y de la lista desplegable son
<select> y </select> y entre ambas se deben indicar todas las opciones.
Cada una de las opciones que se muestran comienzan y finalizan con las etiquetas <option>
y </option> respectivamente. Para indicar que una de ellas est seleccionada por defecto se
utiliza la palabra reservada selected.
El texto que aparecer en la lista se escribe entre las etiquetas <option> y </option>,
mientras que el valor asociado a esa opcin se debe escribir en el parmetro value.
Las diferencias de cdigo existentes entre el men y la lista que acabamos de ver es que se
pueden especificar dentro de la etiqueta de inicio de la lista (<select>) dos nuevos parmetros:
multiple: para indicar que se puede seleccionar ms de una opcin al mismo tiempo.
size=n: para detallar cuntas opciones son visibles, donde n indica dicha cantidad.
En este caso, la diferencia entre ambos componentes de formulario en un navegador quedara
de la siguiente forma:

Figura 9.33. Aspecto de una lista y de un men en una web.


Botones de formulario
Los botones de formulario son los que nos permiten enviar informacin al servidor, o por el
contrario borrar toda la informacin contenida en los campos del formulario, restablecindolo
a su estado inicial. Tambin nos permiten otra serie de funciones personalizables mediante la
asignacin de scripts, como veremos en este apartado.
Para insertar un botn estndar de formulario, a travs de los mens de la aplicacin debemos
hacer clic en la opcin Insertar>Formulario>Botn. Si esta insercin la hacemos a travs de la
categora Formularios de la barra Insertar, slo hay que hacer clic en el botn .
Automticamente se abre el cuadro Atributos de accesibilidad de la etiqueta de entrada,
donde podremos darle una id y una etiqueta al botn, como ya hemos aprendido. No se
recomienda teclear la etiqueta que va a aparecer antes del botn en este caso, ya que cuando
el botn se inserte en la ventana del documento, lo har por defecto con el valor Enviar, que
podremos cambiar en el Inspector de Propiedades si fuese necesario.
Desde el Inspector de Propiedades podemos indicar las propiedades que deseamos que tenga
nuestro botn.
Nombre del botn: para indicar un nombre para el botn que se est creando y que ser
utilizado en el procesamiento de la informacin enviada por el formulario.
Valor: en este campo podemos indicar el texto que aparecer en el interior del botn.
Accin: deberemos elegir, una de entre las tres posibilidades que se nos ofrecen:
Enviar formulario: para procesar el formulario enviando la informacin al servidor una
vez que se haga clic en l.
Ninguno: si se elige esta opcin deberemos indicar la accin que se activar al hacer
clic en el botn. Por ejemplo, podemos aadir un comportamiento JavaScript que
presente un mensaje o abra otra pgina al hacer clic en el botn.
Restablecer formulario: para devolver los campos del formulario a su estado inicial,
bien vacindolos de contenido o bien seleccionando de nuevo la opcin predefinida
para aquellos campos que as la tuvieran asignada.
Clase: para asignarle una hoja de estilo y darle as al botn un formato determinado.

Figura 9.34. Propiedades de un botn.
Cuando utilicemos un botn estndar de envo de formulario, es aconsejable poner otro que
restablezca el contenido del mismo.

Adems de los botones estndar aqu mencionados, podemos aadir a nuestro formulario otro
tipo de botones personalizados utilizando imgenes para ello.
sto es lo que vamos a ver en el siguiente apartado.
El cdigo HTML asociado a un formulario con un botn de sera el siguiente:
<input type="submit" name="Submit" value="Enviar">
</form>
Imgenes
Otro de los elementos que es posible aadir a un formulario son las imgenes.
Adems de servir de adorno en las pginas HTML, en los formulario pueden tener otras
utilidades como servir de vnculos a otras pginas, como botones de formularios,... todo esto
lo trataremos en este apartado.
El primer paso es aadir la imagen en el formulario; como siempre disponemos de dos
caminos:
A travs de los mens de la aplicacin: Insertar > Formulario > Campo de imagen.
Haciendo clic en el botn Campo de imagen en la categora Formularios de la barra
Insertar.
Al llevar a cabo este primer paso aparecer el cuadro de dilogo Seleccionar origen de imagen,
desde el que podemos seleccionar la imagen que vayamos a utilizar como botn. Por defecto
nos aparecen los ficheros con extensiones gif, jpg, jpeg, png y .psd.
Si queremos seleccionar un fichero de imagen con otra extensin, por ejemplo tif, bmp, etc,
deberemos seleccionar en Tipo la opcin Todos los archivos (*.*).
En URL: indicaremos, o aparecer automticamente la ruta donde se encuentra la imagen, una
vez seleccionada la misma.
En el cuadro Relativa a: podemos definir si la imagen es relativa al Documento o a la Raz del
Sitio.
En la columna de la derecha de este cuadro es posible ver una vista previa de la imagen antes
de insertarla en el formulario.
Una vez pulsamos Aceptar, se abre el cuadro Atributos de accesibilidad de etiqueta de
entrada, que ya sabemos manejar.
Para que la imagen funcione como un botn Enviar debemos seguir los siguientes pasos:
1. Insertar la imagen tal y como se acaba de detallar.

2. En el campo Campo Imagen del Inspector de Propiedades escribir el texto Enviar.
3. En el campo Alt, escribir un texto corto (dos o tres palabras como mximo), acerca de la
funcionalidad del botn que estamos creando.
Dicho texto ser el que aparezca al situarnos encima de la imagen con el ratn, texto
alternativo.

Figura 9.35. Propiedades de un campo de imagen.
En este caso el cdigo HTML que genera el formulario con la imagen sera el siguiente:
<input name="Enviar" type="image" id="Enviar" src="file:///C|/
MiWeb/Elementos/imagenes/correo_click.gif" alt="Enviar datos" width="96" height="40"
border="0">
</form>
En este caso el parmetro src indica la ruta hacia la imagen que hemos insertado en el
formulario. En el ejemplo que acabamos de ver, y tal y como se ve en el cdigo generado, para
especificar dnde se encuentra la imagen utilizada para crear el hipervnculo hemos utilizado
la ruta absoluta hacia la misma.
Este tipo de ruta absoluta lo crea Dreamweaver de forma automtica mientras no tengamos
puesto nombre al documento en el que estamos trabajando. En cuanto guardemos el
documento cambia la ruta a relativa.

RECOMENDACIN. Es aconsejable utilizar rutas relativas al sitio para las imgenes y otros
tipos de archivos multimedia.

Las imgenes que hemos tratado en este apartado no dejan de ser imgenes normales de las
que utilizamos para dar vistosidad a nuestra pgina web, con la salvedad de que en este caso
se les dota de una nueva funcionalidad, como es el hecho de servir de hipervnculo o enlace a
una pgina web, como botn de formulario, etc.


9.3. Validacin de formularios
Un aspecto que debemos tener en cuenta cuando estamos hablando de formularios es la
validacin de los mismos, es decir, comprobar que los datos introducidos por el usuario son
correctos, as como otro tipo de comprobaciones.
Para aadir esta validacin lo primero que necesitamos es que la ventana Comportamientos
est visible; para hacer que esto sea as debemos hacer clic en los mens
Ventana>Comportamientos, o bien utilizar la combinacin de teclas Mays+F4. Tras hacer esto
en la columna de Paneles, a la derecha de la ventana principal, aparecer el panel Inspector
de Etiquetas con la solapa de la ventana Comportamientos.

Figura 9.36. Ventana Comportamientos.
A continuacin, y despus de hacer clic en el botn Aadir Comportamiento , debemos
escoger la opcin Validar formulario.

Figura 9.37. Aadir comportamiento Validar formulario.
Tras hacer esto aparecer nuevo cuadro:

Figura 9.38. Cuadro Validar formulario.


Dentro de este cuadro y en el recuadro situado al lado del texto Campos aparecern todos
aquellos campos de texto que se encuentren dentro del formulario. Para asignarle unos
criterios de validacin concretos a cada uno de ellos, es necesario seleccionarlos de forma
individual haciendo clic sobre la lnea que indica su nombre y a continuacin modificar las
propiedades siguientes:
Valor: si seleccionamos en este campo el valor Obligatorio, ser necesario que el usuario
siempre rellene este campo antes de enviar la informacin del formulario al servidor.
Aceptar: dentro de este grupo de botones de opcin, podremos elegir una de entre las
cuatro posibilidades que se nos presentan:
Cualquier cosa: se permite introducir cualquier combinacin de caracteres en el
campo.
Nmero: para permitir que los nicos valores admisibles en el campo sean los
numricos.
Direccin de correo electrnico: slo se permitir que el texto introducido en el
campo sea una direccin de correo electrnico y adems que el formato en el que se
haya introducido sea el correcto.
Nmero del... al...: slo se permiten valores numricos y adems entre los lmites
inferior y superior especificados en los campos situados al lado de este botn de
opcin.
Una vez configurada la validacin segn nuestras necesidades y tras hacer clic en el botn
Aceptar de forma automtica se crea un cdigo JavaScript (visible en la vista Cdigo) con las
especificaciones que hayamos creado en el cuadro anterior.

9.4. Datos de Spry
Los conjuntos de datos de Spry son objetos JavaScript que alojan la recopilacin de datos
especificados.
Dreamweaver permite crear rpidamente el objeto y cargar datos de una fuente de datos
(como un archivo XML o un archivo HTML) en el mismo. El conjunto de datos se convierte en
una matriz de datos con forma de tabla estndar con filas y columnas.
Un conjunto de datos se puede visualizar como un contenedor virtual con una estructura de
filas y columnas. Existe como objeto JavaScript y la informacin slo se puede visualizar
cuando se especifica un diseo para pginas Web.
Podemos visualizar todos los datos del contenedor o slo los datos seleccionados.


Crear un conjunto de datos HTML de Spry
Si slo deseamos crear un conjunto de datos, no es necesario preocuparnos de donde, en el
documento, vamos a insertarlo. Si lo que deseamos es crear el conjunto e insertar un diseo,
entonces deberemos situar el cursor exactamente en el punto del documento donde
deseemos insertar el diseo de la pgina.
Podemos ejecutar Insertar>Spry>Conjunto de datos de Spry.

Figura 9.39. Insertar conjunto de datos de Spry.
Tambin podemos pulsar en el botn Conjunto de datos de Spry disponible en la categora
Spry de la barra Insertar.

Figura 9.40. Insertar conjunto de datos de Spry desde la barra Insertar.
En cualquier caso, si estamos realizando esta accin en un documento activo nuevo que nunca
hayamos guardado antes, Dreamweaver nos avisar de que es necesario guardar el
documento antes de utilizar esta funcin, as que en primer lugar guardaremos nuestro
documento para que a continuacin se abra el cuadro Conjunto de datos de Spry.

Figura 9.41. Conjunto de datos de Spry.

En la pantalla Especificar fuente de datos, en el men emergente Seleccionar tipo de datos,
seleccionamos HTML, que normalmente es el primer tipo que viene por defecto.
En Nombre del conjunto de datos especificaremos un nombre para dicho conjunto. Por
defecto, la primera vez que se crea un conjunto de datos, el nombre que aparece tecleado en
este campo es ds1. El nombre del conjunto de datos puede contener letras, nmeros y guiones
bajos, pero no puede empezar por un nmero.
En el desplegable Detectar , seleccionaremos la fuente de datos que
queremos que Dreamweaver detecte. Por defecto, Tablas es la fuente seleccionada, aunque
tambin, por ejemplo, si hemos organizado muestros datos dentro de una etiqueta div y
deseamos que Dreamweaver detecte las etiquetas div en lugar de las tablas, podremos
seleccionar Divs en el men emergente Detectar.
En Especificar archivo de datos,
podemos teclear la ruta al HTML en el que tenemos almacenados los datos, o pulsar Examinar
para localizarlo directamente en nuestro equipo.
Imaginemos por ejemplo, que tenemos un documento html que contiene una tabla en la que
tenemos los prefijos telefnicos de diversos pases y queremos crear un conjunto de datos
Spry con ellos. Una vez localizado el documento desde el cuadro Seleccionar Origen de
Archivo, Dreamweaver representa la fuente de datos HTML en la ventana Seleccin de datos,

Figura 9.42. Seleccin de datos.
y muestra marcadores visuales, representados por una flecha amarilla de los elementos
que se pueden seleccionar como contenedores para el conjunto de datos. El elemento que
elijas utilizar debe tener un ID exclusivo asignado, es decir, cuando se insert ese elemento en
su documento HTML hubo que darle una identidad, un nombre concreto; por ejemplo, en
nuestro ejemplo, la tabla que contiene los nombres de pases y prefijos telefnicos cuenta con
un ID concreto en el Inspector de Propiedades de su documento. Si no tiene ID exclusivo,
Dreamweaver mostrar un mensaje de error y debers volver al archivo de fuente de datos
para asignarle un ID exclusivo.
Para seleccionar el contenedor de datos de la ventana, tendremos que pulsar sobre el
marcador amarillo , o desplegar el men Contenedores de datos para seleccionar el
contenedor adecuado. Una vez hecho esto, observamos que los datos de nuestro contenedor
(la tabla en nuestro ejemplo) quedan seleccionados, el marcador ha cambiado de forma y color
y tenemos una vista previa de los datos en la parte inferior de la pantalla.

Figura 9.43. Datos seleccionados.
Si pulsamos en Siguiente, pasaremos a la pantalla Establecer opciones de datos, en la que
podemos hacer lo siguiente:
Para configurar los tipos de columna de conjunto de datos, selecciona una columna y
despliega el tipo de columna en el men emergente Tipo. Por ejemplo, si una de las
columnas del conjunto de datos contiene nmeros, seleccione la columna y nmero en el
men Tipo. Esta slo es importante si deseamos que el usuario pueda ordenar los datos
por los datos de esta columna.

Para seleccionar una columna de conjunto de datos, hacemos clic en el encabezado, la
elegimos en el men Nombre de columna o, mediante las flechas izquierda y derecha
situadas en la esquina superior izquierda de la pantalla.
Para especificar cmo deseamos ordenar los datos, seleccionamos la columna segn la cual
se ordenarn los datos en el men Columna de ordenacin. Despus de seleccionar la
columna, especificamos si el orden debe ser ascendente o descendente.
Slo en el caso de tablas, anularemos la seleccin de Usar primera fila como encabezado si
deseamos utilizar nombres de columna genricos (es decir, columna 0, columna 1, columna 2,
etc.) en lugar de los nombres de columna especificados en la fuente de datos HTML.

En el caso de las tablas, podemos seleccionar Usar columnas como filas para invertir la
orientacin horizontal y vertical de los datos del conjunto de datos. Si seleccionamos esta
opcin, las columnas se utilizarn como filas.
Podemos seleccionar Filtrar filas duplicadas para excluir las filas duplicadas de datos del
conjunto de datos.
Al seleccionar Desactivar cach de datos tendremos acceso siempre a los datos ms
recientes en el conjunto de datos. Si deseamos que los datos se actualicen automticamente,
entonces habr que seleccionar Actualizar datos automticamente y especificar un tiempo de
actualizacin en milisegundos.

Figura 9.44. Establecer opciones de datos.
Una vez terminadas de configurar todas las opciones en la pantalla Establecer opciones de
datos, haremos clic en Siguiente para pasar a la pantalla Elegir opciones de insercin.

Figura 9.45. Elegir opciones de insercin.
En esta pantalla, podemos realizar una de las acciones siguientes:
Seleccionar un diseo para el conjunto nuevo y especificar las opciones de configuracin
adecuadas.
Seleccionar No insertar HTML. Si seleccionamos esta opcin, Dreamweaver crea al conjunto
de datos pero no aade HTML a la pgina. El conjunto de datos est disponible en el panel
Vinculaciones (Ventana > Vinculaciones) y puedes arrastrar los datos manualmente desde el
conjunto de datos a la pgina.
Por ltimo, hacemos clic en Listo y Dreamweaver crea el conjunto de datos y, si se ha
seleccionado una opcin de diseo, muestra el diseo y los marcadores de posicin de datos
de la pgina. Si accedemos a la vista Cdigo, podremos comprobar que Dreamweaver ha
aadido en el encabezado referencias al archivo SpryData.js y al archivo SpryHTMLDataSet.js.
Estos archivos son activos importantes de Spry que funcionan con la pgina. Este cdigo no
puede eliminarse de la pgina; de lo contrario, el conjunto de datos no funcionar. Cuando se
carga la pgina en el servidor, tambin se debern cargar estos archivos como archivos
dependientes.
El aspecto final del conjunto de datos en la ventana del documento en Vista Diseo sera
similar a ste:

Figura 9.46. Aspecto final del conjunto de datos de Spry en Vista Diseo.
Y as se vera en la Vista en vivo:

Figura 9.47. Aspecto final del conjunto de datos de Spry en Vista en vivo.

Captulo 10.
Capas

Dreamweaver CS4. Captulo 10. Capas
Captulo 10. CAPAS
Una capa en Dreamweaver no es ms que un elemento HTML que puede colocarse en
cualquier parte del documento que estemos creando. En dichas capas se puede colocar texto,
imgenes,... y , en general, cualquier contenido HTML. En Dreamweaver CS4 se llaman
Elementos PA, es decir, Elementos de Posicin Absoluta.
Es posible realizar operaciones muy variadas con los elementos PA adems de insertar
contenido dentro de ellos: podemos superponer varios PA, hacer que algunos aparezcan o
desaparezcan, moverlos desde una parte de la pgina a otra, redimensionarlos,... con lo cual
disponemos de una gran cantidad de opciones de diseo.
Los navegadores ms antiguos (anteriores a Microsoft Internet Explorer 4.0 y Netscape
Navigator 4.0) no son compatibles con el uso de PAs en HTML, no los visualizan correctamente
o, en ocasiones, directamente no los muestran. Por este motivo si pensamos que los usuarios
de nuestra pgina dispondrn de dichos navegadores deberemos especificar un contenido
alternativo para que la visualicen correctamente, si por el contrario pensamos que este caso
no se va a dar podemos trabajar tranquilamente con capas en nuestra pgina web.
10.1. Crear elementos PA
Opciones predeterminadas de elementos PA
Dentro de las preferencias establecidas en Dreamweaver existe un apartado dedicado a
elementos PA, en el cual podemos especificar las opciones predeterminadas que tendrn
dichos elementos en el momento que los creemos. Para llegar a estas preferencias hacemos
clic en el men Edicin>Preferencias y seleccionamos la categora Elementos PA.

Figura 10.1. Opciones predeterminadas de los elementos PA.

Una vez que hemos seleccionado la categora Elementos PA disponemos de varios valores para
configurarlos:
Visibilidad: indicamos cul ser la visibilidad predeterminada de los elementos PA:
o Default: (predeterminada) la visibilidad depende del navegador que est accediendo a la
pgina.
o Inherit: (heredada) para que el elemento PA que se cree herede la visibilidad del elemento
padre.
o Visible: (visible) para que el PA se muestre en cualquier caso.
o Hidden: (oculta) para que el PA se oculte en cualquier caso.
Ancho: especificamos el ancho por defecto del PA en pxeles.
Alto: especificamos la altura predeterminada del PA en pxeles.
Color de fondo: podemos escoger el color de fondo que tendr el PA mediante el selector
de colores o indicando en este campo su valor hexadecimal.
Imagen de fondo: desde aqu podemos indicar el nombre del archivo de la imagen de fondo
en todos los elementos PA que creemos.
Anidar: permitimos el anidamiento de un elemento PA en otro al crearlo en un punto
interior del elemento PA padre.
Insertar elementos PA
En Dreamweaver podemos aadir PAs a travs de los mens de la aplicacin siguiendo la ruta
Insertar>Objetos de diseo>Div PA.

Figura 10.2. Insertar un elemento PA.
O haciendo clic en el botn Dibujar Div PA de la pestaa
Estndar en la categora Diseo de la barra Insertar.
A medida que vamos aadiendo elementos PA a nuestro documento HTML, se hace ms difcil
poder seleccionar cada una de ellas individualmente, aunque siempre las podemos seleccionar
desde el panel Elementos PA. Este panel puede activarse desde Ventana>Elementos PA, o
pulsando F2.

Figura 10.3. Panel Elementos PA.
Tambin podemos seleccionar un elemento PA desde el manejador de seleccin que se hace
visible sobre el mismo cuando colocamos el cursor en su interior.

Figura 10.4. Elemento PA seleccionado con manejador de seleccin visible.
Una vez activado el panel Elementos PA, aparecer en l un listado con el nombre de todos los
PA que forman parte de nuestro documento, pudiendo seleccionar individualmente cada uno
de ellos. El primer PA que hayamos creado ser el que aparezca el ltimo en esta lista.

Figura 10.5. Panel de Elementos PA.

Adems, en este panel podemos indicar si queremos que un elemento PA est visible o no
haciendo clic al lado de cada PA: el icono indica que dicho elemento est visible, por el
contrario el icono nos indica que dicho elemento no es visible.
Los elementos PA anidados se mostrarn de forma que aqul que se encuentre en el interior
de otro, se situar inmediatamente debajo de ste y adems con una lnea vertical indicando
de qu elemento PA depende.
Tambin es posible Evitar solapamiento si activamos la casilla de verificacin con ese ttulo
que se encuentra en el mismo panel.

RECOMENDACIN. Si queremos seleccionar varios elementos PA, deberemos mantener
presionada la tecla Maysculas mientras hacemos clic en el borde o dentro de los PA que
vayamos a seleccionar. Tambin podemos seleccionar varios PA desde el panel Elementos PA,
manteniendo presionada la tecla Maysculas mientras hacemos clic en los nombres de los
elementos.

10.2. Propiedades de los Elementos PA
Para modificar las propiedades de un elemento PA, debemos tenerlo seleccionado
previamente. Las caractersticas del elemento seleccionado se especifican en el Inspector de
Propiedades.

Figura 10.6. Inspector de propiedades de un elemento PA.
Elemento CSS-P: asignamos un nombre al elemento que estamos creando. Tambin es
posible modificar el nombre de dicho elemento haciendo doble clic sobre l mismo en el panel
Elementos PA.
Izq: (izquierda) indicamos la distancia en pxeles entre el lmite izquierdo del documento y el
PA.
Sup: (superior) indicamos la distancia en pxeles entre el borde superior del documento y el
PA que se est modificando.
An.: (anchura) especificamos la anchura del elemento PA medido en pxeles.
Al.: (altura) especificamos la altura del elemento PA en pxeles.

ndice Z: es el identificador nico para cada PA que indica el orden en el que se visualizar
cada elemento (orden de apilamiento). Los elementos PA con un ndice Z mayor se
superponen a aquellos con un ndice menor y viceversa. Este valor lo podemos modificar
tambin en el panel Elementos PA.
Vis: (visibilidad) de la misma forma que podemos hacer en el panel Elementos PA, tambin
es posible desde aqu modificar la visibilidad de los PA, segn los siguientes valores:
o Default: (predeterminado) la visibilidad depende del navegador que est accediendo a la
pgina. La mayora de los navegadores utilizan la propiedad Heredada como predeterminada.
o Inherit: (heredado) el PA se muestra o no segn el valor que se hay especificado para el PA
padre.
o Visible: (visible) hace visible el elemento PA independientemente del valor que tenga
asignado el PA padre.
o Hidden: (oculto) el elemento PA se oculta y no se mostrar.
Im. fondo: (imagen de fondo) situamos una imagen de fondo en el elemento PA si as lo
deseamos. Slo tenemos que hacer clic en el icono que representa una carpeta y
seleccionar la imagen en nuestro equipo.
Col. fondo: (color de fondo) si en lugar de una imagen lo que queremos situar como fondo
de un PA es un color, podremos seleccionarlo desde aqu, bien escribiendo su valor
hexadecimal, o bien seleccionndolo desde la paleta de colores.
Clase: nos permite dar un formato determinado al elemento PA al seleccionar una hoja de
estilo de esta lista desplegable.
Desb.: (desbordamiento) controlamos cmo van a aparecer los elementos PA en el
navegador cuando el contenido en su interior supera los lmites especificados para ellos.
Existen cuatro posibles valores para controlar el desbordamiento:
o Visible: (visible) se ampla el tamao del PA para hacer visible todo el contenido.
o Hidden: (oculto) el contenido adicional no se va a mostrar en el elemento PA.
o Desplaz: (desplazamiento) el navegador mostrar barras de desplazamiento en el elemento
PA tanto si son necesarias como si no.
o Automtico: las barras de desplazamiento aparecern slo cuando sean necesarias en el
elemento PA.
Rec: (recorte) con esta propiedad podemos especificar qu parte de todo el elemento PA
queremos que sea visible. Con las coordenadas que se muestran a continuacin es posible
representar un rectngulo que ser la seccin que ser visible de todo el PA (comenzando
desde la esquina superior izquierda de la pgina).

o Iz: (izquierda) coordenada izquierda.
o Sup: (superior) coordenada superior.
o Der: (derecha) coordenada derecha.
o Inf: (inferior) coordenada inferior.

Ejercicio

El objetivo de este ejercicio ser la creacin de dos elementos PA con distintas propiedades.


Para trabajar con elementos PA en Dreamweaver ser necesario activar el panel lateral
Elementos PA. Para hacerlo selecciona la opcin del men Ventana > Elementos PA o pulsa la
tecla F2.

Figura 10.7. Panel Elementos PA.

Aade un elemento PA a travs de la barra Insertar en la categora Diseo, haciendo clic en
el botn Dibujar Div PA . Dibuja el elemento PA haciendo clic con el botn izquierdo del
ratn y arrastrando el ratn, en la ventana del documento, hasta que tenga el tamao
deseado.

Selecciona el elemento PA haciendo clic con el botn izquierdo del ratn sobre el recuadro
situado en la parte superior izquierda del PA .

En el Inspector de Propiedades del elemento PA estable los siguientes valores:
o Nombre: inferior
o Ancho y Alto: 300 pxeles.
o Distancia a los bordes superior e izquierdo: 50 pxeles.
o Visibilidad: default.
o Color de fondo: #00FF33.
o Desbordamiento: automtico.


Figura 10.8. Inspector de propiedades del elemento PA llamado inferior.

Por ltimo aade el texto Capa inferior dentro del elemento PA, centrndolo dentro de l
y ponindolo en negrita.

El elemento PA final debera quedar as:

Figura 10.9. Elemento PA inferior finalizado.

A continuacin crea un segundo elemento PA de la misma forma que has hecho antes, pero
ahora con las siguientes propiedades:

o Nombre: superior.
o Anchura y Altura: 350 pxeles y 190 pxeles respectivamente.
o Distancia a los bordes superior e izquierdo: 130 pxeles y 180 pxeles respectivamente.
o Visibilidad: default.
o Color de fondo: #FFFF00.
o Desbordamiento: visible.

Figura 10.10. Inspector de propiedades del elemento PA llamado superior.

Aade el texto Capa superior dentro del elemento PA, centrndolo dentro de l y
ponindolo en negrita.

Guarda la pgina con el nombre capas1 (Archivo>Guardar).

La pgina HTML final quedara aproximadamente de la siguiente forma:

Figura 10.11. Aspecto final del documento con dos elementos PA insertados.

Pulsa la tecla F12 para ver cmo queda la pgina en el navegador, o utiliza la Vista en vivo.

Aproximadamente el aspecto de nuestra pgina sera el que se muestra en la figura siguiente:


Figura 10.12. Aspecto de los elementos PA en la Vista en vivo.

10.3. Operaciones con elementos PA
Anidar elementos PA
Podramos definir un elemento PA anidado como un PA que se encuentra dentro de otro PA.
Normalmente los elementos PA anidados se utilizan para mover ambos elementos de una sola
vez, quedando agrupados cuando se anidan.
Para dibujar un elemento PA anidado disponemos de varios procedimientos:
Sobre un PA ya creado, hacemos clic en el interior del mismo e insertamos un nuevo PA a
travs de los mens Insertar>Objetos de diseo>Div PA.
Haciendo clic en el interior de un elemento PA ya creado y, a continuacin, hacemos clic en
el botn correspondiente de la barra Insertar . Si la opcin Anidar est desactivada en las
Preferencias de los Elementos PA, debemos mantener pulsada la tecla Alt mientras
arrastramos el ratn al anidar un PA dentro de otro existente.
El aspecto que mostraran dos elementos PA anidados en el documento actual sera el que se
muestra a continuacin:

Figura 10.13. Elementos PA anidados en un documento activo.
En el panel Elementos PA tambin se aprecia la anidacin de los elementos:

Figura 10.14. Elementos PA anidados.
Es posible anidar elementos PA existentes. Para anidar un elemento PA ya existente dentro de
otro, slo hay que seleccionarlo en el panel Elementos PA con el botn izquierdo del ratn y
arrastrarlo, manteniendo pulsada la tecla Ctrl, hasta el PA que queremos que lo contenga.
Redimensionar capas
Si la operacin que queremos realizar es cambiar el tamao de un elemento PA, tenemos
varias vas para hacerlo:
Asignando los valores oportunos en los campos referidos a la anchura y a la altura dentro del
Inspector de Propiedades.

Seleccionando el PA (mediante cualquiera de los mtodos antes mencionados) y arrastrar
con el ratn cualquiera de los manejadores de tamao que aparecen en el contorno del PA
cuando est seleccionado, hasta conseguir el tamao deseado.
Manteniendo pulsada la tecla Ctrl y pulsando las teclas de flecha tantas veces como sea
necesario, podemos cambiar el tamao del PA pxel a pxel.
Para modificar el tamao de varios elementos PA simultneamente, deben seleccionarse todos
a la vez y, a continuacin, hacer clic en la opcin Modificar>Alinear>Asignar mismo ancho o
Modificar>Alinear>Asignar mismo alto, en funcin de que queramos que todos los PA
seleccionados sean iguales en anchura o en altura.
Tambin podemos modificar el tamao de varios PA, una vez seleccionados todos, desde el
Inspector de Propiedades de varios elementos, introduciendo los valores de ancho y alto que
deseemos.
Mover elementos PA
La forma de mover un elemento PA dentro del documento HTML que estamos creando, es
muy sencilla. El primer paso es seleccionar el PA a mover, para ello basta con hacer clic en el
contorno de dicho elemento dentro de la ventana principal, o bien seleccionarlo en el panel
Elementos PA.
Una vez seleccionado el PA es posible moverlo:
Pxel a pxel utilizando las teclas de direccin del teclado.
El espacio deseado, haciendo clic en el manejador de seleccin que aparece en la esquina
superior izquierda del PA y arrastrndolo con el ratn a la posicin que deseemos.
Cambiar orden de apilamiento de los Elementos PA
En ocasiones necesitaremos cambiar el orden en el que se encuentran apilados los elementos
PA para hacer que unos aparezcan por delante de las otros.
Para llevar a cabo esta tarea es necesario modificar el valor del campo ndice Z.
Esto lo podemos realizar desde el Inspector de Propiedades, o bien desde el panel Elementos
PA:
Una vez seleccionado un PA, desde el Inspector de Propiedades es posible modificar el
valor del campo ndice Z, asignando valores altos para los PA que deseamos que aparezcan en
los niveles superiores y valores ms bajos para los que queramos que aparezcan en niveles
inferiores.
Desde el panel Elementos PA tambin es posible modificar este valor. Se puede seleccionar
un elemento PA haciendo clic con el ratn sobre su nombre y arrastrndolo arriba o abajo de
la lista en funcin de la posicin donde lo queramos colocar. Tambin haciendo clic en la
columna situada bajo el ttulo Z en el elemento del cual queramos modificar dicho ndice.

Propiedades de mltiples Elementos PA
En un apartado anterior vimos cmo modificar las propiedades de un elemento PA utilizando
el Inspector de Propiedades. Hay que apuntar que tambin es posible modificar las
propiedades de varios elementos de forma simultnea.
Seleccionamos aquellos elementos de los cuales queramos modificar dichos valores y, a
continuacin, modificamos los valores deseados en el Inspector de Propiedades. El aspecto
de ste ahora, es diferente al que apareca cuando modificbamos un solo elemento.

Figura 10.15. Inspector de propiedades HTML de varios elementos PA.

Figura 10.16. Inspector de propiedades CSS de varios elementos PA.
En este nuevo Inspector de Propiedades como vemos aparecen nuevas propiedades,
principalmente referidas al formato de fuentes de texto, al estilo, a la justificacin del texto
dentro del PA, todo esto lo podemos ver en la parte superior de este panel.
En la parte inferior del mismo aparece nicamente una nueva propiedad Etiq. (Etiqueta), para
que indiquemos la etiqueta HTML utilizada para definir los elementos PA. El resto de
propiedades son las mismas que tratamos en el apartado dedicado a las propiedades de un PA,
pero lgicamente con la particularidad de que los cambios que apliquemos a cada una de las
propiedades que aqu aparecen afectarn a todos y cada uno de los PA seleccionados.
Convertir elementos PA en tablas
Es posible que una vez que hemos diseado nuestra pgina web utilizando elementos PA,
comprobemos para decepcin nuestra que los navegadores antiguos (anteriores a Microsoft
Internet Explorer 4.0 y a Netscape Navigator 4.0) no muestran los PA de forma correcta.
Si estamos seguros de que los usuarios de nuestra pgina estn a la ltima y no se van a
encontrar este problema, no hay necesidad de llevar a cabo la tarea que vamos a ver a
continuacin, pero en el caso de que esto no sea as deberemos llevar a cabo una conversin
de elementos PA en tablas como veremos ahora.

En Dreamweaver existe una herramienta denominada Convertir Divs PA en tabla que nos va a
permitir realizar esta operacin de forma sencilla e intuitiva. Nosotros disearemos nuestra
pgina web utilizando elementos PA, tal y como hemos visto en este captulo y para asegurar
la compatibilidad con los navegadores ms antiguos utilizaremos esta herramienta para
transformar estos elementos en tablas.
Esta herramienta la encontramos en el men Modificar>Convertir> Divs PA en tabla.

Figur 10.17. Convertir Divs PA en tabla.
Al elegir esta opcin del men se abrir el cuadro de dilogo Convertir Divs PA en tabla, con
las diferentes opciones para configurar esta conversin.

Figura 10.18. Cuadro de dilogo Convertir divs PA en tabla.

Las distintas opciones de las que disponemos a la hora de convertir los PA de nuestra pgina
en tablas son las siguientes:
Ms preciso: va a crear para cada una de los PA existentes una celda, adems de insertar
celdas intermedias para conservar el espacio entre PAs.
Mnimo (contraer celdas vacas): indica que para aquellos elementos que estn situados a
menor distancia de la especificada en el campo Menor que... pxeles los bordes se van a
alinear (es posible que el resultado final no coincida con el diseo original).
Usar GIF transparentes: Dreamweaver utiliza esta opcin para rellenar la ltima fila de la
tabla con imgenes GIF transparentes con el fin de asegurar que las tablas aparezcan con la
misma anchura en cualquier navegador.
Centrar en pgina: muestra la tabla resultante centrada en la pgina.
Herramientas de Diseo: con esta opcin podremos indicar otra serie de operaciones
relativas a la conversin que se est realizando como Evitar solapamientos, Mostrar el panel
de elementos PA o la cuadrcula o Ajustar la tabla resultante a la cuadrcula.

NOTA. Si hay ms de un elemento PA en el documento y stos se encuentran anidados o
superpuestos, esta conversin no se permitir.

Ejercicio

El objetivo de este ejercicio ser la creacin de elementos PA anidados.


Aade un elemento PA a travs de la barra Insertar en la categora Diseo, haciendo clic en
el botn Dibujar Div PA .

Dibuja el elemento haciendo clic con el botn izquierdo del ratn y arrastrando el ratn, en
la ventana del documento, hasta que tenga el tamao deseado.

Selecciona el elemento PA haciendo clic con el botn izquierdo del ratn sobre el recuadro
situado en la parte superior izquierda del elemento .

En el Inspector de Propiedades del elemento PA establece los siguientes valores:

o Nombre: primera.
o Visibilidad: visible.
o Imagen de fondo: la imagen gente.jpg procedente del aula Mentor. Para hacerte con
esta imagen, puedes ir a http://www.mentor.mec.es/administracion.html; est justo

debajo de la palabra EDUCACIN, slo tienes que hacer clic con el botn derecho del
ratn sobre la imagen, seleccionar Guardar imagen como y guardar gente.jpg en la
carpeta imagenes de tu sitio MiWeb.
Si tienes problemas para localizar esta imagen, puedes descargarla tambin desde
Materiales de apoyo, Material necesario para ejercicio, Ejercicios del Captulo 10.
o Desb.: visible.

Figura 10. 19. Inspector de Propiedades del PA llamado primera.

El aspecto del elemento PA dentro del documento HTML debe ser el siguiente:

Figura 10.20. Aspecto del elemento PA insertado en el documento.

Inserta un elemento PA anidado dentro de este primero. Para ello coloca el cursor dentro
del PA que acabas de dibujar y ejecuta Insertar>Objetos de Diseo>Div PA.

Selecciona este nuevo PA y establece sus propiedades en el Inspector:

o Nombre: segunda.
o Visibilidad: visible.

o Color de fondo: #FF3300.
o Desbordamiento: visible.

Figura 10.21. Propiedades del elemento PA anidado.

Teclea dentro de este PA anidado el texto Capa anidada, centrado en negrita.

El nuevo elemento PA creado tendra el siguiente aspecto:

Figura 10.22. Aspecto del elemento PA anidado.

El Panel Elementos PA debe ser el siguiente mostrando los elementos PA anidados:


Figura 10.23. Panel Elementos PA con los dos elementos anidados.

Guarda la pgina HTML creada con el nombre capas2 y pulsa la tecla F12 para ver el
resultado obtenido en un navegador o pulsa Vista en vivo.

Captulo 11.
Multimedia

Dreamweaver CS4. Captulo 11. Multimedia

Captulo 11. MULTIMEDIA
Los elementos multimedia, considerando como tal los archivos de vdeo, los sonidos, las
animaciones Flash,... nos permiten dotar a nuestra pgina Web de un estilo ms ameno, a la
vez que amplan las opciones de diseo disponibles.
11.1. Trabajando con Flash
Insertar un archivo SWF
Uno de los objetos ms comunes para ser aadidos a una pgina Web son los archivos con
formato Flash: pequeas animaciones con movimiento y, en ocasiones, con sonido.
Flash se puede considerar como el estndar de animacin para la Web. Los archivos Flash
ofrecen multitud de posibilidades relativas a sonido, movimiento, imgenes,... adems, al ser
de tamao reducido son relativamente rpidos de descargar. Estos ficheros tendrn la
extensin SWF.

RECOMENDACIN. Para que este tipo de archivos sea visible desde los distintos navegadores
es necesario tener instalado en ellos una pequea aplicacin denominada plug-in. Esta
aplicacin reconocer que en el interior de la pgina Web a la que se est accediendo hay un
fichero de tipo Flash y lo mostrar. El plug-in para mostrar estos elementos se puede
descargar desde la pgina oficial de Adobe (propietarios de Flash) en la direccin:
http://www.adobe.com/es/products/flashplayer/ (es rpido de descargar e instalar).

Para insertar un archivo SWF en una pgina Web, slo hay que colocar el cursor con el puntero
del ratn el lugar en el que queremos insertar el elemento dentro del documento, desplegar
Media y hacer clic en el botn correspondiente a SWF dentro de
la categora Comn en la barra Insertar.

Al hacer esto, si no hemos guardado nunca el documento, Dreamweaver nos pedir que lo
hagamos antes de proceder a insertar el SWF, y una vez guardado el documento, entonces se
abre el cuadro de dilogo Seleccionar archivo, en el cual localizaremos el archivo SWF que
deseemos insertar (.swf) para despus pulsar Aceptar.
Existe otra forma de aadir un objeto Flash a nuestra pgina, utilizando los mens de la
aplicacin. Slo hay que seguir la ruta Insertar>Media>SWF o bien, utilizar la combinacin de
teclas Ctrl+Alt+F.

Figura 11.1. Ejecutar Insertar>Media>SWF.
Al hacer esto, se aadir el fichero SWF a la pgina HTML que estamos creando en el punto
donde le hayamos indicado, mostrando el documento el siguiente aspecto:

Figura 11.2. Archivo .swf de Flash insertado en un documento HTML.

Podemos cambiar las propiedades del archivo .swf, desde el Inspector de Propiedades.

Figura 11.3. Inspector de propiedades de un archivo SWF.
Para ello slo hay que seleccionar el objeto y especificar los datos deseados para los siguientes
campos:
SWF: para indicar un nombre identificador que represente el objeto Flash dentro de la
pgina Web.
An. y Alt.: anchura y altura en pxeles respectivamente con la que deseamos que aparezca el
objeto Flash en el documento.
Archivo: ruta en la que se encuentra ubicado el archivo SWF que estamos modificando
dentro de nuestro equipo. Si hacemos clic sobre el botn Examinar podremos buscar
dicho archivo navegando a travs del sistema de directorios de nuestro disco duro, o bien
indicar manualmente la ruta.
Origen: indica la ruta al archivo origen con la extensin .fla del objeto Flash introducido. Este
fichero con la extensin .fla se utiliza para poder modificar, desde Flash CS4, el objeto

insertado con la extensin .swf por lo que se necesita tener instalados en el sistema tanto
Dreamweaver CS4 como Flash CS4.
Aunque no tengamos instalado en nuestro sistema la aplicacin Flash, podemos insertar un
objeto Flash en nuestra pgina Web, pero no podremos modificarlo. Este campo no aparecer
y, el botn Editar aparecer desactivado ya que no tendr asociada la aplicacin.
Editar: abre directamente Flash para modificar el archivo origen. Si no est instalado en el
sistema Flash este botn est desactivado.
Clase: para aplicar un formato a la visualizacin del objeto Flash en funcin de una hoja de
estilo predefinida.
Bucle: si esta opcin est activada, el objeto Flash que hemos insertado se reproducir
continuamente; si no lo est el objeto se reproducir una vez y se parar.
Rep. Autom.: (reproduccin automtica) si activamos esta opcin, en el momento de que se
cargue la pgina en el navegador se reproducir automticamente el objeto Flash insertado.
Espacio V: (espacio vertical) nmero de pxeles de espacio en blanco que habr por encima y
por debajo del objeto Flash.
Espacio H: (espacio horizontal) nmero de pxeles de espacio a la derecha y a la izquierda
del objeto Flash insertado.
Calidad: de entre los valores de calidad podemos escoger uno:
1. Alta: este valor antepone el aspecto del objeto Flash a la velocidad a la hora de mostrarlo.
2. Alta automtica: intenta encontrar el equilibrio entre ambas cualidades, pero antepone, si
es necesario, el aspecto a la velocidad.
3. Baja: se prioriza la velocidad frente al aspecto.
4. Baja automtica: da prioridad a la velocidad del objeto Flash, pero atendiendo tambin, en
la medida de lo posible, al aspecto.
Escala: escala en achura y altura a la que se debe mostrar el objeto Flash. Es posible escoger
entre los valores siguientes:
1. Predeterminada (mostrar todo): muestra toda la pelcula a su tamao original.
2. Sin borde: ajusta el tamao original de la pelcula de forma que no aparezcan bordes y se
mantenga adems la relacin de aspecto.
3. Ajuste exacto: establece el tamao del objeto Flash a las dimensiones indicadas sin
preocuparse de la relacin de aspecto.
Alinear: esta opcin la utilizamos para alinear el objeto Flash dentro de la pgina que
estamos creando. Las opciones de alineacin disponibles se corresponden con las de esta
figura, idnticas a las que vimos para las imgenes en el captulo 5

.
Wmode: Establece el parmetro Wmode para el archivo SWF con el fin de evitar conflictos
con elementos DHTML, como los widgets de Spry. El valor predeterminado es Opaco, que
permite a los elementos DHTML aparecer sobre los archivos SWF en un navegador. Si el
archivo SWF incluye transparencias y deseas que los elementos DHTML aparezcan detrs de
ellas, selecciona la opcin Transparente. Selecciona la opcin Ventana para eliminar el
parmetro Wmode del cdigo y permitir que el archivo SWF aparezca sobre otros elementos
DHTML.
Reproducir: reproduce la pelcula en la ventana del documento.
Fondo: para indicar un color de fondo para la zona donde est ubicado el objeto Flash que
hemos insertado.
Parmetros: esta opcin muestra un cuadro de dilogo Parmetros, en el cual se podrn
indicar parmetros para pasar al objeto Flash en el caso de que ste los necesite. Haciendo clic
en el botn aadimos parmetros y, haciendo clic en los borramos. Adems para
cada parmetro se debe especificar un nombre y un valor.

Figura 11.4. Cuadro de dilogo Parmetros.

Ejercicio

El objetivo de este ejercicio ser insertar un SWF en la pgina Web.


Para hacer el ejercicio descarga previamente de Materiales de apoyo, Material necesario
para ejercicios, Ejercicios del Captulo 11, que tienes en el aula virtual, el fichero
multimedia1.swf y gurdalo en tu carpeta imagenes del sitio MiWeb.

Crea una nueva pgina bsica HTML (Archivo>Nuevo).

A continuacin selecciona SWF desde el men desplegable del icono Media en la ficha
Comn de la barra Insertar.

Figura 11.5. Insertar SWF.

Al hacer esto aparecer el cuadro de dilogo Seleccionar archivo, desde el cual podrs
seleccionar el archivo Flash a insertar: multimedia1.swf.

Si se abren los Atributos de accesibilidad de la etiqueta de objeto donde podemos darle
datos identificativos a nuestro swf si as lo deseamos, aunque tambin podemos Cancelar y
hacerlo ms adelante, que es lo que vamos a hacer en este ejercicio.

Figura 11.6. Atributos de accesibilidad de la etiqueta de objeto.

Una vez insertado el objeto Flash en la pgina, lo seleccionas y, desde el Inspector de
Propiedades, indicas los siguientes datos:

o Anchura: 250 pxeles.
o Altura: 250 pxeles.
o Bucle: activa esta opcin para que el archivo se reproduzca continuamente en la
pgina HTML.
o Espacio V y Espacio H: 150 pxeles y 200 pxeles respectivamente.

Figura 11.7. Inspector de propiedades del SWF insertado.

Guarda (Archivo>Guardar) la pgina creada con el objeto Flash insertado y le asignas el
nombre multimedia1.

RECOMENDACIN. Slo debemos publicar trabajos originales o de libre uso. En caso
contrario deberemos pedir permiso por escrito al autor. El material publicado en Internet est
protegido por la legislacin sobre Propiedad Intelectual.

Insertar un archivo FLV
De la misma manera que hemos aprendido a insertar objetos de Flash, tambin podemos
insertar vdeos de flash, son los archivos FLV. Para insertar un vdeo FLV podemos ir al panel
Insertar, categora Comn, desplegar Media y seleccionar FLV , o ejecutar
Insertar>Media>FLV.

Figura 11.8. Insertar FLV.
En cualquier caso, se abre el cuadro de dilogo Insertar FLV,

Figura 11.9. Cuadro de dilogo Insertar FLV. Tipo Descarga progresiva de vdeo.
en el cual podemos configurar las siguientes opciones:
Tipo de vdeo: si lo desplegamos podemos seleccionar Descarga progresiva de vdeo o
Flujo de vdeo.
o Si seleccionamos Descarga progresiva de vdeo, descarga el archivo FLV en el disco
duro del visitante del sitio y lo reproduce. Sin embargo, a diferencia de los
mtodos tradicionales de entrega de vdeo de tipo descarga y reproduccin, la
descarga progresiva permite iniciar la reproduccin del archivo de vdeo antes de
que haya finalizado la descarga.
o Si seleccionamos Flujo de vdeo, transfiere el contenido de vdeo y lo reproduce en
una pgina Web transcurrido un breve periodo debfer que garantice una
reproduccin fluida. Para activar el flujo de vdeo en las pginas Web, se debe
tener acceso a Adobe Flash Media Server.

En el caso de seleccionar Descarga progresiva de vdeo, las opciones configurables en el
cuadro de dilogo Insertar FLV son:

URL especifica una ruta de acceso relativa o absoluta al archivo FLV. Para especificar una
ruta de acceso relativa, haremos clic en el botn Examinar , localizaremos el archivo
FLV en nuestro equipo y lo seleccionaremos. Para especificar una ruta de acceso absoluta,

escribiremos el URL (por ejemplo, http://fresno.pntic.mec.es/mgas0012/mivideo.flv) del
archivo FLV.
Aspecto especifica el aspecto del componente de vdeo. Si lo desplegamos, podemos
escoger entre diversos tipos de interfaces para nuestro componente
. Se muestra una presentacin
preliminar del aspecto seleccionado bajo el men emergente Aspecto.

Ancho especifica el ancho del archivo FLV en pxeles. Para que Dreamweaver calcule el
ancho exacto del archivo FLV, haremos clic en el botn Detectar tamao. Si Dreamweaver
no puede calcular el ancho, deberemos introducir un valor de anchura.

Altura especifica el alto del archivo FLV en pxeles. Para que Dreamweaver calcule el alto
exacto del archivo FLV, haremos clic en el botn Detectar tamao. Si Dreamweaver no
puede calcular el alto, deberemos introducir un valor de altura.

Total con aspecto es el valor del ancho y alto del archivo FLV ms el ancho y alto del
aspecto seleccionado.

Restringir mantiene la misma relacin de aspecto entre el ancho y el alto del componente
de vdeo. Esta opcin est activada de forma predeterminada.

Reproduccin automtica especifica si el archivo se va a reproducir al abrir la pgina Web.

Rebobinado automtico especifica si el control de reproduccin vuelve al punto de inicio
cuando finalice la reproduccin.

Una vez configuradas todas las opciones, hacemos clic en Aceptar y el FLV quedar insertado
en nuestro documento.
El comando Insertar FLV crea un archivo SWF de reproductor de vdeo y un archivo SWF de
aspecto que se utilizan para mostrar el contenido de vdeo en una pgina Web. (Quizs tengas
que hacer clic en el botn Actualizar del panel Archivos para ver los nuevos archivos.) Estos
archivos se almacenan en el mismo directorio que el archivo HTML al que estamos aadiendo

contenido de vdeo. Cuando carguemos la pgina HTML que incluye el archivo FLV,
Dreamweaver cargar estos archivos como archivos dependientes (siempre y cuando haymos
pulsado en S en el cuadro de dilogo Colocar archivos dependientes).

En el caso de seleccionar Flujo de vdeo, las opciones configurables en el cuadro de dilogo
Insertar FLV son un poco diferentes a las anteriores:

Figura 11.10. Cuadro de dilogo Insertar FLV. Tipo Flujo de vdeo.

URL de servidor especifica el nombre de servidor, nombre de la aplicacin y nombre de
instancia con el formato rtmp://www.ejemplo.com/app_name/instance_name.

Nombre de flujo especifica el nombre del archivo FLV que deseamos reproducir (por
ejemplo, mivideo.flv). La extensin .flv es opcional.

Aspecto especifica el aspecto del componente de vdeo, de idntico modo a como vimos
para la Descarga progresiva de vdeo.

Entrada de vdeo en vivo especifica si el contenido de vdeo es contenido en vivo. Si se
selecciona Entrada de vdeo en vivo, el reproductor de Flash reproducir una entrada de
vdeo en vivo transmitida en flujo desde Flash Media Server. El nombre de la entrada de
vdeo en vivo es el nombre especificado en el cuadro de texto Nombre de flujo.

Si activamos la opcin Entrada de vdeo en vivo, slo aparecer el control de volumen en
el aspecto del componente, porque no es posible manipular el vdeo en vivo. Tampoco
tendrn ningn efecto las opciones Reproduccin automtica y Rebobinado automtico.

Reproduccin automtica especifica si el archivo se va a reproducir al abrir la pgina Web.

Rebobinado automtico especifica si el control de reproduccin vuelve al punto de inicio
cuando finalice la reproduccin.

Tiempo de bfer especifica los segundos necesarios para almacenar en bfer el vdeo
antes de iniciar su reproduccin. El tiempo de bfer predeterminado es 0, de forma que el
vdeo comienza a reproducirse inmediatamente despus de pulsar el botn Reproducir. (Si
se activa la opcin Reproduccin automtica, el vdeo comenzar a reproducirse en
cuanto se establezca una conexin con el servidor.) Si lo desearamos, tambin podemos
establecer un tiempo de bfer, por ejemplo, si deseamos publicar contenido de vdeo con
una velocidad de bits superior a la velocidad de conexin del usuario o cuando el trfico de
Internet pueda provocar cuellos de botella en el ancho de banda o problemas de
conectividad. Por ejemplo, si deseamos enviar 15 segundos de vdeo a la pgina Web antes
de que sta comience a reproducirlo, estableceremos un tiempo de bfer de 15.

Una vez configuradas estas opciones, hacemos clic en Aceptar para insertar el FLV en el
documento. Como en el caso anterior, en este tipo Flujo de vdeo, crea un archivo SWF de
reproductor de vdeo y un archivo SWF de aspecto que se utilizan para mostrar el vdeo en una
pgina Web. El comando tambin crea un archivo main.asc que debe cargarse en Flash Media
Server. (Quizs tengas que hacer clic en el botn Actualizar del panel Archivos para ver los
nuevos archivos.) Estos archivos se almacenan en el mismo directorio que el archivo HTML al
que ests aadiendo contenido de vdeo. Cuando cargues la pgina HTML que incluye el
archivo FLV, no olvides cargar los archivos SWF en el servidor Web y el archivo main.asc en
Flash Media Server.

Si deseamos cambiar la configuracin del FLV insertado, entonces podremos hacerlo,
seleccionndolo previamente en el documento activo, desde el Inspector
de Propiedades; las opciones configurables en el inspector son las mismas que habamos visto
referidas al cuadro de dilogo Insertar FLV. Lo nico que no puede cambiarse en el inspector
son los tipos de vdeo. La nica manera de cambiar el tipo de vdeo es eliminar el componente
e insertarlo de nuevo.


Figura 11.11. Inspector de propiedades de un vdeo FLV insertado en un documento.

Al insertar un archivo FLV en una pgina, Dreamweaver inserta cdigo que detecta si el usuario
dispone de la versin correcta del reproductor Flash Player. Si no dispone de ella, la pgina
mostrar un contenido alternativo predeterminado que solicita al usuario que descargue la
versin ms reciente. Se puede cambiar este contenido alternativo en cualquier momento.
Este procedimiento tambin es aplicable a archivos SWF.

Figura 11.12. Contenido alternativo sobre versin del Flash Player en vista Diseo.

Podemos editar la informacin de descarga del reproductor Flash Player de la siguiente
manera:

En la vista Diseo de la ventana de documento, selecciona el archivo SWF o el archivo FLV.

Haz clic en el icono del ojo de la ficha del archivo SWF o el archivo FLV.

Edita el contenido del mismo modo que cualquier otro contenido de Dreamweaver.

Haz clic en el icono de nuevo para regresar a la vista de archivo SWF o FLV.

Este sera el mensaje que nos mostrara Dreamweaver en la Vista en vivo:

Figura 11.13. Vista en vivo del mensaje alternativo.

Insertar Flash Paper
Del mismo modo que hemos insertado archivos SWF o FLV, podemos insertar documentos
Flash Paper en nuestras pginas web. Cuando se abra una pgina que contenga un documento
FlashPaper en un navegador, el usuario puede navegar por todas las pginas del documento
FlashPaper sin necesidad de cargar pginas Web nuevas. El usuario tambin puede realizar
bsquedas en el documento, imprimirlo y utilizar la herramienta Zoom para acercarse o
alejarse.
Para insertar este tipo de documento en nuestra pgina, bien seleccionamos el icono Media
de la categora Comn del panel Insertar,

Figura 11.14. Insertar Flash Paper desde Categora Comn.
bien, ejecutamos Insertar>Media>Flash Paper.

Figura 11.15. Ejecutar FlashPaper.
Una vez llevado a cabo cualquiera de estos dos procedimientos, se abre el cuadro Insertar
FlashPaper, en el que podemos insertar la ruta al documento Flash Paper, bien teclendola , o
bien pulsando Examinar hasta localizar dicho documento en nuestro equipo, as como
especificar las dimensiones del objeto Flash Paper en la pgina Web. Para ello, introducimos el
ancho y el alto en pxeles. Flash Paper vara la escala del documento para ajustar el ancho.

Figura 11.16. Cuadro de dilogo Insertar FlashPaper.

Una vez hagamos clic en Aceptar el documento de Flash Paper queda insertado en nuestra
pgina y podemos configurar tambin los atributos de accesibilidad si tenemos configurado el
programa para que se abran para este tipo de objetos, o ir directamente al inspector de
propiedades del Flash Paper por si queremos editar este objeto. Las propiedades
configurables para este tipo de objetos son similares a las que ya hemos visto para los objetos
SWF, ya que ambos objetos comparten inspector.
Dado que un documento Flash Paper es un archivo SWF, en la pgina aparece un marcador de
posicin de archivo SWF. Para obtener la vista previa del documento Flash Paper, pulsamos en
el marcador de posicin y pulsamos el botn Reproducir del inspector de propiedades.
Pulsaremos en Detener para poner fin a la vista previa. Tambin podemos obtener una vista
previa del documento en un navegador presionando F12. La barra de herramientas de Flash
Paper se muestra al completo en el navegador.
11.2. Archivos de sonido
A la hora de insertar sonido a una pgina Web es necesario conocer cules son los previsibles
gustos de los usuarios potenciales de nuestra pgina, el tema al que est dedicado la pgina
Web, la calidad del sonido, el tamao del archivo, cmo se reproduce un mismo archivo de
audio en los diferentes navegadores, ...
Todas estas cuestiones habr que tenerlas en cuenta a la hora de decidirnos a insertar un
archivo de audio en nuestra pgina, sobre todo cuando muchos usuarios mientras navegan por
Internet estn escuchando su propia msica en el ordenador y el hecho de que en una pgina
aparezca un sonido que se entremezcle quiz no sea del todo de su agrado.

RECOMENDACIN. Deberemos incluir un sonido en una pgina Web SLO Y
EXCLUSIVAMENTE CUANDO SEA NECESARIO y no como norma general. Aparte de aumentar
el tamao de la pgina, un sonido reiterativo puede resultar exasperante.

De entre los distintos formatos de audio existentes, los ms comunes a la hora de trabajar en
una pgina Web son:
Formato .midi o .mid: formato de msica instrumental, generalmente de pequeo tamao y
calidad aceptable (vara en funcin de la tarjeta de sonido del usuario). Se suele utilizar como
msica de fondo en algunos sitios.
Formato .mp3: formato de audio comprimido, de calidad muy alta comparable con la de un
CD. El tamao de estos archivos es relativamente grande y puede ser lento de descargar para
conexiones telefnicas. Adems los navegadores necesitarn tener instalado un plug-in para
reproducirlo correctamente.
Formato .wav: este formato de sonido tiene una buena calidad, es compatible con la
mayora de los navegadores y adems no necesitan ningn plug-in para reproducirlo. El nico

problema que presentan estos archivos es el gran tamao de los mismos, en ocasiones
inaceptable a la hora de navegar por internet.
Formato .aif: igual que los arhivos WAV, tienen una calidad de sonido aceptable, son
compatibles con la mayora de los navegadores y no es necesario un plugin para reproducirlos.
Adems presentan un problema similar, el tamao excesivo de los mismos.
Formato RealAudio: los archivos con este formato tendrn extensin .ra, .ram o .rpm. Son
archivos de sonido comprimidos, con un tamao algo menor a los archivos de formato mp3, y
de calidad aceptable. Para reproducirlos hace falta un plug-in denominado RealPlayer.
Formato .qt, .qtm, .mov o QuickTime: es un formato de audio y de vdeo desarrollado por
Apple Computer. QuickTime est incluido con los sistemas operativos Apple Macintosh, y lo
utilizan la mayora de las aplicaciones de Macintosh que emplean audio, vdeo o animacin.
Los PC tambin pueden reproducir archivos en formato QuickTime, pero requieren un
controlador de QuickTime especial. QuickTime admite la mayora de los formatos de
codificacin, como Cinepak, JPEG y MPEG.
Insertar archivos de sonido mediante un vnculo
La forma ms sencilla de aadir sonido a nuestra pgina Web es mediante un vnculo. Esto
permite que aquellos usuarios que deseen escuchar el sonido vinculado a la pgina hagan clic
en este vnculo y lo escuchen y, aquellos usuarios cuyo navegador no les permita escuchar
sonido o, simplemente, no lo quieran escuchar puedan navegar tranquilamente por la pgina
sin problemas ni molestia alguna.
Para insertar un archivo de sonido de esta forma creamos un hipervnculo usando texto o
imagen como vnculo al archivo de sonido, (como hemos visto en el captulo dedicado a
Vnculos) y en el campo Vnculo indicamos la ruta donde se encuentra el archivo de sonido que
deseamos vincular.

Figura 11.17. Cuadro de dilogo Hipervnculo com ruta a un archivo de udio.

Para probar el hipervnculo que acabamos de crear, abrimos el navegador pulsando la tecla
F12.
Al hacer clic en dicho hipervnculo, se abrir el reproductor de sonido que tenga asociado el
navegador para este tipo de archivos. Por ejemplo, si es un archivo de tipo Windows Media
(con extensin WMA), se abrir el Windows Media Player para reproducirlo (en cada
navegador es posible configurar que reproductor se utilizar para abrir cada archivo de
sonido).

Figura 11.18. Inspector de propiedades HTML de un hipervnculo a un sonido.
Por ltimo, comentar que es recomendable guardar los archivos de sonido que vincularemos
en nuestra pgina en el interior de la carpeta Activos dentro de la raz de nuestro sitio y,
posteriormente crear los enlaces oportunos a cada uno de estos sonidos.
Incrustar archivos de sonido
Adems del mtodo explicado en el apartado anterior existe otra forma de aadir sonido a
nuestra pgina Web: incrustarlo en la propia pgina.
De esta forma el sonido se reproducir siempre que se muestre la pgina, con el condicionante
de que un usuario lo escuchar correctamente slo si tiene instalado el plug-in adecuado para
ello.
Al insertar sonido de esta forma en la pgina, podremos especificar ms en detalle las
propiedades que debe tener en cuanto a duracin del sonido, puntos de inicio y fin del mismo,
el volumen al que se debe escuchar,
Para insertar un sonido de esta forma elegimos el lugar de la pgina donde lo queremos
insertar y hacemos clic en la barra Insertar, dentro de la categora Comn y dentro de ella en
el botn Media. Se despliega un listado en el que elegimos la opcin Plugin . Tambin es
posible insertar un sonido utilizando los mens de la aplicacin Insertar>Media>Plug-in.

Figura 11.19. Ejecutar Insertar Plug-in.
En el cuadro de dilogo Seleccionar archivo que se abre, seleccionamos el fichero de audio
que queremos incrustar y pulsamos Aceptar.
Una vez llevada a cabo esta operacin, el sonido incrustado en la pgina mostrar el siguiente
aspecto en la ventana del documento:

Figura 11.20. Aspecto del archivo de sonido incrustado en la ventana del documento.


Para seleccionar y editar el archivo de sonido podemos seleccionarlo y recurrir al Inspector de
Propiedades.

Figura 11.21. Inspector de Propiedades de un audio incrustado.
En este Inspector de Propiedades es posible modificar los siguientes datos:
Plug-in: nombre que se le asignar al archivo de sonido que acabamos de insertar dentro de
la pgina Web.
An y Al: anchura y altura respectivamente de los controles de audio que se mostrarn en el
navegador a la hora de reproducirse el sonido.
Origen: en este campo deberemos seleccionar el archivo de audio que insertaremos en la
pgina. Haciendo clic en el botn aparecer el cuadro de dilogo para seleccionar el
archivo correspondiente de entre los que se encuentren en nuestro disco duro. Tambin es
posible rellenar y modificar este campo manualmente, slo se debe indicar la ruta completa al
archivo que queramos incrustar.
URL plg: este campo se utiliza para especificar la ruta completa desde donde se puede
descargar el plug-in adecuado para escuchar el sonido vinculado correctamente.
Alinear: especifica cul va a ser la alineacin del objeto en la pgina (tal y como se especific
en el captulo dedicado a las imgenes).
Clase: si deseamos aplicar algn formato de presentacin basado en una hoja de estilo, ste
es el campo indicado para ello.
Reproducir: si hacemos clic en este botn podremos probar el sonido que acabamos de
insertar.
Espacio V: (espacio vertical) nmero de pxeles de espacio en blanco que habr por encima y
por debajo del plug-in.
Espacio H: (espacio horizontal) nmero de pxeles de espacio a la derecha y a la izquierda del
plug-in.
Borde: se utiliza para indicar el ancho del borde alrededor del plug-in.
Parmetros: esta opcin muestra un cuadro de dilogo en el cual podremos indicar los
parmetros para pasar al plug-in. Haciendo clic en el botn aadimos parmetros y,
haciendo clic en los borramos. Adems para cada parmetro se debe especificar un

nombre y un valor. Los parmetros se pueden considerar atributos que definirn el
comportamiento de la reproduccin del archivo de sonido.

Figura 11.22. Parmetros de un archivo de sonido incrustado.

Ejercicio

El objetivo de este ejercicio ser incrustar un archivo de sonido de fondo en nuestra pgina
Web, de forma que cuando el usuario visite nuestra pgina comenzar a escuchar la msica
que nosotros hayamos insertado.

Antes de comenzar, debers ir a la carpeta Ejercicios del Captulo 11 del Material
necesario para ejercicios de Materiales de apoyo que est en el aula virtual del curso y
copiar a la carpeta Elementos de tu sitio MiWeb un archivo de sonido .midi llamado
primaver.

Ahora abre el documento html que habas creado en el ejercicio anterior y guardado con el
nombre multimedia1.

Sita el cursor debajo del objeto SWF que habas insertado antes, y a continuacin
selecciona la opcin Plug-in desde la categora Comn del panel Insertar.

En el cuadro de dilogo Seleccionar archivo que se abre, localiza y selecciona el archivo de
sonido midi llamado primaver que habas guardado en tu equipo, y por ltimo pulsa
Aceptar.


Figura 11.23. Cuadro de dilogo Seleccionar Archivo.

Una vez seleccionado dicho archivo, el aspecto que mostrar la pgina en Dreamweaver ser la
siguiente:

Figura 11.24. Archivo de sonido incrustado en nuestra pgina multimedia1.

Desde el Inspector de Propiedades, asigna las siguiente opciones:

o Plugin: (nombre del objeto insertado) sonido.
o An y Al (anchura y altura): 350 y 50 pxeles respectivamente.
o Espacio V y Espacio H: 10 pxeles en ambo casos.
o Origen: aqu deber aparecer indicada la ruta hacia el archivo de sonido que acabamos
de incrustar, que en nuestro ejercicio, si lo hemos hecho todo siguiendo las
indicaciones propuestas ser Elementos/primaver.MID.
o Borde: 1 pxel

El resto de parmetros los dejamos sin modificar.

Figura 11.25. Inspector de propiedades del archivo de sonido incrustado en nuestro ejercicio.

Guarda los cambios (Archivo>Guardar) y comprueba el funcionamiento de la pgina Web
en diferentes navegadores.

11.3. Archivos de vdeo
Al insertar un archivo de vdeo debemos tener en cuenta dos premisas fundamentales: el
vdeo debe tener una calidad aceptable y, adems, su tamao no debe ser excesivamente
grande.
Adems de los FLV que hemos visto anteriormente como objetos de vdeo Flash, de entre los
formatos de vdeo ms conocidos y utilizados destacan los siguientes:
Archivos con extensin AVI: es el formato habitual de los archivos de vdeo en Windows, de
ah que sean muy conocidos.
Archivos con formato MPEG: archivos con formato comprimido de tamao reducido.
Archivos RealVideo: archivos que permiten ser reproducidos en tiempo real a la vez que son
descargados. Para su correcta reproduccin es necesario tener instalado el programa
RealPlayer.
Archivos MOV: otro formato de vdeo que necesita el programa QuickTime para
reproducirse.
Insertar un vdeo
Para insertar un vdeo vamos a la barra Insertar y dentro de la categora Comn desplegamos
la opcin Media. Al hacer esto se despliega un listado en el que elegimos la opcin Plug-in ,
tal y como hemos visto para los archivos de sonido.

Tambin podemos ejecutar Insertar>Media>Plug-in. En cualquier caso el aspecto del
documento activo en el que estamos trabajando es el mismo que para la adicin de sonido.
El aspecto del Inspector de Propiedades y, por tanto, las propiedades a especificar son las
mismas que para los archivos de sonido, con dos particularidades:
Lgicamente, en este caso en el campo Origen debemos especificar un archivo de vdeo y no
uno de audio. El proceso para seleccionarlo es igual al mencionado para los archivos de audio.
A la hora de especificar la anchura y la altura (en los campos An y Al) con la que se mostrar
el vdeo, sera bueno conocer a priori el formato original en el que se encuentra dicho fichero
(en cuanto a tamao nos referimos), de forma que a la hora de mostrarlo no aparezca
distorsionado.
Podemos comprobar cmo se visualiza un vdeo que hayamos insertado pulsando la tecla F12.
Al hacer esto se abrir el navegador predeterminado y podremos comprobar el resultado de
nuestra operacin.
11.4. Otros objetos multimedia
Adems de todos los objetos que hemos visto en el captulo, Dreamweaver permite tambin
insertar objetos de Shockwave, applets de Java y controles Activex. El proceso para insertar
cualquiera de estos objetos es idntico a los vistos para el resto; podemos ejecutar
Insertar>Media y seleccionar el tipo de objeto a insertar en nuestra pgina,

Figura 11.26. Insertar diferentes objetos multimedia.
O pulsar en el icono correspondiente al medio a insertar desde la categora Comn del panel
Insertar, desplegando Media:

Figura 11.27. Insertar Media desde la categora Comn de la barra Insertar.
Se abrir el cuadro Seleccionar archivo que nos permitir localizar el objeto a insertar en
nuestro equipo, y una vez pulsemos Aceptar podremos tambin configurar los atributos de
accesibilidad del objeto multimedia.
Una vez insertado el objeto, al igual que en el caso de los vistos anteriormente, podremos
seleccionarlo y modificar sus propiedades desde el inspector, como por ejemplo el archivo de
origen, las dimensiones y otros parmetros y atributos de cada objeto.

Modulo B

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Modulo B

Загружено:

Авторское право:

Доступные форматы

Captulo 4.

Вам также может понравиться