Manual Dreamweaver

MANUAL DREAMWEAVER
INSTITUCIN EDUCATIVA
COLOMBIA

PROF: JESS ELBER VALENCIA PEREA

2012

Objetivo

Aprender a manejar el programa Dreamweaver
para disear pginas Web. A la finalizacin del
curso, el alumno ser capaz de crear sitios Web
con pginas que incorporen imgenes, enlaces y
elementos multimedia.
Qu es dreamweaver?
Dreamweaver CS3 es un software fcil de usar que permite crear
pginas web profesionales.

Las funciones de edicin visual de Dreamweaver CS3 permiten agregar
rpidamente diseo y funcionalidad a las pginas, sin la necesidad de
programar manualmente el cdigo HTML.

Se puede crear tablas, editar marcos, trabajar con capas, insertar
comportamientos JavaScript, etc., de una forma muy sencilla y visual.

Adems incluye un software de cliente FTP completo, permitiendo
entre otras cosas trabajar con mapas visuales de los sitios web,
actualizando el sitio web en el servidor sin salir del programa.
Caractersticas
Dreamweaver sea la versin que sea es una herramienta totalmente til
para todos los programadores ya sean novatos o expertos
Cuando programas en Html puedes hacerlo directamente desde una
pestaa en la que puedes ver una especie de vista previa de la pgina.
Dentro de esta vista previa puedes editar la pgina fcilmente aadiendo
botones, tablas, etc sin ningn problema rpido y sencillo.
Cuando programas en Php tiene una excelente biblioteca de cdigos que
te pueden ayudar a editar ms rpido.
Tiene la posibilidad de conectarse a Ftp con un host y editar directamente
los archivos all almacenados.
Te permite editar CSS rpidamente, podrs hacer plantillas en pocos
minutos siguiendo una bsica ya predefinida por Dreamweaver.
Con esta aplicacin podrs hacer formularios muy rpidamente sin
necesidad de escribir cdigo por cdigo y tener que andar sufriendo.
Te identifica los cdigos por colores para que puedas localizar mejor los
tipos de cdigos.

Versiones
Dreamweaver 7.0
Dreamweaver 8.0
Dreamweaver Adobe CS3
El rea de trabajo
La barra de ttulo

La barra de ttulo: contiene el nombre del programa (Marcromedia Dreamweaver CS3)
y seguidamente el nombre del documento que aparecer en el explorador y entre
parntesis, su ubicacin y el nombre del archivo en formato html. En el extremo de la
derecha estn los botones para minimizar, maximizar/restaurar y cerrar.

La barra de mens

La barra de mens: contiene las operaciones de Dreamweaver, agrupadas en mens
desplegables. Al hacer clic en Insertar, por ejemplo, veremos las operaciones
relacionadas con los diferentes elementos que se pueden insertar en Dreamweaver.

Muchas de las operaciones se pueden hacer a partir de estos mens, pero para
algunas es preferible o indispensable hacerlas desde los paneles.
Las barras
La barra de herramientas estndar

La barra de herramientas estndar contiene iconos para ejecutar de forma inmediata algunas de las operaciones ms
habituales, como Abrir , Guardar , etc.

La barra de herramientas de documento:

La barra de herramientas de documento contiene iconos para ejecutar de forma inmediata algunas otras operaciones
habituales que no incluye la barra de herramientas estndar. Estas operaciones son las de cambio de vista del
documento, vista previa, etc.

La barra de estado

La barra de estado nos indica en cada momento en qu etiqueta HTML nos encontramos (en la imagen al encontrarnos
en un documento en blanco estamos directamente sobre la etiqueta <body>).

Tambin nos es posible alternar entre los modos de seleccin, mano (para arrastrar la pgina), o zoom. En cualquier
momento puedes seleccionar el zoom preferido desde el desplegable zoom y ajustar la vista al porcentaje preferido
(por defecto siempre viene al 100%).
Los paneles e inspectores
Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se conocen como
paneles o inspectores. La diferencia entre panel e inspector es que, en general, la apariencia y opciones
de un inspector cambian dependiendo del objeto seleccionado.
A travs de la opcin Ventana, de la barra de mens, es posible mostrar u ocultar cada uno de los
paneles o inspectores. Vamos a ver los ms importantes.

El inspector de Propiedades

El inspector de Propiedades muestra y permite modificar las propiedades del elemento seleccionado
que son usadas de forma ms frecuente. Por ejemplo, cuando el elemento seleccionado sea texto
mostrar el tipo de fuente, la alineacin, si est en negrita o cursiva, etc.

