Curso_de_Dreamweaver.pdf

1 . Lección 1 : El lenguaje HTML y Dream w eaver CS4
Lección 1 : El lenguaje HTML y Dream w eaver CS4
Planteam iento de la lección
Requisitos previos
 Mínimos conocimientos de inglés.
 Experiencia a nivel de usuario con páginas web.
Objetivos de la Lección 1
 Familiarizar al estudiante con los conceptos relacionados con el diseño en HTML.
 Ofrecer una visión general a modo de chuleta de la interfaz de Dreamweaver CS4.
Secciones
1. La página web: HTML+ CSS
2. Dream weaver CS4
3. Tendencias en el diseño web
Duración estim ada
Esta lección es púramente teórica y sólo tienes que leerla, lo que no debería llevarte más tiem po que 2 o 3 horas. Las páginas contienen vínculos a otras fuentes de información que te permitirán ampliar tus conocimientos.
Nota: Algunas imágenes son dem asiado grandes para mostrarlas a su tamaño real. En esos casos podrás pulsar sobre la im agen para verla en otra ventana (o pestaña) a su tam año real.
Curso de Formación Informática de Dream weaver
por Salvador de la Puente González está licenciado bajo
Creative Comm ons Reconocim iento 3.0 España License.
1 .1 . Sección 1 .1 - La página w eb: HTML+ CSS
Sección 1 .1 - La página w eb: HTML+ CSS
Gracias a nuestra experiencia diaria, podemos decir que las páginas web son documentos multimedia (esto es, que reúnen texto, audio, vídeo...) los cuales se encuentran en Internet, vinculados entre sí a través de enlaces y que se pueden visualizar gracias a los navegadores como Internet Explorer, Opera,
Chrome o Mozilla Firefox. Para su construcción, se utilizan lenguajes de marcado que permiten definir la estructura del texto, y lenguajes de definición de estilos, para indicar cómo debe visualizarse la información. A lo largo de esta sección, verem os dos de los lenguajes más comunes para la creación de
páginas web: HTML y CSS.
Antecedentes históricos
I nternet
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 más que la evolución natural de la interconexión de diversas redes científicas, educativas y finalmente, com erciales. Merece la pena, pues, dedicar un par
de párrafos al surgimiento de Internet.
En un primer momento, allá por los años 50, el gobierno de los EEUU decide fundar la Oficina de Tecnologías para el Procesam iento de Información (IPTO por sus siglas en inglés) con el fin de investigar la creación de un red descentralizada basada en el intercam bio de paquetes de información: ARPANET. Así,
tras 20 años de investigación, en 1969 se establece la comunicación entre los primeros dos nodos de la red: La Escuela de Ingeniería y Ciencia Aplicada de UCLA y el Instituto de Investigación de Stanford. En años posteriores, durante los 70, m uchas otras Instituciones Universitarias y de Investigación se
unirían al proyecto haciendo evolucionar ARPANET hacia CSNET, red que conectaba los departamentos de com putadores de distintos órganos académ icos.
En la década de los 80, m uchas más entidades quisieron unirse a redes com o CSNET y otras no estadounidenses, como la británica IPSS. De nuevo en EEUU, CSNET evoluciona hasta convertirse en NSFNET, con la intención de interconectar los superordenadores presentes en las universidades y centros de
investigación más prestigiosos, con los investigadores de todo el mundo. Durante los últimos años de los 80, surgen los prim eros proveedores de servicios de Internet y comienza la conexión de las redes existentes en busca de fines comerciales. Por poner un ejem plo, en 1989, NSFNET abandona su servicio
de m ensajería electrónica y se conecta con el servicio comercial de correo electrónico MCI. Esta fecha es recordada por m arcar el principio del Internet moderno.
La W orld W ide W eb
Merece la pena aclarar que, hasta este m omento, la interconexión de ordenadores tiene por fin el intercambio de datos, la mensajería electrónica y el acercamiento de las supercomputadoras a los investigadores de todo el m undo. Hasta este punto, nada que se parezca a la visión casera de Internet que
tenemos en la actualidad.
No obstante, en 1990, los científicos del CERN o Centro Europeo de Investigación Nuclear (Conseil Européen pour la Recherche Nucléaire, en Francés), Tim Berners-Lee y Robert Cailliau, propusieron una red de docum entos de hipertexto (calma, hablaremos de ello en el siguiente párrafo) llamado World Wide
Web que requería el uso de navegadores en una disposición cliente-servidor. La idea era sencilla: si un usuario quiere consultar un documento, entonces su ordenador actúa como cliente pidiendo al ordenador propietario, el servidor, el documento requerido. Una vez en el ordenador cliente, el docum ento
podía abrirse con un program a especial llam ado navegador.
Del párrafo anterior puede deducirse que el concepto de hipertexto estaba ya inventado incluso antes de la invención de Internet. Y es cierto: el hipertexto es un concepto bastante viejo que se refiere a ciertos documentos electrónicos que podían enlazar con otros recursos (incluyendo fotografía, video,
audio...) de forma inmediata, tal y como lo hace una web actual. Uno de los prim eros ejemplos fue HyperCard que, de la mano de Apple, permitía crear aplicaciones capaces de interconectar los documentos de un mismo ordenador. La innovación clave, introducida por Tim Berners-Lee y su colega Robert
Cailliau, era la de integrar el hipertexto dentro de la creciente Internet y perm itir así la vinculación de recursos que no tenían 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 com ienzo de la dirección web de cualquier página) y un lenguaje simplificado para producir documentos de hipertexto, el HTML. No sólo eso, también desarrolló el primer
navegador / editor de HTML, escribió la primera página web e instaló el primer servidor web.
En 1993, el CERN anunció la liberación del proyecto World Wide Web de forma que cualquiera podía instalar su propio servidor web o diseñar su propia página 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 Comisión Europea. Este consorcio vela por los estándares tecnológicos presentes en la World Wide Web de hoy día y fue la responsable de introducir el lenguaje CSS
de definición de estilos en 1994.
Cualquiera que lo desee, puede visitar la página del consorcio W3C a través de su página web, w3.org.
Page 1 of 158
Lección 1: El lenguaje HTML y Dreamweaver CS4
08/ 11/ 2010
https: / / campusvirtual.ucm.es/ SCRIPT/ seminario-invest-715641-56/ scripts/ student/ serve_summary.pl?FILES+ _h...

En la actualidad, la World Wide Web es mucho m ás que un proyecto, es una realidad y se define com o el com pendio de páginas web accesibles a través de Internet.
El Lenguaje para Marcado de HiperTexto o HTML
HTML son las siglas de Lenguaje de Marcado de HiperTexto (HyperText Markup Language, en inglés) 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 determ inada tarea o signifiquen algo en especial. Veámoslo
con un ejem plo, considerem os el siguiente fragmento de código HTML que indica que el texto La Informática es una cabecera de nivel 1 (header 1, en inglés).
<h1>La Informática</h1>
Aunque por la oración en sí podíamos intuir que se trataba de un título, observa como HTML perm ite declarar este hecho explícitamente con tan sólo añadir ciertas marcas antes y después del texto que se desea marcar. Tales marcas se denominan etiquetas y suelen aparecer en pares, una para señalar el
comienzo de la m arca de la forma <etiqueta> y otra para señalar el final de la forma </etiqueta>. Además, la etiqueta inicial puede especificar uno o m ás parámetros que completan su significado. Por ejemplo, imagina que queremos explicar el significado del acrónim o HTML, la etiqueta <acronym> se usa
precisamente para indicar que el texto que encierra es un acrónimo y podemos usar el parámetro title para indicar el significado del acrónimo.
<acronym title="HyperText Markup Language">HTML</acronym>
Los lenguajes de marcado son a menudo confundidos con los lenguajes de programación, pero los lenguajes de programación están orientados a realizar tareas y transform ar inform ación, 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 elem entos que residen en él.
Otro ejem plo de código HTML, algo m ás complejo, sería el siguiente (corresponde a esta página web de prueba)
<html>
<head>
<title>Mi primera página web</title>
</head>
<body>
<h1>Página web de prueba</h1>
<p>Esta es una página web simple con un par de párrafos sencillos y algunos estilos HTML
como <strong>este texto resaltado</strong> o <em>este otro enfatizado</em>.</p>
<p>El segundo párrafo, es decir, este, también incluye un enlace a un
<a href="http://www.google.com">famoso buscador</a>.</p>
</body>
</html>
En él se aprecia tanto la descripción de los elementos que conforman la página web (la cabecera con <head> y el cuerpo con <body>; el título de la página con <title> y el título del contenido con <h1>; un enlace con <a> y párrafos con <p>; texto resaltado con <strong> y texto enfatizado con <em>...) como
la estructura de la m isma: es sencillo ver que tanto la cabecera <head> com o el cuerpo <body> están "dentro de <html> pero al m ismo nivel" y como el texto enfatizado <em> está "dentro de un párrafo <p> que está dentro del cuerpo <body>" que, como ya hemos dicho, "está dentro de <html>". A la
propiedad de que un elemento se sitúe en el interior de otro se la denom ina anidam iento.
De esta forma, los diseñadores usan HTML para dar estructura a un texto, pero la estructura no lo es todo. Muchas veces las páginas se nos muestran ricas en color e imágenes distribuyendo la inform ación de diversas y atractivas maneras. Es aquí dónde HTML se encuentra limitado y necesita actuar en
conjunto a otros lenguajes especializados en el estilo y diseño, 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 inglés) y se trata de un lenguaje para la definición de reglas de visualización de HTML. Es decir, perm ite indicar cóm o deben representarse los elem entos HTML de una página w eb. Por ejem plo, observa el siguiente fragm ento
que hace que los párrafos 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 verán afectados por la regla. El selector puede corresponder con una etiqueta HTML como es el caso (el elemento es p de párrafo o paragraph, en Inglés). La parte entre las llaves se llama cuerpo de la regla y establece las
propiedades en líneas de la form a propiedad:valor;
CSS permite también selectores basados en la estructura de la página. Así, el siguiente fragmento afecta sólo a los "enlaces que estén dentro de párrafos".
p a {
color:blue;
text-decoration:underlined;
}
Cómo afecta cada propiedad a los elementos de una página web está especificado en un estándar adm inistrado por la w3.org de manera que, independientem ente del navegador que usemos, todos podamos visualizar una m isma página web de la misma forma. Además, si no se especifica ninguna regla para
un elem ento, se le aplica un estilo por defecto, especificado también como parte del estándar de la w3.org
NOTA: No obstante, hasta hace bien poco, algunos navegadores como Internet Explorer (versiones previas a la 7) no seguían las recom endaciones de la w3.org por lo que la visualización de páginas web difería de la normal. Por este m otivo, para este curso utilizarem os los navegadores Firefox o Chrome, los
cuales se ajustan muy bien a la normativa de la w3.org
Como estándares de la WWW, podemos encontrar más información sobre HTML y CSS en sus respectivas páginas dentro de w3.org.
1 .2 . Sección 1 .2 - Dream w eaver CS4
Sección 1 .2 - Dream w eaver CS4
Page 2 of 158
08/ 11/ 2010

A partir de 1995, al popularizarse la versión 2.0 del lenguaje HTML, surgieron herramientas destinadas a facilitar el desarrollo de páginas web. Algunas eran editores de código avanzados, que realzaban en distintos colores las etiquetas y los parámetros para distinguirlos del contenido y que contaban con
manuales acerca de HTML en su propio sistema de ayuda. Otras de estas aplicaciones, más sofisticadas, trataron de ocultar los detalles típicos del m arcado m anual ofreciendo una interfaz más parecida a la de los editores de texto contemporáneos, dónde se pudiera crear la página web sin escribir una sola
línea de código. Eran los llamados editores WYSIWYG, siglas de Lo que ves es lo que obtienes (W hat You See I s W hat You Get, en Inglés) y entre ellos destacan dos: Dream w eaver, de Macromedia, y Front Page, de Microsoft.
La principal diferencia entre Dream weaver y Front Page surgía del hecho de que Front Page fue orientado a crear páginas com patibles con el navegador de Microsoft, Internet Explorer, que no seguía m uy bien las indicaciones estándares de la w3.org. Así, el editor de Microsoft, aunque conseguía hacer que la
edición resultara muy sencilla, introducía muchos elementos no estándares en el HTML subyacente, lo que hacía el código críptico y difícil de entender.
Por otro lado, Dreamweaver fue pensado con el fin de no ensuciar el HTML y de promover herramientas visuales fáciles, desde el punto de vista del diseñador, que llevaran a un código lim pio y sencillo de m antener por parte del programador.
Guía rápida de Dream w eaver CS4
En esta sección se ofrece, en forma de imágenes, un pequeño 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 m ás com enzar
Page 3 of 158
08/ 11/ 2010

La interfaz de Dreamweaver CS4 nada más abrir el programa. En el centro encontramos un menú rápido con tres columnas: la primera permite abrir archivos usados recientemente; la segunda, crear algunos de los tipos de documentos m ás comunes y la tercera acceder a algunos videotutoriales online sobre
las nuevas características de esta versión.
La barra de m enús
En su intento por m aximizar el área de trabajo, Dream weaver elimina la barra de título típica de los program as de Windows. En su lugar ofrece directam ente la barra de menú que mostramos a continuación junto con la descripción de cada elem ento y algunos de los atajos de teclado más comunes.
Page 4 of 158
08/ 11/ 2010

Archivo contiene los comandos clásicos de administración de documentos como crear un documento nuevo, guardarlo o cerrarlo.
Además de los siempre útiles comandos deshacer y rehacer, el menú Edición contiene las herramientas de búsqueda y los com andos para copiar, cortar y pegar texto. La últim a opción del menú es el acceso al cuadro de diálogo Preferencias donde podremos cambiar la configuración de Dreamweaver.
El menú Ver contiene comandos relacionados con la apariencia de Dreamweaver.
I nsertar reune comandos para añadir distintos tipos de elem entos al docum ento como pueden ser imágenes, tablas, hipervínculos, código HTML, código CSS...
Modificar recoge, por categorías desplegables, comandos para alterar las propiedades de tablas, im ágenes, marcos, capas y otros elementos HTML. También permite m odificar las propiedades de la página.
El menú Form ato incluye opciones para aplicar los formatos HTML al texto así como añadir estilos y hojas de estilo CSS.
Com andos se compone por un conjunto de herramientas y utilidades de interés tales com o el corrector ortográfico, un creador de álbum es de fotos, utilidades para mejorar el código HTML, etc.
Sitio contiene los comandos necesarios para administrar sitios web incluyendo opciones de compartición y seguridad para cuando trabajamos en grupo; y herramientas para generación de informes, comprobación y sustitución 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 ubicación de los m ism os. Los más utilizados en este curso son:
 Insertar
 Propiedades
 Estilos CSS
 Archivos
Estos paneles están repartidos entre los inferiores y los laterales como se verá posteriormente.
Por último, el menú Ayuda nos permitirá acceder a los m anuales tanto del propio programa como a las referencias de los lenguajes HTML y CSS.
Los tres iconos siguientes permiten alternar entre configuración útiles del área de edición, instalar y configurar extensiones para Dreamweaver y crear y administrar sitios, respectivamente. La configuración del área de edición que utilizaremos a lo largo del curso será principalm ente Diseño, aunque animo a
los usuarios m ás interesados a utilizar Código y Diseño.
El último menú, situado antes del cuadro de búsqueda (tal cuadro permite buscar en la ayuda online de Dream weaver directam ente), permite elegir entre diversas configuraciones de la interfaz. Durante este curso, utilizaremos la opción Diseñador. Los usuarios con dos monitores pueden usar la opción
Pantalla doble que m andará todos los paneles al monitor secundario dejando el monitor principal sólo con el área de edición y los m enús.
El área de docum entos
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: pestañas de archivos, docum entos relacionados, modos de visualización, área de edición y explorador de jerarquía.
Page 5 of 158
08/ 11/ 2010

Las pestañas de archivos nos permiten alternar entre los documentos abiertos. El documento seleccionado aparece en gris claro mientras el resto aparecen sombreados. Si hay cam bios no guardados en algún docum ento, el nombre del mism o aparece acom pañado de un asterisco.
Los docum entos relacionados se m uestran en forma de lista y son todos aquellos que tienen una relación de pertenencia con el documento actual. Este área no muestra los docum entos a los que enlaza el actual sino los que incluye, como las hojas de estilo o el código javascript.
Los m odos de visualización perm iten configurar cómo se presentará el área de edición. Volveremos a ellos en la Sección 5.1 Esta barra también incluye el título de la página así como herram ientas para la previsualización de la página, validación de la web en varios navegadores, ayudas y guías, etc.
El área de edición es el lugar donde se desarrolla la mayor parte del trabajo. Es el área destinada a realizar los cambios sobre el documento.
Page 6 of 158
08/ 11/ 2010

Por último, el explorador de jerarquía es una estrecha barra situada entre el área de edición y los paneles inferiores. Su misión es la de reflejar el anidamiento entre las etiquetas del código HTML y perm itir seleccionar estas últimas mediante un simple clic sobre cualquiera de ellas.
Los paneles inferiores
Entre los paneles del área inferior se encuentra uno de especial importancia: el explorador de propiedades. Este panel perm ite modificar los parámetros de las etiquetas HTML de forma sencilla y visual.
Page 7 of 158
08/ 11/ 2010

Debajo de este último encontram os algunos paneles de utilidad reunidos en una misma área y diferenciados por medio de pestañas. Entre ellos destacan la referencia, el verificador de vínculos y el visualizador de inform es.
Los paneles laterales
Por defecto se dividen en tres grupos. El primero y superior es el panel insertar; a continuación encontramos el panel con el inspector de estilos CSS y por últim o, el explorador de archivos.
Page 8 of 158
08/ 11/ 2010

I nsertar contiene los elementos HTML más comunes y los clasifica mediante el menú desplegable de su interior. A lo largo de este curso usaremos principalmente los elementos de Común, Diseño y Form ulario.
Page 9 of 158
08/ 11/ 2010

El Explorador de CSS nos permite acceder a las reglas CSS y editarlas cóm odam ente.
En la parte inferior, el Explorador de archivos para visualizar los documentos de tu sitio web y poder administrarlo.
Configuración de Dream w eaver
A lo largo del curso trabajaremos con HTML 4 .0 1 estricto, que es la versión que la w3.org aconseja en estos momentos y que citaremos brevemente en la próxima Sección.
Vamos a configurar Dream weaver para que use esta versión y de esta forma, cualquier nuevo docum ento que creemos, lo escribam os con esta versión. Para ello haz clic sobre la opción preferencias... del menú Edición. Se desplegará un cuadro de diálogo com o este:
Page 10 of 158
08/ 11/ 2010

En la lista de la izquierda selecciona Nuevo documento y ajusta las opciones para que se presenten como en la siguiente figura:
Cuando termines, pulsa aceptar.
Atajos de teclado m ás frecuentes
NOTA: Cuando indiquemos un atajo de teclado utilizarem os el apócope ctrl para referirnos a la tecla control que puede encontrarse en la esquina inferior izquierda y derecha del teclado alfanumérico. Justo encima, encontramos la tecla shift (o mayus) que en muchos teclados está representada por una flecha
Page 11 of 158
08/ 11/ 2010

ancha apuntando hacia arriba. Además, a am bos lados de la tecla espacio encontramos las teclas alt y por último, en la parte superior del teclado, las teclas de función que indicaremos mediante F1 a F12.
Las com binaciones de teclas suponen apretar varias al mismo tiempo, esta simultaneidad la indicarem os mediante el signo + . Así, por ejemplo, si queremos abrir un docum ento debemos pulsar ctrl + O, lo que significa que, mientras pulsamos la tecla control debemos pulsar también la letra O. El hecho de que
en la combinación, la letra O sea una mayúscula es irrelevante.
1 .3 . Sección 1 .3 - Tendencias en el diseño w eb
Sección 1 .3 - Tendencias en el diseño w eb
La evolución del diseño web está marcada tanto por la evolución del lenguaje HTML como por el impacto y popularización de los navegadores más usados a lo largo de su historia.
Desde su invención a principios de los 90, el lenguaje HTML ha cambiado hasta alcanzar su cuarta versión y ya va camino de la quinta. Con cada versión, algunos elem entos de HTML han quedado desfasados y otros nuevos han sido incluídos permitiendo nuevos tipos de estructuras en las páginas web.
Además, la invención del lenguaje CSS y sus posteriores versiones permitió, al fin, separar la estructura de la representación y de esta forma utilizar con mayor sentido las características de las nuevas versiones de HTML.
Por otro lado, la aparición de navegadores más respetuosos con los estándares del W3C como Chrome, Firefox u Opera han desterrado el uso de tecnologías propietarias como ocurría con Internet Explorer (que tenía un conjunto de elementos HTML propios, por ejem plo) y han im pulsado el uso de estándares.
Por último, teniendo en cuenta que cada vez son más los usuarios que se conectan a Internet independientemente de su condición física, la accesibilidad, es decir, la capacidad que tiene una página web para que pueda ser comprendida por el m ayor número de personas posible, cobra cada día m ás
importancia.
Páginas lineales
Allá por 1992, Tim Berners-Lee creó el primer sitio w eb (entendiéndose sitio como un conjunto de páginas pertenecientes a una misma unidad tem ática) que versaba sobre el propio proyecto World Wide Web del que hablamos en la Sección 1.1
Podéis echarle un vistazo a este prim er sitio web visitando los archivos históricos de la w3.org. Están en inglés pero constituyen un recurso curioso, interesante y de lectura obligada para algunos de nosotros.
Menú Función Atajo
Archivo
Nuevo documento ctrl + N
Abrir documento ctrl + O
Cerrar el documento actual ctrl + W
Cerrar todos los documentos ctrl + shift + W
Guardar el documento actual ctrl + S
Guardar y poner nombre ctrl + shift + S
Salir ctrl + Q
Edición
Deshacer ctrl + Z
Rehacer ctrl + Y
Cortar ctrl + X
Copiar ctrl + C
Pegar ctrl + V
Seleccionar todo ctrl + A
Seleccionar etiqueta padre ctrl + ñ
Seleccionar hijo ctrl + ç
Buscar ctrl + F
Buscar el siguiente F3
Buscar el siguiente pero sólo en la selección shift + F3
Ver Ocultar / mostrar los paneles laterales e inferiores F4
I nsertar
Insertar imagen ctrl + alt + I
Insertar tabla ctrl + alt + T
Punto de anclaje con nombre ctrl + alt + A
Modificar Propiedades de la página ctrl + J
Form ato
Negrita ctrl + N
Énfasis o cursiva ctrl + I
Eliminar cualquier formato a un texto ctrl + 0
Convertir texto en párrafo ctrl + shift + P
Convertir en encabezados del 1 al 6 ctrl + 1 a ctrl + 6
Com andos Corrector ortográfico shift + F7
Ayuda
Ayuda de Dreamweaver F1
Referencia de lenguajes shift + F1
Otros
Colocar archivos en el servidor ctrl + shift + U
Vista en vivo alt + F1 1
Page 12 of 158
08/ 11/ 2010

Como puede observarse, los sitios web de hoy día han cambiado mucho respecto a los prim eros. Existe en la actualidad una necesidad de dejar patente que las distintas páginas de un sitio web forman parte, de hecho, del mism o sitio web. De ahí que dejem os una cabecera común con el logotipo, o
proporcionemos un menú para visitar las distintas páginas del sitio, elementos que rodean o enm arcan el contenido, la verdadera información, de la página.
Sin em bargo, durante los primeros años de la World Wide Web, el objetivo principal era transm itir información, por lo que las páginas carecían de una estructura intencionada siendo el flujo natural y lineal del texto la única posible.
Así, las páginas lineales son aquellas que no presentan una estructura intencionada, siendo el flujo natural del texto, su única estructura. Fueron bastante populares durante la experimentación con el proyecto World Wide Web y antes de la publicación de HTML 2.0 en 1995.
No obstante, hoy en día, la linealidad ha vuelto a formar parte del diseño web, al menos durante un tiempo breve, hasta que los dispositivos móviles que permiten conectar a Internet se perfeccionen. Y es que m uchas veces, la estructura de una página web, pensada paralos tamaños típicos de los monitores
de escritorio, no encaja bien con las minúsculas pantallas de algunos de estos dispositivos, por lo que se agradece que las páginas puedan "linealizarse" de forma que el contenido adopte un flujo de arriba a abajo con la intención tanto de caber mejor como de m ejorar la navegación (dado que no disponem os
de la libertad del ratón).
Diseño con tablas y páginas ensam bladas
En noviembre de 1995 se publica HTML 2.0 y pocos meses después, la w3c.org revisa la especificación para añadir el elem ento tabla. La inclusión de las tablas y su flexibilidad a la hora de com binar celdas y personalizar el estilo del borde, color de fondo y márgenes entre celdas, hacen que las em presas,
preocupadas por el diseño de sus sitios web y su imagen de marca, las adopten com o plantilla para disponer el texto de diversas y novedosas formas nunca antes vistas en Internet, pero comúnm ente utilizadas en el diseño publicitario clásico.
Así, por ejem plo, dos columnas de una tabla permitían em ular el texto de un periódico y un conjunto de filas perm itía huir del clásico diseño vertical propio de las páginas lineales. Además, gracias a la posibilidad de ocultar los bordes de las tablas, se podía escapar de los diseños de ángulos rectos con poco
más que partir un diseño redondeado en rectángulos 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, llam am os diseños con tablas, a aquellas páginas cuya estructura se soporta en el uso de una o m ás tablas. Además, dentro de los diseños con tablas, las páginas ensam bladas son aquellas cuyo aspecto visual está form ado por un núm ero am plio de
im ágenes que encajan entre sí en el interior de las celdas de una o más tablas.
Observa como el diseño con tablas nos permite huir del diseño vertical y como las celdas (en la ilustración resaltamos sus bordes en marrón y las num eramos) ocultan el hecho de que se trate de un ensamblado de imágenes rectangulares (una por celda). Sólo las celdas 6 y 7 llevarían texto HTML con colores
de fondo verde y blanco respectivamente.
La m oda de las páginas ensambladas continuó pese a la creación de los nuevos estándares HTML 3.2 y CSS 2, en 1997 y 1998 respectivamente. No sería hasta 1999, con la aparición de HTML 4.01 que com enzaría su lento declive.
Gracias a la herramienta Wayback Machine de Internet Archive, podemos visualizar páginas web antiguas desde 1996.
 disney.com en 1996
Page 13 of 158
08/ 11/ 2010

 microsoft.com en 1996
 sega.com en 1996
 apple.com en 1997
 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 páginas ensam bladas han desaparecido casi por completo y el elemento tabla se utiliza para aquello para lo que fue propuesto: tabular datos com o resultados de partidos, históricos de acciones, resúmenes de análisis, resumen de atajos de teclado (com o el visto en la Sección 1.2), etc.
Conjuntos de m arcos
Al comenzar la Sección 1.2 hablam os de cómo algunos navegadores añadían elementos HTML propios.
Así, el navegador Netscape Navigator, bastante popular durante la década de los 90, añadió el concepto de conjunto de marcos (fram eset, en Inglés).
Los conjuntos de m arcos perm iten dividir el espacio del navegador en regiones independientes, cada una m ostrando contenido proveniente de una página w eb distinta. La intención era la de desacoplar los elementos com o el m enú lateral o la cabecera del sitio web, que nunca cambiaban,
del contenido de la página que sí cam biaba. De esta forma podíamos ahorrarnos la tediosa tarea de reescribir el m enú y la cabecera de cada página.
Netscape trató de añadir este elemento al estándar HTML 3 pero no fue hasta la versión 4 que se vería integrado. De todas formas, m uy pocas páginas ofrecen diseños basados en conjuntos de m arcos y la propia W3C los desaconseja.
Actualmente, los programadores web usan lenguajes de programación especiales para ensamblar las distintas partes invariables de una página web como la cabecera, el menú o el pié de página.
No obstante, existe un elemento sim ilar a los conjuntos de marcos que perm ite incrustar el contenido de una página web en otra: son los llamados m arcos interiores (inner fram es, en Inglés) y se usan para "citar" páginas web, incrustándolas en el diseño de la página. Un buen ejem plo se encuentra en el
buscador de imágenes de Google.
Page 14 of 158
08/ 11/ 2010

Esta página de resultados de la búsqueda de imágenes de Google es un buen ejem plo de frame interior. La banda de arriba m uestra una previsualización e información sobre la im agen seleccionada. A la derecha de la banda puede leerse "Elim inar m arco". Google "cita" el contexto de la imagen incrustando la
página en un marco interior tras la banda de información.
Diseño con capas o divs y CSS
De nuevo, Netscape Navigator, en su versión 4, introdujo un elemento llamado capa orientado principalmente a los programadores web, pero con una gran flexibilidad en cuanto a posicionamiento y que adem ás, resultaba sem ánticamente neutro. Es decir, no inducía ninguna norma sobre su contenido (como
sí puede hacerlo un párrafo, una im agen, una tabla o una cabecera) y los diseñadores web podían usarlo como un elemento com odín para estructurar la página web con total libertad.
Su versión estándar llegó de la mano de HTML 4.01, la más reciente de las versiones HTML. En ella encontramos el elemento div a semejanza de la capa de Netscape Navigator. Como elem ento sem ánticam ente neutro, perm ite a los diseñadores estructurar las páginas librem ente adem ás de cubrir
Page 15 of 158
08/ 11/ 2010

la carencia de elementos HTML como artículos, fechas, monedas, menús, citas bibliográficas... perm itiendo la creación de elem entos personalizados.
Sin em bargo, el estándar quería m antener separadas la estructura y el estilo por lo que las posibilidades de posicionamiento que tenían 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 versátil en este sentido, que todo lo que podía
hacerse con las capas de Netscape Navigator se sigue pudiendo hacer con una sabia combinación de HTML y CSS.
No obstante, los divs no han ocultado las funciones de los elementos clásicos como los párrafos o las tablas, solo actúan como contenedores para ellos, tratando de hacer el código más estructurado. Por ejem plo, un div que represente un artículo contendría en su interior un encabezado, uno o varios párrafos
de noticia y una lista de enlaces y referencias; otro div que represente un área de cabecera podría incluir dentro otros divs, uno con una lista que represente el m enú de navegación, otro para un formulario con un cuadro de búsqueda, otro con una tabla de estadísticas de las últimas visitas...
Este es un artículo del blog tecnológico maikelnai.es
Las líneas rojas de esta imagen representan las divisiones en elementos div y las etiquetas am arillas, los nombres de cada elemento (los nombres van precedidos de un punto). Cada artículo está formado por un div contenedor llam ado hentry. En su interior hay otros dos, uno llamado entry-content que
significa contenido de la entrada y rodea el texto y la im agen. El otro se llam a entry-m eta y contiene la fecha de publicación, los com entarios y la categoría de la noticia.
La m ezcla de HTML y CSS resultó ser tan potente que, para hacernos una idea, todo lo que podía conseguirse mediante el uso de tablas (diseños tabulados o páginas ensam bladas), puede conseguirse ahora con el uso apropiado de divs y estilos sin tener que reinterpretar el significado del elem ento tabla.
Page 16 of 158
08/ 11/ 2010

