Lea este artículo para empezar a realizar diseños adaptables en Adobe Muse. Aprenda a crear sitios web adaptables para cualquier dispositivo.

Nota:

Adobe Muse ya no añadirá nuevas funciones y dejará de ofrecer asistencia técnica el 26 de marzo de 2020. Para obtener información detallada y asistencia, consulte Página de fin de servicio de Adobe Muse.

Cuando cree un sitio web adaptable, puede que no sea muy útil añadir puntos de rotura basados en un dispositivo, sistema operativo o marca de producto específicos. Hacer esto puede incrementar las labores de mantenimiento. En lugar de eso, el diseño y el contenido del sitio web deberían determinar dónde y cómo se añaden los puntos de rotura.

Siga leyendo para descubrir qué es lo recomendable al crear un sitio web adaptable con Adobe Muse.

1

Cree un sitio web. Elija Anchura fluida en el cuadro de diálogo Nuevo sitio.

Para evitar los espacios en blanco y otros problemas de diseño, defina las dimensiones de la página. Haga clic en Ajustes avanzados para definir el ancho mínimo y máximo de la página, y la altura mínima del sitio.


En el cuadro de diálogo Nuevo sitio, seleccione Anchura fluida.
En el cuadro de diálogo Nuevo sitio, seleccione Anchura fluida.

 

 

 

2

Abra una página maestra o una página individual. Fíjese en el punto de rotura predeterminado de 960 píxeles.


Fíjese en el punto de rotura predeterminado de 960 píxeles.
Fíjese en el punto de rotura predeterminado de 960 píxeles.

 

 

 

3

Empiece a disponer los elementos de la página en dicho punto de rotura, como el texto, las imágenes, las proyecciones de diapositivas y los widgets.


Diseñe su página web.
Diseñe su página web.

 

 

 

4

Utilice la barra de desplazamiento para simular distintos anchos del explorador. Observe cuál será el aspecto del sitio web con distintos anchos de explorador.


Utilice la barra de desplazamiento para ver cómo aparecerá el sitio web en diferentes anchuras de navegador.
Utilice la barra de desplazamiento para ver cómo aparecerá el sitio web en diferentes anchuras de navegador.

 

 

 

5

Añada un punto de rotura en todos los lugares de "rotura" del sitio web. Por ejemplo, en la imagen anterior, fíjese en cómo el cuadro de texto se sale del ancho al mover la barra de desplazamiento. Añada un punto de rotura en ese punto del ancho, donde se rompe el diseño.


Añada un punto de rotura donde se rompa el diseño.
Añada un punto de rotura donde se rompa el diseño.

 

 

 

6

Ajuste el diseño en el nuevo punto de rotura, de modo que el sitio web tenga un aspecto fantástico.


Ajuste del diseño en el punto de rotura
Ajuste el diseño en el punto de rotura

 

 

 

7

Puede seguir previsualizando el sitio hasta el ancho mínimo. Añada puntos de rotura y ajuste el diseño donde sea necesario.


Si sigue este modelo de trabajo, el sitio web tendrá un aspecto perfecto en cualquier ancho de explorador y en cualquier dispositivo. El diseño es independiente del tamaño del dispositivo o de la pantalla.

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea