DREAMWEAVER CS6. Curso de Iniciación. Diego Rovira

Transcripción

1 DREAMWEAVER CS6 Curso de Iniciación Diego Rovira 1

2 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, BARCELONA info@inforbooks.com web: ISBN-13: ISBN-10: Depósito legal: B Diseño cubierta: Manel López Tamboleo Maquetación: ServiDOC S.L. IMPRESO EN ESPAÑA - PRINTED IN SPAIN 2

3 Índice General 1. Introducción a Dreamweaver CS Novedades de Dreamweaver CS Instalación de Dreamweaver CS Requisitos del Sistema y del Hardware Requisitos mínimos para Windows Requisitos mínimos para Macintosh Instalación de Dreamweaver CS Instalación de la aplicación XAMPP Primer contacto con Dreamweaver CS Arranque de Dreamweaver CS Cómo arrancar Dreamweaver CS6? La ventana de Dreamweaver CS Uso de la Ayuda de Dreamweaver El entorno de trabajo La barra de menús Menú Archivo Menú Edición Menú Ver Menú Insertar Menú Modificar Menú Formato Menú Comandos Menú Sitio Menú Ventana Menú Ayuda Uso de los paneles Cómo visualizar un panel Cómo ocultar un panel Cómo modificar el tamaño de un panel Cómo cambiar la ubicación de un panel

4 Dreamweaver CS6. Curso de Iniciación 5. Introducción a las páginas web Web estática Ventajas e inconvenientes Web dinámica Ventajas e inconvenientes Elementos de una página web La primera página web Crear una página web Vista previa de una página Formateo del texto de una página Formateo de párrafos de una página Modificación de las Propiedades de la página Inserción de una regla horizontal Utilización de los estilos Introducción a las hojas de estilo (CSS)...87 Definición de los estilos Reglas CSS Trabajar con estilos CSS en Dreamweaver Cómo trabajar con un estilo Propiedades de Fuente de estilos Propiedades de Fondo de estilos Propiedades de Bloque de estilos Propiedades de Borde de estilos Propiedades de Cuadro de estilos Propiedades de Lista de estilos Propiedades de Posición de estilos Propiedades de Extensiones de estilos Propiedades de Tablas, Contenido, Comillas de estilos Cómo averiguar las propiedades de un estilo Definición de las propiedades CSS Cómo modificar una regla (estilo) Cómo eliminar una regla (estilo) Cómo añadir una regla en una hoja externa Cómo adjuntar una hoja de estilo externa Cómo validar el código CSS Utilización de imágenes Tipos de imágenes Imágenes vectoriales Imágenes de mapa de bits (bitmaps) Resolución de un monitor Resolución de una imagen

5 Formatos de imagen GIF (Graphic Interchange Format, Formato de Intercambio de Gráficos). 123 JPEG (Joint Photographic Experts Group, Grupo de Conjunto de Expertos Fotográficos) PNG (Portable Network Group, Grupo de Redes Portátiles) El color Trabajar con imágenes Insertar imágenes Imágenes de sustitución Mapas de imágenes Barras de navegación Animación de imágenes Utilizar tablas en una página web Trabajar con tablas Creación de una página web con tablas Cómo seleccionar los elementos de una tabla Selección de toda la tabla Selección de una o varias filas y columnas Selección de una columna Selección de una celda Selección de celdas adyacentes Selección de celdas no adyacentes Cómo combinar celdas Cómo insertar filas y/o columnas Inserción de una fila o columna Inserción de más de una fila o columna Modificar las propiedades de la tabla Cómo eliminar una fila y/o columna Cómo dividir celdas Creación de las páginas vinculadas Importación de datos Importar XML en plantilla Importar Datos de tabla Importar Documento de Word (sólo Windows) Importar Documento de Excel (sólo Windows) Modificación de las propiedades de los vínculos Trabajar con capas Qué son las capas? Etiquetas Div Inserción de etiquetas Div Modificación de etiquetas Div Eliminación de etiquetas Div Etiqueta Div de diseño de cuadrícula fluída Etiquetas Div PA

6 Dreamweaver CS6. Curso de Iniciación Inserción de etiquetas Div PA Modificación de etiquetas Div PA Eliminación de etiquetas Div PA El entorno Spry Efectos que puede utilizar con Spry Ejemplo práctico con capas Definición de los estilos CSS para las etiquetas Div PA Definición de las capas Div Aplicación de un efecto Spry Definición del resto de las capas Spry Widgets Para qué sirve un Spry Widget? Cómo insertar un Spry Widget Barra de menús Spry Configuración de un menú Spry Ejemplo de menú Spry Panel de fichas Spry Configuración de un panel de fichas Spry Ejemplo de panel de fichas Spry Configuración de un Acordeón Spry Ejemplo de Acordeón Spry Panel que puede contraerse de Spry Configuración de un panel que puede contraerse de Spry Ejemplo de panel que puede contraerse de Spry Información sobre herramienta de Spry Configuración de información sobre herramienta de Spry Ejemplo de información sobre herramienta de Spry Diseñar con etiquetas DIV de cuadrícula fluída Trabajar con formularios Cómo crear un formulario HTML Campo de texto Campo oculto Área de texto Casilla de verificación Grupo de casillas de verificación Botón de opción Grupo de opción Lista/menú Menú de salto Campo de imagen Campo de archivo Botón Etiqueta Juego de campos Campo de texto de validación Spry Área de texto de validación de Spry

7 Casilla de verificación de validación de Spry Selección de validación de Spry Contraseña de validación de Spry Confirmación de validación de Spry Grupo de opciones de validación de Spry Creación de un formulario Inserción del formulario Inserción de los datos del comprador Inserción de los datos del libro Inserción del cuestionario Lista de Eventos Trabajar con marcos Ventajas e inconvenientes de los marcos Ventajas Inconvenientes Cómo crear marcos Creación de una página con marcos Propiedades del conjunto de marcos Cómo almacenar un documento con marcos Almacenar un archivo de conjunto de marcos Almacenar todos los archivos asociados a un documento Diseño del marco Diseño del marco cabecera Propiedades de un marco Diseño del marco Opciones Diseño del marco Contenido Eliminación de un marco Cambio del tamaño de un marco Multimedia con Dreamweaver Aspectos importantes de los archivos de vídeo Reproductores multimedia Cómo incorporar archivos de vídeo a una página Vinculación de un vídeo Incorporación de un vídeo Utilizar un servicio web externo para incorporar el vídeo Cómo incorporar archivos de sonido a una página Vinculación de un archivo de sonido Incorporación de un archivo de sonido Definición de un sitio web Aspectos a tener en cuenta a la hora de diseñar un Sitio Sitios en Dreamweaver Cómo definir un sitio

8 Dreamweaver CS6. Curso de Iniciación Configuración de las opciones para un acceso FTP Configuración de las opciones para un acceso Local/red (servidor local) Planteamiento de un sitio web Creación de un sitio web Sincronización de archivos Comprobación de vínculos Informe del sitio Probar un sitio web Aspectos finales a tener en cuenta al crear un sitio web en Dreamweaver Trabajar con plantillas Las plantillas Cómo crear una plantilla Creación de una plantilla nueva Creación de una plantilla a partir de un documento existente Cómo definir regiones editables Cómo crear regiones repetidas Cómo insertar una tabla repetida Cómo crear un atributo de etiqueta editable Cómo crear una región opcional Cómo crear una región opcional no editable Cómo crear una región opcional editable Plantillas anidadas Cómo crear una plantilla anidada Cómo quitar formato de plantilla Ejercicio práctico con plantillas Creación de la plantilla Definición de una región con atributo de etiqueta editable Cómo modificar un atributo de etiqueta editable Definición de una región editable Definición de una región repetida Definición de una región opcional editable Uso de una plantilla Cómo aplicar plantillas a documentos existentes Ejemplo práctico Introducción a las Bases de Datos Qué es una Base de datos? Uso de las Bases de datos relacionales Claves de una base de datos Claves externas Tipos de relación Reglas de integridad Normalización de una base de datos Primera forma normal Segunda forma normal Tercera forma normal

9 Cuarta forma normal Quinta forma normal Introducción al lenguaje SQL Sentencias SQL Sentencia SELECT Cláusulas SQL ORDER BY GROUP BY WHERE Operadores SQL HAVING Funciones SQL Sentencia CREATE Sentencia INSERT Sentencia UPDATE Sentencia DELETE Sentencia INNER JOIN Prácticas de SQL Soluciones a las prácticas anteriores Trabajar con Bases de Datos Creación de la base de datos Cómo configurar la base de datos Cómo conectar una base de datos Cómo vincular datos a una página PHP Adobe Bridge CS Qué es Bridge? Ejecutar Bridge Menú Archivo Menú Editar Menú Vista Menú Pilas Menú Etiqueta Menú Herramientas Menú Ventana Paneles Editar los metadatos Filtrar metadatos Panel palabras clave Añadir palabras clave a archivos Añadir un conjunto de palabras clave a archivos Eliminar palabras clave de un archivo Crear un nuevo conjunto de palabras clave Crear una nueva palabra clave

10 Dreamweaver CS6. Curso de Iniciación Eliminar una palabra clave Ordenar Buscar Utilización de Fireworks Qué es Fireworks? Para qué sirve? Creación de un archivo desde Fireworks Exportar una imagen de Fireworks Inserción HTML de Fireworks Definición de un editor externo Editar una imagen desde Dreamweaver Creación de una imagen animada Creación de un Menú emergente Diseño de una página web Consejos para diseñar una web Descripción del proyecto Creación de la base de datos Importar la base de datos Definición del sitio Creación de la página de inicio Creación de la página de metodología Creación de la página de cursos Creación de la página principal del catálogo Creación de la página del catálogo Creación del archivo php basado en plantilla Creación de la página de contenido del catálogo Creación de la página + información Creación del formulario de pedidos Creación de la página de contacto Creación del buscador Comprobación del sitio Ejercicios prácticos en PHP Ejercicios Soluciones de los ejercicios

11 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: 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

12 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: y bajarla desde allí. 12