La página de hautes.mynes.free.fr es un ejemplo perfecto de diseño horizontal. Fíjate en los recuadros de colores que exponen los divs. El conjunto de rectángulos para las pestañas o cómo se anidan los recuadros en el artículo como si se tratara de las celdas de una tabla.
Páginas web comerciales o institucionales que hacen uso de CSS, secciones y capas.
Page 17 of 158
08/ 11/ 2010

 http: / / www.w3.org/
 http: / / es.wikipedia.org/
 http: / / www.lastfm.es/
 http: / / www.apple.com / itunes/
 http: / / www.csszengarden.com/
Algunos im presionantes diseños hechos únicamente m ediante el buen uso de CSS, secciones y capas.
 http: / / tonyyoo.com / v2/
 http: / / colourmod.com/
 http: / / obuweb.com/
 http: / / www.jek2k.com/
 http: / / www.wallopcreative.com/
Recom iendo el blog de Román Cortés, tag de CSS, para ver im presionantes efectos creados sólo 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 .0 1 : transitional, fram eset y strict
En la actualidad, HTML 4.01 es la versión más reciente de HTML pero está dividida en tres (sub)versiones distintas: transitional (o "de tránsito"), frameset (basada en m arcos) y strict (o estricta).
 La versión transitional se creo para permitir que las páginas web antiguas se actualizasen con el mínimo esfuerzo, manteniendo la aceptación y compatibilidad con características desfasadas de las versiones anteriores.
 La versión framset permitía definir conjuntos de marcos.
 Por último, la versión strict es la más m oderna y en la que la w3c.org aconseja que se escriban las páginas de nueva creación. De hecho, es la versión que utilizarem os a lo largo del curso (¡y eso que no escribirem os una sola línea de código a m ano!)
El futuro de HTML: HTML 5
La evolución de Internet, la llegada de la Web 2.0 y el uso de las nuevas técnicas de diseño 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 artículo, 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 incluirán en la próxima versión de HTML son los siguientes (extraído, traducido y adaptado de de http: / / www.ibm .com/ developerworks/ library/ x-html5/ )
 sección: una parte o un capítulo de un libro, una sección de un capítulo o, en general, cualquier cosa que llevara asociada una cabecera en HTML 4
 cabecera: la cabecera principal (y única) de la página
 pie de página: el pie de página o la sección de firma en los correos electrónicos
 navegación: una colección de enlaces a otras páginas web
 artículo: una entrada independiente de un blog, diccionario, revista...
 bloque al m argen: una anotación o información que no forma parte del flujo narrativo natural del texto (como la información de publicación y los comentarios en la captura de la noticia del blog de maikelnai.es del apartado anterior)
 figura: imagen asociada a una descripción o pie de imagen, como las utilizadas en los libros de texto o en los periódicos
 diálogos: para representar diálogos entre varios interlocutores
 texto m arcado: se refiere a un texto resaltado pero no porque sea importante sino por que se desea resaltar algún uso del mismo (por ejemplo, considera el siguiente enlace en el que Google resalta el texto buscado dentro de la página)
 m om ento tem poral o fechas: para indicar que el texto es un tiem po o una fecha
 m edida: para expresar medidas
 progresos: para indicar que el texto representa el progreso de algún suceso
 detalles: un conjunto de datos que expresan información extra relacionada con otro elem ento. Por ejemplo, los autores de una entrada en un blog.
 m enú: una lista de comandos como los que podemos encontrar en aplicaciones de escritorio como Word o Dreamweaver. Es el equivalente a las barras de menús y herramientas.
Estamos seguros de que los lectores, usuarios corrientes de Internet, encontrarán muchas de las inclusiones necesarias si se desea que HTML tenga la capacidad de expresar la Internet moderna.
La accesibilidad también juega un papel muy importante en la evolución de las tecnologías web y com o veremos en el últim o apartado de esta sección, el uso de las estructuras correctas para denotar el carácter del texto resulta vital de cara a hacer de una web un canal totalm ente accesible.
Accesibilidad
Como dijimos hacia el principio de esta sección, la accesibilidad es la capacidad de una página w eb para poder ser utilizada por el m ayor núm ero de personas.
La w3c.org, preocupada por el creciente núm ero de usuarios de Internet y la masificación de este servicio, comienza en 1997 una iniciativa para hacer de las páginas web canales de inform ación accesibles al mayor número de personas posible.
Es entonces cuando el diseño web se torna m ás estructurado y escrupuloso en cuanto al uso correcto de los elementos HTML.
Por poner algunos ejemplos, piensa que, cuando una persona con problemas de visión accede a una página, nos conviene tener formas rápidas de cam biar el diseño de colores a una configuración de alto contraste para que le sea mucho m ás fácil visualizar el contenido. Esto se consigue mateniendo separadas
la estructura del diseño mediante el uso en com binación de HTML y CSS.
Por otro lado, conviene emplear correctam ente los elementos de im agen y tablas, suministrando la inform ación alternativa necesaria para que los lectores de pantalla, empleados por las personas ciegas puedan interpretar la información correctamente.
Por último, piensa en los nuevos CAPTCHA, los típicos cam pos de validación donde se nos pide que introduzcamos una combinación de números y letras que vemos en una imagen, normalm ente 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 validación? Los nuevos CAPTCHA vienen acompañados de versiones de audio para usuarios parcialm ente discapacitados.
Actualmente, la w3c.org proporciona un documento de recomendaciones dividido en tres niveles para ayudar a los diseñadores en la tarea de hacer accesibles sus páginas web.
Page 18 of 158
08/ 11/ 2010

2 . Lección 2 - El servidor w eb
Lección 2 - El servidor w eb
Planteam iento de la lección
Requisitos previos
 Una conexión a Internet
 Una cuenta de correo
Objetivos de la lección 2
 Familiarizar al estudiante con el modelo cliente-servidor
 Configurar un servidor gratuito en Internet
Secciones
1. ¿Qué es un servidor web?
2. Contratación de un servidor gratuito en Internet
Duración estim ada
Entender los conceptos de la lección y seguir el tutorial para contratar el servidor gratuito llevará de 1 a 2 horas.
2 .1 . Sección 2 .1 - ¿Qué es un servidor w eb?
Sección 2 .1 - ¿Qué es un servidor w eb?
El m odelo cliente-servidor
En realidad, toda la interacción entre un usuario cualquiera e Internet es una comunicación entre el ordenador del usuario y otro, situado en algún lugar del planeta. Por ejemplo, cuando desde nuestro navegador accedemos a http: / / www.google.es, nuestro ordenador llam a a otro de Google y se establece una
comunicación entre ellos, de forma muy parecida a com o lo harían dos personas que acaban de iniciar una conversación telefónica. De esta form a, nuestro ordenador le pide entonces al de Google que le m ande la página web del buscador y el ordenador de Google responde m andándosela.
Este tipo de comunicación, en la que un ordenador dem anda un servicio y otro se lo proporciona es lo que se conoce como modelo cliente-servidor donde el cliente sería el ordenador que demanda y el servidor, el que proporciona o "sirve".
El modelo cliente-servidor se encuentra presente en todos los servicios a través de Internet y no sólo en la visualización de páginas web. Por poner otro ejemplo: si consultamos un correo a través de MS Outlook de nuestra cuenta en Hotm ail, nuestro ordenador (o nuestro móvil por ampliar el ejemplo) se
convierte en cliente y una máquina de Microsoft Hotmail nos proporciona, como servidor, el mensaje que queremos leer.
Incluso si disponemos de videoconsolas con conexión 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 máquina que dirige la partida haciendo de servidor de juego.
Esta comunicación comienza por conocer con qué máquina se desea iniciar la conexión. Por poner una analogía sencilla, los ordenadores se localizan como las páginas de un teletexto o los teléfonos, es decir, con números. Estos números son realmente agrupaciones de cuatro números com o 192.168.0.1 ó
233.45.113.12 y se los llama direcciones I P. Como recordar una dirección IP podría resultar difícil, se inventó un servicio web para asociar estos números con nombres que no son más que las clásicas direcciones w eb 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 máquina (cuyo número ya conoce de antemano dado que es parte de la instalación de Internet en nuestras casas) cuál es el número asociado a esa dirección. La máquina responde y entonces comienza la verdadera
petición de página web a Google. La comunicación consiste en una serie de intercambios de información hechos de una determinada forma y siguiendo ciertas reglas llamadas en conjunto protocolo de com unicación. Cuando el cliente decide term inar la com unicación, se "despide cordialm ente" y cierra la
conexión.
El servidor w eb
Un mism o ordenador puede cubrir muchos tipos de servicios distintos. Una sola máquina puede proporcionar páginas web, juego en red y correo, todo al m ismo tiempo y cada servicio que pida un cliente a la misma máquina, será atendido por un programa especializado en ese tipo de servicio. Cada uno de
estros programas se llaman también servidores (no confundir con el rol servidor, del modelo cliente-servidor) y existen tantos como servicios de red: servidores de correo para la recepción y envío de m ensajes, servidores para traducir nombres a direcciones IP, servidores de páginas web, servidores para la
trasferencia de archivos, servidores de juego en red, servidores de chat...
Concretamente, el servidor w eb es el program a encargado de recibir las peticiones acerca de páginas w eb y enviar la página deseada com o respuesta.
Páginas w eb dinám icas
Los servidores actuales no se dedican exclusivam ente a recibir peticiones y devolver respuestas en form a de páginas web. Los servidores modernos, tras recibir la petición de un cliente, m anipulan la página con programas denominados intérpretes y la transforman en función del momento actual, de la
persona que pida la página, de la información contenida en una base de datos, etc, para luego ofrecérsela al cliente. Por ejemplo, imagina que accedes a:
http: / / www.misrinconesfavoritos.com/ m isfavoritos.html
Supongamos que Mis Rincones Favoritos es un sitio web que nos perm ite buscar fotografías de lugares extraordinarios del mundo y marcarlos como favoritos. Accedemos a la página misfavoritos.html que contiene una página plantilla para mostrar las fotografías que has marcado como preferidas. Está claro
que tus preferencias serán distintas a las de otros usuarios por lo que el servidor, antes de entregar la página, usa el intérprete para com pletar la plantilla consultando una base de datos que guarda tus fotografías favoritas y luego, envía la página personalizada a tu ordenador.
Page 19 of 158
08/ 11/ 2010

Este tipo de páginas reciben el nombre de dinám icas puesto que el contenido es variable en contraste con las páginas estáticas en las que el contenido es siem pre el mismo independientem ente de la situación. Actualm ente en la red cuesta encontrar sitios estáticos y hay muchos ejemplos de contenido
dinámico como los blogs, los foros o las páginas personales en las redes sociales. Sin embargo, las páginas con información general com o las de colegios, ayuntamientos o norm ativas oficiales son ejemplos de contenido estático.
2 .2 . Sección 2 .2 - Contratación de un servidor gratuito en I nternet
Sección 2 .2 - Contratación de un servidor gratuito en I nternet
Hosting o alojam iento en I nternet
Host es la palabra inglesa para anfitrión. En el ámbito de las páginas web, el hosting o alojam iento representa el hecho de albergar contenido w eb dentro de un ordenador. Por lo general, abrir una página web al público involucra dos actividades: por un lado encontrar un lugar dónde guardar
nuestra página web que esté perpetuam ente conectado a Internet y por otro, comprar una dirección web de nuestro agrado para asignarla a la dirección IP de esa máquina.
Para poder ofrecer una experiencia de diseño realista, vamos a contratar un alojamiento gratuito que, además, nos proporcionará una dirección web también gratuita desde la que podrem os visitar nuestras páginas web.
NOTA: Este paso, aunque añade realismo al curso, no es im prescindible. Si tienes dificultades técnicas, recurre al foro para ver si están allí resueltas y si aun así no consigues que funcione, sáltate esta lección.
El alojam iento en Zobyhost.com
Zobyhost ofrece alojamiento gratuito de páginas web muy fácil de contratar y configurar: perfecto para nuestro curso. Los aspectos m ás importantes del servicio son:
 1 GB de espacio, es decir, que el contenido total (im ágenes, videos, código HTML y CSS) de nuestras páginas no puede superar un gigabyte de tamaño. Más que suficiente para nuestros propósitos.
 3 0 GB de transferencia m ensual, o dicho de otra m anera, el núm ero de veces que nuestra página podrá ser visualizada en un m es. Esto depende también del tamaño de nuestras páginas pero 30GB es más que suficiente para comenzar.
 Acceso FTP. FTP es un protocolo, un método, para transferir archivos a través de Internet. Gracias a FTP podremos copiar la página web que diseñemos en nuestros ordenadores al ordenador de Zobyhost que aloja nuestra página. Para ello, al contratar el servicio se nos proporcionará una dirección
web, un nombre de usuario y una contraseña que utilizaremos para cargar los archivos.
 No tiene publicidad. Es decir, que no insertará publicidad en nuestras páginas.
NOTA: Recomendam os Zobyhost porque es fácil y potente pero si conoces otro servicio de hosting que te guste más eres libre de contratarlo por tu cuenta. Asegúrate no obstante de que te proporcionan una cuenta FTP.
Contratación del servicio
Es bastante importante que uses un navegador completam ente actualizado para realizar la contratación. Desde aquí recomendamos Firefox o Chrome.
Ahora bien, lo primero que haremos será hacer clic en el botón "Crear Nueva Cuenta", situado en la cabecera de Zobyhost.
Abajo encontraremos un botón que dice "Continuar con el registro > > > " así que lo pulsaremos para poder comenzar el proceso.
Page 20 of 158
08/ 11/ 2010

El botón 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 página, en el cuadro de contenido.
El formulario de registro es muy sencillo e incluye muy pocos pasos. Lee detenidamente las instrucciones y completa cada campo. Proporciona una dirección de correo electrónico válida porque será allí donde se te envíen los datos de acceso de tu alojam iento. El cam po subdominio se refiere al nombre de
tu espacio web. Ten en cuenta que cuando completes el registro tu dirección web será de la forma http:/ / nom bre- elegido.zobyhost.com
Page 21 of 158
08/ 11/ 2010

Rellena el formulario de registro con tus propios datos. Recuerda escoger un subdominio e incluir una dirección de correo electrónico válida porque allí se te enviarán los datos de tu cuenta.
Cuando termines y hayas aceptado los términos y condiciones de uso podrás continuar con la creación de la cuenta haciendo clic en el botón "Crear". El formulario desaparecerá y tendremos que hacer clic sobre el botón "Click Me To Continue" para continuar.
Completa el CAPTCHA correctamente para terminar con el proceso de registro.
Page 22 of 158
08/ 11/ 2010

Completa el CAPTCHA
Hecho esto nos avisarán de que un m ail de confirmación se ha envíado a nuestro correo electrónico. Tendremos que localizar este m ensaje (cuidado, puede estar en spam ) y hacer clic en la dirección que nos proporciona, tras las palabras "by sim ply clicking here".
De nuevo tendremos que pasar un CAPTCHA y hacer clic en "Register"
Page 23 of 158
08/ 11/ 2010

De nuevo, introduce las dos palabras para poder continuar.
Hemos terminado el registro y se nos m uestra un resumen con los datos de nuestra cuenta. Podemos imprimir esta página o descargarla aunque Zobyhost nos enviará un mail con la misma información. Conviene tener a mano los datos FTP user nam e, FTP passw ord, FTP host nam e y Your dom ain
nam e porque los usaremos en la siguiente lección.
Page 24 of 158
08/ 11/ 2010

Puedes imprimir la página o descargarla en formato PDF aunque Zobyhost te habrá enviado un mail con los mismos datos.
Com probar que todo funciona
Escoge cualquiera de las direcciones que te proporcionaron en el campo Your dom ain name e introdúcela en tu navegador, en nuestro caso http: / / dream weaver2010.zobyhost.com/ o http: / / www.dreamweaver2010.zobyhost.com / . Debería aparecer una página web de prueba, avisándote de que tu cuenta ha
sido creada con éxito.
Page 25 of 158
08/ 11/ 2010

Si puedes visualizar esta página 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 dirección.
2 .2 .1 - Exam en tipo test
A continuación debes realizar un sencillo examen. Son unas cuantas preguntas sobre lo que has aprendido en las dos prim eras lecciones. Te permitimos que falles dos. Si fallas más, deberás repetir el exam en. Puedes realizarlo tantas veces como quieras.
Cada vez que respondas a una pregunta debes pulsar el botón "Guardar respuesta" antes de pasar a la siguiente pregunta.
I MPORTANTE: Cuando pulses el botón para empezar el examen, se abrirá una nueva ventana (o pestaña) en la que se encontrará el exam en. No cierres ni cam bies de página en la ventana o pestaña anterior, pues cuando hayas terminado el exam en será ahí donde podrás ver la puntuación obtenida.
¡Suerte!
3 . Lección 3 - Sitios w eb con Dream w eaver
Page 26 of 158
08/ 11/ 2010

Lección 3 - Sitios w eb con Dream w eaver
Planteam iento
Requisitos previos
 Estar familiarizado con el entorno de Dreamweaver (Lección 1)
 Entender el modelo cliente-servidor (Lección 2)
 Tener un alojamiento web y una cuenta FTP (Lección 2)
 Enseñar al estudiante el significado de sitio web
 Familiarizar al alumno con el ciclo de vida de un sitio web
 Enseñar a sincronizar un servidor remoto respecto de uno local
Secciones
1. El asistente de sitios web
2. Las vistas del sitio web
3. Sincronización con el servidor
Duración estim ada
El estudio de este tema requiere cierta atención por lo que se recomienda abordarlo en 2 sesiones de 1 a 2 horas.
3 .1 . Sección 3 .1 - El asistente de sitios w eb
Sección 3 .1 - El asistente de sitios w eb
Sitios w eb
Hasta ahora hemos hablado de diseñar páginas web. Sin embargo, normalm ente lo que se diseña es un sitio web. Los sitios web son conjuntos de páginas relacionadas por un tema o un objetivo. Por ejem plo, visitando el sitio web de Apple encontram os muchas páginas web con información sobre los
productos de la empresa que, además, comparten un diseño semejante y uniforme marcando de esta forma una identidad, línea o imagen de marca característica.
A lo largo de este curso, diseñaremos un sitio web sobre nosotros m ism os, lo que suele llamarse una página personal. No obstante, como vam os a involucrar muchas páginas y tenem os nuestra propia dirección en Zobyhost (ver Lección 2), direm os más correctamente que vamos a diseñar nuestro sitio w eb
personal.
El asistente de sitios w eb
Pasem os por fin a Dream w eaver: abre el program a y observa el área de trabajo. Repasa la Lección 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.
Page 27 of 158
08/ 11/ 2010

Hacemos clic en Administrar sitios para acceder a la ventana de administración de sitios web. También podemos desplegar el cuadro de selección y hacer clic en la última opción.
La ventana de administración de sitios web muestra un listado de nuestros sitios web y tiene la siguiente apariencia:
Page 28 of 158
08/ 11/ 2010

Hacemos clic en Nuevo... y luego en Sitio para mostrar la ventana de configuración de sitios web. Debemos asegurarnos de que estam os en la pestaña Básicas para poder realizar el asistente (en caso contrario, se mostrarían las opciones avanzadas y no veríam os el asistente). Te recomendam os que
leas el tutorial primero antes de llevarlo a cabo por ti mismo.
1. En el prim er cuadro de texto introduce el nombre del sitio web. En el ejemplo, MiSitioWeb. Y en el segundo, introduce la dirección web que te proporcionó Zobyhost para tu alojamiento, http: / / cursodreamweaver.zobyhost.com, en este caso. Es muy im portante que no olvides poner "http:/ / " al
com ienzo de la dirección. Cuando termines, haz clic en el botón Siguiente para continuar.
2. En la siguiente página nos dan a elegir una tecnología de servidor. No queremos trabajar con ninguna de ellas así que dejamos marcada la primera opción. De nuevo, hacemos clic en el botón Siguiente para continuar.
Page 29 of 158
08/ 11/ 2010

3. En el siguiente diálogo debemos seleccionar dónde guardar las páginas web de nuestro sitio web. Si seleccionamos la opción recomendada, editar copias locales en m i máquina y luego cargarlas al servidor cuando estén listas, Dream weaver nos propone una ruta por defecto dentro de Mis Documentos.
Dejaremos la opción por defecto. Conviene recordar la dirección para poder localizar los archivos desde el explorador de Windows.
Page 30 of 158
08/ 11/ 2010

4. Ahora necesitam os los datos de la cuenta FTP que nos proporcionó Zobyhost (si por razones técnicas no pudiste contratar la cuenta de Zobyhost, elige Ninguno en el cuadro desplegable y pasa al punto 5).
Para empezar, abriremos el cuadro desplegable y seleccionarem os FTP. En el primer campo pegaremos el dato proporcionado en FTP host nam e; en el segundo escribiremos htdocs, que es la carpeta, dentro del servidor de Zobyhost, donde se guardarán las páginas; en el tercero hay que copiar el
contenido de FTP user nam e y en el último, el de FTP passw ord. Com o consejo, conviene marcar la opción Guardar, situada a la derecha del cam po de contraseña, para que Dreamweaver la introduzca automáticamente al cargar archivos en el servidor.
Page 31 of 158
08/ 11/ 2010

5. Antes de hacer clic en continuar probaremos la conexión haciendo clic en el botón Conexión de prueba. Puede tardar unos segundos pero si lo hemos hecho todo bien, al poco tiempo aparecerá una ventana de confirmación diciendo que hemos tenido éxito en la conexión. Ya puedes aceptar el diálogo y
continuar haciendo clic en Siguiente.
6. Si fueras a trabajar en equipo para crear un sitio web, sería peligroso dejar que dos personas pudieran editar la misma página al mism o tiempo. Dreamweaver puede llevar el control de quién está editando cada archivo en cada momento para bloquear el acceso a otros usuarios. Si queremos activar
esta característica m arcaremos la primera opción. En este caso vam os a marcar la segunda ya que no necesitamos coordinarnos con nadie. Haz clic en Siguiente para pasar a la página de resumen.
Page 32 of 158
08/ 11/ 2010

7. En la página de resumen se presentan las decisiones tomadas durante el asistente. Hacemos clic en Com pletado para finalizar el asistente.
Page 33 of 158
08/ 11/ 2010

El administrador de sitios web mostrará ahora el nuevo sitio entre los disponibles. Nos aseguramos de que lo tenem os seleccionado y harem os clic en Listo para terminar.
Si observamos ahora el Explorador de archivos veremos que ha cam biado a la vista de exploración de archivos del sitio web. La raíz del sitio es una carpeta verde etiquetada como Sitio - MiSitioWeb seguida de la ruta dónde se guarda el sitio web.
Page 34 of 158
08/ 11/ 2010

Si queremos volver al administrador de sitios web, debemos acceder a él mediante la última opción del cuadro desplegable del Explorador de archivos. El otro cuadro desplegable, donde podemos leer Vista local, m uestra las vistas del sitio web, las cuales detallaremos en la Sección 3.2.
NOTA: A veces la conexión con el servidor no es posible. Si es tu caso abre el Administrador de sitios web, pestaña Avanzadas y localiza la sección Datos remotos. Prueba a marcar las casillas de verificación Utilizar FTP pasivo o Utilizar Firew all.
Page 35 of 158
08/ 11/ 2010

3 .2 . Sección 3 .2 - Las vistas del sitio w eb
Sección 3 .2 - Las vistas del sitio w eb
Un sitio w eb de prueba
Asegúrate 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 asegúrate que el otro cuadro desplegable está en Vista local.
Ahora haz clic derecho sobre la carpeta verde y selecciona Explorar... (segunda opción comenzando desde abajo) en el menú desplegable. Esto abrirá un explorador de Windows situado allí donde guardarás tus páginas. Descarga las páginas de prueba y descomprime el archivo ZIP en ese lugar.
En Dreamweaver, haz clic en el botón Actualizar (el icono que tiene forma de flecha circular, ) y asegúrate de que se muestran todos los archivos que hemos descomprim idos: index.html, datos.html, contacto.html, curriculum.html.
Page 36 of 158
08/ 11/ 2010

La vista local
La vista local muestra, en form a de árbol, el listado de los archivos que forman nuestro sitio web en nuestro ordenador. No sólo las páginas sino también las imágenes, archivos comprim idos y subcarpetas del sitio. Para acceder a ella basta seleccionar la opción Vista local en el cuadro desplegable de la
derecha, en el Explorador de Archivos.
La vista local recibe este nombre porque alude a nuestro ordenador al que llama servidor local o m áquina local en contraste con el servidor rem oto o m áquina rem ota que sería la de Zobyhost.
Page 37 of 158
08/ 11/ 2010

La vista rem ota
La vista remota también muestra el listado de los archivos que forman nuestro sitio web pero en el servidor de Zobyhost. Como acabam os de decir, a este servidor se le llama comúnm ente servidor rem oto. Podemos activar esta vista seleccionando Vista remota en el cuadro desplegable.
Antes de ver ningún archivo debemos conectar con el servidor, lo que haremos haciendo clic en el botón Conectar al servidor remoto, . Pasados unos segundos se mostrarán los archivos del servidor que, como podremos com probar, no coinciden con los de la vista local. Cuando esto ocurre, decim os que
el servidor está desincronizado respecto de nuestro ordenador. Aprenderemos a sincronizarlo en la Sección 3.3.
Otras vistas
El cuadro desplegable incluye dos vistas más el Servidor de pruebas y la Vista de base de datos. No vam os a ver ninguna de las dos porque quedan fuera del alcance de este curso.
3 .3 . Sección 3 .3 - Sincronización con el servidor
Sección 3 .3 - Sincronización con el servidor
El ciclo de vida del sitio w eb
Idealm ente, un buen entorno de diseño consta de tres partes: un ordenador de desarrollo, un servidor de pruebas y otro de publicación. La idea es diseñar y programar el sitio web en el equipo de desarrollo, com probar su funcionam iento en el servidor de pruebas y tras constatar que todo funciona,
trasladarlo al servidor de publicación para darlo a conocer en Internet.
El ciclo de desarrollo consta de las siguientes fases:
1. Elaboración del diseño del sitio web y creación del m ism o en el equipo de desarrollo.
2. Sincronización 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.
3. Validar que todo funciona correctam ente.
4. Si no es el caso, corregir en el equipo de desarrollo y volver al punto 2.
5. Sincronización con el servidor de publicación.
Page 38 of 158
08/ 11/ 2010

Como dijimos en la Sección 3.2, nosotros no utilizaremos servidor de pruebas pero sí servidor de publicación, que será nuestro servidor remoto de Zobyhost.
Sincronización del servidor rem oto
Vamos a sincronizar el servidor de pruebas con nuestro equipo de desarrollo. Es decir, harem os que se copien las versiones m ás recientes de nuestros archivos al servidor rem oto. Como esta es la primera vez que sincronizamos, se copiarán todos los archivos. En futuras ocasiones, sólo los archivos
que hayan sufrido cambios serán actualizados.
Para ello, en cualquiera de las vista, debem os hacer clic en el botón Sincronizar (las dos flechas en círculo, ) lo que mostrará el cuadro de diálogo Sincronizar archivos.
En él podemos especificar qué queremos sincronizar seleccionando la opción oportuna en el cuadro desplegable Sincronizar. También podemos indicar el tipo de operación en el cuadro desplegable Dirección. En el cuadro desplegable Sincronizar elegirem os Todo el sitio 'MiSitioWeb' indicando de esta form a que
queremos cargar todo el sitio. En Dirección especificaremos Colocar archivos m ás nuevos en remoto para decir así que el servidor rem oto debe quedar como nuestra carpeta local. Por últim o marcamos la opción Elim inar archivos remotos no existentes en la unidad local para destruir del servidor todo aquello
que no esté en nuestro ordenador.
Cuando hayas configurado el diálogo como en la imagen, haz clic en Vista previa... lo que mostrará un nuevo diálogo.
El diálogo de Vista previa nos informará de las operaciones que van a llevarse a cabo tanto en nuestro ordenador como en el ordenador remoto. Sólo si estamos conformes, podremos terminar la sincronización haciendo clic en Aceptar.
3 .3 .1 - Ejercicio guiado: nuevo archivo y sincronización con el servidor rem oto
Debes crear una nueva página web, para ello ve a la vista local y haz clic con el botón derecho sobre un espacio en blanco del árbol de archivos. Selecciona la primera opción, Nuevo archivo y verás que aparece un nuevo archivo en el árbol. Dale el nombre de fotos.htm l y pulsa intro para aceptar el nom bre.
Ahora sincroniza con el servidor remoto de la m isma form a que acabamos de hacerlo. Configura la sincronización como en el ejemplo anterior y observa la vista previa. Asegúrate de que entiendes lo que va a ocurrir y haz clic en Aceptar para terminar.
Sincronización de archivos individuales
Page 39 of 158
08/ 11/ 2010

Es común que en diseño nos encontremos realizando pequeñas modificaciones sobre un m ismo archivo. En este caso nos puede interesar una forma rápida de cargar las últimas m odificaciones en el servidor remoto sin tener que pasar por la vista previa de una sincronización completa.
Para ello utilizaremos el botón Colocar, , a la izquierda del de sincronización o el atajo de teclado ctrl + shift + U.
Si utilizam os el botón, debemos asegurarnos primero de que estamos en la vista local y el archivo que querem os cargar está seleccionado en el árbol de archivos. Si utilizamos el atajo de teclado, basta que estemos editando el archivo.
Antes de completar la sincronización se nos preguntará por primera vez si, además 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 opción en las
propiedades avanzadas del sitio web.
Mi recom endación es escoger Sí y marcar la casilla, dado que sólo deberíamos cargar archivos al servidor remoto cuando estuviéram os seguros de su corrección.
3 .3 .2 - Ejercicio guiado: sincronización del archivo fotos
Haz doble clic sobre el archivo fotos.html del ejercicio anterior y se abrirá el área de edición. Escribe cualquier cosa en su interior y guarda el archivo mediante la combinación de teclas ctrl + S o haciendo clic en la opción Guardar del m enú Archivo.
Ahora utiliza la combinación de teclado ctrl + shift + U para sincronizar sólo ese archivo.
Prueba de la página w eb
Prueba a cambiar a la vista local y haz doble clic sobre index.html para abrir el archivo en el área de edición. Ahora pulsa F12 o utiliza el icono de vista previa (el icono del mundo, en la barra de herramientas del área de edición, ). Se abrirá una ventana de nuestro navegador por defecto con la página
web. Esta será la form a de probar nuestra página web antes de subirla al servidor remoto.
Page 40 of 158
08/ 11/ 2010

Vista de la copia local de index.html en el navegador. Fíjate en la dirección del navegador.
Si queremos probar cómo se ve nuestra página en Internet, tendrem os que sincronizar el sitio y luego abrir un navegador e introducir la dirección web que nos proporcionó Zobyhost. Si no fuera necesario sincronizar, Dream weaver nos avisaría de ello.
Page 41 of 158
08/ 11/ 2010

Vista de la copia rem ota de index.html en el navegador. Fíjate en la dirección del navegador para apreciar que nos encontramos en el servidor de Zobyhost.
3 .3 .3 - Ejercicio guiado: acceder rem otam ente a las páginas del sitio w eb
Abre un navegador de internet e Introduce tu dirección web y al final de la misma añade una barra (si no hay una ya) y a continuación escribe fotos.html Presiona intro y comprueba que accedes a la página de fotos.
Puedes utilizar esta técnica para acceder a todos los archivos:
 index.html*
Page 42 of 158
08/ 11/ 2010

 datos.html
 curriculum.html
 contacto.html
 fotos.htm l
