Unidad 1. Conceptos bsicos de Dreamweaver 8 (I) aulaClic. Curso de Dreamweaver 8. ndice Cmo utilizar este curso. 1.

Conceptos bsicos de Dreamweaver 8 2. El entorno de trabajo 3. Configuracin de un sitio local 4. El texto 5. Hiperenlaces 6. Imgenes 7. Tablas Qu es Dreamweaver 8 Dreamweaver 8 es un software fcil de usar que permite crear pginas web profesionales. Las funciones de edicin visual de Dreamweaver 8 permiten agregar rpidamente diseo y funcionalidad a las pginas, sin la necesidad de programar manualmente el cdigo HTML. Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc., de una forma muy sencilla y visual. Adems incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar con mapas visuales de los sitios web, actualizando el sitio web en el servidor sin salir del programa. Para seguir este curso te puedes descargar la versin gratuita de Dreamweaver desde la pgina de Adobe, la versin caduca al cabo de 30 das, pero seguro que te animas a comprar la versin de pago de este estupendo programa. Si no conoces las caractersticas bsicas de HTML puedes verlas aqu. 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 Avanzado 18. Sitios Remotos 19. Servidor de Pruebas 20. Pginas Dinmicas 21. Cmo crear un Blog 22. XML y RSS 23. AJAX y Spry Framework

Novedades de Dreamweaver 8 En este punto comentaremos las caractersticas que aporta esta nueva versin sobre la anterior, Dreamweaver MX 2004. Integracin de RSS: con Dreamweaver 8 podrs integrar entradas RSS provinientes de otras pginas con slo introducir la fuente y arrastrar y colocar los campos. De esta forma podrs introducir datos en forato XML fcil y cmodamente.

Mejoras CSS: esta ltima versin ha mejorado mucho respecto a la compatibilidad y manejo de estilos de cascada. De esta forma se ha mejorado el panel de estilos CSS, donde ahora podrs acceder a la configuracin de cada uno de los estilos desde una lista mucho mejor dotado de una cuadrcula editable desde donde podrs modificar sus propiedades. Adems, Dreamweaver 8, aade una nueva barra de herramientas que proporciona la reproducin inmediata de los estilos para diferentes medios (pantalla, impresora, webTV, PDAs...). Accesibilidad: Dreamweaver 8 incorpora las normas de accesibilidad de prioridad 2 marcadas por la WCAG/W3C. Transferencia de archivos: Ahora con Dreamweaver 8 podrs seguir trabajando con tus archivos mientras el programa se comunica con tu servidor e incluye los archivos creados o modificados recientemente. Su sincronizacin ha mejorado notablemente siendo posible una mejor gestin de cambios, adems de pemitir en uso de bolqueo/desbloqueo de archivos para que estos no se sobreescriban. Interfaz mejorada: Los usuarios con problemas visuales podrn acceder auna opcin de Aumento de la pantaa en vista de diseo para analizar o trabajar con difcles anidamientos de tablas. Adems de la inclusin de informacin visual gracias a las guas que permitirn la medicin pxel a pxel de todos los elementos. Nueva barra de herramientas: Se ha aadido una barra de herramientas a Dreamweaver 8, podrs encontrarla en la parte lateral izquierda del modo de Cdigo, esta barra hace mucho ms accesible el cdigo al permitirnos la navegacin por etiquetas y su contraccin. Una de las nuevas novedades es la posibilidad de aadir comentarios con un slo clic. Compatibilidad: Comentaremos, adems, la compatibilidad aadida en esta versin con PHP5, Coldfusion MX 7 y Video Flash.

Editar pginas web Cualquier editor de texto permite crear pginas web. Para ello slo es necesario crear los documentos con la extensin HTML o HTM, e incluir como contenido del documento el cdigo HTML deseado. Puede utilizarse incluso el Bloc de notas para hacerlo. Pero crear pginas web mediante el cdigo HTML es ms costoso que hacerlo utilizando un editor grfico. Al no utilizar un editor grfico cuesta mucho ms insertar cada uno de los elementos de la pgina, al mismo tiempo que es ms complicado crear una apariencia profesional para la pgina. Hoy en da existe una amplia gama de editores de pginas web. Uno de los ms utilizados, y que destaca por su sencillez y por las numerosas funciones que incluye, es Macromeda Dreamweaver.

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

Cmo tener una pgina en Internet Para poder poner una pgina web en Internet, es necesario contratar a alguna empresa con servidores que pueda alojarla y hacerla accesible desde Internet las 24 horas del da. El precio por disponer de espacio propio en el servidor depender de la empresa, del espacio en disco, volumen de transferencia y otras opciones que podamos contratar. Hay empresas que ofrecen este servicio gratuitamente, pero con ciertas limitaciones: poco espacio de disco, lentitud y nombre de nuestra pgina precedido por el de la suya. Hay que tener tambin en cuenta que estas empresas deben generar ingresos de alguna forma, por lo que se dedican a vender espacios publicitarios dentro de nuestras pginas, publicidad que no podremos negarnos a incluir en ellas. Por estos motivos, no se recomienda utilizar hospedaje gratuito para la pgina de una empresa, aunque s es aceptable para una pgina personal. Cuando se va a contratar un servicio de hospedaje es necesario contratar tambin un dominio, tarea de la que se suele encargar la propia empresa de hospedaje. Registrar un dominio consiste en registrar un nombre para nuestra pgina. Este nombre no puede estar repetido en Internet, ha de ser nico, al igual que ocurre con los nombres de las empresas. Es posible registrar un mismo nombre con distintas terminaciones, como por ejemplo, .net, .org, .es o .com. En el caso de los hospedajes gratuitos no es necesario registrar ningn dominio, ya que nuestra pgina no ser ms que un archivo dentro de la de la empresa contratada. A la hora de contratar un servicio de hospedaje tambin hay que tener en cuenta el nmero de cuentas de correo electrnico propias que pueden habilitarse y si disponemos de una base de datos para poder acceder a ella a travs de programacin va Web, aunque esto ltimo ser til slo para usuarios avanzados. Si piensas contratar un servicio de hospedaje te recomendamos Alojalia.com En cualquier caso, una vez tengas tu espacio en Internet, darle contenido es muy sencillo. Dreamweaver te permite crear una copia local (en tu ordenador) del sitio web que luego querrs que se encuentre a disposicin de todo el mundo en Internet. Por tanto, una vez hayas terminado de disearla en modo local slo tendrs que subirla a tu servidor manteniendo la estructura del local. Es decir, debers subir todos los archivos tal y como

aparecen en tu disco duro, respetando el nombre de los archivos y la organizacin de las carpetas. Si no lo haces de este modo, tu sitio experimentar fallos y enlaces que no funcionarn.

Recuerda que ser mejor que no utilices caracteres especiales como acentos o ees, ni espacios en blanco. De esta forma te asegurars de que el servidor puede reconocer sin ningn tipo de problemas los nombres de los archivos que alojes en l. Para evitar errores de enlaces rotos o imgenes que no se muestran intenta escribir, tambin, los nombres en minscula. Algunos servidores distinguen entrre maysculas y minsculas, por lo que si en tu pgina quieres mostrar la imgen foto1.jpg debers guardarla con ese nombre y no como Foto1.jpg. Evitars horas perdidas buscando fallos. Unidad 2. El entorno de trabajo (I)

Vamos a ver cules son los elementos bsicos de Dreamweaver 8 , la pantalla, las barras, los paneles, etc, para saber diferenciar entre cada uno de ellos. Aprenderemos cmo se llaman, dnde estn y para qu sirven. Tambin veremos cmo obtener ayuda, por si en algn momento no sabemos cmo seguir trabajando. Cuando conozcamos todo esto estaremos en disposicin de empezar a crear pginas web.

La pantalla inicial Al arrancar Dreamweaver aparece una pantalla inicial como sta, vamos a ver sus componentes fundamentales. As conoceremos los nombres de los diferentes elementos y ser ms fcil entender el resto del curso. La pantalla que se muestra a continuacin (y en general todas las de este curso) puede no coincidir exactamente con la que ves en tu ordenador, ya que cada usuario puede decidir qu elementos quiere que se vean en cada momento, como veremos ms adelante.

Las barras La barra de ttulo

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

La barra de mens

La barra de mens contiene las operaciones de Dreamweaver, agrupadas en mens desplegables. Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con los diferentes elementos que se pueden insertar en Dreamweaver. Muchas de las operaciones se pueden hacer a partir de estos mens, pero para algunas es preferible o indispensable hacerlas desde los paneles. La barra de herramientas estndar

La barra de herramientas estndar contiene iconos para ejecutar de forma inmediata algunas de las operaciones ms habituales, como Abrir , Guardar , etc. La barra de herramientas de documento

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

La barra de estado nos indica en cada momento en qu etiqueta HTML nos encontramos (en la imagen al encontrarnos en un documento en blanco estamos directamente sobre la etiqueta <body>). Tambin nos es posible alternar entre los modos de seleccin, mano (para arrastrar la pgina), o zoom. En cualquier momento puedes seleccionar el zoom preferido desde el desplegable zoom y ajustar la vista al porcentaje preferido (por defecto siempre viene al 100%). Los paneles e inspectores Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se conocen como paneles o inspectores. La diferencia entre panel e inspector es que, en general, la apariencia y opciones de un inspector cambian dependiendo del objeto seleccionado. A travs de la opcin Ventana, de la barra de mens, es posible mostrar u ocultar cada uno de los paneles o inspectores. Vamos a ver los ms importantes.

El inspector de Propiedades El inspector de Propiedades muestra y permite modificar las propiedades del elemento seleccionado que son usadas de forma ms frecuente. Por ejemplo, cuando el elemento seleccionado sea texto mostrar el tipo de fuente, la alineacin, si est en negrita o cursiva, etc. Pulsando sobre el botn se despliega para mostrar ms opciones. Este botn se encuentra en la esquina inferior-derecha. Seguramente ser la herramienta de Dreamweaver que ms vayas a utilizar. La barra de herramientas Insertar o panel de objetos

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

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

Para pasar del aspecto Fichas al otro hay que hacer clic sobre el botn , y seleccionar la opcin Mostrar como men. Para volver al aspecto Fichas, desplegamos el men Diseo (o el que est en ese momento) y seleccionamos la opcin Mostrar como fichas.

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

En estos momentos el panel se llama "Insertar", pero queremos renombrarlo como "Insert". Para ello lo primero que hay que hacer es pulsar con el botn derecho sobre la zona del nombre o hacer clic sobre el botn con el siguiente aspecto , ambos situados a los extremos superiores del panel. Entonces se mostrar el siguiente men, en el que habr que elegir la opcin Cambiar nombre de grupo de paneles.... Despus de esto se mostrar una ventana en la que se podr introducir el nuevo nombre del panel

