LA REVISTA VIRTUAL

TUTORIAL DE:

COMO TRABAJAR CON

DREAMWEAVER CS4
1

Adobe Dreamweaver CS4

 INDICE
1) Entorno de trabajo
2) Crear sitio de dreamweaver
3) Pagina HTML
a. Codificacin de pagina web
4) Uso del texto
5) Manejo de estilos CSS
a. Formateo de texto
6) Uso de tablas para Diseo
7) Insertar imgenes y media
8) Creacin de hipervnculos
9) Aspecto de enlaces
10)Imgenes con zonas interactivas
11)Mens desplegables y listas Spray

Adobe Dreamweaver CS4

EDITORIAL
Este pequeo tutorial es para todas aquellas personas que desean innovar en lo que es
programacin, y optamos por ensear una herramienta muy buena y practica que va a facilitar
el diseo de pginas, en si la marca adobe marca distancias en el mercado por la facilidad con
la que se manejan sus programas.
El Adobe Dreamweaver se est convirtiendo en un programa estndar para lo que es manejo de
edicin de pginas web. Hace algunos aos requeramos ser verdaderos programadores para
poder realizar trabajo, pero con el pasar de los aos la internet a servido muchsimo para que
gran parte del conocimiento humano se expanda a todos los rincones del mundo y facilite el
trabajo de todo ser humano, es por eso que quiero compartir con ustedes este tutorial ya que
deseo que el conocimiento no se quede solo en mi sino que se esparza por todos quienes
deseamos saber un poco y con algo muy fundamental que sea gratuito.
Esperamos sea de su agrado y se comprendan muy bien los conceptos impartidos en este
tutorial. Si requieren de ayuda o algo una sugerencia pues ac les dejo mi mail para estar en
contacto y solucionarlo junto al problema. karlageo4@hotmail.com

Adobe Dreamweaver CS4

1)

Entorno de Trabajo:

Al iniciar el dreamweaber despus de instalarlo nos aparece una ventana as, esta se entra compuesta
por pantalla, paneles,

Barras, etc.
Las barras de la aplicacin, estan diseadas por dreamweaver a facilitar y optimizar el trabajo, dentro
de estas hay un sin numero de herramientas que ofrece adobe para un mejor diseo web

Los paneles son herramientas, sino que estos a su vez se encuentra por lo general en la parte lateral de
la ventana, es solo para optimizar el trabajo y ahorrarnos un poco de tiempo al momento de disear.
Estos pueden contraerse y expandirse segn la necesidad que requieras.

Adobe Dreamweaver CS4

Las pestaa de documento, visualizan el documento en el cual te encuentras trabajando y/o los
documentos que se encuentran abiertos.

La barra de estado, nos indica a que proporcin se encuentra la pantalla de diseo y las dimensiones
del documento en desarrollo.

La barra de herramientas del documento, nos permite opciones de vista en vivo, cdigo o las dos por
divisin, adems aqu cambiaremos el titulo de documento.

Adobe Dreamweaver CS4

2)

Crear sitio de dreamweaver

Al iniciar el dreamweaver observamos que nos aparece esta ventana, pero antes de crear un archivo
HTML, debemos obtener un sitio desde el cual vamos a almacenar todo con respecto a esa pgina web.

Entonces lo primero que hacemos es dar clic sobre Sitio de Dreamweaver, insertamos en nombre del
sitio como se va a llamar seleccionamos la carpeta previamente creada que va a contener los archivos
Siguiente / No, no deseo una tecnologa con el servidor Siguiente / Seleccionamos nuevamente la
carpeta que creamos Siguiente / Seleccionamos una vez ms la carpeta creada Siguiente // hasta
que nos aparece una Opcin = Completado
Una vez creado el sitio lo vamos a tener en el panel Archivos

Adobe Dreamweaver CS4

3)

Pagina HTML

