TUTORIAL

DREAMWEAVER
MOLAR CASTILLO JOSÉ ALEJANDRO
TORRES TORRES LUIS ENRIQUE
MAQUINA 6 4°AM PROGRAMACIÓN
CONCEPTOS BÁSICOS DE DREAMWEAVER CS6 (I)
1.1. QUÉ ES DREAMWEAVER CS6
Dreamweaver CS6 es un software fácil de usar que permite crear páginas web profesionales.

Las funciones de edición visual de Dreamweaver CS6 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 CS6
En este punto comentaremos las características que aporta
esta nueva versión sobre la anterior.

Plantillas diseño fluido. El acceso a la web a través de todo

tipo de dispositivos está experimentando un aumento
importante. Ahora es habitual acceder a internet desde el
teléfono móvil y desde las tabletas. Esto complica el diseño
de los sitios web porque los dispositivos son de diferentes
dimensiones.

Una forma de afrontar este problema es utilizando el diseño

fluido, este tipo de diseño hace que la página se adapte
automáticamente a las dimensiones del dispositivo. Este tipo
de diseño utiliza HTML 5 por los que los navegadores
antiguos no son capaces de representarlo correctamente. Sin
embargo, existen librerias de Javascript que solucionan este
inconveniente.

Dreamweaver incorpora estas soluciones en sus nuevas

plantillas de diseño fluido
Transiciones. Las transiciones permiten pasar propiedades CSS de un estado inicial a otro estado
final de forma continua. Con transiciones se pueden lograr vistosos efectos de animaciones.
• Fuentes Web. Existen sitios web con multitud de nuevas fuentes que pueden dar un aire distinto a
nuestros diseños de páginas web. En esta versión, Dreamweaver permite incorporar los archivos de
nuevas fuentes de forma sencilla.
• Intergración con PhoneGap mejorada. PhoneGap es un servicio para generar aplicaciones para
teléfonos móviles en las plataformas más utilizadas (Android, Apple, ...) ahora se ha mejorado la
compatibildad con PhoneGap desde Dreamweaver
• Funciones exclusivas para Creative Cloud. Creative Cloud es la nueva forma de adquirir productos
Adobe, como Dreamweaver, mediante suscripción mensual o anual, de esta forma se tiene acceso más
rapido a las actualizaciones y se puede disponer de los archivos de trabajo en cualquier ubicación
con acceso a internet.
Además hay funciones que sólo estan disponibles para los suscriptores de Cloud, como la inserción de
etiquetas HTML 5 desde el panel Insertar, la compatibilidad con Edge Animate o la búsqueda
dinámica en Mac.
 1.3. EDITAR PÁGINAS WEB
• Cualquier editor de texto permite crear páginas web. Para ello sólo es necesario crear los
documentos con la extensión HTML o HTM, e incluir como contenido del documento el código
HTML deseado. Puede utilizarse incluso el Bloc de notas incluido en Windows para hacerlo.

• Pero crear páginas web mediante el código HTML es más laborioso que hacerlo utilizando un
editor gráfico. Al no utilizar un editor gráfico cuesta mucho más insertar cada uno de los
elementos de la página, al mismo tiempo que es más complicado crear una apariencia
profesional para la página, sobre todo si no estamos demasiado familiarizados con el HTML.
Aunque también es cierto que escribir el código nos da más control sobre él, y sobre todo al
principio, nos ayudará a entender lo que estamos haciendo y podremos aprender HTML
rápidamente.

• Hoy en día existe una amplia gama de editores de páginas web. Uno de los más utilizados,
y que destaca por su sencillez y por las numerosas funciones que incluye, es Adobe
Dreamweaver.

