Kitabı oku: «Aprender Dreamweaver CS5 con 100 ejercicios prácticos»
Aprender
Aprender
Dreamweaver CS5
con 100 ejercicios prácticos
Título de la obra:
Aprender Dreamweaver CS5 con 100 ejercicios prácticos
Primera edición, 2010
Diseño de la cubierta: NDENU DISSENY GRÀFIC
© 2010 MEDIAactive
Pallars, 141-143 5º B
08018 Barcelona
© 2010 MARCOMBO, S.A.
Gran Via de les Corts Catalanes, 594
08007 Barcelona
ISBN: 978-84-267-1712-2
ISBN (obra completa): 978-84-267-1533-3
D.L.:
IMPRESO EN GRAFO, S.A.
Quedan rigurosamente prohibidas, sin la autorización escrita de los titulares del copyright, bajo las sanciones establecidas en las leyes, la reproducción total o parcial de esta obra por cualquier medio o procedimiento, incluidos la reprografía y el tratamiento informático, así como la distribución de ejemplares mediante alquiler o préstamo públicos.
Presentación
APRENDER DREAMWEAVER CS5 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 CS5, 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 CS5.
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 CS5
Dreamweaver CS5 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 La Ventana de bienvenida
002 La nueva interfaz de usuario
003 Crear documentos
004 Visualizar varios archivos simultáneamente
005 Diseño y código de páginas web
006 Conocer los elementos de una página web
007 Trabajar con los comandos básicos
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 Introducir texto
016 Copiar y pegar texto
017 Cambiar el formato de párrafo
018 Modificar propiedades y color del texto
019 Crear archivos de InContext Editing
020 Establecer márgenes y alineación
021 Añadir sangrías y crear listas
022 Estilos y elementos de listas
023 Caracteres especiales y reglas horizontales
024 Insertar imágenes
025 Origen y copia de imágenes
026 Cambiar tamaño y dimensiones de imágenes
027 Alinear imágenes
028 Editar imágenes
029 Origen base, espaciado y zonas interactivas
030 Insertar documentos PSD de Photoshop
031 Insertar enlaces
032 Errores y navegadores
033 Vista previa y enlaces
034 Enlaces y propiedades de las páginas
035 Insertar tablas
036 Trabajar con filas, columnas y celdas
037 Cambiar las propiedades de tabla
038 Propiedades de filas, columnas y celdas
039 Dividir y combinar celdas
040 Combinar Dreamweaver con Word y Excel
041 Limpiar HTML
042 Anidar tablas
043 Ordenar tablas
044 Exportar e importar datos de tablas
045 Modos de trabajo con tablas
046 Propiedades de la página y estilos CSS
047 Aplicar estilos CSS
048 Aplicar hojas de estilos de muestra
049 Definir estilos de etiquetas HTML
050 Trabajar con archivos relacionados
051 Editar hojas de estilos
052 Definir nuevas reglas de estilos
053 Importar y vincular hojas de estilos
054 Diseño de inicio de CSS
055 Navegar al código relacionado
056 Crear estilos de clase
057 Duplicar y aplicar estilos de clase
058 Combinar hojas de estilos
059 Categorías de definición de estilos
060 Identificadores y estilos
061 Conjuntos de marcos
062 Cambiar el origen de los marcos
063 Insertar marcos
064 Propiedades de marcos
065 Marcadores de posición de imagen
066 Crear imágenes de sustitución
067 Insertar películas Flash
068 Insertar vídeos Flash
069 Insertar botones de flash
070 Vincular sonidos
071 Incrustar sonidos
072 Enlaces, marcos y destinos
073 Anclajes con nombre
074 Insertar elementos PA
075 Propiedades de elementos PA
076 Elementos PA y tablas
077 Crear formularios
078 Objetos de formularios
079 Añadir comportamientos
080 Acciones de formulario.
081 Funciones de JavaScript
082 Llamar JavaScript
083 Utilizar sugerencias para el código JavaScript
084 Crear plantillas y regiones editables
085 Crear documentos a partir de plantillas
086 Panel Historial y los comandos personalizados
087 Crear un conjunto de datos con Spry
088 Insertar tablas y regiones Spry
089 Insertar widgets
090 Insertar menús de navegación Spry
091 Aplicar efectos Spry
092 Utilizar la vista en vivo
093 Inspección de CSS
094 El panel Activos
095 Elementos de Biblioteca
096 Comprobar un sitio
097 Configurar un sitio remoto
098 Colocar y obtener archivos
099 Actualizar con Subversion
100 Pedir ayuda en Flash CS5
001La Ventana de bienvenida
IMPORTANTE
Active la opción No volver a mostrar este mensaje de la parte inferior de la Ventana de bienvenida o bien desactive la opción Mostrar pantalla de bienvenida en el apartado General del cuadro de preferencias de Dreamweaver para que dicha ventana no aparezca cada vez que acceda al programa.
AL ACCEDER A DRERAMWEAVER CS5, 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.
1.En el Escritorio, haga clic en el botón Iniciar de la Barra de tareas, pulse en la opción Todos los programas, haga clic en la carpeta de la suite de Adobe y elija Dreamweaver CS5. 
2.Se abre la aplicación mostrando en su parte central la Ventana de bienvenida. Por defecto, Dreamweaver utiliza el espacio de trabajo Diseñador. Los grupos de paneles se pueden ocultar y mostrar según las preferencias del usuario. Pulse el enlace Abrir, el único del apartado Abrir un elemento reciente. 
3.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. 
Después de abrir Dreamweaver por primera vez, dispondrá de un acceso directo al programa en el menú Inicio.
4.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.
5.Automáticamente se crea un documento HTML en blanco. Pulse sobre el icono del programa, situado en el extremo izquierdo de la Barra de la aplicación del menú de control que aparece, elija la opción Minimizar. 
También puede encontrar estas opciones de control en forma de botones en el extremo derecho de la Barra de la aplicación.
6.El programa queda reducido a un botón en la Barra de tareas. Haga clic en él, abra el menú Archivo y elija la opción Cerrar.
7.El cierre del documento comporta la reaparición de la Ventana de bienvenida. Además de las tradicionales páginas web HTML, Dreamweaver permite crear y editar documentos basados en otros lenguajes de programación. Haga clic en el enlace PHP 
y después pulse el botón de aspa de la pestaña del documento.
8.El enlace Más del apartado Crear nuevo conduce al cuadro Nuevo documento que permite crear todo tipo de documentos editables con el programa. El enlace Sitio de Dreamweaver, por su parte, abre al cuadro de diálogo Definición del sitio. 
Compruébelo y salga del asistente pulsando el botón Cancelar.
El botón Sitio de Dreamweaver abre un asistente para la creación de un sitio.
En el apartado Elementos destacados, la Ventana de bienvenida ofrece diferentes enlaces que nos conducen a completos tutoriales sobre las principales novedades de Dreamweaver CS5. También puede conocer las novedades del programa y sus funciones más comunes utilizando los enlaces de la parte inferior de la ventana.
IMPORTANTE
Utilice el conmutador de espacios de trabajo para cambiar el espacio de trabajo. Elija la opción Programador y 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. Después elija Pantalla doble, espacio de trabajo que 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. Por último, vuelva al espacio de trabajo Diseñador.
002La nueva interfaz de usuario
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.
EL DISEÑO DE LA INTERFAZ de los diferentes componentes de Adobe Creative Suite CS5, entre los que se encuentra Dreamweaver, es ahora más cómodo e intuitivo y permite trabajar de forma más 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. Además, los documentos abiertos aparecen distribuidos en fichas independientes por las que se puede navegar fácilmente.
1.Uno de los cambios más llamativos de la intefaz de Dreaweaver CS5 es la desaparición de la Barra de la aplicación, que contenía un conmutador de espacios de trabajo, y otros controles de la aplicación y de los sitios. En su lugar, ahora es posible acceder a estas mismas funciones desde los distintos menús de la Barra de herramientas Estándar. Despliegue el menú Sitio y haga clic sobre la opción Nuevo sitio.
2.Accede así al cuadro Configuración del sitio para la creación de un nuevo sitio web. Ciérrelo pulsando el botón Cancelar.
3.Para seguir conociendo el entorno de Dreamweaver, cree un documento en blanco pulsando el botón HTML de la Ventana de bienvenida.
Sepa que también puede acceder a las diferentes opciones de creación de documentos desde la opción Nuevo del menú Archivo.
4.Bajo la Barra de herramientas Estándar está 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, recupere la vista Diseño pulsando en ese botón.
Compruebe cómo cambia el aspecto de la Ventana del documento al activar la vista Código y después vuelva a la predeterminada, la vista Diseño.
5.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. Debajo de la Ventana del documento hallamos 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
6.Desde el cuadro Propiedades de la página es posible modificar las características de la página. Ciérrelo pulsando Cancelar.
7.Por último, 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. 
Para poner en primer plano un panel basta con que pulse sobre su pestaña. Si hace doble clic, la minimizará.
8.También puede activar los paneles desde el menú Ventana. Para volver a mostrar en primer plano el panel Estilos CSS y acabar el ejercicio abra dicho menú y pulse sobre esa opción.
IMPORTANTE
Para cerrar un grupo de paneles, utilice la opción Cerrar grupo de fichas de su menú de opciones
003Crear documentos
IMPORTANTE
Puede acceder al cuadro de diálogo Nuevo documento usando la opción Nuevo del menú Archivo o bien pulsando la combinación de teclas Ctrl.+N. En ese cuadro deberá elegir el tipo de documento que va a crear con Dreamweaver..
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.
1.Para empezar, haga clic en el enlace HTML de la Ventana de bienvenida. Después, en el nuevo documento en blanco que se ha creado, abra 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, 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 Página de plantilla.
4.El panel central nos indica que no existen sitios almacenados. Seleccione la categoría Otro.
Los tipos de archivo de la categoría Otro están destinados a programadores experimentados.
5.Los tipos de archivo listados en esta categoría 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. Pulse sobre la categoría Página de muestra.
6.Haga clic sobre la opción Colores: Rojo del panel Página de muestra y pulse el botón Crear.
7.Aparece el nuevo documento CSS en pantalla. Pulse la combinación de teclas Ctrl.+N.
8.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.
9.Pulse el botón Preferencias y, en el cuadro Preferencias, haga clic en el botón de flecha de la opción Documento predeterminado para acceder a sus opciones.
10.Si la mayoría de las páginas de un sitio van a ser de un tipo de archivo concreto resulta aconsejable predeterminarlo. Mantenga seleccionada la opción HTML y haga clic en Aceptar.
Desde el cuadro de preferencias de Dreamweaver puede indicar qué tipo de documento será el documento predeterminado.
11.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 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. El cuadro de diálogo Nuevo documento de Dreamweaver ofrece el panel Página de muestra, con todas las características de estos estilos y una vista previa y una descripción del estilo seleccionado.
