Академический Документы
Профессиональный Документы
Культура Документы
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 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
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
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.
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.
13
1. Conceptos bsicos.
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. Conceptos bsicos.
1. Conceptos bsicos.
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. Conceptos bsicos.
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.
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.
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
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 17
1. Conceptos bsicos.
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
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 18
1. Conceptos bsicos.
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 .
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
1. Conceptos bsicos.
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
1. Conceptos bsicos.
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
1. Conceptos bsicos.
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
1. Conceptos bsicos.
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
1. Conceptos bsicos.
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.
24
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.
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
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 26
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 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.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 27
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.
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
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 28
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.
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
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 35
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.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 36
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.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
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
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.
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
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 44
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.
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
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 46
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
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 .
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,
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 49
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.
50
4. El texto:propiedades.
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:
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 51
4. El texto:propiedades.
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
4. El texto:propiedades.
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
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es
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
4. El texto:propiedades.
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. El texto:propiedades.
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. El texto:propiedades.
4. El texto:propiedades.
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
4. El texto:propiedades.
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...
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 58
4. El texto:propiedades.
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.
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
4. El texto:propiedades.
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
4. El texto:propiedades.
Tambin se puede cambiar el nombre del estilo, es mejor que el estilo tenga un nombre que indique a qu tipo de texto se va a aplicar. Para ello 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.
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.
61
4. El texto:propiedades.
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. El texto:propiedades.
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:
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
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 63
4. El texto:propiedades.
Para practicar lo que acabamos de ver, puedes seguir el Ejercicio paso a paso Exportar y vincular hojas de estilo.
64
5. Hiperenlaces.
Unidad 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:
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.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 65
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.
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.
_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.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 68
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.
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
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 69
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.
5. Hiperenlaces.
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 .
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.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 72
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. .
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.
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. 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.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 75
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.
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.
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 .
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.
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.
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.
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
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 82
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.
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. 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.
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.
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)
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
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 88
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.
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.
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. 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
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 92
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.
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.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
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. 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
Unidad 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.
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
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 100
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
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
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.
10. Multimedia
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
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 104
10. Multimedia
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
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 105
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.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 106
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.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 107
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
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 110
10. Multimedia
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.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.
112
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
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.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 114
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.
115
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
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
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.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.
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 Á É Í Ó Ú Ü Ñ
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
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 120
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 .
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.
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.
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
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.
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.
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
130
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
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
<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.
133
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).
134
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> <!--
135
14. Capas
14.1. Introduccin
Las capas no son ms que unos recuadros, elementos de bloque, destinados a contener y agrupar otros elementos, igual que los prrafos son elementos de bloque destinados a contener texto. sta es una capa con borde verde Las capas, tambin llamadas layers o divisiones, se crean con la etiqueta <div></div>. Al ser elementos contenedores, son muy tiles para organizar nuestros elementos. Si esto lo combinamos con el posicionamiento absoluto, una propiedad CSS que nos permite colocar los elementos donde queramos en nuestra pgina, obtenemos los elementos ideales para maquetar nuestra pgina, es decir, distribuir el contenido en bloques.
En la imagen de arriba vemos varias capas azules distribuidas sobre una capa gris. Si estrechas o agrandas la ventana del navegador, vers que pueden llegar a solaparse. Cuando convertimos una capa en un elemento con posicin absoluta (elemento PA), se muestra as en Dreamweaver:
Las capas pueden moverse de una posicin a otra de la ventana pulsando sobre el recuadro blanco, y sin soltar el ratn, arrastrndola hacia la nueva posicin. Tambin pueden ser redimensionadas pulsando sobre los recuadros negros, y arrastrndolos hasta
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 136
14. Capas
conseguir el tamao deseado. Dentro del recuadro de la capa es posible insertar texto, tablas, imgenes, animaciones flash, y todos los elementos que puede contener un documento HTML. Este icono sirve para seleccionar la capa al pulsar sobre l, y al eliminarlo se elimina tambin la capa.
Las capas, combinadas con JavaScript pueden dotar a una pgina de verdadero dinamismo.
Una vez se ha insertado la capa, pueden editarse sus atributos, pero para ello hay que seleccionarla primero. Una capa puede seleccionarse de varias maneras. Una de ellas es pulsando sobre el icono correspondiente, pero esto no resulta til cuando existen muchas capas en un mismo documento, ya que todas las capas tienen asociada una imagen igual a sta, y no es fcil seleccionar la deseada a la primera. Cuando existen varias capas en un mismo documento, es preferible seleccionarlas a travs de la pestaa Elementos PA del panel CSS, que puede abrirse a travs del men Ventana opcin Elementos PA. Tambin puedes abrir el panel pulsando F2.
137
14. Capas
En dicho panel aparecen los nombres de todas las capas que existen en el documento actual, y para seleccionar una de ellas simplemente hay que pulsar sobre el nombre en el panel.
Elemento CSS-P es el nombre o ID de la capa. Desde aqu podemos asignarle otro ID, pero si lo hacemos perder las propiedades que hayamos indicado para este elemento. Si lo que queremos es cambiar el ID por otro ms descriptivo, podemos hacer clic derecho sobre el borde de la capa y elegir ID... en el men contextual. Tambin puede ser cambiado a travs del panel Elementos PA, haciendo doble clic sobre l. El resto de campos se refieren a las propiedades CSS que definen la posicin y tamao de la capa. Izq y Sup indican la distancia en pxeles (tambin podemos introducir un valor en porcentaje) que hay entre los lmites izquierdo y superior del documento y los lados superior e izquierdo de la capa respectivamente. Por defecto se toman los lados del documento, a no ser que creemos una Capa PA dentro de otra capa posicionada. En este caso, la distancia se referir a los lados de la capa padre, independientemente de su posicin en el documento. Si queremos que la posicin se tome con respecto al elemento padre, pero este no tiene posicionamiento absoluto, podemos darle un posicionamiento relativo empleando CSS (En las propiedades de Posicin del editor CSS, estableciendo position como relative). Esto no afectar a la posicin del elemento padre si no cambiamos las propiedades left, top, right o bottom. Truco: Si queremos centrar una capa con respecto al elemento que la contiene podemos hacerlo empleando CSS. Para ello, en Izq. ponemos 50%. Para que el lado izquierdo cuente a partir del centro, le damos un margen izquierdo negativo que sea la mitad del ancho de la capa. En la imagen anterior, como el ancho es 200px, aadiramos por CSS margin-left: -100px;. An y Al indican la anchura y la altura ndice Z es el nmero de orden de colocacin de las capas. Este valor tambin puede cambiarse a travs
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 138
14. Capas
del panel Elementos PA. Una capa ser solapada por aquellas capas cuyo ndice Z sea mayor que el suyo. Vis indica la visibilidad inicial de la capa. La visibilidad puede ser de cuatro tipos: Default (visibilidad segn el navegador), Inherit (se muestra la capa mientras la pgina a la que pertenece tambin se est mostrando), Visible (muestra la capa, aunque la pgina no se est viendo) y Hidden (la capa est oculta). La visibilidad tambin puede cambiarse a travs del panel Elementos PA, pulsando sobre la imagen del ojo. El ojo abierto indica Visible, y el ojo cerrado indica Hidden. A travs de Im. fondo y Col puede indicarse una imagen o un color de fondo para la capa. Desb. (Desbordamiento). Hasta ahora, los elementos que veamos se ajustaban a su contenido. En el caso de las Capas PA podemos indicar un ancho y alto, por lo que puede que el contenido no quepa dentro de la capa. Con esta propiedad controlamos cmo aparecen las capas en un navegador cuando el contenido excede el tamao especificado de la capa. Visible indica que el contenido adicional se muestra, excediendo los lmites de la capa. Hidden (oculto) especifica que el contenido adicional no se mostrar en el navegador. Scroll (desplazamiento) especifica que el navegador deber aadir barras de desplazamiento a la capa tanto si se necesitan como si no. Auto (automtico) hace que el navegador muestre barras de desplazamiento para la capa cuando sean necesarias (es decir, cuando el contenido de la capa supere sus lmites).
visible. El texto en esta capa no cabe al tener un tamao fijo, por lo que desborda.
hidden. El texto en esta capa no cabe al tener un tamao fijo, por lo que desborda.
auto. El texto en esta capa no cabe al tener un tamao fijo, por lo que desborda.
Para practicar puedes realizar el Ejercicio paso a paso Insertar una capa. Todo lo que hemos definido de la capa, aparece como propiedades CSS en la cabecera de la pgina, utilizando como selector el ID o nombre de la capa. Por eso, si queremos emplear una capa en la misma posicin en distintas pginas, podemos exportar ese estilo a una hoja de estilos, y en cada pgina crear una capa y darle el mismo ID. Recuerda que el ID ha de ser nico en la pgina, pero puede repetirse en pginas distintas. Podemos editar estas propiedades con el editor CSS en la categora Posicin. Ah vers, por ejemplo, que podemos indicar la distancia con el lado derecho (right) en vez del izquierdo como hacamos hasta ahora. O la distancia con el lado inferior (bottom). Aunque podemos hacerlo de varias formas, lo recomendable es indicar
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 139
14. Capas
la distancia con uno de los lados y el ancho, y la distancia con el lado superior o inferior y el alto.
140
15. Comportamientos
15.1. Introduccin
Los comportamientos son acciones que suceden cuando los usuarios realizan algn evento sobre un objeto , como puede ser mover el ratn sobre una imagen, pulsar sobre un texto, hacer doble clic sobre un mapa de imagen, etc. Los comportamientos no existen como cdigo HTML, se programan en JavaScript. Dreamweaver permite insertarlos a travs del panel Comportamientos, por lo que no es necesario escribir ninguna lnea de cdigo JavaScript para programarlos. Por ejemplo, una imagen puede tener asociaso un comportamiento que al situar el puntero sobre ella se muestre u oculte una capa. Otros comportamientos que ya has visto son los que se aplican sobre las imgenes de sustitucin y las barras de navegacin, que ya estn predefinidos, por lo que no es necesario introducir este conjunto de comportamientos a travs del panel Comportamientos. Para validar formularios ya viste algunas caractersticas del panel Comportamientos. Vamos a recordar las que necesitamos para poder insertar comportamientos ms tarde. El panel Comportamientos se puede abrir a travs del men Ventana, opcin Comportamientos. Tambin pulsando Mays+F4.
En este panel hay que desplegar el botn pulsando sobre l, y en Mostrar eventos elegir HTML 4.1. Es la opcin por defecto. Esta opcin se debe a que en el pasado, los comportamientos solan ser diferentes dependiendo del navegador. En la actualidad, los navegadores tienden a seguir el estndar, lo que hace que ya no tengamos problemas de compatibilidad. Slo habremos de cambiarlo si hacemos pginas especficas para navegadores ms viejos, ya en desuso.
141
15. Comportamientos
Despus de elegir alguna accin, el comportamiento correspondiente Comportamientos. En este caso se han insertado dos comportamientos. Como puedes ver, cada comportamiento tiene asociados un evento y una accin.
aparece
en
el
panel
Las acciones son las que se han elegido en la lista anterior y el evento indica cundo se debe de realizar la accin.
142
15. Comportamientos
Para eliminar un comportamiento, hay que seleccionarlo en el panel Comportamientos y pulsar sobre el botn . Tambin es posible cambiar el orden de los comportamientos aplicados a un objeto, seleccionndolos y ordenndolos mediante los botones .
Tras elegir la accin, se mostrar un cuadro de dilogo en el que aparecen listados todos los elementos de la pgina que podemos ocultar o mostrar:
Hay que especificar qu elementos han de mostrarse u ocultarse para el evento. Para ello hay que pulsar
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 143
15. Comportamientos
dos veces sobre la accin, en el panel Comportamientos. Entonces aparece una nueva ventana, con la lista de todas las capas que hay en la pgina, en la que puede indicarse la variacin que se va a producir sobre la visibilidad Puede indicarse si se van a Mostrar, si se van a Ocultar, o si van a adquirir la visibilidad inicial (Predeterminada). Para determinar la visibilidad de cada una de las capas es necesario seleccionarlas una por una, indicando su visibilidad a travs de los botones inferiores de la ventana.
No es necesario aplicar una visibilidad diferente a todas las capas de la pgina, solamente a las que se desea que cambien al producirse el evento. Por ejemplo, en este caso a la capa gatomes no se le ha aplicado ninguna visibilidad diferente, ya que no se desea que vare al producirse el evento. Si se desea eliminar una visibilidad establecida para alguna de las capas, simplemente hay que volver a pulsar sobre el botn correspondiente a la visibilidad que ya tiene aplicada. Por ejemplo, para eliminar la visibilidad aplicada a la capa gatosemana habra que volver a pulsar sobre el botn Mostrar. Hay que tener en cuenta en este caso que lo que se desea es que al situar el puntero sobre la imagen, se muestre la capa, y que cuando el puntero deje de estar sobre la imagen, la capa se vuelva a ocultar. Para ello es necesario insertar dos comportamientos con la accin Mostrar-Ocultar elementos. Uno de ellos mostrar la capa para el evento onMouseOver (cuando el ratn est sobre), mientras que el otro la ocultar para el evento onMouseOut (cuando el ratn est fuera).
Una vez insertado el comportamiento, en el panel Comportamientos hay que establecer el evento onclick
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 144
15. Comportamientos
(al hacer clic) para que la llamada a JavaScript se produzca al pulsar una vez sobre el objeto.
Pulsando dos veces sobre la accin vuelve a abrirse la ventana anterior, y es posible modificar la lnea de cdigo.
Segn nuestras necesidades elegiremos un evento u otro. Puedes ver una descripcin de cada evento en este avanzado: .
145
Este comportamiento es til para poder enviar mensajes al usuario. Ten en cuenta que no debers abusar de ellos, pues a la larga pueden resultar un poco incmodos, utilzalos con un objetivo concreto y no porque quieras atraer la atencin del usuario. Mientras se muestre el mensaje, la ventana del navegador quedar bloqueada. Para crear un mensaje emergente debers seleccionar el elemento al cual ir asociado el mensaje, en el ejemplo es un enlace de texto. Una vez seleccionado ves al panel Comportamientos (Mayus + F4) pulsa el botn opcin Mensaje emergente. Se abrir el siguiente cuadro de dilogo: y selecciona la
Aqu debers introducir el Mensaje que quieras que se muestre. Pulsa Aceptar cuando hayas acabado y estar listo.
146
Es aconsejable que asocies este comportamiento al evento onClick (cuando el usuario hace clic). Es ms intuitivo para el usuario que si, por ejemplo, asocias el mensaje a un evento onMouseOver (cuando se pase el ratn por encima) el usuario no sabr muy bien porque se ha generado el mensaje de aviso. Y resultara muy molesto tener que ir "esquivando" los enlaces por si aparecen mensajes emergentes. En realidad no habr hecho ningn movimiento voluntario para recibir ese tipo de respuesta. Debido a esto (el estimulo-respuesta que espera el usuario), el evento onClick es el ms indicado para este caso.
Este mtodo se diferencia del tradicional en que si no establecemos este comportamiento, la pgina se carga (slo texto) y se visualiza antes de que las imgenes estn cargadas por completo, aunque respetando su hueco. Ten en cuenta que sta es la opcin ms aconsejada en la mayora de los casos. Una vez terminada esta carga, el navegador empieza la descarga de las imgenes. Por lo que hay unos momentos en los que la pgina no se muestra tal y como fue concebida, e incluso su estructura puede verse afectada si no se introdujeron los valores de altura y anchura de las imgenes contenidas (el texto se dispondra sin tenerlas en cuenta hasta que se descargasen).
Para evitar esto utilizaremos la Carga Previa de Imgenes. Para ello deberemos abrir el panel Comportamientos (Mayus + F4) y hacer clic sobre el botn selecciona, entonces, la opcin Carga previa de imgenes. Se abrir el siguiente cuadro de dilogo: ,
147
Aqu debers incluir las imgenes que quieras que se carguen utilizando los botones su ubicacin pulsando el botn Examinar.
, podrs indicar
Qu imgenes debemos de cargar? Aquellas que son imprescindibles en el diseo de la pgina o pueden producir efectos no deseados. Por ejemplo, imaginemos que tenemos un enlace como una imagen de fondo. Y mediante estilo CSS hemos hecho que cuando el cursor est encima esa imagen cambie. Hemos de entender que las imgenes se cargan cuando se necesitan. Por tanto, la imagen de fondo no se cargar hasta que no pasemos el cursor sobre el enlace la primera vez. Esto puede provocar que durante un instante, al poner el cursor la imagen desaparezca pero la de sustitucin an no se haya cargado. En este caso, es conveniente precargar esa imagen. La imagen de sustitucin que ya explicamos incluye la carga previa de imgenes. Por su puesto, resulta contraproducente cargar imgenes que no vayamos a emplear. Si cargas previamente imgenes muy pesadas, o demasiadas como para que el navegador se detenga durante unos segundos mientras realiza la carga, es posible que el usuario al ver que tu pgina tarda demasiado en cargarse la abandone.
body de la pgina haremos clic en una rea vaca del documento. Luego abre el panel Comportamientos (Mayus + F4) y pulsa el botn para desplegar la lista.
Selecciona la opcin Abrir ventana del navegador y vers el siguiente cuadro de dilogo:
Veamos las opciones que podemos seleccionar aqu. En Mostrar URL: escribiremos la URL de la pgina que queremos abrir. En los cuadros de texto de Ancho de la ventana: y Alto de la ventana: podremos especificar su tamao en pxeles. El cuadro Nombre de la ventana: te permitir darle un nombre a la nueva ventana. As, ms tarde, utilizando JavaScript, podramos referenciarnos a ella utilizando este nombre. En Atributos: marca las casillas para que los elementos como la barra de estado o la barra de mens aparezcan en la nueva ventana. Si dejas todos desmarcados, la ventana se abrir sin ningn elemento y aparecer nicamente rodeada de un marco de pgina.
149
Lo primero es identificar al elemento. Seleccionamos un Tipo de elemento del desplegable. En ID de elemento se cargaran todos los IDs del tipo seleccionado. Seleccionamos el que nos interese. A continuacin, seleccionamos una propiedad del desplegable Seleccionar o la escribimos en el campo Introducir. E indicamos el valor que tomar en el campo Nuevo valor:. La pega de este sistema es que nos permite cambiar slo una propiedad.
Recuerda que comentamos la existencia de pseudoclases CSS. Empleando el selector selector:hover, podemos definir un estilo completo que se mostrar cuando el elemento tenga el cursor encima. Veremos esto en la siguiente unidad.
150
Este comportamiento nos dar la posibilidad de comprobar si el navegador tiene instalados los plug-ins (o aadidos) necesarios para que pueda ver archivos de tipo Flash, Quicktime, Shockwave, RealPlayer, etc... Para ello deberemos seleccionar el tipo de plug-in que requerimos para que nuestra pgina se visualice correctamente, en el caso de que no se encuentre en el desplegable Seleccionar: deberemos escribir su nombre en el cuadro de texto Introducir: (aunque esto ocurrir en contadas ocasiones).
Rellena los campos de URL siguientes. El primero indicar la ruta de la pgina que quieres que se muestre si el plug-in existe en el navegador del usuario. Djalo en blanco si quieres que se quede en la pgina en la que est. Y en el campo De lo contrario, ir a URL: escribe la ruta a la que debe redirigirse el navegador en caso de que no tuviese el plug-in instalado. Aqu tienes dos opciones, o bien redirigir al usuario a la pgina donde descargarse el plug-in para poder visualizar la tuya correctamente, o redirigirlo a una pgina que hayas creado para aquellos que no cumplan los requisitos mnimos del sitio.
Este comportamiento tambin deber ir asociado al evento onLoad del body para que pueda ejecutarse en la carga de la pgina.
se comportamiento est cayendo en desuso, ya que los navegadores actuales detectan automticamente los plugins faltantes y nos ofrecen la posibilidad de instalarlos.
Aunque este comportamiento se encuentra en el listado del panel Comportamientos vamos a aprender a insertarlo desde otro lugar ya que te ser ms fcil.
Un men de salto no es ms que un men desplegable desde el que puedes saltar de una pgina a otra con slo seleccionar la opcin correspondiente en el men. Encima de este apartado tienes un ejemplo (no es funcional pero puedes desplegarlo para hacerte una idea) que ilustra el aspecto que tendra este tipo de mens.
Insertarlo es muy sencillo, slo tienes que hacer clic en Insertar, seleccionar la opcin Formulario y en el desplegable elegir Men de salto. Se abrir este cuadro de dilogo:
Para crear el men debers introducir los elementos (opciones) que lo forman. Para ello escribe en Texto el ttulo de la pgina y en Al seleccionarse, ir a URL la ruta de la pgina que se tiene que abrir si el usuario selecciona esta opcin del men. Una vez rellenados estos campos, haz clic en el botn .
Luego repite el proceso tantas veces como elementos en el men quieras insertar. Cuando hayas acabado decide en qu ventana quieres abrir los enlaces en Abrir URL en: y dale un nombre al men (para reconocerlo mejor ms tarde) en Nombre del men.
152
Luego puedes marcar la opcin Seleccionar primer elemento tras el cambio de URL para que cuando se abra la ventana el elemento del men que se muestre sea el primero. Djalo desmarcado si quieres que se muestre el de la pgina que se est visualizando. Luego marca la opcin Insertar botn Ir tras el men para que se aada un botn al formulario.
Si escoges esta opcin vers que se crea un men como el que tienes justo sobre este prrafo. El funcionamiento de este men de salto es muy parecido al anterior, slo que una vez seleccionada la pgina que mostrar hay que pulsar el botn para que se efecte el salto.
16.7. Transiciones
Aunque las transiciones no son comportamientos las hemos incluimos en este tema porque tienen cierto parecido. Las transiciones permiten pasar propiedades CSS de un estado inicial a otro estado final de forma continua. Por ejemplo, si partimos de una imagen de un ancho de 540 px. y pasamos a un ancho de 320 px. al aplicarle una transicin el cambio no ser instantneo, sino de forma gradual durante un tiempo que podemos especificar, por ejemplo un segundo. De forma que al realizar esta transicin parecer que el elemento se mueve. Con transiciones se pueden lograr vistosos efectos de animaciones. Por ejemplo, al hacer clic sobre una imagen y mantener el botn apretado un tiempo, la imagen se hace ms pequea. Al soltar el botn vuelve a su tamao inicial. En la transicin hemos definido que el ancho y el alto de la imagen disminuyan gradualmente. En navegadores antiguos (Intenet Explorer ) no funcionan las transiciones.
Para manejar las transiciones vamos al men Ventana Transiciones CSS y se abrir una ventana similar a esta.
153
Para crear una transicin nueva pulsaremos el botn +, en caso de querer modificar una pulsamos el botn editar y aparecer un cuadro de dilogo similar al siguiente.
Para crear una transicin tenemos que definir dos cosas fundamentales, sobre qu elemento la aplicamos y qu propiedad vamos a usar. En el caso representado en la figura, el elemento es un encabezado con un identificador llamado #h2_transicin y las propiedades el font-size y el color. El elemento sobre el que se aplican las transiciones se define en Regla de destino y puede ser genrico, por ejemplo <h2>, o especfico, una regla o clase. En el primer caso la transicin se aplicara a todos los encabezados <h2> mientras que en el segundo caso slo a los encabezados con un ID asignado previamente, en el caso que se muestra en la imagen #h2_transicin. La propiedad sobre la que se realiza la transicin se especifica en el cuadro Propiedad, al pulsar en el botn + se abre un desplegable con las propiedades susceptibles de ser animadas. En este caso hemos animado dos propiedades, font-size y color. Hay combinaciones que no tienen sentido, por ejemplo si en Regla de destino hemos indicado una imagen, no es lgico asignarle la propiedad font-size , aunque Dreamweaver no realiza validaciones, la transicin no hara nada.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 154
A la derecha de la Propiedad aparece el campo para especificar el Valor final , segn el tipo de propiedad ser el tipo de dato, por ejemplo, si la propiedad es Color, aparecer un desplegable para elegirlo, si la propiedad es Background-image aparecer un icono para seleccionar el archivo de imagen. La transicin ir desde el valor inicial definido en la hoja de estilo hasta el valor final que pongamos aqu. Por ejemplo, en nuestro caso el color inicial ser el marrn, definido para las etiquetas <h2> y el color final el verde #090. Transicin con, en este desplegable aparece una lista con las situaciones en las que se arrancar la transicin. Los ms usados son Hover (cuando el cursor est encima) y Active ( al hacer clic), tambin Cheked, Focus, Enable, ... Los tres campos siguientes indican cmo se realiza la transicin en cuanto a la Duracin, el tiempo en arrancar o Demora y la Funcin de temporizacin que indica si el efecto es lineal o ms rapido al inicio, o al final. Si en Duracin ponemos un cero no habr transicin gradual, ser brusca. Estos tres campos pueden ser iguales para todas las propiedades o diferentes para cada propiedad segn elijamos el desplegable Usar la misma transicin para todas las propiedades o no. Puedes consultar los valores concretos para cada propiedad en la web del WC3. En el video Transiciones tienes explicado cmo realizar una transicin ms compleja que hace aparecer un texto sobre una imagen.
155
<style type="text/css"> <!-body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; text-align: center; background: url('imagenes/fondo.gif') repeat-x bottom; } //-> </style>
Este mtodo se emplea para incrustar el cdigo directamente en la pgina. Los estilos son declarados en la cabecera (<head>...</head>), entre las etiquetas <style type="text/css"> y </style>.
La base del CSS es lograr un estilo homogneo y fcil de modificar para todo nuestro sitio. Por lo tanto, no tiene sentido incrustar el mismo estilo en cada pgina. En nuestros sitios de ejemplo, hemos optado por
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 156
exportar los estilo a una hojas de estilos (un archivo de extensin .css). Esta opcin nos resultaba mucho mejor, ya que nos permite centralizar el estilo en un slo archivo que aplicaremos a todas las pginas. Si acabamos de comenzar con nuestro sitio, podemos crear nuestra hoja directamente. En este caso deberemos crear un archivo CSS (Archivo Nuevo y seleccionando CSS). En l escribiremos las reglas de estilo del con la misma sintaxis que hemos visto ms arriba pero eliminado el componente HTML. Este sera el contenido de nuestra hoja definiendo el mismo estilo que arriba: @charset "iso-8859-1"; /* CSS Document */ body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; text-align: center; background: url('imagenes/fondo.gif') repeat-x bottom; }
Las dos primeras lneas generadas por Dreamweaver no son imprescindibles. Este cdigo est guardado en un archivo con extensin .css (por ejemplo, miestilo.css). Luego deberamos vincularlo en la pgina HTML utilizando la etiqueta <link /> dentro del <head> de la pgina: <link href="ruta/miestilo.css" rel="stylesheet" type="text/css" />
Otra opcin que nos permita el Inspector de propiedades CSS era crear un Estilo en lnea. Este estilo slo afectaba al elemento en cuestin, ya que lo que realmente estamos haciendo es definir las propiedades CSS empleando el atributo style del elemento: <p style="color: red; font-size: 30px;">Este texto est en rojo y con un tamao de 30 pxeles</p> El estilo en lnea es el ms desaconsejado porque es ms difcil de modificar al tener que buscarlo por el texto y modificndolo uno a uno. Una pgina puede contener todos estos tipos de estilos CSS, o incluso tener varias hojas de estilo asociadas. Entonces cundo empleamos cada uno? Emplearemos hojas de estilos para todos los estilos comunes a las pginas del sitio. Emplearemos estilos incrustados en la pgina para los estilos que se emplean en nicamente en esa pgina, y que ya no seran tiles si borrsemos la pgina. Por ejemplo, para definir el la apariencia de una tabla en concreto. Emplearemos estilos en lnea cuando el estilo solo tenga sentido por estar en esa posicin en concreto, y no se suela repetir en el sitio. Por ejemplo, si queremos dar ms margen a un prrafo por tener una imagen en concreto, pero que no tendra sentido si cambisemos la imagen.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 157
La organizacin de los estilos debes decidirla t. Pero recuerda que cuanto menos cdigo repitas en tus pginas, ms fcil ser luego de modificar o exportar. Para practicar realiza el Ejercicio Paso a Paso de Creacin de una Hoja de Estilo.
Esto es lo que podramos llamar una regla CSS. Podemos escribir tantas reglas CSS como queramos, siempre una despus de otra. Entre llaves se encierra la definicin del estilo, que viene dada por una lista de propiedades y sus valores separados por puntos y comas.
Los selectores son aquellos sobre los que se aplica la definicin del estilo CSS. Recordars que al crear una nueva regla, Dreamweaver nos permita elegir entre cuatro tipos de selectores: Etiqueta HTML Clase Identidad Compuesto Cualquier etiqueta HTML es un selector (eliminando los < y >). Por lo que cualquier elemento de una pgina puede ser modificado genricamente para que tome un mismo aspecto, por ejemplo: p {font: 13px bold Arial;} Hace que todos los prrafos (la etiqueta p) tendrn la fuente de un tamao de 13 pxeles, estar en negrita
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 158
y ser del tipo Arial. Hay que tener en cuenta que las etiquetas tiene un estilo por defecto, dependiendo del navegador. Por eso vemos los prrafos con margen, los enlaces subrayados o los encabezados de mayor tamao. Haciendo esto reescribimos las propiedades de esa etiqueta.
Una clase es un selector que afectar slo a aquellas etiquetas que nosotros decidamos, por ejemplo: .rojo {color: red;} Hemos creado una clase, que hace que los elementos a los que se la asignemos muestren el texto de color rojo. Como puedes ver, la clase se define porque tiene un punto delante. Ahora podramos aplicar este estilo sobre cualquier etiqueta que queramos. No hay ms que emplear el atributo class para indicar la clase asignada. <p class="rojo">ste es un texto en rojo.</p> <div class="rojo"> <p>Este texto tambin es rojo.</p> <p>Y tambin ste.</p> </div> En este ejemplo estaramos creando un prrafo y todo su texto sera rojo. En el caso del bloque, todo el texto que contenga ser rojo, a no ser que los prrafos tengan definido otro color en la hoja de estilo. Los selectores de clase deben estar siempre escritos con caracteres alfanumricos y sin utilizar espacios (utiliza el subrayado _ para separar palabras). Para evitar errores, recomendamos tambin escribirlos siempre en minsculas.
Por ltimo encontraramos los selectores de identidad. Estos selectores identifican al elemento por su ID. Por lo tanto, slo afectarn a un elemento en concreto de la pgina, por lo que son muy empleados para definir el estilo de las capas PA. #contenedor {width: 600px;} Observa que este tipo de selector va precedido por una almohadilla (#). Ms tarde en el cdigo podremos encontrar: <div id="contenedor">Este es un bloque que contiene texto</div> En el cdigo deber establecerse la regla CSS asocindosela al atributo ID. Este atributo (id) recoge el nombre del elemento que se ha creado con la etiqueta HTML.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 159
A partir de ese momento se podra referenciar a ese cuadro de texto como contenedor utilizando JavaScript.
Descendencia: Podemos obligar que un estilo slo se aplique sobre un elemento que est dentro de otro. Por ejemplo: #contenido { color: #0000FF; background-color: #FFC; } .resaltado { background-color: #FFC; } Esto har que tanto el elemento #contenido como los elementos con la clase .resaltado tengan el mismo color de fondo. Pero qu ocurre si queremos resaltar algo dentro de #contenido? Como no se ver tenemos que crear otra clase? No es necesario, podemos indicar propiedades distintas que afecten a la clase .resaltado slo cuando se encuentre dentro del elemento #contenido. Lo hacemos escribiendo lo selectores en orden jerrquico y separados por espacios: #contenido .resaltado { background-color: #06F; } Ahora los textos marcados con la clase .resaltado en los dentro de #contenido se vern con otro color de fondo.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 160
Al escribir dos selectores seguidos obligamos a que el segundo tenga que estar dentro del anterior. Puedes utilizar todas las anidaciones que quieras y mezclar los selectores, por ejemplo: #contenedor p .derecha { float: right; } En este caso todas las etiquetas con la clase derecha que se encuentren dentro de un prrafo dentro del elemento definido como contenedor flotarn a la derecha.
Un atributo es una parte de la descripcin de un selector HTML. Por ejemplo, en: <a href="http://www.aulaclic.es" target="_blank">Enlace</a> a es el selector de la etiqueta, mientras que href y target son atributos.
CSS permite entrar en el contenido de las etiquetas para cambiar sus estilos. Veamos cmo hacerlo: Nombre de Atributo: Podemos establecer estilos para etiquetas con determinados atributos definidos, por ejemplo: a[href] { font-family: Arial, Helvetica; } En esta lnea estamos estableciendo que cualquier etiqueta a que tenga el atributo href cambie su tipo de letra a Arial o Helvtica.
Valor de Atributo : Podemos aplicar estilos a etiquetas que tengan determinado valor en un atributo, por ejemplo: a[target="_blank"] { font-weight: bold; } Esta lnea har que se convierta en negrita cualquier enlace que abra una nueva ventana al hacer clic, distinguindolos de los enlaces que navegan por el sitio. Interesante, verdad?
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 161
Primero veremos 4 tipos diferentes de pseudo-clases, que habamos ido comentando alguna vez. Son: :link, :visited, :hover y :active. Incluyendo estas pseudo-clases en nuestros estilos CSS podremos modificar el modo en el que se visualizarn lo elementos, aunque donde ms usadas son es en los enlaces. Veamos el siguiente ejemplo: a:link { color: red; } a:visited { color: blue; } a:hover { color: green; } a:active { color: yellow; } Esto har que los enlaces se muestren de color rojo (red) en nuestra pgina. Es el estado link. Por lo tanto, esta propiedad slo tiene sentido en enlaces. Cuando ya hayan sido visitados por el usuario se quedarn de color azul (blue). Es el estado visited. Este estado se renovar dependiendo del navegador utilizado y se mostrar durante un tiempo determinado (una sesin, etc...). Esta propiedad slo tiene sentido en enlaces. En el momento en que coloques el ratn sobre l se mostrar de color verde (green). Es el estado hover. Podemos aplicarlo a la mayora de elementos. Y finalmente en el momento que se haga clic sobre l, y mientras tenga el foco se ver de color amarillo (yellow). Es el estado active. Puede resultarnos tiles en campos de formulario, para destacar el campo que se est editando.
Puedes aplicar estas pseudo-clases de cualquier forma de las anteriores. #menu a:hover { text-decoration: none; } a.volver:hover { background-image: url(flecha_atras.png); } #menu:hover a { text-decoration: underline; } La primera regla afectar a los enlaces que estn dentro del elemento #menu cuando tengan el cursor encima. La segunda regla, afectar a los enlaces con la clase volver cuando tengan el cursor encima. El orden es muy importante. En el tercer ejemplo, a cambiar el orden, la regla afecta a todos los enlaces a la vez cuando el elemento #menu tenga el cursor encima.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 162
Luego tenemos dos pseudo-elementos que actuarn sobre el texto del documento, son: :first-letter y :first-line (primera letra y primera lnea respectivamente). p:first-letter { font-size: 26px; } p:first-line { font-variant: small-caps; } Puedes ver un ejemplo de cmo actuaran estos pseudo-elementos en la siguiente lnea, que al tener un ancho fijo, se muestra en varias:
Para practicar los pseudo-elementos y clases realiza el Ejercicio Paso a Paso de Pseudo-elementos y clases.
final de una propiedad. Esto hace que tenga preferencia sobre el resto. Por ejemplo, en este ejemplo: p { color: blue !important; color: red; }
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es
163
El prrafo debera de ser de color rojo, porque el valor rojo "machaca" al azul. Sin embargo, al poner !important, hace que el texto sea rojo. Adems, los elementos hijos heredan las propiedades. As, si definimos el color rojo para el texto de una capa, todos los elementos de la capa mostrarn el texto en color rojo, a no ser que tengan otro estilo definido. Por todo esto, a veces podemos no saber dnde hemos definido la propiedad que hace que un elemento se vea de tal o cual forma. En cualquier momento podemos ver qu propiedades afectan al estilo y dnde estn definidas desde el panel Estilos CSS.
font-family: indica la familia de fuente en la que se mostrar el texto, puede tomar los valores serif, sans-serif, cursive, fantasy y monospace:
164
p { font-family: Arial, Helvetica, sans-serif; } Si el nombre de la fuente contiene espacios, lo pondremos entre comillas dobles (p. ej. "Times New Roman")
font-style: indica el estilo de la fuente (bsicamente, nos permite ponerla en cursiva), puede tomar los valores italic, oblique y normal.
font-variant: establece la variante de la fuente. Puede tomar el valor small-caps (versales). Esto muestra las minsculas como maysculas de menor tamao. El valor normal har que se muestre el estado por defecto de la fuente.
SMALL-CAPS, Normal
Observa que Dreamweaver no muestra correctamente este estilo.
font-weight: indica el peso de la fuente, es decir, nos sirve para ponerla en negrita. Los valores ms utilizados son: bolder, bold y lighter. Tambin puedes utilizar valores del 100 al 900, siendo el primero la fuente ms ligera y el ltimo el ms pesado.
font-size : establece el tamao de la fuente. Puedes utilizar los valores predefinidos smaller, larger, xxsmall, x-small, small, medium, large, x-large y xx-large. Los dos primeros valores establecen el tamao de la fuente en comparacin a la definida en el elemento padre donde se encuentra, as se mostrar ms pequea (smaller) o ms grande (larger).
xx-small, x-small,
small, medium,
large, x-large,
xx-large
165
Tambin es posible establecer el tamao del texto utilizando porcentajes (%) o em. Que tambin mostrar el texto en relacin a su elemento padre (100% = 1em). ste es el tipo ms recomendado. Ya que con slo cambiar el tamao de la fuente base, todos los elementos se ajustarn a sta manteniendo la proporcin. Existen otras unidades relativas puntos (pt), pxeles (px)... El sistema de puntos (pt) vara un poco segn los sistemas operativos, mientras que el valor en pxeles (px) depende de la resolucin de pantalla. Incluso podemos emplear valores concretos, como centmetros (cm). a { font-size: 12em; } p { font-size: 14px; } .nota { font-size: 0.90%; }
Es posible definir todos estos estilos que hemos visto en una sola definicin. Para ello utilizaremos slo la propiedad font:. As, una retahla de reglas como sta: p {
font-style: italic; font-variant: small-caps; font-weight: bold; font-size: large; font-family: monospace;
Puede escribirse como: p { font: italic small-caps bold large monospace; } Recuerda que el orden debe ser siempre el mismo: style, variant, weight, size y family. Si no vas a utilizar una de las definiciones puedes omitirla como en este ejemplo: p { font: bold sans-serif; }
Este texto tiene una separacin de 18 pxeles entre sus palabras. Este, sin embargo, tiene una separacin de -5 pxeles. Tambin podemos utilizar la propiedad letter-spacing para establecer la separacin entre los caracteres del texto: Est e t e x t o l e t r a s. ti e ne una se p a r a c i n de 5 p x e l e s e ntre su s
vertical-align establece la alineacin vertical del texto. Puede tomar los valores baseline, sub, super, top, text-top, middle, bottom, text-bottom.
Observa como los valores sub, super, text-bottom y text-top toman como referencia el tamao del texto, mientras que top, middle y bottom toman como referencia el alto del prrafo completo. Estas propiedades se suelen aplicar a las imgenes para alinearlas con respecto al texto:
line-height indica el alto de lnea del texto, igual que el resto de propiedades puedes establecer esta altura en pxeles, ems, puntos u otras unidades. Este texto tiene un alto de lnea de 30 pxeles. Puedes ver que la separacin entres estas lneas es mayor que la definida por defecto. Este texto tiene un alto de lnea de 10 pxeles. Puedes ver que la separacin entres estas lneas es menor que la definida por defecto.
167
Si estableces simplemente valores numricos podrs indicar el alto respecto a su tamao normal. Por ejemplo: p { line-height: 2; }
Esta lnea muestra el texto con un interlineado doble. Si hubisemos escrito 1.5 el interlineado sera un 50% ms alto de lo normal. Esta propiedad siempre la tenemos que asignar al elemento de bloque que contiene el texto. Truco: Si tienes un elemento de alto especfico, puedes centrar el texto verticalmente dndole al elemento un line-height igual que el alto. Esto slo tiene sentido si tenemos una nica lnea de texto.
text-align establece la alineacin horizontal del texto. Sus valores ya te deben ser familiares: left, right, center y justify. Este texto est alineado a la izquierda con left. Este texto est alineado a la derecha con right. Este texto est alineado al centro con center.
Esta propiedad la aplicaremos al elemento de bloque que contendr el texto. text-indent indica el tamao de sangrado (o sangra) del texto, es decir la separacin de la primera lnea con el borde lado izquierdo. Tomar valores en puntos, pxeles o ems, como prefieras. Prrafo identado 24px. Primera lnea Segunda lnea. Prrafo identado 48px. Primera lnea Segunda lnea. Prrafo identado 72px. Primera lnea Segunda lnea. Esta propiedad la aplicaremos al elemento de bloque que contendr el texto.
white-space, esta propiedad es muy til para evitar que el ancho del navegador modifique el ancho de las lneas del texto. Puede tomar el valor nowrap para que el texto se muestre en una sola lnea sin insertar saltos no deseados. Tambin puedes establecer esta propiedad al valor pre. En este caso todos los espacios insertados en el
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 168
texto se mostrarn y no se convertirn en uno slo como ocurre normalmente. Adems, si en el cdigo hay saltos de lnea, tambin se mostrarn: En este texto podemos introducir tantos espacios como queramos.
Este ltimo valor no funciona correctamente en Internet Explorer as que es recomendable utilizar la entidad HTML (&nsbp;) para mostrar ms de un espacio.
Con la propiedad text-transform puedes indicar la transformacin del texto (cambiar maysculas / minsculas) de la siguiente forma. Capitalize cambia la primera letra de cada palabra a maysculas. Uppercase y lowercase cambian el texto a maysculas o minsculas respectivamente.
Este Texto Tiene El Valor Capitalize, Las Primeras Letras Sern En Maysculas, El Resto Se Mostrar En Minsculas Automticamente ESTE TEXTO TIENE EL VALOR UPPERCASE, AUNQUE EST ESCRITO EN MINSCULAS SE CAMBIAR A MAYSCULAS este texto tiene el valor lowercase, aunque est escrito en maysculas se cambiar a minsculas
Por ltimo veremos la propiedad color que establece el color del texto. Esta propiedad puede tomar un valor hexadecimal (como vimos en el apartado de colores del tema 3). De modo que simplemente hara falta especificar el color de este modo: p { color: #060; } Unos ejemplos seran los siguientes (aunque disponemos de ms de 16 millones):
169
#060 #900
#0F0 #990
#039 #F93
#3C9 #969
#6CF #CF3
#0CC #CF9
Tambin existe la posibilidad de utilizar unas palabras reservadas para nombrar unos cuantos colores bsicos. El modo en el que se definira el estilo sera el mismo: p { color: red; } Aunque en este caso en vez de introducir su equivalente hexadecimal, referenciaramos directamente su nombre. Puedes encontrar el listado de los nombres de color que puedes utilizar en el sitio de la W3C.
El modo en el que se utiliza es igual que el resto, pero empleando la propiedad cursor: p { cursor: pointer; } Y puede tomar los valores auto, crosshair, pointer, move, n-resize, ne-resize, e-resize, se-resize, swresize, w-resize, nw-resize, text, wait y help.
Aqu tienes un ejemplo de cada uno de los cursores. Sita el ratn sobre ellos para ver el efecto: Tambin podemos emplear una imagen como cursor, siguiendo la siguiente sintaxis: p { cursor: url(graficos/micursor.cur), auto; } Para que funcione en IE, debemos emplear imgenes de cursor (extensin .cur).
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 170
list-style-image permite mostrar una imagen en lugar de una vieta. La forma en la que lo haremos ser la siguiente: ul { list-style-image: url(graficos/lista.gif); } As declararemos el estilo. Luego bastar con escribir una lista desordenada, pues hemos utilizado el selector ul para marcar el estilo. elemento 1 elemento 2 elemento 3 elemento 4
171
Observa que hemos utilizado una URL. Esta ruta debe ser o bien absoluta, o relativa a la hoja de estilos. No al documento donde se aplica.
list-style-position sirve para establecer sangrados colgantes. Puede tomar dos valores outside (fuera, opcin por defecto) e inside (dentro). Veamos un ejemplo mostrando bordes en los elementos que lo ilustrar perfectamente:
Como puedes ver el valor inside alinea la vieta con el principio del texto del elemento anterior. Outside alinea la vieta del elemento en la posicin predefinida. Utiliza este ltimo valor para destacar listas definidas como inside.
Por ltimo, como en los controles de fuente, existe un modo en el que podemos escribir todas estas reglas sin tener que escribirlas una a una. Para ello utilizaremos la propiedad list-style. De este modo el siguiente bloque: ol { list-style-type: upper-alpha; list-style-position: outside; list-style-image: url(imagenes/bullet.gif); } Puede escribirse como: ol { list-style: upper-alpha outside url(imagenes/bullet.gif); } Ten en cuenta siempre el orden type, position e image. Si no quieres utilizar alguna de ellas, simplemente omtela.
172
background-color permite establecer el color de fondo. Utiliza los mismos cdigos hexadecimales o los nombres de color que vimos en la propiedad color del texto. La sintaxis es igual a la que hemos visto hasta ahora: td.rojo { background-color: red; }
body { background-image: url(imagenes/fondo.jpg); } Por defecto, las imgenes se posicionarn en la esquina superior izquierda y en mosaico. Si la imagen tiene zonas transparentes, se ver el color de fondo detrs de ella.
background-repeat indica el modo de repeticin de la imagen establecida para el fondo. Puede tomar los siguientes valores: repeat: la imagen se repite a modo de mosaico hasta ocupar la pgina completa. repeat-x: la imagen se repite a lo largo del eje horizontal. repeat-y: la imagen se repite a lo largo del eje vertical. no-repeat: la imagen no se repite. Por omisin, el valor que se toma es repeat, por lo que se genera un mosaico con la imagen del fondo.
173
Debers declarar la URL de la imagen para poder utilizar esta propiedad: #menu { background-image: url(imagenes/menu.gif); background-repeat: repeat-x; }
background-attachment se utiliza para indicar si la imagen de pantalla es fija o se desplaza con el movimiento de las barras de desplazamiento. Esta opcin se usa sobre todo para las imgenes del body. Puede tomar los valores fixed y scroll. El primer valor dejar la imagen fija, el segundo har que la imagen se desplace junto con las barras (como el fondo de esta pgina).
background-position permite el posicionamiento de la imagen de fondo. Selecciona entre los valores top, center, bottom y left, center, right. En este caso podremos combinar dos de los valores, por ejemplo:
.cita { background-image: url(imagenes/quote.gif); background-repeat: no-repeat; background-position: right top; } Aunque puedes omitirlos, pero recuerda que si lo haces por omisin los valores sern top y left.
Igual que en algunos de los apartados anteriores (observa que siempre son las propiedades con guiones) puedes utilizar la propiedad background para resumir las reglas CSS.
174
As el siguiente bloque: .cita { background-color: gray; background-image: url(imagenes/quote.gif); background-repeat: no-repeat; background-attachment: scroll; background-position: right top; } Puede ser escrito de la siguiente forma: .cita { background: gray url(imagenes/quote.gif) no-repeat scroll right top; } Recuerda mantener el orden color, image, repeat, attachment y position. Y ya sabes, si no quieres alguno, sltatelo.
margin-top, margin-right, margin-bottom y margin-left establecen el margen a cada lado del elemento. El margen establece la distancia que queda entre el borde exterior del elemento y el interior del elemento que lo contiene, o entre l y el siguiente elemento. El margen no forma parte del elemento, por lo que no mostrar sus propiedades, por ejemplo el color de fondo. Puedes utilizar pxeles o porcentajes para indicar estas distancias.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 175
Por ejemplo, en la siguiente caja se le ha dado al bloque interior la siguiente clase: .bloque_interior { margin-top: 20px; margin-right: 0px; margin-bottom: 5px; margin-left: -10px; }
Los mrgenes superiores e inferiores se pueden ver en las franjas verdes (arroba la mayor, de 20px y abajo de 5px). Observa cmo el margen 0 del lado derecho hace que los bordes queden pegados, mientras que un valor negativo hace que el bloque salga de la caja.
La propiedad margin te permite unificar varias propiedades en una sola. As, la regla anterior podra quedar como: .bloque_interior { margin: 20px 0px 5px }
-10px;
En el caso de que los valores arriba y abajo (top y bottom) e izquierda y derecha (left y right) sean iguales entre s se puede escribir en dos valores, como:
En este formato, el primer valor (20px) indica los mrgenes superior e inferior y el segundo (5px) corresponde a los mrgenes izquierdo y derecho. En le aso de haber tres valores, corresponderan a arriba, izquierda-derecha y abajo respectivamente.
En caso de que quieras que todos los mrgenes tengan la misma distancia basta escribirlo slo una
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 176
vez:
Tambin se pueden establecer estas propiedades a auto. Esta propiedad resulta muy til para centrar horizontalmente bloques en los que hemos definido el ancho. En los ejemplos anteriores, el bloque exterior tena asignada esta propiedad. De lo contrario, aparecera a la izquierda de la pgina. .bloque_exterior { width: 150px; margin: auto; } Cuando los elementos son contiguos, si ambos tienen margen, estos mrgenes se solapan, quedando como margen la distancia mayor. Veamos el siguiente ejemplo:
En el ejemplo anterior, tenemos dos bloques interiores ambos con margen de 20px. Si los mrgenes se sumasen, la distancia entre ellos sera de 40px. En cambio al solaparse queda la misma distancia que arriba o abajo, 20px. padding-top, padding-left, padding-bottom y padding-right establecern la distancia del borde de un elemento con su contenido. En los siguientes ejemplos, mostramos el padding con un color naranja: Lo entenders mucho mejor con el siguiente ejemplo:
177
.bloque_interior { padding-top: 20px; padding-right: 5px; padding-bottom: 5px; padding-left: 10px; margin: 5px; }
Texto
En el ejemplo anterior vemos el contenido de la caja en azul. Vemos que en vez de comenzar en el mismo borde como antes, queda alejado, lo que vemos coloreado en naranja. Esto es el padding. Como puedes ver la distancia del contenido a los bordes derecho e inferior es de 5px. En cambio, la distancia con el lado superior es mayor, de 20px y con el lado izquierdo de 10. Y lo mismo pasa con los mrgenes superior (20px) e izquierdo (10px). Observa que adems existe un margen exterior (en verde).
Igual que con los mrgenes podemos abreviar las reglas CSS utilizando la propiedad padding. Podemos los padding distintos en una misma regla (arriba, derecha, abajo, izquierda), definir los pares de padding (arribaabajo, izquierda-derecha) o asignarles el mismo valor a todo. .bloque1 { padding: 20px 15px 15px } .bloque2 { padding: 10px 5px; } .bloque3 { padding: 15px; }
20px;
Si un elemento tiene margen, y el elemento que lo contiene tiene padding, se suman. Veamos un ejemplo:
Texto
Como vemos el bloque exterior deja un padding de 10px. Como el interior tiene un margen superior e inferior de otros 10px, se suman y queda una separacin entre los lados de 20px.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 178
Por defecto, muchos elementos suelen tener margen. La mayora no tienen padding. Muchas veces, los valores del margen son distintos en distintos navegadores, lo que hace que los elementos no se vean igual. Por eso es recomendable establecer siempre nuestros mrgenes, y no dejar el que muestra por defecto el navegador.
Una forma muy cmoda de ver qu mrgenes afectan a un elemento es usando la vista Inspeccionar. Puedes verla en este avanzado .
17.14. Bordes
Tambin tenemos las propiedades de borde. El borde forma un marco que rodea al elemento. Fuera de l queda el margin, mientras que el padding queda dentro. La primera es border-width que indica el ancho o grosor de un borde. Puede tomar los valores medium, thin y thick. Aunque tambin se aceptan valores en pxeles (los ms empleados) y porcentajes que son ms fciles de manejar a la hora de crear bordes con una anchura exacta.
En este caso hemos utilizado: .borde1 { border-width: 1px; } .borde2 { border-width: 5px; }
border-style muestra el borde del elemento de una forma determinada, existen varios tipos:
179
border-color establece en forma hexadecimal o con nombre el color del borde de un elemento.
Como en el resto de propiedades, utilizaremos la propiedad border para resumir estas tres ltimas. De modo que el siguiente bloque: .borde { border-width: 10px; border-style: groove; border-color: black; } Podra escribirse ms fcilmente: .borde { border: 10px groove }
black;
En este caso podemos cambiar el orden de las propiedades, aunque te recomendamos que sigas siempre el mismo.
Tambin podemos definir independientemente las propiedades de cada lado: .borde { border-top-width: 10px; border-top-style: groove; border-top-color: black; border-bottom: 5px blue solid; } Y podemos emplear el mismo sistema que con mrgenes y padding para referirnos a los cuatro lados:
180
.borde { border-width: 5px; border-color: blue green; border-style: solid dotted double groove; }
Este texto tiene un elemento flotante a la izquierda. Adems le hemos dado un tamao de fuente mayor para que se note mejor el efecto.
Adems le hemos dado un tamao de fuente mayor para que se note mejor el efecto.
Hemos utilizado los valores left y right respectivamente. En estos casos a los prrafos que contienen el smbolo de copyright se les han aplicado la propiedad CSS float: <p style="float:left; font-size: 25px; border: 1px solid black; margin:3px;">©</p> <p style="float:right; font-size: 25px; border: 1px solid black; margin:3px;">©</p>
181
Pero si vemos detenidamente esta propiedad veremos que encontramos un problema: Este texto tiene un elemento flotante a la derecha.
Pero quiero que este prrafo no se afectado por el bloque flotante y se muestre sin tener que ajustarse a l.
vea
Como este prrafo que ocupa toda la anchura del bloque div padre. Cmo evitamos que el elemento flotante quede a la derecha del segundo prrafo?
Para ello deberemos utilizar la propiedad clear. Esta propiedad permite romper el ajuste que se est realizando por una etiqueta anterior marcada con float. Clear puede tomar 3 valores: left, right o both, para romper el float de izquierda, derecha o ambos respectivamente. Por lo que si le aplicamos un clear: right; al segundo prrafo este se mostrar sin verse afectado por el float: Este texto tiene un elemento flotante a la derecha.
Pero quiero que este prrafo no se vea afectado por el bloque flotante y se muestre sin tener que ajustarse a l. Como este prrafo que ocupa toda la anchura del bloque div padre. El cdigo que hemos utilizado es el siguiente: <p style="clear: right;"> Observa que al hacer esto, el segundo prrafo no comienza hasta que no acaba el elemento flotante. Del mismo modo esta propiedad nos ayudar en este caso, donde tenemos dos elementos flotantes a la izquierda:
a la izquierda.
Observa tambin que el elemento flotante sobresale del bloque, ya que no se tienen en cuenta para calcular
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 182
el alto. Queremos que los dos bloques estn flotando a la izquierda pero uno debajo del otro. Para ello deberemos aplicarle al segundo elemento un clear: left; para que elimine el comportamiento del primer elemento que ya estaba flotando, y aparezca a continuacin style="float: left; clear: left;". Y obtendramos lo siguiente:
izquierda. Ahora uno se encuentra debajo del otro, y el fluye tenindolos en cuenta a ambos. texto Aunque puede llegar un prrafo que deje de verse afectado.
Como ste!
Ahora combinando los mrgenes y los elementos flotantes podemos crear columnas de una forma muy sencilla:
cabecera menu menu menu menu menu pie contenido contenido contenido contenido contenido
La forma es la siguiente: 1. Creamos una cabecera. No hace falta que se le aplique ningn estilo en especial a no ser que queramos darle un alto fijo, pero hemos preferido aadir unos bordes y paddings para que se vea mejor el ejemplo (igual que en resto de los elementos). cabecera
183
2. Luego creamos otro bloque utilizando divs. cabecera menu menu menu menu menu
3. A este ltimo bloque le asignamos la propiedad float: left; para que se encuentre flotando a la izquierda y le damos una anchura (en nuestro caso un 30%). cabecera menu menu
4. Luego creamos un tercer elemento que contendr la segunda columna. cabecera menu menu contenido contenido contenido contenido contenido
5. A este elemento deberemos darle un margin-left del mismo tamao que la anchura de la primera columna. As nos aseguramos de que se encuentren en el mismo nivel (porque el elemento de la izquierda est flotando) pero no vuelva a tomar el flujo normal cuando el bloque de la izquierda haya acabado. cabecera menu menu contenido contenido contenido contenido contenido
184
6. Finalmente aadimos un nuevo bloque que utilizaremos como pie de pgina. cabecera menu menu menu menu menu contenido contenido pie
7. A este bloque deberemos asignarle la propiedad clear: both; para que el elemento flotante no le afecte en caso de que el contenido fuese demasiado corto. cabecera menu menu menu menu menu pie contenido contenido
No es la nica forma de conseguir este efecto. Podemos hacer las dos columnas flotantes, emplear Divs PA, etc...
lnea, pueden contener a otras etiquetas en lnea, pero nunca a un elemento de bloque.
Teniendo esto siempre en mente vers que es ms sencillo trabajar y moldear las pginas utilizando CSS.
Primero veremos las propiedades de tamao height (altura) y width (anchura). Puedes especificarlas en cualquier elemento de bloque (no en elementos en lnea) y establecern su alto y su ancho en pxeles o porcentaje.
300x50
Finalmente tenemos la propiedad display, que establece cmo se muestra el tipo de elemento con el que estamos tratando. Esta propiedad es muy til por ejemplo para transformar las etiquetas de bloque a en lnea y viceversa . Puede tomar los valores inline, block, list-item, run-in, inline-block, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, tablecaption, none o inherit. Los dos primeros valores hablan por s mismos. Puedes asociarle el estilo display: block; a una etiqueta a para que cree un salto de lnea antes y despus de ella o poder darle un alto y ancho. Esto se emplea mucho en los mens, normalmente formados con listas. Observa estos dos "botones" formados por un div y un enlace:
El color de fondo amarillo corresponde al enlace. Notars que el primero slo ocupa el espaco del texto, por lo que habr que pulsar justo sobre el texto. En cambio en el segundo podemos pulsar en cualquier parte del div.
186
Esto lo hemos logrado convirtiendo el enlace en un bloque y haciendo que ocupe todo el alto (al ser un bloque, ya ocupa todo el ancho): .boton a { display: block; height: 100%; }
Del mismo modo, podrs hacer que una etiqueta de bloque (como p o div) se convierta en un elemento en lnea utilizando display: inline; y puedan ser mostradas una al lado de otra:
En este ejemplo podemos ver tres tablas que se muestran una al lado de la otra. Simplemente les hemos dado el estilo: .tabla { display: inline; } Aunque si disminuyes el ancho de la ventana vers que al tratarse de elementos en lnea se adaptan a su tamao, y al final cuando no quepan, saltan de lnea.
Para saltarnos este inconveniente (si lo fuera), podemos utilizar la propiedad que vimos en el apartado de Controles de texto: white-space. Introduciendo estas tres tablas en un elemento de bloque como un div y asignndole la propiedad whitespace: nowrap; conseguiramos que las tres tablas permaneciesen en lnea sin saltos de pantalla a pesar de la anchura de la ventana.
Comentaremos que esta propiedad tambin puede tomar el valor list-item. De este modo, los elementos que se vean afectados por el estilo display: list-item; se mostrar como si
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 187
formasen parte de una lista. Observa el siguiente ejemplo: p.lista { display: list-item; list-style-type: circle; } Si aplicamos este estilo sobre unos prrafos veremos esto: Esto es un prrafo que se muestra en forma de elemento de lista. Esto es un prrafo que se muestra en forma de elemento de lista. Esto es un prrafo que se muestra en forma de elemento de lista. Esto es un prrafo que se muestra en forma de elemento de lista.
Otro valor muy interesante de display es none. Esto hace desaparecer el elemento del flujo de la pgina, no como al usar visibilty: hidden ; que lo oculta pero mantiene su espacio. Esta propiedad es muy empleada en comportamientos JavaScript.
Existen unas propiedades CSS que combinadas con las siguientes nos ayudarn a mover el contenido de la pgina. Estas son top, left, bottom y right. Con estas propiedades podremos establecer la distancia a los bordes de la ventana del navegador, o del elemento que lo contenga. Recordemos que top equivale a la parte superior. Left al lado izquierdo. Bottom al borde inferior. Y finalmente right al derecho.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 188
Veamos ahora cmo las utilizaremos. Para ello deberemos declarar tambin la propiedad position (posicionamiento). Esta es sin duda la ms compleja de este apartado as que la veremos con detenimiento. Esta propiedad puede aceptar 4 valores: static, absolute, relative y fixed. Vayamos uno a uno.
El valor static es el valor por defecto de un elemento, ocupa su lugar en el flujo de la pgina y no puede ser modificado utilizando las propiedades top/bottom y left/right. p { }
position: static;
Con el valor absolute puedes colocar un elemento en cualquier parte de la ventana con slo darle las coordenadas (las CapasPA emplean este posicionamiento). As deberamos declarar la posicin utilizando un par de propiedades top/bottom y left/right. Lo habitual es indicar tambin el alto y ancho, aunque si no lo hacemos estos valores se ajustarn al contenido. Un ejemplo podra ser este: #capa_flotante { position: absolute; top: 100px; left: 300px; width: 30px; height: 125px; } Esta declaracin de estilos es muy habitual en las capas. Se posiciona absolutamente el objeto y luego se le da un ancho y un alto. El valor relative tambin nos permite mover el elemento. ste, en principio, ocupa su lugar en el flujo normal de la pgina y utilizaremos las propiedades top/bottom y left/right para desplazarlo tomando como referencia ese lugar y no los bordes de la pgina. El hueco reservado para el elemento quedar en el flujo normal.
189
Por ejemplo: p.especial { position: relative; top: 20px; left: 20px; } Esta regla har que los prrafos marcados con la clase especial se desplacen 20 pxeles hacia abajo y hacia la derecha de su posicin normal en el flujo de la pgina.
Piensa que lo que estamos diciendo en la definicin de la regla es que va a haber una desfase de 20 pxeles desde la parte superior de donde se encontraba en un principio, y lo mismo con la parte izquierda, por lo que el elemento se ver desplazado en diagonal.
Finalmente encontramos el valor fixed. Asignndole este valor a la propiedad position podemos hacer que un elemento se quede fijo en la ventana aunque se muevan las barras de desplazamiento. Un comportamiento muy til para los mens o algunos grficos que queramos que permanezcan siempre a la vista. Hemos de tener en cuenta que al desplazar la pgina puede que tapen otros elementos. Tambin acepta los pares top/bottom y left/right para definir la posicin en la que se mostrar fijo. Por ejemplo: #menu { position: fixed; top: 0px; right: 0px; } Esta regla de estilo posicionara un elemento con identidad menu en la esquina superior derecha de la ventana y aunque utilicemos el scroll (las barras de desplazamiento) permanecer all fijo. Este valor no funciona en IE 6, aunque s en las siguientes versiones.
190
Esta propiedad decide el orden de profundidad de los elementos que se encuentran solapados. En el apartado anterior vimos cmo mover los elementos en la pantalla. Imagina, ahora, que al mover dos capas una nos queda por encima de la otra. Cmo podemos decidir cul quedar por detrs? Y al frente? Utilizaremos esta propiedad para ello. Z-index acepta nmeros positivos o negativos, y establece que el elemento con un valor mayor se mostrar por delante del resto. Esto tiene sentido en elementos posicionados, que pueden solapar otros elementos. Veamos un ejemplo:
Para utilizar esta propiedad basta con declararla: .rojo { position: relative; top: 100px; left: 20px; z-index: 0; }
Otra propiedad muy valiosa a la hora de jugar con la visibilidad es visibility. Puede tomar los valores visible y hidden (visible y escondida respectivamente). Recuerda que esta propiedad la emplebamos con las capas.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 191
Asigna el valor hidden a todos aquellos elementos que quieras que no aparezcan en la pantalla. Muy til para ocultar estadsticas o para crear animaciones complejas combinando esta propiedad con JavaScript. #estadisticas { visible: hidden; }
Finalmente nos encontramos con otra propiedad llamada overflow, que ya habamos comentado. Esta propiedad establece como ha de tratarse el contenido dentro de un elemento. El overflow en realidad se hace cargo del desbordamiento de contenido. Por lo que slo acta en aquellos casos en los que el continente se queda demasiado pequeo para mostrarlo todo. Puede tomar los valores visible, hidden, scroll y auto. El valor visible hace que se ignore el tamao del continente para mostrar todo el contenido. Es el valor por omisin en la mayora de los navegadores. Utilizando hidden se oculta el contenido que no cabe y no muestra barras de desplazamiento. El tamao del continente no se ver afectado. Si le das el valor scroll se introducirn las barras de desplazamiento necesarias para que el contenido pueda visualizarse correctamente. El tamao del continente no se ver afectado. Las barras siempre sern visibles. Finalmente, con el valor auto aparecern las barras de desplazamiento cuando sean necesarias.
En este ejemplo hemos introducido 5 etiquetas div que contienen un texto que a veces no cabe. El bloque marcado con overflow: visible; muestra el texto saliendo de l (el texto excedente est fuera del flujo de la pgina). Al contrario que el que est definido como hidden que esconde el resto del texto. El valor scroll muestra las 2 barras de desplazamiento aunque la vertical no sea necesaria, y auto hace que el navegador introduzca nicamente la horizontal pues es la que es necesaria en este caso.
192
193
entendido este proceso poda resultar sencillo, aunque si no se dominaban las tablas, poda convertirse en algo tedioso. El problema de las tablas es que generaban un pgina muy encorsetada, y el cdigo se volva complejo de entender. Adems, algunos buscadores encontraban problemas al analizar la estructura de la pgina. Actualmente, la maquetacin con tablas ha cado en desuso, y se realiza utilizando capas (<div>), tambin
llamadas divisiones o contenedores. La colocacin de las capas en la pgina se realiza a travs de CSS. Esto permite, por ejemplo, que podamos pasar de un diseo con un men lateral a otro con el men en la parte superior, slo cambiando la hoja de estilos. En esta unidad veremos las tcnicas de maquetacin ms comunes, aunque hay que decir que existen diversas formas de conseguir una misma maquetacin.
contenido ya existente desde Dreamweaver, seleccionamos la parte de la pgina y en el men Insertar, opcin Objeto de diseo, elegimos Etiqueta Div.
Como hemos dicho, emplearemos sobre todo etiquetas del tipo (<div>). Para crear un div alrededor de
Tambin veremos que Dreamweaver nos ofrece una serie de plantillas de maquetacin, de las que podremos partir, adaptndolas a nuestras necesidades.
194
18.2. Tamao
Por lo general, la maquetacin se realiza sobre elementos en bloque. Normalmente divisiones, pero tambin lo podemos hacer con prrafos, listas, o con el propio body. Por defecto los elementos de bloque ocupan todo el ancho del elemento que lo contiene, y su alto se ajusta al contenido. Cualquier elemento HTML de bloque, tiene dos atributos que pueden definir su tamao: ancho (width) y alto (height). Los valores para estas medidas, pueden ser expresados en las medidas habituales: Tamaos absolutos, utilizando px, cm, etc... Tamaos relativos al elemento que lo contiene, utilizando porcentajes (%). Tamaos relativos a la fuente, utilizando em. El valor auto es el valor por defecto. Por ejemplo, un prrafo, por defecto, tienen un ancho del 100% y un alto ajustado al contenido. En algunos elementos, como los Divs PA, nos permiten cambiar su tamao desde el Inspector de propiedades. Pero en la mayora, tendremos que hacerlo desde el cdigo o desde las propiedades CSS de Cuadro y Posicionamiento.
Por ejemplo, hemos definido el tamao para el siguiente prrafo: <p style="width:200px; height:100px; border: red 2px solid">
Recuerda que las propiedades de margen se encuentran tambin con las propiedades de Cuadro. <p style="width:200px; height:100px; border: red 2px solid; margin: auto;">
Por defecto, al no ocupar todo el ancho, el elemento queda alineado a la izquierda, como en el ejemplo anterior. Una forma sencilla de centrarlo es dndole al margen (margin) derecho e izquierdo el valor auto.
Con slo esto, podramos maquetar una pgina web que contenga una columna central, con un ancho fijo o relativo, centrada en la ventana del navegador. Para hacerlo, encerramos todo el contenido del body en una capa, a la que le asignamos, como mnimo, estas reglas CSS: #container { width: 960px; margin: 0 auto; } Puedes ver un ejemplo de una pgina muy simple maquetada de esta forma aqu.
18.3. Desbordamiento
Al utilizar un elemento de bloque, como una capa, un prrafo, el body, etc... el tamao depende del contenido. Pero al definir un tamao fijo nos puede surgir un problema: qu pasa si el contenido del elemento (texto, imgenes, etc...) no cabe? Entonces se produce un desbordamiento, que podemos controlar desde el estilo con la propiedad overflow. Podemos darle estos valores: visible. Es la opcin por omisin. El contenido sale de elemento, y puede que se solape con los elementos que haya a continuacin. hidden. Lo que no quepa en el elemento, queda oculto. auto. Muestra las barras de desplazamiento en el elemento cuando sea necesario. scroll. Siempre muestra las barras de desplazamiento. visible. El texto en esta capa no cabe al tener un tamao fijo, por lo que desborda. hidden. El texto en esta capa no cabe al tener un tamao fijo, por lo que desborda. auto. El texto en esta capa no cabe al tener un tamao fijo, por lo que desborda. auto. ste s cabe. scroll. ste s cabe.
Si el desbordamiento es visible, puede tapar a los elementos que haya despus. En el editor de propiedades CSS, encontramos el desbordamiento en la categora Posicin.
196
Y recuerda si estamos trabajando con Divs PA, podemos establecer este atributo directamente sobre el Inspector de propiedades.
18.4. Posicionamiento
El posicionamiento es el lugar donde el navegador coloca un elemento HTML para visualizarlo. Por defecto, los elementos se posicionan uno a continuacin de otro. Si se trata de elementos de bloque, como capas, prrafos, listas, etc, se irn colocando uno debajo del otro. A este posicionamiento se le denomina esttico. Utilizando CSS, con la propiedad position podemos cambiar el tipo de posicionamiento de los elementos. static. Es el normal. relative. El posicionamiento relativo coloca el elemento en su posicin normal. A partir de ah, podemos desplazar el elemento, permaneciendo el hueco de su posicin original. elemento que lo contiene. absolute. Con el posicionamiento absoluto, especificamos la posicin del elemento con respecto al fixed. Se establece la posicin del elemento de forma parecida al absoluto, pero el elemento queda fijo en la pantalla, aunque utilicemos barras de desplazamiento.
Al cambiar el desplazamiento de un elemento, es fcil que se solape sobre otro. Esto produce que un elemento quede oculto. Para controlar esto, disponemos de la propiedad CSS z-index, a la que podemos asignar un valor numrico. Un elemento con un z-index mayor se ver por encima de otro con un z-index menor.
Las cajas del siguiente ejemplo aparecen solapadas. Al pasar el cursor sobre ellas, se le asigna z-index: 10;, lo que hace que se vean por encima del resto.
197
El z-index slo afecta a los elementos con un posicionamiento distinto de static. Los elementos posicionados siempre se vern por encima de otros elementos no posicionados, y entre ellos se ver encima el de mayor z-index, o en su defecto, el que se haya generado en ltimo lugar. Truco: Para que un elemento sin posicionamiento se vea por encima de otro posicionado, podemos darle posicionamiento relativo, lo que no afectar a su apariencia si no lo desplazamos, y un z-index mayor que el del elemento posicionado. En el editor CSS encontramos las estas propiedades agrupadas bajo posicin.
Para aplicarlo, lo primero es declararlo en el estilo, utilizando position: relative;. Para indicar el desplazamiento horizontal, utilizamos left para desplazarlo a la izquierda y right para
hacerlo a la derecha. Utilizar valores negativos, produce el efecto opuesto. Por ejemplo, para desplazar un elemento 40px a la derecha, podramos poner right: 40px; o left: -40px;. Del mismo modo, podemos desplazarlo verticalmente utilizando top para desplazarlo hacia arriba o bottom
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 198
para hacerlo hacia abajo. Si no establecemos valores de desplazamiento el elemento no cambia su posicin, por eso es muy comn asignar el posicionamiento relativo a elementos para poder utilizar una propiedad que requiere posicionamiento, como puede ser z-index.
Como vimos en el tema relacionado con capas, Dreamweaver nos permite tratar los divs con posicionamiento absoluto de forma especial, a travs de los Divs PA. Podemos insertar una capa con posicionamiento absoluto directamente a travs del men Insertar, opcin Objeto de diseo, Div PA.
199
Cuando un elemento (no solo divs) tiene posicionamiento absoluto, en Dreamweaver se muestra as si estn seleccionados:
Esto nos permite establecer su tamao y posicin simplemente arrastrndolos o estirando de sus bordes, directamente sobre la vista de diseo. Adems, todas estas propiedades aparecern en el inspector de propiedades.
200
Utilizando este posicionamiento, obtenemos gran flexibilidad para maquetar nuestra pgina. Por ejemplo, podemos dividir la pgina en dos (o ms) columnas. Utilizaremos dos capas, con un alto al 100%, y que la suma de sus anchos sea el total de la pgina. Por ejemplo: div#columna_izquierda { position: absolute; left: 0; top: 0; height: 100%; width: 50%; } div#columna_derecha { position: absolute; right: 0; top: 0; height: 100%; width: 50%; } Esto originara dos columnas, cada una con un ancho de la mitad del de la pgina (o del elemento que las contenga). Si queremos obtener dos columnas, una con un ancho fijo y la otra con lo que sobre, lo haremos de otra forma. Por ejemplo, si la columna de la izquierda la queremos con un ancho fijo, por ejemplo de 200px, lo que haremos ser asignar a la columna de la derecha una distancia con el lado izquierdo de esos 200px, y con el lado derecho de 0, en vez de indicar el ancho. div#columna_izquierda { position: absolute; left: 0; top: 0; height: 100%; width: 200px; } div#columna_derecha { position: absolute; right: 0; left: 200px; top: 0; height: 100%; } Hay que decir que esto no funciona correctamente en Internet Explorer 6, que no interpreta correctamente el ancho del elemento si definimos la posicin de los dos lados, en vez de un lado y el ancho. No obstante, como veremos, para obtener una columna fija, y la otra lquida, es mejor hacerlas flotantes. Podemos conseguir un efecto muy interesante controlando el desbordamiento de las columnas. Podemos
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 201
men siempre visible. Como por defecto, Internet Explorer siempre muestra la barra de desplazamiento en la etiqueta html, queda mejor si lo quitamos html {overflow:hidden;}. Recuerda que podemos anidar las capas. Por ejemplo, podramos subdividir una de las capas en otras dos dentro de ella, utilizando el mismo sistema. Puedes ver un ejemplo de pgina maquetada con posicionamiento absoluto en los ejemplos del curso: absolutooverflow.htm.
dejar una columna fija, por ejemplo con un men, y otra que muestre el contenido, a la que damos la propiedad overflow: auto;. Esto har que nos podamos desplazar por el contenido de la pgina manteniendo el
encabezado, en vez de comenzar arriba del todo, debemos de dejar una separacin igual al alto del encabezado. Si el alto del encabezado lo indicamos en porcentajes, el alto de las columnas deber de ser del 100% - el alto del encabezado. En vez de eso, resulta ms claro si en vez del alto de las columnas, indicamos la parte superior (top) y la inferior (bottom). En este caso, nos dar igual la medida que utilicemos. Como mejor lo veremos ser con un ejemplo:
Otro elemento muy utilizado en la maquetacin, es el encabezado y el pie. Observa que en los ejemplos que hemos visto, colocbamos las capas en la parte superior del todo (top: 0;). Si queremos utilizar un
div#encabezado { position: absolute; top:0; left: 0; height:10%; width:100%; background-color:RoyalBlue; } div#columna_izquierda { position: absolute; top:10%; left: 0; height: 90%; width:20%; background-color:SandyBrown; } div#columna_derecha { position: absolute; top:10%; right: 0; bottom: 0; width: 80%; background-color:LightGreen; }
Los principales inconvenientes del posicionamiento absoluto es que hemos de definir el tamao del elemento, no se ajusta al contenido, y no se crean huecos en la pgina, por eso no podemos utilizarlo para cualquier cosa.
202
Lo que hace este posicionamiento es desplazar el elemento todo lo que pueda hacia la direccin indicada, hasta encontrar el lmite del elemento contenedor, u otro elemento tambin flotante. Adems hace que todos los elementos fluyan alrededor de l. Es muy comn utilizarlo en imgenes, para que el texto fluya alrededor de ellas. En el siguiente ejemplo, todas las cajas contienen un prrafo con una imagen al principio (<p><img /> Texto</p>). Slo cambia el float de la imagen.
Normal. La imagen queda en la posicin inicial, aumentando el alto de la lnea, y no aparecen varias lneas de texto junto a la imagen. Izquierda. La imagen est en la misma posicin, pero con un float: left;. Esto permite que aparezcan varias lneas de texto junto a la imagen, y cuando llegue al final, que contine por debajo, rebasando la imagen. As, la imagen se integra mejor en el documento.
Derecha. La imagen est en la misma posicin, pero con un float: right;. Esto permite que aparezcan varias lneas de texto junto a la imagen, y cuando llegue al final, que contine por debajo, rebasando la imagen. As, la imagen se integra mejor en el documento.
203
Observa que el texto puede quedar demasiado pegado a la imagen. Para solucionarlo, no hay ms que aplicar un pequeo margin a la imagen, hacia el lado que est el texto. Existen algunos inconvenientes al utilizar el posicionamiento flotante. Un elemento que contiene a otro flotante, no lo tiene en cuenta para su tamao a lo alto. Por ejemplo, el siguiente prrafo tiene un borde, y vemos que si la imagen es flotante, "se sale". Derecha. El prrafo slo ajusta su alto al texto.
Adems, si por ejemplo hay varios prrafos con elementos flotantes al mismo lado, hace que se "amontonen": Derecha. Primer prrafo Derecha. Segundo prrafo. Normal. Primer prrafo.
valores:
Para solucionar esto, disponemos de la propiedad clear, que rompe el flotamiento. Puede tomar tres left: impide el flotamiento a la izquierda. right: impide el flotamiento a la derecha. both: impide el flotamiento por ambos lados.
En el siguiente ejemplo, utilizamos el mismo que en el ejemplo anterior, pero al segundo prrafo le hemos dado la propiedad de estilo clear: right;.
204
Con el posicionamiento flotante, podemos por ejemplo colocar elementos uno al lado del otro. De forma muy parecida, podemos utilizar el posicionamiento flotante para crear columnas en un documento. Basta con que la suma del ancho de las capas que harn de columnas quepa en el ancho de elemento contenedor, y que tengan posicionamiento flotante. En Internet Explorer, si la suma de los anchos es del 100%, para algunos tamaos de ventana no cabe, por lo que mostrar una columna debajo de la otra, aunque esto slo ocurre a veces. Por eso, cuando utilizamos porcentajes es mejor utilizar un ancho total un poco menor, por ejemplo del 99% o 99.5%. De acuerdo con lo que hemos dicho, podemos dividir un elemento en dos columnas de la siguiente manera:
div#columna_izquierda { float: left; width: 30%; height: 100%; background-color:SandyBrown; } div#columna_derecha { float: left; width: 69.5%; height: 100%; background-color:LightGreen; }
Para aadir una cabecera al principio, no hay ms que poner una capa antes de las columnas, con todo el ancho. Y para poner un pie, haramos lo mismo, pero colocndolo despus de las columnas, y rompiendo el flotamiento con clear:both;.
205
div#cabecera { width: 99.5%; height: 10%; background-color:RoyalBlue; } div#columna_izquierda { float: left; width: 30%; height: 80%; background-color:SandyBrown; } div#columna_derecha { float: left; width: 69.5%; height: 80%; background-color:LightGreen; } div#pie { clear: both; width: 99.5%; height: 10%; background-color:Violet; }
La principal diferencia con el posicionamiento absoluto es que al flotante s le afectan los mrgenes, propios y del elemento contenedor, y que no estamos obligados a definir el alto. En el ejemplo anterior, hemos establecido el alto porque no hay contenido, pero si no lo especificamos, el alto se ajustara al contenido del elemento. La maquetacin ms comn es la que se realiza con elementos flotantes.
refiere siempre a la ventana del navegador , independientemente de que el elemento posicionado est dentro de otro elemento con posicionamiento, como pasaba con el absoluto. Adems, el elemento siempre se muestra en la misma posicin , aunque la pgina sea larga y nos desplacemos hacia abajo o hacia un lado. Por ejemplo, usando el posicionamiento, podemos tener el men de la pgina siempre visible a un lado, til en pginas con texto muy largas. En el este ejemplo, puedes ver una pgina maquetada con posicionamiento fijo. En ella. vers un encabezado y dos columnas que siempre aparecen visibles. Una de las propiedades de este posicionamiento es que si imprimimos la pgina web y ocupa varias pginas en papel, los elementos fijos se imprimen en todas las pginas, por lo que puede resultar til para pies y encabezados.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 206
la posibilidad de cambiar su tamao, y en proporcin, el de todos los elementos. Aunque permite que el texto se controle, sigue sin adaptarse a las distintas ventanas, y resulta difcil controlar las imgenes. Diseo adaptable (responsive) Fluido. el tamao se adapta a la ventana. lquido. Responsive. adaptable. Con media query. El siguiente paso es cambiar la disposicin de los elementos en funcin del ancho. Utiliza preguntas (media querys) para cargar diferentes hojas de estilo. Cambio del tamao de texto, diseo de diferentes columnas e incluso del tamao de imagenes. Librerias para detectar el amao. Por ejemplo el Fluido de Dreamweaver. http://www.emenia.es/diseno-web-adaptable-o-responsive-web-design/ http://responsivewebdesign.com/robot/ -- "Cmo conseguir un diseo hbrido lquido-elstico La clave de estos layouts consiste en utilizar emes como unidad de medida para los bloques contenedores y aadir la propiedad max-width de CSS para establecer su anchura mxima. Suponiendo que tenemos un diseo de dos columnas, el bloque contenedor de ambas tendra un max-width del 100% y sus bloques anidados tendran como ancho mximo el porcentaje relativo a la anchura del bloque que los contiene." de http://www.cool-z.com/blog/2010/diseno-hibrido-liquidoelastico-una-buena-opcion-olvidada/
Actualmente, la mayora de las pginas ofrecen un diseo fijo, sobre todo si tienen un diseo ms elaborado. Las que ofrecen un diseo ms elstico, suelen mostrar una columna central elstica, que se adapta a la pantalla, y columnas con un ancho fijo, para mens o para la publicidad.
208
Podemos dividir estos diseos en dos grandes grupos, diseos de maquetacin fija o de maquetacin lquida (las que pone como flotantes). En la previsualizacin de la derecha, los diseos fijos, de tamao en pxeles se representan con un candado. En cambio, los diseos lquidos aparecen con un muelle. Bsicamente, para cada grupo de diseo, podemos elegir si queremos una nica columna principal central, columnas a los lados, pie o encabezado. Hay que tener en cuenta que esto generar gran cantidad de estilos CSS. Por defecto se aadir al head de
la pgina, pero en el desplegable Diseo CSS en podemos elegir si colocarlo en una hoja nueva, o en una existente.
Al elegir un diseo u otro, llegaremos se mostrar de forma parecida a este, en tonos verdes-marrones si el diseo es fijo, o azulado si es elstico.
209
Partiendo de esta pgina, podemos modificarla como nuestros contenidos y estilo. Si accedes su cdigo fuente, vers que tiene incluidos una gran cantidad de comentarios. En ellos se explica por qu se ha puesto tal propiedad, o cosas que podemos cambiar. Una vez acabada nuestra pgina, deberamos borrar estos comentarios. En los videotutoriales que encontrars en el siguiente apartado, podrs ver cmo empleamos una de estas plantillas para maquetar nuestro sitio web.
se debe a Joni Korpi. Este diseo fluido es uno ms de los diseos predefinidos de Dreamweaver y est disponible desde el men Nuevo eligiendo Diseo de cuadricula fluida.
La principal novedad de este tipo de "diseo de cuadrcula fluida" es que se adaptan a diferentes anchos de pantalla de forma completa. Es decir, que para cada ancho podemos variar el diseo en varios aspectos. Este tipo de diseo se suele llamar "responsive design" que podramos traducir como "diseo adaptable", " diseo sensible al contexto" o "diseo reactivo" que son ms descriptivos que "diseo de cuadrcula fluida". Por ejemplo, para un ancho correspondiente a un mvil (smartphone) podemos definir un tamao de letra menor que para un ancho correspondiente a una tableta, o podemos variar la posicin del men. Otra caracterstica importante es que las imgenes varan su tamao proporcionalmente al ancho de la pantalla. Al abrir un documento de este tipo, Dreamweaver nos presenta una cuadrcula con columnas para que podamos encajar los elementos contenedores Div. Estos elementos deben ser creados mediante el comando Insertar etiqueta Div de diseo de cuadrcula fluida, del men Insertar.
211
Por ejemplo, en la siguiente imagen vemos el diseo de una pgina con varios de estos elementos Div, en el primero hay una foto, en el segundo el ttulo "Parque Natural Sierra Bicuerca", en el siguiente las opciones del men, etc. Como estamos diseando para un mvil, con poca anchura, colocamos los elementos uno encima de otro
212
Sin embargo, cuando estamos en el diseo para tabletas colocamos dos elementos en la misma fila, uno al lado del otro. Como puedes ver en la siguiente imagen.
213
Lo interesante de este diseo con cuadrcula fluida es que no tenemos que crear dos pginas web distintas, ambos diseos estn en la misma pgina, simplemente tenemos que pulsar en el icono correspondiente para alternar una vista u otra de cada dispositivo (mvil, tableta, escritorio). No slo podemos variar la estructura de los elementos Div, tambin podemos definir elementos con estilos CSS diferentes para cada ancho de pantalla (mvil, tableta, escritorio). Y lo mejor es que Dreamweaver se encarga de todo, nosotros slo tenemos que definir el estilo que queramos y automticamente se le asigna al dispositivo en que nos encontremos. Por ejemplo, si te fijas en el tamao del ttulo ( "Parque Natural Sierra Bicuerca") de las dos imgenes anteriores, vers que es ms pequeo en el diseo para mvil que en el diseo para tableta porque hemos definido distinto tamao de la fuente. Lo que ha hecho Dreamweaver es crear tres reglas #titulo y asigarles a cada un tamao diferente de fuente, como puedes ver en la imagen siguiente.
214
Para que el diseo se adapte a distintos dispositivos el cdigo de la hoja de estilo contiene media query que son instrucciones condicionales como la siguiente: @media only screen and (min-width: 481px) { ... definicin estilos ... } Esta media query hace que las definiciones de estilo se apliquen slo a las pantallas que, como mnimo, tengan un ancho de 481 px. Como este tipo de instrucciones no son soportadas por navegadores antiguos, como Internet Explore 8, se incluye el archivo respond.min.js que suple esta carencia. Para manejar estas instrucciones y otras similares, al crear una pgina de cuadrcula fluida Dreamweaver crea tres archivos adicionales (boilerplate.css, respond.min.js y una hoja de estilo) estos archivos han de guardarse y subirse al servidor junto con el archivo .html En este vdeo puedes ver todo el proceso de diseo de forma ms detallada: Puedes ver un sitio de prueba realizado con este tipo de diseo en esta pgina fluido4, redimensiona la ventana para ver cmo va cambiando el diseo.
215
216
Selecciona el sitio con el que quieras establecer comunicacin remota (o crea uno nuevo para el caso) y pulsa el icono Editar.
Vers que se abre el cuadro de dilogo de Configuracin del Sitio. La categora que buscamos es Servidores, en el listado de la izquierda. Para configurar un nuevo servidor, pulsa el icono +.
Ahora en el desplegable Conectar usando selecciona el mtodo de acceso que deber utilizar Dreamweaver para conectarse con el servidor. Como ya hemos dicho nosotros explicaremos la opcin FTP. Se mostrarn las siguientes opciones:
217
El Nombre de servidor es el nombre que le podemos asignar para identificarlo. Aqu debers rellenar los datos que te facilit el servicio de hosting que contrataste. Si no recuerdas los datos o has perdido el correo electrnico que seguramente te enviaron, pdeles de nuevo la informacin. Los datos que necesitas son los siguientes: Direccin FTP o host es la direccin a la que se dirigir Dreamweaver para conectarse a tu servidor ser del tipo ftp.servidor.com o tambin podrs encontrar algunas que estn formadas en forma de direccin IP (como por ejemplo, 192.186.1.1) En Nombre de usuario y Contrasea escribe el nombre de usuario y el password para poder conectar con el servidor. Marca la casilla Guardar si quieres que el programa recuerde la contrasea. Una vez introducidos estos datos puedes pulsar el botn Prueba para ver si son correctos y Dreamweaver puede crear una conexin con el servidor remoto. En el campo Directorio raz podremos establecer una carpeta contenida en el servidor donde queramos subir las pginas. Por ejemplo, es comn que por FTP podamos acceder a muchas carpetas del servidor, pero hay una en concreto en la que hemos de ubicar las pginas. Imagina que dentro de la estructura de carpetas del servidor remoto tienes una que se llama pagina y dentro de esta otra que se llame principal. Podramos indicar la ruta pagina/principal para que los archivos se subiesen directamente a esa ubicacin. En el campo URL Web podemos introducir la direccin web de la raz del sitio, y as probar nuestras pginas dinmicas.
Una vez hayas terminado Guarda todas las pantallas hasta volver a la vista de trabajo y estaremos listos.
218
Su uso es bastante sencillo. Observa los dos desplegables de la parte superior. El primero te permite seleccionar el sitio con el que estamos trabajando. El segundo te permite cambiar la vista de ese sitio. Esta ltima opcin es muy til para ver el contenido que se encuentra subido en Internet. Una vez hayas configurado las opciones del Servidor Remoto podrs desplegar esta opcin y seleccionar Vista remota, se mostrarn todos los archivos que en ese momento se encuentran en el servidor.
Ahora veremos para qu sirven los botones: El botn Conectar te permitir establecer una conexin con el servidor. De forma predeterminada
Dreamweaver se desconecta del servidor cada 30 minutos. El botn Actualizar actualiza las listas de las vistas local y remota. As podrs ver el contenido
exacto en cada momento de cada uno de los sitios, se utiliza sobre todo cuando varias personas tienen acceso al sitio remoto para cambiar las pginas. Utiliza el botn Obtener para descargar al servidor local archivos que hayas seleccionado en el panel
Archivos en la vista remota. Estos archivos se copiarn en tu sitio local, y en caso de ya existir se sobreescribirn. El botn Colocar acta de forma contraria. Sube los archivos seleccionados en la vista local al
Luego los dos siguientes botones podrn ser utilizados si has activado la Proteccin del sitio en el cuadro de dilogo de opciones Avanzadas al configurar el sitio remoto.
219
se encuentra en el servidor convirtindolo en slo lectura. De esta forma si alguien con acceso al servidor intenta modificar el archivo le ser imposible hasta que lo desprotejas. Del mismo modo, el botn Desproteger acta del mismo modo que el botn Colocar pero cuando sube el archivo al servidor lo desprotege para que pueda ser modificado por otras personas.
220
En el desplegable Sincronizar: seleccionaremos una de las dos opciones, Archivos locales seleccionados solamente o Todo el sitio. Dependiendo de qu opcin elijas se copiarn slo unos archivos o todos los que forman el sitio.
En el desplegable Direccin: estableceremos las pautas que se deben seguir durante la sincronizacin. Si seleccionas Colocar archivos ms nuevos en remoto cuando se comparen ambos sitios, se sobreescribirn aquellos en el sitio remoto que tengan una fecha de modificacin menor a la que exista en el local. De esta forma copiars en direccin Local a Remoto. Si seleccionas la opcin Obtener archivos ms nuevos de remoto se copiarn aquellos archivos que se encuentren en el sitio remoto que tengan una fecha de modificacin mayor que la del local. En este caso estaremos copiando en direccin Remoto a Local. La ltima opcin, Obtener y colocar archivos ms nuevos, se refiere a la sincronizacin como tal. Evala los archivos en el sitio remoto y local y copia los ms nuevos en el que contiene los ms viejos. En este caso la Sincronizacin es Bidireccional.
Marca la opcin Eliminar archivos remotos no existentes en la unidad local si quieres que los archivos que se encuentren en el remoto que no estn en el local se borren. Al pulsar Vista previa... aparece un listado con los cambios que se van a realizar, slo nos quedar aceptarlo.
221
Debido a que no todos los servidores tienen acceso FTP y que no tienes porqu tener acceso a un servidor remoto no realizaremos ningn ejercicio sobre este tema. Si quieres establecer una conexin con tu servidor remoto slo tendrs que seguir los pasos explicados en la teora.
222
Muy bien. Sin dejar de lado HTML, comenzaremos a crear pginas ms verstiles utilizando PHP. PHP es un lenguaje de programacin . Pero no te preocupes, Dreamweaver contiene las suficientes herramientas como para manejarte sencillamente sin que tengas que saber ni una lnea de cdigo. Desde luego, si el tema te apasiona no lo dudes. Aprende PHP y utilzalo para crear prcticamente lo que te venga a la cabeza. Aunque eso se encuentra fuera de este curso. Nosotros veremos lo que es posible hacer utilizando las herramientas de que dispone Dreamweaver.
Como decamos PHP es un lenguaje de programacin, as que deberemos aprender antes cmo funciona. Hasta ahora nosotros crebamos pginas con extensin HTML, este tipo de archivos, cuando son requeridos por un navegador se descargan automticamente del servidor y se visualizan tal y como son en el cliente (el ordenador del usuario que est viendo la pgina).
PHP acta de forma diferente. Un archivo con extensin PHP, cuando es requerido por el cliente se ejecuta en el servidor y genera una pgina web con cdigo HTML, y es este cdigo HTML el que se enva y se visualiza en el navegador del
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 223
usuario. De esta forma, el contenido del archivo PHP es completamente transparente al usuario (adems de serle imposible ver el contenido del archivo) y slo podr ver el resultado de la peticin que ha creado (es decir, lo que genera el archivo PHP segn convenga en cada momento). Vers que esto es ms fcil de entender cuando vayamos avanzando en la unidad.
Una de las utilidades de las pginas PHP es que PHP es capaz de buscar en una base de datos mientras se est ejecutando en el servidor y mostrar los datos obtenidos en cdigo HTML para que el navegador del cliente los pueda visualizar:
Como puedes ver PHP puede ser muy til a la hora de recuperar datos almacenados lo que te ser muy til si decides guardar en forma de tablas informacin relativa a tus productos, elementos sobre los que ests trabajando, entradas de blog, etc... Si no sabes muy bien qu es una base de datos visita este tema bsico sobre Bases de datos.
224
Lo recomendable es escribirla de forma completa, para evitar posibles problemas con la configuracin del servidor. No vamos a entrar en ms detalle, pues Dreamweaver se encargar de generar todo esto automticamente. Pero te ser bastante til cuando empecemos a programar pginas para poder localizar con un vistazo el cdigo que se haya creado.
ya que nuestro navegador no puede ejecutar su cdigo, as que mostrar todo. Requerimos verla a travs de un servidor que sea capaz de ejecutar este cdigo, y de consultar una base de datos si es necesario. Para poder continuar con el curso, necesitamos instalar un servidor local o servidor de pruebas en nuestro equipo que sea capaz de realizar todo lo anterior. Vamos a emplear WampServer (antes conocido como WAMP). Es un servidor gratuito, sencillo de instalar y de usar soportado por la empresa Alter Way bajo licencia GPL.
Para ello necesitars descargar WampServer 2.2E (aprox. 30 MB), un paquete auto-instalable que te ofrece la posibilidad de utilizar Apache (para correr PHP) y utilizar MySQL (bases de datos). En la pgina de descarga debers elegir la opcin que se adapte a tu ordenador (32 64 bits) y la versin que deseas, en nuestro caso 2.2E (PHP 5.4).
Al hacer clic te aparecer unos avisos como el que puedes ver en la siguiente imagen.
Trabajaremos con la versin 2.2Ei, la ltima en el momento de creacin del curso (2013). Puede que descargues una versin posterior, pero no debera haber demasiadas diferencias. Nota: WampServer puede ejecutar PHP. Existen otros lenguajes para pginas dinmicas, como ASP o Java, que requieren de otro tipo de servidores, y que no veremos en este curso.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 226
En este curso seguiremos los pasos que hacen falta para instalar este paquete, pero existen muchsimos de ellos. Vamos a ver paso por paso lo que debers hacer. Una vez tengas el archivo ejecutable en tu ordenador (en nuestro caso se llama
haz doble clic sobre l para empezar la instalacin. Primero Windows te preguntar si autorizas la instalacin.
Luego se mostrar la siguiente pantalla donde nos dan la bienvenida y nos informan de las versiones que vamos a instalar, as que simplemente haz clic en Next > para continuar.
227
Esta es la pantalla de acuerdo de licencia. Debers aceptarlo haciendo clic en la opcin I accept the agreement y pulsar el botn Next >.
Continuamos con la instalacin. En esta ventana nos preguntan dnde queremos que se guarde el programa.
228
La opcin por defecto es en la raz del sistema (c:). Si empleas Windows XP, puedes instalarlo con el resto de programas, en C:\Archivos de programa, y as lo tendrs todo ms ordenado. En cambio, si empleas Windows Vista o Windows 7 , no te recomendamos esta opcin, porque se pueden producir problemas con los permisos de seguridad que Vista aplica a esa carpeta. Si tienes otra particin de disco, para datos u otros programas, puedes instalarlo ah. En cualquier caso puedes navegar por las carpetas pulsando en Browse.... Si no sabes muy bien qu hacer, deja la opcin por defecto. Una vez elegida la ubicacin, pulsamos Next >. En la siguiente pantalla marcamos si queremos crear un acceso directo en el Escritorio (Create a Desktop icon) o en el men de inicio rpido (Create a q Quick Launch icon ) junto la botn de inicio. Si no marcas ninguna opcin, tendrs que ejecutar el programa desde el men de Inicio Todos los programas.
229
Ya casi hemos terminado. En la siguiente pantalla podemos revisar los datos elegidos
Hacemos clic en Install para comenzar con la instalacin, que tardar unos segundos.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 230
Una vez instalado, tendremos que configurar algunas opciones. La primera es el navegador predeterminado. A continuacin nos abre una pantalla para que elijamos el navegador por defecto. Si hacemos clic en Abrir, se establecer el navegador IExplorer. Podemos buscar otros navegadores.
231
En la siguiente ventana, deberamos de introducir la configuracin para poder enviar emails con PHP.
232
Como no la conocemos, no tenemos instalado un servidor de correo, dejamos las opciones de ejemplo y pulsamos Next >. Hemos terminado de instalar el programa, se mostrar la siguiente ventana:
Marca la casilla si quieres que se ejecute (Launch WampServer 2 now) cuando cerremos el instalador. Haz clic en Finish para finalizar.
Cambiar el idioma. WampServer est disponible en una gran cantidad de idiomas. Para seleccionar uno, basta con hacer clic derecho sobre el icono, y seleccionarlo desde la opcin Language, del men contextual.
233
Las capturas que mostraremos a partir de ahora, sern en espaol. Ten en cuenta que si usas otra versin, algunos nombres de comandos pueden variar segn la versin de la traduccin.
Localhost Qu es el localhost? Para qu sirve? Hemos estado hablando de crear un servidor. Un servidor remoto (el que se encuentra en Internet y requiere de una conexin FTP para subir archivos) tiene una direccin asociada. Puede ser una direccin formada por un nombre de dominio, como www.aulaclic.es, o por una direccin IP (conjunto de 4 nmeros del 0 al 255 separados por puntos, como 213.188.129.143). Realmente, el nombre en texto siempre est asociado a una IP, pero se utiliza para ser ms fcil de recordar. Este es el modo en el que accedemos a un servidor remoto, dando su nombre ya sea por dominio o por IP.
Pues bien, localhost se corresponde con el nombre de dominio del servidor local. Vers que una vez instalado WAMP podremos acceder a nuestro servidor local escribiendo en la barra de direcciones del navegador http://localhost/. Se mostrar una pantalla parecida a sta, con informacin sobre la versin:
234
Tambin podramos hacerlo escribiendo http://127.0.0.1/ que es la direccin IP de nuestro propio ordenador. Lo que estamos haciendo es acceder a la carpeta que tiene WampServer por defecto establecida como localhost. Esta carpeta se encuentra dentro de la carpeta de instalacin, en una subcarpeta llamada www . Los documentos que tengamos ah sern accesibles por el servidor. Para poder acceder a los documentos que hemos ido creando, tenemos varias opciones: Podramos copiar nuestros archivos all. Por ejemplo, si copiamos dentro de www la carpeta del sitio animales, podramos acceder al sitio escribiendo http://localhost/animales en la barra de direcciones del navegador. Esta no es la mejor solucin, sobre todo si hemos instalado WampServer en Archivos de programa. Podemos cambiar la ubicacin de localhost a la carpeta que queramos. Para ello deberamos de editar el archivo httpd.conf (clic sobre el icono Apache httpd.conf). Se abrir un archivo de texto. En l buscamos las dos apariciones del DocumentRoot (basta con buscar www), que mostrar la ruta actual (por ejemplo "c:/wamp/www" o "c:/program files/wamp/www") y cambiarla por la que queramos. Adems, debemos de copiar el contenido de www a la nueva carpeta. Para que funcione, tenemos que reiniciar el servidor. Otra opcin es crear un alias. De forma que al escribir http://localhost/miswebs accedamos a los documentos de una carpeta que no est realmente dentro de www. Vamos a realizar esto ltimo por ser lo ms cmodo, creando un alias llamado sitios. Para crear una alias, sique el ejercicio paso a paso Crear un alias en WampServer.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 235
Independientemente de la opcin que elijamos, tenemos que tener claro que slo podremos acceder a los archivos que estn dentro de la carpeta definida como Carpeta del servidor o a la identificada con un alias.
Como ya hemos dicho, WAMP se encarga de ejecutar principalmente dos servicios: Apache (para correr PHP) y MySQL (para trabajar con bases de datos). El icono de la barra de tareas tiene varios estados que dependen de cmo se encuentren estos servicios: Este icono indica que ambos servicios estn ejecutndose correctamente. significar que ninguno de los servicios se encuentra ejecutndose en estos
Si haces clic izquierdo sobre cualquiera de estos iconos se mostrar el men de WampServer (a la derecha). Nos centraremos, ahora, en la parte inferior que se encuentra bajo el ttulo de Quick Admin. Aqu podrs encontrar 3 comandos que tienen que ver con el estado de los servicios: Iniciar los Servicios (Start All Services) intentar lanzar los dos servicios (Apache y MySQL). Detener los servicios (Stop All Services) parar los servicios que se estn ejecutando, por lo que el estado del icono en la barra de tareas cambiar a .
Reiniciar los servicios (Restart All Services) parar los servicios e intentar ejecutarlos de nuevo. Utiliza esta opcin cuando se te presente algn problema en su funcionamiento, o hayas cambiado algo en los archivos de configuracin.
Por defecto, el servidor de WampServer est apagado (off-line). Esto quiere decir qu slo desde se equipo
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 236
se puede ver el contenido del localhost. Si pulsamos en Encender (Put Online) hacemos pblico este contenido y otras personas pueden verlo. Esto no quiere decir que alguien buscando en Google pueda llegar a visitarnos. Slo estar disponible para quienes conozcan nuestra IP pblica . Si quieres conocer la tuya, puedes encontrar muchas pginas que te la muestran, como Cul es mi IP. Nota: Si te conectas a Internet a travs de un router o cortafuegos, debers de configurarlo para que permita el acceso a localhost. Normalmente basta con abrir el puerto 80. Cuando el servidor est apagado (off-line) el icono es de color rojo: Para volver de nuevo al estado cerrado podrs seleccionar la opcin Apagar (Put Offline) que aparecer en vez de Encender.
Podemos trabajar con cada servicio independientemente, desde Apache Service o MySQL Service. No vamos a detallar cada opcin. Explicaremos las comunes. Las opciones Iniciar/Continuar Servicio , Detener Servicio y Reiniciar Servicio son los equivalentes a los que vimos en el men principal pero tratados individualmente para cada uno de los servicios. Observa las dos ltimas opciones Install Service y Remove Service, te servirn para instalar y desinstalar el servicio. Al instalar el servicio este se iniciar con Windows, por lo que no tendremos que ejecutar WampServer cuando queramos usarlo.
Finalmente veremos las opciones que vamos a utilizar de momento que se encuentran en la parte superior.. Localhost abre una nueva ventana del navegador mostrando el contenido raz del localhost. Por defecto vers una pgina creada por WAMP desde donde podrs navegar por el contenido de las carpetas. De todas formas tambin puedes abrir una nueva ventana y escribir http://localhost/carpeta/ para ver el contenido de una carpeta que se encuentre en el directorio que asignaste al localhost o acceder a un alias. Directorio WWW abre en una ventana del Explorador de Windows la carpeta que asignaste al localhost. Desde aqu podrs trabajar con los ficheros como hacamos hasta ahora. Copindolos, movindolos o borrndolos cuando sea necesario. Por ltimo la opcin phpMyAdmin nos llevar a una pgina web desde donde podremos controlar, gestionar y crear nuestras bases de datos. Recuerda, que a no ser que instales los servicios, cada vez que arranques el equipo debers de arrancar tambin WampServer para comenzar a trabajar con l.
237
Ahora debers rellenar los datos del servidor de pruebas. En Carpeta de servidor deberemos seleccionar una carpeta dentro del localhost donde guardaremos los archivos que queramos probar. Pueden ocurrir dos cosas: Si nuestros archivos estn ya en localhost (o accesibles con un alias), podemos indicar la misma carpeta en la que est definido el sitio en Dreamweaver.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 238
Si no estn en localhost, debemos de crear una carpeta all para el sitio. Al vincular esa carpeta con el sitio, Dreamweaver ir copiando all los archivos necesarios. En nuestro caso nuestro localhost lo hemos definido un alias (sitios) para la carpeta que contiene los sitios con los que estamos trabajando. Por lo tanto en Carpeta de servidor, dejamos la misma carpeta del sitio en Dreamweaver. Insistimos en que si tienes la carpeta de servidor en otra ubicacin, debes indicarla aqu.
Y finalmente escribe el URL del sitio de pruebas. Siempre comenzaremos por http://localhost/. Si slo tenemos un sitio, lo normal es definirlo directamente ah. Si tenemos varios, debemos de indicar la subcarpeta correspondiente o su alias. En nuestro caso tenemos hemos definido el alias sitios. Por lo tanto, aqu indicaremos http://localhost/sitios/carpeta_del_sitio/ Pulsa Guardar y se aplicarn los cambios. Ahora en el listado de servidores, seleccionamos el recin creado como un Servidor de pruebas.
A partir de este momento, cada vez que, trabajando sobre un archivo PHP, pulses la tecla F12 para visualizarlo en el navegador se mostrar gracias a nuestro localhost. Pero antes nos mostrar el siguiente mensaje:
Si la carpeta local y la carpeta del servidor de pruebas no es la misma, debemos de decir que S, para que Dreamweaver copie los archivos necesarios al servidor. En nuestro caso, como es la misma carpeta, podemos decir que No.
Nota: recuerda que para poder visualizar los archivos en localhost debers tener WAMP ejecutando al menos el servicio de Apache (que es el que se ocupa de correr PHP).
239
Para practicar la creacin de servidores de prueba realiza el Ejercicio Paso a Paso de Servidores de Prueba.
Desde aqu podremos crear nuevas bases de datos, tablas y usuarios con sus respectivos privilegios. Pero, vayamos paso a paso. Lo primero que puedes cambiar es el idioma en el apartado Configuraciones de apariencia , basta con seleccionar Espaol en el desplegable. En tema hemos seleccionado Original ya que es el que estamos ms acostumbrados a ver
Nota: Algunos iconos y mens pueden variar ligeramente si empleas una versin posterior a la del curso, aunque la funcionalidad debera ser la misma.
240
Puedes seleccionar un juego de caracteres en el desplegable Cotejamiento, si lo dejas en blanco se tomar el valor por defecto que variar segn la configuracin de cada servidor. Es recomendable que escojas la opcin utf-8_spanish_ci para maximizar la compatibilidad con todos los caracteres especiales del alfabeto en castellano y para que la salida en cualquier navegador sea correcta.
Una vez creada la base de datos podrs acceder a ella desde el men de la izquierda. Despliega el listado Base de datos y selecciona la base de datos que quieras modificar:
Para practicar la creacin bases de datos realiza el Ejercicio Paso a Paso de creacin de Bases de Datos.
241
En este caso en la pantalla principal encontraremos muy poca cosa porque no contiene ninguna tabla por ahora. Para crear una tabla lo nico que debes hacer es escribir su Nombre y especificar su Nmero de campos (luego puedes seguir aadiendo campos). Cuando hayas terminado pulsa el botn Continuar y vers una pantalla como sta:
Aqu debers establecer la configuracin de cada uno de los campos de la tabla. Rpidamente definiremos las propiedades ms frecuentemente utilizadas: Campo: El nombre del campo. Tipo: El tipo del valor del campo: texto (varchar o text), nmero entero (int), decimal (decimal), etc... Longitud/Valores Tamao mximo del campo. Un texto de tamao 15 slo podr tener 15 caracteres. Predeterminado: Un valor predeterminado para el campo, si al crear el registro no se le asigna otro valor.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 242
Cotejamiento: Juego de caracteres que utilizar el campo. Atributos: Dependientes del tipo de dato. Por ejemplo, que un numrico solo sea positivo. Nulo: Si el campo permite valores nulos, o debe rellenarse obligatoriamente. ndice: Indica si el campo est indexado. Puede ser clave principal, valores nicos, etc... A_I: Si el campo es un auto-incremento, que se establecer automticamente al crear nuevos registros. Comentarios: Nos permite agregar comentarios descriptivos del campo o su contenido.
Pulsa el botn Grabar cuando hayas acabado y la tabla se crear. Cada vez que realicemos una modificacin se mostrar un mensaje similar a ste si todo ha ido bien:
Ahora el aspecto de la ventana de la base de datos ser diferente pues mostrar el listado de tablas contenidas con sus propiedades.
men de la izquierda podrs acceder a la vista en detalle de sus campos y propiedades. Entraremos en la pestaa Estructura.
En esta ltima vista puedes hacer clic en la pestaa Examinar para ver el listado de todos los registros.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 243
Utiliza la pestaa Buscar para filtrar el listado por los valores de algn campo.
Para practicar la creacin tablas realiza el Ejercicio Paso a Paso de creacin de Tablas.
En seguida se abrir una ventana desde donde podrs aadir una fila (o registro) a la tabla indicando el valor de cada campo:
En la columna Valor escribe el valor del Tipo de Cada campo y pulsa Continuar cuando hayas acabado.
Otro modo de rellenar una tabla es importando datos que tengamos en un archivo proveniente de otra base de datos o hecho por nosotros mismos. Para ello, tendrs que hacer clic en la pestaa Importar en el mismo men donde encontraste la opcin anterior:
Se abrir una ventana desde donde debers especificar qu archivo quieres importar:
244
Observa que debers indicar la localizacin del archivo que contiene los datos que queremos importar pulsando el botn Seleccionar archivo. Y sobre todo, lo ms importante, el Conjunto de carateres del archivo que utiliza el archivo para que los datos que se introduzcan en la tabla se puedan adaptar de forma correcta y mantener la coherencia del texto. Siempre que se importen datos hay que revisar si los caracteres problemticos (letras acentuadas, las ees, los smbolos de monedas, ...) se han importado correctamente. En el desplegable Formato debes indicar el formato de los datos del archivo, puede ser QSL, CVS, XML, ... Para cada formato hay unas Opciones especficas al formato que debes ajustar a tu caso. Una vez introducidos estos datos bastar con que pulses el botn Continuar y los registros (si no hubo ningn fallo en el archivo) se aadirn automticamente.
Para ello deberemos ir a la vista de la tabla haciendo clic en ella en el men que encontramos en la izquierda de la pgina una vez seleccionada la base de datos.
Esto har que se nos muestre la tabla en la ventana. Si la tabla est vaca, veremos directamente su estructura. Si ya contiene datos, los veremos. En este caso, pulsa sobre la pestaa Estructura. El modo en que podremos modificarla ser muy fcil. Observa la ventana:
Para aadir nuevos campos a la tabla slo tienes que escribir el nmero de campos que vas a crear en el campo Agregar ..... columna(s). Luego selecciona la posicin donde se aadirn, Al final de la tabla, Al comienzo de la tabla o Despus de.. y pulsa el botn Continuar. Se abrir la ventana de definicin de campos que vimos en el apartado anterior y slo debers rellenarla como ya hemos visto.
Modificar campos ya existentes tampoco es muy complicado, slo tendrs que utilizar los botones que se encuentran en la columna accin del campo correspondiente. El botn Cambiar te permitir modificar la configuracin del campo. Podrs cambiar todas las opciones
246
que viste cuando lo creaste. El botn Eliminar correspondan. El botn Primaria borrar el campo y todos los valores almacenados en cada registro que le establece que el campo se marque como clave principal de la tabla.
Finalmente el botn nico establece el campo seleccionado como campo con valor nico, es decir, no puede contener valores repetidos. El botn ndice crea un nuevo ndice en la tabla con el campo seleccionado.
Si queremos realizar la misma accin sobre varios campos a la vez, podemos marcarlos con las casillas de verificacin que se encuentran en el extremo izquierdo y luego pulsar el icono correspondiente a la accin a realizar en la fila donde dice Para los elementos que estn marcados:
Hacer clic en ese elemento har que puedas visualizar el contenido de la tabla. Y al mismo tiempo te dar la posibilidad de editar o eliminar el contenido de cada registro, adems del registro completo.
Desde esta vista podremos ver la informacin almacenada en la tabla. Podemos utilizar los botones de la columna T para modificar los datos. El botn Cambiar te permitir modificar el contenido del registro. Plsalo e irs a la ventana que vimos en el apartado de Insertar datos. El botn Copiar abir una pantalla con los datos del registro para que modifiquemos algn dato y creemos un nuevo registro. El botn Borrar utilices. borrar el registro completo. Esta accin no es reversible as que ten cuidado cuando la
Si quieres borrar varios registros de golpe, marca las casillas de esos registros y pulsa el botn Eliminar de
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 247
En cualquier momento puedes utilizar el botn Aqu encontraremos un botn sern slo para esa base de datos.
para volver a la pantalla principal de phpMyAdmin. a la seccin de Usuarios que es la que nos ocupa en este y los privilegios
Desde aqu podemos crear los distintos usuarios que se conectarn a la base de datos, y darle distintos
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 248
Para crear un nuevo usuario slo tienes que hacer clic en Agregar un nuevo usuario. En la siguiente ventana tendrs que introducir los valores que definirn la cuenta:
En Servidor selecciona Local porque es el nico modo con el que vamos a trabajar en estos momentos. Esto quiere decir que se conecta desde el mismo servidor en el que est la base de datos. El resto puedes configurarlo a tu gusto. Ms abajo encontrars estas opciones:
249
Aqu podrs seleccionar los privilegios del usuario en forma global , las opciones que marques aqu se aplicarn sobre todas las bases de datos del sistema. Puedes especificar tambin un lmite de recursos (conexiones, peticiones, etc...). 0 indica sin lmite. Cuando ests listo pulsa Continuar.
Ahora vers la pantalla con las opciones del nuevo usuario que acabas de crear. Vers que algunas ya las conoces, como los privilegios globales. Lo que nos interesa en este momento son unas opciones que encontrars ms abajo, los privilegios especficos. Es decir, privilegios enfocados a una nica base de datos:
250
Selecciona una base de datos en el desplegable o escribe su nombre en el cuadro de texto. Luego pulsa Continuar.
Selecciona los privilegios que quieras aplicar y pulsa Continuar para finalizar. Vers que en la misma pgina ms abajo tienes una opcin muy parecida a la que acabamos de ver pero actuando nicamente sobre una tabla de la base de datos. Estableciendo los privilegios de este modo recortaramos muchsimo ms la actuacin del usuario sobre la base de datos.
Los privilegios ms comunes son los siguientes: SELECT: permite al usuario realizar una consulta de seleccin para poder leer los datos de una tabla. INSERT: permite al usuario realizar una consulta de creacin de registro para introducir nuevos datos en una tabla. UPDATE: permite al usuario actualizar los valores de una tabla. DELETE: permite al usuario eliminar registros de una tabla.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 251
CREATE: permite al usuario crear tablas en la base de datos. DROP: permite al usuario eliminar una tabla o la base de datos completa.
Para practicar la creacin de privilegios realiza el Ejercicio Paso a Paso de Asignacin de Privilegios.
En este tema no realizaremos ejercicios sobre la creacin de la base de datos del sitio Blog, en temas posteriores veremos qu tablas especficas deberemos crear y las crearemos entonces.
252
o en otra forma de acceder a los mismos comados, desde el men Insertar y la seccin Objetos de datos:
253
Por otro lado tambin usaremos el grupo de paneles de Base de datos, que puedes abrir desde el men Ventana Bases de datos.
1. 2.
254
1. Hemos creado un sitio. 2. Estamos trabajando con un tipo de documento dinmico PHP (Archivo Nuevo... Tipo de pgina: PHP). 3. Hemos instalado un servidor local y configurado el servidor de prueba. El ltimo paso que nos quedara para poder empezar a crear pginas ser definir una conexin para que Dreamweaver establezca los parmetros en los que se realizar la comunicacin entre los archivos PHP y los datos de nuestras tablas. En otras palabras deberemos decirle a Dreamweaver dnde est la base de datos, su nombre y un usuario (con su contrasea) con suficientes privilegios como para poder, al menos, visualizar los datos almacenados.
Para ello nos dirigimos a la pestaa Bases de datos en el panel Aplicacin y hacemos clic sobre el botn . Selecciona la opcin Conexin MySQL para crear la conexin que necesitamos.
Aqu debers colocar los datos correspondientes a tu base de datos. En Nombre de conexin escribiremos un nombre significativo para poder reconocer la conexin ms adelante. En Servidor MySQL deberemos escribir localhost en nuestro caso ya que la base de datos est alojada en nuestro propio equipo. En otro caso habra que introducir la direccin del servidor donde se encuentre almacenada la informacin. Escribe un Nombre de usuario y Contrasea con privilegios suficientes para acceder a la base de datos (al menos parcialmente). Y finalmente selecciona (pulsando el botn Seleccionar) o escribe el nombre de la base de datos a la cual
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 255
Puedes hacer una prueba de conexin pulsando el botn Prueba, as te asegurars de que se puede establecer comunicacin entre Dreamweaver y el servidor correctamente con los datos facilitados. Una vez hayas acabado pulsa Aceptar y la conexin estar lista para utilizarse. Observa que ahora, en el sitio, tienes la carpeta Connections. En ella guardar Dreamweaver las conexiones del sitio. No la renombres, y no olvides copiarla con el resto de archivos si copias o mueves el sitio.
Para practicar la creacin de conexiones realiza el Ejercicio Paso a Paso Crear una conexin a base de datos.
Antes que nada recuerda que los datos dinmicos slo pueden mostrarse en una pgina dinmica. Por lo que si intentas crear un juego de registros en una pgina codificada como HTML el programa no te dejar. As que abre una nueva pgina PHP y empieza a practicar.
Para crear un juego de registros puedes hacer clic en el botn en el panel Insertar, seccin de Datos, o tambin desde el men Insertar, Objetos de datos, Juego de registros:
256
Aqu deberemos especificar qu informacin queremos obtener, es decir qu registros de qu tabla. Utilizar este cuadro de dilogo es muy sencillo, aunque puede complicarse bastante si sacamos el mximo provecho de todas sus opciones. Iremos viendo poco a poco la forma en la que podremos trabajar con los juegos de registros.
El primer paso ser comenzar dando un Nombre significativo al juego, por ejemplo podramos llamarlo articulos_en_stock si lo que va a contener el juego de registros son los datos de una tabla de artculos que tienen existencias. Luego especificaremos la Conexin que deber utilizarse para que sea posible acceder a la informacin. Aqu debers de seleccionar una que hayas creado anteriormente o puedes hacer clic en el botn Definir... para crear una nueva tal y como vimos en el apartado anterior. Lo normal es que te aparezca seleccionada directamente al crear el juego. Una vez seleccionada la conexin deberemos seleccionar la Tabla de la que queremos sacar los registros. Finalmente decidiremos qu Columnas queremos mostrar. Al seleccionar una tabla, sus columnas aparecern en el cuadro de columnas. Selecciona la opcin Todas para que todos los campos de la tabla estn disponibles o marca la opcin Seleccionado: para elegir una o ms de las existentes (utiliza la tecla Ctrl para realizar selecciones mltiples).
Pulsando el botn Prueba en cualquier momento vers un ejemplo de qu datos contendr el juego de registros, es incluso aconsejable que lo veas antes de Aceptar el cuadro de dilogo para asegurarte de que ests sacando la informacin que necesitas.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 257
Para practicar la creacin de juegos de registros realiza el Ejercicio Paso a Paso creacin de un Recordset.
Nota: Puedes crear tantos juegos de registro en una pgina como necesites.
Aadir, por ejemplo, el Titulo del libro a la pgina es tan fcil como arrastrar el elemento desde el panel a su lugar en la pgina. Aunque tambin podemos utilizar la opcin Texto dinmico, agrupada en Datos dinmicos:
258
Como puedes ver en la imagen, debers seleccionar el Campo que quieres mostrar en la pgina, adems Dreamweaver te ofrece la posibilidad de aplicarle un formato determinado, para ello slo debers seleccionarlo de la lista. Por ejemplo, la opcin May./min. - Primera letra en maysculas transformar el texto del registro y lo pondr en minsculas excepto la primera letra que se ver transformada a maysculas. Nota: En la versin empleada para realizar este curso, los formatos May.-min. - Mays. y May.-min. - Mins. estn intercambiados, y funcionan al revs. Tenlo en cuenta, ya que la versin que empleas puede tener este error o estar ya corregido.
En el cuadro de texto Cdigo vers como se modifica el cdigo PHP que se incluir automticamente en la pgina. Pulsa Aceptar cuando hayas acabado y el campo del registro se incluir en el punto donde tengas situado el cursor. Se representar en la vista de Diseo de la siguiente forma:
Esto nos indica que el elemento que se mostrar ser el de la columna Ttulo del recordset listado_libros.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 259
En cualquier momento podrs volver al cuadro de dilogo anterior para modificar alguna de las opciones (por ejemplo, el formato) desde el panel Comportamientos del servidor (Ctrl + F9). En este panel se mostrarn todos los elementos dinmicos que se estn utilizando en la pgina, haz doble clic sobre cualquiera de ellos para modificarlos.
Un modo de vista muy til es la Vista en vivo En este modo, se mostrarn los datos reales en vez del nombre de registro, para que nos hagamos una idea ms real del aspecto de la pgina.
Para practicar estos conceptos realiza el Ejercicio Paso a Paso de Texto dinmico.
21.5. Repeticiones
Hemos aprendido a insertar datos en una pgina, pero de momento slo logramos que se muestre el primer registro del juego. Cmo hacemos para mostrar ms de uno? Muy fcil, utilizaremos las Repeticiones.
Repetir un registro nos permitir visualizar en una misma pgina ms de un registro contenido en el recordset a la vez. Ten en cuenta que podemos repetir cualquier parte que queramos, de hecho la repeticin no afecta a la pgina entera sino a la zona seleccionada.
Para crear una repeticin debers seleccionar la zona a repetir (una fila de tabla, un elemento de lista, un prrafo...) y pulsar el botn Repetir regin Se abrir el siguiente cuadro de dilogo: en la en el panel Insertar Datos.
Aqu debers indicar el nmero de registros que quieras que aparezcan (ms tarde veremos cmo avanzar en
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 260
una lista de registros) o simplemente escoger Todos los registros para que se repita la informacin seleccionada de todos y cada uno de los registros. Como decamos antes, en una pgina pueden existir ms de un juego de registros o recordset, por lo que ser necesario especificar de cul de ellos queremos que se realice la repeticin en el desplegable Juego de registros. Una vez hayamos terminado pulsa el botn Aceptar, y en la vista de Diseo, la seccin seleccionada tomar este aspecto:
Esto provocar el listado de todos los ttulos del recordset listado_libros. Si colocsemos otro campo al lado de este pero sobre l no se aplicase ninguna repeticin se mostrara el listado junto a la informacin de un campo del primer registro.
Para practicar estos conceptos realiza el Ejercicio Paso a Paso de Repeticin de Texto dinmico.
Dreamweaver tambin te da la posibilidad de crear una tabla dinmica automticamente que mostrar todas las columnas del nmero de registros que quieras. Para ello debers hacer clic en la opcin Tabla dinmica que aparece en la barra Datos:
Automticamente se generar una tabla con la configuracin que especifiques en este cuadro de dilogo:
261
De esta forma Dreamweaver colocar los registros en una tabla con las caractersticas que hayamos indicado.
Puedes llegar a este cuadro de dilogo creando un nuevo Recordset o modificando el ya existente, para ello debers hacer doble clic sobre l en el panel Vinculaciones (Ctrl + F10).
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 262
La forma en que se podrn ordenar los registros del recordset ser la siguiente, selecciona el campo por el que quieres ordenar los registros y el modo en que quieres que lo haga. Si el campo es de tipo numrico, se ordenar de menor a mayor (Ascendente) o de mayor a menor (Descendente). Si el campo es de tipo alfanumrico se ordenar alfabticamente.
Para practicar este concepto realiza el Ejercicio Paso a Paso de Ordenacin de un Recordset.
En este caso deberemos en Filtro: seleccionar el campo sobre el cual realizaremos el filtro. Seleccionar en el cuadro de lista que contiene un = si queremos que el campo sea igual, distinto, mayor, menor o que empiece o acabe con alguna cadena determinada.
En el desplegable que encontrars ms abajo debers seleccionar Valor introducido para poder especificar en el cuadro de la derecha (en la imagen 0) el valor con el que comparar.
263
En apartados posteriores veremos el significado de escoger en el desplegable otra opcin que no sea Valor introducido.
Una vez hayas terminado, pulsa el botn Aceptar y el recordset contendr nicamente los registros que cumplan la condicin indicada en el cuadro de dilogo. Nota: recuerda que puedes utilizar el botn Prueba para previsualizar el efecto del filtro sobre la tabla seleccionada.
Para practicar el filtrado de registros realiza el Ejercicio Paso a Paso de Filtrado de Registros.
264
Aqu slo tendrs que seleccionar el Juego de registros sobre el cual quieres que se establezca la paginacin y pulsar Aceptar. En la vista de Diseo vers que aparece algo como esto:
Si utilizas el servidor de prueba (pulsando F12) podrs ver que pulsando el enlace creado avanzas por el juego de registros. La pgina permanecer exactamente igual a cmo la diseaste, pero el contenido ser dinmico y variar segn la pgina que ests mostrando.
Nota: Recuerda que puedes aplicar estilos sobre estos enlaces igual que podamos hacerlos sobre los items que mostramos para los datos de la tabla.
Para practicar el uso de la paginacin realiza el Ejercicio Paso a Paso de Paginacin de Registros.
Una opcin muy til que presenta Dreamweaver son los Recuentos de registros:
Si seleccionas alguna de las tres ltimas opciones se mostrar el siguiente cuadro de dilogo:
265
Selecciona aqu el Juego de registros sobre el que quieras realizar el recuento y pulsa Aceptar. Dependiendo de la opcin que escojas se aadir un texto u otro a la pgina. Registro inicial: Visualiza el nmero dentro del listado total de registros, del primer elemento de la lista que se est mostrando en la pgina actual. Registro final : Visualiza el nmero dentro del listado total de registros del ltimo elemento de la lista que se est mostrando en la pgina actual. Total de registros: Visualiza el nmero total de registros del juego (la suma de todos los registros de todas las pginas).
podremos insertar un
literal que mostrar el recuento exacto de los registros que se estn visualizando, se aadir una lnea como sta:
Como puedes ver, esta opcin es una combinacin de las tres anteriores que ilustra perfectamente el funcionamiento del recuento de registros.
Para practicar el uso del recuento realiza el Ejercicio Paso a Paso de Recuento de Registros.
no existe una pgina anterior a la que podamos ir? Vamos a utilizar las opciones de Mostrar regin para realizar algunos cambios sobre los elementos de la pgina. En nuestro caso vamos a seleccionar Mostrar si no es la primera pgina:
Estas opciones en realidad actan sobre cualquier parte de la pgina, as que incluso podrs hacer desaparecer una tabla o un prrafo si no se cumplen los criterios de la opcin. Cuando hagas clic en alguna de ellas vers un cuadro de dilogo como ste:
Aqu debers especificar el Juego de registros sobre el que quieres que se efecte la accin y luego Aceptar. En la vista de Diseo se mostrar la opcin de una forma parecida a sta:
Para practicar ocultar y mostrar regiones realiza el Ejercicio Paso a Paso de Ocultar/Mostrar Regiones.
Combinando la tcnica de ocultacin y muestra de registros con las de recuento encontramos la opcin Barra de navegacin de juego de registros:
267
Pulsando esta opcin se incluir en la pgina una barra de navegacin para desplazarse por las pginas del juego de registros. Se abrir el siguiente cuadro de dilogo:
Desde aqu podrs seleccionar el Juego de registros sobre el que quieres que acte la barra de navegacin y seleccionar uno de los dos modos: Texto o Imgenes. Aqu tienes un ejemplo de cmo quedara cada una de las opciones, en la primera lnea tenemos una barra de navegacin con la opcin Texto y en la segunda lnea una barra de navegacin con la opcin Imgenes:
Una variable le da informacin a una pgina PHP, y el archivo puede actuar de acorde con el valor de esa variable. En el ejemplo anterior deberamos abrir la pgina PHP indicndole que queremos que muestre el articulo X del mes Y.
Primero deberemos aprender cmo pasar las variables a una pgina PHP. En una direccin de Internet (o URL) podemos encontrar cadenas como sta: http://www.misitio.com/carpeta/archivo.php?nombre=valor A que lo has visto alguna vez? Muy bien, pues en este ejemplo le estamos diciendo al archivo archivo.php que se ejecute, pero adems le estamos indicando que queremos que tome en cuenta la variable nombre con el valor valor. Incluso si miras las pginas de la librera, puedes observar que al paginar se envan como variables la pgina que se ha de mostrar.
En un ejemplo sencillo podramos indicar mediante un enlace que queremos que se muestre el detalle de un artculo con determinado nmero de identificacin de la siguiente forma: detalle.php?id=99 De esta forma estaremos abriendo la pgina detalle.php pasando en la variable id el valor 99 para que la pgina muestre el detalle del artculo 99. Cmo podemos desde Dreamweaver crear enlaces con paso de variables? Si el valor del parmetro es fijo, se puede escribir directamente en la referencia del vnculo, por ejemplo en el enlace a la pgina detalle.php pondramos en el cuadro Vnculo del panel Propiedades detalle.php?id=99. Pero tambin podemos utilizar textos dinmicos para indicar el valor del parmetro a pasar. En este caso en vez de escribir 99 deberamos indicar que el valor lo tiene que sacar del texto dinmico de la siguiente manera: Nos posicionamos sobre el enlace a la pgina detalle.php y desde la vista Cdigo arrastramos el campo dinmico desde el panel Vinculaciones (Ctrl + F10) hasta el vnculo para formar la URL del enlace: detalle.php?id=<?php echo $row_libros_usados['Id']; ?> El cdigo quedara de la siguiente forma:
Cuando pases los parmetros ayudndote de un formulario, no olvides fijarte en el mtodo de envo del formulario:
269
Al utilizar parmetros recibidos de un formulario, lo usaremos de la siguiente manera: Si el mtodo del formularioes GET, los recibiremos como Parmetro URL. Si el mtodo del formularioes POST, los recibiremos como Variable de formulario. Como norma general, en el curso emplearemos GET como mtodo de envo, para tratarlo igual que los enlaces con parmetros.
Para practicar la creacin de enlaces con parmetros realiza el Ejercicio Paso a Paso de Enlaces con Parmetros.
Cmo podemos desde Dreamweaver utilizar las variables recibidas? Cuando se abre una pgina pasndole una serie de parmetros, esta pgina puede utilizar los valores de los parmetros para lo que le haga falta. En el ejemplo anterior (en la teora) abrimos la pgina detalle.php pasndole un valor en la variable Id. Pues esta pgina puede ahora utilizar este valor para visualizar nicamente los registros con ese Id en vez de visualizar todos los registros. Para ello deberemos modificar el Juego de registros de la pgina. Hacemos doble clic sobre l en el panel Comportamientos del servidor (Ctrl + F9). Se abrir el cuadro de dilogo Juego de registros:
270
Aqu indicaremos que el recordset filtre los registros cuyo Id sea igual al valor recibido en el parmetro Id. Para ello deberemos seleccionar en el desplegable de filtro la opcin Parmetro URL para que el archivo PHP tome el valor de la variable de la URL que abre la pgina. En la caja de texto de al lado debers especificar el nombre que tiene la variable en la ruta URL.
Para practicar el filtro con parmetros realiza el Ejercicio Paso a Paso de Filtro con Parmetros.
Hay muchos usos para los parmetros. Imagina que quieres mostrar mediante un enlace los libros que cuesten ms de 10 , slo tendras que pasarle una variable precio_minimo a la pgina que genera el listado de libros y establecer que el juego de registros filtre los resultados para mostrar slo aquellos que tengan un valor en el campo Precio mayor al especificado en el parmetro precio_minimo.
Para ello utilizamos la opcin Juego de pginas Maestro-Detalle Al seleccionarla vers el siguiente cuadro de dilogo:
En Juego de registros: seleccionamos el juego de registros que se visualizarn de la tabla Maestro. En Campos de pgina Maestro: indicamos los campos del maestro que queremos que se muestren en la pgina. En Vincular con Detalle desde: indicaremos el campo del Maestro que contendr el enlace a la pgina de detalle. En Pasar clave exclusiva: indicaremos el campo que se utiliza para relacionar los registros. Luego en Mostrar: tendremos que establecer el nmero de registros que queremos que se muestren en la pgina del Maestro. En la seccin inferior deberemos introducir la informacin para crear el Detalle. Establece un Nombre de pgina Detalle (si no existe la crear) y en Campos de pgina Detalle: escogeremos los campos a mostrar. Pulsamos el botn Aceptar y Dreamweaver crear automticamente las pginas requeridas.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 272
Luego podrs modificar su aspecto para que se ajusten al sitio que ests diseando.
Su uso es bastante sencillo, solo tienes que indicar la Conexin y los datos se rellenarn automticamente. Selecciona la Tabla donde quieras insertar el nuevo registro. Tambin puedes indicar dnde quieres que se redirija la pgina una vez se haya insertado el registro. Luego seleccionaremos los campos que debern aparecer en el formulario. Recuerda que todos aquellos que necesiten adoptar un valor debern aparecer en l, si no el formulario fallar por no introducir valores en campos que no aceptan valores nulos. A continuacin seleccionaremos cada campo y para cada uno indicaremos cmo ser presentado en el formulario.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 273
En Etiqueta escribiremos la etiqueta que queremos para el campo. En Mostrar como: indicaremos en qu tipo de elemento de formulario estar representado el campo, una caja de texto, un botn de opcin, un desplegable... Tambin indica cmo Enviar la informacin para que se guarde en la tabla, normalmente ser del mismo tipo que definiste cuando creaste la tabla. Puedes establecer un Valor predeterminado para el campo seleccionndolo en el generador automtico. Podrs asignarle un valor existente en la pgina. Esta opcin te ser muy til si establecemos alguno de los campos como Campo oculto en Mostrar como. Pulsa Aceptar y el formulario se crear automticamente.
Para practicar la insercin de registros realiza el Ejercicio Paso a Paso de Insercin de Registros.
Realmente no bastara con este formulario. Deberamos de comprobar que las variables son como las esperamos. Por ejemplo, en el caso de la librera, el nmero de tarjeta slo es vlido si no est vaco, si slo lo forman nmeros y tiene 16 caracteres. Todas estas comprobaciones, se haran por PHP antes de insertar el registro. Esto no lo veremos en este curso, ya que su objetivo no es programar directamente.
274
El modo en el que rellenaremos los datos es el siguiente: Seleccionaremos, primero, la Conexin con la que trabajaremos. Luego elegiremos la Tabla a actualizar que ser de donde saquemos los datos que luego modificaremos. Como deberemos elegir registro de entre toda la tabla para modificar, deberemos indicar cul. Para ello deberemos seleccionar un campo (en Columna de clave exclusiva) y un juego de registros (en Seleccionar registro de ) para establecer el registro que va a mostrar la pgina. De esta forma vincularemos el campo del recordset de la pgina y se mostrar la informacin que coincida con l.
El resto funcionara igual que en el cuadro de dilogo anterior. Seleccionando los campos que se van a mostrar, su tipo de elemento de formulario y la forma en la que se va a enviar. En la caja de texto Valor predeterminado encontrars la cadena que mostrar el contenido del campo en el registro en cuestin. No lo modifiques si quieres que muestre la informacin almacenada. Slo cmbialo si quieres que aparezca un valor fijo en vez del valor contenido en el registro, por ejemplo, ninguno, sin precio, etc... e incluso nada. Finalmente pulsa Aceptar y el formulario se crear.
.
275
Para utilizar el asistente de Dreamweaver para crear pginas de eliminacin de registros debers crear una pgina especial que se dedique nica y exclusivamente a eliminar el registro. Para ello tendremos una primera pgina donde el usuario seleccionar el registro a borrar y dar la orden de borrado; esta pgina enlazar con la pgina de borrado pasndole el identificativo del registro a borrar, y la pgina de borrado mostrar los datos del registro a borrar y pedir confirmacin al usuario. Con lo cual deberemos seguir este guin: La primera pgina deber tener un enlace a la pgina de borrado de la forma: borrar.php?id=99 Donde borrar.php ser la pgina de borrado, id el nombre del parmetro que contiene el valor de clave del registro a borrar, y 99 es el valor de la clave del registro a borrar (en este caso queremos borrar el registro cuya clave sea 99). En la pgina borrar.php debers: 1. Crear un recordset que muestre la informacin del elemento cuya clave se ha pasado como parmetro para que pueda ser verificado. Para ello debers utilizar un juego de registros filtrado por el campo clave principal y el valor recibido como parmetro. 2. En la misma pgina aadiremos un formulario con un campo oculto y un botn de tipo Submit que permita al usuario confirmar el borrado y reenve a la misma pgina de borrado. Al campo oculto le deberemos asociar el campo clave principal del registro que se muestra, puedes hacerlo pulsando el botn que aparece al lado de su propiedad Valor:
Debers recordar el nombre que le das a este control de formulario porque es el que utilizaremos para borrar el registro. 3. Luego podremos incluir el cdigo para borrar el registro. Haz clic en el botn Eliminar Registro dilogo: en la barra de Datos, y rellena el siguiente cuadro de
276
La primera opcin debers dejarla en Valor de clave principal. Puedes utilizar el resto de opciones para crear otros tipos de eliminaciones ms complejas, aunque este mtodo sea el ms utilizado. Luego selecciona la Conexin, la Tabla donde se encuentra el registro a borrar y su Columna de clave principal. Por ltimo le deberemos indicar cmo debe acceder al valor que le dar el valor de la clave principal del registro que tiene que eliminar, indica que lo hacemos por Parmetro URL y escribe el nombre del campo oculto del formulario que acabas de crear (es el que le pasa el valor). Finalmente puedes elegir a qu pgina redireccionar cuando se realice el borrado. Pulsa Aceptar y habrs acabado.
277
En este cuadro de dilogo puedes crear juegos de registros mucho ms complejos. El principio del cuadro es igual que la versin simple, debers introducir un Nombre para el juego de registros y asignarle una Conexin. Luego deberemos introducir una sentencia SQL que indicar qu registros se van a mostrar. Mediante las opciones y botones que veremos ahora podremos crear sentencias bastante completas, pero si quieres aprender ms sobre este lenguaje puedes visitar el curso de SQL que se encuentra en nuestra pgina web. De momento explicaremos las opciones para que puedas manejarte mejor con el programa. Detrs de la palabra SELECT se escriben las columnas que queremos que aparezcan en el resultado, por eso para aadir ms campos a la lista slo tienes que seleccionar el campo de la lista Elementos de base de datos, y pulsar el botn SELECT, el campo se aadir a la sentencia y por lo tanto aparecer en el recordset. En la clusula FROM se especifica el nombre de la tabla o tablas desde donde se saca la informacin. En realidad SQL nos permite cruzar distintas tablas, relacionarlas, etc... La clusula WHERE sirve para incluir condiciones, para filtrar los registros. El botn WHERE te ayudar a establecer esas condiciones, una vez hayas aadido el campo con este botn en el cuadro de texto SQL debers completar la condicin utilizando los operadores de comparacin adecuados como <, >, !=. Utiliza la zona de Variables: para insertar parmetros que podrs recibir mediante el URL, para ello haz clic en el botn .
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 278
Aqu debers establecer el Nombre de la variable, su Valor predeterminado y el Valor de tiempo de ejecucin. Ten en cuenta que para asociar estas variables a parmetros pasados por URL debers escribirlas en el campo Valor de tiempo de ejecucin de la siguiente forma: $_GET['nombre_parametro'] Donde nombre_parametro es el nombre del parmetro incluido en el URL.
Finalmente puedes utilizar el botn ORDER BY para crear ordenaciones por los campos seleccionados en el listado de la izquierda. En la imagen ms arriba puedes encontrar un ejemplo de una sentencia SQL que te podr aclarar estos conceptos. Esta sentencia obtiene el autor, ttulo y editorial de la tabla Libros filtrando los registros cuyo id sea igual al que se haya recibido como parmetro de URL, y si hubiesen varios registros los ordenara alfabticamente por autor y dentro de cada autor por ttulo.
Para practicar la creacin de juegos de registros avanzados realiza el Ejercicio Paso a Paso de Utilizar sentencia SQL.
En el tema siguiente seguiremos practicando todos los conceptos vistos en este tema completando el sitio de Blog.
279
Todo blog deber tener, del mismo modo, una parte privada desde donde el usuario dueo de la bitcora pueda administrar y gestionar los contenidos del blog. Desde el panel de administracin , que debe estar protegido para que slo tengan acceso aquellas personas con privilegios suficientes, podremos aadir, modificar o eliminar entradas, comentarios y categoras. De hecho, la funcin de esta parte privada es que puedas actualizar el contenido sin necesidad de tener que recurrir a la interfaz de phpMyAdmin para insertar nuevos registros como vimos en el tema anterior.
El objetivo de este tema no es entrar en profundidad en cada uno de los detalles, porque podramos no terminar nunca. Explicaremos el modo en el que deberemos actuar para alcanzar una estructura cerrada que cumpla los requisitos mnimos que un blog necesita.
280
El aspecto y funcionalidades finales estn en tus manos, puedes aadir tantas cosas como quieras. As que vamos a empezar...
El punto en cuestin en este caso es el hecho de que en la forma ms simplificada las tres primeras tablas se encuentran relacionadas del siguiente modo:
Como puedes ver en la imagen en la tabla entradas existe un campo que apunta al ID de categoras, y del mismo modo en la tabla comentarios tenemos que tener un campo que apunte a la entrada a la que pertenece dicho comentario.
El problema nos surge, por ejemplo, cuando insertemos una pgina que nos ayude a eliminar entradas. Qu hacemos con los comentarios asociados a ella? Deberemos crear una pgina ms para que cuando se borre una entrada tambin lo hagan sus comentarios relacionados? Y repetirlo para las categoras y sus entradas? No va a hacer falta.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 281
Podremos utilizar una caracterstica de la definicin de la base de datos que existe en MySQL y en otros sistemas gestores de bases de datos, el borrado y actualizacin en cascada. Para poder utilizar esta caracterstica, debemos de utilizar InnoDB como Motor de almacenamiento. Esta opcin la encontramos al definir los campos de la tabla, y por defecto est seleccionado MyISAM. Desde el entorno de phpMyAdmin podremos definir esta caracterstica en la vista de relaciones. Podrs encontrar el enlace a esta vista desde la vista de detalle de cualquier tabla que emplee InnoDB como motor de almacenamiento:
Desde aqu podremos especificar las relaciones que tiene la tabla con las dems tablas de la base de datos y qu hacer cuando un elemento relacionado se borra o modifica. Fjate que en el ejemplo solamente los campos Id e Id_Categora son susceptibles de esta opcin. Eso es debido a que hemos definido ambos como ndices, el primero por ser clave primaria y el segundo porque as lo indicamos en el momento de su creacin utilizando el botn ndice o seleccionado la opcin Index del desplegable ndice.
El modo en el que deberemos definir nuestro objetivo es el siguiente. A un campo indexado podemos
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 282
asignarle una relacin con otro campo indexado de otra tabla (en el ejemplo Id_Categoria est relacionado con el campo Id de la tabla categorias). Deberemos decirle a phpMyAdmin qu hacer cuando se borre un elemento en la tabla relacionada categorias (ON DELETE) o cuando se modifique el valor de clave de un elemento (ON UPDATE). La opcin que nos interesa en este caso es CASCADE que acta aplicando los cambios en cascada. Esto es, si borramos un elemento en la tabla categorias, se borrarn todos los registros en la tabla entradas que tengan el mismo ID en el campo Id_Categoria. En el caso de que modificsemos el ID en la tabla categorias tambin se actualizara en todos los registros de entradas con el mismo Id_Categoria si tenemos indicado ON UPDATE CASCADE. Piensa que esa tabla podra estar relacionada con otra. Por tanto, al actualizar o borrar esta en cascada, pasara lo mismo con la tabla relacionada, y as sucesivamente.
Para practicar la creacin de ndices y relaciones realiza el Ejercicio Paso a Paso Estructura de Datos de un Blog.
En principio, la pgina ms importante ser el ndice. All deberemos mostrar un listado de un nmero determinado de entradas. Esto, como ya hemos visto, es muy fcil de conseguir, aunque ahora es posible que necesitemos mostrar mucha ms informacin. Veamos un ejemplo de entrada:
283
Como puedes ver, incluimos el ttulo, texto y fecha de la entrada. Eso es muy sencillo porque pertenece todo a una misma tabla. Pero deberemos incluir tambin un recuento de los comentarios asociados a esa entrada y el nombre de la categora a la que pertenece. Cmo lograremos esto? Tendremos que utilizar sentencias de SQL avanzadas. En los ejercicios paso a paso encontrars la sentencia que te servir para este ejemplo en particular. Podrs variarla un poco en funcin de tus necesidades, pero te volvemos a repetir que si quieres crear juegos de registros ms complejos debers aprender SQL, llegados a este punto no te ser muy complicado.
Tambin ser necesaria una pgina que muestre las entradas filtradas por categora . Ten en cuenta que nuestro visitante querr seguramente ver aquellas entradas pertenecientes a un tema en particular. De hecho para eso hemos creado el men de salto desplegable y los enlaces en cada una de las entradas. Esta pgina deber ser prcticamente igual que el ndice, por lo que la sentencia SQL ser prcticamente la misma.
Finalmente deberemos incluir una pgina que muestre los comentarios de cada entrada en particular y que a su vez permita aadir nuevos. Esta tarea no es muy complicada porque simplemente deberemos pasarle un parmetro que indique el ID de la entrada y mostrar los comentarios asociados a ella. Puedes utilizar el asistente Insertar registros para crear el formulario de entrada de comentarios.
284
Para practicar la creacin de la interfaz pblica realiza el Ejercicio Paso a Paso de Interfaz pblica.
En nuestro caso hemos decidido crear el men ms sencillo posible, incluye dos grupos: la creacin de nuevos elementos y la modificacin (o borrado) de los ya existentes.
Lo ms sencillo de realizar ser crear las dos pginas que nos ayudarn a crear registros.
Crear un formulario de nueva categora slo nos obligara a insertar un nuevo nombre de categora para crear un nuevo registro. El campo Id de la tabla, al ser autonumrico, no deber aparecer en el formulario porque se rellenar automticamente.
En principio los campos de entrada sern tal cual los que nos ofrece el asistente Insertar registro. Deberemos tener cuidado en que el campo Fecha: se enve como de tipo fecha. La dificultad la encontraremos en el desplegable Categora:.
Deberemos cargar un recordset a parte donde sacaremos el listado de categoras con sus Id correspondientes.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 286
Deberemos editar el campo desplegable de forma que el valor que se guarde sea el valor del Id, mientras muestra el nombre de la categora.
Esta parte deberemos planificarla adecuadamente para evitar crear pginas redundantes. Lo ms sencillo es crear una pgina que muestre un listado de los elementos que se encuentran en la base de datos con enlaces creados para eliminar o modificar el registro que prefieras:
De esta forma el trabajo se reducir a crear un listado completo de los registros de las tablas y crear enlaces pasando como parmetro el ID del registro. Este enlace ir dirigido a la pgina con la funcin de borrar o modificar (segn cul elijas) donde se recoger el parmetro de ID que utilizaremos para filtrar el recordset.
Quizs la pgina ms complicada, debido a su extensin, sea la que deba mostrar el listado de comentarios. Para ella, la forma ms prctica sera poder localizar la entrada donde se encuentra el comentario y luego mostrar el listado completo de los comentarios de esa entrada en concreto. Puedes crear dos pginas para ello, aunque si lo resumimos en una nica, la estructura del sitio se beneficiar al quedar ms claro qu hace cada pgina.
Nota: Puedes incluir campos de bsqueda como hicimos en el ejercicio de Librera del tema anterior.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 287
Es aconsejable que muestres el contenido del elemento para que antes de modificarlo tengas una vista total de l y veas mejor qu quieres hacer en l.
El resto es sencillo, utiliza el asistente Actualizar registro y seguro que no encontrars muchas ms complicaciones. De nuevo en el caso de la pgina de modificacin de entrada deberemos tener especial cuidado en enviar la fecha como tal y de mostrar los nombres de categora en un desplegable:
En este caso es casi indispensable que muestres el contenido del registro junto con un botn de Eliminar. De esta forma le estaremos pidiendo confirmacin al usuario y nos aseguraremos de que el registro que estamos a punto de borrar es el que hay que borrar. Ningn programa debera de tener un botn que borre registros sin pedir confirmacin al usuario.
Nota: Sigue los pasos que explicamos en el tema anterior y no tendrs ningn problema.
288
Naturalmente, queremos que la parte privada no sea accesible por cualquiera. nicamente nosotros y aquellas personas autorizadas debern poder ver las pginas de administracin que hemos creado. Es por eso que en el apartado de Estructura de datos creamos la tabla usuarios.
En el panel Insertar Datos encontramos la opcin Autenticacin de usuarios que an no hemos utilizado:
Podemos utilizar estas pginas para crear niveles de seguridad dentro de nuestro sitio. Restringiendo la visualizacin de ciertas pginas a usuarios que almacenaremos en nuestra base de datos y que necesitarn introducir una contrasea para verificar su identidad.
El primer paso ser crear una pgina de acceso en la que requeriremos que el usuario introduzca su nombre y contrasea para que podamos validarla. Para ello deberemos crear un formulario en el que colocaremos dos campos, uno para el nombre y otro para la contrasea. Crea un botn que active el formulario y selecciona la opcin Conectar a usuario en el desplegable de la imagen. Se abrir este cuadro de dilogo:
289
Aqu deberemos establecer la configuracin de conexin a la zona privada. Deberemos indicar en la opcin Obtener entrada de formulario el nombre que tiene el formulario que hemos creado. En el Campo Nombre de usuario deberemos indicar cul de las dos cajas de texto del formulario contendr el Nombre de usuario. En el Campo Contrasea seleccionaremos la caja de texto que contendr la Contrasea.
Luego estableceremos las opciones para la comunicacin con la base de datos. Deberemos indicar la Conexin y Tabla que vamos a utilizar para validar la entrada del usuario. En Columna Nombre de usuario indica cul es el nombre del campo de la tabla que guarda los nombres de usuario. En Columna Contrasea selecciona el campo que guarda en la tabla las contraseas.
En la siguiente seccin debers establecer a qu pgina redirigirs si el usuario y contrasea son correctos rellenando el campo Si la conexin es correcta, ir a:. En Si falla la conexin, ir a escribirs la URL de la pgina a la que se deber redirigir si la entrada fue
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 290
incorrecta. Sera por ejemplo una pgina de error. Marca la casilla Ir a URL anterior (si existe) si en ambos casos la redireccin es a la misma pgina.
Finalmente podrs escoger entre utilizar diferentes niveles de acceso o no. Para ello debers seleccionar una de las dos opciones en el cuadro Restringir acceso por:. Ten en cuenta que si decides crear varios niveles debers aadir un campo a la tabla para que almacene el nivel de cada usuario. Este campo ser el que indicaremos en el desplegable Obtener nivel de:.
Una vez hayas rellenado todos los datos, pulsa Aceptar y se aadir el cdigo necesario a la pgina.
Nota: El mtodo que utiliza Dreamweaver para recordar la entrada del usuario hasta su desconexin utiliza cookies. As que si tu navegador o el navegador del usuario las tiene deshabilitadas est cdigo no podr realizar su funcin. Lo normal en el tratamiento de usuarios es emplear variables de sesin del servidor.
El siguiente paso ser proteger cada una de las pginas que quieras que permanezcan bajo acceso privado. Para ello slo tendrs que abrir la pgina que quieras restringir y seleccionar la opcin Restringir acceso a pgina .
Aqu debers indicar si ests creando la restriccin respecto a un mismo nivel o por el contrario ests usando diferentes niveles de acceso. Selecciona la opcin que escogiste en el cuadro de dilogo de Conectar usuario , en el caso de que hubiesen niveles, especifica el nivel que le quieres asignar a la pgina.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 291
Debers escribir una URL en Si se deniega el acceso, ir a: para que los usuarios que intenten acceder a esta pgina sin haber hecho login sean redirigidos a otra ventana. Normalmente ser a la ventana de inicio de sesin.
Tambin debers incorporar algn enlace para que el usuario pueda desconectarse y salga del rea privada (cerrar sesin). Para ello tienes dos opciones, al seleccionar la opcin Desconectar Usuario de dilogo: vers el siguiente cuadro
Puedes crear un enlace para que el usuario pulse sobre l para desconectarse. Para ello debers seleccionar la opcin Vnculo en el que se ha hecho clic y seleccionar un vnculo existente en la pgina o seleccionar la opcin Crear nuevo vnculo: "Desconectar" para que se aada automticamente el vnculo.
O tambin puedes hacer que la pgina sobre la que ests aplicando la opcin sea una pgina de desconexin. De esta manera cuando la visites te desconectar automticamente. Utiliza la opcin Cargarse la pgina si ests en una pgina de desconexin. Necesitars crear un enlace a esta pgina y que un usuario lo siga para desconectarse.
Finalmente en el campo Al terminar, ir a: debers introducir una URL a la cual se redirigir al usuario una vez se haya desconectado. Normalmente una URL no restringida, como el index.
Puedes crear una pgina para dar de alta nuevos usuarios para hacer crecer el nmero de escritores en tu blog.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 292
Para ello necesitars introducir un formulario de insercin de registros que cree un nuevo registro en la tabla usuarios. Puedes utilizar la opcin Comprobar nuevo nombre de usuario para que se chequee antes de guardar si el usuario ya existe con ese nombre. Lo debers indicar en este cuadro de dilogo:
Selecciona el campo del formulario que corresponde con el nombre de usuario. Y elige una URL a la que redirigir si el nombre ya est ocupado.
Ten en cuenta que si creas diferentes niveles de acceso puedes tener varios escritores que slo puedan crear nuevas entradas, mientras que el acceso al resto de pginas de administracin puede estar permitido para una nica persona.
293
<biblioteca> <libro> <titulo>Las 64 casillas</titulo> <autor>Pablo Alvarez Castano</autor> <editorial>Paidotribo Editorial</editorial> <isbn>848019815X</isbn> </libro> <libro> <titulo>Periodismo iconogrfico</titulo> <autor>Gonzalo Peltze</autor> <editorial>EDICIONES RIALP SA</editorial> <isbn>8432128082</isbn> </libro> <libro> <titulo>Educacin personalizada</titulo> <autor>Vctor Garca Hoz</autor> <editorial>EDICIONES RIALP SA</editorial> <isbn>8432122882</isbn> </libro> <libro> <titulo>Nuestro universo</titulo> <autor>John R Gribbin</autor> <editorial>Ediciones B</editorial> <isbn>8466605657</isbn> </libro> </biblioteca>
En este ejemplo hemos creado un archivo en la que est almacenada la informacin de nuestra biblioteca. Observa cmo las etiquetas que conforman el archivo no son ms que identificadores que hemos creado para este fin.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 294
La finalidad de XML y RSS consiste en poder compartir informacin con el resto del mundo de una forma rpida, sencilla y adaptable. La organizacin de este tipo de informacin suele ser muy parecida de un sitio a otro. Utilizaremos Dreamweaver para incluir fcilmente contenido de un sitio externo en nuestras pginas.
Es necesario que el servidor de pruebas soporte el manejo de este tipo de archivos para poder incluir este tipo de informacin en nuestras pginas. Para eso debemos de activar una de sus extensiones (php_xls) Para aprender a configurar el servidor de pruebas realiza el Ejercicio Paso a Paso de Preparando el Servidor de Pruebas.
Puedes elegir entre crear un fragmento de archivo (que incluiremos ms tarde en otro), o directamente crear
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 295
una pgina completa que contenga informacin sobre un archivo externo. Normalmente nos ser ms til crear fragmentos, pues luego son ms fciles de adaptar al resto de las pginas.
Aqu deberemos indicar la fuente XML de la que queramos sacar los datos. Como ves en la imagen, tienes dos posibilidades. Una de ellas es tomar el archivo XML o RSS directamente del mismo sitio donde se encuentra la pgina. La segunda opcin toma el archivo de una URL en Internet. En este caso debers asegurarte de cuando en cuando que sigue vigente y no ha sido cambiado de lugar.
Cuando aceptemos el cuadro de dilogo vers que en el panel Vinculaciones (Ctrl + F10) aparece la estructura del archivo:
296
Habitualmente los archivos liberados por los diferentes sitios en Internet suelen tener una estructura muy similar, por lo que siempre tienen al principio del canal (as es como llaman al archivo liberado, channel en ingls) una breve descripcin de su sitio. En este caso puedes ver como pende del elemento channel un ttulo (title), un enlace (link), una descripcin y el lenguaje y a continuacin el contenido propiamente dicho bajo el elemento item. Nuestra forma de actuar una vez hayamos declarado la fuente XML y seamos capaces de ver su contenido en el panel Vinculaciones ser muy parecida a como lo hacamos cuando crebamos un juego de registros de una base de datos. Simplemente tendremos que arrastrar el elemento que queremos que se muestre a la pgina y se visualizar. Recuerda que para acceder a una visualizacin de la pgina puedes pulsar la tecla F12 o usar la Vista en vivo.
Para comenzar a importar datos desde un archivo externo realiza el Ejercicio Paso a Paso de Importar datos RSS.
Para crear enlaces, lo haremos como con los juegos de registros. Podemos pulsar el icono que aparece junto al campo Vnculo en el panel Propiedades y seleccionar Fuentes de datos en el cuadro de dilogo Seleccionar archivo:
297
O podemos arrastrar los valores directamente sobre el cdigo fuente de la pgina, desde el panel Vinculaciones. Para practicar realiza el Ejercicio Paso a Paso de Enlaces con elementos.
Cuando estemos en una pgina o fragmento XSLT , el panel Insertar nos permitir utilizar las herramientas para trabajar con XSLT:
El primer botn nos permitir aadir Texto dinmico , esta opcin acta del mismo modo que si arrastramos el elemento desde el panel Vinculaciones a la pgina. Luego encontraremos elementos de bucle o repeticin y condicionales.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 298
Aqu debers seleccionar el elemento sobre el cual quieres que se produzca la repeticin. En el caso del ejemplo que estamos siguiendo en estas imgenes deberemos seleccionar item, pues querremos que se repitan todos los elementos title y description que se encuentren en item.
Tambin podemos insertar filtros haciendo clic en la flecha que acompaa al texto Construir filtro:
299
En la imagen podemos ver que el filtro se realiza conforme al item, donde el ttulo debe ser distinto (!=) a "Wikipedia, la enciclopedia libre". Qu significa esto? Estamos repitiendo una regin y obviando aquel item que posea un ttulo determinado. Piensa que podemos querer evitar los items de una categora, un rango de precios, el idioma, etc... Tambin sera posible filtrar para que slo se muestren un nmero determinado de items. Para ello utilizaremos position() que recupera la posicin del elemento dentro del listado:
En este caso el filtro que hemos aadido hace que slo se muestren los 5 primeros elementos. Sencillo, verdad?
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 300
Para practicar estos conceptos realiza el Ejercicio Paso a Paso de Repeticin de elementos.
Slo es posible ordenar elementos que se encuentren dentro de una regin repetida. Por lo que deberemos buscar en la vista de Cdigo la zona que se encarga de la repeticin: <xsl:for-each select="rss/channel/item[position() <= 5]"> <p>Ttulo: <xsl:value-of select="title"/></p> <p>Descripcin: <xsl:value-of select="description" disable-output-escaping="yes"/></p> <hr /> </xsl:for-each> Ahora sencillamente deberemos aadir una nueva lnea debajo de la que se encarga de la repeticin ( xsl:for-each). De esta forma indicaremos que este bloque se debe ordenar: <xsl:for-each select="rss/channel/item[position() <= 5]"> <xsl:sort select="title" /> <p>Ttulo: <xsl:value-of select="title"/></p> <p>Descripcin: <xsl:value-of select="description" disable-output-escaping="yes"/></p> <hr /> </xsl:for-each> En el atributo select deberemos indicar el nombre del campo sobre el cual se realizar la ordenacin. Luego podemos aadir otros atributos como: order: que puede tomar los valores ascending o descending. Por omisin se toma el valor ascending. data-type: que indica si el valor a ordenar es un texto (text) o un nmero (number). Por omisin se toma el valor text. case-order: que indica si se deben tomar primero las maysculas (upper-first) o las minsculas (lowerfirst).
301
As el bloque anterior se podra haber escrito como: <xsl:for-each select="rss/channel/item[position() <= 5]"> <xsl:sort select="title" order="descending" data-type="text" case-order="lower-first" /> <p>Ttulo: <xsl:value-of select="title"/></p> <p>Descripcin: <xsl:value-of select="description" disable-output-escaping="yes"/></p> <hr /> </xsl:for-each>
En el cuadro de texto Prueba se deber escribir la condicin que se probar contra los elementos del archivo XML para decidir si se muestran o no. Las principales formas de condicin que utilizars son las siguientes: Condicin de nodo: donde se prueba un nodo (o campo) del elemento. Por ejemplo, precio > 200. Condicin de atributo: donde se prueba un atributo del elemento o de un nodo del elemento. Ejemplos: @id
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 302
= 8, para que el id del elemento sea 8, o coche/@color=rojo, para que el campo coche del elemento tenga un atributo de color rojo. Condicin de bsqueda: puedes buscar en un nodo o atributo utilizando la funcin contains(). As podras escribir contains(nombre, 'la') y mostrara slo aquellos elementos que tuviesen la cadena la en su nombre. Una vez introducida la condicin simplemente pulsa Aceptar y la regin condicional se crear. En el caso de que utilicemos la condicional mltiple vers que se crea la siguiente estructura:
Debers introducir un bloque en xsl:when que se mostrar si se cumple la condicin, y otro en xsl:otherwise para que se muestre cuando no se cumpla.
303
En Archivo XSLT debers indicar el archivo que deber mostrarse (el archivo de tratamiento de XML que hemos creado). Automticamente se mostrar en URI de XML la direccin del archivo que hemos utilizado para crear el archivo XSLT.
Al aceptar el cuadro de dilogo se mostrar directamente el contenido del archivo XSLT en la pgina PHP. Slo tendrs que pulsar F12 o el botn Vista en vivo y tendrs una previsualizacin de cmo quedar el archivo.
Observa que Dreamweaver ha aadido a nuestro sitio la carpeta includes/MM_XSLTransform/. En ella estn los archivos necesarios para realizar la transformacin XSLT.
Para practicar realiza el Ejercicio Paso a Paso de Aadir XML a nuestra pgina.
Podemos utilizar variables en el archivo XSLT para configurarlas ms tarde segn la pgina dinmica que vaya a mostrarla. Por ejemplo, en un filtro de repeticin podramos indicar lo siguiente:
En este caso estaremos diciendo que queremos que se muestren tantos elementos como indique la variable $numero. A partir de este momento, cuando llamemos al archivo XSLT deberemos darle un valor a este parmetro para que tenga un valor real. Pero, cmo hacerlo?, muy sencillo. Cuando estamos creando la transformacin XSL (ver apartado anterior) deberemos incluir un parmetro haciendo clic en el botn
304
En Nombre deberemos especificar el nombre del parmetro (en el ejemplo numero) y en Valor estableceremos un valor para dicho parmetro. Aceptamos el cuadro de dilogo y listo.
Ahora podremos modificar el contenido del archivo XSLT segn desde qu archivo PHP lo carguemos, pues en cada archivo PHP podremos darle un valor diferente.
305
306
Cuando hayas decidido dnde colocar la regin que contendr los datos importados del archivo XML debers hacer clic en Insertar Spry Conjunto de datos XML de Spry y se abrir el siguiente cuadro de dilogo:
Debers rellenar este cuadro de dilogo para definir el modo en que accederemos y cargaremos el archivo XML deseado. El procedimiento es muy sencillo, primero indicaremos un nombre en Conjunto de datos para poder distinguirlo y diferenciarlo de otros posibles conjuntos de datos que queramos cargar. En Origen XML indicaremos la ruta del archivo XML, puede encontrarse en nuestro propio sitio o en una
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 307
direccin concreta de internet, en este ltimo caso deberemos indicar la ruta completa (incluyendo http://...). Una vez indicado el archivo XML podemos hacer clic en el botn Obtener esquema para ver el esquema XML del archivo.
Selecciona el Elemento de fila , es decir la etiqueta XML que contiene el conjunto de datos que queremos cargar, este paso se realizar tal cual como vimos en la unidad anterior. Una vez seleccionado haz clic en el botn Vista previa para ver un listado con los primeros 20 elementos (de muestra) para asegurarte del contenido del archivo. Para finalizar podemos definir el tipo de datos que contiene cada dato del elemento. Podemos hacerlo haciendo clic sobre l en el listado de Columnas del conjunto de datos y seleccionando su tipo en el desplegable Tipo de datos. Podrs elegir entre: Cadena (de texto), Nmero, Fecha o Vnculo de imagen.
Este cuadro de dilogo tambin te permitir ordenar los elementos del conjunto respecto a una de sus columnas en el momento de la carga. Para ello selecciona Ordenar y elige el orden Ascendente o Descendente en Direccin. Para eliminar las filas duplicadas marca la opcin Distinguir al cargar. Por ltimo marca la opcin Desactivar cach de datos XML si quieres que el contenido que se muestre en tu pgina se refresque cada cierto tiempo , indica este intervalo en la opcin Actualizar datos automticamente. En caso de que esta opcin no se active los datos se cargarn una vez y slo se actualizarn si se refresca la pgina.
Cuando hayas terminado de configurar el cuadro de dilogo haz clic en Aceptar y los elementos listos para utilizar se mostrarn en el panel Vinculaciones.
308
Selecciona el conjunto de datos creado anteriormente en Conjunto de datos Spry. Luego decide si quieres que se cree un Contenedor de tipo DIV o SPAN, ten en cuenta que un DIV es un elemento de tipo bloque, por tanto contiene un salto de lnea antes y despus de l. Si lo que te interesa es insertar el contenido XML en lnea (por ejemplo dentro de un prrafo) selecciona el elemento de tipo SPAN. En caso de que tuvieses algn elemento de la pgina seleccionado las opciones Ajustar seleccin y Reemplazar seleccin se activarn para que puedas elegir si situar la regin envolviendo el elemento seleccionado o sustituirlo por el contenedor elegido.
En principio veremos nicamente la opcin de Tipo Regin , en prximos apartados veremos para qu nos servir el tipo Regin de detalle.
Pulsa Aceptar y estars listo para arrastrar elementos del panel Vinculaciones a tu pgina:
309
Del mismo modo que antes indicaremos el tipo de Contenedor, el Conjunto de datos Spry y si queremos que se inserte ajustando o reemplazando el elemento HTML seleccionado. Puedes seleccionar Repetir o Repetir hijo dependiendo del tipo de repeticin que quieras conseguir. Seleccionando Repetir hijo hars que lo que se encuentre dentro de la regin se repita para cada una de las filas del archivo, (opcin muy til para las tablas y la repeticin de elementos tr (fila de la tabla)).
Pulsa Aceptar y ahora los elementos que aadas se repetirn para cada una de las filas existentes en el archivo XML.
24. Acceso a datos con Spry La Catedral Del Mar La Sombra Del Viento La Verdadera Historia Del Club Bilderberg Ligero De Equipaje: La Vida De Antonio Machado Matanzas En El Madrid Republicano: Paseos, Checas, Paracuellos... Miguel Duran: Del Cielo Al Abismo Milagro En Los Andes Milenio 3: El Libro Seda Travesuras De La Nia Mala Un Lugar Llamado Nada Yo, Maya Plisetskaya
Para ello simplemente haz clic en Insertar Spry Lista de Repeticin de Spry y vers el siguiente cuadro de dilogo:
Selecciona el tipo de listado que quieres generar en Etiqueta de contenedor . Puedes elegir entre UL (lista sin ordenar), OL (lista ordenada), DL (lista de definicin) o SELECT (lista desplegable). En las dos primeras opciones el cuadro de dilogo permanecer tal y como ves en la imagen. Si seleccionas DL (lista de definicin) o SELECT (lista desplegable) su aspecto variar un poco debido a las diferentes opciones que admiten estas etiquetas: DL (lista de definicin): Consta de dos campos, Columna DT que contiene el nombre el nombre a definir, y Columna DD que contiene la definicin del campo anterior.
SELECT (lista desplegable): Consta de dos campos, Columna de etiquetas que contiene el nombre que se muestra en el desplegable, y Columna Valor que contiene el valor que se pasa cuando se enva el formulario al que pertenece el desplegable. <option value="8433970925">Brooklyn Follies</option>
311
Combinando esta regin con una tabla de datos Spry con la opcin Actualizar regiones de detalle al hacer clic en la fila activada podremos provocar lo siguiente: Al hacer clic sobre una de las filas todos los campos situados en la regin Spry (Regin de detalle ) se actualizarn para mostrar la informacin relativa a la fila seleccionada. Esta opcin es muy sencilla y vistosa, pues permite una interaccin total con el usuario a la hora de mostrar informacin en pantalla.
312
Para incluir comportamientos y caractersticas de AJAX en nuestras pginas deberemos tener conocimientos de JavaScript, XML y DOM (Document Object Model). Con Spry, utilizar AJAX se hace mucho ms simple y asequible. Como hemos visto en la unidad anterior es posible incorporar informacin almacenada en archivos con formato XML y manejarla dinmicamente sin la necesidad de refrescar la pgina a cada peticin. Ahora veremos un modo avanzado de utilizar estas funcionalidades desde una perspectiva menos cmoda pero mucho ms potente, pues seremos capaces de manejar el contenido dinmico de una forma total y siempre utilizando la librera Spry que nos proporciona Adobe.
Spry es una tecnologa desarrollada y propietaria de Adobe, y es la que emplea Dreamweaver. Existen otras opciones, como jQuery, muy empleada en la web.
313
Slo te interesarn dos archivos que se encuentran en la carpeta includes: SpryData.js y xpath.js. Al crearlos con Dreamweaver, ste los guarda en la carpeta SpryAssets. Al utilizarlos, Dreamweaver los llamar dentro del <head>: <script src="SpryAssets/xpath.js" type="text/javascript"></script> <script src="SpryAssets/SpryData.js" type="text/javascript"></script> Si optas por emplear Spry directamente desde el cdigo fuente, no olvides incluir estas lneas en la cabecera de la pgina. Con esto referenciamos a los scripts y los incluimos en nuestra pgina. A partir de ese momento estaremos listos para utilizar Spry. Ten en cuenta que Spry nicamente utiliza JavaScript para su funcionamiento, por lo que las pginas donde decidas incluir este tipo de comportamientos no tendrn por qu ser pginas dinmicas (aunque se comporten como si lo fueran).
Como ms adelante vers, Spry utiliza sus propias etiquetas para trabajar con la informacin almacenada en el archivo XML. Debido a esto es aconsejable indicar el espacio de nombre (una direccin de Internet que contiene la especificacin de las nuevas etiquetas que se van a utilizar) para que el archivo HTML, PHP, ASP... que estemos utilizando sea correcto y se pueda valorar positivamente. Para indicar el nombre de espacio o namespace deberemos aadir el siguiente atributo a la etiqueta html del documento: <html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry"> Aqu encontramos un pequeo inconveniente. Si trabajamos con una pgina normal, Dreamweaver aadir esto automticamente a la descripcin de la etiqueta. Pero si nuestro documento est basado en plantillas, no lo har. As que habremos de hacerlo, aadiendo el cdigo interior a la etiqueta html de la plantilla. Aunque
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 314
esto supone que se muestre en todas las pginas, aunque slo tengamos una con Spry. La mayora de los navegadores reproducen Spry sin problemas aunque no incluyamos el espacio de nombre, debemos de incluirla para asegurarnos de que funcione en todos.
En Seleccionar tipo de datos, indicamos que los queremos obtener de XML. Le asignamos un Nombre, y seleccionamos la ubicacin del archivo pulsando en Examinar. Seleccionamos el nodo o estructura que queremos tomar (en la imagen elemento).
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 315
Aunque este dilogo tiene ms opciones si pulsamos en Siguiente, las explicaremos ms adelante. Pulsamos Listo. Ahora, encontraremos los datos accesibles a travs del panel Vinculaciones. Desde el punto de vista del cdigo, lo que hemos hecho es bastante simple, basta con indicar la ruta del archivo y su estructura: <script type="text/javascript"> var miDataSet = new Spry.Data.XMLDataSet("archivo.xml", "listado/elemento"); </script> Como puedes ver ya hemos generado cdigo JavaScript en la pgina. Este bloque deber colocarse despus de haber incluido los dos archivos JS necesarios para que Spry funcione correctamente. Esto lo habr hecho Dreamweaver automticamente si empleamos el asistente. Lo que hacemos es declarar un objeto (escribiendo var al principio) con el nombre que queramos. La estructura de la creacin del objeto es siempre la misma, simplemente deberemos indicar donde se encuentra el archivo XML (bien podra tratarse de una direccin absoluta del tipo http://www.unsitio.com/carpeta/archivo.xml, si no estuviese en nuestro servidor), y el tipo de estructura que tiene.
La declaracin que puedes ver la hemos basado en el ejemplo XML anterior. En este caso la estructura del archivo responde a listado/elemento pues estamos listando las etiquetas que forman el archivo separadas por barras (/). Nuestro dataset almacenara los siguientes registros: @id 1 2 3 propiedad valor_1 valor_2 valor_3
Estos tres registros se corresponden con los tres items elemento que tenemos en el archivo XML. Observa como hemos escrito la columna que se refiere al id del elemento con un smbolo de @, esta es la forma en la que referenciaremos a los atributos existentes en las etiquetas.
Sin embargo, los registros almacenados en el dataset dependern de la estructura que especifiquemos al crearlo. Imagina que para el mismo ejemplo hubisemos creado el dataset eligiendo el elemento superior:
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 316
<script type="text/javascript"> var miDataSet = new Spry.Data.XMLDataSet("archivo.xml", "listado"); </script> Ahora los registros que se guardaran seran los siguientes: @atributo aaa Esto es debido a que el elemento que tomara para crear las filas que ms tarde almacenar slo aparece una vez y tiene un slo valor que podamos sacar: su atributo. As que recuerda que debers especificar correctamente la estructura del archivo XML para lograr almacenar en el dataset la informacin que te interesa.
Para practicar la creacin de datasets realiza el Ejercicio Paso a Paso Crear un Dataset.
En el dilogo que ya conocemos, indicamos el tipo de contenedor (div para bloque o span para elementos en lnea) y el dataset.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 317
Realmente, el cdigo generado es muy simple: basta con indicar a la etiqueta que formar la regin el dataset que utilizar con el atributo especial spry:region. <div spry:region="miDataSet"> El contenido de la regin de Spry va aqu </div> Las regiones tienen solamente una excepcin, no se pueden declarar en una etiqueta que pertenezca al siguiente listado: COL COLGROUP FRAMESET HTML IFRAME STYLE TABLE TBODY TFOOT THEAD TITLE TR
Lo cual no significa que estas etiquetas no puedan aparecer dentro de la regin. Simplemente no podrs utilizarlas para declararla. Lo ms sencillo es utilizar la etiqueta DIV si queremos crear una regin pequea o directamente sobre la etiqueta BODY de la pgina si quieres incluir datos y comportamientos indiscriminadamente y te es difcil establecer una regin especfica dentro de la pgina.
Desde el cdigo fuente, resulta muy sencillo introducir estos elementos. Basta con seguir la estructura {nombreDataSet::nombrePropiedad} para las propiedades o {nombreDataSet::@nombreAtributo} para los atributos.
En este ejemplo podrs ver cmo definimos la regin Spry. Dentro de ella creamos una tabla que mostrar el valor del atributo id del elemento y el valor de su hijo propiedad.
318
<div spry:region="miDataset"> <table border="0" cellpadding="5"> <tr> <td>{@id} </td> <td>{propiedad}</td> </tr> </table> </div> Para mostrarlo escribimos entre llaves el nombre del dataset seguido de ::, luego indicaremos el nombre de la columna. Recuerda que si queremos referirnos al valor de un atributo deberemos utilizar el smbolo @. En este caso no es necesario indicar el nombre del DataSet antes de los elementos, porque esta regin contiene un nico DataSet. Ms delante veremos la posibilidad de incluir varios DataSet en una regin.
Para practicar estos conceptos realiza el Ejercicio Paso a Paso Crear una Regin con Informacin.
Para ello utilizaremos el atributo spry:repeat. Este atributo repite la etiqueta en la que est colocado tantas veces como registros pueda encontrar en el dataset. De esta forma el siguiente bloque de cdigo reproducira un listado desordenado con tantos items como registros existan en el archivo XML: Su uso es igual que spry:region. Incluiremos la repeticin dentro de la regin. Podemos hacerlo desde el panel Insertar Spry pulsando asignarlo a ms etiquetas, como vemos en este ejemplo: <div spry:region="miDataSet"> <ul> <li spry:repeat="miDataSet">{@id}, {propiedad}</li> </ul> </div> Sencillo, verdad?
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 319
Tambin tenemos la posibilidad de utilizar spry:repeatchildren, que al contrario que el anterior no repite la etiqueta en la que se encuentra, sino aquellas etiquetas que estn contenidas en ella. Por ejemplo, podramos conseguir el mismo resultado que en el cdigo anterior escribiendo: <div spry:region="miDataSet"> <ul spry:repeatchildren="miDataSet"> <li>{@id}, {propiedad}</li> </ul> </div> Esto har que los hijos de la etiqueta ul se repitan para cada registro. Por lo que tambin se crear un listado con tantos items como elementos haya en el dataset. Recuerda, que podamos hacer esto desde el diseo, con la opcin .
Crear comportamientos es muy sencillo. Spry es una librera JavaScript, as que podemos emplear sus eventos. El evento ms utilizado es el onclick al ser el que ms interaccin tiene con el usuario (como vimos en el tema de Comportamientos avanzados). Ordenar un listado utilizando un comportamiento es muy sencillo. Bastar con utilizar el mtodo sort: <div spry:region="miDataSet"> <table> <tr> <td onclick="miDataSet.sort('@id');">ID</td> <td onclick="miDataSet.sort('propiedad');">PROPIEDAD</td> </tr> <tr spry:repeat="miDataSet"> <td>{@id}</td> <td>{propiedad}</td> </tr> </table> </div>
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 320
Como puedes ver en el ejemplo, este cdigo crear una tabla con un encabezado con las palabras ID y PROPIEDAD. El resto de filas sern repeticiones que mostrarn los diferentes registros del dataset. Si hacemos clic en alguno de los encabezados, los registros se reordenarn para mostrarse ordenados por el campo que se encuentra en el encabezado pulsado. A la celda le hemos aadido un comportamiento onclick que ejecute sobre el dataset miDataSet el mtodo sort ordenando por el campo entre parntesis.
Es posible especificar en qu direccin se realizar la ordenacin, para ello debers indicarlo aadiendo un nuevo parmetro: miDataSet.sort('propiedad', 'ascendig') miDataSet.sort('propiedad', 'descending') miDataSet.sort('propiedad', 'toggle') Al asociar este mtodo a un comportamiento podemos provocar que los registros se ordenen ascendentemente, descendentemente o utilizar la propiedad toggle para que cada vez que se provoque el comportamiento cambie la ordenacin de ascendente a descendente y viceversa.
Como hemos dicho tambin es posible provocar la ordenacin al cargar el dataset, de esta forma al visualizar los datos por primera vez aparecern ordenados de la forma en que queramos y no har falta esperar a que se realice un comportamiento para ordenarlos. Ordenar un dataset en la carga requiere que se especifique en el momento en que lo definimos. Veamos un ejemplo: <script type="text/javascript"> var miDataSet = new Spry.Data.XMLDataSet("archivo.xml", "listado/elemento",{sortOnLoad:"propiedad", sortOrderOnLoad:"descending"}); </script> Aqu, en el momento de la declaracin del dataset indicamos por qu campo se debe de ordenar y en qu sentido. Podemos ordenar por varios sortOnLoad:propiead/@atributo. campos, separndolo por /. Por ejemplo
La ordenacin en algunos momentos puede crearnos problemas si estamos visualizando campos que contienen nmeros o fechas. Por ejemplo como nmero, 9 es menor que 10. En cambio, como texto al ordenar alfabticamente, '10' va antes que '9'.
321
<script type="text/javascript"> var miDataSet = new Spry.Data.XMLDataSet("archivo.xml", "listado/elemento", {sortOnLoad:"propiedad", sortOrderOnLoad:"descending"}); miDataSet.setColumnType("propiedad", "number"); </script> De esta forma estamos indicando que la columna propiedad es de tipo numrico, tambin podramos haber escrito date si fuese de tipo fecha. Por defecto las columnas se consideran de tipo texto y por lo tanto se ordenar alfabticamente.
25.8. Condicionales
Es posible crear condiciones dentro de las reas de repeticin para decidir si los elementos se debern mostrar o no. Para ello nos podremos valer de diferentes mtodos.
El primero que veremos ser el atributo spry:test, que debe colocarse junto a un spry:repeat (o spry:repeatchildren) Este atributo nos permite crear una condicin junto a la repeticin que evaluar cada fila y la mostrar si cumple la condicin. Por ejemplo: <div spry:region="miDataSet"> <ul spry:repeatchildren="miDataSet" spry:test="{ds_RowID} <= 5;"> <li>{@id}, {propiedad}</li> </ul> </div> Esta condicin har que la repeticin se produzca mostrando los 6 primeros elementos (recuerda que el conteo empieza en 0 , por lo que el sexto elemento tendr una RowID de 5). RowID, es un identificador que asigna automticamente Spry a cada fila o registro, comenzando por 0. No tiene nada que ver con el valor del atributo @id.
Otra forma de crear condiciones es utilizando las expresiones regulares que comentamos en la unidad 12. De esta forma podemos crear condiciones que evalen el contenido de algn campo:
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 322
<ul spry:repeatchildren="miDataSet" spry:test="'{propiedad}'.search(/^An/) != -1;"> De esta forma mostraremos slo aquellos registros cuyo campo propiedad empiece por An. != es el operador lgico que indica distinto. La funcin de JavaScript search evala la expresin regular indicada (que debe de ir delimitada por los barras /). Si encuentra alguna coincidencia devuelve su posicin (la posicin 0 sera el primer carcter). Si no la encuentra, devuelve -1. Por tanto, si quisisemos aquellos que no empiezan por An deberamos escribir: <ul spry:repeatchildren="miDataSet" spry:test="'{propiedad}'.search(/^An/) == -1;"> == es el operador lgico que indica igual.
E incluso podramos igualar un campo para mostrar slo aqul que tenga determinado valor. En este caso hacemos la comparacin directamente: <ul spry:repeatchildren="miDataSet" spry:test="'{propiedad}' == 'valor';">
Luego podemos encontrar otros elementos de condicin ms complejos y flexibles. Estos no necesitan estar al lado de un spry:repeat, pero s dentro de una etiqueta afectada por l.
Podemos utilizar spry:if para decidir mostrar algo o no. Podramos mostrar, por ejemplo, slo los registros que tengan un determinado atributo a 1: <div spry:region="miDataSet"> <ul spry:repeatchildren="miDataSet"> <li spry:if="{@atributo} == 1;">{@id}, {propiedad}</li> </ul> </div> De esta forma podemos decidir ya no slo si mostrar registros o no, sino tambin ocultar algunas etiquetas, dependiendo del valor concreto de cada uno. Bastar con que pongas el atributo dentro de una etiqueta concreta y se evaluar para cada registro si mostrarla o no (y con ella todo su contenido).
Otro elemento condicional que podremos utilizar, an ms completo es spry:choose . Este condicional te permite evaluar diferentes casos y para cada uno tomar diferentes decisiones.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 323
Por ejemplo: <div spry:region="miDataSet"> <ul spry:repeatchildren="miDataSet" spry:choose="spry:choose"> <li spry:when="{ds_RowID}%2==0;" class="estilo1">{@id}, {propiedad}</li> <li spry:when="{ds_RowID}%2!=0;" class="estilo2">{@id}, {propiedad}</li> </ul> </div>
Aqu indicamos que una regin o una repeticin ser spry:choose . Esto indica que dentro encontraremos elementos con spry:when, que slo se mostrarn si ese cumple la condicin. En el ejemplo anterior calculamos el resto (%) de dividir entre 2 el id de la fila. Tenemos dos spry:when, uno para cuando ese resto sea 0 y otro para cuando no. En cada caso, damos una clase distinta al elemento de lista. Con eso logramos ir alternando la clase de las filas, creando un listado "cebra". En el ejemplo anterior no puede suceder, pero qu pasara si ninguna condicin se cumple? No se mostrara ese elemento. Podemos establecer la condicin por defecto, es decir, cuando no se cumplan las anteriores, con spry:default. En el ejemplo, podramos cambiar la segunda condicin para que sea cierta si no lo es la primera. <li spry:default="spry:default" class="estilo2">{@id}, {propiedad}</li> Puedes practicar con el ejercicio paso a paso Crear condiciones.
25.9. Filtros
Otra posibilidad a la hora de decidir qu registros mostrar o no son los filtros. Un filtro se aplica sobre un dataset y descarta las filas que no lo cumpla. Podrs aplicar un filtro dinmicamente y hacer que se aplique cuando se produzca determinado evento.
Al aplicar el filtro en un comportamiento deberemos establecer una funcin que contendr las directrices que se debern seguir para decidir si una fila se muestra o no. El modo en el que declararemos la aplicacin de un filtro en un comportamiento dinmico es el siguiente: <a href="#" onclick="miDataSet.filter(miFuncion);">Filtrar registros</a>
324
Por ejemplo: <script type="text/javascript"> var miDataSet = new Spry.Data.XMLDataSet("archivo.xml", "listado/elemento"); miDataSet.setColumnType('@id', 'number'); var miFuncion = function(dataSet, row, rowNumber) { if (row["propiedad"] == "valor") { return row; } else { return null; } } </script>
En este ejemplo podemos ver como se declara un dataset, y una de sus columnas se declara tambin de tipo numrico. Luego introducimos la funcin que llamaremos en el evento onclick. onclick="miDataSet.filter(miFuncion);" La estructura de esta funcin ser siempre la misma. Simplemente debers cambiar la condicin que har que la fila se desprecie o no. Lo nico que debers recordar es que para referenciar a una columna debers utilizar la sintaxis row["propiedad"]. El resto continuar completamente igual, e incluso podrs utilizar el mtodo de bsqueda con expresiones regulares que vimos en el apartado anterior: var miFuncion = function(dataSet, row, rowNumber) { if (row["propiedad"].search(^/An/) == -1) { return row; } else { return null; } } Cuando se produzca el evento se filtrarn los resultados. Podrs volver a mostrar los datos originales llamando al mtodo filter pero sin pasarle ninguna funcin: <a href="#" onclick="miDataSet.filter();">Mostrar todos</a> Esto regenerar el dataset y volver a mostrar los registros sin filtrar.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 325
Existe otra posibilidad que filtra el dataset destructivamente. Es decir, el filtro que se aplica no puede ser revertido, y las filas despreciadas se borran del dataset. Para ello debers utilizar el mtodo filterData de la siguiente forma: <a href="#" atrs</a> onclick="miDataSet.filterData(miFuncion);">Filtrar sin vuelta
El funcionamiento de este filtro es exactamente igual al anterior. Tambin requiere de la misma funcin y acta del mismo modo. La nica diferencia se encuentra en que no podrs recuperar las filas que haya quitado el filtro. Esto puede ser til, para agilizar el dataset, si es muy grande pero hay muchos datos que no se van a utilizar.
Para practicar estos conceptos realiza el Ejercicio Paso a Paso Crear un Filtro.
Para utilizar este mtodo con un comportamiento simplemente debers escribir lo siguiente: <a href="#" onclick="miDataSet.distinct();">Eliminar filas repetidas</a> Al producirse el evento los registros repetidos se eliminan del dataset y no vuelven a aparecer.
326
Para cargar un dataset sin filas repetidas debers indicarlo en la declaracin del objeto dataset de este modo: <script type="text/javascript"> var miDataSet = new Spry.Data.XMLDataSet("archivo.xml", "listado/elemento", {distinctOnLoad: true}); </script> Sencillo, verdad?
Este mtodo tambin se puede utilizar ligado a un comportamiento, deberemos utilizar el mtodo startLoadInterval del siguiente modo: <a href="#" onclick="miDataSet.startLoadInterval(30000);">Recargar XML</a> Aunque de este modo tambin es recomendable mantener el uso de la propiedad useCache para evitar que se tome la versin almacenada en cach.
327
El mtodo stopLoadInterval detiene la recarga del archivo XML y deja el ltimo que se carg como archivo de trabajo. La forma de utilizarlo es igual al anterior: <a href="#" onclick="miDataSet.stopLoadInterval();">Dejar de recargar XML</a>
La forma de trabajo para este modo es muy similar a la que llevamos viendo, simplemente habr que aadir un nuevo elemento que har las veces de regin de detalle: <div spry:region="miDataSet"> <ul spry:repeatchildren="miDataSet"> <li onclick="miDataSet.setCurrentRow('{ds_RowID}')">{@id}, {propiedad}</li> </ul> </div> <div spry:detailregion="miDataSet"> <p>{columna2}</p> <p>{columna3}</p> <p>{columna4}</p> <p>{columna5}</p> </div> Como puedes ver hemos aadido una nueva regin donde cargaremos la informacin completa del registro actual, para ello hemos de generar un evento que ejecute el mtodo que establece (set) cul es el nuevo registro (row) actual (current). Lo hemos aadido en un evento onclick. Para establecer un nuevo registro como el actual hemos utilizado el mtodo setCurrentRow, que necesita de un valor numrico el cual pasar como registro actual. La regin identificada como regin de detalle (spry:detailregion) se actualizar automticamente mostrando el resto de campos que en la regin maestro no se mostraban.
328
Recuerda que al insertar una nueva regin Spry, podamos que fuese una regin de detalle.
spry:hover permite aplicar a un elemento una clase CSS existente cuando el cursor est encima.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 329
Simplemente debers indicar el nombre de la clase que anteriormente habrs definido y Spry har el resto por ti: <style> .resaltado { background-color: yellow; } </style> ... <div spry:region="miDataSet"> <ul spry:repeatchildren="miDataSet"> <li spry:hover="resaltado">{@id}, {propiedad}</li> </ul> </div> Del mismo modo, spry:select acta aplicando un estilo determinado cuando hacemos clic en la etiqueta afectada por este atributo, la sintaxis es exactamente la misma. Combinando ambos mtodo podremos lograr una interfaz mucho ms interactiva. <style> .resaltado { background-color: yellow; } .seleccionado { color: red; } </style> ... <div spry:region="miDataSet"> <ul spry:repeatchildren="miDataSet"> <li spry:hover="resaltado" spry:select="seleccionado">{@id}, {propiedad} </li> </ul> </div>
Finalmente, Spry permite el uso de una propiedad ms, spry:selectgroup. El objetivo de este atributo es que cualquier elemento que use el mismo valor asignado a l deje de tomar la clase aplicada cuando se haga clic sobre otro elemento con el mismo nombre de grupo. El resto de elementos con valores diferentes en spry:selectgroup seguirn con la regla CSS aplicada hasta que se haga clic en un elemento con el mismo nombre de grupo. <lispry:hover="resaltado" spry:selectgroup="miGrupo">{@id}, {propiedad}</li> spry:select="seleccionado"
330
En Seleccionar tipo de datos, indicamos que los queremos obtener de XML. Le asignamos un Nombre, y seleccionamos la ubicacin del archivo pulsando en Examinar. Seleccionamos el nodo o estructura que queremos tomar (en la imagen elemento). Esto ya lo conocemos. Pero encontramos ms opciones que ya nos sonarn si pulsamos Siguiente:
331
Lo primero que podemos elegir aqu es el tipo de dato de cada columna. Debajo, podemos ordenar el dataset por una columna, de forma ascendente o descendente. Encontramos tambin la opcin de Filtrar filas duplicadas. Y por ltimo las opciones de refresco: Desactivar cach y Actualizar automticamente. Vemos que desde aqu podemos configurar las opciones que hemos visto con un par de clics. Adems podemos generar el diseo de los datos, si pulsamos en Siguiente:
Elegir uno de estos diseos u opciones de visualizacin nos agilizar el trabajo. Podemos insertar tablas con columnas reordenables y colores distintos para filas alternas, regin maestro/detalle, etc.
332
Como es habitual con Spry, Dreamweaver ir incluyendo archivos JavaScript a nuestro sitio, en la carpeta SpryAssets, uno para cada tipo de control. Adems, incluir una hoja de estilo, para los estilos de los distintos estados que veremos.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 333
Cuando insertamos este tipo de controles en nuestros formularios podremos ver lo siguiente en la vista de Diseo:
El objeto de campo de texto es exactamente igual al que vimos en la unidad de formularios. Haciendo clic en la etiqueta azul Campo de texto de Spry podrs ver las opciones de validacin en el panel Propiedades:
Veamos las posibilidades que nos ofrece. En el desplegable Tipo podemos seleccionar el tipo de valor que se va a introducir. En principio, Spry tiene predefinidos bastantes tipos como telfono, nmero de seguridad social, tarjetas de crdito , fechas, correos electrnicos, etc... Solamente ser necesario seleccionarlos y elegir el formato en el desplegable Formato. De este modo la validacin ya viene programada automticamente y no es necesario aadir mucho ms. En el caso de que queramos aadir una validacin que no existe en el desplegable Tipo deberemos seleccionar Personalizado. Para validar la introduccin deberemos, entonces, introducir un patrn contra el que se comparar y se evaluar si es correcto o no. Para ello escribiremos en el campo Patrn una secuencia de caracteres que imite el texto que buscamos, y marcamos la opcin Aplicar patrn. Por ejemplo, si queremos que se introduzca un nmero con 5 dgitos escribiremos 00000. Fcil, verdad? En cualquier caso podemos escribir en Sugerencia una ayuda para que el usuario sepa exactamente qu debe escribir. Ten en cuenta que al validar un campo estamos obligando a que se escriba determinado tipo de datos. Por lo tanto ser necesario hacrselo saber de alguna forma. El resto de opciones son muy sencillas. Valor min y Valor mx establecen un rango de valores al cual
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 334
debe pertenecer el valor introducido. Con Car min y Car mx podemos indicar cuantos caracteres mnimos y mximos admite la caja de texto. Activa la opcin obligatorio si quieres que el campo no pueda dejarse en blanco.
Luego encontraremos las opciones de validacin, es decir, cuando queremos que Spry compare lo que se ha escrito y lo considere correcto o errneo. El valor onSubmit estar siempre marcado por defecto, esto es, cada vez que se enve el formulario se comprobar que los datos introducidos son correctos. Aunque tambin es posible aadir dos momentos ms donde se evaluar el contenido. onBlur ejecuta la evaluacin cuando se abandona el cuadro de texto, y onChange se ejecuta cada vez que se escribe cualquier carcter en la caja. Puedes marcar cualquiera de estas opciones, pero ten en cuenta que por ejemplo onChange puede resultar un poco engorroso pues mostrar un error cada vez que escribamos hasta que se alcance el patrn correcto. De todas formas te recomendamos que pruebes cada una de las opciones y te quedes con la que ms se ajuste a tus necesidades.
Desde esta opcin puedes pasar a la visualizacin de cada uno de los estados de error existentes, de cuando es vlido o del estado inicial:
En la imagen anterior, los estados corresponden a las vistas previas Inicial, Obligatorio, Formato no
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 335
En cualquiera los casos errneos podremos editar el mensaje de error, cambiar su apariencia mediante estilos desde los paneles Propiedades y CSS e incluso colocarlos donde mejor nos convenga. Recuerda que cada uno de los estados es independiente del resto, por lo que ser necesario que edites cada uno de ellos si quieres que se muestren de un modo personalizado.
En este caso las opciones que se presentan al seleccionar el elemento Spry son las siguientes:
En este caso las opciones comunes son los Estados de vista previa y los de validacin que son iguales a los del campo de texto. Aunque en el caso de las listas desplegables es aconsejable usar el valor onChangue para que se evale cada vez que se selecciona un valor, haciendo que se muestre el error nada ms elegir un elemento incorrecto.
Las opciones de validacin tienen mucho que ver en este caso con el contenido de la lista de valores del desplegable en s:
336
Observa que si marcamos la opcin de No permitir valores en blanco al seleccionar el valor2 (en la imagen) se ejecutara el mensaje de error Obligatorio. En el caso de No permitir Valor no vlido (-1, aunque puedes modificar el valor para que tome el que t quieras) al seleccionar -- elige una opcin -- saltara el error No vlido, por tener asignado ese valor.
La opcin ms interesante es Obligatorio. Tambin podemos establecer un valor como Vaco o No vlido, que no pasar la validacin.
337
Al crear el campo de verificacin se crea nicamente una casilla . Esto es debido a que en el panel Propiedades existe la opcin de poder establecer que dicha casilla sea de seleccin obligatoria (Obligatorio (casilla nica)), como en el caso de formularios en los que se ha de aceptar las condiciones de determinado contrato, etc.
Un uso ms avanzado de este control es cuando combinamos ms de una casilla en la misma regin de Spry. Este caso es un poco ms complicado. Deberemos crear la regin Spry tal y como acabamos de ver, luego sin salirnos de la zona delimitada con el recuadro azul deberemos insertar ms casillas de verificacin mediante el men Insertar Formulario Casilla de verificacin hasta alcanzar el nmero de casillas que necesitemos:
En el panel Propiedades deberemos indicar que estamos trabajando con ms de una casilla marcando la opcin Aplicar rango (varias casillas). De esta forma podremos indicar el mximo y mnimo de casillas de verificacin que se podrn cambiar. Para ello utiliza los campos disponibles en N mnimo de opciones seleccionadas y N mximo de opciones seleccionadas.
338
Al crear el campo de validacin podrs encontrar las siguientes opciones en el panel Propiedades:
A continuacin pasaremos a explicarlas. En cualquier caso siempre podremos obligar al usuario a que rellene el campo marcando la opcin Obligatorio. E incluir un texto de ejemplo escribindolo en Sugerencia. Escribe en Car min y Car mx el nmero de caracteres mnimos y mximos que aceptar el control. Puedes hacer que los caracteres que se escriban de ms no se puedan escribir marcando la opcin Bloquear caracteres extra. Finalmente puedes incluir un contador de caracteres marcando la opcin Recuento de caracteres o Caracteres restante para que se muestren los caracteres que se han escrito o los que faltan para alcanzar el mximo respectivamente. Este control es muy sencillo de utilizar y permite el control del texto introducido de una forma cmoda y rpida.
339
26.8. Contraseas
Muchas veces habrs observado que al registrarte en un sitio te obligan a introducir una contrasea con in mnimo de complejidad, por ejemplo combinando letras y nmeros, para intentar que sea una contrasea ms segura. Spry nos permite hacer esto con Insertar Spry Contrasea de validacin de Spry:
La mayora de opciones ya las hemos visto. Lo nica novedad es que nos permite indicar valores mximos y mnimos para el nmero de letras, dgitos, letras en mayscula y caracteres especiales que podr contener la contrasea.
Lo nico que debemos configurar en este caso es indicar en el desplegable Validar con el campo con el que se comparar.
340
341
Estos controles son completamente configurables y adems tambin aceptan modificaciones en su estilo utilizando CSS. De hecho el estilo inicial que muestran es muy bsico, por lo que no deberas tener problemas para modificarlo. Y como siempre, Dreamweaver ir aadiendo las libreras que necesite para crear estos comportamientos a la carpeta SpryAssets.
342
Aqu podremos seleccionar el diseo para nuestro men, haz clic en Horizontal o Vertical y pulsa el botn Aceptar. Se crear automticamente el men, que podrs visualizar desde la vista de Diseo de esta forma:
Haciendo clic en la cabecera azul Barra de mens de Spry podremos ver en el panel Propiedades las opciones necesarias para configurar nuestro men:
343
La creacin de elementos es bastante sencilla. Este men admite hasta 3 niveles diferentes, as que en principio la primera tarea ser definir el primer nivel. Esto lo haremos desde el primer cuadro de listado. Aadir y quitar elementos es tan fcil como utilizar los botones , y podemos reorganizarlos luego utilizando las flechas . Cada uno de estos elementos puede ser modificado para que muestren el texto que queramos, lo haremos desde las cajas de texto que encontramos a la derecha. En Texto escribiremos el literal que queremos que se lea en el men. Si ese elemento debe contener un enlace (a una pgina o a un correo electrnico) lo haremos escribiendo en la caja de texto Vnculo. Si trabajamos en una pgina con marcos podremos utilizar el campo Destino para establecer en cul de ellos se abrir el enlace. Por ltimo, Ttulo contendr una ayuda contextual que se mostrar en forma de etiqueta al colocar el ratn sobre el elemento del men.
Una vez definido el primer nivel, asaremos a crear los hijos de cada elemento. Selecciona uno de los items y crea las opciones que se desplegarn al colocar el ratn sobre ellos. De nuevo utiliza los botones y para gestionar los elementos en el segundo listado. Selecciona cada uno de los elementos de primer nivel y ves creando sus subelementos uno a uno.
Una vez creado un elemento de segundo nivel tambin seremos capaces de colgar sobre ste otro elemento de tercer nivel para ello utiliza los botones y y rellena el tercer listado de elementos.
Al final, dependiendo de lo complejo de nuestro men, puede resultarnos muy difcil ver su estructura o recorrer sus elementos. Adems, puede que hayamos aadido algn estilo CSS que Dreamweaver no interpreta como toca. En estos casos, resulta muy til la opcin Desactivar estilos, que nos mostrar el HTML real del men: una lista con enlaces.
344
Estas fichas son contenedores que admiten todo tipo de elementos HTML. Facilitan la navegacin y son muy tiles para organizar la informacin y no congestionar la pgina ni al usuario. Al insertarla vers que se inserta algo parecido a esto:
Seleccionando el control haciendo clic en la cabecera azul vers lo siguiente en el panel Propiedades:
Desde aqu podrs aadir tantas fichas como desees y ordenarlas utilizando los botones
Luego selecciona el Panel predeterminado que es el que se mostrar por delante cuando se visualice la pgina en el explorador, antes de que el usuario haya pulsado alguna de las fichas.
Para modificar los ttulos de ficha simplemente cambia el nombre desde la vista de Diseo. Puedes modificar su contenido normalmente incluyendo todo tipo de tablas, imgenes o elementos que hayamos visto hasta ahora. Para pasar del contenido de una ficha a otra slo coloca el ratn sobre ella y haz clic sobre el icono con forma de ojo que aparecer:
345
Recuerda que el panel que se visualizar primero en la pgina es el que elijas como predeterminado en el panel Propiedades.
Para utilizarlo haz clic en Insertar Spry Acorden de Spry. Se crear automticamente un elemento en tu pgina parecido a esto:
346
Este control es tan sencillo de configurar que en el panel Propiedades slo encontrars lo siguiente:
Aade y organiza las secciones utilizando los botones de cada una de ellas y su nombre en la cabecera.
Del mismo modo que con las pestaas para ver el contenido de una seccin coloca el ratn sobre su cabecera y haz clic sobre el icono con forma de ojo que aparecer:
347
Vers que realmente, funciona como un acorden con una sola ficha. Para insertar un panel de este tipo slo tienes que hacer clic en Insertar Spry Panel que puede contraerse de Spry. En el panel Propiedades podrs ver sus opciones de configuracin:
Desactivando la opcin Activar animacin eliminars la animacin que se produce al contraer el panel. Esta opcin slo afecta al comportamiento de apertura o cierre y no tiene mucha ms trascendencia, as que simplemente depender de tu gusto y lo que se adapte mejor al diseo de tu pgina web. Puedes decidir si el panel se muestra inicialmente abierto o cerrado en la pgina seleccionando el estado en el desplegable Estado predeterminado. Del mismo modo, si mientras trabajas en vista de Diseo te molesta que est abierto puedes cerrarlo haciendo clic en el desplegable Mostrar y seleccionando Cerrado. Esto ltimo tambin puedes hacerlo pulsando sobre el icono del ojo que aparecer en la cabecera del panel si sitas el ratn sobre ella:
Para modificar este panel simplemente edita su contenido como en el resto de controles que hemos visto, Nada ms fcil.
348
Para modificar el estilo de alguno de tus controles slo tendrs que modificar dicho archivo CSS para adaptarlo a tus necesidades. Para ello puedes emplear el panel Estilos CSS, el Inspector de propiedades CSS, etc... Si ves el cdigo fuente del Spry, o la barra de estado, vers que normalmente estn formados por etiquetas div, que tienen asociada una clase ya existiese. No tendrs ms que personalizar esa clase.
Recuerda que si necesitas ayuda con los estilos en cascada puedes visitar de nuevo el tema de Estilos CSS Avanzados.
349
Pginas bsicas
etiquetas consisten en poner un mismo comando entre los smbolos "<" y " >". La primera etiqueta indica inicio, y la segunda, que incluye el smbolo "/", indica final. Las etiquetas disponen de atributos que permiten definir caractersticas del elemento sobre el que actan. Por ejemplo, <table border="1"> indica que la que se trata de una tabla, y que tendr un borde de grosor 1. Una pgina HTML bsica tendra el siguiente aspecto: <html> <head> <title> Mi primera pgina web </title> </head> <body> <p><a href="http://www.aulaclic.es/"> Haz clic aqu para ir a aulaClic</a> y aprender ms sobre pginas web.</p> </body> </html> El ejemplo anterior mostrara una pgina con un slo prrafo en el que parte del texto enlaza con la web de aulaClic. Puedes probarlo copiando el cdigo y pegndolo en un archivo de texto, que debes guardar con la extensin .htm. Observa que cada etiqueta tiene una apertura y un cierre, y que estn anidadas unas dentro de otras. Las etiquetas que se introducen en un documento HTML no son visibles cuando el documento se muestra en un navegador (IExplorer, Firefox, Opera, Chrome, etc). Cuando un usuario desde Internet solicita ver una pgina el servidor Web enva la pgina al navegador y este interpreta las etiquetas para dar la pgina correctamente formateada. Cuando utilizamos Dreamweaver para crear una pgina Web no tenemos que preocuparnos de todo esto. Dreamweaver inserta automticamente las etiquetas necesarias para construir la pgina con la apariencia y contenido definidos en el editor grfico. Esto nos facilita muchsimo el trabajo.
Volver a la Unidad 1
350
Pginas bsicas
5. Una vez tenemos las dos sesiones con el tamao adecuado, basta hacer clic con el ratn para pasar de la una a la otra. Para volver a dejar las ventanas con su tamao normal, hacer clic en el botn Maximizar .
Esto va bien con monitores habituales (de 17" o ms pulgadas), sobre todo si son panormicos. Con monitores pequeos como los de las Netbooks, quizs prefieras dejar las ventanas con su tamao normal e ir pasando de una a otra presionando las teclas Alt + tabulador (manteniendo pulsada Alt, presionar la tecla tabulador) o pulsando el botn correspondiente a la sesin en la barra de tareas en la ltima lnea de la pantalla.
Volver a la Unidad 1
351
Pginas bsicas
Tablas de datos.
Una tabla de datos es un objeto que se define y utiliza para almacenar los datos. Una tabla contiene informacin sobre un tema o asunto particular, como pueden ser como hemos visto antes, clientes, pedidos etc... Las tablas contienen campos o columnas que almacenan los diferentes datos como el cdigo del cliente, nombre del cliente, direccin,... Y al conjunto de campos para un mismo objeto de la tabla se le denomina registro o fila, as todos los campos de un cliente forman un registro, todos los datos de otro cliente forman otro registro... Si consideramos una posible base de datos con los datos de una empresa, una tabla de CLIENTES podra ser: Campos Cdigo Registro 1 Registro 2 Registro 3 Registro 4 1 2 3 4 Nombre Luis Marta Francisco Mara Apellidos Grande Lilos Fran Dardeno Juan Lpez Huesca Buevo Direccin C/ Germanas, 23 C/ Mayor, 34 C/ Valle, 56 C/ Franciscano, 67 C.P. 46723 46625 46625 46521
Toda tabla debe tener un campo que sirva para identificar cada uno de sus registros, ese campo es la clave principal. La clave principal proporciona un valor nico para cada fila de la tabla y nos sirve de identificador de registros de forma que con esta clave podamos saber sin ningn tipo de equivocacin el registro al cual identifica. No podemos definir ms de una clave principal, pero podemos tener una clave principal compuesta
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 352
Pginas bsicas
por ms de un campo. Un campo definido como clave principal no podr aceptar valores duplicados (es decir que no podrn existir dos filas con el mismo valor en ese campo), ni podr contener el valor nulo. El valor nulo es un valor especial que indica la ausencia de valor, si en un campo de una fila tenemos el valor nulo (null en ingls) esto indica que esta fila no contiene ningn valor en ese campo. Si un campo est definido como no nulo (NOT NULL) el usuario estar obligado a rellenarlo cuando introduzca una nueva fila.
Volver a la Unidad 20
353
Pginas avanzadas
Un comando que puede resultarnos til es la tecla F4. Al pulsarla, todos los paneles se ocultan. Para mostrarlos, la volvemos a pulsar.
Al mover el panel sobre distintos elementos, veremos que lo podemos acoplar en otros lugares (zonas de colocacin), que aparecern resaltados en azul (imagen anterior). Esto nos permite intercambiar paneles entre
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 354
Pginas avanzadas
grupos acoplados o dejarlos como flotantes si los sacamos fuera. Incluso algunos paneles, como el panel Insertar, nos permiten acoplarlos en la barra de herramientas.
Para alternar estos aspectos, hacemos clic derecho sobre el nombre en el men y seleccionamos la opcin Mostrar como Fichas o Mostrar como men, segn el caso.
355
Pginas avanzadas
Pero como ves en la imagen anterior, podemos hacer que todos los iconos se muestren de color. Para ello no tenemos ms que elegir la opcin Iconos de colores del men Ver.
356
Pginas avanzadas
Espacios de trabajo
Si adaptamos a nuestro grupo el entorno y cerramos el programa, al volver a iniciarlo se mantendr nuestra configuracin. Pero a la larga iremos haciendo cambios, abriendo paneles que necesitemos puntualmente, cerrando otros por accidente, etc. Por eso es muy til guardar nuestra configuracin y poder restaurarla cuando queremos. A esta configuracin del entorno, se le denomina Espacio de trabajo. Y podemos guardar nuestra configuracin actual desde el men Ventana Diseo del espacio de trabajo Nuevo espacio de trabajo.... y darle un nombre.
Como vemos en el la imagen, www.aulaclic.es es un espacio personalizado. Adems vemos que Dreamweaver trae una serie de espacios ya creados que podemos utilizar. Para cargarlo, basta con seleccionarlo en el men. Otra opcin muy interesante que encontramos en este men es la de Restablecer 'espacio'. Esto lo volver a cargar, muy til cuando lo hemos desorganizado.
Volver a la Unidad 2
357
Pginas avanzadas
En esta nueva ventana lo primero que hay que hacer es seleccionar una Categora. En este caso nos interesa la de Tamaos de vantanas. En ella habr que establecer una Velocidad de conexin. La velocidad por defecto, la velocidad es de 56,0 kbps que es la velocidad a la que se conectaban lo mdems telefnicos. Actualmente, las conexiones de ADSL y cable llegan a cifras mucho mayores, de varios MB/s. No obstante, ha que establecer el valor al de la conexin media de la regin de los usuarios a los que va destinada la web. Una vez establecida una velocidad de conexin, y aceptados los cambios, Dreamweaver calcular el tamao y el tiempo de descarga de la pginas a partir de esa velocidad de conexin. Hay que tener en cuenta que el tamao de descarga de una pgina no solo se calcula a partir del tamao de esa pgina en disco, sino que hay que considerar tambin el tamao de las imgenes que aparecen en ella, y
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 358
Pginas avanzadas
del resto de elementos. Cuando en la ventana de documento de Dreamweaver est abierta alguna pgina, se mostrarn su tamao y su tiempo de descarga en la barra de estado. Por ejemplo, esta pgina que ests viendo tiene un tamao de descarga de 39K, y se presupone un tiempo de descarga de 1 segundos (para una conexin ADSL), ya que en la barra de estado de la ventana de documento aparecen estos datos entre el tamao de la ventana de documento y el panel de propiedades, representados por 70K/10 s.
Volver a la Unidad 3
359
Pginas avanzadas
360
Pginas avanzadas
Una opcin muy interesante del panel es que nos permite activar/desactivar propiedades solo con hacer clic a la izquierda de su nombre. Esto nos permite comprobar rpidamente cmo afectan los estilos a nuestra pgina.
El modo Todo. En este modo obtenemos informacin sobre los estilos disponibles en el documento actual, independientemente de la seleccin. Tenemos dos secciones: En Todas las reglas, aparece un listado de las reglas disponibles, definidas en el propio documento o en hojas de estilo enlazadas. En Propiedades de encontramos las propiedades de la regla seleccionada, pudiendo editarlas.
En ambos modos, en la parte inferior encontramos las mismas opciones. Desde los botones podrs ordenar las propiedades de diferentes maneras. Con el primer botn mostrars todas las propiedades ordenadas por categoras (Fuente, Fondo, Bloque, Borde, etc.); tambin puedes mostrarlas ordenadas de la A a la Z con el segundo botn. En la esquina inferior derecha encontramos los controles que nos permiten gestionar las reglas: De izquierda a derecha, estos controles nos sirven para adjuntar una hoja de estilo, crear una regla, editar la regla seleccionada o borrarla.
361
Pginas avanzadas
En este caso deberemos introducir el nombre de la propiedad en la columna de la izquierda (podremos seleccionarlo de la lista) y su valor en la columna de la derecha.
Para modificar un estilo ya existente, seleccionamos el estilo a modificar en la lista de estilos del panel y hacemos clic en el botn , se abrir la ventana donde se puede definir las caractersticas del estilo. Tambin podemos abrir esta ventana pulsando con el botn derecho sobre el estilo en el panel CCS, y seleccionar del men desplegable la opcin Edicin . O incluso modificarlo directamente desde la lista de propiedades que se encuentra en el panel, editando la columna derecha que contiene el valor. Ten en cuenta que si modificas un estilo CSS que pertenezca a una hoja de estilos vinculada, es decir, a un archivo CSS externo, todas las pginas que contengan ese estilo sern actualizadas al instante.
Para borrar un estilo de una hoja de estilos, seleccionamos el estilo en la lista de estilos del panel y hacemos clic en el botn .
Volver a la Unidad 4
362
Pginas avanzadas
Estas opciones te ayudarn a crear los enlaces de forma relativa. Selecciona Documento o Raz del sitio en Vnculos relativos a: para que se creen los enlaces relativos al documento donde se halla situado el enlace o desde la raz del sitio. Si seleccionas la opcin Raz del sitio, los enlaces se establecern respecto a la carpeta seleccionada en el campo Carpeta raz local:. Pero recuerda que en nuestro sitio local no funcionarn a no ser que instalemos un servidor de pruebas.
Seleccionar estas opciones no cambiar los enlaces existentes, sino que aplicar esta configuracin a los vnculos que se creen a partir de ese momento.
Volver a la Unidad 5
363
Pginas avanzadas
Entonces se muestra un nuevo panel, en el que ya es posible comprobar si existen vnculos rotos.
364
Pginas avanzadas
En la imagen vemos que no se ha encontrado un archivo enlazado, posiblemente porque el nombre est mal escrito, y una imagen. Lo primero que hay que hacer es pulsar sobre el botn , a travs del cual se ofrece la posibilidad de elegir dnde se comprobarn los vnculos rotos. Puede ser en el documento actual, en todo el sitio, o en los archivos o carpetas del sitio seleccionados previamente. A travs de Mostrar hay que especificar si han de mostrarse los Vnculos rotos, los Vnculos externos o Archivos hurfanos. Los Vnculos rotos son los vnculos que no siguen una ruta vlida, o que enlazan a archivo que no existe. Los Vnculos externos son los vnculos a documentos que se encuentran fuera del sitio, pero que no necesariamente son vnculos errneos. No comprueba si estos vnculos son correctos o no, simplemente los enumera. A travs de Vnculos hurfanos se muestran todos aquellos archivos del sitio que no estn siendo vinculados por otros, a la vez que tampoco contienen vnculos a otros documentos. Estos documentos, en ocasiones, pueden no estar siendo utilizados para nada, por lo que simplemente estn ocupando espacio en disco innecesariamente. Pero en otras ocasiones, tal vez si que los empleamos, slo que en vez de enlazarlos, accedemos a ellos por javascript u otros medios. En este caso s son necesarios, aunque se marquen como hurfanos. De estos tres tipos de vnculos, el que ms nos interesa ahora es el de los Vnculos rotos. En el panel se mostrarn todos los documentos que tienen un vnculo roto, y el documento al que cada uno de esos vnculos hace referencia.
365
Pginas avanzadas
Una de ellas es pulsando dos veces sobre el nombre del documento que aparece en la lista de archivos del panel. De este modo, dicho documento se abre. Entonces es posible buscar dentro del documento el vnculo errneo y modificarlo a travs del Inspector de propiedades. La otra forma es pulsando sobre el vnculo roto, en lugar de sobre el nombre del archivo. En este caso es posible modificar directamente el nombre del documento en el panel, o buscarlo a travs del icono con forma de carpeta que aparecer a su derecha.
Volver a la Unidad 5
366
Pginas avanzadas
Formato GIF: Utilizan un mximo de 256 colores, y son recomendables para dibujos con grandes reas de un mismo color o de tonos no continuos. Tambin si se muestra texto. Suelen utilizarse con gran frecuencia, ya que permiten contener transparencias y animaciones. En cambio, no estn recomendados para fotografas, ya que se perderan colores, y al no tener reas de color continuo, el archivo final sera mayor que por ejemplo un JPG. Formato JPG: Estas imgenes pueden contener millones de colores, en un archivo comprimido de tamao razonable. Por ejemplo, las imgenes que obtenemos de una cmara digital suelen estar en este formato. Por tanto, son especialmente indicadas para fotografas, o grficos complejos, obteniendo mejores resultados que el GIF. En cambio, en grficos con pocos colores y continuos, generar un archivo mayor que el GIF, y podremos apreciar prdida de calidad. Formato PNG. Se trata de un formato de compresin sin perdida. Tiene varias versiones: PNG 8 es un formato de 256 colores muy similar al GIF, que en teora obtiene archivos algo menores. Tambin admite transparencias. PNG 24 y PNG 36. Es un formato de color verdadero (34 o 36 bits), lo que hace que sea un archivo de tamao algo mayor. Admite canal de transparencia alfa, lo que quiere decir que puede obtener distintos niveles de transparencia, a diferencia de PNG 8 o GIF que pueden ser totalmente transparentes o no. El resultado es el de mayor calidad, pero tambin de mayor tamao. Este formato es el ms adecuado cuando necesitamos distintos niveles de transparencia, o requerimos que una imagen muestre correctamente todos sus colores y detalles, evitando la prdida de calidad que puede producir JPG. Tambin resulta especialmente indicado para imgenes con degradados de color. Lo habitual es utilizar GIF o PNG para pequeos grficos, normalmente elementos del diseo o imgenes simples, y JPG para fotografas, sean del tamao que sean. Nos limitaremos al uso de estos formatos. Ya que aunque algunos navegadores soportan otros, no lo hacen todos. Y hemos de asegurarnos de que cualquier visitante de nuestra pgina pueda ver las imgenes.
367
Pginas avanzadas
en su lugar.
Puedes cambiar el formato de las imgenes mediante la utilizacin de algn programa de tratamiento de imgenes, como pueden ser Fireworks, Photoshop, Corel Draw, o incluso desde el propio Dreamweaver, como veremos en el siguiente avanzado. Dependiendo del programa utilizado existir una mayor o menor cantidad de opciones a la hora de modificar las imgenes. Para realizar modificaciones sencillas, como la de recortar las imgenes y cambiar los colores, puedes utilizar incluso el programa Paint de Windows.
Volver a la Unidad 6
368
Pginas avanzadas
Estando seleccionada la imagen, ya es posible crear un mapa a travs de los botones del inspector de propiedades que tienen el siguiente aspecto: Propiedades para verlo completo. Los tres ltimos botones son los que se utilizan para crear los mapas. Dichos mapas pueden tener forma rectangular, circular, o libre, dependiendo del botn pulsado. Al pulsar alguno de estos tres botones, cambia la apariencia del puntero al situarlo sobre la imagen. Entonces ya es posible dibujar el mapa sobre la imagen, pulsando sobre los lugares donde se desea que comience y finalice el mapa, as como sobre el resto de lugares (en orden) que se desea que recorra el mapa en el caso de forma libre. Al estar seleccionado un mapa el inspector de propiedades cambia. Permite asignar un vnculo y un texto alternativo a ese mapa como puedes ver a continuacin: . Si no te aparecen despliega el panel
El primero de los botones, el de la flecha, debe pulsarse al finalizar la creacin de un mapa, para que el puntero recupere su forma original al situarse sobre una imagen. De este modo, es posible mover los puntos del mapa, en el caso de que no hayan sido creados en los sitios deseados, para ajustarlos mejor a la imagen. Aqu tienes un ejemplo de mapa de imagen. Sita el puntero sobre la cabeza del perro, y vers que es la nica parte de la imagen que contiene un enlace.
369
Pginas avanzadas
Volver a la Unidad 6
370
Pginas avanzadas
En el desplegable Preestablecido podemos elegir entre varias opciones: PNG 24 para fotos (detalles ntidos). JPEG para fotos (tonos contnuos) PNG 8 para logotipos y texto. JPEG alto para obtener la mxima compatibilidad.. GIF para imgenes de fondo (patrones). PNG 32 para imgenes de fondo (degradados). Para cada una de las anteriores opciones encontraremos unas posibilidades de optimizacin. Por ejemplo, segn se muestra en la imagen, para GIF podemos elegir Color de 256, 128, 64, ... segn queramos obtener ms o menos calidad de imagen. Tambin podemos decidir que cantidad de Perdida deseamos, a ms perdida memos calidad y menos tamao de la imagen. Si partimos de una imagen de calidad alta, por ejemplo, PNG 32, podemos convertirla en una imagen GIF de baja calidad y poco peso en Kb. En este caso nos pedir que guardemos la imagen con la nueva extensin .gif. Esto tiene sentido si tenemos una imagen que son, por ejemplo, unas letras con un fondo homogneo y que
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 371
Pginas avanzadas
no necesita mucha resolucin para verse bien. Si por el contrario, tenemos una imagen de un paisaje con bastantes detalles y colores degradados en el cielo, al subir mucho el parmetro de Perdida la imagen quedar bastante mal. Lo que se pretende es bajar la calidad para lograr un buen equilibrio o entre tamao y calidad , ajustndolo a las necesidades concretas de la imagen.
Transparencias
En ocasiones puede resultar til poder hacer invisibles algunos colores que forman parte de una imagen. Normalmente lo que se desea hacer transparente es el fondo. Por ejemplo, en la imagen siguiente el fondo puede desentonar con el fondo de la pgina, o hacer que su apariencia sea ms pobre.
Hay que tener en cuenta que lo que podemos elegir es un color (varios) de la imagen que ser transparente, haciendo que cada pxel de ese color sea transparente. Por lo que se color slo debe de aparecer en las zonas que queramos cambiar. Adems el fondo tiene que estar claramente delimitado. Los formatos que nos permitirn crear la transparencia sern PNG 8 y GIF. Si la imagen original era JPG, el resultado no ser bueno aunque lo cambiemos de formato, y que JPG altera los tonos continuos. Todo esto lo haremos desde un editor grfico como Photoshop, Gimp, Fireworks, ... Normalmente una forma de aplicar transparencia es a travs de los botones estos programas. Al seleccionar uno de los dos primeros botones, el cursor toma la forma de un cuentagotas . Para hacer un color transparente, basta con hacer clic sobre el color (en la paleta de colores o directamente sobre la imagen) con esta herramienta. Distinguiremos los colores transparentes porque dejan ver la cuadrcula de cuadros blancos y grises: que suelen tener
La diferencia entre el primer y el segundo de los botones de cuentagotas, es que el primero solo permite asignar transparencia a un color, mientras que el otro permite aadirsela a varios. El ltimo botn se utiliza para quitar la transparencia de algn color. Al hacer transparente el fondo azul, el resultado final es el siguiente:
372
Pginas avanzadas
La existencia de transparencia permite mejorar notablemente la esttica de nuestras pginas, integrando mejor las imgenes con el diseo.
Volver a la Unidad 6
373
Pginas avanzadas
Lo primero que tenemos que hacer, es elegir un programa como predeterminado para cada formato de imagen. Para ello, accedemos al men Edicin Preferencias.... En la ventana de Preferencias, seleccionamos la categora Tipos de archivo/editores.
Para la extensin seleccionada en la lista Extensiones, encontramos los editores asociados en la lista de Editores. Por tanto, vamos seleccionando las extensiones que emplearemos (PNG, JPG y GIF). Para cada una, elegiremos uno o varios editores de la lista. Podemos aadir ms editores pulsando en el icono + sobre la lista de editores. Al hacerlo, se abrir el dilogo del sistema operativo, en el que tenemos que elegir el archivo ejecutable (acabado en .exe) de la aplicacin. La lista de editores asociados nos aparecer al hacer clic derecho sobre la imagen, en el submen Editar con. Es convinente establecer un editor como principal pulsando en Convertir en principal . Una vez establecido un editor principal para un tipo de archivo, el icono ser sustituido por el icono de dicho programa, por ejemplo, para Photoshop .
Al pulsar sobre dicho icono se abrir el programa correspondiente que hemos establecido como principal.
374
Pginas avanzadas
Volver a la Unidad 6
375
Pginas avanzadas
En la carpeta ejercicios\menuCSS encontrars los archivos necesarios para crear este men. Observa que tienes las distintas imgenes que se muestran en los elementos del men. Nota: Para crear este men utilizaremos propiedades CSS y elementos HTML que todava no hemos visto. No vamos a entrar en detalles de cada uno, ya que esto lo haremos ms adelante. nicamente queremos ilustrar lo que podemos lograr con CSS.
Crear el men
1. Desde el men Archivo, haz clic en Abrir y busca el archivo menu.htm que encontrars en la carpeta ejercicios\menuCSS. Observa que tenemos varios los distintos elementos del men como prrafos distintos. Lo habitual es crear los mens a partir de listas. Por tanto vamos a convertirlo. 2. Selecciona los prrafos, y pulsa el botn para convertirlos en una lista.
3. Si te fijas en la barra de estado, vers una etiqueta <div>. Haz clic sobre ella. Ahora le vamos a signar un ID, para distinguirlo del resto de elementos que podra tener nuestra pgina. 4. En el desplegable ID de div, escribe menu.
Vamos ahora a crear las reglas CSS para los distintos elementos. 5. En el Inspector de propiedades CSS, haz clic en el botn Nueva regla. 6. Elige el Tipo de selector ID, y como Nombre #menu, y pulsa Aceptar.
376
5. 6.
Pginas avanzadas
7. Ahora definimos las distintas propiedades. En la categora Tipo hemos definido el aspecto del texto:
9. A parte, hemos cambiado en Cuadro, Height a 30px;. 10. Pulsamos Aceptar. ya tenemos esta regla completa. 11. Creamos una nueva regla a que afecte a la lista. Para ello elegimos el selector Compuesto #menu ul. Esto lo limita a las listas que estn dentro del elemento con ID men, lo que evita que se aplique a otras listas que pudisemos tener en nuestra pgina. 12. En la categora Cuadro, hemos establecido las siguientes propiedades:
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 377
Pginas avanzadas
12.
Nota: Hemos puesto la propiedad Width (ancho) a un valor fijo, porque en nuestro caso tenemos 5 elementos que crearemos con tamao concreto. Si aadimos o quitamos elementos, habra que variar este tamao. 13. En Lista, hemos cambiado la propiedad list-style-type a none, para que no se muestren las vietas junto a los elementos. 14. Hemos acabado con esta regla, pulsamos Aceptar. 15. Creamos una nueva regla para los elementos de la lista, empleando el selector Compuesto #menu li. 16. Hemos cambiado las siguientes propiedades: En la categora Tipo, Line-height a 30px; en Bloque, Textalign a center; y en Cuadro, les hemos asignado un tamao fijo (el de la imagen) como puedes ver en el siguiente grfico:
17. Pulsamos Aceptar para guardar esta regla. 18. Creamos una nueva regla para los enlaces del men, empleando el selector Compuesto #menu a. 19. En la categora Tipo, ajustamos las propiedades Color a #CCC y Text-decoration a none. 20. En la categora Fondo es donde estableceremos las imgenes de fondo de los elementos del men:
378
19. 20.
Pginas avanzadas
21. Para acabar con esta regla, en Bloque establecemos la propiedad Display a block. Si lo pruebas, vers que se muestran los elementos en una lnea y con la imagen de fondo. Ahora crearemos las reglas para que cambien segn el estado del enlace. 22. Creamos una nueva regla para los enlaces del men cuando tienen le cursor encima, empleando el selector Compuesto #menu a:hover. 23. En Tipo, cambiamos el Color del texto a #FFF, y en Fondo cambiamos la imagen de fondo (backgroundimage) a blackmenu_hover.png. 24. Hemos acabado con esta regla, pulsamos Aceptar. 25. Creamos una nueva regla para los enlaces del men cuando son pulsados, empleando el selector Compuesto #menu a:active. 26. En Tipo, cambiamos el Color del texto a #FFF, y en Fondo cambiamos la imagen de fondo (backgroundimage) a blackmenu_active.png. 27. Hemos acabado con esta regla, pulsamos Aceptar. Puedes probar la pgina (F12) o con la Vista en vivo, y comprobar qu ocurre al pasar el ratn por un elemento y al hacer clic sobre l. Imaginemos que nuestro sitio tiene un men como ste, repetido en cada pgina. Lo normal sera que el elemento que lleva a la pgina actual ya aparezca pulsado. Esto lo haremos creando una clase, y en cada pgina le daremos la clase al enlace correspondiente. 28. Creamos una nueva regla para el enlace pulsado, empleando el selector Compuesto #menu .pulsada ,#menu .pulsada:hover. 29. En Fondo, cambiamos la imagen de fondo (background-image) a blackmenu_pulsada.png. 30. Pulsa Aceptar. 31. Selecciona una etiqueta de enlace (a) y en el desplegable Clase del Inspector de propiedades HTML, asgnale la clase pulsada. Crear un men de este tipo es mucho ms personalizable que crear una barra de navegacin desde
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 379
Pginas avanzadas
Dreamweaver, pero tambin requiere que conozcamos las propiedades CSS. Profundizaremos en ella ms adelante.
Volver a la Unidad 6
380
Pginas avanzadas
Smbolos
Carcter Entidad con nombre • … ′ ″ ‾ ⁄ € ℘ ℑ ℜ ™ ℵ ← ↑ → ↓ ↔ ↵ ⇐ ⇑ ⇒ ⇓ ⇔ ∀ ∂ ∃ ∅ ∇ ∈ ∉ Entidad numrica • … ′ ″ ‾ ⁄ € ℘ ℑ ℜ ™ ℵ ← ↑ → ↓ ↔ ↵ ⇐ ⇑ ⇒ ⇓ ⇔ ∀ ∂ ∃ ∅ ∇ ∈ ∉
381
Pginas avanzadas
∋
∋
Otros Smbolos
Carcter Entidad con nombre ∏ ∑ − ∗ √ ∝ ∞ ∠ ∧ ∨ ∩ ∪ ∫ ∴ ∼ ≅ ≈ ≠ ≡ ≤ ≥ ⊂ ⊃ ⊄ ⊆ ⊇ ⊕ ⊗ ⊥ ⋅ ⌈ ⌉ ⌊ ⌋ ⟨ Entidad numrica ∏ ∑ − ∗ √ ∝ ∞ ∠ ∧ ∨ ∩ ∪ ∫ ∴ ∼ ≅ ≈ ≠ ≡ ≤ ≥ ⊂ ⊃ ⊄ ⊆ ⊇ ⊕ ⊗ ⊥ ⋅ ⌈ ⌉ ⌊ ⌋ 〈
382
Pginas avanzadas
Caracteres Tipogrficos
Carcter espacio Entidad con nombre ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ­ ® ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ Entidad numrica   ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ­ ® ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½
383
Pginas avanzadas
¾ ¿
¾ ¿
Pginas avanzadas
ß
ß
Alfabeto Griego
385
Pginas avanzadas
Carcter
Entidad con nombre ƒ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω α β γ δ ε ζ η θ ι κ λ μ ν
Entidad numrica ƒ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω α β γ δ ε ζ η θ ι κ λ μ ν
386
Pginas avanzadas
ξ ο π ρ ς σ τ υ φ χ ψ ω ϑ ϒ ϖ
ξ ο π ρ ς σ τ υ φ χ ψ ω ϑ ϒ ϖ
Volver a la Unidad 12
387
Pginas avanzadas
Utilizaremos las Expresiones Regulares para decidir cules sern el resto de los caracteres. Para utilizar estos smbolos especiales tendremos que marcar la casilla Utilizar expresin regular en el cuadro de dilogo de Buscar y Remplazar:
Una vez tengamos la casilla marcada, todo lo que escribamos en el cuadro de bsqueda se tomar como una expresin regular, as que empecemos a ver los smbolos que podemos utilizar:
Smbolo Significado
Utiliza este smbolo para buscar cadenas al principio de un documento. Esta expresin regular no es muy til, pues normalmente los documentos HTML empiezan con la especificacin de las cabeceras lo que, normalmente, no pertenece a nuestro objetivo de bsqueda. Utilizando este smbolo podramos encontrar documentos buscando por
388
Pginas avanzadas
^<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Esto nos dara como resultados los documentos que empiecen por <!DOCTYPE html PUBLIC "//W3C//DTD XHTML, por lo que los documentos que empiecen por <!DOCTYPE HTML PUBLIC "//W3C//DTD HTML no apareceran.
En este ejemplo se estn buscando archivos que sigan el formato XHTML, los documentos despreciados seran aquellos que sigan HTML.
Utiliza este smbolo para buscar cadenas al final de un documento. Igual que la anterior, esta expresin regular no nos ser de mucha ayuda cuando utilicemos la herramienta Buscar y Reemplazar . Slo podremos buscar documentos que terminen de determinada manera. Por ejemplo, podemos buscar archivos que terminen con </html>$ Esta bsqueda nos devolvera todos aquellos documentos que se han cerrado correctamente, los que terminen, por ejemplo en </body> no se mostraran.
Ahora ya entramos con expresiones regulares mucho ms tiles. El asterisco te ayudar a buscar un carcter que aparezca una vez, varias o ninguna. Veamos un ejemplo, si hacemos la bsqueda por a*u Los resultados que podemos encontrar seran aula, aaula, aaaaula o incluso uno o c uello, porque el asterisco implica que el carcter no tiene porque aparecer.
Casi ocurre lo mismo con esta expresin regular. El signo + buscar coincidencias de un carcter una vez o varas. En este caso se despreciarn aquellas en las que no aparezca. Por ejemplo, si buscamos a+u Los resultados podran ser aula, aaula o aaaula, pero no ni uno ni cuello porque este smbolo
389
Pginas avanzadas
Veamos ahora qu ocurre con el signo de interrogacin. Este smbolo es el contrario del anterior, slo busca coincidencias una sola vez o ninguna, de modo que buscando au?la Podemos encontrar aula, ala, aulaclic o alameda, pero nunca auula ni auuulaclic. Es decir, este smbolo nos sirve para marcar caracteres opcionales.
El punto es un smbolo muy til. Podemos utilizarlo para sustituir cualquier carcter , por ejemplo, en la bsqueda de de.a Podramos encontrar resultados como dela, desa, deia, dera, de9a... pero nunca dea (aunque s deaa). En definitiva, este smbolo sustituye a un carcter ni ms ni menos.
Llegados a este punto podras realizar bsquedas ms complejas combinando varias expresiones que hemos visto, por ejemplo, de.?a Encontrara dela, desa, deia, dera, de9a e incluso dea pues al escribir ? a la derecha del punto hemos indicado que ese carcter puede aparecer o no.
uno|otro
El smbolo | se utiliza para representar la conjuncin lgica OR, es decir, uno u otro. Podemos buscar 99|ade Y encontraramos resultados tan variados como adecuado, cadena, 1099, 9900, etc... Piensa que ahora podemos complicar mucho ms las bsquedas combinando todos los smbolos vistos, con esta bsqueda: de.?a|de?a Encontraramos resultados como dela, desarmado, dea (que cumple ambas condiciones) o da
390
Pginas avanzadas
{n}
Los smbolos de llave indican repeticin. Nos ayudarn a establecer el nmero de veces que se repite el carcter al cual precede. Por ejemplo, buscando cas{2}a Encontrara nicamente las palabras que contengan cassa (como cassa, mi cassa, ocassa7a, recassaa...). Sin embargo, la bsqueda de cas{2} Podra encontrar cassa, casssa, mi cassssa, etc... Pues buscar una cadena que contenga ca seguida de 2 eses.
{n,m}
Este sera otro caso de smbolo de llave, pero en este caso introduciremos dos nmeros. Estos nmeros indicarn la repeticin que puede tener el carcter al cual preceden. Por ejemplo, la bsqueda: m{2,4} Encontrara coincidencias con cadenas que contuviesen al menos 2 m o hasta como mximo 4. Posibles resultados seran mm, mmm o mmmm. La cadena ummmm s que se encontrara, mientras que en ummmmm slo encontrara las 4 primeras emes.
En esta expresin regular podemos obviar la segunda parte para conseguir algo como esto: m{2,} El resultado ahora sera cualquier cadena que contenga al menos 2 m y sin mximo de repeticin. Las cadenas umm, ummmmmmm o ummmmmmmmmmm se encontraran sin problemas. Hasta ahora hemos visto expresiones regulares simples. Estos smbolos pueden combinarse para formar bsquedas ms complejas. Pero si los combinamos con los siguientes podremos buscar prcticamente cualquier cosa.
391
Pginas avanzadas
Smbolo Significado
()
Los parntesis nos sern de gran ayuda cuando realicemos bsquedas con expresiones regulares. Con los parntesis podemos agrupar caracteres y aplicarles una regla de regularidad. Por ejemplo: (au)+la Dara como resultados aula, auaula, auauaula, pero no la.
El uso de estos smbolos nos ayudar muchsimo cuando trabajemos con Expresiones Regulares.
[abc]
Los corchetes se utilizarn para establecer rangos o conjuntos de caracteres que sern incluidos en la busqueda. De este modo imagen_[abc] Encontrar resultados como imagen_a, imagen_b o imagen_c.
Tambin podemos establecer un rango para evitar tener que introducir todos los componentes del conjunto: imagen_[c-f] Que mostrar los resultados que contengan imagen_c, imagen_d, imagen_e o imagen_f.
Esta expresin es muy til, imagina la siguiente bsqueda: [a-zA-Z]+ Buscar cualquier cadena formada por maysculas o minsculas (o incluso ambas mezcladas). Al aadirle el smbolo + hacemos que los caracteres indicados a la izquierda (el rango de maysculas o minsculas) deban aparecer por lo menos una vez, as encontraremos cualquier tipo de palabra que no contenga caracteres numricos. Esta bsqueda encontrara, por ejemplo, las palabras Esta, cadena, SI, qUe, sE o EncuEntrA pero no sera capaz de encontrar sie7e o cancin porque ni los nmeros ni las letras acentuadas se encuentran en el rango [a-zA-Z].
392
Pginas avanzadas
La siguiente bsqueda incluira nmeros y acentos: imagen_[a-z0-9] Esta vez podramos encontrar imagen_casa, imagen_07a, imagen_ladrn o imagen_f5gh. Pero no imagen_A porque esta vez las maysculas no se han incluido.
[^abc]
Utiliza este smbolo eliminar caracteres de las bsquedas. Por ejemplo: imagen_[^0-9] Slo encontrar cadenas que empiecen por imagen_ y el siguiente carcter no sea numrico. Como por ejemplo, imagen_casa, imagen_ladrn o imagen_sie7e. En este caso imagen_0casa no se encontrara.
Este es un smbolo muy especial, pues te permitir buscar caracteres reservados como pueden ser +, ^, * o $ sin que se confundan como expresiones regulares. Imagina que queremos buscar en concreto la cadena imagen_123* y la cadena imagen_456*, cmo lo hacemos? Fcil, escribiendo: imagen_(123|456)\*
Como puedes ver, buscar cualquier cadena que contenga imagen_123 o imagen_456 seguida de un asterisco. Si no hubisemos aadido la barra de escape (imagen_(123|456)*) significara que lo que se encuentra entre parntesis podra repetirse varas veces o incluso ni aparecer.
Ahora veremos smbolos que nos ayudarn a reproducir estados especiales, como espacios, principios de palabra, tabulaciones, etc...
\b
Este smbolo representa un lmite en una cadena de texto ya bien sea creado por un espacio o un retorno de carro. Esto no sayudar a encontrar principios y finales de palabras. Con la bsqueda:
393
Pginas avanzadas
\bs Encontraramos salida pero no cosa porque en este caso la s no se encuentra al principio de la palabra.
\B
Este smbolo indica que el carcter se encuentra dentro de una cadena de texto y no en los lmites. Podramos decir que esta expresin es contraria a la anterior. Con la bsqueda: \Bc Encontraramos ocaso pero no cama.
\d
Este smbolo sustituye a cualquier carcter numrico, es equivalente a la expresin [0-9]. La bsqueda: sie\de Encontrara sie7e pero no siete.
\D
Al contrario que el anterior, esta expresin equivale a un carcter no numrico, es equivalente a la expresin [^0-9]. La bsqueda: sie\De Encontrara siete pero no sie7e.
\w
Este smbolo sustituye a cualquier carcter alfanumrico incluyendo el subrayado, es equivalente a la expresin [a-ZA-Z0-9_].
394
Pginas avanzadas
\W
Al contrario que el anterior, esta expresin equivale a cualquier carcter que no sea alfanumrico ni el subrayado, es equivalente a la expresin [^a-zA-Z0-9_].
\s
\r
\t
Volver a la Unidad 12
395
Pginas avanzadas
Como puedes ver en la imagen, este cuadro de bsqueda es muy similar al que estamos acostumbrados a utilizar, slo que tiene un espacio entre los campos Buscar y Reemplazar que nos darn la oportunidad de trabajar con etiquetas. Selecciona en el segundo desplegable la etiqueta en la que quieres que se encuentre tu texto (o no, segn hayas seleccionado en el primero). Ahora estars listo para realizar bsquedas en etiquetas especficas.
396
Pginas avanzadas
Puedes incluir ms opciones sobre el tipo de atributos que tenga (e incluso en los desplegables de la derecha incluir un valor para el atributo) o seguir buscando por otras opciones. Vers que en seguida te hars con el mtodo de bsqueda.
Lo que tenemos que destacar es que esta forma te ayudar a modificar el texto que se encuentre dentro de una etiqueta. Pero qu pasa si lo que queremos es buscar o modificar una etiqueta especifica con unas circunstancias igual de especficas? Muy sencillo, en el desplegable Buscar: seleccionaremos Etiqueta especfica. Vers el siguiente cuadro de dilogo:
397
Pginas avanzadas
En este caso tenemos dos secciones Buscar: y Accin:. Obviamente para realizar la segunda tendremos que rellenar los datos correctos en la primera. As que veamos qu nos podemos encontrar. En el desplegable de al lado de Etiqueta especifica deberemos indicar el tipo de etiqueta que estamos buscando. Luego en la lnea siguiente podremos indicar si tiene algn tipo de atributo (y con qu valor) o si se encuentra dentro de otra etiqueta. Estas ltimas opciones son muy parecidas a las que se utilizaron en el mtodo de Texto (avanzado).
Como puedes ver, puedes escoger entre varias acciones a aplicar, entre reemplazar la etiqueta con otra o cambiar alguno de sus atributos como aadir algo antes o despus de sta.
Por ejemplo, si quisisemos quitar todos los enlaces de una pgina podramos utilizar la opcin Etiqueta especfica para ello, bastar con que indiques las opciones que puedes ver en la siguiente imagen:
398
Pginas avanzadas
Volver a la Unidad 12
399
Pginas avanzadas
Eventos no includos en el panel Comportamientos, pero que podramos emplear: onDragDrop onError onChange onMove onReset onResize onSelect onSubmit onUnload
Si observas el panel comportamientos, al principio aparecen los mismos eventos, precedidos por la etiqueta <a>. La diferencia es que si seleccionamos estos eventos, se crear un enlace alrededor del elemento y se aplicar el comportamiento al enlace. Si no, se aplicar directamente al elemento. Esto es muy comn. As, al crear un enlace, el usuario sabe que es algo que se puede pulsar, porque al pasar por encima el cursor toma forma de mano, o porque tienen el estilo propio de los enlaces.
400
Pginas avanzadas
Volver a la Unidad 15
401
Pginas avanzadas
Si observas la imagen anterior, distinguirs tres colores: El azul, sirve para resultar el elemento. El rosa, indica el padding aplicado al elemento. El amarillo, corresponde al margin aplicado al elemento. Adems, la vista Actual del panel Estilos CSS nos ir mostrando las reglas que afectan al elemento. Las resaltadas con un fondo ms oscuro, corresponden directamente al elemento. As, en la imagen anterior, vemos que el elemento resaltado es un prrafo, con un padding de 5px, aunque le afectan reglas del body y de #content.
Volver a la Unidad 17
402
Ejercicio
1. Crea una carpeta en tu disco duro, dentro de la carpeta ejercicios donde guardar los archivos de los distintos que vayamos creando. Llmala mis_sitios. 2. Copia a ella la carpeta cocina que encontrars en la carpeta ejercicios del curso. 3. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 4. Haz clic sobre el men Sitio. 5. Elige la opcin Administrar sitios. Se abrir una nueva ventana. 6. Pulsa el botn Nuevo.... 7. Se abrir una nueva ventana, selecciona la opcin Sitio. 8. En Nombre del sitio escribe Cocina. 9. En Carpeta del sitio local busca la carpeta cocina que acabas de copiar, y que se encuentra dentro de la carpeta mis_sitios. Seleccinala. Puedes hacerlo a travs del botn con forma de carpeta. 10. Pulsa el botn Guardar y el sitio estar listo. A partir de este momento, realizando los ejercicios paso a paso, vamos a crear una pgina como la que aparece en el sitio Cocina de la carpeta de Ejercicios.
Volver a la teora
403
Ejercicio
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2. Abre el men Archivo y elige la opcin Nuevo, o bien haz clic sobre el botn herramientas. 3. Selecciona Pgina en blanco en Categora. 4. Selecciona HTML en Tipo de pgina. 5. Haz clic sobre el botn Crear. 6. A partir de este momento vamos a realizar todos los ejercicios en la vista diseo. Haz clic sobre el botn Mostrar vista de diseo . 7. Haz clic con el botn derecho del ratn sobre el documento en blanco, para abrir su men contextual. 8. Elige la opcin Propiedades de la pgina en el men contextual y selecciona la categora Apariencia (CSS). 9. En Color de texto: escribe #585858. 10. En Color de fondo: escribe #FEFEFE. 11. Haz clic en la categora Vnculos CSS. 12. En Color de vnculos: escribe #DFA01B. 13. En Vnculos visitados: escribe #F9CA69. 14. En Vnculos activos: escribe #FFB900. 15. Haz clic en la categora Ttulo/codificacin. 16. En Ttulo, escribe Cocina. 17. Haz clic sobre el botn Aceptar. 18. Haz clic sobre el botn Guardar de la barra de herramientas. Guarda el documento con el nombre de la barra de
Volver a la teora
404
Ejercicio
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2. Si no aparece el panel Archivos, brelo a travs del men Ventana, opcin Archivos. 3. Selecciona el sitio Cocina en el panel Archivos. Recuerda que creamos este sitio en el tema anterior. 4. Haz doble clic sobre el documento quienes.htm, que aparece en los archivos desplegados en el panel de Archivos. Se abrir el documento en Dreamweaver. 5. Sita el punto de insercin antes de la primera letra de la primera lnea. 6. Escribe el texto Quines somos y pulsa la tecla Intro para saltar de lnea. 7. Si no aparece el inspector de propiedades, brelo a travs del men Ventana, opcin Propiedades. 8. Haz clic en el texto Quines somos. 9. En Formato, del inspector de propiedades HTML, elige Encabezado 1. Observa como ahora el texto es de mayor tamao. 10. En la barra de herramientas de documento, haz clic sobre la caja de texto Ttulo, y escribe Quines somos. 11. Haz clic sobre el botn Guardar de la barra de herramientas.
Volver a la teora
405
Ejercicio
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2. Si no aparece el panel Archivos, brelo a travs del men Ventana, opcin Archivos. 3. Selecciona el sitio Cocina en el panel Archivos. Recuerda que creamos este sitio en el tema anterior a partir de archivos de la carpeta Ejercicios. 4. Haz doble clic sobre el documento postresemana.htm, que aparece en los archivos desplegados en el panel Archivos. Se abrir el documento en Dreamweaver. 5. Si no aparece el Inspector de propiedades HTML, brelo a travs del men Ventana, opcin Propiedades. 6. Haz clic en la primera lnea Postre de la semana. 7. En el desplegable Formato, elige Encabezado 1. 8. Haz clic en la segunda lnea Boniatos a la mallorquina. 9. En el desplegable Formato, elige Encabezado 2. 10. Selecciona las tres lneas de texto desde 1kg de boniatos hasta Abundante aceite. 11. Haz clic sobre el botn Lista sin ordenar del Inspector de propiedades HTML.
12. Selecciona las lneas desde Mondar los boniatos hasta el final. 13. Haz clic sobre el botn de Lista ordenada del inspector de propiedades.
14. Haz clic sobre la barra de herramientas, para cambiar el Ttulo, e introduce Postre de la semana. 15. Haz clic sobre el botn Guardar
Ctrl + S.
Volver a la teora
406
Ejercicio
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2. Si no aparece el panel Archivos, brelo a travs del men Ventana, opcin Archivos. 3. Selecciona el sitio Cocina en el panel Archivos. 4. Haz doble clic sobre el documento postresemana.htm, que aparece en el panel Archivos. Se abrir el documento en Dreamweaver. 5. Haz clic sobre cualquier texto, sin seleccionar. 6. En el Inspector de propiedades CSS, en el desplegable Fuente elige Arial,Helvetica,sans-serif. 7. Se abrir la ventana Nueva regla CSS. En Tipo de selector elige Etiqueta, en Nombre de selector elige body, y en Definicin de regla deja Slo este documento. 8. Pulsa Aceptar. Observars como cambia toda la tipografa de la pgina. 9. Haz clic en la primera lnea Postre de la semana. 10. En el Inspector de propiedades CSS, en el desplegable Regla de destino elige <Nueva regla CSS>. 11. Cambia el valor de Tamao a 140%. 12. Se abrir la ventana Nueva regla CSS. En Tipo de selector elige Etiqueta. En Nombre de selector, asegrate de que ya pone h1. 13. Pulsa Aceptar. 14. Vamos a editar la regla. Haz clic en el botn Editar regla. 15. En la categora Fondo, en Background-color escribe #F9CA69. Pulsa Aceptar. 16. Haz clic en la segunda lnea Boniatos a la mallorquina. 17. En el Inspector de propiedades CSS, en el desplegable Regla de destino elige <Nueva regla CSS>. 18. Pulsa en el icono para poner el texto en cursiva.
19. Se abrir la ventana Nueva regla CSS. En Tipo de selector elige Etiqueta. En Nombre de selector, asegrate de que ya pone h2. 20. Pulsa Aceptar. 21. En el desplegable Fuente, elige Verdana, Geneva, sans-serif. 22. 23.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 407
20. 21. 22. Haz clic en el desplegable de color e introduce #6F9DBE. 23. En el Inspector de propiedades CSS, en el desplegable Regla de destino elige body. 24. Pulsa el botn Editar regla. 25. En la categora Fondo, en background-image elige la imagen fondococina.png que encontrars en la carpeta imagenes del sitio. Pulsa Aceptar. 26. Haz clic sobre el botn Guardar todo cambios. de la barra de herramientas o pulsa Ctrl + S para guardar los
Ejercicios pasoa paso
Volver a la teora
408
Ejercicio
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2. Si no aparece el panel Archivos, brelo a travs del men Ventana, opcin Archivos. 3. Selecciona el sitio Cocina en el panel Archivos. 4. Haz doble clic sobre el documento postresemana.htm, que aparece en el panel Archivos. Se abrir el documento en Dreamweaver. 5. Haz doble clic sobre la palabra Comensales para seleccionar la palabra completa. 6. En el Inspector de propiedades CSS, pulsa el icono para poner el texto en cursiva.
7. Se abrir la ventana Nueva regla CSS. En Tipo de selector asegrate de que est elegido Clase . 8. En Nombre de selector, escribe info, y en Definicin de regla deja Slo este documento. 9. Pulsa Aceptar. 10. En el selector de color, escribe #678090. 11. Selecciona el texto Tiempo de reparacin. 12. En el Inspector de propiedades CSS, en el desplegable Regla de destino elige info. 13. Selecciona el texto Tiempo de coccin, y repite el paso anterior. 14. Haz doble clic sobre Ingredientes para seleccionar el texto. 15. En el Inspector de propiedades CSS, pulsa el botn Editar regla. 16. Se abrir la ventana Nueva regla CSS. En Tipo de selector elige Clase . En Nombre de selector, escribe instrucciones. 17. Pulsa Aceptar. 18. En la categora Tipo, en Font-weight, selecciona bold. 19. En Color introduce #678090. 20. Pulsa Aceptar. 21. Haz doble clic sobre Preparacin para seleccionar el texto. 22. En el Inspector de propiedades CSS, en el desplegable Regla de destino elige instrucciones. 23.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 409
El aspecto de la pgina postresemana.htm, con los cambios que hemos realizado hasta este ejercicio es el que puedes ver aqu.
Volver a la teora
410
Ejercicio
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2. Si no aparece el panel Archivos, brelo a travs del men Ventana, opcin Archivos. 3. Selecciona el sitio Cocina en el panel Archivos. 4. Haz doble clic sobre el documento menu.htm, que aparece en el panel Archivos. Recuerda que este archivo lo creamos en ejercicios anteriores. Se abrir el documento en Dreamweaver. 5. Inserta los siguientes prrafos: Quines somos Plato Semana Postre Semana Tu Receta 6. Selecciona todos los prrafos y pulsa el botn desde el Inspector de propiedades HTML. para convertirlo en una lista no ordenada. Debes hacerlo
7. Haz clic sobre la etiqueta <ul> de la barra de estado para seleccionar la lista. 8. En el Inspector de propiedades CSS, en el desplegable Regla de destino elige <Nueva regla CSS> y pulsa en Editar regla. 9. Se abrir la ventana Nueva regla CSS. En Tipo de selector asegrate de que est elegido Clase . 10. En Nombre de selector, escribe .menu, y en Definicin de regla deja Slo este documento. 11. Pulsa Aceptar. 12. En la categora Tipo, en Font-weight, selecciona bold, y en Font-size 12px. 13. En la categora Cuadro, en Width introduce 100px. Padding, deja marcado Igual para todo e introduce 0 en Top. En Margin, desmarca Igual para todo e introduce auto en Left y Right. 14. En la categora Lista, en List-style-type selecciona none. 15. Pulsa Aceptar. 16. Aplcale la clase a la lista desde el desplegable Clase del Inspector de propiedades HTML. 17. Haz clic en el primer elemento de la lista. 18. En el Inspector de propiedades CSS, en el desplegable Regla de destino elige <Nueva regla CSS> y
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 411
19.
19. Observa que aparece el selector compuesto .menu li. Es decir, el estilo afectar a los elementos de lista que estn dentro de una lista con la clase menu. Pulsa Aceptar. 20. En la categora Fondo, en background-color introduce #FFF, en background-image pulsa Examinar y elige fondo-menu.png de la carpeta imagenes. 21. En Background-repeat elige repeat-x y en background-position (Y) elige bottom. 22. En la categora Bloque, en Text-align, selecciona center. 23. En la categora Cuadro, en Margin, desmarca Igual para todo e introduce 10 en Bottom. 24. En la categora Borde, en Style, deja marcado Igual para todo y elige solid en Top. En Width introduce 1. Desmarca Igual para todo en Color e introduce, de arriba a abajo, #999, #333, #333, #999. 25. Pulsa Aceptar. 26. Haz clic en el primer elemento de la lista. 27. En el Inspector de propiedades CSS, en el desplegable Regla de destino elige <Nueva regla CSS> y pulsa en Editar regla. 28. Observa que aparece el selector compuesto .menu li. Compltalo para que quede .menu li:hover (cuando el cursor est sobre el elemento). Pulsa Aceptar. 29. En la categora Fondo, en background-color introduce #FFEDCF y pulsa Aceptar. 30. Haz clic sobre el botn Guardar cambios. de la barra de herramientas o pulsa Ctrl + S para guardar los
Volver a la teora
412
413
7. Haz doble clic sobre el documento quienes.htm, que aparece en el panel Archivos. 8. Ve al men Ventana y elige Estilos CSS. Se abrir el panel. 9. Haz clic en el botn Todo. 10. Selecciona <style>. 11. Pulsa el botn 12. Pulsa el botn , en la esquina inferior derecha, para borrar los estilos incrustados. para adjuntar una hoja de etilos.
13. Se abrir la hoja Vincular hoja de estilos externa con las opciones ya seleccionadas. Si no, sigue el paso 4. 14. Pulsa Aceptar. 15. Haz clic sobre el botn Guardar cambios. de la barra de herramientas o pulsa Ctrl + S para guardar los
Volver a la teora
414
Ejercicio
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2. Si no aparece el panel Archivos, brelo a travs del men Ventana, opcin Archivos. 3. Selecciona el sitio Cocina en el panel Archivos. 4. Haz doble clic sobre el documento quienes.htm, que aparece en el panel Archivos. 5. Se abrir el documento en Dreamweaver. 6. Si no aparece el inspector de propiedades, brelo a travs del men Ventana, opcin Propiedades. 7. Si el inspector de propiedades no se muestra en su totalidad, pulsa sobre el botn propiedades ms avanzadas. 8. Selecciona la imagen del logotipo de aulaClic. Para ello hay que hacer clic sobre ella. 9. En Vnculo, del inspector de propiedades, escribe http://www.aulaclic.es. 10. En Dest selecciona la opcin _blank. 11. Pulsa fuera del texto para que deje de estar seleccionado y se le apliquen todos los cambios. 12. Pulsa F12 para ver el resultado en tu navegador, observa que si posicionas el ratn encima de la imagen, el puntero del ratn cambia de aspecto (normalmente toma forma de mano con el dedo ndice sealando) esto te indica que asociado a la imagen hay un hiperenlace y en la barra de estado puedes ver la pgina a la que enlaza. Observa tambin que la imagen muestra un recuadro naranja alrededor, que no queda demasiado bien con su fondo transparente. 13. Cierra la ventana del navegador. 14. Vamos a quitar el borde de la imagen. En el Inspector de propiedades CSS, en Regla de destino, elige Nueva regla, y pulsa el botn Editar regla. 15. En Tipo de selector elige Compuesto. 16. En Nombre del selector, escribe a img. 17. En Definicin de regla selecciona la hoja estilococina.css. 18. Pulsa Aceptar. 19. Ve a la categora Borde. En Border-style elige none y pulsa Aceptar. 20. Haz doble clic sobre el documento menu.htm, que aparece en el panel Archivos. 21. aulaClic S.L. Todos los derechos reservados. www.aulaclic.es
415
19. 20.
Ejercicios pasoa paso
21. Para cada elemento de la lista, selecciona el texto y crea el enlace a la pgina correspondiente del sitio. No pongas nada en Destino. 22. Con el cursor en un elemento de la lista, en el Inspector de propiedades CSS, en el desplegable Regla de destino elige <Nueva regla CSS> y pulsa en Editar regla. 23. Observa que aparece el selector compuesto .menu li a. Pulsa Aceptar. 24. En la categora Tipo, en color introduce #000 y en Text-decoration selecciona none. 25. En la categora Cuadro, en Padding, deja marcado Igual para todo e introduce 3 en Top. 26. En la categora Bloque, en Display, selecciona Block. Esto har que el enlace ocupe todo el elemento de la lista. 27. Pulsa Aceptar. 28. En el Inspector de propiedades CSS, en el desplegable Regla de destino elige <Nueva regla CSS> y pulsa en Editar regla. 29. Observa que aparece el selector compuesto .menu li a. Compltalo para que quede .menu li a:hover (cuando el cursor est sobre el elemento). Pulsa Aceptar. 30. En la categora Tipo, en Color introduce #DB8C15 y pulsa Aceptar. 31. Haz clic en el men Archivo Guardar todo.
Volver a la teora
416
Ejercicio
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2. Si no aparece el panel Archivos, brelo a travs del men Ventana, opcin Archivos. 3. Selecciona el sitio Cocina en el panel Archivos 4. Haz doble clic sobre el documento quienes.htm, que aparece en el panel desplegable de Archivos. Se abrir el documento en Dreamweaver. 5. Si no aparece el inspector de propiedades, brelo a travs del men Ventana, opcin Propiedades. 6. Al final del todo, en una nueva lnea, escribe el texto Buscamos cocinero. Si quieres trabajar con nosotros, envanos tu CV aqu.. 7. Selecciona la palabra aqu que acabas de escribir. 8. En Vnculo, del inspector de propiedades, escribe mailto:trabajo@aulaclic.es (es una direccin ficticia. Puedes emplear la tuya para comprobar si funciona). 9. Pulsa fuera del texto para que deje de estar seleccionado y se le aplique el ltimo cambio. 10. Pulsa F12 para ver el resultado en tu navegador, observa que si haces clic sobre el texto se abre tu aplicacin de correo (si la tienes instalada en tu ordenador) preparada para que escribas el texto del mensaje que quieres enviar, en la direccin de destino habr puesto trabajo@aulaclic.com. 11. Cierra tu aplicacin de correo. 12. Cierra la ventana del navegador. 13. Haz clic sobre el botn Guardar de la barra de herramientas.
Volver a la teora
417
Ejercicio
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2. Si no aparece el panel Archivos, brelo a travs del men Ventana, opcin Archivos. 3. Selecciona el sitio Cocina en el panel Archivos. 4. Haz doble clic sobre el documento menu.htm, que aparece en el panel Archivos. 5. Se abrir el documento en Dreamweaver. 6. Crea un prrafo antes de la lista. 7. Haz clic sobre el men Insertar. 8. Elige la opcin Imagen. 9. Selecciona la imagen logotipo.gif, que se encuentra dentro de la carpeta imagenes del sitio. 10. En Relativa a: selecciona la opcin Documento. 11. Haz clic sobre el botn Aceptar. 12. En el Inspector de propiedades, escribe Cocina en el campo Alt. 13. Pulsa fuera de la imagen para que deje de estar seleccionada y se apliquen todos los cambios. 14. Selecciona la etiqueta <body> en la barra de estado. 15. En el Inspector de propiedades CSS, en el desplegable Regla de destino elige <Nuevo estilo en lnea> 16. Pulsa el botn Centrar .
17. Pulsa Vista en vivo para cmo sera el resultado. 18. Haz clic sobre el botn Guardar de la barra de herramientas.
Volver a la teora
418
Ejercicio
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2. Si no aparece el panel Archivos, brelo a travs del men Ventana, opcin Archivos. 3. Selecciona el sitio Cocina en el panel Archivos. 4. Haz doble clic sobre el documento menu.htm, que aparece en el panel Archivos. Se abrir el documento en Dreamweaver. 5. Si no aparece el Inspector de propiedades, brelo a travs del men Ventana, opcin Propiedades. 6. Selecciona la imagen, haciendo clic sobre ella. 7. Si el Inspector de propiedades no se muestra en su totalidad, pulsa sobre el botn propiedades ms avanzadas. 8. Haz clic sobre el botn Herramienta Zona interactiva poligonal para desplegar sus
9. Pulsa, en el orden de las agujas del reloj, alrededor de la silueta del gorro de la izquierda. 10. Haz clic sobre el botn Herramienta Puntero de zona interactiva para terminar de delimitar el mapa. 11. Haz clic sobre el botn Herramienta Zona interactiva poligonal , del inspector de propiedades , del inspector de propiedades .
12. Pulsa, en el orden de las agujas del reloj, alrededor de la silueta del gorro de la derecha. 13. Haz clic sobre el botn Herramienta Puntero de zona interactiva 14. Haz clic sobre el mapa del gorro de la izquierda. 15. En Vnculo, del inspector de propiedades, escribe platodelasemana.htm. 16. En Alt, escribe Plato de la semana. 17. Haz clic sobre el mapa del gorro de la derecha. 18. Haz clic sobre el icono de la carpeta que aparece junto al campo Vnculo. 19. En el dilogo, busca y selecciona el archivo postredelasemana.htm. Pulsa Aceptar. 20. En Alt, escribe Postre de la semana. 21. Pulsa fuera del mapa para que deje de estar seleccionado y se le aplique el ltimo cambio. 22. Haz clic sobre el botn Guardar 23.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 419
de la barra de herramientas.
24.
21. 22.
Ejercicios pasoa paso
23. Pulsa F12 para ver el resultado en tu navegador. Comprueba que cuando posicionas el puntero del ratn sobre los gorros, en la barra de estado aparece el enlace a la pgina web correspondiente. 24. Haz clic cobre alguno para comprobar que se abre la pgina correspondiente. 25. Cierra la ventana del navegador.
Volver a la teora
420
Ejercicio
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2. Si no aparece el panel Archivos, brelo a travs del men Ventana, opcin Archivos. 3. Selecciona el sitio Cocina en el panel Archivos. 4. Haz doble clic sobre el documento menu.htm, que aparece en el panel Archivos. Se abrir el documento en Dreamweaver. 5. Inserta dos lneas en blanco bajo la lista que forma el men (pulsando Intro) y sita el cursor al final. 6. Haz clic sobre el men Insertar. 7. Elige la opcin Objetos de Imagen. 8. Elige la opcin Imagen de sustitucin. Se abrir una nueva ventana. 9. En Nombre de imagen escribe Correo. 10. En Imagen original pulsa el botn Examinar y selecciona la imagen email1.gif que se encuentra dentro de la carpeta imagenes del sitio. 11. En Imagen de sustitucin pulsa el botn Examinar y selecciona la imagen email2.gif que se encuentra dentro de la carpeta imagenes del sitio. 12. Activa la casilla Carga previa de imagen de sustitucin. 13. En Texto alternativo escribe e-mail. 14. En Al hacerse clic, ir al URL escribe mailto:cocineros@aulaclic.es. Esta direccin es ficticia, puedes poner cualquiera. 15. Haz clic sobre el botn Aceptar. 16. Pulsa Vista en vivo para ver el resultado. 17. Pasa el cursor sobre la imagen para comprobar que cambia. 18. Haz clic sobre el botn Guardar de la barra de herramientas o pulsa Ctrl + S.
Volver a la teora
421
Ejercicio
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2. Si no aparece el panel Archivos, brelo a travs del men Ventana, opcin Archivos. 3. Selecciona el sitio Cocina en el panel Archivos. 4. Haz doble clic sobre el documento quienes.htm, que aparece en el panel Archivos. 5. Se abrir el documento en Dreamweaver. 6. Sita el punto de insercin al final el primer prrafo, y pulsa Intro para crear un nuevo prrafo. Escribe Tenemos sedes en: . 7. Haz clic sobre el men Insertar. 8. Elige la opcin Tabla. 9. En Filas: escribe 6. 10. En Columnas: escribe 4. 11. En Ancho de tabla: selecciona Pxeles y escribe 500. 12. En Grosor de borde: escribe 2. 13. Si en Relleno de celda: aparece algo escrito, brralo. 14. En Espacio entre celdas: escribe 2. 15. Selecciona el encabezado Izquierda. 16. Haz clic sobre el botn Aceptar. 17. Rellena la tabla para que quede del siguiente modo: Sedes de cocina Ciudad Direccin Horario Especialidad Reservas Valencia Avda. Constitucin 34 Gran Va, 162 10:00 - 16:30 20:30 - 00:00 12:00 - 17:00 20:30 - 00:30 Barcelona Av. Diagonal, 23 20:30 - 01:00
18.
Volver a la teora
423
Ejercicio
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2. Si no aparece el panel Archivos, brelo a travs del men Ventana, opcin Archivos. 3. Selecciona el sitio Cocina en el panel Archivos. 4. Haz doble clic sobre el documento quienes.htm, que aparece en el panel Archivos. 5. Se abrir el documento en Dreamweaver. 6. Si no aparece el inspector de propiedades, brelo a travs del men Ventana, opcin Propiedades. 7. Si el inspector de propiedades no se muestra en su totalidad, pulsa sobre el botn propiedades ms avanzadas. para desplegar sus
8. Selecciona la tabla. Para ello puedes colocar el cursor en cualquier parte de la tabla, desplegar el desplegable del encabezado de tabla y seleccionar la opcin Seleccionar tabla. 9. En Rell. celda, introduce el valor 5. 10. Haz clic en la segunda celda de la segunda fila (la de las ciudades), y arrastra hasta la ltima celda. 11. Con las celdas seleccionadas, en el desplegable Horiz. elige Centro. 12. Haz clic sobre el botn Guardar de la barra de herramientas.
Volver a la teora
424
Ejercicio
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2. Si no aparece el panel Archivos, brelo a travs del men Ventana, opcin Archivos. 3. Selecciona el sitio Cocina en el panel Archivos. 4. Haz doble clic sobre el documento quienes.htm, que aparece en el panel Archivos. 5. Se abrir el documento en Dreamweaver. Lo primero que vamos a hacer ser editar el selector body,td,th creado por Dreamweaver para que no se produzcan conflictos. 6. Abre el panel Estilos CSS (men Ventana Estilos CSS). 7. 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. 8. Si no aparece el inspector de propiedades CSS, brelo a travs del men Ventana, opcin Propiedades. 9. En le desplegable Regla de destino del Inspector de propiedades CSS, selecciona <Nueva regla CSS>, y pulsa el botn Editar regla. 10. En Tipo de Selector selecciona clase . 11. En nombre escribe sedes. 12. Y en Definicin de regla selecciona Slo en este documento. Si pensamos emplear este mismo estilo en tablas de otras pginas, entonces lo guardaramos en la hoja de estilos. 13. En la categora Tipo, cambia font-size a 80% y color #333. 14. En la categora Fondo, cambia background-color a #82C7F8. 15. En la categora Bloque, cambia text-align a center; 16. En la categora Cuadro, en Margin, desmarca Igual para todo, y en Left y Right selecciona auto. 17. Pulsa Aceptar para guardar los cambios. 18. Selecciona la tabla haciendo clic sobre su borde, y en el desplegable Clase elige sedes. 19. Haz clic sobre una celda. En la barra de estado, haz clic sobre <tr> para seleccionar la fila. 20. Inspector de propiedades CSS, selecciona <Nueva regla CSS>, y pulsa el botn Editar regla para definir el estilo de las filas. 21. aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 22.
425
20. 21. Observa que ya aparece el selector compuesto .sedes tr. Pulsa Aceptar.
22. En la categora Fondo, en background-image elige la imagen fondo-sedes.png de la carpeta imagenes. 23. En Background-repeat elige repeat-x y en background-position (Y) elige top. Pulsa Aceptar. 24. Haz clic sobre la celda donde pone Sedes de cocina. 25. Inspector de propiedades CSS, selecciona <Nueva regla CSS>, y pulsa el botn Editar regla para definir el estilo de las filas. 26. Observa que aparece el selector compuesto .sedes tr th. Compltalo para que quede .sedes tr th.titulo y pulsa Aceptar. 27. En Tipo, cambia el tamao de la fuente a 16px y su color a #7F5717. 28. En fondo, haz que el color sea #F8C982 y que se muestre la imagen imagenes/fondo-sedes-tit.png, repitindose en horizontal (x) y colocada arriba. Pulsa Aceptar. 29. Si no se ha aplicado la clase, selecciona la celda y en el Inspector de propiedades HTML, en clase elige titulo. 30. Haz clic en la celda Valencia y arrastra hasta la celda Barcelona. 31. Inspector de propiedades CSS, selecciona <Nueva regla CSS>, y pulsa el botn Editar regla para definir el estilo de las filas. 32. Observa que aparece el selector compuesto .sedes tr td. Compltalo para que quede .sedes tr td.ciudad y pulsa Aceptar. 33. En Tipo, cambia el color a #069 y font-weight a bold. 34. En fondo, haz que el color sea #BDE2FC y que se muestre la imagen imagenes/fondo-sedes-ciudad.png, repitindose en horizontal (x) y colocada arriba. Pulsa Aceptar. 35. Si se han deseleccionado, haz clic en la celda Valencia y arrastra hasta la celda Barcelona. 36. Con las celdas seleccionadas, en el Inspector de propiedades HTML, en clase elige ciudad. 37. Haz clic en el borde izquierdo de la fila Horario para seleccionarla completa. 38. En el Inspector de propiedades CSS, selecciona <Nueva estilo en lnea>. 39. En el Inspector de propiedades CSS, pulsa el icono Cursiva 40. Haz clic sobre el botn Guardar .
426
Volver a la teora
427
Ejercicio
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2. Si no aparece el panel Archivos, brelo a travs del men Ventana, opcin Archivos. 3. Selecciona el sitio Cocina en el panel Archivos. 4. Haz doble clic sobre el documento quienes.htm, que aparece en el panel Archivos. 5. Haz clic entre el borde que separa la primera y segunda columna, haciendo la columna ms estrecha, hasta que llegue a 85px (aparece indicado arriba). 6. Ahora todas las columnas tienen un ancho fijo. Como slo buscamos esto para la primera, para cada columna haz clic en su men y selecciona Borrar ancho de columna. 7. Guarda la pgina (Ctrl + S), la completaremos el siguiente ejercicio.
Volver a la teora
428
Ejercicio
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2. Si no aparece el panel Archivos, brelo a travs del men Ventana, opcin Archivos. 3. Selecciona el sitio Cocina en el panel Archivos. 4. Haz doble clic sobre el documento quienes.htm, que aparece en el panel Archivos. Se abrir el documento en Dreamweaver. 5. Si no aparece el inspector de propiedades, brelo a travs del men Ventana, opcin Propiedades. 6. Si el inspector de propiedades no se muestra en su totalidad, pulsa sobre el botn propiedades ms avanzadas. para desplegar sus
7. Selecciona la primera fila de la tabla. Puedes hacerlo situando el cursor junto al borde izquierdo de la tabla, a la altura de la primera fila, y haciendo clic cuando el puntero adquiera la forma de flecha. 8. Hacer clic sobre el botn Combinar las celdas seleccionadas , del inspector de propiedades.
9. Selecciona la segunda y la tercera celda de la segunda fila (la que pone Valencia y la que queda en blanco). Puedes hacerlo pulsando con el ratn sobre una de las celdas, y mantenindolo pulsado mientras lo arrastras sobre la otra. 10. Haz clic sobre el botn Combinar las celdas seleccionadas .
11. Modifica el tamao de las columnas para que se ajusten mejor al contenido. Puedes hacerlo manteniendo pulsado el ratn sobre los bordes de las columnas, arrastrndolos hacia las posiciones deseadas. Recuerda que la apariencia real es la que se ve en el navegador. 12. Haz clic sobre el botn Guardar de la barra de herramientas.
Volver a la teora
429
Ejercicio
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2. Si no aparece el panel Archivos, brelo a travs del men Ventana, opcin Archivos. 3. Selecciona el sitio Cocina en el panel Archivos. 4. Haz doble clic sobre el documento quienes.htm, que aparece en el panel Archivos. Se abrir el documento en Dreamweaver. 5. Si no aparece el inspector de propiedades, brelo a travs del men Ventana, opcin Propiedades. 6. Si el inspector de propiedades no se muestra en su totalidad, pulsa sobre el botn propiedades ms avanzadas. 7. Haz clic sobre el men Insertar. 8. Elige la opcin HTML y luego Marcos. 9. Elige la opcin Izquierda. Deben de tener los nombres leftFrame y mainFrame que te vienen por defecto. 10. Si no aparece el panel Marcos, brelo a travs del men Ventana, opcin Marcos. 11. Selecciona el documento de marcos. Puedes hacerlo pulsando sobre el borde exterior de los marcos, en el panel Marcos. 12. En Ttulo:, que aparece en la barra de documento, escribe Cocina. 13. En Bordes, del inspector de propiedades, selecciona No. 14. En Ancho escribe 0. 15. En Seleccin Fila Col. pulsa sobre la columna de la izquierda. 16. En Columna selecciona Pxeles y escribe 270. 17. En Seleccin Fila Col. pulsa sobre la columna de la derecha. 18. En Columna selecciona Relativo y escribe 1. 19. Selecciona el documento de marcos. Puedes hacerlo pulsando sobre el borde exterior de los marcos, en el panel Marcos. 20. Haz clic sobre el botn Guardar de la barra de herramientas o Ctrl + S. Guarda el documento con el
430
22.
20. 21. Pulsa sobre el marco izquierdo en el panel Marcos. 22. En Origen escribe menu.htm. 23. En Desplaz selecciona No. 24. En Bordes selecciona No. 25. Activa la casilla Mismo tamao. 26. Pulsa sobre el marco derecho en el panel Marcos. 27. En Desplaz selecciona No. 28. En Bordes selecciona No. 29. Desactiva la casilla Mismo tamao.
30. Selecciona el documento de marcos. Puedes hacerlo pulsando sobre el borde exterior de los marcos, en el panel Marcos. 31. En el caso de haber insertado mapas de imagen en la imagen del logotipo, selecciona cada uno de ellos y elige mainFrame en Destino, que aparece en el inspector de propiedades. 32. Edita tambin los enlaces del men para cambiar En Destino a mainFrame. 33. En Destino: selecciona mainFrame. 34. Haz clic sobre el botn Guardar todo de la barra de herramientas y prubalo en el navegador.
Volver a la teora
431
Ejercicio
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2. Si no aparece el panel Archivos, brelo a travs del men Ventana, opcin Archivos. 3. Selecciona el sitio Cocina en el panel Archivos. 4. Haz doble clic sobre el documento tureceta.htm, que aparece en el panel Archivos. Se abrir el documento en Dreamweaver. 5. Si no aparece el inspector de propiedades, brelo a travs del men Ventana, opcin Propiedades. 6. Si el inspector de propiedades no se muestra en su totalidad, pulsa sobre el botn propiedades ms avanzadas. para desplegar sus
7. No es necesario insertar el formulario, ya est creado. Dentro de l hay dos tablas. Sita el cursor dentro de la ltima celda de la primera fila de la primera tabla. Observa que le hemos definido un estilo, como a cualquier otro elemento. 8. Abre el panel Insertar. Si no lo encuentras, puedes acceder a l desde el men Ventanas. 9. Elige la opcin Formularios. Conviene que tengas el panel siempre visible, ya que insertaremos varios elementos. 10. Pulsa sobre Campo de texto en el panel Insertar. 11. Se abrir un cuadro de dilogo. En ID introduce el nombre que le daremos, en este caso nombre. En Etiqueta marca No hay etiqueta de rtulo, pues ya tenemos los textos insertados. Pulsa Aceptar. (Si no te ha aparecido este dilogo, introduce el nombre desde el inspector de propiedades). 12. Haz clic sobre el campo de texto para seleccionarlo. 13. En Campo de texto, del inspector de propiedades, veras el nombre. Si lo habas introducido antes, puedes hacerlo. 14. En Cars mx escribe 50 para limitar el nmero mximo de caracteres. 15. En Tipo estar seleccionado Una lnea. 16. Sita el cursor dentro de la ltima celda de la segunda fila de la primera tabla. 17. Repite los pasos del 10 al 15, pero con las siguientes diferencias: 18. En Campo de texto escribe email. 19. 20.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 432
17. 18. 19. En Cars mx escribe 40. 20. Sita el cursor dentro de la segunda celda de la primera fila de la segunda tabla. 21. Repite los pasos del 9 al 15, pero con las siguientes diferencias: 22. En Campo de texto escribe receta. 23. En Cars mx escribe 25. 24. Sita el cursor dentro de la segunda celda de la segunda fila de la segunda tabla. 25. Elige la opcin Seleccionar (Lista/men) en el panel Insertar. 26. En el cuadro de dilogo, introduce tipo en el campo ID. 27. Haz clic sobre el objeto de lista/men para seleccionarlo. 28. En Tipo selecciona Men. 29. Haz clic sobre el botn Valores de lista. 30. Escribe Plato en Etiqueta de elemento. 31. Pulsa sobre el botn para insertar nuevos elementos en la lista. Aade la etiqueta Postre.
Ejercicios pasoa paso
32. Haz clic sobre el botn Aceptar. 33. Selecciona Plato en Seleccionado inicialmente. 34. Sita el cursor dentro de la primera celda de la cuarta fila de la segunda tabla. 35. Pulsa en la opcin rea de texto en el panel Insertar. 36. Se abrir un cuadro de dilogo. Escribe como ID ingredientes y pulsa Aceptar. 37. Haz clic sobre el rea de texto para seleccionarlo. 38. En Tipo selecciona Varas lneas. 39. En Ancho car escribe 30. 40. En Lneas nm escribe 5. 41. Sita el cursor en la celda que hay debajo de la que pone Preparacin:. 42. Repite los pasos del 35 al 40, pero con las siguientes diferencias: 43. En ID escribe preparacion. 44. En Ancho car escribe 20. 45. En Lneas nm escribe 8. 46. Sita el cursor en la ltima celda de la segunda tabla. 47. Elige la opcin Botn en el panel Insertar. 48. En el dilogo, deja los campos en blanco y pulsa Aceptar. No es necesario establecer el nombre porque los botones no contienen datos. 49. Sita el cursor a la derecha del botn. 50. Repite los pasos 47 y 48 para insertar otro botn.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 51. 433
49. 50. 51. Selecciona el nuevo botn. 52. En Accin selecciona Restablecer formulario. 53. En Valor, escribe Borrar.
54. Con la tecla Ctrl selecciona la celda que contiene los botones, y en desplegable Horiz. elige Centro. 55. Para que el formulario tenga sentido, hemos de enviar los datos a una pgina capaz de tratarlos. Selecciona todo el formulario, y en el campo Accin copia la siguiente direccin: http://www.aulaclic.es/dreamweaver-cs4/ejemplos/sitios/cocina/recibirreceta.php 56. En el campo Destino elige _blank para que se abra en una ventana nueva. 57. Haz clic sobre el botn Guardar de la barra de herramientas.
58. Ahora puedes probar el funcionamiento de los elementos del formulario, abre el documento en tu navegador o en la Vista en vivo y rellena los campos. Si pulsas en Enviar, se enviarn los datos a la pgina indicada en el campo accin.
Volver a la teora
434
Ejercicio
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2. Si no aparece el panel Archivos, brelo a travs del men Ventana, opcin Archivos. 3. Selecciona el sitio Cocina en el panel Archivos. 4. Haz doble clic sobre el documento menu.htm, que aparece en el panel Archivos. Se abrir el documento en Dreamweaver. 5. Si no aparece el inspector de propiedades, brelo a travs del men Ventana, opcin Propiedades. 6. Sita el cursor en la lnea en blanco que queda entre la imagen el men. 7. Haz clic sobre el men Insertar. 8. Elige la opcin Meda. 9. Elige la opcin Plug-in. 10. Selecciona el archivo audio.mid, que se encuentra dentro de la carpeta media del sitio. 11. Haz clic sobre la imagen para seleccionar el archivo de audio.
12. En An, del inspector de propiedades, escribe 0. 13. En Al escribe 0. 14. Haz clic sobre el botn Parmetros que encontrars en el Inspector de propiedades. 15. En parmetro intrduce loop, y en valor true. Pulsa Aceptar. 16. Haz clic sobre el botn Guardar 17. Visualiza la pgina en tu navegador. de la barra de herramientas.
Volver a la teora
435
Ejercicio
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2. Si no aparece el panel Sitio, brelo a travs del men Ventana, opcin Sitio. 3. Selecciona el sitio Cocina en el panel Sitio. 4. Haz doble clic sobre el documento paraplantilla.htm, que aparece en el panel Sitio. 5. Se abrir el documento en Dreamweaver. 6. Haz clic sobre la opcin Guardar como plantilla, del men Archivo. Se abrir una nueva ventana. 7. En Sitio: selecciona Cocina. 8. En Guardar como: escribe plantillacocina. 9. Haz clic sobre el botn Guardar. El documento abierto en Dreamweaver pasar a ser la plantilla. 10. Selecciona el texto Ttulo haciendo doble clic sobre l. 11. Haz clic sobre el men Insertar. 12. Elige la opcin Objetos de plantilla. 13. Elige la opcin Regin editable. 14. En Nombre: escribe Ttulo. 15. Haz clic sobre el botn Aceptar. 16. Sita el punto de insercin a la derecha de la regin editable recin creada y pulsa Intro. 17. Haz clic sobre el men Insertar. 18. Elige la opcin Objetos de plantilla. 19. Elige la opcin Regin editable. 20. En Nombre: escribe Regin Documento . 21. Haz clic sobre el botn Aceptar. 22. Haz clic sobre el botn Guardar de la barra de herramientas. Ya tenemos nuestra plantilla creada.
Observa que no se ven ni las imgenes ni el estilo, ya que la plantilla ha cambiado de carpeta. Se ver correctamente siempre que las pginas que creemos estn en la carpeta raz. Ahora vamos a crear dos documentos basados en esta plantilla.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 23. 436
24.
23. Abre un documento en blanco. 24. Haz clic en el men Modificar, Plantillas, opcin Aplicar plantilla a pgina. 25. Selecciona la plantilla plantillacocina. 26. Activa la casilla Actualizar pgina cuando cambie plantilla. 27. Pulsa el botn Seleccionar. 28. Escribe en la zona editable titulo Pgina 1. 29. Escribe en la zona editable Regin Documento Esta es la primera pgina. 30. Guarda el documento como pag1.htm. 31. Ve al men Archivo Nuevo.... 32. Elige Pagina de plantilla, en sitio Cocina y en plantilla plantillacocina. 33. Edita la regin del ttulo, escribiendo Pgina 2 y escribe en la Regin de documento Esta es la segunda pgina. 34. Guarda el documento como pag2.htm. 35. Visualiza en tu navegador las pginas pag1.htm y pag2.htm. 36. Ahora vamos a cambiar la plantilla. 37. Haz clic sobre el men Ventana. 38. Elige la opcin Activos. 39. Si no aparece la lista de plantillas haz clic en el icono 40. Selecciona la plantilla plantillacocina. 41. Haz clic en el icono . .
42. Selecciona el texto Pgina 1 y crea un enlace a pag1.htm. 43. Selecciona el texto Pgina 2 y crea un enlace a pag2.htm. 44. Haz clic sobre el botn Guardar de la barra de herramientas.
45. Nos preguntar si queremos actualizar los archivos basados en la plantilla. Pulsamos Aceptar y en la siguiente ventana Cerrar. 46. Visualiza en tu navegador las pginas Pag1.htm y Pag2.htm. Observa que sin cambiar nada de las pginas ahora tienen los enlaces que permiten navegar entre ellas.
Volver a la teora
437
Ejercicio
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2. Si no aparece el panel Archivos, brelo a travs del men Ventana, opcin Archivos. 3. Selecciona el sitio Cocina en el panel Archivos. 4. Haz doble clic sobre el documento buscar.htm, que aparece en el panel Archivos. Se abrir el documento en Dreamweaver. 5. Haz clic sobre el men Edicin. 6. Elige la opcin Buscar y reemplazar. Se abrir una nueva ventana. 7. En Buscar en: selecciona Documento actual. 8. En Buscar selecciona Texto y escribe Recetas. 9. En Reemplazar con: escribe aulaClic. 10. Haz clic sobre el botn Reemp. todos. Aparecer un aviso indicando que se han encontrado y sustituido 10 elementos. 11. Pulsa sobre alguna parte de la pgina para que se aplique el ltimo cambio. 12. Haz clic sobre el botn Guardar de la barra de herramientas.
Volver a la teora
438
Ejercicio
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2. Si no aparece el panel Archivos, brelo a travs del men Ventana, opcin Archivos. 3. Selecciona el sitio Cocina en el panel Archivos. 4. Haz doble clic sobre el documento quienes.htm, que aparece en el panel Archivos. Se abrir el documento en Dreamweaver. 5. Sita el punto de insercin a la derecha de la ltima lnea de texto y pulsa Intro. 6. Escribe el texto Fecha ltima modificacin:. 7. ve al men Insertar, opcin Fecha. Se abrir una nueva ventana. 8. En Formato de da: selecciona [sin da]. 9. En Formato de hora: selecciona [sin hora]. 10. En Formato de Fecha: selecciona 7 Marzo, 1974. Si no aparece este formato, seleccionar el ms parecido. 11. Activar la casilla Actualizar automticamente al guardar. 12. Hacer clic sobre el botn Aceptar. 13. Desde la barra de estado, selecciona la etiqueta <p>. 14. En el Inspector de propiedades CSS, selecciona <Nuevo estilo en lnea>. 15. Alinea el texto a la derecha y cambia su tamao a un 80% en cursiva. 16. Haz clic sobre el botn Guardar de la barra de herramientas y cierra la pgina.
Volver a la teora
439
Ejercicio
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2. Si no aparece el panel Archivos, brelo a travs del men Ventana, opcin Archivos. 3. Selecciona el sitio Cocina en el panel Archivos. 4. Haz doble clic sobre el documento index.htm, que aparece en el panel Archivos. Se abrir el documento en Dreamweaver. Haz clic sobre el frame de la izquierda para editar el archivo menu.htm. 5. Si no aparece el inspector de propiedades, brelo a travs del men Ventana, opcin Propiedades. 6. Sita el punto de insercin a continuacin de la imagen de sustitucin de email que habamos incluido en el marco izquierdo. 7. Haz clic sobre el men Insertar. 8. Elige la opcin Objetos de diseo, luego elige la opcin Div PA. 9. Haz clic derecho sobre la esquina superior izquierda (el recuadro blanco), y en el men contextual elige ID... 10. Escribe sugerencia como nuevo ID y pulsa Aceptar. 11. Sita el punto de insercin dentro de la capa. 12. Escribe el texto no olvides mandarnos tus dudas y sugerencias. 13. Selecciona la capa pulsando sobre el cuadrado blanco que aparece en su esquina superior-izquierda. 14. Utilizando los controles para redimensionar y mover la capa, haz que quede debajo de la imagen, centrada, y que todo el texto quepa dentro. Si lo prefieres, puedes introducir los valores: En Iz escribe 56px. En An escribe 150px. En Al escribe 52px. 15. Haz clic en el contenido y ve al Inspector de propiedades CSS. 16. Asegrate que est seleccionada como Regla de destino el nombre de la capa (por defecto #apDiv1, pero lo hemos cambiado a #sugerencia), y pulsa el botn Editar regla. 17. Edita las propiedades CSS para darle un fondo blanco, un borde gris (#666) de 1px slido, reducir el tamao de la fuente a un 90% y darle un padding de 5px. Acepta los cambios del editor de estilo. 18. aulaClic S.L. Todos los derechos reservados. www.aulaclic.es
440
17.
18. Comprueba que la capa ha quedado debajo de la imagen de sustitucin, si no haz clic en el cuadrado blanco de su esquina superior-izquierda y arrstralo hasta que quede centrado en el marco y bajo la imagen de email. Comprueba tambin que el tamao permite leer todo el texto. 19. Guarda y visualzalo en el navegador. 20. Selecciona la capa pulsando sobre el cuadrado blanco que aparece en su esquina superior-izquierda. 21. En Vis selecciona hidden. 22. Pulsa fuera de la capa para que deje de estar seleccionada y se le aplique el ltimo cambio. 23. Haz clic sobre el botn Guardar de la barra de herramientas.
Volver a la teora
441
Ejercicio
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2. Si no aparece el panel Archivos, brelo a travs del men Ventana, opcin Archivos. 3. Selecciona el sitio Cocina en el panel Archivos. 4. Haz doble clic sobre el documento menu.htm, que aparece en el panel Archivos. 5. Se abrir el documento en Dreamweaver. 6. Si no aparece el inspector de propiedades, brelo a travs del men Ventana, opcin Propiedades. 7. Si no aparece el panel Comportamientos, brelo a travs del men Ventana, opcin Comportamientos. 8. Haz clic sobre la imagen de sustitucin de email para seleccionarla. 9. Haz clic sobre el botn del panel Comportamientos.
10. Elige la opcin Mostrar-Ocultar elementos. 11. En Elementos: selecciona la capa div sugerencia. 12. Haz clic sobre el botn Mostrar. 13. Haz clic sobre el botn Aceptar. En el panel Comportamientos aparecer el nuevo comportamiento. 14. Haz clic sobre el comportamiento en el panel. 15. Haz clic sobre el botn , que aparece a la derecha del evento.
16. Selecciona el evento onMouseOver (cuando se poner el cursor encima). 17. Haz clic sobre el botn del panel Comportamientos.
18. Elige la opcin Mostrar-Ocultar elementos. 19. En Elementos: selecciona la capa div sugerencia. 20. Haz clic sobre el botn Ocultar. 21. Haz clic sobre el botn Aceptar. En el panel Comportamientos aparecer el nuevo comportamiento. 22. Haz clic sobre el comportamiento en el panel. 23. Haz clic sobre el botn , que aparece a la derecha del evento.
24. Selecciona el evento onMouseOut (cuando se quita el cursor). 25. aulaClic S.L. Todos los derechos reservados. www.aulaclic.es
442
23. 24.
Ejercicios pasoa paso
25. Selecciona la capa sugerencia (puedes usar el panel Elementos PA). En el Inspector de propiedades, cambia el valor de visibilidad (Vis.) a hidden (oculto). 26. Haz clic sobre el botn Guardar de la barra de herramientas.
27. Visualiza la pgina en tu navegador y comprueba los comportamientos que has definido.
Con esto hemos acabado el sitio cocina. Abre en tu navegador la pgina index.htm y comprala con la que aparece si pulsas aqu.
Volver a la teora
443
Ejercicio
A partir de ahora, en los ejercicios paso a paso iremos creando el sitio Librera. En la carpeta ejercicios del curso, encontrars la carpeta librera con los archivos que necesitars para crear el sitio. Cpiala a la carpeta mis_sitios en la que has ido creando los sitios de ejemplo, y define el nuevo sitio Librera en Dreamweaver. Si necesitas ayuda con las operaciones anteriores, consulta los ejercicios propuestos o paso a paso de la unidad 3. 1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2. Abre el sitio libreria. 3. Crea un nuevo archivo CSS desde Archivo Nuevo Pgina en blanco CSS. 4. Gurdalo (CTRL + S) y llmalo estilolibreria.css. Ahora vamos a vincularla a la plantilla del sitio. 5. Abre la plantilla libreria.dwt.php que encontrars en la carpeta Templates del sitio. 6. Ve al men Formato Estilos CSS Adjuntar hoja de estilos... 7. Busca el archivo estilolibreria.css que acabamos de crear y selecciona la opcin Vincular. 8. Pulsa Aceptar. A lo largo de la unidad, iremos modificando la hoja de estilo hasta que la pgina se muestre as. Este documento es la plantilla que emplearemos en las pginas del sitio Librera. Vamos a echarle un vistazo para familiarizarnos con su estructura: Al principio tenemos un div "cabecera". En el tenemos los elementos que mostraremos en la parte superior de la pgina. Adems, ser donde incluyamos el logo. A continuacin encontramos el div "menu". En l encontramos una lista con los elementos que formarn el men de navegacin. Adems vers que hay una sublista, que convertiremos en un men desplegable. Lo siguiente que encontramos es el div "contenedor" donde agrupamos la estructura central de la pgina. Esta estructura se divide en otras dos divisiones: div "anuncios" donde tenemos la publicidad que mostrar nuestra web, y div "contenido", donde se mostrar el contenido de las distintas pginas. Es aqu donde encontramos la regin editable de la plantilla.
444
Para acabar, cerramos la pgina con el div "pie" en el que mostramos el pie de pgina.
Volver a la teora
445
Ejercicio:
1 Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2 Abre el sitio libreria. 3 Abre el archivo estilolibreria.css. 4 Aade el siguiente estilo para que los enlaces dentro del bloque con id menu no muestren subrayado y sean de color negro. Para el evento hover (cuando el ratn se encuentra sobre l) haremos que vuelva a aparecer el subrayado: #menu a { text-decoration: none; color: black; } #menu a:hover { text-decoration: underline; color: black; } 5 Aade el siguiente estilo para que la primera letra del los enlaces dentro del bloque con id menu se muestre en negrita: #menu a:firstletter { font-weight: bold; } 6 Tenemos un caso especial. Los no queremos que los enlaces del submen (una lista dentro de un elemento de lista) aparezca subrayado al poner el cursor encima. Aade el siguiente estilo: #menu li ul a:hover { text-decoration: none; } 7 Guarda los cambios.
446
Volver a la teora
447
Ejercicio
1 Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2 Abre el sitio libreria. 3 Abre el archivo estilolibreria.css. 4 Aade el siguiente estilo para que toda la pgina muestre una fuente de tipo Verdana (en caso de que no estuviese instalada se buscaran por este orden las siguientes fuentes: Arial, Helvetica y finalmente cualquiera que entre dentro de la categora sans-serif). Tambin haremos que su tamao sea de 12 pxeles: body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; } 5 Para el texto dentro del bloque con id menu aumentaremos el tamao de la fuente a 13 pxeles y haremos que las letras estn un poco ms separadas: #menu { font-size: 13px; letter-spacing: 1px; } 6 Ms tarde introduciremos un formulario en el men. Queremos que el elemento input de cualquier formulario tenga un tamao de fuente de 9 pxeles: input { font-size: 9px; } 7 En el bloque con id contenido queremos que haya una clase llamada primera_palabra que sea de 16 pxeles de tamao y en negrita: #contenido .primera_palabra {
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 448
8 Crea un estilo para una clase llamada precio que tenga un tamao de fuente de 16 pxeles, en negrita y de color rojo: .precio { font-size: 16px; color: red; font-weight: bold; } 9 Finalmente haremos que el bloque con id pie tenga un tamao de fuente que sea el 70% del original. #pie { font-size: 70%; } 10 Vamos a centrar verticalmente (vertical-align) las imgenes que aparecen en la lista del bloque #cabecera. #cabecera li img { vertical-align: middle; } 11 Por ltimo, crearemos una lista para mostrar los detalles del libro. Dentro de ella, distinguiremos dos elementos distintos: uno en negrita y maysculas para el ttulo, y otro en cursiva para el autor. ul.detallelibro .titulo { font-weight: bold; text-transform: uppercase; } ul.detallelibro .autor { font-style: oblique; } 12 Guarda los cambios.
Volver a la teora
449
Ejercicio
1 Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2 Abre el sitio libreria. 3 Abre el archivo estilolibreria.css. 4 Tenemos tres listas en nuestro sitio, la del men, la de los iconos de los libros y la que mostrar el detalle del libro. No queremos que aparezcan las vietas en ninguna, as que aade el siguiente estilo: #menu ul, #cabecera ul, ul.detallelibro { list-style-type: none; } 5 Guarda los cambios.
Volver a la teora
450
Ejercicio
1 Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2 Abre el sitio libreria. 3 Abre el archivo estilolibreria.css. 4 Al estilo que le aplicamos al body en ejercicios anteriores le aadiremos una nueva propiedad donde estableceremos un fondo de imagen que se repita en el eje horizontal y se posicione en la parte inferior de la pgina: body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; background: url(imagenes/fondo.gif) repeat-x bottom; } 5 Aadiremos un nuevo estilo para que el bloque con id cabecera muestre una imagen de fondo, que no se repita y adems estableceremos que el fondo sea de color blanco: #cabecera { background-image: url(imagenes/cabecera.jpg); background-repeat: no-repeat; background-color: white; } 6 Finalmente modificaremos el estilo del bloque con id menu para aadirle un fondo de imagen que se repita a lo largo del eje horizontal: #menu { font-size: 13px; letter-spacing: 1px; background: url(imagenes/fondo_menu.gif) repeat-x; } 7 Queremos que el fondo de los elementos del submenu sean de otro color. Adems, queremos completar el estilo ya definido para que cuando el cursor est encima del enlace, cambie de color:
451
#menu li li { background-color: #E35331; } #menu li ul a:hover { text-decoration: none; background-color: #C2FCF3; } 8 Guarda los cambios.
Volver a la teora
452
Ejercicio
1 Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2 Abre el sitio libreria. 3 Abre el archivo estilolibreria.css. 4 Queremos lograr un diseo centrado con una columna central. Esto lo haremos aadiendo loo siguiente al body. Ms adelante le daremos un ancho fijo. body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; background: url(imagenes/fondo.gif) repeat-x bottom; margin-left: auto; margin-right: auto;
5 Cambiamos la alineacin de la cabecera a la derecha. #cabecera { background-image: url(imagenes/cabecera.jpg); background-repeat: no-repeat; background-color: white; } text-align: right;
6 Al bloque con id menu le aplicaremos unas cuantas propiedades para que tenga una separacin exterior en la parte inferior de 20 pxeles. Tambin estableceremos el padding de todos los lados (la separacin de los bordes con el contenido). Y crearemos dos bordes, uno en la parte superior de color gris y de 1 pxel de ancho, el otro de color rojo y con 5 pxeles de ancho. #menu {
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 453
font-size: 13px; letter-spacing: 1px; background: url(imagenes/fondo_menu.gif) repeat-x; text-align: left; margin-bottom: 20px; padding: 3px 0px 3px 0px; border-top: 1px solid gray; border-bottom: 5px solid #E35331;
7 Quitaremos los mrgenes y padding por defecto de la lista del men: #menu ul { margin: 0; padding: 0; } 8 Tambin estableceremos los paddings para los elementos del lista dentro del bloque con id menu: #menu li { padding: 3px 12px 3px 12px; } 9 El bloque con id anuncios deber tener un margen inferior de 15 pxeles. Tambin le aadiremos unos paddings a izquierda y derecha. Tambin centraremos el texto utilizando text-align. #anuncios { margin-bottom: 15px; padding-right: 5px; padding-left: 5px; text-align: center; } 10 Separaremos los distintos anuncios con un margen inferior de 10 pxeles. Son los div dentros del bloque #anuncios: #anuncios div { margin-bottom: 10px; } 11 Al bloque con id contenido le daremos un padding izquierdo y superior: #contenido { padding-left: 5px; padding-top: 15px;
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 454
} 12 Ms tarde crearemos un bloque con id listado, vamos a configurarlo para que tenga un margen superior de 30 pxeles y un padding inferior tambin de 30. #listado { margin-top: 30px; padding-bottom: 30px; } 13 La clase item dentro del bloque con id listado deber tenter un margen izquierdo de 60 pxeles. #listado .item { margin-left: 60px; } 14 La clase borde_inferior deber tener un borde inferior de 1 pxel de ancho de color negro: .borde_inferior { border-bottom: 1px solid black; } 15 Aadiremos al bloque con id pie un margen inferior de 15 pxeles, centraremos el contenido, unos paddings superior e inferior y un borde superior rojo de 5 pxeles de ancho: #pie { font-size: 70%; text-align: center; margin-bottom: 15px; padding-top: 10px; padding-bottom: 5px; border-top: 5px solid #E35331;
16 Por ltimo quitaremos el borde que se muestra en la imgenes cuando estn en un enlace: a img { border-style: none; } 17 Ahora vamos con los estilos que formarn el submen. A la sublista, le damos un pequeo borde superior del mismo color de fondo, para que quede alineado con el color rojo. Lo hacemos con borde para evitar un comportamiento errneo de IE. #menu li ul { border-top: #BDFCF2 2px solid;
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 455
} 18. Ajustamos el padding de los elementos de lista delsubmen y de sus enlaces: #menu li li { background-color: #E35331; padding: 3px; } #menu li ul a { padding: 0 9px; } 19. Damos mrgenes los id con la clase detalle que tendremos dentro de contenido: #contenido .detalle { margin-left: 60px; margin-bottom: 30px; } 20. Y aadimos algo de margen a los elementos de la lista que mostrar el detalle del libro: ul.detallelibro li { margin: 5px; } 19 Guarda los cambios.
Volver a la teora
456
Ejercicios
Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 1 Abre el sitio libreria. 2 Abre el archivo estilolibreria.css. 3 Queremos que nuestra pgina tenga un ancho fijo de 780px. Se lo aadimos al body body { ... } width: 780px;
4 Al bloque con id cabecera le daremos un alto para que se ajuste a la imagen de fondo: #cabecera { ... } height: 150px;
5 Para que la lista del bloque cabecera quede ms abajo, le aadimos un margen superior. #cabecera ul{ margin-top: 70px; } 6 Haremos que el contenido del bloque con id menu no pueda saltar de lnea y le daremos un ancho fijo, para evitar el comportamiento extrao de IE con el men desplegable: #menu { ... white-space: nowrap; height: 15px;
457
7 Como luego insertaremos un formulario en el menu, le vamos a dar la propiedad inline para que se muestre (display) como un elemento en lnea y no cree un salto de lnea. Aadiremos la misma propiedad a los elementos de lista del men, para que se muestren en la misma lnea. #menu form { display: inline; } #menu li { ... } display: inline;
8 El bloque con id anuncios tendr un ancho de 125 pxeles y estar flotando a la derecha: #anuncios { ... width: 125px; float: right;
9 Al bloque con id contenido le daremos un ancho de 635 pxeles para que todo su contenido se encuentre a la izquierda del bloque de anuncios: #contenido { ... } width: 635px;
10 Al bloque con id pie le daremos la propiedad clear para que no tenga problemas de solapamiento con el float de los anuncios: #pie { ... } clear: both;
11 Vamos con el submen. Haremos la sublista flotante y no la mostraremos (display): #menu li ul { ... float: left; display: none;
458
12 Haremos que tanto los elementos de la lista, como los enlaces, se muestren como bloques: #menu li li { ... display: block; } #menu li ul a { ... } display: block;
13 Por ltimo haremos que el submen se muestre al poner el cursor sobre el elemento que lo contiene: #menu li:hover ul { display: block; } 14 Crearemos dos ltimas clases img_item, salto_linea y alto_10 que utilizaremos ms adelante. La primera simplemente crea un flotamiento a la izquierda. La segunda limpia el flotamiento y establecer una separacin de 15 pxeles. La tercera deber ser de 10 pxeles de altura. .img_item { float: left; } .salto_linea { clear: left; height: 15px; } .alto_10 { height: 10px; } 15 Completaremos el estilo para el precio evitando que pueda saltar de lnea. .precio { ... } white-space: nowrap;
Volver a la teora
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 459
460
Ejercicios
Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 1 Abre el sitio libreria. 2 Abre el archivo estilolibreria.css. 3 Conforme est ahora, el submen podra ser tapado por el contenido de la pgina. Para evitarlo, vamos a aumentar su z-index. Como slo podemos aplicar este valor e elementos posicionados, le daremos un posicionamiento relativo, pero sin variar su posicin: #menu li:hover ul { display: block; position: relative; z-index: 10;
Volver a la teora
461
Ejercicio
Vamos a crear un alias a la carpeta mis_sitios, donde tenemos las carpetas de los distintos sitios creados durante el curso. Si has empleado otra carpeta, tenlo en cuenta. Antes de realizar el ejercicio, debes de haber descargado e instalado WampServer. Para ello, sigue los pasos explicados en la teora.
1. Lo primero es saber la ruta completa de nuestra carpeta. Para ello, abrimos la carpeta y hacemos clic en la barra de direcciones. Se mostrar la ruta completa, algo parecido a esto:
Lgicamente la ruta cambiar para cada usuario, segn donde hayas ubicado la carpeta. Ten la direccin visible, ya que tendrs que escribirla. 2. Haz clic sobre el icono de WampServer del rea de notificacin, y en el men emergente de la aplicacin elige Apache Directorios Alias + Agregar un alias.
3. Se abrir una ventana de consola. Lo primero que tenemos que hacer es indicar el nombre el alias. Lo vamos a llamar sitios.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 462
Escribe sitios y pulsa Intro. Si optas por otro nombre ten en cuenta que a lo largo del curso, nos referiremos a l. 4. Ahora, deberemos de indicar la ruta a la carpeta que contiene los archivos.
Escribimos la ruta que muestra la barra de direcciones de Windows pero cambiando las contrabarras (\) por barras (/), y aadiendo una barra al final (como en la ltima lnea de la imagen). Cuando lo tengamos pulsamos Intro. Si todo ha ido bien, se mostrar un mensaje indicando que se ha creado el alias. Si por ejemplo, hemos escrito mal la direccin, tendremos que volver a empezar.
Si ahora vas a la direccin http://localhost/sitios/animales deberas de acceder al sitio animales creado en los ejercicios del curso (a no ser que hayas llamado a la carpeta del sitio de otra forma). En cualquier momento podemos editar o eliminar nuestro alias.
Volver a la teora
463
Ejercicio
Para realizar este ejercicio, partimos de que has instalado WampServer y has definido el alias sitios en el ejercicio anterior para acceder a los sitios de ejemplo. 1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2. Si no aparece el panel Archivos, brelo a travs del men Ventana, opcin Archivos. 3. Selecciona el sitio Libreria en el panel Archivos. 4. Haz clic en Sitio Administrar sitios.... 5. Selecciona el sitio Libreria y pulsa el botn Editar. 6. Pulsa sobre la categora Servidores. 7. Pulsa sobre el icono + para aadir un nuevo servidor. 8. El nombre no es relevante, nosotros lo hemos llamado WampServer - Librera. 9. En el desplegable Conectar usando selecciona Local/red. 10. Como hemos definido nuestra carpeta de mis_sitios con un alias en localhost no tendremos que crear copias para probar los archivos. As que haz clic en el botn y busca la carpeta libreria que se encuentra dentro de tu carpeta de mis_sitios (ya aparecera por defecto). Seleccinala y pulsa Seleccionar. 11. En el campo Prefijo de URL escribe http://localhost/sitios/libreria/. 12. Pulsa Guardar para guardar los cambios. 13. En las opciones del servidor, marca la opcin De pruebas y desmarca Remoto. 14. Pulsa Guardar.
Volver a la teora
464
Ejercicio.
1. Si WampServer no se est ejecutando, lnzalo para realizar este ejercicio. Para ejecutar el programa slo tienes que hacer clic en Inicio, Todos los programas, WampServer y finalmente en Start WampServer. 2. Si el servicio de MySQL no se est ejecutando, lnzalo para poder tener acceso a las bases de datos (lo normal es que ya est en marcha). 3. Haz clic sobre el icono de WampServer en el rea de notificacin y selecciona la opcin phpMyAdmin. 4. Se abrir la ventana principal. Escribe bd_libreria en el campo de texto de la siguiente imagen.
5. Selecciona utf-8_spanish_ci en el desplegable Cotejamiento. 6. Pulsa Crear para crear la base de datos. Un mensaje te indicar que la base de datos se ha creado correctamente. En los siguientes ejercicios la completaremos.
Volver a la teora
465
Ejercicio
1. Si WampServer 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 WampServer en el rea de notificacin y selecciona la opcin phpMyAdmin. 4. Se abrir la ventana principal de phpMyAdmin. En la lista de la izquierda selecciona la base de datos bd_libreria.
5. Para crear una nueva tabla en la seccin Crear nueva tabla en la base de datos escribe Libros en Nombre y 7 en Nmero de campos. 6. Pulsa el botn Continuar para seguir. 7. Ahora vamos a configurar los campos. 8. Al primer campo lo llamaremos Id, de tipo INT, con un ndice PRIMARY y marcando A_I. 9. Al segundo lo llamaremos ISBN, de tipo VARCHAR, con longitud 10 y un ndice UNIQUE. 10. Al tercero lo llamaremos Titulo, de tipo VARCHAR y con longitud 100. 11. Al cuarto lo llamaremos Autor, de tipo VARCHAR y con longitud 30. 12. Al quinto lo llamaremos Editorial, de tipo VARCHAR y con longitud 30. 13. Al sexto lo llamaremos Precio y de tipo FLOAT. 14. Al ltimo lo llamaremos Usado, de tipo BOOL y con valor 0 como predeterminado selecciona Personalizado: y escribe el valor 0. 15. Haz clic en Grabar para guardar los cambios y la tabla ya estar lista para utilizarse. La tabla quedar como puedes ven en la imagen.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 466
15.
Volver a la teora
467
Ejercicio
1. Si WampServer 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 principal. En la lista del men de la izquierda selecciona la base de datos bd_libreria.
5. Haz clic en la opcin Importar que encontrars en el men horizontal en la parte superior de la ventana:
6. En la siguiente ventana pulsa el botn Examinar y busca el archivo libros-latin1.txt que se encuentra en la carpeta de ejercicios/libreria. 7. El archivo se encuentra codificado en utf-8 as que seleccinalo en la lista de Juego de caracteres del archivo. Formato:SQL. 8. Pulsa el botn Continuar. 9. Asegrate de que se han introducido datos en la tabla pulsando la opcin Examinar de la tabla Libros. Si ha fallado la importacin, puede que falte algn campo de la tabla, o tenga un tipo de datos errneo. Repasa el ejercicio anterior.
Volver a la teora
468
Ejercicio
1. Si WampServer 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 WampServer en el rea de notificacin y selecciona la opcin phpMyAdmin. 4. Se abrir la ventana principal. Haz clic sobre la pestaa 5. Haz clic en el vnculo Agregar un nuevo usuario. 6. En la nueva ventana escribe librero en Nombre de usuario. 7. En Servidor escribe localhost o selecciona Local. 8. En Contrasea escribe aulaclic. 9. En Debe volver a escribir escribe aulaclic de nuevo. 10. Pulsa el botn Continuar, al final de la pgina, para crear el usuario. 11. Se abrir una ventana con los usuarios existentes. En la fila del usuario librero haz clic en Editar los privilegios 12. En la nueva pantalla desplzate hacia abajo hasta encontrar: .
13. Aqu selecciona la base de datos bd_libreria en el desplegable. 14. En la pasrte superior de la pantalla Privilegios globales, selecciona los privilegios SELECT, INSERT, UPDATE y DELETE. Si te das cuenta estn todos en el marco de Datos. Vamos a darle a este usuario nicamente permiso de escritura y lectura sobre la base de datos. Los permisos de Administracin y Estructura los dejaremos en blanco para que este usuario no pueda acceder a la parte administrativa ni pueda modificar la estructura de las tablas. 15. Pulsa Continuar para asignarle al usuario esos privilegios y habremos terminado.
469
Volver a la teora
470
Ejercicio
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 la plantilla, ya que tenemos que tener algn documento abierto. 5. Abre el panel Bases de Datos con la combinacin de teclas Ctrl + Mayus + F10 o desde el men Ventana Bases de datos. 6. Haz clic en el botn y selecciona Conexin MySQL para crear una nueva conexin:
7. En Nombre de conexin escribe conexion_libreria. 8. En Servidor MySQL escribe localhost. 9. En Nombre de usuario escribe librero. 10. En Contrasea escribe aulaclic. 11. En Base de datos selecciona bd_libreria. 12. Pulsa el botn Prueba, y comprueba que se puede conectar correctamente. 13. Pulsa Aceptar para crear la conexin.
Volver a la teora
471
Ejercicio
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 un archivo dinmico nuevo basado en la plantilla libreria.dwt.php (Archivo Nuevo, pestaa Pgina de plantilla). 5. Gurdalo como nuevos.php. 6. Haz clic en el botn del panel Insertar Datos para crear un nuevo juego de registros.
7. En el cuadro de dilogo que se abrir rellena los datos de la siguiente forma: en Nombre escribe listado_libros. 8. En Conexin, comprueba que est seleccionada conexion_libreria. 9. En Tabla selecciona libros. 10. Deja el resto como est y pulsa el botn Prueba para ver una previsualizacin de qu registros componen el recordset. 11. Haz clic en el botn Aceptar para crear el juego de registros. 12. Cierra el documento guardando los cambios.
Volver a la teora
472
Ejercicio
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 nuevos.php. 5. En el rea de contenido que podemos modificar introduce la siguiente lnea: Listado de libros nuevos: e introduce un salto de prrafo (Enter). 6. Luego debers insertar una tabla con un relleno de celda de 5 y borde 0. El resto de valores, djalos vacos. 7. La tabla deber tener 4 filas y 4 columnas. Siendo la primera un encabezado. 8. Dale a las columnas, de izquierda a derecha, los siguientes anchos: 197 pxeles, 142 pxeles, 156 pxeles y 100 pxeles. 9. Rellena las celdas de la primera fila con el texto Ttulo, Autor, Editorial y Precio respectivamente. 10. Selecciona todas las celdas de la tercera fila y combnalas utilizando el botn Propiedades. 11. Haz lo mismo para la cuarta fila. 12. Selecciona la cuarta celda de la segunda fila y dale como estilo la clase precio y alineacin a la derecha. 13. Selecciona la tercera y cuarta fila y dales la clase alto_10. 14. Ahora vamos a aadir una segunda clase a la tercera fila, como Dreamweaver slo nos permite seleccionar una, deberemos ir a la vista de Cdigo para editarlo desde all (recuerda el tema de CSS avanzado). Localiza la tercera fila que tendr este aspecto: <td colspan="4" class="alto_10"> </td> Adele la clase borde_inferior, dejndola as: <td colspan="4" class="alto_10 borde_inferior"> </td> en el panel de
15. Vuelve a la vista de Diseo y abre el panel Vinculaciones (Ctrl + F10). 16. Despliega el juego de registros listado_libros y arrastra el elemento Titulo a la primera celda de la segunda fila de la tabla. 17. 18.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 473
16. 17. Arrastra el elemento Autor a la segunda celda. 18. Arrastra el elemento Editorial a la tercera celda.
19. Arrastra el elemento Precio a la cuarta celda (no te preocupes si aparentemente se descuadra la pgina). 20. A la derecha del precio, despus del cierre de la llave escribe un espacio y el smbolo . 21. Selecciona la celda que contienen el Autor de la pgina. Crea un Nuevo estilo en lnea poniendo el contenido en cursiva pulsando el botn en el Inspector de Propiedades CSS. 22. Abre el panel Comportamientos del servidor (Ctrl + F9) y haz doble clic sobre el elemento Texto dinmico {listado_libros.Titulo} para modificar sus propiedades. 23. En el cuadro de dilogo que se abrir selecciona el valor May.-min. - Mays. del desplegable Formato para mostrar todo el texto en maysculas. Recuerda que este comando puede estar errneo en Dreamweaver. Si es tu caso, emplea May.-min. Mins.. 24. Cambia a la Vista en vivo y vers como se muestra el primer registro. (Tambin puedes visualizar los datos desde el localhost pulsando la tecla F12). 25. Cierra el documento guardando los cambios.
Volver a la teora
474
Ejercicio
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 nuevos.php, con el que venimos trabajando en los ejercicios de la unidad. 5. Selecciona las tres ltimas filas de la tabla que creamos en el ejercicio anterior. Asegrate de seleccionar las filas completas. Si no lo tienes claro, hazlo desde la vista Cdigo. Vamos a aplicar una repeticin sobre este bloque, haremos que se repita 7 veces (para que muestre 7 registros seguidos). 6. Pulsa el botn Repetir regin en el panel de Insertar Datos.
7. En el cuadro de dilogo que se abre escribe 7 en el cuadro de texto y pulsa Aceptar. 8. Si previsualizas el aspecto de la pgina en Vista en vivo o pulsas F12 para ver el resultado en el servidor de pruebas vers que ahora el listado de registros a aumentado mostrando 7, una raya negra separa cada uno de ellos. 9. Cierra el documento guardando los cambios.
Volver a la teora
475
Objetivo
Practicar las operaciones necesarias para ordenar los registros de un Recordset.
Objetivo
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 nuevos.php. 5. Abre el panel Comportamientos del servidor y haz doble clic sobre el elemento Juego de registros (listado_libros). 6. En el cuadro de dilogo que se abrir, selecciona Titulo en el desplegable Ordenar:. 7. En el desplegable de la derecha selecciona Ascendente. 8. Acepta el cuadro de dilogo y si visualizas la pgina en modo Vista activa vers como los registros ahora salen ordenados alfabticamente por su ttulo. 9. Cierra el documento guardando los cambios.
Volver a la teora
476
Objetivo
Practicar las operaciones necesarias para filtrar los registros de un recordset.
Objetivo
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 3. Ejecuta Dreamweaver y abre el sitio libreria, vamos a trabajar sobre l. 4. Si tienes abierto el archivo nuevos.php por ejercicios anteriores, cirralo para evitar confusiones. 5. Copia el archivo nuevos.php haciendo clic derecho sobre l en el panel Archivos y eligiendo Edicin Copiar. 6. Haz clic derecho sobre l en el panel Archivos y elige Edicin Pegar. 7. Repite el paso anterior. Vers las copias nuevos - Copia.php y nuevos - Copia[2].php. 8. Selecciona una de las copias. Pulsa F2 para renombrarlo y llmalo usados.php. 9. Renombra la otra copia, llamndola ofertas.php. 10. Abre los tres archivos. 11. Cambia el ttulo de las tres pginas por Libros usados, Libros nuevos y Oferta de libros segn corresponda. 12. En el archivo ofertas.php elimina el prrafo Listado de libros nuevos:. 13. En el archivo usados.php cambia la palabra nuevos por usados en la lnea anterior.
14. En el archivo nuevos.php abre el panel Comportamientos del servidor (Ctrl + F9) y haz doble clic sobre el elemento J 15. Se abrir un cuadro de dilogo, modifica el Nombre listado_libros por libros_nuevos. 16. En Filtro selecciona el campo Usado. 17. En el desplegable de abajo, selecciona Valor introducido y escribe 0 en el cuadro de texto de su derecha. Debera quedarte algo como Filtro Usado = Valor introducido 0.
Hemos creado un filtro para que se muestren aquellos registros con valor 0 en su campo Usado, sern aquellos que no es 18. Pulsa el botn Prueba para asegurarte y guarda los cambios haciendo clic en Aceptar para salir.
19. Dreamweaver lanzar la herramienta Buscar y Reemplazar para asegurarte de que ha cambiado el nombre del juego de Buscar todos para asegurarte, pero bastar con que cierres el cuadro de dilogo. 20. Cierra todos los documentos guardando los cambios. NOTA: Hemos notado, que tanto en esta versin como en la anterior, al seguir estos pasos Dreamweaver puede generar de que ha encontrado un error de sintaxis en el cdigo.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 477
Busca en el cdigo fuente de tu pgina el fragmento que mostramos a continuacin de color rojo, y brralo. Deberas de encontrarlo a partir de la lnea 34. break; } return $theValue;
} } $maxRows_listado_nuevos = 7; $pageNum_listado_nuevos = 0; if (isset($_GET['pageNum_listado_nuevos'])) { $pageNum_listado_nuevos = $_GET['pageNum_listado_nuevos']; } $startRow_listado_nuevos = $pageNum_listado_nuevos * $maxRows_listado_nuevos; mysql_select_db($database_conexion_libreria, $conexion_libreria); $query_listado_nuevos = "SELECT * FROM libros"; $query_limit_listado_nuevos = sprintf("%s LIMIT %d, %d", $query_listado_nuevos, $startRow_listado_nuevos, $maxRows_listado_nuevos); $listado_nuevos = mysql_query($query_limit_listado_nuevos, $conexion_libreria) or die(mysql_error()); $row_listado_nuevos = mysql_fetch_assoc($listado_nuevos); if (isset($_GET['totalRows_listado_nuevos'])) { $totalRows_listado_nuevos = $_GET['totalRows_listado_nuevos']; } else { $all_listado_nuevos = mysql_query($query_listado_nuevos); $totalRows_listado_nuevos = mysql_num_rows($all_listado_nuevos); } $totalPages_listado_nuevos = ceil($totalRows_listado_nuevos/ $maxRows_listado_nuevos= 7; $pageNum_listado_nuevos = 0;
Volver a la teora
478
Ejercicio
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 nuevos.php y en la vista de Cdigo, bajo la tabla del listado de registros (despus de la repeticin) crea una tabla con tres celdas (han de tener cada una un 33% de ancho), sin borde, con un ancho del 100% y relleno de 5. 5. La primera debe tener el alineamiento a la izquierda, la segunda al centro y la tercera a la derecha. 6. Coloca el punto de insercin en la primera celda de la nueva tabla. 7. Haz clic en la opcin Mover a la pgina anterior del desplegable de opcin de paginacin:
8. En la celda se aadir el texto Anterior. 9. Coloca el cursor en la tercera celda. 10. Ahora selecciona la opcin Mover a la siguiente pgina. En la celda se aadir el texto Siguiente. 11. Alinea la celda a la derecha. 12. Pulsa F12 para ver el resultado de la pgina desde el localhost, vers como puedes avanzar por los registros hasta mostrarlos todos. 13. Cierra el documento guardando los cambios.
479
Volver a la teora
480
Ejercicio
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 nuevos.php. 5. En la tabla de abajo selecciona la celda del centro para colocar el punto de insercin all. 6. Haz clic en la opcin Registro final del listado de opciones de recuento de registros en el men Insertar Datos.
7. Se aadir el texto {libros_nuevos.LastRecord} a la celda. 8. Escribe de a su derecha. 9. Ahora selecciona la opcin Total de registros en el listado de recuento de registros anterior. 10. Deber quedarte algo como: {libros_nuevos.LastRecord} de {libros_nuevos.TotalRecords} 11. Prueba la pgina pulsando F12 y vers como ahora adems de los enlaces de avance y retroceso se muestra tambin el nmero del ltimo registro junto al total. 12. Cierra el documento guardando los cambios.
Volver a la teora
481
Ejercicios
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 nuevos.php. 5. Selecciona el enlace que contiene 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 del panle Insertar Datos.
7. Ahora selecciona el texto Siguiente, lo vamos a ocultar en la ltima pgina. 8. Selecciona la opcin Mostrar si no es la ltima pgina del listado de mostrar regin anterior. 9. Puedes visualizar los cambios que hemos realizado pulsando F12 para lanzar el localhost. 10. Cierra el documento guardando los cambios.
Volver a la teora
482
Ejercicios
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 nuevos.php. 5. Selecciona el elemento {libros_nuevos.Titulo} en la primera celda de la primera tabla. 6. En el panel Propiedades escribe en el campo Vnculo lo siguiente: comprar.php?id=. 7. Ahora abre el panel Vinculaciones (Ctrl + F10) y ve a la vista de Cdigo. 8. Arrastra el elemento Id al lado del texto que hemos escrito despus del =. Deber quedarte algo como esto:
<a href="comprar.php?id=<?php echo $row_libros_nuevos['Id']; ?>"> <?php echo strtoupper($row_libros_nuevos['Titulo']); ?></a> Hemos creado un enlace a una pgina llamada comprar.php y le hemos pasado un parmetro id con el valor del Id del registro que se muestre. Por lo que en cada ttulo de cada libro habr un enlace diferente que abrir la pgina comprar.php con el valor del id del libro correspondiente.
Volver a la teora
483
Ejercicio
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. Crearemos dos archivos que funcionen con filtros de parmetros.
Primero crearemos un archivo comprar.php. 4. Abre un archivo dinmico nuevo basado en la plantilla libreria.dwt.php (Archivo Nuevo, seccin Pgina de plantilla). 5. Gurdalo como comprar.php, dndole el ttulo Comprar libros. 6. Haz clic en el botn para crear un nuevo juego de registros.
7. En el cuadro de dilogo que se abrir rellena los datos de la siguiente forma: en Nombre escribe detalle_libro. 8. En Conexin selecciona conexion_libreria. 9. En Tabla selecciona libros. 10. Modifica la opcin Filtro para que pueda leerse: Id = Parmetro URL id. Hemos creado un filtro que tomar el valor del parmetro id en la URL y lo comparar con el valor del campo Id.
11. En la zona donde puedes incluir contenido aade un bloque div (Insertar Objetos de diseo Etiqueta DIV), dale la clase detalle. 12. Coloca el cursor dentro del bloque y inserta la imagen imagenes/item1.gif, dale la clase img_item. 13. Modifica el campo Origen de la imagen desde la vista Cdigo cambiando el 1 que forma parte del nombre por el elemento Usado desde el panel Vinculaciones para que pueda leerse: imagenes/item<?php echo $row_detalle_libro['Usado']; ?>.gif 14.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 484
13.
Ejercicios pasoa paso
14. Crea una lista no ordenada (ul) con cinco elementos, y con la clase detallelibro. Al primero dale la clase titulo y al segundo la clase autor. 15. Inserta el elemento Titulo arrastrndolo desde el panel Vinculaciones al primer elemento. 16. Inserta el elemento Autor arrastrndolo desde el panel Vinculaciones al segundo elemento. 17. Inserta el elemento Editorial arrastrndolo desde el panel Vinculaciones al tercer elemento. 18. Escribe ISBN: e inserta el elemento ISBN arrastrndolo desde el panel Vinculaciones en el siguiente elemento. 19. Inserta el elemento Precio arrastrndolo desde el panel Vinculaciones. 20. Escribe a continuacin, seleccinalo todo y aplcale la clase precio.
Como puedes ver, hemos incluido un bloque div donde hemos escrito el contenido del registro del recordset. Presta especial atencin a la imagen, en el campo Origen hemos colocado lo siguiente: "imagenes/item<?php echo $row_detalle_libro['Usado']; ?>.gif" Esto formar la ruta de una imagen que ser un archivo u otro dependiendo del valor en el campo Usado del registro. Debido a que este campo puede tomar los valores 0 1 las imgenes que se podran cargar seran item0.gif o item1.gif.
21. Para comprobar que funciona correctamente debers pulsar la tecla F12 para copiar el archivo al servidor de pruebas. Vers que el archivo no muestra casi nada porque no ha recibido ningn valor en el parmetro Id. 22. Ahora visualiza en tu navegador la pgina nuevos.php 23. Haz clic en alguno de los ttulos, recuerda que en el ejercicio anterior enlazamos cada ttulo con la pgina comprar.php pasando como parmetro el Id del libro. Ahora se cargar el archivo comprar.php mostrando el detalle del libro que hemos seleccionado (fjate en el parmetro de la URL). Y fjate tambin en la imagen del libro, muestra siempre la imagen del libro nuevo. 24. Cierra el documento guardando los cambios. Continuamos en la pgina siguiente.
Ahora crearemos un archivo buscar.php. 1. Abre un archivo dinmico nuevo basado en la plantilla libreria.dwt.php (Archivo Nuevo, Pgina de plantilla) y gurdalo como buscar.php. Dale el ttulo Buscar libros. 2. En la zona donde puedes incluir contenido aade el siguiente prrafo:
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 485
2. Introduce en la siguiente caja de texto el nombre del ttulo o el autor del libro y nosotros lo buscaremos por ti: 3. Inserta un formulario con nombre formulario a continuacin (Insertar Formulario Formulario). 4. Coloca el punto de insercin dentro del formulario. 5. Inserta un campo de texto desde el men Insertar Formulario Campo de texto. 6. En el cuadro de dilogo, escribe buscar como id del Campo de texto. Si no te aparece el dilogo, hazlo desde el Inspector de Propiedades. As le pasaremos su contenido a la URL en el parmetro buscar. 7. A la caja de texto, dale un Ancho car. de 100. 8. Selecciona el formulario haciendo clic en la etiqueta <form> y cambia el mtodo de POST a GET. Como ya hemos comentado es necesario hacerlo de esta forma para que el cdigo generado por Dreamweaver funcione correctamente. 9. Tambin establece como accin buscar.php, es decir, el mismo archivo. 10. Inserta un botn al lado del campo de texto desde el men Insertar Formulario Botn. 11. En el panel Propiedades cambia su propiedad Valor a Buscar. 12. Deja un prrafo en blanco debajo del formulario. 13. A continuacin, crea un bloque div con id listado (Insertar Objetos de diseo Etiqueta DIV). 14. Coloca el cursor dentro del bloque, y escribe el siguiente prrafo: Su bsqueda de ha devuelto resultado(s): Vamos ahora a insertar el ttulo pasado como parmetro. 15. Posiciona el punto de insercin delante de la palabra ha. 16. Selecciona del men Insertar Objetos PHP Variables de URL Se crear el siguiente cdigo: <?php $_GET[]; ?> 17. Slo nos falta indicar el nombre de la variable URL escribiendo 'buscar' dentro de los corchetes; no olvides las comillas simples. 18. Desde la vista Cdigo encierra el cdigo php entre etiquetas <em> para que el ttulo aparezca en cursiva. El cdigo resultante deber ser ste: Su búsqueda de <em>'<?php echo $_GET['buscar']; ?>'</em> ha devuelto resultados: 19. Vuelve a la vista de Diseo. Ahora crearemos un juego de registros para esta pgina que se cree filtrndose por el texto introducido en la caja del formulario. 20. Haz clic en el botn para crear un nuevo juego de registros.
21. En el cuadro de dilogo que se abrir rellena los datos de la siguiente forma: en Nombre escribe busqueda. 22. 23.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 486
24. Modifica la opcin Filtro para que pueda leerse: Titulo = Parmetro URL buscar. Hemos creado un filtro que tomar el valor del parmetro buscar en la URL y lo comparar con el valor del campo Titulo. Ahora insertaremos el total de registros entre las palabras devuelto y resultados. 25. Posiciona el cursor entre las palabras devuelto y resultados. 26. Haz clic en la opcin Total de registros, en Mostrar recuento de registros del panel Insertar Datos. 27. La lnea quedar as: <p>Su búsqueda de <?php $_GET['buscar']; ?> ha devuelto <?php echo $totalRows_busqueda ?> resultados: </p> Vamos a crear el listado que se corresponda con el recordset que acabamos de crear. 28. An dentro del bloque que hemos creado, crea un bloque div con clase item (Insertar Objetos de diseo Etiqueta DIV). 29. Dentro del bloque con clase item inserta la imagen imagenes/item1.gif. 30. A la imagen asgnale la clase img_item. 31. Desde la vista de cdigo, arrastra el campo Usado desde el panel Vinculaciones sobre el atributo src de la imagen reemplazando el 1, para que quede: "imagenes/item<?php echo $row_busqueda['Usado']; ?>.gif" 32. Crea una lista no ordenada (ul) con cinco elementos, y con la clase detallelibro. Al primero dale la clase titulo y al segundo la clase autor. 33. Inserta el elemento Titulo arrastrndolo desde el panel Vinculaciones al primer elemento. 34. Inserta el elemento Autor arrastrndolo desde el panel Vinculaciones al segundo elemento. 35. Inserta el elemento Editorial arrastrndolo desde el panel Vinculaciones al tercer elemento. 36. Escribe ISBN: e inserta el elemento ISBN arrastrndolo desde el panel Vinculaciones en el siguiente elemento. 37. Inserta el elemento Precio arrastrndolo desde el panel Vinculaciones. 38. Escribe a continuacin, seleccinalo todo y aplcale la clase precio y aade la imagen imagenes/compra.gif. 39. La imagen que acabamos de aadir deber tener la alineacin a Texto superior. Ponlo como un estilo CSS en lnea. 40. Enlaza la imagen a comprar.php?id= desde el campo Vnculo del panel Propiedades. 41. En la vista de Cdigo, al enlace adele al final el Id, arrastrndolo desde el panel Vinculaciones. 42. Inserta un bloque DIV (Insertar Objetos de diseo Etiqueta DIV), dale el id salto_linea desde el panel Propiedades.
487
42.
Ejercicios pasoa paso
Contina en la pgina siguiente... Vamos a ahora hacer que se muestren cuatro libros por pgina. 43. Selecciona el bloque item y salto_linea. 44. Selecciona la opcin Repetir Regin en la barra de Datos. 45. Haz que se repita 4 veces. Estamos repitiendo el bloque de la informacin del libro y aadiendo un bloque con un salto de lnea para separarlo del siguiente. 46. Finalmente, y an dentro del bloque con id listado pero despus de la repeticin, inserta una tabla de 3 columnas y 1 fila de 100% de ancho. 47. Las tres columnas tienen que tener un 33% de ancho. 48. La celda central estar alineada al centro. 49. La celda de la derecha estar alineada a la derecha. 50. En la primera celda introduce un elemento de navegacin Anterior, utiliza la opcin Mover a la pgina anterior del panel Insertar Datos. 51. Selecciona el elemento Anterior y haz que no se muestre en la primera pgina haciendo clic en la opcin Mostrar si no es la primera pgina del panel Insertar Datos. 52. En la tercera celda introduce un elemento de navegacin Siguiente, utiliza la opcin Mover a la pgina siguiente del panel Insertar Datos. 53. Selecciona el elemento Siguiente y haz que no se muestre en la ltima pgina haciendo clic en la opcin Mostrar si no es la ltima pgina del panel Insertar Datos. 54. Para terminar en la celda central introduce un elemento Registro final seguido del texto " de " y un elemento Total de Registros. Te quedar algo as: <?php echo min($startRow_busqueda + $maxRows_busqueda, $totalRows_busqueda) ?> de <?php echo $totalRows_busqueda ?> Ahora haremos que slo se muestre la informacin si se han encontrado registros 55. Selecciona todo el contenido que hemos aadido hasta ahora, sin incluir el formulario. 56. Selecciona la opcin Mostrar si el juego de registros no est vaco del panel Insertar Datos.
Para comprobar que funciona correctamente pulsa la tecla F12 para copiar el archivo al servidor de pruebas. Vers que el archivo slo muestra el formulario. Introduce el ttulo de un libro y pulsa buscar. De momento esta pgina slo muestra los resultados para las entradas exactas de nombres de libros, ms adelante cambiaremos eso. Finalmente vamos a aadir una caja de bsqueda a nuestra plantilla. 1.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 488
1. Abre la plantilla libreria.dwt.php y en la barra de men, edita el ltimo elemento de la lista para que quede as: <li><a href="../buscar.php">Buscar:</a> <form action="buscar.php" method="get"><input type="text" id="buscar" name="buscar" /><input type="submit" value="buscar" /></form></li> 2. Hemos aadido un formulario que ejecutar el archivo buscar.php pasndole un parmetro buscar con el valor que escribamos en la caja de texto. 3. Guarda la plantilla y aplcala sobre todos los archivos anteriores. 4. Guarda todos los cambios en los archivos abiertos. 5. Selecciona todos los archivos PHP en el panel Archivos y haz clic derecho sobre cualquiera de ellos. 6. Selecciona la opcin Vista previa en el Navegador para que se copien al servidor de pruebas. 7. Prueba cmo funciona el formulario del men. 8. Recuerda que de momento debers escribir un ttulo de un libro exacto.
Volver a la teora
489
Ejercicio
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 comprar.php. Vamos a insertar un formulario que insertar un registro en la tabla de compras que almacene los datos del usuario junto con el pedido del libro que se muestra en el detalle. 5. Coloca el cursor en la parte inferior de la zona en la que se permite la modificacin, sin salir del div.detalle, y crea una regla horizontal (hr) con un estilo en lnea clear: left;. 6. Haz clic en el botn Asistente de formulario de insercin de registros .
7. En el cuadro de dilogo que se abrir debers seleccionar la Conexin conexion_libreria. 8. Selecciona la Tabla compras para guardar el nuevo registro all. 9. En Tras insertar, ir a escribe index.php para que vuelva a un ndice. Esta pgina an no la hemos creado, pero lo haremos ms adelante. Ahora configuraremos los campos que queremos que aparezcan en el formulario. 10. Selecciona el campo Id y elimnalo, no hace falta que se muestre porque es autonumrico y se le asigna un valor automticamente. 11. Selecciona el campo Nombre y en Mostrar como selecciona Campo de texto, envalo como Texto. 12. En el campo Tarjeta tambin seleccionaremos Campo de texto, enviado como Texto. 13. Selecciona el campo Tipo_Tarjeta y elige Men en Mostrar como. 14. Aparecer un botn Propiedades del men, plsalo e introduce tres elementos en el nuevo cuadro de dilogo: VISA, VISA ELECTRON y MASTERCARD. Debers dar estos valores en las propiedades Etiqueta y Valor, para que se muestre y se enve el mismo texto. 15. Pulsa Aceptar para cerrar el cuadro de dilogo. 16. Cambia la Etiqueta a Tipo de tarjeta:. 17.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 490
15. 16.
Ejercicios pasoa paso
17. Selecciona, finalmente, el campo Id_Libro y en Mostrar como selecciona Campo oculto. Vamos a indicarle que el valor que tiene que almacenar es el del libro que se est mostrando como Detalle. 18. Para ello, haz clic en el botn Datos dinmicos para abrir un cuadro de dilogo con los elementos cargados en los diferentes recordsets de la pgina. En este caso slo hay uno: detalle_libro. 19. Selecciona el campo Id y pulsa Aceptar. Como puedes ver, ahora el valor del campo Id_Libro ser el valor del campo Id del juego de registros detalle_libro. 20. Pulsa Aceptar y el formulario se crear automticamente. 21. Cambia el valor del botn de envo por Guardar compra. 22. Guarda los cambios. 23. Pulsa F12 y prueba la pgina, debers de acceder a ella desde nuevos.php para que se enve un id de libro. Comprueba desde phpMyAdmin que al rellenar el formulario de compra se ha creado un registro en la tabla Compras. Vers tambin que al crear el registro, se produce un error al volver a la pgina index.php, que an no existe. 24. Cierra el documento.
Volver a la teora
491
Ejercicio
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 ejecucin de archivos PHP. 3. Ejecuta Dreamweaver y abre el sitio libreria, vamos a trabajar sobre l. 4. Abre el archivo buscar.php. Vamos a modificarlo. 5. Abre el panel Vinculaciones (Ctrl + F10) y haz doble clic sobre el elemento juego de registros. 6. Cuando se abra el cuadro de dilogo haz clic sobre el botn Avanzado.... 7. En el campo SQL tendrs lo siguiente: SELECT * FROM libros WHERE Titulo = 'colname' ORDER BY Titulo ASC 8. Sustituye la tercera lnea por: WHERE Titulo LIKE %colname% Hemos aadido los smbolos %, que indican que antes o despus del valor del parmetro de bsqueda puede ir cualquier otro carcter. Con LIKE hacemos que la comparacin se haga buscando una cadena de carcteres que coincida con el patrn escrito entre comillas. Esto es tambin con las opciones normales, pero en vez de elegir el filtro = parmetro, elegir contiene parmetro. 9. Pulsa Aceptar y pulsa F12 para probar la pgina. Observa que ya no hace falta que introduzcas el ttulo exacto de un libro. 10. Vuelve a hacer doble clic sobre el elemento juego de registros en el panel Vinculaciones. 11. Ahora cambia la tercera lnea del cuadro SQL por: WHERE Titulo LIKE '%colname%' OR Autor LIKE '%colname%' Hemos modificado la condicin. Ahora el criterio de bsqueda se comparar en los campos Titulo y Autor es decir que se obtendrn los libros cuyo ttulo contenga el valor buscado o cuyo nombre de autor contenga el valor buscado.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 492
12. Pulsa Aceptar y pulsa F12 para probar la pgina. Observa que ahora puedes introducir una cadena que se buscar en el ttulo y el autor del libro. 13. Cierra el documento guardando los cambios. Finalmente crearemos una pgina de ndice, le asignaremos una sentencia SQL especial para que muestre los libros vendidos. 1. Abre un archivo dinmico nuevo basado en la plantilla libreria.dwt (Archivo Nuevo, Pgina de plantilla). 2. Gurdalo como index.php. 3. Haz clic en el botn para crear un nuevo juego de registros.
4. En el cuadro de dilogo que se abrir pulsa el botn Avanzado.... 5. En Nombre escribe libros_mas_vendidos. 6. En Conexin selecciona conexion_libreria. 7. En el campo SQL escribe las siguientes lneas: SELECT Count(compras.Id) AS cuenta, libros.id, libros.titulo, libros.editorial, libros.isbn, libros.precio, libros.autor, libros.usado FROM compras RIGHT JOIN libros ON compras.Id_libro=libros.id GROUP BY libros.id, libros.titulo, libros.editorial, libros.isbn, libros.precio, libros.autor, libros.usado ORDER BY cuenta DESC 8. Acepta el cuadro de dilogo. 9. En la zona donde puedes incluir contenido aade un prrafo que diga: eLibrera te ofrece las ltimas novedades en lectura. Escoge entre nuestros libros nuevos o usados y descubre las ofertas que te harn ahorrar hasta un 13% en libros de ocasin. 10. La primera palabra debe ser de clase primera_palabra. 11. Aade un segundo prrafo: Por la compra de 3 libros te los enviamos a casa GRATIS, no pierdas esta oportunidad. Promocin de Lectura 10% de descuento en todos los libros usados. 12. Crea un prrafo en blanco. 13. Luego vuelve a crear un prrafo que diga Nuestros libros ms vendidos son:, la primera palabra deber ser de clase primera_palabra. Ahora crearemos la parte que mostrar la informacin de los libros: 14. Inserta un bloque DIV (Insertar Objetos de diseo Etiqueta DIV), dale el id listado desde el Inspector de Propiedades. 15. Sita el cursor dentro de este bloque y vuelve a crear otro. A este le daremos la clase item. 16. Dentro del bloque con clase item inserta la imagen imagenes/item1.gif. 17. A la imagen asgnale la clase img_item. 18.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 493
16. 17. 18. Modifica el archivo origen de la imagen para que se pueda leer: imagenes/item<?php echo $row_libros_mas_vendidos['usado']; ?>.gif 19. Crea una lista (ul) con la clase detallelibro, con cinco elementos. 20. Arrastra sobre el primer elemento desde el panel Vinculaciones el elemento Titulo y asgnale a ese elemento la clase titulo.
Ejercicios pasoa paso
Para ello arrastra el campo Usado desde el panel Vinculaciones, usando la vista Cdigo.
21. Arrastra el elemento Autor desde el panel Vinculaciones y sobre el segundo elemento, al que debes dar la clase autor. 22. Arrastra el elemento Editorial desde el panel Vinculaciones sobre el tercer elemento. 23. En el siguiente elemento, escribe ISBN: y arrastra el elemento ISBN desde el panel Vinculaciones.
24. Arrastra el elemento Precio desde el panel Vinculaciones y dale la clase precio al elemento. A continuacin escribe y aade la imagen imagenes/compra.gif.
25. La imagen que acabamos de aadir deber tener la alineacin vertical a Texto superior. Adelo como un estilo en lne de la imagen. 26. Enlaza la imagen a comprar.php?id= desde el campo Vnculo del panel Propiedades. 27. Al enlace adele al final el Id del libro arrastrndolo desde el panel Vinculaciones. Emplea la vista Cdigo.
28. Inserta un bloque DIV (Insertar Objetos de diseo Etiqueta DIV), dale el id salto_linea desde el panel Propiedad
29. Selecciona el bloque item y salto_linea y haz que se repita 3 veces, utiliza la opcin Repetir Regin en el panel Inserta Datos. Estamos repitiendo el bloque de la informacin del libro y aadiendo un bloque con un salto de lnea para separarlo del siguiente.
30. Prueba la pgina activando la Vista en vivo y vers que el contenido de este listado muestra el detalle de los libros que m aparecen en la tabla de Compras. 31. Cierra el documento guardando los cambios.
Volver a la teora
494
Ejercicio
1. Si WampServer 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 WampServer en el rea de notificacin y selecciona la opcin phpMyAdmin. 4. Se abrir la ventana principal del programa, escribe bd_blog en el campo de texto de la imagen.
5. Selecciona utf-8_spanish_ci en el desplegable Cotejamiento. 6. Pulsa Crear para crear la base de datos. 7. Pasaremos a una nueva ventana con la estructura de la base de datos, para crear una nueva tabla escribe Entradas en Nombre y 5 en Campos. 8. Pulsa el botn Continuar para seguir. 9. Ahora vamos a configurar los campos. Al primer campo lo llamaremos Id, de tipo INT, con ndice de tipo PRIMARY y marcando la opcin A_I (auto incremento). Pues ser un campo numrico entero, autoincremental (cada vez que se graba un registro el sistema le asigna un nmero ms que el anterior), y ser la clave principal de la tabla (primario). 10. Al segundo lo llamaremos Titulo, de tipo VARCHAR y con longitud 100. 11. Al tercero lo llamaremos Texto, de tipo LONGTEXT. 12. Al cuarto lo llamaremos Fecha, de tipo DATE. 13. Al ltimo lo llamaremos Id_Categoria, de tipo INT, con longitud 11 con ndice de tipo INDEX. Lo definimos indexado para poder relacionarlo eficientemente con la tabla Categorias. 14. Por ltimo, cambiamos el Motor de almacenamiento a InnoDB para poder trabajar con relaciones. 15. Haz clic en Grabar para guardar los cambios y la tabla ya estar lista para utilizarse.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es
16.
495
14. 15. 16. Repite los mismos pasos para crear una tabla llamada Categorias con 2 campos. 17. Al primero lo llamaremos Id, de tipo INT, con AUTO_INCREMENT y un ndice PRIMARY. 18. Al segundo lo llamaremos Nombre, de tipo VARCHAR y con longitud 15. 19. Emplearemos el Motor de almacenamiento del tipo InnoDB. 20. De nuevo, repite los pasos para crear una tabla llamada Comentarios con 6 campos. 21. Al primero lo llamaremos Id, de tipo INT, con A_I y PRIMARY. 22. Al segundo lo llamaremos Autor, de tipo VARCHAR y con longitud 30. 23. Al tercero lo llamaremos Correo_Autor, de tipo VARCHAR y con longitud 30. 24. Al cuarto lo llamaremos Comentario, de tipo LONGTEXT. 25. Al quinto lo llamaremos Fecha, de tipo DATE.
26. Al ltimo lo llamaremos Id_Entrada, de tipo INT, con longitud 11 e INDEX. Indexado para relacionarlo con la tabla Entradas. 27. Emplearemos el Motor de almacenamiento del tipo InnoDB. 28. Por ltimo crearemos una tabla llamada Usuarios con 3 campos. 29. Al primero lo llamaremos Id, de tipo INT, con A_I y PRIMARY. 30. Al segundo lo llamaremos Usuario, de tipo VARCHAR y con longitud 20. 31. Al tercero lo llamaremos Password , de tipo VARCHAR y con longitud 20. 32. Emplearemos el Motor de almacenamiento del tipo InnoDB. Ahora definiremos las relaciones entre las tablas. 33. En el marco de la izquierda haz clic sobre la tabla Comentarios y una vez en su ventana haz clic en Vista de Relaciones. 34. En Id_Entrada selecciona en el segundo desplegable bd_blog.entradas.Id. Para indicar que en este campo habr un id que deber estar en la tabla Entradas. 35. En el desplegable ON DELETE selecciona CASCADE. 36. Y por ltimo en ON UPDATE seleccionar CASCADE. 37. Pulsa Grabar. 38. En el marco de la izquierda haz clic sobre la tabla Entradas y una vez en su ventana haz clic en Vista de Relaciones. 39. En Id_Categoria selecciona en el segundo desplegable bd_blog.categorias.Id. 40. En el siguiente desplegable selecciona CASCADE. 41. aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 42.
496
39. 40. 41. Para terminar, en el siguiente vuelve a seleccionar CASCADE. 42. Pulsa Grabar. 43. Ahora vamos a rellenar las tablas, importaremos los datos de unos ficheros de texto. Vuelve a la tabla Categorias seleccionndola en el men de la izquierda. 44. Haz clic en la opcin Importar que encontrars en el men horizontal en la parte superior de la ventana:
Ejercicios pasoa paso
45. En la siguiente ventana pulsa el botn Examinar y busca el archivo categorias-latin1.txt que se encuentra en la carpeta de ejercicios, dentro de la carpeta blog. 46. El archivo se encuentra codificado en latin1 as que seleccinalo en la lista de Juego de caracteres del archivo. 47. Pulsa el botn Continuar. 48. Asegrate de que se han introducido datos en la tabla pulsando la opcin Examinar de la tabla Categorias. 49. Repite los mismos pasos con el archivo entradas-latin1.txt para introducir datos en la tabla Entradas. 50. Repite los mismos pasos con el archivo comentarios-latin1.txt para introducir datos en la tabla Comentarios. 51. Repite los mismos pasos con el archivo usuarios-latin1.txt para introducir datos en la tabla Usuarios. 52. Ahora crearemos un usuario y le asignaremos privilegios para que pueda modificar los datos almacenados. Haz clic sobre bd_blog en el marco de la izquierda y haz clic sobre 53. Haz clic en el vnculo Agregar un nuevo usuario. 54. En la nueva ventana escribe escritor en Nombre de usuario. 55. En Servidor escribe localhost. 56. En Contrasea escribe aulaclic. 57. En Debe volver a escribir escribe aulaclic de nuevo. 58. Pulsa el botn Continuar, al final de la pgina, para crear el usuario. 59. Estamos definiendo los privilegios para la base de datos bd_blog. Observa que estn todos seleccionados. Deseleccinalos para que slo queden seleccionados SELECT, INSERT, UPDATE y DELETE. Si te das cuenta estn todos en el marco de Datos. Vamos a darle a este usuario nicamente permiso de escritura y lectura sobre la base de datos. Los permisos de Administracin y Estructura los dejaremos en blanco para que este usuario no pueda acceder a la parte administrativa ni pueda modificar la estructura de las tablas. 60. Pulsa Continuar para asignarle al usuario estos privilegios y habremos terminado. .
Volver a la teora
497
Ejercicio
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. Empezaremos por definir una conexin a la base de datos. Recuerda que creamos la base de datos y su estructura de tablas en el ejercicio anterior. 1. Ejecuta Dreamweaver y abre el sitio blog, vamos a trabajar sobre l. Para poder trabajar, necesitas tener un documento dinmico abierto. As que abre la plantilla blog.dwt.php. 2. Recuerda que esta plantilla la creaste en ejercicios de temas anteriores. Si no la tienes, revisa los ejercicios propuestos. Abre el panel Bases de Datos con la combinacin de teclas CTRL + MAYUS + F10 o desde el men Ventana Bases de datos. 4. Si an no lo habas hecho, define ahora el servidor de pruebas. 5. Haz clic en el botn y selecciona Conexin MySQL para crear una nueva conexin.
6. En Nombre de conexin escribe blog_aulaclic. 7. En Servidor MySQL escribe localhost. 8. En Nombre de usuario escribe escritor. 9. En Contrasea escribe aulaclic. 10. En Base de datos selecciona bd_blog. 11. Pulsa Prueba para comprobar que todo es correcto. Si no lo es, revisa los datos introducidos. 12. Pulsa Aceptar para crear la conexin. Ahora vamos a modificar el men de salto que introdujimos en temas anteriores en la plantilla para que se visualicen en l las categoras. Primero deberemos definir un juego de registros para obtener las categoras. 1. Abre la plantilla blog.dwt.php si no la tenas abierta, ya que vamos a editarla. 2. Haz clic en el botn para crear un nuevo juego de registros.
3. En el cuadro de dilogo que se abrir rellena los datos de la siguiente forma: en Nombre escribe categorias_para_menu4. 5.
2. 3. 4. En Conexin selecciona blog_aulaclic. 5. En Tabla selecciona categorias. 6. En Ordenar selecciona Nombre y en el desplegable de al lado Ascendente. 7. Haz clic en el botn Aceptar para crear el juego de registros. 8. Ahora hay que modificar el men de salto. Seleccinalo y edita su lista de valores, eliminando los valores que pusimos como ejemplo. 9. Con el men seleccionado, pulsa el botn Dinmico del Inspector de propiedades. 10. En Opciones del juego de registros elige categorias_para_menu. 11. En Valores elige el campo Id. 12. En Etiquetas elige el campo Nombre. 13. Pulsa Aceptar. 14. Ve al cdigo fuente del men. Y en el valor del elemento, aade categorias.php?id= al principio. Te quedar as: <option value=" categorias.php?id= <?php echo $row_categorias_para_menu['Id']?>"> <?php echo $row_categorias_para_menu['Nombre']?> </option> 15. Cierra la plantilla guardando los cambios. Crearemos ahora la pgina index. 1. Abre un nuevo archivo dinmico basado en la plantilla blog.dwt.php (Archivo Nuevo, Pgina de plantillas). 2. Gurdalo como index.php, dndole el ttulo Bienvenidos al Blog aulaClic. 3. Haz clic en el botn para crear un nuevo juego de registros.
Ejercicios pasoa paso
4. En el cuadro de dilogo que se abrir haz clic en Avanzado... 5. En Nombre escribe listado_entradas. 6. En Conexin selecciona blog_aulaclic. 7. En SQL debers pegar la siguiente sentencia SQL: SELECT entradas.Id, entradas.Titulo, entradas.Texto, entradas.Fecha, categorias.Nombre as Nombre_Categoria, categorias.Id AS Id_Categoria, COUNT(comentarios.Id) AS Cuenta_comentarios FROM (entradas LEFT JOIN comentarios ON entradas.Id=comentarios.Id_Entrada) INNER JOIN categorias ON entradas.Id_Categoria=categorias.Id GROUP BY entradas.Id, entradas.Titulo, entradas.Texto, entradas.Fecha, categorias.Nombre, categorias.Id ORDER BY entradas.Fecha DESC Con esta sentencia obtenemos un juego de registros con las entradas con el nombre de la categora correspondiente y el nmero de comentarios que tiene la entrada. Las entradas aparecern ordenadas por fecha de la ms antigua a la ms reciente. 8. Haz clic en el botn Aceptar para crear el juego de registros.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 499
En la nica regin editable debers escribir un prrafo de clase titulo que muestre el elemento Titulo 9. que habrs arrastrado del panel Vinculaciones .
10. A continuacin arrastra el elemento Texto, este no deber estar dentro de un prrafo. En un nuevo prrafo de clase datos escribe aulaClic - y a continuacin aade el elemento Fecha arrastrndolo desde el panel Vinculaciones. 12. Crea un prrafo de clase datos y en l escribe Categora:, a continuacin arrastra el elemento Nombre_Categoria. 13. Sobre este elemento crea un vnculo que vaya a categorias.php?id= 14. Aade Id_Categoria arrastrndolo desde el panel Vinculaciones para que te quede el enlace de este modo: categorias.php?id=<?php echo $row_listado_entradas['Id_Categoria']; ?> Finalmente inserta un ltimo prrafo de clase datos que diga Comentarios. 16. A continuacin, en el mismo prrafo, arrastra el elemento Cuenta_comentarios. 17. Crea un enlace en el elemento Cuenta_comentarios que vaya a comentarios.php?id=. 18. Aade el elemento Id arrastrndolo desde el panel Vinculaciones para que te quede el enlace de este modo. comentarios.php?id=<?php echo $row_listado_entradas['Id']; ?> 19. Selecciona el texto que acabas de insertar y haz que se repita para que muestre 6 registros. Utiliza la opcin Repetir Regin. Asegrate de elegir el juego de registros listado_entradas. 20. Cierra el documento guardando los cambios y prubalo. 21. Observa la pgina. Si los caracteres especiales (acentos) no se muestran correctamente. Sigue estos pasos: 22. Abre la plantilla blog.dwt.php. 23. Ve a las propiedades de la pgina: men Modificar Propiedades de la pgina.... 24. En la seccin Ttulo/Codificacin, abre el desplegable Codificacin y selecciona Europeo occidental. 25 Acepta para salir del dilogo, Guarda la plantilla, actualiza las pginas y gurdalas. Ahora crearemos la pgina para las entradas por categora. 1. Abre un nuevo archivo dinmico basado en la plantilla blog.dwt.php (Archivo Nuevo, Pgina de plantilla). 2. Gurdalo como categorias.php y dale el ttulo Blog aulaClic - Categoras. 3. Haz clic en el botn para crear un nuevo juego de registros.
4. En el cuadro de dilogo que se abrir haz clic en Avanzado... 5. En Nombre escribe listado_por_categoria. 6. En Conexin selecciona blog_aulaclic. 7. En SQL debers pegar la siguiente sentencia SQL: SELECT entradas.Id, entradas.Titulo, entradas.Texto, entradas.Fecha, COUNT (comentarios.Id) AS Cuenta_Comentarios,categorias.Nombre AS Nombre_Categoria FROM (entradas LEFT JOIN comentarios ON entradas.Id=comentarios.Id_Entrada) INNER JOIN categorias ON entradas.Id_Categoria=categorias.Id WHERE Id_Categoria = colname
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 500
GROUP BY entradas.id, entradas.Titulo, entradas.Texto, entradas.Fecha, categorias.Nombre ORDER BY Fecha DESC 8. Pulsa el botn en el siguiente cuadro para aadir un parmetro (variable).
9. En el cuadro de dilogo escribe los siguientes valores: Nombre: colname Tipo: Integer Valor predeterminado: -1 Valor en tiempo de ejecucin: $_GET['id'] 10. Haz clic en el botn Aceptar para crear el juego de registros. 11. En la nica regin editable debers escribir un prrafo de clase datos que diga Categora: 12. A continuacin incluye el elemento Nombre_Categoria arrastrndolo desde el panel Vinculaciones y ponlo en negrita. Seguidamente escribe un prrafo de clase titulo que contenga el elemento Titulo desde el panel Vinculaciones. 14. A continuacin arrastra el elemento Texto, este no deber estar dentro de un prrafo. 15. En un nuevo prrafo de clase datos escribe aulaClic - y a continuacin aade el elemento Fecha 16. Finalmente inserta un ltimo prrafo de clase datos que diga Comentarios. 17. A continuacin, en el mismo prrafo, arrastra el elemento Cuenta_comentarios. 18. Crea un enlace en el elemento Cuenta_comentarios que vaya a comentarios.php?id=. 19 Aade el elemento Id arrastrndolo desde el panel Vinculaciones para que te quede el enlace de este modo. comentarios.php?id=<?php echo $row_listado_por_categoria['Id']; ?> 20. Selecciona este ltimo bloque (a partir del ttulo) y haz que se repita para que muestre 6 registros. Repetir regin. Asegrate de elegir el juego de registros listado_por_categoria. Coloca el cursor al final del todo e incluye un navegador de registros utilizando la opcin Barra de Navegacin de juego de registros .
22. Selecciona la opcin Imgenes para que se muestre el navegador con flechas. Para terminar crearemos la pgina para los comentarios. 1. Abre un nuevo archivo dinmico basado en la plantilla blog.dwt.php (Archivo Nuevo, Pgina de plantilla). 2. Dale el ttulo Blog aulaClic - Comentarios y gurdalo como comentarios.php. 3. Haz clic en el botn para crear un nuevo juego de registros.
4. En el cuadro de dilogo que se abrir haz clic en Simple... 5. En Nombre escribe listado_comentarios. 6. En Conexin selecciona blog_aulaclic.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 7. 501
8.
7. En Tabla selecciona comentarios. 8. Cambia la opcin Filtro para que pueda leerse ID_Entrada = Parmetro URL id. 9. Cambia la opcin Ordenar para que pueda leerse Fecha Descendente. 10. Haz clic en el botn Aceptar para crear el juego de registros. En la nica regin editable escribe un prrafo que contenga el elemento Autor que habrs arrastrado desde el panel Vinculaciones y ponlo en negrita. 12. Luego aade el elemento Comentario a continuacin, sin contenerlo en un prrafo. 13. A continuacin incluye un nuevo prrafo de clase datos que contenga el elemento Fecha. Para terminar inserta una regla horizontal (Insertar HTML Regla horizontal), o escribe <hr /> Selecciona el bloque que acabamos de aadir y haz que se repita para que muestre todos los registros de la tabla. 15. Utiliza la opcin Repetir regin. Asegrate de tener seleccionado el recordset listado_comentarios. Selecciona de nuevo el bloque que te ha quedado y haz que slo se muestre si hay algn registro en el recordset. 16. Utiliza la opcin Mostrar si el juego de registros no est vaco. Asegrate de tener seleccionado el recordset listado_comentarios. 17. Seguidamente, tras la repeticin, escribe un prrafo que diga Introduce aqu tu comentario: Ahora introduce un formulario de insercin de registros. Haz clic en el botn Asistente de formulario de insercin de registros 19. Selecciona la tabla Comentarios. 20. Debers excluir el campo Id pues se generar automticamente. Seleccinalo de la lista de campos y pulsa el botn 21. El campo Comentario se debe mostrar como un rea de texto. 22. Cambia la etiqueta del correo a Correo. El campo Fecha ser oculto y con un Valor predeterminado de <?php echo date('ymd'); ?>. Esto generar la fecha actual. El campo Id_Entrada tambin ser oculto y tomar el Valor predeterminado de <?php echo $_GET['id']; ?>. El parmetro con el ID de la entrada. 25. Pulsa Aceptar y habremos terminado. 26. Cambia el tamao del rea de texto a Ancho car 45 y Lneas num 10. 27. Cambia el valor del botn a Guardar. 28. Cierra el documento guardando los cambios. Ahora puedes probar a guardar tus comentarios. .
Volver a la teora
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 502
Ejercicio
1. Ejecuta Dreamweaver y abre el sitio blog, vamos a trabajar sobre l. 2. Abre un nuevo archivo dinmico basado en la plantilla blog.dwt.php (Archivo Nuevo, Pgina de plantilla). 3. Dale el ttulo Blog aulaClic - Administracin y gurdalo como admin.php. 4. En la nica regin editable debers escribir un prrafo de clase titulo que diga Crear nuevas: 5. Luego escribe un nuevo prrafo que diga Nueva entrada, debers hacer que este texto tenga un enlace a nueva_entrada.php. 6. A continuacin aade un nuevo prrafo en el que pueda leerse Nueva categora, este texto deber tener un enlace a nueva_categoria.php. 7. Aade un prrafo vaco. 8. Incluye un nuevo prrafo de clase titulo que diga Modificar existentes: 9. Crea un ltimo prrafo que diga Modificar comentarios, este texto debe enlazarse con listado_comentarios.php. 10. Cierra el documento guardando los cambios.
Volver a la teora
503
Ejercicio
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 blog, vamos a trabajar sobre l.
Empezaremos por crear la pgina para introducir nuevas categoras. 1. Abre un nuevo archivo dinmico basado en la plantilla blog.dwt.php (Archivo Nuevo, Pgina de plantilla). 2. Dale el ttulo Blog aulaClic - Nueva categora y gurdalo como nueva_categoria.php. 3. En la nica regin editable debers escribir un prrafo de clase titulo que diga Escribe el nombre de la nueva categora: 4. Ahora deberemos introducir un formulario de insercin de registros. Haz clic en el botn Asistente de formulario de insercin de registros .
5. Debers crearlo para la tabla Categoras, excluyendo el campo Id quitndolo de la lista de campos, pues se generar automticamente. El resto lo dejaremos como est. 6. Cierra el documento guardando los cambios.
Ahora crearemos la pgina para crear nuevas entradas. 1. Abre un nuevo archivo dinmico basado en la plantilla blog.dwt.php (Archivo Nuevo, Pgina de plantilla). 2. Dale el ttulo Blog aulaClic - Nueva entrada y gurdalo como nueva_entrada.php. 3. Vamos a crear un nuevo juego de registros para mostrar las categoras. Pulsa en el icono del panel
Insertar. Observars que ya tenemos un juego de registro con las categoras, el definido en la pgina maestra. No podemos emplear este, porque los juegos de registros slo pueden leerse una vez, por lo que no podemos llevar varias listas.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 4. 504
4. Llmalo listado_categorias. Selecciona la tabla categoras y ordnalo por el Nombre ascendentemente. Pulsa Aceptar. 5. En la nica regin editable escribe un prrafo de clase titulo que diga No hay categoras en la base de datos. 6. Escribe un segundo prrafo que diga Crea una nueva desde aqu, enlazada la ltima palabra con el archivo nueva_categoria.php. 7. Selecciona estos dos prrafos que acabas de introducir y haz que se muestre si no existen registros de categoras. Si no hay categoras no podremos asociar la entrada a ninguna de ellas. Utiliza la opcin Mostrar si el juego de registros est vaco, seleccionando el recordset listado_categorias. 8. Seguidamente escribe un prrafo de clase titulo que diga Introduce los datos de la nueva entrada: 9. Ahora deberemos introducir un formulario de insercin de registros. Haz clic en el botn Asistente de formulario de insercin de registros 10. Selecciona la tabla Entradas. 11. Debers excluir el campo Id pues se generar automticamente. 12. El campo Texto se deber mostrar como un rea de texto. 13. El campo Fecha deber enviarse como tipo Fecha. 14. El campo Id_Categora deber mostrarse como un men. Pulsa el botn Propiedades de men. 15. En las propiedades del men, en Rellenar elementos de men elige De base de datos. 16. En juego de registros, elige listado_categorias. 17. En Obtener etiquetas de selecciona Nombre, y en Obtener valores de elige Id. 18. Cambia la etiqueta del men a slo Categoras. 19. Pulsa Aceptar para cerrar el dilogo. Ya casi hemos terminado. 20. Finalmente selecciona la ltima parte de la pgina, el segundo prrafo que has escrito y el formulario y haz que se muestre si existen registros en el recordset de listado_categorias. Utiliza la opcin Mostrar si el recordset no est vaco. 21. Cambia las propiedades del rea de texto para que muestre 45 caracteres de ancho y 10 lneas verticales. 22. Aade el texto con el formato de la fecha AA/MM/DD junto a la caja de texto de la fecha. 23. Cierra la pgina guardando los cambios. .
Volver a la teora
505
Ejercicio
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 blog, vamos a trabajar sobre l. Vamos a crear la pgina que muestre un listado de comentarios. 4. Abre un nuevo archivo dinmico basado en la plantilla blog.dwt.php (Archivo Nuevo, Pgina de plantilla). 5. Dale el ttulo Blog aulaClic - Listado de comentarios y gurdalo como listado_comentarios.php. 6. En la nica regin editable debers escribir un prrafo de clase titulo que diga Selecciona una entrada:. 7. Crearemos un recordset para cargar los ttulos y fechas de las entradas. Haz clic en el botn para crear un nuevo juego de registros.
8. En el cuadro de dilogo que se abrir rellena los datos de la siguiente forma: en Nombre escribe listado_entradas. 9. En Conexin selecciona blog_aulaclic. 10. En Tabla selecciona entradas. 11. En Ordenar selecciona Fecha y en el desplegable de al lado Descendente, para que se muestre la ms reciente. 12. Haz clic en el botn Aceptar para crear el juego de registros. 13. Debajo del prrafo que hemos aadido debers insertar una tabla con 10 pxeles de relleno de celda y un ancho del 100%. En esta tabla listaremos las entradas. La tabla deber tener 2 filas y 2 columnas, siendo la primera fila un encabezado. 14. A las celdas de la primera fila, aplcales el estilo borde_inferior. Alinea las celdas de la segunda columna a la derecha. 15. Escribe en la primera celda de la primera fila Ttulo. 16. Escribe en la segunda celda de la primera fila Fecha. 17.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 506
15. 16.
Ejercicios pasoa paso
17. En la primera celda de la segunda fila arrastra el elemento Titulo desde el panel Vinculaciones, del juego listado_entradas. 18. Asgnale un enlace a listado_comentarios.php?id= 19. Empleando la vista cdigo, modifica el vnculo arrastrando el elemento Id del juego listado_entradas desde el panel Vinculaciones para que se muestre de este modo: <a href="listado_comentarios.php?id=<?php echo $row_listado_entradas['Id']; ? >"> 20. En la segunda celda de la segunda fila inserta el elemento Fecha arrastrndolo desde el panel Vinculaciones. Ponlo en cursiva empleando un estilo en lnea aplicado a la celda. 21. Selecciona la segunda fila de la tabla y haz que se repita para que muestre 6 registros. 22. Utiliza la opcin Repetir Regin para el juego listado_entradas. 23. Luego coloca el cursor al final del contenido editable e introduce una barra de navegacin de registros para el juego listado_entradas. Utiliza imgenes, y centra la tabla en la pgina.
24. Ahora aadiremos el listado de comentarios. Escribe el siguiente prrafo de clase titulo con el texto Selecciona un comentario a modificar o eliminar. 25. Crearemos un recordset para cargar el autor, correo y fecha del comentario. Haz clic en el botn para crear un nuevo juego de registros.
26. En el cuadro de dilogo que se abrir rellena los datos de la siguiente forma: en Nombre escribe listado_comentarios. 27. En Conexin selecciona blog_aulaclic. 28. En Tabla selecciona Comentarios. 29. En Ordenar selecciona Fecha y en el desplegable de al lado Descendente. 30. Modifica los desplegables de Filtro para que pueda leerse: Id_Entrada = Parmetro URL id. 31. Haz clic en el botn Aceptar para crear el juego de registros. 32. Debajo del prrafo que has aadido inserta una tabla con 10 pxeles de relleno de celda. 33. La tabla deber tener 2 filas y 5 columnas, con un ancho del 100% y la primera fila de encabezados. 34. Aplica a las celdas de la primera fila el estilo borde_inferior. 35. En la primera celda de la primera fila escribe Autor en negrita. 36. En la segunda celda de la primera fila escribe Correo en negrita. 37. En la tercera celda de la primera fila escribe Fecha en negrita. 38. Arrastra el elemento Autor del juego listado_comentarios a la primera celda de la segunda fila. 39. Arrastra el elemento Correo_Autor del juego listado_comentarios a la segunda celda de la segunda fila y ponlo en cursiva. 40.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 507
39.
40. Arrastra el elemento Fecha del juego listado_comentarios a la tercera celda de la segunda fila y ponlo en cursiva. 41. Centra horizontalmente cuarta celda de la segunda fila, e inserta la imagen imagenes/edit.png y enlzala a modifica_comentario.php?id=. No olvides establecer su atributo Alt como Editar. 42. Arrastra el elemento Id del juego listado_comentarios para que el enlace quede de este modo: modifica_comentario.php?id=<?php echo $row_listado_comentarios['Id']; ?> 43. En la quinta celda de la segunda fila inserta la imagen imagenes/trash.png y enlzala a elimina_comentario.php?id= 44. Arrastra el elemento Id para que el enlace quede de este modo: elimina_comentario.php?id=<?php echo $row_listado_comentarios['Id']; ?> 45. Selecciona la segunda fila de la tabla y haz que se repita para que muestre todos los registros del recordset. 46. Utiliza la opcin Repetir Regin, sobre el juego listado_comentarios, seleccionando Todos los registros. 47. Para terminar, selecciona el primer prrafo y la primera tabla y haz que se muestren si no hay registros en el recordset de listado_comentarios. Utiliza la opcin Mostrar si el juego de registros est vaco. Si es la primera vez y al listado_comentarios no le hemos pasado un Id de entrada, o si la entrada no tiene comentarios lo que hay que hacer es visualizar el listado de entradas (la primera tabla). Si por el contrario la entrada seleccionada tiene comentarios tenemos que visualizar la segunda tabla (la que contiene el lista de comentarios): 48. Selecciona el segundo prrafo y la segunda tabla y haz que se muestren si hay registros en el recordset de listado_comentarios. Utiliza la opcin Mostrar si el juego de registros no est vaco. Hemos creado un listado de entradas que al hacer clic sobre una de ellas enva su ID a la misma pgina que genera un listado de los comentarios correspondientes a esa entrada. 49. Para acabar, aade el estilo necesario a la hoja de estilos para que las imgenes con enlace se muestren sin borde a img {border-style: none;}. 50. Cierra el documento guardando los cambios.
Volver a la teora
508
Ejercicio
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 blog, vamos a trabajar sobre l. Vamos a crear una pgina para modificar comentarios. 4. Abre un nuevo archivo dinmico basado en la plantilla blog.dwt.php (Archivo Nuevo, Pgina de plantilla). 5. Dale el ttulo Blog aulaClic - Modificar comentarios y gurdalo como modifica_comentario.php. 6. En la nica regin editable debers escribir un prrafo de clase titulo que diga Modificando el comentario: Crearemos un recordset para cargar el comentario que queremos modificar. 7. Haz clic en el botn para crear un nuevo juego de registros.
8. En el cuadro de dilogo que se abrir rellena los datos de la siguiente forma: en Nombre escribe detalle_comentario. 9. En Conexin selecciona blog_aulaclic. 10. En Tabla selecciona comentarios. 11. En Filtrar selecciona lo siguiente: Id = Parmetro URL id. 12. Haz clic en el botn Aceptar para crear el juego de registros. 13. Ahora visualizaremos el comentario para asegurarnos de que es ste el que queremos modificar. 14. Escribe un prrafo en negrita que muestre el Autor del comentario. Arrastra el elemento desde el panel Vnculos. 15. Luego inserta el elemento Comentario. 16. Aade un nuevo prrafo de clase datos y colcale la Fecha del comentario. 17. Finalmente inserta una regla horizontal (Insertar HTML Regla Horizontal). 18. Pulsa el botn Asistente de formulario de actualizacin de registros 19. aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 20. .
509
18. 19. En el cuadro de dilogo que se abrir seleccionarla tabla a modificar comentarios. 20. En Seleccionar registro de selecciona detalle_comentario. 21. Cuando se termine la actualizacin deberemos volver a la pgina admin.php. 22. Haz que el campo Id sea oculto. 23. El campo Fecha debe enviarse como Fecha. 24. El campo Comentario debe mostrarse como un rea de texto. 25. Pulsa Aceptar para cerrar el cuadro de dilogo. 26. Guarda los cambios y cierra el documento.
En realidad lo deberamos de haber hecho un poco ms complejo. En vez de mostrar el ID de la entrada, habra que mostrar un men con las distintas entradas, como hacamos con las categoras.
Volver a la teora
510
Ejercicio
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 blog, vamos a trabajar sobre l. Vamos a crear la pgina para eliminar comentarios. 4. Abre un nuevo archivo dinmico basado en la plantilla blog.dwt.php (Archivo Nuevo, Pgina de plantilla). 5. Dale el ttulo Blog aulaClic - Eliminar comentario y gurdalo como elimina_comentario.php. 6. Crearemos un recordset para cargar el comentario que queremos eliminar. 7. Haz clic en el botn para crear un nuevo juego de registros.
8. En el cuadro de dilogo que se abrir rellena los datos de la siguiente forma: en Nombre escribe detalle_comentario. 9. En Conexin selecciona blog_aulaclic. 10. En Tabla selecciona comentarios. 11. En Filtrar selecciona lo siguiente: Id = Parmetro URL id. 12. Haz clic en el botn Aceptar para crear el juego de registros. 13. En la nica regin editable escribe un prrafo de clase titulo que diga Se va a eliminar a eliminar el comentario: 14. Un segundo prrafo en negrita deber mostrar el Autor del comentario. Arrstralo desde el panel Vinculaciones. 15. Luego aade el Comentario. 16. Finalmente crea un ltimo prrafo de clase datos y arrastra en l el elemento Fecha. 17. Crea un formulario (Insertar Formulario Formulario). 18. En l crea un campo oculto (Insertar Formulario Campo Oculto). 19. En el panel Propiedades dale el nombre campoOculto al campo que acabamos de crear. 20. Ve a la vista cdigo. Si el campo oculto no muestra el atributo value, adelo (value=""). Arrastra entre las
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 511
21.
19. 20. comillas el Id del juego detalle_comentario. 21. Crea tambin un botn (Insertar Formulario Botn). 22. En el Inspector de propiedades, cambia el valor del botn por Borrar comentario.
23. Selecciona el formulario. En el campo Accin indica la pgina actual elimina_comentario.php, y cambia el mtodo de envo a GET. 24. Estamos listos para insertar el comportamiento de Eliminar Registro. 25. Haz clic en el botn Eliminar Registro en la barra Datos.
26. En Comprobar si hay una variable definida, elige Parmetro URL y escribe campoOculto. As solo intentar borrar si se ha recibido este parmetro. 27. Rellena los datos del cuadro de dilogo, usando la tabla Comentarios. 28. En Valor de clave principal escribe Parmetro URL campoOculto. 29. En Despus de borrar ir a escribe admin.php. 30. Pulsa Aceptar para terminar. 31. Cierra el documento guardando los cambios.
Volver a la teora
512
Ejercicio
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 blog, vamos a trabajar sobre l. 4. Abre un nuevo archivo dinmico basado en la plantilla blog.dwt.php (Archivo Nuevo, Pgina de plantilla). 5. Dale el ttulo Blog aulaClic - Inicio de sesin, y gurdalo como login.php. 6. En la nica regin editable debers escribir un prrafo de clase titulo que diga Introduce usuario y contrasea:. 7. A continuacin inserta un formulario (Insertar Formulario Formulario). Llmalo form1. 8. Dentro del formulario debers introducir dos campos de texto (Insertar Formulario Campo de texto). 9. Al primero lo llamaremos usuario y ser de tipo Texto. Tendr una etiqueta que muestre el texto Usuario:. 10. Al segundo lo llamaremos contrasena y ser de tipo Contrasea. Recuerda no utilizar la en los nombres de campos y archivos. Tendr una etiqueta que muestre Contrasea:. 11. Finalmente aade un botn (Insertar Formulario Botn) dale el valor Entrar. Puedes organizarlo todo en una tabla.
513
12.
13. Acepta el formulario. 14. Cierra el documento guardando los cambios. Ahora deberemos especificar qu pginas se vern afectadas por el acceso restringido. 15. Abre el documento admin.php. 16. Selecciona la opcin Restringir acceso a pgina .
17. Establece que Si se deniega el acceso se enve a login.php y acepta los cambios. 18. Para terminar crearemos un enlace Desconectar en las pginas para que el usuario pueda terminar la sesin. Selecciona la opcin Desconectar usuario .
19. En el cuadro de dilogo que se abrir selecciona la opcin Crear nuevo vnculo: "Desconectar". 20. En al Terminar, ir a: indica index.php. 21. Pulsa Aceptar para cerrar el cuadro de dilogo. 22. Coloca el enlace en la parte superior de la regin editable y dentro de un prrafo de clase datos. 23. Cierra el documento guardando los cambios. La pgina ahora estar protegida. 24. Tenemos que repetir estos pasos en todas la pginas restringidas, porque aunque no tengan un enlace directo, cualquiera podra acceder si escribe la ruta al archivo en la barra de direcciones. Por tanto, repite los pasos anteriores para las pginas:
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 514
24.
Ejercicios pasoa paso
elimina_comentario.php listado_comentarios.php modifica_comentario.php nueva_categoria.php nueva_entrada.php 25. Cierra los documentos guardando los cambios. Ahora podrs entrar a las pginas restringidas utilizando el nombre de usuario aulaclic y contrasea miprimerblog (es el usuario que importamos en la tabla de usuarios) en el primer ejercicio del tema.
Volver a la teora
515
Ejercicio
1. Si WampServer no se est ejecutando, lnzalo para realizar este ejercicio. 2. Haz clic izquierdo sobre el icono de WampServer en el rea de notificacin y selecciona la opcin PHP Extensiones de PHP. Se desplegar un men que mostrar todas las extensiones instaladas. 3. Desplzate hacia abajo hasta que encuentres una llamada php_xsl. 4. Haz clic sobre ella y la extensin se instalar.
Volver a la teora
516
Ejercicio
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2. Abre el sitio libreria. 3. Crea un nuevo archivo de XSLT (fragmento) haciendo clic en Archivo Nuevo, Categora Pgina en blanco, XSLT (fragmento). 4. Se abrir un cuadro de dilogo, selecciona la opcin Adjuntar un archivo remoto en Internet. 5. En la caja de texto escribe http://www.criticadelibros.org/whats-new.rss. 6. Pulsa Aceptar. 7. Guarda el archivo como critica_rss.xsl. 8. Abre el panel Vinculaciones (Ctrl + F10). 9. Arrastra el elemento rss:title que se encuentra bajo el elemento rss:item a un nuevo prrafo. 10. Arrastra el elemento rss:description que se encuentra bajo el elemento rss:item a un nuevo prrafo. Deber quedarte algo as:
Volver a la teora
517
Ejercicio
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2. Abre el sitio libreria. 3. Abre el archivo critica_rss.xsl creado en ele ejrcicio anterior. 4. Selecciona el elemento {rss/channel/item/title}. 5. Haz clic en el icono que aparece a la derecha del campo Vnculo en el panel de Propiedades.
6. Selecciona la opcin Fuentes de datos en el cuadro de dilogo Seleccionar archivo. 7. Selecciona el elemento link que se encuentra bajo el elemento item. 8. Pulsa Aceptar. 9. Se crear el enlace al contenido del elemento link en el elemento title. 10. Puedes pulsar la tecla F12 para ver el resultado. Vers que ahora el ttulo muestra el enlace. 11. Cierra el documento guardando los cambios.
Volver a la teora
518
Objetivo
Practicar la creacin de repeticiones de elementos.
Objetivo
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2. Abre el sitio libreria. 3. Abre el archivo critica_rss.xsl 4. Bajo los dos elementos que se encuentran en la pgina inserta una linea horizontal (Insertar HTML Regla horizontal). Desde la vista de Cdigo debers ver algo as: <p><a href="{rss/channel/item/link}"><xsl:value-of select="rss/channel/item/title"/></a></p> <p><xsl:value-of select="rss/channel/item/description" disable-outputescaping="yes"/></p> <hr /> 5. Selecciona este bloque de cdigo y pulsa el botn Repetir regin 6. En el cuadro de dilogo que se abrir selecciona el elemento item. 7. Haz clic en la flecha que se encuentra al lado de Construir filtro. 8. Se desplegar un nuevo marco, haz clic en el botn 9. En Filtrar por deber aparecer item. 10. En WHERE escribe position(). 11. En Operador selecciona <=. 12. En Valor escribe 4. 13. Pulsa Aceptar. Hemos creado un filtro para que se muestren los 4 primeros elementos del archivo RSS. 14. Cierra el documento guardando los cambios. . , del Panel Insertar XSLT.
Volver a la teora
519
Ejercicio
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2. Abre el sitio libreria. 3. Abre el archivo critica_rss.xsl 4. Ve a la vista de Cdigo. 5. Bajo la lnea de repeticion xsl:for-each escribe lo siguiente para que se ordenen los elementos por su ttulo: <xsl:sort select="title" /> Deber quedarte algo as:
<xsl:for-each select="rss/channel/item[position() <= 4]"> <xsl:sort select="title" /> <p><a href="{link}"><xsl:value-of select="title"/></a></p> <p><xsl:value-of select="description" disable-output-escaping="yes"/></p> <hr /> </xsl:for-each> Pulsa la tecla F12 para ver una previsualizacin. 6. Cierra el documento guardando los cambios.
Volver a la teora
520
Ejercicio
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 un archivo dinmico nuevo basado en la plantilla libreria.dwt.php (Archivo Nuevo, Pgina de plantilla). 5. Dale el ttulo Crticas y gurdalo como criticas.php. 6. En la regin editable escribe un prrafo que diga Crticas obtenidas de criticadelibros.org 7. La primera palabra deber verse afectada por la clase primera_palabra. 8. criticadelibros.org deber estar enlazado con http://www.criticadelibros.org/ 9. Haz clic en la pestaa Datos de la barra Insertar. 10. Coloca el punto de insercin debajo del prrafo que acabamos de escribir y pulsa Transformacin XSL del panel Insertar Datos, al final del todo. 11. En el cuadro de dilogo que se abrir selecciona el archivo critica_rss.xsl en el campo Archivo XSLT. 12. Acepta el cuadro de dilogo y vers como se aade el contenido RSS a la pgina. 13. Puedes probarla pulsando la tecla F12 o con la Vista en vivo. 14. Cierra el documento guardando los cambios.
Volver a la teora
521
Ejercicio
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. Abre el sitio libreria. 4. Abre el archivo criticas_rss.xsl. 5. Selecciona la etiqueta xsl:for-each y haz clic en el botn que aparece en el panel Propiedades.
6. Se abrir el cuadro de dilogo de Repetir regin. En el filtro que hemos creado sustituye el Valor 4 por $numeroCriticas y pulsa Aceptar. 7. Abre el archivo criticas.php. 8. En el panel Comportamientos del servidor (CTRL + F9) haz doble clic sobre el elemento XSL Transformation. 9. Haz clic en el botn en el cuadro de dilogo XSL Transformation para aadir un parmetro.
10. En el cuadro de dilogo que se abrir escribe numeroCriticas en Nombre. 11. Escribe 4 en Valor. 12. Acepta los dos cuadros de dilogo y habremos acabado. El cdigo debe de haber quedado as: <?php $mm_xsl = new MM_XSLTransform(); $mm_xsl->setXML("http://www.criticadelibros.org/whats-new.rss"); $mm_xsl->setXSL("critica_rss.xsl"); $mm_xsl->addParameter('numeroCriticas', '4'); echo $mm_xsl->Transform(); ?> 13. Prueba la pgina pulsando la tecla F12. 14. Cierra el documento guardando los cambios.
Volver a la teora
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 522
Ejercicio
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2. Abre el sitio libreria. 3. Copia el archivo libreria.xml que encontrars en la carpeta ejercicios/libreria del curso en la carpeta de tu sitio (mis_sitios/libreria). Seguramente ya lo copiaras al copiar los archivos del sitio. 4. brelo para ver su estructura. Observa que tenemos una etiqueta que engloba todo llamada biblioteca y otra que correspondera a cada registro llamada libro. 5. Abre un archivo dinmico nuevo basado en la plantilla libreria.dwt.php (Archivo Nuevo, Pgina de Plantilla). 6. Dale el ttulo Catlogo y gurdalo como catalogo.php. Ahora definiremos un dataset para poder utilizar la informacin almacenada en el archivo xml. 7. Ve al panel Insertar Spry, y selecciona Conjunto de datos de Spry. 8. En el cuadro de dilogo, selecciona la fuente de datos como XML. 9. Dale el nombre misLibros al recorset, y selecciona el archivo libreria.xml que acabas de copiar. 10. En el rbol de estructura que se cargar, selecciona libro. 11. Pulsa Listo. 12. Guarda los cambios en el documento. 13. Ve a la vista de cdigo. Comprueba que se han incluido los archivos en el sitio, y el cdigo que ha generado el DataSet. <script src="SpryAssets/xpath.js" type="text/javascript"></script> <script src="SpryAssets/SpryData.js" type="text/javascript"></script> <script type="text/javascript"> <!-var misLibros = new Spry.Data.XMLDataSet("libreria.xml", "biblioteca/libro"); //--> </script>
Volver a la teora
523
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
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
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
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
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 528
8. coincidencias. Observa que la funcin es sensible a maysculas/minsculas. 9. Cierra el documento guardando los cambios.
Volver a la teora
529
Ejercicios propuestos
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
Ejercicios propuestos
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
Ejercicios propuestos
Ejercicio 1: Deportes.
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
Ejercicios propuestos
Ejercicio 2: Animales.
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
Ejercicios propuestos
Unidad 5. Hiperenlaces
Si no tienes abierto Dreamweaver, brelo para realizar los ejercicios planteados a continuacin.
Ejercicio 1: Deportes.
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.
Ejercicio 2: Animales.
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
Ejercicios propuestos
Unidad 6. Imgenes
Si no tienes abierto Dreamweaver, brelo para realizar los ejercicios planteados a continuacin.
Ejercicio 1: Deportes.
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.
Ejercicio 2: Animales.
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),
(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
Ejercicios propuestos
Unidad 7. Tablas
Si no tienes abierto Dreamweaver, brelo para realizar los ejercicios planteados a continuacin.
Ejercicio 1: Deportes.
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.
Ejercicio 2: Animales.
1 Abrir el sitio Animales. 2 Abrir el documento index.htm. 3 Crea una tabla con las siguientes medidas:
536
Ejercicios propuestos
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.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 537
Ejercicios propuestos
Ver la solucin
Volver a la teora
538
Ejercicios propuestos
Unidad 9. Formularios
Si no tienes abierto Dreamweaver, brelo para realizar los ejercicios planteados a continuacin.
Ejercicio 1: Deportes.
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.
Ejercicio 2: Animales.
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
Ejercicios propuestos
Ver la solucin
Volver a la teora
540
Ejercicios propuestos
Ejercicio 1: Deportes.
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
Ejercicios propuestos
Ejercicio 1: Deportes.
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.
Ejercicio 2: Animales.
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
Ejercicios propuestos
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
Ejercicios propuestos
Ejercicio 1: Deportes.
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.
Ejercicio 2: Animales.
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
Ejercicios propuestos
Ejercicio 1: Deportes.
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.
Ejercicio 2: Animales.
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.
Ejercicios propuestos
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
Ejercicios propuestos
Ejercicio 1: Deportes.
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.
Ejercicio 2: Animales.
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
Ejercicios propuestos
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
Ejercicios propuestos
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.
549
Ejercicios propuestos
550
Ejercicios propuestos
551
Ejercicios propuestos
Ver la solucin
Volver a la teora
552
Ejercicios propuestos
Ver la solucin
Volver a la teora
553
Ejercicios propuestos
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
Ejercicios propuestos
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
Ejercicios propuestos
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
Ejercicios propuestos
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:
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
Ejercicios propuestos
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
Ejercicios propuestos
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
Ejercicios propuestos
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
Ejercicios propuestos
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
Ejercicios propuestos
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
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.
significa...
significa...
563
Pruebas evaluativas
7. El icono a) Abrir.
significa...
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.
...
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.
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.
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
2. El botn
a) Verdadero. b) Falso.
3. El botn
a) Verdadero. b) Falso.
4. Si los archivos se mueven de una carpeta a otra desde fuera de Dreamweaver, las pginas se mostrarn correctamente. a) Verdadero. b) Falso.
5. No importa que las pginas sean voluminosas y ocupen mucha memoria. a) Verdadero. b) Falso.
6. Es conveniente que todas las pginas de un sitio sigan un mismo formato. a) Verdadero. b) Falso.
7. Una imagen de rastreo sirve para... a) Insertar una barra de mens. b) Establecer una imagen como fondo, que no se mostrar en el navegador. c) Buscar imgenes en Internet, al pulsar sobre ella.
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.
3. El botn
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
Unidad 5. Hiperenlaces
Slo una respuesta es vlida por pregunta. Al final de esta pgina encontrars el enlace a las soluciones.
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.
Ver la solucin
Volver a la teora
572
Pruebas evaluativas
Unidad 6. Imgenes
Slo una respuesta es vlida por pregunta. Al final de esta pgina encontrars el enlace a las soluciones.
2. Pueden crearse vnculos y comportamientos sobre partes de una imagen. a) Verdadero. b) Falso.
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
Slo una respuesta es vlida por pregunta. Al final de esta pgina encontrars el enlace a las soluciones.
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...
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
Slo una respuesta es vlida por pregunta. Al final de esta pgina encontrars el enlace a las soluciones.
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
Unidad 9. Formularios
Slo una respuesta es vlida por pregunta. Al final de esta pgina encontrars el enlace a las soluciones.
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.
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
2. El botn
a) Verdadero. b) Falso.
3. La opcin Bucle indica que al finalizar la pelcula, sta volver a comenzar desde el principio. a) Verdadero. b) Falso.
4. 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.
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.
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
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.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 585
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.
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
2. Dentro del recuadro de la capa es posible insertar texto e imgenes. a) Verdadero. b) Falso.
4. El icono
a) Verdadero. b) Falso.
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.
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.
3. Es necesario escribir cdigo JavaScript para programar los comportamientos. a) Verdadero. b) Falso.
4. El botn
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.
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
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.
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.
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¶metro=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.
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.
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.
8. En las tablas de datos es obligatorio mostrar todas las propiedades de un elemento XML. a) Verdadero. b) Falso.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 609
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.
4. Los estados de validacin muestran mensajes de error si la evaluacin del campo introducido es negativa. a) Verdadero. b) Falso.
6. Podemos obligar al usuario a escoger un valor determinado en un desplegable de Spry. 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.
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.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 615
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
Cerrar . El botn de cerrar cambia dependiendo del diseo de vista de la pgina, si es como fichas o como ventanas flotantes.
617
Ejercicio 2: Animales
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 a la teora
618
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
Cerrar todo.
Volver a la teora
621
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.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 622
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
Unidad 5. Hiperenlaces
Ejercicio 1: Deportes
Apartado 1 Para abrir el sitio Deportes hay que seleccionarlo en el panel Archivos. Puedes abrir el panel a travs del men Ventana, opcin Archivos. 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
Ejercicio 2: Animales
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
Ejercicio 1: Deportes
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 .
Ejercicio 2: Animales
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.
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
Ejercicio 1: Deportes
Apartado 1 Para abrir el sitio Deportes hay que seleccionarlo en el panel Archivos. Puedes abrir el panel a travs del men Ventana, opcin Archivos. 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.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 629
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
Ejercicio 2: Animales
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
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 631
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.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 632
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
Unidad 9. Formularios
Ejercicio 1: Deportes
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.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 634
para insertar nuevos elementos en la lista. Aade las etiquetas Madrid y Silla.
Ejercicio 2: Animales
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.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 635
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
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
Ejercicio 2: Animales
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.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 638
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
Ejercicio 2: Animales
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 .
Ejercicio 2: Animales
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
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 .
Ejercicio 2: Animales
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
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 645
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
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 .
Ejercicio 2: Animales
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.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 647
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
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
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
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 651
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"> <!-- TemplateBeginEditable name="region_contenido" --> Colocar aqu el contenido para id "contenido" <!-- TemplateEndEditable --> </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>
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 652
<input </form> <ul> <li><a <li><a <li><a </ul> </div> </div> </body>
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
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
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;
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 656
} 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; }
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;
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 657
Volver a la teora
658
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
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
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
665
Volver a la teora
666
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:
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 667
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
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
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.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 670
21.
19. 20.
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.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 671
11.
9.
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
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
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.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 674
16. 17.
Ayuda a los ejercicios propuestos
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.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 675
Volver a la teora
676
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" />
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 677
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
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!
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 679
Volver a la teora
680
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');
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('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
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.
Ayuda a los ejercicios propuestos
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.
Volver a la teora
684
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
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.
significa...
significa...
686
7. El icono a) Abrir.
significa...
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.
...
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 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.
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.
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
2. El botn
a) Verdadero. b) Falso.
3. El botn
a) Verdadero. b) Falso.
4. Si los archivos se mueven de una carpeta a otra desde fuera de Dreamweaver, las pginas se mostrarn correctamente. a) Verdadero. b) Falso.
5. No importa que las pginas sean voluminosas y ocupen mucha memoria. a) Verdadero. b) Falso.
6. Es conveniente que todas las pginas de un sitio sigan un mismo formato. a) Verdadero. b) Falso.
7. Una imagen de rastreo sirve para... a) Insertar una barra de mens. b) Establecer una imagen como fondo, que no se mostrar en el navegador. c) Buscar imgenes en Internet, al pulsar sobre ella.
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.
3. El botn
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
Unidad 5. Hiperenlaces
Estas son las soluciones a la evaluacin de la unidad. Debes de acertar por lo menos la mitad.
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.
Volver a la teora
695
Unidad 6. Imgenes
Estas son las soluciones a la evaluacin de la unidad. Debes de acertar por lo menos la mitad.
2. Pueden crearse vnculos y comportamientos sobre partes de una imagen. a) Verdadero. b) Falso.
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
Estas son las soluciones a la evaluacin de la unidad. Debes de acertar por lo menos la mitad.
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...
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
Estas son las soluciones a la evaluacin de la unidad. Debes de acertar por lo menos la mitad.
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
Unidad 9. Formularios
Estas son las soluciones a la evaluacin de la unidad. Debes de acertar por lo menos la mitad.
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.
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
2. El botn
a) Verdadero. b) Falso.
3. La opcin Bucle indica que al finalizar la pelcula, sta volver a comenzar desde el principio. a) Verdadero. b) Falso.
4. 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.
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.
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
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.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 708
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.
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
2. Dentro del recuadro de la capa es posible insertar texto e imgenes. a) Verdadero. b) Falso.
4. El icono
a) Verdadero. b) Falso.
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.
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.
3. Es necesario escribir cdigo JavaScript para programar los comportamientos. a) Verdadero. b) Falso.
4. El botn
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.
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
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.
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.
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¶metro=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.
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.
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.
8. En las tablas de datos es obligatorio mostrar todas las propiedades de un elemento XML. a) Verdadero. b) Falso.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 732
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.
4. Los estados de validacin muestran mensajes de error si la evaluacin del campo introducido es negativa. a) Verdadero. b) Falso.
6. Podemos obligar al usuario a escoger un valor determinado en un desplegable de Spry. 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.
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.
aulaClic S.L. Todos los derechos reservados. www.aulaclic.es 738
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