Cur Sode Dreamweaver Cs 6

aulaClic. Curso de Curso Dreamweaver CS6.
ndice
Cmo utilizar este curso. 1. Conceptos bsicos de Dreamweaver CS6 2. El entorno de Dreamweaver CS5 3. Configurar un sitio local 4. El texto: propiedades y formato 5. Hiperenlaces 6. Imgenes 7. Tablas 8. Marcos 9. Formularios 10. Multimedia 11. Las plantillas 12. HTML desde Dreamweaver 13. Otros elementos 14. Capas 15. Comportamientos 16. Comportamientos avanzados 17. Estilos CSS Avanzados 18. Diseo de pgina. Maquetacin web 19. Sitios remotos 20. Servidor de Pruebas 21. Pginas dinmicas 22. Cmo crear un Blog 23. XML y RSS 24. Acceso a datos con Spry 25. AJAX y Spry Framework 26. Spry y Formularios 27. Controles Spry Avanzados
ndice
detallado
Unidad 1. Conceptos bsicos de Dreamweaver CS6

1.1. Qu es Dreamweaver CS6 1.2. Novedades de Dreamweaver CS6 1.3. Editar pginas web 1.4. Cmo tener una pgina en Internet 1.5. Arrancar y cerrar Dreamweaver CS5 1.6. Abrir y guardar documentos 1.7. Mi primera pgina HTML bsico Compaginar dos sesiones
Unidad 2. El entorno de Dreamweaver CS5

2.1. La pantalla inicial 2.2. Las barras 2.3. Inspectores y paneles 2.4. Vistas de un documento 2.5. La ayuda Personalizar el rea de trabajo
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es
Unidad 3. Configurar un sitio local

3.1. Introduccin 3.2. Crear o editar un sitio web sin conexin a Internet 3.3. Abrir un sitio 3.4. Ver el sitio 3.5. Subir archivos al servidor 3.6. Propiedades del documento 3.7. Los colores Comprobar tamao para optimizar la carga
Unidad 4. El texto: propiedades y formato

4.1. Caractersticas del texto 4.2. Listas 4.3. Caracteres especiales 4.4. Estilos CSS. Introduccin 4.5. Crear un estilo personalizado 4.6. Definir o editar un estilo 4.7. Aplicar un estilo 4.8. Hojas de estilos El panel Estilos CSS
Unidad 5. Hiperenlaces
5.1. Introduccin 5.2. Tipos de referencia 5.3. Crear enlaces 5.4. Destino del enlace 5.5. Formato del enlace 5.6. Enlace a correo electrnico Configurar nuevos enlaces Vnculos rotos
Unidad 6. Imgenes
6.1. Introduccin 6.2. Insertar una imagen 6.3. Propiedades de una imagen 6.4. Cambiar el tamao de una imagen 6.5. Imagen de sustitucin. Rollover 6.6. Objetos inteligentes Formatos de imagen para web Mapas de imagen Cambiar formato y crear transparencias Programas de edicin de imgenes Men CSS
Unidad 7. Tablas
7.1. Introduccin 7.2. Insertar una tabla 7.3. Rellenar las celdas 7.4. Seleccionar elementos de una tabla 7.5. Formato de tabla 7.6. Formato CSS 7.7. Cambiar tamao de tabla y celdas 7.8. Aadir y eliminar filas y columnas 7.9. Anidar, dividir y combinar celdas 7.10. Modos de tabla 7.11. Adaptar webs a distintas resoluciones
Unidad 8. Marcos
8.1. Introduccin 8.2. Crear marcos 8.3. Seleccionar marcos 8.4. Guardar 8.5. Configurar marcos 8.6. Contenido del marco
Unidad 9. Formularios
9.1. Introduccin 9.2. Elementos de formulario 9.3. Crear formularios 9.4. Validar formularios
Unidad 10. Multimedia

10.1. Pelculas Flash (SWF) 10.2. Sonido 10.3. Vdeos
Unidad 11. Las plantillas

11.1. Introduccin 11.2. Crear plantillas 11.3. Establecer regiones editables en una plantilla 11.4. Basar pginas en una plantilla
Unidad 12. HTML desde Dreamweaver

12.1. Etiquetas 12.2. Entidades HTML 12.3. El inspector de cdigo 12.4. Completar las etiquetas 12.5. Contraer y expandir cdigo 12.6. Errores en el cdigo 12.7. Buscar y reemplazar Listado de Entidades HTML Expresiones Regulares Bsqueda en Etiquetas
Unidad 13. Otros elementos

13.1. Fuentes web 13.2. Marquesinas 13.3. Fecha 13.4. Regla horizontal 13.5. Cdigo de otras pginas
Unidad 14. Capas

14.1. Introduccin 14.2. Insertar una capa 14.3. Formato de una capa
Unidad 15. Comportamientos

15.1. Introduccin 15.2. Insertar un comportamiento 15.3. Mostrar-Ocultar elementos 15.4. Llamar JavaScript Eventos
Unidad 16. Comportamientos avanzados

16.1. Mensajes emergentes 16.2. Carga previa de imgenes 16.3. Abrir nueva ventana del navegador 16.4. Cambiar propiedades CSS 16.5. Comprobar Plug-ins 16.6. Mens de salto 16.7. Transiciones
Unidad 17. Estilos CSS Avanzados

17.1. Aplicar estilos CSS 17.2. Sintaxis CSS 17.3. Selectores compuestos 17.4. Selectores de atributo 17.5. Pseudo-clases y Pseudo-elementos CSS 17.6. Orden de aplicacin de los estilos CSS 17.7. Controles de fuente 17.8. Espaciado y alineacin 17.9. Apariencia del texto 17.10. Controles de ratn 17.11. Controles de lista 17.12. Controles de fondo 17.13. Controles de margen interior y exterior 17.14. Bordes 17.15. Elementos flotantes 17.16. Controles de elementos de bloque y en lnea 17.17. Controles de posicin 17.18. Controles de visibilidad Inspeccin de CSS
Unidad 18. Diseo de pgina. Maquetacin web

18.1. Maquetar una pgina web 18.2. Tamao 18.3. Desbordamiento 18.4. Posicionamiento 18.5. Posicionamiento relativo 18.6. Posicionamiento absoluto 18.7. Posicionamiento flotante 18.8. Posicionamiento fijo 18.9. Ancho de la pgina, lquido o elstico 18.10. Maquetacin prediseada en Dreamweaver 18.11. Videotutoriales. Creando un sitio web completo 18.12. Diseo de cuadrcula fluida con Dreamweaver
Unidad 19. Sitios remotos

19.1. Configurar un Sitio Remoto 19.2. El panel Archivos 19.3. Sincronizar Sitios
Unidad 20. Servidor de Pruebas

20.1. Introduccin a PHP 20.2. Estructura PHP 20.3. Instalar un servidor local con WampServer 20.4. Configuracin inicial 20.5. Trabajar con un servidor local WampServer 20.6. Configurar un servidor de pruebas 20.7. Introduccin a phpMyAdmin 20.8. Crear una base de datos en phpMyAdmin 20.9. Crear una tabla en phpMyAdmin 20.10. Insertar datos en una tabla 20.11. Modificar la estructura de la tabla 20.12. Modificar datos de una tabla 20.13. Establecer privilegios en phpMyAdmin Bases de datos
Unidad 21. Pginas dinmicas

21.1. Introduccin 21.2. Crear una conexin a la base de datos 21.3. Juegos de registros o RecordSets 21.4. Mostrar datos dinmicos 21.5. Repeticiones 21.6. Orden de juegos de registros 21.7. Filtrado de juegos de registros 21.8. Paginacin de Registros 21.9. Mostrar/Ocultar regiones 21.10. Uso de variables 21.11. Pginas Maestro-Detalle 21.12. Asistente de insercin de registros 21.13. Asistente de actualizacin de registros 21.14. Asistente de eliminacin de registros 21.15. Juegos de registros avanzados
Unidad 22. Cmo crear un Blog

22.1. Introduccin 22.2. Estructura de datos 22.3. Interfaz pblica 22.4. Interfaz privada 22.5. Insertar nuevos elementos 22.6. Listado de elementos 22.7. Modificacin de elementos 22.8. Eliminacin de elementos 22.9. Restringir acceso
Unidad 23. XML y RSS

23.1. Introduccin 23.2. Importar datos de un archivo externo 23.3. Trabajar con elementos XML 23.4. Crear repeticiones 23.5. Ordenar elementos 23.6. Sentencias condicionales 23.7. Insertar un fragmento XSLT 23.8. Paso de parmetros
Unidad 24. Acceso a datos con Spry

24.1. Introduccin 24.2. Conjunto de datos XML 24.3. Crear una regin de Spry 24.4. Repeticin de elementos 24.5. Listas de repeticin 24.6. Mostrar Maestro - Detalle
Unidad 25. AJAX y Spry Framework

25.1. Introduccin 25.2. Incluir Spry 25.3. Importar datos 25.4. Definiendo regiones Spry 25.5. Mostrar informacin 25.6. Crear repeticiones 25.7. Ordenar registros 25.8. Condicionales 25.9. Filtros 25.10. Eliminar filas repetidas 25.11. Actualizar la carga de un archivo XML 25.12. Modo Maestro/Detalle 25.13. Modo Maestro/Detalle con diferentes fuentes XML 25.14. Spry y estilos CSS 25.15. Importar datos (II)
Unidad 26. Spry y Formularios

26.1. Introduccin 26.2. Validacin de campos de texto 26.3. Estados de validacin 26.4. Validacin de campos desplegables 26.5. Grupo de opciones 26.6. Casillas de verificacin 26.7. reas de texto 26.8. Contraseas 26.9. Campo de confirmacin
Unidad 27. Controles Spry Avanzados

27.1. Introduccin 27.2. Barra de mens 27.3. Navegacin por Fichas 27.4. Control Acorden 27.5. Panel con Contraccin 27.6. Cambiar Estilos CSS
Ejercicios paso a paso

3. Crear un sitio web local 3. Crear nuevo documento y modificar sus propiedades 4. Insertar texto y modificar sus propiedades 4. Convertir texto en una lista 4. Redefinir el estilo de una etiqueta 4. Crear y aplicar una clase 4. Modificar el estilo de una lista 4. Exportar y vincular hojas de estilo 5. Crear un hiperenlace 5. Crear un vnculo de correo electrnico 6. Insertar una imagen 6. Crear Mapas de imagen 6. Crear Rollovers 7. Crear y rellenar una tabla 7. Modificar las propiedades de la tabla 7. Modificar el estilo de la tabla 7. Ajustar el tamao de la tabla 7. Combinar celdas 8. Crear y configurar marcos 9. Insertar elementos de formulario 10. Insertar un archivo de audio
20. Crear una tabla 20. Importar datos a una tabla 20. Asignar privilegios 21. Crear una conexin a base de datos 21. Crear un Recordset 21. Texto dinmico 21. Repeticin de texto dinmico 21. Ordenar un RecordSet 21. Filtrado de registros 21. Paginacin de registros 21. Recuento de registros 21. Ocultar/mostrar regiones 21. Enlaces con parmetros 21. Filtrar con parmetros 21. Insercin de registros 21. Utilizar sentencias SQL 22. Estructura de datos de un Blog 22. Interfaz Pblica 22. Creacin de un Men de Administracin 22. Insercin de elementos 22. Listado de elementos
11. Crear una plantilla 12. Buscar y reemplazar 13. Insertar la fecha de ltima actualizacin 14. Insertar una capa 15. Crear comportamiento 17. Crear una hoja de estilo CSS 17. Utilizando pseudo-elementos y clases 17. Controles de Fuente 17. Controles de Lista 17. Controles de Fondo 17. Controles de Mrgenes y Borde 17. Controles de Bloque 17. Controles de Posicin y visibilidad 20. Crear un alias en WampServer 20. Crear un Servidor de Prueba 20. Crear una Base de datos MySQL
22. Modificar elementos 22. Eliminar elementos 22. Restringir Acceso 23. Preparando el Servidor de Pruebas para XLS 23. Importar datos RSS 23. Enlaces con elementos 23. Repeticin de elementos 23. Ordenacin de elementos 23. Insertar XSLT en una pgina dinmica 23. Paso de parmetros 25. Crear un dataset 25. Crear una regin con informacin 25. Crear repeticiones de registros 25. Crear condiciones 25. Crear Filtros
Ejercicios propuestos
3. Configurar un sitio local 4. El texto: propiedades y formato 5. Hiperenlaces 6. Imgenes 7. Tablas 9. Formularios 10. Multimedia 11. Las plantillas 12. HTML desde Dreamweaver 13. Otros elementos 14. Capas 15. Comportamientos 16. Comportamientos avanzados 17. Estilos CSS Avanzados 18. Diseo de pgina. Maquetacin web 20. Servidor de Pruebas 21. Pginas dinmicas 22. Cmo crear un Blog 23. XML y RSS 24. Acceso a datos con Spry 25. AJAX y Spry Framework 26. Spry y Formularios 27. Controles Spry Avanzados
Pruebas evaluativas
1. Conceptos bsicos de Dreamweaver CS6 2. El entorno de Dreamweaver CS5 3. Configurar un sitio local 4. El texto: propiedades y formato 5. Hiperenlaces 6. Imgenes 7. Tablas 8. Marcos 9. Formularios 10. Multimedia 11. Las plantillas 12. HTML desde Dreamweaver 13. Otros elementos 14. Capas 15. Comportamientos 16. Comportamientos avanzados 17. Estilos CSS Avanzados 18. Diseo de pgina. Maquetacin web 19. Sitios remotos 20. Servidor de Pruebas 21. Pginas dinmicas 22. Cmo crear un Blog 23. XML y RSS 24. Acceso a datos con Spry 25. AJAX y Spry Framework 26. Spry y Formularios 27. Controles Spry Avanzados
10
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

aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 11
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."
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: Debido a las caractersticas del formato PDF algunas representaciones de estilos, comportamienteos, audio y vdeo no se mostrarn igual que en el formato original de pgina 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.
12
1. Conceptos bsicos.

1.1. Qu es Dreamweaver CS6
Dreamweaver CS6 es un software fcil de usar que permite crear pginas web profesionales. Las funciones de edicin visual de Dreamweaver CS6 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 dar tiempo a entenderlo y decidir si quieres adquirir la versin completa de este fantstico programa. Nota: Esta versin estar disponible hasta que Adobe lance la nueva versin del programa. Los logotipos de Dreamweaver son propiedad de Adobe, as como las marcas registradas Dreamweaver y Adobe. aulaClic no tiene ninguna relacin con Adobe. Las pginas web estn escritas en HTML. Si no conoces las caractersticas bsicas de HTML puedes verlas aqu.
1.2. Novedades de Dreamweaver CS6

En este punto comentaremos las caractersticas que aporta esta nueva versin sobre la anterior. Plantillas diseo fluido . El acceso a la web a travs de todo tipo de dispositivos est experimentando un aumento importante. Ahora es habitual acceder a internet desde el telfono mvil y desde las tabletas. Esto complica el diseo de los sitios web porque los dispositivos son de diferentes dimensiones. Una forma de afrontar este problema es utilizando el diseo fluido, este tipo de diseo hace que la pgina se adapte automticamente a las dimensiones del dispositivo. Este tipo de diseo utiliza HTML 5 por los que los navegadores antiguos no son capaces de representarlo correctamente. Sin embargo, existen librerias de Javascript que solucionan este inconveniente. Dreamweaver incorpora estas soluciones en sus nuevas plantillas de diseo fluido que veremos en la unidad 18.
13
Fuentes Web. Existen sitios web con multitud de nuevas fuentes que pueden dar un aire distinto a nuestros diseos de pginas web. En esta versin, Dreamweaver permite incorporar los archivos de nuevas fuentes de forma sencilla.
Intergracin con PhoneGap mejorada. PhoneGap es un servicio para generar aplicaciones para telfonos mviles en las plataformas ms utilizadas (Android, Apple, ...) ahora se ha mejorado la compatibildad con PhoneGap desde Dreamweaver .
Funciones exclusivas para Creative Cloud. Creative Cloud es la nueva forma de adquirir productos Adobe, como Dreamweaver, mediante suscripcin mensual o anual, de esta forma se tiene acceso ms rapido a las actualizaciones y se puede disponer de los archivos de trabajo en cualquier ubicacin con acceso a internet. Adems hay funciones que slo estan disponibles para los suscriptores de Cloud, como la insercin de etiquetas HTML 5 desde el panel Insertar, la compatibilidad con Edge Animate o la bsqueda dinmica en Mac.
14
1.3. 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 incluido en Windows para hacerlo. Pero crear pginas web mediante el cdigo HTML es ms laborioso 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, sobre todo si no estamos demasiado familiarizados con el HTML. Aunque tambin es cierto que escribir el cdigo nos da ms control sobre l, y sobre todo al principio, nos ayudar a entender lo que estamos haciendo y podremos aprender HTML rpidamente. 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 Expresion Web, Amaya, Bluefish, NVU, KompoZer o Quanta Plus. Algunos de los cuales tienen la ventaja de ser gratuitos.
1.4. 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, sobre todo al comienzo. Por otro lado, hay grandes empresas de Internet que ofrecen otras alternativas para publicar en Intenet de forma gratuita en forma de blog. Como por ejemplo, Blogger de Google o MySpace de Microsoft. Un blog tiene una estructura definida y no ofrece tanta libertad como una pgina web a la hora del diseo. Tambin tenemos Google Sites que permite modificar directamente el cdigo HTML.
En el resto del curso nos referiremos preferentemente a pginas web creadas desde cero por el usuario, sin restircciones de diseo. 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. La terminacin hace referencia al pais (.es para Espaa, .com.mx para Mxico, .pe para Per, ...) o al tipo de pgina (.com para comerciales, .org para organizaciones, .mobi para telfonos mviles o celulares, ...) 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. 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 en los nombres de archivos o carpetas. 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 (los que utilizan linux) distinguen entre maysculas y minsculas, por lo que si en tu pgina quieres mostrar la imagen foto1.jpg debers guardarla con ese nombre y no como Foto1.jpg. Evitars horas perdidas buscando fallos.
16
1.5. Arrancar y cerrar Dreamweaver CS5

Veamos las dos formas bsicas de arrancar Dreamweaver CS5. situado, normalmente, en la esquina inferior izquierda de la pantalla.
Desde el botn Inicio
Colocar el cursor y hacer clic sobre el botn Inicio, se despliega un men. Puedes comenzar a escribir el nombre del programa, y aparecer directamente. O puedes pulsar en Todos los programas y buscarlo en la lista con los programas que hay instalados en tu ordenador. Buscar Adobe Dreamweaver CS6 y haz clic sobre l para arrancar el programa.
Desde el icono de Dreamweaver CS6 del Escritorio, si lo tienes
Puedes arrancar Dreamweaver CS6 ahora para ir probando todo lo que te explicamos. Cuando realices los ejercicios tambin puedes compaginar dos sesiones de la forma que puedas ver el tema mientras utilizas Dreamweaver, como te explicamos aqu. Para cerrar Dreamweaver CS6, podemos utilizar cualquiera de las siguientes operaciones: Hacer clic en el botn cerrar , en la esquina superior derecha, como en cualquier ventana de Windows.
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.
1.6. 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 (si est visible).
Pulsar la combinacin de teclas Ctrl + O. Hacer clic sobre el men Archivo y elegir la opcin Abrir.... Hacer clic sobre el men Archivo y elegir la opcin Abrir reciente. Muestra los ltimos archivos abiertos. Hacer clic sobre el men Archivo y elegir la opcin Examinar en Brigde. Se abrir el programa Brigde que muestra las carpetas y archivos de forma grfica. Hacer doble clic sobre el archivo en la ventana del sitio. Hacer clic derecho sobre el archivo en el explorador de Windows, y elegir la opcin Abrir con Adobe
Dreamweaver CS6.
Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes operaciones.: Hacer clic en el botn nuevo de la barra de herramientas estndar (si est visible).
Pulsar la combinacin de teclas Ctrl + N. Hacer clic sobre el men Archivo y elegir la opcin Nuevo. Despus de esto aparecer una nueva ventana, en la que debers elegir la Categora Pgina en blanco. En la segunda columna seleccionamos HTML, observamos que hay muchos diseos ya creados que podemos elegir, para nuestro primer ejemplo elegimos en Diseo ninguno. A continuacin pulsamos el botn Crear.
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 todas 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. De todas formas, observa que cuando hay cambios sin guardar aparece un * tras el nombre del documento .
1.7. Mi primera pgina

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.
Lo primero que tienes que hacer es abrir Dreamweaver. Ya has visto en la pgina anterior como puede hacerse. Abre un documento nuevo y selecciona la Categora Pgina bsica , HTML, en la columna Diseo dejamos la opcin por defecto: <ninguno>. Seguidamente, haz clic sobre la zona blanca del documento y escribe lo siguiente:
19
Una vez introducido el texto, vamos a modificar el ttulo y el color de fondo del documento. Para ello podemos hacer clic sobre el men Modificar y elegir la opcin Propiedades de la pgina. Entonces se abrir una ventana como la que aparece a continuacin:
20
En Color de Fondo escribe #CCCCFF, de este modo el fondo del documento pasar a ser de color azul. Haz clic en Ttulo/Codificacin a la izquierda, y en el Ttulo escribe Mi primera pgina. Para aplicar los cambios, pulsa sobre el botn Aceptar. Ahora vamos a insertar una imagen. Para insertar la imagen, hemos de tenerla en la carpeta donde estamos creando nuestras pginas, habitualmente en una subcarpeta dedicada a las imgenes. 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. Ten en cuenta que si piensas publicar la pgina en Internet, hay que respetar los derechos de autor de la imagen. Copia la imagen que aparece a continuacin, para luego poder insertarla en la pgina web que estamos creando. Gurdala en la carpeta donde vas a guardar la pgina que acabas de crear.
Ahora vamos a insertar la imagen debajo de la segunda lnea de texto. En primer lugar, situamos el cursor al final de la segunda lnea y creamos un salto de lnea (tecla Enter). Despus nos dirigimos al men Insertar, opcin Imagen.
21
En la nueva ventana que aparece, debers buscar la imagen en la carpeta en la que la habas guardado, seleccionarla y pulsar Aceptar. 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, opcin Propiedades. Si lo que te ocurre es que nicamente te aparece el ttulo del panel, es porque est contrado. Para que te aparezca desplegado debes hacer doble clic en Propiedades.
Selecciona la primera lnea de texto. En el inspector de propiedades pulsa HTML y aplica el formato Encabezado 1 (h1) seleccionando el valor Encabezado1 del cuadro Formato.
Para cambiar el color del texto cambiamos el panel a las opciones de estilo, pulsando el icono CSS a la izquierda. Mediante el inspector de propiedades en Dreamweaver CS6 accedemos tanto a las propiedades de CSS como a las propiedades de HTML.
22
Podemos decir que en una pgina web, HTML se encarga de estructurar el contenido, la informacin, mientras que CSS se encarga de mostrar ese contenido con el formato adecuado. Al utilizar el inspector de propiedades de CSS, Dreamweaver aplica formato al texto mediante hojas de estilos en cascada . Los estilos CSS ofrecen un mayor control sobre el diseo de la pgina Web y reducen el tamao del archivo. Selecciona la primera lnea. En Regla de destino selecciona <Nuevo estilo en lnea>, para aplicar el formato solo al texto seleccionado. Tambin aplica el estilo de Fuente Arial, Helvetica, sans-serif, color azul #009 y centra el texto con el segundo botn de la parte derecha , tal y como muestra la imagen siguiente:
Selecciona la segunda lnea de texto, y seleccionando como antes <Nuevo estilo en lnea> , marca los botones para ponerlo en negrita y cursiva respectivamente.
Vamos a centrar tambin la imagen. Para ellos seleccinala. Lo que hay que centrar es el contenido del prrafo que la contiene. Para hacerlo, en la barra de estado, encima de las propiedades nos aparece la jerarqua de etiquetas. Haz clic sobre p. Ahora, en Regla de destino selecciona <Nuevo estilo en lnea> y centra el prrafo como hemos visto hasta ahora, pulsando en .
Por ltimo vamos a crear el enlace. Selecciona el texto de la ltima lnea, y cambia el panel de Propiedades a las propiedades de HTML. En el campo Vnculo, escribe la URL de la pgina a enlazar, como se ve en la imagen:
23
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 la extensin ha de ser htm o html. Por ejemplo, lo hemos llamado miprimerapagina.htm, y la hemos guardado en la misma carpeta que la imagen descargada. Ahora, puedes ver cmo se ve en tu navegador pulsando la tecla F12.
Prueba evaluativa de la Unidad 1
24
2. El entorno de Dreamweaver CS6

Vamos a ver cules son los elementos bsicos de Dreamweaver CS6, 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.
2.1. 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 y dnde, como veremos ms adelante.
En el resto de esta unidad vamos a ir describiendo los puntos ms importantes sealados en esta imagen por los nmeros en azul del 1 al 9. 1.- Las barras. 2.- Las pestaas de documentos. 3.- La barra de estado. 4.- El panel de propiedades.
25
5.- rea de paneles. 6.- Paneles y ventanas. 7.- Lnea inferior de pestaas. 8.- Vista diseo del documento. 9.- Vista cdigo del documento.
2.2. Las barras

1.- La barra de la aplicacin.
La barra la aplicacin se incorpor en la versin anterior de Dreamweaver. Si tenemos la ventana maximizada veremos todos los elementos de la barra ocupando una sola lnea, si no, ocuparn dos lneas, como en la imagen superior. Esta barra contiene los siguientes elementos: los mens (en la imagen, en la parte inferior), varios botones propios de la aplicacin , el conmutador de espacio de trabajo y una caja de bsquedas para obtener ayuda on line. Los botones propios de la aplicacin, que aparecen junto al icono, nos permiten (de derecha a izquierda) cambiar entre la vista de diseo o cdigo, acceder a las extensiones que se pueden aadir, o al administrador de sitios, que ya veremos. Ms hacia la derecha observamos el conmutador del espacio de trabajo, como un desplegable. Un espacio de trabajo es la configuracin del entorno (paneles visibles y su disposicin) que podemos guardar y cargar. Lo veremos ms adelante. Los mens, estn agrupados en categoras.
Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con los diferentes elementos que se pueden insertar en Dreamweaver. Todas las opciones de Dreamweaver son accesibles a travs de los mens, aunque en ocasiones nos enven a los paneles. 2.- Las pestaas de documento.
Cada archivo que tengamos abierto, mostrar una pestaa con su nombre, lo que nos permitir cambiar de
uno a otro fcilmente. Si junto al nombre aparece un *, indica que ese archivo tiene cambios sin guardar. Podemos cerrar cada documento clicando en el aspa de la derecha, o acceder a otras acciones haciendo clic con el botn derecho, como Cerrar otros archivos. Debajo de las pestaas encontramos los archivos a que utiliza nuestra pgina, como la hoja de estilos, archivos JavaScript, etc... pudiendo acceder a ellos con un clic. Esto nos ahorrar bastante tiempo. 3.- La barra de estado.
Esta barra la encontramos debajo de la ventana de documento, y nos da informacin sobre el mismo. A la izquierda, encontramos el selector de etiquetas. Nos sirve para seleccionar etiquetas completas. Siguiendo hacia la derecha tenemos las herramientas de Seleccin, Mano (para desplazarse) y Zoom. Ms a la derecha encontramos tres iconos para ver la pgina en tres tamaos de pantalla: mvil, tableta y PC escritorio.Y al final hay otros datos como el tamao de la ventana, el tamao de la pgina o su codificacin. Hasta aqu las barras que siempre veremos en la aplicacin. A parte, existen otras que podemos ver u ocultar desde el men Ver Barras de herramientas.
La barra de herramientas estndar.
La barra de herramientas estndar contiene iconos para realizar las acciones ms habituales del men Archivo y Edicin. De izquierda a derecha: Nuevo archivo, Abrir, explorar con Adobe Bridge, Guardar, Guardar todo, Imprimir el cdigo fuente, Cortar, Copiar, Pegar, Deshacer y Rehacer. Esta barra puede ser muy til, pero en realidad casi todo el mundo usa esos comandos directamente con el teclado (Ctrl + G para guardar, Ctrl + C para copiar, etc.) La barra de herramientas de documento.
La contiene iconos que nos permiten cambiar entre las distintas vistas de edicin y la vista en vivo, vistas previa en multipantalla, acceder cmodamente al ttulo de la pgina, o realizar las distintas opciones de validacin que nos ofrece el programa. La barra de representacin de estilos.
Esta barra, menos utilizada, nos permite ver la apariencia de nuestra web en distintos dispositivos, si estamos utilizando hojas distintas que dependan del eso. Hay varias opciones, como las de ver los estilos que dependen de pseudo clases activas, como cuando el cursor est sobre un elemento. La barra de navegacin con navegador.
Esta barra nos permite usar Dreamweaver como un navegador web y navegar por las pginas de nuestro sitio, aunque slo tiene sentido con la Vista en vivo, como ya veremos.
Como tambin veremos al personalizar el entorno, algunos paneles, como Insertar nos permiten colocarlo como otra barra de herramientas.
2.3. Inspectores y paneles

Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se conocen como paneles (ventanas) o inspectores. La diferencia entre panel e inspector es que, en general, la apariencia y opciones de un inspector cambian dependiendo del objeto seleccionado, mientras que el panel nos da acceso a opciones generales fijas. A travs de la opcin Ventana, de la barra de mens, es posible mostrar u ocultar cada uno de los paneles o inspectores. A continuacin vamos a ver el inspector de Propiedades y ms adelante veremos el panel Insertar. 4.- El inspector de Propiedades
El inspector de Propiedades muestra las opciones propias del objeto o texto seleccionado, permitindonos editarlas, por lo que se convierte en uno de los elementos ms utilizados en Dreamweaver. Por ejemplo, cuando el elemento seleccionado sea una imagen, como sucede en la imagen que puedes ver, mostrar su
ubicacin, dimensiones, peso, clase, etc... En otros elementos, como prrafos y estilos, este panel puede mostrar dos tipos de propiedades, HTML y CSS, que podemos aplicar a los diferentes elementos de la pgina Web que estemos diseando.
5.- rea de paneles. En la parte derecha de la pantalla tenemos el rea o pila de paneles.
Inicialmente, el rea de paneles contiene unos determinados elementos, pero podemos quitar y poner los elementos que queramos. Para quitar un elemento del rea de paneles basta hacer clic con el botn derecho sobre su nombre para que aparezca un men con la opcin Cerrar. Para aadir un elemento al rea de paneles hay que ir al men Ventana y hacer clic en el elemento que queramos aadir, si el elemento se abre en una ventana flotante, bastar arrastrarlo al rea de paneles.
6.- Paneles. Una vez tenemos el ea de paneles con los elementos que ms nos interesen, podemos abrirlos o desplegarlos de tres formas. 1. Abrir el panel dentro del rea de paneles. Para ello primero hay que expandir el rea de paneles pulsando el botn de la parte superior derecha , a continuacin, basta hacer clic en cada panel para que se abra dentro del rea de paneles. Para cerrar el panel hacer doble clic. Por ejemplo, en la siguiente imagen vemos el panel Archivos abierto dentro del rea de paneles. Se pueden abrir varios paneles a la vez y ajustar sus tamaos colocando el cursor en el borde inferior y arrastrndolo.
29
2. Abrir el panel al lado del rea de paneles. Para ello hay que partir del rea de paneles sin expandir, y al pulsar en un panel, este se abrir pegado al lado, como vemos en la siguiente figura.
30
3. Abrir como panel flotante . Para ello hay que pinchar en el ttulo del panel y arrastar el panel fuera del rea de paneles, el panel se puede colocar en cualquier zona de la pantalla, incluso fuera de la pantalla de Dreamweaver. Al hacer doble clic en el ttulo del panel, este se contrae pero sigue flotando en la misma posicin. Para expandirlo, volver a hacer doble clic. En al siguiente imagen vemos el panel Archivos flotando y epandido.
31
Hemos visto un inspector y ahora vamos a ver un panel, el panel Insertar. El panel Insertar. En el panel Insertar, encontramos todos los elementos que podemos encontrar en el men Insertar, clasificados en categoras. Podemos emplearlo para insertar imgenes, enlaces, multimedia, tablas, formularios... cualquier elemento que nuestra web necesite.
Como vemos en las imgenes, es posible configurar este panel para verlo como men (imagen anterior), como panel flotante o como una barra de herramientas integrada en la ventana de trabajo (imagen siguiente)
32
. Personalizar el rea de trabajo es bastante intuitivo, pero si necesitas ayuda, te recomendamos este avanzado . 7. Lnea inferior de pestaas. En al parte inferior de la pantalla tenemos una lnea que contiene varias pestaas (Buscar, Validacin , ... )
Para abrir una pestaa basta hacer clic sobre ella, para cerrarla hacer doble clic en su ttulo. Estas pestaas se pueden configurar de forma similar a como acabamos de ver con el rea de paneles. Es decir, se pueden aadir y quitar, convertir en flotantes, etc.
2.4. Vistas de un documento

