Lección 1: El lenguaje HTML y Dreamweaver CS4

Lección 1: El lenguaje HTML y Dreamweaver

CS4

Planteamiento 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. Dreamweaver CS4
3. Tendencias en el diseño web

Duración estimada

Esta lección es púramente teórica y sólo tienes que leerla, lo que no debería llevarte más tiempo 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 demasiado grandes para mostrarlas a su tamaño real. En esos casos podrás
pulsar sobre la imagen para verla en otra ventana (o pestaña) a su tamaño real.

Curso de Formación Informática de Dreamweaver

por Salvador de la Puente González está licenciado bajo
Creative Commons Reconocimiento 3.0 España License.

[Link] [Link]
Sección 1.1 - La página web: HTML+CSS

Sección 1.1 - La página web: 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, veremos dos de los
lenguajes más comunes para la creación de páginas web: HTML y CSS.

Antecedentes históricos
Internet

Internet no es una red, es la red de redes, un compendio de diversas redes conectadas entre sí. Internet en la
actualidad, tal y como la conocemos, no es más que la evolución natural de la interconexión de diversas redes
científicas, educativas y finalmente, comerciales. 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 Procesamiento 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 intercambio 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, muchas otras Instituciones Universitarias y de Investigación se unirían al proyecto haciendo evolucionar
ARPANET hacia CSNET, red que conectaba los departamentos de computadores de distintos órganos académicos.

En la década de los 80, muchas más entidades quisieron unirse a redes como 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 primeros proveedores de
servicios de Internet y comienza la conexión de las redes existentes en busca de fines comerciales. Por poner un
ejemplo, en 1989, NSFNET abandona su servicio de mensajería electrónica y se conecta con el servicio comercial
de correo electrónico MCI. Esta fecha es recordada por marcar el principio del Internet moderno.

La World Wide Web

Merece la pena aclarar que, hasta este momento, 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 mundo.
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 documentos 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 documento podía abrirse con un programa especial llamado 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

[Link] [Link]
Sección 1.1 - La página web: HTML+CSS

como lo hace una web actual. Uno de los primeros 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 permitir 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 comienzo 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, [Link].

En la actualidad, la World Wide Web es mucho más que un proyecto, es una realidad y se define como el
compendio 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 determinada tarea o signifiquen algo en especial. Veámoslo con un ejemplo,
consideremos 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 permite 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 marca 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ónimo 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 transformar informació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 elementos que residen en él.

Otro ejemplo 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>

[Link] [Link]
Sección 1.1 - La página web: HTML+CSS

</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="[Link] 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 misma:
es sencillo ver que tanto la cabecera <head> como el cuerpo <body> están "dentro de <html> pero al mismo 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
denomina anidamiento.

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 informació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, permite indicar cómo deben representarse los
elementos HTML de una página web. Por ejemplo, observa el siguiente fragmento 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 forma
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 administrado por
la [Link] de manera que, independientemente del navegador que usemos, todos podamos visualizar una misma
página web de la misma forma. Además, si no se especifica ninguna regla para un elemento, se le aplica un estilo
por defecto, especificado también como parte del estándar de la [Link]

[Link] [Link]
Sección 1.1 - La página web: HTML+CSS

NOTA: No obstante, hasta hace bien poco, algunos navegadores como Internet Explorer (versiones previas a la 7) no
seguían las recomendaciones de la [Link] por lo que la visualización de páginas web difería de la normal. Por este motivo,
para este curso utilizaremos los navegadores Firefox o Chrome, los cuales se ajustan muy bien a la normativa de la [Link]

Como estándares de la WWW, podemos encontrar más información sobre HTML y CSS en sus respectivas páginas
dentro de [Link].

Curso de Formación Informática de Dreamweaver

por Salvador de la Puente González está licenciado bajo
Creative Commons Reconocimiento 3.0 España License.

[Link] [Link]
Sección 1.2 - Dreamweaver CS4

Sección 1.2 - Dreamweaver CS4

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
marcado manual 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 (What You See Is What You Get, en Inglés) y entre ellos destacan dos:
Dreamweaver, de Macromedia, y Front Page, de Microsoft.

La principal diferencia entre Dreamweaver y Front Page surgía del hecho de que Front Page fue orientado a crear
páginas compatibles con el navegador de Microsoft, Internet Explorer, que no seguía muy bien las indicaciones
estándares de la [Link]. 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 limpio y sencillo de mantener por parte del
programador.

Guía rápida de Dreamweaver 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 comenzar

[Link] [Link]
Sección 1.2 - Dreamweaver CS4

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 menús

En su intento por maximizar el área de trabajo, Dreamweaver elimina la barra de título típica de los programas de
Windows. En su lugar ofrece directamente la barra de menú que mostramos a continuación junto con la descripción
de cada elemento y algunos de los atajos de teclado más comunes.

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 comandos para copiar, cortar y pegar texto. La última 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.

Insertar reune comandos para añadir distintos tipos de elementos al documento 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 modificar las propiedades de la página.

El menú Formato incluye opciones para aplicar los formatos HTML al texto así como añadir estilos y hojas de estilo
CSS.

Comandos se compone por un conjunto de herramientas y utilidades de interés tales como el corrector ortográfico,
un creador de álbumes de fotos, utilidades para mejorar el código HTML, etc.

[Link] [Link]
Sección 1.2 - Dreamweaver CS4

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 mismos. 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 manuales 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á principalmente 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
Dreamweaver directamente), 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
mandará todos los paneles al monitor secundario dejando el monitor principal sólo con el área de edición y los
menús.

El área de documentos

Una vez estamos editando un documento, nos encontramos con el área de documentos. El área de documentos
está dividida en cinco partes, de arriba a abajo: pestañas de archivos, documentos relacionados, modos de
visualización, área de edición y explorador de jerarquía.

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 cambios no guardados en algún
documento, el nombre del mismo aparece acompañado de un asterisco.

[Link] [Link]
Sección 1.2 - Dreamweaver CS4

Los documentos relacionados se muestran en forma de lista y son todos aquellos que tienen una relación de
pertenencia con el documento actual. Este área no muestra los documentos a los que enlaza el actual sino los que
incluye, como las hojas de estilo o el código javascript.

Los modos de visualización permiten 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 herramientas 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.

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 permitir 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 permite modificar los parámetros de las etiquetas HTML de forma sencilla y visual.

Debajo de este último encontramos algunos paneles de utilidad reunidos en una misma área y diferenciados por

[Link] [Link]
Sección 1.2 - Dreamweaver CS4

medio de pestañas. Entre ellos destacan la referencia, el verificador de vínculos y el visualizador de

informes.

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 último, el explorador de archivos.

[Link] [Link]
Sección 1.2 - Dreamweaver CS4

Insertar 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 Formulario.

El Explorador de CSS nos permite acceder a las reglas CSS y editarlas cómodamente.

En la parte inferior, el Explorador de archivos para visualizar los documentos de tu sitio web y poder
administrarlo.

Configuración de Dreamweaver
A lo largo del curso trabajaremos con HTML 4.01 estricto, que es la versión que la [Link] aconseja en estos
momentos y que citaremos brevemente en la próxima Sección.

[Link] [Link]
Sección 1.2 - Dreamweaver CS4

Vamos a configurar Dreamweaver para que use esta versión y de esta forma, cualquier nuevo documento que
creemos, lo escribamos con esta versión. Para ello haz clic sobre la opción preferencias... del menú Edición. Se
desplegará un cuadro de diálogo como este:

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

[Link] [Link]
Sección 1.2 - Dreamweaver CS4

NOTA: Cuando indiquemos un atajo de teclado utilizaremos 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 ancha apuntando hacia arriba. Además, a ambos 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 combinaciones de teclas suponen apretar varias al mismo tiempo, esta simultaneidad la indicaremos mediante el signo
+. Así, por ejemplo, si queremos abrir un documento debemos pulsar ctrl + O, lo que significa que, mientras pulsamos la
tecla control debemos pulsar también la letra O. El hecho de que en la combinación, la letra O sea una mayúscula es
irrelevante.

Menú Función Atajo

Nuevo documento ctrl + N

Abrir documento ctrl + O

Cerrar el documento actual ctrl + W

Archivo Cerrar todos los documentos ctrl + shift + W

Guardar el documento actual ctrl + S

Guardar y poner nombre ctrl + shift + S

Salir ctrl + Q

Deshacer ctrl + Z

Rehacer ctrl + Y

Cortar ctrl + X

Copiar ctrl + C

Pegar ctrl + V
Edición
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

shift + F3
selección

Ocultar / mostrar los paneles laterales e

Ver F4
inferiores

Insertar imagen ctrl + alt + I

Insertar Insertar tabla ctrl + alt + T

Punto de anclaje con nombre ctrl + alt + A

Modificar Propiedades de la página ctrl + J

[Link] [Link]
Sección 1.2 - Dreamweaver CS4

Negrita ctrl + N

Énfasis o cursiva ctrl + I

Eliminar cualquier formato a un texto ctrl + 0

Formato
Convertir texto en párrafo ctrl + shift + P

ctrl + 1 a ctrl +
Convertir en encabezados del 1 al 6
6

Comandos Corrector ortográfico shift + F7

Ayuda de Dreamweaver F1
Ayuda
Referencia de lenguajes shift + F1

Colocar archivos en el servidor ctrl + shift + U

Otros
Vista en vivo alt + F11

Curso de Formación Informática de Dreamweaver

por Salvador de la Puente González está licenciado bajo
Creative Commons Reconocimiento 3.0 España License.

[Link] [Link]
Sección 1.3 - Tendencias en el diseño web

Sección 1.3 - Tendencias en el diseño web

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 elementos 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 ejemplo) y han impulsado 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 mayor 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 web (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 primer sitio web visitando los archivos históricos de la [Link]. Están en inglés pero
constituyen un recurso curioso, interesante y de lectura obligada para algunos de nosotros.

Como puede observarse, los sitios web de hoy día han cambiado mucho respecto a los primeros. Existe en la
actualidad una necesidad de dejar patente que las distintas páginas de un sitio web forman parte, de hecho, del
mismo sitio web. De ahí que dejemos una cabecera común con el logotipo, o proporcionemos un menú para visitar
las distintas páginas del sitio, elementos que rodean o enmarcan el contenido, la verdadera información, de la
página.

Sin embargo, durante los primeros años de la World Wide Web, el objetivo principal era transmitir 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 muchas 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 mejorar la navegación (dado que no disponemos de la libertad del ratón).

Diseño con tablas y páginas ensambladas

[Link] [Link]
Sección 1.3 - Tendencias en el diseño web

En noviembre de 1995 se publica HTML 2.0 y pocos meses después, la [Link] revisa la especificación para añadir
el elemento tabla. La inclusión de las tablas y su flexibilidad a la hora de combinar celdas y personalizar el estilo del
borde, color de fondo y márgenes entre celdas, hacen que las empresas, preocupadas por el diseño de sus sitios
web y su imagen de marca, las adopten como plantilla para disponer el texto de diversas y novedosas formas nunca
antes vistas en Internet, pero comúnmente utilizadas en el diseño publicitario clásico.

Así, por ejemplo, dos columnas de una tabla permitían emular el texto de un periódico y un conjunto de filas permití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, llamamos 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
ensambladas son aquellas cuyo aspecto visual está formado por un número amplio 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 numeramos) 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 moda 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 comenzaría su lento declive.

Gracias a la herramienta Wayback Machine de Internet Archive, podemos visualizar páginas web antiguas desde
1996.

[Link] en 1996
[Link] en 1996
[Link] en 1996
[Link] en 1997
[Link] en 1997
[Link] (General Motors) en 1997
[Link] en 1998
[Link] en 1998
[Link] en 1998

En la actualidad las páginas ensambladas han desaparecido casi por completo y el elemento tabla se utiliza para

[Link] [Link]
Sección 1.3 - Tendencias en el diseño web

aquello para lo que fue propuesto: tabular datos como resultados de partidos, históricos de acciones, resúmenes
de análisis, resumen de atajos de teclado (como el visto en la Sección 1.2), etc.

Conjuntos de marcos
Al comenzar la Sección 1.2 hablamos 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 (frameset, en Inglés).

Los conjuntos de marcos permiten dividir el espacio del navegador en regiones

independientes, cada una mostrando contenido proveniente de una página web distinta. La
intención era la de desacoplar los elementos como el menú lateral o la cabecera del sitio web, que nunca
cambiaban, del contenido de la página que sí cambiaba. De esta forma podíamos ahorrarnos la tediosa tarea de
reescribir el menú 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, muy pocas páginas ofrecen diseños basados en conjuntos de marcos 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 similar a los conjuntos de marcos que permite incrustar el contenido de una página
web en otra: son los llamados marcos interiores (inner frames, en Inglés) y se usan para "citar" páginas web,
incrustándolas en el diseño de la página. Un buen ejemplo se encuentra en el buscador de imágenes de Google.

Esta página de resultados de la búsqueda de imágenes de Google es un buen ejemplo de frame interior. La banda de
arriba muestra una previsualización e información sobre la imagen seleccionada. A la derecha de la banda puede leerse
"Eliminar marco". 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

[Link] [Link]
Sección 1.3 - Tendencias en el diseño web

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 imagen, una tabla o una cabecera) y los diseñadores web podían usarlo como un elemento comodí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 elemento semánticamente neutro,
permite a los diseñadores estructurar las páginas libremente además de cubrir la carencia de
elementos HTML como artículos, fechas, monedas, menús, citas bibliográficas... permitiendo la creación de
elementos personalizados.

Sin embargo, el estándar quería mantener 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 ejemplo, 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 menú de navegación, otro para un formulario con un cuadro de búsqueda, otro con una tabla de
estadísticas de las últimas visitas...

[Link] [Link]
Sección 1.3 - Tendencias en el diseño web

Este es un artículo del blog tecnológico [Link]

Las líneas rojas de esta imagen representan las divisiones en elementos div y las etiquetas amarillas, los nombres de
cada elemento (los nombres van precedidos de un punto). Cada artículo está formado por un div contenedor llamado
hentry. En su interior hay otros dos, uno llamado entry-content que significa contenido de la entrada y rodea el texto y
la imagen. El otro se llama entry-meta y contiene la fecha de publicación, los comentarios y la categoría de la noticia.

La mezcla 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 ensambladas), puede conseguirse ahora con el uso
apropiado de divs y estilos sin tener que reinterpretar el significado del elemento tabla.

[Link] [Link]
Sección 1.3 - Tendencias en el diseño web

La página de [Link] 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.

[Link]
[Link]
[Link]
[Link]
[Link]

Algunos impresionantes diseños hechos únicamente mediante el buen uso de CSS, secciones y capas.

[Link]
[Link]
[Link]
[Link]
[Link]

Recomiendo el blog de Román Cortés, tag de CSS, para ver impresionantes efectos creados sólo con HTML y CSS.

[Link]
[Link]
[Link]

HTML 4.01: transitional, frameset 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 marcos) 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 moderna y en la que la [Link] aconseja que se escriban las páginas de
nueva creación. De hecho, es la versión que utilizaremos a lo largo del curso (¡y eso que no escribiremos una sola
línea de código a mano!)

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

[Link] [Link]
Sección 1.3 - Tendencias en el diseño web

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 [Link]

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 margen: 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 [Link] 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 marcado: 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)
momento temporal o fechas: para indicar que el texto es un tiempo o una fecha
medida: para expresar medidas
progresos: para indicar que el texto representa el progreso de algún suceso

detalles: un conjunto de datos que expresan información extra relacionada con otro elemento. Por ejemplo, los
autores de una entrada en un blog.
menú: una lista de comandos como los que podemos encontrar en aplicaciones de escritorio como Word o
Dreamweaver. Es el equivalente a las barras de 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 como veremos en
el último 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 totalmente accesible.

Accesibilidad
Como dijimos hacia el principio de esta sección, la accesibilidad es la capacidad de una página web para
poder ser utilizada por el mayor número de personas.

La [Link], preocupada por el creciente número 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 informació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 cambiar 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 combinación de HTML y CSS.

Por otro lado, conviene emplear correctamente los elementos de imagen y tablas, suministrando la información
alternativa necesaria para que los lectores de pantalla, empleados por las personas ciegas puedan interpretar la
información correctamente.

[Link] [Link]
Sección 1.3 - Tendencias en el diseño web

Por último, piensa en los nuevos CAPTCHA, los típicos campos de validación donde se nos pide que introduzcamos
una combinación de números y letras que vemos en una imagen, normalmente distorsionados y en varios colores.
Este tipo de comprobaciones se realizan para asegurar que se trata de un usuario humano pero ¿y si el usuario no
puede ver el texto de validación? Los nuevos CAPTCHA vienen acompañados de versiones de audio para usuarios
parcialmente discapacitados.

Actualmente, la [Link] 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.

Curso de Formación Informática de Dreamweaver

por Salvador de la Puente González está licenciado bajo
Creative Commons Reconocimiento 3.0 España License.

[Link] [Link]
Lección 2 - El servidor web

