Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Dreamweaver CS6
Dreamweaver CS6
Web(
Dreamweaver)
ii
Contenido
iii
enviar
un
mensaje
daniel.olalde@gmail.com.
la
siguiente
direccin
electrnica
iv
Contenido
CONTENIDO
1
1.1.
Qu es Dreamweaver?
1.2.
Acceso a Dreamweaver.
1.3.
Ambiente de Dreamweaver.
Vista Cdigo.
1.7.
10
Guardar un documento.
11
12
Inspector de propiedades.
13
14
14
15
15
16
17
Concepto de Sitio.
19
20
20
vi
21
22
22
24
25
Propiedades de la pgina.
4.1.1
4.1.2
4.1.3
4.1.4
4.1.5
4.1.6
27
28
4.2
Comentarios.
33
4.3
Objeto Fecha.
33
4.4
Reglas horizontales.
34
4.5
Caracteres especiales.
35
4.6
Listas.
36
4.7
Formato al texto.
37
4.7.1
Men Formato.
4.8
40
4.9
41
4.9.1
Propiedades CSS.
43
44
45
Contenido
Imgenes.
5.1.
Concepto de Imagen.
vii
55
56
56
58
59
61
62
Hipervnculos.
66
67
67
68
69
70
71
72
74
76
7.1
Concepto de Tabla.
77
7.2
Creacin de tablas.
77
7.3
79
7.4
81
7.5
82
7.6
82
7.7
Anidar tablas.
83
7.8
Ordenar tablas.
83
viii
7.9
Concepto de marcos.
84
84
86
86
88
89
Formularios.
91
8.1
Concepto de Formulario.
92
8.2
Crear formularios.
92
8.3
8.3.1
8.4
100
8.5
101
Capas.
103
9.1
Concepto de Capa.
104
9.2
Insertar capas.
104
9.2.1
Etiqueta Div.
Contenido
10
ix
9.3
Propiedades de la capas.
105
9.4
107
Elementos multimedia.
10.1 Insertar Audio.
108
109
111
112
113
114
114
114
UNIDAD
INTRODUCCIN A DREAMWEAVER CS6.
1.1
Qu es Dreamweaver?
1.2
Acceso a Dreamweaver.
1.3
Ambiente de Dreamweaver.
1.4
1.5
Guardar un documento.
OPCIN 2:
1) Metacomando < Win + R >.
2) Teclea la palabra Dreamweaver.
3) Pulsa la tecla < Enter >.
Barra de mens
s
rea de trabajo
Barra de herramientas
Estado
Paneles
Inspector de propiedades
10
11
12
Tabla.
TRABAJOS DE INVESTIGACIN
1. Historia de Dreamweaver desde sus comienzos hasta la actualidad.
2. Novedades de Dreamweaver CS6.
3. Requisitos para instalar Dreamweaver CS6.
4. Concepto de Archivo XML.
UNIDAD
REA DE TRABAJO EN DREAMWEAVER CS6.
2.1
Inspector de propiedades.
2.2
14
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
15
Selector de etiquetas
Herramienta mano
Establecer nivel de aumento
Tamao tableta
Tamao de ventana
Tamao del documento y tiempo de descargar estimado
Indicador de codificacin
Cuadro de direccin
Activar modo de inspeccin
16
de
formulario,
incluidos
17
18
TRABAJOS DE INVESTIGACIN
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
CONFIGURAR UN SITIO EN DREAMWEAVER.
3.1
Concepto de Sitio.
20
paginaweb
documentos
imagenes
videos
scripts
multimedia
basedatos
21
22
23
4. Especifica las opciones Bsicas que sean necesarias y luego haz clic en el la
pestaa Avanzadas.
24
2.
Haz clic en un botn para seleccionar una de las opciones y haz clic en Listo.
o
25
26
TRABAJOS DE INVESTIGACIN
1. Concepto de Servidor.
2. Funcin de los servidores.
3. Tipos de servidores.
4. Importancia de la estructura de un Sitio Web.
UNIDAD
FORMATO A LA PGINA WEB.
4.1
Propiedades de la pgina.
4.2 Comentarios.
4.3 Objeto Fecha.
4.4 Reglas horizontales.
4.5 Caracteres especiales.
4.6 Listas.
4.7 Formato al texto.
4.8 Concepto de Estilo CSS.
4.9 Crear estilos CSS.
4.10 Editar estilos CSS.
4.11 Vincular estilos CSS.
4.12 Mens usando hojas de estilos.
28
29
30
4.1.2
31
4.1.3
32
33
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.
34
2.
35
Grosor de la regla
Asignar un nombre de ID
Alineacin de la regla
Aplicar sombra
Asignar clase
36
4.6 Listas.
En Dreamweaver CS6, es posible insertar tres tipos de listas, que son:
Lista sin ordenar: muestra una especie de vietas para agrupar los
diferentes elementos de la lista.
37
11
5
1
12
2
10
4
38
39
1
4
12
8
10
11
5
3
2
1. Regla de destino. Es la regla que est editando en el Inspector de propiedades
de CSS. Si hay una regla ya existente aplicada al texto, se mostrar el formato
de la regla que afecta al texto al hacer clic en el texto de la pgina. Tambin
puedes emplear el men emergente Regla de destino para crear nuevas reglas
CSS y nuevos estilos en lnea o aplicar clases existentes al texto seleccionado.
2. Editar regla. Abre el cuadro de dilogo Definicin de regla CSS para la regla de
destino. Si seleccionas Nueva regla CSS del men emergente Regla de destino
y haces clic en el botn Editar regla, Dreamweaver abrir el cuadro de dilogo
Definicin de nueva regla CSS.
3. Panel CSS. Abre el panel Estilos CSS y muestra propiedades para la regla de
destino en la vista actual.
4. Fuente. Cambia la fuente de la regla de destino.
5. Tamao. Establece el tamao de la fuente para la regla de destino.
6. Color. Establece el color seleccionado como color de fuente en la regla de
destino.
7. Negritas. Aade la propiedad de negrita a la regla de destino.
40
41
42
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.
43
5. Cuando hayas terminado de configurar las propiedades del estilo CSS, haz clic
sobre el botn Aceptar.
, del panel
Estilos CSS.
4. Realiza los cambios necesarios y haz clic en
Aceptar para conservar los cambios realizados.
44
45
4. Procede a crear los mens principales, tecleando el nombre del men despus
de cada vieta. Ejemplo:
46
5. Si se requiere crear submens en algn men, posicinate al final del texto del
men y pulsa la tecla < ENTER >; una vez que te haya creado la vieta pulsa la
tecla < TABULADOR > (esto aplicar una sangra a la vieta y servir para crear
el submen). Ejemplo:
6. Algunas veces se requiere crear otro submen dentro del submen del men
principal, para ello, repite los mismo pasos pero ahora debers dar < ENTER >
al final del texto del submen. Ejemplo:
47
7. Ahora debers colocar los hipervnculos a cada men y submen, para ello, en
la vista Cdigo, teclea la etiqueta <a href="#"> antes del texto de cada men
o submen y al final escribe la etiqueta </a>. Ejemplo:
48
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;
background-color:#434343;
}
.nav > li {
float:left;
width:140px;
}
.nav li ul {
display:none;
position:absolute;
min-width: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;
}
49
50
13. Las siguientes propiedades de tipo CSS te ayudarn a definir mejor las
propiedades del men:
Definicin de propiedades de tipo CSS
51
Float: Determina qu lado de otros elementos, como texto, Div PA, tablas,
etc., flotar alrededor de un elemento.
52
Igual para todo: Establece las mismas propiedades de margen para Top,
Right, Bottom y Left, es decir, para las partes superior, derecha, inferior e
izquierda respectivamente del elemento al que se aplica.
Igual para todo: Establece las mismas propiedades de estilo de borde para
Top, Right, Bottom y Left.
Igual para todo: Establece el mismo borde para Top, Right, Bottom y Left.
Igual para todo: Establece el mismo color de borde para Top, Right,
Bottom y Left.
53
54
Scroll:
aade
barras
de
desplazamiento
al
contenedor
UNIDAD
IMGENES.
5.1
Concepto de Imagen.
56
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.
Unidad 5 Imgenes
57
58
Unidad 5 Imgenes
59
60
1
8
12
4
13
10
1
7
1
11
2
6
9
1
Unidad 5 Imgenes
61
2.
3.
62
Unidad 5 Imgenes
63
64
Unidad 5 Imgenes
65
TRABAJOS DE INVESTIGACIN
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.
Unidad 6 Hipervnculos
67
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.
68
Unidad 6 Hipervnculos
69
70
Unidad 6 Hipervnculos
71
72
Unidad 6 Hipervnculos
73
74
Unidad 6 Hipervnculos
75
TRABAJOS DE INVESTIGACIN
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.
77
78
79
1
4
2
7
8
5
80
Para aplicar formato a las celdas, selecciona una celda, rengln o columna y
modifica las propiedades que desees.
6
1
2
4
3
5
8
81
82
ampliado.
Para dividir una celda, haz clic en la celda y selecciona el men Modificar Tabla
Dividir celda.
O desde el botn Dividir celdas
83
84
85
86
87
La seleccin anterior indica que guardar la pgina principal (la llamada pgina
index) que es aquella que contendr todos los marcos dentro del mismo
documento. Nota: se recomienda que se guarde con el nombre de index.html.
Una vez que se haya guardado la pgina principal, el mismo cuadro de dilogo
an no se cerrar ya que tendr seleccionado otro marco para despus
guardarlo. Cuando se haya terminado de guardar todos los marcos, la ventana
Guardar como, se cerrar automticamente.
88
7
6
89
90
TRABAJOS DE INVESTIGACIN
1. Prioridad de formato de tabla en HTML.
2. Eliminar marcos.
3. Comportamientos JavaScript en marcos.
UNIDAD
FORMULARIOS.
8.1
Concepto de Formulario.
92
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.
3
1
6
4
1
1
Unidad 8 Formularios
93
94
7
1
4
6
1
2
Unidad 8 Formularios
95
1
3
96
1
1
3
1
2
1
Unidad 8 Formularios
97
5
5
6
2
7
1
1
98
Unidad 8 Formularios
99
1
1
2
1
3
1
1. Campo de archivo. Especifica
el nombre del objeto de campo de archivo.
100
1
1
2
1
1. Campo oculto. Especifica el nombre
del campo.
Unidad 8 Formularios
101
102
TRABAJOS DE INVESTIGACIN
1. Objetos de formularios dinmicos.
2. Formularios Spry.
3. Comportamientos JavaScript de Dreamweaver CS6.
UNIDAD
CAPAS.
9.1
Concepto de Capa.
104
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.
Unidad 9 Capas
105
4
6
10
7
9
5
2
1. Elemento CSS-P. Indica el nombre de la capa, que puede ser cambiado a travs
del panel Elementos PA o desde el cuadro de texto nombre de la capa.
2. Desb. Controla cmo aparecen los elementos PA en un navegador cuando el
contenido desborda el tamao especificado del elemento PA, y puede tomar los
valores:
VISIBLE. Muestra todo el contenido de la capa, haciendo ms grande la
capa.
HIDDEN. Slo visualiza el contenido de la capa que quepa dentro de ella.
SCROLL. Muestra la barra de desplazamiento, aunque el contenido de la
capa pueda ser visualizado totalmente
AUTO. Muestra la barra de desplazamiento cuando sea necesario.
106
Unidad 9 Capas
107
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 INVESTIGACIN
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
109
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.
110
3.
111
112
Sitate en el lugar donde quieras insertar el archivo SWF y luego lleva a cabo
alguno de estos procedimientos:
A) En la categora Comn del panel Insertar, selecciona Media y haz clic
en el icono SWF.
B) Men Insertar Media
SWF.
2. En el cuadro de dilogo que se
mostrar, selecciona un archivo
SWF (.swf).
3. Guarda el archivo.
113
3. Completa el resto de las opciones del cuadro de dilogo y haz clic en Aceptar.
114