Curso Dreamweaver CS3

Curso de Adobe Dreamweaver CS3.
Indice Curso de Dreamweaver CS3 Avanzado
aulaClic. Curso de Dreamweaver CS3. Índice
Cómo utilizar este curso.
1. Conceptos básicos de Dreamweaver CS3 10. Multimedia 19. Servidor de Pruebas

2. El entorno de trabajo 11. Las plantillas 20. Páginas Dinámicas
3. Configuración de un sitio local 12. HTML desde Dreamweaver 21. Cómo crear un Blog
4. El texto 13. Otros elementos 22. XML y RSS
5. Hiperenlaces 14. Capas 23. Acceso a datos con Spry
6. Imágenes 15. Comportamientos 24. AJAX y Spry Framework
7. Tablas 16. Comportamientos Avanzados 25. Spry y Formularios
8. Marcos 17. Estilos CSS Avanzado 26. Controles Spry Avanzados
9. Formularios 18. Sitios Remotos
¿Quieres tener el curso en tu ordenador y seguirlo sin estar conectado a Internet? También ayudarás a
mantener esta web. Infórmate aquí.
Además te regalamos un DVD con más de 600 programas libres/gratuitos al comprar un CD/DVD.
Búsqueda
www.aulaclic.
Web es
Índice detallado
http://www.aulaclic.es/dreamweavercs3/ (1 de 7) [10/02/2008 19:45:21]

Curso de Adobe Dreamweaver CS3. Indice Curso de Dreamweaver CS3 Avanzado
Unidad 1. Conceptos básicos de Dreamweaver CS3 Unidad 16. Comportamientos Avanzados

Qué es Dreamweaver CS3 Mensajes Emergentes
HTML básico Texto de la Barra de Estado
Novedades de Dreamweaver CS3 Carga Previa de Imágenes
Editar páginas web Abrir una Ventana del Navegador
Cómo tener una página en Internet Comprobar Navegador
Arrancar y cerrar Dreamweaver CS3 Comprobar Plug-ins
Compaginar dos sesiones Menús de Salto
Abrir y guardar documentos
Mi primera página
Unidad 17. Estilos CSS Avanzado
Aplicar Estilos CSS
Unidad 2. El entorno de trabajo Estructura CSS
La pantalla inicial Selectores CSS
Las barras Selectores de Atributo
Los paneles e inspectores Pseudo-clases y Pseudo-elementos CSS
Personalizar el área de trabajo Controles de Fuente
Vistas de un documento Espaciado
La ayuda Aspecto del texto
Controles de Ratón
Controles de Lista
Unidad 3. Configuración de un sitio local
Controles de Fondo
Introducción Controles de Margen
Crear o editar un sitio web sin conexión a Internet Bordes
Vistas del sitio Controles de Elementos de Bloque y en Línea
Subir archivos al servidor Controles de Posición
Comprobar tamaño para optimizar la carga Controles de Visibilidad
Propiedades del documento
Los colores
Unidad 18. Sitios Remotos
Configurar un Sitio Remoto
Unidad 4. El texto
El Panel Archivos
Sincronizar Sitios
Unidad 19. Servidor de Pruebas

Características del texto Introducción a PHP

Listas Bases de datos
Caracteres especiales Estructura PHP
Estilos CSS. Introducción Instalar un Servidor Local con WAMP
Crear un estilo personalizado Trabajar con Servidor Local WAMP
El Panel CSS Configurar un Servidor de Pruebas
Crear un nuevo estilo Introducción a phpMyAdmin
Gestionar estilos CSS Crear una Base de Datos en phpMyAdmin
Aplicar un estilo Crear una Tabla en phpMyAdmin
Hojas de Estilos Insertar Datos en una Tabla en phpMyAdmin
Modificar una Tabla en phpMyAdmin
Modificar Datos de una Tabla
Unidad 5. Hiperenlaces
Establecer Privilegios en phpMyAdmin
Introducción
Tipos de enlaces
Unidad 20. Páginas Dinámicas
Crear enlaces
Personalizar nuevos enlaces Introducción
Destino del enlace Crear una Conexión a la Base de Datos
Formato del enlace Juegos de Registros o RecordSets
Enlace a correo electrónico Mostrar Datos Dinámicos
Vínculos rotos Repeticiones
Orden de Juegos de Registros
Filtrado de Juegos de Registros
Unidad 6. Imágenes Paginación de Registros
Introducción Mostrar/Ocultar Regiones
Tipos de imágenes para una web Uso de Variables
Insertar una imagen Páginas Maestro-Detalle
Cambiar el tamaño de una imagen Asistente de Inserción de Registros
Mapas de imagen Asistente de Actualización de Registros
Imagen de sustitución. Rollover Asistente de Eliminación de Registros
Botones Flash Juegos de Registros Avanzados
Texto Flash
Barra de navegación
Unidad 21. Cómo crear un Blog
Unidad 7. Tablas

Introducción Introducción
Insertar una tabla Estructura de Datos
Rellenar las celdas Interfaz Pública
Seleccionar elementos de una tabla Interfaz Privada
Formato de tabla Insertar Nuevos elementos
Cambiar tamaño de tabla y celdas Listado de elementos
Añadir y eliminar filas y columnas Modificación de elementos
Anidar, dividir y combinar celdas Eliminación de elementos
Modos de tabla Restringir Acceso
Adaptar webs a distintas resoluciones
Unidad 22. XML y RSS
Unidad 8. Marcos Introducción
Introducción Importar datos de un Archivo Externo
Crear marcos Trabajar con elementos XML
Seleccionar marcos Crear Repeticiones
Guardar Ordenar elementos
Configurar marcos Sentencias condicionales
Contenido del marco Insertar un fragmento XSLT
Paso de parámetros
Unidad 9. Formularios
Introducción
Unidad 23. Acceso a datos con Spry
Elementos de formulario Introducción
Crear formularios Conjunto de datos XML
Validar formularios Crear una Región de Spry
Repetición de Elementos
Listas de Repetición
Unidad 10. Multimedia
Tablas de Datos
Películas Flash Mostrar Maestro/Detalle
Sonido
Vídeos
Unidad 24. AJAX y Spry Framework
Unidad 11. Las plantillas

Introducción
Crear plantillas
Establecer regiones editables en una plantilla
Basar páginas en una plantilla
Unidad 12. HTML desde Dreamweaver

Etiquetas Introducción
Entidades HTML Incluir Spry
Listado de Entidades HTML Importar Datos
El inspector de código Definiendo Regiones
Completar las etiquetas Mostrar información
Contraer y expandir código Crear Repeticiones
Errores en el código Ordenar Registros
Buscar y reemplazar Variables Preestablecidas
Expresiones Regulares Condicionales
Búsqueda en Etiquetas Filtros
Eliminar Filas repetidas
Actualizar la Carga de un archivo XML
Unidad 13. Otros elementos
Modo Maestro/Detalle
Marquesinas Modo Maestro/Detalle con diferentes fuentes XML
Fecha Spry y Estilos CSS
Regla horizontal
Código de otras páginas
Unidad 25. Spry y Formularios
Introducción
Unidad 14. Capas
Validación de Campos de Texto
Introducción Estados de Validación
Insertar una capa Validación de Campos Desplegables
Formato de una capa Casillas de Verificación
Áreas de Texto
Unidad 15. Comportamientos
Introducción Unidad 26. Controles Spry Avanzados
Insertar un comportamiento Introducción
Mostrar-Ocultar capas Barra de menús
Llamar JavaScript Navegación por Fichas
Control Acordeón
Panel con Contracción
Cambiar Estilos CSS
Ejercicios paso a paso

* Descargar archivos para ejercicios * 17. Crear una hoja de estilos 20. Inserción de Registros
3. Crear un sitio web local 17. Utilizando pseudo-elementos y clases 20. Utilizar sentencias SQL
3. Crear nuevo documento y modificar sus 17. Controles de fuente 21. Estructura de datos de un Blog
propiedades 17. Controles de ratón 21. Interfaz Pública
4. Insertar texto y modificar sus propiedades 17. Controles de fondo 21. Creación de un menú de Administración
4. Convertir texto en una lista 17. Controles de márgenes y bordes 21. Inserción de elementos
4. Crear estilos CSS 17. Controles de bloque 21. Listado de elementos
5. Crear un hiperenlace 19. Instalación de WAMP 21. Modificación de elementos
5. Crear un vínculo de correo electrónico 19. Crear un servidor de pruebas 21. Eliminación de elementos
6. Insertar una imagen 19. Crear una Base de Datos 21. Restringir acceso
6. Crear mapas de imagen 19. Crear una Tabla 22. Preparando el servidor de pruebas
6. Crear botones Flash 19. Importar datos a una Tabla 22. Importar datos XML
7. Crear y rellenar una tabla 19. Asignar privilegios en una base de datos 22. Enlaces con elementos
7. Modificar las propiedades de la tabla 20. Crear una conexión a una Base de Datos 22. Repetición de elementos
7. Añadir y eliminar filas 20. Crear un Recordset 22. Ordenación de elementos
7. Combinar celdas 20. Crear Texto Dinámico 22. Insertar XSLT en una página dinámica
8. Crear y configurar marcos 20. Repeticiones de Texto Dinámico 22. Paso de parámetros
9. Insertar elementos de formulario 20. Ordenación de un Recordset 24. Incluir Spry
10. Insertar un archivo de audio 20. Filtrado de Registros 24. Crear un Dataset
11. Crear una plantilla 20. Paginación de Registros 24. Crear una Región con Información
12. Buscar y reemplazar 20. Recuento de Registros 24. Crear repeticiones de Registros
13. Insertar fecha 20. Ocultar/Mostrar Regiones 24. Crear Filtros
14. Insertar una capa 20. Enlaces con Parámetros
15. Crear comportamiento 20. Filtros con Parámetros
Vídeotutoriales Ejercicios propuestos Pruebas evaluativas

3. Crear sitio local y modificar las propiedades 1. Conceptos básicos de Dreamweaver CS3
Indice
de la página 2. El entorno de trabajo
1. Conceptos básicos 4. Modificar las propiedades del texto 3. Configuración de un sitio local
2. El entorno de trabajo 5. Crear hiperenlaces 4. El texto
2. Las vistas 6. Insertar imágenes 5. Hiperenlaces
2. La ayuda 7. Modificar tablas 6. Imágenes
3. Crear un sitio local 8. Configurar marcos 7. Tablas
3. Las propiedades de la página 9. Insertar elementos de formulario 8. Marcos
4. Las características del texto 10. Insertar elementos multimedia 9. Formularios
4. Crear estilo CSS 11. Trabajar con plantillas 10. Multimedia
5. Los hiperenlaces 12. Buscar y reemplazar 11. Las plantillas
6. Insertar una imagen 13. Insertar otros elementos 12. HTML desde Dreamweaver
6. Crear un botón Flash 14. Insertar capas 13. Otros elementos
6. Crear un texto Flash 15. Crear comportamientos 14. Capas
7. Insertar una tabla 16. Crear comportamientos avanzados 15. Comportamientos

8. Insertar marcos 17. Estilos CSS avanzados 16. Comportamientos Avanzados

9. Insertar un formulario 19. Servidor de Pruebas 17. Estilos CSS Avanzados
10. Insertar elementos multimedia 20. Páginas Dinámicas 18. Sitios Remotos
11. Crear una plantilla 21. Cómo hacer un Blog 19. Servidor de Pruebas
12. HTML desde Dreamweaver 22. XML y RSS 20. Páginas Dinámicas
13. Otros elementos 23. Spry y Acceso a datos 21. Cómo crear un Blog
14. Insertar una capa 24. AJAX y Spry Framework 22. XML y RSS
15. Insertar comportamientos 25. Spry y los Formularios 23. Spry y Acceso a datos
16. Crear un menú de salto 26. Controles Avanzados Spry 24. AJAX y Spry Framework
17. Estilos CSS 25. Spry y los Formularios
18. Sitios Remotos 26. Controles Avanzados Spry
19. Crear B. de datos en PhpMyAdmin
19. Modificar Tablas
20. Crear un recordset
20. Utilizar datos de un recordset
20. Paginación de registros
20. Insertar registros
20. Eliminar registros
21. Qué es un Blog
22. XML y RSS
23. Spry y Acceso a Datos
24. AJAX y Spry Framework
25. Spry y los Formularios
26. Controles Avanzados Spry
Aviso legal: este curso es gratuito siempre que se visualice desde la página web de aulaClic. No está permitido
descargar el curso y utilizarlo en academias o centros de enseñanza privados sin estar conectado a Internet.
© aulaClic. Todos los derechos reservados. Free Computer tutorials. Prohibida la reproducción por cualquier medio.
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. informacion
Cómo utilizar este curso Búsqueda
Este curso pretende que todas las personas puedan aprender a manejar Dreamweaver CS3.
Si es la primera vez que visitas aulaClic posiblemente te interese visitar esta página.
Navegación.
Para moverte por el curso dispones de la barra de navegación que ves en la parte superior de la página.
Con el icono avanzar vas a la página siguiente, con el icono retroceder vas a la página anterior, es como
si pasaras ordenadamente las páginas de un libro.
Con el icono inicio vas a la página principal de aulaclic ( también con el icono de aulaclic que hay en la
parte izquierda).
Con el icono ayuda vienes a esta página.
Para ir a una página concreta puedes utilizar uno estos dos métodos:
1.- Ir a la página del índice detallado y hacer clic en el apartado o punto al que quieres ir.
2.- Utilizar el indice desplegable de la barra de navegación superior, que funciona de esta manera: Al colocar el
cursor sobre "Curso de Dreamweaver CS3" se despliega el menú con los temas y al hacer clic irás a esa página
Al final de cada página también tienes unas flechas para retroceder , ir al indice , o avanzar .
Cuando estamos en una página de ejercicios o de pruebas evaluativas, estas flechas al igual que las de la barra
de navegación y te llevan al siguiente ejercicio o prueba evaluativa, para ir al tema teórico
correspondiente utiliza la flecha .
F11. Si utilizas el Explorer es muy recomendable utilizar la tecla F11 para ganar espacio en la pantalla. Puedes
probarlo ahora, para volver a la pantalla normal vuelve a pulsar F11.
http://www.aulaclic.es/dreamweavercs3/informacion.htm (1 de 3) [10/02/2008 19:45:27]

Estructura del curso.
Al seguir manuales de informática cada lector va saltándose los temas que no le interesan porque es información
muy compleja para su nivel o porque son cosas demasiado básicas para su nivel. Este curso trata de aliviar
este problema organizando los contenidos por niveles. Hemos establecido tres niveles: básico, medio y avanzado.
¿Cómo se navega por estos niveles?. Muy sencillo, el curso tiene una estructura troncal que es el nivel medio, pero
en los puntos que se ha considerado oportuno hay unos iconos para acceder a los otros dos niveles. Para volver al
nivel del que se partió puedes pulsar la flecha del final de la página.
Es decir, una vez leída la explicación en el nivel medio te puedes encontrar en algunos casos con este icono
para ir al nivel básico donde se te explicarán conceptos más sencillos relacionados con ese tema. En otras
ocasiones puedes encontrar este icono para ir al nivel avanzado, donde se explicarán conceptos más
avanzados, otras formas más rápidas de hacer lo mismo, etc.
Si es la primera vez que sigues el curso puede ser conveniente que dejes los niveles avanzados para una
segunda lectura.
¿Cómo se identifican los niveles?
Por los colores de los rótulos:
Nivel básico. Nivel medio. Nivel avanzado.
Así sabrás en todo momento en qué nivel te encuentras.
Ejercicios.
En los temas encontrarás dos tipos de ejercicios:
ejercicios paso a paso son ejercicios que sirven para ilustrar la explicación descrita en el tema.
ejercicios propuestos son ejercicios que se realizan al final del tema para practicar los conceptos estudiados. Al
final de la página de ejercicios encontrarás un enlace con ayuda para la resolución del ejercicio.
También hay una prueba evaluativa teórica con su correspondiente solución.
Nomenclatura.

En color verde se pondrán los comandos que el usuario puede ejecutar. También hemos puesto los conceptos
más importantes en azul.
Vídeotutoriales.
Pinchando sobre este icono podrás acceder a los vídeotutoriales o secuencias animadas, en los que
verás claramente las explicaciones. Para verlas sólo necesitas el plug-in de Flash, la mayoría de los navegadores ya
lo llevan incorporado. Si no puedes ver las secuencias descárgatelo ahora aquí.
Preguntas.
Si tienes alguna duda o pregunta sobre el contenido de este curso puedes plantearlas en el Foro de aulaClic,
entre todos intentaremos resolverlas.
Para participar en el foro sólo tienes que darte de alta como usuario registrado. También podrás aprender con
las preguntas y respuestas de los demás participantes.
Para darte de alta sólo te pedimos tu dirección de correo. Además como usuario registrado tendrás acceso a la
zona de descarga. En esta página tienes más información.
Por otro lado os agradeceremos que nos ayudéis a mejorar este curso con vuestras críticas y comentarios; por
favor, escribidnos a esta página: contacto
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Tema 1. Conceptos básicos de Dreamweaver CS3
Unidad 1. Conceptos básicos de Dreamweaver CS3 (I) Búsqueda
Qué es Dreamweaver CS3
Dreamweaver CS3 es un software fácil de usar que permite crear páginas web profesionales.
Las funciones de edición visual de Dreamweaver CS3 permiten agregar rápidamente diseño y funcionalidad a
las páginas, sin la necesidad de programar manualmente el código HTML.
Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc., de una forma
muy sencilla y visual.
Además 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 versión gratuita de Dreamweaver desde la página de Adobe, la
versión caduca al cabo de 30 días, pero seguro que te animas a comprar la versión 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 relación con Adobe.
Si no conoces las características básicas de HTML puedes verlas aquí.
Novedades de Dreamweaver CS3
En este punto comentaremos las características que aporta esta nueva versión sobre la anterior.
Mejoras en Spry. El "Framework" o estructura Spry ha recibido un fuerte impulso en esta versión de
Dreamweaver. Spry es un conjunto de archivos JavaScript que permiten la inclusión de elementos dinámicos en
las páginas HTML. Por ejemplo se pueden incluir acordeones, barras de menus, validación de formularios, acceso
a datos XML, etc.
También se han incluido efectos spry que se aplican a elementos ya existentes en la página HTML para hacer que
se desvanezcan, reduzcan su tamaño, se resalten, etc.
Mayor integración con Photoshop y Fireworks. Ahora es posible pegar directamente imágenes desde Photoshop
en una página HTML de Dreamweaver. Luego con un doble clic podremos ir a editar la imagen en Photoshop. Se
pueden importar imágenes con capas.
Mejoras en la comprobación de la compatiblidad con diferentes navegadores. Dreamweaver CS3 puede

generar informes con los problemas de visualización de elementos CSS en los navegadores más utilizados.
Adobe CSS Advisor es un sitio web accesible desde Dreamweaver que contiene información útil para resolver
los problemas de compatibilidad entre navegadores.
Mejoras en CSS. La administración de CSS es más fácil, ahora se pueden trasladar elementos CSS entre
diferentes hojas de estilo. También ha aumentado la cantidad de plantillas CSS disponibles para aplicar a
nuestras páginas web.
http://www.aulaclic.es/dreamweavercs3/t_1_1.htm (1 de 2) [10/02/2008 19:45:40]