Lección 2 - El servidor web

Planteamiento 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 estimada

Entender los conceptos de la lección y seguir el tutorial para contratar el servidor gratuito llevará de 1 a 2
horas.

Curso de Formación Informática de Dreamweaver

por Salvador de la Puente González está licenciado bajo
Creative Commons Reconocimiento 3.0 España License.

[Link] [Link]
Sección 2.1 - ¿Qué es un servidor web?

Sección 2.1 - ¿Qué es un servidor web?

El modelo 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
[Link] nuestro ordenador llama a otro de Google y se establece una comunicación entre ellos, de
forma muy parecida a como lo harían dos personas que acaban de iniciar una conversación telefónica. De esta
forma, nuestro ordenador le pide entonces al de Google que le mande la página web del buscador y el ordenador de
Google responde mandándosela.

Este tipo de comunicación, en la que un ordenador demanda un servicio y otro se lo proporciona es lo

que se conoce como modelo cliente-servidor donde el cliente 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 Hotmail, 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 como [Link] ó [Link] y se los llama
direcciones IP. 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 web a las que estamos acostumbrados y
que analizaremos en profundidad cuando hablemos de los enlaces en HTML.

Entonces, cuando conectamos a [Link] 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 comunicación. Cuando el cliente decide terminar la
comunicación, se "despide cordialmente" y cierra la conexión.

El servidor web
Un mismo ordenador puede cubrir muchos tipos de servicios distintos. Una sola máquina puede proporcionar
páginas web, juego en red y correo, todo al mismo 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 mensajes, 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 web es el programa encargado de recibir las peticiones acerca de

páginas web y enviar la página deseada como respuesta.

[Link] [Link]
Sección 2.1 - ¿Qué es un servidor web?

Páginas web dinámicas

Los servidores actuales no se dedican exclusivamente a recibir peticiones y devolver respuestas en forma de
páginas web. Los servidores modernos, tras recibir la petición de un cliente, manipulan 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:

[Link]

Supongamos que Mis Rincones Favoritos es un sitio web que nos permite buscar fotografías de lugares
extraordinarios del mundo y marcarlos como favoritos. Accedemos a la página [Link] 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 completar
la plantilla consultando una base de datos que guarda tus fotografías favoritas y luego, envía la página
personalizada a tu ordenador.

Este tipo de páginas reciben el nombre de dinámicas puesto que el contenido es variable en contraste con las
páginas estáticas en las que el contenido es siempre el mismo independientemente de la situación. Actualmente 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 como las de colegios,
ayuntamientos o normativas oficiales son ejemplos de contenido estático.

Curso de Formación Informática de Dreamweaver

por Salvador de la Puente González está licenciado bajo
Creative Commons Reconocimiento 3.0 España License.

[Link] [Link]
Sección 2.2 - Contratación de un servidor gratuito en Internet

Sección 2.2 - Contratación de un servidor

gratuito en Internet

Hosting o alojamiento en Internet

Host es la palabra inglesa para anfitrión. En el ámbito de las páginas web, el hosting o alojamiento representa
el hecho de albergar contenido web 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é
perpetuamente 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 podremos visitar nuestras páginas web.

NOTA: Este paso, aunque añade realismo al curso, no es imprescindible. 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 alojamiento en [Link]
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:

1GB 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.
30GB de transferencia mensual, o dicho de otra manera, el número de veces que nuestra página podrá ser
visualizada en un mes. 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: Recomendamos 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 completamente 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.

[Link] [Link]
Sección 2.2 - Contratación de un servidor gratuito en Internet

Abajo encontraremos un botón que dice "Continuar con el registro >>>" así que lo pulsaremos para poder
comenzar el proceso.

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 alojamiento. El campo 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 [Link]
[Link]

[Link] [Link]
Sección 2.2 - Contratación de un servidor gratuito en Internet

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.

[Link] [Link]
Sección 2.2 - Contratación de un servidor gratuito en Internet

Completa el CAPTCHA

Hecho esto nos avisarán de que un mail de confirmación se ha envíado a nuestro correo electrónico. Tendremos
que localizar este mensaje (cuidado, puede estar en spam) y hacer clic en la dirección que nos proporciona, tras las
palabras "by simply clicking here".

De nuevo tendremos que pasar un CAPTCHA y hacer clic en "Register"

De nuevo, introduce las dos palabras para poder continuar.

Hemos terminado el registro y se nos muestra 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 name, FTP password, FTP host name y Your domain name porque los usaremos en la siguiente
lección.

[Link] [Link]
Sección 2.2 - Contratación de un servidor gratuito en Internet

Puedes imprimir la página o descargarla en formato PDF aunque Zobyhost te habrá enviado un mail con los mismos
datos.

Comprobar que todo funciona

Escoge cualquiera de las direcciones que te proporcionaron en el campo Your domain name e introdúcela en tu
navegador, en nuestro caso [Link] o [Link]
Debería aparecer una página web de prueba, avisándote de que tu cuenta ha sido creada con éxito.

[Link] [Link]
Sección 2.2 - Contratación de un servidor gratuito en Internet

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 - Examen tipo test

A continuación debes realizar un sencillo examen. Son unas cuantas preguntas sobre lo que has aprendido en
las dos primeras lecciones. Te permitimos que falles dos. Si fallas más, deberás repetir el examen. 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.

IMPORTANTE: Cuando pulses el botón para empezar el examen, se abrirá una nueva ventana (o pestaña)
en la que se encontrará el examen. No cierres ni cambies de página en la ventana o pestaña anterior, pues
cuando hayas terminado el examen será ahí donde podrás ver la puntuación obtenida. ¡Suerte!

Curso de Formación Informática de Dreamweaver

por Salvador de la Puente González está licenciado bajo
Creative Commons Reconocimiento 3.0 España License.

[Link] [Link]
Lección 3 - Sitios web con Dreamweaver

Lección 3 - Sitios web con Dreamweaver

Planteamiento
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)

Objetivos de la Lección 3

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 estimada

El estudio de este tema requiere cierta atención por lo que se recomienda abordarlo en 2 sesiones de 1 a 2
horas.

Curso de Formación Informática de Dreamweaver

por Salvador de la Puente González está licenciado bajo
Creative Commons Reconocimiento 3.0 España License.

[Link] [Link]
Sección 3.1 - El asistente de sitios web

Sección 3.1 - El asistente de sitios web

Sitios web
Hasta ahora hemos hablado de diseñar páginas web. Sin embargo, normalmente 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 ejemplo, visitando el sitio web
de Apple encontramos 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 mismos, lo que suele llamarse una página
personal. No obstante, como vamos a involucrar muchas páginas y tenemos nuestra propia dirección en Zobyhost
(ver Lección 2), diremos más correctamente que vamos a diseñar nuestro sitio web personal.

El asistente de sitios web

Pasemos por fin a Dreamweaver: abre el programa y observa el área de trabajo. Repasa la 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.

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.

[Link] [Link]
Sección 3.1 - El asistente de sitios web

La ventana de administración de sitios web muestra un listado de nuestros sitios web y tiene la siguiente apariencia:

Hacemos clic en Nuevo... y luego en Sitio para mostrar la ventana de configuración de sitios web. Debemos
asegurarnos de que estamos en la pestaña Básicas para poder realizar el asistente (en caso contrario, se
mostrarían las opciones avanzadas y no veríamos el asistente). Te recomendamos que leas el tutorial primero antes
de llevarlo a cabo por ti mismo.

1. En el primer 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,
[Link] en este caso. Es muy importante que no olvides poner "[Link] al
comienzo de la dirección. Cuando termines, haz clic en el botón Siguiente para continuar.

[Link] [Link]
Sección 3.1 - El asistente de sitios web

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.

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 mi máquina y luego cargarlas al servidor

[Link] [Link]
Sección 3.1 - El asistente de sitios web

cuando estén listas, Dreamweaver 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.

4. Ahora necesitamos 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 seleccionaremos FTP. En el primer campo pegaremos el
dato proporcionado en FTP host name; en el segundo escribiremos htdocs, que es la carpeta, dentro del
servidor de Zobyhost, donde se guardarán las páginas; en el tercero hay que copiar el contenido de FTP user
name y en el último, el de FTP password. Como consejo, conviene marcar la opción Guardar, situada a la
derecha del campo de contraseña, para que Dreamweaver la introduzca automáticamente al cargar archivos en
el servidor.

[Link] [Link]
Sección 3.1 - El asistente de sitios web

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 mismo 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 marcaremos la
primera opción. En este caso vamos a marcar la segunda ya que no necesitamos coordinarnos con nadie. Haz
clic en Siguiente para pasar a la página de resumen.

[Link] [Link]
Sección 3.1 - El asistente de sitios web

7. En la página de resumen se presentan las decisiones tomadas durante el asistente. Hacemos clic en
Completado para finalizar el asistente.

El administrador de sitios web mostrará ahora el nuevo sitio entre los disponibles. Nos aseguramos de que lo
tenemos seleccionado y haremos clic en Listo para terminar.

[Link] [Link]
Sección 3.1 - El asistente de sitios web

Si observamos ahora el Explorador de archivos veremos que ha cambiado 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.

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, muestra 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
Firewall.

[Link] [Link]
Sección 3.1 - El asistente de sitios web

Curso de Formación Informática de Dreamweaver

por Salvador de la Puente González está licenciado bajo
Creative Commons Reconocimiento 3.0 España License.

[Link] [Link]
Sección 3.2 - Las vistas del sitio web

Sección 3.2 - Las vistas del sitio web

Un sitio web 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 descomprimidos: [Link], [Link], [Link],
[Link].

La vista local
La vista local muestra, en forma 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 comprimidos 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.

[Link] [Link]
Sección 3.2 - Las vistas del sitio web

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 remoto o máquina remota que sería la de Zobyhost.

La vista remota
La vista remota también muestra el listado de los archivos que forman nuestro sitio web pero en el servidor de
Zobyhost. Como acabamos de decir, a este servidor se le llama comúnmente servidor remoto. 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
comprobar, no coinciden con los de la vista local. Cuando esto ocurre, decimos que el servidor está desincronizado
respecto de nuestro ordenador. Aprenderemos a sincronizarlo en la Sección 3.3.

[Link] [Link]
Sección 3.2 - Las vistas del sitio web

Otras vistas
El cuadro desplegable incluye dos vistas más el Servidor de pruebas y la Vista de base de datos. No vamos a ver
ninguna de las dos porque quedan fuera del alcance de este curso.

Curso de Formación Informática de Dreamweaver

por Salvador de la Puente González está licenciado bajo
Creative Commons Reconocimiento 3.0 España License.

[Link] [Link]
Sección 3.3 - Sincronización con el servidor

Sección 3.3 - Sincronización con el servidor

El ciclo de vida del sitio web

Idealmente, 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, comprobar su
funcionamiento 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 mismo 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 correctamente.
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.

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 remoto

Vamos a sincronizar el servidor de pruebas con nuestro equipo de desarrollo. Es decir, haremos que se copien
las versiones más recientes de nuestros archivos al servidor remoto. 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, debemos hacer clic en el botón Sincronizar (las dos flechas en círculo, ) lo
que mostrará el cuadro de diálogo Sincronizar archivos.

[Link] [Link]
Sección 3.3 - Sincronización con el servidor

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 elegiremos Todo el sitio 'MiSitioWeb' indicando de esta forma que queremos cargar todo el
sitio. En Dirección especificaremos Colocar archivos más nuevos en remoto para decir así que el servidor remoto
debe quedar como nuestra carpeta local. Por último marcamos la opción Eliminar archivos remotos no existentes en
la unidad local para destruir del servidor todo aquello que no esté en nuestro ordenador.

Cuando hayas configurado el 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 remoto

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 [Link] y pulsa intro para aceptar el nombre.

Ahora sincroniza con el servidor remoto de la misma forma 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

Es común que en diseño nos encontremos realizando pequeñas modificaciones sobre un mismo archivo. En este
caso nos puede interesar una forma rápida de cargar las últimas modificaciones 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 utilizamos el botón, debemos asegurarnos primero de que estamos en la vista local y el archivo que queremos
cargar está seleccionado en el árbol de archivos. Si utilizamos el atajo de teclado, basta que estemos editando el
archivo.

Antes de completar la 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

[Link] [Link]
Sección 3.3 - Sincronización con el servidor

mostrar este mensaje. En cualquier momento podemos cambiar esta opción en las propiedades avanzadas del sitio
web.

Mi recomendación es escoger Sí y marcar la casilla, dado que sólo deberíamos cargar archivos al servidor remoto
cuando estuviéramos seguros de su corrección.

3.3.2 - Ejercicio guiado: sincronización del archivo fotos

Haz doble clic sobre el archivo [Link] 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 menú Archivo.

Ahora utiliza la combinación de teclado ctrl + shift + U para sincronizar sólo ese archivo.

Prueba de la página web

Prueba a cambiar a la vista local y haz doble clic sobre [Link] 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 forma de probar nuestra
página web antes de subirla al servidor remoto.

[Link] [Link]
Sección 3.3 - Sincronización con el servidor

Vista de la copia local de [Link] en el navegador. Fíjate en la dirección del navegador.

Si queremos probar cómo se ve nuestra página en Internet, tendremos que sincronizar el sitio y luego abrir un
navegador e introducir la dirección web que nos proporcionó Zobyhost. Si no fuera necesario sincronizar,
Dreamweaver nos avisaría de ello.

Vista de la copia remota de [Link] 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 remotamente a las páginas del sitio web

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 [Link] Presiona intro y comprueba que accedes a la página de fotos.

Puedes utilizar esta técnica para acceder a todos los archivos:

[Link]*
[Link]
[Link]
[Link]
[Link]

*No es necesario poner nada si queremos acceder a [Link]. El servidor cargará un archivo que se llame
[Link] si no se proporciona ninguno.

3.3.4 - Ejercicio: Envíanos la dirección de tu sitio web

[Link] [Link]
Sección 3.3 - Sincronización con el servidor

