Cómo crear un diseño de cuadrícula fluida de una columna en Dreamweaver

Antes de sumergirse en la creación de un diseño de cuadrícula fluida complicada en Dreamweaver, considere probar uno más simple. Comience por crear un diseño de cuadrícula fluida simple, de una sola columna, siguiendo estas sencillas instrucciones:

1. Elija Archivo-Nuevo.

   Se abre la ventana Nuevo documento. Nota: Asegúrese de que ha completado el proceso de configuración de sitio antes de empezar a trabajar en un nuevo diseño de cuadrícula fluida.

2. Desde el lado izquierdo de la pantalla, seleccione Cuadrícula Fluid Layout.

   Las opciones de la ventana Nuevo documento cambian a las opciones de cuadrícula de fluidos.

   

3. Especifique el número de columnas que desea en cada uno de los tres diseños.

   Para agregar o eliminar columnas, seleccione el campo de texto sobre cada columna a su vez e introduzca el número de columnas que desea.

4. Especifique el porcentaje de la ventana del navegador que desea cada diseño para cubrir.

   Seleccione el campo de texto debajo de cada diseño a su vez e introduzca un número que representa el porcentaje de espacio que desea que el diseño de la cubierta cuando el diseño se ve en una ventana del navegador. Por ejemplo, por defecto el diseño de escritorio está preparada para dar el 90 por ciento del espacio disponible, pero usted puede cambiarlo a 95 por ciento para disponer de más espacio de diseño y reducir el espacio de margen.

5. Cambiar el porcentaje de ancho de columna para alterar la cantidad de espacio de margen entre cada columna.

   De forma predeterminada, Dreamweaver establece cada margen para asumir el 25 por ciento del espacio disponible.

6. Utilice la lista desplegable para especificar un tipo de documento.

   Por defecto, los diseños de cuadrícula de fluidos se crean utilizando el tipo de documento HTML5. A menos que usted necesita cambiar el tipo de documento para ser más compatible con otros formatos utilizados en su sitio web, HMTL5 es la opción recomendada para diseños web sensibles.

7. Haga clic en Crear.

   El cuadro de diálogo Guardar como se abre listo para guardar un archivo CSS.

8. Introduzca un nombre para el archivo CSS y haga clic en Guardar.

   Un nuevo archivo HTML se abre en el espacio de trabajo de Dreamweaver, pero aún no se guarda. El archivo CSS que usted nombró se guarda y su nombre se hace visible en el panel Archivos.

   Nota: A diferencia del proceso de creación de otros tipos de páginas en Dreamweaver, el archivo CSS se guarda primero y el archivo HTML se guarda en un paso posterior.

9. Elija Archivo-Guardar

   Se abre el cuadro de diálogo Guardar como.

10. Introduzca un nombre para el archivo HTML y haga clic en Aceptar.

    El cuadro de diálogo Guardar como se cierra y aparece un aviso en Dreamweaver le informa de que su diseño de cuadrícula fluida requiere dos archivos adicionales: boilerplate.css y respond.min.js.

11. Haga clic en Aceptar para copiar los archivos boilerplate.css y respond.min.js a la carpeta del sitio.

    Los tres archivos se añaden al panel Archivos y volverá a su archivo HTML recién nombrado abierta en el espacio de trabajo de Dreamweaver.

    

12. Dar a la página de un título mediante la introducción de texto en el campo Título en la parte superior del espacio de trabajo.

Y eso completa el proceso de creación de un nuevo conjunto de archivos para su diseño de cuadrícula fluida.