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. Codificación de pagina web 4) Uso del texto 5) Manejo de estilos CSS a. Formateo de texto 6) Uso de tablas para Diseño 7) Insertar imágenes y media 8) Creación de hipervínculos 9) Aspecto de enlaces 10)Imágenes con zonas interactivas 11)Menús desplegables y listas Spray
2
Adobe Dreamweaver CS4
EDITORIAL Este pequeño tutorial es para todas aquellas personas que desean innovar en lo que es programación, y optamos por enseñar una herramienta muy buena y practica que va a facilitar el diseño de páginas, 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 estándar para lo que es manejo de edición de páginas web. Hace algunos años requeríamos ser verdaderos programadores para poder realizar trabajo, pero con el pasar de los años la internet a servido muchísimo 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
3
Adobe Dreamweaver CS4
1)
Entorno de Trabajo:
Al iniciar el dreamweaber después de instalarlo nos aparece una ventana así, esta se entra compuesta por pantalla, paneles,
Barras, etc. Las barras de la aplicación, estan diseñadas por dreamweaver a facilitar y optimizar el trabajo, dentro de estas hay un sin numero de herramientas que ofrece adobe para un mejor diseño 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 diseñar. Estos pueden contraerse y expandirse según la necesidad que requieras.
4
Adobe Dreamweaver CS4
Las pestaña 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 proporción se encuentra la pantalla de diseño y las dimensiones del documento en desarrollo.
La barra de herramientas del documento, nos permite opciones de vista en vivo, código o las dos por división, además aquí cambiaremos el titulo de documento.
5
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 página 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 tecnología con el servidor – Siguiente / Seleccionamos nuevamente la carpeta que creamos – Siguiente / Seleccionamos una vez más la carpeta creada – Siguiente // hasta que nos aparece una Opción = Completado Una vez creado el sitio lo vamos a tener en el panel Archivos
6
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, imágenes, media, etc… que vamos a utilizar dentro de la pagina. Damos clic en o la otra opción que manejamos es Archivo/Nuevo/HTML/Siguiente Obtenemos una pantalla en blanco la cual nos va a servir como mesa de trabajo para el diseño de nuestra página. a. Codificación de página 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
7
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 tendríamos ningún problema
8
Adobe Dreamweaver CS4
4)
Uso de texto
Dentro de nuestra pantalla de diseño podemos escribir sin ningún problema, y en la parte inferior nos encontramos con las propiedades, este se puede realizar cambios básicos 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 tamaño, 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 diseño 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
9
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 tamaño, color, negrita, fondo, subrayado de la letra. Y para justificar o centrar nos dirigimos a la categoría BLOQUE ubicamos Text-Align hay podremos cambiar la posición 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 más básico 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 diseño
Dreamweaver no nos deja manipular el movimiento de nuestros objetos dentro del diseño para poder ubicarlos en cualquier parte de la pantalla, pero con tablas podemos de alguna manera manipular la orientación que deseemos para nuestros objetos. Bueno nos dirigimos a la herramienta Insertar y buscamos TABLA, ponemos cuantas filas, columnas y tamaño de la tabla.
Una buena opción 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 diseño, aunque después lo modifiquemos para que quede como lo queremos.
Dentro de la fila podemos modificar el tamaño, insertar más texto, imágenes, media, y más tablas.
12
Adobe Dreamweaver CS4
7)
Insertar Imágenes y Media
Para poder insertar ya sea dentro de una tabla o en la pantalla de diseño, nos dirigimos a la herramienta INSERTAR luego ubicamos
Imágenes ya sea si quieres insertar algún jpg, gif o png Y Media si es el caso de una animación en Flash, Shockwave y también un Video en flv.
8)
Creación de Hipervínculos
Por lo general al diseñar requerimos que una imagen o un texto sea quien nos re direccione a otra página web, pues es muy fácil seleccionamos el texto o la imagen y con la vista nos vamos a la Barra Propiedades en la parte inferior, hay nos muestra una opción llamada Hipervínculo, aquí ponemos la dirección HTML a la que queremos nos direcciones una vez que hacemos clic sobre ella.
O su vez tenemos otra opción de elegir ese vínculo para no equivocarnos en el nombre, damos clic en la Carpetita que nos aparece al lado derecho de Hipervínculo y nos lleva hacia un directorio donde ubicaremos dentro del disco a donde nos dirigirá ese vínculo.
13
Adobe Dreamweaver CS4
9)
Aspecto de Enlaces
El aspecto de los enlaces o vínculos que existen dentro de tu diseño 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 pequeño icono que dice Propiedades de Pagina
Le damos clic y tendremos un editor con varias opciones, pues nos dirigimos a la categoría Vínculos, desde acá podemos personalizar el diseño de un Vinculo. Algo muy importante que debemos tomar en cuenta es que ese formato va a ser utilizado por todos los vínculos que existan en tu pagina web.
10) Imágenes con zonas interactivas Es algo que puede servir de mucho para hacer un diseño más rápido y utilizando menos recursos, bueno esta utilidad básicamente utiliza imágenes, 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) Menús Spray Para poder crear menús desplegables los cuales utilicen lenguaje java y sean quienes realcen un poco más el diseño de nuestra página pues dreamweaver nos ofrece esto como una plantilla más. Nos dirigimos al panel de Insertar y buscamos una categoría dentro de insertar que se llama Spray, existen varias opciones pero la más peculiar es el menú desplegable este puede ser horizontal o vertical.
15
Adobe Dreamweaver CS4
queremos
sea
Le damos clic a barra de menús 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 menús 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
También les dejo la pagina en donde saque bastante información 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 GRÁFICOS UNA IMAGEN DICE MÁS 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