En esta lección sólo tienes que enviar un mensaje de correo a tu tutor, usando la herramienta de
Comunicación con tutor, con la dirección web de tu sitio (por ejemplo, [Link]
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í mismo 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 web 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.

Curso de Formación Informática de Dreamweaver

por Salvador de la Puente González está licenciado bajo
Creative Commons Reconocimiento 3.0 España License.

[Link] [Link]
Lección 4 - Elementos de texto HTML y el color en CSS

Lección 4 - Elementos de texto HTML y el color

en CSS

Planteamiento
Requisitos previos

Estar familiarizado con el entorno de Dreamweaver (Lección 1)

Saber sincronizar el servidor remoto (Lección 3)
Conocimientos básicos sobre procesadores de textos

Objetivos de la Lección 4

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 mediante el color

Secciones

1. Encabezados, párrafos y listas

2. Estilos HTML
3. CSS básico: colores en el texto

Duración estimada

De nuevo, se recomienda abordar la lección en dos sesiones de 1 a 2 horas cada una.

Curso de Formación Informática de Dreamweaver

por Salvador de la Puente González está licenciado bajo
Creative Commons Reconocimiento 3.0 España License.

[Link] [Link]
Sección 4.1 - Encabezados, párrafos y listas

Sección 4.1 - Encabezados, párrafos y listas

Las vistas de la página web

Dreamweaver nos permite editar documentos HTML de tres formas: modificando el diseño, alterando el código, o
utilizando una vista híbrida que nos permite manipular diseño y código al mismo tiempo. En este curso utilizaremos
principalmente la vista de diseño pero el alumno 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 Dreamweaver.

Para conocerlas, asegúrate de que tienes seleccionado el proyecto MiSitioWeb en el explorador de archivos y que
te encuentras en la vista local (la de las carpetas en verde). Ahora haz doble clic sobre el archivo [Link] para
que aparezca el área de edición. Deberías ver algo como esto:

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 llama resaltado de sintaxis. No utilizaremos esta
vista dentro del curso.

[Link] [Link]
Sección 4.1 - Encabezados, párrafos y listas

Vista en modo mixto 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 muestra el área de diseño donde el código HTML se interpreta
como 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.

Vista en modo Diseño. El último modo de edición oculta completamente 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.

[Link] [Link]
Sección 4.1 - Encabezados, párrafos y listas

Vista en vivo. Como hemos dicho, en este modo, propio de Dreamweaver CS4, podemos visualizar la página
web como 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
normalidad. Podemos entrar y salir de la vista en vivo mediante la combinación alt + F11.

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 comienza 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 Formato a Encabezado 1 en el panel de
propiedades.

[Link] [Link]
Sección 4.1 - Encabezados, párrafos y listas

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 [Link]

Vamos a modificar la página web [Link]. 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 suprimir
o borrar de tu teclado.

Ahora escribe un encabezado para esta página que hablará un poco de nosotros mismos. Por ejemplo, escribe
el texto "Sobre mí" (sin las comillas). Luego haz clic sobre la palabra "mi" para colocar el cursor en la línea de
texto del encabezado y cambia su propiedad Formato situada en el panel Propiedades (bajo el área de edición)
a Encabezado 1.

Notarás que su tamañ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 mayor 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.

[Link] [Link]
Sección 4.1 - Encabezados, párrafos y listas

4.1.2 - Ejercicio guiado: planificación de la página [Link]

Vamos a continuar editando la página [Link]. 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 informació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 [Link] define una manera por
defecto de representar cada elemento, sin que tengamos que definirlo explícitamente con CSS.

Así, parece que resulta tentador utilizar títulos para aumentar 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 marcar un texto como encabezado estamos
estructurando la página web. Hablaremos del diseño en las Lecciones 6 y 7.

Podemos 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 podemos usar ctrl + shift + P para convertir un encabezado de cualquier
nivel en un párrafo corriente.

El título de la página web

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 campo título, situado tras el botón de vista en vivo
y código en vivo.

[Link] [Link]
Sección 4.1 - Encabezados, párrafos y listas

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 cambios 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érmino 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áticamente 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í convertirme en doctor y licenciarme en la Universidad de Marte,
hecho del que no puedo dar crédito ya que perdí mi 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 como Párrafo, si no es así, cambialo.

Amplía tu biografía incluyendo un párrafo más como este:

En dos ocasiones he tratado de cambiar mi vida actual. En una viajé hasta mi planeta natal con el fin
de encontrar el amor pero éramos impares y me quedé solo. En otra ocasión financié una película
para mi tio Harold que resultó en un completo fracasó y me hundió, todavía más, en esta mísea vida
mia.

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 comprobará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
mismo 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".

[Link] [Link]
Sección 4.1 - Encabezados, párrafos y listas

Los párrafos se amoldan automáticamente al tamaño de la ventana del explorador. Previsualiza la página web
pulsando F12 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 [Link] 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 formato predeterminado
El formato predeterminado o texto preformateado es un tipo de formato en el que se respetan todos y cada uno de
los caracteres del texto. Se suele mostrar en alguna 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
predeterminado 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 formato predeterminado

Al final de la página, crea un encabezado de nivel dos llamado "Texto de prueba con formato predeterminado"
y escribe un texto de prueba. Selecciónalo y cambia su formato a Formato predeterminado en el cuadro
desplegable Formato del panel Propiedades.

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 comprueba como el texto no se
ajusta a las dimensiones de la ventana. Observa como, si haces muy estrecha la ventana aparece una barra
de desplazamiento horizontal en la parte inferior de la página.

Si queremos dejar de introducir un texto con formato predeterminado colocaremos el cursor al final del texto y
pulsaremos dos veces seguidas enter. Otra forma es continuar escribiendo con texto en formato
predeterminado y luego seleccionar el texto que deseemos convertir en párrafo y cambiar su
formato. Este método funciona siempre, independientemente del formato que deseemos aplicar.

4.1.5 - Ejercicio (opcional): cambio de formato

Selecciona una frase de tu autobiografía y alterna entre todos los formatos posibles (incluyendo el etiquetado
como 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, como la de
las máquinas de escribir.

[Link] [Link]
Sección 4.1 - Encabezados, párrafos y listas

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.
Je, je.

Listas de elementos
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 implican 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 pulsaremos la tecla enter. Esto desplazará el elemento
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

[Link] [Link]
Sección 4.1 - Encabezados, párrafos y listas

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".

Podemos cambiar en cualquier momento el tipo de lista haciendo clic sobre los iconos de las listas. De esta forma,
podemos anidar listas no ordenadas dentro de otras ordenadas y viceversa. Sin embargo, antes de volver a un
nivel anterior tendremos que cambiar el tipo de lista al del nivel anterior. Si no hacemos esto,
Dreamweaver iniciará una nueva lista con el tipo actual.

4.1.6 - Ejercicio guiado: lista de 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

Para ello comienza insertando una lista no ordenada con el icono lista no ordenada, . Tras escribir "Terror"
pulsamos enter para incluir un nuevo elemento. 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 [Link]. 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 ejemplos ordenados de mayor a
menor 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. Podemos insertar una nueva lista de definición mediante el menú
contextual del área de edición.

4.1.8 - Ejercicio guiado: lista de términos de interes

Vamos a reproducir la siguiente lista de términos de interés:

HTML

[Link] [Link]
Sección 4.1 - Encabezados, párrafos y listas

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 llamados lenguajes de script, que suele utilizarse para la
programación de páginas web dinámicas

Elige un lugar dónde introducir la lista, haz clic derecho para desplegar el menú contextual, selecciona la
opción Lista y haz clic en Lista de definición.

Luego escribe el primer término 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 [Link]. 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.

[Link] [Link]
Sección 4.1 - Encabezados, párrafos y listas

Curso de Formación Informática de Dreamweaver

por Salvador de la Puente González está licenciado bajo
Creative Commons Reconocimiento 3.0 España License.

[Link] [Link]
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íamos 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

[Link] [Link]
Sección 4.2 - Estilos HTML

Se desaconseja encarecidamente su uso. Resalta un texto subrayándolo. Esto es un texto subrayado.

Tachado
Incluye una línea horizontal que atraviesa el texto por su mitad. 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.

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.

Eliminado
Indica que el texto debe ser eliminado o ha sido eliminado pero se desea dejar constancia de que alguna vez
estuvo allí. Este texto ha sido eliminado.

Insertado.
Indica que el texto ha sido añadido recientemente pero se desea dejar constancia de que no siempre estuvo
allí. Este texto ha sido insertado

Te puede parecer que muchos de ellos hacen lo mismo debes recordar que HTML trata de aportar
significado al texto no de decidir cómo 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 forma.

De nuevo, recuerda: con HTML aportamos estructura y significado al texto, no especificamos

cómo se representa.

En las lecciones 6 y 7 aprenderemos a usar estilos CSS que nos permitirán especificar cómo 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.

[Link] [Link]
Sección 4.2 - Estilos HTML

Por ejemplo, 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 [Link]. 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 menos 3 estilos HTML distintos.

Curso de Formación Informática de Dreamweaver

por Salvador de la Puente González está licenciado bajo
Creative Commons Reconocimiento 3.0 España License.

[Link] [Link]
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 documentos HTML. En otras
palabras, el lenguaje CSS se usa para otorgar propiedades gráficas o de representación a los elementos de HTML.
CSS se denomina en cascada porque permite definir propiedades en los elementos padre que automáticamente
poseerán los hijos, a menos que se indique lo contrario. De esta manera, el estilo fluye de elementos padre a
elementos hijos como si fuera una cascada.

CSS es un lenguaje bastante complejo pero Dreamweaver posee herramientas para simplificar esta tarea y no tener
que lidiar con código.

Color en las páginas web

En las pantallas de los ordenadores, como en cualquier dispositivo que emita 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).

[Link] [Link]
Sección 4.3 - CSS básico: colores en el texto

En HTML el color se representa como un número hexadecimal (llamado también triplete hexadecimal) que codifica
las intensidades de los colores R, G y B. Se pueden mezclar hasta 256 intensidades distintas de cada color lo
que resulta en 16777216 mezclas distintas.

Los números hexadecimales no difieren mucho de los decimales a los que estamos acostumbrados salvo que en
vez de contar con diez símbolos 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úmero 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úmeros 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úmero de dos dígitos hexadecimales desde la intensidad 00 (0 en
decimal) que representa la ausencia total de un color, a la FF (255 en decimal) que representa la máxima intensidad
de un color. Y como cada color está formado por la mezcla de los 3 colores preimarios, cada mezcla se
expresa como la lista de los valores hexadecimales de las intensidades de los colores primarios en el orden RGB.
Resumiendo: primero la cantidad de rojo, luego la de verde y por último la de azul.

En CSS, a este número se le añade como prefijo el símbolo # (almohadilla). Luego un color como este se escribiría
#D98357 (rojo=D9, verde=83, azul=57).

Existe una forma alternativa de describir un color sólo en caso de que las tres intensidades repitan sus
dígitos. Por ejemplo, considera el color #3300CC. Este color puede abreviarse escribiendo cada dígito repetido
una sola vez, como #30C. Todos los colores del selector básico de color de Dreamweaver pueden escribirse de
esta forma y se corresponden con una paleta especial de color llamada paleta de colores web seguros.

[Link] [Link]
Sección 4.3 - CSS básico: colores en el texto

Observa como el azul puro (esquina inferior izquierda), el verde puro (6º comenzando a contar hacia arriba desde la
esquina inferior derecha) y el rojo puro (6º color la última columna) contienen 0 en las intensidades de los colores
que no son ellos mismos, y como el negro (esquina inferior derecha) supone establecer todas las intensidades a 0 y
el blanco (esquina superior izquierda) a F.

Aplicar color a un texto

Para colorear un fragmento de texto tenemos que seleccionar el texto que deseamos cambiar de color y luego hacer
clic donde pone CSS en el panel Propiedades, . Esto sustituirá el panel de propiedades HTML por otro de
propiedades CSS. Recuerda volver al panel HTML al terminar de aplicar un color.

NOTA: Trata de ignorar los iconos de negrita y cursiva, así como los de alineamiento de 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 desplegamos el selector
básico de color dónde podemos elegir cualquier color de la pelta segura.

[Link] [Link]
Sección 4.3 - CSS básico: colores en el texto

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 realmente lo que hacemos
es crear una nueva regla (de color en este caso) para el texto seleccionado. El último paso consiste en elegir un
nombre para la regla que escribiremos en el campo Elija o introduzca un nombre para el selector y a continuación,
aceptar el diálogo.

4.3.1 - Ejercicio: aplicar color

[Link] [Link]
Sección 4.3 - CSS básico: colores en el texto

Colorea el encabezado de [Link] 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.

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 cambiar su propiedad Clase del panel
Propiedades HTML (recuerda activar de nuevo el panel propiedades HTML haciendo clic donde pone HTML,
).

En la lista desplegable 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 como 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 [Link]. Cuando hayas definido un par de estilos,
intercambialos, eliminalos y vuélvelos a aplicar.

Puedes ver mi versión final con este enlace.

4.3.3 - Ejercicio: sincroniza el servidor remoto y enviar la página [Link]

Antes de terminar la Lección, repasa los conceptos aprendidos durante la Lección 2 y sincroniza el servidor
remoto. Haremos 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 [Link] tal como te ha quedado. Debes usar la herramienta de Entrega
de ejercicios para enviar el archivo creado ([Link]). Este ejercicio está identificado como Lección
4.

Ve a la página de Inicio y pulsa en el icono Entrega de ejercicios:

[Link] [Link]
Sección 4.3 - CSS básico: colores en el texto

Llegarás a la lista de ejercicios para entregar:

Las ilustraciones se corresponden con los ejercicios de otro curso CFI, pero el funcionamiento es el mismo.

Pulsa sobre el nombre del ejercicio (Lección 4) y llegarás a la pantalla que te permite enviar tu solución:

Para enviar tu archivo solución debes pulsar el botón Cargar archivo. Puedes cargar varios archivos,
aunque normalmente te pediremos sólo uno (la página web en este caso).

[Link] [Link]
Sección 4.3 - CSS básico: colores en el texto

Con el botón Examinar 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 nombres 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:

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 Inicio). 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 comentarios de corrección:

[Link] [Link]
Sección 4.3 - CSS básico: colores en el texto

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 Comunicació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.

Curso de Formación Informática de Dreamweaver

por Salvador de la Puente González está licenciado bajo
Creative Commons Reconocimiento 3.0 España License.

[Link] [Link]
Lección 5 - Hipervínculos, imágenes y tablas

Lección 5 - Hipervínculos, imágenes y tablas

Planteamiento
Requisitos previos

Comprensión del modelo cliente-servidor (Lección 2)

Familiaridad de los elementos de texto como párrafos y encabezados (Lección 3)
Conocimientos básicos del uso de imágenes y tablas en procesadores de texto

Objetivos de la Lección 5

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ómo 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 mismas

Secciones

1. Enlaces de hipertexto: hipervínculos

2. Imágenes y mapas
3. Tablas

Duración estimada

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.

Curso de Formación Informática de Dreamweaver

por Salvador de la Puente González está licenciado bajo
Creative Commons Reconocimiento 3.0 España License.

[Link] [Link]
Sección 5.1 - Enlaces de hipertexto: hipervínculos

Sección 5.1 - Enlaces de hipertexto:

hipervínculos

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 dijimos 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 directamente a preguntarnos cómo localizamos estos recursos
en Internet. Para eso debemos explicar el concepto de URI.

URL significa Localizador Uniforme de Recursos (Uniform Resource Locator). Son cadenas de caracteres que
permiten identificar de manera inequívoca cualquier recurso presente en una red. A menudo, se refieren a ellos de
manera femenina como la URL y las URLs y vulgarmente se las llama direcciones web.

Una URL está formada por varias partes que siguen el esquema que detallamos a 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é
estamos 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 hemos visto otro, FTP, para el
intercambio de archivos.

usuario
Aunque normalmente 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ónimo, 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 nombre 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 intercambiar información. A tales canales
se los denomina puertos. Por consenso, el puerto para las comunicaciones HTTP es el 80 y
para las comunicaciones FTP es el 21.

ruta
Se trata de la ruta, dentro del ordenador servidor, 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 compone por cada una de las carpetas hasta el archivo separadas por barras y, en

[Link] [Link]
Sección 5.1 - Enlaces de hipertexto: hipervínculos

última instancia, el nombre del archivo. Por ejemplo: Mis Documentos/MiSitioWeb/[Link]

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 último puede ser opcional si se trata de [Link] que, como ya
sabemos, 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

[Link]
[Link]
[Link]

5.1.2 - Ejercicio guiado: nombre de usuario y contraseña

Localiza tu nombre de usuario en Zobyhost y tu contraseña y escribe en un navegador:

[Link]

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.

[Link]

Por último, prueba a añadir el nombre de un fichero, para visualizarlo. Por ejemplo:

[Link]

Hipervínculos
El hipervínculo es el elemento de HTML que nos permite enlazar con otros recursos de Internet. Se presenta en
forma de fracciones de texto destacado (a menudo, subrayado) con los que el usuario puede interactuar
(normalmente, haciendo clic sobre él). Poseen dos propiedades importantes: el texto y el 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.

[Link] [Link]
Sección 5.1 - Enlaces de hipertexto: hipervínculos

5.1.3 - Ejercicio guiado: preparar la página [Link]

Vamos a modificar la página [Link]. Asegúrate que en el explorador de archivos se encuentra

seleccionado MiSitioWeb y que nos encontramos en la vista local. Haz doble clic sobre el archivo
[Link] 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 [Link] uses sangrías para tratar
de centrar el texto. Veremos cómo centrar los títulos más adelante. Más sangrado del texto indica un título de
mayor nivel.

Currículum Vitae de [aquí tu nombre]

