L

El Entorno de
Dreamweaver

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

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

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 del
men Archivo y Edicin. 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, acceder cmodamente al ttulo de la pgina, o realizar
las distintas opciones de validacin que nos ofrece el programa.

Esta barra, mucho menos utilizada, 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 es lo que
se conoce como sitio local.
Crear o editar un sitio web sin conexin a Internet

Una vez creadas las carpetas que formarn la estructura del sitio local, o por lo menos la carpeta
raz, 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.

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.

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

Simplemente hay que pulsar sobre el botn Actualizar, aunque esto depender de si tenemos
configurada la opcin Mensaje al actualizar vnculos si movemos archivos. Lo cual podemos
establecer desde el men Edicin, opcin Preferencias, categora General.
El texto: propiedades y formato
Las caractersticas del texto seleccionado pueden ser definidas a travs del men Formato, y a
travs del inspector de propiedades. Propiedades HTML SS.

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.
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 cmo se
muestran esos encabezados, recuerda que siempre podremos personalizarlo.

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.
Si lo aplicamos sobre texto normal, lo encerrar en una etiqueta, que por defecto se muestra
inventada hacia la derecha. En cambio, al aplicarlo sobre una lista, crear una sub-lista dentro de
sta.

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.

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).
Referencia relativa al documento (por defecto): La ubicacin del archivo enlazado se toma en
relacin con la ubicacin de la pgina. Es decir, partimos de la carpeta en la que se encuentra el
documento. Si queremos enlazar con una pgina o archivo dentro de la misma carpeta, no tenemos
ms que utilizar su nombre. Por ejemplo, pagina2.htm.Si est en una subcarpeta de la pgina
actual, no tenemos ms que indicar el nombre de la carpeta antes del archivo, y separarlos por una
barra (/). Por ejemplo imgenes/miimagen.gif.Si queremos referimos a carpetas que estn por
encima del nivel donde nos encontramos deberemos utilizar.../ Por ejemplo, imagina que estamos
en la siguiente direccin http://www.misitio.com/pagina/informacion/index.html. En esta pgina
queremos
mostrar
una
imagen
que
se
encuentra
en
la
carpeta
http:
//www.misitio.com/pagina/secciones/seccion1.html, cmo podemos hacerlo? Fcil. Deberemos
llamarla haciendo referencia al nivel superior
(http://www.misito.com/pagina/) para poder ir luego a la carpeta secciones. El resultado de la ruta
sera el siguiente: ../secciones/seccion1.html. De esta forma, mientras nos encontramos en la
carpeta informacin, subimos un nivel y luego nos movemos dentro de la carpeta secciones para
mostrar el archivo seccion1.html. Esta opcin depende de la ubicacin del archivo.

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 Alta ms la tecla de acceso indicada.
ndice de tabulador: Como habrs podido observar puedes saltar a travs de los enlaces pulsando
la tecla Tabulador.

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

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 Carl + Alta + I. .

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 delinspector de propiedades.
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.

Etiquetas:
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...
Otras etiquetas que se cierran sobre s mismas son las imgenes, reglas horizontales