MEDIAactive - Aprender Dreamweaver CS6 con 100 ejercicios prácticos

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 Otrodel 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.

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. Si necesita ayuda acerca del nuevo Diseño de cuadrícula fluida, puede pulsar el botón Ayuda del cuadro Nuevo documento.

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 una vez modificados estos valores por defecto desea recuperarlos, no dude en pulsar el botón Restablecer predeterminado en este mismo cuadro de diálogo. El campo Tipo de documento permite elegir entre diferentes tipos de archivo de salida, siendo el tipo predeterminado HTML 5. Despliegue este campo para comprobar las opciones que contiene y mantenga el valor por defecto.

5 En cuanto al campo Adjuntar archivo CSS, como su nombre indica, permite asignar al nuevo documento una hoja de estilos CSS determinada. Sin embargo, y dado que todavía no hemos trabajado con estos elementos, pulse el botón Crear.

6 En este caso, se abre el cuadro de diálogo Guardar archivo de hoja de estilos como, en el cual debemos asignar un nombre y una ubicación al nuevo documento. Como no vamos a trabajar con él, pulse el botón Guardar sin realizar ningún cambio. En la parte superior del documento generado aparece un pequeño recuadro con algunas indicaciones acerca de cómo completar páginas de este tipo.

IMPORTANTE

Una vez creado el documento con diseño de cuadrícula fluida, compruebe como en la barra de estado se muestran distintos iconos que le permitirán cambiar entre los modos de pantalla disponibles.

DREAMWEAVER ES UN EDITOR VISUAL de páginas web, por lo que no es necesario conocer el lenguaje de programación para editarlas. Pero el programa también permite la edición directa del código, de modo que los programadores experimentados pueden introducir directamente las instrucciones. La codificación de los documentos HTML se basa en una estructura de etiquetas. Las páginas cuentan con dos secciones de código: head (cabecera) y body (cuerpo). La primera contiene las etiquetas necesarias para que la página se vea correctamente en Internet, y la segunda, los elementos que conforman la página.

IMPORTANTE

En la categoría Tamaños de ventanadel cuadro de diálogo Preferenciasse pueden determinar tamaños preestablecidos de ventana y ajustar la velocidad de conexión para facilitar la valoración de la relación calidad/tamaño de las páginas durante su edición.