Manual de Dreamweaver

1 Adobe Dreamweaver CS4

LA REVISTA VIRTUAL

TUTORIAL DE:

COMO TRABAJAR CON DREAMWEAVER CS4

2 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

3 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. [email protected]

4 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.

5 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.

6 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

7 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

8 Adobe Dreamweaver CS4

Este a su vez puede ser modificado, nos dirigimos a nos aparece esta ventana

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

9 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

10 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

11 Adobe Dreamweaver CS4

Podemos dar doble clic sobre Font-size y nos direcciona inmediatamente al editor de estilos.

12 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.

13 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.

14 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

15 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.

16 Adobe Dreamweaver CS4

Le damos clic a barra de mens de spray, quien nos va a decir si queremos sea 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.

17 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.

18 Adobe Dreamweaver CS4

LES DEJO CON POCO DE CHISTES GRFICOS UNA IMAGEN DICE MS QUE 1000 PALABRAS JAJAJAJA!!!

19 Adobe Dreamweaver CS4

20 Adobe Dreamweaver CS4

21 Adobe Dreamweaver CS4

22 Adobe Dreamweaver CS4

23 Adobe Dreamweaver CS4

24 Adobe Dreamweaver CS4

25 Adobe Dreamweaver CS4

XITOS EN TUS ACTIVIDADES!!!