Tutorial de Dreamweaver
Escrito por Laren

Publicado:21/04/2001
   Actualizado: 21/04/2001
 

 

Bueno, dado el deseo de muchos de poder hacer una pagina Web fácil, rápida, con algún efecto y demás, intentaremos daros una idea de cómo hacerlo con uno de los editores más usados en el mercado actual: Dreamweaver. Usaremos la Versión 3.

La idea es crear un sitio Web ficticio. Crearemos un sitio Web sobre Ridley Scott, el director de Alien y uno de los mejores directores de cine actual, pero servirá igual para cualquier otra cosa.

Para empezar, si aún no tienes el programa puedes bajar un trial de 30 días en la Web de Macromedia: www.macromedia.com. Ocupa bastante, así que ten paciencia.

Antes de empezar a trabajar con el programa es conveniente realizar un estudio de la Web, es decir: que contenidos pondremos, cuantas páginas habrá, las imágenes que vamos a necesitar,..., y una vez conocidos estos datos, dibujaremos un croquis en el que podamos ver con facilidad cómo irán vinculadas las páginas entre sí.

Este tutorial comienza dando los primeros pasos a la hora de crear una web, y esta pensado para aquellas personas que no saben como empezar con el programa. Si deseas algo de información sobre opciones avanzadas pulsa aquí

Una vez instalado el programa es hora de empezar con él. La primera visión asusta bastante, pues aparecen en pantalla varias ventanas flotantes que podemos mover y situar donde queramos. Se trata de la ventana de objetos, propiedades y estilos. Por el momento cerraremos la ventana de Estilos y nos quedaremos con las otras dos.

Al crear un sitio Web es necesario seguir un orden escrupuloso, pues la cantidad de archivos usados en él crece con el paso del tiempo. Por tanto lo primero que haremos será crear un archivo en el disco duro para colocar allí todos los documentos. En este caso se llamará Scott. Una vez echo esto es hora de configurar el sitio local en Dreamweaver, es decir el lugar específico de nuestro ordenador desde donde el programa recogerá los archivos que le indiquemos durante nuestra sesión de trabajo.

Para ello en el documento en blanco que se crea de forma automática al iniciar el programa elegiremos sitio>nuevo sitio en el menú.

En la ventana que aparece escogemos la opción datos locales y a la derecha, damos el nombre del sitio Ridely Scott en este caso y especificamos la ruta en carpeta de raíz local Scott Una vez echo esto, pulsamos sobre aceptar. El programa nos preguntará si creamos un archivo de caché para el sitio, cosa que aceptaremos. Al concluir esta operación, se creará la ventana de sitio y nos mostrara todos los archivos que contiene la carpeta Scott en este caso ninguno por el momento.

Es hora ya de empezar a trabajar en el diseño de nuestra Web. Para ello vamos a ir a la ventana de documento nuevo, que es el lugar en el que trabajaremos. Como hemos dicho antes, es importante la organización, por eso comenzaremos por poner un nombre a la pagina. Para eso vamos a modificar>propiedades de pagina y en la casilla titulo pondremos Ridley Scott.

En esta misma ventana también podremos configurar el color del fondo, o la imagen que compondrá el fondo si lo deseamos, la distancia de los márgenes, el color con el que subrayaran los diferentes estados de los vínculos, (vínculo, vínculo visitado y vínculo activo), la transparencia de la imagen del fondo, etc..

Para este trabajo usaremos un fondo de color negro pulsad en la casilla con el nombre Color y elegid el color negro de entre los disponibles, o si lo deseáis probad algún otro. También podéis poner una imagen como fondo, (recuerda que debe estar en la carpeta raíz del sitio) dándole la ruta para encontrar dicha imagen clicando sobre la opción examinar que a parece a la derecha del cuadro imagen de fondo.

Al aceptar el titulo que hemos dado a la pagina aparecerá en la barra de estado, arriba a la izquierda, y los datos que podamos haber cambiado para las opciones de la pagina serán visibles.