* No es necesario poner nada si querem os acceder a index.htm l. El servidor cargará un archivo que se llam e index.html si no se proporciona ninguno.
3 .3 .4 - Ejercicio: Envíanos la dirección de tu sitio w eb
En esta lección sólo tienes que enviar un mensaje de correo a tu tutor, usando la herram ienta de Com unicación con tutor, con la dirección web de tu sitio (por ejemplo, http: / / javiersancho.zobyhost.com). La usaremos para comprobar cómo va quedando tu sitio a lo largo del curso.
NOTA: Habrás advertido dos tipos de cuadros de ejercicios: aquellos con título azul y otros con título verde. Los de título azul son ejercicios guiados con los que practicarás lo que vayas aprendiendo durante el curso. Los verdes son ejercicios en los que te valdrás por tí m ismo para realizarlos. No te saltes
ninguno ya que en este curso no hay prácticas al final de cada lección sino que deberás entregar las sucesivas versiones de tu sitio w eb y este se irá enriqueciendo de ejercicio en ejercicio.
NOTA: Además, en la sección Más cosas encontrarás los criterios de evaluación de cada lección.
4 . Lección 4 - Elem entos de texto HTML y el color en CSS
Lección 4 - Elem entos de texto HTML y el color en CSS
Planteam iento
Requisitos previos
 Estar familiarizado con el entorno de Dreamweaver (Lección 1)
 Saber sincronizar el servidor remoto (Lección 3)
 Conocim ientos básicos sobre procesadores de textos
 Mostrar al estudiante los diferentes tipos de bloques de texto
 Enseñar al estudiante a estructurar la página web mediante los encabezados
 Familiarizar al estudiante con los estilos CSS
 Enseñar al estudiante a aplicar el formato oportuno de acuerdo con el carácter del texto
 Iniciar al estudiante en la creación de estilos CSS m ediante el color
Secciones
1. Encabezados, párrafos y listas
2. Estilos HTML
3. CSS básico: colores en el texto
Duración estim ada
De nuevo, se recomienda abordar la lección en dos sesiones de 1 a 2 horas cada una.
4 .1 . Sección 4 .1 - Encabezados, párrafos y listas
Sección 4 .1 - Encabezados, párrafos y listas
Las vistas de la página w eb
Dream weaver nos permite editar docum entos HTML de tres form as: modificando el diseño, alterando el código, o utilizando una vista híbrida que nos perm ite manipular diseño y código al m ismo tiempo. En este curso utilizaremos principalmente la vista de diseño pero el alum no que desee indagar en los
entresijos de la creación de páginas web puede utilizar la vista mixta para hacerse una idea de cómo el diseño se traduce a código.
Además de las vistas de edición, Dreamweaver CS4 introduce un nuevo tipo de vista a la que denomina Vista en vivo que permite visualizar la página como si la visitáramos desde el navegador pero sin salir de Dream weaver.
Para conocerlas, asegúrate de que tienes seleccionado el proyecto MiSitioW eb 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.htm l para que aparezca el área de edición. Deberías ver algo como esto:
Page 43 of 158
08/ 11/ 2010

Fíjate como encima del área de edición encontramos cuatro botones: Código, Dividir, Diseño y Vista en vivo, y . Estos botones permiten alternar entre los cuatro tipos de visualización de los que acabamos de hablar y que detallamos a continuación:
 Vista de edición de código. Esta vista nos permite ver el código de la página tal y como se transmitirá hasta el navegador. La vista de código resalta los elementos de HTML para ayudar al programador web a distinguirlos del texto. A este tipo de ayuda visual se la llam a resaltado de sintaxis. No
utilizaremos esta vista dentro del curso.
Page 44 of 158
08/ 11/ 2010

 Vista en m odo m ixto o Dividir. El modo Dividir parte el área de edición en dos mitades. La mitad superior muestra el código HTML mientras que la inferior m uestra el área de diseño donde el código HTML se interpreta com o si se tratara de un navegador web. Durante este curso utilizaremos tan sólo
el área inferior o de diseño pero como ya hemos dicho, el alumno que lo desee puede usar esta vista si desea indagar en los principios del HTML.
Page 45 of 158
08/ 11/ 2010

 Vista en m odo Diseño. El últim o modo de edición oculta completam ente el código dejando tan sólo el área de diseño. Como acabamos de decir, el área de Diseño trata de interpretar el código HTML como si se viera directamente en un explorador. Este es el modo sobre el que se debería realizar el
curso.
Page 46 of 158
08/ 11/ 2010

 Vista en vivo. Como hemos dicho, en este m odo, propio de Dreamweaver CS4, podemos visualizar la página web com o si la viéramos 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
página con norm alidad. Podemos entrar y salir de la vista en vivo mediante la combinación alt + F1 1 .
Page 47 of 158
08/ 11/ 2010

Los encabezados
Fíjate en el título de esta página web, en él puede leerse "Sección 4.1 - Encabezados, párrafos y listas". Fijate además en el título de este apartado o del anterior donde ponía "Las vistas de la página web". Ambos son ejemplos de encabezados o títulos.
Los elementos encabezado se utilizan para dividir un texto en secciones, como ocurre con los capítulos de un libro de texto o los apartados de una ley, por ejemplo. La sección de texto com ienza en el encabezado y termina en el final de la página o en el siguiente encabezado.
Para convertir un texto en encabezado basta cambiar su propiedad Form ato 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.htm l
Vamos a modificar la página web datos.htm l. Si no la tienes abierta ya, abre este archivo haciendo doble clic en él desde el explorador de archivos. Asegúrate de que la vista seleccionada se encuentra en diseño para que el código HTML no aparezca. Selecciona el contenido de la página web y suprímelo con
la tecla suprim ir o borrar de tu teclado.
Ahora escribe un encabezado para esta página que hablará un poco de nosotros m ismos. Por ejemplo, escribe el texto "Sobre mí" (sin las comillas). Luego haz clic sobre la palabra "mi" para colocar el cursor en la línea de texto del encabezado y cambia su propiedad Formato situada en el panel Propiedades
Page 48 of 158
08/ 11/ 2010

(bajo el área de edición) a Encabezado 1.
Notarás que su tam año 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 títulos de hasta nivel 6. Cuanto m ayor sea el nivel, m ás específica deberá ser la sección 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 páginas del curso sólo hay un encabezado de nivel 1 siendo el nombre de la Sección. Cada apartado (subrayado por una línea gris discontinua) es un encabezado de nivel 2 y los títulos de los ejercicios son encabezados de nivel 3.
4 .1 .2 - Ejercicio guiado: planificación de la página datos.htm l
Vamos a continuar editando la página datos.html. En el ejercicio anterior hemos incluído una cabecera de nivel 1 con el texto "Sobre m í". A continuación escribiremos un texto con una breve autobiografía y completaremos la inform ación con nuestros datos de contacto y gustos y aficiones tales como nuestros
grupos, películas o novelas preferidas. Esto mismo, esquematizado, queda como sigue:
 Sobre mí
 Autobiografía
 Datos de contacto
 Gustos y aficiones
 Literatura
 Música
 Cine
Del esquema podemos diferenciar tres niveles de encabezados: un encabezado de nivel 1 (Sobre mí), tres encabezados de nivel 2 (Autobiografía, Datos de contacto y Gustos y aficiones) y otros tres de nivel 3 (Literatura, Música y Cine).
Escribe los títulos de los encabezados en líneas distintas pulsando la tecla enter al final de cada título. A continuación haz clic en cualquier palabra de cada uno de los encabezados aplicando el formato correspondiente.
Añade además 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 sección de la página web. El elemento encabezado no tendría porque aplicar ningún estilo al texto pero, como dijimos, la w3c.org define una m anera por defecto de representar cada elemento, sin que tengamos que definirlo explícitamente
con CSS.
Así, parece que resulta tentador utilizar títulos para aum entar o reducir el tamaño de la fuente del texto, pero lo aprendido en la Lección 1 debería servirnos para saber que al m arcar un texto como encabezado estamos estructurando la página web. Hablaremos del diseño en las Lecciones 6 y 7.
Podem os usar las combinaciones de teclado ctrl + 1 a ctrl + 6 para convertir un párrafo en los encabezados de nivel 1 al 6 respectivamente. También podem os usar ctrl + shift + P para convertir un encabezado de cualquier nivel en un párrafo corriente.
El título de la página w eb
Page 49 of 158
08/ 11/ 2010

Si bien no es una cabecera, en los navegadores es común encontrar un título para la página web que aparece en la pestaña o la barra de título. Este título puede especificarse en el cam po título, situado tras el botón de vista en vivo y código en vivo.
Basta escribir las palabras que queramos que formen el título de la página y pulsar enter.
NOTA: De ahora en adelante, recuerda guardar tus cam bios con frecuencia. Utiliza la opción Guardar del menú Archivo o utiliza la combinación de teclas ctrl + S.
El párrafo
En Dreamweaver podemos iniciar un nuevo párrafo pulsando enter al térm ino de otro. Advierte que, como ocurre en los procesadores de texto, no es necesario incluir saltos de línea intermedios para ajustar el texto dado que este se amolda automáticam ente a las dimensiones de la ventana del navegador
como veremos en breve.
4 .1 .3 - Ejercicio guiado: escribiendo la autobiografía
Introduce una nueva línea tras el encabezado de nivel 2 y trata de, en 6 ó 7 líneas, escribir una corta autobiografía. Algo como esto:
Nací en Decapod 10 y mis aspiraciones eran las de ser comediante como mi tio Harold. Sin embargo, presionado por mis padres decidí convertirm e en doctor y licenciarme en la Universidad de Marte, hecho del que no puedo dar crédito ya que perdí m i título en un volcán. Viajé a La Tierra donde
comencé mi carrera en algunas clínicas clandestinas hasta ser empleado por Planet Express donde ya llevo trabajando 10 años.
Asegúrate de que su formato es párrafo y no encabezado mediante el menú desplegable del panel Propiedades. Debería aparecer com o Párrafo, si no es así, cambialo.
Am plía tu biografía incluyendo un párrafo m ás como este:
En dos ocasiones he tratado de cam biar m i vida actual. En una viajé hasta mi planeta natal con el fin de encontrar el am or pero éramos im pares y me quedé solo. En otra ocasión financié una película para mi tio Harold que resultó en un com pleto fracasó y m e hundió, todavía más, en esta mísea
vida m ia.
Un párrafo aporta algunas características al texto que lo distinguen de otros formatos:
 Como en los encabezados y en la mayoría de los elementos HTML, la distancia entre dos palabras es exactamente de 1 espacio. Prueba a introducir más de 1 y com probarás como no puedes.
 De nuevo, como en la mayoría de los elementos HTML, dentro de un párrafo no puede haber tabuladores. Del m ism o modo, trata de introducir un tabulador y comprobarás que tampoco es posible.
 Los párrafos no permiten saltos de línea internos. Un salto de línea producto de apretar enter en el teclado crea un nuevo párrafo. Se comporta como un "punto y a parte".
 Los párrafos se am oldan automáticamente al tamaño de la ventana del explorador. Previsualiza la página web pulsando F1 2 y cambia el tamaño del navegador para comprobar el ajuste automático del texto.
 Los párrafos introducen un espacio de separación entre ellos. Advierte la diferencia entre una línea y otra del mismo párrafo y entre un párrafo y el siguiente.
NOTA: algunos navegadores guardan en caché la página datos.html antigua por lo que al hacer la previsualización nos aparecería aun la vieja página. Esto se soluciona pulsando F5 (recargar) o ctrl + F5 en la mayoría de los navegadores.
El form ato predeterm inado
El formato predeterm inado 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 tipografía de ancho fijo como Courier y se utiliza cuando se desea una trascripción más precisa de un texto. Al contrario de como sucede con
los párrafos, el texto predeterm inado conserva los espacios y tabuladores y un salto de línea no inicia un nuevo párrafo sino que salta a la línea siguiente. Además, el texto predeterminado no se ajusta al tamaño de la ventana del navegador.
4 .1 .4 - Ejercicio guiado: pruebas con el form ato predeterm inado
Al final de la página, crea un encabezado de nivel dos llam ado "Texto de prueba con formato predeterminado" y escribe un texto de prueba. Selecciónalo y cambia su formato a Form ato predeterminado en el cuadro desplegable Formato del panel Propiedades.
Page 50 of 158
08/ 11/ 2010

Prueba a introducir espacios y tabuladores. Observa como un salto de línea no introduce un nuevo párrafo. Cuando termines de escribir, prueba la página de nuevo en el navegador y com prueba 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 página.
Si queremos dejar de introducir un texto con form ato predeterminado colocarem os el cursor al final del texto y pulsarem os dos veces seguidas enter. Otra form a es continuar escribiendo con texto en form ato predeterminado y luego seleccionar el texto que deseem os convertir en párrafo y cam biar
su form ato. Este m étodo funciona siem pre, independientemente del formato que deseemos aplicar.
4 .1 .5 - Ejercicio ( opcional) : cam bio de form ato
Selecciona una frase de tu autobiografía y alterna entre todos los formatos posibles (incluyendo el etiquetado com o Ninguno). Observa las diferencias y vuelve a la versión original (párrafo).
NOTA: durante este curso, el texto predeterminado aparecerá dentro de cajas grises y con fuente monoespacio, com o la de las máquinas 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 puntuación, miden exactamente lo mismo de ancho.
¡Esto quiere decir que si dos líneas contienen un número igual
de caracteres, entonces ocuparán exactamente el mismo espacio!
El texto con formato predeterminado respeta los tabuladores y los espacios de más entre palabra y palabra. Y por cierto, no se ajusta a las dimensiones de la ventana del navegador.
Listas de elem entos
Hay dos clases de listas de elementos, las listas ordenadas:
1. Mercurio
2. Venus
3. La Tierra
4. Marte
5. Júpiter
6. Saturno
7. Urano
8. Neptuno
9. Plutón
Y las no ordenadas:
 Leche
 Huevos
 Pan
 Azúcar
 Naranjas
 Aceite
Como es fácil apreciar, las primeras im plican cierto orden en sus elementos mientras que en las segundas, el orden no importa.
Para añadir una lista se debe hacer introducir un nuevo párrafo allí donde queramos que aparezca la lista y a continuación hacer clic en los iconos de lista sin ordenar, o lista ordenada, que se encuentran en el panel Propiedades. A continuación 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 línea del primer elemento y pulsarem os la tecla enter. Esto desplazará el elem ento primero a una segunda posición 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 sangría de texto, . Para volver al nivel anterior se debe pulsar shift + tabulador o el icono de anular sangría de texto, .
 Bebida
 Coca Cola
 Cerveza
 Aperitivos
 Patatas
 Aceitunas
 Frutos secos
Para dejar de introducir elementos debemos situarnos en el primer nivel y pulsar shift + tabulador o hacer clic en el icono de anular sangría de texto, como si lo que quisiéramos decir es que "volvemos al nivel 0".
Podem os cambiar en cualquier m omento el tipo de lista haciendo clic sobre los iconos de las listas. De esta forma, podem os anidar listas no ordenadas dentro de otras ordenadas y viceversa. Sin embargo, antes de volver a un nivel anterior tendrem os que cam biar el tipo de lista al del nivel anterior.
Si no hacemos esto, Dream weaver iniciará una nueva lista con el tipo actual.
4 .1 .6 - Ejercicio guiado: lista de películas preferidas
Supongamos que queremos escribir la siguiente lista:
 Terror
1. Alien, el Octavo Pasajero
2. Drácula
3. La Noche de los Muertos Vivientes
 Ciencia Ficción
1. The Matrix
2. Gattaca
3. Terminator 2
Page 51 of 158
08/ 11/ 2010

Para ello com ienza insertando una lista no ordenada con el icono lista no ordenada, . Tras escribir "Terror" pulsam os enter para incluir un nuevo elem ento. Ahora haz clic sobre el icono de sangría de texto, y luego sobre el de lista ordenada, . Escribe los tres títulos de película y antes de regresar al
nivel anterior, haz clic en el icono de lista no ordenada, . Finalmente, haz clic en el icono de anular sangría de texto, , escribe "Ciencia Ficción" y repite el procedimiento.
4 .1 .7 - Ejercicio: listado de aficiones
Observa el apartado Gustos y Aficiones de datos.html. Describe en un párrafo normal y corriente en qué empleas tu tiempo libre y a continuación, debajo de cada encabezado de nivel 3 repite el ejercicio anterior. Utiliza listas no ordenadas para las categorías de tus aficiones (terror y comedia para cine; sólo y
en equipo para deporte; salsa y rock para música, etc) y anida listas ordenadas con 3 ejem plos ordenados de mayor a m enor preferencia.
Listas de definición
El último tipo de texto que veremos es la lista de definición. En las listas de definición se especifican términos a definir y se da una definición por cada uno. Podem os insertar una nueva lista de definición m ediante el m enú contextual del área de edición.
4 .1 .8 - Ejercicio guiado: lista de térm inos de interes
Vamos a reproducir la siguiente lista de términos de interés:
HTML
lenguaje de marcado de hipertexto para crear páginas web.
CSS
lenguaje para definir el estilo de presentación de las etiquetas HTML.
PHP
lenguaje de programación, de los llam ados lenguajes de script, que suele utilizarse para la program ación de páginas web dinámicas
Elige un lugar dónde introducir la lista, haz clic derecho para desplegar el m enú contextual, selecciona la opción Lista y haz clic en Lista de definición.
Luego escribe el primer térm ino a definir y pulsa enter para introducir entonces la definición. Un segundo enter insertará un nuevo término. Otro enter más, previo a introducir un nuevo término concluirá la lista de definiciones.
4 .1 .9 - Ejercicio: un glosario
Crea una nueva página web dentro de MiSitioWeb y llámala glosario.html. Dale un título (usa el encabezado de nivel 1) y crea una lista de definición de algunos términos (al menos 3) 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 página en el navegador.
Page 52 of 158
08/ 11/ 2010

4 .2 . Sección 4 .2 - Estilos HTML
Sección 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 deberíam os usar para definir el estilo de la página web, podría resultar un poco contradictorio el hecho de que existan estilos HTML. No obstante los estilos que estudiaremos a continuación aportan significado al texto
y es por eso que forman parte de HTML. No por decir estilo nos estamos refiriendo obligatoriamente al diseño, en este caso, estilo se refiere al carácter del texto.
La opción Estilo del menú contextual del área de edición contiene todos los estilos que pueden aplicarse en HTML 4.
A continuación se incluye una breve definición 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 encarecidam ente su uso. Resalta un texto subrayándolo. Esto es un texto subrayado.
Tachado
Incluye una línea horizontal que atraviesa el texto por su m itad. Esto es un texto tachado.
Teletipo
Hace que el texto se muestre como si se hubiese introducido en una terminal informática 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.
Destacado
Indica que el texto debe ser destacado. Por defecto, resalta el texto aumentando la anchura del trazo. Esto es un texto destacado.
Page 53 of 158
08/ 11/ 2010

Código
Indica que el texto es código en algún lenguaje de programación. Un ejemplo de código HTML: <p>Esto es un párrafo</p>
Variable
Indica que el texto es una variable de algún lenguaje de programación. 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 añaden las comillas automáticamente a este tipo de textos.
Definición
Indica que el texto es una definición de algún término. Se define cliente como el ordenador que realiza peticiones de servicios.
Elim inado
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 elim inado.
Insertado.
Indica que el texto ha sido añadido recientem ente pero se desea dejar constancia de que no siempre estuvo allí. Este texto ha sido insertado
Te puede parecer que m uchos de ellos hacen lo mismo debes recordar que HTML trata de aportar significado al texto no de decidir cóm o debe ser mostrado. Luego si necesitas resaltar un texto porque es importante, usa los estilos Énfasis o Destacado pero si el texto se trata de una definición, entonces
márcalo como Definición. Es por esto que se desaconseja el uso de la negrita, la cursiva y el subrayado; estos estilos son demasiado gráficos y cuando se necesitan, muchas veces es porque se desea añadir cierto énfasis al texto o destacarlo de alguna form a.
De nuevo, recuerda: con HTML aportam os estructura y significado al texto, no especificam os cóm o se representa.
En las lecciones 6 y 7 aprenderemos a usar estilos CSS que nos permitirán especificar cóm o debe visualizarse un determinado estilo. Entonces las diferencias serán m ás evidentes.
Ten en cuenta además, que puedes aplicar más de un estilo a un mismo texto para conseguir efectos combinados.
Por ejem plo, esto es un texto subrayado y destacado, con algunas palabras enfatizadas.
4 .2 .1 - Ejercicio: estilos HTML
Prueba los estilos sobre la página web datos.htm l. Destaca las partes importantes de tu biografía, enfatiza los títulos en inglés o añade una sección con el encabezado Mis frases favoritas donde incluir algunas citas (recuerda usar el estilo Cita para estos casos). Utiliza al m enos 3 estilos HTML distintos.
4 .3 . Sección 4 .3 - CSS básico: colores en el texto
Sección 4 .3 - CSS básico: colores en el texto
El lenguaje CSS
Recordando lo aprendido durante la Sección 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 presentación de docum entos HTML. En otras palabras, el lenguaje CSS se usa para otorgar propiedades gráficas o de
representación a los elem entos de HTML. CSS se denomina en cascada porque perm ite definir propiedades en los elementos padre que automáticam ente poseerán los hijos, a menos que se indique lo contrario. De esta manera, el estilo fluye de elem entos padre a elementos hijos como si fuera una cascada.
CSS es un lenguaje bastante com plejo pero Dream weaver posee herramientas para sim plificar esta tarea y no tener que lidiar con código.
Page 54 of 158
08/ 11/ 2010

Color en las páginas w eb
En las pantallas de los ordenadores, como en cualquier dispositivo que em ita luz para recrear imágenes, 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).
En HTML el color se representa como un número hexadecim al (llamado tam bién triplete hexadecimal) que codifica las intensidades de los colores R, G y B. Se pueden m ezclar hasta 2 5 6 intensidades distintas de cada color lo que resulta en 16777216 mezclas distintas.
Los núm eros hexadecimales no difieren mucho de los decimales a los que estam os acostumbrados salvo que en vez de contar con diez sím bolos distintos (las grafías de los números del 0 al 9), tienen 16. Los primeros 10 símbolos se corresponden con las grafías de los números del 0 al 9 y los siguientes 6 con
las letras de la A a la F. Luego, explícitamente, los símbolos posibles que forman un núm ero 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 núm eros 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 núm ero de dos dígitos hexadecimales desde la intensidad 0 0 (0 en decimal) que representa la ausencia total de un color, a la FF (255 en decimal) que representa la máxima intensidad de un color. Y como cada color está formado por la m ezcla de los 3 colores
preim arios, cada mezcla se expresa com o la lista de los valores hexadecim ales de las intensidades de los colores primarios en el orden RGB. Resum iendo: primero la cantidad de rojo, luego la de verde y por último la de azul.
Page 55 of 158
08/ 11/ 2010

En CSS, a este núm ero se le añade como prefijo el símbolo # (almohadilla). Luego un color como este se escribiría # D9 8 3 5 7 (rojo= D9, verde= 83, azul= 57).
Existe una form a alternativa de describir un color sólo en caso de que las tres intensidades repitan sus dígitos. Por ejemplo, considera el color # 3 3 0 0 CC. Este color puede abreviarse escribiendo cada dígito repetido una sola vez, com o # 3 0 C. Todos los colores del selector básico de color de
Dream weaver pueden escribirse de esta forma y se corresponden con una paleta especial de color llamada paleta de colores w eb seguros.
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 fragm ento de texto tenemos que seleccionar el texto que deseamos cambiar de color y luego hacer clic donde pone CSS en el panel Propiedades, . Esto sustituirá el panel de propiedades HTML por otro de propiedades CSS. Recuerda volver al panel HTML al term inar de aplicar
un color.
NOTA: Trata de ignorar los iconos de negrita y cursiva, así como los de alineamiento de párrafo de este panel porque los estudiaremos m ás adelante en profundidad.
Aquí, debemos modificar la propiedad color, . Haciendo clic en el cuadro gris desplegam os el selector básico de color dónde podem os elegir cualquier color de la pelta segura.
Page 56 of 158
08/ 11/ 2010

Selector básico de color
Si queremos optar por más 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 diálogo de Nueva regla CSS. Esto es así porque realm ente 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 escribirem os en el campo Elija o introduzca un nombre
para el selector y a continuación, aceptar el diálogo.
4 .3 .1 - Ejercicio: aplicar color
Colorea el encabezado de datos.htm l con el color que prefieras. Excepto el nombre de la regla, asegúrate de que el resto de opciones coinciden con las de la figura anterior antes de aceptar el estilo.
Page 57 of 158
08/ 11/ 2010

Ahora el texto seleccionado aparecerá en el color que acabamos de definir. Si quisieras aplicar este estilo a otra fracción de texto tendrías que seleccionar el nuevo texto y cam biar su propiedad Clase del panel Propiedades HTML (recuerda activar de nuevo el panel propiedades HTML haciendo clic donde
pone HTML, ).
En la lista desplegable podrás ver todos los estilos que hayas definido. Escoge el que quieras y tu selección pasará a tener ese estilo.
Si deseas quitar un estilo, escoge la opción Ninguna del cuadro desplegable.
Si quieres aplicar un nuevo color, tendrás que definir un nuevo estilo.
No abuses del color en las páginas web. A la mayoría 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 comunicación o com o un elemento de diseño en títulos.
4 .3 .2 - Ejercicio: m ás color
Trata de añadir algo más de color a la página datos.html. Cuando hayas definido un par de estilos, intercam bialos, elim inalos y vuélvelos a aplicar.
Puedes ver mi versión final con este enlace.
4 .3 .3 - Ejercicio: sincroniza el servidor rem oto y enviar la página datos.htm l
Antes de terminar la Lección, repasa los conceptos aprendidos durante la Lección 2 y sincroniza el servidor remoto. Harem os esto al final de cada lección pero cada cual es libre de sincronizar su servidor remoto cuando le plazca.
Una vez hecho, envía la página datos.htm l tal com o te ha quedado. Debes usar la herramienta de Entrega de ejercicios para enviar el archivo creado (datos.htm l). Este ejercicio está identificado com o Lección 4 .
Ve a la página de I nicio y pulsa en el icono Entrega de ejercicios:
Llegarás a la lista de ejercicios para entregar:
Page 58 of 158
08/ 11/ 2010

Las ilustraciones se corresponden con los ejercicios de otro curso CFI, pero el funcionamiento es el mism o.
Pulsa sobre el nombre del ejercicio (Lección 4 ) y llegarás a la pantalla que te perm ite enviar tu solución:
Para enviar tu archivo solución debes pulsar el botón Cargar archivo. Puedes cargar varios archivos, aunque normalm ente te pediremos sólo uno (la página web en este caso).
Con el botón Exam inar localizas y seleccionas el archivo a cargar. Pulsando el botón Cargar se envía el archivo. Lo que tarde dependerá de lo grande que sea el archivo.
Nota: Los nom bres de archivos no pueden tener ni vocales acentuadas, ni eñes ni otros caracteres especiales.
Una vez enviado el archivo lo verás en la lista de archivos cargados:
Page 59 of 158
08/ 11/ 2010

Si tuvieras que enviar más archivos, bastaría con que usaras más veces el botón Cargar archivo .
Una vez cargados todos los archivos debes usar el botón Enviar trabajo para que se realice el envío. Ten en cuenta que sólo se permite un envío, así que asegúrate de que has cargado lo que corresponda.
Una vez que el profesor haya calificado tu ejercicio podrás ver la calificación en la herramienta Mis calificaciones (página de I nicio). Aparecerá un chivato en la asignatura en tu lista de asignaturas del CV.
Recuerda que puedes ver los comentarios de corrección del ejercicio utilizando el vínculo "Calificado" que aparecerá, una vez que se haya calificado, debajo del nombre del ejercicio dentro de Entrega de ejercicios:
Si pulsas en el vínculo "Calificado", verás los com entarios de corrección:
Page 60 of 158
08/ 11/ 2010

Es muy importante que veas los comentarios de corrección y te asegures de aprender a hacer bien aquello en lo que hayas fallado. Si la puntuación es inferior a 5 deberás 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, deberás hacérselo llegar como adjunto de un mensaje de correo (herramienta Com unicación con tutor).
Por cierto, el tutor puede tardar un poco en corregirte el ejercicio. Dependerá de la cantidad de ejercicios que hayáis enviado los estudiantes del curso. En condiciones normales no tardará m ás de una semana, pero en algunas épocas de muchas entregas puede que tarde un poco más.
5 . Lección 5 - Hipervínculos, im ágenes y tablas
Lección 5 - Hipervínculos, im ágenes y tablas
Planteam iento
Requisitos previos
 Comprensión del modelo cliente-servidor (Lección 2)
 Familiaridad de los elementos de texto com o párrafos y encabezados (Lección 3)
 Conocim ientos básicos del uso de im ágenes y tablas en procesadores de texto
 Practicar la creación de índices en las páginas web
 Reforzar el concepto de dirección web y enseñar a enlazar contenido mediante hipervínculos
 Enseñar al alumno cóm o insertar imágenes en la página web y a utilizar los mapas de imágenes
 Familiarizar al alumno con las tablas y con las operaciones más comunes sobre las m ismas
Secciones
1. Enlaces de hipertexto: hipervínculos
2. Imágenes y mapas
3. Tablas
Duración estim ada
Dada la novedad de los conceptos presentados y la longitud moderada de cada lección, este tema debería abarcarse en 3 sesiones de 2 horas y media.
5 .1 . Sección 5 .1 - Enlaces de hipertexto: hipervínculos
Sección 5 .1 - Enlaces de hipertexto: hipervínculos
Page 61 of 158
08/ 11/ 2010