Podemos editar el documento con distintas vistas, que puedes cambiar travs de la barra de documento:
8.- La vista Diseo La vista Diseo permite trabajar con el editor visual.
33
Nos ofrece un aspecto muy similar al resultado final, pero totalmente editable. 9.- 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.
34
El cdigo que vemos es el que genera Dreamweaver al editar el contenido en la vista Diseo. - La vista Dividir La vista Dividir permite dividir la ventana en dos zonas: Cdigo y Diseo. La zona izquierda muestra el cdigo fuente, y la derecha el editor visual. Cuando se realiza un cambio en alguna de las zonas, este cambio se aplica directamente sobre la otra.
- La Vista en vivo La vista en Vivo es una mejora reciente de Dreamweaver. Nos ofrece una vista del resultado final no editable. A diferencia de la vista Diseo, que nos permite editar los elementos, esta vista nos permite interactuar con ellos, tal como lo haramos con el navegador. La funcin de esta vista es la de ahorrarnos tiempo, al no tener que comprobar que pequeos cambios se previsualizan correctamente en el navegador. No obstante, siempre hay que comprobar la pgina con los principales navegadores del mercado que sern los que emplearn nuestros visitantes. De hecho, a lo largo del curso vers cmo algunos elementos se ven de forma muy distinta si los vemos en la vista de diseo, en la vista en vivo o en el navegador. Tambin es conveniente comprobar la pgina con los distintos tamaos de pantalla, telfono mvil, tablet y PC.
- La vista Cdigo en vivo Esta vista se emplea conjuntamente con la Vista en vivo. Divide la pantalla como la vista Dividir, pero sin que podamos editar el cdigo. Lo que hace es que al seleccionar partes de la web en la Vista en vivo, se
seleccione su correspondiente cdigo fuente y refleja los cambios dinmicamente al interactuar con la pgina. Si adems pulsamos el botn podremos ver los estilos asociados a cada elemento. Por ejemplo, al colocar el cursor sobre un prrafo podemos ver sus mrgenes, como se aprecia en la siguiente imagen.
2.5. La ayuda
A travs del men Ayuda puedes ir a varias opciones, veamos algunas de ellas: Si seleccionas la opcin Ayuda de Dreamweaver o simplemente pulsando F1 se accede a la ayuda en lnea de Adobe Community Help donde puedes buscar por temas o por bsqueda de palabras clave, . Ayuda de Business Catalyst que es un sistema de alojamiento de pginas web con funciones adicionales. Es de Adobe y hay diferentes opciones de pago al mes. Ayuda de Spry Framework. Veremos Spry Framework a partir de la unidad 14.
Referencia abre un panel en el que encontrars la sintaxis y descripcin de las etiquetas HTML. Acceder al Centro de soporte de Dreamweaver en la web. Dreamweaver Exchange es un sistema para compartir extensiones. Acceder al Foros en lnea de Adobe. Adems, en la barra de aplicacin encontramos una caja de bsqueda. Al introducir los trminos de la bsqueda y buscar, iremos a la ayuda online de Adobe.
37
3. Configurar 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.
3.1. 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, archivos de tipos especfico, 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. Por tanto, el sitio local y el sitio remoto tienen la misma estructura. El sitio local es la copia del sitio con la que trabajaremos, y los cambios los actualizaremos en el sitio remoto. 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. La pgina inicial de nuestro sitio debe de tener el nombre index.htm o index.html, ya que cuando se intenta acceder a una URL genrica, el servidor devuelve la pgina con ese nombre. Por ejemplo, si escribiramos la direccin genrica http://www.aulaclic.es 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, y no se podra navegar por el sitio a no ser que se escribiese exactamente http://www.aulaclic.es/nombrepagina.htm
3.2. Crear o editar un sitio web sin conexin a Internet

Una vez creadas las carpetas que formarn la estructura del sitio local, o por lo menos la carpeta raz , ya es posible definir el nuevo sitio. Para ello hay que dirigirse al men Sitio, a la opcin Administrar sitios... o directamente a Nuevo sitio.
38
Recuerda que a travs del panel Archivos, se puede cambiar a cada uno de los sitios definidos. Tambin podemos acceder desde el icono de acceso rpido de la barra de la aplicacin a la opcin Administrar sitios o Nuevo sitio...
En el caso de haber seleccionado la opcin Administrar sitios, aparece una ventana que contiene la lista de sitios locales definidos
39
Por supuesto, pueden existir varios sitios locales en un mismo ordenador, como podemos ver en la imagen. Desde esta ventana podemos realizar varias acciones. Debajo de la lista de sitios tenemos cuatro botones que nos permiten borrar un sitio, editarlo, duplicarlo y exportarlo. A continuacin tenemos otros cuatro botones: - Importar sitio. Si previamente lo hemos exportado, normalmente, desde otro ordenador. - Importar sitio de Business Catlyst. Catalyst es un sitstema de hospedaje de pago de Adobe. - Nuevo sitio. A continuacin explicaremos esta opcin. - Nuevo sitio de Business Catlyst. En la parte inferior derecha tenemos el botn Listo que nos abrir el sitio seleccionado. Tanto si se pulsa el botn Nuevo sitio, como si se elige el botn Editar, se mostrar la misma ventana en la que definir o modificar las caractersticas del sitio.
40
Las opciones 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. Las dos nicas opciones imprescindibles son las que encontramos en la categora Sitio, y de momento son las nicas que cambiaremos: Vamos a ver los datos que hay que editar para la categora Datos locales, que ser lo nico que empleemos de momento: Debe definirse el Nombre del sitio, que nicamente nos servir para identificarlo en la lista de sitios. La Carpeta del sitio local, que es en la que se encuentra el sitio dentro del disco duro local. La carpeta puede contener ya archivos o no. Estas dos caractersticas son las imprescindibles para definir un sitio local. El resto son opcionales, y de momento no nos interesan. 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.
41
3.3. 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 Archivos. Para practicar realiza el Ejercicio paso a paso Crear un sitio web local. En este ejercicio, configuraremos un sitio que iremos completando ms adelante.
3.4. Ver el sitio

El panel Archivos (men Ventana Archivos o tecla F8) es uno de los paneles ms importantes de Dreamweaver, ya que nos da acceso a los archivos del sitio.
En este caso vemos todos los documentos creados en nuestro sitio buscar.htm, paraplantilla.htm, platossemana.htm, postresemana.htm y las carpetas imagenes y varios. Es posible visualizar un sitio en el panel Archivos o en una ventana. 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. Esto nos sirve para ver a la vez el sitio local (el de nuestro equipo) y el sitio remoto (el del servidor), y poder, por ejemplo, sincronizar los archivos, o compararlos. Tambin el servidor de pruebas o las bases de datos. En esta imagen, se visualiza el remoto (a la izquierda) todava vaco, y el sitio local (a la derecha) con nuestros archivos.
42
Dreamweaver guarda la cach de nuestro sitio, cmo se organizan los archivos y se relacionan entre ellos. Por eso, si cambiamos el nombre de un archivo o su carpeta desde Dreamweaver, automticamente actualizar todas las referencias a ese archivo (enlaces desde otras pginas, origen de la imagen, etc). En cambio, si realizamos estos cambios desde fuera de Dreamweaver, las pginas no se mostrarn correctamente: no aparecern imgenes, no funcionarn enlaces, etc, ya que Dreamweaver simplemente no encontrar la pgina. Al modificar algn objeto que es referenciado por algn otro documento, se muestra una ventana similar a sta, 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, aunque esto depender de si tenemos configurada la opcin Mensaje al actualizar vnculos si movemos archivos. Lo cual podemos establecer desde el men Edicin, opcin Preferencias, categora General.
3.5. 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. Si no los enlaces no funcionarn correctamente, y es posible que algunas imgenes no se muestren. Para subir los archivos va 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 ms utilizados es FileZilla, desde su pgina web podrs descargarte el programa. Una vez instalado, abre el programa y haz clic en Archivo Gestor de sitios y luego en Nuevo sitio para configurar un nuevo sitio FTP.
Aqu debers introducir los datos que te facilit el servidor donde vas a alojar tus pginas: Servidor, Usuario y Contrasea. Rellena los campos y haz clic en Conectar. Se conectar automticamente y podrs ver una carpeta donde
podrs copiar los archivos que hayas creado. La parte central de la pantalla estar dividida en dos columnas. A la izquierda, la marcada como Sitio local, nos permite explorar la estructura de archivos y carpetas de nuestro sitio. A la derecha encontramos Sitio remoto, con los archivos ubicados en el servidor FTP.
Ahora no tenemos ms que arrastrar los archivos del sitio local al remoto para subirlos, o del remoto al local, para descargarlos al equipo. 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 html, public_html o httpdocs y sube tus archivos all.
3.6. 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 Apariencia (CSS), como ves en la imagen anterior, encontramos las propiedades: Fuente de pgina: es el tipo de letra que le aplicaremos al texto. Tamao: es el tamao de la fuente que aplicaremos al texto. Color del texto: es el color de la fuente. Color del 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. 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. Repetir: permite especificar si queremos que la imagen de fondo se repita o no. Si no queremos que se
repita, seleccionamos la opcin no-repeat. Si queremos que se repita o dejamos la opcin en blanco o seleccionamos la opcin repeat. Si queremos que se repita solo en horizontal seleccionamos la opcin repeat-x y si queremos que se repita en vertical, entonces seleccionamos repeat-y. Mrgenes: permiten establecer mrgenes en el documento, es decir, la distancia entre donde empieza el contenido de la pgina y la ventana del navegador. En la categora Apariencia (HTML), como vemos en la imagen siguiente, 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. 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. Texto: es el color de la fuente. Vnculos: es el color que mostrar el texto de los vnculos. Vnculos visitados: es el color que mostrar el texto de los vnculos visitados. Vnculos activos: es el color que mostrar el vnculo cuando el cursor del ratn hace clic sobre el mismo. Mrgenes: permiten establecer mrgenes en el documento, es decir, la distancia entre donde empieza el contenido de la pgina y la ventana del navegador. Podemos observar que muchas propiedades HTML y CSS son similares. La diferencia es que CSS aplica nuestra configuracin utilizando reglas de estilo, mientras que HTML lo hace con atributos HTML. Estos ltimos estn cayendo en desuso, ya que se tiende a limitar el HTML al contenido, y no al diseo. Por eso, te desaconsejamos su uso.
47
En la categora Vnculos (CSS) encontramos las propiedades:
Fuente de vnculo: es el tipo de letra que mostrar el texto del vnculo. Tamao: es el tamao del texto de los vnculos. 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 de sustitucin: es el color del texto del vnculo cuando situamos el ratn encima del vnculo. 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 Encabezados (CSS) encontramos la propiedad:
48
Fuente de encabezado: permite establece el tipo de fuente de los encabezados. El resto propiedades hacen referencia al estilo cursiva o negrita, as como al tamao y color que queremos aplicar a cada tipo de encabezado. 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 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 .
3.7. 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 cualquier navegador bajo cualquier sistema operativo. Esto no quiere decir que slo podamos utilizar estos colores. Podemos personalizarlos 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 vimos en este tema. 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 #39F, el botn quedara del siguiente modo: .
En la web, los colores se representan por la cantidad que contienen de los colores primarios aditivos (Rojo,
Verde y Azul). Para indicar la cantidad de cada uno, se utilizan nmeros hexadecimales, que van del 0 a la F (A=10, B=11, ..., F=16). El valor mnimo (00) indica la ausencia total de ese color, y el mximo (FF) su intensidad total. Para indicar que nos referimos a un color, utilizamos el smbolo # la principio del cdigo. Por tanto, podemos definir un color como #F7F0E2 donde el primer par corresponde al rojo, el segundo al azul y el ltimo al verde. En Dreamweaver observars muchas veces que se emplean slo tres valores. En este caso, se interpreta que los valores de los pares estn repetidos. Es decir, los colores #FF22AA y #F2A son el mismo.
Para practicar puedes realizar el Ejercicio paso a paso Crear nuevo documento y modificar sus propiedades.
Ejercicio propuesto de la Unidad 3
50
4. El texto:propiedades.

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 clases y estilos creados por nosotros mismos, no predefinidos.
4.1. Caractersticas del texto

Las caractersticas del texto seleccionado pueden ser definidas a travs del men Formato, y a travs del inspector de propiedades. Vamos a ver las posibilidades que se nos ofrecen a travs del inspector de propiedades, que estn clasificadas en dos categoras HTML y CSS. Comenzamos viendo las propiedades HTML
Todas estas propiedades generan etiquetas HTML, que tienen un estilo por defecto en el navegador. Pero al final, podremos personalizarlas con CSS para que se vean exactamente como queramos. Formato: Permite seleccionar un formato de prrafo ya definido para HTML, que puede ser encabezado, prrafo o formato predeterminado. Los encabezados se utilizan para establecer ttulos dentro de un documento. El formato predeterminado 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 predeterminado se respetar que hayan varios espacios en lugar de solo uno. El texto normal, debera ir siempre en prrafos, salvo que est en otros elementos, como tablas o listas. Es importante emplear correctamente los encabezados, ya que se organizar mejor el contenido de nuestra web, y es importante de cara a buscadores y visitantes. No te preocupes por cmo se muestran esos encabezados, recuerda que siempre podremos personalizarlo. Estilo: El botn B encierra el texto en una etiqueta <strong></strong>, que por defecto se muestra en negrita. El botn I, lo encierra entre <em></em>, que por defecto se ve en cursiva. Estas son las etiquetas de resaltado ms habituales, pero existen otras que encontramos a travs del men Texto. Por ejemplo, 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. Adems, emplea etiquetas que estn en desuso. Lista:
Estos botones permiten crear listas con vietas o listas numeradas. Veremos qu son las listas en el siguiente apartado. Sangra: Estos dos botones permiten sangrar el texto y anular la sangra. La sangra es una especie de margen que se establece a ambos lados del texto. En este caso los botones se refieren a sangra a la izquierda del texto. Si lo aplicamos sobre texto normal, lo encerrar en una etiqueta <blockquote></blockquote>, que por defecto se muestra indentada hacia la derecha. En cambio, al aplicarlo sobre una lista, crear una sublista dentro de sta. Accediendo a las propiedades CSS. Las hojas de estilo en cascada (CSS, Cascading Style Sheets) nos permiten formatear nuestra pgina y darle el diseo que queramos. Podemos cambiar desde propiedades simples, como el color de fondo, hasta cosas ms vistosas, como hacer que un bloque se muestre en una posicin determinada o que un elemento cambie al pasar el cursor sobre l. Profundizaremos en esto ms adelante, por ser una parte fundamental en la creacin de pginas web. Tenemos ms posibilidades a la hora de aplicar formatos. Dreamweaver CS6 nos proporciona numerosas funciones para la creacin de estilos mediante hojas de estilos en cascada .
Regla de destino: Las reglas CSS sirven para definir a qu elemento aplicamos el estilo, y cmo lo hacemos. Podemos definir una Nueva Regla, eliminarla o aplicar una clase. Veremos esto antes de acabar el tema. Editar regla: Mediante este botn accedemos a las opciones para la creacin o modificacin de estilos CSS, de la regla seleccionada. Panel CSS: Este botn abre el panel CSS si no lo tuviramos abierto.
52
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. Estilo: Estos botones ponen el texto en negrita y cursiva respectivamente. Pero en este caso, generan un estilo css en lnea. Alineacin: A travs de estos botones es posible establecer la alineacin del texto de una de estas cuatro formas distintas: izquierda, centrada, derecha y justificada. Hemos de aplicarlo sobre el elemento que contiene el texto que queremos alinear, por ejemplo sobre un prrafo. Tamao: Permite cambiar el tamao del texto. El tamao lo podemos indicar en diversas unidades, en pxeles, porcentajes del tamao base, 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. Para practicar puedes realizar el Ejercicio paso a paso Insertar texto y modificar sus propiedades.
4.2. 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 Formato. La lista con vietas (sin ordenar) se selecciona a travs del botn (ordenada) se selecciona a travs del botn . Ejemplo de lista numerada (ordenada): 1. Preparar la mochila 1. Sacar los libros de ese da
, mientras que la lista numerada
2.
53
2.
1. 1. 2. Introducir los libros del da siguiente 2. Ponerme el pijama 3. Lavarme los dientes 4. Poner el despertador Ejemplo de lista con vietas (sin ordenar): Perro Gato Aves Canario Loro Hmster
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 Formato, opcin Lista, es posible acceder a las propiedades de la lista seleccionada. Se debe seleccionar el texto de la lista previamente o tener el cursor en algn lugar de la lista para que se active este submen. En la ventana Propiedades de lista se puede especificar el tipo de lista (con nmeros o con vietas), el tipo de nmeros o vietas que se utilizarn (en la propiedad Estilo:), y en el caso de las listas ordenadas, el nmero por el que comenzar el recuento.
Para practicar puedes realizar el Ejercicio paso a paso Convertir texto en una lista.
4.3. 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. Pero 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. Lo mismo ocurrir con los caracteres que no tenemos en el teclado. Haz clic en el men Insertar y selecciona la opcin HTML vers el desplegable de la imagen inferior.
Slo coloca el cursor 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:
55
4.4. Estilos CSS. Introduccin

Los estilos CSS 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 permiten, como veremos ms adelante, definir prcticamente cualquier propiedad de los elementos que contendrn nuestra web. Podemos definir los estilos para determinadas etiquetas, como encabezados (<h1>, <h2>...), prrafos (<p>), enlaces (<a>), etc... lo que formatear todas las apariciones de esta etiqueta en el mbito del estilo. Tambin podemos crear clases. Algo as como definir un estilo y darle un alias. El estilo afectar a todos los elementos a los que apliquemos esa clase. Por otro lado, al crear el estilo, podemos definirlo como un estilo en lnea (afectar slo al elemento seleccionado) o crear una regla, que puede afectar a toda la pgina, o a todo el sitio si la guardamos en un archivo CSS. 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.5. Crear un estilo personalizado

Con Dreamweaver CS6, las caractersticas que apliquemos a un texto a travs del Inspector de propiedades CSS crearn automticamente estilos CSS. Aunque tenemos que decidir a qu elementos afecta. Vemoslo: Crear un estilo en lnea. Por ejemplo, si queremos que un determinado estilo afecte a un nico elemento y en un caso puntual, podemos crearlo como un estilo en lnea. Esto incrustar el estilo en la propia etiqueta HTML, por lo que si alguna vez queremos modificarlo, deberemos de ir al elemento. En el Inspector de propiedades CSS, en Regla de destino, seleccionamos <Nuevo estilo en lnea>.
A continuacin, definimos las propiedades del estilo. Insistimos que esta opcin es la menos flexible y debe empelarse slo en casos concretos, cuando el estilo no se repita, y no tenga sentido mantenerlo si borramos esa etiqueta concreta.
Crear una regla de estilo: Vamos a crear un estilo que afecte a todas las etiquetas de un tipo, slo a las que estn contenidas en determinados elementos o una clase. Para ello, En el Inspector de propiedades CSS, en Regla de destino, seleccionamos <Nueva regla CSS>.
Ahora intentamos modificar sus propiedades o pulsamos en Editar regla . En cualquier caso nos aparecer la siguiente ventana:
57
Tipo de selector: el tipo de selector es fundamental, ya que determina a qu elementos afectar el estilo. Podemos elegir entre cuatro tipos de selector: Clase . Es el alias que tomar el estilo, y para que afecte a un elemento, debemos de aplicarle esa clase. El nombre de la clase va precedido por un punto, y si no lo ponemos lo har Dreamweaver. ID. El id es un atributo html, que podemos dar a cualquier elemento, y que lo identifica de forma nica y concreta. Por tanto, el estilo slo puede afectar a un elemento en cada pgina, al que tenga ese ID. En el selector, se escribe precedido por #. Etiqueta. El estilo afectar a todas las apariciones de la etiqueta HTML indicada. Compuesto. Combina los selectores anteriores. Por ejemplo, p.resaltado afecta nicamente a los prrafos con la clase resaltado, pero no a los encabezados con esa clase. Tambin se pueden anidar. Por ejemplo ul#menu li p afecta slo a los prrafos que estn dentro de un elemento de una lista con el id menu. Nombre del selector: esta opcin permite asignar un nombre al selector.
Depende ntimamente del tipo de selector, pues aqu introduciremos el nombre de la clase, id, etiqueta, etc...
Por defecto, indicar el elemento seleccionado, pero podemos escribir el que queramos. Definicin de regla: esta opcin nos permite guardar el estilo en el documento actual o en un nuevo archivo .css.
Si elegimos (Slo este documento) la definicin del estilo se guardar en la cabecera de la pgina, por lo que slo estar disponible dentro de sta. Si elegimos (Nueva hoja de estilo) se crear un archivo CSS. Podremos emplear estos estilos en cualquier pgina del sitio slo con vincular la hoja de estilos. Deberemos de indicar dnde guardar el archivo css que contendr los estilos. Normalmente en la misma carpeta que las pginas. Si ya estamos utilizando una hoja de estilo, podremos seleccionarla aqu y los estilos se aadirn ella.
4.6. Definir o editar un estilo

Una vez creado, tenemos que definir las propiedades que formarn el estilo. Para ello, encontramos las opciones bsicas en el Inspector de propiedades CSS.
Observa que la regla que estamos editando es la que aparece en Regla de destino. Si queremos editar otra regla, hacemos clic en el desplegable y la seleccionamos, ya que una vez creadas se van aadiendo a la lista. Si queremos acceder a todas las propiedades, podemos pulsar en el botn Editar regla . Se abrir la ventana Definicin de regla.
59
Aqu encontramos todas las propiedades CSS agrupadas por Categoras. Las veremos ms adelante. Esta ventana es la opcin ms cmoda nada ms crear el estilo, cuando tenemos que cambiar varias propiedades. Para pequeos cambios que no podamos hacer desde el Inspector de propiedades y otras funciones extras, disponemos del panel Estilos CSS. Podemos acceder a l desde el men Ventanas o pulsando en el botn Panel CSS.
En la parte superior vemos las propiedades que afectan al elemento, en medio las reglas aplicadas, y en la parte inferior las propiedades del estilo actual.
60
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 accedemos al panel Estilos, hacemos clic con el botn derecho sobre el estilo y seleccionamos la opcin Cambiar nombre... Aparecer un cuadro de dilogo para que introduzcamos el nuevo nombre como la imagen inferior.
Si quieres aprender ms sobre el panel Estilos CSS, puedes hacerlo aqu
Nota: En los primeros ejercicios del curso iremos aplicando propiedades sin haber explicado previamente cada una. Ms adelante detallaremos qu hacen las propiedades existentes. No obstante, sabiendo un poco de ingls resultan muy intuitivas. Para practicar lo que hemos visto, puedes realizar el Ejercicio paso a paso Redefinir el estilo de una etiqueta.
4.7. Aplicar un estilo

En el caso de haber creado una regla para una etiqueta, no ser necesario aplicarla, ya que directamente afecta a todas las etiquetas de ese tipo. Por tanto lo que tendremos que aplicar sern los estilos que definamos como clases. Veamos cmo hacerlo: En el documento, selecciona el texto al que deseas aplicar el estilo CSS. Si situamos el punto de insercin, pero sin seleccionar, el estilo se aplicar a la primera etiqueta que contenga el texto (por ejemplo el prrafo). En el inspector de Propiedades seleccionamos la opcin CSS y seleccionamos el estilo creado por nosotros de la lista que aparece al desplegar el cuadro Regla de Destino. Desde las propiedades HTML tambin podemos hacerlo, utilizando el desplegable Clase .
61
Si queremos aplicar la clase a una etiqueta, podemos hacer clic derecho sobre ella en la barra de estado, y seleccionar la clase deseada del men Establecer clase .
Todas las reglas disponibles estan accesibles desde el men Formato Estilos CSS. Observa que existe una clase llamada ninguna. Lo que hace esta opcin es quitar la clase al elemento. La barra de estado nos ayudar a saber qu clase tiene aplicada un elemento. La clase aparecer junto al nombre de la etiqueta, separada por un punto.
Para practicar puedes realizar el Ejercicio paso a paso Crear y aplicar una clase y el ejercicio paso a paso Modificar el estilo de una lista.
4.8. Hojas de estilos

Exportar estilos Es frecuente que comencemos creando los estilos en la propia pgina, y despus al ver que los necesitaremos en otras pginas del sitio, los pasemos a una hoja de estilo. Dreamweaver nos permite exportar estos estilos fcilmente. Utilizamos el panel Estilos CSS (Mays + F11). En este caso nos ser ms til la vista Todo. Agrupados en <style> encontramos los estilos creados en la pgina.
Seleccionamos las reglas que queramos exportar, y en las propiedades del panel (el icono de la esquina superior derecha) seleccionamos Mover Reglas CSS.... Nos aparecer la siguiente ventana:
Encontramos dos opciones para ubicar los estilos:
Hoja de estilos nos permite seleccionar una hoja ya existente. Las reglas se aadirn a ella. Una nueva hoja de estilos... crear una hoja nueva para las reglas exportadas. Deberemos de indicar dnde queremos guardar el archivo, normalmente en la misma carpeta que las pginas. Los estilos seleccionados se quitarn de la pgina actual, y se vincular con la hoja de estilos.
Vincular una hoja de estilos. Si queremos utilizar una hoja de estilos ya existente en nuestra pgina, debemos vincularla. Podemos hacerlo desde el men Formato Estilos CSS Adjuntar hoja de estilos... o desde el panel Estilos CSS. Lo nico que tendremos que hacer es seleccionar el archivo a vincular. Las hojas de estilo tienen la extensin .css. Recuerda, que aunque en principio Dreamweaver nos permite elegir cualquier archivo del equipo, todos los
archivos que utilicemos deben de estar dentro del sitio.
Para practicar lo que acabamos de ver, puedes seguir el Ejercicio paso a paso Exportar y vincular hojas de estilo.
64
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.
5.1. 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. Cuando creemos un enlace, lo que realmente haremos ser crear una etiqueta <a></a> que es la que en
HTML se encarga de definir los enlaces. Esto podrs observarlo en la barra de estado:
5.2. Tipos de referencia

