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 como se llaman,
donde estn y para que sirven. Tambin veremos
como obtener ayuda, por si en algn momento no sabemos
como 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
esta, 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,donde veremos
todos los elementos de la barra ocupando una sola lnea
Esta barra contiene los siguientes elementos: los mens,
varios botones
propios de la aplicacion, el conmutador de espacio de trabajo
y una caja de busquedas para obtener ayuda on
Line.

Los botones propios de la aplicacion, que aparecen junto al

icono, nos permiten cambiar entre la vista de diseo o codigo,
acceder a las extensiones que se pueden aadir, o al
administrador
de sitios, que ya veremos.

Mas hacia la derecha observamos el conmutador del espacio

de trabajo, como un desplegable. Un espacio de
trabajo es la configuracion del entorno, que podemos guardar
y cargar.

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 traves de los
menus, aunque en ocasiones nos envien a los paneles.

Las pestanas de documento:

Cada archivo que tengamos abierto, mostrara una pestana

con su nombre, lo que nos permitir cambiar de
Uno a otro fcilmente 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.
Hasta aqu las barras que siempre veremos en la aplicacin:

La barra de herramientas
estandar.
La barra de herramientas estandar contiene iconos para
realizar las acciones mas habituales del
menu Archivo yEdicion. De izquierda a derecha:

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 representacion de
estilos:

Esta barra nos permite ver la apariencia de nuestra web.

al personalizar el entorno nos permiten colocarlo como otra
barra de herramientas.

Configurar un sitio local:

En este tema vamos a verque es un sitio web, como crearlos y
gestionarlos, y como 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 trabajaremos, y los cambios los
actualizaremos La organizacin de los archivos en un sitio
permite administrar y compartir archivos, mantener los
vnculos de forma automtica, 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 formaran 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.
Tambin podemos acceder desde el icono de acceso rpido de
la barra de la aplicacion a la
Opcin Administrar sitios o Nuevo sitio...

Tanto si se elige la opcin Nuevo..., como si se elige la opcin

Editar..., se mostrara la misma ventana en la que definir o
modificar las caracteristicas del sitio.

Las opciones del sitio se agrupan en diferentes categoras

que aparecen en la parte izquierda.

Debe definirse el Nombre del sitio, que nicamente nos

servir para identificarlo en la lista de sitios.
Despus de rellenar los datos pulsamos el botn Aceptar y
abrimos el 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.
Esto nos sirve para ver a la vez el sitio local y el sitio remoto
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 cache de nuestro sitio, como se

organizan los archivos y se relacionan entre ellos encontrara
la pgina. Al modificar algn objeto que es referenciado por
algn otro documento para que no se produzcan los
problemas antes mencionados.

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.
Caracteristicas del texto

Comenzamos viendo las

propiedades HTML:

Todas estas propiedades generan etiquetas HTML, podremos

personalizarlas con CSS para que se vean exactamente como
queramos.
Formato:

Formato:

Permite seleccionar un formato de parrafo ya definido para

HTML, que puede ser encabezado, parrafo o
Formato predeterminado.
Es importante emplear correctamente los encabezados, ya
que se organizara mejor el contenido de nuestra
Web, y es importante de cara a buscadores y visitantes.
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 que son las listas en el siguiente
Apartado.
Sangria:

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 que son los hiperenlaces, para que sirven y como
crearlos, ya que son un elemento esencial
para cualquier pgina web.
Introduccion:
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.

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:
Referencia absoluta: Conduce al sitio en el que se encuentra
el documento utilizando
la ruta completa del archivo, incluyendo el protocolo
http://.
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 esta 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 (/).
La forma ms sencilla de crear un enlace es a travs del
inspector de propiedades 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 mostrara el enlace. Si tenamos un

texto seleccionado, aparecer ah.
Vinculo: es la pgina a la que ira redirigida el enlace, si
se trata de un enlace externo debers escribirla
Empezando siempre por http://.

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.

 ndice de tabulador: Como abras podido observar

puedes saltar a travs de los enlaces pulsando la tecla
Tabulador.
Imgenes:En este tema vamos a ver como insertar
imagenes en un documento.
Introduccion:Las imagenes 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.

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.
Otra forma de insertar una imagen, es arrastrarla
directamente desde el panel Archivos sobre el documento.

HTML desde Dreamweaver.En este tema no se pretende

ensenaros el lenguaje HTML sino como poder realizar
algunos reajustes directamente en el codigo estando
dentro de Dreamweaver.
Etiquetas:Ya sabes que el lenguaje HTML esta basado en
etiquetas que marcan el inicio y fin de cada elemento de
lapagina Web.

En el primer tema vimos como ejemplo las etiquetas que hay

que incluir en el codigo HTML de una pagina
para darle un titulo.
Por ejemplo, un parrafo se inserta entre las etiquetas y, pero
es posible cambiar sus caracteristicas
predeterminadas, como puede ser asignarle una clase de
estilo CSS.
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.