Curso de Dreamweaver Cs3

-1-
Curso de Dreamweaver CS3. ndice

Cmo utilizar este curso.
1. Conceptos bsicos de
Dreamweaver CS3
2. El entorno de trabajo
3. Configuracin de un sitio local
4. El texto
5. Hiperenlaces
6. Imgenes
7. Tablas
8. Marcos
9. Formularios
ndice detallado
10. Multimedia
11. Las plantillas
12. HTML desde Dreamweaver
13. Otros elementos
14. Capas
15. Comportamientos
16. Comportamientos Avanzados
17. Estilos CSS Avanzado
18. Sitios Remotos
19. Servidor de Pruebas

20. Pginas Dinmicas
21. Cmo crear un Blog
22. XML y RSS
23. Acceso a datos con Spry
24. AJAX y Spry Framework
25. Spry y Formularios
26. Controles Spry Avanzados
-2Unidad 1. Conceptos bsicos de Dreamweaver CS3
Qu es Dreamweaver CS3
HTML bsico
Novedades de Dreamweaver CS3
Editar pginas web
Cmo tener una pgina en Internet
Arrancar y cerrar Dreamweaver CS3
Compaginar dos sesiones
Abrir y guardar documentos
Mi primera pgina
Unidad 2. El entorno de trabajo
La pantalla inicial
Las barras
Los paneles e inspectores
Personalizar el rea de trabajo
Vistas de un documento
La ayuda
Unidad 3. Configuracin de un sitio local
Introduccin
Crear o editar un sitio web sin conexin a Internet
Vistas del sitio
Subir archivos al servidor
Comprobar tamao para optimizar la carga
Propiedades del documento
Los colores
Unidad 4. El texto
Caractersticas del texto

Listas
Caracteres especiales
Estilos CSS. Introduccin
Crear un estilo personalizado
El Panel CSS
Crear un nuevo estilo
Gestionar estilos CSS
Aplicar un estilo
Hojas de Estilos
Unidad 5. Hiperenlaces
Introduccin
Tipos de enlaces
Crear enlaces
Personalizar nuevos enlaces
Destino del enlace
Formato del enlace
Enlace a correo electrnico
Vnculos rotos
Unidad 6. Imgenes
Introduccin
Tipos de imgenes para una web
Insertar una imagen
Cambiar el tamao de una imagen
Mapas de imagen
Imagen de sustitucin. Rollover
Botones Flash
Texto Flash
Barra de navegacin
Unidad 16. Comportamientos Avanzados
Mensajes Emergentes
Texto de la Barra de Estado
Carga Previa de Imgenes
Abrir una Ventana del Navegador
Comprobar Navegador
Comprobar Plug-ins
Mens de Salto
Unidad 17. Estilos CSS Avanzado
Aplicar Estilos CSS

Estructura CSS
Selectores CSS
Selectores de Atributo
Pseudo-clases y Pseudo-elementos CSS
Controles de Fuente
Espaciado
Aspecto del texto
Controles de Ratn
Controles de Lista
Controles de Fondo
Controles de Margen
Bordes
Controles de Elementos de Bloque y en Lnea
Controles de Posicin
Controles de Visibilidad
Unidad 18. Sitios Remotos
Configurar un Sitio Remoto

El Panel Archivos
Sincronizar Sitios
Unidad 19. Servidor de Pruebas
Introduccin a PHP
Bases de datos
Estructura PHP
Instalar un Servidor Local con WAMP
Trabajar con Servidor Local WAMP
Configurar un Servidor de Pruebas
Introduccin a phpMyAdmin
Crear una Base de Datos en phpMyAdmin
Crear una Tabla en phpMyAdmin
Insertar Datos en una Tabla en phpMyAdmin
Modificar una Tabla en phpMyAdmin
Modificar Datos de una Tabla
Establecer Privilegios en phpMyAdmin
Unidad 20. Pginas Dinmicas
Introduccin
Crear una Conexin a la Base de Datos
Juegos de Registros o RecordSets
Mostrar Datos Dinmicos
Repeticiones
Orden de Juegos de Registros
Filtrado de Juegos de Registros
Paginacin de Registros
Mostrar/Ocultar Regiones
Uso de Variables
Pginas Maestro-Detalle
Asistente de Insercin de Registros
Asistente de Actualizacin de Registros
Asistente de Eliminacin de Registros
Juegos de Registros Avanzados
Unidad 7. Tablas
Introduccin
Insertar una tabla
Unidad 21. Cmo crear un Blog
-3-
Ejercicios paso a paso

* Descargar archivos para
ejercicios *
3. Crear un sitio web local
3. Crear nuevo documento y
modificar sus propiedades
4. Insertar texto y modificar sus
propiedades
4. Convertir texto en una lista
4. Crear estilos CSS
5. Crear un hiperenlace
5. Crear un vnculo de correo
electrnico
6. Insertar una imagen
6. Crear mapas de imagen
6. Crear botones Flash
7. Crear y rellenar una tabla
7. Modificar las propiedades de la
tabla
7. Aadir y eliminar filas
7. Combinar celdas
8. Crear y configurar marcos
9. Insertar elementos de
formulario
10. Insertar un archivo de audio
11. Crear una plantilla
12. Buscar y reemplazar
13. Insertar fecha
14. Insertar una capa
15. Crear comportamiento
17. Crear una hoja de estilos

20. Insercin de Registros
17. Utilizando pseudo-elementos y 20. Utilizar sentencias SQL
clases
21. Estructura de datos de un Blog
17. Controles de fuente
17. Controles de ratn
21. Interfaz Pblica
17. Controles de fondo
21. Creacin de un men de
17. Controles de mrgenes y
Administracin
bordes
21. Insercin de elementos
17. Controles de bloque
21. Listado de elementos
19. Instalacin de WAMP
21. Modificacin de elementos
19. Crear un servidor de pruebas 21. Eliminacin de elementos
19. Crear una Base de Datos
21. Restringir acceso
19. Crear una Tabla
22. Preparando el servidor de
19. Importar datos a una Tabla
pruebas
19. Asignar privilegios en una
22. Importar datos XML
base de datos
22. Enlaces con elementos
20. Crear una conexin a una
22. Repeticin de elementos
Base de Datos
22. Ordenacin de elementos
20. Crear un Recordset
22. Insertar XSLT en una pgina
20. Crear Texto Dinmico
dinmica
20. Repeticiones de Texto
22. Paso de parmetros
Dinmico
24. Incluir Spry
20. Ordenacin de un Recordset 24. Crear un Dataset
20. Filtrado de Registros
24. Crear una Regin con
20. Paginacin de Registros
Informacin
20. Recuento de Registros
24. Crear repeticiones de
20. Ocultar/Mostrar Regiones
Registros
20. Enlaces con Parmetros
24. Crear Filtros
20. Filtros con Parmetros
Vdeotutoriales
Ejercicios propuestos
3. Crear sitio local y modificar las

propiedades de la pgina
Indice
4. Modificar las propiedades del
1. Conceptos bsicos
texto
5. Crear hiperenlaces
2. Las vistas
6. Insertar imgenes
2. La ayuda
7. Modificar tablas
3. Crear un sitio local
3. Las propiedades de la pgina 8. Configurar marcos
9. Insertar elementos de
4. Las caractersticas del texto
formulario
4. Crear estilo CSS
10. Insertar elementos multimedia
5. Los hiperenlaces
11. Trabajar con plantillas
6. Insertar una imagen
12. Buscar y reemplazar
6. Crear un botn Flash
13. Insertar otros elementos
6. Crear un texto Flash
14. Insertar capas
7. Insertar una tabla
15. Crear comportamientos
8. Insertar marcos
16. Crear comportamientos
9. Insertar un formulario
10. Insertar elementos multimedia avanzados
17. Estilos CSS avanzados
11. Crear una plantilla
20. Pginas Dinmicas
13. Otros elementos
21. Cmo hacer un Blog
14. Insertar una capa
22. XML y RSS
15. Insertar comportamientos
23. Spry y Acceso a datos
16. Crear un men de salto
17. Estilos CSS
25. Spry y los Formularios
18. Sitios Remotos
26. Controles Avanzados Spry
19. Crear B. de datos en
PhpMyAdmin
Pruebas evaluativas
1. Conceptos bsicos de
Dreamweaver CS3
3. Configuracin de un sitio local
4. El texto
5. Hiperenlaces
6. Imgenes
7. Tablas
8. Marcos
9. Formularios
10. Multimedia
11. Las plantillas
13. Otros elementos
14. Capas
15. Comportamientos
16. Comportamientos Avanzados
17. Estilos CSS Avanzados
18. Sitios Remotos
20. Pginas Dinmicas
21. Cmo crear un Blog
22. XML y RSS
23. Spry y Acceso a datos
-419. Modificar Tablas

20. Crear un recordset
20. Utilizar datos de un recordset
20. Paginacin de registros
20. Insertar registros
20. Eliminar registros
21. Qu es un Blog
22. XML y RSS
23. Spry y Acceso a Datos
Unidad 1. Conceptos bsicos de Dreamweaver CS3 (I)

Dreamweaver CS3 es un software fcil de usar que permite crear pginas web profesionales.
Las funciones de edicin visual de Dreamweaver CS3 permiten agregar rpidamente diseo y
funcionalidad a las pginas, sin la necesidad de programar manualmente el cdigo HTML.
Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc., de
una forma muy sencilla y visual.
Adems incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar con mapas
visuales de los sitios web, actualizando el sitio web en el servidor sin salir del programa.
Para seguir este curso te puedes descargar la versin gratuita de Dreamweaver desde la pgina de
Adobe, la versin caduca al cabo de 30 das, pero seguro que te animas a comprar la versin de pago
de este estupendo programa.
Los logotipos de Dreamweaver son propiedad de Adobe, as como las marcas registradas Dreamweaver
y Adobe. aulaClic no tiene ninguna relacin con Adobe.
Si no conoces las caractersticas bsicas de HTML puedes verlas aqu.
HTML bsico
Las pginas que vemos en Internet estn escritas utilizando el lenguaje HTML (Hyper Text Markup
Language). Este lenguaje est basado en etiquetas que marcan el inicio y fin de cada elemento de la
pgina Web.
Por ejemplo, el ttulo de la pgina Web se escribe entre las etiquetas <TITLE> y </TITLE>. Como ves,
ambas etiquetas consisten en poner un mismo comando entre los smbolos "<" y ">". La primera
etiqueta indica inicio, y la segunda, que incluye el smbolo "/", indica final.
Las etiquetas disponen de atributos que permiten definir caractersticas del elemento sobre el que
actan. Por ejemplo, <TABLE Border="1"> indica que la tabla tendr un borde de tipo 1.
Una pgina HTML bsica tendra el siguiente aspecto:
-5<HTML>
<HEAD>
<TITLE> Mi primera pgina web </TITLE>
<BODY>
<A href:"http://www.aulaclic.com"> Haz clic aqu para ir a aulaClic</A>
resto de la pgina web
</BODY>
<HTML>
Las etiquetas que se introducen en un documento HTML no son visibles cuando el documento se
muestra en un navegador (IExplorer, Netscape, etc). Cuando un usuario desde Internet solicita ver una
pgina el servidor Web enva la pgina al navegador y este interpreta las etiquetas para dar el formato a
la pgina.
Cuando utilizamos Dreamweaver para crear una pgina Web no tenemos que preocuparnos de todo esto.
Dreamweaver inserta automticamente las etiquetas necesarias para construir la pgina con la apariencia y
contenido definidos en el editor grfico.
Novedades de Dreamweaver CS3

En este punto comentaremos las caractersticas que aporta esta nueva versin sobre la anterior.
Mejoras en Spry. El "Framework" o estructura Spry ha recibido un fuerte impulso en esta versin de
Dreamweaver. Spry es un conjunto de archivos JavaScript que permiten la inclusin de elementos
dinmicos en las pginas HTML. Por ejemplo se pueden incluir acordeones, barras de menus,
validacin de formularios, acceso a datos XML, etc.
Tambin se han incluido efectos spry que se aplican a elementos ya existentes en la pgina HTML para
hacer que se desvanezcan, reduzcan su tamao, se resalten, etc.
Mayor integracin con Photoshop y Fireworks. Ahora es posible pegar directamente imgenes desde
Photoshop en una pgina HTML de Dreamweaver. Luego con un doble clic podremos ir a editar la
imagen en Photoshop. Se pueden importar imgenes con capas.
Mejoras en la comprobacin de la compatiblidad con diferentes navegadores. Dreamweaver CS3
puede generar informes con los problemas de visualizacin de elementos CSS en los navegadores ms
utilizados.
Adobe CSS Advisor es un sitio web accesible desde Dreamweaver que contiene informacin til para
resolver los problemas de compatibilidad entre navegadores.
Mejoras en CSS. La administracin de CSS es ms fcil, ahora se pueden trasladar elementos CSS
entre diferentes hojas de estilo. Tambin ha aumentado la cantidad de plantillas CSS disponibles para
aplicar a nuestras pginas web.
Adobe Device Central, incluido en la Adobe Creative Suite, facilita la publicacin en dispositivos
mviles, PDAs, etc..
Unidad 1. Conceptos bsicos de Dreamweaver CS3 (II)

Editar pginas web
Cualquier editor de texto permite crear pginas web. Para ello slo es necesario crear los documentos
con la extensin HTML o HTM, e incluir como contenido del documento el cdigo HTML deseado.
Puede utilizarse incluso el Bloc de notas para hacerlo.
-6Pero crear pginas web mediante el cdigo HTML es ms costoso que hacerlo utilizando un editor
grfico. Al no utilizar un editor grfico cuesta mucho ms insertar cada uno de los elementos de la
pgina, al mismo tiempo que es ms complicado crear una apariencia profesional para la pgina.
Hoy en da existe una amplia gama de editores de pginas web. Uno de los ms utilizados, y que
destaca por su sencillez y por las numerosas funciones que incluye, es Adobe Dreamweaver.
Adems de Dreamweaver, existen otra serie de buenos editores de pginas web, como pueden ser
Microsoft Frontpage, Adobe Pagemill, Adobe GoLive, NetObjects Fusion, CutePage, HotDog
Proffesional, Netscape Composer y Arachnophilia, algunos de los cuales tienen la ventaja de ser
gratuitos.
Cmo tener una pgina en Internet

Para poder poner una pgina web en Internet, es necesario contratar a alguna empresa con servidores
que pueda alojarla y hacerla accesible desde Internet las 24 horas del da. El precio por disponer de
espacio propio en el servidor depender de la empresa, del espacio en disco, volumen de transferencia
y otras opciones que podamos contratar.
Hay empresas que ofrecen este servicio gratuitamente, pero con ciertas limitaciones: poco espacio de
disco, lentitud y nombre de nuestra pgina precedido por el de la suya. Hay que tener tambin en
cuenta que estas empresas deben generar ingresos de alguna forma, por lo que se dedican a vender
espacios publicitarios dentro de nuestras pginas, publicidad que no podremos negarnos a incluir en
ellas.
Por estos motivos, no se recomienda utilizar hospedaje gratuito para la pgina de una empresa, aunque
s es aceptable para una pgina personal.
Cuando se va a contratar un servicio de hospedaje es necesario contratar tambin un dominio, tarea de
la que se suele encargar la propia empresa de hospedaje. Registrar un dominio consiste en registrar un
nombre para nuestra pgina. Este nombre no puede estar repetido en Internet, ha de ser nico, al igual
que ocurre con los nombres de las empresas. Es posible registrar un mismo nombre con distintas
terminaciones, como por ejemplo, .net, .org, .es o .com.
En el caso de los hospedajes gratuitos no es necesario registrar ningn dominio, ya que nuestra pgina
no ser ms que un archivo dentro de la de la empresa contratada.
A la hora de contratar un servicio de hospedaje tambin hay que tener en cuenta el nmero de cuentas
de correo electrnico propias que pueden habilitarse y si disponemos de una base de datos para poder
acceder a ella a travs de programacin va Web, aunque esto ltimo ser til slo para usuarios
avanzados.
Si piensas contratar un servicio de hospedaje te recomendamos Alojalia.com
En cualquier caso, una vez tengas tu espacio en Internet, darle contenido es muy sencillo.
Dreamweaver te permite crear una copia local (en tu ordenador) del sitio web que luego querrs que se
encuentre a disposicin de todo el mundo en Internet.
Por tanto, una vez hayas terminado de disearla en modo local slo tendrs que subirla a tu servidor
manteniendo la estructura del local. Es decir, debers subir todos los archivos tal y como aparecen
en tu disco duro, respetando el nombre de los archivos y la organizacin de las carpetas. Si no lo
haces de este modo, tu sitio experimentar fallos y enlaces que no funcionarn.
Recuerda que ser mejor que no utilices caracteres especiales como acentos o ees, ni espacios
en blanco. De esta forma te asegurars de que el servidor puede reconocer sin ningn tipo de
problemas los nombres de los archivos que alojes en l.
Para evitar errores de enlaces rotos o imgenes que no se muestran intenta escribir, tambin, los
nombres en minscula. Algunos servidores distinguen entrre maysculas y minsculas, por lo que si
-7en tu pgina quieres mostrar la imgen foto1.jpg debers guardarla con ese nombre y no como
Foto1.jpg. Evitars horas perdidas buscando fallos.
Unidad 1. Conceptos bsicos de Dreamweaver CS3 (III)

Veamos las dos formas bsicas de arrancar Dreamweaver CS3.
Desde el botn Inicio
situado, normalmente, en la esquina inferior izquierda de la pantalla.
Colocar el cursor y hacer clic sobre el botn Inicio, se despliega un men; al colocar el cursor sobre
Todos los programas aparece otra lista con los programas que hay instalados en tu ordenador, buscar
Adobe, seguidamente Dreamweaver CS3, hacer clic sobre l, y se arrancar el programa.
Desde el icono de Dreamweaver CS3 del escritorio
Puedes arrancar Dreamweaver CS3 ahora para ir probando todo lo que te explicamos. Cuando realices
los ejercicios tambin puedes compaginar dos sesiones de la forma que te explicamos aqu.
Compaginar dos sesiones

