ADOBE DREAMWEAVER CS5

2. CREACIÓN DE SITIOS Y PÁGINAS WEB

Adobe Dreamweaver es una herramienta de creación y administración de sitios, por lo que puede
utilizarla para crear sitios Web completos, además de documentos individuales. Para obtener
resultados óptimos, necesitaremos diseñar y planificar el sitio Web antes de crear las páginas que va
a contener. A lo largo del próximo tema, aprenderemos a organizar los archivos de los sitios local y
remoto.

Luego, una vez creado el sitio local, colocaremos en él los documentos nuevos que realicemos. Para
finalizar, configuraremos las propiedades de los documentos de Dreamweaver y los
previsualizaremos en un navegador.

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.

2.1. Planificación de un sitio Web

Antes de comenzar a realizar ningún tipo de desarrollo, es necesario hacer una planificación de
nuestro sitio. Dicha planificación, no sólo reducirá considerablemente el tiempo empleado en la
creación, sino que nos ayudará a que todas las páginas presenten un aspecto uniforme, además de
hacer más sencillo su uso. La forma más cómoda de trabajar, cuando la labor que desarrollamos se
vaya a publicar en un servidor FTP en Internet, es crear una carpeta local de almacenamiento en la
cual situaremos todo nuestro trabajo. De esta forma, podremos comprobarlo todo antes de subirlo al
servidor, minimizando así la aparición de posibles errores en el sitio Web una vez abierto al público.

Existen diferentes métodos básicos de distribución de las páginas con los que cualquier diseñador
deberá estar familiarizado, pues cada uno sirve para un propósito diferente, permitiéndonos incluso
su combinación:

Estructura lineal

Antes del nacimiento de la World Wide Web, la mayoría de los formatos visuales eran lineales, es
decir, una página seguía a otra a lo largo de una secuencia inalterable. Este modelo, hoy en día,
todavía es muy usado para crear aplicaciones de enseñanza, donde podremos controlar el orden de
visualización de los temas, mostrando una página tras otra como si de un libro multimedia se tratase.

23
 ADOBE DREAMWEAVER CS5

Estructura jerárquica

En este modelo, tomamos como punto de partida una página de inicio, desde la cual podremos
acceder al resto de páginas del sitio. Los sitios con estructura jerárquica ayudan a proporcionar un
mejor sentido sobre la orientación de nuestro sitio Web.

Estructura centralizada

Este tipo de navegación está basado en una página central de inicio a la que le vincularemos el resto
de páginas principales del sitio. El principal inconveniente de este modelo es tener que pasar
constantemente por la página principal para ir a otra zona.

Estructura libre

Esta última estructura nos permite aprovechar al máximo la funcionalidad de los hipervínculos,
permitiéndonos que prácticamente cualquier página pueda conectarse a cualquier otra de nuestro
sitio. Como principal inconveniente del uso de este método es la pérdida del internauta durante la
navegación.

24
 ADOBE DREAMWEAVER CS5

2.2. Configurar un sitio Web

Una vez establecida la planificación del sitio, decidido el diseño y su estructura, estamos preparados
para configurar uno nuevo usando Dreamweaver. Aunque siempre es posible definir la ubicación, lo
más adecuado es configurar el sitio local en Dreamweaver antes de comenzar a crear las distintas
páginas que compongan el proyecto.

A lo largo de la siguiente explicación, aprenderemos a establecer este sitio local en Dreamweaver, lo

que significa que podremos utilizar Dreamweaver con FTP para gestionar meticulosamente, tanto su
copia local (PC) como la remota (Servidor), reduciendo al máximo su mantenimiento.

Para configurar un sitio web lo primero que debemos hacer en Dreamweaver es crear nuestro sitio,
para ello, seleccionamos en el menú principal la opción Sitio y pulsamos Nuevo Sitio. Con esta
opción nos aparece un cuadro de diálogo para introducir la información correspondiente al nombre
del sitio y la carpeta donde se ubica los archivos y carpetas de nuestra página web.

Si pulsamos en la configuración avanzada que se encuentra en la barra de opciones de la izquierda,

nos permite introducir la carpeta predeterminada de imágenes, archivos de consulta de medios para
todo el sitio y la URL o dirección de la web donde está ubicada nuestra página. En este caso se puede
omitir. Recomendable que este la opción de Caché activada para agilizar el proceso de trabajo de la
página web.