• Además de Dreamweaver, existen otra serie de buenos editores de páginas web, como
pueden ser Microsoft Expresion Web, Amaya, Bluefish, NVU, KompoZer o Quanta Plus.
Algunos de los cuales tienen la ventaja de ser gratuitos.
1.4. CÓMO TENER UNA PÁGINA EN
INTERNET
Para poder poner una página web en Internet, es necesario contratar a alguna empresa con
servidores que pueda alojarla y hacerla accesible desde Internet las 24 horas del día. El
precio por disponer de espacio propio en el servidor dependerá de la empresa, del
espacio en disco, volumen de transferencia y otras opciones que podamos contratar.
Hay empresas que ofrecen este servicio gratuitamente, pero con ciertas limitaciones: poco
espacio de disco, lentitud y nombre de nuestra página precedido por el de la suya. Hay
que tener también en cuenta que estas empresas deben generar ingresos de alguna forma,
por lo que se dedican a vender espacios publicitarios dentro de nuestras páginas,
publicidad que no podremos negarnos a incluir en ellas.
Por estos motivos, no se recomienda utilizar hospedaje gratuito para la página de una
empresa, aunque sí es aceptable para una página personal, sobre todo al comienzo.
Por otro lado, hay grandes empresas de Internet que ofrecen otras alternativas para
publicar en Intenet de forma gratuita en forma de blog. Como por ejemplo, Blogger de
Google o MySpace de Microsoft. Un blog tiene una estructura definida y no ofrece tanta
libertad como una página web a la hora del diseño.
También tenemos Google Sites que permite modificar directamente el código HTML.
En el resto del curso nos referiremos preferentemente a páginas web creadas desde cero por el usuario, sin
restircciones de diseño.

Cuando se va a contratar un servicio de hospedaje es necesario contratar también un dominio, tarea de la que
se suele encargar la propia empresa de hospedaje. Registrar un dominio consiste en registrar un nombre para
nuestra página. Este nombre no puede estar repetido en Internet, ha de ser único, al igual que ocurre con los
nombres de las empresas. Es posible registrar un mismo nombre con distintas terminaciones, como por ejemplo,
.net, .org, .es o .com. La terminación hace referencia al pais (.es para España, .com.mx para México, .pe para
Perú, ...) o al tipo de página (.com para comerciales, .org para organizaciones, .mobi para teléfonos móviles o
celulares, ...)

En el caso de los hospedajes gratuitos no es necesario registrar ningún dominio, ya que nuestra página no será
más que un archivo dentro de la de la empresa contratada.

A la hora de contratar un servicio de hospedaje también hay que tener en cuenta el número de cuentas de
correo electrónico propias que pueden habilitarse y si disponemos de una base de datos para poder acceder a
ella a través de programación vía Web.

• En cualquier caso, una vez tengas tu espacio en Internet, darle contenido es muy sencillo.

Dreamweaver te permite crear una copia local (en tu ordenador) del sitio web que luego querrás que se
encuentre a disposición de todo el mundo en Internet.
1.5. ARRANCAR Y CERRAR DREAMWEAVER CS6
Desde el botón Inicio Botón de Inicio situado, normalmente, en la esquina inferior izquierda de la pantalla. Colocar el cursor y hacer clic
sobre el botón Inicio, se despliega un menú. Puedes comenzar a escribir el nombre del programa, y aparecerá directamente. O puedes
pulsar en Todos los programas y buscarlo en la lista con los programas que hay instalados en tu ordenador. Buscar Adobe Dreamweaver
CS6 y haz clic sobre él para arrancar el programa.

Desde el icono de Dreamweaver CS6 del Escritorio, si lo tienes .

Puedes arrancar Dreamweaver CS6 ahora para ir probando todo lo que te explicamos. Cuando realices los ejercicios también puedes
compaginar dos sesiones de la forma que puedas ver el tema mientras utilizas Dreamweaver.

• Para cerrar Dreamweaver CS6, podemos utilizar cualquiera de las siguientes operaciones:

Hacer clic en el botón cerrar , en la esquina superior derecha, como en cualquier ventana de Windows.

Pulsar la combinación de teclas Alt + F4.

Hacer clic sobre el menú Archivo y elegir la opción Salir.

Si existe algún documento modificado que no ha sido guardado antes de cerrar Dreamweaver, se te pedirá confirmación para guardar
o no cada uno de ellos.
 1.6. ABRIR Y GUARDAR DOCUMENTOS
PARA ABRIR UN DOCUMENTO, PUEDES UTILIZAR CUALQUIERA DE LAS SIGUIENTES OPERACIONES:

Hacer clic en el botón abrir de la barra de herramientas estándar (si está visible).

Pulsar la combinación de teclas Ctrl + O.

Hacer clic sobre el menú Archivo y elegir la opción Abrir....

Hacer clic sobre el menú Archivo y elegir la opción Abrir reciente. Muestra los últimos archivos abiertos.

Hacer clic sobre el menú Archivo y elegir la opción Examinar en Brigde. Se abrirá el programa Brigde que muestra las
carpetas y archivos de forma gráfica.

Hacer doble clic sobre el archivo en la ventana del sitio.

