Buch lesen: «Aprender Dreamweaver CS6 con 100 ejercicios prácticos»
Aprender Dreamweaver CS6 con 100 ejercicios prácticos
© 2012 MEDIAactive
Primera edición, 2012
© 2012 MARCOMBO, S.A.
Gran Via de les Corts Catalanes, 594
08007 Barcelona
En coedición con:
© 2012 ALFAOMEGA GRUPO EDITOR, S.A. de C.V.
C/ Pitágoras 1139 - Colonia del Valle
03100 - México D.F. (México)
Diseño de la cubierta: NDENU DISSENY GRÀFIC
«Cualquier forma de reproducción, distribución, comunicación pública o transformación de esta obra sólo puede ser realizada con la autorización de sus titulares, salvo excepción prevista por la ley. Diríjase a CEDRO (Centro Español de Derechos Reprográficos, www.cedro.org) si necesita fotocopiar o escanear algún fragmento de esta obra».
ISBN por Marcombo: 978-84-267-1840-2
ISBN por Alfaomega:
D.L.:
Printed in Spain
| Presentación |
APRENDER DREAMWEAVER CS6 CON 100 EJERCICIOS PRÁCTICOS
100 ejercicios prácticos resueltos que conforman un recorrido por las principales funciones del programa. Si bien es imposible recoger en las páginas de este libro todas las prestaciones de Dreamweaver CS6, hemos escogido las más interesantes y utilizadas. Una vez realizados a conciencia los 100 ejercicios que componen este manual, el lector será capaz de manejar con soltura el programa y llevar a cabo todas aquellas tareas que se realizan normalmente para crear, editar y publicar una página web.
LA FORMA DE APRENDER
Nuestra experiencia en el ámbito de la enseñanza nos ha llevado a diseñar este tipo de manual, en el que cada una de las funciones se ejercita mediante la realización de un ejercicio práctico. Dicho ejercicio se halla explicado paso a paso y pulsación a pulsación, a fin de no dejar ninguna duda en su proceso de ejecución. Además, lo hemos ilustrado con imágenes descriptivas de los pasos más importantes o de los resultados que deberían obtenerse y con recuadros IMPORTANTE que ofrecen información complementaria sobre cada uno de los temas tratados en los ejercicios.
Gracias a este sistema se garantiza que una vez realizados los 100 ejercicios que componen el manual, el usuario será capaz de desenvolverse cómodamente con el programa y sacar el máximo partido de las múltiples prestaciones que ofrece Dreamweaver CS6.
LOS ARCHIVOS NECESARIOS
En el caso de que desee utilizar los archivos de ejemplo de este libro puede descargarlos desde la zona de descargas de la página de Marcombo (www.marcombo.com) y desde la página específica de este libro.
A QUIÉN VA DIRIGIDO EL MANUAL
Si se inicia usted en la práctica y el trabajo con Dreamweaver, encontrará en estas páginas un completo recorrido por sus principales funciones. Pero si es usted un experto en el programa, le resultará también muy útil para consultar determinados aspectos más avanzados o repasar funciones específicas que podrá localizar en el índice.
Cada ejercicio está tratado de forma independiente, por lo que no es necesario que los realice por orden (aunque así se lo recomendamos, puesto que hemos intentado agrupar aquellos ejercicios con temática común). De este modo, si necesita realizar una consulta puntual, podrá dirigirse al ejercicio en el que se trata el tema y llevarlo a cabo sobre su propio documento de Dreamweaver.
DREAMWEAVER CS6
Dreamweaver es uno de los programas más utilizados para el diseño, el desarrollo y el mantenimiento de aplicaciones y sitios web basados en estándares. Con las múltiples y avanzadas herramientas que ofrece es posible crear fácil y rápidamente sitios Web y aplicaciones con aspecto completamente profesional, por lo que es una de las aplicaciones preferidas de diseñadores gráficos y diseñadores y desarrolladores web.
Con este completísimo editor de HTML visual resulta fácil crear complejas y sofisticadas páginas web dinámicas. Las robustas propiedades para la integración y el diseño basado en CSS, hojas de estilos en cascadas, hacen de Dreamweaver una estupenda aplicación que permite crear y manipular cualquier sitio web con enorme facilidad y precisión. La alta calidad de los diseños creados con Dreamweaver queda garantizada gracias a sus potentes y mejorados controles y herramientas, que irá conociendo a lo largo de los 100 ejercicios que componen este manual.
| Cómo funcionan los libros “Aprender…” |
| Índice |
001 Acceder a Dreamweaver CS6
002 Conocer la interfaz de Dreamweaver CS6
003 Crear nuevos documentos
004 Crear nuevos diseños de cuadrícula fluida
005 Trabajar con el diseño y el código
006 Conocer los elementos de una página web
007 Guardar y editar básicamente un documento
008 Crear sitios locales
009 Administrar sitios locales
010 Aplicar un color y una imagen de fondo
011 Imágenes de rastreo y notas de diseño
012 Exportar y eliminar sitios
013 Importar sitios
014 Duplicar y editar sitios
015 Insertar texto
016 Copiar y pegar texto entre documentos
017 Modificar el formato de un texto
018 Cambiar las propiedades y el color del texto
019 Crear archivos de InContext Editing
020 Importar y utilizar fuentes Web
021 Cambiar los márgenes y la alineación
022 Agregar sangrías y crear listas
023 Crear estilos y elementos de listas
024 Insertar caracteres especiales
025 Insertar imágenes
026 Compartir imágenes entre páginas
027 Cambiar las dimensiones de una imagen
028 Alinear imágenes
029 Conocer las funciones de edición de imágenes
030 Crear mapas de imagen y otros ajustes
031 Insertar y actualizar documentos PSD
032 Agregar enlaces
033 Comprobar errores de navegación
034 Previsualizar las páginas
035 Cambiar las propiedades de los vínculos
036 Insertar tablas
037 Trabajar con filas, columnas y celdas
038 Cambiar las propiedades de tabla
039 Editar filas, columnas y celdas
040 Dividir y combinar celdas
041 Combinar Dreamweaver con Word y Excel
042 Limpiar el código HTML
043 Anidar tablas
044 Ordenar tablas
045 Exportar e importar los datos de una tabla
046 Trabajar con el modo de tablas expandidas
047 Empezar a trabajar con estilos CSS
048 Aplicar estilos CSS
049 Aplicar hojas de estilos de muestra
050 Definir estilos de etiquetas HTML
051 Trabajar con archivos relacionados
052 Editar hojas de estilos
053 Crear nuevas reglas de estilos
054 Adjuntar hojas de estilos externas
055 Generar un documento basado en CSS
056 Mostrar el código de una selección
057 Crear estilos de clase
058 Duplicar estilos de clase
059 Aplicar varias clases CSS
060 Trabajar con el nuevo panel Transiciones CSS
061 Combinar hojas de estilos
062 Definir categorías para definir reglas de estilo
063 Crear reglas de estilo de identificador
064 Insertar marcos
065 Ajustar un conjunto de marcos
066 Asignar el origen de los marcos
067 Cambiar las propiedades de los marcos
068 Insertar marcadores de posición de imagen
069 Crear imágenes de sustitución
070 Insertar películas Flash
071 Insertar vídeos Flash
072 Insertar botones de Flash
073 Vincular sonidos
074 Incrustar sonidos
075 Enlazar páginas y modificar su carga
076 Crear anclajes con nombre
077 Insertar elementos PA
078 Cambiar las propiedades de los elementos PA
079 Convertir elementos PA en tablas
080 Crear formularios
081 Insertar objetos de formularios
082 Añadir comportamientos
083 Asignar acciones de formulario
084 Crear documentos en JavaScript
085 Llamar JavaScript
086 Usar sugerencias para el código JavaScript
087 Crear plantillas y regiones editables
088 Crear documentos a partir de plantillas
089 Automatizar tareas
090 Crear un conjunto de datos de Spry
091 Insertar tablas y regiones Spry
092 Insertar widgets de spry
093 Insertar barras de menús de Spry
094 Aplicar efectos de Spry
095 Trabajar con la Vista en vivo
096 Inspeccionar estilos CSS
097 Trabajar con el panel Activos
098 Editar elementos de biblioteca
099 Configurar un sitio remoto
100 Colocar y obtener archivos
| 001 | Acceder a Dreamweaver CS6 |
AL ACCEDER A DREAMWEAVER CS6, aparece la Ventana de bienvenida, que permite el acceso a las acciones usadas con mayor frecuencia tanto al iniciar una sesión de trabajo como cuando el programa no tiene ningún documento abierto. Su uso resulta una alternativa al de los comandos tradicionales para la creación y apertura de documentos. Además, desde la Ventana de bienvenida se puede acceder a una visita guiada o a un tutorial del producto, con el fin de profundizar en los conocimientos sobre el programa.
IMPORTANTE
Active la opción No volver a mostrar esta página de inicio de la parte inferior de la pantalla de bienvenida o bien desactive la opción Mostrar pantalla de bienvenida en la categoría General del cuadro de preferencias de Dreamweaver para que dicha ventana no aparezca cada vez que acceda al programa.
1 En el Escritorio, haga clic en el botón Iniciar de la Barra de tareas y haga clic en el acceso a Dreamweaver CS6.
2 Antes de cargarse la interfaz del programa propiamente dicha, aparece la ventana Editor predeterminado, desde la cual puede indicar los tipos de archivo para los cuales Dreamweaver será el editor predeterminado. Mantenga seleccionados los tipos por defecto y pulse el botón Aceptar.
Después de abrir Dreamweaver por primera vez, dispondrá de un acceso directo al programa en el menú Inicio.
3 Se abre la aplicación mostrando en su parte central la pantalla de bienvenida.
Desde aquí puede abrir un elemento reciente, crear nuevos documentos y consultar temas de ayuda. Además, en la parte inferior dispone de vínculos a páginas que le ayudarán durante sus primeros pasos en Dreamweaver, le informarán acerca de las nuevas funciones del programa y le darán acceso a otros recursos. Pulse el enlace Abrir, el único del apartado Abrir un elemento reciente.
4 La acción nos conduce al cuadro de diálogo Abrir, que posibilita la selección y apertura de documentos previamente creados. Pulse el botón Cancelar para salir de él.
5 El segundo bloque, Crear nuevo, ofrece una lista de tipos de archivo más usuales que puede seleccionar para crear un documento rápidamente. La lista se ve encabezada por la opción HTML, formato tradicional de las páginas web. Pulse sobre ella.
6 Automáticamente se crea un documento HTML en blanco.
Haga clic sobre el botón de aspa de la pestaña de este documento, denominado por defecto Untitled-1, para salir de él.
7 El cierre del documento comporta la reaparición de la pantalla de bienvenida. Como novedad en esta versión del programa, la sección Crear nuevo contiene dos entradas más: Diseño de cuadrícula fluida,
un sistema para diseñar sitios web adaptables, y Sitio de Business Catalyst, que permite utilizar el panel integrado de Business Catalyst en Dreamweaver. Por último, en el apartado Elementos destacados de la pantalla de bienvenida ofrece diferentes enlaces que nos conducen a completos tutoriales sobre las principales novedades de Dreamweaver CS6. Pulse por ejemplo sobre el enlace Información general de CS6
y consulte su contenido en el navegador Web predeterminado.
IMPORTANTE
También puede conocer las novedades del programa y sus funciones más comunes utilizando los enlaces de la parte inferior de la ventana Nuevas funciones y Comenzar a trabajar.
| 002 | Conocer la interfaz de Dreamweaver CS6 |
EL DISEÑO DE LA INTERFAZ de Dreamweaver CS6 es cómodo e intuitivo y permite trabajar de forma rápida y racional. El espacio de trabajo de Dreamweaver permite ver en todo momento las propiedades de los documentos y de los objetos y muestra todas las ventanas y los paneles integrados en una única ventana.
IMPORTANTE
Usando el botón de doble punta de flecha, que aparece en la cabecera de los paneles, puede contraerlos para mostrarlos en forma de iconos y ahorrar así espacio.
1 La sencilla interfaz de Dreamweaver CS6 cuenta con una barra de menús en la parte superior y la reducida Barra de la aplicación, que cuenta únicamente con un conmutador de espacios de trabajo y un campo de búsqueda. Para conocer con todo detalle el entorno de Dreamweaver, cree un documento en blanco pulsando el botón HTML de la pantalla de bienvenida.
2 Debajo de la pestaña del documento, se encuentra la Barra de herramientas Documento, que contiene los botones adecuados para cambiar las vistas de la ventana y las opciones de visualización, para obtener vistas previas y para dar nombre al documento, entre otras acciones habituales. Haga clic en el botón Código de esta barra y, tras comprobar cómo cambia el aspecto de la ventana,
3 Ocupando la mayor parte del espacio de la interfaz se encuentra la ventana del documento, donde se muestra el documento actual mientras lo está creando y editando. En la parte inferior de esta ventana se ubica la Barra de estado, que incluye un selector de etiquetas, botones para cambiar la visualización e información acerca del documento y por debajo el Inspector de propiedades, un útil panel que permite ver y modificar en cualquier momento las propiedades de la página, del objeto o del texto seleccionados. Pulse el botón Propiedades de la página del inspector.
También puede acceder al cuadro Propiedades de la página desde el menú Modificar o pulsando la combinación de teclas Ctrl.+J
4 Desde el cuadro Propiedades de la página es posible modificar las características de la página. Como esto lo veremos más adelante en este libro, ciérrelo pulsando Cancelar.
5 A la derecha de la interfaz se encuentran los paneles, que le ayudarán a supervisar y cambiar el trabajo realizado. Puede reducir y ampliar los paneles haciendo doble clic en sus pestañas, y pasar de uno a otro pulsando sobre ellas. Haga clic sobre la pestaña Elementos PA.
6 También puede activar los paneles desde el menú Ventana. El conmutador de espacios de trabajo de la Barra de la aplicación se utiliza para cambiar el espacio de trabajo. Despliegue este campo, que muestra pro defecto el espacio Diseñador, y elija la opción Programador.
7 Vea que se trata del mismo espacio de trabajo integrado que el de Diseñador, pero con los grupos de paneles apilados a la izquierda y mostrando de forma predeterminada la vista Código. Termine este ejercicio volviendo al espacio de trabajo Diseñador.
IMPORTANTE
El espacio de trabajo denominado Pantalla doble permite organizar un diseño si dispone de un segundo monitor. Este diseño coloca todos los paneles en el monitor secundario y mantiene la ventana de documento y el inspector de propiedades en el principal.
| 003 | Crear nuevos documentos |
ADEMÁS DE DOCUMENTOS HTML, Dreamweaver permite crear documentos basados en texto (CFML, ASP, CSS) y archivos de código fuente (Visual Basic, .NET, C# y Java). El cuadro Nuevo documento ordena en categorías los diferentes tipos de archivo que se pueden obtener. Los archivos pueden ser creados en blanco o basados en los diseños de página preestablecidos. La categoría Nuevo documento del cuadro Preferencias permite establecer un tipo de documento como predeterminado y generar automáticamente un documento nuevo basado en el tipo predeterminado definido.
IMPORTANTE
Ya sabe que puede utilizar el enlace pertinente de la pantalla de bienvenida para crear nuevos documentos en Dreamweaver.
1 Para empezar, con el documento en blanco creado en el ejercicio anterior abierto en el área de trabajo de Dreamweaver, despliegue el menú Archivo y elija la opción Nuevo.
2 La primera columna del cuadro Nuevo documento permite la creación de una página en blanco, una plantilla en blanco, un diseño de cuadrícula fluida (novedad en esta versión del programa), una página de plantilla, una página de muestra u otro tipo de documento. En el panel de la derecha se muestran los tipos de página, que varían según el tipo de documento seleccionado. La segunda parte de este panel incluye los tipos de páginas dinámicas. Seleccione la categoría Plantilla en blanco.
3 Las opciones de esta categoría permiten crear una plantilla que presente uno de los formatos del listado central. Una vez almacenado como plantilla, un documento podrá ser utilizado como base para la creación de otras páginas. Pulse sobre la categoría Diseño de cuadrícula fluida.
4 Por tratarse de una nueva función en la versión CS6 del programa, nos ocuparemos de ella en exclusiva en el siguiente ejercicio, por lo que seleccione la categoría Página de muestra.
5 Los estilos CSS permiten dotar de unas características comunes a las páginas, controlando parámetros relacionados con el aspecto que deben presentar los diferentes elementos que las componen, como el fondo y las tablas. Haga clic sobre la opción Colores: Rojo del panel Página de muestra y pulse el botón Crear.
6 Aparece el nuevo documento CSS en pantalla en vista de código. Seguidamente, pulse la combinación de teclas Ctrl+N.
7 Pulse sobre la categoría Página en blanco, mantenga seleccionada la opción HTML y haga clic sobre el diseño de página de 2 columnas flotantes, barra lateral derecha para ver su aspecto.
8 Si la mayoría de las páginas de un sitio van a ser de un tipo de archivo concreto resulta aconsejable predeterminarlo. Para ello, pulse el botón Preferencias y, en el cuadro que aparece, seleccione el tipo de archivo que desee en el campo Documento predeterminado. En este caso, mantenga seleccionada la opción HTML y haga clic en Aceptar.
9 El enlace Obtener más contenido inicia Dreamweaver Exchange, que permite descargar más contenido de diseño de páginas. Pulse el botón Crear para crear un nuevo documento.
IMPORTANTE
Los tipos de archivo listados en la categoría Otro del cuadro Nuevo documento están destinados a programadores experimentados en estos lenguajes, basados en texto, con los que no es posible trabajar de forma visual mediante el programa.