La URL
En la Sección 2.1, al explicar el modelos cliente-servidor hablamos también de cómo localizar los ordenadores de una red a través de las direcciones IP y como, para evitar precisamente el uso de direcciones tan difíciles de recordar, utilizamos las direcciones web en su lugar.
Además, en la Sección 1.1 dijim os que las páginas web eran capaces de enlazar unas con otras e incluso con otros recursos tales como videos o música y esto nos lleva directam ente a preguntarnos cómo localizamos estos recursos en Internet. Para eso debemos explicar el concepto de URI.
URL significa Localizador Uniform e de Recursos (Uniform Resource Locator). Son cadenas de caracteres que permiten identificar de manera inequívoca cualquier recurso presente en una red. A m enudo, se refieren a ellos de manera femenina como la URL y las URLs y vulgarmente se las llam a direcciones
web.
Una URL está formada por varias partes que siguen el esquema que detallamos a continuación:
protocolo://usuario:contraseña@nombre_del_servidor:puerto/ruta?consulta#seccion
protocolo
Indica qué protocolo de comunicaciones (consulta tu glosario o repasa la Sección 2.1 si no recuerdas de qué estam os hablando) se usará a la hora de realizar la petición al servidor. HTTP suele ser el más frecuente dado que es el que se usa para intercambiar páginas web pero a lo largo del curso hem os
visto otro, FTP, para el intercam bio de archivos.
usuario
Aunque normalm ente no se use, permite identificarnos, junto con la contraseña, ante el servidor. La mayoría de los servidores de Internet son públicos lo que fuerza al usuario a ser anónim o, pero el campo usuario podría usarse si quisiéramos acceder a un recurso privado de un servidor público.
contraseña
Junto con usuario, permite identificarnos ante el servidor.
nombre_del_servidor
Indica el nom bre de la máquina, que será traducido, en última instancia, a la dirección IP del servidor.
puerto
A priori, un servidor posee varios canales de comunicación por donde intercam biar inform ación. A tales canales se los denomina puertos. Por consenso, el puerto para las com unicaciones HTTP es el 8 0 y para las com unicaciones FTP es el 2 1 .
ruta
Se trata de la ruta, dentro del ordenador servidor, dónde encontramos el recurso. Normalmente, los servidores, como cualquiera de los ordenadores que acostumbramos a utilizar, ordenan la información en archivos dentro de carpetas. La ruta se com pone por cada una de las carpetas hasta el archivo
separadas por barras y, en última instancia, el nombre del archivo. Por ejem plo: Mis Documentos/ MiSitioWeb/ curriculum.html
consulta
Algunos recursos tienen la capacidad de "responder" al usuario. Para ello deben recibir una consulta y tras el símbolo de cierre de interrogación puede indicarse esta consulta.
sección
Indica un lugar concreto dentro del recurso. Quizá no tenga mucho sentido en vídeo o audio, pero en páginas web permite indicar un lugar concreto dentro de la misma.
Muchos de estos campos son opcionales. En la práctica, basta con que aparezca el protocolo, el nombre del servidor y el nombre del recurso. Incluso este últim o puede ser opcional si se trata de index.html que, como ya sabem os, no hace falta indicar ya que es la página web por defecto. Es más, a veces
basta con que aparezca sólo la ruta del recurso o la sección (y se da por entendido que el resto de la URL es igual que la página 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+ dirección+ ip
5 .1 .2 - Ejercicio guiado: nom bre de usuario y contraseña
Localiza tu nombre de usuario en Zobyhost y tu contraseña y escribe en un navegador:
ftp: / / nom bre_de_usuario: contraseña@ftp.zobyhost.com
Deberías ver un listado del contenido de tu servidor web. Si añades la carpeta htdocs a la ruta, deberías poder ver sus contenidos.
ftp: / / nom bre_de_usuario: contraseña@ftp.zobyhost.com/ htdocs
Por último, prueba a añadir el nombre de un fichero, para visualizarlo. Por ejemplo:
ftp: / / nom bre_de_usuario: contraseña@ftp.zobyhost.com/ htdocs/ index.html
Hipervínculos
El hipervínculo es el elem ento de HTML que nos permite enlazar con otros recursos de Internet. Se presenta en form a de fracciones de texto destacado (a menudo, subrayado) con los que el usuario puede interactuar (normalm ente, haciendo clic sobre él). Poseen dos propiedades im portantes: el texto y el
vínculo.
El vínculo es el recurso al que enlaza el hipervínculo 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 hipervínculos en función del tipo de vínculo del enlace.
 Enlaces a lugares de una misma página.
 Enlaces a otras páginas o recursos.
 Enlaces a correos electrónicos.
5 .1 .3 - Ejercicio guiado: preparar la página curriculum .htm l
Vamos a modificar la página curriculum .htm l. Asegúrate que en el explorador de archivos se encuentra seleccionado MiSitioWeb y que nos encontram os en la vista local. Haz doble clic sobre el archivo curriculum .htm l y borra su contenido actual. Asegúrate de que la vista de edición es la de sólo diseño para
que no te moleste el código HTML.
Crea los encabezados necesarios siguiendo el siguiente esquema pero no uses una lista. Usa párrafos que convertirás en títulos de nivel 1, 2, 3, ... tal y como hiciste en la Lección 2.Tam poco uses sangrías para tratar de centrar el texto. Veremos cómo centrar los títulos m ás adelante. Más sangrado del texto
Page 62 of 158
08/ 11/ 2010

indica un título de mayor nivel.
 Currículum Vitae de [ aquí tu nombre]
 Índice
 I nformación de contacto
 Educación
 Competencias
 Idiomas
 Experiencia de trabajo (X años)
 [ Un cam po de trabajo: por ejemplo Educación]
 [ Otro campo de trabajo: por ejemplo Desarrollo]
 [ Otro: por ejemplo Gestió de proyectos]
 ...
 Habilidades especificas
 [ Una familia de habilidades: por ejem plo Paquetes de ofim ática]
 [ Otra: por ejem plo Programas de edición de video]
 [ Otra más: por ejemplo Herram ientas online]
 ...
 Aficiones
Ahora sí, debajo de índice, añade una lista ordenada con los títulos de los encabezados de nivel 2. La lista tendrá esta forma:
1. Índice
2. I nformación de contacto
3. Educación
4. Competencias
5. Idiomas
6. Experiencia de trabajo (X años)
7. Habilidades especificas
8. Aficiones
Copia y pega el siguiente texto de prueba en cursiva como contenido de todas las secciones que acabam os de crear. Nuestra intención es la de rellenar con contenidos temporales la página 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, im perdiet ut, im perdiet 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 dictum st. 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. I nteger 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 m alesuada fames ac turpis egestas. Vivamus in ipsum in eros tincidunt pretium. Nunc magna m agna, consectetur sit amet, ullamcorper et, convallis id, ligula. Etiam laoreet enim im perdiet 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 página que acabas de crear.
Hipervínculos que enlazan a la m ism a página
Para poder referirnos a lugares dentro de una m isma página, 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 edición, .
Para introducir un primer punto de anclaje, haz clic en el lugar de la página web donde deseas insertar el anclaje y haz clic en el botón Anclaje con nombre. Aparecerá un diálogo pidiéndonos el nombre del punto de anclaje.
Los nombres de anclaje deben cum plir algunas reglas:
 No puede haber dos nombres de anclaje iguales en la misma página web.
 No pueden contener espacios.
 No deben contener ni caracteres especiales, ni acentuados, ni tampoco la letra ñ.
Los puntos de anclaje no tienen representación en el navegador aunque Dreamweaver los señalará en la vista de edición m ediante el símbolo de un ancla amarilla, .
5 .1 .4 - Ejercicio guiado: un punto de anclaje en curriculum .htm l
Vamos a añadir un punto de anclaje justo antes del encabezado Inform ación de contacto. Sitúa el cursor justo al com ienzo del encabezado y haz clic en Anclaje con nombre en el panel insertar.
En el cuadro de diálogo introduce el nombre "informacion_contacto" y acepta.
Page 63 of 158
08/ 11/ 2010

El resultado, en la vista de diseño de Dreamweaver, debería parecerse a la figura:
Previsualiza tu página en un navegador para com probar com o los puntos de anclaje no aparecen.
5 .1 .5 - Ejercicio: puntos de anclaje en curriculum .htm l
Repite el procedimiento para todos los encabezados y recuerda las reglas sobre los nombres de los puntos de anclaje de las que hablábam os un poco antes.
Como consejo, es útil que el nom bre del anclaje coincida con el encabezado de la sección. Puedes omitir artículos y otras partículas, quitar la inform ación entre paréntesis, sustituir los espacios pueden por guiones bajos _ y las vocales acentuadas por sus análogas no acentuadas. Las eñes pueden
reem plazarse por las letras "ni" por ejemplo.
Situados los puntos de anclaje, sólo falta añadir los hipervínculos. Para ello, seleccionam os el texto que deseam os convertir en hipervínculo y usam os sobre él la herramienta hipervínculo, que puede encontrarse también en el panel insertar.
Aparecerá el diálogo de creación de hipervínculos donde el campo Texto debe coincidir con el texto seleccionado. En el cuadro desplegable Vínculo encontrarás todos los puntos de anclaje de la página que pueden actuar como destino. Cuando hayas seleccionado el correcto acepta el diálogo para terminar
de introducir el enlace.
El texto seleccionado aparecerá ahora subrayado y en azul lo cual indica que se trata de un hipervínculo. Puedes previsualizar la página para probar el enlace en acción.
Page 64 of 158
08/ 11/ 2010

5 .1 .6 - Ejercicio guiado: hipervínculo a I nform ación personal
Ahora que tenemos un punto de anclaje por sección, vamos a hacer que el índice nos lleve directamente a cada una de ellas. Com enzaremos por "Información de contacto" así que selecciona el segundo elemento de la lista que forma el índice.
Luego haz clic en la herramienta Hipervínculo. Despliega el cuadro desplegable vínculo y selecciona la entrada que pone # informacion_personal.
Acepta el diálogo, previsualiza la página y prueba tu nuevo enlace.
NOTA: Es posible que el campo Texto aparezca vacío (esto es, no aparece el texto que tratas de seleccionar). Este es un pequeño defecto que tiene Dreamweaver. Para corregirlo, procura que tu selección comienza justo antes del carácter inicial del texto que deseas seleccionar hasta justo después
del últim o carácter del texto y asegúrate de que no cambias de línea durante la selección.
Si aun así no lo consigues, no te preocupes, rellena el campo texto tu mismo haciéndolo coincidir con el que querías seleccionar. Esto hará que se inserte un nuevo texto con el enlace deseado. Luego borra el texto que no es hipervínculo y listo.
5 .1 .7 - Ejercicio guiado: otra form a de enlazar
Otra form a de enlazar un texto para convertirlo en un hipervínculo es mediante la herramienta Señalar archivo del panel Propiedades HTML.
Selecciona ahora el tercer elemento del índice y fíjate en la propiedad Vínculo. 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 edición luego asegúrate
de que el punto de anclaje que se refiere a la sección Em pleo deseado / fam ilia profesional está al alcance de tu vista. Ahora haz clic sobre el objetivo y m antén pulsado m ientras arrastras hasta situarte encim a del punto de anclaje tal y como se muestra en la figura.
Page 65 of 158
08/ 11/ 2010

Cuando la flecha esté sobre el punto de anclaje, su nombre aparecerá en el cuadro de Vínculo precedido por el sím bolo almohadilla.
5 .1 .8 - Ejercicio: com pleta el índice
Repite esta operación con cada uno de los elementos del índice.
Además, añade un texto como "Volver" al final de cada sección que nos sitúe sobre el índice de nuevo.
Descargate nuestra página de currículum para ver un ejemplo term inado.
Hipervínculos que enlazan a otras páginas o recursos
Este es el caso más común en cuanto a hipervínculos se refiere. Lo que explicaremos a continuación para enlazar con una página web sirve, de la misma forma, para enlazar un archivo de video o audio, un docum ento de texto, una imagen o cualquier otro tipo de recurso.
5 .1 .9 - Ejercicio guiado: regresando al índice
Desde el explorador de archivos, abre la páginadatos.htm l.
Vamos a incluir alguna forma de regresar al índice de nuestro sitio web, a la página llamada index.htm l. Para ello inserta un párrafo justo antes del encabezado principal (el que pone Sobre m í) y haz clic en la herramienta Hipervínculo, . Aparecerá el diálogo de inserción
de hipervínculos.
En el campo Texto introduce algo como Regresar al índice y a continuación haz clic en el icono de la carpeta, contiguo al cam po Vínculo. Esto desplegará un diálogo de selección de archivos.
Page 66 of 158
08/ 11/ 2010

Haz clic en el botón Raíz del sitio para situarte directamente en las carpeta donde estás creando tu página web. Aquí selecciona el archivo index.html y acepta. Esto rellenará convenientemente el campo Vínculo sin que tengamos que escribir nada. Por último, acepta el diálogo y previsualiza la página para ver
el enlace en acción.
De nuevo, otra forma de crear un enlace a otra página web es mediante la herramienta de selección de archivo.
5 .1 .1 0 - Ejercicio guiado: otra form a de crear un enlace a un archivo
Abre el docum ento curriculum.html y de nuevo sobre el prim er título, incluye alguna forma de regresar al índice.
Luego selecciona este texto y haz clic en la herramienta Selección de archivo. Ahora mantén pulsado y arrastra hasta señalar el archivo index.html en el explorador de archivos tal y como explicamos anteriormente.
Hasta ahora hem os visto cómo enlazar con páginas de nuestro sitio web. Ahora veremos cómo enlazar con páginas de Internet.
Page 67 of 158
08/ 11/ 2010

5 .1 .1 1 - Ejercicio guiado: inform ación sobre películas
Abre la página web datos.html y busca en la Wikipedia o en la IMDB el título de alguna de tus películas preferidas que hayas indicado entre tus gustos y aficiones. Copia la URL de la página web, que debería aparecer en la parte superior de tu navegador.
Ahora selecciona el título de esa película en el área de edición y pega la dirección en el cam po Vínculo del panel Propiedades HTML. Pulsa la tecla enter y habrás conseguido enlazar el título con una página externa.
5 .1 .1 2 - Ejercicio: proporciona inform ación sobre el resto de tus gustos
Repite el ejercicio anterior para cada uno de tus gustos.
Hipervínculos que enlazan con direcciones de correo electrónico
El último tipo de vínculo enlaza con direcciones de correo electrónico. Su inserción es realm ente sencilla: tan sólo selecciona el texto que deseas que forme el enlace, es decir, el texto de ancla y haz clic en la herramienta Vínculo de correo electrónico, . De nuevo aparecerá
un diálogo con el campo Texto relleno con la selección actual y otro cam po más, Correo electrónico, donde introducir la dirección.
5 .1 .1 3 - Ejercicio: tu correo electrónico
Abre el archivo datos.htm l y en la sección Datos personales incluye tu correo electrónico. Puedes usar una dirección falsa si no deseas publicar el tuyo.
Consideraciones finales sobre hipervínculos
Ahora que conoces todos los tipos de hipervínculos, te invitamos a que coloques el cursor sobre cada uno de los enlaces que has creado y observes el cam po Vínculo del panel de propiedades HTML.
Observa como sólo en el caso de enlaces a páginas de Internet utilizam os el esquem a de la URL com pleta. En los vínculos a puntos de anclaje, sólo especificam os la sección; en los correos electrónicos se especifica el protocolo m ailto junto con los campos nombre de usuario y dirección del servidor; y en los
enlaces a páginas web de nuestro sitio web, sólo la ruta.
Como decíamos al comienzo de la lección, da igual tratar de enlazar un archivo de página web, que uno de texto, o una imagen. El procedim iento es exactam ente el m ism o y veremos un ejemplo con imágenes en la próxima sección.
Antes de terminar, no obstante, nos gustaría hacer algunas observaciones:
La propiedad destino
La primera tiene que ver con la propiedad destino de los hipervínculos. Esta propiedad puede fijarse tanto desde el panel de propiedades HTM como desde el cuadro de diálogo de hipervínculo. Esta propiedad permite indicar dónde se abrirá el enlace. Sus valores son:
_blank
Se refiere a una nueva ventana del navegador (o en caso de un navegador por pestañas, una nueva pestaña).
_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.
Page 68 of 158
08/ 11/ 2010

_self
Se refiere a la ventana actual.
_top
En páginas con marcos (los estudiaremos brevemente en lecciones posteriores), se refiere a reem plazar la página de marcos por el destino del enlace.
De esta lista, las m ás utilizadas son _ blank y _ self.
Hemos ignorado esta propiedad porque no se encuentra en el estándar HTML 4.01 estricto y desaparecerá en HTML 5. La w3c.org opina que es solamente el usuario el que debería decidir dónde abrir el contenido.
Sin em bargo, puestos a usarlo conviene tener presente la siguiente m áxima:
Si estam os enlazando a un lugar de nuestro sitio w eb, el destino será _ self. Si por el contrario estam os enlazando fuera de nuestro sitio w eb, el destino será _ blank.
El texto del enlace
La segunda observación tiene que ver con el texto del enlace o texto ancla y es m uy im portante.
El texto ancla es el texto usado para crear el enlace y debe estar relacionado sem ánticam ente con el contenido al que enlaza. Esto quiere decir que los enlaces como "descargue el contenido pulsando aquí" sirven de más bien poco. En vez de ello se podría 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 página y a qué enlaza y, de esta forma, clasificarla mejor.
La cohesión de I nternet
Los enlaces sirven para mantener cohesionado Internet. Es decir, relacionado según algún criterio. Los criterios de cohesión suelen ser dos: navegación y am pliación de inform ación.
Por un lado la navegación permite saltar de un sitio a otro de nuestro sitio web. Mantener todas las páginas de nuestro sitio web accesibles es m uy im portante, una página a la que no se puede llegar se denomina huérfana y es totalmente inútil para el usuario. Los diseños actuales muestran siempre un
menú con las opciones de navegación pero antiguam ente era común tener una página índice que permitiese llegar a las demás y un enlace desde cada una para volver al índice.
5 .1 .1 4 - Ejercicio: enlaza tu sitio w eb
Añade un enlace desde el índice hasta cada página y otro en cada una de ellas para volver al índice. Recuerda hacer esto siem pre que añadas una página nueva a tu sitio web, es decir, añádela al índice y haz posible regresar al índice desde ella. Mantener el sitio web bien cohesionado es vital para
hacer de toda la inform ación un recurso útil y accesible.
Por otro lado, la am pliación de inform ación tiene como cometido ofrecer más información sobre aquello a lo que se refiera el texto ancla y es el enlace básico en Internet. Al contrario que los enlaces de navegación, la página destino no tiene por qué volver a enlazar la página de origen. De hecho, m uchas
veces las páginas destino ni siquiera advierten que las han enlazado.
5 .2 . Sección 5 .2 - I m ágenes y m apas
Sección 5 .2 - I m ágenes y m apas
I nsertar im ágenes desde un archivo
Incluir imágenes en nuestras páginas web es una tarea m uy sencilla. En principio, la imagen debería encontrarse en algún 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 más que
caracteres estándar, es decir, ni símbolos de puntuación, ni caracteres acentuados, ni eñes).
5 .2 .1 - Ejercicio guiado: im ágenes en tu sitio w eb
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 nom bre imagenes y pulsa enter para aceptar el nombre. Abre un explorador de Windows situado en la
nueva carpeta haciendo clic derecho sobre la recién creada carpeta y seleccionando Explorar... .
Ahora escanea una foto tuya o descarga el archivo de retratos que te proporcionam os y descomprímelo dentro de la carpeta imagenes. Haz clic en el botón 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 lección se te pedirá que sincronices el servidor rem oto pero puedes hacerlo ahora si quieres.
Para incluir una imagen en tu página web introduce un párrafo en el lugar del documento donde desees que se sitúe la imagen. Ahora haz clic en la herramienta Imágenes: Im agen, . Si haces clic sobre la flecha situada justo a la derecha del icono aparecerá el menú de
inserción de imágenes. Para este curso sólo nos interesará la prim era opción.
Page 69 of 158
08/ 11/ 2010

La herramienta da paso a un cuadro de diálogo de selección de archivo donde debemos seleccionar el archivo de imagen a insertar. Una vez seleccionado, podemos aceptar el diálogo para que se m uestre el diálogo de Atributos de accesibilidad de la imagen.
En la Sección 1.3 hablamos de la necesidad de hacer una página web accesible, es decir, inteligible para el mayor número de personas posible. Es posible que las im ágenes no sean un elem ento inteligible para personas ciegas o con discapacidades visuales por lo que el diálogo de accesibilidad nos pregunta
por un texto alternativo y una descripción larga.
El cam po Texto alternativo debe contener una descripción corta que resum a el contenido de la im agen. El campo Descripción larga permite enlazar a una página web que contendrá una descripción detallada de la im agen. En principio, nos conformaremos con rellenar el campo Texto alternativo.
Al aceptar el diálogo la im agen se habrá añadido al párrafo. Si quieres suprimir una im agen seleccionala haciendo clic sobre ella y a continuación presiona la tecla suprim ir.
5 .2 .2 - Ejercicio: tu retrato
Incorpora un retrato a la información personal. En el Texto alternativo puedes poner algo com o "Autorretrato".
Una imagen actúa como un elemento más del párrafo (para ser preciso, com o si se tratara de una palabra) por lo que podem os introducir otra imagen justo a continuación de la que acabam os de insertar. Para eso deberás colocar el cursor tras la actual imagen y repetir el procedimiento descrito
anteriorm ente. Pruébalo: inserta varias veces tu retrato, previsualiza la página y deforma la ventana del navegador. Verás como las imágenes se ajustan a la ventana como si se tratara de las palabras de un texto. Cuando hayas term inado de experimentar suprim e las im ágenes y deja tan sólo una.
Page 70 of 158
08/ 11/ 2010

Echem os un vistazo al panel Propiedades HTML que aparece al seleccionar una imagen. Para seleccionar una imagen basta hacer clic sobre ella.
Presta especial atención a los cam pos ancho y alto que permiten alterar el tamaño de la im agen (volveremos a ello en el siguiente apartado), al campo vínculo que nos perm ite hacer que una im agen actúe como un hipervínculo y al cam po alt que contiene el texto alternativo de la im agen. Localiza también
los iconos a la derecha del cam po borde porque hablaremos de ellos en apartados posteriores.
I m ágenes desde I nternet
Para insertar una imagen que no se encuentra en nuestro sitio web, por ejem plo, el logotipo del escudo y el cisne de la Universidad Complutense de Madrid que se encuentra en la dirección http: / / www.ucm.es/ info/ ucm p/ cont/ descargas/ documento14970.gif basta con seguir los m ismos 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 pégala).
De nuevo debemos procurar un valor para el campo Texto alternativo y aceptar el diálogo para que la imagen quede añadida en la página web tal y como ocurre a continuación.
Page 71 of 158
08/ 11/ 2010

Tam año de las im ágenes
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 imágenes:
 Si no se respeta la relación de aspecto (esto es, el cociente del ancho entre el alto) la imagen se deformará.
 Si la imagen se amplia m ás allá de sus dimensiones originales, entonces perderá calidad.
Para alterar el tamaño de una imagen resulta m ás cómodo 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 im agen, en form a de cuadrados. Si tiramos de ellos (o lo
que es lo m ism o, hacemos clic sobre uno y manteniendo pulsado, desplazam os el ratón) podrem os deform ar la imagen a voluntad. Si además, m ientras tiramos del punto de la esquina, m antenemos pulsada la tecla shift, forzaremos a mantener la relación de aspecto y podrem os variar el tam año de la
imagen sin deformarla.
Page 72 of 158
08/ 11/ 2010

Observa cómo mientras arrastras un punto de anclaje, los valores de ancho y alto varían en el panel de propiedades.
Ajustes en las im ágenes
Dream weaver permite realizar algunos ajustes o correcciones sobre la imagen. Todos ellos m odifican el archivo original por lo que si no deshacemos nuestras modificaciones, estas pasarán a formar parte de la imagen de forma irreversible. Por esta misma razón, Dreamweaver sólo nos perm ite modificar
imágenes que estén en nuestro equipo. Las im ágenes añadidas desde Internet no pueden m odificarse.
Las tres herramientas que estudiaremos son el recorte, el ajuste de brillo / contraste y el filtro perfilar.
Recorte
La herram ienta de recorte permite seleccionar un área de la imagen y elim inar los sobrantes.
5 .2 .3 - Ejericio guiadon ( opcional) : recortando la m irada
Selecciona la im agen y haz clic en la herramienta recorte, .
Lee el diálogo de advertencia con atención para com prender lo que explica y a continuación acepta la advertencia. Precisamente, se refiere al hecho de que los cambios se aplicarán a la imagen y que podemos deshacerlos con el com ando deshacer del m enú edición o m ediante la com binación ctrl + Z.
Aceptado el diálogo, aparecerá un rectángulo rematado por ocho puntos de ajuste (uno por esquina y en cada punto medio de los lados del rectángulo). El área externa al rectángulo aparecerá sombreada en gris para indicar la porción de la imagen que desaparecerá tras el recorte. Arrastrando de los tiradores
trata de seleccionar el área que rodea los ojos del retrato.
Page 73 of 158
08/ 11/ 2010

Si quieres cancelar la operación de recorte basta con que pulses la tecla esc o hagas clic fuera de la imagen. Si por el contrario estás conform es con nuestro recorte y quieres aceptarlo bastará pulsar la tecla enter.
Como nos advertía el mensaje. puedes deshacer el cam bio realizado pulsando la combinación ctrl + Z o haciendo clic en el com ando deshacer del m enú edición. 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 im agen y hacer clic en la herramienta brillo y contraste, . De nuevo aparece el mismo diálogo de advertencia que habremos de aceptar para continuar.
Aceptado el diálogo, aparecerá otro que nos permitirá ajustar los valores de brillo y contraste. Observa la casilla vista previa situada abajo a la derecha.
Si activamos esta casilla y desplazamos los controles deslizantes podrem os ver el resultado de nuestras m odificaciones antes de que tengan lugar sobre la imagen. Cuando estemos de acuerdo con los valores seleccionados, aceptaremos el diálogo. En caso contrario no hay m ás que cerrar la herramienta
pulsando sobre cancelar.
Perfilar
La últim a herram ienta, perfilar, se utiliza de manera m uy sim ilar a la anterior. Esta herramienta hace resaltar los bordes de una imagen lo cual es especialmente útil para im ágenes algo borrosas. De nuevo tendremos que seleccionar la imagen que queremos perfilar para a continuación hacer clic sobre la
herramienta perfilar, . Una vez más, aparecerá el diálogo de advertencia y posteriormente la herramienta. Esta vez contaremos únicamente con un control deslizante y de nuevo la opción de Vista previa.
Page 74 of 158
08/ 11/ 2010

Desplazando el control deslizante ajustamos el grado de perfilado.
I m ágenes com o hipervínculos
Si observas las propiedades de una im agen, descubrirás que el cam po Vínculo se encuentra presente lo que anima a pensar que podemos hacer que una im agen se com porte com o el "texto" de un hipervínculo. Y así es. El procedimiento para establecer el vínculo es exactamente el mism o que para los
hipervínculos de texto de la Sección anterior.
5 .2 .4 - Ejercicio guiado: galería de im ágenes
Vamos a crear una galería de imágenes. Para ello modificarás el archivo fotos.html así que ábrelo y borra su contenido (si es que había alguno) y utiliza los encabezados para lograr la siguiente estructura de página.
 Galería de imágenes
 Índice de galerías
 Lugares que he visitado
 Fotografías
 Ilustraciones favoritas
Utiliza tus conocimientos sobre hipervínculos para crear un índice de la galería y enlazar esta página con la página principal, index.html. Recuerda también incluir enlaces para regresar al índice de la galería.
Ahora, con el explorador de archivos, crea tres carpetas dentro de imagenes llamadas lugares, fotografias e ilustraciones y reparte algunas de tus imágenes (o descarga un paquete de m uestra) como mejor te parezca. Recuerda actualizar la vista local para reflejar los cambios. También puedes sincronizar el
servidor remoto si lo deseas.
Inserta y ajusta el tamaño de las im ágenes (yo he tratado que todas midan 200 de alto) com o explicamos anteriormente para que las cinco fotografías por galería quepan en pantalla a una resolución normal de 1024x768 o superior. Recuerda que las imágenes son elementos del párrafo por lo que se ajustan
al tamaño de la ventana del navegador tal y como lo harían las palabras de un párrafo.
Page 75 of 158
08/ 11/ 2010

Las imágenes a este tamaño están m uy bien para mostrar toda la galería de un vistazo. Sin embargo probablemente queram os que el usuario las pueda disfrutar a tamaño real. Para ello vamos a enlazar cada una de ellas con el archivo al que corresponden respectivamente.
Utiliza la vista local y la herram ienta Señalar archivos como se explicó en la Sección 5.1 para enlazar todas las imágenes. Merece la pena hacer una pequeña advertencia: cuando seleccionamos una imagen, el panel Propiedades m uestra tres campos que utilizan la herramienta Señalar archivos.
La primera, origen, indica el archivo con la imagen y es obligatorio. Se establece en el m omento que aceptamos el diálogo de elección de la imagen. La segunda, vínculo, es la que debes usar para crear un enlace a partir de una im agen. La últim a, original, se refiere al form ato original del que se
extrajo la im agen (por ejemplo, una imagen en alta resolución o compuesta de múltiples capas). Este último campo es totalmente opcional y tiene que ver con Dreamweaver en partícular y no con HTML.
Page 76 of 158
08/ 11/ 2010

Notarás ahora que todas las imágenes tienen un borde azul que indica que las imágenes son hipervínculos. Quitaremos estos bordes cuando estudiemos CSS en la próxima Lección.
En la Sección 5.1 hicimos incapié en que el texto de un hipervínculo debía estar relacionado con el contenido al que enlaza y por ello, el uso de imágenes supone ciertos problemas de accesibilidad y automatización. Por un lado para las personas con problemas de visión y por otro con los buscadores, que
apenas puede extraer información de una im agen. Es por esto que las páginas deben apoyarse principalmente en el texto para enlazar con otros contenidos.
Pese a todo, es cierto que en algunos contextos, los vínculos en imágenes resultan muy útiles y mejoran la usabilidad de una página web. Veamos algunos de ellos:
 Publicidad. Se puede hacer uso de pequeñas imágenes rectangulares, llam adas banners, para atraer la atención del usuario (a menudo se utilizan imágenes anim adas) invitando a que pulse en ellas y dirigiéndolo a la página propietaria de la publicidad.
 Títulos. A menudo se espera que el título o el logotipo de un sitio web nos traslade a la página principal del sitio web.
 Galerías. En una galería presentamos pequeñas muestras de las imágenes e invitamos al usuario a hacer clic sobre cada una de ellas para enviarlo a una página que contenga la imagen a escala real.
 I conos de apoyo. Haciendo que un recurso sea accesible tanto a través de un hipervínculo de texto como de un hipervínculo de im agen.
Mapas de im agen
Los mapas de imagen son formas de dividir una imagen en áreas diferenciadas. Estas áreas pueden convertirse en hipervínculos y servir así para señalar distintos elementos de una imagen de form a independiente. De hecho, el uso de mapas era m uy común en el diseño de páginas ensambladas como las que
explicamos en la Sección 1.3. Échale un vistazo al siguiente ejemplo:
Page 77 of 158
08/ 11/ 2010

Identifica a cada Beatle haciendo clic en cada uno de ellos.
5 .2 .5 - Ejercicion guiado: página de pruebas y m apas
Crea una nueva página en tu sitio web llamada pruebas.html (acuérdate de enlazarla al índice convenientemente) e inserta la foto de Madrid que encontrarás en el paquete de imágenes, carpeta lugares que te proporcionamos anteriormente.
Una vez hallas insertado la im agen, busca abajo a la izquierda del área Propiedades, el apartado Mapa. Da un nom bre descriptivo al m apa (campo mapa) y respeta las mism as normas que para los nombres de los estilos. Es decir, usa sólo letras y números y no incluyas acentos ni eñes.
En la mayoría de los casos, basta con seleccionar el modo Zona interactiva rectangular aunque en otros podría hacernos falta el modo Zona interactiva circular . Si queremos un mayor control sobre la form a utilizaremos el modo Zona interactiva poligonal .
Elije la Zona interactiva rectangular por el mom ento y a continuación haz clic y mantén pulsado sobre el extrem o superior izquierdo de la prim era torre. Ahora arrastra el cursor hasta la esquina inferior derecha de manera que extiendas un rectángulo azul alrededor de la torre.
Justo en el m omento de soltar aparecerá un mensaje advirtiéndote que deben introducir un Texto alternativo para el área. Lo podrás hacer en el inspector de Propiedades, debajo del área de edición, buscando el campo alt. En este caso puedes especificar algo como "Torre Caja Madrid".
Notarás ahora que el área que acabas de delimitar queda rellena de azul. Como ocurría con los puntos de anclaje, las áreas son invisibles. El relleno azul es una ayuda de Dreamweaver.
Page 78 of 158
08/ 11/ 2010