Hacer clic derecho sobre el archivo en el explorador de Windows, y elegir la opción Abrir con → Adobe
Dreamweaver CS6.
• PARA ABRIR UN DOCUMENTO NUEVO, PUEDES UTILIZAR
CUALQUIERA DE LAS SIGUIENTES OPERACIONES.:
Hacer clic en el botón nuevo nuevo de la barra de herramientas estándar (si está visible).
Pulsar la combinación de teclas Ctrl + N.
Hacer clic sobre el menú Archivo y elegir la opción Nuevo.
Después de esto aparecerá una nueva ventana, en la que deberás elegir la Categoría Página
en blanco.
En la segunda columna seleccionamos HTML, observamos que hay muchos diseños ya creados
que podemos elegir, para nuestro primer ejemplo elegimos en Diseño ninguno. A continuación
pulsamos el botón Crear.
• PARA GUARDAR UN DOCUMENTO, PUEDES UTILIZAR
CUALQUIERA DE LAS SIGUIENTES OPERACIONES.
Hacer clic en el botón Guardar Guardar de la
barra de herramientas estándar.
Pulsar la combinación de teclas Ctrl + S.

Hacer clic sobre el menú Archivo y elegir la opción

Guardar.
Dreamweaver incluye la posibilidad de, en el caso
de estar trabajando simultáneamente con varios
documentos, poder guardar todos de golpe, sin la
necesidad de hacerlo uno por uno. Para guardar
todo puedes realizar cualquiera de las siguientes
operaciones.
Hacer clic en el botón Guardar todo Guardar todo de la Barra de herramientas estándar.
Hacer clic sobre el menú Archivo y elegir la opción Guardar todo.

Al tener varios documentos abiertos es fácil olvidarse de todas las modificaciones hechas en cada uno de
ellos. Debes tener mucho cuidado al utilizar la opción guardar todo, ya que en ocasiones es posible no
desear guardar los cambios en todos los documentos modificados. Por ello es conveniente que al principio
no utilices esta opción, al menos hasta que te hayas habituado a manejar el programa. De todas formas,
observa que cuando hay cambios sin guardar aparece un * tras el nombre del documento
1.7. MI PRIMERA PÁGINA
Para que te vayas haciendo una idea de cómo funciona
Dreamweaver, vamos a crear una página web sencilla, con varios
estilos de texto, una imagen y un enlace a otra página. Crear esta
página solo te llevará unos pocos minutos, y sabrás cómo trabajar con
los elementos básicos con los que están hechas la mayoría de las
páginas web. Si nunca has hecho una página web, este es el momento
para descubrir lo fácil que es.
Lo primero que tienes que hacer es abrir Dreamweaver. Ya has visto
en la página anterior como puede hacerse.
Abre un documento nuevo y selecciona la Categoría Página básica, HTML, en la
columna Diseño dejamos la opción por defecto: <ninguno>. Seguidamente, haz
clic sobre la zona blanca del documento y escribe lo siguiente:
Una vez introducido el texto, vamos a modificar el título y el color de fondo del documento.
Para ello podemos hacer clic sobre el menú Modificar y elegir la opción Propiedades de la
página. Entonces se abrirá una ventana como la que aparece a continuación:
2.1. LA PANTALLA INICIAL
Al arrancar Dreamweaver aparece una pantalla inicial como ésta, vamos a
ver sus componentes fundamentales. Así conoceremos los nombres 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.
EN EL RESTO DE ESTA UNIDAD VAMOS A IR DESCRIBIENDO
LOS PUNTOS MÁS IMPORTANTES SEÑALADOS EN ESTA
IMAGEN POR LOS NÚMEROS EN AZUL DEL 1 AL 9.
1.- Las barras.

2.- Las pestañas de documentos.

3.- La barra de estado.

4.- El panel de propiedades.

5.- Área de paneles.

6.- Paneles y ventanas.

7.- Línea inferior de pestañas.

8.- Vista diseño del documento.

9.- Vista código del documento.

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 como sitio 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.
3.1 INTRODUCCIÓN

La organización de los archivos en un sitio permite administrar y compartir archivos, mantener

los vínculos de forma automática, utilizar FTP 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ágina http://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 nombre index.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 la
barra de la aplicación a la opción Administrar sitios o Nuevo sitio...
En el caso de haber seleccionado la opción Administrar sitios,
aparece una ventana que contiene la lista de sitios locales definidos
Por supuesto, pueden existir varios sitios locales en un mismo ordenador, como podemos ver en la
imagen.