Existen diferentes clases de rutas de acceso a la hora de definir los vnculos. Estas referencias no se limitan a los enlaces, se comportarn igual cuando indiquemos la ubicacin de una imagen, de un archivo Flash, de la hoja de estilo, etc. Referencia absoluta: Conduce al sitio en el que se encuentra el documento utilizando la ruta completa del archivo, incluyendo el protocolo http://. Por ejemplo, http://www.aulaclic.com, o http://www.misitio.com/seccion2/pagina1.html. La referencia absoluta es independiente de la ubicacin de la pgina que contiene el enlace, y ser vlida siempre que no cambie la ubicacin del archivo enlazado. Es la opcin obligatoria si pretendemos enlazar a archivos fuera de nuestro sitio (enlaces externos).
Referencia relativa al documento (por defecto): La ubicacin del archivo enlazado se toma en relacin con la ubicacin del la pgina. Es decir, partimos de la carpeta en la que se encuentra el documento. Si queremos enlazar con una pgina o archivo dentro de la misma carpeta, no tenemos ms que utilizar su nombre. Por ejemplo, pagina2.htm. Si est en una subcarpeta de la pgina actual, no tenemos ms que indicar el nombre de la carpeta antes del archivo, y separarlos por una barra (/). Por ejemplo imagenes/miimagen.gif.
5. Hiperenlaces.
Si queremos referirnos 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. Esta opcin depende de la ubicacin del archivo, y pueden no funcionar correctamente si alteramos la estructura de carpetas. Esta es la opcin por defecto de Dreamweaver, y es la forma ms habitual para enlazar archivos dentro del sitio.
Referencia relativa al sitio: Conduce a un documento situado dentro del mismo sitio que el documento actual. Tomando como origen la carpeta raz del sitio. Para indicar la ruta relativa al sitio, precedemos la ruta de enlace por la barra /. En el ejemplo anterior si tuvisemos 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. Por tanto, podramos poner ese vnculo en cualquier pgina del sitio y funcionara independientemente de su ubicacin. Estos enlaces no funcionarn en el sitio local , a no ser que configuremos un servidor de pruebas como veremos ms adelante, ya que Windows interpretar como raz la raz del disco duro.
Marcadores o Puntos de fijacin: Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello, indicamos el nombre del punto de fijacin a continuacin de la ruta del archivo (relativa o absoluta) separados por una almohadilla (#). El formato sera nombre_de_documento.extension#nombre_de_punto. Si el punto de fijacin est en la propia pgina, basta con indicar nicamente el punto en el enlace, por ejemplo #apartado2
66
5. Hiperenlaces.
Podemos definir el punto dentro de un documento a travs del men Insertar, opcin Anclaje con nombre . O podemos utilizar el atributo ID de cualquier elemento (se puede establecer desde el Inspector de Propiedades HTML). En cualquier caso, los nombres no deben de estar repetidos en la pgina.
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.
5.3. 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 HTML. Por ejemplo, en la siguiente imagen hay un enlace a www.aulaclic.es, que al ser un archivo externo es de referencia absoluta, por eso contiene http://
Es posible crear tambin vnculos vacos, que pueden ser tiles cuando se utilizan comportamientos, etc. Para ello es necesario escribir en Vnculo nicamente una almohadilla #. Veremos su utilidad ms adelante.
Otra forma de crear un enlace es a travs del men Insertar, opcin Hipervnculo.
67
5. Hiperenlaces.
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. Si tenamos un texto seleccionado, aparecer ah. 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 Dreamweaver te crear un enlace relativo al documento. Si quieres que los enlaces sean relativos al sitio visita este avanzado . Destino: la ventana donde se abrir la pgina, este campo se explica en el siguiente apartado. Ttulo: se trata de la ayuda contextual del vnculo, que aparecer al mantener un instante el cursor sobre el enlace. 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. Por defecto, se tabularn por orden de aparicin.
5.4. Destino del enlace

El destino del enlace determina en qu ventana va a ser abierta la pgina vinculada, puede variar dependiendo de si el documento est basado en marcos. Puede especificarse en el inspector de propiedades HTML a travs de Destino, o en la ventana que aparece a travs del men Insertar, opcin Hipervnculo.
_blank: Abre el documento vinculado en una nueva ventana o pestaa del navegador. _parent: Abre el documento vinculado en la ventana del marco que contiene el vnculo o en el conjunto de marcos padre. Tiene sentido si se emplean marcos. _self: Es la opcin predeterminada, y la que se produce si no indicamos otra cosa. Abre el documento vinculado en el mismo marco o ventana que el vnculo. _top: Abre el documento vinculado en la ventana completa del navegador. Tiene sentido si se emplean marcos. 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. Si la pgina no usa marcos (lo habitual hoy en da) simplemente no especificaremos nada para abrirlo en la misma ventana, y emplearemos _blank para abrir ventanas nuevas.
5. Hiperenlaces.
Lo habitual es abrir las los enlaces a pginas del sitio en la misma ventana, y los enlaces externos en ventanas nuevas. Otra tendencia dice que una pgina nunca debera de abrir nuevas ventanas, y que debe de ser el usuario el que decida qu enlaces quiere abrir en ventanas nuevas. En la mayora de navegadores, para abrir un enlace un una ventana nueva, basta con hacer clic con la ruedecilla del ratn.
5.5. Formato del enlace

En general, un texto que tiene asociado un vnculo suele aparecer subrayado. Al mismo tiempo, puede adquirir cuatro colores diferentes que pueden especificarse a travs de las propiedades de la pgina. Estos cuatro colores diferentes corresponden a los tres estados del vnculo: vnculo normal, vnculo activo (el ltimo pulsado), vnculo visitado o vnculo de sustitucin (cuando el cursor est sobre el vnculo). Aqu tienes dos vnculos de ejemplo: www.aulaclic.es www.elpais.com Si has visitado alguno, vers que sale en un tono morado, si no sale en azul. Recuerda que como todo en nuestra pgina, los vnculos tienen un formato por defecto, pero es totalmente personalizable por CSS. Para ello, basta con crear una Regla de estilo para la etiqueta a. Si queremos distinguir entre los tres estados del enlace, emplearemos los siguientes selectores: a:link para los enlaces normales. a:visited para los enlaces visitados. a:active para los enlaces activos. a:hover para los enlaces con el cursor encima. Aunque recuerda que en las propiedades del documento tenamos la categora Vnculos CSS que nos permite establecer estos valores.
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. Aqu tenemos dos vnculos en una imagen:
Como puedes ver, la primera imagen que hace de vnculo contiene un recuadro alrededor. Este es el formato por defecto, pero no suele quedar bien, sobre todo en imgenes con el fondo transparente. Las ltimas versiones de los navegadores Chrome (v.24) y Firefox (v.18) ya no dibujan el contorno de la
5. Hiperenlaces.
imagen, IE 9 si lo dibuja. Veamos como quitarlo utilizando CSS. En el Inspector de propiedades CSS seleccionamos Nueva regla CSS en Regla de destino, y pulsamos Editar regla.
En Tipo de selector, elegimos Compuesto, y en Nombre de selector escribimos a img, es decir, imgenes que estn dentro de una etiqueta a (de enlace). Se abrir la ventana Definicin de regla para a img:
En ella, seleccionamos la categora Borde, y en Style seleccionamos none. Pulsamos Aceptar. Esta regla har que las imgenes con enlace se muestren sin 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.
Para practicar puedes realizar el Ejercicio paso a paso Crear un hiperenlace.

5. Hiperenlaces.
5.6. 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.
Lo que hace esta opcin depende del navegador que estemos utilizando, tericamente, el navegador debera abrir el cliente de correo predeterminado del usuario (Outlook, Firebird...). Pero en la prctica cada navegador se comporta de una forma distinta, sobre todo si no tenemos instalado un cliente de correo electrnco y vemos el correo con webmail (Gmail, Hotmail, ...) Por ejemplo, con las versiones disponbles a la hora de escribir esto, IE9 da un mensage de error diciendo que no hay ningn cliente de correo instalado, Firefox saca una ventana ofreciendo abrir un correo webmail y Chrome no hace nada. Por lo tanto usar mailto es una opcin que puede no ser prctica si el usuario no tiene instalado un cliente de correo (Outlook, Firebird...), tamoco si se conecta en un ordenador pblico, o si utiliza un telfono mvil o una tableta. Siempre que se pueda, es mejor crear un formulario de contacto, aunque esto requerir una pgina dinmica como veremos a lo largo del curso. Otra opcin sera mostrar nuestra direccin de correo, para que el usuario pueda enviarnos el correo como quiera. Si publicamos nuestra direccin en la web es mejor hacerlo como una imagen, o escribindola de forma que la pueda entender un humano (por ejemplo micorreo(arr)sitio.com) para evitar que sea reconocida por robots que la emplearn para el envo de correo no deseado. Para practicar puedes realizar el Ejercicio paso a paso Crear 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 .
71
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.
6.1. Introduccin
Las imgenes son un aspecto muy importante de la web. Ya sea como complementos a la informacin o parte del diseo, la hacen mucho ms atractiva a ojos del visitante. No obstante, no conviene abusar, ya que aumentarn mucho el tamao final de la web. Existen una serie de formatos de imagen ms recomendables que otros para ser introducidos en una pgina web. Esta informacin puedes consultarla aqu .
6.2. 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. Cuando te acostumbres, te ser ms cmodo acceder con la combinacin de teclas Ctrl + Alt + I.
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 cambiamos la pgina de carpeta, lo habitual es cambiar tambin sus imgenes.
6. Imgenes.
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.
Otra forma de insertar una imagen, es arrastrarla directamente desde el panel Archivos sobre el documento.
Si insertamos una imagen y luego la borramos, la movemos, o escribimos mal su nombre, en Dreamweaver aparecer as indicando que el enlace al archivo est roto. .
En ese caso, la imagen que aparecer en el navegador ser similar a sta:
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 paso a paso Insertar una imagen.
73
6. Imgenes.
6.3. Propiedades de una imagen

Cuando seleccionamos una imagen el Inspector de propiedades muestra esta apariencia:
Desde aqu podremos establecer distintos atributos a la imagen: Como pasaba con el texto, podemos crear un hiperenlace en la imagen escribiendo la direccin en el campo Vnculo, y decidir en qu ventana se abre con el campo Destino. Origen contiene el path (cmino) de la imagen. En el campo Alt escribimos el texto que remplazar a la imagen si sta no puede mostrarse. Es un atributo muy importante que deberamos incluir siempre para hacer pginas accesibles. Por ejemplo, el texto que se escribe ser ledo por los programas lectores para invidentes. Si lo que queremos es mostrar un ayuda contextual cuando el usuario tenga el cursor sobre la imagen, debemos de empelar el atributo title. No podemos insertarlo desde el panel, tenemos que hacerlo desde el cdigo fuente con el formato title="Texto a mostrar". Internet Explorer en versiones anteriores a la versin 9, mostraba Alt como ayuda contextual cuando la imagen no lleva title, pero el resto de navegadores no lo harn, respetando el estndar.
An. y Al. son las dimensiones de la imagen, ancho y alto. Dreamweaver las pondr directamente. En Clase podrs asignarle un estilo que hayas creado anteriormente, as podrs darle alineacin, bordes e incluso tamao con slo un clic. El ID es un identificador opcional para usarlo con CSS o Javascript. Podemos hacer que cada zona de la imagen tenga un vnculo distinto, creando un Mapa de imagen. Puedes ver su uso en este avanzado . Y con lo aprendido, realizar el Ejercicio paso a paso Crear mapas de imagen. Adems, encontramos algunos controles de Edicin: El botn nos permite optimizar la imagen desde
Dreamweaver, cambiando el formato o creando transparencias como puedes ver aqu . Por otro lado, el icono nos permite editar la imagen con un programa externo, como Photoshop o Paint. Puedes ver cmo cambiar el programa de edicin aqu .
6.4. Cambiar el tamao de una imagen

Dentro de Dreamweaver puede modificarse el tamao de las imgenes. Por un lado, podemos cambiar el tamao con el que se ve una imagen, pero dicho cambio de tamao no se aplica directamente sobre el archivo de imagen, que conservar el tamao original. Es muy probable que la imagen resultante no sea de buena calidad, en comparacin de cmo podra quedar
6. Imgenes.
modificndola desde un editor externo, como Fireworks, Photoshop, etc.. 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:
Tamao original
Con tamao modificado El resultado puede ser ms o menos satisfactorio, dependiendo del navegador que es el que aplica realmente el reescalado, 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 Ancho o Alto. 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.
Como hemos comentado, este cambio de tamao se produce alterando los atributos de anchura y altura, pero no cambiando el tamao real del archivo, por lo que el usuario deber descargarse el archivo completo con su tamao original. Por ejemplo, si tenemos una fotografa de nuestra cmara de fotos, de un tamao grande (por ejemplo 2592x1944px), y queremos mostrar una miniatura (por ejemplo, de 200x150px) esta sera una mala solucin, porque el usuario se estara descargando el archivo completo, y no una miniatura real que ocupara mucho menos tamao.
6. Imgenes.
Dreamweaver tambin nos permite cambiar el tamao real del archivo de imagen abriendo un editor de imagen. Para hacerlo, seleccionamos la imagen, y pulsamos en el icono del Inspector de propiedades. Se
abrir la ventana del editor de imagen que hayamos definido como predeterminado (como vimos en el tema avanzado Cambiar el programa de edicin), si no lo hemos hecho nos preguntar que programa de edicin queremos utilizar.
6.5. 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. Veamos un ejemplo de rollover. Partiendo de las siguientes imgenes
Para insertar un rollover hay que dirigirse al men Insertar, Objetos de Imagen , a la opcin Imagen de sustitucin. En la nueva ventana hay que especificar la imagen original y la de sustitucin.
Es preferible que la opcin Carga previa de imagen de sustitucin est activa. Si se activa, la imagen de sustitucin se carga cuando se carga la pgina, de este modo se evitan las demoras debidas a la descarga de la imagen cuando llega el momento de que aparezca. El Texto alternativo es el texto que aparece al situar el puntero sobre una imagen, o el que aparecer en lugar de la imagen en el caso de que por algn motivo sta no pueda ser mostrada en el navegador. El texto alternativo puede asignarse a todas las imgenes, no slo a los rollovers. Puede hacerse a travs del campo Alt del inspector de propiedades de la imagen seleccionada.
76
6. Imgenes.
Para practicar puedes realizar el Ejercicio paso a paso Crear Rollover.
Existe una forma parecida de crear estos efectos utilizando CSS, y de hecho son ms utilizados. Bsicamente consiste en cambiar la imagen de fondo de un elemento. Puedes ver un ejemplo de barra de navegacin utilizando CSS en este avanzado .
6.6. Objetos inteligentes

Los objetos inteligentes son imgenes que obtenemos directamente desde un archivo de Photoshop (.psd). Al insertarlo, lo hacemos igual que con cualquier imagen, eligiendo el archivo de Photoshop.
Pero una archivo .psd no es un archivo que podamos mostrar en una pgina web. Por eso, lo que har Dreamweaver es convertirlo a un formato estndar. Por eso, tras abrirlo, Dreamweaver nos pedir que elijamos uno de los formatos gif, png o jpg y lo guardemos, con las mismas opciones que encontrbamos al pulsar el botn del Inspector de propiedades.
Qu ventajas obtenemos con todo esto? Si observas la esquina superior izquierda del objeto inteligente encontrars un icono como ste . Las dos flechas verdes indican que el archivo est sincronizado, es
decir, la imagen est generada a partir del ltimo archivo de Photoshop. Pero puede que en cualquier momento queramos modificar la imagen. Podemos hacerlo abriendo el archivo .psd, o pulsando el icono Photoshop. Tras guardar los cambios, vemos que el icono de la imagen en Dreamweaver ha cambiado, mostrando ahora una flecha roja: . Esto indica que la imagen que estamos viendo en Dreamweaver (jpg, psd, png) no es la Actualizar desde origen. del Inspector de propiedades, que abrir el archivo fuente de
misma que el original (psd) ya que se ha modificado. Podemos volverla a generar pulsando el icono
77
6. Imgenes.
Por lo tanto, los objetos inteligentes son tiles para imgenes que tengamos que editar frecuentemente.
78
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.
7.1. 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 difciles de realizar. La finalidad de las tablas es presentar una serie de datos de forma clara y organizada, dividindolos en filas y columnas. Hasta hace poco, y todava hoy es fcil encontrar diseos web basados en tablas. Esto es debido a la facilidad que nos ofrecen estos elementos para organizar contenidos y repartir el espacio. No obstante, esta no es una prctica recomendable, ya que las tablas no fueron pensadas para ello, y no crean una estructura clara, adems, si no estn bien anidadas pueden ocasionar problemas al analizar nuestra web con herramientas automticas, como los bots(robots) que indexan el contenido para los buscadores. Para maquetar nuestras pginas, lo recomendado es emplear los nuevos tags de HTML5 (<article>, <section> ... ), capas (div) y CSS. Las tablas estn formadas por un conjunto de celdas, distribuidas en filas y columnas. A continuacin tienes un ejemplo de tabla.
7.2. Insertar una tabla

Para insertar una tabla hay que dirigirse al men Insertar, a la opcin Tabla.
79
7. Tablas.
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 de la pgina o del elemento contenedor) 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). Si lo ponemos a 0 o en blanco, la tabla no mostrar borde. Relleno de celda (cellpadding) indica la distancia entre el contenido de las celdas y los bordes de stas. Espacio entre celdas (cellspacing) indica la distancia entre las celdas de la tabla.
Tambin se puede establecer si se quiere un encabezado para la tabla, por ejemplo para indicar el contenido de filas o columnas. Aunque podramos lograr el mismo diseo con celdas normales y estilos CSS, 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 Resumen: podemos indicar una descripcin de la tabla, los lectores de pantalla leen el texto del resumen pero dicho texto no aparece en el navegador del usuario.
80
7. Tablas.
7.3. 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 Texto dentro de una celda
C O L U M N A
CELDA FILA
Para poder insertar algn elemento en una celda, ya sea texto o imgenes, simplemente hay que situar el punto de insercin dentro de la celda deseada haciendo clic. El elemento lo insertaremos como hemos visto hasta ahora. Si queremos insertar elementos ya existentes en la celdas, tenemos que crear primero la tabla vaca, y despus seleccionar y arrastrar los elementos a insertar sobre la celda. No podemos seleccionar el texto, y crear la tabla "alrededor", como hacamos, por ejemplo, con las listas. Para practicar puedes realizar el Ejercicio paso a paso Crear y rellenar una tabla.
7.4. Seleccionar elementos de una tabla

Existen varias formas de seleccionar una tabla. Una de ellas es a travs del men Modificar estando el punto de insercin 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.
81
7. Tablas.
Tambin es posible seleccionar una pulsando con el ratn sobre el borde exterior que la rodea, o pulsando <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 punto de insercin en la tabla y no te aparece esa zona verde puedes activar su visualizacin
7. Tablas.
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 las opciones para Borrar o Igualar los anchos. Si en una tabla no indicamos los anchos, estos se ajustarn al contenido.
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 celda. Para seleccionar celdas: 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.
83
7. Tablas.
7.5. Formato de tabla

Las propiedades de la tabla se especifican a travs de su inspector de propiedades. En este caso, se crearn atributos para la tabla. Pero algunos de estos valores, como el ancho, los podemos especificar mediante CSS.
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 de la pantalla), el borde de la (en Col. borde) o los valores de relleno y espaciado de la celda. Si lo que se selecciona es una celda, o un conjunto de celdas, el inspector de propiedades cambia, para permitir especificar otros valores.
La parte superior del inspector de propiedades nos permite alternar entre las propiedades HTML, que en este caso sirven para especificar las propiedades del texto que se insertar dentro de la celda (o celdas) seleccionada, y la propiedades CSS para definir los estilos. La parte inferior sirve para especificar valores propios de la celda, como puede ser el color o imagen de fondo (que es preferible definir con CSS), la alineacin del contenido en horizontal (Horz.) y vertical (Vert.), especificar su tamao (An. y Al.) (en Fnd). Si no queremos que el tamao se ajuste al contenido, marcamos la opcin No aj. y si queremos convertirla en un encabezado, basta con marcar la opcin Enc..
Para practicar puedes realizar el Ejercicio paso a paso Modificar las propiedades de la tabla.
7.6. Formato CSS

Como cualquier elemento, podemos cambiar el aspecto de la tabla definiendo propiedades CSS. Los selectores. Podemos definir una clase y aplicrsela a la tabla desde el panel Propiedades, o si es una tabla en concreto, asignarle un ID y definir las propiedades para ese ID.
7. Tablas.
Pero y si queremos editar las propiedades de las etiquetas que forman la tabla? Fijmonos en el aspecto de la barra de estado cuando tenemos el punto de insercin en una celda:
Vemos que con el selector table nos referimos a la tabla completa . Con el selector tr hacemos referencia a las filas y con el selector td hacemos referencia a las celdas. Cuando las celdas sean encabezados, en vez de td, emplearemos el selector th. Observa que no hay un selector para referenciar a las columnas enteras, aunque s existe un mtodo empleando etiquetas <col />, es ms avanzado y no lo veremos en este curso. Podemos crear clases y asignarlas a la tabla, a una fila o a una columna. Recuerda que podemos emplear selectores compuestos. As para referirnos a las filas de una tabla con la clase miclase, lo haremos con el selector .miclase tr, y emplearemos .miclase td para referirnos sus celdas.
Nota: Si al crear una pgina definimos las propiedades del texto empleando las Propiedades de la pgina, Dreamweaver crea una regla con el selector body,td,th. Es decir, aplica el mismo estilo a la pgina, a las celdas y a los encabezados. Esto har que por ejemplo, si cambiamos la fuente de la tabla, el cambio no se aplique ya que prevalece la generada por Dreamweaver, por ser ms concreta. Esto puede entrar muchas veces en conflicto. Para evitarlo, lo mejor es editar el selector dejndolo slo como body. Recuerda que para editar un selector, hacemos clic derecho sobre la regla en el panel Estilos CSS, y elegimos Editar selector en el men contextual.
Propiedades. Podemos aplicar la mayora de propiedades que ya hemos empleado a las tablas, filas y columnas: fuente, tamao, color, imagen de fondo. Existen algunas propiedades CSS especficas de las tablas, como el borde colapsado. Dreamweaver no nos permite asignar estos estilos con los asistentes, as que los veremos ms adelante. Un estilo muy til es el que nos permite centrar la tabla en la pgina. Para ello, debemos editar los mrgenes izquierdo y derecho (categora Cuadro), estableciendo el valor auto para ambos. Otro aspecto que facilita ver los datos en la tabla son las filas alternas. Para hacerlo, no tenemos ms que crear una clase que, por ejemplo, cambie el color de fondo, y aplicarla a filas alternas.
Para practicar puedes realizar el Ejercicio paso a paso Modificar el estilo de la tabla.
85
7. Tablas.
7.7. 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.
Para practicar puedes realizar el Ejercicio paso a paso Ajustar el tamao de la tabla.
7.8. 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.
86
7. Tablas.
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.
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.
87
7. Tablas.
Tambin se puede seleccionar la fila o columna a borrar y pulsar la tecla de borrado (Del o Supr)
7.9. 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 de una tabla se ha insertado otra tabla.
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, normalmente ms ancho. 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
7. Tablas.
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 rectngulo. No podemos combinarlas para formar una "L". 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 3 Podemos combinar celdas en vertical y horizontal: 2 4
Para dividir una celda hay que pulsar sobre el botn Dividir celda de la opcin Tabla.
del inspector de propiedades, o sobre la opcin
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 esto, puedes realizar el Ejercicio paso a paso Combinar celdas.
89
7. Tablas.
7.10. 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 o el Modo de tablas expandidas.
El Modo de tablas expandidas aade temporalmente relleno y espaciado de celda a las tablas de un documento y aumenta los bordes de las tablas para facilitar la edicin. Este modo se puede utilizar para seleccionar elementos de las tablas o colocar el punto de insercin de forma precisa e introducir contenido pero en este modo no vemos la pgina como quedar exactamente. En este curso nos limitaremos al modo estndar, aunque puedes emplear el Modo de tablas expandidas cuando lo creas til.
7.11. 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. Desde las pequeas pantallas de los porttiles de bajo coste, hasta monitores panormicos en alta resolucin. Existen dos tendencias principales a la hora de maquetar (distribuir los elementos) en nuestra pgina: el diseo fijo y el diseo elstico. El diseo fijo especifica las medidas en pxeles. Por lo que el contenido siempre se mostrar del mismo tamao, lo que facilita mucho el diseo. Por contra, se desaprovecha mucho el espacio en monitores grandes, o puede aparecer el "scroll" horizontal en monitores muy pequeos. Un ejemplo de este diseo sera la home de aulaClic. El diseo elstico especifica las medidas en porcentajes. Esto hace que el contenido se adapte al tamao de la ventana en la que se visualiza, lo que nos permite aprovecharla completamente. Por contra, en diseos elaborados, es ms complicado hacer que la pgina no se descuadre, sobre todo cuando es demasiado ancha o estrecha. Un ejemplo de este diseo es la pgina de este curso. Como recordars, el tamao de las tablas puede ser definido en pxeles o en porcentaje. Cuando el
7. Tablas.
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 del elemento que la contiene, lo cual implica que el contenido de la tabla se puede descuadrar. Pulsa aqu para ver 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. Si modificas el tamao de la ventana, vers que la tabla es 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 los lados de la tabla aparecer un gran espacio vaco. Pulsa aqu para ver una pgina con tablas de tamao 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, quedando demasiado estirado, lo que dificulta su lectura. 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 no tiene una anchura concreta, se ajusta al contenido. Si la queremos exactamente de de 200 pxeles, basta con introducir 200px en An.. 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 tabla no se vea muy afectado por el cambio de tamao de la ventana del navegador.
91
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. Lo primero que hay que decir es que los marcos prcticamente ya no se usan , sobre todo desde que no son soportados por el nuevo HTML 5. Sin embargo, puede ser til conocer como funcionan por si tienes que retocar alguna pgina antigua que contenga marcos.
8.1. Introduccin
Los marcos o frames sirven para distribuir 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. Cada uno de los marcos de una pgina, contiene un documento HTML individual. Por ejemplo, en la siguiente imagen 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 el documento index.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, sobre todo al principio, por lo que no
8. Marcos.
vamos a profundizar mucho en el tema, y veremos solamente algunos conceptos bsicos y ejemplos sencillos.
Como deciamos antes, actualmente los marcos han caido en desuso. Crean problemas a la hora de ser indexados por los buscadores, y estar correctamente indexado y posicionado es crucial para una web. Resultan confusos a la hora de utilizar los botones Atrs y Adelante de los navegadores. Con los Favoritos o Marcadores tambin resultan poco claros. Si no se define correctamente el destino de los enlaces pueden presentar problemas de anidamientos, ya que toda la pgina se abrir en una parte del marco. Por ejemplo, si vemos el cdigo fuente de una pgina con marcos, vemos que realmente no hay ms que las llamadas a las pginas correspondientes, por lo que no hay nada que indexar. Por otro lado, si se indexa una pgina, puede que el visitante llegue a ella directamente, no a travs del marco. Esto hace, por ejemplo, que el usuario no pueda acceder a los elementos de navegacin del sitio. La pega ms comn al no usar marcos es tener que repetir los elementos comunes, como el men y logo en cada pgina, con la complicacin correspondiente a la hora de hacer un cambio. No obstante, esto es fcilmente solucionable si empleamos PHP o JavaScript en nuestra pgina.
Por lo tanto, si piensas colgar tu pgina en internet para uso pblico, no te recomendamos su uso.
8.2. 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.
93
8. Marcos.
Como puedes ver en la imagen, aparece una lnea que divide el documento en dos. El documento de partida era uno nuevo. En este caso tendremos tres documentos: el de la izquierda, el de la derecha, y el que contiene el grupo de marcos. El de la derecha es el documento que tenamos inicialmente, que est en el marco conocido como marco padre (MainFrame). Para seleccionar el documento que contiene el grupo de marcos hay que pulsar sobre la lnea que separa los marcos. Esto solo es posible mientras dicho documento no se haya guardado.
Si en lugar de insertar un marco a la izquierda lo insertamos a la Derecha, el marco vaco aparecer a la derecha del documento original. En esta imagen puedes ver un ejemplo de marco a la derecha.
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.
94
8. Marcos.
8.3. Seleccionar marcos

Para seleccionar los marcos del documento es necesario dirigirse al panel Marcos, que puede abrirse a travs del men Ventana. Tambin puedes abrir el panel Marcos pulsando la combinacin de teclas Maysculas + 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.4. 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 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 . , ya que podemos
8.5. Configurar marcos

Una vez seleccionado un marco a travs del panel Marcos, pueden establecerse sus propiedades a travs del inspector de propiedades.
95
8. Marcos.
Cada marco tiene asignado un nombre, que puede cambiarse a travs de Nombre de marco. El nombre no puede contener espacios en blanco. En Origen aparece el nombre del documento HTML que est contenido en el marco. En Bordes puede elegirse si aparecer o no una lnea separando el marco del resto de marcos. En el caso de que se muestre el borde, se puede especificar un color para ste a travs de Color borde. Desplaz. indica si aparecern o no las barras de desplazamiento cuando el documento del marco no pueda visualizarse completamente. Si la opcin Mismo tamao est activa, indica que los usuarios no podrn variar las medidas del marco desde el navegador. El Ancho del margen y el Alto del margen indican la separacin que habr entre el contenido del marco y sus bordes izquierdo-derecho y superior-inferior. Si lo seleccionado es todo el conjunto de marcos (la pgina de marcos), el inspector de propiedades es algo diferente.
En Bordes puede elegirse si aparecer o no una lnea separando los marcos entre s y puede especificarse un color para este a travs de Color del borde. Tambin es posible establecer un grosor para el borde a travs de Ancho. El campo Columna (o Fila dependiendo del marco elegido en Seleccin Fila Col. ) sirve para especificar el tamao del marco, que puede ser en Pxeles, Porcentaje (de la ventana) o Relativo (proporcional al resto de marcos). Normalmente utilizars dos marcos, uno de ellos con tamao en Pxeles, que ser el que contenga la barra de navegacin, y el otro marco con tamao Relativo, para que se ajuste a la ventana del navegador.
8.6. Contenido del marco

Como ya has visto, el contenido de un marco puede establecerse a travs del campo Origen del inspector de propiedades.
8. Marcos.
Cuando trabajamos con marcos, queremos poder cargar diferentes documentos en cada uno de ellos. El contenido de alguno de los marcos ha de ser fijo, mientras que el de otros ha de poder variar. A travs del campo Origen del inspector de propiedades, slo es posible especificar el documento que se cargar inicialmente en el marco, pero hemos de poder cambiar este documento por otro a travs de vnculos. Como recordars, en el tema de hipervnculos vimos los posibles destinos de los enlaces. Estos destinos podan ser _blank, _parent, _self, y _top. Vamos a recordar para que serva cada uno de ellos, ya que ahora que ya sabes trabajar con marcos te sern ms fciles de entender.
_blank: Abre el documento vinculado en una ventana nueva del navegador. _parent: Abre el documento vinculado en la ventana del marco que contiene el vnculo o en el conjunto de marcos padre. Como ya sabes, el marco padre es el marco en el que se encuentra el documento inicial, sobre el que se han insertado el resto de marcos. _self: Es la opcin predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vnculo. _top: Abre el documento vinculado en la ventana completa del navegador, lo cual quiere decir que los marcos de la ventana desaparecern al abrir el vnculo en ella. Adems de estos destinos para los enlaces, tambin aparecern los nombres de los distintos marcos de la pgina. Por ejemplo leftFrame y mainFrame. Si abrimos el conjunto del marco en uno de estos destinos se producir un anidamiento. 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 paso a paso 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.
9.1. 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 PHP, 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 simple. Un formulario est formado, entre otras cosas, por etiquetas, campos de texto, mens desplegables, y botones.
9.2. Elementos de formulario

Los elementos de formulario pueden insertarse en una pgina a travs del men Insertar, opcin Formulario,
98
9. Formularios
o lo que es ms cmodo si vamos a insertar varios elementos, desde el panel Insertar en la seccin Formularios.
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. Antes de insertar estos elementos debemos crear el propio formulario tal y como veremos en el siguiente punto. 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.
99
9. Formularios
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. rea de texto Campo de texto Contrasea
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).
Tambin es posible cambiar el texto del botn, a travs de la propiedad Valor del inspector de propiedades.
Como mnimo tiene que haber un botn del tipo Enviar formulario , imprescindible para enviar los datos. Adems le suele acompaar un botn Restablecer formulario para hacer reset en el caso de que el usuario quiera comenzar de nuevo a rellenarlo. Casilla de verificacin Es un cuadrito que se puede activar o desactivar, para indicar si el usuario ha elegido una opcin o no. Deseo recibir informacin Puede asignrsele el Estado inicial como Activado o como Desactivado.
Botn de opcin Es un pequeo botn redondo que puede activarse o desactivarse. Si hay varios del mismo formulario con el
9. Formularios
mismo nombre, slo puede haber uno activado. Cuando se activa uno, automticamente se desactivan los dems. Esto obliga al usuario a slo poder elegir una opcin. Superman Spiderman Seleccionar (Lista/Men) Una lista o men es un elemento de formulario que lleva asociada una lista de opciones. --- Elige opcin lista ----- Elige opcin men--Perro Gato Canario Loro
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. Adems, al estar asociadas al control nos permite activarlo al pulsar sobre el texto. Esto es muy prctico en casillas de verificacin y botones de opcin. Sin etiqueta. Hay que pulsar sobre la casilla. Con etiqueta. Podemos pulsar en el texto.
Una propiedad muy importante de los formularios es su nombre. Ya que al recibir los datos, a travs del nombre sabremos qu control los enva.
101
9. Formularios
9.3. Crear formularios

Antes de insertar los elementos o controles del formulario, hemos de crear un formulario. Los elementos los introduciremos dentro de l, ya que cuando lo demos a enviar, slo se enviarn los datos de los elementos de dentro del formulario. Puedes crear formularios a travs del men Insertar Formulario, opcin Formulario, o desde el panel Insertar. Una vez creado un formulario, este aparecer en la ventana de Dreamweaver como un recuadro formado por lneas naranjas discontinuas, similar al de la imagen siguiente.
Estas lneas son ayudas visuales al trabajar en diseo, pero no se vern en el formulario final. Entre las propiedades del formulario, encontramos el campo Accin. En el indicamos a dnde se envan los datos. Normalmente, una pgina PHP que se encara de tratarlos.
Dentro de dicho formulario se podrn insertar los elementos de formulario, que como ya sabes puedes insertar a travs del men Insertar, opcin Formulario o desde el panel Insertar.
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. Podemos cambiar la apariencia de los formularios con CSS. En este caso, podemos emplear el selector form.
102
9. Formularios
9.4. Validar formularios

