Dreamweaver und jQuery Mobile Integration

• Kann 7, 2024

In den letzten Jahren Dreamweaver^R. hat eine zunehmende Anzahl von Funktionen zum Erstellen von mobilen Webinhalten und mobilen Anwendungen erhalten. Dieses neue Upgrade auf CS6 ist keine Ausnahme. Dreamweaver CS6 verfügt über einen verbesserten Workflow mit jQuery Mobile-Funktionen.

Das Starten eines neuen mobilen Projekts ist mit der Option "Neue Seite aus Beispiel" im Dialogfeld "Neues Dokument" ganz einfach. Sie können ein jQuery Mobile-Beispiel aus dem Ordner Mobile Starters auswählen. Diese Beispielseite enthält einige vorgefertigte Grafik-, CSS- und JavaScript-Dateien.

Auf dieser Beispielseite können wir mit dem Erstellen unseres Projekts beginnen, indem wir der Seite Elemente hinzufügen.

1. Im Einfügefenster wählen wir jQuery Mobile aus dem Kategoriemenü. Dadurch werden die vorgefertigten Komponenten angezeigt.
   
   
2. Um eine neue Komponente hinzuzufügen, platzieren wir unseren Cursor an der Stelle, an der das neue Designelement hinzugefügt wird, und klicken auf eine der Komponenten in der Liste. In unserem Beispiel wählen wir einen Schieberegler.
   
   Dreamweaver fügt automatisch den Code für den Schieberegler zu unserer Seite hinzu. In der Live-Ansicht sehen wir unseren neuen Schieberegler.
   
   

Aber diese Seite sieht ein wenig allgemein aus. Mit dem neuen jQuery Mobile Swatches-Bedienfeld können wir unsere Seite schnell und einfach gestalten.

1. Klicken Sie in der Menüleiste auf Fenster - jQuery Mobile-Farbfelder. Wenn Sie die unterstützenden Grafik-, CSS- und JavaScript-Dateien noch nicht geladen haben, wird ein Popup-Dialogfeld angezeigt. Klicken Sie auf Kopieren, um die Dateien zu laden.
   
   
2. Das neue Bedienfeld für jQuery Mobile Swatches ist leer, bis Sie ein Element auf Ihrer Beispielseite auswählen. Wenn Sie ein Element auswählen, werden im Bedienfeld die entsprechenden für dieses Element verfügbaren Farbfelder angezeigt. Wenn wir das Header-Element auswählen, werden mehrere Header-Themen angezeigt.
   
   
3. Wenn wir zur Live-Ansicht wechseln, können wir auf jedes der Themenfelder klicken, um eine Vorschau des Aussehens anzuzeigen.
   
   

Wir können dies für alle Designelemente auf unserer Seite wiederholen. Währenddessen werden im Bereich "jQuery Mobile Swatches" die entsprechenden verfügbaren Themenfelder angezeigt. Wir können auch den Resolution Switcher verwenden, um eine Vorschau des Designs anzuzeigen, wie es auf den Desktop- und Tablet-Auflösungen angezeigt wird.

Wenn Sie den Link Weitere Themen abrufen unten im Bedienfeld verwenden, wird ein Browser für die Website ThemeRoller for jQuery Mobile geöffnet.

* Adobe hat mir zu Überprüfungszwecken eine Kopie dieser Software zur Verfügung gestellt.

Copyright 2018 Adobe Systems Incorporated. Alle Rechte vorbehalten. Screenshots von Adobe-Produkten mit Genehmigung von Adobe Systems Incorporated. Adobe, Photoshop, Photoshop-Album, Photoshop-Elemente, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere-Elemente, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst und Flash Paper ist / sind entweder [eine] eingetragene Marke (n) oder eine Marke (n) von Adobe Systems Incorporated in den USA und / oder anderen Ländern.

Video-Anleitungen: Part 10: Using the jQuery Mobile Theme Roller in DreamWeaver (Kann 2024).