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.

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

La barra de herramientas estndar.

La barra de herramientas estndar contiene iconos para realizar las

acciones ms habituales del men Archivo yEdicin. De izquierda a
derecha: Nuevo archivo, Abrir, explorar con Adobe Bridge, Guardar,
Guardar todo, Imprimir el cdigo fuente, Cortar, Copiar,
Deshacer
Pegar,
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
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.

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.
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.
Las dems opciones en este momento no nos interesan, ya que estamos
definiendo el sitio local, y no es necesario establecer los datos del servidor
en el que estar el sitio remoto.
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.
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.

Simplemente hay que pulsar sobre el botn Actualizar, aunque esto

depender de si tenemos configurada la opcinMensaje al actualizar
vnculos si movemos archivos. Lo cual podemos establecer desde el men
Edicin, opcinPreferencias, categora General.

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 C
Comenzamos viendo las 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.
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.
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.
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.
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 indentada 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. 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).
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 referinos a carpetas que estn por
encima del nivel donde nos encontramos deberemos utilizar ../ Por
ejemplo,
imagina
que
estamos
en
la
siguiente
direccinhttp://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.
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://

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
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 Origen del inspector de propiedades, dependiendo
de si ha sido insertada como relativa a la carpeta raz del sitio o relativa al
documento. Por ejemplo, imagina que dentro de la carpeta raz del sitio
(la carpeta del sitio) se encuentran la carpeta imgenes y el documento en
el que deseamos insertar la imagen. 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:
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
Ya sabes que el lenguaje HTML est basado en etiquetas que marcan el
inicio y fin de cada elemento de la pgina Web.