La validacin de formularios sirve para hacer que JavaScript valide el formulario antes de que se enve, avisando al usuario para que corrija los errores, como campos obligatorios sin rellenar. Esto es mucho ms eficiente y rpido que enviar la pgina y validarla slo en el servidor. 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 + F4. Comportamientos forma parte del panel Inspector de etiquetas. En este panel hay que desplegar el botn seleccionado el formulario previamente. y pulsar sobre la opcin Validar formulario , debers haber
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) y si ha de estar en un rango, una Direccin de correo electrnico, etc.
Para practicar puedes realizar el Ejercicio paso a paso Insertar elementos de formulario.


103
10. Multimedia

Vamos a ver cmo insertar elementos multimedia. En concreto, veremos cmo insertar una animacin Flash, un sonido y un vdeo, que son los ms empleados. Utilizaremos dos mtodos, usando las nuevas etiquetas de HTML 5 y mediante los plug-in.
10.1. Pelculas Flash (SWF)

Las pelculas Flash son animaciones, cuyo archivo tiene la extensin SWF. Es frecuente verlas en las pginas iniciales de los sitios web, a modo de presentacin hacia los usuarios, como banners publicitarios, como botones... Flash todavia es uno de los elementos multimedia ms empleados en las pginas web, aunque su uso est decreciendo con la llegada de HTML 5 y el vdeo en mp4. Estas pelculas pueden crearse mediante el programa Flash tambin de Adobe. Para poder ser visualizado en el navegador, y necesitan que el usuario tenga instalado el plug-in de Flash Player. Su instalacin es muy sencilla y normalmente ya viene con el navegador. Sin embargo en los telfonos mviles y tabletas no ocurre lo mismo ya que Android y Apple no lo incluyen. Flash
Las pelculas Flash pueden insertarse en una pgina a travs del men Insertar Media, opcin SWF, o pulsando Ctrl + Alt + F. Tambin pueden insertarse empleando el panel Insertar en la categora Comn, pulsando sobre la opcin SWF que aparece al desplegar el men Media.
Veamos las opciones ms importantes que nos ofrece el inspector de propiedades cuando tenemos
10. Multimedia
seleccionado el archivo Flash:
Como en otros elementos, como las imgenes, podemos asignarle el ancho (An.) y alto (Alt.). En Archivo, indicamos la ruta hasta el archivo SWF. Si disponemos del programa Flash instalado en el equipo, y vamos a ir haciendo cambios sobre el archivo original (.fla), podremos editarlo con pulsar en Editar. 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 hasta que el usuario la activase. Por tanto interesa desmarcar esta opcin cuando se desea que la reproduccin sea activada por algn comportamiento. La Calidad, cuanto ms baja, antes se cargar el archivo pero peor se ver. Conviene dejarla en Alta para verlo tal cul se cre. La Escala permite elegir cuanto se ver del archivo. Las pelculas Flash no siempre son del tamao exacto del contenido, pueden tener un escenario de fondo alrededor del objeto, aunque no se muestre. Si dejamos Predeterminada, se ver todo la pelcula. En cambio, si elegimos Ajuste exacto, se vern slo los objetos, omitiendo el escenario de fondo. Alinear funciona como con las imgenes, y nos permite alinear la pelcula en relacin con el texto. Si queremos centrarla horizontalmente, podemos optar por centrar el contenido del elemento que contiene el Flash (normalmente un prrafo) empleando CSS. Wmode es el modo de ventana. Si es opaco, otros elementos pueden aparecer sobre el Flash. En cambio, si es Transparente, el fondo se ver transparente (a no ser que se haya especificado un color de fondo en el Flash). El botn Reproducir nos permite ver la pelcula. Al insertarse la pelcula, veremos la ubicacin en la vista de diseo con el siguiente aspecto:
Al insertarse animaciones Flash, es frecuente que Dreamweaver aada algunos archivos que nos permitirn reproducir los elementos, normalmente creando la carpeta Scripts. Es importante incluir esta carpeta cuando publiquemos nuestro sitio, si no los archivos no se vern. De todas formas, Dreamweaver nos avisar cuando
10. Multimedia
incluya archivos.
2. Plug-in. Esta segunda forma de reproducir sonido se utiliza cada vez menos. Para insertar un archivo de audio mediante plug-in tienes que dirigirte al men Insertar, Meda, opcin Plug-in. Pueden ocurrir dos cosas: Si tu navegador tiene instalado el plugin necesario para reproducir el archivo, se mostrar un control similar a este (imagen de IE8):
En cambio, si el plugin necesario no est instalado, el navegador ofrecer la posibilidad de hacerlo, como en esta imagen de Firefox.
Un plugin es un aadido al navegador, que nos permite realizar funciones extra, como en este caso, reproducir un archivo de msica. Al insertar un elemento como plug-in lo que indicamos es que el navegador debe de intentar abrir el archivo empleando los pluigns que tenga para tal fin. Por eso, si no lo tiene, nos invitar a instalarlo.
En Dreamweaver no se mostrarn los controles de audio. Todos los archivos que son insertados como plugin aparecen representados 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 como propiedades a travs del inspector de propiedades, pero si los conocemos podemos emplear el botn Parmetros....
Por ejemplo, para que el archivo se reproduzca contnuamente le hemos aadido loop="true". Si no queremos que se reproduzca automticamente, podemos aadir tambin autostart="false" La lnea de cdigo del archivo de audio nos quedara del siguiente modo: <embed src="media/audio.mid" autostart="false" loop="true"></embed>
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). No obstante, insistimos en que no es recomendable poner msica sin controles de reproduccin.
Lo ms habitual en la web es insertar el sonido empleando Flash. Esto hace que no se necesiten plugins, slo poder reproducir Flash. Adems, nos permite crear los controles personalizados. Otras pginas de Internet, como goear nos permiten insertar en nuestra web un reproductor con msica del sitio, que nuestros visitantes podrn escuchar.
10. Multimedia
10.2. 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. 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. Siempre es mejor que que el usuario abandone la pgina. Los formatos de sonido ms habituales en Internet son, fundamentalmente, el MP3 y el WAV, aunque existen otros formatos diferentes que tambin pueden utilizarse (MIDI). Lo ideal es incluir algn archivo de audio que no ocupe mucho espacio, y que no por ello sea de mala calidad. Se puede insertar un archivo de audio en un documento de dos formas, con la nueva etiqueta <audio > o mediante un plug-in. 1. Nueva etiqueta <audio> Hasta hace poco la nica forma de insertar audio en una pgina web era mediante plug-in pero desde que apareci HTML5 los navegadores compatibles son capaces de interpretar la etiqueta <audio> que reproduce sonido de una forma estndar sin necesidad de plug-in. La etiqueta <audio> slo funcionar en los navegadores compatibles con HTML 5, IE a partir de la versin 9 y las versiones de Firefox 3.5, Chrome 3.0 y Safari 3.0, adems de algunos otros. Si tienes acceso Creative Cloud podrs insertar el tag <audio> desde Insertar, Comn, Media, opcin HTML 5 Audio, en otro caso debes hacerlo en la vista de cdigo. En la unidad 12 explicaremos con ms detalle cmo escribir cdigo HTML desde la vista cdigo. La forma de la etiqueta es la siguiente: <audio> <source src="archivo sonido" type="MIME-type"/> </audio> No todos los navegadores reconocen los formatos de archivos de sonido ms utilizados, en la siguiente tabla podemos ver la compatibilidad entre formatos y navegadores, as como sus correspondientes mime-types (en marzo 2013): Navegador Internet Explorer 9+ Chrome 6+ Firefox 3.6+ Safari 5+ Tipo MIME MP3 si si no si audio/mpeg WAV no si si si audio/wav OGG no si si no audio/ogg
108
10. Multimedia
Por ejemplo, el siguiente cdigo se reproducir en todos los navegadores citados menos Firefox: <audio controls> <source src="media/audio.mp3" type="audio/mpeg"/> Este navegador no puede reproducir este archivo de sonido. Actualice el navegador </audio>
Se suele aadir el atributo controls para que se muestren los controles del reproductor que permiten parar/reanudar y modificar el volumen. Tambin es bueno aadir un texto para que avise al usuario que su navegador no reconoce la etiqueta. Podemos repetir la instruccin source varias veces para incluir varios tipos de archivos de sonido, de esta forma el sonido se reproducir en ms navegadores. Por ejemplo <audio controls> <source src="media/audio.mp3" type="audio/mpeg"/> <source src="media/audio.ogg" type="audio/ogg"/> Este navegador no puede reproducir este archivo de sonido. Actualice el navegador. </audio> De esta forma el navegador Forefox intentar reproducir el primer archivo y como no es capaz de ello, lo intentar con el segundo archivo. Ahora desde Firefox si se reproducir el sonido. Este navegador no puede reproducir este archivo de sonido. Actualice el navegador
10.3. 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. En este apartado nos referimos a insertar vdeo de un archivo alojado en nuestro sitio. No a mostrar vdeos de sitios especializados, como youTube. Para insertar un archivo de vdeo en un documento puedes hacerlo de dos formas, con la nueva etiqueta <video > o mediante un plug-in. 1. Vdeo con HTML 5. El formato bsico de la etiqueta <video> es el siguiente. <video> <source src="archivo vdeo" type="MIME-type"/> </video>
109
10. Multimedia
La instrucin tpica para reproducir vdeo sera, por ejemplo: <video width="160" height="120" controls> <source src="media/cotorra.mp4" type="video/mp4"/> <source src="media/cotorra.ogv" type="video/ogv"/> Este navegador no puede reproducir este archivo de vdeo. Actualice el navegador. </video> Es muy similar a la que hemos visto para sonido, salvo que aparecen los atributos de tamao del vdeo (witdth, height). Tampoco todos los navegadores son capaces de reproducir todos los tipos de vdeo, por lo cual es conveniente colocar el vdeo en ms de un formato. La compatibilidad de los tipos de vdeo con los navegadores ms usados se muestra en la siguiente tabla (en marzo 2013). Navegador Internet Explorer 9+ Chrome 6+ Firefox 3.6+ Safari 5+ Tipo MIME MP4 si si no si video/mp4 WebM no si si no video/webm OGG no si si no video ogv
La etiqueta <vdeo> tiene varios atributos opcionales, entre los que podemos citar los siguientes: - autoplay. Hace que el vdeo comience a reproducirse al cargarse la pgina. - loop. Para que se reproduzca una vez tras otra, sin parar. - preload. Para que se cargue al hacelo la pgina especificaremos preload="auto", para que se cargue al pulsar play, preload="none". Tambin es posible utilizar otros reproductores y controlar la reproduccin del vdeo mediante Javascript. Si tienes acceso Creative Cloud podrs insertar la etiqueta <video> desde Insertar, Comn, Media, opcin HTML 5 Video, en otro caso debes hacerlo en la vista de cdigo. Hemos visto varios tipos de archivos de vdeos fijndonos en su extensin (.mp4, .ogv, ...) pero hay algo ms que lo complica un poco. Dentro de cada uno de estos tipos de archivos el vdeo puede estar codificado de distinta forma, es lo que se conoce como Codecs. Es decir, podemos tener un archivo de vdeo ejemplo.mp4 codificado con el codec H.264 y otro archivo con el mismo nombre ejemplo.mp4 pero codificado con el codec mpeg-2. Algo similar ocurre con los archivos de audio. Debido a esto, en ocasiones, nuestro navegador puede ser capaz de reproducir un tipo de archivo y otras ocasiones no poder hacerlo. En internet hay pginas para descargarse codecs e instalarlos en el navegador. Tambin hay pginas que transforman un formato en otro, por ejemplo http://www.online-convert.com/, es interesante convertir los vdeos mp4 en ogv y colocarlos en los dos formatos para que se vean desde Firefox y
10. Multimedia
desde la mayora de los navegadores.
2. Vdeo mediante Plug-in. Para insertar mediante plug-in un archivo de vdeo en un documento tienes que dirigirte al men Insertar, Meda, opcin Plug-in. 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.
Hay que prestar especial atencin al ancho y alto. Por defecto, si Dreamweaver no puede obtener el tamao del archivo lo fijar a 32 x 32, insuficiente para ver un vdeo. Es mejor borrarlos, y as el vdeo se mostrar con su tamao original. Si conocemos el tamao del vdeo, podemos pensar en insertarlo directamente, pero hay que tener en cuenta el tamao de los controles de reproduccin, que depende de cada navegador. Los vdeos tambin se reproducen automticamente al cargarse la pgina, y se reproducen solamente una vez. Estos valores pueden cambiarse a travs botn Parmetros, del mismo modo que en el caso de los archivos de audio, aadiendo autostart="false" y loop="true".
Como ya hemos dicho, 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. No ser necesario en los archivos ms comunes de audio y vdeo, pero s si intentamos cargar un archivo ms raro.
Para practicar puedes realizar el Ejercicio paso a paso Insertar un archivo de audio.
111
11. Las plantillas

En este tema vamos a ver qu son las plantillas, cmo crearlas y cmo basar documentos en ellas.
11.1. Introduccin
Cada vez que deseamos crear un sitio web, tenemos que tener muy en cuenta que las pginas deben seguir un formato uniforme. Adems del formato, es frecuente tener elementos que se repiten en cada pgina, como el logo o el men. 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. Esto nos puede ahorrar mucho trabajo. Las plantillas son archivos con la extensin DWT que se guardan en el sitio web, dentro de una carpeta llamada Templates. Por supuesto, las plantillas las podremos usar siempre que sigamos trabajando con Dreamweaver.
11.2. 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, que se puede abrir a travs del men Ventana, opcin Activos.
112
11. Las plantillas
Una vez abierto el panel hay que seleccionar el botn Los 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 el botn est desactivado, pulsa con el botn derecho del ratn sobre el rea de plantilla 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 Para eliminar una plantilla la seleccionamos de la lista y pulsamos el botn . . , para poder trabajar con las plantillas. botones inferiores del panel Activos son similares a los del panel Estilos
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 imagen. 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.
Al guardar la plantilla la pgina cambia de carpeta, a Templates, como ya hemos dicho. Si contena enlaces o imgenes se nos ofrecer la opcin de Actualizar vnculos. Si lo hacemos, la plantilla se ver con normalidad y podremos emplearla para crear pginas en cualquier carpeta. Si no lo hacemos, la plantilla se mostrar sin las imgenes u hojas de estilo, ya que la ruta no ser la correcta, y slo nos servir para crear pginas en la misma carpeta que el archivo desde el que creamos la plantilla. Ahora solo nos quedara cambiar los elementos variables por regiones editables.
113
11. Las plantillas
11.3. 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 para que puedan 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.
Las 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. La regin editable se ajustar al tamao del contenido. Por lo que aunque parezca pequea cuando an no tiene nada no limitar lo que queramos introducir.
11. Las plantillas
Todos los objetos que se encuentren fuera de estas zonas editables aparecern tambin en las pginas, pero no podrn ser modificados. En este caso, la imagen con el logotipo de aulaClic aparecera en todas las pginas que se basaran en esta plantilla, mientras que todo lo que insertramos dentro de la zona editable FormularioCorreoElectronico podra ser modificado.
11.4. Basar pginas en una plantilla

La opcin ms simple, consiste en elegir una Pgina de plantilla al crear un Nuevo documento.
115
11. Las plantillas
Como vemos en la imagen anterior, al seleccionar la categora Pgina de plantilla, aparece un listado con los sitios. Seleccionando el que queramos, aparecer otro listado con las plantillas del sitio, y una vista previa de la seleccionada a la derecha. Bastara con seleccionar la que queramos utilizar y pulsar en Crear. El nuevo documento estar basado en la plantilla, y solo tendremos que modificar las regiones editables.
El uso de las plantillas puede resultar un poco ms complicado si queremos aplicar la plantilla sobre un documento existente. 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 siguiente, en la que hay que seleccionar una de las plantillas de la lista Plantillas: del sitio.
116
11. Las plantillas
Es recomendable activar la casilla Actualizar pgina cuando cambie la plantilla , para que la pgina se actualice automticamente en el caso de modificar la plantilla en la que se basa. A pesar de estar trabajando sobre un documento vaco, es posible que al aplicar la plantilla aparezcan nombres de regiones no coincidentes entre el documento en blanco y la plantilla. En ese caso se muestra una ventana como la siguiente.
En ella hay que establecer una correspondencia entre el nombre de la regin del documento vaco con el nombre de alguna regin de la plantilla. En este ejemplo, la regin del documento vaco que no coincida con el nombre de ninguna regin de la plantilla era la regin Document body. A travs de Mover contenido a la nueva regin: se puede seleccionar una regin de la plantilla, para establecer as la correspondencia que se necesitaba. Despus de establecer las correspondencias necesarias, se carga la plantilla en el documento vaco.
117
11. Las plantillas
Observa que la pgina aparece enmarcada en amarillo, y en la esquina superior derecha nos informa de que se emplea la plantilla ejemplo. 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 texto y el formulario, ya que se encuentran dentro de una zona definida en la plantilla como editable. S se podra cambiar el estilo del texto, insertar ms elementos de formulario, tablas, 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, ni las ventajas al editar la plantilla original.
Para practicar los distintos aspectos explicados en el tema puedes realizar el Ejercicio paso a paso Crear una plantilla.
118
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. En muchas ocasiones veremos que para hacer pequeas correcciones, nos resultar ms cmodo y rpido si lo hacemos directamente desde el cdigo que recurriendo a asistentes.
12.1. 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 asignarle una clase de estilo CSS. Para ello, a la etiqueta de apertura anterior habra que aadir el atributo y su valor, quedando <p class="miclase"> 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>. Realmente estas etiquetas si tienen cierre, y se pone en la etiqueta de apertura para seguir el estndar XHTML que obliga a que todas las etiquetas se cierren. Por tanto el salto de lnea anterior se escribira <br /> . Otras etiquetas que se cierran sobre s mismas son las imgenes <img /> , reglas horizontales <hr /> o elementos de formulario <input />.
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.
12.2. Entidades HTML

HTML tambin dispone de cdigos especiales para representar caracteres 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 si no elegimos la codificacin adecuada.
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: Carcter Entidad con nombre á é í ó ú ü &ntide; Entidad numrica á é í ó ú ü ñ Carcter Entidad con nombre Á É Í Ó Ú Ü Ñ Entidad numrica Á É Í Ó Ú Ü Ñ
¿ &iexc; – → ←
¿ ¡ – → ←
α β © ® €
α β © ® €
< > &
< > &
< > &
espacio

Si escribes ms de un espacio en el cdigo de 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
separadas de uno. Para saltarte esta norma puedes escribir tantas veces como quieras y se visualizarn tantos espacios como elementos de entidad hayas introducido. Antes de abusar de este tipo de espacios, piensa si no convendra ms aadirle margin o padding CSS.
Si quieres ver una tabla con el listado de todos los caracteres especiales visita el avanzado de Listado de Entidades HTML .
12.3. 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, opcin Inspector de cdigo. Tambin podemos abrir el Inspector de cdigo pulsando F10.
121
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. Por ejemplo, si disponemos de una pantalla panormica, podemos tener a un lado el diseo y a otro el cdigo.
12.4. 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.es" target="_blank">Visitar aulaClic</a>, con lo que obtendramos el siguiente enlace: 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 .
122
Podemos continuar escribiendo el nombre de la etiqueta, o seleccionarla de la lista cuando sea visible. Si se trata de la seleccionada en azul, basta con pulsar la tecla Intro. En este caso, como la etiqueta de enlace slo tiene una letra, no necesitamos de esta opcin.
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. Para hacerlo, podemos optar por seleccionarlo de la lista con doble clic, pulsar h (para que se seleccione) + Intro (para introducirlo) o escribirlo.
Una vez seleccionado, el cdigo quedar como:
En el caso de atributos en los que hay que indicar la ubicacin de un archivo, nos aparecer la opcin Examinar... que abre el cuadro de dilogo para elegir el archivo. Tambin podemos continuar escribiendo la direccin.
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.
123
En ella hay que elegir target. Entonces el cursor aparecer entre las nuevas comillas dobles, y se mostrar una lista en la que es posible elegir el destino del enlace. Cuando un atributo puede tomar unos valores concretos, estos nos aparecern como opciones.
Como queremos que el enlace se abra en una pgina nueva, seleccionamos _blank. Cuando hayamos completado los atributos, cerramos la etiqueta de apertura con el smbolo >
Ahora podemos introducir el contenido de la etiqueta. Pero es recomendable cerrarla ya y luego introducir el contenido, para que no se nos olvide. Para cerrar la etiqueta basta con escribir </ y automticamente se completar la etiqueta de cierre (</a>).
Tambin podemos configurar Dreamweaver para que introduzca la etiqueta de cierre al cerrar la de apertura. Esto lo hacemos desde el men Edicin Preferencias Sugerencias para el cdigo Cerrar etiquetas. Ahora podemos completar la etiqueta con el texto que servir de enlace.
124
12.5. Contraer y expandir cdigo

Una de las ventajas de Dreamweaver es la posibilidad de seleccionar fragmentos de cdigo y contraerlos para facilitar su legibilidad. Por ejemplo, podemos seleccionar el trozo de cdigo correspondiente a una tabla, como se ve en la siguiente imagen, aunque podemos seleccionar cualquier cdigo:
Con el texto seleccionado, pulsamos en uno de los iconos junto a los nmeros de lnea o el icono Contraer seleccin . El ejemplo anterior se contraera quedando:
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 del cdigo contrado. , o en el signo + que aparece al lado
Otro botn que nos ayudar ser el icono Seleccionar etiqueta padre . Este botn selecciona toda la etiqueta que contiene al punto de insercin. A medida que los sigamos pulsando, ir seleccionado las etiquetas en orden jerrquico, aumentando la seleccin. El icono contraer etiqueta completa necesidad de seleccionarla primero. contrae la etiqueta que contiene al punto de insercin, sin
Una pega que encontramos es que esto no se guarda, y la prxima vez que abramos el documento aparecer todo el cdigo expandido.
12.6. Errores en el cdigo

Al volver al modo grfico es posible ver si hay algunos errores en el cdigo HTML, como puede ser una etiqueta incompleta. El cdigo errneo aparecer en amarillo:
Si volvemos al cdigo podremos encontrar el error fcilmente. Para que los errores se resalten, debe de estar pulsado el icono .
En el ejemplo anterior nos hemos comido el cierre de la etiqueta de apertura. Otra forma de detectar errores en el cdigo es fijndonos en los colores. Por ejemplo, si no hemos cerrado una etiqueta o las comillas de un atributo, veremos que los colores del cdigo no son como deberan. Pero ten en cuenta que no todos los errores son visibles a simple vista, por ejemplo escribir mal el nombre de un atributo. Para comprobar la compatibilidad de la pgina web que hayas creado puedes utilizar el desplegable Comprobar pgina navegadores: . Despligalo y haz clic sobre la opcin Comprobar compatibilidad con
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 ste:
126
Donde podrs indicar que navegadores y a partir de qu versin quieres que se tengan en cuenta cuando Dreamweaver realiza la comprobacin de compatibilidad.
12.7. 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 cul 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.
127
Mediante Buscar en puede especificarse en qu documentos buscar. Podemos buscar slo en el documento actual , en todo el sitio (sitio actual completo), o en los archivos seleccionados del sitio (habiendo seleccionado dichos archivos previamente), en los archivos abiertos o en una carpeta en concreto o en el texto seleccionado.
A travs de Buscar se especifica si hay que buscarlo en el texto (en la ventana diseo), o en el cdigo HTML (cdigo fuente ). Tambin podemos emplear el texto avanzado , por ejemplo si queremos buscar slo texto en determinadas etiquetas, o etiqueta especfica , que nos permite, por ejemplo, buscar etiquetas de determinado tipo y que tengan determinado atributo. 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 hay que especificar el texto o el cdigo por el que se desea cambiar el texto o cdigo buscado. Si queremos borrar basta con dejarlo vaco. Si no vamos a reemplazar no es necesario. En Opciones encontramos las opciones de bsqueda: si el texto debe coincidir en maysculas y minsculas, si se omitirn los espacios en blanco , si la palabra a buscar debe ser una palabra completa o puede formar parte de otra, o si el texto introducido es un patrn de expresin regular. 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. O podemos reemplazarlos todos directamente. 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 ste 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 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.
128
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 el cdigo de 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" alt="PerrosGatos" /> , teniendo en cuenta que la imagen se llama logo_animales.gif y que se encuentra dentro del sitio en la carpeta imagenes. Como el texto a reemplazar siempre est escrito igual, hemos marcado la opcin Coincidir Maysculas y Minsculas para asegurarnos de que si en otra parte aparece el texto perrosgatos, no sea reemplazado.
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 paso a paso Buscar y reemplazar.
Si quieres ver otros mtodos de bsqueda relacionados con las etiquetas del cdigo visita el avanzado de Bsqueda en Etiquetas . La unin de todos estas tcnicas de bsqueda y reemplazo es realmente potente y til, puede ahorrar mucho trabajo en la tarea de mantener un sitio web. Desde la experiencia podemos decir que una de las cosas que justifica el uso de Dreamweaver para un webmaster es la potencia de estas herramientas.
129
13. Otros elementos

Vamos a ver una serie de elementos que suelen aparecer en las pginas web, como pueden ser las fuentes web, las marquesinas, las reglas horizontales y la fecha.
13.1. Fuentes web

Esta versin de Dreamweaver permite usar fuentes web de forma rpida y sencilla. En la web hay sitios como, Google Webfonts, FontsSquitrel etc. donde podemos obtener nuevas fuentes para nuestras pginas web. Usar estos nuevos tipos de letra puede dar un toque de originalidad a nuestros sitios. Para trabajar con las fuentes web debemos ir al men Modificar, Fuentes Web ... y veremos la siguiente ventana.
Si pulsamos en el botn Aadir fuente ... veremos esta ventana.
130
13. Otros elementos
En esta ventana tenemos que indicar en qu carpeta tenemos el archivo que contiene la nueva fuente (que prevamente hemos descargado) y pulsar Aceptar. Las fuentes pueden estar en uno de los cuatro formatos que aparecen en la ventana, EOT, WOFF, TIF y SVG. Hay que leer las condiciones de uso de la fuente y aceptarlas. A partir de este momento ya podemos usar la fuente como una fuente ms. Por ejemplo, al definir nuevos estilos aparecer en el desplegabe Fuentes. Para conseguir nuevos ficheros de fuentes web simplemente hay que visitar una de las webs que los ofrecen y descargarse el fichero con la fuente. Vamos a mostar un ejemplo con Google webfonts. Al acceder a su web veremos una pantalla como esta en la que podemos seleccionar la fuente que nos guste pulsando el botn Add to collection.
A continuacin hacemos clic en el botn Use de la parte inferior derecha y veremos la siguiente pantalla:
131
13. Otros elementos
Aqu debemos pulsar en Download your Collection para descargar el archivo en nuestro disco duro, a partir de ah ya podemos aadir la fuente como acabamos de ver.
13.2. 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 se utilizan cada vez menos ya que no estn incluidas en los estndares web y en ocasiones pueden resultar un poco molestas. Adems el usuario no puede hacer nada para detener el movimiento. 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:
132
13. Otros elementos
<marquee behavior="alternate"> Bienvenid@s a PerrosGatos <img src="imagenes/logo_animales.gif" alt="PerrosGatos" /> </marquee> No conviene abusar de estos elementos, que ya que distraen la atencin del visitante. Cada vez se emplea menos este elemento, ya que si se quiere animar texto, se suele utilizar Flash que nos ofrece mucha ms personalizacin.
13.3. 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 cundo 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, ya que puede dar sensacin de abandono. No obstante hay contenidos en los que es imprescindible informar al usuario de cuando fue redactado, sobre todo aquellos que se refieren a temas (como informtica) que pueden haber quedado obsoletos. 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 paso a paso Insertar fecha .
133
13. Otros elementos
13.4. 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 que cruza horizontalmente al elemento que la contiene.
Para insertar una regla hay que dirigirse al men Insertar, opcin HTML, luego la opcin Regla horizontal. Si queremos insertarla desde el cdigo, podemos hacerlo con la etiqueta <hr />. 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. Podemos cambiar su color mediante CSS, con la propiedad color (como el color del texto).
13.5. Cdigo de otras pginas

En ocasiones nos gustara incluir en nuestras pginas cosas que hemos visto en otras pginas que estn publicadas en Internet. Por una parte, tenemos pginas que nos ofrecen ese cdigo para que lo incluyamos en nuestra web, como banners o contenido multimedia, como pueden ser los vdeos del portal youTube. En la mayora de estos casos, lo nico que tendremos que hacer ser copiar ese cdigo y pegarlo en nuestro cdigo fuente, en el lugar que queramos mostrar el elemento.
134
13. Otros elementos
En otras ocasiones puede que no se trate de un elemento pensado para que lo copiemos. Simplemente es una parte de una pgina que nos gustara tener o que sentimos curiosidad por cmo estar hecho. En estos casos, lo mejor es ver el cdigo fuente. Puedes visualizar el cdigo fuente de dichas pginas con cualquier navegador, normalmente a travs del men Configuracin, 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 podemos ver su cdigo y emplearlo en nuestras pginas. 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. Pero en muchas ocasiones puede costar entender el cdigo, sobre todo 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"> y //--> </script> ... </head>  </script>
Volver a la teora
523
Unidad 25. Crear una regin con informacin

Objetivo
Practicar la creacin de una regin con informacin.
Ejercicio
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2. Abre el sitio libreria. 3. Abre el archivo catalogo.php. 4. En la zona editable escribe los siguiente desde la vista de Cdigo: <p><span class="primera_palabra">Catlogo</span> de libros en tienda:<p> <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 align="right">{precio} </td> </tr> </table> </div> 5. Gurdalo Pulsa la tecla F12 para visualizar la pgina en el servidor de pruebas. Vers como aparece una fila mostrando el contenido del primer registro. 6. Cierra el documento guardando los cambios. Por supuesto, podramos haber creado la tabla en la vista Diseo, y haber arrastrado los elementos desde el panel Vinculaciones.
Volver a la teora
524
Unidad 25. Crear repeticiones de registros

Objetivo
Practicar la crear repeticiones en los registros.
Ejercicio
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2. Abre el sitio libreria. 3. Abre el archivo catalogo.php. 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: <p><span class="primera_palabra">Catlogo</span> de libros en tienda:<p> <div> <table border="0" cellpadding="15" cellspacing="0"> <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 align="right">{precio} </td> </tr> </table> </div> 6. Gurdalo y pulsa la tecla F12 para visualizar la pgina en el servidor de pruebas. Vers como aparece un listado con todos los registros del archivo XML. 7. Cierra el documento guardando los cambios.
Volver a la teora
525
Unidad 25. Crear condiciones

