Integrazione di Dreamweaver e jQuery Mobile

• Aprile 29, 2024

Negli ultimi anni, Dreamweaver^R è stato assegnato un numero crescente di funzionalità per la creazione di contenuti Web mobili e applicazioni mobili. Questo nuovo aggiornamento a CS6 non fa eccezione. Dreamweaver CS6 ha un flusso di lavoro migliorato con le funzionalità di jQuery Mobile.

L'avvio di un nuovo progetto mobile è semplice con l'opzione Nuova pagina da esempio nella finestra di dialogo Nuovo documento. Puoi scegliere un esempio di jQuery Mobile dalla cartella Mobile Starter. Questa pagina di esempio include alcuni file grafici, CSS e JavaScript predefiniti.

Da questa pagina di esempio, possiamo iniziare a costruire il nostro progetto aggiungendo elementi alla pagina.

1. Nel pannello Inserisci, sceglieremo jQuery Mobile dal menu categoria. Questo visualizzerà i componenti predefiniti.
   
   
2. Per aggiungere un nuovo componente, posizioneremo il cursore nella posizione in cui verrà aggiunto il nuovo elemento di design e fare clic su uno dei componenti nell'elenco. Per il nostro esempio, scegliamo un cursore.
   
   Dreamweaver aggiungerà automaticamente il codice per il dispositivo di scorrimento alla nostra pagina. Nella vista Dal vivo, possiamo vedere il nostro nuovo controllo a scorrimento.
   
   

Ma questa pagina è un po 'generica. Abbiamo un modo semplice e veloce per dare uno stile alla nostra pagina con il nuovo pannello Campioni mobili jQuery.

1. Dalla barra dei menu, fare clic su Finestra - jQuery Mobile Swatches. Se non hai già caricato i file grafici, CSS e JavaScript di supporto, verrà visualizzata una finestra di dialogo a comparsa. Fai clic su Copia per caricare i file.
   
   
2. Il nuovo pannello Campioni jQuery Mobile è vuoto fino a quando non si seleziona un elemento nella pagina di esempio. Quando selezionate un elemento, il pannello mostrerà i corrispondenti campioni disponibili per quell'elemento. Se selezioniamo l'elemento header, vedremo diversi temi header.
   
   
3. Se passiamo alla vista Dal vivo, possiamo fare clic su ciascuno dei campioni del tema per vedere un'anteprima di come appariranno.
   
   

Possiamo ripeterlo per tutti gli elementi di design sulla nostra pagina. Mentre lo facciamo, il pannello Campioni mobili jQuery mostrerà i corrispondenti campioni tema disponibili. Possiamo anche usare lo Switcher di risoluzione per visualizzare in anteprima il design come apparirà sulle risoluzioni del desktop e del tablet.

Se utilizziamo il collegamento Ottieni più temi nella parte inferiore del pannello, verrà aperto un browser sul sito Web ThemeRoller per jQuery Mobile.

* Adobe mi ha fornito una copia di questo software a scopo di revisione.

Copyright 2018 Adobe Systems Incorporated. Tutti i diritti riservati. Le schermate dei prodotti Adobe sono state ristampate con l'autorizzazione di Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Catalyst Flash e Flash Paper è / sono [a] marchi registrati o marchi commerciali di Adobe Systems Incorporated negli Stati Uniti e / o in altri paesi.

Istruzioni Video: Demo Integrazione XML - Modulo Solo Hotel (Aprile 2024).