Aprender Dreamweaver CS6 con 100 ejercicios prácticos. MEDIAactive
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 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.
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.
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.
| 005 | Trabajar con el diseño y el código |
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 ventana del cuadro de diálogo Preferencias se 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.
1 Para realizar este ejercicio, descargue desde nuestra web el archivo muestra.htm y ábralo en Dreamweaver mediante el comando Abrir del menú Archivo.
2 La configuración del espacio de trabajo determina la vista en la que se muestran los archivos de forma predeterminada.