1.1. Qué es Dreamweaver CS5

Dreamweaver CS5 es un software fácil de usar que permite crear páginas web profesionales.

Las funciones de edición visual de Dreamweaver CS5 permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML.

Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc.., de una forma muy sencilla y visual.

Además incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar con mapas visuales de los sitios web, actualizando el sitio web en el servidor sin salir del programa.

Para seguir este curso te puedes descargar la versión gratuita de Dreamweaver desde la página de Adobe, la versión caduca al cabo de 30 días, pero seguro que te dará tiempo a entenderlo y decidir si quieres adquirir la versión completa de este fantástico programa.

Nota: Esta versión estará disponible hasta que Adobe lance la nueva versión del programa.

Los logotipos de Dreamweaver son propiedad de Adobe, así como las marcas registradas Dreamweaver y Adobe. aulaClic no tiene ninguna relación con Adobe.

Las páginas web están escritas en HTML. Si no conoces las características básicas de HTML puedes verlas aquí.

1.2. Novedades de Dreamweaver CS5

En este punto comentaremos las características que aporta esta nueva versión sobre la anterior.

Compatibilidad con CMS integrada. Un sistema de gestión de contenidos (en inglés Content Management System, abreviado CMS) es in interfaz o programa que nos permite gestionar el contenido de un sitio web. Cada vez son más usados, y ahora Dreamweaver integra con los principales, permitiéndos crear nuestras páginas con la estructura adecuada.

Unidad 2. El entorno de Dreamweaver CS5 (I)

Vamos a ver cuáles son los elementos básicos de Dreamweaver CS5, la pantalla, las barras, los paneles, etc..., para saber diferenciar entre cada uno de ellos. Aprenderemos cómo se llaman, dónde están y para qué sirven. También veremos cómo obtener ayuda, por si en algún momento no sabemos cómo seguir trabajando. Cuando conozcamos todo esto estaremos en disposición de empezar a crear páginas web.

2.1. La pantalla inicial

Al arrancar Dreamweaver aparece una pantalla inicial como ésta, vamos a ver sus componentes fundamentales. Así conoceremos losnombres de los diferentes elementos y será más fácil entender el resto del curso. La pantalla que se muestra a continuación (y en general todas las de este curso) puede no coincidir exactamente con la que ves en tu ordenador, ya que cada usuario puede decidir qué elementos quiere que se vean en cada momento y dónde, como veremos más adelante.

Unidad 3. Configurar un sitio local (I)

En este tema vamos a ver qué es un sitio web, cómo crearlos y gestionarlos, y cómo modificar las propiedades de los documentos, como puede ser el color de fondo.

3.1. Introducción

Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un diseño similar o un objetivo común. Es necesario diseñar y planificar el sitio web antes de crear las páginas que va a contener.

La forma habitual de crear un sitio consiste en crear una carpeta en el disco local. Los documentos HTML normalmente se crean dentro de dicha carpeta, mientras que para contener las imágenes, las animaciones, archivos de tipos específico, etc., se deben crear nuevas carpetas dentro de ésta, con el objetivo de tener una mejor organización de los archivos a la hora de trabajar. Esto es lo que se conoce comositio local.

Después se podrán copiar los archivos en un servidor web, en el denominado sitio remoto, lo que equivale a publicar el sitio, de modo que la gente podrá verlo en Internet.

Por tanto, el sitio local y el sitio remoto tienen la misma estructura. El sitio local es la copia del sitio con la que trabajaremos, y los cambios los actualizaremos en el sitio remoto.

La organización de los archivos en un sitio permite administrar y compartir archivos, mantener los vínculos de forma automática, utilizarFTP para cargar el sitio local en el servidor, etc.

La página inicial de nuestro sitio debe de tener el nombre index.htm o index.html, ya que cuando se intenta acceder a una URL genérica, el servidor devuelve la página con ese nombre.

Por ejemplo, si escribiéramos la dirección genérica http://www.aulaclic.es en el navegador, éste intentaría cargar la páginahttp://www.aulaclic.com/index.htm, por lo que se produciría un error en el caso de que no existiera ninguna página con el nombreindex.htm, y no se podría navegar por el sitio a no ser que se escribiese exactamente http://www.aulaclic.es/nombrepagina.htm

3.2. Crear o editar un sitio web sin conexión a Internet

Una vez creadas las carpetas que formarán la estructura del sitio local, o por lo menos la carpeta raíz, ya es posible definir el nuevo sitio.

Para ello hay que dirigirse al menú Sitio, a la opción Administrar sitios... o directamente a Nuevo sitio.

Recuerda que a través del panel Archivos, se puede cambiar a cada uno de los sitios definidos.

También podemos acceder desde el icono de acceso rápido de labarra de la aplicación a la opción Administrar sitios o Nuevo sitio...

Unidad 4. El texto: propiedades y formato (I)

A lo largo de este tema vamos a aprender a cambiar las propiedades del texto y a crear estilos CSS, que permiten asignar al texto clases y estilos creados por nosotros mismos, no predefinidos.

4.1. Características del texto

Las características del texto seleccionado pueden ser definidas a través del menú Formato, y a través del inspector de propiedades. Vamos a ver las posibilidades que se nos ofrecen a través del inspector de propiedades, que están clasificadas en dos categorías HTML yCSS.

Comenzamos viendo las propiedades HTML

Todas estas propiedades generan etiquetas HTML, que tienen un estilo por defecto en el navegador. Pero al final, podremos personalizarlas con CSS para que se vean exactamente como queramos.

Formato:
Permite seleccionar un formato de párrafo ya definido para HTML, que puede ser encabezado, párrafo o formato predeterminado. Los encabezados se utilizan para establecer títulos dentro de un documento. El formato predeterminado sirve para que el texto aparezca tal cual ha sido escrito, por ejemplo, si entre dos palabras se introducen varios espacios solo se considera uno, pero al establecer el formato predeterminado se respetará que hayan varios espacios en lugar de solo uno. El texto normal, debería ir siempre en párrafos, salvo que esté en otros elementos, como tablas o listas.
Es importante emplear correctamente los encabezados, ya que se organizará mejor el contenido de nuestra web, y es importante de cara a buscadores y visitantes. No te preocupes por cómo se muestran esos encabezados, recuerda que siempre podremos personalizarlo.
Estilo:
El botón B encierra el texto en una etiqueta <strong></strong>, que por defecto se muestra en negrita. El botón I, lo encierra entre<em></em>, que por defecto se ve en cursiva.
Estas son las etiquetas de resaltado más habituales, pero existen otras que encontramos a través del menú Texto. Por ejemplo, subrayar el texto. Esta opción no aparece en el panel de Propiedades ya que de normal no suele utilizarse, debido a que los vínculos aparecen subrayados y el subrayar texto normal podría hacer que el usuario pensara que se trata de un vínculo. Además, emplea etiquetas que están en desuso.
Lista:
Estos botones permiten crear listas con viñetas o listas numeradas. Veremos qué son las listas en el siguiente apartado.
Sangría:
Estos dos botones permiten sangrar el texto y anular la sangría. La sangría es una especie de margen que se establece a ambos lados del texto. En este caso los botones se refieren a sangría a la izquierda del texto.
Si lo aplicamos sobre texto normal, lo encerrará en una etiqueta <blockquote></blockquote>, que por defecto se muestra indentada hacia la derecha. En cambio, al aplicarlo sobre una lista, creará una sublista dentro de ésta.
Unidad 5. Hiperenlaces (I)

Vamos a ver qué son los hiperenlaces, para qué sirven y cómo crearlos, ya que son un elemento esencial para cualquier página web.

5.1. Introducción

Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de una página o archivo a otra página o archivo.

Es posible asignar un vínculo a un texto, a una imagen, o a parte de una imagen.

Cuando creemos un enlace, lo que realmente haremos será crear una etiqueta <a></a> que es la que en HTML se encarga de definir los enlaces. Esto podrás observarlo en la barra de estado:

5.2. Tipos de referencia

Existen diferentes clases de rutas de acceso a la hora de definir los vínculos. Estas referencias no se limitan a los enlaces, se comportarán igual cuando indiquemos la ubicación de una imagen, de un archivo Flash, de la hoja de estilo, etc.

Referencia absoluta:

Conduce al sitio en el que se encuentra el documento utilizando la ruta completa del archivo, incluyendo el protocolo http://.

Por ejemplo, http://www.aulaclic.com, o http://www.misitio.com/seccion2/pagina1.html.

La referencia absoluta es independiente de la ubicación de la página que contiene el enlace, y será válida siempre que no cambie la ubicación del archivo enlazado. Es la opción obligatoria si pretendemos enlazar a archivos fuera de nuestro sitio (enlaces externos).

Referencia relativa al documento (por defecto):

La ubicación del archivo enlazado se toma en relación con la ubicación del la página. Es decir, partimos de la carpeta en la que se encuentra el documento.

Si queremos enlazar con una página o archivo dentro de la misma carpeta, no tenemos más que utilizar su nombre. Por ejemplo,pagina2.htm.

Si está en una subcarpeta de la página actual, no tenemos más que indicar el nombre de la carpeta antes del archivo, y separarlos por una barra (/). Por ejemplo imagenes/miimagen.gif.

Si queremos referirnos a carpetas que están por encima del nivel donde nos encontramos deberemos utilizar ../

Por ejemplo, imagina que estamos en la siguiente dirección http://www.misitio.com/pagina/informacion/index.html. En esta página queremos mostrar una imagen que se encuentra en la carpeta http://www.misitio.com/pagina/secciones/seccion1.html, ¿cómo podemos hacerlo? Fácil. Deberemos llamarla haciendo referencia al nivel superior (http://www.misito.com/pagina/) para poder ir luego a la carpetasecciones.

El resultado de la ruta sería el siguiente: ../secciones/seccion1.html.

De esta forma, mientras nos encontramos en la carpeta informacion, subimos un nivel y luego nos movemos dentro de la carpetasecciones para mostrar el archivo seccion1.html.

Esta opción depende de la ubicación del archivo, y pueden no funcionar correctamente si alteramos la estructura de carpetas.

Esta es la opción por defecto de Dreamweaver, y es la forma más habitual para enlazar archivos dentro del sitio.

Unidad 6. Imágenes (I)

En este tema vamos a ver cómo insertar imágenes en un documento. También veremos cómo crear algunas imágenes especiales, como es el caso de los Rollovers y los botones flash, que ayudan a mejorar la apariencia de nuestras páginas.

6.1. Introducción

Las imágenes son un aspecto muy importante de la web. Ya sea como complementos a la información o parte del diseño, la hacen mucho más atractiva a ojos del visitante. No obstante, no conviene abusar, ya que aumentarán mucho el tamaño final de la web.

Existen una serie de formatos de imagen más recomendables que otros para ser introducidos en una página web. Esta información puedes consultarla aquí .

6.2. Insertar una imagen

Para insertar una imagen hay que dirigirse al menú Insertar, a la opción Imagen. Después de esto, ya es posible seleccionar una imagen a través de la nueva ventana. Cuando te acostumbres, te será más cómodo acceder con la combinación de teclas Ctrl + Alt + I.

En Relativa a es posible especificar si la imagen será relativa al documento o a la carpeta raíz del sitio. Es preferible que sea relativa alDocumento, ya que si cambiamos la página de carpeta, lo habitual es cambiar también sus imágenes.

Lo mismo ocurre cuando se selecciona un documento para crear un vínculo.

La ruta en la que se encuentra la imagen aparecerá representada de una u otra forma en el campo URL de la ventana y en el campoOrigen del inspector de propiedades, dependiendo de si ha sido insertada como relativa a la carpeta raíz del sitio o relativa al documento.

Por ejemplo, imagina que dentro de la carpeta raíz del sitio (la carpeta del sitio) se encuentran la carpeta imagenes y el documento en el que deseamos insertar la imagen. Dicha imagen, llamada aulaclic.jpg, se encuentra dentro de la carpeta imagenes.

En el caso de insertar la imagen como relativa al Documento la ruta sería:

imagenes/aulaclic.jpg

Mientras que en el caso de ser insertada como relativa a la Raíz del sitio la ruta sería:

/imagenes/aulaclic.jpg

Ocurre lo mismo que cuando se crea un hipervínculo a un documento relativo al documento o a la carpeta raíz del sitio.

Otra forma de insertar una imagen, es arrastrarla directamente desde el panel Archivos sobre el documento.

Si insertamos una imagen y luego la borramos, la movemos, o escribimos mal su nombre, en Dreamweaver aparecerá así indicando que el enlace al archivo está roto.

En ese caso, la imagen que aparecerá en el navegador será similar a ésta:.

Aparece un recuadro blanco con una X roja, junto con el nombre de la imagen o el contenido del campo Alt del inspector de propiedades, que explicaremos a continuación.

Para practicar puedes realizar el Ejercicio paso a paso Insertar una imagen.

Unidad 7. Tablas (I)

En este tema vamos a ver cómo trabajar con tablas. Podremos, entre otras cosas, insertar tablas, combinar celdas, insertar filas o columnas y cambiar el tamaño del borde.

7.1. Introducción

Todos los objetos se alinean por defecto a la izquierda de las páginas web, pero gracias a las tablas es posible distribuir el texto en columnas, colocar imágenes al lado de un bloque de texto, y otra serie de cosas que sin las tablas serían imposibles de realizar.

La finalidad de las tablas es presentar una serie de datos de forma clara y organizada, dividiéndolos en filas y columnas.

Hasta hace poco, y todavía hoy es fácil encontrar diseños web basados en tablas. Esto es debido a la facilidad que nos ofrecen estos elementos para organizar contenidos y repartir el espacio. No obstante, esta no es una práctica recomendable, ya que las tablas no fueron pensadas para ello, y si no están bien anidadas pueden ocasionar problemas al analizar nuestra web con herramientas automáticas, como los bots que indexan el contenido para los buscadores. Para maquetar nuestras páginas, lo recomendado es emplear capas (div) y CSS.

Las tablas están formadas por un conjunto de celdas, distribuidas en filas y columnas. A continuación tienes un ejemplo de tabla.

7.2. Insertar una tabla

Para insertar una tabla hay que dirigirse al menú Insertar, a la opción Tabla.

En la nueva ventana habrá que especificar el número de Filas yColumnas que tendrá la tabla, así como el Ancho de la tabla.

El Ancho puede ser definido como Píxeles o como Porcentaje. La diferencia de uno y otro es que el ancho en Píxeles es siempre el mismo, independientemente del tamaño de la ventana del navegador en la que se visualice la página, en cambio, el ancho enPorcentaje indica el porcentaje de la página o del elemento contenedor) y se ajustará al tamaño de la ventana del navegador, esto permite que los usuarios que tengan pantallas grandes, aprovechen todo el ancho de pantalla.

Grosor del Borde indica el grosor del borde de la tabla en píxeles, por defecto se le asigna uno (1). Si lo ponemos a 0 o en blanco, la tabla no mostrará borde.

Relleno de celda (cellpadding) indica la distancia entre el contenido de las celdas y los bordes de éstas.

Espacio entre celdas (cellspacing) indica la distancia entre las celdas de la tabla.

También se puede establecer si se quiere un encabezado para la tabla, por ejemplo para indicar el contenido de filas o columnas. Aunque podríamos lograr el mismo diseño con celdas normales y estilos CSS, es recomendable utilizar encabezados en el caso de que los usuarios utilicen lectores de pantalla. Los lectores de pantalla leen los encabezados de tabla y ayudan a los usuarios de los mismos a mantener un seguimiento de la información de la tabla.