Llega el momento de comenzar a introducir cosas en la pagina. Explicaremos dos formas de hacerlo: con Celdas y con Capas. Para eso es necesario comenzar explicando la ventana de objetos. En esta ventana están colocados los objetos que más usaremos a lo largo de la construcción de nuestra Web. Os hago un breve comentario de cada objeto, primero la columna de la izquierda y de arriba abajo y luego la columna derecha.

 

 

7º Insertar Generator: Generator es otro programa de la casa Macromedia que permite la creación de objetos dinámicos actualizables desde plantillas.

8º Insertar sub-programa: Permite colocar un applet de java.

9º Insertar plug-in: inserta contenidos plugg-in de netscape y controlarlo directamente en pantalla. Sonidos, o contenidos multimedia. (el plugg-in ha de estar insertado en el navegador)

Columna derecha

1º Imagen de sustitución: permite la creación de botones con efectos rollover

2º Insertar datos tabulares: permite la inserción de datos tabulados en una hoja de cálculo como Excel

3º Insertar barra de exploración: similar a la imagen de sustitución, pero en este caso se crean barras completas y no celdas separadas.

4º Insertar salto de línea: se utiliza para separar párrafos.

5º Insertar fecha: pues eso, inserta la fecha e incluso la hora de la creación de la página.

6º Insertar Shockwave: permite la inserción de un objeto creado con Director

7º Insertar HTML de Fireworks: convierte el código usado en Fireworks haciéndolo compatible con Dreamweaver

8º Insertar actives: estos controles crean una relación directa con el sistema operativo Windows.

9º Insertar server-side include: los servidores añaden unas instrucciones a los documentos en curso, esta opción simula el comportamiento de un servidor.

 

Si clicamos sobre la flechita que aparece en la cabecera de la ventana junto al nombre "común" abriremos mas ventanas de objetos: son los caracteres, formularios, objetos head y marcos, que no explicaremos aquí.

Una vez conocemos la ventana de objetos comunes, comenzaremos a insertar contenidos en nuestra pagina. Comenzaremos insertando una Tabla. Para poder posicionarla donde nos interese, dibujaremos con anterioridad una capa. elijamos dicha opción en la ventana de Objetos y arrastremos el puntero del ratón. Una vez hecho esto insertaremos la tabla dentro de la capa.

Para ello clicaremos dentro de la capa y pulsaremos en el botón insertar tabla de la ventana de objetos, con lo que emergerá la siguiente ventana:

Usaremos la tabla como navegador, es decir, como menú para movernos a lo largo de las diferentes paginas de nuestro Sitio Web. Por ese motivo introduciremos una sola fila con 5 columnas para cada una de las secciones de nuestro sitio Web, que serán: Biografía, Bibliografía, Filmografía, Guiones, y enlaces. El campo ancho hace referencia al ancho de cada celda de la tabla, el campo Borde especifica el grosor del borde de la Tabla, el campo Relleno de Celda especificará la altura de la celda y el campo Espacio de Celda ajusta la distancia entre las celdas contiguas y también entre las celdas y el marco de la Tabla. Dejamos el Borde de la tabla en 0 para que no se muestre un marco a su alrededor.

Al aceptar nos aparece la tabla e la parte superior de la pagina, y puesto que el valor del Borde es 0 el marco aparece punteado, lo que muestra que desaparecerá si deseleccionamos la tabla.

Para centrar la tabla no hay mas que seleccionar el extremo derecho y arrastrar hasta que cubra la parte superior de la pantalla, teniendo cuidado de no desplazarnos hacia la derecha más de lo que nos muestra la pantalla.

(Hay que tener en cuenta en lo posible el hecho de que la Web tenga una personalidad propia, por ej. En este caso Ridely Scott es normalmente conocido por su trabajo en la película ALIEN el 8º Pasajero, por lo que los botones hacen referencia a esa película al mostrar colores relacionados con el alienígena que aparece en ella. Es MUY IMPORTANTE tener claro el concepto que queremos dar en nuestra Web, por lo que, además de tener claro el contenido que mostraremos, hemos de hacer nuestro espacio en la Web atractivo y que las personas que lo visiten se muestren identificadas con él)

