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 y muchas cosas ms importantes sobre este tema.

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.

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.

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.

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.

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.
Esta barra la encontramos debajo de la ventana de documento, y nos da informacin sobre el
mismo.

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,
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.
Configurar un sitio local
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.
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.
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 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 imgenes y varios.
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.).
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

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
SS.HTML y C
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. 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).
Crear enlaces

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. 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 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. 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, te ser
ms cmodo acceder con la combinacin de teclas Carl + Alta + I.

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