ii
Diseño de Páginas Web (Dreamweaver CS6)
© 2013. Derechos Reservados Daniel Olalde Soto.
ii
Diseño de Páginas Web (Dreamweaver CS6)
© 2013. Derechos Reservados Daniel Olalde Soto.
Contenido
Sobre este libro
iii
…
Usted es libre de:
Copiar, distribuir y comunicar públicamente la presente obra.
Realizar obras derivadas.
Bajo las condiciones siguientes:
Reconocimiento. Reconocimiento. Debe reconocer los créditos de la obra de la manera especificada por el autor o licenciador.
No comercializar. comercializar . No puede utilizar esta obra para fines lucrativos.
Si deseas aportar sugerencias, comentarios, críticas o informar sobre errores, puedes
enviar
un
mensaje
[email protected] ..
[email protected]
a
la
siguiente
dirección
electrónica
iv
Diseño de Páginas Web (Dreamweaver CS6)
© 2013. Derechos Reservados Daniel Olalde Soto.
Contenido
v
CONTENIDO 1
Introducción a Dreamweaver CS6. 1.1.
¿Qué es Dreamweaver?
1 2
1.2. Acceso a Dreamweaver.
2
1.3. Ambiente de Dreamweaver.
3
1.4. Vistas del documento.
4
1.4.1. Vista Código. 1.4.2. Vista Diseño. 1.4.3. Vista Dividir. 1.4.4. Vista En vivo. 1.4.5. Vista Código en vivo. 1.4.6. Vista previa en el navegador.
2
3
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
Área de trabajo en Dreamweaver CS6.
13
2.1. Inspector de propiedades.
14
2.2. Barra de herramientas Documento.
14
2.3. Barra de herramientas Estado.
15
2.4. Barra de herramientas Navegación con navegador.
15
2.5. Panel Insertar.
16
2.6. Panel Estilos CSS.
17
Configurar un sitio en Dreamweaver.
19
3.1. Concepto de Sitio.
20
3.2. Tipos de Sitios en Dreamweaver.
20
vi
4
Diseño de Páginas Web (Dreamweaver CS6)
3.3. Estructura de una Página Web.
21
3.4. Configurar un sitio nuevo.
22
3.5. Configuración de un servidor de prueba.
22
3.6. Cuadro de diálogo Administrar sitios.
24
3.7. Panel Archivos.
25
Formato a la Página Web. 4.1
Propiedades de la página. 4.1.1
Categoría Apariencia (CSS).
4.1.2
Categoría Apariencia (HTML).
4.1.3
Categoría Vínculos (CSS).
4.1.4
Categoría Encabezados (CSS).
4.1.5
Categoría Título / Codificación.
4.1.6
Categoría Imagen de rastreo.
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
37
Formato al texto.
4.7.1
Menú Formato.
4.8 Concepto de Estilo CSS.
40
4.9 Crear estilos CSS.
41
4.9.1
Propiedades CSS.
4.10 Editar estilos CSS.
43
4.11 Vincular estilos CSS.
44
4.12 Menús usando hojas de estilos.
45
© 2013. Derechos Reservados Daniel Olalde Soto.
Contenido
5
6
Imágenes.
vii
55
5.1. Concepto de Imagen.
56
5.2. Insertar imágenes.
56
5.3. Marcadores de posición de imagen.
58
5.4. Propiedades de imágenes.
59
5.5. Imagen de sustitución (Rollover).
61
5.6. Objetos Inteligentes.
62
Hipervínculos.
66
6.1. Concepto de Hipervínculo.
67
6.2. Tipos de rutas de los vínculos.
67
6.2.1. Rutas absolutas. 6.2.2. Rutas relativas al documento. 6.2.3. Rutas relativas a la raíz del sitio.
7
6.3. Crear hipervínculos.
68
6.4. Destino de los hipervínculos.
69
6.5. Anclaje con nombre.
70
6.6. Vínculo a correo electrónico.
71
6.7. Menú de salto.
72
6.8. Zonas interactivas.
74
Diseño de la Página Web.
76
7.1
Concepto de Tabla.
77
7.2
Creación de tablas.
77
7.3
Formato de tablas y celdas.
79
7.4
Insertar filas y columnas.
81
7.5
Eliminar filas y columnas.
82
7.6 Combinar o dividir celdas.
82
7.7
83
Anidar tablas.
7.8 Ordenar tablas.
83
viii
8
Diseño de Páginas Web (Dreamweaver CS6)
7.9 Concepto de marcos.
84
7.10 Crear marcos.
84
7.11 Seleccionar marcos.
86
7.12 Guardar marcos.
86
7.13 Propiedades de los marcos.
88
7.14 Hipervínculos en marcos.
89
Formularios.
91
8.1
Concepto de Formulario.
92
8.2
Crear formularios.
92
8.3 Objetos de los formularios. 8.3.1 Elemento Campo de texto. 8.3.2 Elemento Área de texto. 8.3.3 Elemento Botón. 8.3.4 Elemento Casilla de verificación. 8.3.5 Elemento Botón de opción. 8.3.6 Elemento Seleccionar (Lista/Menú). 8.3.7 Elemento Campo de archivo. 8.3.8 Elemento Campo de imagen. 8.3.9 Elemento Campo oculto.
9
8.4 Validación de formularios aplicando JavaScript.
100
8.5 Validación de formularios usando HTML5.
101
Capas.
103
9.1
Concepto de Capa.
104
9.2
Insertar capas.
104
9.2.1 Etiqueta Div. 9.2.2 Etiqueta DIV de diseño de cuadricula fluida. 9.2.3 Div PA.
© 2013. Derechos Reservados Daniel Olalde Soto.
Contenido
10
ix
9.3 Propiedades de la capas.
105
9.4
107
Hojas de estilos en las capas.
Elementos multimedia. 10.1 Insertar Audio.
108 109
10.1.1 Etiqueta
. 10.1.2 Comando Plug-in. 10.2 Insertar Video.. 10.2.2 Comando Plug-in. 10.3 Archivo SWF. …
. antes del texto de cada menú o submenú y al final escribe la etiqueta . Ejemplo: teclea los siguientes atributos y valores:
class="nav" id="menu"
48
Diseño de Páginas Web (Dreamweaver CS6) 9. Dentro de la etiqueta
tecla los siguiente atributo y valor:[email protected] ). … ; cuando se desea generar el código HTML manualmente se deberá emplear dicha etiqueta y sus respectivos atributos a emplear.. Otra de las etiquetas nuevas de HTML5 es la etiqueta que remplazó a la etiqueta , ambas etiquetas tienen la misma función de insertar al documento un video, lo que llega a cambiar en ambas etiquetas son sus propiedades. 
