EL ENTORNO DE DREAMWEAVER

Los elementos bsicos de Dreamweaver , la pantalla, las barras, los paneles, etc..., para saber diferenciar
entre cada uno de ellos. Aprenderemos cmo se llaman, dnde estn y para qu sirven. Tambin veremos
cmo obtener ayuda, por si en algn momento no sabemos cmo seguir trabajando. Cuando conozcamos
todo esto estaremos en disposicin de empezar a crear pginas web.
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 ms fcil entender el resto
del curso. La pantalla que se muestra a continuacin (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 dnde, como veremos ms adelante.

La barra de la aplicacin.

La barra la aplicacin es una novedad en Dreamweaver CS4. Si tenemos la ventana maximizada veremos
todos los elementos de la barra ocupando una sola lnea, si no, ocuparn dos lneas, como en la imagen
superior.
Esta barra contiene los siguientes elementos: los mens (en la imagen, en la parte inferior), varios botones
propios de la aplicacin, el conmutador de espacio de trabajo y una caja de bsquedas para obtener ayuda
on line.

Los botones propios de la aplicacin, que aparecen junto al icono, nos permiten (de derecha a izquierda)
cambiar entre la vista de diseo o cdigo, acceder a las extensiones que se pueden aadir, o al
administrador de sitios, que ya veremos.

Ms hacia la derecha observamos el conmutador del espacio de trabajo, como un desplegable. Un espacio
de trabajo es la configuracin del entorno (paneles visibles y su disposicin) que podemos guardar y cargar.
Lo veremos ms adelante.
Los mens, estn agrupados en categoras.

Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con los diferentes elementos
que se pueden insertar en Dreamweaver. Todas las opciones de Dreamweaver son accesibles a travs de los
mens, aunque en ocasiones nos enven a los paneles.

Las pestaas de documento.

Cada archivo que tengamos abierto, mostrar una pestaa con su nombre, lo que nos permitir cambiar de
uno a otro fcilmente. Si junto al nombre aparece un *, indica que ese archivo tiene cambios sin guardar.
Podemos cerrar cada documento clicando en el aspa, o acceder a otras acciones haciendo clic con el botn
derecho, como Cerrar otros archivos.
Dreamweaver CS4 aade una novedad. Debajo de las pestaas encontramos los archivos a que utiliza
nuestra pgina, como la hoja de estilos, archivos JavaScript, etc... pudiendo acceder a ellos con un clic. Esto
nos ahorrar bastante tiempo.
La barra de estado.

Esta barra la encontramos debajo de la ventana de documento, y nos da informacin sobre el mismo.
A la izquierda, encontramos el selector de etiquetas. Nos sirve para seleccionar etiquetas completas.
Siguiendo hacia la derecha encontramos las herramientas de Seleccin, Mano (para desplazarse) y Zoom. Y
otros datos como el tamao de la ventana, el tamao de la pgina o su codificacin.

Hasta aqu las barras que siempre veremos en la aplicacin. A parte, existen otras que podemos ver u
ocultar desde el men Ver Barras de herramientas.

La barra de herramientas estndar.

La barra de herramientas estndar contiene iconos para realizar las acciones ms habituales De izquierda a
derecha: Nuevo archivo, Abrir, explorar con Adobe Bridge, Guardar, Guardar todo, Imprimir el cdigo fuente,
Cortar, Copiar, Pegar, Deshacer y Rehacer.
La barra de herramientas de documento.

La barra de herramientas de documento contiene iconos que nos permiten cambiar entre las distintas vistas
de edicin y la vista en vivo.
La barra de representacin de estilos.

Esta barra, nos permite ver la apariencia de nuestra web en distintos dispositivos, si estamos utilizando
hojas distintas que dependan del eso.
Como veremos al personalizar el entorno, algunos paneles, como Insertar nos permiten colocarlo como otra
barra de herramientas.
Configurar un sitio local :

En este tema vamos a ver qu es un sitio web, cmo crearlos y gestionarlos, y cmo modificar las
propiedades de los documentos, como puede ser el color de fondo.
Un sitio web es un conjunto de archivos y carpetas, relacionados entre s, con un diseo similar o un
objetivo comn. Es necesario disear y planificar el sitio web antes de crear las pginas 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 imgenes, las animaciones,
archivos de tipos especfico, etc., se deben crear nuevas carpetas dentro de sta, con el objetivo de tener
una mejor organizacin de los archivos a la hora de trabajar. Esto se conoce como sitio local.
Despus se podrn copiar los archivos en un servidor web, de modo que la gente podr verlo en Internet.
Por tanto, el sitio local y el sitio remoto tienen la misma estructura.
La organizacin de los archivos en un sitio permite administrar y compartir archivos, mantener los vnculos
de forma automtica, utilizar FTP para cargar el sitio local en el servidor, etc.
Crear o editar un sitio web sin conexin a Internet

Una vez creadas las carpetas que formarn la estructura del sitio local, ya es posible definir el nuevo sitio.
Para ello hay que dirigirse al men Sitio, a la opcin Administrar sitios... o directamente a Nuevo sitio.
Recuerda que a travs del panel Archivos, se puede cambiar a cada uno de los sitios definidos.
Tambin podemos acceder desde el icono de acceso rpido de la barra de la aplicacin a la opcin
Administrar sitios oNuevo sitio...

Tanto si se elige la opcin Nuevo..., como si se elige la opcin Editar..., se mostrar la misma ventana en la
que definir o modificar las caractersticas del sitio.

Las opciones del sitio se agrupan en diferentes categoras que aparecen en la parte izquierda.
Para visualizar las caractersticas de una categora basta con seleccionarla de la lista haciendo clic en ella.
Vamos a ver los datos que hay que editar para la categora Datos locales, que ser lo nico que empleemos
de momento.
Debe definirse el Nombre del sitio, que nicamente nos servir para identificarlo en la lista de sitios.
La Carpeta raz local, que es en la que se encuentra el sitio dentro del disco duro local. La carpeta puede
contener ya archivos o no.

Estas dos caractersticas son las imprescindibles para definir un sitio local. El resto son opcionales, y de
momento no nos interesan.
Aunque s destacaremos la opcin Usar vnculos de distincin entre maysculas y minsculas.
Despus de rellenar los datos pulsamos el botn Aceptar y abrimos el sitio.
Abrir un sitio
Para abrir un sitio ya definido hay que dirigirse al men Sitio, a la opcin Administrar sitios.... seleccionar el
sitio de la lista de sitios y pulsar sobre el botn Listo.

Tambin podemos utilizar el panel Archivos, buscar y seleccionar el sitio a abrir en el men desplegable
Archivos.
Ver el sitio
El panel Archivos (men Ventana Archivos o tecla F8) es uno de los paneles ms importantes de
Dreamweaver, ya que nos da acceso a los archivo del sito.

En este caso vemos todos los documentos creados en nuestro sitio buscar.htm, paraplantilla.htm,
platossemana.htm,postresemana.htm y las carpetas imagenes y varios.
Es posible visualizar un sitio en el panel Archivos o en una ventana. Para cambiar de una vista a otra hay
que pulsar sobre el botn

que aparece en la parte superior del panel y de la ventana.

Esto nos sirve para ver a la vez el sitio local (el de nuestro equipo) y el sitio remoto (el del servidor), y
poder, por ejemplo, sincronizar los archivos, o compararlos. Tambin el servidor de pruebas o las bases de
datos.
En esta imagen, se visualiza el remoto (a la izquierda) todava vaco, y el sitio local (a la derecha) con
nuestros archivos.

Dreamweaver guarda la cach de nuestro sitio, cmo se organizan los archivos y se relacionan entre ellos.
Por eso, si cambiamos el nombre de un archivo o su carpeta desde Dreamweaver, automticamente
actualizar todas las referencias a ese archivo (enlaces desde otras pginas, origen de la imagen, etc).
En cambio, si realizamos estos cambios desde fuera de Dreamweaver, las pginas no se mostrarn
correctamente: no aparecern imgenes, no funcionarn enlaces, etc, ya que Dreamweaver simplemente
no encontrar la pgina.

El texto: propiedades y formato

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.
Caractersticas del texto
Las caractersticas del texto seleccionado pueden ser definidas a travs del men Formato, y a travs del
inspector de propiedades. Vamos a ver las posibilidades que se nos ofrecen a travs del inspector de
propiedades, que estn clasificadas en dos categoras 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 prrafo ya definido para HTML, que puede ser encabezado, prrafo o
formato predeterminado. Los encabezados se utilizan para establecer ttulos 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, debera ir siempre en
prrafos, salvo que est en otros elementos, como tablas o listas.
Estilo:
El botn B encierra el texto en una etiqueta , que por defecto se muestra en negrita. El botn I, lo encierra
entre , que por defecto se ve en cursiva.
Lista:
Estos botones permiten crear listas con vietas o listas numeradas. Veremos qu son las listas en el
siguiente apartado.
Sangra:
Estos dos botones permiten sangrar el texto y anular la sangra. La sangra es una especie de margen que
se establece a ambos lados del texto. En este caso los botones se refieren a sangra a la izquierda del texto.
Hiperenlaces :

Vamos a ver qu son los hiperenlaces, para qu sirven y cmo crearlos, ya que son un elemento esencial
para cualquier pgina web.
Introduccin
Un hiperenlace, hipervnculo, o vnculo, no es ms que un enlace, que al ser pulsado lleva de una pgina o
archivo a otra pgina o archivo.Es posible asignar un vnculo a un texto, a una imagen, o a parte de una
imagen.Cuando creemos un enlace, lo que realmente haremos ser crear una etiqueta que es la que en
HTML se encarga de definir los enlaces. Esto podrs observarlo en la barra de estado:

Tipos de referencia
Existen diferentes clases de rutas de acceso a la hora de definir los vnculos. Estas referencias no se limitan
a los enlaces, se comportarn igual cuando indiquemos la ubicacin 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/pagina/pagina1.html.La referencia absoluta es independiente de la ubicacin de la
pgina que contiene el enlace, y ser vlida siempre que no cambie la ubicacin del archivo enlazado. Es la
opcin obligatoria si pretendemos enlazar a archivos fuera de nuestro sitio (enlaces externos).
Esta opcin depende de la ubicacin del archivo, y pueden no funcionar correctamente si alteramos la
estructura de carpetas. Esta es la opcin por defecto de Dreamweaver, y es la forma ms habitual.
Crear enlaces
La forma ms sencilla de crear un enlace es a travs del inspector de propiedades. Para ello es necesario
seleccionar el texto o el objeto que va a servir de enlace, y seguidamente establecer el Vnculo en el
inspector HTML.Por ejemplo, aqu hay un enlace a www.aulaclic.es, que al ser un archivo externo es de
referencia absoluta, por eso contiene http://

Es posible crear tambin vnculos vacos, que pueden ser tiles cuando se utilizan comportamientos, etc.
Para ello es necesario escribir en Vnculo nicamente una almohadilla #. Veremos su utilidad ms adelante.
Otra forma de crear un enlace es a travs del men Insertar, opcin Hipervnculo.

Crear vnculos de esta forma es muy sencillo, slo debers rellenar los campos que explicaremos a
continuacin y el enlace se colocar en el lugar en el que estaba situado el cursor.
Texto: es el texto que mostrar el enlace. Si tenamos un texto seleccionado, aparecer ah.
Vnculo: es la pgina a la que ir redirigida el enlace, si se trata de un enlace externo debers escribirla
empezando siempre por http://. Haz clic sobre el icono de carpeta para buscar los archivos que existan
dentro del sitio. Por defecto Dreamweaver te crear un enlace relativo al documento.
Destino: la ventana donde se abrir la pgina, este campo se explica en el siguiente apartado.
Ttulo: se trata de la ayuda contextual del vnculo, que aparecer al mantener un instante el cursor sobre el
enlace.
Tecla de acceso: atributo que facilita la accesibilidad a las pginas, habilita el acceso al enlace mediante la
pulsacin de la tecla Alt ms la tecla de acceso indicada.
ndice de tabulador: Como habrs podido observar puedes saltar a travs de los enlaces pulsando la tecla
Tabulador. En este campo podrs establecer un ndice indicando la prioridad del enlace y as configurar el

modo en el que actuar el Tabulador es sus diferentes saltos. Por defecto, se tabularn por orden de
aparicin
Imgenes
En este tema vamos a ver cmo insertar imgenes en un documento. Tambin veremos cmo crear algunas
imgenes especiales, como es el caso de los Rollovers y los botones flash, que ayudan a mejorar la
apariencia de nuestras pginas.
Introduccin
Las imgenes son un aspecto muy importante de la web. Ya sea como complementos a la informacin o
parte del diseo, la hacen mucho ms atractiva a ojos del visitante. No obstante, no conviene abusar, ya
que aumentarn mucho el tamao final de la web. Existen una serie de formatos de imagen ms
recomendables que otros para ser introducidos en una pgina web. Esta informacin puedes consultarla
aqu.
Insertar una imagen
Para insertar una imagen hay que dirigirse al men Insertar, a la opcin Imagen. Despus de esto, ya es
posible seleccionar una imagen a travs de la nueva ventana. Cuando te acostumbres, te ser ms cmodo
acceder con la combinacin de teclas Ctrl + Alt + I.

En Relativa a es posible especificar si la imagen ser relativa al documento o a la carpeta raz del sitio. Es
preferible que sea relativa al Documento, ya que si cambiamos la pgina de carpeta, lo habitual es cambiar
tambin sus imgenes. Lo mismo ocurre cuando se selecciona un documento para crear un vnculo. 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 campo
HTML desde Dreamweaver
En este tema vamos a ver algunas de las facilidades que proporciona Dreamweaver para trabajar sobre el
propio cdigo HTML, y no nicamente sobre el editor grfico de la vista diseo.
En este tema no se pretende ensearos el lenguaje HTML sino cmo poder realizar algunos reajustes
directamente en el cdigo estando dentro de Dreamweaver.
Etiquetas
Ya sabes que el lenguaje HTML est basado en etiquetas que marcan el inicio y fin de cada elemento de la
pgina Web.
En el primer tema vimos como ejemplo las etiquetas que hay que incluir en el cdigo HTML de una pgina
para darle un ttulo. Consista simplemente en escribir el ttulo deseado entre las etiquetas. Las etiquetas
consisten en poner un mismo comando entre los smbolos < y >. La primera etiqueta indica inicio, y la
segunda, que incluye el smbolo /, indica final y se suele denominar etiqueta de cierre. Las etiquetas
disponen de atributos que permiten definir caractersticas del elemento sobre el que actan, incluyendo
cierto cdigo dentro de la etiqueta.