Desde esta ventana podemos realizar varias acciones. Debajo de la lista de sitios tenemos cuatro
botones opciones administrar sitios que nos permiten borrar un sitio, editarlo, duplicarlo y
exportarlo.

A continuación tenemos otros cuatro botones:

- Importar sitio. Si previamente lo hemos exportado, normalmente, desde otro ordenador.

- Importar sitio de Business Catlyst. Catalyst es un sitstema de hospedaje de pago de Adobe.

- Nuevo sitio. A continuación explicaremos esta opción.

- Nuevo sitio de Business Catlyst.

En la parte inferior derecha tenemos el botón Listo que nos abrirá el sitio seleccionado.
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
y CSS. 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.
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:
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.
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
difíciles 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 no crean una estructura clara, además, si no están bien
anidadas pueden ocasionar problemas al analizar nuestra web con herramientas automáticas, como los bots(robots) que
indexan el contenido para los buscadores. Para maquetar nuestras páginas, lo recomendado es emplear los nuevos tags
de HTML5 (<article>, <section> ... ), 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.
 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.

Lo primero que hay que decir es que los marcos prácticamente ya no se usan, sobre todo desde
que no son soportados por el nuevo HTML 5.

Sin embargo, puede ser útil conocer como funcionan por si tienes que retocar alguna página antigua
que contenga marcos.

8.1. Introducción

• Los marcos o frames sirven para distribuir 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.

• 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.
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.
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. Utilizaremos dos métodos, usando las nuevas etiquetas de HTML 5 y mediante los plug-in.

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 todavia es uno de los elementos multimedia
más empleados en las páginas web, aunque su uso está decreciendo con la llegada de HTML 5 y el vídeo en mp4.

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. Sin
embargo en los teléfonos móviles y tabletas no ocurre lo mismo ya que Android y Apple no lo incluyen.

El contenido de esta página requiere una versión más reciente de Adobe Flash Player.
UNIDAD 11. LAS PLANTILLAS (I)
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.
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.
UNIDAD 13. OTROS ELEMENTOS (I)
13.1. Fuentes web

Esta versión de Dreamweaver permite usar fuentes web de forma rápida y sencilla. En la web hay sitios como, Google Webfonts, FontsSquitrel etc.
donde podemos obtener nuevas fuentes para nuestras páginas web. Usar estos nuevos tipos de letra puede dar un toque de originalidad a nuestros
sitios.

Para trabajar con las fuentes web debemos ir al menú Modificar, Fuentes Web ... y veremos la siguiente ventana.
SI PULSAMOS EN EL BOTÓN AÑADIR FUENTE ... VEREMOS ESTA VENTANA.
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.

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.
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 panel
Comportamientos, 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.
UNIDAD 16. COMPORTAMIENTOS AVANZADOS (I)
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 añadir comportamiento y selecciona la opción Mensaje emergente.

Se abrirá el siguiente cuadro de diálogo:

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

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

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 de dinamismo
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.
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).
 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 hemos visto en la unidad anterior como crear 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 en la sección Datos del panel Insertar:

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.
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 gestionar los
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 eliminarentradas, 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
de phpMyAdmin 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.
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:
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:
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.
OPINIONES

• Molar Castillo:
Creo que si bien una de las características que tiene dreamwever es la de poder hacer tu página en modo diseño para un proyecto mas
o menos importante no te puede fiar tanto de eso, porque desde mi punto de vista te genera mucho código que puede considerarse
"basura". Una buena práctica que aquí mismo han recomendado los que saben, es seguir utilizando el modo texto y depender un poco
menos de la vista diseño. Por lo demás lo que dice sumolari me parece acertado

• Torres Torres:
Cada uno que use lo que más le convenga pero según mi opinión si vas a diseñar o a trabajar con asp usa el DreamWeaver si lo que
realmente quieres es desarrollar aplicaciones y diseños con css en php yo recomiendo el Aptana aunque el DreamWeaver no sea una
mala opción.
BIBLIOGRAFIA

• https://www.aulaclic.es/dreamweaver-cs6/index.htm
• https://www.aulaclic.es/dreamweaver-cs6/t_10_1.htm
• https://www.aulaclic.es/dreamweaver-cs6/t_20_1.htm
• https://www.aulaclic.es/dreamweaver-cs6/t_25_1.htm