EL ENTORNO DE DREAMWEAVER

Los elementos bsicos de Dreamweaver, la pantalla, las barras, los paneles, etc.

LAS BARRAS
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 online.

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.

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

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

de

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.
La barra de representacin de estilos.

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

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.
Despus se podrn copiar los archivos en un servidor web, en el denominado sitio remoto, lo
que equivale a publicar el sitio, de modo que la gente podr verlo en Internet.
Por tanto, el sitio local y el sitio remoto tienen la misma estructura. El sitio local es la copia
del sitio con la que trabajaremos, y los cambios los actualizaremos en el sitio remoto.
La 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.

La pgina inicial de nuestro sitio debe de tener el nombre index.htm o index.html, ya que
cuando se intenta acceder a una URL genrica, el servidor devuelve la pgina con ese
nombre.

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.
Tambin podemos acceder desde el icono de acceso rpido de la barra de la aplicacin a la
opcin Administrar sitios o Nuevo 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.
Despus de rellenar los datos pulsamos el botn Aceptar y abrimos el sitio.
Si preferimos utilizar un asistente para crear el sitio web slo tenemos que seleccionar la
pestaa Bsicas, en vez de la pestaa Avanzadas.

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
buscar y seleccionar el
desplegable Archivos.

utilizar el panel Archivos,

sitio a abrir en el men

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.
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.
Al modificar algn objeto que es referenciado por algn otro documento, se muestra una
ventana similar a sta, que indica los documentos que hacen referencia a dicho objeto, y que
pueden ser actualizados para que no se produzcan los problemas antes mencionados.
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

Caractersticas del texto
Las caractersticas del texto seleccionado pueden ser definidas a travs del men Formato, y
a travs del inspector de propiedades.
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.
Estas son las etiquetas de resaltado ms habituales, pero existen otras que encontramos a
travs del men Texto. Por ejemplo, subrayar el texto. Esta opcin no aparece en el panel de
Propiedades ya que de normal no suele utilizarse, debido a que los vnculos aparecen
subrayados y el subrayar texto normal podra hacer que el usuario pensara que se trata de un
vnculo. Adems, emplea etiquetas que estn en desuso.

Lista:
Estos botones permiten crear listas con vietas o listas numeradas.

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
indentada hacia la derecha. En cambio, al aplicarlo sobre una lista, crear una sub-lista
dentro de sta.

HIPERENLACES
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.
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 imagenes/miimagen.gif.Si queremos
referirnos a carpetas que estn por encima del nivel donde nos encontramos deberemos
utilizar.
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.

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 #. Otra forma de crear
un enlace es a travs del men Insertar, opcin Hipervnculo.

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

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 Origen del
inspector de propiedades, dependiendo de si ha sido insertada como relativa a la carpeta raz
del sitio o relativa al documento. En el caso de insertar la imagen como relativa al Documento
la ruta sera: imgenes/aulaclic.jpg. Mientras que en el caso de ser insertada como relativa a
la Raz del sitio la ruta sera: /imgenes/aulaclic.jpg. Ocurre lo mismo que cuando se crea un
hipervnculo a un documento relativo al documento o a la carpeta raz del sitio.
Otra forma de insertar una imagen, es arrastrarla directamente desde el panel Archivos sobre
el documento.
Si insertamos una imagen y luego la borramos, la movemos, o escribimos mal su nombre, en
Dreamweaver aparecer as indicando que el enlace al archivo est roto. En ese caso, la
imagen que aparecer en el navegador ser similar a sta:. Aparece un recuadro blanco con
una X roja, junto con el nombre de la imagen o el contenido del campo Alt del inspector de
propiedades.

HTML DESDE 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.
Por ejemplo, un prrafo se inserta entre las etiquetas y, pero es posible cambiar sus
caractersticas predeterminadas, como puede ser asignarle una clase de estilo CSS. Para ello,
a la etiqueta de apertura anterior habra que aadir el atributo y su valor, quedando y .
Tambin hay elementos que no precisan insertar etiqueta de cierre. Por ejemplo, un May +
INTRO dentro del cdigo HTML equivale a la etiqueta.
Realmente estas etiquetas si tienen cierre, y se pone en la etiqueta de apertura para seguir el
estndar XHTML que obliga a que todas las etiquetas se cierren. Por tanto el salto de lnea
Anterior se escribira.
Otras etiquetas que se cierran sobre s mismas son las imgenes, reglas horizontales