Si queremos incluir un título, lo indicamos en Texto, el título aparecerá fuera de la tabla.

En Resumen: podemos indicar una descripción de la tabla, los lectores de pantalla leen el texto del resumen pero dicho texto no aparece en el navegador del usuario.

Unidad 8. Marcos (I)

Vamos a ver qué son los marcos y para qué se utilizan. También veremos cómo insertar un marco sencillo en una página, y cómo trabajar con él.

8.1. Introducción

Los marcos o frames sirven para distribuir mejor los datos de las páginas, ya que permiten mantener fijas algunas partes, como pueden ser el logotipo y la barra de navegación, mientras que otras sí pueden cambiar. Además de mejorar la funcionalidad, pueden mejorar también la apariencia.

Cada uno de los marcos de una página, contiene un documento HTML individual. Por ejemplo, en la siguiente imagen puedes ver una página con dos marcos. El marco izquierdo contiene el documento menu.htm y el derecho el documento quienes.htm. Para poder visualizar la página de este modo, hemos tenido que abrir el documento index.htm, que es la página que contiene los marcos agrupados.

Es posible editar los documentos contenidos en los marcos desde la página que contiene el grupo de marcos. Esto facilita el trabajo, ya que es más fácil hacerse una idea de cómo quedará la página al final, cosa que no es posible si se editan individualmente cada uno de los documentos que contiene el marco.

El trabajar con marcos puede resultar una tarea algo complicada, sobre todo al principio, por lo que no vamos a profundizar mucho en el tema, y veremos solamente algunos conceptos básicos y ejemplos sencillos.

Actualmente los marcos están cayendo en desuso. Aunque son realmente prácticos, crean problemas a la hora de ser indexados por los buscadores. Y estar correctamente indexado y posicionado es crucial para una web.

Por ejemplo, si vemos el código fuente de una página con marcos, vemos que realmente no hay más que las llamadas a las páginas correspondientes, por lo que no hay nada que indexar. Por otro lado, si se indexa una página, puede que el visitante llegue a ella directamente, no a través del marco. Esto hace, por ejemplo, que el usuario no pueda acceder a los elementos de navegación del sitio.

La pega más común al no usar marcos es tener que repetir los elementos comunes, como el menú y logo en cada página, con la complicación correspondiente a la hora de hacer un cambio. No obstante, esto es fácilmente solucionable si empleamos PHP o JavaScript en nuestra página.

Por lo tanto, si piensas colgar tu página en internet para uso público, no te recomendamos su uso. Pero si la página es de uso privado, tal vez te facilite el trabajo emplear marcos.

Unidad 9. Formularios (I)

Vamos a ver qué es un formulario, para qué se utiliza, cómo insertar uno, qué elementos puede contener y cómo pueden validarse los datos introducidos en él.

9.1. Introducción

Los formularios se utilizan para recoger datos de los usuarios. Nos pueden servir para realizar un pedido en una tienda virtual, crear una encuesta, conocer las opiniones de los usuarios, recibir preguntas, etc.

Una vez el usuario rellena los datos y pulsa el botón para enviar el formulario se arrancará un programa que recibirá los datos y hará el tratamiento correspondiente.

Aquí vamos a ver cómo crear el formulario, (insertar campos y botones en el formulario y validarlos), pero no la parte de tratamiento de los datos, ya que para ello se necesitan nociones de programación, ya sea en PHP, en JavaScript o en otro lenguaje de programación, y esto no entra en los objetivos del curso.

A la derecha tienes un ejemplo de formulario simple.

Un formulario está formado, entre otras cosas, por etiquetas, campos de texto, menús desplegables, y botones.

9.2. Elementos de formulario

Los elementos de formulario pueden insertarse en una página a través del menú Insertar, opción Formulario, o lo que es más cómodo si vamos a insertar varios elementos, desde el panel Insertar en la sección Formularios.

A través de esta opción se puede acceder a la lista de todos los objetos de formulario que pueden ser insertados en la página.

Vamos a ver uno por uno algunos de los distintos elementos que pueden formar parte de un formulario, así como algunas de sus propiedades.

Campo de texto y Área de texto

Permiten introducir texto. El Campo de texto solo permite al usuario escribir una línea, mientras que el Área de texto permite escribir varias.

Se puede pasar de Campo de texto a Área de texto a través del inspector de propiedades, marcando la opción Una línea o Multi línea respectivamente.

También es posible definirlo como Contraseña es como el campo de texto pero las letras que va tecleando el usuario se sustituyen por un carácter como podrás ver en la imagen siguiente.

A continuación tienes un ejemplo de cada uno de estos tres tipos. Puedes escribir en ellos para ver su funcionamiento.

A través del inspector de propiedades es posible asignar también el Ancho del cuadro de texto, el número máximo de líneas o caracteres, y el valor inicial del cuadro.

Botón

Es el botón tradicional de Windows. El botón puede tener asignadas tres opciones: Enviar formulario, Restablecer formulario(borrar todos los campos del formulario), o Ninguna (para poder asignarle un comportamiento diferente de los dos anteriores).

También es posible cambiar el texto del botón, a través de la propiedad Valor del inspector de propiedades.

Como mínimo tiene que haber un botón del tipo Enviar formulario, imprescindible para enviar los datos. Además le suele acompañar un botón Restablecer formulario para hacer reset en el caso de que el usuario quiera comenzar de nuevo a rellenarlo.
Unidad 10. Multimedia (I)

Vamos a ver cómo insertar elementos multimedia. En concreto, veremos cómo insertar una animación Flash, un sonido y un vídeo, que son los más empleados.

10.1. Películas Flash (SWF)

Las películas Flash son animaciones, cuyo archivo tiene la extensión SWF. Es frecuente verlas en las páginas iniciales de los sitios web, a modo de presentación hacia los usuarios, como banners publicitarios, como botones... Flash es el elemento multimedia más empleado en las páginas web.

Estas películas pueden crearse mediante el programa Flash también de Adobe. Para poder ser visualizado en el navegador, y necesitan que el usuario tenga instalado el plug-in de Flash Player. Su instalación es muy sencilla y normalmente ya viene con el navegador..

Flash pueden insertarse en una página a través del menú Insertar → Media, opción SWF, o pulsando Ctrl + Alt + F.

También pueden insertarse empleando el panel Insertar en la categoría Común, pulsando sobre la opción SWF que aparece al desplegar el menú Media.

Veamos las opciones más importantes que nos ofrece el inspector de propiedades cuando tenemos seleccionado el archivo Flash:

Como en otros elementos, como las imágenes, podemos asignarle el ancho (An.) y alto (Alt.). En Archivo, indicamos la ruta hasta el archivo SWF.
- Si disponemos de Flash instalado en el equipo, y vamos a ir haciendo cambios sobre el archivo original (.fla), nos resultará muy útil indicar su ubicación en Origen. Así, para editarlo, bastará con pulsar Editar.
- La opción Bucle indica que al finalizar la película, ésta volverá a comenzar desde el principio.
- La otra es la opción Rep. autom. (reproducción automática), que al estar marcada indica que nada más cargarse la página comenzará a reproducirse la película Flash. Si esta opción no estuviera marcada, se mostraría únicamente el primer fotograma de la película hasta que el usuario la activase. Por tanto interesa desmarcar esta opción cuando se desea que la reproducción sea activada por algún comportamiento.
- La Calidad, cuanto más baja, antes se cargará el archivo pero peor se verá. Conviene dejarla en Alta para verlo tal cuál se creó.
- La Escala permite elegir cuanto se verá del archivo. Las películas Flash no siempre son del tamaño exacto del contenido, pueden tener un escenario de fondo alrededor del objeto, aunque no se muestre. Si dejamos Predeterminada, se verá todo la película. En cambio, si elegimos Ajuste exacto, se verán sólo los objetos, omitiendo el escenario de fondo.
- Alinear funciona como con las imágenes, y nos permite alinear la película en relación con el texto. Si queremos centrarla horizontalmente, podemos optar por centrar el contenido del elemento que contiene el Flash (normalmente un párrafo) empleando CSS.
- Wmode es el modo de ventana. Si es opaco, otros elementos pueden aparecer sobre el Flash. En cambio, si es Transparente, el fondo se verá transparente (a no ser que se haya especificado un color de fondo en el Flash).
- El botón Reproducir nos permite ver la película.
Al insertarse la película, veremos la ubicación en la vista de diseño con el siguiente aspecto:

Al insertarse animaciones Flash, es frecuente que Dreamweaver añada algunos archivos que nos permitirán reproducir los elementos, normalmente creando la carpeta Scripts. Es importante incluir esta carpeta cuando publiquemos nuestro sitio, si no los archivos no se verán. De todas formas, Dreamweaver nos avisará cuando incluya archivos.
Unidad 11. Las plantillas (I)

En este tema vamos a ver qué son las plantillas, cómo crearlas y cómo basar documentos en ellas.

11.1. Introducción

Cada vez que deseamos crear un sitio web, tenemos que tener muy en cuenta que las páginas deben seguir un formato uniforme.

Además del formato, es frecuente tener elementos que se repiten en cada página, como el logo o el menú.

La mayoría de nosotros solemos hacer copias de los documentos ya creados, y trabajar sobre estas copias, modificando simplemente su contenido. Esta es la forma más sencilla de tener páginas con una estructura basada en la estructura de otras ya creadas previamente.

Las plantillas son una especie de copia de la página en la que van a estar basadas el resto de páginas del sitio web, pero que incluyen la posibilidad de establecer unas zonas editables y otras zonas que serán fijas, que no podrán ser modificadas.

No es posible modificar las propiedades de una página que está basada en una plantilla, a excepción del título. Cuando se desea que existan páginas con, por ejemplo, diferente color de fondo, es necesario crear plantillas diferentes con los distintos colores, y basar las páginas en una u otra plantilla, según el color de fondo que se desee para cada una.

Cuando se modifica el diseño de una plantilla, se pueden actualizar todas las páginas basadas en ella. Esto nos puede ahorrar mucho trabajo.

Las plantillas son archivos con la extensión DWT que se guardan en el sitio web, dentro de una carpeta llamada Templates.

Por supuesto, las plantillas las podremos usar siempre que sigamos trabajando con Dreamweaver.

11.2. Crear plantillas

Las plantillas pueden crearse desde cero, o a partir de una página ya existente.

Una forma de crear una plantilla desde cero es a través del panel Archivos, que se puede abrir a través del menú Ventana, opciónActivos.

Una vez abierto el panel hay que seleccionar el botón , para poder trabajar con las plantillas.

Los botones inferiores del panel Activos son similares a los del panel Estilos CSS.

El único botón diferente es el primero, que en este caso sirve para actualizar la lista, el resto permiten crear una nueva plantilla, editar una plantillaseleccionada en la lista, o eliminarla.

Para crear una nueva plantilla hay que pulsar sobre el botón . Si el botón está desactivado, pulsa con el botón derecho del ratón sobre el área de plantilla y elige Nueva Plantilla).

Cuando se pulsa ese botón aparece un nuevo documento en la lista de plantillas, al que es posible cambiarle el Nombre pulsando previamente sobre él.

Para modificar una plantilla la seleccionamos de la lista y pulsamos el botón .

Para eliminar una plantilla la seleccionamos de la lista y pulsamos el botón .

Las plantillas se guardan en el sitio web actual, dentro de la carpeta Templates, que se crea automáticamente.

Para crear una plantilla a partir de un archivo existente es necesario abrir dicho archivo, y después guardarlo como plantilla a través del menú Archivo, opción Guardar como plantilla.

Cuando se pulsa dicha opción, aparece una ventana como la de la imagen.

En ella es necesario especificar el nombre con el que va a ser guardada la plantilla, a través del campo Guardar como, y elegir, de entre la lista de sitios, el Sitio: en el que se va a guardar.

Al guardar la plantilla la página cambia de carpeta, a Templates, como ya hemos dicho. Si contenía enlaces o imágenes se nos ofrecerá la opción de Actualizar vínculos. Si lo hacemos, la plantilla se verá con normalidad y podremos emplearla para crear páginas en cualquier carpeta. Si no lo hacemos, la plantilla se mostrar sin las imágenes u hojas de estilo, ya que la ruta no será la correcta, y sólo nos servirá para crear páginas en la misma carpeta que el archivo desde el que creamos la plantilla.

Ahora solo nos quedaría cambiar los elementos variables por regiones editables.

Unidad 12. HTML desde Dreamweaver (I)

En este tema vamos a ver algunas de las facilidades que proporciona Dreamweaver para trabajar sobre el propio código HTML, y no únicamente sobre el editor gráfico de la vista diseño.

En este tema no se pretende enseñaros el lenguaje HTML sino cómo poder realizar algunos reajustes directamente en el código estando dentro de Dreamweaver.

En muchas ocasiones veremos que para hacer pequeñas correcciones, nos resultará más cómodo y rápido si lo hacemos directamente desde el código que recurriendo a asistentes.

12.1. Etiquetas

Ya sabes que el lenguaje HTML está basado en etiquetas que marcan el inicio y fin de cada elemento de la página Web.

En el primer tema vimos como ejemplo las etiquetas que hay que incluir en el código HTML de una página para darle un título. Consistía simplemente en escribir el título deseado entre las etiquetas <title> y </title>.

Las etiquetas consisten en poner un mismo comando entre los símbolos < y >. La primera etiqueta indica inicio, y la segunda, que incluye el símbolo /, indica final y se suele denominar etiqueta de cierre.

Las etiquetas disponen de atributos que permiten definir características del elemento sobre el que actúan, incluyendo cierto código dentro de la etiqueta.

Por ejemplo, un párrafo se inserta entre las etiquetas <p> y </p>, pero es posible cambiar sus características predeterminadas, como puede ser asignarle una clase de estilo CSS. Para ello, a la etiqueta de apertura anterior habría que añadir el atributo y su valor, quedando <p class="miclase"> y </p>.

También hay elementos que no precisan insertar etiqueta de cierre. Por ejemplo, un May + INTRO dentro del código HTML equivale a la etiqueta <br>. Realmente estas etiquetas si tienen cierre, y se pone en la etiqueta de apertura para seguir el estándar XHTML que obliga a que todas las etiquetas se cierren. Por tanto el salto de línea anterior se escribiría <br />. Otras etiquetas que se cierran sobre sí mismas son las imágenes <img />, reglas horizontales <hr /> o elementos de formulario <input />.

Dreamweaver inserta automáticamente las etiquetas necesarias para construir la página con la apariencia y contenido definidos en el editor gráfico, pero también ofrece otras posibilidades para trabajar directamente sobre el código.
Unidad 13. Otros elementos (I)

Vamos a ver una serie de elementos que suelen aparecer en las páginas web, como pueden ser las marquesinas, las reglas horizontales y la fecha.

13.1. Marquesinas

Las marquesinas son texto, imágenes, o una mezcla entre texto e imágenes, que pueden desplazarse de un lado a otro de la ventana en forma de línea. A continuación tienes un ejemplo de marquesina.

Bienvenid@s a PerrosGatos

Las marquesinas no se pueden insertar a través del editor gráfico de Dreamweaver, es necesario hacerlo a través del código.

Para crear una marquesina hay que insertar las etiquetas <marquee> y </marquee>. Entre dichas etiquetas han de introducirse los elementos que se desea que aparezcan en la marquesina.

También es posible especificar algunas características de la marquesina. La marquesina, por defecto, se desplaza de derecha a izquierda indefinidamente, pero si lo deseas puedes hacer que estas propiedades varíen. Por ejemplo, si pones <marquee behavior="slide">, la marquesina hará el desplazamiento una sola vez y se detendrá.