Adobe Device Central, incluido en la Adobe Creative Suite, facilita la publicación en dispositivos móviles, PDAs, etc..
Pág. 1.1
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Tema 2. El entorno de trabajo
Unidad 2. El entorno de trabajo (I) Búsqueda
Vamos a ver cuáles son los elementos básicos de Dreamweaver CS3 , la pantalla, las barras, los paneles, etc,
para saber diferenciar entre cada uno de ellos. Aprenderemos cómo se llaman, dónde están y para qué sirven.
También veremos cómo obtener ayuda, por si en algún momento no sabemos cómo seguir trabajando.
Cuando conozcamos todo esto estaremos en disposición de empezar a crear páginas 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á más fácil entender el resto del curso. La pantalla
que se muestra a continuación (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 más adelante.

Pág. 2.1
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Tema 03. Configuración de un sitio local
Unidad 3. Configuración de un sitio local (I) Búsqueda
En este tema vamos a ver qué es un sitio web, cómo crearlos y gestionarlos, y cómo modificar las propiedades de
los documentos, como puede ser el color de fondo.
Introducción
Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un diseño similar o un objetivo
común. Es necesario diseñar y planificar el sitio web antes de crear las páginas 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 imágenes, las animaciones, las hojas
de estilo, etc., se deben crear nuevas carpetas dentro de ésta, con el objetivo de tener una mejor organización de
los archivos a la hora de trabajar. Esto es lo que se conoce como sitio local.
Después se podrán 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 organización de los archivos en un sitio permite administrar y compartir archivos, mantener los vínculos de
forma automática, utilizar FTP para cargar el sitio local en el servidor, etc.
Es conveniente que la página inicial del sitio tenga el nombre index.htm o index.html, ya que los navegadores
buscan una página con ese nombre cuando se intenta acceder a una URL genérica.
Por ejemplo, si escribiéramos la dirección genérica http://www.aulaclic.com en el navegador, éste intentaría cargar
la página http://www.aulaclic.com/index.htm, por lo que se produciría un error en el caso de que no existiera
ninguna página con el nombre index.htm.
Crear o editar un sitio web sin conexión a Internet
Una vez creadas las carpetas que formarán un sitio local, ya es posible definir el sitio en Dreamweaver.
Para ello hay que dirigirse al menú Sitio, a la opción Administrar sitios....
Recuerda que a través del panel Archivos, pestaña Archivos, se puede acceder a cada uno de los sitios creados y a
la opción Administrar sitio.

En el caso de haber seleccionado la opción 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.
Tanto si se elige la opción Nuevo..., como si se elige la opción Editar..., se mostrará la misma ventana en la que
definir las características del sitio.

Las características del sitio se agrupan en diferentes categorías que aparecen en la parte izquierda.
Para visualizar las características de una categoría basta con seleccionarla de la lista haciendo clic en ella.
Vamos a ver los datos que hay que editar para la categoría Datos locales.
Debe definirse el Nombre del sitio y la Carpeta raíz local, que es en la que se encuentra el sitio dentro del disco
duro local.
Después, si se desea, a través de la categoría Mapa de diseño del sitio puede definirse la página principal del sitio,
de la que colgarán el resto de documentos HTML dentro del sitio, si en la carpeta raíz del sitio existe una página con
el nombre index.htm, Dreamweaver la cogerá por defecto.
Estas tres características son las imprescindibles para definir un sitio local.
Las demás 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.
Después de rellenar los datos pulsamos el botón Aceptar y abrimos el sitio.
Si preferimos utilizar un asistente para crear el sitio web sólo tenemos que seleccionar la pestaña Básicas, en vez
de la pestaña Avanzadas.

Abrir un sitio
Para abrir un sitio ya definido hay que dirigirse al menú Sitio, a la opción Administrar sitios.... seleccionar el sitio de
la lista de sitios y pulsar sobre el botón Listo.
También podemos utilizar el panel Archivos, buscar y seleccionar el sitio a abrir en el menú desplegable de la
pestaña Archivos.
Para practicar puedes realizar el Ejercicio paso a paso Crear un sitio web local.
Pág. 3.1
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Tema 4. El texto
Unidad 4. El texto (I) Búsqueda
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.
Características del texto
Las características del texto seleccionado pueden ser definidas a través del menú Texto, y a través del inspector
de propiedades. Vamos a ver las posibilidades que se nos ofrecen a través del inspector de propiedades,
aunque sean menos que las que se nos ofrecen a través del menú Texto.
Formato:
Permite seleccionar un formato de párrafo ya definido para HTML, que puede ser encabezado, párrafo o
preformateado. Los encabezados se utilizan para establecer títulos 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 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.
Tamaño:
Permite cambiar el tamaño del texto. El tamaño lo podemos indicar en diversas unidades, en píxeles, centímetros, etc...
Color:

Permite seleccionar el color de la fuente, ignorando el color que se haya definido en las propiedades de la página. Si
no se ha establecido ningún color en las propiedades de la página 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 través del menú Texto también
se puede, entre otras cosas, subrayar el texto. Esta opción no aparece en el panel de Propiedades ya que de normal
no suele utilizarse, debido a que los vínculos aparecen subrayados y el subrayar texto normal podría hacer que el
usuario pensara que se trata de un vínculo.
Alinear:
A través de estos botones es posible establecer la alineación del texto de una de estas cuatro formas distintas:
izquierda, centrada, derecha y justificada.
Lista:
Estos botones permiten crear listas con viñetas o listas numeradas.
Sangria:
Estos dos botones permiten sangrar el texto y anular la sangría. La sangría es una especie de márgen que se
establece a ambos lados del texto. En este caso caso los botones se refieren a sangría a la izquierda del texto.
Para practicar puedes realizar el Ejercicio paso a paso Insertar texto y modificar sus propiedades.
Pág. 4.1
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Tema 5. Hiperenlaces
Unidad 5. Hiperenlaces (I) Búsqueda
Vamos a ver qué son los hiperenlaces, para qué sirven y cómo crearlos, ya que son un elemento esencial
para cualquier página web.
Introducción
Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de una página o archivo a
otra página o archivo.
Es posible asignar un vínculo 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 vínculos.
Referencia absoluta:
Conduce al sitio en el que se encuentra el documento utilizando la ruta completa del archivo.
La ubicación es en Internet, por ejemplo, http://www.aulaclic.com, o http://www.misitio.com/pagina/pagina1.html.
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 están por encima del nivel donde nos encontramos deberemos utilizar ../
Por ejemplo, imagina que estamos en la siguiente dirección http://www.misitio.com/pagina/informacion/index.

html. En esta página queremos mostrar una imagen que se encuentra en la carpeta http://www.misitio.com/
pagina/secciones/seccion1.html, ¿cómo podemos hacerlo? Fácil. 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 sería 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.
En este método los enlaces se crean indicando la ruta a partir de la raíz del sitio.

En el ejemplo anterior si tuviesemos definido como sitio la carpeta http://www.misitio.com/, un enlace en

cualquier página del sitio a http://www.misitio.com/pagina/secciones/seccion1.html se crearía como /
pagina/secciones/seccion1.html.
Como puedes ver ahora el vínculo a un archivo en todas las páginas es igual porque se define dependiendo del sitio
raíz y no de la ubicación donde se encuentra.
Puntos de fijación:
Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello el vínvulo debe
ser nombre_de_documento.extension#nombre_de_punto.
El punto se define dentro de un documento a través del menú Insertar, opción Anclaje con nombre.
Podríamos 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 válidos tanto para referenciar páginas (para crear hiperenlaces) o
incluso imágenes u otro tipo de objetos (como veremos en temas posteriores).
Deberás 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 minúsculas para evitar fallos en los enlaces.
También deberás evitar utilizar caracteres especiales como acentos o espacios, así no tendrás problemas a la
hora de referenciar tus objetos.
Pág. 5.1
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Tema 6. Imágenes
Unidad 6. Imágenes (I) Búsqueda
En este tema vamos a ver cómo insertar imágenes en un documento. También veremos cómo crear algunas
imágenes especiales, como es el caso de los Rollovers y los botones flash, que ayudan a mejorar la apariencia
de nuestras páginas.
Introducción
Todas las páginas web acostumbran a tener un cierto número de imágenes, que permiten mejorar su apariencia,
o dotarla de una mayor información visual.
Existen una serie de formatos de imagen más recomendables que otros para ser introducidos en una página web.
Esta información puedes consultarla aquí .
Insertar una imagen
Para insertar una imagen hay que dirigirse al menú Insertar, a la opción Imagen. Después de esto, ya es
posible seleccionar una imagen a través de la nueva ventana.

Si por algún motivo se desea insertar un BMP, este no aparecerá a no ser que en Tipo se seleccione Todos
los archivos.
En Relativa a es posible especificar si la imagen será relativa al documento o a la carpeta raíz del sitio. Es preferible
que sea relativa al Documento, ya que si se mueve todo el sitio a una ubicación diferente, la imagen puede no verse
al estar siendo buscada en la ubicación anterior.
Lo mismo ocurre cuando se selecciona un documento para crear un vínculo.
La ruta en la que se encuentra la imagen aparecerá representada de una u otra forma en el campo URL de la ventana
y en el campo Origen del inspector de propiedades, dependiendo de si ha sido insertada como relativa a la
carpeta raíz del sitio o relativa al documento.
Por ejemplo, imagina que dentro de la carpeta raíz del sitio (la carpeta del sitio) se encuentran la carpeta imagenes y
el documento en el que deseamos insertar la imagen. Dicha imagen, llamada aulaclic.jpg, se encuentra dentro de
la carpeta imagenes.
En el caso de insertar la imagen como relativa al Documento la ruta sería:
imagenes/aulaclic.jpg
Mientras que en el caso de ser insertada como relativa a la Raíz del sitio la ruta sería:
/imagenes/aulaclic.jpg
Ocurre lo mismo que cuando se crea un hipervínculo a un documento relativo al documento o a la carpeta raíz del sitio.
Si se inserta un BMP en un documento, este no aparece correctamente en Dreamweaver, aunque sí en el navegador.

En Dreamweaver aparecerá de la siguiente forma:

Esa misma imagen es la que aparece en Dreamweaver cuando no se encuentra una imagen que había sido
insertada. Esto puede ocurrir si se ha modificado el nombre de la imagen, o si se ha movido de directorio, desde fuera
de Dreamweaver. En ese caso, la imagen que aparecerá en el navegador será similar a esta:
Aparece un recuadro blanco con una X roja, junto con el nombre de la imagen o el contenido del campo Alt
del inspector de propiedades, que explicaremos a continuación.
Para practicar puedes realizar el Ejercicio paso a paso Insertar una imagen.
Pág. 6.1
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Tema 7. Tablas
Unidad 7. Tablas (I) Búsqueda
En este tema vamos a ver cómo trabajar con tablas. Podremos, entre otras cosas, insertar tablas, combinar
celdas, insertar filas o columnas y cambiar el tamaño del borde.
Introducción
Todos los objetos se alinean por defecto a la izquierda de las páginas web, pero gracias a las tablas es posible
distribuir el texto en columnas, colocar imágenes al lado de un bloque de texto, y otra serie de cosas que sin las
tablas serían imposibles de realizar.
Hoy en día, la mayoría de las páginas web se basan en tablas, ya que resultan de gran utilidad al mejorar
notablemente las opciones de diseño.
Las tablas están formadas por un conjunto de celdas, distribuidas en filas y columnas. A continuación tienes un
ejemplo de tabla.
Insertar una tabla
Para insertar una tabla hay que dirigirse al menú Insertar, a la opción Tabla.
En la nueva ventana habrá que especificar el número de Filas y Columnas que tendrá la tabla, así como el Ancho de
la tabla .

El Ancho puede ser definido como Píxeles o como Porcentaje. La diferencia de uno y otro es que el ancho en
Píxeles es siempre el mismo, independientemente del tamaño de la ventana del navegador en la que se visualice
la página, en cambio, el ancho en Porcentaje indica el porcentaje que va a ocupar la tabla dentro de la página y
se ajustará al tamaño de la ventana del navegador, esto permite que los usuarios que tengan pantallas
grandes, aprovechen todo el ancho de pantalla.
Grosor del Borde indica el grosor del borde de la tabla en píxeles, por defecto se le asigna uno (1).
Relleno de celda indica la distancia entre el contenido de las celdas y los bordes de éstas.
Espacio entre celdas indica la distancia entre las celdas de la tabla.
También se puede establecer si se quiere un encabezado para la tabla es recomendable utilizar encabezados en el
caso de que los usuarios utilicen lectores de pantalla. Los lectores de pantalla leen los encabezados de tabla y ayudan
a los usuarios de los mismos a mantener un seguimiento de la información de la tabla.
Si queremos incluir un título, lo indicamos en Texto, el título aparecerá fuera de la tabla.
En alinear texto indicamos dónde queremos alinear el título con respecto a la tabla.
En Resumen: indicamos una descripción de la tabla, los lectores de pantalla leen el texto del resumen pero dicho
texto no aparece en el navegador del usuario.
Pág. 7.1
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Tema 8. Marcos
Unidad 8. Marcos (I) Búsqueda
Vamos a ver qué son los marcos y para qué se utilizan. También veremos cómo insertar un marco sencillo en
una página, y cómo trabajar con él.
Introducción
Los marcos o frames sirven para distribuir mejor los datos de las páginas, ya que permiten mantener fijas algunas
partes, como pueden ser el logotipo y la barra de navegación, mientras que otras sí pueden cambiar. Además de
mejorar la funcionalidad, pueden mejorar también la apariencia.
Cada uno de los marcos de una página, contiene un documento HTML individual. Por ejemplo, en la imagen de
la derecha puedes ver una página con dos marcos. El marco izquierdo contiene el documento menu.htm y el derecho
el documento quienes.htm. Para poder visualizar la página de este modo, hemos tenido que abrir en el navegador
el documento marcos.htm, que es la página que contiene los marcos agrupados.
Es posible editar los documentos contenidos en los marcos desde la página que contiene el grupo de marcos.
Esto facilita el trabajo, ya que es más fácil hacerse una idea de cómo quedará la página 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 básicos 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 algún documento. Puede ser uno nuevo o uno ya existente.
Después, dirigirse al menú Insertar, HTML, Marcos. A través de esta opción 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 línea 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 teníamos 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 línea 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 vacío aparecerá a la derecha del
documento original.
En esta imagen puedes ver un ejemplo de marco a la derecha.
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 teníamos 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.
Pág. 8.1
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Tema 9. Formularios
Unidad 9. Formularios (I) Búsqueda
Vamos a ver qué es un formulario, para qué se utiliza, cómo insertar uno, qué elementos puede contener y
cómo pueden validarse los datos introducidos en él.
Introducción
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 botón para enviar el formulario se arrancará un programa que recibirá
los datos y hará el tratamiento correspondiente.
Aquí vamos a ver cómo 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 programación, ya sea en VBScript, en
JavaScript o en otro lenguaje de programación, 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, menús desplegables, y botones.
Elementos de formulario

Los elementos de formulario pueden insertarse en una página a través del menú Insertar, opción Formulario.
A través de esta opción se puede acceder a la lista de todos los objetos de formulario que pueden ser insertados en
la página.
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 línea, mientras que el Área de
texto permite escribir varias.
Se puede pasar de Campo de texto a Área de texto a través del inspector de propiedades, marcando la opción
Una línea o Multi línea respectivamente.
También es posible definirlo como Contraseña es como el campo de texto pero las letras que va tecleando el usuario
se sustituyen por un carácter como podrás ver en la imagen siguiente.
A continuación tienes un ejemplo de cada uno de estos tres tipos. Puedes escribir en ellos para ver su funcionamiento.
Campo de texto Área de texto
A través del inspector de propiedades es posible asignar también el Ancho del cuadro de texto, el número máximo
de líneas o caracteres, y el valor inicial del cuadro.
Botón
Es el botón tradicional de Windows. El botón 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
También es posible cambiar el texto del botón, a través de la propiedad Etiqueta del inspector de propiedades.
Casilla de verificación
Es un cuadrito que se puede activar o desactivar.
Deseo recibir información ✔
Puede asignársele el Estado inicial como Activado o como Desactivado.
Botón de opción
Es un pequeño botón redondo que puede activarse o desactivarse. Si hay varios del mismo formulario, sólo puede
haber uno activado. Cuando se activa uno, automáticamente se desactivan los demás.

Superman
Spiderman
Lista/Menú
Una lista o menú es un elemento de formulario que lleva asociada una lista de opciones.
--- Elige opción lista --- --- Elige opción menú---

Perro
Gato
Los elementos se añaden a través del botón 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 través
de Selecciones del inspector de propiedades puede permitirse que se seleccionen varios simultáneamente.
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.
Pág. 9.1
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Tema 10 Multimedia
Unidad 10. Multimedia (I) Búsqueda
Vamos a ver cómo insertar elementos multimedia. En concreto, veremos cómo insertar una animación Flash,
un sonido y un vídeo.
Películas Flash
Las películas Flash son animaciones, que al igual que los botones y el texto Flash, tienen la extensión SWF.
Es frecuente verlas en las páginas iniciales de los sitios web, a modo de presentación hacia los usuarios, aunque
se pueden utilizar para realizar cualquier tipo de animación.
Estas películas pueden crearse mediante el programa Flash de Macromedía, y necesitan que el usuario tenga
instalado el plug-in para poder ser visualizadas.
Las películas Flash pueden insertarse en una página a través del menú Insertar, Media, opción Flash, o pulsando
Ctrl+Alt+F.
También pueden insertarse pulsando sobre la opción Flash que aparece en la pestaña Común del panel
Insertar, botón Media.
El inspector de propiedades de las películas Flash es prácticamente igual que el de los botones y el texto Flash,
pero existen dos opciones nuevas que hacen referencia a la visualización de la película.

La opción Bucle indica que al finalizar la película, ésta volverá a comenzar desde el principio.
La otra es la opción Rep. autom. (reproducción automática), que al estar marcada indica que nada más cargarse
la página comenzará a reproducirse la película Flash.
Si esta opción no estuviera marcada, se mostraría únicamente el primer fotograma de la película.
Interesa desmarcar esta opción cuando se desea que la reproducción sea activada por algún comportamiento.
Sonido
No es muy habitual incluir sonido en una página web, ya que algunos usuarios suelen estar escuchando su
propia música cuando navegan en Internet, por lo que el escuchar también sonido en cada página que se visita
puede resultar algo molesto.
A pesar de ello, el incluir un sonido agradable, apropiado al contenido de la página, puede hacerla más atractiva.
Muchas de las páginas que contienen sonido suelen ofrecer la posibilidad de activarlo o desactivarlo, para que
aquellos usuarios que no deseen escuchar el sonido de la página puedan desactivarlo.
Los formatos de sonido más habituales en Internet son, fundamentalmente, el MP3, el WAV y en algunas ocasiones
el MIDI, aunque existen otros formatos diferentes que también pueden utilizarse. Lo ideal es incluir algún archivo
de audio que no ocupe mucho espacio, y que no por ello sea de mala calidad.
Para insertar un archivo de audio en un documento tienes que dirigirte al menú Insertar, Medía, opción Plug-in.
A la derecha tienes un ejemplo de un archivo de sonido, para el que se muestran los controles de audio. Si lo
deseas, puedes reproducirlo pulsando sobre los controles (recuerda encender los altavoces, si los tienes).
En Dreamweaver no se mostrarán los controles de audio. Todos los archivos que son insertados como plug-in
aparecen representadas dentro de Dreamweaver por una imagen como la de la izquierda.
En el inspector de propiedades pueden establecerse la altura y la anchura con la que se mostrarán los controles
de audio, mediante Al y An.
En el caso de no especificar ningún tamaño, se mostrará el tamaño por defecto de los controles, como ocurre en
el ejemplo de arriba. Si lo que se desea es que se escuche el sonido en la página, pero que no se muestren los
controles de audio, los campos Al y An deben valer cero.
Los sonidos se reproducen automáticamente al cargarse la página, y se reproducen solamente una vez. Estos valores
no pueden definirse a través del inspector de propiedades, pero sí a través del código. Una vez definidos los
podremos cambiar desde el inspector de propiedades con el botón Parámetros...
Por ejemplo, el archivo anterior aparecía en el código como <embed src="varios/audio.mid"></embed>. Pero para
que no se reproduzca automáticamente se ha añadido autostart="false", y para que se reproduzca continuamente
se ha añadido loop="true".
La línea de código del archivo de audio ha quedado del siguiente modo:
<embed src="varios/audio.mid" autostart="false" loop="true"></embed>
En el Inspector de propiedades del sonido, el botón Parámetros... abre un cuadro de diálogo donde podemos
cambiar esos valores una vez introducidos.
Para poder hacer que el audio pueda activarse y desactivarse cuando no se muestran los controles, es necesario
insertar una serie de comportamientos que se encarguen de esa tarea.
Si quieres poner música de fondo en una página web, sin que aparezcan los controles de audio, puedes escribir
este código directamente en la vista Código.
<bgsound src="cancion1.wav" loop="-1">
Insértalo después de la etiqueta </title> Con el parámetro loop puedes decidir cuántas veces quieres que se
reproduzca, 1, 2, 3 ... (con -1 se reproduce de modo continuo).
Pág. 10.1
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Tema 11. Las plantillas
Unidad 11. Las plantillas (I) Búsqueda
En este tema vamos a ver qué son las plantillas, cómo crearlas y cómo basar documentos en ellas.
Introducción
Cada vez que deseamos crear un sitio web, tenemos que tener muy en cuenta que las páginas deben seguir un
formato uniforme.
La mayoría de nosotros solemos hacer copias de los documentos ya creados, y trabajar sobre estas copias,
modificando simplemente su contenido. Esta es la forma más sencilla de tener páginas con una estructura basada en
la estructura de otras ya creadas previamente.
Las plantillas son una especie de copia de la página en la que van a estar basadas el resto de páginas del sitio
web, pero que incluyen la posibilidad de establecer unas zonas editables y otras zonas que serán fijas, que
no podrán ser modificadas.
No es posible modificar las propiedades de una página que está basada en una plantilla, a excepción del título.
Cuando se desea que existan páginas con, por ejemplo, diferente color de fondo, es necesario crear plantillas
diferentes con los distintos colores, y basar las páginas en una u otra plantilla, según el color de fondo que se desee
para cada una.
Cuando se modifica el diseño de una plantilla, se pueden actualizar todas las páginas basadas en ella.
Las plantillas son archivos con la extensión 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 página ya existente.
Una forma de crear una plantilla desde cero es a través del panel Archivos, pestaña Activos.
La pestaña Activos se puede abrir a través del menú Ventana, opción Activos. También pulsando F11.
Una vez abierto el panel hay que seleccionar el botón , para poder trabajar con las plantillas.

Los botones inferiores del panel Activos son similares a los del panel Estilos CSS.
El único botón 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 botón (Si este botón no está activado, pulsa con el
botón derecho del ratón y elige Nueva Plantilla).
Cuando se pulsa ese botón 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 botón .
Paraeliminar una plantilla la seleccionamos de la lista y pulsamos el botón .
Las plantillas se guardan en el sitio web actual, dentro de la carpeta Templates, que se crea automáticamente.
Para crear una plantilla a partir de un archivo existente es necesario abrir dicho archivo, y después guardarlo como
plantilla a través del menú Archivo, opción Guardar como plantilla.
Cuando se pulsa dicha opción, 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 través del campo Guardar como,
y elegir, de entre la lista de sitios, el Sitio: en el que se va a guardar.
Pág. 11.1
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Tema 12. HTML desde Dreamweaver
Unidad 12. HTML desde Dreamweaver (I) Búsqueda
En este tema vamos a ver algunas de las facilidades que proporciona Dreamweaver para trabajar sobre el propio
código HTML, y no únicamente sobre el editor gráfico de la vista diseño.
En este tema no se pretende enseñaros el lenguaje HTML sino cómo poder realizar algunos reajustes directamente en
el código estando dentro de Dreamweaver.
Etiquetas
Ya sabes que el lenguaje HTML está basado en etiquetas que marcan el inicio y fin de cada elemento de la página Web.
En el primer tema vimos como ejemplo las etiquetas que hay que incluir en el código HTML de una página para darle
un título. Consistía simplemente en escribir el título deseado entre las etiquetas <TITLE> y </TITLE>.
Las etiquetas consisten en poner un mismo comando entre los símbolos < y >. La primera etiqueta indica inicio, y
la segunda, que incluye el símbolo /, indica final y se suele denominar etiqueta de cierre.
Las etiquetas disponen de atributos que permiten definir características del elemento sobre el que actúan,
incluyendo cierto código dentro de la etiqueta.
Por ejemplo, un párrafo se inserta entre las etiquetas <P> y </P>, pero es posible cambiar sus
características predeterminadas, como puede ser alinearlo a la derecha. Para ello, en lugar de introducir el texto
del párrafo entre las etiquetas anteriores, ha de insertarse entre las etiquetas <P align="right"> y </P>.
También hay elementos que no precisan insertar etiqueta de cierre. Por ejemplo, un May+INTRO dentro del
código HTML equivale a la etiqueta <BR>.
También podrás ver la etiqueta <br /> en las páginas que sigan el estándar XHTML. Éste obliga a que todas las
etiquetas se cierren, incluso aquellas que no tienen etiqueta final, por lo que <BR> pasa a ser <br /> o <HR> a <hr />.
Dreamweaver inserta automáticamente las etiquetas necesarias para construir la página con la apariencia y
contenido definidos en el editor gráfico, pero también ofrece otras posibilidades para trabajar directamente sobre
el código.
Entidades HTML

HTML también dispone de códigos especiales para representar caráceteres especiales como pueden ser letras
con acentos o no pertenecientes al alfabeto latino internacional, signos de puntuación o tipográficos y
símbolos especiales que presenten un problema en HTML como < ó >, que podrían malinterpretarse por el inicio de
una etiqueta.
Estos códigos pueden mostrarse como un código numérico o con un nombre de entidad. Ambos métodos son
igualmente aceptables, pero ambos deberán ir encerrados entre los símbolos & y ;.
De este modo, < se escribirá como < o <
Usar este método es muy aconsejable, de esta forma los navegadores que estén configurados para visualizar juegos
de caracteres que no contengan letras como la ó o la ñ podrán ver el sitio correctamente. En caso contrario
estos caracteres se mostrarían de forma extraña.
En el tema 4 vimos que podíamos escribir estos caracteres utilizando el menú Insertar. Ahora te mostraremos otra
forma para escribir caracteres que no se incluían en el listado de Dreamweaver y que podrás insertar escribiendo
sus entidades en la vista de Código.
Aquí tienes una tabla de los caracteres más utilizados con sus Entidades HTML numérica y de nombre de entidad:
Entidad con Entidad Entidad con Entidad

Carácter Carácter
nombre numérica nombre numérica
á á á Á Á Á
é é é É É É
í í í Í Í Í
ó ó ó Ó Ó Ó
ú ú ú Ú Ú Ú
ü ü ü Ü Ü Ü
ñ &ntide; ñ Ñ Ñ Ñ
¿ ¿ ¿ α α α
¡ &iexc; ¡ β β β
– – – © © ©
→ → → ® ® ®
← ← ← € € €
< < < espacio
> > >
& & &
Si escribes más de un espacio en Dreamweaver, cuando lo visualices en un Navegador sólo veras uno. Esto
es debido a que en HTML las palabras separadas por más de un espacio se visualizan sapradas de uno.
Para saltarte esta norma puedes escribir tantas veces como quieras y se visualizarán tantos espacios
como elementos de entidad hayas introducido.
Si quieres ver una tabla con el listado de todos los caracteres especiales visita el avanzado de Listado de
Entidades HTML .
Pág. 12.1
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Tema 13. Otros elementos
Unidad 13. Otros elementos (I) Búsqueda
Vamos a ver una serie de elementos que suelen aparecer en las páginas web, como pueden ser las marquesinas,
las reglas horizontales y la fecha.
Marquesinas
Las marquesinas son texto, imágenes, o una mezcla entre texto e imágenes, que pueden desplazarse de un lado a
otro de la ventana en forma de línea. A continuación tienes un ejemplo de marquesina.
Bienvenid@s a PerrosGatos
Las marquesinas no se pueden insertar a través del editor gráfico de Dreamweaver, es necesario hacerlo a través
del código.
Para crear una marquesina hay que insertar las etiquetas <MARQUEE> y </MARQUEE>. Entre dichas etiquetas han
de introducirse los elementos que se desea que aparezcan en la marquesina.
También es posible especificar algunas características de la marquesina. La marquesina, por defecto, se desplaza
de derecha a izquierda indefinidamente, pero si lo deseas puedes hacer que estas propiedades varíen. Por ejemplo,
si pones <marquee behavior="slide">, la marquesina hará el desplazamiento una sola vez y se detendrá.
Si pones <marquee behavior="alternate">, en lugar de desplazarse continuamente de derecha a izquierda,

la marquesina se desplazará de lado a lado de la ventana, como si rebotara en los extremos, tal y como ocurre en
el ejemplo anterior, cuyo código puedes ver a continuación:
<marquee behavior="alternate">
Bienvenid@s a PerrosGatos
<img src="imagenes/logo_animales.gif">
</marquee>

Pág. 13.1
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Tema 14. Capas
Unidad 14. Capas Búsqueda
Vamos a ver algunas de las características básicas sobre las capas, para luego poder trabajar con ellas y
aplicarles algún comportamiento.
Introducción
Las capas no son más que unos recuadros, que pueden situarse en cualquier parte de la página (es decir, que
tienen una posición absoluta en la página), en los que podemos insertar contenido HTML. Dichas capas
pueden ocultarse y solaparse entre sí, lo que proporciona grandes posibilidades de diseño.
Las capas pueden moverse de una posición a otra de la ventana pulsando sobre el recuadro blanco, y sin soltar
el ratón, arrastrándola hacia la nueva posición.
También pueden ser redimensionadas pulsando sobre los recuadros negros, y arrastrándolos hasta conseguir
el tamaño deseado.
Dentro del recuadro de la capa es posible insertar texto, tablas, imágenes, animaciones flash, y todos los elementos
que puede contener un documento HTML.
Este icono sirve para seleccionar la capa al pulsar sobre él, y al eliminarlo se elimina también la capa.
Insertar una capa
Las capas pueden insertarse en una página a través del menú Insertar, opción Objeto de diseño, Div PA
(Elemento con Posición 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 fácil seleccionar la deseada a la primera.
Cuando existen varias capas en un mismo documento, es preferible seleccionarlas a través de la pestaña Elementos
PA del panel CSS, que puede abrirse a través del menú Ventana opción Elementos PA. También 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 través de su inspector de propiedades.
Elemento CSS-P es el nombre de la capa. También puede ser cambiado a través del panel Elementos PA,
haciendo doble clic sobre él.
Izq y Sup indican la distancia en píxeles que hay entre los límites izquierdo y superior del documento y la capa.
An y Al indican la anchura y la altura de la capa.
Índice Z es el número de orden de colocación de las capas. Este valor también puede cambiarse a través 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 según el navegador),
Inherit (se muestra la capa mientras la página a la que pertenece también se esté mostrando),
Visible (muestra la capa, aunque la página no se esté viendo) y
Hidden (la capa está oculta).
La visibilidad también puede cambiarse a través del panel Elementos PA, pulsando sobre la imagen del ojo. El
ojo abierto indica Visible, y el ojo cerrado indica Hidden.
A través de Im. fondo y Col puede indicarse una imagen o un color de fondo para la capa.
Desb. (Desbordamiento) controla cómo aparecen las capas en un navegador cuando el contenido excede el
tamaño especificado de la capa.
Visible indica que el contenido adicional aparece en la capa. La capa se amplía para darle cabida.
Hidden (oculto) especifica que el contenido adicional no se mostrará en el navegador.
Scroll (desplazamiento) especifica que el navegador deberá añadir barras de desplazamiento a la capa tanto si
se necesitan como si no.
Auto (automático) hace que el navegador muestre barras de desplazamiento para la capa cuando sean necesarias
(es decir, cuando el contenido de la capa supere sus límites).
Para practicar puedes realizar el Ejercicio paso a paso Insertar una capa.
Ejercicios del Tema 14. Prueba evaluativa del Tema 14.

Pág. 14.1
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Tema 15. Comportamientos
Unidad 15. Comportamientos (I) Búsqueda
En este tema vamos a ver las características básicas de los comportamientos, así como un par de ejemplos de
entre sus posibles aplicaciones.
Introducción
Los comportamientos son acciones que suceden cuando los usuarios realizan algún evento sobre un
objeto, como puede ser mover el ratón sobre una imagen, pulsar sobre un texto, hacer doble clic sobre un mapa
de imagen, etc.
Los comportamientos no existen como código HTML, se programan en JavaScript. Dreamweaver permite insertarlos
a través del panel Comportamientos, por lo que no es necesario escribir ninguna línea de código JavaScript
para programarlos.
La imagen que aparece a continuación tiene asociado un comportamiento. Sitúa el puntero sobre ella para ver qué es
lo que ocurre.
La imagen tiene asociados dos comportamientos para mostrar y ocultar la capa. Este tipo de comportamiento lo
veremos más adelante.
Otros comportamientos que ya has visto son los que se aplican sobre las imágenes de sustitución y las barras
de navegación, que ya están predefinidos, por lo que no es necesario introducir este conjunto de comportamientos
a través del panel Comportamientos.
Para validar formularios ya viste algunas características del panel Comportamientos. Vamos a recordar las
que necesitamos para poder insertar comportamientos más tarde.
El panel Comportamientos se puede abrir a través del menú Ventana, opción Comportamientos. También
pulsando Mayús+F3.

En este panel hay que desplegar el botón pulsando sobre él, y en Mostrar eventos para elegir una versión de la
lista de navegadores.
Algunos comportamientos no funcionan para algunos navegadores, por lo que dependiendo del navegador
elegido aparecerán unos u otros comportamientos posibles.
Existen comportamientos que funcionan en Internet Explorer pero no en Netscape. Debido a que la mayoría 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
algún comportamiento.
Insertar un comportamiento
Cuando ya hay establecido algún 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 botón del panel Comportamientos aparece la opción Mostrar eventos para, a través de la cual
se había elegido el navegador. También aparece la lista de todas las acciones posibles para el navegador
elegido previamente, de entre las que se puede seleccionar una.
Según el elemento sobre el que se desee aplicar el comportamiento, se podrán elegir unas acciones, mientras que
otras no.
En este caso la acción Validar formulario no puede seleccionarse porque no existe ningún formulario en la página.
Después de elegir alguna acción, 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 acción.
Las acciones son las que se han elegido en la lista anterior y el evento indica cuándo se debe de realizar la acción.
Para eliminar un comportamiento, hay que seleccionarlo en el panel Comportamientos y pulsar sobre el botón
. También es posible cambiar el orden de los comportamientos aplicados a un objeto, seleccionándolos
y ordenándolos mediante los botones .

Pág. 15.1
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Tema 16. Comportamientos Avanzados
Unidad 16. Comportamientos Avanzados (I) Búsqueda
En el tema anterior vimos algunos de los comportamientos básicos, en este tema veremos otros comportamientos
y veremos cómo utilizarlos y aprovecharnos de esta característica de Dreamweaver para crear diversas
funcionalidades automáticamente.
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 deberás abusar de ellos,
pues a la larga pueden resultar un poco incómodos, utilízalos con un objetivo concreto y no porque quieras atraer
la atención del usuario.
Para crear un mensaje emergente deberás 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 botón y selecciona la opción
Mensaje emergente.
Se abrirá el siguiente cuadro de diálogo:
Aquí deberás 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 más intuitivo
para el usuario, por ejemplo, si asocias el mensaje a un evento onMouseOver (cuando se pase el ratón por encima)
el usuario no sabrá muy bien porque se ha generado el mensaje de aviso.
En realidad no habrá hecho ningún movimiento voluntario para recibir ese tipo de respuesta. Debido a esto (el
estimulo-respuesta que espera el usuario), el evento onClick es el más 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 página web. Aunque
no funciona en algunos navegadores.
Si observas esta barra cuando navegas verás que va cambiando su texto según te encuentres sobre un enlace o
no. Normalmente, las páginas que no tratan la Barra de Estado (por ejemplo, esta) no muestran ninguna
información. Únicamente cuando posicionas el puntero sobre un enlace el texto de la Barra cambia para mostrar
la dirección a la que este se dirige.
Observa este ejemplo, si haces clic sobre él te llevará a la página principal de aulaClic.
Cambiar el Texto de la Barra de Estado significaría modificar el texto que aparece en ese momento cuando
realizamos un evento sobre un elemento en particular. Por ejemplo:
aulaClic.es
Este comportamiento es muy útil para personalizar mucho más tu página y mostrar información que de otra forma
no sería 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 botón .
Luego selecciona la opción Definir texto y haz clic en Establecer texto de la barra de estado.
Aquí deberás escribir el texto que quieres que aparezca en el cuadro Mensaje, luego pulsa Aceptar y listos.
¿Dónde y cómo asociar el texto en una página? es sencillo. Una de las opciones que te da este comportamiento
es poder asociar un texto en concreto a la página en sí.
Es decir, que cuando abras una página se muestre inmediatamente (y permanentemente) un texto en la barra de
estado. Eso es posible creando el mensaje asociado al body de la página (para ello tendrás que insertar
el comportamiento sin seleccionar ningún elemento para que se asocie con toda la página) y lanzándolo en el
evento onLoad (en la carga del documento). De esta forma cuando se abra la página 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 cómo 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 ratón se encuentra encima) que mostrará el mensaje
que queramos.
El segundo deberá ir asociado al evento onMouseOut (cuando el ratón deja de estar encima) que deberá limpiar la

barra de estado para que recupere su estado anterior.
En el caso de que hubiésemos establecido un mensaje para el body de la página, al salir de un enlace (en
el onMouseOut) deberemos volver a escribir ese mensaje para que siga mostrándose.
En el caso de que la página 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 ratón sobre el enlace (o
imagen, párrafo..., da igual) el texto de la barra de estado cambiará. Pero cuando el ratón 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.
Pág. 16.1
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Tema 17. Estilos CSS Avanzado
Unidad 17. Estilos CSS Avanzado (I) Búsqueda
En temas anteriores vimos cómo funcionaba el Panel CSS y cómo crear hojas de estilos para poder utilizarlas en
tus páginas web.
En este tema aprenderemos más sobre CSS, pero orientándonos más a qué es CSS y cómo crear estilos CSS
para crear páginas que sigan los fundamentos y reglas marcadas por el W3C (Word Wide Web Consortium).
Esta metodología exige que el archivo HTML solamente muestre datos organizados y estructurados con etiquetas
de marcación HTML, mientras que la parte de formato recaería sobre los estilos CSS única y exclusivamente.
Para poder lograr esto deberemos dominar en profundidad CSS para poder posicionar, modificar o adornar la página
de un modo eficiente.
En este tema aprenderemos controles que nos ayudarán a presentar el texto e imágenes de nuestras páginas de
una forma mucho más limpia y cómoda.
Aplicar estilos CSS
Hasta ahora, si has entrado un poco en el código de las páginas, habrás visto etiquetas que introducían estilos CSS
en ellas.
La forma más habitual de presentarse es en la sección head de la página de esta forma:
<style type="text/css">

</SCRIPT>
Dicho código tiene que ir entre las etiquetas <HEAD> y </HEAD>, y añadir onload="scroller()" dentro de la
etiqueta <BODY>, de modo que ésta queda del siguiente modo:
<BODY onload="scroller()">
Este código no es demasiado complicado, y podrías casi sin problemas añadirlo a tus páginas, para que mostrasen
los mensajes que quisieras.
Pero en muchas ocasiones puede costar entender el código, sobretodo si no se tienen nociones de ningún lenguaje
de programación. Si no entiendes el código, puedes cometer el error de copiar código JavaScript erróneo, copiarlo
de forma incompleta, insertarlo en una zona incorrecta del código html, etc.
Lo importante que tienes que saber en este momento sobre las funciones JavaScript es que aparecen entre las líneas
<HEAD> ... <SCRIPT language=JavaScript>  </SCRIPT> ... </HEAD>
Pág. 13.3
Septiembre - 2007.

Unidad 15. Comportamientos (II) Búsqueda
Mostrar-Ocultar capas
Uno de los comportamientos más 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 página anterior tenías un ejemplo de este tipo. Vamos a ver qué eventos y acciones hay que establecer para
que se produzca dicho comportamiento.
Después de seleccionar la imagen hay que seleccionar una acción de la lista, pulsando sobre el botón . En este
caso la acción tiene que ser la de Mostrar-Ocultar elementos.
Tras elegir la acción, hay que especificar qué capas han de mostrarse u ocultarse para el evento. Para ello hay
que pulsar dos veces sobre la acción, en el panel Comportamientos.
Entonces aparece una nueva ventana, con la lista de todas las capas que hay en la página, en la que puede indicarse
la variación 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 través de los botones inferiores de la ventana.

No es necesario aplicar una visibilidad diferente a todas las capas de la página, 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 varíe al producirse el evento.
Si se desea eliminar una visibilidad establecida para alguna de las capas, simplemente hay que volver a pulsar sobre
el botón correspondiente a la visibilidad que ya tiene aplicada. Por ejemplo, para eliminar la visibilidad aplicada a la
capa gatosemana habría que volver a pulsar sobre el botón 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 acción Mostrar-Ocultar elementos. Uno de ellos mostrará la capa
para el evento onMouseOver (cuando el ratón esté sobre), mientras que el otro la ocultará para el evento
onMouseOut (cuando el ratón esté fuera).
Llamar JavaScript
Otro de los comportamientos que puede aplicarse sobre algún objeto es el de Llamar Javascript. Este
comportamiento permite insertar código JavaScript dentro del código 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 línea 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 acción Llamar Javascript a través del
botón .
Entonces aparece una nueva ventana en la que hay que introducir la línea 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 acción vuelve a abrirse la ventana anterior, y es posible modificar la línea de código.
Para practicar puedes realizar el Ejercicio paso a paso Crear comportamiento.
Pág. 15.2
Septiembre - 2007.

