PROFESOR: ISAAC GARCIA

RIOS
 Contenido del Curso
1. Introduccin a Dreamweaver 21.Insertar Vnculos
2. Planeacin para el Desarrollo de un 22.Mapas Sensibles
Sitio Web
3. Sitios Locales 23.Crear albums de fotos
4. Crear una Nueva Pgina Html 24.FLASH
Pelculas, Sonidos Y ELEMENTOS

5. Guardar Documentos 25.Hojas de Estilo

6. Entorno de Trabajo 26.Creacin de Estilos
7. Barra Insertar 27.Manejo de Tablas
8. Panel Propiedades 28.sobre
Comportamientos
9. Titulo de la Pgina Imgenes
10.Tamao de la pgina 29.Capas
11.Previsualizacin de las Pginas 30.Animaciones en Dreamweaver
12.Propiedades Bsicas de la Pgina 31.Mens Desplegables
13.Encabezados 32.Ventanas Pop-Up
14.Insertar Textos 33.Manejo de Frames (Marcos)
15.Formatos de Textos 34.Creacin de Formularios
16.Creacin de Listas 35.Validacin de Formularios
17.Imgenes 36.Contenidos del Head
18.deModificar los Atributos
la imagen
37.Publicar un Sitio
19.Imgenes Cambiantes
20.Vnculos
Introduccin a
Dreamweaver
Que es Dreamweaver?
Dreamweaver es un editor HTML que contiene
herramientas potentes para asegurar un diseo de
alta calidad en la creacin, edicin y gestin de
pginas web.
Con esta herramienta se pueden crear tablas,
marcos, capas, insertar comportamientos JavaScript,
videos, etc.
Dreamweaver incluye su propio FTP con el cual se
puede actualizar de manera rpida y sencilla el
servidor donde se encuentre hospedado el sitio.
Pgina de Inicio
Definir Sitios Locales

Definir un sitio local es un proceso

previo a la creacin de cualquier
pgina individual el cual consiste en
especificar una carpeta (denominada
Carpeta Raz Local) del disco duro,
esta carpeta ser la base de toda la
estructura de archivos y carpetas que
sern utilizados dentro del sitio Web
(pginas, imgenes, archivos, etc.)

En el panel Archivos administra

todos las carpetas y archivos de los
sitios locales o remotos que se
especifiquen en Dreamweaver.

En este panel, se pueden crear, Panel Archivos

eliminar, copiar y mover archivos y
carpetas.
Cmo Definir un Sitio
Local?
1) Utilizar la opcin Administrar Sitios..
Esta opcin nos permitir:
Especificar un Nuevo Sitio
Editar la configuracin de un Sitio
Quitar un Sitio
Duplicar un Sitio
Importar y Exportar un Sitio
Cambiar de Sitios
2)

Usar la opcin Nuevo

Se puede utilizar las siguientes formas:
a) Bsica (Wizard)
Avanzada
3)
b)
Definir las opciones del sitio (Bsica)
Nombre del Sitio
Tecnologa del Servidor
(ASP *versiones , PHP, JPS ColdFusion, My Sql)
Ruta y Forma de editar los archivos durante
el desarrollo
Local
Directamente en el Server
Forma de la conexin al Servidor Remoto
Cambiar de Sitio

Se puede seleccionar un sitio de los que ya se

hayan establecido en Dreamweaver de las
siguientes formas:
a) Mediante la opcin Administrar Sitios

b) Mediante el Panel Archivos

Crear una Nueva Pgina

Para crear una nueva pgina puede hacer uso

de las siguientes formas:
a) Uso de la Opcin Nuevo
Mediante esta opcin puede agregar nuevos documentos
de tipo:
HTML
Hojas de Estilo en Cascada (CSS)
Documentos de JavaScript y VbScript
Documentos XML
Pginas Dinmicas compatibles con
lenguajes de Java ,ColdFusion,
ASP y PHP

b) Uso del Panel de Archivos

Guardar Documentos

En el momento que se agregue un Nuevo Documento, es

