Professional Documents
Culture Documents
ii
Contenido iii
Contenido
CONTENIDO
1
1.1. Qu es Dreamweaver?
Vista En vivo.
1.4.5. Vista Cdigo en vivo.
1.4.6. Vista previa en el navegador.
1.5. Crear un nuevo documento.
9
1.6. Abrir un documento.
9
1.7. Guardar un documento.
10
1.8. Importar y exportar documentos.
11
1.9. Cerrar y salir de Dreamweaver.
12
2
rea
de trabajo
en Dreamweaver
CS6.
2.4. Barra
de herramientas
Navegacin con
navegador.
15
16
17
19
20
20
vi
21
22
22
24
25
27
28
4.2 Comentarios.
33
33
34
35
4.6 Listas.
36
37
40
41
43
44
45
Contenido vii
Imgenes.
55
56
56
58
59
61
62
6
Hipervnculos.
66
67
67
6.2.1.Rutas absolutas.
6.2.2.Rutas relativas al documento.
6.2.3.Rutas relativas a la raz del sitio.
6.3. Crear hipervnculos.
68
77
77
79
81
82
82
83
83
9.2.3 Div
PA.
84
84
86
86
88
89
91
Formularios.
92
92
104
104
Contenido ix
10 Elementos
multimedia
.
10.1 Insertar Audio.
10
5
10
7
10
8
10
9
10.1.1
Etiqueta
<AUDIO>.
10.1.2
in.
Comando Plug-
Comando Plug-
1
1
1
11
2
1
1
3
11
4
11
4
11
4
UNIDAD
1.1 Qu es Dreamweaver?
1.2 Acceso a Dreamweaver.
1.3 Ambiente de Dreamweaver.
1.4 Vistas del documento.
1.5 Crear un nuevo documento.
1.6 Abrir un documento.
1.7 Guardar un documento.
1.8Importar y exportar documentos.
1.9
Cerrar y salir de Dreamweaver.
OPCIN 1:
1) Abre el men Metro de Windows (Presionado la tecla de < Windows >).
2) Desplzate por los programas y haz clic en la aplicacin Adobe
Dreamweaver CS6.
OPCIN 2:
1) Metacomando < Win + R >.
2) Teclea la palabra Dreamweaver.
3) Pulsa la tecla < Enter >.
Unidad 1 Introduccin a
Dreamweaver CS6
Barra de herramientas
Documento
Barra de mens
Conmutador
de espacios
de trabajo
rea de
trabajo
Barra de
herramien
tas Estado
Panel
es Inspector de
propiedades
1.4.2
Vista Diseo.
1.4.3
Vista Dividir.
Cdigo y Diseo.
1.4.4
Vista En vivo.
Vista en vivo.
1.4.5
Cdigo en vivo.
1.4.6
Nuevo.
Abrir.
Unidad 1 Introduccin a
Dreamweaver CS6
1
1
Guardar.
XML
en
plantilla.
Dreamweaver
crea
un
nuevo
Datos
de
tabla.
1
2
clic
en
el
Selecciona
la
men
opcin
Archivo
del
archivo
Importar
que
desees
importar.
Asimismo es posible exportar la pgina web a otros formatos, que son:
Tabla.
Haz
clic
en
Selecciona
la
el
men
opcin
Archivo
del
archivo
Exportar
que
desees
exportar.
1.9 Cerrar y salir de Dreamweaver.
Para cerrar un documento en Dreamweaver CS6, presiona el
Metacomando
< Ctrl + F4 >.
Para salir de Dreamweaver, realiza:
1) Metacomando < Ctrl + Q > o < Alt + F4 >.
2) Men Archivo
Cerrar.
TRABAJOS DE INVESTIGACI
N
1. Historia de Dreamweaver desde sus comienzos hasta la actualidad.
UNIDAD
1
4
opciones
relativos
la
visualizacin
del
documento
su
Vista Cdigo
Vista Diseo
Multipantalla
Administracin de archivos
Comprobar compatibilidad con navegadores
Actualizar documento
Ayudas visuales
Validacin W3C
Vista previa
Vista En vivo
Vista Dividir
Ttulo de la pgina web
Selector de etiquetas
Herramienta mano Establecer nivel de aumento
Tamao tableta
Tamao de ventana
Cuadro de direccin
Activar modo de inspeccin
los
objetos
que
se
Categora
insertar
tabla,
Diseo.
tablas,
Permite
elementos
etiquetas
div,
marcos
de
y
dos
vistas
para
tablas:
que
permiten
crear
Categora
Datos.
Permite
otros
elementos
dinmicos,
Regiones
editables,
Regiones
repetidas
la
tambin permite
TRABAJOS DE INVESTIGACI
N
1. World Wide Web Consortium.
a. Qu es?
b. Organizacin.
c. Para qu se cre?
d. Quines lo crearon?
2. Activar o desactivar los paneles de Dreamweaver.
UNIDAD
2
0
sitio
Web
tendr
una
remota:
Almacena
los
archivos
para
pruebas,
paginaweb
documentos
imagenes
videos
scripts
multimedia
basedatos
2
2
Nuevo sitio.
Administrar sitios.
Unidad 1 Introduccin a
Dreamweaver CS6
2
3
2. Haz clic en un botn para seleccionar una de las opciones y haz clic en Listo.
o
TRABAJOS DE INVESTIGACI
N
1. Concepto de Servidor.
2. Funcin de los servidores.
3. Tipos de servidores.
4. Importancia de la estructura de un Sitio Web.
UNIDAD
4.11
4.12
2
8
FORMATO A LA
PGINA WEB.
4.1 Propiedades de la pgina.
Al momento de crear una Pgina Web es recomendable crear sitios
que sigan un mismo formato, es decir, que tengan el mismo color de
fondo, de fuente, etc.
El formato de la pgina se define a travs del cuadro de dilogo
Propiedades de la pgina. Para abrir dicho cuadro de dilogo realiza
cualquiera de las siguientes opciones:
1. Metacomando < Ctrl + J >.
2. Haz clic en el men Modificar
Propiedades de la pgina.
Unidad 4 Formato a la
Pgina Web
2
9
Unidad 4 Formato a la
Pgina Web
4.1.2
3
1
Mrgenes.
Permiten
establecer
los
mrgenes
del
4.1.3
3
2
4.1.6
4.2 Comentarios.
Un comentario es un texto descriptivo que se inserta en el
cdigo HTML para explicar el cdigo o facilitar otra informacin. El texto
del comentario aparece slo en la vista Cdigo y no se muestra en los
navegadores.
Para insertar comentarios al documento, realiza:
1) Sitate en el men Insertar Comentario.
2) O haz clic en el comando Comentario, del panel Insertar, de la
categora
Comn.
guarde
el
documento,
activa
la
casilla
Actualizar
Grosor de la regla
Asignar un nombre de ID
Alineacin de la regla
Aplicar sombra
Asignar clase
4.6 Listas.
En Dreamweaver CS6, es posible insertar tres tipos de listas, que son:
Lista
de
definicin:
se
encuentra
compuesta
trminos
por
o expresiones y su
definicin.
previamente haberlo
seleccionado).
5
1
3
11
7
8
12
2
10
1
4
12
8
10
11
3
2
regla,
Dreamweaver
abrir
el
cuadro
de
dilogo
Unidad 4 Formato a la
Pgina Web
4
5
4
2
3. Una vez configuradas las anteriores opciones, haz clic en el botn Aceptar.
4. Se visualizar un cuadro de dilogo parecido al que se
muestra abajo, en donde se habrn de configurar todos las
propiedades del Estilo CSS.
class="nav" id="menu"
font-size:12px;
text-align:center;
}
ul, ol { list-style:none;
}
.nav li a {
background-color:#000;
color:#fff;
text-decoration:none;
padding:10px 15px;
display:block;
}
.nav li a:hover {
text-shadow: 0 0 1px
brown; backgroundcolor:#434343;
}
.nav > li {
float:left;
width:140px;
}
.nav li ul {
display:none;
position:absolute
; minwidth:140px;
text-align:left;
}
/* Mostrar submenus */
.nav li:hover > ul {
display:block;
}
.nav li ul li {
position:relative;
}
.nav li ul li ul {
right:-140px;
top:0px;
}
Unidad 4 Formato a la
Pgina Web
5
3
5
0
Background-position
(X)
Background-position
5
2
superior,
derecha,
inferior
izquierda
Igual para todo: Establece el mismo borde para Top, Right, Bottom y Left.
Unidad 4 Formato a la
Pgina Web
5
3
el
lmites.
UNIDAD
IMGENES.
5.1 Concepto de Imagen.
5.2 Insertar imgenes.
5.3 Insertar marcadores de posicin de imagen.
5.4 Propiedades de imgenes.
5.5Imagen de sustitucin (Rollover).
5.6Objetos inteligentes.
5
6
IMGENES.
5.1 Concepto de
Imagen.
Una imagen es el grfico vectorial o no vectorial, que muestra
una presentacin visual de algo en formato digital.
5.2 Insertar imgenes.
Cuando se insertan imgenes en Dreamweaver, el programa
genera una referencia del archivo de imagen.
Para insertar imgenes en Dreamweaver, realiza:
1. Posicinate en el lugar donde desees colocar la imagen.
2. Despus realiza cualquiera de los siguientes opciones, para
abrir el cuadro de dilogo Seleccionar origen de imagen:
A) Metacomando < Ctrl + Alt + I >.
B) Panel Insertar Categora Comn Imagen.
C) Men Insertar Imagen.
3. En el cuadro de dilogo abierto, selecciona la imagen que
desees insertar en el documento.
se
ha
activado
el
cuadro
de
dilogo
Preferencias,
posicin de imagen.
3. En el cuadro de dilogo abierto, selecciona el tamao y color del
marcador, y asgnale una etiqueta de texto.
Unidad 5
Imgenes
6
1
1
8
12
4
13
10
11
3
2
9
6
1. ID.
Asigna
despus
un
nombre
como
identificador
para
usarlo
como comportamiento.
11.
12.
crear
la
una
imagen
imagen
de
principal
sustitucin
(la
que
se
requieren
aparece
al
dos
cargarse
tener
el
mismo
tamao.
Si
tienen
tamaos
distintos,
6
2
Texto
alternativo
cuando
un
sustitucin.
5.6 Objetos inteligentes.
Un objeto inteligente es una imagen para Web que mantiene
una conexin en vivo con la imagen original de Photoshop. Al actualizar
la imagen original en Photoshop, Dreamweaver ofrece la posibilidad de
Unidad 5
Imgenes
6
3
TRABAJOS DE INVESTIGACI
N
1. Extensiones de imgenes que permite Dreamweaver insertar al documento.
2. Insertar Imgenes HTML de Fireworks.
3. Uso de zonas interactivas en una imagen insertada en Dreamweaver.
UNIDAD
HIPERVNCULOS.
6.1 Concepto de Hipervnculo.
6.2 Tipos de rutas de los vnculos.
6.3 Crear hipervnculos.
6.4 Destino de los hipervnculos.
6.5 Anclaje con nombre.
6.6 Vnculo a correo electrnico.
6.7 Men de salto.
6.8 Zonas interactivas.
Unidad 6
Hipervnculos
6
7
HIPERVNCULOS.
6.1 Concepto de Hipervnculo.
Los hipervnculos son links (vnculos) que al ser pulsados nos
redirigen hacia otra pgina o archivo; permitiendo conectar los
diferentes elementos de una Pgina Web.
En Dreamweaver es posible establecer hipervnculos a cualquier
elemento del documento como puede ser: texto, imgenes, multimedia,
etc.
6.2 Tipos de rutas de los vnculos.
Cuando se crean vnculos, resulta fundamental conocer la ruta de
archivo entre el documento desde el que establece el vnculo y el
documento con el que lo establece.
Cada Pgina Web tiene una direccin exclusiva, denominada URL
(Localizador Uniforme de Recursos, Uniform Resource Locator). Sin
embargo, cuando se crea un vnculo local (un vnculo de un documento
con otro documento del mismo sitio), no suele ser necesario especificar
el URL completo del documento de destino.
6.2.1 Rutas absolutas.
Proporcionan la URL completa del documento vinculado, incluido
el protocolo que se debe usar (http://), por ejemplo,
http://www.dcompusite.blogspot.com/.
6.2.2
Se emplean
tiles cuando
para
vnculos locales,
resultan particularmente
6
8
6.2.3
Unidad 6
Hipervnculos
7
1
2.
mensaje
el
de
correo
electrnico,
cuadro
Para
se
actualiza
7
2
visitantes
del
sitio
que
ofrece
vnculos
con
Unidad 6
Hipervnculos
7
3
TRABAJOS DE INVESTIGACI
N
1. Extensiones de imgenes que permite Dreamweaver insertar al documento.
2. Insertar Imgenes HTML de Fireworks.
3. Uso de zonas interactivas en una imagen insertada en Dreamweaver.
UNIDAD
DISEO DE LA PGINA WEB.
7.1 Concepto de Tabla.
7.2 Creacin de tablas.
7.3 Formato de tablas y celdas.
7.4 Insertar filas y columnas.
7.5 Eliminar filas y columnas.
7.6 Combinar o dividir celdas.
7.7 Anidar tablas.
7.8 Ordenar tablas.
7.9 Concepto de marcos.
7.10
Crear marcos.
7.11
Seleccionar marcos.
7.12
Guardar marcos.
7.13
7.14
Hipervnculos en marcos.
Unidad 7 Diseo de la
Pgina Web
7
7
DISEO DE LA PGINA
WEB.
7.1 Concepto de Tabla.
Una tabla es la herramienta eficaz para presentar una serie de
datos de forma clara y organizada en una Pgina Web. Tambin son
usadas para el diseo del documento.
Las tablas estn compuestas por filas y columnas, y la
interseccin entre una fila y una columna es conocida con el nombre de
celda.
7.2 Creacin de tablas.
Para insertar tablas en el documento, realiza cualquiera de
las siguientes opciones:
1. Men Insertar Tabla.
2. Metacomando < Ctrl + Alt + T >.
3. Panel Insertar Categora Comn Tabla.
Realizada alguna de las opciones anteriores, se mostrar el cuadro de dilogo
Tabla en donde se habr de especificar:
7
8
1
4
2
7
5
8
0
5
8
8
2
ampliado.
Para dividir una celda, haz clic en la celda y selecciona el men Modificar
Tabla
Dividir celda.
O desde el botn Dividir celdas el Inspector de propiedades
ampliado. En el cuadro de dilogo Dividir celda, especifica
cmo deseas dividirla.
de
asociados
al
fila
de
mismo
la
tabla
contenido
deben
permanecer
despus
de
la
ordenacin.
7.9 Concepto de marcos.
Un marco o frame es una zona de una ventana de navegador que
puede mostrar un documento HTML independiente de lo que se muestra
en el resto de la ventana. Los marcos permiten dividir la ventana de un
navegador en varias regiones, cada una las cuales puede mostrar un
documento HTML diferente.
7.10 Crear marcos.
travs
HTML
del
men
Marcos.
Insertar
En
dicha
TRABAJOS DE INVESTIGACI
N
1. Prioridad de formato de tabla en HTML.
2. Eliminar marcos.
3. Comportamientos JavaScript en marcos.
UNIDAD
FORMULARIOS.
8.1 Concepto de Formulario.
8.2 Crear formularios.
8.3 Objetos de los formularios.
8.4 Validacin de formularios aplicando JavaScript.
8.5 Validacin de formularios usando HTML5.
9
2
FORMULARIOS.
8.1 Concepto de Formulario.
Los formularios son los elementos que se utilizan para la
recoleccin de datos del usuario y se emplean muy cotidianamente
para el registro de usuarios, comentarios, inicio de sesiones, etc.
8.2 Crear formularios.
Para crear formularios en Dreamweaver, realiza:
1. Haz clic en el men Insertar Formulario Formulario.
O del panel Insertar Categora Formularios Formulario.
2. Se mostrar el siguiente recuadro en donde se habrn de ir
insertando los diferentes elementos que queramos usar en el
formulario.
3
1
6
4
8.3.1
7
5
4
6
3
2
8.3.3
Elemento Botn.
1
3
Restablecer
formulario.
Borra
el
contenido
del
Ninguno
-Especifica
la
accin
que debe
realizarse
8.3.4
1
3
8.3.5
8.3.6
5
5
6
2
1
2
8.3.9
Unidad 8
Formularios
1
0
10
2
TRABAJOS DE INVESTIGACI
N
1. Objetos de formularios dinmicos.
2. Formularios Spry.
3. Comportamientos JavaScript de Dreamweaver CS6.
UNIDAD
CAPAS.
9.1 Concepto de Capa.
9.2 Insertar capas.
9.3 Propiedades de las capas.
9.4Hojas de estilos en las capas.
10
4
CAPAS.
9.1 Concepto de
Capa.
Las capas son recuadros que pueden colocarse en cualquier
parte de la Pgina Web y tener cualquier clase de contenido HTML. Las
capas pueden ocultarse y solaparse entre s, lo que proporciona una
gran ventaja para el diseo.
9.2 Insertar capas.
Dreamweaver ofrece tres formas para insertar capas, cada una
de ellas con una funcin en especfico.
Para insertar cualquier de las tres capas, realiza alguna de las siguientes
opciones:
1. Sitate en el men Insertar Objetos de diseo
Selecciona la capa a insertar.
Div PA.
Unidad 9
Capas
10
5
3
1
4
6
10
7
9
5
2
Controla
cmo
aparecen
los
elementos
PA
en
un
la
mayora
de
los
que tenga el
navegadores
utilizan
No
muestra
el
contenido
del
elemento
PA,
Clase. Especifica la clase CSS utilizada para aplicar estilo al elemento PA.
3. Guarda el archivo.
4. Adjunta la hoja de estilos con el documento a la que desees
aplicar los estilos creados.
5. Por ltimo, aplica el estilo CSS a la capa deseada.
TRABAJOS DE INVESTIGACI
N
1. Propiedades CSS para el manejo capas.
2. Configurar las capas Div PA desde el cuadro de dilogo Preferencias.
3. Mostrar u ocultar capas.
UNIDAD
ELEMENTOS MULTIMEDIA.
10.1 Insertar Audio.
10.2
Insertar Video.
10.3
Archivo SWF.
10.4
Componente FLV.
10.5
Pelculas Shockwave.
10.6
Control ActiveX.
10.7
Elemento Applet.
10
Unidad 10 Elementos
multimedia
10
9
ELEMENTOS MULTIMEDIA.
10.1 Insertar
Audio.
Incorporar sonido a la Pgina Web no es muy recomendable, ya
que en algunas ocasiones el usuario que visita el sitio suele estar
escuchando su propia msica cuando se encuentran navegando en
Internet, y esto puede resultar molesto para el internauta. Sin embargo,
en Dreamweaver es posible insertar diferentes tipos de audio, como
.wav, .midi y .mp3, entre otros. Los factores que hay que tener en
cuenta antes de optar por un formato y un mtodo para aadir sonido
son: su finalidad, el tipo de usuarios a los que est destinado, el tamao
de archivo, la calidad de sonido y las diferencias en los navegadores.
10.1.1 Etiqueta < AUDIO >.
En Dreamweaver CS6 se incorpor el uso de nuevas etiquetas
de HTML5 que versiones anteriores al programa no contaba con ellas,
unas de estas etiquetas es la de incorporar audio a la Pgina Web y sus
etiquetas son la de <AUDIO> </AUDIO>; cuando se desea generar
el cdigo HTML manualmente se deber emplear dicha etiqueta y sus
respectivos atributos a emplear.
10.1.2
Comando Plug-in.
11
2
Unidad 10 Elementos
multimedia
11
1
para
internauta.
Los formatos de vdeo que suelen utilizarse en Internet son los formatos: .avi,
.mpeg y .mov.
Sin embargo, hay que tomar en cuenta el peso del archivo, ya que
entre ms pese el archivo de video, mayor ser el tiempo en que va a
descargarse y mostrarse en el sitio Web.
10.2.1 Etiqueta <VIDEO>.
Otra de las etiquetas nuevas de HTML5 es la etiqueta <VIDEO>
que remplaz a la etiqueta <EMBED>, ambas etiquetas tienen la
misma funcin de insertar al documento un video, lo que llega a
cambiar en ambas etiquetas son sus propiedades.
10.2.2
Comando Plug-in.
11
2
Media
SWF.
2. En el cuadro de dilogo que
se mostrar, selecciona un
archivo SWF (.swf).
3. Guarda el archivo.
Elemento Applet.
Java es un lenguaje de programacin que permite el desarrollo de
aplicaciones pequeas (applets) que pueden incrustarse en pginas
Web.
Para incrustar elementos Applet, realiza: