Curso dreamweaver

1

Diego Rovira

Dreamweaver CS5

Curso de Iniciación

DreamweaverCS5.CursodeIniciación

2

Dreamweaver CS5. Curso de Iniciación

© Diego Rovira

© De la edición: INFORBOOK’S, S.L.

Se ha puesto el máximo interés en ofrecer al lector una información completa y precisa. Sin embargo, INFORBOOK’S, S.L. no asume ninguna responsabilidad derivada de uso, ni tampoco por cualquier violación de patentes y otros derechos de terceras partes que pudie-ran ocurrir estando este libro destinado a la utilización de aficionados o a la enseñanza. Las marcas o nombres mencionados lo son únicamente a título 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 electrónico, mecánico, reprográfico, magnético o cualquier otro. Asimismo queda prohibida la distribución, alquiler, traducción o exportación sin la autorización previa y por escrito de INFORBOOK’S, S.L.

Editado por: INFORBOOK’S, S.L. C/. Muntaner, 181 08036 BARCELONA 934 391 575 e-mail: [email protected] web: http://www.inforbooks.com

ISBN-13: 978-84-15033-24-0ISBN-10: 84-15033-24-9Depósito legal: B-12015-2011Diseño cubierta: Manel López TamboleoMaquetación: ABISA

IMPRESO EN ESPAÑA - PRINTED IN SPAIN

®®

3

Índice General

1. Introducción a Dreamweaver CS5 .................. 13Novedades de Dreamweaver CS5 ................................................................... 13

2. Instalación de Dreamweaver CS5 ................... 17Requisitos del Sistema y del Hardware ............................................................ 17

Requisitos mínimos para Windows ............................................................. 18Requisitos mínimos para Macintosh ........................................................... 18

Instalación de Dreamweaver CS5 .................................................................... 18Instalación de la aplicación XAMPP ................................................................. 21

3. Primer contacto con Dreamweaver CS5 ......... 25Arranque de Dreamweaver CS5 ........................................................................... 25¿Cómo arrancar Dreamweaver CS5? ................................................................... 25La ventana de Dreamweaver CS5 ........................................................................ 25Uso de la Ayuda de Dreamweaver ........................................................................ 31

4. El entorno de trabajo ..................................... 33La barra de menús ........................................................................................... 33

Menú Archivo............................................................................................... 33Menú Edición............................................................................................... 35Menú Ver ..................................................................................................... 37Menú Insertar .............................................................................................. 40Menú Modificar ............................................................................................ 41Menú Formato ............................................................................................. 42Menú Comandos ......................................................................................... 43Menú Sitio ................................................................................................... 44Menú Ventana ............................................................................................. 45Menú Ayuda ................................................................................................ 46

Uso de los paneles ........................................................................................... 47Cómo visualizar un panel ............................................................................ 47Cómo ocultar un panel ................................................................................ 48Cómo modificar el tamaño de un panel....................................................... 48Cómo cambiar la ubicación de un panel ..................................................... 48


4

5. Introducción a las páginas web ...................... 49Web estática ..................................................................................................... 49

Ventajas e inconvenientes........................................................................... 52Web dinámica ................................................................................................... 52

Ventajas e inconvenientes........................................................................... 54Elementos de una página web ......................................................................... 54

6. La primera página web ................................... 55Crear una página web ...................................................................................... 55

Vista previa de una página .......................................................................... 60Formateo del texto de una página............................................................... 63Formateo de párrafos de una página .......................................................... 72Modificación de las Propiedades de la página ............................................ 76Inserción de una regla horizontal ................................................................ 80

7. Utilización de los estilos ................................. 83Introducción a las hojas de estilo (CSS) .......................................................... 83Definición de los estilos .................................................................................... 85

Reglas CSS ................................................................................................. 87Trabajar con estilos CSS en Dreamweaver ..................................................... 88

