B ASES DE D REAMWEAVER

Conceptos bsicos de Dreamweaver CS3

Empezar con Dreamweaver
Al abrir Dreamweaver elegimos un documento nuevo y seleccionamos la Categora Pgina bsica, HTML. Antes de empezar con Dreamweaver debemos tener en cuenta la organizacin de la informacin para permitir su correcto funcionamiento. Otro consejo a tener en cuenta es la utilizacin de nombres en los archivos generados, nunca utilizaremos espacios ni smbolos como barras, acentos, puntos, etc., solamente letras, nmeros y guiones para separar (guin bajo _ y guin -). Si no seguimos estos consejos al subir una pgina a un servidor deberemos rehacer el trabajo.

Crear un Nuevo Sitio:

Es lo primero que tenemos que hacer, de lo contrario tendremos errores al visualizar el archivo en un navegador y tendremos que rehacer todo el trabajo.

Pondremos un nombre al Sitio para diferenciar cada trabajo y crearemos carpetas donde guardar los archivos de ese trabajo:

Carpeta de trabajo Carpeta de imgenes

Pgina 1

B ASES DE D REAMWEAVER

Ahora todos los archivos generados deberemos guardarlos en esas carpeta, podemos aadir otras carpetas donde guardaremos los archivos de apoyo como PSD, DOC, AI, CDR, etc; que podemos llamar Varios para recordarla ms fcilmente.
Barra de Mens e Iconos Visualizacin de zona de trabajo

Ventanas acoplables

Zona de trabajo

Visualizacin de archivos

Barra de propiedades

La zona de introduccin de datos, en principio la usaremos en modo de visualizacin de Diseo, as podremos ver cmo quedar nuestra pgina cuando la veamos en un navegador. El espacio funciona como en un documento de Word, se colocarn los elementos que escribamos o que insertemos de modo consecutivo, pudiendo cambiar de lnea con intro y admitiendo caractersticas de alineacin. Para distribuir los elementos en un lugar determinado, lo mejor ser utilizar tablas como las usamos en Word u OpenOffice para maquetar los contenidos. Otra parte donde podemos modificar las caractersticas del documento inicial es en la ventana de Propiedades en el botn Propiedades de la pgina. Se abrir la siguiente ventana.

Aqu podemos definir elementos como las caractersticas de texto al escribir, el fondo que visualizaremos (color o imagen), el nombre que aparecer en la barra del navegador, el color de los vnculos, etc.

Pgina 2

B ASES DE D REAMWEAVER

Insertar texto
El texto lo podemos crear o pegar desde otro documento, para manipularlo lo seleccionaremos y cambiaremos sus caractersticas en la barra de propiedades. Alineacin, color, estilo, tamao, etc.

Insertar imgenes
Uno de los elementos que ms vamos a utilizar sern las imgenes, para trabajar con stas hay que olvidarse de sus medidas de impresin (los cm. y mm.) y fijarnos al crearla nicamente en los pxeles que tienen de ancho y de alto, la resolucin ser siempre a 72 ppp 96 ppp. Cuidaremos de no cambiar el tamao de visualizacin de las imgenes en dreamweaver porque no se vern bien sus pxeles, tanto si las reducimos como si las aumentamos, ser mejor cambiar sus tamao en Photoshop. Las imgenes las debemos crear previamente y guardarlas en la carpeta de imgenes del sitio que hemos creado, as podremos visualizarlas en la ventana de Archivos (a la derecha de Dreamweaver) e insertarlas en el documento con slo arrastrarla hacia la zona de trabajo. Aunque tambin podemos insertarlas desde el men de iconos o en el men Insertar/Imagen.

Guardar un archivo
Al Guardar un archivo debemos asegurarnos de guardarlo en la ruta del sitio que hemos creado, su formato ser .html .htm; estos archivos slo estn compuestos de texto, por lo tanto el texto escrito o copiado s se guardar pero al insertar una imagen, video, animacin o sonido (contenidos multimedia), slo se insertar la informacin de dnde se encuentra ese archivo y si no lo encuentra no se visualizar, de ah la importancia de trabajar en una carpeta determinada y que todos los elementos se encuentren localizados.