Objetivo
Practicar la crear filtros en un dataset.
Ejercicio
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2. Abre el sitio libreria. 3. Abre el archivo catalogo.php. 4. En la zona editable busca la tabla que acabamos de aadir en el ejercicio anterior desde la vista de Cdigo. 5. Busca la segunda fila, la tr con spry:repeat, y alrededor de la fila y sus celdas, crea una etiqueta <tbody></tbody>. 6. Quita el spry:repeat de la fila, y coloca un spry:repeatchildren en el <tbody>. <tbody spry:repeatchildren="misLibros"> <tr> <td>{isbn}</td> <td>{titulo}</td> <td>{autor}</td> <td align="right">{precio} </td> </tr> </tbody> Ahora lo que se repiten son las filas hijas del tbody. 7. Aade al <tbody> el atributo de condicin spry:choose="spry:choose". 8. Copia la fila completa, y pgala dentro del tbody, para darles condiciones distintas a cada una. 9. A la primera fila, adele la siguiente condicin; <tr spry:when="{ds_RowID}%2==0;" style="background-color:#D4FFFF"> 10. A la segunda, le damos la condicin por defecto: <tr spry:default="spry:default"> 11. Guarda los cambios. La tabla te debe de haber quedado as: <div spry:region="misLibros"> <table border="0" cellpadding="15" cellspacing="0"> <tr> <th>ISBN</th> <th>Ttulo</th> <th>Autor</th> <th>Precio</th>
526
</tr> <tbody spry:repeatchildren="misLibros" spry:choose="spry:choose"> <tr spry:when="{ds_RowID}%2==0;" style="background-color:#D4FFFF"> <td>{isbn}</td> <td>{titulo}</td> <td>{autor}</td> <td align="right">{precio} </td> </tr> <tr spry:default="spry:default"> <td>{isbn}</td> <td>{titulo}</td> <td>{autor}</td> <td align="right">{precio} </td> </tr> </tbody> </table> 12. Prubala en el navegador.
Volver a la teora
527
Unidad 25. Crear Filtros

Objetivo
Practicar la crear filtros en un dataset.
Ejercicio
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2. Abre el sitio libreria. 3. Abre el archivo catalogo.php. 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"> <input name="cajadetexto" type="text" /> <a href="#" onclick="misLibros.filter(miFiltro)">Buscar</a> | <a href="#" onclick="misLibros.filter()">Mostrar todos</a> </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. 7. Aade la siguiente funcin: <script type="text/javascript"> <!-var misLibros = new Spry.Data.XMLDataSet("libreria.xml", "biblioteca/libro"); var miFiltro = function(dataSet, row, rowNumber) { if (row["autor"].search(document.formulario.cajadetexto.value) != -1 || row["titulo"].search(document.formulario.cajadetexto.value) != -1 || row["isbn"].search(document.formulario.cajadetexto.value) != -1) { return row; } else { return null; } } //--> </script> Con esta 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. 8. Pulsa la tecla F12 para visualizar la pgina en el servidor de pruebas. Vers como aparece un listado con todos los registros del archivo XML. Si buscas alguna palabra, aparecern sus
8. coincidencias. Observa que la funcin es sensible a maysculas/minsculas. 9. Cierra el documento guardando los cambios.
Volver a la teora
529

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 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. Copia la carpeta deportes que encontrars en la carpeta ejercicios a la carpeta mis_sitios (creada en los ejercicios paso a paso del tema). Crear un sitio local con el nombre Deportes, cuya carpeta raz sea la carpeta deportes, que se encuentra dentro de la carpeta mis_sitios. 2. Abrir el documento index.htm. 3. Modificar sus propiedades para que el color de los vnculos, sea cual sea su estado, sea #000 y nunca se encuentren subrayados. 4. Asgnale la imagen fondo-logo.gif que se encuentra en la carpeta imagenes del sitio aparezca como fondo sin repeticin. 5. Haz que la fuente del documento sea Verdana, Arial, sans-serif 18px, y de color #535D6F. 6. Haz que el ttulo de la pgina sea Tu tienda de deportes. 7. 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 aparece en la carpeta Ejemplos/sitios o en la web: Deportes.
530
Ejercicio 2: Animales.
1. Copia la carpeta animales que encontrars en la carpeta de ejercicios a la carpeta mis_sitios, creada en el primer ejercicio paso a paso de la unidad. 2. Crear un sitio local con el nombre Animales, cuya carpeta raz sea la carpeta animales, que se encuentra dentro de la carpeta mis_sitios, copiada en el paso anterior. 3. Abre el documento consultas.htm y modifica sus propiedades, para que su ttulo sea Consultas. 4. Abre el documento gatos.htm y modifica sus propiedades, para que su ttulo sea Gatos. 5. Abre el documento perros.htm y modifica sus propiedades, para que su ttulo sea Perros. 6. Abre el documento index.htm y modifica sus propiedades, para que su ttulo sea Inicio. 7. Guarda los cambios y cierra los documentos. A partir de este momento, realizando los ejercicios propuestos, vamos a crear una pgina como la que aparece en la carpeta Ejemplos/sitios o en la web: Animales
Ver la solucin
Volver a la teora
531

Si no tienes abierto Dreamweaver, brelo para realizar los ejercicios planteados a continuacin.
1. Abrir el sitio Deportes. 2. Abrir el documento index.htm. 3. Edita el estilo de la pgina. Asigna la propiedad margen a 20px para todos los lados. El fondo debe ser posicionado en el centro en el eje horizontal y arriba en el eje vertical. 4. Crea una regla de estilo para la etiqueta HTML. En ella debes de cambiar las propiedades para que muestre la imagen fondo.png como fondo, ocupando la parte superior de la pgina, y estableciendo como #E0E5EF color de fondo. La regla slo afectar a la pgina actual. 5. Crea una regla de estilo para el elemento con ID menu. Debes de establecer las siguientes propiedades: En propiedades de Cuadro, ancho 600px, y los mrgenes superior: 80px, inferior 10px y laterales auto. Adems en propiedades de Tipo, el color del texto ha de ser #EFF4FF y estar en negrita a 18px. En las propiedades de Bloque, centra el texto. Selecciona la tabla (etiqueta table). Es el primer texto, el que aparece con un marco punteado. Asgnale el ID menu. Edita la regla body,th,td cambiando su selector a slo body. 6. Que los encabezados 1 tengan el color #738098. 7. Exporta las reglas a una nueva hoja de estilos llamada estilodeportes.css. Vincula esa hoja a las pginas donde.htm, instalaciones.htm, y reservas.htm. 8. En el archivo instalaciones.htm convertir las seis lneas que hacen referencia a las instalaciones en una lista desordenada. 9. Guardar los cambios y cerrar el documento.
532
1. Abrir el sitio Animales. 2. Abrir el documento perros.htm. 3. Convertir la primera lnea Perros a un encabezado 1. 4. Asignarle un estilo cursiva, con un tamao de fuente de 36px. Definir la regla solo en este documento. 5. Al prrafo Cuidados Postnatales asignarle un tamao de fuente de 18px, en cursiva y negrita. 6. Guarda el estilo como titulo. Definir la regla solo en este documento. 7. Cambia las propiedades del documento para que tenga la fuente Georgia a 16px y el fondo de color #EFEFD1. 8. Mueve estas Reglas CSS a una nueva hoja que vinculars a este documento. Llmala estiloanimales.css. 9. Abrir el documento index.htm y asignarle la hoja de estilos estiloanimales.css. 10. Convertir la primera lnea de texto a un encabezado 1. 11. Abrir el documento consultas.htm y asignarle la hoja de estilos estiloanimales.css. 12. Convertir la primera lnea de texto a un encabezado 1. 13. Abrir el documento gatos.htm y asignarle la hoja de estilos estiloanimales.css. 14. Convertir la primera lnea de texto a un encabezado 1. 15. Al ttulo Cmo Prevenir Los Problemas Dentales? asignarle el estilo .titulo. 16. Convertir las cuatro ltimas lneas en un lista desordenada, aplica una sangra solamente a la segunda lnea. 17. Guardar los cambios y cerrar los documentos.
Ver la solucin
Volver a la teora
533
1. Abrir el sito Deportes. 2. Abrir los documentos index.htm, donde.htm, instalaciones.htm y reservas.htm. 3. Observa que al principio de cada uno se repite el mismo men. Para cada palabra, crea los siguientes enlaces: Crear un hiperenlace a index.htm en el texto Quines. Crear un hiperenlace a donde.htm en el texto Dnde. Crear un hiperenlace a instalaciones.htm. Crear un hiperenlace a reservas.htm en el texto Reservas. No crees el enlace que lleva a la pgina actual. 4. Guardar los cambios y cerrar el documento.
1. Abrir el sito Animales. 2. Abrir el documento index.htm. 3. Crear un hiperenlace a www.aulaclic.es en la imagen de aulaClic. 4. Hacer que el enlace se abra en una ventana nueva del navegador. 5. Hacer que las imgenes con enlaces no muestren bordes. 6. Guardar los cambios y cerrar el documento.
Ver la solucin
Volver a la teora
534
Unidad 6. Imgenes
1. Abrir el sito Deportes. 2. Abrir el documento instalaciones.htm. 3. Insertar la imagen logodeportes.gif, que se encuentra dentro de la carpeta imagenes del sitio, en una lnea centrada entre el ttulo Nuestras instalaciones y la lista. 4. Guardar los cambios y cerrar el documento.
1 Abrir el sito Animales. 2 Abrir el documento index.htm. 3 Sita el punto de insercin detrs del encabezado Inicio. Insertar un rollover al lado del ttulo Inicio, cuya imagen original sea esta: (pata1.gif),
y la imagen de sustitucin esta:
(pata2.gif).
Puedes encontrarlas en la carpeta imagenes del sitio. La imagen de sustitucin no debe tener ninguna direccin web vinculada. El fondo de las imgenes ha de ser transparente. 4 Crea, para esa imagen en concreto, una regla en la hoja de estilo que haga que quede centrada verticalmente en la lnea (en las reglas de Bloque, la propiedad Vertcal-align con valor middle). 5 Guardar los cambios y cerrar el documento.
Ver la solucin
Volver a la teora
535
Unidad 7. Tablas
1. Abrir el sitio Deportes. 2. Abrir el documento reservas.htm. 3. Modificar la segunda tabla de la pgina para que quede similar a la primera, con el aspecto siguiente:
4. Crea una tabla con el ancho total de la pgina, sin bordes, que contenga en una celda el primer prrafo y la primera tabla, y en la segunda el segundo prrafo y la segunda tabla. 5. Guardar los cambios y cerrar el documento.
1 Abrir el sitio Animales. 2 Abrir el documento index.htm. 3 Crea una tabla con las siguientes medidas:
536
4 Coloca la tabla en el centro de la pgina, y rea una clase CSS llamada contenido asigne a la tabla el color de fondo #D6E7DB. 5 Utilizando clases CSS, crea las clases necesarias para hacer que: La celda de la esquina superior-izquierda tenga como fondo la imagen arriba-izq.png. La celda de la esquina superior-derecha tenga como fondo la imagen arriba-der.png. El lado superior tenga como fondo la imagen arriba.png repetida en horizontal. El lado izquierdo tenga como fondo la imagen izquierda.png repetida en vertical. El lado derecho tenga como fondo la imagen derecha.png repetida en vertical. La celda de la esquina inferior-izquierda tenga como fondo la imagen abajo-izq.png. La celda de la esquina inferior-derecha tenga como fondo la imagen abajo-der.png. El lado inferior tenga como fondo la imagen abajo.png repetida en horizontal. Todas las celdas tendrn el color de fondo de la pgina (#EFEFD1). Las imgenes estn en la carpeta de imgenes. Guarda las reglas de estilo en la hoja de estilos estiloanimales.css. El resultado debe quedar como el siguiente:
5 Inserta la imagen logo_animales.gif en la segunda celda de la segunda fila. 6 Y define la alineacin celdas centrales de la segunda fila como centro (en horizontal) y medio (en vertical). 7 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. 8 Abre el archivo botones.htm y copia los botones de navegacin formados por una lista, debers pegarlos en la tercera celda de la segunda fila. Aade el estilo de los botones a la hoja estiloanimales.css. 9 Define el alineamiento de esa celda como derecha (en horizontal) y superior (en vertical). 10 Guarda los cambios.
11 Debers hacer lo mismo para los archivos consultas.htm, gatos.htm y perros.htm.
Ver la solucin
Volver a la teora
538
1. Abrir el sito Deportes. 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. Dale como nombre hora. 4. Insertar un men a la derecha del texto Centro:, llamado 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 derecha del botn Enviar. 7. Guardar los cambios y cerrar el documento.
1. Abrir el sito Animales. 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 izquierda del botn Restablecer. 7. Guardar los cambios y cerrar el documento.
539
Ver la solucin
Volver a la teora
540

1. Abrir el sito Deportes. 2. Abrir el documento index.htm. 3. Insertar la animacin Flash basket.swf, que se encuentra en la carpeta imagenes del sitio, al final del documento, dos prrafos por debajo de la imagen que invita a visitar aulaClic. 4. Hacer que la animacin se reproduzca automticamente una sola vez, que el fondo sea transparente y quede centrada horizontalmente. 5. Guardar los cambios y cerrar el documento.
Ver la solucin
Volver a la teora
541

1. Abrir el sito Deportes. 2. Abrir el documento conplantilla.htm. 3. Aplicar la plantilla plantilladeportes.dwt que encontrars en Templates al documento conplantilla.htm, que debe actualizarse automticamente cada vez que cambie la plantilla. 4. Guardar los cambios y cerrar el documento.
1. Abrir el sito Animales. 2. Partiendo de la pgina gatos.htm crea la plantilla plantillaanimales con los elementos comunes a todas las pginas (inserta dos regiones editables). 3. Crea un nuevo documento llamado deplantilla.htm basado en la plantilla plantillaanimales.dwt. 4. Intentar borrar la imagen del perro y el gato a ver, a ver si es posible. 5. Cambiar el texto Titulo de la regin editable Ttulo por el texto Animales, y escribe cualquier cosa en la regin contenido. 6. Separar el documento de la plantilla. 7. Intentar borrar la imagen del perro y el gato a ver, a ver si es posible. 8. Guardar los cambios y cerrar el documento.
Ver la solucin
Volver a la teora
542

Ejercicio 1: Deportes
1. Abrir el sitio Deportes. 2. Abrir el documento buscar.htm. 3. Reemplazar el texto deportes (en minsculas) por el texto aulaClic, utilizando la herramienta Buscar y reemplazar. 4. Guardar los cambios y cerrar el documento.
Ejercicio 2: Animales
1. Abrir el sitio Animales. 2. Abrir el documento buscar.htm. 3. Reemplazar la imagen logoaulaclic.png por la imagen logo_animales.gif, utilizando la herramienta Buscar y reemplazar. 4. Guardar los cambios y cerrar el documento.
Ver la solucin
Volver a la teora
543

1. Abrir el sito Deportes. 2. Abrir el documento donde.htm. 3. Convertir la ltima lnea de texto (Para ms informacin...) en una marquesina. 4. Guardar los cambios y cerrar el documento.
1. Abrir el sito Animales. 2. Abrir los documentos consultas.htm, gatos.htm, perros.htm e index.htm. 3. Insertar una regla horizontal en la segunda celda de la tercera fila de la tabla en todos los documentos. 4. Guardar los cambios y cerrar el documento.
Ver la solucin
Volver a la teora
544
Unidad 14. Capas

1. Abrir el sito Deportes. 2. Abrir el documento index.htm. 3. Insertar una capa con el nombre oferta. 4. Modificar la capa para que sea similar a la de la imagen (imagen de IE 8):
5. La capa debe de quedar posicionada debajo de los enlaces del men, a un 30% de distancia del lado izquierdo. 6. Hacer que la capa sea visible. 7. Guardar los cambios y cerrar el documento.
1. Abrir el sito Animales. 2. Abrir el documento gatos.htm. 3. Insertar una capa con el nombre gatosemana. 4. Modificar la capa para que quede como en la siguiente imagen:
545
3. 4.
Para ello dispones de las imgenes gato1.gif, fondo_gatosemana.png y cerrar_gatosemana.png en la carpeta de imgenes del sitio. 5. Coloca la capa en la esquina superior derecha de la celda central, y haz que siempre se muestre en esa posicin respecto a la celda aunque se redimensione la ventana. 6. Hacer que la capa est oculta. 7. Guardar los cambios y cerrar el documento.
Ver la solucin
Volver a la teora
546

1. Abrir el sito Deportes. 2. Abrir el documento index.htm. 3. Insertar un comportamiento que oculte la capa al hacer clic sobre el enlace Cerrar [x]. 4. Guardar los cambios y cerrar el documento.
Abre el documento index.htm de Deportes en un navegador, y compara la pgina que has creado con la que aparece si pulsas aqu.
1. Abrir el sito Animales. 2. Abrir el documento gatos.htm. 3. Insertar un comportamiento que muestre la capa gatosemana al hacer clic sobre la imagen del gato que se encuentra a la izquierda. 4. Insertar un comportamiento que oculte la capa al hacer clic en la imagen con el icono de cerrar. 5. Guardar los cambios y cerrar el documento.
Abre el documento inicio.htm de Animales en un navegador, y compara la pgina que has creado con la que aparece si pulsas aqu.
Ver la solucin
Volver a la teora
547

Ejercicio 1: Blog.
1. Crear una nueva carpeta llamada blog en tu carpeta de mis_sitios, donde has guardando los sitios que hemos ido creando. Define en Dreamweaver el sitio Blog con raz en esa carpeta. 2. Crear una nueva plantilla PHP llamada blog dentro del sitio (al final, el archivo se llamar blog.dwt.php). Utilizamos un archivo PHP porque ms adelante, mostraremos datos del servidor en nuestras pginas. 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 #.
Ver la solucin
Volver a la teora
548

Si no tienes abierto Dreamweaver, brelo para realizar los ejercicios planteados a continuacin. Crearemos los estilos necesarios para que la plantilla se vea as.
Antes de comenzar con los ejercicios, y si no lo hiciste al crear el sitio, copia todos los archivos de la carpeta blog que encontrars en la carpeta de ejercicios, a la carpeta blog que debes de haber creado en la carpeta mis_sitios con la que estamos trabajando.
Ejercicio 1: Crear una hoja de estilos.

1 Abre el sitio Blog. 2 Crea un archivo CSS llamado estiloblog.css. 3 Vincula la nueva hoja de estilos a la plantilla blog.dwt.php creada en la unidad anterior. 4 Copia la carpeta imagenes que podrs encontrar en la carpeta de ejercicios dentro de blog a la carpeta del 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 una lista como sta: Principal Administracin Enlaces Cada palabra tendr un vnculo a las pginas .../index.php, .../admin.php y respectivamente. Nota: Los tres puntos los ponemos porque estamos trabajando sobre una plantilla. 9 A continuacin coloca estos dos bloques (contenido y seccion) dentro de un bloque con Id contenedor. .../enlaces.php
549
Ejercicio 2: Controles de Fuente.

1 Abre el archivo estiloblog.css, creado en el ejercicio anterior. 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 una 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 Haz que todos los enlaces dentro de un prrafo o un elemento de lista no tengan subrayado y sean de color negro. 6 Por ltimo, haz que los elementos de lista dentro del bloque seccin no muestre vietas.
Los ejercicios continan en la pgina siguiente.
Ejercicio 3: Controles de Fondo.

1 Abre el archivo estiloblog.css. 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 #CF6.
550
Ejercicio 4: Controles de Mrgenes y Borde.

1 Abre el archivo estiloblog.css. 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. 8 La lista d dentro del bloque seleccin debern tener un margen superior de 40 pxeles, quitando el resto, y no tener padding. 9 Los elementos de esa lista, deben tener un margen inferior de 13px. 10 Crea una clase llamada borde_inferior, que haga que a los elementos que se les aplique muestren un borde inferior de 1px, negro y continuo.
Ejercicio 5: Controles de Bloque.

1 Abre el archivo estiloblog.css. 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.

1 Abre el archivo estiloblog.css. 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.
551
Ver la solucin
Volver a la teora
552

Ejercicio 1
Abre el archivo ejerciciomaquetacion.htm que encontrars en la carpeta de ejercicios. Aade las capas y propiedades CSS necesarias para que la pgina se vea como sta. Observa que ya hay estilos creados, y algunos hacen referencia a elementos que no existen, como #header. Usa esos mismos nombres para que se apliquen los estilos.
Ver la solucin
Volver a la teora
553

Ejercicio 1:
1. Ejecuta WampServer. 2. Crea un tabla llamada compras con 5 campos en la base de datos bd_libreria. 3. Al primero lo llamaremos Id, de tipo INT, con auto incremento (A_I) e ndice PRIMARY. 4. Al segundo lo llamaremos Nombre, de tipo VARCHAR y con longitud 60. 5. Al tercero lo llamaremos Tarjeta, de tipo VARCHAR 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 indexado (INDEX). 8. Importa los datos contenidos en el archivo compras-latin1.txt que se encuentra en la carpeta de ejercicios en la carpeta libreria. 9. La codificacin de este archivo es de tipo latin1.
Ver la solucin
Volver a la teora
554

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 paginacin 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. Nota: Ten en cuenta que la paginacin solo aparecer si hay ms registros que los listados en la pgina.
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.
Ver la solucin
Volver a la teora
555

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. Es decir, sigue el mismo formato que listado_comentarios.php.
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.
556
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. 2 Crea un pgina de eliminacin de categoras llamada elimina_categoria.php basada en la plantilla blog.dwt.php que 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 pginas anteriores. El enlace deber estar en un prrafo de clase datos.
Ver la solucin
Volver a la teora
557

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 provinientes 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.
Ver la solucin
Volver a la teora
558

Ejercicio 1: Insertar contenido XML

1 En la carpeta spry 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.
Nota: Si tienes el archivo index.htm incluido en algn sitio definido en Dreamweaver, el programa copiar a la raz del sitio los archivos necesarios.
Ver la solucin
Volver a la teora
559

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 estilolibreria.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.
Ver la solucin
Volver a la teora
560

Ejercicio 1:
1 Modifica el archivo consultas.htm del sitio animales, creado en las primeras unidades, haz que el campo de texto donde el usuario tiene que introducir su email sea un campo de validacin, y obligatorio. 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.
Ver la solucin
Volver a la teora
561

Ejercicio 1:
1. Abre el archivo index.htm de la carpeta spry 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 Acorden. 4. Renombra las fichas para que se lea Cursos y Artculos. 5. Coloca el listado de cursos y artculos en sus respectivas fichas.
Ver la solucin
Volver a la teora
562
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 a) Abrir. b) Nuevo. c) Cerrar.
significa...
6. El icono a) Abrir. b) Nuevo. c) Cerrar.
significa...
563
Pruebas evaluativas
7. El icono a) Abrir.
significa...
b) Nuevo. c) Cerrar. d) Propiedades.
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) Creamos un nuevo cdigo HTML dentro de nuestra pgina. d) Ninguna de las opciones anteriores.
9. La combinacin de teclas Ctrl + O sirve para... a) Crear un nuevo documento. b) Abrir un documento existente. c) Organizar nuestros archivos. d) Guardar los archivos modificados.
10. 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. d) Se crear una copia de seguridad de nuestros archivos.
Ver la solucin
Volver a la teora
564
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 pueden ser 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 el panel de Insertar... a) se puede cambiar las vistas del documento. b) los botones estn clasificados segn su categora. c) se configuran las propiedades del objeto seleccionado. respuesta
565
Pruebas evaluativas
8. Se puede trabajar con el editor visual mediante las vistas... a) diseo. b) cdigo. c) vista en vivo. cualquiera de las anteriores.
9. El botn a) pasar a la vista cdigo.
sirve para...
b) pasar a la vista cdigo y diseo. c) pasar a la vista diseo. d) pasar a la vista cdigo en vivo.
10. La vista diseo... a) es la vista predeterminada en el entorno de trabajo clsico. b) es la que se suele utilizar habitualmente. c) las dos afirmaciones anteriores son verdaderas. d) las tres afirmaciones anteriores son falsas.
Ver la solucin
Volver a la teora
566
Pruebas evaluativas

1. Es posible visualizar un sitio en el panel Archivos 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 los archivos del Sitio.
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.
567
Pruebas evaluativas
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.
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 seguro se mostrarn de la misma forma en cualquier navegador. d) Ninguna de las opciones anteriores.
10. Los colores... a) Se representan con un nmero hexadecimal. b) Pueden personalizarse. c) Cualquiera de las dos primeras opciones. d) Ninguna de las opciones anteriores.
Ver la solucin
Volver a la teora
568
Pruebas evaluativas

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.
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. Hay que limitar el uso de CSS, ya que muchos navegadores no lo reconocen. 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 Adobe.
569
Pruebas evaluativas
8. Para qu sirve este otro botn a) Para crear una lista ordenada.
b) Para crear una lista no ordenada. c) Para aplicar sangra. d) Para crear prrafos.
9. Los estilos CSS... a) Son aplicables a prrafos. b) Son aplicables a palabras seleccionadas. c) Cualquiera de las dos primeras opciones. d) Ninguna de las opciones anteriores.
10. Las hojas de estilo... a) Slo pueden estar vinculadas a una pgina. b) Permiten aplicar un estilo sobre todas las etiquetas de un mismo tipo. c) Slo son recomendables para sitios con muchas pginas. d) Son incompatibles con los estilos en lnea o incrustados en la pgina.
Ver la solucin
Volver a la teora
570
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) Es posible evitar el borde azul alrededor de ella. c) En todos los navegadores aparece el borde azul alrededor de ella.
571
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.
Ver la solucin
Volver a la teora
572
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 a) Verdadero. b) Falso.
aparece cuando se inserta un BMP.
4. Dreamweaver tiene herramientas para cambiar el formado de una imagen. a) Verdadero. b) Falso.
5. Los rollovers son imgenes con extensin SWF, ya que se crean con Flash. a) Verdadero. b) Falso.
6. Una imagen pequea, de 50x50 px siempre ocupar menos en GIF que en JPG. 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.
573
Pruebas evaluativas
8. La barra de navegacin ... a) ...ha de crearse a partir de botones Flash. b) ...no permite identificar cual de los vnculos est activo. c) Cualquiera de las dos primeras opciones. Ninguna de las opciones anteriores.
9. Los botones de la barra de navegacin... a) Pueden aparecer de forma vertical. b) Pueden aparecer de forma horizontal. c) Cualquiera de las dos primeras opciones. d) Ninguna de las opciones anteriores.
10. Podmeos crear una barra de navegacin con CSS. a) S, y la podemos insertar directamente desde Deamweaver. b) S, pero debemos de definir manualmente las propiedades CSS. c) S, aunque el resultado no suele ser bueno, ya que es poco personalizable. d) No, porque CSS no permite que cambien las imgenes al pulsarlas.
Ver la solucin
Volver a la teora
574
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 tablas con gran volumen de contenido. a) Verdadero b) Falso
7. El botn
sirve para...
a) ...Insertar una columna. b) ...Dividir celdas. c) ...Combinar celdas.
575
Pruebas evaluativas
8. A la hora de combinar celdas... a) Slo es posible combinar celdas contiguas. b) La combinacin da como resultado otra celda. c) Cualquiera de las dos anteriores opciones.
9. A la hora de insertar filas... a) ...pueden insertarse debajo de la seleccin. b) ...pueden insertarse a la derecha de la seleccin. c) Cualquiera de las dos primeras opciones. d) Ninguna de las opciones anteriores.
10. Las columnas de una tabla... a) No pueden eliminarse. b) Estn formadas por celdas. c) Cualquiera de las dos primeras opciones. d) Ninguna de las opciones anteriores.
Ver la solucin
Volver a la teora
576
Pruebas evaluativas
Unidad 8. Marcos
1. Los marcos o frames estn desaconsejados para pginas nuevas. 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 .
577
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. d) Ninguna de las opciones anteriores.
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. c) Cualquiera de las dos primeras opciones. d) Ninguna de las opciones anteriores.
Ver la solucin
Volver a la teora
578
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 PHP. 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, y facilitar su uso. 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.
579
Pruebas evaluativas
8. Si existen varios botones de opcin en un mismo formulario con el mismo nombre... a) Se llamarn casillas de verificacin. b) Slo puede haber uno activado. c) Cada uno ser de un color diferente. d) Se producir un error.
9. Un botn... a) ...puede tener asignada la accin "Enviar formulario". b) ...puede tener asignada la accin "Restablecer formulario". c) Cualquiera de las dos primeras opciones. d) Ninguna de las opciones anteriores.
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. c) Cualquiera de las dos primeras opciones. d) Ninguna de las opciones anteriores.
Ver la solucin
Volver a la teora
580
Pruebas evaluativas

1. Los navegadores ms antiguos no reconocen la etiqueta <video>. a) Verdadero. b) Falso.
2. El botn
est en la pestaa de Formulario, en el panel de Insertar.
3. La opcin Bucle indica que al finalizar la pelcula, sta volver a comenzar desde el principio. a) Verdadero. b) Falso.
4. El atributo "controls" hace que el navegador controle automticamente el tamao de la ventana del vdeo. 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.
581
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. El parmetro autostart="false" ... a) ...hace que el archivo de vdeo no se reproduzca automticamente. b) ...hace que el archivo de audio no se reproduzca automticamente. c) Cualquiera de las dos primeras opciones. d) Ninguna de las opciones anteriores.
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. c) Cualquiera de las dos primeras opciones. d) Ninguna de las opciones anteriores.
Ver la solucin
Volver a la teora
582
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.
7. El botn
sirve para...
a) ...abrir todas las plantillas en Dreamweaver. b) ...elegir una imagen de fondo para la plantilla. c) ...crear una nueva plantilla.
583
Pruebas evaluativas
8. El botn
sirve para...
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. c) Cualquiera de las dos primeras opciones. d) Ninguna de las opciones anteriores.
10. Al modificar 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. c) Cualquiera de las dos primeras opciones. d) Ninguna de las opciones anteriores.
Ver la solucin
Volver a la teora
584
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. c) Cualquiera de las dos primeras opciones. d) Ninguna de las opciones anteriores.
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. c) Cualquiera de las dos primeras opciones. d) Ninguna de las opciones anteriores.
10. La herramienta autocompletar etiquetas aparece al introducir la etiqueta y dejar un espacio en blanco. a) Verdadero. b) Falso.
Ver la solucin
Volver a la teora
586
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. c) Cualquiera de las dos opciones anteriores.
587
Pruebas evaluativas
8. De las reglas horizontales es posible... a) ...modificar su altura. b) ...indicar si aparecern sombreadas o no. c) Cualquiera de las dos primeras opciones. d) Ninguna de las opciones anteriores.
9. Para usar una fuente web ... a) ... la primera vez debemos aadirla y luego buscar su ubicacin cada vez. b) ... la primera vez debemos aadirla dando su ubicacin en el disco duro y luego aparecer en el desplegable Fuentes. c) ... la primera vez debemos aadirla dando su ubicacin web y luego aparecer en el desplegable Fuentes.
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 Insertar Cdigo fuente.
Ver la solucin
Volver a la teora
588
Pruebas evaluativas
Unidad 14. Capas

