MEDIAactive - Manual de Dreamweaver CS5

13De esta forma los paneles se muestran en forma de iconos (12)Como novedad en la versión CS5 de Dreamweaver, entre los paneles predeterminados se incluyen los denominados Adobe BrowserLaby Business Catalyst. El programa se integra con Adobe BrowserLab, uno de los nuevos servicios en línea de CS Live, que proporciona una solución rápida y precisa para realizar pruebas de compatibilidad con múltiples navegadores. Por su parte, Business Catalyst es una aplicación alojada que sustituye las herramientas de escritorio tradicionales por una plataforma central para diseñadores web. Además de efectuar la contracción de los paneles, también puede ocultarlos por completo para conseguir así todavía más espacio en el área de trabajo. Para ello, despliegue el menú Ventanay haga clic sobre el comando Mostrar paneles. (13)

14Efectivamente, los conjuntos de paneles han desaparecido y ahora dispone de toda la ventana central del programa para trabajar. (14)Para dar por acabado este ejercicio, despliegue de nuevo el menú Ventanay pulse sobre el comando Mostrar paneles.

La tecla de función F4también permite mostrar y ocultar los conjuntos de paneles.

Debe saber que puede encontrar el comando Mostrar panelesdel menú Ventanatambién en el menú Ver.

Los accesos a los paneles Insertary Propiedadescomponen el primer grupo de comandos del menú Ventana. Esto es debido a que se trata de los paneles de mayor importancia de la aplicación.

En los inicios de Internet las páginas Web eran creadas con simples editores de texto. En ellos se introducía el código HTML necesario, por lo que era imprescindible conocer los comandos y sintaxis propios de este lenguaje. Actualmente, el código HTML se ha visto complementado por otros de mayor complejidad. Dreamweaver CS5 ofrece un entorno flexible para trabajar con una gran variedad de documentos de diseño y desarrollo de páginas Web. Además de documentos HTML, es posible crear una gran variedad de documentos basados en texto (CFML, ASP, CSS) y archivos de código fuente (Visual Basic, .NET, C# y Java). El cuadro de diálogo Nuevo documento ordena en categorías los diferentes tipos de archivo con los que se puede trabajar con el programa. Evidentemente, con algunos de ellos sólo se podrá trabajar editando el código directamente, siendo imposible la edición visual, una de las grandes ventajas del trabajo con Dreamweaver. Los archivos generados, documentos y plantillas, pueden ser creados en blanco, sin contenido, o basados en los diseños de página preestablecidos ofrecidos por el programa.

Dreamweaver permite trabajar con una gran variedad de tipos de archivos, siendo el tipo de archivo principal el archivo HTML. Estos archivos HTML —o archivos en lenguaje de formato de hipertexto— incluyen un lenguaje basado en etiquetas que es el responsable de mostrar la página Web a través del navegador. Los archivos HTML se pueden almacenar con la extensión .html o .htm.

1En esta lección conoceremos el modo de crear diferentes tipos de archivo mediante el cuadro de diálogo Nuevo documento. Sin embargo, antes cerraremos el documento que creamos a modo de ejemplo en lecciones anteriores. Pulse en el botón de aspa situado en la pestaña de este documento.

2El área de trabajo se muestra ahora vacía. Para acceder al cuadro de diálogo Nuevo documento, despliegue el menú Archivoy pulse sobre la opción Nuevo. (1)

3Como ya vimos en una lección anterior, el cuadro de diálogo Nuevo documentoestá formado principalmente por tres columnas. La primera de ellas 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. En este caso, y estando seleccionado el tipo Página en blanco, se encuentra marcada la opción HTML, aunque esta categoría nos permite generar documentos basados en lenguajes tales como ActionScript, propio de Flash, CSS o JavaScript. Seleccione la categoría Plantilla en blancocon un clic de ratón. (2)

También puede acceder al cuadro de diálogo Nuevo documentopulsando la combinación de teclas Ctrl + N.

4Las opciones de esta categoría permiten crear una plantilla que presente uno de los formatos seleccionables en el listado central. Una vez almacenado como plantilla, un documento podrá ser utilizado como base para la creación de otras páginas. De momento no contamos con ninguna plantilla almacenada. Vamos a comprobarlo. Pulse sobre la categoría Página de plantilla. (3)

5Efectivamente, el panel central nos indica que no existen sitios almacenados. Seleccione la categoría Otrocon un clic de ratón. (4)

Desde el cuadro de diálogo Nuevo documentopuede seleccionar una plantilla de cualquiera de los sitios definidos de Dreamweaver, aunque también puede utilizar el panel Activospara crear un documento nuevo a partir de una plantilla existente.

Al elegir la categoría Otro, deberá seleccionar el tipo de página que desea crear en la columna Tipo de páginay pulsar en el botón Crear.

6Los tipos de archivo listados en esta categoría están destinados a programadores experimentados en estos lenguajes (incluidas páginas C#, VBScript), basados en texto, con los que no es posible trabajar de forma visual mediante el programa. Pulse esta vez sobre la categoría Página de muestra. (5)

7Dreamweaver cuenta con distintos archivos de marcos de página (carpeta Conjunto de marcos) y de diseño CSS (carpeta Hojas de estilo CSS) desarrollados por profesionales que pueden ser utilizados como punto de partida para el diseño de páginas propias. 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. La columna Página de muestraque aparece al pulsar sobre la categoría del mismo nombre proporciona todas las características de estos estilos, así como una vista previa y una descripción del estilo seleccionado. En este caso, y como ejemplo, haga clic sobre la opción Colores: Azulde este panel. (6)