Índice
Información de contacto
Educación
Competencias
Idiomas
Experiencia de trabajo (X años)
[Un campo 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 ejemplo Paquetes de ofimática]
[Otra: por ejemplo Programas de edición de video]
[Otra más: por ejemplo Herramientas 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. Informació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 acabamos 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, imperdiet ut, imperdiet eu, erat. Ut luctus dapibus augue.
Suspendisse potenti. Ut varius, purus non ornare rhoncus, enim magna rutrum justo, ac vehicula
turpis nunc sit amet dolor. Donec urna. In hac habitasse platea dictumst. Vivamus fringilla sapien id
tellus. Nullam neque sapien, gravida quis, aliquam ut, dignissim quis, ante. Nunc pulvinar ligula at
tellus. Curabitur leo. In turpis elit, sodales ac, placerat in, tristique a, mauris. Integer molestie tincidunt

[Link] [Link]
Sección 5.1 - Enlaces de hipertexto: hipervínculos

lacus. Integer lorem urna, interdum placerat, lobortis eget, posuere quis, leo. Maecenas diam est,
dignissim sagittis, vulputate auctor, ultrices quis, felis. Mauris feugiat eros id mi.

Cras porta pulvinar quam. Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Vivamus in ipsum in eros tincidunt pretium. Nunc magna magna,
consectetur sit amet, ullamcorper et, convallis id, ligula. Etiam laoreet enim imperdiet enim. Donec
lobortis commodo dui. Ut tellus eros, tempor a, egestas ac, tincidunt sit amet, urna. Morbi feugiat
laoreet libero. Quisque diam. Suspendisse dictum risus. Suspendisse potenti. Nulla eget nibh at erat
pretium tristique. Aenean et ipsum. Integer condimentum, nunc sit amet consequat suscipit, dui urna
lobortis nisl, sed laoreet neque nibh vel turpis. Nunc tristique blandit nibh. Aenean a odio vitae felis
venenatis fringilla. Quisque lacus. Sed ut nisi in erat dapibus rhoncus. Nam vestibulum turpis. Integer
non ipsum.

Antes de continuar, prueba a previsualizar la página que acabas de crear.

Hipervínculos que enlazan a la misma página

Para poder referirnos a lugares dentro de una misma 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 cumplir 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 mediante el símbolo de un ancla amarilla, .

5.1.4 - Ejercicio guiado: un punto de anclaje en [Link]

Vamos a añadir un punto de anclaje justo antes del encabezado Información de contacto. Sitúa el cursor justo
al comienzo 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.

El resultado, en la vista de diseño de Dreamweaver, debería parecerse a la figura:

[Link] [Link]
Sección 5.1 - Enlaces de hipertexto: hipervínculos

Previsualiza tu página en un navegador para comprobar como los puntos de anclaje no aparecen.

5.1.5 - Ejercicio: puntos de anclaje en [Link]

Repite el procedimiento para todos los encabezados y recuerda las reglas sobre los nombres de los puntos de
anclaje de las que hablábamos un poco antes.

Como consejo, es útil que el nombre del anclaje coincida con el encabezado de la sección.
Puedes omitir artículos y otras partículas, quitar la informació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 reemplazarse
por las letras "ni" por ejemplo.

Situados los puntos de anclaje, sólo falta añadir los hipervínculos. Para ello, seleccionamos el texto que deseamos
convertir en hipervínculo y usamos 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

[Link] [Link]
Sección 5.1 - Enlaces de hipertexto: hipervínculos

previsualizar la página para probar el enlace en acción.

5.1.6 - Ejercicio guiado: hipervínculo a Informació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. Comenzaremos 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 último 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.

[Link] [Link]
Sección 5.1 - Enlaces de hipertexto: hipervínculos

5.1.7 - Ejercicio guiado: otra forma de enlazar

Otra forma 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 Empleo deseado / familia profesional está al alcance de tu
vista. Ahora haz clic sobre el objetivo y mantén pulsado mientras arrastras hasta situarte encima
del punto de anclaje tal y como se muestra en la figura.

Cuando la flecha esté sobre el punto de anclaje, su nombre aparecerá en el cuadro de Vínculo precedido por
el símbolo almohadilla.

5.1.8 - Ejercicio: completa 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 terminado.

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 documento de texto,

[Link] [Link]
Sección 5.1 - Enlaces de hipertexto: hipervínculos

una imagen o cualquier otro tipo de recurso.

5.1.9 - Ejercicio guiado: regresando al índice

Desde el explorador de archivos, abre la pá[Link].

Vamos a incluir alguna forma de regresar al índice de nuestro sitio web, a la página llamada [Link]. 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 campo Vínculo. Esto desplegará un diálogo de selección de archivos.

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 [Link] 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.

[Link] [Link]
Sección 5.1 - Enlaces de hipertexto: hipervínculos

5.1.10 - Ejercicio guiado: otra forma de crear un enlace a un archivo

Abre el documento [Link] y de nuevo sobre el primer 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 [Link] en el explorador de archivos tal y como explicamos anteriormente.

Hasta ahora hemos visto cómo enlazar con páginas de nuestro sitio web. Ahora veremos cómo enlazar con páginas
de Internet.

5.1.11 - Ejercicio guiado: información sobre películas

Abre la página web [Link] 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 campo Vínculo del
panel Propiedades HTML. Pulsa la tecla enter y habrás conseguido enlazar el título con una página externa.

[Link] [Link]
Sección 5.1 - Enlaces de hipertexto: hipervínculos

5.1.12 - Ejercicio: proporciona informació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 realmente 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 campo más, Correo electrónico, donde introducir la dirección.

5.1.13 - Ejercicio: tu correo electrónico

Abre el archivo [Link] 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 campo Vínculo del panel de propiedades HTML.

Observa como sólo en el caso de enlaces a páginas de Internet utilizamos el esquema de la URL completa. En los
vínculos a puntos de anclaje, sólo especificamos la sección; en los correos electrónicos se especifica el protocolo
mailto junto con los campos nombre de usuario y dirección del servidor; y en los enlaces a páginas web de nuestro

[Link] [Link]
Sección 5.1 - Enlaces de hipertexto: hipervínculos

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 procedimiento es exactamente el mismo 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.

_self
Se refiere a la ventana actual.

_top
En páginas con marcos (los estudiaremos brevemente en lecciones posteriores), se refiere a reemplazar 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 [Link] opina que es solamente el usuario el que debería decidir dónde abrir el contenido.

Sin embargo, puestos a usarlo conviene tener presente la siguiente máxima:

Si estamos enlazando a un lugar de nuestro sitio web, el destino será _self. Si por el contrario estamos
enlazando fuera de nuestro sitio web, el destino será _blank.

El texto del enlace

La segunda observación tiene que ver con el texto del enlace o texto ancla y es muy importante.

El texto ancla es el texto usado para crear el enlace y debe estar relacionado semánticamente 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 Internet

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 ampliación de informació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 muy importante, 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 antiguamente 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.

[Link] [Link]
Sección 5.1 - Enlaces de hipertexto: hipervínculos

5.1.14 - Ejercicio: enlaza tu sitio web

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 siempre 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 información un recurso útil y accesible.

Por otro lado, la ampliación de informació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, muchas veces las páginas destino ni
siquiera advierten que las han enlazado.

Curso de Formación Informática de Dreamweaver

por Salvador de la Puente González está licenciado bajo
Creative Commons Reconocimiento 3.0 España License.

[Link] [Link]
Sección 5.2 - Imágenes y mapas

Sección 5.2 - Imágenes y mapas

Insertar imágenes desde un archivo

Incluir imágenes en nuestras páginas web es una tarea muy 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 web

Crea una carpeta para imagenes dentro de tu sitio web. Para ello, situate sobre la carpeta Sitio - MiSitioWeb
en el explorador de archivos (vista local) y haz clic derecho para elegir Nueva carpeta. Dale el nombre
imagenes y pulsa enter para aceptar el nombre. Abre un explorador de Windows situado en la nueva carpeta
haciendo clic derecho sobre la recién creada carpeta y seleccionando Explorar... .

Ahora escanea una foto tuya o descarga el archivo de retratos que te proporcionamos 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 remoto 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: Imagen, . 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 primera opción.

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 muestre 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 elemento 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.

[Link] [Link]
Sección 5.2 - Imágenes y mapas

El campo Texto alternativo debe contener una descripción corta que resuma el contenido de la imagen. El campo
Descripción larga permite enlazar a una página web que contendrá una descripción detallada de la imagen. En
principio, nos conformaremos con rellenar el campo Texto alternativo.

Al aceptar el diálogo la imagen se habrá añadido al párrafo. Si quieres suprimir una imagen seleccionala haciendo
clic sobre ella y a continuación presiona la tecla suprimir.

5.2.2 - Ejercicio: tu retrato

Incorpora un retrato a la información personal. En el Texto alternativo puedes poner algo como "Autorretrato".

Una imagen actúa como un elemento más del párrafo (para ser preciso, como si se tratara de una palabra) por lo
que podemos introducir otra imagen justo a continuación de la que acabamos de insertar. Para eso deberás colocar
el cursor tras la actual imagen y repetir el procedimiento descrito anteriormente. 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 terminado de experimentar suprime las
imágenes y deja tan sólo una.

Echemos un vistazo al panel Propiedades HTML que aparece al seleccionar una imagen. Para seleccionar una
imagen basta hacer clic sobre ella.

[Link] [Link]
Sección 5.2 - Imágenes y mapas

Presta especial atención a los campos ancho y alto que permiten alterar el tamaño de la imagen (volveremos a ello
en el siguiente apartado), al campo vínculo que nos permite hacer que una imagen actúe como un hipervínculo y al
campo alt que contiene el texto alternativo de la imagen. Localiza también los iconos a la derecha del campo borde
porque hablaremos de ellos en apartados posteriores.

Imágenes desde Internet

Para insertar una imagen que no se encuentra en nuestro sitio web, por ejemplo, el logotipo del escudo y el cisne de
la Universidad Complutense de Madrid que se encuentra en la dirección
[Link] basta con seguir los mismos pasos que antes salvo
que en lugar de seleccionar una imagen en el selector de archivos, escribiremos la URL en el campo URL situado
en la parte inferior del selector de archivos (copiala y 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.

[Link] [Link]
Sección 5.2 - Imágenes y mapas

Tamañ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á.

[Link] [Link]
Sección 5.2 - Imágenes y mapas

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 imagen, en forma de cuadrados. Si tiramos de ellos (o lo que es lo
mismo, hacemos clic sobre uno y manteniendo pulsado, desplazamos el ratón) podremos deformar la imagen a
voluntad. Si además, mientras tiramos del punto de la esquina, mantenemos pulsada la tecla shift, forzaremos a
mantener la relación de aspecto y podremos variar el tamaño de la imagen sin deformarla.

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

Dreamweaver permite realizar algunos ajustes o correcciones sobre la imagen. Todos ellos modifican el archivo
original por lo que si no deshacemos nuestras modificaciones, estas pasarán a formar parte de la imagen de forma
irreversible. Por esta misma razón, Dreamweaver sólo nos permite modificar imágenes que estén en nuestro equipo.
Las imágenes añadidas desde Internet no pueden modificarse.

Las tres herramientas que estudiaremos son el recorte, el ajuste de brillo / contraste y el filtro perfilar.

Recorte

La herramienta de recorte permite seleccionar un área de la imagen y eliminar los sobrantes.

5.2.3 - Ejericio guiadon (opcional): recortando la mirada

Selecciona la imagen y haz clic en la herramienta recorte, .

Lee el diálogo de advertencia con atención para comprender 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 comando deshacer del menú edición o mediante la combinación ctrl + Z.

[Link] [Link]
Sección 5.2 - Imágenes y mapas

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.

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 conformes con nuestro recorte y quieres aceptarlo bastará pulsar la tecla enter.

Como nos advertía el mensaje. puedes deshacer el cambio realizado pulsando la combinación ctrl + Z o
haciendo clic en el comando deshacer del menú 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 imagen 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 podremos ver el resultado de nuestras
modificaciones antes de que tengan lugar sobre la imagen. Cuando estemos de acuerdo con los valores
seleccionados, aceptaremos el diálogo. En caso contrario no hay más que cerrar la herramienta pulsando sobre
cancelar.

[Link] [Link]
Sección 5.2 - Imágenes y mapas

Perfilar

La última herramienta, perfilar, se utiliza de manera muy similar a la anterior. Esta herramienta hace resaltar los
bordes de una imagen lo cual es especialmente útil para 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.

Desplazando el control deslizante ajustamos el grado de perfilado.

Imágenes como hipervínculos

Si observas las propiedades de una imagen, descubrirás que el campo Vínculo se encuentra presente lo que anima
a pensar que podemos hacer que una imagen se comporte como el "texto" de un hipervínculo. Y así
es. El procedimiento para establecer el vínculo es exactamente el mismo que para los hipervínculos de texto de la
Sección anterior.

5.2.4 - Ejercicio guiado: galería de imágenes

[Link] [Link]
Sección 5.2 - Imágenes y mapas

Vamos a crear una galería de imágenes. Para ello modificarás el archivo [Link] 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, [Link]. 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 muestra) 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) como 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.

Las imágenes a este tamaño están muy bien para mostrar toda la galería de un vistazo. Sin embargo
probablemente queramos 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 herramienta 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 muestra 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 momento 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 imagen. La última, original, se refiere al formato original del que se extrajo la
imagen (por ejemplo, una imagen en alta resolución o compuesta de múltiples capas). Este último campo es

[Link] [Link]
Sección 5.2 - Imágenes y mapas

totalmente opcional y tiene que ver con Dreamweaver en partícular y no con HTML.

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
imagen. 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, llamadas banners, para atraer la
atención del usuario (a menudo se utilizan imágenes animadas) 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.
Iconos de apoyo. Haciendo que un recurso sea accesible tanto a través de un hipervínculo de texto como de un
hipervínculo de imagen.

Mapas de imagen
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 forma independiente. De hecho, el uso
de mapas era muy 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:

[Link] [Link]
Sección 5.2 - Imágenes y mapas

Identifica a cada Beatle haciendo clic en cada uno de ellos.

5.2.5 - Ejercicion guiado: página de pruebas y mapas