Aqu te explicaremos cmo conseguir tener la pantalla dividida en dos partes, una con el curso y otra
con Dreamweaver CS3.
1 Abrir la sesin con el curso en Internet Explorer.
2 Abrir la sesin de Dreamweaver CS3.
3 Pulsar con el botn derecho sobre cualquier parte vaca de la barra de tareas, en la parte inferior de la
ventana de Windows (del escritorio). Es la barra en la que se encuentra el botn Inicio.
4 Elegir la opcin Mosaico vertical.
Observa como la pantalla ha quedado dividida en dos partes, como en la figura:
5 Una vez tenemos las dos sesiones con el tamao adecuado, basta hacer clic con el ratn para pasar
de la una a la otra.
Para volver a dejar las ventanas con su tamao normal, hacer clic en el botn Maximizar
Esto va bien con monitores grandes ( de 17" o ms), con monitores pequeos quizs prefieras dejar las ventanas
con su tamao normal e ir pasando de una a otra presionando las teclas Alt + tabulador (manteniendo pulsada
-8Alt, presionar la tecla tabulador) o pulsando el botn correspondiente a la sesin en la barra de tareas en la ltima
lnea de la pantalla.
Para cerrar Dreamweaver MX 2004, puedes utilizar cualquiera de las siguientes operaciones:
Hacer clic en el botn cerrar
Pulsar la combinacin de teclas ALT+F4.
Hacer clic sobre el men Archivo y elegir la opcin Salir.
Si existe algn documento modificado que no ha sido guardado antes de cerrar Dreamweaver, se te
pedir confirmacin para guardar o no cada uno de ellos.
Abrir y guardar documentos

Para abrir un documento, puedes utilizar cualquiera de las siguientes operaciones.
Hacer clic en el botn abrir
de la barra de herramientas estndar.
Pulsar la combinacin de teclas Ctrl+O.

Hacer clic sobre el men Archivo y elegir la opcin Abrir.
Hacer doble clic sobre el archivo en la ventana del sitio.
Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes operaciones.
Hacer clic en el botn abrir
Pulsar la combinacin de teclas Ctrl+N.

Hacer clic sobre el men Archivo y elegir la opcin Nuevo.
Hacer doble clic sobre el archivo en la ventana del sitio.
Despus de esto aparecer una nueva ventana, en la que debers elegir la Categora Pgina en
blanco, HTML.
Para guardar un documento, puedes utilizar cualquiera de las siguientes operaciones.
Hacer clic en el botn guardar
Pulsar la combinacin de teclas Ctrl+S.

Hacer clic sobre el men Archivo y elegir la opcin Guardar.
Dreamweaver incluye la posibilidad de, en el caso de estar trabajando simultneamente con varios
documentos, poder guardar todos de golpe, sin la necesidad de hacerlo uno por uno. Para guardar
todo puedes realizar cualquiera de las siguientes operaciones.
Hacer clic en el botn guardar todo
Hacer clic sobre el men Archivo y elegir la opcin Guardar todo.

Al tener varios documentos abiertos es fcil olvidarse de todos las modificaciones hechas en cada uno
de ellos. Debes tener mucho cuidado al utilizar la opcin guardar todo, ya que en ocasiones es posible
-9no desear guardar los cambios en todos los documentos modificados. Por ello es conveniente que al
principio no utilices esta opcin, al menos hasta que te hayas habituado a manejar el programa.
Unidad 1. Conceptos bsicos de Dreamweaver CS3 (IV)

Para que te vayas haciendo una idea de cmo funciona Dreamweaver, vamos a crear una pgina web
sencilla, con varios estilos de texto, una imagen y un enlace a otra pgina. Crear esta pgina solo te
llevar unos pocos minutos, y sabrs cmo trabajar con los elementos bsicos con los que estn
hechas la mayora de las pginas web. Si nunca has hecho una pgina web, este es el momento para
descubrir lo fcil que es.
Mi primera pgina
Lo primero que tienes que hacer es abrir Dreamweaver. Ya has visto en la pgina anterior como puede
hacerse. Abres un documento nuevo y seleccionas la Categora Pgina bsica, HTML.
Seguidamente introduce, en el documento en blanco, el texto que aparece en la imagen siguiente.
Una vez introducido el texto, vas a modificar el ttulo y el color de fondo del documento.
Para ello debes hacer clic sobre el men Modificar y elegir la opcin Propiedades de la pgina.
Entonces se abrir una ventana como la que aparece ms abajo.
Cambia el Ttulo por Mi primera pgina.

En Color de Fondo escribe #CCCCFF, de este modo el fondo del documento pasar a ser de color
azul.
Seguidamente pulsa sobre el botn Aceptar.
Ahora vas a insertar una imagen. Para insertar la imagen, ha de estar accesible para nosotros. Para ello
debe encontrarse en nuestro disco duro, en un cd-rom o en un disquete, pero preferiblemente en el
disco duro.
Muchas de las imgenes que vemos en Internet se pueden copiar al disco duro. Al hacer clic con el
botn derecho del ratn sobre la imagen que queremos traer de Internet, se abre una ventana con una
- 10 opcin similar a Guardar imagen como... (dependiendo del navegador que utilices) que permite grabar
dicha imagen en un fichero de nuestro disco duro.
En los navegadores ms modernos al colocar el cursor sobre una imagen aparecen estos iconos
en una esquina de la imagen, si haces clic en el icono del disquete aparecer el mismo
men Guardar imagen como... a que hacamos referencia anteriormente.
Copia la imagen que aparece a continuacin, para luego poder insertarla en la pgina web que estamos
creando. Puedes guardarla, por ejemplo, en la carpeta Mis Documentos.
Ahora tienes que insertar la imagen debajo de la
segunda lnea de texto. En primer lugar debes
situar el cursor al final de la segunda lnea y
pulsar un intro (Enter) para ir a una nueva lnea.
Despus debes dirigirte al men Insertar, a la
opcin Imagen.
En la nueva ventana que aparece, debers
buscar la imagen en la carpeta en la que la
habas guardado, y despus seleccionarla.
Unidad 1. Conceptos bsicos de Dreamweaver CS3 (V)

Ahora vas a pasar a cambiar el formato del texto. Para ello necesitas visualizar el inspector de
propiedades que se encuentra normalmente en la parte inferior de la ventana, y que tiene el siguiente
aspecto:
Si no te aparece, puedes mostrarlo a travs del

men Ventana, con la opcin Propiedades.
Si lo que te ocurre es que nicamente te aparece
el ttulo del panel, es porque est contraido. Para que te aparezca desplegado debes pulsar sobre el
botn
, que aparece junto al nombre.
Selecciona la primera lnea de texto y cambia el Formato por Encabezado 1 y el color por #000066, tal
y como se muestra en la siguiente imagen.
Despus de esto, la apariencia de la primera lnea habr cambiado. Selecciona la imagen y las dos
timas lneas de texto. Pulsa sobre el botn
para centrarlos.
Una vez hayas centrado la imagen y las otras dos lneas siguientes, selecciona la segunda lnea de
texto, que an no ha sido modificada. Cambia el Formato por Encabezado 3, pulsa una vez sobre el
botn
y pulsa tres veces sobre el botn
- 11 -
Selecciona de nuevo la ltima lnea, y en Vnculo introduce http://www.elpais.es, para crear un enlace
a esa otra pgina:
Despus de todos estos pasos, puedes ver cmo ha quedado el documento pulsando la tecla F12.
Por ltimo guarda el documento. Ya sabes que puedes hacerlo a travs del men Archivo, desde la
opcin Guardar.
Puedes llamar al documento como lo desees, pero siempre teniendo en cuenta que la extensin ha de
ser htm o html.
Por ejemplo, puedes llamarlo prueba1.htm.
Si pulsas aqu podrs ver cmo debera haber quedado la pgina despus de haber seguido todos los
pasos anteriores. Compara esta pgina con la tuya, para ver si lo has hecho todo bien.
Esta es mi primera pgina

Esta es una pgina para probar el funcionamiento de Dreamweaver.
A continuacin se muestra un enlace para acceder a otra web:

www.elpais.es
Unidad 2. El entorno de trabajo (I)

Vamos a ver cules son los elementos bsicos de Dreamweaver CS3 , la pantalla, las barras, los
paneles, etc, para saber diferenciar entre cada uno de ellos. Aprenderemos cmo se llaman, dnde
estn y para qu sirven. Tambin veremos cmo obtener ayuda, por si en algn momento no sabemos
cmo seguir trabajando. Cuando conozcamos todo esto estaremos en disposicin de empezar a crear
pginas web.
La pantalla inicial
Al arrancar Dreamweaver aparece una pantalla inicial como sta, vamos a ver sus componentes
fundamentales. As conoceremos los nombres de los diferentes elementos y ser ms fcil entender
el resto del curso. La pantalla que se muestra a continuacin (y en general todas las de este curso)
puede no coincidir exactamente con la que ves en tu ordenador, ya que cada usuario puede decidir qu
elementos quiere que se vean en cada momento, como veremos ms adelante.
- 12 -
Unidad 2. El entorno de trabajo (II)

Las barras
La barra de ttulo
La barra de ttulo contiene el nombre del programa (Marcromedia Dreamweaver CS3) y seguidamente
el nombre del documento que aparecer en el explorador y entre parntesis, su ubicacin y el nombre
del archivo en formato html. En el extremo de la derecha estn los botones para minimizar,
maximizar/restaurar y cerrar.
La barra de mens
La barra de mens contiene las operaciones de Dreamweaver, agrupadas en mens desplegables. Al

hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con los diferentes elementos
que se pueden insertar en Dreamweaver.
Muchas de las operaciones se pueden hacer a partir de estos mens, pero para algunas es preferible o
indispensable hacerlas desde los paneles.
La barra de herramientas estndar
La barra de herramientas estndar contiene iconos para ejecutar de forma inmediata algunas de las
operaciones ms habituales, como Abrir
, Guardar
, etc.
- 13 La barra de herramientas de documento
La barra de herramientas de documento contiene iconos para ejecutar de forma inmediata algunas
otras operaciones habituales que no incluye la barra de herramientas estndar. Estas operaciones son
las de cambio de vista del documento, vista previa, etc.
La barra de estado
La barra de estado nos indica en cada momento en qu etiqueta HTML nos encontramos (en la imagen
al encontrarnos en un documento en blanco estamos directamente sobre la etiqueta <body>).
Tambin nos es posible alternar entre los modos de seleccin, mano (para arrastrar la pgina), o
zoom. En cualquier momento puedes seleccionar el zoom preferido desde el desplegable zoom y
ajustar la vista al porcentaje preferido (por defecto siempre viene al 100%).
Los paneles e inspectores
Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se conocen como
paneles o inspectores. La diferencia entre panel e inspector es que, en general, la apariencia y
opciones de un inspector cambian dependiendo del objeto seleccionado.
A travs de la opcin Ventana, de la barra de mens, es posible mostrar u ocultar cada uno de los
paneles o inspectores. Vamos a ver los ms importantes.
El inspector de Propiedades
El inspector de Propiedades muestra y permite modificar las propiedades del elemento seleccionado
que son usadas de forma ms frecuente. Por ejemplo, cuando el elemento seleccionado sea texto
mostrar el tipo de fuente, la alineacin, si est en negrita o cursiva, etc.
Pulsando sobre el botn
esquina inferior-derecha.
se despliega para mostrar ms opciones. Este botn se encuentra en la
Seguramente ser la herramienta de Dreamweaver que ms vayas a utilizar.

La barra de herramientas Insertar o panel de objetos
- 14 -
La barra de herramientas Insertar o panel de objetos permite insertar elementos en un documento

sin la necesidad de recurrir al men Insertar. Los elementos estn clasificados segn su categora:
tablas, texto, objetos de formulario, etc.
Es posible configurar este panel para que en los botones se muestren los iconos de los objetos (como
ocurre en la imagen anterior), para que se muestren los nombres de los objetos, o para que se
muestren ambos a la vez.
Si lo deseas puedes personalizar el rea de trabajo, te explicamos cmo hacerlo aqu
Personalizar el rea de trabajo (I)

Cambiar el aspecto del Panel de objetos
Es posible cambiar el aspecto del panel de objetos, se puede visualizar a modo de fichas, tal como
aparece en la siguiente imagen:
Tambin puede tener este otro aspecto:
Para pasar del aspecto Fichas al otro hay que hacer clic sobre el botn
Mostrar como men.
, y seleccionar la opcin
Para volver al aspecto Fichas, desplegamos el men Diseo (o el que est en ese momento) y
seleccionamos la opcin Mostrar como fichas.
Cambiar el nombre de un grupo de paneles
Es posible cambiar el nombre de un grupo de paneles de forma

sencilla. Vamos a ver como ejemplo el cambio de nombre del panel
de objetos.
- 15 -
En estos momentos el panel se llama "Insertar", pero queremos renombrarlo como "Insert". Para ello lo
primero que hay que hacer es pulsar con el botn derecho sobre la zona del nombre
o
hacer clic sobre el botn con el siguiente aspecto
, ambos situados a los extremos superiores del
panel.
Entonces se mostrar el siguiente men, en el que habr que elegir la opcin Cambiar nombre de
grupo de paneles....
Despus de esto se mostrar una ventana en la que se podr introducir el nuevo nombre del panel
Cambiar la agrupacin de los paneles
La mayora de los paneles y los inspectores aparecen agrupados junto a otros en una misma ventana
flotante.
Para cambiar la agrupacin de un panel o de alguna de
sus pestaas es necesario, en primer lugar, seleccionar
el panel y la pestaa deseados.
Por ejemplo, vamos a ver cmo cambiar la agrupacin
de la pestaa Elementos PA del panel CSS.
Como puede apreciarse en la imagen, la pestaa
Elementos PA ya est activa.
Seguidamente hay que hacer clic sobre el botn con el siguiente aspecto
derecho sobre la zona del nombre del panel o de la pestaa.
, o pulsar con el botn
Para cambiar la agrupacin del panel a otro grupo diferente es necesario dirigirse a Agrupar
Elementos PA con, despus de lo cual debe mostrarse una lista de todos los paneles, pudiendo
seleccionar uno de ellos.
De este modo Elementos PA dejara de estar incluida en el
panel CSS, y aparecera en ese otro panel.
Personalizar el rea de trabajo (II)

Cambiar los mtodos abreviados de teclado
- 16 Los mtodos abreviados de teclado son las combinaciones de teclas que permiten acceder a algunas
opciones sin la necesidad de moverse a travs de los mens. Para modificar las combinaciones de
teclas hay que dirigirse al men Edicin, a la opcin Mtodos abreviados de teclado.
En esta nueva ventana es necesario seleccionar un comando y una de las combinaciones de la lista de
Mtodos abreviados, situar el cursor en el campo Pulse tecla, seguidamente pulsar la combinacin de
teclas deseada, y por ltimo hacer clic sobre el botn Cambiar.
Es posible que no se permita modificar las combinaciones de teclas del conjunto seleccionado, por ser
combinaciones que provienen de fbrica, por lo que se pedir confirmacin para crear una copia
modificable del conjunto.
Hay que tener tambin en cuenta que no se permite asignar a un comando una combinacin de teclas
que ya est asignada a otro diferente.
Acoplar y desacoplar grupos de paneles

Para facilitar la organizacin de los paneles flotantes es posible acoplarlos a la derecha o izquierda del
rea de trabajo, en un grupo de paneles.
Para mover un panel, ya sea para acoplarlo o desacoplarlo de un grupo de paneles, simplemente hay
que pulsar sobre la zona de puntos que se encuentra junto al nombre del panel, y mantener pulsado
el ratn mientras se arrastra el panel hacia el lugar deseado.
Los grupos de paneles pueden mostrarse y ocultarse pulsando sobre el botn que tiene el siguiente
aspecto .
Tambin pueden mostrarse y ocultarse todos los paneles pulsando la tecla F4, o a travs de una opcin
del men Ventana.
Al ocultar los paneles la ventana de trabajo queda ms grande, por lo que estas opciones son de gran
utilidad.
- 17 -
Unidad 2. El entorno de trabajo (III)

Vistas de un documento
Puedes cambiar la vista del documento a travs de la barra de herramientas de documento.
La vista Diseo
La vista Diseo permite trabajar con el editor visual. Es la vista predeterminada de Dreamweaver y la
que se suele utilizar habitualmente.
- 18 -
La vista Cdigo
La vista Cdigo se utiliza para poder trabajar en un entorno totalmente de programacin, de cdigo
fuente. No permite tener directamente una referencia visual de cmo va quedando el documento segn
se va modificando el cdigo.
La vista Cdigo y Diseo
- 19 La vista Cdigo y Diseo permite dividir la ventana

en dos zonas. La zona superior muestra el cdigo
fuente, y la inferior el editor visual. Cuando se realiza
un cambio en alguna de las zonas, este cambio se
aplica directamente sobre la otra.
La ayuda
A travs del men Ayuda puedes ir a varias opciones, veamos algunas de ellas:
Acceder al cuadro de dilogo de ayuda muy similar al de Windows donde puedes buscar por temas,
por ndice o por contenido, si seleccionas la opcin Ayuda de Dreamweaver o simplemente pulsando
F1.
Acceder a tutoriales en internet (en la opcin Recursos de ayusa en lnea).
Abrir el panel Referencia en el que encontrars la sintaxis y descripcin de las etiquetas HTML.
Acceder al Centro de servicio tcnico de Dreamweaver en la web.
Acceder al Foros en lnea de Adobe.
Unidad 3. Configuracin de un sitio local (I)

En este tema vamos a ver qu es un sitio web, cmo crearlos y gestionarlos, y cmo modificar las
propiedades de los documentos, como puede ser el color de fondo.
- 20 -
Introduccin
Un sitio web es un conjunto de archivos y carpetas, relacionados entre s, con un diseo similar o un
objetivo comn. Es necesario disear y planificar el sitio web antes de crear las pginas que va a
contener.
La forma habitual de crear un sitio consiste en crear una carpeta en el disco local. Los documentos
HTML normalmente se crean dentro de dicha carpeta, mientras que para contener las imgenes, las
animaciones, las hojas de estilo, etc., se deben crear nuevas carpetas dentro de sta, con el objetivo de
tener una mejor organizacin de los archivos a la hora de trabajar. Esto es lo que se conoce como sitio
local.
Despus se podrn copiar los archivos en un servidor web, en el denominado sitio remoto, lo que
equivale a publicar el sitio, de modo que la gente podr verlo en Internet.
La organizacin de los archivos en un sitio permite administrar y compartir archivos, mantener los
vnculos de forma automtica, utilizar FTP para cargar el sitio local en el servidor, etc.
Es conveniente que la pgina inicial del sitio tenga el nombre index.htm o index.html, ya que los
navegadores buscan una pgina con ese nombre cuando se intenta acceder a una URL genrica.
Por ejemplo, si escribiramos la direccin genrica http://www.aulaclic.com en el navegador, ste
intentara cargar la pgina http://www.aulaclic.com/index.htm, por lo que se producira un error en el
caso de que no existiera ninguna pgina con el nombre index.htm.
Crear o editar un sitio web sin

conexin a Internet
Una vez creadas las carpetas que formarn un
sitio local, ya es posible definir el sitio en
Dreamweaver.
Para ello hay que dirigirse al men Sitio, a la
opcin Administrar sitios....
Recuerda que a travs del panel Archivos,
pestaa Archivos, se puede acceder a cada uno
de los sitios creados y a la opcin
Administrar sitio.
En el caso de haber seleccionado la opcin

Administrar sitios, aparece una ventana que
contiene la lista de sitios locales definidos con
anterioridad.
Por supuesto, pueden existir varios sitios locales en
un mismo ordenador.
- 21 Tanto si se elige la opcin Nuevo..., como si se elige la opcin Editar..., se mostrar la misma ventana
en la que definir las caractersticas del sitio.
Las caractersticas del sitio se agrupan en diferentes categoras que aparecen en la parte izquierda.
Para visualizar las caractersticas de una categora basta con seleccionarla de la lista haciendo clic
en ella.
Vamos a ver los datos que hay que editar para la categora Datos locales.
Debe definirse el Nombre del sitio y la Carpeta raz local, que es en la que se encuentra el sitio dentro
del disco duro local.
Despus, si se desea, a travs de la categora Mapa de diseo del sitio puede definirse la pgina
principal del sitio, de la que colgarn el resto de documentos HTML dentro del sitio, si en la carpeta raz
del sitio existe una pgina con el nombre index.htm, Dreamweaver la coger por defecto.
Estas tres caractersticas son las imprescindibles para definir un sitio local.
Las dems opciones en este momento no nos interesan, ya que estamos definiendo el sitio local, y no
es necesario establecer los datos del servidor en el que estar el sitio remoto.
Despus de rellenar los datos pulsamos el botn Aceptar y abrimos el sitio.
Si preferimos utilizar un asistente para crear el sitio web slo tenemos que seleccionar la pestaa
Bsicas, en vez de la pestaa Avanzadas.
Abrir un sitio
Para abrir un sitio ya definido hay que dirigirse al men Sitio, a la opcin Administrar sitios....
seleccionar el sitio de la lista de sitios y pulsar sobre el botn Listo.
- 22 Tambin podemos utilizar el panel Archivos, buscar y seleccionar el sitio a abrir en el men
desplegable de la pestaa Archivos.
Para practicar puedes realizar el Ejercicio paso a paso Crear un sitio web local.
Ejercicio paso a paso. Unidad 3.Crear un sitio web local

Practicar las operaciones que hay que realizar para crear un sitio web sin conexin a Internet.
En cada tema hay ejercicios paso a paso y ejercicios propuestos, en ambos casos es importante que
realices los ejercicios por orden, sin saltarte ninguno. Estos ejercicios estn diseados para ir
construyendo una pgina web completa y si intentas realizar un ejercicio sin haber hecho los anteriores
puede que no veas un resultado muy coherente o no puedas seguir el ejercicio.
1 Si es la primera vez que realizas este ejercicio, copia en la carpeta Mis documentos de tu disco duro,
la carpeta ejerciciosdream, que se encuentra dentro de la carpeta ejercicios del curso. Si ests
siguiendo el curso gratis desde Internet debes hacerte Usuario Registrado para descargarte los archivos
para este curso.
2 Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio.
3 Haz clic sobre el men Sitio.
4 Elige la opcin Administrar sitios. Se abrir una nueva ventana.
5. Selecciona el botn Nuevo..., y selecciona la opcin Sitio. Se abrir una nueva ventana.
5 Selecciona la pestaa Avanzadas de la nueva ventana.
6 Selecciona Datos locales en Categora.
7 En Nombre del sitio escribe Cocina.
8 En Carpeta raz local busca la carpeta cocina, que se encuentra dentro de la carpeta
ejerciciosdream, y seleccinala. Puedes hacerlo a travs del botn con forma de carpeta.
9 En Carpeta predeterminada de imgenes busca la carpeta imagenes, que se encuentra dentro de
la carpeta cocina, y seleccinala. Puedes hacerlo a travs del botn con forma de carpeta.
10 Haz clic sobre el botn Aceptar y sobre el botn Listo.
A partir de este momento, realizando los ejercicios paso a paso, vamos a crear una pgina como la que
aparece si pulsas aqu.
- 23 -
- 24 -
Unidad 3. Configuracin de un sitio local (II)

Vistas del sitio
Es posible visualizar un sitio en el panel Archivos o en una ventana.
El panel Archivos se puede abrir a travs del men Ventana, opcin Archivos. Tambin pulsando F8.
Para cambiar de una vista a otra hay que pulsar sobre el botn
panel y de la ventana.
que aparece en la parte superior del
Al mismo tiempo, es posible visualizar el sitio local, el sitio remoto, el servidor remoto de prueba o el
mapa del sitio.
En esta imagen se visualizan el mapa del sitio y el sitio local.
En este caso los documentos prueba1.htm y prueba2.htm cuelgan del documento indice.htm, ya que
ste ha sido definido como pgina principal del sitio y contiene vnculos hacia los otros dos.
- 25 -
Si los archivos se mueven de una carpeta a otra, o se cambian de nombre, desde fuera de
Dreamweaver, las pginas no se mostrarn correctamente: no aparecern imgenes, no funcionarn
enlaces, etc.
En cambio, si estas modificaciones se hacen desde dentro de Dreamweaver, a travs del sitio, es
posible actualizar automticamente las pginas para que si hacen referencia a un objeto que ha
cambiado, despus no se produzcan problemas al visualizarlas.
Al modificar algn objeto que es referenciado por algn otro documento, se muestra una ventana similar
a esta, que indica los documentos que hacen referencia a dicho objeto, y que pueden ser actualizados
para que no se produzcan los problemas antes mencionados.
Simplemente hay que pulsar sobre el botn Actualizar.
Subir Archivos al servidor

Cuando quieras visualizar el sitio en Internet (al terminar el curso o para hacer pruebas) debers subir
los archivos al sitio que hayas contratado o conseguido gratuitamente.
- 26 Algunos sitios gratuitos slo permiten que subas archivos va web, por lo que debers ir subiendo uno a
uno cada archivo y creando las carpetas t mismo. Este proceso puede hacerse muy largo y debes
tener mucho cuidado en mantener la estructura tal y como se encuentra en tu carpeta del disco
duro. Sino los enlaces no funcionarn correctamente y es posible que algunas imgenes no se
muestren.
Para subir los archivos via web debers seguir las instrucciones que te proporcionar tu servidor.
La alternativa es un servidor FTP, que se utiliza en todos los sitios de pago y en algunos gratuitos.
Esta forma es, de lejos, mucho mejor que la anterior.
Va FTP puedes ver el contenido de tu sitio como una carpeta ms (igual que en el Explorador de
Windows) y, obviamente, nos es mucho ms til para subir los archivos.
Uno de los programas gratuitos (si no es con fines comerciales) ms utilizados es SmartFTP, desde su
pgina web podrs descargarte el programa y su traduccin al espaol.
Una vez instalado, abre el programa y haz clic en Archivo y luego en Nuevo Navegador Remoto para
crear una nueva cuenta FTP.
Aqu debers introducir los datos que te facilit el servidor donde vas a alojar tus pginas: Host,
Usuario y Contrasea.
Rellena los campos y haz clic en OK. Se conectar automticamente y podrs ver una carpeta donde
podrs copiar los archivos que hayas creado.
Para ello, haz clic en Archivo y en Nuevo Navegador Local para abrir un navegador de los archivos de
tu disco duro. Busca la carpeta que definiste como Sitio local y copia todos los archivos que quieras
subir seleccionndolos a la vez y arrastrndolos a la carpeta (remota) del servidor.
- 27 -
Vers como el programa empieza a copiar la informacin de tu disco a Internet.

Cuando haya finalizado, slo tendrs que introducir tu direccin de Internet en la barra de direcciones
de tu navegador (Firefox, Internet Explorer...) y vers el sitio en Internet!
Los servidores de pago, normalmente suelen mostrar varias carpetas al conectar con el servidor.
Busca la carpeta public_html y sube tus archivos all.
Unidad 3. Configuracin de un sitio local (III)

Propiedades del documento
Es conveniente definir sitios homogneos, que todas las pginas de un sitio sigan un mismo formato, es
decir, que tengan el mismo color de fondo, de fuente, etc.
Puede definirse el formato de cada una de las pginas a travs del cuadro de dilogo Propiedades de
la pgina.
Este cuadro se puede abrir de tres modos diferentes:
Pulsar la combinacin de teclas Ctrl+J.
Hacer clic sobre el men Modificar y elegir la opcin Propiedades de la pgina.
Hacer clic con el botn derecho del ratn sobre el fondo de la pgina. Aparecer al final del men
contextual la opcin Propiedades de la pgina. Se abrir el cuadro de dilogo siguiente:
- 28 -
Las propiedades estn organizadas en categoras.

En la categora Aspecto, como ves en la imagen anterior, encontramos las propiedades:
Imagen de fondo: permite especificar una imagen de fondo para el documento. Dicha imagen se
muestra en mosaico. Es importante al elegir una imagen de fondo tener en cuenta que segn los
colores de la imagen ser necesario establecer unos u otros colores para el texto, as como que no es
conveniente tener un gif animado como fondo.
Color de fondo: permite especificar un color de fondo para el documento, pero dicho color solo se
mostrar en el caso de no haber establecido ninguna imagen de fondo.
Tamao: permite definir el tamao de la letra.
Color del texto: es el color de la fuente.
Mrgenes: permiten establecer mrgenes en el documento. Los mrgenes izquierdo y superior solo
funcionan en Microsoft Internet Explorer, mientras que el ancho y el alto de mrgen solo funcionan para
Netscape Navigator. Ninguno de estos mrgenes aparece en la ventana de documento de
Dreamweaver, solo se mostrarn en los navegadores.
En la categora Ttulo/Codificacin encontramos la propiedad:
Ttulo: es el ttulo del documento, que aparecer en la barra de ttulo del navegador y de la ventana de
documento de Dreamweaver.
En la categora Vnculos encontramos las propiedades:
- 29 -
Color de vnculo: es el color de los vnculos, que ayuda al usuario a distinguir entre el texto normal y
los vnculos que sirven de enlace a otras pginas.
Vnculos visitados: es el color de los vnculos visitados, que permite distinguir al usuario si unos
vnculos ya han sido visitados o no.
Vnculos activos: es el color de los vnculos activos.
Estilo subrayado: por defecto, cuando tenemos un texto con un vnculo asociado, el texto aparece
subrayado, con esta opcin podemos elegir otro tipo de estilo por ejemplo para que no aparezca
subrayado.
En la categora Imagen de rastreo encontramos las propiedades:
Imagen de rastreo: permite establecer una imagen como fondo del documento, pero que slo se
mostrar en la ventana de documento de Dreamweaver, y nunca en un navegador. Dicha imagen se
utiliza como plantilla grfica sobre la que crear el documento.
Transparencia: permite establecer la opacidad de la imagen de rastreo
Hay que tener cuidado de no crear pginas que tarden mucho tiempo en cargarse en el navegador.
Para ver cmo comprobar el tamao de los documentos, pulsa aqu
Comprobar tamao para optimizar la carga

Si las pginas tienen muchos elementos (imgenes, tablas, etc.) y son muy grandes, posiblemente
tarden mucho tiempo en mostrarse totalmente en el navegador. Esto no es nada recomendable, ya que
los usuarios pueden perder la paciencia, y no visitar ms nuestra pgina.
Siempre hay que intentar que el tiempo de descarga en el navegador no sea muy elevado.
Dreamweaver permite calcular automticamente el tiempo de descarga de las pginas. Para ello hay
que dirigirse al men Edicin, a la opcin Preferencias.
En esta nueva ventana lo primero que hay que hacer es seleccionar una Categora. En este caso nos
interesa la de Barra de estado.
En ella habr que establecer una Velocidad de conexin.
En Espaa 56,0 es la velocidad de los mdems normales, pero podemos elegir otra diferente, por
ejemplo si pensamos que la mayora de nuestros posibles clientes tienen conexiones rpidas.
- 30 -
Una vez establecida una velocidad de conexin, y aceptados los cambios, Dreamweaver calcular el
tamao y el tiempo de descarga de la pginas a partir de esa velocidad de conexin.
Hay que tener en cuenta que el tamao de descarga de una pgina no solo se calcula a partir del
tamao de esa pgina en disco, sino que hay que considerar tambin el tamao de las imgenes que
aparecen en ella, y del resto de elementos.
Cuando en la ventana de documento de Dreamweaver est abierta alguna pgina, se mostrarn su
tamao y su tiempo de descarga en la barra de estado.
Por ejemplo, esta pgina que ests viendo tiene un tamao de descarga de 59K, y se presupone un
tiempo de descarga de 9 segundos, ya que en la barra de estado de la ventana de documento
aparecen estos datos entre el tamao de la ventana de documento y el panel de propiedades,
representados por 59K/9 s.
Los colores
Para asignar colores es posible desplegar una paleta de colores como sta. Al seleccionar un color de
estas paletas, se muestra el valor hexadecimal del color en la parte superior.
Las paletas de colores de Dreamweaver utilizan la paleta de 216 colores seguros para web. stos son
los colores que se muestran de la misma forma en Microsoft Internet Explorer y en Netscape Navigator,
tanto en Windows como en Macintosh.
Tambin es posible personalizar los colores a travs del botn
de la parte superior de la paleta.
- 31 Los colores pueden asignarse a travs de los botones:
Estos botones suelen aparecer en el inspector de propiedades de muchos objetos, y tambin en

algunas ventanas que permiten especificar propiedades (sobre todo propiedades de texto, fondo, o
tablas), como es el caso de la ventana de Propiedades de la pgina, que tienes ms arriba.
El color puede insertarse de dos modos. Uno de ellos es pulsando sobre el recuadro gris
, lo que
hace que se despliegue la paleta de colores. El otro modo es introduciendo directamente el nmero
hexadecimal del color en el recuadro blanco.
Por ejemplo, si en la paleta de colores que aparece ms arriba se seleccionara el color azul con valor
#3399FF, el botn quedara del siguiente modo:
Para practicar realizar el Ejercicio Crear nuevo documento y modificar sus propiedades.
Ejercicio paso a paso. Unidad 3. Crear nuevo documento y modificar

sus propiedades
Objetivo.
Practicar las operaciones que hay que realizar para crear un nuevo documento html y configurar las
propiedades de la pgina.
2 Abre el men Archivo y elige la opcin Nuevo, o bien haz clic sobre el botn
herramientas.
de la barra de
3 Selecciona la pestaa General de la nueva ventana.

4 Selecciona Pgina en blanco en Categora.
5 Selecciona HTML en Pgina en blanco.
6 Haz clic sobre el botn Crear.
7 A partir de este momento vamos a realizar todos los ejercicios en la vista diseo. Haz clic sobre el
botn Mostrar vista de diseo
8 Haz clic con el botn derecho del ratn sobre el documento en blanco, para abrir su men contextual.
9 Elige la opcin Propiedades de la pgina en el men contextual.
10 En Ttulo escribe Cocina.
11 En Fondo: escribe #CCCC99.
12 En Vnculos: escribe #CC6600.
13 En Vnculos visitados: escribe #CC9933.
14 En Vnculos activos: escribe #CC9966.
- 32 15 Haz clic sobre el botn Aceptar.

16 Haz clic sobre el botn Guardar
de la barra de herramientas. Guarda el documento con el
nombre menu.htm, dentro de la carpeta cocina del ejercicio anterior.
Ejercicios Unidad 3. Crear sitio local y modificar las propiedades de la

pgina
En cada tema hay ejercicios paso a paso y ejercicios propuestos, en ambos casos es importante que
realices los ejercicios por orden, sin saltarte ninguno. Estos ejercicios estn diseados para ir
construyendo una pgina web completa y si intentas realizar un ejercicio sin haber hecho los anteriores
puede que no veas un resultado muy coherente.
Si no has realizado an el primer ejercicio paso a paso, copia en la carpeta Mis documentos la carpeta
ejerciciosdream, que se encuentra dentro de la carpeta ejercicios del curso.
Si no tienes abierto Dreamweaver, brelo para realizar los ejercicios planteados a continuacin.
A partir de este momento vamos a realizar todos los ejercicios en la vista Diseo, a no ser que se
indique lo contrario. Haz clic sobre el botn Mostrar vista de diseo
Ejercicio 1: Deportes.
1 Crear un sitio local con el nombre Deportes, cuya carpeta raz sea la carpeta deportes, que se
encuentra dentro de la carpeta ejerciciosdream.
2 Abrir el documento menu.htm.
3 Modificar sus propiedades para que el color de los vnculos, sea cual sea su estado, sea #000000 y
nunca se encuentren subrayados.
4 Asgnale el color de fondo #738099 y la imagen fondo5.gif que se encuentra en la carpeta imagenes
del sitio aparezca como fondo sin repeticin.
5 Haz que la fuente del documento sea Verdana 18px Negrita.
6 Abre los archivos donde.htm, instalaciones.htm, quienes.htm y reservas.htm.
7 Establece el color de fondo como #999999, selecciona la imagen fondo.gif de la carpeta imagenes
del sitio como fondo y que se repita sobre el eje de las x.
8 Haz que la fuente de estos documentos sea Arial.
9 Abrir el documento marcos.htm y darle el ttulo Tu Tienda de Deportes.
10 Guardar todos los cambios y cerrar los documentos.
A partir de este momento, realizando los ejercicios propuestos, vamos a crear una pgina como la que
- 33 -
Ejercicio 2: Animales.
1 Crear un sitio local con el nombre Animales, cuya carpeta raz sea la carpeta animales, que se
encuentra dentro de la carpeta ejerciciosdream.
2 Abrir el documento consultas.htm y modificar sus propiedades, para que su ttulo sea Consultas.
3 Abrir el documento gatos.htm y modificar sus propiedades, para que su ttulo sea Gatos.
4 Abrir el documento perros.htm y modificar sus propiedades, para que su ttulo sea Perros.
5 Abrir el documento inicio.htm y modificar sus propiedades, para que su ttulo sea Inicio.
6 Guardar los cambios y cerrar los documentos.
A partir de este momento, realizando los ejercicios propuestos, vamos a crear una pgina como la que
Si no tienes muy claro las operaciones a realizar en los ejercicios anteriores, Aqu te lo explicamos.
- 34 -
Ayuda Ejercicios Unidad 3. Crear sitio local y modificar las propiedades

de la pgina
Ejercicio 1: Deportes
Apartado 1 Para crear un sitio nuevo es necesario elegir la opcin Administrar sitios... en el men
Sitio.
En la nueva ventana, seleccionar el botn Nuevo...
En la nueva ventana, en la pestaa Avanzadas, hay que elegir la categora Datos locales.
En Nombre del sitio hay que escribir Deportes.
En Carpeta raz local hay que seleccionar la carpeta deportes, que se encuentra dentro de la carpeta
ejerciciosdream.
Podemos seleccionar la carpeta imagenes, que se encuentra dentro de la carpeta deportes, como
Carpeta predeterminada de imgenes.
Por ltimo, hay que hacer clic sobre el botn Aceptar.
Apartado 2 Para abrir el documento menu.htm puedes hacer doble clic sobre l en el panel Archivos.
Puedes abrir el panel a travs del men Ventana, opcin Archivos y seleccionar el sitio en el men
desplegable que aparece.
Apartado 3 Una vez abierto el documento en Dreamweaver, elige a la opcin Propiedades de la
pgina del men Modificar.
En la nueva ventana haz clic en la categora Vnculos, y en los campos que aparecern a la derecha
modifica Color de vnculo, Vnculos visitados, Vnculos de sustitucin y Vnculos activos y dales el
valor #000000, en el campo Estilo subrayado escoge Nunca subrayar.
Apartado 4 Selecciona la categora Aspecto y modifica los campos a los siguientes valores, Color de
fondo: #738099; Imagen de fondo: imagenes/fondo5.gif; Repetir: no repetir.
Apartado 5 Modifica tambin los campos Fuente de pgina: Verdana, Arial, Helvetica, sans-serif;
Tamao: 18 y pulsa el botn Negrita
Por ltimo, pulsa el botn Aceptar.
Apartado 6 Para abrir los documentos donde.htm, instalaciones.htm, quienes.htm y reservas.htm
puedes hacer doble clic sobre ellos en el panel Archivos. Puedes abrir el panel a travs del men
Ventana, opcin Archivos y seleccionar el sitio en el men desplegable que aparece.
Apartado 7 Una vez abierto los documentos en Dreamweaver, elige a la opcin Propiedades de la
pgina del men Modificar para cada uno de ellos y modifica los siguientes campos en la catagora
Aspecto.
Color de fondo: #999999
Imagen de fondo: imagenes/fondo.gif
Repetir: repetir x
Apartado 8 Selecciona Arial, Helvetica, sans-serif en el campo Fuente de pgina.
Por ltimo, pulsa el botn Aceptar.
- 35 Apartado 9 Para abrir el documento marcos.htm puedes hacer doble clic sobre l en el panel
Archivos. Puedes abrir el panel a travs del men Ventana, opcin Archivos y seleccionar el sitio en el
men desplegable que aparece.
Escribe Tu Tienda de Deportes en el campo Ttulo de la barra de herramientas de documento.
Apartado 10 Para cada uno de los archivos abiertos hacer clic sobre el botn Guardar
, y despus
sobre el botn Cerrar

. El botn de cerrar cambia dependiendo del diseo de vista de la pgina, si es
como fichas o como ventanas flotantes.
Ejercicio 2: Animales
Apartado 1 Para crear un sitio nuevo es necesario elegir la opcin Administrar sitios... en el men
Sitio.
En la nueva ventana, seleccionar el botn Nuevo...
En la nueva ventana, en la pestaa Avanzadas, hay que elegir la categora Datos locales.
En Nombre del sitio hay que escribir Animales.
En Carpeta raz local hay que seleccionar la carpeta animales, que se encuentra dentro de la carpeta
ejerciciosdream.
Podemos seleccionar la carpeta imagenes, que se encuentra dentro de la carpeta animales, como
Carpeta predeterminada de imgenes.
Por ltimo, hay que hacer clic sobre el botn Aceptar.
Apartado 2 Para abrir el documento consultas.htm puedes hacer doble clic sobre l, en el panel
Archivos. Puedes abrir el panel a travs del men Ventana, opcin Archivos.
Escribe Consultas en el campo Ttulo de la barra de herramientas de documento.
Apartado 3 Para abrir el documento gatos.htm puedes hacer doble clic sobre l, en el panel Archivos.
Puedes abrir el panel a travs del men Ventana, opcin Archivos.
Escribe Gatos en el campo Ttulo de la barra de herramientas de documento.
Apartado 4 Para abrir el documento perros.htm puedes hacer doble clic sobre l, en el panel
Archivos. Puedes abrir el panel a travs del men Ventana, opcin Archivos.
Escribe Perros en el campo Ttulo de la barra de herramientas de documento.
Apartado 5 Para abrir el documento inicio.htm puedes hacer doble clic sobre l, en el panel Archivos.
Puedes abrir el panel a travs del men Ventana, opcin Archivos.
Escribe Inicio en el campo Ttulo de la barra de herramientas de documento.
Apartado 6 En todos los documentos, hacer clic sobre el botn Guardar
Cerrar
, y despus sobre el botn
Ejercicios Unidad 4. Modificar las propiedades CSS

Si no tienes abierto Dreamweaver, brelo para realizar los ejercicios planteados a continuacin.
- 36 -
Ejercicio 1: Deportes.
1 Abrir el sitio Deportes.
2 Abrir el documento menu.htm.
3 Asigna la propiedad margen a 0px para todos los lados y el fondo debe ser posicionado en el centro
(en el eje horizontal) y en la parte superior (en el vertical) al documento.
4 Abre los archivos donde.htm, instalaciones.htm, quienes.htm y reservas.htm.
5 Haz que el fondo sea fijo para que no se mueva si utilizamos las barras de desplazamiento.
6 En el archivo instalaciones.htm convertir las seis lneas que hacen referencia a las instalaciones en
una lista desordenada.
7 Aplicar dos sangras a la lista.
8 Guardar los cambios y cerrar el documento.
Ejercicio 2: Animales.
1 Abrir el sitio Animales.
2 Abrir el documento perros.htm.
3 Al ttulo Perros asignarle un tamao de fuente de 36px, en cursiva y negrita.
4 Renombra el estilo a titulo.
5 Al ttulo Cuidados Postnatales asignarle un tamao de fuente de 16px, en cursiva y negrita.
6 Renombra el estilo a titulo2.
7 Cambia las propiedades del documento para que tenga la fuente Georgia a 16px y el fondo de color
#CCCC99.
8 Exporta estos estilos y guardalos en una hoja que vincularsa este documento. Llmala estilo.css.
9 Abrir el documento inicio.htm y asignarle la hoja de estilos estilo.css.
10 Abrir el documento consultas.htm y asignarle la hoja de estilos estilo.css.
11 Al ttulo Consultas asignarle el estilo .titulo.
12 Abrir el documento gatos.htm y asignarle la hoja de estilos estilo.css.
13 Al ttulo Gatos asignarle el estilo .titulo.
14 Al ttulo Cmo Prevenir Los Problemas Dentales? asignarle el estilo .titulo2.
15 Convertir las cuatro ltimas lneas en un lista desordenada, aplica una sangra solamente a la
segunda lnea.
16 Guardar los cambios y cerrar los documentos.
Si no tienes muy claro las operaciones a realizar en los ejercicios anteriores, Aqu te lo explicamos.
Ayuda Ejercicios Unidad 4. Modificar las propiedades CSS
- 37 -
Ejercicio 1: Deportes
Apartado 1 Para abrir el sitio Deportes hay que seleccionarlo en el panel Archivos. Puedes abrir el
panel a travs del men Ventana, opcin Archivos. Seleccionar el sitio Deportes en el men
desplegable que aparece en la parte superior del panel.
Apartado 2 Para abrir el documento menu.htm hay que hacer doble clic sobre este archivo, en la lista
de archivos que aparecen en el panel Archivos.
Apartado 3 Si no aparece el panel CSS, brelo a travs del men Ventana, opcin Estilos CSS.
Una vez abierto haz clic en el botn Nueva regla CSS
y se abrir un cuadro de dilogo.
En Tipo de Selector selecciona Etiqueta.

En Etiqueta selecciona body.
Y en Definir en selecciona Slo en este documento.
Pulsa el botn Aceptar y se abrir el dilogo dnde asignars las propiedades CSS.
Haz clic en la categora Cuadro y en el marco Margen asegrate de que la opcin Igual para todo esta
activada. En el campo Sup. escribe 0.
Haz clic en la categora Fondo y modifica las propiedades Posicin horizontal a centrar y Posicin
vertical a superior.
Apartado 4 Para abrir los documentos donde.htm, instalaciones.htm, quienes.htm y reservas.htm
hay que hacer doble clic sobre estos archivos, en la lista de archivos que aparecen en el panel
Archivos.
Apartado 5 Si no aparece el panel CSS, brelo a travs del men Ventana, opcin Estilos CSS.
Una vez abierto, debers seguir estos pasos en los 4 documentos que acabas de abrir.
Haz clic en el botn Nueva regla CSS
y se abrir un cuadro de dilogo.
En Tipo de Selector selecciona Etiqueta.

En Etiqueta selecciona body.
Y en Definir en selecciona Slo en este documento.
Pulsa el botn Aceptar y se abrir el dilogo dnde asignars las propiedades CSS.
Haz clic en la categora Fondo y modifica la propiedad Anexo a fijo.
Apartado 6 Haz clic sobre la pestaa del archivo instalaciones.htm y seleccionar las seis lneas que
hacen referencia a las instalaciones. Hacer clic sobre el botn Lista sin ordenar
Apartado 7 Pulsa dos veces sobre el botn Sangra de texto
Pulsar fuera de la lista para que se apliquen los cambios.

Apartado 8 Para cada uno de los archivos, hacer clic sobre el botn Guardar
botn Cerrar
Ejercicio 2: Animales
, y despus sobre el
- 38 Apartado 1 Para abrir el sitio Animales hay que seleccionarlo en el panel Archivos. Puedes abrir el
panel a travs del men Ventana, opcin Archivos. Seleccionar el sitio en el men Animales
desplegable que aparece en la parte superior del panel Archivos.
Apartado 2 Para abrir el documento perros.htm hay que hacer doble clic sobre l, en el panel
Archivos.
Apartado 3 Selecciona el ttulo Perros y en el Inspector de propiedades haz clic en el botn
y en
para ponerlo en cursiva y negrita.

Tambin selecciona 36 en el desplegable Tam.
Apartado 4 Despliega el campo Estilo y selecciona la opcin Cambiar nombre...
Se abrir un cuadro de dilogo, debers darle el nombre titulo al estilo.
Apartado 5 Selecciona el texto Cuidados Postnatales y en el Inspector de propiedades haz clic en el
botn
y en
para ponerlo en cursiva y negrita.
Tambin selecciona 16 en el desplegable Tam.

Apartado 6 Despliega el campo Estilo y selecciona la opcin Cambiar nombre...
Se abrir un cuadro de dilogo, debers darle el nombre titulo2 al estilo.
Apartado 7 Para acceder a las porpiedades del documento haz clic en un rea vaca de la pgina y en
el Inspector de propiedades haz clic sobre el botn Propiedades de la pgina...
En la categora Aspecto selecciona Georgia en el desplegable Fuente de la pgina.
Escoge 16 en el campo Tamao.
En Color del fondo escribe #CCCC99.
Apartado 8 Para exportar los estiloa a un archivo .css abre el panel CSS a travs del men Ventana,
opcin Estilos CSS.
Pulsa el botn Todo para ver todos los estilos aplicados sobre la pgina en este momento.
Haz clic derecho sobre <style> y selecciona Exportar... para exportar todos los estilos de la pgina.
Busca la carpeta del sitio en el cuadro de dilogo que se te muestra y guarda la hoja de estilos como
estilo.css.
Se vincular al documento automticamente.
Apartado 9 Para abrir el documento inicio.htm hay que hacer doble clic sobre l, en el panel Archivos.
Para vincular la hoja de estilos a la pgina haz clic en el botn Adjuntar hoja de estilos
del panel
CSS. En el siguiente cuadro de dilogo haz clic en el botn Examinar y selecciona el archivo
estilo.css. Confirma que el campo Aadir como tiene la opcin Vincular activada.
Apartado 10 Para abrir el documento consultas.htm hay que hacer doble clic sobre l, en el panel
Archivos.
del panel
- 39 Apartado 11 Selecciona el texto Consultas y en el campo Estilo del inspector de propiedades

selecciona titulo.
Apartado 12 Para abrir el documento gatos.htm hay que hacer doble clic sobre l, en el panel
Archivos.
del panel
Apartado 13 Selecciona el texto Gatos y en el campo Estilo del inspector de propiedades selecciona
titulo.
Apartado 14 Selecciona el texto Cmo Prevenir Los Problemas Dentales? y en el campo Estilo del
inspector de propiedades selecciona titulo2.
Apartado 15 Seleccionar las cuatro ltimas lneas.
Hacer clic sobre el botn Lista sin ordenar
Hacer clic sobre el botn Sangra de texto
.
.
Pulsar fuera de la lista para que se aplique el ltimo cambio.

Apartado 16 Para todos los documentos abiertos, hacer clic sobre el botn Guardar Todo
Unidad 4. El texto (I)

A lo largo de este tema vamos a aprender a cambiar las
propiedades del texto y a crear estilos CSS, que permiten
asignar al texto estilos creados por nosotros mismos, no
predefinidos.
Caractersticas del texto

Las caractersticas del texto seleccionado pueden ser definidas a travs del men Texto, y a travs del
inspector de propiedades. Vamos a ver las posibilidades que se nos ofrecen a travs del inspector de
propiedades, aunque sean menos que las que se nos ofrecen a travs del men Texto.
Formato:
Permite seleccionar un formato de prrafo ya definido para HTML, que puede ser encabezado, prrafo o
preformateado. Los encabezados se utilizan para establecer ttulos dentro de un documento. El formato
preformateado sirve para que el texto aparezca tal cual ha sido escrito, por ejemplo, si entre dos
palabras se introducen varios espacios solo se considera uno, pero al establecer el formato
preformateado se respetar que hayan varios espacios en lugar de solo uno.
Fuente: Permite seleccionar un conjunto de fuentes. Aparecen conjuntos de fuentes en lugar de una
sola, ya que es posible que al establecer una nica fuente el usuario no la tenga en su ordenador. El
seleccionar un conjunto de fuentes posibilita que en el caso de que el usuario no tenga una fuente se
- 40 aplique otra del conjunto. Por ejemplo, si seleccionamos Arial, Helvetica, Sans-serif, el texto se ver
con la fuente Arial, pero si esta no existe se ver en Helvetica.
Tamao:
Permite cambiar el tamao del texto. El tamao lo podemos indicar en diversas unidades, en pxeles,
centmetros, etc...
Color:
Permite seleccionar el color de la fuente, ignorando el color que se haya definido en las propiedades de
la pgina. Si no se ha establecido ningn color en las propiedades de la pgina ni aqu, el color del texto
por defecto ser el negro.
Estilo:
Estos botones permiten establecer si el texto aparecer en negrita o en cursiva. A travs del men
Texto tambin se puede, entre otras cosas, subrayar el texto. Esta opcin no aparece en el panel de
Propiedades ya que de normal no suele utilizarse, debido a que los vnculos aparecen subrayados y el
subrayar texto normal podra hacer que el usuario pensara que se trata de un vnculo.
Alinear:
A travs de estos botones es posible establecer la alineacin del texto de una de estas cuatro formas
distintas: izquierda, centrada, derecha y justificada.
Lista:
Estos botones permiten crear listas con vietas o listas numeradas.
Sangria:
Estos dos botones permiten sangrar el texto y anular la sangra. La sangra es una especie de mrgen
que se establece a ambos lados del texto. En este caso caso los botones se refieren a sangra a la
izquierda del texto.
Ejercicio. Unidad 4.Insertar texto y modificar sus propiedades

Objetivo.
Practicar las operaciones de insertar texto y modificar sus propiedades.
2 Si no aparece el panel Archivos, brelo a travs del men Ventana, opcin Archivos.
3 Selecciona el sitio Cocina en el panel Archivos. Recuerda que creamos este sitio en el tema anterior.
4 Haz doble clic sobre el documento quienes.htm, que aparece en los archivos desplegados en el
panel de Archivos. Se abrir el documento en Dreamweaver.
5 Inserta el texto Quines Somos encima de la lnea Fecha ltima modificacin:.
6 Si no aparece el inspector de propiedades, brelo a travs del men Ventana, opcin Propiedades.
7 Selecciona el texto Quines Somos.
- 41 8 En Formato, del inspector de propiedades, elige Encabezado 2 .

de la barra de herramientas.
Unidad 4. El texto (II)

Listas
Es posible insertar texto a modo de lista. A su vez, la lista puede ser numerada o con vietas.
Para que un texto que ya ha sido introducido en el documento se convierta en una lista, simplemente
hay que seleccionarlo y pulsar sobre la opcin de lista correspondiente, ya sea a travs del inspector
de propiedades, o a travs del men Texto.
La lista con vietas (desordenada) se selecciona a travs del botn
(ordenada) se selecciona a travs del botn
, mientras que la lista numerada
Ejemplo de lista numerada (ordenada):

1.
1.
2.
2.
3.
4.
Preparar la mochila
Sacar los libros de ese da
Introducir los libros del da siguiente
Ponerme el pijama
Lavarme los dientes
Poner el despertador
Ejemplo de lista con vietas (desordenada):
o
o
Perro
Gato
Aves
Canario
Loro
Hamster
Para establecer listas anidadas dentro de otras como en los ejemplos anteriores, es necesario aadir
una sangra en los elementos de la lista que se desee que pasen a formar parte de la lista anidada.
A travs del men Texto, opcin Lista, es posible acceder a las propiedades de la lista seleccionada.
Se debe seleccionar el texto de la lista previamente o tener el cursor en algn lugar de la lista para que
se active este submen.
En la ventana Propiedades de lista se puede especificar el tipo de lista (con nmeros o con vietas), el
tipo de nmeros o vietas que se utilizarn (en la propiedad Estilo:), y en el caso de las listas
ordenadas, el nmero por el que comenzar el recuento.
Para practicar puedes realizar el Ejercicio paso a paso Convertir texto en una lista.
- 42 -
Ejercicio paso a paso. Unidad 4. Convertir texto en una lista

Objetivo.
Practicar las operaciones que hay que realizar para convertir texto en una lista desordenada.
3 Selecciona el sitio Cocina en el panel Archivos. Recuerda que creamos este sitio en el tema anterior.
4 Haz doble clic sobre el documento postresemana.htm, que aparece en los archivos desplegados en
el panel Archivos.
Se abrir el documento en Dreamweaver.
6 Selecciona las tres lneas de texto desde 1kg de boniatos ... hasta la ltima.
7 Haz clic sobre el botn Lista sin ordenar
del inspector de propiedades.
9 Ahora abre el documento platosemana.htm, que aparece en los archivos desplegados en el panel
Archivos.
10 Selecciona las cinco lneas de texto desde Lavar las berenjenas... hasta la ltima.
11 Haz clic sobre el botn de Lista ordenada
12 Haz clic sobre el botn

Guardar
de la barra de
herramientas.
Caracteres Especiales
A veces necesitars introducir
caracteres especiales en tus
pginas. Debido al modo
editor
de
Diseo
de
Dreamweaver esta tarea es
muy sencilla utilizando el
teclado,
podemos
incluir
caracteres como , , , , ..
de forma rpida por si quieres
poner dos espacios en blanco
y los introduces por teclado,
Dreamweaver no los crear,
debers introducirlo dos veces
utilizando la opcin que vamos
a ver a continuacin.
Haz clic en el men Insertar y selecciona la opcin HTML vers el desplegable de la imagen de la
derecha.
- 43 Slo coloca el puntero del ratn sobre Caracteres especiales y vers una lista rpida de los
caracteres ms utilizados que no pueden ser introducidos mediante teclado.
Para introducir alguno de estos caracteres en tus textos slo seleccinalo en la lista y aparecer en la
vista de Diseo.
Si el carcter que buscas no se encontrase all, haz clic en Otro... y se abrir una ventana desde donde
podrs seleccionar caracteres entre una lista bastante ms amplia:
Unidad 4. El texto (III) - Estilos CSS. Introduccin

En el men Texto, opcin Estilo, aparecen una serie de estilos predefinidos que pueden aplicarse al
texto seleccionado.
Los estilos CSS estn en hojas de estilo de actualizacin automtica (tambin denominadas Hojas
de Estilo en Cascada) se utilizan para combinar una serie de atributos del texto, como pueden ser el
color o el tamao, de modo que no sea necesario asignar estos atributos uno a uno cada vez que se
desee repetir la asignacin de esos mismos valores a otras partes del texto. Tambin algunas de sus
opciones pueden utilizarse para definir atributos de imgenes y otras caractersticas que no permitan
definir los estilos HTML en versiones anteriores, como el color de fondo para el texto, etc.
Incluso permiten aplicar un estilo sobre todas las etiquetas HTML de un mismo tipo, como puede ser la
etiqueta A HREF, que corresponde a los hiperenlaces. De este modo, todos los hiperenlaces de la
pgina adquiriran la apariencia definida en ese estilo.
Un estilo CSS no es ms que un conjunto de reglas de formato que controlan el aspecto del contenido
de una pgina Web. Los estilos CSS aportan gran flexibilidad y control al aspecto exacto que se busca
en una pgina, desde la posicin precisa de elementos hasta el diseo de fuentes y estilos concretos.
Una de las grandes ventajas de los estilos CSS reside en que cuentan con una capacidad simple de
actualizacin; cuando actualiza un estilo CSS, el formato de todos los documentos que usan ese estilo
se actualiza automticamente.
Crear un Estilo Personalizado

Con Dreamweaver CS3, las caractersticas que apliquemos a un texto crearn automticamente estilos
CSS que se incrustarn en el documento actual y se aplicarn nicamente sobre l.
Vemoslo:
- 44 Para crear un Estilo CSS personalizado:

1. En el documento, se selecciona el texto al que se desea aplicar caractersticas concretas.
2. En el inspector de propiedades se modifican todas las propiedades de formato de texto, se
establecen los atributos de la fuente y del prrafo que queramos.
Automticamente Dreamweaver crear un nuevo estilo con el nombre Estilo1 o Estilo2 o Estilo3,...
segn los nombres de los estilos ya creados.
Aparecer el nombre Estilo1 en el cuadro Estilo del panel Propiedades.
Tambin se puede cambiar el nombre del estilo, es mejor que el estilo tenga un nombre que indique a
qu tipo de texto se va a aplicar. Para ello desplegamos la lista de estilos y seleccionamos la opcin
Cambiar nombre... Aparecer un cuadro de dilogo para que introduzcamos el nuevo nombre como la
imagen inferior.
Seguidamente se coloca el nuevo nombre sin espacios en blanco. En este caso: miestilo.
Al aceptar, aparecer un panel con el nombre Resultados. Cerrar esta ventana.
De esta manera se puede crear un estilo para aadirlo a un documento.
Cada nuevo estilo que se crea, se aade a la lista de estilos, y los podemos acceder tambin de una
manera rpida a travs del men Texto, opcin Estilos CSS.
En el Panel CSS se puede verificar que se ha aadido automticamente el nuevo estilo.
El Panel CSS (I)

El Panel CSS
Hemos visto como Dreamweaver nos permite crear estilos de una forma muy rpida y sencilla, los
estilos creados de esta manera se agrupan en una hoja de estilos que se encuentra incrustada en
nuestro documento, pero tambin podemos utilizar estilos que se encuentren en hojas externas al
- 45 documento. Este particularidad es muy til cuando diseamos un sitio web con varias pginas ya que
permite definir una sla hoja de estilos que utilizarn todas las pginas del sitio y as facilitar el diseo.
Vamos a ver cmo funcionan las hojas de estilo a travs del panel CSS pestaa Estilos CSS, que
puede abrirse a travs del men Ventana, opcin Estilos CSS. Existen otras alternativas para abrir este
panel, una es pulsando Mays+F11, o puedes hacer clic en el botn CSS que aparece en el Inspector
de Propiedades.
Para simplificar las explicaciones llamaremos panel Estilos CSS a la pestaa Estilos CSS del panel
CSS.
En este panel aparecen las hojas de estilos asociadas al documento, los estilos contenidos en cada
hoja de estilos y unos botones en la parte inferior
estilos.
que nos permiten realizar cambios en los
Como puedes ver en la imagen, en la parte inferior del panel puedes ver una lista de las propiedades
que forman parte del estilo, podrs editarlas con un slo clic y actualizarlas o aadir nuevas haciendo
clic en el vnculo Aadir propiedad.
Desde los botones
podrs ordenar las propiedades de diferentes maneras. Con el primer
botn mostrars todas las propiedades ordenadas por categoras (Fuente, Fondo, Bloque, Borde,
etc..); tambin puedes mostrarlas ordendas de la A a la Z con el segundo botn.
Como predeterminado se muestran nicamente las propiedades utilizadas (las cuales podrs mostrar
haciendo clic en el tercer botn).
Si la parte del pie del panel no fuese visible prueba a modificar su tamao colocando el cursor en el
borde inferior y haciendo clic arrstralo hasta que sus dimensiones te dejen verlo.
El Panel CSS (II)

Crear un nuevo estilo
Para crear un nuevo estilo dentro de una hoja, seleccionamos la hoja en el panel CSS y pulsamos el
botn que sirve para crear un nuevo estilo en la hoja de estilos seleccionada o en otra nueva.
A continuacin aparece una ventana como sta:
En ella puede especificarse el Nombre: del estilo, (sin espacios y
comenzando con un punto).
Con la opcin Clase seleccionada es posible especificar si el estilo
va a ser uno personal creado desde cero.
Con Etiqueta se pueden modificar los atributos de una etiqueta ya
existente, en este caso en Nombre: aparece la lista de etiquetas
HTML que pueden ser redefinidas, como pueden ser BODY, A,
FORM, TABLE, etc.
Con Avanzadas se puede redefinir el formato de una combinacin
de etiquetas.
En Definir en: se determina si el estilo se aade a la hoja de estilo
propia del documento (Slo este documento), si se aade a una
nueva hoja de estilos ((Nuevo archivo de hojas de estilo)), o si se
aade a la hoja de estilos seleccionada.
- 46 Despus de pulsar sobre el botn Aceptar aparecer una ventana como la que aparece a continuacin
y en la que definiremos el estilo:
Eligiendo una u otra categora es posible especificar diferentes propiedades, muchas de las cuales no
se podan aplicar mediante el panel de Propiedades. Por ejemplo, a travs de la categora Fondo es
posible especificar el color de fondo para un bloque de texto o para la pgina entera.
Gestionar estilos CSS
- 47 Para modificar un estilo ya existente, seleccionamos el estilo a modificar en la lista de estilos del
panel y hacemos clic en el botn
las caractersticas del estilo.
, se abrir la ventana descrita anteriormente donde se puede definir
Tambin podemos abrir esta ventana pulsando con el botn derecho sobre el estilo en el panel CCS, y
seleccionar del men desplegable la opcin Editar. O incluso modificarlo directamente desde la lista de
propiedades que se encuentra al pie del panel.
Ten en cuenta que si modificas un estilo CSS que pertenezca a una hoja de estilos vinculada, es decir, a
un archivo CSS externo, todas las pginas que contengan ese estilo sern actualizadas al instante.
Para borrar un estilo de una hoja de estilos, seleccionamos el estilo en la lista de estilos del panel y
hacemos clic en el botn
Como puedes ver, es bastante sencillo trabajar con estilos CSS.
Unidad 4. El texto (IV)

Aplicar un Estilo
Para aplicar un Estilo CSS personalizado:
En el documento, selecciona el texto al que deseas aplicar el estilo CSS, o sita el punto de insercin
del mouse en un prrafo para aplicar el estilo a todo el prrafo. Si seleccionas un rango de texto dentro
de un prrafo, el Estilo CSS slo afectar al rango seleccionado.
En el inspector de Propiedades se selecciona el estilo creado por nosotros de la lista que aparece al
desplegar el cuadro Estilo.
Para practicar puedes realizar el Ejercicio paso a paso Crear estilo de clase.
Hojas de Estilos
Podemos exportar estilos que se encuentren incrustados en la pgina HTML a una nueva hoja de
estilos haciendo clic derecho sobre el estilo en el Panel CSS y seleccionando Exportar.
Se abrir el cuadro de dilogo Exportar estilos como archivo CSS que te permitir guardar todos los
estilos incrustados en un nuevo archivo CSS.
Esta opcin es muy til si tienes los estilos incrustados en una pgina y queremos utilizarlos en otras
tambin. Simplemente pasamos los estilos incrustados a una hoja de estilos y luego la adjuntamos en
cualquier pgina que queramos utilizarlos.
Para asignar una hoja de estilos a una pgina despliega el cuadro Estilo que se encuentra en el
Inspector de Propiedades y selecciona Adjuntar hoja de estilos...
- 48 -
En Arch./URL debe especificarse la ruta y el nombre de la hoja de estilos.

Elegimos si queremos Vincular o importar la hoja de estilos.
Si elegimos Vincular la hoja no se incrusta en la pgina sino que se aade a la pgina una referencia a
la hoja, esto permite que cualquier cambio realizado en la hoja quede reflejado de manera automtica
en todas las pginas que utilizan la hoja. Esta es la opcin ms aconsejable si vamos a utilizar el estilo
en ms de una pgina, de esta forma slo ser necesario vincular cada una de los archivos que quieras
qeu se vean afectados a la hoja de estilos que hayas creado.
Si elegimos Importar la hoja se incrusta en la pgina.
La opcin Media te permitir seleccionar el tipo de medio al que se asociar la hoja de estilos, por
ejemplo, screen (pantalla), print (impresora) o tv (webtv). Estas opciones te permitirn crear hojas de
estilos para soportes diferentes. Puedes crear una para screen, que ser la que se muestre cuando
navegues por Internet, y otra para print que ser la que se utilice cuando se imprima el contenido del
archivo.
Despus de Aceptar, la hoja con sus estilos aparecer en el panel CSS.
Ejercicio paso a paso. Unidad 4. Crear estilo de Clase

Objetivo.
Practicar las operaciones necesarias para crear un estilo de clase y aplicarlo a un prrafo.
2 Si no aparece el panel Archivos, brelo a travs del men Ventana, opcin Archivos..
3 Selecciona el sitio Cocina en el panel Archivos.
4 Haz doble clic sobre el documento postresemana.htm, que aparece en el panel Archivos.
5 Selecciona Boniatos a la mallorquina, que aparece al comienzo del documento.
En el Panel Propiedades introduce los siguientes cambios.
6 Haz clic sobre el botn Negrita
7 En Fuente elige Verdana, Arial, ...

8 Haz clic en el men Texto Estilo Subrayado.
- 49 Como la pgina no tiene ningn estilo definido se crea el primer estilo de la siguiente forma:
9 Despliega la lista del cuadro Estilo y elige Cambiar nombre...
10 En la ventana que aparece, escribe TituloComida en Nombre:.
11 Haz clic en Aceptar.
Ahora podras utilizar este estilo sobre cualquier texto de la pgina.
Unidad 5. Hiperenlaces (I)

Vamos a ver qu son los hiperenlaces, para qu sirven y cmo crearlos, ya que son un elemento
esencial para cualquier pgina web.
Introduccin
Un hiperenlace, hipervnculo, o vnculo, no es ms que un enlace, que al ser pulsado lleva de una
pgina o archivo a otra pgina o archivo.
Es posible asignar un vnculo a un texto, a una imagen, o a parte de una imagen.
Tipos de enlaces
Existen diferentes clases de rutas de acceso a la hora de definir los vnculos.
Referencia absoluta:
Conduce al sitio en el que se encuentra el documento utilizando la ruta completa del archivo.
La
ubicacin
es
en
Internet,
http://www.misitio.com/pagina/pagina1.html.
por
ejemplo,
http://www.aulaclic.com,
Referencia relativa al documento:

Conduce a un documento situado dentro del mismo sitio que el documento actual, pero partiendo del
directorio en el que se encuentra el documento actual.
Si queremos referinos a carpetas que estn por encima del nivel donde nos encontramos deberemos
utilizar ../
Por
ejemplo,
imagina
que
estamos
en
la
siguiente
direccin
http://www.misitio.com/pagina/informacion/index.html. En esta pgina queremos mostrar una
imagen que se encuentra en la carpeta http://www.misitio.com/pagina/secciones/seccion1.html,
cmo podemos hacerlo? Fcil. Deberemos llamarla haciendo referencia al nivel superior
(http://www.misito.com/pagina/) para poder ir luego a la carpeta secciones.
El resultado de la ruta sera el siguiente: ../secciones/seccion1.html.
De esta forma, mientras nos encontramos en la carpeta informacion, subimos un nivel y luego nos
movemos dentro de la carpeta secciones para mostrar el archivo seccion1.html.
Referencia relativa al sitio:
Conduce a un documento situado dentro del mismo sitio que el documento actual.
- 50 En este mtodo los enlaces se crean indicando la ruta a partir de la raz del sitio.
En el ejemplo anterior si tuviesemos definido como sitio la carpeta http://www.misitio.com/, un enlace
en cualquier pgina del sitio a http://www.misitio.com/pagina/secciones/seccion1.html se creara
como /pagina/secciones/seccion1.html.
Como puedes ver ahora el vnculo a un archivo en todas las pginas es igual porque se define
dependiendo del sitio raz y no de la ubicacin donde se encuentra.
Puntos de fijacin:
Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello el
vnvulo debe ser nombre_de_documento.extension#nombre_de_punto.
El punto se define dentro de un documento a travs del men Insertar, opcin Anclaje con nombre.
Podramos referenciar de este modo a un anclaje llamado parte2 de la siguiente forma:
../secciones/seccion1.html#parte2
Estos tipos de enlace que hemos visto son vlidos tanto para referenciar pginas (para crear
hiperenlaces) o incluso imgenes u otro tipo de objetos (como veremos en temas posteriores).
Debers tener siempre en cuenta que los nombres de las rutas se correspondan perfectamente a
los nombres de los archivos y carpetas en el servidor (local o remoto).
Por ello, es muy recomendable que utilices siempre minsculas para evitar fallos en los enlaces.
Tambin debers evitar utilizar caracteres especiales como acentos o espacios, as no tendrs
problemas a la hora de referenciar tus objetos.
Unidad 5. Hiperenlaces (II) - Crear enlaces

La forma ms sencilla de crear un enlace es a travs del inspector de propiedades. Para ello es
necesario seleccionar el texto o el objeto que va a servir de enlace, y seguidamente establecer el
Vnculo en el inspector.
Por ejemplo, aqu hay un enlace a www.elpais.es, que es de referencia absoluta, por eso contiene
HTTP://
Es posible crear tambin vnculos vacos, que pueden ser tiles cuando se utilizan comportamientos,
etc. Para ello es necesario escribir en Vnculo nicamente una almohadilla #.
Otra forma de crear un enlace es a travs del men Insertar, opcin Hipervnculo.
- 51 Crear vnculos de esta forma es muy sencillo, slo debers rellenar los campos que explicaremos a
continuacin y el enlace se colocar en el lugar en el que estaba situado el cursor.
Texto: es el texto que mostrar el enlace
Vnculo: es la pgina a la que ir redirigida el enlace, si se trata de un enlace externo debers escribirla
empezando siempre por HTTP://. Haz clic sobre el icono de carpeta para buscar los archivos que
existan dentro del sitio. Por defecto dramweaver te crear un enlace relativo al documento. Si quieres
que los enlaces sean relativos al sitio visita este avanzado
Personalizar nuevos enlaces
Crear vnculos relativos automticamente

Haciendo clic en el men Sitio y seleccionando la opcin Administrar sitios... podemos editar la
configuracin del sitio. Bastar con seleccionarlo en el cuadro de dilogo y pulsa Editar.
Se abrir la ventana de Definicin del Sitio. All selecciona la pestaa Avanzadas y en la categora
Datos Locales podrs ver las siguientes opciones:
Estas opciones te ayudarn a crear los enlaces de forma relativa. Selecciona Documento o Raz del
sitio en Vnculos relativos a: para que se creen los enlaces relativos a el documento donde se haya
situado el enlace o desde la raz del sitio.
Si seleccionas la opcin Raz del sitio, los enlaces se estableceran respecto a la carpeta seleccionada
en el campo Carpeta raz local:.
Seleccionar estas opciones no cambiar los enlaces existentes, sino que aplicar esta configuracin
a los vnculos que se creen a partir de ese momento.
Destino: la pgina donde se abrir la pgina, este campo se explica en el siguiente apartado.
Ttulo: se trata de la ayuda contextual del vnculo, es equivalente al atributo ALT de las imgenes.
Tecla de acceso: atributo que facilita la accesibilidad a las pginas, habilita el acceso al enlace
mediante la pulsacin de la tecla Alt ms la tecla de acceso indicada.
ndice de tabulador : Como habrs podido observar puedes saltar a travs de los enlaces pulsando la
tecla Tabulador. En este campo podrs establecer un ndice indicando la prioridad del enlace y as
configurar el modo en el que actuar el Tabulador es sus diferentes saltos.
Destino del enlace
- 52 El destino del enlace determina en qu ventana va a ser abierta la pgina vinculada, puede variar
dependiendo de los marcos de que disponga el documento actual.
Puede especificarse en el inspector de propiedades a travs de Dest, o en la ventana que aparece a
travs del men Insertar, opcin Hipervnculo.
_blank:
Abre el documento vinculado en una ventana nueva del navegador.
_parent:
Abre el documento vinculado en la ventana del marco que contiene el vnculo o en el conjunto de
marcos padre.
_self:
Es la opcin predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vnculo.
_top:
Abre el documento vinculado en la ventana completa del navegador.
No te preocupes si no te queda del todo claro para qu sirve cada una de estas opciones de destino, ya
que se volvern a ver en el tema de Marcos.
Ejercicio paso a paso. Unidad 5. Crear un hiperenlace
Objetivo.
Practicar cmo crear un hiperenlace.

4 Haz doble clic sobre el documento quienes.htm, que aparece en el panel Archivos.
6 Si el inspector de propiedades no se muestra en su totalidad, pulsa sobre el botn
sus propiedades ms avanzadas.
para desplegar
7 Selecciona la imagen del logotipo de aulaclic. Para ello hay que hacer clic sobre ella.
8 En Vnculo, del inspector de propiedades, escribe http://www.aulaclic.com.
9 En Dest selecciona la opcin _blank.
10 Pulsa fuera del texto para que deje de estar seleccionado y se le apliquen todos los cambios.
11 Pulsa F12 para ver el resultado en tu navegador, observa que si posicionas el ratn encima de la
imagen, el puntero del ratn cambia de aspecto (normalmente toma forma de mano con el dedo ndice
- 53 sealando) esto te indica que asociado a la imagen hay un hiperenlace y en la barra de estado puedes
ver la pgina a la que enlaza.
12 Cierra la ventana del navegador.
Unidad 5. Hiperenlaces (III)

Formato del enlace
En general, un texto que tiene asociado un vnculo suele aparecer subrayado. Al mismo tiempo, puede
adquirir tres colores diferentes que pueden especificarse a travs de las propiedades de la pgina.
Estos tres colores diferentes son los que se asignan como color de vnculo, de vnculo activo, y de
vnculo visitado.
Aqui tienes un vnculo de ejemplo:
www.aulaclic.com
Cuando el vnculo est definido sobre una imagen, en el borde aparecen una serie de puntitos al pulsar
sobre ella. Cuando el vnculo est definido sobre una zona de una imagen (un mapa), aparece el
contorno de esa zona.
Aqui tienes dos vnculos similares de ejemplo:
Como puedes ver, la segunda imagen que hace de vnculo contiene un recuadro alrededor. Esto ocurre
debido a que que el campo Borde del inspector de propiedades de la imagen vale uno (1), mientras
que para la primera imagen vale cero (0).
El campo Borde sirve para ponerle un borde a la imagen, independientemente de si sta va a contener
un vnculo o no.
Si se pone a cero (0), no aparece ningn borde, ya que esto indica que el tamao de las lneas que
forman el recuadro es cero (0). Puede hacerse un recuadro ms gordo incrementando el valor del
campo Borde.
Tanto si el vnculo se asigna a un texto como a una imagen, el cursor cambia de forma al situarse
encima del vnculo. Suele adquirir la apariencia de una mano sealando.
Enlace a correo electrnico

Es posible especificar vnculos a direcciones de correo electrnico. Esto resulta til cuando se desea
que los visitantes de la web puedan contactar con nosotros.
La sintaxis del vnculo en este caso es mailto:direccindecorreo.
- 54 Puede definirse el vnculo a travs de Vnculo, del inspector de propiedades, seleccionando

previamente el texto o la imagen deseados.
Tambin es posible a travs del men Insertar, opcin Vnculo de correo electrnico.
En este caso no es posible asignar el vnculo a una imagen, solo permite introducir el texto que
contendr el vnculo de correo.
Ejercicio paso a paso. Unidad 5. Crear un vnculo de correo electrnico

Objetivo.
Practicar cmo crear un vnculo de correo electrnico.
3 Selecciona el sitio Cocina en el panel Archivos
4 Haz doble clic sobre el documento quienes.htm, que aparece en el panel desplegable de Archivos.
6 Al final del todo escribe el texto Buscamos cocineros.
7 Selecciona el botn Alinear a la derecha
8 Selecciona el texto cocineros que acabas de escribir.

9 En Vnculo, del inspector de propiedades, escribe mailto:trabajo@aulaclic.com.
10 Pulsa fuera del texto para que deje de estar seleccionado y se le aplique el ltimo cambio.
11 Pulsa F12 para ver el resultado en tu navegador, observa que si haces clic sobre el texto se abre tu
aplicacin de correo (si la tienes instalada en tu ordenador) preparada para que escribas el texto del
mensaje que quieres enviar, en la direccin de destino habr puesto trabajo@aulaclic.com.
12 Cierra tu aplicacin de correo.
13 Cierra la ventana del navegador.
En ocasiones es posible que existan en nuestro sitio lo que se conoce como Vnculos rotos. Si no
sabes lo qu son o cmo solucionarlos, consltalo aqu
- 55 -
Vnculos rotos
Comprobacin de vnculos rotos
Los Vnculos rotos son vnculos que no siguen una ruta vlida, o que enlazan a archivo que no existe.
La existencia de estos vnculos en nuestras pginas no es nada recomendable, ya que no permite
navegar correctamente a los usuarios por nuestro sitio, se producen errores.
Los servidores de tipo UNIX/Linux distinguen entre maysculas y minsculas. Asi, por ejemplo, si
enlazas a un archivo Perros.htm puede que el servidor no lo encuentre porque en realidad lo hayas
llamado perros.htm (en minsculas).
Trabajando con Windows este tipo de errores no se presentan porque no hace esta distincin. En el
ejemplo anterior Dreamweaver considerara el enlace Perros.htm correcto aunque no lo fuese.
Para evitar esto puedes activar la opcin Usar verificacin de vnculos entre maysculas y
minsculas que se encuentra en la
ventana de Definicin del Sitio,
pestaa Avanzadas y categora Datos
Locales.
Para comprobar si nuestro sitio tiene
Vnculos rotos hay que abrir el
Verificador de vnculos.
Una forma de abrirlo es a travs del
panel Archivos. Ya sabes que el panel
Archivos se puede abrir a travs del
men Ventana, opcin Archivos.
Tambin pulsando F8.
Una vez abierto el panel Archivos, hay que dirigirse a
Archivo, opcin Comprobar vnculos, o pulsar Mays+F8.
Entonces se muestra un nuevo panel, en el
que ya es posible comprobar si existen
vnculos rotos.
Lo primero que hay que hacer es pulsar sobre
el botn
, a travs del cual se ofrece la
posibilidad de elegir dnde se comprobarn
los vnculos rotos. Puede ser en el
documento actual, en todo el sitio, o en los
archivos o carpetas del sitio seleccionados
previamente.
y en el men desplegable seleccionar
- 56 -
A travs de Ver hay que especificar si han de mostrarse los Vnculos rotos, los Vnculos externos o
los Vnculos hurfanos.
Los Vnculos rotos son los vnculos que no siguen una ruta vlida, o que enlazan a archivo que no
existe.
Los Vnculos externos son los vnculos a documentos que se encuentran fuera del sitio, pero que no
necesariamente son vnculos errneos. No comprueba si estos vnculos son correctos o no,
simplemente los enumera.
A travs de Vnculos hurfanos se muestran todos aquellos documentos del sitio que no estn siendo
vinculados por otros, a la vez que tampoco contienen vnculos a otros documentos. Estos documentos,
en ocasiones, pueden no estar siendo utilizados para nada, por lo que simplemente estn ocupando
espacio en disco innecesariamente.
De estos tres tipos de vnculos, el que ms nos interesa ahora es el de los Vnculos rotos. En el panel
se mostrarn todos los documentos que tienen un vnculo roto, y el documento al que cada uno de esos
vnculos hace referencia.
Reparacin de vnculos rotos

Podemos reparar los vnculos rotos de dos formas:
Una de ellas es pulsando dos veces sobre el nombre del documento que aparece en la lista de
archivos del panel. De este modo, dicho documento se abre. Entonces es posible buscar dentro del
documento el vnculo errneo y modificarlo a travs del Inspector de propiedades.
La otra forma es pulsando sobre el vnculo roto, en lugar de sobre el nombre del archivo. En este
caso es posible modificar directamente el nombre del documento en el panel, o buscarlo a travs del
icono con forma de carpeta que aparecer a su derecha.
Unidad 6. Imgenes (I)
- 57 -
Unidad 6. Imgenes (III)

Imagen de sustitucin. Rollover
Un rollover es una imagen que cambia por otra cuando el puntero se sita sobre ella. Este tipo
de imagen suele utilizarse en los mens o en los botones para desplazarnos a travs de distintas
pginas.
Aqu tienes un ejemplo de rollover. Sita el puntero sobre l para ver qu es lo que ocurre.
Para insertar un rollover hay que dirigirse al men Insertar, Objetos de Imagen, a la opcin
Imagen de sustitucin. En la nueva ventana hay que especificar la imagen original y la de
sustitucin.
Es preferible que la opcin Carga previa de imagen de sustitucin est activa. Si se activa, la
imagen de sustitucin se carga cuando se carga la pgina, de este modo se evitan las demoras
debidas a la descarga de la imagen cuando llega el momento de que aparezca.
El Texto alternativo es el texto que aparece al situar el puntero sobre una imagen, o el que
aparecer en lugar de la imagen en el caso de que por algn motivo sta no pueda ser mostrada en
el navegador.
El texto alternativo puede asignarse a todas las imgenes, no slo a los rollovers. Puede hacerse
a travs del campo Alt del inspector de propiedades de la imagen seleccionada.
Botones Flash
Existen otra serie de imgenes especiales, similares a los rollovers, que suelen utilizarse para
crear mens, como pueden ser los botones Flash.
Para insertar un botn Flash hay que dirigirse al men Insertar, Media, a la opcin Botn Flash,
aparecer el siguiente cuadro de dilogo:
- 58 -
A travs de Estilo: puede seleccionarse uno de los distintos formatos de botn que se ofrecen.
En esta misma ventana hay que especificar tambin el Texto que mostrar el botn (Texto del
botn:), as como el nombre con el que ser guardado (Guardar como:) y el vnculo asociado
(Vinculo: y Destino:).
Es preferible guardar los botones Flash en el mismo directorio que los documentos HTML,
en lugar de la carpeta destinada a almacenar imgenes, ya que de no ser as es posible que al
intentar asignar un vnculo dentro del propio sitio, Dreamweaver no permita guardar el botn con
ese vnculo en una ubicacin diferente de la de dicho documento.
Recuerda que los botones deben guardarse con la extensin SWF.
A travs del inspector de propiedades del botn Flash es posible editar de nuevo sus atributos:
Puede volver a abrirse el cuadro de dilogo anterior pulsando sobre el botn Editar, y a travs
del botn Reproducir es posible probar el funcionamiento del botn Flash desde Dreamweaver, sin
la necesidad de tener que abrir la pgina con algn navegador.
Despus de haber probado el funcionamiento del botn Flash, debe pulsarse de nuevo sobre el
botn Reproducir (que habr cambiado por el botn Detener)
Unidad 6. Imgenes (IV)

Texto Flash
- 59 El texto Flash es similar a un rollover, pero en lugar de intercambiar imgenes intercambia el

color del texto.
Para insertar texto Flash hay que dirigirse al men Insertar, Media, a la opcin Texto Flash.
En la nueva ventana, adems del texto, el vnculo y el nombre con el que ser guardado el texto,
hay que especificar el color original y el de sustitucin.
El inspector de propiedades del texto Flash es igual que el de un botn Flash.
Barra de navegacin
Una barra de navegacin es un conjunto de imgenes que se utilizan como opciones de men
para navegar dentro de una web. Un pgina web solo puede contener una nica barra de
navegacin. Para insertar una barra de navegacin hay que dirigirse al men Insertar, Objetos de
imagen, a la opcin Barra de navegacin. En la nueva ventana pueden especificarse cuatro
imgenes diferentes para cada uno de los botones, el vnculo para cada uno de ellos, etc.
A travs de los botones superiores de la ventana es posible crear y eliminar botones de la barra
de navegacin, as como reordenarlos. Con
se crea un botn nuevo, con
se elimina el botn
seleccionado, y con
se puede modificar la posicin del botn seleccionado.
- 60 En Imagen Arriba pones la imagen que quieres mostrar inicialmente (cuando todava no se ha
hecho clic).
En Sobre imagen, pones la imagen que quieres mostrar cuando el usuario mueva el puntero
sobre el botn y ste estaba mostrando la imagen asignada en Imagen Arriba.
En Imagen abajo, pones la imagen que quieres mostrar despus de que el usuario haya hecho
clic en la imagen.
En Sobre mientras imagen abajo, pones la imagen que quieres mostrar cuando el usuario
mueva el puntero sobre sobre el botn y ste estaba mostrando la imagen asignada en Imagen
Abajo.
De esta forma, si asignas imgenes distintas puedes saber cul es el ltimo botn que ha sido
pulsado (el que tiene Imagen Abajo).
Aqu tienes un ejemplo de barra de navegacin. Para su creacin se han utilizado las mismas
imgenes para todos los botones, pero como puedes ver, en el botn del medio aparece
inicialmente una imagen diferente de la de los otros dos. Esto se debe a que la opcin Mostrar
"Imagen abajo" inicialmente estaba activa para este botn. Sita el puntero sobre los distintos
botones, y pulsa sobre alguno, para ver qu es lo que ocurre.
El que existan cuatro imgenes diferentes sirve para identificar cual de los vnculos est activo,
cosa que con un simple rollover no puede hacerse.
A travs de la opcin Insertar es posible especificar si los botones de la barra de navegacin van
a aparecer de forma horizontal o vertical dentro de la pgina.
Unidad 9. Formularios (I)

Vamos a ver qu es un formulario, para qu se utiliza, cmo insertar uno, qu elementos puede
contener y cmo pueden validarse los datos introducidos en l.
Introduccin
Los formularios se utilizan para recoger datos de los usuarios, nos pueden servir para realizar un
pedido en una tienda virtual, crear una encuesta, conocer las opiniones de los usuarios, recibir
preguntas, etc.
Una vez el usuario rellena los datos y pulsa el botn para enviar el formulario se arrancar un
programa que recibir los datos y har el tratamiento correspondiente.
Aqu vamos a ver cmo crear el formulario, (insertar campos y botones en el formulario y
validarlos), pero no la parte de tratamiento de los datos, ya que para ello se necesitan nociones de
programacin, ya sea en VBScript, en JavaScript o en otro lenguaje de programacin, y esto no
entra en los objetivos del curso.
A la derecha tienes un ejemplo de formulario.
Un formulario est formado, entre otras cosas, por etiquetas, campos de texto, mens
desplegables, y botones.
Elementos de formulario
- 61 Los elementos de formulario pueden insertarse en una pgina a travs del men Insertar, opcin
Formulario.
A travs de esta opcin se puede acceder a la lista de todos los objetos de formulario que
pueden ser insertados en la pgina.
Vamos a ver uno por uno algunos de los distintos elementos que pueden formar parte de un
formulario, as como algunas de sus propiedades.
Campo de texto y rea de texto
Permiten introducir texto. El Campo de texto solo permite al usuario escribir una lnea, mientras
que el rea de texto permite escribir varias.
Se puede pasar de Campo de texto a rea de texto a travs del inspector de propiedades,
marcando la opcin Una lnea o Multi lnea respectivamente.
Tambin es posible definirlo como Contrasea es como el campo de texto pero las letras que va
tecleando el usuario se sustituyen por un carcter como podrs ver en la imagen siguiente.
A continuacin tienes un ejemplo de cada uno de estos tres tipos. Puedes escribir en ellos para
ver su funcionamiento.
Campo de texto
A travs del inspector de propiedades es posible asignar tambin el Ancho del cuadro de texto,
el nmero mximo de lneas o caracteres, y el valor inicial del cuadro.
Botn
Es el botn tradicional de Windows. El botn puede tener asignadas tres opciones: Enviar
formulario, Restablecer formulario (borrar todos los campos del formulario), o Ninguna (para
poder asignarle un comportamiento diferente de los dos anteriores).
Enviar
Tambin es posible cambiar el texto del botn, a travs de la propiedad Etiqueta del inspector de
propiedades.
Casilla de verificacin
Es un cuadrito que se puede activar o desactivar.
Deseo recibir informacin
Puede asignrsele el Estado inicial como Activado o como Desactivado.

Botn de opcin
Es un pequeo botn redondo que puede activarse o desactivarse. Si hay varios del mismo
formulario, slo puede haber uno activado. Cuando se activa uno, automticamente se desactivan
los dems.
Superman
- 62 Spiderman
Lista/Men
Una lista o men es un elemento de formulario que lleva asociada una lista de opciones.
Los elementos se aaden a travs del botn Valores de lista... del inspector de propiedades.
Cuando se trata de un men, solo es posible elegir uno de los elementos, pero si se trata de una
lista, a travs de Selecciones del inspector de propiedades puede permitirse que se seleccionen
varios simultneamente.
Etiqueta
Se utiliza para ponerle nombres al resto de elementos de formulario, para que el usuario pueda
saber qu datos ha de introducir en cada uno de ellos.
Unidad 9. Formularios (II)

Crear formularios
Puedes crear formularios a travs del men Insertar, opcin Formulario.
Una vez creado un formulario, este aparecer en la ventana de Dreamweaver como un recuadro
formado por lneas rojas discontinuas, similar al de la imagen de la derecha.
Dentro de dicho formulario se podrn insertar los elementos
de formulario, que como ya sabes puedes insertar a travs del
men Insertar, opcin Formulario.
Es muy recomendable utilizar tablas para organizar los
elementos de los formularios. Utilizando tablas se consigue una
mejor distribucin de los elementos del formulario, lo que facilita su comprensin y mejora su
apariencia.
Validar formularios
La validacin de formularios sirve para hacer que Javascript valide el formulario antes de que se
enve el formulario, para que en el caso de que hayan campos del formulario que sean obligatorios,
tengan que rellenarse antes de poder enviarse.
Para validar un formulario hay que abrir el panel de Comportamientos. Este panel se puede
abrir a travs del men Ventana, opcin Comportamientos, o pulsando Mays+F3.
En este panel hay que desplegar el botn
y pulsar sobre la opcin Validar formulario,
debers haber seleccionado el formulario previamente.
Entonces se mostrar una ventana como la siguiente, donde aparecen todos los elementos del
formulario.
- 63 -
Puede seleccionarse uno por uno cada elemento del formulario, pudiendo especificar los
requisitos que ha de cumplir.
Puede establecerse como campo a rellenar obligatoriamente (Valor Obligatorio), y si su
contenido ha de ser numrico (Nmero), una Direccin de correo electrnico, etc.
Ejercicio paso a paso. Unidad 9. Insertar elementos de formulario

Objetivo.
Practicar las operaciones necesarias para insertar y configurar algunos elementos de
formulario.
4 Haz doble clic sobre el documento tureceta.htm, que aparece en el panel Archivos.
6 Si el inspector de propiedades no se muestra en su totalidad, pulsa sobre el botn para desplegar
sus propiedades ms avanzadas.
7 No es necesario insertar el formulario, ya est creado. Dentro de l hay dos tablas. Sita el cursor
dentro de la ltima celda de la primera fila de la primera tabla.
8 Haz clic sobre el men Insertar.
9 Elige la opcin Formulario.
10 Elige la opcin Campo de texto.
Se abrir un cuadro de dilogo para incluir una etiqueta de texto al lado del campo, djalo todo en
blanco y pulsa Cancelar pues ya tenemos la etiqueta escrita.
11 Haz clic sobre el campo de texto para seleccionarlo.
12 En Campo de texto, del inspector de propiedades, escribe nombre.
13 En Cars mx escribe 50.
14 En Tipo selecciona Una lnea.
15 Sita el cursor dentro de la ltima celda de la segunda fila de la primera tabla.
16 Repite los pasos del 8 al 14, pero con las siguientes diferencias:
En Campo de texto escribe email.
En Cars mx escribe 40.
17 Sita el cursor dentro de la segunda celda de la primera fila de la segunda tabla.
En Campo de texto escribe receta.
En Cars mx escribe 25.
19 Sita el cursor dentro de la segunda celda de la segunda fila de la segunda tabla.
22 Elige la opcin Lista/men.
- 64 Se abrir un cuadro de dilogo para incluir una etiqueta de texto al lado de la lista/men, djalo todo en
23 Haz clic sobre el objeto de lista/men para seleccionarlo.
24 En Lista/men, del inspector de propiedades, escribe tipo.
25 En Tipo selecciona Men.
26 Haz clic sobre el botn Valores de lista.
27 Escribe Plato en Etiqueta de elemento .
28 Pulsa sobre el botn para insertar nuevos elementos en la lista. Aade la etiqueta Postre.
29 Haz clic sobre el botn Aceptar.
30 Selecciona Plato en Seleccionado inicialmente.
31 Sita el cursor dentro de la primera celda de la cuarta fila de la segunda tabla.
34 Elige la opcin rea de texto.
Se abrir un cuadro de dilogo para incluir una etiqueta de texto al lado del rea de texto, djalo todo en
35 Haz clic sobre el rea de texto para seleccionarlo.
36 En Campo de texto, del inspector de propiedades, escribe Ingedientes.
37 En Tipo selecciona Varas lneas.
38 En Ancho car escribe 40.
39 En Lneas nm escribe 5.
40 Sita el cursor en la celda que hay debajo de la que pone Preparacin:.
En Campo de texto escribe preparacion.
En Ancho car escribe 25.
En Lneas nm escribe 8.
42 Sita el cursor en la ltima celda de la segunda tabla.
45 Elige la opcin Botn.
46 Haz clic sobre el botn para seleccionarlo.
47 En Etiqueta, del inspector de propiedades, escribe Restablecer.
48 En Accin selecciona Restablecer formulario.
49 Sita el cursor a la derecha del botn.
En Etiqueta escribe Enviar.
En Accin selecciona Enviar formulario.
52 Ahora puedes probar el funcionamiento de los elementos del formulario, abre el documento en tu
navegador y rellena los campos. Si pulsas en Enviar, no pasar nada porque no tenemos asociado
ningn cdigo al botn Enviar.
Unidad 14. Capas

Vamos a ver algunas de las caractersticas bsicas sobre las capas, para luego poder trabajar
con ellas y aplicarles algn comportamiento.
Introduccin
Las capas no son ms que unos recuadros, que pueden situarse en cualquier parte de la pgina
(es decir, que tienen una posicin absoluta en la pgina), en los que podemos insertar contenido
HTML. Dichas capas pueden ocultarse y solaparse entre s, lo que proporciona grandes
posibilidades de diseo.
Las capas pueden moverse de una posicin a otra de la ventana pulsando sobre el recuadro
blanco, y sin soltar el ratn, arrastrndola hacia la nueva posicin.
Tambin pueden ser redimensionadas pulsando sobre los recuadros negros, y arrastrndolos
hasta conseguir el tamao deseado.
- 65 -
Dentro del recuadro de la capa es posible insertar texto, tablas, imgenes, animaciones flash, y
todos los elementos que puede contener un documento HTML.
Este icono
la capa.
sirve para seleccionar la capa al pulsar sobre l, y al eliminarlo se elimina tambin
Insertar una capa

Las capas pueden insertarse en una pgina a travs del men Insertar, opcin Objeto de
diseo, Div PA (Elemento con Posicin Absoluta).
Una vez se ha insertado la capa, pueden editarse sus atributos, pero para ello hay que
seleccionarla primero.
Una capa puede seleccionarse de varias maneras. Una de ellas es pulsando sobre el icono
correspondiente, pero esto no resulta til cuando existen muchas capas en un mismo documento,
ya que todas las capas tienen asociada una imagen igual a esta, y no es fcil seleccionar la
deseada a la primera.
Cuando existen varias capas en un mismo documento, es preferible seleccionarlas a travs de la
pestaa Elementos PA del panel CSS, que puede abrirse a travs del men Ventana opcin
Elementos PA. Tambin puedes abrir el panel pulsando F2.
En dicho panel aparecen los nombres de todas las capas que existen en el documento actual, y
para seleccionar una de ellas simplemente hay que pulsar sobre el nombre en el panel.
Formato de una capa

Las propiedades de la capa se especifican a travs de su inspector de propiedades.
Elemento CSS-P es el nombre de la capa. Tambin puede ser cambiado a travs del panel
Elementos PA, haciendo doble clic sobre l.
Izq y Sup indican la distancia en pxeles que hay entre los lmites izquierdo y superior del
documento y la capa.
- 66 An y Al indican la anchura y la altura de la capa.

ndice Z es el nmero de orden de colocacin de las capas. Este valor tambin puede cambiarse
a travs del panel Elementos PA. Una capa ser solapada por aquellas capas cuyo ndice Z sea
mayor que el suyo.
Vis indica la visibilidad inicial de la capa. La visibilidad puede ser de cuatro tipos:
Default (visibilidad segn el navegador),
Inherit (se muestra la capa mientras la pgina a la que pertenece tambin se est
mostrando),
Visible (muestra la capa, aunque la pgina no se est viendo) y
Hidden (la capa est oculta).
La visibilidad tambin puede cambiarse a travs del panel Elementos PA, pulsando sobre la
imagen del ojo. El ojo abierto indica Visible, y el ojo cerrado indica Hidden.
A travs de Im. fondo y Col puede indicarse una imagen o un color de fondo para la capa.
Desb. (Desbordamiento) controla cmo aparecen las capas en un navegador cuando el
contenido excede el tamao especificado de la capa.
Visible indica que el contenido adicional aparece en la capa. La capa se ampla para
darle cabida.
Hidden (oculto) especifica que el contenido adicional no se mostrar en el navegador.
Scroll (desplazamiento) especifica que el navegador deber aadir barras de
desplazamiento a la capa tanto si se necesitan como si no.
Auto (automtico) hace que el navegador muestre barras de desplazamiento para la
capa cuando sean necesarias (es decir, cuando el contenido de la capa supere sus
lmites).
Unidad 15. Comportamientos (I)

En este tema vamos a ver las caractersticas bsicas de los comportamientos, as como un par
de ejemplos de entre sus posibles aplicaciones.
Introduccin
Los comportamientos son acciones que suceden cuando los usuarios realizan algn
evento sobre un objeto, como puede ser mover el ratn sobre una imagen, pulsar sobre un texto,
hacer doble clic sobre un mapa de imagen, etc.
Los comportamientos no existen como cdigo HTML, se programan en JavaScript. Dreamweaver
permite insertarlos a travs del panel Comportamientos, por lo que no es necesario escribir
ninguna lnea de cdigo JavaScript para programarlos.
La imagen que aparece a continuacin tiene asociado un comportamiento. Sita el puntero sobre
ella para ver qu es lo que ocurre.
Ests visualizando una capa que estaba oculta.

Si dejas de situar el puntero sobre la imagen, la capa volver
a ocultarse.
- 67 -
La imagen tiene asociados dos comportamientos para mostrar y ocultar la capa. Este tipo de
comportamiento lo veremos ms adelante.
Otros comportamientos que ya has visto son los que se aplican sobre las imgenes de
sustitucin y las barras de navegacin, que ya estn predefinidos, por lo que no es necesario
introducir este conjunto de comportamientos a travs del panel Comportamientos.
Para validar formularios ya viste algunas caractersticas del panel Comportamientos. Vamos a
recordar las que necesitamos para poder insertar comportamientos ms tarde.
El panel Comportamientos se puede abrir
Comportamientos. Tambin pulsando Mays+F3.
En este panel hay que desplegar el botn
elegir una versin de la lista de navegadores.
travs
del
men
Ventana,
opcin
pulsando sobre l, y en Mostrar eventos para
Algunos comportamientos no funcionan para algunos navegadores, por lo que dependiendo del
navegador elegido aparecern unos u otros comportamientos posibles.
Existen comportamientos que funcionan en Internet Explorer pero no en Netscape. Debido a que
la mayora de usuarios utiliza Internet Explorer, vamos a seleccionar este navegador. Puedes
seleccionar alguna de sus ltimas versiones: IE 5.5 o IE 6.0.
Una vez elegido un navegador ya no es necesario volver a elegirlo las siguientes veces que se
desee insertar algn comportamiento.
Insertar un comportamiento
Cuando ya hay establecido algn navegador, ya se pueden insertar comportamientos.
Lo primero que hay que hacer es seleccionar el objeto sobre el que se ha de aplicar el
comportamiento, como puede ser una imagen, un fragmento de texto, etc.
Al desplegar el botn
del panel Comportamientos aparece la opcin Mostrar eventos para,
a travs de la cual se haba elegido el navegador. Tambin aparece la lista de todas las acciones
posibles para el navegador elegido previamente, de entre las que se puede seleccionar una.
- 68 Segn el elemento sobre el que se desee aplicar el comportamiento, se podrn elegir unas
acciones, mientras que otras no.
En este caso la accin Validar formulario no puede seleccionarse porque no existe ningn
formulario en la pgina.
Despus de elegir alguna accin, el comportamiento correspondiente aparece en el panel
Comportamientos. En este caso se han insertado dos comportamientos.
Como puedes ver, cada comportamiento tiene asociados un evento y una accin.
Las acciones son las que se han elegido en la lista anterior y el evento indica cundo se debe de
realizar la accin.
Para eliminar un comportamiento, hay que seleccionarlo en el panel Comportamientos y pulsar

sobre el botn
. Tambin es posible cambiar el orden de los comportamientos aplicados a un
objeto, seleccionndolos y ordenndolos mediante los botones
.
Unidad 15. Comportamientos (II)

Mostrar-Ocultar capas
Uno de los comportamientos ms habitual e interesante es el de
Mostrar-Ocultar capas. Resulta obvio que para poder aplicar este
comportamiento han de existir capas en el documento.
En la pgina anterior tenas un ejemplo de este tipo. Vamos a ver
qu eventos y acciones hay que establecer para que se produzca
dicho comportamiento.
Despus de seleccionar la imagen hay que seleccionar una
accin de la lista, pulsando sobre el botn
Ocultar elementos.
. En este caso la accin tiene que ser la de Mostrar-
Tras elegir la accin, hay que especificar qu capas han de mostrarse u ocultarse para el evento.
Para ello hay que pulsar dos veces sobre la accin, en el panel Comportamientos.
Entonces aparece una nueva ventana, con la lista de todas las capas que hay en la pgina, en la
que puede indicarse la variacin que se va a producir sobre la visibilidad de cada una de las capas.
Puede indicarse si se van a Mostrar, si se van a Ocultar, o si van a adquirir la visibilidad inicial
(Predeterminada).
Para determinar la visibilidad de cada una de las capas es necesario seleccionarlas una por una,
indicando su visibilidad a travs de los botones inferiores de la ventana.
- 69 -
No es necesario aplicar una visibilidad diferente a todas las capas de la pgina, solamente a las
que se desea que cambien al producirse el evento. Por ejemplo, en este caso a la capa gatomes
no se le ha aplicado ninguna visibilidad diferente, ya que no se desea que vare al producirse el
evento.
Si se desea eliminar una visibilidad establecida para alguna de las capas, simplemente hay que
volver a pulsar sobre el botn correspondiente a la visibilidad que ya tiene aplicada. Por ejemplo,
para eliminar la visibilidad aplicada a la capa gatosemana habra que volver a pulsar sobre el botn
Mostrar.
Hay que tener en cuenta en este caso que lo que se desea es que al situar el puntero sobre la
imagen, se muestre la capa, y que cuando el puntero deje de estar sobre la imagen, la capa se
vuelva a ocultar. Para ello es necesario insertar dos comportamientos con la accin MostrarOcultar elementos. Uno de ellos mostrar la capa para el evento onMouseOver (cuando el ratn
est sobre), mientras que el otro la ocultar para el evento onMouseOut (cuando el ratn est
fuera).
Llamar JavaScript
Otro de los comportamientos que puede aplicarse sobre algn objeto es el de Llamar
Javascript. Este comportamiento permite insertar cdigo JavaScript dentro del cdigo del
documento.
Por ejemplo, es posible hacer que se cierre la ventana del navegador al pulsar sobre un objeto.
Para ello hay que insertar la lnea JavaScript "window.close();".
Al igual que para el ejemplo de las capas, lo primero que hay que hacer es seleccionar el objeto
sobre el que se desea aplicar el comportamiento. Seguidamente hay que seleccionar la accin
Llamar Javascript a travs del botn
Entonces aparece una nueva ventana en la que hay que introducir la lnea JavaScript.
Una vez insertado el comportamiento, en el panel Comportamientos hay que establecer el

evento onclick (al hacer clic) para que la llamada a JavaScript se produzca al pulsar una vez sobre
el objeto.
Pulsando dos veces sobre la accin vuelve a abrirse la ventana anterior, y es posible modificar la
lnea de cdigo.
Unidad 16. Comportamientos Avanzados (I)
- 70 En el tema anterior vimos algunos de los comportamientos bsicos, en este tema veremos otros
comportamientos y veremos cmo utilizarlos y aprovecharnos de esta caracterstica de Dreamweaver
para crear diversas funcionalidades automticamente.
Mensajes emergentes
Este comportamiento te permitir crear avisos emergentes como en el siguiente ejemplo.
Haz clic aqu.
Este comportamiento es til para poder enviar mensajes al usuario. Ten en cuenta que no debers
abusar de ellos, pues a la larga pueden resultar un poco incmodos, utilzalos con un objetivo concreto
y no porque quieras atraer la atencin del usuario.
Para crear un mensaje emergente debers seleccionar el elemento al cual ir asociado el mensaje, en
el ejemplo es un texto.
Una vez seleccionado ves al panel Comportamientos (Mayus+F4) pulsa el botn
opcin Mensaje emergente.
y selecciona la
Se abrir el siguiente cuadro de dilogo:
Aqu debers introducir el Mensaje que quieras que se muestre. Pulsa Aceptar cuando hayas acabado
y estar listo.
Es aconsejable que asocies este comportamiento al evento onClick (cuando el usuario hace clic). Es
ms intuitivo para el usuario, por ejemplo, si asocias el mensaje a un evento onMouseOver (cuando se
pase el ratn por encima) el usuario no sabr muy bien porque se ha generado el mensaje de aviso.
En realidad no habr hecho ningn movimiento voluntario para recibir ese tipo de respuesta. Debido a
esto (el estimulo-respuesta que espera el usuario), el evento onClick es el ms indicado para este caso.
Texto de la Barra de Estado

El Texto de la Barra de Estado es un elemento muy utilizado a la hora de personalizar una pgina web.
Aunque no funciona en algunos navegadores.
Si observas esta barra cuando navegas vers que va cambiando su texto segn te encuentres sobre un
enlace o no. Normalmente, las pginas que no tratan la Barra de Estado (por ejemplo, esta) no
muestran ninguna informacin. nicamente cuando posicionas el puntero sobre un enlace el texto de la
Barra cambia para mostrar la direccin a la que este se dirige.
Observa este ejemplo, si haces clic sobre l te llevar a la pgina principal de aulaClic.
Cambiar el Texto de la Barra de Estado significara modificar el texto que aparece en ese momento
cuando realizamos un evento sobre un elemento en particular.
- 71 Este comportamiento es muy til para personalizar mucho ms tu pgina y mostrar informacin que de
otra forma no sera posible. Aunque no todos los navegadores son capaces de responder a este
comportamiento.
Para crear este comportamiento selecciona el elemento al cual quieres asociar este comportamiento.
Abre el panel Comportamientos (Mayus+F4) y pulsa el botn
Luego selecciona la opcin Definir texto y haz clic en Establecer texto de la barra de estado.
Aqu debers escribir el texto que quieres que aparezca en el cuadro Mensaje, luego pulsa Aceptar y
listos.
Dnde y cmo asociar el texto en una pgina? es sencillo. Una de las opciones que te da este
comportamiento es poder asociar un texto en concreto a la pgina en s.
Es decir, que cuando abras una pgina se muestre inmediatamente (y permanentemente) un texto en la
barra de estado. Eso es posible creando el mensaje asociado al body de la pgina (para ello tendrs
que insertar el comportamiento sin seleccionar ningn elemento para que se asocie con toda la pgina)
y lanzndolo en el evento onLoad (en la carga del documento). De esta forma cuando se abra la pgina
se mostrar el mensaje en la barra de estado y permanecer all hasta que se produzca un cambio
(por ejemplo, que se posicione el cursor sobre un enlace).
Ahora veamos cmo debemos actuar al establecer texto para los enlaces. En este caso ser necesario
que introduzcamos dos comportamientos.
El primero, asociado al evento onMouseOver (cuando el ratn se encuentra encima) que mostrar el
mensaje que queramos.
El segundo deber ir asociado al evento onMouseOut (cuando el ratn deja de estar encima) que
deber limpiar la barra de estado para que recupere su estado anterior.
En el caso de que hubisemos establecido un mensaje para el body de la pgina, al salir de un enlace
(en el onMouseOut) deberemos volver a escribir ese mensaje para que siga mostrndose.
En el caso de que la pgina no tuviese un mensaje personalizado, deja el cuadro Mensaje en blanco
para que la barra de estado recupere su estado natural.
Observa que si no estableces el segundo comportamiento, cuando posiciones el ratn sobre el
enlace (o imagen, prrafo..., da igual) el texto de la barra de estado cambiar. Pero cuando el ratn
deje de estar sobre el elemento no habr ninguna orden para que el texto vuelva a cambiar y se
mantendr fijo con el mensaje del anterior comportamiento.
Unidad 21. Cmo crear un Blog (I)

Introduccin
Hasta ahora hemos visto cmo empezar a manejarnos con pginas dinmicas de acceso a datos
utilizando PHP y un servidor mySQL.
- 72 La complejidad de las pginas que creemos depender de la profundidad de nuestros

conocimientos de ambas tecnologas, por lo que muchas veces (sobre todo al principio) nos ser
dificil alcanzar algunos objetivos que nos propongamos.
Vamos a dedicar este tema a la elaboracin de un proyecto complejo en el que deberemos
emplear estas tcnicas de un modo ms completo.
Para ello crearemos un blog o bitcora y utilizaremos herramientas y procedimientos que
hemos visto hasta ahora. No te pierdas este tema, introduciremos algunos conceptos que quiz te
resulten interesantes.
Un blog es una pgina web donde se introduce contenido peridicamente sobre un tema en
particular.
Su contenido suele organizarse en entradas que se van aadiendo con una asiduidad relativa.
Normalmente, estas entradas pueden comentarse. Es decir, cualquier usuario (o a veces
solamente los registrados) pueden dejar su opinin sobre la entrada o sobre el blog en general.
Para facilitar la navegacin por la pgina estas entradas suelen estar organizadas por temas o
categoras, de modo que si te interesa poder leer todas las entradas relacionadas con un tema en
concreto te sea mucho ms sencillo.
Todo blog deber tener, del mismo modo, una parte privada desde donde el usuario dueo de la
bitcora pueda administrar y gestionar los contenidos del blog.
Desde el panel de administracin, que debe estar protegido para que slo tengan acceso
aquellas personas con privilegios suficientes, podremos aadir, modificar o eliminar entradas,
comentarios y categoras.
De hecho, la funcin de esta parte privada es que puedas actualizar el contenido sin necesidad
de tener que recurrir a la interfaz de phpMyAdmin para insertar nuevos registros como vimos en el
tema anterior.
El objetivo de este tema no es entrar en profundidad en cada uno de los detalles, porque
podramos no terminar nunca. Explicaremos el modo en el que deberemos actuar para alcanzar una
estructura cerrada que cumpla los requisitos mnimos que un blog necesita.
El aspecto y funcionalidades finales estn en tus manos, puedes aadir tantas cosas como
quieras.
As que vamos a empezar...
Estructura de datos
Nuestro primer paso para la creacin de un blog ser crear la estructura de datos que contendr
la informacin de las entradas y otros elementos del sitio.
En un sitio simple deberemos crear como mnimo 4 tablas: categorias, entradas, comentarios y
usuarios.
En la tabla categoras deberemos listar el nombre de las categoras en las que se dividen las
entradas.
En la tabla entradas deberemos almacenar el texto de la entrada con su ttulo y fecha.
Obviamente aqu deberemos hacer referencia a qu categora pertenece la entrada. En un blog
ms complejo podramos incluso almacenar qu integrante de la tabla de usuarios cre la entrada...
En la tabla comentarios deberemos almacenar el texto del comentario junto con la
informacin del autor, como su nombre y correo electrnico, por ejemplo. Con conocimientos ms
profundos de PHP podramos guardar hasta su direccin IP.
- 73 Finalmente en la tabla usuarios guardaremos el nombre y contrasea de los usuarios que

tendrn acceso a la edicin del blog. Ms adelante vers que incluso se podran establecer niveles
de privilegios entre ellos.
El punto en cuestin en este caso es el hecho de que en la forma ms simplificada las tres
primeras tablas se encuentran relacionadas del siguiente modo:
Como puedes ver en la imagen en la tabla entradas existe un campo que apunta al ID de
categoras, y del mismo modo en la tabla comentarios tenemos que tener un campo que apunte a
la entrada a la que pertenece dicho comentario.
El problema nos surge, por ejemplo, cuando insertemos una pgina que nos ayude a eliminar
entradas. Qu hacemos con los comentarios asociados a ella? Deberemos crear una pgina ms
para que cuando se borre una entrada tambin lo hagan sus comentarios relacionados? Y repetirlo
para las categoras y sus entradas?.
No va a hacer falta.
Podremos utilizar una caracterstica de la definicin de la base de datos que existe en Mysql (no
exista en las primeras versiones) y en otros sistemas gestores de bases de datos, el borrado y
actualizacin en cascada.
Desde el entorno de PhpAdmin podremos definir esta caracterstica en la vista de relaciones.
Podrs encontrar el enlace a esta vista desde la vista de detalle de cualquier tabla:
Haz clic sobre l y vers una nueva ventana como esta:
- 74 -
Desde aqu podremos especificar las relaciones que tiene la tabla con las dems tablas de la
base de datos y qu hacer cuando un elemento relacionado se borra o modifica.
Fjate que en el ejemplo solamente los campos Id e Id_Categora son susceptibles de esta
opcin. Eso es debido a que hemos definido ambos como ndices, el primero por ser clave primaria
y el segundo porque as lo indicamos en el momento de su creacin utilizando el botn ndice .
El modo en el que deberemos definir nuestro objetivo es el siguiente. A un campo indexado
podemos asignarle una relacin con otro campo indexado de otra tabla (en el ejemplo Id_Categoria
est relacionado con el campo Id de la tabla categorias).
Deberemos decirle a phpMyAdmin qu hacer cuando se borre un elemento en la tabla
relacionada categorias (ON DELETE) o cuando se modifique el valor de clave de un elemento (ON
UPDATE).
La opcin que nos interesa en este caso es CASCADE que acta aplicando los cambios en
cascada. Esto es, si borramos un elemento en la tabla categorias, se borrarn todos los registros
en la tabla entradas que tengan el mismo ID en el campo Id_Categoria.
En el caso de que modificasemos el ID en la tabla categorias tambin se actualizara en todos
los registros de entradas con el mismo Id_Categoria si tenemos indicado ON UPDATE CASCADE.
Ejercicio paso a paso. Unidad 21. Estructura de datos de un Blog

Objetivo.
Practicar las operaciones necesarias para crear la estructura de datos de un blog.
1 Si WAMP no se est ejecutando, lnzalo para realizar este ejercicio.
2 Si el servicio de MySQL no se est ejecutando, lnzalo para poder tener acceso a las bases de datos.
3 Haz clic izquierdo sobre el icono de WAMP en el rea de notificacin y selecciona la opcin
phpMyAdmin.
4 Se abrir una ventana, escribe bd_blog en el campo de texto de la imagen.
5 Selecciona utf-8_spanish_ci en el desplegable Contejamiento.

6 Pulsa Crear para crear la base de datos.
7 Pasaremos a un nueva ventana con la estructura de la base de datos, para crear una nueva tabla
escribe Entradas en Nombre y 5 en Campos.
8 Pulsa el botn Continuar para seguir.
Ahora vamos a configurar los campos.
9 Al primer campo lo llamaremos Id, de tipo INT, con extra auto_increment y Primario ( ). Pues ser
un campo numrico entero, autoincremental (cada vez que se graba un registro el sistema le asigna un
nmero ms que el anterior), y ser la clave principal de la tabla (primario).
10 Al segundo lo llamaremos Titulo, de tipo VARCHAR y con longitud 100.
11 Al tercero lo llamaremos Texto, de tipo LONGTEXT.
12 Al cuarto lo llamaremos Fecha, de tipo DATE.
- 75 13 Al ltimo lo llamaremos Id_Categoria, de tipo INT, con longitud 11 e Indexado ( ). Lo definimos

indexado para poder relacionarlo con la tabla Categorias.
14 Haz clic en Grabar para guardar los cambios y la tabla ya estar lista para utilizarse.
15 Repite los mismos pasos para crear una tabla llamada Categorias con 2 campos.
16 Al primero lo llamaremos Id, de tipo INT, con extra auto_increment y Primario ( ).
17 Al segundo lo llamaremos Nombre, de tipo VARCHAR y con longitud 15.
18 De nuevo, repite los pasos para crear una tabla llamada Comentarios con 6 campos.
19 Al primero lo llamaremos Id, de tipo INT, con extra auto_increment y Primario (
20 Al segundo lo llamaremos Autor, de tipo VARCHAR y con longitud 30.
21 Al tercero lo llamaremos Correo_Autor, de tipo VARCHAR y con longitud 30.
22 Al cuarto lo llamaremos Comentario, de tipo LONGTEXT.
23 Al quinto lo llamaremos Fecha, de tipo DATE.
24 Al ltimo lo llamaremos Id_Entrada, de tipo INT, con longitud 11 e Indexado (
relacionarlo con la tabla Entradas.
25 Por ltimo crearemos una tabla llamada Usuarios con 3 campos.
).
). Indexado para
26 Al primero lo llamaremos Id, de tipo INT, con extra auto_increment y Primario ( ).

27 Al segundo lo llamaremos Usuario, de tipo VARCHAR y con longitud 20.
28 Al tercero lo llamaremos Password , de tipo VARCHAR y con longitud 20.
Ahora definiremos las relaciones entre las tablas.
29 En el marco de la izquierda haz clic sobre la tabla Comentarios y una vez en su ventana haz clic en
Vista de Relaciones.
30 En Id_Entrada selecciona en el segundo desplegable Entradas->Id. Para indicar que en este campo
habr un id que deber estar en la tabla Entradas.
31 En el desplegable ON DELETE selecciona CASCADE.
32 Y por ltimo en ON UPDATE seleccionar CASCADE.
33 En el marco de la izquierda haz clic sobre la tabla Entradas y una vez en su ventana haz clic en
Vista de Relaciones.
34 En Id_Categoria selecciona en el segundo desplegable Categorias->Id.
35 En el siguiente desplegable selecciona CASCADE.
36 Para terminar, en el siguiente vuelve a seleccionar CASCADE.
Ahora vamos a rellenar las tablas, importaremos los datos de unos ficheros de texto.
37 Vuelve a la tabla Categorias seleccionndola en el men de la izquierda.
38 Haz clic en la opcin Importar que encontrars en el men horizontal en la parte superior de la
ventana:
39 En la siguiente ventana pulsa el botn Examinar y busca el archivo categorias-latin1.txt que se

encuentra en la carpeta de ejerciciosdream en la carpeta blog.
40 El archivo se encuentra codificado en latin1 as que seleccinalo en la lista de Juego de caracteres
del archivo.
41 Pulsa el botn Continuar.
42 Asegrate de que se han introducido datos en la tabla pulsando la opcin Examinar de la tabla
Categorias.
43 Repite los mismos pasos con el archivo entradas-latin1.txt para introducir datos en la tabla
Entradas.
44 Repite los mismos pasos con el archivo comentarios-latin1.txt para introducir datos en la tabla
Comentarios.
45 Repite los mismos pasos con el archivo usuarios-latin1.txt para introducir datos en la tabla
Usuarios.
Ahora crearemos un usuario y le asignaremos privilegios para que pueda modificar los datos
almacenados.
46 Vuelve a la ventana principal y haz clic sobre
.
47 Haz clic en el vnculo Agregar un nuevo usuario.
48 En la nueva ventana escribe escritor en Nombre de usuario.
49 En Servidor escribe localhost.
50 En Contrasea escribe aulaclic.
51 En Debe volver a escribir escribe aulaclic de nuevo.
52 Pulsa el botn Continuar para crear el usuario.
- 76 53 En la nueva pantalla desplzate hacia abajo hasta encontrar:
Aqu selecciona la base de datos bd_blog en el desplegable y pulsa Continuar para modificar los
privilegios de este usuario sobre esta base de datos.
54 Selecciona los privilegios SELECT, INSERT, UPDATE y DELETE. Si te das cuenta estn todos en el
marco de Datos.
Vamos a darle a este usuario nicamente permiso de escritura y lectura sobre la base de datos.
Los permisos de Administracin y Estructura los dejaremos en blanco para que este usuario no
pueda acceder a la parte administrativa ni pueda modificar la estructura de las tablas.
55 Pulsa Continuar para asignarle al usuario estos privilegios y habremos terminado.
Unidad 22. XML y RSS (I)

Introduccin
RSS son archivos que contienen informacin de una pgina web con las ltimas
actualizaciones que se han hecho en ella. Este tipo de archivos es muy til para cualquier sitio de
noticias, foros, weblogs o pgina que emita contenido de forma continuada.
Para crear archivos RSS utilizamos el lenguaje XML, que es un lenguaje de etiquetas mucho
ms flexible que HTML.
Este sistema tiene un objetivo muy sencillo, el de organizar informacin para su almacenamiento
y distribucin. Como puedes ver esta es la mayor diferencia entre ambos lenguajes, pues HTML
est orientado a cmo se debe mostrar la informacin y XML a organizarla.
Un ejemplo muy claro de lo que sera un archivo XML es el siguiente:
<biblioteca>
<libro>
<titulo>Las 64 casillas</titulo>
<autor>Pablo Alvarez Castano</autor>
<editorial>Paidotribo Editorial</editorial>
<isbn>848019815X</isbn>
</libro>
<libro>
<titulo>Periodismo iconogrfico</titulo>
<autor>Gonzalo Peltze</autor>
<editorial>EDICIONES RIALP SA</editorial>
<isbn>8432128082</isbn>
</libro>
<libro>
<titulo>Educacin personalizada</titulo>
<autor>Vctor Garca Hoz</autor>
<editorial>EDICIONES RIALP SA</editorial>
<isbn>8432122882</isbn>
</libro>
<libro>
<titulo>Nuestro universo</titulo>
<autor>John R Gribbin</autor>
<editorial>Ediciones B</editorial>
<isbn>8466605657</isbn>
</libro>
</biblioteca>
- 77 En este ejemplo hemos creado un archivo en la que est almacenado la informacin de nuestra
biblioteca. Observa cmo las etiquetas que conforman el archivo no son ms que identificadores
que hemos creado para este fin.
La finalidad de XML y RSS consiste en poder compartir informacin con el resto del mundo de
una forma rpida, sencilla y adaptable.
La organizacin de este tipo de informacin suele ser muy parecida de un sitio a otro.
Utilizaremos Dreamweaver CS3 para incluir fcilmente contenido de un sitio externo en
nuestras pginas.
Nota: Es necesario que el servidor de pruebas soporte el manejo de este tipo de archivos
para poder incluir este tipo de informacin en nuestras pginas.
Ejercicio paso a paso. Unidad 22. Preparando el Servidor de Pruebas

Objetivo.
Practicar las operaciones necesarias para preparar el servidor de pruebas para que soporte
transformaciones XSL.
1 Si WAMP no se est ejecutando, lnzalo para realizar este ejercicio.
2 Haz clic izquierdo sobre el icono de WAMP en el rea de notificacin y selecciona la opcin PHP
extensions.
Se desplegar un men que mostrar todas las extensiones instaladas.
4 Desplzate hacia abajo hasta que encuentres una llamada php_xsl.
5 Haz clic sobre ella y la extensin se instalar.
Unidad 23. Acceso a datos con Spry (I)

Introduccin
A partir de esta nueva versin de Dreamweaver podemos acceder y tratar datos XML desde una
nueva perspectiva: Spry.
Spry se compone de un conjunto de archivos codificados en JavaScript que se aadirn a tu
proyecto desde el momento en que empieces a utilizarlos. Como veremos ms adelante,
Dreamweaver te avisar de la creacin de una nueva carpeta en tu sitio que contendr los archivos
necesarios para la ejecucin de las funciones que vamos a ver a continuacin.
Todos los comandos que vamos a utilizar son accesibles desde el men Insertar Spry o
desde la pestaa Spry de la barra Insertar:
- 78 -
Conjunto de datos XML

Incluir un archivo XML en tu pgina web es muy sencillo, ni siquiera es necesario que sta sea
una pgina dinmica de tipo PHP como llevamos viendo hasta ahora, una pgina bsica en HTML
te servir.
Cuando hayas decidido dnde colocar la regin que contendr los datos importados del archivo
XML debers hacer clic en Insertar Spry Conjunto de datos XML de Spry y se abrir el
siguiente cuadro de dilogo:
Debers rellenar este cuadro de dilogo para definir el modo en que accederemos y cargaremos
el archivo XML deseado.
El procedimiento es muy sencillo, primero indicaremos un nombre en Conjunto de datos para
poder distinguirlo y diferenciarlo de otros posibles conjuntos de datos que queramos cargar.
En Origen XML indicaremos la ruta del archivo XML, puede encontrarse en nuestro propio sitio
o en una direccin concreta de internet, en este ltimo caso deberemos indicar la ruta completa
(incluyendo http://...).
Una vez indicado el archivo XML podemos hacer clic en el botn Obtener esquema para ver el
esquema XML del archivo.
Selecciona el Elemento de fila, es decir la etiqueta XML que contiene el conjunto de datos que
queremos cargar, este paso se realizar tal cual como vimos en la unidad anterior. Una vez
- 79 seleccionado haz clic en el botn Vista previa para ver un listado con los primeros 20 elementos
(de muestra) para asegurarte del contenido del archivo.
Para finalizar podemos definir el tipo de datos que contiene cada dato del elemento. Podemos
hacerlo haciendo clic sobre l en el listado de Columnas del conjunto de datos y seleccionando
su tipo en el desplegable Tipo de datos. Podrs elegir entre: Cadena (de texto), Nmero, Fecha o
Vnculo de imagen.
Este cuadro de dilogo tambin te permitir ordenar los elementos del conjunto repecto a una
de sus columnas en el momento de la carga. Para ello seleccionalo Ordenar y elige el orden
Ascendente o Descendente en Direccin.
Para eliminar las filas duplicadas marca la opcin Distinguir al cargar.
Por ltimo marca la opcin Desactivar cach de datos XML si quieres que el contenido que se
muestre en tu pgina se refresque cada cierto tiempo, indica este intervalo en la opcin
Actualizar datos automticamente. En caso de que esta opcin no se active los datos se
cargarn una vez y slo se actualizarn si se refresca la pgina.
Cuando hayas terminado de configurar el cuadro de dilogo haz clic en Aceptar y los elementos
listos para utilizar se mostrarn en el panel Vinculaciones.
- 80 -
Unidad 8. Marcos (I)

Vamos a ver qu son los marcos y para qu se utilizan. Tambin veremos cmo insertar un
marco sencillo en una pgina, y cmo trabajar con l.
Introduccin
Los marcos o frames sirven para distribuir mejor los datos de las pginas, ya que permiten
mantener fijas algunas partes, como pueden ser el logotipo y la barra de navegacin, mientras que
otras s pueden cambiar. Adems de mejorar la funcionalidad, pueden mejorar tambin la
apariencia.
Cada uno de los marcos de una pgina, contiene un documento HTML individual. Por ejemplo, en
la imagen de la derecha puedes ver una pgina con dos marcos. El marco izquierdo contiene el
documento menu.htm y el derecho el documento quienes.htm. Para poder visualizar la pgina de
este modo, hemos tenido que abrir en el navegador el documento marcos.htm, que es la pgina
que contiene los marcos agrupados.
Es posible editar los documentos contenidos en los marcos desde la pgina que contiene el
grupo de marcos. Esto facilita el trabajo, ya que es ms fcil hacerse una idea de cmo quedar la
pgina al final, cosa que no es posible si se editan individualmente cada uno de los documentos que
contiene el marco.
El trabajar con marcos puede resultar una tarea algo complicada, sobretodo al principio, por lo
que no vamos a profundizar mucho en el tema, y veremos solamente algunos conceptos bsicos y
ejemplos sencillos.
Crear marcos
Existen varias formas de crear un marco. Nosotros vamos a ver solamente una de ellas.
Para crear un marco, primero hay que abrir algn documento. Puede ser uno nuevo o uno ya
existente.
Despus, dirigirse al men Insertar, HTML, Marcos. A travs de esta opcin puede elegirse el
tipo de marco que va a crearse.
Vamos a ver el marco a la Izquierda.
Si pulsamos sobre Izquierda se crear un nuevo marco a la
izquierda del documento actual.
Como puedes ver en la imagen, aparece una lnea que divide el
documento en dos. El documento de partida era uno nuevo.
En este caso tendremos tres documentos: el de la izquierda, el de la
derecha, y el que contiene el grupo de marcos. El de la derecha es el
documento que tenamos inicialmente, que est en el marco conocido como marco padre
(MainFrame).
Para seleccionar el documento que contiene el grupo de marcos hay que pulsar sobre la lnea
que separa los marcos. Esto solo es posible mientras dicho documento no se haya guardado.
Si en lugar de insertar un marco a la izquierda lo insertamos a la Derecha, el marco vaco
aparecer a la derecha del documento original.
En esta imagen puedes ver un ejemplo de marco a la derecha.
- 81 Sobre
un
documento
ya
existente,
menu.htm, se ha insertado un marco a la
derecha.
Al igual que en el caso anterior, tenemos tres
documentos: el de la izquierda, el de la
derecha, y el que contiene el grupo de marcos.
En este caso, el documento que tenamos
inicialmente es el de la izquierda, mientras que
antes era el de la derecha. Por ello, en este
caso el marco padre ser el de la izquierda.
El marco padre siempre es el marco en el
que se encuentra el documento inicial, sobre el
que se han insertado el resto de marcos.
Unidad 8. Marcos (II)

Seleccionar marcos
Para seleccionar los marcos del documento es necesario dirigirse al panel Marcos, que puede
abrirse a travs del men Ventana. Si la opcin Marcos no te aparece directamente en este men,
posiblemente est dentro de la opcin Otros. Tambin puedes abrir el panel Marcos pulsando la
combinacin de teclas Mays+F2.
En el panel Marcos aparecen los marcos que contiene el
documento de marcos, y se puede pasar de uno a otro pulsando
sobre ellos en el panel. Tambin puede seleccionarse la pgina de
marcos pulsando sobre el borde que rodea a los marcos (el que
aparece ms grueso y en relieve en la imagen).
No es necesario seleccionar los marcos para editar los
documentos que stos contengan.
S es necesario seleccionar los marcos para especificar las propiedades especficas de cada uno
de ellos.
Guardar
Todos los documentos que contienen marcos tienen que tener una pgina en cada uno de ellos.
Es por esto que al crear algn marco, se cargan pginas nuevas por defecto en cada uno de ellos, a
excepcin del marco que contiene la pgina original.
Estas pginas nuevas pueden ser posteriormente sustituidas por otras ya existentes, como ya
veremos ms adelante.
Es necesario guardar la pgina que contiene el grupo de marcos, as como cada una de las
pginas que estn incluidas en sus marcos.
No es conveniente guardar la primera vez los marcos con la opcin Guardar todo
podemos equivocarnos al dar los nombres a los nuevos documentos.
, ya que
Es preferible guardar cada documento uno por uno, a no ser que todos los marcos contengan
alguna pgina ya existente, ya que en ese caso el nico documento al que habr que dar nombre
ser al que contiene el grupo de marcos.
Para guardar el documento que contiene el grupo de marcos, hay que seleccionarlo previamente.
- 82 Para guardar cada uno de los otros documentos, simplemente hay que situar el cursor en ellos
antes de pulsar sobre Guardar
Configurar marcos
Una vez seleccionado un marco a travs del panel Marcos, pueden establecerse sus
propiedades a travs del inspector de propiedades.
Cada marco tiene asignado un nombre, que puede cambiarse a travs de Nombre de marco. El
nombre no puede contener espacios en blanco.
En Origen aparece el nombre del documento HTML que est contenido en el marco.
En Bordes puede elegirse si aparecer o no una lnea separando el marco del resto de marcos.
En el caso de que se muestre el borde, se puede especificar un color para ste a travs de Color
borde.
Desplaz. indica si aparecern o no las barras de desplazamiento cuando el documento del marco
no pueda visualizarse completamente.
Si la opcin Mismo tamao est activa, indica que los usuarios no podrn variar las medidas del
marco desde el navegador.
El Ancho del margen y el Alto del margen indican la separacin que habr entre el contenido
del marco y sus bordes izquierdo-derecho y superior-inferior.
Si lo seleccionado es todo el conjunto de marcos (la pgina de marcos), el inspector de
propiedades es algo diferente.
En Bordes puede elegirse si aparecer o no una lnea separando los marcos entre s y puede
especificarse un color para este a travs de Color del borde. Tambin es posible establecer un
grosor para el borde a travs de Ancho.
El campo Columna (o Fila dependiendo del marco elegido en Seleccin Fila Col.) sirve para
especificar el tamao del marco, que puede ser en Pxeles, Porcentaje (de la ventana) o Relativo
(proporcional al resto de marcos).
Normalmente utilizars dos marcos, uno de ellos con tamao en Pxeles, que ser el que
contenga la barra de navegacin, y el otro marco con tamao Relativo, para que se ajuste a la
ventana del navegante.
Unidad 8. Marcos (III)

Contenido del marco
- 83 Como ya has visto, el contenido de un marco puede establecerse a travs del campo Origen del
inspector de propiedades.
Cuando trabajamos con marcos, queremos poder cargar diferentes documentos en cada uno de
ellos. El contenido de alguno de los marcos ha de ser fijo, mientras que el de otros ha de poder
variar.
A travs del campo Origen del inspector de propiedades, slo es posible especificar el
documento que se cargar inicialmente en el marco, pero hemos de poder cambiar este documento
por otro a travs de vnculos.
Como recordars, en el tema de hipervnculos vimos los posibles destinos de los enlaces. Estos
destinos podan ser _blank, _parent, _self, y _top. Vamos a recordar para que serva cada uno de
ellos, ya que ahora que ya sabes trabajar con marcos te sern ms fciles de entender.
_blank:
Abre el documento vinculado en una ventana nueva del navegador.
_parent:
Abre el documento vinculado en la ventana del marco que contiene el vnculo o en el conjunto de
marcos padre. Como ya sabes, el marco padre es el marco en el que se encuentra el documento
inicial, sobre el que se han insertado el resto de marcos.
_self:
Es la opcin predeterminada. Abre el documento vinculado en el mismo marco o ventana que el
vnculo.
_top:
Abre el documento vinculado en la ventana completa
del navegador, lo cual quiere decir que los marcos de la
ventana desaparecern al abrir el vnculo en ella.
Adems de estos destinos para los enlaces, tambin
aparecern los nombres de los distintos marcos de la
pgina.
Podemos aadir todos estos destinos a cualquier elemento de la pgina que contenga algn
enlace, ya sea texto, una imagen, un mapa de imagen, un elemento Flash, etc.
Gracias a todo esto podremos hacer que las barras de navegacin y el resto de enlaces
funcionen a nuestro antojo, cargando unas u otras pginas en alguno de los marcos, en una
ventana nueva, en toda la ventana, etc.
Esta tarea puede resultar algo pesada, y al principio complicada, pero da muy buenos resultados
finales.
Unidad 11. Las plantillas (I)

En este tema vamos a ver qu son las plantillas, cmo crearlas y cmo basar documentos en
ellas.
- 84 -
Introduccin
Cada vez que deseamos crear un sitio web, tenemos que tener muy en cuenta que las pginas
deben seguir un formato uniforme.
La mayora de nosotros solemos hacer copias de los documentos ya creados, y trabajar sobre
estas copias, modificando simplemente su contenido. Esta es la forma ms sencilla de tener
pginas con una estructura basada en la estructura de otras ya creadas previamente.
Las plantillas son una especie de copia de la pgina en la que van a estar basadas el resto de
pginas del sitio web, pero que incluyen la posibilidad de establecer unas zonas editables y
otras zonas que sern fijas, que no podrn ser modificadas.
No es posible modificar las propiedades de una pgina que est basada en una plantilla, a
excepcin del ttulo. Cuando se desea que existan pginas con, por ejemplo, diferente color de
fondo, es necesario crear plantillas diferentes con los distintos colores, y basar las pginas en una u
otra plantilla, segn el color de fondo que se desee para cada una.
Cuando se modifica el diseo de una plantilla, se pueden actualizar todas las pginas basadas
en ella.
Las plantillas son archivos con la extensin DWT que se guardan en el sitio web, dentro de una
carpeta llamada Templates.
Crear plantillas
Las plantillas pueden crearse desde cero, o a partir de una pgina ya existente.
Una forma de crear una plantilla desde cero es a travs del panel Archivos, pestaa Activos.
La pestaa Activos se puede abrir a travs del men Ventana, opcin Activos. Tambin
pulsando F11.
Una vez abierto el panel hay que seleccionar el botn
para poder trabajar con las plantillas.
Los botones inferiores del panel Activos
similares a los del panel Estilos CSS.
son
El nico botn diferente es el primero, que en este caso

sirve para actualizar la lista, el resto permiten crear una
nueva plantilla, editar una plantilla seleccionada en la lista,
o eliminarla.
Para crear una nueva plantilla hay que pulsar sobre el botn
pulsa con el botn derecho del ratn y elige Nueva Plantilla).
(Si este botn no est activado,
Cuando se pulsa ese botn aparece un nuevo documento en la lista de plantillas, al que es
posible cambiarle el Nombre pulsando previamente sobre l.
Para modificar una plantilla la seleccionamos de la lista y pulsamos el botn
Paraeliminar una plantilla la seleccionamos de la lista y pulsamos el botn
.
.
Las plantillas se guardan en el sitio web actual, dentro de la carpeta Templates, que se crea
automticamente.
- 85 Para crear una plantilla a partir de un archivo existente es necesario abrir dicho archivo, y
despus guardarlo como plantilla a travs del men Archivo, opcin Guardar como plantilla.
Cuando se pulsa dicha opcin, aparece una ventana como la de la derecha.
En ella es necesario especificar el nombre con el que va a ser guardada la plantilla, a travs del
campo Guardar como, y elegir, de entre la lista de sitios, el Sitio: en el que se va a guardar.
Unidad 11. Las plantillas (II)

Establecer regiones editables en una plantilla
Todos los elementos de una plantilla estn bloqueados por defecto, no se pueden modificar.
Es necesario establecer las zonas que s podrn ser editadas en las pginas que se basen en
dicha plantilla.
Para editar una plantilla hay que abrirla en Dreamweaver. Una forma de abrirla es a travs del
panel Activos, pulsando dos veces sobre ella, o estando seleccionada pulsando sobre el botn
como ya hemos visto.
Una vez abierta la plantilla es posible establecer sus propiedades a travs de la ventana
Propiedades de la pgina.
Como recordars, para abrir esta ventana puedes:
Pulsar la combinacin de teclas Ctrl+J.
Hacer clic sobre el men Modificar y elegir la opcin Propiedades de la pgina.
Pulsar con el botn derecho sobre el documento abierto en Dreamweaver, y en el men
contextual que aparece seleccionar la opcin Propiedades de la pgina.
Para insertar una regin editable hay que situar el puntero en el lugar en el que se desea insertar,
y despus dirigirse al men Insertar, Objetos de plantilla, opcin Regin editable, o pulsar la
combinacin de teclas Ctrl+Alt+V.
En la nueva ventana hay que establecer un Nombre para la regin editable.
Dentro de la plantilla no pueden existir dos regiones editables con el mismo nombre.
Posteriormente puede modificarse el nombre a travs del inspector de propiedades de la regin
editable.
- 86 -
La zonas editables aparecen representadas en Dreamweaver como un recuadro con una etiqueta
de color turquesa. En la etiqueta aparece el nombre de la zona editable.
Dentro del recuadro es posible insertar objetos, que aparecern por defecto en aquellos
documentos que se basen en la plantilla. Estos objetos, al estar dentro de la zona editable, podrn
ser modificados en las pginas.
Todos los objetos que se encuentren fuera de estas zonas editables aparecern tambin en las
pginas, pero no podrn ser modificados.
En este caso, la imagen con el logotipo de aulaclic aparecera en todas las pginas que se
basaran en esta plantilla, mientras que todo lo que insertramos dentro de la zona editable
FormularioCorreoElectronico podra ser modificado.
Unidad 11. Las plantillas (III)

Basar pginas en una plantilla
El uso de las plantillas puede resultar un poco complicado al principio. Vamos a ver cmo basar
una pgina vaca en una plantilla, ya que por el hecho de estar vaca resulta ms sencillo.
Una vez abierto el documento, hay que dirigirse al men Modificar, Plantillas, opcin Aplicar
plantilla a pgina.
Es preferible que antes de hacer esto nos aseguremos de que el sitio que se encuentra abierto
en Dreamweaver es el mismo en el que vamos a guardar el documento, y el mismo en el que se
encuentra la plantilla en la que queremos basarlo.
Despus de pulsar sobre la opcin Aplicar plantilla a pgina aparece una ventana como la de la
derecha, en la que hay que seleccionar una de las plantillas de la lista Plantillas: del sitio.
- 87 Es recomendable activar la casilla Actualizar pgina cuando cambie la plantilla, para que la
pgina se actualice automticamente en el caso de modificar la plantilla en la que se basa.
A pesar de estar trabajando sobre un documento vaco, es posible que al aplicar la plantilla
aparezcan nombres de regiones no coincidentes entre el documento en blanco y la plantilla. En ese
caso se muestra una ventana como la siguiente.
En ella hay que establecer una correspondencia entre el nombre de la regin del documento
vaco con el nombre de alguna regin de la plantilla.
En este ejemplo, la regin del documento vaco que no coincida con el nombre de ninguna
regin de la plantilla era la regin Document body.
A travs de Mover contenido a la nueva regin: se puede seleccionar una regin de la plantilla,
para establecer as la correspondencia que se necesitaba.
Despus de establecer las correspondencias necesarias, se carga la plantilla en el documento vaco.
- 88 En este caso no es posible cambiar el color de fondo, que est definido en la plantilla, pero s es
posible cambiar todos los elementos de la tabla y el formulario, ya que se encuentran dentro de una
zona definida en la plantilla como editable.
En este caso se podra cambiar el estilo del texto, el color de las celdas, combinarlas, etc.
Para que una pgina deje de estar basada en una plantilla hay que dirigirse al men Modificar,
Plantillas, opcin Separar de plantilla.
Cuando se separa una pgina de una plantilla, el contenido de la pgina sigue siendo el mismo
que el que tena cuando an estaba basada en la plantilla, pero sin las restricciones establecidas
por la plantilla.
Unidad 22. XML y RSS (II)

Importar datos de un Archivo externo
Para poder mostrar los datos almacenados en un archivo XML o RSS externo deberemos crear
un archivo XSLT.
Los archivos XSLT transforman y formatean la informacin para que pueda ser visualizada
correctamente en un navegador.
El primer paso para importar la informacin de un archivo ser abrir un nuevo documento
(Archivo Nuevo).
Puedes elegir entre crear un fragmento de archivo (que incluiremos ms tarde en otro), o
directamente crear una pgina completa que contenga informacin sobre un archivo externo.
Normalmente nos ser ms til crear fragmentos, pues luego son ms fciles de adaptar al resto
de las pginas.
- 89 -
Aqu deberemos indicar la fuente XML de la que queramos sacar los datos.
Como ves en la imagen, tienes dos posibilidades. Una de ellas es tomar el archivo XML o RSS
directamente del mismo sitio donde se encuentra la pgina.
La segunda opcin toma el archivo de una URL en Internet. En este caso debers asegurarte de
cuando en cuando que sigue vigente y no ha sido cambiado de lugar.
Cuando aceptemos el cuadro de dilogo vers que en el panel Vinculaciones (CTRL + F10)
aparece la estructura del archivo:
Habitualmente los archivos liberados por los diferentes sitios en Internet suelen tener una
estructura muy similar, por lo que siempre tienen al principio del canal (as es como llaman al
archivo liberado, channel en ingls) una breve descripcin de su sitio.
En este caso puedes ver como pende del elemento channel un ttulo (title), un enlace (link), una
descripcin y el lenguaje y a continuacin el contenido propiamente dicho bajo el elemento item.
Nuestra forma de actuar una vez hayamos declarado la fuente XML y seamos capaces de ver su
contenido en el panel Vinculaciones ser muy parecida a como lo hacamos cuando creabamos un
juego de registros de una base de datos.
Simplemente tendremos que arrastrar el elemento que queremos que se muestre a la pgina y
se visualizar.
Recuerda que para acceder a una visualizacin de la pgina debers pulsar la tecla F12. En este
caso no tendremos vista de LiveData.
Unidad 25. Spry y Formularios (I)

Introduccin
- 90 En las anteriores unidades vimos cmo poder acceder a datos utilizando Spry. Aunque la
funcionalidad de esta librera no se limita nicamente a eso. Como hemos podido ver tambin
eramos capaces de realizar operaciones dinmicamente sin necesidad de realizar refrescos en la
pgina.
En esta unidad y las posteriores veremos las posibilidades de Spry para crear comportamientos
AJAX en nuestro sitio.
Ahora veremos qu puede hacer Dreamweaver por nuestros formularios. Encontrars las
opciones que utilizaremos bajo el men Insertar Spry o en la barra Insertar, pestaa Spry.
Validacin de campos de texto

La primera opcin que veremos es la insercin de campos de textos dinmicos en nuestros
formularios. Utilizando la opcin Insertar Spry Campo de texto de validacin de Spry
podremos insertar un campo de texto que valide los valores que se introducen en l:
Introduce tu nmero de telefono:
999-999999
Cuando insertamos este tipo de controles en nuestros formularios podremos ver lo siguiente en la
vista de Diseo:
El objeto de campo de texto es exactamente igual al que vimos en la unidad de formularios.

Haciendo clic en la etiqueta azul Campo de texto de Spry podrs ver las opciones de validacin en
el panel Propiedades:
Veamos las posibilidades que nos ofrece.
- 91 En el desplegable Tipo podemos seleccionar el tipo de valor que se va a introducir. En principio,

Spry tiene predefinidos bastantes tipos como telfono, nmero de seguridad social, tarjetas de
crdito, fechas, correos electrnicos, etc... Solamente ser necesario seleccionarlos y elegir el
formato en el desplegable Formato.
De este modo la validacin ya viene programada automticamente y no es necesario aadir
mucho ms.
En el caso de que queramos aadir una validacin que no exite en el desplegable Tipo
deberemos seleccionar Personalizado. Para validar la introduccin deberemos,entonces, introducir
un patrn contra el que se comparar y se evaluar si es correcto o no. Para ello escribiremos en el
campo Patrn una secuencia de caracteres que imite el texto que buscamos.
Por ejemplo, si queremos que se introduzca un nmero con 5 dgitos escribiremos 00000. Fcil,
verdad?.
En este caso deberemos activar la casilla Aplicar patrn para que Dreamweaver sepa que tiene
que realizar la validacin utilizando el patrn que hemos indicado.
En cualquier caso podemos escribir en Sugerencia una ayuda para que el usuario sepa
exactamente qu debe escribir. Ten en cuenta que al validar un campo estamos obligando a que
se escriba determinado tipo de datos por o tanto ser necesario hacerselo saber de alguna forma.
El resto de opciones son muy sencillas. Valor min y Valor mx establecen un rango de valores al
cual debe pertenecer el valor introducido. Con Car min y Car mx podemos indicar cuantos
caracteres minimos y mximos admite la caja de texto.
Activa la opcin Obligatorio si quieres que el campo no pueda dejarse en blanco.
Luego encontraremos las opciones de validacin, es decir, cuando queremos que Spry compare
lo que se ha escrito y lo considere correcto o errneo. El valor Enviar estar siempre marcado por
defecto, esto es, cada vez que se enve el formulario se comprobar que los datos introducidos son
correctos.
Aunque tambin es posible aadir dos momentos ms donde se evaluar el contenido.
Desenfocar ejecuta la evaluacin cuando se abandona el cuadro de texto, y Cambiar se ejecuta
cada vez que se escribe cualquier caracter en la caja.
Puedes marcar cualquiera de estas opciones, pero ten en cuenta que por ejemplo Cambiar
puede resultar un poco engorroso pues mostrar un error cada vez que escribamos hasta que se
alcance el patrn correcto. De todas formas te recomendamos que pruebes cada una de las
opciones y te quedes con la que ms se ajuste a tus necesidades.
Unidad 25. Spry y Formularios (II)

Estados de validacin
Una vez definido nuestro campo de validacin deberemos configurar los mensajes de error que
se mostrarn. Dependiendo del tipo de control que utilicemos (como veremos ms adelante) el tipo
de error puede ser diferente, pero su tratamiento es exactamente el mismo.
Veremos cmo tratarlos tomando como ejemplo la validacin de campos de texto que acabamos de ver.
En el panel Propiedades podrs encontrar el desplegable Estados de vista previa:
- 92 Desde esta opcin puedes pasar a la visualizacin de cada uno de los estados de error
existentes:
En la imagen el primer estado corresponde a la vista precia de Obligatorio, el segundo a

Formato no valido.
En cualquiera de los casos podremos editar el mensaje de error, cambiar su apariencia mediante
estilos desde los paneles Propiedades y CSS e incluso colocarlos donde mejor nos convenga.
Recuerda que cada uno de los estados es independiente del resto, por lo que ser necesario que
edites cada uno de ellos si quieres que se muestren de un modo personalizado.
Validacin de campos
desplegables
Otra de las opciones que nos proporciona Spry es la validacin de controles desplegables, para
ello deberemos hacer clic en Insertar Spry Seleccin de validacin de Spry. De este modo
aadiremos un control de lista desplegable tal y como vimos en la unidad de formularios.
La utilidad de esta herramienta es la posibilidad de controlar los valores que se seleccionan:
Selecciona un elemento:
En este caso las opciones que se presentan al seleccionar el elemento Spry son las siguientes:
En este caso las opciones comunes son los Estados de vista previa y los de validacin que
son iguales a los del campo de texto. Aunque en el caso de las listas desplegables es aconsejable
usar el valor Cambiar para que se evale cada vez que se seleciona un valor.
Las opciones de validacin tienen mucho que ver en este caso con el contenido de la lista de
valores del desplegable en s:
- 93 Observa que si marcamos la opcin de No permitir valores en blanco al seleccionar el valor2

(en la imagen) se ejecutara el mensaje de error Obligatorio.
En el caso de No permitir Valor no vlido (-1, aunque puedes modificar el valor para que tome
el que t quieras) al seleccionar -- elige una opcin -- saltara el error No vlido.
Unidad 25. Spry y Formularios (III)

Casillas de verificacin
Desde Insertar Spry Campo de verificacin de validacin de Spry podemos crear y
controlar las casillas de verificacin de nuestros formularios. Observa el ejemplo a continuacin:
Selecciona entre 1 y 3 opciones:
Valor1
Valor2
Valor3
Valor4
Valor5
Valor6
Al crear el campo de verificacin se crea nicamente una casilla. Esto es debido a que en el
panel Propiedades existe la opcin de poder establecer que dicha casilla sea de seleccin
obligatoria, como en el caso de formularios en los que se ha de aceptar las condiciones de
determinado contrato, etc.
Un uso ms avanzado de este control es cuando combinamos ms de una casilla en la misma

regin de Spry.
Este caso es un poco ms complicado. Deberemos crear la regin Spry tal y como acabamos de
ver, luego sin salirnos de la zona delimiatada con el recuadro azul deberemos insertar ms
casillas de verificacin mediante el men Insertar Formulario Casilla de verificacin hasta
alcanzar el nmero de casillas que necesitemos:
En el panel Propiedades deberemos indicar que estamos trabajando com ms de una casilla
marcando la opcin Aplicar rango (varias casillas). De esta forma podremos indicar el mximo y
mnimo de casillas de verificacin que se podrn cambiar.
Para ello utiliza los campos disponibles en N mnimo de opciones seleccionadas y N
mximo de opciones seleccionadas:
- 94 -
Esta ltima opcin es la que puedes ver en el ejemplo ms arriba.
Unidad 25. Spry y Formularios (IV)

reas de texto
La ltima opcin que veremos ser la creacin de reas de texto con validacin. Puedes hacerlo
desde Insertar Spry rea de texto de validacin de Spry.
Aqu tienes un ejemplo de cmo funciona:
Introduce un texto de 50 caracteres como mximo:
Llevas escritos 0 caracteres.
Al crear el campo de validacin podrs encontrar las siguientes opciones en el panel

Propiedades:
A continuacin pasaremos a explicarlas.

En cualquier caso siempre podremos obligar al usuario a que rellene el campo marcando la
opcin Obligatorio. E incluir un texto de ejemplo escribindolo en Sugerencia.
Escribe en Car min y Car mx el nmero de caracteres mnimos y mximos que aceptar el
control. Puedes hacer que los caracteres que se escriban de ms no se puedan escribir marcando
la opcin Bloquear caracteres extra.
Finalmente puedes incluir un contador de caracteres marcando la opcin Recuento de
caracteres o Caracteres restante para que se muestren los caracteres que se han escrito o los
que faltan para alcanzar el mximo respectivamente.
Este control es muy sencillo de utilizar y permite el control del textro introducido de una forma
cmoda y rpida.
Unidad 26. Controles Spry Avanzados (I)

Introduccin
- 95 En esta unidad veremos algunos controles basados en AJAX que Dreamweaver pone a nuestra
disposicin utilizando su librera Spry.
Estos controles harn que tus pginas se muestren de una forma ms profesional, vistosa y
ordenada.
Podrs en contrarlos bajo el men Insertar Spry o en la pestaa Spry de la barra Insertar:
Estos controles son completamente configurables y adems tambin aceptan modificaciones en

su estilo utilizando CSS.
Barra de mens
Podemos crear mens de forma muy sencilla haciendo clic en Insertar Spry Barra de
mens de Spry:
El primer cuadro de dilogo que encontraremos ser el siguiente:
Aqu podremos seleccionar el diseo para nuestro men, haz clic en Horizontal o Vertical y
pulsa el botn Aceptar.
- 96 Se crear automaticamente el men, que podrs visualizar desde la vista de Diseo de esta
forma:
Haciendo clic en la cabecera azul Barra de mens de Spry podremos ver en el panel
Propiedades las opciones necesarias para configurar nuestro men:
La creacin de elementos es bastante sencilla. Este men admite hasta 3 niveles diferentes, as
que en principio la primera tarea ser definir el primer nivel. Esto lo haremos desde el primer cuadro
de listado.
Aadir y quitar elementos es tan fcil como utilizar los botones
, y podemos reorganizarlos
luego utilizando las flechas
. Cada uno de estos elementos puede ser modificado para que
muestren el texto que queramos, lo haremos desde las cajas de texto que encontramos a la
derecha.
En Texto escribiremos el literal que queremos que se lea en el men. Si ese elemento debe
contener un enlace (a una pgina o a un correo electrnico) lo haremos escribiendo en la caja de
texto Vnculo. Si trabajamos en una pgina con marcos podremos utilizar el campo Destino para
establecer en cul de ellos se abrir el enlace.
Por ltimo, Ttulo contendr una ayuda contextual que se mostrar en forma de etiqueta al
colocar el ratn sobre el elemento del men.
Una vez definido el primer nivel, asaremos a crear los hijos de cada elemento. Selecciona uno
de los tems y crea las opciones que se desplegarn al colocar el ratn sobre ellos. De nuevo utiliza
los botones
y
para gestionar los elementos en el segundo listado.
Selecciona cada uno de los elementos de primer nivel y ves creando sus subelementos uno a uno.
Una vez creado un elemento de segundo nivel tambin seremos capaces de colgar sobre ste
otro elemento de tercer nivel para ello utiliza los botones
y
y rellena el tercer listado de
elementos.
Finalmente diremos que si tienes algn problema en visulizar el men en vista de Diseo,
puedes desactivar los estilos haciendo clic en el botn Desactivar estilos para visualizarlos de un
modo ms sencillo y poder comprender mejor el orden de los niveles creados:
- 97 -
Unidad 26. Controles Spry Avanzados (II)

Navegacin por Fichas
Puedes crear un control como el que mostramos a continuacin haciendo clic en Insertar
Spry Paneles en fichas de Spry:
Estas fichas son contenedores que admiten todo tipo de elementos HTML. Facilitan la
navegacin y son muy tiles para organizar la informacin y no congestionar la pgina ni al usuario.
Al insertarla vers que se inserta algo parecido a esto:
Seleccionando el control haciendo clic en la cabecera azul vers lo siguiente en el panel

Propiedades:
Desde aqu podrs aadir tantas fichas como desees y ordenarlas utilizando los botones
Luego selecciona el Panel predeterminado que es el que se mostar por delante cuando se
visualice la pgina en el explorador.
Para modificar los ttulos de ficha simplemente cambia el nombre desde la vista de Diseo.
Puedes modificar su contenido normalmente incluyendo todo tipo de tablas, imgenes o
elementos que hayamos visto hasta ahora. Para pasar del contenido de una ficha a otra slo coloca
el ratn sobre ella y haz clic sobre el icono con forma de ojo que aparecer:
Luego modifica el contenido del panel abierto.

Recuerda que el panel que se visualizar primero en la pgina es el que elijas como
predeterminado en el panel Propiedades.
- 98 -
Unidad 26. Controles Spry Avanzados (III)

Control Acorden
Otro control avanzado que utiliza las ventajas de AJAX y que Spry nos permite utilizar es el
Acorden:
Para utilizarlo haz clic en Insertar Spry Acorden de Spry. Se
crear automticamente un elemento en tu pgina parecido a esto:
Este control es tan sencillo de configurar que en el panel

Propiedades slo encontrars lo siguiente:
Aade y organiza las secciones utilizando los botones

Y luego simplemente edita el contenido de cada una de ellas y su nombre en la cabecera.
Del mismo modo que con las pestaas para ver el contenido de una seccin coloca el ratn
sobre su cabecera y haz clic sobre el icono con forma de ojo que aparecer:
Unidad 26. Controles Spry Avanzados (IV)
- 99 -
Panel con Contraccin

Para terminar con los controles avanzados veremos el panel que puede contraerse de Spry.
Puedes ver un ejemplo aqu:
Para insertar un panel de este tipo slo tienes que hacer clic en Insertar Spry Panel que
puede contraerse de Spry.
En el panel Propiedades podrs ver sus opciones de configuracin:
Desactivando la opcin Activar animacin eliminars la animacin que se produce al contraer el

panel. Esta opcin slo afecta al comportamiento de apertura o cierre y no tiene mucha ms
trascendencia, as que simplemente depender de tu gusto y lo que se adapte mejor al diseo de tu
pgina web.
Puedes decidir si el panel se muestra inicialmente abierto o cerrado en la pgina seleccionando
el estado en el desplegable Estado predeterminado. Del mismo modo, si mientras trabajas en
vista de Diseo te molesta que este abierto puedes cerrarlo haciendo clic en el desplegable
Mostrar y seleccionando Cerrado.
Esto ltimo tambin puedes hacerlo pulsando sobre el icono del ojo que aparecer en la
cabecera del panel si situas el ratn sobre ella:
Para modificar este panel simplemente edita su contenido como en el resto de controles que
hemos visto, Nada ms fcil.
Cambiar Estilos CSS

Al principio de la unidad dijimos que era posible modificar el aspecto de los controles Spry.
- 100 Esto es muy sencillo de conseguir. Cada vez que insertamos un control de este tipo se crean dos
nuevos archivos en una carpeta llamada SpryAssets en nuestro sitio. Uno de ellos es un archivo
JavaScript que contiene el cdigo necesario para el buen funcionamiento del control, nunca
modifiques este cdigo.
El otro, un archivo CSS, es el que contiene las reglas de estilo que se aplican sobre el control.
Para modificar el estilo de alguno de tus controles slo tendrs que modificar dicho archivo CSS
para adaptarlo a tus necesidades.
Recuerda que si necesitas ayuda con los estilos en cascada puedes visitar de nuevo el tema 17.
Unidad 22. XML y RSS (III)

Trabajar con elementos XML
Una vez hayamos insertado los elementos del archivo XML podremos tratarlos de forma similar a
como lo hacamos en el tema anterior.
La nica diferencia que encontrars es que no podrs crear enlaces arrastrando los elementos al
atributo href del ancla.
Para ello necesitars hacer clic en el icono
que aparece junto al campo Vnculo en el panel
Propiedades y seleccionar Fuentes de datos en el cuadro de dilogo Seleccionar archivo:
En la barra Aplicacin encontrars una nueva pestaa llamada XSLT:
- 101 -
El primer botn nos permitir aadir Texto dinmico, esta opcin acta del mismo modo que si
arrastramos el elemento desde el panel Vinculaciones a la pgina.
Luego encontraremos elementos de bucle o repeticin y condicionales.
Crear repeticiones
Para crear una repeticin que recorra todos los registros existentes en un archivo RSS
deberemos utilizar el botn Repetir Regin
Simplemente selecciona los elementos a repetir y pulsa el botn.

Aqu debers seleccionar el elemento sobre el cual quieres que se produzca la repeticin.
En el caso del ejemplo que estamos siguiendo en estas imgenes deberemos seleccionar item,
pues querremos que se repitan todos los elementos title y description que se encuentren en item.
Tambin podemos insertar filtros haciendo clic en la flecha que acompaa al texto Construir
filtro:
- 102 -
Utiliza los botones

la repeticin.
que se encuentran en el cuadro de dilogo para aadir condiciones a
En la imagen podemos ver que el filtro se realiza conforme al item, donde el ttulo debe ser
distinto (!=) a "Wikipedia, la enciclopedia libre".
Qu significa esto? Estamos repitiendo una regin y obviando aquel item que posea un ttulo
determinado.
Tambin sera posible filtrar para que slo se muestren un nmero determinado de items. Para
ello utilizaremos position() que recupera la posicin del elemento dentro del listado:
En este caso el filtro que hemos aadido hace que slo se muestren los 5 primeros elementos.
Sencillo, verdad?

Curso de Dreamweaver Cs3

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Curso de Dreamweaver Cs3

Caricato da

Copyright:

Formati disponibili

-1-

Curso de Dreamweaver CS3. ndice

19. Servidor de Pruebas

-2Unidad 1. Conceptos bsicos de Dreamweaver CS3

Caractersticas del texto

Unidad 16. Comportamientos Avanzados

Aplicar Estilos CSS

Configurar un Sitio Remoto

Unidad 21. Cmo crear un Blog

Ejercicios paso a paso

17. Crear una hoja de estilos

3. Crear sitio local y modificar las

-419. Modificar Tablas

Unidad 1. Conceptos bsicos de Dreamweaver CS3 (I)

Novedades de Dreamweaver CS3

Unidad 1. Conceptos bsicos de Dreamweaver CS3 (II)

Cmo tener una pgina en Internet

Unidad 1. Conceptos bsicos de Dreamweaver CS3 (III)

Desde el icono de Dreamweaver CS3 del escritorio

Compaginar dos sesiones

Abrir y guardar documentos

de la barra de herramientas estndar.

Pulsar la combinacin de teclas Ctrl+O.

de la barra de herramientas estndar.

Pulsar la combinacin de teclas Ctrl+N.

de la barra de herramientas estndar.

Pulsar la combinacin de teclas Ctrl+S.

de la barra de herramientas estndar.

Hacer clic sobre el men Archivo y elegir la opcin Guardar todo.

Unidad 1. Conceptos bsicos de Dreamweaver CS3 (IV)

Cambia el Ttulo por Mi primera pgina.

Unidad 1. Conceptos bsicos de Dreamweaver CS3 (V)

Si no te aparece, puedes mostrarlo a travs del

y pulsa tres veces sobre el botn

Esta es mi primera pgina

A continuacin se muestra un enlace para acceder a otra web:

Unidad 2. El entorno de trabajo (I)

Unidad 2. El entorno de trabajo (II)

La barra de mens contiene las operaciones de Dreamweaver, agrupadas en mens desplegables. Al

- 13 La barra de herramientas de documento

Los paneles e inspectores

se despliega para mostrar ms opciones. Este botn se encuentra en la

Seguramente ser la herramienta de Dreamweaver que ms vayas a utilizar.

La barra de herramientas Insertar o panel de objetos permite insertar elementos en un documento

Personalizar el rea de trabajo (I)

Tambin puede tener este otro aspecto:

Cambiar el nombre de un grupo de paneles

Es posible cambiar el nombre de un grupo de paneles de forma

Cambiar la agrupacin de los paneles

, o pulsar con el botn

Personalizar el rea de trabajo (II)

Acoplar y desacoplar grupos de paneles

Unidad 2. El entorno de trabajo (III)

La vista Cdigo y Diseo

- 19 La vista Cdigo y Diseo permite dividir la ventana

Unidad 3. Configuracin de un sitio local (I)

Crear o editar un sitio web sin

En el caso de haber seleccionado la opcin

Ejercicio paso a paso. Unidad 3.Crear un sitio web local

Unidad 3. Configuracin de un sitio local (II)

que aparece en la parte superior del

Subir Archivos al servidor

Vers como el programa empieza a copiar la informacin de tu disco a Internet.

Unidad 3. Configuracin de un sitio local (III)