Cómo crear un diseño de cuadrícula fluida de una columna en dreamweaver
Video: Curso de Dreamweaver CS6. 18.7. Diseño de cuadricula fluida adaptable
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 una sola columna de diseño simple, rejilla de líquidos, siguiendo estas sencillas instrucciones:
Video: Curso de Dreamweaver CC. 18.7. Diseño de cuadrícula fluida
Seleccione Archivo → Nuevo.
Video: diseño de cuadricula fluida html5
Se abre la ventana Nuevo documento. Nota: Asegúrese de que ha completado el proceso de configuración de la sede antes de empezar a trabajar en un nuevo diseño de cuadrícula fluida.
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.
Especificar el número de columnas que desee en cada uno de los tres diseños.
Para añadir o eliminar columnas, seleccione el campo de texto a través de cada columna a su vez e introduzca el número de columnas que desee.
Especificar el porcentaje de la ventana del navegador que desea cada diseño de principio a fin.
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 se puede cambiar a un 95 por ciento para disponer de más espacio de diseño y reducir el espacio de margen.
Cambiar el porcentaje de ancho de columna para alterar la cantidad de espacio de margen entre cada columna.
De manera predeterminada, Dreamweaver establece cada margen a tomar hasta 25 por ciento del espacio disponible.
Utilice la lista desplegable para especificar un tipo de documento.
Por defecto, los esquemas de la red de fluidos se crean utilizando el tipo de documento HTML 5. A menos que necesite cambiar el tipo de documento para ser más compatible con otro tipo de formato utilizado en su sitio web, HMTL5 es la opción recomendada para diseños web adaptable.
Haga clic en Crear.
El cuadro de diálogo Guardar como se abre listo para guardar un archivo CSS.
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.
Seleccione Archivo → Guardar
Se abre el cuadro de diálogo Guardar como.
Introduzca un nombre para el archivo HTML y haga clic en OK.
El cuadro de diálogo Guardar como se cierra y aparece un aviso en Dreamweaver informándole de que su diseño de cuadrícula fluida requiere dos archivos adicionales: boilerplate.css y respond.min.js.
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.
Dar a la página un título mediante la introducción de texto en el campo de título en la parte superior del espacio de trabajo.
Y que completa el proceso de creación de un nuevo conjunto de archivos para su diseño de cuadrícula fluida.