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.
| 004 | Crear nuevos diseños de cuadrícula fluida |
COMO PRINCIPAL NOVEDAD EN SU VERSIÓN CS6, Dreamweaver proporciona una nueva opción para la creación de documentos. Se trata del denominado Diseño de cuadrícula fluida, cuya ejecución puede iniciarse tanto desde el menú Archivo como desde el cuadro de diálogo Nuevo documento. En cualquier caso, el programa proporciona una plantilla para crear diseños web compatibles con diferentes plataformas y navegadores con un eficaz sistema basado en CSS3.
IMPORTANTE
¿Qué es CSS3? Se trata de la última versión de las hojas de estilo CSS (Cascading Style Sheets); estas hojas de estilo permiten definir de manera eficiente la representación de las páginas creadas con un programa como Dreamweaver. CSS3 contiene desde opciones de sombreado y redondeado hasta funciones avanzadas de movimiento y transformación.
1 Para empezar, despliegue el menú Archivo y haga clic sobre el nuevo comando Nuevo diseño de cuadrícula fluida.
2 Esta acción nos conduce al cuadro de diálogo Nuevo documento, con el que hemos trabajado en el ejercicio anterior. El cuadro se abre directamente mostrando las características del tipo de archivo elegido, Diseño de cuadrícula fluida. La principal característica de esta nueva función es la posibilidad de elegir el tipo de pantalla de destino sobre la cual se visualizará su sitio o página web: móvil, tableta o escritorio. El ajuste del diseño se basa en porcentajes y es totalmente gráfico desde la misma ventana de creación. Como ejemplo, sobre el esquema de la tableta, cambie el número predeterminado de columnas por el valor 6.
3 El campo que muestra un porcentaje en la parte inferior de este esquema indica la proporción de la pantalla que ocupará la página o sitio web. En este caso, disminuya el valor hasta un 90%.
4 Si
