Dream Weaver

Leccin 1: El lenguaje HTML y Dreamweaver CS4
1. Leccin 1: El lenguaje HTML y Dreamweaver CS4 Leccin 1: El lenguaje HTML y Dreamweaver CS4
Planteamiento de la leccin Requisitos previos
Page 1 of 227
Mnimos conocimientos de ingls. Experiencia a nivel de usuario con pginas web.
Objetivos de la Leccin 1
Familiarizar al estudiante con los conceptos relacionados con el diseo en HTML. Ofrecer una visin general a modo de chuleta de la interfaz de Dreamweaver CS4.
Secciones 1. 2. 3. La pgina web: HTML+CSS Dreamweaver CS4 Tendencias en el diseo web
Duracin estimada Esta leccin es pramente terica y slo tienes que leerla, lo que no debera llevarte ms tiempo que 2 o 3 horas. Las pginas contienen vnculos a otras fuentes de informacin que te permitirn ampliar tus conocimientos. Nota: Algunas imgenes son demasiado grandes para mostrarlas a su tamao real. En esos casos podrs pulsar sobre la imagen para verla en otra ventana (o pestaa) a su tamao real.
Curso de Formacin Informtica de Dreamweaver por Salvador de la Puente Gonzlez est licenciado bajo Creative Commons Reconocimiento 3.0 Espaa License.
1.1. Seccin 1.1 - La pgina web: HTML+CSS Seccin 1.1 - La pgina web: HTML+CSS
Gracias a nuestra experiencia diaria, podemos decir que las pginas web son documentos multimedia (esto es, que renen texto, audio, vdeo...) los cuales se encuentran en Internet, vinculados entre s a travs de enlaces y que se pueden visualizar gracias a los navegadores como Internet Explorer, Opera, Chrome o Mozilla Firefox. Para su construccin, se utilizan lenguajes de marcado que permiten definir la estructura del texto, y lenguajes de definicin de estilos, para indicar cmo debe visualizarse la informacin. A lo largo de esta seccin, veremos dos de los lenguajes ms comunes para la creacin de pginas web: HTML y CSS. Antecedentes histricos Internet Internet no es una red, es la red de redes, un compendio de diversas redes conectadas entre s. Internet en la actualidad, tal y como la conocemos, no es ms que la evolucin natural de la interconexin de diversas redes cientficas, educativas y finalmente, comerciales. Merece la pena, pues, dedicar un par de prrafos al surgimiento de Internet. En un primer momento, all por los aos 50, el gobierno de los EEUU decide fundar la Oficina de Tecnologas para el Procesamiento de Informacin (IPTO por sus siglas en ingls) con el fin de investigar la creacin de un red descentralizada basada en el intercambio de paquetes de informacin: ARPANET. As, tras 20 aos de investigacin, en 1969 se establece la comunicacin entre los primeros dos nodos de la red: La Escuela de Ingeniera y Ciencia Aplicada de UCLA y el Instituto de Investigacin de Stanford. En aos posteriores, durante los 70, muchas otras Instituciones Universitarias y de Investigacin se uniran al proyecto haciendo evolucionar ARPANET hacia CSNET, red que conectaba los departamentos de computadores de distintos rganos acadmicos. En la dcada de los 80, muchas ms entidades quisieron unirse a redes como CSNET y otras no estadounidenses, como la britnica IPSS. De nuevo en EEUU, CSNET evoluciona hasta convertirse en NSFNET, con la intencin de interconectar los superordenadores presentes en las universidades y centros de investigacin ms prestigiosos, con los investigadores de todo el mundo. Durante los ltimos aos de los 80, surgen los primeros proveedores de servicios de Internet y comienza la conexin de las redes existentes en busca de fines comerciales. Por poner un ejemplo, en 1989, NSFNET abandona su servicio de mensajera electrnica y se conecta con el servicio comercial de correo electrnico MCI. Esta fecha es recordada por marcar el principio del Internet moderno. La World Wide Web
https://campusvirtual.ucm.es/SCRIPT/seminario-invest-715641-41/scripts/student/serve_summary.pl?FILES+_h...
25/03/2010
Page 2 of 227
Merece la pena aclarar que, hasta este momento, la interconexin de ordenadores tiene por fin el intercambio de datos, la mensajera electrnica y el acercamiento de las supercomputadoras a los investigadores de todo el mundo. Hasta este punto, nada que se parezca a la visin casera de Internet que tenemos en la actualidad. No obstante, en 1990, los cientficos del CERN o Centro Europeo de Investigacin Nuclear (Conseil Europen pour la Recherche Nuclaire, en Francs), Tim Berners-Lee y Robert Cailliau, propusieron una red de documentos de hipertexto (calma, hablaremos de ello en el siguiente prrafo) llamado World Wide Web que requera el uso de navegadores en una disposicin cliente-servidor. La idea era sencilla: si un usuario quiere consultar un documento, entonces su ordenador acta como cliente pidiendo al ordenador propietario, el servidor, el documento requerido. Una vez en el ordenador cliente, el documento poda abrirse con un programa especial llamado navegador. Del prrafo anterior puede deducirse que el concepto de hipertexto estaba ya inventado incluso antes de la invencin de Internet. Y es cierto: el hipertexto es un concepto bastante viejo que se refiere a ciertos documentos electrnicos que podan enlazar con otros recursos (incluyendo fotografa, video, audio...) de forma inmediata, tal y como lo hace una web actual. Uno de los primeros ejemplos fue HyperCard que, de la mano de Apple, permita crear aplicaciones capaces de interconectar los documentos de un mismo ordenador. La innovacin clave, introducida por Tim Berners-Lee y su colega Robert Cailliau, era la de integrar el hipertexto dentro de la creciente Internet y permitir as la vinculacin de recursos que no tenan por qu residir en el mismo disco duro. Para ello, en 1992, Berners-Lee cre un protocolo de intercambio de hipertexto llamado HTTP (siglas que podemos encontrar al comienzo de la direccin web de cualquier pgina) y un lenguaje simplificado para producir documentos de hipertexto, el HTML. No slo eso, tambin desarroll el primer navegador / editor de HTML, escribi la primera pgina web e instal el primer servidor web. En 1993, el CERN anunci la liberacin del proyecto World Wide Web de forma que cualquiera poda instalar su propio servidor web o disear su propia pgina web. En Octubre de 1994, Berners-Lee decide crear el consorcio W3C en el MIT con el apoyo tanto de la agencia estadounidense DARPA como de la Comisin Europea. Este consorcio vela por los estndares tecnolgicos presentes en la World Wide Web de hoy da y fue la responsable de introducir el lenguaje CSS de definicin de estilos en 1994. Cualquiera que lo desee, puede visitar la pgina del consorcio W3C a travs de su pgina web, w3.org. En la actualidad, la World Wide Web es mucho ms que un proyecto, es una realidad y se define como el compendio de pginas web accesibles a travs de Internet. El Lenguaje para Marcado de HiperTexto o HTML HTML son las siglas de Lenguaje de Marcado de HiperTexto (HyperText Markup Language, en ingls) y es un lenguaje basado en marcas o anotaciones, lo que quiere decir que proporciona alguna forma de hacer que fragmentos de texto cumplan una determinada tarea o signifiquen algo en especial. Vemoslo con un ejemplo, consideremos el siguiente fragmento de cdigo HTML que indica que el texto La Informtica es una cabecera de nivel 1 (header 1, en ingls). <h1>La Informtica</h1> Aunque por la oracin en s podamos intuir que se trataba de un ttulo, observa como HTML permite declarar este hecho explcitamente con tan slo aadir ciertas marcas antes y despus del texto que se desea marcar. Tales marcas se denominan etiquetas y suelen aparecer en pares, una para sealar el comienzo de la marca de la forma <etiqueta> y otra para sealar el final de la forma </etiqueta>. Adems, la etiqueta inicial puede especificar uno o ms parmetros que completan su significado. Por ejemplo, imagina que queremos explicar el significado del acrnimo HTML, la etiqueta <acronym> se usa precisamente para indicar que el texto que encierra es un acrnimo y podemos usar el parmetro title para indicar el significado del acrnimo. <acronym title="HyperText Markup Language">HTML</acronym> Los lenguajes de marcado son a menudo confundidos con los lenguajes de programacin, pero los lenguajes de programacin estn orientados a realizar tareas y transformar informacin, objetivos que los lenguajes de marcado no persiguen. Lo que caracteriza un lenguaje de marcado es el hecho de que pretende dotar al texto de estructura y describir los elementos que residen en l. Otro ejemplo de cdigo HTML, algo ms complejo, sera el siguiente (corresponde a esta pgina web de prueba) <html> <head> <title>Mi primera pgina web</title> </head> <body> <h1>Pgina web de prueba</h1> <p>Esta es una pgina web simple con un par de prrafos sencillos y algunos estilos HTML como <strong>este texto resaltado</strong> o <em>este otro enfatizado</em>.</p> <p>El segundo prrafo, es decir, este, tambin incluye un enlace a un <a href="http://www.google.com">famoso buscador</a>.</p> </body> </html> En l se aprecia tanto la descripcin de los elementos que conforman la pgina web (la cabecera con <head> y el cuerpo con <body>; el ttulo de la pgina con <title> y el ttulo del contenido con <h1>; un enlace con <a> y prrafos con <p>; texto resaltado con <strong> y texto enfatizado con <em>...) como la estructura de la misma: es sencillo ver que tanto la cabecera <head> como el cuerpo <body> estn "dentro de <html> pero al mismo nivel" y como el texto enfatizado <em> est "dentro de un prrafo <p> que est dentro del cuerpo <body>" que, como ya hemos dicho, "est dentro de <html>". A la propiedad de que un elemento se site en el interior de otro se la denomina
25/03/2010

anidamiento.
Page 3 of 227
De esta forma, los diseadores usan HTML para dar estructura a un texto, pero la estructura no lo es todo. Muchas veces las pginas se nos muestran ricas en color e imgenes distribuyendo la informacin de diversas y atractivas maneras. Es aqu dnde HTML se encuentra limitado y necesita actuar en conjunto a otros lenguajes especializados en el estilo y diseo, como por ejemplo CSS. Las Hojas de Estilo en Cascada o CSS CSS son las siglas de Hojas de Estilo en Cascada (Cascade Style Sheet, en ingls) y se trata de un lenguaje para la definicin de reglas de visualizacin de HTML. Es decir, permite indicar cmo deben representarse los elementos HTML de una pgina web. Por ejemplo, observa el siguiente fragmento que hace que los prrafos se presenten centrados, en negrita y color rojo: p { text-align:center; text-weight:bold; color:red; } El texto antes de la llave se llama selector e indica qu elementos de HTML se vern afectados por la regla. El selector puede corresponder con una etiqueta HTML como es el caso (el elemento es p de prrafo o paragraph, en Ingls). La parte entre las llaves se llama cuerpo de la regla y establece las propiedades en lneas de la forma propieda:valor; CSS permite tambin selectores basados en la estructura de la pgina. As, el siguiente fragmento afecta slo a los "enlaces que estn dentro de prrafos". p a { color:blue; text-decoration:underlined; } Cmo afecta cada propiedad a los elementos de una pgina web est especificado en un estndar administrado por la w3.org de manera que, independientemente del navegador que usemos, todos podamos visualizar una misma pgina web de la misma forma. Adems, si no se especifica ninguna regla para un elemento, se le aplica un estilo por defecto, especificado tambin como parte del estndar de la w3.org NOTA: No obstante, hasta hace bien poco, algunos navegadores como Internet Explorer (versiones previas a la 7) no seguan las recomendaciones de la w3.org por lo que la visualizacin de pginas web difera de la normal. Por este motivo, para este curso utilizaremos los navegadores Firefox o Chrome, los cuales se ajustan muy bien a la normativa de la w3.org Como estndares de la WWW, podemos encontrar ms informacin sobre HTML y CSS en sus respectivas pginas dentro de w3.org.
1.2. Seccin 1.2 - Dreamweaver CS4 Seccin 1.2 - Dreamweaver CS4

A partir de 1995, al popularizarse la versin 2.0 del lenguaje HTML, surgieron herramientas destinadas a facilitar el desarrollo de pginas web. Algunas eran editores de cdigo avanzados, que realzaban en distintos colores las etiquetas y los parmetros para distinguirlos del contenido y que contaban con manuales acerca de HTML en su propio sistema de ayuda. Otras de estas aplicaciones, ms sofisticadas, trataron de ocultar los detalles tpicos del marcado manual ofreciendo una interfaz ms parecida a la de los editores de texto contemporneos, dnde se pudiera crear la pgina web sin escribir una sola lnea de cdigo. Eran los llamados editores WYSIWYG, siglas de Lo que ves es lo que obtienes (What You See Is What You Get, en Ingls) y entre ellos destacan dos: Dreamweaver, de Macromedia, y Front Page, de Microsoft. La principal diferencia entre Dreamweaver y Front Page surga del hecho de que Front Page fue orientado a crear pginas compatibles con el navegador de Microsoft, Internet Explorer, que no segua muy bien las indicaciones estndares de la w3.org. As, el editor de Microsoft, aunque consegua hace que la edicin de pginas web resultara muy sencilla, introduca muchos elementos no estndares en el HTML subyacente de la pgina web, lo que haca el cdigo crptico y difcil de entender. Por otro lado, Dreamweaver fue pensado con el fin de no ensuciar el HTML y de promover herramientas visuales fciles, desde el punto de vista del diseador, que llevaran a un cdigo limpio y sencillo de mantener por parte del programador. Gua rpida de Dreamweaver CS4
25/03/2010
Page 4 of 227
En esta seccin se ofrece, en forma de imgenes, un pequeo resumen de la interfaz de usuario de Dreamweaver CS4 as como un listado de atajos de teclado. Puedes hacer clic sobre las imagenes para ampliarlas. Nada ms comenzar
25/03/2010
Page 5 of 227
25/03/2010
Page 6 of 227
La interfaz de Dreamweaver CS4 nada ms abrir el programa: en el centro encontramos un men rpido con tres columnas: la primera permite abrir archivos usados recientemente; la segunda, crear algunos de los tipos de documentos ms comunes y la tercera acceder a algunos videotutoriales online sobre las nuevas caractersticas de esta versin. La barra de mens En su intento por maximizar el rea de trabajo, Dreamweaver elimina la barra de ttulo tpica de los programas de Windows. En su lugar ofrece directamente la barra de men que mostramos a continuacin junto con la descripcin de cada elemento y algunos de los atajos de teclado ms comunes.
Archivo contiene los comandos clsicos de administracin de documentos como crear un documento nuevo, guardarlo o cerrarlo. Adems de los siempre tiles comandos deshacer y rehacer, el men Edicin contiene las herramientas de bsqueda y los comandos para copiar, cortar y pegar texto. La ltima opcin del men es el acceso al cuadro de dilogo Preferencias donde podremos cambiar la configuracin de Dreamweaver. El men Ver contiene comandos relacionados con la apariencia de Dreamweaver. Insertar reune comandos para aadir distintos tipos de elementos al documento como pueden ser imgenes, tablas, hipervnculos, cdigo HTML, cdigo CSS... Modificar recoge, por categoras desplegables, comandos para alterar las propiedades de tablas, imgenes, marcos, capas y otros elementos HTML. Tambin permite modificar las propiedades de la pgina. El men Formato incluye opciones para aplicar los formatos HTML al texto as como aadir estilos y hojas de estilo CSS. Comandos se compone por un conjunto de herramientas y utilidades de inters tales como el corrector ortogrfico, un creador de lbumes de fotos, utilidades para mejorar el cdigo HTML, etc. Sitio contiene los comandos necesarios para administrar sitios web incluyendo opciones de comparticin y seguridad para cuando trabajamos en grupo y herramientas para generacin de informes, comprobacin y sustitucin de enlaces a nivel global... Ventanas controla los paneles visibles en la interfaz de Dreamweaver. Merece la pena activar y desactivar algunos de ellos, con el fin de localizar la ubicacin de los mismos. Los ms utilizados en este curso son:

Insertar Propiedades Estilos CSS Archivos
Estos paneles estn repartidos entre los inferiores y los laterales como se ver posteriormente. Por ltimo, el men Ayuda nos permitir acceder a los manuales tanto del propio programa como a las referencias de los lenguajes HTML y CSS. Los tres iconos siguientes permiten alternar entre configuracin tiles del rea de edicin, instalar y configurar extensiones para Dreamweaver y crear y administrar sitios, respectivamente. La configuracin del rea de edicin que utilizaremos a lo largo del curso ser principalmente Diseo, aunque animo a los usuarios ms interesados a utilizar Cdigo y Diseo. El ltimo men, situado antes del cuadro de bsqueda (tal cuadro permite buscar en la ayuda online de Dreamweaver directamente), permite elegir entre diversas configuraciones de la interfaz. Durante este curso, utilizaremos la opcin Diseador. Los usuarios con dos monitores pueden usar la opcin Pantalla doble que mandar todos los paneles al monitor secundario dejando el monitor principal slo con el rea de edicin y los mens. El rea de documentos Una vez estamos editando un documento, nos encontramos con el rea de documentos. El rea de documentos est dividida en cinco partes, de arriba a abajo: pestaas de archivos, documentos relacionados, modos de visualizacin, rea de edicin y explorador de jerarqua.
25/03/2010
Page 7 of 227
Las pestaas de archivos nos permiten alternar entre los documentos abiertos. El documento seleccionado aparece en gris claro mientras el resto aparecen sombreados. Si hay cambios no guardados en algn documento, el nombre del mismo aparece acompaado de un asterisco.
Los documentos relacionados se muestran en forma de lista y son todos aquellos que tienen una relacin de pertenencia con el documento actual. Este rea no muestra los documentos a los que enlaza el actual sino los que incluye, como las hojas de estilo o el cdigo javascript.
Los modos de visualizacin permiten configurar cmo se presentar el rea de edicin. Volveremos a ellos en la Seccin 5.1 Esta barra tambin incluye el ttulo de la pgina as como herramientas para la previsualizacin de la pgina, validacin de la web en varios navegadores, ayudas y guas, etc.
25/03/2010
Page 8 of 227
El rea de edicin es el lugar donde se desarrolla la mayor parte del trabajo. Es el rea destinada a realizar los cambios sobre el documento.
Por ltimo, el explorador de jerarqua es una estrecha barra situada entre el rea de edicin y los paneles inferiores. Su misin es la de reflejar el anidamiento entre las etiquetas del cdigo HTML y permitir seleccionar estas ltimas mediante un simple clic sobre cada una de ellas.
Los paneles inferiores
25/03/2010
Page 9 of 227
Entre los paneles del rea inferior se encuentra uno de especial importancia: el explorador de propiedades. Este panel permite modificar los parmetros de las etiquetas HTML de forma sencilla y visual.
Debajo de este ltimo encontramos algunos paneles de utilidad reunidos en una misma rea y diferenciados por medio de pestaas. Entre ellos destacan la referencia, el verificador de vnculos y el visualizador de informes.
Los paneles laterales Por defecto se dividen en tres grupos. El primero y superior es el panel insertar; a continuacin encontramos el panel con el inspector de estilos CSS y por ltimo, el explorador de archivos.
25/03/2010
Page 10 of 227
25/03/2010
Page 11 of 227
Insertar contiene los elementos HTML ms comunes y los clasifica mediante el men desplegable de su interior. A lo largo de este curso usaremos principalmente los elementos de Comn, Diseo y Formulario.
El Explorador de CSS nos permite acceder a las reglas CSS y editarlas cmodamente.
En la parte inferior, el Explorador de archivos para visualizar los documentos de tu sitio web y poder administrarlo.
25/03/2010
Page 12 of 227
Configuracin de Dreamweaver A lo largo del curso trabajaremos con HTML 4.01 estricto, que es la versin que la w3.org aconseja en estos momentos y que citaremos brevemente en la prxima Seccin. Vamos a configurar Dreamweaver para que use esta versin y de esta forma, cualquier nuevo documento que creemos, lo escribamos con esta versin. Para ello haz clic sobre la opcin preferencias... del men Edicin. Se desplegar un cuadro de dilogo como este:
25/03/2010
Page 13 of 227
En la lista de la izquierda selecciona Nuevo documento y ajusta las opciones para que se presenten como en la siguiente figura:
25/03/2010
Page 14 of 227
Cuando termines, pulsa aceptar. Atajos de teclado ms frecuentes NOTA: Cuando indiquemos un atajo de teclado utilizaremos el apcope ctrl para referirnos a la tecla control que puede encontrarse en la esquina inferior izquierda y derecha del teclado alfanumrico. Justo encima, encontramos la tecla shift (o mayus) que en muchos teclados est representada por una flecha ancha apuntando hacia arriba. Adems, a ambos lados de la tecla espacio encontramos las teclas alt y por ltimo, en la parte superior del teclado, las teclas de funcin que indicaremos mediante F1 a F12. Las combinaciones de teclas suponen apretar varias al mismo tiempo, esta simultaneidad la indicaremos mediante el signo +. As, por ejemplo, si queremos abrir un documento debemos pulsar ctrl + O, lo que significa que, mientras pulsamos la tecla control debemos pulsar tambin la letra O. El hecho de que en la combinacin, la letra O sea una mayscula es irrelevante. Men Funcin Nuevo documento Abrir documento Cerrar el documento actual Archivo Cerrar todos los documentos Guardar el documento actual Guardar y poner nombre Salir Deshacer Atajo ctrl + N ctrl + O ctrl + W ctrl + shift + W ctrl + S ctrl + shift + S ctrl + Q ctrl + Z
25/03/2010

Rehacer Cortar Copiar Edicin Pegar Seleccionar todo Seleccionar etiqueta padre Seleccionar hijo Buscar Buscar el siguiente Buscar el siguiente pero slo en la seleccin Ver Insertar Modificar Ocultar / mostrar los paneles laterales e inferiores Insertar imagen Insertar tabla Punto de anclaje con nombre Propiedades de la pgina Negrita nfasis o cursiva Formato Eliminar cualquier formato a un texto Convertir texto en prrafo Convertir en encabezados del 1 al 6 Comandos Ayuda Otros Corrector ortogrfico Ayuda de Dreamweaver Referencia de lenguajes Colocar archivos en el servidor Vista en vivo ctrl + Y ctrl + X ctrl + C ctrl + V ctrl + A ctrl + ctrl + ctrl + F F3 shift + F3 F4 ctrl + alt + I ctrl + alt + T ctrl + alt + A ctrl + J ctrl + N ctrl + I ctrl + 0 ctrl + shift + P ctrl + 1 a ctrl + 6 shift + F7 F1 shift + F1 ctrl + shift + U alt + F11
Page 15 of 227
1.3. Seccin 1.3 - Tendencias en el diseo web Seccin 1.3 - Tendencias en el diseo web
La evolucin del diseo web est marcada tanto por la evolucin del lenguaje HTML como por el impacto y popularizacin de los navegadores ms usados a lo largo de su historia. Desde su invencin a principios de los 90, el lenguaje HTML ha cambiado hasta alcanzar su cuarta versin y ya va camino de la quinta. Con cada versin, algunos elementos de HTML han quedado desfasados y otros nuevos han sido includos permitiendo nuevos tipos de estructuras en las pginas web. Adems, la invencin del lenguaje CSS y sus posteriores versiones permiti, al fin, separar la estructura de la representacin y de esta forma utilizar con mayor sentido, las caractersticas de las nuevas versiones de HTML. Por otro lado, la aparicin de navegadores ms respetuosos con los estndares del W3C como Chrome, Firefox u Opera han desterrado el uso de tecnologas propietarias como ocurra con Internet Explorer (que tena un conjunto de elementos HTML propios, por ejemplo) y han impulsado el uso de estndares. Por ltimo, teniendo en cuenta que cada vez son ms los usuarios que se conectan a Internet independientemente de su condicin fsica, la accesibilidad, es decir, la capacidad que tiene una pgina web para que pueda ser accedida por el mayor nmero de personas posible, cobra cada da ms importancia.
25/03/2010

Pginas lineales
Page 16 of 227
All por 1992, Tim Berners-Lee cre el primer sitio web (entendindose sitio como un conjunto de pginas pertenecientes a una misma unidad temtica) que versaba sobre el propio proyecto World Wide Web del que hablamos en la Seccin 1.1 Podis echarle un vistazo a este primer sitio web visitando los archivos histricos de la w3.org. Estn en ingls pero constituyen un recurso curioso, interesante y de lectura obligada para algunos de nosotros. Como puede observarse, los sitios web de hoy da han cambiado mucho respecto a los primeros. Existe en la actualidad una necesidad de dejar patente que las distintas pginas de un sitio web forman parte, de hecho, del mismo sitio web. De ah que dejemos una cabecera comn con el logotipo, o proporcionemos un men para visitar las distintas pginas del sitio, elementos que rodean o enmarcan el contenido, la verdadera informacin, de la pgina. Sin embargo, durante los primeros aos de la World Wide Web, el objetivo principal era transmitir informacin, por lo que las pginas carecan de una estructura intencionada siendo el flujo natural y lineal del texto la nica posible. As, las pginas lineales son aquellas que no presentan una estructura intencionada, siendo el flujo natural del texto, su nica estructura. Fueron bastante populares durante la experimentacin con el proyecto World Wide Web y antes de la publicacin de HTML 2.0 en 1995. No obstante, hoy en da, la linealidad ha vuelto a formar parte del diseo web, al menos durante un tiempo breve, hasta que los dispositivos mviles que permiten conectar a Internet se perfeccionen. Y es que muchas veces, la estructura de una pgina web, pensada paralos tamaos tpicos de los monitores de escritorio, no encaja bien con las minsculas pantallas de algunos de estos dispositivos, por lo que se agradece que las pginas puedan "linealizarse" de forma que el contenido adopte un flujo de arriba a abajo con la intencin tanto de caber mejor, como de mejorar la navegacin (dado que no disponemos de la libertad del ratn). Diseo con tablas y pginas ensambladas En noviembre de 1995 se publica HTML 2.0 y pocos meses despus, la w3c.org revisa la especificacin para aadir el elemento tabla. La inclusin de las tablas y su flexibilidad a la hora de combinar celdas y personalizar el estilo del borde, color de fondo y mrgenes entre celdas, hacen que las empresas, preocupadas por el diseo de sus sitios web y su imagen de marca, las adopten como plantilla para disponer el texto de diversas y novedosas formas nunca antes vistas en Internet, pero comnmente utilizadas en el diseo publicitario clsico. As, por ejemplo, dos columnas de una tabla permitan emular el texto de un peridico y un conjunto de filas permita huir del clsico diseo vertical propio de las pginas lineales. Adems, gracias a la posibilidad de ocultar los bordes de las tablas, se poda escapar de los diseos de ngulos rectos con poco ms que partir un diseo redondeado en rectngulos que cupiesen en las celdas de la tabla, como si de piezas de un puzzle se trataran, y posteriormente, ensamblando dichas piezas. Precisamente por este motivo, llamamos diseos con tablas, a aquellas pginas cuya estructura se soporta en el uso de una o ms tablas. Adems, dentro de los diseos con tablas, las pginas ensambladas son aquellas cuyo aspecto visual est formado por un nmero amplio de imgenes que encajan entre s en el interior de las celdas de una o ms tablas.
25/03/2010
Page 17 of 227
Observa como el diseo con tablas nos permite huir del diseo vertical y como las celdas (en la ilustracin resaltamos sus bordes en marrn y las numeramos) ocultan el hecho de que se trate de un ensamblado de imgenes rectangulares (una por celda). Slo las celdas 6 y 7 llevaran texto HTML con colores de fondo verde y blanco respectivamente. La moda de las pginas ensambladas continu pese a la creacin de los nuevos estndares HTML 3.2 y CSS 2, en 1997 y 1998 respectivamente. No sera hasta 1999, con la aparicin de HTML 4.01 que comenzara su lento declive. Gracias a la herramienta Wayback Machine de Internet Archive, podemos visualizar pginas web antiguas desde 1996.

disney.com en 1996 microsoft.com en 1996 sega.com en 1996 apple.com en 1997
25/03/2010

Page 18 of 227
gamespot.com en 1997 gm.com (General Motors) en 1997 adidas.com en 1998 coca-cola.com en 1998 nike.com en 1998
En la actualidad las pginas ensambladas han desaparecido casi por completo y el elemento tabla se utiliza para aquello para lo que fue propuesto: tabular datos como resultados de partidos, histricos de acciones, resmenes de anlisis, resumen de atajos de teclado (como el visto en la Seccin 1.2), etc. Conjuntos de marcos Al comenzar la Seccin 1.2 hablamos de cmo algunos navegadores aadan elementos HTML propios. As, el navegador Netscape Navigator, bastante popular durante la dcada de los 90, aadi el concepto de conjunto de marcos (frameset, en Ingls). Los conjuntos de marcos permiten dividir el espacio del navegador en regiones independientes, cada una mostrando contenido proveniente de una pgina web distinta. La intencin era la de desacoplar los elementos como el men lateral o la cabecera del sitio web, que nunca cambiaban, del contenido de la pgina que s cambiaba. De esta forma podamos ahorrarnos la tediosa tarea de reescribir el men y la cabecera de cada pgina. Netscape trat de aadir este elemento al estndar HTML 3 pero no fue hasta la versin 4 que se vera integrado. De todas formas, muy pocas pginas ofrecen diseos basados en conjuntos de marcos y la propia W3C los desaconseja. Actualmente, los programadores web usan lenguajes de programacin especiales para ensamblar las distintas partes invariables de una pgina web como la cabecera, el men o el pi de pgina. No obstante, existe un elemento similar a los conjuntos de marcos que permite incrustar el contenido de una pgina web en otra: son los llamados marcos interiores (inner frames, en Ingls) y se usan para "citar" pginas web, incrustndolas en el diseo de la pgina. Un buen ejemplo se encuentra en el buscador de imgenes de Google.
25/03/2010
Page 19 of 227
25/03/2010
Page 20 of 227
Esta pgina de resultados de la bsqueda de imgenes de Google es un buen ejemplo de frame interior. La banda de arriba muestra una previsualizacin e informacin sobre la imagen seleccionada. A la derecha de la banda puede leerse "Eliminar marco". Google "cita" el contexto de la imagen incrustando la pgina en un marco interior tras la banda de informacin. Diseo con capas o divs y CSS De nuevo, Netscape Navigator, en su versin 4, introdujo un elemento llamado capa orientado principalmente a los programadores web, pero con una gran flexibilidad en cuanto a posicionamiento y que adems, resultaba semnticamente neutro. Es decir, no induca ninguna norma sobre su contenido (como s puede hacerlo un prrafo, una imagen, una tabla o una cabecera) y los diseadores web podan usarlo como un elemento comodn para estructurar la pgina web con total libertad. Su versin estndar lleg de la mano de HTML 4.01, la ms reciente de las versiones HTML hasta el momento. En ella encontramos el elemento div a semejanza de la capa de Netscape Navigator. Como elemento semnticamente neutro, permitiera a los diseadores estructurar las pginas libremente adems de cubrir la carencia de elementos HTML como artculos, fechas, monedas, mens, citas bibliogrficas... permitiendo la creacin de elementos personalizados. Sin embargo, el estndar quera mantener separadas la estructura y el estilo por lo que las posibilidades de posicionamiento que tenan las capas se elimin del elemento HTML a favor del uso de CSS para controlar la apariencia de los div. De hecho, CSS es tan verstil en este sentido, que todo lo que poda hacerse con las capas de Netscape Navigator se sigue pudiendo hacer con una sabia combinacin de HTML y CSS. No obstante, los divs no han ocultado las funciones de los elementos clsicos como los prrafos o las tablas, solo actan como contenedores para ellos, tratando de hacer el cdigo ms estructurado. Por ejemplo, un div que represente un artculo contendra en su interior un encabezado, uno o varios prrafos de noticia y una lista de enlaces y referencias; otro div que represente un rea de cabecera podra incluir dentro otros divs, uno con una lista que represente el men de navegacin, otro para un formulario con un cuadro de bsqueda, otro con una tabla de estadsticas de las ltimas visitas...
25/03/2010
Page 21 of 227
Este es un artculo del blog tecnolgico maikelnai.es
25/03/2010
Page 22 of 227
Las lneas rojas de esta imagen representan las divisiones en elementos div y las etiquetas amarillas, los nombres de cada elemento (los nombres van precedidos de un punto). Cada artculo est formado por un div contenedor llamado hentry. En su interior hay otros dos, uno llamado entry-content que significa contenido de la entrada y rodea el texto y la imagen. El otro se llama entry-meta y contiene la fecha de publicacin, los comentarios y la categora de la noticia. La mezcla de HTML y CSS result ser tan potente que, para hacernos una idea, todo lo que poda conseguirse mediante el uso de tablas (diseos tabulados o pginas ensambladas), puede conseguirse ahora con el uso apropiado de divs y estilos sin tener que reinterpretar el significado del elemento tabla.
25/03/2010
Page 23 of 227
25/03/2010
Page 24 of 227
La pgina de hautes.mynes.free.fr es un ejemplo perfecto de diseo horizontal. Fjate en los recuadros de colores que exponen los divs. El conjunto de rectngulos para las pestaas o cmo se anidan los recuadros en el artculo como si se tratara de las celdas de una tabla. Pginas web comerciales o institucionales que hacen uso de CSS, secciones y capas.

http://www.w3.org/ http://es.wikipedia.org/ http://www.lastfm.es/ http://www.apple.com/itunes/ http://www.csszengarden.com/
Algunos impresionantes diseos hechos nicamente mediante el buen uso de CSS, secciones y capas.

http://www.vivabit.com/ http://tonyyoo.com/v2/ http://colourmod.com/ http://obuweb.com/ http://www.jek2k.com/ http://www.wallopcreative.com/
Recomiendo el blog de Romn Corts, tag de CSS para ver impresionantes efectos creados slo con HTML y CSS.
http://www.romancortes.com/blog/pure-css-coke-can/ http://www.romancortes.com/blog/css-paper-bird/ http://www.romancortes.com/blog/css-3d-meninas/
HTML 4.01: transitional, frameset y strict En la actualidad, HTML 4.01 es la versin ms reciente de HTML pero est dividida en tres (sub)versiones distintas: transitional (o "de trnsito"), frameset (basada en marcos) y strict (o estricta).
La versin transitional se creo para permitir que las pginas web antiguas se actualizasen con el mnimo esfuerzo, manteniendo la aceptacin y compatibilidad con caractersticas desfasadas de las versiones anteriores. La versin framset permita definir conjuntos de marcos. Por ltimo, la versin strict es la ms moderna y en la que la w3c.org aconseja que se escriban las pginas de nueva creacin. De hecho, es la versin que utilizaremos a lo largo del curso (y eso que no escribiremos una
sola lnea de cdigo a mano!) El futuro de HTML: HTML 5 La evolucin de internet, la llegada de la Web 2.0 y el uso de las nuevas tcnicas de diseo basadas en divs y CSS han puesto de manifiesto la necesidad de nuevos elementos HTML que reflejen la realidad de la web actual. En una Internet repleta de blogs y redes sociales, se hace necesario incluir elementos como artculo, men, moneda, fecha y otros que, hoy por hoy, son representados por los mismos patrones de divs y estilos CSS. Algunos de los elementos HTML que se incluirn en la prxima versin de HTML son los siguientes (extrado, traducido y adaptado de de http://www.ibm.com/developerworks/library/x-html5/)

seccin: una parte o un captulo de un libro, una seccin de un captulo o, en general, cualquier cosa que llevara asociada una cabecera en HTML 4 cabecera: la cabecera principal (y nica) de la pgina pie de pgina: el pie de pgina o la seccin de firma en los correos electrnicos navegacin: una coleccin de enlaces a otras pginas web artculo: una entrada independiente de un blog, diccionario, revista...
bloque al margen: una anotacin o informacin que no forma parte del flujo narrativo natural del texto (como la informacin de publicacin y los comentarios en la captura de la noticia del blog de maikelnai.es del apartado
anterior)
figura: imagen asociada a una descripcin o pie de imagen, como las utilizadas en los libros de texto o en los peridicos dilogos: para representar dilogos entre varios interlocutores texto marcado: se refiere a un texto resaltado pero no porque sea importante sino por que se desea resaltar algn uso del mismo (por ejemplo, considera el siguiente enlace en el que Google resalta el texto buscado dentro
de la pgina)
momento temporal o fechas: para indicar que el texto es un tiempo o una fecha medida: para expresar medidas progresos: para indicar que el texto representa el progreso de algn suceso detalles: un conjunto de datos que expresan informacin extra relacionada con otro elemento. Por ejemplo, los autores de una entrada en un blog.
25/03/2010

men: una lista de comandos como los que podemos encontrar en aplicaciones de escritorio como Word o Dreamweaver. Es el equivalente a las barras de mens y herramientas.
Page 25 of 227
Estamos seguros de que los lectores, usuarios corrientes de internet, encontrarn muchas de las inclusiones necesarias si se desea que HTML tenga la capacidad de expresar la Internet moderna. La accesibilidad tambin juega un papel muy importante en la evolucin de las tecnologas web y como veremos en la el ltimo apartado de esta seccin, el uso de las estructuras correctas para denotar el carcter del texto resulta vital de cara a hacer de una web un canal totalmente accesible. Accesibilidad Como dijimos hacia el principio de esta seccin, la accesibilidad es la capacidad de una pgina web para poder ser utilizada por el mayor nmero de personas. La w3c.org, preocupada por el creciente nmero de usuarios de Internet y la masificacin de este servicio, comienza en 1997 una iniciativa para hacer de las pginas web canales de informacin accesibles al mayor nmero de personas posible. Es entonces cuando el diseo web se torna ms estructurado y escrupuloso en cuanto al uso correcto de los elementos HTML. Por poner algunos ejemplos, piensa que, cuando una persona con problemas de visin accede a una pgina, nos conviene tener formas rpidas de cambiar el diseo de colores a una configuracin de alto contraste para que le sea mucho ms fcil visualizar el contenido. Esto se consigue mateniendo separadas la estructura del diseo mediante el uso en combinacin de HTML y CSS. Por otro lado, conviene emplear correctamente los elementos de imagen y tablas, suministrando la informacin alternativa necesaria para que los lectores de pantalla, empleados por las personas ciegas puedan interpretar la informacin correctamente. Por ltimo, piensa en los nuevos CAPTCHA, los tpicos campos de validacin donde se nos pide que introduzcamos una combinacin de nmeros y letras que vemos en una imagen, normalmente distorsionados y en varios colores. Este tipo de comprobaciones se realizan para asegurar que se trata de un usuario humano pero y si el usuario no puede ver el texto de validacin? Los nuevos CAPTCHA vienen acompaados de versiones de audio para usuarios parcialmente discapacitados. Actualmente, la w3c.org proporciona un documento de recomendaciones dividido en tres niveles para ayudar a los diseadores en la tarea de hacer accesibles sus pginas web.
2. Leccin 2 - El servidor web Leccin 2 - El servidor web

Requisitos previos
Una conexin a Internet Una cuenta de correo
Planteamiento de la leccin
Objetivos de la leccin 2
Familiarizar al estudiante con el modelo cliente-servidor Configurar un servidor gratuito en Internet
Secciones 1. 2. Qu es un servidor web? Contratacin de un servidor gratuito en Internet
Duracin estimada
25/03/2010

Entender los conceptos de la leccin y seguir el tutorial para contratar el servidor gratuito llevar de 1 a 2 horas.
Page 26 of 227
2.1. Seccin 2.1 - Qu es un servidor web? Seccin 2.1 - Qu es un servidor web?

El modelo cliente-servidor En realidad, toda la interaccin entre un usuario cualquiera e Internet es una comunicacin entre el ordenador del usuario y otro, situado en algn lugar del planeta. Por ejemplo, cuando desde nuestro navegador accedemos a http://www.google.es, nuestro ordenador llama a otro de Google y se establece una comunicacin entre ellos, de forma muy parecida a como lo haran dos personas que acaban de iniciar una conversacin telefnica. De esta forma, nuestro ordenador le pide entonces al de Google, que le mande la pgina web del buscador y el ordenador de Google responde, mandndosela. Este tipo de comunicacin, en la que un ordenador demanda un servicio y otro se lo proporciona es lo que se conoce como modelo cliente-servidor donde el cliente sera el ordenador que demanda y el servidor, el que proporciona o "sirve". El modelo cliente-servidor se encuentra presente en todos los servicios a travs de Internet y no slo en la visualizacin de pginas web. Por poner otro ejemplo: si consultamos un correo a travs de MS Outlook de nuestra cuenta en Hotmail, nuestro ordenador (o nuestro mvil por ampliar el ejemplo) se convierte en cliente y una mquina de Microsoft Hotmail nos proporciona, como servidor, el mensaje que queremos leer. Incluso si disponemos de videoconsolas con conexin a Internet y jugamos una partida online, nuestra consola, al igual que las del resto de jugadores, adopta el papel de cliente y se conecta con otra mquina que dirige la partida haciendo de servidor de juego. Esta comunicacin comienza por conocer con qu mquina se desea iniciar la conexin. Por poner una analoga sencilla, los ordenadores se localizan como las pginas de un teletexto o los telfonos, es decir, con nmeros. Estos nmeros son realmente agrupaciones de cuatro nmeros como 192.168.0.1 233.45.113.12 y se los llama direcciones IP. Como recordar una direccin IP podra resultar difcil, se invent un servicio web para asociar estos nmeros con nombres que no son ms que las clsicas direcciones web a las que estamos acostumbrados y que analizaremos en profundidad cuando hablemos de los enlaces en HTML. Entonces, cuando conectamos a http://www.google.es, nuestro ordenador le pregunta a una mquina (cuyo nmero ya conoce de antemano dado que es parte de la instalacin de Internet en nuestras casas) cul es el nmero asociado a esa direccin. La mquina responde y entonces comienza la verdadera peticin de pgina web a Google. La comunicacin consiste en una serie de intercambios de informacin hechos de una determinada forma y siguiendo ciertas reglas llamadas en conjunto protocolo de comunicacin. Cuando el cliente decide terminar la comunicacin, se "despide cordialmente" y cierra la conexin. El servidor web Un mismo ordenador puede cubrir muchos tipos de servicios distintos. Una sola mquina puede proporcionar pginas web, juego en red y correo, todo al mismo tiempo y cada servicio que pida un cliente a la misma mquina, ser atendido por un programa especializado en ese tipo de servicio. Cada uno de estros programas se llaman tambin servidores (no confundir con el rol servidor, del modelo cliente-servidor) y existen tantos como servicios de red: servidores de correo para la recepcin y envo de mensajes, servidores para traducir nombres a direcciones IP, servidores de pginas web, servidores para la trasferencia de archivos, servidores de juego en red, servidores de chat... Concretamente, el servidor web es el programa encargado de recibir las peticiones acerca de pginas web y enviar la pgina deseada como respuesta. Pginas web dinmicas Los servidores actuales no se dedican exclusivamente a recibir peticiones y devolver respuestas en forma de pginas web. Los servidores modernos, tras recibir la peticin de un cliente, manipulan la pgina con programas denominados intrpretes y la transforman en funcin del momento actual, de la persona que pida la pgina, de la informacin contenida en una base de datos, etc, para luego ofrecrsela al cliente. Por ejemplo, imagina que accedes a: http://www.misrinconesfavoritos.com/misfavoritos.html Supongamos que Mis Rincones Favoritos es un sitio web que nos permite buscar fotografas de lugares extraordinarios del mundo y marcarlos como favoritos. Accedemos a la pgina misfavoritos.html que contiene una pgina plantilla para mostrar las fotografas que has marcado como preferidas. Est claro que tus preferencias sern distintas a las de otros usuarios por lo que el servidor, antes de entregar la pgina, usa el intrprete para completar la plantilla consultando una base de datos que guarda tus fotografas favoritas y luego, enva la pgina personalizada a tu ordenador. Este tipo de pginas reciben el nombre de dinmicas puesto que el contenido es variable en contraste con las pginas estticas en las que el contenido es siempre el mismo independientemente de la situacin. Actualmente en la red cuesta encontrar sitios estticos y hay muchos ejemplos de contenido dinmico como los blogs, los foros o las pginas personales en las redes sociales. Sin embargo, las pginas con informacin general como las de colegios, ayuntamientos o normativas oficiales son ejemplos de contenido esttico.
25/03/2010

Page 27 of 227
2.2. Seccin 2.2 - Contratacin de un servidor gratuito en Internet Seccin 2.2 - Contratacin de un servidor gratuito en Internet
Hosting o alojamiento en Internet Host es la palabra inglesa para anfitrin. En el mbito de las pginas web, el hosting o alojamiento representa el hecho de albergar contenido web dentro de un ordenador. Por lo general, abrir una pgina web al pblico involucra dos actividades: por un lado encontrar un lugar dnde guardar nuestra pgina web que est perpetuamente conectado a Internet y por otro, comprar una direccin web de nuestro agrado para asignarla a la direccin IP de esa mquina. Para poder ofrecer una experiencia de diseo realista, vamos a contratar un alojamiento gratuito que, adems, nos proporcionar una direccin web tambin gratuita desde la que podremos visitar nuestras pginas web. El alojamiento en Zobyhost.com Zobyhost ofrece alojamiento gratuito de pginas web muy fcil de contratar y configurar: perfecto para nuestro curso. Los aspectos ms importantes del servicio son:
1GB de espacio, es decir, que el contenido total (imgenes, videos, cdigo HTML y CSS) de nuestras pginas no puede superar un gigabyte de tamao. Ms que suficiente para nuestros propsitos. 30GB de transferencia mensual, o dicho de otra manera, el nmero de veces que nuestra pgina podr ser visualizada en un mes. Esto depende tambin del tamao de nuestras pginas pero 30GB es ms que suficiente Acceso FTP. FTP es un protocolo, un mtodo, para transferir archivos a travs de Internet. Gracias a FTP podremos copiar la pgina web que diseemos en nuestros ordenadores al ordenador de Zobyhost que aloja nuestra
para comenzar.
pgina. Para ello, al contratar el servicio se nos proporcionar una direccin web, un nombre de usuario y una contrasea que utilizaremos para cargar los archivos.
No tiene publicidad. Es decir, que no insertar publicidad en nuestras pginas.
NOTA: Recomendamos Zobyhost porque es fcil y potente pero si conoces otro servicio de hosting que te guste ms eres libre de contratarlo por tu cuenta. Asegrate no obstante de que te proporcionan una cuenta FTP. Contratacin del servicio Es bastante importante que uses un navegador completamente actualizado para realizar la contratacin. Desde aqu recomendamos Firefox o Chrome. Ahora bien, lo primero que haremos ser hacer clic en el botn "Crear Nueva Cuenta", situado en la cabecera de Zobyhost. Abajo encontraremos un botn que dice "Continuar con el registro >>>" as que lo pulsaremos para poder comenzar el proceso.
25/03/2010
Page 28 of 227
25/03/2010

El botn de "Crear Nueva Cuenta" se encuentra justo debajo de la imagen del monitor y el de "Continuar con el registro >>>>" en la parte inferior de la pgina, en el cuadro de contenido.
Page 29 of 227
El formulario de registro es muy sencillo e incluye muy pocos pasos. Lee detenidamente las instrucciones y completa cada campo. Proporciona una direccin de correo electrnico vlida porque ser all donde se te enven los datos de acceso de tu alojamiento. El campo subdominio se refiere al nombre de tu espacio web. Ten en cuenta que cuando completes el registro tu direccin web ser de la forma http://nombre-elegido.zobyhost.com
25/03/2010
Page 30 of 227
25/03/2010
Page 31 of 227
Rellena el formulario de registro con tus propios datos. Recuerda escoger un subdominio e incluir una direccin de correo electrnico vlida porque all se te enviarn los datos de tu cuenta. Cuando termines y hayas aceptado los trminos y condiciones de uso podrs continuar con la creacin de la cuenta haciendo clic en el botn "Crear". El formulario desaparecer y tendremos que hacer clic sobre el botn "Click Me To Continue" para continuar. Ahora introduce las dos palabras que aparecen en el cuadro que pone Image Verification y haz clic en "Register" para terminar de crear la cuenta.
25/03/2010
Page 32 of 227
25/03/2010

Introduce las dos palabras que aparecen en la imagen
Page 33 of 227
Hecho esto nos avisarn de que un mail de confirmacin se ha envado a nuestro correo electrnico. Tendremos que localizar este mensaje (cuidado, puede estar en spam) y hacer clic en la direccin que nos proporciona, tras las palabras "by simply clicking here". De nuevo tendremos que introducir dos palabras en otra verificacin y hacer clic en "Register"
25/03/2010
Page 34 of 227
25/03/2010

De nuevo, introduce las dos palabras para poder continuar.
Page 35 of 227
Hemos terminado el registro y se nos muestra un resumen con los datos de nuestra cuenta. Podemos imprimir esta pgina o descargarla aunque Zobyhost nos enviar un mail con la misma informacin. Conviene tener a mano los datos FTP user name, FTP password, FTP host name y Your domain name porque los usaremos en la siguiente leccin.
25/03/2010
Page 36 of 227
25/03/2010

Puedes imprimir la pgina o descargarla en formato PDF aunque Zobyhost te habr enviado un mail con los mismos datos. Comprobar que todo funciona
Page 37 of 227
Escoge cualquiera de las direcciones que te proporcionaron en el campo Your domain name e introdcela en tu navegador, en nuestro caso cursodreamweaver.zobyhost.com o www.cursodreamweaver.zobyhost.com. Debera aparecer una pgina web de prueba, avisndote de que tu cuenta ha sido creada con xito.
25/03/2010
Page 38 of 227
25/03/2010

Si puedes visualizar esta pgina o una muy similar es que hemos creado nuestra cuenta satisfactoriamente. Enhorabuena, has configurado tu alojamiento web y ahora el servidor web puede ser accedido con esa direccin.
Page 39 of 227
A continuacin debes realizar un sencillo examen. Son unas cuantas preguntas sobre lo que has aprendido en las dos primeras lecciones. Te permitimos que falles dos. Si fallas ms, debers repetir el examen. Puedes realizarlo tantas veces como quieras. Cada vez que respondas a una pregunta debes pulsar el botn "Guardar respuesta" antes de pasar a la siguiente pregunta. IMPORTANTE: Cuando pulses el botn para empezar el examen, se abrir una nueva ventana (o pestaa) en la que se encontrar el examen. No cierres ni cambies de pgina en la ventana o pestaa anterior, pues cuando hayas terminado el examen ser ah donde podrs ver la puntuacin obtenida. Suerte!
3. Leccin 3 - Sitios web con Dreamweaver Leccin 3 - Sitios web con Dreamweaver
Requisitos previos
Estar familiarizado con el entorno de Dreamweaver (Leccin 1) Entender el modelo cliente-servidor (Leccin 2) Tener un alojamiento web y una cuenta FTP (Leccin 2)
Planteamiento
Ensear al estudiante el significado de sitio web Familiarizar al alumno con el ciclo de vida de un sitio web Ensear a sincronizar un servidor remoto respecto de uno local
Secciones 1. 2. 3. El asistente de sitios web Las vistas del sitio web Sincronizacin con el servidor
Duracin estimada El estudio de este tema requiere cierta atencin por lo que se recomienda abordarlo en 2 sesiones de 1 a 2 horas.
3.1. Seccin 3.1 - El asistente de sitios web
25/03/2010

Seccin 3.1 - El asistente de sitios web
Page 40 of 227
Sitios web
Hasta ahora hemos hablado de disear pginas web. Sin embargo, normalmente lo que se disea es un sitio web. Los sitios web son conjuntos de pginas relacionadas por un tema o un objetivo. Por ejemplo, visitando el sitio web de Apple encontramos muchas pginas web con informacin sobre los productos de la empresa que, adems, comparten un diseo semejante y uniforme marcando de esta forma una identidad, lnea o imagen de marca caracterstica. A lo largo de este curso, disearemos un sitio web sobre nosotros mismos, lo que suele llamarse una pgina personal. No obstante, como vamos a involucrar muchas pginas y tenemos nuestra propia direccin en Zobyhost (ver Leccin 2), diremos ms correctamente que vamos a disear nuestro sitio web personal. El asistente de sitios web Pasemos por fin a Dreamweaver: abre el programa y observa el rea de trabajo. Repasa la Leccin 1 para familiarizarte con la interfaz del programa. Vamos a configurar un sitio web llamado Mi Sitio Web. Localizamos primero el Explorador de archivos que se encuentra a la derecha y abajo.
Hacemos clic en Administrar sitios para acceder a la ventana de administracin de sitios web. Tambin podemos desplegar el cuadro de seleccin y hacer clic en la ltima opcin.
25/03/2010
Page 41 of 227
La ventana de administracin de sitios web muestra un listado de nuestros sitios web y tiene la siguiente apariencia:
Hacemos clic en Nuevo... y luego en Sitio para mostrar la ventana de configuracin de sitios web. Debemos asegurarnos de que estamos en la pestaa Bsicas para poder realizar el asistente (en caso contrario, se mostraran las opciones avanzadas y no veramos el asistente). Te recomendamos que leas el tutorial primero antes de llevarlo a cabo por ti mismo.
25/03/2010

1.
Page 42 of 227
En el primer cuadro de texto introduce el nombre del sitio web. En el ejemplo, MiSitioWeb. Y en el segundo, introduce la direccin web que te proporcion Zobyhost para tu alojamiento, http://cursodreamweaver.zobyhost.com, en este caso. Es muy importante que no olvides poner "http://" al comienzo de la direccin. Cuando termines, haz clic en el botn Siguiente para continuar.
2.
En la siguiente pgina nos dan a elegir una tecnologa de servidor. No queremos trabajar con ninguna de ellas as que dejamos marcada la primera opcin. De nuevo, hacemos clic en el botn Siguiente para continuar.
25/03/2010
Page 43 of 227
3.
En el siguiente dilogo debemos seleccionar dnde guardar las pginas web de nuestro sitio web. Si seleccionamos la opcin recomendada, editar copias locales en mi mquina y luego cargarlas al servidor cuando estn listas, Dreamweaver nos propone una ruta por defecto dentro de Mis Documentos. Dejaremos la opcin por defecto. Conviene recordar la direccin para poder localizar los archivos desde el explorador de Windows.
25/03/2010
Page 44 of 227
4.
Ahora necesitamos los datos de la cuenta FTP que nos proporcion Zobyhost. Para empezar, abriremos el cuadro desplegable y seleccionaremos FTP. En el primer campo pegaremos el dato proporcionado en FTP host name; en el segundo escribiremos htdocs, que es la carpeta, dentro del servidor de Zobyhost, donde se guardarn las pginas; en el tercero hay que copiar el contenido de FTP user name y en el ltimo, el de FTP password. Como consejo, conviene marcar la opcin Guardar, situada a la derecha del campo de contrasea, para que Dreamweaver la introduzca automticamente al cargar archivos en el servidor.
25/03/2010
Page 45 of 227
5.
Antes de hacer clic en continuar probaremos la conexin haciendo clic en el botn Conexin de prueba. Puede tardar unos segundos pero si lo hemos hecho todo bien, al poco tiempo aparecer una ventana de confirmacin diciendo que hemos tenido xito en la conexin. Ya puedes aceptar el dilogo y continuar haciendo clic en Siguiente.
25/03/2010

6.
Page 46 of 227
Si fueras a trabajar en equipo para crear un sitio web, sera peligroso dejar que dos personas pudieran editar la misma pgina al mismo tiempo. Dreamweaver puede llevar el control de quin est editando cada archivo en cada momento para bloquear el acceso a otros usuarios. Si queremos activar esta caracterstica marcaremos la primera opcin. En este caso vamos a marcar la segunda ya que no necesitamos coordinarnos con nadie. Haz clic en Siguiente para pasar a la pgina de resumen.
7.
En la pgina de resumen se presentan las decisiones tomadas durante el asistente. Hacemos clic en Completado para finalizar el asistente.
25/03/2010
Page 47 of 227
El administrador de sitios web mostrar ahora el nuevo sitio entre los disponibles. Nos aseguramos de que lo tenemos seleccionado y haremos clic en Listo para terminar.
25/03/2010
Page 48 of 227
Si observamos ahora el Explorador de archivos veremos que ha cambiado a la vista de exploracin de archivos del sitio web. La raz del sitio es una carpeta verde etiquetada como Sitio - MiSitioWeb seguida de la ruta dnde se guarda el sitio web.
Si queremos volver al administrador de sitios web, debemos acceder a l mediante la ltima opcin del cuadro desplegable del Explorador de archivos. El otro cuadro desplegable, donde podemos leer Vista local, muestra las vistas
25/03/2010

del sitio web, las cuales detallaremos en la Seccin 3.2.
Page 49 of 227
3.2. Seccin 3.2 - Las vistas del sitio web Seccin 3.2 - Las vistas del sitio web
Un sitio web de prueba Asegrate de que tienes seleccionado el sitio web en el panel Archivos. Si no es as, despliega el cuadro desplegable y busca el nombre de tu sitio web. De nuevo asegrate que el otro cuadro desplegable est en Vista local. Ahora haz clic derecho sobre la carpeta verde y selecciona Explorar... en el men desplegable. Esto abrir un explorador de Windows situado all donde guardars tus pginas. Descarga las pginas de prueba y descomprime el archivo ZIP en ese lugar. En Dreamweaver, haz clic en el botn Actualizar (el icono que tiene forma de flecha circular, curriculum.html. ) y asegrate de que se muestran todos los archivos que hemos descomprimidos: index.html, datos.html, contacto.html,
25/03/2010

La vista local
Page 50 of 227
La vista local muestra, en forma de rbol, el listado de los archivos que forman nuestro sitio web en nuestro ordenador. No slo las pginas sino tambin las imgenes, archivos comprimidos y subcarpetas del sitio. Para acceder a ella basta seleccionar la opcin Vista local en el cuadro desplegable de la derecha, en el Explorador de Archivos.
La vista local recibe este nombre aludiendo a nuestro ordenados al que llama servidor local o mquina local en contraste con el servidor remoto o mquina remota que sera la de Zobyhost. La vista remota La vista remota tambin muestra el listado de los archivos que forman nuestro sitio web pero en el servidor de Zobyhost. A este servidor se le llama comnmente servidor remoto. Podemos activar esta vista seleccionando Vista remota en el cuadro desplegable. Antes de ver ningn archivo debemos conectar con el servidor, lo que haremos haciendo clic en el botn Conectar al servidor remoto, . Pasados unos segundos se mostrarn los archivos del servidor que, como podremos
comprobar, no coinciden con los de la vista local. Cuando esto ocurre, decimos que el servidor est desincronizado respecto de nuestro ordenador. Aprenderemos a sincronizarlo en la Seccin 3.3.
25/03/2010
Page 51 of 227
Otras vistas El cuadro desplegable incluye dos vistas ms el Servidor de pruebas y la Vista de base de datos. No vamos a ver ninguna de las dos porque quedan fuera del alcance de este curso.
3.3. Seccin 3.3 - Sincronizacin con el servidor Seccin 3.3 - Sincronizacin con el servidor
El ciclo de vida del sitio web Idealmente, un buen entorno de diseo consta de tres partes: un ordenador de desarrollo, un servidor de pruebas y otro de publicacin. La idea es disear y programar el sitio web en el equipo de desarrollo, comprobar su funcionamiento en el servidor de pruebas y tras constatar que todo funciona, trasladarlo al servidor de publicacin para darlo a conocer en Internet. El ciclo de desarrollo consta de las siguientes fases:
25/03/2010

1. 2. 3. 4. 5.
Page 52 of 227
Elaboracin del diseo del sitio web y creacin del mismo en el equipo de desarrollo. Sincronizacin con el servidor de pruebas. Esto es, hacer que el servidor de pruebas obtenga una copia actualizada de los archivos de desarrollo de forma que puedan probarse como un sitio web corriente. Validar que todo funciona correctamente. Si no es el caso, corregir en el equipo de desarrollo y volver al punto 2. Sincronizacin con el servidor de publicacin.
Como dijimos en la Seccin 3.2, nosotros no utilizaremos servidor de pruebas pero s servidor de publicacin, que ser nuestro servidor remoto de Zobyhost. Sincronizacin del servidor remoto Vamos a sincronizar el servidor de pruebas con nuestro equipo de desarrollo. Es decir, haremos que se copien las versiones ms recientes de nuestros archivos al servidor remoto. Como esta es la primera vez que sincronizamos, se copiarn todos los archivos. En futuras ocasiones, slo los archivos que hayan sufrido cambios sern actualizados. Para ello, en cualquiera de las vista, debemos hacer clic en el botn Sincronizar (las dos flechas en crculo, ) lo que mostrar el cuadro de dilogo Sincronizar archivos.
En l podemos especificar qu queremos sincronizar seleccionando la opcin oportuna en el cuadro desplegable Sincronizar. Tambin podemos indicar el tipo de operacin en el cuadro desplegable Direccin. En el cuadro desplegable Sincronizar elegiremos Todo el sitio 'MiSitioWeb' indicando de esta forma que queremos cargar todo el sitio. En Direccin especificaremos Colocar archivos ms nuevos en remoto para decir as que el servidor remoto debe quedar como nuestra carpeta local. Por ltimo marcamos la opcin Eliminar archivos remotos no existentes en la unidad local para destruir del servidor todo aquello que no est en nuestro ordenador. Cuando hayas configurado el dilogo como en la imagen, haz clic en Vista previa... lo que mostrar un nuevo dilogo.
25/03/2010
Page 53 of 227
El dilogo de Vista previa nos informar de las operaciones que van a llevarse a cabo tanto en nuestro ordenador como en el ordenador remoto. Slo si estamos conformes, podremos terminar la sincronizacin haciendo clic en Aceptar. 3.3.1 - Ejercicio: nuevo archivo y sincronizacin con el servidor remoto Debes crear una nueva pgina web, para ello ve a la vista local y haz clic con el botn derecho sobre un espacio en blanco del rbol de archivos. Selecciona la primera opcin, Nuevo archivo y vers que aparece un nuevo archivo en el rbol. Dale el nombre de fotos.html y pulsa intro para aceptar el nombre. Ahora sincroniza con el servidor remoto de la misma forma que acabamos de hacerlo. Configura la sincronizacin como en el ejemplo anterior y observa la vista previa. Asegrate de que entiendes lo que va a ocurrir y haz clic en Aceptar para terminar.
Sincronizacin de archivos individuales Es comn que en diseo nos encontremos realizando pequeas modificaciones sobre un mismo archivo. En este caso nos puede interesar una forma rpida de cargar las ltimas modificaciones en el servidor remoto sin tener que pasar por la vista previa de una sincronizacin completa. Para ello utilizaremos el botn Colocar, , a la izquierda del de sincronizacin o el atajo de teclado ctrl + shift + U.
Si utilizamos el botn, debemos asegurarnos primero de que estamos en la vista local y el archivo que queremos cargar est seleccionado en el rbol de archivos. Si utilizamos el atajo de teclado, basta que estemos editando el archivo. Antes de completar la sincronizacin se nos preguntar por primera vez si, adems de cargar este archivo, queremos cargar los archivos dependientes de l. Podemos responder s o no y marcar la casilla No volver a mostrar este mensaje. En cualquier momento podemos cambiar esta opcin en las propiedades avanzadas del sitio web.
25/03/2010

Mi recomendacin es escoger S y marcar la casilla, dado que slo deberamos cargar archivos al servidor remoto cuando estuviramos seguros de su correccin. 3.3.2 - Ejercicio: sincronizacin del archivo fotos
Page 54 of 227
Haz doble clic sobre el archivo fotos.html del ejercicio anterior y se abrir el rea de edicin. Escribe cualquier cosa en su interior y guarda el archivo mediante la combinacin de teclas ctrl + S o haciendo clic en la opcin Guardar del men Archivo. Ahora utiliza la combinacin de teclado ctrl + shift + U para sincronizar slo ese archivo.
Prueba de la pgina web Prueba a cambiar a la vista local y haz doble clic sobre index.html para abrir el archivo en el rea de edicin. Ahora pulsa F12 o utiliza el icono de vista previa (el icono del mundo, en la barra de herramientas del rea de edicin, ). Se abrir una ventana de nuestro navegador por defecto con la pgina web. Esta ser la forma de probar nuestra pgina web antes de subirla al servidor remoto.
25/03/2010
Page 55 of 227
25/03/2010

Vista de la copia local de index.html en el navegador. Fjate en la direccin del navegador.
Page 56 of 227
Si queremos probar cmo se ve nuestra pgina en Internet, tendremos que sincronizar el sitio y luego abrir un navegador e introducir la direccin web que nos proporcion Zobyhost. Si no fuera necesario sincronizar, Dreamweaver nos avisara de ello.
25/03/2010
Page 57 of 227
25/03/2010

Vista de la copia remota de index.html en el navegador. Fjate en la direccin del navegador para apreciar que nos encontramos en el servidor de Zobyhost. 3.3.3 - Ejercicio: acceder remotamente a las pginas del sitio web
Page 58 of 227
Abre un navegador de internet e Introduce tu direccin web y al final de la misma aade una barra (si no hay una ya) y a continuacin escribe fotos.html Presiona intro y comprueba que accedes a la pgina de fotos. Puedes utilizar esta tcnica para acceder a todos los archivos:

index.html* datos.html curriculum.html contacto.html fotos.html
*No es necesario poner nada si queremos acceder a index.html. El servidor cargar un archivo que se llame index.html si no se proporciona ninguno.
3.3.4 - Ejercicio: Envanos la direccin de tu sitio web En esta leccin slo tienes que enviar un mensaje de correo a tu tutor, usando la herramienta de Comunicacin con tutor, con la direccin web de tu sitio (por ejemplo, http://javiersancho.zobyhost.com). La usaremos para comprobar cmo va quedando tu sitio a lo largo del curso.
4. Leccin 4 - Elementos de texto HTML y el color en CSS Leccin 4 - Elementos de texto HTML y el color en CSS
Planteamiento Requisitos previos
Estar familiarizado con el entorno de Dreamweaver (Leccin 1) Saber sincronizar el servidor remoto (Leccin 3) Conocimientos bsicos sobre procesadores de textos

Mostrar al estudiante los diferentes tipos de bloques de texto Ensear al estudiante a estructurar la pgina web mediante los encabezados Familiarizar al estudiante con los estilos CSS Ensear al estudiante a aplicar el formato oportuno de acuerdo con el carcter del texto Iniciar al estudiante en la creacin de estilos CSS mediante el color
Secciones 1. 2. 3. Encabezados, prrafos y listas Estilos HTML CSS bsico: colores en el texto
Duracin estimada De nuevo, se recomienda abordar la leccin en dos sesiones de 1 a 2 horas cada una.
25/03/2010

Page 59 of 227
4.1. Seccin 4.1 - Encabezados, prrafos y listas Seccin 4.1 - Encabezados, prrafos y listas
Las vistas de la pgina web Dreamweaver nos permite editar documentos HTML de tres formas: modificando el diseo, alterando el cdigo, o utilizando una vista hbrida que nos permite manipular diseo y cdigo al mismo tiempo. En este curso utilizaremos principalmente la vista de diseo pero el alumno que desee indagar en los entresijos de la creacin de pginas web puede utilizar la vista mixta para hacerse una idea de cmo el diseo se traduce a cdigo. Adems de las vistas de edicin, Dreamweaver CS4 introduce un nuevo tipo de vista a la que denomina Vista en vivo que permite visualizar la pgina como si la visitramos desde el navegador pero sin salir de Dreamweaver. Para conocerlas, asegrate de que tienes seleccionado el proyecto MiSitioWeb en el explorador de archivos y que te encuentras en la vista local (la de las carpetas en verde). Ahora haz doble clic sobre el archivo datos.html para que aparezca el rea de edicin. Deberas ver algo como esto:
25/03/2010
Page 60 of 227
Fjate como encima del rea de edicin encontramos cuatro botones: Cdigo, Dividir, Diseo y Vista en vivo, visualizacin de los que acabamos de hablar y que detallamos a continuacin:
. Estos botones permiten alternar entre los cuatro tipos de
Vista de edicin de cdigo. Esta vista nos permite ver el cdigo de la pgina tal y como se transmitir hasta el navegador. La vista de cdigo resalta los elementos de HTML para ayudar al programador web a distinguirlos
del texto. A este tipo de ayuda visual se la llama resaltado de sintaxis. No utilizaremos esta vista dentro del curso.
25/03/2010
Page 61 of 227
Vista en modo mixto o Dividir. El modo Dividir parte el rea de edicin en dos mitades. La mitad superior muestra el cdigo HTML mientras que la inferior muestra el rea de diseo donde el cdigo HTML se interpreta
como si se tratara de un navegador web. Durante este curso utilizaremos tan slo el rea inferior o de diseo pero como ya hemos dicho, el alumno que lo desee puede usar esta vista si desea indagar en los principios del HTML.
25/03/2010
Page 62 of 227
Vista en modo Diseo. El ltimo modo de edicin oculta completamente el cdigo dejando tan slo el rea de diseo. Como acabamos de decir, el rea de Diseo trata de interpretar el cdigo HTML como si se viera
directamente en un explorador. Este es el modo sobre el que se debera realizar el curso.
25/03/2010
Page 63 of 227
Vista en vivo. Como hemos dicho, en este modo, propio de Dreamweaver CS4, podemos visualizar la pgina web como si la viramos en el navegador por defecto pero sin salir de Dreamweaver. Es especialmente til
durante el desarrollo pero debe desactivarse antes de poder seguir editando la pgina con normalidad. Podemos entrar y salir de la vista en vivo mediante la combinacin alt + F11.
25/03/2010
Page 64 of 227
Los encabezados Fjate en el ttulo de esta pgina web, en l puede leerse "Seccin 4.1 - Encabezados, prrafos y listas". Fijate adems en el ttulo de este apartado o del anterior donde pona "Las vistas de la pgina web". Ambos son ejemplos de encabezados o ttulos. Los elementos encabezado se utilizan para dividir un texto en secciones, como ocurre con los captulos de un libro de texto o los apartados de una ley, por ejemplo. La seccin de texto comienza en el encabezado y termina en el final de la pgina o en el siguiente encabezado. Para convertir un texto en encabezado basta cambiar su propiedad Formato a Encabezado 1 en el panel de propiedades. NOTA: A lo largo de los ejercicios, no te preocupes si tus resultados no quedan igual que en los ejemplos en cuanto a espacios y colores se refiere. Es nomal, puesto que aun no hemos aprendido a usar estilos CSS. No obstante, este curso s los usa internamente. 4.1.1 - Ejercicio guiado: definir un encabezado para datos.html
25/03/2010
Page 65 of 227
Vamos a modificar la pgina web datos.html. Si no la tienes abierta ya, abre este archivo haciendo doble clic en el l desde el explorador de archivos. Asegrate de que la vista seleccionada se encuentra en diseo para que el cdigo HTML no aparezca. Selecciona el contenido de la pgina web y suprmelo con la tecla suprimir o borrar de tu teclado.
Ahora escribe un encabezado para esta pgina que hablar un poco de nosotros mismos. Por ejemplo, escribe el texto "Sobre m" (sin las comillas). Luego haz clic sobre la palabra "mi" para colocar el cursor en la lnea de texto del encabezado y cambia su propiedad Formato situada en el panel Propiedades (bajo el rea de edicin) a Encabezado 1.
Notars que su tamao cambia y se convierte en negrita. Este es el estilo por defecto de los encabezados de nivel 1.
Niveles de encabezados HTML nos permite definir ttulos de hasta nivel 6. Cuanto mayor sea el nivel, ms especfica deber ser la seccin que represente. Por norma general, los encabezados de nivel 2 representan subsecciones de los encabezados de nivel 1 y los encabezados de nivel 3, representan subsecciones de los de nivel 2. Por ejemplo, en las pginas del curso slo hay un encabezado de nivel 1 siendo el nombre de la Seccin. Cada apartado (subrayado por una lnea gris discontinua) es un encabezado de nivel 2 y los ttulos de los ejercicios son encabezados de nivel 3. 4.1.2 - Ejercicio guiado: planificacin de la pgina datos.html Vamos a continuar editando la pgina datos.html. En el ejercicio anterior hemos includo una cabecera de nivel 1 con el texto "Sobre m". A continuacin escribiremos un texto con una breve autobiografa y completaremos la informacin con nuestros datos de contacto y gustos y aficiones tales como nuestros grupos, pelculas o novelas preferidas. Esto mismo, esquematizado, queda como sigue:
25/03/2010

Sobre
Page 66 of 227
m Autobiografa Datos de contacto Gustos y aficiones Literatura Msica Cine
Del esquema podemos diferenciar tres niveles de encabezados: un encabezado de nivel 1 (Sobre m), tres encabezados de nivel 2 (Autobiografa, Datos de contacto y Gustos y aficiones) y otros tres de nivel 3 (Literatura, Msica y Cine). Escribe los ttulos de los encabezados en lneas distintas pulsando la tecla enter al final de cada ttulo. A continuacin haz clic en cualquier palabra de cada uno de los encabezados aplicando el formato correspondiente.
Aade adems otros gustos y aficiones personales (deporte, cocina, maquetismo, videojuegos...) si lo deseas o elimina alguno de ellos si no te interesa. Decir que un texto es un encabezado indica que se abre una nueva seccin de la pgina web. El elemento encabezado no tendra porque aplicar ningn estilo al texto pero, como dijimos, la w3c.org define una manera por defecto de representar cada elemento, sin que tengamos que definirlo explcitamente con CSS. As, parece que resulta tentador utilizar ttulos para aumentar o decrementar el tamao de la fuente del texto, pero lo aprendido en la Leccin 1 debera servirnos para saber que al marcar un texto como encabezado estamos estructurando la pgina web. Hablaremos del diseo en las Lecciones 6 y 7. Podemos usar las combinaciones de teclado ctrl + 1 a ctrl + 6 para convertir un prrafo en los encabezados de nivel 1 al 6 respectivamente. Tambin podemos usar ctrl + shift + P para convertir un encabezado de cualquier nivel en un prrafo corriente. El ttulo de la pgina web Si bien no es una cabecera, en los navegadores es comn encontrar un ttulo para la pgina web que aparece en la pestaa o la barra de ttulo. Este ttulo puede especificarse en el campo ttulo, situado tras el botn de vista en vivo y cdigo en vivo.
Basta escribir las palabras que queramos que formen el ttulo de la pgina y pulsar enter. NOTA: De ahora en adelante, recuerda guardar tus cambios con frecuencia. Utiliza la opcin Guardar del men Archivo o utiliza la combinacin de teclas ctrl + S. El prrafo
25/03/2010
Page 67 of 227
En Dreamweaver podemos iniciar un nuevo prrafo pulsando enter al trmino de otro. Advierte que, como ocurre en los procesadores de texto, no es necesario incluir saltos de lnea intermedios para ajustar el texto dado que este se amolda automticamente a las dimensiones de la ventana del navegador como veremos en breve. 4.1.3 - Ejercicio guiado: escribiendo la autobiografa Introduce una nueva lnea tras el encabezado de nivel 2 y trata de, en 6 7 lneas, escribir una corta autobiografa. Algo como esto: Nac en Valencia pero, debido a los continuos traslados de mis padres, me he criado en Murcia, en un pueblo costero llamado San Javier, cerca del Mar Menor. All pas 12 aos hasta terminar el bachiller momento en el cual me mud a Madrid para estudiar Informtica. Durante dos aos viv en un colegio mayor hasta que mis padres se trasladaron por fin aqu. Ahora me encuentro terminando mi carrera Universitaria y planeo realizar mis estudios de mster y doctorado en el extranjero. Asegrate de que su formato es prrafo y no encabezado mediante el men desplegable del panel Propiedades. Debera aparecer como Prrafo, si no es as, cambialo.
Ampla tu biografa incluyendo un prrafo ms como este: Durante mi estancia en Madrid obtuve mis primeros trabajos como programador web en empresas de soluciones financieras y seguridad biomtrica. Tambin he impartido cursos y he sido presidente de una asociacin cultural llamada MFS. Un prrafo aporta algunas caractersticas al texto que lo distinguen de otros formatos:
Como en los encabezados y en la mayora de los elementos HTML, la distancia entre dos palabras es exactamente de 1 espacio. Prueba a introducir ms de 1 y comprobars como no puedes. De nuevo, como en la mayora de los elementos HTML, dentro de un prrafo no puede haber tabuladores. Del mismo modo, trata de introducir un tabulador y comprobars que tampoco es posible. Los prrafos no permiten saltos de lnea internos. Un salto de lnea producto de apretar enter en el teclado crea un nuevo prrafo. Se comporta como un "punto y a parte". Los prrafos se amoldan automticamente al tamao de la ventana del explorador. Previsualiza la pgina web pulsando F12 y cambia el tamao del navegador para comprobar el ajuste automtico del texto. Los prrafos introducen un espacio de separacin entre ellos. Advierte la diferencia entre una lnea y otra del mismo prrafo y entre un prrafo y el siguiente.
NOTA: algunos navegadores guardan en cach la pgina datos.html antigua por lo que al hacer la previsualizacin nos aparecera aun la vieja pgina. Esto se soluciona pulsando F5 (recargar) o ctrl + F5 en la mayora de los navegadores. El formato predeterminado El formato predeterminado o texto preformateado es un tipo de formato en el que se respetan todos y cada uno de los caracteres del texto. Se suele mostrar en alguna tipografa de ancho fijo como Courier y se utiliza cuando se desea una trascripcin ms precisa de un texto. Al contrario de como sucede con los prrafos, el texto predeterminado conserva los espacios y tabuladores y un salto de lnea no inicia un nuevo prrafo sino que salta a la lnea siguiente. Adems, el texto predeterminado no se ajusta al tamao de la ventana del navegador. 4.1.4 - Ejercicio guiado: pruebas con el formato predeterminado Escribe un texto de prueba. Seleccinalo y cambia su formato a Formato predeterminado en el cuadro desplegable Formato del panel Propiedades.
25/03/2010
Page 68 of 227
Prueba a introducir espacios y tabuladores. Observa como un salto de lnea no introduce un nuevo prrafo. Cuando termines de escribir, prueba la pgina de nuevo en el navegador y comprueba como el texto no se ajusta a las dimensiones de la ventana. Observa como, si haces muy estrecha la ventana aparece una barra de desplazamiento horizontal en la parte inferior de la pgina. Cuanto termines, borra el texto de prueba. Si queremos dejar de introducir un texto con formato predeterminado colocaremos el cursos al final del texto y pulsaremos dos veces seguidas enter. Otra forma es continuar escribiendo con texto en formato predeterminado y luego seleccionar el texto que deseemos convertir en prrafo y cambiar su formato. Este mtodo funciona siempre, independientemente del formato que deseemos aplicar. 4.1.5 - Ejercicio: cambio de formato Selecciona una frase de tu autobiografa y alterna entre todos los formatos posibles (incluyendo el etiquetado como Ninguno). Observa las diferencias y vuelve a la versin original. NOTA: durante este curso, el texto predeterminado aparecer dentro de cajas grises y con fuente monoespacio, como la de las mquinas de escribir. Esto es un ejemplo de texto con formato predeterminado: En el formato predeterminado se suelen usar fuentes de ancho fijo. Las fuentes de ancho fijo son aquellas en que todos los caracteres, incluidos los espacios y signos de puntuacin, miden exactamente lo mismo de ancho. Esto quiere decir que si dos lneas contienen un nmero igual de caracteres, entonces ocuparn exactamente el mismo espacio! El texto con formato predeterminado respeta los tabuladores Listas de elementos Hay dos clases de listas de elementos, las listas ordenadas: 1. 2. 3. 4. 5. 6. 7. 8. 9. Mercurio Venus La Tierra Marte Jpiter Saturno Urano Neptuno Plutn y los espacios de ms entre palabra y palabra. Y por cierto, no se ajusta a las
Y las no ordenadas:

Leche Huevos Pan Azcar Naranjas Aceite
25/03/2010

Como es fcil apreciar, las primeras implican cierto orden en sus elementos mientras que en las segundas, el orden no importa. Para aadir una lista se debe hacer introducir un nuevo prrafo all donde queramos que aparezca la lista y a continuacin hacer clic en los iconos de lista sin ordenar, o lista ordenada,
Page 69 of 227
que se encuentran en el panel
Propiedades. A continuacin se escribe el primer elemento de la lista y para introducir un nuevo elemento, se presiona enter al final del elemento anterior. Si queremos insertar un elemento que preceda al primero, nos situaremos justo al inicio de la lnea del primer elemento y pulsaremos la tecla enter. Esto desplazar el elemento primero a una segunda posicin abriendo hueco para que otro ocupe su lugar. Si en cualquier momento, se desea anidar un nivel se debe pulsar tabulador o hacer clic en el icono sangra de texto,
Bebida Coca Cola Cerveza Aperitivos Patatas Aceitunas Frutos secos
. Para volver al nivel anterior se debe pulsar shift + tabulador o el icono de anular sangra de texto,
Para dejar de introducir elementos debemos situarnos en el primer nivel y pulsar shift + tabulador o hacer clic en el icono de anular sangra de texto, como si lo que quisiramos decir es que "volvemos al nivel 0". Podemos cambiar en cualquier momento el tipo de lista haciendo clic sobre los iconos de las listas. De esta forma, podemos anidar listas no ordenadas dentro de otras ordenadas y viceversa. Sin embargo, antes de volver a un nivel anterior tendremos que cambiar el tipo de lista al del nivel anterior. Si no hacemos esto, Dreamweaver iniciar una nueva lista con el tipo actual. 4.1.6 - Ejercicio guiado: lista de pelculas preferidas Supongamos que queremos escribir la siguiente lista:
Terror
1. Alien, el Octavo Pasajero 2. Drcula 3. La Noche de los Muertos Vivientes Ciencia Ficcin 1. The Matrix 2. Gattaca 3. Terminator 2 Para ello comienza insertando una lista no ordenada con el icono lista no ordenada, de lista ordenada, y repite el procedimiento. 4.1.7 - Ejercicio: listado de aficiones Observa el apartado Gustos y Aficiones de datos.html. Describe en un prrafo normal y corriente en qu empleas tu tiempo libre y a continuacin, debajo de cada encabezado de nivel 3 repite el ejercicio anterior. Utiliza listas no ordenadas para las categoras de tus aficiones (terror y comedia para cine; slo y en equipo para deporte; salsa y rock para msica, etc) y anida listas ordenadas con 3 ejemplos ordenados de mayor a menor preferencia. Listas de definicin El ltimo tipo de texto que veremos es la lista de definicin. En las listas de definicin se especifican trminos a definir y se da una definicin por cada uno. Podemos insertar una nueva lista de definicin mediante el men contextual del rea de edicin. 4.1.8 - Ejercicio guiado: lista de trminos de interes Vamos a reproducir la siguiente lista de trminos de inters: HTML lenguaje de marcado de hipertexto para crear pginas web. CSS lenguaje para definir el estilo de presentacin de las etiquetas HTML. . Tras escribir "Terror" pulsamos enter para incluir un nuevo elemento. Ahora haz clic sobre el icono de sangra de texto, . Finalmente, haz clic en el icono de anular sangra de texto, y luego sobre el
. Escribe los tres ttulos de pelcula y antes de regresar al nivel anterior, haz clic en el icono de lista no ordenada,
, escribe "Ciencia Ficcin"
25/03/2010

PHP lenguaje de programacin, de los llamados lenguajes de script, que suele utilizarse para la programacin de pginas web dinmicas Elige un lugar dnde introducir la lista, haz clic derecho para desplegar el men contextual, selecciona la opcin Lista y haz clic en Lista de definicin.
Page 70 of 227
Luego escribe el primer trmino a definir y pulsa enter para introducir entonces la definicin. Un segundo enter insertar un nuevo trmino. Otro enter ms, previo a introducir un nuevo trmino concluir la lista de definiciones. 4.1.9 - Ejercicio: un glosario Crea una nueva pgina web dentro de MiSitioWeb y llmala glosario.html. Dale un ttulo (usa el encabezado de nivel 1) y crea una lista de definicin de algunos trminos que hayas aprendido durante estas lecciones. Trata de definirlos con tus propias palabras. Cuando termines, recuerda pulsar F12 o hacer clic en el icono de vista previa en el navegador, para ver la pgina en el navegador.
25/03/2010

Page 71 of 227
4.2. Seccin 4.2 - Estilos HTML Seccin 4.2 - Estilos HTML

Los estilos de texto Habiendo insistido tanto en que HTML sirve para estructurar el texto y en que es CSS lo que deberamos usar para definir el estilo de la pgina web, podra resultar un poco contradictorio el hecho de que existan estilos HTML. No obstante los estilos que estudiaremos a continuacin aportan significado al texto y es por eso que forman parte de HTML. No por decir estilo nos estamos refiriendo obligatoriamente al diseo, en este caso, estilo se refiere al carcter del texto. La opcin Estilo del men contextual del rea de edicin contiene todos los estilos que pueden aplicarse en HTML 4.
25/03/2010
Page 72 of 227
A continuacin se incluye una breve definicin de cada uno junto con un ejemplo: Negrita Se desaconseja su uso, ver en su lugar el estilo Destacado. Esto es un texto en negrita. Cursiva Se desaconseja su uso, ver en su lugar el estilo nfasis. Esto es un texto en cursiva. Subrayado Se desaconseja encarecidamente su uso. Resalta un texto subrayndolo. Esto es un texto subrayado. Tachado Incluye una lnea horizontal que atraviesa el texto por su mitad. Esto es un texto tachado. Teletipo Hace que el texto se muestra como si se hubiese introducido en una terminal informtica de consola. Este texto tiene el estilo teletipo. nfasis Indica que el texto que debe ser enfatizado. Por defecto, resalta el texto curvando sus caracteres. Esto es un texto enfatizado.
25/03/2010

Destacado Indica que el texto debe ser destacado. Por defecto, resalta el texto aumentando la anchura del trazo. Esto es un texto destacado. Cdigo Indica que el texto es cdigo en algn lenguaje de programacin. Un ejemplo de cdigo HTML: <p>Esto es un prrafo</p> Variable Indica que el texto es una variable de algn lenguaje de programacin. El nombre de la variable, una_variable, tiene estilo variable. Muestra Representa la salida textual de programas de ordenador. Este texto tiene estilo muestra. Teclado Representa texto que debe ser introducido desde el teclado. Este texto tiene estilo teclado. Cita Indica que el texto es una cita textual. Esto es un texto con estilo cita. Algunos navegadores aaden las comillas automticamente a este tipo de textos. Definicin Indica que el texto es una definicin de algn trmino. Se define cliente como el ordenador que realiza peticiones de servicios. Eliminado Indica que el texto debe ser eliminado o ha sido eliminado pero se desea dejar constancia de que alguna vez estuvo all. Este texto ha sido eliminado. Insertado. Indica que el texto ha sido aadido recientemente pero se desea dejar constancia de que no siempre estuvo all. Este texto ha sido insertado
Page 73 of 227
Te puede parecer que muchos de ellos hacen lo mismo debes recordar que HTML trata de aportar significado al texto no de decidir cmo debe ser mostrado. Luego si necesitas resaltar un texto porque es importante usar los estilos nfasis o Destacado pero si el texto se trata de una definicin, entonces mrcalo como Definicin. Es por esto que se desaconseja el uso de la negrita, la cursiva y el subrayado; estos estilos son demasiado grficos y cuando se necesitan, muchas veces es porque se desea aadir cierto nfasis al texto o destacarlo de alguna forma. De nuevo, recuerda: con HTML aportamos estructura y significado al texto, no especificamos cmo se representa. En las lecciones 6 y 7 aprenderemos a usar estilos CSS que nos permitirn especificar cmo debe visualizarse un determinado estilo. Entonces las diferencias sern ms evidentes. Ten en cuenta adems, que puedes aplicar ms de un estilo a un mismo texto para conseguir efectos combinados. Por ejemplo, esto es un texto subrayado y en negrita, con algunas palabras en cursiva. 4.2.1 - Ejercicio: estilos HTML Prueba los estilos sobre la pgina web datos.html. Puedes aadir una seccin con el encabezado Mis frases favoritas donde incluir algunas citas (recuerda usar el estilo Cita para estos casos).
4.3. Seccin 4.3 - CSS bsico: colores en el texto Seccin 4.3 - CSS bsico: colores en el texto
El lenguaje CSS Recordando lo aprendido durante la Seccin 1.1, CSS son las siglas de Cascading Style Sheets (Hojas de estilo en cascada). Se trata de un lenguaje que tiene por objetivo definir la presentacin de documentos HTML. En otras palabras, el lenguaje CSS se usa para otorgar propiedades grficas o de representacin a los elementos de HTML. CSS se denomina en cascada porque permite definir propiedades en los elementos padre que automticamente poseern los hijos, a menos que se indique lo contrario. De esta manera, el estilo fluye de elementos padre a elementos hijos como si fuera una cascada. CSS es un lenguaje bastante complejo pero Dreamweaver posee herramientas para simplificar esta tarea y no tener que lidiar con cdigo.
25/03/2010
Page 74 of 227
Color en las pginas web En las pantallas de los ordenadores, como en cualquier dispositivo que emita luz para recrear imgenes, el color se forma de la mezcla de intensidades de tres colores primarios: el rojo, el verde y el azul. Muchas veces se suele referir a estos colores por la inicial de su nombre en ingles: R, G y B (de Red, Green y Blue).
25/03/2010
Page 75 of 227
En HTML el color se representa como un nmero hexadecimal (llamado tambin triplete hexadecimal) que codifica las intensidades de los colores R, G y B. Se pueden mezclar hasta 256 intensidades distintas de cada color lo que resulta en 16777216 mezclas distintas. Los nmeros hexadecimales no difieren mucho de los decimales a los que estamos acostumbrados salvo que en vez de contar con diez smbolos distintos (las grafas de los nmeros del 0 al 9), tienen 16. Los primeros 10 smbolos se corresponden con las grafas de los nmeros del 0 al 9 y los siguientes 6 con las letras de la A a la F. Luego, explcitamente, los smbolos posibles que forman un nmero hexadecimal son 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E y F. Otra diferencia es que, si bien las unidades de ambos representan un elemento, las decenas de los nmeros hexadecimales representan conjuntos de 16, las centenas de 256 (16*16), las unidades de millar de 4096 (16*16*16), etc. Cada intensidad se codifica entonces como un nmero de dos dgitos hexadecimales desde la intensidad 00 (0 en decimal) que representa la ausencia total de un color, a la FF (255 en decimal) que representa la mxima intensidad de un color. Y como cada color est formado por 3 intensidades, cada color se expresa como la concatenacin de los valores hexadecimales de las intensidades de los colores primarios en el orden RGB. Es decir, primero la cantidad de rojo, luego la de verde y por ltimo la de azul. En CSS, a este nmero se le aade como prefijo el smbolo # (almohadilla). Luego un color como este se escribira #D98357. Existe una forma alternativa de describir un color slo en caso de que las tres intensidades repitan sus dgitos. Por ejemplo, considera el color #3300CC. Este color puede abreviarse escribiendo cada dgito repetido una sola vez, como #30C. Todos los colores del selector bsico de color de Dreamweaver pueden escribirse de esta forma y se corresponden con una paleta especial de color llamada paleta de colores web seguros.
25/03/2010
Page 76 of 227
25/03/2010
Page 77 of 227
Observa como el azul puro (esquina inferior izquierda), el verde puro (6 comenzando a contar hacia arriba desde la esquina inferior derecha) y el rojo puro (6 color la ltima columna) contienen 0 en las intensidades de los colores que no son ellos mismos, y como el negro (esquina inferior derecha) supone establecer todas las intensidades a 0 y el blanco (esquina superior izquierda) a F. Aplicar color a un texto Para colorear un fragmento de texto tenemos que seleccionar el texto que deseamos cambiar de color y luego hacer clic donde pone CSS en el panel Propiedades, propiedades CSS. Recuerda volver al panel HTML al terminar de aplicar un color. NOTA: Trata de ignorar los iconos de negrita y cursiva, as como los de alineamiento de prrafo de este panel porque los estudiaremos ms adelante en profundidad. Aqu, debemos modificar la propiedad color, . Haciendo clic en el cuadro gris desplegamos el selector bsico de color dnde podemos elegir cualquier color de la pelta segura. . Esto sustituir el panel de propiedades HTML por otro de
Selector bsico de color Si queremos optar por ms colores deberemos pulsar en el icono situado en la esquina superior derecha, lo que desplegar la paleta completa.
Selector avanzado de color Una vez aceptado el color, aparecer el dilogo de Nueva regla CSS. Esto es as porque realmente, lo que hacemos es crear una nueva regla (de color en este caso) para el texto seleccionado. El ltimo paso consiste en elegir un nombre para la regla que escribiremos en el campo Elija o introduzca un nombre para el selector y, a continuacin, aceptar el dilogo.
25/03/2010
Page 78 of 227
4.3.1 - Ejercicio: aplicar color Colorea el encabezado de datos.html con el color que prefieras. Excepto el nombre de la regla, asegrate que el resto de opciones coinciden con las de la figura anterior, antes de aceptar el estilo. Ahora el texto seleccionado aparecer en el color que acabamos de definir. Si quisieras aplicar este estilo a otra fraccin de texto tendras que seleccionar el nuevo texto y cambiar su propiedad Clase del panel Propiedades HTML (recuerda activar de nuevo el panel propiedades HTML haciendo clic donde pone HTML, ). En la lista desplegable podrs ver todos los estilos que hayas definido. Escoge el que quieras y tu seleccin pasar a tener ese estilo.
Si deseas quitar un estilo, escoge la opcin Ninguna del cuadro desplegable. Si quieres aplicar un nuevo color, tendrs que definir un nuevo estilo. No abuses del color en las pginas web. A la mayora de las personas, los cambios de color las distraen o desconciertan. Utiliza el color cuando este clarifique la lectura o bien sirva para mejorar la comunicacin, o como un elemento de diseo en ttulos. 4.3.2 - Ejercicio: ms color
25/03/2010

Trata de aadir algo ms de color a la pgina datos.html. Cuando hayas definido un par de estilos, intercambialos y eliminalos y vulvelos a aplicar. Puedes ver mi versin final con este enlace. 4.3.3 - Ejercicio: sincroniza el servidor remoto y enviar la pgina datos.html
Page 79 of 227
Antes de terminar la Leccin, repasa los conceptos aprendidos durante la Leccin 2 y sincroniza el servidor remoto. Haremos esto al final de cada leccin pero cada cual es libre de sincronizar su servidor remoto cuando le plazca. Una vez hecho, enva la pgina datos.html tal como te ha quedado. Debes usar la herramienta de Entrega de ejercicios para enviar el archivo creado (datos.html). Este ejercicio est identificado como Leccin 4. Ve a la pgina de Inicio y pulsa en el icono Entrega de ejercicios:
Llegars a la lista de ejercicios para entregar:
25/03/2010

Las ilustraciones se corresponden con los ejercicios de otro curso CFI, pero el funcionamiento es el mismo. Pulsa sobre el nombre del ejercicio (Leccin 4) y llegars a la pantalla que te permite enviar tu solucin:
Page 80 of 227
Para enviar tu archivo solucin debes pulsar el botn Cargar archivo. Puedes cargar varios archivos, aunque normalmente te pediremos slo uno (la pgina web en este caso).
Con el botn Examinar localizas y seleccionas el archivo a cargar. Pulsando el botn Cargar se enva el archivo. Lo que tarde depender de lo grande que sea el archivo. Nota: Los nombres de archivos no pueden tener ni vocales acentuadas, ni ees ni otros caracteres especiales. Una vez enviado el archivo lo vers en la lista de archivos cargados:
25/03/2010
Page 81 of 227
Si tuvieras que enviar ms archivos, bastara con que usaras ms veces el botn Cargar archivo . Una vez cargados todos los archivos debes usar el botn Enviar trabajo para que se realice el envo. Ten en cuenta que slo se permite un envo, as que asegrate de que has cargado lo que corresponda. Una vez que el profesor haya calificado tu ejercicio podrs ver la calificacin en la herramienta Mis calificaciones (pgina de Inicio). Aparecer un chivato en la asignatura en tu lista de asignaturas del CV. Recuerda que puedes ver los comentarios de correccin del ejercicio utilizando el vnculo "Calificado" que aparecer, una vez que se haya calificado, debajo del nombre del ejercicio dentro de Entrega de ejercicios:
25/03/2010

Si pulsas en el vnculo "Calificado", vers los comentarios de correccin:
Page 82 of 227
Es muy importante que veas los comentarios de correccin y te asegures de aprender a hacer bien aquello en lo que hayas fallado. Si la puntuacin es inferior a 5 debers corregir todos los defectos y volver a enviar al tutor el ejercicio repetido. En este caso, como no lo puedes volver a enviar con la herramienta de entrega, debers hacrselo llegar como adjunto de un mensaje de correo (herramienta Comunicacin con tutor). Por cierto, el tutor puede tardar un poco en corregirte el ejercicio. Depender de la cantidad de ejercicios que hayis enviado los estudiantes del curso. En condiciones normales no tardar ms de una semana, pero en algunas pocas de muchas entregas puede que tarde un poco ms.
5. Leccin 5 - Hipervnculos, imgenes y tablas Leccin 5 - Hipervnculos, imgenes y tablas

Comprensin del modelo cliente-servidor (Leccin 2) Familiaridad de los elementos de texto como prrafos y encabezados (Leccin 3) Conocimientos bsicos del uso de imgenes y tablas en procesadores de texto

Practicar la creacin de ndices en las pginas web Reforzar el concepto de direccin web y ensear a enlazar contenido mediante hipervnculos Ensear al alumno cmo insertar imgenes en la pgina web y a utilizar los mapas de imgenes Familiarizar al alumno con las tablas y con las operaciones ms comunes sobre las mismas
25/03/2010

Secciones 1. 2. 3. Enlaces de hipertexto: hipervnculos Imgenes y mapas Tablas
Page 83 of 227
Duracin estimada Dada la novedad de los conceptos presentados y la longitud moderada de cada leccin, este tema debera abarcarse en 3 sesiones de 2 horas y media.
5.1. Seccin 5.1 - Enlaces de hipertexto: hipervnculos Seccin 5.1 - Enlaces de hipertexto: hipervnculos
La URL En la Seccin 2.1, al explicar el modelos cliente-servidor hablamos tambin de cmo localizar los ordenadores de una red a travs de las direcciones IP y como, para evitar precisamente el uso de direcciones tan difciles de recordar, utilizamos las direcciones web en su lugar. Adems, en la Seccin 1.1 dijimos que las pginas web eran capaces de enlazar unas con otras e incluso con otros recursos tales como videos o msica y esto nos lleva directamente a preguntarnos cmo localizamos estos recursos en Internet. Para eso debemos explicar el concepto de URI. URL significa Localizador Uniforme de Recursos (Uniform Resource Locator). Son cadenas de caracteres que permiten identificar de manera inequvoca cualquier recurso presente en una red. A menudo, se refieren a ellos de manera femenina como la URL y las URLs y vulgarmente se las llama direcciones web. Una URL est formada por varias partes que siguen el esquema que detallamos a continuacin: protocolo://usuario:contrasea@nombre_del_servidor:puerto/ruta?consulta#seccion protocolo Indica qu protocolo de comunicaciones (consulta tu glosario o repasa la Seccin 2.1 si no recuerdas de qu estamos hablando) que se usar a la hora de realizar la peticin al servidor. HTTP suele ser el ms frecuente dado que es el que se usa para intercambiar pginas web pero a lo largo del curso hemos visto otro, FTP, para el intercambio de archivos. usuario Aunque normalmente no se use, permite identificarnos, junto con la contrasea, ante el servidor. La mayora de los servidores de Internet son pblicos lo que fuerza al usuario a ser annimo, pero el campo usuario podra usarse si quisiramos acceder a un recurso privado de un servidor pblico. contrasea Junto con usuario, permite identificarnos ante el servidor. nombre_del_servidor Indica el nombre de la mquina, que ser traducido, en ltima instancia, a la direccin IP del servidor. puerto A priori, un servidor posee varios canales de comunicacin por donde intercambiar informacin. A tales canales se los denomina puertos. Por consenso, el puerto para las comunicaciones HTTP es el 80 y para las comunicaciones FTP es el 21. ruta Se trata de la ruta, dentro del ordenador servidor, dnde encontramos el recurso. Normalmente, los servidores, como cualquiera de los ordenadores que acostumbramos a utilizar, ordenan la informacin en archivos dentro de carpetas. La ruta se compone por cada una de las carpetas hasta el archivo separadas por barras y, en ltima instancia, el nombre del archivo. Por ejemplo: Mis Documentos/MiSitioWeb/curriculum.html consulta Algunos recursos tienen la capacidad de "responder" al usuario. Para ello deben recibir una consulta y tras el smbolo de cierre de interrogacin puede indicarse esta consulta. seccin Indica un lugar concreto dentro del recurso. Quiz no tenga mucho sentido en vdeo o audio, pero en pginas web permite indicar un lugar concreto dentro de la misma.
25/03/2010
Page 84 of 227
Muchos de estos campos son opcionales. En la prctica, basta con que aparezca el protocolo, el nombre del servidor y el nombre del recurso. Incluso este ltimo puede ser opcional si se trata de index.html que, como ya sabemos, no hace falta indicar ya que es la pgina web por defecto. Es ms, a veces basta con que aparezca slo la ruta del recurso o la seccin (y se da por entendido que el resto de la URL es igual que la pgina actual.) 5.1.1 - Ejercicio: identifica cada parte en las siguientes URL
http://en.wikipedia.org/wiki/Uniform_Resource_Locator#Syntax https://oi.cajamadrid.es/CajaMadrid/oi/pt_oi/Login/login http://www.google.es/search?q=que+es+una+direccin+ip
5.1.2 - Ejercicio guiado: nombre de usuario y contrasea Localiza tu nombre de usuario en Zobyhost y tu contrasea y escribe en un navegador: ftp://nombre_de_usuario:contrasea@ftp.zobyhost.com Deberas ver un listado del contenido de tu servidor web. Si aades la carpeta htdocs a la ruta, deberas poder ver sus contenidos. ftp://nombre_de_usuario:contrasea@ftp.zobyhost.com/htdocs Por ltimo, prueba a aadir el nombre de un fichero, para visualizarlo. Por ejemplo: ftp://nombre_de_usuario:contrasea@ftp.zobyhost.com/htdocs/index.html Hipervnculos El hipervnculo es el elemento de HTML que nos permite enlazar con otros recursos de Internet. Se presenta en forma de fracciones de texto destacado (a menudo, subrayado) con los que el usuario puede interactuar (normalmente, haciendo clic sobre l). Poseen dos propiedades importantes: el texto y el vnculo. El vnculo es el recurso al que enlaza el hipervnculo que tenemos que denotar mediante una URL y el texto, el fragmento del discurso que el usuario utilizar para llegar hasta el recurso. Estudiaremos tres tipos de hipervnculos en funcin del tipo de vnculo del enlace.
Enlaces a lugares de una misma pgina. Enlaces a otras pginas o recursos. Enlaces a correos electrnicos.
5.1.3 - Ejercicio guiado: preparar la pgina curriculum.html Vamos a modificar la pgina curriculum.html. Asegrate que en el explorador de archivos se encuentra seleccionado MiSitioWeb y que nos encontramos en la vista local. Haz doble clic sobre el archivo curriculum.html y borra su contenido actual. Asegrate de que la vista de edicin es la de slo diseo para que no te moleste el cdigo HTML. Tmate tu tiempo en crear los encabezados de nivel 1 y 2 necesarios para conseguir la siguiente estructura de pgina (no uses una lista, esta lista slo indica la relacin entre los encabezados).
Currculum Vitae ndice Informacin personal Empleo deseado / familia profesional Experiencia laboral Educacin y formacin Capacidades y competencias personales Otras informaciones Anexos
Ahora s, debajo de ndice, aade una lista ordenada con los ttulos de los encabezados. La lista tendr esta forma: 1. 2. 3. Informacin personal Empleo deseado / familia profesional Experiencia laboral
25/03/2010

4. 5. 6. 7. Educacin y formacin Capacidades y competencias personales Otras informaciones Anexos
Page 85 of 227
Copia y pega el siguiente texto de prueba en cursiva como contenido de todas las secciones que acabamos de crear. Nuestra intencin es la de rellenar con contenidos temporales la pgina para dotarla de algo de altura. Ya nos preocuparemos luego de cambiar el texto de prueba por uno real. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempus nibh id augue. Quisque vestibulum ultricies mauris. In id neque non libero tincidunt lobortis. Vivamus ipsum. Nulla massa odio, elementum at, faucibus non, rutrum in, nunc. Integer euismod. Integer arcu lectus, molestie at, rhoncus ac, ultrices a, enim. Donec dolor mauris, accumsan ut, adipiscing sed, dignissim vel, leo. Nulla lacus. Aliquam eu metus. Nullam quis metus id dui gravida fermentum. Donec vitae nibh id nisi pharetra rhoncus. Fusce egestas venenatis dui. Sed sit amet tortor. Nulla dapibus urna non metus. Ut id odio. Curabitur bibendum vulputate magna. Quisque odio. Phasellus dolor neque, commodo id, imperdiet ut, imperdiet eu, erat. Ut luctus dapibus augue. Suspendisse potenti. Ut varius, purus non ornare rhoncus, enim magna rutrum justo, ac vehicula turpis nunc sit amet dolor. Donec urna. In hac habitasse platea dictumst. Vivamus fringilla sapien id tellus. Nullam neque sapien, gravida quis, aliquam ut, dignissim quis, ante. Nunc pulvinar ligula at tellus. Curabitur leo. In turpis elit, sodales ac, placerat in, tristique a, mauris. Integer molestie tincidunt lacus. Integer lorem urna, interdum placerat, lobortis eget, posuere quis, leo. Maecenas diam est, dignissim sagittis, vulputate auctor, ultrices quis, felis. Mauris feugiat eros id mi. Cras porta pulvinar quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in ipsum in eros tincidunt pretium. Nunc magna magna, consectetur sit amet, ullamcorper et, convallis id, ligula. Etiam laoreet enim imperdiet enim. Donec lobortis commodo dui. Ut tellus eros, tempor a, egestas ac, tincidunt sit amet, urna. Morbi feugiat laoreet libero. Quisque diam. Suspendisse dictum risus. Suspendisse potenti. Nulla eget nibh at erat pretium tristique. Aenean et ipsum. Integer condimentum, nunc sit amet consequat suscipit, dui urna lobortis nisl, sed laoreet neque nibh vel turpis. Nunc tristique blandit nibh. Aenean a odio vitae felis venenatis fringilla. Quisque lacus. Sed ut nisi in erat dapibus rhoncus. Nam vestibulum turpis. Integer non ipsum. Antes de continuar, prueba a previsualizar la pgina que acabas de crear. Hipervnculos que enlazan a la misma pgina Para poder referirnos a lugares dentro de una misma pgina, necesitamos crear puntos de anclaje. Los puntos de anclaje se crean con la herramienta Anclaje con nombre del panel insertar situado a la derecha del rea de edicin, .
Para introducir un primer punto de anclaje, haz clic en el lugar de la pgina web donde deseas insertar el anclaje y haz clic en el botn Anclaje con nombre. Aparecer un dilogo pidindonos el nombre del punto de anclaje.
Los nombres de anclaje deben cumplir algunas reglas:

No puede haber dos nombres de anclaje iguales en la misma pgina web. No pueden contener espacios. No deben contener ni caracteres especiales, ni acentuados, ni tampoco la letra .
Los puntos de anclaje no tienen representacin en el navegador aunque Dreamweaver los sealar en la vista de edicin mediante el smbolo de un ancla amarilla, 5.1.4 - Ejercicio guiado: un punto de anclaje en curriculum.html
Vamos a aadir un punto de anclaje justo antes del encabezado Informacin personal. Sita el cursor justo al comienzo del encabezado y haz clic en Anclaje con nombre en el panel insertar. En el cuadro de dilogo introduce el nombre "Informacion_personal" y acepta.
25/03/2010
Page 86 of 227
El resultado, en la vista de diseo de Dreamweaver, debera parecerse a la figura:
Previsualiza tu pgina en un navegador para comprobar como los puntos de anclaje no aparecen. 5.1.5 - Ejercicio: puntos de anclaje en curriculum.html Repite el procedimiento para todos los encabezados y recuerda las reglas sobre los nombres de los puntos de anclaje de las que hablbamos un poco antes. Como consejo, es til que el nombre del anclaje coincida con el encabezado de la seccin. Los espacios pueden sustituirse por guiones bajos _ y las vocales acentuadas por sus anlogas no acentuadas. Las ees pueden reemplazarse por las letras "ni" por ejemplo. Situados los puntos de anclaje, slo falta aadir los hipervnculos. Para ello, seleccionamos el texto que deseamos convertir en hipervnculo y usamos sobre l la herramienta hipervnculo, puede encontrarse tambin en el panel insertar. Aparecer el dilogo de creacin de hipervnculos donde el campo Texto debe coincidir con el texto seleccionado. En el cuadro desplegable Vnculo encontrars todos los puntos de anclaje de la pgina que pueden actuar como destino. Cuando hayas seleccionado el correcto acepta el dilogo para terminar de introducir el enlace. que
25/03/2010
Page 87 of 227
El texto seleccionado aparecer ahora subrayado y en azul lo cual indica que se trata de un hipervnculo. Puedes previsualizar la pgina para probar el enlace en accin.
5.1.6 - Ejercicio guiado: hipervnculo a Informacin personal Ahora que tenemos un punto de anclaje por seccin, vamos a hacer que el ndice nos lleve directamente a cada una de ellas. Comenzaremos por "Informacin personal" as que selecciona el primer elemento de la lista que forma el ndice.
25/03/2010
Page 88 of 227
Luego haz clic en la herramienta Hipervnculo. Despliega el cuadro desplegable vnculo y selecciona la entrada que pone #informacion_personal.
Acepta el dilogo, previsualiza la pgina y prueba tu nuevo enlace. NOTA: Es posible que el campo Texto aparezca vaco (esto es, no aparece el texto que tratas de seleccionar). Este es un pequeo defecto que tiene Dreamweaver. Para corregirlo, procura que tu seleccin comienza justo antes del carcter inicial del texto que deseas seleccionar hasta justo despus del ltimo carcter del texto y asegrate de que no cambias de lnea durante la seleccin. Si aun as no lo consigues, no te preocupes, rellena el campo texto tu mismo hacindolo coincidir con el que queras seleccionar. Esto har que se inserte un nuevo texto con el enlace deseado. Luego borra el texto que no es hipervnculo y listo.
25/03/2010
Page 89 of 227
5.1.7 - Ejercicio guiado: otra forma de enlazar Otra forma de enlazar un texto para convertirlo en un hipervnculo es mediante la herramienta Sealar archivo del panel Propiedades HTML. Selecciona ahora selecciona el segundo elemento del ndice y fjate en la propiedad Vnculo. Atento a los dos iconos que hay a la derecha del cuadro desplegable, en especial al que parece un objetivo, . El destino de tu enlace debe estar en el rea de edicin luego asegrate de que el punto de anclaje que se refiere a la seccin Empleo deseado / familia profesional est al alcance de tu vista. Ahora haz clic sobre el objetivo y mantn pulsado mientras arrastras hasta situarte encima del punto de anclaje tal y como se muestra en la figura.
25/03/2010
Page 90 of 227
25/03/2010

Cuando la flecha est sobre el punto de anclaje, su nombre aparecer en el cuadro de Vnculo precedido por el smbolo almohadilla. 5.1.8 - Ejercicio: completa el ndice Repite esta operacin con cada uno de los elementos del ndice. Adems, aade un texto como "Volver" al final de cada seccin que nos site sobre el ndice de nuevo. Descargate nuestra pgina de currculum para ver un ejemplo terminado. Hipervnculos que enlazan a otras pginas o recursos
Page 91 of 227
Este es el caso ms comn en cuanto a hipervnculos se refiere. Lo que explicaremos a continuacin para enlazar con una pgina web sirve, de la misma forma, para enlazar un archivo de video o audio, un documento de texto, una imagen o cualquier otro tipo de recurso. 5.1.9 - Ejercicio guiado: regresando al ndice Desde el explorador de archivos, abre las pginas curriculum.html y datos.html. Vamos a incluir alguna forma de regresar al ndice de nuestro sitio web, a la pgina llamada index.html. Para ello inserta un prrafo justo antes del encabezado principal (el que pone Sobre mi) y haz clic en la herramienta Hipervnculo, . Aparecer el dilogo de insercin de hipervnculos.
En el campo Texto introduce algo como Regresar al ndice y a continuacin haz clic en el icono de la carpeta, contiguo al campo Vnculo. Esto desplegar un dilogo de seleccin de archivos.
25/03/2010
Page 92 of 227
Haz clic en el botn Raz del sitio para situarte directamente en las carpeta donde ests creando tu pgina web. Aqu selecciona el archivo index.html y acepta. Esto rellenar convenientemente el campo Vnculo sin que tengamos que escribir nada. Por ltimo, acepta el dilogo y previsualiza la pgina para ver el enlace en accin.
De nuevo, otra forma de crear un enlace a otra pgina web es mediante la herramienta de seleccin de archivo.
25/03/2010

5.1.10 - Ejercicio guiado: otra forma de crear un enlace a un archivo Abre el documento curriculum.html y en la seccin informacin personal incluye un nuevo primer prrafo donde pueda leerse algo como: Conozca ms sobre m.
Page 93 of 227
Luego selecciona este texto y haz clic en la herramienta Seleccin de archivo. Ahora mantn pulsado y arrastra hasta sealar el archivo datos.html en el explorador de archivos tal y como explicamos anteriormente.
Hasta ahora hemos visto cmo enlazar con pginas de nuestro sitio web. Ahora veremos cmo enlazar con pginas de Internet. 5.1.11 - Ejercicio guiado: informacin sobre pelculas Abre la pgina web datos.html y busca en la Wikipedia o en la IMDB el ttulo de alguna de tus pelculas preferidas que hayas indicado entre tus gustos y aficiones. Copia la URL de la pgina web, que debera aparecer en la parte superior de tu navegador. Ahora selecciona el ttulo de esa pelcula en el rea de edicin y pega la direccin en el campo Vnculo del panel Propiedades HTML. Pulsa la tecla enter y habrs conseguido enlazar el ttulo con una pgina externa.
25/03/2010
Page 94 of 227
5.1.12 - Ejercicio: proporciona informacin sobre el resto de tus gustos Repite el ejercicio anterior para cada uno de tus gustos. Hipervnculos que enlazan con direcciones de correo electrnico El ltimo tipo de vnculo enlaza con direcciones de correo electrnico. Su insercin es realmente sencilla: tan slo selecciona el texto que deseas que forme el enlace, es decir, el texto de ancla y haz clic en la herramienta Vnculo de correo electrnico, . De nuevo aparecer un dilogo con el campo Texto relleno con la seleccin actual y otro campo ms, Correo electrnico, donde introducir la direccin.
5.1.13 - Ejercicio: tu correo electrnico Abre el archivo datos.html y en la seccin Datos personales incluye tu correo electrnico. Puedes usar una direccin falsa si no deseas publicar el tuyo. Consideraciones finales sobre hipervnculos Ahora que conoces todos los tipos de hipervnculos, te invitamos a que coloques el cursor sobre cada uno de los enlaces que has creado y observes el campo Vnculo del panel de propiedades HTML. Observa como slo en el caso de enlaces a pginas de Internet utilizamos el esquema de la URL completa. En los vnculos a puntos de anclaje, slo especificamos la seccin; en los correos electrnicos se especifica el protocolo mailto junto con los campos nombre de usuario y direccin del servidor; y en los enlaces a pginas web de nuestro sitio web, slo la ruta.
25/03/2010
Page 95 of 227
Como decamos al comienzo de la leccin, da igual tratar de enlazar un archivo de pgina web, que uno de texto, o una imagen. El procedimiento es exactamente el mismo y veremos un ejemplo con imgenes en la prxima seccin. Antes de terminar, no obstante, nos gustara hacer un par de observaciones: La propiedad destino La primera tiene que ver con la propiedad destino de los hipervnculos. Esta propiedad puede fijarse tanto desde el panel de propiedades HTM como desde el cuadro de dilogo de hipervnculo. Esta propiedad permite indicar dnde se abrir el enlace. Sus valores son: _blank Se refiere a una nueva ventana del navegador (o en caso de un navegador por pestaas, una nueva pestaa). _parent Se refiere a la ventana del navegador que abri esta ltima. Si fue el usuario quien abri la ventana, esta propiedad no tiene sentido. _self Se refiere a la ventana actual. _top En pginas con marcos (los estudiaremos brevemente en lecciones posteriores), se refiere a reemplazar la pgina de marcos por el destino del enlace. De esta lista, las ms utilizadas son _blank y _self. Hemos ignorado esta propiedad porque no se encuentra en el estndar HTML 4.01 estricto y desaparecer en HTML 5. La w3c.org opina que es solamente el usuario el que debera decidir dnde abrir el contenido. Sin embargo, puestos a usarlo conviene tener presente la siguiente mxima: Si estamos enlazando a un lugar de nuestro sitio web, el destino ser _self. Si por el contrario estamos enlazando fuera de nuestro sitio web, el destino ser _blank. El texto del enlace La segunda observacin tiene que ver con el texto del enlace o texto ancla y es muy importante. El texto ancla es el texto usado para crear el enlace y debe estar relacionado semnticamente con el contenido al que enlaza. Esto quiere decir que los enlaces como "descargue el contenido pulsando aqu" sirven de ms bien poco. En vez de ello se podra haber escrito "descargue el contenido". Esto es as porque los textos ancla deben describir el contenido del enlace. Gran parte de los buscadores analizan el texto ancla de los enlaces para conocer de qu habla la pgina y a qu enlaza y, de esta forma, clasificarla mejor.
5.2. Seccin 5.2 - Imgenes y mapas Seccin 5.2 - Imgenes y mapas

Insertar imgenes desde un archivo Incluir imgenes en nuestras pginas web es una tarea muy sencilla. En principio, la imagen debera encontrarse en algn lugar de nuestro sitio web. Para ello puedes crear una carpeta dentro de MiSitioWeb llamada imagenes (conviene que los nombres de los archivos en los sitios web no contengan ms que caracteres estndar, es decir, ni smbolos de puntuacin, ni caracteres acentuados, ni ees). 5.2.1 - Ejercicio guiado: imgenes en tu sitio web Crea una carpeta para imagenes dentro de tu sitio web. Para ello, situate sobre la carpeta Sitio - MiSitioWeb en el explorador de archivos (vista local) y haz clic derecho para elegir Nueva carpeta. Dale el nombre imagenes y pulsa enter para aceptar el nombre. Abre un explorador de Windows situado en la nueva carpeta haciendo clic derecho sobre la recin creada carpeta y seleccionando Explorar... .
25/03/2010
Page 96 of 227
Ahora escanea una foto tuya o descarga el archivo de retratos que te proporcionamos y descomprmelo dentro de la carpeta imagenes. Haz clic en el botn actualizar del explorador de archivos para reflejar los cambios en la carpeta y extiende la carpeta imagenes para ver su contenido en el rbol de archivos. Al final de esta leccin se te pedir que sincronices el servidor remoto pero puedes hacerlo ahora si quieres. Para incluir una imagen en tu pgina web introduce un prrafo en el lugar del documento donde desees que se site la imagen. Ahora haz clic en la herramienta Imgenes: Imagen, clic sobre la flecha situada justo a la derecha del icono aparecer el men de insercin de imgenes. Para este curso slo nos interesar la primera opcin. . Si haces
La herramienta da paso a un cuadro de dilogo de seleccin de archivo donde debemos seleccionar el archivo de imagen a insertar. Una vez seleccionado, podemos aceptar el dilogo para que se muestre el dilogo de Atributos de accesibilidad de la imagen. En la Seccin 1.3 hablamos de la necesidad de hacer una pgina web accesible, es decir, inteligible para el mayor nmero de personas posible. Es posible que las imgenes no sean un elemento inteligible para personas ciegas o con discapacidades visuales por lo que el dilogo de accesibilidad nos pregunta por un texto alternativo y una descripcin larga.
El campo Texto alternativo debe contener una descripcin corta que resuma el contenido de la imagen. El campo Descripcin larga permite enlazar a una pgina web que contendr una descripcin detallada de la imagen. En principio, nos conformaremos con rellenar el campo Texto alternativo. Al aceptar el dilogo la imagen se habr aadido al prrafo. Si quieres suprimir una imagen seleccionala haciendo clic sobre ella y a continuacin presiona la tecla suprimir. 5.2.2 - Ejercicio: tu retrato Incorpora un retrato a la informacin personal. En el Texto alternativo puedes poner algo como "Autorretrato".
25/03/2010
Page 97 of 227
Una imagen acta como un elemento ms del prrafo (para ser preciso, como si se tratara de una palabra) por lo que podemos introducir otra imagen justo a continuacin de la que acabamos de insertar. Para eso debers colocar el cursor tras la actual imagen y repetir el procedimiento descrito anteriormente. Prubalo: inserta varias veces tu retrato, previsualiza la pgina y deforma la ventana del navegador. Vers como las imgenes se ajustan a la ventana como si se tratara de las palabras de un texto. Cuando hayas terminado de experimentar suprime las imgenes y deja tan slo una. Echemos un vistazo al panel Propiedades HTML que aparece al seleccionar una imagen. Para seleccionar una imagen basta hacer clic sobre ella.
Presta especial atencin a los campos ancho y alto que permiten alterar el tamao de la imagen (volveremos a ello en el siguiente apartado), al campo vnculo que nos permite hacer que una imagen acte como un hipervnculo y al campo alt que contiene el texto alternativo de la imagen. Localiza tambin los iconos a la derecha del campo borde porque hablaremos de ellos en apartados posteriores.
25/03/2010

Imgenes desde Internet
Page 98 of 227
Para insertar una imagen que no se encuentra en nuestro sitio web, por ejemplo, el logotipo del escudo y el cisne de la Universidad Complutense de Madrid que se encuentra en la direccin http://www.ucm.es/info/ucmp/cont/descargas/documento14970.gif basta con seguir los mismos pasos que antes salvo que en lugar de seleccionar una imagen en el selector de archivos, escribiremos la URL en el campo URL situado en la parte inferior del selector de archivos (copiala y pgala).
De nuevo debemos procurar un valor para el campo Texto alternativo y aceptar el dilogo para que la imagen quede aadida en la pgina web tal y como ocurre a continuacin.
25/03/2010
Page 99 of 227
Tamao de las imgenes Las propiedades ancho y alto indican las dimensiones de la imagen y pueden alterarse. Conviene tener en cuenta un par de observaciones a la hora de trabajar con imgenes:
Si no se respeta la relacin de aspecto (esto es, el cociente del ancho entre el alto) la imagen se deformar. Si la imagen se amplia ms all de sus dimensiones originales, entonces perder calidad.
Para alterar el tamao de una imagen resulta ms cmodo utilizar los puntos de ajuste que aparecen cuando la imagen est seleccionada. Los puntos de ajuste aparecen a la derecha, en la parte inferior y en la esquina inferior derecha de la imagen, en forma de cuadrados. Si tiramos de ellos (o lo que es lo mismo, hacemos clic sobre uno y manteniendo pulsado, desplazamos el ratn) podremos deformar la imagen a voluntad. Si adems, mientras tiramos del punto de la esquina, mantenemos pulsada la tecla shift, forzaremos a mantener la relacin de aspecto y podremos variar el tamao de la imagen sin deformarla.
25/03/2010
Page 100 of 227
Observa cmo mientras arrastras un punto de anclaje, los valores de ancho y alto varan en el panel de propiedades. Ajustes en las imgenes Dreamweaver permite realizar algunos ajustes o correcciones sobre la imagen. Todos ellos modifican el archivo original por lo que si no deshacemos nuestras modificaciones, estas pasarn a formar parte de la imagen de forma irreversible. Por esta misma razn, Dreamweaver slo nos permite modificar imgenes que estn en nuestro equipo. Las imgenes aadidas desde Internet no pueden modificarse. Las tres herramientas que estudiaremos son el recorte, el ajuste de brillo / contraste y el filtro perfilar.
Recorte La herramienta de recorte permite seleccionar un rea de la imagen y eliminar los sobrantes. 5.2.3 - Ejericio guiado: recortando la mirada
25/03/2010

Selecciona la imagen y haz clic en la herramienta recorte, .
Page 101 of 227
Lee el dilogo de advertencia con atencin para comprender lo que explica y a continuacin acepta la advertencia. Precisamente, se refiere al hecho de que los cambios se aplicarn a la imagen y que podemos deshacerlos con el comando deshacer del men edicin o mediante la combinacin ctrl + Z. Aceptado el dilogo, aparecer un rectngulo rematado por ocho puntos de ajuste (uno por esquina y en cada punto medio de los lados del rectngulo). El rea externa al rectngulo aparecer sombreada en gris para indicar la porcin de la imagen que desaparecer tras el recorte. Arrastrando de los tiradores trata de seleccionar el rea que rodea los ojos del retrato.
Si quieres cancelar la operacin de recorte basta con que pulses la tecla esc o hagas clic fuera de la imagen. Si por el contrario ests conformes con nuestro recorte y quieres aceptarlo bastar pulsar la tecla enter. Como nos adverta el mensaje. puedes deshacer el cambio realizado pulsando la combinacin ctrl + Z o haciendo clic en el comando deshacer del men edicin. Deshaz los cambios cuando hayas experimentado lo suficiente. Brillo y contraste La herramienta de brillo y contraste permite variar estos atributos de la imagen. Para utilizarla es preciso seleccionar una imagen y hacer clic en la herramienta brillo y contraste, advertencia que habremos de aceptar para continuar. Aceptado el dilogo, aparecer otro que nos permitir ajustar los valores de brillo y contraste. Observa la casilla vista previa situada abajo a la derecha. . De nuevo aparece el mismo dilogo de
Si activamos esta casilla y desplazamos los controles deslizantes podremos ver el resultado de nuestras modificaciones antes de que tengan lugar sobre la imagen. Cuando estemos de acuerdo con los valores seleccionados, aceptaremos el dilogo. En caso contrario no hay ms que cerrar la herramienta pulsando sobre cancelar.
25/03/2010
Page 102 of 227
Perfilar La ltima herramienta, perfilar, se utiliza de manera muy similar a la anterior. Esta herramienta hace resaltar los bordes de una imagen lo cual es especialmente til para imgenes algo borrosas. De nuevo tendremos que seleccionar la imagen que queremos perfilar para a continuacin hacer clic sobre la herramienta perfilar, . Una vez ms, aparecer el dilogo de advertencia y posteriormente la herramienta. Esta vez contaremos nicamente con un control deslizante y de nuevo la opcin de Vista previa.
Desplazando el control deslizante ajustamos el grado de perfilado.
Imgenes como hipervnculos
25/03/2010
Page 103 of 227
Si observas las propiedades de una imagen, descubrirs que el campo Vnculo se encuentra presente lo que anima a pensar que podemos hacer que una imagen se comporte como el "texto" de un hipervnculo. Y as es. El procedimiento para establecer el vnculo es exactamente el mismo que para los hipervnculos de texto de la Seccin anterior. 5.2.4 - Ejercicio guiado: galera de imgenes Vamos a crear una galera de imgenes. Para ello modificars el archivo fotos.html as que brelo y borra su contenido (si es que haba alguno) y utiliza los encabezados para lograr la siguiente estructura de pgina.

ndice de galeras Lugares que he visitado Fotografas Ilustraciones favoritas
Utiliza tus conocimientos sobre hipervnculos para crear un ndice de la galera y enlazar esta pgina con la pgina principal, index.html. Recuerda tambin incluir enlaces para regresar al ndice de la galera. Ahora, con el explorador de archivos, crea tres carpetas dentro de imagenes llamadas lugares, fotografias e ilustraciones y reparte algunas de tus imgenes (o descarga un paquete de muestra) como mejor te parezca. Recuerda actualizar la vista local para reflejar los cambios. Tambin puedes sincronizar el servidor remoto si lo deseas. Ahora inserta y ajusta el tamao de las imgenes (yo he tratado que todas midan 200 de alto) como explicamos anteriormente para que las cinco fotografas por galera quepan en pantalla a una resolucin normal de 1024x768 o superior. Recuerda que las imgenes son elementos del prrafo por lo que se ajustan al tamao de la ventana del navegador tal y como lo haran las palabras de un prrafo.
25/03/2010
Page 104 of 227
Las imgenes a este tamao estn muy bien para mostrar toda la galera de un vistazo. Sin embargo probablemente queramos que el usuario las pueda disfrutar a tamao real. Para ello vamos a enlazar cada una de ellas con el archivo al que corresponden respectivamente. Utiliza la vista local y la herramienta Sealar archivos como se explic en la Seccin 5.1 para enlazar todas las imgenes. Merece la pena hacer una pequea advertencia: cuando seleccionamos una imagen, el panel Propiedades muestra tres campos que utilizan la herramienta Sealar archivos.
25/03/2010
Page 105 of 227
La primera, origen, indica el archivo con la imagen y es obligatorio. Se establece en el momento que aceptamos el dilogo de eleccin de la imagen. La segunda, vnculo, es la que debes usar para crear un enlace a partir de una imagen. La ltima, original, se refiere al formato original del que se extrajo la imagen (por ejemplo, una imagen en alta resolucin o compuesta de mltiples capas). Este ltimo campo es totalmente opcional y tiene que ver con Dreamweaver en partcular y no con HTML.
25/03/2010
Page 106 of 227
Notars ahora que todas las imgenes tienen un borde azul que indica que las imgenes son hipervnculos. Quitaremos estos bordes cuando estudiemos CSS en la prxima Leccin. En la Seccin 5.1 hicimos incapi en que el texto de un hipervnculo deba estar relacionado con el contenido al que enlaza y por ello, el uso de imgenes supone ciertos problemas de accesibilidad y automatizacin. Por un lado para las personas con problemas de visin y por otro con los buscadores, que apenas puede extraer informacin de una imagen. Es por esto que las pginas deben apoyarse principalmente en el texto para enlazar con otros contenidos. Pese a todo, es cierto que en algunos contextos, los vnculos en imgenes resultan muy tiles y mejoran la usabilidad de una pgina web. Veamos algunos de ellos:
Publicidad. Se puede hacer uso de pequeas imgenes rectangulares, llamadas banners, para atraer la atencin del usuario (a menudo se utilizan imgenes animadas) invitando a que pulse en ellas y dirigindolo a la
25/03/2010

pgina propietaria de la publicidad.
Page 107 of 227
Ttulos. A menudo se espera que el ttulo o el logotipo de un sitio web nos traslade a la pgina principal del sitio web. Galeras. En una galera presentamos pequeas muestras de las imgenes e invitamos al usuario a hacer clic sobre cada una de ellas para enviarlo a una pgina que contenga la imagen a escala real. Iconos de apoyo. Haciendo que un recurso sea accesible tanto a travs de un hipervnculo de texto como de un hipervnculo de imagen.
Mapas de imagen Los mapas de imagen son formas de dividir una imagen en reas diferenciadas. Estas reas pueden convertirse en hipervnculos y servir as para sealar distintos elementos de una imagen de forma independiente. De hecho, el uso de mapas era muy comn en el diseo de pginas ensambladas como las que explicamos en la Seccin 1.3. chale un vistazo al siguiente ejemplo:
Identifica a cada Beatle haciendo clic en cada uno de ellos. 5.2.5 - Ejercicion guiado: pgina de pruebas y mapas Crea una nueva pgina en tu sitio web llamada pruebas.html e inserta la foto de Madrid que encontrars en el paquete de imgenes, carpeta lugares que te proporcionamos anteriormente. Una vez hallas insertado la imagen, busca abajo a la izquierda del rea Propiedades, el apartado Mapa. Da un nombre descriptivo al mapa (campo mapa) y respeta las mismas normas que para los nombres de los estilos. Es decir, usa slo letras y nmeros y no incluyas acentos ni ees.
En la mayora de los casos, basta con seleccionar el modo Zona interactiva rectangular modo Zona interactiva poligonal .
aunque en otros podra hacernos falta el modo Zona interactiva circular
. Si queremos un mayor control sobre la forma utilizaremos el
Elije la Zona interactiva rectangular por el momento y a continuacin haz clic y mantn pulsado sobre el extremo superior izquierdo de la primera torre. Ahora arrastra el cursor hasta la esquina inferior derecha de manera que extiendas un rectngulo azul alrededor de la torre.
25/03/2010
Page 108 of 227
Justo en el momento de soltar aparecer un mensaje advirtindote que deben introducir un Texto alternativo para el rea. Lo podrs hacer en el inspector de Propiedades, debajo del rea de edicin, buscando el campo alt. En este caso puedes especificar algo como "Torre Caja Madrid". Notars ahora que el rea que acabas de delimitar queda rellena de azul. Como ocurra con los puntos de anclaje, las reas son invisibles. El relleno azul es una ayuda de Dreamweaver.
25/03/2010
Page 109 of 227
Para volver al modo de edicin de texto, pulsa la tecla escape. 5.2.6 - Ejericio: torres poligonales Descubre por ti mismo cmo utilizar la herramienta poligonal y sala para ajustar en la medida de lo posible las reas al perfil de las cuatro torres.
25/03/2010
Page 110 of 227
Puedes modificar cualquier rea haciendo clic sobre ella. Utiliza las marcas cuadradas situadas en los vrtices para cambiar la forma del rea. Tambin puedes trasladar el rea sin deformarla haciendo clic sobre el centro de una de las reas. Mientras mantienes pulsado, mueve el ratn para cambiar la posicin del rea. Por ltimo, tambin puedes suprimir un rea haciendo clic en ella desde el modo de edicin y pulsando la tecla supr. Recuerda siempre que si te equivocas, puedes deshacer el ltimo paso con la combinacin de teclas ctrl + Z. 5.2.7 - Ejercicio: reas como hipervnculos Las reas pueden convertirse en hipervnculos como lo haramos con imgenes o textos. Para ello haz clic en cada rea y modifica los campos alt y vnculo para establecer el nombre de cada torre e informacin extra de la Wikipedia. Te proporcionamos los datos de las torres de izquierda a derecha: Nombre Torre Caja Madrid Torre de Cristal Torre Espacio Entrada en la Wikipedia http://es.wikipedia.org/wiki/Torre_Caja_Madrid http://es.wikipedia.org/wiki/Torre_de_Cristal_%28Madrid%29 http://es.wikipedia.org/wiki/Torre_Espacio
Torre Sacyr Vallehermoso http://es.wikipedia.org/wiki/Torre_Sacyr_Vallehermoso
25/03/2010
Page 111 of 227
Cuatro Torres Business Area
5.3. Seccin 5.3 - Tablas Seccin 5.3 - Tablas

Creacin de una tabla NOTA: A lo largo de esta leccin vers que nuestras tablas tienen estilos, esto es as porque en las pginas del propio curso usamos CSS, pero influir sobre el desarrollo de la Seccin. Las tablas son elementos muy interesantes puesto que nos permiten distribuir la informacin por categoras lo que supone un mejor y ms rpido entendimiento por parte del lector. Los elementos que componen una tabla son las celdas que pueden ser cabeceras, si describen la naturaleza de los datos presentados; o valores, si contienen alguna informacin. Dreamweaver dispone de una herramienta sencilla y potente para crear tablas que puede encontrarse en el panel insertar, un par de iconos por encima del botn de insertar imgenes. Sobre el botn puede leerse claramente la palabra Tabla, .
El dilogo posee tres partes diferenciadas:
25/03/2010
Page 112 of 227
En tamao de la tabla debemos especificar el nmero de filas y columnas as como el ancho de la tabla. El ancho puede fijarse en unidades absolutas (pxeles) o relativas (porcentaje). El grosor del borde indica el nmero de pxeles que se dedicarn a dibujar el borde de cada celda. El relleno de celda indica la separacin entre el contenido de la misma y sus bordes mientras que el espacio entre celdas indica la separacin entre las celdas en s. En encabezado podemos escoger la posicin de las celdas de encabezado. Las ilustraciones son lo suficientemente claras como para dar una idea de lo que representan por s mismas. Por ltimo accesibilidad contiene un par de campos que deberamos de completar (aunque no son obligatorios) para que aquellas personas con discapacidades pueden hacerse una idea de lo que representa la tabla. El texto acta como un pie de tabla salvo que Dreamweaver lo sita sobre esta. En resumen podemos describir la tabla de manera ms extensa extrayendo las conclusiones ms importantes de los datos presentados. Cuando todos los campos tengan los valores correctos, haz clic en Aceptar para insertar una nueva tabla. Podrs ver unas guas verdes sobre ella que aparecern siempre que estemos editando la tabla.
25/03/2010
Page 113 of 227
Para rellenar la tabla tan slo debemos hacer clic sobre la celda que queramos llenar y escribir el texto. Pasar a la siguiente celda es tan fcil como pulsar tabulador y volver a la anterior, shift + tabulador. 5.3.1 - Ejercicio: pruebas con tablas Abre el fichero pruebas.html que creaste en la Seccin 5.2 (apartado Mapas de imagen) e inserta una tabla de la manera que acabamos de describir. La tabla tendr 6 filas y dos columnas. Un ancho de 200 pxeles y las cabeceras se situarn en la primera fila. Cabeceras Por lo general, las cabeceras muestran el texto centrado y resaltado en negrita. Si queremos que alguna celda extra tambin sea cabecera debemos hacer clic en la celda y en el panel de propiedades, activar la casilla enc.
Debemos insistir en que es posible que el efecto de encabezado no sea del todo de tu agrado, o que desees que el resto de valores tambin aparezcan centrados pero el hecho de marcar una celda como cabecera no es una cuestin de estilo, es una cuestin semntica. Marcar la celda como cabecera significa que rotula algo (da nombre a una categora de informacin). En la prxima Leccin, aprenderemos a cambiar el estilo predeterminado de los elementos HTML mediante CSS. 5.3.2 - Ejercicio: completa la tabla Completa la tabla con los datos de las cinco pelculas ms taquillera de todos los tiempos, de la IMDB. Haz que los nombres de las pelculas sean enlaces a sus respectivas entradas en la Wikipedia o en la IMDB.
Recaudacin de las cinco pelculas ms taquilleras

Pelcula Avatar (2009) Titanic (1997) The Lord of the Rings: The Recaudacin $2,467,962,011 $1,835,300,000
25/03/2010

Return of the King (2003) $1,129,219,252
Page 114 of 227
Pirates of the Caribbean: Dead $1,060,332,628 Man's Chest (2006) The Dark Knight $1,001,921,825 (2008) Como puedes observar, el tamao de la tabla no es el ms adecuado para albergar el contenido pero esto lo arreglaremos en el prximo apartado. Guas de la tabla y seleccin de elementos de la tabla Si hacemos clic sobre una celda cualquiera, podremos observar unas guas sobre la tabla. Estas indican el ancho en pxeles de la tabla y sus columnas pero adems sirven para realizar operaciones sobre el ancho. Si en algn momento las guas desaparecen, slo tenemos que hacer clic en una celda cualquiera para que vuelvan a aparecer. Para seleccionar una tabla entera debemos hacer clic sobre el botn de la gua y elegir Seleccionar tabla.
Cmo seleccionar la tabal entera Tambin podemos seleccionar las filas y columnas de una tabla independientemente. Si situamos el ratn (sin hacer clic) justo encima del borde de la primera celda, se resaltar en rojo toda la columna. Cuando hagamos clic los bordes se destacarn en negro y estaremos seleccionando una columna entera.
25/03/2010
Page 115 of 227
Seleccin de una columna Del mismo modo si llevamos el ratn justo antes del borde izquierdo y lo situamos a la altura de cualquier celda (de nuevo sin pulsar), veremos como la fila encabezada por esa celda se resalta en rojo. Para seleccionarla basta con hacer clic.
Seleccin de una fila Si pulsamos y mantenemos presionada la tecla ctrl, podemos seleccionar una celda haciendo clic sobre ella. Si seguimos pulsando ctrl, podremos seleccionar ms de una. Si en cualquier momento queremos deseleccionar una de ellas, haremos clic sobre esta sin dejar de pulsar ctrl.
25/03/2010
Page 116 of 227
Seleccin de algunas celdas Cambiar el ancho de la tabla Con una tabla seleccionada, el panel de propiedades muestra las propiedades HTML de los elementos tabla. El campo ancho sirve para modificar la extensin horizontal de la tabla y puede especificarse de manera absoluta o relativa. Si fijamos el ancho a algn valor en pxeles, entonces la tabla ocupar exactamente esto independientemente del tamao de su contenedor (normalmente, la ventana). Si por el contrario fijamos el valor como un porcentaje, entonces la tabla slo ocupar este porcentaje de su contenedor. 5.3.3 - Ejercicio guiado: ancho de la tabla Selecciona la tabla y ve al panel de propiedades HTML para modificar su anchura por 900 pxeles. Observa el resultado en el explorador.
Recaudacin de las cinco pelculas ms taquilleras (ancho fijo)

Pelcula Avatar (2009) Titanic (1997) The Lord of the Rings: The Return of the King (2003) Pirates of the Caribbean: Dead Man's Chest (2006) The Dark Knight (2008) Recaudacin $2,467,962,011 $1,835,300,000 $1,129,219,252 $1,060,332,628 $1,001,921,825
Ahora cierra el navegador y reemplaza el ancho por un valor del 60%. Vuelve a visualizar la pgina en el navegador y cambia el ancho de la ventana. Observars como la tabla vara de extensin tratando de ocupar siempre el 60% del ancho del elemento que lo contiene (en tu caso, la ventana).

Pelcula Avatar (2009) Titanic (1997) The Lord of the Rings: The Return of the King (2003) Recaudacin $2,467,962,011 $1,835,300,000 $1,129,219,252
25/03/2010

Pirates of the Caribbean: Dead Man's Chest (2006) The Dark Knight (2008) $1,060,332,628 $1,001,921,825
Page 117 of 227
Para volver a fijar el ancho, debes desplegar la lista de unidades que acompaa al campo Ancho y asegurarte de que se halla en pix. Ahora ajustaremos el ancho al contenido, para ello haz clic en el botn de la gua y selecciona la opcin Borrar todos los anchos. Esto ajustar la tabla al contenido.
Recaudacin de las cinco pelculas ms taquilleras (ancho automtico)

Pelcula Avatar (2009) Titanic (1997) Pirates of the Caribbean: Dead Man's Chest (2006) The Dark Knight (2008) Recaudacin $2,467,962,011 $1,835,300,000 $1,060,332,628 $1,001,921,825
The Lord of the Rings: The Return of the King (2003) $1,129,219,252
Habiendo seleccionado una o ms celdas, podemos observar una serie de campos especiales en la parte inferior del panel de Propiedades.
El campo an. indica el ancho de la seleccin de celdas. Esto es muy interesante cuando contamos con cabeceras a la izquierda o derecha y deseamos limitar el espacio destinado a las cabeceras frente a los datos. Si escribimos un nmero en el campo An. este valor se entender como una cantidad de pxeles fijos. Si introducimos un smbolo de porcentaje (%) final, el nmero se interpretar como el ancho relativo al ancho de la tabla. As, si la tabla slo puede ocupar el 60% del rea til y nosotros limitamos una columna a un ancho del 40%, entonces el ancho de la columna habr quedado fijado a un 24% del rea til (60% 40% = 24%). Aadir filas o columnas Teniendo una fila o columna seleccionada y haciendo clic derecho podemos acceder a un nuevo men contextual a travs de la opcin Tabla. Este men contiene las opciones Insertar fila e Insertar columna de las que hablaremos en este apartado.
25/03/2010
Page 118 of 227
Es conveniente escoger la opcin Insertar fila cuando se ha seleccionado una fila y del mismo modo, seleccionar Insertar columna cuando se tiene seleccionada una columna. Estas opciones insertan una sola fila o columna antes de la fila o columna seleccionada. 5.3.4 - Ejercicio guiado: nueva columna Vamos a separar el ao de las pelculas en su propia columna. Para ello selecciona la segunda columna, ve al men contextual y despliega las opciones de las tablas, haz clic sobre Insertar columna. De esta forma conseguimos una nueva columna entre Pelcula y Recaudacin. Rotulamos la nueva columna como Ao y copiamos los aos de estreno de cada pelcula.
Recaudacin de las cinco pelculas ms taquilleras (nueva columna con el ao de estreno)

Pelcula Avatar Titanic The Lord of the Rings: The Return of the King Pirates of the Caribbean: Dead Man's Chest The Dark Knight Ao 2009 1997 2003 2006 2008 Recaudacin $2,467,962,011 $1,835,300,000 $1,129,219,252 $1,060,332,628 $1,001,921,825
Si quisieras introducir varias filas o columnas de golpe, tendras que seleccionar la opcin del men contextual Insertar filas o columnas... que te llevara al siguiente dilogo.
25/03/2010
Page 119 of 227
En l debes decidir si queremos aadir nuevas filas o columnas, el nmero de ellas y la posicin relativa a nuestra seleccin. 5.3.5 - Ejercicio: TOP-7 Amplia el TOP-5 a un TOP-7, insertando 2 nuevas filas tras la ltima de todas. Consulta el enlace a la IMDB para conseguir la informacin que te falta. Eliminar filas o columnas Eliminar una fila o columna es una operacin sencilla. Basta seleccionar de la manera que hemos aprendido la fila o columna deseada y pulsar la tecla suprimir. Tambin podemos hacer clic en la opcin Eliminar fila (o Eliminar columna) del submen Tabla del men contextual. Combinar y dividir celdas Una tabla no tiene por qu tener una forma regular. Considera el siguiente ejemplo basado en la tabla para nivel de idiomas del modelo de currculum Europass.
Ejemplo de nivel de idioma

Idioma Ingls Francs Comprensin Oral C1 B2 Escrita C2 B2 Expresin oral Interaccin oral C2 C1 Expresin oral C1 B2 Expresin escrita B2 B2
Para lograr una tabla como esta tenemos que partir, o bien de una tabla sencilla, e ir aadiendo columnas y filas para luego combinar sus celdas; o bien comenzar con una tabla ms compleja y luego ir combinando sus celdas. Para unir dos o ms celdas. estas deben ser adyacentes y estar seleccionadas. Luego haremos clic en el botn Combinar celdas del panel de Propiedades o elegiremos la opcin Combinar celdas del men contextual de la tabla.
Del mismo modo, si queremos dividir una celda (o un conjunto de ellas), haremos clic sobre la celda que queramos dividir y a continuacin sobre el botn Dividir celdas...
Esta accin desplegar el siguiente dilogo donde podremos especificar si queremos dividir la celda en filas o columnas y el nmero de ellas.
25/03/2010
Page 120 of 227
5.3.6 - Ejercicio: tabla de idiomas Trata de copiar la tabla de idiomas anterior. Presta atencin a las nuevas celdas cabecera tales como Interaccin Oral o Expresin Oral. Utiliza para ello primero una tabla regular de 4 filas por 4 columnas con las cabeceras en la parte superior y luego repite el ejercicio partiendo de una tabla de 1 fila por 1 columna sin cabeceras. Antes de continuar, un par de observaciones: la primera es que combinar dos o ms celdas que incluyan una celda cabecera har que la nueva celda resultante tambin sea cabecera. De la misma manera, dividir una celda cabecera en dos o ms, har que las resultantes tambin lo sean. La segunda es que el contenido de una celda puede ser cualquiera, includos hipervnculos, imgenes o listas, incluso otras tablas. A incluir una tabla dentro de otra se lo llama anidamiento de tablas. Alineamiento de la celda Podemos controlar la posicin del contenido de una celda (o de una seleccin de celdas) mediante el panel de Propiedades de la celda. Bastar con modificar el valor de los campos horiz. y vert. Los valores del primero pueden ser izquierda, centro y derecha y representa el alineamiento horizontal mientras que el segundo puede adoptar los valores superior, medio, inferior y lnea base y representa el alineamiento vertical. La siguiente tabla recoge las combinaciones de estos valores.
Resumen de los alineamientos de celda ms comunes

Izquierda + Superior har que el contenido se site en la esquina superior izquierda Centro + Superior har que el contenido se site en el centro y arriba Derecha + Superior har que el contenido se site en la esquina superior derecha
Izquierda + Medio har que el contenido se site a media altura, y a la izquierda.
Centro + Medio representa un alineamiento totalmente centrado
Derecha + Medio har que el contenido se site a media altura, a la derecha.
Izquierda + Inferior har que el contenido se site en la esquina inferior izquierda
Centro + Inferior har que el texto se pegue abajo y se mantenga centrado
Derecha + Inferior har que el contenido se site en la esquina inferior derecha
NOTA: Para que el alineamiento de la celda surta efecto es necesario que el contenido no sea parte de ningn prrafo o elemento de encabezado. Para ello asegrate de que el formato del texto en el interior de la celda es Ninguno o cambialo manualmente (recuerda, cuadro desplegable Formato, del panel de propiedades HTML). 5.3.7 - Ejercicio: completa la pgina de currculum
25/03/2010

Nota: acurdate de poner ttulo a todas las pginas web. Repasa la Leccin 4.1 para saber cmo se hace esto.
Page 121 of 227
Vas a completar la pgina de currculum, usa las tablas para describir los trabajos en los que has estado y la formacin que has recibido as como para representar tu nivel de idiomas como acabamos de ver. Te dejo mi versin del currculum para que la tomes de referencia. Considera tambin las siguientes notas: 1. 2. 3. 4. 5. Todas las tablas tienen un ancho del 60% Todas las tablas tienen un relleno de celda de 4 pxeles Los encabezados, en la mayora de los casos, se encontrarn a la izquierda y su columna ocupar un mximo del 40% Se usarn listas en vez de prrafos normales cuando la situacin lo requiera La tabla de idiomas se encuentra en el interior de una celda y no posee ancho mximo por lo que se ajustar automticamente al contenido
Antes de terminar, sincroniza el servidor remoto.
Has concludo la Leccin 5. Ahora debes comprimir en un ZIP todos los archivos de tu sitio web y enviar el comprimido a tu tutor para que sea corregido. Utiliza el ejercicio identificado como Leccin 5 de la herramienta Entrega de ejercicios.
6. Leccin 6: Introduccin a CSS2 - 1 parte Leccin 6: Introduccin a CSS2 - 1 parte

Requisitos previos
Comprensin de la filosofa de los lenguajes de marcado vista en la Leccin 1 Comprensin del trmino anidamiento de elementos HTML Conocimiento y dominio de los elementos HTML vistos en las Lecciones 4 y 5
Planteamiento
Familiarizar al alumno con los nombres de las etiquetas de los elementos HTML ms comunes Ensear al alumno las distintas clases de propiedades CSS y sus implicaciones Ensear al alumno a redefinir los elementos ms comunes de HTML
Secciones 1. 2. 3. 4. Diseo con elementos DIV Hojas de estilo Estilos de fondo, texto y listas El modelo de caja y formato de imgenes
Debes estudiar las secciones en el orden en el que se encuentran. Duracin estimada Dada la severa novedad de los conceptos introducidos en esta leccin y la longitud de las secciones, sta debera completarse en un plazo de 6 sesiones de 2 a 3 horas.
Curso de Formacin Informtica de Dreamweaver
25/03/2010

por Salvador de la Puente Gonzlez est licenciado bajo Creative Commons Reconocimiento 3.0 Espaa License.
Page 122 of 227
6.1. Seccin 6.1 - Diseo con elementos DIV Seccin 6.1 - Diseo con elementos DIV
El Explorador de jerarqua Justo debajo del rea de edicin e inmediatamente antes del panel de propiedades se encuentra el explorador de jerarqua, una estrecha barra que indica el tipo de elemento sobre el que se encuentra el cursor as como todos sus ancestros. Ya hemos dicho que HTML es un lenguaje basado en anidamientos, por ejemplo: un texto enfatizado puede estar dentro de una cita en medio de un prrafo que pertenezca al cuerpo del documento. Justo esta situacin la podemos observar en la siguiente imagen.
Observa como el primer elemento de la jerarqua es el <body> o cuerpo de la pgina, en su interior hay un <p> o prrafo, despus encontramos un elemento <cite> o cita y por ltimo un elemento <em> o enfatizado. El nombre del elemento es el texto entre las marcas de etiqueta < y >. El explorador de jerarquas es til de cara al diseo porque nos recuerda el nombre del elemento que queremos modificar y permite recordar de un vistazo cmo se encuentran anidados los distintos elementos. Adems, permite seleccionarlos de manera rpida con slo hacer clic sobre el nombre del elemento. Por ejemplo, como veremos en las prximas lecciones, si quisiramos cambiar el estilo del prrafo, tendramos que seleccionar el nombre de selector p, y si quisiramos redefinir la cita, usaramos el nombre de selector cite. Del mismo modo, para seleccionar la cita bastara con hacer clic sobre <cite> en el explorador de jerarqua. La maqueta o layout Hemos aprendido a usar los principales elementos de HTML pero nuestra pgina web dista mucho de parecerse a lo que se denomina hoy da, un diseo moderno. Aunque hemos hecho un buen uso de HTML 4, no hemos realizado ninguna labor de diseo actualizado. Ahora vamos a aprender a utilizar la tcnica de diseo con divs y CSS de la que hablamos en la Seccin 1.3. A la distribucin de los elementos que conforman una pgina web se la denomina maqueta o layout. Una maqueta est compuesta por una estructura anidada de bloques, los cuales sirven de contenedores de informacin o de otros bloques. 6.1.1 - Ejercicio: reconoce el layout Trata de identificar en los siguientes ejemplos, la cabecera con el ttulo, el cuerpo con el contenido, el men principal con las secciones de la pgina y los contenidos extra en las columnas laterales:

http://www.maikelnai.es/ http://delicious.com/ http://es.wordpress.com/ http://www.apple.com/ http://www.bde.es/webbde/es/ http://www.w3schools.com/ http://psd.tutsplus.com/
Desglosemos por ejemplo el layout de la pgina PSDTuts. Comenzamos por una divisin sencilla en cabecera, men, contenido y columna lateral.
25/03/2010
Page 123 of 227
La con el ttulo y un banner de publicidad, debajo el men con las secciones y subsecciones y debajo dos bloques, uno central con el contenido y otro lateral, a la derecha con ms publicidad.
El pi de pgina con, de nuevo, el ttulo, los enlaces relacionados, el copyright y las formas de contacto. La cabecera La cabecera es el lugar que ocupa la parte superior de la pgina. Se usa para presentar el ttulo, la barra de bsqueda y, en pginas con publicidad, el banner (la imagen publicitaria) inicial.
25/03/2010

El men
Page 124 of 227
Incluye una relacin de enlaces a las distintas partes de la pgina. Normalmente, las secciones llevarn a sub-secciones de manera que la pgina se organice en niveles. De esta forma, el men acta como un reflejo de la jerarqua de la pgina web. El men suele aparecer bien de forma horizontal tras la cabecera o como parte de ella; bien verticalmente como parte de la columna lateral. El contenido Este rea suele ocupar la regin central de la pgina y es la ms grande pues alberga los textos principales de la pgina. La columna lateral Ocupa uno de los laterales de la pgina web y suele ser ms estrecha que el rea de contenido. Suele contener enlaces secundarios o ms publicidad. El pi de pgina Contiene informacin extra sobre la pgina: copyright, enlaces a otras pginas, mail del autor. Sirve para cerrar la pgina de la misma forma que la cabecera serva de introduccin. Por supuesto, este layout, aunque muy utilizado, no es ms que uno de tantos y Dreamweaver ofrece una coleccin bastante extensa de maquetas. Hay que notar adems que cada bloque puede contener tantos otros y que estos subbloques pueden estar compuestos a su vez, de aun ms. Esta es la situacin que se observa en las siguientes figuras donde se muestra el desglose del rea de contenidos y de una de sus noticias:
Dos tutoriales dentro del rea de contenido, cada uno es un bloque distinto
25/03/2010
Page 125 of 227
El desglose de un tutorial en imagen (a la izquierda), ttulo e introduccin (en medio) y nmero de comentarios, Com, a la derecha y arriba. Las maquetas de Dreamweaver Haciendo clic en Archivo, opcin Nuevo... se abrir el siguiente dilogo que nos permitir escoger la maqueta de nuestra pgina:
25/03/2010
Page 126 of 227
Podemos seleccionar la maqueta que queramos en el rea de seleccin bajo la etiqueta Diseo. Si no queremos ninguna maqueta seleccionaremos la opcin <ninguno>. A la derecha encontramos una previsualizacin y justo debajo, una pequea descripcin textual. Si hacemos clic en Crear obtendremos una pgina web con este formato rellena de texto de prueba para probar el contenido y algunas anotaciones para realizar cambios en la maqueta.
25/03/2010
Page 127 of 227
Las distintas reas generadas por Dreamweaver destacan por estar recuadradas mediante lneas discontinuas. Puedes salvar y probar la pgina (o activar la Vista en vivo) para comprobar cmo se vera en un explorador. Dentro de cada rea puedes incluir cualquier elemento de los que hemos visto hasta ahora. 6.1.2 - Ejercicio: maquetas de Dreamweaver Como ejercicio, crea un nuevo documento con maqueta y elige el diseo que ms te guste. Copia el contenido de tu currculum a esta pgina y observa los resultados. Puedes decargar nuestra versin de este ejercicio, yo he elegido el diseo 2 columnas flotantes, barra lateral derecha, encabezado y pie. Puedes borrar o no guardar este archivo porque no lo usaremos en adelante. Elementos DIV
25/03/2010
Page 128 of 227
En la actualidad, el elemento HTML de diseo por excelencia es el div o bloque del que ya hablamos en la Seccin 1.3. Su uso se ha extendido tanto que ya no se suele hablar de reas de contenido sino de divs y esta es la nomenclatura que utilizaremos a partir de ahora. La combinacin de elementos div y hojas de estilo es la piedra angular del diseo de pginas web moderno. Un elemento div se dice que es "de bloque" puesto que rene un conjunto de elementos que desempean (o comparten) una funcin en una unidad independiente. As, todos los elementos de la cabecera de PSDTuts perteneceran a un div llamado "cabecera" y los distintos enlaces que forman el men pertenecern a un div llamado "menu". El nombre del div se suele denominar identificador o ID, lo elige el diseador (es decir, nosotros) y no puede repetirse en el resto de la pgina (no as en el sitio web, el nombre se puede repetir en pginas distintas pero no en el mismo documento). Como aun no hemos hablado de CSS, aprenderemos a dividir nuestro documento en divs pero no les aplicaremos ningn estilo. Para nosotros no sern ms que un montn de cajas apiladas unas encima de otras. 6.1.3 - Ejercicio guiado: estableciendo los divs de la maqueta Asegrate de tener seleccionado el sitio MiSitioWeb en el explorador de archivos y aade una nueva pgina web en blanco. Llmala maqueta.html Dividiremos nuestro documento en:

Cabecera: con el ttulo de nuestra web personal Columna lateral izquierda: con el men a las distintas secciones Contenido: con los textos principales Pie de pgina: con los agradecimientos, el copyright y nuestro correo electrnico
Nuestra maqueta, los nombres de los div, precedidos por la almohadilla, sin acentos y sin espacios cobrarn sentido en unos momentos. Para ello, en el panel Insertar, a la derecha del rea de edicin, haremos clic sobre Comn lo que desplegar el men de seleccin de paneles. Advierte como el panel por defecto es Comn y luego selecciona Diseo haciendo clic
25/03/2010

sobre l.
Page 129 of 227
Para insertar un elemento div haz clic sobre Insertar etiqueta Div. Se abrir el cuadro de dilogo de Insertar etiqueta Div.
Los campos ms importantes aqu son el cuadro desplegable Insertar y el cuadro de texto ID. El primero especifica dnde insertar el elemento div mientras que el segundo nos permite nombrarlo. Configura el dilogo como aparece en la ilustracin y haz clic en Aceptar para comprobar que se ha insertado el div.
25/03/2010
Page 130 of 227
Para seleccionar el elemento div sita el ratn sobre la lnea discontinua y comprueba cmo se vuelve roja y continua antes de hacer clic. Tambin podemos situarnos en su interior y hacer clic sobre el elemento <div> en el Explorador de jerarqua.
Observa como el explorador de jerarqua indica que se trata de un div con nombre aadiendo el smbolo almohadilla y el identificador al nombre del elemento. Para dar nombre a un div que no tuviera, o realizar un cambio en el identificador del mismo basta seleccionarlo y cambiar el campo ID de div del panel de propiedades HTML del elemento.
25/03/2010
Page 131 of 227
Debes insertar 3 divs ms con los nombres "menu", "contenido" y "pie" respectivamente. No obstante, si ahora repitieras los pasos anteriores, insertaras los nuevos divs dentro del elemento div actual, lo cual es interesante pero no es lo que necesitamos en este momento. Lo que necesitas es insertar el elemento despus del actual y para eso es importante elegir correctamente el valor del campo Insertar del dilogo anterior. Para ilustrar su funcionamiento, insertaremos los divs en un orden distinto del natural. Haz clic de nuevo sobre Insertar etiqueta Div. Ahora establece el valor del cuadro desplegable Insertar a Despues de la etiqueta y observa como aparece otro cuadro desplegable a la derecha del actual que indica detrs de qu etiqueta se debe insertar el nuevo div. Deja los valores como se indica en la figura para crear el div del contenido:
Haz clic de nuevo sobre Insertar etiqueta Div pero ahora selecciona Delante de la etiqueta. De nuevo aparecer un segundo cuadro desplegable en el que debers elegir aquel div con ID igual a "contenido". Su ID ser "menu".
No confundas las opciones Delante de la etiqueta y Despus de la etiqueta con Despus del inicio de la etiqueta y Antes del inicio de la etiqueta. Los dos primeros sirven, como acabamos de ilustrar, para insertar elementos div antes o despus de un determinado elemento respectivamente. Las dos ltimas sirven para anidar el nuevo elemento div dentro de otro elemento, al principio o al final respectivamente. Si recuerdas el tema 1, recordars que los elementos HTML se anidan unos dentro de otros y que para anidar un elemento, este se debe escribir entre las etiquetas del elemento que debe contenerlo, de ah esos nombres. Como habrs observado, falta el pie de pgina. Insertars este ltimo de otra forma. Haz clic debajo y fuera del div llamado "contenido". Escribe el siguiente texto:
25/03/2010

Esta pgina pertenece a [pon tu nombre]. Todos los derechos reservados.
Page 132 of 227
Asegrate de que el formato de la lnea es Prrafo tal y como aprendiste en la Seccin 4.1. Ahora, haz clic en el elemento <p> del explorador de jerarqua para seleccionar el prrafo y haz clic una vez ms en Insertar etiqueta Div. Esta vez elige la opcin Ajustar alrededor de la seleccin y como nombre elige "pie_de_pagina".
NOTA: Como ocurra con los nombres de los puntos de anclaje, los identificadores de los div deben cumplir las siguientes reglas:

Slo pueden contener caracteres del alfabeto ingles (esto es, ni caracteres acentuados, ni ees), guiones bajos y nmeros No se permiten espacios, utiliza guiones bajos o separa las palabras con maysculas como en "pie_de_pagina" o "pieDePagina" No pueden empezar por un nmero Se distingue entre maysculas y minsculas luego los nombres "cabecera", "CaBeCeRa" y "CABECERA" son distintos No pueden repetirse dentro de un mismo documento
Presta atencin a esto porque Dreamweaver no te avisar de que exista un error si no cumples estas normas. Esto es as, porque las normas son una buena prctica (y no una obligacin) que tiene que ver con la programacin (y no con el diseo) de pginas web. El resultado final debera parecerse a esto:
25/03/2010

6.1.4 - Ejercicio: maquetando el sitio web. Tomando como referencia esta maqueta, modifica las pginas currculum.html, datos.html y fotos.html para que se ajusten al layout.
Page 133 of 227
Comienza por el div de contenido, selecciona toda la pgina y rodala por el div de contenido (que no se te olvide el identificador). NOTA: si quieres seleccionar todo el contenido haz clic en la etiqueta body del explorador de jerarqua. Si ahora insertas un div tal y como explicamos anteriormente, este rodear todo el contenido del cuerpo, no el cuerpo en s dado que no puede haber nada rodeando al elemento cuerpo. Adems, incluye el contenido (ignora los ttulos) de las pgina index.html y contacto.html dentro de los divs menu y pie_de_pagina de cada pgina. Borra los enlaces que ya no son necesarios (como el de regreso a la pgina index.html dado que ahora se encuentra visible en todas las pginas) y aade al men un nuevo enlace con el texto "Galera de imgenes" que vincule a fotos.html. Descarga nuestra pgina de datos como referencia.
25/03/2010

6.2. Seccin 6.2 - Hojas de estilo Seccin 6.2 - Hojas de estilo
Creacin de la hoja de estilo
Page 134 of 227
En la Leccin 1 y en la Seccin 4.2 pusimos nfasis en que el lengaje HTML nos permite aportar significado al texto, no estilo grfico. Iinsistimos en que con HTML marcamos qu es un texto, no cmo se representa. En la Seccin 4.3 introducimos el lenguaje CSS para definir estilos y aprendimos a dar color. Ahora vamos a adentrarnos de lleno en el uso de estilos CSS pero haciendo uso de las herramientas visuales de Dreamweaver, para no tener que lidiar con cdigo. Las capacidades de CSS2 son tantas que resultara imposible listarlas y explicarlas todas. A lo largo de esta Leccin ofreceremos configuraciones interesantes de estilo que ilustrarn las propiedades ms comunes e interesantes. En Internet hay muchos recursos tanto en espaol como en ingls donde encontrar informacin adicional. Lo que haremos ahora sera crear una hoja de estilo que no es ms que un documento que se adjunta a una pgina web para indicar cmo deben representarse sus elementos. 6.2.1 - Ejercicio guiado: creacin de la hoja de estilo Abre la pgina pruebas.html que creamos en la seccin 6.2. Si no la creaste, este es el momento: basta con una pgina en blanco, no es necesario que especifiques ningn diseo. Repasa los conceptos aprendidos en la Leccin 4 insertando algunos encabezados de distinto nivel as como un par de prrafos de prueba, listas de definicin, listas ordenadas y no ordenadas y algunos estilos HTML. Cuando hayas terminado ve al men Formato, all a Estilos CSS y por ltimo a Nuevo... Puedes descargar nuestra pgina de pruebas si quieres.
Esto desplegar el dilogo de nuevo estilo que configuraremos como se indica en la figura.
25/03/2010
Page 135 of 227
Mientras que en la Seccin 4.3, para definir un color, crebamos una clase nueva, esta vez vamos a redefinir cmo debe verse cierto elemento HTML. Por ello, en Tipo de selector elige Etiqueta (redefine un elemento HTML). El elemento que aparece por defecto es aquel que se encuentre seleccionado o sobre el que est situado el cursor. En Nombre del selector escribiremos body (o lo seleccionaremos del cuadro desplegable) porque es precisamente el elemento <body> de HTML (el cuerpo del documento, es decir, la parte visible de la pgina web) el que queremos redefinir. Por ltimo saber que los estilos CSS pueden definirse o bien dentro de cada pgina web (si, como en la Seccin 4.3, en el campo Definicin de regla seleccionamos la opcin (Slo este documento)) o bien en un archivo a parte, como haremos ahora. Para ello elige la opcin (Nuevo archivo de hoja de estilos). Al hacer clic sobre Aceptar se nos preguntar por una ubicacin para guardar la hoja de estilo. Ve a la raz del sitio, dale el nombre estilo.css y haz clic en Guardar.
25/03/2010
Page 136 of 227
A continuacin se abrir el dilogo de definicin de regla que estudiaremos en profundidad a lo largo de todo este tema. Las propiedades CSS estn en un ingls sencillo y autoexplicativo. Para este ejemplo, modificaremos las propiedades font-family (familia de fuente) y font-size (tamao de fuente). Trata de dejar los valores como se indica en la imagen y pulsa Aplicar. Vers como, tanto la fuente de la pgina como su tamao cambian notablemente, aunque la ventana de dilogo permanece abierta. Prueba otras configuraciones y haz clic en Aplicar para comprobar sus efectos. Procura que la configuracin quede como en la figura antes de pulsar Aceptar.
25/03/2010
Page 137 of 227
NOTA: Se necesita definir al menos un estilo para que Dreamweaver cree la hoja de estilo. La vers aparecer en la vista local del explorador de archivos con la terminacin .css que es como suelen terminar las hojas de estilo (si no aparece, utiliza el botn Actualizar). Parece que el tamao de letra es demasiado pequeo y el colores demasiado estridente, vamos a cambiar la regla para que el tamao sea de 14px 16px en vez de 10px y en lecciones posteriores oscureceremos el fondo para lograr un mejor contraste. Para ello, a la derecha del rea de edicin se encuentra el panel Estilos CSS con las reglas actualmente definidas en la hoja de estilo.
25/03/2010
Page 138 of 227
Si no ves el estilo, fjate si aparece un signo + a la izquierda del nombre de la hoja de estilo y haz clic sobre l para desplegar el contenido de la misma. La parte superior, Todas las reglas, presenta las reglas de la hoja de estilo mientras que la parte inferior, Propiedades de "[nombre de la regla]", muestra las propiedades de cada regla. El rea de propiedades del panel permite manipular los valores de las propiedades de forma rpida y visual. De esta forma, haz clic sobre el valor de font-size lo que mostrar un cuadro desplegable para seleccionar los tamaos ms comunes y sus unidades. Establece el nuevo valor en 14px y automticamente vers actualizado el estilo.
Si prefieres editar la regla desde el cuadro de dilogo haz doble clic sobre el nombre de la regla en el rea Todas las reglas o haz clic con el botn derecho sobre la regla y a continuacin elige Edicin... en el men contextual. Para practicar, cambia por ti mismo el color de fondo al cdigo #434039 (propiedad background-color, seccin Fondo). Puedes probar otras configuraciones de color si quieres y comprobar el efecto haciendo clic en Aplicar pero procura dejar la configuracin de la figura antes de continuar pulsando Aceptar.
25/03/2010
Page 139 of 227
Observa como encima del rea de edicin, justo sobre los botones de cambio de vista, se encuentra una barra que muestra el siguiente aspecto.
Las pestaas te sern familiares: muestran los archivos abiertos en cada momento. Como en multitud de aplicaciones, aquellas pestaas marcadas con un asterisco indican que no estn guardadas. La novedad se encuentra en la barra con las opciones Cdigo fuente y estilo.css*. Esta barra rene todos los documentos asociados al archivo que est siendo editado actualmente. Como la hoja de estilo estilo.css aplica sobre el archivo pruebas.html podemos verla aqu. Adems el asterisco indica que no est guardada porque acabamos de hacer algunas modificaciones en las reglas. Para guardarla deberemos seleccionarla y pulsar la combinacin ctrl + S o seleccionarla e ir al men Archivo y all a Guardar como si se tratara de un archivo normal. NOTA: Advierte que cuando seleccionas la hoja de estilos, el rea de edicin cambia al modo Dividir y que debers hacer clic en el botn Diseo para volver de nuevo al modo normal. Tambin puedes hacer clic en la opcin del men Archivo, Guardar todo sin tener que seleccionar la hoja de estilo previamente, pero esto har que se salve el contenido de todas las pestaas lo cual no siempre es conveniente. Sea como sea, en el momento de previsualizar la web mediante F12, se nos recordar que debemos guardar los documentos con modificaciones. Incluir la hoja de estilos en otros documentos Para que una hoja de estilo afecte a una pgina HTML tiene que estar adjunta o vinculada a la misma. Para ello debemos hacer clic en el men Formato, luego en Estilos CSS y por ltimo en Adjuntar hoja de estilos... Aparecer un dilogo como el que se muestra en la figura. Aqu debemos seleccionar el archivo estilos.css mediante el botn Examinar, asegurarnos de que en el campo Aadir como se encuentre seleccionada la opcin Vincular y luego pulsar en Aceptar.
25/03/2010
Page 140 of 227
6.2.2 - Ejercicio: adjuntar la hora de estilos Adjunta la hoja de ejercicios a todas tus pginas. En estos momentos, tu sitio web debera estar compuesto de las siguientes pginas: 1. 2. 3. 4. 5. 6. 7. contacto.html curriculum.html datos.html fotos.html index.html maqueta.html pruebas.html
Adems, deberas contar entre tus archivos con la hoja de estilos estilos.css y las carpetas con las imgenes.
6.3. Seccin 6.3 - Estilos de fondo, texto y listas Seccin 6.3 - Estilos de fondo, texto y listas
Aadir nuevas reglas Comenzaremos estudiando los estilos de los elementos de texto como hicimos en la Seccin 4.1. Para aadir un nuevo estilo haremos clic en el men Formato, luego Estilos CSS y por ltimo en Nuevo...
25/03/2010
Page 141 of 227
Para aadir estilos a la hoja actual y no a otra, tendremos que aseguraremos de que en el apartado Definicin de regla tenemos seleccionada la hoja de estilo que creamos anteriormente (estilos.css) tal y como se muestra en la siguiente figura.
La categora Tipo En el cuadro de dilogo Definicin de regla... encontramos muchas categoras en la lista de la izquierda. Comenzaremos por estudiar la categora Tipo.
25/03/2010
Page 142 of 227
font-family Indica la familia del texto contenido en el interior del elemento. Las familias estn compuestas por fuentes separadas por comas. Si la primera fuente no est disponible, se prueba con la segunda y as sucesivamente. font-size Es el tamao de la fuente. Existen dos tipos de valores: los valores numricos y las constantes relativas pero slo explicaremos los primeros. Los valores numricos requieren alguna unidad, las ms habituales son los pxeles (px), los EMs (em) y los EXs (ex). Los pxeles se utilizan cuando queremos tener control total sobre cunto debe medir una tipografa. Los EMs son relativos al tamao del texto circundante, por ejemplo, si el texto del prrafo es de 12px y establecemos que el texto de una cita sea de 1em, que significa "igual que el texto circundante", obtendremos un tamao de 12px; con 1.5ems, el cual quiere decir "un 50% ms grande que el texto circundante", obtendremos un tamao de 18px y con 0.75ems, lo que quiere decir "un 75% del tamao del texto circundante", obtendremos un tamao de 9px (75% de 12 = 9). Por ltimo, los EXs representan el tamao del texto tomando como referencia una X mayscula (que es casi cuadrada y adems, por lo general, no hay letra mayor que ella) por lo que son unas unidades que vienen muy bien para establecer tamaos en funcin del nmero de caracteres. Por ejemplo, para especificar 5 caracteres podemos indicar 5exs. font-weight Es el grosor del trazo. Los valores ms comunes son bold, lighter y normal. La opcin bold hace el trazo ms ancho y es equivalente al estilo negrita de los procesadores de texto mientras que lighter hace que el trazo sea ms delgado. Estas opciones no siempre son soportadas por la fuente en uso. La opcin normal establece el trazo en su tamao por defecto. font-style Se refiere a la orientacin del trazo. Sus valores son italic o cursiva (curvada hacia la derecha), oblique o anticursiva (curvada hacia la izquierda) y normal (sin curvar). font-variant La variacin se refiere sencillamente a si deben usarse versalitas. Las letras versalitas son minsculas en forma de maysculas ms pequeas. Para activa el efecto debemos establecer el valor en small-caps. line-height Se refiere a la medida del alto de lnea. Las unidades son las mismas que para el tamao de la fuente. text-transform Aplica una transformacin al texto. Estas pueden ser, segn el valor establecido, capitalize (la primera letra de cada palabra en mayscula), uppercase (todas en mayscula) y lowercase (todas en minscula). text-decorations Adorna el texto aplicando uno o ms efectos. La opcin underline subraya el texto, la opcin overline hace aparecer una raya por encima del texto, la opcin line-through tacha el texto y la opcin blink lo hace parpadear en el explorador. color Indica el color del texto. Puede especificarse seleccionando el color desde la paleta de manera similar a como se hizo en la Seccin 4.3 o indicando el cdigo alfanumrico apropiado como hicimos al establecer el color de fondo. 6.3.1 - Ejercicio guiado: categora Tipo
25/03/2010
Page 143 of 227
En la pgina pruebas.html haz clic sobre un elemento de encabezado de primer nivel y seleccinalo con el explorador de jerarqua. Ahora aade un nuevo estilo CSS y asegrate de que Tipo de Selector se encuentra en Etiqueta (redefine un elemento HTML) al igual que como hicimos para redefinir <body>. Sin embargo, esta vez redefiniremos un encabezado de primer nivel por lo que elegiremos el selector h1 del cuadro desplegable. Cambia las opciones tanto como desees haciendo clic en Aplicar para visualizar los efectos sin cerrar el dilogo, o desde el explorador, haciendo clic en Aceptar y pulsando F12 para lanzar la vista en el explorador. NOTA: Algunas opciones no se visualizan correctamente en Dreamweaver y slo pueden comprobarse desde el explorador. Cuando veas que te has familiarizado lo suficiente con las propiedades, djalas tal y como se indican en la figura. Utiliza el panel de Estilos CSS para cambiar las opciones rpidamente sin necesidad de abrir el cuadro de dilogo.
NOTA: todas las propiedades CSS tienen un valor por defecto. El valor por defecto puede restablecerse borrando el valor en el dilogo o suprimiendo la propiedad en el panel Estilos CSS seleccionando la propiedad en cuestin y pulsando la tecla supr. La categora Fondo Profundicemos ahora en la categora Fondo. El fondo es la regin de cada elemento sobre la que se dibuja el contenido. En el caso del elemento <body>, se trata de toda la pgina. En el caso del resto de los elementos, como los encabezados <h1>, <h2>, <h3>, etc, el fondo es el rectngulo que alberga tanto el contenido como sus mrgenes internos (para diferenciarlos de los externos, de los cuales hablaremos en breve).
25/03/2010
Page 144 of 227
backgroun-color Indica el color de fondo. Como todos los controles de color, es posible elegir este desde la paleta o indicar el triplete hexadecimal directamente en el campo de texto. No olvides la almohadilla antes del cdigo. background-image Permite establecer una imagen de fodo. Podemos elejirla haciendo clic en el botn Examinar... background-repeat Establece el modo de repeticin del fondo. El modo de repeticin hace que la imagen de fondo se repita de alguna manera segn el valor. Estos pueden ser no-repeat para no repetir el fondo; repeat-x, para repetirlo a lo ancho del elemento; repeat-y, para repetirlo a lo alto o repeat para repetirlo en ambas direcciones. background-attachment Indica cmo se fijar el fondo. Sus valores son fixed que har que los elementos de fondo se mantengan siempre en la misma posicin o scroll que har que el fondo se desplace al igual que los elementos de pgina cuando el usuario desplace el elemento. Comprobaremos el uso de esta propiedad al final del captulo. background-position (X) Indica la posicin del fondo en el ancho del elemento. Aqu se establece un valor numrico indicando la posicin de la imagen de fondo en el ancho del elemento. Lo habitual es usar pxeles (px) o porcentajes (%). La situacin del fondo siempre se realiza en relacin al centro de la imagen por lo que para situar el fondo en la mitad del elemento usaremos un valor del 50%. Es til comentar aqu las posiciones constantes tales como left, center y rigth que situan el fondo a la izquierda, en medio y a la derecha respectivamente. background-position (Y) Indica la posicin del fondo en el alto del elemento. Igual que la anterior, pero indicando la posicin de la imagen de fondo en el alto del elemento. De nuevo, lo habitual es usar pxeles (px) o porcentajes (%). La situacin del fondo se realiza de nuevo en relacin al centro de la imagen por lo que para situar el fondo en la mitad del elemento usaremos un valor del 50%. De nuevo comentar las posiciones constantes top, center y bottom que situan el fondo en la parte superior, media o inferior del elemento. 6.3.2 - Ejercicio guiado: efecto desvanecimiento Contina con las modificaciones a los encabezados de primer nivel. Para ello, en el panel de Estilo CSS hacemos doble clic sobre el elemento h1 para abrir el dilogo. Descarga el conjunto de imgenes de fondo y descomprime su contenido en la carpeta imagenes de tu sitio web. Ahora define las propiedades de Fondo para los encabezados tal y como se muestra (la imagen se llama fondo_titulo2.png y est en la carpeta fondos). No olvides hacer clic en Aceptar y pulsar F12 para previsualizar los cambios en el navegador. Recuerda hacer clic en actualizar o presionar F5 en el navegador para actualizar.
25/03/2010
Page 145 of 227
Si seguiste al pie de la letra esta Seccin, deberas haber logrado un efecto de desvanecimiento en el fondo del ttulo como el que se muestra a continuacin.
Esto es as porque la imagen de fondo es un pequeo degradado de blanco al gris de fondo. Puedes explorar la carpeta fondos y verlo por ti mismo. Si observas la imagen no obstante, te dars cuenta de que es bastante estrecha, insuficiente para cubrir por si misma el alto del encabezado. Por ello, para completar el efecto, indicamos que la imagen se repita verticalemente con lo que cubrimos todo el alto de la misma. 6.3.3 - Ejercicio guiado: fondo fijo con repeticin horizontal Modifica el estilo del cuerpo de la pgina web haciendo doble clic sobre el elemento body en el panel de Estilo CSS. Ten en cuenta que, como acabamos de ver, las propiedades de fondo pueden usarse simultaneamente para lograr efectos muy interesantes como los que veremos a continuacin. Deja la configuracin de Fondo como se presenta en la figura, el archivo se encuentra en fondos y se llama fondo_cuerpo.png
25/03/2010
Page 146 of 227
Ahora se presenta un fondo con repeticin horizontal que se mantiene fijo pese a que descendamos por el documento. El efecto de desvanecimiento ya no funciona por lo que deberas anularlo quitando la imagen de repeticin del fondo del encabezado. 6.3.4 - Ejercicio guiado: fondo con scroll y repeticin horizontal Cambia la propiedad background-attachment a scroll y compara el resultado con el ejercicio anterior.
25/03/2010
Page 147 of 227
La opcin scroll de background-attachment es la opcin por defecto. Scroll es una palabra inglesa que podemos traducir como desplazamiento y representa la opcin contraria a fixed. 6.3.5 - Ejercicio guidado: paisaje bajo Otro efecto interesante de utilizar la fijacin del fondo lo encontramos con la siguiente configuracin. En este caso el archivo se llama fondo_cuerpo2.jpg
25/03/2010
Page 148 of 227
Esta configuracin, la ms compleja de las que hemos tratado, fija un paisaje de fondo en la parte inferior de la pgina. 6.3.6 - Ejercicio guidado: mosaico Por ltimo, si se consigue la imagen adecuada, un efecto resultn es el uso de un mosaico con repeticin completa como el que lograris al introducir la siguiente configuracin (el archivo es fondo_cuerpo3.png).
25/03/2010
Page 149 of 227
En general, bien empleados, los fondos en mosaico consiguen un efecto muy interesante. Podis usar este generador de fondos o visitar esta lista de generadores de patrones. 6.3.7 - Ejercicio: experimentos Experimenta tanto como necesites hasta familiarizarte con las opciones del fondo. Busca imgenes en Internet que te sirvan de fondo. Cuando termines vuelve a la configuracin del Ejercicio guiado 6.3.5. La categora Bloque La categora Bloque complementa la categora Tipo pero con propiedades tpicas de los prrafos. Vamos a cambiar pues el aspecto del prrafo. Para ello crearemos un nuevo estilo para el elemento p.
25/03/2010
Page 150 of 227
word-spacing Indica el espacio entre palabras. El espacio entre palabras puede aumentarse o disminuirse (usando valores negativos). Esto permite compactar los prrafos o expandirlos a voluntad. letter-spacing Permite variar el espacio entre letras. Como la propiedad anterior, esta tambin admite valores negativos si queremos decrementar el valor normal. vertical-align Establece el alineamiento vertical del texto. Se refiere a dnde se debe alinear el texto en el interior de la caja de su elemento padre. La caja se estudiar en la prxima seccin y volveremos a esta propiedad cuando queramos situar el texto en el interior de las celdas de las tablas. text-align Establece el alineamiento del texto. Los valores de esta propiedad son los tpicos left, right, center y justify (izquierda, derecha, centro y justificado). Cada uno se refiere por supuesto al modo en el que se alinearn las lneas de texto, a saber: Texto alineado a la izquierda: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante. Ut lectus. In varius. Donec condimentum sodales eros. Suspendisse justo. Nam quis tortor. Pellentesque tincidunt, dui fringilla facilisis vestibulum, libero enim dignissim turpis, vel interdum mi elit et nisi. Quisque consequat aliquam nibh. Duis mauris ligula, sodales vitae, iaculis vel, elementum vitae, justo. Donec fringilla, orci nec luctus auctor, lorem ipsum sagittis lorem, eget lacinia mauris tellus eu velit. Nulla feugiat. Ut purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed sem nisi, tristique eget, egestas eu, posuere a, tortor. Vivamus ullamcorper feugiat mi. Suspendisse sollicitudin condimentum ipsum. Mauris semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras adipiscing. Texto alineado a la derecha: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante. Ut lectus. In varius. Donec condimentum sodales eros. Suspendisse justo. Nam quis tortor. Pellentesque tincidunt, dui fringilla facilisis vestibulum, libero enim dignissim turpis, vel interdum mi elit et nisi. Quisque consequat aliquam nibh. Duis mauris ligula, sodales vitae, iaculis vel, elementum vitae, justo. Donec fringilla, orci nec luctus auctor, lorem ipsum sagittis lorem, eget lacinia mauris tellus eu velit. Nulla feugiat. Ut purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed sem nisi, tristique eget, egestas eu, posuere a, tortor. Vivamus ullamcorper feugiat mi. Suspendisse sollicitudin condimentum ipsum. Mauris semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras adipiscing. Texto alineado al centro: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante. Ut lectus. In varius. Donec condimentum sodales eros. Suspendisse justo. Nam quis tortor. Pellentesque tincidunt, dui fringilla facilisis vestibulum, libero enim dignissim turpis, vel interdum mi elit et nisi. Quisque consequat aliquam nibh. Duis mauris ligula, sodales vitae, iaculis vel, elementum vitae, justo. Donec fringilla, orci nec luctus auctor, lorem ipsum sagittis lorem, eget lacinia mauris tellus eu velit. Nulla feugiat. Ut purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed sem nisi, tristique eget, egestas eu, posuere a, tortor. Vivamus ullamcorper feugiat mi. Suspendisse sollicitudin condimentum ipsum. Mauris semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras adipiscing. Texto justificado: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante. Ut lectus. In varius. Donec condimentum sodales eros. Suspendisse justo. Nam quis tortor. Pellentesque tincidunt, dui fringilla facilisis vestibulum, libero enim dignissim turpis, vel interdum mi elit et nisi. Quisque consequat aliquam nibh. Duis mauris ligula, sodales vitae, iaculis vel, elementum vitae, justo. Donec fringilla, orci nec luctus auctor, lorem ipsum sagittis lorem, eget lacinia mauris tellus eu velit. Nulla feugiat. Ut purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed sem nisi, tristique eget, egestas eu, posuere a, tortor.
25/03/2010

Vivamus ullamcorper feugiat mi. Suspendisse sollicitudin condimentum ipsum. Mauris semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras adipiscing. text-indent
Page 151 of 227
Se refiere al sangrado de primera lnea o indentacin. El sangrado es el espacio desde el margen del texto hasta el primer carcter de una lnea. Con valores positivos conseguimos un sangrado clsico de primera lnea mientras que estableciendo valores negativos conseguiremos el efecto de la sangra francesa en la que la primera lnea comienza antes que el margen normal. El efecto de la sangria francesa necesita alterar una propiedad extra que aun no hemos introducido pero volveremos a ello en la siguiente seccin. white-space Indica cmo deben tratarse los espacios y saltos de lnea dentreo del texto. Las opciones son normal, no-wrap y pre. La primera opcin, establecida por defecto, colapsa los sucesivos espacios o tabuladores en un slo espacio y ajusta el prrafo al tamao del navegador automticamente. Hace que el texto se comporte como los elementos de prrafo normales. La segunda colapsa los espacios pero no ajusta el texto a menos que encuentre un carcter especfico de cambio de lnea (que debe introducirse mediante la combinacin de teclas shift+enter). La ltima se comporta tal cual lo hace el texto predeterminado, preservando todos los espacios y no ajustando el texto al explorador. display Indica qu tipo de caja debe aplicarse a un elemento. Hemos hablado de la caja de un elemento en la propiedad vertical-align y trataremos este concepto en profundidad en la siguiente seccin. Por el momento, baste decir que CSS asigna una caja con unas determinadas propiedades que contiene la totalidad del elemento. Si la caja es ms pequea que el contenido del elemento, el contenido sobrante no se ver. Existen muchos tipos de caja, entre ellas las ms importantes son block, propia de los encabezados o prrafos en los que a la caja le sigue un salto de lnea forzoso; inline, con la cual eliminamos el salto de lnea haciendo que el siguiente elemento se dibuje (si cabe) a continuacin del actual; table-cell, que nos permite que el elemento se comporte como una celda de una tabla (habilitando el uso de la propiedad vertical-align, por ejemplo); list-item, que permite aadir una marca de lista antes del contenido (hablaremos de las marcas de lista en breves instantes) y none que oculta la caja y por tanto su contenido. 6.3.8 - Ejercicio guiado: la categora Bloque En este ejemplo, tan slo hemos establece cierta indentacin y el alineamiento a justificado. Si lo prefieres, puedes experimentar con las opciones hasta lograr la configuracin que ms te agrade. Recuerda que a la hora de crear el nuevo estilo debers especificar p como etiqueta porque estas modificando el elemento prrafo.
Observa como la indentacin del texto es de 5exs indicando que la primera lnea comienza 5 caracteres depus que la segunda. La categora Lista La ltima de las categoras que estudiaremos por el momento, es la categora Lista que contiene propiedades especficas para la visualizacin de este tipo de elementos. Como aprendimos en la seccin 4.1, existen tres tipos de listas: ordenadas, no ordenadas y de definicin. Por sus caractersticas, hemos dejado las listas de definicin a parte. As pues, puedes colocar el cursor encima de un elemento de una lista cualquiera para observar en el
25/03/2010
Page 152 of 227
Explorador de jerarqua que tanto los elementos de las listas ordenadas como las no ordenadas se denominan <li> (acrnimo ingls de List Item o elemento de lista). No obstante, segn estemos en listas ordenadas o no ordenadas, el elemento padre ser <ul> u <ol> respectivamente, acrnimos ingleses de Unordered List (lista no ordenada) y Ordered List (lista ordenada).
list-style-type Se refiere al tipo de numeracin o marca de la lista. CSS proporciona algunas figuras geomtricas y estilos de numeracin. Entre las figuras encontramos circle, un crculo vaco; disc, un crculo lleno y square, un cuadrado lleno. Entre los tipos de numeracin para listas ordenadas encontramos decimal, estilo por defecto de numeracin (1, 2, 3...); lower-roman y upper-roman, que utiliza nmeros romanos en minscula (i, ii, iii, iv...) o mayscula (I, II, III, IV...) respectivamente y lower-alpha y upper-alpha que utiliza letras minsculas (a, b, c...) o maysculas (A, B, C...) respectivamente. Es interesante decir que no tenemos ningn tipo de restriccin a la hora de utilizar un tipo de marca u otro independientemente del tipo de lista que estemos utilizando. Si establecemos un valor disc en una lista ordenada, los nmeros sern reemplazados por discos del mismo modo que si establecemos numeracin lower-roman en una lista no ordenada, sus elementos pasarn a estar numerados de acuerdo al estilo romano en minscula. list-style-image Indica la imagen que debe usarse como marca. El valor es una imagen que puede seleccionarse mediante el botn Examinar... o Browse... y que reemplaza a la marca de lista no ordenada. list-style-position Establece cmo debe alinearse la marca del elemento. Los posibles valores son outside e inside. El primero es el valor por defecto. Los elementos, no sus marcas, comenzarn alineados al mismo margen vertical. El segundo valor hace que se alineen lar marcas, no as los elementos. Esta propiedad se observa muy bien cuando se establece el valor inside y se combina con el estilo de nmeros romanos como veremos en el ejemplo. 6.3.9 - Ejercicio guiado: la categora Lista Descarga esta coleccin de imgenes de marca para experimentar con la propiedad list-style-image. Descomprmela en el interior de la carpeta imagenes de tu sitio web. Colcate sobre un elemento de una lista ordenada y haz clic en la etiqueta <ol> en el explorador de jerarquas para seleccionar la lista ordenada en s (y no alguno de sus elementos). Establece sus propiedades como se indica en la figura. El estilo elegido es lower-roman.
25/03/2010
Page 153 of 227
Haz lo mismo con una lista no ordenada y deja su configuracin como se indica en la captura. El archivo se encuentra en la carpeta marcas y se llama ok.png.
25/03/2010

Listas de definicin
Page 154 of 227
El problema de las listas de definicin es que cada elemento est formado por al menos dos tipos de elementos, el trmino a definir o el elemento HTML <dt> (acrnimo ingls de Definition Term) y la definicin, elemento HTML <dd> (acrnimo de Definition Definition). En principio, podemos hacer que los elementos <dd> y <dt> se comporten como listas cambiando su propiedad display de la categora Bloque a list-item. Sin embargo casi ningn navegador soporta el uso de marcas para estos elementos por lo que tendremos que recurrir a otros trucos de diseo si queremos conseguir un efecto similar. 6.3.10 - Ejercicio guiado: estilos en listas de definicin Bajo Firefox y Chrome puedes probar la siguiente configuracin para los elementos <dd> que ofrece interesantes resultados. Es totalmente necesario que previsualices esta pgina con navegador pulsando F12 o no percibirs ningn cambio en el rea de edicin de Dreamweaver. Crea un nuevo estilo para el elemento dd y establece las siguientes configuraciones.
Configuracin de la categora Bloque
25/03/2010
Page 155 of 227
Configuracin de la categora Lista. El archivo de imagen se llama definicion.png y lo encontrars dentro de la carpeta marcas. De todas formas, aun es posible usar otras categoras de estilos para por ejemplo, poner en negrita la definicin (o en gris los trminos a definir), indentarla algunos pxeles o alinearla al centro. 6.3.11 - Ejercicio: diferenciar los estilos HTML El objetivo de este ejercicio es que actualices tu hoja de estilo para redefinir todos los elementos HTML vistos en la seccin 4.1 (destacado, nfasis, cita, cdigo...) de forma que no se repita la presentacin de los mismos, es decir, para poder por ejemplo, diferenciar con claridad un texto en estilo cdigo de otro en estilo teletipo. Utiliza los conocimientos adquiridos para diferenciar todos y cada uno de ellos. Asegrate de que los estilos se han aplicado a todas las pginas de tu sitio web. Puedes descargar la pgina de pruebas con todos los estilos al terminar la leccin.
6.4. Seccin 6.4 - El modelo de caja y formato de imgenes Seccin 6.4 - El modelo de caja y formato de imgenes
El modelo de caja Continuamos nuestra introduccin a las propiedades CSS. En esta seccin seguiremos explicando el dilogo de definicin de reglas e introduciremos el modelo de caja y el concepto de pseudoclase. Todos los elementos HTML tienen un contenedor invisible denominado caja. La caja de un elemento lo alberga totalmente y est dividido en cuatro partes: contenido, relleno, borde y margen; tal y como se muestra en la siguiente figura.
25/03/2010
Page 156 of 227
Daremos ahora las definiciones de cada elemento y las propiedades de CSS que los gobiernan. Contenido: El contenido es, en principio, el mnimo rectngulo capaz de albergar al elemento HTML. Sin embargo, podemos establecer las dimensiones del contenido mediante las propiedades width (anchura) y height (altura). Relleno: El relleno es la extensin del contenido que existe hasta el borde. La extensin de esta regin se controla a travs de la propiedad padding. El relleno y el contenido forman el fondo cuyo estilo puede alterarse usando las propiedades CSS de la categora Fondo como vimos en la seccin anterior. Borde: El borde es un rectngulo que delimita el fondo. Su ancho, as como su estilo puede controlarse mediante la propiedad border o a travs de la categora Borde. Margen: El margen es un espacio vaco que se extiende desde el borde hacia afuera del elemento y fuerza a cualquier otro elemento circundante a mantener una separacin. El margen puede controlarse a travs de la propiedad margin. Tanto margin como padding as como las propiedades del contenido, se encuentran en la categora Cuadro. La caja adems, tiene otras propiedades relacionadas con la anteriormente explicada propiedad display, Las categoras cuadro y borde Antes de proseguir. Abre la pgina pruebas.html y repasa la Leccin 5 introduciendo algunos hipervnculos, imgenes y tablas. Puedes descargar nuestra pgina de prueba con el repaso de la Leccin 5. Recuerda que si quieres utilizarla debe estar en la carpeta de tu sitio web o las imgenes no se mostrarn. La categora cuadro nos permite modificar todo lo relacionado con el modelo de caja visto anteriormente a excepcin del borde que, por su complejidad, disfruta de una categora propia.
25/03/2010
Page 157 of 227
width Es el ancho del contenido en las unidades que estudiamos en la leccin anterior. Si dejamos el valor en blanco o auto, el ancho se ajustar automticamente para albergar todo el contenido. height Es el alto del contenido. De nuevo, si dejamos el valor en blanco o auto, el alto se ajustar automticamente para dar cabida a todo el contenido. float Indica dnde debe situarse el elemento que estamos redefiniendo en relacin a los siguientes. Puede ser left, right o none que indican que el elemento debe echarse a la izquierda, derecha o mantenerse en su sitio respectivamente. La propiedad float no es equivalente al alineamiento. Veremos un ejemplo concreto dentor de unos prrafos. clear Se refiere a la orientacin del trazo. Sus valores son italic o cursiva (curvada hacia la derecha), oblique o anticursiva (curvada hacia la izquierda) y normal (sin curvar). padding La variacin se refiere sencillamente a si deben usarse versalitas. Las letras versalitas son minsculas en forma de maysculas ms pequeas. Para activa el efecto debemos establecer el valor en small-caps. margin Se refiere a la medida del alto de lnea. Las unidades son las mismas que para el tamao de la fuente. Como se puede ver en la figura, tanto padding como margin poseen 4 campos, uno por lado de la caja: top, right, bottom, left (arriba, derecha, abajo e izquierda respectivamente) que podemos definir individualmente desmarcando la casilla de verificacin Igual para todo. Con esta casilla activada, las propiedades de los cuatro lados sern las mismas que la del lado superior (top). 6.4.1 - Ejercicio guiado: la propiedad float Aade tu retrato justo antes del prrafo autobiogrfico de datos.html. Recuerda que float afecta a la posicin del elemento actual en relacin a los que le siguen. Por eso debes aadir tu foto antes del prrafo con la biografa. Ahora redefine la etiqueta img (de Image en Ingls o Imagen) para establecer la propiedad float a left y a right. NOTA: No confes demasiado en la representacin de Dreamweaver, prubalo sobre un navegador con F12. Observa las diferencias entre float a la izquierda o la derecha respectivamente. Float a la izquierda
25/03/2010
Page 158 of 227
Nac en Valencia pero, debido a los continuostraslados de mis padres, me he criado en Murcia, en un pueblo costero llamado San Javier, cerca del Mar Menor. All pas 12 aos hasta terminar el bachiller momento en el cual me mud a Madrid para estudiar Informrica. Durante dos aos viv en un colegio mayor hasta que mis padres se trasladaron por fin aqu. Ahora me encuentro terminando mi carrera Universitaria y planeo realizar mis estudios de mster y doctorado en el estranjero. Durante mi estancia en Madrid obtuve mis primeros trabajos como programador web en empresas de soluciones financieras y seguridad biomtrica. Tambin he impartido cursos y he sido presidente de una asociacin cultural llamada MFS. Float a la derecha Nac en Valencia pero, debido a los continuostraslados de mis padres, me he criado en Murcia, en un pueblo costero llamado San Javier, cerca del Mar Menor. All pas 12 aos hasta terminar el bachiller momento en el cual me mud a Madrid para estudiar Informrica. Durante dos aos viv en un colegio mayor hasta que mis padres se trasladaron por fin aqu. Ahora me encuentro terminando mi carrera Universitaria y planeo realizar mis estudios de mster y doctorado en el estranjero. Durante mi estancia en Madrid obtuve mis primeros trabajos como programador web en empresas de soluciones financieras y seguridad biomtrica. Tambin he impartido cursos y he sido presidente de una asociacin cultural llamada MFS.
Una forma de comprender float es pensar que indica hacia dnde "flota" un elemento entre los que le siguen. Si decimos que a la derecha, el elemento se desplaza todo a la derecha que puede y los elementos que lo siguen, lo rodean por la izquierda. Si decimos que flote a la izquierda, obtendremos el efecto contrario. Cuando creas haber comprendido la propiedad, borra la regla pero deja tu retrato ah. 6.4.2 - Ejercicio: float para tablas Repite el ejercicio anterior pero ahora redefiniendo una tabla. Reutiliza la tabla de las pelculas ms taquilleras y trata de describir su contenido en un prrafo. En este ejemplo se ha fijado el ancho de la tabla al 50%, se le ha aadido un margen de 1em y se le ha establecido la propiedad float a right. Adems se ha redefinido el prrafo para que se encuentre justificado. La denominacin "ms taquilleras" se usa en este contexto indebidamente dado que taquillero se refiere al nmero de entradas vendidas y no a los millones de dlares recaudados. Si tuviramos en cuenta slo el nmero de entradas, nos daramos cuenta de que Avatar, por ejemplo, no es la pelcula ms taquillera de la historia. Este puesto queda reservado para Lo que el Viento Se Llev con 202 millones de entradas vendidas. As, teniendo en cuenta slo las entradas vendidas, nos encontramos con que el segundo puesto es para La Guerra de las Galaxias y el tercero para Sonrisas y Lgrimas. La cuarta se la lleva E.T, el Extraterrestre y Titnic se encontrara en la sexta posicin con 128 millones de entradas vendidas. Cuando creas que ests familiarizado con la propiedad float, elimina la regla. Como hemos dicho, para el control del borde contamos una categora exclusiva del mismo nombre: Borde. De nuevo, se hace notar la existencia de casillas de verificacin Igual para todo que nos permiten especificar de una vez el estilo de los cuatro lados de la caja.

Pelcula Avatar (2009) Titanic (1997) The Lord of the Rings: The Return of the King (2003) Pirates of the Caribbean: Dead Man's Chest (2006) The Dark Knight (2008) Recaudacin $2,467,962,011 $1,835,300,000 $1,129,219,252 $1,060,332,628 $1,001,921,825
25/03/2010
Page 159 of 227
style Indica el tipo de lnea para el borde. Los valores ms comunes son dotted, dashed, solid, double, groove, ridge, inset, outset. Los distintos efectos pueden comprobarse a travs de los siguientes ejemplos: dotted: Estilo a puntos dashed: Estilo a lineas solid: Estilo slido (linea continua) double: Doble linea groove: Borde 3D hundido
ridge: Borde 3D alzado
inset: Borde 3D que produce la ilusin de hundir el elemento
outset: Borde 3D que produce la ilusin de elevar el elemento
width Es el grosor del borde. Se expresa en las mismas unidades que el tamao de texto que ya explicamos en la leccin anterior. color Especifica el color del borde en forma de triplete hexadecimal como llevamos viendo hasta ahora.
25/03/2010

6.4.3 - Ejercicio guiado: efecto polaroid Modifica la pgina de pruebas.html con imgenes y crea una nueva regla para la etiqueta img. Luego deja las categoras cuadro y borde como se muestra en las siguientes figuras:
Page 160 of 227
Configuracin de la categora Cuadro
25/03/2010
Page 161 of 227
Configuracin de la categora Borde Prueba tu pgina y observa cmo ha cambiado el aspecto de las fotos, presta especial atencin a los siguientes aspectos:

Fjate como al indicar un alto automtico y especificar un ancho fijo, todas las fotografas miden lo mismo en ancho y han ajustado sus alturas automticamente para no deformarse Presta atencin a la presencia de espacio libre entre la foto y el borde, esto es el padding Prueba a modificar la categora fondo para incluir un color de fondo como el #EEE y as pulir el efecto. Vers como el hueco del que hablbamos antes se vuelve de este color Fjate como el borde inferior es ms ancho que el resto debido a que desmarcamos la casilla de verificacin Igual para todo Observa cmo no hay espacio de separacin entre foto y foto debido a que hemos dejado los campos referidos al margin en blanco
Ahora establece un valor de 0.5em para la propiedad margin en la categora Cuadro para separar la imgenes entre s (observa que al dejar 0.5em a cada lado, conseguimos que la separacin sea del doble, es decir, de 1em).
25/03/2010
Page 162 of 227
Las limitaciones de los elementos HTML Antes de pasar a la siguiente leccin vamos a hacer incapi sobre algunas limitaciones de HTML. Supongamos que tenemos el siguiente texto: Imagine there's no Heaven It's easy if you try No hell below us Above us only sky Imagine all the people Living for today Imagine there's no countries It isn't hard to do Nothing to kill or die for And no religion too Imagine all the people Living life in peace Se trata de las dos primeras estrofas de la cancin Imagine de John Lennon y, para resaltar que son estrofas, nos gustara verlas centradas y con otra tipografa. Podemos abordar el problema redefiniendo el elemento prrafo pero esto afectara a todos los prrafos del documento. Si contramos con el elemento HTML "estrofa de cancin", bastara con redefinir tal elemento, pero lamentablemente este tipo de elemento no existe. Cual es la solucin entonces? Veremos la respuesta a esta pregunta en la siguiente leccin. 6.4.4 - Ejercicio: sincronizando el servidor remoto La pgina web ya empieza a ser interesante y nos conviene sincronizar el servidor remoto. Quiz debido a los muchos nuevos cambios, la sincronizacin tarde un poco ms de lo normal, pero no te preocupes. Sincroniza tu servidor remoto ahora.
25/03/2010
Page 163 of 227
7. Leccin 7: Introduccin a CSS2 - II Leccin 7: Introduccin a CSS2 - 2 parte

Comprensin de la estructura de un documento HTML (Lecciones 1, 4, 5 y 6) Conocimiento y dominio de los elementos HTML ms comunes (Lecciones 4 y 5) Saber redefinir elementos HTML (Leccin 6)

Ensear al alumno a dotar de estilo a las tablas Familiarizar al alumno con los distintos tipos de selectores y combinaciones Introducir al alumno en el posicionamiento de elementos HTML mediante CSS Concienciar al alumno acerca de las implicaciones en los cambios de la estructura del sitio web
Secciones 1. 2. 3. 4. CSS para tablas Clases, pseudo-clases, identificadores y composiciones Posicionamiento Detalles del sitio web
Debes estudiar las secciones en el orden en el que se encuentran. Duracin estimada Continuando con nuevos conceptos pero fundamentados principalmente en el tema anterior, la Leccin no debera tomas ms de 4 5 sesiones de 2 a 3 horas.
7.1. Seccin 7.1 - CSS para tablas Seccin 7.1 - CSS para tablas
La estructura HTML de la tabla Como vimos en la Leccin 6, conocer la estructura HTML de un documento es, cuanto menos, til para redefinir elementos con CSS. A lo largo de la Leccin 7 comprobaremos cmo no slo resulta til sino que, adems, es esencial. Sin embargo, con Dreamweaver, en vez de tener que echar un vistazo al cdigo para determinar la estructura de la web, hacemos uso del explorador de jerarqua, herramienta visual que nos facilita mucho el trabajo. Antes de aprender a dar formato a una tabla, debemos conocer su estructura HTML para lo que haremos uso del explorador de jerarqua y de la siguiente figura de referencia.
25/03/2010
Page 164 of 227
Esquema de la estructura de una tabla. La tabla est formada por filas y estas por celdas de cabecera o datos. La figura puede resumirse as: la tabla (elemento table) est formada por un conjunto de filas (elementos tr del Ingls Table Row o en Espaol, Fila de la Tabla), y cada fila puede contener varias celdas de tipo cabecera (elementos th del Ingls Table Header o en Espaol, Cabecera de la Tabla), o de tipo datos (elementos td del Ingls, Table Data o Datos de la Tabla). 7.1.1 - Ejercicio: la estructura de la tabla Abre la pgina de pruebas.html y aade una tabla (si no hay una ya) como se explic en la Seccin 5.3. Haz clic en una celda de datos y en una de cabecera y comprueba por ti mismo que la estructura de la tabla coincide con el esquema ayudndote del explorador de jerarqua. Formato de la tabla Dar formato a una tabla consiste bsicamente en redefinir tres elementos: la tabla en s, las cabeceras y las celdas de datos. Veremos algunas configuraciones comunes a travs de ejemplos. Prubalos sobre la tabla de pruebas.html. 7.1.2 - Ejercicio guiado: diseo bsico de la tabla Conviene esbozar un esquema de cmo queremos que se visualicen las tablas. Para comenzar haremos que las tablas se visualicen con el siguiente estilo:
Ejemplo de tabla con estilo bsico

Cabecera 1 datos datos Cabecera 2 datos datos Cabecera 3 datos datos
Primero debemos fijar algunos detalles de la tabla en s. Observa por ejemplo cmo no hay separacin entre celdas por lo que debes establecer la propiedad HTML Esp. Celda a 0. Conviene siempre, adems, eliminar los valores de Borde y Rell. de Celda tal y como se muestra en la imagen (pulsa sobre ella para verla ms grande).
Redefine el elemento table para aadir un borde slido, negro y de 1px de grosor.
25/03/2010
Page 165 of 227
Acepta el dilogo y redefine ahora el elemento th para decidir el estilo de las cabecera. Especificaremos negrita para la fuente y subrayado.
25/03/2010

Establece tambin sus propiedades de fondo usando la misma configuracin que empleaste para la tabla: borde de 1px, slido y negro. Acepta el dilogo y, por ltimo, redefine el elemento td para decidir el estilo de las celdas de datos. De nuevo, aplica la configuracin de borde anterior. Cuando hayas terminado, acepta el ltimo dilogo y observa el resultado con el explorador: debera ser muy similar (salvo el color del texto) al que usamos como referencia.
Page 166 of 227
Existen dos propiedades CSS que tienen que ver con las tablas pero que Dreamweaver no muestra en ninguna categora del dilogo de definicin de regla. Estas propiedades permiten controlar el espacio entre celdas sin tener que recurrir a las propiedades HTML de cada tabla. Dado que no se encuentran en ninguna categora, no las estudiaremos por el momento pero al terminar la Seccin 7.3 sabremos cmo incluir propiedades CSS que no se encuentran en el dilogo de definicin de estilo. 7.1.3 - Ejercicio: estilo de la tabla Haz que la tabla tenga el siguiente estilo de referencia.
Ejemplo de tabla con estilo avanzado

Cabecera 1 datos datos Cabecera 2 datos datos Cabecera 3 datos datos
Esta vez, no anules la propiedad Esp de celda sino, sencillamente, djala vaca.
7.2. Seccin 7.2 - Clases, identificadores y composiciones Seccin 7.2 - Clases, identificadores y composiciones
Selectores Para poder abordar este tema es necesario tener muy claros los conceptos aprendidos en la leccin anterior luego si tienes dudas, repsalos de nuevo. Observa el panel Estilos CSS mientras editas la pgina de pruebas.
25/03/2010
Page 167 of 227
Cada nombre de regla es un selector. Los selectores reciben este nombre porque indican sobre qu elementos se aplicarn las propiedades de la regla (que puedes ver en la regin Propiedades del panel). En la figura, el selector de prrafo p tiene dos propiedades que hacen referencia a la indentacin de la primera lnea y al alineamiento del texto y estas propiedades se aplicarn, segn indica el selector, a "todos los elementos de HTML de tipo prrafo". Hasta ahora slo hemos conocido selectores del tipo etiqueta HTML pero como veremos en breve, hay ms. Clases Otro de los tipos de selectores, llamado selector de clase, resulta extremadamente til y ya hemos visto una aplicacin del mismo cuando explicamos cmo colorear texto en la leccin 4.3. El selector de clase puede interpretarse como la seleccin de "los elementos cuya clase sea [el nombre de la clase]". Gracias a las clases, podemos tomar elementos HTML y clasificarlos en distintos grupos permitindonos crear reglas distintas para cada grupo. Las clases pueden clasificar elementos HTML determinados (por ejemplo, dividir el elemento imagen HTML en retratos y figuras) o cualquier elemento en general (por ejemplo, podemos crear la clase recuadro que har que cualquier elemento con esta clase quede recuadrado por un borde negro); pero por el momento slo estudiaremos la ltima opcin. Adems, las clases nos ofrecen un mecanismo para crear elementos personalizados como veremos en el siguiente ejercicio guiado. NOTA: Para aquellos usuarios familiarizados con programas de maquetacin o con el uso avanzado de procesadores de texto, las clases se comportan de una manera muy similar a los estilos. 7.2.1 - Ejercicio guiado: clase estrofa para prrafos Copia y pega en pruebas.html las dos primeras estrofas de la cancin Imagine que veamos al trmino de la Leccin anterior: Imagine there's no Heaven It's easy if you try No hell below us Above us only sky Imagine all the people Living for today Imagine there's no countries
25/03/2010

It isn't hard to do Nothing to kill or die for And no religion too Imagine all the people Living life in peace
Page 168 of 227
El elemento HTML para representar una estrofa no existe pero podemos crear una clase estrofa y aplicrsela a los prrafos que contengan estrofas. As podremos decidir cmo debe representarse el texto de una cancin. Crea un nuevo estilo tal y como lo has estado haciendo hasta ahora salvo que esta vez selecciona Clase (puede ser aplicable a cualquier elemento HTML) como opcin en la lista desplegable Tipo de selector. Por supuesto, tambin debes indicar el nombre, que hemos acordado que sera estrofa tal y como se muestra en la figura.
Bajo del nombre del selector encontrars una explicacin que describe a aquellos elementos sobre los que tendr efecto la regla. En este caso indica: Este nombre de selector aplicar la regla a todos los elementos HTML con clase "estrofa". Ahora define las propiedades HTML como se indica en las figuras:
25/03/2010
Page 169 of 227
Propiedades de la categora Tipo para la clase estrofa
25/03/2010
Page 170 of 227
Propiedades de la categora Bloque para la clase estrofa. Observa como establecemos la propiedad text-indent a 0. Esto es as porque el prrafo, por ser prrafo, ya tiene una indentacin de 5ex y esta propiedad sera heredada si no la establecemos a algn valor concreto. De aqu viene la palabra cascade del acrnimo CSS: de la capacidad para heredar las propiedades. Cuando hayas terminado pulsa Aceptar y fjate en el panel Estilos CSS de Dreamweaver. Descubrirs que la nueva regla tiene por nombre .estrofa, es decir, el nombre que le habas dado precedido de un punto. Es precisamente este punto el que indica a CSS que se trata de una clase y no de una etiqueta HTML. Podemos editar las propiedades de la regla desde el panel o haciendo doble clic sobre su nombre para volver a abrir el dilogo con las categoras, exactamente como hemos hecho hasta ahora. NOTA: Los nombres de las clases, como los de los identificadores deberan cumplir las siguientes reglas:

Slo pueden contener caracteres del alfabeto ingles (esto es, ni caracteres acentuados, ni ees), guiones bajos y nmeros No se permiten espacios, utiliza guiones bajos o separa las palabras con maysculas como en "menu_lateral" o "menuLateral" No pueden empezar por un nmero Se distingue entre maysculas y minsculas luego, por ejemplo, las clases "noticia", "NoTiCiA" y "NOTICIA" son distintos Esta vez, s pueden repetirse cuantas veces se desee dentro del documento. Dado que muchos elementos pueden pertenecer al mismo conjunto clase
De nuevo, Dreamweaver no te avisar de que exista un error si no cumples estas normas, as que presta atencin. Ahora debes indicar que cada prrafo con las estrofas pertenece a clase estrofa. Para ello sita el cursor sobre uno los prrafos para mostrar sus propiedades HTML y cambia su clase por estrofa.
Observa como el explorador de jerarqua indica que un elemento pertenece a una clase aadiendo un punto y el nombre de la clase al nombre del elemento.
25/03/2010
Page 171 of 227
Comprueba los resultados en el navegador. Desde un punto de vista semntico, las clases nos permiten expandir el significado de los elementos HTML. Ahora nuestros prrafos no son slo "prrafos" sino "prrafos de la clase estrofa" o sencillamente "estrofas". Como nota, Dreamweaver slo permite una clase por elemento pero la mayora de las veces basta con ello. El resultado de aplicar la clase estrofa a la letra de la cancin puede verse a continuacin. Imagine there's no Heaven It's easy if you try No hell below us Above us only sky Imagine all the people Living for today Imagine there's no countries It isn't hard to do Nothing to kill or die for And no religion too Imagine all the people Living life in peace 7.2.2 - Ejercicio: clase polaroid Observa en el explorador tu autoretrato en las pginas datos.html y curriculum.html. Fjate en que comparten el efecto polaroid que aprendiste en la Seccin 6.4. Ahora bien, cambia la regla de los elementos de imagen para que, conservando un ancho de 200px, no muestren ningn borde, no tengan color de fondo ni espacio de relleno (pero deja el margen de 0.5em) y "floten" a la izquierda. Adems, crea una nueva clase, polaroid, con la configuracin del Ejercicio 6.4.3 para simular el efecto de una fotografa instantanea y haz que las imgenes de la pgina prueba.html y fotos.html pertenezcan a la clase polaroid. De nuevo, observa en el explorador tu autoretrato y advierte cmo ya no poseen el efecto anterior. NOTA: Recuerda que la regla general de elementos de imagen, hace flotar a estos a la izquierda. Deberas anular esta propiedad en la nueva clase polaroid estableciendo su valor a none. Pseudo-clases
25/03/2010
Page 172 of 227
Las pseudo-clases son una forma avanzada de clases que seleccionan elementos slo bajo ciertas condiciones. Vamos a ver cuatro tipo de pseudo-clases, todas parte de los hipervnculos, que son link, hover, visited y active. Junto con el elemento enlace, a, en HTML, permiten seleccionar los enlaces cuando aun no han sido visitados, cuando el cursor se sita sobre ellos, cuando ya han sido visitados y cuando se encuentran activos (en el momento preciso de pulsar) respectivamente. La forma en la que definimos el selector de la regla ser muy similar a la redefinicin de un elemento HTML como veamos en las secciones 6.1 y 6.2 salvo que esta vez aadiremos manualmente dos puntos (":") seguido del nombre de la pseudo-clase que queramos definir. 7.2.3 - Ejercicio: estilo de los enlaces Primero nos preocuparemos de dar un estilo base al hipervnculo por lo que haremos uso de la pseudo-clase link. Abre cualquiera de tus pginas web y crea un nuevo estilo dejando el dilogo como en la figura. Fjate en el valor del cuadro desplegable Tipo de selector que ahora ser Compuesto (basado en la seleccin):
Fija alguna propiedades, como el color y la decoracin del texto:
25/03/2010
Page 173 of 227
NOTA: Es conveniente subrayar los enlaces. El uso de internet ha acostumbrado al usuario a que haga clic sobre los elementos subrayados por lo que es conveniente mantener esta prctica. Haz clic en aceptar y prueba la pgina web. Crea un nuevo estilo, ahora redefiniendo la pseudo-clase hover tal y como se indica en la figura.
25/03/2010
Page 174 of 227
NOTA: Por desgracia, Dreamweaver no hace descripciones textuales cuando aadimos una pseudo-clase, as que tendremos que imaginarla por nosotros mismos. La manera ms sencilla es aadir a la primera frase de la descripcin sin pseudo-clase la oracin "con estado [pseudo clase]". As, "a:hover" se convertira en "todos los elementos enlace con estado encima del enlace" En esta ocasin, sus propiedades son:
25/03/2010
Page 175 of 227
Acepta el dilogo y prueba la pgina. Prueba a pasar por encima de los enlaces para ver cmo cambia el estilo del enlace. 7.2.4 - Ejercicio: completa el estilo de los enlaces Prueba por tu cuenta a cambiar el estilo de las dos pseudo-clases restantes: visited y link. Trata de hacer que los enlaces, por defecto, tengan un efecto 3D de elevacin (recuerda la propiedad border-style) y que en el momento de pulsar (pseudo-clase active) pasa a tener un efecto de hundimiento. Luego configura el estilo de las psudo-clases de la manera que ms te guste. Identificadores En la Seccin 6.1 hablamos de los identificadores o ID de los elementos div. Resulta que en HTML todo elemento puede tener un identificador mientras este sea nico dentro del documento. CSS2, por su parte, nos proporciona un tipo de selector para seleccionar el elemento con identificador igual al que especifiquemos. 7.2.5 - Ejercicio guiado: formato del pie de pgina Abre la pgina datos.html. Comprueba que el ltimo div tiene el identificador "pie_de_pagina" y crea una nueva regla CSS. Esta vez elige ID (slo es aplicable a un elemento HTML) como opcin para Tipo de selector. En nombre del selector debers especificar el identificador que quieres seleccionar: "pie_de_pagina".
25/03/2010
Page 176 of 227
Ajusta las propiedades del estilo para que el fondo sea marrn y el color de la tipografa blanco. Comprobars que los enlaces pierden visibilidad pero arreglaremos esto en unos instantes. Composiciones En estos momentos conocemos todos los tipos de selectores que pueden utilizarse pero CSS2 nos permite aun ms. Las composiciones nos permiten seleccionar elementos teniendo en cuenta una jerarqua. Por ejemplo, gracias a las composiciones podemos seleccionar "los elementos imagen dentro de tablas" mediante la composicin table img. Tambin podemos seleccionar "los enlaces del pie de pgina" mediante la composicin #pie_de_pagina a o tambin "el texto enfatizado dentro de las estrofas" como .estrofa em. 7.2.6 - Ejercicio guiado: enlaces en el pie de pgina Debido al ejercicio anterior, los enlaces del pie de pgina no se visualizan claramente. Vamos a cambiar el color de los enlaces pero slo en el pi de pgina que es dnde tenemos problemas. El resto se quedarn como estn. Para ello conviene que primero trates de expresar la seleccin en lenguaje natural: "los enlaces sin visitar dentro del pi de pgina". Hay dos formas ahora de crear la composicin. La primera, a mano, comienza por identificar los elementos dentro de la frase: 1. 2. Hablamos de enlaces: elementos a Y tambin del pie de pgina: identificador #pie_de_pagina
NOTA: Conviene recordar tres reglas a la hora de escribir nombres de HTML: 1. 2. 3. Si el elemento es un identificador, el nombre va precedido del smbolo almohadilla (#) Si el elemento es una clase, el nombre va precedido del smbolo punto (.) Si el elemento es un elemento HTML corriente, el nombre no va precedido de nada
De ah que el pie de pgina se indique como #pie_de_pagina
25/03/2010
Page 177 of 227
Ahora debemos tener en cuenta que el contenido se escribe a continuacin del contenedor luego como hemos dicho que los enlaces estn dentro del pie de pgina, debemos escribir: #pie_de_pagina a. Ahora, crea una nueva regla CSS tal y como se indica en la figura y en Nombre del selector introduce la frase que acabas de deducir. La descripcin debera coincidir en gran medida con tu frase en lenguaje natural. Si es as, es que lo has hecho bien.
Elige un color para el texto que ofrezca un mejor contraste, como el #CC6. 7.2.7 - Ejercicio guiado: forma alternativa Localiza la regla que acabas de crear en el panel de Estilos CSS y brrala. Ahora haz clic sobre un enlace que est dentro del pie de pgina y asegrate de que en explorador de jerarqua que has seleccionado correctamente un enlace. Observa como el explorador de jerarqua indica que se encuentra dentro de un prrafo p, en el interior del div pie_de_pgina que se encuentra en el interior del elemento body.
Crea una nueva regla CSS de tipo compuesto y vers que Dreamweaver sugiere automticamente una composicin.
25/03/2010
Page 178 of 227
Sobre esta configuracin base puedes hacer las modificaciones que creas necesarias. Por ejemplo, quita el elemento prrafo dado que no nos interesa modificar slo los enlaces dentro de prrafos sino todos los enlaces dentro del pie de pagina. Ahora vuelve a establecer el color de alto contraste del ejercicio anterior. 7.2.8 - Ejercicio: formato de los div Borra las reglas definidasen los ejercicios 7.2.3 a 7.2.7 y crea una regla para cada div (usando su identificador). Sigue las siguientes indicaciones. Cabecera:
Tendr un alto de 150px y el fondo ser un patrn repetido en x llamado fondo_titulo3.png que encontrars entre los fondos descargados en la Seccin 6.2 El ancho ser de exactamente de 800px (categora Cuadro) Tendr un relleno de 0 arriba y abajo y de 1em a los lados Tendr un margen de 0 en cualquier lado
Menu:
El ancho ser de exactamente de 800px (categora Cuadro) Tendr un relleno de 1em en todos loslados Tendr un margen de 0 en cualquier lado El fondo de todos ellos ser un patrn repetido (puedes usar http://bgpatterns.com/ o cualquiera de las herramientas proporcionadas para ayudarte). Genera el patrn y gurdalo en la carpeta fondos.
Contenido:
El ancho ser de exactamente de 800px (categora Cuadro) Tendr un relleno de 1em en todos loslados
25/03/2010

Tendr un margen de 0 en cualquier lado El color de fondo del contenido sea #fcedcf
Page 179 of 227
Pie de pgina:
El color de fondo del pie de pgina sea #666 El color del texto en el pie de pgina sea blanco
Ahora modifica el estilo de todos los enlaces de forma que:

Su color estn como estn sea #933 Haz que cuando el ratn pase por encima de ellos, pasen a negrita
Modifica la regla CSS del cuerpo (etiqueta body) de la pgina de forma que:
No exista ni relleno, ni margen alguno entre el borde (en este caso los lmites de la pgina web) y el contenido (categora Cuadro)
Crea una regla combinada para hacer que los enlaces del pie de pgina contrasten mejor con el fondo gris. Crea otra regla combinada para que los prrafos del pi de pgina no tengan indentacin y estn centrados.
7.3. Seccin 7.3 - Posicionamiento Seccin 7.3 - Posicionamiento

Tipos de posicionamiento Mediante CSS, podemos afectar al posicionamiento de los elementos de dos formas. La ms sencilla es usar las propiedades float y clear para influir en el flujo de la pgina web. Vimos un ejemplo de posicionamiento mediante la alteracin del flujo en la Seccin 6.4 cuando usamos la propiedad float de imgenes y tablas para hacer que el texto las rodeara. El otro tipo de posicionamiento es ms verstil y potente pero tambin ms complicado y no lo veremos hasta la Leccin 9. Consiste en alterar las propiedades de la categora Posicin que estudiaremos ms adelante. A lo largo de esta leccin perfeccionaremos nuestro diseo para que concuerde con la maqueta de la Seccin 6.1 que se muestra en la figura.
25/03/2010
Page 180 of 227
Centrando el contenido mediante un envoltorio En diseo web, es comn que el primer elemento sea un div y dentro de l, aadamos todos los dems. A este div se lo denomina wrapper o envoltorio y sirve como contenedor de todos los dems. El envoltorio tiene varias ventajas. A nivel de estructura, define un rea de trabajo, es decir, representa el espacio mximo que ocupar nuestro diseo y nos permite trabajar con el diseo como si fuera un bloque. Desde el punto de vista del diseo, permite definir algunas reglas comunes a todo el diseo que se aplicarn sobre todos los elementos de su interior por el efecto cascada de CSS. En este apartado usaremos el envoltorio para centrar el contenido y homogeneizar el fondo del diseo. 7.3.1 - Ejercicio guiado: centrando el contenido La mejor manera de centrar el contenido es fijar su ancho e indicar que los mrgenes izquierdo y derecho sean automticos, as se intentar que sobre tanto espacio por un lado como por el otro consiguiendo centrar el contenido. Fijar el ancho (ya sea con unidades absolutas o relativas) es importante porque por defecto, un elemento ocupa todo el ancho de su elemento contenedor por lo que no se apreciara el efecto de centrado. Abre la pgina datos.html y utiliza el explorador de jerarqua para seleccionar el cuerpo entero. Ahora inserta un nuevo div que rodee todo el contenido y dale como identificador el nombre envoltorio.
25/03/2010
Page 181 of 227
Usa el explorador de jerarqua para comprobar que el envoltorio rodea efectivamente los cuatro divs.
Crea un nuevo estilo basado en el identificador envoltorio como aprendiste en la Seccin 7.2 y establece su propiedad margin a auto para la izquierda y la derecha y a 0 en el resto de los lados. Recuerda que debes fijar su ancho tambin, utiliza un valor de 800px. Ahora debemos crear una nueva regla con selector de identificador igual a "envoltorio". Dejaremos la categora Cuadro de la siguiente forma:
Antes de comprobar los resultados conviene hacer algunos ajustes. Gracias al envoltorio, ya no es necesario indicar el ancho de cada bloque en su interior porque, como acabamos de decir, un elemento tiende a ocupar todo el ancho de su elemento contenedor. Adems, tampoco es necesario indicar el mismo fondo en cada div porque, de nuevo, podemos unificarlo estableciendo el fondo del envoltorio.
25/03/2010
Page 182 of 227
Por tanto, borra la propiedad width de todos los divs y borra las propiedades de fondo de los divs menu y contenido. Establece la misma configuracin de fondo en el envoltorio que la que tiene el men, tal y como indica el ejercicio 7.2.8. 7.3.2 - Ejercicio: envolviendo pginas web Aplica la tcnica del envoltorio a las pginas datos.html, curriculum.html y fotos.html. Adems, aade un borde marrn, slido y de 4px de grosor a la izquierda y derecha del envoltorio. 7.3.3 - Ejercicio: centrando las tablas Cambia el estilo por defecto de las tablas (esto es, redefine el elemento table de HTML) para que aparezcan centradas. Para ello, no podrs aadir elementos nuevos al diseo, slo modificar la hoja de estilos. Cuando termines, sincroniza el servidor remoto. Columnas laterales Un diseo muy corriente en las pgina web actuales es contar con un espacio lateral dnde presentar el men u opciones satlite. Para crear este efecto, primero debemos decidir el ancho de la columna y a continuacin abrir hueco a la izquierda o derecha del contenido (dnde vaya la columna). Luego haremos que la columna flote a la izquierda del contenido para que quede en el lado deseado. 7.3.4 - Ejercicio guiado: la columna lateral Abre cualquiera de las pginas datos.html, curriculum.html o fotos.html y edita la regla de diseo para el div menu. Establece en la categora Cuadro el ancho de la columna y haz flotar el elemento a la izquierda. Anula (pon a 0) los valores del relleno y el margen tal y como se indica en la figura.
Observa el resultado en el navegador. Qu falla?
25/03/2010
Page 183 of 227
Lo que ocurre es que hemos situado el men a la izquierda y el resto de contenido trata de rodearlo completamente. Como dijimos, falta abrir espacio a la izquierda del contenido. Conseguiremos esto estableciendo un margen izquierdo para el div de contenido igual al ancho de la columna. Edita la regla asociada al identificador contenido y estableces sus propiedades CSS tal y como se muestra en la figura:
Diseos lquidos frente a diseos rgidos El diseo que acabamos de crear tiene se dice que es rgido porque ocupa un ancho fijo (800px en los ejercicios), independientemente de la resolucin o el tamao de pantalla. Los diseos lquidos trabajan con unidades relativas con el fin de ocupar siempre la misma proporcin del rea til de pantalla. Se denominan lquidos porque hacen fluir sus elementos para adaptarse al rea de la pantalla. Ejemplos de diseos lquidos:
http://es.wikipedia.com/ https://www.bankinter.com/www/es-es/cgi/ebk+home http://www.w3.org/
Ejemplos de diseos rgidos:

http://portal.lacaixa.es/home/particulares_es.html http://www.apple.com/es/ https://www.blogger.com/start
El decantarse por un diseo rgido o uno lquido es ahora una cuestin de gustos. Durante los primeros aos del diseo accesible, se recomendaban los diseos lquidos aludiendo que podan adaptarse a una mayor variedad de dispositivos. No obstante, los diseos rgidos siempre han ofrecido un mayor control sobre el aspecto final del diseo. Actualmente, los dispositivos cuentan con pantallas lo suficientemente amplias (o sistemas de zoom para los dispositivos ms pequeos) como para que los diseos rgidos sean tan accesibles como los lquidos. 7.3.5 - Ejercicio: de rgido a lquido
25/03/2010
Page 184 of 227
Convierte tu diseo rgido en lquido. Cambia la propiedad del ancho del envoltorio para que sea del 75% y observa los resultados en un navegador. Prueba a cambiar el tamao del navegador desde lo ms grande posible a lo ms estrecho. Con el ejercicio anterior habrs observado que el diseo se rompe al disminuir el ancho de la ventana bajo un cierto valor lmite. Para evitar este problema vamos a establecer un ancho mnimo (en unidades absolutas). Podemos consultar las estadsticas sobre resoluciones de pantalla que nos proporciona la w3.org para determinar el ancho mnimo. Con las estadsticas delante observamos como actualmente, el 76% de los usuarios usan resoluciones mayores a 1024x768 (expresado como ancho x alto). Luego si establecemos nuestro ancho mnimo a 1024px estaremos cubriendo al 96% de los usuarios de Internet. Es conveniente no obstante, no utilizar 1024 px como ancho mnimo sino algo menos como por ejemplo, 924. 7.3.6 - Ejercicio guiado: ancho mnimo del diseo Establecer el ancho mnimo del diseo a 924px no es trivial porque Dreamweaver no nos ofrece visualmente las propiedades CSS min-width y min-height que son las que controlan el mnimo ancho y alto respectivamente. Para aadirlas haremos uso del panel Estilos CSS tal y como se indica a continuacin. Abre la pgina datos.html, selecciona la regla #envoltorio en el panel de Estilos CSS y localiza el enlace Aadir propiedad situado debajo de todas las propiedaes en el rea de propiedades. Haz clic para que aparezca un cuadro desplegable con todas las propiedades CSS y localiza la que se llama min-width. Haz clic sobre ella y establece su valor a 924px.
25/03/2010
Page 185 of 227
De nuevo, prueba el diseo en el explorador cambiando el tamao del mismo. Con la aparicin de la alta resolucin y los monitores ms y ms grandes, surge un segundo problema relacionado esta vez con la accesibilidad y no con el diseo (aunque puede influir en l). El problema reside en que, si la resolucin es muy alta, el contenido puede quedar demasiado estirado. Es decir, podemos obtener prrafos que distribuidos en tan slo un par de lneas muy, muy anchas. Este fenmeno dificulta la lectura y resulta bastante antiesttico. Para solucionarlo se puede recurrir a las propiedades max-width y max-height que establecen el ancho y alto mximos del diseo. 7.3.7 - Ejercicio: ancho mximo del diseo
25/03/2010
Page 186 of 227
De nuevo, Dreamweaver no nos permite acceder directamente a esta propiedad por lo que debers usar el panel de Estilos CSS para aadir a la regla del envoltorio, la nueva propiedad max-width y establecerla a 1400px.
7.4. Seccin 7.4 - Detalles del sitio web Seccin 7.4 - Detalles del sitio web
NOTA: Estamos en la recta final del curso pero antes de terminar vamos pulir algunos aspectos de nuestro sitio web. Vamos a trabajar nicamente sobre datos.html, curriculum.html y fotos.html aunque conservaremos las pginas maqueta.html y pruebas.html Ttulo del sitio web Ahora nuestra maqueta est completa pero aun no hemos decidido un ttulo para nuestro sitio web. Por norma general, el ttulo debe de ir en el div de cabecera y tiene que ser un encabezado de nivel 1. Una vez establecido el ttulo, no deberamos de encontrar ningn otro encabezado de nivel 1. Adems, no hay que olvidar fijar el ttulo de la barra de ttulo de cada pgina web que podemos obtener concatenando el ttulo del sitio web con el de la seccin que estamos visitando. 7.3.8 - Ejercicio: ttulo de tu sitio web Dentro del div cabecera incluye un encabezado de nivel 1 con el ttulo de tu sitio web, por ejemplo: Web personal de [tu nombre]. Debers cambiar adems el nivel del resto de encabezados en el contenido: los encabezados de nivel 1 a encabezados de nivel 2; los de nivel 2 a nivel 3 y as sucesivamente. Redefine todos los encabezados con reglas CSS para personalizar el aspecto de tu sitio web. Establece adems los ttulos de la barra de ttulo de cada pgina web como se indica en la siguiente tabla (cambia mi nombre por el tuyo): Pgina datos.html curriculum.html fotos.html Ttulo de la barra de ttulo Web personal de Salva - Datos personales Web personal de Salva - Currculum online Web personal de Salva - Galera de fotos
Modificacin de la estructura del sitio web Nuestro sitio web ha cambiado mucho desde el comienzo del curso hasta ahora. Hemos reestructurado la informacin y, por ejemplo, ahora el contenido de la pgina ndice se ha integrado con el contenido en la columna izquierda del diseo. Adems, la informacin de contacto est siempre disponible en el pe de pgina de cada web. Por tanto, algunos archivos han quedado obsoletos y podemos eliminarlos. 7.3.9 - Ejercicio guiado: eliminando archivos innecesarios Elimina las pginas index.html y contacto.html. Ve al explorador de archivos para ello, seleccionalas y pulsa suprimir. Al borrar una pgina web enlazada por otras, aparecer un aviso como este:
25/03/2010
Page 187 of 227
EL dilogo indica que cuatro archivos continene vnculos a esta pgina. Observa el nombre de los archivos y acepta el dilogo sin ms. De nuevo desde el explorador de archivos, cambia el nombre de datos.html a index.html. Aparecer un dilogo que te preguntar si quieres actualizar los vnculos para que sigan apuntando a esa pgina pese a haber cambiado de nombre. Haz clic sobre Actualizar para evitar que los vnculos se rompan.
NOTA: Se dice que un vnculo est roto cuando no se puede disponer del contenido al que nos lleva. El verificador de vnculos El verificador de vnculos es una potente herramienta que nos permite reconocer aquello vnculos de una pgina que estn rotos. Para ello debemos abrir el documento que queremos verificar y seleccionar el panel Verificador de vnculos de entre las pestaas del panel de utilidades. Situado debajo del de propiedades.
25/03/2010
Page 188 of 227
7.3.10 - Ejercicio guiado: el verificador de vnculos Abre la pgina index.html. Asegrate de que el panel del Verificador de vnculos se encuentra configurado como indica la figura anterior y haz clic en el tringulo verde situado a la izquierda del panel. Se mostrarn tres opciones con ttulos poco afortunados: la primera busca vnculos en el documento actual, la segunda en todo el sitio web y la tercera en las pginas seleccionadas en el explorador de archivos. Elige la segunda opcin, Buscar sitio local actual completo en vnculos.
Se mostrar un resumen con los vnculos rotos de la pgina. La primera columna muestra el archivo que contiene el vnculo roto y la segunda el vnculo en s.
Puedes hacer doble clic en un elemento para seleccionar el enlace en la vista de diseo. 7.3.11 - Ejercicio: enlaces rotos
25/03/2010

Realiza una verificacin de vnculos y elimina los enlaces rotos de cada pgina. Sincronizacin y prueba 7.3.12 - Ejercicio: sincronizacin Sincroniza el servidor remoto y accede a tu sitio web desde Internet. Ten en cuentala configuracin siguiente a la hora de sincronizar.
Page 189 of 227
Esta configuracin sincronizar todo el sitio web y eliminar los contenidos del servidor que no se encuentren en nuestra configuracin local. Has concludo la Leccin 7, que, junto con la 6, constituyen el estudio del lenguaje CSS. Ahora debes comprimir en un ZIP todos los archivos de tu sitio web y enviar el comprimido a tu tutor para que sea corregido. Utiliza el ejercicio identificado como Leccin 7 de la herramienta Entrega de ejercicios.
8. Leccin 8: Formularios Leccin 8: Formularios

Conocimiento de tablas y diseo con divs (Lecciones 5 y 6) Conocimientos bsicos sobre estilos CSS
Concienciar al alumno sobre la importancia de los formularios Familiarizar al alumno con la creacin de formularios Presentar las disposiciones ms corrientes para formularios
Secciones 1. 2. 3. El formulario web Los elementos del formulario web Distribucin en prrafos
Debes estudiar las secciones en el orden en el que se encuentran. Duracin estimada
25/03/2010

Nos tomamos un descanso con CSS y volvemos a HTML ampliando los conocimientos de las lecciones 5 y 6. Este tema es fcil y supondr como mucho un par de sesiones de 1 a 2 horas.
Page 190 of 227
8.1. Seccin 8.1 - El formulario web Seccin 8.1 - El formulario web

Comunicacin con el usuario Internet y las pginas web no slo explotan sus recursos para comunicar informacin, la Web 2.0, la Internet social, es un claro ejemplo de la interaccin entre millones de usuarios a travs de plataformas web. Para lograrlo, el usuario debe tener la capacidad de interactuar con las pginas web, de comunicar su propia informacin a Internet. HTML permite la interaccin por el usuario por medio de los llamados formularios. En la jerga del diseo de pginas web, un formulario es un espacio de la pgina preparado para la recibir informacin por parte del usuario y enviarla al sitio web para su posterior tratamiento. Puedes ver un formulario muy sencillo en la pgina principal de Google.
25/03/2010
Page 191 of 227
25/03/2010
Page 192 of 227
Observa el campo de bsqueda, los dos botones "Buscar con Google" y "Voy a tener suerte" y las opciones mutuamente exclusivas "la Web", "pginas en espaol" y "pginas de Espaa"
25/03/2010
Page 193 of 227
25/03/2010
Page 194 of 227
El panel de publicacin de noticias de Wordpress rene muchos formularios. Uno de bsqueda situado encima del todo, otro de edicin de la noticia situado en el centro; dos ms a la derecha: uno superior para publicar el contenido y otro inferior para catalogar y etiquetar el contenido. Si usamos Internet, los formularios nos rodean en todos sus servicios: inicios de sesin, publicacin de noticias, cuadros de bsqueda, reservas de vuelos y hoteles, foros...
25/03/2010
Page 195 of 227
25/03/2010
Page 196 of 227
Dos formularios de Facebook. El primero situado en horizontal en la banda superior sirve para iniciar sesin mientras que el segundo, situado en el rea central a la derecha no permite abrir una cuenta en la famosa red social Los formularios son una herramienta esencial en la programacin de un sitio web cuando deseamos algo ms que comunicar informacin esttica. Incluso en este mbito, resultan tiles por ofrecer bsquedas, rplicas y comentarios, contacto directo, etc.
25/03/2010
Page 197 of 227
25/03/2010
Page 198 of 227
La ayuda del lenguaje de programacin Python, aunque sea un mero manual de referencia, incluye un formulario de bsqueda para que nos sea ms fcil localizar la informacin deseada Formularios en este curso As como el diseo web se encarga de presentar la informacin del sitio web al usuario, la programacin web se encarga del comportamiento del sitio. La programacin web dicta cmo debe responder la pgina a las interacciones del usuario y procesa la informacin que suministra el mismo a travs de los formularios. La programacin web queda fuera del alcance de este curso por lo que el tratamiento de formularios, es decir, la respuesta por parte de nuestro sitio web a las interacciones del usuario, ser nula. No obstante aun podemos usar los formularios para crear plantillas de correo electrnico, como si se tratara de una especie de encuesta que luego se dirigir a nuestra cuenta de correo. Sin embargo, el envo del correo electrnico no es automtico y el usuario deber tener un cliente de correo electrnico (como Outlook o Thunderbird) correctamente configurado para que funcione. Adems, conviene conocer los distintos tipos de elementos HTML que permiten al usuario interactuar con la pgina y cmo ha de configurarse una seccin de la misma para permitir la comunicacin entre el usuario y el sitio web; puesto que es precisamente tarea del diseador integrar el formulario en el diseo de la pgina. El formulario web Dreamweaver nos ofrece una forma muy sencilla de incluir un formulario en nuestra pgina web. La herramienta Formulario est situada en el panel lateral Insertar, categora Formularios.
La herramienta Formulario,
, introduce un elemento form. Este elemento se comporta como una suerte de div. Como l, puede tener un identificador o una clase y, en definitiva, puede contener cualquier
elemento de HTML. Al usar la herramienta formulario, Dreamweaver sealar el formulario como un rectngulo rojo.
Haz clic para ampliar la imagen y distinguir el rectngulo rojo que seala el formulario 8.1.1 - Ejercicio guiado: preparando la pgina de encuesta Ve a tu sitio web en el explorador de archivos y crea un nuevo documento HTML llamados encuestas.html. Adjunta la hoja de estilo CSS.
25/03/2010
Page 199 of 227
Utiliza el panel diseo para aadir el div envoltorio (borra el contenido por defecto) y luego, dentro de l, aadir cada uno de los cuatro divs que forman nuestro diseo: cabecera, menu, contenido y pie_de_pagina. Utiliza la siguiente configuracin para introducir cada uno de los elementos div (cambia la etiqueta convenientemente).
Abre index.html y copia en encuesta.html el contenido del encabezado, del men y del pie de pgina. A continuacin utiliza un encabezado de nivel 2 en el contenido para rotular la pgina web como cuestionario de opinin. Ajusta convenientemente el ttulo de la barra de ttulo de la pgina. Por ltimo introduce el siguiente prrafo como contenido: Por favor, responda al siguiente cuestionario sobre el diseo de la pgina y haga clic en enviar para hacerme llegar un mail con su opinin. En cualquier momento, haga clic en reiniciar para devolver los distintos campos a sus valores por defecto. Sitate al final del prrafo e inserta un formulario con la herramienta Formulario del panel Insertar, categora Formularios. Aydate del explorador de jerarqua para seleccionar el formulario y cambiar el identificador del formulario por encuesta.
25/03/2010

Haz clic dentro del formulario y comprueba si hay un prrafo en su interior. De no ser as, aade uno pulsando Intro. Adems, utilizando CSS, redefine los prrafos que estn dentro de formularios para que no tengan indentacin en la primera lnea y redefine el elemento HTML label para que est en negrita. Hay que destacar dos propiedades HTMLde los formularios: method
Page 200 of 227
Indica el mtodo de envio. Puede tener dos valores: get, que adjunta el formulario a la direccin de destino en la forma campo=valor y que formara la seccin consulta de la URL de la que ya hablamos en la Seccin 4.2 y post, que no adjunta nada a la URL enviando el formulario de forma silenciosa. El mtodo post es ms seguro y es el que usaremos nosotros. action Indica qu debe procesar la informacin enviada. Nosotros escribiremos mailto:direccion-e-mail para indicar que el formulario debe ser enviado como un mail a la direccin indicada. 8.1.2 - Ejercicio guiado: configurando las propiedades HTML Configura las propiedades HTML de forma que queden como en la figura. Recuerda sustituir tu email convenientemente.
8.2. Seccin 8.2 - Los elementos del formulario web Seccin 8.2 - Los elementos del formulario web
El dilogo de accesibilidad Cuando queramos introducir case cualquier elemento de un formulario, aparecer el Dilogo de accesibilidad del elemento que es comn para todos ellos.
25/03/2010
Page 201 of 227
El panel de accesibilidad permite indicar un nombre descriptivo del nuevo elemento en el campo ID. En Etiqueta podemos especificar el nombre que se mostrar junto con el elemento. Estilo permite elegir la forma en que la etiqueta acompaar al elemento. Para una mayor libertad en la distribucin de los elementos, se recomienda usar la segunda opcin Adjuntar etiqueta de ttulo utilizando el atributo 'for'. El campo Posicin indica si la etiqueta aparecer antes o despus del elemento y los campos Clave de acceso e ndice de fichas indican la tecla de acceso rpido y el orden de tabulacin respectivamente. El dilogo no es obligatorio por lo que podemos hacer clic tanto en Aceptar como en Cancelar e igualmente, habremos aadido el elemento del formulario. No obstante es altamente recomendable rellenarlo primero. Campos de texto Estando dentro de un formulario podemos insertar muchos tipos de elemento. El primero que estudiaremos es el campo de texto, una frase corta. Puedes ver un ejemplo a continuacin: Ejemplo de campo de texto, escribe aqu: Observando su panel de propiedades HTML podemos destacar las siguientes propiedades. . En el campo de texto, el usuario puede escribir una palabra o
Ancho car
25/03/2010

Indica el ancho del campo de texto en caracteres. No se recomienda el uso de esta propiedad. En vez de ella puede usarse CSS con los EXs como unidad. Car. max El mximo nmero de caracteres que pueden introducirse en el campo de texto. Tipo
Page 202 of 227
Admite tres opciones: una lnea, varias lneas y contrasea. La primera es el valor por defecto y no podemos utilizar la tecla Intro para cambiar de lnea. La segunda permite utilizar la tecla Intro para cambiar de lnea pero no la utilizaremos aqu. La ltima enmascara los caracteres para que no puedan ser vistos como ocurre en el campo contrasea de multitud de formularios. Valor inicial Permite escribir un valor inicial para el campo de texto. 8.1.3 - Ejercicio: campos de texto En encuesta.html, dentro del formulario, aade un campo de texto para preguntar por alguna otra seccin que el encuestado querra encontrar en la pgina (por ejemplo con un texto para la etiqueta como "Qu otra seccin, aparte de las listadas en el men, incluiras en la pgina?). Configura las opciones segn la siguiente tabla: Ancho car 20 Car. max 20 Tipo Una lnea Valor inicial [vaco]
reas de texto El rea de texto, , se parece al campo de texto en cuanto a que tambin permite introducir texto por parte del usuario pero esta vez el usuario podr introducir varias lneas en vez de una sola.
Ejemplo de rea de texto, escribe aqu: Su panel de propiedades HTML es muy parecido al del campo de texto.
Ancho car De nuevo, indica el ancho del campo de texto en caracteres. No se recomienda el uso de esta propiedad. En vez de ella puede usarse CSS con los EXs como unidad. Lneas num El alto del campo de texto expresado en lneas de texto Val. inicial Permite escribir un valor inicial para el campo de texto. 8.1.4 - Ejercicio: reas de texto Aade un nuevo prrafo y un rea de texto a encuesta.html para preguntar por la opinin general sobre la pgina web por parte del encuestado. Configura las opciones segn la siguiente tabla: Ancho car Lneas num Valor inicial
100
10
[vaco]
25/03/2010
Page 203 of 227
Casillas de verificacin Las casillas de verificacin representan un conjunto de respuestas posiblemente simultneas a una pregunta. Es decir, mltiples opciones de las cuales podemos elegir ms de una. La herramienta Casilla de verificacin, introduce un nuevo elemento de este tipo. Puedes ver un ejemplo a continuacin:
Qu tengo que hacer hoy? Ir a la piscina Ir al gimnasio Estudiar NOTA: Fjate como en el dilogo de accesibilidad, la situacin por defecto de la etiqueta es Tras el elemento de formulario Su panel de propiedades, muy sencillo, encierra solamente tres propiedades importantes.
Nombre de casilla Esta casilla est presente en la mayor parte de los elementos y representa el nombre del mismo. Sin embargo, en las casillas de verificacin tiene un significado especial porque nos permite agruparlas. Todas las respuestas a una misma pregunta deben tener el mismo nombre en nombre de casilla. Valor activado Es el valor que se enviar cuando est activado. Por ejemplo, en el ejemplo de esta misma seccin, el valor activado podra establecerse a s para indicar que s estoy aprendiendo con este curso cuando activo la casilla de verificacin. Se trata de una forma de resumir el significado de la etiqueta. Estado inicial Indica si el elemento debe aparecer activado o desactivado por defecto. NOTA: Para seleccionar el elemento casilla de verificacin (y posteriormente botn de opcin) usa el explorador de jerarqua o haz clic sobre el cuadrado (en el caso del botn de opcin, el crculo) que representa el elemento, no sobre su etiqueta. 8.1.5 - Ejercicio: casillas de verificacin Continua editando encuesta.html En el formulario, aade un prrafo nuevo con el texto Marque las secciones que le resultan tiles. Luego inserta nuevos prrafos para las siguientes casillas de verificacin. Etiqueta La pgina principal con los datos personales La pgina con el currculum La pgina con la galera de imgenes Valor activado datos curriculum fotos Estado inicial Desactivado Desactivado Desactivado
NOTA: Puedes introducir saltos de lnea en vez de nuevos prrafos para las distintas casillas de verificacin. Recuerda que para introducir un salto de lnea debers pulsar la combinacin ctrl+Intro en vez de solamente Intro. 8.1.6 - Ejercicio guiado: grupos de casillas de verificacin
25/03/2010

Una forma rpida de introducir casillas de verificacin es usar la herramienta Grupo de casillas de verificacin,
Page 204 of 227

. Se trata de una forma rpida de aadir un conjunto de casillas.
La herramienta despliega un dilogo como el de la figura:
En el campo Nombre es el equivalente a Nombre de casilla y ser comn a todas ellas. La lista Casillas de verificacin nos permite aadir casillas. Cada casilla tiene un campo Label con la etiqueta y otro Value equivalente a la propiedad Valor activado. Los botones con un ms y un menos nos permiten aadir nuevas casillas y eliminar otras y los que tienen una flecha arriba y otra abajo, ordenar las casillas. La disposicin por defecto es Saltos de lnea (etiquetas <br>) y es la ms recomendada. Cabe advertir que si queremos editar el grupo despus de aceptar el dilogo, tendremos que hacerlo manualmente. Por ejemplo para decidir qu casillas de verificacin estn activas. Botones de opcin Los botones de opcin tambin se usan para expresar decisiones, esta vez con varias opciones como respuesta. Cada respuesta est representa por un botn de opcin distinto y las respuestas deben compartir el nombre para ser consideradas como opciones de la misma pregunta. Estos botones tambin se denominan botones de radio. La heramienta Botn de opcin, , introduce un nuevo elemento de este tipo. Puedes ver un ejemplo a continuacin:
Cunto te gusta este curso? Mucho, creo que es muy completo y fcil de entender Regular, es algo complicado Poco, no estoy aprendiendo nada NOTA: De nuevo, fjate como en el dilogo de accesibilidad, la situacin por defecto de la etiqueta es Tras el elemento de formulario. Su panel de propiedades se parece en gran medida al de las casillas de verificacin
25/03/2010
Page 205 of 227
Botn de opcin Al igual que la propiedad nombre de casilla de las casillas de verificacin, esta propiedad en los botones de opcin nos permite agruparlos. Todas las opciones a una misma pregunta deben tener el mismo nombre en botn de opcin. Valor activado Como en las casillas de verificacin, expresa qu significa seleccionar esta opcin. Estado inicial Indica si el elemento debe aparecer activado o desactivado por defecto. Recuerda que slo un botn de opcin del mismo grupo puede estar activado en un momento dado.
8.1.7 - Ejercicio: botones de opcin Como hiciste con las casillas de verificacin, continua editando encuesta.html. En el formulario, aade un prrafo nuevo con el texto Valore el diseo de esta pgina. Luego inserta nuevos prrafos (o saltos de lnea) para los siguientes botones de opcin: Botn de opcin valoracion valoracion valoracion Etiqueta Me gusta mucho No me llama especialmente la atencin No me gusta Valor activado bueno regular pobre Estado inicial Desactivado Activado Desactivado
8.1.8 - Ejercicio guiado: grupos de botones de opcin Del mismo modo que ocurra con las casillas de verificacin, una forma rpida de introducir botones de opcin es usar la herramienta Grupo de opcin, .
La herramienta despliega un dilogo como el de la figura, idntico al del Ejercicio 8.1.6:
25/03/2010

Dilogo de creacin de grupos de casillas de verificacin
Page 206 of 227
De nuevo advierte que si quieres editar el grupo despus de aceptar el dilogo, tendrs que hacerlo manualmente. Por ejemplo para decidir qu botn de opcin es el activado por defecto. Listas / Mens Los mens o las listas son formas de dar a elegir entre opciones previamente conocidas cuando estas son muchas (por ejemplo, un listado de pases, provincias o trabajos). Los mens permiten concentrar todas las opciones en poco espacio. La herramienta Lista/Men, , aade un nuevo elemento men pero podemos convertirlo fcilmente en un elemento lista por medio del panel de propiedades:
Provincia de nacimiento (en forma de men) lava

lava Albacete Alicante Almera Provincias visitadas (en forma de lista) Asturias
El panel de propiedades HTML de un men (o lista) est formado por los siguientes campos:
Tipo Las opciones son Men y Lista. Como puedes ver en el ejemplo, el men deja ver solamente una opcin y despliega el resto al hacer clic sobre l. Por el contrario, la lista ofrece ms de una opcin y permite selecciones mltiples. Alto Slo para las listas, especifica el nmero de respuestas visibles, cada una, en una lnea. Permitir mltiples
25/03/2010
Page 207 of 227
Slo para las listas, indica si podemos elegir ms de una opcin. El usuario puede hacer clic en otras opciones mientras mantiene presionada la tecla ctrl para realizar una seleccin mltiple. Si desea deseleccionar una opcin sin perder las dems bastar con que vuelva a hacer clic en la opcin manteniendo pulsada la tecla ctrl. Seleccionada inicialmente Muestra cul de las opciones se encuentra seleccionada por defecto. Valores de lista Este botn abre un dilogo donde podemos aadir las opciones. Para aadir opciones al men/lista, haremos clic en el botn del panel de propiedades Valores de Lista que desplegar el siguiente dilogo.
Los botones etiquetados con un ms y un menos permiten aadir nuevas opciones a la lista y eliminarlas. Para eliminar una opcin basta seleccionarla y hacer clic en el botn menos. Los botones de la derecha, con una flecha hacia arriba y otra hacia abajo nos permiten subir o bajar el elemento seleccionado. Cada elemento tiene dos campos, la etiqueta ser lo que se muestre al usuario mientras que el valor ser lo que se enve (por e-mail en nuestro caso) al destino del formulario. En el ejemplo las etiquetas y los valores son iguales pero podra no ser as: imagina que necesitamos saber el pas de un usuario porque necesitamos el cdigo telefnico del mismo. En vez de pedir al usuario el prefijo telefnico podramos pedir que seleccionara su pas de residencia. En las etiquetas estaran los nombres de los pases y en los valores, los prefijos. 8.1.9 - Ejercicio: lista y men Inserta un men para que el encuestado seleccione su provincia de nacimiento. Toma como referencia el ejemplo de men de esta seccin. Ahora aade una lista que permite seleccin mltiple preguntando por pases que el usuario ha visitado (incluye 10 distintos, no es necesario que elabores una lista de todos los pases del mundo). Botones En la mayora de formularios necesitamos un botn para aceptar la informacin introducida y enviarla. Esto se consigue mediante la herramienta Botn, .
Escribe tu nombre
Enviar
Borrar
NOTA: Cuando aadas un botn, conviene no introducir una etiqueta lo que puedes conseguir seleccionando No hay etiqueta de rtulo para el campo Estilo.
25/03/2010
Page 208 of 227
El panel de propiedades HTML de los botones es muy sencillo:
Valor Es el rtulo del botn. Accin Indica el tipo de botn. Aunque mediante programacin podemos crear muchos tipos de botn, nosotros nos limitaremos a dos tipos: Enviar formulario y Restablecer formulario. El primero permite enviar el formulario al destino del mismo y el segundo establece todos los elementos a sus valores por defecto. 8.1.10 - Ejercicio: botones Al final del formulario de encuestas.html aade sendos botones para enviar y borrar el formulario. 8.1.11 - Ejercicio: sincronizando el servidor remoto Enlaza la pgina encuestas.html en el men de tu sitio web, sincroniza el servidor remoto y prueba el formulario desde Internet.
25/03/2010

Page 209 of 227
8.3. Seccin 8.3 - Distribucin en prrafos Seccin 8.3 - Distribucin en prrafos

Ttulo, comentario y campo Como habrs comprobado, disponer los elementos de un formulario resulta un poco confuso y complicado. En esta seccin vamos a explicar una forma de ordenar los elementos de un formulario basada en la idea ttulo, comentario y campo. El ttulo formula una pregunta al usuario, pregunta que el mismo deber responder en el campo. Por si el ttulo no es lo suficientemente explicativo, se aade un pequeo prrafo de comentario con informacin extra. Un ejemplo de este modelo se presenta a continuacin: Provincias visitadas Seleccione las provincias que haya visitado. Mantenga presionada la tecla control para realizar una seleccin mltiple.
lava Albacete Alicante Almera Asturias
Cosas que hacer hoy Marque una o ms cosas que tenga que hacer hoy Ir a la facultad Ir al trabajo Hacer la compra Disposicin mediante prrafos La distribucin anterior es un ejemplo de disposicin en prrafos. En ella, cada campo est formado por tres prrafos: en el primero se sita el ttulo, en el segundo el comentario y finalmente en el tercero, el campo en s. Observa como en el caso de las casillas de verificacin, no disponemos cada opcin en un prrafo distinto sino que, como ya aconsejamos en la Seccin 8.1 introducimos saltos de lnea (combinacin ctrl+intro) para distribuir las opciones en lneas distintas del mismo prrafo. Como nos conviene que una etiqueta est lo ms cerca posible del campo al que representa, para campos de texto, listas (o menes) y reas de texto, el ttulo ser, adems de un prrafo, la propia etiqueta; mientras que en las casillas de verificacin y los botones de opcin el ttulo ser simplemente un prrafo y cada etiqueta acompaar a su casilla o botn correspondiente. 8.3.1 - Ejercicio guiado: disposicin mediante prrafos del campo de texto Abre encuesta.html, borra el estilo label y crea dos nuevos estilos de clase (Seccin 7.2) : comentario y titulo_campo. Haz que comentario mida 0.9em, est en cursiva y sea de color #06C. Haz tambin que ttulo campo est en cursiva, en negrita y sea de color negro. Ahora ve al formulario y, en el explorador de archivo, selecciona la etiqueta con el texto que comienza por Qu otra seccin...? y asegrate que su propiedad HTML formato (Seccin 4.1) se encuentra en Prrafo.
25/03/2010
Page 210 of 227
Selecciona el prrafo y cambia su clase a titulo_campo.
25/03/2010

A continuacin de este prrafo incluye uno nuevo con el siguiente texto: Si crees que este sitio es incompleto, aydame a mejorarlo sugiriendo una seccin que eches en falta.
Page 211 of 227
NOTA: Si tienes dificultades para aadir un nuevo prrafo, selecciona en el explorador de jerarqua el prrafo del ttulo y a continuacin pulsa la tecla fin o end, en Ingls (situada sobre las flechas del teclado). Esto te llevar al final del prrafo. Ahora basta con pulsar intro. De nuevo, cambia la clase del prrafo pero esta vez a comentario. Corta y pega (si fuera necesario) el campo de texto en un nuevo prrafo tras el comentario.
Guarda la pgina y comprueba el resultado en el navegador. 8.3.2 - Ejercicio guiado: disposicin mediante prrafos de las casillas de verificacin Contina editando encuesta.html. Ahora ve al prrafo que comienza por Maque las secciones... y cambia su clase a comentario. Introduce un prrafo antes que el con el texto Secciones tiles y cambia su clase a titulo_campo.
Guarda la pgina y comprueba el resultado en el navegador. 8.3.3 - Ejercicio: disposicin mediante prrafos del resto de elementos del formulario Aplica la disposicin mediante prrafos al resto de los elementos del formulario. Trata de que los comentarios sean explicativos. Cuando termines sincroniza el servidor remoto. Otras disposiciones Existen otras disposiciones que requieren un uso avanzado de CSS y para las que Dreamweaver, utilizando slo la vista de diseo, procura ms inconvenientes que ventajas por lo que, aunque no explicaremos ms, vamos al menos a citarlas. La distribucin mediante divs es ms flexible aunque considerablemente ms compleja y requiere un duro trabajo con estilos CSS que trataremos de simplificar. La idea es tener dos div por elemento y un envoltorio que los cubra y limite el espacio que ocupan. Para los campos de texto, el primero flota a la izquierda, ocupa un ancho fijo y contiene el prrafo de ttulo y el comentario. El
25/03/2010

prrafo tendr alineacin derecha. El segundo tambin flota a la izquierda y contiene el campo. Este ltimo no deja que nadie se coloque a su derecha mediante la propiedad clear. El resto de elementos tambin tienen dos div pero ninguno de ellos flota. La otra distribucin es mediante tablas y es ms compleja. La idea es prcticamente la misma que con divs pero utilizando la propia tabla como envoltorio y sus celdas como los divs internos.
Page 212 of 227
Has concludo la Leccin 8. Ahora debes comprimir en un ZIP todos los archivos de tu sitio web y enviar el comprimido a tu tutor para que sea corregido. Utiliza el ejercicio identificado como Leccin 8 de la herramienta Entrega de ejercicios.
9. Ejercicio final Ejercicio final

Ejercicio: sitio web completo Como ejercicio final del curso debes desarrollar un micro sitio web simulando una revista online de coches llamada TodoMotor. En estos momentos, TodoMotor se encuentra presentando el vehculo Tesla Road de Tesla Motors. Ten en cuenta las siguientes indicaciones: Consejo: procura anular el margen y el relleno de cada elemento antes de comenzar a realizar otros ajustes. Repasa el modelo de caja y ten muy presente cmo se calculan las medidas de la caja (por ejemplo, ancho total = ancho + rellenos + mrgenes). Luego realiza los ajustes que sean necesarios. Cuando decimos que un elemento debe medir 100 pxeles de ancho nos referimos al total, contando los rellenos y mrgenes. Consejo: disea la pgina inicial "teslaroadster.html" primero y luego usa el explorador de jerarqua para seleccionar todo el cuerpo y copiar y pegar el diseo en el resto de las pginas. Esto te ahorrar mucho tiempo. No olvides adjuntar la hoja de estilo en cada pgina. Nota: no olvides los ttulos de la barra de ttulo. Nota: no pasa nada si no queda exactamente igual que en las referencias. 1. 2. 3. 4. Crea un nuevo sitio web llamado PracticaFinal. Configura el asistente para alojar tu sitio web en el servidor de Zobyhost. Descarga el archivo con los recursos de imagen y descomprmelo en la carpeta donde crears la prctica final. Crea las pginas web teslaroad.html, fotostesla.html, detalles.html, encargo.html. Esto es muy importante: cuando crees la hoja de estilo CSS lllmala estilosTesla.css Mediante divs y CSS, imita el siguiente diseo lquido que presentamos a continuacin en todas las pginas:
25/03/2010
Page 213 of 227
5. 6. 7.
Utiliza la tcnica del envoltorio para limitar el rea til a un 90%, centrar el contenido y bordearlo a izquierda y derecha El ttulo tendr un alto de 100px; el men, un ancho de 250px y el pie de pgina, un alto de 50px Utiliza CSS para dotar a la pgina web del siguiente aspecto general (encontrars todo lo necesario en el archivo de recursos que has descargado).
25/03/2010
Page 214 of 227
25/03/2010

8. 9.
Page 215 of 227
Ten en cuenta que el fondo del cuerpo est fijo pero el del envoltorio, no. Ten en cuenta tambin el color de los enlaces en el men y en el pi de pgina. Cuando se pase por encima de un enlace este tendr que subrayarse. Crea el contenido de la pgina teslaroadster.html a partir de la informacin de Wikipedia y cita las fuentas, es decir, di que has sacado el texto de Wikipedia y pon un enlace al artculo original. Utiliza el ndice de Wikipedia para estructurar la pgina usando encabezados de distintos niveles y crea tu propio ndice (recuerda los enlaces "volver al ndice").
25/03/2010
Page 216 of 227
25/03/2010

Inserta la imgen justo antes de la lista ndice y ajusta su "flotacin" convenientemente mediante CSS
Page 217 of 227
25/03/2010
Page 218 of 227
25/03/2010

Al final se debe incluir un enlace al artculo original de Wikipedia 10. Abre fotostesla.html y aade las fotos de los recursos, crea un efecto polaroid para las imgenes y agrpalas segn sean exteriores, detalles interiores o en accin (hay 3 en cada categora).
Page 219 of 227
25/03/2010
Page 220 of 227
25/03/2010

Personaliza el efecto polaroid como quieras, no hace falta que sea como el de la figura 11.
Page 221 of 227
Vuelve a la pgina teslaroadster.html y aade al final una nueva seccin llamada Eficiencia por tipo de vehculo (no olvides actualizar el ndice y aadir el enlace "volver"). Dentro copia la tabla que aparece en la imagen. Debe ocupar el 70% del ancho del contenido:
25/03/2010
Page 222 of 227
25/03/2010

12.
Page 223 of 227
Ve a la pgina detalles.html. En la carpeta detalles, de los recursos, encontrars una foto llamada general.png. Adela bajo el encabezado Detalles y crea un mapa de imagen para enlazar con cada foto detalle.
25/03/2010
Page 224 of 227
25/03/2010

13.
Page 225 of 227
Abre la pgina encargo.html y crea un formulario de encargo de un Tesla Roadster. El mtodo de envo ser POST y la direccin de envo sera todomotor@mailinator.com. El formulario tendr los siguientes campos: 1. Un campo de texto para el nombre del titular 2. Un campo de texto para la direccin 3. Una lista para elegir el color: azul, rojo (por defecto), negro, blanco, gris 4. Casillas de verificacin para el equipamiento: reproductor DVD, GPS, otra batera (activado por defecto), equipo de sonido Yamaha 5. Botones de opcin para el modo de pago: tarjeta (activado por defecto), efectivo, PayPal 6. Un rea de texto para comentarios 7. Un botn para borrar todo y otro para enviar
25/03/2010
Page 226 of 227
25/03/2010

14. Sincroniza el servidor remoto con la siguiente configuracin. A partir de ahora, no marques la casilla de Eliminar archivos remotos no existentes en la unidad local.
Page 227 of 227
Una vez que hayas terminado el sitio web, comprime todo en un ZIP y enva el comprimido a tu tutor para que sea corregido. Utiliza el ejercicio identificado como Sitio web final de la herramienta Entrega de ejercicios. Enhorabuena! Has terminado el curso de Diseo web con Dreamweaver. Es una amplia introduccin a Dreamweaver, pero el tiempo no nos da para explicar todo lo que se puede hacer con el programa. Sin embargo, ahora debes ser capaz de desarrollar sitios web sencillos con una completa funcionalidad. Por favor, no te olvides de rellenar la encuesta final. Tu opinin es muy importante para que podamos ir mejorando los cursos en cada siguiente edicin. Gracias!
25/03/2010

Dream Weaver

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Dream Weaver

Enviado por

Direitos autorais:

Formatos disponíveis

Leccin 1: El lenguaje HTML y Dreamweaver CS4

Mnimos conocimientos de ingls. Experiencia a nivel de usuario con pginas web.

Secciones 1. 2. 3. La pgina web: HTML+CSS Dreamweaver CS4 Tendencias en el diseo web

Leccin 1: El lenguaje HTML y Dreamweaver CS4

Leccin 1: El lenguaje HTML y Dreamweaver CS4

1.2. Seccin 1.2 - Dreamweaver CS4 Seccin 1.2 - Dreamweaver CS4

Leccin 1: El lenguaje HTML y Dreamweaver CS4

Leccin 1: El lenguaje HTML y Dreamweaver CS4

Leccin 1: El lenguaje HTML y Dreamweaver CS4

Insertar Propiedades Estilos CSS Archivos

Leccin 1: El lenguaje HTML y Dreamweaver CS4

Leccin 1: El lenguaje HTML y Dreamweaver CS4

Los paneles inferiores

Leccin 1: El lenguaje HTML y Dreamweaver CS4

Leccin 1: El lenguaje HTML y Dreamweaver CS4

Leccin 1: El lenguaje HTML y Dreamweaver CS4

Leccin 1: El lenguaje HTML y Dreamweaver CS4

Leccin 1: El lenguaje HTML y Dreamweaver CS4

Leccin 1: El lenguaje HTML y Dreamweaver CS4

Leccin 1: El lenguaje HTML y Dreamweaver CS4

Leccin 1: El lenguaje HTML y Dreamweaver CS4

Leccin 1: El lenguaje HTML y Dreamweaver CS4

disney.com en 1996 microsoft.com en 1996 sega.com en 1996 apple.com en 1997

Leccin 1: El lenguaje HTML y Dreamweaver CS4

Leccin 1: El lenguaje HTML y Dreamweaver CS4

Leccin 1: El lenguaje HTML y Dreamweaver CS4

Leccin 1: El lenguaje HTML y Dreamweaver CS4

Este es un artculo del blog tecnolgico maikelnai.es

Leccin 1: El lenguaje HTML y Dreamweaver CS4

Leccin 1: El lenguaje HTML y Dreamweaver CS4

Leccin 1: El lenguaje HTML y Dreamweaver CS4

http://www.w3.org/ http://es.wikipedia.org/ http://www.lastfm.es/ http://www.apple.com/itunes/ http://www.csszengarden.com/

http://www.vivabit.com/ http://tonyyoo.com/v2/ http://colourmod.com/ http://obuweb.com/ http://www.jek2k.com/ http://www.wallopcreative.com/

Leccin 1: El lenguaje HTML y Dreamweaver CS4

2. Leccin 2 - El servidor web Leccin 2 - El servidor web

Secciones 1. 2. Qu es un servidor web? Contratacin de un servidor gratuito en Internet

Leccin 1: El lenguaje HTML y Dreamweaver CS4

2.1. Seccin 2.1 - Qu es un servidor web? Seccin 2.1 - Qu es un servidor web?

Leccin 1: El lenguaje HTML y Dreamweaver CS4

Leccin 1: El lenguaje HTML y Dreamweaver CS4

Leccin 1: El lenguaje HTML y Dreamweaver CS4

Leccin 1: El lenguaje HTML y Dreamweaver CS4

Leccin 1: El lenguaje HTML y Dreamweaver CS4

Leccin 1: El lenguaje HTML y Dreamweaver CS4

Leccin 1: El lenguaje HTML y Dreamweaver CS4

Leccin 1: El lenguaje HTML y Dreamweaver CS4

Leccin 1: El lenguaje HTML y Dreamweaver CS4

Leccin 1: El lenguaje HTML y Dreamweaver CS4

Leccin 1: El lenguaje HTML y Dreamweaver CS4

Leccin 1: El lenguaje HTML y Dreamweaver CS4

Leccin 1: El lenguaje HTML y Dreamweaver CS4

3.1. Seccin 3.1 - El asistente de sitios web

Leccin 1: El lenguaje HTML y Dreamweaver CS4

Leccin 1: El lenguaje HTML y Dreamweaver CS4

Leccin 1: El lenguaje HTML y Dreamweaver CS4

Leccin 1: El lenguaje HTML y Dreamweaver CS4

Leccin 1: El lenguaje HTML y Dreamweaver CS4

Leccin 1: El lenguaje HTML y Dreamweaver CS4

Leccin 1: El lenguaje HTML y Dreamweaver CS4

Leccin 1: El lenguaje HTML y Dreamweaver CS4

Leccin 1: El lenguaje HTML y Dreamweaver CS4

Leccin 1: El lenguaje HTML y Dreamweaver CS4

Leccin 1: El lenguaje HTML y Dreamweaver CS4

Leccin 1: El lenguaje HTML y Dreamweaver CS4