docConsultar índice
download 
Demanda Transcripción
Consultar índice
DREAMWEAVER CS6 Curso de Iniciación Diego Rovira 1 Dreamweaver CS6. Curso de Iniciación DREAMWEAVER ® CS6. 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 pudieran 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-57-8 ISBN-10: 84-15033-57-5 Depósito legal: B-5782-2013 Diseño cubierta: Manel López Tamboleo Maquetación: ServiDOC S.L. IMPRESO EN ESPAÑA - PRINTED IN SPAIN 2 Índice General 1. Introducción a Dreamweaver CS6............... 13 Novedades de Dreamweaver CS6.................................................................... 13 2. Instalación de Dreamweaver CS6................ 17 Requisitos del Sistema y del Hardware............................................................. 17 Requisitos mínimos para Windows.............................................................. 17 Requisitos mínimos para Macintosh............................................................ 18 Instalación de Dreamweaver CS6..................................................................... 18 Instalación de la aplicación XAMPP.................................................................. 20 3. Primer contacto con Dreamweaver CS6..... 25 Arranque de Dreamweaver CS6....................................................................... 25 ¿Cómo arrancar Dreamweaver CS6?............................................................... 25 La ventana de Dreamweaver CS6.................................................................... 25 Uso de la Ayuda de Dreamweaver.................................................................... 31 4. El entorno de trabajo..................................... 33 La barra de menús............................................................................................ 33 Menú Archivo............................................................................................... 33 Menú Edición............................................................................................... 35 Menú Ver...................................................................................................... 37 Menú Insertar............................................................................................... 39 Menú Modificar............................................................................................. 41 Menú Formato.............................................................................................. 42 Menú Comandos.......................................................................................... 43 Menú Sitio.................................................................................................... 44 Menú Ventana.............................................................................................. 45 Menú Ayuda................................................................................................. 47 Uso de los paneles............................................................................................ 47 Cómo visualizar un panel............................................................................. 48 Cómo ocultar un panel................................................................................. 48 Cómo modificar el tamaño de un panel....................................................... 48 Cómo cambiar la ubicación de un panel...................................................... 48 3 Dreamweaver CS6. Curso de Iniciación 5. Introducción a las páginas web................... 51 Web estática...................................................................................................... 51 Ventajas e inconvenientes........................................................................... 54 Web dinámica............................................................................................... 54 Ventajas e inconvenientes........................................................................... 56 Elementos de una página web.......................................................................... 56 6. La primera página web................................. 57 Crear una página web....................................................................................... 57 Vista previa de una página........................................................................... 64 Formateo del texto de una página............................................................... 65 Formateo de párrafos de una página........................................................... 74 Modificación de las Propiedades de la página............................................. 78 Inserción de una regla horizontal................................................................. 82 7. Utilización de los estilos................................. 87 Introducción a las hojas de estilo (CSS)............................................................................87 Definición de los estilos..................................................................................... 89 Reglas CSS....................................................................................................... 91 Trabajar con estilos CSS en Dreamweaver...................................................... 92 Cómo trabajar con un estilo......................................................................... 94 Propiedades de Fuente de estilos............................................................. 98 Propiedades de Fondo de estilos............................................................... 99 Propiedades de Bloque de estilos.............................................................. 99 Propiedades de Borde de estilos.............................................................. 100 Propiedades de Cuadro de estilos........................................................... 100 Propiedades de Lista de estilos................................................................ 101 Propiedades de Posición de estilos.......................................................... 101 Propiedades de Extensiones de estilos.................................................... 102 Propiedades de Tablas, Contenido, Comillas de estilos.......................... 102 Cómo averiguar las propiedades de un estilo............................................ 103 Definición de las propiedades CSS....................................................... 104 Cómo modificar una regla (estilo).............................................................. 110 Cómo eliminar una regla (estilo).................................................................111 Cómo añadir una regla en una hoja externa.............................................. 112 Cómo adjuntar una hoja de estilo externa....................................................... 114 Cómo validar el código CSS........................................................................... 115 8. Utilización de imágenes.............................. 119 Tipos de imágenes.......................................................................................... 119 Imágenes vectoriales................................................................................. 119 Imágenes de mapa de bits (bitmaps)......................................................... 120 Resolución de un monitor.......................................................................... 121 Resolución de una imagen......................................................................... 122 4 Formatos de imagen....................................................................................... 123 GIF (Graphic Interchange Format, Formato de Intercambio de Gráficos). 123 JPEG (Joint Photographic Experts Group, Grupo de Conjunto de Expertos Fotográficos)............................................................................................... 123 PNG (Portable Network Group, Grupo de Redes Portátiles)..................... 124 El color............................................................................................................ 124 Trabajar con imágenes.................................................................................... 125 Insertar imágenes...................................................................................... 126 Imágenes de sustitución.................................................................................. 135 Mapas de imágenes................................................................................... 138 Barras de navegación................................................................................ 143 Animación de imágenes.................................................................................. 149 9. Utilizar tablas en una página web.............. 155 Trabajar con tablas.......................................................................................... 155 Creación de una página web con tablas......................................................... 156 Cómo seleccionar los elementos de una tabla................................................ 160 Selección de toda la tabla.......................................................................... 160 Selección de una o varias filas y columnas............................................... 160 Selección de una columna......................................................................... 161 Selección de una celda.............................................................................. 161 Selección de celdas adyacentes................................................................ 161 Selección de celdas no adyacentes........................................................... 161 Cómo combinar celdas.................................................................................... 162 Cómo insertar filas y/o columnas.................................................................... 164 Inserción de una fila o columna................................................................. 164 Inserción de más de una fila o columna..................................................... 165 Modificar las propiedades de la tabla.............................................................. 166 Cómo eliminar una fila y/o columna................................................................ 172 Cómo dividir celdas......................................................................................... 172 Creación de las páginas vinculadas................................................................ 173 Importación de datos....................................................................................... 178 Importar XML en plantilla........................................................................... 178 Importar Datos de tabla.............................................................................. 178 Importar Documento de Word (sólo Windows).......................................... 179 Importar Documento de Excel (sólo Windows).......................................... 179 Modificación de las propiedades de los vínculos....................................... 183 10. Trabajar con capas.................................... 185 ¿Qué son las capas?...................................................................................... 185 Etiquetas Div................................................................................................... 186 Inserción de etiquetas Div.......................................................................... 186 Modificación de etiquetas Div.................................................................... 187 Eliminación de etiquetas Div...................................................................... 187 Etiqueta Div de diseño de cuadrícula fluída.................................................... 187 Etiquetas Div PA.............................................................................................. 187 5 Dreamweaver CS6. Curso de Iniciación Inserción de etiquetas Div PA..................................................................... 187 Modificación de etiquetas Div PA............................................................... 188 Eliminación de etiquetas Div PA................................................................. 188 El entorno Spry................................................................................................ 188 Efectos que puede utilizar con Spry........................................................... 188 Ejemplo práctico con capas............................................................................ 189 Definición de los estilos CSS para las etiquetas Div PA............................ 190 Definición de las capas Div ....................................................................... 193 Aplicación de un efecto Spry...................................................................... 196 Definición del resto de las capas............................................................... 199 Spry Widgets.......................................................................................................................205 ¿Para qué sirve un Spry Widget?.............................................................. 205 Cómo insertar un Spry Widget................................................................... 206 Barra de menús Spry................................................................................. 207 Configuración de un menú Spry............................................................ 208 Ejemplo de menú Spry............................................................................... 209 Panel de fichas Spry.................................................................................. 212 Configuración de un panel de fichas Spry............................................ 212 Ejemplo de panel de fichas Spry................................................................ 213 Configuración de un Acordeón Spry..................................................... 218 Ejemplo de Acordeón Spry......................................................................... 218 Panel que puede contraerse de Spry......................................................... 221 Configuración de un panel que puede contraerse de Spry................... 221 Ejemplo de panel que puede contraerse de Spry...................................... 222 Información sobre herramienta de Spry..................................................... 222 Configuración de información sobre herramienta de Spry.................... 223 Ejemplo de información sobre herramienta de Spry.................................. 224 Diseñar con etiquetas DIV de cuadrícula fluída ............................................. 227 11. Trabajar con formularios............................ 237 Cómo crear un formulario HTML..................................................................... 237 Campo de texto............................................................................................... 241 Campo oculto.................................................................................................. 243 Área de texto................................................................................................... 244 Casilla de verificación...................................................................................... 245 Grupo de casillas de verificación..................................................................... 246 Botón de opción.............................................................................................. 247 Grupo de opción.............................................................................................. 248 Lista/menú....................................................................................................... 249 Menú de salto.................................................................................................. 251 Campo de imagen........................................................................................... 253 Campo de archivo........................................................................................... 254 Botón............................................................................................................... 255 Etiqueta........................................................................................................... 256 Juego de campos............................................................................................ 257 Campo de texto de validación Spry................................................................. 257 Área de texto de validación de Spry................................................................ 260 6 Casilla de verificación de validación de Spry.................................................. 262 Selección de validación de Spry..................................................................... 263 Contraseña de validación de Spry.................................................................. 265 Confirmación de validación de Spry................................................................ 267 Grupo de opciones de validación de Spry....................................................... 269 Creación de un formulario.................................................................................................270 Inserción del formulario.............................................................................. 271 Inserción de los datos del comprador........................................................ 273 Inserción de los datos del libro................................................................... 277 Inserción del cuestionario.......................................................................... 278 Lista de Eventos.............................................................................................. 281 12. Trabajar con marcos.................................. 286 Ventajas e inconvenientes de los marcos....................................................... 286 Ventajas..................................................................................................... 286 Inconvenientes........................................................................................... 286 Cómo crear marcos......................................................................................... 287 Creación de una página con marcos............................................................... 287 Propiedades del conjunto de marcos......................................................... 288 Cómo almacenar un documento con marcos.................................................. 290 Almacenar un archivo de conjunto de marcos........................................... 290 Almacenar todos los archivos asociados a un documento........................ 290 Diseño del marco............................................................................................ 291 Diseño del marco “cabecera”..................................................................... 291 Propiedades de un marco.......................................................................... 292 Diseño del marco Opciones....................................................................... 294 Diseño del marco Contenido...................................................................... 296 Eliminación de un marco................................................................................. 301 Cambio del tamaño de un marco.................................................................... 301 13. Multimedia con Dreamweaver................. 303 Aspectos importantes de los archivos de vídeo.............................................. 303 Reproductores multimedia......................................................................... 304 Cómo incorporar archivos de vídeo a una página........................................... 304 Vinculación de un vídeo............................................................................. 305 Incorporación de un vídeo.......................................................................... 306 Utilizar un servicio web externo para incorporar el vídeo................................ 308 Cómo incorporar archivos de sonido a una página......................................... 310 Vinculación de un archivo de sonido.......................................................... 310 Incorporación de un archivo de sonido...................................................... 311 14. Definición de un sitio web......................... 313 Aspectos a tener en cuenta a la hora de diseñar un Sitio............................... 313 Sitios en Dreamweaver................................................................................... 314 Cómo definir un sitio........................................................................................ 315 7 Dreamweaver CS6. Curso de Iniciación Configuración de las opciones para un acceso FTP.................................. 316 Configuración de las opciones para un acceso Local/red (servidor local).......318 Planteamiento de un sitio web........................................................................ 321 Creación de un sitio web................................................................................. 322 Sincronización de archivos........................................................................ 327 Comprobación de vínculos......................................................................... 328 Informe del sitio.......................................................................................... 329 Probar un sitio web......................................................................................... 332 Aspectos finales a tener en cuenta al crear un sitio web en Dreamweaver........333 15. Trabajar con plantillas............................... 335 Las plantillas.................................................................................................... 335 Cómo crear una plantilla................................................................................. 337 Creación de una plantilla nueva................................................................. 337 Creación de una plantilla a partir de un documento existente................... 339 Cómo definir regiones editables...................................................................... 340 Cómo crear regiones repetidas....................................................................... 341 Cómo insertar una tabla repetida............................................................... 342 Cómo crear un atributo de etiqueta editable................................................... 343 Cómo crear una región opcional..................................................................... 344 Cómo crear una región opcional no editable............................................. 345 Cómo crear una región opcional editable.................................................. 346 Plantillas anidadas.......................................................................................... 346 Cómo crear una plantilla anidada.................................................................... 347 Cómo quitar formato de plantilla..................................................................... 347 Ejercicio práctico con plantillas....................................................................... 347 Creación de la plantilla............................................................................... 348 Definición de una región con atributo de etiqueta editable........................ 350 Cómo modificar un atributo de etiqueta editable................................... 353 Definición de una región editable............................................................... 354 Definición de una región repetida.............................................................. 355 Definición de una región opcional editable................................................ 356 Uso de una plantilla......................................................................................... 358 Cómo aplicar plantillas a documentos existentes........................................... 367 Ejemplo práctico......................................................................................... 368 16. Introducción a las Bases de Datos........... 371 ¿Qué es una Base de datos?.......................................................................... 371 Uso de las Bases de datos relacionales......................................................... 372 Claves de una base de datos.......................................................................... 373 Claves externas......................................................................................... 374 Tipos de relación............................................................................................. 374 Reglas de integridad....................................................................................... 376 Normalización de una base de datos.............................................................. 376 Primera forma normal................................................................................ 376 Segunda forma normal............................................................................... 378 Tercera forma normal................................................................................. 379 8 Cuarta forma normal.................................................................................. 380 Quinta forma normal.................................................................................. 380 17. Introducción al lenguaje SQL.................... 384 Sentencias SQL............................................................................................... 384 Sentencia SELECT.................................................................................... 384 Cláusulas SQL........................................................................................... 385 ORDER BY................................................................................................. 385 GROUP BY................................................................................................ 386 WHERE...................................................................................................... 387 Operadores SQL........................................................................................ 387 HAVING...................................................................................................... 389 Funciones SQL........................................................................................... 390 Sentencia CREATE.................................................................................... 391 Sentencia INSERT..................................................................................... 392 Sentencia UPDATE.................................................................................... 393 Sentencia DELETE.................................................................................... 393 Sentencia INNER JOIN.............................................................................. 394 Prácticas de SQL....................................................................................... 394 Soluciones a las prácticas anteriores......................................................... 400 18. Trabajar con Bases de Datos.................... 405 Creación de la base de datos.......................................................................... 405 Cómo configurar la base de datos.................................................................. 411 Cómo conectar una base de datos................................................................. 413 Cómo vincular datos a una página PHP......................................................... 417 19. Adobe Bridge CS6...................................... 423 ¿Qué es Bridge?............................................................................................. 423 Ejecutar Bridge........................................................................................... 423 Menú Archivo............................................................................................. 424 Menú Editar................................................................................................ 426 Menú Vista................................................................................................. 426 Menú Pilas................................................................................................. 428 Menú Etiqueta............................................................................................ 429 Menú Herramientas.................................................................................... 430 Menú Ventana............................................................................................ 431 Paneles...................................................................................................... 431 Editar los metadatos.................................................................................. 434 Filtrar metadatos ....................................................................................... 434 Panel palabras clave.................................................................................. 435 Añadir palabras clave a archivos.......................................................... 435 Añadir un conjunto de palabras clave a archivos.................................. 436 Eliminar palabras clave de un archivo.................................................. 436 Crear un nuevo conjunto de palabras clave.......................................... 436 Crear una nueva palabra clave............................................................. 437 9 Dreamweaver CS6. Curso de Iniciación Eliminar una palabra clave.................................................................... 437 Ordenar...................................................................................................... 437 Buscar........................................................................................................ 438 20. Utilización de Fireworks............................. 439 ¿Qué es Fireworks?........................................................................................ 439 ¿Para qué sirve?............................................................................................. 439 Creación de un archivo desde Fireworks........................................................ 439 Exportar una imagen de Fireworks................................................................. 443 Inserción HTML de Fireworks.......................................................................... 444 Definición de un editor externo........................................................................ 445 Editar una imagen desde Dreamweaver......................................................... 445 Creación de una imagen animada.................................................................. 446 Creación de un Menú emergente.................................................................... 447 21. Diseño de una página web....................... 453 Consejos para diseñar una web...................................................................... 453 Descripción del proyecto................................................................................. 457 Creación de la base de datos.......................................................................... 458 Importar la base de datos.......................................................................... 459 Definición del sitio........................................................................................... 460 Creación de la página de inicio....................................................................... 461 Creación de la página de metodología............................................................ 468 Creación de la página de cursos..................................................................... 469 Creación de la página principal del catálogo................................................... 477 Creación de la página del catálogo............................................................ 479 Creación del archivo php basado en plantilla....................................... 479 Creación de la página de contenido del catálogo................................. 484 Creación de la página + información.................................................... 486 Creación del formulario de pedidos................................................................. 490 Creación de la página de contacto.................................................................. 500 Creación del buscador.................................................................................... 501 Comprobación del sitio.................................................................................... 508 22. Ejercicios prácticos en PHP....................... 515 Ejercicios......................................................................................................... 515 Soluciones de los ejercicios............................................................................ 518 10 Cómo 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 Inforbook’s. Para descargarlos a su ordenador deberá realizar los pasos siguientes: 1. Abrir el navegador y teclear la dirección: http://www.inforbooks.com A continuación, se mostrará la página web de la editorial: 2. Hacer clic sobre el botón Libros online. Se mostrará la página Libros online en la que aparecen las materias disponibles. 3. Efectuar un clic en el enlace Diseño Web. Aparecerá el contenido de ese enlace. 4. Hacer clic en el enlace Dreamweaver. Se mostrarán los libros de esa categoría. 5. Realizar un clic en el enlace del libro Dreamweaver CS6. Curso de Iniciación. 11 Dreamweaver CS6. Curso de Iniciación En la página que aparecerá, encontrará información 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 diálogo 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 aplicación Winzip para descomprimir el archivo descargado de Internet, puede dirigirse a la página web: http://www.winzip.com y bajarla desde allí. 12