Crea una nueva página en tu sitio web llamada [Link] (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 imagen, busca abajo a la izquierda del área Propiedades, el apartado Mapa. Da un
nombre descriptivo al mapa (campo mapa) y respeta las mismas normas que para los nombres de los estilos.
Es decir, usa 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 forma
utilizaremos el modo Zona interactiva poligonal .

Elije la Zona interactiva rectangular por el momento y a continuación haz clic y mantén pulsado sobre el
extremo superior izquierdo de la primera torre. Ahora arrastra el cursor hasta la esquina inferior derecha de
manera que extiendas un rectángulo azul alrededor de la torre.

[Link] [Link]
Sección 5.2 - Imágenes y mapas

Justo en el momento 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.

Para volver al modo de edición de texto, pulsa la tecla escape.

5.2.6 - Ejericio: torres poligonales

Descubre por ti mismo cómo utilizar la herramienta poligonal y úsala para ajustar en la medida de lo posible las
áreas al perfil de las cuatro torres.

[Link] [Link]
Sección 5.2 - Imágenes y mapas

Puedes modificar cualquier área haciendo clic sobre ella. Utiliza las marcas cuadradas situadas en los
vértices para cambiar 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 cambiar la posición del área. Por
último, también puedes suprimir 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 combinación de teclas ctrl + Z.

5.2.7 - Ejercicio: áreas como hipervínculos

Las áreas pueden convertirse en hipervínculos como 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:

Nombre Entrada en la Wikipedia

Torre Caja Madrid [Link]

Torre de Cristal [Link]

Torre Sacyr Vallehermoso [Link]

Torre Espacio [Link]

Cuatro Torres Business Area

[Link] [Link]
Sección 5.2 - Imágenes y mapas

Curso de Formación Informática de Dreamweaver

por Salvador de la Puente González está licenciado bajo
Creative Commons Reconocimiento 3.0 España License.

[Link] [Link]
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
usamos CSS, pero influirá sobre el desarrollo de la Sección.

Las tablas son elementos muy interesantes puesto que nos permiten distribuir la información por categorías lo que
supone un mejor y más rápido entendimiento por parte del lector. Los elementos que componen una tabla son las
celdas que pueden ser cabeceras, si describen la naturaleza de los datos presentados; o valores, si contienen
alguna información.

Dreamweaver dispone de una herramienta sencilla y potente para crear tablas que puede encontrarse en el panel
insertar, un par de iconos por encima del botón de insertar imágenes. Sobre el botón puede leerse claramente la
palabra Tabla, .

El diálogo posee tres partes diferenciadas:

En tamaño de la tabla debemos especificar el número de filas y columnas 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 podemos escoger la posición de las celdas de encabezado. Las ilustraciones son lo suficientemente
claras como para dar una idea de lo que representan por sí mismas.

Por último accesibilidad contiene un par de campos que deberíamos de completar (aunque no son obligatorios)

[Link] [Link]
Sección 5.3 - Tablas

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 resumen podemos describir la tabla de
manera más extensa extrayendo las conclusiones más importantes 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 debemos hacer clic sobre la celda que queramos llenar y escribir el texto. Pasar a la
siguiente celda es tan fácil como pulsar tabulador y volver a la anterior, shift + tabulador.

5.3.1 - Ejercicio: pruebas con tablas

Abre el fichero [Link] que creaste en la Sección 5.2 (apartado Mapas de imagen) e inserta una tabla de
la manera que acabamos de describir. La tabla tendrá 6 filas y dos columnas. Un ancho de 200 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 queremos que alguna celda extra
también sea cabecera debemos hacer clic en la celda y en el panel de propiedades, activar la casilla enc.

Debemos insistir en que es posible que el efecto de encabezado no sea del todo de tu agrado, o que desees que el
resto de valores también aparezcan centrados pero el hecho de marcar una celda como cabecera no es una
cuestión de estilo, es una cuestión semántica. Marcar la celda como 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: completa la tabla

Completa la tabla con los datos de las cinco películas más taquillera de todos los tiempos, de la IMDB. Haz
que los nombres de las películas sean enlaces a sus respectivas entradas en la Wikipedia o en la IMDB.

Recaudación de las cinco

[Link] [Link]
Sección 5.3 - Tablas

películas más taquilleras

Película Recaudación

Avatar
$2,467,962,011
(2009)

Titanic
$1,835,300,000
(1997)

The Lord
of the
Rings: The
$1,129,219,252
Return of
the King
(2003)

Pirates of
the
Caribbean:
Dead $1,060,332,628
Man's
Chest
(2006)

The Dark
Knight $1,001,921,825
(2008)

Como puedes observar, el 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 elementos 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 debemos hacer clic sobre el botón de la guía y elegir Seleccionar tabla.

Cómo seleccionar la tabal entera

También podemos seleccionar las filas y columnas de una tabla independientemente. Si situamos el ratón (sin hacer

[Link] [Link]
Sección 5.3 - Tablas

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.

Selección de una columna

Del mismo modo 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, podemos 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, haremos clic sobre esta sin dejar de pulsar ctrl.

Selección de algunas celdas

[Link] [Link]
Sección 5.3 - Tablas

Cambiar el ancho de la tabla

Con una tabla seleccionada, el panel de propiedades muestra las propiedades HTML de los elementos tabla. El
campo ancho sirve para modificar la extensión horizontal de la tabla y puede especificarse de manera absoluta o
relativa.

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 fijamos 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.

Recaudación de las cinco películas más taquilleras (ancho fijo)

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

Ahora cierra el navegador y reemplaza el ancho por un valor del 60%. Vuelve a visualizar la página en el
navegador y cambia 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).

Recaudación de las cinco películas más taquilleras (ancho fijo)

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

$1,129,219,252
(2003)

Pirates of the Caribbean: Dead Man's Chest

$1,060,332,628
(2006)

The Dark Knight (2008) $1,001,921,825

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.

Recaudación de las cinco películas más taquilleras (ancho automático)

[Link] [Link]
Sección 5.3 - Tablas

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

Habiendo seleccionado una o más celdas, podemos observar una serie de campos especiales en la parte inferior
del panel de Propiedades.

El campo 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 escribimos 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úmero se interpretará como 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 (60% · 40% = 24%).

Añadir filas o columnas

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.

Es conveniente escoger la opción Insertar fila cuando se ha seleccionado una fila y del mismo modo, seleccionar
Insertar columna cuando se tiene seleccionada una columna. Estas opciones insertan una sola fila o columna
antes de la fila o columna seleccionada.

5.3.4 - Ejercicio guiado: nueva columna

Vamos a separar el año de las películas en su propia columna. Para ello selecciona la segunda columna, ve al
menú contextual y despliega las opciones de las tablas, haz clic sobre Insertar columna. De esta forma

[Link] [Link]
Sección 5.3 - Tablas

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.

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

Si quisieras introducir varias filas o columnas de golpe, tendrías que seleccionar la opción del menú contextual
Insertar filas o columnas... que te llevaría al siguiente diálogo.

En él debes decidir si queremos añadir nuevas filas o columnas, el número de ellas y la posición relativa a
nuestra selección.

5.3.5 - Ejercicio: TOP-7

Amplia el TOP-5 a un TOP-7, insertando 2 nuevas filas tras la última de todas. Consulta el enlace a la IMDB
para conseguir la información que te falta.

Eliminar filas o columnas

Eliminar 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 suprimir. También podemos hacer clic en la opción Eliminar fila (o Eliminar
columna) del submenú Tabla del menú contextual.

Combinar y dividir celdas

Una tabla no tiene por qué tener una forma regular. Considera el siguiente ejemplo basado en la tabla para nivel de
idiomas del modelo de currículum Europass.

Ejemplo de nivel de idioma

Comprensión Expresión oral
Idioma Expresión escrita
Oral Escrita Interacción oral Expresión oral

[Link] [Link]
Sección 5.3 - Tablas

Inglés C1 C2 C2 C1 B2

Francés B2 B2 C1 B2 B2

Para lograr una tabla como esta tenemos que partir, o bien de una tabla sencilla, e ir añadiendo columnas 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 haremos 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 mismo modo, 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 podremos especificar si queremos dividir la celda en filas o
columnas y el número de ellas.

5.3.6 - Ejercicio: tabla de idiomas

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 también sea cabecera. De la misma 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 anidamiento de tablas.

Alineamiento de la celda
Podemos 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 modificar el valor de los campos horiz. y vert. Los valores del primero pueden
ser izquierda, centro y derecha y representa el alineamiento horizontal mientras que el segundo puede adoptar los
valores superior, medio, inferior y línea base y representa el alineamiento vertical.

La siguiente tabla recoge las combinaciones de estos valores.

[Link] [Link]
Sección 5.3 - Tablas

Resumen de los alineamientos de celda más comunes

Izquierda + Superior hará Centro + Superior hará Derecha + Superior hará

que el contenido se sitúe que el contenido se que el contenido se sitúe
en la esquina superior sitúe en el centro y en la esquina superior
izquierda arriba derecha

Izquierda + Medio hará Centro + Medio Derecha + Medio hará

que el contenido se sitúe a representa un que el contenido se sitúe
media altura, y a la alineamiento totalmente a media altura, a la
izquierda. centrado derecha.

Izquierda + Inferior hará Centro + Inferior hará Derecha + Inferior hará

que el contenido se sitúe que el texto se pegue que el contenido se sitúe
en la esquina inferior abajo y se mantenga en la esquina inferior
izquierda centrado derecha

NOTA: Para que el alineamiento de la celda surta efecto es necesario que el contenido no sea parte de ningún párrafo o
elemento de encabezado. Para ello asegúrate de que el formato del texto en el interior de la celda es Ninguno o cambialo
manualmente (recuerda, cuadro desplegable Formato, del panel de propiedades HTML).

5.3.7 - Ejercicio: completa la 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 completar 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 idiomas como acabamos de ver.

Te dejo mi versión del currículum para que la tomes de referencia. Considera tambié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 web

Has concluído la Lección 5. Ahora debes comprimir en un ZIP todos los archivos de tu sitio web y enviar el
comprimido a tu tutor para que sea corregido. Utiliza el ejercicio identificado como Lección 5 de la
herramienta Entrega de ejercicios.

[Link] [Link]
Sección 5.3 - Tablas

Curso de Formación Informática de Dreamweaver

por Salvador de la Puente González está licenciado bajo
Creative Commons Reconocimiento 3.0 España License.

[Link] [Link]
Lección 6: Introducción a CSS2

Lección 6: Introducción a CSS2 - 1ª parte

Planteamiento
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
Conocimiento y dominio de los elementos HTML vistos en las Lecciones 4 y 5

Objetivos de la Lección 6

Familiarizar al alumno con los nombres de las etiquetas de los elementos HTML más comunes
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 estimada

Dada la severa novedad de los conceptos introducidos en esta lección y la longitud de las secciones, ésta
debería completarse en un plazo de 6 sesiones de 2 a 3 horas.

Curso de Formación Informática de Dreamweaver

por Salvador de la Puente González está licenciado bajo
Creative Commons Reconocimiento 3.0 España License.

[Link] [Link]
Sección 6.1 - Diseño con elementos DIV

Sección 6.1 - Diseño con elementos DIV

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 medio 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 encontramos un elemento <cite> o cita y por último un elemento <em> o enfatizado. El nombre
del elemento es el texto entre las marcas de etiqueta < y >. El explorador de 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ómo se
encuentran anidados los distintos elementos. Además, permite seleccionarlos de manera rápida con sólo hacer clic
sobre el nombre del elemento.

Por ejemplo, como veremos en las próximas lecciones, si quisiéramos cambiar el estilo del párrafo, tendríamos que
seleccionar el nombre de selector p, y si quisiéramos redefinir la cita, usaríamos el nombre de selector cite. Del
mismo modo, para seleccionar la cita bastaría con hacer clic sobre <cite> en el explorador de jerarquía.

La maqueta 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 vamos 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 elementos que conforman una página web se la denomina maqueta 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 ejemplos, 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:

[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]

[Link] [Link]
Sección 6.1 - Diseño con elementos DIV

Desglosemos por ejemplo el layout de la página PSDTuts. Comenzamos 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.

El pié de página con, de nuevo, el título, los enlaces relacionados, el copyright y las formas 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 menú
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 forma, el menú actúa como un reflejo de la
jerarquía del sitio web. El menú suele aparecer bien de forma horizontal tras la cabecera o como parte de ella;
bien verticalmente como parte de la columna lateral.

El contenido

[Link] [Link]
Sección 6.1 - Diseño con elementos DIV

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 columna 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 compuestos a su vez, de aun más. Esta es la situación que se observa en las siguientes
figuras donde se muestra el desglose del área de contenidos y de una de sus noticias:

Dos tutoriales dentro del área de contenido, cada uno es un bloque distinto

[Link] [Link]
Sección 6.1 - Diseño con elementos DIV

El desglose de un tutorial en imagen (a la izquierda), título e introducción (en medio) y número de comentarios, Com, a
la derecha y arriba.

Las maquetas de Dreamweaver

Haciendo clic en Archivo, opción Nuevo... se abrirá el siguiente diálogo que nos permitirá escoger la maqueta de
nuestra página:

Podemos 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 cambios en la maqueta.

[Link] [Link]
Sección 6.1 - Diseño con elementos DIV

Las distintas áreas generadas por Dreamweaver destacan por estar recuadradas mediante 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 hemos visto hasta ahora.

6.1.2 - Ejercicio (opcional): maquetas de Dreamweaver

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 [Link], enlázalo en [Link] con el nombre Maqueta
Dreamweaver y acuérdate de enlazar el índice desde esta página también.

Elementos DIV
En la actualidad, el elemento 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 combinación de elementos div y hojas de estilo es la piedra
angular del diseño de páginas web moderno.

Un elemento div se dice que es "de bloque" puesto que reúne un conjunto de elementos que desempeñan (o
comparten) una función en una unidad independiente. Así, todos los elementos de la cabecera de PSDTuts

[Link] [Link]
Sección 6.1 - Diseño con elementos DIV

pertenecerían a un div llamado "cabecera" y los distintos enlaces que forman el menú pertenecerán a un div llamado
"menu". 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 nombre se puede repetir en páginas distintas
pero no en el mismo documento).

Como aun no hemos hablado de CSS, aprenderemos a dividir nuestro documento en divs pero no les aplicaremos
ningún estilo. Para nosotros no serán más que un montón de cajas apiladas unas dentro de otras.

6.1.3 - Ejercicio guiado: estableciendo los divs de la maqueta

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 [Link]

Dividiremos nuestro documento en:

Cabecera: con el título de nuestra web personal

Columna lateral izquierda: con el menú a las distintas secciones
Contenido: con los textos principales
Pie de página: con los agradecimientos, el copyright y nuestro correo electrónico

Nuestra maqueta, los nombres de los div, precedidos por la almohadilla, 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, haremos 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.

[Link] [Link]
Sección 6.1 - Diseño con elementos DIV

Para insertar un elemento div haz clic sobre Insertar etiqueta Div. Se abrirá el cuadro de diálogo de Insertar
etiqueta Div.

Los campos más importantes aquí son el cuadro desplegable Insertar y el cuadro de texto ID. El primero
especifica dónde insertar el elemento div mientras que el segundo nos permite nombrarlo.
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 comprueba cómo se vuelve roja y
continua antes de hacer clic. También podemos situarnos en su interior y hacer clic sobre el elemento <div>
en el Explorador de jerarquía.

[Link] [Link]
Sección 6.1 - Diseño con elementos DIV

Observa como el explorador de jerarquía indica que se trata de un div con nombre añadiendo el
símbolo almohadilla y el identificador al nombre del elemento.

Para dar nombre a un div que no tuviera, o realizar un cambio en el identificador del mismo basta seleccionarlo
y cambiar el campo ID de div del panel de propiedades HTML del elemento.

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 necesitamos 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 como 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".

[Link] [Link]
Sección 6.1 - Diseño con elementos DIV

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 determinado elemento respectivamente. Las dos últimas sirven para
anidar el nuevo elemento div dentro de otro elemento, al principio o al final respectivamente. Si recuerdas el
tema 1, recordarás que los elementos HTML se anidan unos dentro de otros y que para anidar un elemento,
este se debe escribir entre las etiquetas del elemento que debe contenerlo, de ahí esos nombres.

Como habrás observado, falta el pie de página. Insertarás este último de otra forma.

Haz clic debajo y fuera del div llamado "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".

NOTA: Como ocurría con los nombres 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 mismo documento

Presta atención a esto porque Dreamweaver no te avisará de que exista un error si no cumples estas normas. Esto es
así, porque las normas son una buena 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:

[Link] [Link]
Sección 6.1 - Diseño con elementos DIV

No te preocupes porque aun no se parezca a la maqueta. Al menos tiene los mismos bloques.

6.1.4 - Ejercicio: maquetando el sitio web.

Tomando como referencia esta maqueta, modifica las páginas [Link], [Link] y [Link] para que
se ajusten al layout.

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 como explicamos anteriormente, este rodeará todo el contenido del cuerpo, no el cuerpo en sí
dado que no puede haber nada rodeando al elemento cuerpo.

[Link] [Link]
Sección 6.1 - Diseño con elementos DIV

En el div menú crea una lista no ordenada con enlaces a [Link], [Link] y [Link]. Luego abre
la página [Link] 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.

Curso de Formación Informática de Dreamweaver

por Salvador de la Puente González está licenciado bajo
Creative Commons Reconocimiento 3.0 España License.

[Link] [Link]
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 marcamos qué es un texto, no cómo 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 [Link] que creamos en la sección 6.2. Si no la creaste, este es el momento: 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...

Esto desplegará el diálogo de nuevo estilo que configuraremos como se indica en la figura.

[Link] [Link]
Sección 6.2 - Hojas de estilo

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 Nombre del selector escribiremos body (o lo seleccionaremos del cuadro desplegable) porque es
precisamente el elemento <body> de HTML (el cuerpo del documento, es decir, la parte visible de la página
web) el que queremos redefinir.

Por último saber que los estilos CSS pueden definirse o bien dentro de cada página web (si como 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 haremos 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 nombre [Link] y haz clic en Guardar.

[Link] [Link]
Sección 6.2 - Hojas de estilo

A continuación se abrirá el diálogo de definición de regla que estudiaremos en profundidad a lo largo de

todo este tema. Las propiedades CSS están en un inglés sencillo y autoexplicativo. Para este ejemplo,
modificaremos 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 como
su tamaño cambian notablemente, aunque la ventana de diálogo permanece abierta. Prueba otras
configuraciones y haz clic en Aplicar para comprobar sus efectos. Procura que la configuración quede como en
la figura antes de pulsar Aceptar.

NOTA: Se necesita definir al menos un estilo para que Dreamweaver 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 terminar las hojas de estilo (si no
aparece, utiliza el botón Actualizar).

Parece que el tamaño de letra es demasiado pequeño y el colores demasiado estridente, vamos a cambiar la
regla para que el tamañ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 actualmente definidas en la hoja de estilo.

Si no ves el estilo, fíjate si aparece un signo + a la izquierda del nombre de la hoja de estilo y haz clic sobre él
para desplegar el contenido de la misma. La parte superior, Todas las reglas, presenta las reglas de la hoja
de estilo mientras que la parte inferior, Propiedades de "[nombre de la regla]", muestra las propiedades de
cada regla. El área de propiedades del panel permite manipular los valores de las propiedades de forma rápida
y visual. De esta forma, haz clic sobre el valor de font-size lo que mostrará un cuadro desplegable
para seleccionar los tamaños más comunes y sus unidades. Establece el nuevo valor en 14px y
automáticamente verás actualizado el estilo.

[Link] [Link]
Sección 6.2 - Hojas de estilo

Si prefieres editar la regla desde el cuadro de diálogo haz doble clic sobre el nombre 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, cambia por ti mismo el color de fondo al código #69C (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.

Las pestañas te serán familiares: muestran los archivos abiertos en cada momento. Como en multitud 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 [Link]*. Esta barra reúne todos los documentos
asociados al archivo que está siendo editado actualmente. Como la hoja de estilo [Link] aplica sobre el archivo
[Link] podemos verla aquí. Además el asterisco indica que no está guardada porque acabamos de hacer
algunas modificaciones 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 normal. 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 momento de previsualizar la web mediante F12, se nos

[Link] [Link]
Sección 6.2 - Hojas de estilo

recordará que debemos guardar los documentos con modificaciones.

Incluir la hoja de estilos en otros documentos

Para que una hoja de estilo afecte a una página HTML tiene que estar adjunta o vinculada a la misma. Para ello
debemos hacer clic en el menú Formato, luego en Estilos CSS y por último en Adjuntar hoja de estilos... Aparecerá
un diálogo como el que se muestra en la figura. Aquí debemos seleccionar el archivo [Link] mediante 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 [Link], [Link] y [Link]

Curso de Formación Informática de Dreamweaver

por Salvador de la Puente González está licenciado bajo
Creative Commons Reconocimiento 3.0 España License.

[Link] [Link]
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.

Comenzaremos estudiando los estilos de los elementos de texto como hicimos en la Sección 4.1. Para añadir un
nuevo estilo haremos clic en el menú Formato, luego Estilos CSS y por último en Nuevo...

Para añadir estilos a la hoja actual y no a otra, tendremos que aseguraremos de que en el apartado Definición de
regla tenemos seleccionada la hoja de estilo que creamos anteriormente ([Link]) tal y como se muestra en la
siguiente figura.

[Link] [Link]
Sección 6.3 - Estilos de fondo, texto y listas

La categoría Tipo
En el cuadro de diálogo Definición de regla... encontramos muchas categorías en la lista de la izquierda.
Comenzaremos por estudiar la categoría Tipo.

font-family
Indica la familia del texto contenido en el interior del elemento. Las familias están compuestas por fuentes
separadas por comas. Si la primera fuente no está disponible, se prueba con la segunda y así sucesivamente.

font-size
Es el tamañ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 medir una tipografía. Los EMs son relativos al tamaño del texto circundante, por ejemplo, si el
texto del párrafo es de 12px y establecemos 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
tamaño del texto circundante", obtendremos un tamaño de 9px (75% de 12 = 9). Por último, los EXs
representan el tamaño del texto tomando como 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úmero de caracteres. Por ejemplo, para especificar 5 caracteres podemos indicar
5exs.

font-weight
Es el grosor del trazo. Los valores más comunes 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
La variación se refiere sencillamente a si deben usarse versalitas. Las letras versalitas son minúsculas en
forma de mayúsculas más pequeñas. Para activa el efecto debemos establecer el valor en small-caps.

line-height
Se refiere a la medida del alto de línea. Las unidades son las mismas que para el tamaño de la fuente.

text-transform
Aplica una transformación al texto. Estas pueden ser, según el valor establecido, capitalize (la primera

[Link] [Link]
Sección 6.3 - Estilos de fondo, texto y listas

letra de cada palabra en mayú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
como se hizo en la Sección 4.3 o indicando el código alfanumérico apropiado como hicimos al establecer el
color de fondo.

6.3.1 - Ejercicio guiado: categoría Tipo

En la página [Link] 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 elemento HTML) al igual que como hicimos para redefinir <body>. Sin embargo, esta
vez redefiniremos un encabezado de primer nivel por lo que elegiremos el selector h1 del cuadro desplegable.

Cambia las opciones tanto como desees haciendo clic en Aplicar para visualizar los efectos sin cerrar el
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 comprobarse 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 cambiar las opciones rápidamente 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.

[Link] [Link]
Sección 6.3 - Estilos de fondo, texto y listas

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, como
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).