Unidad 24. AJAX y Spry Framework (II) Búsqueda
Importar Datos
Como comentábamos antes, Spry es capaz de acceder a datos almacenados en archivos XML.
Para ello, Spry guarda los datos en un dataset (algo muy parecido a un juego de registros) que es lo que nos
permitirá trabajar con la información guardada de forma dinámica.
Tomemos como ejemplo un archivo XML con la siguiente estructura:
<?xml version="1.0" encoding="UTF-8"?>
<listado atributo="aaa" >
<elemento id="1">
<propiedad>valor_1</propiedad>
</elemento>
<elemento id="2">
</elemento>
<elemento id="3">
</elemento>
</listado>
El modo en el que deberemos importar este archivo será creando un dataset en el que indicaremos el URL del archivo
y su estructura:
<script type="text/javascript">
var miDataSet = new Spry.Data.XMLDataSet("archivo.xml", "listado/elemento");
</script>
Como puedes ver ya hemos empezado a incluir código JavaScript en la página.
Este bloque deberá colocarse después de haber incluido los dos archivos JS necesarios para que Spry
funcione correctamente.
Lo que hacemos es declarar un objeto (escribiendo var al principio) con el nombre que queramos.
La estructura de la creación del objeto es siempre la misma, simplemente deberemos indicar donde se encuentra
el archivo XML (bien podría tratarse de una dirección absoluta del tipo http://www.unsitio.com/carpeta/archivo.xml),
y el tipo de estructura que tiene.
La declaración que puedes ver la hemos basado en el ejemplo XML anterior.
En este caso la estructura del archivo responde a listado/elemento pues estamos listando las etiquetas que forman
el archivo separadas por barras inclinadas (/).
Nuestro dataset almacenaría los siguientes registros:
@id propiedad
1 valor_1
2 valor_2
3 valor_3
Estos tres registros se corresponden con los tres items elemento que tenemos en el archivo XML.
Observa como hemos escrito la columna que se refiere al id del elemento con un símbolo de @, esta es la forma en
la que referenciaremos a los atributos existentes en las etiquetas.
Sin embargo, los registros almacenados en el dataset dependerán de la estructura que especifiquemos al crearlo.
Imagina que para el mismo ejemplo hubiesemos creado el dataset de esta forma:
var miDataSet = new Spry.Data.XMLDataSet("archivo.xml", "listado");
</script>
Ahora los registros que se guardarían serían los siguientes:
@atributo
aaa
Esto es debido a que el elemento que tomaría para crear las filas que más tarde almacenará sólo aparece una vez
y tiene un sólo valor que podamos sacar: su atributo.
Así que recuerda que deberás especificar correctamente la estructura del archivo XML para lograr almacenar en
el dataset la información que te interesa.
Para practicar la creación de datasets realiza el Ejercicio Paso a Paso Crear un Dataset.
Pág. 24.2

Septiembre - 2007.

Unidad 24. AJAX y Spry Framework (III) Búsqueda
Definiendo regiones
Una vez definido el dataset continuaremos creando la página como hemos visto hasta ahora.
Sólo deberemos crear una zona especial donde queramos mostrar datos almacenados en el dataset.
Para ello definiremos una región Spry. Esta región indicará que dentro de esta etiqueta se encontrarán
etiquetas especiales (propias de Spry) que nos permitirán incluir información y comportamientos dinámicos.
Para definir una etiqueta sólo tendremos que escribir el siguiente atributo:
<div spry:region="miDataSet">
...
</div>
Deberemos especificar el dataset con el que trabajaremos dentro de la región pues como veremos más adelante
es posible trabajar con más de un objeto de registros a la vez.
Las regiones tienen solamente una excepción, no se pueden declarar en una etiqueta que pertenezca al
siguente listado:
COL TABLE
COLGROUP TBODY
FRAMESET TFOOT
HTML THEAD
IFRAME TITLE
STYLE TR
Lo cual no significa que estas etiquetas no puedan aparecer dentro de la región. Simplemente no podrás utilizarlas
para declararla.
Lo más secillo es utilizar la etiqueta DIV si queremos crear una región pequeña o directamente sobre la etiqueta
BODY de la página si quieres incluir datos y comportamientos indiscriminadamente y te es dificil establecer una
región especifica dentro de la página.
Mostrar información
Una vez definida la región donde utilizaremos el dataset, ya estamos preparados para poder incluir la
información guardado en él.
Para ello sólo tendremos que escribir el nombre de la columna que queremos mostrar, tal cual hacíamos con
los recordset que utilizabamos en las páginas dinámicas:

<table>
<tr>
<td>{miDataSet::@id}</td>
<td>{miDataSet::propiedad}</td>
</tr>
</table>
</div>
En este ejemplo podrás ver cómo definimos la región Spry. Dentro de ella creamos una tabla que mostará el valor
del atributo id del elemento y el valor de su hijo propiedad.
Para mostrarlo escribimos entre llaves el nombre del dataset seguido de ::, luego indicaremos el nombre de la columna.
Recuerda que si queremos referirnos al valor de un atributo deberemos utilizar el símbolo @.
En regiones en la que utilicemos un solo dataset (más adelante veremos que podemos utilizar varios a la vez) no
será necesario indicar su nombre, por lo que podremos escribir entre llaves únicamente el nombre de la columna
a mostrar:
<table>
<tr>
<td>{@id}</td>
<td>{propiedad}</td>
</tr>
</table>
</div>
Para practicar estos conceptos realiza el Ejercicio Paso a Paso Crear una Región con Información.
Pág. 24.3
Septiembre - 2007.

Unidad 24. AJAX y Spry Framework (IV) Búsqueda
Crear Repeticiones
Igual que hacíamos en las páginas dinámicas, Spry nos permite la repetición de elementos para mostrar el
contenido completo del dataset y así poder visualizar todos los registros.
Para ello utilizaremos el atributo spry:repeat.
Este atributo repite la etiqueta en la que está colocado tantas veces como registros pueda encontrar en el dataset.
De esta forma el siguiente bloque de código reproduciría un listado desordenado con tantos items como registros
existan en el archivo XML:
<ul>
<li spry:repeat="miDataSet">{@id}, {propiedad}</li>
</ul>
</div>
Sencillo, ¿verdad?.
También tenemos la posibilidad de utilizar spry:repeatchildren, que al contrario que el anterior no repite la etiqueta en
la que se encuentra, sino aquellas etiquetas que estén contenidas en ella.
Por ejemplo, podríamos conseguir el mismo resultado que en el código anterior escribiendo:
<ul spry:repeatchildren="miDataSet">
<li>{@id}, {propiedad}</li>
</ul>
</div>
Esto hará que los hijos de la etiqueta ul se repitan para cada registro. Por lo que también se creará un listado con
tantos items como elementos haya en el dataset.
Para practicar realiza el Ejercicio Paso a Paso Crear repeticiones.

Pág. 24.4
Septiembre - 2007.

Unidad 24. AJAX y Spry Framework (V) Búsqueda
Ordenar registros
Cuando creamos repeticiones es probable que queremos que nuestros registro aparezcan ordenados.
Para ello tendremos dos opciones, ordenarlos desde un principio o añadir un comportamiento para que cuando
se produzca determinado evento los registros que se están mostrando en pantalla se ordenen automáticamente.
Crear comportamientos es muy sencillo, el evento más utilizado es el onClick al ser el que más interacción tiene con
el usuario (como vimos en el tema de Comportamientos avanzados).
Ordenar un listado utilizando un comportamiento es muy sencillo.
Bastará con utilizar el método sort:
<table>
<tr>
<td onclick="miDataSet.sort('@id');">ID</td>
<td onclick="miDataSet.sort('propiedad');">PROPIEDAD</td>
</tr>
<tr spry:repeat="miDataSet">
<td>{@id}</td>
<td>{propiedad}</td>
</tr>
</table>
</div>
Como puedes ver en el ejemplo, este código creará una tabla con un encabezado con las palabras ID y PROPIEDAD.
El resto de filas serán repeticiones que mostrarán los diferentes registros del dataset.
Si hacemos clic en alguno de los encabezados, los registros se reordenarán para mostrarse ordenados por el campo
que se encuentra en el encabezado pulsado. A la celda le hemos añadido un comportamiento onclick que ejecute
sobre el dataset miDataSet el método sort ordenando por el campo entre paréntesis.
Es posible especificar en que dirección se realizará la ordenación, para ello deberás indicarlo añadiendo un
nuevo parametro:
miDataSet.sort('propiedad', 'ascendig')

miDataSet.sort('propiedad', 'descending')
miDataSet.sort('propiedad', 'toggle')
Al asociar este método a un comportamiento podemos provocar que los registros se ordenen
ascendentemente, descendentemente o utilizar la propiedad toggle para que cada vez que se provoque
el comportamiento cambie la ordenación de ascendente a descendente y viceversa.
Como hemos dicho también es posible provocar la ordenación al cargar el dataset, de esta forma al visualizar los
datos por primera vez aparecerán ordenados de la forma en que queramos y no hará falta esperar a que se realice
un comportamiento para ordenarlos.
Ordenar un dataset en la carga requiere que se especifique en el momento en que lo definimos.
Veamos un ejemplo:
var miDataSet = new Spry.Data.XMLDataSet("archivo.xml","listado/elemento",

{sortOnLoad:"propiedad", sortOrderOnLoad:"descending"});
</script>
Aquí, en el momento de la declaración del dataset indicamos por qué campo se debe de ordenar y en qué sentido.
La ordenación en algunos momentos puede crearnos problemas si estamos visualizando campos que contienen
números o fechas.
Para ello utilizaremos la declaración de los tipos de columnas:
var miDataSet = new Spry.Data.XMLDataSet("archivo.xml", "listado/elemento",

{sortOnLoad:"propiedad", sortOrderOnLoad:"descending"});
miDataSet.setColumnType("propiedad", "number");
</script>
De esta forma estamos indicando que la columna propiedad es de tipo numérico, también podríamos haber escrito
date si fuese de tipo fecha.
Por defecto una columna es de tipo texto y por lo tanto se ordenará alfabéticamente.
Variables preestablecidas
Mientras uses Spry podrás acceder a unas variables que almacenan dinámicamente la información de los registros.
Estas variables pueden alamcenar el estado en el que se encuentra el dataset en cualquier momento, veamos
cuáles son:
{ds_RowID}: devuelve el ID de un registro en el dataset. Puede utilizarse para referenciar un registro incluso si
éstos son ordenados.
{ds_RowNumber}: devuelve el número de fila del registro dentro del dataset. Dentro de una condición indica
el número de fila que se está evaluando.

{ds_RowCount}: devuelve el número total de registros en el dataset.
{ds_CurrentRowID}: devuelve el ID del registro actual. Este valor no cambiará incluso dentro de una condición.
{ds_CurrentRowNumber}: devuelve el número de fila del registro dentro del dataset. Este valor no cambiará
incluso cuando se utilice dentro de una condición.
{ds_SortColumn}: devuelve el nombre de la última columna utilizada para la ordenación. Si los datos no han
sido ordenados esta variable no devolverá nada.
{ds_SortOrder}: devuelve la dirección en que se ordenaron los registros por última vez (ascendente o
descendente). No devolverá nada si los registros aun no han sido ordenados.
Estas variables nos serán muy útiles cuando creemos condiciones.
Pág. 24.5
Septiembre - 2007.

Unidad 24. AJAX y Spry Framework (VI) Búsqueda
Condicionales
Es posible crear condiciones dentro de las áreas de repetición para decidir si los elementos se deberán mostrar o no.
Para ello nos podremos valer de diferentes métodos.
El primero que veremos será el atributo spry:test, que debe colocarse junto a un spry:repeat (o
spry:repeatchildren)
Este atributo nos permite crear una condición junto a la repetición que evaluará cada fila y la mostrará si cumple
la condición.
Por ejemplo:
<ul spry:repeatchildren="miDataSet" spry:test="{ds_RowID} <= 5;">
<li>{@id}, {propiedad}</li>
</ul>
</div>
Esta condición hará que la repetición se produzca mostrando los 6 primeros elementos (recuerda que el
conteo empieza en 0, por lo que el sexto elemento tendrá una ID de 5).
Otra forma de crear condiciones es utilizando las expresiones regulares que vimos en el tema 12.
De esta forma podemos crear condiciones que evalúen el contenido de algún campo:
<ul spry:repeatchildren="miDataSet" spry:test="'{propiedad}'.search(/Ân/) != -1;">
De esta forma mostaremos sólo aquellos registros cuyo campo propiedad empiece por An. != es el operador lógico
que indica distinto.
Si quisiesemos aquellos que no empiezan por An deberíamos escribir:
<ul spry:repeatchildren="miDataSet" spry:test="'{propiedad}'.search(/Ân/) == -1;">.
== es el operador lógico que indica igual.
E incluso podríamos igualar un campo para mostrar sólo aquél que tenga determinado valor:
<ul spry:repeatchildren="miDataSet" spry:test="'{propiedad}' == 'valor';">

Luego podemos encontrar otros elementos de condición más complejos y flexibles.
Estos no necesitan estar al lado de un spry:repeat, pero sí dentro de una etiqueta afectada por él.
Podemos utilizar spry:if para decidir mostrar algo o no.
Podríamos reescribir el ejemplo anterior de esta forma:
<li spry:if="{ds_RowID} <= 5;">{@id}, {propiedad}</li>
</ul>
</div>
De esta forma podemos decidir ya no sólo si mostrar registros o no, sino también ocultar algunas etiquetas.
Bastará con que pongas el atributo dentro de una etiqueta concreta y se evaluará para cada registro si mostrarla o no
(y con ella todo su contenido).
Otro elemento condicional que podremos utilizar, aún más completo es spry:choose.
Este condicional te permite evaluar diferentes casos y para cada uno tomar diferentes decisiones.
Por ejemplo:
<div spry:choose="spry:choose">
<li spry:when="{ds_RowID} <= 5;" class="estilo1">{@id}, {propiedad}</li>
<li spry:when="{ds_RowID} > 5;" class="estilo2">{@id}, {propiedad}</li>
</div>
</ul>
</div>
Aquí creamos una región spry:choose y dentro de ella diferentes casos en los que se evaluarán las condiciones y
se mostrará aquella que se cumpla en primer lugar.
En este ejemplo, los 6 primeros registros se listarán con clase estilo1 y el resto con estilo2.
Podríamos haber añadido una tercera condición como esta:
<li spry:default="spry:default" class="estilo3">{@id}, {propiedad}</li>
Que actuará cuando ninguna de las condiciones anteriores se cumplan.

Pág. 24.6
Septiembre - 2007.

Unidad 24. AJAX y Spry Framework (VII) Búsqueda
Filtros
Otra posibilidad a la hora de decidir qué registros mostrar o no son los filtros.
Un filtro se aplica sobre un dataset y descarta las filas que no lo cumpla.
Podrás aplicar un filtro dinámicamente y hacer que se aplique cuando se produzca determinado evento.
Al aplicar el filtro en un comportamiento deberemos establecer una función que contendrá las directrices que se
deberán seguir para decidir si una fila se muestra o no.
El modo en el que declararemos la aplicación de un filtro en un comportamiento dinámico es el siguiente:
<a href="#" onclick="miDataSet.filter(miFuncion);">Filtrar registros</a>
Esta función deberá ser declarada cuando se crea el dataset.
Por ejemplo:
miDataSet.setColumnType('@id', 'number');
var miFuncion = function(dataSet, row, rowNumber) {
if (row["propiedad"] == "valor") {
return row;
else {
return null;
</script>
En este ejemplo podemos ver como se declara un dataset, y una de sus columnas se declara también de tipo numérico.
Luego introducimos la función que llamaremos en el evento onclick.

La estructura de esta función será siempre la misma. Simplemente deberás cambiar la condición que hará que la fila
se desprecie o no.
Lo único que deberás recordar es que para referenciar a una columna deberás utilizar la sintaxis row["propiedad"].
El resto continuará completamente igual, e incluso podrás utilizar el método de búsqueda con expresiones regulares
que vimos en el apartado anterior:
var miFuncion = function(dataSet, row, rowNumber) {
if (row["propiedad"].search(/Ân/) == -1) {
return row;
else {
return null;
Cuando se produzca el evento se filtrarán los resultados.
Podrás volver a mostrar los datos originales llamando al metodo filter pero sin pasarle ninguna función:
<a href="#" onclick="miDataSet.filter();">Mostrar todos</a>
Esto regenerará el dataset y volverá a mostrar los registros sin filtrar.
Existe otra posibilidad que filtra el dataset destructivamente.
Es decir, el filtro que se aplica no puede ser revertido, y las filas despreciadas se borran del dataset.
Para ello deberás utilizar el método filterData de la siguiente forma:
<a href="#" onclick="miDataSet.filterData(miFuncion);">Filtrar sin vuelta atrás</a>
El funcionamiento de este filtro es exactamente igual al anterior.
También requiere de la misma función y actúa del mismo modo.
La única diferencia se encuentra en que no podrás recuperar las filas que haya quitado el filtro.
Para practicar estos conceptos realiza el Ejercicio Paso a Paso Crear un Filtro.
Pág. 24.7

Septiembre - 2007.

Unidad 24. AJAX y Spry Framework (VIII) Búsqueda
Eliminar Filas repetidas
Existe un último método para despreciar registros que se basa en la eliminación del dataset de los registros repetidos.
Para ello utilizaremos el método distinct.
De nuevo, nos encontramos con que este método es destructivo, por lo que si lo ejecutas y eliminas las filas repetidas
no podrás volver a recuperarlas a no ser que cargues de nuevo el archivo XML.
Puedes utilizarlo de dos formas, dinámicamente (ligado a un comportamiento) o al crear el dataset.
Para utilizar este método con un comportamiento simplemente deberás escribir lo siguiente:
<a href="#" onclick="miDataSet.distinct();">Eliminar filas repetidas</a>
Al producirse el evento los registros repetidos se eliminan del dataset y no vuelven a aparecer.
Para cargar un dataset sin filas repetidas deberás indicarlo en la declaración del objeto dataset de este modo:
var miDataSet = new Spry.Data.XMLDataSet("archivo.xml", "listado/elemento", {distinctOnLoad: true});
</script>
Sencillo, ¿verdad?
Actualizar la carga de un archivo XML
Hemos visto que una vez descargado el archivo XML, nuestras páginas trabajarán con el dataset cargado en
modo cliente sin tener que volver al servidor para cargar los datos cada vez.
Es posible que en determinados momentos nos sea necesario mostrar el contenido de un archivo XML que
contiene información que se actualiza en periodos muy breves.
A veces es interesante mostrar la información completamente actualizada al segundo.
Para ello deberemos utilizar el método loadInterval. Este método obliga a Spry a recargar el archivo XML en el
intervalo de tiempo que indiquemos.
La forma en la que deberemos declararlo será la siguiente:

var miDataSet = new Spry.Data.XMLDataSet("archivo.xml", "listado/elemento", {useCache: false,

loadInterval: 30000});
</script>
Como puedes ver en el ejemplo, establecemos que el intervalo de recarga sea de 30000 milisegundos (es decir,
30 segundos).
También hemos añadido la propiedad useCache:false para evitar que el archivo XML se almacene en la caché de
la máquina y así obligarle a tener que volver a hacer una petición para volver a leer los datos del archivo en su
situación actual.
Este método también se puede utilizar ligado a un comportamiento, deberemos utilizar el método startLoadInterval
del siguiente modo:
<a href="#" onclick="miDataSet.startLoadInterval(30000);">Recargar XML</a>
Aunque de este modo también es recomendale mantener el uso de la propiedad useCache para evitar que se tome
la versión almacenada en caché.
El método stopLoadInterval detiene la recarga del archivo XML y deja el último que se cargó como archivo de trabajo.
La forma de utilizarlo es igual al anterior:
<a href="#" onclick="miDataSet.stopLoadInterval();">Dejar de recargar XML</a>
Pág. 24.8
Septiembre - 2007.

Unidad 24. AJAX y Spry Framework (IX) Búsqueda
Modo Maestro/Detalle
Una de las posibilidades que nos ofrece Spry es trabajar en modo maestro/detalle.
De esta forma podemos mostrar unas cuantas columnas por registro y mostrar el detalle completo si son seleccionadas.
El uso de este método es muy aconsejable cuando la información almacenada para cada registro es muy grande.
Para ello, además de definir una región spry:region deberemos reservar también una región para el detalle
utilizando spry:detailregion.
La forma de trabajo para este modo es muy similar a la que llevamos viendo, simplemente habrá que añadir un
nuevo elemento que hará las veces de región de detalle:
<li onclick="miDataSet.setCurrentRow('{ds_RowID}')">{@id}, {propiedad}</li>
</ul>
</div>
<div spry:detailregion="miDataSet">
<p>{columna2}</p>
<p>{columna3}</p>
<p>{columna4}</p>
<p>{columna5}</p>
</div>
Como puedes ver hemos añadido una nueva región donde cargaremos la información completa del registro actual,
para ello hemos de generar un evento que ejecute el método que establece (set) cuál es el nuevo registro (row)
actual (current).
Lo hemos añadido en un evento onclick.
Para establecer un nuevo registro como el actual hemos utilizado el método setCurrentRow, que necesita de un
valor numérico el cual pasará como registro actual.
La región identificada como región de detalle se actualizará automáticamente mostrando el resto de campos que en
la región maestro no se mostraban.

Modo Maestro/Detalle con diferentes fuentes XML
Es posible que el detalle de un elemento no se encuentre en el mismo archivo XML, lo que nos obligaría a cargar el
XML del maestro junto con todos los archivos que contuviesen la información del detalle de cada uno de los registros.
Esta operación se puede resolver fácilmente en Spry de la siguiente forma:
var miDataSetDetalle = new Spry.Data.XMLDataSet("{miDataSet::URL}", "listado/detalle_elemento");
</script>
De esta forma deberemos incluir una nueva columna en el archivo XML del maestro indicando la URL del archivo
del detalle para cada uno de los registros.
Así cada vez que cambiemos de registro actual el dataset se recargará con el archivo que establece ese campo
y mostrará el detalle del registro que nos interesa.
Luego el código permanece prácticamente igual que el anterior, sólo que deberemos cambiar la sección
spry:detailregion para que apunte al dataset correspondiente:
<li onclick="miDataSet.setCurrentRow('{ds_RowID}')">{@id}, {propiedad}</li>
</ul>
</div>
<div spry:detailregion="miDataSetDetalle">
<p>{columna2}</p>
<p>{columna3}</p>
<p>{columna4}</p>
<p>{columna5}</p>
</div>
Pág. 24.9
Septiembre - 2007.

Unidad 24. AJAX y Spry Framework (X) Búsqueda
Spry y estilos CSS
Además de todo lo que hemos visto, Spry tiene un par de atributos que nos servirán de muchísima ayuda a la hora
de darle formato y resaltar zonas de la pantalla.
spry:hover permite asociar una clase CSS a determinada etiqueta que se aplicará únicamente cuando el ratón
esté sobre dicha etiqueta.
Simplemente deberás indicar el nombre de la clase que anteriormente habrás definido y Spry hará el resto por ti:
<style>
.resaltado { background-color: yellow; }
</style>
...
<li spry:hover="resaltado">{@id}, {propiedad}</li>
</ul>
</div>
Del mismo modo, spry:select actúa aplicando un estilo determinado cuando hacemos clic en la etiqueta afectada
por este atributo, la sintaxis es exactamente la misma.
Combinando ambos método podremos lograr una interfaz mucho más interactiva.
<style>
.resaltado { background-color: yellow; }
.seleccionado { color: red; }
</style>
...
<li spry:hover="resaltado" spry:select="seleccionado">{@id}, {propiedad}</li>
</ul>
</div>
Finalmente, Spry permite el uso de una propiedad más, spry:selectgroup.
El objetivo de este atributo es que cualquier elemento que use el mismo valor asignado a él deje de tomar la
clase aplicada cuando se haga clic sobre otro elemento con el mismo nombre de grupo.
El resto de elementos con valores diferentes en spry:selectgroup seguirán con la regla CSS aplicada hasta que se
haga clic en un elemento con el mismo nombre de grupo.
<li spry:hover="resaltado" spry:select="seleccionado" spry:selectgroup="miGrupo">{@id}, {propiedad}</li>
Pág. 24.10
Septiembre - 2007.

Unidad 25. Spry y Formularios (II) Búsqueda
Estados de validación
Una vez definido nuestro campo de validación deberemos configurar los mensajes de error que se
mostrarán. Dependiendo del tipo de control que utilicemos (como veremos más adelante) el tipo de error puede
ser diferente, pero su tratamiento es exactamente el mismo.
Veremos cómo tratarlos tomando como ejemplo la validación de campos de texto que acabamos de ver.
En el panel Propiedades podrás encontrar el desplegable Estados de vista previa:
Desde esta opción puedes pasar a la visualización 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.
Validación de campos desplegables
Otra de las opciones que nos proporciona Spry es la validación de controles desplegables, para ello deberemos
hacer clic en Insertar → Spry → Selección de validación de Spry. De este modo añadiremos 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: -- elige una opción --
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 validación 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 evalúe cada vez que se seleciona un valor.
Las opciones de validación tienen mucho que ver en este caso con el contenido de la lista de valores del
desplegable en sí:
Observa que si marcamos la opción de No permitir valores en blanco al seleccionar el valor2 (en la imagen)
se ejecutaría el mensaje de error Obligatorio.
En el caso de No permitir Valor no válido (-1, aunque puedes modificar el valor para que tome el que tú quieras)
al seleccionar -- elige una opción -- saltaría el error No válido.
Pág. 25.2
Septiembre - 2007.

Unidad 25. Spry y Formularios (III) Búsqueda
Casillas de verificación
Desde Insertar → Spry → Campo de verificación de validación de Spry podemos crear y controlar las casillas
de verificación de nuestros formularios. Observa el ejemplo a continuación:
Selecciona entre 1 y 3 opciones:
✔
Valor1
Valor2
Valor3
Valor4
Valor5
Valor6
Al crear el campo de verificación se crea únicamente una casilla. Esto es debido a que en el panel Propiedades
existe la opción de poder establecer que dicha casilla sea de selección obligatoria, como en el caso de formularios en
los que se ha de aceptar las condiciones de determinado contrato, etc.
Un uso más avanzado de este control es cuando combinamos más de una casilla en la misma región de Spry.
Este caso es un poco más complicado. Deberemos crear la región Spry tal y como acabamos de ver, luego sin
salirnos de la zona delimiatada con el recuadro azul deberemos insertar más casillas de verificación mediante
el menú Insertar → Formulario → Casilla de verificación hasta alcanzar el número de casillas que necesitemos:
En el panel Propiedades deberemos indicar que estamos trabajando com más de una casilla marcando la
opción Aplicar rango (varias casillas). De esta forma podremos indicar el máximo y mínimo de casillas de
verificación que se podrán cambiar.
Para ello utiliza los campos disponibles en Nº mínimo de opciones seleccionadas y Nº máximo de
opciones seleccionadas:

Esta última opción es la que puedes ver en el ejemplo más arriba.
Pág. 25.3
Septiembre - 2007.

Unidad 25. Spry y Formularios (IV) Búsqueda
Áreas de texto
La última opción que veremos será la creación de Áreas de texto con validación. Puedes hacerlo desde Insertar →
Spry → Área de texto de validación de Spry.
Aquí tienes un ejemplo de cómo funciona:
Introduce un texto de 50 caracteres como máximo:
Llevas escritos caracteres.
Al crear el campo de validación podrás encontrar las siguientes opciones en el panel Propiedades:
A continuación pasaremos a explicarlas.
En cualquier caso siempre podremos obligar al usuario a que rellene el campo marcando la opción Obligatorio. E
incluir un texto de ejemplo escribiéndolo en Sugerencia.
Escribe en Car min y Car máx el número de caracteres mínimos y máximos que aceptará el control. Puedes hacer
que los caracteres que se escriban de más no se puedan escribir marcando la opción Bloquear caracteres extra.
Finalmente puedes incluir un contador de caracteres marcando la opción Recuento de caracteres o

Caracteres restante para que se muestren los caracteres que se han escrito o los que faltan para alcanzar el
máximo respectivamente.
Este control es muy sencillo de utilizar y permite el control del textro introducido de una forma cómoda y rápida.

Pág. 25.4
Septiembre - 2007.

Unidad 26. Controles Spry Avanzados (II) Búsqueda
Navegación por Fichas
Puedes crear un control como el que mostramos a continuación haciendo clic en Insertar → Spry → Paneles en
fichas de Spry:
● FICHA 1
● FICHA 2
Contenido de la primera ficha.
Puedes escribir tantas cosas

como quieras.
E incluso incluir imágenes!
Estas fichas son contenedores que admiten todo tipo de elementos HTML. Facilitan la navegación y son muy útiles
para organizar la información y no congestionar la página ni al usuario.
Al insertarla verás que se inserta algo parecido a esto:
Seleccionando el control haciendo clic en la cabecera azul verás lo siguiente en el panel Propiedades:
Desde aquí podrás añadir tantas fichas como desees y ordenarlas utilizando los botones y .

Luego selecciona el Panel predeterminado que es el que se mostará por delante cuando se visualice la página en
el explorador.
Para modificar los títulos de ficha simplemente cambia el nombre desde la vista de Diseño.
Puedes modificar su contenido normalmente incluyendo todo tipo de tablas, imágenes o elementos que hayamos
visto hasta ahora. Para pasar del contenido de una ficha a otra sólo coloca el ratón 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 página es el que elijas como predeterminado en el
panel Propiedades.
Pág. 26.2
Septiembre - 2007.

Unidad 26. Controles Spry Avanzados (III) Búsqueda
Control Acordeón
Otro control avanzado que utiliza las ventajas de AJAX y que Spry nos permite utilizar es el Acordeón:
Sección 1
Coloca el contenido que prefieras

en estos contenedores.
Puedes pasar de un contenedor a

otro haciendo clic sobre su
nombre.
Sección 2
Aquí insertaremos una imagen.
Sección 3
Aquí un listado de elementos:
● elemento 1
● elemento 2
● elemento 3
● elemento 4

Sección 4
Finalmente colocaremos una linea

horizontal:
Y una tabla:
1 2
3 4
5 6
Para utilizarlo haz clic en Insertar → Spry → Acordeón de Spry. Se creará automáticamente un elemento en tu
página parecido a esto:
Este control es tan sencillo de configurar que en el panel Propiedades sólo encontrarás lo siguiente:
Añade y organiza las secciones utilizando los botones y . Y luego simplemente edita el contenido de cada
una de ellas y su nombre en la cabecera.
Del mismo modo que con las pestañas para ver el contenido de una sección coloca el ratón sobre su cabecera y haz
clic sobre el icono con forma de ojo que aparecerá:

Pág. 26.3
Septiembre - 2007.

Unidad 26. Controles Spry Avanzados (IV) Búsqueda
Panel con Contracción
Para terminar con los controles avanzados veremos el panel que puede contraerse de Spry. Puedes ver un ejemplo aquí:
Mi Panel
Este es un panel que se puede

contraer.
De esta forma podrás esconder el

contenido con un sólo clic.
Pruébalo pulsando sobre la

cabecera.
Para insertar un panel de este tipo sólo tienes que hacer clic en Insertar → Spry → Panel que puede contraerse
de Spry.
En el panel Propiedades podrás ver sus opciones de configuración:
Desactivando la opción Activar animación eliminarás la animación que se produce al contraer el panel. Esta opción
sólo afecta al comportamiento de apertura o cierre y no tiene mucha más trascendencia, así que simplemente
dependerá de tu gusto y lo que se adapte mejor al diseño de tu página web.
Puedes decidir si el panel se muestra inicialmente abierto o cerrado en la página seleccionando el estado en
el desplegable Estado predeterminado. Del mismo modo, si mientras trabajas en vista de Diseño te molesta que
este abierto puedes cerrarlo haciendo clic en el desplegable Mostrar y seleccionando Cerrado.
Esto último también puedes hacerlo pulsando sobre el icono del ojo que aparecerá en la cabecera del panel si situas
el ratón sobre ella:

Para modificar este panel simplemente edita su contenido como en el resto de controles que hemos visto, Nada más fácil.
Cambiar Estilos CSS
Al principio de la unidad dijimos que era posible modificar el aspecto de los controles Spry.
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
código necesario para el buen funcionamiento del control, nunca modifiques este código.
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 sólo tendrás 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.
Pág. 26.4
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Crear un sitio web local
Ejercicio paso a paso. Unidad 3.Crear un sitio Búsqueda

web local
Objetivo.
Practicar las operaciones que hay que realizar para crear un sitio web sin conexión 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 están diseñados para ir construyendo una página
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 estás 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 opción Administrar sitios. Se abrirá una nueva ventana.
5. Selecciona el botón Nuevo..., y selecciona la opción Sitio. Se abrirá una nueva ventana.
5 Selecciona la pestaña Avanzadas de la nueva ventana.
6 Selecciona Datos locales en Categoría.
7 En Nombre del sitio escribe Cocina.
8 En Carpeta raíz local busca la carpeta cocina, que se encuentra dentro de la carpeta ejerciciosdream,
y selecciónala. Puedes hacerlo a través del botón con forma de carpeta.
http://www.aulaclic.es/dreamweavercs3/epp_3_1_1.htm (1 de 2) [10/02/2008 20:04:03]

Curso de Adobe Dreamweaver CS3. Paso a Paso Crear un sitio web local
9 En Carpeta predeterminada de imágenes busca la carpeta imagenes, que se encuentra dentro de la carpeta
cocina, y selecciónala. Puedes hacerlo a través del botón con forma de carpeta.
10 Haz clic sobre el botón Aceptar y sobre el botón Listo.
A partir de este momento, realizando los ejercicios paso a paso, vamos a crear una página como la que aparece
si pulsas aquí.
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Crear nuevo documento y modificar sus propiedades
Ejercicio paso a paso. Unidad 3. Crear nuevo Búsqueda

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 página.
2 Abre el menú Archivo y elige la opción Nuevo, o bien haz clic sobre el botón de la barra de herramientas.
3 Selecciona la pestaña General de la nueva ventana.
4 Selecciona Página en blanco en Categoría.
5 Selecciona HTML en Página en blanco.
6 Haz clic sobre el botón Crear.
7 A partir de este momento vamos a realizar todos los ejercicios en la vista diseño. Haz clic sobre el botón Mostrar
vista de diseño .
8 Haz clic con el botón derecho del ratón sobre el documento en blanco, para abrir su menú contextual.
9 Elige la opción Propiedades de la página en el menú contextual.
10 En Título escribe Cocina.
11 En Fondo: escribe #CCCC99.

Curso de Adobe Dreamweaver CS3. Paso a Paso Crear nuevo documento y modificar sus propiedades
12 En Vínculos: escribe #CC6600.
13 En Vínculos visitados: escribe #CC9933.
14 En Vínculos activos: escribe #CC9966.
15 Haz clic sobre el botón Aceptar.
16 Haz clic sobre el botón Guardar de la barra de herramientas. Guarda el documento con el nombre menu.
htm, dentro de la carpeta cocina del ejercicio anterior.
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Insertar texto y modificar sus propiedades
Ejercicio paso a paso. Unidad 4.Insertar texto y Búsqueda

modificar sus propiedades
Objetivo.
Practicar las operaciones de insertar texto y modificar sus propiedades.
2 Si no aparece el panel Archivos, ábrelo a través del menú Ventana, opción 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 Quiénes Somos encima de la línea Fecha última modificación:.
6 Si no aparece el inspector de propiedades, ábrelo a través del menú Ventana, opción Propiedades.
7 Selecciona el texto Quiénes Somos.
8 En Formato, del inspector de propiedades, elige Encabezado 2 .
9 Haz clic sobre el botón Guardar de la barra de herramientas.
Curso de Adobe Dreamweaver CS3. Paso a Paso Insertar texto y modificar sus propiedades
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Convertir texto en una lista
Ejercicio paso a paso. Unidad 4. Convertir texto Búsqueda

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 líneas de texto desde 1kg de boniatos ... hasta la última.
7 Haz clic sobre el botón 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 líneas de texto desde Lavar las berenjenas... hasta la última.

Curso de Adobe Dreamweaver CS3. Paso a Paso Convertir texto en una lista
11 Haz clic sobre el botón de Lista ordenada del inspector de propiedades.
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Crear estilo HTML
Ejercicio paso a paso. Unidad 4. Crear estilo de Búsqueda

Clase
Objetivo.
Practicar las operaciones necesarias para crear un estilo de clase y aplicarlo a un párrafo.
2 Si no aparece el panel Archivos, ábrelo a través del menú Ventana, opción 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 botón Negrita .
7 En Fuente elige Verdana, Arial, ...
8 Haz clic en el menú Texto → Estilo → Subrayado.
Como la página no tiene ningún 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:.

Curso de Adobe Dreamweaver CS3. Paso a Paso Crear estilo HTML
11 Haz clic en Aceptar.
Ahora podrías utilizar este estilo sobre cualquier texto de la página.
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Crear un hiperenlace
Ejercicio paso a paso. Unidad 5. Crear un Búsqueda

hiperenlace
Objetivo.
Practicar cómo 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 botón para desplegar sus
propiedades más avanzadas.
7 Selecciona la imagen del logotipo de aulaclic. Para ello hay que hacer clic sobre ella.
8 En Vínculo, del inspector de propiedades, escribe http://www.aulaclic.com.
9 En Dest selecciona la opción _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 ratón encima de la imagen, el
puntero del ratón cambia de aspecto (normalmente toma forma de mano con el dedo índice señalando) esto te indica
que asociado a la imagen hay un hiperenlace y en la barra de estado puedes ver la página a la que enlaza.
Curso de Adobe Dreamweaver CS3. Paso a Paso Crear un hiperenlace
12 Cierra la ventana del navegador.
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Crear un vínculo de correo electrónico

vínculo de correo electrónico
Objetivo.
Practicar cómo crear un vínculo de correo electrónico.
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 botón Alinear a la derecha del inspector de propiedades.
8 Selecciona el texto cocineros que acabas de escribir.
9 En Vínculo, 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 aplicación
de correo (si la tienes instalada en tu ordenador) preparada para que escribas el texto del mensaje que quieres enviar,
en la dirección de destino habrá puesto trabajo@aulaclic.com.
Curso de Adobe Dreamweaver CS3. Paso a Paso Crear un vínculo de correo electrónico
12 Cierra tu aplicación de correo.
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Insertar una imagen
Ejercicio paso a paso. Unidad 6. Insertar una Búsqueda

imagen
Objetivo.
Practicar las operaciones que hay que realizar para insertar una imagen.
4 Haz doble clic sobre el documento menu.htm, que aparece en el panel Archivos.
5 Haz clic sobre el menú Insertar.
7 Elige la opción Imagen.
8 Selecciona la imagen logotipo.gif, que se encuentra dentro de la carpeta imagenes del sitio.
9 En Relativa a: selecciona la opción Documento.
11 Pulsa fuera de la imagen para que deje de estar seleccionada y se apliquen todos los cambios.
12 Pulsa F12 para ver el resultado en tu navegador.

Curso de Adobe Dreamweaver CS3. Paso a Paso Insertar una imagen
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Crear mapas de imagen
Ejercicio paso a paso. Unidad 6. Crear mapas Búsqueda

de imagen
Objetivo.
Practicar las operaciones que hay que realizar para insertar mapas de imagen.
2 Si no aparece el panel Archivos, ábrelo a través del menú Ventana, opción Administrar Archivos .
3 Selecciona el sitio Cocina en la ventana que se abre y presiona Listo.
6 Selecciona la imagen, haciendo clic sobre ella.
8 Haz clic sobre el botón Herramienta Zona interactiva poligonal , del inspector de propiedades .
9 Pulsa, en el orden de las agujas del reloj, alrededor de la silueta del gorro de la izquierda.
10 Haz clic sobre el botón Herramienta Puntero de zona interactiva , del inspector de propiedades para terminar
de delimitar el mapa.
11 Haz clic sobre el botón Herramienta Zona interactiva poligonal , del inspector de propiedades .
Curso de Adobe Dreamweaver CS3. Paso a Paso Crear mapas de imagen
12 Pulsa, en el orden de las agujas del reloj, alrededor de la silueta del gorro de la derecha.
13 Haz clic sobre el botón Herramienta Puntero de zona interactiva , del inspector de propiedades .
14 Haz clic sobre el mapa del gorro de la izquierda.
15 En Vínculo, del inspector de propiedades , escribe platodelasemana.htm.
16 Haz clic sobre el mapa del gorro de la derecha.
17 En Vínculo, del inspector de propiedades , escribe postredelasemana.htm.
18 Pulsa fuera del mapa para que deje de estar seleccionado y se le aplique el último cambio.
19 Pulsa F12 para ver el resultado en tu navegador. Comprueba que cuando posicionas el puntero del ratón sobre
los gorros, en la barra de estado aparece el enlace a la página web correspondiente.
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Crear botones Flash
Ejercicio paso a paso. Unidad 6. Crear botones Búsqueda

Flash
Objetivo.
Practicar las operaciones que hay que realizar para crear botones Flash.
5 Inserta dos líneas en blanco bajo la imagen y sitúa el cursor antes de la imagen de sustitución.
7 Elige la opción Media.
8 Elige la opción Botón Flash. Se abrirá una nueva ventana.
9 En Estilo: selecciona Beveled Rect-Green. En Muestra: aparecerá el botón .
Si en Estilo: no aparece el botón Beveled Rect-Green, selecciona otro cuyos colores sean similares a los del
botón anterior.
10 En Texto del botón: escribe Quiénes somos.

11 En Fuente: selecciona Verdana.
12 En Tamaño: escribe 12.
13 En Vínculo: escribe quienes.htm.
14 En Guardar como: escribe bt_quienes.swf.
16 Inserta un nuevo botón debajo del que acabas de crear, repitiendo los pasos del 6 al 15, pero con las
siguientes diferencias:
En Texto del botón: escribe Plato Semana .
En Vínculo: escribe platosemana.htm.
En Guardar como: escribe bt_plato.swf.
En Texto del botón: escribe Postre Semana.
En Vínculo: escribe postresemana.htm.
En Guardar como: escribe bt_postres.swf.
En Texto del botón: escribe Tu Receta.
En Vínculo: escribe tureceta.htm.
En Guardar como: escribe bt_receta.swf.
19 Pulsa F12 para ver el resultado en tu navegador.

Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Crear y rellenar una tabla
Ejercicio paso a paso. Unidad 7. Crear y Búsqueda

rellenar una tabla
Objetivo.
Practicar las operaciones que hay que reslizar para insertar una tabla y rellenar sus celdas.
5 Sitúa el cursor en la línea en blanco que se encuentra bajo el texto Tenemos sedes en: .
7 Elige la opción Tabla.
8 En Filas: escribe 6.
9 En Columnas: escribe 4.
10 En Ancho: selecciona Píxeles y escribe 500.
11 En Borde: escribe 2.
12 Si en Relleno de celda: aparece algo escrito, bórralo.

Curso de Adobe Dreamweaver CS3. Paso a Paso Crear y rellenar una tabla
13 En Espacio entre celdas: escribe 2.
15 Rellena la tabla para que quede del siguiente modo:
Sedes de
Cocina
Ciudad Valencia Barcelona
Avda. Consitución, Avda. Diagonal,
Dirección Gran Via, 162
34 23
10:00 – 16:30 12:00 – 17:00
20:30 – 01:00
Horario
20:30 – 00:00 20:30 – 00:30
Casera y de Castellana y de
Especialidad Creativa
Creación Mercado
Reservas Sí No Sí
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Modificar las propiedades de la tabla
Ejercicio paso a paso. Unidad 7. Modificar las Búsqueda

propiedades de la tabla
Objetivo.
Practicar cómo modificar las propiedades de una tabla y de sus celdas.
7 Selecciona la tabla. Para ello puedes colocar el cursor en cualquier parte de la tabla, desplegar el desplegable
del encabezado de tabla y seleccionar la opción Seleccionar tabla.
8 En Im, del inspector de propiedades, busca la imagen fondo2.gif, que se encuentra dentro de la carpeta imagenes
del sitio, y selecciónala. Puedes hacerlo a través del botón con forma de carpeta.
9 Selecciona la primera fila de la tabla. Puedes hacerlo situando el cursor junto al borde izquierdo de la tabla, a la
altura de la primera fila, y haciendo clic cuando el puntero adquiera la forma de flecha.
10 En Tam, del inspector de propiedades, selecciona 18.

11 En el botón Color de texto , que se encuentra a la derecha de Tam, escribe #926D38.
12 Selecciona Centro en el desplegable Horiz para centrar el texto en las celdas.
13 Pulsa el botón .
14 Selecciona la segunda y la tercera fila. Puedes hacerlo situando el cursor junto al borde izquierdo de la tabla, a
la altura de la segunda fila, y haciendo clic cuando el puntero adquiera la forma de flecha. Después deberás hacer
lo mismo con la tercera fila, mientras mantienes pulsada la tecla Ctrl (Control).
15 En Tam selecciona 12.
17 Selecciona las dos celdas que contienen el texto Valencia y Barcelona. Puedes hacerlo pulsando con el ratón
sobre una de ellas, y luego pulsando Ctrl haz clic en la segunda.
19 En Fnd escribe #AEA484.
20 Selecciona las cuatro últimas filas.
21 En Tam selecciona 10.
24 Pulsa fuera de la tabla para que las filas dejen de estar seleccionadas y se apliquen todos los cambios.
25 Selecciona la tabla. Para ello puedes colocar el cursor en cualquier parte de la tabla, desplegar el desplegable
del encabezado de tabla y seleccionar la opción Seleccionar tabla.
26 En Borde cambia el valor a 1.
27 Y dale el color #000000 al Borde .

Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Añadir y eliminar filas
Ejercicio paso a paso. Unidad 7. Añadir y Búsqueda

eliminar filas
Objetivo.
Practicar las operaciones que hay que realizar para añadir y eliminar filas.
5 Selecciona la última fila de la tabla. Puedes hacerlo sitúando el cursor junto al borde izquierdo de la tabla, a la altura
de la última fila, y haciendo clic cuando el puntero adquiera la forma de flecha.
6 Haz clic sobre el menú Modificar.
8 Elige la opción Insertar filas o columnas. Se abrirá una nueva ventana.
9 En Insertar: selecciona Filas.
10 En Número de filas: escribe 2.
11 En Dónde: selecciona Bajo la selección.

Curso de Adobe Dreamweaver CS3. Paso a Paso Añadir y eliminar filas
12 Haz clic sobre Aceptar. Observa que se habrán insertado dos filas al final de la tabla.
13 Selecciona las tres últimas filas de la tabla. Puedes hacerlo situando el cursor junto al borde izquierdo de la tabla, a
la altura de una de ellas, y haciendo clic cuando el puntero adquiera la forma de flecha. Después deberás hacer lo
mismo con las otras dos filas, mientras mantienes pulsada la tecla Ctrl (Control).
14 Haz clic sobre el menú Modificar.
16 Elige la opción Eliminar fila.
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Combinar celdas
Ejercicio paso a paso. Unidad 7. Combinar Búsqueda

celdas
Objetivo.
Practicar las operaciones necesarias para combinar celdas.
7 Selecciona la primera fila de la tabla. Puedes hacerlo sitúando el cursor junto al borde izquierdo de la tabla, a la
altura de la primera fila, y haciendo clic cuando el puntero adquiera la forma de flecha.
8 Hacer clic sobre el botón Combinar las celdas seleccionadas , del inspector de propiedades.
9 Selecciona la segunda y la tercera celda de la segunda fila. Puedes hacerlo pulsando con el ratón sobre una de
las celdas, y manteniéndolo pulsado mientras lo arrastras sobre la otra.
10 Haz clic sobre el botón Combinar las celdas seleccionadas .

Curso de Adobe Dreamweaver CS3. Paso a Paso Combinar celdas
11 Modifica el tamaño de las columnas para que se ajusten mejor al contenido. Puedes hacerlo manteniendo pulsado
el ratón sobre los bordes de las columnas, arrastrándolos hacia las posiciones deseadas.
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Crear y configurar marcos
Ejercicio paso a paso. Unidad 8. Crear y Búsqueda

configurar marcos
Objetivo.
Practicar las operaciones necesarias para crear y configurar marcos.
8 Elige la opción HTML y luego Marcos.
9 Elige la opción Izquierda.
Deberás darle los nombres leftFrame y mainFrame que te vendrán por defecto, para ello tendrás qeu pulsar
únicamente el botón Aceptar dos veces.
10 Si no aparece el panel Marcos, ábrelo a través del menú Ventana, opción Marcos.

11 Selecciona el documento de marcos. Puedes hacerlo pulsando sobre el borde exterior de los marcos, en el
panel Marcos.
12 En Título:, que aparece en la barra de documento, escribe Cocina.
13 En Bordes, del inspector de propiedades, selecciona No.
14 En Ancho escribe 0.
15 En Selección Fila Col. pulsa sobre la columna de la izquierda.
16 En Columna selecciona Píxeles y escribe 270.
17 En Selección Fila Col. pulsa sobre la columna de la derecha.
18 En Columna selecciona Relativo y escribe 1.
19 Pulsa sobre el marco izquierdo en el panel Marcos.
21 En Origen escribe menu.htm.
22 En Desplaz selecciona No.
23 En Bordes selecciona No.
24 Activa la casilla Mismo tamaño.
25 Pulsa sobre el marco derecho en el panel Marcos.
27 En Desplaz selecciona No.
28 En Bordes selecciona No.
29 Desactiva la casilla Mismo tamaño.
30 Selecciona el documento de marcos. Puedes hacerlo pulsando sobre el borde exterior de los marcos, en el
panel Marcos.
31 Haz clic sobre el botón Guardar de la barra de herramientas. Guarda el documento con el nombre marcos.
htm, dentro de la carpeta cocina.
32 En el caso de haber insertado mapas de imagen en la imagen del logotipo, selecciona cada uno de ellos y
elige mainFrame en Destino, que aparece en el inspector de propiedades.
33 Selecciona el primer botón Flash, y pulsa sobre el botón Editar, del inspector de propiedades.

En Destino: selecciona mainFrame.
Pulsa sobre el botón Aceptar.
Haz lo mismo para el resto de botones Flash.
34 Haz clic sobre el botón Guardar todo de la barra de herramientas.
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Insertar elementos de formulario
Ejercicio paso a paso. Unidad 9. Insertar Búsqueda

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 botón para desplegar

sus propiedades más avanzadas.
7 No es necesario insertar el formulario, ya está creado. Dentro de él hay dos tablas. Sitúa el cursor dentro de la
última celda de la primera fila de la primera tabla.
9 Elige la opción Formulario.
10 Elige la opción Campo de texto.
Se abrirá un cuadro de diálogo para incluir una etiqueta de texto al lado del campo, déjalo 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 máx escribe 50.
14 En Tipo selecciona Una línea.
15 Sitúa 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 máx escribe 40.
17 Sitúa el cursor dentro de la segunda celda de la primera fila de la segunda tabla.
En Campo de texto escribe receta.
En Cars máx escribe 25.
19 Sitúa el cursor dentro de la segunda celda de la segunda fila de la segunda tabla.
22 Elige la opción Lista/menú.
Se abrirá un cuadro de diálogo para incluir una etiqueta de texto al lado de la lista/menú, déjalo todo en blanco y
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 botón Valores de lista.
27 Escribe Plato en Etiqueta de elemento .

28 Pulsa sobre el botón para insertar nuevos elementos en la lista. Añade la etiqueta Postre.
30 Selecciona Plato en Seleccionado inicialmente.
31 Sitúa el cursor dentro de la primera celda de la cuarta fila de la segunda tabla.
34 Elige la opción Área de texto.
Se abrirá un cuadro de diálogo para incluir una etiqueta de texto al lado del área de texto, déjalo todo en blanco y
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 Varías líneas.
38 En Ancho car escribe 40.
39 En Líneas núm escribe 5.
40 Sitúa el cursor en la celda que hay debajo de la que pone Preparación:.
En Campo de texto escribe preparacion.
En Ancho car escribe 25.
En Líneas núm escribe 8.
42 Sitúa el cursor en la última celda de la segunda tabla.
45 Elige la opción Botón.
46 Haz clic sobre el botón para seleccionarlo.

47 En Etiqueta, del inspector de propiedades, escribe Restablecer.
48 En Acción selecciona Restablecer formulario.
49 Sitúa el cursor a la derecha del botón.
En Etiqueta escribe Enviar.
En Acción 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 ningún código al botón Enviar.
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Insertar un archivo de audio
Ejercicio paso a paso. Unidad 10. Insertar un Búsqueda

archivo de audio
Objetivo.
Practicar cómo insertar un archivo de audio que se reproduzca indefinidamente en un bucle y sin que se muestren
los controles de audio.
6 Sitúa el cursor en la primera línea.
8 Elige la opción Medía.
9 Elige la opción Plug-in.
10 Selecciona el archivo audio.mid, que se encuentra dentro de la carpeta varios del sitio.
11 Haz clic sobre la imagen para seleccionar el archivo de audio.

Curso de Adobe Dreamweaver CS3. Paso a Paso Insertar un archivo de audio
12 En An, del inspector de propiedades, escribe 0.
13 En Al escribe 0.
14 Haz clic sobre el botón para visualizar el código de la página.
15 En la línea que se encuentra seleccionada añade loop="true", de modo que la línea resultante sea
<embed src="varios/audio.mid" width="0" height="0" loop="true"></embed>.
16 Haz clic sobre el botón para visualizar únicamente el editor visual.
17 Pulsa fuera de la imagen que representa al archivo de audio, para que se apliquen los últimos cambios.
19 Visualiza la página en tu navegador.
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Crear una plantilla
Ejercicio paso a paso. Unidad 11. Crear una Búsqueda

plantila
Objetivo.
Practicar las operaciones a realizar para crear una plantilla a partir de un documento existente.
2 Si no aparece el panel Sitio, ábrelo a través del menú Ventana, opción Sitio.
3 Selecciona el sitio Cocina en el panel Sitio.
4 Haz doble clic sobre el documento paraplantilla.htm, que aparece en el panel Sitio.
5 Haz clic sobre la opción Guardar como plantilla, del menú Archivo. Se abrirá una nueva ventana.
6 En Sitio: selecciona Cocina.
7 En Guardar como: escribe plantillacocina.
8 Haz clic sobre el botón Guardar. El documento abierto en Dreamweaver pasará a ser la plantilla.
9 Sitúa el cursor en la primera celda de la tabla.
11 Elige la opción Objetos de plantilla.
12 Elige la opción Región editable.

13 En Nombre: escribe Título.
15 Sitúa el cursor debajo de la tabla.
17 Elige la opción Objetos de plantilla.
18 Elige la opción Región editable.
19 En Nombre: escribe Región Documento .
21 Haz clic sobre el botón Guardar de la barra de herramientas. Ya tenemos nuestra plantilla creada.
Ahora vamos a crear dos documentos basados en esta plantilla.
22 Abre un documento en blanco.
23 Haz clic en el menú Modificar, Plantillas, opción Aplicar plantilla a página.
24 Selecciona la plantilla plantillacocina.
25 Activa la casilla Actualizar página cuando cambie plantilla.
26 Pulsa el botón Seleccionar.
27 Escribe en la zona editable titulo Página 1.
28 Escribe en la zona editable Región Documento Esta es la primera página.
29 Guarda el documento como pag1.htm.
30 Repite los pasos 22 a 28 cambiando Página1 por Página2 y Esta es la primera página por Esta es la
segunda página.
31 Guarda el documento como pag2.htm.
32 Visualiza en tu navegador las páginas Pag1.htm y Pag2.htm.
Ahora vamos a cambiar la plantilla.
33 Haz clic sobre el menú Ventana.

34 Elige la opción Activos.
35 Si no aparece la lista de plantillas haz clic en el icono .
36 Selecciona la plantilla plantillacocina.
37 Haz clic en el icono .
38 En Propiedades de la página pon el color #33CCFF como color de fondo.
39 Haz clic sobre el botón Guardar de la barra de herramientas. Hemos cambiado el color de fondo de la plantilla.
40 Visualiza en tu navegador las páginas Pag1.htm y Pag2.htm. Observa que sin cambiar nada de las páginas
ahora tienen el color de fondo cambiado, al actualizar la plantilla se han actualizado automáticamente.
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Buscar y reemplazar
Ejercicio paso a paso. Unidad 12. Buscar y reemplazar Búsqueda
Objetivo.
Practicar el uso de la herramienta Buscar y reemplazar para buscar y reemplazar un texto por otro.
4 Haz doble clic sobre el documento buscar.htm, que aparece en el panel Archivos.
5 Haz clic sobre el menú Edición.
6 Elige la opción Buscar y reemplazar. Se abrirá una nueva ventana.
7 En Buscar en: selecciona Documento actual.
8 En Buscar selecciona Texto y escribe Recetas.
9 En Reemplazar con: escribe aulaClic.
10 Haz clic sobre el botón Reemp. todos. Aparecerá un aviso indicando que se han encontrado y sustituido
10 elementos.
11 Pulsa sobre alguna parte de la página para que se aplique el último cambio.
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Buscar y reemplazar

Curso de Adobe Dreamweaver CS3. Paso a Paso Insertar la fecha última actualización
Ejercicio paso a paso. Unidad 13. Insertar la Búsqueda

fecha última actualización
Objetivo.
Practicar cómo insertar la fecha de última actualización.
4 Hacer doble clic sobre el documento quienes.htm, que aparece en el panel Archivos.
5 Situar el cursor a la derecha del texto Fecha última modificación:.
Ir al menú Insertar, opción Fecha. Se abrirá una nueva ventana.
En Formato de día: seleccionar [sin día].
En Formato de hora: seleccionar [sin hora].
En Formato de Fecha: seleccionar 7 Marzo, 1974. Si no aparece este formato, seleccionar el más parecido.
Activar la casilla Actualizar automáticamente al guardar.
Hacer clic sobre el botón Aceptar.
Pulsar fuera de la fecha para que se aplique el último cambio.

Curso de Adobe Dreamweaver CS3. Paso a Paso Insertar la fecha última actualización
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Insertar una capa
Ejercicio paso a paso. Unidad 14. Insertar una Búsqueda

capa
Objetivo.
Practicar las operaciones que hay que realizar para insertar una capa y modificar sus propiedades.
4 Haz doble clic sobre el documento marcos.htm, que aparece en el panel Archivos.
6 Sitúa el cursor debajo de la imagen de sustitucion de email que habíamos incluido en el marco izquierdo.
8 Elige la opción Objetos de diseño, luego elige la opción Div PA.
9 Sitúa el cursor dentro de la capa.
10 Haz clic sobre el botón Alinear al centro .
11 Escribe el texto no olvides mandarnos tus dudas y sugerencias.
12 Selecciona la capa pulsando sobre el cuadrado blanco que aparece en su esquina superior-izquierda.
Curso de Adobe Dreamweaver CS3. Paso a Paso Insertar una capa
13 En ID de capa, del inspector de propiedades, escribe sugerencia.
14 En Iz escribe 60px.
15 En Sup escribe 495px.
16 En An escribe 150px.
17 En Al escribe 59px.
18 Pulsa fuera de la capa para que deje de estar seleccionada y se le aplique el último cambio.
19 Comprueba que la capa ha quedado debajo de la imagen de sustitución, si no haz clic en el cuadrado blanco de
su esquina superior-izquierda y arrastralo hasta que quede centrado en el marco y bajo la imagen de email.
20 En Vis selecciona hidden.
21 Pulsa fuera de la capa para que deje de estar seleccionada y se le aplique el último cambio.
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Crear comportamiento
Ejercicio paso a paso. Unidad 15. Crear Búsqueda

comportamiento
Objetivo.
Practicar las operaciones que hay que realizar para crear comportamientos para mostrar y ocultar capas.
6 Si no aparece el panel Comportamientos, ábrelo a través del menú Ventana, opción Comportamientos.
7 Haz clic sobre la imagen de sustitución de email para seleccionarla.
8 Haz clic sobre el botón del panel Comportamientos.
9 Elige la opción Mostrar-Ocultar elementos.
10 En Elementos: selecciona la capa sugerencia, que es la única que aparecerá en la lista, al ser la única capa
del documento.
11 Haz clic sobre el botón Mostrar.

Curso de Adobe Dreamweaver CS3. Paso a Paso Crear comportamiento
12 Haz clic sobre el botón Aceptar. En el panel Comportamientos aparecerá el nuevo comportamiento.
13 Haz clic sobre el comportamiento en el panel.
14 Haz clic sobre el botón , que aparece a la derecha del evento.
15 Selecciona el evento onMouseOver.
16 Repite los pasos del 7 al 14
17 Selecciona el evento onMouseOut.
19 Visualiza la página en tu navegador y comprueba los comportamientos que has definido.
20 Abre el documento marcos.htm en un navegador, y compara la página que has creado con la que aparece si
pulsas aquí.
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Crear una hoja de estilo

hoja de estilo
Objetivo.
Practicar las operaciones que hay que realizar para crear una hoja de estilo.
2 Abre el sitio libreria.
3 Crea un nuevo archivo CSS desde Archivo → Nuevo → Página básica → CSS.
4 Guárdalo (CTRL + S) y llámalo estilo_libreria.css.
Ya hemos terminado, en los próximos ejercicios añadiremos estilos a esta hoja.
Para que el estilo se aplique sobre un documento deberemos vincularlo.
5 Abre el archivo libreria.dwt.php que se encuentra en la carpeta de ejercicios del curso.
6 En el panel Propiedades despliega el campo Estilo y selecciona la opción Adjuntar hoja de estilos....
7 Busca el archivo estilo_libreria.css que acabamos de crear y selecciona la opción Vincular.
8 Copia la carpeta imagenes que encontrarás en la carpeta ejerciciosdream/libreria del curso y pégala en tu
sitio libreria.
9 Ahora pega la siguiente estructura que vamos a formatear con los estilos CSS.

En la vista Código coloca inmediatamente después de la etiqueta body el siguiente código:
<div id="cabecera">
<a href="../index.php">eLibrería aulaClic</a>
<br /><br /><br /><br /><br /><br />
Libros Nuevos <img src="../imagenes/nuevos.gif" alt="Nuevos" width="21" height="27" align="absmiddle" />
<br />
Libros Usados <img src="../imagenes/usados.gif" alt="Usados" width="21" height="27" align="absmiddle" />
</div>
Si lo prefieres puedes desde la vista Diseño:
escribir el texto Librería aulaClic

asociarle el vínculo ../index.php
pulsar 6 veces May+Enter
escribir el texto Libros Nuevos
insertar a continuación la imagen nuevos.gif que se encuentra en la carpeta imagenes del sitio
escribir el texto Libros Usados
insertar a continuación la imagen usados.gif que se encuentra en la carpeta imagenes del sitio
seleccionar todo lo que acabas de añadir
ejecutar la opcion Insertar → Objetos de diseño → Etiqueta Div
escribe cabecera en el cuadro Id:
Aceptar
Estas operaciones te tienen que generar el mismo código.
Ahora modificaremos el menú.
10 Selecciona la línea Mostrar Ofertas Catálogo Críticas Buscar:. Asóciale una etiqueta div con Id menu.
11 Selecciona la palabra Mostrar (asegúrate de seleccionar también su enlace) y asígnale el estilo item.
12 Repite el paso 11 para cada una de las palabras de la línea.
El código generado será este:
<div id="menu">
<script language="JavaScript1.2">mmLoadMenus();</script>
<span class="item"><a href="#" name="link2" id="link1" onmouseover="MM_showMenu

(window.mm_menu_0622115354_0,-12,26,null,'link2')" onmouseout="MM_startTimeout();">Mostrar</a></span>
<span class="item"><a href="../ofertas.php">Ofertas</a></span>
<span class="item"><a href="../catalogo.php">Catálogo</a></span>
<span class="item"><a href="../criticas.php">Críticas</a></span>
<span class="item"><a href="../buscar.php">Buscar:</a></span>
</div>
13 Luego insertaremos el código del cuerpo de la página aquí insértalo directamente en la vista Código copiando
y pegando.:
<div class="contenedor">
<div id="anuncios">
<div class="item">
<a href="../usados.php"><img src="../imagenes/anuncio_largo.gif" alt="" border="0"></a>
</div>
<div class="item">

</script>

<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>
<div class="item">
<a href="../catalogo.php"><img src="../imagenes/anuncio_corto.gif" alt="" border="0"></a>
</div>
<div class="item">

</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>
</div>
<div id="contenido">
contenido
</div>
</div>
Hemos creado la parte que contendrá la publicidad y el contenido más importante de la página.
14 Selecciona la línea donde puedes leer contenido e inserta ahí una zona editable de plantilla (Insertar → Objetos
de plantilla → Región editable).
Quedará algo así:
contenido
15 Para terminar introduce este código al final.
Con él dibujaremos el pie de página.
<div id="pie">
Esto es un proyecto de aulaClic.com
<br />
Copyright © aulaClic S.L. 2006
</div>
16 Cierra todos los archivos guardando los cambios.
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Utilizando pseudo-elementos y clases
Ejercicio paso a paso. Unidad 17. Utilizando Búsqueda

pseudo-elementos y clases
Objetivo.
Practicar el uso de pseudo-elementos y pseudo-clases.
3 Abre el archivo estilo_libreria.css.
4 Añade el siguiente estilo para que los enlaces dentro de una clase item que se encuentren en un bloque con id
menu no muestren subrayado y sean de color negro.
Para el evento hover (cuando el ratón se encuentra sobre él) haremos que vuelva a aparecer el subrayado:
#menu .item a {
text-decoration: none;
color: black;
#menu .item a:hover {
text-decoration: underline;
color: black;

Curso de Adobe Dreamweaver CS3. Paso a Paso Utilizando pseudo-elementos y clases
5 Añade el siguiente estilo para que la primera letra del contenido de una clase item en un bloque con id menu
se muestre en negrita:
#menu .item:firstletter {
font-weight: bold;
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Controles de Fuente
Ejercicio paso a paso. Unidad 17. Controles de Búsqueda

Fuente
Objetivo.
Practicar el uso de controles de fuente y formato del texto.
4 Añade el siguiente estilo para que toda la página muestre una fuente de tipo Verdana (en caso de que no
estuviese instalada se buscarían por este orden las siguientes fuentes: Arial, Helvetica y finalmente cualquiera que
entre dentro de la categoría sans-serif).
También haremos que su tamaño sea de 12 píxeles:
body {
font-size: 12px;
5 Para el texto dentro del bloque con id menu aumentaremos el tamaño de la fuente a 13 píxeles y haremos que
las letras estén un poco más separadas:
#menu {

font-size: 13px;
letter-spacing: 1px;
6 Más tarde introduciremos un formulario en el menú. Queremos que el elemento input de cualquier formulario tenga
un tamaño de fuente de 9 píxeles:
input {
font-size: 9px;
7 En el bloque con id contenido queremos que haya una clase llamada primera_palabra que sea de 16 píxeles
de tamaño y en negrita:
#contenido .primera_palabra {
font-size: 16px;
font-weight: bold;
8 Crea un estilo para una clase llamada precio que tenga un tamaño de fuente de 16 píxeles, en negrita y de color rojo:
.precio {
font-size: 16px;
color: red;
font-weight: bold;
9 Finalemente haremos que el bloque con id pie tenga un tamaño de fuente de 9 píxeles.
#pie {
font-size: 9px;
10 Guarda los cambios.
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Controles de Ratón

Ratón
Objetivo.
Practicar el uso de controles de ratón.
Debido a un error en la codificación del comportamiento de menu emergente, los elementos de la lista no muestran
el puntero de enlace cuando posicionas el ratón sobre ellos en Mozilla Firefox.
4 Lo arreglaremos añadiendo el siguiente estilo:
#menu #menuFg0 {
cursor: pointer;

Curso de Adobe Dreamweaver CS3. Paso a Paso Controles de Ratón
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Controles de Fondo

Fondo
Objetivo.
Practicar el uso de controles de fondo.
4 Al estilo que le aplicamos al body en ejercicios anteriores le añadiremos una nueva propiedad donde
estableceremos un fondo de imagen que se repita en el eje horizontal y se posicione en la parte inferior de la página:
body {
font-size: 12px;
background: url(imagenes/fondo.gif) repeat-x bottom;
5 Añadiremos un nuevo estilo para que el bloque con id cabecera muestre una imagen de fondo, que no se repita
y además estableceremos que el fondo sea de color blanco:
#cabecera {
background-image: url(imagenes/cabecera.jpg);
Curso de Adobe Dreamweaver CS3. Paso a Paso Controles de Fondo
background-color: white;
6 Finalmente modificaremos el estilo del bloque con id menu para añadirle un fondo de imagen que se repita a lo
largo del eje horizontal:
#menu {
font-size: 13px;
background: url(imagenes/fondo_menu.gif) repeat-x;
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Controles de Márgenes y Borde

Márgenes y Borde
Objetivo.
Practicar el uso de controles de márgenes y borde.
4 Para que en Internet Explorer se muestre todo el contenido centrado añadiremos esta propiedad a la etiqueta body:
body {
font-size: 12px;
background: url(imagenes/fondo.gif) repeat-x bottom;
text-align: center;
5 Para que en el resto de navegadores se muestren los contenidos centrados añadiremos lo siguiente en los bloques
con id cabecera, menu y pie.

La clase contenedor también deberá ir centrada, así que también deberemos aplicarle las mismas propiedades:
#cabecera {
margin-left: auto;
margin-right: auto;
text-align: right;
#menu {
font-size: 13px;
margin-left: auto;
margin-right: auto;
text-align: left;
.contenedor {
margin-left: auto;
margin-right: auto;
text-align: left;
#pie {
font-size: 9px;
margin-left: auto;
margin-right: auto;
Observa como en los casos en los que queremos que el texto no esté centrado deberemos indicarlo con la
propiedad text-align.
Recuerda que toda la página heredará el valor center que se estableció en el body.
6 Al bloque con id menu le aplicaremos unas cuantas propiedades para que tenga una separación exterior en la
parte inferior de 20 píxeles.
También estableceremos el padding de todos los lados (la separación de los bordes con el contenido).
Y crearemos dos bordes, uno en la parte superior de color gris y de 1 píxel de ancho, el otro de color rojo y con
5 píxeles de ancho.
#menu {
font-size: 13px;
margin-left: auto;
margin-right: auto;
text-align: left;

margin-bottom: 20px;
border-top: 1px solid gray;
border-bottom: 5px solid #E35331;
7 También estableceremos los paddings para los elementos de clase item dentro del bloque con id menu:
#menu .item {
8 El bloque con id anuncios deberá tener un margen inferior de 15 píxeles.
También le añadiremos unos paddings a izquierda y derecha.
Como se encuentra dentro de un bloque de clase contenedor se verá afectado por el alineamiento a la izquierda,
lo centraremos de nuevo al centro utilizando text-align.
#anuncios {
padding-right: 5px;
padding-left: 5px;
text-align: center;
9 Separaremos los elementos de clase item dentro del bloque de anuncios con un margen inferior de 10 píxeles:

#anuncios .item {
10 Al bloque con id contenido le daremos un padding izquierdo y superior:
#contenido {
padding-left: 5px;
padding-top: 15px;
11 Más tarde crearemos un bloque con id listado, vamos a configurarlo para que tenga un margen superior de
30 píxeles y un padding inferior también de 30.
#listado {
margin-top: 30px;
12 La clase item dentro del bloque con id listado deberá tenter un margen izquierdo de 60 píxeles.
#listado .item {
margin-left: 60px;
13 La clase borde_inferior deberá tener un borde inferior de 1 píxel de ancho de color negro:
.borde_inferior {

border-bottom: 1px solid black;
14 Finalmente añadiremos al bloque con id pie un margen inferior de 15 píxeles, unos paddings superior e inferior
y un borde superior rojo de 5 píxeles de ancho:
#pie {
font-size: 9px;
margin-left: auto;
margin-right: auto;
padding-top: 10px;
border-top: 5px solid #E35331;
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Controles de Bloque

Bloque
Objetivo.
Practicar el uso de controles de bloque.
4 Al bloque con id cabecera le daremos un ancho y un alto para que se ajuste a la imagen de fondo:
#cabecera {
text-align: right;
margin-left: auto;
margin-right: auto;
width: 780px;
height: 150px;
5 Al bloque con id menu le daremos un ancho y estableceremos que su contenido no puede saltar de línea:
#menu {
font-size: 13px;
margin-left: auto;
margin-right: auto;
text-align: left;
border-top: 1px solid gray;
border-bottom: 5px solid #E35331;
white-space: nowrap;
width: 780px;
6 Como luego insertaremos un formulario en el menu, le vamos a dar la propiedad inline para que se muestre como
un elemento en línea y no cree un salto de línea:
#menu form {
display: inline;

7 También le daremos un ancho determinado al bloque con la clase contenedor:
.contenedor {
margin-left: auto;
margin-right: auto;
text-align: left;
width: 780px;
8 El bloque con id anuncios tendrá un ancho de 125 píxeles y estará flotando a la derecha:
#anuncios {
padding-right: 5px;
padding-left: 5px;
text-align: center;
width: 125px;
float: right;
9 Al bloque con id contenido le daremos un ancho de 635 píxeles para que todo su contenido se encuentre a
la izquierda del bloque de anuncios:
#contenido {

padding-left: 5px;
padding-top: 15px;
width: 635px;
10 Al bloque con id pie le daremos un acho determinado y estableceremos la propiedad clear para que no
tenga problemas de solapamiento con el float de los anuncios:
#pie {
font-size: 9px;
margin-left: auto;
margin-right: auto;
padding-top: 10px;
border-top: 5px solid #E35331;
width: 780px;
clear: both;
11 Finalmente crearemos dos últimas clases img_item, salto_linea y alto_10 que utilizaremos más adelante.
La primera simplemente crea un flotamiento a la izquierda.
La segunda limpia el flotamiento y establecerá una separación de 15 píxeles.

La tercera deberá ser de 10 píxeles de altura.
.img_item {
float: left;
.salto_linea {
clear: left;
height: 15px;
.alto_10 {
height: 10px;
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Instalación de WAMP
Ejercicio paso a paso. Unidad 19. Instalación de Búsqueda

WAMP
Objetivo.
Practicar las operaciones necesarias para instalar un servidor local utilizando el paquete WAMP.
1 Sigue las instrucciones que hemos explicado en la teoría para instalar WAMP en tu ordenador. El
programa wamp5_1.6.1.exe puedes bajártelo gratis desde sourceforge.Ten en cuenta que van apareciendo
nuevas versiones y quizás haya algunas diferencias con la versión que hemos explicado.
2 En el punto en el que debes elegir una carpeta donde se localizará el localhost elige tu carpeta de ejercicios.
3 Copia los archivos de la carpeta C:\Archivos de programa\wamp\www y pégalos en tu carpeta de ejercicios.
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Instalación de WAMP

Curso de Adobe Dreamweaver CS3. Paso a Paso Crear Servidor de Prueba

Servidor de Prueba
Objetivo.
Practicar las operaciones necesarias para crear un Servidor de Prueba.
3 Selecciona el sitio Libreria en el panel Archivos.
4 Haz clic en Sitio → Administrar sitios....
5 Selecciona el sitio Libreria y pulsa el botón Editar.
6 En el cuadro de diálogo que se abrirá seleciona la pestaña Avanzada.
7 Selecciona la categoría Sitio de pruebas.
8 En el desplegable Modelo de servidor selecciona PHP MySQL.
9 En el desplegable Acceso selecciona Local/red.
10 Como hemos definido nuestra carpeta de ejercicios como localhost no tendremos que crear copias para probar
los archivos. Así que haz clic en el botón y busca la carpeta Libreria que se encuentra dentro de tu carpeta
de ejercicios. Selecciónala y pulsa Seleccionar.
11 Marca la casilla siguiente.
12 En el campo Prefijo de URL escribe http://localhost/Libreria.
13 Pulsa Aceptar para guardar los cambios.

Curso de Adobe Dreamweaver CS3. Paso a Paso Crear Servidor de Prueba
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Crear una base de datos

Base de datos
Objetivo.
Practicar las operaciones necesarias para crear una Base de Datos.
1 Si WAMP no se está ejecutando, lánzalo para realizar este ejercicio. Para ejecutar el programa sólo tienes que
hacer clic en Inicio, Todos los programas, WampServer y finalmente en Start WampServer.
2 Si el servicio de MySQL no se está ejecutando, lánzalo para poder tener acceso a las bases de datos.
3 Haz clic izquierdo sobre el icono de WAMP en el área de notificación y selecciona la opción phpMyAdmin.
4 Se abrirá una ventana, escribe bd_libreria 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.
Curso de Adobe Dreamweaver CS3. Paso a Paso Crear una base de datos
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Crear una Tabla

Tabla
Objetivo.
Practicar las operaciones necesarias para crear una Tabla.
1 Si WAMP no se está ejecutando, lánzalo para realizar este ejercicio.
4 Se abrirá una ventana, en el desplegable del menú de la izquierda selecciona la base de datos bd_libreria.

Curso de Adobe Dreamweaver CS3. Paso a Paso Crear una Tabla
5 Para crear una nueva tabla en la sección Crear nueva tabla en la base de datos escribe Libros en Nombre y 7
en Campos.
6 Pulsa el botón Continuar para seguir.
Ahora vamos a configurar los campos.
7 Al primer campo lo llamaremos Id, de tipo INT, con extra auto_increment y Primario ( ).
8 Al segundo lo llamaremos ISBN, de tipo VARCHAR, con longitud 10 y Único ( ).
9 Al tercero lo llamaremos Titulo, de tipo VARCHAR y con longitud 100.
10 Al cuarto lo llamaremos Autor, de tipo VARCHAR y con longitud 30.
11 Al quinto lo llamaremos Editorial, de tipo VARCHAR y con longitud 30.
12 Al sexto lo llamaremos Precio y de tipo FLOAT.
13 Al último lo llamaremos Usado, de tipo BOOL y con valor 0 como Predeterminado.
14 Haz clic en Grabar para guardar los cambios y la tabla ya estará lista para utilizarse.
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Importar datos a una tabla
Ejercicio paso a paso. Unidad 19. Importar Búsqueda

Datos a una Tabla
Objetivo.
Practicar las operaciones necesarias para importar datos a una Tabla.
4 Se abrirá una ventana, en el desplegable del menú de la izquierda selecciona la base de datos bd_libreria.

Curso de Adobe Dreamweaver CS3. Paso a Paso Importar datos a una tabla
5 Haz clic en la opción Importar que encontrarás en el menú horizontal en la parte superior de la ventana:
6 En la siguiente ventana pulsa el botón Examinar y busca el archivo libros-latin1.txt que se encuentra en la carpeta
de ejerciciosdream/libreria.
7 El archivo se encuentra codificado en latin1 así que selecciónalo en la lista de Juego de caracteres del archivo.
8 Pulsa el botón Continuar.
9 Asegúrate de que se han introducido datos en la tabla pulsando la opción Examinar de la tabla Libros.
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Asignar Privilegios
Ejercicio paso a paso. Unidad 19. Asignar Búsqueda

Privilegios
Objetivo.
Practicar las operaciones necesarias para crear un usuario y asignarle privilegios.
4 Se abrirá la ventana principal haz clic sobre .
5 Haz clic en el vínculo Agregar un nuevo usuario.
6 En la nueva ventana escribe librero en Nombre de usuario.
7 En Servidor escribe localhost.
8 En Contraseña escribe aulaclic.
9 En Debe volver a escribir escribe aulaclic de nuevo.
10 Pulsa el botón Continuar para crear el usuario.
11 En la nueva pantalla desplázate hacia abajo hasta encontrar:

Curso de Adobe Dreamweaver CS3. Paso a Paso Asignar Privilegios
Aquí selecciona la base de datos bd_libreria en el desplegable y pulsa Continuar para modificar los privilegios de
este usuario sobre esta base de datos.
12 Selecciona los privilegios SELECT, INSERT, UPDATE y DELETE. Si te das cuenta están 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 Administración 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.
13 Pulsa Continuar para asignarle al usuario esos privilegios y habremos terminado.
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Creando una Conexión
Ejercicio paso a paso. Unidad 20. Creando una Conexión Búsqueda
Objetivo.
Practicar las operaciones necesarias para crear una conexión a una base de datos.
2 Si los servicios de MySQL o Apache no se están ejecutando, lánzalos para poder tener acceso a las bases de datos y
a la ejecución de archivos PHP.
3 Ejecuta Dreamweaver y abre el sitio libreria, vamos a trabajar sobre él.
4 Abre el panel Bases de Datos con la combinación de teclas CTRL + MAYUS + F10 o desde el menú Ventana
→ Bases de datos.
5 Haz clic en el botón y selecciona Conexión MySQL para crear una nueva conexión:
6 En Nombre de conexión escribe liberia_aulaclic.
7 En Servidor MySQL escribe localhost.
8 En Nombre de usuario escribe librero.
10 En Base de datos selecciona bd_libreria.
11 Pulsa Aceptar para crear la conexión.
Verás como en el panel Base de datos aparece la nueva conexión libreria_aulaclic.

Curso de Adobe Dreamweaver CS3. Paso a Paso Creando una Conexión
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Crear un Recordset
Ejercicio paso a paso. Unidad 20. Crear un Recordset Búsqueda
Objetivo.
Practicar las operaciones necesarias para crear un recordset.
4 Abre un archivo dinámico nuevo basado en la plantilla libreria.dwt.php (Archivo → Nuevo, pestaña Plantillas).
5 Guárdalo como nuevos.php.
6 Haz clic en el botón para crear un nuevo juego de registros.
7 En el cuadro de diálogo que se abrirá rellena los datos de la siguiente forma: en Nombre escribe listado_libros.
8 En Conexión selecciona libreria_aulaclic.
9 En Tabla selecciona libros.
10 Deja el resto como está y pulsa el botón Prueba para ver una previsualización de qué registros componen
el recordset.
11 Haz clic en el botón Aceptar para crear el juego de registros.
12 Cierra el documento guardando los cambios.
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Crear un Recordset

Curso de Adobe Dreamweaver CS3. Paso a Paso Texto Dinámico
Ejercicio paso a paso. Unidad 20. Texto Dinámico Búsqueda
Objetivo.
Practicar las operaciones necesarias para insertar texto dinámico y modificar sus propiedades.
4 Abre el archivo nuevos.php.
5 En el área de contenido que podemos modificar introduce la siguiente línea: Listado de libros nuevos: e
introduce tres saltos de línea (SHIFT + ENTER).
6 Luego deberás insertar una tabla con un relleno de celda de 5.
7 La tabla deberá tener 3 filas y 4 columnas.
8 Selecciona la primera columna y dale un ancho de 197 píxeles.
9 Selecciona la segunda columna y dale un ancho de 142 píxeles.
10 Selecciona la tercera columna y dale un ancho de 156 píxeles.
11 Por último, selecciona la última columna y dale un ancho de 100 píxeles.
12 Selecciona todas las celdas de la segunda fila y combínalas utilizando el botón en el panel de Propiedades.
13 Haz lo mismo para la tercera fila.
14 Selecciona la cuarta celda de la primera fila y dale como estilo la clase precio.
15 Selecciona la segunda y tercera fila y dales la clase alto_10.
16 Ahora vamos a añadir una segunda clase a la segunda fila, como Dreamweaver sólo nos permite seleccionar
una, deberemos ir a la vista de Código para editarlo desde allí (recuerda el tema de CSS avanzado).
Localiza la segunda fila que tendrá este aspecto:
<td colspan="4" class="alto_10"></td>
Añádele la clase borde_inferior, dejándola así:
<td colspan="4" class="alto_10 borde_inferior"></td>

Curso de Adobe Dreamweaver CS3. Paso a Paso Texto Dinámico
17 Vuelve a la vista de Diseño y abre el panel Vinculaciones (CTRL + F10).
18 Despliega el juego de registros listado_libros y arrastra el elemento Titulo a la primera celda de la primera fila de
la tabla.
19 Arrastra el elemento Autor a la segunda celda.
20 Arrastra el elemento Editorial a la tercera celda.
21 Arrastra el elemento Precio a la cuarta celda.
22 Selecciona el elemento Autor de la página y ponlo en cursiva pulsando el botón en el panel de Propiedades.
23 Abre el panel Comportamientos del servidor (CTRL + F9) y haz doble clic sobre el elemento Texto
dinámico {listado_libros.Titulo} para modificar sus propiedades.
24 En el cuadro de diálogo que se abrirá selecciona el valor May.-min. - Mayús. del desplegable Formato para
mostrar todo el texto en mayúsculas.
25 Pulsa el botón de vista LiveData y verás como se muestra el primer registro. (También puedes visualizar
los datos desde el localhost pulsando la tecla F12).
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Repetición de Texto Dinámico
Ejercicio paso a paso. Unidad 20. Repetición de Texto Dinámico Búsqueda
Objetivo.
Practicar las operaciones necesarias para crear repeticiones de texto dinámico.
5 Ve a la vista de Código y selecciona las tres filas de la tabla que creamos en el ejercicio anterior.
Vamos a aplicar una repetición sobre este bloque, haremos que se repita 7 veces (para que muestre 7
registros seguidos).
6 Pulsa el botón Región repetida en la barra de Datos.
7 En el cuadro de diálogo que se abre escribe 7 en el cuadro de texto y pulsa Aceptar.
8 Si previsualizas el aspecto de la página en la vista LiveData o pulsas F12 para ver el resultado en el servidor
de pruebas verás que ahora el listado de registros a aumentado mostrando 7, una raya negra separa cada uno de ellos.
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Repetición de Texto Dinámico

Curso de Adobe Dreamweaver CS3. Paso a Paso Ordenación de un Recordset
Ejercicio paso a paso. Unidad 20. Ordenación de un Recordset Búsqueda
Objetivo.
Practicar las operaciones necesarias para ordenar los registros de un Recordset.
5 Abre el panel Comportamientos del servidor y haz doble clic sobre el elemento Juego de registros (listado_libros).
6 En el cuadro de diálogo que se abrirá, selecciona Titulo en el desplegable Ordenar:.
7 En el desplegable de la derecha selecciona Ascendente.
8 Acepta el cuadro de diálogo y si visualizas la página en modo vista LiveData verás como los registros ahora
salen ordenados alfabéticamente por su título.
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Ordenación de un Recordset

Curso de Adobe Dreamweaver CS3. Paso a Paso Filtrado de Registros
Ejercicio paso a paso. Unidad 20. Filtrado de Registros Búsqueda
Objetivo.
Practicar las operaciones necesarias para filtrar los registros de un recordset.
4 Copia el archivo nuevos.php seleccionándolo en el panel Archivos y pulsando CTRL + C.
5 Renómbralo seleccionando el nuevo archivo y pulsando F12 y llamalo usados.php.
6 Repite los pasos 4 y 5 para crear una copia del archivo nuevos.php llamada ofertas.php.
7 Abre los tres archivos.
8 En el archivo ofertas.php elimina las líneas: Listado de libros nuevos:<br /><br /><br />.
9 En el archivo usados.php cambia la palabra nuevos por usados en la línea anterior.
10 En el archivo nuevos.php abre el panel Comportamientos del servidor (CTRL + F9) y haz doble clic sobre
el elemento Juego de registros (listado_libros).
11 Se abrirá un cuadro de diálogo, modifica el Nombre listado_libros por libros_nuevos.
12 En Filtro selecciona el campo Usado.
13 En el desplegable de abajo, selecciona Valor introducido y escribe 0 en el cuadro de texto de su derecha.
Debería quedarte algo como Filtro Usado = Valor introducido 0.
Hemos creado un filtro para que se muestren aquellos registros con valor 0 en su campo Usado, serán aquellos que
no están usados.
14 Pulsa el botón Prueba para asegurarte y guarda los cambios haciendo clic en Aceptar para salir.
Dreamweaver lanzará la herramienta Buscar y Reemplazar para asegurarte de que ha cambiado el nombre del
juego de registros en el código de la página, puedes pulsar el botón Buscar todos para asegurarte, pero bastará
con que cierres el cuadro de diálogo.

Curso de Adobe Dreamweaver CS3. Paso a Paso Filtrado de Registros
15 Cierra todos los documentos guardando los cambios.
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Paginación de Registros
Ejercicio paso a paso. Unidad 20. Paginación de Registros Búsqueda
Objetivo.
Practicar las operaciones necesarias para crear paginaciones de registros.
4 Abre el archivo nuevos.php y en la vista de Código, bajo la tabla del listado de registros crea una tabla con
tres celdas, han de tener cada una un 33% de ancho.
La primera debe tener el alineamiento a la izquierda, la segunda al centro y la tercera a la derecha.
5 Coloca el cursor en la primera celda de la nueva tabla.
6 Haz clic en la opción Mover a la página anterior del desplegable de opción de paginación:
7 En la celda se añadirá el texto Anterior.
8 Coloca el cursor en la tercera celda.
9 Ahora selecciona la opción Mover a la siguiente página.
10 En la celda se añadirá el texto Siguiente.
11 Pulsa F12 para ver el resultado de la página desde el localhost, verás como puedes avanzar por los registros
hasta mostrarlos todos.

Curso de Adobe Dreamweaver CS3. Paso a Paso Paginación de Registros
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Recuento de Registros
Ejercicio paso a paso. Unidad 20. Recuento de Registros Búsqueda
Objetivo.
Practicar las operaciones necesarias para insertar elementos de recuento de registros.
5 En la tabla de abajo selecciona la celda del centro para colocar el cursor allí.
6 Haz clic en la opción Registro final del listado de opciones de recuento de registros en la barra Datos.
7 Se añadira el texto {libros_nuevos.LastRecord} a la celda.
8 Escribe de a su derecha.
9 Ahora selecciona la opción Total de registros en el listado de recuento de registros anterior.
10 Deberá quedarte algo como: {libros_nuevos.LastRecord} de {libros_nuevos.TotalRecords}
11 Prueba la página pulsando F12 y verás como ahora además de los enlaces de avance y retroceso se
muestra también el número del último registro junto al total.

Curso de Adobe Dreamweaver CS3. Paso a Paso Recuento de Registros
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Ocultar/Mostrar Regiones
Ejercicio paso a paso. Unidad 20. Ocultar/Mostrar Regiones
Objetivo.
Practicar las operaciones necesarias para ocultar o mostrar regiones en una página.
5 Selecciona el texto Anterior, vamos a ocultarlo en la primera página.
6 Haz clic en la opción Mostrar si no es la primera página en el listado de mostrar región en la barra Datos.
7 Ahora selecciona el texto Siguiente, lo vamos a ocultar en la última página.

Curso de Adobe Dreamweaver CS3. Paso a Paso Ocultar/Mostrar Regiones
8 Selecciona la opción Mostrar si no es la última página del listado de mostrar región anterior.
9 Puedes visualizar los cambios que hemos realizado pulsando F12 para lanzar el localhost.
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Enlaces con Parámetros
Ejercicio paso a paso. Unidad 20. Enlaces con Parámetros Búsqueda
Objetivo.
Practicar las operaciones necesarias para crear enlaces con parámetros.
5 Selecciona el elemento {libros_nuevos.Titulo} en la primera celda de la primera tabla.
6 En el panel Propiedades escribe en el campo Vínculo lo siguiente: comprar.php?id=.
7 Ahora abre el panel Vinculaciones (CTRL + F10) y ve a la vista de Código.
8 Arrastra el elemento Id al lado del texto que hemos escrito. Deberá quedarte algo como esto:
<a href="comprar.php?id=<?php echo $row_libros_nuevos['Id']; ?>">
<?php echo strtoupper($row_libros_nuevos['Titulo']); ?></a>
Hemos creado un enlace a una página llamada comprar.php y le hemos pasado un parámetro id con el valor del Id
del registro que se muestre.
Por lo que en cada título de cada libro habrá un enlace diferente que abrirá la página comprar.php con el valor del id
del libro correspondiente.
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Enlaces con Parámetros

Curso de Adobe Dreamweaver CS3. Paso a Paso Filtrar con Parámetros
Ejercicio paso a paso. Unidad 20. Filtrar con Parámetros (I) Búsqueda
Objetivo.
Practicar las operaciones necesarias para crear una un recordset con filtro por parámetro.
Crearemos dos archivos que funcionen con filtros de parámetros.
Primero crearemos un archivo comprar.php.
4 Abre un archivo dinámico nuevo basado en la plantilla libreria.dwt.php (Archivo → Nuevo, pestaña Plantillas).
5 Guárdalo como comprar.php.
7 En el cuadro de diálogo que se abrirá rellena los datos de la siguiente forma: en Nombre escribe detalle_libro.
10 Modifica la opción Filtro para que pueda leerse: Id = Parámetro URL id.
Hemos creado un filtro que tomará el valor del parámetro id en la URL y lo comparará con el valor del campo Id.
11 En la zona donde puedes incluir contenido añade un bloque div (Insertar → Objetos de diseño → Etiqueta
DIV), dale la clase detalle.
12 Coloca el cursor dentro del bloque y inserta la imagen imagenes/item.gif, dale la clase img_item.
13 Modifica el campo Origen de la imagen desde el panel Propiedades arrastrando el elemento Usado desde el
panel Vinculaciones para que pueda leerse:
imagenes/item<?php echo $row_detalle_libro['Usado']; ?>.gif
14 Inserta el elemento Titulo arrastrándolo desde el panel Vinculaciones y ponlo en negrita.

http://www.aulaclic.es/dreamweavercs3/epp_20_8_2_1.htm (1 de 2) [10/02/2008 20:08:03]
15 Haz doble clic en el elemento en el panel Comportamientos del servidor y cambia su formato a Poner
en mayúsculas.
16 Inserta un salto de línea (CTRL + ENTER).
17 Inserta el elemento Autor arrastrándolo desde el panel Vinculaciones y ponlo en cursiva.
19 Inserta el elemento Editorial arrastrándolo desde el panel Vinculaciones.
21 Escribe ISBN: e inserta el elemento ISBN arrastrándolo desde el panel Vinculaciones.
22 Inserta dos saltos de línea (CTRL + ENTER).
23 Inserta el elemento Precio arrastrándolo desde el panel Vinculaciones.
24 Escribe € a continuación, selecciónalo todo y aplícale la clase precio.
25 Colócate fuera del bloque div e inserta tres saltos de línea (CTRL + ENTER).
Como puedes ver, hemos incluido un bloque div donde hemos escrito el contenido del registro del recordset.
Presta especial atención a la imagen, en el campo Origen hemos colocado lo siguiente:
"imagenes/item<?php echo $row_detalle_libro['Usado']; ?>.gif"
Esto formará la ruta de una imagen que será un archivo u otro dependiendo del valor en el campo Usado del registro.
Debido a que este campo puede tomar los valores 0 ó 1 las imágenes que se podrían cargar serían item0.gif o
item1.gif.
26 Para comprobar que funciona correctamente deberás pulsar la tecla F12 para copiar el archivo al servidor de pruebas.
Verás que el archivo no muestra casi nada porque no ha recibido ningún valor en el parámetro Id.
27 Ahora visualiza en tu navegador la página nuevos.php
28 Haz clic en alguno de los títulos, recuerda que en el ejercicio anterior enlazamos cada título con la página
comprar.php pasando como parámetro el Id del libro.
Ahora se cargará el archivo comprar.php mostrando el detalle del libro que hemos seleccionado (fíjate en el
parámetro de la URL). Y fíjate también en la imagen del libro, muestra siempre la imagen del libro nuevo.
Sigue con el ejercicio...

Septiembre - 2007.

Ejercicio paso a paso. Unidad 20. Filtrar con Parámetros (II) Búsqueda
Ahora crearemos un archivo buscar.php.
1 Abre un archivo dinámico nuevo basado en la plantilla libreria.dwt.php (Archivo → Nuevo, pestaña Plantillas)
y guárdalo como buscar.php.
2 En la zona donde puedes incluir contenido añade el siguiente párrafo:
Introduce en la siguiente caja de texto el nombre del título o el autor del libro y nosotros lo buscaremos por ti:
3 Inserta un formulario con nombre formulario a continuación (Insertar → Formulario → Formulario).
4 Coloca el cursor dentro del formulario.
5 Inserta un campo de texto desde el menú Insertar → Formulario → Campo de texto.
6 En el panel de Propiedades escribe buscar como id del Campo de texto.
Así le pasaremos su contenido a la URL en el parámetro buscar.
7 Seleciona el formulario haciendo clic en la etiqueta <form> y cambia el método de POST a GET.
Como ya hemos comentado es necesario hacerlo de esta forma para que el código generado por Dreamweaver
funcione correctamente.
8 También establece como acción buscar.php, es decir, el mismo archivo.
9 Inserta un botón al lado del campo de texto desde el menú Insertar → Formulario → Botón.
10 En el panel Propiedades cambia su propiedad Value a Buscar.
12 Crea un bloque div con id listado (Insertar → Objetos de diseño → Etiqueta DIV).
13 Coloca el cursor dentro del bloque, y escribe:
Su búsqueda de ha devuelto resultados:
Vamos ahora a insertar el título pasado como parámetro.
14 Posiciona el cursor delante de la palabra ha.
15 Selecciona del menú Insertar → Objetos PHP → Variables de URL
Se creará el siguiente código:
<?php $_GET[]; ?>
16 Sólo nos falta indicar el nombre de la variable URL escribiendo 'buscar' dentro de los corchetes; no te olvides de
las comillas simples.
17 Desde la vista Código encierra el código php entre etiquetas <i> para que el título aparezca en cursiva.
El código resultante deberá ser este:
Su búsqueda de <i>'<?php echo $_GET['buscar']; ?>'</i> ha devuelto resultados:
18 Vuelve a la vista de Diseño.
Ahora crearemos un juego de registros para esta página que se cree filtrándose por el texto introducido en la caja
del formulario.
20 En el cuadro de diálogo que se abrirá rellena los datos de la siguiente forma: en Nombre escribe busqueda.
23 Modifica la opción Filtro para que pueda leerse: Titulo = Parámetro URL buscar.
Hemos creado un filtro que tomará el valor del parámetro buscar en la URL y lo comparará con el valor del
campo Titulo.
Ahora insertaremos el total de registros entre las palabras devuelto y resultados.
24 Posiciona el cursor entre las palabras devuelto y resultados.
25 Haz clic en la opción Total de registros de la barra Datos.
La línea quedará así:
Su búsqueda de <i>'<?php echo $_GET['buscar']; ?>'</i> ha devuelto <?php echo

$totalRows_busqueda ?> resultados:
Vamos a crear el listado que se corresponda con el recordset que acabamos de crear.
26 Aún dentro del bloque que hemos creado, crea un bloque div con id item (Insertar → Objetos de diseño →
Etiqueta DIV).
27 Dentro del bloque con id item inserta la imagen imagenes/item.gif.
28 A la imagen asígnale la clase img_item.
29 Arrastra el campo Usado desde el panel Vinculaciones sobre el cuadro origen de las propiedades de la imagen
para que se pueda leer:
imagenes/item<?php echo $row_libros_mas_vendidos['usado']; ?>.gif
30 Luego arrastra desde el panel Vinculaciones el elemento Titulo y colócalo después de la imagen y ponlo en negrita.
31 Haz doble clic sobre él en el panel Comportamientos del Servidor para ponerlo en mayúscula seleccionando
el formato Poner en mayúsculas.
32 Introduce un salto de línea (CTRL + ENTER).
33 Arrastra el elemento Autor desde el panel Vinculaciones y ponlo en cursiva.

35 Arrastra el elemento Editorial desde el panel Vinculaciones.
37 Escribe ISBN: y arrastra el elemento ISBN desde el panel Vinculaciones.
38 Introduce dos salto de línea (CTRL + ENTER).
39 Arrastra el elemento Precio desde el panel Vinculaciones y dale la clase precio.
40 A continuación escribe € y añade la imagen imagenes/compra.gif.
41 La imagen que acabamos de añadir deberá tener la alineación a Texto superior.
42 Enlaza la imagen a comprar.php?id= desde el campo Vínculo del panel Propiedades.
43 Al enlace añadele al final el Id, arrastrándolo desde el panel Vinculaciones.
44 Inserta un bloque DIV (Insertar → Objetos de diseño → Etiqueta DIV), dale el id salto_linea desde el
panel Propiedades.
Vamos a ahora hacer que se muestren cuatro libros por página.
45 Selecciona el bloque item y salto_linea.
46 Selecciona la opción Repetir Región en la barra de Datos.
47 Haz que se repita 4 veces.
Estamos repitiendo el bloque de la información del libro y añadiendo un bloque con un salto de línea para separarlo
del siguiente.
48 Finalmente, y aún dentro del bloque con id listado, inserta una tabla de 3 columas y 1 fila de 100% de ancho.
Las tres columnas tienen que tener un 33% de ancho.
La celda central estará alineada al centro.
La celda de la derecha estará alineada a la derecha.
49 En la primera celda introduce un elemento de navegación Anterior, utiliza la opción Mover a la página anterior de
la barra Datos.
50 Selecciona el elemento Anterior y haz que no se muestre en la primera página haciendo clic en la opción Mostrar
si no es la primera página de la barra Datos.
51 En la tercera celda introduce un elemento de navegación Siguiente, utiliza la opción Mover a la página siguiente
de la barra Datos.
52 Selecciona el elemento Siguiente y haz que no se muestre en la última página haciendo clic en la opción Mostrar
si no es la última página de la barra Datos.
53 Para terminar en la celda central introduce un elemento Registro final seguido del texto " de " y un elemento
Total de Registros.
Te quedará algo así:
<?php echo min($startRow_busqueda + $maxRows_busqueda, $totalRows_busqueda) ?> de <?php

echo $totalRows_busqueda ?>
Ahora haremos que sólo se muestre la información si se han encontrado registros
54 Selecciona todo el contenido que hemos añadido hasta ahora, sin incluir el formulario .
55 Selecciona la opción Mostrar si el juego de registros no está vacío de la barra Datos.
56 Para comprobar que funciona correctamente pulsa la tecla F12 para copiar el archivo al servidor de pruebas.
Verás que el archivo sólo muestra el formulario.
57 Introduce el título de un libro en él.
De momento esta página sólo muestra los resultados para las entradas exactas de nombres de libros, más
adelante cambiaremos eso.
Finalmente vamos a añadir una caja de búsqueda a nuestra plantilla.
1 Abre la plantilla libreria.dwt y en la barra de menú añade al final del todo el siguiente código:
<span class="item"><form action="buscar.php"><input type="text" name="buscar" /></form></span>
Hemos añadido un formulario que ejecutará el archivo buscar.php pasándole un parámetro buscar con el valor
que escribamos en la caja de texto.
2 Guarda la plantilla y aplícala sobre todos los archivos anteriores.
3 Guarda todos los cambios en los archivos abiertos.
4 Selecciona todos los archivos PHP en el panel Archivos y haz clic derecho sobre cualquiera de ellos.
5 Selecciona la opción Vista previa en el Navegador para que se copien al servidor de pruebas.
6 Prueba cómo funciona el formulario del menú.
Recuerda que deberás escribir un título de un libro exacto.
Anterior...
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Utilizar sentencias SQL
Ejercicio paso a paso. Unidad 20. Utilizar sentencias SQL Búsqueda
Objetivo.
Practicar las operaciones necesarias para crear una conexión a una base de datos.
4 Abre el archivo buscar.php. Vamos a modificarlo.
5 Abre el panel Vinculaciones (CTRL + F10) y haz doble clic sobre el elemento juego de registros.
6 Cuando se abra el cuadro de diálogo haz clic sobre el botón Avanzado....
7 En el campo SQL tendrás lo siguiente:
SELECT *
FROM libros
WHERE Titulo = 'colname'
ORDER BY Titulo ASC
Sustituye la tercera línea por:
WHERE Titulo LIKE '%colname%'
Hemos añadido los símbolos %, que indican que antes o después del valor del parámetro de búsqueda puede
ir cualquier otro carácter.
Con LIKE hacemos que la comparación se haga buscando una cadena de carácteres que coincida con el patrón
escrito entre comillas.
8 Pulsa Aceptar y pulsa F12 para probar la página.
Observa que ya no hace falta que introduzcas el título exacto de un libro.
9 Vuelve a hacer doble clic sobre el elemento juego de registros en el panel Vinculaciones.
10 Ahora cambia la tercera línea del cuadro SQL por:
WHERE Titulo LIKE '%colname%' OR Autor LIKE '%colname%'

Hemos modificado la condición existente. Ahora el criterio de búsqueda se comparará en los campos Titulo y Autor
es decir que se obtendrán los libros cuyo título contenga el valor buscado o cuyo nombre de autor contenga el
valor buscado.
11 Pulsa Aceptar y pulsa F12 para probar la página.
Observa que ahora puedes introducir una cadena que se buscará en el título y el autor del libro.
Finalmente crearemos una página de índice, le asignaremos una sentencia SQL especial para que muestre los
libros más vendidos.
1 Abre un archivo dinámico nuevo basado en la plantilla libreria.dwt (Archivo → Nuevo, pestaña Plantillas).
2 Guárdalo como index.php.
4 En el cuadro de diálogo que se abrirá pulsa el botón Avanzado....
5 En Nombre escribe libros_mas_vendidos.
7 En el campo SQL escribe las siguientes líneas:
SELECT Count(compras.Id) AS cuenta, libros.id, libros.titulo, libros.editorial, libros.isbn, libros.precio,

libros.autor, libros.usado
FROM compras RIGHT JOIN libros ON compras.Id_libro=libros.id
GROUP BY libros.id
ORDER BY cuenta DESC
8 Acepta el cuadro de diálogo.
9 En la zona donde puedes incluir contenido añade un párrafo que diga:
eLibrería te ofrece las últimas novedades en lectura. Escoge entre nuestros libros nuevos o usados y
descubre las ofertas que te harán ahorrar hasta un 13% en libros de ocasión.
10 La primera palabra debe ser de clase primera_palabra.
11 Añade un segundo párrafo:
Por la compra de 3 libros te los envíamos a casa GRATIS, no pierdas esta oportunidad. Promoción de
Lectura 10% de descuento en todos los libros usados.
13 Luego vuelve a crear un nuevo párrafo que diga Nuestros libros más vendidos son:, la primera palabra deberá
ser de clase primera_palabra.
Ahora crearemos la parte que mostrará la información de los libros:
14 Inserta un bloque DIV (Insertar → Objetos de diseño → Etiqueta DIV), dale el id listado desde el
panel Propiedades.
15 Sitúa el cursor dentro de este bloque y vuelve a crear otro. A este le daremos el id item.
16 Dentro del bloque con id item inserta la imagen imagenes/item.gif.
17 A la imagen asígnale la clase img_item.
18 Modifica el campo origen para que se pueda leer:
imagenes/item<?php echo $row_libros_mas_vendidos['usado']; ?>.gif
Para ello arrastra el campo Usado desde el panel Vinculaciones.
19 Luego arrastra sobre la página desde el panel Vinculaciones el elemento Titulo y ponlo en negrita.
20 Haz doble clic sobre él en el panel Comportamientos del Servidor para ponerlo en mayúscula seleccionando
el formato Poner en mayúsculas.
22 Arrastra el elemento Autor desde el panel Vinculaciones y ponlo en cursiva.
24 Arrastra el elemento Editorial desde el panel Vinculaciones.
26 Escribe ISBN: y arrastra el elemento ISBN desde el panel Vinculaciones.
27 Introduce dos salto de línea (CTRL + ENTER).
28 Arrastra el elemento Precio desde el panel Vinculaciones y dale la clase precio.
29 A continuación escribe € y añade la imagen imagenes/compra.gif.
30 La imagen que acabamos de añadir deberá tener la alineación a Texto superior.
31 Enlaza la imagen a comprar.php?id= desde el campo Vínculo del panel Propiedades.
32 Al enlace añádele al final el Id del libro arrastrándolo desde el panel Vinculaciones.
33 Inserta un bloque DIV (Insertar → Objetos de diseño → Etiqueta DIV), dale el id salto_linea desde el
panel Propiedades.
34 Selecciona el bloque item y salto_linea y haz que se repita 3 veces, utiliza la opción Repetir Región en la barra
de Datos.
Estamos repitiendo el bloque de la información del libro y añadiendo un bloque con un salto de línea para separarlo
del siguiente.
35 Prueba la página activando la vista LiveData y verás que el contenido de este listado muestra el detalle de los
libros que más aparecen en la tabla de Compras.

Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Estructura de datos de un Blog
Ejercicio paso a paso. Unidad 21. Estructura de datos de un Blog Búsqueda
Objetivo.
Practicar las operaciones necesarias para crear la estructura de datos de un blog.
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 botón 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 numérico entero, autoincremental (cada vez que se graba un registro el sistema le asigna un número más 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.
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.
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 ( ). Indexado para relacionarlo con
la tabla Entradas.
25 Por último crearemos una tabla llamada Usuarios con 3 campos.
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 seleccionándola en el menú de la izquierda.
38 Haz clic en la opción Importar que encontrarás en el menú horizontal en la parte superior de la ventana:
39 En la siguiente ventana pulsa el botón 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 selecciónalo en la lista de Juego de caracteres del archivo.
41 Pulsa el botón Continuar.
42 Asegúrate de que se han introducido datos en la tabla pulsando la opción 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 vínculo Agregar un nuevo usuario.
48 En la nueva ventana escribe escritor en Nombre de usuario.
49 En Servidor escribe localhost.
51 En Debe volver a escribir escribe aulaclic de nuevo.
52 Pulsa el botón Continuar para crear el usuario.
53 En la nueva pantalla desplázate 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 están 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 Administración 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.
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Interfaz Pública
Ejercicio paso a paso. Unidad 21. Interfaz Pública Búsqueda
Objetivo.
Practicar las operaciones necesarias para crear las páginas de la interfaz pública de un blog.
Empezaremos por definir una conexión a la base de datos.
1 Ejecuta Dreamweaver y abre el sitio blog, vamos a trabajar sobre él.
2 Abre el panel Bases de Datos con la combinación de teclas CTRL + MAYUS + F10 o desde el menú Ventana
→ Bases de datos.
3 Haz clic en el botón y selecciona Conexión MySQL para crear una nueva conexión.
4 En Nombre de conexión escribe blog_aulaclic.
5 En Servidor MySQL escribe localhost.
6 En Nombre de usuario escribe escritor.
8 En Base de datos selecciona bd_blog.
9 Pulsa Aceptar para crear la conexión.
Ahora vamos a modificar el menú de salto que introdujimos en temas anteriores en la plantilla para que se
visualicen en él las categorías.
Primero deberemos definir un juego de registros para obtener las categorías.
1 Abre la plantilla blog.dwt.php, vamos a editarla.
3 En el cuadro de diálogo que se abrirá rellena los datos de la siguiente forma: en Nombre
escribe categorias_para_menu.
4 En Conexión selecciona blog_aulaclic.
5 En Tabla selecciona categorias.
6 En Ordenar selecciona Nombre y en el desplegable de al lado Ascendente.
Y luego modificar el menú de salto.
8 Abre el panel Vinculaciones (CTRL + F10).
9 Arrastrando los elementos desde el panel a la vista de Código, modifica el formulario para que quede de este modo:
<form name="form1" id="form1">
<select name="menu1">
<option value="categorias.php?id=<?php echo $row_categorias_para_menu['Id']; ?>">
<?php echo $row_categorias_para_menu['Nombre']; ?>
</option>
</select>
<input type="button" name="Button1" value="Ir" onclick="MM_jumpMenuGo('menu1','parent',0)" />
</form>
10 Luego selecciona el elemento option y haz que se repita para todos los registros de la tabla haciendo clic en la
opción Repetir Región de la barra Datos.
11 Cierra la plantilla guardando los cambios.
Crearemos ahora la página index.
1 Abre un nuevo archivo dinámico basado en la plantilla blog.dwt.php (Archivo → Nuevo, pestaña Plantillas).
2 Guárdalo como index.php.
4 En el cuadro de diálogo que se abrirá haz clic en Avanzado...
5 En Nombre escribe listado_entradas.
7 En SQL deberás pegar la siguiente sentencia SQL:
SELECT entradas.Id, entradas.Titulo, entradas.Texto, entradas.Fecha, categorias.Nombre as

Nombre_Categoria, categorias.Id AS Id_Categoria, COUNT(comentarios.Id) AS Cuenta_comentarios
FROM (entradas LEFT JOIN comentarios ON entradas.Id=comentarios.Id_Entrada) INNER JOIN categorias

ON entradas.Id_Categoria=categorias.Id
GROUP BY entradas.Id

ORDER BY entradas.Fecha DESC
Con esta sentencia obtenemos un juego de registros con las entradas con el nombre de la categoria correspondiente y
el número de comentarios que tiene la entrada. Las entradas aparecerán ordenadas por fecha de la más antigua a
la más reciente.
9 En la única región editable deberás escribir un párrafo de clase titulo que muestre el elemento Titulo que
habrás arrastrado del panel Vinculaciones.
10 A continuación arrastra el elemento Texto, este no deberá estar dentro de un párrafo.
11 En un nuevo párrafo de clase datos escribe aulaClic - y a continuación añade el elemento Fecha arrastrándolo
desde el panel Vinculaciones.
12 Crea un párrafo de clase datos y en él escribe Categoría:, a continuación arrastra el elemento Nombre_Categoria.
13 Sobre este elemento crea un vínculo que vaya a categorias.php?id=
14 Añade el elemento Id_Categoria arrastrándolo desde el panel Vinculaciones para que te quede el enlace de
este modo:
categorias.php?id=<?php echo $row_listado_entradas['Id_Categoria']; ?>
15 Finalmente inserta un último párrafo de clase datos que diga Comentarios.
16 A continuación, en el mismo párrafo, arrastra el elemento Cuenta_comentarios.
17 Crea un enlace en el elemento Cuenta_comentarios que vaya a comentarios.php?id=.
18 Añade el elemento Id arrastrándolo desde el panel Vinculaciones para que te quede el enlace de este modo.
comentarios.php?id=<?php echo $row_listado_entradas['Id']; ?>
19 Selecciona el texto que acabas de insertar y haz que se repita para que muestre 6 registros. Utiliza la opción
Repetir Región.
Ahora crearemos la página para las entradas por categoría.
2 Guárdalo como categorias.php.
4 En el cuadro de diálogo que se abrirá haz clic en Avanzado...
5 En Nombre escribe listado_por_categoria.

7 En SQL deberás pegar la siguiente sentencia SQL:
SELECT entradas.Id, entradas.Titulo, entradas.Texto, entradas.Fecha, COUNT(comentarios.Id)

AS Cuenta_Comentarios, categorias.Nombre AS Nombre_Categoria
FROM (entradas LEFT JOIN comentarios ON entradas.Id=comentarios.Id_Entrada) INNER JOIN categorias

ON entradas.Id_Categoria=categorias.Id
WHERE Id_Categoria = colname
GROUP BY entradas.id
ORDER BY Fecha DESC
8 Pulsa el botón en el siguiente cuadro para añadir un parámetro.
9 En el cuadro de diálogo escribe los siguientes valores:
Nombre: colname
Valor predeterminado: -1
Valor en tiempo de ejecución: $_GET['id']
11 En la única región editable deberás escribir un párrafo de tipo datos que diga Categoría:
12 A continuación incluye el elemento Nombre_Categoria arrastrándolo desde el panel Vinculaciones y ponlo

en negrita.
13 Seguidamente escribe un párrafo de clase titulo que contenga el elemento Titulo que habrás arrastrado desde
el panel Vinculaciones.
14 A continuación arrastra el elemento Texto, este no deberá estar dentro de un párrafo.
15 En un nuevo párrafo de clase datos escribe aulaClic - y a continuación añade el elemento Fecha arrastrándolo
desde el panel Vinculaciones.
16 Finalmente inserta un último párrafo de clase datos que diga Comentarios.
17 A continuación, en el mismo párrafo, arrastra el elemento Cuenta_comentarios.
18 Crea un enlace en el elemento Cuenta_comentarios que vaya a comentarios.php?id=.
19 Añade el elemento Id arrastrándolo desde el panel Vinculaciones para que te quede el enlace de este modo.
comentarios.php?id=<?php echo $row_listado_por_categoria['Id']; ?>
20 Selecciona este último bloque y haz que se repita para que muestre 6 registros. Utiliza la opción Repetir región.
21 Coloca el cursor al final del todo e incluye un navegador de registros utilizando la opción Barra de Navegación
de juego de registros .
Selecciona la opción Imágenes para que se muestre el navegador con flechas.

Para terminar crearemos la página para los comentarios.
2 Guárdalo como comentarios.php.
4 En el cuadro de diálogo que se abrirá haz clic en Simple...
5 En Nombre escribe listado_comentarios.
7 En Tabla selecciona comentarios.
8 Cambia la opción Filtro para que pueda leerse ID_Entrada = Parámetro URL id.
9 Cambia la opción Ordenar para que pueda leerse Fecha Descendiente.
11 En la única región editable escribe un párrafo que contenga el elemento Autor que habrás arrastrado desde el
panel Vinculaciones y lo pondrás en negrita.
12 Luego añade el elemento Comentario del mismo modo.
13 A continuación incluye un nuevo párrafo de clase datos que contenga el elemento Fecha.
14 Para terminar inserta una regla horizontal (Insertar → HTML → Regla horizontal).
15 Selecciona el bloque que acabamos de añadir y haz que se repita para que muestre todos los registros de la
tabla. Utiliza la opción Repetir región.
16 Selecciona de nuevo el bloque que te ha quedado y haz que sólo se muestre si hay algún registro en el
recordset. Utiliza la opción Mostrar si el juego de registros no está vacío.
17 Seguidamente escribe un párrafo que diga Introduce aquí tu comentario:
18 Ahora introduce un formulario de inserción de registros. Haz clic en el botón Asistente de formulario de
inserción de registros .
19 Deberás excluir el campo Id pues se genererá automáticamente. Selecciónalo de la lista de campos y pulsa el
botón
20 El campo Comentario se debe mostrar como un área de texto.
21 El campo Fecha será oculto y con un Valor predeterminado de <?php echo date(ymd); ?>. Esto generará la
fecha actual.

22 El campo Id_Entrada también será oculto y tomará el Valor predeterminado de <?php echo $_GET['id']; ?>.
El párametro con el ID de la entrada.
23 Pulsa Aceptar y habremos terminado.
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Creación de un Menú de Administración
Ejercicio paso a paso. Unidad 21. Creación de un Menú de Administración Búsqueda
Objetivo.
Practicar las operaciones necesarias para crear un menú de administración en un blog.
3 Guárdalo como admin.php.
4 En la única región editable deberás escribir un párrafo de clase titulo que diga Crear nuevas:
5 Luego escribe un nuevo párrafo que diga Nueva entrada, deberás hacer que este texto tenga un enlace
a nueva_entrada.php.
6 A continuación añade un nuevo párrafo en el que pueda leerse Nueva categoría, este texto deberá tener un enlace
a nueva_categoria.php.
7 Añade un párrafo vacío.
8 Incluye un nuevo párrafo de clase titulo que diga Modificar existentes:
9 Crea un último párrafo que diga Modificar comentarios, este texto debe enlazarse con listado_comentarios.php.
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Creación de un Menú de Administración

Curso de Adobe Dreamweaver CS3. Paso a Paso Inserción de elementos
Ejercicio paso a paso. Unidad 21. Inserción de elementos Búsqueda
Objetivo.
Practicar las operaciones necesarias para crear las páginas de inserción de elementos.
Empezaremos por crear la página para introducir nuevas categorías.
2 Guárdalo como nueva_categoria.php.
3 En la única región editable deberás escribir un párrafo de clase titulo que diga Escribe el nombre de la
nueva categoría:
4 Ahora deberemos introducir un formulario de inserción de registros. Haz clic en el botón Asistente de formulario
de inserción de registros .
5 Deberás excluir el campo Id quitándole de la lista de campos, pues se genererá automáticamente. El resto
lo dejaremos como está.
Ahora crearemos la página para crear nuevas entradas.
2 Guárdalo como nueva_entrada.php.
Crearemos un recordset para cargar los nombres e id de categorías.

escribe categorias_para_menu.
6 En Tabla selecciona categorias.
7 En Ordenar selecciona Nombre y en el desplegable de al lado Ascendente.
9 En la única región editable escribe un párrafo de clase titulo que diga No hay categorías en la base de datos.
Escribe un segundo párrafo que diga Crea una nueva desde aquí, enlazada la última palabra con el
archivo nueva_categoria.php.
10 Selecciona estos dos párrafos que acabas de introducir y haz que se muestre si no existen registros de categorías.
Si no hay categorías no podremos asociar la entrada a ninguna de ellas.
Utiliza la opción Mostrar si el juego de registros está vacío.
11 Seguidamente escribe un párrafo de clase titulo que diga Introduce los datos de la nueva entrada:
12 Ahora deberemos introducir un formulario de inserción de registros. Haz clic en el botón Asistente de formulario
de inserción de registros .
13 Deberás excluir el campo Id pues se genererá automáticamente.
14 El campo Texto se deberá mostrar como un área de texto.
15 El campo Fecha deberá enviarse como tipo Fecha.
16 El campo Categoría deberá mostrarse como un menú (que modificaremos más adelante).
17 Pulsa Aceptar para crear el formulario.
18 Ahora modifica el menú desplegable de Categoría, selecciónalo y ve a la vista de Código.
19 Modifica el control arrastrando los elementos del recordset listado_categorias desde el panel Vinculaciones
(CTRL + F10).
Deberá quedarte algo parecido:
<select name="Id_Categoria">
<option value="<?php echo $row_listado_categorias['Id']; ?>" >
<?php echo $row_listado_categorias['Nombre']; ?></option>
</select>

20 Selecciona la línea que dice:
<option value="<?php echo $row_listado_categorias['Id']; ?>" ><?php echo $row_listado_categorias

['Nombre']; ?></option>
21 Haz que se repita para cada una de las categorías. Utiliza la opción Repetir Región.
Ya casi hemos terminado.
22 Finalmente selecciona la última parte de la página, el segundo párrafo que has escrito y el formulario y haz que
se muestre si existen registros en el recordset de listado_categorias.
Utiliza la opción Mostrar si el recordset no está vacío.
23 Cierra la páginaguardando los cambios.
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Listado de elementos
Ejercicio paso a paso. Unidad 21. Listado de elementos Búsqueda
Objetivo.
Practicar las operaciones necesarias para crear las páginas de listados de elementos.
3 Ejecuta Dreamweaver y abre el sitio blog, vamos a trabajar sobre él. Vamos a crear la página que muestre un
listado de comentarios.
5 Guárdalo como listado_comentarios.php.
6 En la única región editable deberás escribir un párrafo de clase titulo que diga Selecciona una entrada.
Crearemos un recordset para cargar los titulos y fechas de las entradas.
8 En el cuadro de diálogo que se abrirá rellena los datos de la siguiente forma: en Nombre escribe listado_entradas.
10 En Tabla selecciona entradas.
11 En Ordenar selecciona Fecha y en el desplegable de al lado Descendente.
13 Debajo del párrafo que hemos añadido deberás insertar una tabla con 10 píxeles de relleno de celda. En esta
tabla listaremos las entradas.
La tabla deberá tener 2 filas y 2 columnas.
Seleciona la primera fila y aplícale el estilo borde_inferior.
14 Escribe en la primera celda de la primera fila Título en negrita.

15 Escribe en la segunda celda de la primera fila Fecha en negrita.
16 En la primera celda de la segunda fila arrastra el elemento Titulo desde el panel Vinculaciones.
17 Asígnale un enlace a listado_comentarios.php?id=
18 Modifica el vínculo arrastrando el elemento Id desde el panel Vinculaciones para que se muestre de este modo:
listado_comentarios.php?id=<?php echo $row_listado_entradas['Id']; ?>
19 En la segunda celda de la segunda fila inserta el elemento Fecha arrastrándolo desde el panel
Vinculaciones. Ponlo en cursiva.
20 Selecciona la segunda fila de la tabla y haz que se repita para que muestre 6 registros.
Utiliza la opción Repetir Región.
21 Luego coloca el cursor al final del contenido editable e introduce una barra de navegación de registros .
Ahora añadiremos el listado de comentarios.
22 Escribe el siguiente párrafo de clase titulo Selecciona un comentario a modificar o eliminar.
Crearemos un recordset para cargar el autor, correo y fecha del comentario.
escribe listado_comentarios.
26 En Tabla selecciona Comentarios.
27 En Ordenar selecciona Fecha y en el desplegable de al lado Descendente.
28 Modifica los desplegables de Filtro para que pueda leerse: Id_Entrada = Parámetro URL id.
30 Debajo del párrafo que has añadido inserta una tabla con 10 píxeles de relleno de celda.
La tabla deberá tener 2 filas y 5 columnas.
Selecciona la primera fila y aplicale el estilo borde_inferior.

31 En la primera celda de la primera fila escribe Autor en negrita.
32 En la segunda celda de la primera fila escribe Correo en negrita.
33 En la tercera celda de la primera fila escribe Fecha en negrita.
34 Arrastra el elemento Autor a la primera celda de la segunda fila.
35 Arrastra el elemento Correo_Autor a la segunda celda de la segunda fila y ponlo en cursiva.
36 Arrastra el elemento Fecha a la tercera celda de la segunda fila y ponlo en cursiva.
37 En la cuarta celda de la segunda fila inserta la imagen imagenes/edit.png y enlázala a modifica_comentario.

php?id=
Arrastra el elemento Id para que el enlace quede de este modo:
modifica_comentario.php?id=<?php echo $row_listado_comentarios['Id']; ?>
38 En la quinta celda de la segunda fila inserta la imagen imagenes/edit.png y enlázala a elimina_comentario.

php?id=
Arrastra el elemento Id para que el enlace quede de este modo:
elimina_comentario.php?id=<?php echo $row_listado_comentarios['Id']; ?>
39 Selecciona la segunda fila de la tabla y haz que se repita para que muestre todos los registros del recordset.
Utiliza la opción Repetir Región.
40 Para terminar, selecciona el primer párrafo y la primera tabla y haz que se muestren si no hay registros en
el recordset de listado_comentarios. Utiliza la opción Mostrar si el juego de registros está vacío.
Si es la primera vez y al listado_comentarios no le hemos pasado un Id de entrada, o si la entrada no tiene

comentarios lo que hay que hacer es visulaizar el listado de entradas (la primera tabla).
Si por el contrario la entrada seleccionada tiene comentarios tenemos que visualizar la segunda tabla (la que contiene
el lista de comentarios):
41 Selecciona el segundo párrafo y la segunda tabla y haz que se muestren si hay registros en el recordset
de listado_comentarios. Utiliza la opción Mostrar si el juego de registros no está vacío.
Hemos creado un listado de entradas que al hacer clic sobre una de ellas envía su ID a la misma página que genera
un listado de los comentarios correspondientes a esa entrada.

Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Modificación de elementos
Ejercicio paso a paso. Unidad 21. Modificación de elementos Búsqueda
Objetivo.
Practicar las operaciones necesarias para crear las páginas de modificación de elementos.
3 Ejecuta Dreamweaver y abre el sitio blog, vamos a trabajar sobre él. Vamos a crear una página para
modificar comentarios.
5 Guárdalo como modifica_comentario.php.
6 En la única región editable deberás escribir un párrafo de clase titulo que diga Modificando el comentario:
Crearemos un recordset para cargar el comentario que queremos modificar.
8 En el cuadro de diálogo que se abrirá rellena los datos de la siguiente forma: en Nombre escribe detalle_comentario.
11 En Filtrar selecciona lo siguiente: Id = Parámetro URL id.
13 Ahora visualizaremos el comentario para asegurarnos de que es este el que queremos modificar.
Escribe un párrafo en negrita que muestre el Autor del comentario. Arrastra el elemento desde el panel Vínculos.
Luego inserta un nuevo párrafo para el elemento Comentario.
Añade un nuevo párrafo de clase datos y colócale la Fecha del comentario.
Finalmente inserta una regla horizontal (Insertar → HTML → Regla Horizotal).

Curso de Adobe Dreamweaver CS3. Paso a Paso Modificación de elementos
14 Pulsa el botón Asistente de formulario de actualización de registros .
15 En el cuadro de diálogo que se abrirá seleccionarla tabla a modificar comentarios.
16 Cuando se termine la actualización deberemos volver a la página admin.php.
17 Haz que el campo Id sea oculto.
18 El campo Fecha debe enviarse como Fecha.
19 El campo Comentario debe mostrarse como un Área de texto.
20 Pulsa Aceptar para cerrar el cuadro de diálogo.
21 Guarda los cambios y cierra el documento.
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Eliminación de elementos
Ejercicio paso a paso. Unidad 21. Eliminación de elementos Búsqueda
Objetivo.
Practicar las operaciones necesarias para crear las páginas de eliminación de elementos.
3 Ejecuta Dreamweaver y abre el sitio blog, vamos a trabajar sobre él. Vamos a crear la página para
eliminar comentarios.
5 Guárdalo como elimina_comentario.php.
Crearemos un recordset para cargar el comentario que queremos eliminar.
7 En el cuadro de diálogo que se abrirá rellena los datos de la siguiente forma: en Nombre escribe detalle_comentario.
10 En Filtrar selecciona lo siguiente: Id = Parámetro URL id.
12 En la única región editable escribe un párrafo de clase titulo que diga Vas a eliminar el comentario:
Un segundo párrafo en negrita deberá mostrar el Autor del comentario. Arrástralo desde el panel Vinculaciones.
Luego añade otro párrafo donde colocar el Comentario.
Finalmente crea un último párrafo de clase datos y arrastra en él el elemento Fecha.
13 Crea un formulario (Insertar → Formulario → Formulario).

Curso de Adobe Dreamweaver CS3. Paso a Paso Eliminación de elementos
14 En él crea un campo oculto (Insertar → Formulario → Campo Oculto).
15 En el panel Propiedades dale el nombre campoOculto al campo que acabamos de crear.
Estamos listos para insertar el comportamiento de Eliminar Registro.
16 Haz clic en el botón Eliminar Registro en la barra Datos.
17 Rellena los datos del cuadro de diálogo, en Valor de clave principal escribe Parámetro URL campoOculto.
18 Pulsa Aceptar para terminar.
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Restringir Acceso
Ejercicio paso a paso. Unidad 21. Restringir Acceso Búsqueda
Objetivo.
Practicar las operaciones necesarias para restringir el acceso a determinadas páginas.
5 Guárdalo como login.php.
6 En la única región editable deberás escribir un párrafo de clase titulo que diga Introduce usuario y contraseña:.
7 A continuación inserta un formulario (Insertar → Formulario → Formulario). Llámalo form1.
8 Dentro del formulario deberás introducir dos campos de texto (Insertar → Formulario → Campo de texto).
9 Al primero lo llamaremos usuario y sera de tipo Texto.
10 Al segundo lo llamaremos contrasena y será de tipo Contraseña. Recuerda no utilizar la ñ en los nombres
de campos y archivos.
11 Finalmente añade un botón (Insertar → Formulario → Botón) dale el valor Entrar.
12 Haz clic en la opción Conectar Usuario y rellena el cuadro de diálogo que se abrirá con los datos que
puedes ver en la imagen:

13 Acepta el formulario.
Ahora deberemos especificar qué páginas se verán afectadas por el acceso restringido.
15 Abre el documento admin.php.
16 Selecciona la opción Restringir acceso a página .
La página ahora estará protegida.
18 Repite los pasos 15 y 17 para los documentos:
elimina_comentario.php
listado_comentarios.php
modifica_comentario.php
nueva_categoria.php
nueva_entrada.php
Para terminar crearemos un enlace Desconectar en las páginas para que el usuario pueda terminar la sesión.
19 Abre el documento admin.php.
20 Selecciona la opción Desconectar usuario .
21 En el cuadro de diálogo que se abrirá selecciona la opción Crear nuevo vínculo: "Desconectar".
22 Pulsa Aceptar para cerrar el cuadro de diálogo.
23 Coloca el enlace en la parte superior de la región editable y dentro de un párrafo de clase datos.
25 Repite los pasos 19 a 24 para los documentos:
elimina_comentario.php
listado_comentarios.php
modifica_comentario.php
nueva_categoria.php
nueva_entrada.php
Ahora podrás entrar a las páginas restringidas utilizando el nombre de usuario aulaclic y contraseña miprimerblog
(es el usuario que importamos en la tabla de usuarios) en el primer ejercicio del tema.
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Preparando el Servidor de Pruebas
Ejercicio paso a paso. Unidad 22. Preparando el Servidor de Pruebas Búsqueda
Objetivo.
Practicar las operaciones necesarias para preparar el servidor de pruebas para que soporte transformaciones XSL.
2 Haz clic izquierdo sobre el icono de WAMP en el área de notificación y selecciona la opción PHP extensions.
Se desplegará un menú que mostrará todas las extensiones instaladas.
4 Desplázate hacia abajo hasta que encuentres una llamada php_xsl.
5 Haz clic sobre ella y la extensión se instalará.
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Preparando el Servidor de Pruebas

Curso de Adobe Dreamweaver CS3. Paso a Paso Importar datos
Ejercicio paso a paso. Unidad 22. Importar Búsqueda

datos
Objetivo.
Practicar la importación de archivos XML o RSS externos.
3 Crea un nuevo archivo de XSLT (fragmento) haciendo clic en Archivo → Nuevo, Categoría Página en blanco,
XSLT (fragmento).
4 Se abrirá un cuadro de diálogo, selecciona la opción Adjuntar un archivo remoto en Internet.
5 En la caja de texto escribe http://www.criticadelibros.org/whats-new.rss.
6 Pulsa Aceptar.
7 Guarda el archivo como critica_rss.xsl.
8 Abre el panel Vinculaciones (CTRL + F10).
9 Arrastra el elemento rss:title que se encuentra bajo el elemento rss:item a un nuevo párrafo.
10 Arrastra el elemento rss:description que se encuentra bajo el elemento rss:item a un nuevo párrafo.
Deberá quedarte algo así:

Curso de Adobe Dreamweaver CS3. Paso a Paso Importar datos
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Enlaces con elementos
Ejercicio paso a paso. Unidad 22. Enlaces con Búsqueda

elementos
Objetivo.
Practicar crear enlaces con elementos XML.
3 Abre el archivo critica_rss.xsl
4 Selecciona el elemento {rdf:RDF/rss:item/rss:title}.
5 Haz clic en el icono que aparece a la derecha del campo Vínculo en el panel de Propiedades.
6 Selecciona la opción Fuentes de datos en el cuadro de diálogo Seleccionar archivo.
7 Selecciona el elemento rss:link que se encuentra bajo el elemento rss:item.
8 Pulsa Aceptar.
Se creará el enlace al contenido del elemento rss:link en el elemento rss:title.
9 Puedes pulsar la tecla F12 para ver el resultado.

Curso de Adobe Dreamweaver CS3. Paso a Paso Enlaces con elementos
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Repetición de elementos
Ejercicio paso a paso. Unidad 22. Repetición de Búsqueda

elementos
Objetivo.
Practicar la creación de repeticiones de elementos.
4 Bajo los dos elementos que se encuentran en la página inserta una linea horizontal (Insertar → HTML →
Regla horizontal).
Desde la vista de Código deberás ver algo así:
<p><a href="{rss:link}"><xsl:value-of select="rss:title"/></a></p>
<p><xsl:value-of select="rss:description" disable-output-escaping="yes"/></p>
<hr />
5 Selecciona este bloque de código y pulsa el botón Repetir región .
6 En el cuadro de diálogo que se abrirá selecciona el elemento rss:item.
7 Haz clic en la flecha que se encuentra al lado de Construir filtro.
8 Se desplegará un nuevo marco, haz clic en el botón .

Curso de Adobe Dreamweaver CS3. Paso a Paso Repetición de elementos
9 En Filtrar por deberá aparecer item.
10 En WHERE escribe position().
11 En Operador selecciona <=.
12 En Valor escribe 4.
Hemos creado un filtro para que se muestren los 4 primeros elementos del archivo RSS.
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Ordenación de elementos
Ejercicio paso a paso. Unidad 22. Ordenación Búsqueda

de elementos
Objetivo.
Practicar crear ordenar los elementos XML.
4 Ve a la vista de Código.
5 Bajo la línea de repeticion xsl:for-each escribe lo siguiente para que se ordenen los elementos por su título:
<xsl:sort select="rss:title" />
Deberá quedarte algo así:
<xsl:for-each select="rdf:RDF/rss:item[position() <= 5]">
<xsl:sort select="rss:title" />
<p><a href="{rss:link}"><xsl:value-of select="rss:title"/></a></p>
<p><xsl:value-of select="rss:description" disable-output-escaping="yes"/></p>
<hr />
</xsl:for-each>
Curso de Adobe Dreamweaver CS3. Paso a Paso Ordenación de elementos
Pulsa la tecla F12 para ver una previsualización.
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Insertar XSLT en una página dinámica
Ejercicio paso a paso. Unidad 22. Insertar XSLT en una página dinámica Búsqueda
Objetivo.
Practicar las operaciones necesarias para insertar un archivo XSLT en una página dinámica.
4 Abre un archivo dinámico nuevo basado en la plantilla libreria.dwt.php (Archivo → Nuevo, pestaña Página
de Plantilla).
5 Guárdalo como criticas.php.
6 En la región editable escribe un párrafo que diga Críticas obtenidas de criticadelibros.org
7 La primera palabra deberá verse afectada por la clase primera_palabra.
8 criticadelibros.org deberá estar enlazado con http://www.criticadelibros.org/
9 Haz clic en la pestaña Datos de la barra Insertar.
10 Coloca el cursor debajo del párrafo que acabamos de escribir y pulsa Transformación XSL .
11 En el cuadro de diálogo que se abrirá selecciona el archivo critica_rss.xsl en el campo Archivo XSLT.
12 Acepta el cuadro de diálogo y verás como se añade el contenido RSS a la página.
Puedes probarla pulsando la tecla F12 o activando la vista LiveData.

Curso de Adobe Dreamweaver CS3. Paso a Paso Insertar XSLT en una página dinámica
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Paso de parámetros
Ejercicio paso a paso. Unidad 22. Paso de parámetros Búsqueda
Objetivo.
Practicar las operaciones necesarias para pasar parámetros a un archivo XSLT desde una página dinámica.
4 Abre el archivo criticas_rss.xsl.
5 Selecciona la etiqueta xsl:for-each y haz clic en el boton que aparece en el panel Propiedades.
6 Se abrirá el cuadro de diálogo de Repetir región. En el filtro que hemos creado sustituye el Valor 4
por $numeroCriticas.
7 Abre el archivo criticas.php.
8 En el panel Comportamientos del servidor (CTRL + F9) haz doble clic sobre el elemento XSL Transformation.
9 Haz clic en el botón en el cuadro de diálogo XSL Transformation para añadir un parámetro.
10 En el cuadro de diálogo que se abrira escribe numeroCriticas en Nombre.
11 Escribe 4 en Valor.
12 Acepta los dos cuadros de diálogo y habremos acabado.
13 Prueba la página pulsando la tecla F12.
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Paso de parámetros

Curso de Adobe Dreamweaver CS3. Paso a Paso Incluir Spry
Ejercicio paso a paso. Unidad 24. Incluir Spry Búsqueda
Objetivo.
Practicar la inclusión de Spry en una página web.
3 Abre un archivo dinámico nuevo basado en la plantilla libreria.dwt.php (Archivo → Nuevo, pestaña Página
de Plantilla).
4 Guárdalo como catalogo.php.
5 Copia los archivos SpryData.js y xpath.js que encontrarás en la carpeta programas adicionales del curso a
la carpeta del sitio.
6 En el archivo catalogo.php dirígete a la vista de Código.
7 En la parte superior, modifica la etiqueta html para que pueda leerse:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
8 Busca la etiqueta title. Debajo de ella deberás escribir las siguientes líneas para incluir los scripts de Spry:
<script type="text/javascript" src="xpath.js"></script>
<script type="text/javascript" src="SpryData.js"></script>

Curso de Adobe Dreamweaver CS3. Paso a Paso Incluir Spry
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Crear un Dataset

Dataset
Objetivo.
Practicar la creación de un dataset.
3 Copia el archivo libreria.xml que encontrarás en la carpeta ejerciciosdream del curso en la carpeta de tu sitio.
4 Ábrelo para ver su estructura. Observa que tenemos una etiqueta que engloba todo llamada biblioteca y otra
que correspondería a cada registro llamada libro.
5 Abre el archivo catalogo.php.
Ahora definiremos un dataset para poder utilizar la información almacenada en el archivo xml.
6 Bajo las líneas que añadimos en el ejercicio anterior para incluir Spry escribe lo siguiente:
var misLibros = new Spry.Data.XMLDataSet("libreria.xml", "biblioteca/libro");
</script>

Curso de Adobe Dreamweaver CS3. Paso a Paso Crear un Dataset
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Crear una Región con Información

Región con Información
Objetivo.
Practicar la creación de una región con información.
4 En la zona editable escribe los siguiente desde la vista de Código:
<span class="primera_palabra">Catálogo</span> de libros en tienda:
<div spry:region="misLibros">
<table border="0" cellpadding="15" cellspacing="0">
<tr>
<th>ISBN</th>
<th>Título</th>
<th>Autor</th>
<th>Precio</th>
</tr>
<tr>
Curso de Adobe Dreamweaver CS3. Paso a Paso Crear una Región con Información
<td>{isbn}</td>
<td>{titulo}</td>
<td>{autor}</td>
<td>{precio}</td>
</tr>
</table>
</div>
5 Pulsa la tecla F12 para visualizar la página en el servidor de pruebas.
Verás como aparece una fila mostrando el contenido del primer registro.
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Crear Repeticiones de registros

Repeticiones de registros
Objetivo.
Practicar la crear repeticiones en los registros.
4 En la zona editable busca la tabla que acabamos de añadir en el ejercicio anterior desde la vista de Código.
5 Modifícala para añadirle una zona de repetición a la fila que muestra el valor de los campos:
<table border="0" cellpadding="15" cellspacing="0">
<tr>
<th>ISBN</th>
<th>Título</th>
<th>Autor</th>
<th>Precio</th>
</tr>
<tr spry:repeat="misLibros">
<td>{isbn}</td>
Curso de Adobe Dreamweaver CS3. Paso a Paso Crear Repeticiones de registros
<td>{titulo}</td>
<td>{autor}</td>
<td>{precio}</td>
</tr>
</table>
Verás como aparece un listado con todos los registros del archivo XML.
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Paso a Paso Crear Filtros

Filtros
Objetivo.
Practicar la crear filtros en un dataset.
4 En la zona editable busca la tabla que acabamos de añadir en el ejercicio anterior desde la vista de Código.
5 Justo encima de ella coloca este formulario, debe estar dentro de la región Spry:
<form action="#" name="formulario">
<br /><br />
<input name="cajadetexto" type="text" />
<a href="#" onclick="misLibros.filter(miFiltro)">Buscar</a> | <a href="#" onclick="misLibros.filter

()">Mostrar todos</a>
<br /><br />
</form>
Observa cómo hemos referenciado a una función que todavía no existe llamada miFiltro.

Vamos a crearla.
6 Ve a la parte superior de la página y localiza la zona donde hemos declarado el dataset.
Añade la siguiente función:
var misLibros = new Spry.Data.XMLDataSet("libreria.xml", "biblioteca/libro");
var miFiltro = function(dataSet, row, rowNumber) {
if (row["autor"].search(document.formulario.cajadetexto.value) != -1
|| row["titulo"].search(document.formulario.cajadetexto.value) != -1
|| row["isbn"].search(document.formulario.cajadetexto.value) != -1) {
return row;
else {
return null;
</script>
Con esta función evaluaremos el valor de la caja de texto del formulario y mostraremos únicamente aquellos
registros que contengan la cadena escrita en ella en su título, autor o ISBN.
Verás como aparece un listado con todos los registros del archivo XML.

Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Ejercicios propuestos Crear sitio local y modificar las propiedades de la página
Ejercicios Unidad 3. Crear sitio local y modificar las propiedades de la página Búsqueda
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 están diseñados para ir construyendo una página
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 aún 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 continuación.
A partir de este momento vamos a realizar todos los ejercicios en la vista Diseño, a no ser que se indique lo
contrario. Haz clic sobre el botón Mostrar vista de diseño .
Ejercicio 1: Deportes.
1 Crear un sitio local con el nombre Deportes, cuya carpeta raíz 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 vínculos, sea cual sea su estado, sea #000000 y nunca
se encuentren subrayados.
4 Asígnale el color de fondo #738099 y la imagen fondo5.gif que se encuentra en la carpeta imagenes del
sitio aparezca como fondo sin repetición.
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 título 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 página como la que aparece si
pulsas aquí.
Ejercicio 2: Animales.
http://www.aulaclic.es/dreamweavercs3/epr_3_3_1.htm (1 de 2) [10/02/2008 20:10:13]

Curso de Adobe Dreamweaver CS3. Ejercicios propuestos Crear sitio local y modificar las propiedades de la página
1 Crear un sitio local con el nombre Animales, cuya carpeta raíz 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 título sea Consultas.
3 Abrir el documento gatos.htm y modificar sus propiedades, para que su título sea Gatos.
4 Abrir el documento perros.htm y modificar sus propiedades, para que su título sea Perros.
5 Abrir el documento inicio.htm y modificar sus propiedades, para que su título sea Inicio.
6 Guardar los cambios y cerrar los documentos.
A partir de este momento, realizando los ejercicios propuestos, vamos a crear una página como la que aparece si
pulsas aquí.
Si no tienes muy claro las operaciones a realizar en los ejercicios anteriores, Aquí te lo explicamos.
Pág. Ej.3
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Ejercicios propuestos Modificar las propiedades CSS
Ejercicios Unidad 4. Modificar las propiedades CSS Búsqueda
1 Abrir el sitio Deportes.
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 líneas que hacen referencia a las instalaciones en una
lista desordenada.
7 Aplicar dos sangrías a la lista.
8 Guardar los cambios y cerrar el documento.
1 Abrir el sitio Animales.
2 Abrir el documento perros.htm.
3 Al título Perros asignarle un tamaño de fuente de 36px, en cursiva y negrita.
4 Renombra el estilo a titulo.
5 Al título Cuidados Postnatales asignarle un tamaño 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 vincularása este documento. Llámala 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 título Consultas asignarle el estilo .titulo.
12 Abrir el documento gatos.htm y asignarle la hoja de estilos estilo.css.
13 Al título Gatos asignarle el estilo .titulo.
14 Al título ¿Cómo Prevenir Los Problemas Dentales? asignarle el estilo .titulo2.

Curso de Adobe Dreamweaver CS3. Ejercicios propuestos Modificar las propiedades CSS
15 Convertir las cuatro últimas líneas en un lista desordenada, aplica una sangría solamente a la segunda línea.
16 Guardar los cambios y cerrar los documentos.
Pág. Ej.4
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Ejercicios propuestos Crear hiperenlaces
Ejercicios Unidad 5. Crear hiperenlaces Búsqueda
1 Abrir el sito Deportes.
3 Crear un hiperenlace a quienes.htm en el texto Quiénes, escribiendo abajo como destino.
4 Crear un hiperenlace a donde.htm en el texto Dónde, escribiendo abajo como destino.
5 Crear un hiperenlace a instalaciones.htm en el texto Instalaciones, escribiendo abajo como destino.
6 Crear un hiperenlace a reservas.htm en el texto Reservas, escribiendo abajo como destino.
1 Abrir el sito Animales.
2 Abrir el documento inicio.htm.
3 Crear un hiperenlace a www.aulaclic.com en la imagen de aulaClic.
4 Hacer que el enlace se abra en una ventana nueva del navegador.
Pág. Ej.5
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Ejercicios propuestos Crear hiperenlaces

Curso de Adobe Dreamweaver CS3. Ejercicios propuestos Insertar imágenes
Ejercicios Unidad 6. Insertar imágenes Búsqueda
2 Abrir el documento instalaciones.htm.
3 Insertar la imagen logodeportes.gif, que se encuentra dentro de la carpeta imagenes del sitio, a la derecha del
texto Nuestras instalaciones.
4 Hacer que la alineación de la imagen sea Medio absoluta.
3 Insertar un rollover al lado del título Inicio, cuya imagen original sea esta: (pata1.gif),
y la imagen de sustitución esta: (pata2.gif).
Guardar previamente estas imagenes en la carpeta imagenes del sitio.
4 La imagen de sustitución no debe tener ninguna dirección web vinculada.
Pág. Ej.6
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Ejercicios propuestos Insertar imágenes

Curso de Adobe Dreamweaver CS3. Ejercicios propuestos Modificar tablas
Ejercicios Unidad 7. Modificar tablas Búsqueda
2 Abrir el documento reservas.htm.
3 Modificar la segunda tabla de la página para que quede como la siguiente:
ACTIVIDAD TARIFA/HORA
AEROBIC
3€
STEP
MUSCULACIÓN 4€
3 Crea una tabla con las siguientes medidas:
4 Coloca la tabla en el centro de la página y asígnale a la tabla el color de fondo #666633.
5 A la celda de la esquina superior-derecha deberás darle como fondo la imagen arriba_derecha.gif que encontrarás
en la carpeta imagenes.
Curso de Adobe Dreamweaver CS3. Ejercicios propuestos Modificar tablas
6 A la celda de la esquina superior-izquierda deberás darle como fondo la imagen arriba_izquierda.gif que
encontrarás en la carpeta imagenes.
7 A la celda de la esquina inferior-derecha deberás darle como fondo la imagen abajo_derecha.gif que encontrarás en
la carpeta imagenes.
8 A la celda de la esquina inferior-izquierda deberás darle como fondo la imagen abajo_izquierda.gif que encontrarás
en la carpeta imagenes.
9 Inserta la imagen logo_animales.gif en la segunda celda de la segunda fila.
10 Y define la alineación de todas las celdas de la tabla como centro (en horizontal) y medio (en vertical).
11 Corta el texto que había en el archivo antes de insertar la tabla y pégalo tal y como estaba en la segunda celda de
la cuarta fila.
12 Abre el archivo botones.htm y copia los botones de navegación, deberás pegarlos en la tercera celda de la
segunda fila.
13 Define el alineamiento de esa celda como derecha (en horizontal) e inferior (en vertical).
14 Guarda los cambios y cierra el documento.
15 Deberás hacer lo mismo para los archivos consultas.htm, gatos.htm y perros.htm.
Pág. Ej.7
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Ejercicios propuestos Configurar marcos
Ejercicios Unidad 8. Configurar marcos Búsqueda
2 Abrir el documento marcos.htm.
3 Modificar las propiedades del marco inferior, para que el documento que se cargue inicialmente en él sea
el documento quienes.htm.
4 Modificar las propiedades del marco inferior, para que no se muestre su borde.
Pág. Ej.8
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Ejercicios propuestos Configurar marcos

Curso de Adobe Dreamweaver CS3. Ejercicios propuestos Insertar elementos de formulario
Ejercicios Unidad 9. Insertar elementos de formulario Búsqueda
2 Abrir el documento reservas.htm.
3 Insertar un campo de texto a la derecha del texto Hora:, que tenga 5 como ancho de caracteres.
4 Insertar un menú a la derecha del texto Centro:, cuyos elementos sean:
Don Benito
Madrid
Silla
5 Seleccionar inicialmente el elemento Don Benito del menú.
6 Insertar un botón para restablecer el formulario, a la izquierda del botón Enviar.
2 Abrir el documento consultas.htm.
3 Insertar un menú a la derecha del texto Animal:, en la celda vacía, cuyos elementos sean:
--- Elige opción ---
Perro
Gato
Otros
4 Seleccionar inicialmente el elemento --- Elige opción --- del menú.
5 Insertar un área de texto a la derecha del texto Consulta:, en la celda vacía, que tenga 50 como ancho de
caracteres, 10 como número de líneas, y que su valor inicial sea Escribe aquí tu consulta.
6 Insertar un botón de Enviar, a la derecha del botón Restablecer.

Curso de Adobe Dreamweaver CS3. Ejercicios propuestos Insertar elementos de formulario
Pág. Ej.9
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Ejercicios propuestos Insertar elementos multimedia
Ejercicios Unidad 10. Insertar elementos multimedia Búsqueda
2 Abrir el documento quienes.htm.
3 Insertar la animación Flash basket.swf, que se encuentra en la carpeta imagenes del sitio, en la última línea vacía
del documento.
4 Hacer que la animación se reproduzca automáticamente una sola vez.
Pág. Ej.10
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Ejercicios propuestos Insertar elementos multimedia

Curso de Adobe Dreamweaver CS3. Ejercicios propuestos Buscar y reemplazar
Ejercicios Unidad 12. Buscar y reemplazar Búsqueda
2 Abrir el documento buscar.htm.
3 Reemplazar el texto deportes (en minúsculas) por el texto aulaClic, utilizando la herramienta Buscar y reemplazar.
2 Abrir el documento buscar.htm.
3 Reemplazar la imagen aulaclic.jpg por la imagen logo_animales.gif, utilizando la herramienta Buscar y reemplazar.
Pág. Ej.12
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Ejercicios propuestos Buscar y reemplazar

Curso de Adobe Dreamweaver CS3. Ejercicios propuestos Insertar otros elementos
Ejercicios Unidad 13. Insertar otros elementos Búsqueda
2 Abrir el documento donde.htm.
3 Convertir la última línea de texto (Para más información...) en una marquesina.
2 Abrir los documentos consultas.htm, gatos.htm, perros.htm e inicio.htm.
3 Insertar una regla horizontal en la segunda celda de la tercera fila de la tabla en todos los documentos.
Pág. Ej.13
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Ejercicios propuestos Insertar otros elementos

Curso de Adobe Dreamweaver CS3. Ejercicios propuestos Insertar capas
Ejercicios Unidad 14. Insertar capas Búsqueda
3 Insertar una capa con el nombre oferta.
4 Insertar en la capa el texto:
Este fin de semana, disfruta de clases gratuitas de aeróbic, simplemente por visitar nuestras intalaciones.
cerrar
5 Modificar las propiedades del texto de la capa para que se muestre centrado.
6 Establecer #C197C1 como color de la capa.
7 Establecer 427px como anchura de la capa, y 143px como altura.
8 Establecer 38px como distancia del margen izquierdo, y 28px como distancia del margen superior.
9 Hacer que la capa sea visible.
2 Abrir el documento gatos.htm.
3 Insertar una capa con el nombre gatosemana.
4 Insertar en la capa el texto Este es Golfo y es de Valencia.
5 En la siguiente línea inserta la imagen gato1.gif de la carpeta imagenes.
6 En la siguiente línea escribe Cerrar.
7 Modificar las propiedades del texto de la capa, para que se muestre centrado.
8 Establecer #BFBF80 como color de la capa.
9 Establecer 276px como anchura de la capa, y 291px como altura.
10 Establecer 100px como distancia del margen izquierdo, y 200px como distancia del margen superior.

Curso de Adobe Dreamweaver CS3. Ejercicios propuestos Insertar capas
11 Hacer que la capa esté oculta.
Pág. Ej.14
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Ejercicios propuestos Crear comportamientos
Ejercicios Unidad 15. Crear comportamientos Búsqueda
3 Insertar un comportamiento que oculte la capa al hacer clic sobre el texto cerrar.
2 Abrir el documento gatos.htm.
3 Insertar un comportamiento que muestre la capa al hacer clic sobre la imagen del gato que se encuentra en
la derecha.
4 Insertar un comportamiento que oculte la capa al hacer clic en cerrar.
Abre el documento marcos.htm de Deportes en un navegador, y compara la página que has creado con la que
aparece si pulsas aquí.
Abre el documento inicio.htm de Animales en un navegador, y compara la página que has creado con la que aparece
si pulsas aquí.
Pág. Ej.15
Septiembre - 2007.


Ejercicios Unidad 16. Crear comportamientos avanzados Búsqueda
Ejercicio 1: Blog.
1 Crear una nueva carpeta llamada blog en tu carpeta de ejercicios.
2 Crear una nueva plantilla PHP llamada blog.dwt.php dentro de esta carpeta.
3 Crear un menú de salto en la página con un botón de Ir asociado a este menú. Introdúcele 3 elementos Sección
1, Sección 2 y Sección 3. Las tres deberán tener como vínculo la dirección #.
Pág. Ej.16
Septiembre - 2007.


Curso de Adobe Dreamweaver CS3. Evaluación Unidad 1. Conceptos básicos de Dreamweaver CS3
Prueba evaluativa de la unidad 1. Conceptos básicos de Dreamweaver CS3
Solo una respuesta es válida por pregunta. Haz clic en la respuesta que consideres correcta.
Contesta todas las preguntas y haz clic en el botón Corregir para ver la solución.
Si pulsas Restablecer podrás repetir la evaluación.
1. Las páginas web pueden tener la extensión HTML.

a) Verdadero.
b) Falso.
2. Los servidores gratuitos son recomendables para alojar páginas de empresas.

a) Verdadero.
b) Falso.
3. En Internet pueden existir páginas con el mismo nombre pero distinta terminación.
a) Verdadero.
b) Falso.
4. En Dreamweaver no pueden utilizarse combinaciones de teclas.

a) Verdadero.
b) Falso.
http://www.aulaclic.es/dreamweavercs3/ev_1_5_1.htm (1 de 3) [10/02/2008 20:11:41]

5. El botón significa...
a) Abrir.
b) Nuevo.
c) Cerrar.
6. El icono significa...
a) Abrir.
b) Nuevo.
c) Cerrar.
7. El icono significa...
a) Abrir.
b) Nuevo.
c) Cerrar.
8. Si hacemos clic sobre el botón Nuevo de la barra de herramientas:

a) Aparecerá directamente un nuevo documento vacío en pantalla.
b) Aparecerá una nueva ventana en la que hay que elegir el tipo de documento que se
desea crear.
c) Cualquiera de las dos primeras opciones.
d) Ninguna de las opciones anteriores.

9. Si se pulsa sobre el icono

a) Se guardarán todos los documentos modificados y los nuevos.
b) Se guardarán solamente todos los nuevos documentos.
c) Se guardarán solamente todos los documentos modificados.
10. La combinación de teclas Ctrl + O sirve para....

a) Crear un nuevo documento.
b) Abrir un documento.
Corregir
Restablecer
Pág. Ev.
1.1
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Evaluación Unidad 2. El entorno de trabajo
Prueba evaluativa de la unidad 2. El entorno de trabajo
1. Los botones para minimizar y maximizar la ventana del programa Dreamweaver se

encuentran en la Barra Insertar.
a) Verdadero.
b) Falso.
2. Las vistas del documento pueden cambiarse a través del panel Propiedades.
a) Verdadero.
b) Falso.
3. La pestaña Favoritos en la barra Insertar puede personalizarse para mostrar unos u

otros iconos.
a) Verdadero.
b) Falso.
4. Las barras de herramientas son flotantes.

a) Verdadero.
b) Falso.

5. La apariencia y opciones de un inspector cambian dependiendo del objeto

seleccionado.
a) Verdadero.
b) Falso.
6. Los paneles e inspectores se muestran y ocultan a través del menú ...

a) Insertar.
b) Comandos.
c) Ventana.
7. En la barra Insertar o panel de Objetos...

a) se puede cambiar las vistas del documento.
b) los botones están clasificados según su categoría.
c) se configuran las propiedades del objeto seleccionado.
8. Se puede trabajar con el editor visual mediante las vistas...

a) diseño.
b) código.
c) las dos respuestas anteriores son correctas.
9. El icono sirve para ...
a) pasar a la vista código.
b) pasar a la vista código y diseño.
c) pasar a la vista diseño.
d) insertar una imagen.

10. La vista diseño...

a) es la vista predeterminada.
b) es la que se suele utilizar habitualmente.
c) las dos afirmaciones anteriores son verdaderas.
d) las tres afirmaciones anteriores son falsas.
Corregir
Restablecer
Pág. Ev.
2.1
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Evaluación Unidad 3. Configuración de un sitio local
Prueba evaluativa de la unidad 3. Configuración de un sitio local
1. Es posible visualizar un sitio en el panel Sitio o en una ventana.

a) Verdadero.
b) Falso.
2. El botón sirve para cambiar la vista del sitio.

a) Verdadero.
b) Falso.
3. El botón sirve para ver el mapa del Sitio.

a) Verdadero.
b) Falso.
4. Si los archivos se mueven de una carpeta a otra desde fuera de Dreamweaver, las
páginas se mostrarán correctamente.
a) Verdadero.
b) Falso.

5. No importa que las páginas sean voluminosas y ocupen mucha memoria.

a) Verdadero.
b) Falso.
6. Es conveniente que todas las páginas de un sitio sigan un mismo formato.

a) Verdadero.
b) Falso.
7. Una imagen de rastreo sirve para...

a) Insertar una barra de menús.
b) Establecer una imagen como fondo, que no se mostrará en el navegador.
c) Buscar imágenes en Internet, al pulsar sobre ella.
8. Para qué sirve este otro botón .

a) Para crear un sitio nuevo.
b) Para cambiar la vista del sitio.
c) Para elegir un color.
9. Los colores seguros para web son...

a) Los colores que no afectan a la vista.
b) Imágenes de fondo para los documentos.
c) Los colores que se muestran de la misma forma en Microsoft Internet Explorer y en

Netscape Navigator.

10. Los colores...

a) Se representan con un número hexadecimal.
b) Pueden personalizarse.
Corregir
Restablecer
Pág. Ev.
3.1
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Evaluación Unidad 4. El texto
Prueba evaluativa de la unidad 4. El texto
1. Las características del texto no pueden modificarse a través del inspector de

propiedades.
a) Verdadero.
b) Falso.
2. Es posible cambiar la alineación del texto.

a) Verdadero.
b) Falso.
3. El botón sirve para que el texto aparezca en negrita.

a) Verdadero.
b) Falso.
4. El tipo de números o viñetas de las listas pueden modificarse.

a) Verdadero.
b) Falso.

5. En los estilos CSS no hay actualización automática.

a) Verdadero.
b) Falso.
6. Todos los navegadores soportan las hojas de estilo CSS.

a) Verdadero.
b) Falso.
7. A la hora de seleccionar la fuente...

a) Aparecen conjuntos de fuentes en lugar de una sola.
b) La fuente tiene que ser descargada desde Internet.
c) La fuente tiene que ser de Macromedía.
8. Para qué sirve este otro botón .

a) Para crear una lista ordenada.
b) Para crear una lista desordenada.
c) Para aplicar sangría.
9. Los estilos CSS...

a) Son aplicables a párrafos.
b) Son aplicables a palabras seleccionadas.

10. Las hojas de estilo...

a) No son de actualización automática.
b) Permiten aplicar un estilo sobre todas las etiquetas de un mismo tipo.
Corregir
Restablecer
Pág. Ev.
4.1
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Evaluación Unidad 5. Hiperenlaces
Prueba evaluativa de la unidad 5. Hiperenlaces
1. Un hiperenlace es lo mismo que un hipervínculo, un vínculo, o un enlace.

a) Verdadero.
b) Falso.
2. Es posible asignar un vínculo a parte de una imagen.

a) Verdadero.
b) Falso.
3. Los vínculos vacíos no existen.

a) Verdadero.
b) Falso.
4. Es posible abrir el documento vinculado en una ventana nueva del navegador.

a) Verdadero.
b) Falso.
5. No es posible especificar vínculos a direcciones de correo electrónico desde

Dreamweaver.
a) Verdadero.
b) Falso.

6. El cursor cambia de forma al situarse encima del vínculo en el navegador.

a) Verdadero.
b) Falso.
7. Cuando el vínculo está definido sobre una imagen.

a) Ésta adquiere un tono azulado.
b) Aparecen una serie de puntitos en el borde al pulsar sobre ella.
c) Siempre aparece el borde azul alrededor de ella.
8. El vínculo vacío...
a) No necesita que se establezca nada como vínculo.
b) Tiene un formato diferente al del resto de vínculos.
c) Necesita que se inserte el símbolo # como vínculo.
9. Es posible especificar el color de...

a) Los vínculos.
b) Los vínculos activos.
c) Los vínculos visitados.
d) Cualquiera de las opciones anteriores.
10. El texto asignado a un hiperenlace siempre aparece subrayado.

a) Verdadero.
b) Falso.
Corregir
Restablecer
Pág. Ev.
5.1
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Evaluación Unidad 6. Imágenes
Prueba evaluativa de la unidad 6. Imágenes
1. Dentro de Dreamweaver puede modificarse el tamaño de las imágenes.

a) Verdadero.
b) Falso.
2. Pueden crearse vínculos y comportamientos sobre partes de una imagen.

a) Verdadero.
b) Falso.
3. La imagen aparece cuando se inserta un BMP.
a) Verdadero.
b) Falso.
4. Es preferible no guardar los botones Flash en el mismo directorio que los

documentos HTML.
a) Verdadero.
b) Falso.

5. Los rollovers son imágenes con extensión SWF.

a) Verdadero.
b) Falso.
6. Es posible probar el funcionamiento del botón Flash desde Dreamweaver.

a) Verdadero.
b) Falso.
7. Es preferible que la opción "Carga previa de imagen de sustitución" ...

a) Sólo esté desactivada para los rollovers.
b) Esté desactivada.
c) Esté activada.
8. El texto Flash ...

a) Es similar a un rollover.
b) Hace que se intercambie el color del texto.
c) Cualquiera de las dos anteriores opciones.
9. La barra de navegación ...

a) ...ha de crearse a partir de botones Flash.
b) ...no permite identificar cual de los vínculos está activo.

10. Los botones de la barra de navegación...

a) Pueden aparecer de forma vertical.
b) Pueden aparecer de forma horizontal.
Corregir
Restablecer
Pág. Ev.
6.1
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Evaluación Unidad 7. Tablas
Prueba evaluativa de la unidad 7. Tablas
1. Las tablas están formadas por un conjunto de celdas, distribuidas en filas y

columnas.
a) Verdadero.
b) Falso.
2. El ancho de una tabla no puede ser definido como porcentaje.

a) Verdadero.
b) Falso.
3. Una tabla puede estar alineada a la izquierda, al centro o a la derecha.

a) Verdadero.
b) Falso.
4. Puede establecerse la alineación del contenido de la celda de forma horizontal y

vertical.
a) Verdadero.
b) Falso.

5. No es posible insertar tablas dentro de las celdas de otras tablas.

a) Verdadero.
b) Falso.
6. El modo de tablas expandidas se utiliza para dibujar páginas con gran volumen de
contenido.
a) Verdadero.
b) Falso.
7. El botón sirve para...

a) ...Insertar una columna.
b) ...Dividir celdas.
c) Combinar celdas.
8. A la hora de combinar celdas ...

a) Sólo es posible combinar celdas contiguas.
b) La combinación da como resultado otra celda.
c) Cualquiera de las dos anteriores opciones.
9. A la hora de insertar filas ...

a) ...pueden insertarse debajo de la selección.
b) ...pueden insertarse a la derecha de la selección.

10. Las columnas de una tabla ...

a) No pueden eliminarse.
b) Están formadas por celdas.
Corregir
Restablecer
Pág. Ev.
7.1
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Evaluación Unidad 8. Marcos
Prueba evaluativa de la unidad 8. Marcos
1. Los marcos o frames sirven para distribuir mejor los datos de las páginas.
a) Verdadero.
b) Falso.
2. Los marcos no permiten mejorar la funcionalidad ni la apariencia de las páginas.

a) Verdadero.
b) Falso.
3. Cada uno de los marcos de una página contiene un documento HTML individual.
a) Verdadero.
b) Falso.
4. Es posible editar los documentos contenidos en los marcos desde la página que
contiene el grupo de marcos.
a) Verdadero.
b) Falso.

5. Todos los documentos que contienen marcos tienen que tener una página en cada
uno de ellos.
a) Verdadero.
b) Falso.
6. Cada marco tiene asignado un nombre, que no puede cambiarse.

a) Verdadero.
b) Falso.
7. El marco padre ...

a) ...es la página de marcos.
b) ...es el marco sobre el que se han insertado el resto de marcos.
c) Siempre es el marco de la izquierda
8. El botón ...
a) Sólo se utiliza para guardar los documentos contenidos en los marcos.
b) No permite guardar los documentos contenidos en los marcos.
c) No es conveniente usarlo para guardar por primera vez los marcos.
9. Si la opción "Mismo tamaño" está activa ...

a) ...indica que los distintos marcos de la página tienen el mismo tamaño .
b) ...indica que los usuarios no podrán variar las medidas del marco desde el navegador.
c) ...indica que la página de marcos se visualizará en el navegador con el mismo tamaño

que el del documento en Dreamweaver.

10. Para cada uno de los marcos ...

a) Puede indicarse si aparecerán o no las barras de desplazamiento cuando el documento
del marco no pueda visualizarse completamente.
b) Puede indicarse un color de borde diferente.
Corregir
Restablecer
Pág. Ev.
8.1
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Evaluación Unidad 9. Formularios
Prueba evaluativa de la unidad 9. Formularios
1. Los formularios no pueden utilizarse para conocer las opiniones, dudas, y otra serie
de datos sobre los usuarios.
a) Verdadero.
b) Falso.
2. Para que un formulario funcione correctamente es necesario programar en algún

lenguaje de programación, como puede ser VBScript.
a) Verdadero.
b) Falso.
3. El área de texto permite escribir varias líneas de texto.

a) Verdadero.
b) Falso.
4. Las casillas de verificación siempre tienen que estar desactivadas inicialmente.

a) Verdadero.
b) Falso.

5. Las etiquetas se utilizan para ponerle nombres al resto de elementos de formulario.

a) Verdadero.
b) Falso.
6. No es recomendable utilizar tablas para organizar los elementos de los formularios.

a) Verdadero.
b) Falso.
7. El campo de texto ...

a) ...sólo permite escribir una línea al usuario.
b) ...puede ser definido como contraseña.
c) Cualquiera de las dos opciones anteriores.
8. Si existen varios botones de opción en un mismo formulario ...

a) Se llamarán casillas de verificación.
b) Sólo puede haber uno activado.
c) Cada uno será de un color diferente.
9. Un botón ...
a) ...puede tener asignada la acción "Enviar formulario".
b) ...puede tener asignada la acción "Restablecer formulario".

10. La validación de formularios ...

a) Hace que Javascript valide los valores introducidos en el formulario antes de que se
envíe.
b) Consiste en comprobar si las etiquetas corresponden a los elementos adecuados.
Corregir
Restablecer
Pág. Ev.
9.1
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Evaluación Unidad 10. Multimedia
Prueba evaluativa de la unidad 10. Multimedia
1. Las películas Flash son animaciones.

a) Verdadero.
b) Falso.
2. El botón está en la pestaña de Formulario, en el panel de Insertar.

a) Verdadero.
b) Falso.
3. La opción Bucle indica que al finalizar la película, ésta volverá a comenzar desde el
principio.
a) Verdadero.
b) Falso.
4. Al incluir un archivo de audio, es preferible que no ocupe mucho espacio, aunque

esto implique que sea de mala calidad.
a) Verdadero.
b) Falso.

5. Para que no se muestren los controles de audio, los campos Al y An deben valer
cero.
a) Verdadero.
b) Falso.
6. Los sonidos se reproducen automáticamente al cargarse la página.

a) Verdadero.
b) Falso.
7. Todos los objetos insertados a través de la opción Plug-in...

a) ...son archivos de Flash.
b) ...precisan que el usuario tenga instalado un reproductor o un plug-in apropiado para

reproducirlos.
c) ...son vídeos de buena calidad.
8. El campo URL plg ...

a) ...es un vínculo a un archivo insertado como plug-in.
b) ...abre la página oficial de plug-ins de Internet.
c) ...permite establecer la página en la que el usuario puede encontrar el plug-in.
9. La línea de código autostart="false" ...

a) ...hace que el archivo de vídeo no se reproduzca automáticamente.
b) ...hace que el archivo de audio no se reproduzca automáticamente.

10. La línea de código loop="true" ...

a) Puede insertarse desde el inspector de propiedades de un archivo de audio.
b) Hace que la reproducción se repita.
Corregir
Restablecer
Pág. Ev.
10.1
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Evaluación Unidad 11. Plantillas
Prueba evaluativa de la unidad 11. Plantillas
1. Las plantillas son archivos con la extensión DWT que se guardan en el sitio web.
a) Verdadero.
b) Falso.
2. Cuando se modifica el diseño de una plantilla, no se pueden actualizan todas las

páginas basadas en ella.
a) Verdadero.
b) Falso.
3. No es posible modificar las propiedades de una página que está basada en una
plantilla, a excepción del título.
a) Verdadero.
b) Falso.
4. Las plantillas sólo pueden crearse desde cero.

a) Verdadero.
b) Falso.

5. Una forma de crear una plantilla desde cero es a través del panel Activos.
a) Verdadero.
b) Falso.
6. Todos los elementos de una plantilla están bloqueados por defecto.

a) Verdadero.
b) Falso.

a) ...abrir todas las plantillas en Dreamweaver.
b) ...elegir una imagen de fondo para la plantilla.
c) ...crear una nueva plantilla.
a) ...poder trabajar con las plantillas dentro del panel Activos.
b) ...insertar una región editable en la plantilla.
c) ...abrir el panel Activos.
9. Las zonas editables...

a) ...pueden contener objetos, que aparecerán por defecto en aquellos documentos que
se basen en la plantilla.
b) ...no pueden tener el mismo nombre que otras zonas editables de la plantilla.

10. Al modificar una plantilla...

a) Las páginas que se basan en ella no se actualizarán automáticamente.
b) Las páginas que se basan en ella se actualizarán automáticamente.
Corregir
Restablecer
Pág. Ev.
11.1
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Evaluación Unidad 12. HTML desde Dreamweaver
Prueba evaluativa de la unidad 12. HTML desde Dreamweaver
1. El lenguaje HTML está basado en etiquetas.

a) Verdadero.
b) Falso.
2. Las etiquetas disponen de atributos que permiten definir características del

elemento sobre el que actúan.
a) Verdadero.
b) Falso.
3. Un INTRO dentro del código HTML equivale a la etiqueta <BR>.

a) Verdadero.
b) Falso.
4. El mecanismo de completar etiquetas permite completarlas, pero siempre de

izquierda a derecha.
a) Verdadero.
b) Falso.

5. A través del editor gráfico es posible ...

a) ...ver el código HTML.
b) ...utilizar el mecanismo de completar etiquetas.
c) ...ver si hay algunos errores en el código HTML.
6. Durante la búsqueda y reemplazo...

a) ...aparece la lista de todas la imágenes del sitio web.
b) ...sólo es posible buscar dentro del documento actual.
c) ...no es posible deshacer los cambios en los documentos que están cerrados.
7. Para reemplazar una imagen por otra en un único documento ...

a) ...es indispensable utilizar la herramienta de Buscar y reemplazar.
b) ...resulta más sencillo abrir ese documento para reemplazarla, aunque puede ser
necesario utilizar la herramienta Buscar y reemplazar para saber qué documento es el que
contiene dicha imagen.
c) ....hay que buscar Texto.
8. El Inspector de código ...

a) ...muestra el código HTML de la misma forma que lo hace la vista Diseño.
b) ...no puede situarse en cualquier parte de la pantalla.

9. La herramienta de Buscar y reemplazar ...

a) ...permite buscar y reemplazar código fuente en todo el sitio web.
b) ...permite buscar y reemplazar texto en todo el sitio web.
10. La herramienta autocompletar etiquetas aparece al introducir la etiqueta y dejar

un espacio en blanco.
a) Verdadero.
b) Falso.
Corregir
Restablecer
Pág. Ev.
12.1
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Evaluación Unidad 13. Otros elementos
Prueba evaluativa de la unidad 13. Otros elementos
1. Para crear una marquesina hay que insertar las etiquetas <MARQUEE> y </
MARQUEE> en el código.
a) Verdadero.
b) Falso.
2. La marquesina se desplaza por defecto de arriba a abajo.

a) Verdadero.
b) Falso.
3. La fecha de última modificación puede contener el día de la semana.

a) Verdadero.
b) Falso.
4. La fecha de última modificación siempre se actualiza automáticamente al guardar

el documento.
a) Verdadero.
b) Falso.

5. En el caso de que la página no se actualice hasta que pase cierto tiempo...

a) ...es preferible incluir la fecha de modificación.
b) ...es preferible no incluir la fecha de modificación.
c) ...es preferible incluir el día de la semana en la fecha de última modificación.
6. La regla horizontal ...

a) ...sólo puede insertarse a través del código.
b) ...suele utilizarse para separar secciones dentro de una misma página.
c) Ninguna de las opciones anteriores.
7. Visualizar el código fuente de una página de Internet resulta útil para ...
a) ...ver cómo ha sido estructurada dicha página.
b) ...crear una animación Flash similar a la que se haya utilizado en ella.
c) Cualquiera de las dos opciones anteriores.
8. De las reglas horizontales es posible ...

a) ...modificar su altura.
b) ...indicar si aparecerán sombreadas o no.

9. El código JavaScript ...

a) ...puede ser generado automáticamente por Dreamweaver al insertar un
comportamiento.
b) ...necesita que se inserte la etiqueta <SCRIPT language=JavaScript>.
10. ¿Cómo podemos ver el código fuente de una página desde el navegador?.
a) Mediante el menú contextual haciendo clic con el botón derecho y seleccionando Ver
código fuente.
b) Accediendo por el menú Ver - Código fuente.
Corregir
Restablecer
Pág. Ev.
13.1
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Evaluación Unidad 14. Capas
Prueba evaluativa de la unidad 14. Capas
1. Las capas pueden sitúarse en cualquier parte de la página.

a) Verdadero.
b) Falso.
2. Dentro del recuadro de la capa es posible insertar texto e imágenes.

a) Verdadero.
b) Falso.
3. Las capas no pueden solaparse entre sí.

a) Verdadero.
b) Falso.
4. El icono sirve para insertar una capa.

a) Verdadero.
b) Falso.

5. El atributo Indice Z significa...

a) El orden en el que han sido insertadas las capas.
b) El número de orden de colocación de las capas.
c) El número de capas que hay en un documento.
6. La visibilidad Hidden indica...

a) Que la capa es visible.
b) Que la capa es visible aunque haya otra capa encima de ella.
c) Que la capa está oculta.
7. Las capas...
a) ...pueden tener color de fondo.
b) ...no pueden tener una imagen de fondo.
c) ...nunca pueden estar ocultas.
8. En el panel Capas...
a) ...puede establecerse la visibilidad de la capa.
b) ...puede establecerse el índice Z de la capa.

9. Una capa...
a) ...no puede contener animaciones Flash.
b) ...solapará a aquellas capas cuyo índice Z sea mayor que el suyo.
10. El ID de capa es el nombre de la capa.

a) Verdadero.
b) Falso.
Corregir
Restablecer
Pág. Ev.
14.1
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Evaluación Unidad 15. Comportamientos
Prueba evaluativa de la unidad 15. Comportamientos
1. Los comportamientos son acciones que suceden cuando los usuarios realizan algún
evento sobre un objeto.
a) Verdadero.
b) Falso.
2. Los comportamientos existen como código HTML.

a) Verdadero.
b) Falso.
3. Es necesario escribir código JavaScript para programar los comportamientos.

a) Verdadero.
b) Falso.
4. El botón señala un nuevo Comportamiento en el panel Comportamientos.

a) Verdadero.
b) Falso.

5. Algunos comportamientos no funcionan para algunos navegadores, por lo que

dependiendo del navegador elegido aparecerán unos u otros comportamientos
posibles.
a) Verdadero.
b) Falso.
6. Es necesario elegir el navegador cada vez que se vaya a insertar un

comportamiento.
a) Verdadero.
b) Falso.
7. El evento onMouseOver significa...

a) ...al hacer clic.
b) ...mostrar capa.
c) ...cuando el ratón esté sobre.
8. El evento onclick significa...

a) ...al hacer clic.
b) ...cerrar la ventana del navegador.
c) ...cuando el ratón esté sobre
9. Utilizando los comportamientos es posible hacer...

a) ...que una capa se muestre al pulsar sobre un objeto.
b) ...que la ventana del navegador intente cerrarse al situar el ratón sobre una imagen.

10. La línea JavaScript "window.close();" permite.

a) Cerrar la ventana del navegador, pero sólo al producirse el evento de pulsar sobre un
objeto.
b) Cerrar la ventana del navegador al producirse el evento especificado sobre un objeto

determinado.
Corregir
Restablecer
Pág. Ev.
15.1
Septiembre - 2007.

Ejercicios Unidad 17. Estilos CSS Avanzados Búsqueda
Ejercicio 1: Crear una hoja de estilos.
1 Abre el sitio blog.
2 Crea un archivo CSS llamado estilo_blog.css.
3 Vincula la nueva hoja de estilos a la plantilla blog.dwt.php.
4 Copia la carpeta imagenes que podrás encontrar en la carpeta ejerciciosdream del curso en tu sitio.
Modifica la plantilla blog.dwt.php de la siguiente forma:
5 Crea un bloque div de identificador contenido y que contenga una sección editable de plantilla.
6 Encierra también el menú de salto en un bloque de identificador seccion.
7 Dentro de ese bloque añade un párrafo con el texto Categorías delante del menú de salto.
8 Después del menú de salto y dentro del bloque seccion añade estos párrafos:
Principal
Administración
Enlaces
Cada palabra tendrá un vínculo a las páginas .../index.php, ../admin.php y .../enlaces.php respectivamente.
9 A continuación coloca estos dos bloques (contenido y seccion) dentro de un bloque con Id contenedor.
Ejercicio 2: Controles de Fuente.
1 Abre el archivo estilo_blog.css.
2 Añade un estilo para el body para que se muestre el tipo de fuente Tahoma, de 14 píxeles de tamaño, 1 píxel
de separación entre caracteres y de color negro.
3 Crea un estilo para una clase llamada titulo que establezca un tamaño de fuente de 18 píxeles.
4 Crea un estilo para un clase llamada datos que establezca que el texto esté alineado a la derecha, de 12 píxeles
de tamaño, en cursiva y con un alto de línea de 0.2.
5 Finalmente haz que todos los enlaces dentro de un párrafo no tengan subrayado y sean de color negro.