Para volver al modo de edición de texto, pulsa la tecla escape.
5 .2 .6 - Ejericio: torres poligonales
Descubre por ti m ismo cóm o utilizar la herramienta poligonal y úsala para ajustar en la medida de lo posible las áreas al perfil de las cuatro torres.
Puedes m odificar cualquier área haciendo clic sobre ella. Utiliza las marcas cuadradas situadas en los vértices para cam biar la forma del área. También puedes trasladar el área sin deformarla haciendo clic sobre el centro de una de las áreas. Mientras mantienes pulsado, mueve el ratón para cam biar la
posición del área. Por últim o, también puedes suprim ir un área haciendo clic en ella desde el modo de edición y pulsando la tecla supr.
Recuerda siempre que si te equivocas, puedes deshacer el último paso con la com binación de teclas ctrl + Z.
5 .2 .7 - Ejercicio: áreas com o hipervínculos
Las áreas pueden convertirse en hipervínculos com o lo haríamos con imágenes o textos. Para ello haz clic en cada área y modifica los campos alt y vínculo para establecer el nombre de cada torre e información extra de la Wikipedia. Te proporcionamos los datos de las torres de izquierda a derecha:
Nom bre Entrada en la W ikipedia
Page 79 of 158
08/ 11/ 2010

Cuatro Torres Business Area
5 .3 . Sección 5 .3 - Tablas
Sección 5 .3 - Tablas
Creación de una tabla
NOTA: A lo largo de esta lección verás que nuestras tablas tienen estilos, esto es así porque en las páginas del propio curso usam os CSS, pero influirá sobre el desarrollo de la Sección.
Las tablas son elementos muy interesantes puesto que nos permiten distribuir la inform ación por categorías lo que supone un m ejor y más rápido entendim iento 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 información.
Dream weaver dispone de una herram ienta sencilla y potente para crear tablas que puede encontrarse en el panel insertar, un par de iconos por encim a del botón de insertar imágenes. Sobre el botón puede leerse claramente la palabra Tabla, .
El diálogo posee tres partes diferenciadas:
Torre Caja Madrid http: / / es.wikipedia.org/ wiki/ Torre_Caja_Madrid
Torre de Cristal http: / / es.wikipedia.org/ wiki/ Torre_de_Cristal_% 28Madrid% 29
Torre Sacyr Vallehermoso http: / / es.wikipedia.org/ wiki/ Torre_Sacyr_Valleherm oso
Torre Espacio http: / / es.wikipedia.org/ wiki/ Torre_Espacio
Page 80 of 158
08/ 11/ 2010

En tam año de la tabla debemos especificar el número de filas y colum nas así como el ancho de la tabla. El ancho puede fijarse en unidades absolutas (píxeles) o relativas (porcentaje). El grosor del borde indica el número de píxeles que se dedicarán a dibujar el borde de cada celda. El relleno de
celda indica la separación entre el contenido de la misma y sus bordes mientras que el espacio entre celdas indica la separación entre las celdas en sí.
En encabezado podem os escoger la posición de las celdas de encabezado. Las ilustraciones son lo suficientem ente claras como para dar una idea de lo que representan por sí mismas.
Por último accesibilidad contiene un par de cam pos que deberíamos de completar (aunque no son obligatorios) para que aquellas personas con discapacidades pueden hacerse una idea de lo que representa la tabla. El texto actúa como un pie de tabla salvo que Dreamweaver lo sitúa sobre esta. En
resum en podemos describir la tabla de manera más extensa extrayendo las conclusiones más im portantes de los datos presentados.
Cuando todos los campos tengan los valores correctos, haz clic en Aceptar para insertar una nueva tabla. Podrás ver unas guías verdes sobre ella que aparecerán siempre que estemos editando la tabla.
Para rellenar la tabla tan sólo debem os hacer clic sobre la celda que queramos llenar y escribir el texto. Pasar a la siguiente celda es tan fácil com o 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 Sección 5.2 (apartado Mapas de imagen) e inserta una tabla de la m anera que acabamos de describir. La tabla tendrá 6 filas y dos columnas. Un ancho de 200 píxeles y las cabeceras se situarán en la primera fila.
Cabeceras
Por lo general, las cabeceras muestran el texto centrado y resaltado en negrita. Si querem os que alguna celda extra también sea cabecera debemos hacer clic en la celda y en el panel de propiedades, activar la casilla enc.
Page 81 of 158
08/ 11/ 2010

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 también aparezcan centrados pero el hecho de marcar una celda com o cabecera no es una cuestión de estilo, es una cuestión sem ántica. Marcar la celda com o cabecera
significa que rotula algo (da nombre a una categoría de información). En la próxima Lección, aprenderemos a cambiar el estilo predeterminado de los elementos HTML mediante CSS.
5 .3 .2 - Ejercicio: com pleta la tabla
Completa la tabla con los datos de las cinco películas más taquillera de todos los tiem pos, de la IMDB. Haz que los nombres de las películas sean enlaces a sus respectivas entradas en la Wikipedia o en la IMDB.
Como puedes observar, el tamaño de la tabla no es el más adecuado para albergar el contenido pero esto lo arreglaremos en el próximo apartado.
Guías de la tabla y selección de elem entos de la tabla
Si hacemos clic sobre una celda cualquiera, podremos observar unas guías sobre la tabla. Estas indican el ancho en píxeles de la tabla y sus columnas pero adem ás sirven para realizar operaciones sobre el ancho. Si en algún momento las guías desaparecen, sólo tenemos que hacer clic en una celda cualquiera
para que vuelvan a aparecer.
Para seleccionar una tabla entera debem os hacer clic sobre el botón de la guía y elegir Seleccionar tabla.
Cómo seleccionar la tabal entera
Tam bién podemos seleccionar las filas y columnas de una tabla independientemente. Si situam os el ratón (sin hacer clic) justo encima del borde de la primera celda, se resaltará en rojo toda la columna. Cuando hagamos clic los bordes se destacarán en negro y estaremos seleccionando una columna entera.
Recaudación de las
cinco películas más
taquilleras
Película Recaudación
Avatar (2009) $2,467,962,011
Titanic (1997) $1,835,300,000
The Lord of the
Rings: The
Return of the
King (2003)
$1,129,219,252
Pirates of the
Caribbean: Dead
Man's Chest
(2006)
$1,060,332,628
The Dark Knight
(2008)
$1,001,921,825
Page 82 of 158
08/ 11/ 2010

Selección de una columna
Del m ismo m odo si llevamos el ratón 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.
Selección de una fila
Si pulsamos y mantenemos presionada la tecla ctrl, podem os seleccionar una celda haciendo clic sobre ella. Si seguimos pulsando ctrl, podremos seleccionar más de una. Si en cualquier momento queremos deseleccionar una de ellas, harem os clic sobre esta sin dejar de pulsar ctrl.
Selección de algunas celdas
Cam biar el ancho de la tabla
Con una tabla seleccionada, el panel de propiedades muestra las propiedades HTML de los elementos tabla. El cam po ancho sirve para m odificar la extensión horizontal de la tabla y puede especificarse de manera absoluta o relativa.
Page 83 of 158
08/ 11/ 2010

Si fijamos el ancho a algún valor en píxeles, entonces la tabla ocupará exactamente esto independientemente del tamaño de su contenedor (normalmente, la ventana).
Si por el contrario fijam os el valor como un porcentaje, entonces la tabla sólo 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 píxeles. Observa el resultado en el explorador.
Ahora cierra el navegador y reem plaza el ancho por un valor del 6 0 % . Vuelve a visualizar la página en el navegador y cam bia el ancho de la ventana. Observarás como la tabla varía de extensión tratando de ocupar siempre el 60% del ancho del elemento que lo contiene (en tu caso, la ventana).
Para volver a fijar el ancho, debes desplegar la lista de unidades que acompaña al campo Ancho y asegurarte de que se halla en pix.
Ahora ajustaremos el ancho al contenido, para ello haz clic en el botón de la guía y selecciona la opción Borrar todos los anchos. Esto ajustará la tabla al contenido.
Habiendo seleccionado una o más celdas, podemos observar una serie de campos especiales en la parte inferior del panel de Propiedades.
El cam po an. indica el ancho de la selección 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 escribim os un número en el campo An. este valor se entenderá como una cantidad de píxeles
fijos. Si introducimos un símbolo de porcentaje (% ) final, el núm ero se interpretará com o el ancho relativo al ancho de la tabla. Así, si la tabla sólo 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 (6 0 % · 4 0 % = 2 4 % ).
Añadir filas o colum nas
Teniendo una fila o columna seleccionada y haciendo clic derecho podemos acceder a un nuevo menú contextual a través de la opción Tabla.
Este menú contiene las opciones Insertar fila e Insertar columna de las que hablaremos en este apartado.
Recaudación de las cinco películas más taquilleras (ancho fijo)
Avatar (2009) $2,467,962,011
Titanic (1997) $1,835,300,000
The Lord of the Rings: The Return of the King (2003) $1,129,219,252
Pirates of the Caribbean: Dead Man's Chest (2006) $1,060,332,628
The Dark Knight (2008) $1,001,921,825
Avatar (2009) $2,467,962,011
Titanic (1997) $1,835,300,000
The Dark Knight (2008) $1,001,921,825
Recaudación de las cinco películas más
taquilleras (ancho automático)
Avatar (2009) $2,467,962,011
Titanic (1997) $1,835,300,000
The Dark Knight (2008) $1,001,921,825
Page 84 of 158
08/ 11/ 2010

Es conveniente escoger la opción Insertar fila cuando se ha seleccionado una fila y del m ismo m odo, seleccionar Insertar columna cuando se tiene seleccionada una columna. Estas opciones insertan una sola fila o colum na antes de la fila o colum na seleccionada.
5 .3 .4 - Ejercicio guiado: nueva colum na
Vamos a separar el año de las películas en su propia colum na. 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 Película y Recaudación. Rotulamos la nueva columna
como Año y copiamos los años de estreno de cada película.
Si quisieras introducir varias filas o columnas de golpe, tendrías que seleccionar la opción del m enú contextual Insertar filas o columnas... que te llevaría al siguiente diálogo.
En él debes decidir si queremos añadir nuevas filas o colum nas, el número de ellas y la posición relativa a nuestra selección.
5 .3 .5 - Ejercicio: TOP- 7
Am plia 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 información que te falta.
Elim inar filas o colum nas
Elim inar una fila o columna es una operación sencilla. Basta seleccionar de la manera que hemos aprendido la fila o columna deseada y pulsar la tecla suprim ir. También podemos hacer clic en la opción Elim inar fila (o Eliminar columna) del submenú Tabla del menú contextual.
Com binar y dividir celdas
Recaudación de las cinco películas más
taquilleras
(nueva columna con el año de estreno)
Película Año Recaudación
Avatar 2009 $2,467,962,011
Titanic 1997 $1,835,300,000
The Lord of the Rings: The Return of the King 2003 $1,129,219,252
Pirates of the Caribbean: Dead Man's Chest 2006 $1,060,332,628
The Dark Knight 2008 $1,001,921,825
Page 85 of 158
08/ 11/ 2010

Una tabla no tiene por qué tener una form a regular. Considera el siguiente ejem plo basado en la tabla para nivel de idiomas del modelo de currículum Europass.
Para lograr una tabla como esta tenemos que partir, o bien de una tabla sencilla, e ir añadiendo colum nas y filas para luego combinar sus celdas; o bien comenzar con una tabla m ás compleja y luego ir combinando sus celdas.
Para unir dos o más celdas. estas deben ser adyacentes y estar seleccionadas. Luego harem os clic en el botón Combinar celdas del panel de Propiedades o elegiremos la opción Combinar celdas del menú contextual de la tabla.
Del m ismo m odo, si queremos dividir una celda (o un conjunto de ellas), haremos clic sobre la celda que queramos dividir y a continuación sobre el botón Dividir celdas...
Esta acción desplegará el siguiente diálogo donde podrem os especificar si queremos dividir la celda en filas o columnas y el número de ellas.
5 .3 .6 - Ejercicio: tabla de idiom as
Trata de copiar la tabla de idiomas anterior. Presta atención a las nuevas celdas cabecera tales como Interacción Oral o Expresión 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 más celdas que incluyan una celda cabecera hará que la nueva celda resultante tam bién sea cabecera. De la m ism a manera, dividir una celda cabecera en dos o más, hará que las resultantes también lo sean.
La segunda es que el contenido de una celda puede ser cualquiera, incluídos hipervínculos, im ágenes o listas, incluso otras tablas. A incluir una tabla dentro de otra se lo llama anidam iento de tablas.
Alineam iento de la celda
Podem os controlar la posición del contenido de una celda (o de una selección de celdas) mediante el panel de Propiedades de la celda. Bastará con m odificar el valor de los campos horiz. y vert. Los valores del prim ero pueden ser izquierda, centro y derecha y representa el alineamiento horizontal m ientras
que el segundo puede adoptar los valores superior, m edio, inferior y línea base y representa el alineamiento vertical.
La siguiente tabla recoge las combinaciones de estos valores.
Ejemplo de nivel de idioma
I diom a
Com prensión Expresión oral
Expresión escrita
Oral Escrita I nteracción oral Expresión oral
Inglés C1 C2 C2 C1 B2
Francés B2 B2 C1 B2 B2
Resumen de los alineamientos de celda más comunes
Izquierda + Superior hará que el
contenido se sitúe en la esquina
superior izquierda
Centro + Superior hará que el
contenido se sitúe en el centro y
arriba
Derecha + Superior hará que el
superior derecha
I zquierda + Medio hará que el
contenido se sitúe a m edia altura,
y a la izquierda.
Centro + Medio representa un
alineam iento totalm ente
centrado
Derecha + Medio hará que el
contenido se sitúe a m edia
altura, a la derecha.
Page 86 of 158
08/ 11/ 2010

NOTA: Para que el alineam iento de la celda surta efecto es necesario que el contenido no sea parte de ningún párrafo o elem ento de encabezado. Para ello asegúrate de que el formato del texto en el interior de la celda es Ninguno o cam bialo manualmente (recuerda, cuadro desplegable Form ato, del panel de
propiedades HTML).
5 .3 .7 - Ejercicio: com pleta la página de currículum
NOTA: acuérdate de poner título a todas las páginas web. Repasa la Lección 4.1 para saber cómo se hace esto.
Vas a com pletar la página de currículum, usa las tablas para describir los trabajos en los que has estado y la formación que has recibido así como para representar tu nivel de idiom as como acabam os de ver.
Te dejo mi versión del currículum para que la tomes de referencia. Considera tam bién las siguientes notas:
1. Todas las tablas tienen un ancho del 60%
2. Todas las tablas tienen un relleno de celda de 4 píxeles
3. Los encabezados, en la mayoría de los casos, se encontrarán a la izquierda y su columna ocupará un máximo del 40%
4. Se usarán listas en vez de párrafos normales cuando la situación lo requiera
5. La tabla de idiomas se encuentra en el interior de una celda y no posee ancho máximo por lo que se ajustará automáticamente al contenido
Antes de terminar, sincroniza el servidor remoto.
5 .3 .8 - Ejercicio: envía el sitio w eb
Has concluído la Lección 5. Ahora debes com primir en un ZIP todos los archivos de tu sitio web y enviar el comprim ido a tu tutor para que sea corregido. Utiliza el ejercicio identificado como Lección 5 de la herramienta Entrega de ejercicios.
6 . Lección 6 : I ntroducción a CSS2 - 1 ª parte
Lección 6 : I ntroducción a CSS2 - 1 ª parte
Planteam iento
Requisitos previos
 Comprensión de la filosofía de los lenguajes de marcado vista en la Lección 1
 Comprensión del término anidamiento de elementos HTML
 Conocim iento y dominio de los elem entos HTML vistos en las Lecciones 4 y 5
 Familiarizar al alumno con los nombres de las etiquetas de los elem entos HTML más com unes
 Enseñar al alumno las distintas clases de propiedades CSS y sus implicaciones
 Enseñar al alumno a redefinir los elementos más comunes de HTML
Secciones
1. Diseño con elementos DIV
2. Hojas de estilo
3. Estilos de fondo, texto y listas
4. El modelo de caja y formato de imágenes
Debes estudiar las secciones en el orden en el que se encuentran.
Duración estim ada
Dada la severa novedad de los conceptos introducidos en esta lección y la longitud de las secciones, ésta debería com pletarse en un plazo de 6 sesiones de 2 a 3 horas.
6 .1 . Sección 6 .1 - Diseño con elem entos DI V
Izquierda + Inferior hará que el
inferior izquierda
Centro + Inferior hará que el
texto se pegue abajo y se
mantenga centrado
Derecha + Inferior hará que el
inferior derecha
Page 87 of 158
08/ 11/ 2010

Sección 6 .1 - Diseño con elem entos DI V
El Explorador de jerarquía
Justo debajo del área de edición e inmediatamente antes del panel de propiedades se encuentra el explorador de jerarquía, 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 se organiza mediante anidamientos,
por ejemplo: un texto enfatizado puede estar dentro de una cita en m edio de un párrafo que pertenezca al cuerpo del documento. Justo esta situación la podemos observar en la siguiente imagen.
Observa como el primer elemento de la jerarquía es el <body> o cuerpo de la página, en su interior hay un <p> o párrafo, después encontram os un elemento <cite> o cita y por último un elemento <em> o enfatizado. El nom bre del elemento es el texto entre las marcas de etiqueta < y >. El explorador de
jerarquías es útil de cara al diseño porque nos recuerda el nombre del elemento que queremos modificar y permite recordar de un vistazo cóm o se encuentran anidados los distintos elementos. Además, permite seleccionarlos de manera rápida con sólo hacer clic sobre el nom bre del elemento.
Por ejemplo, como veremos en las próxim as lecciones, si quisiéramos cambiar el estilo del párrafo, tendríam os que seleccionar el nombre de selector p, y si quisiéram os redefinir la cita, usaríamos el nom bre de selector cite. Del mismo modo, para seleccionar la cita bastaría con hacer clic sobre <cite> en el
explorador de jerarquía.
La m aqueta o layout
Hemos aprendido a usar los principales elementos de HTML pero nuestra página web dista mucho de parecerse a lo que se denomina hoy día un diseño moderno. Aunque hemos hecho un buen uso de HTML 4, no hemos realizado ninguna labor de diseño actualizado. Ahora vam os a aprender a utilizar la
técnica de diseño con divs y CSS de la que hablamos en la Sección 1.3.
A la distribución de los elem entos que conform an una página w eb se la denom ina m aqueta o layout. Una maqueta está compuesta por una estructura anidada de bloques, los cuales sirven de contenedores de información o de otros bloques.
6 .1 .1 - Ejercicio: reconoce el layout
Trata de identificar en los siguientes ejem plos, la cabecera con el título, el cuerpo con el contenido, el menú principal con las secciones de la página y los contenidos extra en las columnas laterales:
 http: / / www.m aikelnai.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 ejem plo el layout de la página PSDTuts. Com enzamos por una división sencilla en cabecera, menú, contenido y columna lateral.
La cabecera con el título 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 más publicidad.
Page 88 of 158
08/ 11/ 2010

El pié de página con, de nuevo, el título, los enlaces relacionados, el copyright y las form as de contacto.
La cabecera
La cabecera es el lugar que ocupa la parte superior de la página. Se usa para presentar el título, la barra de búsqueda y, en páginas con publicidad, el banner (la imagen publicitaria) inicial.
El m enú
Incluye una relación de enlaces a las distintas partes de la página. Normalmente, las secciones llevarán a sub-secciones de manera que la página se organice en niveles. De esta form a, el menú actúa com o un reflejo de la jerarquía del sitio web. El m enú suele aparecer bien de form a horizontal tras la
cabecera o como parte de ella; bien verticalmente como parte de la colum na lateral.
El contenido
Este área suele ocupar la región central de la página y es la más grande pues alberga los textos principales de la página.
La colum na lateral
Ocupa uno de los laterales de la página web y suele ser m ás estrecha que el área de contenido. Suele contener enlaces secundarios o más publicidad.
El pié de página
Contiene información extra sobre la página: copyright, enlaces a otras páginas, mail del autor. Sirve para cerrar la página de la misma forma que la cabecera servía de introducción.
Por supuesto, este layout, aunque muy utilizado, no es más que uno de tantos y Dreamweaver ofrece una colección bastante extensa de maquetas. Hay que notar además que cada bloque puede contener tantos otros y que estos subbloques pueden estar com puestos a su vez, de aun m ás. Esta es la situación
que se observa en las siguientes figuras donde se m uestra 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
Page 89 of 158
08/ 11/ 2010

El desglose de un tutorial en imagen (a la izquierda), título e introducción (en medio) y número de com entarios, Com , a la derecha y arriba.
Las m aquetas de Dream w eaver
Haciendo clic en Archivo, opción Nuevo... se abrirá el siguiente diálogo que nos permitirá escoger la maqueta de nuestra página:
Podem os seleccionar la maqueta que queramos en el área de selección bajo la etiqueta Diseño. Si no queremos ninguna maqueta seleccionaremos la opción < ninguno> . A la derecha encontramos una previsualización y justo debajo, una pequeña descripción textual. Si hacemos clic en Crear obtendremos una
página web con este formato rellena de texto de prueba para probar el contenido y algunas anotaciones para realizar cam bios en la maqueta.
Page 90 of 158
08/ 11/ 2010

Las distintas áreas generadas por Dreamweaver destacan por estar recuadradas m ediante líneas discontinuas. Puedes salvar y probar la página (o activar la Vista en vivo) para comprobar cómo se vería en un explorador. Dentro de cada área puedes incluir cualquier elemento de los que hem os visto hasta
ahora.
6 .1 .2 - Ejercicio ( opcional) : m aquetas de Dream w eaver
Crea un nuevo documento con una maqueta de Dreamweaver eligiendo el diseño que m ás te guste. Copia el contenido de tu currículum a esta página y observa los resultados.
Puedes decargar nuestra versión de este ejercicio, yo he elegido el diseño 2 columnas flotantes, barra lateral derecha, encabezado y pie.
Guarda la página con el nombre m aquetadw .htm l, enlázalo en index.htm l con el nombre Maqueta Dream w eaver y acuérdate de enlazar el índice desde esta página también.
Elem entos DI V
En la actualidad, el elem ento HTML de diseño por excelencia es el div o bloque del que ya hablamos en la Sección 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 com binación de elementos div y
hojas de estilo es la piedra angular del diseño de páginas web m oderno.
Un elem ento div se dice que es "de bloque" puesto que reúne un conjunto de elementos que desem peñan (o comparten) una función en una unidad independiente. Así, todos los elementos de la cabecera de PSDTuts pertenecerían a un div llamado "cabecera" y los distintos enlaces que forman el m enú
pertenecerán a un div llam ado "m enu". El nombre del div se suele denominar identificador o ID, lo elige el diseñador (es decir, nosotros) y no puede repetirse en el resto de la página (no así en el sitio web, el nom bre se puede repetir en páginas distintas pero no en el m ism o docum ento).
Como aun no hem os hablado de CSS, aprenderemos a dividir nuestro documento en divs pero no les aplicaremos ningún estilo. Para nosotros no serán más que un m ontón de cajas apiladas unas dentro de otras.
6 .1 .3 - Ejercicio guiado: estableciendo los divs de la m aqueta
Asegúrate de tener seleccionado el sitio MiSitioWeb en el explorador de archivos y añade una nueva página web en blanco. Llámala m aqueta.htm l
Dividiremos nuestro documento en:
 Cabecera: con el título de nuestra web personal
 Colum na lateral izquierda: con el m enú a las distintas secciones
 Contenido: con los textos principales
 Pie de página: con los agradecimientos, el copyright y nuestro correo electrónico
Page 91 of 158
08/ 11/ 2010

Nuestra maqueta, los nom bres de los div, precedidos por la alm ohadilla, sin acentos y sin espacios cobrarán sentido en unos momentos.
Para ello, en el panel Insertar, a la derecha del área de edición, harem os clic sobre Com ún lo que desplegará el menú de selección de paneles. Advierte como el panel por defecto es Com ún y luego selecciona Diseño haciendo clic sobre él.
Para insertar un elemento div haz clic sobre Insertar etiqueta Div. Se abrirá el cuadro de diálogo de Insertar etiqueta Div.
Page 92 of 158
08/ 11/ 2010

Los cam pos más im portantes aquí son el cuadro desplegable Insertar y el cuadro de texto ID. El primero especifica dónde insertar el elem ento div mientras que el segundo nos perm ite nom brarlo. Configura el diálogo como aparece en la ilustración y haz clic en Aceptar para comprobar que se ha
insertado el div.
Para seleccionar el elemento div sitúa el ratón sobre la línea discontinua y com prueba cómo se vuelve roja y continua antes de hacer clic. También podemos situarnos en su interior y hacer clic sobre el elem ento <div> en el Explorador de jerarquía.
Observa como el explorador de jerarquía indica que se trata de un div con nom bre añadiendo el sím bolo alm ohadilla y el identificador al nombre del elemento.
Para dar nom bre a un div que no tuviera, o realizar un cam bio en el identificador del mismo basta seleccionarlo y cambiar el campo ID de div del panel de propiedades HTML del elemento.
Page 93 of 158
08/ 11/ 2010

Debes insertar 3 divs más con los nombres "menu", "contenido" y "pie" respectivamente. No obstante, si ahora repitieras los pasos anteriores, insertarías los nuevos divs dentro del elemento div actual, lo cual es interesante pero no es lo que necesitam os en este momento. Lo que necesitas es insertar el
elemento después del actual y para eso es importante elegir correctamente el valor del campo Insertar del diálogo 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 com o aparece otro cuadro desplegable a la derecha del actual que indica detrás 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 deberás elegir aquel div con ID igual a "contenido". Su ID será "menu".
No confundas las opciones Delante de la etiqueta y Después de la etiqueta con Después 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 después de un determ inado elem ento respectivamente. Las dos últimas
sirven para anidar el nuevo elemento div dentro de otro elem ento, al principio o al final respectivam ente. Si recuerdas el tema 1, recordarás que los elem entos 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 habrás observado, falta el pie de página. Insertarás este últim o de otra forma.
Haz clic debajo y fuera del div llam ado "contenido". Escribe el siguiente texto:
Esta página pertenece a [ pon tu nombre] . Todos los derechos reservados.
Asegúrate de que el formato de la línea es Párrafo tal y como aprendiste en la Sección 4.1. Ahora, haz clic en el elemento <p> del explorador de jerarquía para seleccionar el párrafo y haz clic una vez más en Insertar etiqueta Div. Esta vez elige la opción Ajustar alrededor de la selección y como nombre
elige "pie_de_pagina".
Page 94 of 158
08/ 11/ 2010

NOTA: Como ocurría con los nom bres de los puntos de anclaje, los identificadores de los div deben cumplir las siguientes reglas:
 Sólo pueden contener caracteres del alfabeto inglés (esto es, ni caracteres acentuados, ni eñes), guiones bajos y números
 No se permiten espacios, utiliza guiones bajos o separa las palabras con mayúsculas como en "pie_de_pagina" o "pieDePagina"
 No pueden empezar por un número
 Se distingue entre mayúsculas y minúsculas luego los nombres "cabecera", "CaBeCeRa" y "CABECERA" son distintos
 No pueden repetirse dentro de un m ism o docum ento
Presta atención a esto porque Dream weaver no te avisará de que exista un error si no cumples estas normas. Esto es así, porque las normas son una buena práctica (y no una obligación) que tiene que ver con la programación (y no con el diseño) de páginas web.
El resultado final debería parecerse a esto:
No te preocupes porque aun no se parezca a la maqueta. Al menos tiene los mismos bloques.
6 .1 .4 - Ejercicio: m aquetando el sitio w eb.
Tomando com o referencia esta maqueta, m odifica las páginas curriculum.html, datos.html y fotos.html para que se ajusten al layout.
Page 95 of 158
08/ 11/ 2010

Comienza por el div de contenido, selecciona toda la página y rodéala 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 jerarquía. Si ahora insertas un div tal y com o explicamos anteriormente, este rodeará todo el contenido del cuerpo, no el cuerpo en sí dado que no puede haber nada rodeando al elemento cuerpo.
En el div menú crea una lista no ordenada con enlaces a curriculum.html, datos.htm l y fotos.htm l. Luego abre la página contacto.html y añade el contenido al div pie_ de_ pagina de cada página.
Descarga nuestra página de datos como referencia, el resto deberían ser muy parecidas salvo por el contenido del div contenido.
6 .2 . Sección 6 .2 - Hojas de estilo
Sección 6 .2 - Hojas de estilo
Creación de la hoja de estilo
En la Lección 1 y en la Sección 4.2 pusimos énfasis en que el lengaje HTML nos permite aportar significado al texto, no estilo gráfico. Insistimos en que con HTML m arcam os qué es un texto, no cóm o se representa. En la Sección 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 código.
Las capacidades de CSS2 son tantas que resultaría imposible listarlas y explicarlas todas. A lo largo de esta Lección ofreceremos configuraciones interesantes de estilo que ilustrarán las propiedades m ás comunes e interesantes. En Internet hay muchos recursos tanto en español como en inglés donde
encontrar información adicional.
Lo que haremos ahora sera crear una hoja de estilo que no es más que un documento que se adjunta a una página web para indicar cómo deben representarse sus elementos.
6 .2 .1 - Ejercicio guiado: creación de la hoja de estilo
Abre la página pruebas.htm l que creamos en la sección 6.2. Si no la creaste, este es el mom ento: basta con una página en blanco, no es necesario que especifiques ningún diseño.
Repasa los conceptos aprendidos en la Lección 4 insertando algunos encabezados de distinto nivel así como un par de párrafos de prueba, listas de definición, listas ordenadas y no ordenadas y algunos estilos HTML. Puedes descargar nuestra página de pruebas si quieres. Cuando hayas terminado ve al menú
Formato, allí a Estilos CSS y por último a Nuevo...
Page 96 of 158
08/ 11/ 2010

Esto desplegará el diálogo de nuevo estilo que configurarem os como se indica en la figura.
Mientras que en la Sección 4.3, para definir un color, creábamos una clase nueva, esta vez vamos a redefinir cómo 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 Nom bre del selector escribiremos body (o lo seleccionaremos del cuadro desplegable) porque es precisamente el elemento <body> de HTML (el cuerpo del docum ento, es decir, la parte visible de la página web) el que querem os redefinir.
Por último saber que los estilos CSS pueden definirse o bien dentro de cada página web (si com o en la Sección 4.3, en el campo Definición de regla, seleccionamos la opción (Sólo este documento)) o bien en un archivo a parte, como harem os ahora. Para ello elige la opción ( Nuevo archivo de hoja de
estilos) . Al hacer clic sobre Aceptar se nos preguntará por una ubicación para guardar la hoja de estilo. Ve a la raíz del sitio, dale el nom bre estilo.css y haz clic en Guardar.
Page 97 of 158
08/ 11/ 2010

A continuación se abrirá el diálogo de definición de regla que estudiarem os en profundidad a lo largo de todo este tem a. Las propiedades CSS están en un inglés sencillo y autoexplicativo. Para este ejemplo, m odificaremos las propiedades font-family (familia de fuente) y font-size (tamaño de fuente).
Trata de dejar los valores como se indica en la imagen y pulsa Aplicar. Verás como, tanto la fuente de la página com o su tamaño cambian notablemente, aunque la ventana de diálogo permanece abierta. Prueba otras configuraciones y haz clic en Aplicar para com probar sus efectos. Procura que la
configuración quede com o en la figura antes de pulsar Aceptar.
NOTA: Se necesita definir al menos un estilo para que Dream weaver cree la hoja de estilo. La verás aparecer en la vista local del explorador de archivos con la terminación .css que es como suelen term inar las hojas de estilo (si no aparece, utiliza el botón Actualizar).
Parece que el tamaño de letra es dem asiado pequeño y el colores dem asiado estridente, vamos a cambiar la regla para que el tam año sea de 14px ó 16px en vez de 10px. Para ello, a la derecha del área de edición se encuentra el panel Estilos CSS con las reglas actualm ente definidas en la hoja de estilo.
Page 98 of 158
08/ 11/ 2010

