Dreamweaver

CS5
Curso de Iniciacin

Diego Rovira
1

Dreamweaver CS5. Curso de Iniciacin

Dreamweaver CS5. Curso de Iniciacin

Diego Rovira
De la edicin: INFORBOOKS, S.L.
Se ha puesto el mximo inters en ofrecer al lector una informacin completa y precisa.
Sin embargo, INFORBOOKS, S.L. no asume ninguna responsabilidad derivada de uso, ni
tampoco por cualquier violacin de patentes y otros derechos de terceras partes que pudieran ocurrir estando este libro destinado a la utilizacin de aficionados o a la enseanza. Las
marcas o nombres mencionados lo son nicamente a ttulo informativo, siendo propiedad
de sus legales registradores.
Reservados todos los derechos.
Ninguna parte de este libro puede ser reproducida, grabada en sistema de almacenamiento
o transmitida en forma alguna ni por cualquier procedimiento, ya sea electrnico, mecnico,
reprogrfico, magntico o cualquier otro. Asimismo queda prohibida la distribucin, alquiler,
traduccin o exportacin sin la autorizacin previa y por escrito de INFORBOOKS, S.L.
Editado por:

INFORBOOKS, S.L.
C/. Muntaner, 181
08036 BARCELONA
934 391 575
e-mail: info@inforbooks.com
web: http://www.inforbooks.com

ISBN-13: 978-84-15033-24-0
ISBN-10: 84-15033-24-9
Depsito legal: B-12015-2011
Diseo cubierta: Manel Lpez Tamboleo
Maquetacin: ABISA

IMPRESO EN ESPAA - PRINTED IN SPAIN

ndice General
1. Introduccin a Dreamweaver CS5................... 13
Novedades de Dreamweaver CS5.................................................................... 13

2. Instalacin de Dreamweaver CS5.................... 17

Requisitos del Sistema y del Hardware............................................................. 17

Requisitos mnimos para Windows.............................................................. 18
Requisitos mnimos para Macintosh............................................................ 18
Instalacin de Dreamweaver CS5..................................................................... 18
Instalacin de la aplicacin XAMPP.................................................................. 21

3. Primer contacto con Dreamweaver CS5.......... 25

Arranque de Dreamweaver CS5............................................................................ 25
Cmo arrancar Dreamweaver CS5?.................................................................... 25
La ventana de Dreamweaver CS5......................................................................... 25
Uso de la Ayuda de Dreamweaver......................................................................... 31

4. El entorno de trabajo...................................... 33
La barra de mens............................................................................................ 33
Men Archivo............................................................................................... 33
Men Edicin............................................................................................... 35
Men Ver...................................................................................................... 37
Men Insertar............................................................................................... 40
Men Modificar............................................................................................. 41
Men Formato.............................................................................................. 42
Men Comandos.......................................................................................... 43
Men Sitio.................................................................................................... 44
Men Ventana.............................................................................................. 45
Men Ayuda................................................................................................. 46
Uso de los paneles............................................................................................ 47
Cmo visualizar un panel............................................................................. 47
Cmo ocultar un panel................................................................................. 48
Cmo modificar el tamao de un panel....................................................... 48
Cmo cambiar la ubicacin de un panel...................................................... 48

Dreamweaver CS5. Curso de Iniciacin

5. Introduccin a las pginas web....................... 49

Web esttica...................................................................................................... 49
Ventajas e inconvenientes........................................................................... 52
Web dinmica.................................................................................................... 52
Ventajas e inconvenientes........................................................................... 54
Elementos de una pgina web.......................................................................... 54

6. La primera pgina web.................................... 55

Crear una pgina web....................................................................................... 55
Vista previa de una pgina........................................................................... 60
Formateo del texto de una pgina............................................................... 63
Formateo de prrafos de una pgina........................................................... 72
Modificacin de las Propiedades de la pgina............................................. 76
Insercin de una regla horizontal................................................................. 80

7. Utilizacin de los estilos.................................. 83