1. Las capas pueden situarse 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.
5. El atributo ndice Z significa... a) El orden en el que han sido insertadas las capas. b) El nmero de orden de colocacin de las capas. 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. 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.
589
Pruebas evaluativas
8. En el panel Elementos PA... a) ...puede establecerse la visibilidad de la capa. b) ...puede establecerse el ndice Z de la capa. c) Cualquiera de las dos primeras opciones. Ninguna de las opciones anteriores.
9. Una capa... a) ...no puede contener animaciones Flash. b) ...solapar a aquellas capas cuyo ndice Z sea mayor que el suyo. c) Cualquiera de las dos primeras opciones. d) Ninguna de las opciones anteriores.
10. El ID de capa es el nombre de la capa. a) Verdadero. b) Falso.
Ver la solucin
Volver a la teora
590
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.
5. Slo podemos aplicar comportamientos a capas. a) Verdadero. b) Falso.
6. Los comportamientos son distintos para cada navegador y slo funcionarn en el que indiquemos. a) Verdadero. b) Falso.
7. El evento onMouseOver significa... a) ...al hacer clic. b) ...mostrar capa. c) ...cuando el ratn est sobre.
591
Pruebas evaluativas
8. El evento onclick significa... a) ...al hacer clic. 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. c) Cualquiera de las dos primeras opciones. d) Ninguna de las opciones anteriores.
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. c) Cualquiera de las dos primeras opciones. d) Ninguna de las opciones anteriores.
Ver la solucin
Volver a la teora
592
Pruebas evaluativas

1. Es aconsejable asociar el comportamiento de mostrar mensajes emergentes cuando se produzca el evento... . a) onLoad. b) onClick.
2. Al mostar un mensaje emergente la pgina quedar boqueada hasta que el usuario pulse el botn Aceptar de la ventana emergente a) Verdadero. b) Falso.
3. Cargar imgenes previamente puede hacer que el texto de la pgina aparezca ms tarde. a) Verdadero. b) Falso.
4. Cargar imgenes previamente a la carga completa del documento es muy til, y debemos de hacerlo salvo excepciones muy concretas. 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.
593
Pruebas evaluativas
8. Los navegadores Internet Explorer y Mozilla Firefox no siempre muestran la informacin contenida en las pginas web de forma idntica. Por lo tanto, habr que crear un comportamiento distinto para cada navegador. 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.
Ver la solucin
Volver a la teora
594
Pruebas evaluativas

1. El selector p.rojo corresponde a ... a) Un prrafo que tiene como clase rojo. b) Cualquier prrafo con texto rojo. c) Cualquier elemento con la clase rojo. d) Un prrafo con el ID rojo.
2. El selector #contenedor corresponde a... a) Cualquier elemento que tenga como clase contenedor. b) Un nico elemento con el id contenedor. c) Slo etiquetas div con el id contenedor. d) Slo etiquetas div con la clase 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 asteriscos de esta forma: a(href=*_blank*).
5. El orden de la propiedad border es: a) border: width style color; b) border: color width style; c) Funciona de ambas formas.
6. Podemos cambiar las vietas de una lista por imgenes utilizando la propiedad... a) list-image. b) list-style-image.
595
Pruebas evaluativas
7. La diferencia entre la propiedad margin y padding es: a) Margin mide la distancia del borde con el exterior. b) Padding mide la distancia del borde con el interior. c) Ambas respuestas son correctas
8. Para dejar de aplicar un elemento flotante sobre algo deberemos utilizar la propiedad... a) clear. b) break.
9. Los valores relative y absolute de la propiedad position se diferencian en: a) Relative establece la 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.
Ver la solucin
Volver a la teora
596
Pruebas evaluativas

1. A qu nos referimos como maquetacin web? a) A la organizacin y distribucin de elementos en nuestra pgina. b) A crear una pgina de prueba o borrador, que hacemos antes de ponernos con el diseo definitivo. c) A crear el estilo de la pgina, colores, imgenes, etc.
2. Podemos cambiar el tamao de una divisin? a) Slo el ancho, con la propiedad width. El alto depende del contenido. b) Podemos fijar el alto y ancho. c) Podemos cambiar el tamao de cualquier lado, indicando el lado y el nuevo tamao. d) Slo lo podemos cambiar si le hemos aplicado posicionamiento.
3. En qu se diferencia un tamao expresado en em de otro expresado en %? a) Son lo mismo, ambos son relativos al tamao de la fuente del documento. b) En que em es relativo a la fuente del documento, y % es relativo al tamao del elemento que lo contiene. c) En que em es relativo a la fuente del documento, y % es relativo al tamao original del elemento. d) En que em es una unidad fija, y % es relativo al tamao de la ventana del navegador.
4. El desbordamiento slo se puede producir si hemos cambiado el tamao de un elemento. a) Verdadero. b) Falso.
5. Utilizando el posicionamiento relativo... a) Podemos desplazar un elemento 5px a la derecha de su posicin original. b) Podemos hacer que un elemento sea ms ancho que el elemento que lo contiene. c) Podemos utilizarlo para no cambiar un elemento, pero que sus elementos hijos se posicionen a partir de l. d) Todas las respuestas son ciertas.
597
Pruebas evaluativas
6. El posicionamiento absoluto... a) Hace que el elemento al que se lo aplicamos siempre est por encima del resto. b) Nos permite indicar la posicin exacta de un elemento en la pgina. c) Nos permite colocar un elemento en un punto exacto, y que se ve ah aunque desplacemos la pgina.
7. Al aplicar posicionamiento flotante a un elemento hacemos que... a) Que siempre est por encima del resto, tapando a otros elementos. b) Que se desplace al final de la pgina, la primer hueco que encuentre. c) Que se desplace todo lo que pueda a la derecha o la izquierda, segn lo hayamos puesto. d) Que no pueda ser contenido por otro elemento.
8. Si queremos que un men quede en la parte izquierda de la pgina, y se muestre a la misma altura aunque hagamos scroll vertical, usaremos... a) Posicionamiento flotante. b) Posicionamiento absoluto. c) Posicionamiento fijo. d) Cualquiera de los anteriores.
9. Si queremos que una imagen se muestre a la derecha del texto, teniendo varias lneas de texto a la misma altura que la imagen, usaremos... a) Posicionamiento flotante. b) Posicionamiento absoluto. c) Posicionamiento fijo. d) Cualquiera de los anteriores.
10. El diseo de cuadrcula fluida de Dreamweaver permite ... a) ... variar los estilos en funcin del ancho de la ventana. b) ... variar los estilos y cambiar la estructura en funcin del ancho de la ventana. c) ... variar los estilos, cambiar la estructura y redimensionamiento automtico de las imgenes en funcin del ancho de la ventana.
Ver la solucin
Volver a la teora
598
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) Direccin FTP. b) Directorio raz.
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.
599
Pruebas evaluativas
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. c) Las respuestas anteriores son correctas. d) Las respuestas anteriores son falsas.
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.
Ver la solucin
Volver a la teora
600
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) <?php y ?>. c) <?asp y ?> d) < php y /php?>
4. El paquete WampServer 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 WampServer. 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.
601
Pruebas evaluativas
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.
Ver la solucin
Volver a la teora
602
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.
5. Si en el cuadro de dilogo Juego de Registros queremos crear un filtro respecto a una variable enviada desde un formulario seleccionaremos la opcin... a) Valor introducido. b) Parmetro URL. c) Ninguna de las anteriores.
6. No es posible aplicar cualquier estilo CSS sobre un texto dinmico. a) Verdadero. b) Falso.
603
Pruebas evaluativas
7. La barra de navegacin de juego de registros a) Filtrado y paginacin. b) Paginacin y recuento. c) Ocultacin de regiones y paginacin.
combina las opciones de...
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.
Ver la solucin
Volver a la teora
604
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.
605
Pruebas evaluativas
8. Para poder utilizar la opcin Conectar usuario 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) Verdadero. b) Falso.
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.
Ver la solucin
Volver a la teora
606
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 Vista en vivo. 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.
607
Pruebas evaluativas
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.
Ver la solucin
Volver a la teora
608
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.
5. Es posible eliminar las filas repetidas de un archivo XML en la insercin de 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.
Pruebas evaluativas
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.
Ver la solucin
Volver a la teora
610
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.
611
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.
Ver la solucin
Volver a la teora
612
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.
613
Pruebas evaluativas
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.
Ver la solucin
Volver a la teora
614
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 secciones 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.
Pruebas evaluativas
9. Un panel que se contrae de Spry puede mostrarse desplegado al cargarse la pgina. 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 ningn caso. d) Ninguna de las anteriores.
10. Cuando creamos un control Spry, en la carpeta SpryAssets cuntos archivos se crean? a) Tres. b) Dos.
Ver la solucin
Volver a la teora
616
Ayuda a los ejercicios propuestos

Apartado 1 Copia la carpeta deportes que encontrars en la carpeta ejercicios a la carpeta mis_sitios. Para crear un sitio nuevo accede al men Sitio y elige Nuevo sitio.... En la nueva ventana, asegrate de tener seleccionada la categora Sitio. En Nombre del sitio hay que escribir Deportes. En Carpeta del sitio local hay que seleccionar la carpeta deportes, que has copiado a la carpeta mis_sitios. Por ltimo, hay que hacer clic sobre el botn Guardar. Apartado 2 Para abrir el documento index.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 (CSS), 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 #000, en el campo Estilo subrayado escoge Nunca subrayar. Apartado 4 Selecciona la categora Apariencia (CSS) y modifica los campos a los siguientes valores: Imagen de fondo: imagenes/fondo_logo.gif; Repetir: no-repeat. Apartado 5 Modifica tambin los campos Fuente de pgina : Verdana, Arial, sans-serif; Tamao: 16 y Color de texto: #535D6F. Apartado 6 En la categora Ttulo/Codificacin escribe Tu tienda de deportes como Ttulo. Por ltimo, pulsa el botn Aceptar. Apartado 7 Haz clic sobre el botn Guardar (o pulsa las teclas Ctrl + S), 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.
617
Apartado 1 Para crear un sitio nuevo accede al men Sitio y elige Nuevo sitio.... En la nueva ventana, asegrate de tener seleccionada la categora Sitio En Nombre del sitio hay que escribir Animales. En Carpeta del sitio local hay que seleccionar la carpeta animales, que habrs copiado de la carpeta ejercicios a mis_sitios. Por ltimo, hay que hacer clic sobre el botn Guardar. 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 . Si no la ves, puedes activarla desde el men Ver Barras de herramientas Documento. Apartado 3 Para abrir el documento gatos.htm puedes hacer doble clic sobre l, en el 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 index.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 Cerrar . , y despus sobre el botn
Otra opcin sera utilizar el men Archivo Guardar todo y men Archivo Cerrar todo.
Volver al ejercicio sin resolver
Volver a la teora
618

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 index.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 Inspector de propiedades CSS, brelo a travs del men Ventana, opcin Propiedades. En le desplegable Regla de destino, selecciona body, y pulsa el botn Editar regla. Haz clic en la categora Cuadro y en el marco Margin asegrate de que la opcin Igual para todo esta activada. En el campo Top. escribe 20px. Haz clic en la categora Fondo y modifica las propiedades Background-position (x) a center y Background-position (y) a top. Pulsa Aceptar. Apartado 4 En le desplegable Regla de destino del Inspector de propiedades CSS , selecciona <Nueva regla CSS>, y pulsa el botn Editar regla. En Tipo de Selector selecciona Etiqueta. En nombre escribe html. Y en Definicin de regla selecciona Slo en este documento. Pulsa el botn Aceptar y se abrir el dilogo dnde asignars las propiedades CSS. En la categora Fondo, en la propiedad background-color escribe el valor #E0E5EF. En la propiedad Background-image elige la imagen fondo.png que encontrars en la carpeta imagenes. En Backgroundrepeat establece repeat-x. En las propiedades Background-position (x) elige center y Backgroundposition (y) elige top. Pulsa el botn Aceptar. Para ver el resultado correctamente, utiliza la Vista en vivo o previsualzalo en el navegador. Apartado 5. En le desplegable Regla de destino del Inspector de propiedades CSS, selecciona <Nueva regla CSS>, y pulsa el botn Editar regla. En Tipo de Selector selecciona ID, en Nombre selecciona menu, y en Definir en selecciona Slo en este documento.
Pulsa el botn Aceptar y se abrir el dilogo dnde asignars las propiedades CSS. En la categora Tipo, escribe #EFF4FF en color, selecciona 18px en font-size y bold en font-weight. En la categora Cuadro, introduce 600px en la propiedad width, En el cuadro margin, desmarca la opcin Igual para todo e introduce los valores Top: 80px, Right: auto, Bottom: 10px y Left auto. En la categora Bloque, selecciona center en Text-align. Pulsa Aceptar. Haz clic sobre el primer texto, el que aparece en cajas punteadas y que ahora mismo tenemos sobre el fondo del logo. En la barra de estado, haz clic sobre la etiqueta table. En el Inspector de propiedades, en el campo que aparece bajo el nombre de la etiqueta, despligalo y escribe menu. Abre el panel Estilos CSS (men Ventana Estilos CSS). Haz clic en la vista todo. Selecciona el selector body,th,td. Haz clic derecho sobre l y elige Editar selector. Cmbialo por slo body. Apartado 6. Haz clic sobre el encabezado 1. En el desplegable Regla de destino del Inspector de propiedades CSS, selecciona <Nueva regla CSS>, y pulsa el botn Editar regla. En Tipo de Selector selecciona Etiqueta, en Nombre selecciona h1, y en Definir en selecciona Slo en este documento. Pulsa el botn Aceptar y se abrir el dilogo dnde asignars las propiedades CSS. En la categora Tipo, escribe #738098 en color. Pulsa Aceptar. Puedes ver cmo se vera esta pgina con los cambios hechos hasta ahora aqu. Apartado 7. Abre el panel CSS (men Ventana Estilos CSS). Haz clic en la vista todo. Selecciona las reglas que cuelgan de style. Haz clic derecho sobre ellas y elige Mover reglas CSS.... Marca Una nueva hoja de estilos y pulsa Aceptar. Asegrate de tener elegida la carpeta del sitio Deportes, escribe el nombre estilodeportes y pulsa Guardar. Ve al men Archivo y elige Guardar todo. Para abrir los documentos donde.htm, instalaciones.htm y reservas.htm hay que hacer doble clic sobre estos archivos, en la lista de archivos que aparecen en el panel Archivos. Para cada uno de los archivos, ve al men Formato Estilos CSS Adjuntar hoja de estilos, y selecciona la hoja estilodeportes.css. Apartado 8 Haz clic sobre la pestaa del archivo instalaciones.htm y seleccionar las seis lneas que hacen referencia a las instalaciones. Haz clic sobre el botn Lista sin ordenar . Apartado 9 Para cada uno de los archivos, hacer clic sobre el botn Guardar botn Cerrar . O puedes pulsar en Guardar Todo , y despus sobre el
, hacer clic derecho sobre las pestaas y elegir

620
Cerrar todo.
Volver a la teora
621

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 Haz el ttulo Perros y en el Inspector de propiedades HTML selecciona Encabezado 1 en el desplegable Formato. Apartado 4 En el Inspector de propiedades CSS, selecciona <Nueva regla CSS> haz clic en el botn para ponerlo en cursiva. Se abrir la ventana Nueva regla CSS. Elige el Tipo de selector como Etiqueta, quedar seleccionada la etiqueta h1. Pulsa Aceptar. Tambin selecciona 36 en el desplegable Tamao del el Inspector de propiedades CSS. Apartado 5 y 6 Selecciona el texto Cuidados Postnatales y en el Inspector de propiedades CSS haz clic en el botn para poner el texto en cursiva. Se abrir la ventana Nueva regla CSS. Deja el Tipo de selector como Clase y escribe como Nombre titulo. Pulsa en para ponerlo en negrita.
Tambin selecciona 18 en el desplegable Tamao. Apartado 7 Para acceder a las propiedades 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 Apariencia (CSS) selecciona Georgia, Times New Roman, Times, serif en el desplegable Fuente de la pgina. Escoge 16 en el campo Tamao. En Color del fondo escribe #EFEFD1. Acepta los cambios. Apartado 8 Para exportar los estilos a un archivo .css abre el panel Estilos 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. Selecciona todas las reglas, haz clic derecho y selecciona Mover reglas CSS... para exportar todos los estilos de la pgina.
Marca la opcin Una nueva hoja de estilos CSS... y pulsa Aceptar. Busca la carpeta animales, raz del sitio, en el cuadro de dilogo que se te muestra y guarda la hoja de estilos como estiloanimales.css. Se vincular al documento automticamente. Apartado 9 Para abrir el documento index.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 estiloanimales.css. Confirma que el campo Aadir como tiene la opcin Vincular activada. Apartado 10 Haz clic sobre la primera lnea de texto, y en el Inspector de propiedades HTML selecciona Encabezado 1 en el desplegable Formato. Apartado 11 Para abrir el documento consultas.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 12 Selecciona el texto Consultas y en el campo Formato del inspector de propiedades HTML selecciona Encabezado 1. Apartado 13 Para abrir el documento gatos.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 estiloanimales.css. Confirma que el campo Aadir como tiene la opcin Vincular activada. Apartado 14 Selecciona el texto Gatos y en el campo Formato del inspector de propiedades HTML selecciona Encabezado 1. Apartado 15 Selecciona el texto Cmo Prevenir Los Problemas Dentales? y en el campo Clase del inspector de propiedades HTML selecciona titulo. Apartado 16 Seleccionar las cuatro ltimas lneas. Hacer clic sobre el botn Lista sin ordenar . .
Haz clic sobre la segunda lnea de la lista, y pulsa el botn Sangra de texto Pulsar fuera de la lista para que se aplique el ltimo cambio.
Apartado 17 Para todos los documentos abiertos, hacer clic sobre el botn Guardar Todo men Archivo Guardar todo.
, o sobre el
623
Volver a la teora
624
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. Apartado 2 Para abrir los documentos, haz doble clic sobre cada uno en el panel Archivos. Apartado 3 Si no aparece el inspector de propiedades HTML brelo a travs del men Ventana, opcin Propiedades. Veamos, por ejemplo, cmo hacerlo en index.htm: En el texto Quienes no crees vnculo, ya que sera el que lleva a la pgina actual. Selecciona el texto Dnde. Escribe donde.htm en Vnculo, del inspector de propiedades. Selecciona el texto Instalaciones. Escribe instalaciones.htm en Vnculo, del inspector de propiedades. Selecciona el texto Reservas. Escribe reservas.htm en Vnculo, del inspector de propiedades. Pulsar fuera del texto para que se aplique el ltimo cambio. Repite los pasos con cada pgina, omitiendo el enlace a la pgina actual segn corresponda. Observa que ya no har falta que escribas la pgina a enlazar, ya que te aparecer en el desplegable. Apartado 4 Ve al men Archivo y elige Guardar todo. Despus en el mismo men elige Cerrar todo.
625
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. Apartado 2 Para abrir el documento index.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 la imagen de aulaClic. Para ello basta con pulsar sobre ella. Escribir http://www.aulaclic.es en Vnculo, del Inspector de propiedades HTML. Apartado 4 Seleccionar la imagen de aulaclic. Seleccionar _blank en Destino, del inspector de propiedades. Pulsar fuera de la imagen para que se aplique el ltimo cambio. Apartado 5 en el Inspector de propiedades CSS , en Regla de destino, elige Nueva regla, y pulsa el botn Editar regla. En Tipo de selector elige Compuesto. En Nombre del selector, escribe a img. En Definicin de regla selecciona la hoja estiloanimales.css. Pulsa Aceptar. Ve a la categora Borde. En style elige none y pulsa Aceptar. Apartado 6 Hacer clic sobre el botn Guardar , y despus sobre el botn Cerrar de la pestaa.
Volver a la teora
626
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, y pulsa la tecla Intro para crear un nuevo prrafo. Elegir la opcin Imagen, del men Insertar. Seleccionar la imagen logodeportes.gif, que se encuentra dentro de la carpeta imagenes del sitio. En la Barra de estado haz clic sobre la etiqueta p para seleccionar todo el prrafo. En el Inspector de propiedades CSS, en Regla de destino selecciona <Nuevo estilo en lnea>. Haz clic en el icono para centrar el contenido del prrafo. , y despus sobre el botn Cerrar .
Apartado 4 Hacer clic sobre el botn Guardar
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 2 Para abrir el documento index.htm hay que hacer doble clic sobre l, en el panel Archivos. Apartado 3 Situar el punto de insercin al lado del texto Inicio. Inserta la imagen (pata1.gif), como una imagen normal, desde el men Insertar Imagen. del panel de propiedades.
Con la imagen seleccionada, pulsa el botn
Selecciona la herramienta Cuentagotas y haz clic sobre el fondo para hacerlo transparente. Pulsa Aceptar. Selecciona la imagen y brrala, ya hemos modificado el archivo. Repite estos pasos con la imagen (pata2.gif).
627
Elegir la opcin Imagen de sustitucin , que se encuentra en la opcin Objetos de imagen del men Insertar. Se abrir una nueva En Imagen original: seleccionar la imagen imagenes/pata1.gif. En Imagen de sustitucin: seleccionar la imagen imagenes/pata2.gif. Activar la casilla Carga previa de imagen de sustitucin. Hacer clic sobre el botn Aceptar. Apartado 4 Si no aparece el inspector de propiedades, brelo a travs del men Ventana, opcin Propiedades. Seleccionar el rollover, pulsando sobre l. Observa el atributo ID que se le a asignado (por ejemplo Image1). Pulsar fuera del rollover. En el Inspector de propiedades CSS, en el desplegable Regla de destino elige <Nueva regla CSS>. Se abrir la ventana Nueva regla CSS. En Tipo de selector elige ID. En Nombre de selector, escribe el ID de la imagen (cuidado con las maysculas). En Definicin de regla elige estiloanimales.css. En las reglas de Bloque, establece la propiedad Vertcal-align a middle. Pulsa Aceptar. Apartado 5 Hacer clic sobre el botn Guardar todo , y despus cierra la pestaa de documento.
Volver a la teora
628
Unidad 7. Tablas
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. Apartado 2 Para abrir el documento reservas.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. Observa que el aspecto es el mismo que el de la primera tabla. Si haces clic sobre ella, en la barra de estado vers que tiene aplicada la clase precios (table.precios). Aplica la misma clase a la segunda tabla, haciendo clic en el borde para seleccionarla entera, y eligiendo precios en el desplegable Clase del Inspector de propiedades. Si el inspector de propiedades no se muestra en su totalidad, pulsa sobre el botn propiedades ms avanzadas. Selecciona la tabla completa y en Borde escribe 0. En Rell. celda escribe 4. En Esp. celda escribe 4. Con la tecla Ctrl pulsada, selecciona las dos primeras celdas, y marca la opcin Enc. para convertirlas en encabezado. Selecciona la celda en la que pone 3 y la de abajo que est en blanco y haz clic en el botn combinarlas. Selecciona las celdas con los precios, y en Horiz selecciona Centro. Haz clic a la izquierda de la fila de abajo, para seleccionara completa, y desde el Inspector de propiedades asgnale la clase alt. Apartado 4. Haz clic a la derecha del encabezado para situar el punto de insercin. Ve al men Insertar Tabla. Configura la nueva tabla de la siguiente manera: Filas 1, Columnas 2, Ancho de tabla 100 Porcentaje, Grosor de borde 0, Espacio entre celdas 10. Elige el diseo Ninguno y pulsa Aceptar. Selecciona las dos celdas, y en Vert. elige Superior, y en An. 50%. Haz clic al principio del primer prrafo, y arrastra hasta seleccionar el prrafo completo y la tabla. Haz clic sobre el prrafo y arrastra para mover la seleccin a la primera celda de la tabla recin creada.
para desplegar sus
para
Haz lo mismo con el otro prrafo y tabla, para moverlos a la otra celda. Debajo de la tabla habrn quedado prrafos vacos. Brralos. Apartado 5. Hacer clic sobre el botn Guardar , y despus sobre el botn Cerrar .
Volver a la teora
630
Unidad 7. Tablas
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. Apartado 2 Para abrir el documento index.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. Si el inspector de propiedades no se muestra en su totalidad, pulsa sobre el botn propiedades ms avanzadas. para desplegar sus
Sita el punto de insercin al principio del encabezado 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 inspector de propiedades. Se abrir una nueva ventana. Seleccionar Columnas en Dividir, y escribir 2 en Nmero:. Hacer clic sobre el botn Aceptar. 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. Selecciona la primera celda de la ltima fila, en Al escribir 31. Selecciona la segunda celda de la segunda fila, en An escribir 150. En Al escribir tambin 100. Selecciona la segunda, tercera y cuarta celda de la primera columna y pulsa el botn propiedades para combinarlas. Selecciona la segunda, tercera y cuarta celda de la ltima columna y pulsa el botn propiedades para combinarlas. del inspector de del
del inspector de
Apartado 4 Selecciona la tabla completa y selecciona centro en el campo Alinear del inspector de propiedades. Crea una Nueva regla CSS. Una clase con nombre contenido. En definicin de la regla , elige
estiloanimales.css. En Fondo establece background-color a #D6E7DB. Aplcale la clase a la tabla. Crea una Nueva regla CSS con el selector compuesto .contenido .arriba-izq. En Fondo establece background-color a #EFEFD1, background-image: imagenes/arriba-izq.png; background-repeat: norepeat;. Asigna la clase a la celda de arriba - izquierda. Crea otra regla para el selector .contenido .arriba-der , como la anterior, pero empleando la imagen arribader.png. Asigna la clase a la celda de arriba - derecha. Crea otra regla para el selector .contenido .abajo-der , como la anterior, pero empleando la imagen abajoder.png. Asigna la clase a la celda de abajo - derecha. Crea otra regla para el selector .contenido .abajo-izq , como la anterior, pero empleando la imagen abajoizq.png. Asigna la clase a la celda de abajo - izquierda. Crea otra regla con el selector compuesto .contenido .arriba. En Fondo establece background-color a #EFEFD1, background-image: imagenes/arriba.png; background-repeat: repeat-x;. Asigna la clase a la celda de arriba. Crea otra regla para el selector .contenido .abajo , como la anterior, pero empleando la imagen abajo.png. Asigna la clase a la celda de abajo. Crea otra regla con el selector compuesto .contenido .izquierda. En Fondo establece background-color a #EFEFD1, background-image: imagenes/izquierda.png; background-repeat: repeat-y;. Asigna la clase a la celda la izquierda. Crea otra regla para el selector .contenido .derecha, como la anterior, pero empleando la imagen derecha.png. Asigna la clase a la celda de la derecha.
Apartado 5 Sita el punto de insercin en 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 6 Selecciona las celdas centrales de la segunda fila. Luego, selecciona Centro en Horiz y Medio en Vert. Apartado 7 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. Si al final ha quedado algn elemento vaco, como un prrafo o un encabezado, brralo. Apartado 8 Para abrir el documento botones.htm hay que hacer doble clic sobre l, en el panel Archivos. Selecciona la lista no ordenada 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. Vuelve al archivo botones.htm. En el panel Estilos CSS, selecciona los estilos que cuelgan de <style>, haz clic derecho y elige Copiar. Vuelve al archivo index.htm. En el panel Estilos CSS, haz clic derecho sobre estiloanimales.css y elige Pegar.
Apartado 9 En el inspector de propiedades selecciona Derecha en el campo Horiz y Superior en Vert. Apartado 10 Hacer clic sobre el botn Guardar .
Apartado 11 Repite los apartados 2 al 14 con los archivos consultas.htm, gatos.htm y perros.htm. Lo ms cmodo ser copiar la tabla completa y reemplazar el contenido central.
Volver a la teora
633
Apartado Para abrir el sitio Deportes hay que seleccionarlo en el panel Archivos. Puedes abrir el panel a travs del men Ventana, opcin Archivos. Apartado Para abrir el documento reservas.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. Sita el punto de insercin en la celda a la derecha del texto Hora:, haciendo clic. Ve al men Insertar, opcin Formulario, y elige la opcin Campo de texto. En el cuadro de dilogo que aparece (si no, hazlo desde el Inspector de propiedades), asgnale el ID hora, y marca la opcin No hay etiqueta de rtulo. Selecciona el campo de texto que acaba de aparecer, y escribe 5 en Ancho car, del inspector de propiedades. Apartado 4 Situar el cursor en la celda a la derecha del texto Centro:. Ve al men Insertar, opcin Formulario, y elige la opcin Seleccionar (Lista/men). En el cuadro de dilogo que aparece (si no, hazlo desde el Inspector de propiedades), asgnale el ID centro, y marca la opcin No hay etiqueta de rtulo. Selecciona la lista/men que acaba de aparecer, y elige Men en Tipo, del inspector de propiedades. Haz clic sobre el botn Valores de lista. Aparecer una nueva ventana. Escribe Don Benito en Etiqueta de elemento. Pulsa sobre el botn Pulsa el botn Aceptar. Apartado 5 Seleccionar el men. Selecciona Don Benito en Seleccionado inicialmente, del inspector de propiedades. Apartado 6 Situar el cursor a la derecha del botn Enviar. Ir al men Insertar, opcin Formulario, y elegir la opcin Botn. En el cuadro de dilogo, deja los campos en blanco. Selecciona el botn, y selecciona Restablecer formulario en Accin, del inspector de propiedades.
para insertar nuevos elementos en la lista. Aade las etiquetas Madrid y Silla.
Apartado 7 Haz clic sobre el botn Guardar
(Ctrl + S), 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. Apartado 2 Para abrir el documento consultas.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. Situar el cursor en la celda vaca que se encuentra a la derecha del texto Animal:. En el men Insertar, opcin Formulario, elige Seleccionar (Lista/men). En el cuadro de dilogo que aparece (si no, hazlo desde el Inspector de propiedades), asgnale el ID animal, y marca la opcin No hay etiqueta de rtulo. Selecciona la lista/men que acaba de aparecer, y elige Men en Tipo, del inspector de propiedades. Haz 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. Aade las etiquetas Perro, Gato y Otros.
Haz clic sobre el botn Aceptar. Apartado 4 Seleccionar el men. Seleccionar --- Elige opcin --- en Seleccionado inicialmente, del inspector de propiedades. Apartado 5 Sita el punto de insercin en la celda vaca que se encuentra a la derecha del texto Consulta:. Ve men Insertar, opcin Formulario, y elige rea de texto. En el cuadro de dilogo que aparece (si no, hazlo desde el Inspector de propiedades), asgnale el ID consulta, y marca la opcin No hay etiqueta de rtulo. 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 izquierda del botn Restablecer. Ve al men Insertar, opcin Formulario, y elige la opcin Botn.
En el cuadro de dilogo, deja los campos en blanco. Apartado 7 Haz clic sobre el botn Guardar , y despus sobre el botn Cerrar .
Volver a la teora
636

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. Apartado 2 Para abrir el documento index.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. Si el inspector de propiedades no se muestra en su totalidad, pulsa sobre el botn propiedades ms avanzadas. para desplegar sus
Sita el cursor en la ltima lnea, a la derecha de la imagen de aulaclic y pulsa Intro dos veces para crear dos nuevos prrafos. En el men Insertar, opcin Media, y elige la opcin SWF. Seleccionar el archivo basket.swf, que se encuentra dentro de la carpeta imagenes del sitio. Apartado 4 Seleccionar el archivo Flash. Desactiva la casilla Bucle, del inspector de propiedades. Activa la casilla Rep.autom, si no lo est ya. En el desplegable Wmode selecciona Transparente. Selecciona el prrafo que lo contiene desde la barra de estado. En el Inspector de propiedades CSS, selecciona Nuevo estilo en lnea y centra el prrafo. Apartado 5 Haz clic sobre el botn Guardar. Acepta el dilogo que nos informar de los archivos incluidos, y despus sobre el botn Cerrar .
Observa que ahora, en el sitio, tenemos tambin una carpeta llamada Scripts.
Volver a la teora
637

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. Apartado 2 Para abrir el documento conplantilla.htm hay que hacer doble clic sobre l, en el panel Archivos. Apartado 3 Ve al men Modificar, opcin Plantillas, y elige la opcin Aplicar plantilla a pgina. Se abrir una nueva ventana. En Sitio: selecciona Deportes. En Plantillas: selecciona plantilladeportes. Activa la casilla Actualizar pgina cuando cambie la plantilla. Haz clic sobre Seleccionar. Existen nombres de regiones no coincidentes aparecer una nueva ventana. Esto se debe al texto contenido en la pgina. En Mover contenido a la nueva regin: seleccionar Contenido. Hacer clic sobre Aceptar. Todo el texto est en la regin de contenido. Corta el texto que hace de ttulo y pgalo en la regin de ttulo. Apartado 4 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. Apartado 2 Para abrir el documento gatos.htm hay que hacer doble clic sobre l, en el panel Archivos. Ve al men Archivo y selecciona Guardar como plantilla... Dale el nombre plantillaanimales en el sitio Animales. Cuando te pregunte si quieres actualizar los vnculos pulsa Aceptar. Selecciona el contenido del encabezado. Ve al men Insertar, Objetos de plantilla, opcin Regin editable. Dale el nombre Titulo.
Cambia el contenido de la regin por el texto Ttulo. Borra la imagen y selecciona el resto del texto. Ve al men Insertar, Objetos de plantilla, opcin Regin editable. Dale el nombre Contenido. Cambia todo el texto de la regin por el texto Contenido. Guarda la plantilla. Apartado 3 Ve al men Archivo Nuevo.... Elige Pagina de plantilla, en sitio Animales y en plantilla plantillaanimales. Pulsa Aceptar. Guarda el archivo como deplantilla.htm. Apartado 4 Intenta borrar la imagen y vers que ni siquiera se puede seleccionar. Apartado 5 Borra el texto Ttulo y escribe Animales en su lugar. Escribe algo en la regin Contenido. Es posible hacerlo, ya que estos textos se encuentran dentro de una regin editable. Apartado 6 Ve al men Modificar, opcin Plantillas, y elegir la opcin Separar de plantilla. Apartado 7 Selecciona la imagen y pulsa Supr. Vers como ahora s que la podemos borrar. Apartado 8 Hacer clic sobre el botn Guardar , y despus sobre el botn Cerrar .
Volver a la teora
639

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. 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 4 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. 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 logoaulaclic.png. 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 4 Hacer clic sobre el botn Guardar , y despus sobre el botn Cerrar .
640
Volver a la teora
641