Pulsando sobre el botn se despliega para mostrar ms opciones. Este botn se encuentra en la esquina
inferior-derecha.

Seguramente ser la herramienta de Dreamweaver que ms vayas a utilizar.
La barra de herramientas Insertar o panel de objetos

La barra de herramientas Insertar o panel de objetos permite insertar
elementos en un documento sin la necesidad de recurrir al men Insertar. Los
elementos estn clasificados segn su categora: tablas, texto, objetos de
formulario, etc.

Es posible configurar este panel para que en los botones se muestren los
iconos de los objetos (como ocurre en la imagen anterior), para que se
muestren los nombres de los objetos, o para que se muestren ambos a la vez.
Vista de documento
Puedes cambiar la vista del documento a travs de la barra de herramientas de documento.

La vista Diseo

La vista Diseo permite trabajar con el editor visual. Es la vista predeterminada de Dreamweaver y la que se
suele utilizar habitualmente.

La vista Cdigo

La vista Cdigo se utiliza para poder trabajar en un entorno totalmente de programacin, de cdigo fuente. No
permite tener directamente una referencia visual de cmo va quedando el documento segn se va
modificando el cdigo.

La vista Cdigo y Diseo

La vista Cdigo y Diseo permite dividir la ventana en dos zonas. La zona superior muestra el cdigo fuente, y la
inferior el editor visual. Cuando se realiza un cambio en alguna de las zonas, este cambio se aplica
directamente sobre la otra.

Crear o editar un sitio web sin
conexin a Internet
Paso a Paso
Cada vez que iniciemos un nuevo proyecto, un nuevo sitio Web, el primer paso va a
ser configurarlo.
As que lo primero que haremos es decirle a DW cual ser la CARPETA RAIZ de nuestro
primer proyecto.
Para configurar un Sitio Web seguimos estos pasos:
Paso 1: Localizar la carpeta Raiz.
Podemos elegir como carpeta raz una carpeta de nuestro sistema que ya contenga
archivos tiles para el proyecto.
Pero si vamos a crear un sitio web desde 0 ,es mejor crear previamente la carpeta
virgen que ser nuestra CARPETA RAIZ.
Por ejemplo:
Accedo al Explorador de Archivos (Windows) a la carpeta del sistema Mis Documentos.
Ah creo una carpeta nueva (Archivo > Nuevo > Carpeta) llamada, por ejemplo, Mis Sitios Web

Esta no ser la carpeta raz!... slo la creo para albergar las carpetas raz de todos los sitios
Web que cree en el futuro.
Dentro de esa nueva carpeta creo otra llamada, por ejemplo, Sitio1: esta ser la madre del
cordero, la CARPETA RAIZ.

2. En Dreamweaver vamos al men Sitio Administrar sitios
3. Clic en el botn Nuevo, opcin Sitio
4. Dar el nombre al sitio. Podemos poner el mismo nombre que dimos a la
carpeta del sitio. Clic en Siguiente
5. En la opcin Desea trabajar con una tecnologa de servidor como
ColdFusion, ASP.NET, ASP, JSP O PHP?, elegimos la opcin No. Siguiente.
6. En la opcin Cmo desea trabajar con los archivos durante la etapa de
desarrollo?, elegimos Editar copias locales en mi equipo Adems debemos
buscar el sitio donde creamos la carpeta del sitio, y seleccionarla. Clic en
Siguiente.
7. En Cmo conecta con su servidor remoto?, elegimos la opcin Local/red, y
nuevamente ubicamos la carpeta del sitio y la seleccionamos. Clic en
Siguiente.
8. Luego seguimos dando clic en Siguiente, hasta terminar con el asistente.
9. Clic en el botn Listo.

Crear una Pagina web

1. Seleccionamos la opcin Archivo>Nuevo.... Al hacerlo se abrir el cuadro de
dialogo de Nuevo Documento.
En la lista de categoras de la izquierda elegimos Pgina en blanco: Tipo de pgina
HTML y Diseo <ninguno>.
2. Hacemos clic en Crear. ... y Listo.
La ventana de Documento presentar el documento NUEVO en blanco.
mtodo rpido para crear archivos .htm en nuestra carpeta raz.
Asegrate de que est abierto el panel ARCHIVOS, si est cerrado seleccionamos
Ventana>Archivos.
La carpeta verde que est al inicio de la lista de Archivos es la que representa a al
CARPETA RAZ.
Pulsamos sobre ella con el botn derecho del ratn.
De la lista de opciones que se nos ofrece seleccionamos la primera: Nuevo
archivo...
Con esto se crear el archivo YA en la carpeta raz. No hace falta guardarlo.
Slo necesita que le cambiemos el nombre predefinido (untitled.htm) por el
nombre que tendr el archivo en el sitio.
Por ejemplo segunda.htm

