Dreamweaver ja jQuery Mobile Integration

• Saattaa 3, 2024

Muutaman viime vuoden aikana, Dreamweaver^R on saanut yhä enemmän ominaisuuksia mobiilin web-sisällön ja mobiilisovellusten luomiseen. Tämä uusi päivitys CS6: een ei ole poikkeus. Dreamweaver CS6: lla on parannettu työnkulku jQuery Mobile -ominaisuuksilla.

Uuden mobiiliprojektin aloittaminen on helppoa uuden asiakirjan valintaikkunan uuden sivun näytteestä -vaihtoehdon avulla. Voit valita jQuery Mobile -näytteen Mobile Starters -kansiosta. Tämä näytesivu sisältää joitain valmiiksi rakennettuja grafiikka-, css- ja JavaScript-tiedostoja.

Tästä näytesivulta voimme aloittaa projektimme rakentamisen lisäämällä elementtejä sivulle.

1. Lisää-paneelissa valitsemme kategoriavalikosta jQuery Mobile. Tämä näyttää esivalmistetut komponentit.
   
   
2. Jos haluat lisätä uuden komponentin, asetamme kohdistimen kohtaan, johon uusi muotoiluelementti lisätään, ja napsautamme yhtä luettelon komponenteista. Valitaan esimerkiksi liukusäädin.
   
   Dreamweaver lisää automaattisesti liukusäätimen koodin sivuillemme. Live-näkymässä näemme uuden liukusäätimen.
   
   

Mutta tämä sivu on hiukan yleinen. Meillä on nopea ja helppo tapa muotoilla sivuamme uudella jQuery Mobile Swatches -paneelilla.

1. Napsauta valikkopalkissa Ikkuna - jQuery Mobile Värimallit. Jos et ole vielä ladannut tukevia graafisia, css- ja JavaScript-tiedostoja, näet ponnahdusikkunan. Lataa tiedostot napsauttamalla Kopioi.
   
   
2. Uusi jQuery Mobile Swatches -paneeli on tyhjä, kunnes valitset elementin näytesivulta. Kun valitset elementin, paneeli näyttää kyseiselle elementille käytettävissä olevat vastaavat mallit. Jos valitsemme otsikkoelementin, näemme useita otsikkoteemoja.
   
   
3. Jos siirrymme reaaliaikaiseen näkymään, voimme napsauttaa kutakin teemavärikappaletta nähdäksesi esikatselun siitä, miltä ne näyttävät.
   
   

Voimme toistaa tämän kaikille sivuiltamme sisustuselementeille. Kun teemme tämän, jQuery Mobile Swatches -paneeli näyttää vastaavat käytettävissä olevat teemavärit. Voimme myös käyttää Resolution Switcher -sovellusta esikatsellaksesi mallia, koska se näyttää työpöydän ja tablet-laitteen resoluutioilla.

Jos käytämme Paneelin alaosassa olevaa Hanki lisää teemoja -linkkiä, selain avautuu ThemeRoller for jQuery Mobile -sivustolle.

* Adobe toimitti minulle kopion tästä ohjelmistosta tarkistusta varten.

Tekijänoikeus 2018 Adobe Systems Incorporated. Kaikki oikeudet pidätetään. Adobe-tuotteen näyttökuva (t) uusitaan Adobe Systems Incorporatedin luvalla. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Ilotulitteet, Contribute, Captivate, Flash Catalyst ja Flash Paper on / on joko [a] rekisteröity tavaramerkki (t) tai Adobe Systems Incorporatedin tavaramerkki (t) Yhdysvalloissa ja / tai muissa maissa.

Video-Ohjeita: From Adobe XD Prototype to HTML, CSS & JS - Making an Animated Mega Menu (Saattaa 2024).