Apartado 1 Para abrir el sitio Deportes hay que seleccionarlo en el panel Archivos. Puedes abrir el panel a travs del me 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 a 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 style="text-align:center">Para más información sobre dónde se encuentran nuestros centros, puedes llamar al: <span style=" 05 50</span></p>
Insertar <marquee> antes de dicho cdigo (despus de la apertura del prrafo), y </marquee> al final de l (antes de cerr se insertar automticamente </marquee> despus de ella. Como no queremos </marquee> en ese lugar, habr que mover El cdigo resultante ser:
<p style="text-align:center"><marquee>Para más información sobre dónde se encuentran nuestros centros, puedes llamar al: <span style="font 05 50</span></marquee></p> Apartado 4 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 me
Apartado 2 Para abrir los documentos consultas.htm, gatos.htm, perros.htm e index.htm hay que hacer doble clic sobr Apartado 3 Para cada uno de los archivos, sita el cursor en la segunda celda de la tercera fila de la tabla. Haz clic en el men Insertar HTML Regla horizontal. Apartado 4 En el men Archivo, selecciona Guardar todo y despus Cerrar todo.
642
Volv
643
Unidad 14. Capas

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. Apartado 2 Para abrir el documento index.htm hay que hacer doble clic sobre l, en el panel Archivos Apartado 3 Sita el punto de insercin en cualquier sitio de la pgina, por ejemplo al final. Ve al men Insertar, opcin Objetos de diseo, y luego opcin Div PA. Haz clic derecho sobre el icono de la esquina de la capa.
En el men contextual, selecciona ID... y asgnale oferta como nuevo ID. Haz clic en el interior de la capa y escribe Cerrar [x]. En el inspector de propiedades, crea un vnculo a #. Pulsa Intro para crear otro prrafo y escribe el resto del texto: Este fin de semana, disfruta de clases gratuitas de aerbic, simplemente por visitar nuestras instalaciones. Apartado 4 Accede al Inspector de propiedades CSS . Con el punto de insercin dentro de la capa, observa que en regla de destino aparece #oferta (si no, cmbialo). Pulsa el botn Editar regla. Las propiedades que debes cambiar son: el color de fondo a #CCFFCC, la alineacin del texto centrada, y aadir un borde de color #648F62 5px y doble. Crea otra regla para el selector compuesto #oferta p.cerrar . Edita sus propiedades, reduciendo el t amao de la fuente a un 85%, con un margen de 5px y alineado a la derecha. Aplica la clase cerrar al primer prrafo de la capa. Seleccionar la capa, pulsando sobre la imagen . Puedes modificar su tamao con los controles del marco, o rellenando los campos An. y Al. del inspector de propiedades. Establece el ancho de la capa a 285px, y el alto a 130px. Apartado 5 Pulsa sobre el icono debajo de los enlaces del men. y arrastra para mover la capa. Posicinala verticalmente, un poco por
Para posicionarla horizontalmente, escribe 30% en el campo Izq del inspector de propiedades. Hacer clic sobre el botn Alinear al centro ,
Apartado 6 Con la capa seleccionada, marca Visible en el desplegable Vis. del Inspector de propiedades. Apartado 7 Haz clic sobre el botn Guardar , y despus sobre el botn Cerrar .
Ms adelante haremos que el enlace Cerrar [x] oculte la capa.

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. Apartado 2 Para abrir el documento gatos.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. Sita el punto de insercin la derecha de la imagen del gatito. Ve al men Insertar, opcin Objetos de diseo, y luego opcin Div PA. Haz clic derecho sobre la esquina .
En el men contextual, selecciona ID... y asgnale gatosemana como nuevo ID. Apartado 4 Situar el punto de insercin dentro de la capa. Ve al men Insertar Imagen e inserta la imagen cerrar_gatosemana.png de la carpeta imagenes. Pulsa Intro para saltar de lnea. Ve al men Insertar Imagen e inserta la imagen gato1.gif de la carpeta imagenes. Pulsa Intro para saltar de lnea. Escribe el texto ste es Golfo y es de Valencia. Accede al Inspector de propiedades CSS . Con el punto de insercin dentro de la capa, observa que en regla de destino aparece #gatosemana (si no, cmbialo). Pulsa el botn Editar regla . Las propiedades que debes cambiar son: la imagen de fondo eligiendo fondo_gatosemana.png de la carpeta imagenes, indicado que no haya repeticin y que quede centrada en la posicin-Y y en la posicin-X. Cambia el tamao del texto al 90%. Asgnale un padding de 5px y centra el contenido. Acepta los cambios. Crea otra regla para el selector compuesto #gatosemana p.cerrar . Edita sus propiedades, cambiando el margen a 15px a la derecha y arriba, y 0 al resto. Alinalo a la derecha. Guarda los cambios. Aplica la clase cerrar al primer prrafo de la capa. Haz clic sobre la esquina para seleccionar la capa. Cambia el tamao estirando los controles hasta que se vea correctamente. Muvela para situar la capa en la esquina de la celda. Apartado 5 Guarda la pgina y prubala en el navegador. Observa que si cambias el ancho de la ventana, la capa no se mueve con la celda. Vuelve a Dreamweaver. Selecciona el contenido de la celda, y ve al men Insertar, opcin Objetos de diseo, y luego opcin Etiqueta Div. Marca la opcin Ajustar alrededor de la seleccin y pulsa Aceptar. Dreamweaver no nos permite aadir directamente un estilo en lnea al div. Ve al cdigo fuente y cambia la
etiqueta <div> por <div style="position: relative">. Observa que la capa gatosemana ha cambiado su posicin. Vuelve a ponerla en la esquina. Apartado 5 Seleccionar hidden en Vis, del inspector de propiedades. Apartado 6 Hacer clic sobre el botn Guardar cmo se ve en el navegador. , y despus sobre el botn Cerrar . Comprueba
Volver a la teora
646

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. Apartado 2 Para abrir el documento index.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 enlace que contiene el texto Cerrar [x], 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 div "oferta", que es la nica capa del documento. Hacer clic sobre el botn Ocultar. Hacer clic sobre el botn Aceptar. Hacer clic sobre el comportamiento en el panel. Hacer clic sobre el botn , que aparece a la derecha del evento.
Seleccionar el evento onClick (aparecer seleccionado por defecto) Apartado 4 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. Apartado 2 Para abrir el documento gatos.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 la imagen del gato que se encuentra en la izquierda. Hacer clic sobre el botn del panel Comportamientos.
Elegir la opcin Mostrar-Ocultar elementos. En Elementos: seleccionar la capa div "gatosemana", que es la nica capa del documento.
Hacer clic sobre el botn Mostrar. Hacer clic sobre el botn Aceptar. Hacer sobre el comportamiento en el panel. Hacer clic sobre el botn , que aparece a la derecha del evento.
Seleccionar el evento onClick. Apartado 4 Abre el panel Elementos PA. En el panel, selecciona la capa gatosemana. La capa se har visible. Seleccionar la imagen que servir para cerrar la capa. Hacer clic sobre el botn del panel Comportamientos.
Elegir la opcin Mostrar-Ocultar elementos. En Elementos: seleccionar la capa "gatosemana". Hacer clic sobre el botn Ocultar. Hacer clic sobre el botn Aceptar. Hacer sobre el comportamiento en el panel. Hacer clic sobre el botn , que aparece a la derecha del evento.
Seleccionar el evento <A> onClick. Esto har que se cree un enlace, mostrando el cursor como una mano al pasar sobre la imagen. Apartado 5 Hacer clic sobre el botn Guardar , y despus sobre el botn Cerrar .
Volver a la teora
648

Ejercicio 1: Blog
Apartado 1. Si tienes problemas para crear y definir el nuevo sitio, sigue la ayuda del ejercicio propuesto de la unidad 3. Apartado 2. Ve al men Archivo Nuevo... En la ventana Nuevo documento, selecciona Plantilla en blanco , y en la lista de Tipo de plantilla selecciona Plantilla PHP. Pulsa Crear. Apartado 3. 1 Coloca el punto de insercin en la primera lnea, vamos a introducir el men aqu. Ms adelante lo ubicaremos donde corresponda. 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 Cambia el nombre del men de jumpMenu a menuBlog. 7 Pulsa Aceptar y el men se crear. 8 Guarda la pgina (de guardar como una plantilla), asignndole el nombre blog. El programa nos informara de que no existen regiones editables, cosa que aceptaremos. Puedes probarlo en el navegador pulsando la tecla F12. Dreamweaver nos invitar a configurar un servidor de pruebas para ver la pgina. De momento no lo haremos.
Si seleccionas un elemento y pulsas Ir, vers que lo nico que hace el navegador es aadir # al final de la barra de direcciones. Ms adelante completaremos esta funcionalidad.
649
Observa que hemos creado la plantilla blog.dwt.php. La utilizaremos ms adelante para todos los archivos de nuestro nuevo sitio.
Volver a la teora
650

Ejercicio 1: Crear una hoja de estilos
Apartado 2 1 Crea un nuevo archivo CSS desde Archivo Nuevo Pgina en blanco CSS. 2 Gurdalo (CTRL + S) y llmalo estiloblog.css.
Apartado 3 1 Abre la plantilla blog.dwt.php (en la carpeta Templates). Este archivo lo creamos en la unidad anterior. 2 En el panel Propiedades despliega el campo Clase y selecciona la opcin Adjuntar hoja de estilos.... 3 Busca el archivo estiloblog.css que acabamos de crear y selecciona la opcin Vincular y pulsa Aceptar.
Apartado 5 1 Coloca el cursor al principio de la pgina delante del formulario del men de salto. 2 Selecciona la opcin 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 region_contenido 8 Pulsa Aceptar.
Apartado 6
1 Selecciona el formulario del men por ejemplo haciendo clic sobre la etiqueta <form> en la barra de estado. Pulsa Ace 2 Selecciona la opcin 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 d delante de la etiqueta <form.. 2 Vuelve a la vista Diseo 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 de etiqueta </div> 2 Vuelve a la vista Diseo. 3 Pulsa Intro escribe los tres prrafos y asgnales los vnculos desde el inspector de propiedades. 4 Selecciona los tres prrafos convirtelos en una lista no ordenada (ul) desde el Inspector de propiedades HTML.
Apartado 9 1 Ve a la vista de Cdigo, y selecciona los divs contenido y seccin completos, etiquetas incluidas. 2 Vuelve a la vista Diseo. 3 Selecciona la opcin Insertar Objetos de diseo Etiqueta Div 4 Escribe contenedor en el cuadro Id: Al final te quedar un cdigo as: <body> <div id="contenedor"> <div id="contenido">  Colocar aqu el contenido para id "contenido"  </div> <div id="seccion"> <p>Categorías</p> <form name="form" id="form"> <select name="menuBlog" id="menuBlog"> <option value="#">Seccin 1</option> <option value="#">Seccin 3</option> <option value="#">Seccin 3</option> </select>
<input </form> <ul> <li><a <li><a <li><a </ul> </div> </div> </body>
type="button" name="go_button" id="go_button" value="Ir" onclick="MM_jumpMenu href="../index.php">Principal</a></li> href="../admin.php">Administración</a></li> href="../enlaces.php">Enlaces</a></li>
Guarda los cambios.
Ejercicio 2: Controles de Fuente.

1 Abre el archivo estiloblog.css. 2 Escribe el siguiente estilo para el body: body { font-family: Tahoma; font-size: 14px; letter-spacing: 1px; 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 o elemento de lista: p a, li a { text-decoration: none; color: black; }
653
6 Por ltimo, escribe el siguiente estilo para ocultar la vieta de los elementos de lista dentro de seccion: #seccion ul { list-style-type: none; }
Volver a la teora
654

Ejercicio 3: Controles de Fondo.
1 Abre el archivo estiloblog.css. 2 En la etiqueta body aade la siguiente lnea: body { font-family: Tahoma; font-size: 14px; letter-spacing: 1px; 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: p a, li a { text-decoration: none; color: black; } background-color: #CF6;
655
Ejercicio 4: Controles de Mrgenes y Bordes.

1 Abre el archivo estiloblog.css. 2 En la etiqueta body aade la siguiente lnea: body { font-family: Tahoma; font-size: 14px; letter-spacing: 1px; color: black; background: url(imagenes/fondo_body.gif) no-repeat; } margin: 0;
3 En el estilo para el elemento con id seccion aade estas lneas: #seccion { background: white url(imagenes/fondo_seccion.gif) no-repeat; border-right: 2px solid black; border-left: 2px solid black; border-bottom: 2px solid black; padding: 20px; padding-top: 90px;
4 Crea este estilo para los formularios dentro del bloque con id seccion: #seccion form { margin-bottom: 10px; } 5 Crea este estilo para el bloque con id contenido: #contenido { padding: 190px 300px 30px 30px; } 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: p a, li a { text-decoration: none; color: black; background-color: #CCFF66; padding-left: 2px; padding-right: 2px;
8 y 9 A la lista dentro de seccion, adele estas lneas: #seccion ul { list-style-type: none; padding: 0; margin: 35px 0 0;
10 Crea la clase y defnele el borde inferior: .borde_inferior { border-bottom: #000 1px solid; }
Ejercicio 5: Controles de Bloque.

1 Abre el archivo estiloblog.css. 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 { background: white url(imagenes/fondo_seccion.gif) no-repeat; border-right: 2px solid black; border-left: 2px solid black; border-bottom: 2px solid black;
padding: 20px; padding-top: 90px; } width: 136px;
Ejercicio 6: Controles de Posicin.

1 Abre el archivo estiloblog.css. 2 Aade estas lneas al estilo para el elemento con id seccion: #seccion { background: white url(imagenes/fondo_seccion.gif) no-repeat; border-right: 2px solid black; border-left: 2px solid black; border-bottom: 2px solid black; padding: 20px; padding-top: 90px; width: 136px; position: absolute; top: 166px; left: 533px;
Volver a la teora
658

Solucin al ejercicio 1
Partimos del archivo ejerciciomaquetacion.htm, abierto con Dreamweaver CS5. Tras examinar la maquetacin que queremos obtener, observamos elementos destacados: un elemento contenedor, que contiene toda la pgina, dndole un ancho fijo. Una cabecera con el ttulo y dos enlaces. Una columna izquierda , con el men. Otra columna principal , con el contenido de la pgina. Y por ltimo, un pie de pgina. Comenzamos creando esos elementos, y dndoles un id o clase: 1. Selecciona todo el texto de la pgina. 2. Ve al men Insertar y selecciona Objetos de diseo Etiqueta Div. 3. En el cuadro de dilogo, debe estar seleccionado Ajustar alrededor de la seleccin. Asgnale el Id container y pulsa Aceptar. 4. Selecciona los dos prrafos iniciales, y el encabezado. 5. Ve al men Insertar y selecciona Objetos de diseo Etiqueta Div. 6. En el cuadro de dilogo, debe estar seleccionado Ajustar alrededor de la seleccin. Asgnale el Id header y pulsa Aceptar. 7. Selecciona la lista con los enlaces del men. 8. Ve al men Insertar y selecciona Objetos de diseo Etiqueta Div. 9. En el cuadro de dilogo, debe estar seleccionado Ajustar alrededor de la seleccin. Asgnale el Id colizq y pulsa Aceptar. 10. Selecciona el texto del contenido de la pgina, desde el encabezado 2 (Ejercicios de maquetacin), excepto el ltimo prrafo. 11. Ve al men Insertar y selecciona Objetos de diseo Etiqueta Div. 12. En el cuadro de dilogo, debe estar seleccionado Ajustar alrededor de la seleccin. Asgnale el Id content y pulsa Aceptar. 13. Selecciona el ltimo prrafo. 14. Ve al men Insertar y selecciona Objetos de diseo Etiqueta Div. 15. En el cuadro de dilogo, debe estar seleccionado Ajustar alrededor de la seleccin. Asgnale el Id footer y pulsa Aceptar. Una vez con las capas creadas, es hora de darles los estilos correspondientes. Div #content 1.
2.
659
1. Crea una nueva regla de estilo para el id. Puedes hacerlo desde el panel Estilos CSS. 2. En las propiedades de Cuadro, para limitar la pgina a un ancho fijo, le asignamos un ancho (width) de 960px. 3. Para que quede centrado, dale un margen (margin) lateral auto, y superior e inferior 0. 4. Adems, para conseguir la apariencia que queremos dale un padding: 10px 20px, y un color de fondo #CF3B19. Div #header 1. En este caso, la cabecera no requiere de ningn estilo de maquetacin. Si observas vers que uno de los prrafos tiene asignada la clase link. Crea una regla CSS para que esta clase se muestre flotante a la derecha (float: right;). Div #colizq 1. Crea una nueva regla de estilo para el id. 2. Para que se muestre como una columna a la izquierda, desde las propiedades de Cuadro, dale un ancho fijo de 180px y ponlo flotante a la izquierda (width: 180px; float: left;). Div #content 1. Crea una nueva regla de estilo para el id. 2. Para que se muestre como una columna a la izquierda, desde las propiedades de Cuadro, dale un ancho fijo de 780px, que es el epsacioq ue nos queda, y ponlo flotante a la izquierda (width: 780px; float: left;). 3. Para completar el estilo, dale color de fondo blanco (#fff) y tamao de la fuente al 90%. 4. Queremos aplicarle tambin un padding. Pero ocurre que el padding forma parte del ancho. Por ello, si lo aadimos, tendremos que restarlo del ancho de 780px, o no nos cabr. Por eso, lo ms cmodo es crear un segundo div, y darle a l el padding. Envuelve todo el contenido del div #content en una nueva Etiqueta Div, y addgnale la clase padd y crea la regla de etsilo para que muestre un padding: 10px; Div #footer 1. Crea una nueva regla de estilo para el id. 2. Como estamos trabajando con columnas flotantes, haz que este div rompa ese flotamiento, con la propiedad clear: both; 3. Para compleatr el estilo, centra el texto (text-align: center;), dale un padding (padding: 10px 5px 5px;) y reduce un poco el tamao de la fuente (font-size: 80%;).
Volver a la teora
660

Ejercicio 1:
1. Si WAMP no se est ejecutando, lnzalo para realizar este ejercicio. 2. Si el servicio de MySQL no se est ejecutando, lnzalo para poder tener acceso a las bases de datos. 3. Haz clic izquierdo sobre el icono de WAMP en el rea de notificacin y selecciona la opcin phpMyAdmin. 4. Se abrir una ventana, 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 Compras en Nombre y 5 en Campos. 6. Pulsa el botn Continuar para seguir. 7. Rellena los datos de los campos de la tabla tal y como te pedamos en el ejercicio. 8. Haz clic en Grabar para guardar los cambios y la tabla ya estar lista para utilizarse. 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 ejercicios/libreria. 11. El archivo se encuentra codificado en latin1 as que seleccinalo en la lista de Juego de caracteres del archivo. 12. Pulsa el botn Continuar. 13. Asegrate de que se han introducido datos en la tabla pulsando la opcin Examinar de la tabla Compras.
Volver a la teora
661

Ejercicio 1:
Apartado 1. 1. Si WampServer no se est ejecutando, lnzalo para realizar este ejercicio. 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 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 introducido 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. Pulsa Reemplazar todo para cambiar todas las apariciones del nombre. Si se produce el error de cdigo, revisa el ejercicio en el que explicamos cmo corregirlo. 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 punto de insercin 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:
662
2. 3.
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.
Apartado 3. 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_usados.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. Deber quedarte algo como: {libros_usados.LastRecord} de {libros_usados.TotalRecords}
1.
663
Apartado 4. 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.
Apartado 5. 1. Selecciona el elemento {libros_usados.Titulo} dentro del listado de registros. 2. En el panel Propiedades escribe en el campo Vnculo lo siguiente: comprar.php?id=. 3. Ahora abre el panel Vinculaciones (CTRL + F10) y ve a la vista de Cdigo. 4. 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_usados['Id']; ?>"><?php echo strtoupper($row_libros_usados['Titulo']); ?></a> 5. Cierra el documento guardando los cambios.
Volver a la teora
664

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. 6. Pulsa Aceptar para cerrar el cuadro de dilogo. 7. Dreamweaver lanzar la herramienta Buscar y Reemplazar, pulsa Reemplazar todo. 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. 10. Pulsa Aceptar para terminar. Hemos creado un listado que no utiliza filtros, pero muestra los 8 primeros registros ms baratos. Apartado 2. 1. Selecciona el elemento {libros_mas_baratos.Titulo} del listado de registros. 2. En el panel Propiedades escribe en el campo Vnculo lo siguiente: comprar.php?id=. 3. Ahora abre el panel Vinculaciones (CTRL + F10) y ve a la vista de Cdigo. 4. 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_mas_baratos['Id']; ?>"><?php echo strtoupper($row_libros_mas_baratos['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 apuntar a la pgina comprar.php pasndole el cdigo del libro elegido. 5. Cierra el documento guardando los cambios.
665
Volver a la teora
666

Ejercicio 1:
Apartado 1 Abre el sitio Blog y sigue las instrucciones del enunciado para modificar el archivo admin.php.
Apartado 2. 1. Abre un nuevo archivo dinmico basado en la plantilla blog.dwt.php (Archivo Nuevo, pestaa Plantillas). 2. Dale el ttulo Blog aulaClic - Listado de entradas y 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 ttulos y fechas de las entradas. 4. Haz clic en el botn para crear un nuevo juego de registros.
5. En el cuadro de dilogo que se abrir rellena los datos de la siguiente forma: en Nombre escribe listado_entradas. 6. En Conexin selecciona blog_aulaclic. 7. En Tabla selecciona entradas. 8. En Ordenar selecciona Fecha y en el desplegable de al lado Descendente. 9. Haz clic en el botn Aceptar para crear el juego de registros. 10. Debajo del prrafo que hemos aadido inserta una tabla con 10 pxeles de relleno de celda. 11. La tabla deber tener 2 filas y 4 columnas, siendo la primera fila encabezado. 12. Aplica a las celdas de la primera fila el estilo borde_inferior. 13. Escribe en la primera celda de la primera fila Ttulo en negrita. 14. Escribe en la segunda celda de la primera fila Fecha en negrita. 15. Arrastra el elemento Titulo a la primera celda de la segunda fila. 16. Arrastra el elemento Fecha a la segunda celda de la segunda fila y ponlo en cursiva. 17. En la tercera celda de la segunda fila inserta la imagen imagenes/edit.png, con el atributo Alt Editar. 18. Debers enlazarla a modifica_entrada.php?id= 19. Arrastra el elemento Id del juego listado_entradas para que el enlace quede de este modo:
18. 19.
modifica_entrada.php?id=<?php echo $row_listado_entradas['Id']; ?> 20. En la cuarta celda de la segunda fila inserta la imagen imagenes/trash.png. 21. Debers enlazarla a elimina_entrada.php?id= 22. Arrastra el elemento Id para que el enlace quede de este modo: elimina_entrada.php?id=<?php echo $row_listado_entradas['Id']; ?>
Apartado 3. 1. Selecciona la segunda fila de la tabla y haz que se repita para que muestre 6 registros. Utiliza la opcin Repetir Regin, para el juego de registros listado_entradas. 2. Luego coloca el cursor al final del contenido editable, despus de la repeticin e introduce una barra de navegacin de registros , sobre el juego de registros listado_entradas.
Apartado 4. 1. Abre un nuevo archivo dinmico basado en la plantilla blog.dwt.php (Archivo Nuevo, Pgina de plantilla). 2. Dale el ttulo Blog aulaClic - listado de categoras, y 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
4. Crearemos un recordset para cargar los nombres e ids de categoras. Haz clic en el botn para crear un nuevo juego de registros.
5. En el cuadro de dilogo que se abrir rellena los datos de la siguiente forma: en Nombre escribe listado_categorias. 6. En Conexin selecciona blog_aulaclic. 7. En Tabla selecciona categorias. 8. En Ordenar selecciona Nombre y en el desplegable de al lado Ascendente. 9. Haz clic en el botn Aceptar para crear el juego de registros. 10. Debajo del prrafo que hemos aadido debers insertar una tabla con 10 pxeles de relleno de celda. 11. La tabla deber tener 2 filas y 3 columnas, siendo la primera un encabezado. 12. Selecciona las celdas de la primera fila y aplcales el estilo borde_inferior. 13. aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 14.
668
12. 13. Escribe en la primera celda de la primera fila Nombre
14. Arrastra el elemento Nombre del juego listado_categorias a la primera celda de la segunda fila. 15. En la segunda celda de la segunda fila inserta la imagen imagenes/edit.png. 16. Debers enlazarla a modifica_categoria.php?id= 17. Arrastra el elemento Id para que el enlace quede de este modo: modifica_categoria.php?id=<?php echo $row_listado_categorias['Id']; ?> 18. En la tercera celda de la segunda fila inserta la imagen imagenes/trash.png. 19. Debers enlazarla a elimina_categoria.php?id= 20. Arrastra el elemento Id para que el enlace quede de este modo: elimina_categoria.php?id=<?php echo $row_listado_categorias['Id']; ?>
Apartado 5. 1. Selecciona la segunda fila de la tabla y haz que se repita para que muestre 6 registros. Utiliza la opcin Repetir Regin, sobre el juego listado_categorias. 2. Luego coloca el cursor al final del contenido editable e introduce una barra de navegacin de registros , sobre el mismo juego. 3. Cierra el documento guardando los cambios.
Volver a la teora
669

Ejercicio 2:
Apartado 1. 1. Abre un nuevo archivo dinmico basado en la plantilla blog.dwt.php (Archivo Nuevo, Pgina de plantilla). 2. Dale el ttulo Blog aulaClic - Modificar entrada y gurdalo como modifica_entrada.php.
Crearemos un recordset para cargar la entrada que queremos modificar. 3. Haz clic en el botn para crear un nuevo juego de registros.
4. En el cuadro de dilogo que se abrir rellena los datos de la siguiente forma: en Nombre escribe detalle_entrada. 5. En Conexin selecciona blog_aulaclic. 6. En Tabla selecciona entradas. 7. En Filtrar selecciona lo siguiente: Id = Parmetro URL id. 8. Haz clic en el botn Aceptar para crear el juego de registros. 9. Ahora visualizaremos la entrada para asegurarnos de que es la que queremos borrar. 10. Escribe un prrafo de clase titulo que contenga el Ttulo de la entrada. 11. Arrstralo desde el panel Vnculos, desde el juego detalle_entrada. 12. Luego arrastra el elemento Texto bajo el Ttulo, este no deber estar incluido en un prrafo. 13. Finalmente inserta una regla horizontal (Insertar HTML Regla Horizontal). 14. Antes que nada necesitaremos crear un juego de registros para cargar las categoras en el desplegable. 15. Haz clic en el botn para crear un nuevo juego de registros.
16. En el cuadro de dilogo que se abrir rellena los datos de la siguiente forma: en Nombre escribe listado_categorias. 17. En Conexin selecciona blog_aulaclic. 18. En Tabla selecciona categorias. 19. En Ordenar selecciona Nombre Ascendente. 20. Haz clic en el botn Aceptar para crear el juego de registros.
21.
19. 20.
21. Pulsa el botn Asistente de formulario de actualizacin de registros
22. En el cuadro de dilogo que se abrir debers seleccionar la tabla a modificar entradas. 23. En Seleccionar registro de, elige detalle_entrada. 24. Cuando se termine la actualizacin deberemos volver a la pgina listado_entradas.php. 25. Haz que el campo Id sea oculto. 26. El campo Fecha debe enviarse como Fecha. 27. El campo Texto debe mostrarse como un rea de texto. 28. El campo Id_Categoria deber mostrarse como un Men. Pulsa el botn Propiedades de men. 29. En las propiedades del men, en Rellenar elementos de men elige De base de datos. 30. En juego de registros, elige listado_categorias. 31. En Obtener etiquetas de selecciona Nombre, y en Obtener valores de elige Id. 32. En Seleccionar valor igual a, pulsa sobre el botn de datos dinmicos y elige el Id_Categoria del juego detalle_entrada. 33. Pulsa Aceptar para cerrar el dilogo. 34. Pulsa Aceptar.
Apartado 2. 1. Abre un nuevo archivo dinmico basado en la plantilla blog.dwt.php (Archivo Nuevo, pestaa Plantillas). 2. Dale el nombre Blog aulaClic - Modificar categora y gurdalo como modifica_categoria.php. 3. En la nica regin editable escribe un prrafo que diga Modifica el nombre de la categora:, con la clase titulo. 4. Crearemos un recordset para cargar la categora que queremos modificar. Haz clic en el botn para crear un nuevo juego de registros.
5. En el cuadro de dilogo que se abrir rellena los datos de la siguiente forma: en Nombre escribe detalle_categoria. 6. En Conexin selecciona blog_aulaclic. 7. En Tabla selecciona categorias. 8. En Filtrar selecciona lo siguiente: Id = Parmetro URL id. 9. Haz clic en el botn Aceptar para crear el juego de registros.
10.
11.
9.
10. Pulsa el botn Asistente de formulario de actualizacin de registros
11. En el cuadro de dilogo que se abrir debers seleccionar la tabla a modificar categorias. 12. En Seleccionar registro de, elige detalle_categoria. 13. Cuando se termine la actualizacin deberemos volver a la pgina listado_categorias.php. 14. Haz que el campo Id sea oculto. 15. Pulsa Aceptar el cuadro de dilogo. 16. Guarda los cambios y cierra el documento.
Volver a la teora
672

Ejercicio 3:
Apartado 1. 1. Abre un nuevo archivo dinmico basado en la plantilla blog.dwt.php (Archivo Nuevo, pestaa Plantillas). 2. Dale el ttulo Blog aulaClic - Eliminar entrada y gurdalo como elimina_entrada.php. Crearemos un recordset para cargar la entrada que queremos eliminar. 3. Haz clic en el botn para crear un nuevo juego de registros.
4. En el cuadro de dilogo que se abrir rellena los datos de la siguiente forma: en Nombre escribe detalle_entrada. 5. En Conexin selecciona blog_aulaclic. 6. En Tabla selecciona entradas. 7. En Filtrar selecciona lo siguiente: Id = Parmetro URL id. 8. Haz clic en el botn Aceptar para crear el juego de registros. 9. En la nica regin editable escribe un prrafo de clase titulo que muestre el Ttulo de la entrada. Arrstralo desde el panel Vinculaciones. 10. Luego debers aadir el elemento Texto bajo el Titulo, pero sin embargo, este no debe estar en un prrafo. 11. Aade un nuevo prrafo a continuacin de clase datos que muestre el elemento Fecha. 12. Inserta una regla horizontal (Insertar HTML Regla horizontal). 13. Y finalmente escribe un ltimo prrafo que diga Si eliminas una entrada, sus comentarios tambin se eliminarn.
14. Crea un formulario (Insertar Formulario Formulario). 15. En l crea un campo oculto (Insertar Formulario Campo Oculto). 16. Crea tambin un botn (Insertar Formulario Botn). Cambia su valor a Borrar entrada. 17. En el panel Propiedades dale el nombre campoOculto al campo que acabamos de crear. 18. Pulsa sobre el icono de datos dinmicos (el del rayo) y haz que tome el valor del campo Id del juego detalle_entrada. 19. Selecciona el formulario. Cambia su mtodo de envo a GET, y su accin a la pgina actual. Estamos listos para insertar el comportamiento de Eliminar Registro. 20. aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 21.
673
20. Haz clic en el botn Eliminar Registro
en la barra Datos.
21. En Comprobar si hay una variable definida, elige Parmetro URL y escribe campoOculto. 22. Escoge la tabla Entradas. 23. En Valor de clave principal escribe Parmetro URL campoOculto. 24. En Despus de borrar ir a escribe listado_entradas.php. 25. Pulsa Aceptar para terminar. 26. Cierra el documento guardando los cambios. Apartado 2. 1. Abre un nuevo archivo dinmico basado en la plantilla blog.dwt.php (Archivo Nuevo, Pgina de plantilla). 2. Dale el ttulo Blog aulaClic - Eliminar categora y gurdalo como elimina_categoria.php. Crearemos un recordset para cargar la categora que queremos eliminar. 3. Haz clic en el botn para crear un nuevo juego de registros.
4. En el cuadro de dilogo que se abrir rellena los datos de la siguiente forma: en Nombre escribe detalle_categoria. 5. En Conexin selecciona blog_aulaclic. 6. En Tabla selecciona categorias. 7. En Filtrar selecciona lo siguiente: Id = Parmetro URL id. 8. Haz clic en el botn Aceptar para crear el juego de registros. 9. En la nica regin editable debers escribir un prrafo de clase titulo que diga Eliminar categora. 10. Luego inserta un nuevo prrafo en el que se pueda leer Vas a eliminar la categora: 11. Arrastra a continuacin el Nombre de la categora desde el panel Vinculaciones. Ponla en cursiva y negrita. 12. Inserta una regla horizontal (Insertar HTML Regla horizontal). 13. Y finalmente aade un ltimo prrafo que diga Si eliminas una categora, sus entradas y comentarios tambin se eliminarn.
14. Crea un formulario (Insertar Formulario Formulario). 15. En l crea un campo oculto (Insertar Formulario Campo Oculto). 16. Crea tambin un botn (Insertar Formulario Botn). Cambia su valor a Borrar categora. 17. En el panel Propiedades dale el nombre campoOculto al campo que acabamos de crear. 18.
16. 17.
18. Pulsa sobre el icono de datos dinmicos (el del rayo) y haz que tome el valor del campo Id del juego detalle_categoria. 19. Selecciona el formulario. Cambia su mtodo de envo a GET, y su accin a la pgina actual. Estamos listos para insertar el comportamiento de Eliminar Registro. 20. Haz clic en el botn Eliminar Registro en la barra Datos.
21. En Comprobar si hay una variable definida, elige Parmetro URL y escribe campoOculto. 22. En Valor de clave principal escribe Parmetro URL campoOculto. 23. En Despus de borrar ir a escribe listado_categorias.php. 24. Pulsa Aceptar para terminar. 25. Cierra el documento guardando los cambios.
Ejercicio 4:
Apartado 1. 1. Abre el documento elimina_categoria.php. 2. Selecciona la opcin Restringir acceso a pgina La pgina ahora estar protegida. 3. Cierra el documento guardando los cambios. Repite los pasos anteriores para todas las pginas que indica el enunciado. .
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. AL principio de la regin editable, crea un prrafo con la clase datos y sita el punto de insercin en l. 3. Selecciona la opcin Desconectar usuario .
4. En el cuadro de dilogo que se abrir selecciona la opcin Crear nuevo vnculo: "Desconectar". 5. En Al terminar, ir a escribe index.php. 6. Pulsa Aceptar. 7. Cierra el documento guardando los cambios. Repite los pasos anteriores para todas las pginas que indica el enunciado.
Volver a la teora
676

Ejercicio 1: Blog.
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 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:title (hijo del elemento item) a un nuevo prrafo. Hazlo desde la vista Diseo. 10. Pulsa el botn de la carpeta 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 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. del panel Insertar 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: <xsl:sort select="rss:title" />
20.
19.
20. 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:sort select="rss:title" /> <xsl:if test="dc:subject="office""> <p><a href="{rss:link}"><xsl:value-of select="rss:title"/></a></p> </xsl:if> </xsl:for-each> </blockquote> 21. 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:sort select="rss:title" /> <xsl:if test="dc:subject!="office""> <p><a href="{rss:link}"><xsl:value-of select="rss:title"/></a></p> </xsl:if> </xsl:for-each> </blockquote> 22. Abre un archivo dinmico nuevo basado en la plantilla blog.dwt.php (Archivo Nuevo, pestaa Plantillas). 23. Dale el nombre Blog aulaClic - enlaces recomendados y gurdalo como enlaces.php. 24. Coloca el cursor en la regin editable y pulsa el botn Transformacin XSL de la barra Datos.
25. En el cuadro de dilogo que se abrir selecciona el archivo enlaces_rss.xsl en Archivo XSLT. 26. Pulsa Aceptar. 27. Hemos terminado, pulsa la tecla F12 para ver una previsualizacin. 28. Cierra el documento guardando los cambios.
Volver a la teora
678

Ejercicio 1: Insertar contenido XML
Apartado 1. 1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2. Abre el archivo index.htm que encontrars en la carpeta spry de la carpeta de ejercicios. 3. Sita el punto de insercin bajo el encabezado de ndice de cursos. 4. Haz clic en Insertar Spry Conjunto de datos de Spry. 5. En Seleccionar tipo de datos selecciona XML en el desplegable. 6. 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. 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 Reemplazar seleccin para sustituir el prrafo con la etiqueta div que vamos a insertar. 12. Pulsa Listo para seguir. 13. Arrastra el elemento title desde el panel Vinculaciones al contendor que se ha creado. 14. Con el elemento title seleccionado ves al panel Propiedades y pulsa el botn 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 Repeticin de Spry para crear la repeticin que buscamos. Nota: Es importante que la repeticin est dentro de la regin, y no al revs. 18. Sin cambiar nada del nuevo cuadro de dilogo pulsa Aceptar. 19. Hemos terminado, pulsa la tecla F12 para ver una previsualizacin. en el campo Vnculo para
Repite todos estos pasos para el archivo articulos_aulaclic.xml y colcalos 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!
Volver a la teora
680

Ejercicio 1:
Apartado 1. 1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2. Abre el sitio libreria. 3. Abre el archivo catalogo.php. 4. Ve a la vista de Cdigo. 5. Localiza la tabla que muestra los registros. 6. Modifica la fila de los encabezados, aadiendo la ordenacin en el evento onclick, para que quede as:: <div spry:region="misLibros"> <table border="0" cellpadding="15" cellspacing="0"> <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> ... ... ... ... </table> </div>
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. var misLibros = new Spry.Data.XMLDataSet("libreria.xml", "biblioteca/libro"); 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 stas:
<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 estilolibreria.css, seleccionndolo de la parte superior de la ventana de Cdigo 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.
Volver a la teora
682

Ejercicio 1:
Apartado 1. 1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2. Abre el sitio animales. 3. Abre el archivo consultas.htm. 4. Selecciona el campo email. 5. Inserta un campo de texto de validacin desde Insertar Spry Campo de texto de validacin de Spry. 6. En el Inspector de Propiedades del control Spry selecciona Correo electrnico en el desplegable Tipo. 7. Marca la opcin onBlur. 8. Marca la opcin obligatorio.
Apartado 2. 1. Selecciona el campo animal. 2. Convirtelo en un campo desplegable de validacin desde Insertar Spry Seleccin de validacin de Spry. 3. En el panel Propiedades deselecciona la opcin Valor en blanco. 4. Marca la opcin Valor no vlido -1. 5. Marca la opcin Validar al onBlur. 6. Selecciona el control desplegable para modificar sus valores. 7. 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:
683
7.
Apartado 3. 1. Selecciona el campo consulta. 2. Convirtelo en un rea de texto de validacin desde Insertar Spry rea de texto de validacin de Spry. 3. Selecciona la opcin No hay etiqueta de rtulo en el siguiente cuadro de dilogo para que se cree slo el control y pulsa Aceptar. 4. En el panel Propiedades escribe 100 en el campo Car. mx. 5. Marca la opcin Validar al onBlur. 6. En el campo Sugerencia escribe Escribe aqu tu consulta.... 7. Selecciona el rea de texto, y borra el valor inicial que ya tenamos puesto.
Apartado 4. 1. Selecciona el campo nombre. 2. Convirtelo en un campo de texto de validacin desde Insertar Spry Campo de texto de validacin de Spry. 3. En el panel Propiedades asegrate de que la opcin obligatorio est marcada. 4. Marca la opcin Validar al onBlur.
Guarda los cambios y pulsa F12 para comprobar que funciona.
Volver a la teora
684

Ejercicio 1:
Apartado 1. 1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2. Abre el archivo index.htm que se encuentra en la carpeta spry. 3. Coloca el cursor antes de ndice de cursos y pulsa Enter. 4. Haz clic en Insertar Spry Acorden de Spry. 5. Haz clic en el encabezado de la Etiqueta 1, modifica el nombre para que se lea Cursos. 6. Haz clic en el encabezado de la Etiqueta 2, modifica el nombre para que se lea Artculos.
Ahora rellenaremos el contenido de las fichas.
7. Selecciona la etiqueta DIV spry:region completa, del listado de cursos desde la vista de Cdigo. 8. Pulsa Ctrl + X para cortarla. 9. Selecciona el texto Contenido 1 dentro del acorden, y pega ah (Ctrl + V) lo copiado. 10. Repite los pasos anteriores, con la spry:region que muestra los artculos, y pegndolos sobre el Contenido 2. 11. Guarda los cambios y prubalo en el navegador.
Volver a la teora
685
Pruebas evaluativas. Solucin

Estas son las soluciones a la 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 a) Abrir. b) Nuevo. c) Cerrar.
significa...
6. El icono a) Abrir. b) Nuevo. c) Cerrar.
significa...
686
7. El icono a) Abrir.
significa...
b) Nuevo. c) Cerrar. d) Propiedades.
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) Creamos un nuevo cdigo HTML dentro de nuestra pgina. d) Ninguna de las opciones anteriores.
9. La combinacin de teclas Ctrl + O sirve para... a) Crear un nuevo documento. b) Abrir un documento existente. c) Organizar nuestros archivos. d) Guardar los archivos modificados.
10. 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. d) Se crear una copia de seguridad de nuestros archivos.
Volver a la evaluacin sin resolver
Volver a la teora
687

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 pueden ser 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 el panel de Insertar... a) se puede cambiar las vistas del documento. b) los botones estn clasificados segn su categora. c) se configuran las propiedades del objeto seleccionado. respuesta
688
8. Se puede trabajar con el editor visual mediante las vistas... a) diseo. b) cdigo. c) vista en vivo. cualquiera de las anteriores.
9. El botn a) pasar a la vista cdigo.
sirve para...
b) pasar a la vista cdigo y diseo. c) pasar a la vista diseo. d) pasar a la vista cdigo en vivo.
10. La vista diseo... a) es la vista predeterminada en el entorno de trabajo clsico. b) es la que se suele utilizar habitualmente. c) las dos afirmaciones anteriores son verdaderas. d) las tres afirmaciones anteriores son falsas.
Volver a la teora
689