Enlace vídeo: Configurar un sitio Web.

25
 ADOBE DREAMWEAVER CS5

2.3. Editar un sitio Web existente

En este nuevo apartado, veremos cómo modificar un sitio Web que ya tengamos configurado.

En esta ocasión seleccionamos en el menú principal la opción Sitio y pulsamos Administrar Sitios, en
el cuadro de dialogo que aparece seleccionamos el sitio y pulsamos Listo.

Enlace vídeo: Editar un sitio Web existente.

Seguidamente nos aparece en una ventana con los archivos locales del sitio en concreto. En el caso
de querer eliminar un sitio seleccionamos el sitio y pulsamos el botón (-) situado a la izquierda de la
ventana de Administrar sitios. Dreamweaver solicitará la confirmación de la eliminación pues
desaparecerá definitivamente del programa.

Enlace vídeo: Eliminar un sitio Web existente.

26
 ADOBE DREAMWEAVER CS5

2.4. Sistema de protección

Dreamweaver nos permite activar un sistema de protección de páginas que resulta de gran utilidad
cuando un equipo de diseñadores y programadores se encargan de desarrollar y mantener un sitio
Web. De esta manera, si por ejemplo, uno de los diseñadores está realizando alguna modificación,
Dreamweaver insertará, en el panel Archivos, una marca junto al archivo que estuviera editándose,
para que el resto de diseñadores se den cuenta de que ese fichero se está modificando.

1. Despliegue el menú Sitio y seleccione la opción Administrar sitios.

2. Seleccione un sitio existente en la lista del cuadro con el mismo nombre y haga clic en
el botón Editar. Se abre el cuadro de diálogo Configuración del sitio.
3. Seleccione la categoría Servidores en el cuadro de diálogo.
4. Seleccione un servidor existente y haga clic en el botón Editar servidor existente.
5. Haga clic en el botón Avanzadas en la parte superior.
6. Active la casilla Activar protección del sitio. Al activar esta opción, de forma
automática, aparece la casilla Proteger archivos al abrir activada justo debajo.

7. Introduzca un nombre de protección en el campo de edición correspondiente.

8. A continuación, introduzca una dirección de correo electrónico.
9. Para finalizar, pulse el botón Aceptar.

2.5. Panel Archivos

El panel Archivos es el lugar donde podremos realizar el mantenimiento de nuestro sitio Web. A
través de sus opciones, podremos crear nuevos documentos HTML, abrir y mover archivos, crear
carpetas, y borrar elementos. También podremos utilizarlo para transferir archivos de la carpeta en
desarrollo, de su disco duro a su servidor Web.

El panel Archivos presenta una Barra de herramientas que podremos utilizar para establecer qué
debe mostrarse en dicha ventana y para transferir archivos entre los sitios local y remoto.

27
 ADOBE DREAMWEAVER CS5

Para mostrar el panel Archivos y explicar sus comandos más usados:

1. En primer lugar, despliegue el menú Ventana de la Barra de menús y seleccione la

orden Archivos de su lista de opciones.
2. El panel se mostrará en el margen derecho del programa, junto al resto de paneles ya
visibles.

3. Localice en su Barra de herramientas Expandir para mostrar sitios locales y remotos y

presiónelo para ver todas sus opciones.
4. El panel se mostrará ocupando toda la pantalla y si centra su atención en los
comandos que muestra, verá el botón Contraer para mostrar sólo el sitio local o
remoto que le devolverá a la visión anterior.

5. El cuadro de lista Mostrar nos permite seleccionar otro sitio en la lista emergente que
aparece al pulsar con el ratón sobre él. Además nos permitirá añadir un sitio o editar
la información de uno ya existente mediante la orden Administrar sitios.
6. La opción Conectar al servidor remoto nos permitirá conectarnos con el servidor
remoto de nuestro sitio Web. De forma predeterminada, Dreamweaver desconectará
del sitio remoto si permanece inactivo durante más de 30 minutos.
7. La opción Actualizar nos permite restablecer las listas de los directorios local y
remoto.

28
 ADOBE DREAMWEAVER CS5

8. La opción Archivos del sitio nos muestra la estructura de archivos de los sitios remoto
y local. De forma predeterminada, el sitio remoto aparece en el panel izquierdo,
mientras que los archivos locales se muestran en el derecho.
9. La opción Servidor de prueba nos muestra la estructura de archivos de un servidor de
prueba siempre que esté configurado. Al igual que el comando anterior, el servidor
aparece en el panel izquierdo, mientras que los archivos locales se muestran en el
derecho
10. La opción Archivos de bases de datos muestra la base de datos de Subversion
(SVN).
11. La opción Obtener archivo(s) transfiere una copia de los archivos seleccionados del
sitio remoto al sitio local.
12. La opción Colocar archivo(s) transfiere una copia de los archivos seleccionados desde
el sitio local hasta el sitio remoto.
13. La opción Proteger archivo(s) transfiere una copia del archivo desde el servidor
remoto hasta el sitio local y marca el archivo como protegido en el servidor.
14. La opción Desproteger transfiere una copia de un archivo local al servidor remoto
permitiendo que otros usuarios puedan editarlo.
15. Para finalizar vemos la opción Sincronizar que regulariza los archivos existentes en los
sitios local y remoto.

29
 ADOBE DREAMWEAVER CS5

2.6. Configurar las preferencias del panel Archivos

Mediante esta explicación veremos cómo configurar el panel Archivos para que se cubran todas
nuestras necesidades.

1. En el menú Edición seleccione la opción Preferencias. Se abrirá el cuadro de diálogo con el

mismo nombre.
2. En la lista Categoría, seleccione la opción Sitio.

3. Utilice el cuadro de lista Mostrar siempre para especificar qué archivos (locales o remotos)
se mostrarán por defecto y en qué lado (izquierdo o derecho) aparecerán.
4. En el área Archivos dependientes, las opciones Mensaje al obtener/proteger y Mensaje al
colocar/desproteger aparecen activadas de forma predeterminada.
5. En el área Conexión FTP, podremos determinar si se interrumpirá la conexión con el sitio
remoto cuando transcurra el número de minutos que especifiquemos en el campo de
edición.
6. En el área de edición Tiempo de espera FTP, especifique el número de segundos durante los
que Dreamweaver intentará establecer una conexión con el servidor remoto.
7. En el campo editable Host proxy, especifique la dirección del servidor proxy con el que
establecerá la conexión con servidores externos si se encuentra al otro lado de un
cortafuegos.
8. En el área Puerto proxy, especifique el puerto del cortafuego por el cual se establece la
conexión con el servidor remoto.
9. Active Guardar archivos antes de colocar para que los archivos se guarden de forma
automática antes de colocarlos en el sitio remoto.
10. El botón Administrar sitios nos abrirá el cuadro de diálogo con el mismo nombre, en el que
podremos editar un sitio existente o crear uno nuevo.
11. Para finalizar, guarde los cambios realizados pulsando el botón Aceptar.

30
 ADOBE DREAMWEAVER CS5

2.7. Crear, abrir y guardar documentos

Una vez que hemos aprendido a crear el sitio local, debemos comenzar a desarrollar los documentos
que colocaremos en él. Adobe Dreamweaver ofrece diversas formas para crear un documento.

Podremos crear documentos HTML nuevos (en blanco); abrir documentos HTML existentes, crear un
nuevo documento basado en una plantilla, etc.

NOTA: Cuando guarde un documento, evite utilizar espacios y caracteres especiales en los nombres
de archivos y carpetas.

Para crea un nuevo documento HTML en blanco nos vamos al menú principal Archivos y pulsamos
Nuevo, con lo que nos aparece una ventana para seleccionar las características de nuestro nuevo
documento, que puede ser:
 Página en blanco
 Plantilla en blanco
 Diseño de cuadricula fluido.
 Página de plantilla
 Página de muestra.
 Otro…

Donde nos permite seleccionar el tipo de página y el diseño.

En nuestro caso seleccionamos Página en blanco HTML y ningún diseño. En tipo de documento
seleccionamos el que está por defecto. En la opción adjuntar archivo CSS, no poner nada, puesto
que sería en el caso de tener un archivo de hoja de estilo ya creado para esta página, entonces sí
habría que adjuntarlo. Seguidamente pulsamos Crear.

Enlace vídeo: Crear un nuevo documento HTML en blanco.

31
 ADOBE DREAMWEAVER CS5