Ahora vamos a insertar las imágenes que nos mostrarán a qué sección de la pagina nos llevará cada una de las celdas. (Si no las tenéis, habréis de crearlas con un programa como Photoshop ó similar, o bien conseguirlas de alguna otra forma). Para hacer esto iremos a la 1ª celda de la tabla y la seleccionaremos colocando el cursor en su interior. A continuación clicaremos sobre el botón insertar imagen de la ventana de Objetos con lo que aparecerá una ventana que nos permitirá seleccionar la imagen deseada desde nuestro disco duro. (Dicha imagen debería estar, siguiendo los parámetros de orden escrupuloso que comentábamos al principio en una subcarpeta dentro de la carpeta raíz SCOTT)

(Es igualmente importante también saber que los archivos que usemos para nuestro sitio web han de tener un nombre sin espacios, tildes ni ningún signo de puntuación puesto que a la hora de colocarlos en el sitio remoto al concluir nuestro trabajo no serían aceptados. Así, si tenemos un archivo que se llamé Ridley Scott tendremos que renombrarlo a Ridleyscott o cualquier otro nombre que nos ayude a identificarlo, pero SIEMPRE sin ningún tipo de puntuación ni espacio entre caracteres.)

Una vez seleccionada la 1ª imagen haremos lo mismo con el resto, hasta que toda la tabla contenga las diferentes secciones de nuestra Web.

Ahora haremos una breve introducción en la página actual dando al visitante la Bienvenida a nuestra Web. Seleccionaremos en la venta de Objetos la opción dibujar capa y después de pulsar el botón Izquierdo en el punto que nos interese, (en este caso puesto que será la cabecera de la bienvenida justo debajo del ángulo inferior izdo, manteniendo una distancia considerable con la tabla, aproximadamente de 2 cm), una vez pulsado en ese punto decimos, sin soltar el botón del ratón arrastraremos hasta el extremo derecho de la tabla, dejando un espacio aproximado de un cm. Entre la parte superior y la inferior de la Capa. Al soltar el ratón la capa queda seleccionada y nos permite moverla. Arrastrémosla hasta que quede colocada en el sitio exacto que nos interesa. Ahora colocamos el cursor en su interior tal y como hicimos con la celda, es decir colocamos el cursor dentro de la capa y clicamos sobre ella. Esto nos permitirá ahora escribir el Texto que deseamos. Vayamos en el menú a la opción Texto. Tras clicar una vez en ese campo seleccionaremos la opción Formato > Encabezado 1 ya que lo que vamos a escribir será el encabezamiento de la página. Una vez seleccionada esta opción iremos a Texto > Alineación > Centro. Esto hará que lo que escribamos quede centrado dentro de la capa creada. Hemos de elegir también el color de la fuente, por lo que nuevamente abriremos el menú Texto y en la opción color escogeremos un tono verde. (Puesto que color de fondo de la página es negro, si no cambiamos la fuente de escritura nos será imposible ver lo que hay escrito en la página)

Dibujaremos una nueva capa debajo de la anterior. Para asegurarnos de que la capa nueva no se monte sobre la anterior, iremos al menú ver, y allí seleccionaremos la opción evitar solapamiento de capas. La capa que dibujemos ahora ha de ser más ancha que la anterior, rebasándola por ambos lados, pero SIN salir del ancho de página que vemos en pantalla. Escogeremos una fuente diferente y de un tamaño sensiblemente menor para escribir el contenido de esta página siguiendo el método anteriormente indicado, es decir texto > Fuente ; Texto > Color, etc...

(La opción Tamaño del menú Texto especifica el tamaño de la fuente con relación a la fuente determinada de la persona que visite nuestra Web, por lo que cada persona lo verá de un tamaño diferente, aunque manteniendo las diferencias de tamaño con respecto a cada tipo de letra que coloquemos en la página).

Escribiremos ahora el texto de Bienvenida a nuestra Web sobre Ridley Scott. Como podréis observar al escribir, no se pueden insertar espacios o tabuladores. El código HTML no lo permite, y Dreamweaver no es más que un editor de páginas en código HTML. Sí hay parámetros HTML con los que se pueden hacer sangrías, saltos de carro, insertar espacios y demás, pero no es ese el objetivo de este tutorial, y si deseáis colocar texto con esos caracteres es mejor que consigáis un Tutorial de HTML.

Es hora de salvar el trabajo y ver como nos está quedando tal como se verá realmente en el explorador. Para guardar vayamos al menú archivo y elijamos Guardar como. (Puesto que esta será la página de inicio de nuestro sitio web, es decir la primera página que vea el visitante, su nombre al guardarla ha de ser "Index". Esto es MUY importante, puesto que si asignaramos un nombre diferente al colocarlo en el alojador de sitios web que contratemos, nuestra Web no sería visible.) Una vez echo esto pulsemos la tecla F12 para visionar nuestro trabajo en el simulador de Explorer. (Cuando hacemos esta operación, el programa crea un archivo temporal en el sitio local en el que estemos trabajando. Hemos de recordar eliminar estos archivos antes de subir nuestra Web al alojador remoto. Asimismo, si tenemos alguna imagen colocada en nuestra página y pulsamos la tecla F12 antes de salvar el trabajo, las imágenes insertadas no serán visibles)

Para terminar esta página antes de colocar los vínculos, insertaremos un efecto en la tabla que creamos al principio, la que contendrá los vínculos que nos permitan movernos a lo largo de la Web. Este efecto se llama Roll Over. Consiste en intercambiar una imagen por otra al pasar el puntero sobre una determinada zona de la pantalla. Para conseguir este efecto, debemos tener una imagen que sustituya a los botones que hemos insertado en la tabla, el Texto ha de ser el mismo, pero deben cambiar los colores, o incluso el tipo de fuente para que el efecto sea lo suficientemente atrayente. Para conseguir este efecto en primer lugar cerraremos la ventanas de objeto mantendremos solo la de propiedades. Seleccionemos ahora la 1ª celda de la tabla. Vemos como la ventana de propiedades cambia para mostrar las propiedades de la celda que hemos seleccionado. Empezando desde el extremo superior izquierdo, la primera casilla vacía de la ventana de propiedades permite cambiar el nombre del objeto seleccionado. Puesto que hemos de tener la Web perfectamente estructurada, le daremos un nombre a dicha celda, por ej. si en ella hemos puesto la Biografía podremos usar ese nombre para la celda en particular, si es la celda de los vínculos le pondremos ese otro nombre. Hagamoslo con todas las celdas que hemos usado.

Seleccionaremos ahora la ventana de comportamientos pulsando F8. Marcaremos la 1ª celda de la tabla. Ahora en la ventana Comportamientos pulsaremos sobre el signo "+" que aparece en el extremo superior izdo. Donde elegiremos la opción intercambiar imagen del menú emergente. En la ventana que aparece seleccionamos la celda llamada Biografía y en la opción Definir Origen Como pulsando sobre el botón examinar elegimos la imagen que será substituirá a la que estamos viendo en este momento. Las casillas carga previa de imágenes y restaurar imagen onMouseOut han de estar activas.

Este proceso hemos de efectuarlo con el resto de las celdas de la tabla de navegación.

Una vez hayamos echo esto con todas las celdas presionemos F12 para ver el resultado. Coloquemos el puntero sobre una de las imágenes, y veremos como cambia. El resultado tendría que ser parecido a este, donde el puntero esta colocado sobre la imagen de Biografía:

Crearemos ahora nuestra segunda pagina del Sitio Web que estamos diseñando.