Introduccin a las hojas de estilo (CSS)........................................................... 83
Definicin de los estilos..................................................................................... 85
Reglas CSS.................................................................................................. 87
Trabajar con estilos CSS en Dreamweaver...................................................... 88
Cmo trabajar con un estilo......................................................................... 90
Propiedades de Fuente de estilos........................................................... 94
Propiedades de Fondo de estilos............................................................ 95
Propiedades de Bloque de estilos........................................................... 95
Propiedades de Borde de estilos............................................................ 96
Propiedades de Cuadro de estilos.......................................................... 96
Propiedades de Lista de estilos.............................................................. 97
Propiedades de Posicin de estilos........................................................ 97
Propiedades de Extensiones de estilos.................................................. 98
Propiedades de Tablas, Contenido, Comillas de estilos......................... 98
Cmo averiguar las propiedades de un estilo.............................................. 99
Cmo aadir una nueva regla (estilo).......................................................... 99
Definicin de las propiedades CSS....................................................... 100
Cmo modificar una regla (estilo).............................................................. 106
Cmo eliminar una regla (estilo)................................................................ 107
Cmo aadir una regla en una hoja externa.............................................. 108
Cmo adjuntar una hoja de estilo externa....................................................... 110
Cmo validar el cdigo CSS............................................................................111

8. Utilizacin de imgenes................................. 115

Tipos de imgenes.......................................................................................... 115

Imgenes vectoriales................................................................................. 115
Imgenes de mapa de bits (bitmaps)......................................................... 116
Resolucin de un monitor.......................................................................... 117
Resolucin de una imagen......................................................................... 118


Formatos de imagen....................................................................................... 119
GIF (Graphic Interchange Format, Formato de Intercambio de Grficos)... 119
JPEG (Joint Photographic Experts Group, Grupo de Conjunto de
Expertos Fotgrficos)............................................................................ 119
PNG (Portable Network Group, Grupo de Redes Porttiles)................ 120
El color............................................................................................................ 120
Trabajar con imgenes.................................................................................... 121
Insertar imgenes...................................................................................... 122
Imgenes de sustitucin............................................................................ 127
Mapas de imgenes................................................................................... 129
Barras de navegacin................................................................................ 133
Animacin de imgenes............................................................................. 138

9. Utilizar tablas en una pgina web.................. 143

Trabajar con tablas.......................................................................................... 143

Creacin de una pgina web con tablas.................................................... 144
Cmo seleccionar los elementos de una tabla.......................................... 148
Seleccin de toda la tabla..................................................................... 148
Seleccin de una o varias filas y columnas.......................................... 148
Seleccin de una columna.................................................................... 149
Seleccin de una celda......................................................................... 149
Seleccin de celdas adyacentes........................................................... 149
Seleccin de celdas no adyacentes...................................................... 149
Cmo combinar celdas.............................................................................. 150
Cmo insertar filas y/o columnas............................................................... 152
Insercin de una fila o columna............................................................ 152
Insercin de ms de una fila o columna................................................ 153
Modificar las propiedades de la tabla......................................................... 154
Cmo eliminar una fila y/o columna........................................................... 160
Cmo dividir celdas.................................................................................... 160
Creacin de las pginas vinculadas................................................................ 161
Importacin de datos....................................................................................... 166
Importar XML en plantilla........................................................................... 166
Importar Datos de tabla.............................................................................. 166
Importar Documento de Word.................................................................... 167
Importar Documento de Excel.................................................................... 167
Modificacin de las propiedades de los vnculos....................................... 171

10. Trabajar con capas..................................... 173

Qu son las capas?...................................................................................... 173

Etiquetas Div................................................................................................... 174
Insercin de etiquetas Div.......................................................................... 174
Modificacin de etiquetas Div.................................................................... 175
Eliminacin de etiquetas Div...................................................................... 175
Etiquetas Div PA.............................................................................................. 175
Insercin de etiquetas Div PA..................................................................... 175

Dreamweaver CS5. Curso de Iniciacin

Modificacin de etiquetas Div PA............................................................... 176
Eliminacin de etiquetas Div PA................................................................. 176
El entorno Spry................................................................................................ 176
Efectos que puede utilizar con Spry........................................................... 176
Ejemplo prctico con capas............................................................................ 177
Definicin de los estilos CSS para las estiquetas Div PA........................... 178
Definicin de las capas Div........................................................................ 181
Aplicacin de un efecto Spry................................................................. 184
Definicin del resto de las capas............................................................... 187
Spry Widgets................................................................................................... 193
Para qu sirve un Spry Widget?.............................................................. 193
Cmo insertar un Spry Widget................................................................... 194
Barra de mens Spry................................................................................. 195
Configuracin de un men Spry............................................................ 196
Ejemplo de men Spry............................................................................... 197
Panel de fichas Spry.................................................................................. 198
Configuracin de un panel de fichas Spry............................................ 198
Ejemplo de panel de fichas Spry................................................................ 201
Acorden Spry........................................................................................... 205
Configuracin de un Acorden Spry..................................................... 206
Ejemplo de Acorden Spry......................................................................... 206
Panel que puede contraerse de Spry......................................................... 209
Configuracin de un panel que puede contraerse de Spry................... 209
Ejemplo de panel que puede contraerse de Spry...................................... 210
Informacin sobre herramienta de Spry..................................................... 210
Configuracin de informacin sobre herramienta de Spry.................... 211
Ejemplo de informacin sobre herramienta de Spry.................................. 212

11. Trabajar con formularios............................ 217

Cmo crear un formulario HTML..................................................................... 217

Campo de texto............................................................................................... 221
Campo oculto.................................................................................................. 223
rea de texto................................................................................................... 224
Casilla de verificacin...................................................................................... 225
Grupo de casillas de verificacin..................................................................... 226
Botn de opcin.............................................................................................. 227
Grupo de opcin.............................................................................................. 228
Lista/men....................................................................................................... 229
Men de salto.................................................................................................. 231
Campo de imagen........................................................................................... 233
Campo de archivo........................................................................................... 234
Botn............................................................................................................... 235
Etiqueta........................................................................................................... 236
Juego de campos............................................................................................ 237
Campo de texto de validacin Spry................................................................. 237
rea de texto de validacin de Spry................................................................ 240
Casilla de verificacin de validacin de Spry.................................................. 242


Seleccin de validacin de Spry..................................................................... 243
Contrasea de validacin de Spry.................................................................. 245
Confirmacin de validacin de Spry................................................................ 247
Grupo de opciones de validacin de Spry....................................................... 249
Creacin de un formulario............................................................................... 250
Insercin del formulario.............................................................................. 251
Insercin de los datos del comprador........................................................ 253
Insercin de los datos del libro................................................................... 257
Insercin del cuestionario.......................................................................... 259
Lista de Eventos.............................................................................................. 261

12. Trabajar con marcos................................... 263

Ventajas e inconvenientes de los marcos....................................................... 264

Ventajas..................................................................................................... 264
Inconvenientes........................................................................................... 264
Cmo crear marcos......................................................................................... 265
Creacin de una pgina con marcos............................................................... 267
Propiedades del conjunto de marcos......................................................... 268
Cmo almacenar un conjunto de marcos........................................................ 270
Almacenar un archivo de un conjunto de marcos...................................... 270
Almacenar todos los archivos asociados a un documento........................ 270
Diseo del marco............................................................................................ 271
Diseo del marco Cabecera....................................................................... 271
Propiedades de un marco.......................................................................... 272
Diseo del marco Opciones....................................................................... 274
Diseo del marco Contenido...................................................................... 276
Eliminacin de un marco................................................................................. 281
Cambio del tamao de un marco.................................................................... 281

13. Multimedia con Dreamweaver...................... 283

Aspectos importantes de los archivos de vdeo.............................................. 283
Reproductores multimedia......................................................................... 284
Cmo incorporar archivos de vdeo a una pgina........................................... 284
Vinculacin de un vdeo............................................................................. 285
Incorporacin de un vdeo.......................................................................... 286
Cmo incorporar archivos de sonido a una pgina......................................... 288
Vinculacin de un archivo de sonido.......................................................... 289
Incorporacin de un archivo de sonido...................................................... 289

14. Definicin de un sitio web........................... 293

Aspectos a tener en cuenta a la hora de disear un Sitio............................... 293

Sitios en Dreamweaver................................................................................... 294
Cmo definir un sitio web................................................................................ 295
Configuracin de las opciones para un acceso FTP . ............................... 296
Configuracin de las opciones para un acceso Local/red.......................... 298

Dreamweaver CS5. Curso de Iniciacin

Planteamiento de un sitio web........................................................................ 301
Creacin de un sitio web................................................................................. 302
Sincronizacin de archivos........................................................................ 307
Comprobacin de vnculos......................................................................... 308
Informe del sitio.......................................................................................... 309
Probar un sitio web......................................................................................... 312
Aspectos finales a tener en cuenta al crear un sitio web en Dreamweaver...........313

15. Trabajar con plantillas................................ 315

Las plantillas.................................................................................................... 315
Cmo crear una plantilla................................................................................. 317
Creacin de una plantilla nueva................................................................. 317
Creacin de una plantilla a partir de un documento existente................... 319
Cmo definir regiones editables...................................................................... 320
Cmo crear regiones repetidas....................................................................... 321
Cmo insertar una tabla repetida............................................................... 322
Cmo crear un atributo de etiqueta editable................................................... 323
Cmo crear una regin opcional..................................................................... 324
Cmo crear una regin opcional no editable............................................. 325
Cmo crear una regin opcional editable.................................................. 326
Plantillas anidadas.......................................................................................... 326
Cmo crear una plantilla anidada.................................................................... 327
Cmo quitar formato de plantilla..................................................................... 327
Ejercicio prctico con plantillas....................................................................... 327
Creacin de la plantilla............................................................................... 328
Definicin de una regin con atributo de etiqueta editable........................ 329
Cmo modificar un atributo de etiqueta editable................................... 333
Definicin de una regin editable............................................................... 334
Definicin de una regin repetida.............................................................. 335
Definicin de una regin opcional editable................................................ 336
Uso de una plantilla......................................................................................... 338
Cmo aplicar plantillas a documentos existentes........................................... 347
Ejemplo prctico......................................................................................... 348

16. Introduccin a las Bases de Datos.............. 351

Qu es una Base de datos?.......................................................................... 351
Uso de las Bases de datos relacionales......................................................... 352
Claves de una base de datos.......................................................................... 353
Claves externas......................................................................................... 354
Tipos de relacin............................................................................................. 354
Reglas de integridad....................................................................................... 356
Normalizacin de una base de datos.............................................................. 356
Primera forma normal................................................................................ 356
Segunda forma normal............................................................................... 358
Tercera forma normal................................................................................. 359
Cuarta forma normal.................................................................................. 360
Quinta forma normal.................................................................................. 360

17. Introduccin al lenguaje SQL...................... 363

Sentencias SQL............................................................................................... 364
Sentencia SELECT.................................................................................... 365
Clusulas SQL...................................................................................... 365
ORDER BY........................................................................................... 365
GROUP BY........................................................................................... 366
WHERE................................................................................................. 367
Operadores SQL................................................................................... 367
HAVING................................................................................................. 369
Funciones SQL...................................................................................... 370
Sentencia CREATE.................................................................................... 371
Sentencia INSERT..................................................................................... 372
Sentencia UPDATE.................................................................................... 373
Sentencia DELETE.................................................................................... 373
Sentencia INNER JOIN.............................................................................. 374
Prcticas de SQL............................................................................................. 374
Soluciones a las prcticas anteriores......................................................... 380

18. Trabajar con Bases de Datos....................... 385

Creacin de la base de datos.......................................................................... 385
Cmo configurar la base de datos.................................................................. 391
Cmo conectar una base de datos................................................................. 393
Cmo vincular datos a una pgina PHP......................................................... 397

19. Adobe Bridge CS5....................................... 403

Qu es Bridge?............................................................................................. 403
Ejecutar Bridge................................................................................................ 403
Men Archivo............................................................................................. 404
Men Editar................................................................................................ 406
Men Vista................................................................................................. 408
Men Pilas................................................................................................. 410
Men Etiqueta............................................................................................ 411
Men Herramientas.................................................................................... 412
Men Ventana............................................................................................ 413
Paneles........................................................................................................... 413
Editar los metadatos.................................................................................. 415
Aadir palabras clave a archivos............................................................... 417
Aadir un conjunto de palabras clave a archivos....................................... 418
Eliminar palabras clave de un archivo....................................................... 418
Crear un nuevo conjunto de palabras clave............................................... 418
Crear una nueva palabra clave.................................................................. 419
Eliminar una palabra clave......................................................................... 419
Ordenar........................................................................................................... 419
Buscar............................................................................................................. 420

Dreamweaver CS5. Curso de Iniciacin

20. Utilizacin de Fireworks.............................. 421

Qu es Fireworks?........................................................................................ 421
Para qu sirve?............................................................................................. 421
Creacin de un archivo desde Fireworks........................................................ 421
Exportar una imagen de Fireworks................................................................. 425
Insercin HTML de Fireworks.......................................................................... 426
Definicin de un editor externo........................................................................ 427
Editar una imagen desde Dreamweaver......................................................... 427
Creacin de una imagen animada.................................................................. 428
Creacin de un Men emergente.................................................................... 429

21. Diseo de una pgina web........................... 435

Consejos para disear una web...................................................................... 435
Descripcin del proyecto................................................................................. 439
Creacin de la base de datos.......................................................................... 440
Importar la base de datos.......................................................................... 441
Definicin del sitio........................................................................................... 442
Creacin de la pgina de inicio....................................................................... 443
Creacin de la pgina de metodologa............................................................ 450
Creacin de la pgina de cursos..................................................................... 451
Creacin de la pgina principal del catlogo................................................... 459
Creacin de la pgina del catlogo............................................................ 461
Creacin del archivo PHP basado en plantilla...................................... 461
Creacin de la pgina de contenido del catlogo................................. 466
Creacin de la pgina + informacin.................................................... 468
Creacin del formulario de pedidos................................................................. 472
Creacin de la pgina de contacto.................................................................. 482
Creacin del buscador.................................................................................... 483
Comprobacin del sitio.................................................................................... 490

22. Ejercicios prcticos en PHP........................ 497

Ejercicios......................................................................................................... 497
Soluciones de los ejercicios............................................................................ 500

10

Cmo descargar los

ejemplos de Internet
Los elementos necesarios para realizar los ejercicios que se desarrollan en este
libro y los ejemplos completos los encontrar en la web de Inforbooks.
Para descargarlos a su ordenador deber realizar los pasos siguientes:

1.

Abrir el navegador y teclear la direccin: http://www.inforbooks.com

A continuacin, se mostrar la pgina web de la editorial:

2.

Hacer clic sobre el

botn Libros online.

Se mostrar la pgina
Libros online en la que
aparecen las materias disponibles.
3.

Efectuar un clic en el
enlace Diseo Web.
Aparecer el contenido de ese enlace.
4.

Hacer clic en el enlace Dreamweaver.

Se mostrarn los libros de esa categora.

5.

Realizar un clic en el enlace del

libro Dreamweaver CS5. Curso de
Iniciacin.

11

Dreamweaver CS5. Curso de Iniciacin

En la pgina que aparecer, encontrar informacin sobre
el libro y el enlace que le mostramos en la figura de la derecha:
6.

Hacer clic en el enlace.

Seguidamente, podr ver un cuadro
de dilogo desde el que realizar la descarga.
Una vez descargado en la carpeta que
usted haya elegido, aparecer un archivo
de tipo .zip, que deber descomprimir
para acceder a su contenido.
Si no dispone de la aplicacin Winzip
para descomprimir el archivo descargado
de Internet, puede dirigirse a la pgina
web: http://www.winzip.com y bajarla
desde all.

12