Para abrir un archivo HTML existente, vamos al menú principal Archivo y pulsamos Abrir o pulsamos
las teclas Ctrol+O. Nos aparece una ventana de búsqueda que nos permite buscar la dirección local
donde se encuentra nuestro archivo HTML existente.

Enlace vídeo: Abrir un archivo HTML existente.

Para guardar un documento por primera vez tenemos que ir a Archivo y pulsar Guardar o pulsando
las teclas Ctrol+S. Nos aparece una ventana que nos pregunta en que directorio guardarlo y el
nombre y tipo del documento a guardar. Por ejemplo, introducimos el directorio local WEB_1 e
introducimos el nombre Index y el tipo html y pulsamos Guardar.

Enlace vídeo: Guardar un documento por primera vez.

32
 ADOBE DREAMWEAVER CS5

2.8. Configurar las propiedades del documento

Antes de comenzar a añadir contenido a un documento, podremos necesitar configurar sus

propiedades principales. Con el cuadro de diálogo Propiedades de la página, podremos configurar el
título de la página, las imágenes y colores del fondo, del texto y de los vínculos.

¡Recuerde! Un asterisco indica que el documento contiene cambios que no se han guardado aún.

Para configurar las propiedades del documento nos vamos al menú principal Modificar y pulsamos la
opción Propiedades de la página, donde aparecen las siguientes categorías:

 Apariencia (CSS)
 Apariencia (HTML)
 Vínculos (CSS)
 Encabezado (CSS)
 Titulo/Codificación
 Imagen de rastreo.

Conforme vamos seleccionando las diferentes categorías va apareciendo a la derecha del cuadro de
diálogo las características a añadir y valores por defecto para cada una de las categorías de la página.

Para introducir el título nos ponemos en la categoría Titulo/Codificación e introducimos el título de

la página. Tipo de documento, codificación o formulario de normas Unicode.

Enlace vídeo: Configuración de propiedades del documento.

33
 ADOBE DREAMWEAVER CS5

2.9. Guías visuales

Dreamweaver nos proporciona varios tipos de guías visuales que nos ayudarán a la hora de diseñar y
previsualizar cuál será la apariencia de nuestro diseño en un navegador. Aprenderemos a activar la
visualización de las reglas y a utilizar la cuadrícula para lograr una mayor precisión en la colocación y
ajuste del tamaño de las capas.

Configuración de Regla

Para visualizar la regla seleccionamos en el menú principal Ver y pulsamos Reglas, en el siguiente
submenú seleccionamos Mostrar. Aparece la regla vertical y horizontal en la venta de trabajo de
Dreamweaver.

Siga los mismos pasos para Restablecer Origen y volver a la posición inicial o si desea cambiar la
unidad de medida en pixel, pulgadas o centímetros.

Enlace vídeo: Configuración de reglas.

Configuración cuadricula

Para configura la cuadricula nos vamos hacia el menú Ver y pulsamos Cuadricula donde aparece un
submenú con tres opciones:

 Mostrar cuadricula
 Ajustar a cuadricula
 Configuración de cuadricula…

Si pulsamos Mostrar cuadricula aparece en la ventana de la página con el fondo cuadriculado, para
cambiar y dimensionar los cuadrados se utiliza la opción Configuración de la cuadricula que nos
permite cambiar el color, espaciado, mostrar el trazado como líneas o puntos.

Enlace vídeo: Configuración de cuadrícula.

34
 ADOBE DREAMWEAVER CS5

2.10. Insertar palabras clave y descripciones

Si desea dar a conocer una página Web, podremos usar una serie de elementos encargados de
contener la información necesaria para que los motores de búsqueda puedan dar a conocer el
contenido y tipo de la página Web. En Dreamweaver, estos elementos están representados por los
objetos Palabras clave y Descripción.

Palabras clave

1. En el menú Insertar, seleccione la opción HTML. Seguidamente, colóquese sobre la opción

Etiquetas Head y, en el submenú que aparece, seleccione la opción Palabras clave. Se abre el
cuadro de diálogo con el mismo nombre.

2. Introduzca las palabras clave, separadas por comas, en el cuadro de edición Palabras
clave.
3. Para finalizar, pulse el botón Aceptar.

NOTA: Dado que algunos motores de búsqueda limitan el número de palabras clave o caracteres
que indexan, o bien prescinden de todas las palabras clave si se supera el límite, conviene utilizar
sólo unas pocas palabras clave bien elegidas.