Si no ves el estilo, fíjate si aparece un signo + a la izquierda del nom bre 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 "[ nom bre de la regla] ",
muestra las propiedades de cada regla. El área de propiedades del panel perm ite manipular los valores de las propiedades de forma rápida y visual. De esta forma, haz clic sobre el valor de font-size lo que m ostrará un cuadro desplegable para seleccionar los tamaños más comunes y sus unidades.
Establece el nuevo valor en 1 4 px y autom áticamente verás actualizado el estilo.
Si prefieres editar la regla desde el cuadro de diálogo haz doble clic sobre el nom bre de la regla en el área Todas las reglas o haz clic con el botón derecho sobre la regla y a continuación elige Edición... en el menú contextual. Para practicar, cam bia por ti m ism o el color de fondo al código # 6 9 C
(propiedad background-color, sección Fondo). Puedes probar otras configuraciones de color si quieres y comprobar el efecto haciendo clic en Aplicar pero procura dejar la configuración de la figura antes de continuar pulsando Aceptar.
Observa como encima del área de edición, justo sobre los botones de cambio de vista, se encuentra una barra que muestra el siguiente aspecto.
Page 99 of 158
08/ 11/ 2010

Las pestañas te serán familiares: m uestran los archivos abiertos en cada momento. Como en m ultitud de aplicaciones, aquellas pestañas marcadas con un asterisco indican que no están guardadas. La novedad se encuentra en la barra con las opciones Código fuente y estilo.css* . Esta barra reúne 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í. Además el asterisco indica que no está guardada porque acabamos de hacer algunas m odificaciones en las reglas. Para guardarla deberemos
seleccionarla y pulsar la combinación 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 edición cambia al modo Dividir y que deberás hacer clic en el botón Diseño para volver de nuevo al modo norm al. También puedes hacer clic en la opción 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 pestañas lo cual no siempre es conveniente. Sea como sea, en el m omento de previsualizar la web mediante F1 2 , se nos recordará que debemos guardar los documentos con modificaciones.
I ncluir la hoja de estilos en otros docum entos
Para que una hoja de estilo afecte a una página HTML tiene que estar adjunta o vinculada a la misma. Para ello debemos hacer clic en el menú Form ato, luego en Estilos CSS y por último en Adjuntar hoja de estilos... Aparecerá un diálogo como el que se muestra en la figura. Aquí debemos seleccionar el
archivo estilos.css m ediante el botón Examinar, asegurarnos de que en el campo Añadir como se encuentre seleccionada la opción Vincular y luego pulsar en Aceptar.
6 .2 .2 - Ejercicio: adjuntar la hoja de estilos
Adjunta la hoja de ejercicios a las páginas datos.html, curriculum.htm l y fotos.htm l
6 .3 . Sección 6 .3 - Estilos de fondo, texto y listas
Sección 6 .3 - Estilos de fondo, texto y listas
Añadir nuevas reglas
NOTA: Si aplicaste color a títulos durante la Lección 4.3, quítaselos ahora seleccionando la clase Ninguna para cada uno de los títulos.
Comenzarem os estudiando los estilos de los elem entos de texto como hicimos en la Sección 4.1. Para añadir un nuevo estilo haremos clic en el menú Form ato, luego Estilos CSS y por último en Nuevo...
Para añadir estilos a la hoja actual y no a otra, tendremos que asegurarem os de que en el apartado Definición de regla tenemos seleccionada la hoja de estilo que creamos anteriorm ente (estilos.css) tal y como se m uestra en la siguiente figura.
Page 100 of 158
08/ 11/ 2010

La categoría Tipo
En el cuadro de diálogo Definición de regla... encontram os muchas categorías en la lista de la izquierda. Com enzaremos por estudiar la categoría Tipo.
font-family
Indica la fam ilia del texto contenido en el interior del elem ento. Las familias están compuestas por fuentes separadas por comas. Si la primera fuente no está disponible, se prueba con la segunda y así sucesivam ente.
font-size
Es el tam año de la fuente. Existen dos tipos de valores: los valores num éricos y las constantes relativas pero sólo explicaremos los primeros. Los valores numéricos requieren alguna unidad, las m ás habituales son los píxeles (px), los EMs (em) y los EXs (ex). Los píxeles se utilizan cuando queremos
tener control total sobre cuánto debe m edir una tipografía. Los EMs son relativos al tam año del texto circundante, por ejemplo, si el texto del párrafo es de 12px y establecem os que el texto de una cita sea de 1em, que significa "igual que el texto circundante", obtendremos un tamaño de 12px; con 1.5ems,
el cual quiere decir "un 50% más grande que el texto circundante", obtendremos un tamaño de 18px y con 0.75ems, lo que quiere decir "un 75% del tam año del texto circundante", obtendrem os un tamaño de 9px (75% de 12 = 9). Por último, los EXs representan el tamaño del texto tomando com o
referencia una X mayúscula (que es casi cuadrada y además, por lo general, no hay letra mayor que ella) por lo que son unas unidades que vienen muy bien para establecer tamaños en función del núm ero de caracteres. Por ejem plo, para especificar 5 caracteres podem os indicar 5exs.
font-weight
Es el grosor del trazo. Los valores más com unes son bold, lighter y normal. La opción bold hace el trazo más ancho y es equivalente al estilo negrita de los procesadores de texto mientras que lighter hace que el trazo sea más delgado. Estas opciones no siempre son soportadas por la fuente en uso.
La opción normal establece el trazo en su tamaño por defecto.
font-style
Se refiere a la orientación 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
Page 101 of 158
08/ 11/ 2010

La variación se refiere sencillam ente a si deben usarse versalitas. Las letras versalitas son minúsculas en forma de m ayúsculas más pequeñas. Para activa el efecto debemos establecer el valor en small-caps.
line-height
Se refiere a la m edida del alto de línea. Las unidades son las mismas que para el tamaño de la fuente.
text-transform
Aplica una transform ación al texto. Estas pueden ser, según el valor establecido, capitalize (la primera letra de cada palabra en m ayúscula), uppercase (todas en mayúscula) y lowercase (todas en minúscula).
text-decorations
Adorna el texto aplicando uno o más efectos. La opción underline subraya el texto, la opción overline hace aparecer una raya por encima del texto, la opción line-through tacha el texto y la opción 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 com o se hizo en la Sección 4.3 o indicando el código alfanumérico apropiado como hicim os al establecer el color de fondo.
6 .3 .1 - Ejercicio guiado: categoría Tipo
En la página pruebas.html haz clic sobre un elemento de encabezado de primer nivel y selecciónalo con el explorador de jerarquía. Ahora añade un nuevo estilo CSS y asegúrate de que Tipo de Selector se encuentra en Etiqueta (redefine un elem ento HTML) al igual que como hicim os para redefinir <body>.
Sin em bargo, esta vez redefiniremos un encabezado de primer nivel por lo que elegiremos el selector h1 del cuadro desplegable.
Cambia las opciones tanto com o desees haciendo clic en Aplicar para visualizar los efectos sin cerrar el diálogo, 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 sólo pueden com probarse desde el explorador.
Cuando veas que te has familiarizado lo suficiente con las propiedades, déjalas tal y como se indican en la figura. Utiliza el panel de Estilos CSS para cam biar las opciones rápidam ente sin necesidad de abrir el cuadro de diálogo.
NOTA: todas las propiedades CSS tienen un valor por defecto. El valor por defecto puede restablecerse borrando el valor en el diálogo o suprimiendo la propiedad en el panel Estilos CSS seleccionando la propiedad en cuestión y pulsando la tecla supr.
La categoría Fondo
Profundicemos ahora en la categoría Fondo. El fondo es la región de cada elemento sobre la que se dibuja el contenido. En el caso del elemento <body>, se trata de toda la página. En el caso del resto de los elementos, com o los encabezados <h1>, <h2>, <h3>, etc, el fondo es el rectángulo que alberga tanto el
contenido como sus márgenes internos (para diferenciarlos de los externos, de los cuales hablaremos en breve).
Page 102 of 158
08/ 11/ 2010

backgroun-color
Indica el color de fondo. Com o todos los controles de color, es posible elegir este desde la paleta o indicar el triplete hexadecimal directamente en el cam po de texto. No olvides la alm ohadilla antes del código.
background-image
Permite establecer una im agen de fodo. Podemos elejirla haciendo clic en el botón Exam inar...
background-repeat
Establece el m odo de repetición del fondo. El modo de repetición hace que la im agen de fondo se repita de alguna manera según 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
am bas direcciones.
background-attachment
Indica cóm o se fijará el fondo. Sus valores son fixed que hará que los elementos de fondo se m antengan siempre en la m ism a posición o scroll que hará que el fondo se desplace al igual que los elementos de página cuando el usuario desplace el elemento. Com probarem os el uso de esta propiedad al
final del capítulo.
background-position (X)
Indica la posición del fondo en el ancho del elem ento. Aquí se establece un valor numérico indicando la posición de la imagen de fondo en el ancho del elemento. Lo habitual es usar píxeles (px) o porcentajes (%). La situación del fondo siempre se realiza en relación al centro de la im agen 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 respectivam ente.
background-position (Y)
Indica la posición del fondo en el alto del elem ento. Igual que la anterior, pero indicando la posición de la imagen de fondo en el alto del elemento. De nuevo, lo habitual es usar píxeles (px) o porcentajes (%). La situación del fondo se realiza de nuevo en relación al centro de la imagen por lo que para
situar el fondo en la mitad del elem ento 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 desvanecim iento
Continúa con las m odificaciones a los encabezados de prim er nivel. Para ello, en el panel de Estilo CSS hacem os doble clic sobre el elemento h1 para abrir el diálogo.
Descarga el conjunto de imágenes de fondo y descomprim e su contenido en la carpeta im agenes de tu sitio web. Ahora define las propiedades de Fondo para los encabezados tal y com o se muestra (la imagen se llama fondo_ titulo2 .png y está en la carpeta fondos).
No olvides hacer clic en Aceptar y pulsar F1 2 para previsualizar los cambios en el navegador. Recuerda hacer clic en actualizar o presionar F5 en el navegador para actualizar.
Page 103 of 158
08/ 11/ 2010

Si seguiste al pie de la letra esta Sección, deberías haber logrado un efecto de desvanecimiento en el fondo del título com o el que se muestra a continuación.
Esto es así porque la imagen de fondo es un pequeño degradado de blanco al gris de fondo. Puedes explorar la carpeta fondos y verlo por ti mism o. Si observas la imagen no obstante, te darás 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 im agen se repita verticalemente con lo que cubrimos todo el alto de la misma.
6 .3 .3 - Ejercicio guiado: fondo fijo con repetición horizontal
Modifica el estilo del cuerpo de la página 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 sim ultaneam ente para lograr efectos muy interesantes com o los que veremos a continuación.
Deja la configuración de Fondo com o se presenta en la figura (fíjate que hemos cambiado el color de fondo también), el archivo se encuentra en fondos y se llama fondo_cuerpo.png
Ahora se presenta un fondo con repetición horizontal que se mantiene fijo pese a que descendamos por el docum ento. El efecto de desvanecimiento ya no funciona por lo que puedes anularlo quitando la imagen de repetición del fondo del encabezado.
6 .3 .4 - Ejercicio guiado: fondo con scroll y repetición horizontal
Page 104 of 158
08/ 11/ 2010

Cambia la propiedad background-attachment a scroll y compara el resultado con el ejercicio anterior.
La opción scroll de background-attachment es la opción por defecto. Scroll es una palabra inglesa que podemos traducir como desplazamiento y representa la opción contraria a fixed.
6 .3 .5 - Ejercicio guidado: paisaje bajo
Otro efecto interesante de utilizar la fijación del fondo lo encontramos con la siguiente configuración. En este caso el archivo se llama fondo_cuerpo2.jpg
Esta configuración, la m ás compleja de las que hemos tratado, fija un paisaje de fondo en la parte inferior de la página.
6 .3 .6 - Ejercicio guidado: m osaico
Por último, si se consigue la im agen adecuada, un efecto resultón es el uso de un mosaico con repetición com pleta como el que lograréis al introducir la siguiente configuración (el archivo es fondo_cuerpo3.png).
Page 105 of 158
08/ 11/ 2010

En general, bien empleados, los fondos en mosaico consiguen un efecto muy interesante. Podéis usar este generador de fondos o visitar esta lista de generadores de patrones.
6 .3 .7 - Ejercicio: experim entos
Experim enta tanto como necesites hasta familiarizarte con las opciones del fondo. Busca imágenes en Internet que te sirvan de fondo.
Cuando termines vuelve a la configuración del Ejercicio guiado 6 .3 .5 y elim ina el efecto de desvanecim iento si no lo hiciste ya.
La categoría Bloque
La categoría Bloque com plementa la categoría Tipo pero con propiedades típicas de los párrafos. Vamos a cam biar pues el aspecto del párrafo. Para ello crearemos un nuevo estilo para el elem ento p.
word-spacing
Indica el espacio entre palabras. El espacio entre palabras puede aumentarse o disminuirse (usando valores negativos). Esto perm ite compactar los párrafos o expandirlos a voluntad.
letter-spacing
Permite variar el espacio entre letras. Como la propiedad anterior, esta también admite valores negativos si querem os decrem entar el valor normal.
vertical-align
Establece el alineam iento vertical del texto. Se refiere a dónde se debe alinear el texto en el interior de la caja de su elemento padre. La caja se estudiará en la próxima sección y volveremos a esta propiedad cuando queram os situar el texto en el interior de las celdas de las tablas.
text-align
Page 106 of 158
08/ 11/ 2010

Establece el alineam iento del texto. Los valores de esta propiedad son los típicos left, right, center y justify (izquierda, derecha, centro y justificado). Cada uno se refiere por supuesto al modo en el que se alinearán las líneas 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 m i elit et nisi.
Quisque consequat aliquam nibh. Duis m auris ligula, sodales vitae, iaculis vel, elementum vitae, justo. Donec fringilla, orci nec luctus auctor, lorem ipsum sagittis lorem, eget lacinia m auris 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 m ontes, 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, elem entum 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 ullam corper feugiat mi. Suspendisse sollicitudin condimentum ipsum. Mauris semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus m us. Cras adipiscing.
Texto alineado al centro: Lorem ipsum dolor sit am et, 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 m auris ligula, sodales vitae, iaculis vel, elementum vitae, justo. Donec fringilla, orci nec luctus auctor, lorem ipsum sagittis lorem, eget lacinia m auris 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 ullam corper feugiat mi. Suspendisse sollicitudin condimentum ipsum. Mauris semper. Cum sociis natoque penatibus et magnis dis parturient m ontes, 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 m i 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 m ontes, nascetur ridiculus mus. Cras adipiscing.
text-indent
Se refiere al sangrado de prim era línea o indentación. El sangrado es el espacio desde el m argen del texto hasta el primer carácter de una línea. Con valores positivos conseguimos un sangrado clásico de primera línea mientras que estableciendo valores negativos conseguirem os el efecto de la
sangría francesa en la que la primera línea 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 sección.
white-space
Indica cóm o deben tratarse los espacios y saltos de línea dentreo del texto. Las opciones son normal, no-wrap y pre. La primera opción, establecida por defecto, colapsa los sucesivos espacios o tabuladores en un sólo espacio y ajusta el párrafo al tam año del navegador automáticam ente. Hace que
el texto se comporte com o los elem entos de párrafo norm ales. La segunda colapsa los espacios pero no ajusta el texto a menos que encuentre un carácter específico de cam bio de línea (que debe introducirse mediante la combinación de teclas shift+ enter). La últim a se com porta 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 elem ento. Hemos hablado de la caja de un elem ento en la propiedad vertical-align y tratarem os este concepto en profundidad en la siguiente sección. Por el m omento, baste decir que CSS asigna una caja con unas determinadas propiedades que contiene
la totalidad del elem ento. Si la caja es más pequeña que el contenido del elemento, el contenido sobrante no se verá. Existen muchos tipos de caja, entre ellas las más importantes son block, propia de los encabezados o párrafos en los que a la caja le sigue un salto de línea forzoso; inline, con la cual
elim inam os el salto de línea haciendo que el siguiente elemento se dibuje (si cabe) a continuación del actual; table-cell, que nos permite que el elemento se com porte com o una celda de una tabla (habilitando el uso de la propiedad vertical-align, por ejemplo); list-item, que permite añadir
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 categoría Bloque
En este ejemplo, estableceremos cierta sangría y cambiaremos el alineamiento a justificado. Si lo prefieres, puedes experim entar con las opciones hasta lograr la configuración que más te agrade. Recuerda que a la hora de crear el nuevo estilo deberás especificar p como etiqueta porque estas modificando el
elemento párrafo.
Observa como la indentación del texto es de 5exs indicando que la primera línea comienza 5 caracteres depués que la segunda.
La categoría Lista
La últim a de las categorías que estudiaremos por el momento, es la categoría Lista que contiene propiedades específicas para la visualización de este tipo de elem entos. Como aprendimos en la sección 4.1, existen tres tipos de listas: ordenadas, no ordenadas y de definición. Por sus características, hem os
dejado las listas de definición a parte. Así pues, puedes colocar el cursor encim a de un elemento de una lista cualquiera para observar en el Explorador de jerarquía que tanto los elementos de las listas ordenadas como las no ordenadas se denominan <li> (acrónimo inglés de List I tem o elemento de
lista). No obstante, según estem os en listas ordenadas o no ordenadas, el elemento padre será <ul> u <ol> respectivamente, acrónimos ingleses de Unordered List (lista no ordenada) y Ordered List (lista ordenada).
Page 107 of 158
08/ 11/ 2010

list-style-type
Se refiere al tipo de num eración o m arca de la lista. CSS proporciona algunas figuras geométricas y estilos de numeración. Entre las figuras encontramos circle, un círculo vacío; disc, un círculo lleno y square, un cuadrado lleno. Entre los tipos de numeración para listas ordenadas encontramos
decimal, estilo por defecto de numeración ( 1 , 2 , 3 ...) ; lower-roman y upper-roman, que utiliza núm eros rom anos en minúscula ( i, ii, iii, iv...) o mayúscula ( I , I I , I I I , I V...) respectivam ente y lower-alpha y upper-alpha que utiliza letras minúsculas ( a, b, c...) o mayúsculas ( A, B, C...)
respectivam ente. Es interesante decir que no tenemos ningún tipo de restricción 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 números serán reemplazados por discos del mismo modo que
si establecemos numeración lower-roman en una lista no ordenada, sus elem entos pasarán a estar numerados de acuerdo al estilo romano en m inúscula.
list-style-image
Indica la im agen que debe usarse com o m arca. El valor es una imagen que puede seleccionarse mediante el botón Exam inar... o Browse... y que reemplaza a la marca de lista no ordenada.
list-style-position
Establece cóm o debe alinearse la m arca del elem ento. Los posibles valores son outside e inside. El prim ero es el valor por defecto. Los elem entos, no sus m arcas, com enzarán alineados al m ism o m argen vertical. El segundo valor hace que se alineen lar m arcas, no así los elem entos. Esta
propiedad se observa muy bien cuando se establece el valor inside y se combina con el estilo de núm eros rom anos com o veremos en el ejemplo.
6 .3 .9 - Ejercicio guiado: la categoría Lista
Descarga esta colección de imágenes de m arca para experimentar con la propiedad list-style-image. Descom prímela en el interior de la carpeta imagenes de tu sitio web.
Colócate sobre un elemento de una lista ordenada y haz clic en la etiqueta <ol> en el explorador de jerarquías para seleccionar la lista ordenada en sí (y no alguno de sus elem entos). Establece sus propiedades como se indica en la figura. El estilo elegido es lower-roman.
Haz lo m ism o con una lista no ordenada y deja su configuración com o se indica en la captura. El archivo se encuentra en la carpeta marcas y se llam a ok.png.
Page 108 of 158
08/ 11/ 2010

Listas de definición
El problema de las listas de definición es que cada elemento está form ado por al m enos dos tipos de elem entos, el término a definir o el elemento HTML <dt> (acrónimo inglés de Definition Term) y la definición, elem ento HTML <dd> (acrónimo de Definition Definition). En principio, podem os hacer que los
elementos <dd> y <dt> se comporten como listas cambiando su propiedad display de la categoría Bloque a list-item. Sin em bargo casi ningún navegador soporta el uso de marcas para estos elem entos por lo que tendremos que recurrir a otros trucos de diseño si queremos conseguir un efecto sim ilar.
6 .3 .1 0 - Ejercicio guiado: estilos en listas de definición
Bajo Firefox y Chrome puedes probar la siguiente configuración para los elementos <dd> que ofrece interesantes resultados. Es totalmente necesario que previsualices esta página con navegador pulsando F1 2 o no percibirás ningún cambio en el área de edición de Dreamweaver.
Crea un nuevo estilo para el elemento dd y establece las siguientes configuraciones.
Configuración de la categoría Bloque
Page 109 of 158
08/ 11/ 2010

Configuración de la categoría Lista. El archivo de imagen se llama definicion.png y lo encontrarás dentro de la carpeta marcas.
Tendrás que ver los resultados en el navegador pulsando F1 2 .
De todas form as, aun es posible usar otras categorías de estilos para por ejemplo, poner en negrita la definición (o en gris los términos a definir), sangrarla algunos píxeles o alinearla al centro.
6 .3 .1 1 - Ejercicio: diferenciar los estilos HTML
El objetivo de este ejercicio es que actualices tu hoja de estilo para redefinir todos los elem entos HTML vistos en la sección 4 .1 (destacado, énfasis, cita, código...) de forma que no se repita la presentación de los m ismos, es decir, para poder diferenciar con claridad un texto en estilo código de otro
en estilo teletipo. Utiliza los conocim ientos adquiridos para diferenciar todos y cada uno de ellos. Asegúrate de que los estilos se han aplicado a todas las páginas de tu sitio web.
Puedes descargar la página de pruebas con todos los estilos al terminar la lección.
6 .4 . Sección 6 .4 - El m odelo de caja y form ato de im ágenes
Sección 6 .4 - El m odelo de caja y form ato de im ágenes
El m odelo de caja
Continuamos nuestra introducción a las propiedades CSS. En esta sección seguirem os explicando el diálogo de definición 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 elem ento lo alberga totalmente y está dividido en cuatro partes: contenido, relleno, borde y m argen; tal y como se muestra en la siguiente figura.
Darem os ahora las definiciones de cada elemento y las propiedades de CSS que los gobiernan.
Contenido:
Page 110 of 158
08/ 11/ 2010

El contenido es, en principio, el m ínimo rectángulo capaz de albergar al elem ento HTML. Sin embargo, podem os establecer las dim ensiones del contenido m ediante las propiedades width ( anchura) y height ( altura).
Relleno:
El relleno es la extensión del contenido que existe hasta el borde. La extensión de esta región se controla a través de la propiedad padding. El relleno y el contenido forman el fondo cuyo estilo puede alterarse usando las propiedades CSS de la categoría Fondo como vimos en la sección anterior.
Borde:
El borde es un rectángulo que delimita el fondo. Su ancho, así como su estilo puede controlarse m ediante la propiedad border o a través de la categoría Borde.
Margen:
El margen es un espacio vacío que se extiende desde el borde hacia afuera del elemento y fuerza a cualquier otro elem ento circundante a mantener una separación. El margen puede controlarse a través de la propiedad margin.
Tanto margin como padding así como las propiedades del contenido, se encuentran en la categoría Cuadro.
La caja además, tiene otras propiedades relacionadas con la anteriorm ente explicada propiedad display,
Las categorías cuadro y borde
Antes de proseguir. Abre la página pruebas.htm l y repasa la Lección 5 introduciendo algunos hipervínculos, imágenes y tablas. Puedes descargar nuestra página de prueba con el repaso de la Lección 5. Recuerda que si quieres utilizarla debe estar en la carpeta de tu sitio web o las imágenes no se mostrarán.
La categoría cuadro nos permite modificar todo lo relacionado con el modelo de caja visto anteriormente a excepción del borde que, por su complejidad, disfruta de una categoría propia.
width
Es el ancho del contenido en las unidades que estudiamos en la lección anterior. Si dejam os el valor en blanco o auto, el ancho se ajustará automáticamente 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á automáticamente para dar cabida a todo el contenido.
float
Indica dónde debe situarse el elem ento que estam os redefiniendo en relación 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 alineam iento. Veremos un
ejemplo concreto dentro de unos párrafos.
clear
Indica a qué lados del elemento no pueden situarse elementos "flotantes", es decir, elementos con su propiedad float a un valor distinto del predeterm inado. Veremos una aplicación de esta propiedad más adelante. Sus valores posibles son left, right y both.
padding
Se trata de la propiedad CSS que controla el relleno que definimos anteriorm ente.
margin
Se trata de la propiedad CSS que controla el m argen que definimos anteriormente.
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 desm arcando la casilla de verificación Igual para todo. Con esta casilla activada, las
propiedades de los cuatro lados serán las mism as que la del lado superior (top).
6 .4 .1 - Ejercicio guiado: la propiedad float
Añade tu retrato justo antes del párrafo autobiográfico de datos.html. Recuerda que float afecta a la posición del elemento actual en relación a los que le siguen. Por eso debes añadir tu foto antes del párrafo con la biografía. Ahora redefine la etiqueta img (de Image en Inglés o Im agen) para establecer la
propiedad float a left o right, com o tu prefieras.
NOTA: No confíes demasiado en la representación de Dreamweaver, pruébalo sobre un navegador con F1 2 .
Observa las diferencias entre float a la izquierda o la derecha respectivamente.
Float a la izquierda
Page 111 of 158
08/ 11/ 2010

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras laoreet, diam vitae lacinia lacinia, urna dolor tempus purus, ut tempus nisi nulla lacinia eros. Nunc congue commodo ornare. Morbi sed est sit amet mauris accumsan gravida. Integer eget justo eget ipsum egestas vulputate eu sed
mauris. Maecenas quis purus mi, ac volutpat massa. Ut a nunc purus. Curabitur fermentum odio et m etus dapibus eget comm odo sem m ollis. Nullam mollis nibh a lectus comm odo non rhoncus nunc gravida. Integer rutrum sem a turpis lacinia eget tempus orci convallis. Proin quis orci eget felis
porttitor dignissim.
Float a la derecha
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras laoreet, diam vitae lacinia lacinia, urna dolor tempus purus, ut tempus nisi nulla lacinia eros. Nunc congue commodo ornare. Morbi sed est sit amet mauris accumsan gravida. Integer eget justo
eget ipsum egestas vulputate eu sed mauris. Maecenas quis purus mi, ac volutpat massa. Ut a nunc purus. Curabitur fermentum odio et m etus dapibus eget comm odo sem m ollis. Nullam mollis nibh a lectus comm odo non rhoncus nunc gravida. Integer
rutrum sem a turpis lacinia eget tem pus orci convallis. Proin quis orci eget felis porttitor dignissim.
Una form a de comprender float es pensar que indica hacia dónde "flota" un elem ento entre los que le siguen. Si decimos que a la derecha, el elem ento 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 (la recuperaremos m ás adelante) pero deja tu retrato ahí.
6 .4 .2 - Ejercicio ( opcional) : float para tablas
Repite el ejercicio anterior pero ahora redefiniendo una tabla. Reutiliza la tabla de las películas más taquilleras y trata de describir su contenido en un párrafo.
En este ejemplo se ha fijado el ancho de la tabla al 50% , se le ha añadido un m argen de 1em y se le ha establecido la propiedad float a right. Adem ás se ha redefinido el párrafo para que se encuentre justificado.
La denominación "más taquilleras" se usa en este contexto indebidamente dado que taquillero se refiere al núm ero de entradas
vendidas y no a los millones de dólares recaudados. Si tuviéram os en cuenta sólo el número de entradas, nos daríamos cuenta de que
Avatar, por ejemplo, no es la película m ás taquillera de la historia. Este puesto queda reservado para Lo que el Viento Se Llevó
con 202 m illones de entradas vendidas.
Así, teniendo en cuenta sólo las entradas vendidas, nos encontramos con que el segundo puesto es para La Guerra de las Galaxias
y el tercero para Sonrisas y Lágrim as. La cuarta se la lleva E.T, el Extraterrestre y Titánic se encontraría en la sexta posición con
128 millones de entradas vendidas.
Cuando creas que estás familiarizado con la propiedad float, elimina la regla (de nuevo, la recuperarem os más adelante).
NOTA: Se te ha pedido que realices dos ejercicios y luego los borres. Sin embargo ahora sabes m anejar la propiedad float. El problema es
que no queremos que todas nuestras tablas e imágenes floten a un lado o a otro. Estaría bien poder definir esto por cada una de ellas y es lo que aprenderemos a hacer más adelante. Por eso te pedimos, por el momento, que las borres.
Como hem os dicho, para el control del borde contam os una categoría exclusiva del m ism o nombre: Borde.
De nuevo, se hace notar la existencia de casillas de verificación Igual para todo que nos permiten especificar de una vez el estilo de los cuatro lados de la caja.
Avatar (2009) $2,467,962,011
Titanic (1997) $1,835,300,000
The Dark Knight (2008) $1,001,921,825
Page 112 of 158
08/ 11/ 2010

style
Indica el tipo de línea para el borde. Los valores más comunes son dotted, dashed, solid, double, groove, ridge, inset, outset. Los distintos efectos pueden comprobarse a través de los siguientes ejemplos:
dotted: Estilo a puntos
dashed: Estilo a lineas
solid: Estilo sólido (linea continua)
double: Doble linea
groove: Borde 3D hundido
ridge: Borde 3D alzado
inset: Borde 3D que produce la ilusión de hundir el elemento
outset: Borde 3D que produce la ilusión de elevar el elemento
width
Es el grosor del borde. Se expresa en las mismas unidades que el tam año de texto que ya explicamos en la lección anterior.
color
Especifica el color del borde en forma de triplete hexadecimal como llevamos viendo hasta ahora.
6 .4 .3 - Ejercicio guiado: efecto polaroid
Modifica la página de pruebas.html con im ágenes y crea una nueva regla para la etiqueta img. Luego deja las categorías cuadro y borde como se m uestra en las siguientes figuras:
Page 113 of 158
08/ 11/ 2010

Configuración de la categoría Fondo
Configuración de la categoría Cuadro
Page 114 of 158
08/ 11/ 2010

Configuración de la categoría Borde
Prueba tu página y observa cóm o ha cambiado el aspecto de las fotos, presta especial atención a los siguientes aspectos:
 Fíjate como al indicar un alto automático y especificar un ancho fijo, todas las fotografías m iden lo mismo en ancho y han ajustado sus alturas automáticamente para no deformarse
 Presta atención a la presencia de espacio libre entre la foto y el borde, esto es el padding
 Prueba a modificar la categoría fondo para incluir un color de fondo como el # EEE y así pulir el efecto. Verás como el hueco del que hablábam os antes se vuelve de este color
 Fíjate como el borde inferior es más ancho que el resto debido a que desm arcam os la casilla de verificación Igual para todo
 Observa cómo no hay espacio de separación entre foto y foto debido a que hemos dejado los campos referidos al m argin en blanco