Pgina 3

B ASES DE D REAMWEAVER

Los colores Web

Otra cosa que cambia es la edicin web es la codificacin del color, conocemos el modelo RGB y el CMYK, en los documentos html los colores se codifican en el modo Hexadecimal, es decir con unos valores de color determinados con una numeracin del 0 al 9 mas A B C D E y F. Corresponde a la siguiente equivalencia RGB #FF784A = #smbolo hexadecimal, dos valores para el color rojo FF, dos valores para el color verde 78 y dos valores para el color azul 4A; donde el valor 00 es el menor y el FF el mayor. As #000000 ser el color negro y #FFFFFF ser el color blanco. Como hablamos de visualizar en pantalla son colores luz.

Tablas
En los documentos html podemos colocar los elementos de composicin mediante tablas. Para insertar una tabla podemos ir al icono o al men Insertar/Tabla.

Pgina 4

B ASES DE D REAMWEAVER

Vemos en la ventana de dilogo las caractersticas que podemos definir al insertar una tabla. Recordemos que las celdas se adaptarn siempre al contenido cuando ste no quepa en el tamao definido de la celda. Si colocamos una imagen de 100 pxeles en una celda de 40 pxeles se agrandar hasta que sea tan grande como la imagen, por el contrario si la colocamos en una celda de 150 pixeles sobrarn 50 pixeles de espacio en la celda. Es importante la medida de el Ancho de la tabla pudindose determinar en porcentaje as se adaptar a la ventana del navegador o en pixeles y tendr un tamao fijo. Cuando situamos el cursor en una celda aparecen las caractersticas de esta en la ventana de propiedades, Alineacin del contenido, ancho y alto, color o imagen de fondo y color del borde.

Si lo que queremos es modificar las caractersticas de una columna pincharemos sobre el tringulo sobre la columna o arrastraremos el cursor sobre las celdas.

Si queremos modificar las caractersticas de la fila pincharemos sobre el cdigo <tr> que representa la fila o arrastraremos el cursor sobre las celdas.

Para modificar las propiedades de la tabla entera podemos seleccionarla pinchando en el cdigo <table> y vemos que cambia la ventana de propiedades

Otra manera de acceder a la manipulacin de las caractersticas de las tablas es con el botn derecho del ratn sobre la tabla en el men contextual Tabla.

Pgina 5

B ASES DE D REAMWEAVER

Vnculos
Una de las principales caractersticas de los archivos html es la posibilidad de mostrar hiperenlaces, son textos o imgenes que al pinchar sobre ellos se visualizan otros archivos accesibles en otra localizacin. Hay varias clases de vnculos: Vnculo a un archivo (html, imagen, sonido, animacin, pdf, doc, etc.) Vnculo a un correo electrnico (abre un programa de correo electrnico) Vnculo a otra parte del archivo html (tambin llamado marcador o ancla)

Para crear un vnculo a otro archivo, debemos haberlo creado antes o existir en la red previamente. Para crear un vnculo sobre un texto, seleccionamos el texto y le indicamos la ruta que debe seguir para encontrar el archivo.

Si queremos hacer un vnculo sobre una imagen seleccionaremos la imagen y le daremos la ruta del archivo a abrir en la ventana de Propiedades.

Los vnculos a otros archivos se pueden abrir en un destino determinado, a saber: _blank abre el documento en una ventana nueva del navegador. _parent abre el documento en la ventana del marco que contiene el vnculo. _self abre la ventana en el mismo marco o ventana que contiene el vnculo. Esta es la opcin predeterminada. _top abre el documento vinculado en la ventana completa del navegador.

Para hacer un vnculo a un correo electrnico debemos poner en la casilla vnculo el siguiente texto mailto:nombre@servidor.com

O ir al men Insertar/Vnculo de correo electrnico, y rellenar los datos en la ventana de dialogo.

Para hacer un vnculo a otra parte de la pgina debemos crear antes el ancla en el men Insertar/Anclaje con nombre, que ser la marca invisible donde se colocar la visualizacin del archivo en el navegador. Posteriormente crearemos el vnculo insertando en la casilla de la ruta el smbolo # seguido del nombre del ancla creada.

Pgina 6