Dreamweaver i jQuery Mobile Integration

• Travanj 25, 2024

Proteklih nekoliko godina Dreamweaver^R dobio je sve veći broj značajki za stvaranje mobilnog web sadržaja i mobilnih aplikacija. Ova nova nadogradnja na CS6 nije iznimka. Dreamweaver CS6 ima poboljšan tijek rada s jQuery Mobile značajkama.

Pokretanje novog mobilnog projekta jednostavno je s novom opcijom Stranica iz uzorka u dijaloškom okviru Novi dokument. Možete odabrati jQuery Mobile uzorak iz mape Mobile Starters. Na ovoj se stranici nalaze neke unaprijed izgrađene grafičke, css i JavaScript datoteke.

Na ovoj primjerenoj stranici možemo započeti graditi naš projekt dodavanjem elemenata na stranicu.

1. Na ploči Umetanje odabrat ćemo jQuery Mobile iz izbornika kategorije. To će prikazati unaprijed izgrađene komponente.
   
   
2. Da dodamo novu komponentu, postavit ćemo pokazivač na mjesto gdje će se dodati novi dizajnerski element i kliknuti na jednu od komponenti na popisu. Za naš primjer, odaberite klizač.
   
   Dreamweaver će automatski dodati kôd za klizač na našu stranicu. U Live prikazu možemo vidjeti našu novu kontrolu klizača.
   
   

Ali ova je stranica malo generičkog izgleda. Imamo brz i jednostavan način za oblikovanje stranice s novom jQuery Mobile Swatches pločom.

1. Na Menubaru kliknite Window - jQuery Mobile Swatchevi. Ako već niste učitali podržane grafičke, css i JavaScript datoteke, vidjet ćete skočni dijaloški okvir. Kliknite Kopiraj za učitavanje datoteka.
   
   
2. Nova ploča za jQuery Mobile Swatcheve prazna je dok ne odaberete element na svojoj uzorčnoj stranici. Kada odaberete element, na ploči će se prikazati odgovarajući uzorci dostupni za taj element. Ako odaberemo element zaglavlja, vidjet ćemo nekoliko tema zaglavlja.
   
   
3. Ako se prebacimo na Live View, možemo kliknuti na sve preglede tema da bismo vidjeli kako će izgledati.
   
   

To možemo ponoviti za sve elemente dizajna na našoj stranici. Dok to radimo, jQuery Mobile Swatchevi prikazat će odgovarajuće dostupne tematske serije. Također možemo koristiti Resolution Switcher za pregled dizajna kako će izgledati na rezoluciji radne površine i tableta.

Ako koristimo vezu Dohvati više tema na dnu ploče, otvorit će se preglednik na web lokaciji ThemeRoller za jQuery Mobile.

* Adobe mi je pružio kopiju ovog softvera radi pregleda.

Autorska prava 2018. Adobe Systems Incorporated. Sva prava pridržana. Snimke zaslona Adobe proizvoda preispisane su uz dozvolu tvrtke 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, Flash Catalyst i Flash Paper je ili su [a] registrirani zaštitni znak (i) ili zaštitni znak (Adobe) tvrtke Adobe Systems Incorporated u Sjedinjenim Državama i / ili drugim zemljama.

Upute Video: Part 10: Using the jQuery Mobile Theme Roller in DreamWeaver (Travanj 2024).