Ahora establece un valor de 0.5em para la propiedad margin en la categoría Cuadro para separar la imágenes entre sí (observa que al dejar 0.5em a cada lado, conseguimos que la separación sea del doble, es decir, de 1em).
Las lim itaciones de los elem entos HTML
Antes de pasar a la siguiente lección vamos a hacer incapié sobre algunas limitaciones de HTML. Supongam os que tenem os 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
Page 115 of 158
08/ 11/ 2010

Living for today
Imagine there's no countries
It isn't hard to do
Nothing to kill or die for
And no religion too
Living life in peace
Se trata de las dos primeras estrofas de la canción Im agine de John Lennon y, para resaltar que son estrofas, nos gustaría verlas centradas y con otra tipografía. Podemos abordar el problema redefiniendo el elem ento párrafo pero esto afectaría a todos los párrafos del documento. Si contáram os con el
elemento HTML "estrofa de canción", bastaría con redefinir tal elemento, pero lam entablemente este tipo de elemento no existe. ¿Cual es la solución entonces? Veremos la respuesta a esta pregunta en la siguiente lección.
6 .4 .4 - Ejercicio: sincronizando el servidor rem oto
La página web ya empieza a ser interesante y nos conviene sincronizar el servidor remoto. Quizá debido a los muchos nuevos cambios, la sincronización tarde un poco m ás de lo normal, pero no te preocupes. Sincroniza tu servidor remoto ahora.
7 . Lección 7 : I ntroducción a CSS2 - I I
Lección 7 : I ntroducción a CSS2 - 2 ª parte
Planteam iento
Requisitos previos
 Comprensión de la estructura de un docum ento HTML (Lecciones 1, 4, 5 y 6)
 Conocim iento y dominio de los elem entos HTML más comunes (Lecciones 4 y 5)
 Saber redefinir elementos HTML (Lección 6)
 Enseñar 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. CSS para tablas
2. Clases, pseudo-clases, identificadores y composiciones
3. Posicionamiento
4. Detalles del sitio web
Duración estim ada
Continuando con nuevos conceptos pero fundamentados principalmente en el tema anterior, la Lección no debería tomas m ás de 4 ó 5 sesiones de 2 a 3 horas.
7 .1 . Sección 7 .1 - CSS para tablas
Sección 7 .1 - CSS para tablas
La estructura HTML de la tabla
Como vim os en la Lección 6, conocer la estructura HTML de un documento es, cuanto m enos, útil para redefinir elementos con CSS. A lo largo de la Lección 7 comprobaremos cómo no sólo resulta útil sino que, además, es esencial. Sin embargo, con Dreamweaver, en vez de tener que echar un vistazo al
código para determ inar la estructura de la web, hacem os uso del explorador de jerarquía, herram ienta 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 jerarquía y de la siguiente figura de referencia.
Page 116 of 158
08/ 11/ 2010

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á form ada por un conjunto de filas (elem entos tr del Inglés Table Row o en Español, Fila de la Tabla), y cada fila puede contener varias celdas de tipo cabecera (elem entos th del Inglés Table Header o en Español, Cabecera de la Tabla), o de tipo
datos (elementos td del Inglés, Table Data o Datos de la Tabla).
7 .1 .1 - Ejercicio: la estructura de la tabla
Abre la página de pruebas.html y añade una tabla (si no hay una ya) como se explicó en la Sección 5.3. Haz clic en una celda de datos y en una de cabecera y comprueba por ti m ism o que la estructura de la tabla coincide con el esquema ayudándote del explorador de jerarquía.
Form ato de la tabla
Dar formato a una tabla consiste básicam ente en redefinir tres elementos: la tabla en sí, las cabeceras y las celdas de datos. Veremos algunas configuraciones comunes a través de ejem plos. Pruébalos sobre la tabla de pruebas.html.
7 .1 .2 - Ejercicio guiado: diseño básico de la tabla
Conviene esbozar un esquema de cómo querem os que se visualicen las tablas. Para comenzar haremos que las tablas se visualicen con el siguiente estilo:
Primero debemos fijar algunos detalles de la tabla en sí. Observa por ejemplo cómo no hay separación entre celdas por lo que debes establecer la propiedad HTML Esp. Celda a 0. Conviene siempre, además, eliminar los valores de Borde y Rell. de Celda tal y como se muestra en la imagen (pulsa sobre ella
para verla más grande).
Redefine el elemento table para añadir un borde sólido, negro y de 1px de grosor.
Ejemplo de tabla con estilo básico
Cabecera 1 Cabecera 2 Cabecera 3
datos datos datos
datos datos datos
Page 117 of 158
08/ 11/ 2010

Acepta el diálogo y redefine ahora el elemento th para decidir el estilo de las cabecera. Especificaremos negrita para la fuente y subrayado.
Establece también sus propiedades de borde usando la mism a configuración que empleaste para la tabla: borde de 1px, sólido y negro.
Acepta el diálogo y, por último, redefine el elemento td para decidir el estilo de las celdas de datos. De nuevo, aplica la configuración de borde anterior.
Cuando hayas terminado, acepta el último diálogo y observa el resultado con el explorador: debería ser m uy sim ilar (salvo el color del texto) al que usamos com o referencia.
Existen dos propiedades CSS que tienen que ver con las tablas pero que Dreamweaver no m uestra en ninguna categoría del diálogo de definición de regla. Estas propiedades perm iten controlar el espacio entre celdas sin tener que recurrir a las propiedades HTML de cada tabla.
Dado que no se encuentran en ninguna categoría, no las estudiaremos por el m omento pero al terminar la Sección 7.3 sabremos cómo incluir propiedades CSS que no se encuentran en el diálogo de definición de estilo.
7 .1 .3 - Ejercicio: estilo de la tabla
Haz que la tabla tenga el siguiente estilo de referencia. Los colores no tienen por qué coincidir exactamente.
Ejemplo de tabla con estilo avanzado
Cabecera 1 Cabecera 2 Cabecera 3
datos datos datos
Page 118 of 158
08/ 11/ 2010

Esta vez, no anules la propiedad Esp de celda sino, sencillamente, déjala vacía.
7 .2 . Sección 7 .2 - Clases, identificadores y com posiciones
Sección 7 .2 - Clases, identificadores y com posiciones
Selectores
Para poder abordar este tema es necesario tener m uy claros los conceptos aprendidos en la lección anterior luego si tienes dudas, repásalos de nuevo.
Observa el panel Estilos CSS mientras editas la página de pruebas.
Cada nom bre de regla es un selector. Los selectores reciben este nombre porque indican sobre qué elem entos se aplicarán las propiedades de la regla (que puedes ver en la región Propiedades del panel). En la figura, el selector de párrafo p tiene dos propiedades que hacen referencia a la indentación
de la primera línea y al alineamiento del texto y estas propiedades se aplicarán, según indica el selector, a "todos los elementos de HTML de tipo párrafo". Hasta ahora sólo hemos conocido selectores del tipo etiqueta HTML pero como veremos en breve, hay más.
Clases
Otro de los tipos de selectores, llam ado selector de clase, resulta extrem adamente útil y ya hemos visto una aplicación del mismo cuando explicam os cómo colorear texto en la lección 4.3. El selector de clase puede interpretarse como la selección de "los elementos cuya clase sea [ el nombre de la clase] ".
Gracias a las clases, podemos tom ar elem entos HTML y clasificarlos en distintos grupos perm itiéndonos 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 sólo estudiaremos la última opción.
Además, las clases nos ofrecen un m ecanismo para crear elementos personalizados como veremos en el siguiente ejercicio guiado.
NOTA: Para aquellos usuarios fam iliarizados con programas de m aquetación o con el uso avanzado de procesadores de texto, las clases se comportan de una manera m uy sim ilar a los estilos.
7 .2 .1 - Ejercicio guiado: clase estrofa para párrafos
Copia y pega en pruebas.htm l las dos primeras estrofas de la canción Im agine que veíam os al término de la Lección anterior:
No hell below us
Above us only sky
Living for today
It isn't hard to do
datos datos datos
Page 119 of 158
08/ 11/ 2010

And no religion too
El elemento HTML para representar una estrofa no existe pero podemos crear una clase estrofa y aplicársela a los párrafos que contengan estrofas. Así podrem os decidir cómo debe representarse el texto de una canción.
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 opción en la lista desplegable Tipo de selector. Por supuesto, tam bién debes indicar el nombre, que hemos acordado que sería estrofa tal y como se
muestra en la figura.
Bajo del nombre del selector encontrarás una explicación 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 com o se indica en las figuras:
Propiedades de la categoría Tipo para la clase estrofa
Page 120 of 158
08/ 11/ 2010

Propiedades de la categoría Bloque para la clase estrofa. Observa como establecemos la propiedad text-indent a 0. Esto es así porque el párrafo, por ser párrafo, ya tiene una sangría de 5ex y esta propiedad sería heredada si no la establecemos a algún valor concreto. De aquí viene la palabra cascade del
acrónimo CSS: de la capacidad para heredar las propiedades.
Cuando hayas terminado pulsa Aceptar y fíjate en el panel Estilos CSS de Dreamweaver. Descubrirás que la nueva regla tiene por nom bre .estrofa, es decir, el nom bre que le habías 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 diálogo con las categorías, exactamente como hemos hecho hasta ahora.
NOTA: Los nombres de las clases, com o los de los identificadores deberían cumplir las siguientes reglas:
 Sólo pueden contener caracteres del alfabeto ingles (esto es, ni caracteres acentuados, ni eñes), guiones bajos y números
 No se permiten espacios, utiliza guiones bajos o separa las palabras con mayúsculas como en "m enu_lateral" o "m enuLateral"
 No pueden empezar por un número
 Se distingue entre mayúsculas y minúsculas luego, por ejemplo, las clases "noticia", "NoTiCiA" y "NOTICIA" son distintos
 Esta vez, sí pueden repetirse cuantas veces se desee dentro del docum ento. Dado que muchos elementos pueden pertenecer al mismo conjunto clase
De nuevo, Dream weaver no te avisará de que exista un error si no cum ples estas normas, así que presta atención.
Ahora debes indicar que cada párrafo con las estrofas pertenece a clase estrofa. Para ello sitúa el cursor sobre uno los párrafos para mostrar sus propiedades HTML y cam bia su clase por estrofa.
Observa como el explorador de jerarquía indica que un elem ento pertenece a una clase añadiendo un punto y el nombre de la clase al nombre del elemento.
Page 121 of 158
08/ 11/ 2010

Comprueba los resultados en el navegador.
Desde un punto de vista semántico, las clases nos permiten expandir el significado de los elementos HTML. Ahora nuestros párrafos no son sólo "párrafos" sino "párrafos de la clase estrofa" o sencillamente "estrofas". Como nota, Dreamweaver sólo permite una clase por elem ento pero la mayoría de las
veces basta con ello. El resultado de aplicar la clase estrofa a la letra de la canción puede verse a continuación.
No hell below us
Above us only sky
Living for today
It isn't hard to do
And no religion too
7 .2 .2 - Ejercicio: clase polaroid
El efecto polaroid de las imágenes está m uy bien para la galería pero queda poco serio para una foto de CV. Adem ás, las restricciones en el tamaño destruyen los m apas de im agen que hemos creado ya que las áreas conservan su tam año m ientras que las im ágenes sobre las que se encuentran no.
Por ello conviene tener por ejemplo una clase polaroid para aplicar este efecto sólo a las imágenes que queram os que presenten el efecto.
Así, para empezar, elimina la regla que redefine las imágenes de tu sitio web.
Luego crea una nueva clase llam ada polaroid con la configuración del ejercicio 6.4.3 y haz que las sólo las fotos de galería y página de pruebas luzcan el efecto.
Crea otra clase llamada retrato que ajuste el alto de una imagen a 200px y establezca su propiedad float a right. Haz que la foto de tu retrato lleve esta clase.
Pseudo- clases
Las pseudo-clases son una forma avanzada de clases que seleccionan elementos sólo bajo ciertas condiciones. Vam os a ver cuatro tipo de pseudo-clases, todas parte de los hipervínculos, que son link, hover, visited y active. Junto con el elemento enlace, a, permiten seleccionar los enlaces cuando aun no han
sido visitados, cuando el cursor se sitúa sobre ellos, cuando ya han sido visitados y cuando se encuentran activos (en el m omento preciso de pulsar) respectivam ente. La forma en la que definimos el selector de la regla será m uy similar a la redefinición de un elemento HTML como veíamos en las secciones 6.1
y 6.2 salvo que esta vez añadirem os manualmente dos puntos (": ") seguido del nom bre de la pseudo-clase que queramos definir.
7 .2 .3 - Ejercicio: estilo de los enlaces
Primero nos preocuparemos de dar un estilo base al hipervínculo por lo que haremos uso de la pseudo-clase link. Abre cualquiera de tus páginas web y crea un nuevo estilo dejando el diálogo com o en la figura. Fíjate en el valor del cuadro desplegable Tipo de selector que ahora será Compuesto (basado en la
selección):
Page 122 of 158
08/ 11/ 2010

Fija alguna propiedades, como el color y la decoración del texto:
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 práctica.
Haz clic en aceptar y prueba la página web.
Crea un nuevo estilo, ahora redefiniendo la pseudo-clase hover tal y como se indica en la figura. Ojo al valor del cuadro desplegable Tipo de selector.
Page 123 of 158
08/ 11/ 2010

NOTA: Por desgracia, Dream weaver no hace descripciones textuales cuando añadimos una pseudo-clase, así que tendrem os que imaginarla por nosotros mism os. La manera más sencilla es añadir a la primera frase de la descripción sin pseudo-clase la oración "con estado [ pseudo clase] ". Así, "a: hover" se
convertiría en "todos los elementos enlace con estado encima del enlace"
En esta ocasión, sus propiedades son:
Acepta el diálogo y prueba la página. Prueba a pasar por encima de los enlaces para ver cómo cambia el estilo del enlace.
7 .2 .4 - Ejercicio: com pleta 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 elevación (recuerda la propiedad border-style) y que en el mom ento de pulsar (pseudo-clase active) pasa a tener un efecto de hundimiento.
Luego configura el estilo de las psudo-clases de la manera que más te guste.
I dentificadores
En la Sección 6.1 hablamos de los identificadores o ID de los elementos div. Resulta que en HTML todo elem ento puede tener un identificador mientras este sea único dentro del documento. CSS2, por su parte, nos proporciona un tipo de selector para seleccionar el elem ento con identificador igual
al que especifiquem os.
Page 124 of 158
08/ 11/ 2010