Para ello guardaremos el trabajo que hemos realizado hasta ahora, seleccionaremos la tabla que hemos creado en modificar > seleccionar tabla y la copiaremos en edición > copiar, en la ventana de propiedades anotaremos las coordenadas de posición de la tabla, que vienen dadas por las casillas Iz y Sup. Cerraremos la pagina actual y abriremos una nueva en archivos > Nuevo.

Puesto que la tabla que creamos antes es la barra de navegación para no tener que dibujarla de nuevo, hemos copiado dicha barra. Dibujaremos una capa en la página y ahora pegamos la tabla dentro de la capa en edición > pegar. Al pegar la tabla dentro de una capa, podemos moverla y colocarla en el sitio exacto que deseemos. Para colocarla en el sitio exacto donde se encontraba la tabla en la página anterior, en la casilla iz y en la casilla sup, colocaremos los valores que hemos copiado anteriormente. (En alunas ocasiones, por un motivo que desconozco, las imágenes de la tabla que copiamos en la página nueva no son visibles y aparece un símbolo extraño en su lugar. Si eso ocurre, solo hemos de volver a seleccionar la imagen que hay en dicha celda, pero NO es necesario volver a asignar el comportamiento de Rollover, ya que es inherente a la tabla).

Bien, ahora ya solo hemos de volver a insertar capas para colocar imágenes, fotos o echo, de la misma forma que lo hemos hecho anteriormente, hasta que tengamos completada esta nueva página.

Cuando estemos contentos con el trabajo que hemos realizado, volveremos a guardar la página actual

Llega el momento de vincular las páginas entre sí.

Abriremos la página principal, la que le dimos el nombre de INDEX. En esa página seleccionaremos la celda que haga referencia a la página que acabamos de crear, (en mi caso filmografía), y en la ventana de propiedades iremos a la casilla marcada como vinculo. Tras clicar dos veces en la carpeta que aparece a su derecha nos abrirá una ventana desde la que podemos buscar en nuestro ordenador a que página nos llevará cuando pulsemos sobre esa celda en particular.

Podemos también seleccionar que tipo de ventana nos abrirá el vínculo que activemos. Para ello en el menú desplegable destino de la ventana de propiedades nos mostrará 4 opciones:

Blank -

Parent -

Self -

Top -

Probad cada una de ellas para ver sus efectos. ( ¿No pretenderás que te lo cuente yo todo no ? :) )

 

OPCIONES AVANZADAS

Insertar saltos de página

Formularios

Estilos

 

 

Insertar saltos de página

En ocasiones, nuestras páginas tienen mucho contenido que está dividido en diferentes secciones. (Imaginad por ej. la Web de un grupo de música que tenga un nº enorme de discos editados y en el que además vosotros halláis colocado el nombre de todas las canciones de cada uno de esos discos.) En estos casos puede ser muy útil colocar un pequeño menú para que al clicar sobre una de las opciones el vínculo nos lleve a otra sección de esa misma pagina. Esto lo logramos con los saltos de página.

Coloquemos el cursor en el punto de la página que nos interese. Elijamos insertar > punto de fijación con nombre (en el nombre de esta opción se han lucido, pero...es lo que hay). Asignemos un nombre al punto tal y como pide el menú emergente (el nombre debe ser todo junto y con el símbolo "#" delante, sin tildes ni otros signos de puntuación, como si fuera una página normal) y aceptemos. Aparecerá un icono amarillo con un ancla dibujado en su interior. A ese punto nos llevará el vínculo que creemos a continuación. Seleccionemos ahora el texto o la imagen que queremos que nos lleve a ese punto de la página y en la ventana de propiedades, en la casilla de vinculo escribamos el nombre completo del punto de inserción que hemos creado, incluyendo la "#".

 

Formularios