Guardar una pgina
1. Seleccionamos Archivo > Guardar o hacemos clic sobre el
botn de la barra de herramientas Estndar.
2. En el cuadro de dilogo Guardar como, accedemos a la
carpeta raz del sitio (en nuestro ejemplo, la carpeta Sitio1
).
Aparecer por defecto la carpeta raz del sitio que
tengamos abierto en el Panel Archivos.
3. Introducimos el nombre de archivo .html ( por ejemplo;
primera.html)
4. Hacemos clic en Guardar.
Es conveniente que la pgina inicial del sitio tenga el nombre
index.html, ya que los navegadores buscan una pgina con
ese nombre cuando se intenta acceder a una URL genrica.
Cuidados con el nombre del archivo
- El nombre no debe de ser muy largo.
- No utilizaremos espacios en blanco.
- No utilizaremos Maysculas.
- No utilizaremos signos raros (!%&*.), incluida
la
Cuadro de Propiedades de pgina

Una vez que hemos creado una pgina Web podemos
determinar unas propiedades generales al contenido de
esa pgina.
Para ello solo hemos de seleccionar:
- Opcin de men Modificar > Propiedades de la
pgina...
- Clic con el Botn derecho del ratn en un rea
vaca del documento y elegir Propiedades de la pgina
- Pulsar el botn Propiedades de la pgina.. en el panel
PROPIEDADES
- O presionar ctrl + j
Las propiedades estn organizadas en categoras.
En la categora Aspecto, como ves en la imagen anterior, encontramos las propiedades:
Imagen de fondo: permite especificar una imagen de fondo para el documento. Dicha imagen se muestra en mosaico. Es
importante al elegir una imagen de fondo tener en cuenta que segn los colores de la imagen ser necesario establecer
unos u otros colores para el texto, as como que no es conveniente tener un gif animado como fondo.
Color de fondo: permite especificar un color de fondo para el documento, pero dicho color solo se mostrar en el caso de
no haber establecido ninguna imagen de fondo.
Tamao: permite definir el tamao de la letra.
Color del texto: es el color de la fuente.
Mrgenes: permiten establecer mrgenes en el documento. Los mrgenes izquierdo y superior solo funcionan en Microsoft
Internet Explorer, mientras que el ancho y el alto de mrgen solo funcionan para Netscape Navigator. Ninguno de estos
mrgenes aparece en la ventana de documento de Dreamweaver, solo se mostrarn en los navegadores.

En la categora Ttulo/Codificacin encontramos la propiedad:
Ttulo: es el ttulo del documento, que aparecer en la barra de ttulo del navegador y de la ventana de documento de
Dreamweaver.

En la categora Vnculos: encontramos las propiedades:
Color de vnculo: es el color de los vnculos, que ayuda al usuario a distinguir entre el texto normal y los vnculos que sirven
de enlace a otras pginas.
Vnculos visitados: es el color de los vnculos visitados, que permite distinguir al usuario si unos vnculos ya han sido
visitados o no.
Vnculos activos: es el color de los vnculos activos.
Estilo subrayado: por defecto, cuando tenemos un texto con un vnculo asociado, el texto aparece subrayado, con esta
opcin podemos elegir otro tipo de estilo por ejemplo para que no aparezca subrayado.

En la categora Imagen de rastreo encontramos las propiedades:
Imagen de rastreo: permite establecer una imagen como fondo del documento, pero que slo se mostrar en la ventana de
documento de Dreamweaver, y nunca en un navegador. Dicha imagen se utiliza como plantilla grfica sobre la que crear el
documento.
Transparencia: permite establecer la opacidad de la imagen de rastreo.

Cibergrafa
http://www0.unsl.edu.ar/~tecno/multimedia/dreamweaver/curso/dreamweaver/Default.ht
m
http://www.slideshare.net/JulioGastelum/que-es-dreamweaver-por-julio-gastelum
http://www.aulaclic.es/dreamweavercs3/

Manual Dreamweaver

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Manual Dreamweaver

Cargado por

Copyright:

Formatos disponibles

MANUAL DREAMWEAVER

También podría gustarte