Video: Curso de Dreamweaver CC. 18.7. Diseño de cuadrícula fluida. 2025
Después de crear un diseño de cuadrícula fluida en Dreamweaver, el siguiente paso es agregar etiquetas u otros elementos para componer las secciones del diseño. Tiene dos opciones cuando diseña páginas en Dreamweaver CC: use etiquetas o use etiquetas HTML5.
Ambos funcionan de manera similar en estos diseños fluidos, pero el uso de etiquetas HTML5, como las etiquetas y, tiene alguna ventaja, porque las etiquetas añaden significado y estructura adicionales a su página web.
Para agregar etiquetas, etiquetas HTML5 y otros elementos a un diseño de cuadrícula fluida, siga estas instrucciones:
-
Elija Insertar → Estructura → Navegación.
Alternativamente, puede hacer clic en Navegación en el panel Insertar estructura.
-
Seleccione la casilla de verificación Insertar como elemento fluido en el cuadro de diálogo Insertar.
Cuando usa las características de diseño de cuadrícula fluida, debe seleccionar esta opción cuando agrega etiquetas.
-
En el cuadro de diálogo Insertar, seleccione si desea usar la clase o selector de ID para crear un nuevo estilo para la etiqueta que está insertando y luego ingrese un nombre para el nuevo estilo.
Incluso cuando inserta etiquetas HTML5, debe crear una clase o estilo de ID correspondiente que se pueda usar para formatear el elemento en los tres diseños.
Los nombres de estilo de clase deben comenzar con un punto (.) Y los nombres de estilo de ID deben comenzar con el signo de libra (#).
-
Haga clic en Aceptar.
La etiqueta se agrega al diseño, formando un nuevo cuadro en el diseño, y el nombre de estilo correspondiente se agrega tres veces al diseño de CSS.
-
Seleccione la etiqueta inicial que se incluyó en el diseño y luego haga clic en el ícono pequeño de la papelera que aparece en la esquina inferior derecha de la etiqueta para eliminarlo.
Aunque puede mantener la etiqueta inicial incluida en los diseños de cuadrícula fluida, o puede cambiar el nombre del estilo aplicado.
-
Elija Insertar → Estructura → Artículo.
Se abre el cuadro de diálogo Insertar artículo (similar al cuadro de diálogo Insertar encabezado).
-
Seleccione la casilla de verificación Insertar como elemento fluido en el cuadro de diálogo Insertar.
-
En el cuadro de diálogo Insertar, seleccione si desea usar la clase o selector de ID para crear un nuevo estilo para la etiqueta que está insertando e ingrese un nombre para el nuevo estilo.
-
Haga clic en Aceptar.
La etiqueta se agrega al diseño, formando un nuevo cuadro en el diseño, y el nombre de estilo correspondiente se agrega tres veces al diseño de CSS.
-
Agregue tantos elementos como desee para su diseño repitiendo los pasos 6-9.
Puede agregar elementos HTML5 a su diseño de cuadrícula fluida haciendo clic en los íconos correspondientes en el panel Insertar estructura: una navegación, un encabezado, dos artículos y un pie de página .
Tenga en cuenta que en el código, Dreamweaver agrega el prefijo fluido- al nombre de cada estilo que cree para sus diseños de cuadrícula fluida.
