CurSode Dreamweaver Cs 3

Cursos de Informtica aulaClic
Curso de Dreamweaver CS3
aulaClic S.L. Todos los derechos reservados.
www.aulaclic.es
aulaClic. Curso de Dreamweaver CS3. ndice
Cmo utilizar este curso.
1. Conceptos bsicos de 10. Multimedia 19. Servidor de Pruebas

Dreamweaver CS3 11. Las plantillas 20. Pginas Dinmicas
2. El entorno de trabajo 12. HTML desde Dreamweaver 21. Cmo crear un Blog
3. Configuracin de un sitio local 13. Otros elementos 22. XML y RSS
4. El texto 14. Capas 23. Acceso a datos con Spry
5. Hiperenlaces 15. Comportamientos 24. AJAX y Spry Framework
6. Imgenes 16. Comportamientos Avanzados 25. Spry y Formularios
7. Tablas 17. Estilos CSS Avanzado 26. Controles Spry Avanzados
8. Marcos 18. Sitios Remotos
9. Formularios
ndice detallado
Unidad 1. Conceptos bsicos de Dreamweaver CS3
Qu es Dreamweaver CS3
HTML bsico
Novedades de Dreamweaver CS3
Editar pginas web
Cmo tener una pgina en Internet
Arrancar y cerrar Dreamweaver CS3
Compaginar dos sesiones
Abrir y guardar documentos
Mi primera pgina
Unidad 2. El entorno de trabajo

La pantalla inicial
Las barras
Los paneles e inspectores
Personalizar el rea de trabajo
Vistas de un documento
La ayuda
Unidad 3. Configuracin de un sitio local

Introduccin
Crear o editar un sitio web sin conexin a Internet
Vistas del sitio
Subir archivos al servidor
Comprobar tamao para optimizar la carga
Propiedades del documento
Los colores
Unidad 4. El texto
Caractersticas del texto
Listas
Caracteres especiales
Estilos CSS. Introduccin
Crear un estilo personalizado
El Panel CSS
Crear un nuevo estilo
Gestionar estilos CSS
Aplicar un estilo
Hojas de Estilos
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 2
Unidad 5. Hiperenlaces
Introduccin
Tipos de enlaces
Crear enlaces
Personalizar nuevos enlaces
Destino del enlace
Formato del enlace
Enlace a correo electrnico
Vnculos rotos
Unidad 6. Imgenes
Introduccin
Tipos de imgenes para una web
Insertar una imagen
Cambiar el tamao de una imagen
Mapas de imagen
Imagen de sustitucin. Rollover
Botones Flash
Texto Flash
Barra de navegacin
Unidad 7. Tablas
Introduccin
Insertar una tabla
Rellenar las celdas
Seleccionar elementos de una tabla
Formato de tabla
Cambiar tamao de tabla y celdas
Aadir y eliminar filas y columnas
Anidar, dividir y combinar celdas
Modos de tabla
Adaptar webs a distintas resoluciones
Unidad 8. Marcos
Introduccin
Crear marcos
Seleccionar marcos
Guardar
Configurar marcos
Contenido del marco
Unidad 9. Formularios
Introduccin
Elementos de formulario
Crear formularios
Validar formularios
Unidad 10. Multimedia

Pelculas Flash
Sonido
Vdeos
Unidad 11. Las plantillas

Introduccin
Crear plantillas
Establecer regiones editables en una plantilla
Basar pginas en una plantilla

Unidad 12. HTML desde Dreamweaver
Etiquetas
Entidades HTML
Listado de Entidades HTML
El inspector de cdigo
Completar las etiquetas
Contraer y expandir cdigo
Errores en el cdigo
Buscar y reemplazar
Expresiones Regulares
Bsqueda en Etiquetas
Unidad 13. Otros elementos

Marquesinas
Fecha
Regla horizontal
Cdigo de otras pginas
Unidad 14. Capas

Introduccin
Insertar una capa
Formato de una capa
Unidad 15. Comportamientos

Introduccin
Insertar un comportamiento
Mostrar-Ocultar capas
Llamar JavaScript
Unidad 16. Comportamientos Avanzados

Mensajes Emergentes
Texto de la Barra de Estado
Carga Previa de Imgenes
Abrir una Ventana del Navegador
Comprobar Navegador
Comprobar Plug-ins
Mens de Salto
Unidad 17. Estilos CSS Avanzado

Aplicar Estilos CSS
Estructura CSS
Selectores CSS
Selectores de Atributo
Pseudo-clases y Pseudo-elementos CSS
Controles de Fuente
Espaciado
Aspecto del texto
Controles de Ratn
Controles de Lista
Controles de Fondo
Controles de Margen
Bordes
Controles de Elementos de Bloque y en Lnea
Controles de Posicin
Controles de Visibilidad

Unidad 18. Sitios Remotos
Configurar un Sitio Remoto
El Panel Archivos
Sincronizar Sitios
Unidad 19. Servidor de Pruebas

Introduccin a PHP
Bases de datos
Estructura PHP
Instalar un Servidor Local con WAMP
Trabajar con Servidor Local WAMP
Configurar un Servidor de Pruebas
Introduccin a phpMyAdmin
Crear una Base de Datos en phpMyAdmin
Crear una Tabla en phpMyAdmin
Insertar Datos en una Tabla en phpMyAdmin
Modificar una Tabla en phpMyAdmin
Modificar Datos de una Tabla
Establecer Privilegios en phpMyAdmin
Unidad 20. Pginas Dinmicas

Introduccin
Crear una Conexin a la Base de Datos
Juegos de Registros o RecordSets
Mostrar Datos Dinmicos
Repeticiones
Orden de Juegos de Registros
Filtrado de Juegos de Registros
Paginacin de Registros
Mostrar/Ocultar Regiones
Uso de Variables
Pginas Maestro-Detalle
Asistente de Insercin de Registros
Asistente de Actualizacin de Registros
Asistente de Eliminacin de Registros
Juegos de Registros Avanzados
Unidad 21. Cmo crear un Blog

Introduccin
Estructura de Datos
Interfaz Pblica
Interfaz Privada
Insertar Nuevos elementos
Listado de elementos
Modificacin de elementos
Eliminacin de elementos
Restringir Acceso
Unidad 22. XML y RSS

Introduccin
Importar datos de un Archivo Externo
Trabajar con elementos XML
Crear Repeticiones
Ordenar elementos
Sentencias condicionales
Insertar un fragmento XSLT
Paso de parmetros

Unidad 23. Acceso a datos con Spry
Introduccin
Conjunto de datos XML
Crear una Regin de Spry
Repeticin de Elementos
Listas de Repeticin
Tablas de Datos
Mostrar Maestro/Detalle
Unidad 24. AJAX y Spry Framework

Introduccin
Incluir Spry
Importar Datos
Definiendo Regiones
Mostrar informacin
Crear Repeticiones
Ordenar Registros
Variables Preestablecidas
Condicionales
Filtros
Eliminar Filas repetidas
Actualizar la Carga de un archivo XML
Modo Maestro/Detalle
Modo Maestro/Detalle con diferentes fuentes XML
Spry y Estilos CSS
Unidad 25. Spry y Formularios

Introduccin
Validacin de Campos de Texto
Estados de Validacin
Validacin de Campos Desplegables
Casillas de Verificacin
reas de Texto
Unidad 26. Controles Spry Avanzados

Introduccin
Barra de mens
Navegacin por Fichas
Control Acorden
Panel con Contraccin
Cambiar Estilos CSS

Ejercicios paso a paso
3. Crear un sitio web local 17. Crear una hoja de estilos 20. Filtros con Parmetros
3. Crear nuevo documento y modificar 17. Utilizando pseudo-elementos y 20. Insercin de Registros
sus propiedades clases 20. Utilizar sentencias SQL
4. Insertar texto y modificar sus 17. Controles de fuente 21. Estructura de datos de un Blog
propiedades 17. Controles de ratn 21. Interfaz Pblica
4. Convertir texto en una lista 17. Controles de fondo 21. Creacin de un men de
4. Crear estilos CSS 17. Controles de mrgenes y bordes Administracin
5. Crear un hiperenlace 17. Controles de bloque 21. Insercin de elementos
5. Crear un vnculo de correo 19. Instalacin de WAMP 21. Listado de elementos
electrnico 19. Crear un servidor de pruebas 21. Modificacin de elementos
6. Insertar una imagen 19. Crear una Base de Datos 21. Eliminacin de elementos
6. Crear mapas de imagen 19. Crear una Tabla 21. Restringir acceso
6. Crear botones Flash 19. Importar datos a una Tabla 22. Preparando el servidor de pruebas
7. Crear y rellenar una tabla 19. Asignar privilegios en una base 22. Importar datos XML
7. Modificar las propiedades de la de datos 22. Enlaces con elementos
tabla 20. Crear una conexin a una Base 22. Repeticin de elementos
7. Aadir y eliminar filas de Datos 22. Ordenacin de elementos
7. Combinar celdas 20. Crear un Recordset 22. Insertar XSLT en una pgina
8. Crear y configurar marcos 20. Crear Texto Dinmico dinmica
9. Insertar elementos de formulario 20. Repeticiones de Texto Dinmico 22. Paso de parmetros
10. Insertar un archivo de audio 20. Ordenacin de un Recordset 24. Incluir Spry
11. Crear una plantilla 20. Filtrado de Registros 24. Crear un Dataset
12. Buscar y reemplazar 20. Paginacin de Registros 24. Crear una Regin con Informacin
13. Insertar fecha 20. Recuento de Registros 24. Crear repeticiones de Registros
14. Insertar una capa 20. Ocultar/Mostrar Regiones 24. Crear Filtros
15. Crear comportamiento 20. Enlaces con Parmetros
Ejercicios propuestos Pruebas evaluativas

3. Crear sitio local y modificar las propiedades de la 1. Conceptos bsicos de Dreamweaver CS3
pgina 2. El entorno de trabajo
4. Modificar las propiedades del texto 3. Configuracin de un sitio local
5. Crear hiperenlaces 4. El texto
6. Insertar imgenes 5. Hiperenlaces
7. Modificar tablas 6. Imgenes
8. Configurar marcos 7. Tablas
9. Insertar elementos de formulario 8. Marcos
10. Insertar elementos multimedia 9. Formularios
11. Trabajar con plantillas 10. Multimedia
12. Buscar y reemplazar 11. Las plantillas
13. Insertar otros elementos 12. HTML desde Dreamweaver
14. Insertar capas 13. Otros elementos
15. Crear comportamientos 14. Capas
16. Crear comportamientos avanzados 15. Comportamientos
17. Estilos CSS avanzados 16. Comportamientos Avanzados
19. Servidor de Pruebas 17. Estilos CSS Avanzados
20. Pginas Dinmicas 18. Sitios Remotos
21. Cmo hacer un Blog 19. Servidor de Pruebas
22. XML y RSS 20. Pginas Dinmicas
23. Spry y Acceso a datos 21. Cmo crear un Blog
24. AJAX y Spry Framework 22. XML y RSS
25. Spry y los Formularios 23. Spry y Acceso a datos
26. Controles Avanzados Spry 24. AJAX y Spry Framework
25. Spry y los Formularios
26. Controles Avanzados Spry

Cmo utilizar este curso
Todos los cursos de aulaClic siguen la misma didctica, si ya has realizado alguno de nuestros cursos en
pdf puedes saltarte esta pgina. Si no, es conveniente que leas estas instrucciones antes de empezar el
curso.
Navegacin.
Si pretendes seguir el curso visualizndolo por pantalla, el curso incluye enlaces y marcadores que
permiten moverte ms cmodamente por el texto.
Al principio del curso tienes el ndice detallado donde encontrars todos las unidades con sus apartados,
todos los ejercicios y todas las evaluaciones, haciendo clic sobre el apartado que quieras te desplazars al
mismo. En medio del texto tambin tienes enlaces tal como te describimos ms adelante.
Y finalmente puedes utilizar los marcadores. En el panel de marcadores,

situado normalmente a la izquierda, aparecen enlaces a los distintos temas
y bloques que forman el curso. Cada uno de ellos se puede expandir
pulsando en +, mostrando ms marcadores, correspondientes a apartados
de las unidades o secciones concretas.
Estructura del curso.
Al seguir manuales de informtica cada lector va saltndose los prrafos que no le interesan porque es
informacin muy compleja para su nivel o porque son cosas demasiado bsicas para su nivel. Este curso
trata de aliviar este problema organizando los contenidos por niveles. Hemos establecido tres niveles:
bsico, medio y avanzado.
Cmo se navega por estos niveles? El curso tiene una estructura troncal que es el nivel medio, pero en
los puntos que se ha considerado oportuno tenemos una referencia a una pgina de otro nivel que se puede
consultar o no segn criterio del lector.
En un apartado del nivel medio te puedes encontrar en algunos casos con este icono que te indica
que en este punto puedes consultar una pgina de nivel bsico donde se te explicarn conceptos ms
sencillos relacionados con el tema. En otras ocasiones puedes encontrar este icono para ir al nivel
avanzado, donde se te explicarn opciones ms avanzadas.
Las pginas bsicas y avanzadas las tienes en los bloques "Pginas bsicas" y "Pginas avanzadas"
despus del bloque principal.
Adems, en cada una de estas pginas tienes un enlace para volver al punto del nivel medio del que se
parti.
Los rtulos de las pginas aparecen de un color u otro dependiendo del nivel, estos son los colores:
Nivel bsico. Nivel medio. Nivel avanzado.

As sabrs en todo momento en qu nivel te encuentras.
Si es la primera vez que utilizas el programa del que trata el curso, te aconsejamos dejar los niveles
avanzados para una segunda lectura.
Nomenclatura.
De este color se pondrn los comandos que el usuario puede ejecutar y los nombres de las opciones;
as el texto o lo que hay que escribir en los comandos, as los conceptos ms importantes, y finalmente
los nombres de ventanas o apartados tendrn este aspecto.
Ejercicios y evaluaciones
En las unidades encontrars dos tipos de ejercicios:
Ejercicios paso a paso, los vers sealados con esta imagen , son ejercicios que te permiten
practicar los conceptos que se acaban de explicar. En estos ejercicios te explicamos paso a paso lo que
tienes que hacer y slo tienes que seguir las indicaciones. Te aconsejamos realizarlo en cuanto te lo
encuentres. Estos ejercicios los tienes agrupados en el bloque "Ejercicios paso a paso".
Ejercicios propuestos, los vers sealados con esta imagen , son ejercicios que aparecen al final de
la unidad y permiten recordar lo estudiado a lo largo de la unidad. En estos ejercicios te planteamos el
ejercicio sin decirte cmo lo tienes que resolver. Tienes que intentar resolverlo recordando lo que has
estudiado en la unidad y consultando la teora. Si no sabes cmo resolverlo, al final del ejercicio encontrars
un enlace a una pgina con la solucin o indicaciones sobre cmo resolverlo. Estos ejercicios los tienes
agrupados en el bloque "Ejercicios propuestos" y las soluciones en el bloque "Ayuda a los ejercicios
propuestos".
Es importante realizar los ejercicios en el mismo orden que aparecen en el curso ya que algunos utilizan
archivos que se crean en ejercicios anteriores. Otros archivos, te los proporcionamos nosotros, en la carpeta
ejercicios como te indicaremos en los primeros temas del curso.
Pruebas evaluativas consisten en un formulario de tipo test sobre el contenido de la unidad. Al final de
la pgina encontrars un enlace a una pgina con la solucin. Estas pruebas las tienes agrupadas en el
bloque "Pruebas evaluativas" y las soluciones en el bloque "Pruebas evaluativas. Soluciones."
Aprender ms
La explicacin de algunos apartados se completa con un videotutorial. Si te falta alguno de estos

videotutoriales, puedes encontrarlo en www.aulaclic.es.
Preguntas.
Este curso est extrado de la pgina web www.aulaclic.es. Si tienes alguna duda o pregunta puedes
plantearla en el foro de aulaClic.
Nota sobre el curso: Debido a las propiedades del formato PDF, algunos estilos y acciones no se
mostrarn correctamente, como si se siguiese el curso en formato web.
Por otro lado os agradeceremos que nos ayudis a mejorar este curso con vuestras crticas y comentarios;
por favor, escribidnos a travs de nuestra pgina de contacto.

1. Conceptos bsicos de Dreamweaver CS3
Qu es Dreamweaver CS3
Dreamweaver CS3 es un software fcil de usar que permite crear pginas web profesionales.
Las funciones de edicin visual de Dreamweaver CS3 permiten agregar rpidamente diseo y funcionalidad
a las pginas, sin la necesidad de programar manualmente el cdigo HTML.
Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc., de una
forma muy sencilla y visual.
Adems incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar con mapas
visuales de los sitios web, actualizando el sitio web en el servidor sin salir del programa.
Para seguir este curso te puedes descargar la versin gratuita de Dreamweaver desde la pgina de Adobe,
la versin caduca al cabo de 30 das, pero seguro que te animas a comprar la versin de pago de este
estupendo programa.
Los logotipos de Dreamweaver son propiedad de Adobe, as como las marcas registradas Dreamweaver y
Adobe. aulaClic no tiene ninguna relacin con Adobe.
Si no conoces las caractersticas bsicas de HTML puedes verlas aqu.
Novedades de Dreamweaver CS3
En este punto comentaremos las caractersticas que aporta esta nueva versin sobre la anterior.
Mejoras en Spry. El "Framework" o estructura Spry ha recibido un fuerte impulso en esta versin de
Dreamweaver. Spry es un conjunto de archivos JavaScript que permiten la inclusin de elementos dinmicos
en las pginas HTML. Por ejemplo se pueden incluir acordeones, barras de menus, validacin de formularios,
acceso a datos XML, etc.
Tambin se han incluido efectos spry que se aplican a elementos ya existentes en la pgina HTML para
hacer que se desvanezcan, reduzcan su tamao, se resalten, etc.
Mayor integracin con Photoshop y Fireworks. Ahora es posible pegar directamente imgenes desde
Photoshop en una pgina HTML de Dreamweaver. Luego con un doble clic podremos ir a editar la imagen en
Photoshop. Se pueden importar imgenes con capas.
Mejoras en la comprobacin de la compatiblidad con diferentes navegadores. Dreamweaver CS3 puede

generar informes con los problemas de visualizacin de elementos CSS en los navegadores ms utilizados.
Adobe CSS Advisor es un sitio web accesible desde Dreamweaver que contiene informacin til para
resolver los problemas de compatibilidad entre navegadores.
Mejoras en CSS. La administracin de CSS es ms fcil, ahora se pueden trasladar elementos CSS
entre diferentes hojas de estilo. Tambin ha aumentado la cantidad de plantillas CSS disponibles para aplicar

a nuestras pginas web.
Adobe Device Central, incluido en la Adobe Creative Suite, facilita la publicacin en dispositivos mviles,
PDAs, etc..
Editar pginas web
Cualquier editor de texto permite crear

pginas web. Para ello slo es necesario
crear los documentos con la extensin HTML
o HTM, e incluir como contenido del
documento el cdigo HTML deseado. Puede
utilizarse incluso el Bloc de notas para
hacerlo.
Pero crear pginas web mediante el cdigo

HTML es ms costoso que hacerlo utilizando
un editor grfico. Al no utilizar un editor
grfico cuesta mucho ms insertar cada uno
de los elementos de la pgina, al mismo
tiempo que es ms complicado crear una apariencia profesional para la pgina.
Hoy en da existe una amplia gama de editores de pginas web. Uno de los ms utilizados, y que destaca
por su sencillez y por las numerosas funciones que incluye, es Adobe Dreamweaver.
Adems de Dreamweaver, existen otra serie de buenos editores de pginas web, como pueden ser
Microsoft Frontpage, Adobe Pagemill, Adobe GoLive, NetObjects Fusion, CutePage, HotDog Proffesional,
Netscape Composer y Arachnophilia, algunos de los cuales tienen la ventaja de ser gratuitos.
Cmo tener una pgina en Internet
Para poder poner una pgina web en Internet, es necesario contratar a alguna empresa con servidores que
pueda alojarla y hacerla accesible desde Internet las 24 horas del da. El precio por disponer de espacio propio
en el servidor depender de la empresa, del espacio en disco, volumen de transferencia y otras opciones que
podamos contratar.
Hay empresas que ofrecen este servicio gratuitamente, pero con ciertas limitaciones: poco espacio de
disco, lentitud y nombre de nuestra pgina precedido por el de la suya. Hay que tener tambin en cuenta que
estas empresas deben generar ingresos de alguna forma, por lo que se dedican a vender espacios
publicitarios dentro de nuestras pginas, publicidad que no podremos negarnos a incluir en ellas.
Por estos motivos, no se recomienda utilizar hospedaje gratuito para la pgina de una empresa, aunque s
es aceptable para una pgina personal.
Cuando se va a contratar un servicio de hospedaje es necesario contratar tambin un dominio, tarea de la

que se suele encargar la propia empresa de hospedaje. Registrar un dominio consiste en registrar un nombre
para nuestra pgina. Este nombre no puede estar repetido en Internet, ha de ser nico, al igual que ocurre con
los nombres de las empresas. Es posible registrar un mismo nombre con distintas terminaciones, como por
ejemplo, .net, .org, .es o .com.
En el caso de los hospedajes gratuitos no es necesario registrar ningn dominio, ya que nuestra pgina no
ser ms que un archivo dentro de la de la empresa contratada.
A la hora de contratar un servicio de hospedaje tambin hay que tener en cuenta el nmero de cuentas de
correo electrnico propias que pueden habilitarse y si disponemos de una base de datos para poder acceder a
ella a travs de programacin va Web, aunque esto ltimo ser til slo para usuarios avanzados.
Si piensas contratar un servicio de hospedaje te recomendamos Alojalia.com
En cualquier caso, una vez tengas tu espacio en Internet, darle contenido es muy sencillo.
Dreamweaver te permite crear una copia local (en tu ordenador) del sitio web que luego querrs que se
encuentre a disposicin de todo el mundo en Internet.
Por tanto, una vez hayas terminado de disearla en modo local slo tendrs que subirla a tu servidor
manteniendo la estructura del local. Es decir, debers subir todos los archivos tal y como aparecen en tu
disco duro, respetando el nombre de los archivos y la organizacin de las carpetas. Si no lo haces de
este modo, tu sitio experimentar fallos y enlaces que no funcionarn.
Recuerda que ser mejor que no utilices caracteres especiales como acentos o ees, ni espacios en
blanco. De esta forma te asegurars de que el servidor puede reconocer sin ningn tipo de problemas los
nombres de los archivos que alojes en l.
Para evitar errores de enlaces rotos o imgenes que no se muestran intenta escribir, tambin, los
nombres en minscula. Algunos servidores distinguen entrre maysculas y minsculas, por lo que si en tu
pgina quieres mostrar la imgen foto1.jpg debers guardarla con ese nombre y no como Foto1.jpg. Evitars
horas perdidas buscando fallos.

Arrancar y cerrar Dreamweaver CS3
Veamos las dos formas bsicas de arrancar Dreamweaver CS3.
Desde el botn Inicio situado, normalmente, en la esquina inferior izquierda de la pantalla.
Colocar el cursor y hacer clic sobre el botn Inicio, se despliega un men; al colocar el cursor sobre Todos
los programas aparece otra lista con los programas que hay instalados en tu ordenador, buscar Adobe,
seguidamente Dreamweaver CS3, hacer clic sobre l, y se arrancar el programa.
Desde el icono de Dreamweaver CS3 del escritorio .
Puedes arrancar Dreamweaver CS3 ahora para ir probando todo lo que te explicamos. Cuando realices los
ejercicios tambin puedes compaginar dos sesiones de la forma que te explicamos aqu.
Para cerrar Dreamweaver MX 2004, puedes utilizar cualquiera de las siguientes operaciones:
Hacer clic en el botn cerrar
Pulsar la combinacin de teclas ALT+F4.
Hacer clic sobre el men Archivo y elegir la opcin Salir.
Si existe algn documento modificado que no ha sido guardado antes de cerrar Dreamweaver, se te pedir
confirmacin para guardar o no cada uno de ellos.
Abrir y guardar documentos
Para abrir un documento, puedes utilizar cualquiera de las siguientes operaciones.
Hacer clic en el botn abrir de la barra de herramientas estndar.
Pulsar la combinacin de teclas Ctrl+O.
Hacer clic sobre el men Archivo y elegir la opcin Abrir.
Hacer doble clic sobre el archivo en la ventana del sitio.

Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes operaciones.
Hacer clic en el botn abrir de la barra de herramientas estndar.
Pulsar la combinacin de teclas Ctrl+N.
Hacer clic sobre el men Archivo y elegir la opcin Nuevo.
Hacer doble clic sobre el archivo en la ventana del sitio.
Despus de esto aparecer una nueva ventana, en la que debers elegir la Categora Pgina en blanco,
HTML.
Para guardar un documento, puedes utilizar cualquiera de las siguientes operaciones.
Hacer clic en el botn guardar de la barra de herramientas estndar.
Pulsar la combinacin de teclas Ctrl+S.
Hacer clic sobre el men Archivo y elegir la opcin Guardar.
Dreamweaver incluye la posibilidad de, en el caso de estar trabajando simultneamente con varios
documentos, poder guardar todos de golpe, sin la necesidad de hacerlo uno por uno. Para guardar todo
puedes realizar cualquiera de las siguientes operaciones.
Hacer clic en el botn guardar todo de la barra de herramientas estndar.
Hacer clic sobre el men Archivo y elegir la opcin Guardar todo.
Al tener varios documentos abiertos es fcil olvidarse de todos las modificaciones hechas en cada uno de
ellos. Debes tener mucho cuidado al utilizar la opcin guardar todo, ya que en ocasiones es posible no
desear guardar los cambios en todos los documentos modificados. Por ello es conveniente que al principio no
utilices esta opcin, al menos hasta que te hayas habituado a manejar el programa.
Para que te vayas haciendo una idea de cmo funciona Dreamweaver, vamos a crear una pgina web
sencilla, con varios estilos de texto, una imagen y un enlace a otra pgina. Crear esta pgina solo te llevar
unos pocos minutos, y sabrs cmo trabajar con los elementos bsicos con los que estn hechas la mayora
de las pginas web. Si nunca has hecho una pgina web, este es el momento para descubrir lo fcil que es.

Mi primera pgina
Lo primero que tienes que hacer es abrir Dreamweaver. Ya has visto en la pgina anterior como puede
hacerse. Abres un documento nuevo y seleccionas la Categora Pgina bsica, HTML.
Seguidamente introduce, en el documento en blanco, el texto que aparece en la imagen siguiente.
Una vez introducido el texto, vas a modificar el ttulo y el color de fondo del documento.
Para ello debes hacer clic sobre el men Modificar y elegir la opcin Propiedades de la pgina.
Entonces se abrir una ventana como la que aparece ms abajo.

Cambia el Ttulo por Mi primera pgina.
En Color de Fondo escribe #CCCCFF, de este modo el fondo del documento pasar a ser de color azul.
Seguidamente pulsa sobre el botn Aceptar.
Ahora vas a insertar una imagen. Para insertar la imagen, ha de estar accesible para nosotros. Para ello
debe encontrarse en nuestro disco duro, en un cd-rom o en un disquete, pero preferiblemente en el disco
duro.
Muchas de las imgenes que vemos en Internet se pueden copiar al disco duro. Al hacer clic con el botn
derecho del ratn sobre la imagen que queremos traer de Internet, se abre una ventana con una opcin similar
a Guardar imagen como... (dependiendo del navegador que utilices) que permite grabar dicha imagen en un
fichero de nuestro disco duro.
En los navegadores ms modernos al colocar el cursor sobre una imagen aparecen estos iconos
en una esquina de la imagen, si haces clic en el icono del disquete aparecer el mismo
men Guardar imagen como... a que hacamos referencia anteriormente.
Copia la imagen que aparece a continuacin, para luego poder insertarla en la pgina web que estamos
creando. Puedes guardarla, por ejemplo, en la carpeta Mis Documentos.
Puedes econtrarla en la carpeta de ejercicios, o copiarla usando el navegador desde aqu.

Ahora tienes que insertar la imagen debajo de la

segunda lnea de texto. En primer lugar debes situar el
cursor al final de la segunda lnea y pulsar un intro
(Enter) para ir a una nueva lnea. Despus debes dirigirte
al men Insertar, a la opcin Imagen.
En la nueva ventana que aparece, debers buscar la

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

men Ventana, con la opcin Propiedades.
Si lo que te ocurre es que nicamente te

aparece el ttulo del panel, es porque est
contraido. Para que te aparezca desplegado debes pulsar sobre el botn , que aparece junto al nombre.
Selecciona la primera lnea de texto y cambia el Formato por Encabezado 1 y el color por #000066, tal y
como se muestra en la siguiente imagen.
Despus de esto, la apariencia de la primera lnea habr cambiado. Selecciona la imagen y las dos timas
lneas de texto. Pulsa sobre el botn para centrarlos.

Una vez hayas centrado la imagen y las otras dos lneas siguientes, selecciona la segunda lnea de texto,
que an no ha sido modificada. Cambia el Formato por Encabezado 3, pulsa una vez sobre el botn y
pulsa tres veces sobre el botn .
Selecciona de nuevo la ltima lnea, y en Vnculo introduce http://www.elpais.es, para crear un enlace a
esa otra pgina:
Despus de todos estos pasos, puedes ver cmo ha quedado el documento pulsando la tecla F12.
Por ltimo guarda el documento. Ya sabes que

puedes hacerlo a travs del men Archivo, desde la
opcin Guardar.
Puedes llamar al documento como lo desees,

pero siempre teniendo en cuenta que la extensin ha
de ser htm o html.
Por ejemplo, puedes llamarlo prueba1.htm.
En la carpeta ejercicios/sitios/animales/inicio.htm puedes ver como nos ha quedado la pgina. Compara

esta pgina con la tuya, para ver si lo has hecho todo bien.
Nota: A lo largo del curso, veremos algunos ejemplos que estn en la carpeta de ejercicios. Si no te la
descargaste con el curso, puedes obtenerla en www.aulaclic.es.
Prueba evaluativa de la Unidad 1.

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

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

hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con los diferentes elementos que
se pueden insertar en Dreamweaver.
Muchas de las operaciones se pueden hacer a partir de estos mens, pero para algunas es preferible o
indispensable hacerlas desde los paneles.
La barra de herramientas estndar
La barra de herramientas estndar contiene iconos para ejecutar de forma inmediata algunas de las
operaciones ms habituales, como Abrir , Guardar , etc.
La barra de herramientas de documento
La barra de herramientas de documento contiene iconos para ejecutar de forma inmediata algunas
otras operaciones habituales que no incluye la barra de herramientas estndar. Estas operaciones son las de
cambio de vista del documento, vista previa, etc.

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

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

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

La vista Cdigo y Diseo
La vista Cdigo y Diseo permite dividir la ventana en dos zonas. La zona superior muestra el cdigo
fuente, y la inferior el editor visual. Cuando se realiza un cambio en alguna de las zonas, este cambio se
aplica directamente sobre la otra.

La ayuda
A travs del men Ayuda puedes ir a varias opciones,

veamos algunas de ellas:
Acceder al cuadro de dilogo de ayuda muy similar

al de Windows donde puedes buscar por temas, por
ndice o por contenido, si seleccionas la opcin Ayuda
de Dreamweaver o simplemente pulsando F1.
Acceder a tutoriales en internet (en la opcin Recursos de ayusa en lnea).
Abrir el panel Referencia en el que encontrars la sintaxis y descripcin de las etiquetas HTML.
Acceder al Centro de servicio tcnico de Dreamweaver en la web.
Acceder al Foros en lnea de Adobe.

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

intentara cargar la pgina http://www.aulaclic.com/index.htm, por lo que se producira un error en el caso
de que no existiera ninguna pgina con el nombre index.htm.

Crear o editar un sitio web sin conexin a Internet
Una vez creadas las carpetas que

formarn un sitio local, ya es posible definir
el sitio en Dreamweaver.
Para ello hay que dirigirse al men Sitio, a

la opcin Administrar sitios....
Recuerda que a travs del panel Archivos,

pestaa Archivos, se puede acceder a cada
uno de los sitios creados y a la opcin
Administrar sitio.
En el caso de haber seleccionado la opcin

Administrar sitios, aparece una ventana que
contiene la lista de sitios locales definidos con
anterioridad.
Por supuesto, pueden existir varios sitios

locales en un mismo ordenador.
Tanto si se elige la opcin Nuevo..., como si se

elige la opcin Editar..., se mostrar la misma
ventana en la que definir las caractersticas del
sitio.

Las caractersticas del sitio se agrupan en diferentes categoras que aparecen en la parte izquierda.
Para visualizar las caractersticas de una categora basta con seleccionarla de la lista haciendo clic en
ella.
Vamos a ver los datos que hay que editar para la categora Datos locales.
Debe definirse el Nombre del sitio y la Carpeta raz local, que es en la que se encuentra el sitio dentro
del disco duro local.
Despus, si se desea, a travs de la categora Mapa de diseo del sitio puede definirse la pgina
principal del sitio, de la que colgarn el resto de documentos HTML dentro del sitio, si en la carpeta raz del
sitio existe una pgina con el nombre index.htm, Dreamweaver la coger por defecto.
Estas tres caractersticas son las imprescindibles para definir un sitio local.
Las dems opciones en este momento no nos interesan, ya que estamos definiendo el sitio local, y no es
necesario establecer los datos del servidor en el que estar el sitio remoto.
Despus de rellenar los datos pulsamos el botn Aceptar y abrimos el sitio.
Si preferimos utilizar un asistente para crear el sitio web slo tenemos que seleccionar la pestaa
Bsicas, en vez de la pestaa Avanzadas.

Abrir un sitio
Para abrir un sitio ya definido hay que dirigirse al men Sitio, a la opcin Administrar sitios.... seleccionar
el sitio de la lista de sitios y pulsar sobre el botn Listo.
Tambin podemos utilizar el panel Archivos, buscar y seleccionar el sitio a abrir

en el men desplegable de la pestaa Archivos.
Para practicar puedes realizar el Ejercicio Crear un sitio web local.
Vistas del sitio
Es posible visualizar un sitio en el panel Archivos o en una ventana.
El panel Archivos se puede abrir a travs del men Ventana, opcin Archivos. Tambin pulsando F8.
Para cambiar de una vista a otra hay que pulsar sobre el botn 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 pgina principal del sitio y contiene vnculos hacia los otros dos.

Si los archivos se mueven de una carpeta a otra, o se cambian de nombre, desde fuera de Dreamweaver,
las pginas no se mostrarn correctamente: no aparecern imgenes, no funcionarn enlaces, etc.
En cambio, si estas
modificaciones se hacen desde
dentro de Dreamweaver, a travs del
sitio, es posible actualizar
automticamente las pginas para
que si hacen referencia a un objeto
que ha cambiado, despus no se
produzcan problemas al visualizarlas.
Al modificar algn objeto que es

referenciado por algn otro
documento, se muestra una ventana similar a esta, que indica los documentos que hacen referencia a dicho
objeto, y que pueden ser actualizados para que no se produzcan los problemas antes mencionados.
Simplemente hay que pulsar sobre el botn Actualizar.

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

Propiedades del documento
Es conveniente definir sitios homogneos, que todas las pginas de un sitio sigan un mismo formato, es
decir, que tengan el mismo color de fondo, de fuente, etc.
Puede definirse el formato de cada una de las pginas a travs del cuadro de dilogo Propiedades de la
pgina.
Este cuadro se puede abrir de tres modos diferentes:
Pulsar la combinacin de teclas Ctrl+J.
Hacer clic sobre el men Modificar y elegir la opcin Propiedades de la pgina.
Hacer clic con el botn derecho del ratn sobre el fondo de la pgina. Aparecer al final del men
contextual la opcin Propiedades de la pgina. Se abrir el cuadro de dilogo siguiente:
Las propiedades estn organizadas en categoras.
En la categora Aspecto, como ves en la imagen anterior, encontramos las propiedades:
Imagen de fondo: permite especificar una imagen de fondo para el documento. Dicha imagen se muestra
en mosaico. Es importante al elegir una imagen de fondo tener en cuenta que segn los colores de la imagen
ser necesario establecer unos u otros colores para el texto, as como que no es conveniente tener un gif
animado como fondo.
Color de fondo: permite especificar un color de fondo para el documento, pero dicho color solo se
mostrar en el caso de no haber establecido ninguna imagen de fondo.

Tamao: permite definir el tamao de la letra.
Color del texto: es el color de la fuente.
Mrgenes: permiten establecer mrgenes en el documento. Los mrgenes izquierdo y superior solo
funcionan en Microsoft Internet Explorer, mientras que el ancho y el alto de mrgen solo funcionan para
Netscape Navigator. Ninguno de estos mrgenes aparece en la ventana de documento de Dreamweaver, solo
se mostrarn en los navegadores.
En la categora Ttulo/Codificacin encontramos la propiedad:
Ttulo: es el ttulo del documento, que aparecer en la barra de ttulo del navegador y de la ventana de
documento de Dreamweaver.
En la categora Vnculos encontramos las propiedades:
Color de vnculo: es el color de los vnculos, que ayuda al usuario a distinguir entre el texto normal y los
vnculos que sirven de enlace a otras pginas.
Vnculos visitados: es el color de los vnculos visitados, que permite distinguir al usuario si unos vnculos
ya han sido visitados o no.
Vnculos activos: es el color de los vnculos activos.
Estilo subrayado: por defecto, cuando tenemos un texto con un vnculo asociado, el texto aparece
subrayado, con esta opcin podemos elegir otro tipo de estilo por ejemplo para que no aparezca subrayado.
En la categora Imagen de rastreo encontramos las propiedades:
Imagen de rastreo: permite establecer una imagen como fondo del documento, pero que slo se mostrar
en la ventana de documento de Dreamweaver, y nunca en un navegador. Dicha imagen se utiliza como
plantilla grfica sobre la que crear el documento.

Transparencia: permite establecer la opacidad de la imagen de rastreo.
Hay que tener cuidado de no crear pginas que tarden mucho tiempo en cargarse en el navegador. Para ver
cmo comprobar el tamao de los documentos, pulsa aqu .
Los colores
Para asignar colores es posible desplegar una paleta de colores

como sta. Al seleccionar un color de estas paletas, se muestra el valor
hexadecimal del color en la parte superior.
Las paletas de colores de Dreamweaver utilizan la paleta de 216

colores seguros para web. stos son los colores que se muestran de la
misma forma en Microsoft Internet Explorer y en Netscape Navigator,
tanto en Windows como en Macintosh.
Tambin es posible personalizar los colores a travs del botn de

la parte superior de la paleta.
Los colores pueden asignarse a travs de los botones: .
Estos botones suelen aparecer en el inspector de propiedades de muchos objetos, y tambin en

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

4. El texto
Unidad 4. El texto
A lo largo de este tema vamos a aprender a cambiar las propiedades del texto y a crear estilos CSS, que
permiten asignar al texto estilos creados por nosotros mismos, no predefinidos.
Caractersticas del texto
Las caractersticas del texto seleccionado pueden ser definidas a travs del men Texto, y a travs del
inspector de propiedades. Vamos a ver las posibilidades que se nos ofrecen a travs del inspector de
propiedades, aunque sean menos que las que se nos ofrecen a travs del men Texto.
Formato:
Permite seleccionar un formato de prrafo ya definido para HTML, que puede ser encabezado, prrafo o
preformateado. Los encabezados se utilizan para establecer ttulos dentro de un documento. El formato
preformateado sirve para que el texto aparezca tal cual ha sido escrito, por ejemplo, si entre dos palabras se
introducen varios espacios solo se considera uno, pero al establecer el formato preformateado se respetar
que hayan varios espacios en lugar de solo uno.
Fuente: Permite seleccionar un conjunto de

fuentes. Aparecen conjuntos de fuentes en lugar de una
sola, ya que es posible que al establecer una nica
fuente el usuario no la tenga en su ordenador. El
seleccionar un conjunto de fuentes posibilita que en el
caso de que el usuario no tenga una fuente se 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.

4. El texto
Tamao:
Permite cambiar el tamao del texto. El tamao lo podemos indicar en diversas unidades, en pxeles,
centmetros, etc...
Color:
Permite seleccionar el color de la fuente, ignorando el color que se haya definido en las propiedades de la
pgina. Si no se ha establecido ningn color en las propiedades de la pgina ni aqu, el color del texto por
defecto ser el negro.
Estilo:
Estos botones permiten establecer si el texto aparecer en negrita o en cursiva. A travs del men Texto
tambin se puede, entre otras cosas, subrayar el texto. Esta opcin no aparece en el panel de Propiedades
ya que de normal no suele utilizarse, debido a que los vnculos aparecen subrayados y el subrayar texto normal
podra hacer que el usuario pensara que se trata de un vnculo.
Alinear:
A travs de estos botones es posible establecer la alineacin del texto de una de estas cuatro formas
distintas: izquierda, centrada, derecha y justificada.
Lista:
Estos botones permiten crear listas con vietas o listas numeradas.
Sangria:
Estos dos botones permiten sangrar el texto y anular la sangra. La sangra es una especie de mrgen que
se establece a ambos lados del texto. En este caso caso los botones se refieren a sangra a la izquierda del
texto.
Para practicar puedes realizar el Ejercicio Insertar texto y modificar sus propiedades.

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

1. Sacar los libros de ese da Gato
2. Introducir los libros del da 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 aadir una
sangra en los elementos de la lista que se desee que pasen a formar parte de la lista anidada.
A travs del men Texto, opcin Lista, es posible acceder a las propiedades de la lista seleccionada. Se
debe seleccionar el texto de la lista previamente o tener el cursor en algn lugar de la lista para que se active
este submen.
En la ventana Propiedades de lista se puede especificar el tipo de lista (con nmeros o con vietas), el
tipo de nmeros o vietas que se utilizarn (en la propiedad Estilo:), y en el caso de las listas ordenadas, el
nmero por el que comenzar el recuento.
Para practicar puedes realizar el Ejercicio paso a paso Convertir un texto en lista.
.

4. El texto
Caracteres Especiales
A veces necesitars introducir caracteres especiales en tus pginas. Debido al modo editor de Diseo de
Dreamweaver esta tarea es muy sencilla utilizando el teclado, podemos incluir caracteres como , , , , ..
de forma rpida por si quieres poner dos espacios en blanco y los introduces por teclado, Dreamweaver no los
crear, debers introducirlo dos veces utilizando la opcin que vamos a ver a continuacin.
Haz clic en el men

Insertar y selecciona
la opcin HTML vers
el desplegable de la
imagen de la derecha.
Slo coloca el
puntero del ratn
sobre Caracteres
especiales y vers
una lista rpida de los
caracteres ms
utilizados que no
pueden ser
introducidos mediante
teclado.
Para introducir alguno de estos caracteres en tus textos slo seleccinalo en la lista y aparecer en la
vista de Diseo.
Si el carcter que buscas no se encontrase all, haz clic en Otro... y se abrir una ventana desde donde
podrs seleccionar caracteres entre una lista bastante ms amplia:

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

4. El texto
Crear un Estilo Personalizado
Con Dreamweaver CS3, las caractersticas que apliquemos a un texto crearn automticamente estilos
CSS que se incrustarn en el documento actual y se aplicarn nicamente sobre l.
Vemoslo:
Para crear un Estilo CSS personalizado:
1. En el documento, se selecciona el texto al que se desea aplicar caractersticas concretas.
2. En el inspector de propiedades se modifican todas las propiedades de formato de texto, se establecen

los atributos de la fuente y del prrafo que queramos.
Automticamente Dreamweaver crear un nuevo estilo con el nombre Estilo1 o Estilo2 o Estilo3,... segn
los nombres de los estilos ya creados.
Aparecer el nombre Estilo1 en el cuadro Estilo del panel Propiedades.
Tambin se puede cambiar el nombre del estilo, es mejor que

el estilo tenga un nombre que indique a qu tipo de texto se va a
aplicar. Para ello desplegamos la lista de estilos y seleccionamos
la opcin Cambiar nombre... Aparecer un cuadro de dilogo para
que introduzcamos el nuevo nombre como la imagen inferior.
Seguidamente se coloca el nuevo nombre sin espacios en blanco. En este caso: miestilo.
Al aceptar, aparecer un panel con el nombre Resultados. Cerrar esta ventana.
De esta manera se puede crear un estilo para aadirlo a un documento.
Cada nuevo estilo que se crea, se aade a la lista de estilos, y los podemos acceder tambin de una

4. El texto
manera rpida a travs del men Texto, opcin Estilos CSS.
En el Panel CSS se puede verificar que se ha aadido automticamente el nuevo estilo.
Si lo deseas, puedes aprender ms sobre el panel CSS aqu .
Aplicar un Estilo
Para aplicar un Estilo CSS personalizado:
En el documento, selecciona el texto al que deseas aplicar el estilo CSS, o sita el punto de insercin del
mouse en un prrafo para aplicar el estilo a todo el prrafo. Si seleccionas un rango de texto dentro de un
prrafo, el Estilo CSS slo afectar al rango seleccionado.
En el inspector de Propiedades se selecciona el estilo creado por nosotros de la lista que aparece al
desplegar el cuadro Estilo.
Para practicar puedes realizar el Ejercicio Crear estilos CSS.

4. El texto
Hojas de Estilos
Podemos exportar estilos que se encuentren incrustados en la pgina HTML a una nueva hoja de estilos
haciendo clic derecho sobre el estilo en el Panel CSS y seleccionando Exportar.
Se abrir el cuadro de dilogo Exportar estilos como archivo CSS que te permitir guardar todos los
estilos incrustados en un nuevo archivo CSS.
Esta opcin es muy til si tienes los estilos incrustados en una pgina y queremos utilizarlos en otras
tambin. Simplemente pasamos los estilos incrustados a una hoja de estilos y luego la adjuntamos en
cualquier pgina que queramos utilizarlos.
Para asignar una hoja de estilos a una pgina despliega el cuadro Estilo que se encuentra en el Inspector
de Propiedades y selecciona Adjuntar hoja de estilos...
En Arch./URL debe especificarse la ruta y el nombre de la hoja de estilos.
Elegimos si queremos Vincular o importar la hoja de estilos.
Si elegimos Vincular la hoja no se incrusta en la pgina sino que se aade a la pgina una referencia a la
hoja, esto permite que cualquier cambio realizado en la hoja quede reflejado de manera automtica en todas
las pginas que utilizan la hoja. Esta es la opcin ms aconsejable si vamos a utilizar el estilo en ms de una
pgina, de esta forma slo ser necesario vincular cada una de los archivos que quieras qeu se vean afectados
a la hoja de estilos que hayas creado.
Si elegimos Importar la hoja se incrusta en la pgina.
La opcin Media te permitir seleccionar el tipo de medio al que se asociar la hoja de estilos, por ejemplo,
screen (pantalla), print (impresora) o tv (webtv). Estas opciones te permitirn crear hojas de estilos para
soportes diferentes. Puedes crear una para screen, que ser la que se muestre cuando navegues por Internet,
y otra para print que ser la que se utilice cuando se imprima el contenido del archivo.
Despus de Aceptar, la hoja con sus estilos aparecer en el panel CSS.

5. Hiperenlaces
Vamos a ver qu son los hiperenlaces, para qu sirven y cmo crearlos, ya que son un elemento
esencial para cualquier pgina web.
Introduccin
Un hiperenlace, hipervnculo, o vnculo, no es ms que un enlace, que al ser pulsado lleva de una pgina o
archivo a otra pgina o archivo.
Es posible asignar un vnculo a un texto, a una imagen, o a parte de una imagen.
Tipos de enlaces
Existen diferentes clases de rutas de acceso a la hora de definir los vnculos.
Referencia absoluta:
Conduce al sitio en el que se encuentra el documento utilizando la ruta completa del archivo.
La ubicacin es en Internet, 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 estn por encima del nivel donde nos encontramos deberemos utilizar
../
Por ejemplo, imagina que estamos en la siguiente direccin

http://www.misitio.com/pagina/informacion/index.html. En esta pgina queremos mostrar una imagen que
se encuentra en la carpeta http://www.misitio.com/pagina/secciones/seccion1.html, cmo podemos
hacerlo? Fcil. Deberemos llamarla haciendo referencia al nivel superior (http://www.misito.com/pagina/)
para poder ir luego a la carpeta secciones.
El resultado de la ruta sera el siguiente: ../secciones/seccion1.html.
De esta forma, mientras nos encontramos en la carpeta informacion, subimos un nivel y luego nos
movemos dentro de la carpeta secciones para mostrar el archivo seccion1.html.
Referencia relativa al sitio:
Conduce a un documento situado dentro del mismo sitio que el documento actual.
En este mtodo los enlaces se crean indicando la ruta a partir de la raz del sitio.
5. Hiperenlaces
En el ejemplo anterior si tuviesemos definido como sitio la carpeta http://www.misitio.com/, un enlace en

cualquier pgina del sitio a http://www.misitio.com/pagina/secciones/seccion1.html se creara como
/pagina/secciones/seccion1.html.
Como puedes ver ahora el vnculo a un archivo en todas las pginas es igual porque se define dependiendo
del sitio raz y no de la ubicacin donde se encuentra.
Puntos de fijacin:
Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello el
vnvulo debe ser nombre_de_documento.extension#nombre_de_punto.
El punto se define dentro de un documento a travs del men Insertar, opcin Anclaje con nombre.
Podramos referenciar de este modo a un anclaje llamado parte2 de la siguiente forma:

../secciones/seccion1.html#parte2
Estos tipos de enlace que hemos visto son vlidos tanto para referenciar pginas (para crear hiperenlaces)
o incluso imgenes u otro tipo de objetos (como veremos en temas posteriores).
Debers tener siempre en cuenta que los nombres de las rutas se correspondan perfectamente a los
nombres de los archivos y carpetas en el servidor (local o remoto).
Por ello, es muy recomendable que utilices siempre minsculas para evitar fallos en los enlaces.
Tambin debers evitar utilizar caracteres especiales como acentos o espacios, as no tendrs
problemas a la hora de referenciar tus objetos.
Crear enlaces
La forma ms sencilla de crear un enlace es a travs del inspector de propiedades. Para ello es
necesario seleccionar el texto o el objeto que va a servir de enlace, y seguidamente establecer el Vnculo en
el inspector.
Por ejemplo, aqu hay un enlace a www.elpais.es, que es de referencia absoluta, por eso contiene HTTP://
Es posible crear tambin vnculos vacos, que pueden ser tiles cuando se utilizan comportamientos, etc.

5. Hiperenlaces
Para ello es necesario escribir en Vnculo nicamente una almohadilla #.
Otra forma de crear un enlace es a travs del men Insertar, opcin Hipervnculo.
Crear vnculos de esta forma es muy sencillo, slo debers rellenar los campos que explicaremos a
continuacin y el enlace se colocar en el lugar en el que estaba situado el cursor.
Texto: es el texto que mostrar el enlace
Vnculo: es la pgina a la que ir redirigida el enlace, si se trata de un enlace externo debers escribirla
empezando siempre por HTTP://. Haz clic sobre el icono de carpeta para buscar los archivos que existan
dentro del sitio. Por defecto dramweaver te crear un enlace relativo al documento. Si quieres que los enlaces
sean relativos al sitio visita este avanzado .
Destino: la pgina donde se abrir la pgina, este campo se explica en el siguiente apartado.
Ttulo: se trata de la ayuda contextual del vnculo, es equivalente al atributo ALT de las imgenes.
Tecla de acceso: atributo que facilita la accesibilidad a las pginas, habilita el acceso al enlace mediante
la pulsacin de la tecla Alt ms la tecla de acceso indicada.
ndice de tabulador : Como habrs podido observar puedes saltar a travs de los enlaces pulsando la
tecla Tabulador. En este campo podrs establecer un ndice indicando la prioridad del enlace y as configurar
el modo en el que actuar el Tabulador es sus diferentes saltos.

5. Hiperenlaces
Destino del enlace
El destino del enlace determina en qu ventana va a ser abierta la pgina vinculada, puede variar
dependiendo de los marcos de que disponga el documento actual.
Puede especificarse en el inspector de propiedades a travs de Dest, o en la ventana que aparece a

travs del men Insertar, opcin Hipervnculo.
_blank:
Abre el documento vinculado en una ventana nueva del navegador.
_parent:
Abre el documento vinculado en la ventana del marco que contiene el vnculo o en el conjunto de marcos
padre.
_self:
Es la opcin predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vnculo.
_top:
Abre el documento vinculado en la ventana completa del navegador.
No te preocupes si no te queda del todo claro para qu sirve cada una de estas opciones de destino, ya
que se volvern a ver en el tema de Marcos.
Para practicar puedes realizar el Ejercicio Crear un hiperenlace.

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

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

men Insertar, opcin Vnculo de
correo electrnico.
En este caso no es posible

asignar el vnculo a una imagen,
solo permite introducir el texto que
contendr el vnculo de correo.
Para practicar puedes realizar el Ejercicio Crear un vnculo de correo electrnico.
En ocasiones es posible que existan en nuestro sitio lo que se conoce como Vnculos rotos. Si no sabes
lo qu son o cmo solucionarlos, consltalo aqu .

6. Imgenes
Unidad 6. Imgenes
En este tema vamos a ver cmo insertar imgenes en un documento. Tambin veremos cmo crear
algunas imgenes especiales, como es el caso de los Rollovers y los botones flash, que ayudan a
mejorar la apariencia de nuestras pginas.
Introduccin
Todas las pginas web acostumbran a tener un cierto nmero de imgenes, que permiten mejorar su
apariencia, o dotarla de una mayor informacin visual.
Existen una serie de formatos de imagen ms recomendables que otros para ser introducidos en una
pgina web. Esta informacin puedes consultarla aqu .
Insertar una imagen
Para insertar una imagen hay que dirigirse al men Insertar, a la opcin Imagen. Despus de esto, ya es
posible seleccionar una imagen a travs de la nueva ventana.
Si por algn motivo se desea insertar un BMP, este no aparecer a no ser que en Tipo se seleccione
Todos los archivos.

6. Imgenes
En Relativa a es posible especificar si la imagen ser relativa al documento o a la carpeta raz del sitio.
Es preferible que sea relativa al Documento, ya que si se mueve todo el sitio a una ubicacin diferente, la
imagen puede no verse al estar siendo buscada en la ubicacin anterior.
Lo mismo ocurre cuando se selecciona un documento para crear un vnculo.
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 raz del sitio o relativa al documento.
Por ejemplo, imagina que dentro de la carpeta raz 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 sera:
imagenes/aulaclic.jpg
Mientras que en el caso de ser insertada como relativa a la Raz del sitio la ruta sera:
/imagenes/aulaclic.jpg
Ocurre lo mismo que cuando se crea un hipervnculo a un documento relativo al documento o a la carpeta
raz del sitio.
Si se inserta un BMP en un documento, este no aparece correctamente en Dreamweaver, aunque s en el

navegador. En Dreamweaver aparecer de la siguiente forma:
Esa misma imagen es la que aparece en Dreamweaver cuando no se encuentra una imagen que haba 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 continuacin.
Para practicar puedes realizar el Ejercicio Insertar una imagen.

6. Imgenes
Propiedades de una imagen
Cuando seleccionamos una imagen el Inspector de propiedades muestra esta apariencia:
Desde aqu podrs acceder a distintas propiedades:
Desde el campo Alt podrs asignarle una ayuda contextual a la imagen, esta se mostrar cuando coloques
el ratn sobre ella, y es muy til de cara a hacer pginas accesibles ya que el texto que se escribe ser ledo
por los programas lectores para invidentes. Tambin es muy til, como ya hemos visto, si la imagen por
alguna razn no puede mostrarse.
En Clase podrs asignarle un estilo que hayas creado anteriormente, as podrs darle alineacin, bordes e
incluso tamao con slo un clic.
Si le damos un valor al campo Vnculo convertiremos al imagen en un link a otra pgina. Para enlaces
externos recuerda que debe empezar siempre por HTTP:// y si deseas crear un vnculo a un enlace electrnico
deber empezar por mailto:
En caso de que le hayas asignado un vnculo podrs decidir en qu ventana quieres que se abra
selecionando un valor en el campo Destino.
Puedes asignarle un tamao de borde desde el campo Borde.
Y puedes seleccionar su alineacin con respecto al texto desde el campo Alinear.
Por ltimo las opciones Espacio V y Espacio H te sern 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 tamao de una imagen
Dentro de Dreamweaver puede modificarse el tamao de las imgenes. Dicho cambio de tamao no se
aplica directamente sobre el archivo de imagen, sino que lo que vara es la visualizacin de la imagen dentro
de la pgina.
Es muy probable que la imagen resultante no sea de buena calidad, en comparacin de cmo podra
quedar modificndola 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 tamao de varias formas diferentes:

6. Imgenes
Imagen original Imagen con tamao modificado
Puede apreciarse claramente que los resultados no son muy satisfactorios, pero en ocasiones puede
resultar til modificar el tamao de algunas imgenes aunque esto implique perder calidad.
Existen dos formas de modificar el tamao.
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 travs de inspector de propiedades, cambiando los campos An (anchura) o Al (altura).

Estos campos aparecern en el inspector cuando est seleccionada alguna imagen.
Si estos campos no contienen el tamao original de la imagen, el valor aparecer resaltado en negrita y
aparecer a la derecha una flecha circular que permite volver al tamao original haciendo clic sobre ella.
Pueden crearse vnculos 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 informacin puedes consultarla aqu .
Imagen de sustitucin. Rollover
Un rollover es una imagen que cambia por otra cuando el puntero se sita sobre ella. Este tipo de imagen
suele utilizarse en los mens o en los botones para desplazarnos a travs de distintas pginas.
Aqu tienes un ejemplo de rollover. Sita el puntero sobre l para ver qu es lo que ocurre.
Para insertar un rollover hay que dirigirse al men Insertar, Objetos de Imagen , a la opcin Imagen de
sustitucin. En la nueva ventana hay que especificar la imagen original y la de sustitucin.

6. Imgenes
Es preferible que la opcin Carga previa de imagen de sustitucin est activa. Si se activa, la imagen
de sustitucin se carga cuando se carga la pgina, de este modo se evitan las demoras debidas a la
descarga de la imagen cuando llega el momento de que aparezca.
El Texto alternativo es el texto que aparece al situar el puntero sobre una imagen, o el que aparecer en
lugar de la imagen en el caso de que por algn motivo sta no pueda ser mostrada en el navegador.
El texto alternativo puede asignarse a todas las imgenes, no slo a los rollovers. Puede hacerse a travs
del campo Alt del inspector de propiedades de la imagen seleccionada.
Para practicar puedes realizar el Ejercicio crear Rollovers.
Botones Flash
Existen otra serie de imgenes especiales, similares a los rollovers, que suelen utilizarse para crear
mens, como pueden ser los botones Flash.
Aqu tienes un ejemplo de botn Flash. Sita el puntero sobre l para ver qu es lo que ocurre.
Para insertar un botn Flash hay que dirigirse al men Insertar, Media, a la opcin Botn Flash,
aparecer el siguiente cuadro de dilogo:

6. Imgenes
A travs de Estilo: puede seleccionarse uno de los distintos formatos de botn que se ofrecen.
En esta misma ventana hay que especificar tambin el Texto que mostrar el botn (Texto del botn:), as
como el nombre con el que ser guardado (Guardar como:) y el vnculo asociado (Vinculo: y Destino:).
Es preferible guardar los botones Flash en el mismo directorio que los documentos HTML, en lugar de
la carpeta destinada a almacenar imgenes, ya que de no ser as es posible que al intentar asignar un vnculo
dentro del propio sitio, Dreamweaver no permita guardar el botn con ese vnculo en una ubicacin diferente de
la de dicho documento.
Recuerda que los botones deben guardarse con la extensin SWF.
A travs del inspector de propiedades del botn Flash es posible editar de nuevo sus atributos:
Puede volver a abrirse el cuadro de dilogo anterior pulsando sobre el botn Editar, y a travs del botn
Reproducir es posible probar el funcionamiento del botn Flash desde Dreamweaver, sin la necesidad de
tener que abrir la pgina con algn navegador.
Despus de haber probado el funcionamiento del botn Flash, debe pulsarse de nuevo sobre el botn
Reproducir (que habr cambiado por el botn Detener) .

6. Imgenes
Para practicar puedes realizar el Ejercicio Crear botones Flash.
Texto Flash
El texto Flash es similar a un rollover, pero en lugar de intercambiar imgenes intercambia el color del
texto.
Para insertar texto Flash hay que dirigirse al men Insertar, Media, a la opcin Texto Flash.
En la nueva ventana, adems del texto, el vnculo y el nombre con el que ser guardado el texto, hay que
especificar el color original y el de sustitucin.
Aqu tienes un ejemplo de texto Flash. Sita el puntero sobre l para ver qu es lo que ocurre.
El inspector de propiedades del texto Flash es igual que el de un botn Flash.

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

7. Tablas
Unidad 7. Tablas
En este tema vamos a ver cmo trabajar con tablas. Podremos, entre otras cosas, insertar tablas,
combinar celdas, insertar filas o columnas y cambiar el tamao del borde.
Introduccin
Todos los objetos se alinean por defecto a la izquierda de las pginas web, pero gracias a las tablas es
posible distribuir el texto en columnas, colocar imgenes al lado de un bloque de texto, y otra serie de cosas
que sin las tablas seran imposibles de realizar.
Hoy en da, la mayora de las pginas web se basan en tablas, ya que resultan de gran utilidad al mejorar
notablemente las opciones de diseo.
Las tablas estn formadas por un conjunto de celdas, distribuidas en filas y columnas. A continuacin
tienes un ejemplo de tabla.

7. Tablas
Insertar una tabla
Para insertar una tabla hay que dirigirse al men Insertar, a la opcin Tabla.
En la nueva ventana habr que

especificar el nmero de Filas y
Columnas que tendr la tabla,
as como el Ancho de la tabla .
El Ancho puede ser definido

como Pxeles o como
Porcentaje. La diferencia de
uno y otro es que el ancho en
Pxeles es siempre el mismo,
independientemente del tamao
de la ventana del navegador en la
que se visualice la pgina, en
cambio, el ancho en Porcentaje
indica el porcentaje que va a
ocupar la tabla dentro de la
pgina y se ajustar al tamao
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 pxeles, 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.
Tambin 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 informacin
de la tabla.
Si queremos incluir un ttulo, lo indicamos en Texto, el ttulo aparecer fuera de la tabla.
En alinear texto indicamos dnde queremos alinear el ttulo con respecto a la tabla.
En Resumen: indicamos una descripcin de la tabla, los lectores de pantalla leen el texto del resumen
pero dicho texto no aparece en el navegador del usuario.

7. Tablas
Rellenar las celdas
Las celdas son cada uno de los recuadros que forman una tabla, resultan de la interseccin entre una fila y
una columna.
imagen y texto
COLUMNA
Texto dentro de
una celda
CELDA
FILA
Para poder insertar algn elemento en una celda, ya sea texto o imgenes, simplemente hay que situar el
cursor previamente dentro de la celda deseada.
Para practicar puedes realizar el Ejercicio Crear y rellenar una tabla.
Seleccionar elementos de una tabla
Existen varias formas de seleccionar una tabla. Una de ellas es a travs del men Modificar estando el
cursor en la tabla, o desplegando el men contextual de la tabla al pulsar con el botn derecho sobre ella.
En ambos casos aparece la opcin Tabla, a travs de la cual se puede elegir la opcin Seleccionar tabla.

7. Tablas
Tambin es posible seleccionar una tabla pulsando con el ratn 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 mens desplegables (men de encabezado de la tabla y men de encabezado de la
columna). Estos mens permiten acceder rpidamente a determinados comandos relacionados con la tabla.
Si tienes el cursor en la tabla y no te aparece esa zona verde puedes activar su visualizacin
seleccionando la opcin Anchos de tablas del men Tabla o tambin desplegando de la barra de mens, el
men Ver, Ayudas visuales, Anchos de tabla. De la misma forma se desactiva su visualizacin.
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 nmeros, el primer nmero corresponde al ancho especificado en las propiedades de la tabla
o columna y el segundo nmero es el ancho el ancho visual que aparece en la vista de diseo, por ejemplo en
la tabla anterior la primera columna tiene 139 (142), en las propiedades de la celda tenemos el ancho 139
pxeles pero al contener una imagen que necesita ms espacio, la columna ocupar realmente 142 pxeles
(ancho visual de la columna tal como aparece en la pantalla).
Cuando ocurren estas diferencias podemos hacer

que en el cdigo (propiedades) se cambie el ancho
por el real, para ello slo tenemos que seleccionar
la opcin Igualar todos los anchos del men
desplegable de encabezado de tabla.
En este men vemos que tambin tenemos la

opcin Seleccionar tabla.

7. Tablas
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 ms te gusta. Estas son las formas de seleccin:
Puedes utilizar la opcin Seleccionar columna del men de encabezado de columna (zona verde de
anchos) esto slo es vlido para seleccionar una columna.
Manteniendo pulsado y arrastrando el ratn hasta seleccionar la columna/s o fila/s completamente.
Tambin 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 ratn 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.
Formato de tabla
Las propiedades de la tabla se especifican a travs de su inspector de propiedades.
A travs 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.

7. Tablas
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 sern Horiz y Vert, que definen la
alineacin del contenido de la celda de forma horizontal y vertical respectivamente.
Para practicar puedes realizar el Ejercicio Modificar las propiedades de la tabla.
Cambiar tamao de tabla y celdas
Como ya sabes, el Ancho de una tabla puede ser definido como Pxeles o como Porcentaje. El tamao
de la tabla a travs del inspector de propiedades estar especificado por los valores de An (anchura) y Al
(altura). Normalmente slo se especifica la anchura, no la altura.
Los valores An y Al de una celda siempre estn en Pxeles. No es necesario especificar ninguno de estos
dos valores para las celdas, a no ser que se desee que se mantenga obligatoriamente ese tamao, y no que
se ajusten al contenido o al tamao de la ventana.
No solo puede establecerse el tamao de las tablas y de las celdas a travs del inspector de propiedades.
Tambin es posible hacerlo manteniendo pulsado el ratn sobre alguno de los bordes, arrastrndolo hacia la
posicin deseada.

7. Tablas
Aadir y eliminar filas y columnas
Existen varias formas de aadir 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 botn derecho sobre ella, o bien abrir el men Modificar. En
ambos casos aparece la opcin Tabla.
Segn las celdas seleccionadas, algunas de las opciones de Tabla se podrn 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.
Tambin tenemos una opcin ms completa, la opcin Insertar filas o columnas.... Al seleccionarla
aparece una nueva ventana, donde es posible determinar si lo que se insertarn sern filas o columnas, el
nmero de ellas que se insertar, y la posicin donde se insertarn.

7. Tablas
Para eliminar una fila o una columna, hay que posicionar el cursor en la fila o columna a eliminar y
elegir la opcin Eliminar fila o Eliminar columna del men Tabla.
Tambin se puede seleccionar la fila o columna a borrar y pulsar la tecla de borrado (Del o Supr)
Para practicar puedes realizar el Ejercicio Aadir 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 continuacin tienes un ejemplo de anidamiento. Como puedes ver, en la primera celda

o
de una tabla se ha insertado otra tabla.

7. Tablas
Para anidar tablas slo 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 ms celdas en una sola por lo que dejar de haber borde
de separacin entre una celda y otra ya que sern una sola. Esto nos puede servir por ejemplo para utilizar la
primera fila para escribir el ttulo de la tabla. En este caso habra 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 travs del inspector de propiedades.
Si se seleccionan varias celdas pueden combinarse pulsando sobre el botn del inspector de
propiedades (lo encontrars en la parte inferior izquierda del panel Propiedades, o pulsando sobre la opcin
Combinar celdas de la opcin Tabla, que como ya has visto puedes dirigirte a ella a travs del men
contextual de la tabla y a travs del men Modificar.
Tienes que tener en cuenta que slo es posible combinar celdas contiguas, cuya combinacin pueda dar
como resultado otra celda, es decir, que su combinacin d como resultado un recuadro. Por ejemplo, en la
siguiente tabla no podran 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 botn
del inspector de
propiedades, o sobre la opcin
Dividir celda de la opcin
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
nmero de stas.
Para practicar puedes realizar el Ejercicio Combinar celdas.

7. Tablas
Modos de tabla
A la hora de trabajar con tablas Dreamweaver nos proporciona distintos modos de visualizacin. Nosotros
hemos trabajado en todo el tema con el modo estndar, y vamos a seguir trabajando con l, pero se puede
pasar a los otros modos a travs del men Ver opcin Modo de tabla. Dentro de esta opcin podemos elegir
entre Modo estndar, Modo de tablas expandidas, o modo de diseo.
El Modo de diseo se utiliza para dibujar pginas con un diseo determinado, basndose en tablas.
Utilizando esta vista, las tablas no han de insertarse obligatoriamente en lneas de texto, como hemos hecho
hasta el momento, sino que es posible insertarlas en cualquier punto de la pgina, y Dreamweaver se
encargar de rellenar el espacio vaco, para que sea posible que la tabla aparezca en esa posicin.
El Modo de tablas expandidas aade temporalmente relleno y espaciado de celda a las tablas de un
documento y aumenta los bordes de las tablas para facilitar la edicin. Este modo se puede utilizar para
seleccionar elementos de las tablas o colocar el punto de insercin de forma precisa pero en este modo no
vemos la pgina como quedar exactamente.
En este curso nos limitaremos al modo estndar.
Adaptar webs a distintas resoluciones
Siempre que se crea una pgina web hay que tener en cuenta que va a ser visitada por usuarios con
monitores de distintos tamaos y con distintas resoluciones.
Es imposible hacer que una pgina se vea exactamente igual en todos los monitores de los usuarios que la
visitan, pero hay que intentar que su visualizacin sea lo ms parecida posible.
La resolucin usada de forma ms frecuente es la de 800x600, por lo que inicialmente habra que disear la
pgina para dicha resolucin. Es decir, habra que crear la pgina en un monitor con dicha resolucin, para
poder visualizar claramente cmo queda en el navegador, y distribuir el contenido de la pgina de la forma ms
adecuada.
Normalmente se utilizan tablas, ya que resultan muy tiles para distribuir el contenido de la pgina.
Como recordars, el tamao de las tablas puede ser definido en pxeles o en porcentaje. Cuando el
tamao de la tabla sea definido en pxeles, la tabla se ver del mismo modo independientemente del tamao
de la ventana del navegador. En cambio, cuando el tamao de la tabla sea definido en porcentaje, la tabla se
ajustar al tamao de la ventana del navegador, lo cual implica que el contenido de la tabla se descuadrar.

7. Tablas
Piensa en una pgina con tablas de tamao fijo, en pxeles .Imagina que la pgina ha sido
diseada para visualizarse correctamente en un monitor pequeo de baja resolucin, cuyo tamao equivale al
de la ventana del navegador que se ha abierto.
Si modificas el tamao de la ventana, vers que las tablas son siempre del mismo tamao. Esto tiene un
gran inconveniente, ya que si maximizas la ventana del navegador (lo que equivaldra a visualizar la pgina en
un monitor grande con alta resolucin), a la derecha de las tablas aparecer un gran hueco vaco.
En la carpeta ejercicios tienes pginas de ejemplo de una tabla fija y otra variable, en porcentaje.
Si modificas el tamao de la ventana, vers que las tablas se ajustan a ella. Usar tablas con tamao
variable tiene tambin un gran inconveniente, ya que si maximizas la ventana del navegador apreciars
claramente cmo el contenido de las tablas se descuadra.
En un principio puede parecer ms conveniente utilizar tablas con tamao fijo, aunque esto implique que
aparezca el hueco vaco a la derecha, en el caso de los monitores con alta resolucin. Pero con un poco de
prctica a la hora de manejar las tablas, puedes salvar el inconveniente del descuadre de la pgina y as
definir pginas con tamao en porcentaje que aprovechen el ancho cuando el monitor de ms grande.
No solo puede establecerse el tamao de la tabla, tambin es posible establecer el tamao de las celdas.
El tamao de la celda a travs 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 estn en Pxeles. En la imagen anterior, la celda tiene una
anchura de 208 pxeles. Para que, por ejemplo, la anchura fuera del 25 por ciento de la tabla, en An habra
que escribir 25%.
Jugando con las medidas de las celdas de la tabla, y teniendo en cuenta qu contiene cada una de ellas
(imgenes, texto alineado a la derecha, texto alineado a la izquierda, texto de gran tamao, etc.), puede
conseguirse que al visualizar la pgina en monitores de distintos tamaos y con distintas resoluciones, la
apariencia sea bastante similar, o al menos que la distribucin del contenido de la pgina no se vea muy
afectado por el cambio de tamao de la ventana del navegador.

8. Marcos
Unidad 8. Marcos
Vamos a ver qu son los marcos y para qu se utilizan. Tambin veremos cmo insertar un marco
sencillo en una pgina, y cmo trabajar con l.
Introduccin
Los marcos o frames sirven para

distribuir mejor los datos de las
pginas, ya que permiten mantener fijas
algunas partes, como pueden ser el
logotipo y la barra de navegacin,
mientras que otras s pueden cambiar.
Adems de mejorar la funcionalidad,
pueden mejorar tambin la apariencia.
Cada uno de los marcos de una

pgina, contiene un documento HTML
individual. Por ejemplo, en la imagen de
la derecha puedes ver una pgina con
dos marcos. El marco izquierdo
contiene el documento menu.htm y el
derecho el documento quienes.htm.
Para poder visualizar la pgina de este modo, hemos tenido que abrir en el navegador el documento
marcos.htm, que es la pgina que contiene los marcos agrupados.
Es posible editar los documentos contenidos en los marcos desde la pgina que contiene el grupo de
marcos. Esto facilita el trabajo, ya que es ms fcil hacerse una idea de cmo quedar la pgina al final, cosa
que no es posible si se editan individualmente cada uno de los documentos que contiene el marco.
El trabajar con marcos puede resultar una tarea algo complicada, sobretodo al principio, por lo que no
vamos a profundizar mucho en el tema, y veremos solamente algunos conceptos bsicos y ejemplos
sencillos.

8. Marcos
Crear marcos
Existen varias formas de crear

un marco. Nosotros vamos a ver
solamente una de ellas.
Para crear un marco, primero

hay que abrir algn documento.
Puede ser uno nuevo o uno ya
existente.
Despus, dirigirse al men

Insertar, HTML, Marcos. A travs
de esta opcin puede elegirse el
tipo de marco que va a crearse.
Vamos a ver el marco a la

Izquierda.
Si pulsamos sobre Izquierda se

crear un nuevo marco a la
izquierda del documento actual.
Como puedes ver en la imagen, aparece una lnea que divide

el documento en dos. El documento de partida era uno nuevo.
En este caso tendremos tres documentos: el de la

izquierda, el de la derecha, y el que contiene el grupo de
marcos. El de la derecha es el documento que tenamos
inicialmente, que est en el marco conocido como marco
padre (MainFrame).
Para seleccionar el documento que contiene el grupo de

marcos hay que pulsar sobre la lnea que separa los marcos.
Esto solo es posible mientras dicho documento no se haya
guardado.

8. Marcos
Si en lugar de insertar un
marco a la izquierda lo
insertamos a la Derecha, el
marco vaco aparecer a la
derecha del documento original.
En esta imagen puedes ver un

ejemplo de marco a la derecha.
Sobre un documento ya
existente, menu.htm, se ha
insertado un marco a la derecha.
Al igual que en el caso

anterior, tenemos tres
documentos: el de la izquierda, el
de la derecha, y el que contiene
el grupo de marcos. En este
caso, el documento que tenamos
inicialmente es el de la izquierda, mientras que antes era el de la derecha. Por ello, en este caso el marco
padre ser el de la izquierda.
El marco padre siempre es el marco en el que se encuentra el documento inicial, sobre el que se han
insertado el resto de marcos.
Seleccionar marcos
Para seleccionar los marcos del documento es necesario

dirigirse al panel Marcos, que puede abrirse a travs del
men Ventana. Si la opcin Marcos no te aparece
directamente en este men, posiblemente est dentro de la
opcin Otros. Tambin puedes abrir el panel Marcos
pulsando la combinacin de teclas Mays+F2.
En el panel Marcos aparecen los marcos que contiene el

documento de marcos, y se puede pasar de uno a otro
pulsando sobre ellos en el panel. Tambin puede
seleccionarse la pgina de marcos pulsando sobre el borde
que rodea a los marcos (el que aparece ms grueso y en
relieve en la imagen).
No es necesario seleccionar los marcos para editar los documentos que stos contengan.
S es necesario seleccionar los marcos para especificar las propiedades especficas de cada uno de ellos.

8. Marcos
Guardar
Todos los documentos que contienen marcos tienen que tener una pgina en cada uno de ellos. Es por
esto que al crear algn marco, se cargan pginas nuevas por defecto en cada uno de ellos, a excepcin del
marco que contiene la pgina original.
Estas pginas nuevas pueden ser posteriormente sustituidas por otras ya existentes, como ya veremos
ms adelante.
Es necesario guardar la pgina que contiene el grupo de marcos, as como cada una de las pginas que
estn incluidas en sus marcos.
No es conveniente guardar la primera vez los marcos con la opcin Guardar todo , 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 pgina
ya existente, ya que en ese caso el nico documento al que habr que dar nombre ser al que contiene el
grupo de marcos.
Para guardar el documento que contiene el grupo de marcos, hay que seleccionarlo previamente.
Para guardar cada uno de los otros documentos, simplemente hay que situar el cursor en ellos antes de
pulsar sobre Guardar .
Configurar marcos
Una vez seleccionado un marco a travs del panel Marcos, pueden establecerse sus propiedades a travs
del inspector de propiedades.
Cada marco tiene asignado un nombre, que puede cambiarse a travs de Nombre de marco. El nombre
no puede contener espacios en blanco.
En Origen aparece el nombre del documento HTML que est contenido en el marco.
En Bordes puede elegirse si aparecer o no una lnea separando el marco del resto de marcos. En el caso
de que se muestre el borde, se puede especificar un color para ste a travs de Color borde.
Desplaz. indica si aparecern o no las barras de desplazamiento cuando el documento del marco no pueda
visualizarse completamente.
Si la opcin Mismo tamao est activa, indica que los usuarios no podrn variar las medidas del marco
desde el navegador.

8. Marcos
El Ancho del margen y el Alto del margen indican la separacin que habr entre el contenido del marco
y sus bordes izquierdo-derecho y superior-inferior.
Si lo seleccionado es todo el conjunto de marcos (la pgina de marcos), el inspector de propiedades es

algo diferente.
En Bordes puede elegirse si aparecer o no una lnea separando los marcos entre s y puede especificarse
un color para este a travs de Color del borde. Tambin es posible establecer un grosor para el borde a
travs de Ancho.
El campo Columna (o Fila dependiendo del marco elegido en Seleccin Fila Col.) sirve para especificar
el tamao del marco, que puede ser en Pxeles, Porcentaje (de la ventana) o Relativo (proporcional al resto
de marcos).
Normalmente utilizars dos marcos, uno de ellos con tamao en Pxeles, que ser el que contenga la
barra de navegacin, y el otro marco con tamao Relativo, para que se ajuste a la ventana del navegante.
Contenido del marco
Como ya has visto, el contenido de un marco puede establecerse a travs del campo Origen del inspector
de propiedades.
Cuando trabajamos con marcos, queremos poder cargar diferentes documentos en cada uno de ellos. El
contenido de alguno de los marcos ha de ser fijo, mientras que el de otros ha de poder variar.
A travs del campo Origen del inspector de propiedades, slo es posible especificar el documento que se
cargar inicialmente en el marco, pero hemos de poder cambiar este documento por otro a travs de vnculos.
Como recordars, en el tema de hipervnculos vimos los posibles destinos de los enlaces. Estos destinos
podan ser _blank, _parent, _self, y _top. Vamos a recordar para que serva cada uno de ellos, ya que ahora
que ya sabes trabajar con marcos te sern ms fciles de entender.
_blank:
Abre el documento vinculado en una ventana nueva del navegador.

8. Marcos
_parent:
Abre el documento vinculado en la ventana del marco que contiene el vnculo o en el conjunto de marcos
padre. Como ya sabes, el marco padre es el marco en el que se encuentra el documento inicial, sobre el
que se han insertado el resto de marcos.
_self:
Es la opcin predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vnculo.
_top:
Abre el documento vinculado en la ventana completa del navegador, lo cual quiere decir que los marcos de
la ventana desaparecern al abrir el vnculo en ella.
Adems de estos destinos para

los enlaces, tambin aparecern los
nombres de los distintos marcos de
la pgina.
Podemos aadir todos estos

destinos a cualquier elemento de la
pgina que contenga algn enlace,
ya sea texto, una imagen, un mapa
de imagen, un elemento Flash, etc.
Gracias a todo esto podremos

hacer que las barras de navegacin y
el resto de enlaces funcionen a
nuestro antojo, cargando unas u
otras pginas en alguno de los marcos, en una ventana nueva, en toda la ventana, etc.
Esta tarea puede resultar algo pesada, y al principio complicada, pero da muy buenos resultados finales.
Para practicar puedes realizar el Ejercicio Crear y configurar marcos.

9. Formularios
Vamos a ver qu es un formulario, para qu se utiliza, cmo insertar uno, qu elementos puede contener
y cmo pueden validarse los datos introducidos en l.
Introduccin
Los formularios se utilizan para

recoger datos de los usuarios, nos
pueden servir para realizar un pedido
en una tienda virtual, crear una
encuesta, conocer las opiniones de
los usuarios, recibir preguntas, etc.
Una vez el usuario rellena los datos

y pulsa el botn para enviar el
formulario se arrancar un programa
que recibir los datos y har el
tratamiento correspondiente.
Aqu vamos a ver cmo crear el

formulario, (insertar campos y botones
en el formulario y validarlos), pero no la
parte de tratamiento de los datos, ya
que para ello se necesitan nociones de programacin, ya sea en VBScript, en JavaScript o en otro lenguaje de
programacin, y esto no entra en los objetivos del curso.
A la derecha tienes un ejemplo de formulario.
Un formulario est formado, entre otras cosas, por etiquetas, campos de texto, mens desplegables, y
botones.

9. Formularios
Elementos de formulario
Los elementos de formulario pueden insertarse en una pgina a travs del men Insertar, opcin
Formulario.
A travs de esta opcin se puede acceder a la lista de todos los objetos de formulario que pueden ser
insertados en la pgina.
Vamos a ver uno por uno algunos de los distintos elementos que pueden formar parte de un formulario, as
como algunas de sus propiedades.
Campo de texto y rea de texto
Permiten introducir texto. El Campo de texto solo permite al usuario escribir una lnea, mientras que el
rea de texto permite escribir varias.
Se puede pasar de Campo de texto a rea de texto a travs del inspector de propiedades, marcando la
opcin Una lnea o Multi lnea respectivamente.
Tambin es posible definirlo como Contrasea es como el campo de texto pero las letras que va tecleando
el usuario se sustituyen por un carcter como podrs ver en la imagen siguiente.
A continuacin tienes un ejemplo de cada uno de estos tres tipos. Puedes escribir en ellos para ver su
funcionamiento.
Campo de texto **************

rea de texto
A travs del inspector de propiedades es posible asignar tambin el Ancho del cuadro de texto, el nmero
mximo de lneas o caracteres, y el valor inicial del cuadro.
Botn
Es el botn tradicional de Windows. El botn puede tener asignadas tres opciones: Enviar formulario,
Restablecer formulario (borrar todos los campos del formulario), o Ninguna (para poder asignarle un
comportamiento diferente de los dos anteriores).
Enviar
Tambin es posible cambiar el texto del botn, a travs de la propiedad Etiqueta del inspector de
propiedades.
Casilla de verificacin
Es un cuadrito que se puede activar o desactivar.
Deseo recibir informacin

9. Formularios
Puede asignrsele el Estado inicial como Activado o como Desactivado.
Botn de opcin
Es un pequeo botn redondo que puede activarse o desactivarse. Si hay varios del mismo formulario, slo
puede haber uno activado. Cuando se activa uno, automticamente se desactivan los dems.
Superman
Spiderman
Lista/Men
Una lista o men es un elemento de formulario que lleva asociada una lista de opciones.
-- Elige opcin de la lista -- -- Elige opcin del men --

Perro
Gato
Los elementos se aaden a travs del botn Valores de lista... del inspector de propiedades.
Cuando se trata de un men, solo es posible elegir uno de los elementos, pero si se trata de una lista, a
travs de Selecciones del inspector de propiedades puede permitirse que se seleccionen varios
simultneamente.
Etiqueta
Se utiliza para ponerle nombres al resto de elementos de formulario, para que el usuario pueda saber qu
datos ha de introducir en cada uno de ellos.
Crear formularios
Puedes crear formularios a travs del men Insertar, opcin

Formulario.
Una vez creado un formulario, este aparecer en la ventana de

Dreamweaver como un recuadro formado por lneas rojas discontinuas,
similar al de la imagen de la derecha.
Dentro de dicho formulario se podrn insertar los elementos de

formulario, que como ya sabes puedes insertar a travs del men
Insertar, opcin Formulario.

9. Formularios
Es muy recomendable utilizar tablas para organizar los elementos de los formularios. Utilizando tablas se
consigue una mejor distribucin de los elementos del formulario, lo que facilita su comprensin y mejora su
apariencia.
Validar formularios
La validacin de formularios sirve para hacer que Javascript

valide el formulario antes de que se enve el formulario, para que
en el caso de que hayan campos del formulario que sean
obligatorios, tengan que rellenarse antes de poder enviarse.
Para validar un formulario hay que abrir el panel de

Comportamientos. Este panel se puede abrir a travs del men
Ventana, opcin Comportamientos, o pulsando Mays+F3.
En este panel hay que desplegar el botn y pulsar sobre

la opcin Validar formulario, debers haber seleccionado el
formulario previamente.
Entonces se mostrar una ventana como la siguiente, donde aparecen todos los elementos del formulario.
Puede seleccionarse uno por uno cada elemento del formulario, pudiendo especificar los requisitos que ha
de cumplir.
Puede establecerse como campo a rellenar obligatoriamente (Valor Obligatorio), y si su contenido ha de

ser numrico (Nmero), una Direccin de correo electrnico, etc.
Para practicar puedes realizar el Ejercicio Insertar elementos de formulario.

10. Multimedia
Vamos a ver cmo insertar elementos multimedia. En concreto, veremos cmo insertar una animacin
Flash, un sonido y un vdeo.
Pelculas Flash
Las pelculas Flash son animaciones, que al igual que los botones y el
texto Flash, tienen la extensin SWF. Es frecuente verlas en las pginas
iniciales de los sitios web, a modo de presentacin hacia los usuarios,
aunque se pueden utilizar para realizar cualquier tipo de animacin.
Estas pelculas pueden crearse mediante el programa Flash de

Macromeda, y necesitan que el usuario tenga instalado el plug-in para
poder ser visualizadas.
Las pelculas Flash pueden insertarse en una pgina a travs del men Insertar, Media, opcin Flash, o
pulsando Ctrl+Alt+F.
Tambin pueden insertarse pulsando sobre la opcin Flash que aparece en la pestaa Comn del
panel Insertar, botn Media.
El inspector de propiedades de las pelculas Flash es prcticamente igual que el de los botones y el
texto Flash, pero existen dos opciones nuevas que hacen referencia a la visualizacin de la pelcula.

10. Multimedia
La opcin Bucle indica que al finalizar la pelcula, sta volver a comenzar desde el principio.
La otra es la opcin Rep. autom. (reproduccin automtica), que al estar marcada indica que nada ms
cargarse la pgina comenzar a reproducirse la pelcula Flash.
Si esta opcin no estuviera marcada, se mostrara nicamente el primer fotograma de la pelcula.
Interesa desmarcar esta opcin cuando se desea que la reproduccin sea activada por algn
comportamiento.
Sonido
No es muy habitual incluir sonido en una pgina web, ya que algunos usuarios suelen estar escuchando su
propia msica cuando navegan en Internet, por lo que el escuchar tambin sonido en cada pgina que se visita
puede resultar algo molesto.
A pesar de ello, el incluir un sonido agradable, apropiado al contenido de la pgina, puede hacerla ms
atractiva. Muchas de las pginas que contienen sonido suelen ofrecer la posibilidad de activarlo o desactivarlo,
para que aquellos usuarios que no deseen escuchar el sonido de la pgina puedan desactivarlo.
Los formatos de sonido ms habituales en Internet son, fundamentalmente, el MP3, el WAV y en algunas
ocasiones el MIDI, aunque existen otros formatos diferentes que tambin pueden utilizarse. Lo ideal es incluir
algn 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, Meda, opcin
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 mostrarn 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.

10. Multimedia
En el inspector de propiedades pueden establecerse la altura y la anchura con la que se mostrarn los
controles de audio, mediante Al y An.
En el caso de no especificar ningn tamao, se mostrar el tamao 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 pgina, pero que no se
muestren los controles de audio, los campos Al y An deben valer cero.
Los sonidos se reproducen automticamente al cargarse la pgina, y se reproducen solamente una vez.
Estos valores no pueden definirse a travs del inspector de propiedades, pero s a travs del cdigo. Una vez
definidos los podremos cambiar desde el inspector de propiedades con el botn Parmetros...
Por ejemplo, el archivo anterior apareca en el cdigo como <embed src="varios/audio.mid"></embed>.

Pero para que no se reproduzca automticamente se ha aadido autostart="false", y para que se reproduzca
continuamente se ha aadido loop="true".
La lnea de cdigo 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 botn Parmetros... abre un cuadro de dilogo donde
podemos cambiar esos valores una vez introducidos.
Para poder hacer que el audio pueda activarse y desactivarse cuando no se muestran los controles, es
necesario insertar una serie de comportamientos que se encarguen de esa tarea.
Si quieres poner msica de fondo en una pgina web, sin que aparezcan los controles de audio, puedes
escribir este cdigo directamente en la vista Cdigo.
<bgsound src="cancion1.wav" loop="-1">
Insrtalo despus de la etiqueta </title> Con el parmetro loop puedes decidir cuntas veces quieres que
se reproduzca, 1, 2, 3 ... (con -1 se reproduce de modo continuo).

10. Multimedia
Vdeos
En ocasiones puede interesar incluir algn vdeo en una pgina web, pero hay que tener en cuenta que los
vdeos suelen ocupar mucho espacio en disco, y por lo tanto, precisan de mucho tiempo para descargarse.
Los formatos de vdeo que suelen utilizarse en Internet son el AVI, el MPEG y el MOV.
Para insertar un archivo de vdeo en un documento tienes que dirigirte al men Insertar,
Meda, opcin Plug-in.
A la derecha tienes un ejemplo de un archivo de vdeo, para el que se muestran los

controles de vdeo. Puedes reproducirlo pulsando sobre los controles.
El inspector de propiedades para los archivos de vdeo insertados de esta forma es el mismo que el de los
archivos de audio, ya que ambos se insertan como Plug-in.
Los vdeos tambin se reproducen automticamente al cargarse la pgina, y se reproducen solamente una
vez. Estos valores pueden cambiarse a travs del cdigo, del mismo modo que en el caso de los archivos de
audio, aadiendo autostart="false" y loop="true".
Todos los objetos insertados a travs de la opcin 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 vdeo) que ha de reproducirse.
En el caso de que el usuario no tenga instalado ningn plug-in adecuado, puede establecerse en el campo
URL plg una pgina en la que pueda encontrarlo.
Para practicar puedes realizar el Ejercicio Insertar un archivo de audio.

11. Las plantillas
En este tema vamos a ver qu son las plantillas, cmo crearlas y cmo basar documentos en ellas.
Introduccin
Cada vez que deseamos crear un sitio web, tenemos que tener muy en cuenta que las pginas deben
seguir un formato uniforme.
La mayora de nosotros solemos hacer copias de los documentos ya creados, y trabajar sobre estas
copias, modificando simplemente su contenido. Esta es la forma ms sencilla de tener pginas con una
estructura basada en la estructura de otras ya creadas previamente.
Las plantillas son una especie de copia de la pgina en la que van a estar basadas el resto de pginas
del sitio web, pero que incluyen la posibilidad de establecer unas zonas editables y otras zonas que
sern fijas, que no podrn ser modificadas.
No es posible modificar las propiedades de una pgina que est basada en una plantilla, a excepcin del
ttulo. Cuando se desea que existan pginas con, por ejemplo, diferente color de fondo, es necesario crear
plantillas diferentes con los distintos colores, y basar las pginas en una u otra plantilla, segn el color de
fondo que se desee para cada una.
Cuando se modifica el diseo de una plantilla, se pueden actualizar todas las pginas basadas en ella.
Las plantillas son archivos con la extensin DWT que se guardan en el sitio web, dentro de una carpeta
llamada Templates.

11. Las plantillas
Crear plantillas
Las plantillas pueden crearse desde cero, o a partir de una pgina ya existente.
Una forma de crear una plantilla desde cero es a travs del panel Archivos, pestaa Activos.
La pestaa Activos se puede abrir a travs del men Ventana, opcin Activos. Tambin pulsando F11.
Una vez abierto el panel hay que seleccionar el

botn , para poder trabajar con las plantillas.
Los botones inferiores del panel Activos

son similares a los del panel Estilos
CSS.
El nico botn diferente es el primero, que en

este caso sirve para actualizar la lista, el resto
permiten crear una nueva plantilla, editar una
plantilla seleccionada en la lista, o eliminarla.
Para crear una nueva plantilla hay que pulsar

sobre el botn (Si este botn no est activado,
pulsa con el botn derecho del ratn y elige Nueva
Plantilla).
Cuando se pulsa ese botn aparece un nuevo documento en la lista de plantillas, al que es posible
cambiarle el Nombre pulsando previamente sobre l.
Para modificar una plantilla la seleccionamos de la lista y pulsamos el botn .
Paraeliminar una plantilla la seleccionamos de la lista y pulsamos el botn .
Las plantillas se guardan en el sitio web actual, dentro de la carpeta Templates, que se crea
automticamente.
Para crear una plantilla a partir de

un archivo existente es necesario
abrir dicho archivo, y despus
guardarlo como plantilla a travs del
men Archivo, opcin Guardar
como plantilla.
Cuando se pulsa dicha opcin,

aparece una ventana como la de la
derecha.
En ella es necesario especificar el

nombre con el que va a ser guardada la plantilla, a travs del campo Guardar como, y elegir, de entre la lista
de sitios, el Sitio: en el que se va a guardar.

11. Las plantillas
Establecer regiones editables en una plantilla
Todos los elementos de una plantilla estn bloqueados por defecto, no se pueden modificar.
Es necesario establecer las zonas que s podrn ser editadas en las pginas que se basen en dicha
plantilla.
Para editar una plantilla hay que abrirla en Dreamweaver. Una forma de abrirla es a travs del panel Activos,
pulsando dos veces sobre ella, o estando seleccionada pulsando sobre el botn como ya hemos visto.
Una vez abierta la plantilla es posible establecer sus propiedades a travs de la ventana Propiedades de
la pgina.
Como recordars, para abrir esta ventana puedes:
Pulsar la combinacin de teclas Ctrl+J.
Hacer clic sobre el men Modificar y elegir la opcin Propiedades de la pgina.
Pulsar con el botn derecho sobre el documento abierto en Dreamweaver, y en el men contextual que
aparece seleccionar la opcin Propiedades de la pgina.
Para insertar una regin editable hay

que situar el puntero en el lugar en el que
se desea insertar, y despus dirigirse al
men Insertar, Objetos de plantilla,
opcin Regin editable, o pulsar la
combinacin de teclas Ctrl+Alt+V.
En la nueva ventana hay que

establecer un Nombre para la regin editable.
Dentro de la plantilla no pueden existir dos regiones editables con el mismo nombre.
Posteriormente puede modificarse el nombre a travs del inspector de propiedades de la regin editable.
La zonas editables aparecen representadas en Dreamweaver como un recuadro con una etiqueta de color
turquesa. En la etiqueta aparece el nombre de la zona editable.
Dentro del recuadro es posible insertar objetos, que aparecern por defecto en aquellos documentos que se
basen en la plantilla. Estos objetos, al estar dentro de la zona editable, podrn ser modificados en las
pginas.
Todos los objetos que se encuentren fuera de estas zonas editables aparecern tambin en las pginas,
pero no podrn ser modificados.

11. Las plantillas
En este caso, la imagen con el logotipo de aulaclic aparecera en todas las pginas que se basaran en
esta plantilla, mientras que todo lo que insertramos dentro de la zona editable
FormularioCorreoElectronico podra ser modificado.
Basar pginas en una plantilla
El uso de las plantillas puede resultar un poco complicado al principio. Vamos a ver cmo basar una pgina
vaca en una plantilla, ya que por el hecho de estar vaca resulta ms sencillo.
Una vez abierto el documento, hay que dirigirse al men Modificar, Plantillas, opcin Aplicar plantilla a
pgina.
Es preferible que antes de

hacer esto nos aseguremos
de que el sitio que se
encuentra abierto en
Dreamweaver es el mismo en
el que vamos a guardar el
documento, y el mismo en el
que se encuentra la plantilla
en la que queremos basarlo.
Despus de pulsar sobre la opcin Aplicar plantilla a pgina aparece una ventana como la de la
derecha, en la que hay que seleccionar una de las plantillas de la lista Plantillas: del sitio.
Es recomendable activar la casilla Actualizar pgina cuando cambie la plantilla, para que la pgina se
actualice automticamente en el caso de modificar la plantilla en la que se basa.

11. Las plantillas
A pesar de estar trabajando sobre un documento vaco, es posible que al aplicar la plantilla aparezcan
nombres de regiones no coincidentes entre el documento en blanco y la plantilla. En ese caso se muestra
una ventana como la siguiente.
En ella hay que establecer una correspondencia entre el nombre de la regin del documento vaco con el
nombre de alguna regin de la plantilla.
En este ejemplo, la regin del documento vaco que no coincida con el nombre de ninguna regin de la
plantilla era la regin Document body.
A travs de Mover contenido a la nueva regin: se puede seleccionar una regin de la plantilla, para
establecer as la correspondencia que se necesitaba.
Despus de establecer las correspondencias necesarias, se carga la plantilla en el documento vaco.

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 podra cambiar el estilo del texto, el color de las celdas, combinarlas, etc.
Para que una pgina deje de estar basada en una plantilla hay que dirigirse al men Modificar, Plantillas,
opcin Separar de plantilla.
Cuando se separa una pgina de una plantilla, el contenido de la pgina sigue siendo el mismo que el que
tena cuando an estaba basada en la plantilla, pero sin las restricciones establecidas por la plantilla.
Para practicar los distintos aspectos explicados en el tema puedes realizar el Ejercicio Crear una plantilla.

12. HTML desde Dreamweaver
En este tema vamos a ver algunas de las facilidades que proporciona Dreamweaver para trabajar sobre el
propio cdigo HTML, y no nicamente sobre el editor grfico de la vista diseo.
En este tema no se pretende ensearos el lenguaje HTML sino cmo poder realizar algunos reajustes
directamente en el cdigo 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 pgina Web.
En el primer tema vimos como ejemplo las etiquetas que hay que incluir en el cdigo HTML de una pgina
para darle un ttulo. Consista simplemente en escribir el ttulo deseado entre las etiquetas <TITLE> y
</TITLE>.
Las etiquetas consisten en poner un mismo comando entre los smbolos < y >. La primera etiqueta indica
inicio, y la segunda, que incluye el smbolo /, indica final y se suele denominar etiqueta de cierre.
Las etiquetas disponen de atributos que permiten definir caractersticas del elemento sobre el que actan,
incluyendo cierto cdigo dentro de la etiqueta.
Por ejemplo, un prrafo se inserta entre las etiquetas <P> y </P>, pero es posible cambiar sus
caractersticas predeterminadas, como puede ser alinearlo a la derecha. Para ello, en lugar de introducir el
texto del prrafo entre las etiquetas anteriores, ha de insertarse entre las etiquetas <P align="right"> y </P>.
Tambin hay elementos que no precisan insertar etiqueta de cierre. Por ejemplo, un May+INTRO dentro del
cdigo HTML equivale a la etiqueta <BR>.
Tambin podrs ver la etiqueta <br /> en las pginas que sigan el estndar 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 automticamente las etiquetas necesarias para construir la pgina con la apariencia y
contenido definidos en el editor grfico, pero tambin ofrece otras posibilidades para trabajar directamente
sobre el cdigo.

Entidades HTML
HTML tambin dispone de cdigos especiales para representar carceteres especiales como pueden
ser letras con acentos o no pertenecientes al alfabeto latino internacional, signos de puntuacin o tipogrficos
y smbolos especiales que presenten un problema en HTML como < >, que podran malinterpretarse por el
inicio de una etiqueta.
Estos cdigos pueden mostrarse como un cdigo numrico o con un nombre de entidad. Ambos mtodos
son igualmente aceptables, pero ambos debern ir encerrados entre los smbolos & y ;.
De este modo, < se escribir como < o <
Usar este mtodo es muy aconsejable, de esta forma los navegadores que estn configurados para
visualizar juegos de caracteres que no contengan letras como la o la podrn ver el sitio correctamente. En
caso contrario estos caracteres se mostraran de forma extraa.
En el tema 4 vimos que podamos escribir estos caracteres utilizando el men Insertar. Ahora te
mostraremos otra forma para escribir caracteres que no se incluan en el listado de Dreamweaver y que podrs
insertar escribiendo sus entidades en la vista de Cdigo.
Aqu tienes una tabla de los caracteres ms utilizados con sus Entidades HTML numrica y de nombre
de entidad: Entidad con Entidad Entidad con Entidad
Carcter Carcter
nombre numrica nombre numrica
á á Á Á

é é É É
í í Í Í
ó ó Ó Ó
ú ú Ú Ú
ü ü Ü Ü
&ntide; ñ Ñ Ñ
¿ ¿ α α

&iexc; ¡ β β
– – © ©
→ → ® ®
← ← € €
< < < espacio

> > >
& & &

Si escribes ms de un espacio en Dreamweaver, cuando lo visualices en un Navegador slo veras uno.

Esto es debido a que en HTML las palabras separadas por ms de un espacio se visualizan sapradas de uno.
Para saltarte esta norma puedes escribir tantas veces como quieras y se visualizarn 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 .
El inspector de cdigo
Recordars que Dreamweaver ofrece la posibilidad de trabajar con tres vistas: vista Diseo, vista Cdigo y
vista Dividir (Cdigo y Diseo).
Todas estas vistas se aplican directamente sobre la ventana del documento.
Pero existe un panel que permite visualizar el cdigo independientemente de la vista aplicada en el
documento. Este panel es el llamado Inspector de cdigo y puede abrirse a travs del men Ventana. Si la
opcin Inspector de cdigo no te aparece directamente en este men, posiblemente est dentro de la
opcin Otros. Tambin puedes abrir el Inspector de cdigo pulsando F10.

El Inspector de cdigo muestra el cdigo HTML de la misma forma que lo hacen la vista Cdigo y la
vista Dividir (Cdigo y Diseo), pero puede resultar ms cmodo trabajar con el panel, ya que puede
situarse en cualquier parte de la pantalla, y no se limita slo al espacio del documento.
Completar las etiquetas
Una de las posibilidades que ofrece Dreamweaver a la hora de trabajar directamente sobre el cdigo HTML
es la de completar las etiquetas mientras se van introduciendo. Esto se produce tanto en el Inspector de
cdigo como en las vistas de cdigo.
Imaginemos que deseamos introducir en nuestra pgina un enlace a la pgina de aulaclic, que ha de abrirse
en una ventana nueva. En este caso deberamos introducir la etiqueta <a
href="http://www.aulaclic.com">pulsa aqu para visitar aulaclic</a>, con lo que obtendramos el siguiente
enlace:
pulsa aqu para visitar aulaclic
Vamos a ver cmo funciona el mecanismo de completar etiquetas a travs de este ejemplo.
Las etiquetas se completan siempre de izquierda a derecha, por lo que lo primero

que debemos insertar es el smbolo < .
Despus de escribir nosotros este smbolo, Dreamweaver mostrar una lista con todos
los comandos que pueden aparecer despus l. Para elegir uno de ellos hay que pulsar dos
veces sobre l con el puntero del ratn, o bien, estando seleccionado, pulsar INTRO.
En este caso tenemos que elegir a, despus de lo cual desaparecer la lista. En el

cdigo tendremos .

Despus de <a hay que introducir un espacio en blanco. Nada ms teclear el espacio
en blanco aparecer otra lista de elementos, que son los que pueden escribirse despus
de la a, los atributos de la etiqueta.
Tenemos que elegir href.
Una vez seleccionado, el cdigo 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 vnculo a insertar.
En este caso el vnculo ha de ser de tipo HTTP, aunque tambin sera posible insertar un
vnculo a un archivo (FILE), un vnculo de correo electrnico (MAILTO), o un vnculo de
cualquiera de los tipos que aparecen en la lista. Nosotros tenemos que seleccionar http://.
En lugar de cerrar ya la etiqueta con el smbolo >, queremos primero indicar que el
vnculo 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 cdigo 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.
Despus de introducir el smbolo > para cerrar la etiqueta, se insertar automticamente la de final del
enlace, es decir, se insertar </a>, y tendremos .
Ahora podemos completar la etiqueta con la direccin 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>

Contraer y expandir cdigo
Una de las ventajas

de Dreamweaver es la
posibilidad de
seleccionar
fragmentos de cdigo
y contraerlos para
facilitar la legibilidad del
cdigo.
Por ejemplo,
podemos seleccionar el
trozo de cdigo
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 lnea 318, y
pulsar el icono de la barra de herramientas de programacin, veremos como automticamente se
selecciona el cdigo entre las etiquetas mas prximas, en este caso <font> y </font> , si seguimos haciendo
clic se ir seleccionando cdigo entre las siguientes etiquetas, <div> <td> <tr> y <table>. De forma que con
cinco clics en el icono tendremos seleccionado el cdigo de la etiqueta <table> tal y como vemos en la
figura.
Ahora, para contraer

el cdigo seleccionado
basta hacer clic en el
icono y
obtendremos el
resultado que vemos a
la derecha.
De esta forma podramos ocultar el cdigo que no nos interesa y dejar el resto del cdigo ms legible.
Para volver a la situacin inicial basta hacer clic en el icono expandir , o en el signo + que aparece al
lado del cdigo contraido.

Errores en el cdigo
A travs del editor grfico es

posible ver si hay algunos errores en
el cdigo HTML, como puede ser
una etiqueta incompleta.
En el caso de haber un error de

este tipo, el fragmento de cdigo que
contiene el error se mostrar
resaltado en amarillo en la ventana
de diseo de la pgina.
Esto nos permite darnos cuenta

de la lnea concreta en la que se
encuentra el error.
Si en el ejemplo de completar las

etiquetas hubiramos dejado sin
terminar la lnea de cdigo, habiendo
escrito nicamente <a href="", aparecera reflejado en el editor grfico tal y como muestra la imagen de la
derecha.
Otra forma de detectar errores en nuestra pgina es a travs del men Comprobar navegadores de
destino en la barra de herramientas Documento.
Para ver los errores que tiene nuestra pgina, desplegamos el men y elegimos la opcin Validar
documento actual.
A continuacin se abrir el panel Resultados con las lista de los errores encontrados.
A continuacin 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 (seala cdigo que no es compatible con un navegador pero que no
tiene ningn efecto visible), el icono de signo de exclamacin con fondo rojo indica error (indica cdigo que
puede causar un problema visible grave en un navegador concreto, como hacer desaparecer partes de una
pgina) y el icono de signo de exclamacin con fondo amarillo indica advertencia (seala una parte de
cdigo que no se visualizar correctamente en un navegador concreto, pero eso no causar ningn problema
grave de visualizacin).
A continuacin tenemos la pgina y nmero de lnea donde est el error y una descripcin del mismo.
A veces la descripcin es un texto largo que no se puede visualizar completamente para ello puedes utilizar
el botn Ms info .
Como ya sabrs los distintos navegadores y sus distintas versiones hacen que un error lo sea o no,
debemos realizar la comprobacin eligiendo las versiones de los navegadores que consideremos sean las
ms utilizadas entre nuestros navegantes.
Para comprobar la compatibilidad de la pgina web que hayas creado puedes utilizar el desplegable
Comprobar pgina. Despigalo y haz clic sobre la opcin 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 opcin Configuracin se abrir un cuadro de dilogo como este:

Donde podras indicar que navagadores y a partir de qu versin quieres que se tengan en cuenta cuando
Dreamweaver realiza la comprobacin de compatibilidad.
Buscar y reemplazar
En ocasiones es posible querer buscar dentro de un sitio web todas aquellas pginas 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 pginas y no recordbamos 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 mayora de las pginas tiene al comienzo
un texto que hace referencia al nombre del sitio, por ejemplo, todas esas pginas comienzan con
PerrosGatos, y tiene la seguridad de que no existe ese texto en ninguna parte de las pginas 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 pginas que contienen el texto PerrosGatos dicho texto por la imagen.
En este caso no es necesario que abra una por una todas las pginas que contienen dicho texto, ni
tampoco que modifique una por una dichas pginas para cambiar el texto por la imagen. Para realizar esta
tarea resulta ms sencillo utilizar la herramienta de Buscar y reemplazar.
Puedes abrirla a travs del men Edicin, opcin 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 travs de Buscar se especifica si hay que buscarlo en el texto (en la ventana diseo), o en el cdigo
HTML (cdigo fuente).
Junto a la lista de opciones de Buscar, aparece un cuadro de texto en el que hay que indicar el texto o el
cdigo que se desea buscar.
En Reemplazar con hay que especificar el texto o el cdigo por el que se desea cambiar el texto o cdigo
buscado.
El reemplazo puede hacerse de varias formas, siempre a travs 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 cdigo 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 cdigo, y reemplazar en todos
ellos, se utilizan los botones Buscar todos y Reemp. todos.
Cuando se utiliza la opcin Buscar sig., se abre la pgina en la que se encuentra el texto coincidente,
resaltando en el cdigo fuente la lnea 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 opcin 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 cdigo buscado.
Pulsando sobre el botn vuelve a

abrirse la ventana de Buscar y
reemplazar. Desde dicha ventana
podemos reemplazar en los documentos
encontrados, uno por uno, con el botn
Reemplazar, o bien reemplazar directamente en todos los documento encontrados, pulsando sobre el botn
Reemp. todos.
En el panel, cuando se haya reemplazado en algn documento, ste volver a aparecer en la lista junto con
un crculo verde, que indica que ya ha sufrido reemplazo.
En ocasiones podemos equivocarnos, al buscar y reemplazar texto o cdigo errneos. Hay que tener
mucho cuidado al utilizar esta herramienta, ya que no es posible deshacer los cambios en los documentos
que estn cerrados durante la bsqueda y el reemplazo.
En el ejemplo anterior, la persona quera 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 podramos
elegir la opcin Texto, habra que elegir la opcin Cdigo fuente.
En Reemplazar con, habra que especificar la etiqueta HTML completa para insertar la imagen. En este
caso la etiqueta sera <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 mtodos de bsqueda mucho ms 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 Buscar y
reemplazar.
Si quieres ver otros mtodos de bsqueda relacionados con las etiquetas del cdigo visita el avanzado de
Bsqueda en Etiquetas .

13. Otros elementos
Vamos a ver una serie de elementos que suelen aparecer en las pginas web, como pueden ser las
marquesinas, las reglas horizontales y la fecha.
Marquesinas
Las marquesinas son texto, imgenes, o una mezcla entre texto e imgenes, que pueden desplazarse de
un lado a otro de la ventana en forma de lnea. A continuacin tienes un ejemplo de marquesina.
Bienvenid@s a PerrosGatos
Las marquesinas no se pueden insertar a travs del editor grfico de Dreamweaver, es necesario hacerlo a
travs del cdigo.
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.
Tambin es posible especificar algunas caractersticas de la marquesina. La marquesina, por defecto, se

desplaza de derecha a izquierda indefinidamente, pero si lo deseas puedes hacer que estas propiedades
varen. 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 cdigo puedes ver a continuacin:
<marquee behavior="alternate">
Bienvenid@s a PerrosGatos
<img src="imagenes/logo_animales.gif">
</marquee>

13. Otros elementos
Fecha
Dreamweaver permite insertar fcilmente la fecha de ltima modificacin de las pginas.
Cuando se modifica una pgina en la que se ha insertado este tipo de fecha, se actualizar
automticamente con la fecha del sistema.
Conviene insertar la fecha de modificacin cuando la pgina ha de contener informacin 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 pgina no se actualice hasta que pase cierto tiempo, es preferible no incluir la fecha de
modificacin.
Para insertar la fecha hay que dirigirse al men Insertar, a la opcin Fecha.
En la nueva ventana ya es posible establecer el formato de la fecha, y si se desea que se actualice o no

automticamente al modificar y guardar la pgina de nuevo.
Para practicar puedes realizar el Ejercicio Insertar fecha.

13. Otros elementos
Regla horizontal
El elemento que suele utilizarse para separar secciones dentro de una misma pgina es la regla
horizontal. Una regla horizontal no es ms que una lnea horizontal.
Para insertar una regla hay que dirigirse al men Insertar, opcin HTML, luego la opcin Regla
horizontal.
El inspector de propiedades para las reglas es el siguiente.
A travs de sus campos es posible modificar en cierta medida la apariencia de las reglas. A continuacin
tienes cuatro ejemplos de reglas horizontales.
Estas reglas slo se diferencian en las opciones Al (altura) y Sombreado. Las dos primeras, por ejemplo,
no tienen activada la opcin Sombreado, mientras que las otras dos s.
Cdigo de otras pginas
En ocasiones nos gustara incluir en nuestras pginas cosas que hemos visto en otras pginas que estn
publicadas en Internet.
Puedes visualizar el cdigo fuente de dichas pginas a travs del men Ver del navegador Internet
Explorer, opcin Cdigo fuente, o bien mostrar el men contextual de la pgina pulsando con el botn
derecho sobre ella, y pulsando despus sobre la opcin Ver cdigo fuente. De este modo puedes consultar
el cdigo que se ha utilizado para realizar la pgina, y utilizar dicho cdigo en las tuyas.
Visualizar el cdigo fuente resulta til para ver cmo se ha estructurado la pgina, el uso de los
comportamientos (que aparecen programados en cdigo JavaScript), y otra serie de rutinas JavaScript.
Por ejemplo, a continuacin tienes un ejemplo de cdigo que te permite ver la amrquesina en la barra de
estado del navegador.

13. Otros elementos
<SCRIPT language=JavaScript>

</SCRIPT>
Dicho cdigo tiene que ir entre las etiquetas <HEAD> y </HEAD>, y aadir onload="scroller()" dentro de
la etiqueta <BODY>, de modo que sta queda del siguiente modo:
<BODY onload="scroller()">
Este cdigo no es demasiado complicado, y podras casi sin problemas aadirlo a tus pginas, para que
mostrasen los mensajes que quisieras.
Pero en muchas ocasiones puede costar entender el cdigo, sobretodo si no se tienen nociones de ningn
lenguaje de programacin. Si no entiendes el cdigo, puedes cometer el error de copiar cdigo JavaScript
errneo, copiarlo de forma incompleta, insertarlo en una zona incorrecta del cdigo html, etc.
Lo importante que tienes que saber en este momento sobre las funciones JavaScript es que aparecen entre
las lneas
<HEAD> ... <SCRIPT language=JavaScript>  </SCRIPT> ... </HEAD>

14. Capas
Unidad 14. Capas
Vamos a ver algunas de las caractersticas bsicas sobre las capas, para luego poder trabajar con ellas y
aplicarles algn comportamiento.
Introduccin
Las capas no son ms que unos recuadros, que pueden situarse en cualquier parte de la pgina (es decir,
que tienen una posicin absoluta en la pgina), en los que podemos insertar contenido HTML. Dichas capas
pueden ocultarse y solaparse entre s, lo que proporciona grandes posibilidades de diseo.
Las capas pueden moverse de una posicin a otra de la ventana

pulsando sobre el recuadro blanco, y sin soltar el ratn, arrastrndola hacia la
nueva posicin.
Tambin pueden ser redimensionadas pulsando sobre los recuadros

negros, y arrastrndolos hasta conseguir el tamao deseado.
Dentro del recuadro de la capa es posible insertar texto, tablas, imgenes, animaciones flash, y todos los
elementos que puede contener un documento HTML.
Este icono sirve para seleccionar la capa al pulsar sobre l, y al eliminarlo se elimina tambin la capa.
Insertar una capa
Las capas pueden insertarse en una pgina a travs del men Insertar, opcin Objeto de diseo, Div PA
(Elemento con Posicin Absoluta).
Una vez se ha insertado la capa, pueden editarse sus atributos, pero para ello hay que seleccionarla
primero.
Una capa puede seleccionarse de varias maneras. Una de ellas es pulsando sobre el icono
correspondiente, pero esto no resulta til cuando existen muchas capas en un mismo documento, ya que
todas las capas tienen asociada una imagen igual a esta, y no es fcil seleccionar la deseada a la primera.
Cuando existen varias capas en un mismo documento, es

preferible seleccionarlas a travs de la pestaa Elementos PA del
panel CSS, que puede abrirse a travs del men Ventana opcin
Elementos PA. Tambin puedes abrir el panel pulsando F2.
En dicho panel aparecen los nombres de todas las capas que

existen en el documento actual, y para seleccionar una de ellas
simplemente hay que pulsar sobre el nombre en el panel.

14. Capas
Formato de una capa
Las propiedades de la capa se especifican a travs de su inspector de propiedades.
Elemento CSS-P es el nombre de la capa. Tambin puede ser cambiado a travs del panel Elementos
PA, haciendo doble clic sobre l.
Izq y Sup indican la distancia en pxeles que hay entre los lmites izquierdo y superior del documento y la
capa.
An y Al indican la anchura y la altura de la capa.
ndice Z es el nmero de orden de colocacin de las capas. Este valor tambin puede cambiarse a travs
del panel Elementos PA. Una capa ser solapada por aquellas capas cuyo ndice Z sea mayor que el suyo.
Vis indica la visibilidad inicial de la capa. La visibilidad puede ser de cuatro tipos:
Default (visibilidad segn el navegador),
Inherit (se muestra la capa mientras la pgina a la que pertenece tambin se est mostrando),
Visible (muestra la capa, aunque la pgina no se est viendo) y
Hidden (la capa est oculta).
La visibilidad tambin puede cambiarse a travs del panel Elementos PA, pulsando sobre la imagen del
ojo. El ojo abierto indica Visible, y el ojo cerrado indica Hidden.
A travs de Im. fondo y Col puede indicarse una imagen o un color de fondo para la capa.
Desb. (Desbordamiento) controla cmo aparecen las capas en un navegador cuando el contenido excede el
tamao especificado de la capa.
Visible indica que el contenido adicional aparece en la capa. La capa se ampla para darle cabida.
Hidden (oculto) especifica que el contenido adicional no se mostrar en el navegador.
Scroll (desplazamiento) especifica que el navegador deber aadir barras de desplazamiento a la

capa tanto si se necesitan como si no.
Auto (automtico) hace que el navegador muestre barras de desplazamiento para la capa cuando
sean necesarias (es decir, cuando el contenido de la capa supere sus lmites).

14. Capas
Para practicar puedes realizar el Ejercicio Insertar una capa.

15. Comportamientos
En este tema vamos a ver las caractersticas bsicas de los comportamientos, as como un par de
ejemplos de entre sus posibles aplicaciones.
Los comportamientos son propios del HTML, y no se muestran en el documento PDF.
Introduccin
Los comportamientos son acciones que suceden cuando los usuarios realizan algn evento sobre
un objeto, como puede ser mover el ratn sobre una imagen, pulsar sobre un texto, hacer doble clic sobre un
mapa de imagen, etc.
Los comportamientos no existen como cdigo HTML, se programan en JavaScript. Dreamweaver permite
insertarlos a travs del panel Comportamientos, por lo que no es necesario escribir ninguna lnea de cdigo
JavaScript para programarlos.
La imagen que aparece a continuacin tiene asociado un comportamiento, que en una pgina web hara
que al situar el cursor sobre la imagen se mostrase una capa con texto.
La imagen tiene asociados dos comportamientos para mostrar y ocultar la capa. Este tipo de
comportamiento lo veremos ms adelante.
Otros comportamientos que ya has visto son los que se aplican sobre las imgenes de sustitucin y las
barras de navegacin, que ya estn predefinidos, por lo que no es necesario introducir este conjunto de
comportamientos a travs del panel Comportamientos.
Para validar formularios ya viste algunas caractersticas del panel Comportamientos. Vamos a recordar las
que necesitamos para poder insertar comportamientos ms tarde.
El panel Comportamientos se puede abrir a travs del men Ventana, opcin Comportamientos.
Tambin pulsando Mays+F3.

15. Comportamientos
En este panel hay que desplegar el botn pulsando sobre

l, y en Mostrar eventos para elegir una versin de la lista de
navegadores.
Algunos comportamientos no funcionan para algunos

navegadores, por lo que dependiendo del navegador elegido
aparecern unos u otros comportamientos posibles.
Existen comportamientos que funcionan en Internet Explorer

pero no en Netscape. Debido a que la mayora de usuarios utiliza
Internet Explorer, vamos a seleccionar este navegador. Puedes
seleccionar alguna de sus ltimas versiones: IE 5.5 o IE 6.0.
Una vez elegido un navegador ya no es necesario volver a elegirlo las siguientes veces que se desee
insertar algn comportamiento.
Insertar un comportamiento
Cuando ya hay establecido algn navegador, ya se

pueden insertar comportamientos.
Lo primero que hay que hacer es seleccionar el

objeto sobre el que se ha de aplicar el
comportamiento, como puede ser una imagen, un
fragmento de texto, etc.
Al desplegar el botn del panel

Comportamientos aparece la opcin Mostrar
eventos para, a travs de la cual se haba elegido el
navegador. Tambin aparece la lista de todas las
acciones posibles para el navegador elegido
previamente, de entre las que se puede seleccionar
una.
Segn el elemento sobre el que se desee aplicar el

comportamiento, se podrn elegir unas acciones,
mientras que otras no.
En este caso la accin Validar formulario no

puede seleccionarse porque no existe ningn
formulario en la pgina.
Despus de elegir alguna accin, el

comportamiento correspondiente aparece en el panel Comportamientos. En este caso se han insertado dos
comportamientos.

15. Comportamientos
Como puedes ver, cada comportamiento tiene asociados un evento y una accin.
Las acciones son las que se han elegido en la lista anterior y el evento indica cundo se debe de realizar la
accin.
Para eliminar un comportamiento, hay que seleccionarlo en el panel Comportamientos y pulsar sobre el
botn . Tambin es posible cambiar el orden de los comportamientos aplicados a un objeto,
seleccionndolos y ordenndolos mediante los botones .
Mostrar-Ocultar capas
Uno de los comportamientos ms habitual e interesante es el de Mostrar-Ocultar capas. Resulta obvio

que para poder aplicar este comportamiento han de existir capas en el documento.
En la pgina anterior tenas un ejemplo de este tipo. Vamos a ver

qu eventos y acciones hay que establecer para que se produzca
dicho comportamiento.
Despus de seleccionar la imagen hay que seleccionar una

accin de la lista, pulsando sobre el botn . En este caso la
accin tiene que ser la de Mostrar-Ocultar elementos.
Tras elegir la accin, hay que especificar qu capas han de

mostrarse u ocultarse para el evento. Para ello hay que pulsar dos
veces sobre la accin, en el panel Comportamientos.
Entonces aparece una nueva ventana, con la lista de todas las

capas que hay en la pgina, en la que puede indicarse la variacin que se va a producir sobre la visibilidad de
cada una de las capas.

15. Comportamientos
Puede indicarse si se van a Mostrar, si se van a Ocultar, o si van a adquirir la visibilidad inicial
(Predeterminada).
Para determinar la visibilidad de cada una de las capas es necesario seleccionarlas una por una, indicando
su visibilidad a travs de los botones inferiores de la ventana.
No es necesario aplicar una visibilidad diferente a todas las capas de la pgina, solamente a las que se
desea que cambien al producirse el evento. Por ejemplo, en este caso a la capa gatomes no se le ha
aplicado ninguna visibilidad diferente, ya que no se desea que vare al producirse el evento.
Si se desea eliminar una visibilidad establecida para alguna de las capas, simplemente hay que volver a
pulsar sobre el botn correspondiente a la visibilidad que ya tiene aplicada. Por ejemplo, para eliminar la
visibilidad aplicada a la capa gatosemana habra que volver a pulsar sobre el botn Mostrar.
Hay que tener en cuenta en este caso que lo que se desea es que al situar el puntero sobre la imagen, se
muestre la capa, y que cuando el puntero deje de estar sobre la imagen, la capa se vuelva a ocultar. Para ello
es necesario insertar dos comportamientos con la accin Mostrar-Ocultar elementos. Uno de ellos mostrar
la capa para el evento onMouseOver (cuando el ratn est sobre), mientras que el otro la ocultar para el
evento onMouseOut (cuando el ratn est fuera).
Llamar JavaScript
Otro de los comportamientos que puede aplicarse sobre algn objeto es el de Llamar Javascript. Este
comportamiento permite insertar cdigo JavaScript dentro del cdigo del documento.
Por ejemplo, es posible hacer que se cierre la ventana del navegador al pulsar sobre un objeto. Para ello
hay que insertar la lnea JavaScript "window.close();".
Al igual que para el ejemplo de las capas, lo primero que hay que hacer es seleccionar el objeto sobre el
que se desea aplicar el comportamiento. Seguidamente hay que seleccionar la accin Llamar Javascript a
travs del botn .
Entonces aparece una nueva ventana en la que hay que introducir la lnea JavaScript.

15. Comportamientos
Una vez insertado el comportamiento, en el panel

Comportamientos hay que establecer el evento onclick (al
hacer clic) para que la llamada a JavaScript se produzca al
pulsar una vez sobre el objeto.
Pulsando dos veces sobre la accin vuelve a abrirse la ventana

anterior, y es posible modificar la lnea de cdigo.
Para practicar puedes realizar el Ejercicio Crear comportamiento.

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

Texto de la Barra de Estado
El Texto de la Barra de Estado es un elemento muy utilizado a la hora de personalizar una pgina web.
Aunque no funciona en algunos navegadores.
Si observas esta barra cuando navegas vers que va cambiando su texto segn te encuentres sobre un
enlace o no. Normalmente, las pginas que no tratan la Barra de Estado (por ejemplo, esta) no muestran
ninguna informacin. nicamente cuando posicionas el puntero sobre un enlace el texto de la Barra cambia
para mostrar la direccin a la que este se dirige.
Observa este ejemplo, si haces clic sobre l te llevar a la pgina principal de aulaClic.
Cambiar el Texto de la Barra de Estado significara modificar el texto que aparece en ese momento cuando
realizamos un evento sobre un elemento en particular. Por ejemplo:
aulaClic.es
Este comportamiento es muy til para personalizar mucho ms tu pgina y mostrar informacin que de otra
forma no sera posible. Aunque no todos los navegadores son capaces de responder a este comportamiento.
Para crear este comportamiento selecciona el elemento al cual quieres asociar este comportamiento. Abre
el panel Comportamientos (Mayus+F4) y pulsa el botn .
Luego selecciona la opcin Definir texto y haz clic en Establecer texto de la barra de estado.
Aqu debers escribir el texto que quieres que aparezca en el cuadro Mensaje, luego pulsa Aceptar y
listos.
Dnde y cmo asociar el texto en una pgina? es sencillo. Una de las opciones que te da este
comportamiento es poder asociar un texto en concreto a la pgina en s.
Es decir, que cuando abras una pgina se muestre inmediatamente (y permanentemente) un texto en la
barra de estado. Eso es posible creando el mensaje asociado al body de la pgina (para ello tendrs que
insertar el comportamiento sin seleccionar ningn elemento para que se asocie con toda la pgina) y
lanzndolo en el evento onLoad (en la carga del documento). De esta forma cuando se abra la pgina se
mostrar el mensaje en la barra de estado y permanecer all hasta que se produzca un cambio (por ejemplo,
que se posicione el cursor sobre un enlace).

Ahora veamos cmo debemos actuar al establecer texto para los enlaces. En este caso ser necesario que
introduzcamos dos comportamientos.
El primero, asociado al evento onMouseOver (cuando el ratn se encuentra encima) que mostrar el
mensaje que queramos.
El segundo deber ir asociado al evento onMouseOut (cuando el ratn deja de estar encima) que deber
limpiar la barra de estado para que recupere su estado anterior.
En el caso de que hubisemos establecido un mensaje para el body de la pgina, al salir de un enlace (en
el onMouseOut) deberemos volver a escribir ese mensaje para que siga mostrndose.
En el caso de que la pgina no tuviese un mensaje personalizado, deja el cuadro Mensaje en blanco para
que la barra de estado recupere su estado natural.
Observa que si no estableces el segundo comportamiento, cuando posiciones el ratn sobre el enlace (o
imagen, prrafo..., da igual) el texto de la barra de estado cambiar. Pero cuando el ratn deje de estar sobre
el elemento no habr ninguna orden para que el texto vuelva a cambiar y se mantendr fijo con el mensaje del
anterior comportamiento.
Carga Previa de Imgenes
Este comportamiento te ser muy til para mejorar la visualizacin de tus pginas web.
Al cargar previamente las imgenes contenidas en la pgina obligamos al navegador a descargar las
imgenes con prioridad sobre el resto del documento.
As cuando la pgina finalmente se visualiza (porque ha terminado la carga) el usuario ver la estructura
completa de la pgina con las imgenes incluidas ya cargadas y mostrndose.
Este mtodo se diferencia del tradicional en que si no establecemos este comportamiento, la pgina se
carga (slo texto) y se visualiza.
Una vez terminada esta carga, el navegador empieza la descarga de las imgenes. Por lo que hay unos
momentos en los que la pgina 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 imgenes contenidas (el texto se
dispondra sin tenerlas en cuenta hasta que se descargasen).

Para evitar esto utilizaremos la Carga Previa de Imgenes.
Para ello deberemos abrir el panel Comportamientos (Mayus+F4) y hacer clic sobre el botn ,
selecciona, entonces, la opcin Carga previa de imgenes.
Aqu debers incluir las imgenes que quieras que se carguen utilizando los botones , podrs indicar
su ubicacin pulsando el botn Examinar.
Respecto a este comportamiento debers de tener en cuenta dos cosas. La primera y ms obvia es que no
cargues imgenes que no vayas a utilizar. No tiene sentido que desaproveches tiempo de descarga y
visualizacin 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 slo cuando
las imgenes a cargar no son muchas y adems son bastantes ligeras.
Si cargas previamente imgenes 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 pgina tarda
demasiado en cargarse la abandone.
Abrir Ventana del Navegador
Este comportamiento, aunque a primera vista creas que no sirva para mucho, te ayudar a crear enlaces
mucho ms personalizados.
Asociaremos este comportamiento normalmente a un enlace, o como mucho a una imagen o un botn. Pero
siempre lo haremos asociado al evento onClick de estos elementos.
Otra opcin 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 pgina haremos clic en una rea vaca del documento.
Luego abre el panel Comportamientos (Mayus+F4) y pulsa el botn para desplegar la lista.
Selecciona la opcin Abrir ventana del navegador y vers el siguiente cuadro de dilogo:
Veamos las opciones que podemos seleccionar aqu.
En Mostrar URL: escribiremos la URL de la pgina que queremos abrir.
En los cuadros de texto de Ancho de la ventana: y Alto de la ventana: podremos especificar su

tamao en pxeles.
El cuadro Nombre de la ventana: te permitir darle un nombre a la nueva ventana. As, ms tarde,
utilizando JavaScript, podramos referenciarnos a ella utilizando este nombre.
En Atributos: marca las casillas para que los elementos como la barra de estado o la barra de mens
aparezcan en la nueva ventana.
Si dejas todos desmarcados, la ventana se abrir sin ningn elemento y aparecer nicamente rodeada de
un marco de pgina.
Comprobar Navegador
Podemos utilizar este comportamiento para crear dos pginas diferentes dependiendo del navegador que
est utilizando el usuario.
Esta opcin exista debido a que Internet Explorer suele comportarse de forma diferente al resto de
navegadores. Su poltica de seguimiento de los estndares vara un poco respecto a las dems. Por lo que una

pgina se puede ver diferente en IE y en Firefox siendo que tiene el mismo cdigo!
Para saltarnos este error entre los navegadores aparece este comportamiento que utilizaremos para evaluar
el navegador que est utilizando el usuario y mostrando una pgina u otra utilizando redireccionamientos.
Veamos el cuadro de dilogo que se muestra al seleccionar Comprobar navegador al hacer clic en el
botn 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 ms utilizados.
Podemos seleccionar la versin a partir de la cual el cambio de URL se realice, si no tienes muy claro qu
valores debes escribir djalo como est. Los valores por defectos son bastante acertados.
Luego debers seleccionar qu quieres hacer en cada uno de los casos (que se cumpla la versin o no).
Para ello debers rellenar las dos cajas de texto que se encuentran al pie de la ventana URL y Alt URL (URL
alternativa).
En los desplegables encontrars tambin la opcin Permanecer en esta pgina cuyo uso es bastante
aconsejable, as evitars saltos de URLs innecesarios.
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 ms
problemticas y por ello se dedican pginas especiales para ellos.
Un consejo que te podramos dar es que te instales diferentes navegadores en tu PC y hagas pruebas del
visionado de las pginas antes de publicarlas. As te asegurars 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 pgina.
Comprobar Plug-ins
Otro comportamiento que tiene que ver con la comprobacin de las caractersticas del navegador del usuario
es la opcin Comprobar Plug-ins.
Si haces clic sobre ella vers el siguiente cuadro de dilogo:
Este comportamiento nos dar la posibilidad de comprobar si el navegador tiene instalados los plug-ins (o
aadidos) 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 pgina 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 pgina que quieres que se muestre
si el plug-in existe en el navegador del usuario. Djalo en blanco si quieres que se quede en la pgina 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 pgina donde
descargarse el plug-in para poder visualizar la tuya correctamente, o redirigirlo a una pgina que hayas creado
para aquellos que no cumplan los requisitos mnimos del sitio.
Este comportamiento tambin deber ir asociado al evento onLoad del body para que pueda ejecutarse en
la carga de la pgina.
Normalmente este comportamiento slo tendr un uso prctico en Internet Explorer, ya que la mayora del
resto de los navegadores soportan por s solos la deteccin de plug-ins instalados y redireccionan a la fuente
del plug-in directamente.
Mens de Salto
Seccin 1
Aunque este comportamiento se encuentra en el listado del panel Comportamientos vamos a aprender a
insertarlo desde otro lugar ya que te ser ms fcil.
Un men de salto no es ms que un men desplegable desde el que puedes saltar de una pgina a otra con
slo seleccionar la opcin 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 tendra este tipo de mens.
Insertarlo es muy sencillo, slo tienes que hacer clic en Insertar, seleccionar la opcin Formulario y en el
desplegable elegir Men de salto.
Se abrir este cuadro de dilogo:
Para crear el men debers introducir los elementos (opciones) que lo forman. Para ello escribe en Texto el
ttulo de la pgina y en Al seleccionarse, ir a URL la ruta de la pgina que se tiene que abrir si el usuario
selecciona esta opcin del men.
Una vez rellenados estos campos, haz clic en el botn .
Luego repite el proceso tantas veces como elementos en el men quieras insertar.
Cuando hayas acabado decide en qu ventana quieres abrir los enlaces en Abrir URL en: y dale un nombre

al men (para reconocerlo mejor ms tarde) en Nombre del men.
Luego puedes marcar la opcin 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.
Djalo desmarcado si quieres que se muestre el de la pgina que se est visualizando.
Seccin 1 Ir a
Luego marca la opcin Insertar botn Ir tras el men para que se aada un botn al formulario.
Si escoges esta opcin vers que se crea un men como el que tienes justo sobre este prrafo.
El funcionamiento de este men de salto es muy parecido al anterior, slo que una vez seleccionada la
pgina que mostrar hay que pulsar el botn para que se efecte el salto.

17. Estilos CSS avanzados
En temas anteriores vimos cmo funcionaba el Panel CSS y cmo crear hojas de estilos para poder
utilizarlas en tus pginas web.
En este tema aprenderemos ms sobre CSS, pero orientndonos ms a qu es CSS y cmo crear estilos
CSS para crear pginas que sigan los fundamentos y reglas marcadas por el W3C (Word Wide Web
Consortium).
Esta metodologa exige que el archivo HTML solamente muestre datos organizados y estructurados con
etiquetas de marcacin HTML, mientras que la parte de formato recaera sobre los estilos CSS nica y
exclusivamente.
Para poder lograr esto deberemos dominar en profundidad CSS para poder posicionar, modificar o adornar la
pgina de un modo eficiente.
En este tema aprenderemos controles que nos ayudarn a presentar el texto e imgenes de nuestras
pginas de una forma mucho ms limpia y cmoda.
Aplicar estilos CSS
Hasta ahora, si has entrado un poco en el cdigo de las pginas, habrs visto etiquetas que introducan
estilos CSS en ellas.
La forma ms habitual de presentarse es en la seccin head de la pgina de esta forma:
<style type="text/css">

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

</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>
</div>
<div id="contenido">
contenido
</div>
</div>
Hemos creado la parte que contendr la publicidad y el contenido ms importante de la pgina.
14 Selecciona la lnea donde puedes leer contenido e inserta ah una zona editable de plantilla (Insertar
Objetos de plantilla Regin editable).
Quedar algo as:
contenido
15 Para terminar introduce este cdigo al final.
Con l dibujaremos el pie de pgina.
<div id="pie">
Esto es un proyecto de aulaClic.com
<br />
Copyright © aulaClic S.L. 2006
</div>
16 Cierra todos los archivos guardando los cambios.
Volver a la teora

Unidad 17. Utilizando pseudo-elementos y clases
Objetivo.
Practicar el uso de pseudo-elementos y pseudo-clases.
3 Abre el archivo estilo_libreria.css.
4 Aade 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 ratn 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;
5 Aade 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;
Volver a la teora

Unidad 17. Controles de fuente
Objetivo.
Practicar el uso de controles de fuente y formato del texto.
4 Aade el siguiente estilo para que toda la pgina muestre una fuente de tipo Verdana (en caso de que
no estuviese instalada se buscaran por este orden las siguientes fuentes: Arial, Helvetica y finalmente
cualquiera que entre dentro de la categora sans-serif).
Tambin haremos que su tamao sea de 12 pxeles:
body {
font-size: 12px;
5 Para el texto dentro del bloque con id menu aumentaremos el tamao de la fuente a 13 pxeles y
haremos que las letras estn un poco ms separadas:
#menu {
font-size: 13px;
letter-spacing: 1px;
6 Ms tarde introduciremos un formulario en el men. Queremos que el elemento input de cualquier

formulario tenga un tamao de fuente de 9 pxeles:
input {
font-size: 9px;

7 En el bloque con id contenido queremos que haya una clase llamada primera_palabra que sea de 16
pxeles de tamao y en negrita:
#contenido .primera_palabra {
font-size: 16px;
font-weight: bold;
8 Crea un estilo para una clase llamada precio que tenga un tamao de fuente de 16 pxeles, 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 tamao de fuente de 9 pxeles.
#pie {
font-size: 9px;
10 Guarda los cambios.
Volver a la teora

Unidad 17. Controles de ratn
Objetivo.
Practicar el uso de controles de ratn.
Debido a un error en la codificacin del comportamiento de menu emergente, los elementos de la lista no
muestran el puntero de enlace cuando posicionas el ratn sobre ellos en Mozilla Firefox.
4 Lo arreglaremos aadiendo el siguiente estilo:
#menu #menuFg0 {
cursor: pointer;
Volver a la teora

Unidad 17. Controles de fondo
Objetivo.
Practicar el uso de controles de fondo.
4 Al estilo que le aplicamos al body en ejercicios anteriores le aadiremos 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 pgina:
body {
font-size: 12px;
background: url(imagenes/fondo.gif) repeat-x bottom;
5 Aadiremos un nuevo estilo para que el bloque con id cabecera muestre una imagen de fondo, que no
se repita y adems estableceremos que el fondo sea de color blanco:
#cabecera {
background-image: url(imagenes/cabecera.jpg);
background-color: white;
6 Finalmente modificaremos el estilo del bloque con id menu para aadirle un fondo de imagen que se
repita a lo largo del eje horizontal:
#menu {
font-size: 13px;
background: url(imagenes/fondo_menu.gif) repeat-x;
Volver a la teora

Unidad 17. Controles de mrgenes y bordes
Objetivo.
Practicar el uso de controles de mrgenes y borde.
4 Para que en Internet Explorer se muestre todo el contenido centrado aadiremos esta propiedad a la
etiqueta body:
body {
font-size: 12px;
background: url(imagenes/fondo.gif) repeat-x bottom;
text-align: center;
5 Para que en el resto de navegadores se muestren los contenidos centrados aadiremos lo siguiente en
los bloques con id cabecera, menu y pie.
La clase contenedor tambin deber ir centrada, as que tambin deberemos aplicarle las mismas
propiedades:
#cabecera {
margin-left: auto;
margin-right: auto;

text-align: right;
#menu {
font-size: 13px;
margin-left: auto;
margin-right: auto;
text-align: left;
.contenedor {
margin-left: auto;
margin-right: auto;
text-align: left;
#pie {
font-size: 9px;
margin-left: auto;
margin-right: auto;
Observa como en los casos en los que queremos que el texto no est centrado deberemos indicarlo con la
propiedad text-align.

Recuerda que toda la pgina 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 separacin exterior
en la parte inferior de 20 pxeles.
Tambin estableceremos el padding de todos los lados (la separacin de los bordes con el contenido).
Y crearemos dos bordes, uno en la parte superior de color gris y de 1 pxel de ancho, el otro de color rojo
y con 5 pxeles de ancho.
#menu {
font-size: 13px;
margin-left: auto;
margin-right: auto;
text-align: left;
margin-bottom: 20px;
border-top: 1px solid gray;
border-bottom: 5px solid #E35331;
7 Tambin estableceremos los paddings para los elementos de clase item dentro del bloque con id
menu:
#menu .item {
8 El bloque con id anuncios deber tener un margen inferior de 15 pxeles.

Tambin le aadiremos unos paddings a izquierda y derecha.
Como se encuentra dentro de un bloque de clase contenedor se ver afectado por el alineamiento a la
izquierda, lo centraremos de nuevo al centro utilizando text-align.
#anuncios {
padding-right: 5px;
padding-left: 5px;
text-align: center;
9 Separaremos los elementos de clase item dentro del bloque de anuncios con un margen inferior de 10
pxeles:
#anuncios .item {
10 Al bloque con id contenido le daremos un padding izquierdo y superior:
#contenido {
padding-left: 5px;
padding-top: 15px;
11 Ms tarde crearemos un bloque con id listado, vamos a configurarlo para que tenga un margen
superior de 30 pxeles y un padding inferior tambin de 30.
#listado {
margin-top: 30px;

12 La clase item dentro del bloque con id listado deber tenter un margen izquierdo de 60 pxeles.
#listado .item {
margin-left: 60px;
13 La clase borde_inferior deber tener un borde inferior de 1 pxel de ancho de color negro:
.borde_inferior {
border-bottom: 1px solid black;
14 Finalmente aadiremos al bloque con id pie un margen inferior de 15 pxeles, unos paddings
superior e inferior y un borde superior rojo de 5 pxeles de ancho:
#pie {
font-size: 9px;
margin-left: auto;
margin-right: auto;
padding-top: 10px;
border-top: 5px solid #E35331;
Volver a la teora

Unidad 17. Controles de bloque
Objetivo.
Practicar el uso de controles de bloque.
4 Al bloque con id cabecera le daremos un ancho y un alto para que se ajuste a la imagen de fondo:
#cabecera {
text-align: right;
margin-left: auto;
margin-right: auto;
width: 780px;
height: 150px;
5 Al bloque con id menu le daremos un ancho y estableceremos que su contenido no puede saltar de
lnea:
#menu {
font-size: 13px;
margin-left: auto;

margin-right: auto;
text-align: left;
border-top: 1px solid gray;
border-bottom: 5px solid #E35331;
white-space: nowrap;
width: 780px;
6 Como luego insertaremos un formulario en el menu, le vamos a dar la propiedad inline para que se
muestre como un elemento en lnea y no cree un salto de lnea:
#menu form {
display: inline;
7 Tambin 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 pxeles y estar flotando a la derecha:

#anuncios {
padding-right: 5px;
padding-left: 5px;
text-align: center;
width: 125px;
float: right;
9 Al bloque con id contenido le daremos un ancho de 635 pxeles para que todo su contenido se
encuentre a la izquierda del bloque de anuncios:
#contenido {
padding-left: 5px;
padding-top: 15px;
width: 635px;
10 Al bloque con id pie le daremos un acho determinado y estableceremos la propiedad clear para que no
tenga problemas de solapamiento con el float de los anuncios:
#pie {
font-size: 9px;
margin-left: auto;
margin-right: auto;
padding-top: 10px;

border-top: 5px solid #E35331;
width: 780px;
clear: both;
11 Finalmente crearemos dos ltimas clases img_item, salto_linea y alto_10 que utilizaremos ms
adelante.
La primera simplemente crea un flotamiento a la izquierda.
La segunda limpia el flotamiento y establecer una separacin de 15 pxeles.
La tercera deber ser de 10 pxeles de altura.
.img_item {
float: left;
.salto_linea {
clear: left;
height: 15px;
.alto_10 {
height: 10px;
Volver a la teora

Unidad 19. Instalacin de WAMP
Objetivo.
Practicar las operaciones necesarias para instalar un servidor local utilizando el paquete WAMP.
1 Sigue las instrucciones que hemos explicado en la teora para instalar WAMP en tu ordenador. El
programa wamp5_1.6.1.exe puedes bajrtelo gratis desde sourceforge.Ten en cuenta que van apareciendo
nuevas versiones y quizs haya algunas diferencias con la versin 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 pgalos en tu carpeta de

ejercicios.
Volver a la teora

Unidad 19. Crear un servidor de pruebas
Objetivo.
Practicar las operaciones necesarias para crear un Servidor de Prueba.
3 Selecciona el sitio Libreria en el panel Archivos.
4 Haz clic en Sitio Administrar sitios....
5 Selecciona el sitio Libreria y pulsa el botn Editar.
6 En el cuadro de dilogo que se abrir seleciona la pestaa Avanzada.
7 Selecciona la categora 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 botn y busca la carpeta Libreria que se encuentra dentro
de tu carpeta de ejercicios. Seleccinala 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.
Volver a la teora

Unidad 19. Crear una Base de Datos
Objetivo.
Practicar las operaciones necesarias para crear una Base de Datos.
1 Si WAMP no se est ejecutando, lnzalo para realizar este ejercicio. Para ejecutar el programa slo
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, lnzalo para poder tener acceso a las bases de datos.
3 Haz clic izquierdo sobre el icono de WAMP en el rea de notificacin y selecciona la opcin
phpMyAdmin.
4 Se abrir una ventana, escribe bd_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.
Volver a la teora

Unidad 19. Crear una Tabla
Objetivo.
Practicar las operaciones necesarias para crear una Tabla.
1 Si WAMP no se est ejecutando, lnzalo para realizar este ejercicio.
phpMyAdmin.
4 Se abrir una ventana, en el desplegable del men de la izquierda selecciona la base de datos
bd_libreria.
5 Para crear una nueva tabla en la seccin Crear nueva tabla en la base de datos escribe Libros en
Nombre y 7 en Campos.
6 Pulsa el botn 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.
Volver a la teora

Unidad 19. Importar datos a una Tabla
Objetivo.
Practicar las operaciones necesarias para importar datos a una Tabla.
phpMyAdmin.
bd_libreria.
5 Haz clic en la opcin Importar que encontrars en el men horizontal en la parte superior de la ventana:
6 En la siguiente ventana pulsa el botn 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 seleccinalo en la lista de Juego de caracteres del
archivo.
8 Pulsa el botn Continuar.
9 Asegrate de que se han introducido datos en la tabla pulsando la opcin Examinar de la tabla Libros.
Volver a la teora

Unidad 19. Asignar privilegios en una base de datos
Objetivo.
Practicar las operaciones necesarias para crear un usuario y asignarle privilegios.
phpMyAdmin.
4 Se abrir la ventana principal haz clic sobre .
5 Haz clic en el vnculo Agregar un nuevo usuario.
6 En la nueva ventana escribe librero en Nombre de usuario.
7 En Servidor escribe localhost.
8 En Contrasea escribe aulaclic.
9 En Debe volver a escribir escribe aulaclic de nuevo.
10 Pulsa el botn Continuar para crear el usuario.
11 En la nueva pantalla desplzate hacia abajo hasta encontrar:
Aqu selecciona la base de datos bd_libreria en el desplegable y pulsa Continuar para modificar los
privilegios de este usuario sobre esta base de datos.
12 Selecciona los privilegios SELECT, INSERT, UPDATE y DELETE. Si te das cuenta estn todos en el
marco de Datos.
Vamos a darle a este usuario nicamente permiso de escritura y lectura sobre la base de datos.
Los permisos de Administracin y Estructura los dejaremos en blanco para que este usuario no pueda
acceder a la parte administrativa ni pueda modificar la estructura de las tablas.
13 Pulsa Continuar para asignarle al usuario esos privilegios y habremos terminado.
Volver a la teora

Unidad 20. Crear una conexin a una Base de Datos
Objetivo.
Practicar las operaciones necesarias para crear una conexin a una base de datos.
2 Si los servicios de MySQL o Apache no se estn ejecutando, lnzalos para poder tener acceso a las
bases de datos y a la ejecucin de archivos PHP.
3 Ejecuta Dreamweaver y abre el sitio libreria, vamos a trabajar sobre l.
4 Abre el panel Bases de Datos con la combinacin de teclas CTRL + MAYUS + F10 o desde el men
Ventana Bases de datos.
5 Haz clic en el botn y selecciona Conexin MySQL para crear una nueva conexin:
6 En Nombre de conexin escribe liberia_aulaclic.
7 En Servidor MySQL escribe localhost.
8 En Nombre de usuario escribe librero.
10 En Base de datos selecciona bd_libreria.
11 Pulsa Aceptar para crear la conexin.
Vers como en el panel Base de datos aparece la nueva conexin libreria_aulaclic.
Volver a la teora

Unidad 20. Crear un Recordset
Objetivo.
Practicar las operaciones necesarias para crear un recordset.
4 Abre un archivo dinmico nuevo basado en la plantilla libreria.dwt.php (Archivo Nuevo, pestaa
Plantillas).
5 Gurdalo como nuevos.php.
6 Haz clic en el botn para crear un nuevo juego de registros.
7 En el cuadro de dilogo que se abrir rellena los datos de la siguiente forma: en Nombre escribe
listado_libros.
8 En Conexin selecciona libreria_aulaclic.
9 En Tabla selecciona libros.
10 Deja el resto como est y pulsa el botn Prueba para ver una previsualizacin de qu registros
componen el recordset.
11 Haz clic en el botn Aceptar para crear el juego de registros.
12 Cierra el documento guardando los cambios.
Volver a la teora

Unidad 20. Crear Texto Dinmico
Objetivo.
Practicar las operaciones necesarias para insertar texto dinmico y modificar sus propiedades.
4 Abre el archivo nuevos.php.
5 En el rea de contenido que podemos modificar introduce la siguiente lnea: Listado de libros nuevos: e
introduce tres saltos de lnea (SHIFT + ENTER).
6 Luego debers insertar una tabla con un relleno de celda de 5.
7 La tabla deber tener 3 filas y 4 columnas.
8 Selecciona la primera columna y dale un ancho de 197 pxeles.
9 Selecciona la segunda columna y dale un ancho de 142 pxeles.
10 Selecciona la tercera columna y dale un ancho de 156 pxeles.
11 Por ltimo, selecciona la ltima columna y dale un ancho de 100 pxeles.
12 Selecciona todas las celdas de la segunda fila y combnalas utilizando el botn en el panel de
Propiedades.
13 Haz lo mismo para la tercera fila.
14 Selecciona la cuarta celda de la primera fila y dale como estilo la clase precio.
15 Selecciona la segunda y tercera fila y dales la clase alto_10.
16 Ahora vamos a aadir una segunda clase a la segunda fila, como Dreamweaver slo nos permite
seleccionar una, deberemos ir a la vista de Cdigo para editarlo desde all (recuerda el tema de CSS
avanzado).
Localiza la segunda fila que tendr este aspecto:
<td colspan="4" class="alto_10"></td>
Adele la clase borde_inferior, dejndola as:
<td colspan="4" class="alto_10 borde_inferior"></td>

17 Vuelve a la vista de Diseo y abre el panel Vinculaciones (CTRL + F10).
18 Despliega el juego de registros listado_libros y arrastra el elemento Titulo a la primera celda de la

primera fila de la tabla.
19 Arrastra el elemento Autor a la segunda celda.
20 Arrastra el elemento Editorial a la tercera celda.
21 Arrastra el elemento Precio a la cuarta celda.
22 Selecciona el elemento Autor de la pgina y ponlo en cursiva pulsando el botn en el panel de

Propiedades.
23 Abre el panel Comportamientos del servidor (CTRL + F9) y haz doble clic sobre el elemento Texto
dinmico {listado_libros.Titulo} para modificar sus propiedades.
24 En el cuadro de dilogo que se abrir selecciona el valor May.-min. - Mays. del desplegable Formato
para mostrar todo el texto en maysculas.
25 Pulsa el botn de vista LiveData y vers como se muestra el primer registro. (Tambin puedes
visualizar los datos desde el localhost pulsando la tecla F12).
Volver a la teora

Unidad 20. Repeticiones de Texto Dinmico
Objetivo.
Practicar las operaciones necesarias para crear repeticiones de texto dinmico.
5 Ve a la vista de Cdigo y selecciona las tres filas de la tabla que creamos en el ejercicio anterior.
Vamos a aplicar una repeticin sobre este bloque, haremos que se repita 7 veces (para que muestre 7
registros seguidos).
6 Pulsa el botn Regin repetida en la barra de Datos.
7 En el cuadro de dilogo que se abre escribe 7 en el cuadro de texto y pulsa Aceptar.
8 Si previsualizas el aspecto de la pgina en la vista LiveData o pulsas F12 para ver el resultado en el
servidor de pruebas vers que ahora el listado de registros a aumentado mostrando 7, una raya negra separa
cada uno de ellos.
Volver a la teora

Unidad 20. Ordenacin de un Recordset
Objetivo.
Practicar las operaciones necesarias para ordenar los registros de un Recordset.
5 Abre el panel Comportamientos del servidor y haz doble clic sobre el elemento Juego de registros
(listado_libros).
6 En el cuadro de dilogo que se abrir, selecciona Titulo en el desplegable Ordenar:.
7 En el desplegable de la derecha selecciona Ascendente.
8 Acepta el cuadro de dilogo y si visualizas la pgina en modo vista LiveData vers como los registros
ahora salen ordenados alfabticamente por su ttulo.
Volver a la teora

Unidad 20. Filtrado de Registros
Objetivo.
Practicar las operaciones necesarias para filtrar los registros de un recordset.
4 Copia el archivo nuevos.php seleccionndolo en el panel Archivos y pulsando CTRL + C.
5 Renmbralo seleccionando el nuevo archivo y pulsando F12 y llamalo usados.php.
6 Repite los pasos 4 y 5 para crear una copia del archivo nuevos.php llamada ofertas.php.
7 Abre los tres archivos.
8 En el archivo ofertas.php elimina las lneas: Listado de libros nuevos:<br /><br /><br />.
9 En el archivo usados.php cambia la palabra nuevos por usados en la lnea anterior.
10 En el archivo nuevos.php abre el panel Comportamientos del servidor (CTRL + F9) y haz doble clic
sobre el elemento Juego de registros (listado_libros).
11 Se abrir un cuadro de dilogo, modifica el Nombre listado_libros por libros_nuevos.
12 En Filtro selecciona el campo Usado.
13 En el desplegable de abajo, selecciona Valor introducido y escribe 0 en el cuadro de texto de su

derecha.
Debera quedarte algo como Filtro Usado = Valor introducido 0.
Hemos creado un filtro para que se muestren aquellos registros con valor 0 en su campo Usado, sern
aquellos que no estn usados.
14 Pulsa el botn Prueba para asegurarte y guarda los cambios haciendo clic en Aceptar para salir.
Dreamweaver lanzar la herramienta Buscar y Reemplazar para asegurarte de que ha cambiado el

nombre del juego de registros en el cdigo de la pgina, puedes pulsar el botn Buscar todos para
asegurarte, pero bastar con que cierres el cuadro de dilogo.
15 Cierra todos los documentos guardando los cambios.
Volver a la teora

Unidad 20. Paginacin de Registros
Objetivo.
Practicar las operaciones necesarias para crear paginaciones de registros.
4 Abre el archivo nuevos.php y en la vista de Cdigo, bajo la tabla del listado de registros crea una tabla
con tres celdas, han de tener cada una un 33% de ancho.
La primera debe tener el alineamiento a la izquierda, la segunda al centro y la tercera a la derecha.
5 Coloca el cursor en la primera celda de la nueva tabla.
6 Haz clic en la opcin Mover a la pgina anterior del desplegable de opcin de paginacin:
7 En la celda se aadir el texto Anterior.
8 Coloca el cursor en la tercera celda.
9 Ahora selecciona la opcin Mover a la siguiente pgina.
10 En la celda se aadir el texto Siguiente.
11 Pulsa F12 para ver el resultado de la pgina desde el localhost, vers como puedes avanzar por los
registros hasta mostrarlos todos.
Volver a la teora

Unidad 20. Recuento de Registros
Objetivo.
Practicar las operaciones necesarias para insertar elementos de recuento de registros.
5 En la tabla de abajo selecciona la celda del centro para colocar el cursor all.
6 Haz clic en la opcin Registro final del listado de opciones de recuento de registros en la barra Datos.
7 Se aadira el texto {libros_nuevos.LastRecord} a la celda.
8 Escribe de a su derecha.
9 Ahora selecciona la opcin Total de registros en el listado de recuento de registros anterior.
10 Deber quedarte algo como: {libros_nuevos.LastRecord} de {libros_nuevos.TotalRecords}
11 Prueba la pgina pulsando F12 y vers como ahora adems de los enlaces de avance y retroceso se
muestra tambin el nmero del ltimo registro junto al total.
Volver a la teora

Unidad 20. Ocultar/Mostrar Regiones
Objetivo.
Practicar las operaciones necesarias para ocultar o mostrar regiones en una pgina.
5 Selecciona el texto Anterior, vamos a ocultarlo en la primera pgina.
6 Haz clic en la opcin Mostrar si no es la primera pgina en el listado de mostrar regin en la barra
Datos.
7 Ahora selecciona el texto Siguiente, lo vamos a ocultar en la ltima pgina.
8 Selecciona la opcin Mostrar si no es la ltima pgina del listado de mostrar regin anterior.
9 Puedes visualizar los cambios que hemos realizado pulsando F12 para lanzar el localhost.
Volver a la teora

Unidad 20. Enlaces con Parmetros
Objetivo.
Practicar las operaciones necesarias para crear enlaces con parmetros.
5 Selecciona el elemento {libros_nuevos.Titulo} en la primera celda de la primera tabla.
6 En el panel Propiedades escribe en el campo Vnculo lo siguiente: comprar.php?id=.
7 Ahora abre el panel Vinculaciones (CTRL + F10) y ve a la vista de Cdigo.
8 Arrastra el elemento Id al lado del texto que hemos escrito. Deber quedarte algo como esto:
<a href="comprar.php?id=<?php echo $row_libros_nuevos['Id']; ?>">
<?php echo strtoupper($row_libros_nuevos['Titulo']); ?></a>
Hemos creado un enlace a una pgina llamada comprar.php y le hemos pasado un parmetro id con el
valor del Id del registro que se muestre.
Por lo que en cada ttulo de cada libro habr un enlace diferente que abrir la pgina comprar.php con el
valor del id del libro correspondiente.
Volver a la teora

Unidad 20. Filtros con Parmetros
Objetivo.
Practicar las operaciones necesarias para crear una un recordset con filtro por parmetro.
Crearemos dos archivos que funcionen con filtros de parmetros.
Primero crearemos un archivo comprar.php.
Plantillas).
5 Gurdalo como comprar.php.
detalle_libro.
10 Modifica la opcin Filtro para que pueda leerse: Id = Parmetro URL id.
Hemos creado un filtro que tomar el valor del parmetro id en la URL y lo comparar con el valor del
campo Id.
11 En la zona donde puedes incluir contenido aade un bloque div (Insertar Objetos de diseo
Etiqueta DIV), dale la clase detalle.
12 Coloca el cursor dentro del bloque y inserta la imagen imagenes/item.gif, dale la clase img_item.
13 Modifica el campo Origen de la imagen desde el panel Propiedades arrastrando el elemento Usado
desde el panel Vinculaciones para que pueda leerse:
imagenes/item<?php echo $row_detalle_libro['Usado']; ?>.gif

14 Inserta el elemento Titulo arrastrndolo desde el panel Vinculaciones y ponlo en negrita.
15 Haz doble clic en el elemento en el panel Comportamientos del servidor y cambia su formato a
Poner en maysculas.
16 Inserta un salto de lnea (CTRL + ENTER).
17 Inserta el elemento Autor arrastrndolo desde el panel Vinculaciones y ponlo en cursiva.
19 Inserta el elemento Editorial arrastrndolo desde el panel Vinculaciones.
21 Escribe ISBN: e inserta el elemento ISBN arrastrndolo desde el panel Vinculaciones.
22 Inserta dos saltos de lnea (CTRL + ENTER).
23 Inserta el elemento Precio arrastrndolo desde el panel Vinculaciones.
24 Escribe a continuacin, seleccinalo todo y aplcale la clase precio.
25 Colcate fuera del bloque div e inserta tres saltos de lnea (CTRL + ENTER).
Como puedes ver, hemos incluido un bloque div donde hemos escrito el contenido del registro del
recordset.
Presta especial atencin a la imagen, en el campo Origen hemos colocado lo siguiente:
"imagenes/item<?php echo $row_detalle_libro['Usado']; ?>.gif"
Esto formar la ruta de una imagen que ser un archivo u otro dependiendo del valor en el campo Usado
del registro.
Debido a que este campo puede tomar los valores 0 1 las imgenes que se podran cargar seran
item0.gif o item1.gif.
26 Para comprobar que funciona correctamente debers pulsar la tecla F12 para copiar el archivo al
servidor de pruebas.
Vers que el archivo no muestra casi nada porque no ha recibido ningn valor en el parmetro Id.
27 Ahora visualiza en tu navegador la pgina nuevos.php
28 Haz clic en alguno de los ttulos, recuerda que en el ejercicio anterior enlazamos cada ttulo con la
pgina comprar.php pasando como parmetro el Id del libro.
Ahora se cargar el archivo comprar.php mostrando el detalle del libro que hemos seleccionado (fjate en
el parmetro de la URL). Y fjate tambin en la imagen del libro, muestra siempre la imagen del libro nuevo.
Ahora crearemos un archivo buscar.php.
Plantillas) y gurdalo como buscar.php.
2 En la zona donde puedes incluir contenido aade el siguiente prrafo:
Introduce en la siguiente caja de texto el nombre del ttulo o el autor del libro y nosotros lo
buscaremos por ti:
3 Inserta un formulario con nombre formulario a continuacin (Insertar Formulario Formulario).
4 Coloca el cursor dentro del formulario.
5 Inserta un campo de texto desde el men Insertar Formulario Campo de texto.
6 En el panel de Propiedades escribe buscar como id del Campo de texto.
As le pasaremos su contenido a la URL en el parmetro buscar.
7 Seleciona el formulario haciendo clic en la etiqueta <form> y cambia el mtodo de POST a GET.
Como ya hemos comentado es necesario hacerlo de esta forma para que el cdigo generado por
Dreamweaver funcione correctamente.
8 Tambin establece como accin buscar.php, es decir, el mismo archivo.
9 Inserta un botn al lado del campo de texto desde el men Insertar Formulario Botn.
10 En el panel Propiedades cambia su propiedad Value a Buscar.
12 Crea un bloque div con id listado (Insertar Objetos de diseo Etiqueta DIV).
13 Coloca el cursor dentro del bloque, y escribe:
Su bsqueda de ha devuelto resultados:
Vamos ahora a insertar el ttulo pasado como parmetro.
14 Posiciona el cursor delante de la palabra ha.
15 Selecciona del men Insertar Objetos PHP Variables de URL

Se crear el siguiente cdigo:
<?php $_GET[]; ?>
16 Slo nos falta indicar el nombre de la variable URL escribiendo 'buscar' dentro de los corchetes; no te
olvides de las comillas simples.
17 Desde la vista Cdigo encierra el cdigo php entre etiquetas <i> para que el ttulo aparezca en cursiva.
El cdigo resultante deber ser este:
Su búsqueda de <i>'<?php echo $_GET['buscar']; ?>'</i> ha devuelto resultados:
18 Vuelve a la vista de Diseo.
Ahora crearemos un juego de registros para esta pgina que se cree filtrndose por el texto introducido en
la caja del formulario.
busqueda.
23 Modifica la opcin Filtro para que pueda leerse: Titulo = Parmetro URL buscar.
Hemos creado un filtro que tomar el valor del parmetro buscar en la URL y lo comparar con el valor del
campo Titulo.
Ahora insertaremos el total de registros entre las palabras devuelto y resultados.
24 Posiciona el cursor entre las palabras devuelto y resultados.
25 Haz clic en la opcin Total de registros de la barra Datos.
La lnea quedar as:
Su búsqueda de <i>'<?php echo $_GET['buscar']; ?>'</i> ha devuelto <?php echo

$totalRows_busqueda ?> resultados:
Vamos a crear el listado que se corresponda con el recordset que acabamos de crear.
26 An dentro del bloque que hemos creado, crea un bloque div con id item (Insertar Objetos de
diseo Etiqueta DIV).
27 Dentro del bloque con id item inserta la imagen imagenes/item.gif.
28 A la imagen asgnale la clase img_item.

29 Arrastra el campo Usado desde el panel Vinculaciones sobre el cuadro origen de las propiedades de
la imagen para que se pueda leer:
imagenes/item<?php echo $row_libros_mas_vendidos['usado']; ?>.gif
30 Luego arrastra desde el panel Vinculaciones el elemento Titulo y colcalo despus de la imagen y
ponlo en negrita.
31 Haz doble clic sobre l en el panel Comportamientos del Servidor para ponerlo en mayscula
seleccionando el formato Poner en maysculas.
32 Introduce un salto de lnea (CTRL + ENTER).
33 Arrastra el elemento Autor desde el panel Vinculaciones y ponlo en cursiva.
35 Arrastra el elemento Editorial desde el panel Vinculaciones.
37 Escribe ISBN: y arrastra el elemento ISBN desde el panel Vinculaciones.
38 Introduce dos salto de lnea (CTRL + ENTER).
39 Arrastra el elemento Precio desde el panel Vinculaciones y dale la clase precio.
40 A continuacin escribe y aade la imagen imagenes/compra.gif.
41 La imagen que acabamos de aadir deber tener la alineacin a Texto superior.
42 Enlaza la imagen a comprar.php?id= desde el campo Vnculo del panel Propiedades.
43 Al enlace aadele al final el Id, arrastrndolo desde el panel Vinculaciones.
44 Inserta un bloque DIV (Insertar Objetos de diseo Etiqueta DIV), dale el id salto_linea desde el
panel Propiedades.
Vamos a ahora hacer que se muestren cuatro libros por pgina.
45 Selecciona el bloque item y salto_linea.
46 Selecciona la opcin Repetir Regin en la barra de Datos.
47 Haz que se repita 4 veces.
Estamos repitiendo el bloque de la informacin del libro y aadiendo un bloque con un salto de lnea para
separarlo del siguiente.
48 Finalmente, y an dentro del bloque con id listado, inserta una tabla de 3 columas y 1 fila de 100% de

ancho.
Las tres columnas tienen que tener un 33% de ancho.
La celda central estar alineada al centro.
La celda de la derecha estar alineada a la derecha.
49 En la primera celda introduce un elemento de navegacin Anterior, utiliza la opcin Mover a la pgina
anterior de la barra Datos.
50 Selecciona el elemento Anterior y haz que no se muestre en la primera pgina haciendo clic en la
opcin Mostrar si no es la primera pgina de la barra Datos.
51 En la tercera celda introduce un elemento de navegacin Siguiente, utiliza la opcin Mover a la

pgina siguiente de la barra Datos.
52 Selecciona el elemento Siguiente y haz que no se muestre en la ltima pgina haciendo clic en la
opcin Mostrar si no es la ltima pgina de la barra Datos.
53 Para terminar en la celda central introduce un elemento Registro final seguido del texto " de " y un
elemento Total de Registros.
Te quedar algo as:
<?php echo min($startRow_busqueda + $maxRows_busqueda, $totalRows_busqueda) ?> de <?php

echo $totalRows_busqueda ?>
Ahora haremos que slo se muestre la informacin si se han encontrado registros
54 Selecciona todo el contenido que hemos aadido hasta ahora, sin incluir el formulario .
55 Selecciona la opcin Mostrar si el juego de registros no est vaco de la barra Datos.
56 Para comprobar que funciona correctamente pulsa la tecla F12 para copiar el archivo al servidor de
pruebas.
Vers que el archivo slo muestra el formulario.
57 Introduce el ttulo de un libro en l.
De momento esta pgina slo muestra los resultados para las entradas exactas de nombres de libros, ms
adelante cambiaremos eso.
Finalmente vamos a aadir una caja de bsqueda a nuestra plantilla.
1 Abre la plantilla libreria.dwt y en la barra de men aade al final del todo el siguiente cdigo:
<span class="item"><form action="buscar.php"><input type="text" name="buscar"

/></form></span>
Hemos aadido un formulario que ejecutar el archivo buscar.php pasndole un parmetro buscar con el
valor que escribamos en la caja de texto.
2 Guarda la plantilla y aplcala sobre todos los archivos anteriores.
3 Guarda todos los cambios en los archivos abiertos.
4 Selecciona todos los archivos PHP en el panel Archivos y haz clic derecho sobre cualquiera de ellos.
5 Selecciona la opcin Vista previa en el Navegador para que se copien al servidor de pruebas.
6 Prueba cmo funciona el formulario del men.
Recuerda que debers escribir un ttulo de un libro exacto.
Volver a la teora

Unidad 20. Insercin de registros
Objetivo.
Practicar las operaciones necesarias para utilizar el asistente de insercin de registros.
4 Abre el archivo comprar.php.
Vamos a insertar un formulario que insertar un registro en la tabla de compras que almacene los datos
del usuario junto con el pedido del libro que se muestra en el detalle.
5 Coloca el cursor en la parte inferior de la zona en la que se permite la modificacin.
6 Haz clic en el botn Asistente de formulario de insercin de registros .
7 En el cuadro de dilogo que se abrir debers seleccionar la Conexin libreria_aulaclic.
8 Selecciona la Tabla compras para guardar el nuevo registro all.
9 En Tras insertar, ir a escribe index.php para que vuelva a un ndice que crearemos ms adelante.
Ahora configuraremos los campos que queremos que aparezcan en el formulario.
10 Selecciona el campo Id y elimnalo, no hace falta que se muestre porque es autonumrico y se le

asigna un valor automticamente.
11 Selecciona el campo Nombre y en Mostrar como selecciona Campo de texto, envalo como Texto.
12 En el campo Tarjeta tambin seleccionaremos Campo de texto, en este caso lo deberamos de enviar
como Numrico, pero este tipo de datos se queda corto y no es capaz de almacenar los 16 dgitos que
necesitamos, as que lo pasarmos como Texto, mySQL ya se encargar l slo de transformarlo y
almacenarlo como numrico.
13 Selecciona el campo Tipo_Tarjeta y elige Men en Mostrar como.
Aparecer un botn Propiedades del men,
14 plsalo e introduce tres elementos en el nuevo cuadro de dilogo: VISA, VISA ELECTRON y
MASTERCARD.
Debers dar estos valores en las propiedades Etiqueta y Valor, para que se muestre y se enve el mismo
texto.

15 Pulsa Aceptar para cerrar el cuadro de dilogo.
16 Selecciona, finalmente, el campo Id_Libro y en Mostrar como selecciona Campo oculto.
Vamos a indicarle que el valor que tiene que almacenar es el del libro que se est mostrando como Detalle.
17 Para ello, haz clic en el botn Datos dinmicos para abrir un cuadro de dilogo con los elementos
cargados en los diferentes recordsets de la pgina.
En este caso slo hay uno: detalle_libro.
18 Selecciona el campo Id y pulsa Aceptar.
Como puedes ver, ahora el valor del campo Id_Libro ser el valor del campo Id del juego de registros
detalle_libro.
19 Pulsa Aceptar y el formulario se crear automticamente.
20 Pulsa F12 y prueba la pgina, comprueba desde phpMyAdmin que al rellenar el formulario de compra
se ha creado un registro en la tabla Compras.
Volver a la teora

Unidad 20. Utilizar sentencias SQL
Objetivo.
Practicar las operaciones necesarias para crear una conexin a una base de datos.
4 Abre el archivo buscar.php. Vamos a modificarlo.
5 Abre el panel Vinculaciones (CTRL + F10) y haz doble clic sobre el elemento juego de registros.
6 Cuando se abra el cuadro de dilogo haz clic sobre el botn Avanzado....
7 En el campo SQL tendrs lo siguiente:
SELECT *
FROM libros
WHERE Titulo = 'colname'
ORDER BY Titulo ASC
Sustituye la tercera lnea por:
WHERE Titulo LIKE '%colname%'
Hemos aadido los smbolos %, que indican que antes o despus del valor del parmetro de bsqueda
puede ir cualquier otro carcter.
Con LIKE hacemos que la comparacin se haga buscando una cadena de carcteres que coincida con el
patrn escrito entre comillas.
8 Pulsa Aceptar y pulsa F12 para probar la pgina.
Observa que ya no hace falta que introduzcas el ttulo exacto de un libro.
9 Vuelve a hacer doble clic sobre el elemento juego de registros en el panel Vinculaciones.
10 Ahora cambia la tercera lnea del cuadro SQL por:
WHERE Titulo LIKE '%colname%' OR Autor LIKE '%colname%'
Hemos modificado la condicin existente. Ahora el criterio de bsqueda se comparar en los campos
Titulo y Autor es decir que se obtendrn los libros cuyo ttulo contenga el valor buscado o cuyo nombre de
autor contenga el valor buscado.
11 Pulsa Aceptar y pulsa F12 para probar la pgina.
Observa que ahora puedes introducir una cadena que se buscar en el ttulo y el autor del libro.
Finalmente crearemos una pgina de ndice, le asignaremos una sentencia SQL especial para que
muestre los libros ms vendidos.
1 Abre un archivo dinmico nuevo basado en la plantilla libreria.dwt (Archivo Nuevo, pestaa
Plantillas).
2 Gurdalo como index.php.
4 En el cuadro de dilogo que se abrir pulsa el botn Avanzado....
5 En Nombre escribe libros_mas_vendidos.
7 En el campo SQL escribe las siguientes lneas:
SELECT Count(compras.Id) AS cuenta, libros.id, libros.titulo, libros.editorial, libros.isbn,

libros.precio, libros.autor, libros.usado
FROM compras RIGHT JOIN libros ON compras.Id_libro=libros.id
GROUP BY libros.id
ORDER BY cuenta DESC
8 Acepta el cuadro de dilogo.
9 En la zona donde puedes incluir contenido aade un prrafo que diga:
eLibrera te ofrece las ltimas novedades en lectura. Escoge entre nuestros libros nuevos o usados y
descubre las ofertas que te harn ahorrar hasta un 13% en libros de ocasin.
10 La primera palabra debe ser de clase primera_palabra.
11 Aade un segundo prrafo:
Por la compra de 3 libros te los envamos a casa GRATIS, no pierdas esta oportunidad. Promocin
de Lectura 10% de descuento en todos los libros usados.

13 Luego vuelve a crear un nuevo prrafo que diga Nuestros libros ms vendidos son:, la primera palabra
deber ser de clase primera_palabra.
Ahora crearemos la parte que mostrar la informacin de los libros:
14 Inserta un bloque DIV (Insertar Objetos de diseo Etiqueta DIV), dale el id listado desde el
panel Propiedades.
15 Sita el cursor dentro de este bloque y vuelve a crear otro. A este le daremos el id item.
16 Dentro del bloque con id item inserta la imagen imagenes/item.gif.
17 A la imagen asgnale la clase img_item.
18 Modifica el campo origen para que se pueda leer:
imagenes/item<?php echo $row_libros_mas_vendidos['usado']; ?>.gif
Para ello arrastra el campo Usado desde el panel Vinculaciones.
19 Luego arrastra sobre la pgina desde el panel Vinculaciones el elemento Titulo y ponlo en negrita.
20 Haz doble clic sobre l en el panel Comportamientos del Servidor para ponerlo en mayscula
seleccionando el formato Poner en maysculas.
22 Arrastra el elemento Autor desde el panel Vinculaciones y ponlo en cursiva.
24 Arrastra el elemento Editorial desde el panel Vinculaciones.
26 Escribe ISBN: y arrastra el elemento ISBN desde el panel Vinculaciones.
27 Introduce dos salto de lnea (CTRL + ENTER).
28 Arrastra el elemento Precio desde el panel Vinculaciones y dale la clase precio.
29 A continuacin escribe y aade la imagen imagenes/compra.gif.
30 La imagen que acabamos de aadir deber tener la alineacin a Texto superior.
31 Enlaza la imagen a comprar.php?id= desde el campo Vnculo del panel Propiedades.
32 Al enlace adele al final el Id del libro arrastrndolo desde el panel Vinculaciones.
33 Inserta un bloque DIV (Insertar Objetos de diseo Etiqueta DIV), dale el id salto_linea desde el
panel Propiedades.

34 Selecciona el bloque item y salto_linea y haz que se repita 3 veces, utiliza la opcin Repetir Regin
en la barra de Datos.
Estamos repitiendo el bloque de la informacin del libro y aadiendo un bloque con un salto de lnea para
separarlo del siguiente.
35 Prueba la pgina activando la vista LiveData y vers que el contenido de este listado muestra el detalle
de los libros que ms aparecen en la tabla de Compras.
Volver a la teora

Unidad 21. Estructura de datos de un Blog
Objetivo.
Practicar las operaciones necesarias para crear la estructura de datos de un blog.
phpMyAdmin.
4 Se abrir una ventana, escribe bd_blog en el campo de texto de la imagen.
5 Selecciona utf-8_spanish_ci en el desplegable Contejamiento.
6 Pulsa Crear para crear la base de datos.
7 Pasaremos a un nueva ventana con la estructura de la base de datos, para crear una nueva tabla escribe
Entradas en Nombre y 5 en Campos.
Ahora vamos a configurar los campos.
9 Al primer campo lo llamaremos Id, de tipo INT, con extra auto_increment y Primario ( ). Pues ser
un campo numrico entero, autoincremental (cada vez que se graba un registro el sistema le asigna un
nmero ms que el anterior), y ser la clave principal de la tabla (primario).
10 Al segundo lo llamaremos Titulo, de tipo VARCHAR y con longitud 100.
11 Al tercero lo llamaremos Texto, de tipo LONGTEXT.
12 Al cuarto lo llamaremos Fecha, de tipo DATE.
13 Al ltimo lo llamaremos Id_Categoria, de tipo INT, con longitud 11 e Indexado ( ). Lo definimos

indexado para poder relacionarlo con la tabla Categorias.
15 Repite los mismos pasos para crear una tabla llamada Categorias con 2 campos.

16 Al primero lo llamaremos Id, de tipo INT, con extra auto_increment y Primario ( ).
17 Al segundo lo llamaremos Nombre, de tipo VARCHAR y con longitud 15.
18 De nuevo, repite los pasos para crear una tabla llamada Comentarios con 6 campos.
20 Al segundo lo llamaremos Autor, de tipo VARCHAR y con longitud 30.
21 Al tercero lo llamaremos Correo_Autor, de tipo VARCHAR y con longitud 30.
22 Al cuarto lo llamaremos Comentario, de tipo LONGTEXT.
23 Al quinto lo llamaremos Fecha, de tipo DATE.
24 Al ltimo lo llamaremos Id_Entrada, de tipo INT, con longitud 11 e Indexado ( ). Indexado para
relacionarlo con la tabla Entradas.
25 Por ltimo crearemos una tabla llamada Usuarios con 3 campos.
27 Al segundo lo llamaremos Usuario, de tipo VARCHAR y con longitud 20.
28 Al tercero lo llamaremos Password , de tipo VARCHAR y con longitud 20.
Ahora definiremos las relaciones entre las tablas.
29 En el marco de la izquierda haz clic sobre la tabla Comentarios y una vez en su ventana haz clic en
Vista de Relaciones.
30 En Id_Entrada selecciona en el segundo desplegable Entradas->Id. Para indicar que en este campo
habr un id que deber estar en la tabla Entradas.
31 En el desplegable ON DELETE selecciona CASCADE.
32 Y por ltimo en ON UPDATE seleccionar CASCADE.
33 En el marco de la izquierda haz clic sobre la tabla Entradas y una vez en su ventana haz clic en Vista
de Relaciones.
34 En Id_Categoria selecciona en el segundo desplegable Categorias->Id.
35 En el siguiente desplegable selecciona CASCADE.

36 Para terminar, en el siguiente vuelve a seleccionar CASCADE.
Ahora vamos a rellenar las tablas, importaremos los datos de unos ficheros de texto.
37 Vuelve a la tabla Categorias seleccionndola en el men de la izquierda.
38 Haz clic en la opcin Importar que encontrars en el men horizontal en la parte superior de la ventana:
39 En la siguiente ventana pulsa el botn Examinar y busca el archivo categorias-latin1.txt que se

encuentra en la carpeta de ejerciciosdream en la carpeta blog.
40 El archivo se encuentra codificado en latin1 as que seleccinalo en la lista de Juego de caracteres

del archivo.
42 Asegrate de que se han introducido datos en la tabla pulsando la opcin Examinar de la tabla
Categorias.
43 Repite los mismos pasos con el archivo entradas-latin1.txt para introducir datos en la tabla Entradas.
44 Repite los mismos pasos con el archivo comentarios-latin1.txt para introducir datos en la tabla
Comentarios.
45 Repite los mismos pasos con el archivo usuarios-latin1.txt para introducir datos en la tabla Usuarios.
Ahora crearemos un usuario y le asignaremos privilegios para que pueda modificar los datos almacenados.
46 Vuelve a la ventana principal y haz clic sobre .
47 Haz clic en el vnculo Agregar un nuevo usuario.
48 En la nueva ventana escribe escritor en Nombre de usuario.
49 En Servidor escribe localhost.
51 En Debe volver a escribir escribe aulaclic de nuevo.
52 Pulsa el botn Continuar para crear el usuario.

53 En la nueva pantalla desplzate hacia abajo hasta encontrar:
Aqu selecciona la base de datos bd_blog en el desplegable y pulsa Continuar para modificar los
privilegios de este usuario sobre esta base de datos.
54 Selecciona los privilegios SELECT, INSERT, UPDATE y DELETE. Si te das cuenta estn todos en el
marco de Datos.
Vamos a darle a este usuario nicamente permiso de escritura y lectura sobre la base de datos.
Los permisos de Administracin y Estructura los dejaremos en blanco para que este usuario no pueda
acceder a la parte administrativa ni pueda modificar la estructura de las tablas.
55 Pulsa Continuar para asignarle al usuario estos privilegios y habremos terminado.
Volver a la teora

Unidad 21. Interfaz Pblica
Objetivo.
Practicar las operaciones necesarias para crear las pginas de la interfaz pblica de un blog.
Empezaremos por definir una conexin a la base de datos.
1 Ejecuta Dreamweaver y abre el sitio blog, vamos a trabajar sobre l.
2 Abre el panel Bases de Datos con la combinacin de teclas CTRL + MAYUS + F10 o desde el men
Ventana Bases de datos.
3 Haz clic en el botn y selecciona Conexin MySQL para crear una nueva conexin.
4 En Nombre de conexin escribe blog_aulaclic.
5 En Servidor MySQL escribe localhost.
6 En Nombre de usuario escribe escritor.
8 En Base de datos selecciona bd_blog.
9 Pulsa Aceptar para crear la conexin.
Ahora vamos a modificar el men de salto que introdujimos en temas anteriores en la plantilla para que
se visualicen en l las categoras.
Primero deberemos definir un juego de registros para obtener las categoras.
1 Abre la plantilla blog.dwt.php, vamos a editarla.
categorias_para_menu.
4 En Conexin selecciona blog_aulaclic.

5 En Tabla selecciona categorias.
6 En Ordenar selecciona Nombre y en el desplegable de al lado Ascendente.
Y luego modificar el men de salto.
8 Abre el panel Vinculaciones (CTRL + F10).
9 Arrastrando los elementos desde el panel a la vista de Cdigo, modifica el formulario para que quede de
este modo:
<form name="form1" id="form1">
<select name="menu1">
<option value="categorias.php?id=<?php echo $row_categorias_para_menu['Id']; ?>">
<?php echo $row_categorias_para_menu['Nombre']; ?>
</option>
</select>
<input type="button" name="Button1" value="Ir" onclick="MM_jumpMenuGo('menu1','parent',0)" />
</form>
10 Luego selecciona el elemento option y haz que se repita para todos los registros de la tabla haciendo
clic en la opcin Repetir Regin de la barra Datos.
11 Cierra la plantilla guardando los cambios.
Crearemos ahora la pgina index.
1 Abre un nuevo archivo dinmico basado en la plantilla blog.dwt.php (Archivo Nuevo, pestaa
Plantillas).
2 Gurdalo como index.php.
4 En el cuadro de dilogo que se abrir haz clic en Avanzado...
5 En Nombre escribe listado_entradas.
7 En SQL debers pegar la siguiente sentencia SQL:

SELECT entradas.Id, entradas.Titulo, entradas.Texto, entradas.Fecha, categorias.Nombre as

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

categorias ON entradas.Id_Categoria=categorias.Id
GROUP BY entradas.Id
ORDER BY entradas.Fecha DESC
Con esta sentencia obtenemos un juego de registros con las entradas con el nombre de la categoria
correspondiente y el nmero de comentarios que tiene la entrada. Las entradas aparecern ordenadas por
fecha de la ms antigua a la ms reciente.
9 En la nica regin editable debers escribir un prrafo de clase titulo que muestre el elemento Titulo
que habrs arrastrado del panel Vinculaciones.
10 A continuacin arrastra el elemento Texto, este no deber estar dentro de un prrafo.
11 En un nuevo prrafo de clase datos escribe aulaClic - y a continuacin aade el elemento Fecha
arrastrndolo desde el panel Vinculaciones.
12 Crea un prrafo de clase datos y en l escribe Categora:, a continuacin arrastra el elemento

Nombre_Categoria.
13 Sobre este elemento crea un vnculo que vaya a categorias.php?id=
14 Aade el elemento Id_Categoria arrastrndolo desde el panel Vinculaciones para que te quede el
enlace de este modo:
categorias.php?id=<?php echo $row_listado_entradas['Id_Categoria']; ?>
15 Finalmente inserta un ltimo prrafo de clase datos que diga Comentarios.
16 A continuacin, en el mismo prrafo, arrastra el elemento Cuenta_comentarios.
17 Crea un enlace en el elemento Cuenta_comentarios que vaya a comentarios.php?id=.
18 Aade el elemento Id arrastrndolo desde el panel Vinculaciones para que te quede el enlace de este
modo.
comentarios.php?id=<?php echo $row_listado_entradas['Id']; ?>
19 Selecciona el texto que acabas de insertar y haz que se repita para que muestre 6 registros. Utiliza la
opcin Repetir Regin.

Ahora crearemos la pgina para las entradas por categora.
Plantillas).
2 Gurdalo como categorias.php.
4 En el cuadro de dilogo que se abrir haz clic en Avanzado...
5 En Nombre escribe listado_por_categoria.
7 En SQL debers pegar la siguiente sentencia SQL:
SELECT entradas.Id, entradas.Titulo, entradas.Texto, entradas.Fecha, COUNT(comentarios.Id) AS

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

categorias ON entradas.Id_Categoria=categorias.Id
WHERE Id_Categoria = colname
GROUP BY entradas.id
ORDER BY Fecha DESC
8 Pulsa el botn en el siguiente cuadro para aadir un parmetro.
9 En el cuadro de dilogo escribe los siguientes valores:
Nombre: colname
Valor predeterminado: -1
Valor en tiempo de ejecucin: $_GET['id']
11 En la nica regin editable debers escribir un prrafo de tipo datos que diga Categora:
12 A continuacin incluye el elemento Nombre_Categoria arrastrndolo desde el panel Vinculaciones y

ponlo en negrita.
13 Seguidamente escribe un prrafo de clase titulo que contenga el elemento Titulo que habrs arrastrado
desde el panel Vinculaciones.
14 A continuacin arrastra el elemento Texto, este no deber estar dentro de un prrafo.
15 En un nuevo prrafo de clase datos escribe aulaClic - y a continuacin aade el elemento Fecha
arrastrndolo desde el panel Vinculaciones.
16 Finalmente inserta un ltimo prrafo de clase datos que diga Comentarios.
17 A continuacin, en el mismo prrafo, arrastra el elemento Cuenta_comentarios.
18 Crea un enlace en el elemento Cuenta_comentarios que vaya a comentarios.php?id=.
19 Aade el elemento Id arrastrndolo desde el panel Vinculaciones para que te quede el enlace de este
modo.
comentarios.php?id=<?php echo $row_listado_por_categoria['Id']; ?>
20 Selecciona este ltimo bloque y haz que se repita para que muestre 6 registros. Utiliza la opcin
Repetir regin.
21 Coloca el cursor al final del todo e incluye un navegador de registros utilizando la opcin Barra de
Navegacin de juego de registros .
Selecciona la opcin Imgenes para que se muestre el navegador con flechas.
Para terminar crearemos la pgina para los comentarios.
Plantillas).
2 Gurdalo como comentarios.php.
4 En el cuadro de dilogo que se abrir haz clic en Simple...
5 En Nombre escribe listado_comentarios.

7 En Tabla selecciona comentarios.
8 Cambia la opcin Filtro para que pueda leerse ID_Entrada = Parmetro URL id.
9 Cambia la opcin Ordenar para que pueda leerse Fecha Descendiente.
11 En la nica regin editable escribe un prrafo que contenga el elemento Autor que habrs arrastrado
desde el panel Vinculaciones y lo pondrs en negrita.
12 Luego aade el elemento Comentario del mismo modo.
13 A continuacin incluye un nuevo prrafo de clase datos que contenga el elemento Fecha.
14 Para terminar inserta una regla horizontal (Insertar HTML Regla horizontal).
15 Selecciona el bloque que acabamos de aadir y haz que se repita para que muestre todos los registros
de la tabla. Utiliza la opcin Repetir regin.
16 Selecciona de nuevo el bloque que te ha quedado y haz que slo se muestre si hay algn registro en
el recordset. Utiliza la opcin Mostrar si el juego de registros no est vaco.
17 Seguidamente escribe un prrafo que diga Introduce aqu tu comentario:
18 Ahora introduce un formulario de insercin de registros. Haz clic en el botn Asistente de formulario
de insercin de registros .
19 Debers excluir el campo Id pues se generer automticamente. Seleccinalo de la lista de campos y

pulsa el botn
20 El campo Comentario se debe mostrar como un rea de texto.
21 El campo Fecha ser oculto y con un Valor predeterminado de <?php echo date(ymd); ?>. Esto
generar la fecha actual.
22 El campo Id_Entrada tambin ser oculto y tomar el Valor predeterminado de <?php echo
$_GET['id']; ?>. El prametro con el ID de la entrada.
23 Pulsa Aceptar y habremos terminado.
Volver a la teora

Unidad 21. Creacin de un men de Administracin
Objetivo.
Practicar las operaciones necesarias para crear un men de administracin en un blog.
Plantillas).
3 Gurdalo como admin.php.
4 En la nica regin editable debers escribir un prrafo de clase titulo que diga Crear nuevas:
5 Luego escribe un nuevo prrafo que diga Nueva entrada, debers hacer que este texto tenga un enlace a
nueva_entrada.php.
6 A continuacin aade un nuevo prrafo en el que pueda leerse Nueva categora, este texto deber tener
un enlace a nueva_categoria.php.
7 Aade un prrafo vaco.
8 Incluye un nuevo prrafo de clase titulo que diga Modificar existentes:
9 Crea un ltimo prrafo que diga Modificar comentarios, este texto debe enlazarse con
listado_comentarios.php.
Volver a la teora

Unidad 21. Insercin de elementos
Objetivo.
Practicar las operaciones necesarias para crear las pginas de insercin de elementos.
Empezaremos por crear la pgina para introducir nuevas categoras.
Plantillas).
2 Gurdalo como nueva_categoria.php.
3 En la nica regin editable debers escribir un prrafo de clase titulo que diga Escribe el nombre de la
nueva categora:
4 Ahora deberemos introducir un formulario de insercin de registros. Haz clic en el botn Asistente de
formulario de insercin de registros .
5 Debers excluir el campo Id quitndole de la lista de campos, pues se generer automticamente. El

resto lo dejaremos como est.
Ahora crearemos la pgina para crear nuevas entradas.
Plantillas).
2 Gurdalo como nueva_entrada.php.
Crearemos un recordset para cargar los nombres e id de categoras.
categorias_para_menu.

9 En la nica regin editable escribe un prrafo de clase titulo que diga No hay categoras en la base de
datos.
Escribe un segundo prrafo que diga Crea una nueva desde aqu, enlazada la ltima palabra con el
archivo nueva_categoria.php.
10 Selecciona estos dos prrafos que acabas de introducir y haz que se muestre si no existen registros
de categoras.
Si no hay categoras no podremos asociar la entrada a ninguna de ellas.
Utiliza la opcin Mostrar si el juego de registros est vaco.
11 Seguidamente escribe un prrafo de clase titulo que diga Introduce los datos de la nueva entrada:
12 Ahora deberemos introducir un formulario de insercin de registros. Haz clic en el botn Asistente de
formulario de insercin de registros .
13 Debers excluir el campo Id pues se generer automticamente.
14 El campo Texto se deber mostrar como un rea de texto.
15 El campo Fecha deber enviarse como tipo Fecha.
16 El campo Categora deber mostrarse como un men (que modificaremos ms adelante).
17 Pulsa Aceptar para crear el formulario.
18 Ahora modifica el men desplegable de Categora, seleccinalo y ve a la vista de Cdigo.
19 Modifica el control arrastrando los elementos del recordset listado_categorias desde el panel
Vinculaciones (CTRL + F10).
Deber quedarte algo parecido:

<select name="Id_Categoria">
<option value="<?php echo $row_listado_categorias['Id']; ?>" >
<?php echo $row_listado_categorias['Nombre']; ?></option>
</select>
20 Selecciona la lnea que dice:
<option value="<?php echo $row_listado_categorias['Id']; ?>" ><?php echo

$row_listado_categorias['Nombre']; ?></option>
21 Haz que se repita para cada una de las categoras. Utiliza la opcin Repetir Regin.
Ya casi hemos terminado.
22 Finalmente selecciona la ltima parte de la pgina, el segundo prrafo que has escrito y el formulario y
haz que se muestre si existen registros en el recordset de listado_categorias.
Utiliza la opcin Mostrar si el recordset no est vaco.
23 Cierra la pginaguardando los cambios.
Volver a la teora

Unidad 21. Listado de elementos
Objetivo.
Practicar las operaciones necesarias para crear las pginas de listados de elementos.
3 Ejecuta Dreamweaver y abre el sitio blog, vamos a trabajar sobre l. Vamos a crear la pgina que
muestre un listado de comentarios.
Plantillas).
5 Gurdalo como listado_comentarios.php.
6 En la nica regin editable debers escribir un prrafo de clase titulo que diga Selecciona una
entrada.
Crearemos un recordset para cargar los titulos y fechas de las entradas.
listado_entradas.
10 En Tabla selecciona entradas.
11 En Ordenar selecciona Fecha y en el desplegable de al lado Descendente.
13 Debajo del prrafo que hemos aadido debers insertar una tabla con 10 pxeles de relleno de celda. En
esta tabla listaremos las entradas.
La tabla deber tener 2 filas y 2 columnas.
Seleciona la primera fila y aplcale el estilo borde_inferior.
14 Escribe en la primera celda de la primera fila Ttulo en negrita.

15 Escribe en la segunda celda de la primera fila Fecha en negrita.
16 En la primera celda de la segunda fila arrastra el elemento Titulo desde el panel Vinculaciones.
17 Asgnale un enlace a listado_comentarios.php?id=
18 Modifica el vnculo arrastrando el elemento Id desde el panel Vinculaciones para que se muestre de
este modo:
listado_comentarios.php?id=<?php echo $row_listado_entradas['Id']; ?>
19 En la segunda celda de la segunda fila inserta el elemento Fecha arrastrndolo desde el panel
Vinculaciones. Ponlo en cursiva.
20 Selecciona la segunda fila de la tabla y haz que se repita para que muestre 6 registros.
Utiliza la opcin Repetir Regin.
21 Luego coloca el cursor al final del contenido editable e introduce una barra de navegacin de
registros .
Ahora aadiremos el listado de comentarios.
22 Escribe el siguiente prrafo de clase titulo Selecciona un comentario a modificar o eliminar.
Crearemos un recordset para cargar el autor, correo y fecha del comentario.
listado_comentarios.
26 En Tabla selecciona Comentarios.
28 Modifica los desplegables de Filtro para que pueda leerse: Id_Entrada = Parmetro URL id.

30 Debajo del prrafo que has aadido inserta una tabla con 10 pxeles de relleno de celda.
Selecciona la primera fila y aplicale el estilo borde_inferior.
31 En la primera celda de la primera fila escribe Autor en negrita.
32 En la segunda celda de la primera fila escribe Correo en negrita.
33 En la tercera celda de la primera fila escribe Fecha en negrita.
34 Arrastra el elemento Autor a la primera celda de la segunda fila.
35 Arrastra el elemento Correo_Autor a la segunda celda de la segunda fila y ponlo en cursiva.
36 Arrastra el elemento Fecha a la tercera celda de la segunda fila y ponlo en cursiva.
37 En la cuarta celda de la segunda fila inserta la imagen imagenes/edit.png y enlzala a

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

elimina_comentario.php?id=
elimina_comentario.php?id=<?php echo $row_listado_comentarios['Id']; ?>
39 Selecciona la segunda fila de la tabla y haz que se repita para que muestre todos los registros del
recordset.
40 Para terminar, selecciona el primer prrafo y la primera tabla y haz que se muestren si no hay
registros en el recordset de listado_comentarios. Utiliza la opcin Mostrar si el juego de registros est

vaco.
Si es la primera vez y al listado_comentarios no le hemos pasado un Id de entrada, o si la entrada no

tiene comentarios lo que hay que hacer es visulaizar el listado de entradas (la primera tabla).
Si por el contrario la entrada seleccionada tiene comentarios tenemos que visualizar la segunda tabla (la
que contiene el lista de comentarios):
41 Selecciona el segundo prrafo y la segunda tabla y haz que se muestren si hay registros en el
recordset de listado_comentarios. Utiliza la opcin Mostrar si el juego de registros no est vaco.
Hemos creado un listado de entradas que al hacer clic sobre una de ellas enva su ID a la misma pgina
que genera un listado de los comentarios correspondientes a esa entrada.
Volver a la teora

Unidad 21. Modificacin de elementos
Objetivo.
Practicar las operaciones necesarias para crear las pginas de modificacin de elementos.
3 Ejecuta Dreamweaver y abre el sitio blog, vamos a trabajar sobre l. Vamos a crear una pgina para
modificar comentarios.
Plantillas).
5 Gurdalo como modifica_comentario.php.
6 En la nica regin editable debers escribir un prrafo de clase titulo que diga Modificando el
comentario:
Crearemos un recordset para cargar el comentario que queremos modificar.
detalle_comentario.
11 En Filtrar selecciona lo siguiente: Id = Parmetro URL id.
13 Ahora visualizaremos el comentario para asegurarnos de que es este el que queremos modificar.
Escribe un prrafo en negrita que muestre el Autor del comentario. Arrastra el elemento desde el panel
Vnculos.
Luego inserta un nuevo prrafo para el elemento Comentario.
Aade un nuevo prrafo de clase datos y colcale la Fecha del comentario.
Finalmente inserta una regla horizontal (Insertar HTML Regla Horizotal).

14 Pulsa el botn Asistente de formulario de actualizacin de registros .
15 En el cuadro de dilogo que se abrir seleccionarla tabla a modificar comentarios.
16 Cuando se termine la actualizacin deberemos volver a la pgina admin.php.
17 Haz que el campo Id sea oculto.
18 El campo Fecha debe enviarse como Fecha.
19 El campo Comentario debe mostrarse como un rea de texto.
21 Guarda los cambios y cierra el documento.
Volver a la teora

Unidad 21. Eliminacin de elementos
Objetivo.
Practicar las operaciones necesarias para crear las pginas de eliminacin de elementos.
3 Ejecuta Dreamweaver y abre el sitio blog, vamos a trabajar sobre l. Vamos a crear la pgina para
eliminar comentarios.
Plantillas).
5 Gurdalo como elimina_comentario.php.
Crearemos un recordset para cargar el comentario que queremos eliminar.
detalle_comentario.
12 En la nica regin editable escribe un prrafo de clase titulo que diga Vas a eliminar el comentario:
Un segundo prrafo en negrita deber mostrar el Autor del comentario. Arrstralo desde el panel
Vinculaciones.
Luego aade otro prrafo donde colocar el Comentario.
Finalmente crea un ltimo prrafo de clase datos y arrastra en l el elemento Fecha.
13 Crea un formulario (Insertar Formulario Formulario).

14 En l crea un campo oculto (Insertar Formulario Campo Oculto).
15 En el panel Propiedades dale el nombre campoOculto al campo que acabamos de crear.
Estamos listos para insertar el comportamiento de Eliminar Registro.
16 Haz clic en el botn Eliminar Registro en la barra Datos.
17 Rellena los datos del cuadro de dilogo, en Valor de clave principal escribe Parmetro URL
campoOculto.
18 Pulsa Aceptar para terminar.
Volver a la teora

Unidad 21. Restringir acceso
Objetivo.
Practicar las operaciones necesarias para restringir el acceso a determinadas pginas.
Plantillas).
5 Gurdalo como login.php.
6 En la nica regin editable debers escribir un prrafo de clase titulo que diga Introduce usuario y
contrasea:.
7 A continuacin inserta un formulario (Insertar Formulario Formulario). Llmalo form1.
8 Dentro del formulario debers introducir dos campos de texto (Insertar Formulario Campo de
texto).
9 Al primero lo llamaremos usuario y sera de tipo Texto.
10 Al segundo lo llamaremos contrasena y ser de tipo Contrasea. Recuerda no utilizar la en los

nombres de campos y archivos.
11 Finalmente aade un botn (Insertar Formulario Botn) dale el valor Entrar.
12 Haz clic en la opcin Conectar Usuario y rellena el cuadro de dilogo que se abrir con los datos
que puedes ver en la imagen:

13 Acepta el formulario.
Ahora deberemos especificar qu pginas se vern afectadas por el acceso restringido.
15 Abre el documento admin.php.
16 Selecciona la opcin Restringir acceso a pgina .
La pgina ahora estar protegida.
18 Repite los pasos 15 y 17 para los documentos:
elimina_comentario.php
listado_comentarios.php
modifica_comentario.php
nueva_categoria.php
nueva_entrada.php

Para terminar crearemos un enlace Desconectar en las pginas para que el usuario pueda terminar la
sesin.
19 Abre el documento admin.php.
20 Selecciona la opcin Desconectar usuario .
21 En el cuadro de dilogo que se abrir selecciona la opcin Crear nuevo vnculo: "Desconectar".
23 Coloca el enlace en la parte superior de la regin editable y dentro de un prrafo de clase datos.
25 Repite los pasos 19 a 24 para los documentos:
elimina_comentario.php
listado_comentarios.php
modifica_comentario.php
nueva_categoria.php
nueva_entrada.php
Ahora podrs entrar a las pginas restringidas utilizando el nombre de usuario aulaclic y contrasea
miprimerblog(es el usuario que importamos en la tabla de usuarios) en el primer ejercicio del tema.
Volver a la teora

Unidad 22. Preparando el servidor de pruebas
Objetivo.
Practicar las operaciones necesarias para preparar el servidor de pruebas para que soporte
transformaciones XSL.
2 Haz clic izquierdo sobre el icono de WAMP en el rea de notificacin y selecciona la opcin PHP
extensions.
Se desplegar un men que mostrar todas las extensiones instaladas.
4 Desplzate hacia abajo hasta que encuentres una llamada php_xsl.
5 Haz clic sobre ella y la extensin se instalar.
Volver a la teora

Unidad 22. Importar datos XML
Objetivo.
Practicar la importacin de archivos XML o RSS externos.
3 Crea un nuevo archivo de XSLT (fragmento) haciendo clic en Archivo Nuevo, Categora Pgina en
blanco, XSLT (fragmento).
4 Se abrir un cuadro de dilogo, selecciona la opcin Adjuntar un archivo remoto en Internet.
5 En la caja de texto escribe http://www.criticadelibros.org/whats-new.rss.
6 Pulsa Aceptar.
7 Guarda el archivo como critica_rss.xsl.
8 Abre el panel Vinculaciones (CTRL + F10).
9 Arrastra el elemento rss:title que se encuentra bajo el elemento rss:item a un nuevo prrafo.
10 Arrastra el elemento rss:description que se encuentra bajo el elemento rss:item a un nuevo prrafo.
Deber quedarte algo as:
Volver a la teora

Unidad 22. Enlaces con elementos
Objetivo.
Practicar crear enlaces con elementos XML.
3 Abre el archivo critica_rss.xsl
4 Selecciona el elemento {rdf:RDF/rss:item/rss:title}.
5 Haz clic en el icono que aparece a la derecha del campo Vnculo en el panel de Propiedades.
6 Selecciona la opcin Fuentes de datos en el cuadro de dilogo Seleccionar archivo.
7 Selecciona el elemento rss:link que se encuentra bajo el elemento rss:item.
8 Pulsa Aceptar.
Se crear el enlace al contenido del elemento rss:link en el elemento rss:title.
9 Puedes pulsar la tecla F12 para ver el resultado.
Volver a la teora

Unidad 22. Repeticin de elementos
Objetivo.
Practicar la creacin de repeticiones de elementos.
4 Bajo los dos elementos que se encuentran en la pgina inserta una linea horizontal (Insertar HTML
Regla horizontal).
Desde la vista de Cdigo debers ver algo as:
<p><a href="{rss:link}"><xsl:value-of select="rss:title"/></a></p>
<p><xsl:value-of select="rss:description" disable-output-escaping="yes"/></p>
<hr />
5 Selecciona este bloque de cdigo y pulsa el botn Repetir regin .
6 En el cuadro de dilogo que se abrir selecciona el elemento rss:item.
7 Haz clic en la flecha que se encuentra al lado de Construir filtro.
8 Se desplegar un nuevo marco, haz clic en el botn .
9 En Filtrar por deber aparecer item.
10 En WHERE escribe position().
11 En Operador selecciona <=.
12 En Valor escribe 4.
Hemos creado un filtro para que se muestren los 4 primeros elementos del archivo RSS.
Volver a la teora

Unidad 22. Ordenacin de elementos
Objetivo.
Practicar crear ordenar los elementos XML.
4 Ve a la vista de Cdigo.
5 Bajo la lnea de repeticion xsl:for-each escribe lo siguiente para que se ordenen los elementos por su
ttulo:
<xsl:sort select="rss:title" />
Deber quedarte algo as:
<xsl:for-each select="rdf:RDF/rss:item[position() <= 5]">
<p><xsl:value-of select="rss:description" disable-output-escaping="yes"/></p>
<hr />
</xsl:for-each>
Pulsa la tecla F12 para ver una previsualizacin.
Volver a la teora

Unidad 22. Insertar XSLT en una pgina dinmica
Objetivo.
Practicar las operaciones necesarias para insertar un archivo XSLT en una pgina dinmica.
Pgina de Plantilla).
5 Gurdalo como criticas.php.
6 En la regin editable escribe un prrafo que diga Crticas obtenidas de criticadelibros.org
7 La primera palabra deber verse afectada por la clase primera_palabra.
8 criticadelibros.org deber estar enlazado con http://www.criticadelibros.org/
9 Haz clic en la pestaa Datos de la barra Insertar.
10 Coloca el cursor debajo del prrafo que acabamos de escribir y pulsa Transformacin XSL .
11 En el cuadro de dilogo que se abrir selecciona el archivo critica_rss.xsl en el campo Archivo XSLT.
12 Acepta el cuadro de dilogo y vers como se aade el contenido RSS a la pgina.
Puedes probarla pulsando la tecla F12 o activando la vista LiveData.
Volver a la teora

Unidad 22. Paso de parmetros
Objetivo.
Practicar las operaciones necesarias para pasar parmetros a un archivo XSLT desde una pgina
dinmica.
4 Abre el archivo criticas_rss.xsl.
5 Selecciona la etiqueta xsl:for-each y haz clic en el boton que aparece en el panel Propiedades.
6 Se abrir el cuadro de dilogo de Repetir regin. En el filtro que hemos creado sustituye el Valor 4 por
$numeroCriticas.
7 Abre el archivo criticas.php.
8 En el panel Comportamientos del servidor (CTRL + F9) haz doble clic sobre el elemento XSL
Transformation.
9 Haz clic en el botn en el cuadro de dilogo XSL Transformation para aadir un parmetro.
10 En el cuadro de dilogo que se abrira escribe numeroCriticas en Nombre.
11 Escribe 4 en Valor.
12 Acepta los dos cuadros de dilogo y habremos acabado.
13 Prueba la pgina pulsando la tecla F12.
Volver a la teora

Unidad 24. Incluir Spry
Objetivo.
Practicar la inclusin de Spry en una pgina web.
Pgina de Plantilla).
4 Gurdalo como catalogo.php.
5 Copia los archivos SpryData.js y xpath.js que encontrars en la carpeta programas adicionales del
curso a la carpeta del sitio.
6 En el archivo catalogo.php dirgete a la vista de Cdigo.
7 En la parte superior, modifica la etiqueta html para que pueda leerse:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
8 Busca la etiqueta title. Debajo de ella debers escribir las siguientes lneas para incluir los scripts de
Spry:
<script type="text/javascript" src="xpath.js"></script>
<script type="text/javascript" src="SpryData.js"></script>
Volver a la teora

Unidad 24. Crear un Dataset
Objetivo.
Practicar la creacin de un dataset.
3 Copia el archivo libreria.xml que encontrars en la carpeta ejerciciosdream del curso en la carpeta de
tu sitio.
4 brelo para ver su estructura. Observa que tenemos una etiqueta que engloba todo llamada biblioteca y
otra que correspondera a cada registro llamada libro.
5 Abre el archivo catalogo.php.
Ahora definiremos un dataset para poder utilizar la informacin almacenada en el archivo xml.
6 Bajo las lneas que aadimos en el ejercicio anterior para incluir Spry escribe lo siguiente:
var misLibros = new Spry.Data.XMLDataSet("libreria.xml", "biblioteca/libro");
</script>
Volver a la teora

Unidad 24. Crear una Regin con Informacin
Objetivo.
Practicar la creacin de una regin con informacin.
4 En la zona editable escribe los siguiente desde la vista de Cdigo:
<span class="primera_palabra">Catlogo</span> de libros en tienda:
<div spry:region="misLibros">
<table border="0" cellpadding="15" cellspacing="0">
<tr>
<th>ISBN</th>
<th>Ttulo</th>
<th>Autor</th>
<th>Precio</th>
</tr>
<tr>
<td>{isbn}</td>
<td>{titulo}</td>
<td>{autor}</td>
<td>{precio}</td>
</tr>
</table>
</div>
5 Pulsa la tecla F12 para visualizar la pgina en el servidor de pruebas.

Vers como aparece una fila mostrando el contenido del primer registro.
Volver a la teora

Unidad 24. Crear repeticiones de Registros
Objetivo.
Practicar la crear repeticiones en los registros.
4 En la zona editable busca la tabla que acabamos de aadir en el ejercicio anterior desde la vista de
Cdigo.
5 Modifcala para aadirle una zona de repeticin a la fila que muestra el valor de los campos:
<tr>
<th>ISBN</th>
<th>Ttulo</th>
<th>Autor</th>
<th>Precio</th>
</tr>
<tr spry:repeat="misLibros">
<td>{isbn}</td>
<td>{titulo}</td>
<td>{autor}</td>
<td>{precio}</td>
</tr>
</table>

Vers como aparece un listado con todos los registros del archivo XML.
Volver a la teora

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

onclick="misLibros.filter()">Mostrar todos</a>
<br /><br />
</form>
Observa cmo hemos referenciado a una funcin que todava no existe llamada miFiltro.
Vamos a crearla.
6 Ve a la parte superior de la pgina y localiza la zona donde hemos declarado el dataset.
Aade la siguiente funcin:
var miFiltro = function(dataSet, row, rowNumber) {
if (row["autor"].search(document.formulario.cajadetexto.value) != -1
|| row["titulo"].search(document.formulario.cajadetexto.value) != -1

|| row["isbn"].search(document.formulario.cajadetexto.value) != -1) {
return row;
else {
return null;
</script>
Con esta funcin evaluaremos el valor de la caja de texto del formulario y mostraremos nicamente
aquellos registros que contengan la cadena escrita en ella en su ttulo, autor o ISBN.
Vers como aparece un listado con todos los registros del archivo XML.
Volver a la teora

Ejerciciospropuestos


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

Ejercicio 2: Animales.
1 Crear un sitio local con el nombre Animales, cuya carpeta raz sea la carpeta animales, que se
encuentra dentro de la carpeta ejerciciosdream.
2 Abrir el documento consultas.htm y modificar sus propiedades, para que su ttulo sea Consultas.
3 Abrir el documento gatos.htm y modificar sus propiedades, para que su ttulo sea Gatos.
4 Abrir el documento perros.htm y modificar sus propiedades, para que su ttulo sea Perros.
5 Abrir el documento inicio.htm y modificar sus propiedades, para que su ttulo sea Inicio.
6 Guardar los cambios y cerrar los documentos.
A partir de este momento, realizando los ejercicios propuestos, vamos a crear una pgina como la que
puedes ver en ejercicios/sitios/animales/inicio.htm
Ver la solucin Volver a la teora

Unidad 4. El texto
1 Abrir el sitio Deportes.
3 Asigna la propiedad margen a 0px para todos los lados y el fondo debe ser posicionado en el centro (en
el eje horizontal) y en la parte superior (en el vertical) al documento.
4 Abre los archivos donde.htm, instalaciones.htm, quienes.htm y reservas.htm.
5 Haz que el fondo sea fijo para que no se mueva si utilizamos las barras de desplazamiento.
6 En el archivo instalaciones.htm convertir las seis lneas que hacen referencia a las instalaciones en una
lista desordenada.
7 Aplicar dos sangras a la lista.
8 Guardar los cambios y cerrar el documento.
1 Abrir el sitio Animales.
2 Abrir el documento perros.htm.
3 Al ttulo Perros asignarle un tamao de fuente de 36px, en cursiva y negrita.
4 Renombra el estilo a titulo.
5 Al ttulo Cuidados Postnatales asignarle un tamao de fuente de 16px, en cursiva y negrita.
6 Renombra el estilo a titulo2.
7 Cambia las propiedades del documento para que tenga la fuente Georgia a 16px y el fondo de color
#CCCC99.
8 Exporta estos estilos y guardalos en una hoja que vincularsa este documento. Llmala estilo.css.
9 Abrir el documento inicio.htm y asignarle la hoja de estilos estilo.css.
10 Abrir el documento consultas.htm y asignarle la hoja de estilos estilo.css.
11 Al ttulo Consultas asignarle el estilo .titulo.

12 Abrir el documento gatos.htm y asignarle la hoja de estilos estilo.css.
13 Al ttulo Gatos asignarle el estilo .titulo.
14 Al ttulo Cmo Prevenir Los Problemas Dentales? asignarle el estilo .titulo2.
15 Convertir las cuatro ltimas lneas en un lista desordenada, aplica una sangra solamente a la
segunda lnea.
16 Guardar los cambios y cerrar los documentos.

1 Abrir el sito Deportes.
3 Crear un hiperenlace a quienes.htm en el texto Quines, escribiendo abajo como destino.
4 Crear un hiperenlace a donde.htm en el texto Dnde, escribiendo abajo como destino.
5 Crear un hiperenlace a instalaciones.htm en el texto Instalaciones, escribiendo abajo como destino.
6 Crear un hiperenlace a reservas.htm en el texto Reservas, escribiendo abajo como destino.
1 Abrir el sito Animales.
2 Abrir el documento inicio.htm.
3 Crear un hiperenlace a www.aulaclic.com en la imagen de aulaClic.
4 Hacer que el enlace se abra en una ventana nueva del navegador.

Unidad 6. Imgenes
2 Abrir el documento instalaciones.htm.
3 Insertar la imagen logodeportes.gif, que se encuentra dentro de la carpeta imagenes del sitio, a la
derecha del texto Nuestras instalaciones.
4 Hacer que la alineacin de la imagen sea Medio absoluta.
3 Insertar un rollover al lado del ttulo Inicio, cuya imagen original sea esta: (pata1.gif),
y la imagen de sustitucin esta: (pata2.gif).
Guardar previamente estas imagenes en la carpeta imagenes del sitio.
4 La imagen de sustitucin no debe tener ninguna direccin web vinculada.

Unidad 7. Tablas
2 Abrir el documento reservas.htm.
3 Modificar la segunda tabla de la pgina para que quede como la siguiente:
ACTIVIDAD TARIFA/HORA
AEROBIC
3
STEP
MUSCULACIN 4
3 Crea una tabla con las siguientes medidas:
4 Coloca la tabla en el centro de la pgina y asgnale a la tabla el color de fondo #666633.
5 A la celda de la esquina superior-derecha debers darle como fondo la imagen arriba_derecha.gif que
encontrars en la carpeta imagenes.

6 A la celda de la esquina superior-izquierda debers darle como fondo la imagen arriba_izquierda.gif que
7 A la celda de la esquina inferior-derecha debers darle como fondo la imagen abajo_derecha.gif que
8 A la celda de la esquina inferior-izquierda debers darle como fondo la imagen abajo_izquierda.gif que
9 Inserta la imagen logo_animales.gif en la segunda celda de la segunda fila.
10 Y define la alineacin de todas las celdas de la tabla como centro (en horizontal) y medio (en vertical).
11 Corta el texto que haba en el archivo antes de insertar la tabla y pgalo tal y como estaba en la
segunda celda de la cuarta fila.
12 Abre el archivo botones.htm y copia los botones de navegacin, debers pegarlos en la tercera celda de
la segunda fila.
13 Define el alineamiento de esa celda como derecha (en horizontal) e inferior (en vertical).
15 Debers hacer lo mismo para los archivos consultas.htm, gatos.htm y perros.htm.

Unidad 8. Marcos
2 Abrir el documento marcos.htm.
3 Modificar las propiedades del marco inferior, para que el documento que se cargue inicialmente en l
sea el documento quienes.htm.
4 Modificar las propiedades del marco inferior, para que no se muestre su borde.

2 Abrir el documento reservas.htm.
3 Insertar un campo de texto a la derecha del texto Hora:, que tenga 5 como ancho de caracteres.
4 Insertar un men a la derecha del texto Centro:, cuyos elementos sean:
Don Benito
Madrid
Silla
5 Seleccionar inicialmente el elemento Don Benito del men.
6 Insertar un botn para restablecer el formulario, a la izquierda del botn Enviar.
2 Abrir el documento consultas.htm.
3 Insertar un men a la derecha del texto Animal:, en la celda vaca, cuyos elementos sean:
--- Elige opcin ---
Perro
Gato
Otros
4 Seleccionar inicialmente el elemento --- Elige opcin --- del men.
5 Insertar un rea de texto a la derecha del texto Consulta:, en la celda vaca, que tenga 50 como ancho
de caracteres, 10 como nmero de lneas, y que su valor inicial sea Escribe aqu tu consulta.
6 Insertar un botn de Enviar, a la derecha del botn Restablecer.

2 Abrir el documento quienes.htm.
3 Insertar la animacin Flash basket.swf, que se encuentra en la carpeta imagenes del sitio, en la ltima
lnea vaca del documento.
4 Hacer que la animacin se reproduzca automticamente una sola vez.

2 Abrir el documento conplantilla.htm.
3 Aplicar la plantilla plantilladeportes.dwt al documento conplantilla.htm, que debe actualizarse

automticamente cada vez que cambie la plantilla.
2 Abrir el documento conplantilla.htm, al que se le ha aplicado la plantilla plantillaanimales.dwt.
3 Intentar cambiar las propiedades del documento para que el color del texto sea #0000FF, a ver si es
posible.
4 Cambiar el texto Este es el ttulo, de la regin editable Ttulo, por el texto Animales.
5 Separar el documento de la plantilla.
6 Intentar cambiar las propiedades del documento para que el color del texto se #0000FF, a ver si es
posible.

2 Abrir el documento buscar.htm.
3 Reemplazar el texto deportes (en minsculas) por el texto aulaClic, utilizando la herramienta Buscar y
reemplazar.
2 Abrir el documento buscar.htm.
3 Reemplazar la imagen aulaclic.jpg por la imagen logo_animales.gif, utilizando la herramienta Buscar y

reemplazar.

2 Abrir el documento donde.htm.
3 Convertir la ltima lnea de texto (Para ms informacin...) en una marquesina.
2 Abrir los documentos consultas.htm, gatos.htm, perros.htm e inicio.htm.
3 Insertar una regla horizontal en la segunda celda de la tercera fila de la tabla en todos los documentos.

Unidad 14. Capas
3 Insertar una capa con el nombre oferta.
4 Insertar en la capa el texto:
Este fin de semana, disfruta de clases gratuitas de aerbic, simplemente por visitar nuestras
intalaciones.
cerrar
5 Modificar las propiedades del texto de la capa para que se muestre centrado.
6 Establecer #C197C1 como color de la capa.
7 Establecer 427px como anchura de la capa, y 143px como altura.
8 Establecer 38px como distancia del margen izquierdo, y 28px como distancia del margen superior.
9 Hacer que la capa sea visible.

2 Abrir el documento gatos.htm.
3 Insertar una capa con el nombre gatosemana.
4 Insertar en la capa el texto Este es Golfo y es de Valencia.
5 En la siguiente lnea inserta la imagen gato1.gif de la carpeta imagenes.
6 En la siguiente lnea escribe Cerrar.
7 Modificar las propiedades del texto de la capa, para que se muestre centrado.
8 Establecer #BFBF80 como color de la capa.
9 Establecer 276px como anchura de la capa, y 291px como altura.
10 Establecer 100px como distancia del margen izquierdo, y 200px como distancia del margen
superior.
11 Hacer que la capa est oculta.

3 Insertar un comportamiento que oculte la capa al hacer clic sobre el texto cerrar.
2 Abrir el documento gatos.htm.
3 Insertar un comportamiento que muestre la capa al hacer clic sobre la imagen del gato que se
encuentra en la derecha.
4 Insertar un comportamiento que oculte la capa al hacer clic en cerrar.
Abre el documento marcos.htm de Deportes en un navegador, y compara la pgina que has creado con la
que puedes encontrar en ejercicios/sitios/deportes/marcos.htm.
Abre el documento inicio.htm de Animales en un navegador, y compara la pgina que has creado con la
que puedes encontrar en ejercicios/sitios/animales/inicio.htm

Ejercicio 1: Blog.
1 Crear una nueva carpeta llamada blog en tu carpeta de ejercicios.
2 Crear una nueva plantilla PHP llamada blog.dwt.php dentro de esta carpeta.
3 Crear un men de salto en la pgina con un botn de Ir asociado a este men. Introdcele 3 elementos
Seccin 1, Seccin 2 y Seccin 3. Las tres debern tener como vnculo la direccin #.

Ejercicio 1: Crear una hoja de estilos.
1 Abre el sitio blog.
2 Crea un archivo CSS llamado estilo_blog.css.
3 Vincula la nueva hoja de estilos a la plantilla blog.dwt.php.
4 Copia la carpeta imagenes que podrs encontrar en la carpeta ejerciciosdream del curso en tu sitio.
Modifica la plantilla blog.dwt.php de la siguiente forma:
5 Crea un bloque div de identificador contenido y que contenga una seccin editable de plantilla.
6 Encierra tambin el men de salto en un bloque de identificador seccion.
7 Dentro de ese bloque aade un prrafo con el texto Categoras delante del men de salto.
8 Despus del men de salto y dentro del bloque seccion aade estos prrafos:
Principal
Administracin
Enlaces
Cada palabra tendr un vnculo a las pginas .../index.php, ../admin.php y .../enlaces.php

respectivamente.
9 A continuacin coloca estos dos bloques (contenido y seccion) dentro de un bloque con Id contenedor.

Ejercicio 2: Controles de Fuente.
1 Abre el archivo estilo_blog.css.
2 Aade un estilo para el body para que se muestre el tipo de fuente Tahoma, de 14 pxeles de tamao,
1 pxel de separacin entre caracteres y de color negro.
3 Crea un estilo para una clase llamada titulo que establezca un tamao de fuente de 18 pxeles.
4 Crea un estilo para un clase llamada datos que establezca que el texto est alineado a la derecha, de
12 pxeles de tamao, en cursiva y con un alto de lnea de 0.2.
5 Finalmente haz que todos los enlaces dentro de un prrafo no tengan subrayado y sean de color
negro.
Ejercicio 3: Controles de Fondo.
2 El body tiene que tener como fondo la imagen fondo_body.gif que encontrars en la carpeta imagenes
que has copiado, no debe repetirse.
3 Crea un estilo para el elemento con id contenedor que tenga el fondo blanco, y la imagen fondo.gif que
encontrars en la carpeta imagenes sin repeticin.
4 Crea un estilo para el elemento con id seccion que tenga el fondo blanco, y la imagen fondo_seccion.gif
que encontrars en la carpeta imagenes sin repeticin.
5 Al estilo de la clase titulo adele un fondo de imagen titulo.gif (en la carpeta de imagenes) y que no se
repita.
6 Por ltimo, los enlaces que se encuentren dentro de los prrafos debern tener un color de fondo
igual a #CCFF66.

Ejercicio 4: Controles de Mrgenes y Borde.
2 El body tiene que tener un margen de 0 pxeles por todos los lados.
3 El bloque con id seccion debe tener un padding de 20 pxeles menos en el lado superior que ha de ser
de 90.
Tambin adele un borde de 2 pxeles en color negro en los lados inferior, izquierda y derecha.
4 Al formulario que se encuentra en el bloque seccion le aplicaremos un margen inferior de 10 pxeles.
5 El bloque contenido debe tener un padding en el lado superior de 190 pxeles, 300 en el lado derecho,
y 30 en el inferior e izquierdo.
6 La clase titulo deber tener un padding superior de 30 pxeles y uno izquierdo de 35.
7 Los enlaces que se encuentren dentro de un prrafo debern tener un padding izquierdo y derecho
de 2 pxeles.
Ejercicio 5: Controles de Bloque.
2 El bloque contenedor debe medir 800 pxeles de ancho.
3 El bloque seccion debe medir 136 pxeles de ancho.
Ejercicio 6: Controles de Posicin.
2 El bloque seccion debe tener una posicin absoluta respecto a la ventana del navegador, lo
posicionaremos a 166 pxeles del borde superior y a 533 del borde izquierdo.

Ejercicio 1:
1 Ejecuta WAMP.
2 Crea un tabla llamada compras con 5 campos en la base de datos bd_libreria.
4 Al segundo lo llamaremos Nombre, de tipo VARCHAR y con longitud 60.
5 Al tercero lo llamaremos Tarjeta, de tipo BIGINT y con longitud 16.
6 Al cuarto lo llamaremos Tipo_Tarjeta, de tipo VARCHAR y con longitud 13.
7 Al quinto lo llamaremos Id_Libro, de tipo INT y con longitud 11.
8 Importa los datos contenidos en el archivo compras-latin1.txt que se encuentra en la carpeta de

ejerciciosdream en la carpeta libreria.
9 La codificacin de este archivo es de tipo latin1.

Ejercicio 1:
1 Modificar el archivo usados.php para que se muestren slo los libros usados.
2 Debajo del listado de registros debers mostrar una lnea en la que se muestre un elemento de pginacin
Anterior, este elemento debe ocultarse en la primera pgina.
3 En la misma lnea debers aadir un contador de registros que muestre el recuento de este modo:
Registro Final de Total de Registros.
4 Finalmente aade un elemento Siguiente, este elemento debe ocultarse en la ltima pgina.
5 Haz que cuando el usuario haga clic en el ttulo de un libro, se abra la pgina comprar.php con los datos
de ese libro para comprarlo.
Ejercicio 2:
1 Modifica el archivo ofertas.php para que muestre los 8 libros ms baratos.
2 Haz que cuando el usuario haga clic en el ttulo de un libro, se abra la pgina comprar.php con los datos
de ese libro para comprarlo.

Ejercicio 1:
1 Modifica el archivo admin.php para aadirle dos nuevos prrafos antes del que dice Modificar
comentarios.
En el primero debe leerse Modificar entrada, y debe estar enlazado a listado_entradas.php.
El segundo debe decir Modificar categora, y debe estar enlazado a listado_categorias.php.
2 Crea un archivo llamado listado_entradas.php basado en la plantilla blog.dwt.php que liste el ttulo y la
fecha de cada una de las entradas.
Al lado del registro debers introducir la imagen imagenes/edit.png que enlace con el archivo
modifica_entrada.php para modificar esa entrada.
Luego aade la imagen imagenes/trash.png que enlace con el archivo elimina_entrada.php para eliminar
esa entrada.
3 Haz que se muestren los registros de 6 en 6 y aade al pie del listado una barra de navegacin de
registros.
4 Crea un archivo llamado listado_categorias.php basado en la plantilla blog.dwt.php que liste el nombre
de cada una de las categoras.
Al lado del registro debers introducir la imagen imagenes/edit.png que enlace con el archivo
modifica_categoria.php para modificar esa categora.
Luego aade la imagen imagenes/trash.png que enlace con el archivo elimina_categoria.php para eliminar
esa categora.
5 Haz que se muestren los registros de 6 en 6 y aade al pie del listado una barra de navegacin de
registros.

Ejercicio 2:
1 Crea un pgina de modificacin de entradas llamada modifica_entrada.php basada en la plantilla

blog.dwt.php que funcione de la misma forma que la pgina modifica_comentario.php.
2 Crea un pgina de modificacin de categoras llamada modifica_categoria.php basada en la plantilla

blog.dwt.php que funcione de la misma forma que la pgina modifica_comentario.php.
Ejercicio 3:
1 Crea un pgina de eliminacin de entradas llamada elimina_entrada.php basada en la plantilla

blog.dwt.php que funcione de la misma forma que la pgina elimina_comentario.php.
1 Crea un pgina de eliminacin de categoras llamada elimina_categoria.php basada en la plantilla

blog.dwt.phpque funcione de la misma forma que la pgina elimina_comentario.php.
Ejercicio 4:
1 Restringe el acceso a las pginas:
elimina_categoria.php
elimina_entrada.php
listado_categorias.php
listado_entradas.php
modifica_categoria.php
modifica_entrada.php
2 Crea un enlace Desconectar en la parte superior de las siguientes pginas:
elimina_categoria.php
elimina_entrada.php
El enlace deber estar en un prrafo de clase datos.

Ejercicio 1: Blog.
1 En el sitio blog crea un nuevo archivo llamado enlaces.php basado en la plantilla blog.dwt.php, en esta
pgina deber aparecer un listado de enlaces provinentes del archivo RSS http://del.icio.us/rss/aulaClic.
Debers separar estos enlaces en dos secciones, los que pertenecen al subject office y los que no.

Ejercicio 1: Insertar contenido XML
1 En la carpeta ajax de los ejercicios del curso encontrars un archivo llamado index.htm.
Modifcalo para mostrar en el lateral la relacin de cursos de aulaclic mostrando nicamente su nombre
enlazado a su direccin en internet.
Seguidamente repite los pasos para los artculos.
Encontrars ambos archivos XML en la misma carpeta que index.htm.

Ejercicio 1:
1 En el archivo catalogo.php del sitio libreria, haz que las columnas se puedan ordenar haciendo clic en su
cabecera de modo que si pulsas una vez se ordenen de forma ascendente y si vuelves a pulsar lo hagan en
descendente.
2 Aade una clase CSS a la hoja de estilos estilo_libreria.css llamada destacado, haz que el texto sea de
color #E35331 y que se muestre el puntero del ratn pointer. Debers aplicarle este estilo a las cabeceras de
los registros.

Ejercicio 1:
1 Modifica el archivo consultas.htm del sitio animales, haz que el campo de texto donde el usuario tiene
que introducir su email sea un campo de validacin.
2 Modifica el desplegable para que la primera opcin --- Elige opcin --- no pueda ser seleccionada.
3 Modifica el campo consulta para que slo se puedan introducir 100 caracteres.
4 Por ltimo haz que el campo Nombre sea obligatorio.

Ejercicio 1:
1 Abre el archivo index.htm de la carpeta ajax de la carpeta de ejercicios del curso.
2 Inserta un espacio antes de ndice de cursos.
3 Crea en ese lugar un control de tipo Ficha.
4 Renombra las fichas para que se lea Cursos y Artculos.
5 Coloca el listado de cursos y artculos en sus respectivas fichas.

Pruebasevaluativas


Pruebas evaluativas
Slo una respuesta es vlida por pregunta.

Al final de esta pgina encontrars el enlace a las soluciones.
1. Las pginas web pueden tener la extensin HTML.

a) Verdadero.
b) Falso.
2. Los servidores gratuitos son recomendables para alojar pginas de

empresas.
a) Verdadero.
b) Falso.
3. En Internet pueden existir pginas con el mismo nombre pero distinta

terminacin.
a) Verdadero.
b) Falso.
4. En Dreamweaver no pueden utilizarse combinaciones de teclas.

a) Verdadero.
b) Falso.
5. El botn significa...
a) Abrir.
b) Nuevo.
c) Cerrar.
6. El icono significa...
a) Abrir.
b) Nuevo.
c) Cerrar.
a) Abrir.
b) Nuevo.
c) Cerrar.

Pruebas evaluativas
8. Si hacemos clic sobre el botn Nuevo de la barra de herramientas:

a) Aparecer directamente un nuevo documento vaco en pantalla.
b) Aparecer una nueva ventana en la que hay que elegir el tipo de

documento que se desea crear.
c) Cualquiera de las dos primeras opciones.
d) Ninguna de las opciones anteriores.
9. Si se pulsa sobre el icono

a) Se guardarn todos los documentos modificados y los nuevos.
b) Se guardarn solamente todos los nuevos documentos.
c) Se guardarn solamente todos los documentos modificados.
10. La combinacin de teclas Ctrl + O sirve para....

a) Crear un nuevo documento.
b) Abrir un documento.

Pruebas evaluativas

1. Los botones para minimizar y maximizar la ventana del programa

Dreamweaver se encuentran en la Barra Insertar.
a) Verdadero.
b) Falso.
2. Las vistas del documento pueden cambiarse a travs del panel Propiedades.
a) Verdadero.
b) Falso.
3. La pestaa Favoritos en la barra Insertar puede personalizarse para mostrar

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

a) Verdadero.
b) Falso.
5. La apariencia y opciones de un inspector cambian dependiendo del objeto

seleccionado.
a) Verdadero.
b) Falso.
6. Los paneles e inspectores se muestran y ocultan a travs del men ...

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

a) se puede cambiar las vistas del documento.
b) los botones estn clasificados segn su categora.
c) se configuran las propiedades del objeto seleccionado.

Pruebas evaluativas
8. Se puede trabajar con el editor visual mediante las vistas...

a) diseo.
b) cdigo.
c) las dos respuestas anteriores son correctas.
9. El icono sirve para ...

a) pasar a la vista cdigo.
b) pasar a la vista cdigo y diseo.
c) pasar a la vista diseo.
d) insertar una imagen.
10. La vista diseo...

a) es la vista predeterminada.
b) es la que se suele utilizar habitualmente.
c) las dos afirmaciones anteriores son verdaderas.
d) las tres afirmaciones anteriores son falsas.

Pruebas evaluativas

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

a) Verdadero.
b) Falso.
2. El botn sirve para cambiar la vista del sitio.

a) Verdadero.
b) Falso.
3. El botn sirve para ver el mapa del Sitio.

a) Verdadero.
b) Falso.
4. Si los archivos se mueven de una carpeta a otra desde fuera de

Dreamweaver, las pginas se mostrarn correctamente.
a) Verdadero.
b) Falso.
5. No importa que las pginas sean voluminosas y ocupen mucha memoria.

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

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

a) Insertar una barra de mens.
b) Establecer una imagen como fondo, que no se mostrar en el navegador.
c) Buscar imgenes en Internet, al pulsar sobre ella.
8. Para qu sirve este otro botn .

a) Para crear un sitio nuevo.
b) Para cambiar la vista del sitio.
c) Para elegir un color.

Pruebas evaluativas
9. Los colores seguros para web son...

a) Los colores que no afectan a la vista.
b) Imgenes de fondo para los documentos.
c) Los colores que se muestran de la misma forma en Microsoft

Internet Explorer y en Netscape Navigator.
10. Los colores...

a) Se representan con un nmero hexadecimal.
b) Pueden personalizarse.

Pruebas evaluativas
Unidad 4. El texto

1. Las caractersticas del texto no pueden modificarse a travs del

inspector de propiedades.
a) Verdadero.
b) Falso.
2. Es posible cambiar la alineacin del texto.

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

a) Verdadero.
b) Falso.
4. El tipo de nmeros o vietas de las listas pueden modificarse.

a) Verdadero.
b) Falso.
5. En los estilos CSS no hay actualizacin automtica.

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

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

a) Aparecen conjuntos de fuentes en lugar de una sola.
b) La fuente tiene que ser descargada desde Internet.
c) La fuente tiene que ser de Macromeda.

a) Para crear una lista ordenada.
b) Para crear una lista desordenada.
c) Para aplicar sangra.

Pruebas evaluativas
9. Los estilos CSS...

a) Son aplicables a prrafos.
b) Son aplicables a palabras seleccionadas.
10. Las hojas de estilo...

a) No son de actualizacin automtica.
b) Permiten aplicar un estilo sobre todas las etiquetas de un mismo tipo.

Pruebas evaluativas

1. Un hiperenlace es lo mismo que un hipervnculo, un vnculo, o un

enlace.
a) Verdadero.
b) Falso.
2. Es posible asignar un vnculo a parte de una imagen.

a) Verdadero.
b) Falso.
3. Los vnculos vacos no existen.

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

navegador.
a) Verdadero.
b) Falso.
5. No es posible especificar vnculos a direcciones de correo electrnico

desde Dreamweaver.
a) Verdadero.
b) Falso.
6. El cursor cambia de forma al situarse encima del vnculo en el

navegador.
a) Verdadero.
b) Falso.
7. Cuando el vnculo est definido sobre una imagen.

a) sta adquiere un tono azulado.
b) Aparecen una serie de puntitos en el borde al pulsar sobre ella.
c) Siempre aparece el borde azul alrededor de ella.

Pruebas evaluativas
8. El vnculo vaco...
a) No necesita que se establezca nada como vnculo.
b) Tiene un formato diferente al del resto de vnculos.
c) Necesita que se inserte el smbolo # como vnculo.

9. Es posible especificar el color de...
a) Los vnculos.
b) Los vnculos activos.
c) Los vnculos visitados.
d) Cualquiera de las opciones anteriores.
10. El texto asignado a un hiperenlace siempre aparece subrayado.

a) Verdadero.
b) Falso.

Pruebas evaluativas
Unidad 6. Imgenes

1. Dentro de Dreamweaver puede modificarse el tamao de las

imgenes.
a) Verdadero.
b) Falso.
2. Pueden crearse vnculos y comportamientos sobre partes de una

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

documentos HTML.
a) Verdadero.
b) Falso.
5. Los rollovers son imgenes con extensin SWF.

a) Verdadero.
b) Falso.
6. Es posible probar el funcionamiento del botn Flash desde

Dreamweaver.
a) Verdadero.
b) Falso.
7. Es preferible que la opcin "Carga previa de imagen de sustitucin" ...

a) Slo est desactivada para los rollovers.
b) Est desactivada.
c) Est activada.

Pruebas evaluativas
8. El texto Flash ...

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

a) ...ha de crearse a partir de botones Flash.
b) ...no permite identificar cual de los vnculos est activo.
10. Los botones de la barra de nav egacin...

a) Pueden aparecer de forma vertical.
b) Pueden aparecer de forma horizontal.

Pruebas evaluativas
Unidad 7. Tablas

1. Las tablas estn formadas por un conjunto de celdas, distribuidas

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

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

a) Verdadero.
b) Falso.
4. Puede establecerse la alineacin del contenido de la celda de forma

horizontal y vertical.
a) Verdadero.
b) Falso.
5. No es posible insertar tablas dentro de las celdas de otras tablas.

a) Verdadero.
b) Falso.
6. El modo de tablas expandidas se utiliza para dibujar pginas con gran

volumen de contenido.
a) Verdadero.
b) Falso.
7. El botn sirve para...

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

a) Slo es posible combinar celdas contiguas.
b) La combinacin da como resultado otra celda.

Pruebas evaluativas
9. A la hora de insertar filas ...

a) ...pueden insertarse debajo de la seleccin.
b) ...pueden insertarse a la derecha de la seleccin.
10. Las colum nas de una tabla ...

a) No pueden eliminarse.
b) Estn formadas por celdas.

Pruebas evaluativas
Unidad 8. Marcos

1. Los marcos o frames sirven para distribuir mejor los datos de las
pginas.
a) Verdadero.
b) Falso.
2. Los marcos no permiten mejorar la funcionalidad ni la apariencia de las

pginas.
a) Verdadero.
b) Falso.
3. Cada uno de los marcos de una pgina contiene un documento HTML

individual.
a) Verdadero.
b) Falso.
4. Es posible editar los documentos contenidos en los marcos desde la pgina

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

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

a) ...es la pgina de marcos.
b) ...es el marco sobre el que se han insertado el resto de marcos.
c) Siempre es el marco de la izquierda

Pruebas evaluativas
8. El botn ...
a) Slo se utiliza para guardar los documentos contenidos en los marcos.
b) No permite guardar los documentos contenidos en los marcos.
c) No es conveniente usarlo para guardar por primera vez los marcos.

9. Si la opcin "Mismo tamao" est activa ...
a) ...indica que los distintos marcos de la pgina tienen el mismo tamao .
b) ...indica que los usuarios no podrn variar las medidas del marco desde el
navegador.
c) ...indica que la pgina de marcos se visualizar en el navegador con el

mismo tamao que el del documento en Dreamweaver.
10. Para cada uno de los marcos ...

a) Puede indicarse si aparecern o no las barras de desplazamiento cuando
el documento del marco no pueda visualizarse completamente.
b) Puede indicarse un color de borde diferente.

Pruebas evaluativas

1. Los formularios no pueden utilizarse para conocer las opiniones, dudas, y

otra serie de datos sobre los usuarios.
a) Verdadero.
b) Falso.
2. Para que un formulario funcione correctamente es necesario programar en

algn lenguaje de programacin, como puede ser VBScript.
a) Verdadero.
b) Falso.
3. El rea de texto permite escribir varias lneas de texto.

a) Verdadero.
b) Falso.
4. Las casillas de verificacin siempre tienen que estar desactivadas

inicialmente.
a) Verdadero.
b) Falso.
5. Las etiquetas se utilizan para ponerle nombres al resto de elementos de

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

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

a) ...slo permite escribir una lnea al usuario.
b) ...puede ser definido como contrasea.
c) Cualquiera de las dos opciones anteriores.

Pruebas evaluativas
8. Si existen varios botones de opcin en un mismo formulario ...

a) Se llamarn casillas de verificacin.
b) Slo puede haber uno activado.
c) Cada uno ser de un color diferente.

9. Un botn ...
a) ...puede tener asignada la accin "Enviar formulario".
b) ...puede tener asignada la accin "Restablecer formulario".
10. La validacin de formularios ...

a) Hace que Javascript valide los valores introducidos en el formulario antes
de que se enve.
b) Consiste en comprobar si las etiquetas corresponden a los elementos

adecuados.

Pruebas evaluativas

1. Las pelculas Flash son animaciones.

a) Verdadero.
b) Falso.
2. El botn est en la pestaa de Formulario, en el panel de Insertar.

a) Verdadero.
b) Falso.
3. La opcin Bucle indica que al finalizar la pelcula, sta volver a comenzar

desde el principio.
a) Verdadero.
b) Falso.
4. Al incluir un archivo de audio, es preferible que no ocupe mucho espacio,

aunque esto implique que sea de mala calidad.
a) Verdadero.
b) Falso.
5. Para que no se muestren los controles de audio, los campos Al y An deben

valer cero.
a) Verdadero.
b) Falso.
6. Los sonidos se reproducen automticamente al cargarse la pgina.

a) Verdadero.
b) Falso.
7. Todos los objetos insertados a travs de la opcin Plug-in...

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

apropiado para reproducirlos.
c) ...son vdeos de buena calidad.

Pruebas evaluativas
8. El campo URL plg ...

a) ...es un vnculo a un archivo insertado como plug-in.
b) ...abre la pgina oficial de plug-ins de Internet.
c) ...permite establecer la pgina en la que el usuario puede encontrar el

plug-in.
9. La lnea de cdigo autostart="false" ...

a) ...hace que el archivo de vdeo no se reproduzca automticamente.
b) ...hace que el archivo de audio no se reproduzca automticamente.
10. La lnea de cdigo loop="true" ...

a) Puede insertarse desde el inspector de propiedades de un archivo de
audio.
b) Hace que la reproduccin se repita.

Pruebas evaluativas

1. Las plantillas son archivos con la extensin DWT que se guardan en el

sitio web.
a) Verdadero.
b) Falso.
2. Cuando se modifica el diseo de una plantilla, no se pueden actualizan

todas las pginas basadas en ella.
a) Verdadero.
b) Falso.
3. No es posible modificar las propiedades de una pgina que est basada en

una plantilla, a excepcin del ttulo.
a) Verdadero.
b) Falso.
4. Las plantillas slo pueden crearse desde cero.

a) Verdadero.
b) Falso.
5. Una forma de crear una plantilla desde cero es a travs del panel Activos.
a) Verdadero.
b) Falso.
6. Todos los elementos de una plantilla estn bloqueados por defecto.

a) Verdadero.
b) Falso.

a) ...abrir todas las plantillas en Dreamweaver.
b) ...elegir una imagen de fondo para la plantilla.
c) ...crear una nueva plantilla.

Pruebas evaluativas

a) ...poder trabajar con las plantillas dentro del panel Activos.
b) ...insertar una regin editable en la plantilla.
c) ...abrir el panel Activos.
9. Las zonas editables...

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

plantilla.
10. Al m odificar una plantilla...

a) Las pginas que se basan en ella no se actualizarn automticamente.
b) Las pginas que se basan en ella se actualizarn automticamente.

Pruebas evaluativas

1. El lenguaje HTML est basado en etiquetas.

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

elemento sobre el que actan.
a) Verdadero.
b) Falso.
3. Un INTRO dentro del cdigo HTML equivale a la etiqueta <BR>.

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

de izquierda a derecha.
a) Verdadero.
b) Falso.
5. A travs del editor grfico es posible ...

a) ...ver el cdigo HTML.
b) ...utilizar el mecanismo de completar etiquetas.
c) ...ver si hay algunos errores en el cdigo HTML.
6. Durante la bsqueda y reemplazo...

a) ...aparece la lista de todas la imgenes del sitio web.
b) ...slo es posible buscar dentro del documento actual.
c) ...no es posible deshacer los cambios en los documentos que estn

cerrados.
7. Para reemplazar una imagen por otra en un nico documento ...

a) ...es indispensable utilizar la herramienta de Buscar y reemplazar.
b) ...resulta ms sencillo abrir ese documento para reemplazarla, aunque

puede ser necesario utilizar la herramienta Buscar y reemplazar para saber qu
documento es el que contiene dicha imagen.
c) ....hay que buscar Texto.

Pruebas evaluativas
8. El Inspector de cdigo ...

a) ...muestra el cdigo HTML de la misma forma que lo hace la vista Diseo.
b) ...no puede situarse en cualquier parte de la pantalla.
9. La herramienta de Buscar y reemplazar ...

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

dejar un espacio en blanco.
a) Verdadero.
b) Falso.

Pruebas evaluativas

1. Para crear una marquesina hay que insertar las etiquetas

<MARQUEE> y </MARQUEE> en el cdigo.
a) Verdadero.
b) Falso.
2. La marquesina se desplaza por defecto de arriba a abajo.

a) Verdadero.
b) Falso.
3. La fecha de ltima modificacin puede contener el da de la semana.

a) Verdadero.
b) Falso.
4. La fecha de ltima modificacin siempre se actualiza automticamente al

guardar el documento.
a) Verdadero.
b) Falso.
5. En el caso de que la pgina no se actualice hasta que pase cierto tiempo...

a) ...es preferible incluir la fecha de modificacin.
b) ...es preferible no incluir la fecha de modificacin.
c) ...es preferible incluir el da de la semana en la fecha de ltima

modificacin.
6. La regla horizontal ...

a) ...slo puede insertarse a travs del cdigo.
b) ...suele utilizarse para separar secciones dentro de una misma pgina.
c) Ninguna de las opciones anteriores.
7. Visualizar el cdigo fuente de una pgina de Internet resulta til para ...
a) ...ver cmo ha sido estructurada dicha pgina.
b) ...crear una animacin Flash similar a la que se haya utilizado en ella.

Pruebas evaluativas
8. De las reglas horizontales es posible ...

a) ...modificar su altura.
b) ...indicar si aparecern sombreadas o no.
9. El cdigo JavaScript ...

a) ...puede ser generado automticamente por Dreamweaver al insertar un
comportamiento.
b) ...necesita que se inserte la etiqueta <SCRIPT language=JavaScript>.
10. Cmo podemos ver el cdigo fuente de una pgina desde el navegador?.
a) Mediante el men contextual haciendo clic con el botn derecho y
seleccionando Ver cdigo fuente.
b) Accediendo por el men Ver - Cdigo fuente.

Pruebas evaluativas
Unidad 14. Capas

1. Las capas pueden sitarse en cualquier parte de

la pgina.
a) Verdadero.
b) Falso.
2. Dentro del recuadro de la capa es posible insertar

texto e imgenes.
a) Verdadero.
b) Falso.
3. Las capas no pueden solaparse entre s.

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

a) Verdadero.
b) Falso.
5. El atributo Indice Z significa...

a) El orden en el que han sido insertadas las capas.
b) El nmero de orden de colocacin de las capas.
c) El nmero de capas que hay en un documento.
6. La visibilidad Hidden indica...

a) Que la capa es visible.
b) Que la capa es visible aunque haya otra capa

encima de ella.
c) Que la capa est oculta.
7. Las capas...
a) ...pueden tener color de fondo.
b) ...no pueden tener una imagen de fondo.
c) ...nunca pueden estar ocultas.

Pruebas evaluativas
8. En el panel Capas...
a) ...puede establecerse la visibilidad de la capa.
b) ...puede establecerse el ndice Z de la capa.
9. Una capa...
a) ...no puede contener animaciones Flash.
b) ...solapar a aquellas capas cuyo ndice Z sea

mayor que el suyo.
10. El ID de capa es el nombre de la capa.

a) Verdadero.
b) Falso.

Pruebas evaluativas

1. Los comportamientos son acciones que suceden cuando los usuarios

realizan algn evento sobre un objeto.
a) Verdadero.
b) Falso.
2. Los comportamientos existen como cdigo HTML.

a) Verdadero.
b) Falso.
3. Es necesario escribir cdigo JavaScript para programar los

comportamientos.
a) Verdadero.
b) Falso.
4. El botn seala un nuevo Comportamiento en el panel Comportamientos.

a) Verdadero.
b) Falso.
5. Algunos comportamientos no funcionan para algunos navegadores, por lo

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

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

a) ...al hacer clic.
b) ...mostrar capa.
c) ...cuando el ratn est sobre.

Pruebas evaluativas
8. El evento onclick significa...

b) ...cerrar la ventana del navegador.
c) ...cuando el ratn est sobre
9. Utilizando los comportamientos es posible hacer...

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

una imagen.
10. La lnea JavaScript "window.close();" permite.

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

sobre un objeto determinado.

Pruebas evaluativas

1. Es aconsejable asociar el comportamiento de mostrar mensajes

emergentes cuando se produzca el evento...
a) onLoad.
b) onClick.
2. Cuando cambiamos el texto de la barra de estado tenemos que tener en

cuenta que al abandonar el elemento que lo ejecuta habr que restaurar el
contenido de la barra, utilizaremos el evento...
a) onMouseOut.
b) onMouseUp.
3. Para que un mensaje en la barra de estado se muestre en la pgina
completa habr que...
a) asociarlo al evento onLoad del body.
b) asociarlo al evento onMouseOver del body.

4. Cargar imgenes previamente a la carga completa del documento es muy
til excepto cuando las imgenes pesan demasiado o son muchas.
a) Verdadero.
b) Falso.
5. Asociaremos el comportamiento de la carga previa de imgenes al evento...
a) onClick del body.
b) onLoad del body.

6. Si el usuario no tiene instalado un plug-in podemos redirigirlo utilizando el
comportamiento Comprobar Navegador.
a) Verdadero.
b) Falso.
7. Si utilizamos el comportamiento de abrir ventana del navegador es posible
que no funcione si...
a) el usuario tiene un bloqueador de pop-ups.
b) el usuario tiene el javascript desactivado.
c) Ambas respuestas son correctas.

8. Los navegadores Internet Explorer y Mozilla Firefox siempre muestran la
informacin contenida en las pginas web de forma idntica.
a) Verdadero.
b) Falso.

Pruebas evaluativas
9. Es posible asociar un accin javascript a los siguientes elementos:

a) una imagen.
b) una capa de tipo Div PA.
c) un prrafo.
d) cualquiera de las anteriores.
10. El botn Ir en un men de salto es opcional.

a) Verdadero.
b) Falso.

Pruebas evaluativas

1. El selector p.rojo corresponde a ...

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

a) cualquier elemento que tenga como clase contenedor.
b) un nico elemento con el id contenedor.

3. Podemos asociar estilos a etiquetas con determinados atributos
encerrndolos entre...
a) Parntesis: a(href).
b) Corchetes: a[href].
4. Cuando queramos asociar un estilo a un elemento con determinado valor en
un atributo. El valor deber ir encerrado entre comillas.
a) Verdadero, de esta forma: a[href="_blank"].
b) Falso, debe ir encerrado entre asterscos de esta forma:

a{href=*_blank*}.
5. El orden de la propiedad border es:
a) border: width color style;
b) border: width style color;

6. Podemos cambiar las vietas de una lista por imgenes utilizando la
propiedad...
a) list-image.
b) list-style-image.
7. La diferencia entre la propiedad margin y padding es:
a) Margin mide la distancia del borde con el exterior.
b) Padding mide la distancia del borde con el interior.

8. Para dejar de aplicar un elemento flotante sobre algo deberemos utilizar la
propiedad...
a) clear.
b) break.

Pruebas evaluativas
9. Los valores relativ e y absolute de la propiedad position se diferencian

en:
a) Relativ e establece la posicin del texto tomando como referencia su
posicin en el flujo normal.
b) Absolute establece la posicin del texto tomando como referencia la

ventana del navegador.
c) Las respuestas anteriores son correctas.
d) Las respuestas anteriores son falsas.
10. Para que no se produzcan saltos de lnea en un elemento de bloque

deberemos utilizar la propiedad white-space. Pero, qu valor deberemos
darle?
a) continue.
b) nowrap.

Pruebas evaluativas

1. Un servidor FTP puede nombrarse de 2 formas diferentes.

a) Verdadero.
b) Falso.
2. Es posible determinar la carpeta donde se subirn los archivos al sitio

remoto especificndolo en el campo:
a) Servidor FTP.
b) Directorio del servidor.

3. Al obtener los archivos que se encuentran en el servidor, estos se
desprotegern automticamente.
a) Verdadero.
b) Falso.
4. La vista remota del panel Archivos muestra los archivos que se encuentran
en el servidor.
a) Verdadero.
b) Falso.
5. De forma predeterminada, Dreamweaver se desconecta del servidor a los:
a) 15 minutos.
b) 30 minutos.
6. Proteger un archivo significa...
a) Establecerlo como slo lectura para que nadie pueda modificarlo.
b) Borrarlo del servidor para que nadie pueda modificarlo.

7. Los archivos que hayas subido al servidor y no se encontraban antes se
protegern automticamente.
a) Slo si la opcin Permitir desproteger y proteger archivo se activo en la
definicin del sitio.
b) S, siempre.
c) No, nunca.
8. Es posible subir archivos a un servidor sin establecer un sitio remoto.
a) Verdadero.
b) Falso.

Pruebas evaluativas
9. La sincronizacin bidireccional supone que...

a) Los archivos del servidor local que sean ms nuevos que en el
remoto se copiarn en el remoto.
b) Los archivos del servidor remoto que sean ms nuevos que en el

local se copiarn en el local.
10. La opcin Eliminar archivos remotos no existentes en la unidad local

borrar los elementos que slo se encuentren en el servidor local.
a) Verdadero.
b) Falso.

Pruebas evaluativas

1. Un servidor de pruebas es necesario para ejecutar los archivos php en el

sitio local.
a) Verdadero.
b) Falso.
2. Un archivo PHP se ejecuta en el servidor antes de enviar una respuesta a la

peticin del cliente.
a) Verdadero.
b) Falso.
3. Podemos reconocer cdigo PHP en una pgina porque se encuentre
encerrado entre las etiquetas:
a) <code? y ?>.
b) <? y ?>.
4. El paquete WAMP instalar en nuestro ordenador un servidor capaz de
correr PHP, ASP y C#.
a) Verdadero.
b) Falso.
5. Localhost es el lugar en tu mquina desde donde podremos ejecutar
archivos PHP una vez instalado WAMP.
a) Verdadero.
b) Falso.
6. WAMP instala dos servicios, Apache y MySQL, cul se ocupa de correr
PHP?
a) MySQL.
b) Apache.
7. Qu interfaz utilizaremos para crear bases de datos?
a) MySQL.
b) phpMyAdmin.
c) Ninguna de las anteriores.

8. Es aconsejable establecer un juego de caracteres en nuestras bases de
datos para asegurarnos de que su contenido se visualiza correctamente.
a) Verdadero.
b) Falso.

Pruebas evaluativas
9. Al crear un campo en una base de datos, si queremos que un valor en

ese campo no se repita en ms de un registro deberemos seleccionar la
opcin...
a) Nulo.
b) Extra.
c) nico.
d) ndice.
10. Es posible establecer privilegios a un usuario para que slo pueda acceder
a las opciones administrativas de una base de datos.
a) Verdadero.
b) Falso.

Pruebas evaluativas

1. Para empezar a crear pginas de acceso a datos es imprescindible crear

una conexin con la base de datos.
a) Verdadero.
b) Falso.
2. Un Juego de Registros es un conjunto de registros extrados de la base de

datos que podremos utilizar en nuestras pginas utilizando el texto dinmico.
a) Verdadero.
b) Falso.
3. Si en un juego de registros queremos que se muestren solamente aquellos
que cumplan determinada condicin utilizaremos...
a) La ordenacin.
b) El filtrado.
4. Si en el cuadro de dilogo Juego de Registros queremos crear un filtro
respecto a un valor determinado seleccionaremos la opcin...
a) Valor introducido.
b) Parmetro URL.
respecto a una variable enviada desde un formulario seleccionaremos la
opcin...
b) Parmetro URL.

6. No es posible aplicar cualquier estilo CSS sobre un texto dinmico.
a) Verdadero.
b) Falso.
7. La barra de navegacin de juego de registros combina las opciones

de...
a) Filtrado y paginacin.
b) Paginacin y recuento.
c) Ocultacin de regiones y paginacin.

Pruebas evaluativas
8. Qu tipo de mtodo deberemos utilizar en un formulario para que las

variables se pasen correctamente?
a) GET.
b) POST.
9. Al pasar un parmetro deberemos utilizar el siguiente smbolo:
a) pagina.php&parametro=valor.
b) pagina.php#parametro=valor.
c) pagina.php?parametro=valor.
d) Ninguna de las anteriores.

10. La vista LiveData te puede mostrar una vista rpida de una pgina
dinmica presentando los datos de los registros en pantalla.
a) Verdadero.
b) Falso.

Pruebas evaluativas

1. El contenido de un blog nunca cambia, es esttico. Una vez introduces

su contenido no tendrs la necesidad de modificarlo ms.
a) Verdadero.
b) Falso.
2. Es aconsejable organizar las entradas de un blog por temas o categoras

para mantener una estructura ms accesible.
a) Verdadero.
b) Falso.
3. Todas las pginas del blog deben ser accesibles a cualquier persona que
quiera verlas.
a) Verdadero.
b) Falso.
4. Utilizaremos la vista de relaciones para determinar que si se borra una
entrada tambin lo hagan todos sus comentarios asociados.
a) Verdadero.
b) Falso.
5. Para provocar el borrado de una entrada al borrar su categora asociada,
qu opcin deberemos seleccionar?
a) SET NULL.
b) CASCADE.
6. En la creacin de un blog no nos ser necesario crear sentencias SQL
complejas, bastar con las que podemos crear desde la vista Simple del editor
de Dreamweaver.
a) Verdadero.
b) Falso.
7. Es aconsejable guardar la fecha de cada entrada para poder mostrarlas en
orden de creacin.
a) Verdadero.
b) Falso.
8. Para poder utilizar la opcin Conectar usuario ser imprescindible

haber creado un formulario con antelacin para poder introducir el nombre y
contrasea.
a) Verdadero.
b) Falso.
9. Es posible crear diferentes niveles de acceso de seguridad?
a) S.
b) No.

Pruebas evaluativas
10. Dreamweaver utiliza cookies para recordar la entrada de un usuario con

acceso a la interfaz privada. Si no las tienes activadas no podrs visualizar las
pginas protegidas.
a) Verdadero.
b) Falso.

Pruebas evaluativas

1. Para poder incluir contenido XML o RSS en nuestras pginas

deberemos crear un nuevo archivo de tipo...
a) XML.
b) XSLT.
2. Para previsualizar el resultado de un archivo que contiene informacin

importada desde un archivo XML o RSS podremos utilizar la vista LiveData.
a) Verdadero.
b) Falso.
3. Al utilizar repeticiones de regin podremos utilizar filtros. Estos filtros son
ms avanzados que los que utilizamos en los juegos de registros.
a) Verdadero.
b) Falso.
4. Dreamweaver no permite la ordenacin de elementos automticamente,
aunque s podemos hacerlo a travs del cdigo.
a) Verdadero.
b) Falso.
5. En una ordenacin, el valor por omisin del atributo order es...
a) Ascending.
b) Descending.
6. Al crear una condicin mltiple, si no se cumple la condicin el contenido
seleccionado no se mostrar.
a) Verdadero.
b) Falso.
7. Podemos crear condiciones referentes al valor de cualquier campo o nodo
dentro del elemento que estamos visualizando.
a) Verdadero.
b) Falso.
8. Para mostrar un fragmento XSLT deberemos incluirlo dentro de una pgina
dinmica.
a) Verdadero.
b) Falso.

Pruebas evaluativas
9. Si utilizamos parmetros en nuestros archivos XSLT deberemos

indicar su valor en...
a) La propia pgina XSLT.
b) En la pgina dinmica donde se incluya.
c) En ambos archivos.
d) En ninguna de las anteriores.
10. Es aconsejable utilizar pginas XSLT completas?

a) S.
b) No.

Pruebas evaluativas

1. Para poder utilizar un archivo XML utilizando Spry es necesario crear

antes un conjunto de datos.
a) Verdadero.
b) Falso.
2. Para poder utilizar datos de un archivo XML es necesario crear antes una
regin Spry.
a) Verdadero.
b) Falso.
3. Es posible filtrar los resultados de un archivo XML en la creacin de un
conjunto de datos.
a) Verdadero.
b) Falso.
4. Es posible eliminar las filas repetidas de un archivo XML en la insercin de
una regin de repeticin de datos.
a) Verdadero.
b) Falso.
un conjunto de datos.
a) Verdadero.
b) Falso.
6. El listado de repeticin de Definicin crea una lista desplegable.
a) Verdadero.
b) Falso.
7. Qu etiqueta crea un listado de datos ordenados?.
a) UL.
b) OL.
8. En las tablas de datos es obligatorio mostrar todas las propiedades de un
elemento XML.
a) Verdadero.
b) Falso.
9. En una tabla de datos podemos...
a) Ordenar las filas haciendo clic en una de sus columnas.
b) Enlazar la fila seleccionada con una regin de detalle.
c) Las dos anteriores son ciertas.
d) Todas las anteriores son falsas..

Pruebas evaluativas
10. Para utilizar una regin de detalle es necesaria una tabla de datos?
a) S.
b) No.

Pruebas evaluativas

1. La tecnologa AJAX permite pginas dinmicas sin necesidad de

recargar la pgina del servidor.
a) Verdadero.
b) Falso.
2. Spry Framework es un entorno de trabajo creado por Adobe para que

puedas utilizar AJAX de una forma sencilla y rpida.
a) Verdadero.
b) Falso.
3. Para utilizar Spry deberemos incluir la base de datos que nos podremos
descargar desde la pgina oficial de Adobe.
a) Verdadero.
b) Falso.
4. Spry est centrado en HTML, as que solamente nos har falta saber un
poco de JavaScript para poder crear pginas dinmicas en AJAX utilizndolo.
a) Verdadero.
b) Falso.
5. Spry es capaz de leer datos de una base de datos y mostrarlos en una
pgina aunque sta sea una pgina con extensin HTML.
a) Verdadero.
b) Falso.
6. Es necesario crear una regin Spry en la pgina para mostrar los datos,
preferentemente en una etiqueta TABLE.
a) Verdadero.
b) Falso.
7. Las repeticiones de registros (spry:repeat) nos ayudarn a mostrar todos
los registros incluidos en un archivo XML.
a) Verdadero.
b) Falso.

Pruebas evaluativas
8. El atributo spry:test puede ir en cualquier etiqueta dentro de una regin de

repeticin.
a) Verdadero.
b) Falso.
9.Para incluir un atributo de un elemento cuando utilizamos Spry deberemos
usar el smbolo...
a) #.
b) ::.
c) @.
d) Ninguno de los anteriores.

10. Cuando queramos filtrar un dataset ser absolutamente necesario crear
una funcin que se encargue de descartar las filas que queramos filtrar.
a) Verdadero.
b) Falso.

Pruebas evaluativas

1. Los controles de validacin de Spry deben ser insertados por fuerza

dentro de un formulario.
a) Verdadero.
b) Falso.
2. La caja de texto de Spry slo admite la validacin de correos electrnicos,

fechas y nmeros de telfonos.
a) Verdadero.
b) Falso.
3. Para el patrn 0000, Cul de las siguientes respuestas es aceptable?.
a) 0.
b) 1234.
4. Los estados de validacin muestran mensajes de error si la evaluacin del
campo introducido es negativa.
a) Verdadero.
b) Falso.
5. Los mensajes de error son configurables.
a) Verdadero.
b) Falso.
6. Podemos obligar al usuario a escoger un valor determinado en un
desplegable de Spry.
a) Verdadero.
b) Falso.
7. Las casillas de verificacin de Spry no pueden mostrarse en grupo.
a) Verdadero.
b) Falso.
8. Podemos hacer que una opcin de un desplegable Spry no sea
seleccionable.
a) Verdadero.
b) Falso.
9. Si no seleccionamos ninguna validacin, por defecto el campo se evaluar...
a) Al abandonar de control.
b) Al modificar el control.
c) Al enviar el formulario.
d) Ninguna de los anteriores.

Pruebas evaluativas
10. Los contadores de caracteres en un rea de texto Spry son opcionales.

a) Verdadero.
b) Falso.

Pruebas evaluativas

1. Los mens Spry pueden tener hasta cuatro niveles de elementos.

a) Verdadero.
b) Falso.
2. Es posible colocar un enlace de correo electrnico a un elemento de men

Spry.
a) Verdadero.
b) Falso.
3. No es posible crear un enlace a una pgina en un elemento de men de
primer nivel.
a) Verdadero.
b) Falso.
4. En un control de Fichas Spry podemos utilizar slo 2 fichas por control.
a) Verdadero.
b) Falso.
5. Las fichas Spry pueden contener imgenes.
a) Verdadero.
b) Falso.
6. Si un control de Acorden no tiene la altura suficiente para mostrar su
contenido se insertarn automticamente barras de desplazamiento.
a) Verdadero.
b) Falso.
7. Los acordeones de Spry pueden tener tantas seccin como queramos.
a) Verdadero.
b) Falso.
8. Un panel que se contrae de Spry puede mostrarse desplegado al cargarse
la pgina.
a) Verdadero.
b) Falso.
9. Es posible modificar el estilo de un control Spry?.

a) S, modificando su pgina de estilos CSS.
b) No, slo pueden cambiarse los estilos Negrita y Cursiva desde el

panel Propiedades.
c) No, en ninn caso.

Pruebas evaluativas
10. Cuando creamos un control Spry, en la carpeta SpryAssets cuntos

archivos se crean?.
a) Tres.
b) Dos.

Ayudaalos
ejerciciospropuestos


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

puedes hacer doble clic sobre ellos en el panel Archivos. Puedes abrir el panel a travs del men Ventana,
opcin Archivos y seleccionar el sitio en el men desplegable que aparece.
Apartado 7 Una vez abierto los documentos en Dreamweaver, elige a la opcin Propiedades de la
pgina del men Modificar para cada uno de ellos y modifica los siguientes campos en la catagora
Aspecto.
Color de fondo: #999999
Imagen de fondo: imagenes/fondo.gif

Repetir: repetir x
Apartado 8 Selecciona Arial, Helvetica, sans-serif en el campo Fuente de pgina.
Por ltimo, pulsa el botn Aceptar.
Apartado 9 Para abrir el documento marcos.htm puedes hacer doble clic sobre l en el panel Archivos.
Puedes abrir el panel a travs del men Ventana, opcin Archivos y seleccionar el sitio en el men
desplegable que aparece.
Escribe Tu Tienda de Deportes en el campo Ttulo de la barra de herramientas de documento.
Apartado 10 Para cada uno de los archivos abiertos hacer clic sobre el botn Guardar , y despus
sobre el botn Cerrar . El botn de cerrar cambia dependiendo del diseo de vista de la pgina, si es como
fichas o como ventanas flotantes.
Ejercicio 2: Animales
Apartado 1 Para crear un sitio nuevo es necesario elegir la opcin Administrar sitios... en el men Sitio.
En la nueva ventana, seleccionar el botn Nuevo...
En la nueva ventana, en la pestaa Avanzadas, hay que elegir la categora Datos locales.
En Nombre del sitio hay que escribir Animales.
En Carpeta raz local hay que seleccionar la carpeta animales, que se encuentra dentro de la carpeta
ejerciciosdream.
Podemos seleccionar la carpeta imagenes, que se encuentra dentro de la carpeta animales, como
Carpeta predeterminada de imgenes.
Por ltimo, hay que hacer clic sobre el botn Aceptar.
Apartado 2 Para abrir el documento consultas.htm puedes hacer doble clic sobre l, en el panel
Archivos. Puedes abrir el panel a travs del men Ventana, opcin Archivos.
Escribe Consultas en el campo Ttulo de la barra de herramientas de documento.
Apartado 3 Para abrir el documento gatos.htm puedes hacer doble clic sobre l, en el panel Archivos.
Puedes abrir el panel a travs del men Ventana, opcin Archivos.
Escribe Gatos en el campo Ttulo de la barra de herramientas de documento.
Apartado 4 Para abrir el documento perros.htm puedes hacer doble clic sobre l, en el panel Archivos.
Escribe Perros en el campo Ttulo de la barra de herramientas de documento.
Apartado 5 Para abrir el documento inicio.htm puedes hacer doble clic sobre l, en el panel Archivos.

Escribe Inicio en el campo Ttulo de la barra de herramientas de documento.
Apartado 6 En todos los documentos, hacer clic sobre el botn Guardar , y despus sobre el botn
Cerrar .
Volver al ejercicio sin resolver Volver a la teora

Unidad 4. El texto
Apartado 1 Para abrir el sitio Deportes hay que seleccionarlo en el panel Archivos. Puedes abrir el panel
a travs del men Ventana, opcin Archivos. Seleccionar el sitio Deportes en el men desplegable que
aparece en la parte superior del panel.
Apartado 2 Para abrir el documento menu.htm hay que hacer doble clic sobre este archivo, en la lista de
archivos que aparecen en el panel Archivos.
Apartado 3 Si no aparece el panel CSS, brelo a travs del men Ventana, opcin Estilos CSS.
Una vez abierto haz clic en el botn Nueva regla CSS y se abrir un cuadro de dilogo.
En Tipo de Selector selecciona Etiqueta.
En Etiqueta selecciona body.
Y en Definir en selecciona Slo en este documento.
Pulsa el botn Aceptar y se abrir el dilogo dnde asignars las propiedades CSS.
Haz clic en la categora Cuadro y en el marco Margen asegrate de que la opcin Igual para todo esta
activada. En el campo Sup. escribe 0.
Haz clic en la categora Fondo y modifica las propiedades Posicin horizontal a centrar y Posicin
vertical a superior.
Apartado 4 Para abrir los documentos donde.htm, instalaciones.htm, quienes.htm y reservas.htm hay
que hacer doble clic sobre estos archivos, en la lista de archivos que aparecen en el panel Archivos.
Apartado 5 Si no aparece el panel CSS, brelo a travs del men Ventana, opcin Estilos CSS.
Una vez abierto, debers seguir estos pasos en los 4 documentos que acabas de abrir.
Haz clic en el botn Nueva regla CSS y se abrir un cuadro de dilogo.
En Tipo de Selector selecciona Etiqueta.
En Etiqueta selecciona body.
Y en Definir en selecciona Slo en este documento.
Pulsa el botn Aceptar y se abrir el dilogo dnde asignars las propiedades CSS.
Haz clic en la categora Fondo y modifica la propiedad Anexo a fijo.
Apartado 6 Haz clic sobre la pestaa del archivo instalaciones.htm y seleccionar las seis lneas que
hacen referencia a las instalaciones. Hacer clic sobre el botn Lista sin ordenar .
Apartado 7 Pulsa dos veces sobre el botn Sangra de texto .

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

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

botn y en para ponerlo en cursiva y negrita.
Tambin selecciona 16 en el desplegable Tam.
Apartado 6 Despliega el campo Estilo y selecciona la opcin Cambiar nombre...
Se abrir un cuadro de dilogo, debers darle el nombre titulo2 al estilo.
Apartado 7 Para acceder a las porpiedades del documento haz clic en un rea vaca de la pgina y en el
Inspector de propiedades haz clic sobre el botn Propiedades de la pgina...
En la categora Aspecto selecciona Georgia en el desplegable Fuente de la pgina.
Escoge 16 en el campo Tamao.
En Color del fondo escribe #CCCC99.
Apartado 8 Para exportar los estiloa a un archivo .css abre el panel CSS a travs del men Ventana,
opcin Estilos CSS.
Pulsa el botn Todo para ver todos los estilos aplicados sobre la pgina en este momento.
Haz clic derecho sobre <style> y selecciona Exportar... para exportar todos los estilos de la pgina.
Busca la carpeta del sitio en el cuadro de dilogo que se te muestra y guarda la hoja de estilos como
estilo.css.

Se vincular al documento automticamente.
Apartado 9 Para abrir el documento inicio.htm hay que hacer doble clic sobre l, en el panel Archivos.
Para vincular la hoja de estilos a la pgina haz clic en el botn Adjuntar hoja de estilos del panel
CSS. En el siguiente cuadro de dilogo haz clic en el botn Examinar y selecciona el archivo estilo.css.
Confirma que el campo Aadir como tiene la opcin Vincular activada.
Apartado 10 Para abrir el documento consultas.htm hay que hacer doble clic sobre l, en el panel
Archivos.
Apartado 11 Selecciona el texto Consultas y en el campo Estilo del inspector de propiedades

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

a travs del men Ventana, opcin Archivos.
Apartado 2 Para abrir el documento menu.htm hay que hacer doble clic sobre l, en el panel Archivos.
Apartado 3 Si no aparece el inspector de propiedades, brelo a travs del men Ventana, opcin
Propiedades.
Seleccionar el texto Quienes.
Escribir quienes.htm en Vnculo, del inspector de propiedades.
Escribir abajo en Dest.
Apartado 4 Seleccionar el texto Dnde.
Escribir donde.htm en Vnculo, del inspector de propiedades.
Apartado 5 Seleccionar el texto Instalaciones.
Escribir instalaciones.htm en Vnculo, del inspector de propiedades.
Apartado 6 Seleccionar el texto Reservas.
Escribir reservas.htm en Vnculo, del inspector de propiedades.
Pulsar fuera del texto para que se aplique el ltimo cambio.
Apartado 7 Hacer clic sobre el botn Guardar , y despus sobre el botn Cerrar .

Propiedades.
Seleccionar la imagen de aulaClic. Para ello basta con pulsar sobre ella.
Escribir http://www.aulaclic.com en Vnculo, del inspector de propiedades.
Apartado 4 Seleccionar la imagen de aulaclic.
Seleccionar _blank en Dest, del inspector de propiedades.
Pulsar fuera de la imagen para que se aplique el ltimo cambio.

Unidad 6. Imgenes
Apartado 1 Para abrir el sitio Deportes hay que seleccionarlo en el panel Archivos o tambin puedes abrir
el panel a travs del men Ventana, opcin Archivos.
Apartado 2 Para abrir el documento instalaciones.htm hay que hacer doble clic sobre l, en el panel
Archivos.
Apartado 3 Situar el cursor a la derecha del texto Nuestras instalaciones.
Elegir la opcin Imagen, del men Insertar.
Seleccionar la imagen logodeportes.gif, que se encuentra dentro de la carpeta imagenes del sitio.
Propiedades.
Si el inspector de propiedades no se muestra en su totalidad, pulsa sobre el botn para desplegar sus
Seleccionar la imagen, pulsando sobre ella.
Elegir Medio absoluta en Alinear.
Pulsar fuera de la imagen para que se aplique el ltimo cambio.
Apartado 1 Para abrir el sitio Animales hay que seleccionarlo en el panel Archivos o tambin puedes abrir
el panel a travs del men Ventana, opcin Archivos
Apartado 3 Primero nos descargamos las imgenes a la carpeta imagenes. Para cada imagen, hacer clic
con el botn derecho del ratn sobre la imagen y seleccionar la opcin Guardar imagen como.... Buscar la
carpeta imagenes dentro de la carpeta animales del sitio y mantener el mismo nombre.
Una vez guardadas las imgenes podemos crear el rollover.
Situar el cursor al lado del texto Inicio.
Elegir la opcin Imagen de sustitucin, que se encuentra en la opcin Objetos de imagen del men
Insertar. Se abrir una nueva ventana.
En Imagen original: seleccionar la imagen pata1.gif.

En Imagen de sustitucin: seleccionar la imagen pata2.gif.
Activar la casilla Carga previa de imagen de sustitucin.
Propiedades.
Seleccionar el rollover, pulsando sobre l.
Escribir # en Vnculo.
Pulsar fuera del rollover para que se aplique el ltimo cambio.

Unidad 7. Tablas
Apartado 2 Para abrir el documento reservas.htm hay que hacer doble clic sobre l, en el panel Archivos.
Propiedades.
Selecciona la tabla completa y en Borde escribe 0.
Selecciona la segunda y tercera celda de la segunda columna y haz clic en el botn para combinarlas.
Selecciona la primera fila y escribe #006464 en Fnd.
Selecciona la segunda y tercera fila y escribe #CCFFCC en Fnd.
Selecciona la cuarta fila y escribe #99CC99 en Fnd.
Ahora selecciona la segunda columna y manteniendo pulsada la tecla Ctrl haz clic tambin sobre la
primera celda de la primera columna, en Horiz selecciona Centro.
Pulsar fuera de la tabla para que se aplique el ltimo cambio.
Propiedades.
Situa el cursor al principio del documento y haz clic en el men Insertar Tabla.
En Filas escribe 5 y en Columnas 3.
En Ancho de tabla escribe 700 y selecciona Pxeles en el desplegable de al lado.

Pon los campos Grosor del borde, Relleno de celda y Espacio entre celdas a 0.
Haz clic en Aceptar.
Selecciona la segunda celda de la segunda fila de la tabla que acabas de crear y pulsa el botn del
inspector de propiedades. Se abrir una nueva ventana.
Seleccionar Columnas en Dividir, y escribir 2 en Nmero de columnas:.
Selecciona la primera celda de la primera fila, en An escribir 31. En Al escribir tambin 31.
Selecciona la tercera celda de la primera fila, en An escribir 31. En Al escribir tambin 31.
Selecciona la primera celda de la ltima fila, en An escribir 31. En Al escribir tambin 31.
Selecciona la tercera celda de la primera fila, en An escribir 31. En Al escribir tambin 31.
Selecciona la segunda celda de la segunda fila, en An escribir 150. En Al escribir tambin 100.
Apartado 4 Selecciona la tabla completa y selecciona centro en el campo Alinear del inspector de
propiedades.
Escribe #666633 en el campo Col. fondo del inspector de propiedades.
Apartado 5 Selecciona la primera celda de la primera fila y en el campo Fnd del inspector de
propiedades escribe imagenes/arriba_izquierda.gif.
Apartado 6 Selecciona la tercera celda de la primera fila y en el campo Fnd del inspector de
propiedades escribe imagenes/arriba_derecha.gif.
Apartado 7 Selecciona la primera celda de la ltima fila y en el campo Fnd del inspector de propiedades
escribe imagenes/abajo_izquierda.gif.
Apartado 8 Selecciona la tercera celda de la ltima fila y en el campo Fnd del inspector de propiedades
escribe imagenes/abajo_derecha.gif.
Apartado 9 Sita la segunda celda de la segunda fila y haz clic en el men Insertar Imagen.
Selecciona la imagen logo_animales.gif de la carpeta imagenes y haz clic en Aceptar.
Apartado 10 Selecciona todas las celdas de la tabla manteniendo presionada la tecla Ctrl y haciendo clic
en cada una de ellas. Luego, selecciona Centro en Horiz y Medio en Vert.
Apartado 11 Selecciona todo el texto que se encuentra bajo la tabla. Haz clic en el men Edicin
Cortar. Luego sitate en la segunda celda de la cuarta fila y haz clic en el men Edicin Pegar.
Apartado 12 Para abrir el documento botones.htm hay que hacer doble clic sobre l, en el panel
Archivos.
Selecciona los cuatro botones que encontrars all y copialos con la combinacin de teclas Ctrl + C.

Sitate en la tercera celda de la segunda fila y pgalos botones con la combinacin de teclas Ctrl + V.
Apartado 13 En el inspector de propiedades selecciona Derecha en el campo Horiz e Inferior en Vert.
Apartado 15 Repite los apartados 2 al 14 con los archivos consultas.htm, gatos.htm y perros.htm.

Unidad 8. Marcos
Apartado 2 Para abrir el documento marcos.htm hay que hacer doble clic sobre l, en el panel Archivos.
Propiedades.
Si no aparece el panel Marcos, brelo a travs del men Ventana, opcin Marcos.
Pulsar sobre el marco inferior, llamado abajo, en el panel Marcos.
Escribir quienes.htm en Origen, del inspector de propiedades.
Apartado 4 Seleccionar el marco marcoinferior en el panel Marcos.
Seleccionar No en Bordes.
Pulsar sobre el inspector de propiedades para que se se aplique el ltimo cambio.

Apartado 2 Para abrir el documento reservas.htm hay que hacer doble clic sobre l, en el panel Archivos.
Propiedades.
Situar el cursor a la derecha del texto Hora:.
Ir al men Insertar, opcin Formulario, y elegir la opcin Campo de texto.
Seleccionar el campo de texto que acaba de aparecer, y escribir 5 en Ancho car, del inspector de
propiedades.
Apartado 4 Situar el cursor a la derecha del texto Centro:.
Ir al men Insertar, opcin Formulario, y elegir la opcin Lista/men.
Seleccionar la lista/men que acaba de aparecer, y elegir Men en Tipo, del inspector de propiedades.
Hacer clic sobre el botn Valores de lista. Aparecer una nueva ventana.
Escribir Don Benito en Etiqueta de elemento.
Pulsar sobre el botn para insertar nuevos elementos en la lista. Aadir las etiquetas Madrid y Silla.
Apartado 5 Seleccionar el men.
Seleccionar Don Benito en Seleccionado inicialmente, del inspector de propiedades.
Apartado 6 Situar el cursor a la izquierda del botn Enviar.
Ir al men Insertar, opcin Formulario, y elegir la opcin Botn.
Seleccionar el botn, y seleccionar Restablecer formulario en Accin, del inspector de propiedades.
Pulsar fuera del botn para que se aplique el ltimo cambio.

Apartado 2 Para abrir el documento consultas.htm hay que hacer doble clic sobre l, en el panel
Archivos.
Propiedades.
para desplegar sus

Si el inspector de propiedades no se muestra en su totalidad, pulsa sobre el botn
Situar el cursor en la celda vaca que se encuentra a la derecha del texto Animal:.
Ir al men Insertar, opcin Formulario, y elegir la opcin Lista/men.
Seleccionar la lista/men que acaba de aparecer, y elegir Men en Tipo, del inspector de propiedades.
Hacer clic sobre el botn Valores de lista. Aparecer una nueva ventana.
Escribir --- Elige opcin --- en Etiqueta de elemento.
Pulsar sobre el botn .

para insertar un nuevo elemento. Aadir las etiquetas Perro, Gato y Otros
Apartado 4 Seleccionar el men.
Seleccionar --- Elige opcin --- en Seleccionado inicialmente, del inspector de propiedades.
Apartado 5 Situar el cursor en la celda vaca que se encuentra debajo del texto Consulta:.
Ir al men Insertar, opcin Formulario, y elegir la opcin rea de texto.
Seleccionar el rea de texto.
Escribir 50 en Ancho car, del inspector de propiedades.
Escribir 10 en Lneas nm.
Escribir Escribe aqu tu consulta en Valor inicial.
Apartado 6 Situar el cursor a la derecha del botn Restablecer.
Ir al men Insertar, opcin Formulario, y elegir la opcin Botn.
Seleccionar el botn, y seleccionar Enviar formulario en Accin, del inspector de propiedades.
Pulsar fuera del botn para que se aplique el ltimo cambio.
Apartado 2 Para abrir el documento quienes.htm hay que hacer doble clic sobre l, en el panel Archivos.
Propiedades.
Situar el cursor en la ltima lnea en blanco de la pgina, debajo de la imagen de aulaclic.
Ir al men Insertar, opcin Media, y elegir la opcin Flash.
Seleccionar el archivo basket.swf, que se encuentra dentro de la carpeta imagenes del sitio.
Apartado 4 Seleccionar el archivo Flash.
Desactivar la casilla Bucle, del inspector de propiedades.
Activar la casilla Rep.autom.
Pulsar fuera del archivo Flash para que se aplique el ltimo cambio.

Apartado 2 Para abrir el documento conplantilla.htm hay que hacer doble clic sobre l, en el panel
Archivos.
Apartado 3 Ir al men Modificar, opcin Plantillas, y elegir la opcin Aplicar plantilla a pgina. Se
abrir una nueva ventana.
En Archivos: seleccionar Deportes.
En Plantillas: seleccionar plantilladeportes.
Activar la casilla Actualizar pgina cuando cambie la plantilla.
Hacer clic sobre Seleccionar.
En el caso de que existan nombres de regiones no coincidentes aparecer una nueva ventana. Lo ms
probable es que la regin no coincidente sea head.
En Nombre seleccionar Document head.
En Mover contenido a la nueva regin: seleccionar head.
Hacer clic sobre Aceptar.

Apartado 2 Para abrir el documento conplantilla.htm hay que hacer doble clic sobre l, en el panel
Archivos.
Apartado 3 Ir al men Modificar, opcin Propiedades de la pgina.
En Texto: escribir #0000FF.
Aparecer un aviso, indicando que los cambios sern omitidos. No es posible cambiar las propiedades de
un documento basado en una plantilla, a excepcin del ttulo, por lo tanto, en este caso no es posible
modificar el color del texto.
Apartado 4 Borrar el texto Este es el ttulo y escribir Animales en su lugar.
Es posible hacerlo, ya que ese texto se encuentra dentro de una regin editable.
Apartado 5 Ir al men Modificar, opcin Plantillas, y elegir la opcin Separar de plantilla.
Apartado 6 Ir al men Modificar, opcin Propiedades de la pgina.
En Texto: escribir #0000FF.
En este caso el cambio s puede hacerse, ya que el documento ya no est basado en la plantilla, y pueden
modificarse todas las propiedades de la pgina, as como todo el contenido del documento.

Apartado 2 Para abrir el documento buscar.htm hay que hacer doble clic sobre l, en el panel Archivos.
Apartado 3 Ir al men Edicin, opcin Buscar y reemplazar. Se abrir una nueva ventana.
En Buscar en: seleccionar Documento actual.
En Buscar seleccionar Texto y escribir deportes.
En Reemplazar con: escribir aulaClic.
Activar la casilla Coincidir maysculas y minsculas.
Hacer clic sobre el botn Reemp. todos.
Pulsar sobre alguna parte de la pgina para que se aplique el ltimo cambio.
Apartado 2 Para abrir el documento buscar.htm hay que hacer doble clic sobre l, en el panel Archivos.
Apartado 3 Ir al men Edicin, opcin Buscar y reemplazar. Se abrir una nueva ventana.
En Buscar en: seleccionar Documento actual.
En Buscar seleccionar Cdigo fuente y escribir aulaclic.jpg.
En Reemplazar con: escribir logo_animales.gif.
Hacer clic sobre el botn Reemp. todos.
Pulsar sobre alguna parte de la pgina para que se aplique el ltimo cambio.

Apartado 2 Para abrir el documento donde.htm hay que hacer doble clic sobre l, en el panel Archivos.
Apartado 3 Seleccionar el texto Para ms informacin sobre dnde se encuentran nuestros centros,
puedes llamar al: 555 05 05 50.
Hacer sobre el botn , para ver el cdigo de la pgina.
El texto seleccionado en el documento aparecer tambin seleccionado en el cdigo. La lnea en el cdigo

ser:
<p align="center"><font size="4"><em><strong> Para más

información sobre dónde se encuentran nuestros centros,
puedes llamar al: 555 05 05 50 </strong></em></font></p>
Insertar <marquee> antes de dicho cdigo, y </marquee> al final de l. Tener cuidado, ya que al insertar
la etiqueta <marquee> se insertar automticamente </marquee> despus de ella. Como no queremos
</marquee> en ese lugar, habr que borrarla de ah.
El cdigo resultante ser:
<maquee><p align="center"><font size="4"><em><strong> Para más

información sobre dónde se encuentran nuestros centros,
puedes llamar al: 555 05 05 50 </strong></em></font></p></marquee>

Apartado 2 Para abrir los documentos consultas.htm, gatos.htm, perros.htm e inicio.htm hay que hacer
doble clic sobre ellos, en el panel Archivos.
Apartado 3 Para cada uno de los arhivos, sita el cursor en en la segunda celda de la tercera fila de la
tabla.
Haz clic en el men Insertar HTML Regla horizontal.

Unidad 14. Capas
Apartado 2 Para abrir el documento quienes.htm hay que hacer doble clic sobre l, en el panel Archivos
Propiedades.
Situar el cursor en cualquier sitio de la pgina.
Ir al men Insertar, opcin Objetos de diseo, y luego opcin Capa.
Seleccionar la capa, pulsando sobre la imagen .
Escribir oferta en ID de capa, del inspector de propiedades.
Apartado 4 Situar el cursor dentro de la capa. Insertar el texto:
Este fin de semana, disfruta de clases gratuitas de aerbic, simplemente por visitar nuestras
intalaciones.
cerrar
Apartado 5 Seleccionar el texto de la capa.
Hacer clic sobre el botn Alinear al centro , del inspector de propiedades.
Apartado 6 Seleccionar la capa, pulsando sobre la imagen .
Escribir #C197C1 en Col. Fondo, del inspector de propiedades.
Escribir 427px en An, del inspector de propiedades.
Escribir 143px en Al.
Escribir 38px en Iz, del inspector de propiedades.
Escribir 28px en Sup.

Seleccionar visible en Vis, del inspector de propiedades.
Pulsar fuera de la capa para que se aplique el ltimo cambio.
Propiedades.
Situar el cursor en cualquier sitio de la pgina.
Ir al men Insertar, opcin Objetos de diseo, y luego opcin Capa.
Seleccionar la capa, pulsando sobre la imagen .
Escribir gatosemana en ID de capa, del inspector de propiedades.
Este es Golfo y es de Valencia.
Apartado 5 Situar el cursor debajo de esta lnea e ir al men Insertar y luego opcin Imagen.
Selecciona la imagen gato1.gif de la carpeta imagenes.
Cerrar
Apartado 7 Seleccionar el texto de la capa.
Hacer clic sobre el botn Alinear al centro , del inspector de propiedades.
Escribir #BFBF80 en Col. Fondo, del inspector de propiedades.

Escribir 276px en An, del inspector de propiedades.
Escribir 291px en Al.
Escribir 100px en Iz, del inspector de propiedades.
Escribir 200px en Sup.
Seleccionar hidden en Vis, del inspector de propiedades.
Pulsar fuera de la capa para que se aplique el ltimo cambio.

Apartado 2 Para abrir el documento quienes.htm hay que hacer doble clic sobre l, en el panel Archivos.
Apartado 3 Si no aparece el panel Comportamientos, brelo a travs del men Ventana, opcin
Comportamientos.
Seleccionar el texto cerrar, que se encuentra dentro de la capa.
Hacer clic sobre el botn del panel Comportamientos.
Elegir la opcin Mostrar-Ocultar elementos.
En Elementos: seleccionar la capa capa "oferta", que es la nica capa del documento.
Hacer clic sobre el botn Ocultar.
Hacer sobre el comportamiento en el panel.
Hacer clic sobre el botn , que aparece a la derecha del evento.
Seleccionar el evento onClick.

Apartado 3 Si no aparece el panel Comportamientos, brelo a travs del men Ventana, opcin
Comportamientos.
Seleccionar la imagen del gato que se encuentra en la derecha.
En Elementos: seleccionar la capa capa "gatosemana", que es la nica capa del documento.
Hacer clic sobre el botn Mostrar.
Apartado 4 Seleccionar el texto cerrar de la capa.
En Elementos: seleccionar la capa capa "gatosemana".
Hacer clic sobre el botn Ocultar.

Ejercicio 1: Blog
Apartado 3.
1 Coloca el cursor en la primer lnea, vamos a introducir el men aqu.
2 Haz clic en Insertar Formulario Men de salto.
Se abrir el cuadro de dilogo de Men de salto.
3 En Texto escribe Seccin 1.
4 En Al seleccionarse, ir a URL escribe #.
Repite estos pasos para la Seccin 2 y la Seccin 3.
5 Marca la casilla Insertar botn Ir tras el men.
6 Pulsa Aceptar y el men se crear.
Puedes probarlo en el navegador pulsando la tecla F12.
Si cuando seleccionas algn elemento en el men, el navegador hace el cambio de pgina (aunque no se
vea se aade un # en la barra de direcciones).
Dreamweaver no habr cerrado bien el botn Ir.
Nosotros queremos seleccionar el elemento y luego pulsando el botn Ir ir a la pgina en concreto.
7 Pasa a la vista de cdigo.
8 Busca la parte donde se encuentra el formulario, vers esta lnea:
<select name="menu1" onchange="MM_jumpMenu('parent',this,0)">
9 Observa que tiene un evento onChange (cuando cambie), esto provoca que cuando se cambie el valor del
selector de elemento se ejecute el comportamiento. Vamos a eliminarlo dejando la lnea as:

Ahora ya no cambiar de pgina al cambiar de elemento, sino al hacer clic en el botn. Observa la lnea en
la que se crea el botn:
<input type="button" name="Button1" value="Ir"

onclick="MM_jumpMenuGo('menu1','parent',0)" />
El botn tiene asociado el evento onClick para que vaya a la pgina que corresponde.
Lo hemos conseguido.
Ms adelante modificaremos los valores para que el men tenga funcionalidad.
De momento lo dejaremos as.

Ejercicio 1: Crear una hoja de estilos
Apartado 2
1 Crea un nuevo archivo CSS desde Archivo Nuevo Pgina bsica CSS.
2 Gurdalo (CTRL + S) y llmalo estilo_blog.css.
Apartado 3
1 Abre el archivo blog.dwt.php.
2 En el panel Propiedades despliega el campo Estilo y selecciona la opcin Adjuntar hoja de estilos....
3 Busca el archivo estilo_blog.css que acabamos de crear y selecciona la opcin Vincular.
Apartado 5
1 Coloca el cursor al prinicipio de la pgina delante del formulario del men de salto.
2 Selecciona la opcion Insertar-->Objetos de diseo-->Etiqueta Div
3 Escribe contenido en el cuadro Id:
4 Pulsa en Aceptar
5 Coloca en cursor dentro del bloque
6 Selecciona Insertar Objetos de plantilla Regin editable.
7 Llmala contenido
8 Pulsa Aceptar.
Apartado 6
1 Selecciona el formulario del men por ejmeplo haciendo clic sobre la etiqueta <form> en la zona de
etiquetas.Pulsa Aceptar.
2 Selecciona la opcion Insertar-->Objetos de diseo-->Etiqueta Div
3 Escribe seccion en el cuadro Id:

4 Pulsa en Aceptar
Apartado 7
1 Para asegurarte de que te colocas dentro del bloque y delante del formulario pasa a vista Cdigo y coloca
el cursor detrs de la etiqueta <div id="seccion"> y delante de la etiqueta <form..
2 Vuelve a la vista Cdigo
3 Pulsa Intro (para crear un prrafo en blanco).
4 Escribe Categoras.
Apartado 8
1 Para asegurarte de que te colocas dentro del bloque y detrs del formulario pasa a vista Cdigo y coloca
el cursor detrs de la etiqueta </form> y delante de la etiqueta </div>
2 Vuelve a la vista Cdigo
3 Pulsa escribe los prrafos y asgnales los vnculos (eso ya lo sabrs hacer).
Al final te quedar un cdigo as:
<div id="contenedor">
<div id="contenido">
contenido
</div>
<div id="seccion">
<p>Categorías:</p>
<form name="form1" id="form1">
<option value="#">Sección 1</option>

</select>
<input type="button" name="Button1" value="Ir" onclick="MM_jumpMenuGo('menu1','parent',0)" />
</form>
<p> </p>
<p><a href="../index.php">Principal</a></p>
<p><a href=../admin.php">Administración</a></p>
</div>
</div>
Ejercicio 2: Controles de Fuente.
2 Escribe el siguiente estilo para el body:
body {
font-family: Tahoma;
font-size: 14px;
color: black;
3 Escribe el siguiente estilo para la clase titulo:
.titulo {
font-size: 18px;
4 Escribe el siguiente estilo para la clase datos:

.datos {
text-align: right;
font-size: 12px;
font-style: italic;
line-height: 0.2;
5 Escribe el siguiente estilo para los enlaces dentro de un prrafo:
pa{
color: black;
Ejercicio 3: Controles de Fondo.
2 En la etiqueta body aade la siguiente lnea:
body {
font-size: 14px;
color: black;
background: url(imagenes/fondo_body.gif) no-repeat;
3 Escribe el siguiente estilo para el bloque con id contenedor:
#contenedor {

background: white url(imagenes/fondo.gif) no-repeat;
4 Escribe el siguiente estilo para el bloque con id seccion:
#seccion {
background: white url(imagenes/fondo_seccion.gif) no-repeat;
5 En estilo para la clase titulo aade la siguiente lnea:
.titulo {
font-size: 18px;
background: url(imagenes/titulo.gif) no-repeat;
6 En el estilo para los enlaces de los prrafos aade la siguiente lnea:
pa{
color: black;
background-color: #CCFF66;
Ejercicio 4: Controles de Mrgenes y Bordes.
2 En la etiqueta body aade la siguiente lnea:
body {

font-size: 14px;
color: black;
background: url(imagenes/fondo_body.gif) no-repeat;
margin: 0px;
3 En el estilo para el elemento con id seccion aade estas lneas:
#seccion {
border-right: 2px solid black;
border-left: 2px solid black;
padding: 20px;
padding-top: 90px;
4 Crea este estilo para los formularios dentro del bloque con id seccion:
#seccion form {
5 Crea este estilo para el bloque con id contenido:
#contenido {

6 A la clase titulo adele estas lneas:
.titulo {
font-size: 18px;
background: url(imagenes/titulo.gif) no-repeat;
padding-top: 30px;
padding-left: 35px;
7 Al estilo de los enlaces que se encuentran dentro de un prrafo adele estas lneas:
pa{
color: black;
background-color: #CCFF66;
padding-left: 2px;
padding-right: 2px;

Ejercicio 5: Controles de Bloque.
2 Al estilo para el elemento con id contenedor adele esta lnea:
#contenedor {
background: white url(imagenes/fondo.gif) no-repeat;
width: 800px;
3 Al estilo para el elemento con id seccion adele esta lnea:
#seccion {
padding: 20px;
padding-top: 90px;
width: 136px;

Ejercicio 6: Controles de Posicin.
2 Aade estas lneas al estilo para el elemento con id seccion:
#seccion {
padding: 20px;
padding-top: 90px;
width: 136px;
position: absolute;
top: 166px;
left: 533px;

Ejercicio 1:
phpMyAdmin.
bd_libreria.
5 Para crear una nueva tabla en la seccin Crear nueva tabla en la base de datos escribe Compras en
Nombre y 5 en Campos.
7 Rellena los datos de los campos de la tabla tal y como te pedamos en el ejercicio.
9 Haz clic en la pestaa Importar que encontrars en el men horizontal en la parte superior de la ventana:
10 En la siguiente ventana pulsa el botn Examinar y busca el archivo compras-latin1.txt que se encuentra
en la carpeta de ejerciciosdream/libreria.
11 El archivo se encuentra codificado en latin1 as que seleccionalo en la lista de Juego de caracteres del
archivo.

13 Asegrate de que se han introducido datos en la tabla pulsando la opcin Examinar de la tabla
Compras.

Ejercicio 1:
Apartado 1.
4 Abre el archivo usados.php.
5 Abre el panel Comportamientos del servidor (CTRL + F9) y haz doble clic sobre el elemento Juego de
registros listado_libros.
6 Modifica el Nombre listado_libros por libros_usados.
7 En Filtro selecciona el campo Usado.
8 En el desplegable de abajo, selecciona Valor introducido y escribe 1 en el cuadro de texto de su

derecha.
Debera quedarte algo como Filtro Usado = Valor introducio 1 .
Hemos creado un filtro para que se muestren aquellos registros con valor 1 en su campo Usado, sern
aquellos que estn usados.
9 Pulsa el botn Prueba para asegurarte y guarda los cambios haciendo clic en Aceptar para salir.
Dreamweaver lanzar la herramienta Buscar y Reemplazar para asegurarte de que ha cambiado el nombre
del juego de registros en el cdigo de la pgina, puedes pulsar el botn Buscar todos para asegurarte, pero
bastar con que cierres el cuadro de dilogo.
Apartado 2.
1 Debajo de la tabla del listado de registros crea una tabla con tres celdas, han de tener cada una un 33%
de ancho.
La primera debe tener el alineamiento a la izquierda, la segunda al centro y la tercera a la derecha.
2 Coloca el cursor en la primera celda de la nueva tabla.
3 Haz clic en la opcin Mover a la pgina anterior del desplegable de opcin de paginacin:

4 En la celda se aadir el texto Anterior.
5 Selecciona el texto Anterior, vamos a ocultarlo en la primera pgina.
6 Haz clic en la opcin Mostrar si no es la primera pgina en el listado de mostrar regin en la barra
Datos.
Apartado3.
1 Coloca el cursor en la celda central de la nueva tabla.
2 Haz clic en la opcin Registro final del listado de opciones de recuento de registros en la barra Datos.
3 Se aadir el texto {libros_nuevos.LastRecord} a la celda.
4 Escribe de a su derecha.
5 Ahora selecciona la opcin Total de registros en el listado de recuento de registros anterior.
6 Deber quedarte algo como: {libros_nuevos.LastRecord} de {libros_nuevos.TotalRecords}
Apartado4.
1 Coloca el cursor en la tercera celda.

2 Ahora selecciona la opcin Mover a la siguiente pgina.
3 En la celda se aadir el texto Siguiente.
4 Ahora selecciona el texto Siguiente, lo vamos a ocultar en la ltima pgina.
5 Selecciona la opcin Mostrar si no es la ltima pgina del listado de mostrar regin anterior.
Apartado5.
1 Selecciona el elemento {libros_nuevos.Titulo} dentro del listado de registros.
Ejercicio 2:
Apartado 1.
1 Abre el archivo ofertas.php.
2 Abre el panel Comportamientos del servidor (CTRL + F9) y haz doble clic sobre el elemento Juego de
registros (listado_libros).
3 Modifica el Nombre listado_libros por libros_mas_baratos.
4 En Ordenar selecciona el campo Precio.
5 En el desplegable de la derecha selecciona Ascendente.
7 Dreamweaver lanzar la herramienta Buscar y Reemplazar, cirrala.
8 En el panel Comportamientos del servidor haz doble clic sobre el elemento Repetir regin
(libros_mas_baratos).
9 Modifica el 7 y escribe 8 en su lugar.

Hemos creado un listado que no utiliza filtros, pero muestra los 8 primeros registros ms baratos.
Apartado 2.
1 Selecciona el elemento {libros_nuevos.Titulo} del listado de registros.
Hemos creado un enlace a una pgina llamada comprar.php y le hemos pasado un parmetro id con el
valor del Id del registro que se muestre.
Por lo que en cada ttulo de cada libro habr un enlace diferente que apuntar a la pgina comprar.php
pasndole el cdigo del libro elegido.

Ejercicio 1:
Apartado 1 Abre el sitio libreria y sigue las instrucciones del enunciado para modificar el archivo
admin.php.
Apartado 2.
Plantillas).
2 Gurdalo como listado_entradas.php.
3 En la nica regin editable debers escribir un prrafo de clase titulo que diga Selecciona una entrada a
modificar o eliminar.
Crearemos un recordset para cargar los titulos y fechas de las entradas.
listado_entradas.
10 Debajo del prrafo que hemos aadido inserta una tabla con 10 pxeles de relleno de celda.
11 Seleciona la primera fila y aplcale el estilo borde_inferior.
12 Escribe en la primera celda de la primera fila Ttulo en negrita.
13 Escribe en la segunda celda de la primera fila Fecha en negrita.

14 Arrastra el elemento Titulo a la primera celda de la segunda fila.
15 Arrastra el elemento Fecha a la segunda celda de la segunda fila y ponlo en cursiva.
16 En la tercera celda de la segunda fila inserta la imagen imagenes/edit.png.
Debers enlazarla a modifica_entrada.php?id=
modifica_entrada.php?id=<?php echo $row_listado_entradas['Id']; ?>
17 En la cuarta celda de la segunda fila inserta la imagen imagenes/edit.png.
Debers enlazarla a elimina_entrada.php?id=
elimina_entrada.php?id=<?php echo $row_listado_entradas['Id']; ?>
Apartado 3.
2 Luego coloca el cursor al final del contenido editable e introduce una barra de navegacin de registros
.
Apartado 4.
Plantillas).
2 Gurdalo como listado_categorias.php.
3 En la nica regin editable debers escribir un prrafo de clase titulo que diga Selecciona una categora
a modificar o eliminar

Crearemos un recordset para cargar los nombres e ids de categoras.
listado_categorias.
40 Debajo del prrafo que hemos aadido debers insertar una tabla con 10 pxeles de relleno de celda.
Seleciona la primera fila y aplicale el estilo borde_inferior.
11 Escribe en la primera celda de la primera fila Nombre en negrita.
12 Arrastra el elemento Titulo a la primera celda de la segunda fila.
13 En la segunda celda de la segunda fila inserta la imagen imagenes/edit.png.
Debers enlazarla a modifica_categoria.php?id=
modifica_categoria.php?id=<?php echo $row_listado_categorias['Id']; ?>
14 En la tercera celda de la segunda fila inserta la imagen imagenes/edit.png.
Debers enlazarla a elimina_categoria.php?id=
elimina_categoria.php?id=<?php echo $row_listado_categorias['Id']; ?>
Apartado 5.

2 Luego coloca el cursor al final del contenido editable e introduce una barra de navegacin de registros
.
Ejercicio 2:
Apartado 1.
Plantillas).
2 Gurdalo como modifica_entrada.php.
Crearemos un recordset para cargar la entrada que queremos modificar.
detalle_entrada.
9 Ahora visualizaremos la entrada para asegurarnos de que es la que queremos borrar.
Escribe un prrafo de clase titulo que contenga el Ttulo de la entrada.
Arrstralo desde el panel Vnculos.
Luego arrastra el elemento Texto bajo el Ttulo, este no deber estar incluido en un prrafo.
Finalmente inserta una regla horizontal (Insertar HTML Regla Horizotal).

11 En el cuadro de dilogo que se abrir debers seleccionar la tabla a modificar categorias.
14 El campo Fecha debe enviarse como Fecha.
15 El campo Texto debe mostrarse como un rea de texto.
16 El campo Id_Categoria deber mostrarse como un Men.
17 Pulsa Aceptar.
Ahora volveremos a la vista de Cdigo para modificar el elemento del formulario que se encarga de enviar el
Id_Categoria.
Vers un bloque de cdigo como el siguiente:
<option value="menuitem1" <?php if (!(strcmp("menuitem1", <?php echo

$row_Recordset1['Id_Categoria']; ?>))) {echo "SELECTED";} ?>>[ Etiqueta ]</option>
<option value="menuitem2" <?php if (!(strcmp("menuitem2", <?php echo

$row_Recordset1['Id_Categoria']; ?>))) {echo "SELECTED";} ?>>[ Etiqueta ]</option>
</select>
Vamos a modificarlo para que muestre los nombres de las categoras.
Antes que nada necesitaremos crear un juego de registros para poder cargarlas.
listado_categorias.
22 En Ordenar selecciona Nombre Ascendente.
24 Modifica el bloque de cdigo anterior para que muestre lo siguiente:
<option value="<?php echo $row_listado_categorias['Id']; ?>" <?php if

(!(strcmp($row_listado_categorias['Id'], $row_detalle_entrada['Id_Categoria']))) {echo "SELECTED";} ?>>
<?php echo $row_listado_categorias['Nombre']; ?>
</option>
</select>
25 Selecciona toda la etiqueta option y haz que se repita para todos los registros de categoras.
Utiliza la opcin Repite Regin.
Apartado 2.
Plantillas).
2 Gurdalo como modifica_categoria.php.
3 En la nica regin editable escribe un prrafo que diga Modifica el nombre de la categora:.
Crearemos un recordset para cargar la categora que queremos modificar.
detalle_categoria.
11 En el cuadro de dilogo que se abrir debers seleccionar la tabla a modificar categorias.

14 Pulsa Aceptar el cuadro de dilogo.
Ejercicio 3:
Apartado 1.
Plantillas).
2 Gurdalo como elimina_entrada.php.
Crearemos un recordset para cargar la entrada que queremos eliminar.
detalle_entrada.
9 En la nica regin editable escribe un prrafo de clase titulo que muestre el Ttulo de la entrada.
Arrstralo desde el panel Vinculaciones.
Luego debers aadir el elemento Texto bajo el Titulo, pero sin embargo, este no debe estar en un prrafo.
Aade un nuevo prrafo a continuacin de clase datos que muestre el elemento Fecha.
Inserta una regla horizontal (Insertar HTML Regla horizontal).
Y finalmente escribe un ltimo prrafo que diga Si eliminas una entrada, sus comentarios tambin se
eliminarn.

11 En l crea un campo oculto (Insertar Formulario Campo Oculto).
12 En el panel Propiedades dale el nombre campoOculto al campo que acabamos de crear.
campoOculto.
Apartado 2.
Plantillas).
2 Gurdalo como elimina_categoria.php.
Crearemos un recordset para cargar la categora que queremos eliminar.
detalle_categoria.
9 En la nica regin editable debers escribir un prrafo de clase titulo que diga Eliminar categoria.
Luego inserta un nuevo prrafo en el que se pueda leer Vas a eliminar la categora:
Arrastra a continuacin el Nombre de la categora desde el panel Vinculaciones. Ponla en cursiva y

negrita.

Inserta una regla horizontal (Insertar HTML Regla horizontal).
Y finalmente aade un ltimo prrafo que diga Si eliminas una categora, sus entradas y comentarios
tambin se eliminarn.
11 En l crearemos un campo oculto (Insertar Formulario Campo Oculto).
12 En el panel Propiedades deberemos darle el nombre campoOculto al campo que acabamos de crear.
campoOculto.
Ejercicio 4:
Apartado 1.
1 Abre el documento elimina_categoria.php.
2 Selecciona la opcin Restringir acceso a pgina .
La pgina ahora estar protegida.
4 Repite los pasos 1 y 3 para los documentos:
elimina_entrada.php

Apartado 2.
Para terminar crearemos un enlace Desconectar en las pginas para que el usuario pueda terminar la
sesin.
1 Abre el documento elimina_categoria.php.
2 Selecciona la opcin Desconectar usuario .
3 En el cuadro de dilogo que se abrir selecciona la opcin Crear nuevo vnculo: "Desconectar".
4 Pulsa Aceptar.
5 Coloca el enlace en la parte superior de la regin editable y dentro de un prrafo de clase datos.
7 Repite los pasos 1 a 6 para los documentos:
elimina_entrada.php

Ejercicio 1: Blog.
Apartado 1.
2 Abre el sitio blog.
3 Crea un nuevo archivo de XSLT (fragmento) haciendo clic en Archivo Nuevo, Categora Pgina en
blanco, XSLT (fragmento).
4 Se abrir un cuadro de dilogo, selecciona la opcin Adjuntar un archivo remoto en Internet.
5 En la caja de texto escribe http://del.icio.us/rss/aulaClic.
6 Pulsa Aceptar.
7 Guarda el archivo como enlaces_rss.xsl.
8 Ve a la vista de Cdigo y escribe lo siguiente:
<p class="titulo">Office</p>
<blockquote>
</blockquote>
<p class="titulo">Otros</p>
<blockquote>
</blockquote>
9 Coloca el cursor en el primer blockquote y arrastra un elemento rss:link (hijo del elemento rss:item) a un
nuevo prrafo.
10 Pulsa el botn a la derecha del campo Vnculo del panel Propiedades.
11 En el cuadro de dilogo que se abrir selecciona Fuentes de datos.

12 Selecciona el elemento rss:link que se encuentra bajo el elemento rss:item y pulsa Aceptar.
13 Selecciona el prrafo completo y haz clic en la opcin Regin condicional de la barra de XSLT.
14 En el cuadro de dilogo que se abrir escribe dc:subject = "office".
15 Pulsa Aceptar.
16 Selecciona el bloque xsl:if y pulsa el botn Repetir regin de la barra de XSLT.
17 En el cuadro de dilogo que se abrir selecciona el elemento rss:item.
18 Pulsa Aceptar.
19 En la vista de Cdigo, bajo la lnea de xsl:for-each escribe:
Si has seguido bien los pasos debers tener algo como:
<p class="titulo">Office</p>
<blockquote>
<xsl:for-each select="rdf:RDF/rss:item">
<xsl:if test="dc:subject="office"">
</xsl:if>
</xsl:for-each>
</blockquote>
20 Repite los pasos 9 a 19 para el segundo blockquote, la condicin en este caso debe ser dc:subject !=
"office".
Deber quedarte algo como:
<p class="titulo">Otros</p>
<blockquote>
<xsl:for-each select="rdf:RDF/rss:item">

<xsl:if test="dc:subject!="office"">
</xsl:if>
</xsl:for-each>
</blockquote>
21 Abre un archivo dinmico nuevo basado en la plantilla blog.dwt.php (Archivo Nuevo, pestaa
Plantillas).
22 Gurdalo como enlaces.php.
23 Coloca el cursor en la regin editable y pulsa el botn Transformacin XSL de la barra Datos.
24 En el cuadro de dilogo que se abrir selecciona el archivo enlaces_rss.xsl en Archivo XSLT.
25 Pulsa Aceptar.
26 Hemos terminado, pulsa la tecla F12 para ver una previsualizacin.

Ejercicio 1: Insertar contenido XML.
Apartado 1.
2 Abre el archivo index.htm que encontrars en la carpeta ajax de la carpeta de ejercicios.
3 Sita el cursor bajo el encabezado de ndice de cursos.
4 Haz clic en Insertar Spry Conjunto de datos XML de Spry
5 En el cuadro de dilogo que se abrir haz clic en el botn Examinar y selecciona el archivo
cursos_aulaclic.xml que se encuentra en la misma carpeta.
6 Pulsa el botn Obtener esquema.
7 Selecciona el elemento item.
8 Pulsa el botn Aceptar para crear el conjunto de datos.
9 Selecciona el prrafo que se encuentra bajo el rtulo de encabezado.
10 Haz clic en Insertar Spry Regin de Spry
11 Activa la opcin Reeplazar seleccin para sustituir el prrafo con la etiqueta div que vamos a insertar.
12 Pulsa Aceptar para seguir.
13 Arrastra el elemento title al contendor que se ha creado.
14 Con el elemento title seleccionado ves al panel Propiedades y pulsa el botn en el campo Vnculo
para buscar el enlace.
15 Activa la opcin Fuente de datos en el cuadro de dilogo.
16 Selecciona el elemento guid que es el que contiene la URL que buscamos y pulsa Aceptar.
17 Todava con el elemento title seleccionado vamos a hacer clic en Insertar Spry Regin de Spry
para crear la repeticin que buscamos.
18 Sin cambiar nada del nuevo cuadro de dilogo pulsa Aceptar.
19 Hemos terminado, pulsa la tecla F12 para ver una previsualizacin.
Repite todos estos pasos para el archivo articulos_aulaclic.xml y colocalos bajo la cabecera con el mismo
nombre.

Recuerda que debers crear un nuevo conjunto de datos y utilizarla para la regin de Spry y la repeticin
de Spry!

Ejercicio 1:
Apartado 1.
4 Ve a la vista de Cdigo.
5 Localiza la tabla que muestra los registros.
6 Modifcala para que se pueda leer:
<tr>
<th onclick="misLibros.sort('isbn', 'toggle');">ISBN</th>
<th onclick="misLibros.sort('titulo', 'toggle');">Ttulo</th>
<th onclick="misLibros.sort('autor', 'toggle');">Autor</th>
<th onclick="misLibros.sort('precio', 'toggle');">Precio</th>
</tr>
<tr spry:repeat="misLibros">
<td>{isbn}</td>
<td>{titulo}</td>
<td>{autor}</td>
<td>{precio}</td>
</tr>
</table>
7 Aadiremos las definiciones de los tipos de columna en la parte superior (donde hemos declarado el
dataset) para que no haya problemas a la hora de ordenar por precio.

misLibros.setColumnType('@id', 'number');
misLibros.setColumnType('precio', 'number');
8 Pulsa la tecla F12 para ver la pgina en el servidor de pruebas.
Apartado 2.
Vamos a aadir los estilos.
1 Modifica de nuevo las celdas de la cabecera para que sean como estas:
<th onclick="misLibros.sort('isbn', 'toggle');" spry:hover="destacado">ISBN</th>
<th onclick="misLibros.sort('titulo', 'toggle');" spry:hover="destacado">Ttulo</th>
<th onclick="misLibros.sort('autor', 'toggle');" spry:hover="destacado">Autor</th>
<th onclick="misLibros.sort('precio', 'toggle');" spry:hover="destacado">Precio</th>
2 Abre el archivo estilo_libreria.css y adele esta clase:
.destacado {color:#E35331; cursor:pointer;}
3 Guarda todos los documentos.
4 Pulsa la tecla F12 para ver la pgina en el servidor de pruebas.
Vers como al pasar el ratn sobre las cabeceras stas cambian de color.
Al hacer clic los registros se ordenarn.

Ejercicio 1:
Apartado 1.
2 Abre el sitio animales.
3 Abre el archivo consultas.htm.
4 Selecciona el campo email y pulsa SUPRIMIR para borrarlo.
5 Inserta un campo de texto de validacin desde Insertar Spry Campo de texto de validacin de
Spry.
6 Selecciona la opcin No hay etiqueta de rtulo en el siguiente cuadro de dilogo para que se cree slo
el control y pulsa Aceptar.
7 En el panel Propiedades selecciona Correo electrnico en el desplegable Tipo.
8 Marca la opcin Validar al Desenfocar.
Apartado 2.
1 Selecciona el campo animal y pulsa SUPRIMIR para borrarlo.
2 Inserta un campo desplegable de validacin desde Insertar Spry Seleccin de validacin de

Spry.
7 En el panel Propiedades deselecciona la opcin Valor en blanco.
8 Marca la opcin Valor no vlido -1.
10 Selecciona el control desplegable para modificar sus valores.
11 En el panel Propiedades haz clic sobre el botn Valores de lista y rellena el cuadro de dilogo para
que se muestre de la siguiente forma:

Apartado 3.
1 Selecciona el campo consulta y pulsa SUPRIMIR para borrarlo.
2 Inserta un rea de texto de validacin desde Insertar Spry rera de texto de validacin de Spry.
4 En el panel Propiedades escribe 100 en el campo Car. mx.
6 En el campo Sugerencia escribe Escribe aqu tu consulta.
Apartado 4.
1 Selecciona el campo nombr y pulsa SUPRIMIR para borrarlo.
2 Inserta un campo de texto de validacin desde Insertar Spry Campo de texto de validacin de
Spry.
4 En el panel Propiedades asegrate de que la opcin Obligatorio est marcada.
7 Pulsa F12 para visualizar los cambios.

Ejercicio 1:
Apartado 1.
2 Abre el archivo index.htm que se encuentra en la carpeta ajax.
3 Coloca el cursor antes de ndice de cursos y pulsa Enter.
4 Haz clic en Insertar Spry Paneles en Fichas de Spry.
5 Haz clic en el encabezado de la Ficha 1, modifica el nombre para que se lea Cursos.
6 Haz clic en el encabezado de la Ficha 2, modifica el nombre para que se lea Artculos.
Ahora rellenaremos el contenido de las fichas.
7 Selecciona la etiqueta DIV completa del listado de cursos desde la vista de Cdigo.
8 Pulsa CTRL + X para cortarla. Vuelve a la vista de Diseo y pgala utilizando CTRL + V en el lugar del
contenido de la ficha de Cursos.
9 Cambia la vista de las fichas para que se muestre la pestaa Artculos colocando el ratn encima de ella
y pulsando el botn con forma de ojo que aparecer:
10 Repite los pasos 7 y 8 para el listado de artculos.

Pruebasevaluativas.
Soluciones

Pruebas evaluativas. Soluciones
Estas son las soluciones a las evaluacin de la unidad.

Debes de acertar por lo menos la mitad.
1. Las pginas web pueden tener la extensin HTML.

a) Verdadero.
b) Falso.
2. Los servidores gratuitos son recomendables para alojar pginas de

empresas.
a) Verdadero.
b) Falso.
3. En Internet pueden existir pginas con el mismo nombre pero distinta

terminacin.
a) Verdadero.
b) Falso.
4. En Dreamweaver no pueden utilizarse combinaciones de teclas.

a) Verdadero.
b) Falso.
5. El botn significa...
a) Abrir.
b) Nuevo.
c) Cerrar.
a) Abrir.
b) Nuevo.
c) Cerrar.
a) Abrir.
b) Nuevo.
c) Cerrar.

8. Si hacemos clic sobre el botn Nuevo de la barra de herramientas:

a) Aparecer directamente un nuevo documento vaco en pantalla.
b) Aparecer una nueva ventana en la que hay que elegir el tipo de

documento que se desea crear.
9. Si se pulsa sobre el icono

a) Se guardarn todos los documentos modificados y los nuevos.
b) Se guardarn solamente todos los nuevos documentos.
c) Se guardarn solamente todos los documentos modificados.
10. La combinacin de teclas Ctrl + O sirve para....

a) Crear un nuevo documento.
b) Abrir un documento.
Volver a la evaluacin sin resolver Volver a la teora


1. Los botones para minimizar y maximizar la ventana del programa

Dreamweaver se encuentran en la Barra Insertar.
a) Verdadero.
b) Falso.
2. Las vistas del documento pueden cambiarse a travs del panel Propiedades.
a) Verdadero.
b) Falso.
3. La pestaa Favoritos en la barra Insertar puede personalizarse para mostrar

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

a) Verdadero.
b) Falso.
5. La apariencia y opciones de un inspector cambian dependiendo del objeto

seleccionado.
a) Verdadero.
b) Falso.
6. Los paneles e inspectores se muestran y ocultan a travs del men ...

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

a) se puede cambiar las vistas del documento.
b) los botones estn clasificados segn su categora.
c) se configuran las propiedades del objeto seleccionado.

8. Se puede trabajar con el editor visual mediante las vistas...

a) diseo.
b) cdigo.
c) las dos respuestas anteriores son correctas.
9. El icono sirve para ...

a) pasar a la vista cdigo.
b) pasar a la vista cdigo y diseo.
c) pasar a la vista diseo.
d) insertar una imagen.
10. La vista diseo...

a) es la vista predeterminada.
b) es la que se suele utilizar habitualmente.
c) las dos afirmaciones anteriores son verdaderas.
d) las tres afirmaciones anteriores son falsas.


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

a) Verdadero.
b) Falso.
2. El botn sirve para cambiar la vista del sitio.

a) Verdadero.
b) Falso.
3. El botn sirve para ver el mapa del Sitio.

a) Verdadero.
b) Falso.
4. Si los archivos se mueven de una carpeta a otra desde fuera de

Dreamweaver, las pginas se mostrarn correctamente.
a) Verdadero.
b) Falso.
5. No importa que las pginas sean voluminosas y ocupen mucha memoria.

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

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

a) Insertar una barra de mens.
b) Establecer una imagen como fondo, que no se mostrar en el navegador.
c) Buscar imgenes en Internet, al pulsar sobre ella.

a) Para crear un sitio nuevo.
b) Para cambiar la vista del sitio.
c) Para elegir un color.

9. Los colores seguros para web son...

a) Los colores que no afectan a la vista.
b) Imgenes de fondo para los documentos.
c) Los colores que se muestran de la misma forma en Microsoft

Internet Explorer y en Netscape Navigator.
10. Los colores...

a) Se representan con un nmero hexadecimal.
b) Pueden personalizarse.

Unidad 4. El texto

1. Las caractersticas del texto no pueden modificarse a travs del

inspector de propiedades.
a) Verdadero.
b) Falso.
2. Es posible cambiar la alineacin del texto.

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

a) Verdadero.
b) Falso.
4. El tipo de nmeros o vietas de las listas pueden modificarse.

a) Verdadero.
b) Falso.
5. En los estilos CSS no hay actualizacin automtica.

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

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

a) Aparecen conjuntos de fuentes en lugar de una sola.
b) La fuente tiene que ser descargada desde Internet.
c) La fuente tiene que ser de Macromeda.

a) Para crear una lista ordenada.
b) Para crear una lista desordenada.
c) Para aplicar sangra.

9. Los estilos CSS...

a) Son aplicables a prrafos.
b) Son aplicables a palabras seleccionadas.
10. Las hojas de estilo...

a) No son de actualizacin automtica.
b) Permiten aplicar un estilo sobre todas las etiquetas de un mismo tipo.


1. Un hiperenlace es lo mismo que un hipervnculo, un vnculo, o un

enlace.
a) Verdadero.
b) Falso.
2. Es posible asignar un vnculo a parte de una imagen.

a) Verdadero.
b) Falso.
3. Los vnculos vacos no existen.

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

navegador.
a) Verdadero.
b) Falso.
5. No es posible especificar vnculos a direcciones de correo electrnico

desde Dreamweaver.
a) Verdadero.
b) Falso.
6. El cursor cambia de forma al situarse encima del vnculo en el

navegador.
a) Verdadero.
b) Falso.
7. Cuando el vnculo est definido sobre una imagen.

a) sta adquiere un tono azulado.
b) Aparecen una serie de puntitos en el borde al pulsar sobre ella.
c) Siempre aparece el borde azul alrededor de ella.

8. El vnculo vaco...
a) No necesita que se establezca nada como vnculo.
b) Tiene un formato diferente al del resto de vnculos.
c) Necesita que se inserte el smbolo # como vnculo.
9. Es posible especificar el color de...

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

a) Verdadero.
b) Falso.

Unidad 6. Imgenes

1. Dentro de Dreamweaver puede modificarse el tamao de las

imgenes.
a) Verdadero.
b) Falso.
2. Pueden crearse vnculos y comportamientos sobre partes de una

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

documentos HTML.
a) Verdadero.
b) Falso.
5. Los rollovers son imgenes con extensin SWF.

a) Verdadero.
b) Falso.
6. Es posible probar el funcionamiento del botn Flash desde

Dreamweaver.
a) Verdadero.
b) Falso.
7. Es preferible que la opcin "Carga previa de imagen de sustitucin" ...

a) Slo est desactivada para los rollovers.
b) Est desactivada.
c) Est activada.

8. El texto Flash ...

a) Es similar a un rollover.
b) Hace que se intercambie el color del texto.

9. La barra de navegacin ...
a) ...ha de crearse a partir de botones Flash.
b) ...no permite identificar cual de los vnculos est activo.
10. Los botones de la barra de nav egacin...

a) Pueden aparecer de forma vertical.
b) Pueden aparecer de forma horizontal.

Unidad 7. Tablas

1. Las tablas estn formadas por un conjunto de celdas, distribuidas

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

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

a) Verdadero.
b) Falso.
4. Puede establecerse la alineacin del contenido de la celda de forma

horizontal y vertical.
a) Verdadero.
b) Falso.
5. No es posible insertar tablas dentro de las celdas de otras tablas.

a) Verdadero.
b) Falso.
6. El modo de tablas expandidas se utiliza para dibujar pginas con gran

volumen de contenido.
a) Verdadero.
b) Falso.

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

a) Slo es posible combinar celdas contiguas.
b) La combinacin da como resultado otra celda.

9. A la hora de insertar filas ...

a) ...pueden insertarse debajo de la seleccin.
b) ...pueden insertarse a la derecha de la seleccin.
10. Las colum nas de una tabla ...

a) No pueden eliminarse.
b) Estn formadas por celdas.

Unidad 8. Marcos

1. Los marcos o frames sirven para distribuir mejor los datos de las
pginas.
a) Verdadero.
b) Falso.
2. Los marcos no permiten mejorar la funcionalidad ni la apariencia de las

pginas.
a) Verdadero.
b) Falso.
3. Cada uno de los marcos de una pgina contiene un documento HTML

individual.
a) Verdadero.
b) Falso.
4. Es posible editar los documentos contenidos en los marcos desde la pgina

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

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

a) ...es la pgina de marcos.
b) ...es el marco sobre el que se han insertado el resto de marcos.
c) Siempre es el marco de la izquierda

8. El botn ...
a) Slo se utiliza para guardar los documentos contenidos en los marcos.
b) No permite guardar los documentos contenidos en los marcos.
c) No es conveniente usarlo para guardar por primera vez los marcos.
9. Si la opcin "Mismo tamao" est activa ...

a) ...indica que los distintos marcos de la pgina tienen el mismo tamao .
b) ...indica que los usuarios no podrn variar las medidas del marco desde el
navegador.
c) ...indica que la pgina de marcos se visualizar en el navegador con el

mismo tamao que el del documento en Dreamweaver.
10. Para cada uno de los marcos ...

a) Puede indicarse si aparecern o no las barras de desplazamiento cuando
el documento del marco no pueda visualizarse completamente.
b) Puede indicarse un color de borde diferente.


1. Los formularios no pueden utilizarse para conocer las opiniones, dudas, y

otra serie de datos sobre los usuarios.
a) Verdadero.
b) Falso.
2. Para que un formulario funcione correctamente es necesario programar en

algn lenguaje de programacin, como puede ser VBScript.
a) Verdadero.
b) Falso.
3. El rea de texto permite escribir varias lneas de texto.

a) Verdadero.
b) Falso.
4. Las casillas de verificacin siempre tienen que estar desactivadas

inicialmente.
a) Verdadero.
b) Falso.
5. Las etiquetas se utilizan para ponerle nombres al resto de elementos de

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

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

a) ...slo permite escribir una lnea al usuario.
b) ...puede ser definido como contrasea.

8. Si existen varios botones de opcin en un mismo formulario ...

a) Se llamarn casillas de verificacin.
b) Slo puede haber uno activado.
c) Cada uno ser de un color diferente.
9. Un botn ...
a) ...puede tener asignada la accin "Enviar formulario".
b) ...puede tener asignada la accin "Restablecer formulario".
10. La validacin de formularios ...

a) Hace que Javascript valide los valores introducidos en el formulario antes
de que se enve.
b) Consiste en comprobar si las etiquetas corresponden a los elementos

adecuados.


1. Las pelculas Flash son animaciones.

a) Verdadero.
b) Falso.
2. El botn est en la pestaa de Formulario, en el panel de Insertar.

a) Verdadero.
b) Falso.
3. La opcin Bucle indica que al finalizar la pelcula, sta volver a comenzar

desde el principio.
a) Verdadero.
b) Falso.
4. Al incluir un archivo de audio, es preferible que no ocupe mucho espacio,

aunque esto implique que sea de mala calidad.
a) Verdadero.
b) Falso.
5. Para que no se muestren los controles de audio, los campos Al y An deben

valer cero.
a) Verdadero.
b) Falso.
6. Los sonidos se reproducen automticamente al cargarse la pgina.

a) Verdadero.
b) Falso.
7. Todos los objetos insertados a travs de la opcin Plug-in...

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

apropiado para reproducirlos.
c) ...son vdeos de buena calidad.

8. El campo URL plg ...

a) ...es un vnculo a un archivo insertado como plug-in.
b) ...abre la pgina oficial de plug-ins de Internet.
c) ...permite establecer la pgina en la que el usuario puede encontrar el

plug-in.
9. La lnea de cdigo autostart="false" ...

a) ...hace que el archivo de vdeo no se reproduzca automticamente.
b) ...hace que el archivo de audio no se reproduzca automticamente.
10. La lnea de cdigo loop="true" ...

a) Puede insertarse desde el inspector de propiedades de un archivo de
audio.
b) Hace que la reproduccin se repita.


1. Las plantillas son archivos con la extensin DWT que se guardan en el

sitio web.
a) Verdadero.
b) Falso.
2. Cuando se modifica el diseo de una plantilla, no se pueden actualizan

todas las pginas basadas en ella.
a) Verdadero.
b) Falso.
3. No es posible modificar las propiedades de una pgina que est basada en

una plantilla, a excepcin del ttulo.
a) Verdadero.
b) Falso.
4. Las plantillas slo pueden crearse desde cero.

a) Verdadero.
b) Falso.
5. Una forma de crear una plantilla desde cero es a travs del panel Activos.
a) Verdadero.
b) Falso.
6. Todos los elementos de una plantilla estn bloqueados por defecto.

a) Verdadero.
b) Falso.

a) ...abrir todas las plantillas en Dreamweaver.
b) ...elegir una imagen de fondo para la plantilla.
c) ...crear una nueva plantilla.


a) ...poder trabajar con las plantillas dentro del panel Activos.
b) ...insertar una regin editable en la plantilla.
c) ...abrir el panel Activos.
9. Las zonas editables...

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

plantilla.
10. Al m odificar una plantilla...

a) Las pginas que se basan en ella no se actualizarn automticamente.
b) Las pginas que se basan en ella se actualizarn automticamente.


1. El lenguaje HTML est basado en etiquetas.

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

elemento sobre el que actan.
a) Verdadero.
b) Falso.
3. Un INTRO dentro del cdigo HTML equivale a la etiqueta <BR>.

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

de izquierda a derecha.
a) Verdadero.
b) Falso.
5. A travs del editor grfico es posible ...

a) ...ver el cdigo HTML.
b) ...utilizar el mecanismo de completar etiquetas.
c) ...ver si hay algunos errores en el cdigo HTML.
6. Durante la bsqueda y reemplazo...

a) ...aparece la lista de todas la imgenes del sitio web.
b) ...slo es posible buscar dentro del documento actual.
c) ...no es posible deshacer los cambios en los documentos que estn

cerrados.
7. Para reemplazar una imagen por otra en un nico documento ...

a) ...es indispensable utilizar la herramienta de Buscar y reemplazar.
b) ...resulta ms sencillo abrir ese documento para reemplazarla, aunque

puede ser necesario utilizar la herramienta Buscar y reemplazar para saber qu
documento es el que contiene dicha imagen.
c) ....hay que buscar Texto.

8. El Inspector de cdigo ...

a) ...muestra el cdigo HTML de la misma forma que lo hace la vista Diseo.
b) ...no puede situarse en cualquier parte de la pantalla.
9. La herramienta de Buscar y reemplazar ...

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

dejar un espacio en blanco.
a) Verdadero.
b) Falso.


1. Para crear una marquesina hay que insertar las etiquetas

<MARQUEE> y </MARQUEE> en el cdigo.
a) Verdadero.
b) Falso.
2. La marquesina se desplaza por defecto de arriba a abajo.

a) Verdadero.
b) Falso.
3. La fecha de ltima modificacin puede contener el da de la semana.

a) Verdadero.
b) Falso.
4. La fecha de ltima modificacin siempre se actualiza automticamente al

guardar el documento.
a) Verdadero.
b) Falso.
5. En el caso de que la pgina no se actualice hasta que pase cierto tiempo...

a) ...es preferible incluir la fecha de modificacin.
b) ...es preferible no incluir la fecha de modificacin.
c) ...es preferible incluir el da de la semana en la fecha de ltima

modificacin.
6. La regla horizontal ...

a) ...slo puede insertarse a travs del cdigo.
b) ...suele utilizarse para separar secciones dentro de una misma pgina.
c) Ninguna de las opciones anteriores.
7. Visualizar el cdigo fuente de una pgina de Internet resulta til para ...
a) ...ver cmo ha sido estructurada dicha pgina.
b) ...crear una animacin Flash similar a la que se haya utilizado en ella.

8. De las reglas horizontales es posible ...

a) ...modificar su altura.
b) ...indicar si aparecern sombreadas o no.
9. El cdigo JavaScript ...

a) ...puede ser generado automticamente por Dreamweaver al insertar un
comportamiento.
b) ...necesita que se inserte la etiqueta <SCRIPT language=JavaScript>.
10. Cmo podemos ver el cdigo fuente de una pgina desde el navegador?.
a) Mediante el men contextual haciendo clic con el botn derecho y
seleccionando Ver cdigo fuente.
b) Accediendo por el men Ver - Cdigo fuente.

Unidad 14. Capas

1. Las capas pueden sitarse en cualquier parte de

la pgina.
a) Verdadero.
b) Falso.
2. Dentro del recuadro de la capa es posible insertar

texto e imgenes.
a) Verdadero.
b) Falso.
3. Las capas no pueden solaparse entre s.

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

a) Verdadero.
b) Falso.
5. El atributo Indice Z significa...

a) El orden en el que han sido insertadas las capas.
b) El nmero de orden de colocacin de las capas.
c) El nmero de capas que hay en un documento.
6. La visibilidad Hidden indica...

a) Que la capa es visible.
b) Que la capa es visible aunque haya otra capa

encima de ella.
c) Que la capa est oculta.
7. Las capas...
a) ...pueden tener color de fondo.
b) ...no pueden tener una imagen de fondo.
c) ...nunca pueden estar ocultas.

8. En el panel Capas...
a) ...puede establecerse la visibilidad de la capa.
b) ...puede establecerse el ndice Z de la capa.
9. Una capa...
a) ...no puede contener animaciones Flash.
b) ...solapar a aquellas capas cuyo ndice Z sea

mayor que el suyo.
10. El ID de capa es el nombre de la capa.

a) Verdadero.
b) Falso.


1. Los comportamientos son acciones que suceden cuando los usuarios

realizan algn evento sobre un objeto.
a) Verdadero.
b) Falso.
2. Los comportamientos existen como cdigo HTML.

a) Verdadero.
b) Falso.
3. Es necesario escribir cdigo JavaScript para programar los

comportamientos.
a) Verdadero.
b) Falso.
4. El botn seala un nuevo Comportamiento en el panel Comportamientos.

a) Verdadero.
b) Falso.
5. Algunos comportamientos no funcionan para algunos navegadores, por lo

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

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

b) ...mostrar capa.
c) ...cuando el ratn est sobre.

8. El evento onclick significa...

b) ...cerrar la ventana del navegador.
c) ...cuando el ratn est sobre
9. Utilizando los comportamientos es posible hacer...

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

una imagen.
10. La lnea JavaScript "window.close();" permite.

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

sobre un objeto determinado.


1. Es aconsejable asociar el comportamiento de mostrar mensajes

emergentes cuando se produzca el evento...
a) onLoad.
b) onClick.
2. Cuando cambiamos el texto de la barra de estado tenemos que tener en

cuenta que al abandonar el elemento que lo ejecuta habr que restaurar el
contenido de la barra, utilizaremos el evento...
a) onMouseOut.
b) onMouseUp.
3. Para que un mensaje en la barra de estado se muestre en la pgina

completa habr que...
a) asociarlo al evento onLoad del body.
b) asociarlo al evento onMouseOver del body.

4. Cargar imgenes previamente a la carga completa del documento es muy
til excepto cuando las imgenes pesan demasiado o son muchas.
a) Verdadero.
b) Falso.
5. Asociaremos el comportamiento de la carga previa de imgenes al evento...
a) onClick del body.
b) onLoad del body.

6. Si el usuario no tiene instalado un plug-in podemos redirigirlo utilizando el
comportamiento Comprobar Navegador.
a) Verdadero.
b) Falso.
7. Si utilizamos el comportamiento de abrir ventana del navegador es posible
que no funcione si...
a) el usuario tiene un bloqueador de pop-ups.
b) el usuario tiene el javascript desactivado.

8. Los navegadores Internet Explorer y Mozilla Firefox siempre muestran la
informacin contenida en las pginas web de forma idntica.
a) Verdadero.
b) Falso.

9. Es posible asociar un accin javascript a los siguientes elementos:

a) una imagen.
b) una capa de tipo Div PA.
c) un prrafo.
d) cualquiera de las anteriores.
10. El botn Ir en un men de salto es opcional.

a) Verdadero.
b) Falso.


1. El selector p.rojo corresponde a ...

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

a) cualquier elemento que tenga como clase contenedor.
b) un nico elemento con el id contenedor.

3. Podemos asociar estilos a etiquetas con determinados atributos
encerrndolos entre...
a) Parntesis: a(href).
b) Corchetes: a[href].
4. Cuando queramos asociar un estilo a un elemento con determinado valor en
un atributo. El valor deber ir encerrado entre comillas.
a) Verdadero, de esta forma: a[href="_blank"].
b) Falso, debe ir encerrado entre asterscos de esta forma:

a{href=*_blank*}.
5. El orden de la propiedad border es:
a) border: width color style;
b) border: width style color;

6. Podemos cambiar las vietas de una lista por imgenes utilizando la
propiedad...
a) list-image.
b) list-style-image.
7. La diferencia entre la propiedad margin y padding es:
a) Margin mide la distancia del borde con el exterior.
b) Padding mide la distancia del borde con el interior.

8. Para dejar de aplicar un elemento flotante sobre algo deberemos utilizar la
propiedad...
a) clear.
b) break.

9. Los valores relativ e y absolute de la propiedad position se diferencian

en:
a) Relativ e establece la posicin del texto tomando como referencia su
posicin en el flujo normal.
b) Absolute establece la posicin del texto tomando como referencia la

ventana del navegador.
10. Para que no se produzcan saltos de lnea en un elemento de bloque

deberemos utilizar la propiedad white-space. Pero, qu valor deberemos
darle?
a) continue.
b) nowrap.


1. Un servidor FTP puede nombrarse de 2 formas diferentes.

a) Verdadero.
b) Falso.
2. Es posible determinar la carpeta donde se subirn los archivos al sitio

remoto especificndolo en el campo:
a) Servidor FTP.
b) Directorio del servidor.

3. Al obtener los archivos que se encuentran en el servidor, estos se
desprotegern automticamente.
a) Verdadero.
b) Falso.
4. La vista remota del panel Archivos muestra los archivos que se encuentran
en el servidor.
a) Verdadero.
b) Falso.
5. De forma predeterminada, Dreamweaver se desconecta del servidor a los:
a) 15 minutos.
b) 30 minutos.
6. Proteger un archivo significa...
a) Establecerlo como slo lectura para que nadie pueda modificarlo.
b) Borrarlo del servidor para que nadie pueda modificarlo.

7. Los archivos que hayas subido al servidor y no se encontraban antes se
protegern automticamente.
a) Slo si la opcin Permitir desproteger y proteger archivo se activo en la
definicin del sitio.
b) S, siempre.
c) No, nunca.
8. Es posible subir archivos a un servidor sin establecer un sitio remoto.
a) Verdadero.
b) Falso.

9. La sincronizacin bidireccional supone que...

a) Los archivos del servidor local que sean ms nuevos que en el
remoto se copiarn en el remoto.
b) Los archivos del servidor remoto que sean ms nuevos que en el

local se copiarn en el local.
10. La opcin Eliminar archivos remotos no existentes en la unidad local

borrar los elementos que slo se encuentren en el servidor local.
a) Verdadero.
b) Falso.


1. Un servidor de pruebas es necesario para ejecutar los archivos php en el

sitio local.
a) Verdadero.
b) Falso.
2. Un archivo PHP se ejecuta en el servidor antes de enviar una respuesta a la

peticin del cliente.
a) Verdadero.
b) Falso.
3. Podemos reconocer cdigo PHP en una pgina porque se encuentre
encerrado entre las etiquetas:
a) <code? y ?>.
b) <? y ?>.
4. El paquete WAMP instalar en nuestro ordenador un servidor capaz de
correr PHP, ASP y C#.
a) Verdadero.
b) Falso.
5. Localhost es el lugar en tu mquina desde donde podremos ejecutar
archivos PHP una vez instalado WAMP.
a) Verdadero.
b) Falso.
6. WAMP instala dos servicios, Apache y MySQL, cul se ocupa de correr
PHP?
a) MySQL.
b) Apache.
7. Qu interfaz utilizaremos para crear bases de datos?
a) MySQL.
b) phpMyAdmin.

8. Es aconsejable establecer un juego de caracteres en nuestras bases de
datos para asegurarnos de que su contenido se visualiza correctamente.
a) Verdadero.
b) Falso.

9. Al crear un campo en una base de datos, si queremos que un valor en

ese campo no se repita en ms de un registro deberemos seleccionar la
opcin...
a) Nulo.
b) Extra.
c) nico.
d) ndice.
10. Es posible establecer privilegios a un usuario para que slo pueda acceder
a las opciones administrativas de una base de datos.
a) Verdadero.
b) Falso.


1. Para empezar a crear pginas de acceso a datos es imprescindible crear

una conexin con la base de datos.
a) Verdadero.
b) Falso.
2. Un Juego de Registros es un conjunto de registros extrados de la base de

datos que podremos utilizar en nuestras pginas utilizando el texto dinmico.
a) Verdadero.
b) Falso.
3. Si en un juego de registros queremos que se muestren solamente aquellos
que cumplan determinada condicin utilizaremos...
a) La ordenacin.
b) El filtrado.
respecto a un valor determinado seleccionaremos la opcin...
b) Parmetro URL.
respecto a una variable enviada desde un formulario seleccionaremos la
opcin...
b) Parmetro URL.

6. No es posible aplicar cualquier estilo CSS sobre un texto dinmico.
a) Verdadero.
b) Falso.
7. La barra de navegacin de juego de registros combina las opciones

de...
a) Filtrado y paginacin.
b) Paginacin y recuento.
c) Ocultacin de regiones y paginacin.

8. Qu tipo de mtodo deberemos utilizar en un formulario para que las

variables se pasen correctamente?
a) GET.
b) POST.
9. Al pasar un parmetro deberemos utilizar el siguiente smbolo:
a) pagina.php&parametro=valor.
b) pagina.php#parametro=valor.
c) pagina.php?parametro=valor.

10. La vista LiveData te puede mostrar una vista rpida de una pgina
dinmica presentando los datos de los registros en pantalla.
a) Verdadero.
b) Falso.


1. El contenido de un blog nunca cambia, es esttico. Una vez introduces

su contenido no tendrs la necesidad de modificarlo ms.
a) Verdadero.
b) Falso.
2. Es aconsejable organizar las entradas de un blog por temas o categoras

para mantener una estructura ms accesible.
a) Verdadero.
b) Falso.
3. Todas las pginas del blog deben ser accesibles a cualquier persona que
quiera verlas.
a) Verdadero.
b) Falso.
4. Utilizaremos la vista de relaciones para determinar que si se borra una
entrada tambin lo hagan todos sus comentarios asociados.
a) Verdadero.
b) Falso.
5. Para provocar el borrado de una entrada al borrar su categora asociada,
qu opcin deberemos seleccionar?
a) SET NULL.
b) CASCADE.
6. En la creacin de un blog no nos ser necesario crear sentencias SQL
complejas, bastar con las que podemos crear desde la vista Simple del editor
de Dreamweaver.
a) Verdadero.
b) Falso.
7. Es aconsejable guardar la fecha de cada entrada para poder mostrarlas en
orden de creacin.
a) Verdadero.
b) Falso.
8. Para poder utilizar la opcin Conectar usuario ser imprescindible

haber creado un formulario con antelacin para poder introducir el nombre y
contrasea.
a) Verdadero.
b) Falso.
9. Es posible crear diferentes niveles de acceso de seguridad?
a) S.
b) No.

10. Dreamweaver utiliza cookies para recordar la entrada de un usuario con

acceso a la interfaz privada. Si no las tienes activadas no podrs visualizar las
pginas protegidas.
a) Verdadero.
b) Falso.


1. Para poder incluir contenido XML o RSS en nuestras pginas

deberemos crear un nuevo archivo de tipo...
a) XML.
b) XSLT.
2. Para previsualizar el resultado de un archivo que contiene informacin

importada desde un archivo XML o RSS podremos utilizar la vista LiveData.
a) Verdadero.
b) Falso.
3. Al utilizar repeticiones de regin podremos utilizar filtros. Estos filtros son
ms avanzados que los que utilizamos en los juegos de registros.
a) Verdadero.
b) Falso.
4. Dreamweaver no permite la ordenacin de elementos automticamente,
aunque s podemos hacerlo a travs del cdigo.
a) Verdadero.
b) Falso.
5. En una ordenacin, el valor por omisin del atributo order es...
a) Ascending.
b) Descending.
6. Al crear una condicin mltiple, si no se cumple la condicin el contenido
seleccionado no se mostrar.
a) Verdadero.
b) Falso.
7. Podemos crear condiciones referentes al valor de cualquier campo o nodo
dentro del elemento que estamos visualizando.
a) Verdadero.
b) Falso.
8. Para mostrar un fragmento XSLT deberemos incluirlo dentro de una pgina
dinmica.
a) Verdadero.
b) Falso.

9. Si utilizamos parmetros en nuestros archivos XSLT deberemos

indicar su valor en...
a) La propia pgina XSLT.
b) En la pgina dinmica donde se incluya.
c) En ambos archivos.
d) En ninguna de las anteriores.
10. Es aconsejable utilizar pginas XSLT completas?

a) S.
b) No.


1. Para poder utilizar un archivo XML utilizando Spry es necesario crear

antes un conjunto de datos.
a) Verdadero.
b) Falso.
2. Para poder utilizar datos de un archivo XML es necesario crear antes una
regin Spry.
a) Verdadero.
b) Falso.
3. Es posible filtrar los resultados de un archivo XML en la creacin de un
conjunto de datos.
a) Verdadero.
b) Falso.
una regin de repeticin de datos.
a) Verdadero.
b) Falso.
un conjunto de datos.
a) Verdadero.
b) Falso.
6. El listado de repeticin de Definicin crea una lista desplegable.
a) Verdadero.
b) Falso.
7. Qu etiqueta crea un listado de datos ordenados?.
a) UL.
b) OL.
8. En las tablas de datos es obligatorio mostrar todas las propiedades de un
elemento XML.
a) Verdadero.
b) Falso.
9. En una tabla de datos podemos...
a) Ordenar las filas haciendo clic en una de sus columnas.
b) Enlazar la fila seleccionada con una regin de detalle.
c) Las dos anteriores son ciertas.
d) Todas las anteriores son falsas..

10. Para utilizar una regin de detalle es necesaria una tabla de datos?
a) S.
b) No.


1. La tecnologa AJAX permite pginas dinmicas sin necesidad de

recargar la pgina del servidor.
a) Verdadero.
b) Falso.
2. Spry Framework es un entorno de trabajo creado por Adobe para que

puedas utilizar AJAX de una forma sencilla y rpida.
a) Verdadero.
b) Falso.
3. Para utilizar Spry deberemos incluir la base de datos que nos podremos
descargar desde la pgina oficial de Adobe.
a) Verdadero.
b) Falso.
4. Spry est centrado en HTML, as que solamente nos har falta saber un
poco de JavaScript para poder crear pginas dinmicas en AJAX utilizndolo.
a) Verdadero.
b) Falso.
5. Spry es capaz de leer datos de una base de datos y mostrarlos en una
pgina aunque sta sea una pgina con extensin HTML.
a) Verdadero.
b) Falso.
6. Es necesario crear una regin Spry en la pgina para mostrar los datos,
preferentemente en una etiqueta TABLE.
a) Verdadero.
b) Falso.
7. Las repeticiones de registros (spry:repeat) nos ayudarn a mostrar todos
los registros incluidos en un archivo XML.
a) Verdadero.
b) Falso.

8. El atributo spry:test puede ir en cualquier etiqueta dentro de una regin de

repeticin.
a) Verdadero.
b) Falso.
9.Para incluir un atributo de un elemento cuando utilizamos Spry deberemos
usar el smbolo...
a) #.
b) ::.
c) @.
d) Ninguno de los anteriores.

10. Cuando queramos filtrar un dataset ser absolutamente necesario crear
una funcin que se encargue de descartar las filas que queramos filtrar.
a) Verdadero.
b) Falso.


1. Los controles de validacin de Spry deben ser insertados por fuerza

dentro de un formulario.
a) Verdadero.
b) Falso.
2. La caja de texto de Spry slo admite la validacin de correos electrnicos,

fechas y nmeros de telfonos.
a) Verdadero.
b) Falso.
3. Para el patrn 0000, Cul de las siguientes respuestas es aceptable?.
a) 0.
b) 1234.
4. Los estados de validacin muestran mensajes de error si la evaluacin del
campo introducido es negativa.
a) Verdadero.
b) Falso.
5. Los mensajes de error son configurables.
a) Verdadero.
b) Falso.
6. Podemos obligar al usuario a escoger un valor determinado en un
desplegable de Spry.
a) Verdadero.
b) Falso.
7. Las casillas de verificacin de Spry no pueden mostrarse en grupo.
a) Verdadero.
b) Falso.
8. Podemos hacer que una opcin de un desplegable Spry no sea
seleccionable.
a) Verdadero.
b) Falso.
9. Si no seleccionamos ninguna validacin, por defecto el campo se evaluar...
a) Al abandonar de control.
b) Al modificar el control.
c) Al enviar el formulario.
d) Ninguna de los anteriores.

10. Los contadores de caracteres en un rea de texto Spry son opcionales.

a) Verdadero.
b) Falso.


1. Los mens Spry pueden tener hasta cuatro niveles de elementos.

a) Verdadero.
b) Falso.
2. Es posible colocar un enlace de correo electrnico a un elemento de men

Spry.
a) Verdadero.
b) Falso.
3. No es posible crear un enlace a una pgina en un elemento de men de
primer nivel.
a) Verdadero.
b) Falso.
4. En un control de Fichas Spry podemos utilizar slo 2 fichas por control.
a) Verdadero.
b) Falso.
5. Las fichas Spry pueden contener imgenes.
a) Verdadero.
b) Falso.
6. Si un control de Acorden no tiene la altura suficiente para mostrar su
contenido se insertarn automticamente barras de desplazamiento.
a) Verdadero.
b) Falso.
7. Los acordeones de Spry pueden tener tantas seccin como queramos.
a) Verdadero.
b) Falso.
8. Un panel que se contrae de Spry puede mostrarse desplegado al cargarse
la pgina.
a) Verdadero.
b) Falso.
9. Es posible modificar el estilo de un control Spry?.

a) S, modificando su pgina de estilos CSS.
b) No, slo pueden cambiarse los estilos Negrita y Cursiva desde el

panel Propiedades.
c) No, en ninn caso.

10. Cuando creamos un control Spry, en la carpeta SpryAssets cuntos

archivos se crean?.
a) Tres.
b) Dos.

CurSode Dreamweaver Cs 3

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CurSode Dreamweaver Cs 3

Uploaded by

Copyright:

Available Formats

Cursos de Informtica aulaClic

Curso de Dreamweaver CS3

aulaClic S.L. Todos los derechos reservados.

1. Conceptos bsicos de 10. Multimedia 19. Servidor de Pruebas

Unidad 2. El entorno de trabajo

Unidad 3. Configuracin de un sitio local

Unidad 10. Multimedia

Unidad 11. Las plantillas

aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 3

Unidad 13. Otros elementos

Unidad 14. Capas

Unidad 15. Comportamientos

Unidad 16. Comportamientos Avanzados

Unidad 17. Estilos CSS Avanzado

aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 4

Unidad 19. Servidor de Pruebas

Unidad 20. Pginas Dinmicas

Unidad 21. Cmo crear un Blog

Unidad 22. XML y RSS

aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 5

Unidad 24. AJAX y Spry Framework

Unidad 25. Spry y Formularios

Unidad 26. Controles Spry Avanzados

aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 6

Ejercicios propuestos Pruebas evaluativas

aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 7

Y finalmente puedes utilizar los marcadores. En el panel de marcadores,

Estructura del curso.

Nivel bsico. Nivel medio. Nivel avanzado.

aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 8

En las unidades encontrars dos tipos de ejercicios:

La explicacin de algunos apartados se completa con un videotutorial. Si te falta alguno de estos

aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 9

Unidad 1. Conceptos bsicos de Dreamweaver CS3

Si no conoces las caractersticas bsicas de HTML puedes verlas aqu.

Novedades de Dreamweaver CS3

Mejoras en la comprobacin de la compatiblidad con diferentes navegadores. Dreamweaver CS3 puede

aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 10

a nuestras pginas web.

Editar pginas web

Cualquier editor de texto permite crear

Pero crear pginas web mediante el cdigo

Cmo tener una pgina en Internet

Cuando se va a contratar un servicio de hospedaje es necesario contratar tambin un dominio, tarea de la

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

aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 12

Arrancar y cerrar Dreamweaver CS3

Veamos las dos formas bsicas de arrancar Dreamweaver CS3.

Desde el botn Inicio situado, normalmente, en la esquina inferior izquierda de la pantalla.

Desde el icono de Dreamweaver CS3 del escritorio .

Hacer clic en el botn cerrar

Pulsar la combinacin de teclas ALT+F4.

Hacer clic sobre el men Archivo y elegir la opcin Salir.

Abrir y guardar documentos

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

Hacer clic en el botn abrir de la barra de herramientas estndar.

Pulsar la combinacin de teclas Ctrl+O.

Hacer clic sobre el men Archivo y elegir la opcin Abrir.

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

aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 13

Hacer clic en el botn abrir de la barra de herramientas estndar.

Pulsar la combinacin de teclas Ctrl+N.

Hacer clic sobre el men Archivo y elegir la opcin Nuevo.

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