7 .2 .5 - Ejercicio guiado: form ato del pie de página
Abre la página datos.html. Comprueba que el último div tiene el identificador "pie_de_pagina" y crea una nueva regla CSS. Esta vez elige ID (sólo es aplicable a un elemento HTML) como opción para Tipo de selector. En nom bre del selector deberás especificar el identificador que quieres seleccionar:
"pie_de_pagina".
Ajusta las propiedades del estilo para que el fondo sea azul y el color de la tipografía blanco. Comprobarás que los enlaces pierden visibilidad pero arreglaremos esto en unos instantes.
Com posiciones
En estos mom entos conocemos todos los tipos de selectores que pueden utilizarse pero CSS2 nos permite aun m ás.
Las com posiciones nos permiten seleccionar elem entos teniendo en cuenta una jerarquía. Por ejemplo, gracias a las composiciones podem os seleccionar "los elementos im agen dentro de tablas" m ediante la composición table img. También podemos seleccionar "los enlaces del pie de página" mediante
la composición #pie_de_pagina a o también "el texto enfatizado dentro de las estrofas" como .estrofa em.
7 .2 .6 - Ejercicio guiado: enlaces en el pie de página
Debido al ejercicio anterior, los enlaces del pie de página no se visualizan claram ente. Vam os a cambiar el color de los enlaces pero sólo en el pié de página que es dónde tenemos problemas. El resto se quedarán como están. Para ello conviene que prim ero trates de expresar la selección en lenguaje natural:
"los enlaces sin visitar dentro del pié de página".
Hay dos formas ahora de crear la composición. La primera, a m ano, comienza por identificar los elementos dentro de la frase:
1. Hablamos de enlaces: elementos a
2. Y también del pie de página: identificador #pie_de_pagina
Ahora debem os tener en cuenta que el contenido se escribe a continuación del contenedor luego como hem os dicho que los enlaces estén dentro del pie de página, debemos escribir: #pie_de_pagina a.
NOTA: Conviene recordar tres reglas a la hora de escribir nombres de HTML:
1. Si el elemento es un identificador, el nombre va precedido del símbolo alm ohadilla (# )
2. Si el elemento es una clase, el nombre va precedido del sím bolo punto (.)
3. Si el elemento es un elemento HTML corriente, el nombre no va precedido de nada
De ahí que el pie de página se indique com o #pie_de_pagina
Crea una nueva regla CSS tal y como se indica en la figura y en Nom bre del selector introduce la frase que acabas de deducir. La descripción debería coincidir en gran medida con tu frase en lenguaje natural. Si es así, es que lo has hecho bien.
Page 125 of 158
08/ 11/ 2010

Elige un color para el texto que ofrezca un mejor contraste, como el #333.
7 .2 .7 - Ejercicio guiado: form a alternativa
Localiza la regla que acabas de crear en el panel de Estilos CSS y bórrala. Ahora haz clic sobre un enlace que esté dentro del pie de página y asegúrate de que en explorador de jerarquía que has seleccionado correctamente un enlace. Observa como el explorador de jerarquía indica que se encuentra dentro de
un párrafo p, en el interior del div pie_de_página que se encuentra en el interior del elem ento body.
Crea una nueva regla CSS de tipo compuesto y verás que Dreamweaver sugiere autom áticamente una composición.
Sobre esta configuración base puedes hacer las modificaciones que creas necesarias. Por ejemplo, quita el elemento párrafo dado que no nos interesa modificar sólo los enlaces dentro de párrafos 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: form ato de los div
Page 126 of 158
08/ 11/ 2010

Crea (o modifica) una regla para cada div (usando su identificador). Sigue las siguientes indicaciones:
Cabecera:
 Tendrá un alto de 150px y el fondo será un patrón repetido en x llamado fondo_titulo3.png que encontrarás entre los fondos descargados en la Sección 6.2
 El ancho será de exactamente de 800px (categoría Cuadro)
 Tendrá un relleno de 0 arriba y abajo y de 1em a los lados
 Tendrá un margen de 0 en cualquier lado
Menu:
 Tendrá un relleno de 1em en todos los lados
 El fondo de todos ellos será un patrón repetido (puedes usar http: / / bgpatterns.com/ o cualquiera de las herramientas proporcionadas para ayudarte). Cudia la com binación de colores, no queremos que moleste. Genera el patrón y guárdalo en la carpeta fondos.
Contenido:
 El color de fondo del contenido sea #fcedcf
Pie de página:
 El color de fondo del pie de página sea #36C
 El color del texto en el pie de página sea blanco
Modifica la regla CSS del cuerpo (etiqueta body) de la página de forma que:
 No exista ni relleno, ni margen alguno entre el borde (en este caso los límites de la página web) y el contenido (categoría Cuadro)
Crea otra regla combinada para que los párrafos del pié de página no tengan sangría y estén centrados.
Resum en de selectores
A continuación se ofrece una tabla resumen de los tipos de selectores que hemos estudiado. Las primera y segunda columnas muestran qué queremos afectar con el selector, las tercera y cuarta los valores que debemos establecer en el cuadro desplegable Tipo de selector y el cuadro de texto Nom bre del
selector respectivamente y la última columna es la representación CSS del selector.
7 .3 . Sección 7 .3 - Posicionam iento
Frase de
ejem plo
¿Qué
querem os
m odificar?
Tipo de selector Nom bre del selector Representación CSS
"Todos los
párrafos"
Elem ento
HTML
Etiqueta p p
"Las
estrofas"
Un conjunto
de
elem entos
Clase estrofa .estrofa
"El texto
enfatizado
de las
estrofas
del
contenido"
Una
jerarquía de
elem entos
Compuesto # contenido .estrofa em # contenido .estrofa em
"El menú"
Un elem ento
en concreto
ID m enu # menu
"Los
enlaces en
el
m omento
de pulsar"
Un elem ento
en un
determ inado
estado
Compuesto a: active a: active
Page 127 of 158
08/ 11/ 2010

Sección 7 .3 - Posicionam iento
Tipos de posicionam iento
Mediante CSS, podem os afectar al posicionamiento de los elementos de dos form as. La m ás sencilla es usar las propiedades float y clear para influir en el flujo de la página web. Vimos un ejemplo de posicionam iento mediante la alteración del flujo en la Sección 6.4 cuando usamos la propiedad float de
imágenes y tablas para hacer que el texto las rodeara.
A lo largo de esta lección perfeccionaremos nuestro diseño para que concuerde con la maqueta de la Sección 6.1 que se muestra en la figura.
Centrando el contenido m ediante un envoltorio
En diseño web, es común que el primer elemento sea un div y dentro de él, añadamos todos los demás. A este div se lo denom ina wrapper o envoltorio y sirve como contenedor de todos los demás.
El envoltorio tiene varias ventajas. A nivel de estructura, define un área de trabajo, es decir, representa el espacio máximo que ocupará nuestro diseño y nos permite trabajar con el diseño como si fuera un bloque. Desde el punto de vista del diseño, perm ite definir algunas reglas comunes a todo el diseño que
se aplicarán 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 diseño.
7 .3 .1 - Ejercicio guiado: centrando el contenido
La m ejor m anera de centrar el contenido es fijar su ancho e indicar que los m árgenes izquierdo y derecho sean autom áticos, 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 apreciaría el efecto de centrado.
Abre la página datos.html y utiliza el explorador de jerarquía para seleccionar el cuerpo entero. Ahora inserta un nuevo div que rodee todo el contenido y dale com o identificador el nombre envoltorio.
Usa el explorador de jerarquía para com probar que el envoltorio rodea efectivamente los cuatro divs.
Page 128 of 158
08/ 11/ 2010

Crea un nuevo estilo basado en el identificador envoltorio como aprendiste en la Sección 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 también, utiliza un valor de 800px.
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 acabam os de decir, un elemento tiende a ocupar todo el ancho de su elem ento contenedor. Por tanto, borra la propiedad width de todos
los divs.
Haz que el fondo del envoltorio sea del mismo color que el de contenido (el # FCEDCF).
7 .3 .2 - Ejercicio: envolviendo páginas w eb
Aplica la técnica del envoltorio a las páginas datos.html, curriculum.html y fotos.html.
Además, añade un borde gris claro, sólido 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 elem ento table de HTML) para que aparezcan centradas. Para ello, no podrás añadir elem entos nuevos al diseño, sólo modificar la hoja de estilos.
Cuando termines, sincroniza el servidor rem oto.
Colum nas laterales
Un diseño muy corriente en las página web actuales es contar con un espacio lateral dónde presentar el menú u opciones satélite. Para crear este efecto, primero debemos decidir el ancho de la columna y a continuación abrir hueco a la izquierda (o derecha) del contenido. Luego haremos que la columna
flote a la izquierda (o a la derecha) del contenido para que quede en el lado deseado.
7 .3 .4 - Ejercicio guiado: la colum na lateral
Abre cualquiera de las páginas datos.html, curriculum.html o fotos.htm l y edita la regla de diseño para el div menu.
Establece en la categoría 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 com o se indica en la figura.
Page 129 of 158
08/ 11/ 2010

Observa el resultado en el navegador. Algo está m al. ¿El qué?
Observa como el texto rodea al m enú. Esto no es lo que queríamos.
Lo que ocurre es que hemos situado el menú a la izquierda y el resto de contenido trata de rodearlo completam ente. Com o dijimos, falta abrir espacio a la izquierda del contenido. Conseguiremos esto estableciendo un m argen izquierdo para el div de contenido igual al ancho de la colum na.
Edita la regla asociada al identificador contenido y estableces sus propiedades CSS tal y como se muestra en la figura:
Page 130 of 158
08/ 11/ 2010

Ojo que el m argen izquierdo está en píxeles
Diseños líquidos frente a diseños rígidos
El diseño que acabamos de crear tiene se dice que es rígido porque ocupa un ancho fijo (800px en los ejercicios), independientemente de la resolución o el tamaño de pantalla. Los diseños líquidos trabajan con unidades relativas con el fin de ocupar siem pre la m ism a proporción del área útil de pantalla. Se
denominan líquidos porque hacen fluir sus elementos para adaptarse al área de la pantalla.
Ejem plos de diseños líquidos:
 http: / / es.wikipedia.com/
 https: / / www.bankinter.com/ www/ es-es/ cgi/ ebk+ hom e
 http: / / www.w3.org/
Ejem plos de diseños rígidos:
 http: / / portal.lacaixa.es/ home/ particulares_es.html
 http: / / www.apple.com / es/
 https: / / www.blogger.com/ start
El decantarse por un diseño rígido o uno líquido es ahora una cuestión de gustos. Durante los primeros años del diseño accesible, se recom endaban los diseños líquidos aludiendo que podían adaptarse a una m ayor variedad de dispositivos. No obstante, los diseños rígidos siempre han ofrecido un m ayor
control sobre el aspecto final del diseño.
Actualmente, los dispositivos cuentan con pantallas lo suficientemente amplias (o sistemas de zoom para los dispositivos m ás pequeños) como para que los diseños rígidos sean tan accesibles com o los líquidos.
7 .3 .5 - Ejercicio: de rígido a líquido
Convierte tu diseño rígido en líquido. Cambia la propiedad del ancho del envoltorio para que sea del 75% y observa los resultados en un navegador. Prueba a cambiar el tamaño del navegador desde lo más grande posible a lo más estrecho.
Con el ejercicio anterior habrás observado que el diseño se rompe al disminuir el ancho de la ventana bajo un cierto valor límite. Para evitar este problema vamos a establecer un ancho mínim o (en unidades absolutas). Podemos consultar las estadísticas sobre resoluciones de pantalla que nos proporciona la
w3.org para determinar el ancho mínimo.
Con las estadísticas delante observam os como actualm ente, el 76% de los usuarios usan resoluciones mayores a 1024x768 (expresado com o ancho x alto). Luego si establecem os nuestro ancho mínimo a 1024px estaremos cubriendo al 96% de los usuarios de Internet. Es conveniente no obstante, no utilizar
1024 px como ancho mínimo sino algo menos com o por ejemplo, 924.
7 .3 .6 - Ejercicio guiado: ancho m ínim o del diseño
Establecer el ancho m ínimo del diseño a 924px no es trivial porque Dreamweaver no nos ofrece visualm ente las propiedades CSS min-width y min-height que son las que controlan el mínimo ancho y alto respectivamente. Para añadirlas haremos uso del panel Estilos CSS tal y com o se indica a continuación.
Abre la página datos.html, selecciona la regla # envoltorio en el panel de Estilos CSS y localiza el enlace Añadir 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 m in-width. Haz clic sobre ella y establece su valor a 924px.
Page 131 of 158
08/ 11/ 2010

De nuevo, prueba el diseño en el explorador reduciendo el tamaño del mismo.
Con la aparición de la alta resolución y los monitores más y más grandes, surge un segundo problema relacionado esta vez con la accesibilidad y no con el diseño (aunque puede influir en él). El problem a reside en que, si la resolución es muy alta, el contenido puede quedar demasiado estirado. Es decir,
podemos obtener párrafos distribuidos en tan sólo un par de líneas muy, m uy largas. Este fenómeno dificulta la lectura y resulta bastante antiestético.
Para solucionarlo se puede recurrir a las propiedades max-width y max-height que establecen el ancho y alto máximos del diseño.
7 .3 .7 - Ejercicio: ancho m áxim o del diseño
De nuevo, Dream weaver no nos perm ite acceder directam ente a esta propiedad por lo que deberás usar el panel de Estilos CSS para añadir a la regla del envoltorio, la nueva propiedad max-width y establecerla a 1400px.
En la Sección 7 .2 dijimos que había propiedades CSS para controlar el espacio entre celdas y el relleno de las mismas. Estas son margin y padding respectivamente como es posible deducir viendo el dibujo del m odelo de caja. El problem a es que estableciendo margen entre celda y celda separam os los
bordes de cada una con lo que la tabla aparecerá formada por cuadrados independendientes en vez de por una reijilla. Para solucionar esto debemos establecer la propiedad border-collapse a collapse. Ahora que sabes cómo añadir propiedades que no aparecen en el diálogo de estilo CSS esto no debería
ser un problem a.
7 .4 . Sección 7 .4 - Detalles del sitio w eb
Sección 7 .4 - Detalles del sitio w eb
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 páginas maqueta.html y pruebas.htm l
Page 132 of 158
08/ 11/ 2010

Título del sitio w eb
Ahora nuestra maqueta está completa pero aun no hemos decidido un título para nuestro sitio web. Por norma general, el título debe de ir en el div de cabecera y tiene que ser un encabezado de nivel 1. Una vez establecido el título, no deberíamos de encontrar ningún otro encabezado de nivel 1.
Además, no hay que olvidar fijar el título de la barra de título de cada página web que podemos obtener concatenando el título del sitio web con el de la sección que estamos visitando.
7 .3 .8 - Ejercicio: título de tu sitio w eb
Dentro del div cabecera incluye un encabezado de nivel 1 con el título de tu sitio web, por ejem plo: Web personal de [ tu nom bre] .
Deberás cam biar adem ás 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í sucesivam ente.
Redefine todos los encabezados con reglas CSS para personalizar el aspecto de tu sitio web.
Establece adem ás los títulos de la barra de título de cada página web como se indica en la siguiente tabla (cambia el nombre del Dr Zoidberg por el tuyo):
Modificación de la estructura del sitio w eb
Nuestro sitio web ha cambiado mucho desde el comienzo del curso hasta ahora. Hemos reestructurado la información y, por ejemplo, ahora el contenido de la página índice se ha integrado con el contenido en la columna izquierda del diseño. Además, la información de contacto está siempre disponible en el
píe de página de cada web. Por tanto, algunos archivos han quedado obsoletos y podemos eliminarlos.
7 .3 .9 - Ejercicio guiado: elim inando archivos innecesarios
Elim ina las páginas index.html y contacto.html. Ve al explorador de archivos para ello, seleccionalas y pulsa suprim ir.
Al borrar una página web enlazada por otras, aparecerá un aviso com o este:
El diálogo indica que cuatro archivos continenen vínculos las páginas que estás borrando. Observa el nombre de los archivos y acepta el diálogo sin m ás.
De nuevo desde el explorador de archivos, cambia el nom bre de datos.html a index.htm l. Aparecerá un diálogo que te preguntará si quieres actualizar los vínculos para que sigan apuntando a esa página pese a haber cambiado de nombre. Haz clic sobre Actualizar para evitar que los vínculos se rom pan.
NOTA: Se dice que un vínculo está roto cuando no se puede disponer del contenido al que nos lleva.
Página Título de la barra de título
datos.html Web personal del Dr Zoidberg - Datos personales
curriculum.html Web personal del Dr Zoidberg - Currículum online
fotos.htm l Web personal del Dr Zoidberg - Galería de fotos
Page 133 of 158
08/ 11/ 2010

El verificador de vínculos
El verificador de vínculos es una potente herramienta que nos permite reconocer aquello vínculos de una página que están rotos.
Para ello debem os abrir el documento que queremos verificar y seleccionar el panel Verificador de vínculos de entre las pestañas del panel de utilidades. Situado debajo del de propiedades.
7 .3 .1 0 - Ejercicio guiado: el verificador de vínculos
Abre la página index.html. Asegúrate de que el panel del Verificador de vínculos se encuentra configurado como indica la figura anterior y haz clic en el triángulo verde situado a la izquierda del panel. Se m ostrarán tres opciones con títulos poco afortunados: la primera busca vínculos en el documento actual,
la segunda en todo el sitio web y la tercera en las páginas seleccionadas en el explorador de archivos. Elige la segunda opción, Buscar sitio local actual completo en vínculos.
Se m ostrará un resumen con los vínculos rotos de la página. La prim era colum na m uestra el archivo que contiene el vínculo roto y la segunda el vínculo en sí.
Puedes hacer doble clic en un elemento para seleccionar el enlace en la vista de diseño.
7 .3 .1 1 - Ejercicio: enlaces rotos
Realiza una verificación de vínculos y elimina los enlaces rotos de cada página si los hubiera.
Sincronización y prueba
7 .3 .1 2 - Ejercicio: sincronización y envío
Sincroniza el servidor remoto y accede a tu sitio web desde Internet.
Ten en cuentala configuración siguiente a la hora de sincronizar.
Page 134 of 158
08/ 11/ 2010

Esta configuración sincronizará todo el sitio web y elim inará los contenidos del servidor que no se encuentren en nuestra configuración local.
Has concluído la Lección 7, que, junto con la 6, constituyen el estudio del lenguaje CSS. Ahora debes com primir en un ZIP todos los archivos de tu sitio web y enviar el comprim ido a tu tutor para que sea corregido. Utiliza el ejercicio identificado como Lección 7 de la herramienta Entrega de ejercicios.
8 . Lección 8 : Form ularios
Lección 8 : Form ularios
Planteam iento
Requisitos previos
 Conocim iento de tablas y diseño con divs (Lecciones 5 y 6)
 Conocim ientos básicos sobre estilos CSS
 Concienciar al alumno sobre la importancia de los form ularios
 Familiarizar al alumno con la creación de form ularios
 Presentar las disposiciones más corrientes para form ularios
Secciones
1. El formulario web
2. Los elementos del form ulario web
3. Distribución en párrafos
Duración estim ada
Nos tom amos un descanso con CSS y volvemos a HTML am pliando los conocimientos de las lecciones 5 y 6. Este tem a es fácil y supondrá como mucho un par de sesiones de 1 a 2 horas.
8 .1 . Sección 8 .1 - El form ulario w eb
Sección 8 .1 - El form ulario w eb
Com unicación con el usuario
Internet y las páginas web no sólo explotan sus recursos para comunicar información, la Web 2.0, la Internet social, es un claro ejemplo de la interacción entre m illones de usuarios a través de plataformas web. Para lograrlo, el usuario debe tener la capacidad de interactuar con las páginas web, de comunicar
su propia inform ación a Internet.
HTML permite la interacción por el usuario por medio de los llamados form ularios. En la jerga del diseño de páginas web, un formulario es un espacio de la página preparado para la recibir información por parte del usuario y enviarla al sitio web para su posterior tratamiento.
Puedes ver un form ulario muy sencillo en la página principal de Google.
Page 135 of 158
08/ 11/ 2010

Observa el cam po de búsqueda, los dos botones "Buscar con Google" y "Voy a tener suerte" y las opciones mutuamente exclusivas "la Web", "páginas en español" y "páginas de España"
Page 136 of 158
08/ 11/ 2010

El panel de publicación de noticias de Wordpress reúne muchos form ularios. Uno de búsqueda situado encima del todo, otro de edición de la noticia situado en el centro; dos m ás 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 sesión, publicación de noticias, cuadros de búsqueda, reservas de vuelos y hoteles, foros...
Page 137 of 158
08/ 11/ 2010

Dos formularios de Facebook. El primero situado en horizontal en la banda superior sirve para iniciar sesión 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 programación de un sitio web cuando deseamos algo más que comunicar información estática. Incluso en este ámbito, resultan útiles por ofrecer búsquedas, réplicas y comentarios, contacto directo, etc.
Page 138 of 158
08/ 11/ 2010

La ayuda del lenguaje de programación Python, aunque sea un mero manual de referencia, incluye un formulario de búsqueda para que nos sea m ás fácil localizar la información deseada
Form ularios en este curso
Así como el diseño web se encarga de presentar la información del sitio web al usuario, la program ación w eb se encarga del com portam iento del sitio. La programación web dicta cómo debe responder la página a las interacciones del usuario y procesa la información que sum inistra el mismo a través de los
formularios.
La programación web queda fuera del alcance de este curso por lo que el tratam iento de formularios, es decir, la respuesta por parte de nuestro sitio web a las interacciones del usuario, será nula.
Page 139 of 158
08/ 11/ 2010

No obstante aun podemos usar los formularios para crear plantillas de correo electrónico, como si se tratara de una especie de encuesta que luego se dirigirá a nuestra cuenta de correo. Sin embargo, el envío del correo electrónico no es automático y el usuario deberá tener un cliente de correo electrónico
(com o Outlook o Thunderbird) correctamente configurado para que funcione.
Además, conviene conocer los distintos tipos de elementos HTML que permiten al usuario interactuar con la página y cómo ha de configurarse una sección de la mism a para permitir la comunicación entre el usuario y el sitio web; puesto que es precisamente tarea del diseñador integrar el formulario en el
diseño de la página.
El form ulario w eb
Dream weaver nos ofrece una forma muy sencilla de incluir un form ulario en nuestra página web. La herram ienta Form ulario está situada en el panel lateral Insertar, categoría Formularios.
La herramienta Formulario, , introduce un elemento form. Este elemento se comporta como una suerte de div. Com o él, puede tener un identificador o una clase y, en definitiva, puede contener cualquier elemento de HTML. Al usar la herramienta formulario, Dreamweaver señalará el
formulario como un rectángulo rojo.
Haz clic para am pliar la imagen y distinguir el rectángulo rojo que señala el formulario
8 .1 .1 - Ejercicio guiado: preparando la página de encuesta
Ve a tu sitio web en el explorador de archivos y crea un nuevo documento HTML llam ados encuestas.html. Adjunta la hoja de estilo CSS.
Utiliza el panel diseño para añadir el div envoltorio (borra el contenido por defecto) y luego, dentro de él, añadir cada uno de los cuatro divs que form an nuestro diseño: cabecera, m enu, contenido y pie_de_pagina. Utiliza la siguiente configuración para introducir cada uno de los elem entos div (cam bia la
etiqueta convenientemente).
Page 140 of 158
08/ 11/ 2010

Abre index.html, añade la página de encuestas al menú y copia en encuesta.html el contenido del encabezado, del nuevo menú y del pie de página (no olvides actualizar el menu de la página de curriculum y de la galería). A continuación utiliza un encabezado de nivel 2 en el contenido para rotular la página
web como cuestionario de opinión. Ajusta convenientemente el título de la barra de título de la página.
Por último introduce el siguiente párrafo como contenido:
Por favor, responda al siguiente cuestionario sobre el diseño de la página y haga clic en enviar para hacerme llegar un mail con su opinión. En cualquier mom ento, haga clic en reiniciar para devolver los distintos campos a sus valores por defecto.
Sitúate al final del párrafo e inserta un formulario con la herram ienta Formulario del panel Insertar, categoría Formularios.
Ayúdate del explorador de jerarquía para seleccionar el formulario y cambiar el identificador del form ulario por encuesta.
Haz clic dentro del formulario y com prueba si hay un párrafo en su interior. De no ser así, añade uno pulsando I ntro.
Además, utilizando CSS, redefine los párrafos que estén dentro de form ularios para que no tengan sangría en la primera línea y redefine el elem ento HTML label para que esté en negrita.
Hay que destacar dos propiedades HTMLde los form ularios:
method
Indica el método de envio. Puede tener dos valores: get, que adjunta el formulario a la dirección de destino en la form a campo=valor y que form aría la sección consulta de la URL de la que ya hablamos en la Sección 4.2 y post, que no adjunta nada a la URL enviando el form ulario de forma silenciosa. El
método post es m ás seguro y es el que usaremos nosotros.
action
Indica qué debe procesar la información enviada. Nosotros escribiremos mailto:direccion-e-mail para indicar que el form ulario debe ser enviado como un mail a la dirección 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 em ail convenientemente.
8 .2 . Sección 8 .2 - Los elem entos del form ulario w eb
Sección 8 .2 - Los elem entos del form ulario w eb
El diálogo de accesibilidad
Page 141 of 158
08/ 11/ 2010

Cuando queram os introducir case cualquier elemento de un form ulario, aparecerá el Diálogo de accesibilidad del elemento que es común para todos ellos.
El panel de accesibilidad permite indicar un nom bre descriptivo del nuevo elem ento en el cam po ID. En Etiqueta podemos especificar el nombre que se mostrará junto con el elem ento. Estilo permite elegir la form a en que la etiqueta acompañará al elemento. Para una mayor libertad en la distribución de los
elementos, se recom ienda usar la segunda opción Adjuntar etiqueta de título utilizando el atributo 'for'. El campo Posición indica si la etiqueta aparecerá antes o después del elemento y los campos Clave de acceso e Índice de fichas indican la tecla de acceso rápido y el orden de tabulación
respectivam ente.
El diálogo no es obligatorio por lo que podemos hacer clic tanto en Aceptar como en Cancelar e igualmente, habrem os añadido el elemento del formulario. No obstante es altam ente recomendable rellenarlo primero.
Cam pos de texto
Estando dentro de un form ulario podemos insertar muchos tipos de elemento. El prim ero que estudiarem os es el campo de texto, . En el campo de texto, el usuario puede escribir una palabra o una frase corta. Puedes ver un ejemplo a continuación:
Ejemplo de campo de texto, escribe aquí:
Observando su panel de propiedades HTML podem os destacar las siguientes propiedades.
Ancho car
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. m ax
El máximo número de caracteres que pueden introducirse en el campo de texto.
Tipo
Admite tres opciones: una línea, varias líneas y contraseña. La primera es el valor por defecto y no podemos utilizar la tecla I ntro para cambiar de línea. La segunda perm ite utilizar la tecla I ntro para cambiar de línea pero no la utilizarem os aquí. La última enmascara los caracteres para que no puedan ser
vistos como ocurre en el campo contraseña de multitud de form ularios.
Valor inicial
Permite escribir un valor inicial para el campo de texto.
8 .1 .3 - Ejercicio: cam pos de texto
En encuesta.html, dentro del formulario, añade un campo de texto para preguntar por alguna otra sección que el encuestado querría encontrar en la página. En la etiqueta puedes indicar algo como "¿Qué otra sección, aparte de las listadas en el menú, incluirías en la página?"
No olvides dar un nombre descriptivo al identificador rellenando convenientem ente el diálogo de accesibilidad.
Configura las opciones según la siguiente tabla:
Ancho car Car. m ax Tipo Valor inicial
Page 142 of 158
08/ 11/ 2010

Áreas de texto
El área de texto, , se parece al campo de texto en cuanto a que también perm ite introducir texto por parte del usuario pero esta vez el usuario podrá introducir varias líneas en vez de una sola.
Ejemplo de área de texto, escribe aquí:
Su panel de propiedades HTML es m uy 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.
Líneas num
El alto del campo de texto expresado en líneas de texto
Val. inicial
Permite escribir un valor inicial para el campo de texto.
8 .1 .4 - Ejercicio: áreas de texto
Añade un nuevo párrafo y un área de texto a encuesta.htm l para preguntar por la opinión general sobre la página web por parte del encuestado. Rellena convenientemente el diálogo de accesibilidad y configura las opciones HTML según la siguiente tabla:
Casillas de verificación
Las casillas de verificación representan un conjunto de respuestas posiblemente simultáneas a una pregunta. Es decir, m últiples opciones de las cuales podemos elegir m ás de una. La herram ienta Casilla de verificación, introduce un nuevo elem ento de este tipo. Puedes
ver un ejemplo a continuación:
¿Qué tengo que hacer hoy?
Ir a la piscina
Ir al gimnasio
Estudiar
NOTA: Fíjate como en el diálogo de accesibilidad, la situación por defecto de la etiqueta es Tras el elem ento de form ulario
Su panel de propiedades, muy sencillo, encierra solamente tres propiedades importantes.
Nombre de casilla
Esta casilla está presente en la m ayor parte de los elementos y representa el nom bre del mism o. Sin embargo, en las casillas de verificación tiene un significado especial porque nos permite agruparlas. Todas las respuestas a una misma pregunta deben tener el mism o nombre en nom bre de casilla.
Valor activado
20 20 Una línea [ vacío]
Ancho car Líneas num Valor inicial
100 10 [ vacío]
Page 143 of 158
08/ 11/ 2010

Es el valor que se enviará cuando esté activado. Por ejemplo, en el ejem plo de esta m isma sección, el valor activado podría establecerse a sí para indicar que sí estoy aprendiendo con este curso cuando activo la casilla de verificación. Se trata de una forma de resum ir 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 verificación (y posteriormente botón de opción) usa el explorador de jerarquía o haz clic sobre el cuadrado (en el caso del botón de opción, el círculo) que representa el elemento, no sobre su etiqueta.
8 .1 .5 - Ejercicio: casillas de verificación
Continua editando encuesta.html En el form ulario, añade un párrafo nuevo con el texto Marque las secciones que le resultan útiles. Luego inserta nuevos párrafos para las siguientes casillas de verificación.
NOTA: Puedes introducir saltos de línea en vez de nuevos párrafos para las distintas casillas de verificación. Recuerda que para introducir un salto de línea deberás pulsar la combinación shift+ I ntro en vez de solamente Intro. Cuando insertes un salto de línea detrás de una casilla de verificación
Dream weaver no mostrará un nuevo espacio para él pero puedes escribir para comprobar que efectivamente lo has insertado.
8 .1 .6 - Ejercicio guiado: grupos de casillas de verificación
Una form a rápida de introducir casillas de verificación es usar la herramienta Grupo de casillas de verificación, . Se trata de una forma rápida de añadir un conjunto de casillas.
La herramienta despliega un diálogo como el de la figura:
En el campo Nombre es el equivalente a Nombre de casilla y será común a todas ellas. La lista Casillas de verificación nos permite añadir casillas. Cada casilla tiene un campo Label con la etiqueta y otro Value equivalente a la propiedad Valor activado.
Los botones con un más y un menos nos perm iten añadir nuevas casillas y eliminar otras y los que tienen una flecha arriba y otra abajo, ordenar las casillas.
La disposición por defecto es Saltos de línea (etiquetas < br> ) y es la más recomendada.
Cabe advertir que si querem os editar el grupo después de aceptar el diálogo, tendremos que hacerlo manualmente. Por ejemplo para decidir qué casillas de verificación están activas.
Botones de opción
Los botones de opción también se usan para expresar decisiones, esta vez con varias opciones como respuesta. Cada respuesta está representa por un botón de opción distinto y las respuestas deben com partir el nom bre para ser consideradas com o opciones de la m ism a pregunta. Estos botones
también se denom inan botones de radio.
La heram ienta Botón de opción, , introduce un nuevo elemento de este tipo. Puedes ver un ejemplo a continuación:
¿Cuánto te gusta este curso?
Mucho, creo que es muy com pleto y fácil de entender
Regular, es algo complicado
Poco, no estoy aprendiendo nada
NOTA: De nuevo, fíjate como en el diálogo de accesibilidad, la situación 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 verificación
Etiqueta Valor activado Estado inicial
La página principal con los datos personales datos Desactivado
La página con el currículum curriculum Desactivado
La página con la galería de im ágenes fotos Desactivado
Page 144 of 158
08/ 11/ 2010

Botón de opción
Al igual que la propiedad nombre de casilla de las casillas de verificación, esta propiedad en los botones de opción nos permite agruparlos. Todas las opciones a una misma pregunta deben tener el mismo nom bre en botón de opción.
Valor activado
Como en las casillas de verificación, expresa qué significa seleccionar esta opción.
Estado inicial
Indica si el elemento debe aparecer activado o desactivado por defecto. Recuerda que sólo un botón de opción del mismo grupo puede estar activado en un momento dado.
8 .1 .7 - Ejercicio: botones de opción
Como hiciste con las casillas de verificación, continua editando encuesta.html. En el formulario, añade un párrafo nuevo con el texto Valore el diseño de esta página. Luego inserta nuevos párrafos (o saltos de línea) para los siguientes botones de opción:
8 .1 .8 - Ejercicio guiado: grupos de botones de opción
Del m ismo m odo que ocurría con las casillas de verificación, una form a rápida de introducir botones de opción es usar la herramienta Grupo de opción, .
La herramienta despliega un diálogo como el de la figura, idéntico al del Ejercicio 8.1.6:
De nuevo advierte que si quieres editar el grupo después de aceptar el diálogo, tendrás que hacerlo manualmente. Por ejemplo para decidir qué botón de opción es el activado por defecto.
Listas / Menús
Los menús o las listas son formas de dar a elegir entre opciones previamente conocidas cuando estas son muchas (por ejemplo, un listado de países, provincias o trabajos). Los menús permiten concentrar todas las opciones en poco espacio.
La herramienta Lista/ Menú, , añade un nuevo elemento menú pero podemos convertirlo fácilmente en un elemento lista por medio del panel de propiedades:
Provincia de nacimiento (en form a de menú)
Provincias visitadas (en forma de lista)
El panel de propiedades HTML de un m enú (o lista) está formado por los siguientes campos:
I D Etiqueta Valor activado Estado inicial
valoracion Me gusta mucho bueno Desactivado
valoracion No me llama especialmente la atención regular Activado
valoracion No me gusta pobre Desactivado
Diálogo de creación de grupos de casillas de verificación
Álava
Álava
Albacete
Alicante
Almería
Asturias
Page 145 of 158
08/ 11/ 2010

Tipo
Las opciones son Menú y Lista. Como puedes ver en el ejemplo, el menú deja ver solam ente una opción y despliega el resto al hacer clic sobre él. Por el contrario, la lista ofrece m ás de una opción y perm ite selecciones múltiples.
Alto
Sólo para las listas, especifica el número de respuestas visibles, cada una, en una línea.
Permitir m últiples
Sólo para las listas, indica si podemos elegir m ás de una opción. El usuario puede hacer clic en otras opciones mientras mantiene presionada la tecla ctrl para realizar una selección múltiple. Si desea deseleccionar una opción sin perder las dem ás bastará con que vuelva a hacer clic en la opción
m anteniendo pulsada la tecla ctrl.
Seleccionada inicialmente
Muestra cuál de las opciones se encuentra seleccionada por defecto.
Valores de lista
Este botón abre un diálogo donde podem os añadir las opciones.
Para añadir opciones al menú/ lista, haremos clic en el botón del panel de propiedades Valores de Lista que desplegará el siguiente diálogo.
Los botones etiquetados con un m ás y un m enos permiten añadir nuevas opciones a la lista y elim inarlas. Para eliminar una opción basta seleccionarla y hacer clic en el botón 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 envíe (por e-m ail en nuestro caso) al destino del form ulario.
En el ejemplo las etiquetas y los valores son iguales pero podría no ser así: imagina que necesitamos saber el país de un usuario porque necesitamos el código telefónico del mismo. En vez de pedir al usuario el prefijo telefónico podríamos pedir que seleccionara su país de residencia. En las etiquetas estarían
los nombres de los países y en los valores, los prefijos.
8 .1 .9 - Ejercicio: lista y m enú
Inserta un menú para que el encuestado seleccione su provincia de nacimiento (no es necesario que incluyas todas). Toma como referencia el ejemplo de m enú de esta sección.
Ahora añade una lista que permite selección múltiple preguntando por países que el usuario ha visitado (incluye 10 distintos, no es necesario que elabores una lista de todos los países del m undo). Ajusta el alto de la lista para que muestre al m enos 4 paises ya que si lo dejas en uno no servirá para nada.
Botones
En la mayoría de form ularios necesitamos un botón para aceptar la información introducida y enviarla. Esto se consigue mediante la herram ienta Botón, .
Escribe tu nom bre
NOTA: Cuando añadas un botón, conviene no introducir una etiqueta lo que puedes conseguir seleccionando No hay etiqueta de rótulo para el campo Estilo.
Enviar Borrar
Page 146 of 158
08/ 11/ 2010

El panel de propiedades HTML de los botones es muy sencillo:
Valor
Es el rótulo del botón.
Acción
Indica el tipo de botón. Aunque mediante program ación podemos crear m uchos tipos de botón, nosotros nos limitaremos a dos tipos: Enviar formulario y Restablecer formulario. El primero permite enviar el formulario al destino del m ismo y el segundo establece todos los elem entos a sus valores por
defecto.
8 .1 .1 0 - Ejercicio: botones
Al final del form ulario de encuestas.html añade sendos botones para enviar y borrar el formulario.
NOTA: Los errores m ás títpicos creando formularios son om itir la propiedad Acción del form ulario, insertar varios formularios, uno por elem ento (esto no debe ser así, todos los elementos relacionados con un form ulario deben estar dentro del mismo y único form ulario) y olvidar añadir un botón de envío.
8 .1 .1 1 - Ejercicio: sincronizando el servidor rem oto
Enlaza la página encuestas.html en el menú de tu sitio web, sincroniza el servidor remoto y prueba el formulario desde Internet.
8 .3 . Sección 8 .3 - Distribución en párrafos
Sección 8 .3 - Distribución en párrafos
Título, com entario y cam po
Como habrás comprobado, disponer los elementos de un formulario resulta un poco confuso y complicado. En esta sección vam os a explicar una forma de ordenar los elem entos de un formulario basada en la idea título, comentario y campo.
El título formula una pregunta al usuario, pregunta que el mismo deberá responder en el campo. Por si el título no es lo suficientemente explicativo, se añade un pequeño párrafo de comentario con inform ación extra.
Un ejemplo de este modelo se presenta a continuación:
Page 147 of 158
08/ 11/ 2010

Provincias visitadas
Seleccione las provincias que haya visitado. Mantenga presionada la tecla control para realizar una selección múltiple.
Cosas que hacer hoy
Marque una o más cosas que tenga que hacer hoy
Ir a la facultad
Ir al trabajo
Hacer la compra
Disposición m ediante párrafos
La distribución anterior es un ejemplo de disposición en párrafos. En ella, cada campo está formado por tres párrafos: en el prim ero se sitúa el título, en el segundo el comentario y finalmente en el tercero, el campo en sí.
Observa como en el caso de las casillas de verificación, no disponemos cada opción en un párrafo distinto sino que, como ya aconsejam os en la Sección 8.1 introducimos saltos de línea (com binación shift+ intro) para distribuir las opciones en líneas distintas del mism o párrafo.
Como nos conviene que una etiqueta esté lo más cerca posible del campo al que representa, para campos de texto, listas (o menúes) y áreas de texto, el título será, adem ás de un párrafo, la propia etiqueta; mientras que en las casillas de verificación y los botones de opción el título será simplem ente
un párrafo y cada etiqueta acom pañará a su casilla o botón correspondiente.
8 .3 .1 - Ejercicio guiado: disposición m ediante párrafos del cam po de texto
Abre encuesta.htm l, borra el estilo label y crea dos nuevos estilos de clase (Sección 7.2) : comentario y titulo_campo. Haz que comentario m ida 0.9em, esté en cursiva y sea de color #06C. Haz también que título_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 sección...? y asegúrate de que su propiedad HTML form ato (Sección 4.1) se encuentra en Párrafo.
Selecciona el párrafo y cambia su clase a titulo_campo.
A continuación de este párrafo incluye uno nuevo con el siguiente texto:
Si crees que este sitio es incompleto, ayúdame a mejorarlo sugiriendo una sección que eches en falta.
NOTA: Si tienes dificultades para añadir un nuevo párrafo, selecciona en el explorador de jerarquía el párrafo del título y a continuación pulsa la tecla fin o end, en Inglés (situada sobre las flechas del teclado). Esto te llevará al final del párrafo. Ahora basta con pulsar intro.
De nuevo, cambia la clase del párrafo pero esta vez a comentario.
Corta y pega (si fuera necesario) el campo de texto en un nuevo párrafo tras el comentario.
Guarda la página y com prueba el resultado en el navegador.
8 .3 .2 - Ejercicio guiado: disposición m ediante párrafos de las casillas de verificación
Álava
Albacete
Alicante
Almería
Asturias
Page 148 of 158
08/ 11/ 2010

Continúa editando encuesta.html. Ahora ve al párrafo que comienza por Marque las secciones... y cam bia su clase a com entario.
Introduce un párrafo antes que el con el texto Secciones útiles y cam bia su clase a titulo_campo.
Guarda la página y com prueba el resultado en el navegador.
8 .3 .3 - Ejercicio: disposición m ediante párrafos del resto de elem entos del form ulario
Aplica la disposición mediante párrafos al resto de los elem entos 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 Dream weaver, utilizando sólo la vista de diseño, procura más inconvenientes que ventajas por lo que, aunque no explicaremos más, vamos al m enos a citarlas.
La distribución m ediante divs es m ás flexible aunque considerablem ente m ás com pleja 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 cam pos de texto, el prim ero flota a la izquierda, ocupa un ancho fijo y contiene el párrafo de título y el com entario. El párrafo tendrá alineación derecha. El segundo también 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 también tienen dos div pero ninguno de ellos flota.
La otra distribución es m ediante tablas y es más com pleja. La idea es prácticamente la misma que con divs pero utilizando la propia tabla com o envoltorio y sus celdas como los divs internos.
8 .3 .4 - Ejercicio: entrega el sitio w eb
Has concluído la Lección 8. Ahora debes com primir en un ZIP todos los archivos de tu sitio web y enviar el comprim ido a tu tutor para que sea corregido. Utiliza el ejercicio identificado como Lección 8 de la herramienta Entrega de ejercicios.
9 . Ejercicio final
Ejercicio final
9 .1 .1 Ejercicio: sitio w eb com pleto
Como ejercicio final del curso debes desarrollar un m icro sitio web simulando una revista online de coches llamada TodoMotor. En estos m omentos, TodoMotor se encuentra presentando el vehículo Tesla Road de Tesla Motors.
Ten en cuenta las siguientes indicaciones:
Consejo: procura anular el m argen y el relleno de cada elem ento antes de com enzar a realizar otros ajustes. Repasa el modelo de caja y ten muy presente cómo se calculan las m edidas de la caja (por ejem plo, ancho total = ancho + rellenos + m árgenes). Luego realiza los ajustes que sean necesarios.
Cuando decimos que un elem ento debe medir 100 píxeles de ancho nos referimos al total, contando los rellenos y márgenes.
Consejo: diseña la página inicial "teslaroadster.html" primero y luego usa el explorador de jerarquía para seleccionar todo el cuerpo y copiar y pegar el diseño en el resto de las páginas. Esto te ahorrará mucho tiempo. No olvides adjuntar la hoja de estilo en cada página.
Nota: no olvides los títulos de la barra de título.
Nota: no pasa nada si no queda exactamente igual que en las referencias.
1. Crea un nuevo sitio web llamado PracticaFinal. Configura el asistente para alojar tu sitio web en el servidor de Zobyhost.
2. Descarga el archivo con los recursos de imagen y descomprím elo en la carpeta donde crearás la práctica final.
3. Crea las páginas web teslaroad.html, fotostesla.html, detalles.html, encargo.html. Esto es m uy im portante: cuando crees la hoja de estilo CSS lllámala estilosTesla.css
4. Mediante divs y CSS, imita el siguiente diseño líquido que presentamos a continuación en todas las páginas:
Page 149 of 158
08/ 11/ 2010

5. Utiliza la técnica del envoltorio para limitar el área útil a un 90% , centrar el contenido y bordearlo a izquierda y derecha
6. El título tendrá un alto de 100px; el menú, un ancho de 250px y el pie de página, un alto de 50px
7. Utiliza CSS para dotar a la página web del siguiente aspecto general (encontrarás todo lo necesario en el archivo de recursos que has descargado).
Page 150 of 158
08/ 11/ 2010

8. Ten en cuenta que el fondo del cuerpo está fijo pero el del envoltorio, no. Ten en cuenta también el color de los enlaces en el menú y en el pié de página. Cuando se pase por encima de un enlace este tendrá que subrayarse.
9. Crea el contenido de la página teslaroadster.html a partir de la información de Wikipedia y cita las fuentas, es decir, di que has sacado el texto de Wikipedia y pon un enlace al artículo original. Utiliza el índice de Wikipedia para estructurar la página usando encabezados de distintos niveles y crea tu
propio índice (recuerda los enlaces "volver al índice").
Page 151 of 158
08/ 11/ 2010

Inserta la imágen justo antes de la lista índice y ajusta su "flotación" convenientemente mediante CSS
Page 152 of 158
08/ 11/ 2010

Al final se debe incluir un enlace al artículo original de Wikipedia
10. Abre fotostesla.html y añade las fotos de los recursos, crea un efecto polaroid para las imágenes y agrúpalas según sean exteriores, detalles interiores o en acción (hay 3 en cada categoría).
Page 153 of 158
08/ 11/ 2010

Personaliza el efecto polaroid como quieras, no hace falta que sea como el de la figura
11. Vuelve a la página teslaroadster.html y añade al final una nueva sección llam ada Eficiencia por tipo de vehículo (no olvides actualizar el índice y añadir el enlace "volver"). Dentro copia la tabla que aparece en la im agen. Debe ocupar el 70% del ancho del contenido:
Page 154 of 158
08/ 11/ 2010

12. Ve a la página detalles.htm l. En la carpeta detalles, de los recursos, encontrarás una foto llamada general.png. Añádela bajo el encabezado Detalles y crea un mapa de imagen para enlazar con cada foto detalle.
Page 155 of 158
08/ 11/ 2010

13. Abre la página encargo.html y crea un formulario de encargo de un Tesla Roadster. El método de envío será POST y la dirección de envío 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 dirección
3. Una lista para elegir el color: azul, rojo (por defecto), negro, blanco, gris
4. Casillas de verificación para el equipam iento: reproductor DVD, GPS, otra batería (activado por defecto), equipo de sonido Yamaha
5. Botones de opción para el modo de pago: tarjeta (activado por defecto), efectivo, PayPal
6. Un área de texto para comentarios
7. Un botón para borrar todo y otro para enviar
Page 156 of 158
08/ 11/ 2010

14. Sincroniza el servidor remoto con la siguiente configuración. A partir de ahora, no m arques la casilla de Eliminar archivos remotos no existentes en la unidad local.
Una vez que hayas terminado el sitio web, comprime todo en un ZIP y envía el comprimido a tu tutor para que sea corregido. Utiliza el ejercicio identificado com o Sitio w eb final de la herramienta Entrega de ejercicios.
¡Enhorabuena! Has terminado el curso de Diseño web con Dreamweaver. Es una amplia introducción a Dreamweaver, pero el tiempo no nos da para explicar todo lo que se puede hacer con el program a. 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 opinión es muy im portante para que podamos ir mejorando los cursos en cada siguiente edición. ¡Gracias!
Page 157 of 158
08/ 11/ 2010

Page 158 of 158
08/ 11/ 2010

Curso_de_Dreamweaver.pdf

Más contenido relacionado

Similar a Curso_de_Dreamweaver.pdf

Último

Curso_de_Dreamweaver.pdf