Cómo trabajar con un estilo ........................................................................ 90Propiedades de Fuente de estilos .......................................................... 94Propiedades de Fondo de estilos ........................................................... 95Propiedades de Bloque de estilos .......................................................... 95Propiedades de Borde de estilos ........................................................... 96Propiedades de Cuadro de estilos ......................................................... 96Propiedades de Lista de estilos ............................................................. 97Propiedades de Posición de estilos ....................................................... 97Propiedades de Extensiones de estilos ................................................. 98Propiedades de Tablas, Contenido, Comillas de estilos ........................ 98

Cómo averiguar las propiedades de un estilo ............................................. 99Cómo añadir una nueva regla (estilo) ......................................................... 99

Definición de las propiedades CSS ...................................................... 100Cómo modificar una regla (estilo) ............................................................. 106Cómo eliminar una regla (estilo) ............................................................... 107Cómo añadir una regla en una hoja externa ............................................. 108

Cómo adjuntar una hoja de estilo externa ...................................................... 110Cómo validar el código CSS ...........................................................................111

8. Utilización de imágenes ................................ 115Tipos de imágenes ......................................................................................... 115

Imágenes vectoriales ................................................................................ 115Imágenes de mapa de bits (bitmaps) ........................................................ 116Resolución de un monitor.......................................................................... 117Resolución de una imagen ........................................................................ 118

5

Formatos de imagen ...................................................................................... 119GIF (Graphic Interchange Format, Formato de Intercambio de Gráficos) .. 119JPEG (Joint Photographic Experts Group, Grupo de Conjunto de Expertos Fotgráficos) ........................................................................... 119PNG (Portable Network Group, Grupo de Redes Portátiles) ............... 120

El color ........................................................................................................... 120Trabajar con imágenes ................................................................................... 121

Insertar imágenes...................................................................................... 122Imágenes de sustitución............................................................................ 127Mapas de imágenes .................................................................................. 129Barras de navegación ............................................................................... 133Animación de imágenes ............................................................................ 138

9. Utilizar tablas en una página web ................. 143Trabajar con tablas ......................................................................................... 143

Creación de una página web con tablas ................................................... 144Cómo seleccionar los elementos de una tabla.......................................... 148

Selección de toda la tabla .................................................................... 148Selección de una o varias filas y columnas ......................................... 148Selección de una columna ................................................................... 149Selección de una celda ........................................................................ 149Selección de celdas adyacentes .......................................................... 149Selección de celdas no adyacentes ..................................................... 149

Cómo combinar celdas.............................................................................. 150Cómo insertar filas y/o columnas .............................................................. 152

Inserción de una fila o columna ........................................................... 152Inserción de más de una fila o columna ............................................... 153

Modificar las propiedades de la tabla ........................................................ 154Cómo eliminar una fila y/o columna .......................................................... 160Cómo dividir celdas ................................................................................... 160

Creación de las páginas vinculadas ............................................................... 161Importación de datos ...................................................................................... 166

Importar XML en plantilla... ....................................................................... 166Importar Datos de tabla... .......................................................................... 166Importar Documento de Word... ................................................................ 167Importar Documento de Excel... ................................................................ 167Modificación de las propiedades de los vínculos ...................................... 171

10. Trabajar con capas .................................... 173¿Qué son las capas? ..................................................................................... 173Etiquetas Div .................................................................................................. 174

Inserción de etiquetas Div ......................................................................... 174Modificación de etiquetas Div.................................................................... 175Eliminación de etiquetas Div ..................................................................... 175

Etiquetas Div PA ............................................................................................. 175Inserción de etiquetas Div PA .................................................................... 175


6

Modificación de etiquetas Div PA .............................................................. 176Eliminación de etiquetas Div PA ................................................................ 176

El entorno Spry ............................................................................................... 176Efectos que puede utilizar con Spry .......................................................... 176

Ejemplo práctico con capas ........................................................................... 177Definición de los estilos CSS para las estiquetas Div PA .......................... 178Definición de las capas Div ....................................................................... 181

Aplicación de un efecto Spry ................................................................ 184Definición del resto de las capas............................................................... 187

Spry Widgets .................................................................................................. 193¿Para qué sirve un Spry Widget? ............................................................. 193Cómo insertar un Spry Widget .................................................................. 194Barra de menús Spry ................................................................................ 195

Configuración de un menú Spry ........................................................... 196Ejemplo de menú Spry .............................................................................. 197Panel de fichas Spry ................................................................................. 198

Configuración de un panel de fichas Spry ........................................... 198Ejemplo de panel de fichas Spry ............................................................... 201Acordeón Spry........................................................................................... 205

Configuración de un Acordeón Spry .................................................... 206Ejemplo de Acordeón Spry ........................................................................ 206Panel que puede contraerse de Spry ........................................................ 209

Configuración de un panel que puede contraerse de Spry .................. 209Ejemplo de panel que puede contraerse de Spry ..................................... 210Información sobre herramienta de Spry .................................................... 210

Configuración de información sobre herramienta de Spry ................... 211Ejemplo de información sobre herramienta de Spry ................................. 212

11. Trabajar con formularios ........................... 217Cómo crear un formulario HTML .................................................................... 217Campo de texto .............................................................................................. 221Campo oculto ................................................................................................. 223Área de texto .................................................................................................. 224Casilla de verificación ..................................................................................... 225Grupo de casillas de verificación .................................................................... 226Botón de opción ............................................................................................. 227Grupo de opción ............................................................................................. 228Lista/menú ...................................................................................................... 229Menú de salto ................................................................................................. 231Campo de imagen .......................................................................................... 233Campo de archivo .......................................................................................... 234Botón .............................................................................................................. 235Etiqueta .......................................................................................................... 236Juego de campos ........................................................................................... 237Campo de texto de validación Spry ................................................................ 237Área de texto de validación de Spry ............................................................... 240Casilla de verificación de validación de Spry ................................................. 242

7

Selección de validación de Spry .................................................................... 243Contraseña de validación de Spry ................................................................. 245Confirmación de validación de Spry ............................................................... 247Grupo de opciones de validación de Spry ...................................................... 249Creación de un formulario .............................................................................. 250

Inserción del formulario ............................................................................. 251Inserción de los datos del comprador ....................................................... 253Inserción de los datos del libro .................................................................. 257Inserción del cuestionario.......................................................................... 259

Lista de Eventos ............................................................................................. 261

12. Trabajar con marcos .................................. 263Ventajas e inconvenientes de los marcos ...................................................... 264

Ventajas..................................................................................................... 264Inconvenientes .......................................................................................... 264

Cómo crear marcos ........................................................................................ 265Creación de una página con marcos .............................................................. 267

Propiedades del conjunto de marcos ........................................................ 268Cómo almacenar un conjunto de marcos ....................................................... 270

Almacenar un archivo de un conjunto de marcos ..................................... 270Almacenar todos los archivos asociados a un documento ....................... 270

Diseño del marco ........................................................................................... 271Diseño del marco Cabecera ...................................................................... 271Propiedades de un marco ......................................................................... 272Diseño del marco Opciones ...................................................................... 274Diseño del marco Contenido ..................................................................... 276

Eliminación de un marco ................................................................................ 281Cambio del tamaño de un marco ................................................................... 281

13. Multimedia con Dreamweaver ..................... 283Aspectos importantes de los archivos de vídeo ............................................. 283

Reproductores multimedia ........................................................................ 284Cómo incorporar archivos de vídeo a una página .......................................... 284

Vinculación de un vídeo ............................................................................ 285Incorporación de un vídeo ......................................................................... 286

Cómo incorporar archivos de sonido a una página ........................................ 288Vinculación de un archivo de sonido ......................................................... 289Incorporación de un archivo de sonido ..................................................... 289

14. Definición de un sitio web .......................... 293Aspectos a tener en cuenta a la hora de diseñar un Sitio .............................. 293Sitios en Dreamweaver .................................................................................. 294Cómo definir un sitio web ............................................................................... 295

Configuración de las opciones para un acceso FTP ................................ 296Configuración de las opciones para un acceso Local/red ......................... 298


8

Planteamiento de un sitio web ....................................................................... 301Creación de un sitio web ................................................................................ 302

Sincronización de archivos........................................................................ 307Comprobación de vínculos ........................................................................ 308Informe del sitio ......................................................................................... 309

Probar un sitio web ........................................................................................ 312Aspectos finales a tener en cuenta al crear un sitio web en Dreamweaver ..........313

15. Trabajar con plantillas ............................... 315Las plantillas ................................................................................................... 315Cómo crear una plantilla ................................................................................ 317

Creación de una plantilla nueva ................................................................ 317Creación de una plantilla a partir de un documento existente .................. 319

Cómo definir regiones editables ..................................................................... 320Cómo crear regiones repetidas ...................................................................... 321

Cómo insertar una tabla repetida .............................................................. 322Cómo crear un atributo de etiqueta editable .................................................. 323Cómo crear una región opcional .................................................................... 324

Cómo crear una región opcional no editable............................................. 325Cómo crear una región opcional editable.................................................. 326

Plantillas anidadas ......................................................................................... 326Cómo crear una plantilla anidada ................................................................... 327Cómo quitar formato de plantilla .................................................................... 327Ejercicio práctico con plantillas ...................................................................... 327

Creación de la plantilla .............................................................................. 328Definición de una región con atributo de etiqueta editable ....................... 329

Cómo modificar un atributo de etiqueta editable .................................. 333Definición de una región editable .............................................................. 334Definición de una región repetida.............................................................. 335Definición de una región opcional editable ............................................... 336

Uso de una plantilla ........................................................................................ 338Cómo aplicar plantillas a documentos existentes .......................................... 347

Ejemplo práctico ........................................................................................ 348

16. Introducción a las Bases de Datos ............. 351¿Qué es una Base de datos? ......................................................................... 351Uso de las Bases de datos relacionales ........................................................ 352Claves de una base de datos ......................................................................... 353

Claves externas......................................................................................... 354Tipos de relación ............................................................................................ 354Reglas de integridad ...................................................................................... 356Normalización de una base de datos ............................................................. 356

Primera forma normal................................................................................ 356Segunda forma normal .............................................................................. 358Tercera forma normal ................................................................................ 359Cuarta forma normal ................................................................................. 360Quinta forma normal.................................................................................. 360

9

17. Introducción al lenguaje SQL ..................... 363Sentencias SQL .............................................................................................. 364

Sentencia SELECT ................................................................................... 365Cláusulas SQL ..................................................................................... 365ORDER BY........................................................................................... 365GROUP BY .......................................................................................... 366WHERE ................................................................................................ 367Operadores SQL .................................................................................. 367HAVING ................................................................................................ 369Funciones SQL ..................................................................................... 370

Sentencia CREATE ................................................................................... 371Sentencia INSERT .................................................................................... 372Sentencia UPDATE ................................................................................... 373Sentencia DELETE ................................................................................... 373Sentencia INNER JOIN ............................................................................. 374

Prácticas de SQL ............................................................................................ 374Soluciones a las prácticas anteriores ........................................................ 380

18. Trabajar con Bases de Datos ...................... 385Creación de la base de datos ......................................................................... 385Cómo configurar la base de datos ................................................................. 391Cómo conectar una base de datos ................................................................ 393Cómo vincular datos a una página PHP ........................................................ 397

19. Adobe Bridge CS5 ...................................... 403¿Qué es Bridge? ............................................................................................ 403Ejecutar Bridge ............................................................................................... 403

Menú Archivo............................................................................................. 404Menú Editar ............................................................................................... 406Menú Vista ................................................................................................ 408Menú Pilas................................................................................................. 410Menú Etiqueta ........................................................................................... 411Menú Herramientas ................................................................................... 412Menú Ventana ........................................................................................... 413

Paneles .......................................................................................................... 413Editar los metadatos.................................................................................. 415Añadir palabras clave a archivos .............................................................. 417Añadir un conjunto de palabras clave a archivos ...................................... 418Eliminar palabras clave de un archivo....................................................... 418Crear un nuevo conjunto de palabras clave .............................................. 418Crear una nueva palabra clave ................................................................. 419Eliminar una palabra clave ........................................................................ 419

Ordenar .......................................................................................................... 419Buscar ............................................................................................................ 420


10

20. Utilización de Fireworks ............................. 421¿Qué es Fireworks? ....................................................................................... 421¿Para qué sirve? ............................................................................................ 421Creación de un archivo desde Fireworks ....................................................... 421Exportar una imagen de Fireworks ................................................................ 425Inserción HTML de Fireworks ......................................................................... 426Definición de un editor externo ....................................................................... 427Editar una imagen desde Dreamweaver ........................................................ 427Creación de una imagen animada ................................................................. 428Creación de un Menú emergente ................................................................... 429

21. Diseño de una página web .......................... 435Consejos para diseñar una web ..................................................................... 435Descripción del proyecto ................................................................................ 439Creación de la base de datos ......................................................................... 440

Importar la base de datos.......................................................................... 441Definición del sitio .......................................................................................... 442Creación de la página de inicio ...................................................................... 443Creación de la página de metodología ........................................................... 450Creación de la página de cursos .................................................................... 451Creación de la página principal del catálogo .................................................. 459

Creación de la página del catálogo ........................................................... 461Creación del archivo PHP basado en plantilla ..................................... 461Creación de la página de contenido del catálogo ................................ 466Creación de la página + información.................................................... 468

Creación del formulario de pedidos ................................................................ 472Creación de la página de contacto ................................................................. 482Creación del buscador ................................................................................... 483Comprobación del sitio ................................................................................... 490

22. Ejercicios prácticos en PHP ....................... 497Ejercicios ........................................................................................................ 497Soluciones de los ejercicios ........................................................................... 500

11

Cómo descargar los ejemplos de Internet

LoselementosnecesariospararealizarlosejerciciosquesedesarrollanenestelibroylosejemploscompletoslosencontraráenlawebdeInforbook’s.

Paradescargarlosasuordenadordeberárealizarlospasossiguientes:

1. Abrir el navegador y teclear la dirección: http://www.inforbooks.com

A continuación, se mostra-rá la página web de la editorial:

2. Hacer clic sobre el botón Libros onli-ne.

Semostrará la páginaLibros online en la queaparecen lasmateriasdis-ponibles.

3. Efectuar un clic en el enlace Diseño Web.

Apareceráelcontenidodeeseenlace.

4. Hacer clic en el enlace Dreamwea-ver.

Semostrarán los libros de esa cate-goría.

5. Realizar un clic en el enlace del libro Dreamweaver CS5. Curso de Iniciación.


12

Enlapáginaqueaparecerá,encontraráinformaciónsobreellibroyelenlacequelemostramosenlafiguradeladerecha:

6. Hacer clic en el enlace.

Seguidamente,podráveruncuadrodediálogodesdeelquerealizarlades-carga.

Unavezdescargadoenlacarpetaqueustedhayaelegido,apareceráunarchivode tipo .zip, que deberá descomprimirparaaccederasucontenido.

SinodisponedelaaplicaciónWinzip paradescomprimirelarchivodescargadodeInternet,puededirigirsealapáginaweb:http://www.winzip.comybajarladesdeallí.

Curso dreamweaver

Software

Transcript of Curso dreamweaver