Si pones <marquee behavior="alternate">, en lugar de desplazarse continuamente de derecha a izquierda, la marquesina se desplazará de lado a lado de la ventana, como si rebotara en los extremos, tal y como ocurre en el ejemplo anterior, cuyo código puedes ver a continuación:
```
<marquee behavior="alternate">
    Bienvenid@s a PerrosGatos
    <img src="imagenes/logo_animales.gif" alt="PerrosGatos" />
</marquee>
```
No conviene abusar de estos elementos, que ya que distraen la atención del visitante. Cada vez se emplea menos este elemento, ya que si se quiere animar texto, se suele utilizar Flash que nos ofrece mucha más personalización.
Unidad 14. Capas (I)

Vamos a ver algunas de las características básicas sobre las capas, para luego poder trabajar con ellas y aplicarles algún comportamiento.

14.1. Introducción

Las capas no son más que unos recuadros, elementos de bloque, destinados a contener y agrupar otros elementos, igual que los párrafos son elementos de bloque destinados a contener texto.

Ésta es una capa con borde verde

Las capas, también llamadas layers o divisiones, se crean con la etiqueta <div></div>.

Al ser elementos contenedores, son muy útiles para organizar nuestros elementos. Si esto lo combinamos con el posicionamiento absoluto, una propiedad CSS que nos permite colocar los elementos donde queramos en nuestra página, obtenemos los elementos ideales para maquetar nuestra página, es decir, distribuir el contenido en bloques.

En la imagen de arriba vemos varias capas azules distribuidas sobre una capa gris. Si estrechas o agrandas la ventana del navegador, verás que pueden llegar a solaparse.

Cuando convertimos una capa en un elemento con posición absoluta (elemento PA), se muestra así en Dreamweaver:

Las capas pueden moverse de una posición a otra de la ventana pulsando sobre el recuadro blanco, y sin soltar el ratón, arrastrándola hacia la nueva posición.

También pueden ser redimensionadas pulsando sobre los recuadros negros, y arrastrándolos hasta conseguir el tamaño deseado.

Dentro del recuadro de la capa es posible insertar texto, tablas, imágenes, animaciones flash, y todos los elementos que puede contener un documento HTML.

Este icono  sirve para seleccionar la capa al pulsar sobre él, y al eliminarlo se elimina también la capa.

Las capas, combinadas con JavaScript pueden dotar a una página de verdadero dinamismo.

Unidad 15. Comportamientos (I)

En este tema vamos a ver las características básicas de los comportamientos, así como un par de ejemplos de entre sus posibles aplicaciones.

15.1. Introducción

Los comportamientos son acciones que suceden cuando los usuarios realizan algún evento sobre un objeto, como puede ser mover el ratón sobre una imagen, pulsar sobre un texto, hacer doble clic sobre un mapa de imagen, etc.

Los comportamientos no existen como código HTML, se programan en JavaScript. Dreamweaver permite insertarlos a través del panelComportamientos, por lo que no es necesario escribir ninguna línea de código JavaScript para programarlos.

La imagen que aparece a continuación tiene asociado un comportamiento. Sitúa el puntero sobre ella para ver qué es lo que ocurre.

La imagen tiene asociados dos comportamientos para mostrar y ocultar la capa. Este tipo de comportamiento lo veremos más adelante.

Otros comportamientos que ya has visto son los que se aplican sobre las imágenes de sustitución y las barras de navegación, que ya están predefinidos, por lo que no es necesario introducir este conjunto de comportamientos a través del panel Comportamientos.

Para validar formularios ya viste algunas características del panel Comportamientos. Vamos a recordar las que necesitamos para poder insertar comportamientos más tarde.

El panel Comportamientos se puede abrir a través del menú Ventana, opción Comportamientos. También pulsando Mayús+F4.

En este panel hay que desplegar el botón  pulsando sobre él, y en Mostrar eventos elegir HTML 4.1. Es la opción por defecto. Esta opción se debe a que en el pasado, los comportamientos solían ser diferentes dependiendo del navegador.

En la actualidad, los navegadores tienden a seguir el estándar, lo que hace que ya no tengamos problemas de compatibilidad. Sólo habremos de cambiarlo si hacemos páginas específicas para navegadores más viejos, ya en desuso.

Unidad 16. Comportamientos avanzados (I)

En el tema anterior vimos algunos de los comportamientos básicos, en este tema veremos otros comportamientos y veremos cómo utilizarlos y aprovecharnos de esta característica de Dreamweaver para crear diversas funcionalidades automáticamente.

16.1. Mensajes emergentes

Este comportamiento te permitirá crear avisos emergentes como en el siguiente ejemplo.

Haz clic aquí.

Este comportamiento es útil para poder enviar mensajes al usuario. Ten en cuenta que no deberás abusar de ellos, pues a la larga pueden resultar un poco incómodos, utilízalos con un objetivo concreto y no porque quieras atraer la atención del usuario. Mientras se muestre el mensaje, la ventana del navegador quedará bloqueada.

Para crear un mensaje emergente deberás seleccionar el elemento al cual irá asociado el mensaje, en el ejemplo es un enlace de texto.

Una vez seleccionado ves al panel Comportamientos (Mayus + F4) pulsa el botón  y selecciona la opción Mensaje emergente.

Se abrirá el siguiente cuadro de diálogo:

Aquí deberás introducir el Mensaje que quieras que se muestre. Pulsa Aceptar cuando hayas acabado y estará listo.

El mensaje se mostrará con un aspecto similar al siguiente (dependiendo del navegador utilizado):

Es aconsejable que asocies este comportamiento al evento onClick (cuando el usuario hace clic). Es más intuitivo para el usuario que si, por ejemplo, asocias el mensaje a un evento onMouseOver (cuando se pase el ratón por encima) el usuario no sabrá muy bien porque se ha generado el mensaje de aviso. Y resultaría muy molesto tener que ir "esquivando" los enlaces por si aparecen mensajes emergentes.

En realidad no habrá hecho ningún movimiento voluntario para recibir ese tipo de respuesta. Debido a esto (el estimulo-respuesta que espera el usuario), el evento onClick es el más indicado para este caso.
Unidad 17. Estilos CSS Avanzados (I)

En temas anteriores vimos cómo funcionaba el panel Estilos CSS y cómo crear hojas de estilos para poder utilizarlas en tus páginas web.

Hasta ahora hemos ido empleando las propiedades CSS más comunes, aunque no las hemos explicado detalladamente. En esta unidad intentaremos explicar mejor qué es CSS.

A lo largo del curso, hemos orientado nuestras páginas para que sigan los fundamentos y reglas marcadas por el W3C (Word Wide Web Consortium). Esta metodología exige que el archivo HTML solamente muestre datos organizados y estructurados con etiquetas de marcación HTML, mientras que la parte de formato recaería sobre los estilos CSS única y exclusivamente. Ya que aunque no las hemos empleados, existen etiquetas (como <font> o <b>) y atributos (como bgcolor) que nos permiten definir el aspecto del elemento, pero sin emplear CSS.

Para poder lograr esto deberemos dominar en profundidad CSS para poder posicionar, modificar o adornar la página de un modo eficiente.

En este tema aprenderemos controles que nos ayudarán a presentar el texto e imágenes de nuestras páginas de una forma mucho más limpia y cómoda.

17.1. Aplicar estilos CSS

Hasta ahora, si has entrado un poco en el código de las páginas, habrás visto etiquetas que introducían estilos CSS en ellas.

Por defecto, cuando creábamos una < Nueva regla de estilo > desde el inspector de propiedades, se definía la regla únicamente para la página actual. Esto generaba un código similar al siguiente en el <head> de la página (por supuesto, cambiando las propiedades según el caso).
```
<style type="text/css"> <!--
  body {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 12px;
      text-align: center;
      background: url('imagenes/fondo.gif') repeat-x bottom;
  }

//->
</style>
```
Este método se emplea para incrustar el código directamente en la página. Los estilos son declarados en la cabecera (<head>...</head>), entre las etiquetas <style type="text/css"> y </style>.

La base del CSS es lograr un estilo homogéneo y fácil de modificar para todo nuestro sitio. Por lo tanto, no tiene sentido incrustar el mismo estilo en cada página. En nuestros sitios de ejemplo, hemos optado por exportar los estilo a una hojas de estilos (un archivo de extensión .css). Esta opción nos resultaba mucho mejor, ya que nos permite centralizar el estilo en un sólo archivo que aplicaremos a todas las páginas.

Si acabamos de comenzar con nuestro sitio, podemos crear nuestra hoja directamente. En este caso deberemos crear un archivo CSS (Archivo → Nuevo y seleccionando CSS). En él escribiremos las reglas de estilo del con la misma sintaxis que hemos visto más arriba pero eliminado el componente HTML. Este sería el contenido de nuestra hoja definiendo el mismo estilo que arriba:
```
@charset "iso-8859-1";
/* CSS Document */
  body {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 12px;
      text-align: center;
      background: url('imagenes/fondo.gif') repeat-x bottom;
  }
```
Las dos primeras líneas generadas por Dreamweaver no son imprescindibles.

Este código está guardado en un archivo con extensión .css (por ejemplo, miestilo.css). Luego deberíamos vincularlo en la página HTML utilizando la etiqueta <link /> dentro del <head> de la página:
```
<link href="ruta/miestilo.css" rel="stylesheet" type="text/css" />
```
Otra opción que nos permitía el Inspector de propiedades CSS era crear un Estilo en línea. Este estilo sólo afectaba al elemento en cuestión, ya que lo que realmente estamos haciendo es definir las propiedades CSS empleando el atributo style del elemento:
```
<p style="color: red; font-size: 30px;">Este texto está en rojo y con un tamaño de 30 píxeles</p>
```
El estilo en línea es el más desaconsejado porque es más difícil de modificar al tener que buscarlo por el texto y modificándolo uno a uno.

Una página puede contener todos estos tipos de estilos CSS, o incluso tener varias hojas de estilo asociadas. Entonces ¿cuándo empleamos cada uno?
- Emplearemos hojas de estilos para todos los estilos comunes a las páginas del sitio.
- Emplearemos estilos incrustados en la página para los estilos que se emplean en únicamente en esa página, y que ya no serían útiles si borrásemos la página. Por ejemplo, para definir el la apariencia de una tabla en concreto.
- Emplearemos estilos en línea cuando el estilo solo tenga sentido por estar en esa posición en concreto, y no se suela repetir en el sitio. Por ejemplo, si queremos dar más margen a un párrafo por tener una imagen en concreto, pero que no tendría sentido si cambiásemos la imagen.
La organización de los estilos debes decidirla tú. Pero recuerda que cuanto menos código repitas en tus páginas, más fácil será luego de

Unidad 18. Diseño de página. Maquetación web (I)

18.1. Maquetar una página web

La maquetación es la distribución de los elementos en nuestra página. Piensa en una página web cualquiera. Seguro que distingues algunos elementos claramente diferenciados, como un encabezado, columnas, y un pie de página.

Hace unos años, la maquetación de las páginas web se realizaba utilizando tablas (<table>). Una vez entendido este proceso podía resultar sencillo, aunque si no se dominaban las tablas, podía convertirse en algo tedioso. El problema de las tablas es que generaban un página muy encorsetada, y el código se volvía complejo de entender. Además, algunos buscadores encontraban problemas al analizar la estructura de la página.

Actualmente, la maquetación con tablas ha caído en desuso, y se realiza utilizando capas (<div>), también llamadas divisiones o contenedores. La colocación de las capas en la página se realiza a través de CSS. Esto permite, por ejemplo, que podamos pasar de un diseño con un menú lateral a otro con el menú en la parte superior, sólo cambiando la hoja de estilos.

En esta unidad veremos las técnicas de maquetación más comunes, aunque hay que decir que existen diversas formas de conseguir una misma maquetación.

Como hemos dicho, emplearemos sobre todo etiquetas del tipo (<div>). Para crear un div alrededor de contenido ya existente desde Dreamweaver, seleccionamos la parte de la página y en el menú Insertar, opción Objeto de diseño, elegimos Etiqueta Div.

También veremos que Dreamweaver nos ofrece una serie de plantillas de maquetación, de las que podremos partir, adaptándolas a nuestras necesidades.

18.2. Tamaño

Por lo general, la maquetación se realiza sobre elementos en bloque. Normalmente divisiones, pero también lo podemos hacer con párrafos, listas, o con el propio body. Por defecto los elementos de bloque ocupan todo el ancho del elemento que lo contiene, y su alto se ajusta al contenido.

Cualquier elemento HTML de bloque, tiene dos atributos que pueden definir su tamaño: ancho (width) y alto (height).

Los valores para estas medidas, pueden ser expresados en las medidas habituales:
- Tamaños absolutos, utilizando px, cm, etc...
- Tamaños relativos al elemento que lo contiene, utilizando porcentajes (%).
- Tamaños relativos a la fuente, utilizando em.
- El valor auto es el valor por defecto. Por ejemplo, un párrafo, por defecto, tienen un ancho del 100% y un alto ajustado al contenido.
En algunos elementos, como los Divs PA, nos permiten cambiar su tamaño desde el Inspector de propiedades. Pero en la mayoría, tendremos que hacerlo desde el código o desde las propiedades CSS de Cuadro y Posicionamiento.

Por ejemplo, hemos definido el tamaño para el siguiente párrafo:

<p style="width:200px; height:100px; border: red 2px solid">

Por defecto, al no ocupar todo el ancho, el elemento queda alineado a la izquierda, como en el ejemplo anterior. Una forma sencilla de centrarlo es dándole al margen (margin) derecho e izquierdo el valor auto. Recuerda que las propiedades de margen se encuentran también con las propiedades de Cuadro.

<p style="width:200px; height:100px; border: red 2px solid; margin: auto;">

Nota: En la vista de Diseño de Dreamweaver, esta propiedad no se muestra correctamente.

Con sólo esto, podríamos maquetar una página web que contenga una columna central, con un ancho fijo o relativo, centrada en la ventana del navegador.

Para hacerlo, encerramos todo el contenido del body en una capa, a la que le asignamos, como mínimo, estas reglas CSS:
```
#container {
	width: 960px;
	margin: 0 auto; 
}
```
Puedes ver un ejemplo de una página muy simple maquetada de esta forma aquí.
Unidad 19. Sitios remotos (I)

En el tema 3 vimos cómo crear y trabajar con un sitio local.

Esta unidad está dedicada a los Sitios Remotos, veremos cómo crearlos y cómo utilizarlos.

Definir un sitio remoto significa establecer una configuración de modo que Dreamweaver sea capaz de comunicarse directamente con un servidor en Internet (por eso se llama remoto) y así poder trabajar a la vez con tus archivos en el sitio local, es decir, la copia que tienes en tu ordenador, y en el sitio remoto, colgados en el servidor, en Internet.

El modo en el que veremos que el programa se comunica con tu servidor será FTP, ya que es prácticamente el más utilizado y muy pocos utilizan otras alternativas.

Lógicamente, antes de realizar estos pasos, deberemos de haber contratado un sitio, o habernos registrado en uno gratuito.

19.1. Configurar un Sitio Remoto

Muy bien, ahora veamos los pasos que tenemos que seguir para configurar las opciones y que Dreamweaver se pueda conectar con nuestro servidor.

Para ello deberemos modificar la especificación que creamos en su día del sitio con el que estamos trabajando.

Así que haz clic en el menú Sitio y selecciona Administrar sitios.

