Curso de Dreamweaver CS3

- Estoy diseñando la página Web de mi primo.
Muchas veces, al hablar sobre diseño Web, usamos indistintamente los términos página y sitio Web .A  partir de ahora, vamos a hablar con propiedad, ya que para Dreamweaver es muy importante el concepto de SITIO Web.
Una página Web suelta no es nada.
Ya hemos visto que una página Web es solamente un archivo .htm de código. No es nada si no está junto con los archivos que se ven en ella (imágenes, vídeos, películas flash, etc.)

Cuando accedemos a una dirección de Internet o a  un dominio, éste no está únicamente  formado por una sola página. De la primera pasamos a otras a través de enlaces. Todas están  situadas en el mismo dominio.

Un sitio Web es el conjunto de todas las páginas Web y archivos necesarios (imágenes, vídeos, etc) comunes a un dominio de Internet.
Técnicamente un sitio Web se identifica con una CARPETA, la llamada CARPETA RAÍZ, que va a contener TODOS los archivos necesarios de una dirección de Internet (tanto páginas Web como los archivos que éstas necesiten para reproducirse: imágenes, archivos de programación, vídeos...)

Fig. 2. Dreamweaver es ante todo un gran ORGANIZADOR de sitios Web.
En la unidad de trabajo de Dreamweaver lo primero es la Carpeta Raíz del SITIO...
... después están las páginas.

Es importante que tengamos clara esta idea de SITIO WEB = CARPETA ya que, si Dreamweaver destaca por algo, no es por lo potente que es creando páginas Web (que lo es), sino por las facilidades que tiene para trabajar con SITIOS, es decir, organizar la relación entre las páginas Web .htm y los diferentes archivos que éstas necesitan dentro de la Carpeta Raíz

Tengo un colega diseñador que cuando le llaman programador se revuelve como si le hubieran dicho un insulto.
Generalmente, al usuario primerizo le suele asustar cualquier cosa que suene a programación.
- ¿Pero esto no era un curso de diseño?

Si eres uno de ellos, puedes tranquilizarte por dos razones:

• Porque el lenguaje HTML es el lenguaje con el código más simple del mundo.
• Y porque Dreamweaver programará por nosotros y escribirá el código de lo que  estemos diseñando.
  Pero no nos vendrá mal saber lo que se está cociendo entre bastidores.

Como hemos visto más arriba, HTML es el código con el que se escriben las páginas Web.
Podemos decir por lo tanto que el HTML es el lenguaje usado por los navegadores para mostrar las páginas Web al usuario.
Recuerda que puedes ver el código HTML de cualquier página en el navegador desde el menú Ver > Ver Código fuente de la página.

Más adelante nos iremos adentrando en el breve glosario de ordenes que componen el lenguaje HTML.
Pero por ahora, nos basta con saber que se basa en un elemento llamado etiqueta.
Cada etiqueta supone una orden (en forma de texto) al navegador para que cree un objeto.
Por ejemplo, el código de un párrafo:

<p> Led Zeppelin es el mejor grupo de rock de la historia. </p>

Toda etiqueta contiene una Apertura <p> , un contenido y un Cierre </p>
De manera que se forma una especie de "paquete" que determina al navegador cuando empieza y cuando termina el objeto. En este caso, el párrafo.

Paquete a paquete se va construyendo la página

Créeme, no me detendría a hablar de los orígenes del lenguaje HTML si no fuera útil.
Es interesante saber para qué se creo o cómo ha sido modificado, para comprender  los problemas con los cuales nos vamos a encontrar en el futuro.

1. HTML ORIGINAL: el núcleo
	En los comienzos Internet era una herramienta de uso entre científicos y Universidades para intercambiar información: artículos, estudios, tablas de datos, etc. Lo que más importaba era TRANSMITIR LA INFORMACIÓN: una presentación limpia y legible de los textos, datos e imágenes. Por esa razón el número de etiquetas que conforman el HTML original es muy corto y simple : párrafo, titulares, negrita, imagen, enlace y poco más. Al ser tan simples estas versiones del HTML eran perfectamente procesables por cualquier navegador. Se cargaban rápidamente y sin problemas de visualización.

2. ... ¡ Y vinieron los diseñadores !
	En poco tiempo se creo el World Wide Web. El uso de Internet se popularizó y las páginas Web tuvieron otros usuarios que se preocupaban no sólo por el contenido sino por cómo se presentaba ese contenido. En el HTML se empezaron a insertar nuevas etiquetas y modificadores para dar cabida a esos nuevos conceptos del diseño gráfico que antes no existían en el HTML original : alineación, márgenes, tamaños, color , fuentes diversas, efectos del ratón, maquetación, ... es decir, EL FORMATO. Eso provocó que los diferentes navegadores interpretaran las novedades de forma diferente. El HTML se hizo más intrincado para los navegadores

3. XHTML: ¡orden en la sala¡
	Ha quedado claro que había dos intereses diferentes: Transmitir la información limpiamente. Aspecto y diseño de la página al usuario EL XHTML, una nueva evolución del html, separa esos dos objetivos y se dedica SOLO al primero. Elimina del código todos los añadidos y modificaciones relativas al formato. Dejando el HTML en unos estándares fijos, simples y perfectamente reconocibles por cualquier navegador (incluso por otros dispositivos como PDAS ,impresoras, teléfonos móviles, etc.) - ¿Y quién se ocupa ahora del diseño, del formato de la página Web? El XHTML ya no. Esto se deja a otro tipo de programación llamada Estilos CSS. Este tipo de programación está solamente dirigido al diseño. Lo veremos en detalle más adelante.

En RESUMEN:
Dreamweaver CS3 es la última versión por lo que atiende a las últimas tendencias del HTML: crea los documentos en Xhtml (Html eXtensible)
Para lo que trataremos en este curso, basta con que os quedéis con estos conceptos:

• El XHTML sólo tiene órdenes respecto a la estructura de la información de la página.
  No contiene etiquetas ni atributos respecto al diseño (color, tamaños, alineaciones...)
• Existen dos formas de aplicar diseño a la información de una página Web:
  • HTML: etiquetas y atributos específicos que hacen más complejo el código de la página a los navegadores.
    (está en desuso)
  • Estilos CSS: se inserta dentro de la página Web dejando el código html limpio para los navegadores.
    (es el método que usa DW por defecto)