Cambiar la agrupacin de los paneles La mayora de los paneles y los inspectores aparecen agrupados junto a otros en una misma ventana flotante. Para cambiar la agrupacin de un panel o de alguna de sus pestaas es necesario, en primer lugar, seleccionar el panel y la pestaa deseados. Por ejemplo, vamos a ver cmo cambiar la agrupacin de la pestaa Capas del panel Diseo. Como puede apreciarse en la imagen, la pestaa Capas ya est activa. Seguidamente hay que hacer clic sobre el botn con el siguiente aspecto , o pulsar con el botn derecho sobre la zona del nombre del panel o de la pestaa. Para cambiar la agrupacin del panel a otro grupo diferente es necesario dirigirse a Agrupar Capas con, despus de lo cual debe mostrarse una lista de todos los paneles, pudiendo seleccionar uno de ellos. De este modo Capas dejara de estar incluida en el panel Diseo, y aparecera en ese otro panel. Unidad 3. Configuracin de un sitio local (I)

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

Crear o editar un sitio web sin conexin a Internet Una vez creadas las carpetas que formarn un sitio local, ya es posible definir el sitio en Dreamweaver. Para ello hay que dirigirse al men Sitio, a la opcin Administrar sitios.... Recuerda que a travs del panel Archivos, pestaa Archivos, se puede acceder a cada uno de los sitios creados y a la opcin Administrar sitio.

En el caso de haber seleccionado la opcin Administrar sitios, aparece una ventana que contiene la lista de sitios locales definidos con anterioridad. Por supuesto, pueden existir varios sitios locales en un mismo ordenador.

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

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

Objetivo. Practicar las operaciones que hay que realizar para crear un sitio web sin conexin a Internet. En cada tema hay ejercicios paso a paso y ejercicios propuestos, en ambos casos es importante que realices los ejercicios por orden, sin saltarte ninguno. Estos ejercicios estn diseados para ir construyendo una pgina web completa y si intentas realizar un ejercicio sin haber hecho los anteriores puede que no veas un resultado muy coherente o no puedas seguir el ejercicio.

1 Si es la primera vez que realizas este ejercicio, copia en la carpeta Mis documentos de tu disco duro, la carpeta ejerciciosdream, que se encuentra dentro de la carpeta ejercicios del curso. 2 Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 3 Haz clic sobre el men Sitio. 4 Elige la opcin Administrar sitios. Se abrir una nueva ventana. 5. Selecciona el botn Nuevo..., y selecciona la opcin Sitio. Se abrir una nueva ventana. 5 Selecciona la pestaa Avanzadas de la nueva ventana. 6 Selecciona Datos locales en Categora. 7 En Nombre del sitio escribe Cocina. 8 En Carpeta raz local busca la carpeta cocina , que se encuentra dentro de la carpeta ejerciciosdream, y seleccinala. Puedes hacerlo a travs del botn con forma de carpeta. 9 En Carpeta predeterminada de imgenes busca la carpeta imagenes, que se encuentra dentro de la carpeta cocina, y seleccinala. Puedes hacerlo a travs del botn con forma de carpeta. 10 Haz clic sobre el botn Aceptar y sobre el botn Listo. Unidad 4. El texto (I)

A lo largo de este tema vamos a aprender a cambiar las propiedades del texto y a crear estilos CSS, que permiten asignar al texto estilos creados por nosotros mismos, no predefinidos.

Caractersticas del texto

Las caractersticas del texto seleccionado pueden ser definidas a travs del men Texto, y a travs del inspector de propiedades. Vamos a ver las posibilidades que se nos ofrecen a travs del inspector de propiedades, aunque sean menos que las que se nos ofrecen a travs del men Texto.

Formato: Permite seleccionar un formato de prrafo ya definido para HTML, que puede ser encabezado, prrafo o preformateado. Los encabezados se utilizan para establecer ttulos dentro de un documento. El formato preformateado sirve para que el texto aparezca tal cual ha sido escrito, por ejemplo, si entre dos palabras se introducen varios espacios solo se considera uno, pero al establecer el formato preformateado se respetar que hayan varios espacios en lugar de solo uno. Fuente: Permite seleccionar un conjunto de fuentes. Aparecen conjuntos de fuentes en lugar de una sola, ya que es posible que al establecer una nica fuente el usuario no la tenga en su ordenador. El seleccionar un conjunto de fuentes posibilita que en el caso de que el usuario no tenga una fuente se aplique otra del conjunto. Por ejemplo, si seleccionamos Arial, Helvetica, Sans-serif, el texto se ver con la fuente Arial, pero si esta no existe se ver en Helvetica. Tamao: Permite cambiar el tamao del texto. El tamao lo podemos indicar en diversas unidades, en pxeles, centmetros, etc... Color: Permite seleccionar el color de la fuente, ignorando el color que se haya definido en las propiedades de la pgina. Si no se ha establecido ningn color en las propiedades de la pgina ni aqu, el color del texto por defecto ser el negro. Estilo: Estos botones permiten establecer si el texto aparecer en negrita o en cursiva. A travs del men Texto tambin se puede, entre otras cosas, subrayar el texto. Esta opcin no aparece en el panel de Propiedades ya que de normal no suele utilizarse, debido a que los vnculos aparecen subrayados y el subrayar texto normal podra hacer que el usuario pensara que se trata de un vnculo. Alinear: A travs de estos botones es posible establecer la alineacin del texto de una de estas cuatro formas distintas: izquierda, centrada, derecha y justificada. Lista:

Estos botones permiten crear listas con vietas o listas numeradas. Sangria: Estos dos botones permiten sangrar el texto y anular la sangra. La sangra es una especie de mrgen que se establece a ambos lados del texto. En este caso caso los botones se refieren a sangra a la izquierda del texto.

Para practicar puedes realizar el Ejercicio paso a paso Insertar texto y modificar sus propiedades. Listas Es posible insertar texto a modo de lista. A su vez, la lista puede ser numerada o con vietas. Para que un texto que ya ha sido introducido en el documento se convierta en una lista, simplemente hay que seleccionarlo y pulsar sobre la opcin de lista correspondiente, ya sea a travs del inspector de propiedades, o a travs del men Texto. La lista con vietas (desordenada) se selecciona a travs del botn , mientras que la lista numerada (ordenada) se selecciona a travs del botn . Ejemplo de lista numerada (ordenada): Preparar la mochila Sacar los libros de ese da Introducir los libros del da siguiente Ponerme el pijama Lavarme los dientes Poner el despertador Ejemplo de lista con vietas (desordenada): Perro Gato Aves Canario Loro Hamster Para establecer listas anidadas dentro de otras como en los ejemplos anteriores, es necesario aadir una sangra en los elementos de la lista que se desee que pasen a formar parte de la lista anidada. A travs del men Texto, opcin Lista, es posible acceder a las propiedades de la lista seleccionada. Se debe seleccionar el texto de la lista previamente o tener el cursor en algn lugar de la lista para que se active este submen.

En la ventana Propiedades de lista se puede especificar el tipo de lista (con nmeros o con vietas), el tipo de nmeros o vietas que se utilizarn (en la propiedad Estilo:), y en el caso de las listas ordenadas, el nmero por el que comenzar el recuento.

Para practicar puedes realizar el Ejercicio paso a paso Convertir texto en una lista. Unidad 5. Hiperenlaces (I)

Vamos a ver qu son los hiperenlaces, para qu sirven y cmo crearlos, ya que son un elemento esencial para cualquier pgina web.

Introduccin Un hiperenlace, hipervnculo, o vnculo, no es ms que un enlace, que al ser pulsado lleva de una pgina o archivo a otra pgina o archivo. Es posible asignar un vnculo a un texto, a una imagen, o a parte de una imagen.

Tipos de enlaces Existen diferentes clases de rutas de acceso a la hora de definir los vnculos. Referencia absoluta: Conduce al sitio en el que se encuentra el documento utilizando la ruta completa del archivo. La ubicacin es en Internet, por ejemplo, http://www.aulaclic.com, o http://www.misitio.com/pagina/pagina1.html. Referencia relativa al documento: Conduce a un documento situado dentro del mismo sitio que el documento actual, pero partiendo del directorio en el que se encuentra el documento actual. Si queremos referinos a carpetas que estn por encima del nivel donde nos encontramos deberemos utilizar ../ Por ejemplo, imagina que estamos en la siguiente direccin http://www.misitio.com/pagina/informacion/index.html. En esta pgina queremos mostrar una

imagen que se encuentra en la carpeta http://www.misitio.com/pagina/secciones/seccion1.html, cmo podemos hacerlo? Fcil. Deberemos llamarla haciendo referencia al nivel superior (http://www.misito.com/pagina/) para poder ir luego a la carpeta secciones. El resultado de la ruta sera el siguiente: ../secciones/seccion1.html. De esta forma, mientras nos encontramos en la carpeta informacion, subimos un nivel y luego nos movemos dentro de la carpeta secciones para mostrar el archivo seccion1.html. Referencia relativa al sitio: Conduce a un documento situado dentro del mismo sitio que el documento actual. En este mtodo los enlaces se crean indicando la ruta a partir de la raz del sitio. En el ejemplo anterior si tuviesemos definido como sitio la carpeta http://www.misitio.com/, un enlace en cualquier pgina del sitio a http://www.misitio.com/pagina/secciones/seccion1.html se creara como /pagina/secciones/seccion1.html. Como puedes ver ahora el vnculo a un archivo en todas las pginas es igual porque se define dependiendo del sitio raz y no de la ubicacin donde se encuentra. Puntos de fijacin: Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello el vnvulo debe ser nombre_de_documento.extension#nombre_de_punto. El punto se define dentro de un documento a travs del men Insertar, opcin Anclaje con nombre. Podramos referenciar de este modo a un anclaje llamado parte2 de la siguiente forma: ../secciones/seccion1.html#parte2

Estos tipos de enlace que hemos visto son vlidos tanto para referenciar pginas (para crear hiperenlaces) o incluso imgenes u otro tipo de objetos (como veremos en temas posteriores). Debers tener siempre en cuenta que los nombres de las rutas se correspondan perfectamente a los nombres de los archivos y carpetas en el servidor (local o remoto). Por ello, es muy recomendable que utilices siempre minsculas para evitar fallos en los enlaces. Tambin debers evitar utilizar caracteres especiales como acentos o espacios, as no tendrs problemas a la hora de referenciar tus objetos.

Crear enlaces La forma ms sencilla de crear un enlace es a travs del inspector de propiedades. Para ello es necesario seleccionar el texto o el objeto que va a servir de enlace, y seguidamente establecer el Vnculo en el inspector. Por ejemplo, aqu hay un enlace a www.elpais.es, que es de referencia absoluta, por eso contiene HTTP://

Es posible crear tambin vnculos vacos, que pueden ser tiles cuando se utilizan comportamientos, etc. Para ello es necesario escribir en Vnculo nicamente una almohadilla #.

Otra forma de crear un enlace es a travs del men Insertar, opcin Hipervnculo.

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

