Dreamweaver y jQuery Mobile Integration

• Abril 24, 2024

En los últimos años, Dreamweaver^R Se le ha dado un número creciente de características para crear contenido web móvil y aplicaciones móviles. Esta nueva actualización a CS6 no es una excepción. Dreamweaver CS6 tiene un flujo de trabajo mejorado con las funciones de jQuery Mobile.

Comenzar un nuevo proyecto móvil es simple con la nueva opción Página de muestra en el cuadro de diálogo Nuevo documento. Puede elegir una muestra de jQuery Mobile de la carpeta Mobile Starters. Esta página de muestra viene con algunos archivos gráficos, CSS y JavaScript preconstruidos.

Desde esta página de muestra, podemos comenzar a construir nuestro proyecto agregando elementos a la página.

1. En el panel Insertar, elegiremos jQuery Mobile del menú de categorías. Esto mostrará los componentes preconstruidos.
   
   
2. Para agregar un nuevo componente, colocaremos nuestro cursor en la ubicación donde se agregará el nuevo elemento de diseño y haremos clic en uno de los componentes de la lista. Para nuestro ejemplo, elija un control deslizante.
   
   Dreamweaver agregará automáticamente el código del control deslizante a nuestra página. En la Vista en vivo, podemos ver nuestro nuevo control deslizante.
   
   

Pero esta página tiene un aspecto genérico. Tenemos una manera rápida y fácil de diseñar nuestra página con el nuevo panel jQuery Mobile Swatches.

1. Desde la barra de menú, haga clic en Ventana - Muestras móviles jQuery. Si aún no ha cargado los archivos gráficos, CSS y JavaScript compatibles, verá un cuadro de diálogo emergente. Haga clic en Copiar para cargar los archivos.
   
   
2. El nuevo panel jQuery Mobile Swatches está vacío hasta que seleccione un elemento en su página de muestra. Cuando selecciona un elemento, el panel mostrará las muestras correspondientes disponibles para ese elemento. Si seleccionamos el elemento de encabezado, veremos varios temas de encabezado.
   
   
3. Si cambiamos a la Vista en vivo, podemos hacer clic en cada muestra de tema para ver una vista previa de cómo se verán.
   
   

Podemos repetir esto para todos los elementos de diseño en nuestra página. Mientras hacemos esto, el panel jQuery Mobile Swatches mostrará las muestras de temas correspondientes disponibles. También podemos usar el Switcher de resolución para obtener una vista previa del diseño tal como se verá en las resoluciones de escritorio y tableta.

Si utilizamos el enlace Obtener más temas en la parte inferior del panel, se abrirá un navegador en el ThemeRoller para el sitio web jQuery Mobile.

* 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: Part 10: Using the jQuery Mobile Theme Roller in DreamWeaver (Abril 2024).