Cómo añadir elementos fluidos a un diseño en Dreamweaver

Después de crear un diseño de rejilla fluida en Dreamweaver, el siguiente paso es añadir

etiquetas u otros elementos para formar las secciones del diseño. Tiene dos opciones cuando diseña páginas en Dreamweaver CC: usar

etiquetas
o usar 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 agregan significado y estructura adicionales a su página web.

Para añadir

etiquetas , etiquetas HTML5 y otros elementos a un diseño de rejilla de fluido, siga estas instrucciones:

  • Seleccione Insert→Structure→Navigation.Alternativamente, puede hacer clic en Navegación en el panel Insertar estructura.
  • Cuando utilice las funciones de diseño de la rejilla de fluido, debe seleccionar esta opción cuando añada etiquetas.
  • En el cuadro de diálogo Insertar, seleccione si desea utilizar el selector de clase o ID para crear un nuevo estilo para la etiqueta que está insertando y, a continuación, introduzca un nombre para el nuevo estilo Incluso al insertar etiquetas HTML5, debe crear un estilo de clase o ID correspondiente que se pueda utilizar para formatear el elemento en los tres diseños.
  • La etiqueta se añade a la maqueta, formando un nuevo cuadro en la maqueta, y el nombre de estilo correspondiente se añade tres veces a la maqueta CSS.
  • Seleccione la etiqueta <div> inicial que se incluyó en la maqueta y luego haga clic en el icono de papelera que aparece en la parte inferior derecha de la etiqueta <div> para eliminarla, aunque puede mantener la etiqueta <div> inicial incluida en las maquetaciones de la rejilla de fluido, o puede cambiar el nombre del estilo aplicado.
  • Seleccione Insert→Structure→Article.Se abre el cuadro de diálogo Insertar artículo (similar al cuadro de diálogo Insertar encabezado).
  • 2. 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 utilizar el selector de clase o ID para crear un nuevo estilo para la etiqueta que está insertando e introduzca un nombre para el nuevo estilo.
  • La etiqueta se añade a la maqueta, formando un nuevo cuadro en la maqueta, y el nombre de estilo correspondiente se añade tres veces a la maqueta CSS.
  • Agregue tantos elementos como desee para su diseño repitiendo los pasos 6-9. Puede agregar elementos HTML5 a su diseño de rejilla de fluido haciendo clic en sus iconos correspondientes en el panel Insertar estructura: una navegación, un encabezado, dos artículos y un pie de página.nótese que en el código, Dreamweaver añade el prefijo fluido- al nombre de cada estilo que cree para sus diseños de rejilla de fluido.
  • Leave a Reply