Destino del enlace El destino del enlace determina en qu ventana va a ser abierta la pgina vinculada, puede variar dependiendo de los marcos de que disponga el documento actual. Puede especificarse en el inspector de propiedades a travs de Dest, o en la ventana que aparece a travs del men Insertar, opcin Hipervnculo. _blank: Abre el documento vinculado en una ventana nueva del navegador. _parent: Abre el documento vinculado en la ventana del marco que contiene el vnculo o en el conjunto de marcos padre. _self: Es la opcin predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vnculo. _top: Abre el documento vinculado en la ventana completa del navegador. No te preocupes si no te queda del todo claro para qu sirve cada una de estas opciones de destino, ya que se volvern a ver en el tema de Marcos.

Para practicar puedes realizar el Ejercicio paso a paso Crear un hiperenlace. Ejercicio paso a paso. Unidad 5. Crear un hiperenlace

Objetivo. Practicar cmo crear un hiperenlace.

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 para desplegar sus propiedades ms avanzadas. 7 Selecciona la imagen del logotipo de aulaclic. Para ello hay que hacer clic sobre ella. 8 En Vnculo, del inspector de propiedades, escribe http://www.aulaclic.com. 9 En Dest selecciona la opcin _blank. 10 Pulsa fuera del texto para que deje de estar seleccionado y se le apliquen todos los cambios. 11 Pulsa F12 para ver el resultado en tu navegador, observa que si posicionas el 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. 12 Cierra la ventana del navegador. 13 Haz clic sobre el botn Guardar de la barra de herramientas. Unidad 6. Imgenes (I)

En este tema vamos a ver cmo insertar imgenes en un documento. Tambin veremos cmo crear algunas imgenes especiales, como es el caso de los Rollovers y los botones flash, que ayudan a mejorar la apariencia de nuestras pginas.

Introduccin Todas las pginas web acostumbran a tener un cierto nmero de imgenes, que permiten mejorar su apariencia, o dotarla de una mayor informacin visual. Existen una serie de formatos de imagen ms recomendables que otros para ser introducidos en una pgina web. Esta informacin puedes consultarla aqu .

Insertar una imagen Para insertar una imagen hay que dirigirse al men Insertar, a la opcin Imagen. Despus de esto, ya es posible seleccionar una imagen a travs de la nueva ventana.

Si por algn motivo se desea insertar un BMP, este no aparecer a no ser que en Tipo se seleccione Todos los archivos. En Relativa a es posible especificar si la imagen ser relativa al documento o a la carpeta raz del sitio. Es preferible que sea relativa al Documento, ya que si se mueve todo el sitio a una ubicacin diferente, la imagen puede no verse al estar siendo buscada en la ubicacin anterior. Lo mismo ocurre cuando se selecciona un documento para crear un vnculo. La ruta en la que se encuentra la imagen aparecer representada de una u otra forma en el campo URL de la ventana y en el campo Origen del inspector de propiedades, dependiendo de si ha sido insertada como relativa a la carpeta raz del sitio o relativa al documento. Por ejemplo, imagina que dentro de la carpeta raz del sitio (la carpeta del sitio) se encuentran la carpeta imagenes y el documento en el que deseamos insertar la imagen. Dicha imagen, llamada aulaclic.jpg, se encuentra dentro de la carpeta imagenes. En el caso de insertar la imagen como relativa al Documento la ruta sera: imagenes/aulaclic.jpg Mientras que en el caso de ser insertada como relativa a la Raz del sitio la ruta sera: /imagenes/aulaclic.jpg

Ocurre lo mismo que cuando se crea un hipervnculo a un documento relativo al documento o a la carpeta raz del sitio. Si se inserta un BMP en un documento, este no aparece correctamente en Dreamweaver, aunque s en el navegador. En Dreamweaver aparecer de la siguiente forma: Esa misma imagen es la que aparece en Dreamweaver cuando no se encuentra una imagen que haba sido insertada. Esto puede ocurrir si se ha modificado el nombre de la imagen, o si se ha movido de directorio, desde fuera de Dreamweaver. En ese caso, la imagen que aparecer en el navegador ser similar a esta:

Aparece un recuadro blanco con una X roja, junto con el nombre de la imagen o el contenido del campo Alt del inspector de propiedades, que explicaremos a continuacin. Para practicar puedes realizar el Ejercicio paso a paso Insertar una imagen.

Propiedades de una imagen Cuando seleccionamos una imagen el Inspector de propiedades muestra esta apariencia:

Desde aqu podrs acceder a distintas propiedades: Desde el campo Alt podrs asignarle una ayuda contextual a la imagen, esta se mostrar cuando coloques el ratn sobre ella, y es muy til de cara a hacer pginas accesibles ya que el texto que se escribe ser ledo por los programas lectores para invidentes. Tambin es muy til, como ya hemos visto, si la imagen por alguna razn no puede mostrarse. En Clase podrs asignarle un estilo que hayas creado anteriormente, as podrs darle alineacin, bordes e incluso tamao con slo un clic. Si le damos un valor al campo Vnculo convertiremos al imagen en un link a otra pgina. Para enlaces externos recuerda que debe empezar siempre por HTTP:// y si deseas crear un vnculo a un enlace electrnico deber empezar por mailto: En caso de que le hayas asignado un vnculo podrs decidir en qu ventana quieres que se abra selecionando un valor en el campo Destino. Puedes asignarle un tamao de borde desde el campo Borde. Y puedes seleccionar su alineacin con respecto al texto desde el campo Alinear. Por ltimo las opciones Espacio V y Espacio H te sern muy tiles para separar la imagen del texto y as no queden demasiado pegadas a l. Estos campos indican el espacio vertical y horizontal respectivamente entre la imagen y el texto.

Cambiar el tamao de una imagen

Dentro de Dreamweaver puede modificarse el tamao de las imgenes. Dicho cambio de tamao no se aplica directamente sobre el archivo de imagen, sino que lo que vara es la visualizacin de la imagen dentro de la pgina. Es muy probable que la imagen resultante no sea de buena calidad, en comparacin de cmo podra quedar modificndola desde un editor externo, como Fireworks. Por ejemplo, vamos a ver lo que ocurre si insertamos una imagen que representa el icono de Dreamweaver y modificamos su tamao de varias formas diferentes: Imagen original Imagen con tamao modificado

Puede apreciarse claramente que los resultados no son muy satisfactorios, pero en ocasiones puede resultar til modificar el tamao de algunas imgenes aunque esto implique perder calidad. Existen dos formas de modificar el tamao. Una de ellas es, una vez seleccionada la imagen, arrastrar con el puntero alguno de los recuadros negros que aparecen alrededor de la imagen. La otra es a travs de inspector de propiedades, cambiando los campos An (anchura) o Al (altura). Estos campos aparecern en el inspector cuando est seleccionada alguna imagen. Si estos campos no contienen el tamao original de la imagen, el valor aparecer resaltado en negrita y aparecer a la derecha una flecha circular que permite volver al tamao original haciendo clic sobre ella.

Pueden crearse vnculos y comportamientos sobre partes de una imagen, sin la necesidad de que sea sobre toda ella. A esto se le conoce como mapa de imagen. Esta informacin puedes consultarla aqu . Unidad 7. Tablas (I)

En este tema vamos a ver cmo trabajar con tablas. Podremos, entre otras cosas, insertar tablas, combinar celdas, insertar filas o columnas y cambiar el tamao del borde.

Introduccin Todos los objetos se alinean por defecto a la izquierda de las pginas web, pero gracias a las tablas es posible distribuir el texto en columnas, colocar imgenes al lado de un bloque de texto, y otra serie de cosas que sin las tablas seran imposibles de realizar. Hoy en da, la mayora de las pginas web se basan en tablas, ya que resultan de gran utilidad al mejorar notablemente las opciones de diseo. Las tablas estn formadas por un conjunto de celdas, distribuidas en filas y columnas. A continuacin tienes un ejemplo de tabla.

Insertar una tabla Para insertar una tabla hay que dirigirse al men Insertar, a la opcin Tabla. En la nueva ventana habr que especificar el nmero de Filas y Columnas que tendr la tabla, as como el Ancho de la tabla . El Ancho puede ser definido como Pxeles o como Porcentaje. La diferencia de uno y otro es que el ancho en Pxeles es siempre el mismo, independientemente del tamao de la ventana del navegador en la que se visualice la pgina, en cambio, el ancho en Porcentaje indica el porcentaje que va a ocupar la tabla dentro de la pgina y se ajustar al tamao de la ventana del navegador, esto permite que los usuarios que tengan pantallas grandes, aprovechen todo el ancho de pantalla. Grosor del Borde indica el grosor del borde de la tabla en pxeles, por defecto se le asigna uno (1). Relleno de celda indica la distancia entre el contenido de las celdas y los bordes de stas. Espacio entre celdas indica la distancia entre las celdas de la tabla. Tambin se puede establecer si se quiere un encabezado para la tabla es recomendable utilizar encabezados en el caso de que los usuarios utilicen lectores de pantalla. Los lectores de pantalla leen los encabezados de tabla y ayudan a los usuarios de los mismos a mantener un seguimiento de la informacin de la tabla. Si queremos incluir un ttulo, lo indicamos en Texto, el ttulo aparecer fuera de la tabla. En alinear texto indicamos dnde queremos alinear el ttulo con respecto a la tabla. En Resumen: indicamos una descripcin de la tabla, los lectores de pantalla leen el texto del resumen pero dicho texto no aparece en el navegador del usuario.

Rellenar las celdas Las celdas son cada uno de los recuadros que forman una tabla, resultan de la interseccin entre una fila y una columna.

imagen y texto COLUMNA

Texto dentro de una celda

CELDA

FILA

Para poder insertar algn elemento en una celda, ya sea texto o imgenes, simplemente hay que situar el cursor previamente dentro de la celda deseada. Para practicar puedes realizar el Ejercicio paso a paso Crear y rellenar una tabla. Unidad 8. Marcos (I)

Vamos a ver qu son los marcos y para qu se utilizan. Tambin veremos cmo insertar un marco sencillo en una pgina, y cmo trabajar con l.

Introduccin Los marcos o frames sirven para distribuir mejor los datos de las pginas, ya que permiten mantener fijas algunas partes, como pueden ser el logotipo y la barra de navegacin, mientras que otras s pueden cambiar. Adems de mejorar la funcionalidad, pueden mejorar tambin la apariencia. Cada uno de los marcos de una pgina, contiene un documento HTML individual. Por ejemplo, en la imagen de la derecha puedes ver una pgina con dos marcos. El marco izquierdo contiene el documento menu.htm y el derecho el documento quienes.htm. Para poder visualizar la pgina de este modo, hemos tenido que abrir en el navegador el documento marcos.htm, que es la pgina que contiene los marcos agrupados. Es posible editar los documentos contenidos en los marcos desde la pgina que contiene el grupo de marcos. Esto facilita el trabajo, ya que es ms fcil hacerse una idea de cmo quedar la pgina al final, cosa que no es posible si se editan individualmente cada uno de los documentos que contiene el marco. El trabajar con marcos puede resultar una tarea algo complicada, sobretodo al principio, por lo que no vamos a profundizar mucho en el tema, y veremos solamente algunos conceptos bsicos y ejemplos sencillos.

