Curso_de_Dreamweaver.pdf

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 Vista en vivo. Como hemos dicho, en este m odo, propio de Dreamweaver CS4, podemos visualizar la página web com o si la viéramos en el navegador por defecto pero sin salir de Dreamweaver. Es especialmente útil durante el desarrollo pero debe desactivarse antes de poder seguir editando la
página con norm alidad. Podemos entrar y salir de la vista en vivo mediante la combinación alt + F1 1 .
Page 47 of 158
08/ 11/ 2010

Los encabezados
Fíjate en el título de esta página web, en él puede leerse "Sección 4.1 - Encabezados, párrafos y listas". Fijate además en el título de este apartado o del anterior donde ponía "Las vistas de la página web". Ambos son ejemplos de encabezados o títulos.
Los elementos encabezado se utilizan para dividir un texto en secciones, como ocurre con los capítulos de un libro de texto o los apartados de una ley, por ejemplo. La sección de texto com ienza en el encabezado y termina en el final de la página o en el siguiente encabezado.
Para convertir un texto en encabezado basta cambiar su propiedad Form ato a Encabezado 1 en el panel de propiedades.
NOTA: A lo largo de los ejercicios, no te preocupes si tus resultados no quedan igual que en los ejemplos en cuanto a espacios y colores se refiere. Es nomal, puesto que aun no hemos aprendido a usar estilos CSS. No obstante, este curso sí los usa internamente.
4 .1 .1 - Ejercicio guiado: definir un encabezado para datos.htm l
Vamos a modificar la página web datos.htm l. Si no la tienes abierta ya, abre este archivo haciendo doble clic en él desde el explorador de archivos. Asegúrate de que la vista seleccionada se encuentra en diseño para que el código HTML no aparezca. Selecciona el contenido de la página web y suprímelo con
la tecla suprim ir o borrar de tu teclado.
Ahora escribe un encabezado para esta página que hablará un poco de nosotros m ismos. Por ejemplo, escribe el texto "Sobre mí" (sin las comillas). Luego haz clic sobre la palabra "mi" para colocar el cursor en la línea de texto del encabezado y cambia su propiedad Formato situada en el panel Propiedades
Page 48 of 158
08/ 11/ 2010

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

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

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

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

Curso_de_Dreamweaver.pdf

Recomendados

Recomendados

Más contenido relacionado

Similar a Curso_de_Dreamweaver.pdf

Similar a Curso_de_Dreamweaver.pdf (20)

Último

Último (20)

Curso_de_Dreamweaver.pdf