necesario almacenarlo inmediatamente, ya que de esta
manera todas las rutas de referencia a los archivos y
vnculos que se agreguen al documento, se establecern
de manera correcta, de lo contrario se presentarn
vnculos rotos y errores dentro de un documento o todOs
los documentos del sitio.

Los documentos se debern almacenar con la

extensin .html
Entorno de Trabajo
Barra Insertar

La barra INSERTAR es la principal herramienta que utiliza

Dreamweaver para el diseo de las pginas, la cual esta organizada
de la siguiente manera:
Comn
Diseo
Formularios
Texto
HTML
Aplicacin
Elementos de Flash
Favoritos
Panel Propiedades

Este panel se utiliza para ver y modificar los atributos de

los siguientes elementos:
Textos
Imgenes
Tablas
Frames
Elementos de Flash
Otros Elementos.
Los atributos disponibles dentro del panel, cambiarn
dependiendo del elemento seleccionado.
Configurar el Titulo
de la Pgina
Para definir el ttulo de la pgina (el ttulo que aparece
en la barra de ttulo del navegador), puede hacerlo de
la siguiente manera:
a) Barra de herramientas DOCUMENTO.

b) Uso de la Opcin de Propiedades de la Pgina

Especificar el Tamao de la
pgina
Tamao de la Pgina
Para el diseo de una pgina se debe tomar en
cuanta la resolucin que comnmente los usuarios
tengan configurado en una PC. Las resoluciones mas
comunes son:
800 x 600 px
1024 x 768 px

Para un diseo de un sitio a una resolucin de 800 x

600 pxeles se deber disear en base a las
siguientes medidas:
Ancho: 750 px
Alto: 440 px o segn lo largo de la pgina
Previsualizacin de las Pginas

Para previsualizar una pgina en el navegador

se utliza:
a) Men Archivo/Vista Previa en el Navegador
Dreamweaver permite configurar varios
navegadores que se pueden utilizar en la
previsualizacin.
Propiedades Bsicas de la
Pgina
Encabezados

Los encabezados son formatos predefinidos que

son aplicados a un texto que se desea resaltar
como en el caso de ttulos y subttulos.
Insertar Textos

A medida que introduzca texto y aplique formato en la

vista Diseo, Dreamweaver crear el cdigo HTML
subyacente para la pgina.
Con los textos se pueden aplicar los siguientes atributos:
Interlineados
Salto con Interlineado Sencillo
Salto con Interlineado Doble
Definir el formato predeterminado de las fuente en toda la pgina
Formatos
Fuente
Tamao
Color
Estilos
Formatos de Prrafo
Alineacin
Sangra
Formatos de Textos

Para aplicar formatos a un texto se utiliza el

panel Propiedades, en el cual podr definir los
siguientes formatos:
Fuente
Prrafo
Creacin de Listas

Dreamweaver crea 3 tipos bsicos listas:

Ordenadas

Sin Ordenar

Definicin
Imgenes

Las imgenes que utiliza Dreamweaver son:

JPG (Join Photographic Expert Group)
Este formato es recomendable para imgenes fotogrficas o imgenes con
una mayor gama de tonalidades o para imgenes con degradados de alta
calidad. Este formato no puede tener transparencias ni animaciones.
GIF (Graphic Interchange Format)
Este formato es el mas recomendable para imgenes de colores uniformes
(sin degradados), este formato tiende a descargarse mas rpido por su
formato comprimido. Permite tener transparencia y animaciones.
PNG (Portable Network Graphic)
Este formato comparte caractersticas de JPG y GIF, no pierde calidad, se
comprimen mas que los GIF y conserva todos los colores como el JPG, pero
el formato PNG no tiene animaciones y aun no lo soportan algunos
navegadores y servidores..
Insertar Imgenes

Para insertar una imagen se puede realizar de

las siguiente formas:
Mediante la Barra Insertar
Mediante la Opcin Insertar Imagen
Modificar los Atributos
de la imagen

Mediante el Panel Propiedades se puede

modificar caractersticas como:
Ancho y Alto
Posicin Vertical y Horizontal
Archivo de Origen
Texto Alterno
Bordes
Alineacin de la Imagen
Edicin y Efectos de Imgenes
Vnculos
Imgenes Cambiantes

Dreamweaver permite cambiar una imagen por otra al

momento de situar el puntero del mouse sobre la imagen
(Rollover).
Para un Rollover es recomendable trabajar con imgenes
que tengan el mismo tamao.
Vnculos

En Dreamweaver se pueden especificar los siguientes

tipos de vnculos:
Links Absolutos
Vnculos que marcan la ruta completa para llamar a un archivo
especifico dentro del mismo sitio o en otros.
Ejemplo 1:
http://www.aulafacil.com/word/temario.htm
Ejemplo 2:
C:\Mis Documentos\web\pagina2.htm
Links Relativos
Vnculos que se especifican solo colocando el nombre del archivo
al que se desea llamar, tomando como base la ruta de la carpeta
donde se encuentre almacenado el archivo actual.
Ejemplos:
archivo.htm
carpeta/archivo.htm
../archivo.htm
Vnculos

Links a un e-mail
Ejemplo:
mailto:lmoreno@ccpm.com.mx
Links a una Ancla
Vinculo que se hace hacia cualquier lugar dentro de la
misma pgina o a otro lugar especifico de otra pgina.
Ejemplo 1:
#nombredelancla
Ejemplo 2:
Pagina2.htm#nombredelancla
Ejemplo 3:
http://www.sitio.com/pagina2.htm#nombredelancla
Insertar Vnculos

Para Insertar vnculos relativos, absolutos y

correo electrnico, se puede realizar desde:
Panel Propiedades

Panel Insertar
Insertar Vnculos

Las anclas son marcas con un nombre definido por el

usuario, lo cual permiten crear vnculos a dichas marcas,
generando un desplazamiento hacia esas marcas.

Las caractersticas del nombre de una ancla son:

Deben ser nicos dentro de la pgina
No utilizar espacios ni signos especiales.
Recomendable el uso de letras minsculas

Al hacer un vinculo hacia una ancla, se debe anteponer el

signo # al nombre de la ancla.
Ejemplo:
#contenido
#tema1
Mapas Sensibles

Los mapas sensibles permiten dividir una imagen en

varias secciones con vnculos.
Los mapas son definidos mediante un trazo sobre una
imagen con las siguientes herramientas:
Zona Interactiva Rectangular
Zona Interactiva Oval
Zona Interactiva Poligonal
Crear albums de fotos

Dreamweaver tiene la
facilidad de crear
albums de fotografas
apartir de una carpeta
de imgenes.
Dreamweaver
adems crea pginas
y vnculos por cada
una de las imgenes
que se encuentre en
la pgina principal del
album.
Pelculas y Sonidos

Videos
En Dreamweaver se pueden insertar videos de los dos formatos mas
conocidos:
Videos de Windows Media
QuickTime

Sonidos
Los sonidos pueden insertados como fondo de la pgina o con
controles de reproduccin a travs de un Plug-in. Los formatos
mas comunes de sonido son:
Mp3
Wav
Midi
Hojas de Estilo

Hoja de Estilo en Cascada

(Cascading Style Sheet)
Un estilo es un grupo de atributos de formato
identificados por un solo nombre que es el encargado
de comunicar al navegador como mostrar un
elemento.
Ventajas de los Estilos:
Facilita el empleo de formatos a un texto y la actualizacin
de los mismos con solo modificar un estilo.
Un estilo puede ser utilizado en:
Solo en el documento donde fue creado
En todas las pginas de un sitio, ya que los estilos se guardan
en un archivo externo (*.css) y son llamados desde el archivo
.html
Un estilo puede ser reutilizado en otros sitios.
Creacin de Estilos

Un estilo se puede crear de diferentes maneras:

Panel Propiedades
Panel Estilos CSS
Panel Inspector de Etiquetas
Opcin Estilos CSS del men Texto
Tablas