Selecciona el sitio con el que quieras establecer comunicación remota (o crea uno nuevo para el caso) y pulsa Editar.

Verás que se abre el cuadro de diálogo de Definición del Sitio.

La categoría que buscamos es Servidores, en el listado de la izquierda.

Para configurar un nuevo servidor, pulsa el icono +.

Ahora en el desplegable Conectar usando selecciona el método de acceso que deberá utilizar Dreamweaver para conectarse con el servidor. Como ya hemos dicho nosotros explicaremos la opción FTP.

Se mostrarán las siguientes opciones:

El Nombre de servidor es el nombre que le podemos asignar para identificarlo.

Aquí deberás rellenar los datos que te facilitó el servicio de hosting que contrataste. Si no recuerdas los datos o has perdido el correo electrónico que seguramente te enviaron, pídeles de nuevo la información.

Los datos que necesitas son los siguientes:

Dirección FTP o host es la dirección a la que se dirigirá Dreamweaver para conectarse a tu servidor será del tipo ftp.servidor.com o también podrás encontrar algunas que están formadas en forma de dirección IP (como por ejemplo, 192.186.1.1)

En Nombre de usuario y Contraseña escribe el nombre de usuario y el password para poder conectar con el servidor. Marca la casilla Guardar si quieres que el programa recuerde la contraseña.

Una vez introducidos estos datos puedes pulsar el botón Prueba para ver si son correctos y Dreamweaver puede crear una conexión con el servidor remoto.

En el campo Directorio raíz podremos establecer una carpeta contenida en el servidor donde queramos subir las páginas. Por ejemplo, es común que por FTP podamos acceder a muchas carpetas del servidor, pero hay una en concreto en la que hemos de ubicar las páginas. Imagina que dentro de la estructura de carpetas del servidor remoto tienes una que se llama pagina y dentro de esta otra que se llame principal. Podríamos indicar la ruta pagina/principal para que los archivos se subiesen directamente a esa ubicación.

En el campo URL Web podemos introducir la dirección web de la raíz del sitio, y así probar nuestras páginas dinámicas.

Una vez hayas terminado Guarda todas las pantallas hasta volver a la vista de trabajo y estaremos listos

Unidad 20. Servidor de Pruebas (I)

20.1. Introducción a PHP

Hasta ahora hemos aprendido cómo mostrar contenido estático en nuestras páginas web.

Dejando de lado todos los efectos o animaciones que podamos hacer, en determinadas ocasiones nos es necesario darle un poco más dedinamismo al contenido del sitio.

Digamos que necesitamos mostrar listados de cualquier tipo que puedan generarse automáticamente, o incluso que se repartan en varias páginas.

Es posible que también necesites que el contenido se actualice periódicamente y tengas demasiadas páginas como para ir modificándolas una a una.

O incluso te gustaría crear una página individual para cada elemento que aparezca un listado y resulta muy laborioso crear una página individual para cada uno de ellos.

Muy bien. Sin dejar de lado HTML, comenzaremos a crear páginas más versátiles utilizando PHP.

PHP es un lenguaje de programación. Pero no te preocupes, Dreamweaver contiene las suficientes herramientas como para manejarte sencillamente sin que tengas que saber ni una línea de código.

Desde luego, si el tema te apasiona no lo dudes. Aprende PHP y utilízalo para crear prácticamente lo que te venga a la cabeza. Aunque eso se encuentra fuera de este curso.

Nosotros veremos lo que es posible hacer utilizando las herramientas de que dispone Dreamweaver.

Como decíamos PHP es un lenguaje de programación, así que deberemos aprender antes cómo funciona.

Hasta ahora nosotros creábamos páginas con extensión HTML, este tipo de archivos, cuando son requeridos por un navegador se descargan automáticamente del servidor y se visualizan tal y como son en el cliente (el ordenador del usuario que está viendo la página).

PHP actúa de forma diferente.

Un archivo con extensión PHP, cuando es requerido por el cliente se ejecuta en el servidor y genera una página web con código HTML, y es este código HTML el que se envía y se visualiza en el navegador del usuario.

De esta forma, el contenido del archivo PHP es completamente transparente al usuario (además de serle imposible ver el contenido del archivo) y sólo podrá ver el resultado de la petición que ha creado (es decir, lo que genera el archivo PHP según convenga en cada momento).

Verás que esto es más fácil de entender cuando vayamos avanzando en la unidad.

Una de las utilidades de las páginas PHP es que PHP es capaz de buscar en una base de datos mientras se está ejecutando en el servidor y mostrar los datos obtenidos en código HTML para que el navegador del cliente los pueda visualizar:

Como puedes ver PHP puede ser muy útil a la hora de recuperar datos almacenados lo que te será muy útil si decides guardar en forma de tablas información relativa a tus productos, elementos sobre los que estés trabajando, entradas de blog, etc...

Si no sabes muy bien qué es una base de datos visita este tema básico sobre Bases de datos.

Unidad 21. Páginas dinámicas (I)

21.1. Introducción

En esta unidad vamos a ver cómo utilizar Dreamweaver para crear páginas PHP y acceder a datos almacenados en una base de datos.

Como vimos en el tema anterior, las páginas dinámicas se almacenan en el servidor y cuando son requeridas se ejecutan y devuelven una salida de código HTML al cliente que lo visualizará en su navegador.

Mientras el archivo PHP se ejecuta en el servidor, puede crear una conexión a una base de datos y extraer o guardar información en ella.

Ahora que ya tenemos un servidor de pruebas donde pueda ejecutarse el código que introduzcamos en nuestras páginas y permita la creación de bases de datos para almacenar información pasaremos a crear nuestras propias páginas dinámicas de acceso a datos.

Una vez instalado WampServer empezaremos a crear nuestras primeras páginas para mostrar información específica y personalizada.

Para ello nos apoyaremos siempre en la sección Datos del panel Insertar:

Recuerda que Dreamweaver es muy personalizable, y puede que este panel lo estés viendo como una barra de herramientas:

Y en el grupo de paneles de Base de datos, que puedes abrir desde el menú Ventana → Bases de datos.

Unidad 22. Cómo crear un Blog (I)

22.1. Introducción

Hasta ahora hemos visto cómo empezar a manejarnos con páginas dinámicas de acceso a datos utilizando PHP y un servidor MySQL.

La complejidad de las páginas que creemos dependerá de la profundidad de nuestros conocimientos de ambas tecnologías, por lo que muchas veces (sobre todo al principio) nos será difícil alcanzar algunos objetivos que nos propongamos.

Vamos a dedicar este tema a la elaboración de un proyecto algo más complejo en el que deberemos emplear estas técnicas de un modo más completo.

Para ello crearemos un blog o bitácora y utilizaremos herramientas y procedimientos que hemos visto hasta ahora. No te pierdas este tema, introduciremos algunos conceptos que quizá te resulten interesantes.

Un blog es una página web donde se introduce contenido periódicamente sobre un tema en particular.

Su contenido suele organizarse en entradas que se van añadiendo con una asiduidad relativa.

Normalmente, estas entradas pueden comentarse. Es decir, cualquier usuario (o a veces solamente los registrados) pueden dejar su opinión sobre la entrada o sobre el blog en general.

Para facilitar la navegación por la página estas entradas suelen estar organizadas por temas o categorías, de modo que si te interesa poder leer todas las entradas relacionadas con un tema en concreto te sea mucho más sencillo.

Todo blog deberá tener, del mismo modo, una parte privada desde donde el usuario dueño de la bitácora pueda administrar y gestionarlos contenidos del blog.

Desde el panel de administración, que debe estar protegido para que sólo tengan acceso aquellas personas con privilegios suficientes, podremos añadir, modificar o eliminar entradas, comentarios y categorías.

De hecho, la función de esta parte privada es que puedas actualizar el contenido sin necesidad de tener que recurrir a la interfaz dephpMyAdmin para insertar nuevos registros como vimos en el tema anterior.

El objetivo de este tema no es entrar en profundidad en cada uno de los detalles, porque podríamos no terminar nunca. Explicaremos el modo en el que deberemos actuar para alcanzar una estructura cerrada que cumpla los requisitos mínimos que un blog necesita.

El aspecto y funcionalidades finales están en tus manos, puedes añadir tantas cosas como quieras.

Así que vamos a empezar...
Unidad 23. XML y RSS (I)

23.1. Introducción

RSS son archivos que contienen información de una página web con las últimas actualizaciones que se han hecho en ella. Este tipo de archivos es muy útil para cualquier sitio de noticias, foros, weblogs o página que emita contenido de forma continuada.

Para crear archivos RSS utilizamos el lenguaje XML, que es un lenguaje de etiquetas mucho más flexible que HTML.

Este sistema tiene un objetivo muy sencillo, el de organizar información para su almacenamiento y distribución. De hecho, la última versión de HTML es XHTML, que no es más que HTML pero siguiendo fielmente la estructura XML (etiquetas bien anidadas, cerradas, en minúsculas, atributos siempre entre comillas dobles...).

Un ejemplo muy claro y básico de lo que sería un archivo XML es el siguiente:
```
<biblioteca>
	<libro>
		<titulo>Las 64 casillas</titulo>
		<autor>Pablo Alvarez Castano</autor>
		<editorial>Paidotribo Editorial</editorial>
		<isbn>848019815X</isbn>
	</libro>
	<libro>
		<titulo>Periodismo iconográfico</titulo>
		<autor>Gonzalo Peltze</autor>
		<editorial>EDICIONES RIALP SA</editorial>
		<isbn>8432128082</isbn>
	</libro>
	<libro>
		<titulo>Educación personalizada</titulo>
		<autor>Víctor García Hoz</autor>
		<editorial>EDICIONES RIALP SA</editorial>
		<isbn>8432122882</isbn>
	</libro>
	<libro>
		<titulo>Nuestro universo</titulo>
		<autor>John R Gribbin</autor>
		<editorial>Ediciones B</editorial>
		<isbn>8466605657</isbn>
	</libro>
</biblioteca>
```
En este ejemplo hemos creado un archivo en la que está almacenada la información de nuestra biblioteca. Observa cómo las etiquetas que conforman el archivo no son más que identificadores que hemos creado para este fin.

La finalidad de XML y RSS consiste en poder compartir información con el resto del mundo de una forma rápida, sencilla y adaptable.

La organización de este tipo de información suele ser muy parecida de un sitio a otro.

Utilizaremos Dreamweaver para incluir fácilmente contenido de un sitio externo en nuestras páginas.

Es necesario que el servidor de pruebas soporte el manejo de este tipo de archivos para poder incluir este tipo de información en nuestras páginas. Para eso debemos de activar una de sus extensiones (php_xls)

Para aprender a configurar el servidor de pruebas realiza el Ejercicio Paso a Paso de Preparando el Servidor de Pruebas.

Unidad 24. Acceso a datos con Spry (I)

24.1. Introducción

Dreamweaver nos permite acceder y tratar datos XML empleando su tecnología Spry.

Spry se compone de un conjunto de archivos codificados en JavaScript que se añadirán a tu proyecto desde el momento en que empieces a utilizarlos. Como veremos más adelante, Dreamweaver te avisará de la creación de una nueva carpeta en tu sitio que contendrá los archivos necesarios para la ejecución de las funciones que vamos a ver a continuación.

Todos los comandos que vamos a utilizar son accesibles desde el menú Insertar → Spry o desde el panel Insertar seleccionado Spry:

Al utilizar spry, Dreamweaver creará la carpeta SpryAssets en la raíz del sitio.
Unidad 25. AJAX y Spry Framework (I)

25.1. Introducción

Hasta ahora hemos visto dos tipos de lenguaje de programación en nuestra web:
- Por un lado JavaScript (comportamientos). Se ejecuta en el lado del cliente, es decir, en el propio navegador de quien visita la web, sin tener que recargar la página. Esto dota de dinamismo a la página, ya que empleando conocimientos más avanzados, podemos crear HTML, cambiar CSS... pero requiere que todo esto haya sido enviado al cliente al cargar la página.
- Por otro lado, hemos visto PHP. Se envía una petición al servidor, el cual genera la página, muchas veces conectándose a la base de datos. Cuando la página está creada en el servidor, se devuelve al usuario, quien la ve en el navegador. Si el usuario quiere cambiar el contenido, por ejemplo al paginar en un listado, ha de volver a enviar la página, que se tiene que volver a generar y ser devuelta al usuario.
Combinando los scripts ejecutados en el cliente y en el servidor obtenemos AJAX. Lo que conseguimos con esto es una comunicación asíncrona, pidiendo al servidor sólo los datos que el usuario necesita, sin recargar la página, y usando JavaScript para actualizar solo las regiones afectadas.

Por ejemplo, imaginemos el típico carrito de compra. Cuando el usuario añade un artículo, debemos "apuntarlo" en su lista de artículos del servidor. Sin AJAX habría que enviar toda la página, volver a crearla y traerla de vuelta. En cambio, con AJAX, sólo enviamos el ID del artículo. El servidor lo procesa, y envía el resultado a AJAX, que al recibirlo actualiza únicamente la vista del carrito del usuario, sin recargar toda la página. Esto hace que el usuario perciba la página como una aplicación interactiva más que como una web.

Para incluir comportamientos y características de AJAX en nuestras páginas deberemos tener conocimientos de JavaScript, XML y DOM (Document Object Model). Con Spry, utilizar AJAX se hace mucho más simple y asequible.

Como hemos visto en la unidad anterior es posible incorporar información almacenada en archivos con formato XML y manejarla dinámicamente sin la necesidad de refrescar la página a cada petición.

Ahora veremos un modo avanzado de utilizar estas funcionalidades desde una perspectiva menos cómoda pero mucho más potente, pues seremos capaces de manejar el contenido dinámico de una forma total y siempre utilizando la librería Spry que nos proporciona Adobe.

Spry es una tecnología desarrollada y propietaria de Adobe, y es la que emplea Dreamweaver. Existen otras opciones, como jQuery, muy empleada en la web.

Unidad 26. Spry y Formularios (I)

26.1. Introducción

En las anteriores unidades vimos cómo poder acceder a datos utilizando Spry. Aunque la funcionalidad de esta librería no se limita únicamente a eso. Como hemos podido ver también éramos capaces de realizar operaciones dinámicamente sin necesidad de realizar refrescos en la página.

En esta unidad y las posteriores veremos las posibilidades de Spry para crear comportamientos AJAX en nuestro sitio.

Ahora veremos qué puede hacer Dreamweaver por nuestros formularios. Encontrarás las opciones que utilizaremos bajo el menú Insertar → Spry o en la barra Insertar, pestaña Spry.

Como es habitual con Spry, Dreamweaver irá incluyendo archivos JavaScript a nuestro sitio, en la carpeta SpryAssets, uno para cada tipo de control. Además, incluirá una hoja de estilo, para los estilos de los distintos estados que veremos.
Unidad 27. Controles Spry Avanzados (I)

27.1. Introducción

En esta unidad veremos algunos controles basados en JavaScript que Dreamweaver pone a nuestra disposición utilizando su librería Spry.

Estos controles harán que tus páginas se muestren de una forma más profesional, vistosa y ordenada.

Podrás encontrarlos bajo el menú Insertar → Spry, al final del desplegable o desde el panel Insertar, seleccionando Spry:

Estos controles son completamente configurables y además también aceptan modificaciones en su estilo utilizando CSS. De hecho el estilo inicial que muestran es muy básico, por lo que no deberías tener problemas para modificarlo.

Y como siempre, Dreamweaver irá añadiendo las librerías que necesite para crear estos comportamientos a la carpeta SpryAssets.