Cómo colocar elementos en Dreamweaver para crear tres diseños en una cuadrícula de fluido

  1. Software
  2. Adobe
  3. Dreamweaver
  4. Cómo colocar elementos en Dreamweaver para crear tres diseños en una cuadrícula de fluido

Libro Relacionado

Dreamweaver CC para maniquíes

Por Janine Warner

Lo que hace que los diseños de rejilla fluida sean tan potentes es que puede cambiar la posición y el tamaño de los elementos en Dreamweaver para que estén dispuestos de forma diferente para cada uno de los tres diseños, creando diseños optimizados para pantallas móviles, de tableta y de escritorio. Para cambiar el ancho o la posición de un elemento, utilice las herramientas visuales de Dreamweaver.

Cómo editar el diseño móvil en Dreamweaver

Dreamweaver establece los estilos de tal manera que pasan en cascada por cada uno de los tres diseños. Eso significa que usted debe conseguir el diseño móvil de la manera que usted desea primero. A continuación, pase a la presentación de la tableta y modifique sólo los elementos que desea que aparezcan de forma diferente en la tableta. Por último, vea el diseño del escritorio. De nuevo, modifique sólo los elementos que desea que se visualicen de forma diferente.

Para editar el diseño del móvil, siga estas instrucciones.

  1. El área de trabajo cambia para mostrar la página en la vista previa del móvil, formateada con el correspondiente conjunto de estilos Nota: los tres pequeños iconos situados en la parte inferior derecha del espacio de trabajo proporcionan acceso a las vistas previas del móvil, la tableta y el escritorio. Cuando cambia de una a otra, no sólo cambia el tamaño del área de visualización, sino también el conjunto de estilos correspondiente aplicado a su página.
  2. Añada texto e imágenes a los elementos de su diseño de rejilla fluida de la misma manera que lo haría con cualquier otra página de Dreamweaver: puede copiar y pegar texto, así como aplicar etiquetas HTML y formato CSS.
  3. Seleccione un elemento en el área de diseño, el estilo CSS correspondiente se muestra en el panel de selectores, donde puede editarlo.
  4. Los estilos que desee aplicar a los tres diseños deben crearse cuando se seleccione el diseño móvil, ya que estos estilos se aplicarán a los tres diseños, a menos que sean sustituidos por otro estilo creado en los diseños de la tableta o del escritorio.

Cómo editar el diseño de la tableta en Dreamweaver

Después de obtener el diseño móvil de la forma en que lo desea, vaya al diseño del tamaño de la tableta y edite los estilos que se aplican a ese diseño.

Para editar el diseño de la tableta, siga estas instrucciones.

  1. El área de trabajo cambia para mostrar la página en la vista previa de la tableta, formateada con el conjunto de estilos correspondiente.
  2. Dreamweaver proporciona una colección de herramientas de edición visual que facilitan el ajuste del tamaño y la posición de los elementos de la rejilla de fluido. Si arrastra el mango de cualquier elemento de rejilla de fluido de izquierda a derecha, agrega un espacio de margen que obliga al elemento a permanecer a la derecha de la maqueta. Si arrastra un control de derecha a izquierda, cambiará el tamaño del elemento.
  3. Seleccione un elemento redimensionado que desee reposicionar y, a continuación, haga clic en la flecha Mover hacia arriba una fila.
  4. Para mover un elemento hacia abajo, haga clic en la flecha Iniciar nueva fila Nota: Haga clic en cada uno de los cuatro iconos para ocultar un elemento, moverlo hacia arriba o hacia abajo, duplicarlo o eliminarlo.

Cómo editar el diseño del escritorio en Dreamweaver

Después de obtener los diseños del móvil y de la tableta de la forma que desea, pase al diseño del tamaño del escritorio y edite los estilos que se aplican al mayor de los tres diseños.

Para editar el diseño del escritorio, siga estas instrucciones.

  1. El área de trabajo cambia para mostrar la página en la vista previa del escritorio, formateada con el conjunto de estilos correspondiente.
  2. Seleccione una flecha Swap en el centro de dos elementos cualesquiera para cambiar las posiciones de los dos elementos, los elementos Article1 y Article2 pueden intercambiarse simplemente haciendo clic en la flecha Swap entre ellos.
  3. Formatee el texto, las imágenes y otros elementos según lo desee para el diseño del escritorio y todas las demás opciones de formato visual que se incluyen en el diseño de la tableta.
  4. Elija File→Save All para guardar todos los archivos en el diseño de la rejilla de fluido. cuando edite un diseño de rejilla de fluido, estará realizando cambios en el archivo HTML así como en una hoja de estilo externa. Usando la opción Guardar todo se asegura de que ha guardado todos los archivos necesarios antes de previsualizarlos o publicar su sitio en un servidor web.

Cómo cambiar entre diseños en Dreamweaver

Es una buena práctica diseñar las distribuciones de la red de fluidos en este orden: primero la versión móvil, luego la versión para tabletas y finalmente la versión de escritorio. Sin embargo, puede cambiar entre estos tres diseños a medida que perfecciona sus diseños.

Tenga en cuenta las siguientes reglas generales y mejores prácticas:

  • Los diseños de cuadrícula fluida se crean utilizando consultas multimedia que actúan como divisores entre cada uno de los conjuntos de estilos que dan formato a los diseños móviles, de tableta y de escritorio.
  • Cuando edite estilos, debe tener cuidado de que está editando los estilos que se corresponden con el diseño en el que desea trabajar.
  • Si ve los estilos correspondientes que se crean automáticamente en la vista de código, verá que los anchos y otros tamaños se especifican hasta el cuarto punto decimal, por ejemplo, ancho: 48,2758%. Si cambia estos números en la vista de código, Dreamweaver ya no los ajustará automáticamente por usted.
  • Cuando cree estilos que desee aplicar a los tres diseños, primero seleccione Cualquier medio en el panel @Media del panel CSS Designer,

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *