Está en la página 1de 661

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

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


Curso de Adobe Dreamweaver CS3. Indice Curso de Dreamweaver CS3 Avanzado

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

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


Curso de Adobe Dreamweaver CS3. Indice Curso de Dreamweaver CS3 Avanzado

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

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


Curso de Adobe Dreamweaver CS3. Indice Curso de Dreamweaver CS3 Avanzado

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

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


Curso de Adobe Dreamweaver CS3. Indice Curso de Dreamweaver CS3 Avanzado

* 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

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


Curso de Adobe Dreamweaver CS3. Indice Curso de Dreamweaver CS3 Avanzado

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.

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


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]


Curso de Adobe Dreamweaver CS3. informacion

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.

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


Curso de Adobe Dreamweaver CS3. informacion

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

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.

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


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]


Curso de Adobe Dreamweaver CS3. Tema 1. Conceptos básicos de Dreamweaver CS3

Adobe Device Central, incluido en la Adobe Creative Suite, facilita la publicación en dispositivos móviles, PDAs, etc..

Pág. 1.1
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.

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


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.

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


Curso de Adobe Dreamweaver CS3. Tema 2. El entorno de trabajo

Pág. 2.1
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.

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


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.

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


Curso de Adobe Dreamweaver CS3. Tema 03. Configuración de un sitio local

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.

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


Curso de Adobe Dreamweaver CS3. Tema 03. Configuración de un sitio local

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.

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


Curso de Adobe Dreamweaver CS3. Tema 03. Configuración de un sitio local

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

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


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:

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


Curso de Adobe Dreamweaver CS3. Tema 4. El texto

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

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


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.

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


Curso de Adobe Dreamweaver CS3. Tema 5. Hiperenlaces

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

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


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.

http://www.aulaclic.es/dreamweavercs3/t_6_1.htm (1 de 3) [10/02/2008 19:46:22]


Curso de Adobe Dreamweaver CS3. Tema 6. Imágenes

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:

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


Curso de Adobe Dreamweaver CS3. Tema 6. Imágenes

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

http://www.aulaclic.es/dreamweavercs3/t_6_1.htm (3 de 3) [10/02/2008 19:46:22]


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 .

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


Curso de Adobe Dreamweaver CS3. Tema 7. Tablas

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

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


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

http://www.aulaclic.es/dreamweavercs3/t_8_1.htm (1 de 3) [10/02/2008 19:46:48]


Curso de Adobe Dreamweaver CS3. Tema 8. 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).
http://www.aulaclic.es/dreamweavercs3/t_8_1.htm (2 de 3) [10/02/2008 19:46:48]
Curso de Adobe Dreamweaver CS3. Tema 8. Marcos

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

http://www.aulaclic.es/dreamweavercs3/t_8_1.htm (3 de 3) [10/02/2008 19:46:48]


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

http://www.aulaclic.es/dreamweavercs3/t_9_1.htm (1 de 3) [10/02/2008 19:46:53]


Curso de Adobe Dreamweaver CS3. Tema 9. Formularios

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.

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


Curso de Adobe Dreamweaver CS3. Tema 9. Formularios

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

http://www.aulaclic.es/dreamweavercs3/t_9_1.htm (3 de 3) [10/02/2008 19:46:53]


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.

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


Curso de Adobe Dreamweaver CS3. Tema 10 Multimedia

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.
http://www.aulaclic.es/dreamweavercs3/t_10_1.htm (2 de 3) [10/02/2008 19:47:02]
Curso de Adobe Dreamweaver CS3. Tema 10 Multimedia

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

http://www.aulaclic.es/dreamweavercs3/t_10_1.htm (3 de 3) [10/02/2008 19:47:02]


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.

http://www.aulaclic.es/dreamweavercs3/t_11_1.htm (1 de 2) [10/02/2008 19:47:09]


Curso de Adobe Dreamweaver CS3. Tema 11. 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
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.

http://www.aulaclic.es/dreamweavercs3/t_11_1.htm (2 de 2) [10/02/2008 19:47:09]


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

http://www.aulaclic.es/dreamweavercs3/t_12_1.htm (1 de 3) [10/02/2008 19:47:16]


Curso de Adobe Dreamweaver CS3. Tema 12. HTML desde Dreamweaver

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 &lt; o &#60;

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

á &aacute; &#225; Á &Aacute; &#193;

é &eacute; &#233; É &Eacute; &#201;

í &iacute; &#237; Í &Iacute; &#205;

ó &oacute; &#243; Ó &Oacute; &#211;

ú &uacute; &#250; Ú &Uacute; &#218;

ü &uuml; &#252; Ü &Uuml; &#220;

ñ &ntide; &#241; Ñ &Ntilde; &#209;

¿ &iquest; &#191; α &alpha; &#945;

¡ &iexc; &#161; β &beta; &#946;

– &ndash; &#8211; © &copy; &#169;

→ &rarr; &#8594; ® &reg; &#174;

← &larr; &#8592; € &euro; &#8364;

< &lt; &#60; espacio &nbsp; &#160;

> &gt; &#62;

& &amp; &#38;

Si escribes más de un espacio en Dreamweaver, cuando lo visualices en un Navegador sólo veras uno. Esto
http://www.aulaclic.es/dreamweavercs3/t_12_1.htm (2 de 3) [10/02/2008 19:47:16]
Curso de Adobe Dreamweaver CS3. Tema 12. HTML desde Dreamweaver

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 &nbsp; 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
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.

http://www.aulaclic.es/dreamweavercs3/t_12_1.htm (3 de 3) [10/02/2008 19:47:16]


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>

http://www.aulaclic.es/dreamweavercs3/t_13_1.htm (1 de 2) [10/02/2008 19:47:23]


Curso de Adobe Dreamweaver CS3. Tema 13. Otros elementos

Pág. 13.1
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.

http://www.aulaclic.es/dreamweavercs3/t_13_1.htm (2 de 2) [10/02/2008 19:47:23]


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.

http://www.aulaclic.es/dreamweavercs3/t_14_1.htm (1 de 3) [10/02/2008 19:47:32]


Curso de Adobe Dreamweaver CS3. Tema 14. Capas

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.

http://www.aulaclic.es/dreamweavercs3/t_14_1.htm (2 de 3) [10/02/2008 19:47:32]


Curso de Adobe Dreamweaver CS3. Tema 14. Capas

Pág. 14.1
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.

http://www.aulaclic.es/dreamweavercs3/t_14_1.htm (3 de 3) [10/02/2008 19:47:32]


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.

http://www.aulaclic.es/dreamweavercs3/t_15_1.htm (1 de 3) [10/02/2008 19:47:36]


Curso de Adobe Dreamweaver CS3. Tema 15. Comportamientos

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 .

http://www.aulaclic.es/dreamweavercs3/t_15_1.htm (2 de 3) [10/02/2008 19:47:36]


Curso de Adobe Dreamweaver CS3. Tema 15. Comportamientos

Pág. 15.1
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.

http://www.aulaclic.es/dreamweavercs3/t_15_1.htm (3 de 3) [10/02/2008 19:47:36]


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.

http://www.aulaclic.es/dreamweavercs3/t_16_1.htm (1 de 3) [10/02/2008 19:47:42]


Curso de Adobe Dreamweaver CS3. Tema 16. Comportamientos Avanzados

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

http://www.aulaclic.es/dreamweavercs3/t_16_1.htm (2 de 3) [10/02/2008 19:47:42]


Curso de Adobe Dreamweaver CS3. Tema 16. Comportamientos Avanzados

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

http://www.aulaclic.es/dreamweavercs3/t_16_1.htm (3 de 3) [10/02/2008 19:47:42]


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

<!--

body {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

text-align: center;

background: url('imagenes/fondo.gif') repeat-x bottom;

//->

</style>

Este método lo utilizaremos para incrustar el código directamente sobre el archivo HTML.

También es posible importar archivos de hojas de estilos (de extensión .css) que hayamos creado. Como ya
hemos visto esta opción es mucho mejor porque así podemos aplicarla sobre varias páginas a la vez sin la necesidad
de escribir el código en cada una de ellas.

http://www.aulaclic.es/dreamweavercs3/t_17_1.htm (1 de 2) [10/02/2008 19:47:49]


Curso de Adobe Dreamweaver CS3. Tema 17. Estilos CSS Avanzado

En este caso deberemos crear un archivo CSS (Archivo → Nuevo y seleccionando CSS) donde escribiremos las
reglas de estilo del mismo modo en el que hemos visto más arriba pero eliminado el componente HTML:

body {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

text-align: center;

background: url('imagenes/fondo.gif') repeat-x bottom;

Luego deberíamos vincularlo en la página HTML utilizando la etiqueta link:

<link rel="stylesheet" href="ruta/del/estilo/nombre.css" />

Una página puede contener ambos tipos de estilos CSS, como por ejemplo, tener un archivo vinculado y luego un
bloque de estilo incrustado. O incluso tener varias hojas de estilo asociadas.

La organización de los estilos debes decidirla tú. Pero recuerda que cuanto menos código repitas en tus páginas,
más fácil será luego de modificar o exportar.

También es posible declarar el estilo en línea. Es decir, tal y como se van creando las etiquetas HTML, para ello
deberás utilizar el atributo style:

<p style="color: red; font-size: 30px;">Este texto está en rojo y con un tamaño de 30 píxeles</p>

El estilo en línea es más desaconsejado porque es más difícil de modificar al tener que buscarlo por el texto
y modificándolo uno a uno.

Para practicar realiza el Ejercicio Paso a Paso de Creación de una Hoja de Estilo.

Pág. 17.1
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.

http://www.aulaclic.es/dreamweavercs3/t_17_1.htm (2 de 2) [10/02/2008 19:47:49]


Curso de Adobe Dreamweaver CS3. Tema 18. Sitios Remotos

Unidad 18. Sitios Remotos (I) Búsqueda

En el tema 3 vimos cómo crear y trabajar con un sitio local.

Esta unidad está dedicada a los Sitios Remotos, veremos cómo crearlos y cómo utilizarlos.

Definir un sitio remoto significa establecer una configuración de modo que Dreamweaver sea capaz de
comunicarse directamente con un servidor en Internet (por eso se llama remoto) y así poder trabajar a la vez con
tus archivos en el sitio local, es decir, la copia que tienes en tu ordenador, y en el sitio remoto, colgados en el servidor,
en Internet.

El modo en el que veremos que el programa se comunica con tu servidor será FTP, ya que es prácticamente el
más utilizado y muy pocos utilizan otras alternativas.

Configurar un Sitio Remoto

Muy bien, ahora veamos los pasos que tenemos que seguir para configurar las opciones y que Dreamweaver se
pueda conectar con nuestro servidor.

Para ello deberemos modificar la especificación que creamos en su día del sitio con el que estamos trabajando.

Así que haz clic en Sitio y selecciona Administrar sitios.

Selecciona el sitio con el que quieras establecer comunicación remota (o crea uno nuevo para el caso) y pulsa Editar.

Verás que se abre el cuadro de diálogo de Definición del Sitio.

Ahora podremos escoger entre trabajar en modo básico o avanzado. Vamos a seleccionar la pestaña Avanzado
para poder ver con más detenimiento las opciones que se nos ofrecen.

Una vez estés en el nuevo modo, selecciona la Categoría Datos remotos en el listado de la izquierda.

Ahora en el desplegable Acceso selecciona el método de acceso que deberá utilizar Dreamweaver para conectarse
con el servidor. Como ya hemos dicho nosotros explicaremos la opción FTP.

Se mostrarán las siguientes opciones:

http://www.aulaclic.es/dreamweavercs3/t_18_1.htm (1 de 3) [10/02/2008 19:47:57]


Curso de Adobe Dreamweaver CS3. Tema 18. Sitios Remotos

Aquí deberás rellenar los datos que te facilitó el servicio de hosting que contrataste. Si no recuerdas los datos o
has perdido el correo electrónico que seguramente te enviaron, pídeles de nuevo la información.

Los datos que necesitrás son los siguientes:

Servidor FTP o host es la dirección a la que se dirigirá Dreamweaver para conectarse a tu servidor será del tipo
ftp.servidor.com o también podrás encontrar algunas que están formadas en forma de dirección IP (como por
ejemplo, 192.186.1.1)

En el campo Directorio del Servidor podremos establecer una carpeta contenida en el servidor donde
queramos subir las páginas.

Imagina que dentro de la estructura de carpetas del servidor romoto tienes una que se llama pagina y dentro de esta
otra que se llame principal. Podríamos indicar la ruta pagina/principal para que los archivos se subiesen
directamente a esa ubicación.

En Usuario y Contraseña escribe el nombre de usuario y el password para poder conectar con el servidor. Marca
la casilla Guardar si quieres que el programa recuerde la contraseña.

Una vez introducidos estos datos puedes pulsar el botón Probar para ver si son correctos y Dreamweaver puede
crear una conexión con el servidor remoto.

Finalmente comentaremos la opción Permitir desproteger y proteger archivo. Esta casilla es útil cuando más de
una persona está utilizando el mismo servidor y las mismas páginas. De esta forma (como veremos más
adelante) podrás bloquear diversos archivos para evitar que se vean modificados por otra persona (que también
tenga acceso al servidor) mientras tú trabajas con ellos.

Si seleccionas la opción Cargar archivos en el servidor automáticamente al guardar forzarás a que


Deamweaver suba los archivos cada vez que los guardes. Una opción bastante útil para no olvidar subir
pequeños retoques que se vayan haciendo en el tiempo. Aunque es una opción un poco peligrosa porque si modificas
la versión en local y te equivocas no podrás recuperar la versión anterior que estaba almacenada en el remoto porque
se habrá sobreescrito. Esta opción tampoco es recomendable si no tienes conexión permanente y rápida a Internet.

http://www.aulaclic.es/dreamweavercs3/t_18_1.htm (2 de 3) [10/02/2008 19:47:57]


Curso de Adobe Dreamweaver CS3. Tema 18. Sitios Remotos

Una vez hayas terminado Acepta todas las pantallas hasta volver a la vista de trabajo y estaremos listos.

Pág. 18.1
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.

http://www.aulaclic.es/dreamweavercs3/t_18_1.htm (3 de 3) [10/02/2008 19:47:57]


Curso de Adobe Dreamweaver CS3. Tema 19. Servidor de Pruebas

Unidad 19. Servidor de Pruebas (I) Búsqueda

Introducción a PHP

Hasta ahora hemos aprendido cómo mostrar contenido estático en nuestras páginas web.

Dejando de lado todos los efectos o animaciones que podamos hacer, en determinadas ocasiones nos es
necesario darle un poco más de dinamismo al contenido del sitio.

Digamos que necesitamos mostrar listados de cualquier tipo que puedan generarse automáticamente, o incluso que
se repartan en varias páginas.

Es posible que también necesites que el contenido se actualice periódicamente y tengas demasiadas páginas como
para ir modificándolas una a una.

O incluso te gustaría crear una página individual para cada elemento que aparezca un listado y resulta muy
laborioso crear una página individual para cada uno de ellos.

Muy bien. Ha llegado la hora de dejar un poco de lado HTML y comenzar a crear páginas más versátiles utilizando PHP.

PHP es un lenguaje de programación. Pero no te preocupes, Dreamweaver contiene las suficientes


herramientas como para manejarte sencillamente sin que tengas que saber ni una línea de código.

Desde luego, si el tema te apasiona no lo dudes. Aprende PHP y utilízalo para crear prácticamente lo que te venga a
la cabeza. Aunque eso se encuentra fuera de este curso.

Nosotros veremos lo que es posible hacer utilizando las herramientas de que dispone Dreamweaver.

Como decíamos PHP es un lenguaje de programación, así que deberemos aprender antes cómo funciona.

Hasta ahora nosotros creábamos páginas con extensión HTML, este tipo de archivos, cuando son requeridos por
un navegador se descargan automáticamente del servidor y se visualizan tal y como son en el cliente (el
ordenador del usuario que está viendo la página).

PHP actúa de forma diferente.

Un archivo con extensión PHP, cuando es requerido por el cliente se ejecuta en el servidor y genera una página
web con código HTML, y es este código HTML el que se envía y se visualiza en el navegador del usuario.

De esta forma, el contenido del archivo PHP es completamente transparente al usuario (además de serle imposible
ver el contenido del archivo) y sólo podrá ver el resultado de la petición que ha creado (es decir, lo que genera el
archivo PHP según convenga en cada momento).

Verás que esto es más fácil de entender cuando vayamos avanzando en la unidad.
http://www.aulaclic.es/dreamweavercs3/t_19_1.htm (1 de 2) [10/02/2008 19:48:06]
Curso de Adobe Dreamweaver CS3. Tema 19. Servidor de Pruebas

Una de las utilidades de las páginas PHP es que PHP es capaz de buscar en una base de datos mientras se
está ejecutando en el servidor y mostrar los datos obtenidos en código HTML para que el navegador del cliente los
pueda visualizar:

Como puedes ver PHP puede ser muy útil a la hora de recuperar datos almacenados lo que te será muy útil si
decides guardar en forma de tablas información relativa a tus productos, elementos sobre los que estés
trabajando, entradas de blog, etc...

Si no sabes muy bien qué es una base de datos visita este tema básico sobre Bases de datos.

Pág. 19.1
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.

http://www.aulaclic.es/dreamweavercs3/t_19_1.htm (2 de 2) [10/02/2008 19:48:06]


Curso de Adobe Dreamweaver CS3. Tema 20. Páginas Dinámicas

Unidad 20. Páginas Dinámicas (I) Búsqueda

Introducción

En esta unidad vamos a ver cómo utilizar Dreamweaver para crear páginas PHP y acceder a datos almacenados en
una base de datos.

Como vimos en el tema anterior, las páginas dinámicas se almacenan en el servidor y cuando son requeridas
se ejecutan y devuelven una salida de código HTML al cliente que lo visualizará en su navegador.

Mientras el archivo PHP se ejecuta en el servidor, puede crear una conexión a una base de datos y extraer o
guardar información en ella.

Ahora que ya tenemos un servidor de pruebas donde pueda ejecutarse el código que introduzcamos en
nuestras páginas y permita la creación de bases de datos para almacenar información pasaremos a crear
nuestras propias páginas dinámicas de acceso a datos.

Una vez instalado WAMP empezaremos a crear nuestras primeras páginas para mostrar información específica
y personalizada.

Para ello nos apoyaremos siempre en la sección Datos de la barra de herramientas Insertar:

Puede que en tu ordenador no veas la barra de esta forma, pues puede tomar la forma de pestañas o de menú.

Si la tuvieses en forma de menú haz clic en el desplegable de la izquierda y selecciona Datos:

Y en el panel Aplicación que puedes abrir desde el menú Ventana → Bases de datos.

http://www.aulaclic.es/dreamweavercs3/t_20_1.htm (1 de 3) [10/02/2008 19:48:13]


Curso de Adobe Dreamweaver CS3. Tema 20. Páginas Dinámicas

Crear una conexión a la Base de Datos

Como puedes ver en el panel Aplicación los requisitos necesarios para empezar a trabajar con bases de datos ya
los hemos cubierto en los temas anteriores del curso.

El último paso que nos quedaría para poder empezar a crear páginas será definir una conexión para que
Dreamweaver establezca los parámetros en los que se realizará la comunicación entre los archivos PHP y los datos
de nuestras tablas.

En otras palabras deberemos decirle a Dreamweaver dónde está la base de datos, su nombre y un usuario (con
su contraseña) con suficientes privilegios como para poder, al menos, visualizar los datos almacenados.

Para ello nos dirigimos a la pestaña Bases de datos en el panel Aplicación y hacemos clic sobre el botón .

Selecciona la opción Conexión MySQL para crear la conexión que necesitamos.

Se abrirá el siguiente cuadro de diálogo:

http://www.aulaclic.es/dreamweavercs3/t_20_1.htm (2 de 3) [10/02/2008 19:48:13]


Curso de Adobe Dreamweaver CS3. Tema 20. Páginas Dinámicas

Aquí deberás colocar los datos correspondientes a tu base de datos.

En Nombre de conexión escribiremos un nombre significativo para poder reconocer la conexión más adelante.

En Servidor MySQL deberemos escribir localhost en nuestro caso ya que la base de datos está alojada en
nuestro propio equipo. En otro caso habría que introducir la dirección del servidor donde se encuentre almacenada
la información.

Escribe un Nombre de usuario y Contraseña con priviegios suficientes para acceder a la base de datos (al
menos parcialmente).

Y finalmente selecciona (pulsando el botón Seleccionar) o escribe el nombre de la base de datos a la cual nos vamos
a conectar.

Puedes hacer una prueba de conexión pulsando el botón Prueba, así te asegurarás de que se puede
establecer comunicación entre Dreamweaver y el servidor correctamente con los datos facilitados.

Una vez hayas acabado pulsa Aceptar y la conexión estará lista para utilizarse.

Para practicar la creación de conexiones realiza el Ejercicio Paso a Paso Creando una Conexión.

Pág. 20.1
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.

http://www.aulaclic.es/dreamweavercs3/t_20_1.htm (3 de 3) [10/02/2008 19:48:13]


Curso de Adobe Dreamweaver CS3. Tema 21. Cómo crear un Blog

Unidad 21. Cómo crear un Blog (I) Búsqueda

Introducción

Hasta ahora hemos visto cómo empezar a manejarnos con páginas dinámicas de acceso a datos utilizando PHP y
un servidor mySQL.

La complejidad de las páginas que creemos dependerá de la profundidad de nuestros conocimientos de


ambas tecnologías, por lo que muchas veces (sobre todo al principio) nos será dificil alcanzar algunos objetivos que
nos propongamos.

Vamos a dedicar este tema a la elaboración de un proyecto complejo en el que deberemos emplear estas técnicas de
un modo más completo.

Para ello crearemos un blog o bitácora y utilizaremos herramientas y procedimientos que hemos visto hasta ahora.
No te pierdas este tema, introduciremos algunos conceptos que quizá te resulten interesantes.

Un blog es una página web donde se introduce contenido periódicamente sobre un tema en particular.

Su contenido suele organizarse en entradas que se van añadiendo con una asiduidad relativa.

Normalmente, estas entradas pueden comentarse. Es decir, cualquier usuario (o a veces solamente los
registrados) pueden dejar su opinión sobre la entrada o sobre el blog en general.

Para facilitar la navegación por la página estas entradas suelen estar organizadas por temas o categorías, de modo
que si te interesa poder leer todas las entradas relacionadas con un tema en concreto te sea mucho más sencillo.

Todo blog deberá tener, del mismo modo, una parte privada desde donde el usuario dueño de la bitácora
pueda administrar y gestionar los contenidos del blog.

Desde el panel de administración, que debe estar protegido para que sólo tengan acceso aquellas personas
con privilegios suficientes, podremos añadir, modificar o eliminar entradas, comentarios y categorías.

De hecho, la función de esta parte privada es que puedas actualizar el contenido sin necesidad de tener que recurrir a
la interfaz de phpMyAdmin para insertar nuevos registros como vimos en el tema anterior.

El objetivo de este tema no es entrar en profundidad en cada uno de los detalles, porque podríamos no terminar
nunca. Explicaremos el modo en el que deberemos actuar para alcanzar una estructura cerrada que cumpla
los requisitos mínimos que un blog necesita.

El aspecto y funcionalidades finales están en tus manos, puedes añadir tantas cosas como quieras.

Así que vamos a empezar...

Estructura de datos

Nuestro primer paso para la creación de un blog será crear la estructura de datos que contendrá la información de
las entradas y otros elementos del sitio.
http://www.aulaclic.es/dreamweavercs3/t_21_1.htm (1 de 4) [10/02/2008 19:48:21]
Curso de Adobe Dreamweaver CS3. Tema 21. Cómo crear un Blog

En un sitio simple deberemos crear como mínimo 4 tablas: categorias, entradas, comentarios y usuarios.

En la tabla categorías deberemos listar el nombre de las categorías en las que se dividen las entradas.

En la tabla entradas deberemos almacenar el texto de la entrada con su título y fecha. Obviamente aquí
deberemos hacer referencia a qué categoría pertenece la entrada. En un blog más complejo podríamos
incluso almacenar qué integrante de la tabla de usuarios creó la entrada...

En la tabla comentarios deberemos almacenar el texto del comentario junto con la información del autor, como
su nombre y correo electrónico, por ejemplo. Con conocimientos más profundos de PHP podríamos guardar hasta
su dirección IP.

Finalmente en la tabla usuarios guardaremos el nombre y contraseña de los usuarios que tendrán acceso a
la edición del blog. Más adelante verás que incluso se podrían establecer niveles de privilegios entre ellos.

El punto en cuestión en este caso es el hecho de que en la forma más simplificada las tres primeras tablas se
encuentran relacionadas del siguiente modo:

Como puedes ver en la imagen en la tabla entradas existe un campo que apunta al ID de categorías, y del mismo
modo en la tabla comentarios tenemos que tener un campo que apunte a la entrada a la que pertenece
dicho comentario.

El problema nos surge, por ejemplo, cuando insertemos una página que nos ayude a eliminar entradas. ¿Qué
hacemos con los comentarios asociados a ella? ¿Deberemos crear una página más para que cuando se borre
una entrada también lo hagan sus comentarios relacionados? ¿Y repetirlo para las categorías y sus entradas?.

No va a hacer falta.

Podremos utilizar una característica de la definición de la base de datos que existe en Mysql (no existía en las
primeras versiones) y en otros sistemas gestores de bases de datos, el borrado y actualización en cascada.

Desde el entorno de PhpAdmin podremos definir esta característica en la vista de relaciones.

Podrás encontrar el enlace a esta vista desde la vista de detalle de cualquier tabla:

http://www.aulaclic.es/dreamweavercs3/t_21_1.htm (2 de 4) [10/02/2008 19:48:21]


Curso de Adobe Dreamweaver CS3. Tema 21. Cómo crear un Blog

Haz clic sobre él y verás una nueva ventana como esta:

Desde aquí podremos especificar las relaciones que tiene la tabla con las demás tablas de la base de datos y qué
hacer cuando un elemento relacionado se borra o modifica.

Fíjate que en el ejemplo solamente los campos Id e Id_Categoría son susceptibles de esta opción. Eso es debido a
que hemos definido ambos como índices, el primero por ser clave primaria y el segundo porque así lo indicamos en
el momento de su creación utilizando el botón Índice .

El modo en el que deberemos definir nuestro objetivo es el siguiente. A un campo indexado podemos asignarle
una relación con otro campo indexado de otra tabla (en el ejemplo Id_Categoria está relacionado con el campo Id de
la tabla categorias).

Deberemos decirle a phpMyAdmin qué hacer cuando se borre un elemento en la tabla relacionada categorias
(ON DELETE) o cuando se modifique el valor de clave de un elemento (ON UPDATE).

La opción que nos interesa en este caso es CASCADE que actúa aplicando los cambios en cascada. Esto es,
si borramos un elemento en la tabla categorias, se borrarán todos los registros en la tabla entradas que tengan
el mismo ID en el campo Id_Categoria.

En el caso de que modificasemos el ID en la tabla categorias también se actualizaría en todos los registros de
entradas con el mismo Id_Categoria si tenemos indicado ON UPDATE CASCADE.

Para practicar la creación de índices y relaciones realiza el Ejercicio Paso a Paso Estructura de Datos de un Blog.

http://www.aulaclic.es/dreamweavercs3/t_21_1.htm (3 de 4) [10/02/2008 19:48:21]


Curso de Adobe Dreamweaver CS3. Tema 21. Cómo crear un Blog

Pág. 21.1
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.

http://www.aulaclic.es/dreamweavercs3/t_21_1.htm (4 de 4) [10/02/2008 19:48:21]


Curso de Adobe Dreamweaver CS3. Tema 22. XML y RSS

Unidad 22. XML y RSS (I) Búsqueda

Introducción

RSS son archivos que contienen información de una página web con las últimas actualizaciones que se han
hecho en ella. Este tipo de archivos es muy útil para cualquier sitio de noticias, foros, weblogs o página que
emita contenido de forma continuada.

Para crear archivos RSS utilizamos el lenguaje XML, que es un lenguaje de etiquetas mucho más flexible que HTML.

Este sistema tiene un objetivo muy sencillo, el de organizar información para su almacenamiento y distribución.
Como puedes ver esta es la mayor diferencia entre ambos lenguajes, pues HTML está orientado a cómo se
debe mostrar la información y XML a organizarla.

Un ejemplo muy claro de lo que sería un archivo XML es el siguiente:

<biblioteca>
<libro>
<titulo>Las 64 casillas</titulo>
<autor>Pablo Alvarez Castano</autor>
<editorial>Paidotribo Editorial</editorial>
<isbn>848019815X</isbn>
</libro>
<libro>
<titulo>Periodismo iconográfico</titulo>
<autor>Gonzalo Peltze</autor>
<editorial>EDICIONES RIALP SA</editorial>
<isbn>8432128082</isbn>
</libro>
<libro>
<titulo>Educación personalizada</titulo>
<autor>Víctor García Hoz</autor>
<editorial>EDICIONES RIALP SA</editorial>
<isbn>8432122882</isbn>
</libro>
<libro>
<titulo>Nuestro universo</titulo>
<autor>John R Gribbin</autor>
<editorial>Ediciones B</editorial>
<isbn>8466605657</isbn>
</libro>
</biblioteca>

En este ejemplo hemos creado un archivo en la que está almacenado la información de nuestra biblioteca.
Observa cómo las etiquetas que conforman el archivo no son más que identificadores que hemos creado para este fin.

La finalidad de XML y RSS consiste en poder compartir información con el resto del mundo de una forma
rápida, sencilla y adaptable.

La organización de este tipo de información suele ser muy parecida de un sitio a otro.

Utilizaremos Dreamweaver CS3 para incluir fácilmente contenido de un sitio externo en nuestras páginas.

http://www.aulaclic.es/dreamweavercs3/t_22_1.htm (1 de 2) [10/02/2008 19:48:27]


Curso de Adobe Dreamweaver CS3. Tema 22. XML y RSS

Nota: Es necesario que el servidor de pruebas soporte el manejo de este tipo de archivos para poder incluir este
tipo de información en nuestras páginas.

Para aprender a configurar el servidor de pruebas realiza el Ejercicio Paso a Paso de Preparando el Servidor
de Pruebas.

Pág. 22.1
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.

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


Curso de Adobe Dreamweaver CS3. Tema 23. Acceso a datos con Spry

Unidad 23. Acceso a datos con Spry (I) Búsqueda

Introducción

A partir de esta nueva versión de Dreamweaver podemos acceder y tratar datos XML desde una nueva perspectiva: Spry.

Spry se compone de un conjunto de archivos codificados en JavaScript que se añadirán a tu proyecto desde el
momento en que empieces a utilizarlos. Como veremos más adelante, Dreamweaver te avisará de la creación de
una nueva carpeta en tu sitio que contendrá los archivos necesarios para la ejecución de las funciones que vamos a
ver a continuación.

Todos los comandos que vamos a utilizar son accesibles desde el menú Insertar → Spry o desde la pestaña Spry de
la barra Insertar:

Conjunto de datos XML

Incluir un archivo XML en tu página web es muy sencillo, ni siquiera es necesario que ésta sea una página dinámica
de tipo PHP como llevamos viendo hasta ahora, una página básica en HTML te servirá.

Cuando hayas decidido dónde colocar la región que contendrá los datos importados del archivo XML deberás hacer
clic en Insertar → Spry → Conjunto de datos XML de Spry y se abrirá el siguiente cuadro de diálogo:

http://www.aulaclic.es/dreamweavercs3/t_23_1.htm (1 de 3) [10/02/2008 19:48:33]


Curso de Adobe Dreamweaver CS3. Tema 23. Acceso a datos con Spry

Deberás rellenar este cuadro de diálogo para definir el modo en que accederemos y cargaremos el archivo XML deseado.

El procedimiento es muy sencillo, primero indicaremos un nombre en Conjunto de datos para poder distinguirlo
y diferenciarlo de otros posibles conjuntos de datos que queramos cargar.

En Origen XML indicaremos la ruta del archivo XML, puede encontrarse en nuestro propio sitio o en una
dirección concreta de internet, en este último caso deberemos indicar la ruta completa (incluyendo http://...).

Una vez indicado el archivo XML podemos hacer clic en el botón Obtener esquema para ver el esquema XML
del archivo.

Selecciona el Elemento de fila, es decir la etiqueta XML que contiene el conjunto de datos que queremos cargar,
este paso se realizará tal cual como vimos en la unidad anterior. Una vez seleccionado haz clic en el botón Vista
previa para ver un listado con los primeros 20 elementos (de muestra) para asegurarte del contenido del archivo.

Para finalizar podemos definir el tipo de datos que contiene cada dato del elemento. Podemos hacerlo haciendo
clic sobre él en el listado de Columnas del conjunto de datos y seleccionando su tipo en el desplegable Tipo de
datos. Podrás elegir entre: Cadena (de texto), Número, Fecha o Vínculo de imagen.

http://www.aulaclic.es/dreamweavercs3/t_23_1.htm (2 de 3) [10/02/2008 19:48:33]


Curso de Adobe Dreamweaver CS3. Tema 23. Acceso a datos con Spry

Este cuadro de diálogo también te permitirá ordenar los elementos del conjunto repecto a una de sus columnas en
el momento de la carga. Para ello seleccionalo Ordenar y elige el orden Ascendente o Descendente en Dirección.

Para eliminar las filas duplicadas marca la opción Distinguir al cargar.

Por último marca la opción Desactivar caché de datos XML si quieres que el contenido que se muestre en tu página
se refresque cada cierto tiempo, indica este intervalo en la opción Actualizar datos automáticamente. En caso
de que esta opción no se active los datos se cargarán una vez y sólo se actualizarán si se refresca la página.

Cuando hayas terminado de configurar el cuadro de diálogo haz clic en Aceptar y los elementos listos para utilizar
se mostrarán en el panel Vinculaciones.

Pág. 23.1
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.

http://www.aulaclic.es/dreamweavercs3/t_23_1.htm (3 de 3) [10/02/2008 19:48:33]


Curso de Adobe Dreamweaver CS3. Tema 24. AJAX y Spry Framework

Unidad 24. AJAX y Spry Framework (I) Búsqueda

Introducción

AJAX es una combinación de diferentes técnicas que nos permite modificar el contenido de nuestras páginas
sin tener que provocar actualizaciones visibles para el usuario.

Es decir, podremos cambiar la información que mostramos sin tener que hacer una petición al servidor. Porque
como Flash, Java o ActiveX, ¡AJAX es una tecnología que se ejecuta en el cliente!

Para incluir comportamientos y características de AJAX en nuestras páginas deberemos tener conocimientos
de JavaScript, XML y DOM (Document Object Model). Con Spry, utilizar AJAX se hace mucho más simple y asequible.

Como hemos visto en la unidad anterior es posible incorporar información almacenada en archivos con formato XML
y manejarla dinámicamente sin la necesidad de refrescar la página a cada petición.

Ahora veremos un modo avanzado de utilizar estas funcionalidades desde una perspectiva menos cómoda pero
mucho más potente, pues seremos capaces de manejar el contenido dinámico de una forma total y siempre utilizando
la librería Spry que nos proporciona Adobe.

Incluir Spry

En el tema anterior hemos visto como utilizar Spry desde los menús de Dreamweaver CS3, ahora vamos a ver
cómo utilizar Spry manualmente, desde el código. Es bastante sencillo, sólo deberás incluir un par de scripts
de JavaScript que podrás descargarte desde la página de Adobe Labs. Desde allí podrás descargar un archivo .zip,
Este archivo contiene algunas demostraciones y la documentación necesaria para utilizar Spry.

Sólo te interesarán dos archivos que se encuentran en la carpeta includes: SpryData.js y xpath.js.

Para utilizarlos, simplemente cópialos en tu sitio y escribe estas dos líneas en la cabecera de la página:

<script type="text/javascript" src="xpath.js"></script>

<script type="text/javascript" src="SpryData.js"></script>

Con esto referenciamos a los scripts y los incluimos en nuestra página. A partir de ese momento estaremos listos
para utilizar Spry.

Ten en cuenta que Spry únicamente utiliza JavaScript para su funcionamiento, por lo que las páginas donde
decidas incluir este tipo de comportamientos no tendrán porqué ser páginas dinámicas (aunque se comporten como
si lo fueran).

Como más adelante verás, Spry utiliza sus propias etiquetas para trabajar con la información almacenada en el
archivo XML.

Debido a esto es aconsejable indicar el espacio de nombre (una dirección de Internet que contiene la especificación
de las nuevas etiquetas que se van a utilizar) para que el archivo HTML, PHP, ASP... que estemos utilizando
sea correcto y se pueda valorar positivamente.
http://www.aulaclic.es/dreamweavercs3/t_24_1.htm (1 de 2) [10/02/2008 19:48:41]
Curso de Adobe Dreamweaver CS3. Tema 24. AJAX y Spry Framework

Para indicar el nombre de espacio o namespace deberemos añadir el siguiente atributo a la etiqueta html del documento:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">

Para practicar la inclusión de Spry en una página web realiza el Ejercicio Paso a Paso Incluir Spry.

Pág. 24.1
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.

http://www.aulaclic.es/dreamweavercs3/t_24_1.htm (2 de 2) [10/02/2008 19:48:41]


Curso de Adobe Dreamweaver CS3. Tema 25. Spry y Formularios

Unidad 25. Spry y Formularios (I) Búsqueda

Introducción

En las anteriores unidades vimos cómo poder acceder a datos utilizando Spry. Aunque la funcionalidad de esta
librería no se limita únicamente a eso. Como hemos podido ver también eramos capaces de realizar
operaciones dinámicamente sin necesidad de realizar refrescos en la página.

En esta unidad y las posteriores veremos las posibilidades de Spry para crear comportamientos AJAX en nuestro sitio.

Ahora veremos qué puede hacer Dreamweaver por nuestros formularios. Encontrarás las opciones que
utilizaremos bajo el menú Insertar → Spry o en la barra Insertar, pestaña Spry.

Validación de campos de texto

La primera opción que veremos es la inserción de campos de textos dinámicos en nuestros formularios. Utilizando
la opción Insertar → Spry → Campo de texto de validación de Spry podremos insertar un campo de texto que
valide los valores que se introducen en él:

Introduce tu número de telefono:

Cuando insertamos este tipo de controles en nuestros formularios podremos ver lo siguiente en la vista de Diseño:

http://www.aulaclic.es/dreamweavercs3/t_25_1.htm (1 de 3) [10/02/2008 19:48:50]


Curso de Adobe Dreamweaver CS3. Tema 25. Spry y Formularios

El objeto de campo de texto es exactamente igual al que vimos en la unidad de formularios. Haciendo clic en la
etiqueta azul Campo de texto de Spry podrás ver las opciones de validación en el panel Propiedades:

Veamos las posibilidades que nos ofrece.

En el desplegable Tipo podemos seleccionar el tipo de valor que se va a introducir. En principio, Spry tiene
predefinidos bastantes tipos como teléfono, número de seguridad social, tarjetas de crédito, fechas,
correos electrónicos, etc... Solamente será necesario seleccionarlos y elegir el formato en el desplegable Formato.

De este modo la validación ya viene programada automáticamente y no es necesario añadir mucho más.

En el caso de que queramos añadir una validación que no exite en el desplegable Tipo deberemos
seleccionar Personalizado. Para validar la introducción deberemos,entonces, introducir un patrón contra el que
se comparará y se evaluará si es correcto o no. Para ello escribiremos en el campo Patrón una secuencia de
caracteres que imite el texto que buscamos.

Por ejemplo, si queremos que se introduzca un número con 5 dígitos escribiremos 00000. Fácil, ¿verdad?.

En este caso deberemos activar la casilla Aplicar patrón para que Dreamweaver sepa que tiene que realizar
la validación utilizando el patrón que hemos indicado.

En cualquier caso podemos escribir en Sugerencia una ayuda para que el usuario sepa exactamente qué
debe escribir. Ten en cuenta que al validar un campo estamos obligando a que se escriba determinado tipo de datos
por o tanto será necesario hacerselo saber de alguna forma.

El resto de opciones son muy sencillas. Valor min y Valor máx establecen un rango de valores al cual debe
pertenecer el valor introducido. Con Car min y Car máx podemos indicar cuantos caracteres minimos y máximos
admite la caja de texto.

Activa la opción Obligatorio si quieres que el campo no pueda dejarse en blanco.

Luego encontraremos las opciones de validación, es decir, cuando queremos que Spry compare lo que se ha escrito y
lo considere correcto o erróneo. El valor Enviar estará siempre marcado por defecto, esto es, cada vez que se envíe
el formulario se comprobará que los datos introducidos son correctos.

Aunque también es posible añadir dos momentos más donde se evaluará el contenido. Desenfocar ejecuta la
evaluación cuando se abandona el cuadro de texto, y Cambiar se ejecuta cada vez que se escribe cualquier caracter
en la caja.

Puedes marcar cualquiera de estas opciones, pero ten en cuenta que por ejemplo Cambiar puede resultar un
poco engorroso pues mostrará un error cada vez que escribamos hasta que se alcance el patrón correcto. De
todas formas te recomendamos que pruebes cada una de las opciones y te quedes con la que más se ajuste a
tus necesidades.

http://www.aulaclic.es/dreamweavercs3/t_25_1.htm (2 de 3) [10/02/2008 19:48:50]


Curso de Adobe Dreamweaver CS3. Tema 25. Spry y Formularios

Pág. 25.1
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.

http://www.aulaclic.es/dreamweavercs3/t_25_1.htm (3 de 3) [10/02/2008 19:48:50]


Curso de Adobe Dreamweaver CS3. Tema 26. Controles Spry Avanzados

Unidad 26. Controles Spry Avanzados (I) Búsqueda

Introducción

En esta unidad veremos algunos controles basados en AJAX que Dreamweaver pone a nuestra disposición utilizando
su librería Spry.

Estos controles harán que tus páginas se muestren de una forma más profesional, vistosa y ordenada.

Podrás en contrarlos bajo el menú Insertar → Spry o en la pestaña Spry de la barra Insertar:

Estos controles son completamente configurables y además también aceptan modificaciones en su estilo utilizando CSS.

Barra de menús

Podemos crear menús de forma muy sencilla haciendo clic en Insertar → Spry → Barra de menús de Spry:

● Menú 1

● Menú 2

● Menú 3

http://www.aulaclic.es/dreamweavercs3/t_26_1.htm (1 de 3) [10/02/2008 19:49:00]


Curso de Adobe Dreamweaver CS3. Tema 26. Controles Spry Avanzados

● Menú 4

El primer cuadro de diálogo que encontraremos será el siguiente:

Aquí podremos seleccionar el diseño para nuestro menú, haz clic en Horizontal o Vertical y pulsa el botón Aceptar.

Se creará automaticamente el menú, que podrás visualizar desde la vista de Diseño de esta forma:

Haciendo clic en la cabecera azul Barra de menús de Spry podremos ver en el panel Propiedades las
opciones necesarias para configurar nuestro menú:

La creación de elementos es bastante sencilla. Este menú admite hasta 3 niveles diferentes, así que en principio
la primera tarea será definir el primer nivel. Esto lo haremos desde el primer cuadro de listado.

Añadir y quitar elementos es tan fácil como utilizar los botones , y podemos reorganizarlos luego utilizando
las flechas . Cada uno de estos elementos puede ser modificado para que muestren el texto que queramos,
lo haremos desde las cajas de texto que encontramos a la derecha.

En Texto escribiremos el literal que queremos que se lea en el menú. Si ese elemento debe contener un enlace (a
una página o a un correo electrónico) lo haremos escribiendo en la caja de texto Vínculo. Si trabajamos en una
página con marcos podremos utilizar el campo Destino para establecer en cuál de ellos se abrirá el enlace.

Por último, Título contendrá una ayuda contextual que se mostrará en forma de etiqueta al colocar el ratón sobre
el elemento del menú.

Una vez definido el primer nivel, asaremos a crear los hijos de cada elemento. Selecciona uno de los ítems y crea
las opciones que se desplegarán al colocar el ratón sobre ellos. De nuevo utiliza los botones y para
gestionar los elementos en el segundo listado.

http://www.aulaclic.es/dreamweavercs3/t_26_1.htm (2 de 3) [10/02/2008 19:49:00]


Curso de Adobe Dreamweaver CS3. Tema 26. Controles Spry Avanzados

Selecciona cada uno de los elementos de primer nivel y ves creando sus subelementos uno a uno.

Una vez creado un elemento de segundo nivel también seremos capaces de colgar sobre éste otro elemento de
tercer nivel para ello utiliza los botones y y rellena el tercer listado de elementos.

Finalmente diremos que si tienes algún problema en visulizar el menú en vista de Diseño, puedes desactivar los
estilos haciendo clic en el botón Desactivar estilos para visualizarlos de un modo más sencillo y poder
comprender mejor el orden de los niveles creados:

Pág. 26.1
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.

http://www.aulaclic.es/dreamweavercs3/t_26_1.htm (3 de 3) [10/02/2008 19:49:00]


Curso gratis de Adobe Dreamweaver CS3. Caracteristicas.

aulaClic. Cursos de pago. Dreamweaver CS3.

¿Quieres tener el curso en tu ordenador ?

No necesitarás estar conectado a Internet para ver el curso. Los videotutoriales se ejecutarán inmediatamente.
Al comprar estás ayudando a mantener esta web y a que sigamos creando cursos gratis para poner la tecnología
al alcance de todos.

Puedes descargarte el curso por Internet en archivo comprimido Zip por sólo 4 €, o comprar un CD/DVD con
varios cursos por 39 €. ( Enviamos el CD a tu dirección )
DVD / CD 1 39 €. Ofimática con los 8 cursos siguientes: Windows, Internet, OpenOffice, Word, Excel,
Access, Powerpoint,Outlook.
DVD / CD 2 39 €. Diseño y web con los 8 cursos siguientes: Photoshop, Flash, Dreamweaver, FrontPage,
Internet, HTML, SQL, CorelDraw.

Además te regalamos un DVD con más de 600 programas libres/gratuitos al comprar un CD/DVD.

Entra en nuestra tienda donde encontrarás información sobre los precios, formas de pago, formas de envío
y nuestra oferta.

Clic aquí para ir a nuestra tienda

Estas son las características del curso.

Curso Dreamweaver CS3


Temas 26
Número de páginas / Tamaño total 340 págs. / 111 MBytes
Ejercicios paso a paso 84 págs.
Ejercicios propuestos 30 págs.
Vídeotutoriales 37
Autoevaluaciones 25

Precio 4 € (Zip)

http://www.aulaclic.es/dreamweavercs3/curso_pago.htm (1 de 2) [10/02/2008 19:49:08]


Curso gratis de Adobe Dreamweaver CS3. Caracteristicas.

¿Qué son los vídeotutoriales ?

- Si aún no conoces los vídeotutoriales de los cursos de aulaClic, ahora puedes ver uno :

Clic aquí para ir a nuestra tienda

¿Quién utiliza los cursos de aulaClic ?

Aquí puedes ver quienes están utilizando nuestos cursos.

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.
Enero - 2005.

http://www.aulaclic.es/dreamweavercs3/curso_pago.htm (2 de 2) [10/02/2008 19:49:08]


Curso de Adobe Dreamweaver CS3. HTML básico

HTML básico Búsqueda

Las páginas que vemos en Internet están escritas utilizando el lenguaje HTML (Hyper Text Markup Language).
Este lenguaje está basado en etiquetas que marcan el inicio y fin de cada elemento de la página Web.

Por ejemplo, el título de la página Web se escribe entre las etiquetas <TITLE> y </TITLE>. Como ves, ambas
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.

Las etiquetas disponen de atributos que permiten definir características del elemento sobre el que actúan. Por
ejemplo, <TABLE Border="1"> indica que la tabla tendrá un borde de tipo 1.

Una página HTML básica tendría el siguiente aspecto:

<HTML>

<HEAD>

<TITLE> Mi primera página web </TITLE>

<BODY>

<A href:"http://www.aulaclic.com"> Haz clic aquí para ir a aulaClic</A>

resto de la página web

</BODY>

<HTML>

Las etiquetas que se introducen en un documento HTML no son visibles cuando el documento se muestra en
un navegador (IExplorer, Netscape, etc). Cuando un usuario desde Internet solicita ver una página el servidor Web
envía la página al navegador y este interpreta las etiquetas para dar el formato a la página.

Cuando utilizamos Dreamweaver para crear una página Web no tenemos que preocuparnos de todo
esto. Dreamweaver inserta automáticamente las etiquetas necesarias para construir la página con la apariencia
http://www.aulaclic.es/dreamweavercs3/b_1_1_1.htm (1 de 2) [10/02/2008 19:49:18]
Curso de Adobe Dreamweaver CS3. HTML básico

y contenido definidos en el editor gráfico.

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.

http://www.aulaclic.es/dreamweavercs3/b_1_1_1.htm (2 de 2) [10/02/2008 19:49:18]


Curso de Adobe Dreamweaver CS3. Tema 1. Conceptos básicos de Dreamweaver CS3

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

Editar páginas web

Cualquier editor de texto permite crear páginas web. Para ello sólo es necesario crear los documentos con la
extensión HTML o HTM, e incluir como contenido del documento el código HTML deseado. Puede utilizarse incluso
el Bloc de notas para hacerlo.

Pero crear páginas web mediante el código HTML es más costoso que hacerlo utilizando un editor gráfico. Al no
utilizar un editor gráfico cuesta mucho más insertar cada uno de los elementos de la página, al mismo tiempo que es
más complicado crear una apariencia profesional para la página.

Hoy en día existe una amplia gama de editores de páginas web. Uno de los más utilizados, y que destaca por
su sencillez y por las numerosas funciones que incluye, es Adobe Dreamweaver.

Además de Dreamweaver, existen otra serie de buenos editores de páginas web, como pueden ser Microsoft
Frontpage, Adobe Pagemill, Adobe GoLive, NetObjects Fusion, CutePage, HotDog Proffesional, Netscape Composer
y Arachnophilia, algunos de los cuales tienen la ventaja de ser gratuitos.

Cómo tener una página en Internet

Para poder poner una página web en Internet, es necesario contratar a alguna empresa con servidores que
pueda alojarla y hacerla accesible desde Internet las 24 horas del día. El precio por disponer de espacio propio en
el servidor dependerá de la empresa, del espacio en disco, volumen de transferencia y otras opciones que
podamos contratar.

Hay empresas que ofrecen este servicio gratuitamente, pero con ciertas limitaciones: poco espacio de disco, lentitud
y nombre de nuestra página precedido por el de la suya. Hay que tener también en cuenta que estas empresas
deben generar ingresos de alguna forma, por lo que se dedican a vender espacios publicitarios dentro de
nuestras páginas, publicidad que no podremos negarnos a incluir en ellas.

Por estos motivos, no se recomienda utilizar hospedaje gratuito para la página de una empresa, aunque sí es
aceptable para una página personal.

Cuando se va a contratar un servicio de hospedaje es necesario contratar también un dominio, tarea de la que se
suele encargar la propia empresa de hospedaje. Registrar un dominio consiste en registrar un nombre para
nuestra página. Este nombre no puede estar repetido en Internet, ha de ser único, al igual que ocurre con los nombres
de las empresas. Es posible registrar un mismo nombre con distintas terminaciones, como por ejemplo, .net, .org, .es

http://www.aulaclic.es/dreamweavercs3/t_1_2.htm (1 de 2) [10/02/2008 19:49:27]


Curso de Adobe Dreamweaver CS3. Tema 1. Conceptos básicos de Dreamweaver CS3

o .com.

En el caso de los hospedajes gratuitos no es necesario registrar ningún dominio, ya que nuestra página no será más
que un archivo dentro de la de la empresa contratada.

A la hora de contratar un servicio de hospedaje también hay que tener en cuenta el número de cuentas de
correo electrónico propias que pueden habilitarse y si disponemos de una base de datos para poder acceder a ella
a través de programación vía Web, aunque esto último será útil sólo para usuarios avanzados.

Si piensas contratar un servicio de hospedaje te recomendamos Alojalia.com

En cualquier caso, una vez tengas tu espacio en Internet, darle contenido es muy sencillo.

Dreamweaver te permite crear una copia local (en tu ordenador) del sitio web que luego querrás que se encuentre
a disposición de todo el mundo en Internet.

Por tanto, una vez hayas terminado de diseñarla en modo local sólo tendrás que subirla a tu servidor manteniendo
la estructura del local. Es decir, deberás subir todos los archivos tal y como aparecen en tu disco duro,
respetando el nombre de los archivos y la organización de las carpetas. Si no lo haces de este modo, tu
sitio experimentará fallos y enlaces que no funcionarán.

Recuerda que será mejor que no utilices caracteres especiales como acentos o eñes, ni espacios en blanco.
De esta forma te asegurarás de que el servidor puede reconocer sin ningún tipo de problemas los nombres de
los archivos que alojes en él.

Para evitar errores de enlaces rotos o imágenes que no se muestran intenta escribir, también, los nombres
en minúscula. Algunos servidores distinguen entrre mayúsculas y minúsculas, por lo que si en tu página quieres
mostrar la imágen foto1.jpg deberás guardarla con ese nombre y no como Foto1.jpg. Evitarás horas perdidas
buscando fallos.

Pág. 1.2
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.

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


Curso de Adobe Dreamweaver CS3. Tema 1. Conceptos básicos de Dreamweaver CS3

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

Arrancar y cerrar Dreamweaver CS3

Veamos las dos formas básicas de arrancar Dreamweaver CS3.

Desde el botón Inicio situado, normalmente, en la esquina inferior izquierda de la pantalla. Colocar el

cursor y hacer clic sobre el botón Inicio, se despliega un menú; al colocar el cursor sobre Todos los programas
aparece otra lista con los programas que hay instalados en tu ordenador, buscar Adobe, seguidamente
Dreamweaver CS3, hacer clic sobre él, y se arrancará el programa.

Desde el icono de Dreamweaver CS3 del escritorio .

Puedes arrancar Dreamweaver CS3 ahora para ir probando todo lo que te explicamos. Cuando realices los
ejercicios también puedes compaginar dos sesiones de la forma que te explicamos aquí.

Para cerrar Dreamweaver MX 2004, puedes utilizar cualquiera de las siguientes operaciones:

Hacer clic en el botón cerrar

Pulsar la combinación de teclas ALT+F4.

Hacer clic sobre el menú Archivo y elegir la opción Salir.

Si existe algún documento modificado que no ha sido guardado antes de cerrar Dreamweaver, se te pedirá
confirmación para guardar o no cada uno de ellos.

Abrir y guardar documentos

Para abrir un documento, puedes utilizar cualquiera de las siguientes operaciones.

Hacer clic en el botón abrir de la barra de herramientas estándar.

Pulsar la combinación de teclas Ctrl+O.

Hacer clic sobre el menú Archivo y elegir la opción Abrir.

Hacer doble clic sobre el archivo en la ventana del sitio.

http://www.aulaclic.es/dreamweavercs3/t_1_3.htm (1 de 2) [10/02/2008 19:49:35]


Curso de Adobe Dreamweaver CS3. Tema 1. Conceptos básicos de Dreamweaver CS3

Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes operaciones.

Hacer clic en el botón abrir de la barra de herramientas estándar.

Pulsar la combinación de teclas Ctrl+N.

Hacer clic sobre el menú Archivo y elegir la opción Nuevo.

Hacer doble clic sobre el archivo en la ventana del sitio.

Después de esto aparecerá una nueva ventana, en la que deberás elegir la Categoría Página en blanco, HTML.

Para guardar un documento, puedes utilizar cualquiera de las siguientes operaciones.

Hacer clic en el botón guardar de la barra de herramientas estándar.

Pulsar la combinación de teclas Ctrl+S.

Hacer clic sobre el menú Archivo y elegir la opción Guardar.

Dreamweaver incluye la posibilidad de, en el caso de estar trabajando simultáneamente con varios documentos,
poder guardar todos de golpe, sin la necesidad de hacerlo uno por uno. Para guardar todo puedes realizar cualquiera
de las siguientes operaciones.

Hacer clic en el botón guardar todo de la barra de herramientas estándar.

Hacer clic sobre el menú Archivo y elegir la opción Guardar todo.

Al tener varios documentos abiertos es fácil olvidarse de todos las modificaciones hechas en cada uno de ellos.
Debes tener mucho cuidado al utilizar la opción guardar todo, ya que en ocasiones es posible no desear guardar
los cambios en todos los documentos modificados. Por ello es conveniente que al principio no utilices esta opción,
al menos hasta que te hayas habituado a manejar el programa.

Pág. 1.3
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.

http://www.aulaclic.es/dreamweavercs3/t_1_3.htm (2 de 2) [10/02/2008 19:49:35]


Curso de Adobe Dreamweaver CS3. Compaginar dos sesiones

Compaginar dos sesiones Búsqueda

Aquí te explicaremos cómo conseguir tener la pantalla dividida en dos partes, una con el curso y otra con
Dreamweaver CS3.

1 Abrir la sesión con el curso en Internet Explorer.

2 Abrir la sesión de Dreamweaver CS3.

3 Pulsar con el botón derecho sobre cualquier parte vacía de la barra de tareas, en la parte inferior de la ventana
de Windows (del escritorio). Es la barra en la que se encuentra el botón Inicio.

4 Elegir la opción Mosaico vertical.

Observa como la pantalla ha quedado dividida en dos partes, como en la figura:

5 Una vez tenemos las dos sesiones con el tamaño adecuado, basta hacer clic con el ratón para pasar de la una a
http://www.aulaclic.es/dreamweavercs3/b_1_3_1.htm (1 de 2) [10/02/2008 19:49:43]
Curso de Adobe Dreamweaver CS3. Compaginar dos sesiones

la otra.

Para volver a dejar las ventanas con su tamaño normal, hacer clic en el botón Maximizar .

Esto va bien con monitores grandes ( de 17" o más), con monitores pequeños quizás prefieras dejar las ventanas con
su tamaño normal e ir pasando de una a otra presionando las teclas Alt + tabulador (manteniendo pulsada
Alt, presionar la tecla tabulador) o pulsando el botón correspondiente a la sesión en la barra de tareas en la última
línea de la pantalla.

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.

http://www.aulaclic.es/dreamweavercs3/b_1_3_1.htm (2 de 2) [10/02/2008 19:49:43]


Curso de Adobe Dreamweaver CS3. Tema 1. Conceptos básicos de Dreamweaver CS3

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

Para que te vayas haciendo una idea de cómo funciona Dreamweaver, vamos a crear una página web sencilla,
con varios estilos de texto, una imagen y un enlace a otra página. Crear esta página solo te llevará unos pocos minutos,
y sabrás cómo trabajar con los elementos básicos con los que están hechas la mayoría de las páginas web. Si nunca
has hecho una página web, este es el momento para descubrir lo fácil que es.

Mi primera página

Lo primero que tienes que hacer es abrir Dreamweaver. Ya has visto en la página anterior como puede hacerse.
Abres un documento nuevo y seleccionas la Categoría Página básica, HTML.

Seguidamente introduce, en el documento en blanco, el texto que aparece en la imagen siguiente.

Una vez introducido el texto, vas a modificar el título y el color de fondo del documento.

Para ello debes hacer clic sobre el menú Modificar y elegir la opción Propiedades de la página.

Entonces se abrirá una ventana como la que aparece más abajo.

http://www.aulaclic.es/dreamweavercs3/t_1_4.htm (1 de 3) [10/02/2008 19:49:51]


Curso de Adobe Dreamweaver CS3. Tema 1. Conceptos básicos de Dreamweaver CS3

Cambia el Título por Mi primera página.

En Color de Fondo escribe #CCCCFF, de este modo el fondo del documento pasará a ser de color azul.

Seguidamente pulsa sobre el botón Aceptar.

Ahora vas a insertar una imagen. Para insertar la imagen, ha de estar accesible para nosotros. Para ello
debe encontrarse en nuestro disco duro, en un cd-rom o en un disquete, pero preferiblemente en el disco duro.

Muchas de las imágenes que vemos en Internet se pueden copiar al disco duro. Al hacer clic con el botón derecho
del ratón sobre la imagen que queremos traer de Internet, se abre una ventana con una opción similar a
Guardar imagen como... (dependiendo del navegador que utilices) que permite grabar dicha imagen en un fichero
de nuestro disco duro.

En los navegadores más modernos al colocar el cursor sobre una imagen aparecen estos iconos en
una esquina de la imagen, si haces clic en el icono del disquete aparecerá el mismo menú Guardar imagen como...
a que hacíamos referencia anteriormente.

Copia la imagen que aparece a continuación, para luego poder insertarla en la página web que estamos creando.
Puedes guardarla, por ejemplo, en la carpeta Mis Documentos.

http://www.aulaclic.es/dreamweavercs3/t_1_4.htm (2 de 3) [10/02/2008 19:49:51]


Curso de Adobe Dreamweaver CS3. Tema 1. Conceptos básicos de Dreamweaver CS3

Ahora tienes que insertar la imagen debajo de la segunda línea de texto. En primer lugar debes situar el cursor al final
de la segunda línea y pulsar un intro (Enter) para ir a una nueva línea. Después debes dirigirte al menú Insertar, a
la opción Imagen.

En la nueva ventana que aparece, deberás buscar la imagen en la carpeta en la que la habías guardado, y
después seleccionarla.

Pág. 1.4
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.

http://www.aulaclic.es/dreamweavercs3/t_1_4.htm (3 de 3) [10/02/2008 19:49:51]


Curso de Adobe Dreamweaver CS3. Tema 2. El entorno de trabajo

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

Las barras

La barra de título

La barra de título contiene el nombre del programa (Marcromedia Dreamweaver CS3) y seguidamente el nombre
del documento que aparecerá en el explorador y entre paréntesis, su ubicación y el nombre del archivo en formato
html. En el extremo de la derecha están los botones para minimizar, maximizar/restaurar y cerrar.

La barra de menús

La barra de menús contiene las operaciones de Dreamweaver, agrupadas en menús desplegables. Al hacer clic
en Insertar, por ejemplo, veremos las operaciones relacionadas con los diferentes elementos que se pueden insertar
en Dreamweaver.

Muchas de las operaciones se pueden hacer a partir de estos menús, pero para algunas es preferible o
indispensable hacerlas desde los paneles.

La barra de herramientas estándar

La barra de herramientas estándar contiene iconos para ejecutar de forma inmediata algunas de las operaciones
más habituales, como Abrir , Guardar , etc.

La barra de herramientas de documento

La barra de herramientas de documento contiene iconos para ejecutar de forma inmediata algunas otras
operaciones habituales que no incluye la barra de herramientas estándar. Estas operaciones son las de cambio de
vista del documento, vista previa, etc.

http://www.aulaclic.es/dreamweavercs3/t_2_2.htm (1 de 3) [10/02/2008 19:49:59]


Curso de Adobe Dreamweaver CS3. Tema 2. El entorno de trabajo

La barra de estado

La barra de estado nos indica en cada momento en qué etiqueta HTML nos encontramos (en la imagen al
encontrarnos en un documento en blanco estamos directamente sobre la etiqueta <body>).

También nos es posible alternar entre los modos de selección, mano (para arrastrar la página), o zoom. En
cualquier momento puedes seleccionar el zoom preferido desde el desplegable zoom y ajustar la vista al
porcentaje preferido (por defecto siempre viene al 100%).

Los paneles e inspectores

Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se conocen como paneles
o inspectores. La diferencia entre panel e inspector es que, en general, la apariencia y opciones de un
inspector cambian dependiendo del objeto seleccionado.

A través de la opción Ventana, de la barra de menús, es posible mostrar u ocultar cada uno de los paneles o
inspectores. Vamos a ver los más importantes.

El inspector de Propiedades

El inspector de Propiedades muestra y permite modificar las propiedades del elemento seleccionado que son
usadas de forma más frecuente. Por ejemplo, cuando el elemento seleccionado sea texto mostrará el tipo de fuente,
la alineación, si está en negrita o cursiva, etc.

Pulsando sobre el botón se despliega para mostrar más opciones. Este botón se encuentra en la esquina
inferior-derecha.

Seguramente será la herramienta de Dreamweaver que más vayas a utilizar.

La barra de herramientas Insertar o panel de objetos

http://www.aulaclic.es/dreamweavercs3/t_2_2.htm (2 de 3) [10/02/2008 19:49:59]


Curso de Adobe Dreamweaver CS3. Tema 2. El entorno de trabajo

La barra de herramientas Insertar o panel de objetos permite insertar elementos en un documento sin la necesidad
de recurrir al menú Insertar. Los elementos están clasificados según su categoría: tablas, texto, objetos de
formulario, etc.

Es posible configurar este panel para que en los botones se muestren los iconos de los objetos (como ocurre en
la imagen anterior), para que se muestren los nombres de los objetos, o para que se muestren ambos a la vez.

Si lo deseas puedes personalizar el área de trabajo, te explicamos cómo hacerlo aquí .

Pág. 2.2
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.

http://www.aulaclic.es/dreamweavercs3/t_2_2.htm (3 de 3) [10/02/2008 19:49:59]


Curso de Adobe Dreamweaver CS3. Personalizar el área de trabajo

Personalizar el área de trabajo (I) Búsqueda

Cambiar el aspecto del Panel de objetos

Es posible cambiar el aspecto del panel de objetos, se puede visualizar a modo de fichas, tal como aparece en
la siguiente imagen:

También puede tener este otro aspecto:

Para pasar del aspecto Fichas al otro hay que hacer clic sobre el botón ,y
seleccionar la opción Mostrar como menú.

http://www.aulaclic.es/dreamweavercs3/a_2_1_1_1.htm (1 de 4) [10/02/2008 19:50:04]


Curso de Adobe Dreamweaver CS3. Personalizar el área de trabajo

Para volver al aspecto Fichas, desplegamos el menú Diseño (o el que esté en ese momento)
y seleccionamos la opción Mostrar como fichas.

Cambiar el nombre de un grupo de paneles

Es posible cambiar el nombre de un grupo de paneles de forma sencilla. Vamos a ver como ejemplo el cambio
de nombre del panel de objetos.

En estos momentos el panel se llama "Insertar", pero queremos renombrarlo como "Insert". Para ello lo primero que
hay que hacer es pulsar con el botón derecho sobre la zona del nombre o hacer clic sobre el botón con
el siguiente aspecto , ambos situados a los extremos superiores del panel.

http://www.aulaclic.es/dreamweavercs3/a_2_1_1_1.htm (2 de 4) [10/02/2008 19:50:04]


Curso de Adobe Dreamweaver CS3. Personalizar el área de trabajo

Entonces se mostrará el siguiente menú, en el que habrá que elegir la opción


Cambiar nombre de grupo de paneles....

Después de esto se mostrará una ventana en la que se podrá introducir el


nuevo nombre del panel

Cambiar la agrupación de los paneles

La mayoría de los paneles y los inspectores aparecen agrupados junto a otros en una misma ventana flotante.

Para cambiar la agrupación de un panel o de alguna de sus pestañas es necesario, en primer lugar, seleccionar
el panel y la pestaña deseados.

Por ejemplo, vamos a ver cómo cambiar la agrupación de la pestaña Elementos PA del
panel CSS.

Como puede apreciarse en la imagen, la pestaña Elementos PA ya está activa.

Seguidamente hay que hacer clic sobre el botón con el siguiente aspecto , o pulsar
con el botón derecho sobre la zona del nombre del panel o de la pestaña.

http://www.aulaclic.es/dreamweavercs3/a_2_1_1_1.htm (3 de 4) [10/02/2008 19:50:04]


Curso de Adobe Dreamweaver CS3. Personalizar el área de trabajo

Para cambiar la agrupación del panel a otro grupo diferente es necesario


dirigirse a Agrupar Elementos PA con, después de lo cual debe mostrarse
una lista de todos los paneles, pudiendo seleccionar uno de ellos.

De este modo Elementos PA dejaría de estar incluida en el panel CSS, y


aparecería en ese otro panel.

Seguir con el avanzado...


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.

http://www.aulaclic.es/dreamweavercs3/a_2_1_1_1.htm (4 de 4) [10/02/2008 19:50:04]


Curso de Adobe Dreamweaver CS3. Tema 2. El entorno de trabajo

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

Vistas de un documento

Puedes cambiar la vista del documento a través de la barra de herramientas de documento.

La vista Diseño

La vista Diseño permite trabajar con el editor visual. Es la vista predeterminada de Dreamweaver y la que se
suele utilizar habitualmente.

La vista Código

http://www.aulaclic.es/dreamweavercs3/t_2_3.htm (1 de 3) [10/02/2008 19:50:12]


Curso de Adobe Dreamweaver CS3. Tema 2. El entorno de trabajo

La vista Código se utiliza para poder trabajar en un entorno totalmente de programación, de código fuente. No
permite tener directamente una referencia visual de cómo va quedando el documento según se va modificando el código.

La vista Código y Diseño

La vista Código y Diseño permite dividir la ventana en dos zonas. La zona superior muestra el código fuente, y
la inferior el editor visual. Cuando se realiza un cambio en alguna de las zonas, este cambio se aplica directamente
sobre la otra.

http://www.aulaclic.es/dreamweavercs3/t_2_3.htm (2 de 3) [10/02/2008 19:50:12]


Curso de Adobe Dreamweaver CS3. Tema 2. El entorno de trabajo

La ayuda

A través del menú Ayuda puedes ir a varias opciones, veamos algunas de ellas:

Acceder al cuadro de diálogo de ayuda muy similar al de Windows donde puedes buscar por temas, por índice o
por contenido, si seleccionas la opción Ayuda de Dreamweaver o simplemente pulsando F1.

Acceder a tutoriales en internet (en la opción Recursos de ayusa en línea).

Abrir el panel Referencia en el que encontrarás la sintaxis y descripción de las etiquetas HTML.

Acceder al Centro de servicio técnico de Dreamweaver en la web.

Acceder al Foros en línea de Adobe.

Prueba evaluativa del Tema 2.

Pág. 2.3
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.

http://www.aulaclic.es/dreamweavercs3/t_2_3.htm (3 de 3) [10/02/2008 19:50:12]


Curso de Adobe Dreamweaver CS3. Tema 03. Configuración de un sitio local

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

Vistas del sitio

Es posible visualizar un sitio en el panel Archivos o en una ventana.

El panel Archivos se puede abrir a través del menú Ventana, opción Archivos. También pulsando F8.

Para cambiar de una vista a otra hay que pulsar sobre el botón que aparece en la parte superior del panel y de
la ventana.

Al mismo tiempo, es posible visualizar el sitio local, el sitio remoto, el servidor remoto de prueba o el mapa del sitio.

En esta imagen se visualizan el mapa del sitio y el sitio local.

En este caso los documentos prueba1.htm y prueba2.htm cuelgan del documento indice.htm, ya que éste ha
sido definido como página principal del sitio y contiene vínculos hacia los otros dos.

Si los archivos se mueven de una carpeta a otra, o se cambian de nombre, desde fuera de Dreamweaver, las páginas
no se mostrarán correctamente: no aparecerán imágenes, no funcionarán enlaces, etc.

http://www.aulaclic.es/dreamweavercs3/t_3_2.htm (1 de 4) [10/02/2008 19:50:23]


Curso de Adobe Dreamweaver CS3. Tema 03. Configuración de un sitio local

En cambio, si estas modificaciones se hacen desde dentro de Dreamweaver, a través


del sitio, es posible actualizar automáticamente las páginas para que si hacen
referencia a un objeto que ha cambiado, después no se produzcan problemas al
visualizarlas.

Al modificar algún objeto que es referenciado por algún otro documento, se muestra
una ventana similar a esta, que indica los documentos que hacen referencia a dicho
objeto, y que pueden ser actualizados para que no se produzcan los problemas antes
mencionados.

Simplemente hay que pulsar sobre el botón Actualizar.

Subir Archivos al servidor

Cuando quieras visualizar el sitio en Internet (al terminar el curso o para hacer pruebas) deberás subir los archivos al
sitio que hayas contratado o conseguido gratuitamente.

Algunos sitios gratuitos sólo permiten que subas archivos vía web, por lo que deberás ir subiendo uno a uno
cada archivo y creando las carpetas tú mismo. Este proceso puede hacerse muy largo y debes tener mucho
cuidado en mantener la estructura tal y como se encuentra en tu carpeta del disco duro. Sino los enlaces
no funcionarán correctamente y es posible que algunas imágenes no se muestren.

Para subir los archivos via web deberás seguir las instrucciones que te proporcionará tu servidor.

La alternativa es un servidor FTP, que se utiliza en todos los sitios de pago y en algunos gratuitos. Esta forma es,
de lejos, mucho mejor que la anterior.

Vía FTP puedes ver el contenido de tu sitio como una carpeta más (igual que en el Explorador de Windows)
y, obviamente, nos es mucho más útil para subir los archivos.

Uno de los programas gratuitos (si no es con fines comerciales) más utilizados es SmartFTP, desde su página
web podrás descargarte el programa y su traducción al español.

Una vez instalado, abre el programa y haz clic en Archivo y luego en Nuevo Navegador Remoto para crear una
nueva cuenta FTP.

http://www.aulaclic.es/dreamweavercs3/t_3_2.htm (2 de 4) [10/02/2008 19:50:23]


Curso de Adobe Dreamweaver CS3. Tema 03. Configuración de un sitio local

Aquí deberás introducir los datos que te facilitó el servidor donde vas a alojar tus páginas: Host, Usuario y Contraseña.

Rellena los campos y haz clic en OK. Se conectará automáticamente y podrás ver una carpeta donde podrás copiar
los archivos que hayas creado.

Para ello, haz clic en Archivo y en Nuevo Navegador Local para abrir un navegador de los archivos de tu disco
duro. Busca la carpeta que definiste como Sitio local y copia todos los archivos que quieras subir seleccionándolos a
la vez y arrastrándolos a la carpeta (remota) del servidor.

http://www.aulaclic.es/dreamweavercs3/t_3_2.htm (3 de 4) [10/02/2008 19:50:23]


Curso de Adobe Dreamweaver CS3. Tema 03. Configuración de un sitio local

Verás como el programa empieza a copiar la información de tu disco a Internet.

Cuando haya finalizado, sólo tendrás que introducir tu dirección de Internet en la barra de direcciones de tu
navegador (Firefox, Internet Explorer...) y verás el sitio en Internet!

Los servidores de pago, normalmente suelen mostrar varias carpetas al conectar con el servidor. Busca la
carpeta public_html y sube tus archivos allí.

Pág. 3.2
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.

http://www.aulaclic.es/dreamweavercs3/t_3_2.htm (4 de 4) [10/02/2008 19:50:23]


Curso de Adobe Dreamweaver CS3. Asistente para agregar un sitio de red

Comprobar tamaño para optimizar la carga Búsqueda

Si las páginas tienen muchos elementos (imágenes, tablas, etc.) y son muy grandes, posiblemente tarden mucho
tiempo en mostrarse totalmente en el navegador. Esto no es nada recomendable, ya que los usuarios pueden perder
la paciencia, y no visitar más nuestra página.

Siempre hay que intentar que el tiempo de descarga en el navegador no sea muy elevado.

Dreamweaver permite calcular automáticamente el tiempo de descarga de las páginas. Para ello hay que dirigirse
al menú Edición, a la opción Preferencias.

En esta nueva ventana lo primero que hay que hacer es seleccionar una Categoría. En este caso nos interesa la
de Barra de estado.

En ella habrá que establecer una Velocidad de conexión.

En España 56,0 es la velocidad de los módems normales, pero podemos elegir otra diferente, por ejemplo si
pensamos que la mayoría de nuestros posibles clientes tienen conexiones rápidas.

http://www.aulaclic.es/dreamweavercs3/a_3_3_1.htm (1 de 3) [10/02/2008 19:50:32]


Curso de Adobe Dreamweaver CS3. Asistente para agregar un sitio de red

http://www.aulaclic.es/dreamweavercs3/a_3_3_1.htm (2 de 3) [10/02/2008 19:50:32]


Curso de Adobe Dreamweaver CS3. Asistente para agregar un sitio de red

Una vez establecida una velocidad de conexión, y aceptados los cambios, Dreamweaver calculará el tamaño y el
tiempo de descarga de la páginas a partir de esa velocidad de conexión.

Hay que tener en cuenta que el tamaño de descarga de una página no solo se calcula a partir del tamaño de esa
página en disco, sino que hay que considerar también el tamaño de las imágenes que aparecen en ella, y del resto
de elementos.

Cuando en la ventana de documento de Dreamweaver esté abierta alguna página, se mostrarán su tamaño y su
tiempo de descarga en la barra de estado.

Por ejemplo, esta página que estás viendo tiene un tamaño de descarga de 59K, y se presupone un tiempo de
descarga de 9 segundos, ya que en la barra de estado de la ventana de documento aparecen estos datos entre
el tamaño de la ventana de documento y el panel de propiedades, representados por 59K/9 s.

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.

http://www.aulaclic.es/dreamweavercs3/a_3_3_1.htm (3 de 3) [10/02/2008 19:50:32]


Curso de Adobe Dreamweaver CS3. Tema 03. Configuración de un sitio local

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

Propiedades del documento

Es conveniente definir sitios homogéneos, que todas las páginas de un sitio sigan un mismo formato, es decir,
que tengan el mismo color de fondo, de fuente, etc.

Puede definirse el formato de cada una de las páginas a través del cuadro de diálogo Propiedades de la página.

Este cuadro se puede abrir de tres modos diferentes:

Pulsar la combinación de teclas Ctrl+J.

Hacer clic sobre el menú Modificar y elegir la opción Propiedades de la página.

Hacer clic con el botón derecho del ratón sobre el fondo de la página. Aparecerá al final del menú contextual la
opción Propiedades de la página. Se abrirá el cuadro de diálogo siguiente:

http://www.aulaclic.es/dreamweavercs3/t_3_3.htm (1 de 4) [10/02/2008 19:50:42]


Curso de Adobe Dreamweaver CS3. Tema 03. Configuración de un sitio local

Las propiedades están organizadas en categorías.

En la categoría Aspecto, como ves en la imagen anterior, encontramos las propiedades:

Imagen de fondo: permite especificar una imagen de fondo para el documento. Dicha imagen se muestra en
mosaico. Es importante al elegir una imagen de fondo tener en cuenta que según los colores de la imagen será
necesario establecer unos u otros colores para el texto, así como que no es conveniente tener un gif animado
como fondo.

Color de fondo: permite especificar un color de fondo para el documento, pero dicho color solo se mostrará en el
caso de no haber establecido ninguna imagen de fondo.

Tamaño: permite definir el tamaño de la letra.

Color del texto: es el color de la fuente.

Márgenes: permiten establecer márgenes en el documento. Los márgenes izquierdo y superior solo funcionan
en Microsoft Internet Explorer, mientras que el ancho y el alto de márgen solo funcionan para Netscape
Navigator. Ninguno de estos márgenes aparece en la ventana de documento de Dreamweaver, solo se mostrarán en
los navegadores.

En la categoría Título/Codificación encontramos la propiedad:

Título: es el título del documento, que aparecerá en la barra de título del navegador y de la ventana de documento
de Dreamweaver.

En la categoría Vínculos encontramos las propiedades:

Color de vínculo: es el color de los vínculos, que ayuda al usuario a distinguir entre el texto normal y los vínculos
que sirven de enlace a otras páginas.

Vínculos visitados: es el color de los vínculos visitados, que permite distinguir al usuario si unos vínculos ya han
sido visitados o no.

Vínculos activos: es el color de los vínculos activos.

Estilo subrayado: por defecto, cuando tenemos un texto con un vínculo asociado, el texto aparece subrayado, con
esta opción podemos elegir otro tipo de estilo por ejemplo para que no aparezca subrayado.

http://www.aulaclic.es/dreamweavercs3/t_3_3.htm (2 de 4) [10/02/2008 19:50:42]


Curso de Adobe Dreamweaver CS3. Tema 03. Configuración de un sitio local

En la categoría Imagen de rastreo encontramos las propiedades:

Imagen de rastreo: permite establecer una imagen como fondo del documento, pero que sólo se mostrará en la
ventana de documento de Dreamweaver, y nunca en un navegador. Dicha imagen se utiliza como plantilla gráfica
sobre la que crear el documento.

Transparencia: permite establecer la opacidad de la imagen de rastreo.

Hay que tener cuidado de no crear páginas que tarden mucho tiempo en cargarse en el navegador. Para ver
cómo comprobar el tamaño de los documentos, pulsa aquí .

Los colores

Para asignar colores es posible desplegar una paleta de colores como ésta. Al seleccionar un color de estas paletas,
se muestra el valor hexadecimal del color en la parte superior.

Las paletas de colores de Dreamweaver utilizan la paleta de 216 colores seguros para web. Éstos son los colores que
se muestran de la misma forma en Microsoft Internet Explorer y en Netscape Navigator, tanto en Windows como
en Macintosh.

También es posible personalizar los colores a través del botón de la parte superior de la paleta.

Los colores pueden asignarse a través de los botones: .

Estos botones suelen aparecer en el inspector de propiedades de muchos objetos, y también en algunas ventanas
que permiten especificar propiedades (sobre todo propiedades de texto, fondo, o tablas), como es el caso de la
ventana de Propiedades de la página, que tienes más arriba.

El color puede insertarse de dos modos. Uno de ellos es pulsando sobre el recuadro gris , lo que hace que
se despliegue la paleta de colores. El otro modo es introduciendo directamente el número hexadecimal del color en
el recuadro blanco.

Por ejemplo, si en la paleta de colores que aparece más arriba se seleccionara el color azul con valor #3399FF, el
botón quedaría del siguiente modo: .

Para practicar puedes realizar el Ejercicio paso a paso Crear nuevo documento y modificar sus propiedades.

Ejercicios del Tema 3. Prueba evaluativa del Tema 3.

Pág. 3.3
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.

http://www.aulaclic.es/dreamweavercs3/t_3_3.htm (3 de 4) [10/02/2008 19:50:42]


Curso de Adobe Dreamweaver CS3. Tema 03. Configuración de un sitio local

© aulaClic. Todos los derechos reservados. Free Computer tutorials. Prohibida la reproducción por cualquier medio.
Septiembre - 2007.

http://www.aulaclic.es/dreamweavercs3/t_3_3.htm (4 de 4) [10/02/2008 19:50:42]


Curso de Adobe Dreamweaver CS3. Tema 16. Comportamientos Avanzados

Unidad 16. Comportamientos Avanzados (II) Búsqueda

Carga Previa de Imágenes

Este comportamiento te será muy útil para mejorar la visualización de tus páginas web.

Al cargar previamente las imágenes contenidas en la página obligamos al navegador a descargar las imágenes
con prioridad sobre el resto del documento.

Así cuando la página finalmente se visualiza (porque ha terminado la carga) el usuario verá la estructura completa de
la página con las imágenes incluidas ya cargadas y mostrándose.

Este método se diferencia del tradicional en que si no establecemos este comportamiento, la página se carga (sólo
texto) y se visualiza.

Una vez terminada esta carga, el navegador empieza la descarga de las imágenes. Por lo que hay unos momentos
en los que la página no se muestra tal y como fue concebida, e incluso su estructura puede verse afectada si no
se introdujeron los valores de altura y anchura de las imágenes contenidas (el texto se dispondría sin tenerlas en
cuenta hasta que se descargasen).

Para evitar esto utilizaremos la Carga Previa de Imágenes.

Para ello deberemos abrir el panel Comportamientos (Mayus+F4) y hacer clic sobre el botón ,
selecciona, entonces, la opción Carga previa de imágenes.

Se abrirá el siguiente cuadro de diálogo:

Aquí deberás incluir las imágenes que quieras que se carguen utilizando los botones , podrás indicar su
ubicación pulsando el botón Examinar.

Respecto a este comportamiento deberás de tener en cuenta dos cosas. La primera y más obvia es que no
cargues imágenes que no vayas a utilizar. No tiene sentido que desaproveches tiempo de descarga y visualización
http://www.aulaclic.es/dreamweavercs3/t_16_2.htm (1 de 2) [10/02/2008 19:50:49]
Curso de Adobe Dreamweaver CS3. Tema 16. Comportamientos Avanzados

en cargar una imagen que no vas a utilizar.

El segundo consejo es que no abuses de este comportamiento. Es verdad que es muy útil, pero sólo cuando
las imágenes a cargar no son muchas y además son bastantes ligeras.

Si cargas previamente imágenes muy pesadas, o demasiadas como para que el navegador se detenga durante
unos segundos mientras realiza la carga, es posible que el usuario al ver que tu página tarda demasiado en cargarse
la abandone.

Pág. 16.2
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.

http://www.aulaclic.es/dreamweavercs3/t_16_2.htm (2 de 2) [10/02/2008 19:50:49]


Curso de Adobe Dreamweaver CS3. Tema 16. Comportamientos Avanzados

Unidad 16. Comportamientos Avanzados (III) Búsqueda

Abrir Ventana del Navegador

Este comportamiento, aunque a primera vista creas que no sirva para mucho, te ayudará a crear enlaces mucho
más personalizados.

Asociaremos este comportamiento normalmente a un enlace, o como mucho a una imagen o un botón. Pero siempre
lo haremos asociado al evento onClick de estos elementos.

Otra opción es asociarlo al evento onLoad del body para que cuando se cargue el documento abra al mismo tiempo
una nueva ventana que dirigiremos a la URL que queramos.

En esencia este comportamiento es un creador de pop-ups o ventanas emergentes, así que si el usuario dispone
de un bloqueador es posible que no se pueda llevar a cabo la apertura de la nueva ventana.

Pero veamos qué debemos hacer para poder abrir una ventana de este modo.

Primero seleccionaremos elemento asociado al comportamiento, si lo que queremos es que se asocie al body de
la página haremos clic en una área vacía del documento.

Luego abre el panel Comportamientos (Mayus+F4) y pulsa el botón para desplegar la lista.

Selecciona la opción Abrir ventana del navegador y verás el siguiente cuadro de diálogo:

Veamos las opciones que podemos seleccionar aquí.

En Mostrar URL: escribiremos la URL de la página que queremos abrir.

En los cuadros de texto de Ancho de la ventana: y Alto de la ventana: podremos especificar su tamaño en píxeles.

El cuadro Nombre de la ventana: te permitirá darle un nombre a la nueva ventana. Así, más tarde,
utilizando JavaScript, podríamos referenciarnos a ella utilizando este nombre.
http://www.aulaclic.es/dreamweavercs3/t_16_3.htm (1 de 2) [10/02/2008 19:50:56]
Curso de Adobe Dreamweaver CS3. Tema 16. Comportamientos Avanzados

En Atributos: marca las casillas para que los elementos como la barra de estado o la barra de menús aparezcan en
la nueva ventana.

Si dejas todos desmarcados, la ventana se abrirá sin ningún elemento y aparecerá únicamente rodeada de un marco
de página.

Pág. 16.3
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.

http://www.aulaclic.es/dreamweavercs3/t_16_3.htm (2 de 2) [10/02/2008 19:50:56]


Curso de Adobe Dreamweaver CS3. Tema 16. Comportamientos Avanzados

Unidad 16. Comportamientos Avanzados (IV) Búsqueda

Comprobar Navegador

A pesar de que en próximas versión es de Dreamweaver está opción desaparecerá, podemos utilizar
este comportamiento para crear dos páginas diferentes dependiendo del navegador que esté utilizando el usuario.

Esta opción existía debido a que Internet Explorer suele comportarse de forma diferente al resto de navegadores.
Su política de seguimiento de los estándares varía un poco respecto a las demás. Por lo que una página se puede
ver diferente en IE y en Firefox siendo que tiene el mismo código!

Para saltarnos este error entre los navegadores aparece este comportamiento que utilizaremos para evaluar
el navegador que está utilizando el usuario y mostrando una página u otra utilizando redireccionamientos.

Veamos el cuadro de diálogo que se muestra al seleccionar Comprobar navegador al hacer clic en el botón
del panel Comportamientos, dentro del menú ~Ya no se utiliza:

Como puedes ver hay dos bloques importantes en esta ventana Netscape Navigator e Internet Explorer, esto
es debido a que son los más utilizados.

Podemos seleccionar la versión a partir de la cual el cambio de URL se realice, si no tienes muy claro qué valores
debes escribir déjalo como está. Los valores por defectos son bastante acertados.

Luego deberás seleccionar qué quieres hacer en cada uno de los casos (que se cumpla la versión o no). Para
ello deberás rellenar las dos cajas de texto que se encuentran al pie de la ventana URL y Alt URL (URL alternativa).

En los desplegables encontrarás también la opción Permanecer en esta página cuyo uso es bastante aconsejable,
así evitarás saltos de URLs innecesarios.

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


Curso de Adobe Dreamweaver CS3. Tema 16. Comportamientos Avanzados

Finalmente el tercer bloque Otros navegadores te permite exactamente las mismas opciones que las anteriores.
Esto, en realidad, se debe a que las versiones antiguas de Netscape e IE son las más problemáticas y por ello
se dedican páginas especiales para ellos.

Un consejo que te podríamos dar es que te instales diferentes navegadores en tu PC y hagas pruebas del visionado
de las páginas antes de publicarlas. Así te asegurarás de que el resultado sea óptimo en todos los casos.

Este comportamiento debe ir asociado al evento onLoad de la etiqueta body para que se ejecute en la carga de
la página.

Comprobar Plug-ins

Otro comportamiento que tiene que ver con la comprobación de las características del navegador del usuario es la
opción Comprobar Plug-ins.

Si haces clic sobre ella verás el siguiente cuadro de diálogo:

Este comportamiento nos dará la posibilidad de comprobar si el navegador tiene instalados los plug-ins (o
añadidos) necesarios para que pueda ver archivos de tipo Flash, Quicktime, Shockwave, RealPlayer, etc...

Para ello deberemos seleccionar el tipo de plug-in que requerimos para que nuestra página se visualice
correctamente, en el caso de que no se encuentre en el desplegable Seleccionar: deberemos escribir su nombre en
el cuadro de texto Introducir: (aunque esto ocurrirá en contadas ocasiones).

Rellena los campos de URL siguientes. El primero indicará la ruta de la página que quieres que se muestre si el plug-
in existe en el navegador del usuario. Déjalo en blanco si quieres que se quede en la página en la que está.

Y en el campo De lo contrario, ir a URL: escribe la ruta a la que debe redirigirse el navegador en caso de que
no tuviese el plug-in instalado. Aquí tienes dos opciones, o bien redirigir al usuario a la página donde descargarse el
plug-in para poder visualizar la tuya correctamente, o redirigirlo a una página que hayas creado para aquellos que
no cumplan los requisitos mínimos del sitio.

Este comportamiento también deberá ir asociado al evento onLoad del body para que pueda ejecutarse en la carga
de la página.

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


Curso de Adobe Dreamweaver CS3. Tema 16. Comportamientos Avanzados

Normalmente este comportamiento sólo tendrá un uso práctico en Internet Explorer, ya que la mayoría del resto de
los navegadores soportan por sí solos la detección de plug-ins instalados y redireccionan a la fuente del plug-
in directamente.

Pág. 16.4
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.

http://www.aulaclic.es/dreamweavercs3/t_16_4.htm (3 de 3) [10/02/2008 19:51:02]


Curso de Adobe Dreamweaver CS3. Tema 16. Comportamientos Avanzados

Unidad 16. Comportamientos Avanzados (V) Búsqueda

Menús de Salto

Sección 1

Aunque este comportamiento se encuentra en el listado del panel Comportamientos vamos a aprender a
insertarlo desde otro lugar ya que te será más fácil.

Un menú de salto no es más que un menú desplegable desde el que puedes saltar de una página a otra con
sólo seleccionar la opción correspondiente en el menú. Justo al principio del apartado tienes un ejemplo (no es
funcional pero puedes desplegarlo para hacerte una idea) que ilustra el aspecto que tendría este tipo de menús.

Insertarlo es muy sencillo, sólo tienes que hacer clic en Insertar, seleccionar la opción Formulario y en el
desplegable elegir Menú de salto.

Se abrirá este cuadro de diálogo:

Para crear el menú deberás introducir los elementos (opciones) que lo forman. Para ello escribe en Texto el título de
la página y en Al seleccionarse, ir a URL la ruta de la página que se tiene que abrir si el usuario selecciona esta
opción del menú.

Una vez rellenados estos campos, haz clic en el botón .

Luego repite el proceso tantas veces como elementos en el menú quieras insertar.
http://www.aulaclic.es/dreamweavercs3/t_16_5.htm (1 de 2) [10/02/2008 19:51:09]
Curso de Adobe Dreamweaver CS3. Tema 16. Comportamientos Avanzados

Cuando hayas acabado decide en qué ventana quieres abrir los enlaces en Abrir URL en: y dale un nombre al
menú (para reconocerlo mejor más tarde) en Nombre del menú.

Luego puedes marcar la opción Seleccionar primer elemento tras el cambio de URL para que cuando se abra
la ventana el elemento del menú que se muestre sea el primero.

Déjalo desmarcado si quieres que se muestre el de la página que se está visualizando.

Sección 1 Ir

Luego marca la opción Insertar botón Ir tras el menú para que se añada un botón al formulario.

Si escoges esta opción verás que se crea un menú como el que tienes justo sobre este párrafo.

El funcionamiento de este menú de salto es muy parecido al anterior, sólo que una vez seleccionada la página
que mostrar hay que pulsar el botón para que se efectúe el salto.

Ejercicios del Tema 16. Prueba evaluativa del Tema 16.

Pág. 16.5
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.

http://www.aulaclic.es/dreamweavercs3/t_16_5.htm (2 de 2) [10/02/2008 19:51:09]


Curso de Adobe Dreamweaver CS3. Tema 17. Estilos CSS Avanzado

Unidad 17. Estilos CSS Avanzado (II) Búsqueda

Estructura CSS

Un archivo CSS (por suerte) tiene una estructura muy bien definida, por lo que bastará con que nos aprendamos
unas cuantas reglas para poder empezar a familiarizarnos con su creación.

Su estructura siempre es la siguiente:

selector { propiedad:valor; }

Esto es lo que podríamos llamar una regla CSS. Podemos escribir tantas reglas CSS como queramos, siempre
una después de otra.

Entre llaves se encierra la definición del estilo, que viene dada por una lista de propiedades y sus valores separados
por puntos y comas.

Los selectores son aquellos sobre los que se aplica la definición del estilo CSS.

Hay 3 tipos de selectores:

Etiqueta HTML

Clase

Identidad

Cualquier etiqueta HTML es un selector (eliminando los < y >). Por lo que cualquier elemento de una página puede
ser modificado genéricamente para que tome un mismo aspecto, por ejemplo:

p {font: 13px bold Arial;}

Hace que todos los párrafos (la etiqueta P) tendrán la fuente de un tamaño de 13 píxeles, estará en negrita y será
del tipo Arial.

Una clase es un selector que afectará sólo a aquellas etiquetas que nosotros decidamos, por ejemplo:

.rojo {color: red;}

Hemos creado una clase que hace que el color de la letra que tenga asociada esta clase sea rojo. Como puedes ver,
la clase se define porque tiene un punto delante.

Ahora podríamos aplicar este estilo sobre cualquier etiqueta que queramos.

<p class="rojo">Este es un texto en rojo</p>

<div class="rojo">Este es un bloque con el texto rojo</div>

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


Curso de Adobe Dreamweaver CS3. Tema 17. Estilos CSS Avanzado

En este ejemplo estaríamos creando un párrafo o un bloque y ambos tendrían el texto de color rojo por
habérseles aplicado la misma regla CSS.

Los selectores de clase deben estar siempre escritos con carácteres alfanuméricos y sin utilizar espacios (utiliza
el subrayado _ para separar palabras).

Por último encontraríamos los selectores de identidad. Estos sólo se aplican una vez y se asocian a una etiqueta.

#contenedor {width: 600px;}

Más tarde en el código podremos encontrar:

<div id="contenedor">Este es un bloque que contiene texto</div>

Las clases de identidad se identifican por empezar el selector con un signo #. En el código deberá establecerse la
regla CSS asociándosela al atributo ID.

Este atribudo (id) recoge el nombre del elemento que se ha creado con la etiqueta HTML.

A partir de ese momento se podría referenciar a ese cuadro de texto como contenedor utilizando JavaScript.

Pág. 17.2
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.

http://www.aulaclic.es/dreamweavercs3/t_17_2.htm (2 de 2) [10/02/2008 19:51:19]


Curso de Adobe Dreamweaver CS3. Tema 17. Estilos CSS Avanzado

Unidad 17. Estilos CSS Avanzado (III) Búsqueda

Selectores CSS

Aunque sólo hay tres tipos de selectores diferentes hay diversas formas de combinarlos para producir hojas de estilo
más complejas.

Ahora veremos estos tipos de combinación:

Agrupación: Los selectores se pueden agrupar separados por comas, por lo que:

p { background-color: #000033; }

.azul_oscuro { background-color : #000033; }

#cabecera { background-color: #000033; }

Puede escribirse como:

p, .azul_oscuro, #cabecera { background-color: #000033; }

Descendencia: Podemos obligar que un estilo sólo se aplique sobre un elemento que esté dentro de otro.
Por ejemplo:

h1 {

color: #0000FF;

font-weight: bold;

b { color: #0000FF; }

Esto hará que todos los encabezados H1 de la página sean de color azul y en negrita, y que los textos en negrita
se muestren azules.

Pero, ¿qué pasa si queremos resaltar texto en los encabezados, no podremos utilizar la negrita?

<h1>Título: El uso de la <b>Negrita</b></h1>

En este caso deberemos hacer uso de la descendencia:

h1 b { color: red; }

Ahora los textos marcados con la etiqueta B en los encabezados H1 serán de color rojo.

Al escribir dos selectores seguidos obligamos a que el segundo tenga que estar dentro del anterior.

Puedes utilizar todas las anidaciones que quieras y mezclar los selectores, por ejemplo:

#contenedor p .derecha { float: right; }


http://www.aulaclic.es/dreamweavercs3/t_17_3.htm (1 de 2) [10/02/2008 19:51:27]
Curso de Adobe Dreamweaver CS3. Tema 17. Estilos CSS Avanzado

En este caso todas las etiquetas con la clase derecha que se encuentren dentro de un párrafo del elemento
definido como contenedor flotarán a la derecha.

Selectores de Atributo

Hasta ahora hemos visto que los selectores se pueden combinar de bastantes formas. Veamos que el poder de CSS
no sólo se queda ahí sino que avanza un poco más para ayudarnos a establecer estilos según el tipo de atributos
que tenga una etiqueta.

Un atributo es una parte de la descripción de un selector HTML. Por ejemplo, en:

<a href="http://www.aulaclic.es" target="_blank">Enlace</a>

A es el selector de la etiqueta, mientras que href y target son atributos.

CSS permite entrar en el contenido de las etiquetas para cambiar sus estilos. Veamos cómo hacerlo:

Nombre de Atributo: Podemos establecer estilos para etiquetas con determinados atributos definidos,
por ejemplo:

a[href] { font-family: Arial, Helvetica; }

En esta línea estamos estableciendo que cualquier etiqueta a que tenga el atributo href cambie su tipo de letra a Arial
o Helvética.

Valor de Atributo: Podemos aplicar estilos a etiquetas que tengan determinado valor en un atributo, por ejemplo:

a[target="_blank"] { font-weight: bold; }

Esta línea hará que se convierta en negrita cualquier enlace que abra una nueva ventana al hacer clic.

Interesante, ¿verdad?.

Pág. 17.3
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.

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


Curso de Adobe Dreamweaver CS3. Tema 17. Estilos CSS Avanzado

Unidad 17. Estilos CSS Avanzado (IV) Búsqueda

Pseudo-clases y Pseudo-elementos CSS

Por último, y para terminar con los selectores veremos las pseudo-clases, elementos que añadiremos a los
selectores para evidenciar algún estado.

Y los pseudo-elementos, que aplicaremos sobre los selectores en dos casos muy sencillos.

Primero veremos 4 tipos diferentes de pseudo-clases, que hasta ahora sólo pueden aplicarse sin ningún
problema sobre la etiqueta A (que utilizamos para crear vínculos). Son: :link, :visited, :hover y :active.

Incluyendo estas pseudo-clases en nuestros estilos CSS podremos modificar el modo en el que se visualizarán
los enlaces.

Veamos el siguiente ejemplo:

a:link { color: red; }

a:visited { color: blue; }

a:hover { color: green; }

a:active { color: yellow; }

Esto hará que los enlaces se muesten de color rojo (red) en nuestra página. Es el estado link.

Cuando ya hayan sido visitados por el usuario se quedarán de color azul (blue). Es el estado visited. Este estado
se renovará dependiendo del navegador utilizado y se mostrará durante un tiempo determinado (una sesión, etc...).

En el momento en que coloques el ratón sobre él se mostrará de color verde (green). Es el estado hover.

Y finalmente en el momento que se haga clic sobre él, y mientras se mantenga pulsado el botón se verá de
color amarillo (yellow). Es el estado active.

Prueba este enlace

Puedes aplicar estas pseudo-clases de cualquier forma de las anteriores.

a.menu:hover { text-decoration: none; }

Esta línea hará que los elementos A de la clase menu no muestren subrayado (ni ningún tipo de decoración) cuando
se coloque el ratón sobre él.

Puedes utilizarlas todas a la vez o descartar los estados que no quieras tratar. Pero recuerda, deberán estar
declaradas en el estilo CSS en este orden para que funcionen correctamente. Si los cambias de orden es posible que
no te funcionen.

http://www.aulaclic.es/dreamweavercs3/t_17_4.htm (1 de 2) [10/02/2008 19:51:33]


Curso de Adobe Dreamweaver CS3. Tema 17. Estilos CSS Avanzado

Luego tenemos dos pseudo-elementos que actuarán sobre el texto del documento, son: :first-letter y :first-
line (primera letra y primera línea respectivamente).

p:first-letter { font-size: 26px; }

p:first-line { font-variant: small-caps; }

Puedes ver un ejemplo de cómo actuarían estos pseudo-elementos en la siguiente línea:

Esto es una Prueba, la primera


línea esta en versales y la
primera letra tiene un tamaño
de 26px.

Para practicar los pseudo-elementos y clases realiza el Ejercicio Paso a Paso de Pseudo-elementos y clases.

Pág. 17.4
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.

http://www.aulaclic.es/dreamweavercs3/t_17_4.htm (2 de 2) [10/02/2008 19:51:33]


Curso de Adobe Dreamweaver CS3. Tema 17. Estilos CSS Avanzado

Unidad 17. Estilos CSS Avanzado (VI) Búsqueda

Espaciado

Continuando con los controles de texto tenemos la propiedad word-spacing que establece la separación entre
las palabras de un texto.

Este texto tiene una separación de 18 píxeles entre sus palabras.

Este, sin embargo, tiene una separación de -5 píxeles.

También podemos utilizar la propiedad letter-spacing para establecer la distancia aplicada entre los caracteres
del texto:

Este texto tiene una separación de 5 píxeles entre sus palabras.

Este, sin embargo, tiene una separación de -2 píxeles.

vertical-align establece la alineación vertical del texto. Puede tomar los valores baseline, sub, super, top, text-
top, middle, bottom, text-botom.

baseline, sub, super, top, text-top, middle, bottom, text-bottom

Observa como los valores sub, super, text-bottom y text-top toman como referencia el tamaño del texto, mientras
que top, middle y bottom toman como referencia el alto del párrafo completo (en este caso lo marca la imagen
de aulaClic).

line-height indica el alto de línea del texto, igual que el resto de propiedades puedes establecer esta altura
en píxeles, ems o puntos.

Este texto tiene un alto de

línea de 30 píxeles. Puedes

ver que la separación entres

estas líneas es mayor que la

definida por defecto.

Este texto tiene un alto de


línea de 10 píxeles. Puedes
http://www.aulaclic.es/dreamweavercs3/t_17_6.htm (1 de 3) [10/02/2008 19:51:41]
Curso de Adobe Dreamweaver CS3. Tema 17. Estilos CSS Avanzado

ver que la separación entres


estas líneas es menor que la
definida por defecto.

Si estableces simplemente valores numéricos podrás indicar el alto respecto a su tamaño normal. Por ejemplo:

p { line-height: 2; }

Esta línea muestra el texto con un interlineado doble. Si hubiesemos escrito 1.5 el interlineado sería un 50% más
alto de lo normal.

text-align establece la alineación horizontal del texto. Sus valores ya te deben ser familiares: left, right, center
y justify.

Este texto está alineado a la


izquierda con left.

Este texto está alineado a la


derecha con right.

Este texto está alineado al


centro con center.

Este texto está justificado,


ambos márgenes del texto
tocarán los bordes. Si es
necesario estirar las líneas se
hará.

text-indent indica el tamaño de identación (o sangría) del texto. Tomará valores en puntos, píxeles o ems,
como prefieras.

Texto identado 24px

Texto identado 48px

Texto identado 72px

white-space, esta propiedad es muy útil para evitar que el ancho del navegador modifique el ancho de las líneas
del texto.

Puede tomar el valor nowrap para que el texto se muestre en una sóla línea sin insertar saltos no deseados:

Este texto no tiene saltos de línea, así que se mostrará en toda su anchura aunque el navegador sea más estrecho. Haz más pequeña la ventana para probarlo.

También puedes establecer esta propiedad al valor pre. En este caso todos los espacios insertados en el texto
se mostrarán y no se convertirán en uno sólo como ocurre normalmente:

En este texto podemos introducir tantos espacios como queramos. Da igual si son más de uno,
se mostrarán igualmente.

Este último valor no funciona correctamente en Internet Explorer así que es recomendable utilizar la entidad HTML
http://www.aulaclic.es/dreamweavercs3/t_17_6.htm (2 de 3) [10/02/2008 19:51:41]
Curso de Adobe Dreamweaver CS3. Tema 17. Estilos CSS Avanzado

( ) para mostrar más de un espacio.

Pág. 17.6
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.

http://www.aulaclic.es/dreamweavercs3/t_17_6.htm (3 de 3) [10/02/2008 19:51:41]


Curso de Adobe Dreamweaver CS3. Tema 17. Estilos CSS Avanzado

Unidad 17. Estilos CSS Avanzado (VII) Búsqueda

Aspecto del texto

text-decoration establece si el texto llevará decoración o no. Esta propiedad es muy útil para modificar el estilo de
los enlaces. Los valores que puede tomar esta propiedad son none, underline, overline, line-through, blink.

none, underline, overline, line-through, blink


El valor blink hace que el texto parpadee. Este valor sólo funciona en determinados navegadores (no en
Internet Explorer).

Con la propiedad text-transform puedes indicar la transformación del texto de la siguiente forma. Capitalize
cambia la primera letra de cada palabra a mayúsculas. Uppercase y lowercase cambian el texto a mayúsculas
o minúsculas respectivamente.

Este texto tiene el valor capitalize, las primeras letras serán en mayúsculas, el resto se
mostrará en minúsculas automáticamente
Este texto tiene el valor uppercase, aunque este escrito en minúsculas se cambiará a mayúsculas
Este texto tiene el valor lowercase, aunque este escrito en mayúsculas se cambiará a minúsculas

Por último veremos la propiedad color que establece el color del texto.

Esta propiedad puede tomar un valor hexadecimal (como vimos en el apartado de colores del tema 3).

De modo que simplemente haría falta especificar el color de este modo:

p { color: #006600; }

Unos ejemplos serían los siguientes:

#006600 #00FF00 #003399 #33CC99 #66CCFF #00CCCC

#990000 #999900 #FF9933 #996699 #CCFF33 #CCFF99

También existe la posibilidad de utilizar unas palabras reservadas para nombrar unos cuantos colores básicos.

El modo en el que se definiría el estilo sería el mismo:

p { color: red; }

Aunque en este caso en vez de introducir su equivalente hexadecimal, referenciaríamos directamente su nombre.

http://www.aulaclic.es/dreamweavercs3/t_17_7.htm (1 de 2) [10/02/2008 19:51:48]


Curso de Adobe Dreamweaver CS3. Tema 17. Estilos CSS Avanzado

Puedes encontrar el listado de los nombres de color que puedes utilizar en el sitio de la W3C.

Para practicar realiza el Ejercicio Paso a Paso de Controles de Fuente.

Controles de ratón

Hemos decidido dedicar este apartado a la propiedad cursor que modifica la apariencia del ratón cuando se sitúa
sobre una etiqueta afectada por esta propiedad CSS.

Puedes aplicarla sobre párrafos, enlaces o incluso sobre el body mismo (así el cursor tendrá una forma personalizada
en toda la página!).

El modo en el que se utiliza es igual que el resto:

p{

cursor: pointer;

Y puede tomar los valores auto, crosshair, pointer, move, n-resize, ne-resize, e-resize, se-resize, sw-resize,
w-resize, nw-resize, text, wait y help.

Aquí tienes un ejemplo de cada uno de los cursores. Sitúa el ratón sobre ellos para ver el efecto:

auto crosshair pointer move text wait help


enlace enlace enlace enlace enlace enlace enlace

n-resize ne-resize e-resize se-resize sw-resize w-resize nw-resize


enlace enlace enlace enlace enlace enlace enlace

Para practicar realiza el Ejercicio Paso a Paso de Controles de Ratón.

Pág. 17.7
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.

http://www.aulaclic.es/dreamweavercs3/t_17_7.htm (2 de 2) [10/02/2008 19:51:48]


Curso de Adobe Dreamweaver CS3. Tema 17. Estilos CSS Avanzado

Unidad 17. Estilos CSS Avanzado (VIII) Búsqueda

Controles de lista

Hemos visto muchas propiedades que afectan al modo en el que se muestran los textos de nuestras páginas.

Ahora haremos un alto para ver unas cuantas propiedades que utilizaremos para dar estilo a nuestras listas.

list-style-type permite establecer el tipo de viñeta utilizada en las listas, puede tomar los valores disc, circle,
square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha y none.

● disc 1 ● circle 1 ● square 1


● disc 2 ● circle 2 ● square 2
● disc 3 ● circle 3 ● square 3

● decimal 1 ● lower-roman 1 ● upper-roman 1


● decimal 2 ● lower-roman 2 ● upper-roman 2
● decimal 3 ● lower-roman 3 ● upper-roman 3

● lower-alpha 1 ● upper-alpha 1 ● none 1


● lower-alpha 2 ● upper-alpha 2 ● none 2
● lower-alpha 3 ● upper-alpha 3 ● none 3

Este estilo debe ir asociado a la etiqueta li, ul o ol.

list-style-image permite mostrar una imagen en lugar de una viñeta.

La forma en la que lo haremos será la siguiente:

ul { list-style-image: url(graficos/lista.gif); }

Así declararemos el estilo. Luego bastará con escribir una lista desordenada, pues hemos utilizado el selector ul
para marcar el estilo.

● elemento 1
● elemento 2
● elemento 3
● elemento 4

Observa que hemos utilizado una URL. Esta ruta debe ser o bien absoluta, o relativa a la hoja de estilos. Nunca
al documento donde se aplica!

http://www.aulaclic.es/dreamweavercs3/t_17_8.htm (1 de 2) [10/02/2008 19:51:58]


Curso de Adobe Dreamweaver CS3. Tema 17. Estilos CSS Avanzado

list-style-position sirve para establecer sangrados colgantes. Puede tomar dos valores outside (fuera) e
inside (dentro).

Veamos un ejemplo que lo ilustrará perfectamente:

● elemento 1
● elemento 2 con valor outside
● elemento 3
● elemento 4 con valor inside
● elemento 5

Como puedes ver el valor inside alinea la viñeta con el principio del texto del elemento anterior. Outside alinea la
viñeta del elemento en la posición predefinida. Utiliza este último valor para destacar listas definidas como inside.

Por último, como en los controles de fuente, existe un modo en el que podemos escribir todas estas reglas sin
tener que escribirlas una a una. Para ello utilizaremos la propiedad list-style.

De este modo el siguiente bloque:

ol {

list-style-type: upper-alpha;

list-style-position: outside;

list-style-image: url(imagenes/bullet.gif);

Puede escribirse como:

ol {

list-style: upper-alpha outside url(imagenes/bullet.gif);

Ten en cuenta siempre el orden type, position e image. Si no quieres utilizar alguna de ellas, simplemente omítela.

Pág. 17.8
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.

http://www.aulaclic.es/dreamweavercs3/t_17_8.htm (2 de 2) [10/02/2008 19:51:58]


Curso de Adobe Dreamweaver CS3. Tema 17. Estilos CSS Avanzado

Unidad 17. Estilos CSS Avanzado (IX) Búsqueda

Controles de fondo

En este apartado veremos las propiedades que pueden aplicarse sobre el fondo.

Estas propiedades se pueden aplicar sobre muchos de los elementos, tanto celdas, párrafos o el body de la página.

background-color permite establecer el color de fondo. Utiliza los mismos códigos hexadecimales o los nombres
de color que vimos en la propiedad color del texto.

La sintaxis es igual a la que hemos visto hasta ahora:

td.rojo {

background-color: red;

background-image establece una imagen de fondo para el elemento.

body {

background-image: url(imagenes/fondo.jpg);

Por defecto, las imágenes se posicionarán en la esquina superior izquierda y en mosaico.

http://www.aulaclic.es/dreamweavercs3/t_17_9.htm (1 de 3) [10/02/2008 19:52:05]


Curso de Adobe Dreamweaver CS3. Tema 17. Estilos CSS Avanzado

background-repeat indica el modo de repetición de la imagen establecida para el fondo.

Puede tomar los siguientes valores:

repeat: la imagen se repite a modo de mosaico hasta ocupar la página completa.

repeat-x: la imagen se repite a lo largo del eje horizontal.

repeat-y: la imagen se repite a lo largo del eje vertical.

no-repeat: la imagen no se repite.

Por omisión, el valor que se toma es repeat, por lo que se genera un mosaico con la imagen del fondo.

Deberás declarar la URL de la imagen para poder utilizar esta propiedad:

#menu {

background-image: url(imagenes/menu.gif);

background-repeat: repeat-x;

texto
texto
texto
texto
texto
texto
background-attachment se utiliza para indicar si la imagen de pantalla es fija o se desplaza con el movimiento de texto
las barras de desplazamiento.
texto
Esta opción se usa sobre todo para las imágenes del body. texto
Puede tomar los valores fixed y scroll. El primer valor dejará la imagen fija, el segundo hará que la imagen se texto
desplace junto con las barras (como el fondo de esta página).
texto
texto
texto

background-position permite el posicionamiento de la imagen de fondo.

Selecciona entre los valores top, center, bottom y left, center, right.

En este caso podremos combinar dos de los valores, por ejemplo:

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


Curso de Adobe Dreamweaver CS3. Tema 17. Estilos CSS Avanzado

.cita {

background-image: url(imagenes/quote.gif);

background-repeat: no-repeat;

background-position: right top;

Aunque puedes omitirlos, pero recuerda que si lo haces por omision los valores serán top y left.

Igual que en algunos de los apartados anteriores puedes utilizar la propiedad background para resumir las
reglas CSS.

Así el siguiente bloque:

.cita {

background-color: gray;

background-image: url(imagenes/quote.gif);

background-repeat: no-repeat;

background-attachment: scroll;

background-position: right top;

Puede ser escrito de la siguiente forma:

.cita {

background: gray url(imagenes/quote.gif) no-repeat scroll right top;

Recuerda mantener el orden color, image, repeat, attachment y position.

Y ya sabes, si no quieres alguno, sáltatelo.

Para practicar realiza el Ejercicio Paso a Paso de Controles de Fondo.

Pág. 17.9
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.

http://www.aulaclic.es/dreamweavercs3/t_17_9.htm (3 de 3) [10/02/2008 19:52:05]


Curso de Adobe Dreamweaver CS3. Tema 17. Estilos CSS Avanzado

Unidad 17. Estilos CSS Avanzado (X) Búsqueda

Controles de margen

Ahora veremos unas cuantas reglas que afectarán a los bordes y márgenes de los elementos.

Para ello utilizaremos el mismo ejemplo: dos cajas, una dentro de la otra.
margen
texto
margen

margin-top, margin-right, margin-bottom y margin-left establecen la distancia de los bordes del elemento
al elemento padre.

Puedes utilizar píxeles o porcentajes para indicar estas distancias.

Por ejemplo, en la siguente caja se le ha dado al bloque interior la siguiente clase:

.bloque_interior {

margin-top: 20px;

margin-right: 0px;

margin-bottom: 5px;

margin-left: -10px;

}
margen

texto
margen

Los márgenes superiores e inferiores se pueden ver en la distancia que hay de la caja interior a las palabras margen.

Observa cómo el margen 0 del lado derecho hace que los bordes queden pegados, mientras que un valor negativo
hace que el bloque salga de la caja.

La propiedad margin te permite unificar varias propiedades en una sola:

.bloque_interior {

margin-top: 20px;

margin-right: 0px;

http://www.aulaclic.es/dreamweavercs3/t_17_10.htm (1 de 4) [10/02/2008 19:52:17]


Curso de Adobe Dreamweaver CS3. Tema 17. Estilos CSS Avanzado

margin-bottom: 5px;

margin-left: -10px;

Este bloque se podría reescribir como:

.bloque_interior {

margin: 20px 0px 5px -10px;

Recuerda que deberás seguir el orden top, right, bottom y left.

En el caso de que los valores arriba y abajo (top y bottom) e izquierda y derecha (left y right) sean iguales entre sí
se puede escribir en dos valores, como:

.bloque_interior {

margin: 20px 5px;

En este caso los márgenes superior e inferior serán de 20px y los de los lados de 5.

En caso de que quieras que todos los margenes tengan la misma distancia puedes escribirlo sólo una vez:

.bloque_interior {

margin: 20px;

Ahora todos los márgenes serán de 20 píxeles.

También se pueden establecer estas propiedades a auto. Dejando que los bordes del elemento sean determinados
por el navegador.

Esta opción, sin embargo, no se trata del mismo modo en todos los navegadores.

Internet Explorer no sigue los estándares y no la maneja de un modo correcto.

Por lo que cuando con otros navegadores centrar un elemento es muy sencillo con el valor auto, para IE hay que
hacer una pequeña trampa.

Veamos el siguiente ejemplo:


margen
texto
margen

El código CSS de la caja interior es:

.bloque_interior {

margin-right: auto;

http://www.aulaclic.es/dreamweavercs3/t_17_10.htm (2 de 4) [10/02/2008 19:52:17]


Curso de Adobe Dreamweaver CS3. Tema 17. Estilos CSS Avanzado

margin-left: auto;

Si intentas hacerlo sobre el body, en IE no funcionará. Los márgenes auto no centrarán el bloque.

Deberás darle la siguiente propiedad al body para que funcione:

text-align: center;

Esto simplemente alineará el texto al centro en el resto de navegadores (donde deberemos seguir utilizando el valor
auto para los márgenes) y hará que los bloques se alineen en el centro de la pantalla.

padding-top, padding-left, padding-bottom y padding-right establecerán la distancia del borde de un elemento


con sus etiquetas interiores.

Lo entenderás mucho mejor con el siguiente ejemplo:

texto

A esta caja le hemos aplicado el siguiente estilo:

.bloque {

padding-top: 20px;

padding-right: 5px;

padding-bottom: 5px;

padding-left: 10px;

Como puedes ver la distancia de la palabra texto a los bordes derecho e inferior es de 5px.

Y lo mismo pasa con los márgenes superior (20px) e izquierdo (10px).

Igual que con los márgenes podemos abreviar las reglas CSS utilizando la propiedad margin.

Así, el bloque anterior:

.bloque {

padding-top: 20px;

padding-right: 5px;

padding-bottom: 5px;

padding-left: 10px;

Se podrá reescribir como:

.bloque {

http://www.aulaclic.es/dreamweavercs3/t_17_10.htm (3 de 4) [10/02/2008 19:52:17]


Curso de Adobe Dreamweaver CS3. Tema 17. Estilos CSS Avanzado

padding: 20px 5px 5px 10px;

Recuerda, también, mantener el orden top, left, bottom, right.

Los casos de repetición se aplican igual que en los márgenes, por lo que podrás escribir los siguientes casos:

.bloque1 {

padding: 20px 5px 5px 10px;

.bloque2 {

padding: 20px 7px;

.bloque3 {

padding: 5px;

Pág. 17.10
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.

http://www.aulaclic.es/dreamweavercs3/t_17_10.htm (4 de 4) [10/02/2008 19:52:17]


Curso de Adobe Dreamweaver CS3. Tema 17. Estilos CSS Avanzado

Unidad 17. Estilos CSS Avanzado (XI) Búsqueda

Bordes

También tenemos las propiedades de borde.

La primera es border-width que indica el ancho de un borde.

Puede tomar los valores medium, thin y thick. Aunque también se aceptan valores en píxeles y porcentajes que
son más fáciles de manejar a la hora de crear bordes con una anchura exacta.

texto texto

En este caso hemos utilizado:

.borde1 {

border-width: 1px;

.borde2 {

border-width: 5px;

border-style muestra el borde del elemento de una forma determinada, existen varios tipos:

none dotted dashed solid

double groove ridge inset outset

border-color establece en forma hexadecimal o con nombre el color del borde de un elemento.

texto

http://www.aulaclic.es/dreamweavercs3/t_17_11.htm (1 de 3) [10/02/2008 19:52:29]


Curso de Adobe Dreamweaver CS3. Tema 17. Estilos CSS Avanzado

En este caso ha sido:

.borde {

border-color: #FFFF00;

Como en el resto de propiedades, utilizaremos la propiedad border para resumir estas tres últimas.

De modo que el siguiente bloque:

.borde {

border-width: 10px;

border-style: groove;

border-color: black;

Podría escribirse más fácilmente:

.borde { border: 10px groove black; }

Debes mantener el orden width, style y color, y en este caso deberás especificar cada uno de los valores para que
la regla se comporte normalmente.

También para los bordes es posible utilizar las mismas propiedades pero indicando a qué lado nos referimos:

.borde {

border-top-width: 10px;

border-top-style: groove;

border-top-color: black;

border-left-width: 10px;

border-left-style: groove;

border-left-color: black;

border-bottom-width: 10px;

border-bottom-style: groove;

border-bottom-color: black;

border-right-width: 10px;
http://www.aulaclic.es/dreamweavercs3/t_17_11.htm (2 de 3) [10/02/2008 19:52:29]
Curso de Adobe Dreamweaver CS3. Tema 17. Estilos CSS Avanzado

border-right-style: groove;

border-right-color: black;

Que a su vez podría reescribirse como:

.borde {

border-top: 10px groove black;

border-left: 10px groove black;

border-bottom: 10px groove black;

border-right: 10px groove black;

Y si todos los valores son iguales para cada uno de los bordes, volvemos a utilizar la propiedad border:

.borde {

border: 10px groove black;

Para practicar realiza el Ejercicio Paso a Paso de Controles de Márgenes y Bordes.

Pág. 17.11
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.

http://www.aulaclic.es/dreamweavercs3/t_17_11.htm (3 de 3) [10/02/2008 19:52:29]


Curso de Adobe Dreamweaver CS3. Tema 17. Estilos CSS Avanzado

Unidad 17. Estilos CSS Avanzado (XIII) Búsqueda

Controles de posición

En este apartado veremos cómo posicionar el contenido de la página web utilizando únicamente estilos CSS.

Existen unas propiedades CSS que combinadas con las siguientes nos ayudarán a mover el contenido de la página.

Estas son top, left, bottom y right.

Con estas propiedades podremos establecer la distancia a los bordes de la ventana del navegador.

Recordemos que top equivale a la parte superior.

Left al lado izquierdo.

Bottom al borde inferior.

Y finalmente right al derecho.

Normalmente daremos valores a estas propiedades utilizando píxeles o porcentajes.

Veamos ahora cómo las utilizaremos para ello deberemos declarar también la propiedad position.

Esta es sin duda la más compleja de este apartado así que la veremos con detenimiento.

Esta propiedad puede aceptar 4 valores: static, absolute, relative y fixed.

Vayamos uno a uno.

El valor static es el valor por defecto de un elemento, ocupa su lugar en el flujo de la página y no puede ser
modificado utilizando las propiedades top/bottom y left/right.

p{

position: static;

Con el valor absolute puedes colocar un elemento en cualquier parte de la ventana con sólo darle las coordenadas.

Así deberíamos declarar la posición utilizando un par de propiedades top/bottom y left/right.

Un ejemplo podría ser este:

#capa_flotante {

http://www.aulaclic.es/dreamweavercs3/t_17_13.htm (1 de 3) [10/02/2008 19:52:36]


Curso de Adobe Dreamweaver CS3. Tema 17. Estilos CSS Avanzado

position: absolute;

top: 100px;

left: 300px;

width: 30px;

height: 125px;

Esta declaración de estilos es muy habitual en las capas. Se posiciona absolutamente el objeto y luego se le da un
ancho y un alto.

El valor relative también nos permite mover el elemento. Este, en principio, ocupa su lugar en el flujo normal de la
página y utilizaremos las propiedadeas top/bottom y left/right para desplazarlo tomando como referencia ese lugar y
no los bordes de la página.

Por ejemplo:

p.especial {

position: relative;

top: 20px;

Esta regla hará que los párrafos marcados con la clase especial se desplacen 20 píxeles hacia abajo de su
positión normal en el flujo de la página.

Piensa que lo que estamos diciendo en la definición de la regla es que va a haber una desfase de 20 píxeles desde
la parte superior de donde se encontraba en un principio, por lo que el elemento se verá desplazado hacia abajo.

Finalmente encontramos el valor fixed. Este valor, desgraciadamente, no funciona en algunas versiones de
Internet Explorer por lo que no te será de mucho uso aunque sea una muy buena regla de estilo.

Asignándole este valor a la propiedad position podemos hacer que un elemento se quede fijo en la ventana aunque
se muevan las barras de desplazamiento. Un comportamiento muy útil para los menús o algunos gráficos que
queramos que permanezcan siempre a la vista.

También acepta los pares top/bottom y left/right para definir la posición en la que se mostará fijo.

Por ejemplo:

#menu {

position: fixed;

top: 0px;

right: 0px;

Esta regla de estilo posicionaría un elemento con identidad menu en la esquina superior derecha de la ventana y
aunque utilicemos el scroll (las barras de desplazamiento) permanecerá allí fijo.

Claro está, este valor no funciona en IE 6, aunque es posible que en futuras versiones puedan arreglar este problema.
http://www.aulaclic.es/dreamweavercs3/t_17_13.htm (2 de 3) [10/02/2008 19:52:36]
Curso de Adobe Dreamweaver CS3. Tema 17. Estilos CSS Avanzado

Pág. 17.13
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.

http://www.aulaclic.es/dreamweavercs3/t_17_13.htm (3 de 3) [10/02/2008 19:52:36]


Curso de Adobe Dreamweaver CS3. Tema 17. Estilos CSS Avanzado
Unidad 17. Estilos CSS Avanzado (XIV)

Controles de visibilidad

Por último en este apartado veremos unas cuantas propiedades que tienen que ver con la forma en la que se
visualizan los elementos en pantalla.

La primera propiedad que veremos será z-index.

Esta propiedad decide el orden de profundidad de los elementos que se encuentran solapados.

En el apartado anterior vimos cómo mover los elementos en la pantalla. Imagina, ahora, que al mover dos capas una
nos queda por encima de la otra.

¿Cómo podemos decidir cuál quedará por detrás? ¿Y al frente?

Utilizaremos esta propiedad para ello.

Z-index acepta números positivos o negativos, y establece que el elemento con un valor mayor se mostrará
por delante del resto.

Veamos un ejemplo:

z-index: 0 z-index: 2
z-index: 1 z-index: 1

z-index: 2

z-index: 0

Para utilizar esta propiedad basta con declararla:

.rojo {

position: relative;

top: 100px;

left: 20px;

z-index: 0;

Otra propiedad muy valiosa a la hora de jugar con la visibilidad es visibility.

Puede tomar los valores visible y hidden (visible y escondida respectivamente).

Asigna el valor hidden a todos aquellos elementos que quieras que no aparezcan en la pantalla.

Muy útil para ocultar estadísticas o para crear animaciones complejas combinando esta propiedad con JavaScript.

#estadisticas {

http://www.aulaclic.es/dreamweavercs3/t_17_14.htm (1 de 3) [10/02/2008 19:52:44]


Curso de Adobe Dreamweaver CS3. Tema 17. Estilos CSS Avanzado

visible: hidden;

Finalmente nos encontramos con otra propiedad llamada overflow.

Esta propiedad establece como ha de tratarse el contenido dentro de un elemento.

El overflow en realidad se hace cargo del desbordamiento de contenido. Por lo que sólo actúa en aquellos casos
en los que el continente se queda demasiado pequeño para mostarlo todo.

Puede tomar los valores visible, hidden, scroll y auto.

El valor visible hace que se ignore el tamaño del continente para mostrar todo el contenido. Es el valor por omisión en
la mayoría de los navegadores.

Utilizando hidden se oculta el contenido que no cabe y no muestra barras de desplazamiento. El tamaño del
continente no se verá afectado.

Si le das el valor scroll se introducirán las barras de desplazamiento necesarias para que el contenido
pueda visualizarse correctamente. El tamaño del continente no se verá afectado.

Finalmente, con el valor auto dejamos que sea el explorador del usuario el que decida qué hacer con el sobrante
del contenido.

Veamos unos ejemplos:


visible hidden

scroll auto

En este ejemplo hemos introducido 4 etiquetas div que contienen una imagen más ancha que ellas.

El bloque marcado con overflow: visible; ignora su tamaño y muestra la imagen completa. Al contrario que el que
está definido como hidden que esconde (o recorta) el resto de la imagen.

El valor scroll muestra las 2 barras de desplazamiento aunque la vertical no sea necesaria, y auto hace que
el navegador introduzca únicamente la horizontal pues es la que es necesaria en este caso.

Ejercicios del Tema 17. Prueba evaluativa del Tema 17.

http://www.aulaclic.es/dreamweavercs3/t_17_14.htm (2 de 3) [10/02/2008 19:52:44]


Curso de Adobe Dreamweaver CS3. Tema 17. Estilos CSS Avanzado

Aviso legal: este curso es gratuito siempre que se visualice desde la página web de aulaClic. No está perm
descargar el curso y utilizarlo en academias o centros de enseñanza privados sin estar conectado a Inter
© aulaClic. Todos los derechos reservados. Free Computer tutorials. Prohibida la reproducción por cualquier
Septiembre - 2007.

http://www.aulaclic.es/dreamweavercs3/t_17_14.htm (3 de 3) [10/02/2008 19:52:44]


Curso de Adobe Dreamweaver CS3. Tema 18. Sitios Remotos

Unidad 18. Sitios Remotos (II) Búsqueda

El Panel Archivos

Desde el panel Archivos seremos capaces de controlar nuestro sitio local y remoto de forma fácil y rápida.

En este apartado veremos qué pasos debemos seguir para completar unas cuantas acciones que nos serán
bastante útiles.

A primera vista el panel Archivos muestra este aspecto:

Su uso es bastante sencillo. Observa los dos desplegables de la parte superior.

El primero te permite seleccionar el sitio con el que estamos trabajando. El segundo te permite cambiar la vista de
ese sitio.

Esta última opción es muy útil para ver el contenido que se encuentra subido en Internet. Una vez hayas configurado
las opciones del Servidor Remoto podrás desplegar esta opción y seleccionar Vista remota, se mostrarán todos
los archivos que en ese momento se encuentran en el servidor.

Ahora veremos para qué sirven los botones:

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


Curso de Adobe Dreamweaver CS3. Tema 18. Sitios Remotos

El botón Conectar te permitirá establecer una conexión con el servidor. De forma predeterminada
Dreamweaver se desconecta del servidor cada 30 minutos.

El botón Actualizar actualiza las listas de las vistas local y remota. Así podrás ver el contenido exacto en
cada momento de cada uno de los sitios, se utiliza sobre todo cuando varias personas tienen acceso al sitio remoto
para cambiar las páginas.

Utiliza el botón Obtener para descargar al servidor local archivos que hayas seleccionado en el panel
Archivos en la vista remota. Estos archivos se copiarán en tu sitio local, y en caso de ya existir se sobreescribirán.

El botón Colocar actúa de forma contraria. Sube los archivos seleccionados en la vista local al servidor,
se copiarán y si existen se sobreescribirán.

Luego los dos siguientes botones podrán ser utilizados si has seleccionado la opción Permitir desproteger y
proteger archivo en el cuadro de diálogo Definición del Sitio anterior.

Utiliza el botón Proteger para realizar la acción anterior de Obtener pero protegiendo el archivo que
se encuentra en el servidor convirtiéndolo en sólo lectura. De esta forma si alguien con acceso al servidor
intenta modificar el archivo le será imposible hasta que lo desprotejas.

Del mismo modo, el botón Desproteger actúa del mismo modo que el botón Colocar pero cuando sube
el archivo al servidor lo desprotege para que pueda ser modificado por otras personas.

Si activaste la opción Permitir desproteger y proteger archivo y subes un archivo nuevo al servidor (uno que aún no
se encuentre en la vista remota) automáticamente se protegerá. Para evitar esto deberás subir los archivos
nuevos utilizando el botón Desproteger.

Pág. 18.2
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.

http://www.aulaclic.es/dreamweavercs3/t_18_2.htm (2 de 2) [10/02/2008 19:52:52]


Curso de Adobe Dreamweaver CS3. Tema 18. Sitios Remotos

Unidad 18. Sitios Remotos (III) Búsqueda

Sincronizar Sitios

Esta es una de las opciones más útiles en cuanto a Sitios Remotos.

Esta opción permite hacer un estudio de los archivos situados en el sitio local y remoto y establecer el modo en el que
se deberán copiar, borrar y sobreescribir los archivos para conseguir un objetivo: al final de la sincronización, los
archivos en el sitio remoto y el sitio local deben ser iguales.

Para realizar una sincronización haz clic derecho sobre cualquier zona en el panel Archivos y selecciona la
opción Sincronizar....

Verás que aparece un cuadro de diálogo como este:

http://www.aulaclic.es/dreamweavercs3/t_18_3.htm (1 de 3) [10/02/2008 19:53:05]


Curso de Adobe Dreamweaver CS3. Tema 18. Sitios Remotos

Este es el paso más importante en la sincronización, pues decidiremos de qué modo se va a realizar.

En el desplegable Sincronizar: seleccionaremos una de las dos opciones, Archivos locales


seleccionados solamente o Todo el sitio. Dependiendo de qué opción elijas se copiarán sólo unos archivos o todos
los que forman el sitio.

En el desplegable Dirección: estableceremos las pautas que se deben seguir durante la sincronización.

Si seleccionas Colocar archivos más nuevos en remoto cuando se comparen ambos sitios, se
sobreescribirán aquellos en el sitio remoto que tengan una fecha de modificación menor a la que exista en el local.
De esta forma copiarás en dirección Local a Remoto.

Si seleccionas la opción Obtener archivos más nuevos de remoto se copiarán aquellos archivos que se encuentren
en el sitio remoto que tengan una fecha de modificación mayor que la del local. En este caso estaremos copiando
en dirección Remoto a Local.

La última opción, Obtener y colocar archivos más nuevos, se refiere a la sincronización como tal. Evalúa los
archivos en el sitio remoto y local y copia los más nuevos en el que contiene los más viejos. En este caso
la Sincronización es Bidireccional.

Marca la opción Eliminar archivos remotos no existentes en la unidad local si quieres que los archivos que
se encuentren en el remoto que no estén en el local se borren.

Al pulsar Vista previa... aparece un listado con los cambios que se van a realizar, sólo nos quedará aceptarlo.

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


Curso de Adobe Dreamweaver CS3. Tema 18. Sitios Remotos

Debido a que no todos los servidores tienen acceso FTP y que no tienes porqué tener acceso a un servidor remoto
no realizaremos ningún ejercicio sobre este tema. Si quieres establecer una conexión con tu servidor remoto sólo
tendrás que seguir los pasos explicados en la teoría.

Prueba evaluativa del Tema 18.

Pág. 18.3
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.

http://www.aulaclic.es/dreamweavercs3/t_18_3.htm (3 de 3) [10/02/2008 19:53:05]


Curso de Adobe Dreamweaver CS3. Tema 4. El texto

Unidad 4. El texto (II) Búsqueda

Listas

Es posible insertar texto a modo de lista. A su vez, la lista puede ser numerada o con viñetas.

Para que un texto que ya ha sido introducido en el documento se convierta en una lista, simplemente hay
que seleccionarlo y pulsar sobre la opción de lista correspondiente, ya sea a través del inspector de propiedades, o
a través del menú Texto.

La lista con viñetas (desordenada) se selecciona a través del botón , mientras que la lista numerada (ordenada)
se selecciona a través del botón .

Ejemplo de lista numerada (ordenada): Ejemplo de lista con viñetas (desordenada):

1. Preparar la mochila ● Perro


1. Sacar los libros de ese día ● Gato
2. Introducir los libros del día siguiente ● Aves
2. Ponerme el pijama ❍ Canario
3. Lavarme los dientes ❍ Loro
4. Poner el despertador ● Hamster

Para establecer listas anidadas dentro de otras como en los ejemplos anteriores, es necesario añadir una sangría en
los elementos de la lista que se desee que pasen a formar parte de la lista anidada.

A través del menú Texto, opción Lista, es posible acceder a las propiedades de la lista seleccionada. Se
debe seleccionar el texto de la lista previamente o tener el cursor en algún lugar de la lista para que se active
este submenú.

En la ventana Propiedades de lista se puede especificar el tipo de lista (con números o con viñetas), el tipo de
números o viñetas que se utilizarán (en la propiedad Estilo:), y en el caso de las listas ordenadas, el número por el
que comenzará el recuento.

http://www.aulaclic.es/dreamweavercs3/t_4_2.htm (1 de 3) [10/02/2008 19:53:18]


Curso de Adobe Dreamweaver CS3. Tema 4. El texto

Para practicar puedes realizar el Ejercicio paso a paso Convertir texto en una lista.

Caracteres Especiales

A veces necesitarás introducir caracteres especiales en tus páginas. Debido al modo editor de Diseño de
Dreamweaver esta tarea es muy sencilla utilizando el teclado, podemos incluir caracteres como á, ê, ì, ö, ç.. de
forma rápida por si quieres poner dos espacios en blanco y los introduces por teclado, Dreamweaver no los
creará, deberás introducirlo dos veces utilizando la opción que vamos a ver a continuación.

Haz clic en el menú Insertar y selecciona la opción HTML verás el desplegable de la imagen de la derecha.

Sólo coloca el puntero del ratón sobr«e Caracteres especiales y verás una lista rápida de los caracteres más
utilizados que no pueden ser introducidos mediante teclado.

Para introducir alguno de estos caracteres en tus textos sólo selecciónalo en la lista y aparecerá en la vista de Diseño.

Si el carácter que buscas no se encontrase allí, haz clic en Otro... y se abrirá una ventana desde donde
podrás seleccionar caracteres entre una lista bastante más amplia:

http://www.aulaclic.es/dreamweavercs3/t_4_2.htm (2 de 3) [10/02/2008 19:53:18]


Curso de Adobe Dreamweaver CS3. Tema 4. El texto

Pág. 4.2
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.

http://www.aulaclic.es/dreamweavercs3/t_4_2.htm (3 de 3) [10/02/2008 19:53:18]


Curso de Adobe Dreamweaver CS3. Tema 4. El texto

Unidad 4. El texto (III) Búsqueda

Estilos CSS. Introducción

En el menú Texto, opción Estilo, aparecen una serie de estilos predefinidos que pueden aplicarse al texto seleccionado.

Los estilos CSS están en hojas de estilo de actualización automática (también denominadas Hojas de Estilo
en Cascada) se utilizan para combinar una serie de atributos del texto, como pueden ser el color o el tamaño, de
modo que no sea necesario asignar estos atributos uno a uno cada vez que se desee repetir la asignación de
esos mismos valores a otras partes del texto. También algunas de sus opciones pueden utilizarse para definir
atributos de imágenes y otras características que no permitían definir los estilos HTML en versiones anteriores, como
el color de fondo para el texto, etc.

Incluso permiten aplicar un estilo sobre todas las etiquetas HTML de un mismo tipo, como puede ser la etiqueta A
HREF, que corresponde a los hiperenlaces. De este modo, todos los hiperenlaces de la página adquirirían la
apariencia definida en ese estilo.

Un estilo CSS no es más que un conjunto de reglas de formato que controlan el aspecto del contenido de una
página Web. Los estilos CSS aportan gran flexibilidad y control al aspecto exacto que se busca en una página, desde
la posición precisa de elementos hasta el diseño de fuentes y estilos concretos.

Una de las grandes ventajas de los estilos CSS reside en que cuentan con una capacidad simple de
actualización; cuando actualiza un estilo CSS, el formato de todos los documentos que usan ese estilo se
actualiza automáticamente.

Crear un Estilo Personalizado

Con Dreamweaver CS3, las características que apliquemos a un texto crearán automáticamente estilos CSS que
se incrustarán en el documento actual y se aplicarán únicamente sobre él.

Veámoslo:

Para crear un Estilo CSS personalizado:

1. En el documento, se selecciona el texto al que se desea aplicar características concretas.

2. En el inspector de propiedades se modifican todas las propiedades de formato de texto, se establecen los
atributos de la fuente y del párrafo que queramos.

Automáticamente Dreamweaver creará un nuevo estilo con el nombre Estilo1 o Estilo2 o Estilo3,... según los
nombres de los estilos ya creados.

Aparecerá el nombre Estilo1 en el cuadro Estilo del panel Propiedades.

http://www.aulaclic.es/dreamweavercs3/t_4_3.htm (1 de 3) [10/02/2008 19:53:26]


Curso de Adobe Dreamweaver CS3. Tema 4. El texto

También se puede cambiar el nombre del estilo, es mejor que el estilo tenga un nombre que indique a qué tipo de
texto se va a aplicar. Para ello desplegamos la lista de estilos y seleccionamos la opción Cambiar nombre...
Aparecerá un cuadro de diálogo para que introduzcamos el nuevo nombre como la imagen inferior.

Seguidamente se coloca el nuevo nombre sin espacios en blanco. En este caso: miestilo.

Al aceptar, aparecerá un panel con el nombre Resultados. Cerrar esta ventana.

De esta manera se puede crear un estilo para añadirlo a un documento.

Cada nuevo estilo que se crea, se añade a la lista de estilos, y los podemos acceder también de una manera rápida
a través del menú Texto, opción Estilos CSS.

En el Panel CSS se puede verificar que se ha añadido automáticamente el nuevo estilo.

http://www.aulaclic.es/dreamweavercs3/t_4_3.htm (2 de 3) [10/02/2008 19:53:26]


Curso de Adobe Dreamweaver CS3. Tema 4. El texto

Si lo deseas, puedes aprender más sobre el panel CSS aquí .

Pág. 4.3
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.

http://www.aulaclic.es/dreamweavercs3/t_4_3.htm (3 de 3) [10/02/2008 19:53:26]


Curso de Adobe Dreamweaver CS3. El Panel CSS

El Panel CSS (I) Búsqueda

Veamos cómo funciona el panel CSS .

El Panel CSS

Hemos visto como Dreamweaver nos permite crear estilos de una forma muy rápida y
sencilla, los estilos creados de esta manera se agrupan en una hoja de estilos que se
encuentra incrustada en nuestro documento, pero también podemos utilizar estilos que
se encuentren en hojas externas al documento. Este particularidad es muy útil cuando
diseñamos un sitio web con varias páginas ya que permite definir una sóla hoja de
estilos que utilizarán todas las páginas del sitio y así facilitar el diseño.

Vamos a ver cómo funcionan las hojas de estilo a través del panel CSS pestaña Estilos
CSS, que puede abrirse a través del menú Ventana, opción Estilos CSS. Existen otras
alternativas para abrir este panel, una es pulsando Mayús+F11, o puedes hacer clic en
el botón CSS que aparece en el Inspector de Propiedades.

Para simplificar las explicaciones llamaremos panel Estilos CSS a la pestaña Estilos
CSS del panel CSS.

En este panel aparecen las hojas de estilos asociadas al documento, los estilos
contenidos en cada hoja de estilos y unos botones en la parte inferior que
nos permiten realizar cambios en los estilos.

Como puedes ver en la imagen, en la parte inferior del panel puedes ver una lista de las
propiedades que forman parte del estilo, podrás editarlas con un sólo clic y actualizarlas
o añadir nuevas haciendo clic en el vínculo Añadir propiedad.

Desde los botones podrás ordenar las propiedades de diferentes maneras.


Con el primer botón mostrarás todas las propiedades ordenadas por categorías
(Fuente, Fondo, Bloque, Borde, etc..); también puedes mostrarlas ordendas de la A a
la Z con el segundo botón.

Como predeterminado se muestran únicamente las propiedades utilizadas (las cuales


http://www.aulaclic.es/dreamweavercs3/a_4_3_1_1.htm (1 de 2) [10/02/2008 19:53:35]
Curso de Adobe Dreamweaver CS3. El Panel CSS

podrás mostrar haciendo clic en el tercer botón).

Si la parte del pie del panel no fuese visible prueba a modificar su tamaño colocando el
cursor en el borde inferior y haciendo clic arrástralo hasta que sus dimensiones te dejen
verlo.

Seguir con el avanzado...


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.

http://www.aulaclic.es/dreamweavercs3/a_4_3_1_1.htm (2 de 2) [10/02/2008 19:53:35]


Curso de Adobe Dreamweaver CS3. El Panel CSS

El Panel CSS (II) Búsqueda

Crear un nuevo estilo

Para crear un nuevo estilo dentro de una hoja, seleccionamos la hoja en el panel CSS y pulsamos el botón que
sirve para crear un nuevo estilo en la hoja de estilos seleccionada o en otra nueva.

A continuación aparece una ventana como ésta:

http://www.aulaclic.es/dreamweavercs3/a_4_3_1_2.htm (1 de 4) [10/02/2008 19:53:42]


Curso de Adobe Dreamweaver CS3. El Panel CSS

En ella puede especificarse el Nombre: del estilo, (sin espacios y comenzando con un punto).

Con la opción Clase seleccionada es posible especificar si el estilo va a ser uno personal creado desde cero.

Con Etiqueta se pueden modificar los atributos de una etiqueta ya existente, en este caso en Nombre: aparece la
lista de etiquetas HTML que pueden ser redefinidas, como pueden ser BODY, A, FORM, TABLE, etc.

Con Avanzadas se puede redefinir el formato de una combinación de etiquetas.

En Definir en: se determina si el estilo se añade a la hoja de estilo propia del documento (Sólo este documento), si
se añade a una nueva hoja de estilos ((Nuevo archivo de hojas de estilo)), o si se añade a la hoja de
estilos seleccionada.

Después de pulsar sobre el botón Aceptar aparecerá una ventana como la que aparece a continuación y en la
que definiremos el estilo:

Eligiendo una u otra categoría es posible especificar diferentes propiedades, muchas de las cuales no se podían
http://www.aulaclic.es/dreamweavercs3/a_4_3_1_2.htm (2 de 4) [10/02/2008 19:53:42]
Curso de Adobe Dreamweaver CS3. El Panel CSS

aplicar mediante el panel de Propiedades. Por ejemplo, a través de la categoría Fondo es posible especificar el color
de fondo para un bloque de texto o para la página entera.

Gestionar estilos CSS

http://www.aulaclic.es/dreamweavercs3/a_4_3_1_2.htm (3 de 4) [10/02/2008 19:53:42]


Curso de Adobe Dreamweaver CS3. El Panel CSS

Para modificar un estilo ya existente, seleccionamos el estilo a modificar en la lista de estilos del panel y
hacemos clic en el botón , se abrirá la ventana descrita anteriormente donde se puede definir las características
del estilo.

También podemos abrir esta ventana pulsando con el botón derecho sobre el estilo en el panel CCS, y seleccionar
del menú desplegable la opción Editar. O incluso modificarlo directamente desde la lista de propiedades que
se encuentra al pie del panel.

Ten en cuenta que si modificas un estilo CSS que pertenezca a una hoja de estilos vinculada, es decir, a un archivo
CSS externo, todas las páginas que contengan ese estilo serán actualizadas al instante.

Para borrar un estilo de una hoja de estilos, seleccionamos el estilo en la lista de estilos del panel y hacemos clic
en el botón .

Como puedes ver, es bastante sencillo trabajar con estilos CSS.

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.

http://www.aulaclic.es/dreamweavercs3/a_4_3_1_2.htm (4 de 4) [10/02/2008 19:53:42]


Curso de Adobe Dreamweaver CS3. Tema 4. El texto

Unidad 4. El texto (IV) Búsqueda

Aplicar un Estilo

Para aplicar un Estilo CSS personalizado:

En el documento, selecciona el texto al que deseas aplicar el estilo CSS, o sitúa el punto de inserción del mouse en
un párrafo para aplicar el estilo a todo el párrafo. Si seleccionas un rango de texto dentro de un párrafo, el Estilo
CSS sólo afectará al rango seleccionado.

En el inspector de Propiedades se selecciona el estilo creado por nosotros de la lista que aparece al desplegar
el cuadro Estilo.

Para practicar puedes realizar el Ejercicio paso a paso Crear estilo de clase.

Hojas de Estilos

Podemos exportar estilos que se encuentren incrustados en la página HTML a una nueva hoja de estilos haciendo
clic derecho sobre el estilo en el Panel CSS y seleccionando Exportar.

Se abrirá el cuadro de diálogo Exportar estilos como archivo CSS que te permitirá guardar todos los
estilos incrustados en un nuevo archivo CSS.

Esta opción es muy útil si tienes los estilos incrustados en una página y queremos utilizarlos en otras
también. Simplemente pasamos los estilos incrustados a una hoja de estilos y luego la adjuntamos en cualquier
página que queramos utilizarlos.

Para asignar una hoja de estilos a una página despliega el cuadro Estilo que se encuentra en el Inspector
de Propiedades y selecciona Adjuntar hoja de estilos...

En Arch./URL debe especificarse la ruta y el nombre de la hoja de estilos.

http://www.aulaclic.es/dreamweavercs3/t_4_4.htm (1 de 2) [10/02/2008 19:53:48]


Curso de Adobe Dreamweaver CS3. Tema 4. El texto

Elegimos si queremos Vincular o importar la hoja de estilos.

Si elegimos Vincular la hoja no se incrusta en la página sino que se añade a la página una referencia a la hoja,
esto permite que cualquier cambio realizado en la hoja quede reflejado de manera automática en todas las páginas
que utilizan la hoja. Esta es la opción más aconsejable si vamos a utilizar el estilo en más de una página, de esta
forma sólo será necesario vincular cada una de los archivos que quieras qeu se vean afectados a la hoja de estilos
que hayas creado.

Si elegimos Importar la hoja se incrusta en la página.

La opción Media te permitirá seleccionar el tipo de medio al que se asociará la hoja de estilos, por ejemplo,
screen (pantalla), print (impresora) o tv (webtv). Estas opciones te permitirán crear hojas de estilos para
soportes diferentes. Puedes crear una para screen, que será la que se muestre cuando navegues por Internet, y
otra para print que será la que se utilice cuando se imprima el contenido del archivo.

Después de Aceptar, la hoja con sus estilos aparecerá en el panel CSS.

Ejercicios del Tema 4. Prueba evaluativa del Tema 4.

Pág. 4.4
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.

http://www.aulaclic.es/dreamweavercs3/t_4_4.htm (2 de 2) [10/02/2008 19:53:48]


Curso de Adobe Dreamweaver CS3. Tema 5. Hiperenlaces

Unidad 5. Hiperenlaces (II) Búsqueda

Crear enlaces

La forma más sencilla de crear un enlace es a través del inspector de propiedades. Para ello es necesario
seleccionar el texto o el objeto que va a servir de enlace, y seguidamente establecer el Vínculo en el inspector.

Por ejemplo, aquí hay un enlace a www.elpais.es, que es de referencia absoluta, por eso contiene HTTP://

Es posible crear también vínculos vacíos, que pueden ser útiles cuando se utilizan comportamientos, etc. Para ello
es necesario escribir en Vínculo únicamente una almohadilla #.

Otra forma de crear un enlace es a través del menú Insertar, opción Hipervínculo.

Crear vínculos de esta forma es muy sencillo, sólo deberás rellenar los campos que explicaremos a continuación y
el enlace se colocará en el lugar en el que estaba situado el cursor.

Texto: es el texto que mostrará el enlace

Vínculo: es la página a la que irá redirigida el enlace, si se trata de un enlace externo deberás escribirla
empezando siempre por HTTP://. Haz clic sobre el icono de carpeta para buscar los archivos que existan dentro del
sitio. Por defecto dramweaver te creará un enlace relativo al documento. Si quieres que los enlaces sean relativos al
http://www.aulaclic.es/dreamweavercs3/t_5_2.htm (1 de 2) [10/02/2008 19:53:56]
Curso de Adobe Dreamweaver CS3. Tema 5. Hiperenlaces

sitio visita este avanzado .

Destino: la página donde se abrirá la página, este campo se explica en el siguiente apartado.

Título: se trata de la ayuda contextual del vínculo, es equivalente al atributo ALT de las imágenes.

Tecla de acceso: atributo que facilita la accesibilidad a las páginas, habilita el acceso al enlace mediante la pulsación
de la tecla Alt más la tecla de acceso indicada.

Índice de tabulador : Como habrás podido observar puedes saltar a través de los enlaces pulsando la tecla
Tabulador. En este campo podrás establecer un índice indicando la prioridad del enlace y así configurar el modo en
el que actuará el Tabulador es sus diferentes saltos.

Destino del enlace

El destino del enlace determina en qué ventana va a ser abierta la página vinculada, puede variar dependiendo de
los marcos de que disponga el documento actual.

Puede especificarse en el inspector de propiedades a través de Dest, o en la ventana que aparece a través del
menú Insertar, opción Hipervínculo.

_blank:

Abre el documento vinculado en una ventana nueva del navegador.

_parent:

Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de marcos padre.

_self:

Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vínculo.

_top:

Abre el documento vinculado en la ventana completa del navegador.

No te preocupes si no te queda del todo claro para qué sirve cada una de estas opciones de destino, ya que se
volverán a ver en el tema de Marcos.

Para practicar puedes realizar el Ejercicio paso a paso Crear un hiperenlace.

Pág. 5.2
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.

http://www.aulaclic.es/dreamweavercs3/t_5_2.htm (2 de 2) [10/02/2008 19:53:56]


Curso de Adobe Dreamweaver CS3. Personalizar nuevos enlaces

Personalizar nuevos enlaces Búsqueda

Crear vínculos relativos automáticamente

Haciendo clic en el menú Sitio y seleccionando la opción Administrar sitios... podemos editar la configuración del
sitio. Bastará con seleccionarlo en el cuadro de diálogo y pulsa Editar.

Se abrirá la ventana de Definición del Sitio. Allí selecciona la pestaña Avanzadas y en la categoría Datos
Locales podrás ver las siguientes opciones:

Estas opciones te ayudarán a crear los enlaces de forma relativa. Selecciona Documento o Raíz del sitio en

http://www.aulaclic.es/dreamweavercs3/a_5_2_1.htm (1 de 2) [10/02/2008 19:54:03]


Curso de Adobe Dreamweaver CS3. Personalizar nuevos enlaces

Vínculos relativos a: para que se creen los enlaces relativos a el documento donde se haya situado el enlace o desde
la raíz del sitio.

Si seleccionas la opción Raíz del sitio, los enlaces se estableceran respecto a la carpeta seleccionada en el
campo Carpeta raíz local:.

Seleccionar estas opciones no cambiará los enlaces existentes, sino que aplicará esta configuración a los
vínculos que se creen a partir de ese momento.

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.

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


Curso de Adobe Dreamweaver CS3. Tema 5. Hiperenlaces

Unidad 5. Hiperenlaces (III) Búsqueda

Formato del enlace

En general, un texto que tiene asociado un vínculo suele aparecer subrayado. Al mismo tiempo, puede adquirir
tres colores diferentes que pueden especificarse a través de las propiedades de la página. Estos tres colores
diferentes son los que se asignan como color de vínculo, de vínculo activo, y de vínculo visitado.

Aqui tienes un vínculo de ejemplo:

www.aulaclic.com

Cuando el vínculo está definido sobre una imagen, en el borde aparecen una serie de puntitos al pulsar sobre
ella. Cuando el vínculo está definido sobre una zona de una imagen (un mapa), aparece el contorno de esa zona.

Aqui tienes dos vínculos similares de ejemplo:

Como puedes ver, la segunda imagen que hace de vínculo contiene un recuadro alrededor. Esto ocurre debido a que
que el campo Borde del inspector de propiedades de la imagen vale uno (1), mientras que para la primera imagen
vale cero (0).

El campo Borde sirve para ponerle un borde a la imagen, independientemente de si ésta va a contener un vínculo o no.

Si se pone a cero (0), no aparece ningún borde, ya que esto indica que el tamaño de las líneas que forman el
recuadro es cero (0). Puede hacerse un recuadro más gordo incrementando el valor del campo Borde.

Tanto si el vínculo se asigna a un texto como a una imagen, el cursor cambia de forma al situarse encima del
vínculo. Suele adquirir la apariencia de una mano señalando.

Enlace a correo electrónico

http://www.aulaclic.es/dreamweavercs3/t_5_3.htm (1 de 2) [10/02/2008 19:54:09]


Curso de Adobe Dreamweaver CS3. Tema 5. Hiperenlaces

Es posible especificar vínculos a direcciones de correo electrónico. Esto resulta útil cuando se desea que los
visitantes de la web puedan contactar con nosotros.

La sintaxis del vínculo en este caso es mailto:direccióndecorreo.

Puede definirse el vínculo a través de Vínculo, del inspector de propiedades, seleccionando previamente el texto o
la imagen deseados.

También es posible a través del menú Insertar, opción Vínculo de correo electrónico.

En este caso no es posible asignar el vínculo a una imagen, solo permite introducir el texto que contendrá el vínculo
de correo.

Para practicar puedes realizar el Ejercicio paso a paso Crear vínculo de correo electrónico.

En ocasiones es posible que existan en nuestro sitio lo que se conoce como Vínculos rotos. Si no sabes lo qué son
o cómo solucionarlos, consúltalo aquí .

Ejercicios del Tema 5. Prueba evaluativa del Tema 5.

Pág. 5.3
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.

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


Curso de Adobe Dreamweaver CS3. Tipos de imágenes para una web

Vínculos rotos Búsqueda

Comprobación de vínculos rotos

Los Vínculos rotos son vínculos que no siguen una ruta válida, o que enlazan a archivo que no existe.

La existencia de estos vínculos en nuestras páginas no es nada recomendable, ya que no permite


navegar correctamente a los usuarios por nuestro sitio, se producen errores.

Los servidores de tipo UNIX/Linux distinguen entre mayúsculas y minúsculas. Asi, por ejemplo, si enlazas a un
archivo Perros.htm puede que el servidor no lo encuentre porque en realidad lo hayas llamado perros.htm
(en minúsculas).

Trabajando con Windows este tipo de errores no se presentan porque no hace esta distinción. En el ejemplo
anterior Dreamweaver consideraría el enlace Perros.htm correcto aunque no lo fuese.

Para evitar esto puedes activar la opción Usar verificación de vínculos entre mayúsculas y minúsculas que
se encuentra en la ventana de Definición del Sitio, pestaña Avanzadas y categoría Datos Locales.

Para comprobar si nuestro sitio tiene Vínculos rotos hay que abrir el Verificador de vínculos.

Una forma de abrirlo es a través del panel Archivos. Ya sabes que el panel Archivos se puede abrir a través del
menú Ventana, opción Archivos. También pulsando F8.

Una vez abierto el panel Archivos, hay que dirigirse a y en el menú desplegable seleccionar Archivo,
opción Comprobar vínculos, o pulsar Mayús+F8.

http://www.aulaclic.es/dreamweavercs3/a_5_3_1.htm (1 de 3) [10/02/2008 19:54:21]


Curso de Adobe Dreamweaver CS3. Tipos de imágenes para una web

Entonces se muestra un nuevo panel, en el que ya es posible comprobar si existen


vínculos rotos.

Lo primero que hay que hacer es pulsar sobre el botón , a través del cual se ofrece la posibilidad de elegir dónde
se comprobarán los vínculos rotos. Puede ser en el documento actual, en todo el sitio, o en los archivos o
carpetas del sitio seleccionados previamente.

A través de Ver hay que especificar si han de mostrarse los Vínculos rotos, los Vínculos externos o los
Vínculos huérfanos.

Los Vínculos rotos son los vínculos que no siguen una ruta válida, o que enlazan a archivo que no existe.

http://www.aulaclic.es/dreamweavercs3/a_5_3_1.htm (2 de 3) [10/02/2008 19:54:21]


Curso de Adobe Dreamweaver CS3. Tipos de imágenes para una web

Los Vínculos externos son los vínculos a documentos que se encuentran fuera del sitio, pero que no
necesariamente son vínculos erróneos. No comprueba si estos vínculos son correctos o no, simplemente los enumera.

A través de Vínculos huérfanos se muestran todos aquellos documentos del sitio que no están siendo vinculados
por otros, a la vez que tampoco contienen vínculos a otros documentos. Estos documentos, en ocasiones, pueden
no estar siendo utilizados para nada, por lo que simplemente están ocupando espacio en disco innecesariamente.

De estos tres tipos de vínculos, el que más nos interesa ahora es el de los Vínculos rotos. En el panel se
mostrarán todos los documentos que tienen un vínculo roto, y el documento al que cada uno de esos vínculos
hace referencia.

Reparación de vínculos rotos

Podemos reparar los vínculos rotos de dos formas:

Una de ellas es pulsando dos veces sobre el nombre del documento que aparece en la lista de archivos del panel.
De este modo, dicho documento se abre. Entonces es posible buscar dentro del documento el vínculo erróneo
y modificarlo a través del Inspector de propiedades.

La otra forma es pulsando sobre el vínculo roto, en lugar de sobre el nombre del archivo. En este caso es
posible modificar directamente el nombre del documento en el panel, o buscarlo a través del icono con forma de
carpeta que aparecerá a su derecha.

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.

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


Curso de Adobe Dreamweaver CS3. Tipos de imágenes para una web

Tipos de imágenes para una web Búsqueda

Formatos de imagen

Las imágenes pueden ser de muchos formatos diferentes: bmp, gif, jpg, etc. Pero no todos estos formatos
son adecuados para una web, debido a que pueden ocupar mucha memoria o a que no son compatibles con
algunos navegadores.

Los formatos más utilizados son el GIF y el JPG, que a pesar de ser imágenes de menor calidad que las imágenes
BMP, son más recomendables debido a que ocupan menos memoria. Vamos a ver un poco más sobre estos formatos:

Formato GIF:

Utilizan un máximo de 256 colores, y son recomendables para imágenes con grandes áreas de un mismo color o
de tonos no continuos. Suelen utilizarse con gran frecuencia, ya que permiten contener transparencias y animación.

Formato JPG:

Las imágenes son de mayor calidad que las GIF, al poder contener millones de colores, pero el tamaño de la imagen
es mayor y tarda más en descargarse.

Puedes incluir imágenes en otros formatos a través de Dreamweaver, que podrán ser visualizadas en
algunos navegadores. Este es el caso de las imágenes BMP y PNG.

Si introduces una imagen BMP en Dreamweaver, te aparecerá un cuadrado gris en su lugar. La imagen solo
se mostrará correctamente en el navegador.

Puedes cambiar el formato de las imágenes mediante la utilización de algún programa de tratamiento de imágenes,
como pueden ser Fireworks, Photoshop, Corel Draw, etc.

Dependiendo del programa utilizado existirá una mayor o menor cantidad de opciones a la hora de modificar
las imágenes. Para realizar modificaciones sencillas, como la de recortar las imágenes y cambiar los colores,
puedes utilizar incluso el programa Paint de Windows.

Optimización de una imagen

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


Curso de Adobe Dreamweaver CS3. Tipos de imágenes para una web

Es posible optimizar una imagen insertada en un documento abierto en Dreamweaver, a través de Fireworks. De
este modo puede modificarse el formato de la imagen, la transparencia, la paleta de colores que utiliza, etc.

Al modificar estos valores, lo que se pretende es que la imagen ocupe menos memoria.

Para optimizar una imagen desde Dreamweaver hay que seleccionar la imagen, y seguidamente dirigirse al
menú Comandos, opción Optimizar imagen....

Desde la nueva ventana será posible modificar los atributos de la imagen.

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


Curso de Adobe Dreamweaver CS3. Tipos de imágenes para una web

Transparencias

En ocasiones puede resultar útil poder hacer invisibles algunos colores que forman parte de una imagen. Normalmente
lo que se desea hacer transparente es el fondo.

Por ejemplo, en la imagen de la derecha el fondo puede desentonar con el fondo de la página, o hacer que
su apariencia sea más pobre.

Lo primero que hay que hacer es establecer un color de fondo para la imagen, de modo que éste no
coincida con el color de ningún otro elemento del dibujo, para que éste último pueda seguir mostrándose
correctamente después de aplicar la transparencia.

Después podrá aplicarse la transparencia sobre el color deseado, desde algún programa de tratamiento de
imágenes, como puede ser Fireworks.

Una forma de aplicar transparencia mediante Fireworks es a través de los botones que puedes ver en
la pantalla anterior (en optimizar imagen).

Cuando se está optimizando la imagen, puede pulsarse uno de los dos primeros botones anteriores, de modo que
el puntero adquiere la forma de un cuentagotas al situarse sobre la imagen o sobre la lista de colores de la
imagen. Pulsando sobre un color, éste se volverá transparente.

La diferencia entre el primer y el segundo de estos botones, es que el primero solo permite asignar transparencia a
un color, mientras que el otro permite añadirsela a varios. El último botón se utiliza para quitar la transparencia de
algún color.

En el caso de haber aplicado la transparencia al color azul que hacía de fondo de la imagen, esta
quedaría como la de la derecha.

La existencia de transparencia permite mejorar notablemente la estética de nuestras páginas.

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


Curso de Adobe Dreamweaver CS3. Tipos de imágenes para una web

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.

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


Curso de Adobe Dreamweaver CS3. Tema 6. Imágenes

Unidad 6. Imágenes (II) Búsqueda

Propiedades de una imagen

Cuando seleccionamos una imagen el Inspector de propiedades muestra esta apariencia:

Desde aquí podrás acceder a distintas propiedades:

Desde el campo Alt podrás asignarle una ayuda contextual a la imagen, esta se mostrará cuando coloques el ratón
sobre ella, y es muy útil de cara a hacer páginas accesibles ya que el texto que se escribe será leído por los
programas lectores para invidentes. También es muy útil, como ya hemos visto, si la imagen por alguna razón no
puede mostrarse.

En Clase podrás asignarle un estilo que hayas creado anteriormente, así podrás darle alineación, bordes e
incluso tamaño con sólo un clic.

Si le damos un valor al campo Vínculo convertiremos al imagen en un link a otra página. Para enlaces externos
recuerda que debe empezar siempre por HTTP:// y si deseas crear un vínculo a un enlace electrónico deberá
empezar por mailto:

En caso de que le hayas asignado un vínculo podrás decidir en qué ventana quieres que se abra selecionando un
valor en el campo Destino.

Puedes asignarle un tamaño de borde desde el campo Borde.

Y puedes seleccionar su alineación con respecto al texto desde el campo Alinear.

Por último las opciones Espacio V y Espacio H te serán muy útiles para separar la imagen del texto y así no
queden demasiado pegadas a él. Estos campos indican el espacio vertical y horizontal respectivamente entre la imagen
y el texto.

Cambiar el tamaño de una imagen

http://www.aulaclic.es/dreamweavercs3/t_6_2.htm (1 de 2) [10/02/2008 19:54:36]


Curso de Adobe Dreamweaver CS3. Tema 6. Imágenes

Dentro de Dreamweaver puede modificarse el tamaño de las imágenes. Dicho cambio de tamaño no se
aplica directamente sobre el archivo de imagen, sino que lo que varía es la visualización de la imagen dentro de la página.

Es muy probable que la imagen resultante no sea de buena calidad, en comparación de cómo podría
quedar modificándola desde un editor externo, como Fireworks.

Por ejemplo, vamos a ver lo que ocurre si insertamos una imagen que representa el icono de Dreamweaver
y modificamos su tamaño de varias formas diferentes:

Imagen original Imagen con tamaño modificado

Puede apreciarse claramente que los resultados no son muy satisfactorios, pero en ocasiones puede resultar
útil modificar el tamaño de algunas imágenes aunque esto implique perder calidad.

Existen dos formas de modificar el tamaño.

Una de ellas es, una vez seleccionada la imagen, arrastrar con el puntero alguno de los recuadros negros
que aparecen alrededor de la imagen.

La otra es a través de inspector de propiedades, cambiando los campos An (anchura) o Al (altura). Estos
campos aparecerán en el inspector cuando esté seleccionada alguna imagen.

Si estos campos no contienen el tamaño original de la imagen, el valor aparecerá resaltado en negrita y aparecerá a

la derecha una flecha circular que permite volver al tamaño original haciendo clic sobre ella.

Pueden crearse vínculos y comportamientos sobre partes de una imagen, sin la necesidad de que sea sobre toda ella.
A esto se le conoce como mapa de imagen. Esta información puedes consultarla aquí .

Pág. 6.2
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.

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


Curso de Adobe Dreamweaver CS3. Mapas de imagen

Mapas de imagen Búsqueda

Los mapas de imagen son partes de una imagen que pueden ser utilizadas para asignarle algún tipo de comportamiento.

Para crear un mapa de imagen es necesario seleccionar previamente la imagen en la que se desea crear el mapa, y
abrir el inspector de propiedades de dicha imagen.

Estando seleccionada la imagen, ya es posible crear un mapa a través de los botones del inspector de
propiedades que tienen el siguiente aspecto: . Si no te aparecen despliega el panel Propiedades
para verlo completo.

Los tres últimos botones son los que se utilizan para crear los mapas. Dichos mapas pueden tener forma
rectangular, circular, o libre, dependiendo del botón pulsado.

Al pulsar alguno de estos tres botones, cambia la apariencia del puntero al situarlo sobre la imagen. Entonces ya
es posible dibujar el mapa sobre la imagen, pulsando sobre los lugares donde se desea que comience y finalice el
mapa, así como sobre el resto de lugares (en orden) que se desea que recorra el mapa en el caso de forma libre.

Al estar seleccionado un mapa el inspector de propiedades cambia. Permite asignar un vínculo y un texto alternativo
a ese mapa como puedes ver a continuación:
http://www.aulaclic.es/dreamweavercs3/a_6_2_1.htm (1 de 2) [10/02/2008 19:54:42]
Curso de Adobe Dreamweaver CS3. Mapas de imagen

El primero de los botones, el de la flecha, debe pulsarse al finalizar la creación de un mapa, para que el puntero
recupere su forma original al situarse sobre una imagen. De este modo, es posible mover los puntos del mapa, en el
caso de que no hayan sido creados en los sitios deseados, para ajustarlos mejor a la imagen.

Aquí tienes un ejemplo de mapa de imagen. Sitúa el puntero sobre la cabeza del perro, que es la que contiene el
mapa, para ver qué es lo que ocurre.

Para practicar puedes realizar el Ejercicio paso a paso Crear mapas de imagen.

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.

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


Curso de Adobe Dreamweaver CS3. Tema 6. Imágenes

Unidad 6. Imágenes (III) Búsqueda

Imagen de sustitución. Rollover

Un rollover es una imagen que cambia por otra cuando el puntero se sitúa sobre ella. Este tipo de imagen
suele utilizarse en los menús o en los botones para desplazarnos a través de distintas páginas.

Aquí tienes un ejemplo de rollover. Sitúa el puntero sobre él para ver qué es lo que ocurre.

Para insertar un rollover hay que dirigirse al menú Insertar, Objetos de Imagen, a la opción Imagen de sustitución.
En la nueva ventana hay que especificar la imagen original y la de sustitución.

Es preferible que la opción Carga previa de imagen de sustitución esté activa. Si se activa, la imagen de sustitución
se carga cuando se carga la página, de este modo se evitan las demoras debidas a la descarga de la imagen
cuando llega el momento de que aparezca.

El Texto alternativo es el texto que aparece al situar el puntero sobre una imagen, o el que aparecerá en lugar de
la imagen en el caso de que por algún motivo ésta no pueda ser mostrada en el navegador.

El texto alternativo puede asignarse a todas las imágenes, no sólo a los rollovers. Puede hacerse a través del campo
Alt del inspector de propiedades de la imagen seleccionada.

Para practicar puedes realizar el Ejercicio paso a paso Crear Rollover.

Botones Flash

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


Curso de Adobe Dreamweaver CS3. Tema 6. Imágenes

Existen otra serie de imágenes especiales, similares a los rollovers, que suelen utilizarse para crear menús,
como pueden ser los botones Flash.

Aquí tienes un ejemplo de botón Flash. Sitúa el puntero sobre él para ver qué es lo que ocurre.

Para insertar un botón Flash hay que dirigirse al menú Insertar, Media, a la opción Botón Flash, aparecerá el
siguiente cuadro de diálogo:

A través de Estilo: puede seleccionarse uno de los distintos formatos de botón que se ofrecen.

En esta misma ventana hay que especificar también el Texto que mostrará el botón (Texto del botón:), así como
el nombre con el que será guardado (Guardar como:) y el vínculo asociado (Vinculo: y Destino:).

Es preferible guardar los botones Flash en el mismo directorio que los documentos HTML, en lugar de la
carpeta destinada a almacenar imágenes, ya que de no ser así es posible que al intentar asignar un vínculo dentro
del propio sitio, Dreamweaver no permita guardar el botón con ese vínculo en una ubicación diferente de la de
dicho documento.

Recuerda que los botones deben guardarse con la extensión SWF.

A través del inspector de propiedades del botón Flash es posible editar de nuevo sus atributos:

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


Curso de Adobe Dreamweaver CS3. Tema 6. Imágenes

Puede volver a abrirse el cuadro de diálogo anterior pulsando sobre el botón Editar, y a través del botón Reproducir
es posible probar el funcionamiento del botón Flash desde Dreamweaver, sin la necesidad de tener que abrir la
página con algún navegador.

Después de haber probado el funcionamiento del botón Flash, debe pulsarse de nuevo sobre el botón Reproducir
(que habrá cambiado por el botón Detener) .

Para practicar puedes realizar el Ejercicio paso a paso Crear botones Flash.

Pág. 6.3
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.

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


Curso de Adobe Dreamweaver CS3. Tema 6. Imágenes

Unidad 6. Imágenes (IV) Búsqueda

Texto Flash

El texto Flash es similar a un rollover, pero en lugar de intercambiar imágenes intercambia el color del texto.

Para insertar texto Flash hay que dirigirse al menú Insertar, Media, a la opción Texto Flash.

En la nueva ventana, además del texto, el vínculo y el nombre con el que será guardado el texto, hay que especificar
el color original y el de sustitución.

Aquí tienes un ejemplo de texto Flash. Sitúa el puntero sobre él para ver qué es lo que ocurre.

http://www.aulaclic.es/dreamweavercs3/t_6_4.htm (1 de 3) [10/02/2008 19:54:56]


Curso de Adobe Dreamweaver CS3. Tema 6. Imágenes

El inspector de propiedades del texto Flash es igual que el de un botón Flash.

Barra de navegación

Una barra de navegación es un conjunto de imágenes que se utilizan como opciones de menú para navegar dentro
de una web. Un página web solo puede contener una única barra de navegación.

Para insertar una barra de navegación hay que dirigirse al menú Insertar, Objetos de imagen, a la opción Barra
de navegación.

En la nueva ventana pueden especificarse cuatro imágenes diferentes para cada uno de los botones, el vínculo
para cada uno de ellos, etc.

A través de los botones superiores de la ventana es posible crear y eliminar botones de la barra de navegación, así
como reordenarlos. Con se crea un botón nuevo, con se elimina el botón seleccionado, y con se
puede modificar la posición del botón seleccionado.

En Imagen Arriba pones la imagen que quieres mostrar inicialmente (cuando todavía no se ha hecho clic).

En Sobre imagen, pones la imagen que quieres mostrar cuando el usuario mueva el puntero sobre el botón y
éste estaba mostrando la
imagen asignada en Imagen Arriba.

En Imagen abajo, pones la imagen que quieres mostrar después de que el usuario haya hecho clic en la imagen.

En Sobre mientras imagen abajo, pones la imagen que quieres mostrar cuando el usuario mueva el puntero
sobre sobre el botón y éste estaba
mostrando la imagen asignada en Imagen Abajo.

http://www.aulaclic.es/dreamweavercs3/t_6_4.htm (2 de 3) [10/02/2008 19:54:56]


Curso de Adobe Dreamweaver CS3. Tema 6. Imágenes

De esta forma, si asignas imágenes distintas puedes saber cuál es el último botón que ha sido pulsado (el que
tiene Imagen Abajo).

Aquí tienes un ejemplo de barra de navegación. Para su creación se han utilizado las mismas imágenes para todos
los botones, pero como puedes ver, en el botón del medio aparece inicialmente una imagen diferente de la de los
otros dos. Esto se debe a que la opción Mostrar "Imagen abajo" inicialmente estaba activa para este botón. Sitúa
el puntero sobre los distintos botones, y pulsa sobre alguno, para ver qué es lo que ocurre.

El que existan cuatro imágenes diferentes sirve para identificar cual de los vínculos está activo, cosa que con un
simple rollover no puede hacerse.

A través de la opción Insertar es posible especificar si los botones de la barra de navegación van a aparecer de
forma horizontal o vertical dentro de la página.

Ejercicios del Tema 6. Prueba evaluativa del Tema 6.

Pág. 6.4
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.

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


Curso de Adobe Dreamweaver CS3. Bases de datos

Bases de Datos Búsqueda

Base de datos.

Una base de datos es un conjunto de datos que están organizados para un uso determinado y el conjunto de
los programas que permiten gestionar estos datos es lo que se denomina Sistema Gestor de Bases de Datos.

Casi todos los sistemas de gestión de base de datos modernos almacenan y tratan la información utilizando el modelo
de gestión de bases de datos relacional.

En un sistema de base de datos relacional, los datos se organizan en Tablas.

Las tablas almacenan información sobre un tema como pueden ser los clientes de una empresa, o los
pedidos realizados por cada uno de ellos; las tablas se relacionan de forma que a partir de los datos de la tabla
de clientes podamos obtener información sobre los pedidos de éstos.

Tablas de datos.

Una tabla de datos es un objeto que se define y utiliza para almacenar los datos. Una tabla contiene
información sobre un tema o asunto particular, como pueden ser como hemos visto antes, clientes, pedidos etc...

Las tablas contienen campos o columnas que almacenan los diferentes datos como el código del cliente, nombre
del cliente, dirección,...

Y al conjunto de campos para un mismo objeto de la tabla se le denomina registro o fila, así todos los campos de
un cliente forman un registro, todos los datos de otro cliente forman otro registro...

Si consideramos una posible base de datos con los datos de una empresa, una tabla de CLIENTES podría ser:

Campos

Código Nombre Apellidos Dirección C.P.

http://www.aulaclic.es/dreamweavercs3/b_19_1_1.htm (1 de 2) [10/02/2008 19:55:03]


Curso de Adobe Dreamweaver CS3. Bases de datos

Registro
1 Luis Grande Lilos C/ Germanías, 23 46723
1

Registro
2 Marta Fran Dardeno C/ Mayor, 34 46625
2

Registro
3 Francisco Juan López C/ Valle, 56 46625
3

Registro
4 María Huesca Buevo C/ Franciscano, 67 46521
4

Toda tabla debe tener un campo que sirva para identificar cada uno de sus registros, ese campo es la clave principal.
La clave principal proporciona un valor único para cada fila de la tabla y nos sirve de identificador de registros de
forma que con esta clave podamos saber sin ningún tipo de equivocación el registro al cual identifica. No podemos
definir más de una clave principal, pero podemos tener una clave principal compuesta por más de un campo.

Un campo definido como clave principal no podrá aceptar valores duplicados (es decir que no podrán existir dos filas
con el mismo valor en ese campo), ni podrá contener el valor nulo.

El valor nulo es un valor especial que indica la ausencia de valor, si en un campo de una fila tenemos el valor nulo
(null en inglés) esto indica que esta fila no contiene ningún valor en ese campo. Si un campo está definido como no
nulo (NOT NULL) el usuario estará obligado a rellenarlo cuando introduzca una nueva fila.

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.

http://www.aulaclic.es/dreamweavercs3/b_19_1_1.htm (2 de 2) [10/02/2008 19:55:03]


Curso de Adobe Dreamweaver CS3. Tema 19. Servidor de Pruebas

Unidad 19. Servidor de Pruebas (II) Búsqueda

Estructura PHP

Si abres un archivo PHP verás que tiene cierto parecido a un archivo HTML.

Esto es debido a que el código PHP se incrusta dentro del código HTML. Únicamente será necesario introducir un par
de marcas para establecer el principio del código y el final.

Veamos un ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/


xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Documento sin t&iacute;tulo</title>

</head>

<body>

<table>

<tr>

<td>

<?php

echo "Hola mundo!";

?>

</td>

</tr>

</table>

</body>

</html>

Este código podría pegarse en un archivo PHP, guardarse en un servidor que soporte PHP y ejecutarse.

El resultado que nos daría al requerirse sería una página web con una tabla en la que se podría leer Hola mundo!
(la instrucción echo escribe texto en pantalla).

Sin embargo, aunque se trate de un archivo PHP puedes ver que se parece muchísimo a un HTML. Sólo que en
el momento de agregar código de programación hemos añadido dos etiquetas (una de apertura y otra de cierre)
para indicar que lo que se encuentra entre ellas es código PHP y debe ser ejecutado.

http://www.aulaclic.es/dreamweavercs3/t_19_2.htm (1 de 2) [10/02/2008 19:55:06]


Curso de Adobe Dreamweaver CS3. Tema 19. Servidor de Pruebas

Estas etiquetas son <?php y ?>, aunque también es posible encontrar su forma abreviada <? y ?> por lo que el
código anterior se podría sustituir por:

<?

echo "Hola mundo!";

?>

No vamos a entrar en más detalle, pues Dreamweaver se encargará de generar todo esto automáticamente.

Pero te será bastante útil cuando empecemos a programar páginas para poder localizar con un vistazo el código que
se haya creado.

Pág. 19.2
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.

http://www.aulaclic.es/dreamweavercs3/t_19_2.htm (2 de 2) [10/02/2008 19:55:06]


Curso de Adobe Dreamweaver CS3. Tema 19. Servidor de Pruebas

Unidad 19. Servidor de Pruebas (IV) Búsqueda

En esta ventana nos preguntan dónde queremos que se guarde el programa.

Será mejor que lo guardemos en la carpeta donde se instalan todos los programas, así tendremos todo mucho
más ordenado.

Haz clic en el botón Browse..., se abrirá un cuadro de diálogo para que selecciones la carpeta donde quieras instalarlo.

Abre Disco local (C:) y selecciona Program Files. Pulsa el botón OK para aceptar.

http://www.aulaclic.es/dreamweavercs3/t_19_4.htm (1 de 3) [10/02/2008 19:55:14]


Curso de Adobe Dreamweaver CS3. Tema 19. Servidor de Pruebas

Volverás de nuevo a la pantalla anterior donde ahora se podrá leer C:\Archivos de programa\wamp, haz clic en Next
> para continuar.

Aquí deberemos escribir el nombre que queremos que aparezca en el desplegable Todos los programas del
menú Inicio. Déjalo como está y vuelve a pulsar Next >.

http://www.aulaclic.es/dreamweavercs3/t_19_4.htm (2 de 3) [10/02/2008 19:55:14]


Curso de Adobe Dreamweaver CS3. Tema 19. Servidor de Pruebas

Pág. 19.4
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.

http://www.aulaclic.es/dreamweavercs3/t_19_4.htm (3 de 3) [10/02/2008 19:55:14]


Curso de Adobe Dreamweaver CS3. Tema 19. Servidor de Pruebas

Unidad 19. Servidor de Pruebas (V) Búsqueda

Aquí podremos seleccionar la opción Auto Start si queremos que el programa se ejecute cada vez que
iniciemos Windows.

Mejor dejarla deseleccionada, pues sólo vamos a utilizarlo en determinadas ocasiones y no nos interesa que
esté siempre ejecutándose consumiendo recursos.

De nuevo, pulsamos Next > para seguir.

Ya casi hemos terminado.

http://www.aulaclic.es/dreamweavercs3/t_19_5.htm (1 de 2) [10/02/2008 19:55:25]


Curso de Adobe Dreamweaver CS3. Tema 19. Servidor de Pruebas

Haz clic en Install para instalar el programa.

Pág. 19.5
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.

http://www.aulaclic.es/dreamweavercs3/t_19_5.htm (2 de 2) [10/02/2008 19:55:25]


Curso de Adobe Dreamweaver CS3. Tema 19. Servidor de Pruebas

Unidad 19. Servidor de Pruebas (X) Búsqueda

Introducción a phpMyAdmin

En este curso no vamos a explicar en profundidad el uso de phpMyAdmin debido a su extensión. Pero sí daremos
unas cuantas directrices para que puedas empezar a manejarte con él y a dar tus primeros pasos en el uso de las
bases de datos.

Para abrir phpMyAdmin, una vez instalado WAMP, haz clic en la opción phpMyAdmin de su menú como vimos en
un apartado anterior.

Se abrirá una ventana del navegador y mostrará la ventana principal de la aplicación:

Desde aquí podremos crear nuevas bases de datos, tablas y usuarios con sus respectivos privilegios.

Pero, vayamos paso a paso.

http://www.aulaclic.es/dreamweavercs3/t_19_10.htm (1 de 2) [10/02/2008 19:55:32]


Curso de Adobe Dreamweaver CS3. Tema 19. Servidor de Pruebas

Pág. 19.10
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.

http://www.aulaclic.es/dreamweavercs3/t_19_10.htm (2 de 2) [10/02/2008 19:55:32]


Curso de Adobe Dreamweaver CS3. Tema 19. Servidor de Pruebas

Unidad 19. Servidor de Pruebas (XI) Búsqueda

Crear una Base de Datos en phpMyAdmin

Para crear una nueva base de datos en phpMyAdmin basta con escribir el nombre de la nueva base de datos en
el cuadro de texto creado para ello en la página principal y pulsar el botón Crear.

La nueva base de datos se creará automáticamente.

Puedes seleccionar un juego de carácteres en el desplegable Cotejamiento, si lo dejas en blanco se tomará el valor
por defecto que variará según la configuración de cada servidor.

Es recomendable que escojas la opción utf-8_spanish_ci para mantener la compatibilidad con todos los caracteres
del alfabeto en castellano y para que la salida en cualquier navegador sea correcta.

Una vez creada la base de datos podrás acceder a ella desde el menú de la izquierda. Despliega el listado Base
de datos y selecciona la base de datos que quieras modificar:

Para practicar la creación bases de datos realiza el Ejercicio Paso a Paso de creación de Bases de Datos.

Pág. 19.11
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.

http://www.aulaclic.es/dreamweavercs3/t_19_11.htm (1 de 2) [10/02/2008 19:55:39]


Curso de Adobe Dreamweaver CS3. Tema 19. Servidor de Pruebas

© aulaClic. Todos los derechos reservados. Free Computer tutorials. Prohibida la reproducción por cualquier medio.
Septiembre - 2007.

http://www.aulaclic.es/dreamweavercs3/t_19_11.htm (2 de 2) [10/02/2008 19:55:39]


Curso de Adobe Dreamweaver CS3. Tema 19. Servidor de Pruebas

Unidad 19. Servidor de Pruebas (XII) Búsqueda

Crear una Tabla en phpMyAdmin

Cuando selecciones una Base de Datos en phpMyAdmin verás una nueva pantalla desde donde podrás ver todas
las opciones para poder trabajar en ella:

En este caso en la pantalla principal encontraremos muy poca cosa porque no contiene ninguna tabla por ahora.

Para crear una tabla lo único que debes hacer es escribir su Nombre y especificar su Número de campos.

Cuando hayas terminado pulsa el botón Continuar y verás una pantalla como esta:

Aquí deberás establecer la configuración de cada uno de los campos de la tabla.

http://www.aulaclic.es/dreamweavercs3/t_19_12.htm (1 de 2) [10/02/2008 19:55:52]


Curso de Adobe Dreamweaver CS3. Tema 19. Servidor de Pruebas

Rápidamente definiremos las propiedades más frecuentemente utilizadas:

Campo: El nombre del campo.

Tipo: El tipo del valor del campo: texto, número entero, entero largo, etc...

Cotejamiento: Juego de caracteres que utilizará el campo.

Nulo: Si seleccionamos NOT NULL, el campo se deberá rellenar obligatoriamente (no puede contener el valor nulo).

Predeterminado: Un valor predeterminado para el campo.

Extra: Selecciona aquí si quieres que el campo sea de tipo numérico con auto-incremento. Cada registro tendrá
un valor superior al anterior.

Primaria: El campo es clave primaria de la tabla.

Índice: El campo se indexará para optimizar la búsqueda.

Único: El campo sólo puede adoptar valores únicos. No podrán haber dos registros con un mismo valor en ese campo.

Texto completo: Al visualizar la tabla mostrar el contenido completo del campo.

Pulsa el botón Grabar cuando hayas acabado y la tabla se creará.

Ahora el aspecto de la ventana de la base de datos será diferente pues mostrará el listado de tablas contenidas con
sus propiedades.

Haciendo clic en el botón al lado del nombre de la tabla o haciendo clic sobre ella en el menú de la izquierda
podrás acceder a la vista en detalle de sus campos y propiedades.

En esta última vista puedes hacer clic en la pestaña Examinar para ver el listado de todos los registros. Utiliza la
pestaña Buscar para filtrar el listado por los valores de algún campo.

Para practicar la creación tablas realiza el Ejercicio Paso a Paso de creación de Tablas.

Pág. 19.12
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.

http://www.aulaclic.es/dreamweavercs3/t_19_12.htm (2 de 2) [10/02/2008 19:55:52]


Curso de Adobe Dreamweaver CS3. Tema 19. Servidor de Pruebas

Unidad 19. Servidor de Pruebas (XIII) Búsqueda

Insertar Datos en una Tabla

Rellenar tablas desde phpMyAdmin es muy sencillo.

Si no tienes ninguna base de datos seleccionada, selecciona previamente la que contiene la tabla a utilizar desde
el desplegable que encontrarás en la parte superior izquierda de la pantalla.

Luego selecciona la tabla con la que quieres trabajar y haz clic en la pestaña Insertar.

En seguida se abrirá una ventana desde donde podrás añadir una fila (o registro) a la tabla indicando el valor de
cada campo:

En la columna Valor escribe el valor del Tipo de cada campo y pulsa Continuar cuando hayas acabado.

Otro modo de rellenar una tabla es importando datos que tengamos en un archivo provinente de otra base de datos
o hecho por nosotros mismos.

Para ello, tendrás que hacer clic en la pestaña Importar en el mismo menú donde encontraste la opción anterior:

Se abrirá una ventana desde donde deberás especificar qué archivo quieres importar:

http://www.aulaclic.es/dreamweavercs3/t_19_13.htm (1 de 2) [10/02/2008 19:55:59]


Curso de Adobe Dreamweaver CS3. Tema 19. Servidor de Pruebas

Observa que deberás indicar la localización del archivo que contiene los datos que queremos importar.

Y sobre todo, lo más importante, el Juego de caracteres que utiliza el archivo para que los datos que se
introduzcan en la tabla se puedan adaptar de forma correcta y mantener la coherencia del texto.

Una vez introducidos estos datos bastará con que pulses el botón Continuar y los registros (si no hubo ningún fallo en
el archivo) se añadirán automáticamente.

Para practicar realiza el Ejercicio Importar Datos a una Tabla.

Pág. 19.13
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.

http://www.aulaclic.es/dreamweavercs3/t_19_13.htm (2 de 2) [10/02/2008 19:55:59]


Curso de Adobe Dreamweaver CS3. Tema 19. Servidor de Pruebas

Unidad 19. Servidor de Pruebas (XIV) Búsqueda

Modificar una Tabla en phpMyAdmin

Una vez tengas creada una tabla en la base de datos es posible editarla para modificar la configuración de algún
campo o incluso añadir uno nuevo.

Para ello deberemos ir a la vista de la tabla haciendo clic en ella en el menú que encontramos en la izquierda de
la página una vez seleccionada la base de datos.

Esto hará que se nos muestre la estructura de la tabla en la ventana.

El modo en que podremos modificarla será muy fácil.

Observa la ventana:

Para añadir nuevos campos a la tabla sólo tienes que escribir el número de campos que vas a crear en el
campo Añadir ..... campo(s).

Luego selecciona la pocición donde se añadirán, Al final de la tabla, Al comienzo de la tabla o Después de.. y pulsa
el botón Continuar.

http://www.aulaclic.es/dreamweavercs3/t_19_14.htm (1 de 3) [10/02/2008 19:56:11]


Curso de Adobe Dreamweaver CS3. Tema 19. Servidor de Pruebas

Se abrirá la ventana de definición de campos que vimos en el apartado anterior y sólo deberás rellenarla como ya
hemos visto.

Modificar campos ya existentes tampoco es muy complicado, sólo tendrás que utilizar los botones que se encuentran
en la columna acción del campo correspondiente.

El botón Modificar te permitirá modificar la configuración del campo. Podrás cambiar todas las opciones que
viste cuando lo creaste.

El botón Eliminar borrará el campo y todos los valores almacenados en cada registro que le correspondan.

El botón Clave Principal establece que el campo se marque como clave principal de la tabla.

El botón Índice crea un nuevo indice en la tabla con el campo seleccionado.

Finalmente el botón Único establece el campo seleccionado como campo con valor único, es decir, no
puede contener valores repetidos.

Si queremos realizar la misma acción sobre varios campos a la vez, podemos marcarlos con las casillas de
verificación que se encuentran en el extremo izquierdo y luego pulsar el icono correspondiente a la acción a realizar en
la fila donde dice Para los elementos que están marcados:

Modificar Datos de una Tabla

También una vez insertados datos en una tabla de una base de datos, podremos modificarlos.

Esto es posible accediendo al contenido de la tabla desde la peataña Examinar que encontrarás en la parte superior
de la ventana:

Hacer clic en ese elemento hará que puedas visualizar el contenido de la tabla.

Y al mismo tiempo te dará la posibilidad de editar o eliminar el contenido de cada registro, además del registro completo.

Desde esta vista podremos ver la información almacenada en la tabla.

Podemos utilizar los botones de la primera columna para modificar los datos.

El botón Modificar te permitirá modificar el contenido del registro. Púlsalo e irás a la ventana que vimos en
el apartado de Insertar datos.

http://www.aulaclic.es/dreamweavercs3/t_19_14.htm (2 de 3) [10/02/2008 19:56:11]


Curso de Adobe Dreamweaver CS3. Tema 19. Servidor de Pruebas

El botón Eliminar borrará el registro completo. Esta acción no es reversible así que ten cuidado cuando la utilices.

Si quieres borrar varios registros de golpe, marca las casillas de esos registros y pulsa el botón Eliminar de la línea
Para los elementos que están marcados.

Pág. 19.14
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.

http://www.aulaclic.es/dreamweavercs3/t_19_14.htm (3 de 3) [10/02/2008 19:56:11]


Curso de Adobe Dreamweaver CS3. Tema 19. Servidor de Pruebas

Unidad 19. Servidor de Pruebas (XV) Búsqueda

Establecer Privilegios en phpMyAdmin

En cualquier momento puedes utilizar el botón para volver a la pantalla principal de phpMyAdmin.

Aquí encontraremos un enlace a la sección de Privilegios que es la que nos ocupa en este apartado.

Haz clic sobre él y verás la siguiente ventana:

Estableciendo privilegios podremos crear usuarios para la conexión remota a la base de datos con
determinados derechos sobre una base de datos o incluso sobre una tabla.

De esta forma podemos controlar a los usuarios que utilicen la base de datos y hacer distinciones entre ellos en su
forma de trabajar con las tablas.

Para crear un nuevo usuario sólo tienes que hacer clic en Agregar un nuevo usuario.

En la siguiente ventana tendrás que introducir los valores que definirán la cuenta:

http://www.aulaclic.es/dreamweavercs3/t_19_15.htm (1 de 4) [10/02/2008 19:56:22]


Curso de Adobe Dreamweaver CS3. Tema 19. Servidor de Pruebas

Rellena los datos siguientes.

En Servidor selecciona Local porque es el único modo con el que vamos a trabajar en estos momentos.

El resto puedes configurarlo a tu gusto.

Más abajo encontrarás estas opciones:

Aquí podrás seleccionar los privilegios del usuario en forma global, las opciones que marques aquí se aplicarán
sobre todas las bases de datos del sistema.

http://www.aulaclic.es/dreamweavercs3/t_19_15.htm (2 de 4) [10/02/2008 19:56:22]


Curso de Adobe Dreamweaver CS3. Tema 19. Servidor de Pruebas

Puedes especificar también un límite de recursos (conexiones, peticiones, etc...)

Cuando estés listo pulsa Continuar.

Ahora verás la pantalla con las opciones del nuevo usuario que acabas de crear. Verás que algunas ya las
conoces, como los privilegios globales.

Lo que nos interesa en este momento son unas opciones que encontrarás más abajo, los privilegios específicos.
Es decir, privilegios enfocados a una única base de datos:

Selecciona una base de datos en el desplegable o escribe su nombre en el cuadro de texto. Luego pulsa Continuar.

Selecciona los privilegios que quieras aplicar y pulsa Continuar para finalizar.

Verás que en la misma página más abajo tienes una opción muy parecida a la que acabamos de ver pero
actúando únicamente sobre una tabla de la base de datos.

Estableciendo los privilegios de este modo recortaríamos muchísimo más la actuación del usuario sobre la base
de datos.

Los privilegios más comunes son los siguientes:

SELECT: permite al usuario realizar una consulta de selección para poder leer los datos de una tabla.

http://www.aulaclic.es/dreamweavercs3/t_19_15.htm (3 de 4) [10/02/2008 19:56:22]


Curso de Adobe Dreamweaver CS3. Tema 19. Servidor de Pruebas

INSERT: permite al usuario realizar una consulta de creación de registro para introducir nuevos datos en una tabla.

UPDATE: permite al usuario actualizar los valores de una tabla.

DELETE: permite al usuario eliminar registros de una tabla.

CREATE: permite al usuario crear tablas en la base de datos.

DROP: permite al usuario eliminar una tabla o la base de datos completa.

Si conoces un poco SQL estos privilegios ya te serán familiares.

Para practicar la creación de privilegios realiza el Ejercicio Paso a Paso de Asignación de Privilegios.

En este tema no realizaremos ejercicios sobre la creación de la base de datos del sitio Blog, en temas
posteriores veremos qué tablas específicas deberemos crear y las crearemos entonces.

Ejercicios del Tema 19. Prueba evaluativa del Tema 19.

Pág. 19.15
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.

http://www.aulaclic.es/dreamweavercs3/t_19_15.htm (4 de 4) [10/02/2008 19:56:22]


Curso de Adobe Dreamweaver CS3. Tema 20. Páginas Dinámicas

Unidad 20. Páginas Dinámicas (II) Búsqueda

Juegos de Registros o RecordSets

Una vez creada nuestra conexión empezaremos a crear páginas dinámicas.

Ahora podemos insertar en cualquier página información almacenada en la base de datos, sólo tenemos que decidir
qué datos vamos a mostrar.

Crearemos un juego de registros (también llamado RecordSet) donde almacenaremos durante el tiempo en el que
se esté ejecutando el archivo PHP los datos que queremos mostrar.

De esta forma podremos seleccionar determinada información y mostrarla en la página.

Antes que nada recuerda que los datos dinámicos sólo pueden mostrarse en una página dinámica. Por lo que si
intentas crear un juego de registros en una página codificada como HTML el programa no te dejará.

Así que abre una nueva página PHP y empieza a practicar.

Para crear un juego de registros puedes hacer clic en el primer botón de la barra de Datos:

Se abrirá el siguiente cuadro de diálogo:

http://www.aulaclic.es/dreamweavercs3/t_20_2.htm (1 de 3) [10/02/2008 19:56:30]


Curso de Adobe Dreamweaver CS3. Tema 20. Páginas Dinámicas

Aquí deberemos especificar qué información queremos obtener, es decir qué registros de qué tabla.

Utilizar este cuadro de diálogo es muy sencillo, aunque puede complicarse bastante si sacamos el máximo provecho
de todas sus opciones.

Iremos viendo poco a poco la forma en la que podremos trabajar con los juegos de registros.

El primer paso será comenzar dando un Nombre significativo al juego, por ejemplo podríamos
llamarlo articulos_en_stock si lo que va a contener el juego de registros son los datos de una tabla de artículos
que tienen existencias.

Luego especificaremos la Conexión que deberá utilizarse para que sea posible acceder a la información. Aquí
deberás de seleccionar una que hayas creado anteriormente o puedes hacer clic en el botón Definir... para crear
una nueva tal y como vimos en el apartado anterior.

Una vez seleccionada la conexión deberemos seleccionar la Tabla de la que queremos sacar los registros.

Finalmente decidiremos qué Columnas queremos mostrar. Al seleccionar una tabla, sus columnas aparecerán en
el cuadro de columnas. Selecciona la opción Todas para que todos los campos de la tabla estén disponibles o marca
la opción Seleccionado: para elegir una o más de las existentes (utiliza la tecla CTRL para realizar
selecciones múltiples).

Pulsando el botón Prueba en cualquier momento verás un ejemplo de qué datos contendrá el juego de registros,
es incluso aconsejable que lo veas antes de Aceptar el cuadro de diálogo para asegurarte de que estás sacando
la información que necesitas.

Para practicar la creación de juegos de registros realiza el Ejercicio Paso a Paso creación de un Recordset.

Nota: Puedes crear tantos juegos de registro en una página como necesites.

http://www.aulaclic.es/dreamweavercs3/t_20_2.htm (2 de 3) [10/02/2008 19:56:30]


Curso de Adobe Dreamweaver CS3. Tema 20. Páginas Dinámicas

Pág. 20.2
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.

http://www.aulaclic.es/dreamweavercs3/t_20_2.htm (3 de 3) [10/02/2008 19:56:30]


Curso de Adobe Dreamweaver CS3. Tema 20. Páginas Dinámicas

Unidad 20. Páginas Dinámicas (III) Búsqueda

Mostrar Datos Dinámicos

Una vez se cree un Juego de Registros podremos empezar a mostrar los datos en nuestra página.

Como podrás ver en el panel Vinculaciones ahora podemos ver las columnas contenidas en el Recordset:

Añadir, por ejemplo, el Titulo del libro a la página es tan fácil como arrastrar el elemento desde el panel a su lugar en
la página.

Aunque también podemos utilizar la opción Texto dinámico de la barra Datos:

Al utilizar esta opción se abrirá un cuadro de diálogo:

http://www.aulaclic.es/dreamweavercs3/t_20_3.htm (1 de 3) [10/02/2008 19:56:39]


Curso de Adobe Dreamweaver CS3. Tema 20. Páginas Dinámicas

Como puedes ver en la imagen, deberás seleccionar el Campo que quieres mostrar en la página, además
Dreamweaver te ofrece la posibilidad de aplicarle un formato determinado, para ello sólo deberás seleccionarlo de la lista.

Por ejemplo, la opción May./min. - Primer letra en mayúsculas transformará el texto del registro y lo pondrá
en minúsculas excepto la primera letra que se verá transformada a mayúsculas.

En el cuadro de texto Código verás como se modifica el código PHP que se incluirá automáticamente en la página.

Pulsa Aceptar cuando hayas acabado y el campo del registro se incluirá en el punto donde tengas situado el cursor.

Se representará en la vista de Diseño de la siguiente forma:

Esto nos indica que el elemento que se mostrará será el de la columna Título del recordset listado_libros.

En cualquier momento podrás volver al cuadro de diálogo anterior para modificar alguna de las opciones (por ejemplo,
el formato) desde el panel Comportamientos del servidor (CTRL + F9).

En este panel se mostrarán todos los elementos dinámicos que se están utilizando en la página, haz doble clic
sobre cualquiera de ellos para modificarlos.

http://www.aulaclic.es/dreamweavercs3/t_20_3.htm (2 de 3) [10/02/2008 19:56:39]


Curso de Adobe Dreamweaver CS3. Tema 20. Páginas Dinámicas

Si te has fijado ha aparecido un nuevo botón al lado de los de las vistas:

Pulsándolo podrás ver cómo actuaría la página de haberse ejecutado en un servidor, por lo tanto la imagen anterior
se correspondería a esta si pulsasemos el botón:

Para practicar estos conceptos realiza el Ejercicio Paso a Paso de Texto dinámico.

Pág. 20.3
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.

http://www.aulaclic.es/dreamweavercs3/t_20_3.htm (3 de 3) [10/02/2008 19:56:39]


Curso de Adobe Dreamweaver CS3. Tema 20. Páginas Dinámicas

Unidad 20. Páginas Dinámicas (IV) Búsqueda

Repeticiones

Hemos aprendido a insertar datos en una página, pero de momento sólo logramos que se muestre el primer registro
del juego.

¿Cómo hacemos para mostrar más de uno?

Muy fácil, utilizaremos las Repeticiones.

Repetir un registro nos permitirá visualizar en una misma página más de un registro contenido en el recordset a la vez.

Ten en cuenta que podemos repetir cualquier parte que queramos, de hecho la repetición no afecta a la página
entera sino a la zona seleccionada.

Para crear una repetición deberás seleccionar la zona a repetir y pulsar el botón Región Repetida en la
barra Datos.

Se abrirá el siguiente cuadro de diálogo:

Aquí deberás indicar el número de registros que quieras que aparezcan (más tarde veremos cómo avanzar en una
lista de registros) o simplemento escoger Todos los registros para que se repita la información seleccionada de
todos y cada uno de los registros.

Como decíamos antes, en una página pueden existir más de un juego de registros o recordset, por lo que será
necesario especificar de cual de ellos queremos que se realice la repetición en el desplegable Juego de registros.

Una vez hayamos terminado pulsa el botón Aceptar, y en la vista de Diseño, la sección seleccionada tomará
este aspecto:

http://www.aulaclic.es/dreamweavercs3/t_20_4.htm (1 de 3) [10/02/2008 19:56:51]


Curso de Adobe Dreamweaver CS3. Tema 20. Páginas Dinámicas

Esto provocará el listado de todos los títulos del recordset listado_libros.

Si colocasemos otro campo al lado de este pero sobre él no se aplicase ninguna repetición se mostraría el listado junto
a la información de un campo del primer registro.

Para practicar estos conceptos realiza el Ejercicio Paso a Paso de Repetición de Texto dinámico.

Dreamweaver también te da la posibilidad de crear una tabla dinámica automáticamente que mostrará todas
las columnas del número de registros que quieras.

Para ello deberás hacer clic en la opción Tabla dinámica que aparece en la barra Datos:

Automáticamente se generará una tabla con la configuración que especifiques en este cuadro de diálogo:

De esta forma Dreamweaver colocará los registros en una tabla con las características que hayamos indicado.

Pág. 20.4
http://www.aulaclic.es/dreamweavercs3/t_20_4.htm (2 de 3) [10/02/2008 19:56:51]
Curso de Adobe Dreamweaver CS3. Tema 20. Páginas Dinámicas

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.

http://www.aulaclic.es/dreamweavercs3/t_20_4.htm (3 de 3) [10/02/2008 19:56:51]


Curso de Adobe Dreamweaver CS3. Tema 20. Páginas Dinámicas

Unidad 20. Páginas Dinámicas (V) Búsqueda

Orden de Juegos de Registros

Hasta ahora somos capaces de crear un listado personalizado de elementos almacenados en un juego de registros.

Pero podríamos querer ordenarlos de algún modo, ¿cómo lo hacemos?.

Vamos a utilizar la opción Ordenar: que se encuentra en el cuadro de diálogo Juego de Registros:

Puedes llegar a este cuadro de diálogo creando un nuevo Recordset o modificando el ya existente, para ello
deberás hacer doble clic sobre él en el panel Vinculaciones (CTRL + F10).

La forma en que se podrán ordenar los registros del recordset será la siguiente, selecciona el campo por el que
quieres ordenar los registros y el modo en que quieres que lo haga.

Si el campo es de tipo numérico, se ordenará de menor a mayor (Ascendente) o de mayor a menor (Descendente).

Si el campo es de tipo alfanumérico se ordenará alfabéticamente.

Para practicar este concepto realiza el Ejercicio Paso a Paso de Ordenación de un Recordset.

Filtrado de Juegos de Registros


http://www.aulaclic.es/dreamweavercs3/t_20_5.htm (1 de 2) [10/02/2008 19:56:58]
Curso de Adobe Dreamweaver CS3. Tema 20. Páginas Dinámicas

También podemos filtrar los registros que vayan a formar parte del juego de registros eliminando aquellos que
no cumplan ciertas condiciones.

Este método también lo aplicaremos sobre el cuadro de diálogo Juego de Registros del recordset:

En este caso deberemos en Filtro: seleccionar el campo sobre el cual realizaremos el filtro. Seleccionar en el cuadro
de lista que contiene un = si queremos que el campo sea igual, distinto, mayor, menor o que empiece o acabe
con alguna cadena determinada.

En el desplegable que encontrarás más abajo deberás seleccionar Valor introducido para poder especificar en
el cuadro de la derecha (en la imagen 0) el valor con el que comparar.

En apartados posteriores veremos el significado de escoger en el desplegable otra opción que no sea Valor introducido.

Una vez hayas terminado, pulsa el botón Aceptar y el recordset contendrá únicamente los registros que cumplan
la condición indicada en el cuadro de diálogo.

Nota: recuerda que puedes utilizar el botón Prueba para previsualizar el efecto del filtro sobre la tabla seleccionada.

Para practicar el filtrado de registros realiza el Ejercicio Paso a Paso de Filtrado de Registros.

Pág. 20.5
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.

http://www.aulaclic.es/dreamweavercs3/t_20_5.htm (2 de 2) [10/02/2008 19:56:58]


Curso de Adobe Dreamweaver CS3. Tema 20. Páginas Dinámicas

Unidad 20. Páginas Dinámicas (VI) Búsqueda

Paginación de Registros

Ya sabemos cómo hacer para mostrar un listado ordenado y filtrado de tantos registros como queramos.

Cuando el listado de los registros es muy largo, nos sería muy útil poder organizar esos registros en páginas y
avanzar en ese listado página por página.

Para ello utilizaremos la Paginación.

En primer lugar tendrás que definir una repetición de registros con un número limitado de registros (los que quieres
que aparezcan en cada página), si defines la repetición sobre todos los registros, la paginación no funcionará
porque todos los registros se estarán mostrando en una sola página.

A continuación crearemos enlaces que funcionen de modo automático desplazándose por las diferentes páginas
del juego de registros.

Sólo tendrás que elegir el enlace que quieres insertar utilizando el botón que se te ofrece en la barra de Datos.

Al seleccionar el enlace correspondiente se abrirá un cuadro de diálogo muy parecido a este:

Aquí sólo tendrás que seleccionar el Juego de registros sobre el cual quieres que se establezca la paginación y
pulsar Aceptar.

En la vista de Código verás que aparece algo como esto:

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


Curso de Adobe Dreamweaver CS3. Tema 20. Páginas Dinámicas

Si utilizas el servidor de prueba (pulsando F12) podrás ver que pulsando el enlace creado avanzas por el juego
de registros.

La página permanecerá exactamente igual a cómo la diseñaste, pero el contenido será dinámico y variará según
la página que estés mostrando.

Nota: Recuerda que puedes aplicar estilos sobre estos enlaces igual que podíamos hacerlos sobre los items
que mostramos para los datos de la tabla.

Para practicar el uso de la paginación realiza el Ejercicio Paso a Paso de Paginación de Registros.

Una opción muy útil que presenta Dreamweaver son los Recuentos de registros:

Si seleccionas alguna de las tres últimas opciones se mostrará el siguiente cuadro de diálogo:

Selecciona aquí el Juego de registros sobre el que quieras realizar el recuento y pulsa Aceptar.

Dependiendo de la opción que escojas se añadirá un texto u otro a la página.

Registro inicial: Visualiza el número dentro del listado total de registros, del primer elemento de la lista que
se está mostrando en la página actual.

Registro final : Visualiza el número dentro del listado total de registros del último elemento de la lista que se
está mostrando en la página actual.

Total de registros: Visualiza el número total de registros del juego (la suma de todos los registros de todas
las páginas).

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


Curso de Adobe Dreamweaver CS3. Tema 20. Páginas Dinámicas

Seleccionando la primera opción Estado de navegación de juego de registros podremos insertar un literal
que mostrará el recuento exacto de los registros que se están visualizando, se añadirá una línea como esta:

Que en la vista LiveData tomaría este aspecto:

Como puedes ver, esta opción es una combinación de las tres anteriores que ilustra perfectamente el
funcionamiento del recuento de registros.

Para practicar el uso del recuento realiza el Ejercicio Paso a Paso de Recuento de Registros.

Pág. 20.6
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.

http://www.aulaclic.es/dreamweavercs3/t_20_6.htm (3 de 3) [10/02/2008 19:57:10]


Curso de Adobe Dreamweaver CS3. Tema 20. Páginas Dinámicas

Unidad 20. Páginas Dinámicas (VII) Búsqueda

Mostrar/Ocultar Regiones

Como hemos visto la paginación es muy útil para navegar por nuestros registros.

Pero existen determinados casos en los que nos gustaría que estos items funcionen de forma diferente.

Por ejemplo, ¿por qué debe aparecer el elemento de navegación Anterior en la primera página si en realidad no
existe una página anterior?

Vamos a utilizar las opciones de Mostrar región para realizar algunos cambios sobre los elementos de la página:

Estas opciones en realidad actúan sobre cualquier parte de la página, así que incluso podrás hacer desaparecer
una tabla o un párrafo si no se cumplen los criterios de la opción.

Cuando hagas clic en alguna de ellas verás un cuadro de diálogo como este:

Aquí deberás especificar el Juego de registros sobre el que quieres que se efectúe la acción y luego Aceptar.

En la vista de Diseño se mostará la opción de una forma parecida a esta:

Para practicar ocultar y mostrar regiones realiza el Ejercicio Paso a Paso de Ocultar/Mostrar Regiones.

http://www.aulaclic.es/dreamweavercs3/t_20_7.htm (1 de 2) [10/02/2008 19:57:18]


Curso de Adobe Dreamweaver CS3. Tema 20. Páginas Dinámicas

Combinando la técnica de ocultación y muestra de registros con las de recuento encontramos la opción Barra
de navegación de juego de registros:

Pulsando esta opción se incluirá en la página una barra de navegación para desplazarse por las páginas del juego
de registros. Se abrirá el siguiente cuadro de diálogo:

Desde aquí podrás selecionar el Juego de registros sobre el que quieres que actúe la barra de navegación
y seleccionar uno de los dos modos: Texto o Imágenes.

Aquí tienes un ejemplo de cómo quedaría cada una de las opciones, en la primera línea tenemos una barra
de navegación con la opción Texto y en la segunda línea una barra de navegación con la opción Imágenes:

Pág. 20.7
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.

http://www.aulaclic.es/dreamweavercs3/t_20_7.htm (2 de 2) [10/02/2008 19:57:18]


Curso de Adobe Dreamweaver CS3. Tema 20. Páginas Dinámicas

Unidad 20. Páginas Dinámicas (VIII) Búsqueda

Uso de Variables

Hasta ahora hemos aprendido a crear páginas dinámicas que muestren contenido disponible desde una base de datos.

Aunque podríamos hacer mucho más dinámica la página haciendo que sea el usuario quien elija qué registro
quiere visualizar.

Imagina que quieres el listado de las ventas de un artículo en determinado mes.

Es posible acotar los resultados de una página dinámica de un modo muy sencillo, utilizando variables.

Una variable le da información a una página PHP, y el archivo puede actuar de acorde con el valor de esa variable.

En el ejemplo anterior deberíamos abrir la página PHP indicándole que queremos que muestre el articulo X del
mes Y.

Muy bien veamos la forma de hacerlo.

Primero deberemos aprender cómo pasar las variables a una página PHP.

En una dirección de Internet (o URL) podemos encontrar cadenas como esta:

http://www.misitio.com/carpeta/archivo.php?nombre=valor

¿A que lo has visto alguna vez?

Muy bien, pues en este ejemplo le estamos diciendo al archivo ARCHIVO.PHP que se ejecute, pero además le
estamos indicando que queremos que tome en cuenta la variable NOMBRE con el valor valor.

En un ejemplo sencillo podríamos indicar mediante un enlace que queremos que se muestre el detalle de un artículo
con determinado número de identificación de la siguiente forma:

detalle.php?id=99

De esta forma estaremos abriendo la página detalle.php pasando en la variable id el valor 99 para que la
página muestre el detalle del artículo 99.

¿Cómo podemos desde Dreamweaver crear enlaces con paso de variables?

Si el valor del parámetro es fijo, se puede escribir directamente en la referencia del vínculo, por ejemplo en el enlace a
la página detalle.php pondríamos en el cuadro Vinculo del panel Propiedades detalle.php?id=99.

Pero también podemos utilizar textos dinámicos para indicar el valor del parámetro a pasar. En este caso en vez
de escribir 99 deberíamos indicar que el valor lo tiene que sacar del texto dinámico de la siguiente manera:

Nos posicionamos sobre el enlace a la página detalle.php y desde la vista Código arrastramos el campo
dinámico desde el panel Vinculaciones (CTRL + F10) hasta el vínculo para formar la URL del enlace:

http://www.aulaclic.es/dreamweavercs3/t_20_8.htm (1 de 5) [10/02/2008 19:57:29]


Curso de Adobe Dreamweaver CS3. Tema 20. Páginas Dinámicas

detalle.php?id=<?php echo $row_listado_libros_usados['Id']; ?>

El código quedaría de la siguiente forma:

Cuando pases los parámetros ayudándote de un formulario, no olvides indicar que quieres pasar las variables en el
modo GET.

Dreamweaver crea las páginas dinámicas de modo que utilicen ese método para recuperar los parámetros.

Para practicar la creación de enlaces con parámetros realiza el Ejercicio Paso a Paso de Enlaces con Parámetros.

¿Cómo podemos desde Dreamweaver utilizar las variables recibidas ?

Cuando se abre una página pasándole una serie de parámetros, esta página puede utilizar los valores de los
parámetros para lo que le haga falta.

En el ejemplo anterior abrimos la página detalle.php pasándole un valor en la variable Id. Pues esta página puede
ahora utilizar este valor para visualizar unicamente los registros con ese Id en vez de visualizar todos los registros.

Para ello deberemos modificar el Juego de registros de la página. Hacemos doble clic sobre él en el
panel Comportamientos del servidor (CTR + F9).

Se abrirá el cuadro de diálogo Juego de registros :

http://www.aulaclic.es/dreamweavercs3/t_20_8.htm (2 de 5) [10/02/2008 19:57:29]


Curso de Adobe Dreamweaver CS3. Tema 20. Páginas Dinámicas

Aquí indicaremos que el recordset filtre los registros cuyo Id sea igual al valor recibido en el parámetro Id.

Para ello deberemos seleccionar en el desplegable de filtro la opción Parámetro URL para que el archivo PHP tome
el valor de la variable de la URL que abre la página.

En la caja de texto de al lado deberás especificar el nombre que tiene la variable en la ruta URL.

Para practicar el filtro con parámetros realiza el Ejercicio Paso a Paso de Filtro con Parámetros.

Hay muchos usos para los parámetros. Imagina que quieres mostrar mediante un enlace los libros que cuesten más
de 10 €, sólo tendrías que pasarle una variable x a la página que genera el listado de libros y establecer que el juego
de registros filtre los resultados para mostrar sólo aquellos que tengan un valor en el campo Precio mayor
al especificado en el parámetro x.

Páginas Maestro-Detalle

A menudo debemos sacar datos de dos tablas que están relacionadas entre sí por un campo común a las dos,
por ejemplo para mostrar los datos de un cliente y todas sus facturas (en la factura tendré el código del cliente), o
los datos de un libro y todas las compras que tenemos de ese libro (en la tabla compras tendré el código del
libro comprado)...

Pues Dreamweaver te facilita la creación de páginas de este tipo y las denomina Maestro-Detalle porque sacan datos
de un archivo Maestro (clientes y libros en los ejemplos anteriores) y enlazan cada registro con un página donde
se visualizan los registros correspondientes del archivo Detalle (las facturas y las compras en los ejemplos anteriores).

Para ello utilizamos la opción Juego de páginas Maestro-Detalle .

Al seleccionarla verás el siguiente cuadro de diálogo:

http://www.aulaclic.es/dreamweavercs3/t_20_8.htm (3 de 5) [10/02/2008 19:57:29]


Curso de Adobe Dreamweaver CS3. Tema 20. Páginas Dinámicas

En Juego de registros: seleccionamos el juego de registros que se visualizarán de la tabla Maestro.

En Campos de página Maestro: indicamos los campos del maestro que queremos que se muestren en la página.

En Vincular con Detalle desde: indicaremos el campo del Maestro que contendrá el enlace a la página de detalle.

En Pasar clave exclusiva: indicaremos el campo que se utiliza para relacionar los registros.

Luego en Mostrar: tendremos que establecer el número de registros que queremos que se muestren en la página
del Maestro.

En la sección inferior deberemos introducir la información para crear el Detalle.

Establece un Nombre de página Detalle (si no existe la creará) y en Campos de página Detalle: escogeremos
los campos a mostrar.

Pulsamos el botón Aceptar y Dreamweaver creará automáticamente las páginas requeridas.

Luego podrás modificar su aspecto para que se ajusten al sitio que estás diseñando.

Pág. 20.8

http://www.aulaclic.es/dreamweavercs3/t_20_8.htm (4 de 5) [10/02/2008 19:57:29]


Curso de Adobe Dreamweaver CS3. Tema 20. Páginas Dinámicas

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.

http://www.aulaclic.es/dreamweavercs3/t_20_8.htm (5 de 5) [10/02/2008 19:57:29]


Curso de Adobe Dreamweaver CS3. Tema 20. Páginas Dinámicas

Unidad 20. Páginas Dinámicas (IX) Búsqueda

Asistente de Inserción de Registros

Dreamweaver posee otros procesos automatizados como verás en este apartado y en los siguientes para crear
más páginas de acceso a datos.

Es capaz de generar formularios de forma sencilla para insertar, modificar o eliminar registros de una base de datos.

Para crear un formulario de inserción de registros tendrás que hacer clic en el botón Asistente de formulario
de inserción de registros de la barra Datos.

Se abrirá el siguiente cuadro de diálogo:

Su uso es bastante sencillo, solo tienes que indicar la Conexión y los datos se rellenarán automáticamente.

Selecciona la Tabla donde quieras insertar el nuevo registro.

También puedes indicar dónde quieres que se redirija la página una vez se haya insertado el registro.

Luego seleccionaremos los campos que deberán aparecer en el formulario. Recuerda que todos aquellos que
necesiten adoptar un valor deberán aparecer en él, sino el formulario fallará por no introducir valores en campos que

http://www.aulaclic.es/dreamweavercs3/t_20_9.htm (1 de 4) [10/02/2008 19:57:34]


Curso de Adobe Dreamweaver CS3. Tema 20. Páginas Dinámicas

no aceptan valores nulos.

A continuación seleccionaremos cada campo y para cada uno indicaremos cómo será presentado en el formulario.

En Etiqueta escribiremos la etiqueta que queremos para el campo.

En Mostrar como: indicaremos en qué tipo de elemento de formulario estará representado el campo, una caja de
texto, un botón de opción, un desplegable...

También indica cómo Enviar la información para que se guarde en la tabla, normalmente será del mismo tipo
que definiste cuando creaste la tabla.

Puedes establecer un Valor predeterminado para el campo seleccionándolo en el generador automático.

Podrás asignarle un valor existente en la página.

Esta opción te será muy útil si establecemos alguno de los campos como Campo oculto en Mostrar como.

Pulsa Aceptar y el formulario se creará automáticamente.

Para practicar la inserción de registros realiza el Ejercicio Paso a Paso de Inserción de Registros.

Asistente de Actualización de Registros

Igual que en el apartado anterior existe un asistente que te permitirá crear un formulario que primero muestra los
datos existentes en un registro de la tabla y te permitirá modificarlos y guardarlos.

Para ello, deberás hacer clic en el boton Asistente de formulario de actualización de registros .

Se abrirá el siguiente cuadro de diálogo:

http://www.aulaclic.es/dreamweavercs3/t_20_9.htm (2 de 4) [10/02/2008 19:57:34]


Curso de Adobe Dreamweaver CS3. Tema 20. Páginas Dinámicas

El modo en el que rellenaremos los datos es el siguiente:

Seleccionaremos, primero, la Conexión con la que trabajaremos.

Luego eligiremos la Tabla a actualizar que será de donde saquemos los datos que luego modificaremos.

Como deberemos elegir registro de entre toda la tabla para modificar, deberemos indicar cuál. Para ello
deberemos seleccionar un campo (en Columna de clave exclusiva) y un juego de registros (en Seleccionar
registro de) para establecer el registro que va a mostrar la página. De esta forma vincularemos el campo del
recordset de la página y se mostrará la información que coincida con él.

El resto funcionaría igual que en el cuadro de diálogo anterior. Seleccionando los campos que se van a mostrar, su
tipo de elemento de formulario y la forma en la que se va a enviar.

En la caja de texto Valor predeterminado encontrarás la cadena que mostrará el contenido del campo en el registro
en cuestión.

No lo modifiques si quieres que muestre la información almacenada. Sólo cámbialo si quieres que aparezca un valor
fijo en vez del valor contenido en el registro, por ejemplo, ninguno, sin precio, etc... e incluso nada.

Finalmente pulsa Aceptar y el formulario se creará.

Pág. 20.9
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.

http://www.aulaclic.es/dreamweavercs3/t_20_9.htm (3 de 4) [10/02/2008 19:57:34]


Curso de Adobe Dreamweaver CS3. Tema 20. Páginas Dinámicas

© aulaClic. Todos los derechos reservados. Free Computer tutorials. Prohibida la reproducción por cualquier medio.
Septiembre - 2007.

http://www.aulaclic.es/dreamweavercs3/t_20_9.htm (4 de 4) [10/02/2008 19:57:34]


Curso de Adobe Dreamweaver CS3. Tema 20. Páginas Dinámicas

Unidad 20. Páginas Dinámicas (X) Búsqueda

Asistente de Eliminación de Registros

Siguiendo con los asistentes encontramos al final el de Eliminar Registro .

Para utilizar el asistente de Dreamweaver para crear páginas de eliminación de registros deberás crear una
página especial que se dedique única y exclusivamente a eliminar el registro.

Para ello tendremos una primera página donde el usuario seleccionará el registro a borrar y dará la orden de
borrado; esta página enlazará con la página de borrado pasándole el identificativo del registro a borrar, y la página
de borrado mostrará los datos del registro a borrar y pedirá confirmación al usuario.

Con lo cual deberemos seguir este guión:

● La primera página deberá tener un enlace a la página de borrado de la forma:

borrar.php?id=99

donde borrar.php será la página de borrado,


id el nombre del parámetro que contiene el valor de clave del registro a borrar,
y 99 es el valor de la clave del registro a borrar (en este caso queremos borrar el registro cuya clave sea 99).

● En la página borrar.php deberás:

1. Crear un recordset que muestre la información del elemento cuya clave se ha pasado como parámetro
para que pueda ser verificado.

Para ello deberás utilizar un juego de registros filtrado por el campo clave principal y el valor recibido como parámetro.

2. En la misma página añadiremos un formulario con un campo oculto y un botón de tipo Submit que
permita al usuario confirmar el borrado y reenvíe a la misma página de borrado.

Al campo oculto le deberemos asociar el campo clave principal del registro que se muestra, puedes hacerlo pulsando
el botón que aparece al lado de su propiedad Valor:

Deberás recordar el nombre que le das a este control de formulario porque es el que utilizaremos para borrar el registro.

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


Curso de Adobe Dreamweaver CS3. Tema 20. Páginas Dinámicas

3. Luego podremos incluir el código para borrar el registro.

Haz clic en el botón Eliminar Registro en la barra de Datos, y rellena el siguiente cuadro de diálogo:

La primera opción deberás dejarla en Valor de clave principal. Puedes utilizar el resto de opciones para crear
otros tipos de eliminaciones más complejas, aunque este método sea el más utilizado.

Luego selecciona la Conexión, la Tabla donde se encuentra el registro a borrar y su Columna de clave principal.

Por último le deberemos indicar cómo debe acceder al valor que le dará el valor de la clave principal del registro
que tiene que eliminar, indica que lo hacemos por Parámetro URL y escribe el nombre del campo oculto del
formulario que acabas de crear (es el que le pasa el valor).

Finalmente puedes elegir a qué página redireccionar cuando se realice el borrado.

Pulsa Aceptar y habrás acabado.

Pág. 20.10
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.

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


Curso de Adobe Dreamweaver CS3. Tema 20. Páginas Dinámicas

Unidad 20. Páginas Dinámicas (XI) Búsqueda

Juegos de Registros Avanzados

Pro último en este apartado vamos a ver un modo avanzado de crear juegos de registros.

Si en el cuadro de diálogo Juegos de registros que hemos visto hasta ahora haces clic en el botón Avanzado...
verás estas otras opciones:

En este cuadro de diálogo puedes crear juegos de registros mucho más complejos.

El principio del cuadro es igual que la versión simple, deberás introducir un Nombre para el juego de registros y
asignarle una Conexión.

Luego deberemos introducir una sentencia SQL que indicará qué registros se van a mostrar.

Mediante las opciones y botones que veremos ahora podremos crear sentencias bastante completas, pero si
quieres aprender más sobre este lenguaje puedes visitar el curso de SQL que se encuentra en nuestra página web.

De momento explicaremos las opciones para que puedas manejarte mejor con el programa.

http://www.aulaclic.es/dreamweavercs3/t_20_11.htm (1 de 3) [10/02/2008 19:57:54]


Curso de Adobe Dreamweaver CS3. Tema 20. Páginas Dinámicas

Detrás de la palabra SELECT se escriben las columnas que queremos que aparezcan en el resultado, por eso
para añadir más campos a la lista sólo tienes que seleccionar el campo de la lista Elementos de base de datos, y
pulsar el botón SELECT, el campo se añadirá a la sentencia y por lo tanto aparecerá en el recordset.

En la cláusula FROM se especifica el nombre de la tabla o tablas desde donde se saca la información.

La cláusula WHERE sirve para incluir condiciones, para filtrar los registros. El botón WHERE te ayudará a
establecer esas condiciones, una vez hayas añadido el campo con este botón en el cuadro de texto
SQLdeberás completar la condición utilizando los operadores de comparación adecuados como <, >, !=.

Utiliza la zona de Variables: para insertar parámetros que podrás recibir mediante el URL, para ello haz clic en el
botón .

Se abrirá el siguiente cuadro de diálogo:

Aquí deberás establecer el Nombre de la variable, su Valor predeterminado y el Valor de tiempo de ejecución.

Ten en cuenta que para asociar estas variables a parámetros pasados por URL deberás escribirlas en el campo Valor
de tiempo de ejecución de la siguiente forma:

$_GET['nombre_parametro']

Donde nombre_parametro es el nombre del parámetro incluido en el URL.

Finalmente puedes utilizar el botón ORDER BY para crear ordenaciones por los campos selecionados en el listado de
la izquierda.

En la imagen más arriba puedes encontrar un ejemplo de una sentencia SQL que te podrá aclarar estos conceptos.
Esta sentencia obtiene el autor, título y editorial de la tabla Libros filtrando los regitros cuyo id sea igual al que se
haya recibido como parámetro de URL, y si hubiesen varios registros los ordenaría alfabéticamente por autor y dentro
de cada autor por título.

Para practicar la creación de juegos de registros avanzados realiza el Ejercicio Paso a Paso de Utilizar
sentencia SQL.

En el tema siguiente seguiremos practicando todos los conceptos vistos en este tema completando el sitio de Blog.

Ejercicios del Tema 20. Prueba evaluativa del Tema 20.

http://www.aulaclic.es/dreamweavercs3/t_20_11.htm (2 de 3) [10/02/2008 19:57:54]


Curso de Adobe Dreamweaver CS3. Tema 20. Páginas Dinámicas

Pág. 20.11
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.

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


Curso de Adobe Dreamweaver CS3. Tema 7. Tablas

Unidad 7. Tablas (II) Búsqueda

Rellenar las celdas

Las celdas son cada uno de los recuadros que forman una tabla, resultan de la intersección entre una fila y una columna.

imagen y texto
COLUMNA

Texto dentro de
una celda

CELDA

FILA

Para poder insertar algún elemento en una celda, ya sea texto o imágenes, simplemente hay que situar el
cursor previamente dentro de la celda deseada.

Para practicar puedes realizar el Ejercicio paso a paso Crear y rellenar una tabla.

Seleccionar elementos de una tabla

http://www.aulaclic.es/dreamweavercs3/t_7_2.htm (1 de 3) [10/02/2008 19:58:04]


Curso de Adobe Dreamweaver CS3. Tema 7. Tablas

Existen varias formas de seleccionar una tabla. Una de ellas es a través del menú Modificar estando el cursor en
la tabla, o desplegando el menú contextual de la tabla al pulsar con el botón derecho sobre ella. En ambos
casos aparece la opción Tabla, a través de la cual se puede elegir la opción Seleccionar tabla.

También es posible seleccionar una tabla pulsando con el ratón sobre el borde que la rodea, o pulsando sobre la
etiqueta <table> que aparece en la barra de estado de la ventana de documento.

Cuando se selecciona una tabla o cuando se coloca el cursor sobre cualquier parte de la tabla, Dreamweaver muestra
en una zona verde el ancho de la tabla y de cada columna. Junto a los anchos se encuentran unos menús
desplegables (menú de encabezado de la tabla y menú de encabezado de la columna). Estos menús permiten
acceder rápidamente a determinados comandos relacionados con la tabla.

Si tienes el cursor en la tabla y no te aparece esa zona verde puedes activar su visualización seleccionando la
opción Anchos de tablas del menú Tabla o también desplegando de la barra de menús, el menú Ver, Ayudas
visuales, Anchos de tabla. De la misma forma se desactiva su visualización.

http://www.aulaclic.es/dreamweavercs3/t_7_2.htm (2 de 3) [10/02/2008 19:58:04]


Curso de Adobe Dreamweaver CS3. Tema 7. Tablas

Si no aparece el ancho de la tabla o de una columna, la tabla o la columna no tiene un ancho especificado, si
aparecen dos números, el primer número corresponde al ancho especificado en las propiedades de la tabla o columna
y el segundo número es el ancho el ancho visual que aparece en la vista de diseño, por ejemplo en la tabla anterior
la primera columna tiene 139 (142), en las propiedades de la celda tenemos el ancho 139 píxeles pero al contener
una imagen que necesita más espacio, la columna ocupará realmente 142 píxeles (ancho visual de la columna tal
como aparece en la pantalla).

Cuando ocurren estas diferencias podemos hacer que en el código (propiedades) se cambie el ancho por el real,
para ello sólo tenemos que seleccionar la opción Igualar todos los anchos del menú desplegable de encabezado
de tabla.

En este menú vemos que también tenemos la opción Seleccionar tabla.

No siempre se desea seleccionar toda una tabla, en ocasiones se desea seleccionar filas, columnas o celdas.

Puede seleccionarse una fila o columna de varias formas, lo mejor es que pruebes las distintas formas y elijas la
que más te gusta. Estas son las formas de selección:

Puedes utilizar la opción Seleccionar columna del menú de encabezado de columna (zona verde de anchos)
esto sólo es válido para seleccionar una columna.

Manteniendo pulsado y arrastrando el ratón hasta seleccionar la columna/s o fila/s completamente.

También puede hacerse situando el cursor junto al borde superior o izquierdo de la columna o fila respectivamente,
de modo que el cursor cambia a la forma de una flecha negra. Al hacer clic se selecciona la columna o fila a la
que apunta dicha flecha.

En cualquier momento, para seleccionar una fila posicionar el cursor en cualquier sitio de la fila y sobre la
etiqueta <tr> de la barra de estado o sobre la etiqueta <td> para seleccionar la columna.

Para seleccionar varias celdas contiguas, basta con mantener pulsado el ratón mientras se arrastra sobre las
celdas deseadas.

Para seleccionar una sola celda o varias celdas no contiguas, hay que mantener pulsada la tecla Control
mientras se hace clic sobre las celdas.

Pág. 7.2
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.

http://www.aulaclic.es/dreamweavercs3/t_7_2.htm (3 de 3) [10/02/2008 19:58:04]


Curso de Adobe Dreamweaver CS3. Tema 7. Tablas

Unidad 7. Tablas (III) Búsqueda

Formato de tabla

Las propiedades de la tabla se especifican a través de su inspector de propiedades.

A través del inspector de propiedades se pueden modificar los valores que se especificaron al insertar la tabla. Al
mismo tiempo, pueden indicarse otros como pueden ser el valor Alinear (que permite alinear la tabla a la izquierda,
al centro o a la derecha), el color de fondo (en Col. Fondo) o de borde de la tabla (en Col. borde ), o la imagen
de fondo (en Im.).

Si lo que se selecciona es una celda, o un conjunto de celdas, el inspector de propiedades cambia, para
permitir especificar otros valores.

La parte superior del inspector de propiedades en este caso sirve para especificar las propiedades del texto que
se insertará dentro de la celda (o celdas) seleccionada.

La parte inferior sirve para especificar valores propios de la celda, como puede ser el color o imagen de
fondo diferentes de los especificados para la tabla global (en Fnd), el color del Borde de la celda, etc.

Dos opciones que posiblemente necesites utilizar con frecuencia serán Horiz y Vert, que definen la alineación
del contenido de la celda de forma horizontal y vertical respectivamente.

Para practicar puedes realizar el Ejercicio paso a paso Modificar las propiedades de la tabla.

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


Curso de Adobe Dreamweaver CS3. Tema 7. Tablas

Cambiar tamaño de tabla y celdas

Como ya sabes, el Ancho de una tabla puede ser definido como Píxeles o como Porcentaje. El tamaño de la tabla
a través del inspector de propiedades estará especificado por los valores de An (anchura) y Al (altura).
Normalmente sólo se especifica la anchura, no la altura.

Los valores An y Al de una celda siempre están en Píxeles. No es necesario especificar ninguno de estos dos
valores para las celdas, a no ser que se desee que se mantenga obligatoriamente ese tamaño, y no que se ajusten
al contenido o al tamaño de la ventana.

No solo puede establecerse el tamaño de las tablas y de las celdas a través del inspector de propiedades. También
es posible hacerlo manteniendo pulsado el ratón sobre alguno de los bordes, arrastrándolo hacia la posición deseada.

Pág. 7.3
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.

http://www.aulaclic.es/dreamweavercs3/t_7_3.htm (2 de 2) [10/02/2008 19:58:10]


Curso de Adobe Dreamweaver CS3. Tema 7. Tablas

Unidad 7. Tablas (IV) Búsqueda

Añadir y eliminar filas y columnas

Existen varias formas de añadir y eliminar filas y columnas a una tabla.

Lo primero que hay que hacer es, estando el cursor en una celda o seleccionando varias, desplegar el menú
contextual de la tabla al pulsar con el botón derecho sobre ella, o bien abrir el menú Modificar. En ambos
casos aparece la opción Tabla.

Según las celdas seleccionadas, algunas de las opciones de Tabla se podrán utilizar mientras que otras no.

Para insertar una fila o una columna, hay que pulsar sobre las opciones Insertar fila o Insertar columna.

La fila se inserta sobre la celda o el conjunto de celdas seleccionadas, mientras que la columna se inserta a su izquierda.

También tenemos una opción más completa, la opción Insertar filas o columnas.... Al seleccionarla aparece una
nueva ventana, donde es posible determinar si lo que se insertarán serán filas o columnas, el número de ellas que
se insertará, y la posición donde se insertarán.

http://www.aulaclic.es/dreamweavercs3/t_7_4.htm (1 de 3) [10/02/2008 19:58:23]


Curso de Adobe Dreamweaver CS3. Tema 7. Tablas

Para eliminar una fila o una columna, hay que posicionar el cursor en la fila o columna a eliminar y elegir la
opción Eliminar fila o Eliminar columna del menú Tabla.

También se puede seleccionar la fila o columna a borrar y pulsar la tecla de borrado (Del o Supr)

Para practicar puedes realizar el Ejercicio paso a paso Añadir y eliminar filas.

Anidar, dividir y combinar celdas

Es posible insertar tablas dentro de las celdas de otras tablas. A esto se le llama anidar tablas.

A continuación tienes un ejemplo de anidamiento. Como puedes ver, en la primera celda de una tabla se ha
insertado otra tabla.

Para anidar tablas sólo tienes que posicionar el cursor en la celda donde quieres insertar la nueva tabla e insertarla
como ya hemos visto.

Combinar celdas consiste en convertir 2 o más celdas en una sola por lo que dejará de haber borde de
separación entre una celda y otra ya que serán una sola. Esto nos puede servir por ejemplo para utilizar la primera
fila para escribir el título de la tabla. En este caso habría que combinar todas las celdas de la primera fila en una sola

Mientras que dividir celdas consiste en partir en dos una celda.

Una de las formas de dividir y combinar celdas es a través del inspector de propiedades.

http://www.aulaclic.es/dreamweavercs3/t_7_4.htm (2 de 3) [10/02/2008 19:58:23]


Curso de Adobe Dreamweaver CS3. Tema 7. Tablas

Si se seleccionan varias celdas pueden combinarse pulsando sobre el botón del inspector de propiedades
(lo encontrarás en la parte inferior izquierda del panel Propiedades, o pulsando sobre la opción Combinar celdas de
la opción Tabla, que como ya has visto puedes dirigirte a ella a través del menú contextual de la tabla y a través
del menú Modificar.

Tienes que tener en cuenta que sólo es posible combinar celdas contiguas, cuya combinación pueda dar como
resultado otra celda, es decir, que su combinación dé como resultado un recuadro. Por ejemplo, en la siguiente tabla
no podrían combinarse las celdas 1 y 4, ni las celdas 1, 2 y 3, porque dichas combinaciones no dan como resultado
una celda.
1 2
3 4

Para dividir una celda hay que pulsar sobre el botón del inspector de propiedades, o sobre la opción
Dividir celda de la opción Tabla.

En ambos casos, aparece una ventana como ésta, en la que hay que especificar si la celda se va a dividir en filas
o columnas, y el número de éstas.

Para practicar puedes realizar el Ejercicio paso a paso Combinar celdas.

Pág. 7.4
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.

http://www.aulaclic.es/dreamweavercs3/t_7_4.htm (3 de 3) [10/02/2008 19:58:23]


Curso de Adobe Dreamweaver CS3. Tema 7. Tablas

Unidad 7. Tablas (V) Búsqueda

Modos de tabla

A la hora de trabajar con tablas Dreamweaver nos proporciona distintos modos de visualización. Nosotros
hemos trabajado en todo el tema con el modo estándar, y vamos a seguir trabajando con él, pero se puede pasar a
los otros modos a través del menú Ver opción Modo de tabla. Dentro de esta opción podemos elegir entre
Modo estándar, Modo de tablas expandidas, o modo de diseño.

El Modo de diseño se utiliza para dibujar páginas con un diseño determinado, basándose en tablas. Utilizando
esta vista, las tablas no han de insertarse obligatoriamente en líneas de texto, como hemos hecho hasta el
momento, sino que es posible insertarlas en cualquier punto de la página, y Dreamweaver se encargará de rellenar
el espacio vacío, para que sea posible que la tabla aparezca en esa posición.

El Modo de tablas expandidas añade temporalmente relleno y espaciado de celda a las tablas de un documento
y aumenta los bordes de las tablas para facilitar la edición. Este modo se puede utilizar para seleccionar elementos
de las tablas o colocar el punto de inserción de forma precisa pero en este modo no vemos la página como
quedará exactamente.

En este curso nos limitaremos al modo estándar.

Adaptar webs a distintas resoluciones

Siempre que se crea una página web hay que tener en cuenta que va a ser visitada por usuarios con monitores
de distintos tamaños y con distintas resoluciones.

Es imposible hacer que una página se vea exactamente igual en todos los monitores de los usuarios que la visitan,
pero hay que intentar que su visualización sea lo más parecida posible.

La resolución usada de forma más frecuente es la de 800x600, por lo que inicialmente habría que diseñar la página
para dicha resolución. Es decir, habría que crear la página en un monitor con dicha resolución, para poder
visualizar claramente cómo queda en el navegador, y distribuir el contenido de la página de la forma más adecuada.

Normalmente se utilizan tablas, ya que resultan muy útiles para distribuir el contenido de la página.

Como recordarás, el tamaño de las tablas puede ser definido en píxeles o en porcentaje. Cuando el tamaño de la
tabla sea definido en píxeles, la tabla se verá del mismo modo independientemente del tamaño de la ventana
del navegador. En cambio, cuando el tamaño de la tabla sea definido en porcentaje, la tabla se ajustará al tamaño de
la ventana del navegador, lo cual implica que el contenido de la tabla se descuadrará.

http://www.aulaclic.es/dreamweavercs3/t_7_5.htm (1 de 2) [10/02/2008 19:58:32]


Curso de Adobe Dreamweaver CS3. Tema 7. Tablas

Pulsa aquí para ver una página con tablas de tamaño fijo, en píxeles. Imagina que la página ha sido diseñada
para visualizarse correctamente en un monitor pequeño de baja resolución, cuyo tamaño equivale al de la ventana
del navegador que se ha abierto.

Si modificas el tamaño de la ventana, verás que las tablas son siempre del mismo tamaño. Esto tiene un
gran inconveniente, ya que si maximizas la ventana del navegador (lo que equivaldría a visualizar la página en
un monitor grande con alta resolución), a la derecha de las tablas aparecerá un gran hueco vacío.

Pulsa aquí para ver una página con tablas de tamaño variable, en porcentaje.

Si modificas el tamaño de la ventana, verás que las tablas se ajustan a ella. Usar tablas con tamaño variable
tiene también un gran inconveniente, ya que si maximizas la ventana del navegador apreciarás claramente cómo
el contenido de las tablas se descuadra.

En un principio puede parecer más conveniente utilizar tablas con tamaño fijo, aunque esto implique que aparezca
el hueco vacío a la derecha, en el caso de los monitores con alta resolución. Pero con un poco de práctica a la hora
de manejar las tablas, puedes salvar el inconveniente del descuadre de la página y así definir páginas con tamaño
en porcentaje que aprovechen el ancho cuando el monitor de más grande.

No solo puede establecerse el tamaño de la tabla, también es posible establecer el tamaño de las celdas.

El tamaño de la celda a través del inspector de propiedades estará especificado por los valores de An (anchura) y
Al (altura). Normalmente solo se especifica la anchura, no la altura.

Los valores An y Al de una celda siempre están en Píxeles. En la imagen anterior, la celda tiene una anchura de
208 píxeles. Para que, por ejemplo, la anchura fuera del 25 por ciento de la tabla, en An habría que escribir 25%.

Jugando con las medidas de las celdas de la tabla, y teniendo en cuenta qué contiene cada una de ellas (imágenes,
texto alineado a la derecha, texto alineado a la izquierda, texto de gran tamaño, etc.), puede conseguirse que al
visualizar la página en monitores de distintos tamaños y con distintas resoluciones, la apariencia sea bastante similar,
o al menos que la distribución del contenido de la página no se vea muy afectado por el cambio de tamaño de la
ventana del navegador.

Ejercicios del Tema 7. Prueba evaluativa del Tema 7.

Pág. 7.5
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.

http://www.aulaclic.es/dreamweavercs3/t_7_5.htm (2 de 2) [10/02/2008 19:58:32]


Curso de Adobe Dreamweaver CS3. Tema 8. Marcos

Unidad 8. Marcos (II) Búsqueda

Seleccionar marcos

Para seleccionar los marcos del documento es necesario dirigirse al panel Marcos, que puede abrirse a través del
menú Ventana. Si la opción Marcos no te aparece directamente en este menú, posiblemente esté dentro de la
opción Otros. También puedes abrir el panel Marcos pulsando la combinación de teclas Mayús+F2.

En el panel Marcos aparecen los marcos que contiene el documento de marcos, y se puede pasar de uno a
otro pulsando sobre ellos en el panel. También puede seleccionarse la página de marcos pulsando sobre el borde
que rodea a los marcos (el que aparece más grueso y en relieve en la imagen).

No es necesario seleccionar los marcos para editar los documentos que éstos contengan.

Sí es necesario seleccionar los marcos para especificar las propiedades específicas de cada uno de ellos.

Guardar

Todos los documentos que contienen marcos tienen que tener una página en cada uno de ellos. Es por esto que al
crear algún marco, se cargan páginas nuevas por defecto en cada uno de ellos, a excepción del marco que contiene
la página original.

Estas páginas nuevas pueden ser posteriormente sustituidas por otras ya existentes, como ya veremos más adelante.

Es necesario guardar la página que contiene el grupo de marcos, así como cada una de las páginas que están
incluidas en sus marcos.

No es conveniente guardar la primera vez los marcos con la opción Guardar todo , ya que podemos equivocarnos
al dar los nombres a los nuevos documentos.

Es preferible guardar cada documento uno por uno, a no ser que todos los marcos contengan alguna página ya
existente, ya que en ese caso el único documento al que habrá que dar nombre será al que contiene el grupo de marcos.

Para guardar el documento que contiene el grupo de marcos, hay que seleccionarlo previamente.

Para guardar cada uno de los otros documentos, simplemente hay que situar el cursor en ellos antes de pulsar
sobre Guardar .

Configurar marcos

http://www.aulaclic.es/dreamweavercs3/t_8_2.htm (1 de 2) [10/02/2008 19:58:39]


Curso de Adobe Dreamweaver CS3. Tema 8. Marcos

Una vez seleccionado un marco a través del panel Marcos, pueden establecerse sus propiedades a través del
inspector de propiedades.

Cada marco tiene asignado un nombre, que puede cambiarse a través de Nombre de marco. El nombre no
puede contener espacios en blanco.

En Origen aparece el nombre del documento HTML que está contenido en el marco.

En Bordes puede elegirse si aparecerá o no una línea separando el marco del resto de marcos. En el caso de que
se muestre el borde, se puede especificar un color para éste a través de Color borde.

Desplaz. indica si aparecerán o no las barras de desplazamiento cuando el documento del marco no pueda
visualizarse completamente.

Si la opción Mismo tamaño está activa, indica que los usuarios no podrán variar las medidas del marco desde
el navegador.

El Ancho del margen y el Alto del margen indican la separación que habrá entre el contenido del marco y sus
bordes izquierdo-derecho y superior-inferior.

Si lo seleccionado es todo el conjunto de marcos (la página de marcos), el inspector de propiedades es algo diferente.

En Bordes puede elegirse si aparecerá o no una línea separando los marcos entre sí y puede especificarse un color
para este a través de Color del borde. También es posible establecer un grosor para el borde a través de Ancho.

El campo Columna (o Fila dependiendo del marco elegido en Selección Fila Col.) sirve para especificar el tamaño
del marco, que puede ser en Píxeles, Porcentaje (de la ventana) o Relativo (proporcional al resto de marcos).

Normalmente utilizarás dos marcos, uno de ellos con tamaño en Píxeles, que será el que contenga la barra
de navegación, y el otro marco con tamaño Relativo, para que se ajuste a la ventana del navegante.

Pág. 8.2
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.

http://www.aulaclic.es/dreamweavercs3/t_8_2.htm (2 de 2) [10/02/2008 19:58:39]


Curso de Adobe Dreamweaver CS3. Tema 8. Marcos

Unidad 8. Marcos (III) Búsqueda

Contenido del marco

Como ya has visto, el contenido de un marco puede establecerse a través del campo Origen del inspector
de propiedades.

Cuando trabajamos con marcos, queremos poder cargar diferentes documentos en cada uno de ellos. El contenido
de alguno de los marcos ha de ser fijo, mientras que el de otros ha de poder variar.

A través del campo Origen del inspector de propiedades, sólo es posible especificar el documento que se
cargará inicialmente en el marco, pero hemos de poder cambiar este documento por otro a través de vínculos.

Como recordarás, en el tema de hipervínculos vimos los posibles destinos de los enlaces. Estos destinos podían
ser _blank, _parent, _self, y _top. Vamos a recordar para que servía cada uno de ellos, ya que ahora que ya
sabes trabajar con marcos te serán más fáciles de entender.

_blank:

Abre el documento vinculado en una ventana nueva del navegador.

_parent:

Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de marcos padre.
Como ya sabes, el marco padre es el marco en el que se encuentra el documento inicial, sobre el que se han
insertado el resto de marcos.

_self:

Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vínculo.

_top:

Abre el documento vinculado en la ventana completa del navegador, lo cual quiere decir que los marcos de la
ventana desaparecerán al abrir el vínculo en ella.

http://www.aulaclic.es/dreamweavercs3/t_8_3.htm (1 de 2) [10/02/2008 19:58:48]


Curso de Adobe Dreamweaver CS3. Tema 8. Marcos

Además de estos destinos para los enlaces, también aparecerán los nombres de los distintos marcos de la página.

Podemos añadir todos estos destinos a cualquier elemento de la página que contenga algún enlace, ya sea texto,
una imagen, un mapa de imagen, un elemento Flash, etc.

Gracias a todo esto podremos hacer que las barras de navegación y el resto de enlaces funcionen a nuestro
antojo, cargando unas u otras páginas en alguno de los marcos, en una ventana nueva, en toda la ventana, etc.

Esta tarea puede resultar algo pesada, y al principio complicada, pero da muy buenos resultados finales.

Para practicar puedes realizar el Ejercicio paso a paso Crear y configurar marcos.

Ejercicios del Tema 8. Prueba evaluativa del Tema 8.

Pág. 8.3
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.

http://www.aulaclic.es/dreamweavercs3/t_8_3.htm (2 de 2) [10/02/2008 19:58:48]


Curso de Adobe Dreamweaver CS3. Tema 9. Formularios

Unidad 9. Formularios (II) Búsqueda

Crear formularios

Puedes crear formularios a través del menú Insertar, opción Formulario.

Una vez creado un formulario, este aparecerá en la ventana de Dreamweaver como un recuadro formado por líneas
rojas discontinuas, similar al de la imagen de la derecha.

Dentro de dicho formulario se podrán insertar los elementos de formulario, que como ya sabes puedes insertar a
través del menú Insertar, opción Formulario.

Es muy recomendable utilizar tablas para organizar los elementos de los formularios. Utilizando tablas se consigue
una mejor distribución de los elementos del formulario, lo que facilita su comprensión y mejora su apariencia.

Validar formularios

La validación de formularios sirve para hacer que Javascript valide el formulario antes de que se envíe el formulario,
para que en el caso de que hayan campos del formulario que sean obligatorios, tengan que rellenarse antes de
poder enviarse.

Para validar un formulario hay que abrir el panel de Comportamientos. Este panel se puede abrir a través del
menú Ventana, opción Comportamientos, o pulsando Mayús+F3.

En este panel hay que desplegar el botón y pulsar sobre la opción Validar formulario, deberás haber
seleccionado el formulario previamente.

Entonces se mostrará una ventana como la siguiente, donde aparecen todos los elementos del formulario.

http://www.aulaclic.es/dreamweavercs3/t_9_2.htm (1 de 2) [10/02/2008 19:59:00]


Curso de Adobe Dreamweaver CS3. Tema 9. Formularios

Puede seleccionarse uno por uno cada elemento del formulario, pudiendo especificar los requisitos que ha de cumplir.

Puede establecerse como campo a rellenar obligatoriamente (Valor Obligatorio), y si su contenido ha de ser
numérico (Número), una Dirección de correo electrónico, etc.

Para practicar puedes realizar el Ejercicio paso a paso Insertar elementos de formulario.

Ejercicios del Tema 9. Prueba evaluativa del Tema 9.

Pág. 9.2
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.

http://www.aulaclic.es/dreamweavercs3/t_9_2.htm (2 de 2) [10/02/2008 19:59:00]


Curso de Adobe Dreamweaver CS3. Tema 10 Multimedia

Unidad 10. Multimedia (II) Búsqueda

Vídeos

En ocasiones puede interesar incluir algún vídeo en una página web, pero hay que tener en cuenta que los vídeos
suelen ocupar mucho espacio en disco, y por lo tanto, precisan de mucho tiempo para descargarse.

Los formatos de vídeo que suelen utilizarse en Internet son el AVI, el MPEG y el MOV.

Para insertar un archivo de vídeo 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 vídeo, para el que se muestran los controles de vídeo.
Puedes reproducirlo pulsando sobre los controles.

El inspector de propiedades para los archivos de vídeo insertados de esta forma es el mismo que el de los archivos
de audio, ya que ambos se insertan como Plug-in.

Los vídeos también se reproducen automáticamente al cargarse la página, y se reproducen solamente una vez.
Estos valores pueden cambiarse a través del código, del mismo modo que en el caso de los archivos de
audio, añadiendo autostart="false" y loop="true".

Todos los objetos insertados a través de la opción Plug-in precisan que el usuario tenga instalado un reproductor o
un plug-in apropiado para reproducirlos. En el campo Origen del inspector de propiedades se establece el
archivo vinculado (el archivo de audio o de vídeo) que ha de reproducirse.

En el caso de que el usuario no tenga instalado ningún plug-in adecuado, puede establecerse en el campo URL plg
una página en la que pueda encontrarlo.

Para practicar puedes realizar el Ejercicio paso a paso Insertar un archivo de audio.

http://www.aulaclic.es/dreamweavercs3/t_10_2.htm (1 de 2) [10/02/2008 19:59:08]


Curso de Adobe Dreamweaver CS3. Tema 10 Multimedia

Ejercicios del Tema 10. Prueba evaluativa del Tema 10.

Pág. 10.2
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.

http://www.aulaclic.es/dreamweavercs3/t_10_2.htm (2 de 2) [10/02/2008 19:59:08]


Curso de Adobe Dreamweaver CS3. Tema 11. Las plantillas

Unidad 11. Las plantillas (II) Búsqueda

Establecer regiones editables en una plantilla

Todos los elementos de una plantilla están bloqueados por defecto, no se pueden modificar.

Es necesario establecer las zonas que sí podrán ser editadas en las páginas que se basen en dicha plantilla.

Para editar una plantilla hay que abrirla en Dreamweaver. Una forma de abrirla es a través del panel Activos,
pulsando dos veces sobre ella, o estando seleccionada pulsando sobre el botón como ya hemos visto.

Una vez abierta la plantilla es posible establecer sus propiedades a través de la ventana Propiedades de la página.

Como recordarás, para abrir esta ventana puedes:

Pulsar la combinación de teclas Ctrl+J.

Hacer clic sobre el menú Modificar y elegir la opción Propiedades de la página.

Pulsar con el botón derecho sobre el documento abierto en Dreamweaver, y en el menú contextual que
aparece seleccionar la opción Propiedades de la página.

Para insertar una región editable hay que situar el puntero en el lugar en el que se desea insertar, y
después dirigirse al menú Insertar, Objetos de plantilla, opción Región editable, o pulsar la
combinación de teclas Ctrl+Alt+V.

En la nueva ventana hay que establecer un Nombre para la región editable.

Dentro de la plantilla no pueden existir dos regiones editables con el mismo nombre.

Posteriormente puede modificarse el nombre a través del inspector de propiedades de la región


editable.

La zonas editables aparecen representadas en Dreamweaver como un recuadro con una etiqueta de color turquesa.
En la etiqueta aparece el nombre de la zona editable.

Dentro del recuadro es posible insertar objetos, que aparecerán por defecto en aquellos documentos que se basen en
la plantilla. Estos objetos, al estar dentro de la zona editable, podrán ser modificados en las páginas.

Todos los objetos que se encuentren fuera de estas zonas editables aparecerán también en las páginas, pero no
podrán ser modificados.

En este caso, la imagen con el logotipo de aulaclic aparecería en todas las páginas que se basaran en esta
plantilla, mientras que todo lo que insertáramos dentro de la zona editable FormularioCorreoElectronico podría
ser modificado.

http://www.aulaclic.es/dreamweavercs3/t_11_2.htm (1 de 2) [10/02/2008 19:59:14]


Curso de Adobe Dreamweaver CS3. Tema 11. Las plantillas

Pág. 11.2
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.

http://www.aulaclic.es/dreamweavercs3/t_11_2.htm (2 de 2) [10/02/2008 19:59:14]


Curso de Adobe Dreamweaver CS3. Tema 11. Las plantillas

Unidad 11. Las plantillas (III) Búsqueda

Basar páginas en una plantilla

El uso de las plantillas puede resultar un poco complicado al principio. Vamos a ver cómo basar una página vacía en
una plantilla, ya que por el hecho de estar vacía resulta más sencillo.

Una vez abierto el documento, hay que dirigirse al menú Modificar, Plantillas, opción Aplicar plantilla a página.

Es preferible que antes de hacer esto nos aseguremos de que el sitio que se encuentra abierto en Dreamweaver
es el mismo en el que vamos a guardar el documento, y el mismo en el que se encuentra la plantilla en la que
queremos basarlo.

Después de pulsar sobre la opción Aplicar plantilla a página aparece una ventana como la de la derecha, en la
que hay que seleccionar una de las plantillas de la lista Plantillas: del sitio.

Es recomendable activar la casilla Actualizar página cuando cambie la plantilla, para que la página se actualice
automáticamente en el caso de modificar la plantilla en la que se basa.

A pesar de estar trabajando sobre un documento vacío, es posible que al aplicar la plantilla aparezcan nombres
de regiones no coincidentes entre el documento en blanco y la plantilla. En ese caso se muestra una ventana como
la siguiente.

http://www.aulaclic.es/dreamweavercs3/t_11_3.htm (1 de 3) [10/02/2008 19:59:22]


Curso de Adobe Dreamweaver CS3. Tema 11. Las plantillas

En ella hay que establecer una correspondencia entre el nombre de la región del documento vacío con el nombre
de alguna región de la plantilla.

En este ejemplo, la región del documento vacío que no coincidía con el nombre de ninguna región de la plantilla era
la región Document body.

A través de Mover contenido a la nueva región: se puede seleccionar una región de la plantilla, para establecer así
la correspondencia que se necesitaba.

Después de establecer las correspondencias necesarias, se carga la plantilla en el documento vacío.

http://www.aulaclic.es/dreamweavercs3/t_11_3.htm (2 de 3) [10/02/2008 19:59:22]


Curso de Adobe Dreamweaver CS3. Tema 11. Las plantillas

En este caso no es posible cambiar el color de fondo, que está definido en la plantilla, pero sí es posible cambiar
todos los elementos de la tabla y el formulario, ya que se encuentran dentro de una zona definida en la plantilla
como editable.

En este caso se podría cambiar el estilo del texto, el color de las celdas, combinarlas, etc.

Para que una página deje de estar basada en una plantilla hay que dirigirse al menú Modificar, Plantillas,
opción Separar de plantilla.

Cuando se separa una página de una plantilla, el contenido de la página sigue siendo el mismo que el que tenía
cuando aún estaba basada en la plantilla, pero sin las restricciones establecidas por la plantilla.

Para practicar los distintos aspectos explicados en el tema puedes realizar el Ejercicio paso a paso Crear una plantilla.

Ejercicios del Tema 11. Prueba evaluativa del Tema 11.

Pág. 11.3
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.

http://www.aulaclic.es/dreamweavercs3/t_11_3.htm (3 de 3) [10/02/2008 19:59:22]


Curso de Adobe Dreamweaver CS3. Tema 21. Cómo crear un Blog

Unidad 21. Cómo crear un Blog (II) Búsqueda

Interfaz pública

Una vez creada la estructura podemos empezar a crear las páginas que mostrarán la información almacenada en ella.

En este caso, los pasos a seguir serán muy parecidos a los que vimos en el tema anterior.

En principio, la página más importante será el índice. Allí deberemos mostrar un listado de un número determinado
de entradas.

Esto, como ya hemos visto, es muy fácil de conseguir, aunque ahora es posible que necesitemos mostrar mucha
más información.

Veamos un ejemplo de entrada:

Como puedes ver, incluimos el título, texto y fecha de la entrada. Eso es muy sencillo porque pertenece todo a
una misma tabla.

Pero deberemos incluir también un recuento de los comentarios asociados a esa entrada y el nombre de
la categoría a la que pertenece.

¿Cómo lograremos esto? Tendremos que utilizar sentencias de SQL avanzadas.

En los ejercicios paso a paso encontrarás la sentencia que te servirá para este ejemplo en particular. Podrás variarla
un poco en función de tus necesidades, pero te volvemos a repetir que si quieres crear juegos de registros
más complejos deberás aprender SQL , llegados a este punto no te será muy complicado.

http://www.aulaclic.es/dreamweavercs3/t_21_2.htm (1 de 3) [10/02/2008 19:59:33]


Curso de Adobe Dreamweaver CS3. Tema 21. Cómo crear un Blog

También será necesaria una página que muestre las entradas filtradas por categoría. Ten en cuenta que
nuestro visitante querrá seguramente ver aquellas entradas pertenecientes a un tema en particular. De hecho para
eso hemos creado el menú de salto desplegable y los enlaces en cada una de las entradas.

Esta página deberá ser prácticamente igual que el índice, por lo que la sentencia SQL será prácticamente la misma.

Finalmente deberemos incluir una página que muestre los comentarios de cada entrada en particular y que a su
vez permita añadir nuevos.

Esta tarea no es muy complicada porque simplemente deberemos pasarle un parámetro que indique el ID de la entrada
y mostrar los comentarios asociados a ella.

Puedes utilizar el asistente Insertar registros para crear el formulario de entrada de comentarios.

Para practicar la creación de la interfaz pública realiza el Ejercicio Paso a Paso de Interfaz pública.

Interfaz privada

Ahora es cuando viene la parte más laboriosa, pero que tampoco es muy complicada.

Deberemos crear la parte de administración del sitio.

Cuando tenemos un blog es mucho más cómodo poder acceder a la información y poder modificarla y eliminarla
a través de una interfaz web.

Resultaría más engorroso tener que entrar cada vez a la base de datos del servidor para insertar una nueva entrada
o modificar las existentes.

Además, crear nosotros mismos las páginas de administración nos da la libertad de crear las opciones que queramos
y de la forma en que nos sea más cómoda.

Así que nuestro primer paso será crear un índice de administración que nos muestre las opciones a las que
podemos acceder:

http://www.aulaclic.es/dreamweavercs3/t_21_2.htm (2 de 3) [10/02/2008 19:59:33]


Curso de Adobe Dreamweaver CS3. Tema 21. Cómo crear un Blog

En nuestro caso hemos decidido crear el menú más sencillo posible, incluye dos grupos: la creación de
nuevos elementos y la modificación (o borrado) de los ya existentes.

Para practicar realiza el Ejercicio Paso a Paso de Creación de un Menú de Administración.

Pág. 21.2
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.

http://www.aulaclic.es/dreamweavercs3/t_21_2.htm (3 de 3) [10/02/2008 19:59:33]


Curso de Adobe Dreamweaver CS3. Tema 21. Cómo crear un Blog

Unidad 21. Cómo crear un Blog (III) Búsqueda

Insertar nuevos elementos

Lo más sencillo de realizar será crear las dos páginas que nos ayudarán a crear registros.

Crear un formulario de nueva categoría sólo nos obligaría a insertar un nuevo nombre de categoría para crear un
nuevo registro.

El campo Id de la tabla, al ser autonumérico, no deberá aparecer en el formulario porque se rellenará automáticamente.

Un poco más complicado será el formulario de creación de entradas.

Veamos un ejemplo:

En principio los campos de entrada serán tal cual los que nos ofrece el asistente Insertar registro.

Deberemos tener cuidado en que el campo Fecha: se envíe como de tipo fecha.

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


Curso de Adobe Dreamweaver CS3. Tema 21. Cómo crear un Blog

La dificultad la encontraremos en el desplegable Categoría:.

Deberemos cargar un recordset a parte donde sacaremos el listado de categorías con sus Id correspondientes.

Deberemos editar el campo desplegable de forma que el valor que se guarde sea el valor del Id, mientras muestra
el nombre de la categoría.

Para practicar realiza el Ejercicio Paso a Paso de Inserción de elementos.

Pág. 21.3
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.

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


Curso de Adobe Dreamweaver CS3. Tema 21. Cómo crear un Blog

Unidad 21. Cómo crear un Blog (IV) Búsqueda

Listado de elementos

Luego deberemos crear las páginas que se ocuparán de modificar los elementos del blog, ya sean categorías,
entradas o comentarios.

Esta parte deberemos planificarla adecuadamente para evitar crear páginas redundantes.

Lo más sencillo es crear una página que muestre un listado de los elementos que se encuentran en la base de datos
con enlaces creados para eliminar o modificar el registro que prefieras:

De esta forma el trabajo se reducirá a crear un listado completo de los registros de las tablas y crear enlaces
pasando como parámetro el ID del registro.

Este enlace irá dirigido a la página con la función de borrar o modificar (según cuál eligas) donde se recogerá
el parámetro de ID que utilizaremos para filtrar el recordset.

Quizás la página más complicada, debido a su extensión, sea la que deba mostrar el listado de comentarios.

Para ella, la forma más práctica sería poder localizar la entrada donde se encuentra el comentario y luego mostrar
el listado completo de los comentarios de esa entrada en concreto.

Puedes crear dos páginas para ello, aunque si lo resumimos en una única, la estructura del sitio se benificiará al
quedar más claro qué hace cada página.

Nota: Puedes incluir campos de búsqueda como hicimos en el ejercicio de Librería del tema anterior. Bastará con
que apliques los mismos procedimientos.

Para practicar realiza el Ejercicio Paso a Paso de Listado de elementos.

http://www.aulaclic.es/dreamweavercs3/t_21_4.htm (1 de 2) [10/02/2008 19:59:48]


Curso de Adobe Dreamweaver CS3. Tema 21. Cómo crear un Blog

Modificación de elementos

Las páginas de modificación de elementos deberán recoger el parámetro que envíe el listado.

De este modo, filtraremos el recordset y podremos mostrar la información de la entrada, categoría o comentario
que queramos modificar.

Es aconsejable que muestres el contenido del elemento para que antes de modificarlo tengas una vista total de él
y veas mejor qué quieres hacer en él.

El resto es sencillo, utiliza el asistente Actualizar registro y seguro que no encontrarás muchas más complicaciones.

De nuevo en el caso de la página de modificación de entrada deberemos tener especial cuidado en enviar la fecha
como tal y de mostrar los nombres de categoría en un desplegable:

Sigue con el Ejercicio Paso a Paso de Modificación de elementos.

Eliminación de elementos

Para terminar con las páginas de administración deberemos crear las páginas que recogerán el parámetro del listado
y eliminarán el elemento.

En este caso es casi indispensable que muestres el contenido del registro junto con un botón de Eliminar.

De esta forma le estaremos pidiendo confirmación al usuario y nos aseguraremos de que el registro que estamos
a punto de borrar es el que hay que borrar.

Nota: Sigue los pasos que explicamos en el tema anterior y no tendrás ningún problema.

Practica realizando el Ejercicio Paso a Paso de Eliminación de elementos.

Pág. 21.4
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.

http://www.aulaclic.es/dreamweavercs3/t_21_4.htm (2 de 2) [10/02/2008 19:59:48]


Curso de Adobe Dreamweaver CS3. Tema 21. Cómo crear un Blog

Unidad 21. Cómo crear un Blog (V) Búsqueda

Restringir acceso

Como has visto hemos creado dos zonas completamente independientes en nuestro sitio: la interfaz pública
donde mostramos el contenido del blog, y la interfaz privada desde donde podemos acceder a las opciones
de administración de la base de datos.

Naturalmente, queremos que la parte privada no sea accesible por cualquiera. Únicamente nosotros y aquellas
personas autorizadas deberán poder ver las páginas de administración que hemos creado.

Es por eso que en el apartado de Estructura de datos creamos la tabla usuarios.

En la barra de Datos encontramos esta opción que aún no hemos utilizado:

Podemos utilizar estas páginas para crear niveles de seguridad dentro de nuestro sitio.

Restringiendo la visualización de ciertas páginas a usuarios que almacenaremos en nuestra base de datos y
que necesitarán introducir una contraseña para verificar su identidad.

El primer paso será crear una página de acceso en la que requeriremos que el usuario introduzca su nombre
y contraseña para que podamos validarla.

Para ello deberemos crear un formulario en el que colocaremos dos campos, uno para el nombre y otro para
la contraseña.

Crea un botón que active el formulario y selecciona la opción Conectar a usuario en el desplegable de la imagen.

Se abrirá este cuadro de diálogo:

http://www.aulaclic.es/dreamweavercs3/t_21_5.htm (1 de 3) [10/02/2008 19:59:56]


Curso de Adobe Dreamweaver CS3. Tema 21. Cómo crear un Blog

Aquí deberemos establecer la configuración de conexión a la zona privada.

Deberemos indicar en la opción Obtener entrada de formulario el nombre que tiene el formulario que hemos creado.

En el Campo Nombre de usuario deberemos indicar cuál de las dos cajas de texto del formulario contendrá el
Nombre de usuario.

En el Campo Contraseña seleccionaremos la caja de texto que contendrá la Contraseña.

Luego estableceremos las opciones para la comunicación con la base de datos.

Deberemos indicar la Conexión y Tabla que vamos a utilizar para validar la entrada del usuario.

En Columna Nombre de usuario indica cuál es el nombre del campo de la tabla que guarda los nombres de usuario.

En Columna Contraseña selecciona el campo que guarda en la tabla las contraseñas.

En la siguiente sección deberás establecer a qué página redirigirás si el usuario y contraseña son
correctos rellenando el campo Si la conexión es correcta, ir a:.

En Si falla la conexión, ir a escribirás la URL de la página a la que se deberá redirigir si la entrada fue
incorrecta. Sería por ejemplo un página de error.

Marca la casilla Ir a URL anterior (si existe) si en ambos casos la redirección es a la misma página.

Finalmente podrás escoger entre utilizar diferentes niveles de acceso o no.

http://www.aulaclic.es/dreamweavercs3/t_21_5.htm (2 de 3) [10/02/2008 19:59:56]


Curso de Adobe Dreamweaver CS3. Tema 21. Cómo crear un Blog

Para ello deberás seleccionar una de las dos opciones en el cuadro Restringir acceso por:.

Ten en cuenta que si decides crear varios niveles deberás añadir un campo a la tabla para que almacene el nivel de
cada usuario. Este campo será el que indicaremos en el desplegable Obtener nivel de:.

Una vez hayas rellenado todos los datos, pulsa Aceptar y se añadirá el código ncesario a la página.

Nota: El método que utiliza Dreamweaver para recordar la entrada del usuario hasta su desconexión utiliza cookies.
Así que si tu navegador o el navegador del usuario las tiene deshabilitadas esté código no podrá realizar su función.

Pág. 21.5
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.

http://www.aulaclic.es/dreamweavercs3/t_21_5.htm (3 de 3) [10/02/2008 19:59:56]


Curso de Adobe Dreamweaver CS3. Tema 22. XML y RSS

Unidad 22. XML y RSS (II) Búsqueda

Importar datos de un Archivo externo

Para poder mostrar los datos almacenados en un archivo XML o RSS externo deberemos crear un archivo XSLT.

Los archivos XSLT transforman y formatean la información para que pueda ser visualizada correctamente en
un navegador.

El primer paso para importar la información de un archivo será abrir un nuevo documento (Archivo → Nuevo).

Puedes elegir entre crear un fragmento de archivo (que incluiremos más tarde en otro), o directamente crear una
página completa que contenga información sobre un archivo externo.

Normalmente nos será más útil crear fragmentos, pues luego son más fáciles de adaptar al resto de las páginas.

Se abrirá el siguiente cuadro de diálogo:

http://www.aulaclic.es/dreamweavercs3/t_22_2.htm (1 de 3) [10/02/2008 20:00:01]


Curso de Adobe Dreamweaver CS3. Tema 22. XML y RSS

Aquí deberemos indicar la fuente XML de la que queramos sacar los datos.

Como ves en la imagen, tienes dos posibilidades. Una de ellas es tomar el archivo XML o RSS directamente del
mismo sitio donde se encuentra la página.

La segunda opción toma el archivo de una URL en Internet. En este caso deberás asegurarte de cuando en cuando
que sigue vigente y no ha sido cambiado de lugar.

Cuando aceptemos el cuadro de diálogo verás que en el panel Vinculaciones (CTRL + F10) aparece la estructura
del archivo:

Habitualmente los archivos liberados por los diferentes sitios en Internet suelen tener una estructura muy similar, por
lo que siempre tienen al principio del canal (así es como llaman al archivo liberado, channel en inglés) una
breve descripción de su sitio.

En este caso puedes ver como pende del elemento channel un título (title), un enlace (link), una descripción y el
lenguaje y a continuación el contenido propiamente dicho bajo el elemento item.

Nuestra forma de actuar una vez hayamos declarado la fuente XML y seamos capaces de ver su contenido en el
panel Vinculaciones será muy parecida a como lo hacíamos cuando creabamos un juego de registros de una base
de datos.

Simplemente tendremos que arrastrar el elemento que queremos que se muestre a la página y se visualizará.

http://www.aulaclic.es/dreamweavercs3/t_22_2.htm (2 de 3) [10/02/2008 20:00:01]


Curso de Adobe Dreamweaver CS3. Tema 22. XML y RSS

Recuerda que para acceder a una visualización de la página deberás pulsar la tecla F12. En este caso no
tendremos vista de LiveData.

Para comenzar a importar datos desde un archivo externo realiza el Ejercicio Paso a Paso de Importar datos.

Pág. 22.2
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.

http://www.aulaclic.es/dreamweavercs3/t_22_2.htm (3 de 3) [10/02/2008 20:00:01]


Curso de Adobe Dreamweaver CS3. Tema 22. XML y RSS

Unidad 22. XML y RSS (III) Búsqueda

Trabajar con elementos XML

Una vez hayamos insertado los elementos del archivo XML podremos tratarlos de forma similar a como lo hacíamos en
el tema anterior.

La única diferencia que encontrarás es que no podrás crear enlaces arrastrando los elementos al atributo href del ancla.

Para ello necesitarás hacer clic en el icono que aparece junto al campo Vínculo en el panel Propiedades
y seleccionar Fuentes de datos en el cuadro de diálogo Seleccionar archivo:

http://www.aulaclic.es/dreamweavercs3/t_22_3.htm (1 de 4) [10/02/2008 20:00:11]


Curso de Adobe Dreamweaver CS3. Tema 22. XML y RSS

Para practicar realiza el Ejercicio Paso a Paso de Enlaces con elementos.

En la barra Aplicación encontrarás una nueva pestaña llamada XSLT:

El primer botón nos permitirá añadir Texto dinámico, esta opción actúa del mismo modo que si arrastramos el
elemento desde el panel Vinculaciones a la página.

Luego encontraremos elementos de bucle o repetición y condicionales.

Crear repeticiones

Para crear una repetición que recorra todos los registros existentes en un archivo RSS deberemos utilizar el
botón Repetir Región .

Simplemente selecciona los elementos a repetir y pulsa el botón.

Se abrirá el siguiente cuadro de diálogo:

Aquí deberás seleccionar el elemento sobre el cual quieres que se produzca la repetición.

En el caso del ejemplo que estamos siguiendo en estas imágenes deberemos seleccionar item, pues querremos que
se repitan todos los elementos title y description que se encuentren en item.

http://www.aulaclic.es/dreamweavercs3/t_22_3.htm (2 de 4) [10/02/2008 20:00:11]


Curso de Adobe Dreamweaver CS3. Tema 22. XML y RSS

También podemos insertar filtros haciendo clic en la flecha que acompaña al texto Construir filtro:

Utiliza los botones que se encuentran en el cuadro de diálogo para añadir condiciones a la repetición.

En la imagen podemos ver que el filtro se realiza conforme al item, donde el título debe ser distinto (!=) a
"Wikipedia, la enciclopedia libre".

¿Qué significa esto? Estamos repitiendo una región y obviando aquel item que posea un título determinado.

También sería posible filtrar para que sólo se muestren un número determinado de items. Para ello
utilizaremos position() que recupera la posición del elemento dentro del listado:

http://www.aulaclic.es/dreamweavercs3/t_22_3.htm (3 de 4) [10/02/2008 20:00:11]


Curso de Adobe Dreamweaver CS3. Tema 22. XML y RSS

En este caso el filtro que hemos añadido hace que sólo se muestren los 5 primeros elementos.

Sencillo, ¿verdad?

Para practicar estos conceptos realiza el Ejercicio Paso a Paso de Repetición de elementos.

Pág. 22.3
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.

http://www.aulaclic.es/dreamweavercs3/t_22_3.htm (4 de 4) [10/02/2008 20:00:11]


Curso de Adobe Dreamweaver CS3. Tema 22. XML y RSS

Unidad 22. XML y RSS (IV) Búsqueda

Ordenar elementos

Ordenar elementos en Dreamweaver no es muy sencillo.

Pero como es una tarea que realizaremos a menudo explicaremos rápidamente cómo conseguirlo.

Sólo es posible ordenar elementos que se encuentren dentro de una región repetida.

Por lo que deberemos buscar en la vista de Código la zona que se encarga de la repetición:

<xsl:for-each select="rss/channel/item[position() &lt;= 5]">

<p>Título: <xsl:value-of select="title"/></p>

<p>Descripción: <xsl:value-of select="description" disable-output-escaping="yes"/></p>

<p>&nbsp;</p>

</xsl:for-each>

Ahora sencillamente deberemos añadir una nueva línea debajo de la que se encarga de la repetición ( xsl:for-each).

De esta forma indicaremos que este bloque se debe ordenar:

<xsl:for-each select="rss/channel/item[position() &lt;= 5]">

<xsl:sort select="title" />

<p>Título: <xsl:value-of select="title"/></p>

<p>Descripción: <xsl:value-of select="description" disable-output-escaping="yes"/></p>

<p>&nbsp;</p>

</xsl:for-each>

En el atributo select deberemos indicar el nombre del campo sobre el cual se realizará la ordenación.

Luego podemos añadir otros atributos como:

order: que puede tomar los valores ascending o descending. Por omisión se toma el valor ascending.

data-type: que indica si el valor a ordenar es un texto (text) o un número (number). Por omisión se toma el
valor text.

case-order: que indica si se deben tomar primero las mayúsculas (upper-first) o las minúsculas (lower-first).

http://www.aulaclic.es/dreamweavercs3/t_22_4.htm (1 de 2) [10/02/2008 20:00:16]


Curso de Adobe Dreamweaver CS3. Tema 22. XML y RSS

Así el bloque anterior se podría haber escrito como:

<xsl:for-each select="rss/channel/item[position() &lt;= 5]">

<xsl:sort select="title" order="descending" data-type="text" case-order="lower-first" />

<p>Título: <xsl:value-of select="title"/></p>

<p>Descripción: <xsl:value-of select="description" disable-output-escaping="yes"/></p>

<p>&nbsp;</p>

</xsl:for-each>

Para practicar realiza el Ejercicio Paso a Paso de Ordenación de elementos.

Pág. 22.4
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.

http://www.aulaclic.es/dreamweavercs3/t_22_4.htm (2 de 2) [10/02/2008 20:00:16]


Curso de Adobe Dreamweaver CS3. Tema 22. XML y RSS

Unidad 22. XML y RSS (V) Búsqueda

Sentencias condicionales

Finalmente Dreamweaver nos ofrece la posibilidad de crear bloques condicionales para que se muestren
determinados elementos si se cumple una condición.

Podremos encontrar dos tipos diferentes:

El condicional simple : que evalúa una condición, si ésta se cumple se muestra el contenido, en caso
contrario no se mostrará.

El condicional múltiple : que evalúa una condición, si se cumple mostrará un contenido, en caso
contrario mostará otro.

En ambos casos el cuadro de diálogo que se mostrará será el mismo:

En el cuadro de texto Prueba se deberá escribir la condición que se probará contra los elementos del archivo XML
para decidir si se muestran o no.

Las principales formas de condición que utilizarás con las siguientes:

Condición de nodo: donde se prueba un nodo (o campo) del elemento. Por ejemplo, precio > 200.

Condición de atributo: donde se prueba un atributo del elemento o de un nodo del elemento. Ejemplos: @id = 8,
para que el id del elemento sea 8, o coche/@color=rojo, para que el campo coche del elemento tenga un atributo
de color rojo.

Condición de búsqueda: puedes buscar en un nodo o atributo utilizando la función contains(). Así podrías
escribir contains(nombre, 'la') y mostraría sólo aquellos elementos que tuviesen la cadena la en su nombre.

Una vez introducida la condición simplemente pulsa Aceptar y la región condicional se creará.

En el caso de que utilicemos la condicional múltiple verás que se crea la siguiente estructura:

http://www.aulaclic.es/dreamweavercs3/t_22_5.htm (1 de 2) [10/02/2008 20:00:25]


Curso de Adobe Dreamweaver CS3. Tema 22. XML y RSS

Deberás introducir un bloque en xsl:when que se mostrará si se cumple la condición, y otro en xsl:otherwise para
que se muestre cuando no se cumpla.

Pág. 22.5
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.

http://www.aulaclic.es/dreamweavercs3/t_22_5.htm (2 de 2) [10/02/2008 20:00:25]


Curso de Adobe Dreamweaver CS3. Tema 22. XML y RSS

Unidad 22. XML y RSS (VI) Búsqueda

Insertar un fragmento XSLT

Una vez tenemos el archivo XSLT terminado y mostrando los datos que queremos mostrar podemos pasar a
insertarlo en cualquier página dinámica.

Hacerlo es muy sencillo, sólo tendrás que abrir un archivo PHP (en nuestro caso), colocar el cursor en el lugar
que quieras que aparezca la información y hacer clic en el botón Transformación XSL de la barra Datos:

Se abrirá el siguiente cuadro de diálogo:

En Archivo XSLT deberás indicar el archivo que deberá mostarse (el archivo de tratamiento de XML que hemos creado).

Automáticamente se mostrará en URI de XML la dirección del archivo que hemos utilizado para crear el archivo XSLT.

Al aceptar el cuadro de diálogo se mostrará directamente el contenido del archivo XSLT en la página PHP.

Sólo tendrás que pulsar F12 o el botón para ver la vista LiveData y tendrás una previsualización de cómo quedará
el archivo.

Para practicar realiza el Ejercicio Paso a Paso de Añadir XML a nuestra página.

Paso de Parámetros

http://www.aulaclic.es/dreamweavercs3/t_22_6.htm (1 de 3) [10/02/2008 20:00:34]


Curso de Adobe Dreamweaver CS3. Tema 22. XML y RSS

Por último veremos una característica muy útil que posee Dreamweaver: el paso de parámetros.

Podemos utilizar variables en el archivo XSLT para configurarlas más tarde según la página dinámica que vaya
a mostrarla.

Por ejemplo, en un filtro de repetición podríamos indicar lo siguiente:

En este caso estaremos diciendo que queremos que se muestren tantos elementos como indique la variable $numero.

A partir de este momento, cuando llamemos al archivo XSLT deberemos darle un valor a este parámetro para que
tenga un valor real.

Pero, ¿cómo hacerlo?, muy sencillo.

Cuando estamos creando la transformación XSL (ver apartado anterior) deberemos incluir un parámetro haciendo
clic en el botón

Se abrirá el siguiente cuadro de diálogo:

En Nombre deberemos especificar el nombre del parámetro (en el ejemplo numero) y en Valor estableceremos un
valor para dicho parámetro.

Aceptamos el cuadro de diálogo y listos.

Ahora podremos modificar el contenido del archivo XSLT según desde que archivo PHP lo carguemos, pues en
cada archivo PHP podremos darle un valor diferente.

Para terminar realiza el Ejercicio Paso a Paso de Paso de parámetros.

Ejercicios del Tema 22. Prueba evaluativa del Tema 22.

http://www.aulaclic.es/dreamweavercs3/t_22_6.htm (2 de 3) [10/02/2008 20:00:34]


Curso de Adobe Dreamweaver CS3. Tema 22. XML y RSS

Pág. 22.6
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.

http://www.aulaclic.es/dreamweavercs3/t_22_6.htm (3 de 3) [10/02/2008 20:00:34]


Curso de Adobe Dreamweaver CS3. Tema 23. Acceso a datos con Spry

Unidad 23. Acceso a datos con Spry (II) Búsqueda

Crear una región de Spry

Para poder mostrar datos provinentes de un conjunto Spry será necesario crear una región Spry. Para ello
simplemente haz clic en Insertar → Spry → Región de Spry.

Verás el siguiente cuadro de diálogo:

Selecciona el conjunto de datos creado anteriormente en Conjunto de datos Spry. Luego decide si quieres que se
cree un Contenedor de tipo DIV o SPAN, ten en cuenta que un DIV es un elemento de tipo bloque, por tanto contiene
un salto de línea antes y después de él. Si lo que te interesa es insertar el contenido XML en línea (por ejemplo
a continuación de un párrafo) selecciona el elemento de tipo SPAN.

En caso de que tuvieses algún elemento de la página seleccionado las opciones Ajustar selección y
Reemplazar selección se activarán para que puedas elegir si situar la región envolviendo el elemento seleccionado
o sustituirlo por el contenedor elegido.

En principio veremos únicamente la opción de Tipo Región, en próximos apartados veremos para qué nos servirá el
tipo Región de detalle.

Pulsa Aceptar y estarás listo para arrastrar elementos del panel Vinculaciones a tu página:

http://www.aulaclic.es/dreamweavercs3/t_23_2.htm (1 de 2) [10/02/2008 20:00:40]


Curso de Adobe Dreamweaver CS3. Tema 23. Acceso a datos con Spry

Pág. 23.2
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.

http://www.aulaclic.es/dreamweavercs3/t_23_2.htm (2 de 2) [10/02/2008 20:00:40]


Curso de Adobe Dreamweaver CS3. Tema 23. Acceso a datos con Spry

Unidad 23. Acceso a datos con Spry (III) Búsqueda

Repetición de Elementos

En el apartado anterior vimos como insertar elementos del archivo XML, pero de ese modo sólo seremos capaces
de visualizar la primera fila de elementos.

Dreamweaver pone a nuestra disposición la opción de Repetición de Spry para poder crear repeticiones de
nuestro diseño para cada una de las filas que compongan el conjunto de datos. Para ello haz clic en Insertar →
Spry → Repetición de Spry y verás el siguiente cuadro de diálogo:

Del mismo modo que antes indicaremos el tipo de Contenedor, el Conjunto de datos Spry y si queremos que
se inserte ajustando o reemplazando el elemento HTML selecionado.

Puedes seleccionar Repetir o Repetir hijo dependiendo del tipo de repetición que quieras conseguir.
Seleccionando Repetir hijo harás que lo que se encuentre dentro de la región se repeita para cada ua de las filas
del archivo, (opción muy útil para las tablas y la repetición de elementos tr).

Pulsa Aceptar y ahora los elementos que añadas se repetirán para cada una de las filas existentes en el archivo XML.

Pág. 23.3
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.

http://www.aulaclic.es/dreamweavercs3/t_23_3.htm (1 de 2) [10/02/2008 20:00:42]


Curso de Adobe Dreamweaver CS3. Tema 23. Acceso a datos con Spry

© aulaClic. Todos los derechos reservados. Free Computer tutorials. Prohibida la reproducción por cualquier medio.
Septiembre - 2007.

http://www.aulaclic.es/dreamweavercs3/t_23_3.htm (2 de 2) [10/02/2008 20:00:42]


Curso de Adobe Dreamweaver CS3. Tema 23. Acceso a datos con Spry

Unidad 23. Acceso a datos con Spry (IV) Búsqueda

Listas de Repetición

Cuando queremos crear un listado de elementos XML sin tener en cuenta el resto de información del archivo
podemos utilizar la opción Insertar lista de repetición para generar listados de este tipo:

● Brooklyn Follies Brooklyn Follies


● Crepusculo
● El Evangelio De Judas
● El Método: Al Descubierto La Sociedad Secreta De Los Maestros De La Seducción
● El Pintor De Batallas
● El Poder Del Ahora
● El Profesor
● El Viaje A La Felicidad: Las Nuevas Claves Científicas
● La Catedral Del Mar
● La Sombra Del Viento
● La Verdadera Historia Del Club Bilderberg
● Ligero De Equipaje: La Vida De Antonio Machado
● Matanzas En El Madrid Republicano: Paseos, Checas, Paracuellos...
● Miguel Duran: Del Cielo Al Abismo
● Milagro En Los Andes
● Milenio 3: El Libro
● Seda
● Travesuras De La Niña Mala
● Un Lugar Llamado Nada
● Yo, Maya Plisetskaya

Para ello simplemente haz clic en Insertar → Spry → Lista de Repetición de Spry y verás el siguiente cuadro
de diálogo:

Seleciona el tipo de listado que quieres generar en Etiqueta de contenedor. Puedes elegir entre UL (lista sin
ordenar), OL (lista ordenada), DL (lista de definición) o SELECT (lista desplegable).

En las dos primeras opciones el cuadro de diálogo permanecerá tal y como ves en la imagen.

Si seleccionas DL (lista de definición) o SELECT (lista desplegable) su aspecto variará un poco debido a
las diferentes opciones que admiten estas etiquetas:
http://www.aulaclic.es/dreamweavercs3/t_23_4.htm (1 de 2) [10/02/2008 20:00:45]
Curso de Adobe Dreamweaver CS3. Tema 23. Acceso a datos con Spry

DL (lista de definición): Consta de dos campos, Columna DT que contiene el nombre el nombre a definir,
y Columna DD que contiene la definición del campo anterior.

SELECT (lista desplegable): Consta de dos campos, Columna de etiquetas que contiene el nombre que se
muestra en el desplegable, y Columna Valor que contiene el valor que se pasa cuando se envia el formulario al
que pertenece el desplegable.

<option value="8433970925">Brooklyn Follies</option>

Pág. 23.4
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.

http://www.aulaclic.es/dreamweavercs3/t_23_4.htm (2 de 2) [10/02/2008 20:00:45]


Curso de Adobe Dreamweaver CS3. Tema 23. Acceso a datos con Spry

Unidad 23. Acceso a datos con Spry (V) Búsqueda

Tablas de datos

Por último veremos la opción Insertar → Spry → Tabla de Spry:

Esta opción crea automáticamente una tabla en la que se muestra todo el contenido del archivo XML ordenado
por columnas.

Sólo tendrás que seleccionar los campos que quieres que se muestren y ordenarlos en la posición deseada.

Una opción muy útil es Ordenar columna al hacer clic en el encabezado que reordena el contenido de la
tabla haciendo clic en los encabezados de columnas. Para poder utilizar esta opción en cualquiera de los campos
que vayas a mostrar seleccionalo y luego marca la opción, veras que aparece la leyenda Sí bajo la columna
Ordenable del cuadro de diálogo.

Los cuatro desplegables que se encuentran al pie corresponden al diseño CSS de la tabla. Puedes asignarle u
diseño personalizado a las filas para mejorar su visualización. Los desplegables Clase fila impar y Clase fila
par aplicarán estilos sobre las filas de modo que se distingan unas de otras y hacer más fácil su lectura.

Clase activable se mostrará cuando el ratón pase por encima de la fila, de esta forma puedes resaltar el elemento.

Clase seleccionar se aplica cuando se hace clic con el ratón sobre una de las filas.

http://www.aulaclic.es/dreamweavercs3/t_23_5.htm (1 de 2) [10/02/2008 20:00:58]


Curso de Adobe Dreamweaver CS3. Tema 23. Acceso a datos con Spry

Mostrar Maestro - Detalle

En el cuadro de diálogo que acabamos de ver podemos marcar una última opción: Actualizar regiones de detalle
al hacer clic en la fila.

De esta forma podremos activar una opción que dejamos atrás en apartados anteriores.

Recuerda que cuando vimos la opción de Insertar región de Spry podíamos incluir una región de Tipo Región
de detalle:

Combinando esta región con una tabla de datos Spry con la opción Actualizar regiones de detalle al hacer clic en
la fila activada podremos provocar lo siguiente: Al hacer clic sobre una de las filas todos los campos situados en
la región Spry (Región de detalle) se actualizarán para mostrar la información relativa a la fila seleccionada.

Esta opción es muy sencilla y vistosa, pues permite una interacción total con el usuario a la hora de mostrar
información en pantalla.

Ejercicios del Tema 23. Prueba evaluativa del Tema 23.

Pág. 23.5
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.

http://www.aulaclic.es/dreamweavercs3/t_23_5.htm (2 de 2) [10/02/2008 20:00:58]


Curso de Adobe Dreamweaver CS3. Entidades HTML

Listado de Entidades HTML (I) Búsqueda

Caracteres Alfabéticos Propios y


Alfabeto Griego

Símbolos Otros Símbolos Caracteres Tipográficos

Entidad Entidad Entidad


Entidad Entidad Entidad
Carácter con Carácter con Carácter con
numérica numérica numérica
nombre nombre nombre
• &bull; &#8226; ∏ &prod; &#8719; espacio &nbsp; &#160;

… &hellip; &#8230; ∑ &sum; &#8721; ¡ &iexcl; &#161;

′ &prime; &#8242; − &minus; &#8722; ¢ &cent; &#162;

″ &Prime; &#8243; ∗ &lowast; &#8727; £ &pound; &#163;

‾ &oline; &#8254; √ &radic; &#8730; ¤ &curren; &#164;

⁄ &frasl; &#8260; ∝ &prop; &#8733; ¥ &yen; &#165;

€ &euro; &#8364; ∞ &infin; &#8734; ¦ &brvbar; &#166;

℘ &weierp; &#8472; ∠ &ang; &#8736; § &sect; &#167;

ℑ &image; &#8465; ∧ &and; &#8743; ¨ &uml; &#168;

ℜ &real; &#8476; ∨ &or; &#8744; © &copy; &#169;

™ &trade; &#8482; ∩ &cap; &#8745; ª &ordf; &#170;

ℵ &alefsym; &#8501; ∪ &cup; &#8746; « &laquo; &#171;

← &larr; &#8592; ∫ &int; &#8747; ¬ &not; &#172;

↑ &uarr; &#8593; ∴ &there4; &#8756; - &shy; &#173;

http://www.aulaclic.es/dreamweavercs3/a_12_1_1.htm (1 de 3) [10/02/2008 20:01:06]


Curso de Adobe Dreamweaver CS3. Entidades HTML

→ &rarr; &#8594; ∼ &sim; &#8764; ® &reg; &#174;

↓ &darr; &#8595; ≅ &cong; &#8773; ¯ &macr; &#175;

↔ &harr; &#8596; ≈ &asymp; &#8776; ° &deg; &#176;

↵ &crarr; &#8629; ≠ &ne; &#8800; ± &plusmn; &#177;

⇐ &lArr; &#8656; ≡ &equiv; &#8801; ² &sup2; &#178;

⇑ &uArr; &#8657; ≤ &le; &#8804; ³ &sup3; &#179;

⇒ &rArr; &#8658; ≥ &ge; &#8805; ´ &acute; &#180;

⇓ &dArr; &#8659; ⊂ &sub; &#8834; µ &micro; &#181;

⇔ &hArr; &#8660; ⊃ &sup; &#8835; ¶ &para; &#182;

∀ &forall; &#8704; ⊄ &nsub; &#8836; · &middot; &#183;

∂ &part; &#8706; ⊆ &sube; &#8838; ¸ &cedil; &#184;

∃ &exist; &#8707; ⊇ &supe; &#8839; ¹ &sup1; &#185;

∅ &empty; &#8709; ⊕ &oplus; &#8853; º &ordm; &#186;

∇ &nabla; &#8711; ⊗ &otimes; &#8855; » &raquo; &#187;

∈ &isin; &#8712; ⊥ &perp; &#8869; ¼ &frac14; &#188;

∉ &notin; &#8713; ⋅ &sdot; &#8901; ½ &frac12; &#189;

∋ &ni; &#8715; • &lceil; &#8968; ¾ &frac34; &#190;

• &rceil; &#8969; ¿ &iquest; &#191;

• &lfloor; &#8970;

• &rfloor; &#8971;

〈 &lang; &#9001;

〉 &rang; &#9002;

◊ &loz; &#9674;

♠ &spades; &#9824;

♣ &clubs; &#9827;

♥ &hearts; &#9829;

♦ &diams; &#9830;

http://www.aulaclic.es/dreamweavercs3/a_12_1_1.htm (2 de 3) [10/02/2008 20:01:06]


Curso de Adobe Dreamweaver CS3. Entidades HTML

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.

http://www.aulaclic.es/dreamweavercs3/a_12_1_1.htm (3 de 3) [10/02/2008 20:01:06]


Curso de Adobe Dreamweaver CS3. Tema 12. HTML desde Dreamweaver

Unidad 12. HTML desde Dreamweaver (II) Búsqueda

El inspector de código

Recordarás que Dreamweaver ofrece la posibilidad de trabajar con tres vistas: vista Diseño, vista Código y
vista Dividir (Código y Diseño).

Todas estas vistas se aplican directamente sobre la ventana del documento.

Pero existe un panel que permite visualizar el código independientemente de la vista aplicada en el documento.
Este panel es el llamado Inspector de código y puede abrirse a través del menú Ventana. Si la opción Inspector
de código no te aparece directamente en este menú, posiblemente esté dentro de la opción Otros. También
puedes abrir el Inspector de código pulsando F10.

http://www.aulaclic.es/dreamweavercs3/t_12_2.htm (1 de 2) [10/02/2008 20:01:16]


Curso de Adobe Dreamweaver CS3. Tema 12. HTML desde Dreamweaver

El Inspector de código muestra el código HTML de la misma forma que lo hacen la vista Código y la vista
Dividir (Código y Diseño), pero puede resultar más cómodo trabajar con el panel, ya que puede situarse en
cualquier parte de la pantalla, y no se limita sólo al espacio del documento.

Pág. 12.2
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.

http://www.aulaclic.es/dreamweavercs3/t_12_2.htm (2 de 2) [10/02/2008 20:01:16]


Curso de Adobe Dreamweaver CS3. Tema 12. HTML desde Dreamweaver

Unidad 12. HTML desde Dreamweaver (III) Búsqueda

Completar las etiquetas

Una de las posibilidades que ofrece Dreamweaver a la hora de trabajar directamente sobre el código HTML es la
de completar las etiquetas mientras se van introduciendo. Esto se produce tanto en el Inspector de código como en
las vistas de código.

Imaginemos que deseamos introducir en nuestra página un enlace a la página de aulaclic, que ha de abrirse en
una ventana nueva. En este caso deberíamos introducir la etiqueta <a href="http://www.aulaclic.com">pulsa
aquí para visitar aulaclic</a>, con lo que obtendríamos el siguiente enlace:

pulsa aquí para visitar aulaclic

Vamos a ver cómo funciona el mecanismo de completar etiquetas a través de este ejemplo.

Las etiquetas se completan siempre de izquierda a derecha, por lo que lo primero que debemos insertar es el
símbolo < .

Después de escribir nosotros este símbolo, Dreamweaver mostrará una lista con todos los comandos que
pueden aparecer después él. Para elegir uno de ellos hay que pulsar dos veces sobre él con el puntero del ratón, o
bien, estando seleccionado, pulsar INTRO.

En este caso tenemos que elegir a, después de lo cual desaparecerá la lista. En el código tendremos .

Después de <a hay que introducir un espacio en blanco. Nada más teclear el espacio en blanco aparecerá otra lista
de elementos, que son los que pueden escribirse después de la a, los atributos de la etiqueta.

Tenemos que elegir href.

Una vez seleccionado, el código quedará como .

Entonces el cursor aparecerá entre las comillas dobles, y se mostrará una nueva lista en la que es posible elegir el
tipo de vínculo a insertar.

En este caso el vínculo ha de ser de tipo HTTP, aunque también sería posible insertar un vínculo a un archivo (FILE),
un vínculo de correo electrónico (MAILTO), o un vínculo de cualquiera de los tipos que aparecen en la lista.
Nosotros tenemos que seleccionar http://.

En lugar de cerrar ya la etiqueta con el símbolo >, queremos primero indicar que el vínculo ha de abrirse en una
ventana nueva. Para ello tenemos que introducir un nuevo espacio, para que se nos muestre otra lista.

En ella hay que elegir target. El código quedará como .

Entonces el cursor aparecerá entre las nuevas comillas dobles, y se mostrará una lista en la que es posible elegir
el destino del enlace.

Como queremos que el enlace se abra en una ventana nueva, hay que seleccionar _blank.

http://www.aulaclic.es/dreamweavercs3/t_12_3.htm (1 de 2) [10/02/2008 20:01:22]


Curso de Adobe Dreamweaver CS3. Tema 12. HTML desde Dreamweaver

Después de introducir el símbolo > para cerrar la etiqueta, se insertará automáticamente la de final del enlace, es
decir, se insertará </a>, y tendremos .

Ahora podemos completar la etiqueta con la dirección del enlace y el texto que servirá como enlace, para que quede
del siguiente modo:

<a href="http://www.aulaclic.com">pulsa aquí para visitar aulaclic</a>

Pág. 12.3
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.

http://www.aulaclic.es/dreamweavercs3/t_12_3.htm (2 de 2) [10/02/2008 20:01:22]


Curso de Adobe Dreamweaver CS3. Tema 12. HTML desde Dreamweaver

Unidad 12. HTML desde Dreamweaver (IV) Búsqueda

Contraer y expandir código

Una de las ventajas de Dreamweaver es la posibilidad de seleccionar fragmentos de código y


contraerlos para facilitar la legibilidad del código.

Por ejemplo, podemos seleccionar el trozo de código correspondiente a una tabla, tal y como se ve en
la figura de la derecha.

Para ello basta con colocar el cursor en la zona que queremos contraer, por ejemplo en la línea 318, y
pulsar el icono de la barra de herramientas de programación, veremos como automáticamente
se selecciona el código entre las etiquetas mas próximas, en este caso <font> y </font> , si seguimos
haciendo clic se irá seleccionando código entre las siguientes etiquetas, <div> <td> <tr> y <table>.
De forma que con cinco clics en el icono tendremos seleccionado el código de la etiqueta <table>
tal y como vemos en la figura.

Ahora, para contraer el código seleccionado basta hacer clic en el icono y obtendremos el
resultado que vemos a la derecha.

De esta forma podríamos ocultar el código que no nos interesa y dejar el resto del código más legible.

Para volver a la situación inicial basta hacer clic en el icono expandir , o en el signo + que aparece
al lado del código contraido.

Pág. 12.4
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.

http://www.aulaclic.es/dreamweavercs3/t_12_4.htm (1 de 2) [10/02/2008 20:01:25]


Curso de Adobe Dreamweaver CS3. Tema 12. HTML desde Dreamweaver

http://www.aulaclic.es/dreamweavercs3/t_12_4.htm (2 de 2) [10/02/2008 20:01:25]


Curso de Adobe Dreamweaver CS3. Tema 12. HTML desde Dreamweaver

Unidad 12. HTML desde Dreamweaver (V) Búsqueda

Errores en el código

A través del editor gráfico es posible ver si hay algunos errores en el código HTML, como puede ser una
etiqueta incompleta.

En el caso de haber un error de este tipo, el fragmento de código que contiene el error se mostrará resaltado en
amarillo en la ventana de diseño de la página.

Esto nos permite darnos cuenta de la línea concreta en la que se encuentra el error.

Si en el ejemplo de completar las etiquetas hubiéramos dejado sin terminar la línea de código, habiendo escrito
únicamente <a href="", aparecería reflejado en el editor gráfico tal y como muestra la imagen de la derecha.

Otra forma de detectar errores en nuestra página es a través del menú Comprobar navegadores de destino en la
barra de herramientas Documento.

Para ver los errores que tiene nuestra página, desplegamos el menú y elegimos la opción Validar
documento actual.

A continuación se abrirá el panel Resultados con las lista de los errores encontrados.

http://www.aulaclic.es/dreamweavercs3/t_12_5.htm (1 de 3) [10/02/2008 20:01:30]


Curso de Adobe Dreamweaver CS3. Tema 12. HTML desde Dreamweaver

A continuación se abrirá el panel Resultados con las lista de los errores encontrados.

En esta lista aparece el grado de importancia del error representado mediante un icono, el globo de palabras indica
un mensaje informativo (señala código que no es compatible con un navegador pero que no tiene ningún efecto
visible), el icono de signo de exclamación con fondo rojo indica error (indica código que puede causar un
problema visible grave en un navegador concreto, como hacer desaparecer partes de una página) y el icono de signo
de exclamación con fondo amarillo indica advertencia (señala una parte de código que no se visualizará
correctamente en un navegador concreto, pero eso no causará ningún problema grave de visualización).

A continuación tenemos la página y número de línea donde está el error y una descripción del mismo.

A veces la descripción es un texto largo que no se puede visualizar completamente para ello puedes utilizar el botón
Más info .

Como ya sabrás los distintos navegadores y sus distintas versiones hacen que un error lo sea o no, debemos realizar
la comprobación eligiendo las versiones de los navegadores que consideremos sean las más utilizadas entre
nuestros navegantes.

Para comprobar la compatibilidad de la página web que hayas creado puedes utilizar el desplegable Comprobar
página. Despiégalo y haz clic sobre la opción Comprobar compatibilidad con navegadores:

Se abrirá la ventana de resultados con todos los posibles problemas o incompatibilidades que se presenten para
cada uno de los navegadores y sus respectivas versiones.

Si haces clic en la opción Configuración se abrirá un cuadro de diálogo como este:

http://www.aulaclic.es/dreamweavercs3/t_12_5.htm (2 de 3) [10/02/2008 20:01:30]


Curso de Adobe Dreamweaver CS3. Tema 12. HTML desde Dreamweaver

Donde podras indicar que navagadores y a partir de qué versión quieres que se tengan en cuenta cuando
Dreamweaver realiza la comprobación de compatibilidad.

Pág. 12.5
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.

http://www.aulaclic.es/dreamweavercs3/t_12_5.htm (3 de 3) [10/02/2008 20:01:30]


Curso de Adobe Dreamweaver CS3. Tema 12. HTML desde Dreamweaver

Unidad 12. HTML desde Dreamweaver (VI) Búsqueda

Buscar y reemplazar

En ocasiones es posible querer buscar dentro de un sitio web todas aquellas páginas que contengan un texto
en concreto, una etiqueta en concreto, o parte de estos elementos. Tal vez los queramos buscar porque
deseemos trabajar sobre esas páginas y no recordábamos cual de ellas era, o tal vez porque queramos cambiar
ese texto o etiqueta por otros.

Imaginemos que una persona ha creado un sitio web, en el que la mayoría de las páginas tiene al comienzo un texto
que hace referencia al nombre del sitio, por ejemplo, todas esas páginas comienzan con PerrosGatos, y tiene
la seguridad de que no existe ese texto en ninguna parte de las páginas que no sea al comienzo. Ahora imaginemos
que esta persona ha creado una imagen de un perro y un gato, y que quiere cambiar en todas las páginas que
contienen el texto PerrosGatos dicho texto por la imagen.

En este caso no es necesario que abra una por una todas las páginas que contienen dicho texto, ni tampoco
que modifique una por una dichas páginas para cambiar el texto por la imagen. Para realizar esta tarea resulta
más sencillo utilizar la herramienta de Buscar y reemplazar.

Puedes abrirla a través del menú Edición, opción Buscar y reemplazar, o pulsando Ctrl+F.

Mediante Buscar en puede especificarse si se va a buscar en el documento actual, en todo el sitio, o en los
archivos seleccionados del sitio (habiendo seleccionado dichos archivos previamente).

A través de Buscar se especifica si hay que buscarlo en el texto (en la ventana diseño), o en el código HTML
(código fuente).

Junto a la lista de opciones de Buscar, aparece un cuadro de texto en el que hay que indicar el texto o el código que
se desea buscar.

http://www.aulaclic.es/dreamweavercs3/t_12_6.htm (1 de 3) [10/02/2008 20:01:36]


Curso de Adobe Dreamweaver CS3. Tema 12. HTML desde Dreamweaver

En Reemplazar con hay que especificar el texto o el código por el que se desea cambiar el texto o código buscado.

El reemplazo puede hacerse de varias formas, siempre a través de los botones de la derecha de la ventana. Una de
ellas es buscar uno por uno cada uno de los documentos que contengan el código o texto a buscar, y reemplazar
cuando se desee. Para ello se utilizan los botones Buscar sig. y Reemplazar.

Si se desean buscar todos los documentos que contengan dicho texto o código, y reemplazar en todos ellos, se
utilizan los botones Buscar todos y Reemp. todos.

Cuando se utiliza la opción Buscar sig., se abre la página en la que se encuentra el texto coincidente, resaltando en
el código fuente la línea en la que este se encuentra. De este modo podemos decidir uno por uno los cambios a
realizar. Cuando estemos seguros de querer reemplazar pulsaremos sobre Reemplazar, y cuando no
deseemos reemplazar volveremos a pulsar sobre Buscar sig..

Cuando se utiliza la opción Buscar todos se cierra la ventana de Buscar y reemplazar y se abre un nuevo panel como
el de la derecha, en el que aparecen todos los documentos en el que coincide el texto o el código buscado.

Pulsando sobre el botón vuelve a abrirse la ventana de Buscar y reemplazar. Desde dicha ventana podemos
reemplazar en los documentos encontrados, uno por uno, con el botón Reemplazar, o bien reemplazar directamente en
todos los documento encontrados, pulsando sobre el botón Reemp. todos.

En el panel, cuando se haya reemplazado en algún documento, éste volverá a aparecer en la lista junto con un círculo
verde, que indica que ya ha sufrido reemplazo.

En ocasiones podemos equivocarnos, al buscar y reemplazar texto o código erróneos. Hay que tener mucho cuidado
al utilizar esta herramienta, ya que no es posible deshacer los cambios en los documentos que están cerrados durante
la búsqueda y el reemplazo.

En el ejemplo anterior, la persona quería buscar el texto PerrosGatos, y reemplazarlo por una imagen. En este
caso concreto, lo que se desea sustituir es texto por una imagen, por lo que en Buscar no podríamos elegir la
opción Texto, habría que elegir la opción Código fuente.

En Reemplazar con, habría que especificar la etiqueta HTML completa para insertar la imagen. En este caso la
etiqueta sería <img scr="imagenes/logo_animales.gif">, teniendo en cuenta que la imagen se llama
logo_animales.gif y que se encuentra dentro del sitio en la carpeta imagenes.

Existen métodos de búsqueda mucho más precisos que los que hemos visto, si quieres conocerlos visita el avanzado
de Expresiones Regulares .

Para practicar los distintos aspectos explicados en el tema puedes realizar el Ejercicio paso a paso Buscar
y reemplazar.

Si quieres ver otros métodos de búsqueda relacionados con las etiquetas del código visita el avanzado de Búsqueda
en Etiquetas .

http://www.aulaclic.es/dreamweavercs3/t_12_6.htm (2 de 3) [10/02/2008 20:01:36]


Curso de Adobe Dreamweaver CS3. Tema 12. HTML desde Dreamweaver

Ejercicios del Tema 12. Prueba evaluativa del Tema 12.

Pág. 12.6
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.

http://www.aulaclic.es/dreamweavercs3/t_12_6.htm (3 de 3) [10/02/2008 20:01:36]


Curso de Adobe Dreamweaver CS3. Expresiones Regulares

Expresiones Regulares (I) Búsqueda

Las Expresiones Regulares son un conjunto de símbolos que unidos pueden definir un patrón para identificar una
cadena de caracteres.

Antes de comenzar a verlas deberíamos tener bien claro cómo actúa la búsqueda normal.

Por ejemplo, si buscamos la cadena aula, los resultados que encontrasemos podrían ser aulaclic, miaula, aula, etc...

Utilizaremos las Expresiones Regulares para decidir cuales serán el resto de los caracteres.

Para utilizar estos símbolos especiales tendremos quemarcar la casilla Utilizar expresión regular en el cuadro
de diálogo de Buscar y Remplazar:

http://www.aulaclic.es/dreamweavercs3/a_12_6_1.htm (1 de 6) [10/02/2008 20:01:40]


Curso de Adobe Dreamweaver CS3. Expresiones Regulares

Una vez tengamos la casilla marcada, todo lo que escribamos en el cuadro de búsqueda se tomará como una
expresión regular, así que empecemos a ver los símbolos que podemos utilizar:

Símbolo Significado

^
Utiliza este símbolo para buscar cadenas al principio de un documento.

Esta expresión regular no es muy útil, pues normalmente los documentos HTML empiezan
con la especificación de las cabeceras lo que, normalmente, no pertenece a nuestro
objetivo de búsqueda.

Utilizando este símbolo podríamos encontrar documentos buscando por

^<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

Esto nos daría como resultados los documentos que empiecen por <!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML, por lo que los documentos que empiecen por <!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML no aparecerían.

En este ejemplo se estan buscando archivos que sigan el formato XHTML, los documentos
despreciados serían aquellos que sigan HTML.

$
Utiliza este símbolo para buscar cadenas al final de un documento.

Igual que la anterior, esta expresión regular no nos será de mucha ayuda cuando utilicemos
la herramienta Buscar y Reemplazar. Sólo podremos buscar documentos que terminen de
determinada manera.

Por ejemplo, podemos buscar archivos que terminen con

</html>$

Esta búsqueda nos devolvería todos aquellos documentos que se han cerrado
correctamente, los que terminen, por ejemplo en </body> no se mostrarían.

http://www.aulaclic.es/dreamweavercs3/a_12_6_1.htm (2 de 6) [10/02/2008 20:01:40]


Curso de Adobe Dreamweaver CS3. Expresiones Regulares

*
Ahora ya entramos con expresiones regulares mucho más útiles.

El asterisco te ayudará a buscar un carácter que aparezca una vez, varias o ninguna.
Veamos un ejemplo, si hacemos la busqueda por

a*u

Los resultados que podemos encontrar serían aula, aaula, aaaaula o incluso uno o cuello,
porque el asterisco implica que el carácter no tiene porque aparecer.

+
Casi ocurre lo mismo con esta expresión regular.

El signo + buscará conicidencias de un caracter una vez o varías. En este caso se


despreciarán aquellas en las que no aparezca.

Por ejemplo, si buscamos

a+u

Los resultados podrían ser aula, aaula o aaaula, pero no ni uno ni cuello porque este
símbolo obliga a que el caracter se encuentre al menos una vez.

?
Veamos ahora qué ocurre con el signo de interrogación.

Este símbolo es el contrario del anterior, sólo busca coincidencias una sóla vez o ninguna,
de modo que buscando

au?la

Podemos encontrar aula, ala, aulaclic o alameda, pero nunca auula ni auuulaclic.

Es decir, este símbolo nos sirve para marcar caracteres opcionales.

http://www.aulaclic.es/dreamweavercs3/a_12_6_1.htm (3 de 6) [10/02/2008 20:01:40]


Curso de Adobe Dreamweaver CS3. Expresiones Regulares

.
El punto es un símbolo muy útil. Podemos utilizarlo para sustituir cualquier carácter, por
ejemplo, en la búsqueda de

de.a

Podríamos encontrar resultados como dela, desa, deia, dera, de9a... pero nunca dea
(aunque sí deaa). En definitiva, este símbolo sustituye a un carácter ni más ni menos.

Llegados a este punto podrías realizar búsquedas más complejas combinando varias
expresiones que hemos visto, por ejemplo,

de.?a

Encontraría dela, desa, deia, dera, de9a e incluso dea pues al escribir ? a la derecha del
punto hemos indicado que ese carácter puede aparecer o no.

uno|
otro El símbolo | se utiliza para representar la conjunción lógica OR, es decir, uno u otro.

Podemos buscar

99|ade

Y encontraríamos resultados tan variados como adecuado, cadena, 1099, 9900, etc...

Piensa que ahora podemos complicar mucho más las búsquedas combinando todos los
símbolos vistos, con esta búsqueda:

de.?a|de?a

Encontaríamos resultados como dela, desarmado, dea (que cumple ambas condiciones) o
da (que cumple la segunda).

http://www.aulaclic.es/dreamweavercs3/a_12_6_1.htm (4 de 6) [10/02/2008 20:01:40]


Curso de Adobe Dreamweaver CS3. Expresiones Regulares

{n}
Los símbolos de llave indican repetición.

Nos ayudarán a estabecer el número de veces que se repite el carácter al cual precede.
Por ejemplo, buscando

cas{2}a

Encontraría únicamente las palabras que contengan cassa (como cassa, micassa,
ocassa7a, recassaa...).

Sin embargo, la búsqueda de

cas{2}

Podría encontrar cassa, casssa, micassssa, etc... Pues buscará una cadena que contenga
ca seguida de 2 eses.

{n,
m} Este sería otro caso de símbolo de llave, pero en este caso introduciremos dos números.

Estos números indicarán la repetición que puede tener el caracter al cual preceden. Por
ejemplo, la búsqueda:

m{2,4}

Encontraría coincidencias con cadenas que conteniesen al menos 2 m o hasta como


máximo 4.

Posibles resultados serían mm, mmm o mmmm. La cadena ummmm sí que se


encontraría, mientras que en ummmmm sólo encontraría las 4 primeras emes.

En esta expresión regular podemos obviar la segunda parte para conseguir algo como esto:

m{2,}

El resultado ahora sería cuanquier cadena que contenga al menos 2 m y sin máximo de
repetición.

Las cadenas umm, ummmmmmm o ummmmmmmmmmm se encontrarían sin


problemas.

http://www.aulaclic.es/dreamweavercs3/a_12_6_1.htm (5 de 6) [10/02/2008 20:01:40]


Curso de Adobe Dreamweaver CS3. Expresiones Regulares

Seguir con el avanzado...


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.

http://www.aulaclic.es/dreamweavercs3/a_12_6_1.htm (6 de 6) [10/02/2008 20:01:40]


Curso de Adobe Dreamweaver CS3. Búsqueda en Etiquetas

Búsqueda en Etiquetas Búsqueda

En el cuadro de diálogo Buscar y Reemplazar podrás encontrar otros tipos de búsqueda que todavía no hemos visto.

Para ello deberás seleccionarlos en el desplegable Buscar:

El primer método que veremos será la opción Texto (avanzado).

Como puedes ver en la imagen, este cuadro de búsqueda es muy similar al que estamos acostumbrados a utilizar,
sólo que tiene un espacio entre los campos Buscar y Reemplazar que nos darán la oportunidad de trabajar
con etiquetas.

Selecciona en el segundo desplegable la etiqueta en la que quieres que se encuentre tu texto (o no, según
hayas seleccionado en el primero).

http://www.aulaclic.es/dreamweavercs3/a_12_6_2_1.htm (1 de 5) [10/02/2008 20:01:45]


Curso de Adobe Dreamweaver CS3. Búsqueda en Etiquetas

Ahora estarás listo para realizar búsquedas en etiquetas especificas.

Pero aún hay más. Puedes hacer clic en el botón para ver cómo aparecen más opciones:

Puedes incluir más opciones sobre el tipo de atributos que tenga (e incluso en los desplegables de la derecha incluir
un valor para el atributo) o seguir buscando por otras opciones.

Verás que en seguida te harás con el método de búsqueda.

Lo que tenemos que destacar es que esta forma te ayudará a modificar el texto que se encuentre dentro de una etiqueta.

¿Pero qué pasa si lo que queremos es buscar o modificar una etiqueta especifica con unas circunstancias igual
de especificas?

Muy sencillo, en el desplegable Buscar: seleccionaremos Etiqueta específica.

Verás el siguiente cuadro de diálogo:


http://www.aulaclic.es/dreamweavercs3/a_12_6_2_1.htm (2 de 5) [10/02/2008 20:01:45]
Curso de Adobe Dreamweaver CS3. Búsqueda en Etiquetas

En este caso tenemos dos secciones Buscar: y Acción:.

Obviamente para realizar la segunda tendremos que rellenar los datos correctos en la primera. Así que veamos qué
nos podemos encontrar.

En el desplegable de al lado de Etiqueta especifica deberemos indicar el tipo de etiqueta que estamos buscando.

Luego en la línea siguiente podremos indicar si tiene algun tipo de atributo (y con qué valor) o si se encuentra dentro
de otra etiqueta..

Estas últimas opciones son muy parecidas a las que se utilizaron en el método de Texto (avanzado).

Recuerda que puedes usar el botón para seguir añadiendo condiciones.

Finalmente y cuando la búsqueda funcione correctamente podremos utilizar la opción Acción:

http://www.aulaclic.es/dreamweavercs3/a_12_6_2_1.htm (3 de 5) [10/02/2008 20:01:45]


Curso de Adobe Dreamweaver CS3. Búsqueda en Etiquetas

Como puedes ver, puedes escoger entre varias acciones a aplicar, entre reemplazar la etiqueta con otra o
cambiar alguno de sus atributos como añadir algo antes o después de ésta.

Por ejemplo, si quisiesemos quitar todos los enlaces de una página podríamos utilizar la opción
Estiqueta especifica para ello, bastará con que indiques las opciones que puedes ver en la siguiente imagen:

http://www.aulaclic.es/dreamweavercs3/a_12_6_2_1.htm (4 de 5) [10/02/2008 20:01:45]


Curso de Adobe Dreamweaver CS3. Búsqueda en Etiquetas

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.

http://www.aulaclic.es/dreamweavercs3/a_12_6_2_1.htm (5 de 5) [10/02/2008 20:01:45]


Curso de Adobe Dreamweaver CS3. Tema 13. Otros elementos

Unidad 13. Otros elementos (II) Búsqueda

Fecha

Dreamweaver permite insertar fácilmente la fecha de última modificación de las páginas.

Cuando se modifica una página en la que se ha insertado este tipo de fecha, se actualizará automáticamente con
la fecha del sistema.

Conviene insertar la fecha de modificación cuando la página ha de contener información actualizada cada poco
tiempo, para que los usuarios puedan saber cuando fue la última vez que se actualizaron los datos. Pero en el caso
de que la página no se actualice hasta que pase cierto tiempo, es preferible no incluir la fecha de modificación.

Para insertar la fecha hay que dirigirse al menú Insertar, a la opción Fecha.

En la nueva ventana ya es posible establecer el formato de la fecha, y si se desea que se actualice o


no automáticamente al modificar y guardar la página de nuevo.

Para practicar puedes realizar el Ejercicio paso a paso Insertar fecha .

Regla horizontal

http://www.aulaclic.es/dreamweavercs3/t_13_2.htm (1 de 2) [10/02/2008 20:01:53]


Curso de Adobe Dreamweaver CS3. Tema 13. Otros elementos

El elemento que suele utilizarse para separar secciones dentro de una misma página es la regla horizontal. Una
regla horizontal no es más que una línea horizontal.

Para insertar una regla hay que dirigirse al menú Insertar, opción HTML, luego la opción Regla horizontal.

El inspector de propiedades para las reglas es el siguiente.

A través de sus campos es posible modificar en cierta medida la apariencia de las reglas. A continuación tienes
cuatro ejemplos de reglas horizontales.

Estas reglas sólo se diferencian en las opciones Al (altura) y Sombreado. Las dos primeras, por ejemplo, no
tienen activada la opción Sombreado, mientras que las otras dos sí.

Pág. 13.2
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.

http://www.aulaclic.es/dreamweavercs3/t_13_2.htm (2 de 2) [10/02/2008 20:01:53]


Curso de Adobe Dreamweaver CS3. Tema 13. Otros elementos

Unidad 13. Otros elementos (III) Búsqueda

Código de otras páginas

En ocasiones nos gustaría incluir en nuestras páginas cosas que hemos visto en otras páginas que están publicadas
en Internet.

Puedes visualizar el código fuente de dichas páginas a través del menú Ver del navegador Internet Explorer,
opción Código fuente, o bien mostrar el menú contextual de la página pulsando con el botón derecho sobre ella,
y pulsando después sobre la opción Ver código fuente. De este modo puedes consultar el código que se ha
utilizado para realizar la página, y utilizar dicho código en las tuyas.

Visualizar el código fuente resulta útil para ver cómo se ha estructurado la página, el uso de los comportamientos
(que aparecen programados en código JavaScript), y otra serie de rutinas JavaScript.

Por ejemplo, pulsa aquí para abrir una página en la que aparece un efecto en la barra de estado del navegador,
que muestra una marquesina, cuyo texto es CODIGO JAVASCRIPT - CURSO Dreamweaver CS3 - AULACLIC.

Si miras el código fuente de esa página podrás ver el código javascript que utiliza para conseguir ese efecto en la
barra de estado. El código es el siguiente:

<SCRIPT language=JavaScript>

<!--

strcnt=0;

mensaje=" CODIGO JAVASCRIPT - CURSO Dreamweaver CS3 - AULACLIC ";

function scroller()

window.status=mensaje.substring(strcnt++,mensaje.length+1);

if(strcnt>mensaje.length)

strcnt=0;

setTimeout("scroller()",200);

//-->

</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()">
http://www.aulaclic.es/dreamweavercs3/t_13_3.htm (1 de 2) [10/02/2008 20:02:04]
Curso de Adobe Dreamweaver CS3. Tema 13. Otros elementos

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>

Ejercicios del Tema 13. Prueba evaluativa del Tema 13.

Pág. 13.3
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.

http://www.aulaclic.es/dreamweavercs3/t_13_3.htm (2 de 2) [10/02/2008 20:02:04]


Curso de Adobe Dreamweaver CS3. Tema 15. Comportamientos

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.

http://www.aulaclic.es/dreamweavercs3/t_15_2.htm (1 de 3) [10/02/2008 20:02:11]


Curso de Adobe Dreamweaver CS3. Tema 15. Comportamientos

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.

http://www.aulaclic.es/dreamweavercs3/t_15_2.htm (2 de 3) [10/02/2008 20:02:11]


Curso de Adobe Dreamweaver CS3. Tema 15. Comportamientos

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.

Ejercicios del Tema 15. Prueba evaluativa del Tema 15.

Pág. 15.2
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.

http://www.aulaclic.es/dreamweavercs3/t_15_2.htm (3 de 3) [10/02/2008 20:02:11]


Curso de Adobe Dreamweaver CS3. Tema 24. AJAX y Spry Framework

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

<propiedad>valor_2</propiedad>

</elemento>

<elemento id="3">

<propiedad>valor_3</propiedad>

</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.
http://www.aulaclic.es/dreamweavercs3/t_24_2.htm (1 de 3) [10/02/2008 20:02:19]
Curso de Adobe Dreamweaver CS3. Tema 24. AJAX y Spry Framework

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:

<script type="text/javascript">

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

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


Curso de Adobe Dreamweaver CS3. Tema 24. AJAX y Spry Framework

© aulaClic. Todos los derechos reservados. Free Computer tutorials. Prohibida la reproducción por cualquier medio.
Septiembre - 2007.

http://www.aulaclic.es/dreamweavercs3/t_24_2.htm (3 de 3) [10/02/2008 20:02:19]


Curso de Adobe Dreamweaver CS3. Tema 24. AJAX y Spry Framework

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:

http://www.aulaclic.es/dreamweavercs3/t_24_3.htm (1 de 2) [10/02/2008 20:02:29]


Curso de Adobe Dreamweaver CS3. Tema 24. AJAX y Spry Framework

<div spry:region="miDataSet">

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

<div spry:region="miDataSet">

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

http://www.aulaclic.es/dreamweavercs3/t_24_3.htm (2 de 2) [10/02/2008 20:02:29]


Curso de Adobe Dreamweaver CS3. Tema 24. AJAX y Spry Framework

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:

<div spry:region="miDataSet">

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

<div spry:region="miDataSet">

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

http://www.aulaclic.es/dreamweavercs3/t_24_4.htm (1 de 2) [10/02/2008 20:02:33]


Curso de Adobe Dreamweaver CS3. Tema 24. AJAX y Spry Framework

Pág. 24.4
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.

http://www.aulaclic.es/dreamweavercs3/t_24_4.htm (2 de 2) [10/02/2008 20:02:33]


Curso de Adobe Dreamweaver CS3. Tema 24. AJAX y Spry Framework

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:

<div spry:region="miDataSet">

<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')

http://www.aulaclic.es/dreamweavercs3/t_24_5.htm (1 de 3) [10/02/2008 20:02:35]


Curso de Adobe Dreamweaver CS3. Tema 24. AJAX y Spry Framework

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:

<script type="text/javascript">

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:

<script type="text/javascript">

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.

http://www.aulaclic.es/dreamweavercs3/t_24_5.htm (2 de 3) [10/02/2008 20:02:35]


Curso de Adobe Dreamweaver CS3. Tema 24. AJAX y Spry Framework

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

http://www.aulaclic.es/dreamweavercs3/t_24_5.htm (3 de 3) [10/02/2008 20:02:35]


Curso de Adobe Dreamweaver CS3. Tema 24. AJAX y Spry Framework

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:

<div spry:region="miDataSet">

<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(/^An/) != -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(/^An/) == -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';">

http://www.aulaclic.es/dreamweavercs3/t_24_6.htm (1 de 3) [10/02/2008 20:02:42]


Curso de Adobe Dreamweaver CS3. Tema 24. AJAX y Spry Framework

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:

<div spry:region="miDataSet">

<ul spry:repeatchildren="miDataSet">

<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:region="miDataSet">

<ul spry:repeatchildren="miDataSet">

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

http://www.aulaclic.es/dreamweavercs3/t_24_6.htm (2 de 3) [10/02/2008 20:02:42]


Curso de Adobe Dreamweaver CS3. Tema 24. AJAX y Spry Framework

Pág. 24.6
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.

http://www.aulaclic.es/dreamweavercs3/t_24_6.htm (3 de 3) [10/02/2008 20:02:42]


Curso de Adobe Dreamweaver CS3. Tema 24. AJAX y Spry Framework

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:

<script type="text/javascript">

var miDataSet = new Spry.Data.XMLDataSet("archivo.xml", "listado/elemento");

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.


http://www.aulaclic.es/dreamweavercs3/t_24_7.htm (1 de 3) [10/02/2008 20:02:45]
Curso de Adobe Dreamweaver CS3. Tema 24. AJAX y Spry Framework

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(/^An/) == -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
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.

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


Curso de Adobe Dreamweaver CS3. Tema 24. AJAX y Spry Framework

© aulaClic. Todos los derechos reservados. Free Computer tutorials. Prohibida la reproducción por cualquier medio.
Septiembre - 2007.

http://www.aulaclic.es/dreamweavercs3/t_24_7.htm (3 de 3) [10/02/2008 20:02:45]


Curso de Adobe Dreamweaver CS3. Tema 24. AJAX y Spry Framework

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:

<script type="text/javascript">

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:

<script type="text/javascript">

http://www.aulaclic.es/dreamweavercs3/t_24_8.htm (1 de 2) [10/02/2008 20:02:52]


Curso de Adobe Dreamweaver CS3. Tema 24. AJAX y Spry Framework

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

http://www.aulaclic.es/dreamweavercs3/t_24_8.htm (2 de 2) [10/02/2008 20:02:52]


Curso de Adobe Dreamweaver CS3. Tema 24. AJAX y Spry Framework

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:

<div spry:region="miDataSet">

<ul spry:repeatchildren="miDataSet">

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

http://www.aulaclic.es/dreamweavercs3/t_24_9.htm (1 de 2) [10/02/2008 20:03:03]


Curso de Adobe Dreamweaver CS3. Tema 24. AJAX y Spry Framework

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:

<script type="text/javascript">

var miDataSet = new Spry.Data.XMLDataSet("archivo.xml", "listado/elemento");

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:

<div spry:region="miDataSet">

<ul spry:repeatchildren="miDataSet">

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

http://www.aulaclic.es/dreamweavercs3/t_24_9.htm (2 de 2) [10/02/2008 20:03:03]


Curso de Adobe Dreamweaver CS3. Tema 24. AJAX y Spry Framework

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>

...

<div spry:region="miDataSet">

<ul spry:repeatchildren="miDataSet">

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

...

<div spry:region="miDataSet">

<ul spry:repeatchildren="miDataSet">

<li spry:hover="resaltado" spry:select="seleccionado">{@id}, {propiedad}</li>

</ul>
http://www.aulaclic.es/dreamweavercs3/t_24_10.htm (1 de 2) [10/02/2008 20:03:11]
Curso de Adobe Dreamweaver CS3. Tema 24. AJAX y Spry Framework

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

Ejercicios del Tema 24. Prueba evaluativa del Tema 24.

Pág. 24.10
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.

http://www.aulaclic.es/dreamweavercs3/t_24_10.htm (2 de 2) [10/02/2008 20:03:11]


Curso de Adobe Dreamweaver CS3. Tema 25. Spry y Formularios

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:

http://www.aulaclic.es/dreamweavercs3/t_25_2.htm (1 de 2) [10/02/2008 20:03:18]


Curso de Adobe Dreamweaver CS3. Tema 25. Spry y Formularios

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

http://www.aulaclic.es/dreamweavercs3/t_25_2.htm (2 de 2) [10/02/2008 20:03:18]


Curso de Adobe Dreamweaver CS3. Tema 25. Spry y Formularios

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:

http://www.aulaclic.es/dreamweavercs3/t_25_3.htm (1 de 2) [10/02/2008 20:03:24]


Curso de Adobe Dreamweaver CS3. Tema 25. Spry y Formularios

Esta última opción es la que puedes ver en el ejemplo más arriba.

Pág. 25.3
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.

http://www.aulaclic.es/dreamweavercs3/t_25_3.htm (2 de 2) [10/02/2008 20:03:24]


Curso de Adobe Dreamweaver CS3. Tema 25. Spry y Formularios

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.

Ejercicios del Tema 25. Prueba evaluativa del Tema 25.

http://www.aulaclic.es/dreamweavercs3/t_25_4.htm (1 de 2) [10/02/2008 20:03:32]


Curso de Adobe Dreamweaver CS3. Tema 25. Spry y Formularios

Pág. 25.4
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.

http://www.aulaclic.es/dreamweavercs3/t_25_4.htm (2 de 2) [10/02/2008 20:03:32]


Curso de Adobe Dreamweaver CS3. Tema 26. Controles Spry Avanzados

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 .

http://www.aulaclic.es/dreamweavercs3/t_26_2.htm (1 de 2) [10/02/2008 20:03:43]


Curso de Adobe Dreamweaver CS3. Tema 26. Controles Spry Avanzados

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

http://www.aulaclic.es/dreamweavercs3/t_26_2.htm (2 de 2) [10/02/2008 20:03:43]


Curso de Adobe Dreamweaver CS3. Tema 26. Controles Spry Avanzados

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

http://www.aulaclic.es/dreamweavercs3/t_26_3.htm (1 de 3) [10/02/2008 20:03:53]


Curso de Adobe Dreamweaver CS3. Tema 26. Controles Spry Avanzados

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

http://www.aulaclic.es/dreamweavercs3/t_26_3.htm (2 de 3) [10/02/2008 20:03:53]


Curso de Adobe Dreamweaver CS3. Tema 26. Controles Spry Avanzados

Pág. 26.3
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.

http://www.aulaclic.es/dreamweavercs3/t_26_3.htm (3 de 3) [10/02/2008 20:03:53]


Curso de Adobe Dreamweaver CS3. Tema 26. Controles Spry Avanzados

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:

http://www.aulaclic.es/dreamweavercs3/t_26_4.htm (1 de 2) [10/02/2008 20:03:58]


Curso de Adobe Dreamweaver CS3. Tema 26. Controles Spry Avanzados

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.

Ejercicios del Tema 26. Prueba evaluativa del Tema 26.

Pág. 26.4
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.

http://www.aulaclic.es/dreamweavercs3/t_26_4.htm (2 de 2) [10/02/2008 20:03:58]


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

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.

http://www.aulaclic.es/dreamweavercs3/epp_3_1_1.htm (2 de 2) [10/02/2008 20:04:03]


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.

1 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.

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.

http://www.aulaclic.es/dreamweavercs3/epp_3_3_1.htm (1 de 2) [10/02/2008 20:04:05]


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.

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.

http://www.aulaclic.es/dreamweavercs3/epp_3_3_1.htm (2 de 2) [10/02/2008 20:04:05]


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.

1 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.

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.

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.
http://www.aulaclic.es/dreamweavercs3/epp_4_1_1.htm (1 de 2) [10/02/2008 20:04:07]
Curso de Adobe Dreamweaver CS3. Paso a Paso Insertar texto y modificar sus propiedades

© aulaClic. Todos los derechos reservados. Free Computer tutorials. Prohibida la reproducción por cualquier medio.
Septiembre - 2007.

http://www.aulaclic.es/dreamweavercs3/epp_4_1_1.htm (2 de 2) [10/02/2008 20:04:07]


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.

1 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.

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 postresemana.htm, que aparece en los archivos desplegados en el
panel Archivos.

Se abrirá el documento en Dreamweaver.

5 Si no aparece el inspector de propiedades, ábrelo a través del menú Ventana, opción Propiedades.

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.

8 Haz clic sobre el botón Guardar de la barra de herramientas.

9 Ahora abre el documento platosemana.htm, que aparece en los archivos desplegados en el panel Archivos.

Se abrirá el documento en Dreamweaver.

10 Selecciona las cinco líneas de texto desde Lavar las berenjenas... hasta la última.

http://www.aulaclic.es/dreamweavercs3/epp_4_2_1.htm (1 de 2) [10/02/2008 20:04:11]


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.

12 Haz clic sobre el botón Guardar de la barra de herramientas.

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.

http://www.aulaclic.es/dreamweavercs3/epp_4_2_1.htm (2 de 2) [10/02/2008 20:04:11]


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.

1 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.

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.

Se abrirá el documento en Dreamweaver.

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


http://www.aulaclic.es/dreamweavercs3/epp_4_4_1.htm (1 de 2) [10/02/2008 20:04:15]
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.

12 Haz clic sobre el botón Guardar de la barra de herramientas.

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.

http://www.aulaclic.es/dreamweavercs3/epp_4_4_1.htm (2 de 2) [10/02/2008 20:04:15]


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.

1 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.

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 quienes.htm, que aparece en el panel Archivos.

Se abrirá el documento en Dreamweaver.

5 Si no aparece el inspector de propiedades, ábrelo a través del menú Ventana, opción Propiedades.

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.
http://www.aulaclic.es/dreamweavercs3/epp_5_2_1.htm (1 de 2) [10/02/2008 20:04:17]
Curso de Adobe Dreamweaver CS3. Paso a Paso Crear un hiperenlace

12 Cierra la ventana del navegador.

13 Haz clic sobre el botón Guardar de la barra de herramientas.

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.

http://www.aulaclic.es/dreamweavercs3/epp_5_2_1.htm (2 de 2) [10/02/2008 20:04:17]


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

Ejercicio paso a paso. Unidad 5. Crear un Búsqueda


vínculo de correo electrónico

Objetivo.

Practicar cómo crear un vínculo de correo electrónico.

1 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.

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 quienes.htm, que aparece en el panel desplegable de Archivos.

Se abrirá el documento en Dreamweaver.

5 Si no aparece el inspector de propiedades, ábrelo a través del menú Ventana, opción Propiedades.

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.
http://www.aulaclic.es/dreamweavercs3/epp_5_3_1.htm (1 de 2) [10/02/2008 20:04:19]
Curso de Adobe Dreamweaver CS3. Paso a Paso Crear un vínculo de correo electrónico

12 Cierra tu aplicación de correo.

13 Cierra la ventana del navegador.

14 Haz clic sobre el botón Guardar de la barra de herramientas.

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.

http://www.aulaclic.es/dreamweavercs3/epp_5_3_1.htm (2 de 2) [10/02/2008 20:04:19]


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.

1 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.

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 menu.htm, que aparece en el panel Archivos.

Se abrirá el documento en Dreamweaver.

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.

10 Haz clic sobre el botón Aceptar.

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.

13 Cierra la ventana del navegador.


http://www.aulaclic.es/dreamweavercs3/epp_6_1_1.htm (1 de 2) [10/02/2008 20:04:25]
Curso de Adobe Dreamweaver CS3. Paso a Paso Insertar una imagen

14 Haz clic sobre el botón Guardar de la barra de herramientas.

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.

http://www.aulaclic.es/dreamweavercs3/epp_6_1_1.htm (2 de 2) [10/02/2008 20:04:25]


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.

1 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.

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.

4 Haz doble clic sobre el documento menu.htm, que aparece en el panel Archivos.

Se abrirá el documento en Dreamweaver.

5 Si no aparece el inspector de propiedades, ábrelo a través del menú Ventana, opción Propiedades.

6 Selecciona la imagen, haciendo clic sobre ella.

7 Si el inspector de propiedades no se muestra en su totalidad, pulsa sobre el botón para desplegar sus
propiedades más avanzadas.

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 .
http://www.aulaclic.es/dreamweavercs3/epp_6_1_2.htm (1 de 2) [10/02/2008 20:04:31]
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.

20 Cierra la ventana del navegador.

21 Haz clic sobre el botón Guardar de la barra de herramientas.

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.

http://www.aulaclic.es/dreamweavercs3/epp_6_1_2.htm (2 de 2) [10/02/2008 20:04:31]


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.

1 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.

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 menu.htm, que aparece en el panel Archivos.

Se abrirá el documento en Dreamweaver.

5 Inserta dos líneas en blanco bajo la imagen y sitúa el cursor antes de la imagen de sustitución.

6 Haz clic sobre el menú Insertar.

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.

http://www.aulaclic.es/dreamweavercs3/epp_6_3_2.htm (1 de 3) [10/02/2008 20:04:35]


Curso de Adobe Dreamweaver CS3. Paso a Paso Crear botones Flash

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.

15 Haz clic sobre el botón Aceptar.

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.

17 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 Postre Semana.

En Vínculo: escribe postresemana.htm.

En Guardar como: escribe bt_postres.swf.

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

20 Cierra la ventana del navegador.

21 Haz clic sobre el botón Guardar de la barra de herramientas.

http://www.aulaclic.es/dreamweavercs3/epp_6_3_2.htm (2 de 3) [10/02/2008 20:04:35]


Curso de Adobe Dreamweaver CS3. Paso a Paso Crear botones Flash

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.

http://www.aulaclic.es/dreamweavercs3/epp_6_3_2.htm (3 de 3) [10/02/2008 20:04:35]


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.

1 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.

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 quienes.htm, que aparece en el panel Archivos.

Se abrirá el documento en Dreamweaver.

5 Sitúa el cursor en la línea en blanco que se encuentra bajo el texto Tenemos sedes en: .

6 Haz clic sobre el menú Insertar.

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.


http://www.aulaclic.es/dreamweavercs3/epp_7_2_1.htm (1 de 2) [10/02/2008 20:04:41]
Curso de Adobe Dreamweaver CS3. Paso a Paso Crear y rellenar una tabla

13 En Espacio entre celdas: escribe 2.

14 Haz clic sobre el botón Aceptar.

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í

16 Haz clic sobre el botón Guardar de la barra de herramientas.

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.

http://www.aulaclic.es/dreamweavercs3/epp_7_2_1.htm (2 de 2) [10/02/2008 20:04:41]


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.

1 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.

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 quienes.htm, que aparece en el panel Archivos.

Se abrirá el documento en Dreamweaver.

5 Si no aparece el inspector de propiedades, ábrelo a través del menú Ventana, opción Propiedades.

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

http://www.aulaclic.es/dreamweavercs3/epp_7_3_1.htm (1 de 3) [10/02/2008 20:04:44]


Curso de Adobe Dreamweaver CS3. Paso a Paso Modificar las propiedades de la tabla

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.

16 Selecciona Centro en el desplegable Horiz para centrar el texto en las celdas.

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.

18 Pulsa el botón .

19 En Fnd escribe #AEA484.

20 Selecciona las cuatro últimas filas.

21 En Tam selecciona 10.

22 Selecciona Centro en el desplegable Horiz para centrar el texto en las celdas.

23 Pulsa el botón .

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 .

28 Haz clic sobre el botón Guardar de la barra de herramientas.

http://www.aulaclic.es/dreamweavercs3/epp_7_3_1.htm (2 de 3) [10/02/2008 20:04:44]


Curso de Adobe Dreamweaver CS3. Paso a Paso Modificar las propiedades de la tabla

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.

http://www.aulaclic.es/dreamweavercs3/epp_7_3_1.htm (3 de 3) [10/02/2008 20:04:44]


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.

1 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.

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 quienes.htm, que aparece en el panel Archivos.

Se abrirá el documento en Dreamweaver.

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.

7 Elige la opción Tabla.

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.

http://www.aulaclic.es/dreamweavercs3/epp_7_4_1.htm (1 de 2) [10/02/2008 20:04:52]


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.

15 Elige la opción Tabla.

16 Elige la opción Eliminar fila.

17 Haz clic sobre el botón Guardar de la barra de herramientas.

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.

http://www.aulaclic.es/dreamweavercs3/epp_7_4_1.htm (2 de 2) [10/02/2008 20:04:52]


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.

1 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.

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 quienes.htm, que aparece en el panel Archivos.

Se abrirá el documento en Dreamweaver.

5 Si no aparece el inspector de propiedades, ábrelo a través del menú Ventana, opción Propiedades.

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

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


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.

12 Haz clic sobre el botón Guardar de la barra de herramientas.

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.

http://www.aulaclic.es/dreamweavercs3/epp_7_4_2.htm (2 de 2) [10/02/2008 20:05:02]


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.

1 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.

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 quienes.htm, que aparece en el panel Archivos.

Se abrirá el documento en Dreamweaver.

5 Si no aparece el inspector de propiedades, ábrelo a través del menú Ventana, opción Propiedades.

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 Haz clic sobre el menú Insertar.

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.

http://www.aulaclic.es/dreamweavercs3/epp_8_3_1.htm (1 de 3) [10/02/2008 20:05:09]


Curso de Adobe Dreamweaver CS3. Paso a Paso Crear y configurar 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.

http://www.aulaclic.es/dreamweavercs3/epp_8_3_1.htm (2 de 3) [10/02/2008 20:05:09]


Curso de Adobe Dreamweaver CS3. Paso a Paso Crear y configurar marcos

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.

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.

http://www.aulaclic.es/dreamweavercs3/epp_8_3_1.htm (3 de 3) [10/02/2008 20:05:09]


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.

1 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.

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 tureceta.htm, que aparece en el panel Archivos.

Se abrirá el documento en Dreamweaver.

5 Si no aparece el inspector de propiedades, ábrelo a través del menú Ventana, opción Propiedades.

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.

8 Haz clic sobre el menú Insertar.

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.
http://www.aulaclic.es/dreamweavercs3/epp_9_2_1.htm (1 de 4) [10/02/2008 20:05:18]
Curso de Adobe Dreamweaver CS3. Paso a Paso Insertar elementos de formulario

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.

18 Repite los pasos del 8 al 14, pero con las siguientes diferencias:

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.

20 Haz clic sobre el menú Insertar.

21 Elige la opción Formulario.

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
pulsa Cancelar pues ya tenemos la etiqueta escrita.

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 .

http://www.aulaclic.es/dreamweavercs3/epp_9_2_1.htm (2 de 4) [10/02/2008 20:05:18]


Curso de Adobe Dreamweaver CS3. Paso a Paso Insertar elementos de formulario

28 Pulsa sobre el botón para insertar nuevos elementos en la lista. Añade la etiqueta Postre.

29 Haz clic sobre el botón Aceptar.

30 Selecciona Plato en Seleccionado inicialmente.

31 Sitúa el cursor dentro de la primera celda de la cuarta fila de la segunda tabla.

32 Haz clic sobre el menú Insertar.

33 Elige la opción Formulario.

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
pulsa Cancelar pues ya tenemos la etiqueta escrita.

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

41 Repite los pasos del 35 al 39, pero con las siguientes diferencias:

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.

43 Haz clic sobre el menú Insertar.

44 Elige la opción Formulario.

45 Elige la opción Botón.

46 Haz clic sobre el botón para seleccionarlo.

http://www.aulaclic.es/dreamweavercs3/epp_9_2_1.htm (3 de 4) [10/02/2008 20:05:18]


Curso de Adobe Dreamweaver CS3. Paso a Paso Insertar elementos de formulario

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.

50 Repite los pasos del 43 al 48, pero con las siguientes diferencias:

En Etiqueta escribe Enviar.

En Acción selecciona Enviar formulario.

51 Haz clic sobre el botón Guardar de la barra de herramientas.

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.

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.

http://www.aulaclic.es/dreamweavercs3/epp_9_2_1.htm (4 de 4) [10/02/2008 20:05:18]


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.

1 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.

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 menu.htm, que aparece en el panel Archivos.

Se abrirá el documento en Dreamweaver.

5 Si no aparece el inspector de propiedades, ábrelo a través del menú Ventana, opción Propiedades.

6 Sitúa el cursor en la primera línea.

7 Haz clic sobre el menú Insertar.

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.

http://www.aulaclic.es/dreamweavercs3/epp_10_2_1.htm (1 de 2) [10/02/2008 20:05:25]


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.

18 Haz clic sobre el botón Guardar de la barra de herramientas.

19 Visualiza la página en tu navegador.

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.

http://www.aulaclic.es/dreamweavercs3/epp_10_2_1.htm (2 de 2) [10/02/2008 20:05:25]


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.

1 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.

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.

Se abrirá el documento en Dreamweaver.

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.

10 Haz clic sobre el menú Insertar.

11 Elige la opción Objetos de plantilla.

12 Elige la opción Región editable.


http://www.aulaclic.es/dreamweavercs3/epp_11_3_1.htm (1 de 3) [10/02/2008 20:05:30]
Curso de Adobe Dreamweaver CS3. Paso a Paso Crear una plantilla

13 En Nombre: escribe Título.

14 Haz clic sobre el botón Aceptar.

15 Sitúa el cursor debajo de la tabla.

16 Haz clic sobre el menú Insertar.

17 Elige la opción Objetos de plantilla.

18 Elige la opción Región editable.

19 En Nombre: escribe Región Documento .

20 Haz clic sobre el botón Aceptar.

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.


http://www.aulaclic.es/dreamweavercs3/epp_11_3_1.htm (2 de 3) [10/02/2008 20:05:30]
Curso de Adobe Dreamweaver CS3. Paso a Paso Crear una plantilla

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.

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.

http://www.aulaclic.es/dreamweavercs3/epp_11_3_1.htm (3 de 3) [10/02/2008 20:05:30]


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.

1 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.

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 buscar.htm, que aparece en el panel Archivos.

Se abrirá el documento en Dreamweaver.

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.

12 Haz clic sobre el botón Guardar de la barra de herramientas.

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.

http://www.aulaclic.es/dreamweavercs3/epp_12_6_1.htm (1 de 2) [10/02/2008 20:05:35]


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

http://www.aulaclic.es/dreamweavercs3/epp_12_6_1.htm (2 de 2) [10/02/2008 20:05:35]


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.

1 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.

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 Hacer doble clic sobre el documento quienes.htm, que aparece en el panel Archivos.

Se abrirá el documento en Dreamweaver.

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.


http://www.aulaclic.es/dreamweavercs3/epp_13_2_1.htm (1 de 2) [10/02/2008 20:05:37]
Curso de Adobe Dreamweaver CS3. Paso a Paso Insertar la fecha última actualización

6 Haz clic sobre el botón Guardar de la barra de herramientas.

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.

http://www.aulaclic.es/dreamweavercs3/epp_13_2_1.htm (2 de 2) [10/02/2008 20:05:37]


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.

1 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.

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 marcos.htm, que aparece en el panel Archivos.

Se abrirá el documento en Dreamweaver.

5 Si no aparece el inspector de propiedades, ábrelo a través del menú Ventana, opción Propiedades.

6 Sitúa el cursor debajo de la imagen de sustitucion de email que habíamos incluido en el marco izquierdo.

7 Haz clic sobre el menú Insertar.

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.
http://www.aulaclic.es/dreamweavercs3/epp_14_1_1.htm (1 de 2) [10/02/2008 20:05:42]
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.

22 Haz clic sobre el botón Guardar de la barra de herramientas.

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.

http://www.aulaclic.es/dreamweavercs3/epp_14_1_1.htm (2 de 2) [10/02/2008 20:05:42]


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.

1 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.

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 menu.htm, que aparece en el panel Archivos.

Se abrirá el documento en Dreamweaver.

5 Si no aparece el inspector de propiedades, ábrelo a través del menú Ventana, opción Propiedades.

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.

http://www.aulaclic.es/dreamweavercs3/epp_15_2_1.htm (1 de 2) [10/02/2008 20:05:45]


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.

18 Haz clic sobre el botón Guardar de la barra de herramientas.

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

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.

http://www.aulaclic.es/dreamweavercs3/epp_15_2_1.htm (2 de 2) [10/02/2008 20:05:45]


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

Ejercicio paso a paso. Unidad 17. Crear una Búsqueda


hoja de estilo

Objetivo.

Practicar las operaciones que hay que realizar para crear una hoja de estilo.

1 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.

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.

http://www.aulaclic.es/dreamweavercs3/epp_17_1_1.htm (1 de 5) [10/02/2008 20:05:51]


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

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&iacute;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

http://www.aulaclic.es/dreamweavercs3/epp_17_1_1.htm (2 de 5) [10/02/2008 20:05:51]


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

(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&aacute;logo</a></span>

<span class="item"><a href="../criticas.php">Cr&iacute;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 type="text/javascript">

<!--

google_ad_client = "pub-1875034419890743";

google_ad_width = 125;

google_ad_height = 125;

google_ad_format = "125x125_as_rimg";

google_cpa_choice = "CAAQz9vnzwEaCIUwxV0cHMEdKMO393M";

//-->

</script>

http://www.aulaclic.es/dreamweavercs3/epp_17_1_1.htm (3 de 5) [10/02/2008 20:05:51]


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

<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 type="text/javascript">

<!--

google_ad_client = "pub-1875034419890743";

google_ad_width = 125;

google_ad_height = 125;

google_ad_format = "125x125_as_rimg";

google_cpa_choice = "CAAQz9vnzwEaCIUwxV0cHMEdKMO393M";

//-->

</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.
http://www.aulaclic.es/dreamweavercs3/epp_17_1_1.htm (4 de 5) [10/02/2008 20:05:51]
Curso de Adobe Dreamweaver CS3. Paso a Paso Crear una hoja de estilo

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

<!-- TemplateBeginEditable name="contenido" -->contenido<!-- TemplateEndEditable -->

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 &copy; aulaClic S.L. 2006

</div>

16 Cierra todos los archivos guardando los cambios.

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.

http://www.aulaclic.es/dreamweavercs3/epp_17_1_1.htm (5 de 5) [10/02/2008 20:05:51]


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.

1 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.

2 Abre el sitio libreria.

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;

http://www.aulaclic.es/dreamweavercs3/epp_17_4_1.htm (1 de 2) [10/02/2008 20:05:54]


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;

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.

http://www.aulaclic.es/dreamweavercs3/epp_17_4_1.htm (2 de 2) [10/02/2008 20:05:54]


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.

1 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.

2 Abre el sitio libreria.

3 Abre el archivo estilo_libreria.css.

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-family: Verdana, Arial, Helvetica, sans-serif;

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 {

http://www.aulaclic.es/dreamweavercs3/epp_17_7_1.htm (1 de 3) [10/02/2008 20:05:56]


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

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 {
http://www.aulaclic.es/dreamweavercs3/epp_17_7_1.htm (2 de 3) [10/02/2008 20:05:56]
Curso de Adobe Dreamweaver CS3. Paso a Paso Controles de Fuente

font-size: 9px;

10 Guarda los cambios.

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.

http://www.aulaclic.es/dreamweavercs3/epp_17_7_1.htm (3 de 3) [10/02/2008 20:05:56]


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

Ejercicio paso a paso. Unidad 17. Controles de Búsqueda


Ratón

Objetivo.

Practicar el uso de controles de ratón.

1 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.

2 Abre el sitio libreria.

3 Abre el archivo estilo_libreria.css.

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;

5 Guarda los cambios.

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.

http://www.aulaclic.es/dreamweavercs3/epp_17_7_2.htm (1 de 2) [10/02/2008 20:06:02]


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

© aulaClic. Todos los derechos reservados. Free Computer tutorials. Prohibida la reproducción por cualquier medio.
Septiembre - 2007.

http://www.aulaclic.es/dreamweavercs3/epp_17_7_2.htm (2 de 2) [10/02/2008 20:06:02]


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

Ejercicio paso a paso. Unidad 17. Controles de Búsqueda


Fondo

Objetivo.

Practicar el uso de controles de fondo.

1 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.

2 Abre el sitio libreria.

3 Abre el archivo estilo_libreria.css.

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-family: Verdana, Arial, Helvetica, sans-serif;

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);
http://www.aulaclic.es/dreamweavercs3/epp_17_9_1.htm (1 de 2) [10/02/2008 20:06:04]
Curso de Adobe Dreamweaver CS3. Paso a Paso Controles de Fondo

background-repeat: no-repeat;

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;

letter-spacing: 1px;

background: url(imagenes/fondo_menu.gif) repeat-x;

7 Guarda los cambios.

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.

http://www.aulaclic.es/dreamweavercs3/epp_17_9_1.htm (2 de 2) [10/02/2008 20:06:04]


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

Ejercicio paso a paso. Unidad 17. Controles de Búsqueda


Márgenes y Borde

Objetivo.

Practicar el uso de controles de márgenes y borde.

1 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.

2 Abre el sitio libreria.

3 Abre el archivo estilo_libreria.css.

4 Para que en Internet Explorer se muestre todo el contenido centrado añadiremos esta propiedad a la etiqueta body:

body {

font-family: Verdana, Arial, Helvetica, sans-serif;

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.

http://www.aulaclic.es/dreamweavercs3/epp_17_11_1.htm (1 de 6) [10/02/2008 20:06:07]


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

La clase contenedor también deberá ir centrada, así que también deberemos aplicarle las mismas propiedades:

#cabecera {

background-image: url(imagenes/cabecera.jpg);

background-repeat: no-repeat;

background-color: white;

margin-left: auto;

margin-right: auto;

text-align: right;

#menu {

font-size: 13px;

letter-spacing: 1px;

background: url(imagenes/fondo_menu.gif) repeat-x;

margin-left: auto;

margin-right: auto;

text-align: left;

.contenedor {

margin-left: auto;

margin-right: auto;
http://www.aulaclic.es/dreamweavercs3/epp_17_11_1.htm (2 de 6) [10/02/2008 20:06:07]
Curso de Adobe Dreamweaver CS3. Paso a Paso Controles de Márgenes y Borde

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;

letter-spacing: 1px;

background: url(imagenes/fondo_menu.gif) repeat-x;

margin-left: auto;

margin-right: auto;

text-align: left;

http://www.aulaclic.es/dreamweavercs3/epp_17_11_1.htm (3 de 6) [10/02/2008 20:06:07]


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

margin-bottom: 20px;

padding: 3px 0px 3px 0px;

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 {

padding: 3px 12px 3px 12px;

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 {

margin-bottom: 15px;

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:

http://www.aulaclic.es/dreamweavercs3/epp_17_11_1.htm (4 de 6) [10/02/2008 20:06:07]


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

#anuncios .item {

margin-bottom: 10px;

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;

padding-bottom: 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 {

http://www.aulaclic.es/dreamweavercs3/epp_17_11_1.htm (5 de 6) [10/02/2008 20:06:07]


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

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;

margin-bottom: 15px;

padding-top: 10px;

padding-bottom: 5px;

border-top: 5px solid #E35331;

15 Guarda los cambios.

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.

http://www.aulaclic.es/dreamweavercs3/epp_17_11_1.htm (6 de 6) [10/02/2008 20:06:07]


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

Ejercicio paso a paso. Unidad 17. Controles de Búsqueda


Bloque

Objetivo.

Practicar el uso de controles de bloque.

1 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.

2 Abre el sitio libreria.

3 Abre el archivo estilo_libreria.css.

4 Al bloque con id cabecera le daremos un ancho y un alto para que se ajuste a la imagen de fondo:

#cabecera {

background-image: url(imagenes/cabecera.jpg);

background-repeat: no-repeat;

background-color: white;

text-align: right;

margin-left: auto;

margin-right: auto;

width: 780px;

height: 150px;
http://www.aulaclic.es/dreamweavercs3/epp_17_12_1.htm (1 de 5) [10/02/2008 20:06:09]
Curso de Adobe Dreamweaver CS3. Paso a Paso Controles de Bloque

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;

letter-spacing: 1px;

background: url(imagenes/fondo_menu.gif) repeat-x;

margin-left: auto;

margin-right: auto;

text-align: left;

margin-bottom: 20px;

padding: 3px 0px 3px 0px;

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;

http://www.aulaclic.es/dreamweavercs3/epp_17_12_1.htm (2 de 5) [10/02/2008 20:06:09]


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

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 {

margin-bottom: 15px;

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 {

http://www.aulaclic.es/dreamweavercs3/epp_17_12_1.htm (3 de 5) [10/02/2008 20:06:09]


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

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;

margin-bottom: 15px;

padding-top: 10px;

padding-bottom: 5px;

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.

http://www.aulaclic.es/dreamweavercs3/epp_17_12_1.htm (4 de 5) [10/02/2008 20:06:09]


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

La tercera deberá ser de 10 píxeles de altura.

.img_item {

float: left;

.salto_linea {

clear: left;

height: 15px;

.alto_10 {

height: 10px;

12 Guarda los cambios.

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.

http://www.aulaclic.es/dreamweavercs3/epp_17_12_1.htm (5 de 5) [10/02/2008 20:06:09]


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.

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.

http://www.aulaclic.es/dreamweavercs3/epp_19_7_1.htm (1 de 2) [10/02/2008 20:06:17]


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

http://www.aulaclic.es/dreamweavercs3/epp_19_7_1.htm (2 de 2) [10/02/2008 20:06:17]


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

Ejercicio paso a paso. Unidad 19. Crear un Búsqueda


Servidor de Prueba

Objetivo.

Practicar las operaciones necesarias para crear un Servidor de Prueba.

1 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.

2 Si no aparece el panel Archivos, ábrelo a través del menú Ventana, opción Archivos.

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.


http://www.aulaclic.es/dreamweavercs3/epp_19_9_1.htm (1 de 2) [10/02/2008 20:06:23]
Curso de Adobe Dreamweaver CS3. Paso a Paso Crear Servidor de Prueba

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.

http://www.aulaclic.es/dreamweavercs3/epp_19_9_1.htm (2 de 2) [10/02/2008 20:06:23]


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

Ejercicio paso a paso. Unidad 19. Crear una Búsqueda


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.

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.
http://www.aulaclic.es/dreamweavercs3/epp_19_11_1.htm (1 de 2) [10/02/2008 20:06:29]
Curso de Adobe Dreamweaver CS3. Paso a Paso Crear una base de datos

© aulaClic. Todos los derechos reservados. Free Computer tutorials. Prohibida la reproducción por cualquier medio.
Septiembre - 2007.

http://www.aulaclic.es/dreamweavercs3/epp_19_11_1.htm (2 de 2) [10/02/2008 20:06:29]


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

Ejercicio paso a paso. Unidad 19. Crear una Búsqueda


Tabla

Objetivo.

Practicar las operaciones necesarias para crear una Tabla.

1 Si WAMP no se está ejecutando, lánzalo para realizar este ejercicio.

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, en el desplegable del menú de la izquierda selecciona la base de datos bd_libreria.

http://www.aulaclic.es/dreamweavercs3/epp_19_12_1.htm (1 de 2) [10/02/2008 20:06:37]


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.

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.

http://www.aulaclic.es/dreamweavercs3/epp_19_12_1.htm (2 de 2) [10/02/2008 20:06:37]


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.

1 Si WAMP no se está ejecutando, lánzalo para realizar este ejercicio.

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, en el desplegable del menú de la izquierda selecciona la base de datos bd_libreria.

http://www.aulaclic.es/dreamweavercs3/epp_19_13_1.htm (1 de 2) [10/02/2008 20:06:44]


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.

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.

http://www.aulaclic.es/dreamweavercs3/epp_19_13_1.htm (2 de 2) [10/02/2008 20:06:44]


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.

1 Si WAMP no se está ejecutando, lánzalo para realizar este ejercicio.

2 Si e