Los formularios se usan a menudo en las paginas web para pedir datos de una persona a la hora de atender una petición por su parte, (imaginad por ej. una empresa que recibe pedidos vía e-mail, antes de servirse dichos pedidos es lógico que se deseen algunos datos como el nombre de la empresa, su teléfono, etc...). Pues bien nada más fácil. Colocaremos el cursor en el punto de la página que nos interese, allí haremos insertar > formulario aparecerá una línea roja punteada y estrecha. A continuación, colocando el cursor DENTRO de esa línea, insertaremos una tabla con la cantidad necesaria de filas, (tendrán que ser dos columnas, una para los datos que pedimos, y otra para que la persona pueda rellenar los datos). Por norma en la columna de la izquierda pondremos el nombre del campo que requerimos, pero, ¿dónde inserta el usuario sus datos? colocándonos en la columna de la derecha abrimos la ventana de objetos y pulsando en la flecha que aparece en el extremo superior derecho de dicha ventana iremos al menú Formularios. El icono de la derecha cumple el mismo efecto que lo que ya hemos hecho, inserta un formulario. Ahora insertaremos los campos.Colocamos como hemos dicho el cursor en la columna derecha y clicamos sobre el icono del extremo superior derecho de la ventana de Objetos el que se llama Insertar campo de texto. Imaginemos ahora que deseamos que el usuario verifique un dato, por ejemplo si está casado. En el siguiente campo pondríamos ¿casado? y en la columna derecha insertaríamos la casilla. Su uso es parecido al de los botones de opción, que se insertan de la misma forma. Ahora queremos que el usuario escoja entre un listado. Imaginemos siguiendo el ejemplo anterior que preguntamos la cantidad de hijos que tiene. El campo se llamaría nº de hijos y en la columna siguiente insertaríamos el menú de lista. Ahora tenemos que darle al usuario algo entre lo que elegir. Para ello clicaremos dos veces sobre el recuadro que acaba de aparecer. Se abrirá la ventana de propiedades. En el extremo superior izquierdo de dicha ventana aparece el campo valores de lista clicaremos allí y aparecerá la venta de valores de lista. Asignamos la etiqueta ( lo que el usuario verá que puede elegir) y si deseamos añadir más solo hemos de pulsar sobre el signo "+" que aparece en dicha ventana. Si deseamos requerir algún tipo de archivo al usuario, hemos de insertar un Campo de Archivo, que permitirá insertar algún archivo desde el disco duro del usuario como si fuera un campo corriente. Ahora hemos de permitir que se envíe el formulario, o por contra volver a editarlo si nos hemos equivocado en algún campo. Para ello hemos de insertar dos botones, uno en una columna y otro en otra. Por defecto el botón que se crea es el de enviar, pero uno de ellos ha de hacer posible la reedición del formulario. Seleccionemos uno de los dos botones que hemos creado y cliquemos dos veces sobre él. Se abre la ventana de propiedades. Sólo tenemos que elegir la opción Restablecer Formulario, y el botón cambiara de forma automática. El resultado sería más o menos este:

Si deseamos que el programa valide el formulario (que compruebe si los datos son o no correctos de acuerdo a unos parametros que le hemos dado con anterioridad), hemos de abrir la ventana de comportamientos y elejir la opción Validar Formulario. Los valores son Obligatorio, que hace que el campo se haya de rellenar antes del envío, cualquier cosa que no hace diferenciación en lo que insertemos en el formulario, numero y nuemro entre - y - que hacen que el valor de un campo haya de ser numérico y Dirección de Correo electronico, que obligará al usuario a introducir una cuenta de correo.

 

Estilos

