El entorno de Dreamweaver

Elementos bsicos de Dreamweaver: la pantalla, las barras, los paneles, etc...

La pantalla inicial
Al arrancar Dreamweaver aparece una pantalla inicial. 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.

Las barras
La barra de la aplicacin.

La barra la aplicacin es una novedad en Dreamweaver CS4.

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.

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

Todas las opciones de

Dreamweaver son accesibles a travs de los mens, aunque en ocasiones nos enven a los paneles.
Las pestaas de documento

Si junto al nombre aparece un *, indica que ese archivo tiene cambios sin guardar. 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.

 La barra de estado.

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.

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 rechazar.
La barra de herramientas del documento.

La barra de herramientas de documento contiene iconos que nos permiten cambiar vistas de edicin y
la vista en vivo, acceder cmodamente al ttulo de la pgina, o realizar las distintas opciones de
validacin.
La barra de representacin de estilos.
Esta barra, mucho menos utilizada, nos permite ver la apariencia de
nuestra web en distintos dispositivos.
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: Los documentos HTML normalmente se
crean dentro de dicha carpeta, mientras que para contener las
imgenes, las animaciones, archivos de tipos especfico, etc.
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.

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 modificarlas 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.
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
Las dems opciones en este momento no nos interesan, ya que estamos definiendo el sitio local. 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 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.

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.

Dreamweaver guarda la cach de nuestro sitio. 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).
Al modificar algn objeto que es referenciado por algn otro documento, que indica los documentos
que hacen referencia a dicho objeto, y que pueden ser actualizados.

Simplemente hay que pulsar sobre el botn Actualizar,

aunque esto depender de si tenemos configurada la
opcin Mensaje.

El texto: propiedades y formato

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.
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.
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.
Es importante emplear correctamente los encabezados, ya que se organizar mejor el contenido de
nuestra web, recuerda que siempre podremos personalizarlo.
Formato:

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. Por ejemplo, subrayar el
texto. Esta opcin no aparece en el panel de Propiedades ya que de normal no suele utilizarse.
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. 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
Son un elemento esencial para cualquier pgina web.
Introduccin
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, lo que realmente
haremos ser crear una etiqueta que es la que en HTML se encarga de definir los enlaces.

Tipos de referencia
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.
Crear enlaces
La forma ms sencilla 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.
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.
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: 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.
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.
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.

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 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.
Dicha imagen, llamada aulaclic.jpg, se encuentra dentro de la carpeta imgenes. 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.
HTML desde Dreamweaver
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

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