Crear marcos Existen varias formas de crear un marco. Nosotros vamos a ver solamente una de ellas. Para crear un marco, primero hay que abrir algn documento. Puede ser uno nuevo o uno ya existente. Despus, dirigirse al men Insertar, HTML, Marcos. A travs de esta opcin puede elegirse el tipo de marco que va a crearse. Vamos a ver el marco a la Izquierda. Si pulsamos sobre Izquierda se crear un nuevo marco a la izquierda del documento actual.

Como puedes ver en la imagen, aparece una lnea que divide el documento en dos. El documento de partida era uno nuevo. En este caso tendremos tres documentos: el de la izquierda, el de la derecha, y el que contiene el grupo de marcos. El de la derecha es el documento que tenamos inicialmente, que est en el marco conocido como marco padre (MainFrame).

Para seleccionar el documento que contiene el grupo de marcos hay que pulsar sobre la lnea que separa los marcos. Esto solo es posible mientras dicho documento no se haya guardado.

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. Unidad 9. Formularios (I)

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

Introduccin Los formularios se utilizan para recoger datos de los usuarios, nos pueden servir para realizar un pedido en una tienda virtual, crear una encuesta, conocer las opiniones de los usuarios, recibir preguntas, etc. Una vez el usuario rellena los datos y pulsa el botn para enviar el formulario se arrancar un programa que recibir los datos y har el tratamiento correspondiente. Aqu vamos a ver cmo crear el formulario, (insertar campos y botones en el formulario y validarlos), pero no la parte de tratamiento de los datos, ya que para ello se necesitan nociones de programacin, ya sea en VBScript, en JavaScript o en otro lenguaje de programacin, y esto no entra en los objetivos del curso. A la derecha tienes un ejemplo de formulario.

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

Casilla de verificacin

Es un cuadrito que se puede activar o desactivar. 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, slo puede haber uno activado. Cuando se activa uno, automticamente se desactivan los dems. Superman Spiderman Lista/Men Una lista o men es un elemento de formulario que lleva asociada una lista de opciones. 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. Unidad 10. Multimedia (I)

Vamos a ver cmo insertar elementos multimedia. En concreto, veremos cmo insertar una animacin Flash, un sonido y un vdeo.

Pelculas Flash

Las pelculas Flash son animaciones, que al igual que los botones y el texto Flash, tienen la extensin SWF. Es frecuente verlas en las pginas iniciales de los sitios web, a modo de presentacin hacia los usuarios, aunque se pueden utilizar para realizar cualquier tipo de animacin. Estas pelculas pueden crearse mediante el programa Flash de Macromeda, y necesitan que el usuario tenga instalado el plug-in para poder ser visualizadas. Las pelculas Flash pueden insertarse en una pgina a travs del men Insertar, Media, opcin Flash, o pulsando Ctrl+Alt+F. Tambin pueden insertarse pulsando sobre la opcin Flash que aparece en la pestaa Comn del panel Insertar, botn Media.

El inspector de propiedades de las pelculas Flash es prcticamente igual que el de los botones y el texto Flash, pero existen dos opciones nuevas que hacen referencia a la visualizacin de la pelcula.

La opcin Bucle indica que al finalizar la pelcula, sta volver a comenzar desde el principio. La otra es la opcin Rep. autom. (reproduccin automtica), que al estar marcada indica que nada ms cargarse la pgina comenzar a reproducirse la pelcula Flash. Si esta opcin no estuviera marcada, se mostrara nicamente el primer fotograma de la pelcula. Interesa desmarcar esta opcin cuando se desea que la reproduccin sea activada por algn comportamiento.

Sonido No es muy habitual incluir sonido en una pgina web, ya que algunos usuarios suelen estar escuchando su propia msica cuando navegan en Internet, por lo que el escuchar tambin sonido en cada pgina que se visita puede resultar algo molesto. A pesar de ello, el incluir un sonido agradable, apropiado al contenido de la pgina, puede hacerla ms atractiva. Muchas de las pginas que contienen sonido suelen ofrecer la posibilidad de activarlo o desactivarlo, para que aquellos usuarios que no deseen escuchar el sonido de la pgina puedan desactivarlo.

Los formatos de sonido ms habituales en Internet son, fundamentalmente, el MP3, el WAV y en algunas ocasiones el MIDI, aunque existen otros formatos diferentes que tambin pueden utilizarse. Lo ideal es incluir algn archivo de audio que no ocupe mucho espacio, y que no por ello sea de mala calidad. Para insertar un archivo de audio en un documento tienes que dirigirte al men Insertar, Meda, opcin Plug-in. A la derecha tienes un ejemplo de un archivo de sonido, para el que se muestran los controles de audio. Si lo deseas, puedes reproducirlo pulsando sobre los controles (recuerda encender los altavoces, si los tienes).

En Dreamweaver no se mostrarn los controles de audio. Todos los archivos que son insertados como plug-in aparecen representadas dentro de Dreamweaver por una imagen como la de la izquierda. En el inspector de propiedades pueden establecerse la altura y la anchura con la que se mostrarn los controles de audio, mediante Al y An. En el caso de no especificar ningn tamao, se mostrar el tamao por defecto de los controles, como ocurre en el ejemplo de arriba. Si lo que se desea es que se escuche el sonido en la pgina, pero que no se muestren los controles de audio, los campos Al y An deben valer cero. Los sonidos se reproducen automticamente al cargarse la pgina, y se reproducen solamente una vez. Estos valores no pueden definirse a travs del inspector de propiedades, pero s a travs del cdigo. Una vez definidos los podremos cambiar desde el inspector de propiedades con el botn Parmetros... Por ejemplo, el archivo anterior apareca en el cdigo como <embed src="varios/audio.mid"></embed>. Pero para que no se reproduzca automticamente se ha aadido autostart="false", y para que se reproduzca continuamente se ha aadido loop="true". La lnea de cdigo del archivo de audio ha quedado del siguiente modo: <embed src="varios/audio.mid" autostart="false" loop="true"></embed> En el Inspector de propiedades del sonido, el botn Parmetros... abre un cuadro de dilogo donde podemos cambiar esos valores una vez introducidos. Para poder hacer que el audio pueda activarse y desactivarse cuando no se muestran los controles, es necesario insertar una serie de comportamientos que se encarguen de esa tarea. Si quieres poner msica de fondo en una pgina web, sin que aparezcan los controles de audio, puedes escribir este cdigo directamente en la vista Cdigo.

<bgsound src="cancion1.wav" loop="-1"> Insrtalo despus de la etiqueta </title> Con el parmetro loop puedes decidir cuntas veces quieres que se reproduzca, 1, 2, 3 ... (con -1 se reproduce de modo continuo). Unidad 11. Las plantillas (I)

En este tema vamos a ver qu son las plantillas, cmo crearlas y cmo basar documentos en ellas.

Introduccin Cada vez que deseamos crear un sitio web, tenemos que tener muy en cuenta que las pginas deben seguir un formato uniforme. La mayora de nosotros solemos hacer copias de los documentos ya creados, y trabajar sobre estas copias, modificando simplemente su contenido. Esta es la forma ms sencilla de tener pginas con una estructura basada en la estructura de otras ya creadas previamente. Las plantillas son una especie de copia de la pgina en la que van a estar basadas el resto de pginas del sitio web, pero que incluyen la posibilidad de establecer unas zonas editables y otras zonas que sern fijas, que no podrn ser modificadas. No es posible modificar las propiedades de una pgina que est basada en una plantilla, a excepcin del ttulo. Cuando se desea que existan pginas con, por ejemplo, diferente color de fondo, es necesario crear plantillas diferentes con los distintos colores, y basar las pginas en una u otra plantilla, segn el color de fondo que se desee para cada una. Cuando se modifica el diseo de una plantilla, se pueden actualizar todas las pginas basadas en ella. Las plantillas son archivos con la extensin DWT que se guardan en el sitio web, dentro de una carpeta llamada Templates. Crear plantillas Las plantillas pueden crearse desde cero, o a partir de una pgina ya existente. Una forma de crear una plantilla desde cero es a travs del panel Archivos, pestaa Activos. La pestaa Activos se puede abrir a travs del men Ventana, opcin Activos. Tambin pulsando F11.

Una vez abierto el panel hay que seleccionar el botn , para poder trabajar con las plantillas. Los botones inferiores del panel Activos son similares a los del panel Estilos CSS. El nico botn diferente es el primero, que en este caso sirve para actualizar la lista, el resto permiten crear una nueva plantilla, editar una plantilla seleccionada en la lista, o eliminarla. Para crear una nueva plantilla hay que pulsar sobre el botn (Si este botn no est activado, pulsa con el botn derecho del ratn y elige Nueva Plantilla). Cuando se pulsa ese botn aparece un nuevo documento en la lista de plantillas, al que es posible cambiarle el Nombre pulsando previamente sobre l. Para modificar una plantilla la seleccionamos de la lista y pulsamos el botn . Paraeliminar una plantilla la seleccionamos de la lista y pulsamos el botn . Las plantillas se guardan en el sitio web actual, dentro de la carpeta Templates, que se crea automticamente. Para crear una plantilla a partir de un archivo existente es necesario abrir dicho archivo, y despus guardarlo como plantilla a travs del men Archivo, opcin Guardar como plantilla. Cuando se pulsa dicha opcin, aparece una ventana como la de la derecha. En ella es necesario especificar el nombre con el que va a ser guardada la plantilla, a travs del campo Guardar como, y elegir, de entre la lista de sitios, el Sitio: en el que se va a guardar. Unidad 12. HTML desde Dreamweaver (I)

En este tema vamos a ver algunas de las facilidades que proporciona Dreamweaver para trabajar sobre el propio cdigo HTML, y no nicamente sobre el editor grfico de la vista diseo. En este tema no se pretende ensearos el lenguaje HTML sino cmo poder realizar algunos reajustes directamente en el cdigo estando dentro de Dreamweaver.

Etiquetas Ya sabes que el lenguaje HTML est basado en etiquetas que marcan el inicio y fin de cada elemento de la pgina Web.

En el primer tema vimos como ejemplo las etiquetas que hay que incluir en el cdigo HTML de una pgina para darle un ttulo. Consista simplemente en escribir el ttulo deseado entre las etiquetas <TITLE> y </TITLE>. Las etiquetas consisten en poner un mismo comando entre los smbolos < y >. La primera etiqueta indica inicio, y la segunda, que incluye el smbolo /, indica final y se suele denominar etiqueta de cierre. Las etiquetas disponen de atributos que permiten definir caractersticas del elemento sobre el que actan, incluyendo cierto cdigo dentro de la etiqueta. Por ejemplo, un prrafo se inserta entre las etiquetas <P> y </P>, pero es posible cambiar sus caractersticas predeterminadas, como puede ser alinearlo a la derecha. Para ello, en lugar de introducir el texto del prrafo entre las etiquetas anteriores, ha de insertarse entre las etiquetas <P align="right"> y </P>.

Tambin hay elementos que no precisan insertar etiqueta de cierre. Por ejemplo, un May+INTRO dentro del cdigo HTML equivale a la etiqueta <BR>. Tambin podrs ver la etiqueta <br /> en las pginas que sigan el estndar XHTML. ste obliga a que todas las etiquetas se cierren, incluso aquellas que no tienen etiqueta final, por lo que <BR> pasa a ser <br /> o <HR> a <hr />.

Dreamweaver inserta automticamente las etiquetas necesarias para construir la pgina con la apariencia y contenido definidos en el editor grfico, pero tambin ofrece otras posibilidades para trabajar directamente sobre el cdigo.

Entidades HTML HTML tambin dispone de cdigos especiales para representar carceteres especiales como pueden ser letras con acentos o no pertenecientes al alfabeto latino internacional, signos de puntuacin o tipogrficos y smbolos especiales que presenten un problema en HTML como < >, que podran malinterpretarse por el inicio de una etiqueta.

Estos cdigos pueden mostrarse como un cdigo numrico o con un nombre de entidad. Ambos mtodos son igualmente aceptables, pero ambos debern ir encerrados entre los smbolos & y ;. De este modo, < se escribir como &lt; o &#60;

Usar este mtodo es muy aconsejable, de esta forma los navegadores que estn configurados para visualizar juegos de caracteres que no contengan letras como la o la podrn ver el sitio correctamente. En caso contrario estos caracteres se mostraran de forma extraa.

En el tema 4 vimos que podamos escribir estos caracteres utilizando el men Insertar. Ahora te mostraremos otra forma para escribir caracteres que no se incluan en el listado de Dreamweaver y que podrs insertar escribiendo sus entidades en la vista de Cdigo. Aqu tienes una tabla de los caracteres ms utilizados con sus Entidades HTML numrica y de nombre de entidad: Carcter Entidad con nombre Entidad numrica nombre Entidad numrica &aacute; &#225; &Aacute; &eacute; &#233; &Eacute; &iacute; &#237; &Iacute; &oacute; &#243; &Oacute; &uacute; &#250; &Uacute; &uuml; &#252; &Uuml; &ntide; &#241; &Ntilde; < > & &iquest; &#191; &iexc; &#161; &ndash; &#8211; &rarr; &#8594; &larr; &#8592; &lt; &#60; &gt; &#62; &amp; &#38; &alpha; &beta; &#946; &copy; &reg; &#174; &euro; &#8364; &nbsp;&#160; Carcter &#193; &#201; &#205; &#211; &#218; &#220; &#209; &#945; &#169; Entidad con

espacio

Si escribes ms de un espacio en Dreamweaver, cuando lo visualices en un Navegador slo veras uno. Esto es debido a que en HTML las palabras separadas por ms de un espacio se visualizan sapradas de uno. Para saltarte esta norma puedes escribir tantas veces como quieras &nbsp; y se visualizarn tantos espacios como elementos de entidad hayas introducido.

Si quieres ver una tabla con el listado de todos los caracteres especiales visita el avanzado de Listado de Entidades HTML .

Listado de Entidades HTML (I)

Caracteres Alfabticos Propios y Alfabeto Griego Smbolos Otros Smbolos Caracteres Tipogrficos Carcter Entidad con nombre Entidad numrica &bull; &#8226; &hellip; &#8230; &prime; &#8242; &Prime; &#8243; &oline; &#8254; &frasl; &#8260; &euro; &#8364; &weierp; &#8472; &image; &#8465; &real; &#8476; &trade; &#8482; &alefsym; &#8501; &larr; &#8592; &uarr; &#8593; &rarr; &#8594; &darr; &#8595; &harr; &#8596; &crarr;&#8629; &lArr; &#8656; &uArr;&#8657; &rArr; &#8658; &dArr;&#8659; &hArr;&#8660; &forall; &#8704; &part; &#8706; &exist;&#8707; &empty; &#8709; &nabla; &#8711; &isin; &#8712; &notin; &#8713; &ni; &#8715; Carcter Entidad con nombre Entidad numrica &prod;&#8719; &sum; &#8721; &minus; &#8722; &lowast; &#8727;

&radic; &#8730; &prop;&#8733; &infin;&#8734; &ang; &#8736; &and; &#8743; &or; &#8744; &cap; &#8745; &cup; &#8746; &int; &#8747; &there4; &#8756; &sim; &#8764; &cong; &#8773; &asymp; &#8776; &ne; &#8800; &equiv; &#8801; &le; &#8804; &ge; &#8805; &sub; &#8834; &sup; &#8835; &nsub;&#8836; &sube;&#8838; &supe;&#8839; &oplus; &#8853; &otimes; &#8855; &perp; &#8869; &sdot; &#8901; &lceil; &#8968; &rceil; &#8969; &lfloor; &#8970; &rfloor; &#8971; &lang; &#9001; &rang; &#9002; &loz; &#9674; &spades; &#9824; &clubs; &#9827; &hearts; &#9829; &diams; &#9830;

Unidad 13. Otros elementos (I)

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

Marquesinas Las marquesinas son texto, imgenes, o una mezcla entre texto e imgenes, que pueden desplazarse de un lado a otro de la ventana en forma de lnea. A continuacin tienes un ejemplo de marquesina.

Bienvenid@s a PerrosGatos

Las marquesinas no se pueden insertar a travs del editor grfico de Dreamweaver, es necesario hacerlo a travs del cdigo. Para crear una marquesina hay que insertar las etiquetas <MARQUEE> y </MARQUEE>. Entre dichas etiquetas han de introducirse los elementos que se desea que aparezcan en la marquesina. Tambin es posible especificar algunas caractersticas de la marquesina. La marquesina, por defecto, se desplaza de derecha a izquierda indefinidamente, pero si lo deseas puedes hacer que estas propiedades varen. Por ejemplo, si pones <marquee behavior="slide">, la marquesina har el desplazamiento una sola vez y se detendr. Si pones <marquee behavior="alternate">, en lugar de desplazarse continuamente de derecha a izquierda, la marquesina se desplazar de lado a lado de la ventana, como si rebotara en los extremos, tal y como ocurre en el ejemplo anterior, cuyo cdigo puedes ver a continuacin: <marquee behavior="alternate"> Bienvenid@s a PerrosGatos <img src="imagenes/logo_animales.gif"> </marquee> Unidad 14. Capas

Vamos a ver algunas de las caractersticas bsicas sobre las capas, para luego poder trabajar con ellas y aplicarles algn comportamiento. Introduccin

Las capas no son ms que unos recuadros, que pueden situarse en cualquier parte de la pgina, en los que podemos insertar contenido HTML. Dichas capas pueden ocultarse y solaparse entre s, lo que proporciona grandes posibilidades de diseo. Las capas pueden moverse de una posicin a otra de la ventana pulsando sobre el recuadro blanco, y sin soltar el ratn, arrastrndola hacia la nueva posicin. Tambin pueden ser redimensionadas pulsando sobre los recuadros negros, y arrastrndolos hasta conseguir el tamao deseado. Dentro del recuadro de la capa es posible insertar texto, tablas, imgenes, animaciones flash, y todos los elementos que puede contener un documento HTML. Este icono sirve para seleccionar la capa al pulsar sobre l, y al eliminarlo se elimina tambin la capa.

Insertar una capa Las capas pueden insertarse en una pgina a travs del men Insertar, opcin Objeto de diseo, Capa. Una vez se ha insertado la capa, pueden editarse sus atributos, pero para ello hay que seleccionarla primero. Una capa puede seleccionarse de varias maneras. Una de ellas es pulsando sobre el icono correspondiente, pero esto no resulta til cuando existen muchas capas en un mismo documento, ya que todas las capas tienen asociada una imagen igual a esta, y no es fcil seleccionar la deseada a la primera. Cuando existen varias capas en un mismo documento, es preferible seleccionarlas a travs de la pestaa Capas del panel Diseo, que puede abrirse a travs del men Ventana opcin Capas. Si la opcin Capas no te aparece directamente en este men, posiblemente est dentro de la opcin Otros. Tambin puedes abrir el panel pulsando F2. En dicho panel aparecen los nombres de todas las capas que existen en el documento actual, y para seleccionar una de ellas simplemente hay que pulsar sobre el nombre en el panel. Formato de una capa Las propiedades de la capa se especifican a travs de su inspector de propiedades.

ID de capa es el nombre de la capa. Tambin puede ser cambiado a travs del panel Capas, haciendo doble clic sobre l. Iz y Sup indican la distancia en pxeles que hay entre los lmites izquierdo y superior del documento y la capa. An y Al indican la anchura y la altura de la capa. ndice Z es el nmero de orden de colocacin de las capas. Este valor tambin puede cambiarse a travs del panel Capas. 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 Capas, pulsando sobre la imagen del ojo. El ojo abierto indica Visible, y el ojo cerrado indica Hidden. A travs de Im. fondo y Col puede indicarse una imagen o un color de fondo para la capa. Desb. (Desbordamiento) controla cmo aparecen las capas en un navegador cuando el contenido excede el tamao especificado de la capa. Visible indica que el contenido adicional aparece en la capa. La capa se ampla para darle cabida. Hidden (oculto) especifica que el contenido adicional no se mostrar en el navegador. Scroll (desplazamiento) especifica que el navegador deber aadir barras de desplazamiento a la capa tanto si se necesitan como si no. Auto (automtico) hace que el navegador muestre barras de desplazamiento para la capa cuando sean necesarias (es decir, cuando el contenido de la capa supere sus lmites). Para practicar puedes realizar el Ejercicio paso a paso Insertar una capa. Unidad 15. Comportamientos (I)

En este tema vamos a ver las caractersticas bsicas de los comportamientos, as como un par de ejemplos de entre sus posibles aplicaciones.

Introduccin Los comportamientos son acciones que suceden cuando los usuarios realizan algn evento sobre un objeto, como puede ser mover el ratn sobre una imagen, pulsar sobre un texto, hacer doble clic sobre un mapa de imagen, etc. Los comportamientos no existen como cdigo HTML, se programan en JavaScript. Dreamweaver permite insertarlos a travs del panel Comportamientos, por lo que no es necesario escribir ninguna lnea de cdigo JavaScript para programarlos. La imagen que aparece a continuacin tiene asociado un comportamiento. Sita el puntero sobre ella para ver qu es lo que ocurre.

La imagen tiene asociados dos comportamientos para mostrar y ocultar la capa. Este tipo de comportamiento lo veremos ms adelante. Otros comportamientos que ya has visto son los que se aplican sobre las imgenes de sustitucin y las barras de navegacin, que ya estn predefinidos, por lo que no es necesario introducir este conjunto de comportamientos a travs del panel Comportamientos. Para validar formularios ya viste algunas caractersticas del panel Comportamientos. Vamos a recordar las que necesitamos para poder insertar comportamientos ms tarde. El panel Comportamientos se puede abrir a travs del men Ventana, opcin Comportamientos. Tambin pulsando Mays+F4. En este panel hay que desplegar el botn pulsando sobre l, y en Mostrar eventos para elegir una versin de la lista de navegadores. Algunos comportamientos no funcionan para algunos navegadores, por lo que dependiendo del navegador elegido aparecern unos u otros comportamientos posibles.

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

Insertar un comportamiento Cuando ya hay establecido algn navegador, ya se pueden insertar comportamientos. Lo primero que hay que hacer es seleccionar el objeto sobre el que se ha de aplicar el comportamiento, como puede ser una imagen, un fragmento de texto, etc. Al desplegar el botn del panel Comportamientos aparece la opcin Mostrar eventos para, a travs de la cual se haba elegido el navegador. Tambin aparece la lista de todas las acciones posibles para el navegador elegido previamente, de entre las que se puede seleccionar una. Segn el elemento sobre el que se desee aplicar el comportamiento, se podrn elegir unas acciones, mientras que otras no.

En este caso la accin Validar formulario no puede seleccionarse porque no existe ningn formulario en la pgina. Despus de elegir alguna accin, el comportamiento correspondiente aparece en el panel Comportamientos. En este caso se han insertado dos comportamientos. Como puedes ver, cada comportamiento tiene asociados un evento y una accin. Las acciones son las que se han elegido en la lista anterior y el evento indica cundo se debe de realizar la accin. Para eliminar un comportamiento, hay que seleccionarlo en el panel Comportamientos y pulsar sobre el botn . Tambin es posible cambiar el orden de los comportamientos aplicados a un objeto, seleccionndolos y ordenndolos mediante los botones . Unidad 16. Comportamientos Avanzados (I)

En el tema anterior vimos algunos de los comportamientos bsicos, en este tema veremos otros comportamientos y veremos cmo utilizarlos y aprovecharnos de esta caracterstica de Dreamweaver para crear diversas funcionalidades automticamente. Mensajes emergentes Este comportamiento te permitir crear avisos emergentes como en el siguiente ejemplo. Haz clic aqu. Este comportamiento es til para poder enviar mensajes al usuario. Ten en cuenta que no debers abusar de ellos, pues a la larga pueden resultar un poco incmodos, utilzalos con un objetivo concreto y no porque quieras atraer la atencin del usuario.

Para crear un mensaje emergente debers seleccionar el elemento al cual ir asociado el mensaje, en el ejemplo es un texto. Una vez seleccionado ves al panel Comportamientos (Mayus+F4) pulsa el botn y selecciona la opcin Mensaje emergente. Se abrir el siguiente cuadro de dilogo:

Aqu debers introducir el Mensaje que quieras que se muestre. Pulsa Aceptar cuando hayas acabado y estar listo.

Es aconsejable que asocies este comportamiento al evento onClick (cuando el usuario hace clic). Es ms intuitivo para el usuario, por ejemplo, si asocias el mensaje a un evento onMouseOver (cuando se pase el ratn por encima) el usuario no sabr muy bien porque se ha generado el mensaje de aviso. En realidad no habr hecho ningn movimiento voluntario para recibir ese tipo de respuesta. Debido a esto (el estimulo-respuesta que espera el usuario), el evento onClick es el ms indicado para este caso. Texto de la Barra de Estado

El Texto de la Barra de Estado es un elemento muy utilizado a la hora de personalizar una pgina web. Aunque no funciona en algunos navegadores. Si observas esta barra cuando navegas vers que va cambiando su texto segn te encuentres sobre un enlace o no. Normalmente, las pginas que no tratan la Barra de Estado (por ejemplo, esta) no muestran ninguna informacin. nicamente cuando posicionas el puntero sobre un enlace el texto de la Barra cambia para mostrar la direccin a la que este se dirige. Observa este ejemplo, si haces clic sobre l te llevar a la pgina principal de aulaClic. Cambiar el Texto de la Barra de Estado significara modificar el texto que aparece en ese momento cuando realizamos un evento sobre un elemento en particular. Por ejemplo: aulaClic.es Este comportamiento es muy til para personalizar mucho ms tu pgina y mostrar informacin que de otra forma no sera posible. Aunque no todos los navegadores son capaces de responder a este comportamiento.

Para crear este comportamiento selecciona el elemento al cual quieres asociar este comportamiento. Abre el panel Comportamientos (Mayus+F4) y pulsa el botn . Luego selecciona la opcin Definir texto y haz clic en Establecer texto de la barra de estado.

Aqu debers escribir el texto que quieres que aparezca en el cuadro Mensaje, luego pulsa Aceptar y listos.

Dnde y cmo asociar el texto en una pgina? es sencillo. Una de las opciones que te da este comportamiento es poder asociar un texto en concreto a la pgina en s. Es decir, que cuando abras una pgina se muestre inmediatamente (y permanentemente) un texto en la barra de estado. Eso es posible creando el mensaje asociado al body de la pgina (para ello tendrs que insertar el comportamiento sin seleccionar ningn elemento para que se asocie con toda la pgina) y lanzndolo en el evento onLoad (en la carga del documento). De esta forma cuando se abra la pgina se mostrar el mensaje en la barra de estado y permanecer all hasta que se produzca un cambio (por ejemplo, que se posicione el cursor sobre un enlace).

Ahora veamos cmo debemos actuar al establecer texto para los enlaces. En este caso ser necesario que introduzcamos dos comportamientos.

El primero, asociado al evento onMouseOver (cuando el ratn se encuentra encima) que mostrar el mensaje que queramos. El segundo deber ir asociado al evento onMouseOut (cuando el ratn deja de estar encima) que deber limpiar la barra de estado para que recupere su estado anterior. En el caso de que hubisemos establecido un mensaje para el body de la pgina, al salir de un enlace (en el onMouseOut) deberemos volver a escribir ese mensaje para que siga mostrndose. En el caso de que la pgina no tuviese un mensaje personalizado, deja el cuadro Mensaje en blanco para que la barra de estado recupere su estado natural.

Observa que si no estableces el segundo comportamiento, cuando posiciones el ratn sobre el enlace (o imagen, prrafo..., da igual) el texto de la barra de estado cambiar. Pero cuando el ratn deje de estar sobre el elemento no habr ninguna orden para que el texto vuelva a cambiar y se mantendr fijo con el mensaje del anterior comportamiento. nidad 17. Estilos CSS Avanzado (I)

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

La forma ms habitual de presentarse es en la seccin head de la pgina de esta forma: <style type="text/css"> <!-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 lo utilizaremos para incrustar el cdigo directamente sobre el archivo HTML.

Tambin es posible importar archivos de hojas de estilos (de extensin .css) que hayamos creado. Como ya hemos visto esta opcin es mucho mejor porque as podemos aplicarla sobre varias pginas a la vez sin la necesidad de escribir el cdigo en cada una de ellas. En este caso deberemos crear un archivo CSS (Archivo Nuevo y seleccionando CSS) donde escribiremos las reglas de estilo del mismo modo en el que hemos visto ms arriba pero eliminado el componente HTML: body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; text-align: center; background: url('imagenes/fondo.gif') repeat-x bottom;

} Luego deberamos vincularlo en la pgina HTML utilizando la etiqueta link: <link rel="stylesheet" href="ruta/del/estilo/nombre.css" />

Una pgina puede contener ambos tipos de estilos CSS, como por ejemplo, tener un archivo vinculado y luego un bloque de estilo incrustado. O incluso tener varias hojas de estilo asociadas. La 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.

Tambin es posible declarar el estilo en lnea. Es decir, tal y como se van creando las etiquetas HTML, para ello debers utilizar el atributo style: <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 ms desaconsejado porque es ms difcil de modificar al tener que buscarlo por el texto y modificndolo uno a uno.

Para practicar realiza el Ejercicio Paso a Paso de Creacin de una Hoja de Estilo. Ejercicio paso a paso. Unidad 17. Crear una hoja de estilo

Objetivo. Practicar las operaciones que hay que realizar para crear una hoja de estilo. 1 Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2 Abre el sitio libreria. 3 Crea un nuevo archivo CSS desde Archivo Nuevo Pgina bsica CSS. 4 Gurdalo (CTRL + S) y llmalo estilo_libreria.css.

Ya hemos terminado, en los prximos ejercicios aadiremos estilos a esta hoja.

Para que el estilo se aplique sobre la plantilla libreria.dwt.php deberemos vincularlo.

5 Abre el archivo libreria.dwt.php. 6 En el panel Propiedades despliega el campo Estilo y selecciona la opcin Adjuntar hoja de estilos.... 7 Busca el archivo estilo_libreria.css que acabamos de crear y selecciona la opcin Vincular. 8 Copia la carpeta imagenes que encontrars en la carpeta ejerciciosdream/libreria del curso y pgala en tu sitio libreria. 9 Ahora pega la siguiente estructura que vamos a formatear con los estilos CSS. En la vista Cdigo coloca inmediatamente despus de la etiqueta body el siguiente cdigo: <div id="cabecera"> <a href="../index.php">eLibrer&iacute;a aulaClic</a> <br /><br /><br /><br /><br /><br /> Libros Nuevos <img src="../imagenes/nuevos.gif" alt="Nuevos" width="21" height="27" align="absmiddle" /> <br /> Libros Usados <img src="../imagenes/usados.gif" alt="Usados" width="21" height="27" align="absmiddle" /> </div> Si lo prefieres puedes desde la vista Diseo: escribir el texto Librera aulaClic asociarle el vnculo ../index.php pulsar 6 veces May+Enter escribir el texto Libros Nuevos insertar a continuacin la imagen nuevos.gif que se encuentra en la carpeta imagenes del sitio escribir el texto Libros Usados insertar a continuacin la imagen usados.gif que se encuentra en la carpeta imagenes del sitio seleccionar todo lo que acabas de aadir ejecutar la opcion Insertar-->Objetos de diseo-->Etiqueta Div escribe cabecera en el cuadro Id:

