Nuevo diseño de rejilla fluida Dreamweaver CS6

• Abril 25, 2024

Si desarrolla sitios web simples o CMS complejos, siempre tiene en mente esta pregunta molesta: ¿estoy haciendo todo lo posible para dirigirme a todo tipo de audiencias y resoluciones de pantalla? Bueno Dreamweaver^R CS6 tiene nuevas características que hacen que esta sea una tarea más fácil.

En el pasado, uno necesitaría crear un archivo CSS diferente para cada resolución de pantalla diferente y usar la consulta de medios para asignar el archivo CSS requerido. Esto llevó mucho tiempo y se agregó al costo general del desarrollo del sitio, lo cual fue una mala noticia tanto para el desarrollador como para el cliente. Dreamweaver CS6 ha eliminado gran parte del trabajo de la creación de sitios web adaptativos.

Este nuevo proceso de flujo de trabajo depende del nuevo diseño de cuadrícula fluida, que es algo así como una plantilla de inicio con diseños y tipografía predeterminados para cada resolución de pantalla para su sitio web.

1. Simplemente haga clic en Archivo - Nuevo diseño de cuadrícula fluida desde la barra de menú.
   
   
2. En el cuadro de diálogo Nuevo documento, verá los valores predeterminados para esta nueva página web adaptativa. El ancho se fija para cada una de las diferentes resoluciones de pantalla.
   
   480px móvil
   Mesa 768px
   Escritorio 1232px
   
   
3. Tiene la opción de cambiar el número predeterminado de columnas y el porcentaje de ancho de columna para cada resolución de pantalla. Los valores predeterminados son:
   
   Móvil 5 columnas - 91%
   Tableta 8 columnas - 93%
   Escritorio 10 columnas - 90%
   
   
4. El espacio de trabajo predeterminado puede mostrar el código y las vistas de diseño. Como puede ver en la vista de diseño, el nuevo archivo ya tiene una etiqueta div. Puede cambiar la ID y la Clase predeterminadas para el div en el panel Propiedades.
   
   Por supuesto, su página web necesitará más de un div. Entonces podemos agregar más divs para el encabezado, navegación, principal, a un lado y pie de página.
   
   
5. Para agregar un nuevo div, elija Insertar etiqueta div de diseño de cuadrícula fluida en el panel Insertar.
   
   
6. En el cuadro de diálogo, puede nombrar la ID de la etiqueta.
   
   
7. Cuando hemos agregado todos los divs principales para nuestra página, podemos hacer clic y arrastrarlos para reposicionarlos dentro de la cuadrícula.
   
   

Se sugiere que comencemos a construir la versión móvil de nuestro sitio y avancemos a los tamaños más grandes. Puede comparar fácilmente los resultados visuales mientras trabaja utilizando el Switcher de resolución para resoluciones móviles, de tableta y de escritorio.

Cuando guardamos nuestro diseño, obtenemos un archivo HTML5 y CSS3 que funcionará para las tres resoluciones de pantalla. Si echamos un vistazo dentro de estos archivos, podemos encontrar información sobre cómo funcionan los archivos para crear nuestra página web adaptativa.

* Adobe me proporcionó una copia de este software para fines de revisión.

Derechos de autor 2018 Adobe Systems Incorporated. Todos los derechos reservados. Las capturas de pantalla del producto Adobe se reimprimieron con permiso de Adobe Systems Incorporated. Adobe, Photoshop, Álbum de Photoshop, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst y Flash Paper es / es [una] marca registrada [s] o una marca registrada [s] de Adobe Systems Incorporated en los Estados Unidos y / u otros países.

Instrucciones De Vídeo: Dreamweaver CS6 - responsive webdesign met een dynamisch layout grid (Abril 2024).