Читать книгу Aprender Dreamweaver CS6 con 100 ejercicios prácticos - MEDIAactive - Страница 10

Оглавление
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. 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.



Aprender Dreamweaver CS6 con 100 ejercicios prácticos

Подняться наверх