Aceptar Estas operaciones te tienen que generar el mismo cdigo. Ahora modificaremos el men. 10 Selecciona La lnea Mostrar Ofertas Catlogo Crticas Buscar:. Asciale una etiqueta div con Id menu. 11 Selecciona la palabra Mostrar (asegrate de seleccionar tambin su enlace) y asgnale el estilo item. 12 Repite el paso 11 para cada una de las palabras de la lnea. El cdigo generado ser este: <div id="menu"> <script language="JavaScript1.2">mmLoadMenus();</script> <span class="item"><a href="#" name="link2" id="link1" onmouseover="MM_showMenu(window.mm_menu_0622115354_0,-12,26,null,'link2')" onmouseout="MM_startTimeout();">Mostrar</a></span> <span class="item"><a href="../ofertas.php">Ofertas</a></span> <span class="item"><a href="../catalogo.php">Cat&aacute;logo</a></span> <span class="item"><a href="../criticas.php">Cr&iacute;ticas</a></span> <span class="item"><a href="../buscar.php">Buscar:</a></span> </div>

13 Luego insertaremos el cdigo del cuerpo de la pgina aqu insrtalo directamente en la vista Cdigo copiando y pegando.: <div class="contenedor"> <div id="anuncios"> <div class="item"> <a href="../usados.php"><img src="../imagenes/anuncio_largo.gif" alt="" border="0"></a>

</div> <div class="item"> <script type="text/javascript"> <!-google_ad_client = "pub-1875034419890743"; google_ad_width = 125; google_ad_height = 125; google_ad_format = "125x125_as_rimg"; google_cpa_choice = "CAAQz9vnzwEaCIUwxV0cHMEdKMO393M"; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script> </div> <div class="item"> <a href="../catalogo.php"><img src="../imagenes/anuncio_corto.gif" alt="" border="0"></a> </div> <div class="item"> <script type="text/javascript"> <!-google_ad_client = "pub-1875034419890743"; google_ad_width = 125; google_ad_height = 125; google_ad_format = "125x125_as_rimg";

google_cpa_choice = "CAAQz9vnzwEaCIUwxV0cHMEdKMO393M"; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script> </div> </div> <div id="contenido"> contenido </div> </div>

Hemos creado la parte que contendr la publicidad y el contenido ms importante de la pgina.

14 Selecciona la lnea donde puedes leer contenido e inserta ah una zona editable de plantilla (Insertar Objetos de plantilla Regin editable). Quedar algo as: <!-- TemplateBeginEditable name="contenido" -->contenido<!-- TemplateEndEditable -->

15 Para terminar introduce este cdigo al final. Con l dibujaremos el pie de pgina. <div id="pie"> Esto es un proyecto de aulaClic.com <br /> Copyright &copy; aulaClic S.L. 2006

</div>

16 Cierra todos los archivos guardando los cambios. Unidad 18. Sitios Remotos (I)

En el tema 3 vimos cmo crear y trabajar con un sitio local. Esta unidad est dedicada a los Sitios Remotos, veremos cmo crearlos y cmo utilizarlos. Definir un sitio remoto significa establecer una configuracin de modo que Dreamweaver sea capaz de comunicarse directamente con un servidor en Internet (por eso se llama remoto) y as poder trabajar a la vez con tus archivos en el sitio local, es decir, la copia que tienes en tu ordenador, y en el sitio remoto, colgados en el servidor, en Internet. El modo en el que veremos que el programa se comunica con tu servidor ser FTP, ya que es prcticamente el ms utilizado y muy pocos utilizan otras alternativas. Configurar un Sitio Remoto Muy bien, ahora veamos los pasos que tenemos que seguir para configurar las opciones y que Dreamweaver se pueda conectar con nuestro servidor. Para ello deberemos modificar la especificacin que creamos en su da del sitio con el que estamos trabajando. As que haz clic en Sitio y selecciona Administrar sitios. Selecciona el sitio con el que quieras establecer comunicacin remota (o crea uno nuevo para el caso) y pulsa Editar. Vers que se abre el cuadro de dilogo de Definicin del Sitio. Ahora podremos escoger entre trabajar en modo bsico o avanzado. Vamos a seleccionar la pestaa Avanzado para poder ver con ms detenimiento las opciones que se nos ofrecen. Una vez ests en el nuevo modo, selecciona la Categora Datos remotos en el listado de la izquierda.

Ahora en el desplegable Acceso 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:

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 necesitrs son los siguientes: Servidor 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 el campo Directorio del Servidor podremos establecer una carpeta contenida en el servidor donde queramos subir las pginas. Imagina que dentro de la estructura de carpetas del servidor romoto tienes una que se llama pagina y dentro de esta otra que se llame principal. Podramos indicar la ruta pagina/principal para que los archivos se subiesen directamente a esa ubicacin. En 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 Probar para ver si son correctos y Dreamweaver puede crear una conexin con el servidor remoto.

Finalmente comentaremos la opcin Permitir desproteger y proteger archivo. Esta casilla es til cuando ms de una persona est utilizando el mismo servidor y las mismas pginas. De esta forma (como veremos ms adelante) podrs bloquear diversos archivos para evitar que se vean modificados por otra persona (que tambin tenga acceso al servidor) mientras t trabajas con ellos.

Si seleccionas la opcin Cargar archivos en el servidor automticamente al guardar forzars a que Deamweaver suba los archivos cada vez que los guardes. Una opcin bastante til para no olvidar subir pequeos retoques que se vayan haciendo en el tiempo. Aunque es una opcin un poco peligrosa porque si modificas la versin en local y te equivocas no podrs recuperar la versin anterior que estaba almacenada en el remoto porque se habr sobreescrito. Esta opcin tampoco es recomendable si no tienes conexin permanente y rpida a Internet.

Una vez hayas terminado Acepta todas las pantallas hasta volver a la vista de trabajo y estaremos listos. nidad 19. Servidor de Pruebas (I)

Introduccin a PHP Hasta ahora hemos aprendido cmo mostrar contenido esttico en nuestras pginas web. Dejando de lado todos los efectos o animaciones que podamos hacer, en determinadas ocasiones nos es necesario darle un poco ms de dinamismo al contenido del sitio. Digamos que necesitamos mostrar listados de cualquier tipo que puedan generarse automticamente, o incluso que se repartan en varias pginas. Es posible que tambin necesites que el contenido se actualice peridicamente y tengas demasiadas pginas como para ir modificndolas una a una. O incluso te gustara crear una pgina individual para cada elemento que aparezca un listado y resulta muy laborioso crear una pgina individual para cada uno de ellos.

Muy bien. Ha llegado la hora de dejar un poco de lado HTML y comenzar 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 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. Unidad 20. Pginas Dinmicas (I)

Introduccin En esta unidad vamos a ver cmo utilizar Dreamweaver para crear pginas PHP y acceder a datos almacenados en una base de datos. Como vimos en el tema anterior, las pginas dinmicas se almacenan en el servidor y cuando son requeridas se ejecutan y devuelven una salida de cdigo HTML al cliente que lo visualizar en su navegador.

Mientras el archivo PHP se ejecuta en el servidor, puede crear una conexin a una base de datos y extraer o guardar informacin en ella. Ahora que ya tenemos un servidor de pruebas donde pueda ejecutarse el cdigo que introduzcamos en nuestras pginas y permita la creacin de bases de datos para almacenar informacin pasaremos a crear nuestras propias pginas dinmicas de acceso a datos. Una vez instalado WAMP empezaremos a crear nuestras primeras pginas para mostrar informacin especfica y personalizada. Para ello nos apoyaremos siempre en la seccin Aplicacin de la barra de herramientas Insertar:

Puede que en tu ordenador no veas la barra de esta forma, pues puede tomar la forma de pestaas o de men. Si la tuvieses en forma de men haz clic en el desplegable de la izquierda y selecciona Aplicacin:

Y en el panel Aplicacin que puedes abrir desde el men Ventana Bases de datos. Crear una conexin a la Base de Datos Como puedes ver en el panel Aplicacin los requisitos necesarios para empezar a trabajar con bases de datos ya los hemos cubierto en los temas anteriores del curso. El ltimo paso que nos 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.

Se abrir el siguiente cuadro de dilogo:

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 priviegios 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 nos vamos a conectar.

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.

Para practicar la creacin de conexiones realiza el Ejercicio Paso a Paso Creando una Conexin. Unidad 21. Cmo crear un Blog (I)

Introduccin Hasta ahora hemos visto cmo empezar a manejarnos con pginas dinmicas de acceso a datos utilizando PHP y un servidor mySQL. La complejidad de las pginas que creemos depender de la profundidad de nuestros conocimientos de ambas tecnologas, por lo que muchas veces (sobre todo al principio) nos ser dificil alcanzar algunos objetivos que nos propongamos.

Vamos a dedicar este tema a la elaboracin de un proyecto complejo en el que deberemos emplear estas tcnicas de un modo ms completo. Para ello crearemos un blog o bitcora y utilizaremos herramientas y procedimientos que hemos visto hasta ahora. No te pierdas este tema, introduciremos algunos conceptos que quiz te resulten interesantes. Un blog es una pgina web donde se introduce contenido peridicamente sobre un tema en particular. Su contenido suele organizarse en entradas que se van aadiendo con una asiduidad relativa. Normalmente, estas entradas pueden comentarse. Es decir, cualquier usuario (o a veces solamente los registrados) pueden dejar su opinin sobre la entrada o sobre el blog en general. Para facilitar la navegacin por la pgina estas entradas suelen estar organizadas por temas o categoras, de modo que si te interesa poder leer todas las entradas relacionadas con un tema en concreto te sea mucho ms sencillo.

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.

El aspecto y funcionalidades finales estn en tus manos, puedes aadir tantas cosas como quieras. As que vamos a empezar... Estructura de datos

Nuestro primer paso para la creacin de un blog ser crear la estructura de datos que contendr la informacin de las entradas y otros elementos del sitio. En un sitio simple deberemos crear como mnimo 4 tablas: categorias, entradas, comentarios y usuarios. En la tabla categoras deberemos listar el nombre de las categoras en las que se dividen las entradas. En la tabla entradas deberemos almacenar el texto de la entrada con su ttulo y fecha. Obviamente aqu deberemos hacer referencia a qu categora pertenece la entrada. En un blog ms complejo podramos incluso almacenar qu integrante de la tabla de usuarios cre la entrada... En la tabla comentarios deberemos almacenar el texto del comentario junto con la informacin del autor, como su nombre y correo electrnico, por ejemplo. Con conocimientos ms profundos de PHP podramos guardar hasta su direccin IP. Finalmente en la tabla usuarios guardaremos el nombre y contrasea de los usuarios que tendrn acceso a la edicin del blog. Ms adelante vers que incluso se podran establecer niveles de privilegios entre ellos.

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. Podremos utilizar una caracterstica de la definicin de la base de datos que existe en Mysql (no exista en las primeras versiones) y en otros sistemas gestores de bases de datos, el borrado y actualizacin en cascada.

Desde el entorno de PhpAdmin podremos definir esta caracterstica en la vista de relaciones. Podrs encontrar el enlace a esta vista desde la vista de detalle de cualquier tabla:

Haz clic sobre l y vers una nueva ventana como esta:

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 .

El modo en el que deberemos definir nuestro objetivo es el siguiente. A un campo indexado podemos 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 modificasemos 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.