Ejercicio 3: Controles de Fondo.
2 El body tiene que tener como fondo la imagen fondo_body.gif que encontrarás en la carpeta imagenes que
has copiado, no debe repetirse.
3 Crea un estilo para el elemento con id contenedor que tenga el fondo blanco, y la imagen fondo.gif que
encontrarás en la carpeta imagenes sin repetición.
4 Crea un estilo para el elemento con id seccion que tenga el fondo blanco, y la imagen fondo_seccion.gif
que encontrarás en la carpeta imagenes sin repetición.
5 Al estilo de la clase titulo añádele un fondo de imagen titulo.gif (en la carpeta de imagenes) y que no se repita.
6 Por último, los enlaces que se encuentren dentro de los párrafos deberán tener un color de fondo igual
a #CCFF66.
Ejercicio 4: Controles de Márgenes y Borde.
2 El body tiene que tener un margen de 0 píxeles por todos los lados.
3 El bloque con id seccion debe tener un padding de 20 píxeles menos en el lado superior que ha de ser de 90.
También añádele un borde de 2 píxeles en color negro en los lados inferior, izquierda y derecha.
4 Al formulario que se encuentra en el bloque seccion le aplicaremos un margen inferior de 10 píxeles.
5 El bloque contenido debe tener un padding en el lado superior de 190 píxeles, 300 en el lado derecho, y 30 en
el inferior e izquierdo.
6 La clase titulo deberá tener un padding superior de 30 píxeles y uno izquierdo de 35.
7 Los enlaces que se encuentren dentro de un párrafo deberán tener un padding izquierdo y derecho de 2 píxeles.
Ejercicio 5: Controles de Bloque.
2 El bloque contenedor debe medir 800 píxeles de ancho.
3 El bloque seccion debe medir 136 píxeles de ancho.
Ejercicio 6: Controles de Posición.
2 El bloque seccion debe tener una posición absoluta respecto a la ventana del navegador, lo posicionaremos a
166 píxeles del borde superior y a 533 del borde izquierdo.

Pág. Ej.17
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Ejercicios propuestos Servidor de Pruebas
Ejercicios Unidad 19. Servidor de Pruebas Búsqueda
Ejercicio 1:
1 Ejecuta WAMP.
2 Crea un tabla llamada compras con 5 campos en la base de datos bd_libreria.
4 Al segundo lo llamaremos Nombre, de tipo VARCHAR y con longitud 60.
5 Al tercero lo llamaremos Tarjeta, de tipo BIGINT y con longitud 16.
6 Al cuarto lo llamaremos Tipo_Tarjeta, de tipo VARCHAR y con longitud 13.
7 Al quinto lo llamaremos Id_Libro, de tipo INT y con longitud 11.
8 Importa los datos contenidos en el archivo compras-latin1.txt que se encuentra en la carpeta de ejerciciosdream
en la carpeta libreria.
9 La codificación de este archivo es de tipo latin1.
Pág. Ej.19
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Ejercicios propuestos Servidor de Pruebas

Curso de Adobe Dreamweaver CS3. Ejercicios propuestos Páginas Dinámicas
Ejercicios Unidad 20. Páginas Dinámicas Búsqueda
Ejercicio 1:
1 Modificar el archivo usados.php para que se muestren sólo los libros usados.
2 Debajo del listado de registros deberás mostrar una línea en la que se muestre un elemento de páginación
Anterior, este elemento debe ocultarse en la primera página.
3 En la misma línea deberás añadir un contador de registros que muestre el recuento de este modo: Registro Final
de Total de Registros.
4 Finalmente añade un elemento Siguiente, este elemento debe ocultarse en la última página.
5 Haz que cuando el usuario haga clic en el título de un libro, se abra la página comprar.php con los datos de ese
libro para comprarlo.
Ejercicio 2:
1 Modifica el archivo ofertas.php para que muestre los 8 libros más baratos.
2 Haz que cuando el usuario haga clic en el título de un libro, se abra la página comprar.php con los datos de ese
libro para comprarlo.
Pág. Ej. 20
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Ejercicios propuestos Páginas Dinámicas

Curso de Adobe Dreamweaver CS3. Ejercicios propuestos Cómo crear un Blog
Ejercicios Unidad 21. Cómo crear un Blog Búsqueda
Ejercicio 1:
1 Modifica el archivo admin.php para añadirle dos nuevos párrafos antes del que dice Modificar comentarios.
En el primero debe leerse Modificar entrada, y debe estar enlazado a listado_entradas.php.
El segundo debe decir Modificar categoría, y debe estar enlazado a listado_categorias.php.
2 Crea un archivo llamado listado_entradas.php basado en la plantilla blog.dwt.php que liste el título y la fecha
de cada una de las entradas.
Al lado del registro deberás introducir la imagen imagenes/edit.png que enlace con el archivo modifica_entrada.
php para modificar esa entrada.
Luego añade la imagen imagenes/trash.png que enlace con el archivo elimina_entrada.php para eliminar esa entrada.
3 Haz que se muestren los registros de 6 en 6 y añade al pie del listado una barra de navegación de registros.
4 Crea un archivo llamado listado_categorias.php basado en la plantilla blog.dwt.php que liste el nombre de cada
una de las categorías.
Al lado del registro deberás introducir la imagen imagenes/edit.png que enlace con el archivo modifica_categoria.
php para modificar esa categoría.
Luego añade la imagen imagenes/trash.png que enlace con el archivo elimina_categoria.php para eliminar
esa categoría.
5 Haz que se muestren los registros de 6 en 6 y añade al pie del listado una barra de navegación de registros.
Ejercicio 2:
1 Crea un página de modificación de entradas llamada modifica_entrada.php basada en la plantilla blog.dwt.php

que funcione de la misma forma que la página modifica_comentario.php.
2 Crea un página de modificación de categorías llamada modifica_categoria.php basada en la plantilla blog.dwt.

php que funcione de la misma forma que la página modifica_comentario.php.
Ejercicio 3:
Curso de Adobe Dreamweaver CS3. Ejercicios propuestos Cómo crear un Blog
1 Crea un página de eliminación de entradas llamada elimina_entrada.php basada en la plantilla blog.dwt.php

que funcione de la misma forma que la página elimina_comentario.php.
1 Crea un página de eliminación de categorías llamada elimina_categoria.php basada en la plantilla blog.

dwt.phpque funcione de la misma forma que la página elimina_comentario.php.
Ejercicio 4:
1 Restringe el acceso a las páginas:
elimina_categoria.php
elimina_entrada.php
listado_categorias.php
listado_entradas.php
modifica_categoria.php
modifica_entrada.php
2 Crea un enlace Desconectar en la parte superior de las siguientes páginas:
elimina_categoria.php
elimina_entrada.php
listado_categorias.php
listado_entradas.php
modifica_categoria.php
modifica_entrada.php
El enlace deberá estar en un párrafo de clase datos.
Pág. Ej. 21
Septiembre - 2007.

Ejercicios Unidad 22. XML y RSS Búsqueda
Ejercicio 1: Blog.
1 En el sitio blog crea un nuevo archivo llamado enlaces.php basado en la plantilla blog.dwt.php, en esta
página deberá aparecer un listado de enlaces provinentes del archivo RSS http://del.icio.us/rss/aulaClic.
Deberás separar estos enlaces en dos secciones, los que pertenecen al subject office y los que no.
Pág. Ej.22
Septiembre - 2007.


Curso de Adobe Dreamweaver CS3. Ejercicios propuestos Insertar contenido XML
Ejercicios Unidad 23. Acceso a datos con Spry Búsqueda
Ejercicio 1: Insertar contenido XML
1 En la carpeta ajax de los ejercicios del curso encontrarás un archivo llamado index.htm.
Modifícalo para mostrar en el lateral la relación de cursos de aulaclic mostrando únicamente su nombre enlazado a
su dirección en internet.
Seguidamente repite los pasos para los artículos.
Encontrarás ambos archivos XML en la misma carpeta que index.htm.
Pág. Ej.23
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Ejercicios propuestos Insertar contenido XML

Curso de Adobe Dreamweaver CS3. Ejercicios propuestos AJAX y Spry Framework
Ejercicios Unidad 24. AJAX y Spry Framework Búsqueda
Ejercicio 1:
1 En el archivo catalogo.php del sitio libreria, haz que las columnas se puedan ordenar haciendo clic en su cabecera
de modo que si pulsas una vez se ordenen de forma ascendente y si vuelves a pulsar lo hagan en descendente.
2 Añade una clase CSS a la hoja de estilos estilo_libreria.css llamada destacado, haz que el texto sea de
color #E35331 y que se muestre el puntero del ratón pointer. Deberás aplicarle este estilo a las cabeceras de
los registros.
Pág. Ej.24
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Ejercicios propuestos AJAX y Spry Framework

Curso de Adobe Dreamweaver CS3. Ejercicios propuestos Spry y Formularios
Ejercicios Unidad 25. Spry y Formularios Búsqueda
Ejercicio 1:
1 Modifica el archivo consultas.htm del sitio animales, haz que el campo de texto donde el usuario tiene que
introducir su email sea un campo de validación.
2 Modifica el desplegable para que la primera opción --- Elige opción --- no pueda ser seleccionada.
3 Modifica el campo consulta para que sólo se puedan introducir 100 caracteres.
4 Por último haz que el campo Nombre sea obligatorio.
Pág. Ej.25
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Ejercicios propuestos Spry y Formularios

Curso de Adobe Dreamweaver CS3. Ejercicios propuestos Controles Avanzados Spry
Ejercicios Unidad 26. Controles Avanzados Spry Búsqueda
Ejercicio 1:
1 Abre el archivo index.htm de la carpeta ajax de la carpeta de ejercicios del curso.
2 Inserta un espacio antes de Índice de cursos.
3 Crea en ese lugar un control de tipo Ficha.
4 Renombra las fichas para que se lea Cursos y Artículos.
5 Coloca el listado de cursos y artículos en sus respectivas fichas.
Pág. Ej.26
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Ejercicios propuestos Controles Avanzados Spry

Curso de Adobe Dreamweaver CS3. Evaluación Unidad 16.
Prueba evaluativa de la unidad 16. Comportamientos Avanzados
1. Es aconsejable asociar el comportamiento de mostrar mensajes emergentes

cuando se produzca el evento...
a) onLoad.
b) onClick.
2. Cuando cambiamos el texto de la barra de estado tenemos que tener en cuenta que
al abandonar el elemento que lo ejecuta habrá que restaurar el contenido de la barra,
utilizaremos el evento...
a) onMouseOut.
b) onMouseUp.
3. Para que un mensaje en la barra de estado se muestre en la página completa habrá

que...
a) asociarlo al evento onLoad del body.
b) asociarlo al evento onMouseOver del body.
4. Cargar imágenes previamente a la carga completa del documento es muy útil

excepto cuando las imágenes pesan demasiado o son muchas.
a) Verdadero.
b) Falso.

5. Asociaremos el comportamiento de la carga previa de imágenes al evento...

a) onClick del body.
b) onLoad del body.
6. Si el usuario no tiene instalado un plug-in podemos redirigirlo utilizando el

comportamiento Comprobar Navegador.
a) Verdadero.
b) Falso.
7. Si utilizamos el comportamiento de abrir ventana del navegador es posible que no

funcione si...
a) el usuario tiene un bloqueador de pop-ups.
b) el usuario tiene el javascript desactivado.
c) Ambas respuestas son correctas.
8. Los navegadores Internet Explorer y Mozilla Firefox siempre muestran la

información contenida en las páginas web de forma idéntica.
a) Verdadero.
b) Falso.
9. Es posible asociar un acción javascript a los siguientes elementos:

a) una imagen.
b) una capa de tipo Div PA.
c) un párrafo.
d) cualquiera de las anteriores.

10. El botón Ir en un menú de salto es opcional.

a) Verdadero.
b) Falso.
Corregir
Restablecer
Pág. Ev.
16.1
Septiembre - 2007.

Prueba evaluativa de la unidad 17. Estilos CSS Avanzados
1. El selector p.rojo corresponde a ...

a) un párrafo que tiene como clase rojo.
b) cualquier párrafo con texto rojo.
2. El selector #contenedor corresponde a...

a) cualquier elemento que tenga como clase contenedor.
b) un único elemento con el id contenedor.
3. Podemos asociar estilos a etiquetas con determinados atributos encerrándolos

entre...
a) Paréntesis: a(href).
b) Corchetes: a[href].
4. Cuando queramos asociar un estilo a un elemento con determinado valor en un

atributo. El valor deberá ir encerrado entre comillas.
a) Verdadero, de esta forma: a[href="_blank"].
b) Falso, debe ir encerrado entre asteríscos de esta forma: a{href=*_blank*}.

5. El orden de la propiedad border es:

a) border: width color style;
b) border: width style color;
6. Podemos cambiar las viñetas de una lista por imágenes utilizando la propiedad...
a) list-image.
b) list-style-image.
7. La diferencia entre la propiedad margin y padding es:

a) Margin mide la distancia del borde con el exterior.
b) Padding mide la distancia del borde con el interior.
c) Ambas respuestas son correctas.
8. Para dejar de aplicar un elemento flotante sobre algo deberemos utilizar la

propiedad...
a) clear.
b) break.
9. Los valores relative y absolute de la propiedad position se diferencian en:

a) Relative establece la posición del texto tomando como referencia su posición en el
flujo normal.
b) Absolute establece la posición del texto tomando como referencia la ventana del
navegador.
c) Las respuestas anteriores son correctas.
d) Las respuestas anteriores son falsas.

10. Para que no se produzcan saltos de línea en un elemento de bloque deberemos

utilizar la propiedad white-space. Pero, ¿qué valor deberemos darle?
a) continue.
b) nowrap.
Corregir
Restablecer
Pág. Ev.
17.1
Septiembre - 2007.

Prueba evaluativa de la unidad 18. Estilos CSS Avanzados
1. Un servidor FTP puede nombrarse de 2 formas diferentes.

a) Verdadero.
b) Falso.
2. Es posible determinar la carpeta donde se subirán los archivos al sitio remoto

especificándolo en el campo:
a) Servidor FTP.
b) Directorio del servidor.
3. Al obtener los archivos que se encuentran en el servidor, estos se desprotegerán

automáticamente.
a) Verdadero.
b) Falso.
4. La vista remota del panel Archivos muestra los archivos que se encuentran en el
servidor.
a) Verdadero.
b) Falso.

5. De forma predeterminada, Dreamweaver se desconecta del servidor a los:

a) 15 minutos.
b) 30 minutos.
6. Proteger un archivo significa...

a) Establecerlo como sólo lectura para que nadie pueda modificarlo.
b) Borrarlo del servidor para que nadie pueda modificarlo.
7. Los archivos que hayas subido al servidor y no se encontraban antes se protegerán

automáticamente.
a) Sólo si la opción Permitir desproteger y proteger archivo se activo en la definición
del sitio.
b) Sí, siempre.
c) No, nunca.
8. Es posible subir archivos a un servidor sin establecer un sitio remoto.

a) Verdadero.
b) Falso.
9. La sincronización bidireccional supone que...

a) Los archivos del servidor local que sean más nuevos que en el remoto se copiarán en
el remoto.
b) Los archivos del servidor remoto que sean más nuevos que en el local se copiarán en
el local.
c) Las respuestas anteriores son correctas.
d) Las respuestas anteriores son falsas.

10. La opción Eliminar archivos remotos no existentes en la unidad local borrará los
elementos que sólo se encuentren en el servidor local.
a) Verdadero.
b) Falso.
Corregir
Restablecer
Pág. Ev.
18.1
Septiembre - 2007.

Prueba evaluativa de la unidad 19. Servidor de Pruebas
1. Un servidor de pruebas es necesario para ejecutar los archivos php en el sitio local.
a) Verdadero.
b) Falso.
2. Un archivo PHP se ejecuta en el servidor antes de enviar una respuesta a la

petición del cliente.
a) Verdadero.
b) Falso.
3. Podemos reconocer código PHP en una página porque se encuentre encerrado

entre las etiquetas:
a) <code? y ?>.
b) <? y ?>.
4. El paquete WAMP instalará en nuestro ordenador un servidor capaz de correr PHP,

ASP y C#.
a) Verdadero.
b) Falso.

5. Localhost es el lugar en tu máquina desde donde podremos ejecutar archivos PHP

una vez instalado WAMP.
a) Verdadero.
b) Falso.
6. WAMP instala dos servicios, Apache y MySQL, ¿cuál se ocupa de correr PHP?
a) MySQL.
b) Apache.
7. ¿Qué interfaz utilizaremos para crear bases de datos?

a) MySQL.
b) phpMyAdmin.
c) Ninguna de las anteriores.
8. Es aconsejable establecer un juego de caracteres en nuestras bases de datos para

asegurarnos de que su contenido se visualiza correctamente.
a) Verdadero.
b) Falso.
9. Al crear un campo en una base de datos, si queremos que un valor en ese campo no
se repita en más de un registro deberemos seleccionar la opción...
a) Nulo.
b) Extra.
c) Único.
d) Índice.

10. Es posible establecer privilegios a un usuario para que sólo pueda acceder a las
opciones administrativas de una base de datos.
a) Verdadero.
b) Falso.
Corregir
Restablecer
Pág. Ev.
19.1
Septiembre - 2007.

Prueba evaluativa de la unidad 20. Páginas Dinámicas
1. Para empezar a crear páginas de acceso a datos es imprescindible crear una

conexión con la base de datos.
a) Verdadero.
b) Falso.
2. Un Juego de Registros es un conjunto de registros extraídos de la base de datos

que podremos utilizar en nuestras páginas utilizando el texto dinámico.
a) Verdadero.
b) Falso.
3. Si en un juego de registros queremos que se muestren solamente aquellos que

cumplan determinada condición utilizaremos...
a) La ordenación.
b) El filtrado.
4. Si en el cuadro de diálogo Juego de Registros queremos crear un filtro respecto a

un valor determinado seleccionaremos la opción...
a) Valor introducido.
b) Parámetro URL.

5. Si en el cuadro de diálogo Juego de Registros queremos crear un filtro respecto a

una variable enviada desde un formulario seleccionaremos la opción...
a) Valor introducido.
b) Parámetro URL.
c) Ninguna de las anteriores.
6. No es posible aplicar cualquier estilo CSS sobre un texto dinámico.

a) Verdadero.
b) Falso.
7. La barra de navegación de juego de registros combina las opciones de...
a) Filtrado y paginación.
b) Paginación y recuento.
c) Ocultación de regiones y paginación.
8. ¿Qué tipo de método deberemos utilizar en un formulario para que las variables se
pasen correctamente?
a) GET.
b) POST.
9. Al pasar un parámetro deberemos utilizar el siguiente símbolo:

a) pagina.php&parametro=valor.
b) pagina.php#parametro=valor.
c) pagina.php?parametro=valor.
d) Ninguna de las anteriores.

10. La vista LiveData te puede mostrar una vista rápida de una página dinámica
presentando los datos de los registros en pantalla.
a) Verdadero.
b) Falso.
Corregir
Restablecer
Pág. Ev.
20.1
Septiembre - 2007.

Prueba evaluativa de la unidad 21. Cómo crear un Blog
1. El contenido de un blog nunca cambia, es estático. Una vez introduces su contenido

no tendrás la necesidad de modificarlo más.
a) Verdadero.
b) Falso.
2. Es aconsejable organizar las entradas de un blog por temas o categorías para

mantener una estructura más accesible.
a) Verdadero.
b) Falso.
3. Todas las páginas del blog deben ser accesibles a cualquier persona que quiera
verlas.
a) Verdadero.
b) Falso.
4. Utilizaremos la vista de relaciones para determinar que si se borra una entrada

también lo hagan todos sus comentarios asociados.
a) Verdadero.
b) Falso.

5. Para provocar el borrado de una entrada al borrar su categoría asociada, ¿qué

opción deberemos seleccionar?
a) SET NULL.
b) CASCADE.
6. En la creación de un blog no nos será necesario crear sentencias SQL complejas,

bastará con las que podemos crear desde la vista Simple del editor de Dreamweaver.
a) Verdadero.
b) Falso.
7. Es aconsejable guardar la fecha de cada entrada para poder mostrarlas en orden de

creación.
a) Verdadero.
b) Falso.
8. Para poder utilizar la opción Conectar usuario será imprescindible haber

creado un formulario con antelación para poder introducir el nombre y contraseña.
a) Verdadero.
b) Falso.
9. ¿Es posible crear diferentes niveles de acceso de seguridad?

a) Sí.
b) No.
10. Dreamweaver utiliza cookies para recordar la entrada de un usuario con acceso a
la interfaz privada. Si no las tienes activadas no podrás visualizar las páginas
protegidas.
a) Verdadero.
b) Falso.

Corregir
Restablecer
Pág. Ev.
21.1
Septiembre - 2007.

Prueba evaluativa de la unidad 22. XML y RSS
1. Para poder incluir contenido XML o RSS en nuestras páginas deberemos crear un
nuevo archivo de tipo...
a) XML.
b) XSLT.
2. Para previsualizar el resultado de un archivo que contiene información importada

desde un archivo XML o RSS podremos utilizar la vista LiveData.
a) Verdadero.
b) Falso.
3. Al utilizar repeticiones de región podremos utilizar filtros. Estos filtros son más
avanzados que los que utilizamos en los juegos de registros.
a) Verdadero.
b) Falso.
4. Dreamweaver no permite la ordenación de elementos automáticamente, aunque sí

podemos hacerlo a través del código.
a) Verdadero.
b) Falso.

5. En una ordenación, el valor por omisión del atributo order es...

a) Ascending.
b) Descending.
6. Al crear una condición múltiple, si no se cumple la condición el contenido

seleccionado no se mostrará.
a) Verdadero.
b) Falso.
7. Podemos crear condiciones referentes al valor de cualquier campo o nodo dentro

del elemento que estamos visualizando.
a) Verdadero.
b) Falso.
8. Para mostrar un fragmento XSLT deberemos incluirlo dentro de una página

dinámica.
a) Verdadero.
b) Falso.
9. Si utilizamos parámetros en nuestros archivos XSLT deberemos indicar su valor

en...
a) La propia página XSLT.
b) En la página dinámica donde se incluya.
c) En ambos archivos.
d) En ninguna de las anteriores.

10. ¿Es aconsejable utilizar páginas XSLT completas?

a) Sí.
b) No.
Corregir
Restablecer
Pág. Ev.
22.1
Septiembre - 2007.

Prueba evaluativa de la unidad 23. Acceso a Datos con Spry
1. Para poder utilizar un archivo XML utilizando Spry es necesario crear antes un
conjunto de datos.
a) Verdadero.
b) Falso.
2. Para poder utilizar datos de un archivo XML es necesario crear antes una región
Spry.
a) Verdadero.
b) Falso.
3. Es posible filtrar los resultados de un archivo XML en la creación de un conjunto de

datos.
a) Verdadero.
b) Falso.
4. Es posible eliminar las filas repetidas de un archivo XML en la inserción de una

región de repetición de datos.
a) Verdadero.
b) Falso.

5. Es posible eliminar las filas repetidas de un archivo XML en la inserción de un

conjunto de datos.
a) Verdadero.
b) Falso.
6. El listado de repetición de Definición crea una lista desplegable.

a) Verdadero.
b) Falso.
7. ¿Qué etiqueta crea un listado de datos ordenados?.

a) UL.
b) OL.
8. En las tablas de datos es obligatorio mostrar todas las propiedades de un elemento

XML.
a) Verdadero.
b) Falso.
9. En una tabla de datos podemos...

a) Ordenar las filas haciendo clic en una de sus columnas.
b) Enlazar la fila seleccionada con una región de detalle.
c) Las dos anteriores son ciertas.
d) Todas las anteriores son falsas..
10. ¿Para utilizar una región de detalle es necesaria una tabla de datos?
a) Sí.
b) No.

Corregir
Restablecer
Pág. Ev.
23.1
Septiembre - 2007.

Curso de Adobe Dreamweaver CS3. Evaluación Unidad 24
Prueba evaluativa de la unidad 24. AJAX y Spry Framework
1. La tecnología AJAX permite páginas dinámicas sin necesidad de recargar la página

del servidor.
a) Verdadero.
b) Falso.
2. Spry Framework es un entorno de trabajo creado por Adobe para que puedas
utilizar AJAX de una forma sencilla y rápida.
a) Verdadero.
b) Falso.
3. Para utilizar Spry deberemos incluir la base de datos que nos podremos descargar
desde la página oficial de Adobe.
a) Verdadero.
b) Falso.
4. Spry está centrado en HTML, así que solamente nos hará falta saber un poco de
JavaScript para poder crear páginas dinámicas en AJAX utilizándolo.
a) Verdadero.
b) Falso.

5. Spry es capaz de leer datos de una base de datos y mostrarlos en una página
aunque ésta sea una página con extensión HTML.
a) Verdadero.
b) Falso.
6. Es necesario crear una región Spry en la página para mostrar los datos,
preferentemente en una etiqueta TABLE.
a) Verdadero.
b) Falso.
7. Las repeticiones de registros (spry:repeat) nos ayudarán a mostrar todos los

registros incluidos en un archivo XML.
a) Verdadero.
b) Falso.
8. El atributo spry:test puede ir en cualquier etiqueta dentro de una región de

repetición.
a) Verdadero.
b) Falso.
9.Para incluir un atributo de un elemento cuando utilizamos Spry deberemos usar el

símbolo...
a) #.
b) ::.
c) @.
d) Ninguno de los anteriores.

10. Cuando queramos filtrar un dataset será absolutamente necesario crear una
función que se encargue de descartar las filas que queramos filtrar.
a) Verdadero.
b) Falso.
Corregir
Restablecer
Pág. Ev.
24.1
Septiembre - 2007.

Prueba evaluativa de la unidad 25. Spry y Formularios
1. Los controles de validación de Spry deben ser insertados por fuerza dentro de un
formulario.
a) Verdadero.
b) Falso.
2. La caja de texto de Spry sólo admite la validación de correos electrónicos, fechas y

números de teléfonos.
a) Verdadero.
b) Falso.
3. Para el patrón 0000, ¿Cuál de las siguientes respuestas es aceptable?.

a) 0.
b) 1234.
4. Los estados de validación muestran mensajes de error si la evaluación del campo

introducido es negativa.
a) Verdadero.
b) Falso.

5. Los mensajes de error son configurables.

a) Verdadero.
b) Falso.
6. Podemos obligar al usuario a escoger un valor determinado en un desplegable de

Spry.
a) Verdadero.
b) Falso.
7. Las casillas de verificación de Spry no pueden mostrarse en grupo.

a) Verdadero.
b) Falso.
8. Podemos hacer que una opción de un desplegable Spry no sea seleccionable.

a) Verdadero.
b) Falso.
9. Si no seleccionamos ninguna validación, por defecto el campo se evaluará...

a) Al abandonar de control.
b) Al modificar el control.
c) Al enviar el formulario.
d) Ninguna de los anteriores.
10. Los contadores de caracteres en un área de texto Spry son opcionales.

a) Verdadero.
b) Falso.

Corregir
Restablecer
Pág. Ev.
25.1
Septiembre - 2007.

Prueba evaluativa de la unidad 26. Controles Avanzados Spry
1. Los menús Spry pueden tener hasta cuatro niveles de elementos.

a) Verdadero.
b) Falso.
2. Es posible colocar un enlace de correo electrónico a un elemento de menú Spry.

a) Verdadero.
b) Falso.
3. No es posible crear un enlace a una página en un elemento de menú de primer

nivel.
a) Verdadero.
b) Falso.
4. En un control de Fichas Spry podemos utilizar sólo 2 fichas por control.

a) Verdadero.
b) Falso.
5. Las fichas Spry pueden contener imágenes.

a) Verdadero.
b) Falso.

6. Si un control de Acordeón no tiene la altura suficiente para mostrar su contenido se

insertarán automáticamente barras de desplazamiento.
a) Verdadero.
b) Falso.
7. Los acordeones de Spry pueden tener tantas sección como queramos.

a) Verdadero.
b) Falso.
8. Un panel que se contrae de Spry puede mostrarse desplegado al cargarse la página.

a) Verdadero.
b) Falso.
9. ¿Es posible modificar el estilo de un control Spry?.

a) Sí, modificando su página de estilos CSS.
b) No, sólo pueden cambiarse los estilos Negrita y Cursiva desde el panel Propiedades.
c) No, en ninún caso.
d) Ninguna de las anteriores.
10. Cuando creamos un control Spry, ¿en la carpeta SpryAssets cuántos archivos se
crean?.
a) Tres.
b) Dos.
Corregir
Restablecer

Pág. Ev.
26.1
Septiembre - 2007.

Curso 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 Dreamweaver CS3

Caricato da

Copyright:

Formati disponibili

Curso de Adobe Dreamweaver CS3.

Indice Curso de Dreamweaver CS3 Avanzado

aulaClic. Curso de Dreamweaver CS3. Índice

Cómo utilizar este curso.

1. Conceptos básicos de Dreamweaver CS3 10. Multimedia 19. Servidor de Pruebas

http://www.aulaclic.es/dreamweavercs3/ (1 de 7) [10/02/2008 19:45:21]

Unidad 1. Conceptos básicos de Dreamweaver CS3 Unidad 16. Comportamientos Avanzados

Unidad 19. Servidor de Pruebas

http://www.aulaclic.es/dreamweavercs3/ (2 de 7) [10/02/2008 19:45:21]

Características del texto Introducción a PHP

http://www.aulaclic.es/dreamweavercs3/ (3 de 7) [10/02/2008 19:45:21]

Unidad 11. Las plantillas

Unidad 12. HTML desde Dreamweaver

http://www.aulaclic.es/dreamweavercs3/ (4 de 7) [10/02/2008 19:45:21]

Ejercicios paso a paso

http://www.aulaclic.es/dreamweavercs3/ (5 de 7) [10/02/2008 19:45:21]

Vídeotutoriales Ejercicios propuestos Pruebas evaluativas

http://www.aulaclic.es/dreamweavercs3/ (6 de 7) [10/02/2008 19:45:21]

8. Insertar marcos 17. Estilos CSS avanzados 16. Comportamientos Avanzados

http://www.aulaclic.es/dreamweavercs3/ (7 de 7) [10/02/2008 19:45:21]

Cómo utilizar este curso Búsqueda

Con el icono ayuda vienes a esta página.

http://www.aulaclic.es/dreamweavercs3/informacion.htm (1 de 3) [10/02/2008 19:45:27]

Estructura del curso.

¿Cómo se identifican los niveles?

Por los colores de los rótulos:

Nivel básico. Nivel medio. Nivel avanzado.

Así sabrás en todo momento en qué nivel te encuentras.

En los temas encontrarás dos tipos de ejercicios:

También hay una prueba evaluativa teórica con su correspondiente solución.

http://www.aulaclic.es/dreamweavercs3/informacion.htm (2 de 3) [10/02/2008 19:45:27]

http://www.aulaclic.es/dreamweavercs3/informacion.htm (3 de 3) [10/02/2008 19:45:27]

Unidad 1. Conceptos básicos de Dreamweaver CS3 (I) Búsqueda

Qué es Dreamweaver CS3

Si no conoces las características básicas de HTML puedes verlas aquí.

Novedades de Dreamweaver CS3

Mejoras en la comprobación de la compatiblidad con diferentes navegadores. Dreamweaver CS3 puede

http://www.aulaclic.es/dreamweavercs3/t_1_1.htm (1 de 2) [10/02/2008 19:45:40]

http://www.aulaclic.es/dreamweavercs3/t_1_1.htm (2 de 2) [10/02/2008 19:45:40]

Unidad 2. El entorno de trabajo (I) Búsqueda

http://www.aulaclic.es/dreamweavercs3/t_2_1.htm (1 de 2) [10/02/2008 19:45:46]

http://www.aulaclic.es/dreamweavercs3/t_2_1.htm (2 de 2) [10/02/2008 19:45:46]

Unidad 3. Configuración de un sitio local (I) Búsqueda

Crear o editar un sitio web sin conexión a Internet

http://www.aulaclic.es/dreamweavercs3/t_3_1.htm (1 de 4) [10/02/2008 19:45:54]

Por supuesto, pueden existir varios sitios locales en un mismo ordenador.

http://www.aulaclic.es/dreamweavercs3/t_3_1.htm (2 de 4) [10/02/2008 19:45:54]

Después de rellenar los datos pulsamos el botón Aceptar y abrimos el sitio.

http://www.aulaclic.es/dreamweavercs3/t_3_1.htm (3 de 4) [10/02/2008 19:45:54]

http://www.aulaclic.es/dreamweavercs3/t_3_1.htm (4 de 4) [10/02/2008 19:45:54]

Unidad 4. El texto (I) Búsqueda

Características del texto

http://www.aulaclic.es/dreamweavercs3/t_4_1.htm (1 de 2) [10/02/2008 19:46:05]

Estos botones permiten crear listas con viñetas o listas numeradas.

http://www.aulaclic.es/dreamweavercs3/t_4_1.htm (2 de 2) [10/02/2008 19:46:05]

Unidad 5. Hiperenlaces (I) Búsqueda

Es posible asignar un vínculo a un texto, a una imagen, o a parte de una imagen.

Existen diferentes clases de rutas de acceso a la hora de definir los vínculos.

La ubicación es en Internet, por ejemplo, http://www.aulaclic.com, o http://www.misitio.com/pagina/pagina1.html.

Referencia relativa al documento:

Por ejemplo, imagina que estamos en la siguiente dirección http://www.misitio.com/pagina/informacion/index.

El resultado de la ruta sería el siguiente: ../secciones/seccion1.html.

Referencia relativa al sitio:

http://www.aulaclic.es/dreamweavercs3/t_5_1.htm (1 de 2) [10/02/2008 19:46:12]

De este modo, < se escribirá como < o <

á á á Á Á Á

é é é É É É

í í í Í Í Í

ó ó ó Ó Ó Ó

ú ú ú Ú Ú Ú

ü ü ü Ü Ü Ü

ñ &ntide; ñ Ñ Ñ Ñ

¿ ¿ ¿ α α α

¡ &iexc; ¡ β β β

– – – © © ©

→ → → ® ® ®

← ← ← € € €

< < < espacio

> > >

& & &