Una vez creado el sitio dentro de la carpeta que creamos para el sitio dreamweaver, dentro de esa
carpeta cargamos los documentos, imgenes, media, etc que vamos a utilizar dentro de la pagina.
Damos clic en
o la otra opcin que manejamos es Archivo/Nuevo/HTML/Siguiente
Obtenemos una pantalla en blanco la cual nos va a servir como mesa de trabajo para el diseo de
nuestra pgina.
a. Codificacin de pgina web:
Es muy importante este paso porque debemos determinar el lenguaje en el que va a ser encriptado,
porque algunos caracteres no pueden leer los otros lenguajes.
En
la
barra
de
estado
nos
indica
en
lenguaje
que
estamos
utilizando

Adobe Dreamweaver CS4

Este a su vez puede ser modificado, nos dirigimos a

ventana

nos aparece esta

Aqu podemos realizar los cambios que deseemos por lo general dreamweaver nos ayuda siempre
ubicando el lenguaje HTML mas utilizado a nivel mundial y con el cual no tendramos ningn problema

Adobe Dreamweaver CS4

4)

Uso de texto

Dentro de nuestra pantalla de diseo podemos escribir sin ningn problema, y en la parte inferior nos
encontramos con las propiedades, este se puede realizar cambios bsicos como ponerle negrita o
cursiva y trabajar con este a su vez con formato preestablecidos.

Pero nuestro problema va a surgir el momento de querer centrarlo, justificarlo, cambiarle el tamao,
ponerle diferente color, etc no lo vas a poder hacer tan simple porque dreamweaver trabaja con
Estilos CSS.

5)

Manejo de estilos CSS

Para poder modificar y personalizar nuestro diseo requerimos diversidad de opciones, entonces unas
vez seleccionado el texto que vamos a personalizar con diversos cambios, no dirigimos a la Barra

Propiedades en la inferior de nuestra pantalla

damos
clic en CSS, nos va a indicar que NUEVA REGLA CSS, nos dirigimos a EDITAR REGLA. Aparecer una

Adobe Dreamweaver CS4

ventana similar a esta

ubicamos las mismas opciones pero
poniendo un nombre a su selector con el que lo desee identificar. Aceptamos y obtenemos este editor

nos concentramos en la TIPO desde esta

realizamos todo en cuanto a tamao, color, negrita, fondo, subrayado de la letra. Y para justificar o
centrar nos dirigimos a la categora BLOQUE ubicamos Text-Align hay podremos cambiar la posicin del
texto donde desea.
a. Estrategias de Formateo CSS:
Bueno pues esto les va a servir mucho una vez que han modificado su estilo con lo ms bsico
que es FONT-FAMILY / FONT-WEIGTH / FONT-SIZE / COLOR / TEXT-DECORATION/TEXT-ALIGN
Para realizar cambios a ese estilo y optimizar en tiempo, nos dirigimos a la barra de paneles
donde encontramos

10

Adobe Dreamweaver CS4

Podemos dar doble clic sobre Font-size y nos direcciona

inmediatamente al editor de estilos.

11

Adobe Dreamweaver CS4

6)

Uso de tablas para el diseo

Dreamweaver no nos deja manipular el movimiento de nuestros objetos dentro del diseo para poder
ubicarlos en cualquier parte de la pantalla, pero con tablas podemos de alguna manera manipular la
orientacin que deseemos para nuestros objetos.
Bueno nos dirigimos a la herramienta Insertar y buscamos TABLA, ponemos cuantas filas, columnas y
tamao de la tabla.

Una buena opcin es que en vez de que la tabla esta medida en

pixeles sea en porcentaje, lo ponemos al 100% para que ocupe toda la pantalla de nuestro diseo,
aunque despus lo modifiquemos para que quede como lo queremos.

Dentro de la fila podemos modificar el tamao, insertar ms texto, imgenes, media, y ms tablas.

12

Adobe Dreamweaver CS4

7)

Insertar Imgenes y Media

Para poder insertar ya sea dentro de una tabla o en la pantalla de diseo, nos dirigimos a la
herramienta INSERTAR luego ubicamos

Imgenes ya sea si quieres insertar algn jpg, gif o png

Y Media si es el caso de una animacin en Flash, Shockwave y tambin un Video en flv.

8)

Creacin de Hipervnculos