1. Es posible visualizar un sitio en el panel Archivos o en una ventana. a) Verdadero. b) Falso.
2. El botn
sirve para cambiar la vista del sitio.
3. El botn
sirve para ver los archivos del Sitio.
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.
690
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.
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 seguro se mostrarn de la misma forma en cualquier navegador. d) Ninguna de las opciones anteriores.
10. Los colores... a) Se representan con un nmero hexadecimal. b) Pueden personalizarse. c) Cualquiera de las dos primeras opciones. d) Ninguna de las opciones anteriores.
Volver a la teora
691

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.
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. Hay que limitar el uso de CSS, ya que muchos navegadores no lo reconocen. 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 Adobe.
692
8. Para qu sirve este otro botn a) Para crear una lista ordenada.
b) Para crear una lista no ordenada. c) Para aplicar sangra. d) Para crear prrafos.
9. Los estilos CSS... a) Son aplicables a prrafos. b) Son aplicables a palabras seleccionadas. c) Cualquiera de las dos primeras opciones. d) Ninguna de las opciones anteriores.
10. Las hojas de estilo... a) Slo pueden estar vinculadas a una pgina. b) Permiten aplicar un estilo sobre todas las etiquetas de un mismo tipo. c) Slo son recomendables para sitios con muchas pginas. d) Son incompatibles con los estilos en lnea o incrustados en la pgina.
Volver a la teora
693
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) Es posible evitar el borde azul alrededor de ella. c) En todos los navegadores aparece el borde azul alrededor de ella.
694
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.
Volver a la teora
695
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 a) Verdadero. b) Falso.
aparece cuando se inserta un BMP.
4. Dreamweaver tiene herramientas para cambiar el formado de una imagen. a) Verdadero. b) Falso.
5. Los rollovers son imgenes con extensin SWF, ya que se crean con Flash. a) Verdadero. b) Falso.
6. Una imagen pequea, de 50x50 px siempre ocupar menos en GIF que en JPG. 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.
696
8. La barra de navegacin ... a) ...ha de crearse a partir de botones Flash. b) ...no permite identificar cual de los vnculos est activo. c) Cualquiera de las dos primeras opciones. Ninguna de las opciones anteriores.
9. Los botones de la barra de navegacin... a) Pueden aparecer de forma vertical. b) Pueden aparecer de forma horizontal. c) Cualquiera de las dos primeras opciones. d) Ninguna de las opciones anteriores.
10. Podmeos crear una barra de navegacin con CSS. a) S, y la podemos insertar directamente desde Deamweaver. b) S, pero debemos de definir manualmente las propiedades CSS. c) S, aunque el resultado no suele ser bueno, ya que es poco personalizable. d) No, porque CSS no permite que cambien las imgenes al pulsarlas.
Volver a la teora
697
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 tablas con gran volumen de contenido. a) Verdadero b) Falso
7. El botn
sirve para...
a) ...Insertar una columna. b) ...Dividir celdas. c) ...Combinar celdas.
698
8. A la hora de combinar celdas... a) Slo es posible combinar celdas contiguas. b) La combinacin da como resultado otra celda. c) Cualquiera de las dos anteriores opciones.
9. A la hora de insertar filas... a) ...pueden insertarse debajo de la seleccin. b) ...pueden insertarse a la derecha de la seleccin. c) Cualquiera de las dos primeras opciones. d) Ninguna de las opciones anteriores.
10. Las columnas de una tabla... a) No pueden eliminarse. b) Estn formadas por celdas. c) Cualquiera de las dos primeras opciones. d) Ninguna de las opciones anteriores.
Volver a la teora
699
Unidad 8. Marcos
1. Los marcos o frames estn desaconsejados para pginas nuevas. 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 .
700
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. d) Ninguna de las opciones anteriores.
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. c) Cualquiera de las dos primeras opciones. d) Ninguna de las opciones anteriores.
Volver a la teora
701
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 PHP. 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, y facilitar su uso. 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.
702
8. Si existen varios botones de opcin en un mismo formulario con el mismo nombre... a) Se llamarn casillas de verificacin. b) Slo puede haber uno activado. c) Cada uno ser de un color diferente. d) Se producir un error.
9. Un botn... a) ...puede tener asignada la accin "Enviar formulario". b) ...puede tener asignada la accin "Restablecer formulario". c) Cualquiera de las dos primeras opciones. d) Ninguna de las opciones anteriores.
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. c) Cualquiera de las dos primeras opciones. d) Ninguna de las opciones anteriores.
Volver a la teora
703

1. Los navegadores ms antiguos no reconocen la etiqueta <video>. a) Verdadero. b) Falso.
2. El botn
est en la pestaa de Formulario, en el panel de Insertar.
3. La opcin Bucle indica que al finalizar la pelcula, sta volver a comenzar desde el principio. a) Verdadero. b) Falso.
4. El atributo "controls" hace que el navegador controle automticamente el tamao de la ventana del vdeo. 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.
704
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. El parmetro autostart="false" ... a) ...hace que el archivo de vdeo no se reproduzca automticamente. b) ...hace que el archivo de audio no se reproduzca automticamente. c) Cualquiera de las dos primeras opciones. d) Ninguna de las opciones anteriores.
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. c) Cualquiera de las dos primeras opciones. d) Ninguna de las opciones anteriores.
Volver a la teora
705

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.
7. El botn
sirve para...
a) ...abrir todas las plantillas en Dreamweaver. b) ...elegir una imagen de fondo para la plantilla. c) ...crear una nueva plantilla.
706
8. El botn
sirve para...
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. c) Cualquiera de las dos primeras opciones. d) Ninguna de las opciones anteriores.
10. Al modificar 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. c) Cualquiera de las dos primeras opciones. d) Ninguna de las opciones anteriores.
Volver a la teora
707

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. c) Cualquiera de las dos primeras opciones. d) Ninguna de las opciones anteriores.
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. c) Cualquiera de las dos primeras opciones. d) Ninguna de las opciones anteriores.
10. La herramienta autocompletar etiquetas aparece al introducir la etiqueta y dejar un espacio en blanco. a) Verdadero. b) Falso.
Volver a la teora
709

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. c) Cualquiera de las dos opciones anteriores.
710
8. De las reglas horizontales es posible... a) ...modificar su altura. b) ...indicar si aparecern sombreadas o no. c) Cualquiera de las dos primeras opciones. d) Ninguna de las opciones anteriores.
9. Para usar una fuente web ... a) ... la primera vez debemos aadirla y luego buscar su ubicacin cada vez. b) ... la primera vez debemos aadirla dando su ubicacin en el disco duro y luego aparecer en el desplegable Fuentes. c) ... la primera vez debemos aadirla dando su ubicacin web y luego aparecer en el desplegable Fuentes.
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 Insertar Cdigo fuente.
Volver a la teora
711
Unidad 14. Capas

1. Las capas pueden situarse 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.
5. El atributo ndice Z significa... a) El orden en el que han sido insertadas las capas. b) El nmero de orden de colocacin de las capas. 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. 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.
712
8. En el panel Elementos PA... a) ...puede establecerse la visibilidad de la capa. b) ...puede establecerse el ndice Z de la capa. c) Cualquiera de las dos primeras opciones. Ninguna de las opciones anteriores.
9. Una capa... a) ...no puede contener animaciones Flash. b) ...solapar a aquellas capas cuyo ndice Z sea mayor que el suyo. c) Cualquiera de las dos primeras opciones. d) Ninguna de las opciones anteriores.
10. El ID de capa es el nombre de la capa. a) Verdadero. b) Falso.
Volver a la teora
713

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.
5. Slo podemos aplicar comportamientos a capas. a) Verdadero. b) Falso.
6. Los comportamientos son distintos para cada navegador y slo funcionarn en el que indiquemos. a) Verdadero. b) Falso.
7. El evento onMouseOver significa... a) ...al hacer clic. b) ...mostrar capa. c) ...cuando el ratn est sobre.
714
8. El evento onclick significa... a) ...al hacer clic. 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. c) Cualquiera de las dos primeras opciones. d) Ninguna de las opciones anteriores.
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. c) Cualquiera de las dos primeras opciones. d) Ninguna de las opciones anteriores.
Volver a la teora
715

1. Es aconsejable asociar el comportamiento de mostrar mensajes emergentes cuando se produzca el evento... . a) onLoad. b) onClick.
2. Al mostar un mensaje emergente la pgina quedar boqueada hasta que el usuario pulse el botn Aceptar de la ventana emergente a) Verdadero. b) Falso.
3. Cargar imgenes previamente puede hacer que el texto de la pgina aparezca ms tarde. a) Verdadero. b) Falso.
4. Cargar imgenes previamente a la carga completa del documento es muy til, y debemos de hacerlo salvo excepciones muy concretas. 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.
716
8. Los navegadores Internet Explorer y Mozilla Firefox no siempre muestran la informacin contenida en las pginas web de forma idntica. Por lo tanto, habr que crear un comportamiento distinto para cada navegador. 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.
Volver a la teora
717

1. El selector p.rojo corresponde a ... a) Un prrafo que tiene como clase rojo. b) Cualquier prrafo con texto rojo. c) Cualquier elemento con la clase rojo. d) Un prrafo con el ID rojo.
2. El selector #contenedor corresponde a... a) Cualquier elemento que tenga como clase contenedor. b) Un nico elemento con el id contenedor. c) Slo etiquetas div con el id contenedor. d) Slo etiquetas div con la clase 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 asteriscos de esta forma: a(href=*_blank*).
5. El orden de la propiedad border es: a) border: width style color; b) border: color width style; c) Funciona de ambas formas.
6. Podemos cambiar las vietas de una lista por imgenes utilizando la propiedad... a) list-image. b) list-style-image.
718
7. La diferencia entre la propiedad margin y padding es: a) Margin mide la distancia del borde con el exterior. b) Padding mide la distancia del borde con el interior. c) Ambas respuestas son correctas
8. Para dejar de aplicar un elemento flotante sobre algo deberemos utilizar la propiedad... a) clear. b) break.
9. Los valores relative y absolute de la propiedad position se diferencian en: a) Relative establece la 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.
Volver a la teora
719

1. A qu nos referimos como maquetacin web? a) A la organizacin y distribucin de elementos en nuestra pgina. b) A crear una pgina de prueba o borrador, que hacemos antes de ponernos con el diseo definitivo. c) A crear el estilo de la pgina, colores, imgenes, etc.
2. Podemos cambiar el tamao de una divisin? a) Slo el ancho, con la propiedad width. El alto depende del contenido. b) Podemos fijar el alto y ancho. c) Podemos cambiar el tamao de cualquier lado, indicando el lado y el nuevo tamao. d) Slo lo podemos cambiar si le hemos aplicado posicionamiento.
3. En qu se diferencia un tamao expresado en em de otro expresado en %? a) Son lo mismo, ambos son relativos al tamao de la fuente del documento. b) En que em es relativo a la fuente del documento, y % es relativo al tamao del elemento que lo contiene. c) En que em es relativo a la fuente del documento, y % es relativo al tamao original del elemento. d) En que em es una unidad fija, y % es relativo al tamao de la ventana del navegador.
4. El desbordamiento slo se puede producir si hemos cambiado el tamao de un elemento. a) Verdadero. b) Falso.
5. Utilizando el posicionamiento relativo... a) Podemos desplazar un elemento 5px a la derecha de su posicin original. b) Podemos hacer que un elemento sea ms ancho que el elemento que lo contiene. c) Podemos utilizarlo para no cambiar un elemento, pero que sus elementos hijos se posicionen a partir de l. d) Todas las respuestas son ciertas.
720
6. El posicionamiento absoluto... a) Hace que el elemento al que se lo aplicamos siempre est por encima del resto. b) Nos permite indicar la posicin exacta de un elemento en la pgina. c) Nos permite colocar un elemento en un punto exacto, y que se ve ah aunque desplacemos la pgina.
7. Al aplicar posicionamiento flotante a un elemento hacemos que... a) Que siempre est por encima del resto, tapando a otros elementos. b) Que se desplace al final de la pgina, la primer hueco que encuentre. c) Que se desplace todo lo que pueda a la derecha o la izquierda, segn lo hayamos puesto. d) Que no pueda ser contenido por otro elemento.
8. Si queremos que un men quede en la parte izquierda de la pgina, y se muestre a la misma altura aunque hagamos scroll vertical, usaremos... a) Posicionamiento flotante. b) Posicionamiento absoluto. c) Posicionamiento fijo. d) Cualquiera de los anteriores.
9. Si queremos que una imagen se muestre a la derecha del texto, teniendo varias lneas de texto a la misma altura que la imagen, usaremos... a) Posicionamiento flotante. b) Posicionamiento absoluto. c) Posicionamiento fijo. d) Cualquiera de los anteriores.
10. El diseo de cuadrcula fluida de Dreamweaver permite ... a) ... variar los estilos en funcin del ancho de la ventana. b) ... variar los estilos y cambiar la estructura en funcin del ancho de la ventana. c) ... variar los estilos, cambiar la estructura y redimensionamiento automtico de las imgenes en funcin del ancho de la ventana.
Volver a la teora
721

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) Direccin FTP. b) Directorio raz.
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.
722
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. c) Las respuestas anteriores son correctas. d) Las respuestas anteriores son falsas.
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.
Volver a la teora
723

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) <?php y ?>. c) <?asp y ?> d) < php y /php?>
4. El paquete WampServer 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 WampServer. 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.
724
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.
Volver a la teora
725

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.
5. Si en el cuadro de dilogo Juego de Registros queremos crear un filtro respecto a una variable enviada desde un formulario seleccionaremos la opcin... a) Valor introducido. b) Parmetro URL. c) Ninguna de las anteriores.
6. No es posible aplicar cualquier estilo CSS sobre un texto dinmico. a) Verdadero. b) Falso.
726
7. La barra de navegacin de juego de registros a) Filtrado y paginacin. b) Paginacin y recuento. c) Ocultacin de regiones y paginacin.
combina las opciones de...
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.
Volver a la teora
727

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.
728
8. Para poder utilizar la opcin Conectar usuario 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) Verdadero. b) Falso.
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.
Volver a la teora
729

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 Vista en vivo. 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.
730
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.
Volver a la teora
731

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.
5. Es posible eliminar las filas repetidas de un archivo XML en la insercin de 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.
Volver a la teora
733

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.
734
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.
Volver a la teora
735

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.
736
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.
Volver a la teora
737

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 secciones 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. Un panel que se contrae de Spry puede mostrarse desplegado al cargarse la pgina. 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 ningn caso. d) Ninguna de las anteriores.
10. Cuando creamos un control Spry, en la carpeta SpryAssets cuntos archivos se crean? a) Tres. b) Dos.
Volver a la teora
739

Cur Sode Dreamweaver Cs 6

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

Cur Sode Dreamweaver Cs 6

Uploaded by

Copyright:

Available Formats

aulaClic. Curso de Curso Dreamweaver CS6.

Unidad 1. Conceptos bsicos de Dreamweaver CS6

Unidad 2. El entorno de Dreamweaver CS5

aulaClic S.L. Todos los derechos reservados. www.aulaclic.es

Unidad 3. Configurar un sitio local

Unidad 4. El texto: propiedades y formato

aulaClic S.L. Todos los derechos reservados. www.aulaclic.es

Unidad 10. Multimedia

Unidad 11. Las plantillas

aulaClic S.L. Todos los derechos reservados. www.aulaclic.es

Unidad 12. HTML desde Dreamweaver

Unidad 13. Otros elementos

Unidad 14. Capas

Unidad 15. Comportamientos

Unidad 16. Comportamientos avanzados

aulaClic S.L. Todos los derechos reservados. www.aulaclic.es

Unidad 17. Estilos CSS Avanzados

Unidad 18. Diseo de pgina. Maquetacin web

Unidad 19. Sitios remotos

aulaClic S.L. Todos los derechos reservados. www.aulaclic.es

Unidad 20. Servidor de Pruebas

Unidad 21. Pginas dinmicas

Unidad 22. Cmo crear un Blog

aulaClic S.L. Todos los derechos reservados. www.aulaclic.es

Unidad 23. XML y RSS

Unidad 24. Acceso a datos con Spry

Unidad 25. AJAX y Spry Framework

aulaClic S.L. Todos los derechos reservados. www.aulaclic.es

Unidad 26. Spry y Formularios

Unidad 27. Controles Spry Avanzados

Ejercicios paso a paso

aulaClic S.L. Todos los derechos reservados. www.aulaclic.es

Cmo utilizar este curso

Estructura del curso

Nivel bsico Nivel medio Nivel avanzado

aulaClic S.L. Todos los derechos reservados. www.aulaclic.es

Unidad 1. Conceptos bsicos de Dreamweaver CS6

1.2. Novedades de Dreamweaver CS6

aulaClic S.L. Todos los derechos reservados. www.aulaclic.es

aulaClic S.L. Todos los derechos reservados. www.aulaclic.es

1.3. Editar pginas web

1.4. Cmo tener una pgina en Internet

aulaClic S.L. Todos los derechos reservados. www.aulaclic.es

1.5. Arrancar y cerrar Dreamweaver CS5

Desde el botn Inicio

Desde el icono de Dreamweaver CS6 del Escritorio, si lo tienes

1.6. Abrir y guardar documentos

1.7. Mi primera pgina

aulaClic S.L. Todos los derechos reservados. www.aulaclic.es

aulaClic S.L. Todos los derechos reservados. www.aulaclic.es

aulaClic S.L. Todos los derechos reservados. www.aulaclic.es

aulaClic S.L. Todos los derechos reservados. www.aulaclic.es

aulaClic S.L. Todos los derechos reservados. www.aulaclic.es

Prueba evaluativa de la Unidad 1

aulaClic S.L. Todos los derechos reservados. www.aulaclic.es

2. El entorno de Dreamweaver CS6

Unidad 2. El entorno de Dreamweaver CS5

2.1. La pantalla inicial

aulaClic S.L. Todos los derechos reservados. www.aulaclic.es

2. El entorno de Dreamweaver CS6

2.2. Las barras

2. El entorno de Dreamweaver CS6

La barra de herramientas estndar.

2. El entorno de Dreamweaver CS6