backgroun-color
Indica el color de fondo. Como todos los controles de color, es posible elegir este desde la paleta o indicar
el triplete hexadecimal directamente en el campo de texto. No olvides la almohadilla antes del código.

background-image
Permite establecer una imagen de fodo. Podemos elejirla haciendo clic en el botón Examinar...

background-repeat
Establece el modo de repetición del fondo. El modo de repetición hace que la imagen 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 ambas
direcciones.

background-attachment
Indica cómo se fijará el fondo. Sus valores son fixed que hará que los elementos de fondo se mantengan
siempre en la misma 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. Comprobaremos el uso de esta propiedad al final del capítulo.

background-position (X)
Indica la posición del fondo en el ancho del elemento. 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 imagen por lo que para situar el fondo en
la mitad del elemento usaremos un valor del 50%. Es útil comentar aquí las posiciones constantes tales como
left, center y rigth que situan el fondo a la izquierda, en medio y a la derecha respectivamente.

background-position (Y)
Indica la posición del fondo en el alto del elemento. 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 elemento usaremos un valor del 50%. De nuevo comentar las posiciones constantes top, center y
bottom que situan el fondo en la parte superior, media o inferior del elemento.

6.3.2 - Ejercicio guiado: efecto desvanecimiento

[Link] [Link]
Sección 6.3 - Estilos de fondo, texto y listas

Continúa con las modificaciones a los encabezados de primer nivel. Para ello, en el panel de Estilo CSS
hacemos doble clic sobre el elemento h1 para abrir el diálogo.

Descarga el conjunto de imágenes de fondo y descomprime su contenido en la carpeta imagenes de tu sitio

web. Ahora define las propiedades de Fondo para los encabezados tal y como se muestra (la imagen se llama
fondo_titulo2.png y está en la carpeta fondos).

No olvides hacer clic en Aceptar y pulsar F12 para previsualizar los cambios en el navegador. Recuerda hacer
clic en actualizar o presionar F5 en el navegador para actualizar.

Si seguiste al pie de la letra esta Sección, deberías haber logrado un efecto de desvanecimiento en el fondo del
título como 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 mismo. 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 imagen 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
simultaneamente para lograr efectos muy interesantes como los que veremos a continuación.

Deja la configuración de Fondo como 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

[Link] [Link]
Sección 6.3 - Estilos de fondo, texto y listas

Ahora se presenta un fondo con repetición horizontal que se mantiene fijo pese a que descendamos por el
documento. 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

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

[Link] [Link]
Sección 6.3 - Estilos de fondo, texto y listas

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: mosaico

Por último, si se consigue la imagen adecuada, un efecto resultón es el uso de un mosaico con repetición
completa como el que lograréis al introducir la siguiente configuración (el archivo es fondo_cuerpo3.png).

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: experimentos

[Link] [Link]
Sección 6.3 - Estilos de fondo, texto y listas

Experimenta 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 elimina el efecto de
desvanecimiento si no lo hiciste ya.

La categoría Bloque
La categoría Bloque complementa la categoría Tipo pero con propiedades típicas de los párrafos. Vamos a cambiar
pues el aspecto del párrafo. Para ello crearemos un nuevo estilo para el elemento p.

word-spacing
Indica el espacio entre palabras. El espacio entre palabras puede aumentarse o disminuirse (usando
valores negativos). Esto permite 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 queremos decrementar el valor normal.

vertical-align
Establece el alineamiento 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
queramos situar el texto en el interior de las celdas de las tablas.

text-align
Establece el alineamiento del texto. Los valores de esta propiedad son los 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 mi elit et nisi. Quisque
consequat aliquam nibh. Duis mauris ligula, sodales vitae, iaculis vel, elementum vitae, justo. Donec
fringilla, orci nec luctus auctor, lorem ipsum sagittis lorem, eget lacinia mauris tellus eu velit. Nulla feugiat.
Ut purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed
sem nisi, tristique eget, egestas eu, posuere a, tortor. Vivamus ullamcorper feugiat mi. Suspendisse
sollicitudin condimentum ipsum. Mauris semper. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Cras adipiscing.

Texto alineado a la derecha: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante. Ut

[Link] [Link]
Sección 6.3 - Estilos de fondo, texto y listas

lectus. In varius. Donec condimentum sodales eros. Suspendisse justo. Nam quis tortor. Pellentesque
tincidunt, dui fringilla facilisis vestibulum, libero enim dignissim turpis, vel interdum mi elit et nisi. Quisque
consequat aliquam nibh. Duis mauris ligula, sodales vitae, iaculis vel, elementum vitae, justo. Donec
fringilla, orci nec luctus auctor, lorem ipsum sagittis lorem, eget lacinia mauris tellus eu velit. Nulla feugiat.
Ut purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed
sem nisi, tristique eget, egestas eu, posuere a, tortor. Vivamus ullamcorper feugiat mi. Suspendisse
sollicitudin condimentum ipsum. Mauris semper. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Cras adipiscing.

Texto alineado al centro: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante. Ut
lectus. In varius. Donec condimentum sodales eros. Suspendisse justo. Nam quis tortor. Pellentesque
tincidunt, dui fringilla facilisis vestibulum, libero enim dignissim turpis, vel interdum mi elit et nisi. Quisque
consequat aliquam nibh. Duis mauris ligula, sodales vitae, iaculis vel, elementum vitae, justo. Donec
fringilla, orci nec luctus auctor, lorem ipsum sagittis lorem, eget lacinia mauris tellus eu velit. Nulla feugiat.
Ut purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed
sem nisi, tristique eget, egestas eu, posuere a, tortor. Vivamus ullamcorper feugiat mi. Suspendisse
sollicitudin condimentum ipsum. Mauris semper. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Cras adipiscing.

Texto justificado: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante. Ut lectus. In
varius. Donec condimentum sodales eros. Suspendisse justo. Nam quis tortor. Pellentesque tincidunt, dui
fringilla facilisis vestibulum, libero enim dignissim turpis, vel interdum mi elit et nisi. Quisque consequat
aliquam nibh. Duis mauris ligula, sodales vitae, iaculis vel, elementum vitae, justo. Donec fringilla, orci nec
luctus auctor, lorem ipsum sagittis lorem, eget lacinia mauris tellus eu velit. Nulla feugiat. Ut purus. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed sem nisi, tristique
eget, egestas eu, posuere a, tortor. Vivamus ullamcorper feugiat mi. Suspendisse sollicitudin condimentum
ipsum. Mauris semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Cras adipiscing.

text-indent
Se refiere al sangrado de primera línea o indentación. El sangrado es el espacio desde el margen 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 conseguiremos 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ómo 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 tamaño del navegador automáticamente. Hace que el texto
se comporte como los elementos de párrafo normales. La segunda colapsa los espacios pero no ajusta el texto
a menos que encuentre un carácter específico de cambio de línea (que debe introducirse mediante la
combinación de teclas shift+enter). La última se comporta tal cual lo hace el texto predeterminado,
preservando todos los espacios y no ajustando el texto al explorador.

display
Indica qué tipo de caja debe aplicarse a un elemento. Hemos hablado de la caja de un elemento en
la propiedad vertical-align y trataremos este concepto en profundidad en la siguiente sección. Por el
momento, baste decir que CSS asigna una caja con unas determinadas propiedades que contiene la totalidad
del elemento. 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 eliminamos 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 comporte como 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.

[Link] [Link]
Sección 6.3 - Estilos de fondo, texto y listas

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 experimentar 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 última 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 elementos. Como aprendimos en la sección 4.1, existen tres tipos
de listas: ordenadas, no ordenadas y de definición. Por sus características, hemos dejado las listas de
definición a parte. Así pues, puedes colocar el cursor encima 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 Item o elemento de lista). No obstante, según estemos 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).

[Link] [Link]
Sección 6.3 - Estilos de fondo, texto y listas

list-style-type
Se refiere al tipo de numeración o marca 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úmeros romanos en
minúscula (i, ii, iii, iv...) o mayúscula (I, II, III, IV...) respectivamente y lower-alpha y upper-alpha que
utiliza letras minúsculas (a, b, c...) o mayúsculas (A, B, C...) respectivamente. 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 elementos pasarán a estar numerados de acuerdo al estilo romano en minúscula.

list-style-image
Indica la imagen que debe usarse como marca. El valor es una imagen que puede seleccionarse
mediante el botón Examinar... o Browse... y que reemplaza a la marca de lista no ordenada.

list-style-position
Establece cómo debe alinearse la marca del elemento. Los posibles valores son outside e inside.
El primero es el valor por defecto. Los elementos, no sus marcas, comenzarán alineados al mismo
margen vertical. El segundo valor hace que se alineen lar marcas, no así los elementos. Esta
propiedad se observa muy bien cuando se establece el valor inside y se combina con el estilo de números
romanos como veremos en el ejemplo.

6.3.9 - Ejercicio guiado: la categoría Lista

Descarga esta colección de imágenes de marca para experimentar con la propiedad list-style-image.
Descomprí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 elementos). Establece sus
propiedades como se indica en la figura. El estilo elegido es lower-roman.

[Link] [Link]
Sección 6.3 - Estilos de fondo, texto y listas

Haz lo mismo con una lista no ordenada y deja su configuración como se indica en la captura. El archivo se
encuentra en la carpeta marcas y se llama [Link].

Listas de definición
El problema de las listas de definición es que cada elemento está formado por al menos dos tipos de elementos, el
término a definir o el elemento HTML <dt> (acrónimo inglés de Definition Term) y la definición, elemento HTML
<dd> (acrónimo de Definition Definition). En principio, podemos hacer que los elementos <dd> y <dt> se comporten
como listas cambiando su propiedad display de la categoría Bloque a list-item. Sin embargo casi ningún
navegador soporta el uso de marcas para estos elementos por lo que tendremos que recurrir a otros trucos de
diseño si queremos conseguir un efecto similar.

6.3.10 - 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 F12 o

[Link] [Link]
Sección 6.3 - Estilos de fondo, texto y listas

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

Configuración de la categoría Lista. El archivo de imagen se llama [Link] y lo encontrarás dentro de la

carpeta marcas.

Tendrás que ver los resultados en el navegador pulsando F12.

De todas formas, 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.11 - Ejercicio: diferenciar los estilos HTML

El objetivo de este ejercicio es que actualices tu hoja de estilo para redefinir todos los
elementos HTML vistos en la sección 4.1 (destacado, énfasis, cita, código...) de forma que no se

[Link] [Link]
Sección 6.3 - Estilos de fondo, texto y listas

repita la presentación de los mismos, es decir, para poder diferenciar con claridad un texto en estilo código de
otro en estilo teletipo. Utiliza los conocimientos 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.

Curso de Formación Informática de Dreamweaver

por Salvador de la Puente González está licenciado bajo
Creative Commons Reconocimiento 3.0 España License.

[Link] [Link]
Sección 6.4 - El modelo de caja y formato de imágenes

Sección 6.4 - El modelo de caja y formato de

imágenes

El modelo de caja
Continuamos nuestra introducción a las propiedades CSS. En esta sección seguiremos 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 elemento lo alberga
totalmente y está dividido en cuatro partes: contenido, relleno, borde y margen; tal y como se muestra en la siguiente
figura.

Daremos ahora las definiciones de cada elemento y las propiedades de CSS que los gobiernan.

Contenido:
El contenido es, en principio, el mínimo rectángulo capaz de albergar al elemento HTML. Sin embargo,
podemos establecer las dimensiones del contenido mediante las propiedades width
(anchura) y height (altura).

Relleno:
El relleno es la 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 mediante 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 elemento 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 anteriormente explicada propiedad display,

Las categorías cuadro y borde

[Link] [Link]
Sección 6.4 - El modelo de caja y formato de imágenes

Antes de proseguir. Abre la página [Link] 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 dejamos 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 elemento que estamos 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 alineamiento. 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 predeterminado. 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 anteriormente.

margin
Se trata de la propiedad CSS que controla el margen 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
desmarcando la casilla de verificación Igual para todo. Con esta casilla activada, las propiedades de los cuatro
lados serán las mismas que la del lado superior (top).

6.4.1 - Ejercicio guiado: la propiedad float

[Link] [Link]
Sección 6.4 - El modelo de caja y formato de imágenes

Añade tu retrato justo antes del párrafo autobiográfico de [Link]. 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 Imagen) para establecer la propiedad float a
left o right, como tu prefieras.

NOTA: No confíes demasiado en la representación de Dreamweaver, pruébalo sobre un navegador con F12.

Observa las diferencias entre float a la izquierda o la derecha respectivamente.

Float a la izquierda

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 metus dapibus eget commodo sem mollis.
Nullam mollis nibh a lectus commodo 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 metus dapibus eget commodo sem mollis.
Nullam mollis nibh a lectus commodo non rhoncus nunc gravida. Integer
rutrum sem a turpis lacinia eget tempus orci convallis. Proin quis orci eget
felis porttitor dignissim.

Una forma de comprender float es pensar que indica hacia dónde "flota" un elemento entre los que le
siguen. Si decimos que a la derecha, el elemento se desplaza todo a la derecha que puede y los elementos
que lo siguen, lo rodean por la izquierda. Si decimos que flote a la izquierda, obtendremos el efecto contrario.

Cuando creas haber comprendido la propiedad, borra la regla (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 margen 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 Recaudación de las cinco películas más taquilleras

[Link] [Link]
Sección 6.4 - El modelo de caja y formato de imágenes

taquillero se refiere al número de entradas (ancho fijo)

vendidas y no a los millones de dólares Película Recaudación
recaudados. Si tuviéramos en cuenta sólo el
número de entradas, nos daríamos cuenta de Avatar (2009) $2,467,962,011
que Avatar, por ejemplo, no es la película
más taquillera de la historia. Este puesto Titanic (1997) $1,835,300,000
queda reservado para Lo que el Viento
Se Llevó con 202 millones de entradas The Lord of the Rings: The
$1,129,219,252
vendidas. Return of the King (2003)

Así, teniendo en cuenta sólo las entradas Pirates of the Caribbean: Dead
$1,060,332,628
vendidas, nos encontramos con que el Man's Chest (2006)
segundo puesto es para La Guerra de las
Galaxias y el tercero para Sonrisas y The Dark Knight (2008) $1,001,921,825
Lágrimas. 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 recuperaremos
más adelante).

NOTA: Se te ha pedido que realices dos ejercicios y luego los borres. Sin embargo ahora sabes manejar 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 hemos dicho, para el control del borde contamos una categoría exclusiva del mismo 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.

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

[Link] [Link]
Sección 6.4 - El modelo de caja y formato de imágenes

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 tamañ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 [Link] con imágenes y crea una nueva regla para la etiqueta img. Luego deja las
categorías cuadro y borde como se muestra en las siguientes figuras:

Configuración de la categoría Fondo

[Link] [Link]
Sección 6.4 - El modelo de caja y formato de imágenes

Configuración de la categoría Cuadro

Configuración de la categoría Borde

Prueba tu página y observa cómo 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 miden 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ábamos antes se vuelve de este color
Fíjate como el borde inferior es más ancho que el resto debido a que desmarcamos 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 margin 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).

[Link] [Link]
Sección 6.4 - El modelo de caja y formato de imágenes

Las limitaciones de los elementos HTML

Antes de pasar a la siguiente lección vamos a hacer incapié sobre algunas limitaciones de HTML. Supongamos que
tenemos el siguiente texto:

Imagine there's no Heaven

It's easy if you try
No hell below us
Above us only sky
Imagine all the people
Living for today

Imagine there's no countries

It isn't hard to do
Nothing to kill or die for
And no religion too
Imagine all the people
Living life in peace

Se trata de las dos primeras estrofas de la canción Imagine 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 elemento párrafo pero
esto afectaría a todos los párrafos del documento. Si contáramos con el elemento HTML "estrofa de canción",
bastaría con redefinir tal elemento, pero lamentablemente 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 remoto

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.

[Link] [Link]
Sección 6.4 - El modelo de caja y formato de imágenes

Curso de Formación Informática de Dreamweaver

por Salvador de la Puente González está licenciado bajo
Creative Commons Reconocimiento 3.0 España License.

[Link] [Link]
Lección 7: Introducción a CSS2 - II

Lección 7: Introducción a CSS2 - 2ª parte

Planteamiento
Requisitos previos

Comprensión de la estructura de un documento HTML (Lecciones 1, 4, 5 y 6)

Conocimiento y dominio de los elementos HTML más comunes (Lecciones 4 y 5)
Saber redefinir elementos HTML (Lección 6)

Objetivos de la Lección 7

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

Debes estudiar las secciones en el orden en el que se encuentran.

Duración estimada

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.

Curso de Formación Informática de Dreamweaver

por Salvador de la Puente González está licenciado bajo
Creative Commons Reconocimiento 3.0 España License.

[Link] [Link]
Sección 7.1 - CSS para tablas

Sección 7.1 - CSS para tablas

La estructura HTML de la tabla

Como vimos en la Lección 6, conocer la estructura HTML de un documento es, cuanto menos, ú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 determinar la
estructura de la web, hacemos uso del explorador de jerarquía, herramienta visual que nos facilita mucho el trabajo.

Antes de aprender a dar formato a una tabla, debemos conocer su estructura HTML para lo que haremos uso del
explorador de jerarquía y de la siguiente figura de referencia.

Esquema de la estructura de una tabla. La tabla está formada por filas y estas por celdas de cabecera o datos.

La figura puede resumirse así: la tabla (elemento table) está formada por un conjunto de filas (elementos tr del
Inglés Table Row o en Español, Fila de la Tabla), y cada fila puede contener varias celdas de tipo cabecera
(elementos 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 [Link] 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 mismo que la estructura de la tabla
coincide con el esquema ayudándote del explorador de jerarquía.

Formato de la tabla
Dar formato a una tabla consiste básicamente en redefinir tres elementos: la tabla en sí, las cabeceras y las celdas
de datos. Veremos algunas configuraciones comunes a través de ejemplos. Pruébalos sobre la tabla de
[Link].

7.1.2 - Ejercicio guiado: diseño básico de la tabla

[Link] [Link]
Sección 7.1 - CSS para tablas

Conviene esbozar un esquema de cómo queremos que se visualicen las tablas. Para comenzar haremos que
las tablas se visualicen con el siguiente estilo:

Ejemplo de tabla con estilo básico

Cabecera 1 Cabecera 2 Cabecera 3

datos datos datos

datos datos datos

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.

Acepta el diálogo y redefine ahora el elemento th para decidir el estilo de las cabecera. Especificaremos
negrita para la fuente y subrayado.

[Link] [Link]
Sección 7.1 - CSS para tablas

Establece también sus propiedades de borde usando la misma 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 muy
similar (salvo el color del texto) al que usamos como referencia.

Existen dos propiedades CSS que tienen que ver con las tablas pero que Dreamweaver no muestra en ninguna
categoría del diálogo de definición de regla. Estas propiedades permiten controlar el espacio entre celdas sin tener
que recurrir a las propiedades HTML de cada tabla.

Dado que no se encuentran en ninguna categoría, no las estudiaremos por el momento 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

datos datos datos

Esta vez, no anules la propiedad Esp de celda sino, sencillamente, déjala vacía.

Curso de Formación Informática de Dreamweaver

por Salvador de la Puente González está licenciado bajo

[Link] [Link]
Sección 7.1 - CSS para tablas

Creative Commons Reconocimiento 3.0 España License.

[Link] [Link]
Sección 7.2 - Clases, identificadores y composiciones

Sección 7.2 - Clases, identificadores y

composiciones

Selectores
Para poder abordar este tema es necesario tener muy 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 nombre de regla es un selector. Los selectores reciben este nombre porque indican sobre qué
elementos 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, llamado selector de clase, resulta extremadamente útil y ya hemos visto una
aplicación del mismo cuando explicamos 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 tomar elementos HTML y clasificarlos en distintos grupos permitié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.

[Link] [Link]
Sección 7.2 - Clases, identificadores y composiciones

Además, las clases nos ofrecen un mecanismo para crear elementos personalizados como veremos en el siguiente
ejercicio guiado.

NOTA: Para aquellos usuarios familiarizados con programas de maquetación o con el uso avanzado de procesadores de
texto, las clases se comportan de una manera muy similar a los estilos.

7.2.1 - Ejercicio guiado: clase estrofa para párrafos

Copia y pega en [Link] las dos primeras estrofas de la canción Imagine que veíamos al término de la
Lección anterior:

Imagine there's no Heaven

It's easy if you try
No hell below us
Above us only sky
Imagine all the people
Living for today

Imagine there's no countries

It isn't hard to do
Nothing to kill or die for
And no religion too
Imagine all the people
Living life in peace

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í podremos 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, tambié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

[Link] [Link]
Sección 7.2 - Clases, identificadores y composiciones

tendrá efecto la regla. En este caso indica:

Este nombre de selector aplicará la regla a todos los elementos HTML con clase "estrofa".

Ahora define las propiedades HTML como se indica en las figuras:

Propiedades de la categoría Tipo para la clase estrofa

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 nombre .estrofa, es decir, el nombre 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, como los de los identificadores deberían cumplir las siguientes reglas:

[Link] [Link]
Sección 7.2 - Clases, identificadores y composiciones

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 "menu_lateral" o
"menuLateral"
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 documento. Dado que muchos elementos
pueden pertenecer al mismo conjunto clase

De nuevo, Dreamweaver no te avisará de que exista un error si no cumples estas normas, así que presta 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 cambia su clase por estrofa.

Observa como el explorador de jerarquía indica que un elemento pertenece a una clase añadiendo un punto y
el nombre de la clase al nombre del elemento.

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 elemento 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.

Imagine there's no Heaven

It's easy if you try
No hell below us
Above us only sky
Imagine all the people
Living for today

Imagine there's no countries

It isn't hard to do
Nothing to kill or die for
And no religion too

[Link] [Link]
Sección 7.2 - Clases, identificadores y composiciones

Imagine all the people

Living life in peace

7.2.2 - Ejercicio: clase polaroid

El efecto polaroid de las imágenes está muy bien para la galería pero queda poco serio para una foto de CV.
Además, las restricciones en el tamaño destruyen los mapas de imagen que hemos creado ya que las
áreas conservan su tamaño mientras 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
queramos que presenten el efecto.

Así, para empezar, elimina la regla que redefine las imágenes de tu sitio web.

Luego crea una nueva clase llamada 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.
Vamos 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 momento preciso de
pulsar) respectivamente. La forma en la que definimos el selector de la regla será muy 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ñadiremos manualmente dos puntos
(":") seguido del nombre de la pseudo-clase que queramos definir.

7.2.3 - Ejercicio: estilo de los enlaces

Primero nos preocuparemos de dar un estilo base al 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 como en la figura. Fíjate en
el valor del cuadro desplegable Tipo de selector que ahora será Compuesto (basado en la selección):

[Link] [Link]
Sección 7.2 - Clases, identificadores y composiciones

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.

[Link] [Link]
Sección 7.2 - Clases, identificadores y composiciones

NOTA: Por desgracia, Dreamweaver no hace descripciones textuales cuando añadimos una pseudo-clase, así que
tendremos que imaginarla por nosotros mismos. 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: completa el estilo de los enlaces

Prueba por tu cuenta a cambiar el estilo de las dos pseudo-clases restantes: visited y link.

[Link] [Link]
Sección 7.2 - Clases, identificadores y composiciones

Trata de hacer que los enlaces, por defecto, tengan un efecto 3D de elevación (recuerda la propiedad
border-style) y que en el momento de pulsar (pseudo-clase active) pasa a tener un efecto de hundimiento.

Luego configura el estilo de las psudo-clases de la manera que más te guste.

Identificadores
En la Sección 6.1 hablamos de los identificadores o ID de los elementos div. Resulta que en HTML todo
elemento puede tener un identificador mientras este sea único dentro del documento. CSS2, por su parte,
nos proporciona un tipo de selector para seleccionar el elemento con identificador igual al que
especifiquemos.

7.2.5 - Ejercicio guiado: formato del pie de página

Abre la página [Link]. 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
nombre 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.

Composiciones
En estos momentos conocemos todos los tipos de selectores que pueden utilizarse pero CSS2 nos permite aun
más.

Las composiciones nos permiten seleccionar elementos teniendo en cuenta una jerarquía. Por ejemplo,
gracias a las composiciones podemos seleccionar "los elementos imagen dentro de tablas" mediante 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.

[Link] [Link]
Sección 7.2 - Clases, identificadores y composiciones

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 claramente. Vamos 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 primero 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 mano, 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 debemos tener en cuenta que el contenido se escribe a continuación del contenedor luego como
hemos 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 almohadilla (#)

2. Si el elemento es una clase, el nombre va precedido del símbolo 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 como #pie_de_pagina

Crea una nueva regla CSS tal y como se indica en la figura y en Nombre del selector introduce la frase que
acabas de deducir. La descripción debería coincidir en gran medida con tu frase en lenguaje natural. Si es así,
es que lo has hecho bien.

Elige un color para el texto que ofrezca un mejor contraste, como el #333.

7.2.7 - Ejercicio guiado: forma 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

[Link] [Link]
Sección 7.2 - Clases, identificadores y composiciones

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 elemento 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: formato de los div

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:

El ancho será de exactamente de 800px (categoría Cuadro)

Tendrá un relleno de 1em en todos los lados
Tendrá un margen de 0 en cualquier lado
El fondo de todos ellos será un patrón repetido (puedes usar [Link] o cualquiera de las
herramientas proporcionadas para ayudarte). Cudia la combinación de colores, no queremos que moleste.
Genera el patrón y guárdalo en la carpeta fondos.

Contenido:

[Link] [Link]
Sección 7.2 - Clases, identificadores y composiciones

El ancho será de exactamente de 800px (categoría Cuadro)

Tendrá un relleno de 1em en todos los lados
Tendrá un margen de 0 en cualquier lado
El color de fondo del contenido sea #fcedcf

Pie de página:

El ancho será de exactamente de 800px (categoría Cuadro)

Tendrá un relleno de 1em en todos los lados
Tendrá un margen de 0 en cualquier lado
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.

Resumen 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 Nombre del selector respectivamente y la última
columna es la representación CSS del selector.

¿Qué Nombre
Frase de Tipo de Representación
queremos del
ejemplo selector CSS
modificar? selector

"Todos los Elemento

Etiqueta p p
párrafos" HTML

Un conjunto
"Las
de Clase estrofa .estrofa
estrofas"
elementos

"El texto
enfatizado
Una
de las #contenido #contenido .estrofa
jerarquía de Compuesto
estrofas .estrofa em em
elementos
del
contenido"

Un
"El menú" elemento en ID menu #menu
concreto

"Los Un
enlaces en elemento en
el un Compuesto a:active a:active
momento determinado
de pulsar" estado

[Link] [Link]
Sección 7.2 - Clases, identificadores y composiciones

Curso de Formación Informática de Dreamweaver

por Salvador de la Puente González está licenciado bajo
Creative Commons Reconocimiento 3.0 España License.

[Link] [Link]
Sección 7.3 - Posicionamiento

Sección 7.3 - Posicionamiento

Tipos de posicionamiento
Mediante CSS, podemos afectar al posicionamiento de los elementos de dos formas. 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 posicionamiento
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 mediante 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 denomina 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, permite 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.

[Link] [Link]
Sección 7.3 - Posicionamiento

7.3.1 - Ejercicio guiado: centrando el contenido

La mejor manera 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 [Link] y utiliza el explorador de jerarquía para seleccionar el cuerpo entero. Ahora inserta
un nuevo div que rodee todo el contenido y dale como identificador el nombre envoltorio.

Usa el explorador de jerarquía para comprobar que el envoltorio rodea efectivamente los cuatro divs.

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 acabamos de decir, un elemento tiende a ocupar
todo el ancho de su elemento 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 web

[Link] [Link]
Sección 7.3 - Posicionamiento

Aplica la técnica del envoltorio a las páginas [Link], [Link] y [Link].

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 elemento table de HTML) para que aparezcan
centradas. Para ello, no podrás añadir elementos nuevos al diseño, sólo modificar la hoja de estilos.

Cuando termines, sincroniza el servidor remoto.

Columnas 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 columna lateral

Abre cualquiera de las páginas [Link], [Link] o [Link] 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 como se indica en la figura.

Observa el resultado en el navegador. Algo está mal. ¿El qué?

[Link] [Link]
Sección 7.3 - Posicionamiento

Observa como el texto rodea al menú. 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
completamente. Como dijimos, falta abrir espacio a la izquierda del contenido. Conseguiremos esto
estableciendo un margen izquierdo para el div de contenido igual al ancho de la columna.

Edita la regla asociada al identificador contenido y estableces sus propiedades CSS tal y como se muestra en
la figura:

Ojo que el margen 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 siempre la misma proporción del área útil de pantalla. Se denominan líquidos porque hacen fluir
sus elementos para adaptarse al área de la pantalla.

Ejemplos de diseños líquidos:

[Link]
[Link]
[Link]

[Link] [Link]
Sección 7.3 - Posicionamiento

Ejemplos de diseños rígidos:

[Link]
[Link]
[Link]

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 recomendaban los diseños líquidos aludiendo que podían adaptarse a una mayor variedad de
dispositivos. No obstante, los diseños rígidos siempre han ofrecido un mayor 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 como 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ínimo (en unidades absolutas). Podemos
consultar las estadísticas sobre resoluciones de pantalla que nos proporciona la [Link] para determinar el ancho
mínimo.

Con las estadísticas delante observamos como actualmente, el 76% de los usuarios usan resoluciones mayores a
1024x768 (expresado como ancho x alto). Luego si establecemos 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 como por ejemplo, 924.

7.3.6 - Ejercicio guiado: ancho mínimo del diseño

Establecer el ancho mínimo del diseño a 924px no es trivial porque Dreamweaver no nos ofrece visualmente
las propiedades CSS min-width y min-height que son las que controlan el mínimo ancho y alto
respectivamente. Para añadirlas haremos uso del panel Estilos CSS tal y como se indica a continuación.

Abre la página [Link], 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
min-width. Haz clic sobre ella y establece su valor a 924px.

[Link] [Link]
Sección 7.3 - Posicionamiento

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 problema 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, muy 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áximo del diseño

De nuevo, Dreamweaver no nos permite acceder directamente 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 modelo de
caja. El problema es que estableciendo margen entre celda y celda separamos 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 problema.

[Link] [Link]
Sección 7.3 - Posicionamiento

Curso de Formación Informática de Dreamweaver

por Salvador de la Puente González está licenciado bajo
Creative Commons Reconocimiento 3.0 España License.

[Link] [Link]
Sección 7.4 - Detalles del sitio web

Sección 7.4 - Detalles del sitio web

NOTA: Estamos en la recta final del curso pero antes de terminar vamos pulir algunos aspectos de nuestro sitio web.

Vamos a trabajar únicamente sobre [Link], [Link] y [Link] aunque conservaremos las páginas
[Link] y [Link]

Título del sitio web

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 web

Dentro del div cabecera incluye un encabezado de nivel 1 con el título de tu sitio web, por ejemplo: Web
personal de [tu nombre].

Deberás cambiar 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í sucesivamente.

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):

Página Título de la barra de título

Web personal del Dr Zoidberg - Datos

[Link]
personales

Web personal del Dr Zoidberg -

[Link]
Currículum online

Web personal del Dr Zoidberg -

[Link]
Galería de fotos

Modificación de la estructura del sitio web

Nuestro sitio web ha cambiado mucho desde el comienzo del curso hasta ahora. Hemos reestructurado la

[Link] [Link]
Sección 7.4 - Detalles del sitio web

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: eliminando archivos innecesarios

Elimina las páginas [Link] y [Link]. Ve al explorador de archivos para ello, seleccionalas y pulsa
suprimir.

Al borrar una página web enlazada por otras, aparecerá un aviso como 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 nombre de [Link] a [Link]. 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 rompan.

NOTA: Se dice que un vínculo está roto cuando no se puede disponer del contenido al que nos lleva.

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 debemos 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.

[Link] [Link]
Sección 7.4 - Detalles del sitio web

7.3.10 - Ejercicio guiado: el verificador de vínculos

Abre la página [Link]. 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 mostrará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 mostrará un resumen con los vínculos rotos de la página. La primera columna muestra 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.11 - 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.12 - 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.

[Link] [Link]
Sección 7.4 - Detalles del sitio web

Esta configuración sincronizará todo el sitio web y eliminará 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
comprimir en un ZIP todos los archivos de tu sitio web y enviar el comprimido a tu tutor para que sea
corregido. Utiliza el ejercicio identificado como Lección 7 de la herramienta Entrega de ejercicios.

Curso de Formación Informática de Dreamweaver

por Salvador de la Puente González está licenciado bajo
Creative Commons Reconocimiento 3.0 España License.

[Link] [Link]
Lección 8: Formularios

Lección 8: Formularios

Planteamiento
Requisitos previos

Conocimiento de tablas y diseño con divs (Lecciones 5 y 6)

Conocimientos básicos sobre estilos CSS

Objetivos de la Lección 8

Concienciar al alumno sobre la importancia de los formularios

Familiarizar al alumno con la creación de formularios
Presentar las disposiciones más corrientes para formularios

Secciones

1. El formulario web
2. Los elementos del formulario web
3. Distribución en párrafos

Debes estudiar las secciones en el orden en el que se encuentran.

Duración estimada

Nos tomamos un descanso con CSS y volvemos a HTML ampliando los conocimientos de las lecciones 5 y 6.
Este tema es fácil y supondrá como mucho un par de sesiones de 1 a 2 horas.

Curso de Formación Informática de Dreamweaver

por Salvador de la Puente González está licenciado bajo
Creative Commons Reconocimiento 3.0 España License.

[Link] [Link]
Sección 8.1 - El formulario web

Sección 8.1 - El formulario web

Comunicació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 millones 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 información a Internet.

HTML permite la interacción por el usuario por medio de los llamados formularios. 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 formulario muy sencillo en la página principal de Google.

Observa el campo 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"

[Link] [Link]
Sección 8.1 - El formulario web

El panel de publicación de noticias de Wordpress reúne muchos formularios. 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...

Dos formularios de Facebook. El primero situado en horizontal en la banda superior sirve para iniciar sesión mientras

[Link] [Link]
Sección 8.1 - El formulario web

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.

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

Formularios en este curso

Así como el diseño web se encarga de presentar la información del sitio web al usuario, la programación web se
encarga del comportamiento 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 suministra el mismo a través de los formularios.

La programación web queda fuera del alcance de este curso por lo que el tratamiento de formularios, es decir, la
respuesta por parte de nuestro sitio web a las interacciones del usuario, será nula.

No obstante aun podemos usar los formularios para crear plantillas de correo 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 (como 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 misma 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 formulario web
Dreamweaver nos ofrece una forma muy sencilla de incluir un formulario en nuestra página web. La herramienta
Formulario está situada en el panel lateral Insertar, categoría Formularios.

[Link] [Link]
Sección 8.1 - El formulario web

La herramienta Formulario, , introduce un elemento form. Este elemento se comporta como una
suerte de div. Como él, puede tener un identificador o una clase y, en definitiva, puede contener cualquier elemento
de HTML. Al usar la herramienta formulario, Dreamweaver señalará el formulario como un rectángulo rojo.

Haz clic para ampliar 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 llamados [Link].
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 forman nuestro diseño: cabecera, menu, contenido y pie_de_pagina. Utiliza la
siguiente configuración para introducir cada uno de los elementos div (cambia la etiqueta convenientemente).

Abre [Link], añade la página de encuestas al menú y copia en [Link] el contenido del encabezado,

[Link] [Link]
Sección 8.1 - El formulario web

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 momento, 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 herramienta Formulario del panel Insertar, categoría
Formularios.

Ayúdate del explorador de jerarquía para seleccionar el formulario y cambiar el identificador del formulario por
encuesta.

Haz clic dentro del formulario y comprueba si hay un párrafo en su interior. De no ser así, añade uno pulsando
Intro.

Además, utilizando CSS, redefine los párrafos que estén dentro de formularios para que no tengan
sangría en la primera línea y redefine el elemento HTML label para que esté en negrita.

Hay que destacar dos propiedades HTMLde los formularios:

method
Indica el método de envio. Puede tener dos valores: get, que adjunta el formulario a la dirección de destino en
la forma campo=valor y que formarí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 formulario 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 [Link] para
indicar que el formulario 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 email
convenientemente.

Curso de Formación Informática de Dreamweaver

por Salvador de la Puente González está licenciado bajo

[Link] [Link]
Sección 8.1 - El formulario web

Creative Commons Reconocimiento 3.0 España License.

[Link] [Link]
Sección 8.2 - Los elementos del formulario web

Sección 8.2 - Los elementos del formulario web

El diálogo de accesibilidad
Cuando queramos introducir case cualquier elemento de un formulario, aparecerá el Diálogo de accesibilidad del
elemento que es común para todos ellos.

El panel de accesibilidad permite indicar un nombre descriptivo del nuevo elemento en el campo ID. En Etiqueta
podemos especificar el nombre que se mostrará junto con el elemento. Estilo permite elegir la forma en que la
etiqueta acompañará al elemento. Para una mayor libertad en la distribución de los elementos, se recomienda 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 respectivamente.

El diálogo no es obligatorio por lo que podemos hacer clic tanto en Aceptar como en Cancelar e igualmente,
habremos añadido el elemento del formulario. No obstante es altamente recomendable rellenarlo primero.

Campos de texto
Estando dentro de un formulario podemos insertar muchos tipos de elemento. El primero que estudiaremos es el
campo de texto, . 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 podemos destacar las siguientes propiedades.

[Link] [Link]
Sección 8.2 - Los elementos del formulario web

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. max
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 Intro para cambiar de línea. La segunda permite utilizar la tecla Intro para cambiar de línea
pero no la utilizaremos aquí. La última enmascara los caracteres para que no puedan ser vistos como ocurre
en el campo contraseña de multitud de formularios.

Valor inicial
Permite escribir un valor inicial para el campo de texto.

8.1.3 - Ejercicio: campos de texto

En [Link], 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 convenientemente el diálogo de accesibilidad.

Configura las opciones según la siguiente tabla:

Ancho car Car. max Tipo Valor inicial

20 20 Una línea [vacío]

Áreas de texto

El área de texto, , se parece al campo de texto en cuanto a que también permite 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 muy parecido al del campo de texto.

[Link] [Link]
Sección 8.2 - Los elementos del formulario web

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 [Link] 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:

Ancho car Líneas num Valor inicial

100 10 [vacío]

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 herramienta Casilla de verificación,
introduce un nuevo elemento 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 elemento de formulario

Su panel de propiedades, muy sencillo, encierra solamente tres propiedades importantes.

Nombre de casilla
Esta casilla está presente en la mayor parte de los elementos y representa el nombre del mismo. Sin embargo,
en las casillas de verificación tiene un significado especial porque nos permite agruparlas. Todas las respuestas
a una misma pregunta deben tener el mismo nombre en nombre de casilla.

[Link] [Link]
Sección 8.2 - Los elementos del formulario web

Valor activado
Es el valor que se enviará cuando esté activado. Por ejemplo, en el ejemplo de esta misma 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 resumir el significado de la etiqueta.

Estado inicial
Indica si el elemento debe aparecer activado o desactivado por defecto.

NOTA: Para seleccionar el elemento casilla de 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 [Link] En el formulario, 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.

Valor Estado
Etiqueta
activado inicial

La página principal con los

datos Desactivado
datos personales

La página con el
curriculum Desactivado
currículum

La página con la galería de

fotos Desactivado
imágenes

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+Intro en vez de solamente Intro.
Cuando insertes un salto de línea detrás de una casilla de verificación Dreamweaver 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 forma 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:

[Link] [Link]
Sección 8.2 - Los elementos del formulario web

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 permiten 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 queremos 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 compartir el nombre
para ser consideradas como opciones de la misma pregunta. Estos botones también se denominan
botones de radio.

La heramienta 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 completo 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

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 nombre en

[Link] [Link]
Sección 8.2 - Los elementos del formulario web

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 [Link]. 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:

Valor Estado
ID Etiqueta
activado inicial

Me gusta
valoracion bueno Desactivado
mucho

No me llama
valoracion especialmente regular Activado
la atención

valoracion No me gusta pobre Desactivado

8.1.8 - Ejercicio guiado: grupos de botones de opción

Del mismo modo que ocurría con las casillas de verificación, una forma 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:

Diálogo de creación de grupos de casillas de verificación

[Link] [Link]
Sección 8.2 - Los elementos del formulario web

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 forma de menú)

Álava
Álava

Provincias visitadas (en forma de lista)

Álava
Álava
Albacete
Albacete
Alicante
Alicante
Almería
Almería
Asturias
Asturias
Ávila
El panel de propiedades HTML de un menú (o lista) está formado por los siguientes campos:

Tipo
Las opciones son Menú y Lista. Como puedes ver en el ejemplo, el menú deja ver solamente una opción y
despliega el resto al hacer clic sobre él. Por el contrario, la lista ofrece más de una opción y permite
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 manteniendo 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 podemos 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.

[Link] [Link]
Sección 8.2 - Los elementos del formulario web

Los botones etiquetados con un más y un menos permiten añadir nuevas opciones a la lista y eliminarlas. 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-mail en nuestro caso) al destino del formulario.

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 menú

Inserta un menú para que el encuestado seleccione su provincia de nacimiento (no es necesario que incluyas
todas). Toma como referencia el ejemplo de menú 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 mundo). Ajusta el alto de
la lista para que muestre al menos 4 paises ya que si lo dejas en uno no servirá para nada.

Botones
En la mayoría de formularios necesitamos un botón para aceptar la información introducida y enviarla. Esto se
consigue mediante la herramienta Botón, .

Escribe tu nombre Enviar Borrar

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.

[Link] [Link]
Sección 8.2 - Los elementos del formulario web

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 programación podemos crear muchos tipos de botón, nosotros nos
limitaremos a dos tipos: Enviar formulario y Restablecer formulario. El primero permite enviar el formulario al
destino del mismo y el segundo establece todos los elementos a sus valores por defecto.

8.1.10 - Ejercicio: botones

Al final del formulario de [Link] añade sendos botones para enviar y borrar el formulario.

NOTA: Los errores más títpicos creando formularios son omitir la propiedad Acción del formulario, insertar varios
formularios, uno por elemento (esto no debe ser así, todos los elementos relacionados con un formulario deben estar dentro
del mismo y único formulario) y olvidar añadir un botón de envío.

8.1.11 - Ejercicio: sincronizando el servidor remoto

Enlaza la página [Link] en el menú de tu sitio web, sincroniza el servidor remoto y prueba el
formulario desde Internet.

[Link] [Link]
Sección 8.2 - Los elementos del formulario web

Curso de Formación Informática de Dreamweaver

por Salvador de la Puente González está licenciado bajo
Creative Commons Reconocimiento 3.0 España License.

[Link] [Link]
Sección 8.3 - Distribución en párrafos

Sección 8.3 - Distribución en párrafos

Título, comentario y campo

Como habrás comprobado, disponer los elementos de un formulario resulta un poco confuso y complicado. En esta
sección vamos a explicar una forma de ordenar los elementos 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 información extra.

Un ejemplo de este modelo se presenta a continuación:

Provincias visitadas

Seleccione las provincias que haya visitado. Mantenga

presionada la tecla control para realizar una selección
múltiple.

Álava
Álava
Albacete
Albacete
Alicante
Alicante
Almería
Almería
Asturias
Asturias
Ávila
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 mediante 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 primero 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 aconsejamos en la Sección 8.1 introducimos saltos de línea (combinación shift+intro) para distribuir las
opciones en líneas distintas del mismo 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á simplemente un párrafo y cada etiqueta
acompañará a su casilla o botón correspondiente.

8.3.1 - Ejercicio guiado: disposición mediante párrafos del campo de texto

[Link] [Link]
Sección 8.3 - Distribución en párrafos

Abre [Link], borra el estilo label y crea dos nuevos estilos de clase (Sección 7.2) : comentario y
titulo_campo. Haz que comentario mida 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 formato (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 comprueba el resultado en el navegador.

8.3.2 - Ejercicio guiado: disposición mediante párrafos de las casillas de

verificación

Continúa editando [Link]. Ahora ve al párrafo que comienza por Marque las secciones... y cambia su
clase a comentario.

Introduce un párrafo antes que el con el texto Secciones útiles y cambia su clase a titulo_campo.

[Link] [Link]
Sección 8.3 - Distribución en párrafos

Guarda la página y comprueba el resultado en el navegador.

8.3.3 - Ejercicio: disposición mediante párrafos del resto de elementos del

formulario

Aplica la disposición mediante párrafos al resto de los elementos del formulario.

Trata de que los comentarios sean explicativos.

Cuando termines sincroniza el servidor remoto.

Otras disposiciones
Existen otras disposiciones que requieren un uso avanzado de CSS y para las que Dreamweaver, utilizando sólo la
vista de diseño, procura más inconvenientes que ventajas por lo que, aunque no explicaremos más, vamos al
menos a citarlas.

La distribución mediante divs es más flexible aunque considerablemente más compleja y requiere un duro trabajo
con estilos CSS que trataremos de simplificar.

La idea es tener dos div por elemento y un envoltorio que los cubra y limite el espacio que ocupan. Para los
campos de texto, el primero flota a la izquierda, ocupa un ancho fijo y contiene el párrafo de título y el
comentario. 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 mediante tablas y es más compleja. La idea es prácticamente la misma que con divs pero
utilizando la propia tabla como envoltorio y sus celdas como los divs internos.

8.3.4 - Ejercicio: entrega el sitio web

Has concluído la Lección 8. Ahora debes comprimir en un ZIP todos los archivos de tu sitio web y enviar el
comprimido a tu tutor para que sea corregido. Utiliza el ejercicio identificado como Lección 8 de la
herramienta Entrega de ejercicios.

Curso de Formación Informática de Dreamweaver

por Salvador de la Puente González está licenciado bajo
Creative Commons Reconocimiento 3.0 España License.

[Link] [Link]
Sección 8.3 - Distribución en párrafos

[Link] [Link]
Lección 9 - Ejercicio final

Ejercicio final

9.1.1 Ejercicio: sitio web completo

Como ejercicio final del curso debes desarrollar un micro sitio web simulando una revista online de coches
llamada TodoMotor. En estos momentos, TodoMotor se encuentra presentando el vehículo Tesla Road de
Tesla Motors.

Ten en cuenta las siguientes indicaciones:

Consejo: procura anular el margen y el relleno de cada elemento antes de comenzar a realizar otros ajustes.
Repasa el modelo de caja y ten muy presente cómo se calculan las medidas de la caja (por ejemplo, ancho total =
ancho + rellenos + márgenes). Luego realiza los ajustes que sean necesarios. Cuando decimos que un elemento debe
medir 100 píxeles de ancho nos referimos al total, contando los rellenos y márgenes.

Consejo: diseña la página inicial "[Link]" 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ímelo en la carpeta donde crearás la práctica final.
3. Crea las páginas web [Link], [Link], [Link], [Link]. Esto es muy importante:
cuando crees la hoja de estilo CSS lllámala [Link]
4. Mediante divs y CSS, imita el siguiente diseño líquido que presentamos a continuación en todas las
páginas:

[Link] [Link]
Lección 9 - Ejercicio final

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).

8. Ten en cuenta que el fondo del cuerpo está fijo pero el del envoltorio, no. Ten en cuenta también el color de

[Link] [Link]
Lección 9 - Ejercicio final

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 [Link] 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").

Inserta la imágen justo antes de la lista índice y ajusta su "flotación" convenientemente mediante CSS

[Link] [Link]
Lección 9 - Ejercicio final

Al final se debe incluir un enlace al artículo original de Wikipedia

10. Abre [Link] 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).

Personaliza el efecto polaroid como quieras, no hace falta que sea como el de la figura

11. Vuelve a la página [Link] y añade al final una nueva sección llamada 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 imagen.
Debe ocupar el 70% del ancho del contenido:

[Link] [Link]
Lección 9 - Ejercicio final

12. Ve a la página [Link]. En la carpeta detalles, de los recursos, encontrarás una foto llamada [Link].
Añádela bajo el encabezado Detalles y crea un mapa de imagen para enlazar con cada foto detalle.

13. Abre la página [Link] 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@[Link]. 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

[Link] [Link]
Lección 9 - Ejercicio final

4. Casillas de verificación para el equipamiento: 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

14. Sincroniza el servidor remoto con la siguiente configuración. A partir de ahora, no marques 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 como Sitio web 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 programa. Sin embargo,
ahora debes ser capaz de desarrollar sitios web sencillos con una completa funcionalidad.

Por favor, no te olvides de rellenar la encuesta final. Tu opinión es muy importante para que podamos ir mejorando
los cursos en cada siguiente edición. ¡Gracias!

Curso de Formación Informática de Dreamweaver

por Salvador de la Puente González está licenciado bajo
Creative Commons Reconocimiento 3.0 España License.

[Link] [Link]