12 De este modo, el panel Inspector de código pasa a formar parte del conjunto encabezado por el panel Archivos. (10) El programa permite contraer en iconos todos los conjuntos de paneles a la vez, liberando el espacio de trabajo. Para ello, pulse sobre la doble punta de flecha situada en la parte superior derecha del espacio de paneles. (11)
Encontrará el comando Contraer en iconos también en el menú contextual de la cabecera de los conjuntos de paneles.
13 De 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 BrowserLab y 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ú Ventana y haga clic sobre el comando Mostrar paneles. (13)
14 Efectivamente, 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ú Ventana y pulse sobre el comando Mostrar paneles.
La tecla de función F4 también permite mostrar y ocultar los conjuntos de paneles.
Debe saber que puede encontrar el comando Mostrar paneles del menú Ventana también en el menú Ver.
RECUERDE
Los accesos a los paneles Insertar y Propiedades componen 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.
Lección 4. Crear nuevos documentos
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.
RECUERDE
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.
1 En 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.
2 El área de trabajo se muestra ahora vacía. Para acceder al cuadro de diálogo Nuevo documento, despliegue el menú Archivo y pulse sobre la opción Nuevo. (1)
3 Como ya vimos en una lección anterior, el cuadro de diálogo Nuevo documento está 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 blanco con un clic de ratón. (2)
También puede acceder al cuadro de diálogo Nuevo documento pulsando la combinación de teclas Ctrl + N.
4 Las 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)
5 Efectivamente, el panel central nos indica que no existen sitios almacenados. Seleccione la categoría Otro con un clic de ratón. (4)
Desde el cuadro de diálogo Nuevo documento puede seleccionar una plantilla de cualquiera de los sitios definidos de Dreamweaver, aunque también puede utilizar el panel Activos para 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ágina y pulsar en el botón Crear.
6 Los 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)
7 Dreamweaver 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