Descripción

1. En el menú Insertar, seleccione la opción HTML. Seguidamente, colóquese sobre la

opción Etiquetas Head y en el submenú que aparece seleccione Descripción. Se abre el
cuadro de diálogo con el mismo nombre.

2. Introduzca el texto descriptivo sobre la Web en el cuadro de edición Descripción.

3. Para finalizar, pulse el botón Aceptar.

NOTA: Al igual que ocurría con las palabras clave, algunos motores de búsqueda limitan el número
de caracteres que indexan, por lo que conviene restringir la descripción al menor número de palabras
posible.

35
 ADOBE DREAMWEAVER CS5

2.11. Previsualizar un documento

A la hora de usar un programa como Dreamweaver, o cualquier otro programa de creación de

páginas Web, es importante el poder previsualizar el resultado de nuestro trabajo con cierta
frecuencia en uno o varios exploradores. A pesar de que en la ventana de trabajo del programa, se
tiene una visión muy similar a la de un explorador, debido al gran número de navegadores existentes
y a sus diferencias, se hace necesario poder visualizar nuestra página en ellos.

1. En el menú Archivo, seleccione la opción Vista previa en el navegador y en el submenú

que aparece, seleccione Editar lista de navegadores. Se abre el cuadro de
diálogo Preferencias con la categoría Vista previa en el navegador seleccionado.

2. Para añadir un nuevo navegador a la lista predeterminada, en el área Navegadores pulse

el botón con forma de signo más (+). Se abre el cuadro de diálogo Añadir navegador.

3. En el campo de edición Nombre, escriba el nombre con el que aparecerá el explorador en

la lista.
4. En el área Aplicación, utilice el botón Examinar para localizar la ruta de acceso al
ejecutable del navegador que desea configurar. Si lo desea, puede introducir
directamente la ruta utilizando el campo de edición.
5. Active, si lo desea, una de las casillas correspondientes al tipo de navegador Navegador
principal o Navegador secundario.
6. Haga clic en Aceptar para añadir así el navegador configurado a la lista.
7. Una vez añadido un navegador a la lista, podrá editarlo o borrarlo con gran facilidad. Para
editarlo lo seleccionamos en la lista y pulsamos el botón Editar. Para borrarlo,
selecciónelo en la lista y pulse el botón con forma de signo menos (-).
8. Haga clic sobre el botón Aceptar cuando haya terminado de realizar las modificaciones
que crea oportunas.

NOTA: Una vez haya añadido uno o varios navegadores a la lista, podrá previsualizar las páginas Web
en dichos navegadores. Para ello, selecciónelo de la lista que aparece al escoger la opción Vista
previa en el navegador del menú Archivo.
36
 ADOBE DREAMWEAVER CS5

2.12. Práctica: Diseño Web parte II

Una vez configuradas las preferencias de Dreamweaver que vimos en el ejercicio anterior, llega el
momento de configurar la estructura del sitio que vamos a crear. Un sitio es un lugar de
almacenamiento para todos los documentos y archivos necesarios para crear una página Web. Al
definir el sitio local, lo que haremos será establecer el lugar en el que pensamos almacenar todos los
archivos del sitio dentro del disco duro de nuestro PC. Es recomendable crear un sitio local por cada
sitio Web que creemos.

Recuerda…
El cuadro de diálogo Propiedades de la página del menú Modificar nos permitirá configurar una
imagen como fondo.

Deberemos marcar la opción Permitir desproteger y proteger activo para activar el sistema de
protección de páginas de Dreamweaver.

Las siglas FTP significa Protocolo de Transferencia de Archivos.

Cuando aparece un pequeños asterisco (*) junto al nombre de la página en la Barra del título
significa que el documento contiene cambios que no han sido guardados.

Si activamos la categoría Datos locales del cuadro de diálogo Definición del sitio se activa la Caché
mejoraremos la velocidad de las tareas de administración de vínculos y sitios.

Los métodos básicos de distribución de las páginas son:

-Estructura Libre

-Estructura centralizada

-Estructura jerárquica

Para previsualizar un documento HTML en el navegador que tenemos configurado como

predeterminado pulsamos la opción Vista previa en el navegador del menú Archivo.

El tiempo máximo que debe estar desactiva la conexión con el servidor para que Dreamweaver lo
desconecte es de 30 minutos.

37