El uso de los estilos es una de las herramientas más potentes que nos ofrece dreamweaver. Facilita el trabajo a la hora de editar una página Web pues permite asignar a toda una Web el mismo aspecto sin necesidad de estar permanentemente cambiado por ej el color tamaño y estilo de la fuente, el margen de las tablas, etc... . Por esto mismo es una de las herramientas más compleja en el programa. Comentaremos SOLO las hojas de Estilo CSS. Empecemos con ella. Abramos la ventana de estilos CSS. Ventanas > Estilos CSS. Sobre la ventana pulsamos botón derecho del ratón y elegimos Nueva. Lo primero que hemos de hacer en la ventana emergente es asignar un nombre al Estilo que dependerá lógicamente del tipo de estilo que vamos a crear ( de texto, para el fondo de la página,...). Si nos olvidamos de esto nos será imposible identificar que estilo estamos asignando en cada momento.

Ahora hemos de seleccionar que tipo de estilo vamos a crear. hay 3 tipos:

Crear estilo personalizado : Este tipo de estilo hemos de asignarlo personalmente a cada una de las celdas, capas o caracteres que deseemos.

Redefinir Etiqueta HTML : Con este estilo, el programa asigna automaticamente el estilo seleccionado a TODOS los elementos. Por ej. Un estilo de parrafo aplicara a TODOS los parrafos de la página, mientras que con el estilo personalizado podemos elegir que estilo asignar a cada uno de los parrafos por separado.

Usar Selector CSS : Se aplica a todos los elementos que sean del mismo identificador.

Una vez decidido el tipo de estilo que deseamos y nombrado este, aceptamos y aparece una nueva ventana. Desde aquí es donde asignamos el tipo de estilo que crearemos. Las opciones son:

Tipo : Es el que se asigna a las fuentes. Nos permite seleccionar el nombre de la fuente, su tamaño, el grosor, si escribiremos en letra normal o versales, el color de la fuente, varias opciones para escribir en mayuscula o minuscula, etc...

Fondo : Pues eso, el fondo de l apágina. si se repetirá o no, ...

Bloque : Da un aspecto a todo un parrafo. Permite insertar espacios adicionales entre las letras o las palabras, sangrar el text, alinearlo,etc.

Cuadro : define la ubicación de los elementos de la página, (capas imagenes,...). Nos permite especificar el tamaño, colocar un elemento como "flotante" en la derecha o la izquierda de la pantalla, el espacio que abrá entre la línea de la capa y su contenido, (el relleno), etc...

Creemos ahora un estilo cualquiera y aceptemos. Aparecerá el estilo creado en la hoja de Estilos Css que tenemos abierta. Para aplicar el estilo a un elemento de la pantalla solo hemos de seleccionar el elemento que quereemos modificar por medio del estilo y clicar sobre el estilo deseado en la ventana de Estilos Css.

Y ahora es cuando aparece la verdadera virtud de esta herramienta. Si abrieramos un documento nuevo, vemos que si abrimos en ese documento la hoja de estilos NO aparece el estilo que hemos creado hace unos momentos en otra hoja que ya tenemos guardada. Para poder usar el estilo en otro documento hemos de :

1º cortar del código fuente de la página donde hemos creado el estilo la etiqueta que contiene el estilo, sin la etiqueta propiamente dicha, es decir, sin la <etiqueta que estaría aquí dentro>.

2º Ahora abriremos el NOTEPAD de Windows y pegaremos allí el elemento que hemos cortado del código fuente.

3º Guardarlo en el sitio de nuestra Web como documento *.css

4º Una vez hecho esto, en una de las páginas que tenemos creada pulsemos el botón derecho del ratón elijamos Estilos CSS / editar hoja de estilos. Allí buscamos la ubicación del archivo que hemos creado conteniendo nuestros estilos para esta página.

ESTO ES VALIDO SOLO PARA ESTILOS CSS

Dreamweaver tiene desde luego muchas más aplicaciones y efectos. Pero no es posible poner aquí todos y cada uno de ellos. Se puede por ejemplo crear movimiento en algunos elementos como si se tratara de Flash.

Si en algún momento te atascas haz uso de la ayuda del programa. Es Muy Buena y además facil de usar, y si lo deseas ya sabes donde encontrarnos. Irc-Hispano, #Ayuda_Internet. El mejor canal de ayuda del IRC.

Que disfrutes del programa