Por lo general al disear requerimos que una imagen o un texto sea quien nos re direccione a otra
pgina web, pues es muy fcil seleccionamos el texto o la imagen y con la vista nos vamos a la Barra
Propiedades en la parte inferior, hay nos muestra una opcin llamada Hipervnculo, aqu ponemos la
direccin HTML a la que queremos nos direcciones una vez que hacemos clic sobre ella.

O su vez tenemos otra opcin de elegir ese

vnculo para no equivocarnos en el nombre, damos clic en la Carpetita que nos aparece al lado derecho
de Hipervnculo y nos lleva hacia un directorio donde ubicaremos dentro del disco a donde nos dirigir
ese vnculo.

13

Adobe Dreamweaver CS4

9)

Aspecto de Enlaces

El aspecto de los enlaces o vnculos que existen dentro de tu diseo pueden variar de aspecto ya que se
los puede modificar. Bueno nos dirigimos a la parte inferior de nuestra ventana de trabajo al panel de
propiedades. Ubicamos un pequeo icono que dice Propiedades de Pagina

Le damos clic y tendremos un editor con varias

opciones, pues nos dirigimos a la categora Vnculos, desde ac podemos personalizar el diseo de un
Vinculo. Algo muy importante que debemos tomar en cuenta es que ese formato va a ser utilizado por
todos los vnculos que existan en tu pagina web.

10) Imgenes con zonas interactivas

Es algo que puede servir de mucho para hacer un diseo ms rpido y utilizando menos recursos, bueno
esta utilidad bsicamente utiliza imgenes, pero para no hacerle a toda la imagen un vinculo y
deseamos que sea solo una parte una imagen, primero seleccionamos la imagen y abajo en
propiedades tenemos estos iconos

14

Adobe Dreamweaver CS4

Existen tres opciones de rea interactiva, rectangular, circular, y

poligonal, seleccionamos la que mejor convenga y nos vamos a la imagen a dibujar el rea que
queremos utilizar para poder poner un vinculo

Seleccione el rea circular, esto indica que solo cuando demos clic dentro del
circulo nos va a dirigir a otra pagina

11) Mens Spray

Para poder crear mens desplegables los cuales utilicen lenguaje java y sean quienes realcen un poco
ms el diseo de nuestra pgina pues dreamweaver nos ofrece esto como una plantilla ms.
Nos dirigimos al panel de Insertar y buscamos una categora dentro de insertar que se llama Spray,
existen varias opciones pero la ms peculiar es el men desplegable este puede ser horizontal o vertical.

15

Adobe Dreamweaver CS4

queremos

sea

Le damos clic a barra de mens de spray, quien nos va a decir si

el
men
horizontal
o
vertical,

seleccionamos pero dando clic en la parte turquesa que dice barra de mens de spray, una vez hecho
eso vamos a propiedades y seleccionamos cualquiera de los elementos y para cambiarlos de nombre
nos vamos mas a la derecha donde esta texto y deseas ponerle un vinculo a ese elemento lo pones y ya
est tu men desplegable.

16

Adobe Dreamweaver CS4

Esperamos haya sido de mucha utilidad para todos aquellos que desean probar nuevo
software si desean descargar el programa si aun no lo tienen les dejo ac un link:
http://www.taringa.net/posts/downloads/6028966/Adobe-Dreamweaver-CS4-Full.html

Tambin les dejo la pagina en donde saque bastante informacin y muy buena.
http://www.aulaclic.es/dreamweaver-cs4/index.htm

Mucho gusto con todos.

17

Adobe Dreamweaver CS4

LES DEJO CON POCO DE CHISTES GRFICOS

UNA IMAGEN DICE MS QUE 1000 PALABRAS
JAJAJAJA!!!

18

Adobe Dreamweaver CS4

19

Adobe Dreamweaver CS4

20

Adobe Dreamweaver CS4

21

Adobe Dreamweaver CS4

22

Adobe Dreamweaver CS4

23

Adobe Dreamweaver CS4

24

Adobe Dreamweaver CS4

XITOS EN TUS ACTIVIDADES!!!

25

Adobe Dreamweaver CS4