Antes de sumergirse en la creación de un diseño de rejilla de fluidos complicado en Dreamweaver, considere la posibilidad de probar uno más sencillo. Empiece por crear una rejilla de fluido simple de una columna, siguiendo estas sencillas instrucciones:

  • Seleccione File→New La ventana Nuevo documento se abre. Nota: Asegúrese de haber completado el proceso de instalación del sitio antes de comenzar a trabajar en un nuevo diseño de red de fluidos.
  • En el lado izquierdo de la pantalla, seleccione Diseño de la rejilla de fluido.
  • Para añadir o eliminar columnas, seleccione el campo de texto sobre cada columna sucesivamente e introduzca el número de columnas que desee.
  • Seleccione el campo de texto debajo de cada diseño a su vez e introduzca un número que represente el porcentaje de espacio que desea que cubra el diseño cuando se visualice el diseño en una ventana del navegador. Por ejemplo, de forma predeterminada, el diseño del escritorio ocupa el 90 por ciento del espacio disponible, pero puede cambiarlo al 95 por ciento para obtener más espacio de diseño y reducir el espacio de margen.
  • Cambie el porcentaje del ancho de columna para alterar la cantidad de espacio de margen entre cada columna. por defecto, Dreamweaver establece que cada margen ocupe el 25 por ciento del espacio disponible.
  • Utilice la lista desplegable para especificar un tipo de documento: de forma predeterminada, los diseños de rejilla de fluido se crean utilizando el tipo de documento HTML5. A menos que necesite cambiar el tipo de documento para que sea más compatible con otros formatos utilizados en su sitio web, HMTL5 es la opción recomendada para los diseños web con capacidad de respuesta.
  • 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. Se abrirá un nuevo archivo HTML en el espacio de trabajo de Dreamweaver, pero aún no se ha guardado. 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 File→SaveThe Se abre el cuadro de diálogo Guardar como.
  • Se cierra el cuadro de diálogo Guardar como y aparece un aviso en Dreamweaver informándole de que el diseño de su red de fluidos 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 de su sitio. los tres archivos se agregan al panel Archivos y usted regresa al archivo HTML de nuevo nombre abierto en el espacio de trabajo de Dreamweaver.
  • Déle un título a la página introduciendo 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 el diseño de su red de fluidos.