Para practicar la creacin de ndices y relaciones realiza el Ejercicio Paso a Paso Estructura de Datos de un Blog. Ejercicio paso a paso. Unidad 21. Estructura de datos de un Blog

Objetivo. Practicar las operaciones necesarias para crear la estructura de datos de un blog.

1 Si WAMP no se est ejecutando, lnzalo para realizar este ejercicio. 2 Si el servicio de MySQL no se est ejecutando, lnzalo para poder tener acceso a las bases de datos. 3 Haz clic izquierdo sobre el icono de WAMP en el rea de notificacin y selecciona la opcin phpMyAdmin. 4 Se abrir una ventana, escribe bd_blog en el campo de texto de la imagen.

5 Selecciona utf-8_spanish_ci en el desplegable Contejamiento. 6 Pulsa Crear para crear la base de datos.

7 Pasaremos a un nueva ventana con la estructura de la base de datos, para crear una nueva tabla escribe Entradas en Nombre y 5 en Campos. 8 Pulsa el botn Continuar para seguir. Ahora vamos a configurar los campos. 9 Al primer campo lo llamaremos Id, de tipo INT, con extra auto_increment y Primario (). Pues ser un campo numrico entero, autoincremental (cada vez que se graba un registro el sistema le asigna un nmero ms que el anterior), y ser la clave principal de la tabla (primario). 10 Al segundo lo llamaremos Titulo, de tipo VARCHAR y con longitud 100. 11 Al tercero lo llamaremos Texto, de tipo LONGTEXT. 12 Al cuarto lo llamaremos Fecha, de tipo DATE. 13 Al ltimo lo llamaremos Id_Categoria, de tipo INT, con longitud 11 e Indexado (). Lo definimos indexado para poder relacionarlo con la tabla Categorias. 14 Haz clic en Grabar para guardar los cambios y la tabla ya estar lista para utilizarse.

15 Repite los mismos pasos para crear una tabla llamada Categorias con 2 campos. 16 Al primero lo llamaremos Id, de tipo INT, con extra auto_increment y Primario (). 17 Al segundo lo llamaremos Nombre, de tipo VARCHAR y con longitud 15.

18 De nuevo, repite los pasos para crear una tabla llamada Comentarios con 6 campos. 19 Al primero lo llamaremos Id, de tipo INT, con extra auto_increment y Primario (). 20 Al segundo lo llamaremos Autor, de tipo VARCHAR y con longitud 30. 21 Al tercero lo llamaremos Correo_Autor, de tipo VARCHAR y con longitud 30. 22 Al cuarto lo llamaremos Comentario, de tipo LONGTEXT. 23 Al quinto lo llamaremos Fecha, de tipo DATE. 24 Al ltimo lo llamaremos Id_Entrada, de tipo INT, con longitud 11 e Indexado (). Indexado para relacionarlo con la tabla Entradas.

25 Por ltimo crearemos una tabla llamada Usuarios con 3 campos. 26 Al primero lo llamaremos Id, de tipo INT, con extra auto_increment y Primario (). 27 Al segundo lo llamaremos Usuario, de tipo VARCHAR y con longitud 20. 28 Al tercero lo llamaremos Password , de tipo VARCHAR y con longitud 20.

Ahora definiremos las relaciones entre las tablas. 29 En el marco de la izquierda haz clic sobre la tabla Comentarios y una vez en su ventana haz clic en Vista de Relaciones. 30 En Id_Entrada selecciona en el segundo desplegable Entradas->Id. Para indicar que en este campo habr un id que deber estar en la tabla Entradas. 31 En el desplegable ON DELETE selecciona CASCADE. 32 Y por ltimo en ON UPDATE seleccionar CASCADE.

33 En el marco de la izquierda haz clic sobre la tabla Entradas y una vez en su ventana haz clic en Vista de Relaciones.

34 En Id_Categoria selecciona en el segundo desplegable Categorias->Id. 35 En el siguiente desplegable selecciona CASCADE. 36 Para terminar, en el siguiente vuelve a seleccionar CASCADE.

Ahora vamos a rellenar las tablas, importaremos los datos de unos ficheros de texto. 37 Vuelve a la tabla Categorias seleccionndola en el men de la izquierda. 38 Haz clic en la opcin Importar que encontrars en el men horizontal en la parte superior de la ventana:

39 En la siguiente ventana pulsa el botn Examinar y busca el archivo categorias-latin1.txt que se encuentra en la carpeta de ejerciciosdream en la carpeta blog. 40 El archivo se encuentra codificado en latin1 as que seleccinalo en la lista de Juego de caracteres del archivo. 41 Pulsa el botn Continuar. 42 Asegrate de que se han introducido datos en la tabla pulsando la opcin Examinar de la tabla Categorias.

43 Repite los mismos pasos con el archivo entradas-latin1.txt para introducir datos en la tabla Entradas. 44 Repite los mismos pasos con el archivo comentarios-latin1.txt para introducir datos en la tabla Comentarios. 45 Repite los mismos pasos con el archivo usuarios-latin1.txt para introducir datos en la tabla Usuarios.

Ahora crearemos un usuario y le asignaremos privilegios para que pueda modificar los datos almacenados. 46 Vuelve a la ventana principal y haz clic sobre . 47 Haz clic en el vnculo Agregar un nuevo usuario.

48 En la nueva ventana escribe escritor en Nombre de usuario. 49 En Servidor escribe localhost. 50 En Contrasea escribe aulaclic. 51 En Debe volver a escribir escribe aulaclic de nuevo. 52 Pulsa el botn Continuar para crear el usuario. 53 En la nueva pantalla desplzate hacia abajo hasta encontrar:

Aqu selecciona la base de datos bd_blog en el desplegable y pulsa Continuar para modificar los privilegios de este usuario sobre esta base de datos. 54 Selecciona los privilegios SELECT, INSERT, UPDATE y DELETE. Si te das cuenta estn todos en el marco de Datos. Vamos a darle a este usuario nicamente permiso de escritura y lectura sobre la base de datos. Los permisos de Administracin y Estructura los dejaremos en blanco para que este usuario no pueda acceder a la parte administrativa ni pueda modificar la estructura de las tablas. 55 Pulsa Continuar para asignarle al usuario estos privilegios y habremos terminado. nidad 22. XML y RSS (I)

Introduccin RSS son archivos que contienen informacin de una pgina web con las ltimas actualizaciones que se han hecho en ella. Este tipo de archivos es muy til para cualquier sitio de noticias, foros, weblogs o pgina que emita contenido de forma continuada. Para crear archivos RSS utilizamos el lenguaje XML, que es un lenguaje de etiquetas mucho ms flexible que HTML. Este sistema tiene un objetivo muy sencillo, el de organizar informacin para su almacenamiento y distribucin. Como puedes ver esta es la mayor diferencia entre ambos lenguajes, pues HTML est orientado a cmo se debe mostrar la informacin y XML a organizarla. Un ejemplo muy claro de lo que sera un archivo XML es el siguiente:

<biblioteca> <libro> <titulo>Las 64 casillas</titulo> <autor>Pablo Alvarez Castano</autor> <editorial>Paidotribo Editorial</editorial> <isbn>848019815X</isbn> </libro> <libro> <titulo>Periodismo 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 almacenado la informacin de nuestra biblioteca. Observa cmo las etiquetas que conforman el archivo no son ms que identificadores que hemos creado para este fin.

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 8 para incluir fcilmente contenido de un sitio externo en nuestras pginas.

Nota: 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 aprender a configurar el servidor de pruebas realiza el Ejercicio Paso a Paso de Preparando el Servidor de Pruebas. Ejercicio paso a paso. Unidad 22. Preparando el Servidor de Pruebas

Objetivo. Practicar las operaciones necesarias para preparar el servidor de pruebas para que soporte transformaciones XSL. 1 Si WAMP no se est ejecutando, lnzalo para realizar este ejercicio. 2 Haz clic izquierdo sobre el icono de WAMP en el rea de notificacin y selecciona la opcin PHP extensions. Se desplegar un men que mostrar todas las extensiones instaladas.

4 Desplzate hacia abajo hasta que encuentres una llamada php_xsl. 5 Haz clic sobre ella y la extensin se instalar. Unidad 23. AJAX y Spry Framework (I)

Introduccin AJAX es una combinacin de diferentes tcnicas que nos permite modificar el contenido de nuestras pginas sin tener que provocar actualizaciones visibles para el usuario. Es decir, podremos cambiar la informacin que mostramos sin tener que hacer una peticin al servidor. Como Flash, Java o ActiveX, AJAX es una tecnologa que se ejecuta en el cliente!

Para incluir comportamientos y caractersticas de AJAX en nuestras pginas deberemos tener conocimientos de JavaScript, XML y DOM (Document Object Model). Adobe ha creado Spry, una librera JavaScript mucho ms sencilla y centrada en HTML que slo te obligar a tener unas pequeas nociones de JavaScript y XML. De esta forma utilizar AJAX se hace mucho ms simple y asequible.

Podrs incorporar informacin almacenada en archivos con formato XML y manejarla dinmicamente sin la necesidad de refrescar la pgina a cada peticin. Incluir Spry Utilizar Spry es muy sencillo, slo debers incluir un par de scripts de JavaScript que podrs descargarte desde la pgina de Adobe Labs. Desde all podrs descargar un archivo .zip, Este archivo contiene algunas demostraciones y la documentacin necesaria para utilizar Spry. Slo te interesarn dos archivos que se encuentran en la carpeta includes: SpryData.js y xpath.js. Para utilizarlos, simplemente cpialos en tu sitio y escribe estas dos lneas en la cabecera de la pgina: <script type="text/javascript" src="xpath.js"></script> <script type="text/javascript" src="SpryData.js"></script>

Con esto referenciamos a los scripts y los incluimos en nuestra 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 porqu 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">

Para practicar la inclusin de Spry en una pgina web realiza el Ejercicio Paso a Paso Incluir Spry. Ejercicio paso a paso. Unidad 23. Incluir Spry

Objetivo. Practicar la inclusin de Spry en una pgina web. 1 Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2 Abre el sitio libreria. 3 Abre un archivo dinmico nuevo basado en la plantilla libreria.dwt.php (Archivo Nuevo, pestaa Plantillas). 4 Gurdalo como catalogo.php. 5 Copia los archivos SpryData.js y xpath.js que encontrars en la carpeta programas adicionales del curso a la carpeta del sitio. 6 En el archivo catalogo.php dirgete a la vista de Cdigo. 7 En la parte superior, modifica la etiqueta html para que pueda leerse: <html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry"> 8 Busca la etiqueta title. Debajo de ella debers escribir las siguientes lneas para incluir los scripts de Spry: <script type="text/javascript" src="xpath.js"></script> <script type="text/javascript" src="SpryData.js"></script> 9 Cierra el documento guardando los cambios.