Una tabla es la herramienta principal para

realizar un mejor diseo de una pgina web. La
mayora de las pginas web estn diseadas en
base a tablas.
Una Tabla esta conformada por filas y columnas,
la interseccin entre estas forman una celda.
Las Tablas contienen las siguientes propiedades:
Propiedades Generales (Para toda una tabla)
Propiedades Particulares (Para cada celda)
Propiedades de las Tablas

Propiedades Generales Propiedades Particulares

No. Columnas Alineacin dentro de la
No. Filas Celda
Ancho y Alto de la Tabla Ancho y Alto de la Celda
Color de Fondo Imagen y Color de Fondo
de la Celda
Imagen de Fondo
Color del Borde de la
Ancho y Color de los
Bordes Celda
Combinar una Celda
Alienacin de la Tabla
Espacio entre celdas Dividir una Celda
(Espacio en Celda)
Margen Interno de las
Celdas (Espacio entre
Celdas)
Insertar Tablas

Una tabla puede ser insertada de la siguiente forma:

a) Men Insertar / Tabla
b) Mediante la Barra Inserta
c) Importada
Una tabla puede contener:
Texto
Imgenes
Botones
Elementos Flash
Otras Tablas
Formato de Tablas

Se le pueden aplicar propiedades a una tabla o

las celdas por medio del panel Propiedades
Propiedades de la Tabla

Propiedades de las Celdas

Comportamientos
sobre Imgenes
Un comportamiento comn sobre una imagen es una accin llamada
Rollover, la cual permite cambiar una imagen por otra al momento de
posicionar el puntero del mouse encima de una imagen.
Existen dos tipos de rollovers que se pueden realizar en
Dreamweaver:
Normal
Cambia solamente una imagen por otra
Avanzada
Cambia mas de una imagen situada en cualquier parte de la pgina.
Capas

Las capas permiten colocar cualquier tipo de elementos

en cualquier parte de la pantalla de manera flotante.
Las capas pueden estar visibles u ocultas y se puede
cambiar su estado en cualquier momento.
Animaciones en
Dreamweaver
En Dreamweaver se pueden crear animaciones
sencillas, ya que dreamweaver contiene un panel de
lnea de tiempo en la cual se pueden especificar
trayectos y tiempo de duracin a las animaciones.
Las animaciones se pueden aplicar solamente a las
capas y solo esta disponible para la actualizacin
1.0.1
Mens Desplegables

Dreamweaver contiene una herramienta muy sencilla

para el diseo de mens desplegables.
Los mens pueden ser Horizontales o Verticales
Para la creacin de un men se utiliza el comportamiento
Mostrar Men Emergente
Ventanas Pop-Up

Son ventanas que se abren inmediatamente al

entrar a la pgina de un sitio.
Frames (Marcos)

Marcos
Los marcos son estructuras dinmicas que permiten la organizacin de la
informacin de una pgina web. Los marcos bsicamente permiten dividir la
ventana de un navegador en varias regiones, cada una de las cuales puede
mostrar un documento HTML diferente
Los marcos pueden ser reas de contenidos (cambiantes) o reas estticas de
una pgina.
Conjunto de Marcos
Es un archivo .html que indica al navegador el estructura, diseo y propiedades
que tendr cada uno de los marcos que se visualizarn en la pgina, tales como:
Nmero de Marcos
Tamao de los Marcos
Ubicacin de los Marcos
Archivo .html que se visualizar
inicialmente dentro de cada frame
Entre otras propiedades.
Frames (Creacin)

Crear un Conjunto de Frames

Se puede insertar un conjunto de marcos de varios diseos
predefinidos de Dreamweaver. Para esto de puede relizar por
medio de las siguientes formas.
Men Archivo
Men Insertar
Botn Marcos de la Barra Insertar

Insertar Frames
Es posible insertar manualmente frames dentro de un
documento ya existente mediante las siguientes opciones:
Men Insertar
Botn Marcos de la Barra Insertar
Arrastrando con el mouse de los bordes del rea del documento
hacia adentro (es necesario contar previamente por lo menos con
un frame)
Frames (Propiedades)

Los frames tienen las siguientes propiedades:

Propiedades del Conjunto de Marcos
Numero de Filas y Columnas
Tipo, ancho y color de Bordes
Tamao de la Fila o columna
Pixeles
Porcentaje
Relativo

Propiedades de los Frames

Nombre del Frame
Archivo de Origen
ScrollBars
Tipo y Color del Borde
Ancho y Alto del Margen
No Resize
Formularios

Los formularios permiten solicitar y recibir informacin

proporcionada por los usuarios que visiten un sitio web.
Los formularios estn compuestos por campos, los cuales
pueden ser del siguiente tipo:
Texto
Botones de Opcin
Casillas de Verificacin
Mens
Listas
Funcionamiento de los
Formularios
Los datos del formulario pueden ser enviados a los
siguientes destinos:
A una Base de Datos en un servidor
A un correo electrnico
A una Aplicacin que procesar la informacin
Para que se lleve a cabo este proceso es necesario crear
aplicaciones que puedan procesar la informacin enviada
por los formularios. Algunas aplicaciones estn
desarrolladas en los siguientes lenguajes:
PHP
ASP
Perl
JPS
ColdFusion
Creacin de un Formulario

Para crear un formulario se utiliza la Barra Insertar /

Formulario o el men Insertar.
Insertar el rea de Formulario
Configurar el rea del formulario.
Dentro del rea del formulario insertar los controles.
Configurar los Controles.
Colocar Botones de Envi y Restauracin.

NOTA: Los nombres que se les asignen a los controles debe ser
iguales a las variables utilizadas en la aplicacin que procesar
los datos (CGI, ASP o PHP).
Validacin de Formularios

Es un comportamiento que comprueba los datos

introducidos en los campos por parte del usuario por
medio de reglas que se pueden establecer para cada
campo (Regla de Validacin).
En caso de que los datos introducidos en un campo no
cumpla con la regla de validacin se visualizar en
pantalla un mensaje de error.
La validacin se puede realizar de dos formas:
Validacin Campo por Campo.
Validacin de todo el formulario.
Contenidos del Head

Entre las etiquetas Head, se pueden establecer ciertas

propiedades que no son visibles en la pgina web (a
excepcin del ttulo de la pgina).
Las propiedades de cabecera mas utilizadas son:
Meta
Palabras Clave
Descripcin
Actualizar
Para ver los contenidos del Head, se pueden utilizar las
siguientes opciones:
Men Ver
Botn de Vistas
Plantillas

Una plantilla es un documento que se puede utilizar como

base para la creacin de otros documentos .
Cada documento basado en una plantilla utiliza el mismo
diseo y estructura que la plantilla
Al modificar la plantilla, se actualizan automticamente
todas las pginas web basadas en esa plantilla.
Una plantilla contiene las siguientes zonas:
Regin Editable
Regin No editable (Bloqueda)
Regin Opcional
Regin Repetida
Elementos Flash

En Dreamweaver se pueden insertar elementos

flash como:
Botones Flash
Textos Flash
Animaciones de Flash (.swf)
Para insertar cualquier elemento de este tipo,
utilizar la barra Insertar / Comn
Publicar un Sitio

Para publicar un sitio es necesario contar con los siguientes

requerimientos:
Servidor (Local o Internet Server)
Contar con una cuenta y password para accesar al Servidor
Crear en el Servidor la misma estructura de archivos a la del sitio que se tiene en
Dreamweaver
Contar con un dominio de internet (www.dominio.com)
Tener un servicio de transferencia de archivos (FTP o FileManager)
Servicio de SQL o algn manejador para Bases de Datos
Server, PHP o CGI

Al publicar un sitio hay que tomar en cuenta todos los archivos que se
utilizaron en el sitio:
Imgenes
Elementos de Flash
Hojas de Estilos
Videos
Scripts
CGI o PHPs
Etc, etc.
Muchas Gracias

Instructor:
ISAAC GARCIA RIOS